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.verify.tsx
+++ b/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
@@ -0,0 +1,110 @@
+import { ButtonContainer } from '@/components/button-container';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import { CurlPreview } from '@/components/onboarding/curl-preview';
+import VerifyListener from '@/components/onboarding/onboarding-verify-listener';
+import { LinkButton } from '@/components/ui/button';
+import { useTRPC } from '@/integrations/trpc/react';
+import { cn } from '@/lib/utils';
+import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
+import { useQuery } from '@tanstack/react-query';
+import { Link, createFileRoute, redirect } from '@tanstack/react-router';
+import { BoxSelectIcon } from 'lucide-react';
+
+export const Route = createFileRoute('/_steps/onboarding/$projectId/verify')({
+  head: () => ({
+    meta: [{ title: createEntityTitle('Verify', 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.event.events.queryOptions({
+        projectId: params.projectId,
+      }),
+    );
+  },
+  pendingComponent: FullPageLoadingState,
+});
+
+function Component() {
+  const { projectId } = Route.useParams();
+  const trpc = useTRPC();
+  const { data: events, refetch } = useQuery(
+    trpc.event.events.queryOptions({ projectId }),
+  );
+  const { data: project } = useQuery(
+    trpc.project.getProjectWithClients.queryOptions({ projectId }),
+  );
+
+  const isVerified = events && events.data.length > 0;
+
+  if (!project) {
+    return (
+      <FullPageEmptyState title="Project not found" icon={BoxSelectIcon} />
+    );
+  }
+
+  const client = project.clients[0];
+  if (!client) {
+    return <FullPageEmptyState title="Client not found" icon={BoxSelectIcon} />;
+  }
+
+  return (
+    <div className="p-4 col gap-8">
+      <VerifyListener
+        project={project}
+        client={client}
+        events={events?.data ?? []}
+        onVerified={() => refetch()}
+      />
+
+      <CurlPreview project={project} />
+
+      <ButtonContainer>
+        <LinkButton
+          href={`/onboarding/${project.id}/connect`}
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+
+        <div className="flex items-center gap-8">
+          {!isVerified && (
+            <Link
+              to={'/$organizationId/$projectId'}
+              params={{
+                organizationId: project!.organizationId,
+                projectId: project!.id,
+              }}
+              className=" text-muted-foreground underline"
+            >
+              Skip for now
+            </Link>
+          )}
+
+          <LinkButton
+            to={'/$organizationId/$projectId'}
+            params={{
+              organizationId: project!.organizationId,
+              projectId: project!.id,
+            }}
+            size="lg"
+            className={cn(
+              'min-w-28 self-start',
+              !isVerified && 'pointer-events-none select-none opacity-20',
+            )}
+          >
+            Your dashboard
+          </LinkButton>
+        </div>
+      </ButtonContainer>
+    </div>
+  );
+}