@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/compliance-table.tsx

@@ -1,468 +0,0 @@
-"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"