setQ(e.target.value)} iconStart="search" />

{pill(status === "all", "All", () => setStatus("all"))} {pill(status === "Accepting", "Accepting", () => setStatus("Accepting"))} {pill(status === "Paused", "Paused", () => setStatus("Paused"))} {pill(status === "Closed", "Closed", () => setStatus("Closed"))}

{pill(recurringOnly, (<> Recurring only), () => setRecurringOnly(!recurringOnly))}

); } // ====================================================================== // VARIATION A — Dense table, sortable by urgency // ====================================================================== function JobsTableDense({ jobs, density = "normal", showSecondary = true, onOpenJob }) { const rowPad = density === "compact" ? "10px 14px" : "16px 14px"; const Header = ({ children, w, right }) => ( {children} ); return (

Job

Client

Location

Pay rate

HCO progress

Deadline

Submitted

Status

{jobs.map(job => { const client = CLIENTS[job.client]; const u = urgencyOf(job.daysLeft); const fill = job.hcoFilled; const total = job.hcoTotal; const full = fill >= total; return ( onOpenJob?.(job)} style={{ borderBottom: "1.5px solid var(--neutral-30)", cursor: "pointer", background: job.recurring ? "linear-gradient(to right, rgba(176,141,255,0.06), transparent 40%)" : "transparent", }}> ); })}

	{job.title} {job.recurring && } Req {job.req}	{client.name}	{job.location} {showSecondary && {job.workStyle} }	{payRateCell(job)}	{fill} / {total} {recurringNote(job)}		{job.submitted}

); } // ====================================================================== // VARIATION B — Urgency-grouped rows (hybrid card/list) // ====================================================================== function JobsGrouped({ jobs, grouping = "urgency", showSecondary = true, onOpenJob }) { // Build groups based on grouping mode const groups = useMemo(() => { if (grouping === "client") { const by = {}; jobs.forEach(j => { const k = CLIENTS[j.client].name; (by[k] = by[k] || []).push(j); }); return Object.entries(by).map(([name, js]) => ({ key: name, title: name, count: js.length, tone: "neutral", sub: `${js.length} job${js.length === 1 ? "" : "s"}`, jobs: js.sort((a, b) => a.daysLeft - b.daysLeft), })); } if (grouping === "deadline") { const buckets = { "This week": [], "This month": [], "Later": [] }; jobs.forEach(j => { if (j.daysLeft <= 7) buckets["This week"].push(j); else if (j.daysLeft <= 30) buckets["This month"].push(j); else buckets["Later"].push(j); }); return Object.entries(buckets).map(([k, js]) => ({ key: k, title: k, count: js.length, tone: k === "This week" ? "red" : k === "This month" ? "yellow" : "neutral", sub: js.length === 0 ? "Nothing here" : `${js.length} job${js.length === 1 ? "" : "s"}`, jobs: js.sort((a, b) => a.daysLeft - b.daysLeft), })).filter(g => g.count > 0); } // default: urgency const buckets = { critical: [], high: [], med: [], low: [] }; jobs.forEach(j => { buckets[urgencyOf(j.daysLeft)].push(j); }); return [ { key: "critical", title: "Critical — ≤ 3 days", tone: "red", jobs: buckets.critical }, { key: "high", title: "Urgent — this week", tone: "yellow", jobs: buckets.high }, { key: "med", title: "This month", tone: "blue", jobs: buckets.med }, { key: "low", title: "Later", tone: "neutral", jobs: buckets.low }, ].filter(g => g.jobs.length > 0) .map(g => ({ ...g, count: g.jobs.length, sub: `${g.jobs.length} job${g.jobs.length === 1 ? "" : "s"}`, jobs: g.jobs.sort((a, b) => a.daysLeft - b.daysLeft) })); }, [jobs, grouping]); return (

{groups.map(group => (

{group.title}

{group.count} {group.sub}

{group.jobs.map(job => ( ))}

))}

); } function JobGroupedRow({ job, showSecondary, onOpen }) { const client = CLIENTS[job.client]; const full = job.hcoFilled >= job.hcoTotal; return (

onOpen?.(job)} style={{ display: "grid", gridTemplateColumns: "1fr 160px 180px 160px 140px", gap: 16, alignItems: "center", padding: "16px 18px", border: "2px solid var(--neutral-100)", borderRadius: 10, background: "var(--neutral-10)", cursor: "pointer", boxShadow: "var(--shadow-sm)", fontFamily: "var(--font-body)", }}> {/* Title column */}

{job.title} {job.recurring && }

Req {job.req} · {client.name} · {job.location} · {job.workStyle}

{showSecondary && job.recurring && (

Ongoing: {job.recurring.rate} every {job.recurring.period} through {job.recurring.through}

)}

{/* Pay rate */}

Pay rate

{payRateCell(job)}

{/* HCO */}

HCO · {job.hcoFilled}/{job.hcoTotal}{full && !job.recurring ? " · filled" : ""}

{/* Days */}

{job.submitted} submitted

{/* Action */}

); } // ====================================================================== // Jobs view wrapper // ====================================================================== function JobsView({ tweaks, onOpenJob }) { const { jobsLayout, density, jobsGrouping, showSecondary } = tweaks; const [q, setQ] = useState(""); const [status, setStatus] = useState("all"); const [recurringOnly, setRecurringOnly] = useState(false); const filtered = useMemo(() => { const qLower = q.toLowerCase().trim(); return JOBS.filter(j => { if (status !== "all" && j.status !== status) return false; if (recurringOnly && !j.recurring) return false; if (!qLower) return true; const client = CLIENTS[j.client].name; return [j.title, j.req, client, j.location].some(s => s.toLowerCase().includes(qLower)); }).sort((a, b) => a.daysLeft - b.daysLeft); }, [q, status, recurringOnly]); // Summary stats const stats = useMemo(() => ({ active: JOBS.filter(j => j.status === "Accepting").length, openHco: JOBS.filter(j => j.status === "Accepting").reduce((s, j) => s + (j.hcoTotal - j.hcoFilled), 0), critical: JOBS.filter(j => j.status === "Accepting" && urgencyOf(j.daysLeft) === "critical").length, recurring: JOBS.filter(j => j.recurring).length, }), []); return (

{/* Stat row */}

{jobsLayout === "grouped" ? : }

); } function StatTile({ label, value, sub, tone, icon }) { return (

{icon && } {label}

{value}

{sub}

); } Object.assign(window, { JobsView }); })();