@exxatdesignux/ui 0.2.18 → 0.3.0

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

@@ -1,39 +1,36 @@
 "use client"
 
 /**
- * PlacementsListView — full-width row layout for the data list (vs table grid / board columns).
- * Shares column visibility + lifecycle rules with Table Properties via the same board column model.
+ * Placement-specific list row body — exported as `PlacementListRowContent`.
  *
- * Shell (empty state + virtualization above 80 rows) comes from the generic
- * `DataRowList` primitive in `components/data-views/`. This file owns only
- * the placement-specific row body (column-driven field visibility).
+ * Shell (DataRowList wrapping, empty state, virtualization) is now provided by
+ * `HubTable.renderListRow` (see `placements-table.tsx`) — this file owns only the
+ * placement-specific row body (avatar + title + status badge + schedule summary).
+ *
+ * Previously this file also exported `PlacementsListView` (which wrapped `DataRowList`);
+ * that wrapper was inlined into `placements-table.tsx` when `HubTable.renderListRow`
+ * landed, so all `BoardCardLifecycleTabId` / `scheduleKeysForTab` imports are gone.
  */
 
-import * as React from "react"
-import { useRouter } from "next/navigation"
 import type { Placement } from "@/lib/mock/placements"
 import { StatusBadge } from "@/components/placements-table-cells"
 import { Badge } from "@/components/ui/badge"
 import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
 import {
-  type BoardCardLifecycleTabId,
   isBoardFieldActive,
-  scheduleKeysForTab,
+  SCHEDULE_KEYS,
 } from "@/lib/placement-board-card-layout"
 import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
 import type { ConditionalRule } from "@/components/table-properties/types"
 import type { ColumnDef } from "@/components/data-table/types"
 
 /** Above this count, `DataRowList` virtualizes against the window scroll. */
-const VIRTUAL_ROWS_THRESHOLD = 80
+export const PLACEMENT_LIST_VIRTUAL_ROWS_THRESHOLD = 80
 /** Initial row height guess (px); `measureElement` refines for variable content. */
-const ESTIMATE_ROW_PX = 100
+export const PLACEMENT_LIST_ESTIMATE_ROW_PX = 100
 
-function scheduleSummary(row: Placement, tab: BoardCardLifecycleTabId): string | null {
-  switch (tab) {
-    case "all":
-      return [row.start, row.duration].filter(Boolean).join(" · ") || null
+function scheduleSummary(row: Placement): string | null {
+  switch (row.placementPhase) {
     case "upcoming":
       return row.daysUntilStart > 0
         ? `${row.start} · Starts in ${row.daysUntilStart} days`
@@ -43,34 +40,31 @@ function scheduleSummary(row: Placement, tab: BoardCardLifecycleTabId): string |
     case "completed":
       return [row.completionDate, row.finalStatus].filter(v => v && v !== "—").join(" · ") || null
     default:
-      return null
+      return [row.start, row.duration].filter(Boolean).join(" · ") || null
   }
 }
 
-function PlacementListRowContent({
+export function PlacementListRowContent({
   row,
-  tab,
   hiddenColKeys,
   boardColumns,
   conditionalRules,
   onOpen,
 }: {
   row: Placement
-  tab: BoardCardLifecycleTabId
   hiddenColKeys: Set<string>
   boardColumns: ColumnDef<Placement>[]
   conditionalRules: ConditionalRule[] | undefined
   onOpen: (id: number) => void
 }) {
   const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
-  const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
-  const showStatus = isBoardFieldActive("status", tab, hiddenColKeys, boardColumns)
-  const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
-  const showSpec = isBoardFieldActive("specialization", tab, hiddenColKeys, boardColumns)
-  const showInternship = isBoardFieldActive("internship", tab, hiddenColKeys, boardColumns)
-  const sk = scheduleKeysForTab(tab)
-  const showSchedule = sk.some(k => isBoardFieldActive(k, tab, hiddenColKeys, boardColumns))
-  const schedule = showSchedule ? scheduleSummary(row, tab) : null
+  const showStudent = isBoardFieldActive("student", hiddenColKeys, boardColumns)
+  const showStatus = isBoardFieldActive("status", hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", hiddenColKeys, boardColumns)
+  const showSpec = isBoardFieldActive("specialization", hiddenColKeys, boardColumns)
+  const showInternship = isBoardFieldActive("internship", hiddenColKeys, boardColumns)
+  const showSchedule = SCHEDULE_KEYS.some(k => isBoardFieldActive(k, hiddenColKeys, boardColumns))
+  const schedule = showSchedule ? scheduleSummary(row) : null
 
   const title = showStudent ? row.student : `Placement ${row.id}`
 
@@ -128,44 +122,3 @@ function PlacementListRowContent({
   )
 }
 
-export interface PlacementsListViewProps {
-  rows: Placement[]
-  lifecycleTabId: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-  conditionalRules?: ConditionalRule[]
-  emptyCopy: string
-}
-
-export function PlacementsListView({
-  rows,
-  lifecycleTabId,
-  hiddenColKeys,
-  boardColumns,
-  conditionalRules,
-  emptyCopy,
-}: PlacementsListViewProps) {
-  const router = useRouter()
-  const onOpen = React.useCallback((id: number) => router.push(`/data-list/${id}`), [router])
-
-  return (
-    <DataRowList<Placement>
-      rows={rows}
-      getRowId={row => row.id}
-      emptyState={emptyCopy}
-      ariaLabel="Placements"
-      virtualizeThreshold={VIRTUAL_ROWS_THRESHOLD}
-      estimatedRowHeight={ESTIMATE_ROW_PX}
-      renderRow={row => (
-        <PlacementListRowContent
-          row={row}
-          tab={lifecycleTabId}
-          hiddenColKeys={hiddenColKeys}
-          boardColumns={boardColumns}
-          conditionalRules={conditionalRules}
-          onOpen={onOpen}
-        />
-      )}
-    />
-  )
-}

package/template/components/placements-table-columns.tsx

@@ -1,25 +1,22 @@
 "use client"
 
 /**
- * Placements lifecycle columns, empty states, and Properties drawer labels.
+ * Placements columns, empty state, and Properties drawer label.
  * Owned by the placements feature (`PlacementsClient` / `/data-list`); consumed by `PlacementsTable`.
+ *
+ * NOTE: Lifecycle parameterisation (all/upcoming/ongoing/completed) was removed.
+ * One canonical column set is exposed via `getPlacementColumns()`.
  */
 
-import { Badge } from "@/components/ui/badge"
 import type { FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import type { ColumnDef } from "@/components/data-table/types"
 import {
   AvatarCircle,
-  HireBadge,
   PLACEMENT_ROW_ACTIONS,
-  ReadinessBadge,
   RowActions,
   StatusBadge,
-  WeeksProgressCell,
 } from "@/components/placements-table-cells"
 import { uniquePlacementFieldOptions, type Placement } from "@/lib/mock/placements"
-import { formatDateUS } from "@/lib/date-filter"
-import type { PlacementLifecycleTabId } from "@/lib/placement-lifecycle"
 
 const COLUMN_SELECT: ColumnDef<Placement> = {
   key: "select",
@@ -58,12 +55,6 @@ const CELL_STUDENT: ColumnDef<Placement>["cell"] = (row) => (
   </div>
 )
 
-const CELL_SITE_LOCATION: ColumnDef<Placement>["cell"] = (row) => (
-  <div className="min-w-0" title={`${row.site} · ${row.siteAddress}`}>
-    <span className="block truncate text-sm font-medium text-foreground leading-tight">{row.site}</span>
-    <span className="block truncate text-xs text-muted-foreground mt-0.5 leading-tight">{row.siteAddress}</span>
-  </div>
-)
 
 function placementColumnToFilterFieldDef(c: ColumnDef<Placement>): FilterFieldDef | null {
   if (!c.filter) return null
@@ -210,431 +201,10 @@ const PLACEMENT_COLUMNS_ALL: ColumnDef<Placement>[] = [
   COLUMN_ACTIONS,
 ]
 
-/** Upcoming lifecycle */
-const PLACEMENT_COLUMNS_UPCOMING: ColumnDef<Placement>[] = [
-  COLUMN_SELECT,
-  {
-    key: "student",
-    label: "Student",
-    width: 200,
-    minWidth: 170,
-    sortable: true,
-    sortKey: "student",
-    defaultPin: "left",
-    filter: {
-      type: "select",
-      icon: "fa-user",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("student"),
-    },
-    cell: CELL_STUDENT,
-  },
-  {
-    key: "site",
-    label: "Site & Location",
-    width: 200,
-    minWidth: 140,
-    sortable: true,
-    sortKey: "site",
-    filter: {
-      type: "select",
-      icon: "fa-hospital",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("site"),
-    },
-    cell: CELL_SITE_LOCATION,
-  },
-  {
-    key: "internship",
-    label: "Internship",
-    width: 180,
-    minWidth: 120,
-    sortable: true,
-    sortKey: "internship",
-    filter: {
-      type: "select",
-      icon: "fa-briefcase",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("internship"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.internship}</span>,
-  },
-  {
-    key: "supervisor",
-    label: "Preceptor",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "supervisor",
-    filter: {
-      type: "select",
-      icon: "fa-user-tie",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("supervisor"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.supervisor}</span>,
-  },
-  {
-    key: "specialization",
-    label: "Specialization",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "specialization",
-    filter: {
-      type: "select",
-      icon: "fa-stethoscope",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("specialization"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.specialization}</span>,
-  },
-  {
-    key: "start",
-    label: "Start Date",
-    width: 110,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "start",
-    filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
-    cell: (row) => (
-      <span className="text-sm text-foreground/80 tabular-nums whitespace-nowrap">{row.start}</span>
-    ),
-  },
-  {
-    key: "compliance",
-    label: "Compliance",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "compliance",
-    filter: {
-      type: "select",
-      icon: "fa-shield-check",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("compliance"),
-    },
-    cell: (row) => <span className="text-sm text-foreground/80">{row.compliance}</span>,
-  },
-  {
-    key: "daysUntilStart",
-    label: "Days Until Start",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "daysUntilStart",
-    cell: (row) => (
-      <span className="text-sm tabular-nums text-foreground/80">
-        {row.daysUntilStart > 0 ? `${row.daysUntilStart} days` : "—"}
-      </span>
-    ),
-  },
-  {
-    key: "readiness",
-    label: "Readiness",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "readiness",
-    filter: {
-      type: "select",
-      icon: "fa-flag",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("readiness"),
-    },
-    cell: (row) => <ReadinessBadge value={row.readiness} />,
-  },
-  COLUMN_ACTIONS,
-]
-
-/** Ongoing lifecycle */
-const PLACEMENT_COLUMNS_ONGOING: ColumnDef<Placement>[] = [
-  COLUMN_SELECT,
-  {
-    key: "student",
-    label: "Student",
-    width: 200,
-    minWidth: 170,
-    sortable: true,
-    sortKey: "student",
-    defaultPin: "left",
-    filter: {
-      type: "select",
-      icon: "fa-user",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("student"),
-    },
-    cell: CELL_STUDENT,
-  },
-  {
-    key: "site",
-    label: "Site & Location",
-    width: 200,
-    minWidth: 140,
-    sortable: true,
-    sortKey: "site",
-    filter: {
-      type: "select",
-      icon: "fa-hospital",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("site"),
-    },
-    cell: CELL_SITE_LOCATION,
-  },
-  {
-    key: "internship",
-    label: "Internship",
-    width: 180,
-    minWidth: 120,
-    sortable: true,
-    sortKey: "internship",
-    filter: {
-      type: "select",
-      icon: "fa-briefcase",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("internship"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.internship}</span>,
-  },
-  {
-    key: "supervisor",
-    label: "Preceptor",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "supervisor",
-    filter: {
-      type: "select",
-      icon: "fa-user-tie",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("supervisor"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.supervisor}</span>,
-  },
-  {
-    key: "specialization",
-    label: "Specialization",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "specialization",
-    filter: {
-      type: "select",
-      icon: "fa-stethoscope",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("specialization"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.specialization}</span>,
-  },
-  {
-    key: "progressWeeksDone",
-    label: "Progress",
-    width: 160,
-    minWidth: 140,
-    sortable: true,
-    sortKey: "progressWeeksDone",
-    cell: (row) => <WeeksProgressCell row={row} />,
-  },
-  {
-    key: "endDate",
-    label: "End Date",
-    width: 110,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "endDate",
-    filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
-    cell: (row) => (
-      <span className="text-sm text-foreground/80 tabular-nums whitespace-nowrap">{formatDateUS(row.endDate)}</span>
-    ),
-  },
-  {
-    key: "lastCheckin",
-    label: "Last Check-In",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "lastCheckin",
-    cell: (row) => (
-      <span className="text-sm text-foreground/80 whitespace-nowrap">{formatDateUS(row.lastCheckin)}</span>
-    ),
-  },
-  COLUMN_ACTIONS,
-]
-
-/** Completed lifecycle */
-const PLACEMENT_COLUMNS_COMPLETED: ColumnDef<Placement>[] = [
-  COLUMN_SELECT,
-  {
-    key: "student",
-    label: "Student",
-    width: 200,
-    minWidth: 170,
-    sortable: true,
-    sortKey: "student",
-    defaultPin: "left",
-    filter: {
-      type: "select",
-      icon: "fa-user",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("student"),
-    },
-    cell: CELL_STUDENT,
-  },
-  {
-    key: "site",
-    label: "Site & Location",
-    width: 200,
-    minWidth: 140,
-    sortable: true,
-    sortKey: "site",
-    filter: {
-      type: "select",
-      icon: "fa-hospital",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("site"),
-    },
-    cell: CELL_SITE_LOCATION,
-  },
-  {
-    key: "internship",
-    label: "Internship",
-    width: 180,
-    minWidth: 120,
-    sortable: true,
-    sortKey: "internship",
-    filter: {
-      type: "select",
-      icon: "fa-briefcase",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("internship"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.internship}</span>,
-  },
-  {
-    key: "supervisor",
-    label: "Preceptor",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "supervisor",
-    filter: {
-      type: "select",
-      icon: "fa-user-tie",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("supervisor"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.supervisor}</span>,
-  },
-  {
-    key: "specialization",
-    label: "Specialization",
-    width: 140,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "specialization",
-    filter: {
-      type: "select",
-      icon: "fa-stethoscope",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("specialization"),
-    },
-    cell: (row) => <span className="block truncate text-sm text-foreground/80">{row.specialization}</span>,
-  },
-  {
-    key: "completionDate",
-    label: "Completion Date",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "completionDate",
-    filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
-    cell: (row) => (
-      <span className="text-sm text-foreground/80 tabular-nums whitespace-nowrap">{row.completionDate}</span>
-    ),
-  },
-  {
-    key: "finalStatus",
-    label: "Final Status",
-    width: 120,
-    minWidth: 100,
-    sortable: true,
-    sortKey: "finalStatus",
-    filter: {
-      type: "select",
-      icon: "fa-circle-check",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("finalStatus"),
-    },
-    cell: (row) => (
-      <Badge variant="outline" className="h-6 px-2 py-1 text-xs font-medium leading-none">
-        {row.finalStatus}
-      </Badge>
-    ),
-  },
-  {
-    key: "rating",
-    label: "Rating",
-    width: 100,
-    minWidth: 88,
-    sortable: true,
-    sortKey: "rating",
-    cell: (row) =>
-      row.rating > 0 ? (
-        <span className="inline-flex items-center gap-1 text-sm font-medium tabular-nums">
-          {row.rating.toFixed(1)}
-          <i className="fa-solid fa-star text-xs text-chart-4" aria-hidden="true" />
-        </span>
-      ) : (
-        <span className="text-sm text-muted-foreground">—</span>
-      ),
-  },
-  {
-    key: "suggestedToHire",
-    label: "Suggested To Hire",
-    width: 130,
-    minWidth: 110,
-    sortable: true,
-    sortKey: "suggestedToHire",
-    filter: {
-      type: "select",
-      icon: "fa-user-plus",
-      operators: ["is", "is_not"],
-      options: uniquePlacementFieldOptions("suggestedToHire"),
-    },
-    cell: (row) => <HireBadge value={row.suggestedToHire} />,
-  },
-  COLUMN_ACTIONS,
-]
-
-export function getPlacementColumnsForLifecycle(tab: PlacementLifecycleTabId): ColumnDef<Placement>[] {
-  switch (tab) {
-    case "upcoming":
-      return PLACEMENT_COLUMNS_UPCOMING
-    case "ongoing":
-      return PLACEMENT_COLUMNS_ONGOING
-    case "completed":
-      return PLACEMENT_COLUMNS_COMPLETED
-    default:
-      return PLACEMENT_COLUMNS_ALL
-  }
+export function getPlacementColumns(): ColumnDef<Placement>[] {
+  return PLACEMENT_COLUMNS_ALL
 }
 
-export function emptyCopyForPlacementLifecycleTab(tab: PlacementLifecycleTabId): string {
-  switch (tab) {
-    case "upcoming":
-      return "No rows in this segment match your filters."
-    case "ongoing":
-      return "No rows in this segment match your filters."
-    case "completed":
-      return "No rows in this segment match your filters."
-    default:
-      return "No rows match your filters."
-  }
-}
+export const PLACEMENT_EMPTY_COPY = "No rows match your filters."
+export const PLACEMENT_DRAWER_LABEL = "Placements"
 
-export const placementLifecycleDrawerLabels: Record<PlacementLifecycleTabId, string> = {
-  all: "Segment: All rows",
-  upcoming: "Segment: Due soon",
-  ongoing: "Segment: In progress",
-  completed: "Segment: Done",
-}