Update clunky auto to manual sorting by time, primary color blue

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>

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>

src/hooks/useAppState.ts

@@ -186,23 +186,34 @@ 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) => {
+        return {
+          ...day,
+          doses: updatedDoses
+        };
+      })
+    }));
+  };
+
+  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: updatedDoses
+          doses: sortedDoses
         };
       })
     }));
@@ -227,6 +238,7 @@ export const useAppState = () => {
     addDoseToDay,
     removeDoseFromDay,
     updateDoseInDay,
+    sortDosesInDay,
     handleReset
   };
 };

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;

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",