Fixed Multi-selection functionality.

cypress/e2e/patient_spec/PatientInvestigation.cy.ts

@@ -21,17 +21,48 @@ describe("Patient Investigation Creation from Patient consultation page", () =>
   });
 
   it("Create a investigation for a patient and verify its reflection", () => {
+    // Add retry-ability for network requests
+    cy.intercept("GET", "**/patients/**").as("patientLoad");
+    cy.intercept("GET", "**/investigations/**").as("investigationsLoad");
+
+    // Visit patient and wait for page load
     patientPage.visitPatient(patientName);
+    cy.wait("@patientLoad");
+
+    // Add small delay to ensure page is stable
+    cy.wait(1000);
+
+    // Click investigation tab and verify content loads
     patientInvestigation.clickInvestigationTab();
+    cy.wait("@investigationsLoad");
+
+    // Verify investigation tab is active
+    patientInvestigation.verifyPageLoaded();
+
+    // Continue with test
     patientInvestigation.clickLogLabResults();
+
+    // Add verification before selecting options
+    cy.get("#investigations").should("exist").and("be.visible");
+
     patientInvestigation.selectInvestigationOption([
       "Haematology",
       "Urine Test",
     ]);
+
+    // Verify save button exists before clicking
+    cy.get("button")
+      .contains("Save Investigation")
+      .should("exist")
+      .and("be.visible");
+
     cy.clickSubmitButton("Save Investigation");
-    cy.verifyNotification("Please Enter at least one value");
+
+    // Verify notification with timeout
+    cy.verifyNotification("Please Enter at least one value", {
+      timeout: 10000,
+    });
     cy.closeNotification();
-    // Temporary workflow for investigation since we dont have dummy data and moving away from existing module
   });
 
   afterEach(() => {

cypress/pageobject/Patient/PatientInvestigation.ts

@@ -1,33 +1,79 @@
 class PatientInvestigation {
   clickAddInvestigation() {
-    cy.verifyAndClickElement("#investigation", "Add Investigation");
+    cy.get("#investigation")
+      .should("exist")
+      .and("be.visible")
+      .contains("Add Investigation")
+      .click();
   }
 
   clickInvestigationTab() {
-    cy.verifyAndClickElement("#consultation_tab_nav", "Investigations");
+    cy.intercept("GET", "**/investigations/**").as("investigationsLoad");
+
+    cy.get("#consultation_tab_nav")
+      .should("exist")
+      .and("be.visible")
+      .contains("Investigations")
+      .click();
+
+    cy.wait("@investigationsLoad", { timeout: 10000 });
+
+    cy.get("#investigations").should("exist").and("be.visible");
   }
 
   selectInvestigation(investigation: string) {
-    cy.get("#search-patient-investigation").type(investigation);
-    cy.verifyAndClickElement("#investigation-group", investigation);
-    cy.verifyAndClickElement("#investigation", "Investigation No. 1");
+    cy.get("#search-patient-investigation")
+      .should("exist")
+      .and("be.visible")
+      .clear()
+      .type(investigation, { delay: 100 });
+
+    cy.get("#investigation-group")
+      .should("exist")
+      .and("be.visible")
+      .contains(investigation)
+      .click();
+
+    cy.get("#investigation")
+      .should("exist")
+      .and("be.visible")
+      .contains("Investigation No. 1")
+      .click();
   }
 
   clickInvestigationCheckbox() {
-    cy.get("#investigation-checkbox").click();
+    cy.get("#investigation-checkbox").should("exist").and("be.visible").click();
   }
 
   selectInvestigationOption(options: string[]) {
-    cy.clickAndMultiSelectOption("#investigations", options);
+    cy.get("#investigations")
+      .should("exist")
+      .and("be.visible")
+      .then(() => {
+        cy.clickAndMultiSelectOption("#investigations", options);
+      });
   }
 
   clickLogLabResults() {
-    cy.verifyAndClickElement("#log-lab-results", "Log Lab Results");
+    cy.get("#log-lab-results")
+      .should("exist")
+      .and("be.visible")
+      .contains("Log Lab Results")
+      .click();
   }
 
   selectInvestigationFrequency(frequency: string) {
-    cy.get("#investigation-frequency").click();
-    cy.contains("button", frequency).should("be.visible").click();
+    cy.get("#investigation-frequency")
+      .should("exist")
+      .and("be.visible")
+      .click();
+
+    cy.contains("button", frequency).should("exist").and("be.visible").click();
+  }
+
+  verifyPageLoaded() {
+    return cy.get("#investigations").should("exist").and("be.visible");
   }
 }
+
 export default PatientInvestigation;

src/components/Facility/Investigations/Reports/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import { Button } from "@/components/ui/button";
+
 import CircularProgress from "@/components/Common/CircularProgress";
 import Loading from "@/components/Common/Loading";
 import Page from "@/components/Common/Page";
@@ -53,42 +54,36 @@ const initialState: InitialState = {
 
 const investigationReportsReducer = (state = initialState, action: any) => {
   switch (action.type) {
-    case "set_investigation_groups": {
+    case "set_investigation_groups":
       return {
         ...state,
         investigationGroups: action.payload,
       };
-    }
-    case "set_selected_group": {
+    case "set_selected_group":
       return {
         ...state,
         selectedGroup: action.payload,
       };
-    }
-    case "set_investigations": {
+    case "set_investigations":
       return {
         ...state,
         investigations: action.payload,
       };
-    }
-    case "set_selected_investigations": {
+    case "set_selected_investigations":
       return {
         ...state,
         selectedInvestigations: action.payload,
       };
-    }
-    case "set_investigation_table_data": {
+    case "set_investigation_table_data":
       return {
         ...state,
         investigationTableData: action.payload,
       };
-    }
-    case "set_loading": {
+    case "set_loading":
       return {
         ...state,
         isLoading: action.payload,
       };
-    }
     default:
       return state;
   }
@@ -113,6 +108,10 @@ const InvestigationReports = ({ id }: any) => {
     selectedInvestigations,
   } = state as InitialState;
 
+  const clearSelectedInvestigations = () => {
+    dispatch({ type: "set_selected_investigations", payload: [] });
+  };
+
   const fetchInvestigationsData = useCallback(
     async (
       onSuccess: (
@@ -314,14 +313,13 @@ const InvestigationReports = ({ id }: any) => {
             />
           </div>
           {!isLoading.investigationLoading && (
-            <ButtonV2
+            <Button
               onClick={() => fetchInvestigation()}
               disabled={getTestDisabled}
               variant="primary"
-              className="my-2.5"
             >
               {t("get_tests")}
-            </ButtonV2>
+            </Button>
           )}
           {!!isLoading.investigationLoading && (
             <CircularProgress className="text-primary-500" />
@@ -342,23 +340,31 @@ const InvestigationReports = ({ id }: any) => {
                     })
                   }
                   optionLabel={(option) => option.name}
-                  optionValue={(option) => option}
+                  optionValue={(option) => option.external_id}
                   isLoading={isLoading.investigationLoading}
                   placeholder={t("select_investigations")}
+                  selectAll={true}
                 />
               </div>
-
-              <ButtonV2
-                onClick={() => {
-                  setSessionPage(1);
-                  handleGenerateReports(1);
-                }}
-                disabled={generateReportDisabled}
-                variant="primary"
-                className="my-2.5"
-              >
-                {t("generate_report")}
-              </ButtonV2>
+              <div className="flex space-x-2">
+                <Button
+                  onClick={() => {
+                    setSessionPage(1);
+                    handleGenerateReports(1);
+                  }}
+                  disabled={generateReportDisabled}
+                  variant="primary"
+                >
+                  {t("generate_report")}
+                </Button>
+                <Button
+                  onClick={clearSelectedInvestigations}
+                  disabled={!selectedInvestigations.length}
+                  variant="secondary"
+                >
+                  {t("clear")}
+                </Button>
+              </div>
             </>
           )}
           {isLoading.tableData && (
@@ -370,19 +376,19 @@ const InvestigationReports = ({ id }: any) => {
             {!!investigationTableData.length && (
               <>
                 <div className="my-2.5">
-                  <ButtonV2
+                  <Button
                     onClick={() => handleSessionPage("NEXT")}
                     disabled={prevSessionDisabled}
                   >
                     {isLoading.tableData ? "Loading..." : t("next_sessions")}
-                  </ButtonV2>
-                  <ButtonV2
+                  </Button>
+                  <Button
                     onClick={() => handleSessionPage("PREV")}
                     disabled={nextSessionDisabled}
                     className="ml-3"
                   >
                     {isLoading.tableData ? "Loading..." : t("prev_sessions")}
-                  </ButtonV2>
+                  </Button>
                 </div>
 
                 <ReportTable
@@ -396,14 +402,13 @@ const InvestigationReports = ({ id }: any) => {
                 />
 
                 {!loadMoreDisabled && (
-                  <ButtonV2
+                  <Button
                     disabled={loadMoreDisabled}
                     onClick={handleLoadMore}
-                    className="my-2.5 w-full"
                     variant="primary"
                   >
                     {t("load_more")}
-                  </ButtonV2>
+                  </Button>
                 )}
               </>
             )}