@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/rotations-empty-state.tsx

@@ -6,7 +6,7 @@
  */
 
 import { Button } from "@/components/ui/button"
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { useSecondaryPanel } from "@/components/sidebar"
 
 export function RotationsEmptyState() {
   const { openPanel } = useSecondaryPanel()

package/template/components/rotations-panel-activator.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useAutoPanel } from "@/components/secondary-panel"
+import { useAutoPanel } from "@/components/sidebar"
 
 export function RotationsPanelActivator() {
   useAutoPanel("rotations")

package/template/components/settings-appearance-card.tsx

@@ -622,7 +622,7 @@ export function SettingsAppearanceCard() {
                             side="top"
                           >
                             <span
-                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground"
+                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-foreground"
                               aria-label="Active product"
                             >
                               <i

package/template/components/{app-sidebar-dynamic.tsx → sidebar/app-sidebar-dynamic.tsx}

@@ -7,7 +7,7 @@
  * Radix ID mismatch is suppressed at the CollapsibleContent level instead.
  */
 import type { ComponentProps } from "react"
-import { AppSidebar } from "@/components/app-sidebar"
+import { AppSidebar } from "./app-sidebar"
 import type { Sidebar } from "@/components/ui/sidebar"
 
 export function AppSidebarDynamic(props: ComponentProps<typeof Sidebar>) {

package/template/components/{app-sidebar.tsx → sidebar/app-sidebar.tsx}

@@ -67,8 +67,8 @@ import { useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { useLocationHash } from "@/hooks/use-location-hash"
 import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
 import { useProduct, type Product } from "@/contexts/product-context"
-import { NavUser } from "@/components/nav-user"
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { NavUser } from "./nav-user"
+import { useSecondaryPanel } from "./secondary-panel"
 import { ExxatProductLogo, ExxatProductMark } from "@/components/exxat-product-logo"
 import { motionHeaderEnter } from "@/lib/motion-ui"
 import { customProductBrandConfig, productBrandLabel } from "@/lib/product-brand"
@@ -423,7 +423,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
                 </span>
                 <span>{item.title}</span>
                 <i
-                  className="fa-light fa-chevron-right ml-auto text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
+                  className="fa-light fa-chevron-right ms-auto text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
                   aria-hidden="true"
                 />
               </SidebarMenuButton>
@@ -898,7 +898,7 @@ function ProductLogoButton() {
               className="w-auto shrink-0 max-w-[min(100%,260px)]"
             />
             {p.id === product && (
-              <i className="fa-solid fa-check ml-auto text-brand text-xs" aria-hidden="true" />
+              <i className="fa-solid fa-check ms-auto text-brand text-xs" aria-hidden="true" />
             )}
           </DropdownMenuItem>
         ))}

package/template/components/sidebar/index.ts

@@ -0,0 +1,16 @@
+// Barrel re-export for the sidebar shell.
+// Consumers SHOULD import via `@/components/sidebar`; per-file paths still
+// work as escape hatch (e.g. `@/components/sidebar/secondary-panel`).
+//
+// See apps/web/docs/components-audit-2026-05.md §2.3.
+export * from "./app-sidebar"
+export * from "./app-sidebar-dynamic"
+export * from "./sidebar-shell"
+export * from "./sidebar-auto-collapse"
+export * from "./sidebar-auto-open"
+export * from "./nav-main"
+export * from "./nav-secondary"
+export * from "./nav-documents"
+export * from "./nav-user"
+export * from "./secondary-nav"
+export * from "./secondary-panel"

package/template/components/{secondary-nav.tsx → sidebar/secondary-nav.tsx}

@@ -293,7 +293,7 @@ export function SecondaryNavPanel({
             title={section.action.label}
             onClick={section.action.onClick}
             className={cn(
-              "inline-flex size-6 items-center justify-center rounded-md -mr-1",
+              "inline-flex size-6 items-center justify-center rounded-md -me-1",
               "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-strong",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             )}
@@ -318,7 +318,7 @@ export function SecondaryNavPanel({
               placeholder={section.searchPlaceholder ?? "Search"}
               aria-label={`Search ${section.label}`}
               className={cn(
-                "w-full h-7 pl-7 pr-2 rounded-md text-xs bg-background border border-border",
+                "w-full h-7 ps-7 pe-2 rounded-md text-xs bg-background border border-border",
                 "placeholder:text-muted-foreground/70",
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
               )}

package/template/components/{secondary-panel.tsx → sidebar/secondary-panel.tsx}

@@ -111,7 +111,10 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
       // zoom this stays the legacy behavior (full-width on open).
       setSecondaryPanelCompact(reflowZoom)
       setActivePanel(id)
-      setOpen(false) // collapse main sidebar to icon rail
+      // `persist: false` — collapsing the rail to make room for the secondary
+      // panel is an incidental layout side-effect; the user's saved
+      // expanded/collapsed preference (cookie) must not be overwritten by it.
+      setOpen(false, { persist: false }) // collapse main sidebar to icon rail
     },
     [setOpen, reflowZoom],
   )
@@ -122,9 +125,9 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
     const mainSidebar = opts?.mainSidebar ?? "leave"
     if (mainSidebar === "leave") return
     if (mainSidebar === "collapse") {
-      setOpen(false)
+      setOpen(false, { persist: false })
     } else {
-      setOpen(true) // expand main sidebar back
+      setOpen(true, { persist: false }) // expand main sidebar back
     }
   }, [setOpen])
 

package/template/components/{sidebar-auto-collapse.tsx → sidebar/sidebar-auto-collapse.tsx}

@@ -7,6 +7,10 @@ import { useSidebar } from "@/components/ui/sidebar"
  * Collapses the sidebar on mount. Restores previous state on unmount.
  * Used on the new-placement page so the sidebar collapses when entering
  * and reverts to whatever it was when leaving.
+ *
+ * Both transitions pass `{ persist: false }` so the visual collapse never
+ * overwrites the user's saved sidebar preference (the `sidebar_state_v2`
+ * cookie). Only an explicit toggle (⌘B / sidebar button) persists.
  */
 export function SidebarAutoCollapse() {
   const { open, setOpen } = useSidebar()
@@ -14,8 +18,8 @@ export function SidebarAutoCollapse() {
 
   useEffect(() => {
     prevOpen.current = open
-    setOpen(false)
-    return () => { setOpen(prevOpen.current) }
+    setOpen(false, { persist: false })
+    return () => { setOpen(prevOpen.current, { persist: false }) }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

package/template/components/{sidebar-shell.tsx → sidebar/sidebar-shell.tsx}

@@ -2,7 +2,7 @@
 
 /**
  * SidebarShell — SidebarProvider with layout-aware widths.
- * Desktop expanded/collapsed is persisted in the `sidebar_state` cookie by `@exxatdesignux/ui`
+ * Desktop expanded/collapsed is persisted in the `sidebar_state_v2` cookie by `@exxatdesignux/ui`
  * `SidebarProvider` (read on mount + write on toggle). `(app)/layout` passes
  * `defaultOpen` from the same cookie on the server so SSR matches the first client paint.
  */

package/template/components/site-header.tsx

@@ -107,7 +107,7 @@ export function SiteHeader({
           />
         )}
 
-        <div className="ml-auto shrink-0">
+        <div className="ms-auto shrink-0">
           <AskLeoToggle />
         </div>
       </div>

package/template/components/{sites-all-client.tsx → sites-client.tsx}

@@ -92,7 +92,7 @@ function SitesPageHeader({
   )
 }
 
-export function SitesAllClient() {
+export function SitesClient() {
   const [exportOpen, setExportOpen] = React.useState(false)
   const [showMetrics, setShowMetrics] = React.useState(true)
   const tableRef = React.useRef<SitesTableHandle>(null)

package/template/components/sites-table.tsx

@@ -1,20 +1,17 @@
 "use client"
 
 /**
- * Sites hub — same stack as Team / Compliance: DataTableToolbar (search, filters)
- * + TablePropertiesDrawer, shared `useTableState` across table | list | board | dashboard.
+ * Sites hub — thin wrapper around the centralized `<HubTable>`. Owns only the column defs,
+ * the renderers for non-table views, and the mock-data wiring. All `useTableState` /
+ * Properties drawer / `ListPageConnectedViewBody` plumbing lives in `HubTable`.
  */
 
 import * as React from "react"
 import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
-import { DataTable, DataTableToolbar } from "@/components/data-table"
-import { useTableState } from "@/components/data-table/use-table-state"
 import type { ColumnDef } from "@/components/data-table/types"
 import type { DataListViewType } from "@/lib/data-list-view"
-import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
-import { TablePropertiesDrawerButton } from "@/components/table-properties"
-import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import { HubTable, type HubTableHandle, type HubTableRenderers } from "@/components/data-views"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -22,51 +19,25 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
 import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
 import { SitesCardGrid } from "@/components/sites-board-view"
-import { SitesListView } from "@/components/sites-list-view"
 import { KeyMetrics } from "@/components/key-metrics"
 import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
-import {
-  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
-  type DataListDisplayOptions,
-} from "@/lib/data-list-display-options"
-
-function columnToFilterFieldDef(c: ColumnDef<SiteDirectoryRow>): 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<SiteDirectoryRow>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
-}
+import { SITES_SUPPORTED_VIEWS } from "@/lib/sites-supported-views"
 
 function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
-  const COLUMN_SELECT: ColumnDef<SiteDirectoryRow> = {
-    key: "select",
-    label: "",
-    width: 40,
-    minWidth: 40,
-    defaultPin: "left",
-    lockPin: true,
-  }
-
   return [
-    COLUMN_SELECT,
+    {
+      key: "select",
+      label: "",
+      width: 40,
+      minWidth: 40,
+      defaultPin: "left",
+      lockPin: true,
+    },
     {
       key: "name",
       label: "Site",
@@ -97,11 +68,7 @@ function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
       minWidth: 120,
       sortable: true,
       sortKey: "id",
-      filter: {
-        type: "text",
-        icon: "fa-hashtag",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-hashtag", operators: ["contains", "not_contains"] },
       cell: row => <span className="text-sm text-foreground/90">{row.id}</span>,
     },
     {
@@ -111,11 +78,7 @@ function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
       minWidth: 140,
       sortable: true,
       sortKey: "url",
-      filter: {
-        type: "text",
-        icon: "fa-link",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-link", operators: ["contains", "not_contains"] },
       cell: row => (
         <span className="truncate text-sm text-muted-foreground" title={row.url}>
           {row.url}
@@ -152,230 +115,134 @@ function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
   ]
 }
 
-
-export type SitesTableHandle = OpenTablePropertiesHandle
+export type SitesTableHandle = HubTableHandle
 
 export const SitesTable = React.forwardRef<
   SitesTableHandle,
   { sites: SiteDirectoryRow[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
 >(function SitesTable({ sites, view = "board", onViewChange }, ref) {
   const columns = React.useMemo(() => buildSitesColumns(), [])
-  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 panelGroups = React.useCallback(
+    (rows: SiteDirectoryRow[]): FinderGroup[] => [
+      { id: "all", label: `All sites (${rows.length})`, count: rows.length },
+    ],
+    [],
   )
 
-  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)))
-  }, [])
-
-  const tableState = useTableState<SiteDirectoryRow>(sites, columns, { key: "name", dir: "asc" })
-
-  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 dashMetrics = React.useMemo(
-    () => sitesKpiMetrics(tableState.rows.length),
-    [tableState.rows.length],
-  )
-
-  // Generic panel view rendering for sites
-  const panelGroupsBuilder = (rows: SiteDirectoryRow[]): FinderGroup[] => [
-    {
-      id: "all",
-      label: `All sites (${rows.length})`,
-      count: rows.length,
-    },
-  ]
-
-  const panelRenderListRow = (row: SiteDirectoryRow, _isSelected: boolean) => (
-    <div className="flex-1 min-w-0 flex items-center gap-2">
-      <Avatar size="sm" className="size-6 shrink-0">
-        <AvatarFallback className="bg-brand/10 p-0 text-brand text-xs">
-          <i className="fa-light fa-hospital text-xs" aria-hidden="true" />
-        </AvatarFallback>
-      </Avatar>
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium text-foreground truncate">{row.name}</p>
-        <p className="text-xs text-muted-foreground truncate">{row.url}</p>
-      </div>
-    </div>
-  )
-
-  const panelRenderDetail = (row: SiteDirectoryRow) => (
-    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4">
-      <div>
-        <h3 className="text-sm font-semibold text-foreground mb-2">Site</h3>
-        <p className="text-sm text-foreground">{row.name}</p>
-      </div>
-      <div className="flex flex-col gap-2">
-        <div>
-          <span className="text-xs font-medium text-muted-foreground">Key</span>
-          <p className="text-sm text-foreground font-mono">{row.id}</p>
-        </div>
-        <div>
-          <span className="text-xs font-medium text-muted-foreground">Path</span>
-          <p className="text-sm text-foreground break-all">{row.url}</p>
-        </div>
-      </div>
-    </div>
-  )
-
-  const drawerToolbarProps = {
-    state: tableState,
-    totalRows: sites.length,
-    filterFields,
-    fieldDefinitions: fieldDefinitionsForDrawer,
-    resolveColumnLabel,
-    displayOptions,
-    onDisplayOptionsChange: patchDisplay,
-    conditionalRules,
-    onAddConditionalRule: addConditionalRule,
-    onRemoveConditionalRule: removeConditionalRule,
-    onUpdateConditionalRule: updateConditionalRule,
-    currentView: view,
-    onViewChange,
-    lifecycleTabLabel: "Sites",
-  }
-
-  const tableProps = {
-    data: sites,
-    columns,
-    getRowId: (row: SiteDirectoryRow) => row.id,
-    getRowSelectionLabel: (row: SiteDirectoryRow) => 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 sites match your filters.</p>,
-    conditionalRules,
-    state: tableState,
-    toolbarSlot: (s: ReturnType<typeof useTableState<SiteDirectoryRow>>) => (
-      <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<SiteDirectoryRow> {...tableProps} />
-      </div>
-    )
-  }
-
-  const sharedToolbar = (
-    <DataTableToolbar
-      state={tableState}
-      columns={columns}
-      searchable={displayOptions.showToolbarSearch}
-      searchAriaLabel="Search sites"
-      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-    />
-  )
-
-  if (view === "list") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <SitesListView rows={tableState.rows} />
-      </div>
-    )
-  }
-
-  if (view === "board") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <SitesCardGrid rows={tableState.rows} />
-      </div>
-    )
-  }
-
-  if (view === "panel") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
+  const renderers: HubTableRenderers<SiteDirectoryRow> = {
+    "board-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(<SitesCardGrid rows={state.rows} />),
+    "panel-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(
         <ListPageSplitHubChrome aria-label="Sites directory panel view">
           <FinderPanelView<SiteDirectoryRow>
             embedded
             groupsColumnTitle="Sites"
-            groups={panelGroupsBuilder(tableState.rows)}
-            rows={tableState.rows}
-            getRowId={(row) => row.id}
+            groups={panelGroups(state.rows)}
+            rows={state.rows}
+            getRowId={row => row.id}
             getRowGroupId={() => "all"}
             autoSaveId="sites-panel-view"
-            renderListRow={panelRenderListRow}
-            renderDetail={panelRenderDetail}
+            renderListRow={(row) => (
+              <div className="flex-1 min-w-0 flex items-center gap-2">
+                <Avatar size="sm" className="size-6 shrink-0">
+                  <AvatarFallback className="bg-brand/10 p-0 text-brand text-xs">
+                    <i className="fa-light fa-hospital text-xs" aria-hidden="true" />
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">{row.name}</p>
+                  <p className="text-xs text-muted-foreground truncate">{row.url}</p>
+                </div>
+              </div>
+            )}
+            renderDetail={(row) => (
+              <div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4">
+                <div>
+                  <h3 className="text-sm font-semibold text-foreground mb-2">Site</h3>
+                  <p className="text-sm text-foreground">{row.name}</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <div>
+                    <span className="text-xs font-medium text-muted-foreground">Key</span>
+                    <p className="text-sm text-foreground font-mono">{row.id}</p>
+                  </div>
+                  <div>
+                    <span className="text-xs font-medium text-muted-foreground">Path</span>
+                    <p className="text-sm text-foreground break-all">{row.url}</p>
+                  </div>
+                </div>
+              </div>
+            )}
             emptyList={<p className="text-sm text-muted-foreground">No sites found.</p>}
           />
-        </ListPageSplitHubChrome>
-      </div>
-    )
+        </ListPageSplitHubChrome>,
+      ),
+    "dashboard-with-toolbar": ({ state, toolbar }) => {
+      const metrics = sitesKpiMetrics(state.rows.length)
+      return (
+        <div className="flex min-h-0 flex-1 flex-col gap-4">
+          {toolbar}
+          <div className="px-4 pb-2 lg:px-6">
+            <KeyMetrics
+              variant="flat"
+              metrics={metrics}
+              insight={SITES_KPI_INSIGHT}
+              showHeader={false}
+              metricsSingleRow
+            />
+          </div>
+          <SitesCardGrid rows={state.rows} />
+        </div>
+      )
+    },
   }
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col gap-4">
-      {sharedToolbar}
-      <div className="px-4 pb-2 lg:px-6">
-        <KeyMetrics
-          variant="flat"
-          metrics={dashMetrics}
-          insight={SITES_KPI_INSIGHT}
-          showHeader={false}
-          metricsSingleRow
-        />
-      </div>
-      <SitesCardGrid rows={tableState.rows} />
-    </div>
+    <HubTable<SiteDirectoryRow>
+      rows={sites}
+      columns={columns}
+      view={view}
+      onViewChange={onViewChange}
+      supportedViewTypes={SITES_SUPPORTED_VIEWS}
+      hubLabel="Sites"
+      lifecycleTabLabel="Sites"
+      searchAriaLabel="Search sites"
+      getRowId={row => row.id}
+      getRowSelectionLabel={row => row.name}
+      defaultSort={{ key: "name", dir: "asc" }}
+      emptyState={<p className="text-sm text-muted-foreground">No sites match your filters.</p>}
+      listAriaLabel="Sites"
+      listEmptyState="No sites match your search."
+      renderListRow={site => (
+        <Link
+          href={site.url}
+          className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <ListPageBoardCard
+            layout="row"
+            interactive
+            rowContainerClassName="flex flex-row items-center gap-3"
+            leading={
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
+                <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
+              </span>
+            }
+            rowEnd={
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            }
+          >
+            <div className="space-y-0.5">
+              <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
+              <p className="truncate text-xs text-muted-foreground">{site.id}</p>
+            </div>
+          </ListPageBoardCard>
+        </Link>
+      )}
+      renderers={renderers}
+      handleRef={ref}
+    />
   )
 })