From 84c88ea6d3e8a6c2e6c729628471a74b92f990fc Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Mon, 24 Nov 2025 18:48:20 +0000
Subject: [PATCH] Fix therapeutic range input

---
 src/App.js                     |   2 +-
 src/components/NumericInput.js |  15 +++--
 src/components/Settings.js     | 112 +++++++++++++++++----------------
 src/constants/defaults.js      |   2 +-
 4 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7279df8..5d97f72 100644
--- a/src/App.js
+++ b/src/App.js
@@ -139,7 +139,7 @@ const MedPlanAssistant = () => {
               therapeuticRange={therapeuticRange}
               uiSettings={uiSettings}
               onUpdatePkParams={(key, value) => updateNestedState('pkParams', key, value)}
-              onUpdateTherapeuticRange={(key, value) => updateNestedState('therapeuticRange', key, { [key]: value })}
+              onUpdateTherapeuticRange={(key, value) => updateNestedState('therapeuticRange', key, value)}
               onUpdateUiSetting={updateUiSetting}
               onReset={handleReset}
               t={t}
diff --git a/src/components/NumericInput.js b/src/components/NumericInput.js
index c3d3a4b..fcbbef8 100644
--- a/src/components/NumericInput.js
+++ b/src/components/NumericInput.js
@@ -10,11 +10,14 @@ const NumericInput = ({
   unit,
   align = 'right', // 'left', 'center', 'right'
   allowEmpty = false, // Allow empty value (e.g., for "Auto" mode)
+  clearButton = false, // Show clear button (with allowEmpty=true)
   errorMessage = 'This field is required' // Error message for mandatory empty fields
 }) => {
   const [hasError, setHasError] = React.useState(false);
   const [showErrorTooltip, setShowErrorTooltip] = React.useState(false);
   const containerRef = React.useRef(null);
+  const showClearButton = clearButton && allowEmpty;
+
   // Determine decimal places based on increment
   const getDecimalPlaces = () => {
     const inc = String(increment || '1');
@@ -158,14 +161,14 @@ const NumericInput = ({
   return (
     <div
       ref={containerRef}
-      className="relative"
+      className="relative inline-block"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <div className="relative inline-flex items-center">
         <button
           onClick={() => updateValue(-1)}
-          className="px-2 py-1 border rounded-l-md bg-gray-100 hover:bg-gray-200 text-lg font-bold"
+          className="px-2 py-1 border rounded-l-md bg-gray-100 bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 text-lg font-bold"
           tabIndex={-1}
         >
           -
@@ -183,15 +186,15 @@ const NumericInput = ({
         />
         <button
           onClick={() => updateValue(1)}
-          className={`px-2 py-1 border bg-gray-100 hover:bg-gray-200 text-lg font-bold ${!allowEmpty ? 'rounded-r-md' : ''}`}
+          className={`px-2 py-1 border-t border-b ${showClearButton ? 'border-l' : 'border-l border-r rounded-r-md'} bg-gray-100 bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 text-lg font-bold`}
           tabIndex={-1}
         >
           +
         </button>
-        {allowEmpty && (
+        {showClearButton && (
           <button
             onClick={handleClear}
-            className="px-2 py-1 border rounded-r-md bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800"
+            className="px-2 py-1 border rounded-r-md bg-gray-100 bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 text-gray-600 hover:text-gray-800"
             tabIndex={-1}
             title="Clear (set to Auto)"
           >
@@ -203,8 +206,8 @@ const NumericInput = ({
         {hasError && (
           <div className="absolute inset-0 border-2 border-red-500 rounded-md pointer-events-none" style={{ zIndex: 10 }} />
         )}
+        {unit && <span className="ml-2 text-gray-500 text-sm whitespace-nowrap">{unit}</span>}
       </div>
-      {unit && <span className="ml-2 text-gray-500 text-sm whitespace-nowrap">{unit}</span>}
       {hasError && showErrorTooltip && (
         <div
           className={`absolute z-50 bg-white border-2 border-red-500 rounded-md shadow-lg p-2 flex items-start gap-2 ${
diff --git a/src/components/Settings.js b/src/components/Settings.js
index c0a82d7..fbd0a16 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -30,8 +30,8 @@ const Settings = ({
           </label>
         </div>
 
-        <label className="block font-medium text-gray-600 pt-2">{t.simulationDuration}</label>
-        <div className="w-40">
+        <div>
+          <label className="block font-medium text-gray-600 pt-2">{t.simulationDuration}</label>
           <NumericInput
             value={simulationDays}
             onChange={val => onUpdateUiSetting('simulationDays', val)}
@@ -43,8 +43,8 @@ const Settings = ({
           />
         </div>
 
-        <label className="block font-medium text-gray-600">{t.displayedDays}</label>
-        <div className="w-40">
+        <div>
+          <label className="block font-medium text-gray-600">{t.displayedDays}</label>
           <NumericInput
             value={displayedDays}
             onChange={val => onUpdateUiSetting('displayedDays', val)}
@@ -56,60 +56,66 @@ const Settings = ({
           />
         </div>
 
-        <label className="block font-medium text-gray-600 pt-2">{t.yAxisRange}</label>
-        <div className="flex items-center mt-1">
-          <div className="w-30">
-            <NumericInput
-              value={yAxisMin}
-              onChange={val => onUpdateUiSetting('yAxisMin', val)}
-              increment={'5'}
-              min={0}
-              placeholder={t.auto}
-              allowEmpty={true}
-            />
-          </div>
-          <span className="text-gray-500 px-2">-</span>
-          <div className="w-32">
-            <NumericInput
-              value={yAxisMax}
-              onChange={val => onUpdateUiSetting('yAxisMax', val)}
-              increment={'5'}
-              min={0}
-              placeholder={t.auto}
-              unit="ng/ml"
-              allowEmpty={true}
-            />
+        <div>
+          <label className="block font-medium text-gray-600 pt-2">{t.yAxisRange}</label>
+          <div className="flex items-center mt-1">
+            <div className="w-30">
+              <NumericInput
+                value={yAxisMin}
+                onChange={val => onUpdateUiSetting('yAxisMin', val)}
+                increment={'5'}
+                min={0}
+                placeholder={t.auto}
+                allowEmpty={true}
+                clearButton={true}
+              />
+            </div>
+            <span className="text-gray-500 px-2">-</span>
+            <div className="w-32">
+              <NumericInput
+                value={yAxisMax}
+                onChange={val => onUpdateUiSetting('yAxisMax', val)}
+                increment={'5'}
+                min={0}
+                placeholder={t.auto}
+                unit="ng/ml"
+                allowEmpty={true}
+                clearButton={true}
+              />
+            </div>
           </div>
         </div>
 
-        <label className="block font-medium text-gray-600">{t.therapeuticRange}</label>
-        <div className="flex items-center mt-1">
-          <div className="w-30">
-            <NumericInput
-              value={therapeuticRange.min}
-              onChange={val => onUpdateTherapeuticRange('min', val)}
-              increment={'0.5'}
-              min={0}
-              placeholder={t.min}
-              errorMessage={t.fieldRequired}
-            />
-          </div>
-          <span className="text-gray-500 px-2">-</span>
-          <div className="w-32">
-            <NumericInput
-              value={therapeuticRange.max}
-              onChange={val => onUpdateTherapeuticRange('max', val)}
-              increment={'0.5'}
-              min={0}
-              placeholder={t.max}
-              unit="ng/ml"
-              errorMessage={t.fieldRequired}
-            />
+        <div>
+          <label className="block font-medium text-gray-600">{t.therapeuticRange}</label>
+          <div className="flex items-center mt-1">
+            <div className="w-30">
+              <NumericInput
+                value={therapeuticRange.min}
+                onChange={val => onUpdateTherapeuticRange('min', val)}
+                increment={'0.5'}
+                min={0}
+                placeholder={t.min}
+                errorMessage={t.fieldRequired}
+              />
+            </div>
+            <span className="text-gray-500 px-2">-</span>
+            <div className="w-32">
+              <NumericInput
+                value={therapeuticRange.max}
+                onChange={val => onUpdateTherapeuticRange('max', val)}
+                increment={'0.5'}
+                min={0}
+                placeholder={t.max}
+                unit="ng/ml"
+                errorMessage={t.fieldRequired}
+              />
+            </div>
           </div>
         </div>
 
         <h3 className="text-lg font-semibold mt-4 pt-4 border-t">{t.dAmphetamineParameters}</h3>
-        <div className="w-40">
+        <div>
           <label className="block font-medium text-gray-600">{t.halfLife}</label>
           <NumericInput
             value={pkParams.damph.halfLife}
@@ -122,7 +128,7 @@ const Settings = ({
         </div>
 
         <h3 className="text-lg font-semibold mt-4 pt-4 border-t">{t.lisdexamfetamineParameters}</h3>
-        <div className="w-40">
+        <div>
           <label className="block font-medium text-gray-600">{t.conversionHalfLife}</label>
           <NumericInput
             value={pkParams.ldx.halfLife}
@@ -133,7 +139,7 @@ const Settings = ({
             errorMessage={t.fieldRequired}
           />
         </div>
-        <div className="w-40">
+        <div>
           <label className="block font-medium text-gray-600">{t.absorptionRate}</label>
           <NumericInput
             value={pkParams.ldx.absorptionRate}
diff --git a/src/constants/defaults.js b/src/constants/defaults.js
index 5692b18..6a36dbb 100644
--- a/src/constants/defaults.js
+++ b/src/constants/defaults.js
@@ -16,7 +16,7 @@ export const getDefaultState = () => ({
     { time: '01:00', dose: '0', label: 'night' },
   ],
   steadyStateConfig: { daysOnMedication: '7' },
-  therapeuticRange: { min: '11.5', max: '14' },
+  therapeuticRange: { min: '10.5', max: '11.5' },
   doseIncrement: '2.5',
   uiSettings: {
     showDayTimeXAxis: true,