@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -0,0 +1,397 @@
+"use client"
+
+/**
+ * PlacementsBoardView — kanban-style board by placement phase (domain-specific columns).
+ * View chrome labels use `dataListViewLabel` from `@/lib/data-list-view` at the page level;
+ * this component focuses on placement phase grouping + shared card primitives.
+ */
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { cn } from "@/lib/utils"
+import type { Placement, PlacementPhase } from "@/lib/mock/placements"
+import { Input } from "@/components/ui/input"
+import { Tip } from "@/components/ui/tip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DEFAULT_DATA_LIST_DISPLAY_OPTIONS, type BoardLineCount } from "@/lib/data-list-display-options"
+import type { ConditionalRule } from "@/components/table-properties/types"
+import type { ColumnDef } from "@/components/data-table/types"
+import { Badge } from "@/components/ui/badge"
+import { BoardPlacementCard } from "@/components/placement-board-card"
+import { BoardNewCardPlaceholder } from "@/components/data-views/board-card-primitives"
+
+const PHASE_COLUMNS: { phase: PlacementPhase; label: string; description: string }[] = [
+  { phase: "upcoming",  label: "Upcoming",  description: "Starting soon" },
+  { phase: "ongoing",   label: "Ongoing",   description: "In progress" },
+  { phase: "completed", label: "Completed", description: "Finished" },
+]
+
+/** Substring match across visible card fields (per-phase quick search). */
+function rowMatchesPhaseSearch(row: Placement, q: string): boolean {
+  if (!q.trim()) return true
+  const lower = q.toLowerCase()
+  const hay = [
+    row.student,
+    row.site,
+    row.specialization,
+    row.internship,
+    row.program,
+    row.status,
+    row.supervisor,
+    row.email,
+    row.start,
+  ]
+    .map(v => String(v ?? "").toLowerCase())
+    .join(" ")
+  return hay.includes(lower)
+}
+
+export interface PlacementsBoardColumnMenu {
+  filterableColumns: { key: string; label: string }[]
+  sortableColumns: { key: string; label: string }[]
+  groupableColumns: { key: string; label: string }[]
+  groupBy: string | null
+  onAddFilter: (fieldKey: string) => void
+  onSortByField: (fieldKey: string, direction: "asc" | "desc") => void
+  onToggleGroupBy: (fieldKey: string) => void
+  onOpenProperties: () => void
+}
+
+export interface BoardDisplaySettings {
+  lineCount: BoardLineCount
+  showColumnLabels: boolean
+  showColumnCounts: boolean
+  newCardAbove: boolean
+}
+
+export interface PlacementsBoardViewProps {
+  placements: Placement[]
+  /** When set, each phase column header shows the same actions as a DataTable column header. */
+  boardColumnMenu?: PlacementsBoardColumnMenu
+  /** Board display options (Properties → view display). */
+  boardDisplay?: BoardDisplaySettings
+  /** Column visibility from table state — hidden columns omit matching card fields. */
+  hiddenColKeys?: Set<string>
+  /** Same conditional formatting as the table (row background when a rule matches). */
+  conditionalRules?: ConditionalRule[]
+  /** Visible data columns (table order) — drives dates and other fields on the card. */
+  boardColumns: ColumnDef<Placement>[]
+}
+
+function BoardPhaseColumnHeader({
+  label,
+  rawCount,
+  filteredCount,
+  searchValue,
+  onSearchChange,
+  menu,
+  showLabels,
+  showCounts,
+}: {
+  label: string
+  rawCount: number
+  filteredCount: number
+  searchValue: string
+  onSearchChange: (value: string) => void
+  menu: PlacementsBoardColumnMenu
+  showLabels: boolean
+  showCounts: boolean
+}) {
+  const searchActive = Boolean(searchValue.trim())
+  const countLabel =
+    searchActive && filteredCount !== rawCount
+      ? `${filteredCount} of ${rawCount} records`
+      : `${filteredCount} ${filteredCount === 1 ? "record" : "records"}`
+
+  const showLeft = showLabels || showCounts
+
+  return (
+    <div className="group/board-col border-b border-border px-3 py-2.5">
+      <div className="flex items-center justify-between gap-2">
+        {showLeft ? (
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            {showLabels ? (
+              <p className="min-w-0 truncate text-sm font-semibold text-foreground">{label}</p>
+            ) : null}
+            {showCounts ? (
+              <div className="flex shrink-0 items-center gap-1.5">
+                <Badge
+                  variant="outline"
+                  className="inline-flex h-6 min-w-6 items-center justify-center border-0 bg-muted/70 px-2 text-xs font-semibold tabular-nums text-foreground"
+                  aria-label={countLabel}
+                >
+                  {filteredCount}
+                </Badge>
+                {searchActive && filteredCount !== rawCount ? (
+                  <span className="text-xs font-medium tabular-nums text-muted-foreground" aria-hidden>
+                    / {rawCount}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <div className="min-w-0 flex-1" aria-hidden />
+        )}
+        <DropdownMenu>
+          <Tip label="Column options" side="top">
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                aria-label={`${label} column options`}
+                onClick={e => e.stopPropagation()}
+                className={cn(
+                  "opacity-0 group-hover/board-col:opacity-100 group-focus-within/board-col:opacity-100",
+                  "inline-flex shrink-0 items-center justify-center size-7 rounded-md",
+                  "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-row",
+                  "transition-opacity focus-visible:opacity-100",
+                  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                )}
+              >
+                <i className="fa-light fa-ellipsis-vertical text-xs" aria-hidden="true" />
+              </button>
+            </DropdownMenuTrigger>
+          </Tip>
+          <DropdownMenuContent align="end">
+            <div className="px-2 pt-2 pb-1">
+              <div className="relative">
+                <i
+                  className="fa-light fa-magnifying-glass pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
+                  aria-hidden="true"
+                />
+                <Input
+                  placeholder={`Search ${label}…`}
+                  value={searchValue}
+                  onChange={e => onSearchChange(e.target.value)}
+                  onKeyDown={e => e.stopPropagation()}
+                  className="h-7 ps-6 text-xs"
+                />
+                {searchValue ? (
+                  <button
+                    type="button"
+                    aria-label="Clear search"
+                    onClick={() => onSearchChange("")}
+                    className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-interactive-hover-foreground"
+                  >
+                    <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
+            <DropdownMenuSeparator />
+
+            {menu.filterableColumns.length > 0 && (
+              <>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <i className="fa-light fa-filter" aria-hidden="true" />
+                    Filter by field…
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent className="max-h-[min(280px,60vh)] overflow-y-auto">
+                    {menu.filterableColumns.map(col => (
+                      <DropdownMenuItem key={col.key} onClick={() => menu.onAddFilter(col.key)}>
+                        {col.label}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuSeparator />
+              </>
+            )}
+
+            {menu.sortableColumns.length > 0 && (
+              <>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <i className="fa-light fa-arrow-up-arrow-down" aria-hidden="true" />
+                    Sort by…
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent className="max-h-[min(320px,60vh)] overflow-y-auto">
+                    {menu.sortableColumns.map(col => (
+                      <React.Fragment key={col.key}>
+                        <DropdownMenuItem onClick={() => menu.onSortByField(col.key, "asc")}>
+                          <i className="fa-light fa-arrow-up-a-z" aria-hidden="true" />
+                          {col.label} — ascending
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => menu.onSortByField(col.key, "desc")}>
+                          <i className="fa-light fa-arrow-down-a-z" aria-hidden="true" />
+                          {col.label} — descending
+                        </DropdownMenuItem>
+                      </React.Fragment>
+                    ))}
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuSeparator />
+              </>
+            )}
+
+            {menu.groupableColumns.length > 0 && (
+              <>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <i className="fa-light fa-layer-group" aria-hidden="true" />
+                    Group by…
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent className="max-h-[min(280px,60vh)] overflow-y-auto">
+                    {menu.groupableColumns.map(col => (
+                      <DropdownMenuItem
+                        key={col.key}
+                        onClick={() => menu.onToggleGroupBy(col.key)}
+                      >
+                        {menu.groupBy === col.key ? (
+                          <>
+                            <i className="fa-light fa-check text-xs" aria-hidden="true" />
+                            Grouped by {col.label}
+                          </>
+                        ) : (
+                          <>
+                            <span className="inline-block w-3" aria-hidden />
+                            Group by {col.label}
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+                <DropdownMenuSeparator />
+              </>
+            )}
+
+            <DropdownMenuItem onClick={menu.onOpenProperties}>
+              <i className="fa-light fa-palette" aria-hidden="true" />
+              Add conditional rule
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+export function PlacementsBoardView({
+  placements,
+  boardColumnMenu,
+  boardDisplay: boardDisplayProp,
+  hiddenColKeys: hiddenColKeysProp,
+  conditionalRules,
+  boardColumns,
+}: PlacementsBoardViewProps) {
+  const router = useRouter()
+
+  const bd: BoardDisplaySettings = {
+    lineCount: boardDisplayProp?.lineCount ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS.boardLineCount,
+    showColumnLabels: boardDisplayProp?.showColumnLabels ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS.showColumnLabels,
+    showColumnCounts: boardDisplayProp?.showColumnCounts ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS.showBoardColumnCounts,
+    newCardAbove: boardDisplayProp?.newCardAbove ?? DEFAULT_DATA_LIST_DISPLAY_OPTIONS.boardNewCardAbove,
+  }
+  const hiddenColKeys = hiddenColKeysProp ?? new Set<string>()
+
+  const [phaseSearch, setPhaseSearch] = React.useState<Record<PlacementPhase, string>>({
+    upcoming: "",
+    ongoing: "",
+    completed: "",
+  })
+
+  const byPhase = React.useMemo(() => {
+    const map: Record<PlacementPhase, Placement[]> = {
+      upcoming: [],
+      ongoing: [],
+      completed: [],
+    }
+    for (const p of placements) {
+      map[p.placementPhase].push(p)
+    }
+    return map
+  }, [placements])
+
+  const cardsByPhase = React.useMemo(() => {
+    const out: Record<PlacementPhase, Placement[]> = {
+      upcoming: [],
+      ongoing: [],
+      completed: [],
+    }
+    for (const phase of PHASE_COLUMNS.map(c => c.phase)) {
+      const q = phaseSearch[phase]
+      out[phase] = byPhase[phase].filter(row => rowMatchesPhaseSearch(row, q))
+    }
+    return out
+  }, [byPhase, phaseSearch])
+
+  return (
+    <div className="px-4 pb-8 pt-2 lg:px-6">
+      <p className="text-xs text-muted-foreground mb-4">
+        Rows grouped by phase (same data as Table view and List view).
+      </p>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3 min-h-[min(480px,calc(100vh-14rem))]">
+        {PHASE_COLUMNS.map(col => {
+          const rawInPhase = byPhase[col.phase]
+          const cards = cardsByPhase[col.phase]
+
+          return (
+            <div
+              key={col.phase}
+              className="group/board-col flex min-h-0 flex-col rounded-xl border border-border bg-muted/30"
+            >
+              {boardColumnMenu ? (
+                <BoardPhaseColumnHeader
+                  label={col.label}
+                  rawCount={rawInPhase.length}
+                  filteredCount={cards.length}
+                  searchValue={phaseSearch[col.phase]}
+                  onSearchChange={v => setPhaseSearch(prev => ({ ...prev, [col.phase]: v }))}
+                  menu={boardColumnMenu}
+                  showLabels={bd.showColumnLabels}
+                  showCounts={bd.showColumnCounts}
+                />
+              ) : (
+                <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-2.5">
+                  {bd.showColumnLabels ? (
+                    <p className="min-w-0 truncate text-sm font-semibold text-foreground">{col.label}</p>
+                  ) : (
+                    <span className="min-w-0 flex-1" aria-hidden />
+                  )}
+                  {bd.showColumnCounts ? (
+                    <Badge
+                      variant="outline"
+                      className="inline-flex h-6 min-w-6 shrink-0 items-center justify-center border-0 bg-muted/70 px-2 text-xs font-semibold tabular-nums text-foreground"
+                      aria-label={`${rawInPhase.length} ${rawInPhase.length === 1 ? "record" : "records"}`}
+                    >
+                      {rawInPhase.length}
+                    </Badge>
+                  ) : null}
+                </div>
+              )}
+              <div className="flex flex-1 flex-col gap-2 overflow-y-auto p-2">
+                {bd.newCardAbove ? <BoardNewCardPlaceholder position="above" /> : null}
+                {cards.length === 0 ? (
+                  <p className="px-2 py-6 text-center text-xs text-muted-foreground">No placements</p>
+                ) : (
+                  cards.map(row => (
+                    <BoardPlacementCard
+                      key={row.id}
+                      row={row}
+                      hiddenColKeys={hiddenColKeys}
+                      lineCount={bd.lineCount}
+                      conditionalRules={conditionalRules}
+                      boardColumns={boardColumns}
+                      onOpen={id => router.push(`/data-list/${id}`)}
+                    />
+                  ))
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/template/components/placements-client.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+/**
+ * PlacementsClient — placements hub composition on the reusable
+ * `ListPageTemplate`. Owns the per-page persisted layout (tabs, display
+ * options, show-metrics toggle) and mounts `PlacementsTable` per tab.
+ *
+ * Uses centralized exports from `@/components/data-views`.
+ *
+ * NOTE: Lifecycle (all/upcoming/ongoing/completed) segments have been removed.
+ * All tabs read the same row bag; users can create their own segments via
+ * "Add view" / filters.
+ */
+
+import * as React from "react"
+import { useRouter }   from "next/navigation"
+import { useSidebar }  from "@/components/ui/sidebar"
+import {
+  ListPageTemplate,
+  type ViewTab,
+  PlacementsTable,
+  type PlacementsTableHandle,
+  type DataListViewType,
+  dataListViewIcon,
+} from "@/components/data-views"
+import { PlacementsPageHeader } from "@/components/placements-page-header"
+import {
+  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  type DataListDisplayOptions,
+} from "@/lib/data-list-display-options"
+import { loadPageFromStorage, schedulePageSave } from "@/lib/data-list-persistence"
+import { KeyMetrics }  from "@/components/key-metrics"
+import { ALL_PLACEMENTS } from "@/lib/mock/placements"
+import { PLACEMENT_KPI_INSIGHT, PLACEMENT_KPI_METRICS } from "@/lib/mock/placements-kpi"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { CoachMark } from "@/components/ui/coach-mark"
+import { useCoachMark, type CoachMarkStep } from "@/hooks/use-coach-mark"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Coach mark flow — Views & Properties tour
+// ─────────────────────────────────────────────────────────────────────────────
+
+const VIEWS_TOUR_STEPS: CoachMarkStep[] = [
+  {
+    id: "views-tabs",
+    target: "[role='toolbar'][aria-label='Views']",
+    side: "bottom",
+    align: "start",
+    title: "Switch Between Views",
+    description:
+      "Use these tabs to move between saved views. Each tab keeps its own layout, filters, and properties.",
+  },
+  {
+    id: "views-settings",
+    target: "[aria-label='View settings']",
+    side: "bottom",
+    align: "start",
+    title: "Customise Each View",
+    description:
+      "Click the dropdown arrow to rename, duplicate, or edit a view. Choose between Table, List, Board, or Dashboard layouts.",
+  },
+  {
+    id: "views-add",
+    target: "button:has(.fa-plus) + .fa-plus, [aria-label='Views'] ~ button",
+    side: "bottom",
+    align: "start",
+    title: "Create New Views",
+    description:
+      "Add custom views with different layouts and filters. Create a Board view for visual tracking, or a Dashboard for charts and KPIs.",
+  },
+  {
+    id: "views-search",
+    target: "button[aria-label='Search']",
+    side: "bottom",
+    align: "end",
+    title: "Quick Search",
+    description:
+      "Instantly search across all visible columns. Press ⌘K to open search from anywhere on the page.",
+  },
+  {
+    id: "views-filter",
+    target: "button[aria-label='Add filter']:last-of-type, button:has(.fa-filter-list)",
+    side: "bottom",
+    align: "end",
+    title: "Filter Your Data",
+    description:
+      "Add filters to narrow down results. Combine multiple conditions — filter by status, date, site, program, and more.",
+  },
+  {
+    id: "views-properties",
+    target: "button[aria-label='Properties']",
+    side: "bottom",
+    align: "end",
+    title: "Table Properties",
+    description:
+      "Open the Properties panel to manage columns, sort order, conditional formatting, density, and gridlines. Everything is saved per view.",
+  },
+]
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Config
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DEFAULT_TABS: ViewTab[] = [
+  { id: "all", label: "All", viewType: "table", icon: "fa-table", filterId: "all" },
+]
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function PlacementsClient() {
+  const router = useRouter()
+  const { setOpen } = useSidebar()
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const [exportOpen, setExportOpen]   = React.useState(false)
+  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
+  const [tabs, setTabs] = React.useState<ViewTab[]>(DEFAULT_TABS)
+  const [activeTabId, setActiveTabId] = React.useState<string>(DEFAULT_TABS[0]?.id ?? "")
+  const tableRef = React.useRef<PlacementsTableHandle>(null)
+
+  const viewsTour = useCoachMark({
+    flowId: "data-list-views-tour",
+    steps: VIEWS_TOUR_STEPS,
+    delay: 1200,
+  })
+
+  const activeTab = tabs.find((t) => t.id === activeTabId)
+  const placementCount = ALL_PLACEMENTS.length
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "List hub",
+        description: activeTab
+          ? `${placementCount} row${placementCount === 1 ? "" : "s"} in “${activeTab.label}” · ${activeTab.viewType} view.`
+          : undefined,
+        suggestions: [
+          "Which rows are due in the next 30 days?",
+          "Summarize what is visible after my filters",
+          "What columns help reviewers scan this grid quickly?",
+        ],
+      }),
+      [activeTab, placementCount],
+    ),
+  )
+
+  React.useLayoutEffect(() => {
+    const p = loadPageFromStorage()
+    if (!p) return
+    setDisplayOptions({ ...DEFAULT_DATA_LIST_DISPLAY_OPTIONS, ...p.displayOptions })
+    setShowMetrics(p.showMetrics)
+    setTabs(p.tabs)
+    const nextActive = p.tabs.some(t => t.id === p.activeTabId) ? p.activeTabId : (p.tabs[0]?.id ?? "")
+    setActiveTabId(nextActive)
+  }, [])
+
+  React.useEffect(() => {
+    schedulePageSave({
+      v: 1,
+      displayOptions,
+      showMetrics,
+      tabs,
+      activeTabId,
+    })
+  }, [displayOptions, showMetrics, tabs, activeTabId])
+
+  function handleNewPlacement() {
+    setOpen(false)
+    setTimeout(() => router.push("/data-list/new"), 260)
+  }
+
+  return (
+    <>
+    <CoachMark state={viewsTour} />
+    <div className="flex min-h-0 flex-1 flex-col">
+    <ListPageTemplate
+      tabs={tabs}
+      onTabsChange={setTabs}
+      activeTabId={activeTabId}
+      onActiveTabChange={setActiveTabId}
+      tablePropertiesRef={tableRef}
+      header={
+        <PlacementsPageHeader
+          onNewPlacement={handleNewPlacement}
+          onExport={() => setExportOpen(true)}
+          showMetrics={showMetrics}
+          onToggleMetrics={() => setShowMetrics(v => !v)}
+          showTitleBlock={displayOptions.showViewTitle}
+        />
+      }
+      metrics={
+        <KeyMetrics
+          variant="flat"
+          metrics={PLACEMENT_KPI_METRICS}
+          insight={PLACEMENT_KPI_INSIGHT}
+          showHeader={false}
+          metricsSingleRow
+        />
+      }
+      showMetrics={showMetrics}
+      defaultTabs={DEFAULT_TABS}
+      renderContent={(tab, updateTab) => (
+        <PlacementsTable
+          key={tab.id}
+          ref={tableRef}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+          displayOptions={displayOptions}
+          onDisplayOptionsChange={patch =>
+            setDisplayOptions(prev => ({ ...prev, ...patch }))}
+        />
+      )}
+      exportOpen={exportOpen}
+      onExportOpenChange={setExportOpen}
+    />
+    </div>
+    </>
+  )
+}