@exxatdesignux/ui 0.3.0 → 0.4.0

package/template/components/team-table.tsx

@@ -1,553 +0,0 @@
-"use client"
-
-/**
- * Team roster — thin wrapper around the centralized `<HubTable>`. Owns only the column defs,
- * panel-view helpers, dashboard layout state, and per-view renderers.
- *
- * Single dataset: `HubTable` runs one `useTableState` and every renderer (list, board, panel,
- * dashboard) reads `state.rows` (filtered/sorted). KPIs and panel groups derive from those.
- */
-
-import * as React from "react"
-import { useRouter } from "next/navigation"
-import { AvatarInitials } from "@/components/ui/avatar"
-import {
-  TEAM_MEMBER_STATUS_BADGE_CLASS,
-  TEAM_MEMBER_STATUS_ICON,
-  TEAM_MEMBER_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import { mailtoHref } from "@/lib/mailto"
-import type { TeamMember } from "@/lib/mock/team"
-import { DataTableToolbar } from "@/components/data-table"
-import {
-  TeamDashboardChartsSection,
-  DEFAULT_TEAM_CHART_TYPES,
-  DEFAULT_TEAM_SPANS,
-  ALL_TEAM_DASHBOARD_CARDS,
-  loadTeamDashboardLayout,
-  mergeTeamDashboardLayout,
-  saveTeamDashboardLayout,
-} from "@/components/data-view-dashboard-charts-team"
-import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
-import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
-import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
-import { TeamBoardView, TEAM_BOARD_GROUP_OPTIONS } from "@/components/team-board-view"
-import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
-import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import { teamKpiInsight, teamKpiMetrics } from "@/lib/mock/team-kpi"
-import { cn } from "@/lib/utils"
-import type { DataListViewType } from "@/lib/data-list-view"
-import type { ColumnDef } from "@/components/data-table/types"
-import { TablePropertiesDrawerButton } from "@/components/table-properties"
-import {
-  HubTable,
-  type HubTableHandle,
-  type HubTableRenderers,
-  type HubTableRendererArgs,
-} from "@/components/data-views"
-import { TEAM_SUPPORTED_VIEWS } from "@/lib/team-supported-views"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-import { CoachMark } from "@/components/ui/coach-mark"
-import { useCoachMark } from "@/hooks/use-coach-mark"
-import { DASHBOARD_CUSTOMIZE_COACH_STEPS } from "@/lib/dashboard-customize-coach-mark"
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-function uniqueRoles(members: TeamMember[]) {
-  return [...new Set(members.map(m => m.role))].sort().map(r => ({ value: r, label: r }))
-}
-
-function formatUsPhoneDigits(digits: string) {
-  const d = digits.replace(/\D/g, "").slice(0, 10)
-  if (d.length !== 10) return digits
-  return `(${d.slice(0, 3)}) ${d.slice(3, 6)}-${d.slice(6)}`
-}
-
-const STATUS_FILTER_OPTS = [
-  { value: "active", label: TEAM_MEMBER_STATUS_LABEL.active },
-  { value: "away", label: TEAM_MEMBER_STATUS_LABEL.away },
-  { value: "invited", label: TEAM_MEMBER_STATUS_LABEL.invited },
-]
-
-const TEAM_STATUS_GROUPS: Array<{ id: string; label: string; accent: string }> = [
-  { id: "all", label: "All", accent: "bg-muted-foreground" },
-  { id: "active", label: "Active", accent: "bg-success" },
-  { id: "away", label: "Away", accent: "bg-warning" },
-  { id: "invited", label: "Invited", accent: "bg-brand" },
-]
-
-function buildTeamStatusGroups(members: TeamMember[]): FinderGroup[] {
-  return TEAM_STATUS_GROUPS.map(sg => ({
-    id: sg.id,
-    label: sg.label,
-    accent: sg.accent,
-    count: sg.id === "all" ? members.length : members.filter(m => m.status === sg.id).length,
-  }))
-}
-
-// ─── Team-specific panel view rows ───────────────────────────────────────────
-
-function TeamFinderListRow({ member, isSelected }: { member: TeamMember; isSelected: boolean }) {
-  return (
-    <div
-      className={`flex w-full min-w-0 items-center gap-3 transition-colors duration-75 ${
-        isSelected ? "bg-transparent text-accent-foreground" : "text-foreground"
-      }`}
-    >
-      <AvatarInitials
-        initials={member.initials}
-        className={cn(
-          "size-8 shrink-0 rounded-full text-[11px] font-semibold",
-          isSelected ? "ring-2 ring-accent-foreground/35" : "",
-        )}
-      />
-      <div className="min-w-0 flex-1">
-        <p className={cn("truncate text-[13px] font-medium leading-tight", isSelected ? "text-accent-foreground" : "text-foreground")}>
-          {member.name}
-        </p>
-        <p className={cn("mt-0.5 truncate text-[11px] leading-tight", isSelected ? "text-accent-foreground/80" : "text-muted-foreground")}>
-          {member.role}
-        </p>
-      </div>
-      {!isSelected && (
-        <ListHubStatusBadge
-          label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-          tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-          icon={TEAM_MEMBER_STATUS_ICON[member.status]}
-        />
-      )}
-    </div>
-  )
-}
-
-function TeamFinderDetail({ member }: { member: TeamMember }) {
-  const router = useRouter()
-  return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      <div className="flex shrink-0 items-start gap-4 border-b border-border px-5 py-4">
-        <AvatarInitials initials={member.initials} className="size-14 shrink-0 rounded-full text-lg font-semibold" />
-        <div className="min-w-0 flex-1">
-          <h2 className="text-base font-semibold text-foreground leading-tight">{member.name}</h2>
-          <p className="mt-0.5 text-[13px] text-muted-foreground">{member.role}</p>
-          <div className="mt-2">
-            <ListHubStatusBadge
-              label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-              tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-              icon={TEAM_MEMBER_STATUS_ICON[member.status]}
-            />
-          </div>
-        </div>
-        <Tip side="bottom" label="Open full profile">
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="shrink-0"
-            onClick={() => router.push(`/team/${member.id}`)}
-            aria-label={`Open full profile for ${member.name}`}
-          >
-            <i className="fa-light fa-arrow-up-right-from-square text-[12px]" aria-hidden="true" />
-            Open
-          </Button>
-        </Tip>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div className="flex flex-col gap-0.5">
-            <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-              <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
-            </dt>
-            <dd className="text-[13px]">
-              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">
-                {member.email}
-              </a>
-            </dd>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-              <i className="fa-light fa-briefcase text-[10px]" aria-hidden="true" /> Role
-            </dt>
-            <dd className="text-[13px] text-foreground">{member.role}</dd>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-              <i className="fa-light fa-phone text-[10px]" aria-hidden="true" /> Phone
-            </dt>
-            <dd className="text-[13px] text-foreground">{member.phone}</dd>
-          </div>
-        </dl>
-      </div>
-    </div>
-  )
-}
-
-// ─── Columns ─────────────────────────────────────────────────────────────────
-
-function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
-  const roleOpts = uniqueRoles(members)
-  return [
-    { key: "select", label: "", width: 40, minWidth: 40, defaultPin: "left", lockPin: true },
-    {
-      key: "name",
-      label: "Name",
-      width: 240,
-      minWidth: 160,
-      sortable: true,
-      sortKey: "name",
-      defaultPin: "left",
-      filter: { type: "text", icon: "fa-user", operators: ["contains", "not_contains"] },
-      cell: row => (
-        <div className="flex items-center gap-2.5 min-w-0">
-          <AvatarInitials initials={row.initials} className="size-8 shrink-0 text-xs" />
-          <span className="truncate text-sm font-medium text-foreground">{row.name}</span>
-        </div>
-      ),
-    },
-    {
-      key: "role",
-      label: "Role",
-      width: 200,
-      minWidth: 140,
-      sortable: true,
-      sortKey: "role",
-      filter: { type: "select", icon: "fa-briefcase", operators: ["is", "is_not"], options: roleOpts },
-      cell: row => <span className="text-sm text-foreground/90">{row.role}</span>,
-    },
-    {
-      key: "email",
-      label: "Email",
-      width: 260,
-      minWidth: 180,
-      sortable: true,
-      sortKey: "email",
-      filter: { type: "text", icon: "fa-envelope", operators: ["contains", "not_contains"] },
-      cell: row => (
-        <a href={mailtoHref(row.email)} className="text-sm text-primary hover:underline truncate block">
-          {row.email}
-        </a>
-      ),
-    },
-    {
-      key: "phone",
-      label: "Phone",
-      width: 148,
-      minWidth: 132,
-      sortable: true,
-      sortKey: "phone",
-      filter: { type: "text", icon: "fa-phone", operators: ["contains", "not_contains"], textMask: "phone" },
-      cell: row => (
-        <a
-          href={`tel:+1${row.phone}`}
-          className="text-sm tabular-nums text-foreground/90 hover:text-primary hover:underline truncate block"
-        >
-          {formatUsPhoneDigits(row.phone)}
-        </a>
-      ),
-    },
-    {
-      key: "status",
-      label: "Status",
-      width: 120,
-      minWidth: 100,
-      sortable: true,
-      sortKey: "status",
-      filter: { type: "select", icon: "fa-circle-dot", operators: ["is", "is_not"], options: STATUS_FILTER_OPTS },
-      cell: row => (
-        <ListHubStatusBadge
-          label={TEAM_MEMBER_STATUS_LABEL[row.status]}
-          tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[row.status]}
-          icon={TEAM_MEMBER_STATUS_ICON[row.status]}
-        />
-      ),
-    },
-    {
-      key: "actions",
-      label: "",
-      width: 48,
-      minWidth: 48,
-      defaultPin: "right",
-      lockPin: true,
-      cell: row => (
-        <div className="flex items-center justify-center">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon-sm" variant="ghost" aria-label={`Actions for ${row.name}`}>
-                <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => window.open(mailtoHref(row.email))}>
-                <i className="fa-light fa-envelope" aria-hidden="true" />
-                Email
-              </DropdownMenuItem>
-              <DropdownMenuItem disabled>
-                <i className="fa-light fa-user-gear" aria-hidden="true" />
-                Manage access
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ),
-    },
-  ]
-}
-
-// ─── Dashboard body (split out so it can use hooks inside renderer closure) ─
-
-interface TeamDashboardBodyProps {
-  args: HubTableRendererArgs<TeamMember>
-  columns: ColumnDef<TeamMember>[]
-}
-
-function TeamDashboardBody({ args, columns }: TeamDashboardBodyProps) {
-  const { state, drawerToolbarProps, displayOptions } = args
-  const rows = state.rows as TeamMember[]
-
-  const dashboardKpi = React.useMemo(
-    () => ({ metrics: teamKpiMetrics(rows), insight: teamKpiInsight(rows) }),
-    [rows],
-  )
-
-  const [visibleCards, setVisibleCards] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-  const [cardOrder, setCardOrder] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-  const [cardSpans, setCardSpans] = React.useState<Record<string, 1 | 2>>(() => ({ ...DEFAULT_TEAM_SPANS }))
-  const [cardChartTypes, setCardChartTypes] = React.useState<Record<string, ChartType>>(() => ({ ...DEFAULT_TEAM_CHART_TYPES }))
-  const [kpiCount, setKpiCount] = React.useState<number>(KEY_METRICS_KPI_COUNT_DEFAULT)
-  const [layoutEdit, setLayoutEdit] = React.useState(false)
-  const hydrated = React.useRef(false)
-  const baselineRef = React.useRef<DashboardLayout | null>(null)
-
-  React.useEffect(() => {
-    const saved = loadTeamDashboardLayout()
-    const m = mergeTeamDashboardLayout(saved)
-    setVisibleCards(m.visible)
-    setCardOrder(m.order)
-    setCardSpans(m.spans ?? { ...DEFAULT_TEAM_SPANS })
-    setCardChartTypes(m.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
-    setKpiCount(m.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
-    hydrated.current = true
-  }, [])
-
-  React.useEffect(() => {
-    if (!hydrated.current) return
-    saveTeamDashboardLayout({
-      visible: visibleCards,
-      order: cardOrder,
-      spans: cardSpans,
-      chartTypes: cardChartTypes,
-      keyMetricsKpiCount: kpiCount,
-    })
-  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, kpiCount])
-
-  const onResetLayout = React.useCallback(() => {
-    setVisibleCards(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-    setCardOrder(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-    setCardSpans({ ...DEFAULT_TEAM_SPANS })
-    setCardChartTypes({ ...DEFAULT_TEAM_CHART_TYPES })
-    setKpiCount(KEY_METRICS_KPI_COUNT_DEFAULT)
-  }, [])
-
-  const onLayoutEditStart = React.useCallback(() => {
-    baselineRef.current = {
-      visible: [...visibleCards],
-      order: [...cardOrder],
-      spans: { ...cardSpans },
-      chartTypes: { ...cardChartTypes },
-      keyMetricsKpiCount: kpiCount,
-    }
-    setLayoutEdit(true)
-  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, kpiCount])
-
-  const onLayoutEditCancel = React.useCallback(() => {
-    const b = baselineRef.current
-    if (b) {
-      setVisibleCards(b.visible)
-      setCardOrder(b.order)
-      setCardSpans(b.spans ?? { ...DEFAULT_TEAM_SPANS })
-      setCardChartTypes(b.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
-      setKpiCount(b.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
-    }
-    setLayoutEdit(false)
-  }, [])
-
-  const coach = useCoachMark({
-    flowId: "team-dashboard-customize",
-    steps: DASHBOARD_CUSTOMIZE_COACH_STEPS,
-    delay: 700,
-    enabled: true,
-  })
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <CoachMark state={coach} />
-      {!layoutEdit ? (
-        <DataTableToolbar
-          state={state}
-          columns={columns}
-          searchable={displayOptions.showToolbarSearch}
-          searchAriaLabel="Search team members"
-          toolbarSlot={s => (
-            <TablePropertiesDrawerButton
-              {...drawerToolbarProps}
-              state={s}
-              extraActions={
-                <Tip side="bottom" label="Edit dashboard layout on canvas">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    aria-label="Edit dashboard layout"
-                    onClick={onLayoutEditStart}
-                    className="text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover"
-                  >
-                    <i className="fa-light fa-pen-ruler text-[13px]" aria-hidden="true" />
-                  </Button>
-                </Tip>
-              }
-            />
-          )}
-        />
-      ) : null}
-      <TeamDashboardChartsSection
-        members={rows}
-        keyMetrics={dashboardKpi}
-        visibleCards={visibleCards}
-        cardOrder={cardOrder}
-        cardSpans={cardSpans}
-        cardChartTypes={cardChartTypes}
-        keyMetricsKpiCount={kpiCount}
-        layoutEditMode={layoutEdit}
-        onVisibleChange={setVisibleCards}
-        onOrderChange={setCardOrder}
-        onSpanChange={(id, span) => setCardSpans(prev => ({ ...prev, [id]: span }))}
-        onChartTypeChange={(id, t) => setCardChartTypes(prev => ({ ...prev, [id]: t }))}
-        onKeyMetricsKpiCountChange={setKpiCount}
-        onResetLayout={onResetLayout}
-        onLayoutEditDone={() => setLayoutEdit(false)}
-        onLayoutEditCancel={onLayoutEditCancel}
-      />
-    </div>
-  )
-}
-
-// ─── Public component ───────────────────────────────────────────────────────
-
-export type TeamTableHandle = HubTableHandle
-
-export const TeamTable = React.forwardRef<
-  TeamTableHandle,
-  { members: TeamMember[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
->(function TeamTable({ members, view = "table", onViewChange }, ref) {
-  const columns = React.useMemo(() => buildTeamColumns(members), [members])
-
-  const renderers: HubTableRenderers<TeamMember> = {
-    "board-with-toolbar": ({ state, toolbarShell, displayOptions }) => {
-      const boardGroupKey = TEAM_BOARD_GROUP_OPTIONS.some(
-        o => o.key === displayOptions.boardGroupByColumnKey,
-      )
-        ? displayOptions.boardGroupByColumnKey
-        : "status"
-      return toolbarShell(
-        <TeamBoardView
-          members={state.rows as TeamMember[]}
-          groupByColumnKey={boardGroupKey}
-          onRowActivate={m => state.toggleRow(m.id)}
-        />,
-      )
-    },
-    "panel-with-toolbar": ({ state, toolbarShell }) => {
-      const groups = buildTeamStatusGroups(state.rows as TeamMember[])
-      return toolbarShell(
-        <ListPageSplitHubChrome aria-label="Team members panel view">
-          <FinderPanelView<TeamMember>
-            embedded
-            groupsColumnTitle="Status"
-            groups={groups}
-            rows={state.rows as TeamMember[]}
-            getRowId={r => r.id}
-            getRowGroupId={r => r.status}
-            defaultGroupId="all"
-            autoSaveId="team-panel-view"
-            ariaLabel="Team members panel view"
-            emptyList={<p>No team members found</p>}
-            renderListRow={(member, isSelected) => (
-              <TeamFinderListRow member={member} isSelected={isSelected} />
-            )}
-            renderDetail={member => <TeamFinderDetail member={member} />}
-          />
-        </ListPageSplitHubChrome>,
-      )
-    },
-    "dashboard-with-toolbar": (args) => <TeamDashboardBody args={args} columns={columns} />,
-  }
-
-  return (
-    <HubTable<TeamMember>
-      rows={members}
-      columns={columns}
-      view={view}
-      onViewChange={onViewChange}
-      supportedViewTypes={TEAM_SUPPORTED_VIEWS}
-      hubLabel="Team"
-      lifecycleTabLabel="Team"
-      searchAriaLabel="Search team members"
-      getRowId={row => row.id}
-      getRowSelectionLabel={row => row.name}
-      defaultSort={{ key: "name", dir: "asc" }}
-      emptyState={<p className="text-sm text-muted-foreground">No team members.</p>}
-      boardGroupByColumnOptions={[...TEAM_BOARD_GROUP_OPTIONS]}
-      listAriaLabel="Team members"
-      listEmptyState="No team members match your filters."
-      renderListRow={member => (
-        <ListPageBoardCard
-          layout="row"
-          rowContainerClassName="flex flex-row items-center gap-3"
-          leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
-          rowEnd={
-            <div className="flex shrink-0 items-center gap-2">
-              <ListHubStatusBadge
-                surface="board"
-                label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-                tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-                icon={TEAM_MEMBER_STATUS_ICON[member.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="truncate text-sm font-semibold text-foreground">{member.name}</p>
-            <p className="text-xs text-muted-foreground">{member.role}</p>
-            <p className="truncate text-xs text-muted-foreground">{member.email}</p>
-          </div>
-        </ListPageBoardCard>
-      )}
-      bulkActionsSlot={selected => {
-        if (selected.size === 0) return null
-        return (
-          <>
-            <span className="sr-only">{selected.size} selected</span>
-            <Tip label="Export selection (demo)">
-              <Button size="sm" variant="outline" type="button">
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </Button>
-            </Tip>
-          </>
-        )
-      }}
-      renderers={renderers}
-      handleRef={ref}
-    />
-  )
-})
-
-TeamTable.displayName = "TeamTable"

package/template/docs/question-bank-hub-header-pattern.md

@@ -1,25 +0,0 @@
-# Question bank hub header — folder scope + Customize folder
-
-**Audience:** Engineers extending the question bank library hub (`QuestionBankClient`, `QuestionBankPageHeader`, URL scope).
-
-## Problem
-
-The library uses **`ListPageTemplate`** with multiple **view tabs** (table, panel, tree, …). **`QuestionBankNewFolderSheet`** (customize mode) is also used inside **`QuestionBankTable`** for some views (e.g. panel columns). If **Customize folder** exists only there, users on **table** or other tabs **cannot** open the sheet from a consistent chrome entry point when the URL is scoped to a folder (`?scope=folder&folderId=…`).
-
-## Pattern
-
-1. **`QuestionBankPageHeader`** exposes optional **`onCustomizeFolder?: () => void`**. When **`navState.scope === "folder"`** and **`navState.folderId`** is set, the hub client passes a callback that opens customize mode for the matching **`QuestionBankFolder`**.
-2. **`QuestionBankClient`** (or equivalent hub client) mounts **`QuestionBankNewFolderSheet`** **once** beside **`SecondaryPanelHubTemplate` / `ListPageTemplate`**, with local state for **`open`** and **`customizingFolder`**. Saving updates **`folders`** the same way as table-embedded customize flows.
-3. The header **⋯ More** menu order stays aligned with **§4.7**: **Invite people** (when collaboration variant) → **Customize folder** (when folder-scoped) → **Export** → **Show / hide metric section** (when applicable).
-
-## References
-
-| Piece | Location |
-|-------|-----------|
-| Header prop + menu item | `components/question-bank-page-header.tsx` |
-| Client wiring + sheet | `components/question-bank-client.tsx` |
-| URL scope | `lib/question-bank-nav.ts` (`parseQuestionBankNav`, `QuestionBankNavState`) |
-| Sheet UI | `components/question-bank-new-folder-sheet.tsx` |
-
-**Cursor rule:** `.cursor/rules/exxat-question-bank-hub-header.mdc`  
-**Handbook:** `AGENTS.md` §4.6 (folder-scoped hub chrome).

package/template/lib/compliance-supported-views.ts

@@ -1,10 +0,0 @@
-import type { DataListViewType } from "@/lib/data-list-view"
-
-/** Views implemented in `ComplianceTable` — keep in sync with the renderers passed to `HubTable`. */
-export const COMPLIANCE_SUPPORTED_VIEWS = [
-  "table",
-  "list",
-  "board",
-  "panel",
-  "dashboard",
-] as const satisfies readonly DataListViewType[]