@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/team-table.tsx

@@ -1,12 +1,15 @@
 "use client"
 
 /**
- * Team roster — DataTable + TablePropertiesDrawer + table/list/board/panel/dashboard (shared `tableState.rows`).
- * Dashboard view uses `TeamDashboardChartsSection` (customise on canvas) + lib/mock/team-kpi.
- * Panel view uses `FinderPanelView` with status-based groups (Active, Away, Invited).
+ * Team roster — thin wrapper around the centralized `<HubTable>`. Owns only the column defs,
+ * panel-view helpers, dashboard layout state, and per-view renderers.
+ *
+ * Single dataset: `HubTable` runs one `useTableState` and every renderer (list, board, panel,
+ * dashboard) reads `state.rows` (filtered/sorted). KPIs and panel groups derive from those.
  */
 
 import * as React from "react"
+import { useRouter } from "next/navigation"
 import { AvatarInitials } from "@/components/ui/avatar"
 import {
   TEAM_MEMBER_STATUS_BADGE_CLASS,
@@ -15,7 +18,7 @@ import {
 } from "@/lib/list-status-badges"
 import { mailtoHref } from "@/lib/mailto"
 import type { TeamMember } from "@/lib/mock/team"
-import { DataTable, DataTableToolbar } from "@/components/data-table"
+import { DataTableToolbar } from "@/components/data-table"
 import {
   TeamDashboardChartsSection,
   DEFAULT_TEAM_CHART_TYPES,
@@ -27,19 +30,22 @@ import {
 } from "@/components/data-view-dashboard-charts-team"
 import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
 import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
-import { TeamListView } from "@/components/team-list-view"
+import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
 import { TeamBoardView, TEAM_BOARD_GROUP_OPTIONS } from "@/components/team-board-view"
 import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
 import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
 import { teamKpiInsight, teamKpiMetrics } from "@/lib/mock/team-kpi"
-import { useRouter } from "next/navigation"
 import { cn } from "@/lib/utils"
 import type { DataListViewType } from "@/lib/data-list-view"
-import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
-import { useTableState } from "@/components/data-table/use-table-state"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
-import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import {
+  HubTable,
+  type HubTableHandle,
+  type HubTableRenderers,
+  type HubTableRendererArgs,
+} from "@/components/data-views"
+import { TEAM_SUPPORTED_VIEWS } from "@/lib/team-supported-views"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -52,10 +58,8 @@ import { Tip } from "@/components/ui/tip"
 import { CoachMark } from "@/components/ui/coach-mark"
 import { useCoachMark } from "@/hooks/use-coach-mark"
 import { DASHBOARD_CUSTOMIZE_COACH_STEPS } from "@/lib/dashboard-customize-coach-mark"
-import {
-  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
-  type DataListDisplayOptions,
-} from "@/lib/data-list-display-options"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
 
 function uniqueRoles(members: TeamMember[]) {
   return [...new Set(members.map(m => m.role))].sort().map(r => ({ value: r, label: r }))
@@ -73,15 +77,25 @@ const STATUS_FILTER_OPTS = [
   { value: "invited", label: TEAM_MEMBER_STATUS_LABEL.invited },
 ]
 
-// ─── Team-specific panel view helpers ──────────────────────────────────────
+const TEAM_STATUS_GROUPS: Array<{ id: string; label: string; accent: string }> = [
+  { id: "all", label: "All", accent: "bg-muted-foreground" },
+  { id: "active", label: "Active", accent: "bg-success" },
+  { id: "away", label: "Away", accent: "bg-warning" },
+  { id: "invited", label: "Invited", accent: "bg-brand" },
+]
+
+function buildTeamStatusGroups(members: TeamMember[]): FinderGroup[] {
+  return TEAM_STATUS_GROUPS.map(sg => ({
+    id: sg.id,
+    label: sg.label,
+    accent: sg.accent,
+    count: sg.id === "all" ? members.length : members.filter(m => m.status === sg.id).length,
+  }))
+}
+
+// ─── Team-specific panel view rows ───────────────────────────────────────────
 
-function TeamFinderListRow({
-  member,
-  isSelected,
-}: {
-  member: TeamMember
-  isSelected: boolean
-}) {
+function TeamFinderListRow({ member, isSelected }: { member: TeamMember; isSelected: boolean }) {
   return (
     <div
       className={`flex w-full min-w-0 items-center gap-3 transition-colors duration-75 ${
@@ -114,16 +128,10 @@ function TeamFinderListRow({
   )
 }
 
-function TeamFinderDetail({
-  member,
-}: {
-  member: TeamMember
-}) {
+function TeamFinderDetail({ member }: { member: TeamMember }) {
   const router = useRouter()
-
   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={member.initials} className="size-14 shrink-0 rounded-full text-lg font-semibold" />
         <div className="min-w-0 flex-1">
@@ -138,16 +146,19 @@ function TeamFinderDetail({
           </div>
         </div>
         <Tip side="bottom" label="Open full profile">
-          <Button type="button" variant="outline" size="sm" className="shrink-0"
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
             onClick={() => router.push(`/team/${member.id}`)}
-            aria-label={`Open full profile for ${member.name}`}>
+            aria-label={`Open full profile for ${member.name}`}
+          >
             <i className="fa-light fa-arrow-up-right-from-square text-[12px]" aria-hidden="true" />
             Open
           </Button>
         </Tip>
       </div>
-
-      {/* 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">
           <div className="flex flex-col gap-0.5">
@@ -155,7 +166,9 @@ function TeamFinderDetail({
               <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
             </dt>
             <dd className="text-[13px]">
-              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">{member.email}</a>
+              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">
+                {member.email}
+              </a>
             </dd>
           </div>
           <div className="flex flex-col gap-0.5">
@@ -176,60 +189,12 @@ function TeamFinderDetail({
   )
 }
 
-// ─── Status groups for team panel view ────────────────────────────────────
-
-const TEAM_STATUS_GROUPS: Array<{ id: string; label: string; accent: string }> = [
-  { id: "all",      label: "All",    accent: "bg-muted-foreground" },
-  { id: "active",   label: "Active", accent: "bg-success" },
-  { id: "away",     label: "Away",   accent: "bg-warning" },
-  { id: "invited",  label: "Invited", accent: "bg-brand" },
-]
-
-function buildTeamStatusGroups(members: TeamMember[]): FinderGroup[] {
-  return TEAM_STATUS_GROUPS.map(sg => ({
-    id: sg.id,
-    label: sg.label,
-    accent: sg.accent,
-    count: sg.id === "all" ? members.length : members.filter(m => m.status === sg.id).length,
-  }))
-}
-
-function columnToFilterFieldDef(c: ColumnDef<TeamMember>): FilterFieldDef | null {
-  if (!c.filter) return null
-  const f = c.filter
-  const defaultOps: FilterOperator[] =
-    f.type === "select" || f.type === "date"
-      ? ["is", "is_not"]
-      : ["contains", "not_contains"]
-  return {
-    key: c.key,
-    label: c.label,
-    icon: f.icon ?? "fa-filter",
-    type: f.type,
-    operators: (f.operators ?? defaultOps) as FilterOperator[],
-    options: f.options,
-    ...(f.textMask ? { textMask: f.textMask } : {}),
-  }
-}
-
-function columnsToFilterFields(cols: ColumnDef<TeamMember>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
-}
+// ─── Columns ─────────────────────────────────────────────────────────────────
 
 function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
   const roleOpts = uniqueRoles(members)
-
-  const COLUMN_SELECT: ColumnDef<TeamMember> = {
-    key: "select",
-    label: "",
-    width: 40,
-    minWidth: 40,
-    defaultPin: "left",
-    lockPin: true,
-  }
-
-  const cols: ColumnDef<TeamMember>[] = [
-    COLUMN_SELECT,
+  return [
+    { key: "select", label: "", width: 40, minWidth: 40, defaultPin: "left", lockPin: true },
     {
       key: "name",
       label: "Name",
@@ -238,11 +203,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       sortable: true,
       sortKey: "name",
       defaultPin: "left",
-      filter: {
-        type: "text",
-        icon: "fa-user",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-user", operators: ["contains", "not_contains"] },
       cell: row => (
         <div className="flex items-center gap-2.5 min-w-0">
           <AvatarInitials initials={row.initials} className="size-8 shrink-0 text-xs" />
@@ -257,12 +218,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       minWidth: 140,
       sortable: true,
       sortKey: "role",
-      filter: {
-        type: "select",
-        icon: "fa-briefcase",
-        operators: ["is", "is_not"],
-        options: roleOpts,
-      },
+      filter: { type: "select", icon: "fa-briefcase", operators: ["is", "is_not"], options: roleOpts },
       cell: row => <span className="text-sm text-foreground/90">{row.role}</span>,
     },
     {
@@ -272,11 +228,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       minWidth: 180,
       sortable: true,
       sortKey: "email",
-      filter: {
-        type: "text",
-        icon: "fa-envelope",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-envelope", operators: ["contains", "not_contains"] },
       cell: row => (
         <a href={mailtoHref(row.email)} className="text-sm text-primary hover:underline truncate block">
           {row.email}
@@ -290,12 +242,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       minWidth: 132,
       sortable: true,
       sortKey: "phone",
-      filter: {
-        type: "text",
-        icon: "fa-phone",
-        operators: ["contains", "not_contains"],
-        textMask: "phone",
-      },
+      filter: { type: "text", icon: "fa-phone", operators: ["contains", "not_contains"], textMask: "phone" },
       cell: row => (
         <a
           href={`tel:+1${row.phone}`}
@@ -312,12 +259,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       minWidth: 100,
       sortable: true,
       sortKey: "status",
-      filter: {
-        type: "select",
-        icon: "fa-circle-dot",
-        operators: ["is", "is_not"],
-        options: STATUS_FILTER_OPTS,
-      },
+      filter: { type: "select", icon: "fa-circle-dot", operators: ["is", "is_not"], options: STATUS_FILTER_OPTS },
       cell: row => (
         <ListHubStatusBadge
           label={TEAM_MEMBER_STATUS_LABEL[row.status]}
@@ -356,293 +298,99 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
       ),
     },
   ]
-
-  return cols
 }
 
+// ─── Dashboard body (split out so it can use hooks inside renderer closure) ─
 
-export type TeamTableHandle = OpenTablePropertiesHandle
-
-export const TeamTable = React.forwardRef<
-  TeamTableHandle,
-  { members: TeamMember[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
->(function TeamTable({ members, view = "table", onViewChange }, ref) {
-  const columns = React.useMemo(() => buildTeamColumns(members), [members])
-  const 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 ?? c.key)) })),
-    [columns],
-  )
-
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
-
-  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
-  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
-    setDisplayOptions(prev => ({ ...prev, ...patch }))
-  }, [])
-
-  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
-
-  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
-    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
-  }, [])
-  const removeConditionalRule = React.useCallback((id: string) => {
-    setConditionalRules(prev => prev.filter(r => r.id !== id))
-  }, [])
-  const updateConditionalRule = React.useCallback((id: string, patch: Partial<ConditionalRule>) => {
-    setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
-  }, [])
+interface TeamDashboardBodyProps {
+  args: HubTableRendererArgs<TeamMember>
+  columns: ColumnDef<TeamMember>[]
+}
 
-  const tableState = useTableState(members, columns, { key: "name", dir: "asc" })
+function TeamDashboardBody({ args, columns }: TeamDashboardBodyProps) {
+  const { state, drawerToolbarProps, displayOptions } = args
+  const rows = state.rows as TeamMember[]
 
   const dashboardKpi = React.useMemo(
-    () => ({
-      metrics: teamKpiMetrics(tableState.rows),
-      insight: teamKpiInsight(tableState.rows),
-    }),
-    [tableState.rows],
+    () => ({ metrics: teamKpiMetrics(rows), insight: teamKpiInsight(rows) }),
+    [rows],
   )
 
-  const [visibleTeamCards, setVisibleTeamCards] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-  const [teamCardOrder, setTeamCardOrder] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-  const [teamCardSpans, setTeamCardSpans] = React.useState<Record<string, 1 | 2>>(() => ({ ...DEFAULT_TEAM_SPANS }))
-  const [teamCardChartTypes, setTeamCardChartTypes] = React.useState<Record<string, ChartType>>(() => ({ ...DEFAULT_TEAM_CHART_TYPES }))
-  const [teamKeyMetricsKpiCount, setTeamKeyMetricsKpiCount] = React.useState<number>(KEY_METRICS_KPI_COUNT_DEFAULT)
-  const [teamDashboardLayoutEdit, setTeamDashboardLayoutEdit] = React.useState(false)
-  const teamDashboardLayoutHydrated = React.useRef(false)
-  const teamDashboardLayoutEditBaselineRef = React.useRef<DashboardLayout | null>(null)
+  const [visibleCards, setVisibleCards] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
+  const [cardOrder, setCardOrder] = React.useState<string[]>(() => ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
+  const [cardSpans, setCardSpans] = React.useState<Record<string, 1 | 2>>(() => ({ ...DEFAULT_TEAM_SPANS }))
+  const [cardChartTypes, setCardChartTypes] = React.useState<Record<string, ChartType>>(() => ({ ...DEFAULT_TEAM_CHART_TYPES }))
+  const [kpiCount, setKpiCount] = React.useState<number>(KEY_METRICS_KPI_COUNT_DEFAULT)
+  const [layoutEdit, setLayoutEdit] = React.useState(false)
+  const hydrated = React.useRef(false)
+  const baselineRef = React.useRef<DashboardLayout | null>(null)
 
   React.useEffect(() => {
     const saved = loadTeamDashboardLayout()
     const m = mergeTeamDashboardLayout(saved)
-    setVisibleTeamCards(m.visible)
-    setTeamCardOrder(m.order)
-    setTeamCardSpans(m.spans ?? { ...DEFAULT_TEAM_SPANS })
-    setTeamCardChartTypes(m.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
-    setTeamKeyMetricsKpiCount(m.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
-    teamDashboardLayoutHydrated.current = true
+    setVisibleCards(m.visible)
+    setCardOrder(m.order)
+    setCardSpans(m.spans ?? { ...DEFAULT_TEAM_SPANS })
+    setCardChartTypes(m.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
+    setKpiCount(m.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
+    hydrated.current = true
   }, [])
 
   React.useEffect(() => {
-    if (!teamDashboardLayoutHydrated.current) return
+    if (!hydrated.current) return
     saveTeamDashboardLayout({
-      visible: visibleTeamCards,
-      order: teamCardOrder,
-      spans: teamCardSpans,
-      chartTypes: teamCardChartTypes,
-      keyMetricsKpiCount: teamKeyMetricsKpiCount,
+      visible: visibleCards,
+      order: cardOrder,
+      spans: cardSpans,
+      chartTypes: cardChartTypes,
+      keyMetricsKpiCount: kpiCount,
     })
-  }, [visibleTeamCards, teamCardOrder, teamCardSpans, teamCardChartTypes, teamKeyMetricsKpiCount])
-
-  const handleTeamVisibleChange = React.useCallback((v: string[]) => {
-    setVisibleTeamCards(v)
+  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, kpiCount])
+
+  const onResetLayout = React.useCallback(() => {
+    setVisibleCards(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
+    setCardOrder(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
+    setCardSpans({ ...DEFAULT_TEAM_SPANS })
+    setCardChartTypes({ ...DEFAULT_TEAM_CHART_TYPES })
+    setKpiCount(KEY_METRICS_KPI_COUNT_DEFAULT)
   }, [])
 
-  const handleTeamOrderChange = React.useCallback((o: string[]) => {
-    setTeamCardOrder(o)
-  }, [])
-
-  const handleTeamSpanChange = React.useCallback((id: string, span: 1 | 2) => {
-    setTeamCardSpans(prev => ({ ...prev, [id]: span }))
-  }, [])
-
-  const handleTeamChartTypeChange = React.useCallback((id: string, t: ChartType) => {
-    setTeamCardChartTypes(prev => ({ ...prev, [id]: t }))
-  }, [])
-
-  const handleResetTeamDashboardLayout = React.useCallback(() => {
-    setVisibleTeamCards(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-    setTeamCardOrder(ALL_TEAM_DASHBOARD_CARDS.map(c => c.id))
-    setTeamCardSpans({ ...DEFAULT_TEAM_SPANS })
-    setTeamCardChartTypes({ ...DEFAULT_TEAM_CHART_TYPES })
-    setTeamKeyMetricsKpiCount(KEY_METRICS_KPI_COUNT_DEFAULT)
-  }, [])
-
-  const handleTeamDashboardLayoutEditStart = React.useCallback(() => {
-    teamDashboardLayoutEditBaselineRef.current = {
-      visible: [...visibleTeamCards],
-      order: [...teamCardOrder],
-      spans: { ...teamCardSpans },
-      chartTypes: { ...teamCardChartTypes },
-      keyMetricsKpiCount: teamKeyMetricsKpiCount,
+  const onLayoutEditStart = React.useCallback(() => {
+    baselineRef.current = {
+      visible: [...visibleCards],
+      order: [...cardOrder],
+      spans: { ...cardSpans },
+      chartTypes: { ...cardChartTypes },
+      keyMetricsKpiCount: kpiCount,
     }
-    setTeamDashboardLayoutEdit(true)
-  }, [visibleTeamCards, teamCardOrder, teamCardSpans, teamCardChartTypes, teamKeyMetricsKpiCount])
+    setLayoutEdit(true)
+  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, kpiCount])
 
-  const handleTeamDashboardLayoutEditDone = React.useCallback(() => {
-    setTeamDashboardLayoutEdit(false)
-  }, [])
-
-  const handleTeamDashboardLayoutEditCancel = React.useCallback(() => {
-    const b = teamDashboardLayoutEditBaselineRef.current
+  const onLayoutEditCancel = React.useCallback(() => {
+    const b = baselineRef.current
     if (b) {
-      setVisibleTeamCards(b.visible)
-      setTeamCardOrder(b.order)
-      setTeamCardSpans(b.spans ?? { ...DEFAULT_TEAM_SPANS })
-      setTeamCardChartTypes(b.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
-      setTeamKeyMetricsKpiCount(b.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
+      setVisibleCards(b.visible)
+      setCardOrder(b.order)
+      setCardSpans(b.spans ?? { ...DEFAULT_TEAM_SPANS })
+      setCardChartTypes(b.chartTypes ?? { ...DEFAULT_TEAM_CHART_TYPES })
+      setKpiCount(b.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
     }
-    setTeamDashboardLayoutEdit(false)
+    setLayoutEdit(false)
   }, [])
 
-  const dashboardCustomizeCoach = useCoachMark({
+  const coach = useCoachMark({
     flowId: "team-dashboard-customize",
     steps: DASHBOARD_CUSTOMIZE_COACH_STEPS,
     delay: 700,
-    enabled: view === "dashboard",
+    enabled: true,
   })
 
-  React.useImperativeHandle(ref, () => ({
-    openPropertiesDrawer: () => {
-      tableState.setSheetOpen(true)
-    },
-  // `tableState` is freshly returned each render by useTableState; depending on
-  // it would re-create the imperative handle on every render. Only the React
-  // setter is needed (and is referentially stable).
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [tableState.setSheetOpen])
-
-  const teamPanelFinderGroups = React.useMemo(
-    () => buildTeamStatusGroups(tableState.rows),
-    [tableState.rows],
-  )
-
-  const teamBoardGroupKey = TEAM_BOARD_GROUP_OPTIONS.some(
-    o => o.key === displayOptions.boardGroupByColumnKey,
-  )
-    ? displayOptions.boardGroupByColumnKey
-    : "status"
-
-  const drawerToolbarProps = {
-    totalRows: members.length,
-    filterFields,
-    fieldDefinitions: fieldDefinitionsForDrawer,
-    resolveColumnLabel,
-    displayOptions,
-    onDisplayOptionsChange: patchDisplay,
-    conditionalRules,
-    onAddConditionalRule: addConditionalRule,
-    onRemoveConditionalRule: removeConditionalRule,
-    onUpdateConditionalRule: updateConditionalRule,
-    currentView: view,
-    onViewChange,
-    lifecycleTabLabel: "Team",
-    boardGroupByColumnOptions: [...TEAM_BOARD_GROUP_OPTIONS],
-  }
-
-  const tableProps = {
-    data: members,
-    columns,
-    getRowId: (row: TeamMember) => row.id,
-    getRowSelectionLabel: (row: TeamMember) => row.name,
-    selectable: true,
-    searchable: displayOptions.showToolbarSearch,
-    showColumnHeaders: displayOptions.showColumnLabels,
-    groupable: true,
-    defaultSort: { key: "name", dir: "asc" as const },
-    emptyState: <p className="text-sm text-muted-foreground">No team members.</p>,
-    conditionalRules,
-    state: tableState,
-    toolbarSlot: (s: ReturnType<typeof useTableState<TeamMember>>) => (
-      <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />
-    ),
-    bulkActionsSlot: (selected: Set<string | number>) => {
-      const n = selected.size
-      if (n === 0) return null
-      return (
-        <>
-          <span className="sr-only">{n} selected</span>
-          <Tip label="Export selection (demo)">
-            <Button size="sm" variant="outline" type="button">
-              <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-              Export
-            </Button>
-          </Tip>
-        </>
-      )
-    },
-  }
-
-  if (view === "table") {
-    return (
-      <div className="pb-6">
-        <DataTable<TeamMember> {...tableProps} />
-      </div>
-    )
-  }
-
-  const sharedToolbar = (
-    <DataTableToolbar
-      state={tableState}
-      columns={columns}
-      searchable={displayOptions.showToolbarSearch}
-      searchAriaLabel="Search team members"
-      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-    />
-  )
-
-  if (view === "list") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <TeamListView members={tableState.rows} onRowActivate={m => tableState.toggleRow(m.id)} />
-      </div>
-    )
-  }
-
-  if (view === "board") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <TeamBoardView
-          members={tableState.rows}
-          groupByColumnKey={teamBoardGroupKey}
-          onRowActivate={m => tableState.toggleRow(m.id)}
-        />
-      </div>
-    )
-  }
-
-  if (view === "panel") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <ListPageSplitHubChrome aria-label="Team members panel view">
-          <FinderPanelView<TeamMember>
-            embedded
-            groupsColumnTitle="Status"
-            groups={teamPanelFinderGroups}
-            rows={tableState.rows}
-            getRowId={r => r.id}
-            getRowGroupId={r => r.status}
-            defaultGroupId="all"
-            autoSaveId="team-panel-view"
-            ariaLabel="Team members panel view"
-            emptyList={<p>No team members found</p>}
-            renderListRow={(member, isSelected) => (
-              <TeamFinderListRow member={member} isSelected={isSelected} />
-            )}
-            renderDetail={member => (
-              <TeamFinderDetail member={member} />
-            )}
-          />
-        </ListPageSplitHubChrome>
-      </div>
-    )
-  }
-
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <CoachMark state={dashboardCustomizeCoach} />
-      {!teamDashboardLayoutEdit ? (
+      <CoachMark state={coach} />
+      {!layoutEdit ? (
         <DataTableToolbar
-          state={tableState}
+          state={state}
           columns={columns}
           searchable={displayOptions.showToolbarSearch}
           searchAriaLabel="Search team members"
@@ -657,7 +405,7 @@ export const TeamTable = React.forwardRef<
                     variant="ghost"
                     size="icon-sm"
                     aria-label="Edit dashboard layout"
-                    onClick={handleTeamDashboardLayoutEditStart}
+                    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" />
@@ -669,25 +417,137 @@ export const TeamTable = React.forwardRef<
         />
       ) : null}
       <TeamDashboardChartsSection
-        members={tableState.rows as TeamMember[]}
+        members={rows}
         keyMetrics={dashboardKpi}
-        visibleCards={visibleTeamCards}
-        cardOrder={teamCardOrder}
-        cardSpans={teamCardSpans}
-        cardChartTypes={teamCardChartTypes}
-        keyMetricsKpiCount={teamKeyMetricsKpiCount}
-        layoutEditMode={teamDashboardLayoutEdit}
-        onVisibleChange={handleTeamVisibleChange}
-        onOrderChange={handleTeamOrderChange}
-        onSpanChange={handleTeamSpanChange}
-        onChartTypeChange={handleTeamChartTypeChange}
-        onKeyMetricsKpiCountChange={setTeamKeyMetricsKpiCount}
-        onResetLayout={handleResetTeamDashboardLayout}
-        onLayoutEditDone={handleTeamDashboardLayoutEditDone}
-        onLayoutEditCancel={handleTeamDashboardLayoutEditCancel}
+        visibleCards={visibleCards}
+        cardOrder={cardOrder}
+        cardSpans={cardSpans}
+        cardChartTypes={cardChartTypes}
+        keyMetricsKpiCount={kpiCount}
+        layoutEditMode={layoutEdit}
+        onVisibleChange={setVisibleCards}
+        onOrderChange={setCardOrder}
+        onSpanChange={(id, span) => setCardSpans(prev => ({ ...prev, [id]: span }))}
+        onChartTypeChange={(id, t) => setCardChartTypes(prev => ({ ...prev, [id]: t }))}
+        onKeyMetricsKpiCountChange={setKpiCount}
+        onResetLayout={onResetLayout}
+        onLayoutEditDone={() => setLayoutEdit(false)}
+        onLayoutEditCancel={onLayoutEditCancel}
       />
     </div>
   )
+}
+
+// ─── Public component ───────────────────────────────────────────────────────
+
+export type TeamTableHandle = HubTableHandle
+
+export const TeamTable = React.forwardRef<
+  TeamTableHandle,
+  { members: TeamMember[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
+>(function TeamTable({ members, view = "table", onViewChange }, ref) {
+  const columns = React.useMemo(() => buildTeamColumns(members), [members])
+
+  const renderers: HubTableRenderers<TeamMember> = {
+    "board-with-toolbar": ({ state, toolbarShell, displayOptions }) => {
+      const boardGroupKey = TEAM_BOARD_GROUP_OPTIONS.some(
+        o => o.key === displayOptions.boardGroupByColumnKey,
+      )
+        ? displayOptions.boardGroupByColumnKey
+        : "status"
+      return toolbarShell(
+        <TeamBoardView
+          members={state.rows as TeamMember[]}
+          groupByColumnKey={boardGroupKey}
+          onRowActivate={m => state.toggleRow(m.id)}
+        />,
+      )
+    },
+    "panel-with-toolbar": ({ state, toolbarShell }) => {
+      const groups = buildTeamStatusGroups(state.rows as TeamMember[])
+      return toolbarShell(
+        <ListPageSplitHubChrome aria-label="Team members panel view">
+          <FinderPanelView<TeamMember>
+            embedded
+            groupsColumnTitle="Status"
+            groups={groups}
+            rows={state.rows as TeamMember[]}
+            getRowId={r => r.id}
+            getRowGroupId={r => r.status}
+            defaultGroupId="all"
+            autoSaveId="team-panel-view"
+            ariaLabel="Team members panel view"
+            emptyList={<p>No team members found</p>}
+            renderListRow={(member, isSelected) => (
+              <TeamFinderListRow member={member} isSelected={isSelected} />
+            )}
+            renderDetail={member => <TeamFinderDetail member={member} />}
+          />
+        </ListPageSplitHubChrome>,
+      )
+    },
+    "dashboard-with-toolbar": (args) => <TeamDashboardBody args={args} columns={columns} />,
+  }
+
+  return (
+    <HubTable<TeamMember>
+      rows={members}
+      columns={columns}
+      view={view}
+      onViewChange={onViewChange}
+      supportedViewTypes={TEAM_SUPPORTED_VIEWS}
+      hubLabel="Team"
+      lifecycleTabLabel="Team"
+      searchAriaLabel="Search team members"
+      getRowId={row => row.id}
+      getRowSelectionLabel={row => row.name}
+      defaultSort={{ key: "name", dir: "asc" }}
+      emptyState={<p className="text-sm text-muted-foreground">No team members.</p>}
+      boardGroupByColumnOptions={[...TEAM_BOARD_GROUP_OPTIONS]}
+      listAriaLabel="Team members"
+      listEmptyState="No team members match your filters."
+      renderListRow={member => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex flex-row items-center gap-3"
+          leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+                tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+                icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+              />
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            </div>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
+            <p className="text-xs text-muted-foreground">{member.role}</p>
+            <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+      bulkActionsSlot={selected => {
+        if (selected.size === 0) return null
+        return (
+          <>
+            <span className="sr-only">{selected.size} selected</span>
+            <Tip label="Export selection (demo)">
+              <Button size="sm" variant="outline" type="button">
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </Button>
+            </Tip>
+          </>
+        )
+      }}
+      renderers={renderers}
+      handleRef={ref}
+    />
+  )
 })
 
 TeamTable.displayName = "TeamTable"