Fixes: Add Health Details in Consultation form

src/Common/constants.tsx

@@ -356,16 +356,6 @@ export const TEST_TYPE = [
   "POCPCR",
 ];
 
-export const VACCINES = [
-  "CoviShield",
-  "Covaxin",
-  "Sputnik",
-  "Moderna",
-  "Pfizer",
-  "Janssen",
-  "Sinovac",
-];
-
 export const BLOOD_GROUPS = [
   "UNK",
   "A+",

src/Components/Common/prescription-builder/DiseaseBuilder.tsx

@@ -0,0 +1,126 @@
+import { PrescriptionDropdown } from "./PrescriptionDropdown";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+export const vaccines = require("./assets/vaccines");
+
+interface DiseaseBuilderProps<T> {
+  diseases: T[];
+  setDiseases: React.Dispatch<React.SetStateAction<T[]>>;
+}
+
+export type DiseaseDetails = {
+  disease?: string;
+  details?: string;
+  date?: string;
+  precision?: number;
+};
+
+export const emptyValues = {
+  disease: "",
+  details: "",
+  date: "",
+  precision: 0,
+};
+
+export default function DiseaseBuilder(
+  props: DiseaseBuilderProps<DiseaseDetails>
+) {
+  const { diseases, setDiseases } = props;
+
+  const setItem = (object: DiseaseDetails, i: number) => {
+    setDiseases(
+      diseases.map((disease, index) => (index === i ? object : disease))
+    );
+  };
+
+  return (
+    <div className="mt-2">
+      {diseases.map((disease, i) => {
+        const setDisease = (dis: string) => {
+          setItem(
+            {
+              ...disease,
+              disease: dis,
+            },
+            i
+          );
+        };
+
+        return (
+          <div
+            key={i}
+            className="border-b border-b-gray-500 border-dashed py-2 text-xs text-gray-600"
+          >
+            <div className="flex gap-2 flex-col md:flex-row">
+              <div>
+                Vaccine
+                <PrescriptionDropdown
+                  placeholder="Vaccine"
+                  options={vaccines}
+                  value={disease.disease || ""}
+                  setValue={setDisease}
+                />
+              </div>
+              <div>
+                Doses
+                <input
+                  type="string"
+                  className="w-full focus:ring-primary-500 focus:border-primary-500 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white"
+                  value={disease.details}
+                  placeholder="Details"
+                  onChange={(e) => {
+                    setItem(
+                      {
+                        ...disease,
+                        details: e.target.value,
+                      },
+                      i
+                    );
+                  }}
+                  required
+                />
+              </div>
+              <div>
+                Date
+                <input
+                  type="date"
+                  className="focus:ring-primary-500 focus:border-primary-500 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white"
+                  value={disease.date}
+                  placeholder="Date"
+                  onChange={(e) => {
+                    setItem(
+                      {
+                        ...disease,
+                        date: e.target.value,
+                      },
+                      i
+                    );
+                  }}
+                  required
+                />
+              </div>
+              <button
+                type="button"
+                className="text-gray-400 text-base transition hover:text-red-500"
+                onClick={() => {
+                  setDiseases(diseases.filter((disease, index) => i != index));
+                }}
+              >
+                <i className="fas fa-trash" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={() => {
+          setDiseases([...diseases, emptyValues]);
+        }}
+        className="shadow-sm mt-4 bg-gray-200 w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+      >
+        + Add Disease History
+      </button>
+    </div>
+  );
+}

src/Components/Common/prescription-builder/PrescriptionDropdown.tsx

@@ -46,7 +46,7 @@ export function PrescriptionDropdown(props: {
       <div
         ref={dropRef}
         className={clsx([
-          "absolute z-40 top-[calc(100%+10px)] left-0 w-full rounded-md shadow-lg bg-white max-h-[300px] overflow-auto",
+          "absolute z-40 top-[calc(100%+15px)] left-0 w-full rounded-md shadow-lg bg-white max-h-[300px] overflow-auto",
           { hidden: !open },
         ])}
       >

src/Components/Common/prescription-builder/VaccinationBuilder.tsx

@@ -0,0 +1,135 @@
+import { PrescriptionDropdown } from "./PrescriptionDropdown";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+export const vaccines = require("./assets/vaccines");
+
+interface VaccinationBuilderProps<T> {
+  vaccinations: T[];
+  setVaccinations: React.Dispatch<React.SetStateAction<T[]>>;
+}
+
+export type VaccinationDetails = {
+  vaccine?: string;
+  doses?: number;
+  date?: string;
+  precision?: number;
+};
+
+export const emptyValues = {
+  vaccine: "",
+  doses: 0,
+  date: "",
+  precision: 0,
+};
+
+export default function VaccinationBuilder(
+  props: VaccinationBuilderProps<VaccinationDetails>
+) {
+  const { vaccinations, setVaccinations } = props;
+
+  const setItem = (object: VaccinationDetails, i: number) => {
+    setVaccinations(
+      vaccinations.map((vaccination, index) =>
+        index === i ? object : vaccination
+      )
+    );
+  };
+
+  return (
+    <div className="mt-2">
+      {vaccinations.map((vaccination, i) => {
+        const setVaccine = (vaccine: string) => {
+          setItem(
+            {
+              ...vaccination,
+              vaccine,
+            },
+            i
+          );
+        };
+
+        return (
+          <div
+            key={i}
+            className="border-b border-b-gray-500 border-dashed py-2 text-xs text-gray-600"
+          >
+            <div className="flex gap-2 flex-col md:flex-row">
+              <div>
+                Vaccine
+                <PrescriptionDropdown
+                  placeholder="Vaccine"
+                  options={vaccines}
+                  value={vaccination.vaccine || ""}
+                  setValue={setVaccine}
+                />
+              </div>
+              <div>
+                Doses
+                <input
+                  type="number"
+                  className="w-full focus:ring-primary-500 focus:border-primary-500 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white"
+                  value={vaccination.doses}
+                  placeholder="Doses"
+                  min={0}
+                  onChange={(e) => {
+                    let value = parseInt(e.target.value);
+                    if (value < 0) {
+                      value = 0;
+                    }
+                    setItem(
+                      {
+                        ...vaccination,
+                        doses: value,
+                      },
+                      i
+                    );
+                  }}
+                  required
+                />
+              </div>
+              <div>
+                Date
+                <input
+                  type="date"
+                  className="focus:ring-primary-500 focus:border-primary-500 block border border-gray-400 rounded py-2 px-4 text-sm bg-gray-100 hover:bg-gray-200 focus:outline-none focus:bg-white"
+                  value={vaccination.date}
+                  placeholder="Date"
+                  onChange={(e) => {
+                    setItem(
+                      {
+                        ...vaccination,
+                        date: e.target.value,
+                      },
+                      i
+                    );
+                  }}
+                  required
+                />
+              </div>
+              <button
+                type="button"
+                className="text-gray-400 text-base transition hover:text-red-500"
+                onClick={() => {
+                  setVaccinations(
+                    vaccinations.filter((vaccination, index) => i != index)
+                  );
+                }}
+              >
+                <i className="fas fa-trash" />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={() => {
+          setVaccinations([...vaccinations, emptyValues]);
+        }}
+        className="shadow-sm mt-4 bg-gray-200 w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
+      >
+        + Add Vaccination History
+      </button>
+    </div>
+  );
+}

src/Components/Common/prescription-builder/assets/vaccines.json

@@ -0,0 +1,9 @@
+[
+    "CoviShield",
+    "Covaxin",
+    "Sputnik",
+    "Moderna",
+    "Pfizer",
+    "Janssen",
+    "Sinovac"
+]

src/Components/Facility/ConsultationDetails.tsx

@@ -529,22 +529,20 @@ export const ConsultationDetails = (props: any) => {
 
             <div className="flex px-4 flex-col-reverse lg:flex-row gap-2">
               <div className="flex flex-col w-3/4 h-full">
-                {/*consultationData.other_symptoms && (
-                  <div className="capitalize">
-                    <span className="font-semibold leading-relaxed">
-                      Other Symptoms:{" "}
-                    </span>
-                    {consultationData.other_symptoms}
-                  </div>
-                )*/}
-
+                {/* consultationData.other_symptoms && (
+                <div className="capitalize">
+                  <span className="font-semibold leading-relaxed">
+                    Other Symptoms:{" "}
+                  </span>
+                  {consultationData.other_symptoms}
+                </div>
+                ) */}
                 <ShowDiagnosis
                   diagnoses={
                     consultationData?.icd11_provisional_diagnoses_object
                   }
                   label="Provisional Diagnosis"
                 />
-
                 <ShowDiagnosis
                   diagnoses={[
                     ...(consultationData?.diagnosis
@@ -560,7 +558,14 @@ export const ConsultationDetails = (props: any) => {
                   ]}
                   label="Diagnosis"
                 />
-
+                {consultationData?.health_details_object?.allergies && (
+                  <div className="capitalize">
+                    <span className="font-semibold leading-relaxed">
+                      Allergies:{" "}
+                    </span>
+                    {consultationData?.health_details_object?.allergies}
+                  </div>
+                )}
                 {consultationData.verified_by && (
                   <div className="text-sm mt-2">
                     <span className="font-semibold leading-relaxed">