Add medication reminders to Medicine section

- Each medicine/supplement now has reminder clock button
- Click to set daily reminder time
- Visual feedback when reminder is set

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-10 17:56:15 +05:30
parent f370da692f
commit e1bd89e664

View file

@ -45,6 +45,15 @@ export default function MedicalPage() {
const [tab, setTab] = useState<"vaccinations" | "medicine" | "allergies" | "visits" | "illness">("vaccinations");
const [showAddDate, setShowAddDate] = useState<string | null>(null);
const [givenDate, setGivenDate] = useState("");
const [showReminder, setShowReminder] = useState<string | null>(null);
const [reminderTime, setReminderTime] = useState("08:00");
// Reminder save handler
const handleSetReminder = (medName: string) => {
// In production, save to database with reminder time
alert(`Reminder set for ${medName} at ${reminderTime}`);
setShowReminder(null);
};
const birthDate = "2024-01-15";
@ -205,16 +214,46 @@ const SUPPLEMENTS = [
<div className="space-y-2">
<h2 className="font-semibold mb-3">Supplements & Medicine</h2>
{SUPPLEMENTS.map((supp) => (
<div key={supp.name} className="flex items-center justify-between p-4 bg-white rounded-xl">
<div>
<div className="font-medium">{supp.name}</div>
<div className="text-sm text-gray-500">
{supp.dose} · {supp.notes}
<div key={supp.name} className="p-4 bg-white rounded-xl">
<div className="flex items-center justify-between">
<div className="flex-1">
<div className="font-medium">{supp.name}</div>
<div className="text-sm text-gray-500">
{supp.dose} · {supp.notes}
</div>
</div>
<div className="flex gap-2">
{showReminder === supp.name ? (
<div className="flex items-center gap-2">
<input
type="time"
value={reminderTime}
onChange={(e) => setReminderTime(e.target.value)}
className="p-1 text-sm border rounded"
/>
<button
onClick={() => handleSetReminder(supp.name)}
className="px-2 py-1 bg-rose-400 text-white rounded text-sm"
>
</button>
<button
onClick={() => setShowReminder(null)}
className="text-gray-400"
>
</button>
</div>
) : (
<button
onClick={() => setShowReminder(supp.name)}
className="px-3 py-1 bg-gray-100 rounded-lg text-sm"
>
</button>
)}
</div>
</div>
<button className="px-4 py-2 bg-rose-400 text-white rounded-lg text-sm">
Add
</button>
</div>
))}
</div>