Feature/add new filter report

src/core/components/DataTable/Main.js

@@ -113,7 +113,7 @@ const DataTable_Main = (props) => {
             ...initialStateProps,
         },
         state: {
-            showProgressBars: isValidating,
+            showProgressBars: isValidating || props.loading,
             columnVisibility: flattenHideData,
             sorting: sortData,
             pagination,
@@ -171,6 +171,8 @@ const DataTable_Main = (props) => {
             page_name={page_name}
             table_name={table_name}
             special_data={props.data}
+            special_filter={specialFilter}
+            setFilterData={props.setFilterData}
         />
     );
 };

src/core/components/DataTable/filter/FilterCustom.jsx

@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+import FilterButton from "./FilterButton";
+import { Box, Drawer } from "@mui/material";
+import FilterDrawer from "../../FilterDrawer";
+
+const FilterCustom = ({ filterData, setFilterData }) => {
+    const [open, setOpen] = useState(false);
+
+    const closeDrawer = useCallback(() => setOpen(false), []);
+
+    return (
+        <>
+            <FilterButton drawerState={open} setDrawerState={setOpen} />
+            <Drawer
+                open={open}
+                onClose={() => setOpen(false)}
+                sx={{ overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%", zIndex: "1300" }}
+            >
+                <Box sx={{ width: { xs: 300, sm: 450 } }}>
+                    {open && (
+                        <FilterDrawer
+                            defaultValues={filterData}
+                            setFilterData={setFilterData}
+                            closeDrawer={closeDrawer}
+                        />
+                    )}
+                </Box>
+            </Drawer>
+        </>
+    );
+};
+export default FilterCustom;

src/core/components/DataTable/table/Paper.js

@@ -14,6 +14,7 @@ const DataTable_Paper = ({
     need_filter,
     table_url,
     table_title,
+    setFilterData,
     ...rest
 }) => {
     const {
@@ -86,6 +87,7 @@ const DataTable_Paper = ({
                         page_name={page_name}
                         table_name={table_name}
                         table_title={table_title}
+                        setFilterData={setFilterData}
                         {...paperProps}
                     />
                 ))}

src/core/components/DataTable/toolbar/TopToolbar.js

@@ -6,6 +6,7 @@ import FilterColumn from "@/core/components/DataTable/filter";
 import UpdateTable from "@/core/components/DataTable/update/UpdateTable";
 import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
 import HideColumn from "@/core/components/DataTable/hide";
+import FilterCustom from "../filter/FilterCustom";
 
 const DataTable_TopToolbar = ({
     mutate,
@@ -18,6 +19,8 @@ const DataTable_TopToolbar = ({
     table_name,
     table_title,
     special_data,
+    special_filter,
+    setFilterData,
 }) => {
     const {
         getState,
@@ -118,6 +121,9 @@ const DataTable_TopToolbar = ({
                                 table_name={table_name}
                             />
                         )}
+                        {special_filter && setFilterData && (
+                            <FilterCustom filterData={special_filter} setFilterData={setFilterData} />
+                        )}
                     </Box>
                 )}
             </Box>

src/core/utils/DataTableFilterDataStructure.js

@@ -1,9 +1,10 @@
 export default function DataTableFilterDataStructure(filterData, isValueEmpty) {
     return Object.values(filterData)
         .filter((filter) => !isValueEmpty(filter.value))
-        .map(({ filterMode, id, ...rest }) => ({
-            ...rest,
+        .map(({ filterMode, id, datatype, value }) => ({
             id: id.replace(/__/g, "."),
             fn: filterMode,
+            datatype,
+            value,
         }));
 }