@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -0,0 +1,124 @@
+"use client"
+
+/**
+ * Placement-specific list row body — exported as `PlacementListRowContent`.
+ *
+ * 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 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 {
+  isBoardFieldActive,
+  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. */
+export const PLACEMENT_LIST_VIRTUAL_ROWS_THRESHOLD = 80
+/** Initial row height guess (px); `measureElement` refines for variable content. */
+export const PLACEMENT_LIST_ESTIMATE_ROW_PX = 100
+
+function scheduleSummary(row: Placement): string | null {
+  switch (row.placementPhase) {
+    case "upcoming":
+      return row.daysUntilStart > 0
+        ? `${row.start} · Starts in ${row.daysUntilStart} days`
+        : row.start
+    case "ongoing":
+      return `${row.progressWeeksDone} / ${row.progressWeeksTotal} wks · Ends ${row.endDate}`
+    case "completed":
+      return [row.completionDate, row.finalStatus].filter(v => v && v !== "—").join(" · ") || null
+    default:
+      return [row.start, row.duration].filter(Boolean).join(" · ") || null
+  }
+}
+
+export function PlacementListRowContent({
+  row,
+  hiddenColKeys,
+  boardColumns,
+  conditionalRules,
+  onOpen,
+}: {
+  row: Placement
+  hiddenColKeys: Set<string>
+  boardColumns: ColumnDef<Placement>[]
+  conditionalRules: ConditionalRule[] | undefined
+  onOpen: (id: number) => void
+}) {
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
+  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}`
+
+  const leading = showStudent ? (
+    <ListPageBoardCardAvatar initials={row.initials} className="size-9" />
+  ) : (
+    <span className="size-9 shrink-0 rounded-full bg-muted/80" aria-hidden />
+  )
+
+  const rowEnd = showStatus ? (
+    <div className="flex shrink-0 items-center gap-2 pt-0.5">
+      <StatusBadge status={row.status} surface="board" />
+      <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden />
+    </div>
+  ) : (
+    <i className="fa-light fa-chevron-right mt-1 shrink-0 text-xs text-muted-foreground" aria-hidden />
+  )
+
+  return (
+    <ListPageBoardCard
+      layout="row"
+      leading={leading}
+      rowEnd={rowEnd}
+      isNew={row.isNew}
+      style={ruleBg ? { background: ruleBg } : undefined}
+      onClick={() => onOpen(row.id)}
+    >
+      <div className="space-y-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold text-foreground">{title}</span>
+          {row.isNew ? (
+            <Badge variant="secondary" className="h-5 px-1.5 text-xs font-medium">
+              New
+            </Badge>
+          ) : null}
+        </div>
+        {showSite ? (
+          <p className="text-xs text-foreground/90">
+            <span className="font-medium">{row.site}</span>
+            {row.siteAddress ? (
+              <span className="text-muted-foreground"> · {row.siteAddress}</span>
+            ) : null}
+          </p>
+        ) : null}
+        {(showSpec || showInternship) ? (
+          <p className="text-xs text-muted-foreground">
+            {[showSpec ? row.specialization : null, showInternship ? row.internship : null]
+              .filter(Boolean)
+              .join(" · ")}
+          </p>
+        ) : null}
+        {schedule ? <p className="text-xs text-muted-foreground tabular-nums">{schedule}</p> : null}
+      </div>
+    </ListPageBoardCard>
+  )
+}
+

package/template/components/placements-page-header.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { PageHeader } from "@/components/page-header"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Shortcut,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { isEditableTarget } from "@/lib/editable-target"
+
+export interface PlacementsPageHeaderProps {
+  /** Main heading in the page header */
+  title?: string
+  /** Primary button label */
+  primaryCtaLabel?: string
+  /** Shown under the page title */
+  subtitle?: string
+  onNewPlacement: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+  /** When false, title + subtitle are hidden visually (Display options). */
+  showTitleBlock?: boolean
+  className?: string
+}
+
+/**
+ * List hub shell header — title, primary CTA, overflow menu (export, metrics).
+ * Reusable for any route that needs the same chrome.
+ */
+export function PlacementsPageHeader({
+  title = "Sample records",
+  primaryCtaLabel = "New row",
+  subtitle = "24 demo rows · Last updated now",
+  onNewPlacement,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+  showTitleBlock = true,
+  className,
+}: PlacementsPageHeaderProps) {
+  const mod = useModKeyLabel()
+  const alt = useAltKeyLabel()
+  const [moreOpen, setMoreOpen] = React.useState(false)
+
+  /** ⌘⌥N / Ctrl+Alt+N — avoids ⌘⇧N / Ctrl+Shift+N (private/incognito windows). */
+  React.useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (!e.altKey || (!e.metaKey && !e.ctrlKey)) return
+      if (e.key.toLowerCase() !== "n") return
+      if (isEditableTarget(e.target)) return
+      e.preventDefault()
+      onNewPlacement()
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [onNewPlacement])
+
+  /** ⌘⌥M / Ctrl+Alt+M — avoids ⌘⇧O / Ctrl+Shift+O (bookmark manager in Chromium). */
+  React.useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (!e.altKey || (!e.metaKey && !e.ctrlKey)) return
+      if (e.key.toLowerCase() !== "m") return
+      if (isEditableTarget(e.target)) return
+      e.preventDefault()
+      setMoreOpen(o => !o)
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [])
+
+  return (
+    <>
+      <Shortcut keys="⌘⇧E" onInvoke={onExport} />
+      <Shortcut keys="⌘⌥H" onInvoke={onToggleMetrics} />
+    <PageHeader
+      title={title}
+      subtitle={subtitle}
+      className={className}
+      showTitleBlock={showTitleBlock}
+      actions={
+        <div className="flex items-center gap-2" role="group" aria-label="Primary list actions">
+          <Tip
+            side="bottom"
+            label={
+              <>
+                <span>{primaryCtaLabel}</span>
+                <KbdGroup>
+                  <Kbd>{mod}</Kbd>
+                  <Kbd>{alt}</Kbd>
+                  <Kbd>N</Kbd>
+                </KbdGroup>
+              </>
+            }
+          >
+            <Button size="lg" onClick={onNewPlacement}>
+              <i className="fa-light fa-plus" aria-hidden="true" />
+              {primaryCtaLabel}
+            </Button>
+          </Tip>
+          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+            <Tip
+              side="bottom"
+              label={
+                <>
+                  <span>More actions</span>
+                  <KbdGroup>
+                    <Kbd>{mod}</Kbd>
+                    <Kbd>{alt}</Kbd>
+                    <Kbd>M</Kbd>
+                  </KbdGroup>
+                </>
+              }
+            >
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="lg"
+                  variant="outline"
+                  className="aspect-square px-0"
+                  aria-label="More actions"
+                >
+                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                shortcut="⌘⇧E"
+                onSelect={() => {
+                  /* Defer past Radix menu close + focus restore so Export Sheet mounts reliably. */
+                  window.setTimeout(() => onExport(), 0)
+                }}
+              >
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                shortcut="⌘⌥H"
+                onSelect={() => {
+                  window.setTimeout(() => onToggleMetrics(), 0)
+                }}
+              >
+                <i
+                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
+                  aria-hidden="true"
+                />
+                {showMetrics ? "Hide metric section" : "Show metric section"}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      }
+    />
+    </>
+  )
+}
+

package/template/components/placements-table-cells.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+
+import { HireBadge, ReadinessBadge, StatusBadge } from "./placements-table-cells"
+
+describe("placements-table-cells", () => {
+  it("renders StatusBadge label for confirmed", () => {
+    render(<StatusBadge status="confirmed" />)
+    expect(screen.getByText("Confirmed")).toBeInTheDocument()
+  })
+
+  it("ReadinessBadge uses destructive variant for risk copy", () => {
+    const { container } = render(<ReadinessBadge value="At risk" />)
+    expect(container.querySelector("[data-slot='badge']")).toBeTruthy()
+    expect(screen.getByText("At risk")).toBeInTheDocument()
+  })
+
+  it("HireBadge shows em dash for empty", () => {
+    render(<HireBadge value="" />)
+    expect(screen.getByText("—")).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,173 @@
+"use client"
+
+/**
+ * Placement table cell primitives — extracted from placements-table for reuse and easier testing.
+ */
+
+import * as React from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  PLACEMENT_STATUS_BADGE_CLASS,
+  PLACEMENT_STATUS_ICON,
+  PLACEMENT_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import { AvatarInitials } from "@/components/ui/avatar"
+import type { Placement, Status } from "@/lib/mock/placements"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Placement status — same maps + shell as other list hubs (`list-status-badges`)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function isPlacementStatus(v: string): v is Status {
+  return v in PLACEMENT_STATUS_LABEL
+}
+
+export function StatusBadge({
+  status,
+  surface = "table",
+}: {
+  status: Status | string
+  surface?: "table" | "board"
+}) {
+  if (!isPlacementStatus(status)) {
+    return (
+      <Badge variant="outline" className="text-xs shrink-0">
+        {String(status)}
+      </Badge>
+    )
+  }
+  return (
+    <ListHubStatusBadge
+      surface={surface}
+      label={PLACEMENT_STATUS_LABEL[status]}
+      tintClassName={PLACEMENT_STATUS_BADGE_CLASS[status]}
+      icon={PLACEMENT_STATUS_ICON[status]}
+    />
+  )
+}
+
+export function AvatarCircle({ initials }: { initials: string }) {
+  return (
+    <AvatarInitials
+      initials={initials}
+      className="size-7 shrink-0 text-xs"
+      fallbackClassName="text-xs"
+    />
+  )
+}
+
+export function WeeksProgressCell({ row }: { row: Placement }) {
+  const { progressWeeksDone, progressWeeksTotal } = row
+  const total = Math.max(1, progressWeeksTotal)
+  const pct = Math.min(100, Math.round((progressWeeksDone / total) * 100))
+  return (
+    <div className="flex min-w-[128px] max-w-[200px] flex-col gap-1.5">
+      <div className="h-2 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full bg-primary transition-[width]"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <span className="text-xs tabular-nums text-muted-foreground">
+        {progressWeeksDone} / {progressWeeksTotal} wks
+      </span>
+    </div>
+  )
+}
+
+export function ReadinessBadge({ value }: { value: string }) {
+  const lower = value.toLowerCase()
+  const variant =
+    lower.includes("risk") || lower.includes("blocked")
+      ? "destructive"
+      : lower.includes("review")
+        ? "secondary"
+        : "outline"
+  return (
+    <Badge variant={variant} className="h-6 px-2 py-1 text-xs font-medium leading-none">
+      {value}
+    </Badge>
+  )
+}
+
+export function HireBadge({ value }: { value: string }) {
+  if (value === "—" || !value) return <span className="text-sm text-muted-foreground">—</span>
+  const yes = value.toLowerCase() === "yes"
+  return (
+    <Badge
+      variant={yes ? "default" : "secondary"}
+      className="h-6 border-0 px-2 py-1 text-xs font-medium leading-none"
+    >
+      {value}
+    </Badge>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Row actions
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface RowActionDef {
+  label: string
+  icon: string
+  onClick: (row: Placement) => void
+  variant?: "destructive"
+}
+
+export const PLACEMENT_ROW_ACTIONS: RowActionDef[] = [
+  { label: "Edit",   icon: "fa-pen-to-square", onClick: _row => {}   },
+  { label: "Open",   icon: "fa-arrow-up-right", onClick: _row => {}  },
+  { label: "Delete", icon: "fa-trash",          onClick: _row => {}, variant: "destructive" },
+]
+
+export function RowActions({ row, actions }: { row: Placement; actions: RowActionDef[] }) {
+  if (!actions.length) return null
+
+  if (actions.length === 1) {
+    const a = actions[0]
+    return (
+      <Tip label={a.label} side="top">
+        <Button size="icon-sm" variant="ghost" aria-label={`${a.label} ${row.student}`}
+          onClick={() => a.onClick(row)}>
+          <i className={`fa-light ${a.icon} text-sm`} aria-hidden="true" />
+        </Button>
+      </Tip>
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <Tip label={`More options for ${row.student}`} side="top">
+        <DropdownMenuTrigger asChild>
+          <Button size="icon-sm" variant="ghost" aria-label={`More options for ${row.student}`}>
+            <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+      </Tip>
+      <DropdownMenuContent align="end">
+        {actions.map((a, i) => (
+          <React.Fragment key={a.label}>
+            {a.variant === "destructive" && i > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              onClick={() => a.onClick(row)}
+              className={a.variant === "destructive" ? "text-destructive focus:text-destructive" : ""}
+            >
+              <i className={`fa-light ${a.icon}`} aria-hidden="true" />
+              {a.label}
+            </DropdownMenuItem>
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

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

@@ -0,0 +1,210 @@
+"use client"
+
+/**
+ * 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 type { FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import type { ColumnDef } from "@/components/data-table/types"
+import {
+  AvatarCircle,
+  PLACEMENT_ROW_ACTIONS,
+  RowActions,
+  StatusBadge,
+} from "@/components/placements-table-cells"
+import { uniquePlacementFieldOptions, type Placement } from "@/lib/mock/placements"
+
+const COLUMN_SELECT: ColumnDef<Placement> = {
+  key: "select",
+  label: "",
+  width: 40,
+  minWidth: 40,
+  defaultPin: "left",
+  lockPin: true,
+}
+
+const COLUMN_ACTIONS: ColumnDef<Placement> = {
+  key: "actions",
+  label: "",
+  width: 48,
+  minWidth: 48,
+  defaultPin: "right",
+  lockPin: true,
+  cell: (row) => (
+    <div className="flex items-center justify-center">
+      <RowActions row={row} actions={PLACEMENT_ROW_ACTIONS} />
+    </div>
+  ),
+}
+
+const CELL_STUDENT: ColumnDef<Placement>["cell"] = (row) => (
+  <div className="flex items-center gap-2.5 min-w-0">
+    <AvatarCircle initials={row.initials} />
+    <div className="flex flex-col min-w-0">
+      <span className="font-medium text-foreground text-sm leading-tight truncate">
+        {row.student}
+      </span>
+      <span className="text-xs text-muted-foreground leading-tight mt-0.5 truncate">
+        {row.email}
+      </span>
+    </div>
+  </div>
+)
+
+
+function placementColumnToFilterFieldDef(c: ColumnDef<Placement>): FilterFieldDef | null {
+  if (!c.filter) return null
+  const f = c.filter
+  const defaultOps =
+    f.type === "select" || f.type === "date"
+      ? (["is", "is_not"] as FilterOperator[])
+      : (["contains", "not_contains"] as FilterOperator[])
+  return {
+    key: c.key,
+    label: c.label,
+    icon: f.icon ?? "fa-filter",
+    type: f.type,
+    operators: (f.operators ?? defaultOps) as FilterOperator[],
+    options:
+      f.type === "date"
+        ? uniquePlacementFieldOptions(c.key as keyof Placement)
+        : f.options,
+    ...(f.textMask ? { textMask: f.textMask } : {}),
+  }
+}
+
+export function columnsToFilterFields(cols: ColumnDef<Placement>[]): FilterFieldDef[] {
+  return cols.map(placementColumnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
+}
+
+/** All columns — original placements overview */
+const PLACEMENT_COLUMNS_ALL: ColumnDef<Placement>[] = [
+  COLUMN_SELECT,
+  {
+    key: "student",
+    label: "Student",
+    width: 210,
+    minWidth: 180,
+    sortable: true,
+    sortKey: "student",
+    defaultPin: "left",
+    filter: {
+      type: "select",
+      icon: "fa-user",
+      operators: ["is", "is_not"],
+      options: uniquePlacementFieldOptions("student"),
+    },
+    cell: CELL_STUDENT,
+  },
+  {
+    key: "specialization",
+    label: "Specialization",
+    width: 160,
+    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: "site",
+    label: "Site",
+    width: 180,
+    minWidth: 100,
+    sortable: true,
+    sortKey: "site",
+    filter: {
+      type: "select",
+      icon: "fa-hospital",
+      operators: ["is", "is_not"],
+      options: uniquePlacementFieldOptions("site"),
+    },
+    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>
+    ),
+  },
+  {
+    key: "status",
+    label: "Status",
+    width: 130,
+    minWidth: 110,
+    sortable: true,
+    sortKey: "status",
+    filter: {
+      type: "select",
+      icon: "fa-circle-dot",
+      operators: ["is", "is_not"],
+      options: [
+        { value: "confirmed",    label: "Confirmed"    },
+        { value: "pending",      label: "Pending"      },
+        { value: "under-review", label: "Under Review" },
+        { value: "rejected",     label: "Rejected"     },
+        { value: "completed",    label: "Completed"    },
+      ],
+    },
+    cell: (row) => <StatusBadge status={row.status} />,
+  },
+  {
+    key: "start",
+    label: "Start Date",
+    width: 130,
+    minWidth: 110,
+    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: "duration",
+    label: "Duration",
+    width: 96,
+    minWidth: 80,
+    cell: (row) => (
+      <span className="text-sm text-foreground/80 whitespace-nowrap">{row.duration}</span>
+    ),
+  },
+  {
+    key: "supervisor",
+    label: "Supervisor",
+    width: 152,
+    minWidth: 100,
+    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>
+    ),
+  },
+  COLUMN_ACTIONS,
+]
+
+export function getPlacementColumns(): ColumnDef<Placement>[] {
+  return PLACEMENT_COLUMNS_ALL
+}
+
+export const PLACEMENT_EMPTY_COPY = "No rows match your filters."
+export const PLACEMENT_DRAWER_LABEL = "Placements"
+