Merge branch 'develop' into cypress-parallel

.envrc

@@ -0,0 +1 @@
+test -f .env.local && dotenv .env.local

.github/workflows/cypress.yaml

@@ -39,9 +39,6 @@ jobs:
       - name: Check care is up ♻
         run: curl -o /dev/null -s -w "%{http_code}\n" http://localhost:9000
 
-      - name: Change api proxy url 📝
-        run: 'sed --in-place "s^target: .*,^target: \"http://localhost:9000\",^g" vite.config.ts'
-
       - name: Install dependencies 📦
         run: npm install
 
@@ -59,6 +56,7 @@ jobs:
           browser: chrome
           record: true
         env:
+          CARE_API: http://localhost:9000
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_OPTIONS: --max_old_space_size=4096

cypress/e2e/patient_spec/patient_crud.cy.ts

@@ -28,7 +28,7 @@ describe("Patient Creation with consultation", () => {
     cy.get("#add-patient-details").should("be.visible");
     cy.get("#add-patient-details").click();
     cy.get("input[name='facilities']")
-      .type("cypress facility")
+      .type("dummy facility")
       .then(() => {
         cy.get("[role='option']").first().click();
       });

src/CAREUI/interactive/Switch.tsx

@@ -0,0 +1,39 @@
+import { classNames } from "../../Utils/utils";
+
+interface Props<T extends string> {
+  tabs: Record<T, string>;
+  selected: T;
+  onChange: (tab: T) => void;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function Switch<T extends string>({
+  size = "sm",
+  ...props
+}: Props<T>) {
+  return (
+    <ul role="list" className="flex">
+      {Object.keys(props.tabs).map((tab) => {
+        return (
+          <li
+            key={tab}
+            tabIndex={0}
+            className={classNames(
+              "cursor-pointer select-none border shadow-sm outline-none transition-all duration-200 ease-in-out first:rounded-l last:rounded-r focus:ring-1",
+              size === "sm" && "px-2 py-1 text-xs",
+              size === "md" && "px-3 py-2 text-sm",
+              size === undefined && "px-3 py-2 text-sm",
+              size === "lg" && "px-4 py-3 text-base",
+              props.selected === tab
+                ? "border-primary-500 bg-primary-500 font-semibold text-white hover:bg-primary-600 focus:border-primary-500 focus:ring-primary-500"
+                : "border-gray-400 bg-gray-50 hover:bg-gray-200 focus:border-primary-500 focus:ring-primary-500"
+            )}
+            onClick={() => props.onChange(tab as T)}
+          >
+            {props.tabs[tab as T]}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src/Components/ExternalResult/ExternalResultUpload.tsx

@@ -8,6 +8,8 @@ import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 const PageTitle = lazy(() => import("../Common/PageTitle"));
 import { useTranslation } from "react-i18next";
+import { Cancel, Submit } from "../Common/components/ButtonV2";
+import useAppHistory from "../../Common/hooks/useAppHistory";
 
 export default function ExternalResultUpload() {
   const { sample_format_external_result_import } = useConfig();
@@ -20,6 +22,7 @@ export default function ExternalResultUpload() {
     setCsvData(data);
   };
   const { t } = useTranslation();
+  const { goBack } = useAppHistory();
 
   const papaparseOptions = {
     header: true,
@@ -67,11 +70,11 @@ export default function ExternalResultUpload() {
         backUrl="/external_results"
         className="mt-4"
       />
-      <div className="mx-auto mt-6 max-w-3xl">
-        <div className="py-4">
+      <div className="mx-auto mt-6 flex max-w-3xl justify-center">
+        <div className="py-4 md:w-[500px]">
           <div className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
             <div className="my-2 sm:col-span-2 sm:mt-0">
-              <div className="mx-auto flex max-w-lg flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
+              <div className="mx-auto flex flex-col justify-center rounded-md border-2 border-dashed border-gray-300 pb-6 pt-5 text-center">
                 <span className="flex justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -131,14 +134,14 @@ export default function ExternalResultUpload() {
             })}
           </div>
           <div className=""></div>
-          <div className="mt-2 text-center">
-            <button
-              disabled={loading}
-              className="btn btn-primary mx-auto block"
+          <div className="mt-2 flex flex-col justify-end gap-2 text-center md:flex-row">
+            <Cancel onClick={() => goBack()} />
+            <Submit
               onClick={handleSubmit}
-            >
-              {t("save")}
-            </button>
+              disabled={loading}
+              label={t("save")}
+              data-testid="submit-button"
+            />
           </div>
         </div>
       </div>

src/Components/Facility/ConsultationForm.tsx

@@ -198,7 +198,8 @@ const consultationFormReducer = (state = initialState, action: FormAction) => {
 type ConsultationFormSection =
   | "Consultation Details"
   | "Diagnosis"
-  | "Treatment Plan";
+  | "Treatment Plan"
+  | "Bed Status";
 
 export const ConsultationForm = (props: any) => {
   const { goBack } = useAppHistory();
@@ -223,6 +224,7 @@ export const ConsultationForm = (props: any) => {
   const [consultationDetailsVisible, consultationDetailsRef] = useVisibility();
   const [diagnosisVisible, diagnosisRef] = useVisibility(-300);
   const [treatmentPlanVisible, treatmentPlanRef] = useVisibility(-300);
+  const [bedStatusVisible, bedStatusRef] = useVisibility(-300);
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
 
   const sections = {
@@ -241,16 +243,27 @@ export const ConsultationForm = (props: any) => {
       visible: treatmentPlanVisible,
       ref: treatmentPlanRef,
     },
+    "Bed Status": {
+      iconClass: "care-l-bed",
+      visible: bedStatusVisible,
+      ref: bedStatusRef,
+    },
   };
 
   useEffect(() => {
     setCurrentSection((prev) => {
       if (consultationDetailsVisible) return "Consultation Details";
       if (diagnosisVisible) return "Diagnosis";
       if (treatmentPlanVisible) return "Treatment Plan";
+      if (bedStatusVisible) return "Bed Status";
       return prev;
     });
-  }, [consultationDetailsVisible, diagnosisVisible, treatmentPlanVisible]);
+  }, [
+    consultationDetailsVisible,
+    diagnosisVisible,
+    treatmentPlanVisible,
+    bedStatusVisible,
+  ]);
 
   useEffect(() => {
     async function fetchPatientName() {
@@ -817,6 +830,9 @@ export const ConsultationForm = (props: any) => {
             if (state.form.consultation_status === 1) {
               return null;
             }
+            if (!isUpdate && sectionTitle === "Bed Status") {
+              return null;
+            }
             const isCurrent = currentSection === sectionTitle;
             const section = sections[sectionTitle as ConsultationFormSection];
             return (
@@ -1306,7 +1322,7 @@ export const ConsultationForm = (props: any) => {
             {isUpdate && (
               <>
                 <div className="mx-auto mt-4 max-w-4xl rounded bg-white px-11 py-8">
-                  <h4>Update Bed</h4>
+                  {sectionTitle("Bed Status")}
                   <Beds
                     facilityId={facilityId}
                     patientId={patientId}

src/Components/Facility/TriageForm.tsx

@@ -283,20 +283,20 @@ export const TriageForm = (props: triageFormProps) => {
                 handleSubmit();
               }}
             >
-              <div className="max-w-[250px] pb-4">
-                <DateFormField
-                  required
-                  name="entry_date"
-                  label="Entry Date"
-                  value={state.form.entry_date}
-                  disableFuture
-                  onChange={handleFormFieldChange}
-                  position="LEFT"
-                  placeholder="Entry Date"
-                  error={state.errors.entry_date}
-                />
-              </div>
               <div className="mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div className="pb-4">
+                  <DateFormField
+                    required
+                    name="entry_date"
+                    label="Entry Date"
+                    value={state.form.entry_date}
+                    disableFuture
+                    onChange={handleFormFieldChange}
+                    position="LEFT"
+                    placeholder="Entry Date"
+                    error={state.errors.entry_date}
+                  />
+                </div>
                 <div>
                   <TextFormField
                     name="num_patients_visited"
@@ -348,7 +348,7 @@ export const TriageForm = (props: triageFormProps) => {
                   />
                 </div>
               </div>
-              <div className="mt-4 flex flex-col justify-between gap-2 md:flex-row">
+              <div className="mt-4 flex flex-col justify-end gap-2 md:flex-row">
                 <Cancel onClick={() => goBack()} />
                 <Submit label={buttonText} />
               </div>

src/Components/Form/FormFields/CheckBoxFormField.tsx

@@ -14,6 +14,7 @@ export default function CheckBoxFormField(props: FormFieldBaseProps<boolean>) {
           name={field.name}
           checked={field.value}
           onChange={(e) => field.handleChange(e.target.checked)}
+          disabled={field.disabled}
         />
         <FieldLabel
           htmlFor={field.id}

src/Components/Medicine/AdministerMedicine.tsx

@@ -9,6 +9,9 @@ import PrescriptionDetailCard from "./PrescriptionDetailCard";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { formatDateTime } from "../../Utils/utils";
 import { useTranslation } from "react-i18next";
+import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
+import TextFormField from "../Form/FormFields/TextFormField";
+import dayjs from "../../Utils/dayjs";
 
 interface Props {
   prescription: Prescription;
@@ -21,6 +24,10 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
   const dispatch = useDispatch<any>();
   const [isLoading, setIsLoading] = useState(false);
   const [notes, setNotes] = useState<string>("");
+  const [isCustomTime, setIsCustomTime] = useState(false);
+  const [customTime, setCustomTime] = useState<string>(
+    dayjs().format("YYYY-MM-DDTHH:mm")
+  );
 
   return (
     <ConfirmDialog
@@ -43,10 +50,14 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
       }
       show
       onClose={() => props.onClose(false)}
-      // variant="primary"
       onConfirm={async () => {
         setIsLoading(true);
-        const res = await dispatch(props.actions.administer({ notes }));
+        const res = await dispatch(
+          props.actions.administer({
+            notes,
+            administered_date: isCustomTime ? customTime : undefined,
+          })
+        );
         if (res.status === 201) {
           Success({ msg: t("medicines_administered") });
         }
@@ -61,15 +72,43 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
           readonly
           actions={props.actions}
         />
-        <TextAreaFormField
-          label={t("administration_notes")}
-          name="administration_notes"
-          placeholder={t("add_notes")}
-          value={notes}
-          onChange={({ value }) => setNotes(value)}
-          errorClassName="hidden"
-          disabled={isLoading}
-        />
+
+        <div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
+          <TextAreaFormField
+            label={t("administration_notes")}
+            className="w-full"
+            name="administration_notes"
+            placeholder={t("add_notes")}
+            value={notes}
+            onChange={({ value }) => setNotes(value)}
+            errorClassName="hidden"
+            disabled={isLoading}
+          />
+          <div className="flex flex-col gap-2 lg:max-w-min">
+            <CheckBoxFormField
+              label="Administer for a time in the past"
+              labelClassName="whitespace-nowrap"
+              name="is_custom_time"
+              value={isCustomTime}
+              onChange={({ value }) => {
+                setIsCustomTime(value);
+                if (!value) {
+                  setCustomTime(dayjs().format("YYYY-MM-DDTHH:mm"));
+                }
+              }}
+              errorClassName="hidden"
+            />
+            <TextFormField
+              name="administered_date"
+              type="datetime-local"
+              value={customTime}
+              onChange={({ value }) => setCustomTime(value)}
+              disabled={!isCustomTime}
+              min={dayjs(prescription.created_date).format("YYYY-MM-DDTHH:mm")}
+              max={dayjs().format("YYYY-MM-DDTHH:mm")}
+            />
+          </div>
+        </div>
       </div>
     </ConfirmDialog>
   );

src/Components/Medicine/MedibaseAutocompleteFormField.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+import Switch from "../../CAREUI/interactive/Switch";
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 import { listMedibaseMedicines } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
@@ -15,8 +17,32 @@ export default function MedibaseAutocompleteFormField(
   const { isLoading, options, fetchOptions } =
     useAsyncOptions<MedibaseMedicine>("id");
 
+  const [query, setQuery] = useState("");
+  const [type, setType] = useState<MedibaseMedicine["type"]>();
+
+  useEffect(() => {
+    fetchOptions(listMedibaseMedicines(query, type));
+  }, [query, type]);
+
   return (
-    <FormField field={field}>
+    <FormField
+      field={{
+        ...field,
+        labelSuffix: (
+          <Switch
+            tabs={{
+              all: "All",
+              brand: "Brand",
+              generic: "Generic",
+            }}
+            selected={type ?? "all"}
+            onChange={(type) => {
+              setType(type === "all" ? undefined : type);
+            }}
+          />
+        ),
+      }}
+    >
       <Autocomplete
         id={field.id}
         disabled={field.disabled}
@@ -34,7 +60,7 @@ export default function MedibaseAutocompleteFormField(
             <OptionChip value={option.type} />
           )
         }
-        onQuery={(query) => fetchOptions(listMedibaseMedicines(query))}
+        onQuery={setQuery}
         isLoading={isLoading}
       />
     </FormField>