// health/HealthStates.jsx
// Every screen needs an empty, loading, error, offline, and (global)
// session-expired variant. We bundle the Health-tab versions of each.
//
// Exports: HealthEmpty, HealthLoading, HealthError, HealthOffline,
// SessionExpired.
// ───────────────────────────────────────────────────────────
// EMPTY — first-launch / no data yet (HealthSync hasn't posted).
// ───────────────────────────────────────────────────────────
function HealthEmpty({ dark = false }) {
return (
Sunday · Mar 16
}
trailing={<>}
/>
{/* Greyed-out bedtime hero — "Smart Bedtime will appear once your first night of sleep data arrives" */}
Tonight's bedtime
—:——
Smart Bedtime needs one full night of sleep data before it can recommend a time.
{/* Hero empty state — illustration + headline + body + primary CTA */}
{/* iconographic moon-in-circle */}
No health data yet
Install the HealthSync companion on this device to bring Apple Health into Ordentus. Sleep, cognition and activity will appear once the first sync completes.
{[
{ e: '🌙', t: 'Tonight\'s bedtime', b: 'Worked back from your next morning event and an 8h sleep goal.' },
{ e: '😴', t: '14-day sleep debt', b: 'How far you are from your goal across the last two weeks.' },
{ e: '🧠', t: 'Cognitive forecast', b: 'How short sleep is likely to affect attention, memory, reaction.' },
].map(r => (
))}
);
}
window.HealthEmpty = HealthEmpty;
// ───────────────────────────────────────────────────────────
// LOADING — skeleton shimmer mirroring the overview.
// ───────────────────────────────────────────────────────────
function HealthLoading({ dark = false }) {
const Sk = ({ w = '100%', h = 12, r = 6, style }) => (
);
return (
Sunday · Mar 16
}
trailing={<>
}
/>
{/* Skeleton bedtime hero */}
{[1,2,3].map(i => (
))}
{[64, 50, 80, 76, 44, 96, 58].map((h, i) => (
))}
{[1,2].map(i => (
))}
);
}
window.HealthLoading = HealthLoading;
// ───────────────────────────────────────────────────────────
// ERROR — sync failure banner on top of the overview.
// (Same content as the populated screen, but with the error
// banner mounted under the large title — designed never to
// modal-interrupt unless destructive.)
// ───────────────────────────────────────────────────────────
function HealthError({ dark = false }) {
return (
Couldn't reach your server
Showing the last sync from 9:14 AM.
}
/>
);
}
window.HealthError = HealthError;
// ───────────────────────────────────────────────────────────
// OFFLINE — neutral grey banner, still shows cached data.
// ───────────────────────────────────────────────────────────
function HealthOffline({ dark = false }) {
return (
You're offline
Cached data from 9:14 AM · we'll resync when you're back.
}
/>
);
}
window.HealthOffline = HealthOffline;
// ───────────────────────────────────────────────────────────
// SESSION EXPIRED — modal alert over a dimmed overview.
// Per spec: errors are inline EXCEPT destructive/auth flows.
// ───────────────────────────────────────────────────────────
function SessionExpired({ dark = false }) {
return (
{/* dimmed base */}
Sunday · Mar 16
}
trailing={<>}
/>
Tonight's bedtime
10:30 PM
Session expired
Sign in again to resume syncing with your Ordentus server. Your data is cached locally.