@exxatdesignux/ui 0.0.6 → 0.0.8

package/template/components/dashboard-tabs.tsx

@@ -0,0 +1,598 @@
+"use client"
+
+/**
+ * DashboardTabs — three-view dashboard switcher
+ *
+ *  Report  — full KPI + charts view (current dashboard)
+ *  Simple  — Promo · Greeting · Onboarding gallery · Tasks · Insights · Recent · Learn
+ *  Mix     — compact metrics + key chart + tasks & activity side-by-side
+ */
+
+import * as React from "react"
+import { Card, CardContent, CardHeader, CardDescription } from "@/components/ui/card"
+import { TintedIconDisc, type TintedIconDiscTone } from "@/components/tinted-icon-disc"
+import { Separator } from "@/components/ui/separator"
+import { KeyMetrics, type MetricItem, type MetricInsight } from "@/components/key-metrics"
+import type { ChartCardVariant } from "@/components/charts-overview"
+import { DashboardReportCharts } from "@/components/dashboard-report-charts"
+import { GettingStarted, GettingStartedProgressCard } from "@/components/getting-started"
+import { TaskListPanel, type TaskListItem } from "@/components/task-list-panel"
+import { PageHeader } from "@/components/page-header"
+import { useDashboardView }  from "@/contexts/dashboard-view-context"
+import { useChartVariant }   from "@/contexts/chart-variant-context"
+import { useAskLeo, useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { cn } from "@/lib/utils"
+import {
+  DashboardSectionTitle,
+  dashboardSectionDescriptionClassName,
+} from "@/components/dashboard-section-heading"
+import { DashboardPromoBanner } from "@/components/dashboard-promo-banner"
+import { CoachMark } from "@/components/ui/coach-mark"
+import { useCoachMark } from "@/hooks/use-coach-mark"
+
+/* ── Types passed from the page ─────────────────────────────────────────── */
+interface DashboardTabsProps {
+  metrics: MetricItem[]
+  insight: MetricInsight
+  title?: string
+  subtitle?: string
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   SIMPLE TAB — widgets
+   ════════════════════════════════════════════════════════════════════════════ */
+
+/* ── Greeting ─────────────────────────────────────────────────────────────── */
+function GreetingWidget({ compact = false }: { compact?: boolean }) {
+  const [now, setNow] = React.useState<Date | null>(null)
+  React.useEffect(() => {
+    setNow(new Date())
+  }, [])
+
+  const hour = now?.getHours() ?? 9
+  const greeting =
+    hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening"
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          {!compact ? (
+            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider" suppressHydrationWarning>
+              {now?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }) ?? ""}
+            </p>
+          ) : null}
+          {compact ? (
+            <p
+              className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
+              style={{ fontFamily: "var(--font-heading)" }}
+            >
+              {greeting}, Himanshu 👋
+            </p>
+          ) : (
+            <h2
+              className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
+              style={{ fontFamily: "var(--font-heading)" }}
+            >
+              {greeting}, Himanshu 👋
+            </h2>
+          )}
+          {!compact ? (
+            <p className="mt-1 text-sm text-muted-foreground max-w-sm">
+              You have <span className="font-medium text-foreground">8 reviews</span> pending and{" "}
+              <span className="font-medium text-foreground">23 requests</span> waiting today.
+            </p>
+          ) : null}
+        </div>
+        <TintedIconDisc icon="fa-sun-bright" tone="brand" size="lg" />
+      </div>
+    </div>
+  )
+}
+
+/* ── Tasks ────────────────────────────────────────────────────────────────── */
+const TASK_ITEMS: TaskListItem[] = [
+  { id: 1, label: "Review pending evaluations",   due: "Today",     priority: "high",   done: false },
+  { id: 2, label: "Approve site contract — City Med", due: "Today",  priority: "high",   done: false },
+  { id: 3, label: "Send onboarding docs to PT cohort", due: "Tomorrow", priority: "medium", done: false },
+  { id: 4, label: "Update compliance checklist",  due: "Mar 25",    priority: "medium", done: false },
+  { id: 5, label: "Schedule supervisor training", due: "Mar 28",    priority: "low",    done: true  },
+]
+
+/* ── Insights ─────────────────────────────────────────────────────────────── */
+const INSIGHTS: {
+  id: number
+  icon: string
+  tone: TintedIconDiscTone
+  title: string
+  body: string
+}[] = [
+  {
+    id: 1,
+    icon: "fa-arrow-trend-up",
+    tone: "chart-2",
+    title: "Placement rate up 12%",
+    body:  "Nursing placements increased compared to last quarter. Site capacity utilisation at 94%.",
+  },
+  {
+    id: 2,
+    icon: "fa-triangle-exclamation",
+    tone: "chart-4",
+    title: "Review backlog growing",
+    body:  "8 evaluations have been pending for more than 48 hrs. Clear them to unblock new requests.",
+  },
+  {
+    id: 3,
+    icon: "fa-certificate",
+    tone: "brand",
+    title: "Compliance milestone",
+    body:  "Nursing program reached 98% compliance — highest in 12 months.",
+  },
+]
+
+function InsightsWidget({ plain = false }: { plain?: boolean }) {
+  /* Glow applied — AI surface (rule 1). See GLOW GUIDELINE in key-metrics.tsx */
+  const glowStyle = {
+    background:
+      "radial-gradient(ellipse 120% 80% at 50% 100%, oklch(from var(--brand-color) l c h / 0.14) 0%, transparent 65%)",
+  } as const
+
+  const items = INSIGHTS.map((ins, idx) => (
+    <React.Fragment key={ins.id}>
+      <div className="flex gap-3 items-start py-2">
+        <TintedIconDisc
+          className="mt-0.5"
+          icon={ins.icon}
+          tone={ins.tone}
+          size="md"
+        />
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-semibold text-foreground leading-snug">{ins.title}</p>
+          <p className="text-xs text-muted-foreground mt-0.5 leading-snug">{ins.body}</p>
+        </div>
+      </div>
+      {plain && idx < INSIGHTS.length - 1 ? (
+        <Separator className="opacity-50" aria-hidden="true" />
+      ) : null}
+    </React.Fragment>
+  ))
+
+  if (plain) {
+    return (
+      <section aria-labelledby="dashboard-insights-heading" className="flex flex-col gap-3">
+        <div className="flex flex-col gap-0.5">
+          <DashboardSectionTitle as="h1" id="dashboard-insights-heading">
+            Insights
+          </DashboardSectionTitle>
+          <p className={cn(dashboardSectionDescriptionClassName, "mt-0.5")}>
+            AI-generated · Updated now
+          </p>
+        </div>
+        <div className="flex flex-col">{items}</div>
+      </section>
+    )
+  }
+
+  return (
+    <Card size="sm" className="overflow-hidden" style={glowStyle}>
+      <CardHeader>
+        <DashboardSectionTitle as="h2">Insights</DashboardSectionTitle>
+        <CardDescription>AI-generated · Updated now</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {INSIGHTS.map((ins) => (
+          <div key={ins.id} className="flex gap-3 items-start">
+            <TintedIconDisc
+              className="mt-0.5"
+              icon={ins.icon}
+              tone={ins.tone}
+              size="md"
+            />
+            <div className="flex-1 min-w-0">
+              <p className="text-xs font-semibold text-foreground leading-snug">{ins.title}</p>
+              <p className="text-xs text-muted-foreground mt-0.5 leading-snug">{ins.body}</p>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+/* ── Recent Activity ──────────────────────────────────────────────────────── */
+const ACTIVITY: {
+  id: number
+  icon: string
+  tone: TintedIconDiscTone
+  actor: string
+  action: string
+  subject: string
+  time: string
+}[] = [
+  { id: 1, icon: "fa-user-check",     tone: "chart-2",     actor: "Dr. Patel",     action: "approved",    subject: "City Med placement",      time: "2m ago"  },
+  { id: 2, icon: "fa-file-signature", tone: "brand",       actor: "Sarah Kim",     action: "submitted",   subject: "OT evaluation form",       time: "18m ago" },
+  { id: 3, icon: "fa-circle-xmark",   tone: "destructive", actor: "North Clinic",  action: "rejected",    subject: "2 pending requests",       time: "1h ago"  },
+  { id: 4, icon: "fa-envelope-open",  tone: "chart-4",     actor: "System",        action: "sent reminder", subject: "to 5 supervisors",       time: "3h ago"  },
+  { id: 5, icon: "fa-arrow-up-right", tone: "brand",       actor: "You",           action: "exported",    subject: "Q1 compliance report",     time: "5h ago"  },
+  { id: 6, icon: "fa-user-plus",      tone: "chart-2",     actor: "Admissions",    action: "added",       subject: "14 new nursing students",  time: "Yesterday"},
+]
+
+function RecentActivityWidget({ plain = false }: { plain?: boolean }) {
+  const rows = ACTIVITY.map((ev, idx) => (
+    <React.Fragment key={ev.id}>
+      <div className="flex items-start gap-3 py-2">
+        <TintedIconDisc
+          className="mt-0.5"
+          icon={ev.icon}
+          tone={ev.tone}
+          size="sm"
+        />
+        <div className="flex-1 min-w-0">
+          <p className="text-xs leading-snug text-foreground">
+            <span className="font-medium">{ev.actor}</span>{" "}
+            <span className="text-muted-foreground">{ev.action}</span>{" "}
+            <span className="font-medium">{ev.subject}</span>
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">{ev.time}</p>
+        </div>
+      </div>
+      {idx < ACTIVITY.length - 1 && (
+        <Separator className="opacity-50" aria-hidden="true" />
+      )}
+    </React.Fragment>
+  ))
+
+  if (plain) {
+    return (
+      <section aria-labelledby="dashboard-activity-heading" className="flex flex-col gap-3">
+        <DashboardSectionTitle as="h1" id="dashboard-activity-heading">
+          Recent Activity
+        </DashboardSectionTitle>
+        <div className="flex flex-col overflow-auto">{rows}</div>
+      </section>
+    )
+  }
+
+  return (
+    <Card size="sm">
+      <CardHeader>
+        <DashboardSectionTitle as="h2">Recent Activity</DashboardSectionTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col overflow-auto">{rows}</CardContent>
+    </Card>
+  )
+}
+
+/* ── Learn / Guide ────────────────────────────────────────────────────────── */
+const STEPS = [
+  { id: 1, label: "Create your organisation profile",  done: true  },
+  { id: 2, label: "Add your first placement site",     done: true  },
+  { id: 3, label: "Import student roster",             done: true  },
+  { id: 4, label: "Configure compliance requirements", done: false },
+  { id: 5, label: "Invite supervisors",                done: false },
+  { id: 6, label: "Launch first placement cycle",      done: false },
+]
+
+const GUIDE_ARTICLES = [
+  {
+    id: "workflow",
+    icon: "fa-sitemap",
+    title: "How does a placement actually work?",
+    meta: "5m read",
+    gradientClass: "bg-gradient-to-br from-chart-3 to-chart-1",
+  },
+  {
+    id: "site",
+    icon: "fa-circle-play",
+    title: "Watch: Setting up your first clinical site",
+    meta: "3m watch",
+    gradientClass: "bg-gradient-to-br from-chart-1 to-chart-5",
+  },
+  {
+    id: "compliance",
+    icon: "fa-shield-check",
+    title: "Make compliance less of a headache",
+    meta: "8m read",
+    gradientClass: "bg-gradient-to-br from-chart-2 to-chart-4",
+  },
+  {
+    id: "reports",
+    icon: "fa-file-chart-column",
+    title: "Turn your data into a report in 2 minutes",
+    meta: "4m read",
+    gradientClass: "bg-gradient-to-br from-chart-4 to-chart-5",
+  },
+  {
+    id: "support",
+    icon: "fa-headset",
+    title: "Stuck? Our team is one message away",
+    meta: "Get help",
+    gradientClass: "bg-gradient-to-br from-chart-3 to-muted",
+  },
+]
+
+function LearnSection({ layout = "scroll", plain = false }: { layout?: "scroll" | "stack"; plain?: boolean }) {
+  const done     = STEPS.filter((s) => s.done).length
+  const total    = STEPS.length
+  const pct      = Math.round((done / total) * 100)
+  const nextStep = STEPS.find((s) => !s.done)
+  const stacked  = layout === "stack"
+  const tileClass = cn(
+    "flex flex-col rounded-lg overflow-hidden border border-border bg-card hover:bg-interactive-hover-soft transition-colors focus-visible:outline-2 focus-visible:outline-ring",
+    stacked ? "w-full" : "shrink-0 w-[13rem]",
+  )
+
+  const tiles = (
+    <>
+      <a
+        href="#"
+        className={tileClass}
+        aria-label={`Continue setup — ${done} of ${total} steps done`}
+      >
+        <div
+          className="h-[6.5rem] relative flex items-center justify-center overflow-hidden bg-gradient-to-br from-chart-1 to-chart-3"
+        >
+          <i className="fa-light fa-rocket-launch text-[3rem] text-background/25" aria-hidden="true" />
+          <div className="absolute inset-x-0 bottom-0 px-3 pb-2.5">
+            <div className="h-[3px] rounded-full overflow-hidden bg-background/20">
+              <div
+                className="h-full rounded-full bg-background/80"
+                style={{ width: `${pct}%`, transition: "width 0.5s ease" }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col gap-1 p-3">
+          <p className="text-sm font-medium leading-snug text-foreground">
+            Pick up where you left off
+          </p>
+          {nextStep && (
+            <p className="text-xs text-muted-foreground leading-snug">Next: {nextStep.label}</p>
+          )}
+          <div className="mt-auto pt-1.5">
+            <span className="inline-block text-xs font-medium px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
+              {done}/{total} steps
+            </span>
+          </div>
+        </div>
+      </a>
+
+      {GUIDE_ARTICLES.map((g) => (
+        <a
+          key={g.id}
+          href="#"
+          className={tileClass}
+          aria-label={g.title}
+        >
+          <div
+            className={cn("h-[6.5rem] flex items-center justify-center overflow-hidden", g.gradientClass)}
+          >
+            <i className={`fa-light ${g.icon} text-[3rem] text-background/25`} aria-hidden="true" />
+          </div>
+          <div className="flex flex-1 flex-col gap-1 p-3">
+            <h3 className="text-sm font-medium leading-snug text-foreground">{g.title}</h3>
+            <div className="flex items-center gap-1.5 mt-auto pt-1.5 text-muted-foreground">
+              <i className="fa-light fa-book-open text-xs" aria-hidden="true" />
+              <span className="text-xs">{g.meta}</span>
+            </div>
+          </div>
+        </a>
+      ))}
+    </>
+  )
+
+  const rail = (
+    <div
+      className={cn("flex gap-3", stacked ? "flex-col" : "overflow-x-auto")}
+      style={stacked ? undefined : { scrollbarWidth: "none" }}
+    >
+      {tiles}
+    </div>
+  )
+
+  if (plain) {
+    return (
+      <section aria-labelledby="dashboard-learn-heading" className="flex flex-col gap-3">
+        <div className="flex flex-col gap-0.5">
+          <DashboardSectionTitle as="h1" id="dashboard-learn-heading">
+            Learn
+          </DashboardSectionTitle>
+          <p className={cn(dashboardSectionDescriptionClassName, "mt-0.5")}>
+            Guides, videos &amp; resources
+          </p>
+        </div>
+        {rail}
+      </section>
+    )
+  }
+
+  return (
+    <Card size="sm" className="overflow-hidden">
+      <CardHeader>
+        <DashboardSectionTitle as="h2">Learn</DashboardSectionTitle>
+        <CardDescription>Guides, videos &amp; resources</CardDescription>
+      </CardHeader>
+      <CardContent>{rail}</CardContent>
+    </Card>
+  )
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   TAB VIEWS
+   ════════════════════════════════════════════════════════════════════════════ */
+
+function ReportView({ metrics, insight, chartVariant }: DashboardTabsProps & { chartVariant: ChartCardVariant }) {
+  return (
+    <DashboardReportCharts
+      metrics={metrics}
+      insight={insight}
+      chartVariant={chartVariant}
+    />
+  )
+}
+
+function SimpleView() {
+  return (
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-10 px-4 py-2 pb-8 sm:gap-11 sm:px-6 sm:pb-9 lg:gap-12 lg:px-8 lg:pb-10">
+      <DashboardPromoBanner />
+      <GreetingWidget compact />
+      <GettingStarted inset={false} titleAs="h1" />
+      <TaskListPanel
+        title="Tasks"
+        headingId="dashboard-tasks-heading"
+        headingLevel="h1"
+        plain
+        defaultTasks={TASK_ITEMS}
+      />
+      <InsightsWidget plain />
+      <RecentActivityWidget plain />
+      <LearnSection layout="scroll" plain />
+    </div>
+  )
+}
+
+function MixView({ metrics, insight }: DashboardTabsProps) {
+  return (
+    <div className="flex flex-col gap-4 pb-6">
+      <div className="px-4 lg:px-6">
+        <DashboardPromoBanner />
+      </div>
+      {/* Key metrics flat band */}
+      <KeyMetrics variant="flat" metrics={metrics} insight={insight} />
+
+      <div className="px-4 lg:px-6 flex flex-col gap-4">
+        {/* Row: Greeting + Onboarding */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 items-stretch">
+          <div className="lg:col-span-2">
+            <GreetingWidget />
+          </div>
+          <GettingStartedProgressCard steps={STEPS} title="Guided onboarding" />
+        </div>
+
+        {/* Row: Tasks + Recent Activity */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 items-stretch">
+          <TaskListPanel title="Tasks" defaultTasks={TASK_ITEMS} />
+          <RecentActivityWidget />
+        </div>
+
+        {/* Row: Insights */}
+        <InsightsWidget />
+
+        <GettingStarted />
+
+        {/* Learn panel — full width */}
+        <LearnSection />
+      </div>
+    </div>
+  )
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+   COACH MARK FLOW — dashboard onboarding tour
+   ════════════════════════════════════════════════════════════════════════════ */
+
+const DASHBOARD_TOUR_STEPS = [
+  {
+    id: "tour-welcome",
+    target: "h1",
+    side: "bottom" as const,
+    align: "start" as const,
+    title: "Welcome to your Dashboard",
+    description:
+      "This is your command centre. See key metrics, charts, tasks and AI insights — all in one place.",
+    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=640&h=320&fit=crop&q=80",
+    imageAlt: "Dashboard analytics overview",
+  },
+  {
+    id: "tour-metrics",
+    target: "[aria-label='Key Metrics']",
+    side: "bottom" as const,
+    align: "start" as const,
+    title: "Key Metrics at a Glance",
+    description:
+      "Track pending requests, confirmed placements, compliance rate and more. Trends show how numbers changed since last period.",
+  },
+  {
+    id: "tour-insights",
+    target: "[aria-label='Insight']",
+    side: "left" as const,
+    align: "start" as const,
+    title: "AI-Powered Insights",
+    description:
+      "Leo analyses your data and surfaces actionable insights automatically — no need to dig through reports.",
+  },
+  {
+    id: "tour-askleo",
+    target: "[aria-label='Ask Leo']",
+    side: "bottom" as const,
+    align: "end" as const,
+    title: "Ask Leo Anything",
+    description:
+      "Click here or press ⌘⌥K to open Leo, your AI assistant. Ask questions about your data, get recommendations, or automate tasks.",
+  },
+]
+
+/* ════════════════════════════════════════════════════════════════════════════
+   Main export
+   ════════════════════════════════════════════════════════════════════════════ */
+
+export function DashboardTabs({
+  metrics,
+  insight: insightProp,
+  title = "Dashboard",
+  subtitle,
+}: DashboardTabsProps) {
+  const { chartVariant } = useChartVariant()
+  const { activeView }   = useDashboardView()
+  const { openWithPrompt } = useAskLeo()
+
+  const insight = React.useMemo<MetricInsight>(() => {
+    if (insightProp.onAction) return insightProp
+    return {
+      ...insightProp,
+      onAction: () =>
+        openWithPrompt(
+          insightProp.description ?? insightProp.statement ?? insightProp.title,
+        ),
+    }
+  }, [insightProp, openWithPrompt])
+
+  const tour = useCoachMark({
+    flowId: "dashboard-tour",
+    steps: DASHBOARD_TOUR_STEPS,
+    delay: 800,
+  })
+
+  const viewLabel =
+    activeView === "report" ? "Report" : activeView === "simple" ? "Simple" : "Mix"
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "Dashboard",
+        description: `${viewLabel} layout · ${metrics.length} KPI tiles on the strip.`,
+        suggestions: [
+          "What changed in my key metrics this week?",
+          "Summarize the insight card for my stand-up",
+          "Which metric should I watch for placement risk?",
+        ],
+      }),
+      [viewLabel, metrics.length],
+    ),
+  )
+
+  return (
+    <div className="flex flex-col">
+      {/* Coach mark tour — targets elements by CSS selector, no wrapping needed */}
+      <CoachMark state={tour} />
+
+      {/* Simple view: greeting IS the page header — no separate PageHeader */}
+      {activeView !== "simple" && (
+        <PageHeader title={title} subtitle={subtitle} className="pt-4 md:pt-6" />
+      )}
+      {activeView === "report" && <ReportView metrics={metrics} insight={insight} chartVariant={chartVariant} />}
+      {activeView === "simple" && <SimpleView />}
+      {activeView === "mix"    && <MixView metrics={metrics} insight={insight} />}
+    </div>
+  )
+}