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:
parent
f370da692f
commit
e1bd89e664
1 changed files with 47 additions and 8 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue