@exxatdesignux/ui 0.2.18 → 0.2.19

package/template/components/placements-table.tsx

@@ -1,1642 +0,0 @@
-"use client"
-
-/**
- * PlacementsTable — placements hub composition on top of the generic
- * `DataTable`. Owns: placement-specific column defs, board column grouping,
- * KPI dashboards, the "open table properties" imperative handle, and the
- * Properties drawer + multi-view composition (table / list / board / …).
- *
- * NOTE: this is hub composition, NOT a parallel table primitive. Every hub
- * has its own `*-table.tsx` of the same shape (`team-table.tsx`,
- * `compliance-table.tsx`, …); all of them render `<DataTable>` from
- * `@/components/data-table`.
- *
- * View tabs drive `view` (table | list | board | …). `lifecycleTabId` selects which **demo row
- * segment** (columns + filtered rows) to use — keep in sync with each tab's `filterId`, or pass
- * `"all"` for tabs that only change layout.
- */
-
-import * as React from "react"
-import dynamic from "next/dynamic"
-import { cn } from "@/lib/utils"
-import { mailtoHref } from "@/lib/mailto"
-import { useRouter } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import { Skeleton } from "@/components/ui/skeleton"
-import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
-import {
-  ALL_DASHBOARD_CARDS,
-  DEFAULT_VISIBLE_CARDS,
-  DEFAULT_SPANS,
-  DEFAULT_CHART_TYPES,
-  loadDashboardLayout,
-  mergeDashboardLayout,
-  saveDashboardLayout,
-  type ChartType,
-  type DashboardLayout,
-} from "@/lib/data-view-dashboard-placements-layout"
-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"
-import { PlacementsBoardView, type PlacementsBoardColumnMenu } from "@/components/placements-board-view"
-import { PlacementsListView } from "@/components/placements-list-view"
-import { FolderGridView, ListPageTreePanelShell } from "@/components/data-views"
-import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
-import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
-import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
-import { AvatarInitials } from "@/components/ui/avatar"
-import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
-import { isBoardFieldActive } from "@/lib/placement-board-card-layout"
-import type { BoardCardLifecycleTabId } from "@/lib/placement-board-card-layout"
-import { TablePropertiesDrawerButton } from "@/components/table-properties"
-import type { FilterFieldDef } from "@/components/table-properties/types"
-import type { DataListViewType } from "@/lib/data-list-view"
-import {
-  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
-  type DataListDisplayOptions,
-} from "@/lib/data-list-display-options"
-import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
-import { StatusBadge } from "@/components/placements-table-cells"
-import { columnsToFilterFields } from "@/components/placements-table-columns"
-import { DataTable, DataTableToolbar } from "@/components/data-table"
-import { CountSyncer, PaginationBar } from "@/components/data-table/pagination"
-import type { DataTableExtendedProps } from "@/components/data-table"
-import type { ColumnDef, ConditionalRule } from "@/components/data-table/types"
-import { useTableState } from "@/components/data-table/use-table-state"
-import { placementsForPhase, type Placement, type Status } from "@/lib/mock/placements"
-import type { PlacementLifecycleTabId } from "@/lib/placement-lifecycle"
-import { placementKpiInsightFromRows, placementKpiMetricsFromRows } from "@/lib/mock/placements-kpi"
-
-const PlacementsDashboardChartsSection = dynamic(
-  () =>
-    import("@/components/data-view-dashboard-charts").then(mod => ({
-      default: mod.PlacementsDashboardChartsSection,
-    })),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="mx-4 mb-8 mt-2 flex flex-col gap-3 border border-border rounded-xl p-6 lg:mx-6">
-        <Skeleton className="h-7 w-48 max-w-full" />
-        <Skeleton className="min-h-[200px] w-full rounded-lg" />
-        <Skeleton className="min-h-[200px] w-full rounded-lg" />
-      </div>
-    ),
-  },
-)
-
-function DataListBoardShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  lifecycleTabId: PlacementLifecycleTabId
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-}) {
-  // Store the "open properties drawer" callback on a stable ref so the parent
-  // imperative handle can invoke it without re-rendering the whole table.
-  // `state` is freshly returned each render by useTableState; only the React
-  // setter is stable and needed here.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  const boardColumnMenu: PlacementsBoardColumnMenu = React.useMemo(
-    () => ({
-      filterableColumns: columns.filter(c => c.filter).map(c => ({ key: c.key, label: c.label })),
-      sortableColumns: columns.filter(c => c.sortable && c.sortKey).map(c => ({ key: c.key, label: c.label })),
-      groupableColumns: columns.filter(c => c.key !== "select" && c.key !== "actions").map(c => ({ key: c.key, label: c.label })),
-      groupBy: state.groupBy,
-      onAddFilter: state.addFilter,
-      onSortByField: (fieldKey, direction) => {
-        state.setSortRules(prev => {
-          const filtered = prev.filter(r => r.fieldKey !== fieldKey)
-          return [{ id: `sort-${Date.now()}`, fieldKey, direction }, ...filtered]
-        })
-      },
-      onToggleGroupBy: (fieldKey: string) => {
-        state.setGroupBy(prev => (prev === fieldKey ? null : fieldKey))
-      },
-      onOpenProperties: () => state.setSheetOpen(true),
-    }),
-    [columns, state],
-  )
-
-  return (
-    <>
-      <DataTableToolbar
-        state={state}
-        columns={columns}
-        searchable
-        renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search rows"
-        toolbarSlot={(s) => (
-          <TablePropertiesDrawerButton
-            state={s}
-            totalRows={tableData.length}
-            pagination={pagination}
-            onPaginationChange={onPaginationChange}
-            conditionalRules={conditionalRules}
-            onAddConditionalRule={onAddConditionalRule}
-            onRemoveConditionalRule={onRemoveConditionalRule}
-            onUpdateConditionalRule={onUpdateConditionalRule}
-            filterFields={filterFields}
-            currentView={view}
-            onViewChange={onViewChange}
-            lifecycleTabLabel={lifecycleDrawerLabel}
-            fieldDefinitions={fieldDefinitionsForDrawer}
-            resolveColumnLabel={resolveColumnLabel}
-            displayOptions={displayOptions}
-            onDisplayOptionsChange={onDisplayOptionsChange}
-            renderFilterOptionValue={renderFilterOptionValue}
-          />
-        )}
-      />
-      <PlacementsBoardView
-        placements={state.rows as Placement[]}
-        lifecycleTabId={lifecycleTabId}
-        boardColumnMenu={boardColumnMenu}
-        boardDisplay={{
-          lineCount: displayOptions.boardLineCount,
-          showColumnLabels: displayOptions.showColumnLabels,
-          showColumnCounts: displayOptions.showBoardColumnCounts,
-          newCardAbove: displayOptions.boardNewCardAbove,
-        }}
-        hiddenColKeys={state.hiddenCols}
-        conditionalRules={conditionalRules}
-        boardColumns={state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")}
-      />
-    </>
-  )
-}
-
-/** List / row view: shared table state + toolbar + full-width rows */
-function DataListListShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-  listRows,
-  emptyTableCopy,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  lifecycleTabId: PlacementLifecycleTabId
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-  listRows: Placement[]
-  emptyTableCopy: string
-}) {
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  return (
-    <>
-      <DataTableToolbar
-        state={state}
-        columns={columns}
-        searchable
-        renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search rows"
-        toolbarSlot={s => (
-          <TablePropertiesDrawerButton
-            state={s}
-            totalRows={tableData.length}
-            pagination={pagination}
-            onPaginationChange={onPaginationChange}
-            conditionalRules={conditionalRules}
-            onAddConditionalRule={onAddConditionalRule}
-            onRemoveConditionalRule={onRemoveConditionalRule}
-            onUpdateConditionalRule={onUpdateConditionalRule}
-            filterFields={filterFields}
-            currentView={view}
-            onViewChange={onViewChange}
-            lifecycleTabLabel={lifecycleDrawerLabel}
-            fieldDefinitions={fieldDefinitionsForDrawer}
-            resolveColumnLabel={resolveColumnLabel}
-            displayOptions={displayOptions}
-            onDisplayOptionsChange={onDisplayOptionsChange}
-            renderFilterOptionValue={renderFilterOptionValue}
-          />
-        )}
-      />
-      <PlacementsListView
-        rows={listRows}
-        lifecycleTabId={lifecycleTabId}
-        hiddenColKeys={state.hiddenCols}
-        boardColumns={state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")}
-        conditionalRules={conditionalRules}
-        emptyCopy={emptyTableCopy}
-      />
-    </>
-  )
-}
-
-/** Dashboard view tab: same toolbar + properties as list/board; KPIs from filtered rows. */
-function DataListDashboardShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-}) {
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  const dashboardKpi = React.useMemo(
-    () => ({
-      metrics: placementKpiMetricsFromRows(state.rows as Placement[]),
-      insight: placementKpiInsightFromRows(state.rows as Placement[]),
-    }),
-    [state.rows],
-  )
-
-  /* Dashboard card layout — persisted to localStorage */
-  const [visibleCards, setVisibleCards] = React.useState<string[]>(DEFAULT_VISIBLE_CARDS)
-  const [cardOrder, setCardOrder] = React.useState<string[]>(ALL_DASHBOARD_CARDS.map(c => c.id))
-  const [cardSpans, setCardSpans] = React.useState<Record<string, 1 | 2>>(() => ({ ...DEFAULT_SPANS }))
-  const [cardChartTypes, setCardChartTypes] = React.useState<Record<string, ChartType>>(() => ({ ...DEFAULT_CHART_TYPES }))
-  const [keyMetricsKpiCount, setKeyMetricsKpiCount] = React.useState<number>(KEY_METRICS_KPI_COUNT_DEFAULT)
-  const [dashboardLayoutEdit, setDashboardLayoutEdit] = React.useState(false)
-  const dashboardLayoutHydrated = React.useRef(false)
-  const dashboardLayoutEditBaselineRef = React.useRef<DashboardLayout | null>(null)
-
-  React.useEffect(() => {
-    const saved = loadDashboardLayout()
-    const m = mergeDashboardLayout(saved)
-    setVisibleCards(m.visible)
-    setCardOrder(m.order)
-    setCardSpans(m.spans ?? { ...DEFAULT_SPANS })
-    setCardChartTypes(m.chartTypes ?? { ...DEFAULT_CHART_TYPES })
-    setKeyMetricsKpiCount(m.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
-    dashboardLayoutHydrated.current = true
-  }, [])
-
-  React.useEffect(() => {
-    if (!dashboardLayoutHydrated.current) return
-    saveDashboardLayout({
-      visible: visibleCards,
-      order: cardOrder,
-      spans: cardSpans,
-      chartTypes: cardChartTypes,
-      keyMetricsKpiCount,
-    })
-  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, keyMetricsKpiCount])
-
-  const handleVisibleChange = React.useCallback((v: string[]) => {
-    setVisibleCards(v)
-  }, [])
-
-  const handleOrderChange = React.useCallback((o: string[]) => {
-    setCardOrder(o)
-  }, [])
-
-  const handleSpanChange = React.useCallback((id: string, span: 1 | 2) => {
-    setCardSpans(prev => ({ ...prev, [id]: span }))
-  }, [])
-
-  const handleChartTypeChange = React.useCallback((id: string, t: ChartType) => {
-    setCardChartTypes(prev => ({ ...prev, [id]: t }))
-  }, [])
-
-  const handleResetDashboardLayout = React.useCallback(() => {
-    setVisibleCards(ALL_DASHBOARD_CARDS.map(c => c.id))
-    setCardOrder(ALL_DASHBOARD_CARDS.map(c => c.id))
-    setCardSpans({ ...DEFAULT_SPANS })
-    setCardChartTypes({ ...DEFAULT_CHART_TYPES })
-    setKeyMetricsKpiCount(KEY_METRICS_KPI_COUNT_DEFAULT)
-  }, [])
-
-  const handleDashboardLayoutEditStart = React.useCallback(() => {
-    dashboardLayoutEditBaselineRef.current = {
-      visible: [...visibleCards],
-      order: [...cardOrder],
-      spans: { ...cardSpans },
-      chartTypes: { ...cardChartTypes },
-      keyMetricsKpiCount,
-    }
-    setDashboardLayoutEdit(true)
-  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, keyMetricsKpiCount])
-
-  const handleDashboardLayoutEditDone = React.useCallback(() => {
-    setDashboardLayoutEdit(false)
-  }, [])
-
-  const handleDashboardLayoutEditCancel = React.useCallback(() => {
-    const b = dashboardLayoutEditBaselineRef.current
-    if (b) {
-      setVisibleCards(b.visible)
-      setCardOrder(b.order)
-      setCardSpans(b.spans ?? { ...DEFAULT_SPANS })
-      setCardChartTypes(b.chartTypes ?? { ...DEFAULT_CHART_TYPES })
-      setKeyMetricsKpiCount(b.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
-    }
-    setDashboardLayoutEdit(false)
-  }, [])
-
-  const dashboardCustomizeCoach = useCoachMark({
-    flowId: "data-list-dashboard-customize",
-    steps: DASHBOARD_CUSTOMIZE_COACH_STEPS,
-    delay: 700,
-    dependsOnDismissedFlowId: "data-list-views-tour",
-  })
-
-  return (
-    <>
-      <CoachMark state={dashboardCustomizeCoach} />
-      {!dashboardLayoutEdit ? (
-        <DataTableToolbar
-          state={state}
-          columns={columns}
-          searchable={displayOptions.showToolbarSearch}
-          renderFilterOptionValue={renderFilterOptionValue}
-          searchAriaLabel="Search rows"
-          toolbarSlot={s => (
-            <TablePropertiesDrawerButton
-              state={s}
-              totalRows={tableData.length}
-              pagination={pagination}
-              onPaginationChange={onPaginationChange}
-              conditionalRules={conditionalRules}
-              onAddConditionalRule={onAddConditionalRule}
-              onRemoveConditionalRule={onRemoveConditionalRule}
-              onUpdateConditionalRule={onUpdateConditionalRule}
-              filterFields={filterFields}
-              currentView={view}
-              onViewChange={onViewChange}
-              lifecycleTabLabel={lifecycleDrawerLabel}
-              fieldDefinitions={fieldDefinitionsForDrawer}
-              resolveColumnLabel={resolveColumnLabel}
-              displayOptions={displayOptions}
-              onDisplayOptionsChange={onDisplayOptionsChange}
-              renderFilterOptionValue={renderFilterOptionValue}
-              extraActions={
-                <Tip side="bottom" label="Edit dashboard layout on canvas">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    aria-label="Edit dashboard layout"
-                    onClick={handleDashboardLayoutEditStart}
-                    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}
-
-      {/* Contextual placement charts + KPI card (customise on canvas) */}
-      <PlacementsDashboardChartsSection
-        placements={state.rows as Placement[]}
-        keyMetrics={dashboardKpi}
-        visibleCards={visibleCards}
-        cardOrder={cardOrder}
-        cardSpans={cardSpans}
-        cardChartTypes={cardChartTypes}
-        keyMetricsKpiCount={keyMetricsKpiCount}
-        layoutEditMode={dashboardLayoutEdit}
-        onVisibleChange={handleVisibleChange}
-        onOrderChange={handleOrderChange}
-        onSpanChange={handleSpanChange}
-        onChartTypeChange={handleChartTypeChange}
-        onKeyMetricsKpiCountChange={setKeyMetricsKpiCount}
-        onResetLayout={handleResetDashboardLayout}
-        onLayoutEditDone={handleDashboardLayoutEditDone}
-        onLayoutEditCancel={handleDashboardLayoutEditCancel}
-      />
-    </>
-  )
-}
-
-// ─── Placement-specific tile for FolderGridView ──────────────────────────────
-
-function PlacementFolderTile({
-  row,
-  tab,
-  hiddenColKeys,
-  boardColumns,
-  conditionalRules,
-  onClick,
-}: {
-  row: Placement
-  tab: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-  conditionalRules?: ConditionalRule[]
-  onClick: () => void
-}) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
-  const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
-  const showStatus = isBoardFieldActive("status", tab, hiddenColKeys, boardColumns)
-  const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
-  const showSpec = isBoardFieldActive("specialization", tab, hiddenColKeys, boardColumns)
-  const showProgram = isBoardFieldActive("program", tab, hiddenColKeys, boardColumns)
-  const name = showStudent ? row.student : `Placement ${row.id}`
-
-  const statusDotClass: Record<Status, string> = {
-    confirmed: "bg-success",
-    pending: "bg-warning",
-    "under-review": "bg-brand",
-    completed: "bg-muted-foreground",
-    rejected: "bg-destructive",
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`group relative flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-left hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-all duration-100 cursor-pointer select-none w-full ${ruleBg}`}
-      aria-label={`Open ${name}`}
-    >
-      <div className="relative">
-        <AvatarInitials initials={row.initials} className="size-14 rounded-full text-lg font-semibold" />
-        {showStatus && (
-          <span className="absolute -bottom-0.5 -right-1 flex size-4 items-center justify-center rounded-full bg-card ring-2 ring-card" aria-hidden="true">
-            <span className={`size-2.5 rounded-full ${statusDotClass[row.status]}`} />
-          </span>
-        )}
-      </div>
-      <p className="w-full text-center text-[13px] font-medium text-foreground leading-tight line-clamp-2">{name}</p>
-      {showStatus && <StatusBadge status={row.status} />}
-      {(showSite || showSpec || showProgram) && (
-        <div className="flex w-full flex-col gap-0.5">
-          {showSite && (
-            <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">
-              <i className="fa-light fa-building mr-1" aria-hidden="true" />{row.site}
-            </p>
-          )}
-          {showSpec && <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">{row.specialization}</p>}
-          {showProgram && <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">{row.program}</p>}
-        </div>
-      )}
-    </button>
-  )
-}
-
-
-// ─── Folder view shell ────────────────────────────────────────────────────────
-
-/** Folder / icon-grid view shell */
-function DataListFolderShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-  listRows,
-  emptyTableCopy,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  lifecycleTabId: PlacementLifecycleTabId
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-  listRows: Placement[]
-  emptyTableCopy: string
-}) {
-  const router = useRouter()
-
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
-
-  return (
-    <>
-      <DataTableToolbar
-        state={state}
-        columns={columns}
-        searchable
-        renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search rows"
-        toolbarSlot={s => (
-          <TablePropertiesDrawerButton
-            state={s}
-            totalRows={tableData.length}
-            pagination={pagination}
-            onPaginationChange={onPaginationChange}
-            conditionalRules={conditionalRules}
-            onAddConditionalRule={onAddConditionalRule}
-            onRemoveConditionalRule={onRemoveConditionalRule}
-            onUpdateConditionalRule={onUpdateConditionalRule}
-            filterFields={filterFields}
-            currentView={view}
-            onViewChange={onViewChange}
-            lifecycleTabLabel={lifecycleDrawerLabel}
-            fieldDefinitions={fieldDefinitionsForDrawer}
-            resolveColumnLabel={resolveColumnLabel}
-            displayOptions={displayOptions}
-            onDisplayOptionsChange={onDisplayOptionsChange}
-            renderFilterOptionValue={renderFilterOptionValue}
-          />
-        )}
-      />
-      <FolderGridView<Placement>
-        rows={listRows}
-        getRowId={r => r.id}
-        ariaLabel="Demo folder view"
-        emptyContent={<p>{emptyTableCopy}</p>}
-        renderTile={row => (
-          <PlacementFolderTile
-            row={row}
-            tab={lifecycleTabId as BoardCardLifecycleTabId}
-            hiddenColKeys={state.hiddenCols}
-            boardColumns={boardColumns}
-            conditionalRules={conditionalRules}
-            onClick={() => router.push(`/data-list/${row.id}`)}
-          />
-        )}
-      />
-    </>
-  )
-}
-
-// ─── Tree / outline + details shell ───────────────────────────────────────────
-
-function DataListTreeShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-  listRows,
-  emptyTableCopy,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  lifecycleTabId: PlacementLifecycleTabId
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-  listRows: Placement[]
-  emptyTableCopy: string
-}) {
-  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
-  const [selectedId, setSelectedId] = React.useState<number | null>(() => listRows[0]?.id ?? null)
-
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  React.useEffect(() => {
-    if (selectedId == null) {
-      setSelectedId(listRows[0]?.id ?? null)
-      return
-    }
-    if (!listRows.some(r => r.id === selectedId)) {
-      setSelectedId(listRows[0]?.id ?? null)
-    }
-  }, [listRows, selectedId])
-
-  const selected = listRows.find(r => r.id === selectedId) ?? null
-
-  return (
-    <>
-      <DataTableToolbar
-        state={state}
-        columns={columns}
-        searchable
-        renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search rows"
-        toolbarSlot={s => (
-          <TablePropertiesDrawerButton
-            state={s}
-            totalRows={tableData.length}
-            pagination={pagination}
-            onPaginationChange={onPaginationChange}
-            conditionalRules={conditionalRules}
-            onAddConditionalRule={onAddConditionalRule}
-            onRemoveConditionalRule={onRemoveConditionalRule}
-            onUpdateConditionalRule={onUpdateConditionalRule}
-            filterFields={filterFields}
-            currentView={view}
-            onViewChange={onViewChange}
-            lifecycleTabLabel={lifecycleDrawerLabel}
-            fieldDefinitions={fieldDefinitionsForDrawer}
-            resolveColumnLabel={resolveColumnLabel}
-            displayOptions={displayOptions}
-            onDisplayOptionsChange={onDisplayOptionsChange}
-            renderFilterOptionValue={renderFilterOptionValue}
-          />
-        )}
-      />
-      <ListPageTreePanelShell
-        resizableGroupId={`data-list-tree-${lifecycleTabId}`}
-        ariaLabel="Record outline and details"
-        tree={
-          <div className="flex min-h-0 flex-1 flex-col">
-            <ListPageTreeColumnHeader title="Records" />
-            {listRows.length === 0 ? (
-              <p className="p-3 text-sm text-muted-foreground">{emptyTableCopy}</p>
-            ) : (
-              <ul
-                role="tree"
-                aria-label="Demo records"
-                className="min-h-0 flex-1 list-none space-y-0.5 overflow-y-auto py-1"
-              >
-                {listRows.map(row => {
-                  const isSel = selectedId === row.id
-                  return (
-                    <li key={row.id} role="none" className="py-0.5">
-                      <button
-                        type="button"
-                        role="treeitem"
-                        aria-selected={isSel}
-                        tabIndex={isSel ? 0 : -1}
-                        onClick={() => setSelectedId(row.id)}
-                        className={cn(
-                          "flex w-full min-h-8 items-center rounded-md px-3 py-2 text-left text-sm transition-colors duration-75",
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-                          isSel
-                            ? "bg-accent font-medium text-accent-foreground"
-                            : "text-foreground hover:bg-muted/50",
-                        )}
-                      >
-                        <span className="min-w-0 truncate">{row.student}</span>
-                      </button>
-                    </li>
-                  )
-                })}
-              </ul>
-            )}
-          </div>
-        }
-        details={
-          selected ? (
-            <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-card">
-              <ListPageTreeColumnHeader title="Details" />
-              <div className="min-h-0 flex-1 overflow-y-auto">
-                <PlacementFinderDetail
-                  row={selected}
-                  tab={lifecycleTabId as BoardCardLifecycleTabId}
-                  hiddenColKeys={state.hiddenCols}
-                  boardColumns={boardColumns}
-                />
-              </div>
-            </div>
-          ) : (
-            <ListPageSplitDetailsPlaceholder title="Nothing selected" />
-          )
-        }
-      />
-    </>
-  )
-}
-
-// ─── Placement-specific list row for FinderPanelView ─────────────────────────
-
-function PlacementFinderListRow({
-  row,
-  isSelected,
-  tab,
-  hiddenColKeys,
-  boardColumns,
-  conditionalRules,
-}: {
-  row: Placement
-  isSelected: boolean
-  tab: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-  conditionalRules?: ConditionalRule[]
-}) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
-  const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
-  const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
-  const name = showStudent ? row.student : `Placement ${row.id}`
-
-  return (
-    <div
-      className={`flex w-full min-w-0 items-center gap-3 transition-colors duration-75 ${
-        isSelected
-          ? "bg-transparent text-accent-foreground"
-          : cn("text-foreground", ruleBg)
-      }`}
-    >
-      <AvatarInitials
-        initials={row.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")}>
-          {name}
-        </p>
-        {showSite && (
-          <p className={cn("mt-0.5 truncate text-[11px] leading-tight", isSelected ? "text-accent-foreground/80" : "text-muted-foreground")}>
-            {row.site}
-          </p>
-        )}
-      </div>
-      {!isSelected && <StatusBadge status={row.status} />}
-    </div>
-  )
-}
-
-// ─── Placement-specific detail pane for FinderPanelView ──────────────────────
-
-function PlacementFinderDetail({
-  row,
-  tab,
-  hiddenColKeys,
-  boardColumns,
-}: {
-  row: Placement
-  tab: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-}) {
-  const router = useRouter()
-  const show = (key: string) => isBoardFieldActive(key, tab, hiddenColKeys, boardColumns)
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      {/* Header */}
-      <div className="flex shrink-0 items-start gap-4 border-b border-border px-5 py-4">
-        <AvatarInitials initials={row.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">{row.student}</h2>
-          {show("program") && <p className="mt-0.5 text-[13px] text-muted-foreground">{row.program}</p>}
-          {show("status") && <div className="mt-2"><StatusBadge status={row.status} /></div>}
-        </div>
-        <Tip side="bottom" label="Open full detail page">
-          <Button type="button" variant="outline" size="sm" className="shrink-0"
-            onClick={() => router.push(`/data-list/${row.id}`)}
-            aria-label={`Open full detail for ${row.student}`}>
-            <i className="fa-light fa-arrow-up-right-from-square text-[12px]" aria-hidden="true" />
-            Open
-          </Button>
-        </Tip>
-      </div>
-
-      {/* Fields */}
-      <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">
-          {show("email") && (
-            <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(row.email)} className="text-interactive-foreground hover:underline">{row.email}</a>
-              </dd>
-            </div>
-          )}
-          {show("site") && (
-            <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-building text-[10px]" aria-hidden="true" /> Site
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.site}</dd>
-            </div>
-          )}
-          {show("internship") && (
-            <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" /> Internship
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.internship}</dd>
-            </div>
-          )}
-          {show("specialization") && (
-            <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-stethoscope text-[10px]" aria-hidden="true" /> Specialization
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.specialization}</dd>
-            </div>
-          )}
-          {show("supervisor") && (
-            <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-user-tie text-[10px]" aria-hidden="true" /> Supervisor
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.supervisor}</dd>
-            </div>
-          )}
-          {show("start") && (
-            <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-calendar text-[10px]" aria-hidden="true" /> Start Date
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.start}</dd>
-            </div>
-          )}
-          {show("duration") && (
-            <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-clock text-[10px]" aria-hidden="true" /> Duration
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.duration}</dd>
-            </div>
-          )}
-          {tab === "ongoing" && (
-            <div className="flex flex-col gap-0.5 sm:col-span-2">
-              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-                <i className="fa-light fa-chart-line text-[10px]" aria-hidden="true" /> Progress
-              </dt>
-              <dd className="text-[13px] text-foreground flex flex-col gap-1.5">
-                <span>{row.progressWeeksDone} / {row.progressWeeksTotal} weeks</span>
-                <div role="progressbar" aria-valuenow={row.progressWeeksDone} aria-valuemin={0} aria-valuemax={row.progressWeeksTotal}
-                  aria-label={`${row.progressWeeksDone} of ${row.progressWeeksTotal} weeks completed`}
-                  className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-                  <div className="h-full rounded-full bg-primary transition-all"
-                    style={{ width: `${Math.round((row.progressWeeksDone / Math.max(1, row.progressWeeksTotal)) * 100)}%` }} />
-                </div>
-              </dd>
-            </div>
-          )}
-          {row.siteAddress && (
-            <div className="flex flex-col gap-0.5 sm:col-span-2">
-              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-                <i className="fa-light fa-location-dot text-[10px]" aria-hidden="true" /> Site Address
-              </dt>
-              <dd className="text-[13px] text-foreground">{row.siteAddress}</dd>
-            </div>
-          )}
-        </dl>
-      </div>
-    </div>
-  )
-}
-
-// ─── Status groups for FinderPanelView ───────────────────────────────────────
-
-const STATUS_GROUPS: Array<{ id: Status | "all"; label: string; accent: string }> = [
-  { id: "all",          label: "All",          accent: "bg-muted-foreground" },
-  { id: "confirmed",    label: "Confirmed",    accent: "bg-success" },
-  { id: "pending",      label: "Pending",      accent: "bg-warning" },
-  { id: "under-review", label: "Under Review", accent: "bg-brand" },
-  { id: "rejected",     label: "Rejected",     accent: "bg-destructive" },
-  { id: "completed",    label: "Completed",    accent: "bg-muted-foreground/50" },
-]
-
-function buildStatusGroups(rows: Placement[]): FinderGroup[] {
-  return STATUS_GROUPS.map(sg => ({
-    id: sg.id,
-    label: sg.label,
-    accent: sg.accent,
-    count: sg.id === "all" ? rows.length : rows.filter(r => r.status === sg.id).length,
-  }))
-}
-
-// ─── Panel view shell ────────────────────────────────────────────────────────
-
-/** Finder-style panel view shell with groups, list, and detail pane */
-function DataListPanelShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-  listRows,
-  emptyTableCopy,
-  panelGroupsBuilder,
-  panelRenderListRow,
-  panelRenderDetail,
-}: {
-  state: ReturnType<typeof useTableState<Placement>>
-  openDrawerRef: React.MutableRefObject<() => void>
-  tableData: Placement[]
-  columns: ColumnDef<Placement>[]
-  lifecycleTabId: PlacementLifecycleTabId
-  view: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  pagination: boolean
-  onPaginationChange: (v: boolean) => void
-  conditionalRules: ConditionalRule[]
-  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
-  onRemoveConditionalRule: (id: string) => void
-  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
-  filterFields: FilterFieldDef[]
-  lifecycleDrawerLabel: string
-  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
-  resolveColumnLabel: (key: string) => string
-  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
-  displayOptions: DataListDisplayOptions
-  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
-  listRows: Placement[]
-  emptyTableCopy: string
-  panelGroupsBuilder?: (rows: Placement[]) => FinderGroup[]
-  panelRenderListRow?: (row: Placement, isSelected: boolean) => React.ReactNode
-  panelRenderDetail?: (row: Placement) => React.ReactNode
-}) {
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => state.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, state.setSheetOpen])
-
-  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
-  const groups = React.useMemo(
-    () => panelGroupsBuilder ? panelGroupsBuilder(listRows) : buildStatusGroups(listRows),
-    [listRows, panelGroupsBuilder],
-  )
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <DataTableToolbar
-        state={state}
-        columns={columns}
-        searchable
-        renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search rows"
-        toolbarSlot={s => (
-          <TablePropertiesDrawerButton
-            state={s}
-            totalRows={tableData.length}
-            pagination={pagination}
-            onPaginationChange={onPaginationChange}
-            conditionalRules={conditionalRules}
-            onAddConditionalRule={onAddConditionalRule}
-            onRemoveConditionalRule={onRemoveConditionalRule}
-            onUpdateConditionalRule={onUpdateConditionalRule}
-            filterFields={filterFields}
-            currentView={view}
-            onViewChange={onViewChange}
-            lifecycleTabLabel={lifecycleDrawerLabel}
-            fieldDefinitions={fieldDefinitionsForDrawer}
-            resolveColumnLabel={resolveColumnLabel}
-            displayOptions={displayOptions}
-            onDisplayOptionsChange={onDisplayOptionsChange}
-            renderFilterOptionValue={renderFilterOptionValue}
-          />
-        )}
-      />
-      <ListPageSplitHubChrome aria-label={lifecycleDrawerLabel}>
-        <FinderPanelView<Placement>
-          embedded
-          groupsColumnTitle="Status"
-          groups={groups}
-          rows={listRows}
-          getRowId={r => r.id}
-          getRowGroupId={r => r.status}
-          defaultGroupId="all"
-          autoSaveId="finder-panel-view"
-          ariaLabel="Demo panel view"
-          emptyList={<p>{emptyTableCopy}</p>}
-          renderListRow={
-            panelRenderListRow
-              ? panelRenderListRow
-              : (row, isSelected) => (
-                  <PlacementFinderListRow
-                    row={row}
-                    isSelected={isSelected}
-                    tab={lifecycleTabId as BoardCardLifecycleTabId}
-                    hiddenColKeys={state.hiddenCols}
-                    boardColumns={boardColumns}
-                    conditionalRules={conditionalRules}
-                  />
-                )
-          }
-          renderDetail={
-            panelRenderDetail
-              ? panelRenderDetail
-              : row => (
-                  <PlacementFinderDetail
-                    row={row}
-                    tab={lifecycleTabId as BoardCardLifecycleTabId}
-                    hiddenColKeys={state.hiddenCols}
-                    boardColumns={boardColumns}
-                  />
-                )
-          }
-        />
-      </ListPageSplitHubChrome>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Props
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface PlacementsTableProps {
-  view?: DataListViewType
-  onViewChange?: (view: DataListViewType) => void
-  /** Demo row segment: drives filtered rows + column set (`all` | `upcoming` | `ongoing` | `completed`). */
-  lifecycleTabId?: PlacementLifecycleTabId
-  /** Shared display options (persist at page level — all view types). */
-  displayOptions?: DataListDisplayOptions
-  onDisplayOptionsChange?: (patch: Partial<DataListDisplayOptions>) => void
-  /** Lifecycle column set from the placements page (e.g. `getPlacementColumnsForLifecycle`). */
-  getColumnsForLifecycle: (tab: PlacementLifecycleTabId) => ColumnDef<Placement>[]
-  /** Empty-state copy for the active lifecycle tab — from the page. */
-  emptyTableCopy: string
-  /** Table Properties drawer lifecycle label — from the page. */
-  lifecycleDrawerLabel: string
-  /** Panel view: custom groups builder. If not provided, uses default placement status groups. */
-  panelGroupsBuilder?: (rows: Placement[]) => FinderGroup[]
-  /** Panel view: custom list row renderer. If not provided, uses default placement row rendering. */
-  panelRenderListRow?: (row: Placement, isSelected: boolean) => React.ReactNode
-  /** Panel view: custom detail pane renderer. If not provided, uses default placement detail rendering. */
-  panelRenderDetail?: (row: Placement) => React.ReactNode
-}
-
-/** Imperative handle — open Table Properties (table view only). */
-export type PlacementsTableHandle = OpenTablePropertiesHandle
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main component
-// ─────────────────────────────────────────────────────────────────────────────
-
-export const PlacementsTable = React.forwardRef<PlacementsTableHandle, PlacementsTableProps>(function PlacementsTable({
-  view = "table",
-  onViewChange,
-  lifecycleTabId = "all",
-  displayOptions: displayOptionsProp,
-  onDisplayOptionsChange,
-  getColumnsForLifecycle,
-  emptyTableCopy,
-  lifecycleDrawerLabel,
-  panelGroupsBuilder,
-  panelRenderListRow,
-  panelRenderDetail,
-}, ref) {
-  const displayOptions = React.useMemo(
-    () => ({ ...DEFAULT_DATA_LIST_DISPLAY_OPTIONS, ...displayOptionsProp }),
-    [displayOptionsProp],
-  )
-
-  const patchDisplayOptions = React.useCallback(
-    (patch: Partial<DataListDisplayOptions>) => {
-      onDisplayOptionsChange?.(patch)
-    },
-    [onDisplayOptionsChange],
-  )
-  const openDrawerRef = React.useRef<() => void>(() => {})
-
-  React.useImperativeHandle(ref, () => ({
-    openPropertiesDrawer: () => {
-      openDrawerRef.current()
-    },
-  }), [])
-
-  const router = useRouter()
-  const [pagination, setPagination] = React.useState(false)
-
-  const columns = React.useMemo(
-    () => getColumnsForLifecycle(lifecycleTabId),
-    [getColumnsForLifecycle, lifecycleTabId],
-  )
-
-  const tableData = React.useMemo(
-    () => placementsForPhase(lifecycleTabId),
-    [lifecycleTabId],
-  )
-
-  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
-
-  const fieldDefinitionsForDrawer = React.useMemo(
-    () => columns
-      .filter(c => c.key !== "select" && c.key !== "actions")
-      .map(c => ({
-        key: c.key,
-        label: c.label,
-        sortable: !!(c.sortable && c.sortKey),
-      })),
-    [columns],
-  )
-
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
-
-  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
-
-  function addConditionalRule(rule: Omit<ConditionalRule, "id">) {
-    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
-  }
-  function removeConditionalRule(id: string) {
-    setConditionalRules(prev => prev.filter(r => r.id !== id))
-  }
-  function updateConditionalRule(id: string, patch: Partial<ConditionalRule>) {
-    setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
-  }
-
-  const renderFilterOptionValue = React.useCallback(
-    (fieldKey: string, value: string): React.ReactNode => {
-      if (fieldKey === "status") return <StatusBadge status={value as Status} />
-      const col = columns.find(c => c.key === fieldKey)
-      const opt = col?.filter?.options?.find(o => o.value === value)
-      return <span className="text-foreground">{opt?.label ?? value}</span>
-    },
-    [columns],
-  )
-
-  const [paginationPage, setPaginationPage] = React.useState(1)
-  const [paginationPageSize, setPaginationPageSize] = React.useState(10)
-  const [filteredCount, setFilteredCount] = React.useState(tableData.length)
-
-  React.useEffect(() => {
-    setFilteredCount(tableData.length)
-  }, [tableData])
-
-  const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, paginationPageSize)))
-  const safePage = Math.min(paginationPage, totalPages)
-  const paginationOverride =
-    pagination && view !== "board" && view !== "dashboard" && view !== "folder" && view !== "panel" && view !== "tree-panel"
-      ? { page: safePage, pageSize: paginationPageSize }
-      : undefined
-
-  const tableState = useTableState(tableData, columns, { key: "student", dir: "asc" }, paginationOverride)
-
-  // Stable "open properties drawer" callback ref — see top of this file.
-  React.useEffect(() => {
-    openDrawerRef.current = () => tableState.setSheetOpen(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openDrawerRef, tableState.setSheetOpen])
-
-  function buildToolbarSlot(
-    s: ReturnType<typeof useTableState<Placement>>,
-  ): React.ReactNode {
-    return (
-      <TablePropertiesDrawerButton
-        state={s}
-        totalRows={tableData.length}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        currentView={view}
-        onViewChange={onViewChange}
-        lifecycleTabLabel={lifecycleDrawerLabel}
-        fieldDefinitions={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-        renderFilterOptionValue={renderFilterOptionValue}
-      />
-    )
-  }
-
-  function bulkActionsSlot(selected: Set<string | number>, _rows: Placement[]): React.ReactNode {
-    const count = selected.size
-    const contextId = "bulk-selection-context"
-    return (
-      <>
-        <span id={contextId} className="sr-only">
-          {count} {count === 1 ? "row" : "rows"} selected
-        </span>
-        <Button size="sm" variant="default" aria-describedby={contextId}>
-          <i className="fa-light fa-circle-check" aria-hidden="true" /> Confirm
-        </Button>
-        <Button size="sm" variant="outline" aria-describedby={contextId}>
-          <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" /> Export
-        </Button>
-        <Button size="sm" variant="destructive" aria-describedby={contextId}>
-          <i className="fa-light fa-trash" aria-hidden="true" /> Delete
-        </Button>
-      </>
-    )
-  }
-
-  const tableProps: DataTableExtendedProps<Placement> = {
-    data: tableData,
-    columns,
-    getRowId: (row: Placement) => row.id,
-    getRowSelectionLabel: (row: Placement) => row.student,
-    selectable: true,
-    searchable: displayOptions.showToolbarSearch,
-    showColumnHeaders: displayOptions.showColumnLabels,
-    defaultSort: { key: "student" as const, dir: "asc" as const },
-    emptyState: emptyTableCopy,
-    toolbarSlot: buildToolbarSlot,
-    bulkActionsSlot,
-    renderFilterOptionValue,
-    conditionalRules,
-    onRowClick: (row: Placement) => router.push(`/data-list/${row.id}`),
-    state: tableState,
-  }
-
-  if (view === "board") {
-    return (
-      <DataListBoardShell
-        state={tableState}
-        openDrawerRef={openDrawerRef}
-        tableData={tableData}
-        columns={columns}
-        lifecycleTabId={lifecycleTabId}
-        view={view}
-        onViewChange={onViewChange}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        lifecycleDrawerLabel={lifecycleDrawerLabel}
-        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        renderFilterOptionValue={renderFilterOptionValue}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-      />
-    )
-  }
-
-  if (view === "dashboard") {
-    return (
-      <DataListDashboardShell
-        state={tableState}
-        openDrawerRef={openDrawerRef}
-        tableData={tableData}
-        columns={columns}
-        view={view}
-        onViewChange={onViewChange}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        lifecycleDrawerLabel={lifecycleDrawerLabel}
-        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        renderFilterOptionValue={renderFilterOptionValue}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-      />
-    )
-  }
-
-  if (view === "list") {
-    return (
-      <React.Fragment key={lifecycleTabId}>
-        {pagination ? (
-          <CountSyncer
-            count={tableState.rows.length}
-            onSync={setFilteredCount}
-            onReset={() => setPaginationPage(1)}
-          />
-        ) : null}
-        <DataListListShell
-          state={tableState}
-          openDrawerRef={openDrawerRef}
-          tableData={tableData}
-          columns={columns}
-          lifecycleTabId={lifecycleTabId}
-          view={view}
-          onViewChange={onViewChange}
-          pagination={pagination}
-          onPaginationChange={setPagination}
-          conditionalRules={conditionalRules}
-          onAddConditionalRule={addConditionalRule}
-          onRemoveConditionalRule={removeConditionalRule}
-          onUpdateConditionalRule={updateConditionalRule}
-          filterFields={filterFields}
-          lifecycleDrawerLabel={lifecycleDrawerLabel}
-          fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-          resolveColumnLabel={resolveColumnLabel}
-          renderFilterOptionValue={renderFilterOptionValue}
-          displayOptions={displayOptions}
-          onDisplayOptionsChange={patchDisplayOptions}
-          listRows={pagination ? tableState.pagedRows : tableState.rows}
-          emptyTableCopy={emptyTableCopy}
-        />
-        {pagination ? (
-          <div className="mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden">
-            <PaginationBar
-              page={safePage}
-              pageSize={paginationPageSize}
-              total={filteredCount}
-              pageSizeOptions={[10, 25, 50, 100]}
-              onPageChange={setPaginationPage}
-              onPageSizeChange={n => {
-                setPaginationPageSize(n)
-                setPaginationPage(1)
-              }}
-            />
-          </div>
-        ) : null}
-      </React.Fragment>
-    )
-  }
-
-  if (view === "folder") {
-    return (
-      <DataListFolderShell
-        key={lifecycleTabId}
-        state={tableState}
-        openDrawerRef={openDrawerRef}
-        tableData={tableData}
-        columns={columns}
-        lifecycleTabId={lifecycleTabId}
-        view={view}
-        onViewChange={onViewChange}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        lifecycleDrawerLabel={lifecycleDrawerLabel}
-        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        renderFilterOptionValue={renderFilterOptionValue}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-        listRows={tableState.rows}
-        emptyTableCopy={emptyTableCopy}
-      />
-    )
-  }
-
-  if (view === "tree-panel") {
-    return (
-      <DataListTreeShell
-        key={lifecycleTabId}
-        state={tableState}
-        openDrawerRef={openDrawerRef}
-        tableData={tableData}
-        columns={columns}
-        lifecycleTabId={lifecycleTabId}
-        view={view}
-        onViewChange={onViewChange}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        lifecycleDrawerLabel={lifecycleDrawerLabel}
-        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        renderFilterOptionValue={renderFilterOptionValue}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-        listRows={tableState.rows}
-        emptyTableCopy={emptyTableCopy}
-      />
-    )
-  }
-
-  if (view === "panel") {
-    return (
-      <DataListPanelShell
-        key={lifecycleTabId}
-        state={tableState}
-        openDrawerRef={openDrawerRef}
-        tableData={tableData}
-        columns={columns}
-        lifecycleTabId={lifecycleTabId}
-        view={view}
-        onViewChange={onViewChange}
-        pagination={pagination}
-        onPaginationChange={setPagination}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={addConditionalRule}
-        onRemoveConditionalRule={removeConditionalRule}
-        onUpdateConditionalRule={updateConditionalRule}
-        filterFields={filterFields}
-        lifecycleDrawerLabel={lifecycleDrawerLabel}
-        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
-        resolveColumnLabel={resolveColumnLabel}
-        renderFilterOptionValue={renderFilterOptionValue}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patchDisplayOptions}
-        listRows={tableState.rows}
-        emptyTableCopy={emptyTableCopy}
-        panelGroupsBuilder={panelGroupsBuilder}
-        panelRenderListRow={panelRenderListRow}
-        panelRenderDetail={panelRenderDetail}
-      />
-    )
-  }
-
-  if (pagination) {
-    return (
-      <React.Fragment key={lifecycleTabId}>
-        <CountSyncer
-          count={tableState.rows.length}
-          onSync={setFilteredCount}
-          onReset={() => setPaginationPage(1)}
-        />
-        <DataTable<Placement> {...tableProps} hasFooter />
-        <div className="mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden">
-          <PaginationBar
-            page={safePage}
-            pageSize={paginationPageSize}
-            total={filteredCount}
-            pageSizeOptions={[10, 25, 50, 100]}
-            onPageChange={setPaginationPage}
-            onPageSizeChange={n => {
-              setPaginationPageSize(n)
-              setPaginationPage(1)
-            }}
-          />
-        </div>
-      </React.Fragment>
-    )
-  }
-
-  return <DataTable<Placement> key={lifecycleTabId} {...tableProps} />
-})
-
-PlacementsTable.displayName = "PlacementsTable"
-
-
-export type { DataListViewType } from "@/lib/data-list-view"
-export { DATA_LIST_VIEW_TILES } from "@/lib/data-list-view"
-export type { DataListDisplayOptions } from "@/lib/data-list-display-options"