@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/placements-table.tsx

@@ -1,29 +1,30 @@
 "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 / …).
+ * PlacementsTable — placements hub composed on top of the centralized `<HubTable>`. Owns:
+ * placement-specific column defs / cells, board/list/folder/tree/panel/dashboard renderers,
+ * pagination chrome wrapping the table + list views, and the dashboard layout state.
  *
- * 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`.
+ * Single dataset rule: `HubTable` runs one `useTableState(rows, columns, …)`. Every renderer
+ * (board, list, folder, tree, panel, dashboard) reads `state.rows`/`state.pagedRows` — the same
+ * filtered/sorted/paged bag as the grid.
  *
- * 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.
+ * View tabs drive `view` (table | list | board | …). One canonical column set + row bag —
+ * lifecycle segmentation has been removed; every tab sees the same placements.
  */
 
 import * as React from "react"
 import dynamic from "next/dynamic"
+import { useRouter } from "next/navigation"
 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 { AvatarInitials } from "@/components/ui/avatar"
+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 { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
 import {
   ALL_DASHBOARD_CARDS,
@@ -36,38 +37,48 @@ import {
   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 {
+  PlacementListRowContent,
+  PLACEMENT_LIST_ESTIMATE_ROW_PX,
+  PLACEMENT_LIST_VIRTUAL_ROWS_THRESHOLD,
+} from "@/components/placements-list-view"
+import {
+  FolderGridView,
+  ListPageTreePanelShell,
+  HubTable,
+  type HubTableHandle,
+  type HubTableRenderers,
+  type HubTableRendererArgs,
+} from "@/components/data-views"
+import { DataRowList } from "@/components/data-views/data-row-list"
 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 { ALL_PLACEMENTS, type Placement, type Status } from "@/lib/mock/placements"
+import {
+  getPlacementColumns,
+  PLACEMENT_DRAWER_LABEL,
+  PLACEMENT_EMPTY_COPY,
+} from "@/components/placements-table-columns"
 import { placementKpiInsightFromRows, placementKpiMetricsFromRows } from "@/lib/mock/placements-kpi"
+import { PLACEMENTS_SUPPORTED_VIEWS } from "@/lib/placements-supported-views"
+
+// ─── Dynamic dashboard charts section (heavy; loaded only on dashboard tab) ──
 
 const PlacementsDashboardChartsSection = dynamic(
   () =>
@@ -86,463 +97,27 @@ const PlacementsDashboardChartsSection = dynamic(
   },
 )
 
-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 showStudent = isBoardFieldActive("student", hiddenColKeys, boardColumns)
+  const showStatus = isBoardFieldActive("status", hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", hiddenColKeys, boardColumns)
+  const showSpec = isBoardFieldActive("specialization", hiddenColKeys, boardColumns)
+  const showProgram = isBoardFieldActive("program", hiddenColKeys, boardColumns)
   const name = showStudent ? row.student : `Placement ${row.id}`
 
   const statusDotClass: Record<Status, string> = {
@@ -574,7 +149,7 @@ function PlacementFolderTile({
         <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}
+              <i className="fa-light fa-building me-1" aria-hidden="true" />{row.site}
             </p>
           )}
           {showSpec && <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">{row.specialization}</p>}
@@ -585,351 +160,68 @@ function PlacementFolderTile({
   )
 }
 
+// ─── Placement-specific list row for FinderPanelView ─────────────────────────
 
-// ─── Folder view shell ────────────────────────────────────────────────────────
-
-/** Folder / icon-grid view shell */
-function DataListFolderShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
+function PlacementFinderListRow({
+  row,
+  isSelected,
+  hiddenColKeys,
+  boardColumns,
   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
+  row: Placement
+  isSelected: boolean
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
+  conditionalRules?: ConditionalRule[]
 }) {
-  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")
-
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
+  const showStudent = isBoardFieldActive("student", hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", hiddenColKeys, boardColumns)
+  const name = showStudent ? row.student : `Placement ${row.id}`
   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}
-          />
+    <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" : "",
         )}
       />
-      <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}`)}
-          />
+      <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>
   )
 }
 
-// ─── Tree / outline + details shell ───────────────────────────────────────────
+// ─── Placement-specific detail pane for FinderPanelView ──────────────────────
 
-function DataListTreeShell({
-  state,
-  openDrawerRef,
-  tableData,
-  columns,
-  lifecycleTabId,
-  view,
-  onViewChange,
-  pagination,
-  onPaginationChange,
-  conditionalRules,
-  onAddConditionalRule,
-  onRemoveConditionalRule,
-  onUpdateConditionalRule,
-  filterFields,
-  lifecycleDrawerLabel,
-  fieldDefinitionsForDrawer,
-  resolveColumnLabel,
-  renderFilterOptionValue,
-  displayOptions,
-  onDisplayOptionsChange,
-  listRows,
-  emptyTableCopy,
+function PlacementFinderDetail({
+  row,
+  hiddenColKeys,
+  boardColumns,
 }: {
-  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>[]
+  row: Placement
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
 }) {
   const router = useRouter()
-  const show = (key: string) => isBoardFieldActive(key, tab, hiddenColKeys, boardColumns)
-
+  const show = (key: string) => isBoardFieldActive(key, 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">
@@ -938,16 +230,19 @@ function PlacementFinderDetail({
           {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"
+          <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}`}>
+            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") && (
@@ -1008,7 +303,7 @@ function PlacementFinderDetail({
               <dd className="text-[13px] text-foreground">{row.duration}</dd>
             </div>
           )}
-          {tab === "ongoing" && (
+          {row.placementPhase === "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
@@ -1041,12 +336,12 @@ function PlacementFinderDetail({
 // ─── 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: "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" },
+  { id: "rejected", label: "Rejected", accent: "bg-destructive" },
+  { id: "completed", label: "Completed", accent: "bg-muted-foreground/50" },
 ]
 
 function buildStatusGroups(rows: Placement[]): FinderGroup[] {
@@ -1058,166 +353,290 @@ function buildStatusGroups(rows: Placement[]): FinderGroup[] {
   }))
 }
 
-// ─── Panel view shell ────────────────────────────────────────────────────────
+// ─── Tree-view body (its own selection state) ────────────────────────────────
+
+function PlacementsTreeBody({
+  args,
+}: {
+  args: HubTableRendererArgs<Placement>
+}) {
+  const { state } = args
+  const listRows = state.rows as Placement[]
+  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+  const [selectedId, setSelectedId] = React.useState<number | null>(() => listRows[0]?.id ?? null)
+
+  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 (
+    <ListPageTreePanelShell
+      resizableGroupId="data-list-tree"
+      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">{PLACEMENT_EMPTY_COPY}</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}
+                hiddenColKeys={state.hiddenCols}
+                boardColumns={boardColumns}
+              />
+            </div>
+          </div>
+        ) : (
+          <ListPageSplitDetailsPlaceholder title="Nothing selected" />
+        )
+      }
+    />
+  )
+}
+
+// ─── Dashboard body (its own layout state) ───────────────────────────────────
 
-/** Finder-style panel view shell with groups, list, and detail pane */
-function DataListPanelShell({
-  state,
-  openDrawerRef,
-  tableData,
+function PlacementsDashboardBody({
+  args,
   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[]
+  args: HubTableRendererArgs<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 { state, drawerToolbarProps, displayOptions } = args
+  const rows = state.rows as Placement[]
 
-  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
-  const groups = React.useMemo(
-    () => panelGroupsBuilder ? panelGroupsBuilder(listRows) : buildStatusGroups(listRows),
-    [listRows, panelGroupsBuilder],
+  const dashboardKpi = React.useMemo(
+    () => ({
+      metrics: placementKpiMetricsFromRows(rows),
+      insight: placementKpiInsightFromRows(rows),
+    }),
+    [rows],
   )
 
+  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 [layoutEdit, setLayoutEdit] = React.useState(false)
+  const hydrated = React.useRef(false)
+  const baselineRef = 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)
+    hydrated.current = true
+  }, [])
+
+  React.useEffect(() => {
+    if (!hydrated.current) return
+    saveDashboardLayout({
+      visible: visibleCards,
+      order: cardOrder,
+      spans: cardSpans,
+      chartTypes: cardChartTypes,
+      keyMetricsKpiCount,
+    })
+  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, keyMetricsKpiCount])
+
+  const onResetLayout = 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 onLayoutEditStart = React.useCallback(() => {
+    baselineRef.current = {
+      visible: [...visibleCards],
+      order: [...cardOrder],
+      spans: { ...cardSpans },
+      chartTypes: { ...cardChartTypes },
+      keyMetricsKpiCount,
+    }
+    setLayoutEdit(true)
+  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, keyMetricsKpiCount])
+
+  const onLayoutEditCancel = React.useCallback(() => {
+    const b = baselineRef.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)
+    }
+    setLayoutEdit(false)
+  }, [])
+
+  const coach = useCoachMark({
+    flowId: "data-list-dashboard-customize",
+    steps: DASHBOARD_CUSTOMIZE_COACH_STEPS,
+    delay: 700,
+    dependsOnDismissedFlowId: "data-list-views-tour",
+  })
+
   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}
-                  />
-                )
-          }
+    <>
+      <CoachMark state={coach} />
+      {!layoutEdit ? (
+        <DataTableToolbar
+          state={state}
+          columns={columns}
+          searchable={displayOptions.showToolbarSearch}
+          renderFilterOptionValue={drawerToolbarProps.renderFilterOptionValue}
+          searchAriaLabel="Search rows"
+          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>
+              }
+            />
+          )}
         />
-      </ListPageSplitHubChrome>
-    </div>
+      ) : null}
+      <PlacementsDashboardChartsSection
+        placements={rows}
+        keyMetrics={dashboardKpi}
+        visibleCards={visibleCards}
+        cardOrder={cardOrder}
+        cardSpans={cardSpans}
+        cardChartTypes={cardChartTypes}
+        keyMetricsKpiCount={keyMetricsKpiCount}
+        layoutEditMode={layoutEdit}
+        onVisibleChange={setVisibleCards}
+        onOrderChange={setCardOrder}
+        onSpanChange={(id, span) => setCardSpans(prev => ({ ...prev, [id]: span }))}
+        onChartTypeChange={(id, t) => setCardChartTypes(prev => ({ ...prev, [id]: t }))}
+        onKeyMetricsKpiCountChange={setKeyMetricsKpiCount}
+        onResetLayout={onResetLayout}
+        onLayoutEditDone={() => setLayoutEdit(false)}
+        onLayoutEditCancel={onLayoutEditCancel}
+      />
+    </>
+  )
+}
+
+// ─── Board renderer body ─────────────────────────────────────────────────────
+
+function PlacementsBoardBody({
+  args,
+}: {
+  args: HubTableRendererArgs<Placement>
+}) {
+  const { state, displayOptions, drawerToolbarProps } = args
+  const columns = state.displayCols
+  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 (
+    <PlacementsBoardView
+      placements={state.rows as Placement[]}
+      boardColumnMenu={boardColumnMenu}
+      boardDisplay={{
+        lineCount: displayOptions.boardLineCount,
+        showColumnLabels: displayOptions.showColumnLabels,
+        showColumnCounts: displayOptions.showBoardColumnCounts,
+        newCardAbove: displayOptions.boardNewCardAbove,
+      }}
+      hiddenColKeys={state.hiddenCols}
+      conditionalRules={drawerToolbarProps.conditionalRules}
+      boardColumns={state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")}
+    />
   )
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Props
-// ─────────────────────────────────────────────────────────────────────────────
+// ─── 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. */
@@ -1227,86 +646,30 @@ export interface PlacementsTableProps {
 }
 
 /** Imperative handle — open Table Properties (table view only). */
-export type PlacementsTableHandle = OpenTablePropertiesHandle
+export type PlacementsTableHandle = HubTableHandle
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Main component
-// ─────────────────────────────────────────────────────────────────────────────
+// ─── Public 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) {
+export const PlacementsTable = React.forwardRef<PlacementsTableHandle, PlacementsTableProps>(function PlacementsTable(
+  {
+    view = "table",
+    onViewChange,
+    displayOptions: displayOptionsProp,
+    onDisplayOptionsChange,
+    panelGroupsBuilder,
+    panelRenderListRow,
+    panelRenderDetail,
+  },
+  ref,
+) {
+  const router = useRouter()
   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 columns = React.useMemo(() => getPlacementColumns(), [])
+  const tableData = ALL_PLACEMENTS
 
   const renderFilterOptionValue = React.useCallback(
     (fieldKey: string, value: string): React.ReactNode => {
@@ -1318,6 +681,8 @@ export const PlacementsTable = React.forwardRef<PlacementsTableHandle, Placement
     [columns],
   )
 
+  // ─ Pagination chrome (only TABLE + LIST views) ────────────────────────────
+  const [pagination, setPagination] = React.useState(false)
   const [paginationPage, setPaginationPage] = React.useState(1)
   const [paginationPageSize, setPaginationPageSize] = React.useState(10)
   const [filteredCount, setFilteredCount] = React.useState(tableData.length)
@@ -1328,171 +693,196 @@ export const PlacementsTable = React.forwardRef<PlacementsTableHandle, Placement
 
   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)
+  // Pagination only applies to TABLE + LIST views (board/dashboard/folder/panel/tree-panel
+  // are not paged). Cards/boards consume `state.rows` directly.
+  const paginationEligible = view === "table" || view === "list"
+  const paginationOverride =
+    pagination && paginationEligible ? { page: safePage, pageSize: paginationPageSize } : undefined
 
-  // 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])
+  const onPageSizeChange = React.useCallback((n: number) => {
+    setPaginationPageSize(n)
+    setPaginationPage(1)
+  }, [])
 
-  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}
-      />
-    )
+  // Renderers --------------------------------------------------------------
+  const renderers: HubTableRenderers<Placement> = {
+    "board-with-toolbar": (args) =>
+      args.toolbarShell(<PlacementsBoardBody args={args} />),
+    "list-with-toolbar": (args) => {
+      const { state, toolbarShell } = args
+      const listRows = pagination ? (state.pagedRows as Placement[]) : (state.rows as Placement[])
+      const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+      return (
+        <>
+          {pagination ? (
+            <CountSyncer
+              count={state.rows.length}
+              onSync={setFilteredCount}
+              onReset={() => setPaginationPage(1)}
+            />
+          ) : null}
+          {toolbarShell(
+            <>
+              <DataRowList<Placement>
+                rows={listRows}
+                getRowId={row => row.id}
+                ariaLabel="Placements"
+                emptyState={PLACEMENT_EMPTY_COPY}
+                virtualizeThreshold={PLACEMENT_LIST_VIRTUAL_ROWS_THRESHOLD}
+                estimatedRowHeight={PLACEMENT_LIST_ESTIMATE_ROW_PX}
+                renderRow={row => (
+                  <PlacementListRowContent
+                    row={row}
+                    hiddenColKeys={state.hiddenCols}
+                    boardColumns={boardColumns}
+                    conditionalRules={args.drawerToolbarProps.conditionalRules}
+                    onOpen={id => router.push(`/data-list/${id}`)}
+                  />
+                )}
+              />
+              {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={onPageSizeChange}
+                  />
+                </div>
+              ) : null}
+            </>,
+          )}
+        </>
+      )
+    },
+    "folder-with-toolbar": (args) => {
+      const { state, toolbarShell } = args
+      const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+      return toolbarShell(
+        <FolderGridView<Placement>
+          rows={state.rows as Placement[]}
+          getRowId={r => r.id}
+          ariaLabel="Demo folder view"
+          emptyContent={<p>{PLACEMENT_EMPTY_COPY}</p>}
+          renderTile={row => (
+            <PlacementFolderTile
+              row={row}
+              hiddenColKeys={state.hiddenCols}
+              boardColumns={boardColumns}
+              onClick={() => router.push(`/data-list/${row.id}`)}
+            />
+          )}
+        />,
+      )
+    },
+    "tree-panel-with-toolbar": (args) =>
+      args.toolbarShell(<PlacementsTreeBody args={args} />),
+    "panel-with-toolbar": (args) => {
+      const { state, toolbarShell } = args
+      const listRows = state.rows as Placement[]
+      const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+      const groups = panelGroupsBuilder ? panelGroupsBuilder(listRows) : buildStatusGroups(listRows)
+      return toolbarShell(
+        <ListPageSplitHubChrome aria-label={PLACEMENT_DRAWER_LABEL}>
+          <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>{PLACEMENT_EMPTY_COPY}</p>}
+            renderListRow={
+              panelRenderListRow
+                ? panelRenderListRow
+                : (row, isSelected) => (
+                    <PlacementFinderListRow
+                      row={row}
+                      isSelected={isSelected}
+                      hiddenColKeys={state.hiddenCols}
+                      boardColumns={boardColumns}
+                    />
+                  )
+            }
+            renderDetail={
+              panelRenderDetail
+                ? panelRenderDetail
+                : row => (
+                    <PlacementFinderDetail
+                      row={row}
+                      hiddenColKeys={state.hiddenCols}
+                      boardColumns={boardColumns}
+                    />
+                  )
+            }
+          />
+        </ListPageSplitHubChrome>,
+      )
+    },
+    "dashboard-with-toolbar": (args) => <PlacementsDashboardBody args={args} columns={columns} />,
   }
 
-  function bulkActionsSlot(selected: Set<string | number>, _rows: Placement[]): React.ReactNode {
-    const count = selected.size
-    const contextId = "bulk-selection-context"
+  // Custom `tableRenderer` so pagination chrome (CountSyncer + PaginationBar) wraps the
+  // default DataTable when `pagination` is on. When off, falls back to a plain DataTable.
+  const tableRenderer = (args: HubTableRendererArgs<Placement>) => {
+    const { state } = args
     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}
+            count={state.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}
-        />
+        <div className="pb-6">
+          <DataTable<Placement>
+            data={tableData}
+            columns={columns}
+            getRowId={row => row.id}
+            getRowSelectionLabel={row => row.student}
+            selectable
+            searchable={displayOptions.showToolbarSearch}
+            showColumnHeaders={displayOptions.showColumnLabels}
+            defaultSort={{ key: "student" as const, dir: "asc" as const }}
+            emptyState={PLACEMENT_EMPTY_COPY}
+            renderFilterOptionValue={renderFilterOptionValue}
+            conditionalRules={args.drawerToolbarProps.conditionalRules}
+            onRowClick={row => router.push(`/data-list/${row.id}`)}
+            state={state}
+            hasFooter={pagination}
+            toolbarSlot={s => (
+              <TablePropertiesDrawerButton {...args.drawerToolbarProps} state={s} />
+            )}
+            bulkActionsSlot={(selected) => {
+              const count = selected.size
+              if (count === 0) return null
+              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>
+                </>
+              )
+            }}
+          />
+        </div>
         {pagination ? (
           <div className="mx-4 lg:mx-6 border-x border-b border-border rounded-b-lg overflow-hidden">
             <PaginationBar
@@ -1501,142 +891,44 @@ export const PlacementsTable = React.forwardRef<PlacementsTableHandle, Placement
               total={filteredCount}
               pageSizeOptions={[10, 25, 50, 100]}
               onPageChange={setPaginationPage}
-              onPageSizeChange={n => {
-                setPaginationPageSize(n)
-                setPaginationPage(1)
-              }}
+              onPageSizeChange={onPageSizeChange}
             />
           </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} />
+  return (
+    <HubTable<Placement>
+      rows={tableData}
+      columns={columns}
+      view={view}
+      onViewChange={onViewChange}
+      supportedViewTypes={PLACEMENTS_SUPPORTED_VIEWS}
+      hubLabel={PLACEMENT_DRAWER_LABEL}
+      lifecycleTabLabel={PLACEMENT_DRAWER_LABEL}
+      searchAriaLabel="Search rows"
+      getRowId={row => row.id}
+      getRowSelectionLabel={row => row.student}
+      defaultSort={{ key: "student", dir: "asc" }}
+      emptyState={PLACEMENT_EMPTY_COPY}
+      onRowClick={row => router.push(`/data-list/${row.id}`)}
+      displayOptions={displayOptions}
+      onDisplayOptionsChange={onDisplayOptionsChange}
+      pagination={pagination}
+      onPaginationChange={setPagination}
+      paginationOverride={paginationOverride}
+      renderFilterOptionValue={renderFilterOptionValue}
+      renderers={renderers}
+      tableRenderer={tableRenderer}
+      handleRef={ref}
+    />
+  )
 })
 
 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"