// SideJob.jsx — Side Jobs: a flat list of recurring cleaning / maintenance // items that crew clear on the iPad, a completion Log, and a points // Leaderboard. The old floor-plan / map (equipment shapes + walls) was // removed in the v11.11 rework — items are now added one by one. // // Tabs: // Items — manager CRUD. Each item = name, how-often (cycle_days), // points, and rich-text instructions (QuillEditor; inline // images upload to the training-media bucket). Reorder + // archive. Shows each item's live status from the last done. // Log — completions grouped by day over a date range (admin delete). // Leaderboard — points per staff over a range, ranked. // // Data: // side_job_tasks — the items (useSupaList). label = name, cycle_days, // points, instructions_html, sort_order, archived. // side_job_completions — append-only "done" log (manual range fetch). The // iPad inserts (staff_id, the_date, points + // task_label snapshot). Feeds Log + Leaderboard. const { useState: useSjState, useEffect: useSjEffect, useMemo: useSjMemo } = React; const SJ_RANK_COLORS = ['#EAB308', '#9CA3AF', '#B45309']; // ------------------------------------------------------------------ // Item mappers (side_job_tasks). toRow NEVER includes restaurant_id // (useSupaList injects it on insert) and stamps updated_at. // ------------------------------------------------------------------ const sjItemFromRow = (r) => ({ id: r.id, name: r.label || '', cycleDays: Number(r.cycle_days) || 7, points: Number(r.points) || 0, instructionsHtml: r.instructions_html || '', sortOrder: Number(r.sort_order) || 0, archived: !!r.archived, }); const sjItemToRow = (o) => ({ id: o.id, label: o.name || '', cycle_days: Math.max(1, Number(o.cycleDays) || 7), points: Math.max(0, Number(o.points) || 0), instructions_html: o.instructionsHtml || '', sort_order: Number(o.sortOrder) || 0, archived: !!o.archived, updated_at: new Date().toISOString(), }); // ------------------------------------------------------------------ // Date + status helpers. daysBetween uses local dates; today = device-local key. // ------------------------------------------------------------------ const sjDaysBetween = (aISO, bISO) => { const [ay, am, ad] = aISO.split('-').map(Number); const [by, bm, bd] = bISO.split('-').map(Number); const a = new Date(ay, am - 1, ad); const b = new Date(by, bm - 1, bd); return Math.round((a.getTime() - b.getTime()) / 86400000); }; const sjDaysAgoLabel = (lastISO, todayKey) => { if (!lastISO) return 'never done'; const n = sjDaysBetween(todayKey, lastISO); if (n <= 0) return 'today'; if (n === 1) return 'yesterday'; return n + ' days ago'; }; // Status for one item given its last-done ISO date (or null = never done). // tier: never | ok (green) | soon (amber) | overdue (red, incl. "due today"). const sjItemStatus = (item, lastISO, todayKey) => { if (!lastISO) return { tier: 'never', rem: null, ratio: 0, color: '#94A3B8', label: 'Never done' }; const daysSince = sjDaysBetween(todayKey, lastISO); const rem = item.cycleDays - daysSince; const ratio = item.cycleDays > 0 ? daysSince / item.cycleDays : 1; if (rem < 0) return { tier: 'overdue', rem, ratio, color: '#DC2626', label: (-rem) + 'd overdue' }; if (rem === 0) return { tier: 'overdue', rem, ratio, color: '#DC2626', label: 'Due today' }; if (ratio >= 0.85) return { tier: 'soon', rem, ratio, color: '#D97706', label: rem + 'd left' }; return { tier: 'ok', rem, ratio, color: '#16A34A', label: rem + 'd left' }; }; const sjStaffById = () => { const m = {}; (window.SAMPLE_STAFF || []).forEach(s => { m[s.id] = s; }); return m; }; // Latest completion per task_id over a long window → { [task_id]: { date, staffId } }. // Used to show each item's current status in the portal (the iPad computes its // own live version). Fetch once on mount + a manual reload. const useSjLastDone = () => { const [map, setMap] = useSjState({}); const [tick, setTick] = useSjState(0); useSjEffect(() => { if (!window.supa) return; let cancelled = false; const start = new Date(); start.setDate(start.getDate() - 400); window.supa.from('side_job_completions') .select('task_id, the_date, staff_id, done_at') .eq('restaurant_id', window.RESTAURANT_ID) .gte('the_date', window.isoDate(start)) .order('done_at', { ascending: true }) .then(({ data, error }) => { if (cancelled) return; if (error) { console.error('side_job last-done fetch failed', error); return; } const m = {}; (data || []).forEach(c => { if (!c.task_id) return; const cur = m[c.task_id]; if (!cur || c.the_date >= cur.date) m[c.task_id] = { date: c.the_date, staffId: c.staff_id }; }); setMap(m); }); return () => { cancelled = true; }; }, [tick]); return [map, () => setTick(t => t + 1)]; }; // ------------------------------------------------------------------ // Top-level component // ------------------------------------------------------------------ const SideJob = () => { // The daily Log is the main page; Items + Leaderboard live behind a // "Manage" button (config subpage) next to the date picker. const [mode, setMode] = useSjState('log'); // 'log' | 'config' const [date, setDate] = useSjState(() => new Date()); // single day for the main Log const dateKey = window.isoDate(date); if (mode === 'config') { return setMode('log')} />; } return (
setMode('config')}>Manage } crewLead crewLeadDate={dateKey} />
); }; // ------------------------------------------------------------------ // CONFIG SUBPAGE — the job list (Items) + the points Leaderboard, reached // from the main Log via "Manage". Leaderboard keeps its own From/To range. // ------------------------------------------------------------------ const SjConfig = ({ onBack }) => { const [subtab, setSubtab] = useSjState('items'); const [items, setItems] = window.useSupaList('side_job_tasks', { fromRow: sjItemFromRow, toRow: sjItemToRow, initial: [], }); const [lastDone] = useSjLastDone(); const subtabs = [ { id: 'items', label: 'Items' }, { id: 'leaderboard', label: 'Leaderboard' }, ]; return (
Back to log} />
{subtabs.map(t => ( ))}
{subtab === 'items' && } {subtab === 'leaderboard' && }
); }; // ------------------------------------------------------------------ // ITEMS TAB — add/edit items one by one, reorder, archive, live status. // ------------------------------------------------------------------ const SjItems = ({ items, setItems, lastDone }) => { const todayKey = window.isoDate(new Date()); const staffById = useSjMemo(sjStaffById, []); const [editing, setEditing] = useSjState(null); const [showArchived, setShowArchived] = useSjState(false); const live = useSjMemo( () => items.filter(i => !i.archived).sort((a, b) => (a.sortOrder - b.sortOrder) || a.name.localeCompare(b.name)), [items] ); const archived = useSjMemo(() => items.filter(i => i.archived), [items]); const addItem = () => { const maxSort = items.reduce((m, i) => Math.max(m, i.sortOrder || 0), 0); setEditing({ id: crypto.randomUUID(), name: '', cycleDays: 7, points: 1, instructionsHtml: '', sortOrder: maxSort + 1, archived: false, __isNew: true }); }; const saveItem = (obj) => { const isNew = obj.__isNew; const clean = { id: obj.id, name: (obj.name || '').trim() || 'Untitled item', cycleDays: obj.cycleDays, points: obj.points, instructionsHtml: obj.instructionsHtml, sortOrder: obj.sortOrder, archived: !!obj.archived }; setItems(list => isNew ? [...list, clean] : list.map(x => x.id === clean.id ? clean : x)); setEditing(null); }; const setArchived = (id, val) => setItems(list => list.map(x => x.id === id ? { ...x, archived: val } : x)); const deleteItem = (id) => { if (!window.confirm('Delete this item? Its past completions stay in the log + leaderboard.')) return; setItems(list => list.filter(x => x.id !== id)); setEditing(null); }; const move = (idx, dir) => { const j = idx + dir; if (j < 0 || j >= live.length) return; const a = live[idx], b = live[j]; setItems(list => list.map(x => x.id === a.id ? { ...x, sortOrder: b.sortOrder } : (x.id === b.id ? { ...x, sortOrder: a.sortOrder } : x))); }; return (
{live.length} active item{live.length === 1 ? '' : 's'} {archived.length > 0 && ( )}
Add item
{live.length === 0 && !showArchived ? (
No side jobs yet. Click Add item to create your first one.
) : (
{live.map((it, idx) => ( setEditing({ ...it })} onMove={move} onArchive={() => setArchived(it.id, true)} /> ))} {showArchived && archived.map(it => (
{it.name}
every {it.cycleDays} days · {it.points} pts
setArchived(it.id, false)}>Restore
))}
)} {editing && ( deleteItem(editing.id)} onClose={() => setEditing(null)} /> )}
); }; const SjItemRow = ({ item, idx, count, status, lastStaff, lastDate, todayKey, onEdit, onMove, onArchive }) => { const w = Math.min(status.ratio, 1) * 100; return (
{item.name} {status.label}
every {item.cycleDays} days · {item.points} pts
{lastStaff ? ( <>Done by {(lastStaff.name || '').split(' ')[0]} · {sjDaysAgoLabel(lastDate, todayKey)} ) : ( Not cleared yet )}
Edit
); }; // Add/edit one item. Local draft; commits once on Save. const SjItemEditor = ({ item, onSave, onDelete, onClose }) => { const [draft, setDraft] = useSjState(item); const upd = (patch) => setDraft(d => ({ ...d, ...patch })); return ( {!item.__isNew && Delete}
Cancel onSave(draft)}>Save }>
upd({ name: e.target.value })} style={{ height: 36 }} autoFocus />
upd({ points: Math.max(0, parseInt(e.target.value, 10) || 0) })} style={sjNumInput} />
{window.QuillEditor ? upd({ instructionsHtml: html })} placeholder="Explain how to do this job…" /> :