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/_public.onboarding.tsx
+++ b/apps/start/src/routes/_public.onboarding.tsx
@@ -0,0 +1,126 @@
+import { Or } from '@/components/auth/or';
+import { SignInGithub } from '@/components/auth/sign-in-github';
+import { SignInGoogle } from '@/components/auth/sign-in-google';
+import { SignUpEmailForm } from '@/components/auth/sign-up-email-form';
+import FullPageLoadingState from '@/components/full-page-loading-state';
+import { LogoSquare } from '@/components/logo';
+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 { motion } from 'framer-motion';
+import { MailIcon } from 'lucide-react';
+import { z } from 'zod';
+const validateSearch = z.object({
+  inviteId: z.string().optional(),
+});
+export const Route = createFileRoute('/_public/onboarding')({
+  head: () => ({
+    meta: [
+      { title: createEntityTitle('Create an account', PAGE_TITLES.ONBOARDING) },
+    ],
+  }),
+  beforeLoad: async ({ context }) => {
+    if (context.session.session) {
+      throw redirect({ to: '/' });
+    }
+  },
+  component: Component,
+  validateSearch,
+  loader: async ({ context, location }) => {
+    const search = validateSearch.safeParse(location.search);
+    if (search.success && search.data.inviteId) {
+      await context.queryClient.prefetchQuery(
+        context.trpc.organization.getInvite.queryOptions({
+          inviteId: search.data.inviteId,
+        }),
+      );
+    }
+  },
+  pendingComponent: FullPageLoadingState,
+});
+
+function Component() {
+  const { inviteId } = Route.useSearch();
+  const trpc = useTRPC();
+  const { data: invite } = useQuery(
+    trpc.organization.getInvite.queryOptions(
+      {
+        inviteId: inviteId,
+      },
+      {
+        enabled: !!inviteId,
+      },
+    ),
+  );
+  return (
+    <div className="col gap-8 w-full text-left">
+      <div>
+        <LogoSquare className="size-12 mb-8 md:hidden" />
+        <h1 className="text-3xl font-bold text-foreground mb-2">
+          Create an account
+        </h1>
+        <p className="text-muted-foreground">
+          Let's start with creating your account. By creating an account you
+          accept the{' '}
+          <a
+            target="_blank"
+            href="https://openpanel.dev/terms"
+            rel="noreferrer"
+            className="underline hover:text-foreground transition-colors"
+          >
+            Terms of Service
+          </a>{' '}
+          and{' '}
+          <a
+            target="_blank"
+            href="https://openpanel.dev/privacy"
+            rel="noreferrer"
+            className="underline hover:text-foreground transition-colors"
+          >
+            Privacy Policy
+          </a>
+          .
+        </p>
+      </div>
+
+      {invite && !invite.isExpired && (
+        <div className="bg-card border border-border rounded-lg p-6 mb-6">
+          <h2 className="text-xl font-semibold mb-2">
+            Invitation to {invite.organization?.name}
+          </h2>
+          <p className="text-muted-foreground">
+            After you have created your account, you will be added to the
+            organization.
+          </p>
+        </div>
+      )}
+      {invite?.isExpired && (
+        <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6 mb-6">
+          <h2 className="text-xl font-semibold mb-2 text-destructive">
+            Invitation to {invite.organization?.name} has expired
+          </h2>
+          <p className="text-muted-foreground">
+            The invitation has expired. Please contact the organization owner to
+            get a new invitation.
+          </p>
+        </div>
+      )}
+
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <SignInGithub type="sign-up" inviteId={inviteId} />
+          <SignInGoogle type="sign-up" inviteId={inviteId} />
+        </div>
+
+        <Or className="my-6" />
+
+        <div className="flex items-center gap-2 font-semibold mb-4 text-lg">
+          <MailIcon className="size-4" />
+          Sign up with email
+        </div>
+        <SignUpEmailForm inviteId={inviteId} />
+      </div>
+    </div>
+  );
+}