updates

ohcnetwork · Jul 10, 2024 · 53225e7 · 53225e7
1 parent 26557d0
commit 53225e7
Show file tree

Hide file tree

Showing 19 changed files with 832 additions and 176 deletions.
diff --git a/src/CAREUI/display/PopUpModal.tsx b/src/CAREUI/display/PopUpModal.tsx
@@ -1,21 +1,24 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
+import ButtonV2 from "../../Components/Common/components/ButtonV2";
 
 export default function PopupModal(props: {
     show: boolean,
     onHide: () => void,
     children: ReactNode
-    title?: string,
-    className?: string
+    className?: string,
+    onSubmit?: () => void
 }) {
 
-    const { show, onHide, children, title, className } = props;
+    const { show, onHide, children, className, onSubmit } = props;
 
     const [position, setPosition] = useState({ x: 0, y: 0 });
     const modal = useRef<HTMLDivElement>(null);
 
     const handleClick = (e: MouseEvent) => {
-        if (modal.current && (modal.current?.contains(e.target as Node) || e.target === modal.current)) {
-            //onHide();
+        console.log(!modal.current?.contains(e.target as Node), show)
+        if (!modal.current?.contains(e.target as Node) && show && e.target !== modal.current) {
+            console.log("Hiding")
+            onHide();
         } else {
             const currentMousePosition = { x: e.clientX, y: e.clientY };
             const modalHeight = modal.current?.clientHeight || 0;
@@ -31,21 +34,39 @@ export default function PopupModal(props: {
     }
 
     useEffect(() => {
-        window.addEventListener("click", handleClick);
+        window.addEventListener("mousedown", e => handleClick(e));
         return () => {
-            window.removeEventListener("click", handleClick);
+            window.removeEventListener("mousedown", e => handleClick(e));
         }
     }, [])
+
     return (
         <div
             ref={modal}
             style={{
                 top: position.y + "px",
                 left: position.x + "px"
             }}
-            className={`z-[1000] absolute backdrop-blur-2xl text-white/90 bg-black/30 border border-black/20 text-white rounded-lg transition-all ${show ? "opacity-100 visible" : "opacity-0 invisible"} ${className}`}
+            className={`z-[1000] absolute text-black bg-white border border-black/10 rounded-lg transition-all ${show ? "opacity-100 visible" : "opacity-0 invisible"} ${className} overflow-hidden`}
         >
             {children}
+            {onSubmit && (
+                <div className="bg-black/10 p-2 w-full flex items-center justify-end gap-2 border-t border-t-black/10">
+                    <ButtonV2
+                        variant="secondary"
+                        onClick={onHide}
+                        className="bg-white/40 hover:bg-white/60"
+                    >
+                        Close
+                    </ButtonV2>
+                    <ButtonV2
+                        variant="primary"
+                        onClick={onSubmit}
+                    >
+                        Save
+                    </ButtonV2>
+                </div>
+            )}
         </div>
     )
 }
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -207,11 +207,11 @@ export const getBedTypes = ({
 }: Pick<IConfig, "kasp_enabled" | "kasp_string">) => {
   const kaspBedTypes = kasp_enabled
     ? [
-        { id: 40, text: kasp_string + " Ordinary Beds" },
-        { id: 60, text: kasp_string + " Oxygen beds" },
-        { id: 50, text: kasp_string + " ICU (ICU without ventilator)" },
-        { id: 70, text: kasp_string + " ICU (ICU with ventilator)" },
-      ]
+      { id: 40, text: kasp_string + " Ordinary Beds" },
+      { id: 60, text: kasp_string + " Oxygen beds" },
+      { id: 50, text: kasp_string + " ICU (ICU without ventilator)" },
+      { id: 70, text: kasp_string + " ICU (ICU with ventilator)" },
+    ]
     : [];
 
   return [
@@ -341,6 +341,43 @@ export const CONSCIOUSNESS_LEVEL = [
   },
 ] as const;
 
+export const REACTION_OPTIONS = [
+  { id: 0, value: "UNKNOWN", text: "Unknown" },
+  { id: 5, value: "BRISK", text: "Brisk" },
+  { id: 10, value: "SLUGGISH", text: "Sluggish" },
+  { id: 15, value: "FIXED", text: "Fixed" },
+  { id: 20, value: "CANNOT_BE_ASSESSED", text: "Cannot Be Assessed" },
+];
+
+export const LIMB_RESPONSE_OPTIONS = [
+  { id: 0, value: "UNKNOWN", text: "Unknown" },
+  { id: 5, value: "STRONG", text: "Strong" },
+  { id: 10, value: "MODERATE", text: "Moderate" },
+  { id: 15, value: "WEAK", text: "Weak" },
+  { id: 20, value: "Flexion", text: "Flexion" },
+  { id: 25, value: "Extension", text: "Extension" },
+  { id: 30, value: "None", text: "None" },
+];
+
+export const YES_NO_OPTIONS = [
+  { id: 1, text: "Yes", value: true },
+  { id: 0, text: "No", value: false },
+];
+
+export const RESPIRATORY_SUPPORT_OPTIONS = [
+  { id: 0, text: "None", value: "UNKNOWN" },
+  { id: 1, text: "Invasive ventilator (IV)", value: "INVASIVE" },
+  { id: 2, text: "Non-Invasive ventilator (NIV)", value: "NON_INVASIVE" },
+  { id: 3, text: "Oxygen Support", value: "OXYGEN_SUPPORT" },
+]
+
+export const INSULIN_INTAKE_FREQUENCY_OPTIONS = [
+  { id: 0, text: "Unknown", value: "UNKNOWN" },
+  { id: 1, text: "Once a day (OD)", value: "OD" },
+  { id: 2, text: "Twice a day (BD)", value: "BD" },
+  { id: 3, text: "Thrice a day (TD)", value: "TD" },
+]
+
 export const LINES_CATHETER_CHOICES: Array<OptionsType> = [
   { id: 1, text: "CVP catheter " },
   { id: 2, text: "Arterial Line" },
@@ -398,11 +435,11 @@ export const PATIENT_CATEGORIES: {
   text: PatientCategory;
   twClass: string;
 }[] = [
-  { id: "Comfort", text: "Comfort Care", twClass: "patient-comfort" },
-  { id: "Stable", text: "Mild", twClass: "patient-stable" },
-  { id: "Moderate", text: "Moderate", twClass: "patient-abnormal" },
-  { id: "Critical", text: "Critical", twClass: "patient-critical" },
-];
+    { id: "Comfort", text: "Comfort Care", twClass: "patient-comfort" },
+    { id: "Stable", text: "Mild", twClass: "patient-stable" },
+    { id: "Moderate", text: "Moderate", twClass: "patient-abnormal" },
+    { id: "Critical", text: "Critical", twClass: "patient-critical" },
+  ];
 
 export const PATIENT_FILTER_CATEGORIES = PATIENT_CATEGORIES;
 
@@ -840,37 +877,37 @@ export const FACILITY_FEATURE_TYPES: {
   name: string;
   icon: IconName;
 }[] = [
-  {
-    id: 1,
-    name: "CT Scan",
-    icon: "l-compact-disc",
-  },
-  {
-    id: 2,
-    name: "Maternity Care",
-    icon: "l-baby-carriage",
-  },
-  {
-    id: 3,
-    name: "X-Ray",
-    icon: "l-clipboard-alt",
-  },
-  {
-    id: 4,
-    name: "Neonatal Care",
-    icon: "l-baby-carriage",
-  },
-  {
-    id: 5,
-    name: "Operation Theater",
-    icon: "l-syringe",
-  },
-  {
-    id: 6,
-    name: "Blood Bank",
-    icon: "l-medical-drip",
-  },
-];
+    {
+      id: 1,
+      name: "CT Scan",
+      icon: "l-compact-disc",
+    },
+    {
+      id: 2,
+      name: "Maternity Care",
+      icon: "l-baby-carriage",
+    },
+    {
+      id: 3,
+      name: "X-Ray",
+      icon: "l-clipboard-alt",
+    },
+    {
+      id: 4,
+      name: "Neonatal Care",
+      icon: "l-baby-carriage",
+    },
+    {
+      id: 5,
+      name: "Operation Theater",
+      icon: "l-syringe",
+    },
+    {
+      id: 6,
+      name: "Blood Bank",
+      icon: "l-medical-drip",
+    },
+  ];
 
 export const WAVEFORM_VIEWABLE_LENGTH = 400;
 

diff --git a/src/Components/Common/components/CheckBox.tsx b/src/Components/Common/components/CheckBox.tsx
@@ -10,19 +10,31 @@ interface Props {
 }
 
 export default function Checkbox(props: Props) {
+
+  const randId = Math.random().toString(36).substring(7);
+
+  const id = props.id || randId;
+
   return (
-    <div className={props.className} id={props.id}>
-      <div className="flex gap-4 py-2">
-        <input
-          className="rounded-none focus:outline-none focus:ring-0 focus:ring-offset-0"
-          type="checkbox"
-          name={props.name}
-          checked={props.checked}
-          required={props.required}
-          onChange={(event) => props.onCheck(event.target.checked)}
-        />
-        <label htmlFor={props.name}>{props.label}</label>
-      </div>
+    <div className={props.className} >
+      <input
+        className="hidden checkbox__input"
+        type="checkbox"
+        name={props.name}
+        checked={props.checked}
+        required={props.required}
+        onChange={(event) => props.onCheck(event.target.checked)}
+        id={id}
+      />
+      <label className="checkbox__label flex items-center" htmlFor={id}>
+        <span>
+          <svg width="11px" height="11px" viewBox="0 0 13 13">
+            <polyline points="1.5 6 4.5 9 10.5 1" />
+          </svg>
+        </span>
+        <span className="text-sm flex-1 font-semibold leading-loose"> {props.label} </span>
+      </label>
+
     </div>
   );
 }
diff --git a/src/Components/Common/components/Hr.tsx b/src/Components/Common/components/Hr.tsx
@@ -0,0 +1,8 @@
+export default function Hr(props: {
+    className?: string
+}) {
+
+    const { className } = props;
+
+    return <hr className={`border border-gray-400 my-8 ${className}`} />
+}
diff --git a/src/Components/Form/FormFields/RadioFormField.tsx b/src/Components/Form/FormFields/RadioFormField.tsx
@@ -2,7 +2,7 @@ import FormField from "./FormField";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 
 type Props<T> = FormFieldBaseProps<string | null> & {
-  options: T[];
+  options: T[] | readonly T[];
   optionDisplay: (option: T) => React.ReactNode;
   optionValue: (option: T) => string;
   containerClassName?: string;
@@ -13,7 +13,7 @@ const RadioFormField = <T,>(props: Props<T>) => {
   const field = useFormFieldPropsResolver(props);
   return (
     <FormField field={field}>
-      <div className={props.containerClassName || "flex gap-4 p-4"}>
+      <div className={props.containerClassName || "flex gap-4"}>
         {props.unselectLabel && (
           <div className="flex items-center gap-2">
             <input
@@ -34,15 +34,22 @@ const RadioFormField = <T,>(props: Props<T>) => {
           return (
             <div className="flex items-center gap-2">
               <input
-                className="h-4 w-4 rounded-full border-gray-600 text-primary-600 focus:ring-2 focus:ring-primary-500"
+                className="hidden radio-input"
                 type="radio"
                 id={optionId}
                 name={props.name}
                 value={props.optionValue(option)}
                 checked={value === field.value}
                 onChange={(e) => field.handleChange(e.target.value)}
               />
-              <label htmlFor={optionId}>{props.optionDisplay(option)}</label>
+              <label className="radio-label flex items-center" htmlFor={optionId}>
+                <span>
+                  <svg width="14px" height="14px" viewBox="0 0 14 14">
+                    <circle cx="8" cy="8" r="3" fill="white" />
+                  </svg>
+                </span>
+                <span className="text-sm flex-1 font-semibold leading-loose"> {props.optionDisplay(option)} </span>
+              </label>
             </div>
           );
         })}

diff --git a/src/Components/Form/FormFields/RangeFormField.tsx b/src/Components/Form/FormFields/RangeFormField.tsx
@@ -84,12 +84,26 @@ export default function RangeFormField(props: RangeFormFieldProps) {
                 onChange={(e) => onChange(e.target.valueAsNumber)}
             />
             <div className="flex justify-between">
-                {Array(5).map((_, index) => (
+                <div
+                    className="w-[1px] h-2 bg-transparent"
+                />
+                {Array.from({ length: Math.ceil(((end || 0) - (start || 0)) / (props.step || 1)) - 1 }).map((_, index) => (
                     <div
                         key={index}
-                        className="w-1 h-4 bg-gray-300"
+                        className="w-[1px] h-2 bg-black/20"
                     />
                 ))}
+                <div
+                    className="w-[1px] h-2 bg-transparent"
+                />
+            </div>
+            <div className="flex justify-between">
+                <span className=" text-xs text-black/30">
+                    {start}
+                </span>
+                <span className="text-xs text-black/30">
+                    {end}
+                </span>
             </div>
         </FormField>
     );