Claudio/comp 106 add implementation widget

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

@@ -0,0 +1,32 @@
+"use server";
+
+import { db } from "@comp/db";
+import { generateChecklistItems } from "./checklist-items";
+import type { ChecklistItemProps } from "./types";
+
+export interface OnboardingStatus {
+	checklistItems: ChecklistItemProps[];
+	completedItems: number;
+	totalItems: number;
+}
+
+export async function getOnboardingStatus(
+	orgId: string,
+): Promise<OnboardingStatus | { error: string }> {
+	const onboarding = await db.onboarding.findUnique({
+		where: {
+			organizationId: orgId,
+		},
+	});
+
+	if (!onboarding) {
+		return { error: "Organization onboarding not found" };
+	}
+
+	const checklistItems = generateChecklistItems(onboarding, orgId);
+
+	const completedItems = checklistItems.filter((item) => item.completed).length;
+	const totalItems = checklistItems.length;
+
+	return { checklistItems, completedItems, totalItems };
+} 

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/implementation/checklist-items.tsx

@@ -0,0 +1,67 @@
+import type { Onboarding } from "@comp/db/types";
+import { Icons } from "@comp/ui/icons";
+import { ListCheck, NotebookText, Store, Users } from "lucide-react";
+import type { ChecklistItemProps } from "./types";
+
+export function generateChecklistItems(
+	onboarding: Onboarding,
+	orgId: string,
+): ChecklistItemProps[] {
+	return [
+		{
+			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}/people`,
+			dbColumn: "employees",
+			completed: onboarding.employees,
+			docs: "https://trycomp.ai/docs/people",
+			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: "Complete Tasks",
+			description:
+				"Tasks in Comp AI are automatically generated for you, based on the frameworks you selected. Tasks are linked to controls, which are determined by your policies. By completing tasks, you can show auditors that you are following your own policies.",
+			href: `/${orgId}/tasks`,
+			dbColumn: "tasks",
+			completed: onboarding.tasks,
+			docs: "https://trycomp.ai/docs/tasks",
+			buttonLabel: "Create a Task",
+			icon: <ListCheck className="h-5 w-5" />,
+		},
+	];
+} 

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

@@ -1,13 +1,13 @@
 "use client";
 
-import { ChecklistProps } from "../types/ChecklistProps.types";
+import { ChecklistItemProps } from "../types";
 import { ChecklistItem } from "./ChecklistItem";
 
-export function Checklist({ items }: ChecklistProps) {
+export function Checklist({ items }: { items: ChecklistItemProps[] }) {
     return (
         <div className="flex flex-col gap-4">
             {items.map((item) => (
-                <ChecklistItem key={item.dbColumn as string} {...item} />
+                <ChecklistItem key={item.dbColumn} {...item} />
             ))}
         </div>
     );

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

@@ -1,114 +1,18 @@
-import { db } from "@comp/db";
-import { Icons } from "@comp/ui/icons";
-import { 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}/people`,
-				dbColumn: "employees",
-				completed: onboarding.employees,
-				docs: "https://trycomp.ai/docs/people",
-				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: "Complete Tasks",
-				description:
-					"Tasks in Comp AI are automatically generated for you, based on the frameworks you selected. Tasks are linked to controls, which are determined by your policies. By completing tasks, you can show auditors that you are following your own policies.",
-				href: `/${orgId}/tasks`,
-				dbColumn: "tasks",
-				completed: onboarding.tasks,
-				docs: "https://trycomp.ai/docs/tasks",
-				buttonLabel: "Create a Task",
-				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 };
-	},
-);
+import { getOnboardingStatus } from "./actions";
 
 export default async function Page({
 	params,
 }: {
 	params: Promise<{ orgId: string }>;
 }) {
 	const { orgId } = await params;
-	const checklistData = await getChecklistItems(orgId);
+	const checklistData = await getOnboardingStatus(orgId);
 
 	if ("error" in checklistData) {
-		return <div>{checklistData.error}</div>;
+		return <div>Error loading onboarding status: {checklistData.error}</div>;
 	}
 
 	return (

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

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

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

@@ -9,6 +9,8 @@ import type { Organization } from "@comp/db/types";
 import dynamic from "next/dynamic";
 import { cookies, headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
+import { FloatingOnboardingChecklist } from "@/components/onboarding/FloatingOnboardingChecklist";
+import { getOnboardingStatus } from "./implementation/actions";
 
 const HotKeys = dynamic(
 	() => import("@/components/hot-keys").then((mod) => mod.HotKeys),
@@ -62,6 +64,16 @@ export default async function Layout({
 		return notFound();
 	}
 
+	// Fetch onboarding status
+	const onboardingStatus = await getOnboardingStatus(currentOrganization.id);
+
+	// Handle potential error during fetching
+	if ("error" in onboardingStatus) {
+		// Decide how to handle the error - maybe log it or show a generic error message
+		// For now, we'll proceed without the checklist
+		console.error("Error fetching onboarding status:", onboardingStatus.error);
+	}
+
 	return (
 		<SidebarProvider initialIsCollapsed={isCollapsed}>
 			<AnimatedLayout
@@ -72,6 +84,16 @@ export default async function Layout({
 				<main className="px-4 mx-auto pb-8">{children}</main>
 				<AssistantSheet />
 			</AnimatedLayout>
+			{/* Render floating checklist only if onboarding is not complete and no fetch error */}
+			{!("error" in onboardingStatus) &&
+				onboardingStatus.completedItems < onboardingStatus.totalItems && (
+					<FloatingOnboardingChecklist
+						orgId={currentOrganization.id}
+						completedItems={onboardingStatus.completedItems}
+						totalItems={onboardingStatus.totalItems}
+						checklistItems={onboardingStatus.checklistItems}
+					/>
+				)}
 			<HotKeys />
 		</SidebarProvider>
 	);

apps/app/src/components/onboarding/FloatingOnboardingChecklist.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Progress } from "@comp/ui/progress";
+import { cn } from "@comp/ui/cn";
+import Link from "next/link";
+import { Button } from "@comp/ui/button";
+import type { ChecklistItemProps } from "@/app/[locale]/(app)/(dashboard)/[orgId]/implementation/types";
+import { Circle } from "lucide-react";
+import { usePathname } from "next/navigation";
+
+interface FloatingOnboardingChecklistProps {
+	orgId: string;
+	completedItems: number;
+	totalItems: number;
+	checklistItems: ChecklistItemProps[];
+	className?: string;
+}
+
+export function FloatingOnboardingChecklist({
+	orgId,
+	completedItems,
+	totalItems,
+	checklistItems,
+	className,
+}: FloatingOnboardingChecklistProps) {
+	const progressPercentage = (completedItems / totalItems) * 100;
+	const remainingItems = totalItems - completedItems;
+	const incompleteItems = checklistItems.filter((item) => !item.completed);
+	const pathname = usePathname();
+
+	const implementationPathRegex = /\/[^/]+\/implementation$/;
+
+	if (remainingItems === 0 || implementationPathRegex.test(pathname)) {
+		return null;
+	}
+
+	return (
+		<div
+			className={cn(
+				"fixed bottom-4 right-4 z-50 w-80 rounded-sm border bg-card p-4 text-card-foreground shadow-lg",
+				className,
+			)}
+		>
+			<div className="mb-3">
+				<h4 className="mb-1 font-medium leading-none">Implementation Progress</h4>
+				<div className="flex justify-between text-xs text-muted-foreground mb-2">
+					<span>{completedItems} Completed</span>
+					<span>{remainingItems} Remaining</span>
+				</div>
+				<Progress value={progressPercentage} className="h-1.5" />
+			</div>
+
+			<div className="mb-3 grid gap-3 max-h-40 overflow-y-auto">
+				{incompleteItems.map((item) => (
+					<Link
+						href={item.href}
+						key={item.dbColumn}
+						className="group flex items-center gap-2 text-sm hover:text-primary"
+					>
+						<Circle className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
+						<span className="font-medium">{item.title}</span>
+					</Link>
+				))}
+			</div>
+
+			<Link href={`/${orgId}/implementation`} passHref>
+				<Button
+					variant="secondary"
+					size="sm"
+					className="w-full"
+				>
+					View All Steps
+				</Button>
+			</Link>
+		</div>
+	);
+}