/* eslint-disable */ // Admin view — rewritten to match production HireArt onboarding tracker: // - Light gray top nav, no sidebar // - Production "Onboarding Tracker"-style table: small text, alternating rows, blue worker links // - "Statements of Work" filtered view of that same table // - Bulk re-engagement (Epic 2) // - Open-ended SOW handling (function () { const { Icon, Button, Badge, Avatar } = window; const { Card } = window; const { WORKERS, SOW_TEMPLATE_FIELDS, ACTIVITY, today, daysFromNow } = window; const { SOWStatePill, Callout, PageHeader, SectionHeader, snakeToTitle } = window; const { SOWForm } = window; const { SOWPaper } = window; const { useState, useMemo } = React; // ---------- Top nav ---------- function AdminTopNav({ active, onNav }) { const items = [ { k: "acct", label: "Acct. Mgmt.", icon: "credit-card" }, { k: "finance", label: "Finance", icon: "credit-card" }, { k: "sales", label: "Sales", icon: "chart-bar-1" }, { k: "screening", label: "Screening", icon: "user" }, { k: "sourcing", label: "Sourcing", icon: "filter" }, { k: "staffing", label: "Staffing", icon: "users" }, { k: "support", label: "Support", icon: "settings" }, { k: "pricing", label: "Pricing", icon: "tag" }, ]; return (
HireArt Production
erica.hill@hireart.com
); } // ---------- Sub-tabs under Staffing ---------- function StaffingSubnav({ active, onNav }) { const tabs = [ { k: "sows", label: "Expiring badges" }, ]; return (
{tabs.map(t => { const isActive = active === t.k; return ( ); })}
); } // ---------- Filter bar (matches the production tracker style) ---------- // Now accepts a `credTypeOptions` prop so the same bar serves the generalized // "expiring credentials" dashboard. function FilterBar({ filters, onChange, onCSV, columnsCount = 7, credTypeOptions = [] }) { const ChipSelect = ({ label, value, options, onChange }) => (
); return (
onChange({ ...filters, search: e.target.value })} style={{ width: "100%", border: "1px solid var(--neutral-30)", borderRadius: 6, padding: "8px 12px 8px 32px", fontSize: 13, fontFamily: "var(--font-body)", background: "var(--neutral-10)", outline: "none", }} />
onChange({ ...filters, client: v })} /> onChange({ ...filters, state: v })} /> ({ value: o.value, label: o.label })), ]} onChange={v => onChange({ ...filters, credType: v })} />
); } // ---------- Helpers for the deadline cell ---------- function endDateCell(validThru) { if (validThru == null) { return Open-ended; } return {shortDate(validThru)}; } function timeUntilCell(days, validThru) { if (validThru == null) { return —; } let fg; if (days < 0) fg = "var(--red-100)"; else if (days <= 14) fg = "var(--red-100)"; else if (days <= 30) fg = "var(--yellow-100)"; else fg = "var(--neutral-100)"; return ( {days} ); } // Format "Nov 11, 2026" -> "11/11/26" function shortDate(s) { if (!s) return ""; const d = new Date(s); if (isNaN(d)) return s; return `${d.getMonth() + 1}/${d.getDate()}/${String(d.getFullYear()).slice(-2)}`; } // ---------- The big table (credential-agnostic) ---------- // Each row is one expiring credential. The same worker can appear multiple times // (e.g. SOW + driver's license). Columns are general — Worker / Credential / // State / End date / Days left / Actions. // How a given credential type renews. Drives the "Expiration cadence" column. // - Re-sign annually → must be re-acknowledged on a yearly cadence (handbooks, etc.) // - Annual Re-screen → background-check-style yearly screening // - Custom Date → expiration is a one-off date set on the credential itself // (per-project SOWs, state-issued IDs, etc.) function expirationCadence(r) { const muted = { color: "var(--neutral-70)" }; if (r.type === "hireart_handbook") return Re-sign annually; if (r.type === "background_check") return Annual Re-screen; return Custom Date; } function ExpiringTable({ rows, selected, onToggle, onToggleAll, onWorker, onReengageOne }) { const allSelected = rows.length > 0 && rows.every(r => selected.has(r.id)); return (
{rows.map((r, i) => { const days = r.expiresDate ? daysFromNow(r.expiresDate) : null; const isSel = selected.has(r.id); const credType = window.CREDENTIAL_TYPES[r.type] || {}; return ( ); })}
Worker Credential Expiration cadence State End date Days left Actions
onToggle(r.id)} />
{r.workerJob} · {r.client}
 {r.label}
{expirationCadence(r)}
{endDateCell(r.expires)} {timeUntilCell(days, r.expires)}
Rows per page:
1 - {rows.length} of {rows.length} expiring credentials
1
); } const th = (w) => ({ textAlign: "left", padding: "10px 14px", fontSize: 12, fontWeight: 600, color: "var(--neutral-80)", background: "var(--neutral-20)", width: w, }); const td = () => ({ padding: "10px 14px", fontSize: 13, color: "var(--neutral-100)", verticalAlign: "top" }); // Smaller, single-line variant of the SOW state pill for dense table rows. const SMALL_PILL_META = { "expiring": { bg: "var(--yellow-20)", fg: "var(--yellow-100)", label: "Expiring" }, "expired": { bg: "var(--red-20)", fg: "var(--red-100)", label: "Expired" }, "pending-signature": { bg: "var(--blue-20)", fg: "var(--blue-100)", label: "Awaiting sig." }, "active": { bg: "var(--green-20)", fg: "var(--green-100)", label: "Active" }, "open-ended": { bg: "var(--purple-20)", fg: "var(--purple-100)", label: "Open-ended" }, "signed": { bg: "var(--green-20)", fg: "var(--green-100)", label: "Signed" }, "in-progress": { bg: "var(--blue-20)", fg: "var(--blue-100)", label: "In progress" }, "not-started": { bg: "var(--neutral-20)", fg: "var(--neutral-90)", label: "Not started" }, }; function SOWStatePillSmall({ state }) { const m = SMALL_PILL_META[state] || SMALL_PILL_META["not-started"]; return ( {m.label} ); } const linkBtn = { background: "none", border: 0, padding: 0, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600, color: "var(--blue-80)", textDecoration: "none", }; // ---------- The Expiring Credentials page ---------- function SOWTrackerView({ onWorker, onCreateSOW, onReengageOne, onReengageBulk }) { const [filters, setFilters] = useState({ search: "", client: "all", state: "all", credType: "all" }); const [selected, setSelected] = useState(new Set()); const ALL_CREDS = window.EXPIRING_CREDENTIALS || []; // Worklist: only credentials that need action (expiring ≤30d, expired, or pending sig). const inWorklist = c => ["expiring", "expired", "pending-signature"].includes(c.status); const filtered = useMemo(() => ALL_CREDS.filter(c => { if (!inWorklist(c)) return false; if (filters.search && !(c.workerName + " " + c.workerEmail + " " + c.label).toLowerCase().includes(filters.search.toLowerCase())) return false; if (filters.client !== "all" && c.client !== filters.client) return false; if (filters.state !== "all" && c.status !== filters.state) return false; if (filters.credType !== "all" && c.type !== filters.credType) return false; return true; }), [filters, ALL_CREDS]); const counts = useMemo(() => ({ expiring: ALL_CREDS.filter(c => c.status === "expiring").length, expired: ALL_CREDS.filter(c => c.status === "expired").length, pending: ALL_CREDS.filter(c => c.status === "pending-signature").length, typeBreakdown: Object.entries(window.CREDENTIAL_TYPES || {}).map(([k, v]) => ({ key: k, label: v.label, icon: v.icon, count: ALL_CREDS.filter(c => c.type === k && inWorklist(c)).length, })).filter(x => x.count > 0), }), [ALL_CREDS]); const credTypeOptions = Object.entries(window.CREDENTIAL_TYPES || {}).map(([k, v]) => ({ value: k, label: v.label, })); const toggle = id => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const toggleAll = () => setSelected(s => { if (filtered.every(r => s.has(r.id))) { const n = new Set(s); filtered.forEach(r => n.delete(r.id)); return n; } else { const n = new Set(s); filtered.forEach(r => n.add(r.id)); return n; } }); return (

Expiring badges

{counts.expiring} expiring within 30 days · {counts.expired} already expired · {counts.pending} awaiting signature.{" "} Statements of Work, driver's licenses, handbook re-acks, and any other badge with an expiration date.
{/* Quick chips showing the breakdown by credential type */}
{counts.typeBreakdown.map(t => { const isActive = filters.credType === t.key; return ( ); })}
{}} credTypeOptions={credTypeOptions} /> {/* Bulk action bar — appears when rows are selected */} {selected.size > 0 && (
{selected.size} selected · bulk actions:
)} onReengageOne(row.workerId)} />
Workers with expired credentials aren't blocked from working — expiration is informational. The renewal flow is per-credential-type.
); } // ---------- Bulk re-engage dialog ---------- function BulkReengageDialog({ workerIds, onClose, onConfirm }) { const ws = WORKERS.filter(w => workerIds.includes(w.id)); const [extension, setExtension] = useState("6 months"); const [openEnded, setOpenEnded] = useState(false); const [reuseScope, setReuseScope] = useState(true); return (
Bulk re-engage {ws.length} workers
One new SOW will be drafted per worker, reusing existing project + scope.
{ws.map(w => ( ))}
Worker Current end New end
{w.name} {w.sow.validThru || "open-ended"} {openEnded ? "open-ended" : "Nov 4, 2026"}
); } // ---------- Single-worker re-engage dialog (carries open-ended support) ---------- function ReengageDialog({ workerId, onClose, onConfirm }) { const w = WORKERS.find(x => x.id === workerId); if (!w) return null; return (
Renew {w.name}
); } // ---------- Worker detail (kept, but restyled to match the production palette) ---------- function WorkerDetailView({ workerId, onBack, onReengage }) { const w = WORKERS.find(x => x.id === workerId); if (!w) return null; const days = w.sow.validThruDate ? daysFromNow(w.sow.validThruDate) : null; return (
{w.name}

{w.name}

{w.job} · {w.employmentType} · {w.client} · started {w.startDate}
{(w.sow.state === "expiring" || w.sow.state === "expired" || w.sow.state === "active" || w.sow.state === "open-ended") && ( )}
{(w.sow.state === "expiring" || w.sow.state === "expired") && (
{w.sow.state === "expired" ? `SOW expired ${Math.abs(days)} days ago` : `SOW expires in ${days} days`}. {" "}Worker isn't blocked, but you should issue a new SOW.
)}
} /> Open-ended} /> Pending} />
{Object.entries(w.sow.mergeValues).map(([k, v]) => (
{snakeToTitle(k)}
{v || (empty)}
))}
{w.sow.history.map((h, i) => ( ))}
Signed End date Status
{h.signedAt || "Pending"} {h.endDate || "open-ended"}
{w.sow.signedAt && }
); } function Row({ k, v }) { return ( {k} {v} ); } // ---------- Offer creation flow ---------- function OfferCreateView({ onBack, onSent }) { const [step, setStep] = useState(1); const [worker, setWorker] = useState({ name: "Maya Chen", email: "maya.chen@example.com", job: "Software Engineer", payRate: "$92/hr", startDate: "May 4, 2026", }); const stub = { sow: { template: "Anthropic — SOW v3", hellosignTemplateId: "tpl_4f3a", mergeValues: { worker_name: worker.name, project_name: "", start_date: worker.startDate, end_date: "", pay_rate: worker.payRate, project_overview: "", scope_of_work: "", deliverables: "", acceptance_criteria: "", }, } }; const [merge, setMerge] = useState(stub.sow.mergeValues); return (
New offer · {worker.name}

{step === 1 ? "Offer details" : step === 2 ? "Statement of Work merge values" : "Review & send"}

Step {step} of 3
{step === 1 && (
setWorker({ ...worker, name: v })} /> setWorker({ ...worker, email: v })} /> setWorker({ ...worker, job: v })} /> setWorker({ ...worker, payRate: v })} /> setWorker({ ...worker, startDate: v })} />
)} {step === 2 && ( { setMerge(values); setStep(3); }} onCancel={() => setStep(1)} submitLabel="Continue to review" /> )} {step === 3 && (
Open-ended} />
An offer email is sent to {worker.name}. The DocumentMergeContent row is created so when they hit the SOW signing step, the iframe is pre-filled.
)}
); } function Field2({ label, value, onChange, placeholder }) { return (
{label}
onChange(e.target.value)} placeholder={placeholder} style={{ width: "100%", border: "1px solid var(--neutral-30)", borderRadius: 6, padding: "8px 12px", fontFamily: "var(--font-body)", fontSize: 13, background: "var(--neutral-10)", outline: "none", }} />
); } // ---------- Documents & templates page ---------- function TemplatesView() { return (

Documents & templates

Per-staffing-config Documents. Adding one with document_type :statement_of_work turns on the SOW badge for every worker on this config.
Anthropic — W-2 Contractor
Staffing config · 6 documents · 184 active workers
Active
{["Document", "document_type", "Dropbox Sign template", "Status"].map(h => ( ))} {[ { doc: "Employee handbook", type: "hellosign_template", tpl: "tpl_handbook_v8" }, { doc: "Code of ethics", type: "hellosign_template", tpl: "tpl_ethics_v3" }, { doc: "Federal W-4", type: "hellosign_template", tpl: "tpl_fedw4_v2" }, { doc: "Statement of Work — Anthropic v3", type: "statement_of_work", tpl: "tpl_4f3a", sow: true }, { doc: "NDA — Anthropic specific", type: "hellosign_template", tpl: "tpl_anthropic_nda_v2" }, ].map((r, i) => ( ))}
{h}
{r.doc} {r.sow && New} {r.type} {r.tpl} Active
); } Object.assign(window, { AdminTopNav, StaffingSubnav, SOWTrackerView, OfferCreateView, WorkerDetailView, TemplatesView, ReengageDialog, BulkReengageDialog, }); })();