Update therapeutic range settings add toggle

src/App.tsx

@@ -108,6 +108,7 @@ const MedPlanAssistant = () => {
               chartView={chartView}
               showDayTimeOnXAxis={showDayTimeOnXAxis}
               showDayReferenceLines={showDayReferenceLines}
+              showTherapeuticRange={uiSettings.showTherapeuticRange ?? true}
               therapeuticRange={therapeuticRange}
               simulationDays={simulationDays}
               displayedDays={displayedDays}

src/components/settings.tsx

@@ -32,6 +32,7 @@ const Settings = ({
 }: any) => {
   const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings;
   const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true;
+  const showTherapeuticRange = (uiSettings as any).showTherapeuticRange ?? true;
 
   const [isDiagramExpanded, setIsDiagramExpanded] = React.useState(true);
   const [isPharmacokineticExpanded, setIsPharmacokineticExpanded] = React.useState(true);
@@ -94,6 +95,17 @@ const Settings = ({
               </TooltipProvider>
             </div>
 
+            <div className="flex items-center gap-3">
+              <Switch
+                id="showTemplateDay"
+                checked={showTemplateDay}
+                onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
+              />
+              <Label htmlFor="showTemplateDay" className="font-regular">
+                {t('showTemplateDayInChart')}
+              </Label>
+            </div>
+
             <div className="flex items-center gap-3">
               <Switch
                 id="showDayReferenceLines"
@@ -107,15 +119,43 @@ const Settings = ({
 
             <div className="flex items-center gap-3">
               <Switch
-                id="showTemplateDay"
-                checked={showTemplateDay}
-                onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
+                id="showTherapeuticRange"
+                checked={showTherapeuticRange}
+                onCheckedChange={checked => onUpdateUiSetting('showTherapeuticRange', checked)}
               />
-              <Label htmlFor="showTemplateDay" className="font-regular">
-                {t('showTemplateDayInChart')}
+              <Label htmlFor="showTherapeuticRange" className="font-regular">
+                {t('showTherapeuticRangeLines')}
               </Label>
             </div>
 
+            <div className="space-y-2">
+              { /* <Label className={`font-medium ${!showTherapeuticRange ? 'text-muted-foreground' : ''}`}>{t('therapeuticRange')}</Label> */ }
+              <div className="flex items-center gap-2">
+                <FormNumericInput
+                  value={therapeuticRange.min}
+                  onChange={val => onUpdateTherapeuticRange('min', val)}
+                  increment={0.5}
+                  min={0}
+                  placeholder={t('min')}
+                  required={showTherapeuticRange}
+                  disabled={!showTherapeuticRange}
+                  errorMessage={t('therapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
+                />
+                <span className="text-muted-foreground">-</span>
+                <FormNumericInput
+                  value={therapeuticRange.max}
+                  onChange={val => onUpdateTherapeuticRange('max', val)}
+                  increment={0.5}
+                  min={0}
+                  placeholder={t('max')}
+                  unit="ng/ml"
+                  required={showTherapeuticRange}
+                  disabled={!showTherapeuticRange}
+                  errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
+                />
+              </div>
+            </div>
+
             <div className="space-y-2">
               <Label className="font-medium">{t('simulationDuration')}</Label>
               <FormNumericInput
@@ -169,32 +209,6 @@ const Settings = ({
                 />
               </div>
             </div>
-
-            <div className="space-y-2">
-              <Label className="font-medium">{t('therapeuticRange')}</Label>
-              <div className="flex items-center gap-2">
-                <FormNumericInput
-                  value={therapeuticRange.min}
-                  onChange={val => onUpdateTherapeuticRange('min', val)}
-                  increment={0.5}
-                  min={0}
-                  placeholder={t('min')}
-                  required={true}
-                  errorMessage={t('therapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
-                />
-                <span className="text-muted-foreground">-</span>
-                <FormNumericInput
-                  value={therapeuticRange.max}
-                  onChange={val => onUpdateTherapeuticRange('max', val)}
-                  increment={0.5}
-                  min={0}
-                  placeholder={t('max')}
-                  unit="ng/ml"
-                  required={true}
-                  errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
-                />
-              </div>
-            </div>
           </CardContent>
         )}
       </Card>

src/components/simulation-chart.tsx

@@ -41,6 +41,7 @@ const SimulationChart = ({
   chartView,
   showDayTimeOnXAxis,
   showDayReferenceLines,
+  showTherapeuticRange,
   therapeuticRange,
   simulationDays,
   displayedDays,
@@ -396,7 +397,7 @@ const SimulationChart = ({
                 yAxisId="concentration"
               />
             ))}
-            {(chartView === 'damph' || chartView === 'both') && (
+            {showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (
               <ReferenceLine
                 y={parseFloat(therapeuticRange.min) || 0}
                 label={{ value: t('refLineMin'), position: 'insideTopLeft' }}
@@ -406,7 +407,7 @@ const SimulationChart = ({
                 yAxisId="concentration"
               />
             )}
-            {(chartView === 'damph' || chartView === 'both') && (
+            {showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (
               <ReferenceLine
                 y={parseFloat(therapeuticRange.max) || 0}
                 label={{ value: t('refLineMax'), position: 'insideTopLeft' }}

src/constants/defaults.ts

@@ -48,6 +48,7 @@ export interface UiSettings {
   simulationDays: string;
   displayedDays: string;
   showDayReferenceLines?: boolean;
+  showTherapeuticRange?: boolean;
 }
 
 export interface AppState {
@@ -106,5 +107,6 @@ export const getDefaultState = (): AppState => ({
     yAxisMax: '13',
     simulationDays: '5',
     displayedDays: '2',
+    showTherapeuticRange: true,
   }
 });

src/locales/de.ts

@@ -64,7 +64,9 @@ export const de = {
   xAxisFormat12h: "Tageszeit (12h AM/PM)",
   xAxisFormat12hDesc: "Wiederholend 12h Zyklus im AM/PM Format",
   showTemplateDayInChart: "Regulären Plan einblenden (nur bei abweichenden Tagen)",
-  showDayReferenceLines: "Tagestrenner anzeigen (Referenzlinien und Status)",
+
+  showDayReferenceLines: "Tagestrenner anzeigen (Vertikale Referenzlinien und Status)",
+  showTherapeuticRangeLines: "Therapeutischen Bereich anzeigen (Horizontale Min/MaxReferenzlinien)",
   simulationDuration: "Simulationsdauer",
   displayedDays: "Sichtbare Tage (im Fokus)",
   yAxisRange: "Y-Achsen-Bereich (Zoom)",

src/locales/en.ts

@@ -63,7 +63,8 @@ export const en = {
   xAxisFormat12h: "Time of Day (12h AM/PM)",
   xAxisFormat12hDesc: "Repeating 12h cycle in AM/PM format",
   showTemplateDayInChart: "Show Regular Plan (Only for Deviating Days)",
-  showDayReferenceLines: "Show Day Separators (Reference Lines and Status)",
+  showDayReferenceLines: "Show Day Separators (Vertical Reference Lines and Status)",
+  showTherapeuticRangeLines: "Show Therapeutic Range (Horizontal Min/Max Reference Lines)",
   simulationDuration: "Simulation Duration",
   displayedDays: "Visible Days (in Focus)",
   yAxisRange: "Y-Axis Range (Zoom)",