onboarding completed

README.md

@@ -12,7 +12,7 @@
     ·
     <a href="https://dashboard.openpanel.dev">Sign in</a>
     ·
-    <a href="https://discord.gg/X9NX3RB42m">Discord</a>
+    <a href="https://go.openpanel.dev/discord">Discord</a>
     ·
     <a href="https://twitter.com/CarlLindesvard">X/Twitter</a>
     ·

apps/api/package.json

@@ -26,6 +26,7 @@
     "request-ip": "^3.3.0",
     "sharp": "^0.33.2",
     "sqlstring": "^2.3.3",
+    "superjson": "^1.13.3",
     "ua-parser-js": "^1.0.37",
     "url-metadata": "^4.1.0",
     "uuid": "^9.0.1"

apps/api/src/controllers/live.controller.ts

@@ -1,10 +1,15 @@
 import type { FastifyReply, FastifyRequest } from 'fastify';
 import { escape } from 'sqlstring';
+import superjson from 'superjson';
 import type * as WebSocket from 'ws';
 
-import { getSafeJson } from '@openpanel/common';
+import { getSuperJson } from '@openpanel/common';
 import type { IServiceCreateEventPayload } from '@openpanel/db';
-import { getEvents, getLiveVisitors } from '@openpanel/db';
+import {
+  getEvents,
+  getLiveVisitors,
+  transformMinimalEvent,
+} from '@openpanel/db';
 import { redis, redisPub, redisSub } from '@openpanel/redis';
 
 export function getLiveEventInfo(key: string) {
@@ -19,13 +24,14 @@ export async function test(
   }>,
   reply: FastifyReply
 ) {
-  const [event] = await getEvents(
-    `SELECT * FROM events WHERE project_id = ${escape(req.params.projectId)} AND name = 'screen_view' LIMIT 1`
+  const events = await getEvents(
+    `SELECT * FROM events WHERE project_id = ${escape(req.params.projectId)} AND name = 'screen_view' LIMIT 500`
   );
+  const event = events[Math.floor(Math.random() * events.length)];
   if (!event) {
     return reply.status(404).send('No event found');
   }
-  redisPub.publish('event', JSON.stringify(event));
+  redisPub.publish('event', superjson.stringify(event));
   redis.set(
     `live:event:${event.projectId}:${Math.random() * 1000}`,
     '',
@@ -52,7 +58,7 @@ export function wsVisitors(
 
   const message = (channel: string, message: string) => {
     if (channel === 'event') {
-      const event = getSafeJson<IServiceCreateEventPayload>(message);
+      const event = getSuperJson<IServiceCreateEventPayload>(message);
       if (event?.projectId === params.projectId) {
         getLiveVisitors(params.projectId).then((count) => {
           connection.socket.send(String(count));
@@ -80,7 +86,25 @@ export function wsVisitors(
   });
 }
 
-export function wsEvents(
+export function wsEvents(connection: { socket: WebSocket }) {
+  redisSub.subscribe('event');
+
+  const message = (channel: string, message: string) => {
+    const event = getSuperJson<IServiceCreateEventPayload>(message);
+    if (event) {
+      connection.socket.send(superjson.stringify(transformMinimalEvent(event)));
+    }
+  };
+
+  redisSub.on('message', message);
+
+  connection.socket.on('close', () => {
+    redisSub.unsubscribe('event');
+    redisSub.off('message', message);
+  });
+}
+
+export function wsProjectEvents(
   connection: {
     socket: WebSocket;
   },
@@ -95,9 +119,9 @@ export function wsEvents(
   redisSub.subscribe('event');
 
   const message = (channel: string, message: string) => {
-    const event = getSafeJson<IServiceCreateEventPayload>(message);
+    const event = getSuperJson<IServiceCreateEventPayload>(message);
     if (event?.projectId === params.projectId) {
-      connection.socket.send(JSON.stringify(event));
+      connection.socket.send(superjson.stringify(transformMinimalEvent(event)));
     }
   };
 

apps/api/src/routes/live.router.ts

@@ -17,7 +17,12 @@ const liveRouter: FastifyPluginCallback = (fastify, opts, done) => {
       { websocket: true },
       controller.wsVisitors
     );
-    fastify.get('/events/:projectId', { websocket: true }, controller.wsEvents);
+    fastify.get('/events', { websocket: true }, controller.wsEvents);
+    fastify.get(
+      '/events/:projectId',
+      { websocket: true },
+      controller.wsProjectEvents
+    );
     done();
   });
 

apps/dashboard/package.json

@@ -21,6 +21,7 @@
     "@openpanel/db": "workspace:^",
     "@openpanel/nextjs": "0.0.8-beta",
     "@openpanel/queue": "workspace:^",
+    "@openpanel/sdk-info": "workspace:^",
     "@openpanel/validation": "workspace:^",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -60,7 +61,10 @@
     "date-fns": "^3.3.1",
     "embla-carousel-react": "8.0.0-rc22",
     "flag-icons": "^7.1.0",
+    "framer-motion": "^11.0.28",
     "hamburger-react": "^2.5.0",
+    "input-otp": "^1.2.4",
+    "javascript-time-ago": "^2.5.9",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "lottie-react": "^2.4.0",

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-list-item.tsx

@@ -1,22 +1,27 @@
 'use client';
 
 import { useState } from 'react';
+import { SerieIcon } from '@/components/report/chart/SerieIcon';
 import { Tooltiper } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import { cn } from '@/utils/cn';
 import Link from 'next/link';
 
-import type { IServiceCreateEventPayload } from '@openpanel/db';
+import type {
+  IServiceCreateEventPayload,
+  IServiceEventMinimal,
+} from '@openpanel/db';
 
 import { EventDetails } from './event-details';
 import { EventIcon } from './event-icon';
 
-type EventListItemProps = IServiceCreateEventPayload;
+type EventListItemProps = IServiceEventMinimal | IServiceCreateEventPayload;
 
 export function EventListItem(props: EventListItemProps) {
   const { organizationSlug, projectId } = useAppParams();
-  const { createdAt, name, path, duration, meta, profile } = props;
+  const { createdAt, name, path, duration, meta } = props;
+  const profile = 'profile' in props ? props.profile : null;
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
   const number = useNumber();
@@ -45,28 +50,50 @@ export function EventListItem(props: EventListItemProps) {
     return null;
   };
 
+  const isMinimal = 'minimal' in props;
+
   return (
     <>
-      <EventDetails
-        event={props}
-        open={isDetailsOpen}
-        setOpen={setIsDetailsOpen}
-      />
+      {!isMinimal && (
+        <EventDetails
+          event={props}
+          open={isDetailsOpen}
+          setOpen={setIsDetailsOpen}
+        />
+      )}
       <button
-        onClick={() => setIsDetailsOpen(true)}
+        onClick={() => {
+          if (!isMinimal) {
+            setIsDetailsOpen(true);
+          }
+        }}
         className={cn(
           'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
           meta?.conversion &&
             `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`
         )}
       >
-        <div className="flex items-center gap-4 text-left text-sm">
-          <EventIcon size="sm" name={name} meta={meta} projectId={projectId} />
-          <span>
-            <span className="font-medium">{renderName()}</span>
-            {'  '}
-            {renderDuration()}
-          </span>
+        <div>
+          <div className="flex items-center gap-4 text-left text-sm">
+            <EventIcon
+              size="sm"
+              name={name}
+              meta={meta}
+              projectId={projectId}
+            />
+            <span>
+              <span className="font-medium">{renderName()}</span>
+              {'  '}
+              {renderDuration()}
+            </span>
+          </div>
+          <div className="pl-10">
+            <div className="flex origin-left scale-75 gap-1">
+              <SerieIcon name={props.country} />
+              <SerieIcon name={props.os} />
+              <SerieIcon name={props.browser} />
+            </div>
+          </div>
         </div>
         <div className="flex gap-4">
           <Tooltiper

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/event-listener.tsx

@@ -1,20 +1,19 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { useAppParams } from '@/hooks/useAppParams';
+import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
-import { useQueryClient } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import useWebSocket from 'react-use-websocket';
 import { toast } from 'sonner';
 
-import type { IServiceCreateEventPayload } from '@openpanel/db';
+import type { IServiceEventMinimal } from '@openpanel/db';
 
 const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
   ssr: false,
@@ -24,21 +23,13 @@ const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
 export default function EventListener() {
   const router = useRouter();
   const { projectId } = useAppParams();
-  const ws = String(process.env.NEXT_PUBLIC_API_URL)
-    .replace(/^https/, 'wss')
-    .replace(/^http/, 'ws');
   const [counter, setCounter] = useState(0);
-  const [socketUrl] = useState(`${ws}/live/events/${projectId}`);
 
-  useWebSocket(socketUrl, {
-    shouldReconnect: () => true,
-    onMessage(payload) {
-      const event = JSON.parse(payload.data) as IServiceCreateEventPayload;
-      if (event?.name) {
-        setCounter((prev) => prev + 1);
-        toast(`New event ${event.name} from ${event.country}!`);
-      }
-    },
+  useWS<IServiceEventMinimal>(`/live/events/${projectId}`, (event) => {
+    if (event?.name) {
+      setCounter((prev) => prev + 1);
+      toast(`New event ${event.name} from ${event.country}!`);
+    }
   });
 
   return (

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout.tsx

@@ -28,22 +28,16 @@ export default async function AppLayout({
 
   if (!organizations.find((item) => item.slug === organizationSlug)) {
     return (
-      <FullPageEmptyState
-        title="Could not find organization"
-        className="min-h-screen"
-      >
-        The organization you are looking for could not be found.
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The organization you were looking for could not be found.
       </FullPageEmptyState>
     );
   }
 
   if (!projects.find((item) => item.id === projectId)) {
     return (
-      <FullPageEmptyState
-        title="Could not find project"
-        className="min-h-screen"
-      >
-        The project you are looking for could not be found.
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The project you were looking for could not be found.
       </FullPageEmptyState>
     );
   }

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/profile/logout.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { buttonVariants } from '@/components/ui/button';
+import SignOutButton from '@/components/sign-out-button';
 import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
-import { SignOutButton } from '@clerk/nextjs';
 
 export function Logout() {
   return (
@@ -14,10 +13,7 @@ export function Logout() {
         <p className="mb-4">
           Sometime&apos;s you need to go. See you next time
         </p>
-        <SignOutButton
-          // @ts-expect-error
-          className={buttonVariants({ variant: 'destructive' })}
-        />
+        <SignOutButton />
       </WidgetBody>
     </Widget>
   );

apps/dashboard/src/app/(app)/[organizationSlug]/create-project.tsx

@@ -1,79 +0,0 @@
-'use client';
-
-import { LogoSquare } from '@/components/logo';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useAppParams } from '@/hooks/useAppParams';
-import { api, handleError } from '@/trpc/client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { SaveIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-const validation = z.object({
-  name: z.string().min(1),
-});
-
-type IForm = z.infer<typeof validation>;
-
-export function CreateProject() {
-  const params = useAppParams();
-  const router = useRouter();
-  const form = useForm<IForm>({
-    resolver: zodResolver(validation),
-  });
-  const mutation = api.project.create.useMutation({
-    onError: handleError,
-    onSuccess() {
-      toast.success('Project created');
-      router.refresh();
-    },
-  });
-  const onSubmit: SubmitHandler<IForm> = (values) => {
-    mutation.mutate({
-      name: values.name,
-      organizationSlug: params.organizationSlug,
-    });
-  };
-
-  return (
-    <>
-      <div>
-        <LogoSquare className="mb-8 w-20 md:w-28" />
-        <h1 className="text-3xl font-medium">Create your first project</h1>
-        <div className="text-lg">
-          A project is just a container for your events. You can create as many
-          as you want.
-        </div>
-        <form
-          className="mt-8 flex flex-col gap-4"
-          onSubmit={form.handleSubmit(onSubmit)}
-        >
-          <div>
-            <Label>Project name</Label>
-            <Input
-              placeholder="My App"
-              size="large"
-              error={form.formState.errors.name?.message}
-              {...form.register('name')}
-            />
-          </div>
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              size="lg"
-              icon={SaveIcon}
-              loading={mutation.isLoading}
-            >
-              Create project
-            </Button>
-          </div>
-        </form>
-      </div>
-    </>
-  );
-}

apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx

@@ -1,16 +1,15 @@
-import { LogoSquare } from '@/components/logo';
+import { FullPageEmptyState } from '@/components/full-page-empty-state';
+import FullWidthNavbar from '@/components/full-width-navbar';
 import { ProjectCard } from '@/components/projects/project-card';
-import { SignOutButton } from '@clerk/nextjs';
+import SignOutButton from '@/components/sign-out-button';
 import { notFound, redirect } from 'next/navigation';
 
 import {
+  getCurrentOrganizations,
   getCurrentProjects,
   getOrganizationBySlug,
-  isWaitlistUserAccepted,
 } from '@openpanel/db';
 
-import { CreateProject } from './create-project';
-
 interface PageProps {
   params: {
     organizationSlug: string;
@@ -20,41 +19,25 @@ interface PageProps {
 export default async function Page({
   params: { organizationSlug },
 }: PageProps) {
-  const [organization, projects] = await Promise.all([
-    getOrganizationBySlug(organizationSlug),
+  const [organizations, projects] = await Promise.all([
+    getCurrentOrganizations(),
     getCurrentProjects(organizationSlug),
   ]);
 
-  if (!organization) {
-    return notFound();
-  }
+  const organization = organizations.find(
+    (org) => org.slug === organizationSlug
+  );
 
-  if (process.env.BLOCK) {
-    const isAccepted = await isWaitlistUserAccepted();
-    if (!isAccepted) {
-      return (
-        <div className="flex h-screen items-center justify-center p-4">
-          <div className="w-full max-w-lg">
-            <LogoSquare className="mb-8 w-20 md:w-28" />
-            <h1 className="text-3xl font-medium">Not quite there yet</h1>
-            <div className="text-lg">
-              We&apos;re still working on Openpanel, but we&apos;re not quite
-              there yet. We&apos;ll let you know when we&apos;re ready to go!
-            </div>
-          </div>
-        </div>
-      );
-    }
+  if (!organization) {
+    return (
+      <FullPageEmptyState title="Not found" className="min-h-screen">
+        The organization you were looking for could not be found.
+      </FullPageEmptyState>
+    );
   }
 
   if (projects.length === 0) {
-    return (
-      <div className="flex h-screen items-center justify-center p-4 ">
-        <div className="w-full max-w-lg">
-          <CreateProject />
-        </div>
-      </div>
-    );
+    return redirect('/onboarding');
   }
 
   if (projects.length === 1 && projects[0]) {
@@ -62,12 +45,16 @@ export default async function Page({
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
-      <SignOutButton />
-      <h1 className="text-xl font-medium">Select project</h1>
-      {projects.map((item) => (
-        <ProjectCard key={item.id} {...item} />
-      ))}
+    <div>
+      <FullWidthNavbar>
+        <SignOutButton />
+      </FullWidthNavbar>
+      <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
+        <h1 className="text-xl font-medium">Select project</h1>
+        {projects.map((item) => (
+          <ProjectCard key={item.id} {...item} />
+        ))}
+      </div>
     </div>
   );
 }

apps/dashboard/src/app/(app)/create-organization.tsx

@@ -1,150 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import AnimateHeight from '@/components/animate-height';
-import { CreateClientSuccess } from '@/components/clients/create-client-success';
-import { LogoSquare } from '@/components/logo';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button, buttonVariants } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { api, handleError } from '@/trpc/client';
-import { cn } from '@/utils/cn';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { SaveIcon, WallpaperIcon } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const validation = z.object({
-  organization: z.string().min(3),
-  project: z.string().min(3),
-  cors: z.string().url().or(z.literal('')),
-});
-
-type IForm = z.infer<typeof validation>;
-
-export function CreateOrganization() {
-  const router = useRouter();
-  const [hasDomain, setHasDomain] = useState(true);
-  const form = useForm<IForm>({
-    resolver: zodResolver(validation),
-    defaultValues: {
-      organization: '',
-      project: '',
-      cors: '',
-    },
-  });
-  const mutation = api.onboarding.organziation.useMutation({
-    onError: handleError,
-  });
-  const onSubmit: SubmitHandler<IForm> = (values) => {
-    mutation.mutate({
-      ...values,
-      cors: hasDomain ? values.cors : null,
-    });
-  };
-
-  if (mutation.isSuccess && mutation.data.client) {
-    return (
-      <div className="card p-4 md:p-8">
-        <LogoSquare className="mb-4 w-20" />
-        <h1 className="text-3xl font-medium">Nice job!</h1>
-        <div className="mb-4">
-          You&apos;re ready to start using our SDK. Save the client ID and
-          secret (if you have any)
-        </div>
-        <CreateClientSuccess {...mutation.data.client} />
-        <div className="mt-4 flex gap-4">
-          <a
-            className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
-            href="https://docs.openpanel.dev/docs"
-            target="_blank"
-          >
-            Read docs
-          </a>
-          <Button
-            className="flex-1"
-            onClick={() => router.refresh()}
-            icon={WallpaperIcon}
-          >
-            Dashboard
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="card p-4 md:p-8">
-      <LogoSquare className="mb-4 w-20" />
-      <h1 className="text-3xl font-medium">Welcome to Openpanel</h1>
-      <div className="text-lg">
-        Create your organization below (can be personal or a company) and your
-        first project.
-      </div>
-      <Alert className="mt-8">
-        <AlertTitle>Free during beta</AlertTitle>
-        <AlertDescription>
-          Openpanel is free during beta. Check our{' '}
-          <a
-            href="https://openpanel.dev/#pricing"
-            target="_blank"
-            className="text-blue-600 underline"
-          >
-            pricing
-          </a>{' '}
-          if you&apos;re curious. We&apos;ll also have a free tier.
-        </AlertDescription>
-      </Alert>
-      <form
-        className="mt-8 flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <div>
-          <Label>Organization name *</Label>
-          <Input
-            placeholder="Organization name"
-            error={form.formState.errors.organization?.message}
-            {...form.register('organization')}
-          />
-        </div>
-        <div>
-          <Label>Project name *</Label>
-          <Input
-            placeholder="Project name"
-            error={form.formState.errors.project?.message}
-            {...form.register('project')}
-          />
-        </div>
-
-        <div>
-          <Label className="flex items-center justify-between">
-            <span>Domain</span>
-            <Switch checked={hasDomain} onCheckedChange={setHasDomain} />
-          </Label>
-          <AnimateHeight open={hasDomain}>
-            <Input
-              placeholder="https://example.com"
-              error={form.formState.errors.cors?.message}
-              {...form.register('cors')}
-            />
-          </AnimateHeight>
-        </div>
-
-        <div className="flex justify-end">
-          <Button
-            type="submit"
-            size="lg"
-            icon={SaveIcon}
-            loading={mutation.isLoading}
-          >
-            Create
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}

apps/dashboard/src/app/(app)/page.tsx

@@ -1,41 +1,13 @@
-// import { CreateOrganization } from '@clerk/nextjs';
-
-import { LogoSquare } from '@/components/logo';
 import { redirect } from 'next/navigation';
 
-import { getCurrentOrganizations, isWaitlistUserAccepted } from '@openpanel/db';
-
-import { CreateOrganization } from './create-organization';
+import { getCurrentOrganizations } from '@openpanel/db';
 
 export default async function Page() {
   const organizations = await getCurrentOrganizations();
-  if (process.env.BLOCK) {
-    const isAccepted = await isWaitlistUserAccepted();
-    if (!isAccepted) {
-      return (
-        <div className="flex h-screen items-center justify-center">
-          <div className="w-full max-w-lg">
-            <LogoSquare className="mb-8 w-20 md:w-28" />
-            <h1 className="text-3xl font-medium">Not quite there yet</h1>
-            <div className="text-lg">
-              We&apos;re still working on Openpanel, but we&apos;re not quite
-              there yet. We&apos;ll let you know when we&apos;re ready to go!
-            </div>
-          </div>
-        </div>
-      );
-    }
-  }
 
   if (organizations.length > 0) {
     return redirect(`/${organizations[0]?.slug}`);
   }
 
-  return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="w-full max-w-lg">
-        <CreateOrganization />
-      </div>
-    </div>
-  );
+  return redirect('/onboarding');
 }

apps/dashboard/src/app/(auth)/layout.tsx

@@ -0,0 +1,22 @@
+import LiveEventsServer from './live-events';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Page = ({ children }: Props) => {
+  return (
+    <>
+      <div className="bg-slate-100">
+        <div className="grid h-full md:grid-cols-[min(400px,40vw)_1fr]">
+          <div className="min-h-screen border-r border-r-background bg-gradient-to-r from-background to-slate-200 max-md:hidden">
+            <LiveEventsServer />
+          </div>
+          <div className="min-h-screen">{children}</div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Page;

apps/dashboard/src/app/(auth)/live-events/index.tsx

@@ -0,0 +1,12 @@
+import { getEvents, transformMinimalEvent } from '@openpanel/db';
+
+import LiveEvents from './live-events';
+
+const LiveEventsServer = async () => {
+  const events = await getEvents(
+    'SELECT * FROM events ORDER BY created_at LIMIT 30'
+  );
+  return <LiveEvents events={events.map(transformMinimalEvent)} />;
+};
+
+export default LiveEventsServer;

apps/dashboard/src/app/(auth)/live-events/live-events.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list-item';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import useWS from '@/hooks/useWS';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import type { IServiceEventMinimal } from '@openpanel/db';
+
+type Props = {
+  events: IServiceEventMinimal[];
+};
+
+const LiveEvents = ({ events }: Props) => {
+  const [state, setState] = useState(events ?? []);
+  useWS<IServiceEventMinimal>('/live/events', (event) => {
+    setState((p) => [event, ...p].slice(0, 30));
+  });
+  return (
+    <ScrollArea className="h-screen">
+      <div className="text-background-foreground py-16 text-center text-2xl font-bold">
+        Real time data
+        <br />
+        at your fingertips
+      </div>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <div className="flex flex-col gap-4 p-4">
+          {state.map((event) => (
+            <motion.div
+              key={event.id}
+              layout
+              initial={{ opacity: 0, x: -400, scale: 0.5 }}
+              animate={{ opacity: 1, x: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 200, scale: 1.2 }}
+              transition={{ duration: 0.6, type: 'spring' }}
+            >
+              <EventListItem {...event} minimal />
+            </motion.div>
+          ))}
+        </div>
+      </AnimatePresence>
+    </ScrollArea>
+  );
+};
+
+export default LiveEvents;

apps/dashboard/src/app/(auth)/login/email-sign-in.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { getClerkError } from '@/utils/clerk-error';
+import { useSignIn } from '@clerk/nextjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { captureMessage } from '@sentry/nextjs';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const validator = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type IForm = z.infer<typeof validator>;
+
+const EmailSignUp = () => {
+  const router = useRouter();
+  const { isLoaded, signIn, setActive } = useSignIn();
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(validator),
+  });
+
+  useEffect(() => {
+    if (form.formState.errors.email?.message) {
+      toast.error(`Email: ${form.formState.errors.email?.message}`);
+    }
+  }, [form.formState.errors.email?.message]);
+
+  useEffect(() => {
+    if (form.formState.errors.password?.message) {
+      toast.error(`Password: ${form.formState.errors.password?.message}`);
+    }
+  }, [form.formState.errors.password?.message]);
+
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={form.handleSubmit(async (values) => {
+        if (!isLoaded) {
+          return toast.error('Sign in is not ready yet, please try again.');
+        }
+
+        try {
+          const result = await signIn.create({
+            identifier: values.email,
+            password: values.password,
+          });
+
+          if (result.status === 'complete') {
+            await setActive({ session: result.createdSessionId });
+            router.push('/');
+          } else {
+            captureMessage('Sign in failed', {
+              extra: {
+                status: result.status,
+              },
+            });
+          }
+        } catch (e) {
+          const error = getClerkError(e);
+          if (error?.message) {
+            toast.error(error.message);
+          }
+        }
+      })}
+    >
+      <Input
+        type="email"
+        placeholder="Email"
+        {...form.register('email')}
+        error={form.formState.errors.email?.message}
+      />
+      <Input
+        type="password"
+        placeholder="Password"
+        {...form.register('password')}
+        error={form.formState.errors.password?.message}
+      />
+      <Button type="submit">Sign in</Button>
+    </form>
+  );
+};
+
+export default EmailSignUp;

apps/dashboard/src/app/(auth)/login/page.client.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useSignIn } from '@clerk/nextjs';
+import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
+import { toast } from 'sonner';
+
+import EmailSignUp from './email-sign-in';
+
+const PageClient = () => {
+  const { signIn } = useSignIn();
+
+  const signInWith = (strategy: OAuthStrategy) => {
+    if (!signIn) {
+      return toast.error('Sign in is not available at the moment');
+    }
+    return signIn.authenticateWithRedirect({
+      strategy,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="card w-full p-8 md:max-w-sm">
+        <div className="mb-8 text-2xl font-bold">Sign in</div>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={() => signInWith('oauth_google')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              className="h-4 w-4"
+            >
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              ></path>
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              ></path>
+              <path d="M1 1h22v22H1z" fill="none"></path>
+            </svg>
+            <p className="">Continue with Google</p>
+          </button>
+          <button
+            onClick={() => signInWith('oauth_github')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+            </svg>
+            <p className="">Continue with GitHub</p>
+          </button>
+          <div className="relative flex justify-center">
+            <div className="absolute top-2.5 h-px w-full bg-border"></div>
+            <div className="relative bg-background px-4 text-center text-sm text-gray-500">
+              or with email
+            </div>
+          </div>
+          <EmailSignUp />
+          <p className="text-sm text-gray-500">
+            No account?{' '}
+            <a
+              className="font-semibold text-gray-500 underline transition-colors hover:text-black"
+              href="/register"
+            >
+              Create one now
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageClient;

apps/dashboard/src/app/(auth)/login/page.tsx

@@ -1,15 +1,15 @@
 import { auth } from '@clerk/nextjs';
 import { redirect } from 'next/navigation';
 
-import GetStartedClient from './get-started';
+import PageClient from './page.client';
 
 // Sign up
-const GetStarted = () => {
+const Page = () => {
   const session = auth();
   if (session.userId) {
     return redirect('/');
   }
-  return <GetStartedClient />;
+  return <PageClient />;
 };
 
-export default GetStarted;
+export default Page;

apps/dashboard/src/app/(auth)/register/email-sign-up.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { pushModal } from '@/modals';
+import { getClerkError } from '@/utils/clerk-error';
+import { useSignUp } from '@clerk/nextjs';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const validator = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type IForm = z.infer<typeof validator>;
+
+const EmailSignUp = () => {
+  const { isLoaded, signUp } = useSignUp();
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(validator),
+  });
+
+  useEffect(() => {
+    if (form.formState.errors.email?.message) {
+      toast.error(`Email: ${form.formState.errors.email?.message}`);
+    }
+  }, [form.formState.errors.email?.message]);
+
+  useEffect(() => {
+    if (form.formState.errors.password?.message) {
+      toast.error(`Password: ${form.formState.errors.password?.message}`);
+    }
+  }, [form.formState.errors.password?.message]);
+
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={form.handleSubmit(async (values) => {
+        if (!isLoaded) {
+          return toast.error('Sign up is not ready yet, please try again.');
+        }
+
+        try {
+          await signUp.create({
+            emailAddress: values.email,
+            password: values.password,
+          });
+
+          // Send the user an email with the verification code
+          await signUp.prepareEmailAddressVerification({
+            strategy: 'email_code',
+          });
+
+          pushModal('VerifyEmail', {
+            email: values.email,
+          });
+        } catch (e) {
+          const error = getClerkError(e);
+          if (error?.message) {
+            toast.error(error.message);
+          }
+        }
+      })}
+    >
+      <Input
+        type="email"
+        placeholder="Email"
+        {...form.register('email')}
+        error={form.formState.errors.email?.message}
+      />
+      <Input
+        type="password"
+        placeholder="Password"
+        {...form.register('password')}
+        error={form.formState.errors.password?.message}
+      />
+      <Button type="submit">Create account</Button>
+    </form>
+  );
+};
+
+export default EmailSignUp;

apps/dashboard/src/app/(auth)/register/page.client.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useSignIn } from '@clerk/nextjs';
+import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
+import { toast } from 'sonner';
+
+import EmailSignUp from './email-sign-up';
+
+const PageClient = () => {
+  const { signIn } = useSignIn();
+
+  const signInWith = (strategy: OAuthStrategy) => {
+    if (!signIn) {
+      return toast.error('Sign in is not available at the moment');
+    }
+    return signIn.authenticateWithRedirect({
+      strategy,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/',
+    });
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="card w-full p-8 md:max-w-sm">
+        <div className="mb-8 text-2xl font-bold">Create an account</div>
+        <div className="flex flex-col gap-4">
+          <button
+            onClick={() => signInWith('oauth_google')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              className="h-4 w-4"
+            >
+              <path
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                fill="#4285F4"
+              ></path>
+              <path
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                fill="#EA4335"
+              ></path>
+              <path d="M1 1h22v22H1z" fill="none"></path>
+            </svg>
+            <p className="">Continue with Google</p>
+          </button>
+          <button
+            onClick={() => signInWith('oauth_github')}
+            type="button"
+            className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="h-4 w-4"
+            >
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+            </svg>
+            <p className="">Continue with GitHub</p>
+          </button>
+          <div className="relative flex justify-center">
+            <div className="absolute top-2.5 h-px w-full bg-border"></div>
+            <div className="relative bg-background px-4 text-center text-sm text-gray-500">
+              or with email
+            </div>
+          </div>
+          <EmailSignUp />
+          <p className="text-sm text-gray-500">
+            Already have an account?{' '}
+            <a
+              className="font-semibold text-gray-500 transition-colors hover:text-black"
+              href="/login"
+            >
+              Sign in
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageClient;

apps/dashboard/src/app/(auth)/register/page.tsx

@@ -0,0 +1,15 @@
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
+
+import PageClient from './page.client';
+
+// Sign up
+const Page = () => {
+  const session = auth();
+  if (session.userId) {
+    return redirect('/');
+  }
+  return <PageClient />;
+};
+
+export default Page;

apps/dashboard/src/app/(onboarding)/get-started/get-started.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { SignInButton, useSignIn, useSignUp } from '@clerk/nextjs';
-import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
-import { toast } from 'sonner';
-
-import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
-
-const GetStarted = () => {
-  const { signIn } = useSignIn();
-
-  const signInWith = (strategy: OAuthStrategy) => {
-    if (!signIn) {
-      return toast.error('Sign in is not available at the moment');
-    }
-    return signIn.authenticateWithRedirect({
-      strategy,
-      redirectUrl: '/sso-callback',
-      redirectUrlComplete: '/onboarding',
-    });
-  };
-
-  return (
-    <OnboardingLayout
-      title="Create your account"
-      description={
-        <OnboardingDescription>
-          Create your account and start taking control of your data.
-        </OnboardingDescription>
-      }
-    >
-      <div className="flex flex-col gap-4 md:max-w-sm">
-        <button
-          onClick={() => signInWith('oauth_google')}
-          type="button"
-          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            className="h-4 w-4"
-          >
-            <path
-              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-              fill="#4285F4"
-            ></path>
-            <path
-              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-              fill="#34A853"
-            ></path>
-            <path
-              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-              fill="#FBBC05"
-            ></path>
-            <path
-              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-              fill="#EA4335"
-            ></path>
-            <path d="M1 1h22v22H1z" fill="none"></path>
-          </svg>
-          <p className="">Continue with Google</p>
-        </button>
-        <button
-          onClick={() => signInWith('oauth_github')}
-          type="button"
-          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            className="h-4 w-4"
-          >
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
-          </svg>
-          <p className="">Continue with GitHub</p>
-        </button>
-      </div>
-      <p className="mt-4 text-sm text-gray-500">
-        Already have an account?{' '}
-        <a
-          className="font-semibold text-gray-500 transition-colors hover:text-black"
-          href="/login"
-        >
-          Sign in
-        </a>
-      </p>
-    </OnboardingLayout>
-  );
-};
-
-export default GetStarted;

apps/dashboard/src/app/(onboarding)/layout.tsx

@@ -1,4 +1,4 @@
-import { Logo } from '@/components/logo';
+import FullWidthNavbar from '@/components/full-width-navbar';
 
 import SkipOnboarding from './skip-onboarding';
 import Steps from './steps';
@@ -10,25 +10,24 @@ type Props = {
 const Page = ({ children }: Props) => {
   return (
     <>
-      <div className="absolute inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
+      <div className="fixed inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
         <div className=""></div>
         <div className="border-l border-border bg-background"></div>
       </div>
       <div className="relative min-h-screen bg-background md:bg-transparent">
-        <div className="border-b border-border bg-background">
-          <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
-            <Logo />
-            <SkipOnboarding />
-          </div>
-        </div>
+        <FullWidthNavbar>
+          <SkipOnboarding />
+        </FullWidthNavbar>
         <div className="mx-auto w-full md:max-w-[95vw] lg:max-w-[80vw]">
           <div className="grid md:grid-cols-[25vw_1fr] lg:grid-cols-[20vw_1fr]">
             <div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-slate-100 p-4 pr-0 md:bg-transparent md:py-14">
               <div>
-                <div className="text-xs font-bold uppercase text-slate-700">
+                <div className="text-xs font-bold uppercase text-[#7b94ac]">
                   Welcome to Openpanel
                 </div>
-                <div className="text-xl font-medium">Get started</div>
+                <div className="text-xl font-medium leading-loose">
+                  Get started
+                </div>
               </div>
               <Steps />
             </div>

apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx

@@ -25,7 +25,7 @@ const OnboardingLayout = ({
   return (
     <div className={cn('flex max-w-3xl flex-col gap-4', className)}>
       <div className="mb-4">
-        <h1 className="text-2xl font-medium">{title}</h1>
+        <h1 className="mb-2 text-3xl font-medium">{title}</h1>
         {description}
       </div>
 

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-app.tsx

@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { SmartphoneIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectApp = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <SmartphoneIcon />
+        App
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.app.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectApp;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-backend.tsx

@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { ServerIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectBackend = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <ServerIcon />
+        Backend
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.backend.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectBackend;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/connect-web.tsx

@@ -0,0 +1,59 @@
+import { pushModal } from '@/modals';
+import { MonitorIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import { frameworks } from '@openpanel/sdk-info';
+
+type Props = {
+  client: IServiceClient | null;
+};
+
+const ConnectWeb = ({ client }: Props) => {
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        <MonitorIcon />
+        Website
+      </div>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Pick a framework below to get started.
+      </p>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        {frameworks.website.map((framework) => (
+          <button
+            onClick={() =>
+              pushModal('Instructions', {
+                framework,
+                client,
+              })
+            }
+            className="flex items-center gap-4 rounded-md border p-2 py-2 text-left"
+            key={framework.name}
+          >
+            <div className="h-10 w-10 rounded-md bg-slate-200 p-2">
+              <img
+                className="h-full w-full object-contain"
+                src={framework.logo}
+                alt={framework.name}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="flex-1 font-semibold">{framework.name}</div>
+          </button>
+        ))}
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground">
+        Missing a framework?{' '}
+        <a
+          href="mailto:hello@openpanel.dev"
+          className="text-foreground underline"
+        >
+          Let us know!
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ConnectWeb;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/onboarding-connect.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { ButtonContainer } from '@/components/button-container';
+import { LinkButton } from '@/components/ui/button';
+
+import type { IServiceProjectWithClients } from '@openpanel/db';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../../onboarding-layout';
+import ConnectApp from './connect-app';
+import ConnectBackend from './connect-backend';
+import ConnectWeb from './connect-web';
+
+type Props = {
+  project: IServiceProjectWithClients;
+};
+
+const Connect = ({ project }: Props) => {
+  const client = project.clients[0];
+
+  if (!client) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  return (
+    <OnboardingLayout
+      title="Setup your data sources"
+      description={
+        <OnboardingDescription>
+          Let&apos;s connect your data sources to OpenPanel
+        </OnboardingDescription>
+      }
+    >
+      {project.types.map((type) => {
+        const Component = {
+          website: ConnectWeb,
+          app: ConnectApp,
+          backend: ConnectBackend,
+        }[type];
+
+        return <Component key={type} client={client} />;
+      })}
+      <ButtonContainer>
+        <div />
+        <LinkButton
+          href={`/onboarding/${project.id}/verify`}
+          size="lg"
+          className="min-w-28 self-start"
+        >
+          Next
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Connect;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/connect/page.tsx

@@ -0,0 +1,34 @@
+import { cookies } from 'next/headers';
+
+import { getCurrentOrganizations, getProjectWithClients } from '@openpanel/db';
+
+import OnboardingConnect from './onboarding-connect';
+
+type Props = {
+  params: {
+    projectId: string;
+  };
+};
+
+const Connect = async ({ params: { projectId } }: Props) => {
+  const orgs = await getCurrentOrganizations();
+  const organizationSlug = orgs[0]?.slug;
+  if (!organizationSlug) {
+    throw new Error('No organization found');
+  }
+  const project = await getProjectWithClients(projectId);
+  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
+
+  if (!project) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  // set visible client secret from cookie
+  if (clientSecret && project.clients[0]) {
+    project.clients[0].secret = clientSecret;
+  }
+
+  return <OnboardingConnect project={project} />;
+};
+
+export default Connect;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify-listener.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import useWS from '@/hooks/useWS';
+import { pushModal } from '@/modals';
+import { cn } from '@/utils/cn';
+import { timeAgo } from '@/utils/date';
+import { CheckCircle2Icon, CheckIcon, Loader2 } from 'lucide-react';
+
+import type {
+  IServiceClient,
+  IServiceCreateEventPayload,
+  IServiceProject,
+} from '@openpanel/db';
+
+type Props = {
+  project: IServiceProject;
+  client: IServiceClient | null;
+  events: IServiceCreateEventPayload[];
+  onVerified: (verified: boolean) => void;
+};
+
+const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
+  const [events, setEvents] = useState<IServiceCreateEventPayload[]>(
+    _events ?? []
+  );
+  useWS<IServiceCreateEventPayload>(
+    `/live/events/${client?.projectId}`,
+    (data) => {
+      setEvents((prev) => [...prev, data]);
+      onVerified(true);
+    }
+  );
+
+  const isConnected = events.length > 0;
+
+  const renderBadge = () => {
+    if (isConnected) {
+      return <Badge variant={'success'}>Connected</Badge>;
+    }
+
+    return <Badge variant={'destructive'}>Not connected</Badge>;
+  };
+  const renderIcon = () => {
+    if (isConnected) {
+      return (
+        <CheckCircle2Icon
+          strokeWidth={1.2}
+          size={40}
+          className="shrink-0 text-emerald-600"
+        />
+      );
+    }
+
+    return (
+      <Loader2 size={40} className="shrink-0 animate-spin text-blue-600" />
+    );
+  };
+
+  return (
+    <div className="rounded-lg border p-4 md:p-6">
+      <div className="flex items-center gap-2 text-2xl capitalize">
+        {client?.name}
+      </div>
+      <div className="mt-2 text-xs font-semibold text-muted-foreground">
+        Connection status: {renderBadge()}
+      </div>
+
+      <div
+        className={cn(
+          'my-6 flex gap-6 rounded-xl p-4 md:p-6',
+          isConnected ? 'bg-emerald-100' : 'bg-blue-100'
+        )}
+      >
+        {renderIcon()}
+        <div className="flex-1">
+          <div className="text-lg font-semibold">
+            {isConnected ? 'Success' : 'Waiting for events'}
+          </div>
+          {isConnected ? (
+            <div className="flex flex-col-reverse">
+              {events.length > 5 && (
+                <div className="flex items-center gap-2 text-sm">
+                  <CheckIcon size={14} />{' '}
+                  <span>{events.length - 5} more events</span>
+                </div>
+              )}
+              {events.slice(-5).map((event, index) => (
+                <div key={index} className="flex items-center gap-2 text-sm">
+                  <CheckIcon size={14} />{' '}
+                  <span className="font-medium">{event.name}</span>{' '}
+                  <span className="ml-auto text-emerald-800">
+                    {timeAgo(event.createdAt, 'round')}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm">
+              Verify that your events works before submitting any changes to App
+              Store/Google Play
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-2 text-xs text-muted-foreground">
+        You can{' '}
+        <button
+          className="underline"
+          onClick={() => {
+            pushModal('OnboardingTroubleshoot', {
+              client,
+              type: 'app',
+            });
+          }}
+        >
+          troubleshoot
+        </button>{' '}
+        if you are having issues connecting your app.
+      </div>
+    </div>
+  );
+};
+
+export default VerifyListener;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/onboarding-verify.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { ButtonContainer } from '@/components/button-container';
+import { LinkButton } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+import Link from 'next/link';
+
+import type {
+  IServiceCreateEventPayload,
+  IServiceProjectWithClients,
+} from '@openpanel/db';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../../onboarding-layout';
+import VerifyListener from './onboarding-verify-listener';
+
+type Props = {
+  project: IServiceProjectWithClients;
+  events: IServiceCreateEventPayload[];
+};
+
+const Verify = ({ project, events }: Props) => {
+  const [verified, setVerified] = useState(events.length > 0);
+  const client = project.clients[0];
+
+  if (!client) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  return (
+    <OnboardingLayout
+      title="Verify that you get events"
+      description={
+        <OnboardingDescription>
+          Deploy your changes, as soon as you see events here, you&apos;re all
+          set!
+        </OnboardingDescription>
+      }
+    >
+      {/* 
+      Sadly we cant have a verify for each type since we use the same client for all different types (website, app, backend)
+      
+      Pros: the user just need to keep track of one client id/secret
+      Cons: we cant verify each type individually
+
+      Might be a good idea to add a verify for each type in the future, but for now we will just have one verify for all types
+
+      {project.types.map((type) => {
+        const Component = {
+          website: VerifyWeb,
+          app: VerifyApp,
+          backend: VerifyBackend,
+        }[type];
+
+        return <Component key={type} client={client} events={events} />;
+      })} */}
+      <VerifyListener
+        project={project}
+        client={client}
+        events={events}
+        onVerified={setVerified}
+      />
+      <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">
+          {!verified && (
+            <Link
+              href={`/${project.organizationSlug}/${project.id}`}
+              className="text-sm text-muted-foreground underline"
+            >
+              Skip for now
+            </Link>
+          )}
+
+          <LinkButton
+            href="/"
+            size="lg"
+            className={cn(
+              'min-w-28 self-start',
+              !verified && 'pointer-events-none select-none opacity-20'
+            )}
+          >
+            Your dashboard
+          </LinkButton>
+        </div>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Verify;

apps/dashboard/src/app/(onboarding)/onboarding/[projectId]/verify/page.tsx

@@ -0,0 +1,44 @@
+import { cookies } from 'next/headers';
+import { escape } from 'sqlstring';
+
+import {
+  getCurrentOrganizations,
+  getEvents,
+  getProjectWithClients,
+} from '@openpanel/db';
+
+import OnboardingVerify from './onboarding-verify';
+
+type Props = {
+  params: {
+    projectId: string;
+  };
+};
+
+const Verify = async ({ params: { projectId } }: Props) => {
+  const orgs = await getCurrentOrganizations();
+  const organizationSlug = orgs[0]?.slug;
+  if (!organizationSlug) {
+    throw new Error('No organization found');
+  }
+  const [project, events] = await Promise.all([
+    await getProjectWithClients(projectId),
+    getEvents(
+      `SELECT * FROM events WHERE project_id = ${escape(projectId)} LIMIT 100`
+    ),
+  ]);
+  const clientSecret = cookies().get('onboarding_client_secret')?.value ?? null;
+
+  if (!project) {
+    return <div>Hmm, something fishy is going on. Please reload the page.</div>;
+  }
+
+  // set visible client secret from cookie
+  if (clientSecret && project.clients[0]) {
+    project.clients[0].secret = clientSecret;
+  }
+
+  return <OnboardingVerify project={project} events={events} />;
+};
+
+export default Verify;

apps/dashboard/src/app/(onboarding)/onboarding/connect/page.tsx

@@ -1,79 +0,0 @@
-import { ButtonContainer } from '@/components/button-container';
-import { Button, LinkButton } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import type { CheckboxProps } from '@radix-ui/react-checkbox';
-import Link from 'next/link';
-
-import OnboardingLayout, {
-  OnboardingDescription,
-} from '../../onboarding-layout';
-
-function CheckboxGroup({
-  label,
-  description,
-  ...props
-}: { label: string; description: string } & CheckboxProps) {
-  const randId = Math.random().toString(36).substring(7);
-  return (
-    <label
-      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
-      htmlFor={randId}
-    >
-      <div>
-        <Checkbox {...props} id={randId} />
-      </div>
-      <div>
-        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
-        <div className="text-sm text-muted-foreground">{description}</div>
-      </div>
-    </label>
-  );
-}
-
-const Connect = () => {
-  return (
-    <OnboardingLayout
-      title="Connect your data"
-      description={
-        <OnboardingDescription>
-          Create your account and start taking control of your data.
-        </OnboardingDescription>
-      }
-    >
-      <div className="flex flex-col divide-y">
-        <CheckboxGroup
-          label="Website"
-          description="Track events and conversion for your website"
-        />
-        <CheckboxGroup
-          label="App"
-          description="Track events and conversion for your app"
-        />
-        <CheckboxGroup
-          label="Backend"
-          description="Track events and conversion for your backend/api"
-        />
-      </div>
-
-      <ButtonContainer>
-        <LinkButton
-          href="/onboarding/tracking"
-          size="lg"
-          className="min-w-28 self-start"
-          variant={'secondary'}
-        >
-          Back
-        </LinkButton>
-        <LinkButton
-          href="/onboarding/verify"
-          size="lg"
-          className="min-w-28 self-start"
-        >
-          Next
-        </LinkButton>
-      </ButtonContainer>
-    </OnboardingLayout>
-  );
-};
-
-export default Connect;

apps/dashboard/src/app/(onboarding)/onboarding/onboarding-tracking.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect } from 'react';
+import AnimateHeight from '@/components/animate-height';
+import { ButtonContainer } from '@/components/button-container';
+import { InputWithLabel } from '@/components/forms/input-with-label';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { api, handleError } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { LucideIcon } from 'lucide-react';
+import { MonitorIcon, ServerIcon, SmartphoneIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import type { z } from 'zod';
+
+import type { IServiceOrganization } from '@openpanel/db';
+import { zOnboardingProject } from '@openpanel/validation';
+
+import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  Icon,
+  children,
+  onChange,
+  value,
+  disabled,
+  error,
+}: {
+  label: string;
+  description: string;
+  Icon: LucideIcon;
+  children?: React.ReactNode;
+  error?: string;
+} & ControllerRenderProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <div>
+      <label
+        className={cn(
+          'flex items-center gap-4 px-4 py-6 transition-colors hover:bg-slate-100',
+          disabled && 'cursor-not-allowed opacity-50'
+        )}
+        htmlFor={randId}
+      >
+        {Icon && <div className="w-6 shrink-0">{<Icon />}</div>}
+        <div className="flex-1">
+          <div className="font-medium">{label}</div>
+          <div className="text-sm text-muted-foreground">{description}</div>
+          {error && <div className="text-xs text-red-600">{error}</div>}
+        </div>
+        <div>
+          <Switch
+            disabled={disabled}
+            checked={!!value}
+            onCheckedChange={onChange}
+            id={randId}
+          />
+        </div>
+      </label>
+      {children}
+    </div>
+  );
+}
+
+type IForm = z.infer<typeof zOnboardingProject>;
+
+const Tracking = () => {
+  const router = useRouter();
+  const mutation = api.onboarding.project.useMutation({
+    onError: handleError,
+    onSuccess(res) {
+      router.push(`/onboarding/${res.projectId}/connect`);
+    },
+  });
+
+  const form = useForm<IForm>({
+    resolver: zodResolver(zOnboardingProject),
+    defaultValues: {
+      organization: '',
+      project: '',
+      domain: null,
+      website: false,
+      app: false,
+      backend: false,
+    },
+  });
+
+  const isWebsite = useWatch({
+    name: 'website',
+    control: form.control,
+  });
+
+  const isApp = useWatch({
+    name: 'app',
+    control: form.control,
+  });
+
+  const isBackend = useWatch({
+    name: 'backend',
+    control: form.control,
+  });
+
+  useEffect(() => {
+    if (!isWebsite) {
+      form.setValue('domain', null);
+    }
+  }, [isWebsite, form]);
+
+  const onSubmit: SubmitHandler<IForm> = (values) => {
+    mutation.mutate(values);
+  };
+
+  useEffect(() => {
+    form.clearErrors();
+  }, [isWebsite, isApp, isBackend]);
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <OnboardingLayout
+        title="What are you tracking?"
+        description={
+          <OnboardingDescription>
+            Let us know what you want to track so we can help you get started.
+          </OnboardingDescription>
+        }
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <InputWithLabel
+            label="Workspace name"
+            info="This is the name of your workspace. It can be anything you like."
+            placeholder="Eg. The Music Company"
+            error={form.formState.errors.organization?.message}
+            {...form.register('organization')}
+          />
+          <InputWithLabel
+            label="Project name"
+            placeholder="Eg. The Music App"
+            error={form.formState.errors.project?.message}
+            {...form.register('project')}
+          />
+        </div>
+        <div className="flex flex-col divide-y">
+          <Controller
+            name="website"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.website?.message}
+                Icon={MonitorIcon}
+                label="Website"
+                disabled={isApp}
+                description="Track events and conversion for your website"
+                {...field}
+              >
+                <AnimateHeight open={isWebsite && !isApp}>
+                  <div className="p-4 pl-14">
+                    <InputWithLabel
+                      label="Domain"
+                      placeholder="https://example.com"
+                      error={form.formState.errors.domain?.message}
+                      {...form.register('domain')}
+                    />
+                  </div>
+                </AnimateHeight>
+              </CheckboxGroup>
+            )}
+          />
+          <Controller
+            name="app"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.app?.message}
+                disabled={isWebsite}
+                Icon={SmartphoneIcon}
+                label="App"
+                description="Track events and conversion for your app"
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="backend"
+            control={form.control}
+            render={({ field }) => (
+              <CheckboxGroup
+                error={form.formState.errors.backend?.message}
+                Icon={ServerIcon}
+                label="Backend / API"
+                description="Track events and conversion for your backend / API"
+                {...field}
+              />
+            )}
+          />
+        </div>
+
+        <ButtonContainer>
+          <div />
+          <Button
+            type="submit"
+            size="lg"
+            className="min-w-28 self-start"
+            loading={mutation.isLoading}
+          >
+            Next
+          </Button>
+        </ButtonContainer>
+      </OnboardingLayout>
+    </form>
+  );
+};
+
+export default Tracking;

apps/dashboard/src/app/(onboarding)/onboarding/page.tsx

@@ -1,76 +1,7 @@
-import { ButtonContainer } from '@/components/button-container';
-import { LinkButton } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import type { CheckboxProps } from '@radix-ui/react-checkbox';
-
-import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
-
-function CheckboxGroup({
-  label,
-  description,
-  ...props
-}: { label: string; description: string } & CheckboxProps) {
-  const randId = Math.random().toString(36).substring(7);
-  return (
-    <label
-      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
-      htmlFor={randId}
-    >
-      <div>
-        <Checkbox {...props} id={randId} />
-      </div>
-      <div>
-        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
-        <div className="text-sm text-muted-foreground">{description}</div>
-      </div>
-    </label>
-  );
-}
+import OnboardingTracking from './onboarding-tracking';
 
 const Tracking = () => {
-  return (
-    <OnboardingLayout
-      title="What do you want to track?"
-      description={
-        <OnboardingDescription>
-          Create your account and start taking control of your data.
-        </OnboardingDescription>
-      }
-    >
-      <div className="flex flex-col divide-y">
-        <CheckboxGroup
-          label="Website"
-          description="Track events and conversion for your website"
-        />
-        <CheckboxGroup
-          label="App"
-          description="Track events and conversion for your app"
-        />
-        <CheckboxGroup
-          label="Backend"
-          description="Track events and conversion for your backend/api"
-        />
-      </div>
-
-      <ButtonContainer>
-        <LinkButton
-          href="/onboarding"
-          size="lg"
-          className="min-w-28 self-start"
-          variant={'secondary'}
-        >
-          Back
-        </LinkButton>
-        <LinkButton
-          href="/onboarding/connect"
-          size="lg"
-          className="min-w-28 self-start"
-        >
-          Next
-        </LinkButton>
-      </ButtonContainer>
-    </OnboardingLayout>
-  );
+  return <OnboardingTracking />;
 };
 
 export default Tracking;

apps/dashboard/src/app/(onboarding)/onboarding/verify/page.tsx

@@ -1,75 +0,0 @@
-import { ButtonContainer } from '@/components/button-container';
-import { Button, LinkButton } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import type { CheckboxProps } from '@radix-ui/react-checkbox';
-import Link from 'next/link';
-
-import OnboardingLayout, {
-  OnboardingDescription,
-} from '../../onboarding-layout';
-
-function CheckboxGroup({
-  label,
-  description,
-  ...props
-}: { label: string; description: string } & CheckboxProps) {
-  const randId = Math.random().toString(36).substring(7);
-  return (
-    <label
-      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
-      htmlFor={randId}
-    >
-      <div>
-        <Checkbox {...props} id={randId} />
-      </div>
-      <div>
-        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
-        <div className="text-sm text-muted-foreground">{description}</div>
-      </div>
-    </label>
-  );
-}
-
-const Tracking = () => {
-  return (
-    <OnboardingLayout
-      title="Verify that you get events"
-      description={
-        <OnboardingDescription>
-          Create your account and start taking control of your data.
-        </OnboardingDescription>
-      }
-    >
-      <div className="flex flex-col divide-y">
-        <CheckboxGroup
-          label="Website"
-          description="Track events and conversion for your website"
-        />
-        <CheckboxGroup
-          label="App"
-          description="Track events and conversion for your app"
-        />
-        <CheckboxGroup
-          label="Backend"
-          description="Track events and conversion for your backend/api"
-        />
-      </div>
-
-      <ButtonContainer>
-        <LinkButton
-          href="/onboarding/connect"
-          size="lg"
-          className="min-w-28 self-start"
-          variant={'secondary'}
-        >
-          Back
-        </LinkButton>
-        <LinkButton href="/" size="lg" className="min-w-28 self-start">
-          Your dashboard
-        </LinkButton>
-      </ButtonContainer>
-    </OnboardingLayout>
-  );
-};
-
-export default Tracking;

apps/dashboard/src/app/(onboarding)/steps.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { cn } from '@/utils/cn';
-import { ArrowRightCircleIcon, CheckCheckIcon, Edit2Icon } from 'lucide-react';
+import { CheckCheckIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 
 type Step = {
   name: string;
   status: 'completed' | 'current' | 'pending';
-  href: string;
+  match: string;
 };
 
 type Props = {
@@ -15,32 +15,32 @@ type Props = {
 };
 
 function useSteps(path: string) {
-  console.log('path', path);
-
   const steps: Step[] = [
     {
       name: 'Account creation',
       status: 'pending',
-      href: '/get-started',
+      match: '/sign-up',
     },
     {
-      name: 'Tracking information',
+      name: 'General',
       status: 'pending',
-      href: '/onboarding',
+      match: '/onboarding',
     },
     {
       name: 'Connect your data',
       status: 'pending',
-      href: '/onboarding/connect',
+      match: '/onboarding/(.+)/connect',
     },
     {
       name: 'Verify',
       status: 'pending',
-      href: '/onboarding/verify',
+      match: '/onboarding/(.+)/verify',
     },
   ];
 
-  const matchIndex = steps.findLastIndex((step) => path.startsWith(step.href));
+  const matchIndex = steps.findLastIndex((step) =>
+    path.match(new RegExp(step.match))
+  );
 
   return steps.map((step, index) => {
     if (index < matchIndex) {
@@ -87,18 +87,18 @@ const Steps = ({ className }: Props) => {
             <div
               className={cn(
                 'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm text-white'
-                // step.status === 'completed' && 'bg-blue-500 ring-blue-500/50',
-                // step.status === 'pending' && 'bg-slate-600 ring-slate-500/50'
+                // step.status === 'completed' && 'bg-blue-600 ring-blue-500/50',
+                // step.status === 'pending' && 'bg-slate-400 ring-slate-500/50'
               )}
             >
               <div
                 className={cn(
-                  'absolute inset-0 z-0 rounded-full bg-blue-500',
-                  step.status === 'pending' && 'bg-slate-600'
+                  'absolute inset-0 z-0 rounded-full bg-blue-600',
+                  step.status === 'pending' && 'bg-slate-400'
                 )}
               ></div>
               {step.status === 'current' && (
-                <div className="animate-ping-slow absolute inset-1 z-0 rounded-full bg-blue-500"></div>
+                <div className="absolute inset-1 z-0 animate-ping-slow rounded-full bg-blue-600"></div>
               )}
               <div className="relative">
                 {step.status === 'completed' && <CheckCheckIcon size={14} />}

apps/dashboard/src/components/forms/input-with-label.tsx

@@ -1,26 +1,40 @@
 import { forwardRef } from 'react';
+import { BanIcon, InfoIcon } from 'lucide-react';
 
 import { Input } from '../ui/input';
 import type { InputProps } from '../ui/input';
 import { Label } from '../ui/label';
+import { Tooltiper } from '../ui/tooltip';
 
 type InputWithLabelProps = InputProps & {
   label: string;
   error?: string | undefined;
+  info?: string;
 };
 
 export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
-  ({ label, className, ...props }, ref) => {
+  ({ label, className, info, ...props }, ref) => {
     return (
       <div className={className}>
-        <div className="mb-2 block flex justify-between">
-          <Label className="mb-0" htmlFor={label}>
+        <div className="mb-2 flex items-end justify-between">
+          <Label
+            className="mb-0 flex flex-1 shrink-0 items-center gap-1 whitespace-nowrap"
+            htmlFor={label}
+          >
             {label}
+            {info && (
+              <Tooltiper content={info}>
+                <InfoIcon size={14} />
+              </Tooltiper>
+            )}
           </Label>
           {props.error && (
-            <span className="text-sm leading-none text-destructive">
-              {props.error}
-            </span>
+            <Tooltiper asChild content={props.error}>
+              <div className="flex items-center gap-1 text-sm leading-none text-destructive">
+                Issues
+                <BanIcon size={14} />
+              </div>
+            </Tooltiper>
           )}
         </div>
         <Input ref={ref} id={label} {...props} />

apps/dashboard/src/components/full-width-navbar.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/utils/cn';
+
+import { Logo } from './logo';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const FullWidthNavbar = ({ children, className }: Props) => {
+  return (
+    <div className={cn('border-b border-border bg-background', className)}>
+      <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
+        <Logo />
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default FullWidthNavbar;

apps/dashboard/src/components/overview/live-counter/live-counter.tsx

@@ -6,10 +6,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import useWS from '@/hooks/useWS';
 import { cn } from '@/utils/cn';
 import { useQueryClient } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
-import useWebSocket from 'react-use-websocket';
 import { toast } from 'sonner';
 
 import { useOverviewOptions } from '../useOverviewOptions';
@@ -28,29 +28,21 @@ const FIFTEEN_SECONDS = 1000 * 15;
 
 export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
   const { setLiveHistogram } = useOverviewOptions();
-  const ws = String(process.env.NEXT_PUBLIC_API_URL)
-    .replace(/^https/, 'wss')
-    .replace(/^http/, 'ws');
   const client = useQueryClient();
   const [counter, setCounter] = useState(data);
-  const [socketUrl] = useState(`${ws}/live/visitors/${projectId}`);
   const lastRefresh = useRef(Date.now());
 
-  useWebSocket(socketUrl, {
-    shouldReconnect: () => true,
-    onMessage(event) {
-      const value = parseInt(event.data, 10);
-      if (!isNaN(value)) {
-        setCounter(value);
-        if (Date.now() - lastRefresh.current > FIFTEEN_SECONDS) {
-          lastRefresh.current = Date.now();
-          toast('Refreshed data');
-          client.refetchQueries({
-            type: 'active',
-          });
-        }
+  useWS<number>(`/live/visitors/${projectId}`, (value) => {
+    if (!isNaN(value)) {
+      setCounter(value);
+      if (Date.now() - lastRefresh.current > FIFTEEN_SECONDS) {
+        lastRefresh.current = Date.now();
+        toast('Refreshed data');
+        client.refetchQueries({
+          type: 'active',
+        });
       }
-    },
+    }
   });
 
   return (

apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx

@@ -4,7 +4,7 @@ const createFlagIcon = (url: string) => {
   return function (_props: LucideProps) {
     return (
       <span
-        className={`fi !block overflow-hidden rounded-[2px] !leading-[1rem] fi-${url}`}
+        className={`fi fis !block overflow-hidden rounded-full !leading-[1rem] fi-${url}`}
       ></span>
     );
   } as LucideIcon;

apps/dashboard/src/components/report/chart/SerieIcon.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { Tooltiper } from '@/components/ui/tooltip';
 import type { LucideIcon, LucideProps } from 'lucide-react';
 import {
   ActivityIcon,
@@ -81,8 +82,10 @@ export function SerieIcon({ name, ...props }: SerieIconProps) {
   }, [name]);
 
   return Icon ? (
-    <div className="[&_a]:![&_a]:!h-4 relative h-4 flex-shrink-0 [&_svg]:!rounded-[2px]">
-      <Icon size={16} {...props} />
-    </div>
+    <Tooltiper asChild content={name!}>
+      <div className="[&_a]:![&_a]:!h-4 relative h-4 flex-shrink-0 [&_svg]:!rounded-[2px]">
+        <Icon size={16} {...props} />
+      </div>
+    </Tooltiper>
   ) : null;
 }

apps/dashboard/src/components/report/chart/SerieIcon.urls.ts

@@ -1,7 +1,7 @@
 // prettier-ignore
 const data = {
   'chromium os': 'https://upload.wikimedia.org/wikipedia/commons/2/28/Chromium_Logo.svg',
-  'mac os': 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Finder_Icon_macOS_Big_Sur.png',
+  'mac os': 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/MacOS_logo.svg/1200px-MacOS_logo.svg.png',
   'mobile safari': 'https://upload.wikimedia.org/wikipedia/commons/5/52/Safari_browser_logo.svg',
   'openpanel.dev': 'https://openpanel.dev',
   'samsung internet': 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Samsung_Internet_logo.svg/1024px-Samsung_Internet_logo.svg.png',
@@ -20,7 +20,7 @@ const data = {
   gmail: 'https://mail.google.com',
   google: 'https://google.com',
   instagram: 'https://instagram.com',
-  ios: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Apple_iOS_logo.svg',
+  ios: 'https://cdn0.iconfinder.com/data/icons/flat-round-system/512/apple-1024.png',
   linkedin: 'https://linkedin.com',
   linux: 'https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg',
   microlaunch: 'https://microlaunch.net',

apps/dashboard/src/components/sign-out-button.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { SignOutButton as ClerkSignOutButton } from '@clerk/nextjs';
+import { LogOutIcon } from 'lucide-react';
+
+import { Button } from './ui/button';
+
+const SignOutButton = () => {
+  return (
+    <ClerkSignOutButton>
+      <Button variant={'secondary'} icon={LogOutIcon}>
+        Sign out
+      </Button>
+    </ClerkSignOutButton>
+  );
+};
+
+export default SignOutButton;

apps/dashboard/src/components/syntax.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { clipboard } from '@/utils/clipboard';
+import { CopyIcon } from 'lucide-react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import ts from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
-import docco from 'react-syntax-highlighter/dist/cjs/styles/hljs/docco';
+import docco from 'react-syntax-highlighter/dist/cjs/styles/hljs/vs2015';
 
 SyntaxHighlighter.registerLanguage('typescript', ts);
 
@@ -12,8 +14,29 @@ interface SyntaxProps {
 
 export default function Syntax({ code }: SyntaxProps) {
   return (
-    <SyntaxHighlighter wrapLongLines style={docco}>
-      {code}
-    </SyntaxHighlighter>
+    <div className="group relative">
+      <button
+        className="absolute right-1 top-1 rounded bg-background p-2 opacity-0 transition-opacity group-hover:opacity-100"
+        onClick={() => {
+          clipboard(code);
+        }}
+      >
+        <CopyIcon size={12} />
+      </button>
+      <SyntaxHighlighter
+        // wrapLongLines
+        style={docco}
+        language="html"
+        customStyle={{
+          borderRadius: '0.5rem',
+          padding: '1rem',
+          paddingTop: '0.5rem',
+          paddingBottom: '0.5rem',
+          fontSize: 14,
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
   );
 }

apps/dashboard/src/components/ui/badge.tsx

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 
 const badgeVariants = cva(
-  'inline-flex h-[20px] items-center rounded-full border px-1.5 text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex h-[20px] items-center rounded-full border px-1.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -15,7 +15,7 @@ const badgeVariants = cva(
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+          'border-transparent bg-destructive-foreground text-destructive hover:bg-destructive/80',
         success:
           'border-transparent bg-emerald-500 text-emerald-100 hover:bg-emerald-500/80',
         outline: 'text-foreground',

apps/dashboard/src/components/ui/input-otp.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cn } from '@/utils/cn';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Dot } from 'lucide-react';
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      'flex items-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+));
+InputOTP.displayName = 'InputOTP';
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+));
+InputOTPGroup.displayName = 'InputOTPGroup';
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = 'InputOTPSlot';
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<'div'>,
+  React.ComponentPropsWithoutRef<'div'>
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+));
+InputOTPSeparator.displayName = 'InputOTPSeparator';
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

apps/dashboard/src/components/ui/sheet.tsx

@@ -100,8 +100,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      'sticky bottom-0 left-0 right-0 mt-auto bg-background',
+      'mt-auto flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
       className
     )}
     {...props}

apps/dashboard/src/components/ui/switch.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { cn } from '@/utils/cn';
 import * as SwitchPrimitives from '@radix-ui/react-switch';

apps/dashboard/src/components/ui/tooltip.tsx

@@ -7,6 +7,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = TooltipPrimitive.Root;
+const TooltipPortal = TooltipPrimitive.Portal;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
@@ -49,7 +50,9 @@ export function Tooltiper({
       <TooltipTrigger asChild={asChild} className={className}>
         {children}
       </TooltipTrigger>
-      <TooltipContent>{content}</TooltipContent>
+      <TooltipPortal>
+        <TooltipContent>{content}</TooltipContent>
+      </TooltipPortal>
     </Tooltip>
   );
 }

apps/dashboard/src/hooks/useWS.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import useWebSocket from 'react-use-websocket';
+
+import { getSuperJson } from '@openpanel/common';
+
+export default function useWS<T>(path: string, onMessage: (event: T) => void) {
+  const ws = String(process.env.NEXT_PUBLIC_API_URL)
+    .replace(/^https/, 'wss')
+    .replace(/^http/, 'ws');
+  const [socketUrl, setSocketUrl] = useState(`${ws}${path}`);
+
+  useEffect(() => {
+    if (socketUrl === `${ws}${path}`) return;
+    setSocketUrl(`${ws}${path}`);
+  }, [path, socketUrl, ws]);
+
+  useWebSocket(socketUrl, {
+    shouldReconnect: () => true,
+    onMessage(event) {
+      try {
+        const data = getSuperJson<T>(event.data);
+        if (data) {
+          onMessage(data);
+        }
+      } catch (error) {
+        console.error('Error parsing message', error);
+      }
+    },
+  });
+}

apps/dashboard/src/middleware.ts

@@ -4,10 +4,7 @@ import { authMiddleware } from '@clerk/nextjs';
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
-  debug: true,
-  signInUrl: '/get-started',
   publicRoutes: [
-    '/get-started(.*)',
     '/share/overview/:id',
     '/api/trpc(.*)',
     '/api/clerk/(.*)?',

apps/dashboard/src/modals/Instructions.tsx

@@ -0,0 +1,385 @@
+import Syntax from '@/components/syntax';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button, LinkButton } from '@/components/ui/button';
+import {
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ExternalLinkIcon, XIcon } from 'lucide-react';
+
+import type { IServiceClient } from '@openpanel/db';
+import type { frameworks } from '@openpanel/sdk-info';
+
+import { popModal } from '.';
+
+type Props = {
+  client: IServiceClient | null;
+  framework:
+    | (typeof frameworks.website)[number]
+    | (typeof frameworks.app)[number]
+    | (typeof frameworks.backend)[number];
+};
+
+const Header = ({ framework }: Pick<Props, 'framework'>) => (
+  <SheetHeader>
+    <SheetTitle>Instructions for {framework.name}</SheetTitle>
+  </SheetHeader>
+);
+
+const Footer = ({ framework }: Pick<Props, 'framework'>) => (
+  <SheetFooter>
+    <Button
+      variant={'secondary'}
+      className="flex-1"
+      onClick={() => popModal()}
+      icon={XIcon}
+    >
+      Close
+    </Button>
+    <LinkButton
+      target="_blank"
+      href={framework.href}
+      className="flex-1"
+      icon={ExternalLinkIcon}
+    >
+      More details
+    </LinkButton>
+  </SheetFooter>
+);
+
+const Instructions = ({ framework, client }: Props) => {
+  const { name } = framework;
+  const clientId = client?.id || 'REPLACE_WITH_YOUR_CLIENT';
+  const clientSecret = client?.secret || 'REPLACE_WITH_YOUR_SECRET';
+  if (
+    name === 'HTML / Script' ||
+    name === 'React' ||
+    name === 'Astro' ||
+    name === 'Remix' ||
+    name === 'Vue'
+  ) {
+    return (
+      <div className="flex flex-col gap-4">
+        <p>Copy the code below and insert it to you website</p>
+        <Syntax
+          code={`<script src="https://openpanel.dev/op.js" defer async></script>
+<script>
+  window.op = window.op || function (...args) { (window.op.q = window.op.q || []).push(args); };
+  window.op('ctor', {
+    clientId: '${clientId}',
+    trackScreenViews: true,
+    trackOutgoingLinks: true,
+    trackAttributes: true,
+  });
+</script>`}
+        />
+        <Alert>
+          <AlertDescription>
+            We have already added your client id to the snippet.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  if (name === 'Next.js') {
+    return (
+      <div className="flex flex-col gap-4">
+        <p>Install dependencies</p>
+        <Syntax code={`pnpm install @openpanel/nextjs`} />
+        <p>Add OpenpanelProvider to your root layout</p>
+        <Syntax
+          code={`import { OpenpanelProvider } from '@openpanel/nextjs';
+ 
+ export default RootLayout({ children }) {
+   return (
+     <>
+       <OpenpanelProvider
+         clientId="${clientId}"
+         trackScreenViews={true}
+         trackAttributes={true}
+         trackOutgoingLinks={true}
+         // If you have a user id, you can pass it here to identify the user
+         // profileId={'123'}
+       />
+       {children}
+     </>
+   )
+ }`}
+        />
+        <p>
+          This will track regular page views and outgoing links. You can also
+          track custom events.
+        </p>
+        <Syntax
+          code={`import { trackEvent } from '@openpanel/nextjs';
+ 
+// Sends an event with payload foo: bar
+trackEvent('my_event', { foo: 'bar' });
+`}
+        />
+      </div>
+    );
+  }
+
+  if (name === 'Laravel') {
+    return (
+      <div className="flex flex-col gap-4">
+        <p>Install dependencies</p>
+        <Syntax code={`composer require bleckert/openpanel-laravel`} />
+        <p>Add environment variables</p>
+        <Syntax
+          code={`OPENPANEL_CLIENT_ID=${clientId}
+OPENPANEL_CLIENT_SECRET=${clientSecret}`}
+        />
+        <p>Usage</p>
+        <Syntax
+          code={`use Bleckert\\OpenpanelLaravel\\Openpanel;
+
+$openpanel = app(Openpanel::class);
+
+// Identify user
+$openpanel->setProfileId(1);
+
+// Update user profile
+$openpanel->setProfile(
+  id: 1,
+  firstName: 'John Doe',
+  // ...
+);
+
+// Track event
+$openpanel->event(
+  name: 'User registered',
+);
+          `}
+        />
+        <Alert>
+          <AlertTitle>Shoutout!</AlertTitle>
+          <AlertDescription>
+            Huge shoutout to{' '}
+            <a
+              href="https://twitter.com/tbleckert"
+              target="_blank"
+              className="underline"
+            >
+              @tbleckert
+            </a>{' '}
+            for creating this package.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  if (name === 'Rest API') {
+    return (
+      <div className="flex flex-col gap-4">
+        <strong>Authentication</strong>
+        <p>You will need to pass your client ID and secret via headers.</p>
+        <strong>Usage</strong>
+        <p>Create a custom event called &quot;my_event&quot;.</p>
+        <Syntax
+          code={`curl 'https://api.openpanel.dev/event' \\
+  -H 'content-type: application/json' \\
+  -H 'openpanel-client-id: ${clientId}' \\
+  -H 'openpanel-client-secret: ${clientSecret}' \\
+  --data-raw '{"name":"my_event","properties":{"foo":"bar"},"timestamp":"2024-03-28T08:42:54.319Z"}'`}
+        />
+        <p>The payload should be a JSON object with the following fields:</p>
+        <ul className="list-inside list-disc">
+          <li>&quot;name&quot; (string): The name of the event.</li>
+          <li>&quot;properties&quot; (object): The properties of the event.</li>
+          <li>
+            &quot;timestamp&quot; (string): The timestamp of the event in ISO
+            8601 format.
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  if (name === 'Express') {
+    return (
+      <div className="flex flex-col gap-4">
+        <strong>Install dependencies</strong>
+        <Syntax code={`npm install @openpanel/express`} />
+
+        <strong>Usage</strong>
+        <p>Connect the middleware to your app.</p>
+        <Syntax
+          code={`import express from 'express';
+import createOpenpanelMiddleware from '@openpanel/express';
+  
+const app = express();
+  
+app.use(
+  createOpenpanelMiddleware({
+    clientId: '${clientId}',
+    clientSecret: '${clientSecret}',
+    // trackRequest(url) {
+    //   return url.includes('/v1')
+    // },
+    // getProfileId(req) {
+    //   return req.user.id
+    // }
+  })
+);
+  
+app.get('/sign-up', (req, res) => {
+  // track sign up events
+  req.op.event('sign-up', {
+    email: req.body.email,
+  });
+  res.send('Hello World');
+});
+  
+app.listen(3000, () => {
+  console.log('Server is running on http://localhost:3000');
+});`}
+        />
+      </div>
+    );
+  }
+
+  if (name === 'Node') {
+    return (
+      <div className="flex flex-col gap-4">
+        <strong>Install dependencies</strong>
+        <Syntax code={`pnpm install @openpanel/sdk`} />
+
+        <strong>Create a instance</strong>
+        <p>
+          Create a new instance of OpenpanelSdk. You can use this SDK in any JS
+          environment. You should omit clientSecret if you use this on web!
+        </p>
+        <Syntax
+          code={`import { OpenpanelSdk } from '@openpanel/sdk';
+ 
+const op = new OpenpanelSdk({
+  clientId: '${clientId}',
+  // mostly for backend and apps that can't rely on CORS
+  clientSecret: '${clientSecret}',
+});`}
+        />
+        <strong>Usage</strong>
+        <Syntax
+          code={`import { op } from './openpanel';
+          
+// Sends an event with payload foo: bar
+op.event('my_event', { foo: 'bar' });
+  
+// Identify with profile id
+op.setProfileId('123');
+  
+// or with additional data
+op.setProfile({
+  profileId: '123',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john.doe@openpanel.dev',
+});
+  
+// Increment a property
+op.increment('app_opened'); // increment by 1
+op.increment('app_opened', 5); // increment by 5
+  
+// Decrement a property
+op.decrement('app_opened'); // decrement by 1
+op.decrement('app_opened', 5); // decrement by 5`}
+        />
+      </div>
+    );
+  }
+
+  if (name === 'React-Native') {
+    return (
+      <div className="flex flex-col gap-4">
+        <strong>Install dependencies</strong>
+        <p>Don&apos;t forget to install the peer dependencies as well!</p>
+        <Syntax
+          code={`pnpm install @openpanel/react-native
+npx expo install --pnpm expo-application expo-constants`}
+        />
+        <strong>Create a instance</strong>
+        <p>
+          Create a new instance of OpenpanelSdk. You can use this SDK in any JS
+          environment. You should omit clientSecret if you use this on web!
+        </p>
+        <Syntax
+          code={`import { Openpanel } from '@openpanel/react-native';
+ 
+const op = new Openpanel({
+  clientId: '${clientId}',
+  clientSecret: '${clientSecret}',
+});`}
+        />
+        <strong>Usage</strong>
+        <Syntax
+          code={`import { op } from './openpanel';
+          
+// Sends an event with payload foo: bar
+op.event('my_event', { foo: 'bar' });
+  
+// Identify with profile id
+op.setProfileId('123');
+  
+// or with additional data
+op.setProfile({
+  profileId: '123',
+  firstName: 'John',
+  lastName: 'Doe',
+  email: 'john.doe@openpanel.dev',
+});
+  
+// Increment a property
+op.increment('app_opened'); // increment by 1
+op.increment('app_opened', 5); // increment by 5
+  
+// Decrement a property
+op.decrement('app_opened'); // decrement by 1
+op.decrement('app_opened', 5); // decrement by 5`}
+        />
+        <strong>Navigation</strong>
+        <p>
+          Check out our{' '}
+          <a
+            href="https://github.com/Openpanel-dev/examples/tree/main/expo-app"
+            target="_blank"
+            className="underline"
+          >
+            example app
+          </a>{' '}
+          . See below for a quick demo.
+        </p>
+        <Syntax
+          code={`function RootLayoutNav() {
+  const pathname = usePathname()
+ 
+  useEffect(() => {
+    op.screenView(pathname)
+  }, [pathname])
+
+  return (
+      <Stack>
+        {/*... */}
+      </Stack>
+  );
+}`}
+        />
+      </div>
+    );
+  }
+};
+
+export default function InsdtructionsWithModalContent(props: Props) {
+  return (
+    <SheetContent>
+      <Header framework={props.framework} />
+      <Instructions {...props} />
+      <Footer framework={props.framework} />
+    </SheetContent>
+  );
+}

apps/dashboard/src/modals/Modal/Container.tsx

@@ -2,17 +2,17 @@
 
 import { Button } from '@/components/ui/button';
 import { DialogContent } from '@/components/ui/dialog';
+import type { DialogContentProps } from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
 import { popModal } from '..';
 
-interface ModalContentProps {
+interface ModalContentProps extends DialogContentProps {
   children: React.ReactNode;
-  className?: string;
 }
 
-export function ModalContent({ children, className }: ModalContentProps) {
-  return <DialogContent className={className}>{children}</DialogContent>;
+export function ModalContent({ children, ...props }: ModalContentProps) {
+  return <DialogContent {...props}>{children}</DialogContent>;
 }
 
 interface ModalHeaderProps {

apps/dashboard/src/modals/OnboardingTroubleshoot.tsx

@@ -0,0 +1,51 @@
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { GlobeIcon, KeyIcon, UserIcon } from 'lucide-react';
+
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+export default function OnboardingTroubleshoot() {
+  return (
+    <ModalContent>
+      <ModalHeader
+        title="Troubleshoot"
+        text="Hmm, you have troubles? Well, let's solve them together."
+      />
+      <div className="flex flex-col gap-4">
+        <Alert>
+          <UserIcon size={16} />
+          <AlertTitle>Wrong client ID</AlertTitle>
+          <AlertDescription>
+            Make sure your <code>clientId</code> is correct
+          </AlertDescription>
+        </Alert>
+        <Alert>
+          <GlobeIcon size={16} />
+          <AlertTitle>Wrong domain on web</AlertTitle>
+          <AlertDescription>
+            For web apps its important that the domain is correctly configured.
+            We authenticate the requests based on the domain.
+          </AlertDescription>
+        </Alert>
+        <Alert>
+          <KeyIcon size={16} />
+          <AlertTitle>Wrong client secret</AlertTitle>
+          <AlertDescription>
+            For app and backend events it&apos;s important that you have correct{' '}
+            <code>clientId</code> and <code>clientSecret</code>
+          </AlertDescription>
+        </Alert>
+      </div>
+      <p className="mt-4 text-sm">
+        Still have issues? Join our{' '}
+        <a href="https://go.openpanel.dev/discord" className="underline">
+          discord channel
+        </a>{' '}
+        give us an email at{' '}
+        <a href="mailto:hello@openpanel.dev" className="underline">
+          hello@openpanel.dev
+        </a>{' '}
+        and we&apos;ll help you out.
+      </p>
+    </ModalContent>
+  );
+}

apps/dashboard/src/modals/VerifyEmail.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { getClerkError } from '@/utils/clerk-error';
+import { useSignUp } from '@clerk/nextjs';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+import { popModal } from '.';
+import { ModalContent, ModalHeader } from './Modal/Container';
+
+type Props = {
+  email: string;
+};
+
+export default function VerifyEmail({ email }: Props) {
+  const { signUp, setActive, isLoaded } = useSignUp();
+  const router = useRouter();
+  const [code, setCode] = useState('');
+
+  return (
+    <ModalContent
+      onPointerDownOutside={(e) => e.preventDefault()}
+      onEscapeKeyDown={(e) => e.preventDefault()}
+    >
+      <ModalHeader
+        title="Verify your email"
+        text={
+          <p>
+            Please enter the verification code sent to your{' '}
+            <span className="font-semibold">{email}</span>.
+          </p>
+        }
+      />
+
+      <InputOTP
+        maxLength={6}
+        value={code}
+        onChange={setCode}
+        onComplete={async () => {
+          if (!isLoaded) {
+            return toast.info('Sign up is not available at the moment');
+          }
+
+          try {
+            const completeSignUp = await signUp.attemptEmailAddressVerification(
+              {
+                code,
+              }
+            );
+
+            if (completeSignUp.status !== 'complete') {
+              // The status can also be `abandoned` or `missing_requirements`
+              // Please see https://clerk.com/docs/references/react/use-sign-up#result-status for  more information
+              return toast.error('Invalid code');
+            }
+
+            // Check the status to see if it is complete
+            // If complete, the user has been created -- set the session active
+            if (completeSignUp.status === 'complete') {
+              await setActive({ session: completeSignUp.createdSessionId });
+              router.push('/onboarding');
+              popModal();
+            }
+          } catch (e) {
+            const error = getClerkError(e);
+            if (error) {
+              toast.error(error.longMessage);
+            } else {
+              toast.error('An error occurred, please try again later');
+            }
+          }
+        }}
+      >
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+    </ModalContent>
+  );
+}

apps/dashboard/src/modals/index.tsx

@@ -47,6 +47,15 @@ const modals = {
   AddReference: dynamic(() => import('./AddReference'), {
     loading: Loading,
   }),
+  Instructions: dynamic(() => import('./Instructions'), {
+    loading: Loading,
+  }),
+  OnboardingTroubleshoot: dynamic(() => import('./OnboardingTroubleshoot'), {
+    loading: Loading,
+  }),
+  VerifyEmail: dynamic(() => import('./VerifyEmail'), {
+    loading: Loading,
+  }),
 };
 
 export const { pushModal, popModal, popAllModals, ModalProvider } =

apps/dashboard/src/styles/globals.css

@@ -38,7 +38,7 @@
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 100% 97.25%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;

apps/dashboard/src/trpc/api/routers/onboarding.ts

@@ -1,60 +1,63 @@
 import { randomUUID } from 'crypto';
 import { createTRPCRouter, protectedProcedure } from '@/trpc/api/trpc';
+import { getId } from '@/utils/getDbId';
+import { slug } from '@/utils/slug';
 import { clerkClient } from '@clerk/nextjs';
-import { z } from 'zod';
+import { cookies } from 'next/headers';
 
 import { hashPassword, stripTrailingSlash } from '@openpanel/common';
-import { db, transformOrganization } from '@openpanel/db';
+import type { ProjectType } from '@openpanel/db';
+import { db } from '@openpanel/db';
+import { zOnboardingProject } from '@openpanel/validation';
 
 export const onboardingRouter = createTRPCRouter({
-  organziation: protectedProcedure
-    .input(
-      z.object({
-        organization: z.string(),
-        project: z.string(),
-        cors: z.string().nullable(),
-      })
-    )
+  project: protectedProcedure
+    .input(zOnboardingProject)
     .mutation(async ({ input, ctx }) => {
-      const org = await clerkClient.organizations.createOrganization({
+      const types: ProjectType[] = [];
+      if (input.website) types.push('website');
+      if (input.app) types.push('app');
+      if (input.backend) types.push('backend');
+
+      const organization = await clerkClient.organizations.createOrganization({
         name: input.organization,
+        slug: slug(input.organization),
         createdBy: ctx.session.userId,
       });
 
-      if (org.slug) {
-        const project = await db.project.create({
-          data: {
-            name: input.project,
-            organizationSlug: org.slug,
-          },
-        });
-
-        const secret = randomUUID();
-        const client = await db.client.create({
-          data: {
-            name: `${project.name} Client`,
-            organizationSlug: org.slug,
-            projectId: project.id,
-            type: 'write',
-            cors: input.cors ? stripTrailingSlash(input.cors) : null,
-            secret: await hashPassword(secret),
-          },
-        });
-
-        return {
-          client: {
-            ...client,
-            secret,
-          },
-          project,
-          organization: transformOrganization(org),
-        };
+      if (!organization.slug) {
+        throw new Error('Organization slug is missing');
       }
 
+      const project = await db.project.create({
+        data: {
+          id: await getId('project', input.project),
+          name: input.project,
+          organizationSlug: organization.slug,
+          types,
+        },
+      });
+
+      const secret = randomUUID();
+      const client = await db.client.create({
+        data: {
+          name: `${project.name} Client`,
+          organizationSlug: organization.slug,
+          projectId: project.id,
+          type: 'write',
+          cors: input.domain ? stripTrailingSlash(input.domain) : null,
+          secret: await hashPassword(secret),
+        },
+      });
+
+      cookies().set('onboarding_client_secret', secret, {
+        maxAge: 60 * 60, // 1 hour
+        path: '/',
+      });
+
       return {
-        client: null,
-        project: null,
-        organization: org,
+        ...client,
+        secret,
       };
     }),
 });

apps/dashboard/src/utils/clerk-error.ts

@@ -0,0 +1,14 @@
+interface ClerkError extends Error {
+  longMessage: string;
+}
+
+export function getClerkError(e: unknown): ClerkError | null {
+  if (e && typeof e === 'object' && 'errors' in e && Array.isArray(e.errors)) {
+    const error = e.errors[0];
+    if ('longMessage' in error && typeof error.longMessage === 'string') {
+      return error as ClerkError;
+    }
+  }
+
+  return null;
+}

apps/dashboard/src/utils/date.ts

@@ -1,3 +1,7 @@
+import type { FormatStyleName } from 'javascript-time-ago';
+import TimeAgo from 'javascript-time-ago';
+import en from 'javascript-time-ago/locale/en';
+
 export function dateDifferanceInDays(date1: Date, date2: Date) {
   const diffTime = Math.abs(date2.getTime() - date1.getTime());
   return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
@@ -24,3 +28,10 @@ export function formatDateTime(date: Date) {
     minute: 'numeric',
   }).format(date);
 }
+
+TimeAgo.addDefaultLocale(en);
+const ta = new TimeAgo(getLocale());
+
+export function timeAgo(date: Date, style?: FormatStyleName) {
+  return ta.format(new Date(date), style);
+}

packages/common/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "ramda": "^0.29.1",
+    "superjson": "^1.13.3",
     "unique-names-generator": "^4.7.1"
   },
   "devDependencies": {

packages/common/src/object.ts

@@ -1,4 +1,5 @@
 import { anyPass, assocPath, isEmpty, isNil, reject } from 'ramda';
+import superjson from 'superjson';
 
 export function toDots(
   obj: Record<string, unknown>,
@@ -38,3 +39,16 @@ export function getSafeJson<T>(str: string): T | null {
     return null;
   }
 }
+
+export function getSuperJson<T>(str: string): T | null {
+  const json = getSafeJson<T>(str);
+  if (
+    typeof json === 'object' &&
+    json !== null &&
+    'json' in json &&
+    'meta' in json
+  ) {
+    return superjson.parse<T>(str);
+  }
+  return json;
+}

packages/constants/index.ts

@@ -2,6 +2,12 @@ import { isSameDay, isSameMonth } from 'date-fns';
 
 export const NOT_SET_VALUE = '(not set)';
 
+export const ProjectTypeNames = {
+  website: 'Website',
+  app: 'App',
+  backend: 'Backend',
+} as const;
+
 export const operators = {
   is: 'Is',
   isNot: 'Is not',

packages/db/package.json

@@ -21,6 +21,7 @@
     "@prisma/client": "^5.1.1",
     "ramda": "^0.29.1",
     "sqlstring": "^2.3.3",
+    "superjson": "^1.13.3",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

packages/db/prisma/migrations/20240412195501_add_project_type/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "ProjectType" AS ENUM ('website', 'app', 'backend');
+
+-- AlterTable
+ALTER TABLE "projects" ADD COLUMN     "types" "ProjectType"[] DEFAULT ARRAY[]::"ProjectType"[];

packages/db/prisma/schema.prisma

@@ -10,11 +10,18 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
+enum ProjectType {
+  website
+  app
+  backend
+}
+
 model Project {
-  id               String @id @default(dbgenerated("gen_random_uuid()"))
+  id               String        @id @default(dbgenerated("gen_random_uuid()"))
   name             String
   organizationSlug String
-  eventsCount      Int    @default(0)
+  eventsCount      Int           @default(0)
+  types            ProjectType[] @default([])
 
   events     Event[]
   profiles   Profile[]

packages/db/src/services/event.service.ts

@@ -1,5 +1,6 @@
 import { omit, uniq } from 'ramda';
 import { escape } from 'sqlstring';
+import superjson from 'superjson';
 import { v4 as uuid } from 'uuid';
 
 import { randomSplitName, toDots } from '@openpanel/common';
@@ -113,11 +114,51 @@ export interface IServiceCreateEventPayload {
   meta: EventMeta | undefined;
 }
 
+export interface IServiceEventMinimal {
+  id: string;
+  name: string;
+  projectId: string;
+  sessionId: string;
+  createdAt: Date;
+  country?: string | undefined;
+  os?: string | undefined;
+  browser?: string | undefined;
+  device?: string | undefined;
+  brand?: string | undefined;
+  duration: number;
+  path: string;
+  referrer: string | undefined;
+  meta: EventMeta | undefined;
+  minimal: boolean;
+}
+
 interface GetEventsOptions {
   profile?: boolean | Prisma.ProfileSelect;
   meta?: boolean | Prisma.EventMetaSelect;
 }
 
+export function transformMinimalEvent(
+  event: IServiceCreateEventPayload
+): IServiceEventMinimal {
+  return {
+    id: event.id,
+    name: event.name,
+    projectId: event.projectId,
+    sessionId: event.sessionId,
+    createdAt: event.createdAt,
+    country: event.country,
+    os: event.os,
+    browser: event.browser,
+    device: event.device,
+    brand: event.brand,
+    duration: event.duration,
+    path: event.path,
+    referrer: event.referrer,
+    meta: event.meta,
+    minimal: true,
+  };
+}
+
 export async function getLiveVisitors(projectId: string) {
   const keys = await redis.keys(`live:event:${projectId}:*`);
   return keys.length;
@@ -227,7 +268,7 @@ export async function createEvent(
     },
   });
 
-  redisPub.publish('event', JSON.stringify(transformEvent(event)));
+  redisPub.publish('event', superjson.stringify(transformEvent(event)));
   redis.set(
     `live:event:${event.project_id}:${event.profile_id}`,
     '',

packages/db/src/services/organization.service.ts

@@ -23,8 +23,9 @@ export function transformOrganization(org: Organization) {
 
 export async function getCurrentOrganizations() {
   const session = auth();
+  if (!session.userId) return [];
   const organizations = await clerkClient.users.getOrganizationMembershipList({
-    userId: session.userId!,
+    userId: session.userId,
   });
   return organizations.map((item) => transformOrganization(item.organization));
 }

packages/db/src/services/project.service.ts

@@ -1,9 +1,14 @@
 import { auth } from '@clerk/nextjs';
 
-import type { Project } from '../prisma-client';
+import type { Prisma, Project } from '../prisma-client';
 import { db } from '../prisma-client';
 
 export type IServiceProject = Project;
+export type IServiceProjectWithClients = Prisma.ProjectGetPayload<{
+  include: {
+    clients: true;
+  };
+}>;
 
 export async function getProjectById(id: string) {
   const res = await db.project.findUnique({
@@ -19,6 +24,23 @@ export async function getProjectById(id: string) {
   return res;
 }
 
+export async function getProjectWithClients(id: string) {
+  const res = await db.project.findUnique({
+    where: {
+      id,
+    },
+    include: {
+      clients: true,
+    },
+  });
+
+  if (!res) {
+    return null;
+  }
+
+  return res;
+}
+
 export async function getProjectsByOrganizationSlug(organizationSlug: string) {
   return db.project.findMany({
     where: {

packages/sdks/_info/frameworks.tsx

@@ -0,0 +1,67 @@
+const api = {
+  logo: 'https://cdn-icons-png.flaticon.com/512/10169/10169724.png',
+  name: 'Rest API',
+  href: 'https://docs.openpanel.dev/docs/api',
+} as const;
+
+export const frameworks = {
+  website: [
+    {
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png',
+      name: 'HTML / Script',
+      href: 'https://docs.openpanel.dev/docs/script',
+    },
+    {
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png',
+      name: 'React',
+      href: 'https://docs.openpanel.dev/docs/react',
+    },
+    {
+      logo: 'https://static-00.iconduck.com/assets.00/nextjs-icon-512x512-y563b8iq.png',
+      name: 'Next.js',
+      href: 'https://docs.openpanel.dev/docs/nextjs',
+    },
+    {
+      logo: 'https://www.datocms-assets.com/205/1642515307-square-logo.svg',
+      name: 'Remix',
+      href: 'https://docs.openpanel.dev/docs/remix',
+    },
+    {
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1024px-Vue.js_Logo_2.svg.png',
+      name: 'Vue',
+      href: 'https://docs.openpanel.dev/docs/vue',
+    },
+    {
+      logo: 'https://astro.build/assets/press/astro-icon-dark.png',
+      name: 'Astro',
+      href: 'https://docs.openpanel.dev/docs/astro',
+    },
+    api,
+  ],
+  app: [
+    {
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png',
+      name: 'React-Native',
+      href: 'https://docs.openpanel.dev/docs/react-native',
+    },
+    api,
+  ],
+  backend: [
+    {
+      logo: 'https://static-00.iconduck.com/assets.00/node-js-icon-454x512-nztofx17.png',
+      name: 'Node',
+      href: 'https://docs.openpanel.dev/docs/node',
+    },
+    {
+      logo: 'https://expressjs.com/images/favicon.png',
+      name: 'Express',
+      href: 'https://docs.openpanel.dev/docs/express',
+    },
+    {
+      logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/1969px-Laravel.svg.png',
+      name: 'Laravel',
+      href: 'https://github.com/tbleckert/openpanel-laravel/tree/main',
+    },
+    api,
+  ],
+} as const;

packages/sdks/_info/index.ts

@@ -0,0 +1 @@
+export * from './frameworks';

packages/sdks/_info/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@openpanel/sdk-info",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --check \"**/*.{mjs,ts,md,json}\"",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env -c --"
+  },
+  "devDependencies": {
+    "@openpanel/eslint-config": "workspace:*",
+    "@openpanel/prettier-config": "workspace:*",
+    "@openpanel/tsconfig": "workspace:*",
+    "eslint": "^8.48.0",
+    "prettier": "^3.0.3",
+    "prisma": "^5.1.1",
+    "typescript": "^5.2.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@openpanel/eslint-config/base"
+    ]
+  },
+  "prettier": "@openpanel/prettier-config"
+}

packages/sdks/_info/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@openpanel/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}

packages/validation/src/index.ts

@@ -97,3 +97,36 @@ export const zCreateReference = z.object({
   projectId: z.string(),
   datetime: z.string(),
 });
+
+export const zOnboardingProject = z
+  .object({
+    organization: z.string().min(3),
+    project: z.string().min(3),
+    domain: z.string().url().or(z.literal('').or(z.null())),
+    website: z.boolean(),
+    app: z.boolean(),
+    backend: z.boolean(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.website && !data.domain) {
+      ctx.addIssue({
+        code: 'custom',
+        message: 'Domain is required for website tracking',
+        path: ['domain'],
+      });
+    }
+
+    if (
+      data.website === false &&
+      data.app === false &&
+      data.backend === false
+    ) {
+      ['app', 'backend', 'website'].forEach((key) => {
+        ctx.addIssue({
+          code: 'custom',
+          message: 'At least one type must be selected',
+          path: [key],
+        });
+      });
+    }
+  });

pnpm-lock.yaml

@@ -71,6 +71,9 @@ importers:
       sqlstring:
         specifier: ^2.3.3
         version: 2.3.3
+      superjson:
+        specifier: ^1.13.3
+        version: 1.13.3
       ua-parser-js:
         specifier: ^1.0.37
         version: 1.0.37
@@ -150,6 +153,9 @@ importers:
       '@openpanel/queue':
         specifier: workspace:^
         version: link:../../packages/queue
+      '@openpanel/sdk-info':
+        specifier: workspace:^
+        version: link:../../packages/sdks/_info
       '@openpanel/validation':
         specifier: workspace:^
         version: link:../../packages/validation
@@ -267,9 +273,18 @@ importers:
       flag-icons:
         specifier: ^7.1.0
         version: 7.1.0
+      framer-motion:
+        specifier: ^11.0.28
+        version: 11.0.28(react-dom@18.2.0)(react@18.2.0)
       hamburger-react:
         specifier: ^2.5.0
         version: 2.5.0(react@18.2.0)
+      input-otp:
+        specifier: ^1.2.4
+        version: 1.2.4(react-dom@18.2.0)(react@18.2.0)
+      javascript-time-ago:
+        specifier: ^2.5.9
+        version: 2.5.9
       lodash.debounce:
         specifier: ^4.0.8
         version: 4.0.8
@@ -730,6 +745,9 @@ importers:
       ramda:
         specifier: ^0.29.1
         version: 0.29.1
+      superjson:
+        specifier: ^1.13.3
+        version: 1.13.3
       unique-names-generator:
         specifier: ^4.7.1
         version: 4.7.1
@@ -818,6 +836,9 @@ importers:
       sqlstring:
         specifier: ^2.3.3
         version: 2.3.3
+      superjson:
+        specifier: ^1.13.3
+        version: 1.13.3
       uuid:
         specifier: ^9.0.1
         version: 9.0.1
@@ -921,6 +942,30 @@ importers:
         specifier: ^5.2.2
         version: 5.3.3
 
+  packages/sdks/_info:
+    devDependencies:
+      '@openpanel/eslint-config':
+        specifier: workspace:*
+        version: link:../../../tooling/eslint
+      '@openpanel/prettier-config':
+        specifier: workspace:*
+        version: link:../../../tooling/prettier
+      '@openpanel/tsconfig':
+        specifier: workspace:*
+        version: link:../../../tooling/typescript
+      eslint:
+        specifier: ^8.48.0
+        version: 8.56.0
+      prettier:
+        specifier: ^3.0.3
+        version: 3.2.5
+      prisma:
+        specifier: ^5.1.1
+        version: 5.9.1
+      typescript:
+        specifier: ^5.2.2
+        version: 5.3.3
+
   packages/sdks/express:
     dependencies:
       '@openpanel/sdk':
@@ -10600,6 +10645,25 @@ packages:
       '@emotion/is-prop-valid': 0.8.8
     dev: false
 
+  /framer-motion@11.0.28(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-j/vNYTCH5MX5sY/3dwMs00z1+qAqKX3iIHF762bwqlU814ooD5dDbuj3pA0LmIT5YqyryCkXEb/q+zRblin0lw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tslib: 2.6.2
+    dev: false
+
   /freeport-async@2.0.0:
     resolution: {integrity: sha512-K7od3Uw45AJg00XUmy15+Hae2hOcgKcmN3/EF6Y7i01O0gaqiRx8sUSpsb9+BRNL8RPBrhzPsVfy8q9ADlJuWQ==}
     engines: {node: '>=8'}
@@ -11303,6 +11367,16 @@ packages:
     resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
     dev: false
 
+  /input-otp@1.2.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-md6rhmD+zmMnUh5crQNSQxq3keBRYvE3odbr4Qb9g2NWzQv9azi+t1a3X4TBTbh98fsGHgEEJlzbe1q860uGCA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /internal-ip@4.3.0:
     resolution: {integrity: sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==}
     engines: {node: '>=6'}
@@ -11757,6 +11831,12 @@ packages:
     resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
     dev: false
 
+  /javascript-time-ago@2.5.9:
+    resolution: {integrity: sha512-pQ8mNco/9g9TqWXWWjP0EWl6i/lAQScOyEeXy5AB+f7MfLSdgyV9BJhiOD1zrIac/lrxPYOWNbyl/IW8CW5n0A==}
+    dependencies:
+      relative-time-format: 1.1.6
+    dev: false
+
   /jest-environment-node@29.7.0:
     resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -15421,6 +15501,10 @@ packages:
       vfile: 6.0.1
     dev: false
 
+  /relative-time-format@1.1.6:
+    resolution: {integrity: sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ==}
+    dev: false
+
   /remark-gfm@3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
     dependencies:

tooling/eslint/nextjs.js

@@ -3,6 +3,7 @@ const config = {
   extends: ['next'],
   rules: {
     '@next/next/no-html-link-for-pages': 'off',
+    '@next/next/no-img-element': 'off',
   },
 };