Merge branch 'develop' into 'feature/darkLightTheme'

# Conflicts: # src/components/login-expert/index.jsx # src/layouts/MuiLayout.jsx
2023-08-07 10:43:41 +00:00
parent ef83aecd5e aaac273a57
commit d1f031f593
23 changed files with 433 additions and 429 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>