@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/components/data-views/placement-board-card.tsx

@@ -0,0 +1,262 @@
+"use client"
+
+/**
+ * Placement-specific board card — composes shared board primitives with column defs and lifecycle layout rules.
+ */
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { Placement } from "@/lib/mock/placements"
+import { StatusBadge } from "@/components/data-list-table-cells"
+import { AvatarInitials } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardSecondary,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import type { BoardLineCount } from "@/lib/data-list-display-options"
+import {
+  type BoardCardLifecycleTabId,
+  filterColumnsForBoardCard,
+  isBoardFieldActive,
+  remainingBodyColumns,
+  scheduleKeysForTab,
+} from "@/lib/placement-board-card-layout"
+import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
+import type { ConditionalRule } from "@/components/table-properties/types"
+import type { CellContext, ColumnDef } from "@/components/data-table/types"
+import {
+  BoardCardIconRow,
+  BoardCardTwoLineBlock,
+  lineClampClass,
+} from "@/components/data-views/board-card-primitives"
+
+const BOARD_CELL_CTX: CellContext<Placement> = {
+  rowIndex: 0,
+  selected: false,
+  onSelect: () => {},
+}
+
+function columnIconClass(col: ColumnDef<Placement>): string {
+  if (col.filter?.icon) return col.filter.icon
+  const fallbacks: Record<string, string> = {
+    specialization: "fa-stethoscope",
+    site: "fa-hospital",
+    internship: "fa-briefcase",
+    supervisor: "fa-user-tie",
+    start: "fa-calendar-days",
+    compliance: "fa-shield-check",
+    daysUntilStart: "fa-calendar-days",
+    readiness: "fa-flag",
+    progressWeeksDone: "fa-chart-line",
+    endDate: "fa-calendar-xmark",
+    lastCheckin: "fa-calendar-clock",
+    completionDate: "fa-calendar-check",
+    finalStatus: "fa-circle-check",
+    rating: "fa-star",
+    suggestedToHire: "fa-user-check",
+    duration: "fa-clock",
+    program: "fa-graduation-cap",
+    student: "fa-user",
+    status: "fa-circle-dot",
+  }
+  return fallbacks[col.key] ?? "fa-tag"
+}
+
+function boardCellContent(row: Placement, col: ColumnDef<Placement>): React.ReactNode {
+  if (col.key === "status") return <StatusBadge status={row.status} surface="board" />
+  if (col.cell) return col.cell(row, BOARD_CELL_CTX)
+  return <span className="text-foreground/90">{String(row[col.key as keyof Placement] ?? "")}</span>
+}
+
+function renderScheduleSection(
+  row: Placement,
+  tab: BoardCardLifecycleTabId,
+  hiddenColKeys: Set<string>,
+  boardColumns: ColumnDef<Placement>[],
+): React.ReactNode {
+  const sk = scheduleKeysForTab(tab)
+  const anyActive = sk.some(k => isBoardFieldActive(k, tab, hiddenColKeys, boardColumns))
+  if (!anyActive) return null
+
+  switch (tab) {
+    case "all": {
+      const aStart = isBoardFieldActive("start", tab, hiddenColKeys, boardColumns)
+      const aDur = isBoardFieldActive("duration", tab, hiddenColKeys, boardColumns)
+      if (!aStart && !aDur) return null
+      return (
+        <BoardCardTwoLineBlock
+          iconClass="fa-calendar-days"
+          line1={aStart ? row.start : "—"}
+          line2={aDur ? row.duration : "—"}
+        />
+      )
+    }
+    case "upcoming": {
+      const aStart = isBoardFieldActive("start", tab, hiddenColKeys, boardColumns)
+      const aDays = isBoardFieldActive("daysUntilStart", tab, hiddenColKeys, boardColumns)
+      if (!aStart && !aDays) return null
+      const line2 =
+        aDays && row.daysUntilStart > 0
+          ? `Starts in ${row.daysUntilStart} days`
+          : aDays && row.daysUntilStart === 0
+            ? "Starts today"
+            : "—"
+      return (
+        <BoardCardTwoLineBlock
+          iconClass="fa-calendar-days"
+          line1={aStart ? row.start : "—"}
+          line2={line2}
+        />
+      )
+    }
+    case "ongoing": {
+      const aP = isBoardFieldActive("progressWeeksDone", tab, hiddenColKeys, boardColumns)
+      const aEnd = isBoardFieldActive("endDate", tab, hiddenColKeys, boardColumns)
+      if (!aP && !aEnd) return null
+      return (
+        <BoardCardTwoLineBlock
+          iconClass="fa-calendar-days"
+          line1={aP ? `${row.progressWeeksDone} / ${row.progressWeeksTotal} wks` : "—"}
+          line2={aEnd ? row.endDate : "—"}
+        />
+      )
+    }
+    case "completed": {
+      const aComp = isBoardFieldActive("completionDate", tab, hiddenColKeys, boardColumns)
+      const aFinal = isBoardFieldActive("finalStatus", tab, hiddenColKeys, boardColumns)
+      if (!aComp && !aFinal) return null
+      const finalCol = boardColumns.find(c => c.key === "finalStatus")
+      return (
+        <BoardCardTwoLineBlock
+          iconClass="fa-calendar-check"
+          line1={aComp ? row.completionDate : "—"}
+          line2={
+            aFinal && finalCol ? (
+              <span className="inline-flex min-w-0 max-w-full [&_span]:text-xs">
+                {boardCellContent(row, finalCol)}
+              </span>
+            ) : aFinal ? (
+              row.finalStatus
+            ) : (
+              "—"
+            )
+          }
+          line2ClassName={aFinal && finalCol ? "text-xs" : undefined}
+        />
+      )
+    }
+    default:
+      return null
+  }
+}
+
+export function BoardPlacementCard({
+  row,
+  lifecycleTabId,
+  hiddenColKeys,
+  lineCount,
+  conditionalRules,
+  boardColumns,
+  onOpen,
+}: {
+  row: Placement
+  lifecycleTabId: BoardCardLifecycleTabId
+  hiddenColKeys: Set<string>
+  lineCount: BoardLineCount
+  conditionalRules: ConditionalRule[] | undefined
+  boardColumns: ColumnDef<Placement>[]
+  onOpen: (id: number) => void
+}) {
+  const lc = lineClampClass(lineCount)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+
+  const visibleCols = boardColumns.filter(c => !hiddenColKeys.has(c.key))
+  const showStudent = visibleCols.some(c => c.key === "student")
+  const cardCols = filterColumnsForBoardCard(lifecycleTabId, visibleCols)
+  const remainingCols = remainingBodyColumns(lifecycleTabId, cardCols)
+
+  const showStatus = isBoardFieldActive("status", lifecycleTabId, hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", lifecycleTabId, hiddenColKeys, boardColumns)
+  const siteCol = boardColumns.find(c => c.key === "site")
+
+  const cardShell = (className: string, children: React.ReactNode) => (
+    <ListPageBoardCard
+      className={className}
+      style={ruleBg ? { background: ruleBg } : undefined}
+      isNew={row.isNew}
+      onClick={() => onOpen(row.id)}
+    >
+      {children}
+    </ListPageBoardCard>
+  )
+
+  if (visibleCols.length === 0) {
+    return cardShell(
+      "cursor-pointer",
+      <ListPageBoardCardHeader className="gap-1 pb-2">
+        <ListPageBoardCardTitleRow title={`Placement #${row.id}`} />
+        <ListPageBoardCardSecondary>
+          Unhide columns in Properties → Columns to show card fields.
+        </ListPageBoardCardSecondary>
+      </ListPageBoardCardHeader>,
+    )
+  }
+
+  const titlePrimary = showStudent ? row.student : `Placement ${row.id}`
+  const headerBadgeRow = showStatus || row.isNew
+
+  return cardShell(
+    "cursor-pointer",
+    <ListPageBoardCardHeader>
+      <ListPageBoardCardTitleRow
+        title={titlePrimary}
+        titleClassName={lc}
+        trailing={
+          showStudent ? (
+            <AvatarInitials
+              initials={row.initials}
+              className="size-7 shrink-0 text-xs"
+              fallbackClassName="text-xs"
+            />
+          ) : undefined
+        }
+      />
+
+      {headerBadgeRow ? (
+        <ListPageBoardCardBadgeRow>
+          {showStatus ? <StatusBadge status={row.status} surface="board" /> : null}
+          {row.isNew ? (
+            <Badge variant="secondary" className="h-6 px-2 text-xs font-medium">
+              New
+            </Badge>
+          ) : null}
+        </ListPageBoardCardBadgeRow>
+      ) : null}
+
+      <ListPageBoardCardBody>
+        {showSite && siteCol ? (
+          <BoardCardIconRow iconClass="fa-hospital">
+            <div className={cn(lc, "[&_.text-sm]:text-xs")}>{boardCellContent(row, siteCol)}</div>
+          </BoardCardIconRow>
+        ) : null}
+
+        {renderScheduleSection(row, lifecycleTabId, hiddenColKeys, boardColumns)}
+
+        {remainingCols.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            {remainingCols.map(col => (
+              <BoardCardIconRow key={col.key} iconClass={columnIconClass(col)}>
+                <div className={cn(lc)}>{boardCellContent(row, col)}</div>
+              </BoardCardIconRow>
+            ))}
+          </div>
+        ) : null}
+      </ListPageBoardCardBody>
+    </ListPageBoardCardHeader>,
+  )
+}

package/template/components/export-drawer.tsx

@@ -0,0 +1,375 @@
+"use client"
+
+/**
+ * ExportDrawer — floating right-side drawer with export form.
+ *
+ * Uses the same Sheet pattern as TablePropertiesDrawer:
+ *  - showCloseButton={false}, showOverlay={false}
+ *  - Rounded, floating, inset from viewport edges
+ *  - Button + Tip from our own component library
+ *
+ * Form fields (shadcn Form + react-hook-form + zod):
+ *   • File format  CSV · Excel · PDF  (SelectionTileGrid radio)
+ *   • Date range   From / To          (FilterTextValueInput dateMDY — same as Settings / table filters)
+ *   • Columns      All · Visible only (radio)
+ *   • Apply active filters            (checkbox)
+ *
+ * WCAG 2.1 AA:
+ *   ✓ All inputs labelled via FormLabel linked to control id (1.3.1)
+ *   ✓ Error messages linked via aria-describedby (3.3.1)
+ *   ✓ Focus returns to trigger on close (2.4.3)
+ */
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { devLog } from "@/lib/dev-log"
+import { Button }   from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { Tip }      from "@/components/ui/tip"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "@/components/ui/radio-group"
+import { SelectionTileGrid } from "@/components/ui/selection-tile-grid"
+import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
+import type { SelectionTileOption } from "@/components/ui/selection-tile-grid"
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+
+/** Parse full MM/DD/YYYY from masked input; partial/invalid → undefined. */
+function parseMdyToDate(raw: string | undefined): Date | undefined {
+  if (!raw?.trim()) return undefined
+  const m = raw.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/)
+  if (!m) return undefined
+  const month = Number(m[1])
+  const day = Number(m[2])
+  const year = Number(m[3])
+  if (month < 1 || month > 12 || day < 1 || day > 31) return undefined
+  const d = new Date(year, month - 1, day, 12, 0, 0, 0)
+  if (d.getFullYear() !== year || d.getMonth() !== month - 1 || d.getDate() !== day) return undefined
+  return d
+}
+
+// ── Validation schema ─────────────────────────────────────────────────────────
+
+const EXPORT_FORMAT_OPTIONS: SelectionTileOption<"csv" | "excel" | "pdf">[] = [
+  { value: "csv",   label: "CSV",   icon: "fa-file-csv" },
+  { value: "excel", label: "Excel", icon: "fa-file-excel" },
+  { value: "pdf",   label: "PDF",   icon: "fa-file-pdf" },
+]
+
+const exportSchema = z
+  .object({
+    format:         z.enum(["csv", "excel", "pdf"]),
+    columns:        z.enum(["all", "visible"]),
+    dateFrom:       z.string().optional(),
+    dateTo:         z.string().optional(),
+    includeFilters: z.boolean(),
+  })
+  .superRefine((data, ctx) => {
+    const from = parseMdyToDate(data.dateFrom)
+    const to = parseMdyToDate(data.dateTo)
+    if (data.dateFrom?.trim() && !from) {
+      ctx.addIssue({ code: "custom", message: "Enter a valid from date", path: ["dateFrom"] })
+    }
+    if (data.dateTo?.trim() && !to) {
+      ctx.addIssue({ code: "custom", message: "Enter a valid to date", path: ["dateTo"] })
+    }
+    if (from && to && to < from) {
+      ctx.addIssue({ code: "custom", message: "End date must be after start date", path: ["dateTo"] })
+    }
+  })
+
+type ExportForm = z.infer<typeof exportSchema>
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export interface ExportDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  totalRows?: number
+  visibleColumns?: number
+}
+
+export function ExportDrawer({
+  open,
+  onOpenChange,
+  totalRows = 0,
+  visibleColumns,
+}: ExportDrawerProps) {
+  const form = useForm<ExportForm>({
+    resolver: zodResolver(exportSchema),
+    defaultValues: {
+      format:         "csv",
+      columns:        "visible",
+      dateFrom:       "",
+      dateTo:         "",
+      includeFilters: true,
+    },
+  })
+
+  const [isExporting, setIsExporting] = React.useState(false)
+
+  async function onSubmit(values: ExportForm) {
+    setIsExporting(true)
+    await new Promise(r => setTimeout(r, 1200))
+    devLog("Export:", {
+      ...values,
+      dateFrom: parseMdyToDate(values.dateFrom)?.toISOString(),
+      dateTo:   parseMdyToDate(values.dateTo)?.toISOString(),
+    })
+    setIsExporting(false)
+    onOpenChange(false)
+    form.reset()
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="export-drawer"
+        side="right"
+        showCloseButton={false}
+        showOverlay={false}
+        className="z-[60] w-80 sm:max-w-80 p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
+        style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-3">
+          <SheetTitle className="text-base font-semibold leading-tight">Export data</SheetTitle>
+          <Tip label="Close" side="bottom">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              onClick={() => onOpenChange(false)}
+            >
+              <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+
+        {/* Record count */}
+        <p className="px-4 pb-3 text-sm text-muted-foreground -mt-1">
+          {totalRows} record{totalRows !== 1 ? "s" : ""} available for export.
+        </p>
+
+        {/* Form body */}
+        <Form {...form}>
+          <form
+            id="export-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex-1 overflow-y-auto"
+          >
+            <div className="px-4 pb-4 space-y-5">
+
+              {/* File format */}
+              <FormField
+                control={form.control}
+                name="format"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <SelectionTileGrid
+                        sectionLabel="File format"
+                        options={EXPORT_FORMAT_OPTIONS}
+                        columns={3}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        interaction="radio"
+                        idPrefix="export-fmt"
+                        itemVariant="outline"
+                        itemMotion="pop"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Date range */}
+              <fieldset className="space-y-2">
+                <legend className="text-sm font-medium leading-none mb-2">
+                  Date range{" "}
+                  <span className="text-muted-foreground font-normal">(optional)</span>
+                </legend>
+                <div className="grid grid-cols-2 gap-3">
+                  <FormField
+                    control={form.control}
+                    name="dateFrom"
+                    render={({ field }) => (
+                      <FormItem className="gap-1">
+                        <FormLabel htmlFor="export-date-from" className="text-xs text-muted-foreground">
+                          From
+                        </FormLabel>
+                        <FormControl>
+                          <FilterTextValueInput
+                            id="export-date-from"
+                            mask="dateMDY"
+                            aria-label="Export from date (optional)"
+                            placeholder="MM/DD/YYYY"
+                            value={field.value ?? ""}
+                            onValueChange={field.onChange}
+                            className="h-8 text-sm"
+                          />
+                        </FormControl>
+                        <FormDescription className="text-[11px]">MM/DD/YYYY</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="dateTo"
+                    render={({ field }) => (
+                      <FormItem className="gap-1">
+                        <FormLabel htmlFor="export-date-to" className="text-xs text-muted-foreground">
+                          To
+                        </FormLabel>
+                        <FormControl>
+                          <FilterTextValueInput
+                            id="export-date-to"
+                            mask="dateMDY"
+                            aria-label="Export to date (optional)"
+                            placeholder="MM/DD/YYYY"
+                            value={field.value ?? ""}
+                            onValueChange={field.onChange}
+                            className="h-8 text-sm"
+                          />
+                        </FormControl>
+                        <FormDescription className="text-[11px]">MM/DD/YYYY</FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </fieldset>
+
+              {/* Columns */}
+              <FormField
+                control={form.control}
+                name="columns"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-sm font-medium">Columns</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        className="space-y-1.5 mt-1"
+                        itemVariant="outline"
+                        itemMotion="pop"
+                      >
+                        {([
+                          { value: "all",     label: "All columns",          sub: null },
+                          { value: "visible", label: "Visible columns only", sub: visibleColumns !== undefined ? `${visibleColumns} columns` : null },
+                        ] as const).map(opt => (
+                          <div
+                            key={opt.value}
+                            className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-brand has-[[data-state=checked]]:bg-brand/10 cursor-pointer"
+                          >
+                            <RadioGroupItem value={opt.value} id={`col-${opt.value}`} />
+                            <RadioGroupLabel
+                              htmlFor={`col-${opt.value}`}
+                              className="min-h-0 flex-1 cursor-pointer py-0 text-sm font-normal leading-none"
+                            >
+                              {opt.label}
+                              {opt.sub && (
+                                <span className="text-muted-foreground ml-1.5 font-normal">({opt.sub})</span>
+                              )}
+                            </RadioGroupLabel>
+                          </div>
+                        ))}
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Include filters */}
+              <FormField
+                control={form.control}
+                name="includeFilters"
+                render={({ field }) => (
+                  <FormItem>
+                    <div className="flex items-start gap-3 rounded-lg border border-border px-3 py-2.5 transition-colors hover:bg-interactive-hover has-[[data-state=checked]]:border-primary">
+                      <FormControl>
+                        <Checkbox
+                          id="include-filters"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          className="mt-0.5 shrink-0"
+                        />
+                      </FormControl>
+                      <div className="min-w-0">
+                        <Label htmlFor="include-filters" className="text-sm cursor-pointer font-medium leading-none">
+                          Apply active filters
+                        </Label>
+                        <p className="text-xs text-muted-foreground mt-1">
+                          Export only rows matching current filters
+                        </p>
+                      </div>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+            </div>
+          </form>
+        </Form>
+
+        {/* Global bindings — only active while the drawer is open (Sheet unmounts content on close) */}
+        <Shortcut keys="Enter" disabled={isExporting} onInvoke={() => form.handleSubmit(onSubmit)()} />
+
+        {/* Footer */}
+        <div className="flex items-center gap-2 px-4 py-3 border-t border-border">
+          <Button
+            type="button"
+            variant="outline"
+            className="flex-1"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+            <KbdGroup className="ml-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
+          </Button>
+          <Button
+            type="submit"
+            form="export-form"
+            className="flex-1"
+            disabled={isExporting}
+          >
+            {isExporting ? (
+              <>
+                <i className="fa-light fa-spinner-third fa-spin text-[13px]" aria-hidden="true" />
+                Exporting…
+              </>
+            ) : (
+              <>
+                <i className="fa-light fa-arrow-down-to-line text-[13px]" aria-hidden="true" />
+                Export
+                <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+              </>
+            )}
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}