cleaning datatable component and make it more flexible/ debug notification and add pending/ add some extra to datatable.

2023-08-07 14:00:04 +03:30
parent 2211c4803b
commit ac1ad3b8fe
26 changed files with 508 additions and 605 deletions
--- a/src/components/dashboard/change-password/index.jsx
+++ b/src/components/dashboard/change-password/index.jsx
@@ -20,13 +20,7 @@ const DashboardChangePasswordComponent = () => {
    const {directionApp} = useDirection();

    const handleSubmit = (values, {setSubmitting, resetForm}) => {
-        toast.dismiss();
-        const pendingToast = toast(t("notifications.pending"), {
-            position: directionApp === "ltr" ? "top-left" : "top-right",
-            autoClose: false,
-            closeOnClick: false,
-            draggable: false,
-        });
+        Notifications(directionApp, t);
        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
--- a/src/components/dashboard/edit-profile/index.jsx
+++ b/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);
--- a/src/components/dashboard/machinary-office/TableRowActions.jsx
+++ b/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 {
-        openConfirmDialog,
-        openRejectDialog,
-        handleOpenConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseConfirmDialog,
-        handleCloseRejectDialog,
-        rowId,
-        confirmData,
-        rejectData,
-    } = useContext(DataTableContext);
+    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
+
    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
-                    rowId={rowId}
-                    open={openConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
-                    confirmData={confirmData}
-                />
-            )}
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
+            />
            <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                    <ThumbDownIcon/>
                </IconButton>
            </Tooltip>
-            {openRejectDialog && (
-                <RejectForm
-                    rowId={rowId}
-                    open={openRejectDialog}
-                    handleClose={handleCloseRejectDialog}
-                    rejectData={rejectData}
-                />
-            )}
+            <RejectForm
+                rowId={row.getValue("id")}
+                open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
+            />
        </Box>
    );
 };
--- a/src/components/dashboard/machinary-office/index.jsx
+++ b/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>
--- a/src/components/dashboard/passenger-boss/TableRowActions.jsx
+++ b/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 {
-        openConfirmDialog,
-        openRejectDialog,
-        handleOpenConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseConfirmDialog,
-        handleCloseRejectDialog,
-        rowId,
-        confirmData,
-        rejectData,
-    } = useContext(DataTableContext);
+    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
+
    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
-                    rowId={rowId}
-                    open={openConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
-                    confirmData={confirmData}
-                />
-            )}
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
+            />
            <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                    <ThumbDownIcon/>
                </IconButton>
            </Tooltip>
-            {openRejectDialog && (
-                <RejectForm
-                    rowId={rowId}
-                    open={openRejectDialog}
-                    handleClose={handleCloseRejectDialog}
-                    rejectData={rejectData}
-                />
-            )}
+            <RejectForm
+                rowId={row.getValue("id")}
+                open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
+            />
        </Box>
    );
 };
--- a/src/components/dashboard/passenger-boss/index.jsx
+++ b/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} from "@/core/data/apiRoutes";
+import {GET_PASSENGER_BOSS, 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 {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>
--- a/src/components/dashboard/passenger-office/TableRowActions.jsx
+++ b/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 {
-        openConfirmDialog,
-        openRejectDialog,
-        handleOpenConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseConfirmDialog,
-        handleCloseRejectDialog,
-        rowId,
-        confirmData,
-        rejectData,
-    } = useContext(DataTableContext);
+    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
+
    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
-                    rowId={rowId}
-                    open={openConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
-                    confirmData={confirmData}
-                />
-            )}
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
+            />
            <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                    <ThumbDownIcon/>
                </IconButton>
            </Tooltip>
-            {openRejectDialog && (
-                <RejectForm
-                    rowId={rowId}
-                    open={openRejectDialog}
-                    handleClose={handleCloseRejectDialog}
-                    rejectData={rejectData}
-                />
-            )}
+            <RejectForm
+                rowId={row.getValue("id")}
+                open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
+            />
        </Box>
    );
 };
--- a/src/components/dashboard/passenger-office/index.jsx
+++ b/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>
--- a/src/components/dashboard/province-manager/TableRowActions.jsx
+++ b/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 {
-        openConfirmDialog,
-        openRejectDialog,
-        handleOpenConfirmDialog,
-        handleOpenRejectDialog,
-        handleCloseConfirmDialog,
-        handleCloseRejectDialog,
-        rowId,
-        confirmData,
-        rejectData,
-    } = useContext(DataTableContext);
+    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
+
    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
-                    rowId={rowId}
-                    open={openConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
-                    confirmData={confirmData}
-                />
-            )}
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
+            />
            <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                    <ThumbDownIcon/>
                </IconButton>
            </Tooltip>
-            {openRejectDialog && (
-                <RejectForm
-                    rowId={rowId}
-                    open={openRejectDialog}
-                    handleClose={handleCloseRejectDialog}
-                    rejectData={rejectData}
-                />
-            )}
+            <RejectForm
+                rowId={row.getValue("id")}
+                open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
+            />
        </Box>
    );
 };
--- a/src/components/dashboard/province-manager/index.jsx
+++ b/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>
--- a/src/components/dashboard/transportation-assistance/TableRowActions.jsx
+++ b/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
-                    rowId={rowId}
-                    open={openConfirmDialog}
-                    handleClose={handleCloseConfirmDialog}
-                    confirmData={confirmData}
-                />
-            )}
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                open={openConfirmDialog}
+                handleClose={handleCloseConfirmDialog}
+                confirmData={confirmData}
+            />
            <Tooltip title={t("RejectDialog.reject")}>
-                <IconButton color="primary" onClick={() => handleOpenRejectDialog(row)}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
                    <ThumbDownIcon/>
                </IconButton>
            </Tooltip>
-            {openRejectDialog && (
-                <RejectForm
-                    rowId={rowId}
-                    open={openRejectDialog}
-                    handleClose={handleCloseRejectDialog}
-                    rejectData={rejectData}
-                />
-            )}
+            <RejectForm
+                rowId={row.getValue("id")}
+                open={openRejectDialog}
+                handleClose={handleCloseRejectDialog}
+                rejectData={rejectData}
+            />
        </Box>
    );
 };
--- a/src/components/dashboard/transportation-assistance/index.jsx
+++ b/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>
--- a/src/components/login-expert/index.jsx
+++ b/src/components/login-expert/index.jsx
@@ -27,125 +27,100 @@ const LoginComponent = () => {

    //formik properties
    const handleSubmit = async (values, props) => {
+        Notifications(directionApp, t);
        await axios
            .post(GET_USER_TOKEN, {
-                username: values.username,
-                password: values.password,
+                username: values.username, password: values.password,
            })
            .then(function (response) {
                setToken(response.data.token);
            })
            .catch(function (error) {
-                Notifications(directionApp, error.response, t);
+                Notifications(directionApp, t, error.response);
                props.setSubmitting(false);
            });
    };
    const initialValues = {
-        username: "",
-        password: "",
+        username: "", password: "",
    };
    const validationSchema = Yup.object().shape({
        username: Yup.string().required(t("LoginPage.error_message_required")),
        password: Yup.string().required(t("LoginPage.error_message_required")),
    });

-    return (
-        <FullPageLayout sx={{p: 1}}>
-            <CenterLayout>
-                <Container maxWidth="sm">
-                    <Paper elevation={0}>
-                        <Formik
-                            initialValues={initialValues}
-                            onSubmit={handleSubmit}
-                            validationSchema={validationSchema}
-                        >
-                            {(props) => (
-                                <Stack spacing={2} sx={{p: 2}}>
+    return (<FullPageLayout sx={{p: 1}}>
+        <CenterLayout>
+            <Container maxWidth="sm">
+                <Paper elevation={0}>
+                    <Formik
+                        initialValues={initialValues}
+                        onSubmit={handleSubmit}
+                        validationSchema={validationSchema}
+                    >
+                        {(props) => (<Stack spacing={2} sx={{p: 2}}>
+                            <Box
+                                sx={{position: "relative", width: "100%", height: 200}}
+                            >
+                                <Image fill src="/images/login.svg" alt={t("app_name")}/>
+                            </Box>
+                            <Typography margin={2} variant="h4" textAlign="center">
+                                {t("login_expert")}
+                            </Typography>
+                            <StyledForm sx={{width: "100%"}}>
+                                <Stack spacing={3} sx={{p: 2}}>
+                                    <Field
+                                        as={TextField}
+                                        name="username"
+                                        variant="outlined"
+                                        label={t("LoginPage.text_field_user_name")}
+                                        placeholder={t("LoginPage.text_field_enter_your_username")}
+                                        type={"text"}
+                                        error={props.touched.username && props.errors.username ? true : false}
+                                        fullWidth
+                                        helperText={props.touched.username ? props.errors.username : null}
+                                    />
+                                    <PasswordField
+                                        name="password"
+                                        label={t("LoginPage.text_field_password")}
+                                        error={props.touched.password && props.errors.password ? true : false}
+                                        helperText={props.touched.password ? props.errors.password : null}
+                                        placeholder={t("LoginPage.text_field_enter_your_password")}
+                                    />
                                    <Box
-                                        sx={{position: "relative", width: "100%", height: 200}}
+                                        sx={{
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "space-between",
+                                        }}
                                    >
-                                        <Image fill src="/images/login.svg" alt={t("app_name")}/>
+                                        <Button
+                                            type="submit"
+                                            variant="contained"
+                                            fullWidth
+                                            size="medium"
+                                            endIcon={<LoginIcon/>}
+                                            disabled={props.isSubmitting ? true : false}
+                                        >
+                                            {t("LoginPage.button_submit")}
+                                        </Button>
                                    </Box>
-                                    <Typography margin={2} variant="h4" textAlign="center">
-                                        {t("login_expert")}
-                                    </Typography>
-                                    <StyledForm sx={{width: "100%"}}>
-                                        <Stack spacing={3} sx={{p: 2}}>
-                                            <Field
-                                                as={TextField}
-                                                name="username"
-                                                variant="outlined"
-                                                label={t("LoginPage.text_field_user_name")}
-                                                placeholder={t(
-                                                    "LoginPage.text_field_enter_your_username"
-                                                )}
-                                                type={"text"}
-                                                error={
-                                                    props.touched.username && props.errors.username
-                                                        ? true
-                                                        : false
-                                                }
-                                                fullWidth
-                                                helperText={
-                                                    props.touched.username ? props.errors.username : null
-                                                }
-                                            />
-                                            <PasswordField
-                                                name="password"
-                                                label={t("LoginPage.text_field_password")}
-                                                error={
-                                                    props.touched.password && props.errors.password
-                                                        ? true
-                                                        : false
-                                                }
-                                                helperText={
-                                                    props.touched.password ? props.errors.password : null
-                                                }
-                                                placeholder={t(
-                                                    "LoginPage.text_field_enter_your_password"
-                                                )}
-                                            />
-                                            <Box
-                                                sx={{
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "space-between",
-                                                }}
-                                            >
-                                                <Button
-                                                    type="submit"
-                                                    variant="contained"
-                                                    fullWidth
-                                                    size="medium"
-                                                    endIcon={<LoginIcon/>}
-                                                    disabled={props.isSubmitting ? true : false}
-                                                >
-                                                    {t("LoginPage.button_submit")}
-                                                </Button>
-                                            </Box>
-                                        </Stack>
-                                    </StyledForm>
                                </Stack>
-                            )}
-                        </Formik>
-                    </Paper>
-                </Container>
-            </CenterLayout>
-            <Stack direction="row" alignItems="center" justifyContent="center">
-                <LinkRouting
-                    sx={{margin: 2}}
-                    href={
-                        backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
-                    }
-                >
-                    {t("LoginPage.link_routing_back_to")}{" "}
-                    {backUrlDecodedPath
-                        ? t("LoginPage.link_routing_previuos_page")
-                        : t("LoginPage.link_routing_main_page")}
-                </LinkRouting>
-            </Stack>
-        </FullPageLayout>
-    );
+                            </StyledForm>
+                        </Stack>)}
+                    </Formik>
+                </Paper>
+            </Container>
+        </CenterLayout>
+        <Stack direction="row" alignItems="center" justifyContent="center">
+            <LinkRouting
+                sx={{margin: 2}}
+                href={backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"}
+            >
+                {t("LoginPage.link_routing_back_to")}{" "}
+                {backUrlDecodedPath ? t("LoginPage.link_routing_previuos_page") : t("LoginPage.link_routing_main_page")}
+            </LinkRouting>
+        </Stack>
+    </FullPageLayout>);
 };

 export default LoginComponent;