onboarding completed

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)/get-started/page.tsx

@@ -1,15 +0,0 @@
-import { auth } from '@clerk/nextjs';
-import { redirect } from 'next/navigation';
-
-import GetStartedClient from './get-started';
-
-// Sign up
-const GetStarted = () => {
-  const session = auth();
-  if (session.userId) {
-    return redirect('/');
-  }
-  return <GetStartedClient />;
-};
-
-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)/sso-callback/page.tsx

@@ -1,7 +0,0 @@
-import { AuthenticateWithRedirectCallback } from '@clerk/nextjs';
-
-const SSOCallback = () => {
-  return <AuthenticateWithRedirectCallback />;
-};
-
-export default SSOCallback;

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} />}