// portal-screens.jsx — read-mostly screens: Dashboard, Members list, Profile, Reports, Audit log // ═══════════════════════════════════════════════════════════════ // DASHBOARD // ═══════════════════════════════════════════════════════════════ function PageHeader({ title, eyebrow, children, sub }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{sub &&
{sub}
}
{children}
); } function Stat({ label, value, accent, sub, icon }) { return (
{label}
{icon &&
{icon}
}
{value}
{sub &&
{sub}
} ); } function BarChart({ data, height = 180, accent = T.gold }) { const max = Math.max(...data.map(d => d.value), 1); return (
{data.map((d, i) => { const h = (d.value / max) * (height - 26); return (
{d.value > 0 ? (d.value >= 1000 ? (d.value / 1000).toFixed(0) + 'k' : d.value) : ''}
{d.label}
); })}
); } function DonutChart({ segments, size = 140 }) { const total = segments.reduce((a, b) => a + b.value, 0) || 1; const r = size / 2 - 14; const cx = size / 2; let acc = 0; const C = 2 * Math.PI * r; return ( {segments.map((s, i) => { const len = (s.value / total) * C; const offset = (acc / total) * C; acc += s.value; return ( ); })} {total} members ); } function DashboardScreen() { const allMembers = useStore(s => s.members); const audit = useStore(s => s.audit); const session = useStore(s => s.session); const user = useStore(s => s.users.find(u => u.id === s.currentUserId)); const role = user && user.role; // Role-tailored views: // - Associate: big "Redeem now" hero, today's actions, upcoming birthdays only // - Manager: revenue + mix + top spenders + birthdays // - Super Admin: everything (default) const isAssoc = role === 'Associate'; const isManager = role === 'Manager'; const members = allMembers.filter(m => !m.deleted); const inProperty = members.filter(m => true); const active = inProperty.filter(m => m.status === 'active'); const expired = inProperty.filter(m => m.status === 'expired'); const silvers = active.filter(m => m.type === 'silver'); const wellness = active.filter(m => m.type === 'wellness'); const totalRevenue = inProperty.reduce((sum, m) => sum + sumSpend(m.spend), 0); const totalDiscount = inProperty.reduce((sum, m) => sum + (m.spend.discount || 0), 0); const topSpenders = [...inProperty].sort((a, b) => sumSpend(b.spend) - sumSpend(a.spend)).slice(0, 5); // Upcoming birthdays/anniversaries (within 30 days) const today = new Date(); const upcoming = []; inProperty.forEach(m => { if (m.dob) { const [y, mo, d] = m.dob.split('-').map(Number); const next = new Date(today.getFullYear(), mo - 1, d); if (next < today) next.setFullYear(today.getFullYear() + 1); const days = Math.round((next - today) / 86400000); if (days <= 30) upcoming.push({ kind: 'birthday', date: next, days, member: m }); } if (m.anniversary && m.type === 'wellness') { const parts = m.anniversary.split('-'); if (parts.length === 2) { const next = new Date(today.getFullYear(), Number(parts[0]) - 1, Number(parts[1])); if (next < today) next.setFullYear(today.getFullYear() + 1); const days = Math.round((next - today) / 86400000); if (days <= 30) upcoming.push({ kind: 'anniversary', date: next, days, member: m }); } } }); upcoming.sort((a, b) => a.days - b.days); // Build last 12 months revenue (synthetic from current totals) const monthLabels = ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May']; const chartData = monthLabels.map((m, i) => ({ label: m, value: Math.round(totalRevenue * (0.04 + (i / 12) * 0.12) * (0.6 + Math.sin(i * 1.2) * 0.3 + 0.4)), })); const todayActions = audit.filter(a => { const d = new Date(a.ts); const now = new Date(); return d.toDateString() === now.toDateString(); }); // ─── Associate-only dashboard: action-first, minimal stats ───── if (isAssoc) { const myActions = audit.filter(a => a.who === user.name).slice(0, 8); return (
Most common

Redeem a benefit

Comp room · F&B discount · pool · gym · cake
New today

Enroll a member

3-minute flow · printed card ready after save
F&B desk

Apply discount

From Aegis bill · 10% silver · 20% wellness

Your recent activity

{todayActions.length} today across team
{myActions.length === 0 ? (
Nothing logged yet today — start with Redeem or Enroll above.
) : (
{myActions.map((a, i) => (
{a.action}
{fmtDateTime(a.ts)}
))}
)}
); } return (

Member revenue

last 12 months · all sources
↑ trending

Mix

Wellness · {wellness.length}
NPR 50,000 / yr
Silver · {silvers.length}
free tier

★ Top spenders

navigate('members')} style={{ fontSize: 12 }}>see all
{topSpenders.map((m, i) => (
navigate('members/' + m.id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < topSpenders.length - 1 ? '1px solid ' + T.borderSoft : 'none', cursor: 'pointer', }}> {i + 1}
{m.name}
{m.id} · {m.property}
{fmtNPR(sumSpend(m.spend))}
))} {topSpenders.length === 0 &&
No members yet — enroll the first one.
}

🎂 Coming up · 30 days

plan all
{upcoming.slice(0, 5).map((u, i) => (
navigate('members/' + u.member.id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < Math.min(upcoming.length, 5) - 1 ? '1px solid ' + T.borderSoft : 'none', cursor: 'pointer', }}>
{u.days}
{u.days === 0 ? 'today' : u.days === 1 ? 'day' : 'days'}
{u.kind === 'birthday' ? '🎂' : '💍'}
{u.member.name}
{u.kind === 'birthday' ? 'birthday' : 'anniversary'} · {fmtDate(u.date)} {u.member.type === 'wellness' && ' · cake comp due'}
))} {upcoming.length === 0 &&
No birthdays in the next 30 days.
}
); } // ═══════════════════════════════════════════════════════════════ // MEMBERS LIST // ═══════════════════════════════════════════════════════════════ function MembersScreen() { const allMembers = useStore(s => s.members); const toast = useToast(); const [q, setQ] = React.useState(''); const [tier, setTier] = React.useState('all'); const [prop, setProp] = React.useState('all'); const [status, setStatus] = React.useState('all'); const [showDeleted, setShowDeleted] = React.useState(false); const [importing, setImporting] = React.useState(false); // Soft-deleted members are hidden by default. Super admins can toggle them. const members = showDeleted ? allMembers : allMembers.filter(m => !m.deleted); const filtered = members.filter(m => { if (tier !== 'all' && m.type !== tier) return false; if (prop !== 'all' && m.property !== prop) return false; if (status !== 'all' && m.status !== status) return false; if (q) { const needle = q.toLowerCase(); if (!(m.name.toLowerCase().includes(needle) || m.id.toLowerCase().includes(needle) || (m.cardNumber || '').toLowerCase().includes(needle) || (m.phone || '').includes(needle) || (m.email || '').toLowerCase().includes(needle))) return false; } return true; }); const deletedCount = allMembers.filter(m => m.deleted).length; return (
{Store.can('enroll') && } {Store.can('enroll') && } {Store.can('delete') && deletedCount > 0 && ( )} setImporting(false)} onDone={(ok, fail) => toast.show(`Imported ${ok} · failed ${fail}`)} />
setQ(e.target.value)} style={{ paddingLeft: 36 }} /> ⌕
{filtered.map(m => ( navigate('members/' + m.id)}> ))} {filtered.length === 0 && ( )}
Card no Member Tier Property Joined Expiry YTD spend Status
{m.id}
{m.name}
{m.phone}
 {m.property} {fmtDate(m.startDate)} {fmtDate(m.expiryDate)} {fmtNPR(sumSpend(m.spend))}
No members match these filters. navigate('enroll')}>Enroll a new member →
); } // ═══════════════════════════════════════════════════════════════ // REPORTS // ═══════════════════════════════════════════════════════════════ // Date-range helper. Returns { from: Date, to: Date } for a preset key. // All ranges are computed against Nepal local time (NPT, UTC+5:45) so // "Today / Yesterday / This month" align with how the staff perceive dates. function dateRange(preset, custom) { // Convert "now" to NPT by reading wall-clock time in Asia/Kathmandu and // building a Date from it. const nowStr = new Date().toLocaleString('en-US', { timeZone: 'Asia/Kathmandu' }); const now = new Date(nowStr); const startOfDay = d => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; }; const endOfDay = d => { const x = new Date(d); x.setHours(23, 59, 59, 999); return x; }; switch (preset) { case 'today': return { from: startOfDay(now), to: endOfDay(now) }; case 'yesterday': { const y = new Date(now); y.setDate(y.getDate() - 1); return { from: startOfDay(y), to: endOfDay(y) }; } case 'last7': { const f = new Date(now); f.setDate(f.getDate() - 6); return { from: startOfDay(f), to: endOfDay(now) }; } case 'last30': { const f = new Date(now); f.setDate(f.getDate() - 29); return { from: startOfDay(f), to: endOfDay(now) }; } case 'thismonth': { const f = new Date(now.getFullYear(), now.getMonth(), 1); const t = new Date(now.getFullYear(), now.getMonth() + 1, 0); return { from: startOfDay(f), to: endOfDay(t) }; } case 'lastmonth': { const f = new Date(now.getFullYear(), now.getMonth() - 1, 1); const t = new Date(now.getFullYear(), now.getMonth(), 0); return { from: startOfDay(f), to: endOfDay(t) }; } case 'thisyear': { const f = new Date(now.getFullYear(), 0, 1); const t = new Date(now.getFullYear(), 11, 31); return { from: startOfDay(f), to: endOfDay(t) }; } case 'custom': return { from: custom && custom.from ? startOfDay(new Date(custom.from)) : startOfDay(new Date(now.getFullYear(), now.getMonth(), 1)), to: custom && custom.to ? endOfDay(new Date(custom.to)) : endOfDay(now), }; default: return { from: startOfDay(new Date(now.getFullYear(), 0, 1)), to: endOfDay(now) }; } } function inRange(tsIso, range) { if (!tsIso) return false; const t = new Date(tsIso).getTime(); return t >= range.from.getTime() && t <= range.to.getTime(); } function ReportsScreen() { const members = useStore(s => s.members.filter(m => !m.deleted)); const audit = useStore(s => s.audit); const bills = useStore(s => s.bills || []); const toast = useToast(); const [preset, setPreset] = React.useState('last30'); const [propertyF, setPropertyF] = React.useState('all'); const [tierF, setTierF] = React.useState('all'); const [customFrom, setCustomFrom] = React.useState(''); const [customTo, setCustomTo] = React.useState(''); const [memberSearch, setMemberSearch] = React.useState(''); // by name OR ID OR card # const range = dateRange(preset, { from: customFrom, to: customTo }); // ─── Filter source data ──────────────────────────────────── const inProp = (m) => propertyF === 'all' || (m.property === propertyF); const inTier = (m) => tierF === 'all' || (m.type === tierF); const inMemberSearch = (m) => { if (!memberSearch.trim()) return true; const n = memberSearch.toLowerCase(); return (m.name || '').toLowerCase().includes(n) || (m.id || '').toLowerCase().includes(n) || (m.cardNumber || '').toLowerCase().includes(n) || (m.phone || '').includes(memberSearch) || (m.email || '').toLowerCase().includes(n); }; const memFiltered = members.filter(m => inProp(m) && inTier(m) && inMemberSearch(m)); const matchedIds = new Set(memFiltered.map(m => m.id)); const enrolmentsInRange = memFiltered.filter(m => m.createdAt && inRange(m.createdAt, range)); // Aggregate redemptions across all filtered members within date range const redemptionsInRange = []; memFiltered.forEach(m => (m.redemptions || []).forEach(r => { if (inRange(r.ts, range) && (propertyF === 'all' || r.property === propertyF)) { redemptionsInRange.push({ ...r, memberId: m.id, memberName: m.name, memberType: m.type }); } })); // Bills filtered by date + property + the member-search filter (so you can // see bills for ONE specific member by typing their name/ID/card #). const billsInRange = bills.filter(b => inRange(b.ts, range) && (propertyF === 'all' || b.property === propertyF) && (!memberSearch.trim() || matchedIds.has(b.memberId)) ); // ─── Derived metrics ─────────────────────────────────────── const revenueByOutlet = {}; billsInRange.forEach(b => { const k = b.outletName || b.outletId || 'unknown'; if (!revenueByOutlet[k]) revenueByOutlet[k] = { property: b.property, gross: 0, discount: 0, vat: 0, net: 0, count: 0 }; revenueByOutlet[k].gross += b.gross || 0; revenueByOutlet[k].discount += b.discount || 0; revenueByOutlet[k].vat += b.vatAfter || b.vat || 0; revenueByOutlet[k].net += b.netAfterPoints || b.net || 0; revenueByOutlet[k].count += 1; }); const topSpenders = [...memFiltered] .map(m => ({ ...m, _ytd: sumSpend(m.spend || {}) })) .sort((a, b) => b._ytd - a._ytd) .slice(0, 20); const churnRisk = memFiltered.filter(m => { if (!m.redemptions || m.redemptions.length === 0) return false; const lastVisit = new Date(m.redemptions[0].ts).getTime(); return (Date.now() - lastVisit) > 60 * 86400000; // 60+ days no activity }); const vatTotal = billsInRange.reduce((a, b) => a + (b.vatAfter || b.vat || 0), 0); const discountTotal = billsInRange.reduce((a, b) => a + (b.discount || 0), 0); const grossTotal = billsInRange.reduce((a, b) => a + (b.gross || 0), 0); // ─── Anti-fraud detector ─────────────────────────────────── const fraudFlags = []; // Same card used at 2 properties within 30 minutes memFiltered.forEach(m => { const sorted = [...(m.redemptions || [])].sort((a, b) => new Date(a.ts) - new Date(b.ts)); for (let i = 1; i < sorted.length; i++) { const prev = sorted[i - 1], cur = sorted[i]; const dt = (new Date(cur.ts) - new Date(prev.ts)) / 60000; // minutes if (dt <= 30 && prev.property && cur.property && prev.property !== cur.property) { fraudFlags.push({ type: 'cross-property', member: m.name, memberId: m.id, detail: `${prev.property} (${new Date(prev.ts).toLocaleTimeString()}) → ${cur.property} (${new Date(cur.ts).toLocaleTimeString()}) in ${Math.round(dt)} min`, }); } } }); // Discount overrides billsInRange.forEach(b => { const expected = b.memberType === 'wellness' ? 20 : 10; if (b.discountPct && b.discountPct > expected) { fraudFlags.push({ type: 'discount-override', member: b.staff, memberId: b.memberId, detail: `Bill ${b.id} applied ${b.discountPct}% (tier max ${expected}%)`, }); } }); // ─── CSV export helpers ──────────────────────────────────── function exportCSV(kind) { const rngTag = `${range.from.toISOString().slice(0,10)}_${range.to.toISOString().slice(0,10)}`; if (kind === 'enrolments') { const csv = toCSV(enrolmentsInRange, [ { key: 'id', label: 'Member ID' }, { key: 'cardNumber', label: 'Card #' }, { key: 'name', label: 'Name' }, { key: 'type', label: 'Tier' }, { key: 'phone', label: 'Phone' }, { key: 'email', label: 'Email' }, { key: 'property', label: 'Property' }, { key: 'startDate', label: 'Joined' }, { key: 'expiryDate', label: 'Expiry' }, { key: 'paymentAmount', label: 'Paid · NPR' }, { key: 'salesRep', label: 'Sales rep' }, ]); return downloadCSV(`enrolments_${rngTag}.csv`, csv); } if (kind === 'redemptions') { const csv = toCSV(redemptionsInRange, [ { key: 'ts', label: 'When' }, { key: 'memberId', label: 'Member ID' }, { key: 'memberName', label: 'Member' }, { key: 'kind', label: 'Type' }, { key: 'label', label: 'Description' }, { key: 'amount', label: 'Saved · NPR' }, { key: 'property', label: 'Property' }, { key: 'staff', label: 'Staff' }, ]); return downloadCSV(`redemptions_${rngTag}.csv`, csv); } if (kind === 'bills') { const csv = toCSV(billsInRange, [ { key: 'id', label: 'Bill #' }, { key: 'ts', label: 'When' }, { key: 'memberId', label: 'Member' }, { key: 'outletName', label: 'Outlet' }, { key: 'property', label: 'Property' }, { key: 'gross', label: 'Gross' }, { key: 'discountPct', label: 'Disc %' }, { key: 'discount', label: 'Discount · NPR' }, { key: 'vat', label: 'VAT' }, { key: 'total', label: 'Total' }, { key: 'staff', label: 'Staff' }, ]); return downloadCSV(`bills_${rngTag}.csv`, csv); } if (kind === 'topspenders') { const csv = toCSV(topSpenders, [ { key: 'id', label: 'Member ID' }, { key: 'name', label: 'Name' }, { key: 'type', label: 'Tier' }, { key: 'rooms', label: 'Rooms', get: m => (m.spend && m.spend.rooms) || 0 }, { key: 'fnb', label: 'F&B', get: m => (m.spend && m.spend.fnb) || 0 }, { key: 'wellness', label: 'Wellness', get: m => (m.spend && m.spend.wellness) || 0 }, { key: '_ytd', label: 'Total YTD' }, { key: 'discount', label: 'Discount used', get: m => (m.spend && m.spend.discount) || 0 }, ]); return downloadCSV(`topspenders_${rngTag}.csv`, csv); } if (kind === 'churn') { const csv = toCSV(churnRisk, [ { key: 'id', label: 'Member ID' }, { key: 'name', label: 'Name' }, { key: 'phone', label: 'Phone' }, { key: 'email', label: 'Email' }, { key: 'expiryDate', label: 'Expires' }, { key: 'last', label: 'Last visit', get: m => m.redemptions && m.redemptions[0] ? m.redemptions[0].ts : '' }, ]); return downloadCSV(`churn-risk_${rngTag}.csv`, csv); } if (kind === 'vat') { const rows = Object.entries(revenueByOutlet).map(([name, v]) => ({ outlet: name, ...v })); const csv = toCSV(rows, [ { key: 'outlet', label: 'Outlet' }, { key: 'property', label: 'Property' }, { key: 'count', label: 'Bills' }, { key: 'gross', label: 'Gross · NPR' }, { key: 'discount', label: 'Member discount' }, { key: 'net', label: 'Net (ex-VAT)' }, { key: 'vat', label: 'VAT collected' }, ]); return downloadCSV(`vat-summary_${rngTag}.csv`, csv); } if (kind === 'audit') { const auditFiltered = audit.filter(a => inRange(a.ts, range)); const csv = toCSV(auditFiltered, [ { key: 'ts', label: 'When' }, { key: 'who', label: 'Who' }, { key: 'role', label: 'Role' }, { key: 'property', label: 'Property' }, { key: 'action', label: 'Action' }, { key: 'memberId', label: 'Member' }, ]); return downloadCSV(`audit_${rngTag}.csv`, csv); } toast.show('Unknown report', { bad: true }); } const presetLabel = ({ today: 'Today', yesterday: 'Yesterday', last7: 'Last 7 days', last30: 'Last 30 days', thismonth: 'This month', lastmonth: 'Last month', thisyear: 'This year', custom: 'Custom range', })[preset]; return (
{/* Date + filter bar */}
{['today', 'yesterday', 'last7', 'last30', 'thismonth', 'lastmonth', 'thisyear', 'custom'].map(k => ( ))}
{preset === 'custom' && (
)}
{memberSearch && ( )}
{/* Top-line cards */}
{/* Anti-fraud flags */} {fraudFlags.length > 0 && (

⚠ Anti-fraud flags · {fraudFlags.length}

cross-property + over-cap discount in range
{fraudFlags.slice(0, 30).map((f, i) => (
{f.type} {f.member || f.memberId} — {f.detail}
))}
)} {/* Per-outlet revenue + VAT */}

Revenue by outlet

{Object.keys(revenueByOutlet).length === 0 ? (
No bills posted in this range.
) : ( {Object.entries(revenueByOutlet).map(([name, v]) => ( ))}
OutletPropertyBillsGrossDiscountNetVAT
{name} {v.property} {v.count} {v.gross.toLocaleString()} {v.discount.toLocaleString()} {v.net.toLocaleString()} {v.vat.toLocaleString()}
)} {/* CSV export grid */}
exportCSV('enrolments')} /> exportCSV('redemptions')} /> exportCSV('bills')} /> exportCSV('topspenders')} /> exportCSV('churn')} /> inRange(a.ts, range)).length} onExport={() => exportCSV('audit')} />
); } function ReportTile({ label, value, sub, icon }) { return (
{icon}
{label}
{value}
{sub &&
{sub}
}
); } function ExportCard({ icon, label, count, onExport }) { return (
{icon}
{label}
{count} row{count === 1 ? '' : 's'}
 ); } function countBirthdays(members, days) { const today = new Date(); return members.filter(m => { if (!m.dob) return false; const [y, mo, d] = m.dob.split('-').map(Number); const next = new Date(today.getFullYear(), mo - 1, d); if (next < today) next.setFullYear(today.getFullYear() + 1); return Math.round((next - today) / 86400000) <= days; }).length; } function countAnniversaries(members, days) { const today = new Date(); return members.filter(m => { if (!m.anniversary || m.type !== 'wellness') return false; const [mo, d] = m.anniversary.split('-').map(Number); const next = new Date(today.getFullYear(), mo - 1, d); if (next < today) next.setFullYear(today.getFullYear() + 1); return Math.round((next - today) / 86400000) <= days; }).length; } // ═══════════════════════════════════════════════════════════════ // AUDIT LOG // ═══════════════════════════════════════════════════════════════ function AuditScreen() { const audit = useStore(s => s.audit); const members = useStore(s => s.members); const memberById = React.useMemo(() => Object.fromEntries(members.map(m => [m.id, m])), [members]); const toast = useToast(); const confirmDlg = useConfirm(); const [filter, setFilter] = React.useState(''); const [editing, setEditing] = React.useState(null); // entry being edited const canEdit = Store.can('audit-edit'); const filtered = audit.filter(a => { if (!filter) return true; const m = memberById[a.memberId]; return [a.who, a.role, a.property, a.action, a.memberId, m && m.name].filter(Boolean).join(' ').toLowerCase().includes(filter.toLowerCase()); }); async function doDelete(a) { const ok = await confirmDlg(`"${a.action}"`, { title: 'Delete audit entry?', danger: true, confirmLabel: 'Delete' }); if (!ok) return; const res = Store.deleteAudit(a.id); if (res.ok) toast.show('Audit entry deleted'); else toast.show(res.error, { bad: true }); } return (
setFilter(e.target.value)} />
{canEdit && } {filtered.map(a => { const m = memberById[a.memberId]; const isMeta = /^AUDIT (EDIT|DELETE)/i.test(a.action || ''); return ( {canEdit && ( )} ); })} {filtered.length === 0 && }
WhenStaffRolePropertyActionMemberActions
{fmtDateTime(a.ts)} {a.who} {a.role} {a.property} {isMeta && meta} {a.action} {m ? ( navigate('members/' + a.memberId)}> {m.id} · {m.name} ) : —}
Nothing matches.
setEditing(null)} onSaved={() => toast.show('Audit entry updated · change recorded as a meta-entry')} />
); } function AuditEditModal({ entry, onClose, onSaved }) { const [text, setText] = React.useState(''); React.useEffect(() => { setText(entry ? entry.action : ''); }, [entry]); if (!entry) return null; return ( }>
Editing this entry records a separate AUDIT EDIT meta-entry capturing the original text + who changed it.
{fmtDateTime(entry.ts)} · {entry.who} ({entry.role}) · {entry.property}