feat: dashboard v2, esm, upgrades (#211)

* esm * wip * wip * wip * wip * wip * wip * subscription notice * wip * wip * wip * fix envs * fix: update docker build * fix * esm/types * delete dashboard :D * add patches to dockerfiles * update packages + catalogs + ts * wip * remove native libs * ts * improvements * fix redirects and fetching session * try fix favicon * fixes * fix * order and resize reportds within a dashboard * improvements * wip * added userjot to dashboard * fix * add op * wip * different cache key * improve date picker * fix table * event details loading * redo onboarding completely * fix login * fix * fix * extend session, billing and improve bars * fix * reduce price on 10M
2025-10-16 12:27:44 +02:00
parent 436e81ecc9
commit 81a7e5d62e
741 changed files with 32695 additions and 16996 deletions
--- a/apps/start/src/routes/_steps.onboarding.$projectId.connect.tsx
+++ b/apps/start/src/routes/_steps.onboarding.$projectId.connect.tsx
@@ -0,0 +1,90 @@
+import { ButtonContainer } from '@/components/button-container';
+import CopyInput from '@/components/forms/copy-input';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import ConnectApp from '@/components/onboarding/connect-app';
+import ConnectBackend from '@/components/onboarding/connect-backend';
+import ConnectWeb from '@/components/onboarding/connect-web';
+import { LinkButton } from '@/components/ui/button';
+import { useClientSecret } from '@/hooks/use-client-secret';
+import { useTRPC } from '@/integrations/trpc/react';
+import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
+import { useQuery } from '@tanstack/react-query';
+import { createFileRoute, redirect } from '@tanstack/react-router';
+import { LockIcon, XIcon } from 'lucide-react';
+
+export const Route = createFileRoute('/_steps/onboarding/$projectId/connect')({
+  head: () => ({
+    meta: [
+      { title: createEntityTitle('Connect data', PAGE_TITLES.ONBOARDING) },
+    ],
+  }),
+  beforeLoad: async ({ context }) => {
+    if (!context.session.session) {
+      throw redirect({ to: '/onboarding' });
+    }
+  },
+  component: Component,
+  loader: async ({ context, params }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.project.getProjectWithClients.queryOptions({
+        projectId: params.projectId,
+      }),
+    );
+  },
+  pendingComponent: FullPageLoadingState,
+});
+
+function Component() {
+  const { projectId } = Route.useParams();
+  const trpc = useTRPC();
+  const { data: project } = useQuery(
+    trpc.project.getProjectWithClients.queryOptions({ projectId }),
+  );
+  const client = project?.clients[0];
+  const [secret] = useClientSecret();
+
+  if (!client) {
+    return (
+      <FullPageEmptyState
+        title="No project found"
+        description="The project you are looking for does not exist. Please reload the page."
+        icon={XIcon}
+      />
+    );
+  }
+
+  return (
+    <div className="p-4 col gap-8">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2 text-xl font-bold capitalize">
+          <LockIcon className="size-4" />
+          Credentials
+        </div>
+        <CopyInput label="Client ID" value={client.id} />
+        <CopyInput label="Secret" value={secret} />
+      </div>
+      <div className="h-px bg-muted -mx-4" />
+      {project?.types?.map((type) => {
+        const Component = {
+          website: ConnectWeb,
+          app: ConnectApp,
+          backend: ConnectBackend,
+        }[type];
+
+        return <Component key={type} client={{ ...client, secret }} />;
+      })}
+      <ButtonContainer>
+        <div />
+        <LinkButton
+          href={'/onboarding/$projectId/verify'}
+          params={{ projectId }}
+          size="lg"
+          className="min-w-28 self-start"
+        >
+          Next
+        </LinkButton>
+      </ButtonContainer>
+    </div>
+  );
+}