From bb5569aadae86d9d2b56104e1b63f42bb51ceccb Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Wed, 3 Dec 2025 23:58:19 +0000
Subject: [PATCH] Update clunky auto to manual sorting by time, primary color
 blue

---
 src/App.tsx                     |  4 ++-
 src/components/day-schedule.tsx | 46 +++++++++++++++++++++++++++++++--
 src/hooks/useAppState.ts        | 32 ++++++++++++++++-------
 src/locales/de.ts               |  7 ++++-
 src/locales/en.ts               |  5 ++++
 5 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1f33f6e..ae33384 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,8 @@ const MedPlanAssistant = () => {
     removeDay,
     addDoseToDay,
     removeDoseFromDay,
-    updateDoseInDay
+    updateDoseInDay,
+    sortDosesInDay
   } = useAppState();
 
   const {
@@ -126,6 +127,7 @@ const MedPlanAssistant = () => {
               onAddDose={addDoseToDay}
               onRemoveDose={removeDoseFromDay}
               onUpdateDose={updateDoseInDay}
+              onSortDoses={sortDosesInDay}
               t={t}
             />
           </div>
diff --git a/src/components/day-schedule.tsx b/src/components/day-schedule.tsx
index 00bb654..8e2f27b 100644
--- a/src/components/day-schedule.tsx
+++ b/src/components/day-schedule.tsx
@@ -14,7 +14,8 @@ import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Badge } from './ui/badge';
 import { FormTimeInput } from './ui/form-time-input';
 import { FormNumericInput } from './ui/form-numeric-input';
-import { Plus, Copy, Trash2 } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { Plus, Copy, Trash2, ArrowDownAZ } from 'lucide-react';
 import type { DayGroup } from '../constants/defaults';
 
 interface DayScheduleProps {
@@ -25,6 +26,7 @@ interface DayScheduleProps {
   onAddDose: (dayId: string) => void;
   onRemoveDose: (dayId: string, doseId: string) => void;
   onUpdateDose: (dayId: string, doseId: string, field: 'time' | 'ldx' | 'damph', value: string) => void;
+  onSortDoses: (dayId: string) => void;
   t: any;
 }
 
@@ -36,10 +38,23 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
   onAddDose,
   onRemoveDose,
   onUpdateDose,
+  onSortDoses,
   t
 }) => {
   const canAddDay = days.length < 3;
 
+  // Check if doses are sorted chronologically
+  const isDaySorted = (day: DayGroup): boolean => {
+    for (let i = 1; i < day.doses.length; i++) {
+      const prevTime = day.doses[i - 1].time || '00:00';
+      const currTime = day.doses[i].time || '00:00';
+      if (prevTime > currTime) {
+        return false;
+      }
+    }
+    return true;
+  };
+
   return (
     <div className="space-y-4">
       {days.map((day, dayIndex) => (
@@ -82,7 +97,34 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
           <CardContent className="space-y-3">
             {/* Dose table header */}
             <div className="grid grid-cols-[120px_1fr_auto] gap-3 text-sm font-medium text-muted-foreground">
-              <div>{t('time')}</div>
+              <div className="flex items-center gap-2">
+                <span>{t('time')}</span>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        className={
+                          isDaySorted(day)
+                            ? "h-6 w-6 p-0 text-muted-foreground hover:text-muted-foreground cursor-default"
+                            : "h-6 w-6 p-0 text-primary hover:text-primary hover:bg-primary/10"
+                        }
+                        onClick={() => !isDaySorted(day) && onSortDoses(day.id)}
+                        disabled={isDaySorted(day)}
+                      >
+                        <ArrowDownAZ className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="text-xs">
+                        {isDaySorted(day) ? t('sortByTimeSorted') : t('sortByTimeNeeded')}
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <div>{t('ldx')} (mg)</div>
               <div></div>
             </div>
diff --git a/src/hooks/useAppState.ts b/src/hooks/useAppState.ts
index 168cfd5..53dc5bc 100644
--- a/src/hooks/useAppState.ts
+++ b/src/hooks/useAppState.ts
@@ -186,20 +186,11 @@ export const useAppState = () => {
       days: prev.days.map(day => {
         if (day.id !== dayId) return day;
 
-        // Update the dose field
+        // Update the dose field (no auto-sort)
         const updatedDoses = day.doses.map(dose =>
           dose.id === doseId ? { ...dose, [field]: value } : dose
         );
 
-        // Sort by time if time field was changed
-        if (field === 'time') {
-          updatedDoses.sort((a, b) => {
-            const timeA = a.time || '00:00';
-            const timeB = b.time || '00:00';
-            return timeA.localeCompare(timeB);
-          });
-        }
-
         return {
           ...day,
           doses: updatedDoses
@@ -208,6 +199,26 @@ export const useAppState = () => {
     }));
   };
 
+  const sortDosesInDay = (dayId: string) => {
+    setAppState(prev => ({
+      ...prev,
+      days: prev.days.map(day => {
+        if (day.id !== dayId) return day;
+
+        const sortedDoses = [...day.doses].sort((a, b) => {
+          const timeA = a.time || '00:00';
+          const timeB = b.time || '00:00';
+          return timeA.localeCompare(timeB);
+        });
+
+        return {
+          ...day,
+          doses: sortedDoses
+        };
+      })
+    }));
+  };
+
   const handleReset = () => {
     if (window.confirm("Bist du sicher, dass du alle Einstellungen auf die Standardwerte zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.")) {
       window.localStorage.removeItem(LOCAL_STORAGE_KEY);
@@ -227,6 +238,7 @@ export const useAppState = () => {
     addDoseToDay,
     removeDoseFromDay,
     updateDoseInDay,
+    sortDosesInDay,
     handleReset
   };
 };
diff --git a/src/locales/de.ts b/src/locales/de.ts
index d10061b..38dc244 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -118,7 +118,12 @@ export const de = {
   // Time picker
   timePickerHour: "Stunde",
   timePickerMinute: "Minute",
-  timePickerApply: "Übernehmen"
+  timePickerApply: "Übernehmen",
+
+  // Sorting
+  sortByTime: "Nach Zeit sortieren",
+  sortByTimeNeeded: "Dosen sind nicht in chronologischer Reihenfolge. Klicken zum Sortieren.",
+  sortByTimeSorted: "Dosen sind chronologisch sortiert."
 };
 
 export default de;
diff --git a/src/locales/en.ts b/src/locales/en.ts
index cee2e93..b408056 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -99,6 +99,11 @@ export const en = {
   timePickerMinute: "Minute",
   timePickerApply: "Apply",
 
+  // Sorting
+  sortByTime: "Sort by time",
+  sortByTimeNeeded: "Doses are not in chronological order. Click to sort.",
+  sortByTimeSorted: "Doses are sorted chronologically.",
+
   // Day-based schedule
   regularPlan: "Regular Plan",
   deviatingPlan: "Deviation from Plan",