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

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>