// screens-admin.jsx — admin-facing screens (still on phone, but desktop-ish density) // Members directory, add visitor, events, reports const { useState: useStateA } = React; const DA = window.BHCAC_DATA; // ── Admin shell ── function ScreenAdmin({ user, onBack, members, checkIns, events = [], onAddVisitor, onSyncOutline, onExportCSV, onAdminCheckIn, onUpdateMember, onDeleteMember, onCreateEvent, onUpdateEvent, onDeleteEvent, onImportEvents, onExportReport }) { const [tab, setTab] = useStateA('members'); const today = new Date().toISOString().slice(0, 10); const todayRecords = checkIns.filter(c => c.date === today); const totalMembers = members.length; const monthStart = today.slice(0, 7) + '-01'; const newThisMonth = members.filter(m => (m.addedAt || '') >= monthStart).length; const greetName = (user?.en?.split(' ')[0]) || 'admin'; return (
{/* Header */}
Admin · 管理員

Welcome, {greetName}

{user?.zh && (
{user.zh}，歡迎
)} {/* KPI strip — computed from real data */}
0 ? `of ${totalMembers} members` : 'no members yet'} /> 0 ? `+${newThisMonth}` : '0'} label="New this month · 本月新增" sub="visitors & members" coral />
{/* Tabs */}
{[ { id: 'members', en: 'Members', zh: '會友', icon: 'users' }, { id: 'events', en: 'Events', zh: '活動', icon: 'calendar' }, { id: 'reports', en: 'Reports', zh: '報告', icon: 'bar-chart' }, { id: 'admins', en: 'Admins', zh: '管理員', icon: 'settings' }, ].map(t => ( ))}
{/* Tab content */}
{tab === 'members' && } {tab === 'events' && } {tab === 'reports' && } {tab === 'admins' && }
); } function MemberEditModal({ member, onCancel, onSave }) { const [form, setForm] = useStateA({ en: member.en || '', zh: member.zh || '', role: member.role || '', congregation: member.congregation || 'cantonese', pref: member.pref || 'online', phone: member.phone || '', email: member.email || '', }); const [saving, setSaving] = useStateA(false); const [error, setError] = useStateA(null); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); const submit = async (e) => { e.preventDefault(); setError(null); if (!form.en.trim()) { setError('Name is required.'); return; } setSaving(true); try { await onSave(form); } catch (err) { setError(err.message); setSaving(false); } }; const inputStyle = { width: '100%', boxSizing: 'border-box', padding: '11px 14px', borderRadius: 12, border: '1px solid var(--border-strong)', background: 'var(--bg-1)', fontSize: 14, fontFamily: 'Inter, sans-serif', outline: 'none', }; return (
e.stopPropagation()} style={{ background: 'var(--bg-1)', borderRadius: 16, width: '100%', maxWidth: 460, maxHeight: '90vh', overflowY: 'auto', boxShadow: 'var(--shadow-2xl)', }}>
Edit member · 編輯會友
{member.id}
update('en', e.target.value)} required /> update('zh', e.target.value)} /> update('role', e.target.value)} />
{[ { id: 'online', label: 'Online · 線上' }, { id: 'paper', label: 'Paper · 紙本' }, ].map(p => ( ))}
update('phone', e.target.value)} /> update('email', e.target.value)} /> {error &&
{error}
}
Cancel {saving ? 'Saving…' : 'Save · 儲存'}
); } function KPI({ value, label, sub, coral }) { return (
{value}
{label}
{sub}
); } // ─── Members tab ─── function AdminMembers({ members, checkIns, onAddVisitor, onExportCSV, onAdminCheckIn, onUpdateMember, onDeleteMember }) { const [filter, setFilter] = useStateA('all'); // all | online | paper | here const [query, setQuery] = useStateA(''); const [editingMember, setEditingMember] = useStateA(null); const today = new Date().toISOString().slice(0, 10); const checkedToday = new Set(checkIns.filter(c => c.date === today).map(c => c.member_id)); const filtered = members.filter(m => { if (filter === 'online' && m.pref !== 'online') return false; if (filter === 'paper' && m.pref !== 'paper') return false; if (filter === 'here' && !checkedToday.has(m.id)) return false; if (query) { const q = query.toLowerCase(); if (!m.en.toLowerCase().includes(q) && !m.zh.includes(query)) return false; } return true; }); return (
{/* Search */}
setQuery(e.target.value)} placeholder="Search name or 中文 …" style={{ width: '100%', boxSizing: 'border-box', padding: '11px 16px 11px 38px', borderRadius: 9999, border: '1px solid var(--border-subtle)', background: 'var(--bg-1)', fontFamily: 'Inter, sans-serif', fontSize: 14, outline: 'none', }} />
{/* Filter chips */}
{[ { id: 'all', label: `All · 全部 (${members.length})` }, { id: 'here', label: `Here today · 已到 (${checkedToday.size})` }, { id: 'online', label: `Online ${members.filter(m=>m.pref==='online').length}` }, { id: 'paper', label: `Paper ${members.filter(m=>m.pref==='paper').length}` }, ].map(f => ( ))}
{/* Action buttons */}
Add visitor Export CSV
{/* List */} {filtered.length === 0 ? (
No members yet · 尚未有會友
New members appear here when they sign up, or when an admin adds a visitor.
) : ( {filtered.map((m, i) => { const here = checkedToday.has(m.id); return (
{!here ? ( ) : ( )} {onDeleteMember && ( )}
); })} )} {editingMember && ( setEditingMember(null)} onSave={async (patch) => { await onUpdateMember(editingMember.id, patch); setEditingMember(null); }} /> )}
Paper preference means the member checks in via the paper roster at the door. Admins can mark them present here on their behalf. 「紙本」會友以紙本簽到，管理員可代為登記。
); } // ─── Events tab ─── function AdminEvents({ events = [], onSyncOutline, onCreateEvent, onUpdateEvent, onDeleteEvent, onImportEvents }) { const [editing, setEditing] = useStateA(null); // event id or 'new' const fileRef = React.useRef(null); const months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']; const downloadTemplate = () => { const csv = [ 'name_en,name_zh,date,time,congregations,description', 'Baptism Sunday,浸禮主日,2026-05-31,11:00,"cantonese,mandarin,english",Pastors lead the baptism after each service.', "Mother's Day Lunch,母親節愛筵,2026-05-10,12:30,\"cantonese,mandarin\",Lunch in the hall after the 11:00 service.", ].join('\r\n'); const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'bhcac-events-template.csv'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); }; const handleImport = async (e) => { const file = e.target.files?.[0]; if (!file) return; e.target.value = ''; // allow re-selecting the same file const text = await file.text(); const lines = text.replace(/^/, '').split(/\r?\n/).filter(l => l.trim()); if (lines.length < 2) { alert('CSV is empty.'); return; } const parseRow = (line) => { const out = []; let buf = ''; let q = false; for (let i = 0; i < line.length; i++) { const c = line[i]; if (q) { if (c === '"' && line[i+1] === '"') { buf += '"'; i++; } else if (c === '"') q = false; else buf += c; } else { if (c === '"') q = true; else if (c === ',') { out.push(buf); buf = ''; } else buf += c; } } out.push(buf); return out; }; const headers = parseRow(lines[0]).map(h => h.trim().toLowerCase()); const rows = lines.slice(1).map(parseRow).map(r => Object.fromEntries(headers.map((h, i) => [h, r[i] || '']))); const payload = rows.map(r => ({ en: (r.name_en || r.en || '').trim(), zh: (r.name_zh || r.zh || '').trim(), date: (r.date || '').trim(), time: (r.time || '').trim(), congregations: (r.congregations || r.services || '').split(',').map(s => s.trim()).filter(Boolean), description: (r.description || '').trim(), })).filter(e => e.en && e.date && e.time); if (payload.length === 0) { alert('No valid rows found. Make sure name_en, date and time are filled.'); return; } await onImportEvents(payload); }; return (
Upcoming · 即將舉行
setEditing('new')}>New event Template fileRef.current?.click()}>Import CSV
{editing && ( e.id === editing)} onCancel={() => setEditing(null)} onSave={async (payload) => { if (editing === 'new') await onCreateEvent(payload); else await onUpdateEvent(editing, payload); setEditing(null); }} /> )} {events.length === 0 && !editing && (
No events yet · 尚未有活動
Create one above, or import from the CSV template.
)} {events.map((e, i) => { const accents = ['var(--brand-coral)', 'var(--brand-teal)', 'var(--brand-navy)']; const accent = accents[i % 3]; const month = months[Number((e.date || '').slice(5, 7)) - 1] || ''; return (
{e.en}
{e.zh &&
{e.zh}
} {e.time && (
{e.time}
)} {e.description &&
{e.description}
} {(e.closed_at || e.synced_at) && (
{e.closed_at && ( Closed · {String(e.closed_at).slice(11, 16)} )} {e.synced_at && ( Synced · {String(e.synced_at).slice(0, 10)} )}
)}
{(e.date || '').slice(8)} {month}
{Array.isArray(e.congregations) && e.congregations.length > 0 && (
{e.congregations.map(cid => { const s = DA.congregations.find(x => x.id === cid); return {s ? s.en : cid}; })}
)}
setEditing(e.id)}>Edit { if (!window.confirm(`Delete "${e.en}"?`)) return; await onDeleteEvent(e.id); }}>Delete
); })}
); } function EventForm({ event, onSave, onCancel }) { // Default new events to all three congregations so a freshly-created // event matches every member's check-in by default. Admin can untick. const defaultCongregations = ['cantonese', 'mandarin', 'english']; const [form, setForm] = useStateA({ en: event?.en || '', zh: event?.zh || '', date: event?.date || new Date().toISOString().slice(0, 10), time: event?.time || '11:00', congregations: event?.congregations && event.congregations.length > 0 ? event.congregations : defaultCongregations, description: event?.description || '', }); const [saving, setSaving] = useStateA(false); const [error, setError] = useStateA(null); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); const toggleCongregation = (cid) => setForm(f => ({ ...f, congregations: f.congregations.includes(cid) ? f.congregations.filter(s => s !== cid) : [...f.congregations, cid], })); const submit = async (e) => { e.preventDefault(); setError(null); if (!form.en.trim()) { setError('Name is required.'); return; } if (!form.date) { setError('Date is required.'); return; } if (!form.time) { setError('Start time is required.'); return; } if (form.congregations.length === 0) { setError('Pick at least one congregation this event applies to.'); return; } setSaving(true); try { await onSave({ ...form }); } catch (err) { setError(err.message); setSaving(false); } }; const inputStyle = { width: '100%', boxSizing: 'border-box', padding: '11px 14px', borderRadius: 12, border: '1px solid var(--border-strong)', background: 'var(--bg-1)', fontSize: 14, fontFamily: 'Inter, sans-serif', outline: 'none', }; return ( {event ? 'Edit event · 編輯活動' : 'New event · 新增活動'}
update('en', e.target.value)} required /> update('zh', e.target.value)} />
Date · 日期
update('date', e.target.value)} required />
Start time · 開始時間
update('time', e.target.value)} required />