Update edit prescription form

and fix dosage validation

src/Components/Form/FormFields/DosageFormField.tsx

@@ -0,0 +1,21 @@
+import NumericWithUnitsFormField from "./NumericWithUnitsFormField";
+import { FormFieldBaseProps } from "./Utils";
+
+type Props = FormFieldBaseProps<string> & {
+  placeholder?: string;
+  value?: string;
+  autoComplete?: string;
+  className?: string | undefined;
+  disabled?: boolean;
+  min?: string | number;
+  max?: string | number;
+};
+
+export default function DosageFormField(props: Props) {
+  return (
+    <NumericWithUnitsFormField
+      {...props}
+      units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
+    />
+  );
+}

src/Components/Form/FormFields/NumericWithUnitsFormField.tsx

@@ -36,6 +36,7 @@ export default function NumericWithUnitsFormField(props: Props) {
           required={field.required}
           value={numValue}
           onChange={(e) => field.handleChange(e.target.value + " " + unitValue)}
+          disabled={props.disabled}
         />
         <div className="absolute inset-y-0 right-0 flex items-center">
           <select
@@ -46,6 +47,7 @@ export default function NumericWithUnitsFormField(props: Props) {
             onChange={(e) =>
               field.handleChange(numValue + " " + e.target.value)
             }
+            disabled={props.disabled}
           >
             {props.units.map((unit) => (
               <option key={unit}>{unit}</option>

src/Components/Medicine/AdministerMedicine.tsx

@@ -10,10 +10,11 @@ import { useTranslation } from "react-i18next";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import dayjs from "../../Utils/dayjs";
-import NumericWithUnitsFormField from "../Form/FormFields/NumericWithUnitsFormField";
 import useSlug from "../../Common/hooks/useSlug";
 import request from "../../Utils/request/request";
 import MedicineRoutes from "./routes";
+import DosageFormField from "../Form/FormFields/DosageFormField";
+import { AdministrationDosageValidator } from "./validators";
 
 interface Props {
   prescription: Prescription;
@@ -68,18 +69,14 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       show
       onClose={() => props.onClose(false)}
       onConfirm={async () => {
-        if (!dosage && prescription.dosage_type === "TITRATED") {
-          setError("This field is required");
-          return;
-        }
-        if (
-          (prescription.dosage_type === "TITRATED" &&
-            Number(dosage?.split(" ")[0]) <
-              Number(prescription.base_dosage?.split(" ")[0])) ||
-          Number(dosage?.split(" ")[0]) >
-            Number(prescription.target_dosage?.split(" ")[0])
-        ) {
-          setError("Dosage should be between start and target dosage");
+        if (prescription.dosage_type === "TITRATED") {
+          setError(
+            AdministrationDosageValidator(
+              dosage,
+              prescription.base_dosage,
+              prescription.target_dosage
+            )
+          );
           return;
         }
 
@@ -104,7 +101,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
         <PrescriptionDetailCard prescription={prescription} readonly />
 
         {prescription.dosage_type === "TITRATED" && (
-          <NumericWithUnitsFormField
+          <DosageFormField
             name="dosage"
             label={
               t("dosage") +
@@ -113,11 +110,11 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
             value={dosage}
             onChange={({ value }) => setDosage(value)}
             required
-            units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
             min={prescription.base_dosage}
             max={prescription.target_dosage}
             disabled={isLoading}
             error={error}
+            errorClassName={error ? "block" : "hidden"}
           />
         )}
 

src/Components/Medicine/CreatePrescriptionForm.tsx

@@ -5,7 +5,6 @@ import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import { MedicineAdministrationRecord, Prescription } from "./models";
 import { useState } from "react";
-import NumericWithUnitsFormField from "../Form/FormFields/NumericWithUnitsFormField";
 import { useTranslation } from "react-i18next";
 import MedibaseAutocompleteFormField from "./MedibaseAutocompleteFormField";
 import dayjs from "../../Utils/dayjs";
@@ -15,6 +14,7 @@ import MedicineRoutes from "./routes";
 import request from "../../Utils/request/request";
 import useSlug from "../../Common/hooks/useSlug";
 import { Success } from "../../Utils/Notifications";
+import DosageFormField from "../Form/FormFields/DosageFormField";
 
 export default function CreatePrescriptionForm(props: {
   prescription: Prescription;
@@ -63,7 +63,7 @@ export default function CreatePrescriptionForm(props: {
           />
           {props.prescription.dosage_type !== "PRN" && (
             <CheckBoxFormField
-              label="Titrate Dosage"
+              label={t("titrate_dosage")}
               name="Titrate Dosage"
               value={field("dosage_type").value === "TITRATED"}
               onChange={(e) => {
@@ -92,30 +92,27 @@ export default function CreatePrescriptionForm(props: {
             />
             {field("dosage_type").value === "TITRATED" ? (
               <div className="flex w-full gap-4">
-                <NumericWithUnitsFormField
+                <DosageFormField
                   className="flex-1"
-                  label="Start Dosage"
+                  label={t("start_dosage")}
                   {...field("base_dosage", RequiredFieldValidator())}
                   required
-                  units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
                   min={0}
                 />
-                <NumericWithUnitsFormField
+                <DosageFormField
                   className="flex-1"
-                  label="Target Dosage"
+                  label={t("target_dosage")}
                   {...field("target_dosage", RequiredFieldValidator())}
                   required
-                  units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
                   min={0}
                 />
               </div>
             ) : (
-              <NumericWithUnitsFormField
+              <DosageFormField
                 className="flex-1"
                 label={t("dosage")}
                 {...field("base_dosage", RequiredFieldValidator())}
                 required={field("dosage_type").value !== "TITRATED"}
-                units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
                 min={0}
               />
             )}
@@ -169,7 +166,7 @@ export default function CreatePrescriptionForm(props: {
 
           {field("dosage_type").value === "TITRATED" && (
             <TextAreaFormField
-              label="Instructions on titration"
+              label={t("instruction_on_titration")}
               {...field("instruction_on_titration")}
             />
           )}

src/Components/Medicine/EditPrescriptionForm.tsx

@@ -7,7 +7,6 @@ import useSlug from "../../Common/hooks/useSlug";
 import { RequiredFieldValidator } from "../Form/FieldValidators";
 import { useTranslation } from "react-i18next";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
-import NumericWithUnitsFormField from "../Form/FormFields/NumericWithUnitsFormField";
 import {
   PRESCRIPTION_FREQUENCIES,
   PRESCRIPTION_ROUTES,
@@ -16,6 +15,8 @@ import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import { EditPrescriptionFormValidator } from "./validators";
 import MedicineRoutes from "./routes";
+import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import DosageFormField from "../Form/FormFields/DosageFormField";
 
 interface Props {
   initial: Prescription;
@@ -88,6 +89,27 @@ export default function EditPrescriptionForm(props: Props) {
             {...field("discontinued_reason")}
           />
 
+          {props.initial.dosage_type !== "PRN" && (
+            <CheckBoxFormField
+              label={t("titrate_dosage")}
+              name="Titrate Dosage"
+              value={field("dosage_type").value === "TITRATED"}
+              onChange={(e) => {
+                if (e.value) {
+                  field("dosage_type").onChange({
+                    name: "dosage_type",
+                    value: "TITRATED",
+                  });
+                } else {
+                  field("dosage_type").onChange({
+                    name: "dosage_type",
+                    value: "REGULAR",
+                  });
+                }
+              }}
+            />
+          )}
+
           <div className="flex items-center gap-4">
             <SelectFormField
               className="flex-1"
@@ -97,14 +119,32 @@ export default function EditPrescriptionForm(props: Props) {
               optionLabel={(key) => t("PRESCRIPTION_ROUTE_" + key)}
               optionValue={(key) => key}
             />
-            <NumericWithUnitsFormField
-              className="flex-1"
-              label={t("dosage")}
-              {...field("base_dosage", RequiredFieldValidator())}
-              required
-              units={["mg", "g", "ml", "drop(s)", "ampule(s)", "tsp"]}
-              min={0}
-            />
+            {field("dosage_type").value === "TITRATED" ? (
+              <div className="flex w-full gap-4">
+                <DosageFormField
+                  className="flex-1"
+                  label={t("start_dosage")}
+                  {...field("base_dosage", RequiredFieldValidator())}
+                  required
+                  min={0}
+                />
+                <DosageFormField
+                  className="flex-1"
+                  label={t("target_dosage")}
+                  {...field("target_dosage", RequiredFieldValidator())}
+                  required
+                  min={0}
+                />
+              </div>
+            ) : (
+              <DosageFormField
+                className="flex-1"
+                label={t("dosage")}
+                {...field("base_dosage", RequiredFieldValidator())}
+                required={field("dosage_type").value !== "TITRATED"}
+                min={0}
+              />
+            )}
           </div>
 
           {props.initial.dosage_type === "PRN" ? (
@@ -153,6 +193,13 @@ export default function EditPrescriptionForm(props: Props) {
             </div>
           )}
 
+          {field("dosage_type").value === "TITRATED" && (
+            <TextAreaFormField
+              label={t("instruction_on_titration")}
+              {...field("instruction_on_titration")}
+            />
+          )}
+
           <TextAreaFormField label={t("notes")} {...field("notes")} />
         </>
       )}