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.tsx
+++ b/apps/start/src/routes/_steps.tsx
@@ -0,0 +1,75 @@
+import { OnboardingLeftPanel } from '@/components/onboarding-left-panel';
+import { SkeletonDashboard } from '@/components/skeleton-dashboard';
+import { cn } from '@/utils/cn';
+import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
+import {
+  Outlet,
+  createFileRoute,
+  redirect,
+  useLocation,
+  useMatchRoute,
+} from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_steps')({
+  component: OnboardingLayout,
+  head: () => ({
+    meta: [{ title: createEntityTitle('Project', PAGE_TITLES.ONBOARDING) }],
+  }),
+});
+
+function OnboardingLayout() {
+  return (
+    <div className="relative min-h-screen pt-32 pb-8">
+      <div className="fixed inset-0 hidden md:block">
+        <SkeletonDashboard />
+      </div>
+      <div className="relative z-10 border bg-background rounded-lg shadow-xl shadow-muted/50 max-w-xl mx-auto">
+        <Progress />
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+function Progress() {
+  const steps = [
+    {
+      name: 'Create project',
+      match: '/onboarding/project',
+    },
+    {
+      name: 'Connect data',
+      match: '/onboarding/$projectId/connect',
+    },
+    {
+      name: 'Verify',
+      match: '/onboarding/$projectId/verify',
+    },
+  ];
+  const matchRoute = useMatchRoute();
+
+  const currentStep = steps.find((step) =>
+    matchRoute({
+      // @ts-expect-error
+      from: step.match,
+      fuzzy: false,
+    }),
+  );
+
+  return (
+    <div className="row gap-4 p-4 border-b justify-between items-center flex-1 w-full">
+      <div className="font-bold">{currentStep?.name ?? 'Onboarding'}</div>
+      <div className="row gap-4">
+        {steps.map((step) => (
+          <div
+            className={cn(
+              'w-10 h-2 rounded-full bg-muted',
+              currentStep === step && 'w-20 bg-primary',
+            )}
+            key={step.match}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}