"use client" import * as React from "react" import { DashboardSectionIntro } from "@/components/dashboard-section-heading" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { cn } from "@/lib/utils" export const GETTING_STARTED_STORAGE_KEY = "exxat:getting-started-variant" export type GettingStartedVariant = "checklist" | "workspace" | "numbered" | "quickstart" const GETTING_STARTED_VARIANTS: { value: GettingStartedVariant; label: string }[] = [ { value: "checklist", label: "Checklist" }, { value: "workspace", label: "Workspace setup" }, { value: "numbered", label: "Stepped flow" }, { value: "quickstart", label: "Quick start" }, ] function isGettingStartedVariant(value: string): value is GettingStartedVariant { return GETTING_STARTED_VARIANTS.some((variant) => variant.value === value) } interface ChecklistStep { id: string title: string description: string completed: boolean actionLabel: string } const CHECKLIST_STEPS: ChecklistStep[] = [ { id: "profile", title: "Complete your profile", description: "Add your name, photo, and role so your team knows who you are.", completed: true, actionLabel: "Edit profile", }, { id: "workspace", title: "Set up your workspace", description: "Customize your workspace with a name, icon, and default settings.", completed: false, actionLabel: "Configure workspace", }, { id: "invite", title: "Invite your team", description: "Bring your teammates on board so you can collaborate in real time.", completed: false, actionLabel: "Send invites", }, { id: "integrations", title: "Connect integrations", description: "Link tools like Slack or GitHub to streamline clinical education workflows.", completed: false, actionLabel: "Browse integrations", }, { id: "workflow", title: "Create your first workflow", description: "Automate a repetitive task with a simple drag-and-drop workflow builder.", completed: false, actionLabel: "Build workflow", }, { id: "notifications", title: "Set up notifications", description: "Choose how and when you want to be notified about updates and mentions.", completed: false, actionLabel: "Manage notifications", }, ] interface SetupStep { title: string description: string iconClass: string actionLabel: string } const WORKSPACE_STEPS: SetupStep[] = [ { title: "Create your workspace", description: "Name your workspace and pick a URL. This is where your team will collaborate on placements and compliance.", iconClass: "fa-rocket-launch", actionLabel: "Get started", }, { title: "Invite your team", description: "Add teammates by email so everyone can collaborate in real time across programs.", iconClass: "fa-users", actionLabel: "Send invites", }, { title: "Set up your first program", description: "Create a program to organize sites, rotations, and milestones in one place.", iconClass: "fa-folder-tree", actionLabel: "Create program", }, { title: "Connect your tools", description: "Link email, calendar, or LMS integrations to keep your workflow in sync.", iconClass: "fa-plug", actionLabel: "Browse integrations", }, ] const NUMBERED_STEPS = [ { id: "1.", title: "Confirm your program profile", description: "Set the program name, term dates, and default placement policies for your cohort.", }, { id: "2.", title: "Add sites and rotations", description: "Register clinical sites, capacity, and rotation templates so students can be matched.", }, { id: "3.", title: "Connect compliance rules", description: "Link requirements and document types so clearance status stays accurate.", }, { id: "4.", title: "Open the placement cycle", description: "Publish the cycle, invite supervisors, and start assigning students to sites.", }, ] as const const QUICK_START_STEPS = [ { title: "Program defaults", subtitle: "Policies & term", iconClass: "fa-sliders", description: "Set placement policies, term dates, and notification preferences for your program.", buttonText: "Edit settings", }, { title: "Sites & capacity", subtitle: "Clinical partners", iconClass: "fa-hospital", description: "Add sites, supervisors, and rotation capacity so students can be placed accurately.", buttonText: "Manage sites", }, { title: "Compliance templates", subtitle: "Requirements", iconClass: "fa-table", description: "Map document types and clearance rules so student status stays audit-ready.", buttonText: "Open templates", }, { title: "Go live", subtitle: "Launch cycle", iconClass: "fa-chart-line", description: "Open the cycle, monitor fill rate, and export placement reports for leadership.", buttonText: "View dashboard", }, ] as const function CircularProgress({ completedCount, total }: { completedCount: number; total: number }) { const progress = total > 0 ? (completedCount / total) * 100 : 0 const strokeDashoffset = 100 - progress return ( ) } function ChecklistVariant() { const [steps, setSteps] = React.useState(() => [...CHECKLIST_STEPS]) const [openStepId, setOpenStepId] = React.useState(() => { const firstIncomplete = CHECKLIST_STEPS.find((step) => !step.completed) return firstIncomplete?.id ?? CHECKLIST_STEPS[0]?.id ?? null }) const [dismissed, setDismissed] = React.useState(false) const completedCount = steps.filter((step) => step.completed).length if (dismissed) { return (

Checklist dismissed

) } return (

Get started with Exxat

{completedCount} {" / "} {steps.length} completed