Update therapeutic range settings add toggle

This commit is contained in:
2026-01-08 18:09:26 +00:00
parent bd5bb647b2
commit c7a3068e1c
6 changed files with 56 additions and 35 deletions

View File

@@ -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>