/* eslint-disable */ // Reporting 2.0 — shared report-page components: TopBar, SideNav, FilterBar, // WeekPicker, DataTable, state shells, OnboardingBadge. (function () { const { useState, useMemo, useRef, useEffect } = React; const { Icon, Button, Badge, fmtCell, fmtDate, JOB_OPTIONS, LOCATION_OPTIONS, PERIOD_OPTIONS } = window; // ============================================================================= // TOP BAR // ============================================================================= function TopBar() { return (
HireArt e.currentTarget.style.display = "none"} /> HireArt
WH
); } // ============================================================================= // SIDE NAV // ============================================================================= function SideNav({ activeKey = "reports", onNavigate }) { const NAV = [ { kind: "item", key: "dashboard", label: "Dashboard", icon: "dashboard" }, { kind: "section", label: "Hiring" }, { kind: "item", key: "jobs", label: "Jobs", icon: "briefcase" }, { kind: "item", key: "interviews", label: "Interviews", icon: "calendar" }, { kind: "section", label: "People" }, { kind: "item", key: "personnel", label: "Personnel", icon: "user" }, { kind: "item", key: "payments", label: "One-time payments", icon: "dollar-sign" }, { kind: "item", key: "time", label: "Time & attendance", icon: "clock" }, { kind: "item", key: "pto", label: "Paid time off", icon: "umbrella" }, { kind: "item", key: "documents", label: "Documents", icon: "document" }, { kind: "item", key: "expenses", label: "Expenses", icon: "credit-card" }, { kind: "item", key: "reports", label: "Reports", icon: "chart-bar-1" }, ]; return ( ); } // ============================================================================= // SHELL // ============================================================================= function PageShell({ children }) { function navigate(key) { if (key === "reports") window.location.hash = "#/reports"; // other nav items are stubs } return (
{children}
); } // ============================================================================= // BREADCRUMB // ============================================================================= function Breadcrumb({ items }) { return ( ); } // ============================================================================= // FILTER LABEL — uppercase tag above the input // ============================================================================= function FilterLabel({ children }) { return (
{children}
); } // ============================================================================= // SELECT — opens a dropdown panel (always uses popover, never native) // ============================================================================= function Select({ value, onChange, options, width = 180, renderTrigger }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { function onClick(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, []); const display = options.find(o => (o.value ?? o) === value)?.label ?? options.find(o => (o.value ?? o) === value) ?? value; return (
{open && (
{options.map((o, i) => { const v = o.value ?? o; const l = o.label ?? o; const sel = v === value; return (
{ onChange?.(v); setOpen(false); }} style={{ padding: "8px 10px", borderRadius: 4, cursor: "pointer", fontSize: 14, fontWeight: sel ? 600 : 400, color: sel ? "var(--purple-80)" : "var(--neutral-100)", background: sel ? "var(--purple-20)" : "transparent", }} onMouseEnter={e => { if (!sel) e.currentTarget.style.background = "var(--neutral-20)"; }} onMouseLeave={e => { if (!sel) e.currentTarget.style.background = "transparent"; }}> {l}
); })}
)}
); } // ============================================================================= // SEARCHABLE SELECT // ============================================================================= function SearchSelect({ value, onChange, options, width = 200 }) { const [open, setOpen] = useState(false); const [q, setQ] = useState(""); const ref = useRef(null); useEffect(() => { function onClick(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }, []); const filtered = options.filter(o => o.toLowerCase().includes(q.toLowerCase())); return (
{open && (
setQ(e.target.value)} placeholder="Search jobs…" style={{ width: "100%", height: 32, padding: "0 8px 0 28px", border: "1px solid var(--neutral-30)", borderRadius: 4, fontFamily: "var(--font-body)", fontSize: 13, outline: "none", }} />
{filtered.length === 0 && (
No matches
)} {filtered.map((o, i) => { const sel = o === value; return (
{ onChange?.(o); setOpen(false); setQ(""); }} style={{ padding: "8px 10px", borderRadius: 4, cursor: "pointer", fontSize: 14, fontWeight: sel ? 600 : 400, color: sel ? "var(--purple-80)" : "var(--neutral-100)", background: sel ? "var(--purple-20)" : "transparent", }} onMouseEnter={e => { if (!sel) e.currentTarget.style.background = "var(--neutral-20)"; }} onMouseLeave={e => { if (!sel) e.currentTarget.style.background = "transparent"; }}> {o}
); })}
)}
); } // ============================================================================= // SEGMENTED TOGGLE — Filter By: Work week / Paycheck date // ============================================================================= function Segmented({ value, onChange, options }) { return (
{options.map(o => { const sel = (o.value ?? o) === value; return ( ); })}
); } // ============================================================================= // WEEK PICKER — range-style multi-select // ============================================================================= function startOfWeek(d) { // Monday-start const x = new Date(d.getFullYear(), d.getMonth(), d.getDate()); const day = (x.getDay() + 6) % 7; x.setDate(x.getDate() - day); return x; } function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate() + n); return x; } function sameDay(a, b) { return a && b && a.getTime() === b.getTime(); } function fmtWeekLabel(monday) { const sun = addDays(monday, 6); const M = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; const sameMonth = monday.getMonth() === sun.getMonth(); return sameMonth ? `${M[monday.getMonth()]} ${monday.getDate()}–${sun.getDate()}, ${sun.getFullYear()}` : `${M[monday.getMonth()]} ${monday.getDate()} – ${M[sun.getMonth()]} ${sun.getDate()}, ${sun.getFullYear()}`; } function WeekPicker({ value = [], onChange, mode = "range", minDate, maxDate, label }) { // value is array of Monday Date objects (sorted) const [open, setOpen] = useState(false); const [viewMonth, setViewMonth] = useState(() => { const d = value[0] || new Date(2026, 2, 1); return new Date(d.getFullYear(), d.getMonth(), 1); }); const [pendingStart, setPendingStart] = useState(null); // single-click in range mode const ref = useRef(null); useEffect(() => { function onClick(e) { if (ref.current && !ref.current.contains(e.target)) { // commit pending single-week selection on close if (pendingStart && (!value.length || value[0].getTime() !== pendingStart.getTime() || value.length !== 1)) { onChange?.([pendingStart]); } setPendingStart(null); setOpen(false); } } document.addEventListener("mousedown", onClick); return () => document.removeEventListener("mousedown", onClick); }); function selectWeek(monday) { if (mode === "single") { onChange?.([monday]); setOpen(false); return; } if (!pendingStart) { setPendingStart(monday); onChange?.([monday]); } else { // pendingStart already set → make a range const a = pendingStart < monday ? pendingStart : monday; const b = pendingStart < monday ? monday : pendingStart; const weeks = []; for (let m = new Date(a); m.getTime() <= b.getTime(); m = addDays(m, 7)) { weeks.push(new Date(m)); } onChange?.(weeks); setPendingStart(null); } } function clear() { onChange?.([]); setPendingStart(null); } // build calendar grid const monthStart = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1); const gridStart = startOfWeek(monthStart); const cells = []; for (let i = 0; i < 42; i++) cells.push(addDays(gridStart, i)); const M = ["January","February","March","April","May","June","July","August","September","October","November","December"]; const selectedSet = new Set(value.map(d => d.getTime())); // Display label let triggerText = "Select weeks…"; if (value.length === 1) triggerText = fmtWeekLabel(value[0]); else if (value.length > 1) triggerText = `${fmtWeekLabel(value[0])} +${value.length - 1} more`; return (
{open && (
{/* header */}
{M[viewMonth.getMonth()]} {viewMonth.getFullYear()}
{/* day labels */}
{["M","T","W","T","F","S","S"].map((d, i) => (
{d}
))}
{/* grid (rendered as rows so we can highlight whole weeks) */}
{Array.from({ length: 6 }, (_, w) => { const weekStart = cells[w * 7]; const isSelected = selectedSet.has(weekStart.getTime()); const isPending = pendingStart && pendingStart.getTime() === weekStart.getTime(); return (
{ if (minDate && weekStart < minDate) return; if (maxDate && weekStart > maxDate) return; selectWeek(weekStart); }} style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", cursor: "pointer", borderRadius: 4, marginBottom: 2, background: isSelected ? "var(--purple-20)" : "transparent", border: isPending && !isSelected ? "1px dashed var(--purple-60)" : "1px solid transparent", }} onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = "var(--neutral-20)"; }} onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = "transparent"; }}> {Array.from({ length: 7 }, (_, dIdx) => { const d = cells[w * 7 + dIdx]; const inMonth = d.getMonth() === viewMonth.getMonth(); const disabled = (minDate && d < minDate) || (maxDate && d > maxDate); return (
{d.getDate()}
); })}
); })}
{/* footer */}
{value.length === 0 ? "No weeks selected" : value.length === 1 ? "1 week selected" : `${value.length} weeks selected`}
)}
); } // ============================================================================= // FILTER BAR // ============================================================================= function FilterBar({ report, filters, setFilters }) { const showWeekPicker = filters.period === "custom"; return (
Period setFilters({ ...filters, location: v })} options={LOCATION_OPTIONS} width={200} />
)}
); } // ============================================================================= // ONBOARDING STATUS BADGE // ============================================================================= function OnboardingBadge({ status }) { const map = { complete: { label: "Complete", bg: "var(--green-20)", fg: "var(--green-100)", border: "var(--green-80)" }, in_progress: { label: "In progress", bg: "var(--blue-20)", fg: "var(--blue-100)", border: "var(--blue-80)" }, pending: { label: "Pending", bg: "var(--yellow-20)", fg: "var(--yellow-100)", border: "var(--yellow-80)" }, not_started: { label: "Not started", bg: "var(--neutral-20)", fg: "var(--neutral-80)", border: "var(--neutral-60)" }, n_a: { label: "N/A", bg: "transparent", fg: "var(--neutral-50)", border: "var(--neutral-30)" }, }; const c = map[status] || map.not_started; return ( {c.label} ); } // ============================================================================= // DATA TABLE — handles native types via Formatter, sortable, hover, sticky head // ============================================================================= function DataTable({ columns, rows, sortKey, sortDir, onSort, masking = false, isOnboarding = false }) { return (
{columns.map((c, i) => { const isSorted = c.sortable && sortKey === c.name; return ( ); })} {rows.map((row, ri) => ( e.currentTarget.style.background = "color-mix(in srgb, var(--purple-20) 35%, transparent)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}> {columns.map((c, ci) => { const v = row[ci]; const isMasked = masking && c.sensitive; const numeric = c.type === "numeric" || c.type === "integer"; const tabular = numeric || c.type === "date" || c.type === "timestamp"; const isFirst = ci === 0; let content; if (isOnboarding && c.type === "status") { content = ; } else { const r = fmtCell(v, c.name, c.type, isMasked); if (r.masked) { content = —; } else { content = r.display; } } return ( ); })} ))}
c.sortable && onSort?.(c.name)} style={{ textAlign: c.align === "right" ? "right" : "left", padding: "10px 16px", fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--neutral-70)", background: "var(--bg-2)", borderBottom: "2px solid var(--neutral-100)", whiteSpace: "nowrap", position: "sticky", top: 0, zIndex: 1, cursor: c.sortable ? "pointer" : "default", userSelect: "none", }}> {c.name} {c.sortable && ( {isSorted ? (sortDir === "desc" ? "↓" : "↑") : "↕"} )}
{content}
); } // ============================================================================= // LOADING / EMPTY / ERROR STATES // ============================================================================= function LoadingTable({ columns }) { const rows = 5; return (
{columns.map((c, i) => ( ))} {Array.from({ length: rows }).map((_, ri) => ( {columns.map((c, ci) => ( ))} ))}
{c.name}
); } function EmptyTableBody({ columns, title, subtitle }) { return (
{columns.map((c, i) => ( ))}
{c.name}
{title}
{subtitle}
); } Object.assign(window, { PageShell, Breadcrumb, FilterBar, FilterLabel, Select, SearchSelect, Segmented, WeekPicker, DataTable, OnboardingBadge, LoadingTable, EmptyTableBody, fmtWeekLabel, }); })();