Fixed Multi-selection functionality.

package.json

@@ -60,10 +60,10 @@
     "@pnotify/mobile": "^5.2.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.4",

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

@@ -53,42 +53,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 +107,10 @@ const InvestigationReports = ({ id }: any) => {
     selectedInvestigations,
   } = state as InitialState;
 
+  const clearSelectedInvestigations = () => {
+    dispatch({ type: "set_selected_investigations", payload: [] });
+  };
+
   const fetchInvestigationsData = useCallback(
     async (
       onSuccess: (
@@ -344,23 +342,33 @@ 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">
+                <ButtonV2
+                  onClick={() => {
+                    setSessionPage(1);
+                    handleGenerateReports(1);
+                  }}
+                  disabled={generateReportDisabled}
+                  variant="primary"
+                  className="my-2.5"
+                >
+                  {t("generate_report")}
+                </ButtonV2>
+                <ButtonV2
+                  onClick={clearSelectedInvestigations}
+                  disabled={!selectedInvestigations.length}
+                  variant="secondary"
+                  className="my-2.5"
+                >
+                  {t("clear")}
+                </ButtonV2>
+              </div>
             </>
           )}
           {isLoading.tableData && (