@exxatdesignux/ui 0.3.0 → 0.4.0

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

@@ -1,250 +0,0 @@
-"use client"
-
-/**
- * Placement-specific board card — composes shared board primitives with
- * column defs and shared layout helpers (no lifecycle parameterisation).
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import type { Placement } from "@/lib/mock/placements"
-import { StatusBadge } from "@/components/placements-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 {
-  filterColumnsForBoardCard,
-  isBoardFieldActive,
-  remainingBodyColumns,
-} 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,
-  hiddenColKeys: Set<string>,
-  boardColumns: ColumnDef<Placement>[],
-): React.ReactNode {
-  const phase = row.placementPhase
-  const aStart = isBoardFieldActive("start", hiddenColKeys, boardColumns)
-  const aDur = isBoardFieldActive("duration", hiddenColKeys, boardColumns)
-  const aDays = isBoardFieldActive("daysUntilStart", hiddenColKeys, boardColumns)
-  const aProg = isBoardFieldActive("progressWeeksDone", hiddenColKeys, boardColumns)
-  const aEnd = isBoardFieldActive("endDate", hiddenColKeys, boardColumns)
-  const aComp = isBoardFieldActive("completionDate", hiddenColKeys, boardColumns)
-  const aFinal = isBoardFieldActive("finalStatus", hiddenColKeys, boardColumns)
-
-  if (phase === "upcoming" && (aStart || aDays)) {
-    const line2 =
-      aDays && row.daysUntilStart > 0
-        ? `Starts in ${row.daysUntilStart} days`
-        : aDays && row.daysUntilStart === 0
-          ? "Starts today"
-          : aDur
-            ? row.duration
-            : "—"
-    return (
-      <BoardCardTwoLineBlock
-        iconClass="fa-calendar-days"
-        line1={aStart ? row.start : "—"}
-        line2={line2}
-      />
-    )
-  }
-  if (phase === "ongoing" && (aProg || aEnd)) {
-    return (
-      <BoardCardTwoLineBlock
-        iconClass="fa-calendar-days"
-        line1={aProg ? `${row.progressWeeksDone} / ${row.progressWeeksTotal} wks` : "—"}
-        line2={aEnd ? row.endDate : "—"}
-      />
-    )
-  }
-  if (phase === "completed" && (aComp || aFinal)) {
-    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}
-      />
-    )
-  }
-  if (aStart || aDur) {
-    return (
-      <BoardCardTwoLineBlock
-        iconClass="fa-calendar-days"
-        line1={aStart ? row.start : "—"}
-        line2={aDur ? row.duration : "—"}
-      />
-    )
-  }
-  return null
-}
-
-export function BoardPlacementCard({
-  row,
-  hiddenColKeys,
-  lineCount,
-  conditionalRules,
-  boardColumns,
-  onOpen,
-}: {
-  row: Placement
-  hiddenColKeys: Set<string>
-  lineCount: BoardLineCount
-  conditionalRules: ConditionalRule[] | undefined
-  boardColumns: ColumnDef<Placement>[]
-  onOpen: (id: number) => void
-}) {
-  const lc = lineClampClass(lineCount)
-  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
-
-  const visibleCols = boardColumns.filter(c => !hiddenColKeys.has(c.key))
-  const showStudent = visibleCols.some(c => c.key === "student")
-  const cardCols = filterColumnsForBoardCard(visibleCols)
-  const remainingCols = remainingBodyColumns(cardCols)
-
-  const showStatus = isBoardFieldActive("status", hiddenColKeys, boardColumns)
-  const showSite = isBoardFieldActive("site", 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, 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/placement-detail.tsx

@@ -1,438 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useState } from "react"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Tip } from "@/components/ui/tip"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Separator } from "@/components/ui/separator"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { cn } from "@/lib/utils"
-import type { Placement } from "@/lib/mock/placements"
-import { StatusBadge as PlacementStatusBadge } from "@/components/placements-table-cells"
-import { placementReadinessBadgeClass } from "@/lib/list-status-badges"
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Info row — <dl> pattern for structured data
-// ─────────────────────────────────────────────────────────────────────────────
-
-function InfoRow({
-  label,
-  value,
-  icon,
-}: {
-  label: string
-  value: React.ReactNode
-  icon?: string
-}) {
-  return (
-    <div className="flex items-start gap-3 py-2.5">
-      {icon && (
-        <i
-          className={cn(
-            "fa-light",
-            icon,
-            "text-muted-foreground text-[13px] mt-0.5 w-4 shrink-0"
-          )}
-          aria-hidden="true"
-        />
-      )}
-      <dt className="text-sm text-muted-foreground w-32 shrink-0">{label}</dt>
-      <dd className="text-sm text-foreground">{value}</dd>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Tabs config
-// ─────────────────────────────────────────────────────────────────────────────
-
-type TabId = "overview" | "schedule" | "compliance" | "activity"
-
-const TABS: { id: TabId; label: string; icon: string }[] = [
-  { id: "overview", label: "Overview", icon: "fa-circle-info" },
-  { id: "schedule", label: "Schedule", icon: "fa-calendar-days" },
-  { id: "compliance", label: "Compliance", icon: "fa-shield-check" },
-  { id: "activity", label: "Activity", icon: "fa-clock-rotate-left" },
-]
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Overview tab
-// ─────────────────────────────────────────────────────────────────────────────
-
-function OverviewTab({ placement }: { placement: Placement }) {
-  return (
-    <div className="grid gap-6 md:grid-cols-2" role="tabpanel" aria-label="Overview">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Placement Info</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <dl>
-            <InfoRow icon="fa-hospital" label="Site" value={placement.site} />
-            <InfoRow icon="fa-location-dot" label="Address" value={placement.siteAddress} />
-            <Separator />
-            <InfoRow icon="fa-briefcase" label="Internship" value={placement.internship} />
-            <InfoRow icon="fa-stethoscope" label="Specialization" value={placement.specialization} />
-            <InfoRow icon="fa-user-doctor" label="Supervisor" value={placement.supervisor} />
-            <InfoRow icon="fa-user-nurse" label="Preceptor" value={placement.supervisor} />
-            <Separator />
-            <InfoRow icon="fa-rotate" label="Rotation type" value="Clinical" />
-            <InfoRow icon="fa-graduation-cap" label="Credit hours" value="3" />
-          </dl>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Supervisor &amp; Notes</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <dl>
-            <InfoRow
-              icon="fa-user"
-              label="Supervisor"
-              value={placement.supervisor}
-            />
-            <InfoRow
-              icon="fa-envelope"
-              label="Email"
-              value={`${placement.supervisor.toLowerCase().replace(/\s|dr\.\s?/gi, ".")}@clinic.org`}
-            />
-            <InfoRow icon="fa-phone" label="Phone" value="(312) 555-0147" />
-            <Separator />
-            <InfoRow
-              icon="fa-bullseye"
-              label="Learning objectives"
-              value="Develop clinical assessment skills and patient communication techniques in a supervised healthcare environment."
-            />
-            <InfoRow
-              icon="fa-triangle-exclamation"
-              label="Special requirements"
-              value="Must complete CPR certification before start date. Scrubs required on-site."
-            />
-            <InfoRow
-              icon="fa-note-sticky"
-              label="Notes"
-              value="Student has expressed interest in extending the placement if performance is satisfactory."
-            />
-          </dl>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Schedule tab
-// ─────────────────────────────────────────────────────────────────────────────
-
-function ScheduleTab({ placement }: { placement: Placement }) {
-  const progressPct =
-    placement.progressWeeksTotal > 0
-      ? Math.round(
-          (placement.progressWeeksDone / placement.progressWeeksTotal) * 100
-        )
-      : 0
-
-  return (
-    <div role="tabpanel" aria-label="Schedule">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Schedule</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <dl className="grid gap-x-8 md:grid-cols-2">
-            <InfoRow icon="fa-calendar-days" label="Start date" value={placement.start} />
-            <InfoRow icon="fa-calendar-check" label="End date" value={placement.endDate} />
-            <InfoRow icon="fa-clock" label="Duration" value={placement.duration} />
-            <InfoRow icon="fa-hourglass-half" label="Hours/week" value="20" />
-            <InfoRow icon="fa-sun" label="Shift" value="Day" />
-            <InfoRow icon="fa-sigma" label="Total hours" value="240" />
-            <InfoRow icon="fa-building" label="Work arrangement" value="On-site" />
-            <InfoRow icon="fa-calendar-week" label="Weekends" value="No" />
-          </dl>
-
-          {placement.placementPhase === "ongoing" && (
-            <>
-              <Separator className="my-4" />
-              <div className="space-y-2">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Progress</span>
-                  <span className="font-medium">
-                    {placement.progressWeeksDone} / {placement.progressWeeksTotal} weeks ({progressPct}%)
-                  </span>
-                </div>
-                <div
-                  className="h-2 w-full rounded-full bg-muted overflow-hidden"
-                  role="progressbar"
-                  aria-valuenow={progressPct}
-                  aria-valuemin={0}
-                  aria-valuemax={100}
-                  aria-label={`Placement progress: ${progressPct}%`}
-                >
-                  <div
-                    className="h-full rounded-full bg-primary transition-all"
-                    style={{ width: `${progressPct}%` }}
-                  />
-                </div>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Compliance tab
-// ─────────────────────────────────────────────────────────────────────────────
-
-const COMPLIANCE_ITEMS = [
-  { label: "Background check", passed: true },
-  { label: "Immunizations", passed: true },
-  { label: "HIPAA training", passed: true },
-]
-
-function ComplianceTab({ placement }: { placement: Placement }) {
-  return (
-    <div role="tabpanel" aria-label="Compliance">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Compliance Checklist</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <ul className="space-y-3" aria-label="Compliance items">
-            {COMPLIANCE_ITEMS.map((item) => (
-              <li key={item.label} className="flex items-center gap-3 text-sm">
-                {item.passed ? (
-                  <i
-                    className="fa-solid fa-circle-check text-emerald-600 text-base"
-                    aria-hidden="true"
-                  />
-                ) : (
-                  <i
-                    className="fa-solid fa-circle-xmark text-red-500 text-base"
-                    aria-hidden="true"
-                  />
-                )}
-                <span>{item.label}</span>
-                <span className="sr-only">
-                  {item.passed ? "completed" : "incomplete"}
-                </span>
-              </li>
-            ))}
-          </ul>
-
-          <Separator />
-
-          <dl>
-            <InfoRow
-              icon="fa-shield-check"
-              label="Readiness"
-              value={
-                <Badge
-                  variant="outline"
-                  className={cn(
-                    "text-xs",
-                    placementReadinessBadgeClass(placement.readiness),
-                  )}
-                >
-                  {placement.readiness}
-                </Badge>
-              }
-            />
-
-            {placement.placementPhase === "upcoming" &&
-              placement.daysUntilStart > 0 && (
-                <InfoRow
-                  icon="fa-calendar-days"
-                  label="Days until start"
-                  value={`${placement.daysUntilStart} days`}
-                />
-              )}
-
-            <InfoRow
-              icon="fa-clipboard-check"
-              label="Compliance status"
-              value={placement.compliance}
-            />
-          </dl>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Activity tab
-// ─────────────────────────────────────────────────────────────────────────────
-
-const MOCK_ACTIVITY = [
-  {
-    date: "03/23/2026",
-    description: "Supervisor evaluation submitted",
-    icon: "fa-file-check",
-  },
-  {
-    date: "03/22/2026",
-    description: "Weekly check-in completed",
-    icon: "fa-comments",
-  },
-  {
-    date: "03/18/2026",
-    description: "Hours log approved (20 hrs)",
-    icon: "fa-clock",
-  },
-  {
-    date: "03/15/2026",
-    description: "Placement started",
-    icon: "fa-play",
-  },
-  {
-    date: "03/10/2026",
-    description: "Compliance documents verified",
-    icon: "fa-shield-check",
-  },
-  {
-    date: "03/05/2026",
-    description: "Placement confirmed by coordinator",
-    icon: "fa-circle-check",
-  },
-]
-
-function ActivityTab() {
-  return (
-    <div role="tabpanel" aria-label="Activity">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Activity Timeline</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ol className="relative border-s border-border ms-3" aria-label="Activity timeline">
-            {MOCK_ACTIVITY.map((item, idx) => (
-              <li key={idx} className="mb-6 ms-6 last:mb-0">
-                <span className="absolute -start-3 flex size-6 items-center justify-center rounded-full bg-muted ring-4 ring-background">
-                  <i
-                    className={cn("fa-light", item.icon, "text-xs text-muted-foreground")}
-                    aria-hidden="true"
-                  />
-                </span>
-                <div className="flex flex-col gap-0.5">
-                  <time className="text-xs text-muted-foreground">{item.date}</time>
-                  <p className="text-sm text-foreground">{item.description}</p>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main component
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function PlacementDetail({ placement }: { placement: Placement }) {
-  const [activeTab, setActiveTab] = useState<TabId>("overview")
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-start gap-4">
-        <Avatar size="lg" className="size-12 shrink-0">
-          <AvatarFallback className="text-sm font-bold bg-primary/10 text-primary">
-            {placement.initials}
-          </AvatarFallback>
-        </Avatar>
-        <div className="flex-1 min-w-0">
-          <h1
-            className="text-xl font-semibold"
-            style={{ fontFamily: "var(--font-heading)" }}
-          >
-            {placement.student}
-          </h1>
-          <p className="text-sm text-muted-foreground">{placement.email}</p>
-          <div className="flex items-center gap-2 mt-2 flex-wrap">
-            <Badge variant="secondary">{placement.specialization}</Badge>
-            <PlacementStatusBadge status={placement.status} />
-            <Badge variant="outline">{placement.placementPhase}</Badge>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          <Tip label="Edit placement">
-            <Button size="sm" variant="outline">
-              <i className="fa-light fa-pen-to-square" aria-hidden="true" />{" "}
-              Edit
-            </Button>
-          </Tip>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="sm" variant="outline" aria-label="More actions">
-                <i className="fa-light fa-ellipsis" aria-hidden="true" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem>
-                <i className="fa-light fa-download" aria-hidden="true" /> Export
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <i className="fa-light fa-box-archive" aria-hidden="true" />{" "}
-                Archive
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="text-destructive">
-                <i className="fa-light fa-trash" aria-hidden="true" /> Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </div>
-
-      {/* Tab bar */}
-      <div
-        role="tablist"
-        aria-label="Placement sections"
-        className="inline-flex items-center gap-0.5 rounded-lg bg-muted/60 p-[3px]"
-      >
-        {TABS.map((tab) => (
-          <button
-            key={tab.id}
-            role="tab"
-            aria-selected={activeTab === tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={cn(
-              "px-3 py-1.5 text-xs rounded-md transition-all inline-flex items-center gap-1.5",
-              activeTab === tab.id
-                ? "bg-background text-foreground font-medium shadow-sm"
-                : "text-muted-foreground hover:text-interactive-hover-foreground"
-            )}
-          >
-            <i
-              className={cn("fa-light", tab.icon, "text-xs")}
-              aria-hidden="true"
-            />{" "}
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Tab content */}
-      {activeTab === "overview" && <OverviewTab placement={placement} />}
-      {activeTab === "schedule" && <ScheduleTab placement={placement} />}
-      {activeTab === "compliance" && <ComplianceTab placement={placement} />}
-      {activeTab === "activity" && <ActivityTab />}
-    </div>
-  )
-}