Add project breakdown page

web-admin/src/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import ExploreEmbed from "@rilldata/web-admin/features/embeds/ExploreEmbed.svelte";
+  import { useValidExplores } from "@rilldata/web-common/features/dashboards/selectors";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  $: instanceId = $runtime.instanceId;
+  $: explores = useValidExplores(instanceId);
+  $: exploreName = $explores.data?.[0]?.meta?.name?.name;
+</script>
+
+{#if exploreName}
+  <ExploreEmbed {instanceId} {exploreName} />
+{/if}

web-admin/src/routes/[organization]/-/project-breakdown/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ProjectBreakdownDashboard from "@rilldata/web-admin/features/organizations/project-breakdown/ProjectBreakdownDashboard.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { invalidateRuntimeQueries } from "@rilldata/web-common/runtime-client/invalidation";
+  import RuntimeProvider from "@rilldata/web-common/runtime-client/RuntimeProvider.svelte";
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+  $: ({ runtime } = data);
+  // Seeing the data using the same project but with different jwt will not get automatically invalidated.
+  // Since we do not have jwt as part of the query key we need to invalidate the queries for this instanceId
+  $: invalidateRuntimeQueries(queryClient, runtime.instanceId);
+</script>
+
+<RuntimeProvider
+  instanceId={runtime.instanceId}
+  host={runtime.host}
+  jwt={runtime.jwt.token}
+  authContext={runtime.jwt.authContext}
+>
+  <ProjectBreakdownDashboard />
+</RuntimeProvider>

web-admin/src/routes/[organization]/-/project-breakdown/+page.ts

@@ -0,0 +1,34 @@
+import {
+  adminServiceGetBillingProjectCredentials,
+  getAdminServiceGetBillingProjectCredentialsQueryKey,
+} from "@rilldata/web-admin/client";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { fixLocalhostRuntimePort } from "@rilldata/web-common/runtime-client/fix-localhost-runtime-port";
+import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+export const load = async ({ params, parent }) => {
+  const { organizationPermissions } = await parent();
+  if (!organizationPermissions.manageProjects) {
+    // TODO
+  }
+  const { organization } = params;
+  const billingProjectCredsResp = await queryClient.fetchQuery({
+    queryKey: getAdminServiceGetBillingProjectCredentialsQueryKey({
+      organization,
+    }),
+    queryFn: () => adminServiceGetBillingProjectCredentials({ organization }),
+  });
+  const runtime: Runtime = {
+    host: fixLocalhostRuntimePort(billingProjectCredsResp.runtimeHost),
+    instanceId: billingProjectCredsResp.instanceId,
+    jwt: {
+      token: billingProjectCredsResp.accessToken,
+      authContext: "embed",
+      receivedAt: Date.now(),
+    },
+  };
+
+  return {
+    runtime,
+  };
+};