// ── Mock Data ────────────────────────────────────────────────────────── const DURATIONS = [7.2,7.8,6.5,8.1,7.4,6.9,8.3,7.5,7.0,8.2,6.8,7.6,8.0,7.3,6.7,7.9,8.1,7.2,6.5,7.8,8.4,7.1,7.5,6.9,8.0,7.3,7.7,8.2,6.8,7.5]; const QUALITIES = [3,4,3,5,4,3,5,4,3,5,3,4,4,4,3,5,4,3,3,4,5,3,4,3,5,4,4,5,3,4]; const BEDTIMES = ['22:45','23:00','23:30','22:30','22:45','23:15','22:15','22:30','23:00','22:15','23:30','22:45','22:30','22:45','23:15','22:00','22:30','23:00','23:45','22:45','22:15','23:00','22:30','23:15','22:00','22:45','22:30','22:00','23:30','22:45']; const SESS_NOTES = { 5:'Woke up feeling great', 15:'Restless — work stress', 25:'Warm room, slow to fall asleep' }; const RAW_SESSIONS = DURATIONS.map((dur, i) => { const base = new Date('2026-04-22'); base.setDate(base.getDate() - (29 - i)); const [bh, bm] = BEDTIMES[i].split(':').map(Number); const wakeMs = base.getTime() + bh * 3600000 + bm * 60000 + dur * 3600000; const wakeD = new Date(wakeMs); const wh = wakeD.getHours().toString().padStart(2,'0'); const wm = wakeD.getMinutes().toString().padStart(2,'0'); return { id: `s${i+1}`, rawDate: new Date(base), dateLabel: base.toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric'}), shortDate: base.toLocaleDateString('en-US',{month:'short',day:'numeric'}), duration: dur, quality: QUALITIES[i], bedtime: BEDTIMES[i], wakeTime: `${wh}:${wm}`, notes: SESS_NOTES[i] || '', }; }); const GOAL = { targetHours:8, targetBedtime:'22:30', targetWakeTime:'06:30', streak:12, longestStreak:18 }; // Pre-computed star positions (deterministic, no Math.random in render) const STARS = Array.from({length:50},(_,i)=>({ left: ((i*73.137+11.5)%100).toFixed(2), top: ((i*47.293+31.7)%100).toFixed(2), size: i%6===0 ? 2.5 : i%3===0 ? 1.5 : 1, op: (0.18 + (i%7)*0.04).toFixed(2), })); // ── Shared styles ────────────────────────────────────────────────────── const inputSt = { width:'100%', padding:'11px 14px', borderRadius:10, background:'var(--surface2)', border:'1px solid var(--border)', color:'var(--text)', fontSize:14, outline:'none', fontFamily:'DM Sans,sans-serif', }; const labelSt = { display:'block', fontSize:11, fontWeight:600, color:'var(--text2)', letterSpacing:'0.07em', textTransform:'uppercase', marginBottom:7, }; // ── Sidebar ──────────────────────────────────────────────────────────── const NAV = [ {id:'dashboard', label:'Dashboard', icon:'grid'}, {id:'log', label:'Log Sleep', icon:'plus'}, {id:'goals', label:'Goals', icon:'target'}, {id:'history', label:'History', icon:'clock'}, ]; const Sidebar = ({ screen, onNav }) => (
{/* Logo */}
OptiSleep
{NAV.map(item => { const on = screen === item.id; return ( ); })}
{/* User chip */}
R
Rabin
12-day streak 🔥
); // ── Landing ──────────────────────────────────────────────────────────── const Landing = ({ onStart }) => (
{/* Stars */}
{STARS.map((s,i) => (
))}
{/* Moon */}

Sleep smarter.
Wake stronger.

Track your sleep, build streaks, and understand your rest with beautiful real-time analytics.

{/* Feature cards */}
{[ {icon:'grid', title:'Analytics', desc:'Trend charts & 30-day sleep insights'}, {icon:'target',title:'Goals & Streaks', desc:'Build lasting habits with daily targets'}, {icon:'zap', title:'Smart Insights', desc:'Personalised recommendations each night'}, ].map(f=>(
{f.title}
{f.desc}
))}
); // ── Dashboard ────────────────────────────────────────────────────────── const Dashboard = ({ sessions, goal, onNav }) => { const avg = (sessions.reduce((s,x)=>s+x.duration,0)/sessions.length).toFixed(1); const avgQ = sessions.reduce((s,x)=>s+x.quality,0)/sessions.length; const wkAvg = sessions.slice(-7).reduce((s,x)=>s+x.duration,0)/7; const pwAvg = sessions.slice(-14,-7).reduce((s,x)=>s+x.duration,0)/7; const delta = (wkAvg - pwAvg).toFixed(1); const qualDist = [0,0,0,0,0]; sessions.forEach(s=>qualDist[s.quality-1]++); const qualColors = ['#f87171','#fb923c','#fbbf24','#34d399','#a78bfa']; const qualLabels = ['Terrible','Poor','Okay','Good','Excellent']; const h = new Date().getHours(); const greeting = h<12?'Good morning':h<18?'Good afternoon':'Good evening'; return (
{/* Header */}

{greeting}, Rabin

Tuesday, April 22 · 30-day overview

{/* Insight */}

{goal.streak}-day streak! You averaged {avg}h this week — {parseFloat(delta)>=0 ? `up ${delta}h` : `${Math.abs(delta)}h below`} from last week. Keep the consistency going.

{/* Stat cards */}
=0, label:`${Math.abs(delta)}h vs last week`}}/>
{/* Charts row */}
{/* Trend */}

Sleep Trend · 30 days

{goal.targetHours}h target
{sessions[0].shortDate}{sessions[sessions.length-1].shortDate}
{/* Quality donut */}

Quality Distribution

{qualLabels.map((lbl,i)=>(
{lbl} ({qualDist[i]})
))}
{/* Quick actions */}

Quick Actions

{[ {id:'log', icon:'plus', label:'Log Sleep', sub:'Record last night'}, {id:'goals', icon:'target', label:'Goals', sub:`${goal.streak}-day streak`}, {id:'history', icon:'clock', label:'History', sub:'All sessions'}, ].map(a=>( ))}
); }; // ── Log Sleep ────────────────────────────────────────────────────────── const LogSleep = ({ onLog, onBack }) => { const [form, setForm] = React.useState({ date:'2026-04-22', bedtime:'22:30', wakeTime:'06:30', quality:4, notes:'' }); const [done, setDone] = React.useState(false); const qualColors = ['#f87171','#fb923c','#fbbf24','#34d399','#a78bfa']; const qualLabels = ['Terrible','Poor','Okay','Good','Excellent']; const duration = React.useMemo(() => { const b = new Date(`${form.date}T${form.bedtime}:00`); let w = new Date(`${form.date}T${form.wakeTime}:00`); if (w <= b) w.setDate(w.getDate()+1); return ((w-b)/3600000).toFixed(1); },[form.date,form.bedtime,form.wakeTime]); if (done) return (

Sleep logged!

Heading back to dashboard…

); return (

Log Sleep

Record how you slept last night

{/* Date */}
setForm(f=>({...f,date:e.target.value}))} style={inputSt}/>
{/* Times */}
setForm(f=>({...f,bedtime:e.target.value}))} style={inputSt}/>
setForm(f=>({...f,wakeTime:e.target.value}))} style={inputSt}/>
{/* Duration */}
Duration · {duration}h
{/* Quality */}
{[1,2,3,4,5].map(n=>{ const on = form.quality >= n; return ( ); })}
{/* Notes */}