@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/lib/floating-sheet-panel.ts

@@ -0,0 +1,72 @@
+/**
+ * Inset + sizing for “floating” product sheets (Export, table properties):
+ * `Sheet` + `showOverlay={false}` — no dimming layer; panel is inset with rounded corners.
+ */
+
+import type { CSSProperties } from "react"
+import { cn } from "@/lib/utils"
+
+export type FloatingSheetSide = "top" | "right" | "bottom" | "left"
+
+const baseClassName =
+  "flex flex-col border border-border bg-background shadow-xl rounded-xl overflow-hidden p-0 gap-0"
+
+/**
+ * Props to spread onto `SheetContent` together with `showOverlay={false}` and `showCloseButton={false}`.
+ */
+export function getFloatingSheetInsetProps(side: FloatingSheetSide): {
+  side: FloatingSheetSide
+  className: string
+  style: CSSProperties
+} {
+  switch (side) {
+    case "right":
+      return {
+        side: "right",
+        className: cn(baseClassName, "w-80 sm:max-w-80"),
+        style: {
+          top: "0.5rem",
+          bottom: "0.5rem",
+          right: "0.5rem",
+          left: "auto",
+          height: "calc(100vh - 1rem)",
+        },
+      }
+    case "left":
+      return {
+        side: "left",
+        className: cn(baseClassName, "w-80 sm:max-w-80"),
+        style: {
+          top: "0.5rem",
+          bottom: "0.5rem",
+          left: "0.5rem",
+          right: "auto",
+          height: "calc(100vh - 1rem)",
+        },
+      }
+    case "bottom":
+      return {
+        side: "bottom",
+        className: cn(baseClassName, "max-h-[min(80vh,32rem)]"),
+        style: {
+          left: "0.5rem",
+          right: "0.5rem",
+          bottom: "0.5rem",
+          top: "auto",
+          height: "auto",
+        },
+      }
+    case "top":
+      return {
+        side: "top",
+        className: cn(baseClassName, "max-h-[min(80vh,32rem)]"),
+        style: {
+          left: "0.5rem",
+          right: "0.5rem",
+          top: "0.5rem",
+          bottom: "auto",
+          height: "auto",
+        },
+      }
+  }
+}

package/template/lib/initials-from-name.ts

@@ -0,0 +1,7 @@
+/** Two-letter initials for avatar chips when only a display name is available (e.g. compliance owner). */
+export function initialsFromDisplayName(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return "?"
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0]! + parts[parts.length - 1]![0]!).toUpperCase()
+}

package/template/lib/list-page-table-properties.ts

@@ -0,0 +1,52 @@
+/**
+ * Connects ListPageTemplate “View → Edit” to a surface that hosts TablePropertiesDrawer
+ * (DataListTable, TeamTable, ComplianceTable, …). Import from `@/components/table-properties`
+ * or use here — see `createListPageEditViewHandler`.
+ *
+ * View **labels** for tabs and Properties are centralized in `@/lib/data-list-view`
+ * (`DATA_LIST_VIEW_TILES`, `dataListViewLabel`, `dataListViewIcon`).
+ */
+
+import * as React from "react"
+
+import { dataListViewIcon, type DataListViewType } from "@/lib/data-list-view"
+
+/** Minimal ref API any list/table surface exposes for the shared Properties drawer. */
+export interface OpenTablePropertiesHandle {
+  openPropertiesDrawer: () => void
+}
+
+const SURFACE_VIEW_TYPES = new Set<DataListViewType>(["table", "list", "board", "dashboard"])
+
+/** True when `viewType` is one of the data-list surfaces that support TablePropertiesDrawer. */
+export function isDataListSurfaceViewType(viewType: string): viewType is DataListViewType {
+  return SURFACE_VIEW_TYPES.has(viewType as DataListViewType)
+}
+
+export interface CreateListPageEditViewHandlerOptions {
+  /** Delay before opening Properties after switching to table (ms). Default 160. */
+  switchDelayMs?: number
+}
+
+/**
+ * Returns `ListPageTemplate`’s `onEditView` handler: optionally coerces the tab to `table`
+ * when the view type is unknown, then calls `ref.current.openPropertiesDrawer()`.
+ */
+export function createListPageEditViewHandler(
+  tableRef: React.RefObject<OpenTablePropertiesHandle | null>,
+  options?: CreateListPageEditViewHandlerOptions
+) {
+  const delay = options?.switchDelayMs ?? 160
+  return (
+    tab: { viewType: string },
+    { updateTab }: { updateTab: (patch: { viewType?: DataListViewType; icon?: string }) => void }
+  ) => {
+    const mustSwitchToTableSurface = !isDataListSurfaceViewType(tab.viewType)
+    if (mustSwitchToTableSurface) {
+      updateTab({ viewType: "table", icon: dataListViewIcon("table") })
+    }
+    window.setTimeout(() => {
+      tableRef.current?.openPropertiesDrawer()
+    }, mustSwitchToTableSurface ? delay : 0)
+  }
+}

package/template/lib/list-status-badges.ts

@@ -0,0 +1,168 @@
+/**
+ * Shared status chip labels, tint classes, and FA icon names for product list hubs
+ * (Placements, Team, Compliance, Question bank — table, list, board), plus related chips
+ * (dashboard **task priority**, placement **readiness** on the detail drawer).
+ *
+ * Labels use **sentence / title case** (e.g. "Due soon", "Under Review"). Do **not** add **`uppercase`**.
+ *
+ * **Rendering:** Use **`ListHubStatusBadge`** from `@/components/list-hub-status-badge`, or
+ * **`StatusBadge`** from **`components/data-list-table-cells.tsx`** for placement rows (wrapper
+ * around **`ListHubStatusBadge`** + **`PLACEMENT_STATUS_*`** below). Task priority → **`TaskPriorityBadge`**.
+ *
+ * **Semantic tints:** Map domain statuses onto **`LIST_HUB_STATUS_TINT_*`** before inventing new colors.
+ * **Icon-on-tinted-disc** (insights / activity): **`TintedIconDisc`** + **`--icon-disc-*`** in **`app/globals.css`**.
+ */
+
+import type { ComplianceStatus } from "@/lib/mock/compliance"
+import type { QuestionBankStatus } from "@/lib/mock/question-bank"
+import type { Status as PlacementStatus } from "@/lib/mock/placements"
+import type { TeamMember } from "@/lib/mock/team"
+
+// ─── Semantic variants (reuse for new entities) ─────────────────────────────
+//
+// **Light washes** (same visual weight as before) + **darker ink** via `--chip-*` for WCAG 1.4.3.
+// Backgrounds stay subtle; contrast is carried by label + icon color, not heavier fills.
+
+export const LIST_HUB_STATUS_TINT_SUCCESS =
+  "bg-emerald-500/15 text-[var(--chip-2)] border-emerald-500/20 dark:bg-emerald-500/15 dark:text-emerald-200"
+
+export const LIST_HUB_STATUS_TINT_WARNING =
+  "bg-amber-500/15 text-[var(--chip-4)] border-amber-500/20 dark:bg-amber-500/15 dark:text-amber-100"
+
+export const LIST_HUB_STATUS_TINT_NEUTRAL =
+  "bg-slate-500/10 text-[var(--chip-3)] border-border dark:bg-slate-500/10 dark:text-slate-300"
+
+export const LIST_HUB_STATUS_TINT_DANGER =
+  "bg-destructive/15 text-[var(--chip-destructive)] border-destructive/20 dark:bg-destructive/15 dark:text-red-200"
+
+/** In-progress / review (distinct from warning where both appear — e.g. Placements “Under review”). */
+export const LIST_HUB_STATUS_TINT_INFO =
+  "bg-sky-500/15 text-[var(--chip-1)] border-sky-500/20 dark:bg-sky-500/15 dark:text-sky-100"
+
+// ─── Placement detail — readiness row (string labels from mock) ─────────────
+
+const PLACEMENT_READINESS_BADGE_CLASS: Record<string, string> = {
+  Ready: LIST_HUB_STATUS_TINT_SUCCESS,
+  "At risk": LIST_HUB_STATUS_TINT_DANGER,
+  Blocked: LIST_HUB_STATUS_TINT_DANGER,
+  "In review": LIST_HUB_STATUS_TINT_INFO,
+}
+
+/** Badge `className` tail for placement readiness labels; unknown → neutral. */
+export function placementReadinessBadgeClass(readiness: string): string {
+  return PLACEMENT_READINESS_BADGE_CLASS[readiness] ?? LIST_HUB_STATUS_TINT_NEUTRAL
+}
+
+// ─── Dashboard task priority (shared chip system) ──────────────────────────
+
+export type TaskPriorityLevel = "high" | "medium" | "low"
+
+export const TASK_PRIORITY_LABEL: Record<TaskPriorityLevel, string> = {
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+}
+
+export const TASK_PRIORITY_BADGE_CLASS: Record<TaskPriorityLevel, string> = {
+  high: LIST_HUB_STATUS_TINT_DANGER,
+  medium: LIST_HUB_STATUS_TINT_WARNING,
+  low: LIST_HUB_STATUS_TINT_NEUTRAL,
+}
+
+export function normalizeTaskPriority(priority: string): TaskPriorityLevel | null {
+  const k = priority.toLowerCase()
+  if (k === "high" || k === "medium" || k === "low") return k
+  return null
+}
+
+// ─── Placements (lifecycle status) ───────────────────────────────────────
+
+export const PLACEMENT_STATUS_LABEL: Record<PlacementStatus, string> = {
+  confirmed: "Confirmed",
+  pending: "Pending",
+  "under-review": "Under Review",
+  rejected: "Rejected",
+  completed: "Completed",
+}
+
+export const PLACEMENT_STATUS_BADGE_CLASS: Record<PlacementStatus, string> = {
+  confirmed: LIST_HUB_STATUS_TINT_SUCCESS,
+  pending: LIST_HUB_STATUS_TINT_WARNING,
+  "under-review": LIST_HUB_STATUS_TINT_INFO,
+  rejected: LIST_HUB_STATUS_TINT_DANGER,
+  completed: LIST_HUB_STATUS_TINT_NEUTRAL,
+}
+
+export const PLACEMENT_STATUS_ICON: Record<PlacementStatus, string> = {
+  confirmed: "fa-circle-check",
+  pending: "fa-hourglass-half",
+  "under-review": "fa-eye",
+  rejected: "fa-circle-xmark",
+  completed: "fa-clipboard-check",
+}
+
+// ─── Team ─────────────────────────────────────────────────────────────────
+
+export type TeamMemberStatus = TeamMember["status"]
+
+export const TEAM_MEMBER_STATUS_LABEL: Record<TeamMemberStatus, string> = {
+  active: "Active",
+  away: "Away",
+  invited: "Invited",
+}
+
+export const TEAM_MEMBER_STATUS_BADGE_CLASS: Record<TeamMemberStatus, string> = {
+  active: LIST_HUB_STATUS_TINT_SUCCESS,
+  away: LIST_HUB_STATUS_TINT_WARNING,
+  invited: LIST_HUB_STATUS_TINT_NEUTRAL,
+}
+
+/** Font Awesome icon per status — shape + label, not colour alone (WCAG 1.4.1). */
+export const TEAM_MEMBER_STATUS_ICON: Record<TeamMemberStatus, string> = {
+  active: "fa-circle-check",
+  away: "fa-moon",
+  invited: "fa-envelope",
+}
+
+// ─── Compliance ───────────────────────────────────────────────────────────
+
+export const COMPLIANCE_STATUS_LABEL: Record<ComplianceStatus, string> = {
+  compliant: "Compliant",
+  due_soon: "Due soon",
+  overdue: "Overdue",
+  pending: "Pending",
+}
+
+export const COMPLIANCE_STATUS_BADGE_CLASS: Record<ComplianceStatus, string> = {
+  compliant: LIST_HUB_STATUS_TINT_SUCCESS,
+  due_soon: LIST_HUB_STATUS_TINT_WARNING,
+  overdue: LIST_HUB_STATUS_TINT_DANGER,
+  pending: LIST_HUB_STATUS_TINT_NEUTRAL,
+}
+
+export const COMPLIANCE_STATUS_ICON: Record<ComplianceStatus, string> = {
+  compliant: "fa-shield-check",
+  due_soon: "fa-clock",
+  overdue: "fa-triangle-exclamation",
+  pending: "fa-hourglass-half",
+}
+
+// ─── Question bank ────────────────────────────────────────────────────────
+
+export const QUESTION_BANK_STATUS_LABEL: Record<QuestionBankStatus, string> = {
+  published: "Published",
+  draft: "Draft",
+  in_review: "In review",
+}
+
+export const QUESTION_BANK_STATUS_BADGE_CLASS: Record<QuestionBankStatus, string> = {
+  published: LIST_HUB_STATUS_TINT_SUCCESS,
+  draft: LIST_HUB_STATUS_TINT_NEUTRAL,
+  in_review: LIST_HUB_STATUS_TINT_WARNING,
+}
+
+export const QUESTION_BANK_STATUS_ICON: Record<QuestionBankStatus, string> = {
+  published: "fa-circle-check",
+  draft: "fa-pen-field",
+  in_review: "fa-user-magnifying-glass",
+}

package/template/lib/logo-dev.ts

@@ -0,0 +1,12 @@
+/**
+ * logo.dev brand images — publishable key is safe in the browser (like the
+ * example: `https://img.logo.dev/stripe.com?token=pk_…`).
+ * Override locally with `NEXT_PUBLIC_LOGO_DEV_TOKEN` if needed.
+ */
+export const LOGO_DEV_PUBLISHABLE_KEY =
+  process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN ?? "pk_JltPpX0KR4WONn4HFjq3Aw"
+
+export function logoDevUrl(domain: string): string {
+  const q = new URLSearchParams({ token: LOGO_DEV_PUBLISHABLE_KEY })
+  return `https://img.logo.dev/${domain}?${q.toString()}`
+}

package/template/lib/mock/compliance-kpi.ts

@@ -0,0 +1,61 @@
+import type { MetricInsight, MetricItem } from "@/components/key-metrics"
+import type { ComplianceItem } from "@/lib/mock/compliance"
+
+export function complianceKpiMetrics(rows: ComplianceItem[]): MetricItem[] {
+  const compliant = rows.filter(r => r.status === "compliant").length
+  const dueSoon = rows.filter(r => r.status === "due_soon").length
+  const overdue = rows.filter(r => r.status === "overdue").length
+  const pending = rows.filter(r => r.status === "pending").length
+
+  return [
+    {
+      id: "total",
+      label: "Total items",
+      value: rows.length,
+      delta: "—",
+      trend: "neutral",
+      href: "#",
+      metricVariant: "hero",
+    },
+    {
+      id: "compliant",
+      label: "Compliant",
+      value: compliant,
+      delta: "—",
+      trend: "neutral",
+      href: "#",
+    },
+    {
+      id: "attention",
+      label: "Due soon",
+      value: dueSoon,
+      delta: dueSoon > 0 ? "!" : "—",
+      trend: dueSoon > 0 ? "up" : "neutral",
+      href: "#",
+    },
+    {
+      id: "risk",
+      label: "Overdue / pending",
+      value: overdue + pending,
+      delta: "—",
+      trend: overdue + pending > 0 ? "up" : "neutral",
+      href: "#",
+    },
+  ]
+}
+
+export function complianceKpiInsight(rows: ComplianceItem[]): MetricInsight {
+  const overdue = rows.filter(r => r.status === "overdue").length
+  const dueSoon = rows.filter(r => r.status === "due_soon").length
+  return {
+    title: "Compliance queue",
+    description:
+      overdue > 0
+        ? `${overdue} item(s) overdue. ${dueSoon} due within 30 days.`
+        : dueSoon > 0
+          ? `${dueSoon} item(s) due soon — review owners and dates.`
+          : "No overdue items in this view.",
+    severity: overdue > 0 ? "warning" : dueSoon > 0 ? "warning" : "info",
+    actionLabel: "Ask Leo",
+  }
+}

package/template/lib/mock/compliance.ts

@@ -0,0 +1,146 @@
+/**
+ * Mock compliance obligations — replace with API data in production.
+ */
+
+export type ComplianceStatus = "compliant" | "due_soon" | "overdue" | "pending"
+
+export interface ComplianceItem extends Record<string, unknown> {
+  id: string
+  title: string
+  category: string
+  status: ComplianceStatus
+  /** MM/DD/YYYY */
+  dueDate: string
+  owner: string
+  /** MM/DD/YYYY */
+  lastReviewed: string
+}
+
+export const COMPLIANCE_ITEMS: ComplianceItem[] = [
+  {
+    id: "1",
+    title: "Annual HIPAA training attestation",
+    category: "HIPAA",
+    status: "compliant",
+    dueDate: "12/31/2026",
+    owner: "Alex Rivera",
+    lastReviewed: "03/01/2026",
+  },
+  {
+    id: "2",
+    title: "OSHA bloodborne pathogen review",
+    category: "OSHA",
+    status: "due_soon",
+    dueDate: "04/10/2026",
+    owner: "Jordan Chen",
+    lastReviewed: "10/15/2025",
+  },
+  {
+    id: "3",
+    title: "Clinical site affiliation agreements",
+    category: "Clinical",
+    status: "pending",
+    dueDate: "05/01/2026",
+    owner: "Sam Patel",
+    lastReviewed: "—",
+  },
+  {
+    id: "4",
+    title: "FERPA student records policy",
+    category: "Privacy",
+    status: "compliant",
+    dueDate: "09/30/2026",
+    owner: "Taylor Brooks",
+    lastReviewed: "02/20/2026",
+  },
+  {
+    id: "5",
+    title: "Background check re-verification",
+    category: "Clinical",
+    status: "overdue",
+    dueDate: "03/01/2026",
+    owner: "Jordan Chen",
+    lastReviewed: "03/01/2025",
+  },
+  {
+    id: "6",
+    title: "Accreditation self-study draft",
+    category: "Accreditation",
+    status: "due_soon",
+    dueDate: "04/22/2026",
+    owner: "Alex Rivera",
+    lastReviewed: "01/10/2026",
+  },
+  {
+    id: "7",
+    title: "Incident response tabletop exercise",
+    category: "HIPAA",
+    status: "pending",
+    dueDate: "06/15/2026",
+    owner: "Sam Patel",
+    lastReviewed: "—",
+  },
+  {
+    id: "8",
+    title: "Emergency preparedness plan",
+    category: "OSHA",
+    status: "compliant",
+    dueDate: "11/01/2026",
+    owner: "Taylor Brooks",
+    lastReviewed: "02/28/2026",
+  },
+  {
+    id: "9",
+    title: "Medication safety competency checklist",
+    category: "Clinical",
+    status: "compliant",
+    dueDate: "08/01/2026",
+    owner: "Alex Rivera",
+    lastReviewed: "03/15/2026",
+  },
+  {
+    id: "10",
+    title: "Data breach notification procedure",
+    category: "Privacy",
+    status: "due_soon",
+    dueDate: "04/05/2026",
+    owner: "Jordan Chen",
+    lastReviewed: "10/01/2025",
+  },
+  {
+    id: "11",
+    title: "LCME / programmatic review evidence",
+    category: "Accreditation",
+    status: "pending",
+    dueDate: "07/30/2026",
+    owner: "Sam Patel",
+    lastReviewed: "—",
+  },
+  {
+    id: "12",
+    title: "Sharps injury log audit",
+    category: "OSHA",
+    status: "overdue",
+    dueDate: "02/20/2026",
+    owner: "Taylor Brooks",
+    lastReviewed: "02/20/2025",
+  },
+  {
+    id: "13",
+    title: "Business associate agreement inventory",
+    category: "HIPAA",
+    status: "compliant",
+    dueDate: "10/15/2026",
+    owner: "Alex Rivera",
+    lastReviewed: "03/01/2026",
+  },
+  {
+    id: "14",
+    title: "Student immunization tracking",
+    category: "Clinical",
+    status: "due_soon",
+    dueDate: "04/18/2026",
+    owner: "Jordan Chen",
+    lastReviewed: "09/01/2025",
+  },
+]

package/template/lib/mock/dashboard.ts

@@ -0,0 +1,105 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Mock data — Dashboard
+// ─────────────────────────────────────────────────────────────────────────────
+
+import type { MetricItem, MetricInsight } from "@/components/key-metrics"
+
+export const DASHBOARD_METRICS: MetricItem[] = [
+  { id: "pending-requests",     label: "Pending requests",     value: "23",  delta: "+5",  trend: "up",   href: "/data-list#pending"     },
+  { id: "confirmed-placements", label: "Confirmed placements", value: "89",  delta: "+12", trend: "up",   href: "/data-list#confirmed"   },
+  { id: "pending-reviews",      label: "Pending Reviews",      value: "8",   delta: "-3",  trend: "down", href: "/data-list#reviews"     },
+  { id: "available-slots",      label: "Available Slots",      value: "156", delta: "+24", trend: "up",   href: "/data-list#slots"       },
+  { id: "new-applications",     label: "New Applications",     value: "34",  delta: "+7",  trend: "up",   href: "/data-list#applications"},
+  { id: "compliance-rate",      label: "Compliance Rate",      value: "98%", delta: "+2",  trend: "up",   href: "/data-list#compliance"  },
+]
+
+export const DASHBOARD_INSIGHT: MetricInsight = {
+  title:       "Review Bottleneck",
+  description: "8 reviews pending with 23 new requests waiting. Clear reviews to maintain placement velocity.",
+  href:        "/reviews",
+  severity:    "warning",
+  actionLabel: "Ask Leo",
+}
+
+/** Integer scores as whole numbers; decimals to one place. */
+export function formatBandScore(n: number) {
+  return Number.isInteger(n) ? String(n) : n.toFixed(1)
+}
+
+/** Clamp a score to the published min–max scale. */
+export function clampScoreToBand(score: number, scaleMin: number, scaleMax: number) {
+  return Math.min(scaleMax, Math.max(scaleMin, score))
+}
+
+/**
+ * Map a score to 0–100 along the band for bar/radial geometry (Recharts domain).
+ * When score is outside the band it is clamped for display.
+ */
+export function scoreToTrackPercent(score: number, scaleMin: number, scaleMax: number): number {
+  if (scaleMax <= scaleMin) return 0
+  const s = clampScoreToBand(score, scaleMin, scaleMax)
+  return Math.min(100, Math.max(0, ((s - scaleMin) / (scaleMax - scaleMin)) * 100))
+}
+
+/** One assessment row: student score vs class average on a fixed min–max scale. */
+export interface StudentScoreMetric {
+  id: string
+  label: string
+  scaleMin: number
+  scaleMax: number
+  classAverage: number
+  studentScore: number
+  /** ChartCard description; defaults to suite `description` */
+  description?: string
+  /** Pill on the dashed marker (default "Class avg") */
+  averageMarkerLabel?: string
+}
+
+export interface StudentScoreRadial {
+  title: string
+  /** Shown under the large center score */
+  caption: string
+  scaleMin: number
+  scaleMax: number
+  classAverage: number
+  studentScore: number
+}
+
+export interface DashboardStudentScoresData {
+  title: string
+  description?: string
+  metrics: StudentScoreMetric[]
+  radial: StudentScoreRadial
+}
+
+/** Example: student 75 on scale 50–80, class average 60 (same band). */
+export const DASHBOARD_STUDENT_SCORES: DashboardStudentScoresData = {
+  title: "Student scores",
+  description: "Your score vs class average on the published scale (reference).",
+  metrics: [
+    {
+      id: "midterm",
+      label: "Midterm exam",
+      scaleMin: 50,
+      scaleMax: 80,
+      classAverage: 60,
+      studentScore: 75,
+    },
+    {
+      id: "practical",
+      label: "Clinical practical",
+      scaleMin: 50,
+      scaleMax: 80,
+      classAverage: 62,
+      studentScore: 71,
+    },
+  ],
+  radial: {
+    title: "Term snapshot",
+    caption: "Midterm focus",
+    scaleMin: 50,
+    scaleMax: 80,
+    classAverage: 60,
+    studentScore: 75,
+  },
+}