import React, { useState, useEffect, useRef, useMemo } from "react"; import { Check, Plus, Trash2, Edit, Calendar, Pill, BarChart2, ChevronLeft, ChevronRight } from 'lucide-react'; import dayjs from "dayjs"; const WEEK_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; function getToday() { // Always in user's local timezone return dayjs().format('YYYY-MM-DD'); } // Key: {date} for per-day checkins const [meds, setMeds] = useStorage("med_tracker_items", []); // [{id, name, dosage, schedule:'daily'|'custom', days:[0,1,2], color}] const [taken, setTaken] = useStorage("med_tracker_taken", {}); // { [date]: [ {id, takenAt} ] } export default function App() { // UI state const [adding, setAdding] = useState(false); const [editing, setEditing] = useState(null); // med id const [form, setForm] = useState({ name: '', dosage: '', schedule: 'daily', days: [] }); const [error, setError] = useState(''); // Calendar navigation (7day) const [calBase, setCalBase] = useState(() => dayjs(getToday()).startOf('week')); const calDays = useMemo(() => Array.from({length: 7}, (_,i)=>calBase.add(i,'day')), [calBase]); const today = getToday(); // Build today's checklist (filter by schedule & day) const todayDOW = dayjs(today).day(); const todayMeds = meds.filter(med => med.schedule === 'daily' || (med.schedule==='custom' && med.days.includes(todayDOW))); // Helper: mark med as taken today const handleCheck = (medId, date) => { const d = date||today; setTaken(prev => { const arr = Array.isArray(prev[d]) ? prev[d] : []; if(arr.some(e=>e.id===medId)) return prev; // already taken return { ...prev, [d]: [...arr, {id:medId, takenAt:Date.now()}] }; }); }; // Helper: unmark taken const handleUncheck = (medId, date) => { setTaken(prev => { const arr = prev[date]||[]; return { ...prev, [date]: arr.filter(e=>e.id !== medId) }; }); }; // Helper: add medication function openAddForm() { setForm({name:'', dosage:'', schedule:'daily', days:[]}); setAdding(true); setEditing(null); setError(''); } function openEditForm(med) { setForm(med); setEditing(med.id); setAdding(true); setError(''); } function closeForm() { setAdding(false); setEditing(null); setForm({name:'', dosage:'', schedule:'daily', days:[]}); setError(''); } function handleSaveForm() { if (!form.name.trim()) { setError('Name required'); return; } if (form.schedule==='custom' && (!form.days.length)) { setError('Select at least one day'); return; } if (editing) { // update existing setMeds(meds.map(m=>m.id===editing?{...form}:m)); } else { setMeds([...meds, {...form, id: Math.random().toString(36).slice(2), color:pickColor()}]); } closeForm(); } function handleDelete(id) { setMeds(meds.filter(m=>m.id !== id)); // clean taken entries setTaken(prev => { const all = {...prev}; Object.keys(all).forEach(date=>{all[date]=all[date].filter(t=>t.id!==id)}); return all; }); } // Calendar helpers function prevWeek() { setCalBase(x => dayjs(x).subtract(7,'day')) } function nextWeek() { setCalBase(x => dayjs(x).add(7,'day')) } function field(name, rest={}) { const common = `bg-white/10 rounded-xl px-4 py-3 text-base w-full mb-3 text-white placeholder-white/60 outline-none`; return setForm(f=>({...f,[name]:e.target.value}))} {...rest} /> } function pickColor() { // random pastel const colors = ['bg-indigo-400','bg-violet-500','bg-rose-400','bg-emerald-400','bg-blue-500','bg-orange-400','bg-teal-400']; return colors[Math.floor(Math.random()*colors.length)]; } // Streak Calculation function computeStreak(med) { let count = 0, day = dayjs(today); while (true) { // Check if med required today const dow = day.day(); const req = med.schedule==='daily' || (med.schedule==='custom' && med.days.includes(dow)); if (!req) { day = day.subtract(1,'day'); continue; } // Check if taken on that day const dstr = day.format('YYYY-MM-DD'); const arr = taken[dstr]||[]; const found = arr.some(e=>e.id===med.id); if (!found) break; count++; day = day.subtract(1,'day'); } // Missed calculation (prev 7 checks) let missed = 0; let d = dayjs(today); for (let j=0;j<7;j++) { const dow = d.day(); const req2 = med.schedule==='daily' || (med.schedule==='custom' && med.days.includes(dow)); if (req2) { const arr = taken[d.format('YYYY-MM-DD')]||[]; const f = arr.some(e=>e.id===med.id); if (!f) missed++; } d = d.subtract(1,'day'); } return { count, missed }; } // Visual calendar: days of week, for all meds function medDayTaken(med, date) { const arr = taken[date]||[]; return arr.some(e=>e.id===med.id); } // ========== RENDER =========== return (

{/* Calendar view: week */}

{calDays[0].format('MMM D')}- {calDays[6].format('D')} Weekly tracking

{calDays.map((d,i)=>( ))} {meds.length ===0 && ( )} {meds.map((med, idx) => ( {calDays.map((d, dIdx) => { const dow = d.day(); const reqToday = med.schedule==='daily' || (med.schedule==='custom' && med.days.includes(dow)); const takened = medDayTaken(med, d.format('YYYY-MM-DD')); return ; })} ))}

	{WEEK_DAYS[d.day()]} {d.format('MM/DD')}
No meds added yet
{med.name}	{reqToday? ( takened ? : ) : —}

{/* Today's checklist */}

Today's Meds ({dayjs(today).format('MMM D')})

{todayMeds.length===0 && (

No medications or supplements for today!

)} {todayMeds.length > 0 && todayMeds.map((med,idx)=>{ const isTaken = medDayTaken(med, today); const { count, missed } = computeStreak(med); return (

{med.name} {med.dosage && ({med.dosage})}

{isTaken ? ( ) : ( )}

); })}

{/* Streaks summary */}

Streaks & Missed Doses

{meds.length === 0 &&

Nothing to show

} {meds.map((med, idx) => { const { count, missed } = computeStreak(med); return (

{med.name} {med.dosage && ({med.dosage})}

Streak: {count} Missed: {missed}

); })}

{/* Add med button */}

{/* Attribution (data source not needed since all local) */}

Streak and history are tracked on-device only. No cloud storage.

{/* Add/Edit Bottom Sheet */} {adding && (

{editing?'Edit Medication':'Add Medication/Supplement'}

{field('name')} {field('dosage')}

Schedule: {form.schedule==="custom" && (

{WEEK_DAYS.map((d,i) => ( ))}

)}

{error &&

{error}

}

)}

); }