@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/team-page-header.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { PageHeader } from "@/components/page-header"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+
+export interface TeamPageHeaderProps {
+  memberCount: number
+  onInvite: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+  showTitleBlock?: boolean
+}
+
+/**
+ * Team list shell header — title, primary Invite, overflow (export + metrics toggle). Same pattern as PlacementsPageHeader.
+ */
+export function TeamPageHeader({
+  memberCount,
+  onInvite,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+  showTitleBlock = true,
+}: TeamPageHeaderProps) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  const countLine = `${memberCount} ${memberCount === 1 ? "member" : "members"} · Last updated now`
+
+  return (
+    <PageHeader
+      title="Team"
+      subtitle={countLine}
+      showTitleBlock={showTitleBlock}
+      actions={(
+        <div className="flex items-center gap-2" role="group" aria-label="Team actions">
+          <Tip side="bottom" label="Send an invitation (demo)">
+            <Button type="button" size="lg" onClick={onInvite}>
+              <i className="fa-light fa-user-plus" aria-hidden="true" />
+              Invite member
+            </Button>
+          </Tip>
+          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+            <Tip side="bottom" label="More actions">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="aspect-square px-0"
+                  aria-label="More actions"
+                >
+                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onExport(), 0)
+                }}
+              >
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onToggleMetrics(), 0)
+                }}
+              >
+                <i
+                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
+                  aria-hidden="true"
+                />
+                {showMetrics ? "Hide metric section" : "Show metric section"}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    />
+  )
+}

package/template/components/team-table.tsx

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