@exxatdesignux/ui 0.2.18 → 0.2.19

package/template/lib/mock/list-hub-kpi.ts

@@ -0,0 +1,27 @@
+import type { MetricInsight, MetricItem } from "@/components/key-metrics"
+import type { ListHubRecord } from "@/lib/mock/list-hub-directory"
+
+export function listHubKpiMetrics(countOrRows: number | ListHubRecord[]): MetricItem[] {
+  const count = typeof countOrRows === "number" ? countOrRows : countOrRows.length
+  const scheduled = Math.max(0, count - 2)
+  const thisWeek = Math.min(count, 4)
+  return [
+    {
+      id: "total",
+      label: "Total records",
+      value: count,
+      delta: "+2",
+      trend: "up",
+      href: "#",
+      metricVariant: "hero",
+    },
+    { id: "scheduled", label: "Scheduled", value: scheduled, delta: "+1", trend: "up", href: "#" },
+    { id: "this-week", label: "This week", value: thisWeek, delta: "—", trend: "neutral", href: "#" },
+    { id: "completed", label: "Completed", value: 2, delta: "—", trend: "neutral", href: "#" },
+  ]
+}
+
+export const LIST_HUB_KPI_INSIGHT: MetricInsight = {
+  title: "3 events land this week",
+  description: "Filtered calendar and table views share the same row set after search and filters.",
+}

package/template/lib/mock/navigation.tsx

@@ -138,6 +138,7 @@ export const NAV_PRIMARY: NavLinkItem[] = [
     icon:       <i className="fa-light fa-table" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-table" aria-hidden="true" />,
     badge: 24,
+    secondaryPanel: "list-hub",
   },
 ]
 

package/template/lib/page-loading-variant.ts

@@ -0,0 +1,40 @@
+/**
+ * Maps app routes to loading skeleton layouts — keep in sync with page templates
+ * (`PrimaryPageTemplate`, `FocusedWorkflowPageTemplate`, dedicated search, hub landing).
+ */
+
+export type PageLoadingVariant =
+  | "dashboard"
+  | "primary-list-hub"
+  | "question-bank-hub"
+  | "dedicated-search"
+  | "focused-workflow"
+  | "focused-workflow-sidebar"
+  | "simple"
+
+function normalizePathname(pathname: string): string {
+  if (!pathname || pathname === "/") return "/"
+  return pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
+}
+
+/** Pick the loading skeleton for the destination route (client-safe). */
+export function resolvePageLoadingVariant(pathname: string): PageLoadingVariant {
+  const path = normalizePathname(pathname)
+
+  if (path === "/dashboard") return "dashboard"
+  if (path === "/settings") return "focused-workflow-sidebar"
+  if (path === "/help" || path === "/examples" || path.startsWith("/examples/")) {
+    return path === "/examples/focused-workflow" ? "focused-workflow-sidebar" : "simple"
+  }
+  if (path === "/question-bank/new" || path.startsWith("/question-bank/new/")) {
+    return "focused-workflow"
+  }
+  if (path === "/question-bank/find" || path === "/question-bank/list") {
+    return "dedicated-search"
+  }
+  if (path === "/question-bank") return "question-bank-hub"
+  if (path.startsWith("/question-bank/")) return "primary-list-hub"
+  if (path === "/data-list") return "primary-list-hub"
+
+  return "primary-list-hub"
+}

package/template/lib/question-bank-supported-views.ts

@@ -0,0 +1,13 @@
+import type { DataListViewType } from "@/lib/data-list-view"
+
+/** Views implemented in `QuestionBankTable` — keep in sync with `ListPageConnectedViewBody` renderers. */
+export const QUESTION_BANK_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+  "calendar",
+  "folder",
+  "panel",
+  "tree-panel",
+] as const satisfies readonly DataListViewType[]

package/template/lib/table-state-lifecycle.ts

@@ -26,7 +26,7 @@ import type { RowHeight } from "@/lib/row-height"
 import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
 import type { ActiveFilter, ConditionalRule, SortRule } from "@/components/table-properties/types"
 import type { ViewTab } from "@/components/templates/list-page"
-import type { DataListViewType } from "@/lib/data-list-view"
+import { DATA_LIST_VIEW_TILES, type DataListViewType } from "@/lib/data-list-view"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Storage key + debounce config
@@ -139,7 +139,7 @@ export interface TableStatePersistSlice {
 // Parsers + validators
 // ─────────────────────────────────────────────────────────────────────────────
 
-const VIEW_TYPES: DataListViewType[] = ["table", "list", "board", "dashboard"]
+const VIEW_TYPES: DataListViewType[] = DATA_LIST_VIEW_TILES.map(t => t.value)
 
 function isViewType(v: unknown): v is DataListViewType {
   return typeof v === "string" && (VIEW_TYPES as string[]).includes(v)

package/template/app/(app)/data-list/[id]/page.tsx

@@ -1,44 +0,0 @@
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { Button } from "@/components/ui/button"
-import { getPlacementById } from "@/lib/mock/placements"
-
-export default async function RecordDetailPage({
-  params,
-}: {
-  params: Promise<{ id: string }>
-}) {
-  const { id } = await params
-  const row = getPlacementById(Number(id))
-  if (!row) notFound()
-
-  return (
-    <PrimaryPageTemplate
-      siteHeader={{
-        title: "Record",
-        breadcrumbs: [{ label: "List hub", href: "/data-list" }],
-      }}
-      maxWidthClassName="max-w-2xl"
-      contentClassName="px-4 lg:px-6 py-6"
-      bodyClassName="overflow-y-auto"
-    >
-      <p className="text-sm text-muted-foreground mb-6">
-        Demo read-only detail — replace with your domain route and data fetch.
-      </p>
-      <dl className="grid gap-3 text-sm sm:grid-cols-[minmax(0,10rem)_1fr]">
-        <dt className="text-muted-foreground">Primary label</dt>
-        <dd className="font-medium text-foreground">{row.student}</dd>
-        <dt className="text-muted-foreground">Status</dt>
-        <dd>{row.status}</dd>
-        <dt className="text-muted-foreground">Site</dt>
-        <dd>{row.site}</dd>
-        <dt className="text-muted-foreground">Program</dt>
-        <dd>{row.program}</dd>
-      </dl>
-      <Button asChild variant="outline" className="mt-8">
-        <Link href="/data-list">Back to list</Link>
-      </Button>
-    </PrimaryPageTemplate>
-  )
-}

package/template/app/(app)/data-list/new/page.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link"
-import { NewPlacementForm } from "@/components/new-placement-form"
-import { SidebarAutoCollapse } from "@/components/sidebar-auto-collapse"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-
-export default function NewRecordPage() {
-  return (
-    <PrimaryPageTemplate
-      beforeSiteHeader={<SidebarAutoCollapse />}
-      bodyClassName="overflow-y-auto"
-      maxWidthClassName="max-w-3xl"
-      contentClassName="px-8 pt-10 pb-32"
-    >
-      <Link
-        href="/data-list"
-        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors mb-5 group"
-        aria-label="Back to list hub"
-      >
-        <i className="fa-light fa-arrow-left text-xs transition-transform group-hover:-translate-x-0.5" aria-hidden="true" />
-        Back
-      </Link>
-      <h1
-        className="text-[2.25rem] font-semibold tracking-tight leading-none text-foreground mb-2"
-        style={{ fontFamily: "var(--font-heading)" }}
-      >
-        New record
-      </h1>
-      <p className="text-sm text-muted-foreground mb-8">
-        Multi-step wizard shell (demo fields) — swap the form for your product flow.
-      </p>
-      <NewPlacementForm />
-    </PrimaryPageTemplate>
-  )
-}

package/template/components/compliance-board-view.tsx

@@ -1,142 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
-import {
-  COMPLIANCE_STATUS_BADGE_CLASS,
-  COMPLIANCE_STATUS_ICON,
-  COMPLIANCE_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import type { ComplianceItem } from "@/lib/mock/compliance"
-import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import {
-  ListPageBoardCard,
-  ListPageBoardCardAvatar,
-  ListPageBoardCardBadgeRow,
-  ListPageBoardCardBody,
-  ListPageBoardCardHeader,
-  ListPageBoardCardTitleRow,
-} from "@/components/data-views/list-page-board-card"
-import {
-  ListPageBoardTemplate,
-  type ListPageBoardColumnDef,
-} from "@/components/data-views/list-page-board-template"
-
-const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
-
-const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<ComplianceItem>[] = [
-  {
-    id: "compliant",
-    label: "Compliant",
-    description: "On track",
-    filter: r => r.status === "compliant",
-  },
-  {
-    id: "due_soon",
-    label: "Due soon",
-    description: "Within window",
-    filter: r => r.status === "due_soon",
-  },
-  {
-    id: "overdue",
-    label: "Overdue",
-    description: "Action required",
-    filter: r => r.status === "overdue",
-  },
-  {
-    id: "pending",
-    label: "Pending",
-    description: "Not started",
-    filter: r => r.status === "pending",
-  },
-]
-
-function categoryBoardColumns(rows: ComplianceItem[]): {
-  columns: ListPageBoardColumnDef<ComplianceItem>[]
-  badgeMap: Record<string, string>
-} {
-  const labels = [...new Set(rows.map(r => r.category))].sort((a, b) => a.localeCompare(b))
-  const columns: ListPageBoardColumnDef<ComplianceItem>[] = labels.map(label => ({
-    id: `category:${label}`,
-    label,
-    filter: (r: ComplianceItem) => r.category === label,
-  }))
-  const badgeMap = Object.fromEntries(labels.map(l => [`category:${l}`, NEUTRAL_COUNT_BADGE]))
-  return { columns, badgeMap }
-}
-
-function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: string) {
-  return React.useMemo(() => {
-    if (groupByColumnKey === "category") {
-      const { columns, badgeMap } = categoryBoardColumns(rows)
-      return { columns, badgeMap }
-    }
-    return {
-      columns: STATUS_BOARD_COLUMNS,
-      badgeMap: COMPLIANCE_STATUS_BADGE_CLASS as Record<string, string>,
-    }
-  }, [rows, groupByColumnKey])
-}
-
-function ComplianceBoardCard({
-  row,
-  onRowActivate,
-}: {
-  row: ComplianceItem
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const ownerInitials = initialsFromDisplayName(row.owner)
-  return (
-    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(row) : undefined}>
-      <ListPageBoardCardHeader>
-        <ListPageBoardCardTitleRow
-          title={row.title}
-          titleClassName="line-clamp-2"
-          trailing={<ListPageBoardCardAvatar initials={ownerInitials} />}
-        />
-        <ListPageBoardCardBadgeRow>
-          <ListHubStatusBadge
-            surface="board"
-            label={COMPLIANCE_STATUS_LABEL[row.status]}
-            tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-            icon={COMPLIANCE_STATUS_ICON[row.status]}
-          />
-        </ListPageBoardCardBadgeRow>
-        <ListPageBoardCardBody>
-          <BoardCardTwoLineBlock iconClass="fa-tag" line1={row.category} line2={`Due ${row.dueDate}`} />
-          <BoardCardTwoLineBlock iconClass="fa-user" line1={row.owner} line2="Owner" />
-        </ListPageBoardCardBody>
-      </ListPageBoardCardHeader>
-    </ListPageBoardCard>
-  )
-}
-
-export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
-  { key: "status", label: "Status" },
-  { key: "category", label: "Category" },
-] as const
-
-export function ComplianceBoardView({
-  rows,
-  groupByColumnKey,
-  onRowActivate,
-}: {
-  rows: ComplianceItem[]
-  groupByColumnKey: string
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const key = groupByColumnKey === "category" ? "category" : "status"
-  const { columns, badgeMap } = useComplianceBoardModel(rows, key)
-
-  return (
-    <ListPageBoardTemplate
-      columns={columns}
-      rows={rows}
-      getRowKey={r => r.id}
-      columnCountBadgeClassName={badgeMap}
-      emptyColumnLabel="No items"
-      renderCard={row => <ComplianceBoardCard row={row} onRowActivate={onRowActivate} />}
-    />
-  )
-}

package/template/components/compliance-client.tsx

@@ -1,92 +0,0 @@
-"use client"
-
-/**
- * Compliance list page — `ListPageTemplate` + `ComplianceTable`; view types from `@/components/data-views`.
- */
-
-import * as React from "react"
-import {
-  ListPageTemplate,
-  type ViewTab,
-  dataListViewIcon,
-  type DataListViewType,
-} from "@/components/data-views"
-import { CompliancePageHeader } from "@/components/compliance-page-header"
-import { ComplianceTable, type ComplianceTableHandle } from "@/components/compliance-table"
-import { KeyMetrics } from "@/components/key-metrics"
-import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
-import { COMPLIANCE_ITEMS } from "@/lib/mock/compliance"
-import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
-
-const DEFAULT_TABS: ViewTab[] = [
-  {
-    id: "obligations",
-    label: "Obligations",
-    viewType: "table",
-    icon: "fa-table",
-    filterId: "all",
-  },
-]
-
-export function ComplianceClient() {
-  const [exportOpen, setExportOpen] = React.useState(false)
-  const [showMetrics, setShowMetrics] = React.useState(true)
-  const tableRef = React.useRef<ComplianceTableHandle>(null)
-  const count = COMPLIANCE_ITEMS.length
-
-  const metrics = React.useMemo(() => complianceKpiMetrics(COMPLIANCE_ITEMS), [])
-  const insight = React.useMemo(() => complianceKpiInsight(COMPLIANCE_ITEMS), [])
-
-  useAskLeoPageContext(
-    React.useMemo(
-      () => ({
-        title: "Compliance",
-        description: `${count} obligations tracked on this hub.`,
-        suggestions: [
-          "What’s due this week?",
-          "Summarize open items by student",
-        ],
-      }),
-      [count],
-    ),
-  )
-
-  return (
-    <ListPageTemplate
-      defaultTabs={DEFAULT_TABS}
-      getTabCount={() => count}
-      tablePropertiesRef={tableRef}
-      header={
-        <CompliancePageHeader
-          itemCount={count}
-          onAddReview={() => {}}
-          onExport={() => setExportOpen(true)}
-          showMetrics={showMetrics}
-          onToggleMetrics={() => setShowMetrics(v => !v)}
-        />
-      }
-      metrics={
-        <KeyMetrics
-          variant="flat"
-          metrics={metrics}
-          insight={insight}
-          showHeader={false}
-          metricsSingleRow
-        />
-      }
-      showMetrics={showMetrics}
-      exportOpen={exportOpen}
-      onExportOpenChange={setExportOpen}
-      exportTotalRows={count}
-      renderContent={(tab, updateTab) => (
-        <ComplianceTable
-          key={tab.id}
-          ref={tableRef}
-          items={COMPLIANCE_ITEMS}
-          view={tab.viewType}
-          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-        />
-      )}
-    />
-  )
-}

package/template/components/compliance-list-view.tsx

@@ -1,54 +0,0 @@
-"use client"
-
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
-import {
-  COMPLIANCE_STATUS_BADGE_CLASS,
-  COMPLIANCE_STATUS_ICON,
-  COMPLIANCE_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import type { ComplianceItem } from "@/lib/mock/compliance"
-
-export function ComplianceListView({
-  rows,
-  onRowActivate,
-}: {
-  rows: ComplianceItem[]
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  return (
-    <DataRowList<ComplianceItem>
-      rows={rows}
-      getRowId={row => row.id}
-      emptyState="No compliance items match your filters."
-      ariaLabel="Compliance items"
-      renderRow={row => (
-        <ListPageBoardCard
-          layout="row"
-          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-          onClick={onRowActivate ? () => onRowActivate(row) : undefined}
-          rowEnd={
-            <div className="flex shrink-0 items-center gap-2">
-              <ListHubStatusBadge
-                surface="board"
-                label={COMPLIANCE_STATUS_LABEL[row.status]}
-                tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-                icon={COMPLIANCE_STATUS_ICON[row.status]}
-              />
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-            </div>
-          }
-        >
-          <div className="space-y-0.5">
-            <p className="text-sm font-semibold text-foreground">{row.title}</p>
-            <p className="text-xs text-muted-foreground">
-              {row.category} · Due {row.dueDate}
-            </p>
-            <p className="text-xs text-muted-foreground">Owner: {row.owner}</p>
-          </div>
-        </ListPageBoardCard>
-      )}
-    />
-  )
-}

package/template/components/compliance-page-header.tsx

@@ -1,89 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/ui/button"
-import { PageHeader } from "@/components/page-header"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-
-export interface CompliancePageHeaderProps {
-  itemCount: number
-  onAddReview: () => void
-  onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
-  showTitleBlock?: boolean
-}
-
-export function CompliancePageHeader({
-  itemCount,
-  onAddReview,
-  onExport,
-  showMetrics,
-  onToggleMetrics,
-  showTitleBlock = true,
-}: CompliancePageHeaderProps) {
-  const [moreOpen, setMoreOpen] = React.useState(false)
-  const countLine = `${itemCount} ${itemCount === 1 ? "item" : "items"} · Last updated now`
-
-  return (
-    <PageHeader
-      title="Compliance"
-      subtitle={countLine}
-      showTitleBlock={showTitleBlock}
-      actions={(
-        <div className="flex items-center gap-2" role="group" aria-label="Compliance actions">
-          <Tip side="bottom" label="Schedule a review (demo)">
-            <Button type="button" size="lg" onClick={onAddReview}>
-              <i className="fa-light fa-calendar-check" aria-hidden="true" />
-              New review
-            </Button>
-          </Tip>
-          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-            <Tip side="bottom" label="More actions">
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  size="lg"
-                  variant="outline"
-                  className="aspect-square px-0"
-                  aria-label="More actions"
-                >
-                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
-                </Button>
-              </DropdownMenuTrigger>
-            </Tip>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onExport(), 0)
-                }}
-              >
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onToggleMetrics(), 0)
-                }}
-              >
-                <i
-                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
-                  aria-hidden="true"
-                />
-                {showMetrics ? "Hide metric section" : "Show metric section"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
-    />
-  )
-}