Merge pull request #402 from trycompai/lewis/onboarding-experience

User onboarding

Author: carhartlewis

apps/app/src/actions/organization/create-organization-action.ts

@@ -46,13 +46,15 @@ export const createOrganizationAction = authActionClient
 			createControlArtifacts: 0,
 			total: 0,
 		};
+
 		const totalStart = performance.now();
 		let start = performance.now();
 
 		try {
 			const session = await auth.api.getSession({
 				headers: await headers(),
 			});
+
 			timings.getAuthSession = (performance.now() - start) / 1000;
 
 			if (!session?.session.activeOrganizationId) {
@@ -71,6 +73,12 @@ export const createOrganizationAction = authActionClient
 				});
 			}
 
+			await db.onboarding.create({
+				data: {
+					organizationId: session.session.activeOrganizationId,
+				},
+			});
+
 			const organizationId = session.session.activeOrganizationId;
 
 			// --- External API Call + Initial Org Update (Outside Transaction) ---

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/actions/update-onboarding-item.ts

@@ -0,0 +1,38 @@
+"use server";
+
+import { db } from "@comp/db";
+import { Onboarding } from "@comp/db/types";
+import { revalidatePath } from "next/cache";
+
+export async function updateOnboardingItem(
+	orgId: string,
+	onboardingItem: Exclude<keyof Onboarding, "organizationId">,
+	value: boolean,
+): Promise<{ success: true; error: null } | { success: false; error: string }> {
+	try {
+		const onboarding = await db.onboarding.findUnique({
+			where: { organizationId: orgId },
+		});
+
+		if (!onboarding) {
+			throw new Error("Onboarding not found");
+		}
+
+		await db.onboarding.update({
+			where: { organizationId: orgId },
+			data: { [onboardingItem]: value },
+		});
+
+		revalidatePath(`/${orgId}/implementation`);
+
+		return { success: true, error: null };
+	} catch (error) {
+		return {
+			success: false,
+			error:
+				error instanceof Error
+					? error.message
+					: "An unexpected error occurred",
+		};
+	}
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/components/Checklist.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Accordion } from "@comp/ui/accordion";
+import { ChecklistProps } from "../types/ChecklistProps.types";
+import { ChecklistItem } from "./ChecklistItem";
+
+export function Checklist({ items }: ChecklistProps) {
+    return (
+        <div className="flex flex-col gap-4">
+            {items.map((item) => (
+                <ChecklistItem key={item.dbColumn} {...item} />
+            ))}
+        </div>
+    );
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/components/ChecklistItem.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Badge } from "@comp/ui/badge";
+import { Button } from "@comp/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@comp/ui/card";
+import {
+    ArrowRight,
+    Loader2,
+} from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { updateOnboardingItem } from "../actions/update-onboarding-item";
+import type { ChecklistItemProps } from "../types/ChecklistProps.types";
+
+export function ChecklistItem({
+    title,
+    description,
+    href,
+    docs,
+    dbColumn,
+    completed,
+    buttonLabel,
+    icon,
+}: ChecklistItemProps) {
+    const { orgId } = useParams<{ orgId: string }>();
+    const linkWithOrgReplaced = href.replace(":organizationId", orgId);
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const router = useRouter();
+
+    const handleMarkAsDone = async () => {
+        try {
+            setIsUpdating(true);
+            setIsAnimating(true);
+
+            const result = await updateOnboardingItem(orgId, dbColumn, true);
+
+            if (!result.success) {
+                throw new Error(result.error);
+            }
+
+            setTimeout(() => setIsAnimating(false), 600);
+            router.push(linkWithOrgReplaced);
+        } catch (error) {
+            toast.error(
+                error instanceof Error ? error.message : "Failed to update status",
+            );
+        } finally {
+            setIsUpdating(false);
+        }
+    };
+
+    return (
+        <Card>
+            <div className={completed ? "opacity-40" : ""}>
+                <CardHeader className="pb-3">
+                    <div className="items-center gap-4 space-y-0">
+                        <CardTitle className="flex items-center gap-4 justify-between w-full">
+                            <span className={completed ? "line-through" : ""}>
+                                {title}
+                            </span>
+                            {completed && (
+                                <Badge
+                                    variant="marketing"
+                                >
+                                    Completed
+                                </Badge>
+                            )}
+                        </CardTitle>
+                        {description && (
+                            <CardDescription className="text-sm text-muted-foreground flex flex-col gap-4">
+                                {description}
+                            </CardDescription>
+                        )}
+                    </div>
+                </CardHeader>
+                <CardContent />
+                {!completed && (
+                    <CardFooter className="justify-end">
+                        {!completed && (
+                            <Button
+                                variant={completed ? "outline" : "default"}
+                                className="w-full sm:w-fit"
+                                onClick={handleMarkAsDone}
+                                disabled={isUpdating}
+                            >
+                                {completed ? (
+                                    "Completed"
+                                ) : isUpdating ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    </>
+                                ) : (
+                                    <>
+                                        {buttonLabel}
+                                        <ArrowRight className="ml-1 h-4 w-4" />
+                                    </>
+                                )}
+                            </Button>
+                        )}
+                    </CardFooter>
+                )}
+            </div>
+        </Card>
+    );
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/components/OnboardingProgress.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@comp/ui/alert";
+import { Progress } from "@comp/ui/progress";
+import { useEffect, useState } from "react";
+
+interface OnboardingProgressProps {
+    totalSteps: number;
+    completedSteps: number;
+}
+
+export function OnboardingProgress({
+    totalSteps,
+    completedSteps,
+}: OnboardingProgressProps) {
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        const percentage = (completedSteps / totalSteps) * 100;
+
+        // Animate progress bar
+        const timer = setTimeout(() => setProgress(percentage), 100);
+        return () => clearTimeout(timer);
+    }, [completedSteps, totalSteps]);
+
+    return (
+        <Alert variant="default" className="bg-primary/5 border-primary/40 rounded-sm">
+            <AlertTitle>
+                Welcome to Comp AI!
+            </AlertTitle>
+            <AlertDescription>
+                Complete the steps below to complete your onboarding and get started with Comp AI.
+            </AlertDescription>
+            <div className="flex flex-col gap-2 mt-4">
+                <Progress value={progress} className="w-full h-2" />
+                <div className="flex justify-between">
+                    <span className="text-xs text-muted-foreground">
+                        {completedSteps} / {totalSteps}
+                    </span>
+                </div>
+            </div>
+        </Alert>
+    );
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/layout.tsx

@@ -0,0 +1,11 @@
+export default async function Layout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="max-w-[1200px] m-auto">
+			<main className="mt-8 max-w-[600px] mx-auto">{children}</main>
+		</div>
+	);
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/page.tsx

@@ -0,0 +1,105 @@
+import { db } from "@comp/db";
+import { Icons } from "@comp/ui/icons";
+import { BookOpen, ListCheck, NotebookText, Store, Users } from "lucide-react";
+import { redirect } from "next/navigation";
+import { cache } from 'react'
+import { Checklist } from "./components/Checklist";
+import { OnboardingProgress } from "./components/OnboardingProgress";
+import { ChecklistItemProps } from "./types/ChecklistProps.types";
+
+const getChecklistItems = cache(async (orgId: string): Promise<{ checklistItems: ChecklistItemProps[], completedItems: number, totalItems: number } | { error: string }> => {
+    const onboarding = await db.onboarding.findUnique({
+        where: {
+            organizationId: orgId,
+        },
+    });
+
+    if (!onboarding) {
+        return { error: "Organization onboarding not found" };
+    }
+
+    const checklistItems: ChecklistItemProps[] = [
+        {
+            title: "Check & Publish Policies",
+            description: "We've given you all of the policies you need to get started. Go through them, make sure they're relevant to your organization and then publish them for your employees to sign.",
+            href: `/${orgId}/policies`,
+            dbColumn: "policies",
+            completed: onboarding.policies,
+            docs: "https://trycomp.ai/docs/policies",
+            buttonLabel: "Publish Policies",
+            icon: <NotebookText className="h-5 w-5" />,
+        },
+        {
+            title: "Add Employees",
+            description: "You should add all of your employees to Comp AI, either through an integration or by manually adding them and then ask them to sign the policies you published in the employee portal.",
+            href: `/${orgId}/employees`,
+            dbColumn: "employees",
+            completed: onboarding.employees,
+            docs: "https://trycomp.ai/docs/employees",
+            buttonLabel: "Add an Employee",
+            icon: <Users className="h-5 w-5" />,
+        },
+        {
+            title: "Add Vendors",
+            description: "For frameworks like SOC 2, you must assess and report on your vendors. You can add your vendors to Comp AI, and assign risk levels to them. Auditors can review the vendors and their risk levels.",
+            href: `/${orgId}/vendors`,
+            dbColumn: "vendors",
+            completed: onboarding.vendors,
+            docs: "https://trycomp.ai/docs/vendors",
+            buttonLabel: "Add a Vendor",
+            icon: <Store className="h-5 w-5" />,
+        },
+        {
+            title: "Manage Risks",
+            description: "You can manage your risks in Comp AI by adding them to your organization and then assigning them to employees or vendors. Auditors can review the risks and their status.",
+            href: `/${orgId}/risk`,
+            dbColumn: "risk",
+            completed: onboarding.risk,
+            docs: "https://trycomp.ai/docs/risks",
+            buttonLabel: "Create a Risk",
+            icon: <Icons.Risk className="h-5 w-5" />,
+        },
+        {
+            title: "Upload Evidence",
+            description: "Evidence in Comp AI is automatically generated for you, based on the frameworks you selected. Evidence tasks are linked to controls, which are determined by your policies. By uploading evidence, you can show auditors that you are following your own policies.",
+            href: `/${orgId}/evidence`,
+            dbColumn: "evidence",
+            completed: onboarding.evidence,
+            docs: "https://trycomp.ai/docs/evidence",
+            buttonLabel: "Upload Evidence",
+            icon: <ListCheck className="h-5 w-5" />,
+        }
+    ];
+
+    const completedItems = checklistItems.filter((item) => item.completed).length;
+    const totalItems = checklistItems.length;
+
+    if (completedItems === totalItems) {
+        return redirect(`/${orgId}/frameworks`);
+    }
+
+    return { checklistItems, completedItems, totalItems };
+})
+
+export default async function Page({
+    params,
+}: {
+    params: Promise<{ orgId: string }>;
+}) {
+    const { orgId } = await params;
+    const checklistData = await getChecklistItems(orgId);
+
+    if ('error' in checklistData) {
+        return <div>{checklistData.error}</div>;
+    }
+
+    return (
+        <div className="space-y-6">
+            <OnboardingProgress
+                completedSteps={checklistData.completedItems}
+                totalSteps={checklistData.totalItems}
+            />
+            <Checklist items={checklistData.checklistItems} />
+        </div>
+    )
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/types/ChecklistProps.types.ts

@@ -0,0 +1,16 @@
+import { Onboarding } from "@comp/db/types";
+
+export interface ChecklistProps {
+	items: ChecklistItemProps[];
+}
+
+export interface ChecklistItemProps {
+	title: string;
+	description?: string;
+	href: string;
+	docs: string;
+	dbColumn: Exclude<keyof Onboarding, "organizationId">;
+	completed: boolean;
+	buttonLabel: string;
+	icon: React.ReactNode;
+}

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

@@ -7,5 +7,5 @@ export default async function DashboardPage({
 }) {
 	const organizationId = (await params).orgId;
 
-	return redirect(`/${organizationId}/frameworks`);
+	return redirect(`/${organizationId}/implementation`);
 }

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/settings/members/components/InviteMemberForm.tsx

@@ -156,7 +156,7 @@ export function InviteMemberForm() {
 						<Button
 							type="submit"
 							disabled={form.formState.isSubmitting}
-							variant="action"
+							variant="default"
 						>
 							{form.formState.isSubmitting ? (
 								<>