@exxatdesignux/ui 0.1.0 → 0.2.7

package/template/components/data-list-table.tsx

@@ -1,14 +1,16 @@
 "use client"
 
 /**
- * DataListTable — Placements hub shell on top of the generic DataTable.
+ * DataListTable — list hub shell on top of the generic DataTable.
  *
- * Lifecycle tabs swap columns and filtered rows; column definitions and lifecycle copy
- * are passed in from the page (`DataListClient` + `placements-table-columns.tsx`).
+ * View tabs drive `view` (table | list | board | …). `lifecycleTabId` selects which **demo row
+ * segment** (columns + filtered rows) to use — keep in sync with each tab's `filterId`, or pass
+ * `"all"` for tabs that only change layout.
  */
 
 import * as React from "react"
 import dynamic from "next/dynamic"
+import { cn } from "@/lib/utils"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Tip } from "@/components/ui/tip"
@@ -30,6 +32,15 @@ import { useCoachMark } from "@/hooks/use-coach-mark"
 import { DASHBOARD_CUSTOMIZE_COACH_STEPS } from "@/lib/dashboard-customize-coach-mark"
 import { PlacementsBoardView, type PlacementsBoardColumnMenu } from "@/components/placements-board-view"
 import { PlacementsListView } from "@/components/placements-list-view"
+import { FolderGridView, ListPageTreePanelShell } from "@/components/data-views"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
+import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
+import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
+import { AvatarInitials } from "@/components/ui/avatar"
+import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
+import { isBoardFieldActive } from "@/lib/placement-board-card-layout"
+import type { BoardCardLifecycleTabId } from "@/lib/placement-board-card-layout"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { FilterFieldDef } from "@/components/table-properties/types"
 import type { DataListViewType } from "@/lib/data-list-view"
@@ -148,7 +159,7 @@ function DataListBoardShell({
         columns={columns}
         searchable
         renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search placements"
+        searchAriaLabel="Search rows"
         toolbarSlot={(s) => (
           <TablePropertiesDrawerButton
             state={s}
@@ -248,7 +259,7 @@ function DataListListShell({
         columns={columns}
         searchable
         renderFilterOptionValue={renderFilterOptionValue}
-        searchAriaLabel="Search placements"
+        searchAriaLabel="Search rows"
         toolbarSlot={s => (
           <TablePropertiesDrawerButton
             state={s}
@@ -421,10 +432,10 @@ function DataListDashboardShell({
   }, [])
 
   const dashboardCustomizeCoach = useCoachMark({
-    flowId: "placements-dashboard-customize",
+    flowId: "data-list-dashboard-customize",
     steps: DASHBOARD_CUSTOMIZE_COACH_STEPS,
     delay: 700,
-    dependsOnDismissedFlowId: "placements-views-tour",
+    dependsOnDismissedFlowId: "data-list-views-tour",
   })
 
   return (
@@ -436,7 +447,7 @@ function DataListDashboardShell({
           columns={columns}
           searchable={displayOptions.showToolbarSearch}
           renderFilterOptionValue={renderFilterOptionValue}
-          searchAriaLabel="Search placements"
+          searchAriaLabel="Search rows"
           toolbarSlot={s => (
             <TablePropertiesDrawerButton
               state={s}
@@ -498,6 +509,680 @@ function DataListDashboardShell({
   )
 }
 
+// ─── Placement-specific tile for FolderGridView ──────────────────────────────
+
+function PlacementFolderTile({
+  row,
+  tab,
+  hiddenColKeys,
+  boardColumns,
+  conditionalRules,
+  onClick,
+}: {
+  row: Placement
+  tab: BoardCardLifecycleTabId
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
+  conditionalRules?: ConditionalRule[]
+  onClick: () => void
+}) {
+  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  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 showProgram = isBoardFieldActive("program", tab, hiddenColKeys, boardColumns)
+  const name = showStudent ? row.student : `Placement ${row.id}`
+
+  const statusDotClass: Record<Status, string> = {
+    confirmed: "bg-success",
+    pending: "bg-warning",
+    "under-review": "bg-brand",
+    completed: "bg-muted-foreground",
+    rejected: "bg-destructive",
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`group relative flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-left hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-all duration-100 cursor-pointer select-none w-full ${ruleBg}`}
+      aria-label={`Open ${name}`}
+    >
+      <div className="relative">
+        <AvatarInitials initials={row.initials} className="size-14 rounded-full text-lg font-semibold" />
+        {showStatus && (
+          <span className="absolute -bottom-0.5 -right-1 flex size-4 items-center justify-center rounded-full bg-card ring-2 ring-card" aria-hidden="true">
+            <span className={`size-2.5 rounded-full ${statusDotClass[row.status]}`} />
+          </span>
+        )}
+      </div>
+      <p className="w-full text-center text-[13px] font-medium text-foreground leading-tight line-clamp-2">{name}</p>
+      {showStatus && <StatusBadge status={row.status} />}
+      {(showSite || showSpec || showProgram) && (
+        <div className="flex w-full flex-col gap-0.5">
+          {showSite && (
+            <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">
+              <i className="fa-light fa-building mr-1" aria-hidden="true" />{row.site}
+            </p>
+          )}
+          {showSpec && <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">{row.specialization}</p>}
+          {showProgram && <p className="truncate text-center text-[11px] text-muted-foreground leading-tight">{row.program}</p>}
+        </div>
+      )}
+    </button>
+  )
+}
+
+
+// ─── Folder view shell ────────────────────────────────────────────────────────
+
+/** Folder / icon-grid view shell */
+function DataListFolderShell({
+  state,
+  openDrawerRef,
+  tableData,
+  columns,
+  lifecycleTabId,
+  view,
+  onViewChange,
+  pagination,
+  onPaginationChange,
+  conditionalRules,
+  onAddConditionalRule,
+  onRemoveConditionalRule,
+  onUpdateConditionalRule,
+  filterFields,
+  lifecycleDrawerLabel,
+  fieldDefinitionsForDrawer,
+  resolveColumnLabel,
+  renderFilterOptionValue,
+  displayOptions,
+  onDisplayOptionsChange,
+  listRows,
+  emptyTableCopy,
+}: {
+  state: ReturnType<typeof useTableState<Placement>>
+  openDrawerRef: React.MutableRefObject<() => void>
+  tableData: Placement[]
+  columns: ColumnDef<Placement>[]
+  lifecycleTabId: PlacementLifecycleTabId
+  view: DataListViewType
+  onViewChange?: (view: DataListViewType) => void
+  pagination: boolean
+  onPaginationChange: (v: boolean) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  filterFields: FilterFieldDef[]
+  lifecycleDrawerLabel: string
+  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
+  resolveColumnLabel: (key: string) => string
+  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  listRows: Placement[]
+  emptyTableCopy: string
+}) {
+  const router = useRouter()
+
+  React.useEffect(() => {
+    openDrawerRef.current = () => state.setSheetOpen(true)
+  }, [state.setSheetOpen])
+
+  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+
+  return (
+    <>
+      <DataTableToolbar
+        state={state}
+        columns={columns}
+        searchable
+        renderFilterOptionValue={renderFilterOptionValue}
+        searchAriaLabel="Search rows"
+        toolbarSlot={s => (
+          <TablePropertiesDrawerButton
+            state={s}
+            totalRows={tableData.length}
+            pagination={pagination}
+            onPaginationChange={onPaginationChange}
+            conditionalRules={conditionalRules}
+            onAddConditionalRule={onAddConditionalRule}
+            onRemoveConditionalRule={onRemoveConditionalRule}
+            onUpdateConditionalRule={onUpdateConditionalRule}
+            filterFields={filterFields}
+            currentView={view}
+            onViewChange={onViewChange}
+            lifecycleTabLabel={lifecycleDrawerLabel}
+            fieldDefinitions={fieldDefinitionsForDrawer}
+            resolveColumnLabel={resolveColumnLabel}
+            displayOptions={displayOptions}
+            onDisplayOptionsChange={onDisplayOptionsChange}
+            renderFilterOptionValue={renderFilterOptionValue}
+          />
+        )}
+      />
+      <FolderGridView<Placement>
+        rows={listRows}
+        getRowId={r => r.id}
+        ariaLabel="Demo folder view"
+        emptyContent={<p>{emptyTableCopy}</p>}
+        renderTile={row => (
+          <PlacementFolderTile
+            row={row}
+            tab={lifecycleTabId as BoardCardLifecycleTabId}
+            hiddenColKeys={state.hiddenCols}
+            boardColumns={boardColumns}
+            conditionalRules={conditionalRules}
+            onClick={() => router.push(`/data-list/${row.id}`)}
+          />
+        )}
+      />
+    </>
+  )
+}
+
+// ─── Tree / outline + details shell ───────────────────────────────────────────
+
+function DataListTreeShell({
+  state,
+  openDrawerRef,
+  tableData,
+  columns,
+  lifecycleTabId,
+  view,
+  onViewChange,
+  pagination,
+  onPaginationChange,
+  conditionalRules,
+  onAddConditionalRule,
+  onRemoveConditionalRule,
+  onUpdateConditionalRule,
+  filterFields,
+  lifecycleDrawerLabel,
+  fieldDefinitionsForDrawer,
+  resolveColumnLabel,
+  renderFilterOptionValue,
+  displayOptions,
+  onDisplayOptionsChange,
+  listRows,
+  emptyTableCopy,
+}: {
+  state: ReturnType<typeof useTableState<Placement>>
+  openDrawerRef: React.MutableRefObject<() => void>
+  tableData: Placement[]
+  columns: ColumnDef<Placement>[]
+  lifecycleTabId: PlacementLifecycleTabId
+  view: DataListViewType
+  onViewChange?: (view: DataListViewType) => void
+  pagination: boolean
+  onPaginationChange: (v: boolean) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  filterFields: FilterFieldDef[]
+  lifecycleDrawerLabel: string
+  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
+  resolveColumnLabel: (key: string) => string
+  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  listRows: Placement[]
+  emptyTableCopy: string
+}) {
+  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+  const [selectedId, setSelectedId] = React.useState<number | null>(() => listRows[0]?.id ?? null)
+
+  React.useEffect(() => {
+    openDrawerRef.current = () => state.setSheetOpen(true)
+  }, [state.setSheetOpen])
+
+  React.useEffect(() => {
+    if (selectedId == null) {
+      setSelectedId(listRows[0]?.id ?? null)
+      return
+    }
+    if (!listRows.some(r => r.id === selectedId)) {
+      setSelectedId(listRows[0]?.id ?? null)
+    }
+  }, [listRows, selectedId])
+
+  const selected = listRows.find(r => r.id === selectedId) ?? null
+
+  return (
+    <>
+      <DataTableToolbar
+        state={state}
+        columns={columns}
+        searchable
+        renderFilterOptionValue={renderFilterOptionValue}
+        searchAriaLabel="Search rows"
+        toolbarSlot={s => (
+          <TablePropertiesDrawerButton
+            state={s}
+            totalRows={tableData.length}
+            pagination={pagination}
+            onPaginationChange={onPaginationChange}
+            conditionalRules={conditionalRules}
+            onAddConditionalRule={onAddConditionalRule}
+            onRemoveConditionalRule={onRemoveConditionalRule}
+            onUpdateConditionalRule={onUpdateConditionalRule}
+            filterFields={filterFields}
+            currentView={view}
+            onViewChange={onViewChange}
+            lifecycleTabLabel={lifecycleDrawerLabel}
+            fieldDefinitions={fieldDefinitionsForDrawer}
+            resolveColumnLabel={resolveColumnLabel}
+            displayOptions={displayOptions}
+            onDisplayOptionsChange={onDisplayOptionsChange}
+            renderFilterOptionValue={renderFilterOptionValue}
+          />
+        )}
+      />
+      <ListPageTreePanelShell
+        resizableGroupId={`data-list-tree-${lifecycleTabId}`}
+        ariaLabel="Record outline and details"
+        tree={
+          <div className="flex min-h-0 flex-1 flex-col">
+            <ListPageTreeColumnHeader title="Records" />
+            {listRows.length === 0 ? (
+              <p className="p-3 text-sm text-muted-foreground">{emptyTableCopy}</p>
+            ) : (
+              <ul
+                role="tree"
+                aria-label="Demo records"
+                className="min-h-0 flex-1 list-none space-y-0.5 overflow-y-auto py-1"
+              >
+                {listRows.map(row => {
+                  const isSel = selectedId === row.id
+                  return (
+                    <li key={row.id} role="none" className="py-0.5">
+                      <button
+                        type="button"
+                        role="treeitem"
+                        aria-selected={isSel}
+                        tabIndex={isSel ? 0 : -1}
+                        onClick={() => setSelectedId(row.id)}
+                        className={cn(
+                          "flex w-full min-h-8 items-center rounded-md px-3 py-2 text-left text-sm transition-colors duration-75",
+                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                          isSel
+                            ? "bg-accent font-medium text-accent-foreground"
+                            : "text-foreground hover:bg-muted/50",
+                        )}
+                      >
+                        <span className="min-w-0 truncate">{row.student}</span>
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </div>
+        }
+        details={
+          selected ? (
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-card">
+              <ListPageTreeColumnHeader title="Details" />
+              <div className="min-h-0 flex-1 overflow-y-auto">
+                <PlacementFinderDetail
+                  row={selected}
+                  tab={lifecycleTabId as BoardCardLifecycleTabId}
+                  hiddenColKeys={state.hiddenCols}
+                  boardColumns={boardColumns}
+                />
+              </div>
+            </div>
+          ) : (
+            <ListPageSplitDetailsPlaceholder title="Nothing selected" />
+          )
+        }
+      />
+    </>
+  )
+}
+
+// ─── Placement-specific list row for FinderPanelView ─────────────────────────
+
+function PlacementFinderListRow({
+  row,
+  isSelected,
+  tab,
+  hiddenColKeys,
+  boardColumns,
+  conditionalRules,
+}: {
+  row: Placement
+  isSelected: boolean
+  tab: BoardCardLifecycleTabId
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
+  conditionalRules?: ConditionalRule[]
+}) {
+  const ruleBg = getConditionalRowBackground(row, conditionalRules)
+  const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
+  const name = showStudent ? row.student : `Placement ${row.id}`
+
+  return (
+    <div
+      className={`flex w-full min-w-0 items-center gap-3 transition-colors duration-75 ${
+        isSelected
+          ? "bg-transparent text-accent-foreground"
+          : cn("text-foreground", ruleBg)
+      }`}
+    >
+      <AvatarInitials
+        initials={row.initials}
+        className={cn(
+          "size-8 shrink-0 rounded-full text-[11px] font-semibold",
+          isSelected ? "ring-2 ring-accent-foreground/35" : "",
+        )}
+      />
+      <div className="min-w-0 flex-1">
+        <p className={cn("truncate text-[13px] font-medium leading-tight", isSelected ? "text-accent-foreground" : "text-foreground")}>
+          {name}
+        </p>
+        {showSite && (
+          <p className={cn("mt-0.5 truncate text-[11px] leading-tight", isSelected ? "text-accent-foreground/80" : "text-muted-foreground")}>
+            {row.site}
+          </p>
+        )}
+      </div>
+      {!isSelected && <StatusBadge status={row.status} />}
+    </div>
+  )
+}
+
+// ─── Placement-specific detail pane for FinderPanelView ──────────────────────
+
+function PlacementFinderDetail({
+  row,
+  tab,
+  hiddenColKeys,
+  boardColumns,
+}: {
+  row: Placement
+  tab: BoardCardLifecycleTabId
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
+}) {
+  const router = useRouter()
+  const show = (key: string) => isBoardFieldActive(key, tab, hiddenColKeys, boardColumns)
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex shrink-0 items-start gap-4 border-b border-border px-5 py-4">
+        <AvatarInitials initials={row.initials} className="size-14 shrink-0 rounded-full text-lg font-semibold" />
+        <div className="min-w-0 flex-1">
+          <h2 className="text-base font-semibold text-foreground leading-tight">{row.student}</h2>
+          {show("program") && <p className="mt-0.5 text-[13px] text-muted-foreground">{row.program}</p>}
+          {show("status") && <div className="mt-2"><StatusBadge status={row.status} /></div>}
+        </div>
+        <Tip side="bottom" label="Open full detail page">
+          <Button type="button" variant="outline" size="sm" className="shrink-0"
+            onClick={() => router.push(`/data-list/${row.id}`)}
+            aria-label={`Open full detail for ${row.student}`}>
+            <i className="fa-light fa-arrow-up-right-from-square text-[12px]" aria-hidden="true" />
+            Open
+          </Button>
+        </Tip>
+      </div>
+
+      {/* Fields */}
+      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+        <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {show("email") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
+              </dt>
+              <dd className="text-[13px]">
+                <a href={`mailto:${row.email}`} className="text-interactive-foreground hover:underline">{row.email}</a>
+              </dd>
+            </div>
+          )}
+          {show("site") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-building text-[10px]" aria-hidden="true" /> Site
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.site}</dd>
+            </div>
+          )}
+          {show("internship") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-briefcase text-[10px]" aria-hidden="true" /> Internship
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.internship}</dd>
+            </div>
+          )}
+          {show("specialization") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-stethoscope text-[10px]" aria-hidden="true" /> Specialization
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.specialization}</dd>
+            </div>
+          )}
+          {show("supervisor") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-user-tie text-[10px]" aria-hidden="true" /> Supervisor
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.supervisor}</dd>
+            </div>
+          )}
+          {show("start") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-calendar text-[10px]" aria-hidden="true" /> Start Date
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.start}</dd>
+            </div>
+          )}
+          {show("duration") && (
+            <div className="flex flex-col gap-0.5">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-clock text-[10px]" aria-hidden="true" /> Duration
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.duration}</dd>
+            </div>
+          )}
+          {tab === "ongoing" && (
+            <div className="flex flex-col gap-0.5 sm:col-span-2">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-chart-line text-[10px]" aria-hidden="true" /> Progress
+              </dt>
+              <dd className="text-[13px] text-foreground flex flex-col gap-1.5">
+                <span>{row.progressWeeksDone} / {row.progressWeeksTotal} weeks</span>
+                <div role="progressbar" aria-valuenow={row.progressWeeksDone} aria-valuemin={0} aria-valuemax={row.progressWeeksTotal}
+                  aria-label={`${row.progressWeeksDone} of ${row.progressWeeksTotal} weeks completed`}
+                  className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                  <div className="h-full rounded-full bg-primary transition-all"
+                    style={{ width: `${Math.round((row.progressWeeksDone / Math.max(1, row.progressWeeksTotal)) * 100)}%` }} />
+                </div>
+              </dd>
+            </div>
+          )}
+          {row.siteAddress && (
+            <div className="flex flex-col gap-0.5 sm:col-span-2">
+              <dt className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <i className="fa-light fa-location-dot text-[10px]" aria-hidden="true" /> Site Address
+              </dt>
+              <dd className="text-[13px] text-foreground">{row.siteAddress}</dd>
+            </div>
+          )}
+        </dl>
+      </div>
+    </div>
+  )
+}
+
+// ─── Status groups for FinderPanelView ───────────────────────────────────────
+
+const STATUS_GROUPS: Array<{ id: Status | "all"; label: string; accent: string }> = [
+  { id: "all",          label: "All",          accent: "bg-muted-foreground" },
+  { id: "confirmed",    label: "Confirmed",    accent: "bg-success" },
+  { id: "pending",      label: "Pending",      accent: "bg-warning" },
+  { id: "under-review", label: "Under Review", accent: "bg-brand" },
+  { id: "rejected",     label: "Rejected",     accent: "bg-destructive" },
+  { id: "completed",    label: "Completed",    accent: "bg-muted-foreground/50" },
+]
+
+function buildStatusGroups(rows: Placement[]): FinderGroup[] {
+  return STATUS_GROUPS.map(sg => ({
+    id: sg.id,
+    label: sg.label,
+    accent: sg.accent,
+    count: sg.id === "all" ? rows.length : rows.filter(r => r.status === sg.id).length,
+  }))
+}
+
+// ─── Panel view shell ────────────────────────────────────────────────────────
+
+/** Finder-style panel view shell with groups, list, and detail pane */
+function DataListPanelShell({
+  state,
+  openDrawerRef,
+  tableData,
+  columns,
+  lifecycleTabId,
+  view,
+  onViewChange,
+  pagination,
+  onPaginationChange,
+  conditionalRules,
+  onAddConditionalRule,
+  onRemoveConditionalRule,
+  onUpdateConditionalRule,
+  filterFields,
+  lifecycleDrawerLabel,
+  fieldDefinitionsForDrawer,
+  resolveColumnLabel,
+  renderFilterOptionValue,
+  displayOptions,
+  onDisplayOptionsChange,
+  listRows,
+  emptyTableCopy,
+  panelGroupsBuilder,
+  panelRenderListRow,
+  panelRenderDetail,
+}: {
+  state: ReturnType<typeof useTableState<Placement>>
+  openDrawerRef: React.MutableRefObject<() => void>
+  tableData: Placement[]
+  columns: ColumnDef<Placement>[]
+  lifecycleTabId: PlacementLifecycleTabId
+  view: DataListViewType
+  onViewChange?: (view: DataListViewType) => void
+  pagination: boolean
+  onPaginationChange: (v: boolean) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  filterFields: FilterFieldDef[]
+  lifecycleDrawerLabel: string
+  fieldDefinitionsForDrawer: { key: string; label: string; sortable?: boolean }[]
+  resolveColumnLabel: (key: string) => string
+  renderFilterOptionValue: (fieldKey: string, value: string) => React.ReactNode
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  listRows: Placement[]
+  emptyTableCopy: string
+  panelGroupsBuilder?: (rows: Placement[]) => FinderGroup[]
+  panelRenderListRow?: (row: Placement, isSelected: boolean) => React.ReactNode
+  panelRenderDetail?: (row: Placement) => React.ReactNode
+}) {
+  React.useEffect(() => {
+    openDrawerRef.current = () => state.setSheetOpen(true)
+  }, [state.setSheetOpen])
+
+  const boardColumns = state.displayCols.filter(c => c.key !== "select" && c.key !== "actions")
+  const groups = React.useMemo(
+    () => panelGroupsBuilder ? panelGroupsBuilder(listRows) : buildStatusGroups(listRows),
+    [listRows, panelGroupsBuilder],
+  )
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <DataTableToolbar
+        state={state}
+        columns={columns}
+        searchable
+        renderFilterOptionValue={renderFilterOptionValue}
+        searchAriaLabel="Search rows"
+        toolbarSlot={s => (
+          <TablePropertiesDrawerButton
+            state={s}
+            totalRows={tableData.length}
+            pagination={pagination}
+            onPaginationChange={onPaginationChange}
+            conditionalRules={conditionalRules}
+            onAddConditionalRule={onAddConditionalRule}
+            onRemoveConditionalRule={onRemoveConditionalRule}
+            onUpdateConditionalRule={onUpdateConditionalRule}
+            filterFields={filterFields}
+            currentView={view}
+            onViewChange={onViewChange}
+            lifecycleTabLabel={lifecycleDrawerLabel}
+            fieldDefinitions={fieldDefinitionsForDrawer}
+            resolveColumnLabel={resolveColumnLabel}
+            displayOptions={displayOptions}
+            onDisplayOptionsChange={onDisplayOptionsChange}
+            renderFilterOptionValue={renderFilterOptionValue}
+          />
+        )}
+      />
+      <ListPageSplitHubChrome aria-label={lifecycleDrawerLabel}>
+        <FinderPanelView<Placement>
+          embedded
+          groupsColumnTitle="Status"
+          groups={groups}
+          rows={listRows}
+          getRowId={r => r.id}
+          getRowGroupId={r => r.status}
+          defaultGroupId="all"
+          autoSaveId="finder-panel-view"
+          ariaLabel="Demo panel view"
+          emptyList={<p>{emptyTableCopy}</p>}
+          renderListRow={
+            panelRenderListRow
+              ? panelRenderListRow
+              : (row, isSelected) => (
+                  <PlacementFinderListRow
+                    row={row}
+                    isSelected={isSelected}
+                    tab={lifecycleTabId as BoardCardLifecycleTabId}
+                    hiddenColKeys={state.hiddenCols}
+                    boardColumns={boardColumns}
+                    conditionalRules={conditionalRules}
+                  />
+                )
+          }
+          renderDetail={
+            panelRenderDetail
+              ? panelRenderDetail
+              : row => (
+                  <PlacementFinderDetail
+                    row={row}
+                    tab={lifecycleTabId as BoardCardLifecycleTabId}
+                    hiddenColKeys={state.hiddenCols}
+                    boardColumns={boardColumns}
+                  />
+                )
+          }
+        />
+      </ListPageSplitHubChrome>
+    </div>
+  )
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Props
 // ─────────────────────────────────────────────────────────────────────────────
@@ -505,7 +1190,7 @@ function DataListDashboardShell({
 export interface DataListTableProps {
   view?: DataListViewType
   onViewChange?: (view: DataListViewType) => void
-  /** Drives column set + row filter (ids: all | upcoming | ongoing | completed) */
+  /** Demo row segment: drives filtered rows + column set (`all` | `upcoming` | `ongoing` | `completed`). */
   lifecycleTabId?: PlacementLifecycleTabId
   /** Shared display options (persist at page level — all view types). */
   displayOptions?: DataListDisplayOptions
@@ -516,6 +1201,12 @@ export interface DataListTableProps {
   emptyTableCopy: string
   /** Table Properties drawer lifecycle label — from the page. */
   lifecycleDrawerLabel: string
+  /** Panel view: custom groups builder. If not provided, uses default placement status groups. */
+  panelGroupsBuilder?: (rows: Placement[]) => FinderGroup[]
+  /** Panel view: custom list row renderer. If not provided, uses default placement row rendering. */
+  panelRenderListRow?: (row: Placement, isSelected: boolean) => React.ReactNode
+  /** Panel view: custom detail pane renderer. If not provided, uses default placement detail rendering. */
+  panelRenderDetail?: (row: Placement) => React.ReactNode
 }
 
 /** Imperative handle — open Table Properties (table view only). */
@@ -534,6 +1225,9 @@ export const DataListTable = React.forwardRef<DataListTableHandle, DataListTable
   getColumnsForLifecycle,
   emptyTableCopy,
   lifecycleDrawerLabel,
+  panelGroupsBuilder,
+  panelRenderListRow,
+  panelRenderDetail,
 }, ref) {
   const displayOptions = React.useMemo(
     () => ({ ...DEFAULT_DATA_LIST_DISPLAY_OPTIONS, ...displayOptionsProp }),
@@ -618,7 +1312,7 @@ export const DataListTable = React.forwardRef<DataListTableHandle, DataListTable
   const totalPages = Math.max(1, Math.ceil(filteredCount / Math.max(1, paginationPageSize)))
   const safePage = Math.min(paginationPage, totalPages)
   const paginationOverride =
-    pagination && view !== "board" && view !== "dashboard"
+    pagination && view !== "board" && view !== "dashboard" && view !== "folder" && view !== "panel" && view !== "tree-panel"
       ? { page: safePage, pageSize: paginationPageSize }
       : undefined
 
@@ -842,6 +1536,99 @@ export const DataListTable = React.forwardRef<DataListTableHandle, DataListTable
     )
   }
 
+  if (view === "folder") {
+    return (
+      <DataListFolderShell
+        key={lifecycleTabId}
+        state={tableState}
+        openDrawerRef={openDrawerRef}
+        tableData={tableData}
+        columns={columns}
+        lifecycleTabId={lifecycleTabId}
+        view={view}
+        onViewChange={onViewChange}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        conditionalRules={conditionalRules}
+        onAddConditionalRule={addConditionalRule}
+        onRemoveConditionalRule={removeConditionalRule}
+        onUpdateConditionalRule={updateConditionalRule}
+        filterFields={filterFields}
+        lifecycleDrawerLabel={lifecycleDrawerLabel}
+        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
+        resolveColumnLabel={resolveColumnLabel}
+        renderFilterOptionValue={renderFilterOptionValue}
+        displayOptions={displayOptions}
+        onDisplayOptionsChange={patchDisplayOptions}
+        listRows={tableState.rows}
+        emptyTableCopy={emptyTableCopy}
+      />
+    )
+  }
+
+  if (view === "tree-panel") {
+    return (
+      <DataListTreeShell
+        key={lifecycleTabId}
+        state={tableState}
+        openDrawerRef={openDrawerRef}
+        tableData={tableData}
+        columns={columns}
+        lifecycleTabId={lifecycleTabId}
+        view={view}
+        onViewChange={onViewChange}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        conditionalRules={conditionalRules}
+        onAddConditionalRule={addConditionalRule}
+        onRemoveConditionalRule={removeConditionalRule}
+        onUpdateConditionalRule={updateConditionalRule}
+        filterFields={filterFields}
+        lifecycleDrawerLabel={lifecycleDrawerLabel}
+        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
+        resolveColumnLabel={resolveColumnLabel}
+        renderFilterOptionValue={renderFilterOptionValue}
+        displayOptions={displayOptions}
+        onDisplayOptionsChange={patchDisplayOptions}
+        listRows={tableState.rows}
+        emptyTableCopy={emptyTableCopy}
+      />
+    )
+  }
+
+  if (view === "panel") {
+    return (
+      <DataListPanelShell
+        key={lifecycleTabId}
+        state={tableState}
+        openDrawerRef={openDrawerRef}
+        tableData={tableData}
+        columns={columns}
+        lifecycleTabId={lifecycleTabId}
+        view={view}
+        onViewChange={onViewChange}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        conditionalRules={conditionalRules}
+        onAddConditionalRule={addConditionalRule}
+        onRemoveConditionalRule={removeConditionalRule}
+        onUpdateConditionalRule={updateConditionalRule}
+        filterFields={filterFields}
+        lifecycleDrawerLabel={lifecycleDrawerLabel}
+        fieldDefinitionsForDrawer={fieldDefinitionsForDrawer}
+        resolveColumnLabel={resolveColumnLabel}
+        renderFilterOptionValue={renderFilterOptionValue}
+        displayOptions={displayOptions}
+        onDisplayOptionsChange={patchDisplayOptions}
+        listRows={tableState.rows}
+        emptyTableCopy={emptyTableCopy}
+        panelGroupsBuilder={panelGroupsBuilder}
+        panelRenderListRow={panelRenderListRow}
+        panelRenderDetail={panelRenderDetail}
+      />
+    )
+  }
+
   if (pagination) {
     return (
       <React.Fragment key={lifecycleTabId}>