/* ============================================================ MUIY 2.0 — app shell: store, nav, sheets, routing Loads LAST. Consumes screens from window. ============================================================ */ /* ---------- Tweaks: three expressive feel-axes ---------- Each control reshapes a whole dimension of mood, not one pixel: · Accent — retints every interactive surface (buttons, plus, chips, links) · Softness — co-moves corner radius AND shadow depth (crisp ↔ pillowy) · Scene — swaps the illustrated hero that sets the emotional backdrop */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": ["#FC6B05", "#FF8A2B", "#FFEFE2"], "softness": "Soft", "scene": "living", "monLayout": "Triage", "typeWeight": "Refined", "accentUse": "Restrained", "todayRhythm": "Tight", "sparklines": true }/*EDITMODE-END*/; const TC_ACCENTS = { citrus: { o: '#FC6B05', o2: '#FF8A2B', wash: '#FFEFE2', pop: '252,107,5' }, grove: { o: '#57A012', o2: '#74C328', wash: '#E9F5DA', pop: '87,160,18' }, lagoon: { o: '#1C96A0', o2: '#37B4BD', wash: '#DFF3F4', pop: '28,150,160' }, berry: { o: '#DE3F7C', o2: '#F0689A', wash: '#FBE4ED', pop: '222,63,124' }, crimson:{ o: '#E0322F', o2: '#F25C57', wash: '#FCE5E4', pop: '224,50,47' }, }; const TC_ACCENT_OPTS = [ ['#FC6B05', '#FF8A2B', '#FFEFE2'], ['#57A012', '#74C328', '#E9F5DA'], ['#1C96A0', '#37B4BD', '#DFF3F4'], ['#DE3F7C', '#F0689A', '#FBE4ED'], ['#E0322F', '#F25C57', '#FCE5E4'], ]; /* Status-bar clock — mirrors the real device time, ticking each minute. */ function LiveClock() { const fmt = () => { const d = (window.TC && TC.now) ? TC.now() : new Date(); let h = d.getHours(); const m = String(d.getMinutes()).padStart(2, '0'); h = h % 12; if (h === 0) h = 12; return `${h}:${m}`; }; const [t, setT] = React.useState(fmt); React.useEffect(() => { const id = setInterval(() => setT(fmt()), 15000); return () => clearInterval(id); }, []); return <>{t}; } const TC_ACCENT_KEY = { '["#FC6B05","#FF8A2B","#FFEFE2"]': 'citrus', '["#57A012","#74C328","#E9F5DA"]': 'grove', '["#1C96A0","#37B4BD","#DFF3F4"]': 'lagoon', '["#DE3F7C","#F0689A","#FBE4ED"]': 'berry', '["#E0322F","#F25C57","#FCE5E4"]': 'crimson', }; const TC_SOFT = { Crisp: { sm: '9px', r: '12px', lg: '16px', xl: '20px', shSm: '0 1px 2px rgba(120,80,20,.06), 0 4px 9px -8px rgba(120,80,20,.34)', sh: '0 1px 2px rgba(120,80,20,.06), 0 11px 20px -16px rgba(120,80,20,.45)', shSmD: '0 1px 2px rgba(0,0,0,.5), 0 4px 9px -8px rgba(0,0,0,.62)', shD: '0 1px 2px rgba(0,0,0,.5), 0 11px 20px -16px rgba(0,0,0,.72)', }, Soft: { sm: '14px', r: '18px', lg: '24px', xl: '30px', shSm: '0 1px 2px rgba(120,80,20,.05), 0 8px 18px -14px rgba(120,80,20,.4)', sh: '0 2px 4px rgba(120,80,20,.05), 0 20px 38px -26px rgba(120,80,20,.5)', shSmD: '0 1px 2px rgba(0,0,0,.45), 0 8px 18px -14px rgba(0,0,0,.7)', shD: '0 2px 4px rgba(0,0,0,.45), 0 20px 38px -26px rgba(0,0,0,.8)', }, Pillowy: { sm: '18px', r: '26px', lg: '34px', xl: '44px', shSm: '0 2px 6px rgba(120,80,20,.08), 0 16px 30px -16px rgba(120,80,20,.5)', sh: '0 5px 12px rgba(120,80,20,.08), 0 36px 64px -28px rgba(120,80,20,.62)', shSmD: '0 2px 6px rgba(0,0,0,.5), 0 16px 30px -16px rgba(0,0,0,.8)', shD: '0 5px 12px rgba(0,0,0,.55), 0 36px 64px -28px rgba(0,0,0,.88)', }, }; const TC_SCENE_OPTS = [ { value: 'living', label: 'Living sky' }, { value: 'sprout', label: 'Sprout' }, { value: 'sunrise', label: 'Sunrise' }, { value: 'lagoon', label: 'Lagoon' }, { value: 'bloom', label: 'Bloom' }, { value: 'midnight', label: 'Starry night' }, ]; function App() { const [scale, setScale] = React.useState(1); React.useEffect(() => { const fit = () => setScale(Math.min((window.innerWidth - 24) / 390, (window.innerHeight - 24) / 844, 1.2)); window.addEventListener('resize', fit); fit(); return () => window.removeEventListener('resize', fit); }, []); // first-run / signed-out gate: a brand-new visitor (no saved store) lands on // the welcome flow; returning visitors go straight to the app. Initialised // BEFORE the data store below, so it reads localStorage before we seed it. const [appPhase, setAppPhase] = React.useState(() => { const s = TC.loadStore(); return s && s.settings && s.settings.setupComplete ? 'app' : 'welcome'; }); const [data, setData] = React.useState(() => { let s = TC.loadStore(); // Brand-new install (no saved store): boot a genuinely EMPTY profile and let // the first-run onboarding flow fill it. Never seed sample data on first run. if (!s) return TC.emptyData(); // ---- returning visitor: migrate / back-fill the existing store ---- if (!s.settings) s.settings = {}; if (s.settings.setupComplete == null) s.settings.setupComplete = true; if (!s.settings.sceneVariant) s.settings.sceneVariant = 'sprout'; // Sync/export state back-fill for stores seeded before honest-sync landed. // Retire the dead trust-theatre fields outright — no migration of fakes. if (s.settings.pendingChanges == null) s.settings.pendingChanges = 0; if (s.settings.lastSyncedAt === undefined) s.settings.lastSyncedAt = null; if (s.settings.lastExportedAt === undefined) s.settings.lastExportedAt = null; delete s.settings.autoBackup; delete s.settings.lastBackedUp; delete s.settings.isSampleData; // monitoring engine migration: ensure profile attrs + richer test logs exist if (s.patient && !s.patient.monitoring) s.patient.monitoring = { sex: 'male', thalType: 'TDT', puberty: true, splenectomy: false, age: null }; if (!Array.isArray(s.testLogs)) s.testLogs = []; // One-time ID migration: rewrite any stored testLogs onto canonical // registry ids + canonical units (Hb g/L → g/dL), collapsing duplicates. // Idempotent — canonical logs pass straight through. if (window.MON && Array.isArray(s.testLogs)) s.testLogs = MON.migrateTestLogs(s.testLogs); if (s.tests) delete s.tests; // drop the obsolete legacy test-registry copy if (!s.visits) s.visits = []; // appointments: future-facing twin of visits (set date + reminder). Back-fill // for older stores, then roll any recurring appt past its date forward to the // next occurrence so a standing review always shows its NEXT date. if (!Array.isArray(s.appointments)) s.appointments = []; if (window.TC && TC.appts) TC.appts.rollForward(s); TC.syncClock(s); return s; }); const [tab, setTab] = React.useState('today'); const [healthTab, setHealthTab] = React.useState('records'); // a transient focus request handed to a Health sub-screen (e.g. scroll to the // transfusion forecast, or auto-expand the ferritin test in Monitoring) const [healthFocus, setHealthFocus] = React.useState(null); const [modal, setModal] = React.useState(null); const [toast, setToast] = React.useState(null); const [poolFilter, setPoolFilter] = React.useState(null); // live network state — drives the offline queue + sync status (REAL signal) const [online, setOnline] = React.useState(typeof navigator !== 'undefined' ? navigator.onLine !== false : true); // resolved colour theme (light / dark / system) const [sysDark, setSysDark] = React.useState(false); React.useEffect(() => { try { const mq = window.matchMedia('(prefers-color-scheme: dark)'); const on = () => setSysDark(mq.matches); on(); mq.addEventListener ? mq.addEventListener('change', on) : mq.addListener(on); return () => { mq.removeEventListener ? mq.removeEventListener('change', on) : mq.removeListener(on); }; } catch (e) {} }, []); const darkMode = (data.settings && data.settings.darkMode) || 'light'; // ---- named theme (Citrus / Lagoon / Midnight) ---- // The theme bundles a light/dark base (data-theme, drives existing CSS) with // an accent + an optional cool palette (data-palette, drives app.css block). const themeId = TC.resolveThemeId(data.settings, sysDark); const themeDef = TC.themeById(themeId); const theme = themeDef.base; // 'light' | 'dark' — what existing CSS keys off // ---- Tweaks: accent / softness / scene ---- const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); // Accent priority: an explicit tweak-panel accent override wins; otherwise // the active theme supplies its accent (Citrus→orange, Lagoon→teal, …). const tweakAccentJSON = JSON.stringify(tw.accent); const accentKey = (tweakAccentJSON !== JSON.stringify(TWEAK_DEFAULTS.accent)) ? (TC_ACCENT_KEY[tweakAccentJSON] || 'citrus') : themeDef.accent; const ac = TC_ACCENTS[accentKey] || TC_ACCENTS.citrus; // Stamp the active accent so theme-derived art (donor avatars, etc.) can tint // itself to the chosen identity. Set during render so children paint in sync. if (window.TC) TC.__activeAccent = accentKey; const sf = TC_SOFT[tw.softness] || TC_SOFT.Soft; const isDark = theme === 'dark'; // The accent + softness tweaks inject custom properties onto .tc-app, which // sits INSIDE .screen[data-theme]. Inline custom props beat the dark theme's // variable block for the whole subtree, so in dark mode we must hand these // the DARK-correct values ourselves: lift the accent off charcoal, derive a // deep tinted wash from the accent hue (never a pale light wash), and use // black-based shadows instead of the warm-brown light ones. Derivations use // the accent's own hue so any accent — including custom — stays in sync. const tweakVars = isDark ? { '--orange': `color-mix(in oklab, ${ac.o} 80%, #ffffff)`, '--orange-2': `color-mix(in oklab, ${ac.o2} 82%, #ffffff)`, '--orange-wash': `color-mix(in oklab, ${ac.o} 22%, #211e17)`, '--soon': `color-mix(in oklab, ${ac.o} 80%, #ffffff)`, '--soon-wash': `color-mix(in oklab, ${ac.o} 22%, #211e17)`, '--sh-pop': `0 14px 30px -10px rgba(${ac.pop},.5)`, '--r-sm': sf.sm, '--r': sf.r, '--r-lg': sf.lg, '--r-xl': sf.xl, '--sh-sm': sf.shSmD, '--sh': sf.shD, } : { '--orange': ac.o, '--orange-2': ac.o2, '--orange-wash': ac.wash, '--soon': ac.o, '--sh-pop': `0 14px 30px -10px rgba(${ac.pop},.45)`, '--r-sm': sf.sm, '--r': sf.r, '--r-lg': sf.lg, '--r-xl': sf.xl, '--sh-sm': sf.shSm, '--sh': sf.sh, }; // refinement passes — each appends a class the override sheet (refine.css) targets const refineCls = (tw.typeWeight === 'Refined' ? ' type-refined' : '') + (tw.accentUse === 'Restrained' ? ' accent-calm' : '') + (tw.todayRhythm === 'Tight' ? ' today-tight' : ''); React.useEffect(() => { TC.saveStore(data); }, [data]); // ---- Honest sync engine ---------------------------------------------- // The durable store is localStorage on THIS device; every mutation is // committed there immediately. "Sync" reflects whether that commit has // happened and whether the device is online to reconcile the queue. // Nothing here is timer-driven: lastSyncedAt is only ever stamped at the // real moment a commit/flush completes. const mutate = React.useCallback((fn) => setData((d) => { const n = JSON.parse(JSON.stringify(d)); fn(n); if (!n.settings) n.settings = {}; if (typeof navigator !== 'undefined' && navigator.onLine === false) { // queued locally; reconciliation deferred until the device reconnects n.settings.pendingChanges = (n.settings.pendingChanges || 0) + 1; } else { n.settings.pendingChanges = 0; n.settings.lastSyncedAt = new Date().toISOString(); } return n; }), []); // Drain the offline queue on reconnect (and stamp the first real sync on a // fresh store). Only writes a timestamp when there is genuinely something to // flush, so an untouched session keeps its true last-sync time. React.useEffect(() => { const flush = () => setData((d) => { if (typeof navigator !== 'undefined' && navigator.onLine === false) return d; if (!d.settings) return d; const needs = (d.settings.pendingChanges || 0) > 0 || !d.settings.lastSyncedAt; if (!needs) return d; const n = JSON.parse(JSON.stringify(d)); n.settings.pendingChanges = 0; n.settings.lastSyncedAt = new Date().toISOString(); return n; }); const goOnline = () => { setOnline(true); flush(); }; const goOffline = () => setOnline(false); window.addEventListener('online', goOnline); window.addEventListener('offline', goOffline); if (typeof navigator === 'undefined' || navigator.onLine !== false) flush(); return () => { window.removeEventListener('online', goOnline); window.removeEventListener('offline', goOffline); }; }, []); const showToast = React.useCallback((msg, icon) => { setToast({ msg, icon }); setTimeout(() => setToast(null), 2400); }, []); // ---- appointment reminders: (re)arm the next 24h whenever appointments or the // appointment-reminder preference change. Honest, near-term only (mirrors the // chelation reminder layer); gated by the global appointment toggle. ---- const apptRemPref = data.settings && data.settings.reminders ? data.settings.reminders.appointment : true; React.useEffect(() => { try { if (window.TC && TC.appts) TC.appts.scheduleReminders(data, apptRemPref !== false); } catch (e) {} }, [data.appointments, apptRemPref]); // ---- Donor sync pulse ------------------------------------------------ // A header indicator that animates whenever the donor list materially // changes (add / edit / delete / import / defer / log donation / log // contact). We watch a signature of the donor data so EVERY code path // that mutates a donor triggers it, with no per-call instrumentation. const [donorSync, setDonorSync] = React.useState('idle'); // idle|syncing|synced|error const _donorSigRef = React.useRef(null); const _syncTimers = React.useRef([]); React.useEffect(() => { const sig = (data.donors || []).map((d) => d.id + '|' + d.name + '|' + d.mobile + '|' + d.bloodGroup + '|' + (d.notes || '') + '|' + (d.archived ? 1 : 0) + (d.deferred ? 1 : 0) + (d.deferReturn || '') + '|' + (d.donations || []).map((z) => z.id + z.date + z.method + (z.hbValue || '')).join(',') + '|' + (d.contactLog || []).length ).join('~'); if (_donorSigRef.current === null) { _donorSigRef.current = sig; return; } // skip first mount if (sig === _donorSigRef.current) return; _donorSigRef.current = sig; _syncTimers.current.forEach(clearTimeout); _syncTimers.current = []; const offline = typeof navigator !== 'undefined' && navigator.onLine === false; setDonorSync('syncing'); _syncTimers.current.push(setTimeout(() => { if (offline) { setDonorSync('error'); _syncTimers.current.push(setTimeout(() => setDonorSync('idle'), 5200)); } else { setDonorSync('synced'); _syncTimers.current.push(setTimeout(() => setDonorSync('idle'), 1700)); } }, 820)); }, [data.donors]); React.useEffect(() => () => { _syncTimers.current.forEach(clearTimeout); }, []); const openModal = React.useCallback((type, props = {}) => setModal({ type, props }), []); const closeModal = React.useCallback(() => setModal(null), []); const goPool = React.useCallback((f) => { setPoolFilter(f || null); setTab('pool'); }, []); const goHealth = React.useCallback((sub, focus) => { if (sub === 'trends') sub = 'records'; if (sub) setHealthTab(sub); setHealthFocus(focus || null); setTab('health'); }, []); // ---- chelation adherence: log / undo a scheduled dose (one writer; offline-queued via mutate) ---- const logDose = React.useCallback(({ medId, slot, dateStr, status, skipReason, note }) => { const key = `${dateStr}|${medId}|${slot}`; const iso = new Date().toISOString(); mutate((d) => { if (!d.chelationLog) d.chelationLog = {}; d.chelationLog[key] = { status, skipReason: skipReason || null, note: note || '', scheduledDatetime: dateStr + 'T' + slot, loggedDatetime: iso, _fresh: true }; }); if (status === 'taken') { showToast('Dose logged — gently done', '🌱'); if (window.tcCelebrate) window.tcCelebrate(); } else { showToast('Noted as skipped', '🤍'); } }, [mutate, showToast]); const clearDose = React.useCallback((key) => { mutate((d) => { if (d.chelationLog) delete d.chelationLog[key]; }); }, [mutate]); const setReminders = React.useCallback((next) => { mutate((d) => { if (!d.settings) d.settings = {}; d.settings.reminders = next; }); try { if (window.TC.reminders) window.TC.reminders.scheduleReminders(next, data.patient.medications); } catch (e) {} }, [mutate, data.patient.medications]); // Scene: the Tweaks-panel "Scene" override wins only when it's been changed // from its default; otherwise the saved Home-illustration setting (Scene // picker) drives the Today backdrop. const effScene = (JSON.stringify(tw.scene) !== JSON.stringify(TWEAK_DEFAULTS.scene)) ? tw.scene : ((data.settings && data.settings.sceneVariant) || tw.scene); const effSettings = Object.assign({}, data.settings, { sceneVariant: effScene }); // Build the portable backup payload — the SAME complete object that powers a // restore and feeds the clinic PDF. Versioned + wrapped so imports can be // validated and round-tripped. const buildExport = React.useCallback(() => { const snapshot = JSON.parse(JSON.stringify(data)); if (snapshot.settings) { delete snapshot.settings.pendingChanges; } return { _format: 'mui.backup', _schema: 1, _appVersion: TC.APP_VERSION, _exportedAt: new Date().toISOString(), data: snapshot, }; }, [data]); const exportData = React.useCallback(() => { const payload = buildExport(); const iso = payload._exportedAt; const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `mui-backup-${iso.slice(0, 10)}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // record the REAL export time mutate((d) => { d.settings.lastExportedAt = iso; }); showToast('Backup exported', '📁'); }, [buildExport, mutate, showToast]); // Parse + validate a backup file. Accepts the wrapped format and a bare data // object (older exports). Returns { ok, data, error, meta }. const parseBackup = React.useCallback((text) => { let parsed; try { parsed = JSON.parse(text); } catch (e) { return { ok: false, error: 'That file isn’t valid JSON.' }; } const payload = parsed && parsed._format === 'mui.backup' && parsed.data ? parsed.data : parsed; if (!payload || typeof payload !== 'object' || !payload.patient || !payload.settings || !Array.isArray(payload.donors)) { return { ok: false, error: 'This doesn’t look like a MUIY backup.' }; } return { ok: true, data: payload, meta: { exportedAt: parsed && parsed._exportedAt, appVersion: parsed && parsed._appVersion, donors: (payload.donors || []).length, transfusions: (payload.transfusions || []).length }, }; }, []); const restoreData = React.useCallback((payload) => { setData(() => { const n = JSON.parse(JSON.stringify(payload)); if (!n.settings) n.settings = {}; n.settings.pendingChanges = 0; n.settings.lastSyncedAt = new Date().toISOString(); // restore just committed TC.syncClock(n); return n; }); setModal(null); setPoolFilter(null); setTab('today'); showToast('Backup restored', '🌱'); }, [showToast]); const store = { data, mutate, showToast, openModal, closeModal, patient: data.patient, settings: effSettings, donors: data.donors, sync: { online, pending: (data.settings && data.settings.pendingChanges) || 0, lastSyncedAt: (data.settings && data.settings.lastSyncedAt) || null }, donorSync, exportData, parseBackup, restoreData, tab, setTab, goPool, poolFilter, setPoolFilter, healthTab, setHealthTab, goHealth, healthFocus, setHealthFocus, logDose, clearDose, setReminders, reminders: (data.settings && data.settings.reminders) || null, monLayout: tw.monLayout, sparklines: tw.sparklines !== false, signOut: () => { // Cloud mode: end the Supabase session + wipe the local cache (then reload). if (window.TCCloud && window.TCsb && window.TCsb.isConfigured()) { window.TCCloud.signOutAndClear(); return; } setModal(null); setTab('today'); setAppPhase('welcome'); }, }; const screens = { today: TodayScreen, pool: PoolScreen, health: HealthScreen, me: MeScreen }; const Screen = screens[tab] || TodayScreen; // ---- welcome / onboarding handlers ---- const handleSignIn = React.useCallback(() => { setAppPhase('app'); setTab('today'); }, []); const handleComplete = React.useCallback((form) => { setData((d) => { const n = JSON.parse(JSON.stringify(d)); const p = n.patient; p.name = (form.name || '').trim(); p.preferredName = (form.preferredName || '').trim() || p.name.split(/\s+/)[0]; p.dob = form.dob; p.sex = form.sex; p.bloodGroup = form.bloodGroup; p.thalType = form.thalType; const w = parseFloat(form.weight); if (w > 0) p.weightKg = Math.round(w * 10) / 10; p.treatmentCenter = (form.treatmentCenter || '').trim() || null; // usual transfusion interval → label + weeks (seeds the forecast on day one) const intMeta = (typeof WF_INTERVALS !== 'undefined' ? WF_INTERVALS : []).find((it) => it.v === form.interval); p.usualTransfusionInterval = form.interval || null; if (intMeta && intMeta.w) p.transfusionFrequencyWeeks = intMeta.w; p.monitoring = Object.assign({}, p.monitoring, { sex: form.sex, thalType: form.transfusionStatus, splenectomy: !!form.splenectomy, }); // record explicit medical-data consent p.medicalConsent = { agreed: true, at: new Date().toISOString() }; // reminders & notification preferences const rem = form.reminders || {}; n.settings.reminders = { transfusion: rem.transfusion !== false, medication: rem.medication !== false, appointment: rem.appointment !== false, }; n.settings.notificationsEnabled = rem.push !== false; n.settings.setupComplete = true; return n; }); setAppPhase('app'); setTab('today'); }, []); return (
{appPhase === 'welcome' ? ( ) : (
{toast &&
{toast.icon && {toast.icon}}{toast.msg}
}
)}
setTweak('accent', v)} /> setTweak('softness', v)} /> setTweak('scene', v)} /> setTweak('monLayout', v)} /> setTweak('typeWeight', v)} /> setTweak('accentUse', v)} /> setTweak('todayRhythm', v)} /> setTweak('sparklines', v)} /> ); } /* ---------- bottom nav ---------- */ function NavBar({ store }) { const { tab, setTab, openModal } = store; const items = [ { id: 'today', icon: 'home', label: 'Today' }, { id: 'pool', icon: 'users', label: 'Pool' }, { id: '__plus' }, { id: 'health', icon: 'chart', label: 'Health' }, { id: 'me', icon: 'user', label: 'Me' }, ]; return (
{items.map((it) => it.id === '__plus' ? ( ) : ( ))}
); } /* ---------- sheet primitives ---------- */ function Sheet({ title, sub, children, onClose }) { return (
e.stopPropagation()}>
{title &&
{title}
} {sub &&
{sub}
}
{children}
); } function fillTpl(tpl, donor, patient) { return (tpl || '').replace(/\[Donor Name\]/g, (donor || '').split(' ')[0] || 'friend').replace(/\[Patient Name\]/g, patient || ''); } function ContactSheet({ store, close, donor }) { const tpl = (store.patient.messageTemplates || {}).donationRequest || 'Hi [Donor Name], would you be able to donate blood for me soon? 🙏❤️\n— [Patient Name]'; const [msg, setMsg] = React.useState(fillTpl(tpl, donor.name, store.patient.name)); const wa = () => { window.open(`https://wa.me/${donor.mobile.replace(/\D/g, '')}?text=${encodeURIComponent(msg)}`, '_blank'); close(); store.showToast('Opening WhatsApp', '🟢'); }; const sms = () => { window.location.href = `sms:${donor.mobile}?&body=${encodeURIComponent(msg)}`; close(); }; return (