@exxatdesignux/ui 0.0.5 → 0.0.7

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

@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import {
+  COMPLIANCE_STATUS_BADGE_CLASS,
+  COMPLIANCE_STATUS_ICON,
+  COMPLIANCE_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { ComplianceItem } from "@/lib/mock/compliance"
+import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardAvatar,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "@/components/data-views/list-page-board-template"
+
+const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
+
+const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<ComplianceItem>[] = [
+  {
+    id: "compliant",
+    label: "Compliant",
+    description: "On track",
+    filter: r => r.status === "compliant",
+  },
+  {
+    id: "due_soon",
+    label: "Due soon",
+    description: "Within window",
+    filter: r => r.status === "due_soon",
+  },
+  {
+    id: "overdue",
+    label: "Overdue",
+    description: "Action required",
+    filter: r => r.status === "overdue",
+  },
+  {
+    id: "pending",
+    label: "Pending",
+    description: "Not started",
+    filter: r => r.status === "pending",
+  },
+]
+
+function categoryBoardColumns(rows: ComplianceItem[]): {
+  columns: ListPageBoardColumnDef<ComplianceItem>[]
+  badgeMap: Record<string, string>
+} {
+  const labels = [...new Set(rows.map(r => r.category))].sort((a, b) => a.localeCompare(b))
+  const columns: ListPageBoardColumnDef<ComplianceItem>[] = labels.map(label => ({
+    id: `category:${label}`,
+    label,
+    filter: (r: ComplianceItem) => r.category === label,
+  }))
+  const badgeMap = Object.fromEntries(labels.map(l => [`category:${l}`, NEUTRAL_COUNT_BADGE]))
+  return { columns, badgeMap }
+}
+
+function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: string) {
+  return React.useMemo(() => {
+    if (groupByColumnKey === "category") {
+      const { columns, badgeMap } = categoryBoardColumns(rows)
+      return { columns, badgeMap }
+    }
+    return {
+      columns: STATUS_BOARD_COLUMNS,
+      badgeMap: COMPLIANCE_STATUS_BADGE_CLASS as Record<string, string>,
+    }
+  }, [rows, groupByColumnKey])
+}
+
+function ComplianceBoardCard({ row }: { row: ComplianceItem }) {
+  const ownerInitials = initialsFromDisplayName(row.owner)
+  return (
+    <ListPageBoardCard className="w-full">
+      <ListPageBoardCardHeader>
+        <ListPageBoardCardTitleRow
+          title={row.title}
+          titleClassName="line-clamp-2"
+          trailing={<ListPageBoardCardAvatar initials={ownerInitials} />}
+        />
+        <ListPageBoardCardBadgeRow>
+          <ListHubStatusBadge
+            surface="board"
+            label={COMPLIANCE_STATUS_LABEL[row.status]}
+            tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
+            icon={COMPLIANCE_STATUS_ICON[row.status]}
+          />
+        </ListPageBoardCardBadgeRow>
+        <ListPageBoardCardBody>
+          <BoardCardTwoLineBlock iconClass="fa-tag" line1={row.category} line2={`Due ${row.dueDate}`} />
+          <BoardCardTwoLineBlock iconClass="fa-user" line1={row.owner} line2="Owner" />
+        </ListPageBoardCardBody>
+      </ListPageBoardCardHeader>
+    </ListPageBoardCard>
+  )
+}
+
+export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
+  { key: "status", label: "Status" },
+  { key: "category", label: "Category" },
+] as const
+
+export function ComplianceBoardView({
+  rows,
+  groupByColumnKey,
+}: {
+  rows: ComplianceItem[]
+  groupByColumnKey: string
+}) {
+  const key = groupByColumnKey === "category" ? "category" : "status"
+  const { columns, badgeMap } = useComplianceBoardModel(rows, key)
+
+  return (
+    <ListPageBoardTemplate
+      columns={columns}
+      rows={rows}
+      getRowKey={r => r.id}
+      columnCountBadgeClassName={badgeMap}
+      emptyColumnLabel="No items"
+      renderCard={row => <ComplianceBoardCard row={row} />}
+    />
+  )
+}

package/template/components/compliance-client.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+/**
+ * Compliance list page — `ListPageTemplate` + `ComplianceTable`; view types from `@/components/data-views`.
+ */
+
+import * as React from "react"
+import {
+  ListPageTemplate,
+  type ViewTab,
+  dataListViewIcon,
+  type DataListViewType,
+} from "@/components/data-views"
+import { CompliancePageHeader } from "@/components/compliance-page-header"
+import { ComplianceTable, type ComplianceTableHandle } from "@/components/compliance-table"
+import { KeyMetrics } from "@/components/key-metrics"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { COMPLIANCE_ITEMS } from "@/lib/mock/compliance"
+import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
+
+const DEFAULT_TABS: ViewTab[] = [
+  {
+    id: "obligations",
+    label: "Obligations",
+    viewType: "table",
+    icon: "fa-table",
+    filterId: "all",
+  },
+]
+
+export function ComplianceClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const tableRef = React.useRef<ComplianceTableHandle>(null)
+  const count = COMPLIANCE_ITEMS.length
+
+  const metrics = React.useMemo(() => complianceKpiMetrics(COMPLIANCE_ITEMS), [])
+  const insight = React.useMemo(() => complianceKpiInsight(COMPLIANCE_ITEMS), [])
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "Compliance",
+        description: `${count} obligations tracked on this hub.`,
+        suggestions: [
+          "What’s due this week?",
+          "Summarize open items by student",
+        ],
+      }),
+      [count],
+    ),
+  )
+
+  return (
+    <ListPageTemplate
+      defaultTabs={DEFAULT_TABS}
+      getTabCount={() => count}
+      tablePropertiesRef={tableRef}
+      header={
+        <CompliancePageHeader
+          itemCount={count}
+          onAddReview={() => {}}
+          onExport={() => setExportOpen(true)}
+          showMetrics={showMetrics}
+          onToggleMetrics={() => setShowMetrics(v => !v)}
+        />
+      }
+      metrics={
+        <KeyMetrics
+          variant="flat"
+          metrics={metrics}
+          insight={insight}
+          showHeader={false}
+          metricsSingleRow
+        />
+      }
+      showMetrics={showMetrics}
+      exportOpen={exportOpen}
+      onExportOpenChange={setExportOpen}
+      exportTotalRows={count}
+      renderContent={(tab, updateTab) => (
+        <ComplianceTable
+          key={tab.id}
+          ref={tableRef}
+          items={COMPLIANCE_ITEMS}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+        />
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import {
+  COMPLIANCE_STATUS_BADGE_CLASS,
+  COMPLIANCE_STATUS_ICON,
+  COMPLIANCE_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { ComplianceItem } from "@/lib/mock/compliance"
+
+function ComplianceListRow({ row }: { row: ComplianceItem }) {
+  return (
+    <li>
+      <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>
+    </li>
+  )
+}
+
+export function ComplianceListView({ rows }: { rows: ComplianceItem[] }) {
+  if (rows.length === 0) {
+    return (
+      <div className="px-4 py-16 text-center lg:px-6">
+        <p className="text-sm text-muted-foreground">No compliance items match your filters.</p>
+      </div>
+    )
+  }
+
+  return (
+    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
+      {rows.map(row => (
+        <ComplianceListRow key={row.id} row={row} />
+      ))}
+    </ul>
+  )
+}

package/template/components/compliance-page-header.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { PageHeader } from "@/components/page-header"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+
+export interface CompliancePageHeaderProps {
+  itemCount: number
+  onAddReview: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+  showTitleBlock?: boolean
+}
+
+export function CompliancePageHeader({
+  itemCount,
+  onAddReview,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+  showTitleBlock = true,
+}: CompliancePageHeaderProps) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  const countLine = `${itemCount} ${itemCount === 1 ? "item" : "items"} · Last updated now`
+
+  return (
+    <PageHeader
+      title="Compliance"
+      subtitle={countLine}
+      showTitleBlock={showTitleBlock}
+      actions={(
+        <div className="flex items-center gap-2" role="group" aria-label="Compliance actions">
+          <Tip side="bottom" label="Schedule a review (demo)">
+            <Button type="button" size="lg" onClick={onAddReview}>
+              <i className="fa-light fa-calendar-check" aria-hidden="true" />
+              New review
+            </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>
+      )}
+    />
+  )
+}