{[['going', 'Going'], ['maybe', 'Maybe'], ['no', 'Can’t']].map(([v, lbl]) => { const on = rsvps[e.id] === v; const c = v === 'going' ? 'var(--sage)' : v === 'maybe' ? 'var(--gold)' : 'var(--ink-3)'; return ; })}

); } function MyMonth({ ctx, onManage }) { const today = new Date(); today.setHours(0, 0, 0, 0); const todayIso = svIsoLocal(today); const [view, setView] = useSv(() => ({ y: today.getFullYear(), m: today.getMonth() })); const [sel, setSel] = useSv(todayIso); const serving = ctx.servConfirmed || []; const events = (ctx.churchEvents || []); const churchServices = (ctx.churchServices || []); // the church's gatherings (everyone) const rsvps = ctx.myRsvps || {}; // index by iso date const servBy = {}; serving.forEach(s => { (servBy[s.date] = servBy[s.date] || []).push(s); }); const evBy = {}; events.forEach(e => { if (e.date) (evBy[e.date] = evBy[e.date] || []).push(e); }); const svcBy = {}; churchServices.forEach(s => { if (s.date) (svcBy[s.date] = svcBy[s.date] || []).push(s); }); const iso = (y, m, d) => `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`; const first = new Date(view.y, view.m, 1); const lead = (first.getDay() + 6) % 7; // Monday-first offset const dim = new Date(view.y, view.m + 1, 0).getDate(); // days in month const cells = []; for (let i = 0; i < lead; i++) cells.push(null); for (let d = 1; d <= dim; d++) cells.push(d); while (cells.length % 7) cells.push(null); const step = (dir) => { let m = view.m + dir, y = view.y; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } setView({ y, m }); }; const selServ = servBy[sel] || []; const selEv = evBy[sel] || []; const selSvc = svcBy[sel] || []; return ( {/* month nav */}

{['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][view.m]} {view.y}

{/* grid */}

{['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) =>

{d}

)}

{cells.map((d, i) => { if (!d) return

; const cur = iso(view.y, view.m, d); const hasServ = !!servBy[cur]; const hasEv = !!evBy[cur]; const hasSvc = !!svcBy[cur]; const isToday = cur === todayIso; const isSel = cur === sel; return ( ); })}

You’re serving Gathering Event

{/* selected-day detail */} {svParts(sel).dow} {svParts(sel).day} {svParts(sel).mon}{sel === todayIso ? ' · Today' : ''} {(selServ.length === 0 && selEv.length === 0 && selSvc.length === 0) ? (

Nothing on this day.

) : (

{selSvc.map((s, i) => (

{s.name || 'Gathering'}

{s.time || ''}{selServ.some(x => x.date === s.date) ? ' · you’re serving' : ''}

))} {selServ.map(it => ( ))} {selEv.map(e => (

{e.title} {e._network ? {e._network.toUpperCase()} : null}

{e.time}{e.where ? · {e.where} : null}

{e._network ? null : svEventRsvpRow({ e, rsvps, ctx })}

))}

)} ); } // ════════════════════════ MAIN OVERLAY ════════════════════════ function ServingScreen({ open, onClose, ctx }) { const [tab, setTab] = useSv('serving'); const [sheet, setSheet] = useSv(null); // { kind, item } const [rosterOpen, setRosterOpen] = useSv(false); const [svcExpanded, setSvcExpanded] = useSv(false); // show all upcoming services vs the first 3 useSvE(() => { if (open) { setTab('serving'); setSheet(null); setRosterOpen(false); } }, [open]); const pending = ctx.servPending || []; const upcoming = ctx.servConfirmed || []; const declined = ctx.servDeclined || []; const next = ctx.servNext; const events = ctx.churchEvents || []; const rsvps = ctx.myRsvps || {}; const myTeams = svMyTeams(ctx); const nextRoster = next ? svServiceRoster(ctx, next.serviceId) : []; const close = () => setSheet(null); return (

Serving

{ctx.church ? ctx.church.name : 'Your church'}

{[['serving', 'My serving', 'hand'], ['events', 'Events', 'calendar'], ['calendar', 'Calendar', 'calCheck']].map(([k, lbl, ic]) => { const on = tab === k; return ( ); })}

{tab === 'serving' ? ( {pending.map(req => (

CAN YOU SERVE?

{req.teamName} · {req.role}

{req.time} · {req.service}

))} {next ? (

You’re next serving

{svParts(next.date).dow} {svParts(next.date).day}

{svParts(next.date).mon} · {next.time}

{next.service}

{next.teamName} · {next.role}

{nextRoster.length ? ( {rosterOpen ? (

{nextRoster.map((p, i) => (

{p.me ? 'You' : p.name} {p.role}

))}

) : null} ) : null}

) : (pending.length === 0 ? ( (ctx.myRosterTeams || []).length ? (

{(ctx.myRosterTeams || []).slice(0, 4).map(t => (

))}

You’re on {(ctx.myRosterTeams || []).length === 1 ? 'the ' + ctx.myRosterTeams[0].name + ' team' : (ctx.myRosterTeams || []).length + ' teams'}

No dates scheduled for you yet. When your church puts you on a service, it’ll show up here and we’ll remind you the day before.

{(ctx.myRosterTeams || []).length > 1 ?

{(ctx.myRosterTeams || []).map(t => t.name).join(' · ')}

: null}

) : (

You’re not on a serving team yet

When your church adds you to a team, it’ll show up here — and we’ll remind you the day before you serve. Meanwhile, check Events for what’s on.

) ) : null)} {upcoming.length > (next ? 1 : 0) ? Your upcoming : null}

{upcoming.filter(it => !next || it.id !== next.id).map(it => ( ))}

{/* quick actions: set unavailable + my teams */}

{myTeams.length ? (

{myTeams.slice(0, 3).map((t, i) => (

))}

My teams

{myTeams.map(t => t.name).join(' · ')}

) : (

No teams yet — your leader adds you

)}

{/* your replies (declined / swap-asked) — each with an undo, labelled to match the steward */} {declined.length ? (

Your responses

{declined.map(it => { const isSwap = it._verdict === 'swap'; const statusFg = isSwap ? '#8a6717' : 'var(--ink-3)'; const statusBg = isSwap ? 'var(--gold-tint)' : 'var(--surface-2)'; return (

{it.teamName} {isSwap ? 'Swap asked' : 'Can’t make it'}

{it.role} · {svParts(it.date).dow} {svParts(it.date).day} {svParts(it.date).mon}

); })}

) : null} ) : tab === 'events' ? ( {/* regular gatherings (services) the church scheduled */} {(() => { const todayIso = svTodayIso(); const upSvc = (ctx.churchServices || []).filter(s => (s.date || '') >= todayIso).sort((a, b) => (a.date || '').localeCompare(b.date || '')); if (!upSvc.length) return null; const shownSvc = svcExpanded ? upSvc : upSvc.slice(0, 3); return ( Services

3 ? 12 : 22 }}> {shownSvc.map((s, i) => (

{s.name || 'Sunday Gathering'}

{s.time || ''}

))}

{upSvc.length > 3 ? ( ) : null} ); })()} What’s on {events.length === 0 ?

No socials or events yet — your church will post them here.

: null}

{events.slice().sort((a, b) => (a.date || '').localeCompare(b.date || '')).map(e => (

{e.image ?

: null}

{e.title} {e._network ? {e._network.toUpperCase()} : null}

{e.time}{e.where ? · {e.where} : null}

{e.blurb ?

{e.blurb}

: null}

{e._network ?

A {e._network} event

: svEventRsvpRow({ e, rsvps, ctx })}

))}

) : ( setSheet({ kind: 'manage', item: it })} /> )}

setSheet({ kind: 'swap', item: req })} ctx={ctx} /> setSheet({ kind: 'swap', item: it })} ctx={ctx} /> ); } Object.assign(window, { ServingScreen });