@exxatdesignux/ui 0.2.6 → 0.2.8

package/template/.cursor/rules/exxat-accessibility.mdc

@@ -0,0 +1,33 @@
+---
+description: Exxat DS — WCAG 2.1 AA, ARIA tablists, 24px targets, contrast; see AGENTS.md §8
+alwaysApply: true
+---
+
+# Exxat DS — accessibility (binding summary)
+
+**Full checklist:** monorepo **`.cursor/skills/exxat-accessibility/SKILL.md`** when the parent repo is open.
+
+**Product rules:** **`./AGENTS.md` §8**.
+
+## Non‑negotiables
+
+1. **Target:** **WCAG 2.1 Level AA** (2.2 where noted — e.g. target size).
+2. **`role="tablist"`** — only **`role="tab"`** as tab semantics. **MUST NOT** put `role="button"`, menus (`aria-haspopup`), or other controls **inside** the same **`tablist`** container.
+3. **Composite view switchers** (tabs + per-tab menu + remove): **`role="toolbar"`** + **`aria-label`**; **`aria-pressed`** on toggles — **MUST NOT** misuse `tab`/`tablist`.
+4. **Touch targets (2.5.8):** **≥ 24×24 CSS px** or **24px** spacing — **`min-h-6 min-w-6` / `size-6`** for icon-only; avoid **`size-4`** as sole target.
+5. **Contrast:** normal text **≥ 4.5:1**; UI / focus **≥ 3:1** where required; muted on tinted surfaces use correct surface tokens.
+6. **Minimum text size:** visible product copy **≥ 11px** — **`text-xs`** or larger (**`AGENTS.md` §8.3**, **`app/globals.css`** `--text-xs`).
+7. **Dialogs / sheets / drawers:** must have a **Title** (`DialogTitle` / `SheetTitle` / `DrawerTitle`); **`sr-only`** if hidden.
+8. **Format hints persistent, not placeholders (SC 3.3.2, 1.3.1).** Fields with required formats — **date, time, phone, currency, GPA, IDs, URLs, unit-bearing numbers** — MUST render the format via **`FormDescription`** (or equivalent `aria-describedby` helper text). Placeholders disappear on focus and **MUST NOT** be the sole carrier. Prefer picker primitives (e.g. `DatePickerField`) over free-text where available.
+9. **Every icon that communicates information MUST have a text alternative** — not just icon-only buttons. Three cases (SC 1.1.1, 3.3.2, 2.4.6):
+
+   - **A. Decorative icon next to text that already names it** (`<i class="fa-light fa-calendar-days" aria-hidden /> 12/14/2025`) → icon is `aria-hidden`, no `aria-label`, no tooltip. The text is the alt.
+   - **B. Informational icon standing alone** (calendar = "date range", clock = "updated at", pin = "site", cap = "student", trend arrow, status dot, icon-only chart legend) → MUST pair **`role="img"` + `aria-label`** with a visible **`Tooltip`**. Wrapper MUST be keyboard-focusable (`tabIndex={0}`) so the tooltip opens on focus too.
+   - **C. Interactive icon-only button/link** (close `×`, chevron, overflow `⋯`, sort, filter-dismiss, copy, Ask Leo toggle, row actions) → MUST pair **`aria-label`** on the `<button>` with a wrapping **`Tooltip`**. `aria-label` alone is not enough — sighted users rely on the tooltip too.
+
+   In all cases the inner `<i>` / `<svg>` is `aria-hidden`; tooltip text matches the accessible name. Narrow exception: chevron inside a labelled composite (`Select`, `Combobox`). See **`AGENTS.md` §8.6 (Case A/B/C)**.
+10. **Keyboard shortcut hints inside buttons** MUST use **`<Kbd variant="bare">`** (no background/border, inherits `currentColor` at 70%). The default `tile` variant is for **tooltips** and **menu `shortcut=` slots** only. Glue multi-key chords into one bare kbd (e.g. `<Kbd variant="bare">⌘⌥K</Kbd>`). Reference: Next/Back in `new-placement-form.tsx`; see **`.cursor/rules/exxat-kbd-shortcuts.mdc`**.
+
+Re-run **axe** on **Placements** (or affected page) after changing **views toolbar** or **tabs**.
+
+**Charts:** Keyboard exploration uses **`ChartFigure`**; selected points use **`chart-keyboard-selection`** (ring/stroke parity with gallery) — see **`AGENTS.md` §4.3** and **`.cursor/rules/exxat-dashboard-view-charts.mdc`**.

package/template/.cursor/rules/exxat-command-menu.mdc

@@ -0,0 +1,23 @@
+---
+description: Exxat DS — global command palette (⌘K) as search + quick AI vs Ask Leo for long answers.
+alwaysApply: true
+---
+
+# Exxat DS — global command palette (`CommandMenu`)
+
+## Intent
+
+- **`CommandMenu`** (**⌘K** / **Ctrl+K**) is **global search** (routes, library, patterns, AI starters, optional row data such as placements / student names)—see **`AGENTS.md` §7.1** and **`docs/command-menu-pattern.md`**.
+- **Quick / lookup / short AI:** Prefer **results inside the palette** when the product can return compact answers or lightweight “research” without leaving the flow.
+- **Long or complex answers:** **Ask Leo** side panel (**⌘⌥K** / **Ctrl+Alt+K**)—not forced into the palette.
+
+## Implementation pointers
+
+- Shell: `components/command-menu.tsx`; config **`buildCommandMenuConfig()`** in **`lib/command-menu-config.ts`**; optional **`dataGroups`** from **`lib/command-menu-search-data.ts`** (e.g. **`getCommandMenuSearchDataGroups()`**), wired in **`app/(app)/layout.tsx`**. Keep domain mapping out of the shell.
+- Large indexes: set **`searchOnly: true`** on **`CommandMenuGroup`** so **`command-menu.tsx`** skips the group until the user types (avoids listing every row on open).
+- Sidebar **“Search or ask Leo”** opens the same palette.
+
+## See also
+
+- **`exxat-ds/AGENTS.md` §7.1**
+- **`.cursor/rules/exxat-kbd-shortcuts.mdc`** (⌘K vs ⌘⌥K)

package/template/.cursor/rules/exxat-dashboard-view-charts.mdc

@@ -0,0 +1,53 @@
+---
+description: Data view dashboard — centralized charts, storage, keyboard parity with gallery, edit layout, coach marks
+alwaysApply: true
+---
+
+# Exxat DS — Data view dashboard (list hubs)
+
+**Authoritative detail:** **`exxat-ds/AGENTS.md` §4.3** and **`exxat-dashboard-view-charts`** (this rule).
+
+## Two dashboard surfaces (do not fork chart engines)
+
+| Surface | Entry | Shared building blocks |
+|--------|--------|-------------------------|
+| **Full-page dashboard** | `app/(app)/dashboard/page.tsx` | `DashboardTabs`, `ChartsOverview` / gallery demos in `charts-overview.tsx` |
+| **Data tab** on Placements / Team / Compliance | `DataListTable`, `TeamTable`, `ComplianceTable` → `*DashboardChartsSection` | `ChartFigure`, `ChartCard`, `useChartVariant()`, `data-view-dashboard-charts*.tsx` |
+
+**MUST NOT** duplicate “another” chart system for Data view — extend **`charts-overview`** patterns and **`lib/chart-keyboard-selection`**.
+
+## MUST — accessibility & data
+
+1. **`ChartFigure`** + **`ChartDataTable`** (`sr-only`) for every chart on the Data dashboard — same as **`charts-overview.tsx`**.
+2. **`ChartCard`** wraps chart content; **`KeyMetrics`** **`variant="card"`** for the **`key-metrics`** tile; KPI count **1–4** persisted in layout.
+
+## MUST — keyboard selection (parity with `/dashboard` gallery)
+
+- Import **`CHART_KBD_ACTIVE_BAR`** and **`CHART_KBD_ACTIVE_PIE_SHAPE`** from **`@/lib/chart-keyboard-selection`**.
+- **Bar** series: **`activeBar={CHART_KBD_ACTIVE_BAR}`** + **`activeIndex={activeIndex ?? undefined}`** (and **`Cell`** only for per-bar **fill**, not opacity-only selection).
+- **Pie / donut:** **`activeShape={CHART_KBD_ACTIVE_PIE_SHAPE}`** + **`activeIndex`** + slice **`stroke`** / **`strokeWidth`** consistent with gallery donuts.
+- **MUST NOT** use **`fillOpacity` dimming alone** on **`Cell`** as the sole “selected” state for keyboard exploration.
+
+## MUST — customisation UX
+
+- **Edit layout** control: **`aria-label="Edit dashboard layout"`** (toolbar pen-ruler). Coach marks may target **`[aria-label='Edit dashboard layout']`**.
+- On-canvas: drag reorder, remove, width (half / full), chart type, add/remove cards, reset. **No** separate Sheet for layout.
+- While **`layoutEditMode`**: hide **`DataTableToolbar`** (search / filters / Properties row); **Done** / **Cancel** on canvas.
+
+## MUST — persistence (centralized)
+
+- **One bundle:** **`lib/data-view-dashboard-storage.ts`** — key **`exxat-ds:data-view-dashboards:v1`**, scopes **`placements` | `team` | `compliance`**.
+- Placements helpers: **`loadDashboardLayout`** / **`saveDashboardLayout`** in **`data-view-dashboard-charts.tsx`** (wrap storage API).
+- **MUST NOT** introduce parallel **`localStorage`** keys for the same **`DashboardLayout`** shape without updating the storage module.
+
+## SHOULD — coach marks
+
+- Register **customize dashboard** flows in **`lib/coach-mark-registry.ts`**; shared copy in **`lib/dashboard-customize-coach-mark.ts`**.
+- Use **`useCoachMark`** **`enabled`** / **`dependsOnDismissedFlowId`** when a tour only applies on **dashboard** view or after another flow (**`COACH_MARK_FLOW_COMPLETED_EVENT`**).
+
+## Reference files
+
+- `components/data-view-dashboard-charts.tsx` (Placements)
+- `components/data-view-dashboard-charts-team.tsx`, `data-view-dashboard-charts-compliance.tsx`
+- `components/data-list-table.tsx` — `DataListDashboardShell`
+- `lib/chart-keyboard-selection.ts`, `lib/data-view-dashboard-storage.ts`, `lib/dashboard-customize-coach-mark.ts`

package/template/.cursor/rules/exxat-data-tables.mdc

@@ -0,0 +1,31 @@
+---
+description: Exxat DS — product data tables must use DataTable with search, filters, and table properties; no alternate table stacks.
+alwaysApply: true
+---
+
+# Exxat DS — data tables (mandatory pattern)
+
+## Use one stack for product data lists
+
+For **any app screen that shows a browsable, filterable grid of records** (lists, directories, placements, etc.):
+
+1. **Base table:** `DataTable` from `@/components/data-table` (optionally wrapped with `DataTablePaginated` when pagination is required).
+2. **Search:** Wire the table’s search/query UX (toolbar search or equivalent) — do not ship a “bare” table without find-in-list behavior when the page is a data list.
+3. **Filters:** Use the shared filter model (filter chips / `FilterFieldDef` and operators) consistent with existing list pages — not one-off filter UIs that bypass the table stack.
+4. **Table properties:** Include **Table properties** via `TablePropertiesDrawer` from `@/components/table-properties/drawer` (or the same toolbar + drawer pattern used on reference pages such as placements / data list). Users must be able to adjust columns, density, and related table settings from one place.
+5. **Active view:** On **`ListPageTemplate`** pages with **table / list / board / dashboard** tabs, **`TablePropertiesDrawer`** **MUST** receive **`currentView`** and **`onViewChange`** (see **`./AGENTS.md` §4.2** and **`.cursor/rules/exxat-table-properties-drawer.mdc`**) so Properties matches the selected view (not table-only copy on Board).
+
+**Reference implementation:** `components/data-list-table.tsx` (placements) shows how `DataTable`, filters, and `TablePropertiesDrawer` compose together.
+
+## Do not
+
+- Do **not** build product list pages with `@/components/ui/table` alone, raw `<table>` markup, or third-party data grids.
+- Do **not** introduce a second “table component” pattern for the same product surfaces (splitting search/filters/properties across incompatible implementations).
+
+## Exceptions
+
+- **Tiny, read-only tables inside charts or analytics cards** (e.g. chart figure captions / summary matrices) may use minimal markup when they are not primary data-list experiences — still prefer tokens and accessibility, but the full DataTable stack is not required there.
+
+## See also
+
+- **`./AGENTS.md`** — full MUST/MUST NOT, list-page template, primary hubs, checklist.

package/template/.cursor/rules/exxat-ds-agents.mdc

@@ -0,0 +1,26 @@
+---
+description: Exxat DS — follow AGENTS.md; DataTable, ListPageTemplate, primary hubs, export, Kbd
+alwaysApply: true
+---
+
+# Exxat DS — AI handbook (binding)
+
+**Read `./AGENTS.md` at this repo root** before implementing or reviewing list/table/board or data-heavy pages (rule precedence, MUST/MUST NOT, §4.1–§4.3, **§6.4** page vs drawer, **§6.5** no toast, §7.1 command palette, §13 checklist).
+
+## Non‑negotiables (if anything conflicts, open AGENTS.md §12–§13)
+
+1. **Product data lists** → `DataTable` + search + shared filters + `TablePropertiesDrawer` — not raw `<table>` / ui `Table` alone / ad-hoc grids. With **`ListPageTemplate`** view tabs, pass **`currentView`** + **`onViewChange`** into **`TablePropertiesDrawer`** (**`AGENTS.md` §4.2**, **`.cursor/rules/exxat-table-properties-drawer.mdc`**).
+2. **Main `DataTable` surface** → wrapped in **`ListPageTemplate`** (view tabs). All tab view types share **`useTableState`**; list/board/dashboard read **`tableState.rows`**. Reference: `DataListClient`, `TeamClient`, `TeamTable`.
+3. **Do not double-indent** the toolbar/table — avoid extra `px`/`mx` wrappers around `DataTable` when it already applies horizontal inset.
+4. **Primary hub + large/complex data** → same composition as Placements/Team: `ListPageTemplate` + metrics/export pattern as in `DataListClient` / `TeamClient`, not `PageHeader`-only.
+5. **Exportable pages** → filled primary CTA; **⋯** menu with Export → `ExportDrawer` pattern (see `PlacementsPageHeader`).
+6. **Keyboard hints** → `.cursor/rules/exxat-kbd-shortcuts.mdc`; pair hints with behavior.
+7. **Accessibility** → `.cursor/rules/exxat-accessibility.mdc` + **`AGENTS.md` §8** + `.cursor/skills/exxat-accessibility/SKILL.md` when present in your workspace.
+8. **Data view dashboard (charts)** → **`AGENTS.md` §4.3** + **`exxat-dashboard-view-charts.mdc`** — `ChartFigure`, centralized **`data-view-dashboard-storage`**, **`chart-keyboard-selection`** parity with the `/dashboard` gallery.
+9. **No toast** → **`AGENTS.md` §6.5** + **`exxat-no-toast.mdc`** — do not use **`toast()`** / Sonner / snackbars for product messaging.
+
+## Also read
+
+- `docs/data-views-pattern.md` — architecture narrative (keep aligned with `AGENTS.md`); **Page vs drawer** with **`AGENTS.md` §6.4**.
+- `docs/command-menu-pattern.md` — global ⌘K palette (search + quick AI vs Ask Leo).
+- `.cursor/rules/exxat-data-tables.mdc`, `exxat-list-page-connected-views.mdc`, `exxat-table-properties-drawer.mdc`, **`exxat-page-vs-drawer.mdc`** (this folder; repo root copy when parent repo open), **`exxat-no-toast.mdc`**, **`exxat-dashboard-view-charts.mdc`** (this folder), **`exxat-command-menu.mdc`**, `exxat-kbd-shortcuts.mdc`, and `exxat-accessibility.mdc`.

package/template/.cursor/rules/exxat-kbd-shortcuts.mdc

@@ -0,0 +1,100 @@
+---
+description: Exxat DS — show Kbd hints on primary/secondary actions, search, Ask Leo; avoid browser-reserved chords.
+alwaysApply: true
+---
+
+# Exxat DS — keyboard shortcuts (`Kbd`)
+
+## When to show `Kbd`
+
+Use `@/components/ui/kbd` (`Kbd` + `KbdGroup`) anywhere users discover actions by hovering or reading tooltips:
+
+- **Primary actions** — main page CTAs (e.g. “New …”, “Save”, “Submit”).
+- **Secondary actions** — overflow menus, “More”, outline companions to a primary button.
+- **Global affordances** — **Search** (table toolbar), **Ask Leo**, **Toggle sidebar**.
+
+## Rules
+
+0. **`Kbd` variant MUST match its host surface** (this is the #1 recurring mistake):
+
+   | Where the `Kbd` renders | Required variant |
+   |-------------------------|------------------|
+   | Inside a `Button` (primary, secondary, wizard Next/Back/Submit, full-width CTAs in popovers) | **`variant="bare"`** — no bg/border, inherits `currentColor` @ 70 % |
+   | Inside a `TooltipContent` | **default `tile`** (no prop) |
+   | Inside a `DropdownMenuItem` via `shortcut=` | menu handles it — pass the chord string |
+   | Standalone helper text on a surface | **default `tile`** |
+
+   Glue multi-key chords into **one** bare kbd (`<Kbd variant="bare">⌘⌥K</Kbd>`), not one tile per key. See `new-placement-form.tsx` (Next = `{mod}⏎`, Back = `{mod}{alt}←`) and the primary "Ask Leo" button inside chart insight popovers.
+
+1. **Pair hint with behavior** — If `Kbd` shows a chord, implement the same shortcut. **Preferred:** the shared primitives from `@/components/ui/dropdown-menu`:
+
+    ```tsx
+    import { DropdownMenuItem, Shortcut } from "@/components/ui/dropdown-menu"
+
+    // Visual hint in a menu item:
+    <DropdownMenuItem shortcut="⌘⇧E" onSelect={onExport}>Export</DropdownMenuItem>
+
+    // Global binding — render in a parent that stays mounted (menu items unmount on close):
+    <Shortcut keys="⌘⇧E" onInvoke={onExport} />
+    ```
+
+    The hook skips input/textarea/contenteditable targets and any open dialog. Accepts symbols (`⌘⇧⌥⌃⌫⌦⏎↑↓`) and words (`Cmd+Shift+D`, `Alt+P`). Avoid ad-hoc `document.addEventListener("keydown", …)` + `isEditableTarget` — use `<Shortcut>` instead.
+2. **Modifier labels** — Use `useModKeyLabel()` (**⌘** / **Ctrl**) and `useAltKeyLabel()` (**⌥** / **Alt**) from `@/hooks/use-mod-key-label` for tooltips.
+3. **Avoid browser-reserved chords** — Do **not** use combinations that match common browser defaults, including:
+   - **⌘⇧N / Ctrl+Shift+N** — private/incognito window
+   - **⌘⇧T / Ctrl+Shift+T** — reopen closed tab
+   - **⌘⇧O / Ctrl+Shift+O** — bookmark manager (Chromium)
+   - **⌘⇧B / Ctrl+Shift+B** — bookmarks bar
+   - **⌘L / Ctrl+L** — focus address bar (avoid plain **L** with only mod unless scoped)
+   - **⌃⌥L / Ctrl+Alt+L** — screen lock on many Linux desktops (avoid for in-app actions)
+4. **Preferred pattern for app shortcuts** — Use **⌘⌥** / **Ctrl+Alt** + letter (e.g. **⌘⌥N** for “New”, **⌘⌥M** for “More”, **⌘⌥K** for Ask Leo). Table search stays **⌘K** / **Ctrl+K** **without** Alt so **⌘⌥K** does not collide.
+5. **Tooltips** — `Tip` supports `label` as `React.ReactNode` so you can compose text + `KbdGroup`.
+6. **Do not** decorate every control — skip dense tables, icon-only row actions that already have `aria-label`, and third-party widgets.
+
+## Reference shortcuts (app)
+
+| Action | Shortcut |
+|--------|----------|
+| Toggle main sidebar | ⌘/Ctrl + **B** (`components/ui/sidebar.tsx`) |
+| Table search | ⌘/Ctrl + **K** (no Alt — `DataTable`) |
+| Ask Leo | ⌘/Ctrl + **⌥/Alt** + **K** |
+| New placement (Placements header) | ⌘/Ctrl + **⌥/Alt** + **N** |
+| Placements overflow menu | ⌘/Ctrl + **⌥/Alt** + **M** |
+| Export | ⌘/Ctrl + **⇧/Shift** + **E** |
+| Hide/Show metric section | ⌘/Ctrl + **⌥/Alt** + **H** |
+| Rename (view, tab) | **F2** |
+| Duplicate | ⌘/Ctrl + **D** |
+| Review / Info | ⌘/Ctrl + **I** |
+| Remove / Delete | ⌘/Ctrl + **⌫** |
+| Add view (1..n) | ⌘/Ctrl + **⇧/Shift** + **1..9** |
+| **Submit a workflow** (Create, Save, Export, Apply) | **Enter** (⏎) — scoped to the form/drawer/dialog |
+| **Cancel / dismiss** a workflow | **Esc** (Radix handles for Dialog/Sheet) |
+| **Advance a multi-step wizard** | ⌘/Ctrl + **Enter** (plain Enter stays in the input) |
+| **Back** in a wizard | ⌘/Ctrl + **⌥/Alt** + **←** |
+
+## Every workflow primary/secondary action MUST carry shortcuts
+
+Every **workflow surface** (form, dialog, drawer, sheet, multi-step wizard final step) MUST bind:
+
+1. **Primary action (submit/commit)** — **Enter** (⏎). Render the `<Kbd>⏎</Kbd>` **inline inside the button** (after the label, inside a `<KbdGroup className="ml-1.5">`) — NOT inside a hover `Tip`. Primary/secondary workflow buttons must expose the shortcut at rest so it is discoverable without hovering. Pair with a `<Shortcut keys="Enter" onInvoke={...}>` mounted while the surface is open. The shared `useShortcut` hook skips events from inputs/textarea/contenteditable, so Enter inside a text field still types normally — it only fires when focus is on the surface chrome.
+2. **Secondary action (Cancel/Dismiss)** — **Esc**. Inline `<Kbd>Esc</Kbd>` inside the Cancel button (same `ml-1.5` pattern). Radix `Dialog` / `Sheet` / `AlertDialog` already bind Esc natively.
+
+> Tip-on-hover Kbd hints remain correct for **page-level** actions (e.g. "New placement", ⋯ overflow triggers) where the button is part of dense page chrome and a persistent Kbd would crowd the layout. Workflow buttons inside a form/drawer/dialog are spacious enough to render the Kbd inline.
+
+**Variant inside a button:** always use `<Kbd variant="bare">` — no background, no border, inherits `currentColor` at 70% opacity. The default tile variant looks like a pasted-on patch on filled primary buttons. Glue multi-key chords into one `<Kbd variant="bare">⌘⌥←</Kbd>` rather than one tile per key.
+3. **Multi-step wizards** — plain **Enter** must NOT submit on intermediate steps (it would auto-close the review/final step when users hit Enter inside an input). Either:
+   - Gate `form.onSubmit` on `step === lastStep` (`if (step !== N) { e.preventDefault(); return }`), **or**
+   - Remove `type="submit"` on intermediate Next buttons and bind **⌘Enter** to "Next" via `<Shortcut>`.
+   On the final step, plain **Enter** submits and the Kbd hint shows **⏎**.
+4. Examples in-app: `new-placement-form.tsx` (Create placement = Enter on step 5, Back = ⌘⌥←), `export-drawer.tsx` (Export = Enter, Cancel = Esc).
+
+## Every action menu MUST carry shortcuts
+
+All dropdown action menus (⋯ overflow, view-settings chevron, Add view, row actions) should declare a `shortcut=` on each `DropdownMenuItem` AND pair it with a `<Shortcut>` in a parent that stays mounted. This covers both discoverability (visual hint) and operability (global key binding).
+
+Adjust this table when adding new global shortcuts.
+
+## See also
+
+- **`exxat-ds/AGENTS.md`** §7 — keyboard rules in project context.
+- **`exxat-ds/AGENTS.md`** §7.1 — global command palette (⌘K) vs **Ask Leo** (**⌘⌥K**); **`exxat-ds/docs/command-menu-pattern.md`**.

package/template/.cursor/rules/exxat-list-page-connected-views.mdc

@@ -0,0 +1,16 @@
+---
+description: ListPageTemplate — shared table state across views, mock + KPI helpers, dashboard tab
+alwaysApply: true
+---
+
+# Exxat DS — list page connected views
+
+**Authoritative detail:** **`./AGENTS.md` §4.1** and **`docs/data-views-pattern.md`** (mock data, connected views, dashboard view).
+
+## When building `ListPageTemplate` + data client
+
+1. **One `useTableState` per tab’s table** — Pass full mock/API rows into a single table component; **`list` / `board` / `dashboard`** surfaces consume **`tableState.rows`** (same filters/search/sort as the grid).
+2. **`renderContent`** — Always pass **`view={tab.viewType}`**; use **`key={tab.id}`** (not `viewType`) so switching views does not reset table state. Pass **`onViewChange`** into the table component so **`TablePropertiesDrawer`** stays aligned (**`currentView`** + **`updateTab({ viewType, icon: dataListViewIcon(viewType) })`** — see **`./AGENTS.md` §4.2** and **`.cursor/rules/exxat-table-properties-drawer.mdc`**).
+3. **Mock data** — Typed arrays in **`lib/mock/<entity>.ts`**; KPI builders in **`lib/mock/<entity>-kpi.ts`** returning **`MetricItem[]`** / **`MetricInsight`** from **`@/components/key-metrics`**.
+4. **Dashboard view tab** — Use **`KeyMetrics`** (`variant="flat"` or `"card"`) and the **same** KPI functions with **`tableState.rows`**. Do **not** add standalone `Card` metric grids that duplicate those numbers. For chart-heavy dashboards reuse **`ChartsOverview`** / **`DashboardTabs`** patterns from the main dashboard route when appropriate.
+5. **MUST NOT** ship “not wired” / “switch to table” placeholders for list/board/dashboard when the stack supports those views.

package/template/.cursor/rules/exxat-no-toast.mdc

@@ -0,0 +1,26 @@
+---
+description: Exxat DS — do not use toast / sonner / transient snackbars for product messaging.
+alwaysApply: true
+---
+
+# Exxat DS — no toast
+
+## MUST NOT
+
+- Do **not** use **`toast()`** (e.g. **Sonner**), **snackbar**, or other **transient corner notifications** for product feedback in this app.
+- Do **not** add new imports from **`sonner`** or wire **`Toaster`** for feature surfaces.
+
+## Use instead
+
+- **`LocalBanner`** / **`SystemBanner`** for persistent, readable messaging.
+- **Inline status** next to the action (e.g. button label change, subtle text under the control, row-level state).
+- **Dialog / drawer** confirmations when the user must acknowledge an outcome.
+
+## Why
+
+Toasts are easy to miss, stack poorly with complex layouts, and behave inconsistently with screen readers and focus. This product standardizes on **banners + inline + dialogs**.
+
+## Authoritative detail
+
+- **`AGENTS.md` §6.5**
+- Repo root **`.cursor/rules/exxat-no-toast.mdc`** when the monorepo parent is open

package/template/.cursor/rules/exxat-page-vs-drawer.mdc

@@ -0,0 +1,22 @@
+---
+description: Exxat DS — when to use a drawer vs a new page for actions and auxiliary UI.
+alwaysApply: true
+---
+
+# Exxat DS — page vs drawer
+
+## Rule
+
+- **Drawer / sheet** — Use when the user needs **the current page’s context** *and* a **quick view**, **quick actions**, or a **short auxiliary flow** (parent list or hub stays meaningful behind the panel).
+- **New page (route)** — Use **otherwise**: primary tasks, long-form or multi-step work, or anything that should have its **own URL** / history without the parent page visible.
+
+## Product examples (this repo)
+
+- **Drawer-appropriate:** `TablePropertiesDrawer`, `ExportDrawer`, lightweight panels that supplement a hub.
+- **Page-appropriate:** Full placement or settings flows that are the main task, multi-screen wizards.
+
+## Authoritative detail
+
+- **`AGENTS.md` §6.4**
+- **`docs/data-views-pattern.md`** (Page vs drawer)
+- Repo root **`.cursor/rules/exxat-page-vs-drawer.mdc`** when the monorepo parent is open

package/template/.cursor/rules/exxat-table-properties-drawer.mdc

@@ -0,0 +1,40 @@
+---
+description: TablePropertiesDrawer must receive currentView and onViewChange when used with ListPageTemplate view tabs
+alwaysApply: true
+---
+
+# Exxat DS — Table properties + active view
+
+**Authoritative detail:** **`AGENTS.md` §4.2** (at repo root).
+
+## Why this exists
+
+`TablePropertiesDrawer` uses **`currentView`** (`DataListViewType`) for the first summary row (“Board display” vs “Table display”, matching icons/descriptions) and to show **table-only** vs **board-only** sub-panels. If **`currentView`** is omitted, the drawer assumes **table** — wrong when the tab is **Board**, **List**, or **Dashboard**.
+
+## MUST
+
+When **`ListPageTemplate`** drives **`tab.viewType`** and the page renders **`TablePropertiesDrawer`** (directly or via a toolbar slot):
+
+1. Pass **`currentView={view}`** (same value as **`tab.viewType`** passed into your table component).
+2. Pass **`onViewChange`** from **`renderContent={(tab, updateTab) => ...}`** so the drawer’s view-type tiles stay in sync with the tab:
+
+   ```tsx
+   import { dataListViewIcon, type DataListViewType } from "@/lib/data-list-view"
+
+   onViewChange={(v: DataListViewType) =>
+     updateTab({ viewType: v, icon: dataListViewIcon(v) })
+   }
+   ```
+
+3. Thread **`view`** and **`onViewChange`** through: **client → table component → drawer toolbar → `TablePropertiesDrawer`**.
+
+**Reference implementations:** `components/data-list-table.tsx` (`DataListTable`), `components/team-client.tsx` + `team-table.tsx`, `components/compliance-client.tsx` + `compliance-table.tsx`.
+
+## MUST NOT
+
+- Mount **`TablePropertiesDrawer`** on a multi-view list page **without** **`currentView`** when the active view is known from the tab.
+- Omit **`onViewChange`** if the product shows the **view type** control inside Properties (otherwise tiles cannot update the tab).
+
+## See also
+
+- **`./AGENTS.md` §4.2**, **§13** checklist

package/template/AGENTS.md

@@ -16,15 +16,18 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 4. **Before** building or changing **tabs, nav, dialogs, icon-only controls, or color/contrast**, read **§8** and **`.cursor/skills/exxat-accessibility/SKILL.md`** (from monorepo root when the parent repo is open).
 5. **Before** adding or changing **Data view charts** (dashboard tab on list hubs) or **graph keyboard styling**, read **§4.3** and **`exxat-ds/.cursor/rules/exxat-dashboard-view-charts.mdc`**.
 6. **Before** adding or changing **board (kanban) cards** on list hubs, read **§4.4** and the **`exxat-board-cards`** skill (**`.cursor/skills/`** or **`.claude/skills/`** at repo root — same content).
-7. **Before** adding **onboarding tours, feature walkthroughs, or coach marks**, read **§11** and `references/coach-marks.md`.
-8. **Before** changing the **global command palette (⌘K)** or search/AI entry UX, read **§7.1** and **`docs/command-menu-pattern.md`**.
-9. **Before** choosing **drawer vs new page** for a task flow, read **§6.4** and **`docs/data-views-pattern.md`** (Page vs drawer).
-10. **Before** adding **success/error/confirmation feedback**, read **§6.5** and **`.cursor/rules/exxat-no-toast.mdc`** (no toast or snackbars).
-11. Prefer **composing existing components** over new one-off UI. If something is missing, **extend** shared components under `components/`, not a single page file.
+7. **Before** adding **folder, panel, or other non-table view bodies** (centered grids, reusable shells), read **§4.5** and **`.cursor/rules/exxat-list-page-view-shells.mdc`** / **`.cursor/skills/exxat-list-page-view-shells/SKILL.md`**.
+8. **Before** adding or changing **Font Awesome** icons in app UI, read **`.cursor/rules/exxat-fontawesome-icons.mdc`** (Kit subsetting, weights, **`aria-hidden`** on **`<i>`**).
+9. **Before** adding a **primary nav row** that opens a **nested secondary nav panel** (Question bank style), read **§4.6** and **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**.
+10. **Before** adding **onboarding tours, feature walkthroughs, or coach marks**, read **§11** and `references/coach-marks.md`.
+11. **Before** changing the **global command palette (⌘K)** or search/AI entry UX, read **§7.1** and **`docs/command-menu-pattern.md`**.
+12. **Before** choosing **drawer vs new page** for a task flow, read **§6.4** and **`docs/data-views-pattern.md`** (Page vs drawer).
+13. **Before** adding **success/error/confirmation feedback**, read **§6.5** and **`.cursor/rules/exxat-no-toast.mdc`** (no toast or snackbars).
+14. Prefer **composing existing components** over new one-off UI. If something is missing, **extend** shared components under `components/`, not a single page file.
     - **MUST** scan `components/` (especially `components/ui/`, `components/data-views/`, `components/templates/`, `components/key-metrics.tsx`, `components/page-header.tsx`, and the charts/banner/dot-pattern surfaces) **before** writing any new UI. If a primitive or composition already exists, **use it** — don't build a parallel one.
-    - **Examples of existing surfaces to reuse:** card grid → `ListPageBoardCard` + `BoardCardIconRow` / `BoardCardTwoLineBlock`; AI / dot animation → `AiThinkingOverlay` + `DotPattern`; search input → `InputGroup` + `InputGroupAddon` + `InputGroupInput`; page title → `PageHeader` (serif via `font-heading`); list hub shell → `ListPageTemplate` (`metrics`, `defaultTabs`, `renderContent`); metrics strip → `KeyMetrics`.
-12. **Match** naming, imports, and patterns of the nearest reference implementation (usually Placements).
-13. **Before** changing the **application sidebar** (school/program switcher, product logo, profile block, or collapsible nav with children), read **§9.1** and **exxat-ds-skill §3.1**.
+    - **Examples of existing surfaces to reuse:** card grid → `ListPageBoardCard` + `BoardCardIconRow` / `BoardCardTwoLineBlock`; AI / dot animation → `AiThinkingOverlay` + `DotPattern`; search input → `InputGroup` + `InputGroupAddon` + `InputGroupInput`; page title → `PageHeader` (serif via `font-heading`); list hub shell → `ListPageTemplate` (`metrics`, `defaultTabs`, `renderContent`); metrics strip → `KeyMetrics`; **view body gutter + centered max-width** → **`ListPageViewFrame`** (**§4.5**).
+15. **Match** naming, imports, and patterns of the nearest reference implementation (usually Placements).
+16. **Before** adding entity **mock data**, a **new view tab**, or **detail/inspector** panels on a list hub, read **`.cursor/rules/exxat-centralized-list-dataset.mdc`** and **`.cursor/skills/exxat-centralized-list-dataset/SKILL.md`** (single **`useTableState`** row bag for every view; **no** parallel mock arrays per view).
 
 **Longer narrative and architecture:** `docs/data-views-pattern.md`, `docs/command-menu-pattern.md` (keep in sync with this handbook for big refactors).
 
@@ -34,8 +37,8 @@ Cross-cutting Cursor rules also live in the repo root `.cursor/rules/` (data tab
 
 1. **User / task instructions** in the current session (highest).
 2. This **`AGENTS.md`** for Exxat DS product patterns.
-3. **`.cursor/rules/*.mdc`** at repo root (`exxat-data-tables`, `exxat-list-page-connected-views`, `exxat-table-properties-drawer`, `exxat-board-cards`, `exxat-page-vs-drawer`, `exxat-no-toast`, `exxat-kbd-shortcuts`, `exxat-accessibility`, `exxat-ds-agents`) and any rules under **`exxat-ds/.cursor/rules/`** (including **`exxat-dashboard-view-charts`** for Data view charts).
-4. Project **skills** under `.cursor/skills/` when relevant — e.g. **shadcn**, **exxat-accessibility** (WCAG / ARIA / touch / contrast), **exxat-board-cards** (kanban card shell, status badges, primitives).
+3. **`.cursor/rules/*.mdc`** at repo root (`exxat-data-tables`, `exxat-list-page-connected-views`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-table-properties-drawer`, `exxat-board-cards`, `exxat-page-vs-drawer`, `exxat-no-toast`, `exxat-kbd-shortcuts`, `exxat-accessibility`, `exxat-fontawesome-icons`, `exxat-primary-nav-secondary-panel`, `exxat-ds-agents`) and any rules under **`exxat-ds/.cursor/rules/`** (including **`exxat-dashboard-view-charts`** for Data view charts).
+4. Project **skills** under `.cursor/skills/` when relevant — e.g. **shadcn**, **exxat-accessibility** (WCAG / ARIA / touch / contrast), **exxat-board-cards** (kanban card shell, status badges, primitives), **exxat-list-page-view-shells** (centered view bodies, **`ListPageViewFrame`**), **exxat-centralized-list-dataset** (one **`useTableState`** row bag + shared maps across all list-hub views and **`TablePropertiesDrawer`**).
 
 If two documents conflict, prefer the **more specific** rule for the file type, then **newer** team decisions captured in `AGENTS.md`.
 
@@ -76,6 +79,8 @@ If two documents conflict, prefer the **more specific** rule for the file type,
 
 **Mock data:** Put typed row arrays in **`lib/mock/<entity>.ts`**. Add **`lib/mock/<entity>-kpi.ts`** (or colocated helpers) with pure functions **`entityKpiMetrics(rows)`** / **`entityKpiInsight(rows)`** returning **`MetricItem[]`** / **`MetricInsight`** for **`KeyMetrics`**. The page client passes full mock rows into one table component; KPI helpers receive **`tableState.rows`** inside that component so search/filters apply to list, board, dashboard, and table together.
 
+**Centralized dataset (rows + table properties + alternate views):** **MUST** use one **`useTableState`** row bag for the **`DataTable`**, **`TablePropertiesDrawer`** (columns/density on **that** table), and **every** record-bearing **`DataListViewType`** — **folder**, **panel**, **tree**, etc. — via **`tableState.rows`**. **MUST NOT** import a second **`lib/mock/<entity>`** array into a view-only module while the grid filters state; **MUST NOT** fork a duplicate row type for inspectors. Shared **properties**: tab labels **`DATA_LIST_VIEW_TILES`** (`lib/data-list-view.ts`), status **`lib/list-status-badges.ts`**, KPI helpers from **`tableState.rows`**. **Presentation:** non-table bodies use **`ListPageViewFrame`** and **`components/data-views/`** primitives fed by the **same** **`tableState.rows`** (**§4.5**). **Rule + skill:** **`.cursor/rules/exxat-centralized-list-dataset.mdc`**, **`.cursor/skills/exxat-centralized-list-dataset/SKILL.md`**.
+
 **Dashboard view tab:** **MUST** reuse **`KeyMetrics`** (same component as the optional template metrics strip) and the same KPI helpers — **MUST NOT** introduce bespoke `Card`-only metric grids for the same numbers. Full-page dashboards may also use **`DashboardTabs`**, **`ChartsOverview`**, etc. (`app/(app)/dashboard/page.tsx`); use those **shared** dashboard components when charts or multi-section layouts are product-appropriate, not one-off duplicates.
 
 **Details:** `docs/data-views-pattern.md` (mock data, connected views, dashboard view).
@@ -125,6 +130,35 @@ Thread **`view`** and **`onViewChange`** from the **client** → **table / toolb
 
 **Reference:** **`components/data-views/placement-board-card.tsx`**, **`components/team-board-view.tsx`**, **`components/compliance-board-view.tsx`**, **`components/question-bank-board-view.tsx`**, **`components/list-hub-status-badge.tsx`**, **`lib/list-status-badges.ts`**, **`components/data-views/list-page-board-template.tsx`**. **Skill (Cursor + Claude):** **`.cursor/skills/exxat-board-cards/SKILL.md`** and **`.claude/skills/exxat-board-cards/SKILL.md`** (duplicate for Claude Code).
 
+### 4.5 View layout shells (centered, reusable, not page-tied)
+
+**MUST** keep **shared view chrome** (horizontal gutter, optional **centered max-width** on ultra-wide screens) in **`ListPageViewFrame`** from **`components/data-views/list-page-view-frame.tsx`** (re-exported from **`components/data-views/index.ts`**). Use the exported constants **`LIST_PAGE_VIEW_FRAME_GUTTER`**, **`LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID`** (`max-w-6xl`), and **`LIST_PAGE_VIEW_FRAME_MAX_WIDE`** (`max-w-7xl`) instead of ad-hoc `mx-*` / `max-w-*` pairs in each hub.
+
+| Topic | Rule |
+|-------|------|
+| **Folder / icon / panel-style views** | Compose **`FolderGridView`**, **`FinderPanelView`**, or another **`data-views/`** primitive; those shells **should** use **`ListPageViewFrame`** internally or as a direct wrapper so every hub gets the same rhythm. |
+| **New view types** | Implement the **generic** grid/shell under **`components/data-views/`** with render props; **`TeamTable`** / **`QuestionBankTable`** **MUST** only wire data + callbacks — **MUST NOT** own one-off full-page grid markup that another entity would duplicate. |
+| **`DataTable` branch** | **MUST NOT** wrap **`DataTable`** in **`ListPageViewFrame`** when it would **stack** horizontal inset with the table toolbar (**§5**). |
+
+**Cursor rule:** **`.cursor/rules/exxat-list-page-view-shells.mdc`**. **Skill:** **`.cursor/skills/exxat-list-page-view-shells/SKILL.md`**.
+
+### 4.6 Primary nav hub → secondary panel (nested scope nav)
+
+**Use when** a **single primary nav destination** needs **inner scopes** (All / Mine / tree / filters) in a **panel** beside content — **not** as extra **primary** or **collapsible child** rows.
+
+**MUST:**
+
+| Step | Action |
+|------|--------|
+| **Nav** | Set **`secondaryPanel`** on the **`NavLinkItem`** in **`lib/mock/navigation.tsx`** to a **stable id** (e.g. **`"question-bank"`**). **`url`** stays the **hub route**. |
+| **Registry** | Map that id in **`PANELS`** inside **`components/secondary-panel.tsx`** to a component that renders **panel header** + **secondary nav** UI. |
+| **Route** | Mount **`*PanelActivator`** on the hub that calls **`useAutoPanel(id)`** with the **same id** so the panel opens while the route is mounted (see **`QuestionBankPanelActivator`** on **`QuestionBankClient`**). |
+| **Data** | Keep using **one** **`useTableState`** row bag; **scope** filters via **URL** + shared helpers (**`lib/question-bank-nav.ts`**) so **refresh** and **links** match the panel — **`.cursor/rules/exxat-centralized-list-dataset.mdc`**. |
+
+**MUST NOT:** Set **`secondaryPanel`** without **`PANELS[id]`** and **`useAutoPanel`** — users see **collapsed** main nav with **no** panel body.
+
+**Cursor rule:** **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**. **Icons in panel:** **`.cursor/rules/exxat-fontawesome-icons.mdc`**.
+
 ---
 
 ## 5. Layout alignment (avoid double inset)
@@ -451,6 +485,9 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 | Use `CoachMark` + `useCoachMark` for onboarding tours (§11); register in `coach-mark-registry` | Build one-off walkthrough overlays or custom onboarding modals |
 | Data view charts: **`ChartFigure`** + **`ChartDataTable`**; keyboard highlight via **`chart-keyboard-selection`** (§4.3); layout via **`data-view-dashboard-storage`** | Ad-hoc `localStorage` keys for dashboard layout; opacity-only “selection” without `activeBar`/`activeShape` |
 | Board cards: **`ListPageBoardCard`** shell; status via **`ListHubStatusBadge`** + **`lib/list-status-badges`**; no **`uppercase`** on status chips (§4.4) | One-off board card markup; status as plain body text; duplicated status maps outside **`list-status-badges`**; **empty placeholder** primary hubs (§4.1) |
+| **§4.5** — Non-table view bodies use **`ListPageViewFrame`** (+ **`data-views/`** shells); new grids are generic components, not route-only markup | Duplicated `mx-4` / `max-w-*` per hub; wrapping **`DataTable`** so inset **doubles** (**§5**) |
+| **§4.6** — **`secondaryPanel`** + **`PANELS`** + **`useAutoPanel`** together for nested scope nav | **`secondaryPanel`** id with no panel component or activator |
+| **Font Awesome** — Kit in **`app/layout.tsx`**; **`fa-light` / `fa-solid`** conventions; **`aria-hidden`** on decorative **`<i>`**; run **`fa:subset-audit`** when adding glyphs (**`exxat-fontawesome-icons.mdc`**) | Parallel icon libraries for the same product chrome |
 
 ---
 
@@ -458,9 +495,11 @@ New pages **SHOULD** namespace keys and version JSON (`v: 1`) for future migrati
 
 Copy and complete when implementing or reviewing:
 
+- [ ] **Centralized dataset:** One **`useTableState`** / **`tableState.rows`** for **all** view tabs and inspectors; **TablePropertiesDrawer** on the **same** `DataTable`; **no** parallel mock arrays per view — **`.cursor/rules/exxat-centralized-list-dataset.mdc`**.
 - [ ] **Reuse:** `ListPageTemplate`, `DataTable` / `useTableState`, `TablePropertiesDrawer` — no parallel bespoke tabs/filters.
 - [ ] **Tabs:** Any main `DataTable` sits under `ListPageTemplate` with appropriate view tabs.
 - [ ] **Inset:** No double horizontal padding around `DataTable`.
+- [ ] **§4.5 View shells:** Folder / panel / icon views use **`ListPageViewFrame`** (or a **`data-views/`** component that uses it); no page-tied-only grid wrappers; **`DataTable`** not double-wrapped (**§5**).
 - [ ] **> ~10 items:** Search, filter, sort, properties (per surface type in §6.1).
 - [ ] **Exportable data:** Filled primary CTA; **⋯** menu with Export → `ExportDrawer`.
 - [ ] **Primary hub + large data:** Same composition as `DataListClient` / `TeamClient` (template + metrics when applicable).
@@ -479,7 +518,9 @@ Copy and complete when implementing or reviewing:
 - [ ] **Accessibility:** §8 — tablist/toolbar patterns, **≥24px** targets for icon-only controls, contrast on tinted surfaces, dialog/sheet/drawer **titles**; **every icon that communicates info has a text alternative** — adjacent label (preferred) OR `aria-label` + `Tooltip` (§8.6 Case A/B/C, covers informational icons like calendar-for-date, status dots, AND icon-only buttons); **kbd inside a button uses `<Kbd variant="bare">`** (§8.7); re-run **axe** on Placements when changing views toolbar.
 - [ ] **Coach marks (§11):** `CoachMark` + `useCoachMark`; register in **`coach-mark-registry`**; use **`enabled`** / **`dependsOnDismissedFlowId`** when a tour must wait for another flow or a specific view (e.g. **dashboard**); customize-dashboard flows use **`lib/dashboard-customize-coach-mark.ts`**.
 - [ ] **Application sidebar (§9.1):** **`ExxatProductLogo`** for product; **`logoDevUrl`** for schools; team switcher **`DropdownMenuContent`** not trigger-width-only (**`!w-max`** + min/max width); expanded switcher **`h-auto min-h-12`**; no **`CollapsibleTrigger` → `SidebarMenuButton` with `tooltip` prop**; child links **popover** on icon rail; profile **`stockPortraitUrl`** + **`referrerPolicy="no-referrer"`** on **`AvatarImage`**.
+- [ ] **Secondary panel (§4.6):** If **`NavLinkItem.secondaryPanel`** is set — **`PANELS[id]`** in **`secondary-panel.tsx`**, hub mounts **`useAutoPanel(id)`**, scope syncs to URL + **`tableState.rows`** — **`.cursor/rules/exxat-primary-nav-secondary-panel.mdc`**.
+- [ ] **Font Awesome:** New glyphs covered by **`fa:subset-audit`** / Kit subset; decorative **`<i>`** has **`aria-hidden`**; icon-only controls follow **§8.6** — **`.cursor/rules/exxat-fontawesome-icons.mdc`**.
 
 ---
 
-*Last updated: §9.1 application sidebar shell; exxat-ds-skill §3.1; §4.1 no empty hubs; §4.4 board cards + `ListHubStatusBadge`; §6.5 no toast; §6.4 page vs drawer; §7.1 command palette; §13 checklist.*
+*Last updated: §4.1 centralized dataset + presentation; §4.5–§4.6 view shells + secondary panel; Font Awesome rule; §9.1 application sidebar shell; §4.4 board cards; §6.5 no toast; §7.1 command palette; §13 checklist.*

package/template/app/(app)/dashboard/page.tsx

@@ -27,7 +27,7 @@ export default function Page() {
     <PrimaryPageTemplate siteHeader={{ title: "Dashboard" }}>
       <DashboardTabs
         title="Dashboard"
-        subtitle="Good morning, Himanshu · Overview for March 2026"
+        subtitle="Design system shell · sample metrics and charts"
         metrics={DASHBOARD_METRICS}
         insight={DASHBOARD_INSIGHT}
       />

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

@@ -1,28 +1,44 @@
+import Link from "next/link"
 import { notFound } from "next/navigation"
-import { PlacementDetail } from "@/components/placement-detail"
 import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { Button } from "@/components/ui/button"
 import { getPlacementById } from "@/lib/mock/placements"
 
-export default async function PlacementDetailPage({
+export default async function RecordDetailPage({
   params,
 }: {
   params: Promise<{ id: string }>
 }) {
   const { id } = await params
-  const placement = getPlacementById(Number(id))
-  if (!placement) notFound()
+  const row = getPlacementById(Number(id))
+  if (!row) notFound()
 
   return (
     <PrimaryPageTemplate
       siteHeader={{
-        title: "Placement Details",
-        breadcrumbs: [{ label: "Placements", href: "/data-list" }],
+        title: "Record",
+        breadcrumbs: [{ label: "List hub", href: "/data-list" }],
       }}
-      maxWidthClassName="max-w-4xl"
+      maxWidthClassName="max-w-2xl"
       contentClassName="px-4 lg:px-6 py-6"
       bodyClassName="overflow-y-auto"
     >
-      <PlacementDetail placement={placement} />
+      <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

@@ -3,7 +3,7 @@ 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 NewPlacementPage() {
+export default function NewRecordPage() {
   return (
     <PrimaryPageTemplate
       beforeSiteHeader={<SidebarAutoCollapse />}
@@ -14,17 +14,20 @@ export default function NewPlacementPage() {
       <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 placements list"
+        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-8"
+        className="text-[2.25rem] font-semibold tracking-tight leading-none text-foreground mb-2"
         style={{ fontFamily: "var(--font-heading)" }}
       >
-        New placement
+        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>
   )