Update migrated js to ts and shadcn

src/components/settings.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { FormNumericInput } from './ui/form-numeric-input';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import { Switch } from './ui/switch';
+import { Label } from './ui/label';
+import { Separator } from './ui/separator';
+
+const Settings = ({
+  pkParams,
+  therapeuticRange,
+  uiSettings,
+  onUpdatePkParams,
+  onUpdateTherapeuticRange,
+  onUpdateUiSetting,
+  onReset,
+  t
+}: any) => {
+  const { showDayTimeOnXAxis, yAxisMin, yAxisMax, simulationDays, displayedDays } = uiSettings;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t.advancedSettings}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="showDayTimeOnXAxis" className="font-medium">
+            {t.show24hTimeAxis}
+          </Label>
+          <Switch
+            id="showDayTimeOnXAxis"
+            checked={showDayTimeOnXAxis}
+            onCheckedChange={checked => onUpdateUiSetting('showDayTimeOnXAxis', checked)}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label className="font-medium">{t.simulationDuration}</Label>
+          <FormNumericInput
+            value={simulationDays}
+            onChange={val => onUpdateUiSetting('simulationDays', val)}
+            increment={1}
+            min={2}
+            max={7}
+            unit={t.days}
+            required={true}
+            errorMessage={t.simulationDaysRequired || 'Simulation days is required'}
+          />
+        </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) || 1}
+            unit={t.days}
+            required={true}
+            errorMessage={t.displayedDaysRequired || 'Displayed days is required'}
+          />
+        </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={5}
+              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>
+        </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>
+
+        <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', { halfLife: val })}
+            increment={0.5}
+            min={0.1}
+            unit="h"
+            required={true}
+            errorMessage={t.halfLifeRequired || 'Half-life is required'}
+          />
+        </div>
+
+        <Separator className="my-4" />
+
+        <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', { 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', { 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>
+  );
+};
+
+export default Settings;