@exxatdesignux/ui 0.0.5 → 0.0.7

package/template/components/site-header.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+/**
+ * SiteHeader — breadcrumb / top bar — WCAG 2.1 AA
+ *
+ *  ✓ SidebarTrigger wrapped in Tooltip — icon-only button (WCAG 4.1.2, 1.1.1)
+ *  ✓ <header role="banner"> landmark for AT navigation (WCAG 1.3.6)
+ *  ✓ No bottom border (per design spec)
+ *  ✓ Uses Inter (font-sans) — Ivy Presto is reserved for PageHeader <h1> only
+ */
+
+import Link from "next/link"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { AskLeoToggle } from "@/components/ask-leo-sidebar"
+import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface SiteHeaderProps {
+  /** Current page title (last breadcrumb segment) */
+  title?: string
+  /** Full breadcrumb trail — each item can be a link or plain text. Title is appended automatically as the last segment. */
+  breadcrumbs?: BreadcrumbItem[]
+}
+
+export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps) {
+  const mod = useModKeyLabel()
+
+  return (
+    <header
+      role="banner"
+      className="flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
+    >
+      <div className="flex w-full items-center gap-1 ps-4 pe-2 lg:gap-2 lg:ps-6 lg:pe-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <SidebarTrigger className="-ms-1" />
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="flex flex-wrap items-center gap-1.5">
+            <span>Toggle sidebar</span>
+            <KbdGroup>
+              <Kbd>{mod}</Kbd>
+              <Kbd>B</Kbd>
+            </KbdGroup>
+          </TooltipContent>
+        </Tooltip>
+
+        <Separator
+          orientation="vertical"
+          className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-auto"
+        />
+
+        {/* Breadcrumb trail */}
+        <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 min-w-0 overflow-hidden">
+          {breadcrumbs?.map((crumb, i) => (
+            <span key={i} className="flex items-center gap-1.5 shrink-0">
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className="font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors tracking-normal"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="font-sans text-sm text-muted-foreground tracking-normal">
+                  {crumb.label}
+                </span>
+              )}
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground/50" aria-hidden="true" />
+            </span>
+          ))}
+          <span className="font-sans text-sm font-medium text-foreground tracking-normal truncate">
+            {title}
+          </span>
+        </nav>
+
+        <div className="ml-auto shrink-0">
+          <AskLeoToggle />
+        </div>
+      </div>
+    </header>
+  )
+}

package/template/components/sites-all-client.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+
+import { ListPageTemplate, type ViewTab, dataListViewIcon, type DataListViewType } from "@/components/data-views"
+import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { KeyMetrics } from "@/components/key-metrics"
+import { SitesTable, type SitesTableHandle } from "@/components/sites-table"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { SITES_DIRECTORY } from "@/lib/mock/sites-directory"
+import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
+
+const DEFAULT_TABS: ViewTab[] = [
+  { id: "sites", label: "Sites", viewType: "board", icon: "fa-grid-2", filterId: "all" },
+]
+
+function SitesPageHeader({
+  count,
+  onAdd,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+}: {
+  count: number
+  onAdd: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+}) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  return (
+    <PageHeader
+      title="Sites"
+      subtitle={`${count} ${count === 1 ? "site" : "sites"} · Last updated now`}
+      actions={
+        <div className="flex items-center gap-2" role="group" aria-label="Sites actions">
+          <Tip side="bottom" label="Add a new site">
+            <Button type="button" size="lg" onClick={onAdd}>
+              <i className="fa-light fa-plus" aria-hidden="true" />
+              Add site
+            </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" className="w-52">
+              <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>
+      }
+    />
+  )
+}
+
+export function SitesAllClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const tableRef = React.useRef<SitesTableHandle>(null)
+  const count = SITES_DIRECTORY.length
+  const metrics = React.useMemo(() => sitesKpiMetrics(count), [count])
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "Sites",
+        description: `${count} sites in this directory.`,
+        suggestions: [
+          "Which sites should we onboard next?",
+          "Summarize capacity across affiliated sites",
+        ],
+      }),
+      [count],
+    ),
+  )
+
+  return (
+    <ListPageTemplate
+      defaultTabs={DEFAULT_TABS}
+      getTabCount={() => count}
+      showMetrics={showMetrics}
+      tablePropertiesRef={tableRef}
+      metrics={
+        <KeyMetrics
+          variant="flat"
+          metrics={metrics}
+          insight={SITES_KPI_INSIGHT}
+          showHeader={false}
+          metricsSingleRow
+        />
+      }
+      exportOpen={exportOpen}
+      onExportOpenChange={setExportOpen}
+      exportTotalRows={count}
+      header={
+        <SitesPageHeader
+          count={count}
+          onAdd={() => {}}
+          onExport={() => setExportOpen(true)}
+          showMetrics={showMetrics}
+          onToggleMetrics={() => setShowMetrics(v => !v)}
+        />
+      }
+      renderContent={(tab, updateTab) => (
+        <SitesTable
+          key={tab.id}
+          ref={tableRef}
+          sites={SITES_DIRECTORY}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+        />
+      )}
+    />
+  )
+}

package/template/components/sites-board-view.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+/**
+ * Sites hub — **grid of `ListPageBoardCard` tiles** (same card composition as Team board cards),
+ * not the kanban `ListPageBoardTemplate` column shell. Insets match other list hubs.
+ */
+
+import Link from "next/link"
+import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import { BoardCardIconRow } from "@/components/data-views/board-card-primitives"
+import {
+  HubRecordCard,
+  ListPageBoardCardAvatar,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+
+/** Same card building blocks as `TeamBoardView` / board tabs — without the column template. */
+export function SiteBoardCard({ site }: { site: SiteDirectoryRow }) {
+  return (
+    <Link
+      href={site.url}
+      className="block h-full rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <HubRecordCard interactive className="h-full w-full">
+        <ListPageBoardCardHeader>
+          <ListPageBoardCardTitleRow
+            title={site.name}
+            titleClassName="truncate"
+            trailing={<ListPageBoardCardAvatar initials={initialsFromDisplayName(site.name)} />}
+          />
+          <ListPageBoardCardBody>
+            <BoardCardIconRow iconClass="fa-hashtag">
+              <span className="truncate">{site.id}</span>
+            </BoardCardIconRow>
+            <BoardCardIconRow iconClass="fa-link">
+              <span className="truncate" title={site.url}>
+                {site.url}
+              </span>
+            </BoardCardIconRow>
+          </ListPageBoardCardBody>
+        </ListPageBoardCardHeader>
+      </HubRecordCard>
+    </Link>
+  )
+}
+
+/** Responsive card grid + page insets (`px-4` / `lg:px-6`) aligned with `ListPageBoardTemplate` / Team toolbar. */
+export function SitesCardGrid({ rows }: { rows: SiteDirectoryRow[] }) {
+  if (rows.length === 0) {
+    return (
+      <div className="px-4 pb-6 pt-2 lg:px-6">
+        <p className="py-8 text-center text-sm text-muted-foreground">No sites match your search.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-3 px-4 pb-6 pt-2 sm:grid-cols-2 lg:grid-cols-3 lg:px-6 xl:grid-cols-4">
+      {rows.map(site => (
+        <SiteBoardCard key={site.id} site={site} />
+      ))}
+    </div>
+  )
+}

package/template/components/sites-list-view.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import Link from "next/link"
+import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+
+export function SitesListView({ rows }: { rows: SiteDirectoryRow[] }) {
+  if (rows.length === 0) {
+    return (
+      <div className="px-4 py-16 text-center lg:px-6">
+        <p className="text-sm text-muted-foreground">No sites match your search.</p>
+      </div>
+    )
+  }
+
+  return (
+    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
+      {rows.map(site => (
+        <li key={site.id}>
+          <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>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/template/components/sites-table.tsx

@@ -0,0 +1,312 @@
+"use client"
+
+/**
+ * Sites hub — same stack as Team / Compliance: DataTableToolbar (search, filters)
+ * + TablePropertiesDrawer, shared `useTableState` across table | list | board | dashboard.
+ */
+
+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 { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+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)
+}
+
+function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
+  const COLUMN_SELECT: ColumnDef<SiteDirectoryRow> = {
+    key: "select",
+    label: "",
+    width: 40,
+    minWidth: 40,
+    defaultPin: "left",
+    lockPin: true,
+  }
+
+  return [
+    COLUMN_SELECT,
+    {
+      key: "name",
+      label: "Site",
+      width: 260,
+      minWidth: 160,
+      sortable: true,
+      sortKey: "name",
+      filter: {
+        type: "text",
+        icon: "fa-hospital",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => (
+        <div className="flex min-w-0 items-center gap-2">
+          <Avatar size="sm" className="size-8 shrink-0">
+            <AvatarFallback className="bg-brand/10 p-0 text-brand">
+              <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
+            </AvatarFallback>
+          </Avatar>
+          <span className="truncate text-sm font-medium text-foreground">{row.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: "id",
+      label: "Key",
+      width: 160,
+      minWidth: 120,
+      sortable: true,
+      sortKey: "id",
+      filter: {
+        type: "text",
+        icon: "fa-hashtag",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="text-sm text-foreground/90">{row.id}</span>,
+    },
+    {
+      key: "url",
+      label: "Path",
+      width: 220,
+      minWidth: 140,
+      sortable: true,
+      sortKey: "url",
+      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}
+        </span>
+      ),
+    },
+    {
+      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" className="w-40">
+              <DropdownMenuItem asChild>
+                <Link href={row.url} className="flex cursor-pointer items-center gap-2">
+                  <i className="fa-light fa-arrow-up-right-from-square" aria-hidden="true" />
+                  Open site
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ),
+    },
+  ]
+}
+
+
+export type SitesTableHandle = OpenTablePropertiesHandle
+
+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 [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.setSheetOpen],
+  )
+
+  const dashMetrics = React.useMemo(
+    () => sitesKpiMetrics(tableState.rows.length),
+    [tableState.rows.length],
+  )
+
+  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>
+    )
+  }
+
+  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>
+  )
+})
+
+SitesTable.displayName = "SitesTable"