start some change on sending data to local storage

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;