From 70aa35384b1e482b120965f55116e4a544862653 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 17 May 2026 13:22:14 +0530
Subject: [PATCH] fix(medical): dark mode support and tab wrapping fix

Added dark: variants to all cards, inputs, selects, text, and buttons
throughout the medical page. Added whitespace-nowrap + flex-shrink-0 to
all tab buttons to prevent labels like "Doctor Visit" from wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/medical/page.tsx | 108 +++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/app/medical/page.tsx b/src/app/medical/page.tsx
index fca4728..2a50e47 100644
--- a/src/app/medical/page.tsx
+++ b/src/app/medical/page.tsx
@@ -436,7 +436,7 @@ const SUPPLEMENTS = [
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50">
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
       <div className="p-4">
         <div className="flex justify-between items-center">
           <a href="/menu" className="p-2">←</a>
@@ -446,31 +446,31 @@ const SUPPLEMENTS = [
         <div className="flex gap-2 mb-6 overflow-x-auto">
           <button
             onClick={() => setTab("vaccinations")}
-            className={`px-4 p-3 rounded-xl ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
           >
             Vaccines
           </button>
           <button
             onClick={() => setTab("medicine")}
-            className={`px-4 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
           >
             Medicine
           </button>
           <button
             onClick={() => setTab("allergies")}
-            className={`px-4 p-3 rounded-xl ${tab === "allergies" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "allergies" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
           >
             Allergies
           </button>
           <button
             onClick={() => setTab("visits")}
-            className={`px-4 p-3 rounded-xl ${tab === "visits" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "visits" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
           >
             Doctor Visit
           </button>
           <button
             onClick={() => setTab("illness")}
-            className={`px-4 p-3 rounded-xl ${tab === "illness" ? "bg-rose-400 text-white" : "bg-white"}`}
+            className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "illness" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
           >
             Illness
           </button>
@@ -481,19 +481,19 @@ const SUPPLEMENTS = [
             <div className="flex gap-2 mb-4 overflow-x-auto">
               <button
                 onClick={() => setVaccineTab("upcoming")}
-                className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "upcoming" ? "bg-rose-400 text-white" : "bg-white"}`}
+                className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "upcoming" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
               >
                 Upcoming ({getVaccinesByStatus("upcoming").length})
               </button>
               <button
                 onClick={() => setVaccineTab("completed")}
-                className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "completed" ? "bg-rose-400 text-white" : "bg-white"}`}
+                className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "completed" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
               >
                 Completed ({getVaccinesByStatus("completed").length})
               </button>
               <button
                 onClick={() => setVaccineTab("overdue")}
-                className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "overdue" ? "bg-red-500 text-white" : "bg-white"}`}
+                className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "overdue" ? "bg-red-500 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
               >
                 Overdue ({getVaccinesByStatus("overdue").length})
               </button>
@@ -513,12 +513,12 @@ const SUPPLEMENTS = [
                   return (
                     <div
                       key={vaccine.name}
-                      className={`p-4 bg-white rounded-xl ${status === "completed" ? "opacity-60" : ""} ${status === "overdue" ? "border-l-4 border-red-500" : ""}`}
+                      className={`p-4 bg-white dark:bg-gray-800 rounded-xl ${status === "completed" ? "opacity-60" : ""} ${status === "overdue" ? "border-l-4 border-red-500" : ""}`}
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex-1">
                           <div className="font-medium">{vaccine.name}</div>
-                          <div className="text-sm text-gray-500">
+                          <div className="text-sm text-gray-500 dark:text-gray-400">
                             Due: {new Date(dueDate).toLocaleDateString()}
                             {actualDate && ` · Given: ${new Date(actualDate).toLocaleDateString()}`}
                           </div>
@@ -534,7 +534,7 @@ const SUPPLEMENTS = [
                               type="date"
                               value={givenDate}
                               onChange={(e) => setGivenDate(e.target.value)}
-                              className="p-1 text-sm border rounded"
+                              className="p-1 text-sm border dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white"
                               placeholder="Date given"
                             />
                             <button
@@ -572,33 +572,33 @@ const SUPPLEMENTS = [
 
             {/* Add Form */}
             {showAddMed && (
-              <div className="p-4 bg-white rounded-xl space-y-3">
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
                 <input
                   type="text"
                   value={newMedName}
                   onChange={(e) => setNewMedName(e.target.value)}
                   placeholder="Medicine name"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <input
                   type="text"
                   value={newMedDose}
                   onChange={(e) => setNewMedDose(e.target.value)}
                   placeholder="Dose (e.g., 5ml, 1 tablet)"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <input
                   type="text"
                   value={newMedNotes}
                   onChange={(e) => setNewMedNotes(e.target.value)}
                   placeholder="Notes"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <div className="flex gap-2">
                   <button onClick={saveMedicine} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
                     {editingMed ? "Update" : "Add"}
                   </button>
-                  <button onClick={resetMedForm} className="flex-1 py-2 bg-gray-200 rounded-lg">
+                  <button onClick={resetMedForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
                     Cancel
                   </button>
                 </div>
@@ -606,16 +606,16 @@ const SUPPLEMENTS = [
             )}
 
             {medicines.length === 0 && !showAddMed ? (
-              <div className="p-4 bg-white rounded-xl">
-                <p className="text-gray-500">No medicines added</p>
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+                <p className="text-gray-500 dark:text-gray-400">No medicines added</p>
               </div>
             ) : (
               medicines.map((med) => (
-                <div key={med.id} className="p-4 bg-white rounded-xl">
+                <div key={med.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
                   <div className="flex items-center justify-between">
                     <div className="flex-1">
                       <div className="font-medium">{med.name}</div>
-                      <div className="text-sm text-gray-500">
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
                         {med.dose} {med.notes && `· ${med.notes}`}
                         {med.reminderTime && ` · ⏰ ${med.reminderTime}`}
                       </div>
@@ -630,7 +630,7 @@ const SUPPLEMENTS = [
             )}
 
             {!showAddMed && (
-              <button onClick={() => setShowAddMed(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              <button onClick={() => setShowAddMed(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
                 + Add Medicine
               </button>
             )}
@@ -642,18 +642,18 @@ const SUPPLEMENTS = [
             <h2 className="font-semibold mb-3">Known Allergies</h2>
 
             {showAddAllergy && (
-              <div className="p-4 bg-white rounded-xl space-y-3">
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
                 <input
                   type="text"
                   value={newAllergyName}
                   onChange={(e) => setNewAllergyName(e.target.value)}
                   placeholder="Allergy name (e.g., Peanut, Milk)"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <select
                   value={newAllergySeverity}
                   onChange={(e) => setNewAllergySeverity(e.target.value)}
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
                 >
                   <option value="mild">Mild</option>
                   <option value="moderate">Moderate</option>
@@ -664,13 +664,13 @@ const SUPPLEMENTS = [
                   value={newAllergyNotes}
                   onChange={(e) => setNewAllergyNotes(e.target.value)}
                   placeholder="Notes"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <div className="flex gap-2">
                   <button onClick={saveAllergy} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
                     {editingAllergy ? "Update" : "Add"}
                   </button>
-                  <button onClick={resetAllergyForm} className="flex-1 py-2 bg-gray-200 rounded-lg">
+                  <button onClick={resetAllergyForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
                     Cancel
                   </button>
                 </div>
@@ -678,16 +678,16 @@ const SUPPLEMENTS = [
             )}
 
             {allergies.length === 0 && !showAddAllergy ? (
-              <div className="p-4 bg-white rounded-xl">
-                <p className="text-gray-500">No allergies recorded</p>
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+                <p className="text-gray-500 dark:text-gray-400">No allergies recorded</p>
               </div>
             ) : (
               allergies.map((allergy) => (
-                <div key={allergy.id} className="p-4 bg-white rounded-xl">
+                <div key={allergy.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
                   <div className="flex items-center justify-between">
                     <div className="flex-1">
                       <div className="font-medium">{allergy.name}</div>
-                      <div className="text-sm text-gray-500">
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
                         <span className={allergy.severity === "severe" ? "text-red-500" : "text-orange-500"}>
                           {allergy.severity.toUpperCase()}
                         </span>
@@ -704,7 +704,7 @@ const SUPPLEMENTS = [
             )}
 
             {!showAddAllergy && (
-              <button onClick={() => setShowAddAllergy(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              <button onClick={() => setShowAddAllergy(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
                 + Add Allergy
               </button>
             )}
@@ -716,39 +716,39 @@ const SUPPLEMENTS = [
             <h2 className="font-semibold mb-3">Doctor Visits</h2>
 
             {showAddVisit && (
-              <div className="p-4 bg-white rounded-xl space-y-3">
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
                 <input
                   type="text"
                   value={newVisitDoctor}
                   onChange={(e) => setNewVisitDoctor(e.target.value)}
                   placeholder="Doctor name"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <input
                   type="text"
                   value={newVisitReason}
                   onChange={(e) => setNewVisitReason(e.target.value)}
                   placeholder="Reason (e.g., Checkup, Fever)"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <input
                   type="date"
                   value={newVisitDate}
                   onChange={(e) => setNewVisitDate(e.target.value)}
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
                 />
                 <input
                   type="text"
                   value={newVisitNotes}
                   onChange={(e) => setNewVisitNotes(e.target.value)}
                   placeholder="Notes"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <div className="flex gap-2">
                   <button onClick={saveVisit} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
                     {editingVisit ? "Update" : "Add"}
                   </button>
-                  <button onClick={resetVisitForm} className="flex-1 py-2 bg-gray-200 rounded-lg">
+                  <button onClick={resetVisitForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
                     Cancel
                   </button>
                 </div>
@@ -756,16 +756,16 @@ const SUPPLEMENTS = [
             )}
 
             {visits.length === 0 && !showAddVisit ? (
-              <div className="p-4 bg-white rounded-xl">
-                <p className="text-gray-500">No visits recorded</p>
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+                <p className="text-gray-500 dark:text-gray-400">No visits recorded</p>
               </div>
             ) : (
               visits.map((visit) => (
-                <div key={visit.id} className="p-4 bg-white rounded-xl">
+                <div key={visit.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
                   <div className="flex items-center justify-between">
                     <div className="flex-1">
                       <div className="font-medium">{visit.doctorName}</div>
-                      <div className="text-sm text-gray-500">
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
                         {new Date(visit.date).toLocaleDateString()}
                         {visit.reason && ` · ${visit.reason}`}
                         {visit.notes && ` · ${visit.notes}`}
@@ -781,7 +781,7 @@ const SUPPLEMENTS = [
             )}
 
             {!showAddVisit && (
-              <button onClick={() => setShowAddVisit(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              <button onClick={() => setShowAddVisit(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
                 + Add Visit
               </button>
             )}
@@ -793,13 +793,13 @@ const SUPPLEMENTS = [
             <h2 className="font-semibold mb-3">Illness Log</h2>
 
             {showAddIllness && (
-              <div className="p-4 bg-white rounded-xl space-y-3">
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
                 <input
                   type="text"
                   value={newIllnessName}
                   onChange={(e) => setNewIllnessName(e.target.value)}
                   placeholder="Illness (e.g., Cold, Fever, Flu)"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <div className="grid grid-cols-2 gap-2">
                   <input
@@ -807,14 +807,14 @@ const SUPPLEMENTS = [
                     value={newIllnessStart}
                     onChange={(e) => setNewIllnessStart(e.target.value)}
                     placeholder="Start date"
-                    className="w-full p-2 border rounded-lg"
+                    className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
                   />
                   <input
                     type="date"
                     value={newIllnessEnd}
                     onChange={(e) => setNewIllnessEnd(e.target.value)}
                     placeholder="End date"
-                    className="w-full p-2 border rounded-lg"
+                    className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
                   />
                 </div>
                 <input
@@ -822,13 +822,13 @@ const SUPPLEMENTS = [
                   value={newIllnessNotes}
                   onChange={(e) => setNewIllnessNotes(e.target.value)}
                   placeholder="Notes"
-                  className="w-full p-2 border rounded-lg"
+                  className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
                 />
                 <div className="flex gap-2">
                   <button onClick={saveIllness} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
                     {editingIllness ? "Update" : "Add"}
                   </button>
-                  <button onClick={resetIllnessForm} className="flex-1 py-2 bg-gray-200 rounded-lg">
+                  <button onClick={resetIllnessForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
                     Cancel
                   </button>
                 </div>
@@ -836,16 +836,16 @@ const SUPPLEMENTS = [
             )}
 
             {illnesses.length === 0 && !showAddIllness ? (
-              <div className="p-4 bg-white rounded-xl">
-                <p className="text-gray-500">No illnesses recorded</p>
+              <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+                <p className="text-gray-500 dark:text-gray-400">No illnesses recorded</p>
               </div>
             ) : (
               illnesses.map((illness) => (
-                <div key={illness.id} className="p-4 bg-white rounded-xl">
+                <div key={illness.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
                   <div className="flex items-center justify-between">
                     <div className="flex-1">
                       <div className="font-medium">{illness.name}</div>
-                      <div className="text-sm text-gray-500">
+                      <div className="text-sm text-gray-500 dark:text-gray-400">
                         {new Date(illness.startDate).toLocaleDateString()}
                         {illness.endDate && ` - ${new Date(illness.endDate).toLocaleDateString()}`}
                         {illness.notes && ` · ${illness.notes}`}
@@ -861,7 +861,7 @@ const SUPPLEMENTS = [
             )}
 
             {!showAddIllness && (
-              <button onClick={() => setShowAddIllness(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500">
+              <button onClick={() => setShowAddIllness(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
                 + Log Illness
               </button>
             )}