import React, { useState, useEffect, useRef } from "react"; import { Plus, Trash2, X, Smile, Meh, Frown, BarChart2, Calendar } from "lucide-react"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts"; import dayjs from "dayjs"; function getDefaultToday() { return dayjs().format("YYYY-MM-DD"); } const MOOD_OPTIONS = [ { label: "Good", icon: , value: "good" }, { label: "Okay", icon: , value: "okay" }, { label: "Bad", icon: , value: "bad" } ]; const PAIN_LABELS = ["None", "Mild", "Moderate", "Severe", "Worst"]; export default function App() { // Persisted symptoms data const [entries, setEntries] = useSharedStorage("symptom_entries", []); // Quick add states const [date, setDate] = useState(getDefaultToday()); const [symptoms, setSymptoms] = useState(""); const [pain, setPain] = useState(0); const [mood, setMood] = useState(null); const [note, setNote] = useState(""); const [error, setError] = useState(""); const [showChart, setShowChart] = useState(false); const [flash, setFlash] = useState(false); const inputRef = useRef(); // Add new entry const handleAdd = () => { setError(""); if (!symptoms.trim() && !note.trim()) { setError("Add symptoms or a note"); inputRef.current?.focus(); return; } if (!date) { setError("Pick a date"); return; } // No duplicate for same date (replace) const updated = entries.filter(e => e.date !== date); updated.push({ id: Date.now(), date, symptoms: symptoms.trim(), pain, mood, note: note.trim(), }); setEntries(updated); setSymptoms(""); setPain(0); setMood(null); setNote(""); setDate(getDefaultToday()); setFlash(true); setTimeout(() => setFlash(false), 1200); }; // Delete entry const handleDelete = id => { setEntries(entries.filter(e => e.id !== id)); }; // Group by date desc const sorted = [...entries].sort((a,b)=>b.date.localeCompare(a.date)); const recent = sorted.slice(0, 10); // Visualization data (last 30 days) const chartData = useMemo(() => { // Build up to 30 days list w nulls if no entries const days = []; for (let i = 29; i >= 0; i--) { const d = dayjs().subtract(i, 'day').format('YYYY-MM-DD'); const e = entries.find(e => e.date === d); days.push({ date: d, pain: e?.pain ?? null, mood: MOOD_OPTIONS.find(m=>m.value === e?.mood)?.label ?? null }); } return days; }, [entries]); // Summary stats const avgPain = useMemo(() => { const vals = chartData.filter(d => d.pain!==null).map(d=>d.pain); return vals.length ? (vals.reduce((a,b)=>a+b,0)/vals.length).toFixed(1) : "-"; }, [chartData]); const lastMood = sorted[0]?.mood; // Input auto-focus useEffect(()=>{inputRef.current?.focus();},[]); return (

{/* Progress cards */}

{avgPain} Avg. Pain (30d)

{(lastMood && MOOD_OPTIONS.find(m=>m.value===lastMood)?.icon) || } {(lastMood && MOOD_OPTIONS.find(m=>m.value===lastMood)?.label) || "-"} Last Mood

{/* Toggle chart */} {/* Chart view */} {showChart && (

30 Days Trend

{dayjs(payload.value).format('MM/DD')} } interval={6} /> PAIN_LABELS[v]} fontSize={10} stroke="#888"/> { if (active && payload && payload.length) { const d=payload[0].payload; return

{dayjs(label).format('MMM D')}

Pain: {PAIN_LABELS[d.pain]||'-'}

Mood: {d.mood||'-'}

; } return null; }} />

Higher value = more pain

)} {/* Entry form */}

setDate(e.target.value)} className="bg-transparent outline-none text-gray-700 text-sm font-medium rounded border px-2 py-1" />

Symptoms setSymptoms(e.target.value)} placeholder="e.g. headache, nausea" autoComplete="off" />

Pain setPain(Number(e.target.value))} className="flex-1 accent-emerald-400" /> {PAIN_LABELS[pain]}

Mood

{MOOD_OPTIONS.map(opt => ( ))}

Notes setNote(e.target.value)} placeholder="Optional..." />

{error &&

{error}

}

{/* Entries history */}