Merge branch 'feature/maintainer' into 'develop'

cleaning datatable component and make it more flexible/ debug notification and...

See merge request witel3/loan-facilities-expert!64

example.env.local

@@ -16,6 +16,6 @@ NEXT_PUBLIC_SECONDARY_DARK = "#ad3a07"
 
 NEXT_PUBLIC_API_URL = "http://Your IP:3000"
 
-NEXT_PUBLIC_BASE_URL = "deploy api"
+NEXT_PUBLIC_BASE_URL = "https://loan.witel.ir"
 
 NODE_ENV = "development"

public/locales/fa/app.json

@@ -111,7 +111,7 @@
   "notifications": {
     "code": "کد",
     "error": "خطا",
-    "warning": "خطر",
+    "warning": "خطا",
     "success": "موفق",
     "error_static_text": "عملیات شما با خطا مواجه شد",
     "warning_static_text": "خطا سرور",

src/components/dashboard/change-password/index.jsx

@@ -20,13 +20,7 @@ const DashboardChangePasswordComponent = () => {
     const {directionApp} = useDirection();
 
     const handleSubmit = (values, {setSubmitting, resetForm}) => {
-        toast.dismiss();
+        Notifications(directionApp, t);
-        const pendingToast = toast(t("notifications.pending"), {
-            position: directionApp === "ltr" ? "top-left" : "top-right",
-            autoClose: false,
-            closeOnClick: false,
-            draggable: false,
-        });
         axios
             .post(
                 CHANGE_PASSWORD,
@@ -41,12 +35,12 @@ const DashboardChangePasswordComponent = () => {
             )
             .then((response) => {
                 toast.dismiss(pendingToast); // Dismiss the pending toast notification
-                Notifications(directionApp, response, t);
+                Notifications(directionApp, t, response);
                 resetForm();
             })
             .catch((error) => {
                 toast.dismiss(pendingToast); // Dismiss the pending toast notification
-                Notifications(directionApp, error.response, t);
+                Notifications(directionApp, t, error.response);
             })
             .finally(() => {
                 setSubmitting(false); // Set `setSubmitting` to false after the API request completes

src/components/dashboard/edit-profile/index.jsx

@@ -20,6 +20,7 @@ const DashboardEditProfile = () => {
     const {directionApp} = useDirection();
 
     const editAvatar = async (avatar) => {
+        Notifications(directionApp, t);
         try {
             const formData = new FormData();
 
@@ -36,7 +37,7 @@ const DashboardEditProfile = () => {
                 },
             });
         } catch (error) {
-            Notifications(directionApp, error.response, t);
+            Notifications(directionApp, t, error.response);
             throw error;
         }
     };
@@ -54,13 +55,13 @@ const DashboardEditProfile = () => {
         //       });
         //     })
         //     .then((response) => {
-        //       Notifications(directionApp, response, t);
+        //       Notifications(directionApp, t, response);
         //       getUser((data) => {
         //         changeUser(data);
         //       });
         //     })
         //     .catch((error) => {
-        //       Notifications(directionApp, error.response, t);
+        //       Notifications(directionApp, t, error.response);
         //     })
         //     .finally(() => {
         //       setSubmitting(false);
@@ -74,13 +75,13 @@ const DashboardEditProfile = () => {
         //       },
         //     })
         //     .then((response) => {
-        //       Notifications(directionApp, response, t);
+        //       Notifications(directionApp, t, response);
         //       getUser((data) => {
         //         changeUser(data);
         //       });
         //     })
         //     .catch((error) => {
-        //       Notifications(directionApp, error.response, t);
+        //       Notifications(directionApp, t, error.response);
         //     })
         //     .finally(() => {
         //       setSubmitting(false);

src/components/dashboard/machinary-office/TableRowActions.jsx

@@ -1,58 +1,92 @@
 import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import {Box, IconButton, Tooltip} from "@mui/material";
-import {useContext} from "react";
 import ConfirmForm from "./Form/ConfirmForm";
 import RejectForm from "./Form/RejectForm";
 import {useTranslations} from "next-intl";
-import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
+import {useCallback, useState} from "react";
+import axios from "axios";
+import Notifications from "@/core/components/notifications";
+import useUser from "@/lib/app/hooks/useUser";
+import useDirection from "@/lib/app/hooks/useDirection";
 
-const TableRowActions = ({row}) => {
+const TableRowActions = ({row, mutate, fetchUrl}) => {
     const t = useTranslations();
-    const {
+    const {token} = useUser();
-        openConfirmDialog,
+    const {directionApp} = useDirection();
-        openRejectDialog,
+
-        handleOpenConfirmDialog,
+    // Confirm
-        handleOpenRejectDialog,
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-        handleCloseConfirmDialog,
+    const handleCloseConfirmDialog = () => {
-        handleCloseRejectDialog,
+        setOpenConfirmDialog(false);
-        rowId,
+    };
-        confirmData,
+    const confirmData = useCallback((url, rowID, values) => {
-        rejectData,
+        Notifications(directionApp, t, undefined)
-    } = useContext(DataTableContext);
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Confirm
+
+    // Reject
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const handleCloseRejectDialog = () => {
+        setOpenRejectDialog(false);
+    };
+
+    const rejectData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Reject
+
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <Tooltip title={t("ConfirmDialog.confirm")}>
                 <IconButton
                     color="primary"
                     onClick={() => {
-                        handleOpenConfirmDialog(row);
+                        setOpenConfirmDialog(true)
                     }}
                 >
                     <ThumbUpAltIcon/>
                 </IconButton>
             </Tooltip>
-            {openConfirmDialog && (
+            <ConfirmForm
-                <ConfirmForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openConfirmDialog}
-                    open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
-                    confirmData={confirmData}
+            />
-                />
-            )}
             <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                     <ThumbDownIcon/>
                 </IconButton>
             </Tooltip>
-            {openRejectDialog && (
+            <RejectForm
-                <RejectForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openRejectDialog}
-                    open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
-                    handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
-                    rejectData={rejectData}
+            />
-                />
-            )}
         </Box>
     );
 };

src/components/dashboard/machinary-office/index.jsx

@@ -1,9 +1,7 @@
-import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, IconButton, Typography} from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import {useMemo} from "react";
-// import TableToolbar from "./TableTollbar";
 import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
 import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import moment from "jalali-moment";
 import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
 
 function DashboardMachinaryOfficeComponent() {
     const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardMachinaryOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -94,7 +92,6 @@ function DashboardMachinaryOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "lessThan",
-                minSize: 200,
                 columnFilterModeOptions: ["lessThan", "greaterThan"],
                 Cell: ({renderedCellValue}) => {
                     return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -170,7 +167,6 @@ function DashboardMachinaryOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -201,7 +197,6 @@ function DashboardMachinaryOfficeComponent() {
                 header: t("MachinaryOffice.state_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
-                minSize: 300,
                 // filterFn: "equals",
                 // filterSelectOptions: [
                 // ],
@@ -216,22 +211,22 @@ function DashboardMachinaryOfficeComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <DataTableStructure
+                <DataTable
                     tableUrl={GET_MACHINARY_OFFICE}
                     columns={columns}
                     selectableRow={false}
                     enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
                     enableLastUpdate={true}
                     enablePinning={true}
-                    enableDensityToggle={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}
                     enableFullScreenToggle={false}
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
-                    renderRowActions={({row}) => <TableRowActions row={row}/>}
+                    TableRowAction={TableRowActions}
                 />
             </Box>
         </DashboardLayouts>

src/components/dashboard/passenger-boss/TableRowActions.jsx

@@ -1,58 +1,92 @@
 import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import {Box, IconButton, Tooltip} from "@mui/material";
-import {useContext} from "react";
+import {useCallback, useState} from "react";
 import ConfirmForm from "./Form/ConfirmForm";
 import RejectForm from "./Form/RejectForm";
 import {useTranslations} from "next-intl";
-import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
+import Notifications from "@/core/components/notifications";
+import useUser from "@/lib/app/hooks/useUser";
+import useDirection from "@/lib/app/hooks/useDirection";
+import axios from "axios";
 
-const TableRowActions = ({row}) => {
+const TableRowActions = ({row, mutate, fetchUrl}) => {
     const t = useTranslations();
-    const {
+    const {token} = useUser();
-        openConfirmDialog,
+    const {directionApp} = useDirection();
-        openRejectDialog,
+
-        handleOpenConfirmDialog,
+    // Confirm
-        handleOpenRejectDialog,
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-        handleCloseConfirmDialog,
+    const handleCloseConfirmDialog = () => {
-        handleCloseRejectDialog,
+        setOpenConfirmDialog(false);
-        rowId,
+    };
-        confirmData,
+    const confirmData = useCallback((url, rowID, values) => {
-        rejectData,
+        Notifications(directionApp, t, undefined)
-    } = useContext(DataTableContext);
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Confirm
+
+    // Reject
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const handleCloseRejectDialog = () => {
+        setOpenRejectDialog(false);
+    };
+
+    const rejectData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Reject
+
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <Tooltip title={t("ConfirmDialog.confirm")}>
                 <IconButton
                     color="primary"
                     onClick={() => {
-                        handleOpenConfirmDialog(row);
+                        setOpenConfirmDialog(true)
                     }}
                 >
                     <ThumbUpAltIcon/>
                 </IconButton>
             </Tooltip>
-            {openConfirmDialog && (
+            <ConfirmForm
-                <ConfirmForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openConfirmDialog}
-                    open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
-                    confirmData={confirmData}
+            />
-                />
-            )}
             <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                     <ThumbDownIcon/>
                 </IconButton>
             </Tooltip>
-            {openRejectDialog && (
+            <RejectForm
-                <RejectForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openRejectDialog}
-                    open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
-                    handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
-                    rejectData={rejectData}
+            />
-                />
-            )}
         </Box>
     );
 };

src/components/dashboard/passenger-boss/index.jsx

@@ -1,16 +1,15 @@
-import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, IconButton, Typography} from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import {useMemo} from "react";
-// import TableToolbar from "./TableTollbar";
+import {GET_PASSENGER_BOSS, GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
-import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
 import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
 import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import moment from "jalali-moment";
 import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();
@@ -24,7 +23,6 @@ function DashboardPassengerOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "lessThan",
-                minSize: 200,
                 columnFilterModeOptions: ["lessThan", "greaterThan"],
                 Cell: ({renderedCellValue}) => {
                     return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -202,7 +198,6 @@ function DashboardPassengerOfficeComponent() {
                 header: t("PassengerBoss.state_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
-                minSize: 300,
                 // filterFn: "equals",
                 // filterSelectOptions: [
                 // ],
@@ -217,7 +212,7 @@ function DashboardPassengerOfficeComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <DataTableStructure
+                <DataTable
                     tableUrl={GET_PASSENGER_BOSS}
                     columns={columns}
                     selectableRow={false}
@@ -225,14 +220,15 @@ function DashboardPassengerOfficeComponent() {
                     // CustomToolbar={<TableToolbar />}
                     enableLastUpdate={true}
                     enablePinning={true}
-                    enableDensityToggle={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}
                     enableFullScreenToggle={false}
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
-                    renderRowActions={({row}) => <TableRowActions row={row}/>}
+                    TableRowAction={TableRowActions}
                 />
             </Box>
         </DashboardLayouts>

src/components/dashboard/passenger-office/TableRowActions.jsx

@@ -1,58 +1,92 @@
 import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import {Box, IconButton, Tooltip} from "@mui/material";
-import {useContext} from "react";
+import {useCallback, useState} from "react";
 import ConfirmForm from "./Form/ConfirmForm";
 import RejectForm from "./Form/RejectForm";
 import {useTranslations} from "next-intl";
-import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
+import axios from "axios";
+import Notifications from "@/core/components/notifications";
+import useUser from "@/lib/app/hooks/useUser";
+import useDirection from "@/lib/app/hooks/useDirection";
 
-const TableRowActions = ({row}) => {
+const TableRowActions = ({row, mutate, fetchUrl}) => {
     const t = useTranslations();
-    const {
+    const {token} = useUser();
-        openConfirmDialog,
+    const {directionApp} = useDirection();
-        openRejectDialog,
+
-        handleOpenConfirmDialog,
+    // Confirm
-        handleOpenRejectDialog,
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-        handleCloseConfirmDialog,
+    const handleCloseConfirmDialog = () => {
-        handleCloseRejectDialog,
+        setOpenConfirmDialog(false);
-        rowId,
+    };
-        confirmData,
+    const confirmData = useCallback((url, rowID, values) => {
-        rejectData,
+        Notifications(directionApp, t, undefined)
-    } = useContext(DataTableContext);
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Confirm
+
+    // Reject
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const handleCloseRejectDialog = () => {
+        setOpenRejectDialog(false);
+    };
+
+    const rejectData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Reject
+
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <Tooltip title={t("ConfirmDialog.confirm")}>
                 <IconButton
                     color="primary"
                     onClick={() => {
-                        handleOpenConfirmDialog(row);
+                        setOpenConfirmDialog(true)
                     }}
                 >
                     <ThumbUpAltIcon/>
                 </IconButton>
             </Tooltip>
-            {openConfirmDialog && (
+            <ConfirmForm
-                <ConfirmForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openConfirmDialog}
-                    open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
-                    confirmData={confirmData}
+            />
-                />
-            )}
             <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                     <ThumbDownIcon/>
                 </IconButton>
             </Tooltip>
-            {openRejectDialog && (
+            <RejectForm
-                <RejectForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openRejectDialog}
-                    open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
-                    handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
-                    rejectData={rejectData}
+            />
-                />
-            )}
         </Box>
     );
 };

src/components/dashboard/passenger-office/index.jsx

@@ -1,16 +1,15 @@
-import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, IconButton, Typography} from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import {useMemo} from "react";
 import {faIR} from "@mui/x-date-pickers/locales";
-// import TableToolbar from "./TableTollbar";
 import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
 import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
 import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardPassengerOfficeComponent() {
                 header: t("PassengerOffice.id"),
                 enableColumnFilter: true,
                 datatype: "numeric",
-                maxSize: 100,
                 filterFn: "equals",
                 columnFilterModeOptions: [
                     "equals",
@@ -95,7 +93,6 @@ function DashboardPassengerOfficeComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "lessThan",
-                minSize: 200,
                 columnFilterModeOptions: ["lessThan", "greaterThan"],
                 Cell: ({renderedCellValue}) => {
                     return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -127,7 +124,7 @@ function DashboardPassengerOfficeComponent() {
                                             helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
                                             sx: {minWidth: "120px"},
                                             variant: "standard",
-                                            actionBar: {actions: ["accept", "today"]},
+                                            actionbar: {actions: ["accept", "today"]},
                                         },
                                     }}
                                     value={
@@ -171,7 +168,6 @@ function DashboardPassengerOfficeComponent() {
                 header: t("PassengerOffice.navgan_id"),
                 enableColumnFilter: true,
                 datatype: "numeric",
-                maxSize: 100,
                 filterFn: "equals",
                 columnFilterModeOptions: [
                     "equals",
@@ -203,7 +199,6 @@ function DashboardPassengerOfficeComponent() {
                 header: t("PassengerOffice.state_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
-                minSize: 300,
                 // filterFn: "equals",
                 // filterSelectOptions: [
                 // ],
@@ -218,7 +213,7 @@ function DashboardPassengerOfficeComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <DataTableStructure
+                <DataTable
                     tableUrl={GET_PASSENGER_OFFICE}
                     columns={columns}
                     selectableRow={false}
@@ -226,14 +221,15 @@ function DashboardPassengerOfficeComponent() {
                     // CustomToolbar={<TableToolbar />}
                     enableLastUpdate={true}
                     enablePinning={true}
-                    enableDensityToggle={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}
                     enableFullScreenToggle={false}
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
-                    renderRowActions={({row}) => <TableRowActions row={row}/>}
+                    TableRowAction={TableRowActions}
                 />
             </Box>
         </DashboardLayouts>

src/components/dashboard/province-manager/TableRowActions.jsx

@@ -1,58 +1,92 @@
 import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import {Box, IconButton, Tooltip} from "@mui/material";
-import {useContext} from "react";
+import {useCallback, useState} from "react";
 import ConfirmForm from "./Form/ConfirmForm";
 import RejectForm from "./Form/RejectForm";
 import {useTranslations} from "next-intl";
-import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
+import Notifications from "@/core/components/notifications";
+import useUser from "@/lib/app/hooks/useUser";
+import useDirection from "@/lib/app/hooks/useDirection";
+import axios from "axios";
 
-const TableRowActions = ({row}) => {
+const TableRowActions = ({row, mutate, fetchUrl}) => {
     const t = useTranslations();
-    const {
+    const {token} = useUser();
-        openConfirmDialog,
+    const {directionApp} = useDirection();
-        openRejectDialog,
+
-        handleOpenConfirmDialog,
+    // Confirm
-        handleOpenRejectDialog,
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-        handleCloseConfirmDialog,
+    const handleCloseConfirmDialog = () => {
-        handleCloseRejectDialog,
+        setOpenConfirmDialog(false);
-        rowId,
+    };
-        confirmData,
+    const confirmData = useCallback((url, rowID, values) => {
-        rejectData,
+        Notifications(directionApp, t, undefined)
-    } = useContext(DataTableContext);
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Confirm
+
+    // Reject
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const handleCloseRejectDialog = () => {
+        setOpenRejectDialog(false);
+    };
+
+    const rejectData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Reject
+
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <Tooltip title={t("ConfirmDialog.confirm")}>
                 <IconButton
                     color="primary"
                     onClick={() => {
-                        handleOpenConfirmDialog(row);
+                        setOpenConfirmDialog(true)
                     }}
                 >
                     <ThumbUpAltIcon/>
                 </IconButton>
             </Tooltip>
-            {openConfirmDialog && (
+            <ConfirmForm
-                <ConfirmForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openConfirmDialog}
-                    open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
-                    confirmData={confirmData}
+            />
-                />
-            )}
             <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                     <ThumbDownIcon/>
                 </IconButton>
             </Tooltip>
-            {openRejectDialog && (
+            <RejectForm
-                <RejectForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openRejectDialog}
-                    open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
-                    handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
-                    rejectData={rejectData}
+            />
-                />
-            )}
         </Box>
     );
 };

src/components/dashboard/province-manager/index.jsx

@@ -1,9 +1,7 @@
-import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, IconButton, Typography} from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import {useMemo} from "react";
-// import TableToolbar from "./TableTollbar";
 import {GET_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
 import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import moment from "jalali-moment";
 import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
 
 function DashboardProvinceManagerComponent() {
     const t = useTranslations();
@@ -24,7 +23,6 @@ function DashboardProvinceManagerComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -95,7 +93,6 @@ function DashboardProvinceManagerComponent() {
                 enableColumnFilter: true,
                 datatype: "date",
                 filterFn: "lessThan",
-                minSize: 200,
                 columnFilterModeOptions: ["lessThan", "greaterThan"],
                 Cell: ({renderedCellValue}) => {
                     return <Typography variant="body2">{renderedCellValue}</Typography>;
@@ -171,7 +168,6 @@ function DashboardProvinceManagerComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -202,7 +198,6 @@ function DashboardProvinceManagerComponent() {
                 header: t("ProvinceManager.state_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
-                minSize: 300,
                 // filterFn: "equals",
                 // filterSelectOptions: [
                 // ],
@@ -217,22 +212,22 @@ function DashboardProvinceManagerComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <DataTableStructure
+                <DataTable
                     tableUrl={GET_PROVINCE_MANAGER}
                     columns={columns}
                     selectableRow={false}
                     enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
                     enableLastUpdate={true}
                     enablePinning={true}
-                    enableDensityToggle={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}
                     enableFullScreenToggle={false}
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
-                    renderRowActions={({row}) => <TableRowActions row={row}/>}
+                    TableRowAction={TableRowActions}
                 />
             </Box>
         </DashboardLayouts>

src/components/dashboard/transportation-assistance/TableRowActions.jsx

@@ -1,59 +1,92 @@
 import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import {Box, IconButton, Tooltip} from "@mui/material";
-import {useContext} from "react";
+import {useCallback, useState} from "react";
 import ConfirmForm from "./Form/ConfirmForm";
 import RejectForm from "./Form/RejectForm";
 import {useTranslations} from "next-intl";
-import {DataTableContext} from "@/lib/app/contexts/DatatableContext";
+import Notifications from "@/core/components/notifications";
+import useUser from "@/lib/app/hooks/useUser";
+import useDirection from "@/lib/app/hooks/useDirection";
+import axios from "axios";
 
-const TableRowActions = ({row}) => {
+const TableRowActions = ({row, mutate, fetchUrl}) => {
     const t = useTranslations();
+    const {token} = useUser();
+    const {directionApp} = useDirection();
+
+    // Confirm
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const handleCloseConfirmDialog = () => {
+        setOpenConfirmDialog(false);
+    };
+    const confirmData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t, undefined)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Confirm
+
+    // Reject
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const handleCloseRejectDialog = () => {
+        setOpenRejectDialog(false);
+    };
+
+    const rejectData = useCallback((url, rowID, values) => {
+        Notifications(directionApp, t)
+        axios
+            .post(`${url}/${rowID}`, values, {
+                headers: {authorization: `Bearer ${token}`},
+            })
+            .then((response) => {
+                Notifications(directionApp, t, response);
+                mutate(fetchUrl)
+            })
+            .catch((error) => {
+                Notifications(directionApp, t, error.response);
+            });
+    }, []);
+    // End Reject
 
-    const {
-        openConfirmDialog,
-        openRejectDialog,
-        handleOpenConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseConfirmDialog,
-        handleCloseRejectDialog,
-        rowId,
-        confirmData,
-        rejectData,
-    } = useContext(DataTableContext);
     return (
         <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
             <Tooltip title={t("ConfirmDialog.confirm")}>
                 <IconButton
                     color="primary"
                     onClick={() => {
-                        handleOpenConfirmDialog(row);
+                        setOpenConfirmDialog(true)
                     }}
                 >
                     <ThumbUpAltIcon/>
                 </IconButton>
             </Tooltip>
-            {openConfirmDialog && (
+            <ConfirmForm
-                <ConfirmForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openConfirmDialog}
-                    open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
-                    confirmData={confirmData}
+            />
-                />
-            )}
             <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                     <ThumbDownIcon/>
                 </IconButton>
             </Tooltip>
-            {openRejectDialog && (
+            <RejectForm
-                <RejectForm
+                rowId={row.getValue("id")}
-                    rowId={rowId}
+                open={openRejectDialog}
-                    open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
-                    handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
-                    rejectData={rejectData}
+            />
-                />
-            )}
         </Box>
     );
 };

src/components/dashboard/transportation-assistance/index.jsx

@@ -1,9 +1,7 @@
-import DataTableStructure from "@/core/components/DatatableStructure";
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, IconButton, Typography} from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import {useMemo} from "react";
-// import TableToolbar from "./TableTollbar";
 import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
 import {useTranslations} from "next-intl";
 import TableRowActions from "./TableRowActions";
@@ -11,6 +9,7 @@ import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
 import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
 import {faIR} from "@mui/x-date-pickers/locales";
 import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
 
 function DashboardTransportationAssistanceComponent() {
     const t = useTranslations();
@@ -23,7 +22,6 @@ function DashboardTransportationAssistanceComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -94,7 +92,6 @@ function DashboardTransportationAssistanceComponent() {
                 header: t("TransportationAssistance.created_at"),
                 enableColumnFilter: true,
                 datatype: "date",
-                minSize: 200,
                 filterFn: "lessThan",
                 columnFilterModeOptions: ["lessThan", "greaterThan"],
                 Cell: ({renderedCellValue}) => (
@@ -171,7 +168,6 @@ function DashboardTransportationAssistanceComponent() {
                 enableColumnFilter: true,
                 datatype: "numeric",
                 filterFn: "equals",
-                maxSize: 100,
                 columnFilterModeOptions: [
                     "equals",
                     "notEquals",
@@ -202,7 +198,6 @@ function DashboardTransportationAssistanceComponent() {
                 header: t("TransportationAssistance.state_name"),
                 enableColumnFilter: false,
                 datatype: "numeric",
-                minSize: 300,
                 // filterFn: "equals",
                 // filterSelectOptions: [
                 // ],
@@ -217,22 +212,22 @@ function DashboardTransportationAssistanceComponent() {
     return (
         <DashboardLayouts>
             <Box sx={{px: 3}}>
-                <DataTableStructure
+                <DataTable
                     tableUrl={GET_TRANSPORTATION_ASSISTANCE}
                     columns={columns}
                     selectableRow={false}
                     enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
                     enableLastUpdate={true}
                     enablePinning={true}
-                    enableDensityToggle={true}
+                    enableDensityToggle={false}
+                    initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}
                     enableFullScreenToggle={false}
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
-                    renderRowActions={({row}) => <TableRowActions row={row}/>}
+                    TableRowAction={TableRowActions}
                 />
             </Box>
         </DashboardLayouts>

src/components/login-expert/index.jsx

@@ -64,7 +64,7 @@ const LoginComponent = () => {
                                     <Box
                                         sx={{position: "relative", width: "100%", height: 200}}
                                     >
-                                        <Image fill src="/images/login.svg" alt={t("app_name")} priority/>
+                                        <Image fill src="/images/login.svg" alt={t("app_name")}/>
                                     </Box>
                                     <Typography margin={2} variant="h4" textAlign="center">
                                         {t("login_expert")}

src/core/components/DataTable.jsx

@@ -1,23 +1,21 @@
-import {ReloadDataTableContext} from "@/lib/app/contexts/ReloadDatatableContext";
-import useLanguage from "@/lib/app/hooks/useLanguage";
-import {Typography} from "@mui/material";
-import axios from "axios";
-import MaterialReactTable from "material-react-table";
-import moment from "moment-jalaali";
 import {useTranslations} from "next-intl";
-import {useContext, useEffect, useMemo, useState} from "react";
+import useLanguage from "@/lib/app/hooks/useLanguage";
+import {useEffect, useMemo, useState} from "react";
+import moment from "moment-jalaali";
 import useSWR from "swr";
+import {Typography} from "@mui/material";
+import MaterialReactTable from "material-react-table";
+import axios from "axios";
+import useUser from "@/lib/app/hooks/useUser";
+import {css} from "@emotion/react";
 
-const DataTable = (props) => {
+function DataTable(props) {
-    const {reloadDataTable, setReloadDataTable} = useContext(
+    const {token} = useUser();
-        ReloadDataTableContext
-    );
-
     const fetcher = (...args) => {
         return axios
             .get(args, {
                 headers: {
-                    Authorization: `Bearer ${props.token}`,
+                    Authorization: `Bearer ${token}`,
                 },
             })
             .then((res) => {
@@ -28,6 +26,9 @@ const DataTable = (props) => {
     const t = useTranslations();
     const {languageApp, languageList} = useLanguage();
     const [columnFilters, setColumnFilters] = useState([]);
+    const [sorting, setSorting] = useState([]);
+    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
+    const [rowCount, setRowCount] = useState(0);
     const [columnFilterFns, setColumnFilterFns] = useState(() => {
         let output = {};
         const list = props.columns.map((item) =>
@@ -41,9 +42,7 @@ const DataTable = (props) => {
         }
         return output;
     });
-    const [sorting, setSorting] = useState([]);
+
-    const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10});
-    const [rowCount, setRowCount] = useState(0);
     const [updateTime, setupdateTime] = useState(
         moment().format("HH:mm | jYYYY/jM/jD")
     );
@@ -55,7 +54,7 @@ const DataTable = (props) => {
     );
 
     const fetchUrl = useMemo(() => {
-        const url = new URL(props.tableUrl /* send your api */);
+        const url = new URL(props.tableUrl);
         url.searchParams.set(
             "start",
             `${pagination.pageIndex * pagination.pageSize}`
@@ -85,18 +84,11 @@ const DataTable = (props) => {
         sorting,
         props.columns,
     ]);
-    const {data, isLoading, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
+
+    const {data, isValidating, mutate} = useSWR(fetchUrl, fetcher, {
         revalidateOnFocus: false,
     });
 
-    useEffect(() => {
-        if (reloadDataTable) {
-            mutate(fetchUrl).then(() => {
-                setReloadDataTable(false); // Set reloadDataTable to false after mutation is complete
-            });
-        }
-    }, [reloadDataTable, setReloadDataTable]);
-
     useEffect(() => {
         setupdateTime(moment().format("HH:mm | jYYYY/jM/jD"));
     }, [isValidating, languageApp]);
@@ -104,7 +96,6 @@ const DataTable = (props) => {
     return (
         <MaterialReactTable
             localization={tableLocalization}
-            columns={props.columns} /* columns you send */
             data={data ?? []}
             manualFiltering
             manualPagination
@@ -112,16 +103,28 @@ const DataTable = (props) => {
             enableRowSelection={props.selectableRow} /* send condition */
             enablePinning={props.enablePinning} /* send condition */
             enableColumnFilters={props.enableColumnFilters} /* send condition */
-            enableDensityToggle={props.enableDensityToggle} /* send condition */
+            enableDensityToggle={props.enableDensityToggle}
             enableHiding={props.enableHiding} /* send condition */
             enableFullScreenToggle={props.enableFullScreenToggle} /* send condition */
             enableColumnResizing={props.enableColumnResizing}
             muiTableHeadCellProps={{
                 sx: {
                     color: "primary.main",
+                    borderLeft: "1px solid #e1e1e1",
+                    "&:first-of-type": {
+                        borderLeft: "unset"
+                    },
                     "& .Mui-TableHeadCell-Content": {justifyContent: "space-between"},
                 },
             }}
+            muiTableBodyCellProps={{
+                sx: {
+                    borderLeft: "1px solid #e1e1e1",
+                    "&:first-of-type": {
+                        borderLeft: "unset"
+                    }
+                },
+            }}
             enableColumnFilterModes
             muiTablePaperProps={{elevation: 0}}
             rowCount={rowCount}
@@ -158,7 +161,7 @@ const DataTable = (props) => {
                 </>
             )}
             state={{
-                isLoading,
+                isLoading: isValidating,
                 columnFilters,
                 columnFilterFns,
                 pagination,
@@ -166,9 +169,10 @@ const DataTable = (props) => {
             }}
             positionActionsColumn={"last"}
             enableRowActions={props.enableRowActions}
+            renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
             {...props}
         />
     );
-};
+}
 
-export default DataTable;
+export default DataTable;

src/core/components/DatatableStructure.jsx

@@ -1,15 +0,0 @@
-import {DataTableProvider} from "@/lib/app/contexts/DatatableContext";
-import DataTable from "./Datatable";
-import {ReloadDataTableProvider} from "@/lib/app/contexts/ReloadDatatableContext";
-
-function DataTableStructure(props) {
-    return (
-        <ReloadDataTableProvider>
-            <DataTableProvider>
-                <DataTable {...props} token={localStorage.getItem("_token")}/>
-            </DataTableProvider>
-        </ReloadDataTableProvider>
-    );
-}
-
-export default DataTableStructure;

src/core/components/notifications/ErrorNotification.jsx

@@ -2,7 +2,7 @@ import DangerousIcon from "@mui/icons-material/Dangerous";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const ErrorNotification = (directionApp, status, t, message) => {
+const ErrorNotification = (directionApp, t, status, message) => {
     toast(
         () => (
             <>

src/core/components/notifications/SuccessNotification.jsx

@@ -2,7 +2,7 @@ import BeenhereIcon from "@mui/icons-material/Beenhere";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const SuccessNotification = (directionApp, status, t) => {
+const SuccessNotification = (directionApp, t, status) => {
     toast(
         () => (
             <>

src/core/components/notifications/WarningNotification.jsx

@@ -2,7 +2,7 @@ import ReportIcon from "@mui/icons-material/Report";
 import {Box, Typography} from "@mui/material";
 import {toast} from "react-toastify";
 
-const WarningNotification = (directionApp, status, t) => {
+const WarningNotification = (directionApp, t, status) => {
     toast(
         () => (
             <>

src/core/components/notifications/index.jsx

@@ -1,39 +1,55 @@
+import {toast} from "react-toastify";
 import ErrorNotification from "./ErrorNotification";
 import WarningNotification from "./WarningNotification";
 import SuccessNotification from "./SuccessNotification";
 
-const Notifications = async (directionApp, response, t) => {
+const Notifications = async (directionApp, t, response) => {
-    const {status, data} = response;
+    const {status, data} = response != undefined ? response : ""
-
+    toast.dismiss();
     switch (status) {
         case 200:
-            SuccessNotification(directionApp, status, t);
+            SuccessNotification(directionApp, t, status);
             break;
         case 400:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 401:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 403:
-            ErrorNotification(directionApp, status, t);
+            ErrorNotification(directionApp, t, status);
             break;
         case 422:
-            ErrorNotification(directionApp, status, t, data.message);
+            ErrorNotification(directionApp, t, status, data.message);
             break;
         case 500:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         case 503:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         case 504:
-            WarningNotification(directionApp, status, t);
+            WarningNotification(directionApp, t, status);
             break;
         default:
-            // Handle other cases if needed
+            toast(t("notifications.pending"), {
+                position: directionApp === "ltr" ? "top-left" : "top-right",
+                autoClose: false,
+                closeOnClick: false,
+                draggable: false,
+            });
             break;
     }
 };
 
 export default Notifications;
+
+/*
+usage document
+
+** for pending use ( Notifications(directionApp, t, undefined) ) this before your request.
+** for success use ( Notifications(directionApp, t, response) ) this inside .then() of your request.
+** for Error and Warning use ( Notifications(directionApp, t, error.response) ) this inside .catche() of your request.
+
+end usage document
+*/

src/layouts/MuiLayout.jsx

@@ -30,8 +30,7 @@ const MuiLayout = ({children, isBot}) => {
                                 height: "8px",
                             },
                             "*::-webkit-scrollbar-thumb": {
-                                background: "#e1e1e1",
+                                background: `${theme.palette.primary.light}80`,
-                                borderRadius: "3px",
                             },
                             "*:not(.MuiTableContainer-root)": {
                                 scrollbarWidth: "thin",
@@ -44,7 +43,7 @@ const MuiLayout = ({children, isBot}) => {
                             },
 
                             "*::-moz-scrollbar-thumb": {
-                                backgroundColor: "#e1e1e1",
+                                backgroundColor: `${theme.palette.primary.light}80`,
                             },
                             [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
                                 "*::-webkit-scrollbar": {

src/lib/app/contexts/DatatableContext.jsx

@@ -1,14 +0,0 @@
-import {createContext} from "react";
-import useDataTable from "../hooks/useDatatable";
-
-export const DataTableContext = createContext();
-
-export const DataTableProvider = (props) => {
-    const contextValue = useDataTable();
-
-    return (
-        <DataTableContext.Provider value={contextValue}>
-            {props.children}
-        </DataTableContext.Provider>
-    );
-};

src/lib/app/contexts/ReloadDatatableContext.jsx

@@ -1,15 +0,0 @@
-import {createContext, useState} from "react";
-
-export const ReloadDataTableContext = createContext();
-
-export const ReloadDataTableProvider = ({children}) => {
-    const [reloadDataTable, setReloadDataTable] = useState(false);
-
-    return (
-        <ReloadDataTableContext.Provider
-            value={{reloadDataTable, setReloadDataTable}}
-        >
-            {children}
-        </ReloadDataTableContext.Provider>
-    );
-};

src/lib/app/hooks/useDatatable.jsx

@@ -1,113 +0,0 @@
-import axios from "axios";
-import {useCallback, useContext, useReducer, useState} from "react";
-import {ReloadDataTableContext} from "../contexts/ReloadDatatableContext";
-import useUser from "./useUser";
-import Notifications from "@/core/components/notifications";
-import useDirection from "./useDirection";
-import {useTranslations} from "next-intl";
-
-const initialValues = {
-    url: "",
-    rowID: "",
-    values: {},
-};
-
-const reducer = (state, action) => {
-    switch (action.type) {
-        case "CONFIRM_DATA":
-            return {
-                ...state,
-                url: action.url,
-                rowID: action.rowID,
-            };
-        case "REJECT_DATA":
-            return {
-                ...state,
-                url: action.url,
-                rowID: action.rowID,
-                values: {},
-            };
-        default:
-            return state;
-    }
-};
-
-const useDataTable = () => {
-    const {setReloadDataTable} = useContext(ReloadDataTableContext);
-    const [state, dispatch] = useReducer(reducer, initialValues);
-    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
-    const [openRejectDialog, setOpenRejectDialog] = useState(false);
-    const [rowId, setRowId] = useState(null);
-    const {directionApp} = useDirection();
-    const t = useTranslations();
-
-    const {token} = useUser();
-
-    const confirmData = useCallback(async (url, rowID, values) => {
-        dispatch({type: "CONFIRM_DATA", url: url, rowID: rowID, values: values});
-        axios
-            .post(`${url}/${rowID}`, values, {
-                headers: {authorization: `Bearer ${token}`},
-            })
-            .then((response) => {
-                setReloadDataTable(true);
-                Notifications(directionApp, response, t);
-            })
-            .catch((error) => {
-                Notifications(directionApp, error.response, t);
-            });
-    }, []);
-
-    const rejectData = useCallback(async (url, rowID, values) => {
-        dispatch({type: "REJECT_DATA", url: url, rowID: rowID, values: values});
-        axios
-            .post(`${url}/${rowID}`, values, {
-                headers: {authorization: `Bearer ${token}`},
-            })
-            .then((response) => {
-                setReloadDataTable(true);
-                Notifications(directionApp, response, t);
-            })
-            .catch((error) => {
-                console.log(error);
-                Notifications(directionApp, error.response, t);
-            });
-    }, []);
-
-    //Confirm Data
-    const handleOpenConfirmDialog = (row) => {
-        setRowId(row.getValue("id"));
-        setOpenConfirmDialog(true);
-    };
-
-    const handleCloseConfirmDialog = () => {
-        setOpenConfirmDialog(false);
-    };
-    //End Confirm Data
-
-    // Reject Data
-    const handleOpenRejectDialog = (row) => {
-        setRowId(row.getValue("id"));
-        setOpenRejectDialog(true);
-    };
-
-    const handleCloseRejectDialog = () => {
-        setOpenRejectDialog(false);
-    };
-    // End Reject Data
-
-    const contextValue = {
-        handleOpenConfirmDialog,
-        handleCloseConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseRejectDialog,
-        rowId,
-        openConfirmDialog,
-        openRejectDialog,
-        rejectData,
-        confirmData,
-    };
-    return contextValue;
-};
-
-export default useDataTable;