CFE-4 Merge branch 'feature/CFE-4_role_management_page' into 'develop'

2023-10-10 09:43:09 +00:00
parent c57d5f8570 3c9c955105
commit 606c167e3a
26 changed files with 1267 additions and 10 deletions
--- a/mocks/handler.js
+++ b/mocks/handler.js
@@ -1,4 +1,4 @@
-import {GET_USER_ROUTE, SET_USER_PASSWORD} from "@/core/data/apiRoutes";
+import {GET_PERMISSIONS_LIST, GET_USER_ROUTE,SET_USER_PASSWORD} from "@/core/data/apiRoutes";
 import {rest} from "msw";

 export const handler = [
@@ -14,4 +14,23 @@ export const handler = [
            ctx.status(200),
        );
    }),
+    rest.get(GET_PERMISSIONS_LIST, (req, res, ctx) => {
+        return res(ctx.json(
+            {
+                data:[
+                    {
+                        id: 1,
+                        name: "manage_passenger_office_navgan",
+                        name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+                    },
+                    {
+                        id: 2,
+                        name: "manage_province_working_group_navgan",
+                        name_fa:"مدیریت کارتابل کارگروه استانی"
+                    }
+                ]
+            }
+        ))
+    }),
+
 ]
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -34,6 +34,7 @@
    "dashboard": "داشبورد",
    "change-password": "تغییر رمز عبور",
    "edit-profile": "ویرایش پروفایل",
+    "role-management": "مدیریت دسترسی",
    "admin": "مدیریت"
  },
  "secondary": {
@@ -72,7 +73,8 @@
  "Dashboard": {
    "dashboard_page": "داشبورد",
    "change_password": "تغییر رمز عبور",
-    "edit_profile": "ویرایش پروفایل"
+    "edit_profile": "ویرایش پروفایل",
+    "role_management_page": "مدیریت دسترسی"
  },
  "MuiDatePicker": {
    "date_picker_birthday": "تاریخ"
@@ -122,5 +124,67 @@
    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
    "delete": "پاک کردن",
    "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
+  },
+  "RoleManagement": {
+    "id": "کد یکتا",
+    "name_fa": "نام فارسی ",
+    "name": "نام انگلیسی",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی"
+  },
+  "AddDialog": {
+    "add": "افزودن",
+    "name_en": "نام انگلیسی",
+    "name_en_error": "وارد کردن نام انگلیسی الزامیست",
+    "name_fa": "نام فارسی",
+    "name_fa_error": "وارد کردن نام فارسی الزامیست",
+    "permission": "دسترسی",
+    "permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
+    "phone_number": "شماره تلفن",
+    "phone_number_positive": "شماره تلفن باید مثبت باشد",
+    "phone_number_error": "وارد کردن شماره تلفن الزامیست",
+    "phone_number_number": "شماره تلفن باید شامل اعداد باشد",
+    "phone_number_max": "شماره تلفن باید شامل 11 رقم باشد",
+    "national_id_positive": "کد ملی باید مثبت باشد",
+    "national_id_number": "کد ملی باید شامل اعداد باشد",
+    "national_id_max": "کد ملی باید شامل 10 رقم باشد",
+    "national_id": "کد ملی",
+    "national_id_error": "وارد کردن کد ملی الزامیست",
+    "type_id_error": "وارد کردن نوع کاربر الزامیست",
+    "navgan_id_error": "وارد کردن کد ناوگان الزامیست",
+    "refahi": "رفاهی",
+    "navgan": "ناوگان",
+    "type_id": "نوع کاربر",
+    "navgan_id": "کد ناوگان",
+    "button-cancel": "انصراف",
+    "button-add": "ثبت"
+  },
+  "UpdateDialog": {
+    "update": "ویرایش",
+    "description": "توضیحات خود را وارد نمائید",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "next-state-id": "وضعیت",
+    "next-state-id-error": "وارد کردن وضعیت الزامیست",
+    "update-tooltip": "ویرایش",
+    "button-cancel": "بستن",
+    "refahi": "رفاهی",
+    "navgan": "ناوگان",
+    "phone_number": "شماره تلفن",
+    "national_id": "کد ملی",
+    "name_en": "نام انگلیسی",
+    "name_en_error": "وارد کردن نام انگلیسی الزامیست",
+    "name_fa": "نام فارسی",
+    "name_fa_error": "وارد کردن نام فارسی الزامیست",
+    "permission": "دسترسی",
+    "permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
+    "type_id": "نوع کاربر",
+    "navgan_id": "کد ناوگان",
+    "button-update": "ثبت"
+  },
+  "DeleteDialog": {
+    "delete": "حذف",
+    "button-cancel": "انصراف",
+    "typography": "آیا از حدف این مورد اطمینان دارید ؟",
+    "button-delete": "حذف کردن"
  }
 }
--- a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
+++ b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
@@ -0,0 +1,140 @@
+import {
+    Button,
+    Checkbox,
+    DialogActions,
+    DialogContent, DialogTitle,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    FormLabel,
+    Grid,
+    Stack,
+    TextField
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import * as Yup from "yup";
+import {useFormik} from "formik";
+import {ADD_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import usePermissions from "@/lib/app/hooks/usePermissions";
+
+const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const {permissions_list} = usePermissions()
+    const validationSchema = Yup.object().shape({
+        name_en: Yup.string().required(t("AddDialog.name_en_error")),
+        name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
+        permissions: Yup.array().min(1, t("AddDialog.permission_min_error")).required(t("AddDialog.permission")),
+    });
+    const formik = useFormik({
+        initialValues: {
+            name_en: "",
+            name_fa: "",
+            permissions: [],
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name_en);
+            formData.append("name_fa", values.name_fa);
+            for (let i = 0; i < values.permissions.length; i++) {
+                formData.append(`permissions[${i}]`, values.permissions[i]);
+            }
+
+            requestServer(ADD_ROLE_MANAGEMENT, 'post', {
+                data: formData,
+            }).then(() => {
+                setOpenConfirmDialog(false)
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogTitle>{t("AddDialog.add")}</DialogTitle>
+            <DialogContent>
+                <Stack sx={{mt: 2}} spacing={2}>
+                    <Stack direction="row" spacing={2}>
+                        <TextField
+                            name="name_en"
+                            label={t("AddDialog.name_en")}
+                            type="text"
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_en")}
+                            error={formik.touched.name_en && Boolean(formik.errors.name_en)}
+                            helperText={formik.touched.name_en && formik.errors.name_en}
+
+                        />
+                        <TextField
+                            name="name_fa"
+                            label={t("AddDialog.name_fa")}
+                            value={formik.values.name_fa}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_fa")}
+                            error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
+                            helperText={formik.touched.name_fa && formik.errors.name_fa}
+
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormLabel>{t("AddDialog.permission")}<br/>
+                            <FormControl
+                                name="permissions"
+                                error={formik.touched.permissions && Boolean(formik.errors.permissions)}
+                                onBlur={formik.handleBlur("permissions")}
+                                sx={{mt: 2}}
+                                fullWidth
+                            >
+                                <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
+                                <Grid container spacing={2}>
+                                    {permissions_list ? (
+                                        permissions_list.map((permission) => (
+                                            <Grid key={permission.id} item xs={6}>
+                                                <FormControlLabel
+                                                    control={
+                                                        <Checkbox
+                                                            data-testid="PermissionList-checkbox"
+                                                            checked={formik.values.permissions.includes(permission.id)}
+                                                            onChange={(e) => {
+                                                                if (e.target.checked) {
+                                                                    formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                } else {
+                                                                    formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                }
+                                                            }}
+                                                        />
+                                                    }
+                                                    label={permission.name_fa}
+                                                />
+                                            </Grid>
+                                        ))
+                                    ) : null}
+                                </Grid>
+                            </FormControl>
+                        </FormLabel>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("AddDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("AddDialog.button-add")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default CreateContent
--- a/src/components/dashboard/role-management/Form/CreateForm/test/CreateContent.test.js
+++ b/src/components/dashboard/role-management/Form/CreateForm/test/CreateContent.test.js
@@ -0,0 +1,158 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import CreateContent from "@/components/dashboard/role-management/Form/CreateForm/CreateContent";
+
+describe("Create Content component from Create Form Component in Role Management Component",()=>{
+    describe("Rendering", ()=>{
+        it('should see AddDialog text in the top ', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("افزودن")
+            expect(textElement).toBeInTheDocument()
+        });
+        it('should see name_en text', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام انگلیسی")
+            expect(textElement).toBeInTheDocument()
+        });
+        it('should see name_fa text', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            expect(textElement).toBeInTheDocument()
+        });
+        it('should see name_fa text', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            expect(textElement).toBeInTheDocument()
+        });
+
+    })
+
+    describe("Behavior",()=>{
+        it('should see what fill in the name_en input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
+
+            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameEnglishInput).toHaveValue('testuser');
+            })
+        });
+        it('should see what fill in the name_fa input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const nameFarsiInput = screen.getByLabelText('نام فارسی');
+
+            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameFarsiInput).toHaveValue('testuser');
+            })
+        });
+        it('should return permissions_list', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
+            expect(checkboxElement).toHaveLength(2)
+        });
+
+        it('should get checked if permission list item get clicked', () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
+
+            expect(checkboxElement).not.toBeChecked();
+
+            fireEvent.click(checkboxElement);
+
+            expect(checkboxElement).toBeChecked();
+        });
+    })
+    describe("Validation",()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_faInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.blur(name_enInput);
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see errors when click on submit button and field not completed', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateContent/>
+                </MockAppWithProviders>
+            )
+            const submitButtonElement = screen.queryByText("ثبت")
+            fireEvent.click(submitButtonElement)
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            await waitFor(()=>{
+                expect(screen.queryByText("حداقل باید یک دسترسی انتخاب شود")).toBeInTheDocument()
+            })
+        });
+    })
+})
--- a/src/components/dashboard/role-management/Form/CreateForm/test/index.test.js
+++ b/src/components/dashboard/role-management/Form/CreateForm/test/index.test.js
@@ -0,0 +1,30 @@
+import {fireEvent, queryByText, render, screen} from "@testing-library/react";
+import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+
+describe("Create Form Component from Role Management Component",()=>{
+    describe("Rendering",()=>{
+
+        it('should see Dialog text',  () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateForm />
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("افزودن")
+            expect(textElement).toBeInTheDocument()
+        });
+
+        it('should see Tooltip text when mouse over',  () => {
+            render(
+                <MockAppWithProviders>
+                    <CreateForm />
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByText("افزودن");
+            fireEvent.mouseOver(buttonElement);
+            const tooltipTextElement = screen.getByText("افزودن");
+            expect(tooltipTextElement).toBeInTheDocument();
+        });
+    })
+})
--- a/src/components/dashboard/role-management/Form/CreateForm/index.jsx
+++ b/src/components/dashboard/role-management/Form/CreateForm/index.jsx
@@ -0,0 +1,34 @@
+import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import CreateContent from "./CreateContent";
+
+const CreateForm = ({mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("AddDialog.add")} arrow placement="right">
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    startIcon={<DataSaverOnIcon/>}
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    {t("AddDialog.add")}
+                </Button>
+            </Tooltip>
+            <Dialog maxWidth={"md"} open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default CreateForm
--- a/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx
+++ b/src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx
@@ -0,0 +1,42 @@
+import {Button, DialogActions, DialogContent, DialogTitle, Typography} from "@mui/material";
+import {DELETE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import {useTranslations} from "next-intl";
+
+const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const handleSubmit = () => {
+        setIsSubmitting(true)
+        requestServer(`${DELETE_ROLE_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
+            mutate(fetchUrl)
+            update_notification()
+        }).catch(() => {
+        }).finally(() => {
+            setIsSubmitting(false)
+        });
+    }
+    return(
+        <>
+            <DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
+            <DialogContent>
+                <Typography>{t("DeleteDialog.typography")}</Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={isSubmitting} autoFocus>
+                    {t("DeleteDialog.button-cancel")}
+                </Button>
+                <Button onClick={handleSubmit} variant="contained" color="primary"
+                        disabled={isSubmitting}>
+                    {t("DeleteDialog.button-delete")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export  default DeleteContent
--- a/src/components/dashboard/role-management/Form/DeleteForm/test/DeleteContent.test.js
+++ b/src/components/dashboard/role-management/Form/DeleteForm/test/DeleteContent.test.js
@@ -0,0 +1,53 @@
+import {act, render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+
+describe("Create Content component from Create Form Component in Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see DeleteDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("حذف")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see DeleteDialog text content ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
+            act(()=>{
+                expect(textElement).toBeInTheDocument()
+            })
+        })
+        it('should see delete text in the delete button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("حذف کردن")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteContent rowId={1}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("انصراف")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+})
--- a/src/components/dashboard/role-management/Form/DeleteForm/test/index.test.js
+++ b/src/components/dashboard/role-management/Form/DeleteForm/test/index.test.js
@@ -0,0 +1,21 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+
+describe("Create Form Component from Role Management Component",()=> {
+    describe("Rendering", () => {
+        it('should see Dialog text when mouse is over', async () => {
+            render(
+                <MockAppWithProviders>
+                    <DeleteForm />
+                </MockAppWithProviders>
+            )
+            const textElement = screen.getByTestId("dialog_tooltip")
+            fireEvent.mouseOver(textElement)
+            await waitFor(()=>{
+                expect(screen.getByText("حذف")).toBeInTheDocument();
+            })
+        });
+    })
+})
--- a/src/components/dashboard/role-management/Form/DeleteForm/index.jsx
+++ b/src/components/dashboard/role-management/Form/DeleteForm/index.jsx
@@ -0,0 +1,35 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Dialog, IconButton,
+    Tooltip,
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
+
+const DeleteForm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+
+    return (
+        <>
+            <Tooltip title={t("DeleteDialog.delete")}>
+                <IconButton
+                    data-testid="dialog_tooltip"
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <DeleteIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth="sm" open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DeleteContent rowId={rowId} fetchUrl={fetchUrl} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog} />
+            </Dialog>
+        </>
+    );
+};
+export default DeleteForm;
--- a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
+++ b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
@@ -0,0 +1,139 @@
+import {
+    Button,
+    Checkbox, DialogActions,
+    DialogContent, DialogTitle,
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    FormLabel,
+    Grid,
+    Stack,
+    TextField
+} from "@mui/material";
+import {useFormik} from "formik";
+import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import * as Yup from "yup";
+import usePermissions from "@/lib/app/hooks/usePermissions";
+import useNotification from "@/lib/app/hooks/useNotification";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {useTranslations} from "next-intl";
+
+const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const {permissions_list} = usePermissions()
+
+    const validationSchema = Yup.object().shape({
+        name_en: Yup.string().required(t("UpdateDialog.name_en_error")),
+        name_fa: Yup.string().required(t("UpdateDialog.name_fa_error")),
+        permissions: Yup.array().min(1, t("UpdateDialog.permission_min_error")).required(t("UpdateDialog.permission")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            name_en: row.getValue("name"),
+            name_fa: row.getValue("name_fa"),
+            permissions: row.original.permissions.map((obj) => obj.id),
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name_en);
+            formData.append("name_fa", values.name_fa);
+            for (let i = 0; i < values.permissions.length; i++) {
+                formData.append(`permissions[${i}]`, values.permissions[i]);
+            }
+
+            requestServer(`${UPDATE_ROLE_MANAGEMENT}/${row.getValue("id")}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return(
+        <>
+            <DialogTitle>{t("UpdateDialog.update")}</DialogTitle>
+            <DialogContent>
+                <Stack sx={{mt: 2}} spacing={2}>
+                    <Stack direction="row" spacing={2} sx={{mt: 1}}>
+                        <TextField
+                            name="name_en"
+                            label={t("UpdateDialog.name_en")}
+                            value={formik.values.name_en}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_en")}
+                            error={formik.touched.name_en && Boolean(formik.errors.name_en)}
+                            helperText={formik.touched.name_en && formik.errors.name_en}
+                        />
+                        <TextField
+                            name="name_fa"
+                            label={t("UpdateDialog.name_fa")}
+                            value={formik.values.name_fa}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("name_fa")}
+                            error={formik.touched.name_fa && Boolean(formik.errors.name_fa)}
+                            helperText={formik.touched.name_fa && formik.errors.name_fa}
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormLabel>{t("UpdateDialog.permission")}<br/>
+                            <FormControl
+                                name="permissions"
+                                error={formik.touched.permissions && Boolean(formik.errors.permissions)}
+                                onBlur={formik.handleBlur("permissions")}
+                                sx={{mt: 2}}
+                                fullWidth
+                            >
+                                <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
+                                <Grid container spacing={2}>
+                                    {permissions_list ? (
+                                        permissions_list.map((permission) => (
+                                            <Grid key={permission.id} item xs={6}>
+                                                <FormControlLabel
+                                                    control={
+                                                        <Checkbox
+                                                            data-testid="PermissionList-checkbox"
+                                                            checked={formik.values.permissions.includes(permission.id)}
+                                                            onChange={(e) => {
+                                                                if (e.target.checked) {
+                                                                    formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
+                                                                } else {
+                                                                    formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
+                                                                }
+                                                            }}
+                                                        />
+                                                    }
+                                                    label={permission.name_fa}
+                                                />
+                                            </Grid>
+                                        ))
+                                    ) : null}
+                                </Grid>
+                            </FormControl>
+                        </FormLabel>
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("UpdateDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("UpdateDialog.button-update")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default UpdateContent
--- a/src/components/dashboard/role-management/Form/UpdateForm/test/UpdateContent.test.js
+++ b/src/components/dashboard/role-management/Form/UpdateForm/test/UpdateContent.test.js
@@ -0,0 +1,201 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+const row = {
+    id : 0,
+    getValue : name => {
+        if (name === "name") {
+            return "manage_passenger_office_navgan";
+        }
+        else if (name === "name_fa") {
+            return "مدیریت کارتابل رییس اداره مسافری استان";
+        }
+    },
+    original : {
+        permissions : [
+            {
+                id: 1,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            },
+            {
+                id: 2,
+                name: "manage_passenger_office_navgan",
+                name_fa: "مدیریت کارتابل رییس اداره مسافری استان"
+            }
+        ]
+    }
+}
+
+describe("Create Content component from Create Form Component in Role Management Component",()=>{
+    describe("Rendering", ()=>{
+        it('should see AddDialog text in the top ', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByText("ویرایش")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_en text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام انگلیسی")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see name_fa text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.queryByLabelText("نام فارسی")
+            act(()=>{
+            expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see update text in the submit button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("ثبت")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+        it('should see cancel text in the cancel button ', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.queryByText("بستن")
+            act(()=>{
+                expect(buttonElement).toBeInTheDocument()
+            })
+        });
+    })
+
+    describe("Behavior", ()=>{
+        it('should see what fill in the name_en input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameEnglishInput = screen.getByLabelText('نام انگلیسی');
+
+            fireEvent.change(nameEnglishInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameEnglishInput).toHaveValue('testuser');
+            })
+        });
+        it('should see what fill in the name_fa input', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const nameFarsiInput = screen.getByLabelText('نام فارسی');
+
+            fireEvent.change(nameFarsiInput, {target: {value: 'testuser'}});
+            await act(()=>{
+                // Simulate user input
+                expect(nameFarsiInput).toHaveValue('testuser');
+            })
+        });
+        it('should return permissions_list', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = await screen.findAllByTestId("PermissionList-checkbox")
+            expect(checkboxElement).toHaveLength(2)
+        });
+        it('should see the value of the name_en that pass to input value', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام انگلیسی")
+            expect(name_enElement).toHaveValue("manage_passenger_office_navgan")
+        });
+        it('should see the value of the name_fa that pass to input value', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enElement = screen.getByLabelText("نام فارسی")
+            expect(name_enElement).toHaveValue("مدیریت کارتابل رییس اداره مسافری استان")
+        });
+        it('should get checked if the id exists in permission lists', () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const checkboxElement = screen.getByLabelText("مدیریت کارتابل رییس اداره مسافری استان")
+
+            expect(checkboxElement).toBeChecked();
+        });
+    })
+    describe("Validation", ()=>{
+        it('should see error text when name_fa input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_faInput = screen.getByLabelText("نام فارسی")
+            expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            fireEvent.change(name_faInput, {target : {value : ''}});
+
+            fireEvent.blur(name_faInput)
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_faInput, {target : {value : "نام فارسی"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام فارسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+        it('should see error text when name_en input is empty', async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateContent row={row}/>
+                </MockAppWithProviders>
+            )
+            const name_enInput = screen.getByLabelText("نام انگلیسی")
+            expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+
+            fireEvent.change(name_enInput, {target : {value : null}});
+            fireEvent.blur(name_enInput)
+
+            await waitFor(()=>{
+
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).toBeInTheDocument()
+            })
+            fireEvent.change(name_enInput, {target : {value : "english name"}})
+
+            await waitFor(()=>{
+                expect(screen.queryByText("وارد کردن نام انگلیسی الزامیست")).not.toBeInTheDocument()
+            })
+        })
+    })
+})
--- a/src/components/dashboard/role-management/Form/UpdateForm/test/index.test.js
+++ b/src/components/dashboard/role-management/Form/UpdateForm/test/index.test.js
@@ -0,0 +1,22 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+import userEvent from "@testing-library/user-event";
+
+describe("Create Form Component from Role Management Component",()=>{
+    describe("Rendering",()=>{
+        it('should see Tooltip text when mouse over',  async () => {
+            render(
+                <MockAppWithProviders>
+                    <UpdateForm />
+                </MockAppWithProviders>
+            )
+            const buttonElement = screen.getByTestId("dialog_tooltip");
+            fireEvent.mouseOver(buttonElement);
+            await waitFor(()=>{
+                expect(screen.queryByText("ویرایش")).toBeVisible();
+            })
+        });
+    })
+})
--- a/src/components/dashboard/role-management/Form/UpdateForm/index.jsx
+++ b/src/components/dashboard/role-management/Form/UpdateForm/index.jsx
@@ -0,0 +1,31 @@
+import {Dialog, IconButton, Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
+import EditIcon from "@mui/icons-material/Edit";
+
+const UpdateForm = ({mutate, fetchUrl, row}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip  title={t("UpdateDialog.update")} arrow placement="right">
+                <IconButton
+                    data-testid="dialog_tooltip"
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true);
+                    }}
+                >
+                    <EditIcon />
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth={"md"} open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <UpdateContent mutate={mutate} row={row} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default UpdateForm
--- a/src/components/dashboard/role-management/RoleManagementComponent.jsx
+++ b/src/components/dashboard/role-management/RoleManagementComponent.jsx
@@ -0,0 +1,94 @@
+import DataTable from "@/core/components/DataTable";
+import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
+import TableRowActions from "@/components/dashboard/role-management/TableRowActions";
+import {Box, Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useMemo} from "react";
+import moment from "jalali-moment";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
+
+const RoleManagementComponent = () => {
+    const t = useTranslations();
+
+    const columns = useMemo(() => [{
+        accessorFn: (row) => row.id,
+        id: "id",
+        sortDescFirst: true,
+        header: t("RoleManagement.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    },
+        {
+            accessorFn: (row) => row.name_fa,
+            id: "name_fa",
+            header: t("RoleManagement.name_fa"),
+            enableColumnFilter: true,
+            datatype: "text",
+            filterFn: "contains",
+            columnFilterModeOptions: ["contains", "equals", "notEquals"],
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        },
+        {
+            accessorFn: (row) => row.name,
+            id: "name",
+            header: t("RoleManagement.name"),
+            enableColumnFilter: true,
+            datatype: "text",
+            filterFn: "contains",
+            columnFilterModeOptions: ["contains"],
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        },
+        {
+            accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+            id: "created_at",
+            header: t("RoleManagement.created_at"),
+            enableColumnFilter: true,
+            datatype: "date",
+            filterFn: "lessThan",
+            columnFilterModeOptions: ["lessThan", "greaterThan"],
+            Cell: ({renderedCellValue}) => {
+                return <Typography variant="body2">{renderedCellValue}</Typography>;
+            },
+            Header: ({column}) => <>{column.columnDef.header}</>,
+            Filter: ({column}) => {
+                return (<MuiDatePicker column={column}/>);
+            },
+        }, {
+            accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+            id: "updated_at",
+            header: t("RoleManagement.updated_at"),
+            enableColumnFilter: false,
+            datatype: "numeric",
+            Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        }], []);
+    return(
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_ROLE_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                sorting={[{
+                    id: 'id', desc: true
+                }]}
+                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 should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    )
+}
+export default RoleManagementComponent
--- a/src/components/dashboard/role-management/TableRowActions.jsx
+++ b/src/components/dashboard/role-management/TableRowActions.jsx
@@ -0,0 +1,24 @@
+import {Box} from "@mui/material";
+import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
+import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
+
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <UpdateForm
+                row={row}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <DeleteForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;
--- a/src/components/dashboard/role-management/TableToolbar.jsx
+++ b/src/components/dashboard/role-management/TableToolbar.jsx
@@ -0,0 +1,11 @@
+import {useTranslations} from "next-intl";
+import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+
+    return <CreateForm mutate={mutate} fetchUrl={fetchUrl}/>
+
+}
+
+export default TableToolbar;
--- a/src/components/dashboard/role-management/test/RoleManagementComponent.test.js
+++ b/src/components/dashboard/role-management/test/RoleManagementComponent.test.js
@@ -0,0 +1,53 @@
+import {render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../mocks/AppWithProvider";
+import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
+
+describe("Role Management", ()=>{
+    describe("Rendering", ()=>{
+        it('should see id title of data table', () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const idEelement = screen.queryByText("کد یکتا")
+            expect(idEelement).toBeInTheDocument()
+        });
+        it('should see name title of data table', () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const nameEelement = screen.queryByText("نام انگلیسی")
+            expect(nameEelement).toBeInTheDocument()
+        });
+        it('should see name_fa title of data table', () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const name_faEelement = screen.queryByText("نام فارسی")
+            expect(name_faEelement).toBeInTheDocument()
+        });
+        it('should see created at title of data table', () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const createdEelement = screen.queryByText("تاریخ درخواست")
+            expect(createdEelement).toBeInTheDocument()
+        });
+        it('should see updated at title of data table', () => {
+            render(
+                <MockAppWithProviders>
+                    <RoleManagementComponent />
+                </MockAppWithProviders>
+            )
+            const updateEelement = screen.queryByText("تاریخ بروزرسانی")
+            expect(updateEelement).toBeInTheDocument()
+        });
+    })
+})
--- a/src/components/dashboard/role-management/index.jsx
+++ b/src/components/dashboard/role-management/index.jsx
@@ -0,0 +1,13 @@
+import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
+import DashboardLayout from "@/layouts/DashboardLayout";
+
+function DashboardRoleManagementComponent() {
+
+    return (
+        <DashboardLayout>
+            <RoleManagementComponent />
+        </DashboardLayout>
+    );
+}
+
+export default DashboardRoleManagementComponent;
--- a/src/components/login-expert/test/LoginExpertComponent.test.js
+++ b/src/components/login-expert/test/LoginExpertComponent.test.js
@@ -124,6 +124,7 @@ describe('Login expert component from login page', () => {
    })
    describe("validation", ()=>{
        it("Disabled submit button until fields completed", async ()=> {
+
            render(
                <MockAppWithProviders>
                    <LoginExpertComponent/>
--- a/src/core/components/DataTable.jsx
+++ b/src/core/components/DataTable.jsx
@@ -134,8 +134,8 @@ function DataTable(props) {
            renderTopToolbarCustomActions={({table}) => (
                <>
                    {props.enableCustomToolbar /* send condition */
-                        ? props.CustomToolbar /* send component */
-                        : ""}
+                        ? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate} /> /* send component */
+                        : "<span></span>"}
                </>
            )}
            renderBottomToolbarCustomActions={({table}) => (
@@ -159,7 +159,6 @@ function DataTable(props) {
                </>
            )}
            state={{
-                isLoading: isValidating,
                columnFilters,
                columnFilterFns,
                pagination,
--- a/src/core/data/apiRoutes.js
+++ b/src/core/data/apiRoutes.js
@@ -10,4 +10,18 @@ export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";

 //user data
 export const GET_USER_ROUTE = BASE_URL + "/api/profile/info";
-//user data
+//user data
+
+// role management
+export const GET_ROLE_MANAGEMENT =
+    BASE_URL + "/api/roles"
+export const ADD_ROLE_MANAGEMENT =
+    BASE_URL + "/api/roles"
+export const UPDATE_ROLE_MANAGEMENT =
+    BASE_URL + "/api/roles"
+export const DELETE_ROLE_MANAGEMENT =
+    BASE_URL + "/api/roles"
+
+export const GET_PERMISSIONS_LIST =
+    BASE_URL + "/api/permissions/list"
+//role management
--- a/src/core/data/sidebarMenu.jsx
+++ b/src/core/data/sidebarMenu.jsx
@@ -1,4 +1,5 @@
 import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
+import AccessibilityIcon from '@mui/icons-material/Accessibility';

 const sidebarMenu = [
    [
@@ -10,6 +11,15 @@ const sidebarMenu = [
            selected: false,
            permission: "all",
        },
+        {
+            key: "sidebar.role-management",
+            name : "role_management",
+            type: "page",
+            route: "/dashboard/role-management",
+            icon: <AccessibilityIcon />,
+            selected: false,
+            permission: "manage_roles",
+        },
    ],
 ];

--- a/src/lib/app/contexts/language.jsx
+++ b/src/lib/app/contexts/language.jsx
@@ -18,7 +18,7 @@ export const LanguageProvider = ({children}) => {
    ];
    const {user, userChangedLanguage, changeLanguageState} = useUser();
    const [languageIsReady, setLanguageIsReady] = useState(false);
-    const [languageApp, setLanguageApp] = useState();
+    const [languageApp, setLanguageApp] = useState(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
    const [directionApp, setDirectionApp] = useState(
        process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
    );
@@ -26,9 +26,7 @@ export const LanguageProvider = ({children}) => {
    useEffect(() => {
        const lang = localStorage.getItem("_language");

-        if (!lang && !languageApp) {
-            setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
-        } else if (lang) {
+        if (lang) {
            setLanguageApp(lang);
        }
    }, []);
--- a/src/lib/app/hooks/usePermissions.jsx
+++ b/src/lib/app/hooks/usePermissions.jsx
@@ -0,0 +1,25 @@
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+import {GET_PERMISSIONS_LIST} from "@/core/data/apiRoutes";
+
+const usePermissions = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    })
+    const permissions_list = data
+    //swr config
+
+    // render data
+    return {permissions_list}
+}
+export default usePermissions;
--- a/src/pages/dashboard/role-management/index.jsx
+++ b/src/pages/dashboard/role-management/index.jsx
@@ -0,0 +1,26 @@
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardRoleManagementComponent from "@/components/dashboard/role-management";
+
+const requiredPermissions = ["manage_roles"];
+export default function RoleManagement() {
+    return (
+        <WithAuthMiddleware>
+            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
+                <DashboardRoleManagementComponent/>
+            </RolePermissionMiddleware>
+        </WithAuthMiddleware>
+    );
+}
+
+export async function getServerSideProps({req, locale}) {
+    const {isBot} = parse(req.headers["user-agent"]);
+    return {
+        props: {
+            messages: (await import(`&/locales/${locale}/app.json`)).default,
+            title: "Dashboard.role_management_page",
+            isBot,
+        },
+    };
+}