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>

src/app/medical/page.tsx

@@ -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 key={supp.name} className="p-4 bg-white rounded-xl">
-                <div>
+                <div className="flex items-center justify-between">
-                  <div className="font-medium">{supp.name}</div>
+                  <div className="flex-1">
-                  <div className="text-sm text-gray-500">
+                    <div className="font-medium">{supp.name}</div>
-                    {supp.dose} · {supp.notes}
+                    <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>