@exxatdesignux/ui 0.2.19 → 0.3.0

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-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">
+              <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 SitesClient() {
+  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-table.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+/**
+ * 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 type { ColumnDef } from "@/components/data-table/types"
+import type { DataListViewType } from "@/lib/data-list-view"
+import { HubTable, type HubTableHandle, type HubTableRenderers } from "@/components/data-views"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+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 { KeyMetrics } from "@/components/key-metrics"
+import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
+import { SITES_SUPPORTED_VIEWS } from "@/lib/sites-supported-views"
+
+function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
+  return [
+    {
+      key: "select",
+      label: "",
+      width: 40,
+      minWidth: 40,
+      defaultPin: "left",
+      lockPin: true,
+    },
+    {
+      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">
+              <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 = 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 panelGroups = React.useCallback(
+    (rows: SiteDirectoryRow[]): FinderGroup[] => [
+      { id: "all", label: `All sites (${rows.length})`, count: rows.length },
+    ],
+    [],
+  )
+
+  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={panelGroups(state.rows)}
+            rows={state.rows}
+            getRowId={row => row.id}
+            getRowGroupId={() => "all"}
+            autoSaveId="sites-panel-view"
+            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>,
+      ),
+    "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 (
+    <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}
+    />
+  )
+})
+
+SitesTable.displayName = "SitesTable"

package/template/components/table-properties/column-row.tsx

@@ -1,90 +1 @@
-"use client"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Tip } from "@/components/ui/tip"
-import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
-import { ToggleSwitch } from "@/components/ui/toggle-switch"
-
-export interface ColumnRowProps {
-  label: string
-  isFirst: boolean
-  isLast: boolean
-  visible: boolean
-  onToggleVisible: () => void
-  onMoveUp: () => void
-  onMoveDown: () => void
-  // drag-and-drop props spread from useDraggableList
-  draggable: true
-  onDragStart: React.DragEventHandler
-  onDragOver: React.DragEventHandler
-  onDrop: React.DragEventHandler
-  onDragEnd: React.DragEventHandler
-  isDragging: boolean
-  isOver: boolean
-}
-
-export function ColumnRow({
-  label,
-  isFirst,
-  isLast,
-  visible,
-  onToggleVisible,
-  onMoveUp,
-  onMoveDown,
-  draggable,
-  onDragStart,
-  onDragOver,
-  onDrop,
-  onDragEnd,
-  isDragging,
-  isOver,
-}: ColumnRowProps) {
-  return (
-    <div
-      role="listitem"
-      draggable={draggable}
-      onDragStart={onDragStart}
-      onDragOver={onDragOver}
-      onDrop={onDrop}
-      onDragEnd={onDragEnd}
-      className={cn(
-        "flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing",
-        isDragging && "opacity-40",
-        isOver && "ring-2 ring-ring bg-accent/30",
-      )}
-    >
-      <DragHandleGripIcon className="text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
-      <span className="flex-1 text-sm text-foreground">{label}</span>
-      {/* Up / Down priority buttons */}
-      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-        <Tip label={`Move ${label} up`} side="top">
-          <button
-            type="button"
-            aria-label={`Move ${label} up`}
-            disabled={isFirst}
-            onClick={onMoveUp}
-            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <i className="fa-light fa-chevron-up text-xs" aria-hidden="true" />
-          </button>
-        </Tip>
-        <Tip label={`Move ${label} down`} side="top">
-          <button
-            type="button"
-            aria-label={`Move ${label} down`}
-            disabled={isLast}
-            onClick={onMoveDown}
-            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </button>
-        </Tip>
-      </div>
-      {/* Visibility toggle */}
-      <ToggleSwitch
-        checked={visible}
-        onChange={onToggleVisible}
-      />
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/column-row"

package/template/components/table-properties/draggable-list.ts

@@ -1,49 +1 @@
-import * as React from "react"
-
-export interface DraggableListHandle {
-  dragId: string | null
-  overId: string | null
-  getItemProps: (id: string) => {
-    draggable: true
-    onDragStart: (e: React.DragEvent) => void
-    onDragOver: (e: React.DragEvent) => void
-    onDrop: (e: React.DragEvent) => void
-    onDragEnd: () => void
-    "data-dragging": boolean
-    "data-over": boolean
-  }
-}
-
-export function useDraggableList<T>(
-  items: T[],
-  getId: (item: T) => string,
-  onReorder: (newItems: T[]) => void,
-): DraggableListHandle {
-  const [dragId, setDragId] = React.useState<string | null>(null)
-  const [overId, setOverId] = React.useState<string | null>(null)
-
-  function getItemProps(id: string) {
-    return {
-      draggable: true as const,
-      onDragStart: (e: React.DragEvent) => { e.dataTransfer.effectAllowed = "move"; setDragId(id) },
-      onDragOver: (e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverId(id) },
-      onDrop: (e: React.DragEvent) => {
-        e.preventDefault()
-        if (!dragId || dragId === id) { setDragId(null); setOverId(null); return }
-        const from = items.findIndex(i => getId(i) === dragId)
-        const to   = items.findIndex(i => getId(i) === id)
-        if (from === -1 || to === -1) { setDragId(null); setOverId(null); return }
-        const next = [...items]
-        const [moved] = next.splice(from, 1)
-        next.splice(to, 0, moved)
-        onReorder(next)
-        setDragId(null); setOverId(null)
-      },
-      onDragEnd: () => { setDragId(null); setOverId(null) },
-      "data-dragging": dragId === id,
-      "data-over": overId === id && dragId !== id,
-    }
-  }
-
-  return { dragId, overId, getItemProps }
-}
+export * from "@exxatdesignux/ui/components/table-properties/draggable-list"