start some change on sending data to local storage

public/global.scss

@@ -3,5 +3,4 @@
 .filter-toast {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   background-color: #d0dfe8;
-  border: 1px dashed #095b8c;
 }

src/app/template.js

@@ -12,7 +12,7 @@ const Template = ({children}) => {
             <ThemeProvider theme={theme}>
                 <CssBaseline/>
                 {children}
-                <ToastContainer rtl containerId="filtering" closeButton={false}/>
+                <ToastContainer rtl containerId="datatable" closeButton={false}/>
             </ThemeProvider>
         </AppRouterCacheProvider>
     )

src/core/components/DataTable/Main.js

@@ -6,6 +6,8 @@ import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
 import Toolbar from "@/components/home/Toolbar";
 import useDataTable from "@/lib/hooks/useDataTable";
 import {useMemo, useState} from "react";
+import {toast} from "react-toastify";
+import AskForKeepSort from "@/core/components/NotificationDesign/AskForKeepSort";
 
 const data = [
     {
@@ -76,11 +78,33 @@ const data = [
 ];
 
 const DataTable_Main = (props) => {
-    const {filterData} = useDataTable();
+    const {filterData, sortData, setSortData} = useDataTable();
     const {table_url, user_id, page_name, table_name, columns, initialStateProps} = props
     const flatColumns = flattenArrayOfObjects(columns, 'columns')
     const {settingStore, hideAction, sortAction} = useTableSetting();
     const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
+
+    const onColumnVisibilityChange = (event) => {
+        const settingValue = event();
+        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
+    };
+
+    const onSortingChange = (event) => {
+        toast.dismiss({containerId: "datatable", id: "sort"});
+        setSortData(event);
+        setTimeout(() => {
+            toast(<AskForKeepSort event={event} user_id={user_id} page_name={page_name} table_name={table_name}
+                                  columns={columns} flatColumns={flatColumns}/>, {
+                containerId: "datatable",
+                toastId: "sort",
+                className: "filter-toast",
+                position: "bottom-left",
+                draggable: true,
+                autoClose: false,
+            });
+        }, 1000);
+    }
+
     const filters = Object.keys(filterData)
         .map(key => {
             const value = filterData[key].value;
@@ -102,34 +126,19 @@ const DataTable_Main = (props) => {
         return `${table_url}?${params}`;
     }, [table_url, finalFilters, pagination, columns]);
 
-    const onColumnVisibilityChange = (event) => {
-        const settingValue = event();
-        hideAction(user_id, page_name, table_name, settingValue, flatColumns);
-    };
-    const onSortingChange = (event) => {
-        const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
-        sortAction(user_id, page_name, table_name, settingValue, flatColumns);
-    }
-
     const table = useMaterialReactTable({
         localization: FA_DATATABLE_LOCALIZATION,
         columns,
         data: data,
-        // manualSorting: true,
-        renderTopToolbarCustomActions: ({table}) => (<>
-            <Toolbar
-                columns={flatColumns}
-            />
-        </>),
         initialState: {
             density: 'compact',
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
-            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
+            sorting: sortData,
             ...initialStateProps
         },
         state: {
             columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
-            sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
+            sorting: sortData,
             pagination
         },
         muiTableHeadProps: {
@@ -157,10 +166,15 @@ const DataTable_Main = (props) => {
         },
         manualFiltering: true,
         manualPagination: true,
-        onPaginationChange: setPagination,
         manualSorting: true,
+        onPaginationChange: setPagination,
         onColumnVisibilityChange: onColumnVisibilityChange,
         onSortingChange: onSortingChange,
+        renderTopToolbarCustomActions: ({table}) => (<>
+            <Toolbar
+                columns={flatColumns}
+            />
+        </>),
         ...props
     })
 

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

@@ -3,12 +3,11 @@
 import {Box, Button, Drawer, styled} from "@mui/material";
 import {Form, Formik} from "formik";
 import useTableSetting from "@/lib/hooks/useTableSetting";
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useState} from "react";
 import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
 import * as Yup from "yup";
 import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
 import {toast} from "react-toastify";
-import AskForKeep from "@/core/components/NotificationDesign/AskForKeep";
 import useDataTable from "@/lib/hooks/useDataTable";
 
 const ScrollBox = styled(Box)({
@@ -29,14 +28,10 @@ const ScrollBox = styled(Box)({
 });
 
 function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, table_name}) {
-    const {settingStore, filterAction} = useTableSetting();
+    const {settingStore} = useTableSetting();
     const [initialValues, setInitialValues] = useState({});
     const [validationSchema, setValidationSchema] = useState({});
     const {filterData, setFilterData} = useDataTable();
-    const filterDataRef = useRef(filterData);
-    useEffect(() => {
-        filterDataRef.current = filterData;
-    }, [filterData]);
 
     useEffect(() => {
         const values = columns.reduce((acc, column) => {
@@ -104,32 +99,12 @@ function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, t
 
 
     const handleSubmit = (values, {setSubmitting}) => {
-        toast.dismiss({containerId: "filtering"});
+        toast.dismiss({containerId: "datatable", id: "filter"});
         setDrawerState(false);
-        setFilterData(values);
+        setFilterData(values)
-        toast(<AskForKeep onSaveFilter={onSaveFilter}/>, {
-            containerId: "filtering",
-            className: "filter-toast",
-            position: "bottom-left",
-            draggable: true,
-            autoClose: false,
-        });
         setSubmitting(false);
     };
 
-    const onSaveFilter = () => {
-        const currentFilterData = filterDataRef.current;
-        const arrayOfObjects = Object.keys(currentFilterData).map(key => {
-            const value = currentFilterData[key].value;
-            if (value !== "" &&
-                !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
-                return currentFilterData[key];
-            }
-        }).filter(Boolean);
-        filterAction(user_id, page_name, table_name, arrayOfObjects, columns)
-        toast.dismiss({containerId: "filtering"});
-    };
-
     return (
         <Drawer open={drawerState} onClose={() => setDrawerState(false)}
                 sx={{overflowY: "hidden", display: "flex", flexDirection: "column", height: "100%"}}>

src/core/components/NotificationDesign/AskForKeepData.jsx

@@ -0,0 +1,62 @@
+'use client'
+
+import SaveIcon from '@mui/icons-material/Save';
+import {Box, Button, Typography} from "@mui/material";
+import DownloadIcon from '@mui/icons-material/Download';
+import {toast} from "react-toastify";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+
+function AskForKeepData({filterData, sortData, user_id, page_name, table_name, columns}) {
+    const {filterAction} = useTableSetting();
+    const onSaveFilter = () => {
+        const filteredItems = Object.keys(filterData).map(key => {
+            const value = filterData[key].value;
+            if (value !== "" &&
+                !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
+                return filterData[key];
+            }
+        }).filter(Boolean);
+        filterAction(user_id, page_name, table_name, filteredItems, columns);
+        const settingValue = sortData(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
+        sortAction(user_id, page_name, table_name, settingValue, flatColumns);
+        toast.dismiss({containerId: "datatable"});
+    };
+
+    const handleDismiss = () => {
+        toast.dismiss({containerId: "datatable"});
+    };
+
+    return (
+        <Box sx={{width: "100%"}}>
+            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
+                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
+                    ذخیره سازی تغییرات
+                </Typography>
+                <SaveIcon sx={{color: "#155175"}}/>
+            </Box>
+            <Box sx={{display: "flex", flexDirection: "column"}}>
+                <Typography variant="caption">
+                    آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
+                </Typography>
+            </Box>
+            <Box sx={{display: "flex", gap: 1, mt: 1}}>
+                <Button variant="contained" onClick={handleDismiss} sx={{
+                    backgroundColor: "#792626",
+                    ':hover': {backgroundColor: "#792626"},
+                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                }}>رد
+                    کردن</Button>
+                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
+                        onClick={onSaveFilter}
+                        sx={{
+                            backgroundColor: "#155175",
+                            ':hover': {backgroundColor: "#155175"},
+                            boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                        }}>ذخیره
+                    فیلتر</Button>
+            </Box>
+        </Box>
+    );
+}
+
+export default AskForKeepData;

src/core/components/NotificationDesign/AskForKeepFilter.jsx

@@ -0,0 +1,60 @@
+'use client'
+
+import SaveIcon from '@mui/icons-material/Save';
+import {Box, Button, Typography} from "@mui/material";
+import DownloadIcon from '@mui/icons-material/Download';
+import {toast} from "react-toastify";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+
+function AskForKeepFilter({values, user_id, page_name, table_name, columns}) {
+    const {filterAction} = useTableSetting();
+    const onSaveFilter = () => {
+        const filteredItems = Object.keys(values).map(key => {
+            const value = values[key].value;
+            if (value !== "" &&
+                !(Array.isArray(value) && (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === "")))) {
+                return values[key];
+            }
+        }).filter(Boolean);
+        filterAction(user_id, page_name, table_name, filteredItems, columns)
+        toast.dismiss({containerId: "datatable", id: "filter"});
+    };
+
+    const handleDismiss = () => {
+        toast.dismiss({containerId: "datatable", id: "filter"});
+    };
+
+    return (
+        <Box sx={{width: "100%"}}>
+            <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
+                <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
+                    ذخیره سازی فیلتر
+                </Typography>
+                <SaveIcon sx={{color: "#155175"}}/>
+            </Box>
+            <Box sx={{display: "flex", flexDirection: "column"}}>
+                <Typography variant="caption">
+                    آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
+                </Typography>
+            </Box>
+            <Box sx={{display: "flex", gap: 1, mt: 1}}>
+                <Button variant="contained" onClick={handleDismiss} sx={{
+                    backgroundColor: "#792626",
+                    ':hover': {backgroundColor: "#792626"},
+                    boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                }}>رد
+                    کردن</Button>
+                <Button variant="contained" component="label" endIcon={<DownloadIcon/>}
+                        onClick={onSaveFilter}
+                        sx={{
+                            backgroundColor: "#155175",
+                            ':hover': {backgroundColor: "#155175"},
+                            boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+                        }}>ذخیره
+                    فیلتر</Button>
+            </Box>
+        </Box>
+    );
+}
+
+export default AskForKeepFilter;

src/core/components/NotificationDesign/AskForKeepSort.jsx

@@ -4,24 +4,31 @@ import SaveIcon from '@mui/icons-material/Save';
 import {Box, Button, Typography} from "@mui/material";
 import DownloadIcon from '@mui/icons-material/Download';
 import {toast} from "react-toastify";
+import useTableSetting from "@/lib/hooks/useTableSetting";
 
-function AskForKeep({onSaveFilter}) {
+function AskForKeepSort({event, user_id, page_name, table_name, flatColumns}) {
+    const {settingStore, sortAction} = useTableSetting();
+    const onSaveFilter = () => {
+        const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
+        sortAction(user_id, page_name, table_name, settingValue, flatColumns);
+        toast.dismiss({containerId: "filtering", id: "sort"});
+    };
 
     const handleDismiss = () => {
-        toast.dismiss({containerId: "filtering"});
+        toast.dismiss({containerId: "filtering", id: "sort"});
     };
 
     return (
         <Box sx={{width: "100%"}}>
             <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1}}>
                 <Typography color="#155175" variant="subtitle1" sx={{fontWeight: "500"}}>
-                    ذخیره سازی اطلاعات
+                    ذخیره سازی ترتیب
                 </Typography>
                 <SaveIcon sx={{color: "#155175"}}/>
             </Box>
             <Box sx={{display: "flex", flexDirection: "column"}}>
                 <Typography variant="caption">
-                    آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
+                    آیا مایل به ذخیره ترتیب های اعمال شده برای دفعات بعد هستید؟
                 </Typography>
             </Box>
             <Box sx={{display: "flex", gap: 1, mt: 1}}>
@@ -38,10 +45,10 @@ function AskForKeep({onSaveFilter}) {
                             ':hover': {backgroundColor: "#155175"},
                             boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
                         }}>ذخیره
-                    فیلتر</Button>
+                    ترتیب</Button>
             </Box>
         </Box>
     );
 }
 
-export default AskForKeep;
+export default AskForKeepSort;

src/lib/contexts/DataTable.jsx

@@ -1,12 +1,27 @@
-import {createContext, useState} from "react";
+import {createContext, useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import AskForKeepData from "@/core/components/NotificationDesign/AskForKeepData";
 
 export const DataTableContext = createContext();
 
 const DataTableProvider = ({children}) => {
     const [filterData, setFilterData] = useState({});
+    const [sortData, setSortData] = useState([]);
+
+    useEffect(() => {
+        toast(<AskForKeepData filterData={filterData} sortData={sortData} user_id={user_id} page_name={page_name}
+                              table_name={table_name}
+                              columns={columns}/>, {
+            containerId: "datatable",
+            className: "filter-toast",
+            position: "bottom-left",
+            draggable: true,
+            autoClose: false,
+        });
+    }, [filterData, sortData]);
 
     return (
-        <DataTableContext.Provider value={{filterData, setFilterData}}>
+        <DataTableContext.Provider value={{filterData, setFilterData, sortData, setSortData}}>
             {children}
         </DataTableContext.Provider>
     );

src/lib/hooks/useDataTable.jsx

@@ -2,8 +2,8 @@ import {useContext} from "react";
 import {DataTableContext} from "@/lib/contexts/DataTable";
 
 const useTableSetting = () => {
-    const {filterData, setFilterData} = useContext(DataTableContext);
+    const {filterData, setFilterData, sortData, setSortData} = useContext(DataTableContext);
-    return {filterData, setFilterData};
+    return {filterData, setFilterData, sortData, setSortData};
 };
 
 export default useTableSetting;