CFE-3 Merge branch 'feature/CFE-3_implemention_expert_page_with_testing' into 'develop'

.gitlab-ci.yml

@@ -1,118 +1,118 @@
 image: node:latest
 
 stages:
-  - build
+    - build
-  - test
+    - test
-  - test:build
+    - test:build
-  - deploy
+    - deploy
 
 merge:build:
-  stage: build
+    stage: build
-  script:
+    script:
-    - npm install
+        - npm install
-    - cp example.env.local .env.local
+        - cp example.env.local .env.local
-    - cp example.env.local .env.test
+        - cp example.env.local .env.test
-  only:
+    only:
-    - merge_requests
+        - merge_requests
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 merge:test:jest:
-  stage: test
+    stage: test
-  script:
+    script:
-    - npm run test
+        - npm run test
-  only:
+    only:
-    - merge_requests
+        - merge_requests
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 merge:test:lint:
-  stage: test
+    stage: test
-  script:
+    script:
-    - npm run lint
+        - npm run lint
-  only:
+    only:
-    - merge_requests
+        - merge_requests
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 merge:test:build:
-  stage: test:build
+    stage: test:build
-  script:
+    script:
-    - npm run build
+        - npm run build
-  only:
+    only:
-    - merge_requests
+        - merge_requests
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 build:
-  stage: build
+    stage: build
-  script:
+    script:
-    - npm install
+        - npm install
-    - cp example.env.local .env.local
+        - cp example.env.local .env.local
-    - cp example.env.local .env.test
+        - cp example.env.local .env.test
-  only:
+    only:
-    - develop
+        - develop
-    - main
+        - main
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 test:jest:
-  stage: test
+    stage: test
-  script:
+    script:
-    - npm run test
+        - npm run test
-  only:
+    only:
-    - develop
+        - develop
-    - main
+        - main
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 test:lint:
-  stage: test
+    stage: test
-  script:
+    script:
-    - npm run lint
+        - npm run lint
-  only:
+    only:
-    - develop
+        - develop
-    - main
+        - main
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 test:build:
-  stage: test:build
+    stage: test:build
-  script:
+    script:
-    - npm run build
+        - npm run build
-  only:
+    only:
-    - develop
+        - develop
-    - main
+        - main
-  artifacts:
+    artifacts:
-    paths:
+        paths:
-      - node_modules
+            - node_modules
-      - .env.local
+            - .env.local
-      - .env.test
+            - .env.test
 
 deploy:
-  stage: deploy
+    stage: deploy
-  script:
+    script:
-    - echo "Run deploy project"
+        - echo "Run deploy project"
-  only:
+    only:
-    - main
+        - main

mocks/handler.js

@@ -3,7 +3,10 @@ import {
     GET_ROLE_MANAGEMENT,
     GET_SIDEBAR_NOTIFICATION,
     GET_USER_ROUTE,
-    SET_USER_PASSWORD
+    SET_USER_PASSWORD,
+    EXPERT_MANAGEMENT,
+    GET_PROVINCE_LIST,
+    GET_ROLE_LIST,
 } from "@/core/data/apiRoutes";
 import {rest} from "msw";
 
@@ -95,5 +98,49 @@ export const handler = [
             ),
         );
     }),
-
+    rest.get(GET_PROVINCE_LIST, (req, res, ctx) => {
+        return res(ctx.json({
+            data: [
+                {
+                    id: 1,
+                    name: "آذربایجان شرقی"
+                },
+                {
+                    id: 3,
+                    name: "اردبیل"
+                }
+            ]
+        }))
+    }),
+    rest.get(GET_ROLE_LIST, (req, res, ctx) => {
+        return res(ctx.json({
+            data: [
+                {
+                    id: 1,
+                    name: "admin",
+                    name_fa: "ادمین"
+                },
+                {
+                    id: 2,
+                    name: "manager",
+                    name_fa: "مدیر"
+                }
+            ]
+        }))
+    }),
+    rest.post(EXPERT_MANAGEMENT, (req, res, ctx) => {
+        return res(
+            ctx.status(200),
+        );
+    }),
+    rest.delete(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => {
+        return res(
+            ctx.status(200),
+        );
+    }),
+    rest.post(`${EXPERT_MANAGEMENT}/:id`, (req, res, ctx) => {
+        return res(
+            ctx.status(200),
+        );
+    }),
 ]

public/locales/fa/app.json

@@ -35,7 +35,8 @@
     "change-password": "تغییر رمز عبور",
     "edit-profile": "ویرایش پروفایل",
     "role-management": "مدیریت نقش ها",
-    "admin": "مدیریت"
+    "admin": "مدیریت",
+    "expert-management": "مدیریت کارشناسان"
   },
   "secondary": {
   },
@@ -74,7 +75,8 @@
     "dashboard_page": "داشبورد",
     "change_password": "تغییر رمز عبور",
     "edit_profile": "ویرایش پروفایل",
-    "role_management_page": "مدیریت نقش ها"
+    "role_management_page": "مدیریت نقش ها",
+    "expert_management": "مدیریت کارشناسان"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
@@ -188,5 +190,65 @@
     "button-cancel": "انصراف",
     "typography": "آیا از حدف این مورد اطمینان دارید ؟",
     "button-delete": "حذف کردن"
+  },
+  "ExpertMangement": {
+    "id": "کد یکتا",
+    "name": "نام کامل",
+    "username": "نام کاربری",
+    "email": "پست الکترونیک",
+    "phone_number": "شماره همراه",
+    "national_id": "کد ملی",
+    "position": "سمت",
+    "province_fa": "استان",
+    "role_name": "نقش",
+    "gender": "جنسیت",
+    "male": "مرد",
+    "female": "زن",
+    "updated_at": "آخرین بروزرسانی",
+    "create": "افزودن کارشناس",
+    "personal_info": "مشخصات کارشناس",
+    "user_info": "اطلاعات کاربری",
+    "rest_info": "اطلاعات تکمیلی",
+    "text_field_full_name": "نام کامل",
+    "text_field_username": "نام کاربری",
+    "text_field_email": "پست الکترونیک",
+    "text_field_phone_number": "شماره همراه",
+    "text_field_telephone_id": "کد تلفن",
+    "text_field_gender": "جنسیت",
+    "text_field_national_id": "کد ملی",
+    "text_field_password": "رمز عبور",
+    "text_field_position": "سمت",
+    "text_field_province_id": "استان",
+    "text_field_roles": "نقش",
+    "text_field_loading_provinces_list": "درحال دریافت شهر ها",
+    "text_field_error_fetching_provinces": "خطا در دریافت شهر ها",
+    "text_field_loading_roles_list": "درحال دریافت نقش ها",
+    "text_field_error_fetching_roles": "خطا در دریافت نقش ها",
+    "text_field_please_select_province": "ابتدا استان خود را انتخاب کنید",
+    "text_field_loading_cities_list": "درحال دریافت شهر ها",
+    "text_field_error_fetching_cities": "خطا در دریافت شهر ها",
+    "text_field_new_password": "رمز عبور جدید",
+    "error_message_full_name": "نام کامل خود را وارد کنید",
+    "error_message_username": "نام کاربری خود را وارد کنید",
+    "error_message_email": "پست الکترونیک خود را وارد کنید",
+    "error_message_phone_number": "شماره همراه خود را وارد کنید",
+    "error_message_telephone_id": "کد تلفن خود را وارد کنید",
+    "error_message_gender": "جنسیت خود را وارد کنید",
+    "error_message_national_id": "کد ملی خود را وارد کنید",
+    "error_message_password": "رمز عبور خود را وارد کنید",
+    "error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
+    "error_message_position": "سمت خود را وارد کنید",
+    "error_message_province_id": "استان خود را وارد کنید",
+    "error_message_roles": "نقش خود را وارد کنید",
+    "error_message_new_password": "رمز عبور جدید را وارد کنید",
+    "error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
+    "button_cancel": "بستن",
+    "button_confirm": "ثبت",
+    "delete_expert": "حذف کارشناس",
+    "are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟",
+    "button_delete": "حذف",
+    "delete_tooltip": "حذف",
+    "update_tooltip": "ویرایش",
+    "update_expert": "ویرایش کارشناس"
   }
 }

src/components/dashboard/expert-management/DataTable/__tests__/index.test.js

@@ -0,0 +1,33 @@
+import {render, screen} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../mocks/AppWithProvider";
+import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
+
+describe("ExpertManagementDatatable Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Table Headers Rendered", () => {
+            render(<MockAppWithProviders><ExpertManagementDataTable/></MockAppWithProviders>);
+            const idHeader = screen.queryByText("کد یکتا");
+            const nameHeader = screen.queryByText("نام کامل");
+            const usernameHeader = screen.queryByText("نام کاربری");
+            const emailHeader = screen.queryByText("پست الکترونیک");
+            const phone_numberHeader = screen.queryByText("شماره همراه");
+            const national_idHeader = screen.queryByText("کد ملی");
+            const positionHeader = screen.queryByText("سمت");
+            const province_nameHeader = screen.queryByText("استان");
+            const role_nameHeader = screen.queryByText("نقش");
+            const genderHeader = screen.queryByText("جنسیت");
+            const updated_atHeader = screen.queryByText("آخرین بروزرسانی");
+            expect(idHeader).toBeInTheDocument();
+            expect(nameHeader).toBeInTheDocument();
+            expect(usernameHeader).toBeInTheDocument();
+            expect(emailHeader).toBeInTheDocument();
+            expect(phone_numberHeader).toBeInTheDocument();
+            expect(national_idHeader).toBeInTheDocument();
+            expect(positionHeader).toBeInTheDocument();
+            expect(province_nameHeader).toBeInTheDocument();
+            expect(role_nameHeader).toBeInTheDocument();
+            expect(genderHeader).toBeInTheDocument();
+            expect(updated_atHeader).toBeInTheDocument();
+        });
+    });
+});

src/components/dashboard/expert-management/DataTable/index.jsx

@@ -0,0 +1,189 @@
+import DataTable from "@/core/components/DataTable";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import TableToolbar from "../TableToolbar";
+import TableRowActions from "../TableRowActions";
+import {Box, Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useMemo} from "react";
+import moment from "jalali-moment";
+
+function ExpertManagementDataTable() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("ExpertMangement.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.full_name,
+                id: "name",
+                header: t("ExpertMangement.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.username,
+                id: "username",
+                header: t("ExpertMangement.username"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.email,
+                id: "email",
+                header: t("ExpertMangement.email"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("ExpertMangement.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("ExpertMangement.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.position,
+                id: "position",
+                header: t("ExpertMangement.position"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.province_fa,
+                id: "province_fa",
+                header: t("ExpertMangement.province_fa"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.roles[0].name_fa,
+                id: "roles[0].name_fa",
+                header: t("ExpertMangement.role_name"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.gender,
+                id: "gender",
+                header: t("ExpertMangement.gender"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography
+                        variant="body2">{renderedCellValue === "male" ? t("ExpertMangement.male") : t("ExpertMangement.female")}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("ExpertMangement.updated_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}/>
+                    );
+                },
+            },
+        ],
+        []
+    );
+    return (
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={EXPERT_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                CustomToolbar={TableToolbar}
+                enableCustomToolbar={true}
+                enableLastUpdate={true}
+                enablePinning={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 should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    );
+}
+
+export default ExpertManagementDataTable;

src/components/dashboard/expert-management/Form/ChangePassword/index.jsx

@@ -0,0 +1,7 @@
+const ChangePassword = () => {
+    return (
+        <></>
+    )
+}
+
+export default ChangePassword

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/__tests__/index.test.js

@@ -0,0 +1,219 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+import {useTranslations} from "next-intl";
+import Province from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province";
+
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
+        email: Yup.string().required(t("ExpertMangement.error_message_email")),
+        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
+        telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
+        gender: Yup.string().required(t("ExpertMangement.error_message_gender"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                full_name: "",
+                email: "",
+                phone_number: "",
+                telephone_id: "",
+                national_id: "",
+                gender: ""
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+
+describe("PersonalInfo Component From Expert Management (create)", () => {
+    describe("Rendering", () => {
+        it("full_name TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const fullNameTextField = screen.queryByLabelText('نام کامل');
+                expect(fullNameTextField).toBeInTheDocument();
+            });
+        });
+        it("Email TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const emailTextField = screen.queryByLabelText('پست الکترونیک');
+                expect(emailTextField).toBeInTheDocument();
+            });
+        });
+        it("Phone Number TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+                expect(phoneNumberTextField).toBeInTheDocument();
+            });
+        });
+        it("telephone id TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+                expect(telephoneIdTextField).toBeInTheDocument();
+            });
+        });
+        it("National Id TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const nationalIdTextField = screen.queryByLabelText('کد ملی');
+                expect(nationalIdTextField).toBeInTheDocument();
+            });
+        });
+        it("Gender Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const genderSelectBox = screen.getByTestId('select-box');
+                expect(genderSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Name TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const nameTextField = screen.queryByLabelText('نام کامل');
+            fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
+            await act(() => {
+                expect(nameTextField).toHaveValue('exampleName');
+            })
+        });
+        it("Email TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const emailTextField = screen.queryByLabelText('پست الکترونیک');
+            fireEvent.change(emailTextField, {target: {value: 'exampleEmail'}});
+            await act(() => {
+                expect(emailTextField).toHaveValue('exampleEmail');
+            })
+        });
+        it("Phone Number TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+            fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
+            await act(() => {
+                expect(phoneNumberTextField).toHaveValue('examplePhoneNumber');
+            })
+        });
+        it("Telephone Id TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+            fireEvent.change(telephoneIdTextField, {target: {value: 'exampleTelephoneId'}});
+            await act(() => {
+                expect(telephoneIdTextField).toHaveValue('exampleTelephoneId');
+            })
+        });
+        it("National Id TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const nationalIdTextField = screen.queryByLabelText('کد ملی');
+            fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
+            await act(() => {
+                expect(nationalIdTextField).toHaveValue('exampleNationalId');
+            })
+        });
+        it("Gender Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const genderSelectBox = screen.getByTestId('select-box');
+            const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
+
+            await waitFor(() => {
+                expect(genderSelectBox).toBeInTheDocument();
+            });
+
+            fireEvent.mouseDown(genderSelectOpener);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("مرد");
+                expect(selectItem).toBeInTheDocument();
+            });
+
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Name Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+
+            fireEvent.change(nameInput, {target: {value: ''}});
+            fireEvent.blur(nameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام کامل خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Email Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+
+            fireEvent.change(emailInput, {target: {value: ''}});
+            fireEvent.blur(emailInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پست الکترونیک خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Phone Number Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+
+            fireEvent.change(phoneNumberInput, {target: {value: ''}});
+            fireEvent.blur(phoneNumberInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("شماره همراه خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When telephone Id Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+
+            fireEvent.change(telephoneIdTextField, {target: {value: ''}});
+            fireEvent.blur(telephoneIdTextField);
+
+            await waitFor(() => {
+                expect(screen.queryByText("کد تلفن خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When National Id Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+
+            fireEvent.change(nationalIdInput, {target: {value: ''}});
+            fireEvent.blur(nationalIdInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("کد ملی خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should Select An Item With Valid Value of gender', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const genderInput = screen.getByTestId("input-gender")
+            const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
+
+            fireEvent.mouseDown(genderSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("مرد"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(genderInput.value).toBe('male')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo/index.jsx

@@ -0,0 +1,128 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+const PersonalInfo = ({formik}) => {
+    const t = useTranslations();
+
+    const genderList = [
+        {id: 1, name_en: "male", name_fa: "مرد"},
+        {id: 2, name_en: "female", name_fa: "زن"}
+    ]
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="full_name"
+                    label={t("ExpertMangement.text_field_full_name")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.full_name}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.full_name && !!formik.errors.full_name}
+                    helperText={formik.touched.full_name && formik.errors.full_name ? formik.errors.full_name : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="national_id"
+                    label={t("ExpertMangement.text_field_national_id")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.national_id}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.national_id && !!formik.errors.national_id}
+                    helperText={formik.touched.national_id && formik.errors.national_id ? formik.errors.national_id : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="phone_number"
+                    label={t("ExpertMangement.text_field_phone_number")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.phone_number}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.phone_number && !!formik.errors.phone_number}
+                    helperText={formik.touched.phone_number && formik.errors.phone_number ? formik.errors.phone_number : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="email"
+                    label={t("ExpertMangement.text_field_email")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.email}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.email && !!formik.errors.email}
+                    helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="telephone_id"
+                    label={t("ExpertMangement.text_field_telephone_id")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.telephone_id}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.telephone_id && !!formik.errors.telephone_id}
+                    helperText={formik.touched.telephone_id && formik.errors.telephone_id ? formik.errors.telephone_id : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <FormControl
+                    error={formik.touched.gender && !!formik.errors.gender}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_gender")}</InputLabel>
+                    <Select
+                        name="gender"
+                        label={t("ExpertMangement.text_field_gender")}
+                        value={formik.values.gender}
+                        onChange={(e) => {
+                            formik.setFieldValue("gender", e.target.value);
+                        }}
+                        inputProps={{
+                            "data-testid": "input-gender"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-gender'}}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        variant="outlined"
+                    >
+                        {(
+                            genderList.map((item) => (
+                                <MenuItem key={item.id} value={item.name_en}>
+                                    {item.name_fa}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.gender && formik.errors.gender ? formik.errors.gender : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default PersonalInfo

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/__tests__/index.test.js

@@ -0,0 +1,96 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+import PositionAndRole from "../../PositionAndRole";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        position: Yup.string().required(t("ExpertMangement.error_message_position")),
+        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                position: "",
+                roles: ""
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("PositionAndRole Component From Expert Management (create)", () => {
+    describe("Rendering", () => {
+        it("Position TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const positionTextField = screen.queryByLabelText('سمت');
+                expect(positionTextField).toBeInTheDocument();
+            });
+        });
+        it("Role Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId('select-box');
+            await waitFor(() => {
+                expect(roleSelect).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Position TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const positionTextField = screen.queryByLabelText('سمت');
+            fireEvent.change(positionTextField, {target: {value: 'examplePosition'}});
+            await waitFor(() => {
+                expect(positionTextField).toHaveValue('examplePosition');
+            })
+        });
+        it("Role Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId("option-opener-role");
+            await waitFor(() => {
+                expect(roleSelect).toBeInTheDocument();
+            });
+            fireEvent.mouseDown(roleSelect);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("ادمین");
+                expect(selectItem).toBeInTheDocument();
+            });
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Position Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+
+            const positionInput = screen.queryByLabelText('سمت');
+
+            fireEvent.change(positionInput, {target: {value: ''}});
+            fireEvent.blur(positionInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should Select An Item With Valid Value of role', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleInput = await waitFor(() => screen.getByTestId("input-role-id"));
+            const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));
+
+            fireEvent.mouseDown(roleSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("ادمین"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(roleInput.value).toBe('1')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/PositionAndRole/index.jsx

@@ -0,0 +1,74 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useRole from "@/lib/app/hooks/useRole";
+import {log} from "next/dist/server/typescript/utils";
+
+const PositionAndRole = ({formik}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const {roleList, isLoadingRoleList, errorRoleList} = useRole();
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6}>
+                <TextField
+                    name="position"
+                    label={t("ExpertMangement.text_field_position")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.position}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.position && !!formik.errors.position}
+                    helperText={formik.touched.position && formik.errors.position ? formik.errors.position : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <FormControl
+                    error={formik.touched.roles && !!formik.errors.roles}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
+                    <Select
+                        name="roles"
+                        label={t("ExpertMangement.text_field_roles")}
+                        value={formik.values.roles}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        inputProps={{
+                            "data-testid": "input-role-id"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-role'}}
+                        variant="outlined"
+                    >
+                        {isLoadingRoleList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_loading_roles_list")}
+                            </MenuItem>
+                        ) : errorRoleList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_error_fetching_roles")}
+                            </MenuItem>
+                        ) : (
+                            roleList.map((item) => (
+                                <MenuItem key={item.id} value={item.id}>
+                                    {item.name_fa}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.roles && formik.errors.roles ? formik.errors.roles : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default PositionAndRole

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province/__tests__/index.test.js

@@ -0,0 +1,71 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import Province from "../../Province";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
+    });
+    return (
+        <Formik
+            initialValues={{
+                province_id: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("Province Component From Expert Management (create)", () => {
+    describe("Rendering", () => {
+        it("Province Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const provinceSelectBox = screen.getByTestId('select-box');
+                expect(provinceSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Province Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            const provinceSelectBox = screen.getByTestId('select-box');
+            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
+
+            await waitFor(() => {
+                expect(provinceSelectBox).toBeInTheDocument();
+            });
+
+            fireEvent.mouseDown(provinceSelectOpener);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("آذربایجان شرقی");
+                expect(selectItem).toBeInTheDocument();
+            });
+
+        });
+    });
+    describe("validation", () => {
+        it('Should Select An Item With Valid Value of province', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            const provinceInput = screen.getByTestId("input-province-id")
+            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
+
+            fireEvent.mouseDown(provinceSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(provinceInput.value).toBe('1')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province/index.jsx

@@ -0,0 +1,61 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useProvince from "@/lib/app/hooks/useProvince";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const Province = ({formik}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6}>
+                <FormControl
+                    error={formik.touched.province_id && !!formik.errors.province_id}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
+                    <Select
+                        name="province_id"
+                        disabled={isLoadingProvinceList || errorProvinceList}
+                        label={t("ExpertMangement.text_field_province_id")}
+                        value={formik.values.province_id}
+                        onChange={(e) => {
+                            formik.setFieldValue("province_id", e.target.value);
+                        }}
+                        inputProps={{
+                            "data-testid": "input-province-id"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-province'}}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        variant="outlined"
+                    >
+                        {isLoadingProvinceList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_loading_provinces_list")}
+                            </MenuItem>
+                        ) : errorProvinceList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_error_fetching_provinces")}
+                            </MenuItem>
+                        ) : (
+                            provinceList.map((item) => (
+                                <MenuItem key={item.id} value={item.id}>
+                                    {item.name}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default Province

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/index.jsx

@@ -0,0 +1,12 @@
+import Province from "./Province";
+import PositionAndRole from "./PositionAndRole";
+
+const RestInfo = ({formik}) => {
+    return (
+        <>
+            <Province formik={formik}/>
+            <PositionAndRole formik={formik}/>
+        </>
+    )
+}
+export default RestInfo

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/__test__/index.test.js

@@ -0,0 +1,123 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import UserInfo from "../../UserInfo";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        username: Yup.string().required(t("ExpertMangement.error_message_username")),
+        password: Yup.string()
+            .required(t("ExpertMangement.error_message_password"))
+            .matches(
+                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
+                t("ExpertMangement.error_message_password_regex")
+            ),
+    });
+    return (
+        <Formik
+            initialValues={{
+                username: "",
+                password: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("UserInfo Component From Expert Management (create)", () => {
+    describe("Rendering", () => {
+        it("UserName TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const usernameTextField = screen.queryByLabelText('نام کاربری');
+                expect(usernameTextField).toBeInTheDocument();
+            });
+        });
+        it("Password TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const passwordTextField = screen.queryByLabelText('رمز عبور');
+                expect(passwordTextField).toBeInTheDocument();
+            });
+
+        });
+    });
+    describe("Behavioral", () => {
+        it("Username TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            const usernameTextField = screen.queryByLabelText('نام کاربری');
+            fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
+            await act(() => {
+                expect(usernameTextField).toHaveValue('exampleUsername');
+            })
+        });
+        it("Password TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            const passwordTextField = screen.queryByLabelText('رمز عبور');
+            fireEvent.change(passwordTextField, {target: {value: 'examplePassword'}});
+            await act(() => {
+                expect(passwordTextField).toHaveValue('examplePassword');
+            })
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Username Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+
+            fireEvent.change(usernameInput, {target: {value: ''}});
+            fireEvent.blur(usernameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام کاربری خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Password Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+
+            fireEvent.change(passwordInput, {target: {value: ''}});
+            fireEvent.blur(passwordInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Password Field Is Not On Correct Format', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+
+            // check without text or symbol
+            fireEvent.change(passwordInput, {target: {value: '12345678'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+
+            // check without number
+            fireEvent.change(passwordInput, {target: {value: 'abcdefgh'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+
+            // check under 8 character
+            fireEvent.change(passwordInput, {target: {value: '11Sa'}});
+            fireEvent.blur(passwordInput);
+            await waitFor(() => {
+                expect(screen.queryByText("رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد")).toBeInTheDocument()
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo/index.jsx

@@ -0,0 +1,61 @@
+import {Grid, IconButton, InputAdornment, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {Visibility, VisibilityOff} from "@mui/icons-material";
+import {useState} from "react";
+
+const UserInfo = ({formik}) => {
+    const t = useTranslations();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    return (
+        <>
+            <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        name="username"
+                        label={t("ExpertMangement.text_field_username")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.username}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.username && !!formik.errors.username}
+                        helperText={formik.touched.username && formik.errors.username ? formik.errors.username : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        name="password"
+                        label={t("ExpertMangement.text_field_password")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.password}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.password && !!formik.errors.password}
+                        helperText={formik.touched.password && formik.errors.password ? formik.errors.password : null}
+                        type={showPassword ? "text" : "password"}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton onClick={handleClickShowPassword}>
+                                        {showPassword ? <Visibility/> : <VisibilityOff/>}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        }}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+export default UserInfo

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/__tests__/index.test.js

@@ -0,0 +1,67 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import CreateContent from "../../CreateContent";
+import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
+
+function selectDropdownItem(screen, openerTestId, itemText) {
+    const opener = screen.getByTestId(openerTestId);
+    fireEvent.mouseDown(opener);
+    const selectItem = screen.queryByText(itemText);
+    fireEvent.click(selectItem);
+}
+
+function setInputValue(screen, inputElement, value) {
+    fireEvent.change(inputElement, {target: {value}});
+}
+
+describe("CreateContent Component From Expert Management (create)", () => {
+    describe("Rendering", () => {
+        it("close button Rendered", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            await waitFor(() => {
+                const cancelBtn = screen.queryByText('بستن');
+                expect(cancelBtn).toBeInTheDocument();
+            });
+        });
+        it("confirm button Rendered", async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+            await waitFor(() => {
+                const cancelBtn = screen.queryByText('ثبت');
+                expect(cancelBtn).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it('Should enable the submit button when the inputs are valid', async () => {
+            render(<MockAppWithProviders><CreateContent/></MockAppWithProviders>);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+            const positionInput = screen.queryByLabelText('سمت');
+
+            selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
+            selectDropdownItem(screen, "option-opener-role", "ادمین");
+            selectDropdownItem(screen, "option-opener-gender", "مرد");
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'emailTest');
+            setInputValue(screen, phoneNumberInput, 'phoneNumberTest');
+            setInputValue(screen, telephoneIdInput, 'telephoneIdTest');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, passwordInput, 'passwordTest');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            await waitFor(() => {
+                expect(submitButton).not.toBeDisabled();
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx

@@ -0,0 +1,116 @@
+import {Box, Button, Chip, DialogActions, DialogContent, Divider,} from "@mui/material";
+import * as Yup from "yup";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+import UserInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo";
+import RestInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo";
+
+const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+
+    const validationSchema = Yup.object().shape({
+        full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
+        username: Yup.string().required(t("ExpertMangement.error_message_username")),
+        email: Yup.string().required(t("ExpertMangement.error_message_email")),
+        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
+        telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
+        gender: Yup.string().required(t("ExpertMangement.error_message_gender")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
+        password: Yup.string()
+            .required(t("ExpertMangement.error_message_password"))
+            .matches(
+                /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
+                t("ExpertMangement.error_message_password_regex")
+            ),
+        position: Yup.string().required(t("ExpertMangement.error_message_position")),
+        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
+        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            full_name: "",
+            username: "",
+            email: "",
+            phone_number: "",
+            telephone_id: "",
+            gender: "",
+            national_id: "",
+            password: "",
+            position: "",
+            province_id: "",
+            roles: ""
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("full_name", values.full_name);
+            formData.append("national_id", values.national_id);
+            formData.append("phone_number", values.phone_number);
+            formData.append("telephone_id", values.telephone_id);
+            formData.append("gender", values.gender);
+            formData.append("email", values.email);
+            formData.append("username", values.username);
+            formData.append("password", values.password);
+            formData.append("province_id", values.province_id);
+            formData.append("position", values.position);
+            formData.append("roles", values.roles);
+
+            requestServer(`${EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
+                .then((response) => {
+                    setOpenCreateDialog(false)
+                    mutate(fetchUrl)
+                }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.personal_info")}
+                        />
+                    </Divider>
+                </Box>
+                <PersonalInfo formik={formik}/>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.user_info")}
+                        />
+                    </Divider>
+                </Box>
+                <UserInfo formik={formik}/>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.rest_info")}
+                        />
+                    </Divider>
+                </Box>
+                <RestInfo formik={formik}/>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenCreateDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("ExpertMangement.button_cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
+                    {t("ExpertMangement.button_confirm")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+
+export default CreateContent

src/components/dashboard/expert-management/Form/CreateForm/__tests__/index.test.js

@@ -0,0 +1,131 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import CreateForm from "../../CreateForm";
+
+function selectDropdownItem(screen, openerTestId, itemText) {
+    const opener = screen.getByTestId(openerTestId);
+    fireEvent.mouseDown(opener);
+    const selectItem = screen.queryByText(itemText);
+    fireEvent.click(selectItem);
+}
+
+function setInputValue(screen, inputElement, value) {
+    fireEvent.change(inputElement, {target: {value}});
+}
+
+describe("CreateForm Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Create Button Rendered", () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+            const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
+            expect(CreateButton).toBeInTheDocument();
+        });
+        it("Dialog Header Rendered", () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+            const CreateDialogHeader = screen.queryByText("افزودن کارشناس");
+            expect(CreateDialogHeader).toBeInTheDocument();
+        });
+    });
+    describe("Behavioral", () => {
+        it("by Clicking Create Button Dialog Should Append To Document", async () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+            const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
+            fireEvent.click(CreateButton);
+            await act(() => {
+                const CreateDialog = screen.getByRole('dialog', {name: "افزودن کارشناس"})
+                expect(CreateDialog).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it('Should request to api and if get success close dialog', async () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+
+            const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
+            fireEvent.click(CreateButton);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+            const positionInput = screen.queryByLabelText('سمت');
+
+            selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
+            selectDropdownItem(screen, "option-opener-role", "ادمین");
+            selectDropdownItem(screen, "option-opener-gender", "مرد");
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'emailTest@gmail.com');
+            setInputValue(screen, phoneNumberInput, '0914577458');
+            setInputValue(screen, telephoneIdInput, '091');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, passwordInput, 'passwordTest12');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            expect(submitButton).not.toBeDisabled();
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                const dialogContent = screen.queryByTestId('create-dialog-content');
+                expect(dialogContent).not.toBeInTheDocument();
+            });
+        });
+        it('Should request to api and if get error keep previous data', async () => {
+            render(<MockAppWithProviders><CreateForm/></MockAppWithProviders>);
+
+            const CreateButton = screen.getByRole('button', {name: "افزودن کارشناس"});
+            fireEvent.click(CreateButton);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const passwordInput = screen.queryByLabelText('رمز عبور');
+            const positionInput = screen.queryByLabelText('سمت');
+            const provinceInput = screen.getByTestId("input-province-id")
+            const roleInput = screen.getByTestId("input-role-id")
+            const genderInput = screen.getByTestId("input-gender")
+
+            selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
+            selectDropdownItem(screen, "option-opener-role", "ادمین");
+            selectDropdownItem(screen, "option-opener-gender", "مرد");
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'emailTest@gmail.com');
+            setInputValue(screen, phoneNumberInput, '0914577458');
+            setInputValue(screen, telephoneIdInput, '091');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, passwordInput, 'passwordTest12');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            expect(submitButton).not.toBeDisabled();
+            await fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(nameInput).toHaveValue('nameTest');
+                expect(usernameInput).toHaveValue('usernameTest');
+                expect(emailInput).toHaveValue('emailTest@gmail.com');
+                expect(phoneNumberInput).toHaveValue('0914577458');
+                expect(telephoneIdInput).toHaveValue('091');
+                expect(nationalIdInput).toHaveValue('nationalIdTest');
+                expect(passwordInput).toHaveValue('passwordTest12');
+                expect(positionInput).toHaveValue('positionTest');
+                expect(provinceInput).toHaveValue('1');
+                expect(roleInput).toHaveValue('1');
+                expect(genderInput).toHaveValue('male');
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/CreateForm/index.jsx

@@ -0,0 +1,39 @@
+import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import {useState} from "react";
+import CreateContent from "./CreateContent";
+
+const Create = ({mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const [openCreateDialog, setOpenCreateDialog] = useState(false);
+
+    return (
+        <>
+            <Stack direction={"row"} spacing={2}>
+                <Tooltip title={t("ExpertMangement.create")} arrow placement="right">
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        size="small"
+                        sx={{textTransform: "unset", alignSelf: "center"}}
+                        startIcon={<DataSaverOnIcon/>}
+                        onClick={() => {
+                            setOpenCreateDialog(true)
+                        }}
+                    >
+                        {t("ExpertMangement.create")}
+                    </Button>
+                </Tooltip>
+            </Stack>
+            <Dialog data-testid="create-dialog-content" fullWidth maxWidth={'lg'} open={openCreateDialog}
+                    TransitionProps={{unmountOnExit: true}}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
+                <CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
+            </Dialog>
+        </>
+    )
+}
+
+export default Create

src/components/dashboard/expert-management/Form/DeleteForm/__tests__/index.test.js

@@ -0,0 +1,66 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import React from "react";
+import DeleteForm from "@/components/dashboard/expert-management/Form/DeleteForm";
+
+describe("CreateForm Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Delete Expert Button And Tooltip Rendered", () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            expect(DeleteButton).toBeInTheDocument();
+        });
+        it("Delete Dialog Rendered", () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            const DeleteDialogHeader = screen.queryByText("حذف کارشناس");
+            expect(DeleteDialogHeader).toBeInTheDocument();
+        });
+        it("Delete Dialog Text Rendered", () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            const DeleteDialogText = screen.queryByText("آیا از انجام این عملیات اطمینان دارید؟");
+            expect(DeleteDialogText).toBeInTheDocument();
+        });
+        it("Delete Dialog Delete Button Rendered", () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            const DeleteButtonDialog = screen.getByRole('button', {name: "حذف"});
+            expect(DeleteButtonDialog).toBeInTheDocument();
+        });
+        it("Delete Dialog Cancel Button Rendered", () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            const CancelButtonDialog = screen.getByRole('button', {name: "بستن"});
+            expect(CancelButtonDialog).toBeInTheDocument();
+        });
+    });
+    describe("Behavioral", () => {
+        it("By Clicking Delete Button Dialog Should Append To Document", async () => {
+            render(<MockAppWithProviders><DeleteForm/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            await waitFor(() => {
+                const DeleteDialog = screen.getByRole('dialog', {name: "حذف کارشناس"})
+                expect(DeleteDialog).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it("By Clicking Delete Button Request To Api And Delete Item", async () => {
+            render(<MockAppWithProviders><DeleteForm rowId={1}/></MockAppWithProviders>);
+            const DeleteButton = screen.getByTestId('delete-button');
+            fireEvent.click(DeleteButton);
+            const DeleteButtonDialog = screen.getByRole('button', {name: "حذف"});
+            fireEvent.click(DeleteButtonDialog);
+            await waitFor(() => {
+                const DeleteDialog = screen.queryByRole('dialog', {name: "حذف کارشناس"});
+                expect(DeleteDialog).not.toBeInTheDocument();
+            });
+        });
+    });
+});

src/components/dashboard/expert-management/Form/DeleteForm/index.jsx

@@ -0,0 +1,74 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    IconButton,
+    Tooltip
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import {useState} from "react";
+import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {useTranslations} from "next-intl";
+
+const Delete = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true});
+    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleDelete = () => {
+        setIsSubmitting(true)
+        requestServer(`${EXPERT_MANAGEMENT}/${rowId}`, 'DELETE')
+            .then((response) => {
+                setOpenDeleteDialog(false);
+                mutate(fetchUrl)
+            })
+            .catch(() => {
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+            });
+    };
+
+    return (
+        <>
+            <Tooltip title={t("ExpertMangement.delete_tooltip")}>
+                <IconButton
+                    color="primary"
+                    data-testid="delete-button"
+                    onClick={() => {
+                        setOpenDeleteDialog(true);
+                    }}
+                >
+                    <DeleteIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog
+                open={openDeleteDialog}
+                PaperProps={{
+                    sx: {
+                        boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'
+                    }
+                }}
+            >
+                <DialogTitle>{t("ExpertMangement.delete_expert")}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>{t("ExpertMangement.are_you_sure_text")}</DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenDeleteDialog(false)} color="secondary" autoFocus>
+                        {t("ExpertMangement.button_cancel")}
+                    </Button>
+                    <Button onClick={handleDelete} variant="contained" color="primary" disabled={isSubmitting}>
+                        {t("ExpertMangement.button_delete")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Delete;

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/PersonalInfo/__tests__/index.test.js

@@ -0,0 +1,219 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/PersonalInfo";
+import {useTranslations} from "next-intl";
+import Province from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo/Province";
+
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
+        email: Yup.string().required(t("ExpertMangement.error_message_email")),
+        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
+        telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
+        gender: Yup.string().required(t("ExpertMangement.error_message_gender"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                full_name: "",
+                email: "",
+                phone_number: "",
+                telephone_id: "",
+                national_id: "",
+                gender: ""
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+
+describe("PersonalInfo Component From Expert Management (update)", () => {
+    describe("Rendering", () => {
+        it("full_name TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const fullNameTextField = screen.queryByLabelText('نام کامل');
+                expect(fullNameTextField).toBeInTheDocument();
+            });
+        });
+        it("Email TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const emailTextField = screen.queryByLabelText('پست الکترونیک');
+                expect(emailTextField).toBeInTheDocument();
+            });
+        });
+        it("Phone Number TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+                expect(phoneNumberTextField).toBeInTheDocument();
+            });
+        });
+        it("telephone id TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+                expect(telephoneIdTextField).toBeInTheDocument();
+            });
+        });
+        it("National Id TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const nationalIdTextField = screen.queryByLabelText('کد ملی');
+                expect(nationalIdTextField).toBeInTheDocument();
+            });
+        });
+        it("Gender Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const genderSelectBox = screen.getByTestId('select-box');
+                expect(genderSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Name TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const nameTextField = screen.queryByLabelText('نام کامل');
+            fireEvent.change(nameTextField, {target: {value: 'exampleName'}});
+            await act(() => {
+                expect(nameTextField).toHaveValue('exampleName');
+            })
+        });
+        it("Email TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const emailTextField = screen.queryByLabelText('پست الکترونیک');
+            fireEvent.change(emailTextField, {target: {value: 'exampleEmail'}});
+            await act(() => {
+                expect(emailTextField).toHaveValue('exampleEmail');
+            })
+        });
+        it("Phone Number TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const phoneNumberTextField = screen.queryByLabelText('شماره همراه');
+            fireEvent.change(phoneNumberTextField, {target: {value: 'examplePhoneNumber'}});
+            await act(() => {
+                expect(phoneNumberTextField).toHaveValue('examplePhoneNumber');
+            })
+        });
+        it("Telephone Id TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+            fireEvent.change(telephoneIdTextField, {target: {value: 'exampleTelephoneId'}});
+            await act(() => {
+                expect(telephoneIdTextField).toHaveValue('exampleTelephoneId');
+            })
+        });
+        it("National Id TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const nationalIdTextField = screen.queryByLabelText('کد ملی');
+            fireEvent.change(nationalIdTextField, {target: {value: 'exampleNationalId'}});
+            await act(() => {
+                expect(nationalIdTextField).toHaveValue('exampleNationalId');
+            })
+        });
+        it("Gender Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const genderSelectBox = screen.getByTestId('select-box');
+            const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
+
+            await waitFor(() => {
+                expect(genderSelectBox).toBeInTheDocument();
+            });
+
+            fireEvent.mouseDown(genderSelectOpener);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("مرد");
+                expect(selectItem).toBeInTheDocument();
+            });
+
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Name Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+
+            fireEvent.change(nameInput, {target: {value: ''}});
+            fireEvent.blur(nameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام کامل خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Email Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+
+            fireEvent.change(emailInput, {target: {value: ''}});
+            fireEvent.blur(emailInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("پست الکترونیک خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When Phone Number Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+
+            fireEvent.change(phoneNumberInput, {target: {value: ''}});
+            fireEvent.blur(phoneNumberInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("شماره همراه خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When telephone Id Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const telephoneIdTextField = screen.queryByLabelText('کد تلفن');
+
+            fireEvent.change(telephoneIdTextField, {target: {value: ''}});
+            fireEvent.blur(telephoneIdTextField);
+
+            await waitFor(() => {
+                expect(screen.queryByText("کد تلفن خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should See Error When National Id Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+
+            fireEvent.change(nationalIdInput, {target: {value: ''}});
+            fireEvent.blur(nationalIdInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("کد ملی خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should Select An Item With Valid Value of gender', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PersonalInfo}/></MockAppWithProviders>);
+            const genderInput = screen.getByTestId("input-gender")
+            const genderSelectOpener = await waitFor(() => screen.getByTestId("option-opener-gender"));
+
+            fireEvent.mouseDown(genderSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("مرد"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(genderInput.value).toBe('male')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/PersonalInfo/index.jsx

@@ -0,0 +1,128 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+const PersonalInfo = ({formik}) => {
+    const t = useTranslations();
+
+    const genderList = [
+        {id: 1, name_en: "male", name_fa: "مرد"},
+        {id: 2, name_en: "female", name_fa: "زن"}
+    ]
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="full_name"
+                    label={t("ExpertMangement.text_field_full_name")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.full_name}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.full_name && !!formik.errors.full_name}
+                    helperText={formik.touched.full_name && formik.errors.full_name ? formik.errors.full_name : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="national_id"
+                    label={t("ExpertMangement.text_field_national_id")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.national_id}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.national_id && !!formik.errors.national_id}
+                    helperText={formik.touched.national_id && formik.errors.national_id ? formik.errors.national_id : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="phone_number"
+                    label={t("ExpertMangement.text_field_phone_number")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.phone_number}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.phone_number && !!formik.errors.phone_number}
+                    helperText={formik.touched.phone_number && formik.errors.phone_number ? formik.errors.phone_number : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="email"
+                    label={t("ExpertMangement.text_field_email")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.email}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.email && !!formik.errors.email}
+                    helperText={formik.touched.email && formik.errors.email ? formik.errors.email : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <TextField
+                    name="telephone_id"
+                    label={t("ExpertMangement.text_field_telephone_id")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.telephone_id}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.telephone_id && !!formik.errors.telephone_id}
+                    helperText={formik.touched.telephone_id && formik.errors.telephone_id ? formik.errors.telephone_id : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6} md={4}>
+                <FormControl
+                    error={formik.touched.gender && !!formik.errors.gender}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_gender")}</InputLabel>
+                    <Select
+                        name="gender"
+                        label={t("ExpertMangement.text_field_gender")}
+                        value={formik.values.gender}
+                        onChange={(e) => {
+                            formik.setFieldValue("gender", e.target.value);
+                        }}
+                        inputProps={{
+                            "data-testid": "input-gender"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-gender'}}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        variant="outlined"
+                    >
+                        {(
+                            genderList.map((item) => (
+                                <MenuItem key={item.id} value={item.name_en}>
+                                    {item.name_fa}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.gender && formik.errors.gender ? formik.errors.gender : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default PersonalInfo

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole/__tests__/index.test.js

@@ -0,0 +1,96 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+import PositionAndRole from "../../PositionAndRole";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        position: Yup.string().required(t("ExpertMangement.error_message_position")),
+        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
+    });
+    return (
+        <Formik
+            initialValues={{
+                position: "",
+                roles: ""
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("PositionAndRole Component From Expert Management (update)", () => {
+    describe("Rendering", () => {
+        it("Position TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const positionTextField = screen.queryByLabelText('سمت');
+                expect(positionTextField).toBeInTheDocument();
+            });
+        });
+        it("Role Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId('select-box');
+            await waitFor(() => {
+                expect(roleSelect).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Position TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const positionTextField = screen.queryByLabelText('سمت');
+            fireEvent.change(positionTextField, {target: {value: 'examplePosition'}});
+            await waitFor(() => {
+                expect(positionTextField).toHaveValue('examplePosition');
+            })
+        });
+        it("Role Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleSelect = screen.getByTestId("option-opener-role");
+            await waitFor(() => {
+                expect(roleSelect).toBeInTheDocument();
+            });
+            fireEvent.mouseDown(roleSelect);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("ادمین");
+                expect(selectItem).toBeInTheDocument();
+            });
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Position Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+
+            const positionInput = screen.queryByLabelText('سمت');
+
+            fireEvent.change(positionInput, {target: {value: ''}});
+            fireEvent.blur(positionInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("سمت خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+        it('Should Select An Item With Valid Value of role', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={PositionAndRole}/></MockAppWithProviders>);
+            const roleInput = await waitFor(() => screen.getByTestId("input-role-id"));
+            const roleSelectOpener = await waitFor(() => screen.getByTestId("option-opener-role"));
+
+            fireEvent.mouseDown(roleSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("ادمین"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(roleInput.value).toBe('1')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole/index.jsx

@@ -0,0 +1,75 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useRole from "@/lib/app/hooks/useRole";
+import {log} from "next/dist/server/typescript/utils";
+
+const PositionAndRole = ({formik}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const {roleList, isLoadingRoleList, errorRoleList} = useRole();
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6}>
+                <TextField
+                    name="position"
+                    label={t("ExpertMangement.text_field_position")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.position}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.position && !!formik.errors.position}
+                    helperText={formik.touched.position && formik.errors.position ? formik.errors.position : null}
+                    sx={{width: "100%"}}
+                />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+                <FormControl
+                    error={formik.touched.roles && !!formik.errors.roles}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_roles")}</InputLabel>
+                    <Select
+                        name="roles"
+                        label={t("ExpertMangement.text_field_roles")}
+                        disabled={isLoadingRoleList || errorRoleList}
+                        value={isLoadingRoleList || errorRoleList ? "" : formik.values.roles}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        inputProps={{
+                            "data-testid": "input-role-id"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-role'}}
+                        variant="outlined"
+                    >
+                        {isLoadingRoleList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_loading_roles_list")}
+                            </MenuItem>
+                        ) : errorRoleList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_error_fetching_roles")}
+                            </MenuItem>
+                        ) : (
+                            roleList.map((item) => (
+                                <MenuItem key={item.id} value={item.id}>
+                                    {item.name_fa}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.roles && formik.errors.roles ? formik.errors.roles : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default PositionAndRole

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province/__tests__/index.test.js

@@ -0,0 +1,71 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import Province from "../../Province";
+import MockAppWithProviders from "../../../../../../../../../../mocks/AppWithProvider";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
+    });
+    return (
+        <Formik
+            initialValues={{
+                province_id: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("Province Component From Expert Management (update)", () => {
+    describe("Rendering", () => {
+        it("Province Select Box Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const provinceSelectBox = screen.getByTestId('select-box');
+                expect(provinceSelectBox).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Province Select Box Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            const provinceSelectBox = screen.getByTestId('select-box');
+            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
+
+            await waitFor(() => {
+                expect(provinceSelectBox).toBeInTheDocument();
+            });
+
+            fireEvent.mouseDown(provinceSelectOpener);
+            await waitFor(() => {
+                const selectItem = screen.queryByText("آذربایجان شرقی");
+                expect(selectItem).toBeInTheDocument();
+            });
+
+        });
+    });
+    describe("validation", () => {
+        it('Should Select An Item With Valid Value of province', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={Province}/></MockAppWithProviders>);
+            const provinceInput = screen.getByTestId("input-province-id")
+            const provinceSelectOpener = await waitFor(() => screen.getByTestId("option-opener-province"));
+
+            fireEvent.mouseDown(provinceSelectOpener);
+            const selectItem = await waitFor(() => screen.queryByText("آذربایجان شرقی"));
+            expect(selectItem).toBeInTheDocument();
+            fireEvent.click(selectItem);
+            await waitFor(() => {
+                expect(provinceInput.value).toBe('1')
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province/index.jsx

@@ -0,0 +1,61 @@
+import {FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useProvince from "@/lib/app/hooks/useProvince";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const Province = ({formik}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
+
+    return (
+        <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+            <Grid item xs={12} sm={6}>
+                <FormControl
+                    error={formik.touched.province_id && !!formik.errors.province_id}
+                    sx={{width: "100%", mt: 2}}
+                    size="small"
+                >
+                    <InputLabel>{t("ExpertMangement.text_field_province_id")}</InputLabel>
+                    <Select
+                        name="province_id"
+                        disabled={isLoadingProvinceList || errorProvinceList}
+                        label={t("ExpertMangement.text_field_province_id")}
+                        value={isLoadingProvinceList || errorProvinceList ? "" : formik.values.province_id}
+                        onChange={(e) => {
+                            formik.setFieldValue("province_id", e.target.value);
+                        }}
+                        inputProps={{
+                            "data-testid": "input-province-id"
+                        }}
+                        data-testid="select-box"
+                        SelectDisplayProps={{"data-testid": 'option-opener-province'}}
+                        onBlur={formik.handleBlur}
+                        fullWidth
+                        variant="outlined"
+                    >
+                        {isLoadingProvinceList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_loading_provinces_list")}
+                            </MenuItem>
+                        ) : errorProvinceList ? (
+                            <MenuItem>
+                                {t("ExpertMangement.text_field_error_fetching_provinces")}
+                            </MenuItem>
+                        ) : (
+                            provinceList.map((item) => (
+                                <MenuItem key={item.id} value={item.id}>
+                                    {item.name}
+                                </MenuItem>
+                            ))
+                        )}
+                    </Select>
+                    <FormHelperText>
+                        {formik.touched.province_id && formik.errors.province_id ? formik.errors.province_id : ""}
+                    </FormHelperText>
+                </FormControl>
+            </Grid>
+        </Grid>
+    )
+}
+export default Province

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/index.jsx

@@ -0,0 +1,13 @@
+import Province from "@/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/Province";
+import PositionAndRole
+    from "@/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/RestInfo/PositionAndRole";
+
+const RestInfo = ({formik}) => {
+    return (
+        <>
+            <Province formik={formik}/>
+            <PositionAndRole formik={formik}/>
+        </>
+    )
+}
+export default RestInfo

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/UserInfo/__tests__/index.test.js

@@ -0,0 +1,62 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {Formik} from "formik";
+import UserInfo from "../../UserInfo";
+
+const CreateFormMock = ({Component}) => {
+    const t = useTranslations();
+    const validationSchema = Yup.object().shape({
+        username: Yup.string().required(t("ExpertMangement.error_message_username")),
+    });
+    return (
+        <Formik
+            initialValues={{
+                username: "",
+            }}
+            validationSchema={validationSchema}
+            onSubmit={(values, {}) => {
+            }}
+        >
+            {formikProps => (<Component formik={formikProps}></Component>)}
+        </Formik>
+    );
+};
+
+describe("UserInfo Component From Expert Management (update)", () => {
+    describe("Rendering", () => {
+        it("UserName TextField Rendered", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const usernameTextField = screen.queryByLabelText('نام کاربری');
+                expect(usernameTextField).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Behavioral", () => {
+        it("Username TextField Work Correctly", async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+            const usernameTextField = screen.queryByLabelText('نام کاربری');
+            fireEvent.change(usernameTextField, {target: {value: 'exampleUsername'}});
+            await act(() => {
+                expect(usernameTextField).toHaveValue('exampleUsername');
+            })
+        });
+    });
+    describe("validation", () => {
+        it('Should See Error When Username Input Is Empty', async () => {
+            render(<MockAppWithProviders><CreateFormMock Component={UserInfo}/></MockAppWithProviders>);
+
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+
+            fireEvent.change(usernameInput, {target: {value: ''}});
+            fireEvent.blur(usernameInput);
+
+            await waitFor(() => {
+                expect(screen.queryByText("نام کاربری خود را وارد کنید")).toBeInTheDocument()
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/UserInfo/index.jsx

@@ -0,0 +1,29 @@
+import {Grid, TextField} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+const UserInfo = ({formik}) => {
+    const t = useTranslations();
+
+    return (
+        <>
+            <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        name="username"
+                        label={t("ExpertMangement.text_field_username")}
+                        variant="outlined"
+                        margin="normal"
+                        size="small"
+                        value={formik.values.username}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        error={formik.touched.username && !!formik.errors.username}
+                        helperText={formik.touched.username && formik.errors.username ? formik.errors.username : null}
+                        sx={{width: "100%"}}
+                    />
+                </Grid>
+            </Grid>
+        </>
+    )
+}
+export default UserInfo

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/__tests__/index.test.js

@@ -0,0 +1,87 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../../mocks/AppWithProvider";
+import UpdateContent from "../../UpdateContent";
+
+const row = {
+    original: {
+        avatar: null,
+        created_at: "2023-10-10T13:05:01.000000Z",
+        email: "fisher.sigrid@yahoo.com",
+        full_name: "Anibal Labadie",
+        gender: "female",
+        id: 85,
+        national_id: "5944646138",
+        phone_number: "09731311720",
+        position: "boss1",
+        province_fa: "اردبیل",
+        province_id: 3,
+        roles: [{
+            created_at: "2023-10-10T13:03:18.000000Z",
+            guard_name: "api",
+            id: 2,
+            name: "manager",
+            name_fa: "مدیر"
+        }],
+        telephone_id: "tel-3110",
+        updated_at: "2023-10-17T10:57:12.000000Z",
+        username: "florence.kihn",
+    }
+}
+
+function selectDropdownItem(screen, openerTestId, itemText) {
+    const opener = screen.getByTestId(openerTestId);
+    fireEvent.mouseDown(opener);
+    const selectItem = screen.queryByText(itemText);
+    fireEvent.click(selectItem);
+}
+
+function setInputValue(screen, inputElement, value) {
+    fireEvent.change(inputElement, {target: {value}});
+}
+
+describe("UpdateContent Component From Expert Management (update)", () => {
+    describe("Rendering", () => {
+        it("close button Rendered", async () => {
+            render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const cancelBtn = screen.queryByText('بستن');
+                expect(cancelBtn).toBeInTheDocument();
+            });
+        });
+        it("confirm button Rendered", async () => {
+            render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
+            await waitFor(() => {
+                const confirmBtn = screen.queryByText('ثبت');
+                expect(confirmBtn).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it('Should enable the submit button when the inputs are valid', async () => {
+            render(<MockAppWithProviders><UpdateContent row={row}/></MockAppWithProviders>);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const positionInput = screen.queryByLabelText('سمت');
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'emailTest');
+            setInputValue(screen, phoneNumberInput, 'phoneNumberTest');
+            setInputValue(screen, telephoneIdInput, 'telephoneIdTest');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            await waitFor(() => {
+                expect(submitButton).not.toBeDisabled();
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx

@@ -0,0 +1,108 @@
+import {Box, Button, Chip, DialogActions, DialogContent, Divider,} from "@mui/material";
+import * as Yup from "yup";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import PersonalInfo from "./PersonalInfo";
+import UserInfo from "./UserInfo";
+import RestInfo from "./RestInfo";
+
+const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+
+    const validationSchema = Yup.object().shape({
+        full_name: Yup.string().required(t("ExpertMangement.error_message_full_name")),
+        username: Yup.string().required(t("ExpertMangement.error_message_username")),
+        email: Yup.string().required(t("ExpertMangement.error_message_email")),
+        phone_number: Yup.string().required(t("ExpertMangement.error_message_phone_number")),
+        telephone_id: Yup.string().required(t("ExpertMangement.error_message_telephone_id")),
+        gender: Yup.string().required(t("ExpertMangement.error_message_gender")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
+        position: Yup.string().required(t("ExpertMangement.error_message_position")),
+        province_id: Yup.string().required(t("ExpertMangement.error_message_province_id")),
+        roles: Yup.string().required(t("ExpertMangement.error_message_roles"))
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            full_name: row.original.full_name,
+            username: row.original.username,
+            email: row.original.email,
+            phone_number: row.original.phone_number,
+            telephone_id: row.original.telephone_id,
+            gender: row.original.gender,
+            national_id: row.original.national_id,
+            position: row.original.position,
+            province_id: row.original.province_id,
+            roles: row.original.roles[0].id
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("full_name", values.full_name);
+            formData.append("national_id", values.national_id);
+            formData.append("phone_number", values.phone_number);
+            formData.append("telephone_id", values.telephone_id);
+            formData.append("gender", values.gender);
+            formData.append("email", values.email);
+            formData.append("username", values.username);
+            formData.append("province_id", values.province_id);
+            formData.append("position", values.position);
+            formData.append("roles", values.roles);
+
+            requestServer(`${EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData})
+                .then((response) => {
+                    setOpenUpdateDialog(false)
+                    mutate(fetchUrl)
+                }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.personal_info")}
+                        />
+                    </Divider>
+                </Box>
+                <PersonalInfo formik={formik}/>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.user_info")}
+                        />
+                    </Divider>
+                </Box>
+                <UserInfo formik={formik}/>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.rest_info")}
+                        />
+                    </Divider>
+                </Box>
+                <RestInfo formik={formik}/>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenUpdateDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("ExpertMangement.button_cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting || !formik.isValid || !formik.dirty}>
+                    {t("ExpertMangement.button_confirm")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+
+export default UpdateContent

src/components/dashboard/expert-management/Form/UpdateForm/__tests__/index.test.js

@@ -0,0 +1,147 @@
+import {act, fireEvent, render, screen, waitFor} from "@testing-library/react";
+import React from 'react';
+import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
+import UpdateForm from "../../UpdateForm";
+
+const row = {
+    original: {
+        avatar: null,
+        created_at: "2023-10-10T13:05:01.000000Z",
+        email: "fisher.sigrid@yahoo.com",
+        full_name: "Anibal Labadie",
+        gender: "female",
+        id: 85,
+        national_id: "5944646138",
+        phone_number: "09731311720",
+        position: "boss1",
+        province_fa: "اردبیل",
+        province_id: 3,
+        roles: [{
+            created_at: "2023-10-10T13:03:18.000000Z",
+            guard_name: "api",
+            id: 2,
+            name: "manager",
+            name_fa: "مدیر"
+        }],
+        telephone_id: "tel-3110",
+        updated_at: "2023-10-17T10:57:12.000000Z",
+        username: "florence.kihn",
+    }
+}
+
+function selectDropdownItem(screen, openerTestId, itemText) {
+    const opener = screen.getByTestId(openerTestId);
+    fireEvent.mouseDown(opener);
+    const selectItem = screen.queryByText(itemText);
+    fireEvent.click(selectItem);
+}
+
+function setInputValue(screen, inputElement, value) {
+    fireEvent.change(inputElement, {target: {value}});
+}
+
+describe("CreateForm Component From Expert Management", () => {
+    describe("Rendering", () => {
+        it("Update Expert Button Rendered", () => {
+            render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
+            const UpdateButton = screen.getByTestId('update-button');
+            expect(UpdateButton).toBeInTheDocument();
+        });
+    });
+    describe("Behavioral", () => {
+        it("by Clicking Update Button Dialog Should Append To Document", async () => {
+            render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
+            const UpdateButton = screen.getByTestId('update-button');
+            fireEvent.click(UpdateButton);
+            await act(() => {
+                const UpdateDialog = screen.getByRole('dialog', {name: "ویرایش کارشناس"})
+                expect(UpdateDialog).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Form Submission", () => {
+        it('Should request to api and if get success close dialog', async () => {
+            render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
+
+            const UpdateButton = screen.getByTestId('update-button');
+            fireEvent.click(UpdateButton);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const positionInput = screen.queryByLabelText('سمت');
+
+            selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
+            selectDropdownItem(screen, "option-opener-role", "ادمین");
+            selectDropdownItem(screen, "option-opener-gender", "مرد");
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'email@gmail.com');
+            setInputValue(screen, phoneNumberInput, '0914577458');
+            setInputValue(screen, telephoneIdInput, '091');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            expect(submitButton).not.toBeDisabled();
+            fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                const dialogContent = screen.queryByTestId('update-dialog-content');
+                expect(dialogContent).not.toBeInTheDocument();
+            });
+        });
+        it('Should request to api and if get error keep previous data', async () => {
+            render(<MockAppWithProviders><UpdateForm row={row}/></MockAppWithProviders>);
+
+            const UpdateButton = screen.getByTestId('update-button');
+            fireEvent.click(UpdateButton);
+
+            const submitButton = screen.queryByText('ثبت');
+
+            const nameInput = screen.queryByLabelText('نام کامل');
+            const usernameInput = screen.queryByLabelText('نام کاربری');
+            const emailInput = screen.queryByLabelText('پست الکترونیک');
+            const phoneNumberInput = screen.queryByLabelText('شماره همراه');
+            const telephoneIdInput = screen.queryByLabelText('کد تلفن');
+            const nationalIdInput = screen.queryByLabelText('کد ملی');
+            const positionInput = screen.queryByLabelText('سمت');
+            const provinceInput = screen.getByTestId("input-province-id")
+            const roleInput = screen.getByTestId("input-role-id")
+            const genderInput = screen.getByTestId("input-gender")
+
+            selectDropdownItem(screen, "option-opener-province", "آذربایجان شرقی");
+            selectDropdownItem(screen, "option-opener-role", "ادمین");
+            selectDropdownItem(screen, "option-opener-gender", "مرد");
+
+            setInputValue(screen, nameInput, 'nameTest');
+            setInputValue(screen, usernameInput, 'usernameTest');
+            setInputValue(screen, emailInput, 'emailTest@gmail.com');
+            setInputValue(screen, phoneNumberInput, '0914577458');
+            setInputValue(screen, telephoneIdInput, '091');
+            setInputValue(screen, nationalIdInput, 'nationalIdTest');
+            setInputValue(screen, positionInput, 'positionTest');
+
+            expect(submitButton).not.toBeDisabled();
+            await fireEvent.click(submitButton);
+
+            await waitFor(() => {
+                expect(nameInput).toHaveValue('nameTest');
+                expect(usernameInput).toHaveValue('usernameTest');
+                expect(emailInput).toHaveValue('emailTest@gmail.com');
+                expect(phoneNumberInput).toHaveValue('0914577458');
+                expect(telephoneIdInput).toHaveValue('091');
+                expect(nationalIdInput).toHaveValue('nationalIdTest');
+                expect(positionInput).toHaveValue('positionTest');
+                expect(provinceInput).toHaveValue('1');
+                expect(roleInput).toHaveValue('1');
+                expect(genderInput).toHaveValue('male');
+            });
+        });
+    })
+});

src/components/dashboard/expert-management/Form/UpdateForm/index.jsx

@@ -0,0 +1,33 @@
+import {useTranslations} from "next-intl";
+import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
+import EditIcon from '@mui/icons-material/Edit';
+import {useState} from "react";
+import UpdateContent from "./UpdateContent";
+
+
+const Update = ({row, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title={t("ExpertMangement.update_tooltip")}>
+                <IconButton
+                    color="primary"
+                    data-testid="update-button"
+                    onClick={() => {
+                        setOpenUpdateDialog(true)
+                    }}
+                >
+                    <EditIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog data-testid="update-dialog-content" fullWidth maxWidth={'lg'} open={openUpdateDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ExpertMangement.update_expert")}</DialogTitle>
+                <UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
+            </Dialog>
+        </>
+    );
+};
+export default Update;

src/components/dashboard/expert-management/TableRowActions.jsx

@@ -0,0 +1,28 @@
+import {Box} from "@mui/material";
+import Update from "./Form/UpdateForm"
+import Delete from "./Form/DeleteForm";
+import ChangePassword from "./Form/ChangePassword";
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <Update
+                row={row}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            {/*<ChangePassword*/}
+            {/*    rowId={row.getValue("id")}*/}
+            {/*    mutate={mutate}*/}
+            {/*    fetchUrl={fetchUrl}*/}
+            {/*/>*/}
+            <Delete
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;

src/components/dashboard/expert-management/TableToolbar.jsx

@@ -0,0 +1,14 @@
+import {useTranslations} from "next-intl";
+import Create from "./Form/CreateForm";
+import {Box} from "@mui/material";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+    return (
+        <Box>
+            <Create mutate={mutate} fetchUrl={fetchUrl}/>
+        </Box>
+    );
+}
+
+export default TableToolbar;

src/components/dashboard/expert-management/index.jsx

@@ -0,0 +1,12 @@
+import DashboardLayouts from "@/layouts/DashboardLayout";
+import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
+
+function DashboardExpertManagementComponent() {
+    return (
+        <DashboardLayouts>
+            <ExpertManagementDataTable/>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardExpertManagementComponent;

src/core/data/apiRoutes.js

@@ -8,6 +8,14 @@ export const GET_USER_TOKEN = BASE_URL + "/api/auth/login";
 export const UPDATE_AVATAR = BASE_URL + "";
 //end edit profile
 
+// role list
+export const GET_ROLE_LIST = BASE_URL + "/api/roles/list";
+// role list
+
+// province list
+export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
+// province list
+
 //change password
 export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";
 //end change password
@@ -34,3 +42,7 @@ export const DELETE_ROLE_MANAGEMENT =
 export const GET_PERMISSIONS_LIST =
     BASE_URL + "/api/permissions/list"
 //role management
+
+//expert management
+export const EXPERT_MANAGEMENT = BASE_URL + "/api/users";
+//expert management

src/core/data/sidebarMenu.jsx

@@ -1,5 +1,6 @@
 import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 
 const sidebarMenu = [
     [
@@ -11,6 +12,15 @@ const sidebarMenu = [
             selected: false,
             permission: "all",
         },
+        {
+            key: "sidebar.expert-management",
+            type: "page",
+            name: "expert_management",
+            route: "/dashboard/expert-management",
+            icon: <ManageAccountsIcon/>,
+            selected: false,
+            permission: "all",
+        },
         {
             key: "sidebar.role-management",
             name : "role_management",

src/lib/app/hooks/useProvince.jsx

@@ -0,0 +1,30 @@
+import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+
+const useProvince = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then(({data}) => {
+            return data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData: true
+    });
+
+    return {
+        provinceList: data,
+        isLoadingProvinceList: isLoading,
+        errorProvinceList: !data
+    }
+};
+
+export default useProvince;

src/lib/app/hooks/useRole.jsx

@@ -0,0 +1,30 @@
+import {GET_ROLE_LIST} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useSWR from "swr";
+
+const useRole = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then(({data}) => {
+            return data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(GET_ROLE_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+        keepPreviousData: true
+    });
+
+    return {
+        roleList: data,
+        isLoadingRoleList: isLoading,
+        errorRoleList: !data
+    }
+};
+
+export default useRole;

src/pages/dashboard/expert-management/index.jsx

@@ -0,0 +1,23 @@
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
+
+export default function ExpertManagement() {
+    return (
+        <WithAuthMiddleware>
+            <DashboardExpertManagementComponent/>
+        </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.expert_management",
+            isBot,
+            locale
+        },
+    };
+}