// screens-member.jsx — member-facing phone screens for BHCAC Attendance
// All screens are bilingual (EN + 中文). Designed for a 402×874 iPhone canvas.
const { useState, useEffect, useMemo } = React;
const D = window.BHCAC_DATA;
// ─────────────────────────────────────────────────────────────
// Screen 1: WELCOME — sign-in
// Mobile: dark hero with form on top.
// Desktop (≥ 768px): two-column — hero panel left, sign-in card right.
// onSignIn(user) is called with the authenticated user object.
// ─────────────────────────────────────────────────────────────
function useIsDesktop(breakpoint = 768) {
const [match, setMatch] = useState(typeof window !== 'undefined' && window.innerWidth >= breakpoint);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const mql = window.matchMedia(`(min-width: ${breakpoint}px)`);
const handler = (e) => setMatch(e.matches);
setMatch(mql.matches);
// Safari < 14 / older Android only support the deprecated addListener API.
// Using addEventListener unconditionally throws there and blanks the page.
if (typeof mql.addEventListener === 'function') {
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
}
if (typeof mql.addListener === 'function') {
mql.addListener(handler);
return () => mql.removeListener(handler);
}
}, [breakpoint]);
return match;
}
function ScreenWelcome({ onSignIn }) {
const AUTH = window.BHCAC_AUTH;
const isDesktop = useIsDesktop();
const [mode, setMode] = useState('login');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
const [zh, setZh] = useState('');
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState(null);
const supportsPasskey = !!(AUTH && AUTH.browserSupportsPasskeys && AUTH.browserSupportsPasskeys());
const submit = async (e) => {
e?.preventDefault?.();
setError(null); setSubmitting(true);
try {
const user = mode === 'register'
? await AUTH.register({ email, password, en: name, zh })
: await AUTH.login({ email, password });
onSignIn(user);
} catch (err) {
setError(err.message);
} finally {
setSubmitting(false);
}
};
const passkey = async () => {
setError(null); setSubmitting(true);
try {
const user = await AUTH.loginWithPasskey({ email: email || undefined });
onSignIn(user);
} catch (err) {
setError(err.message);
} finally {
setSubmitting(false);
}
};
const formState = {
mode, setMode, email, setEmail, password, setPassword,
name, setName, zh, setZh, submitting, error, setError,
submit, passkey, supportsPasskey,
};
return isDesktop
?
2/4 Gladstone Rd, Castle Hill · 國語 9:15 · 粵語 11:00 · 英語 4:30
);
}
// --- Desktop sign-in (split-screen hero + form card) ---
function DesktopWelcome(p) {
const inputStyle = {
width: '100%', boxSizing: 'border-box',
padding: '13px 16px',
borderRadius: 12,
border: '1px solid var(--border-strong)',
background: 'var(--bg-1)',
color: 'var(--fg-1)', fontSize: 15, fontFamily: 'Inter, sans-serif',
outline: 'none',
transition: 'border-color 150ms, box-shadow 150ms',
};
return (
{/* Left — pastoral hero */}
BHCAC · ATTENDANCE
You are
歡迎來到迦南堂
One app for the whole congregation — sign in to check your family in,
register a visitor, or follow this Sunday's services.
一個應用程式，服侍全會眾 — 登入即可代家人簽到、登記新朋友，或了解本主日的崇拜安排。
2/4 Gladstone Rd
{/* Right — form card */}
By signing in you agree to BHCAC handling your information under the Australian Privacy Principles.
{mode === 'register' ? 'Create account · 建立帳戶' : 'Sign in · 登入'}
{mode === 'register' ? 'Welcome — let’s set you up.' : 'Welcome back.'}
{mode === 'register' ? '歡迎，請建立您的帳戶' : '請登入以繼續'}
);
}
function SigninForm({ dark, inputStyle, mode, setMode, email, setEmail, password, setPassword,
name, setName, zh, setZh, submitting, error, setError, submit, passkey, supportsPasskey }) {
const dividerColor = dark ? 'rgba(255,255,255,0.1)' : 'var(--border-subtle)';
const dividerText = dark ? 'rgba(255,255,255,0.45)' : 'var(--fg-3)';
const passkeyBtn = dark ? {
background: 'rgba(255,255,255,0.08)', color: '#fff',
border: '1px solid rgba(255,255,255,0.25)', backdropFilter: 'blur(8px)',
} : {
background: 'var(--bg-1)', color: 'var(--fg-1)',
border: '1px solid var(--border-strong)',
};
const linkColor = dark ? 'var(--coral-400)' : 'var(--brand-coral)';
const linkMuted = dark ? 'rgba(255,255,255,0.6)' : 'var(--fg-3)';
return (
<>
{supportsPasskey && (
<>
Continue with passkey · 通行密鑰
)}
{mode === 'register' ? (
<>
Already have an account?
{ setError(null); setMode('login'); }}
style={{ color: linkColor, background: 'transparent', border: 'none', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
Sign in · 登入
) : (
<>
New to BHCAC?
{ setError(null); setMode('register'); }}
style={{ color: linkColor, background: 'transparent', border: 'none', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
Create account · 建立帳戶
)}
);
}
function ServiceTime({ time, label }) {
return (
);
}
// ─────────────────────────────────────────────────────────────
// Screen 2: TODAY (member home)
// ─────────────────────────────────────────────────────────────
function computeRecentSundays(user, checkIns) {
const today = new Date();
const todaySunday = new Date(today);
if (todaySunday.getDay() !== 0) {
todaySunday.setDate(todaySunday.getDate() - todaySunday.getDay());
}
const items = [];
for (let i = 4; i >= 0; i--) {
const d = new Date(todaySunday);
d.setDate(d.getDate() - i * 7);
items.push(d);
}
const memberIdSet = new Set([user?.id, user?.authUserId, user?.memberId].filter(Boolean));
const userDates = new Set(
(checkIns || []).filter(c => memberIdSet.has(c.member_id)).map(c => c.date)
);
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return items.map(d => {
const dateStr = d.toISOString().slice(0, 10);
const isToday = d.toDateString() === new Date().toDateString();
const isThisSunday = d.toDateString() === todaySunday.toDateString();
return {
date: dateStr,
label: (isToday || isThisSunday) ? 'Today' : `${d.getDate()} ${months[d.getMonth()]}`,
here: userDates.has(dateStr),
today: isToday || isThisSunday,
};
});
}
function greetingFor(d) {
const h = d.getHours();
if (h < 12) return 'Good morning';
if (h < 17) return 'Good afternoon';
return 'Good evening';
}
// Sydney timezone helpers — services are scheduled in local time, so we
// compare everything in Australia/Sydney rather than UTC.
function todayDateInSydney(now = new Date()) {
return new Intl.DateTimeFormat('en-CA', { timeZone: 'Australia/Sydney' }).format(now);
}
function nowMinutesInSydney(now = new Date()) {
const fmt = new Intl.DateTimeFormat('en-GB', { timeZone: 'Australia/Sydney', hour: '2-digit', minute: '2-digit', hour12: false });
const [hh, mm] = fmt.format(now).split(':').map(Number);
return hh * 60 + mm;
}
function parseServiceTimeMinutes(timeStr) {
if (!timeStr) return null;
const m = String(timeStr).match(/(\d{1,2}):(\d{2})\s*(AM|PM)?/i);
if (!m) return null;
let h = parseInt(m[1]);
const min = parseInt(m[2]);
const ap = (m[3] || '').toUpperCase();
if (ap === 'PM' && h < 12) h += 12;
if (ap === 'AM' && h === 12) h = 0;
return h * 60 + min;
}
// Default window: opens 60 min before service, stays open 180 min after.
function checkinWindow(serviceTime, now = new Date(), beforeMin = 60, afterMin = 180) {
const eventMin = parseServiceTimeMinutes(serviceTime);
if (eventMin == null) return { state: 'unknown', open: true };
const nowMin = nowMinutesInSydney(now);
const opensAt = eventMin - beforeMin;
const closesAt = eventMin + afterMin;
if (nowMin < opensAt) return { state: 'too-early', open: false, opensAt, eventMin };
if (nowMin > closesAt) return { state: 'too-late', open: false, closesAt, eventMin };
return { state: 'open', open: true, eventMin };
}
function formatHM(totalMinutes) {
if (totalMinutes == null) return '';
const h24 = Math.floor(totalMinutes / 60);
const m = totalMinutes % 60;
const ap = h24 >= 12 ? 'PM' : 'AM';
const h12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;
return `${h12}:${String(m).padStart(2, '0')} ${ap}`;
}
function formatTodayLabel(date = new Date()) {
const days = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
const months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
const dayName = days[date.getDay()] === 'SUN' ? 'SUNDAY' : days[date.getDay()];
const isSunday = date.getDay() === 0;
return `${dayName} · ${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}${isSunday ? ' · 主日' : ''}`;
}
function ScreenToday({ user, family, members, events = [], congregations = [], checkIns, onCheckIn, onOpenAdmin, onOpenSettings, onSignOut, onAddPasskey }) {
const today = todayDateInSydney();
const familyMembers = members.filter(m => family && m.family === family.id);
const hasFamily = familyMembers.length > 0;
const roster = hasFamily
? familyMembers
: (user?.id ? [members.find(m => m.id === user.id) || user].filter(Boolean) : []);
const checkedInIds = new Set(checkIns.filter(c => c.date === today).map(c => c.member_id));
const rosterCheckedCount = roster.filter(m => checkedInIds.has(m.id)).length;
const allRosterChecked = roster.length > 0 && rosterCheckedCount === roster.length;
// Congregations represented across the roster
const congList = congregations.length > 0 ? congregations : (D.congregations || []);
const rosterCongregationIds = [...new Set(roster.map(m => m.congregation))];
// Events scheduled for today (i.e., a Sunday recurring event or a special
// event whose date matches today). The user's congregation must appear on
// at least one of them for check-in to be available.
const todayEvents = events.filter(e => e.date === today);
const myCongregation = congList.find(s => s.id === user?.congregation);
const myEventToday = todayEvents.find(e =>
Array.isArray(e.congregations) && e.congregations.includes(user?.congregation));
const eventTime = myEventToday?.time || myCongregation?.defaultTime;
const myWindow = myEventToday
? checkinWindow(eventTime)
: { state: 'no-service', open: false };
const checkinAllowed = myWindow.open;
return (
{/* Header — solid navy so the headline always reads cleanly */}
{formatTodayLabel()}
{greetingFor(new Date())}, {user.en.split(' ')[0]}.
{user.zh && (
{user.zh}，主日平安。
)}
{/* Floating family check-in card */}
{hasFamily ? `Your Family · 您的家庭` : 'Your Check-in · 您的簽到'}
{hasFamily ? family.en : user.en}
{hasFamily && (
{family.zh}
)}
{allRosterChecked && (
All Here · 全到
)}
{/* Member chips */}
{familyMembers.map(m => {
const checked = checkedInIds.has(m.id);
return (
{m.en.split(' ')[0]}
{checked &&
}
);
})}
{!allRosterChecked ? (
checkinAllowed && onCheckIn()}>
{checkinAllowed
? `Check in${hasFamily ? ` ${roster.length - rosterCheckedCount}${rosterCheckedCount > 0 ? ' more' : ''}` : ''} · 簽到`
: myWindow.state === 'too-early'
? `Opens at ${formatHM(myWindow.opensAt)} · 簽到尚未開放`
: myWindow.state === 'too-late'
? 'Closed for today · 今日簽到已結束'
: myWindow.state === 'no-service'
? 'No service today · 今日沒有聚會'
: 'Check in · 簽到'}
) : (
onCheckIn()}>
Edit check-in · 修改簽到
)}
{myWindow.state === 'too-early' && eventTime && (
{myEventToday?.en || myCongregation?.en} starts at {eventTime}.
)}
{myWindow.state === 'no-service' && (
There's no service scheduled for today.
)}
{/* Congregation times row */}
{rosterCongregationIds.length > 0 && (
{rosterCongregationIds.map(cid => {
const s = congList.find(x => x.id === cid);
if (!s) return null;
const w = checkinWindow(s.defaultTime);
return (
{s.defaultTime}
·
{s.en}
{s.zh &&
· {s.zh} }
{w.state === 'open' &&
OPEN }
);
})}
{/* /.today-main */}
{/* This week's events */}
{events.length > 0 && (
This Week · 本週
Special events
{events.slice(0, 3).map((e, i) => (
)}
{/* History strip — real data, hidden when there's nothing yet */}
{(() => {
const recent = computeRecentSundays(user, checkIns);
const hasAnyHistory = recent.some(s => s.here);
if (!hasAnyHistory) return null;
const past4 = recent.slice(0, 4);
const attended = past4.filter(s => s.here).length;
return (
Your Journey · 您的旅程
Recent Sundays
{recent.map((w, i) => (
))}
{attended} of {past4.length} Sundays attended this past month · 過去{past4.length}週出席{attended}次
);
})()}
{/* Set up passkey (if signed-in user has none yet) */}
{onAddPasskey && (user.passkeyCount === 0 || user.passkeyCount === undefined) && user.authUserId && (
Skip the password next time · 設定通行密鑰
Add a passkey to this device
)}
{/* Footer admin link (if user is admin) */}
{user.isAdmin && (
Admin tools · 管理員工具
Members, events, reports
)}
{/* /.today-side */}
{/* /.today-body */}
{badge}
)}
);
}
function EventCard({ event, accent, image, registered }) {
if (!event) return null;
const date = event.date || '';
const month = date.slice(5, 7);
const day = date.slice(8, 10);
const monthLabel = ({ '01':'JAN','02':'FEB','03':'MAR','04':'APR','05':'MAY','06':'JUN','07':'JUL','08':'AUG','09':'SEP','10':'OCT','11':'NOV','12':'DEC' })[month] || '';
const reg = event.registered || 0;
const cap = event.capacity || 0;
const pct = cap > 0 ? Math.min(100, (reg / cap) * 100) : 0;
return (
{registered ? 'Registered' : (day && monthLabel ? `${day} ${monthLabel}` : 'Soon')}
{event.en || 'Event'}
{event.zh &&
{event.zh}
}
{event.time && (
{event.time}
)}
{cap > 0 && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// Screen 3: CHECK-IN — pick who's here
// ─────────────────────────────────────────────────────────────
function ScreenCheckIn({ user, family, members, congregations = [], checkIns, onConfirm, onBack }) {
const today = todayDateInSydney();
// Roster = the family members if family exists, otherwise just the user.
// Make sure the user themselves is always present (handles solo accounts).
const rosterRaw = family
? members.filter(m => m.family === family.id)
: [];
const userMember = members.find(m => m.id === user?.id) || (user?.id ? user : null);
const roster = userMember && !rosterRaw.some(m => m.id === userMember.id)
? [userMember, ...rosterRaw]
: rosterRaw;
const hasFamily = !!family && rosterRaw.length > 0;
const checkedInIds = new Set(checkIns.filter(c => c.date === today).map(c => c.member_id));
const [selected, setSelected] = useState(() => new Set(roster.filter(m => !checkedInIds.has(m.id)).map(m => m.id)));
const congList = congregations.length > 0 ? congregations : (D.congregations || []);
const toggle = (id) => {
const s = new Set(selected);
if (s.has(id)) s.delete(id); else s.add(id);
setSelected(s);
};
const rosterLabel = hasFamily
? `${family.en}${family.zh ? ' · ' + family.zh : ''}`
: 'Just me · 您自己';
return (
{/* Header */}
Check In · 簽到
Who's here today?
誰來了？
{/* List */}
{rosterLabel}
{roster.length > 1 && (
setSelected(new Set(roster.map(m => m.id)))}
style={{ fontSize: 12, fontWeight: 600, color: 'var(--brand-teal)', background: 'transparent', border: 'none', cursor: 'pointer' }}>
Select all
)}
{roster.map((m, i) => {
const wasChecked = checkedInIds.has(m.id);
const isSelected = selected.has(m.id);
const cong = congList.find(s => s.id === m.congregation);
return (
!wasChecked && toggle(m.id)}
style={{
display: 'flex', alignItems: 'center', gap: 14,
padding: '14px 18px',
borderBottom: i < roster.length - 1 ? '1px solid var(--border-subtle)' : 'none',
cursor: wasChecked ? 'default' : 'pointer',
background: isSelected && !wasChecked ? 'rgba(244,63,94,0.04)' : 'transparent',
opacity: wasChecked ? 0.6 : 1,
}}>
{m.en}
{m.zh && <>{m.zh} · }
{cong ? `${cong.en} · ${cong.defaultTime}` : '—'}
{(isSelected || wasChecked) &&
{/* Add other person */}
{/* Info */}
Children's Sunday School at 11:00 takes place upstairs. Drop-off opens 10 minutes early.
兒童主日學在樓上，11:00 開始；提前 10 分鐘可送到。
{/* Sticky CTA */}
onConfirm([...selected])}>
Check in {selected.size} {selected.size === 1 ? 'person' : 'people'} · 確認簽到
{/* Top hero */}
You're all set.
簽到完成。
Welcome, {family.en}. We're so glad you're here today.
{/* Summary card */}
Checked in · 已簽到
{justChecked.map(m => {
const s = D.congregations.find(x => x.id === m.congregation);
return (
{m.en} · {m.zh}
{s ? `${s.en} · ${s.defaultTime}` : ''}
);
})}
{/* Kids name-tag printout teaser */}
{kids.length > 0 && (
Pick up name stickers at the kids' table
請到兒童桌領取名牌貼紙
)}
{/* Verse for the day */}
Verse for today · 今日經文
"Ask and it will be given to you; seek and you will find."
MATTHEW 7:7 · 馬太福音 7:7
{/* Bottom actions */}
Done · 完成
{user.en}
{user.email} {user.role === 'superadmin' &&
SUPERADMIN }
{success && (
{success}
)}
{ setOpen(open === 'password' ? null : 'password'); setError(null); setSuccess(null); }}
style={rowBtnStyle(open === 'password')}>
Change password · 更改密碼
{user.hasPassword ? 'Update your sign-in password' : 'Set a sign-in password (you currently use passkey only)'}
{open === 'password' && (
)}
Passkeys · 通行密鑰
{user.passkeyCount > 0
? `${user.passkeyCount} passkey${user.passkeyCount === 1 ? '' : 's'} registered on your devices`
: 'Skip passwords by adding a passkey to this device'}
{supportsPasskey && (
+ Add
)}
);
}
function rowBtnStyle(active) {
return {
width: '100%',
display: 'flex', alignItems: 'center', gap: 12,
padding: '14px 16px',
background: 'transparent', border: 'none',
fontFamily: 'inherit', cursor: 'pointer',
color: 'var(--fg-1)',
};
}
Object.assign(window, { ScreenWelcome, ScreenToday, ScreenCheckIn, ScreenConfirm, ScreenSettings, CircleBtn });
