@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/compliance-table.tsx

@@ -0,0 +1,468 @@
+"use client"
+
+/**
+ * Compliance obligations — thin wrapper around the centralized `<HubTable>`. Owns only the
+ * column defs, panel-view helpers, dashboard layout state, and per-view renderers.
+ */
+
+import * as React from "react"
+import {
+  COMPLIANCE_STATUS_BADGE_CLASS,
+  COMPLIANCE_STATUS_ICON,
+  COMPLIANCE_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { ComplianceItem } from "@/lib/mock/compliance"
+import { DataTableToolbar } from "@/components/data-table"
+import {
+  ComplianceDashboardChartsSection,
+  ALL_COMPLIANCE_DASHBOARD_CARDS,
+  DEFAULT_COMPLIANCE_CHART_TYPES,
+  DEFAULT_COMPLIANCE_SPANS,
+  loadComplianceDashboardLayout,
+  mergeComplianceDashboardLayout,
+  saveComplianceDashboardLayout,
+} from "@/components/data-view-dashboard-charts-compliance"
+import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
+import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { ComplianceBoardView, COMPLIANCE_BOARD_GROUP_OPTIONS } from "@/components/compliance-board-view"
+import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
+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 { COMPLIANCE_SUPPORTED_VIEWS } from "@/lib/compliance-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"
+import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function uniqueCategories(items: ComplianceItem[]) {
+  return [...new Set(items.map(i => i.category))].sort().map(c => ({ value: c, label: c }))
+}
+
+const STATUS_FILTER_OPTS = [
+  { value: "compliant", label: COMPLIANCE_STATUS_LABEL.compliant },
+  { value: "due_soon", label: COMPLIANCE_STATUS_LABEL.due_soon },
+  { value: "overdue", label: COMPLIANCE_STATUS_LABEL.overdue },
+  { value: "pending", label: COMPLIANCE_STATUS_LABEL.pending },
+]
+
+function buildComplianceColumns(items: ComplianceItem[]): ColumnDef<ComplianceItem>[] {
+  const catOpts = uniqueCategories(items)
+  return [
+    { key: "select", label: "", width: 40, minWidth: 40, defaultPin: "left", lockPin: true },
+    {
+      key: "title",
+      label: "Obligation",
+      width: 280,
+      minWidth: 140,
+      sortable: true,
+      sortKey: "title",
+      defaultPin: "left",
+      filter: { type: "text", icon: "fa-file-lines", operators: ["contains", "not_contains"] },
+      cell: row => (
+        <span className="line-clamp-2 text-sm font-medium text-foreground">{row.title}</span>
+      ),
+    },
+    {
+      key: "category",
+      label: "Category",
+      width: 160,
+      minWidth: 120,
+      sortable: true,
+      sortKey: "category",
+      filter: { type: "select", icon: "fa-layer-group", operators: ["is", "is_not"], options: catOpts },
+      cell: row => <span className="text-sm text-foreground/90">{row.category}</span>,
+    },
+    {
+      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={COMPLIANCE_STATUS_LABEL[row.status]}
+          tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
+          icon={COMPLIANCE_STATUS_ICON[row.status]}
+        />
+      ),
+    },
+    {
+      key: "dueDate",
+      label: "Due",
+      width: 120,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "dueDate",
+      filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
+      cell: row => (
+        <span className="text-sm tabular-nums text-foreground/90 whitespace-nowrap">{row.dueDate}</span>
+      ),
+    },
+    {
+      key: "owner",
+      label: "Owner",
+      width: 160,
+      minWidth: 120,
+      sortable: true,
+      sortKey: "owner",
+      filter: { type: "text", icon: "fa-user", operators: ["contains", "not_contains"] },
+      cell: row => <span className="text-sm text-foreground/90">{row.owner}</span>,
+    },
+    {
+      key: "lastReviewed",
+      label: "Last reviewed",
+      width: 120,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "lastReviewed",
+      filter: { type: "date", icon: "fa-calendar-check", operators: ["is", "is_not"] },
+      cell: row => (
+        <span className="text-sm tabular-nums text-muted-foreground whitespace-nowrap">{row.lastReviewed}</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.title}`}>
+                <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem disabled>
+                <i className="fa-light fa-eye" aria-hidden="true" />
+                View details
+              </DropdownMenuItem>
+              <DropdownMenuItem disabled>
+                <i className="fa-light fa-user-check" aria-hidden="true" />
+                Assign owner
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ),
+    },
+  ]
+}
+
+// ─── Panel view helpers ─────────────────────────────────────────────────────
+
+function buildCompliancePanelGroups(rows: ComplianceItem[]): FinderGroup[] {
+  const byCategory = new Map<string, ComplianceItem[]>()
+  for (const item of rows) {
+    if (!byCategory.has(item.category)) byCategory.set(item.category, [])
+    byCategory.get(item.category)!.push(item)
+  }
+  return Array.from(byCategory.keys())
+    .sort()
+    .map(category => ({
+      id: category,
+      label: category,
+      icon: "fa-folder",
+      count: (byCategory.get(category) ?? []).length,
+    }))
+}
+
+// ─── Dashboard body ─────────────────────────────────────────────────────────
+
+interface ComplianceDashboardBodyProps {
+  args: HubTableRendererArgs<ComplianceItem>
+  columns: ColumnDef<ComplianceItem>[]
+}
+
+function ComplianceDashboardBody({ args, columns }: ComplianceDashboardBodyProps) {
+  const { state, drawerToolbarProps, displayOptions } = args
+  const rows = state.rows as ComplianceItem[]
+
+  const dashboardKpi = React.useMemo(
+    () => ({ metrics: complianceKpiMetrics(rows), insight: complianceKpiInsight(rows) }),
+    [rows],
+  )
+
+  const [visibleCards, setVisibleCards] = React.useState<string[]>(() =>
+    ALL_COMPLIANCE_DASHBOARD_CARDS.map(c => c.id),
+  )
+  const [cardOrder, setCardOrder] = React.useState<string[]>(() =>
+    ALL_COMPLIANCE_DASHBOARD_CARDS.map(c => c.id),
+  )
+  const [cardSpans, setCardSpans] = React.useState<Record<string, 1 | 2>>(() => ({ ...DEFAULT_COMPLIANCE_SPANS }))
+  const [cardChartTypes, setCardChartTypes] = React.useState<Record<string, ChartType>>(() => ({
+    ...DEFAULT_COMPLIANCE_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 = loadComplianceDashboardLayout()
+    const m = mergeComplianceDashboardLayout(saved)
+    setVisibleCards(m.visible)
+    setCardOrder(m.order)
+    setCardSpans(m.spans ?? { ...DEFAULT_COMPLIANCE_SPANS })
+    setCardChartTypes(m.chartTypes ?? { ...DEFAULT_COMPLIANCE_CHART_TYPES })
+    setKpiCount(m.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
+    hydrated.current = true
+  }, [])
+
+  React.useEffect(() => {
+    if (!hydrated.current) return
+    saveComplianceDashboardLayout({
+      visible: visibleCards,
+      order: cardOrder,
+      spans: cardSpans,
+      chartTypes: cardChartTypes,
+      keyMetricsKpiCount: kpiCount,
+    })
+  }, [visibleCards, cardOrder, cardSpans, cardChartTypes, kpiCount])
+
+  const onResetLayout = React.useCallback(() => {
+    setVisibleCards(ALL_COMPLIANCE_DASHBOARD_CARDS.map(c => c.id))
+    setCardOrder(ALL_COMPLIANCE_DASHBOARD_CARDS.map(c => c.id))
+    setCardSpans({ ...DEFAULT_COMPLIANCE_SPANS })
+    setCardChartTypes({ ...DEFAULT_COMPLIANCE_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_COMPLIANCE_SPANS })
+      setCardChartTypes(b.chartTypes ?? { ...DEFAULT_COMPLIANCE_CHART_TYPES })
+      setKpiCount(b.keyMetricsKpiCount ?? KEY_METRICS_KPI_COUNT_DEFAULT)
+    }
+    setLayoutEdit(false)
+  }, [])
+
+  const coach = useCoachMark({
+    flowId: "compliance-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 compliance obligations"
+          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}
+      <ComplianceDashboardChartsSection
+        rows={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 ComplianceTableHandle = HubTableHandle
+
+export const ComplianceTable = React.forwardRef<
+  ComplianceTableHandle,
+  { items: ComplianceItem[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
+>(function ComplianceTable({ items, view = "table", onViewChange }, ref) {
+  const columns = React.useMemo(() => buildComplianceColumns(items), [items])
+
+  const renderers: HubTableRenderers<ComplianceItem> = {
+    "board-with-toolbar": ({ state, toolbarShell, displayOptions }) => {
+      const boardGroupKey = COMPLIANCE_BOARD_GROUP_OPTIONS.some(
+        o => o.key === displayOptions.boardGroupByColumnKey,
+      )
+        ? displayOptions.boardGroupByColumnKey
+        : "status"
+      return toolbarShell(
+        <ComplianceBoardView
+          rows={state.rows as ComplianceItem[]}
+          groupByColumnKey={boardGroupKey}
+          onRowActivate={row => state.toggleRow(row.id)}
+        />,
+      )
+    },
+    "panel-with-toolbar": ({ state, toolbarShell }) =>
+      toolbarShell(
+        <ListPageSplitHubChrome aria-label="Compliance obligations panel view">
+          <FinderPanelView<ComplianceItem>
+            embedded
+            groupsColumnTitle="Category"
+            groups={buildCompliancePanelGroups(state.rows as ComplianceItem[])}
+            rows={state.rows as ComplianceItem[]}
+            getRowId={row => row.id}
+            getRowGroupId={row => row.category}
+            autoSaveId="compliance-panel-view"
+            renderListRow={row => (
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-foreground truncate">{row.title}</p>
+                <p className="text-xs text-muted-foreground mt-1">{row.category}</p>
+              </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">Obligation</h3>
+                  <p className="text-sm text-foreground">{row.title}</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <div>
+                    <span className="text-xs font-medium text-muted-foreground">Category</span>
+                    <p className="text-sm text-foreground">{row.category}</p>
+                  </div>
+                  <div>
+                    <span className="text-xs font-medium text-muted-foreground">Status</span>
+                    <p className="text-sm text-foreground">{COMPLIANCE_STATUS_LABEL[row.status]}</p>
+                  </div>
+                </div>
+              </div>
+            )}
+            emptyList={<p className="text-sm text-muted-foreground">No obligations found.</p>}
+          />
+        </ListPageSplitHubChrome>,
+      ),
+    "dashboard-with-toolbar": args => <ComplianceDashboardBody args={args} columns={columns} />,
+  }
+
+  return (
+    <HubTable<ComplianceItem>
+      rows={items}
+      columns={columns}
+      view={view}
+      onViewChange={onViewChange}
+      supportedViewTypes={COMPLIANCE_SUPPORTED_VIEWS}
+      hubLabel="Compliance"
+      lifecycleTabLabel="Compliance"
+      searchAriaLabel="Search compliance obligations"
+      getRowId={row => row.id}
+      getRowSelectionLabel={row => row.title}
+      defaultSort={{ key: "dueDate", dir: "asc" }}
+      emptyState={<p className="text-sm text-muted-foreground">No compliance items.</p>}
+      boardGroupByColumnOptions={[...COMPLIANCE_BOARD_GROUP_OPTIONS]}
+      listAriaLabel="Compliance items"
+      listEmptyState="No compliance items match your filters."
+      renderListRow={row => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={COMPLIANCE_STATUS_LABEL[row.status]}
+                tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
+                icon={COMPLIANCE_STATUS_ICON[row.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="text-sm font-semibold text-foreground">{row.title}</p>
+            <p className="text-xs text-muted-foreground">
+              {row.category} · Due {row.dueDate}
+            </p>
+            <p className="text-xs text-muted-foreground">Owner: {row.owner}</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}
+    />
+  )
+})
+
+ComplianceTable.displayName = "ComplianceTable"

package/template/components/dashboard-report-charts.tsx

@@ -11,7 +11,7 @@
 
 import * as React from "react"
 import { DashboardPromoBanner } from "@/components/dashboard-promo-banner"
-import { GettingStarted } from "@/components/getting-started"
+import { GettingStarted } from "@/components/onboarding/getting-started"
 import { KeyMetrics, type MetricInsight, type MetricItem } from "@/components/key-metrics"
 import { ChartsOverview, type ChartCardVariant } from "@/components/charts-overview"
 import { useChartVariant } from "@/contexts/chart-variant-context"

package/template/components/dashboard-tabs.tsx

@@ -15,7 +15,7 @@ import { Separator } from "@/components/ui/separator"
 import { KeyMetrics, type MetricItem, type MetricInsight } from "@/components/key-metrics"
 import type { ChartCardVariant } from "@/components/charts-overview"
 import { DashboardReportCharts } from "@/components/dashboard-report-charts"
-import { GettingStarted, GettingStartedProgressCard } from "@/components/getting-started"
+import { GettingStarted, GettingStartedProgressCard } from "@/components/onboarding/getting-started"
 import { TaskListPanel, type TaskListItem } from "@/components/task-list-panel"
 import { PageHeader } from "@/components/page-header"
 import { useDashboardView }  from "@/contexts/dashboard-view-context"

package/template/components/data-table/filter-date-calendar.tsx

@@ -1,38 +1 @@
-"use client"
-
-import * as React from "react"
-import { Calendar } from "@/components/ui/calendar"
-import { localDateToYmd, ymdToLocalDate } from "@/lib/date-filter"
-
-/** Single-date calendar for table filters (YYYY-MM-DD). */
-export function FilterDateCalendar({
-  valueYmd,
-  onChangeYmd,
-  label,
-}: {
-  valueYmd: string | undefined
-  onChangeYmd: (ymd: string | undefined) => void
-  label: string
-}) {
-  const [timeZone, setTimeZone] = React.useState<string | undefined>()
-  React.useEffect(() => {
-    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
-  }, [])
-
-  return (
-    <div
-      className="rounded-lg border border-border overflow-hidden"
-      role="group"
-      aria-label={label}
-    >
-      <Calendar
-        mode="single"
-        selected={ymdToLocalDate(valueYmd)}
-        onSelect={(d) => onChangeYmd(d ? localDateToYmd(d) : undefined)}
-        captionLayout="dropdown"
-        timeZone={timeZone}
-        className="rounded-lg border-0"
-      />
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-table/filter-date-calendar"

package/template/components/data-table/filter-text-value-input.tsx

@@ -1,77 +1 @@
-"use client"
-
-import * as React from "react"
-import { DateTextInputField } from "@/components/ui/date-picker-field"
-import { Input } from "@/components/ui/input"
-import { MaskedInput, exxatMaskPatterns } from "@/components/ui/input-mask"
-import type { Mask } from "@/components/ui/input-mask"
-import type { FilterTextMask } from "@/components/table-properties/types"
-
-const MASK_BY_KIND: Record<FilterTextMask, Mask> = {
-  phone: exxatMaskPatterns.phoneUS,
-  zip: exxatMaskPatterns.zipUS,
-  dateMDY: exxatMaskPatterns.dateMDY,
-}
-
-export function FilterTextValueInput({
-  id,
-  mask,
-  value,
-  onValueChange,
-  "aria-label": ariaLabel,
-  placeholder,
-  className,
-  autoFocus,
-}: {
-  id?: string
-  mask?: FilterTextMask
-  value: string
-  onValueChange: (next: string) => void
-  "aria-label": string
-  placeholder?: string
-  className?: string
-  autoFocus?: boolean
-}) {
-  if (mask === "dateMDY") {
-    return (
-      <DateTextInputField
-        id={id}
-        value={value}
-        onValueChange={onValueChange}
-        aria-label={ariaLabel}
-        placeholder={placeholder}
-        inputClassName={className}
-        autoFocus={autoFocus}
-        iconButtonVariant="ghost"
-        popoverAlign="end"
-      />
-    )
-  }
-
-  if (mask) {
-    return (
-      <MaskedInput
-        id={id}
-        mask={MASK_BY_KIND[mask]}
-        aria-label={ariaLabel}
-        placeholder={placeholder}
-        value={value}
-        onChange={e => onValueChange(e.target.value)}
-        className={className}
-        autoFocus={autoFocus}
-      />
-    )
-  }
-  return (
-    <Input
-      id={id}
-      type="text"
-      aria-label={ariaLabel}
-      placeholder={placeholder}
-      value={value}
-      onChange={e => onValueChange(e.target.value)}
-      className={className}
-      autoFocus={autoFocus}
-    />
-  )
-}
+export * from "@exxatdesignux/ui/components/data-table/filter-text-value-input"