Update separated pharmacokinetic from diagram settings, made both collapsible
This commit is contained in:
@@ -18,6 +18,7 @@ import { Label } from './ui/label';
|
||||
import { Separator } from './ui/separator';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||||
|
||||
const Settings = ({
|
||||
pkParams,
|
||||
@@ -32,217 +33,238 @@ const Settings = ({
|
||||
const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings;
|
||||
const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true;
|
||||
|
||||
const [isDiagramExpanded, setIsDiagramExpanded] = React.useState(true);
|
||||
const [isPharmacokineticExpanded, setIsPharmacokineticExpanded] = React.useState(true);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('diagramSettings')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('xAxisTimeFormat')}</Label>
|
||||
<TooltipProvider>
|
||||
<Select
|
||||
value={showDayTimeOnXAxis}
|
||||
onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
|
||||
>
|
||||
<SelectTrigger className="w-[240px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="continuous">
|
||||
{t('xAxisFormatContinuous')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormatContinuousDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="24h">
|
||||
{t('xAxisFormat24h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat24hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="12h">
|
||||
{t('xAxisFormat12h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat12hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showDayReferenceLines"
|
||||
checked={showDayReferenceLines}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
|
||||
/>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-regular">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
</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="space-y-2">
|
||||
<Label className="font-medium">{t('simulationDuration')}</Label>
|
||||
<FormNumericInput
|
||||
value={simulationDays}
|
||||
onChange={val => onUpdateUiSetting('simulationDays', val)}
|
||||
increment={1}
|
||||
min={3}
|
||||
max={7}
|
||||
unit={t('unitDays')}
|
||||
required={true}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('displayedDays')}</Label>
|
||||
<FormNumericInput
|
||||
value={displayedDays}
|
||||
onChange={val => onUpdateUiSetting('displayedDays', val)}
|
||||
increment={1}
|
||||
min={1}
|
||||
max={parseInt(simulationDays, 10) || 3}
|
||||
unit={t('unitDays')}
|
||||
required={true}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('yAxisRange')}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={yAxisMin}
|
||||
onChange={val => onUpdateUiSetting('yAxisMin', val)}
|
||||
increment={1}
|
||||
min={0}
|
||||
placeholder={t('auto')}
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
/>
|
||||
<span className="text-muted-foreground">-</span>
|
||||
<FormNumericInput
|
||||
value={yAxisMax}
|
||||
onChange={val => onUpdateUiSetting('yAxisMax', val)}
|
||||
increment={5}
|
||||
min={0}
|
||||
placeholder={t('auto')}
|
||||
unit="ng/ml"
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{/* Diagram Settings Card */}
|
||||
<Card>
|
||||
<CardHeader className="cursor-pointer pb-3" onClick={() => setIsDiagramExpanded(!isDiagramExpanded)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{t('diagramSettings')}</CardTitle>
|
||||
{isDiagramExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{isDiagramExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('xAxisTimeFormat')}</Label>
|
||||
<TooltipProvider>
|
||||
<Select
|
||||
value={showDayTimeOnXAxis}
|
||||
onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
|
||||
>
|
||||
<SelectTrigger className="w-[240px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="continuous">
|
||||
{t('xAxisFormatContinuous')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormatContinuousDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="24h">
|
||||
{t('xAxisFormat24h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat24hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="12h">
|
||||
{t('xAxisFormat12h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat12hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TooltipProvider>
|
||||
</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 className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showDayReferenceLines"
|
||||
checked={showDayReferenceLines}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
|
||||
/>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-regular">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
</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="space-y-2">
|
||||
<Label className="font-medium">{t('simulationDuration')}</Label>
|
||||
<FormNumericInput
|
||||
value={simulationDays}
|
||||
onChange={val => onUpdateUiSetting('simulationDays', val)}
|
||||
increment={1}
|
||||
min={3}
|
||||
max={7}
|
||||
unit={t('unitDays')}
|
||||
required={true}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('displayedDays')}</Label>
|
||||
<FormNumericInput
|
||||
value={displayedDays}
|
||||
onChange={val => onUpdateUiSetting('displayedDays', val)}
|
||||
increment={1}
|
||||
min={1}
|
||||
max={parseInt(simulationDays, 10) || 3}
|
||||
unit={t('unitDays')}
|
||||
required={true}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('yAxisRange')}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={yAxisMin}
|
||||
onChange={val => onUpdateUiSetting('yAxisMin', val)}
|
||||
increment={1}
|
||||
min={0}
|
||||
placeholder={t('auto')}
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
/>
|
||||
<span className="text-muted-foreground">-</span>
|
||||
<FormNumericInput
|
||||
value={yAxisMax}
|
||||
onChange={val => onUpdateUiSetting('yAxisMax', val)}
|
||||
increment={1}
|
||||
min={0}
|
||||
placeholder={t('auto')}
|
||||
unit="ng/ml"
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* Pharmacokinetic Settings Card */}
|
||||
<Card>
|
||||
<CardHeader className="cursor-pointer pb-3" onClick={() => setIsPharmacokineticExpanded(!isPharmacokineticExpanded)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg">{t('pharmacokineticsSettings')}</CardTitle>
|
||||
{isPharmacokineticExpanded ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
{isPharmacokineticExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('halfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.damph.halfLife}
|
||||
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
|
||||
increment={0.5}
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('halfLifeRequired') || 'Half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<Separator className="my-4" />
|
||||
|
||||
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('halfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.damph.halfLife}
|
||||
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
|
||||
increment={0.5}
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('halfLifeRequired') || 'Half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('conversionHalfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.halfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('absorptionRate')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.absorptionRate}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionRate: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit={t('faster')}
|
||||
required={true}
|
||||
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('conversionHalfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.halfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('absorptionRate')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.absorptionRate}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionRate: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit={t('faster')}
|
||||
required={true}
|
||||
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{t('resetAllSettings')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Reset Button - Always Visible */}
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onReset}
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{t('resetAllSettings')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user