Fixed Multi-selection functionality.

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>
                 )}
               </>
             )}