Merge branch 'feature/TF-84_implemention_expert_management' into 'develop'

TF-84 implemention of expert management

See merge request witel-front-end/loan-facilities/expert!84

public/locales/fa/app.json

@@ -47,6 +47,7 @@
     "province-head-expert": "کارشناس ستادی",
     "change-password": "تغییر رمز عبور",
     "development-assistant": "معاون توسعه",
+    "expert-management": "مدیریت کارشناسان",
     "user-management": "مدیریت کاربر",
     "edit-profile": "ویرایش پروفایل"
   },
@@ -102,8 +103,9 @@
     "development_assistant_page": "معاون توسعه",
     "inspector_expert_page": "بازدید کارشناس",
     "commercial_chief_page": "رئیس اداره بازرگانی",
-    "user_management_page": "مدیریت کاربر",
+    "edit_profile": "ویرایش پروفایل",
-    "edit_profile": "ویرایش پروفایل"
+    "expert_management": "مدیریت کارشناسان",
+    "user_management_page": "مدیریت کاربر"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
@@ -350,6 +352,68 @@
     "type_id": "نوع کاربر",
     "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
   },
+  "ExpertMangement": {
+    "id": "کد یکتا",
+    "name": "نام",
+    "username": "نام کاربری",
+    "email": "پست الکترونیک",
+    "phone_number": "شماره همراه",
+    "national_id": "کد ملی",
+    "position": "سمت",
+    "province_name": "استان",
+    "city_name": "شهر",
+    "role_name": "نقش",
+    "updated_at": "آخرین بروزرسانی",
+    "button_while_submiting": "درحال افزودن کارشناس",
+    "button_submit": "افزودن کارشناس",
+    "button_close": "بستن",
+    "button_delete": "حذف",
+    "add": "افزودن کارشناس",
+    "button-cancel": "بستن",
+    "button-confirm": "ثبت",
+    "create": "افزودن کارشناس",
+    "update": "ویرایش کارشناس",
+    "change_password": "تغییر رمز عبور",
+    "text_field_name": "نام",
+    "text_field_username": "نام کاربری",
+    "text_field_email": "پست الکترونیک",
+    "text_field_phone_number": "شماره همراه",
+    "text_field_national_id": "کد ملی",
+    "text_field_password": "رمز عبور",
+    "text_field_position": "سمت",
+    "text_field_province_id": "استان",
+    "text_field_city_id": "شهر",
+    "text_field_role_id": "نقش",
+    "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_name": "نام خود را وارد کنید",
+    "error_message_username": "نام کاربری خود را وارد کنید",
+    "error_message_email": "پست الکترونیک خود را وارد کنید",
+    "error_message_phone_number": "شماره همراه خود را وارد کنید",
+    "error_message_national_id": "کد ملی خود را وارد کنید",
+    "error_message_password": "رمز عبور خود را وارد کنید",
+    "error_message_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
+    "error_message_position": "سمت خود را وارد کنید",
+    "error_message_province_id": "استان خود را وارد کنید",
+    "error_message_city_id": "شهر خود را وارد کنید",
+    "error_message_role_id": "نقش خود را وارد کنید",
+    "error_message_new_password": "رمز عبور جدید را وارد کنید",
+    "error_message_new_password_regex": "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
+    "personal_info": "مشخصات کارشناس",
+    "user_info": "اطلاعات کاربری",
+    "rest_info": "اطلاعات تکمیلی",
+    "delete_tooltip": "حذف",
+    "update_tooltip": "ویرایش کارشناس",
+    "change_password_tooltip": "تغییر رمز عبور",
+    "delete_expert": "حذف کارشناس",
+    "are_you_sure_text": "آیا از انجام این عملیات اطمینان دارید؟"
+  },
   "DeleteDialog": {
     "delete": "حذف",
     "button-cancel": "انصراف",

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

@@ -0,0 +1,91 @@
+import {useTranslations} from "next-intl";
+import {Button, DialogActions, DialogContent, IconButton, InputAdornment, TextField} from "@mui/material";
+import {CHANGE_PASSWORD_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {Visibility, VisibilityOff} from "@mui/icons-material";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+
+const ChnagePasswordContent = ({rowId, fetchUrl, mutate, setOpenChangePasswordDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    const validationSchema = Yup.object().shape({
+        new_password: Yup.string()
+            .required(t("ExpertMangement.error_message_new_password"))
+            .matches(
+                /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[A-Za-z!@#$%^&*\d]{8,}$/,
+                t("ExpertMangement.error_message_new_password_regex")
+            ),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            new_password: "",
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("new_password", values.new_password);
+
+            requestServer(`${CHANGE_PASSWORD_EXPERT_MANAGEMENT}/${rowId}`, 'post', {
+                auth: true,
+                data: formData
+            })
+                .then((response) => {
+                    mutate(fetchUrl)
+                }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <TextField
+                    name="new_password"
+                    label={t("ExpertMangement.text_field_new_password")}
+                    variant="outlined"
+                    margin="normal"
+                    size="small"
+                    value={formik.values.new_password}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    error={formik.touched.new_password && !!formik.errors.new_password}
+                    helperText={formik.touched.new_password && formik.errors.new_password ? formik.errors.new_password : null}
+                    type={showPassword ? "text" : "password"}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <IconButton onClick={handleClickShowPassword}>
+                                    {showPassword ? <Visibility/> : <VisibilityOff/>}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
+                    sx={{width: "100%"}}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenChangePasswordDialog(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}>
+                    {t("ExpertMangement.button-confirm")}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default ChnagePasswordContent;

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

@@ -0,0 +1,33 @@
+import {useTranslations} from "next-intl";
+import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
+import KeyIcon from '@mui/icons-material/Key';
+import {useState} from "react";
+import ChangePasswordContent from "./ChangePasswordContent";
+
+
+const ChangePassword = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openChnagePasswordDialog, setOpenChangePasswordDialog] = useState(false);
+
+    return (
+        <>
+            <Tooltip title={t("ExpertMangement.change_password_tooltip")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenChangePasswordDialog(true)
+                    }}
+                >
+                    <KeyIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth maxWidth={'xs'} open={openChnagePasswordDialog}
+                    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.change_password")}</DialogTitle>
+                <ChangePasswordContent rowId={rowId} mutate={mutate} fetchUrl={fetchUrl}
+                                       setOpenChangePasswordDialog={setOpenChangePasswordDialog}/>
+            </Dialog>
+        </>
+    );
+};
+export default ChangePassword;

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

@@ -0,0 +1,385 @@
+import {
+    Box,
+    Button,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    FormControl,
+    FormHelperText,
+    Grid,
+    IconButton,
+    InputAdornment,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+} from "@mui/material";
+import {useFormik} from "formik";
+import {useTranslations} from "next-intl";
+import * as Yup from "yup";
+import {useState} from "react";
+import {CREATE_EXPERT_MANAGEMENT, GET_CITY_LIST} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useProvince from "@/lib/app/hooks/useProvince";
+import useRole from "@/lib/app/hooks/useRole";
+import {Visibility, VisibilityOff} from "@mui/icons-material";
+
+const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const requestServer = useRequest()
+    const [cityList, setCityList] = useState([]);
+    const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
+    const {roleList, isLoadingRoleList, errorRoleList} = useRole();
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    function getCities(province_id) {
+        formik.setFieldTouched("city_id", false, false);
+        formik.setFieldValue("city_id", "")
+        setCityTextField(t("ExpertMangement.text_field_loading_cities_list"))
+        requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", {auth: true, notification: false})
+            .then(({data}) => {
+                const result = data.data;
+                const formattedData = result.map((city, index) => ({
+                    id: index,
+                    name: city.name,
+                    value: city.id,
+                }));
+                setCityList(formattedData);
+                setCityTextField(t("ExpertMangement.text_field_city_id"))
+            }).catch(() => {
+            setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
+        });
+    }
+
+
+    const validationSchema = Yup.object().shape({
+        name: Yup.string().required(t("ExpertMangement.error_message_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")),
+        national_id: Yup.string().required(t("ExpertMangement.error_message_national_id")),
+        password: Yup.string()
+            .required(t("ExpertMangement.error_message_password"))
+            .matches(
+                /^(?=.*[0-9])(?=.*[A-Za-z!@#$%^&*])[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")),
+        city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
+        role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            name: "",
+            username: "",
+            email: "",
+            phone_number: "",
+            national_id: "",
+            password: "",
+            position: "",
+            province_id: "",
+            city_id: "",
+            role_id: ""
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name);
+            formData.append("national_id", values.national_id);
+            formData.append("phone_number", values.phone_number);
+            formData.append("email", values.email);
+            formData.append("username", values.username);
+            formData.append("password", values.password);
+            formData.append("province_id", values.province_id);
+            formData.append("city_id", values.city_id);
+            formData.append("position", values.position);
+            formData.append("role_id", values.role_id);
+
+            requestServer(`${CREATE_EXPERT_MANAGEMENT}`, 'post', {auth: true, data: formData})
+                .then((response) => {
+                    mutate(fetchUrl)
+                    setOpenCreateDialog(false)
+                }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.personal_info")}
+                        />
+                    </Divider>
+                </Box>
+                <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                    <Grid item xs={12} sm={6} md={4} lg={3}>
+                        <TextField
+                            name="name"
+                            label={t("ExpertMangement.text_field_name")}
+                            variant="outlined"
+                            margin="normal"
+                            size="small"
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error={formik.touched.name && !!formik.errors.name}
+                            helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
+                            sx={{width: "100%"}}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6} md={4} lg={3}>
+                        <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} lg={3}>
+                        <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} lg={3}>
+                        <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>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.user_info")}
+                        />
+                    </Divider>
+                </Box>
+                <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>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.rest_info")}
+                        />
+                    </Divider>
+                </Box>
+                <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);
+                                    getCities(e.target.value)
+                                }}
+                                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 item xs={12} sm={6}>
+                        <FormControl
+                            disabled={cityList.length === 0 ? true : false}
+                            error={formik.touched.city_id && !!formik.errors.city_id}
+                            sx={{width: "100%", mt: 2}}
+                            size="small"
+                        >
+                            <InputLabel>{cityTextField}</InputLabel>
+                            <Select
+                                name="city_id"
+                                label={t("ExpertMangement.text_field_city_id")}
+                                value={formik.values.city_id}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                variant="outlined"
+                            >
+                                {cityList.map((item) => (
+                                    <MenuItem key={item.value} value={item.value}>
+                                        {item.name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                            <FormHelperText>
+                                {formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""}
+                            </FormHelperText>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+                <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.role_id && !!formik.errors.role_id}
+                            sx={{width: "100%", mt: 2}}
+                            size="small"
+                        >
+                            <InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
+                            <Select
+                                name="role_id"
+                                label={t("ExpertMangement.text_field_role_id")}
+                                value={formik.values.role_id}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                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.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
+                            </FormHelperText>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+            </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}>
+                    {t("ExpertMangement.button-confirm")}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+
+export default CreateContent;

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.add")} arrow placement="right">
+                    <Button
+                        color="primary"
+                        variant="contained"
+                        size="small"
+                        sx={{textTransform: "unset", alignSelf: "center"}}
+                        startIcon={<DataSaverOnIcon/>}
+                        onClick={() => {
+                            setOpenCreateDialog(true)
+                        }}
+                    >
+                        {t("ExpertMangement.add")}
+                    </Button>
+                </Tooltip>
+            </Stack>
+            <Dialog 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.jsx

@@ -0,0 +1,73 @@
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+    IconButton,
+    Tooltip
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import {useState} from "react";
+import {DELETE_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(`${DELETE_EXPERT_MANAGEMENT}/${rowId}`, 'post')
+            .then((response) => {
+                mutate(fetchUrl)
+            })
+            .catch(() => {
+            })
+            .finally(() => {
+                setIsSubmitting(false)
+                setOpenDeleteDialog(false);
+            });
+    };
+
+    return (
+        <>
+            <Tooltip title={t("ExpertMangement.delete_tooltip")}>
+                <IconButton
+                    color="primary"
+                    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_close")}
+                    </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.jsx

@@ -0,0 +1,342 @@
+import {useTranslations} from "next-intl";
+import {
+    Box,
+    Button,
+    Chip,
+    DialogActions,
+    DialogContent,
+    Divider,
+    FormControl,
+    FormHelperText,
+    Grid,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField
+} from "@mui/material";
+import {useEffect, useState} from "react";
+import {useFormik} from "formik";
+import {GET_CITY_LIST, UPDATE_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import * as Yup from "yup";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useProvince from "@/lib/app/hooks/useProvince";
+import useRole from "@/lib/app/hooks/useRole";
+
+const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest();
+    const [cityList, setCityList] = useState([]);
+    const [citiesExist, setCitiesExist] = useState(false);
+    const [cityTextField, setCityTextField] = useState(t("ExpertMangement.text_field_please_select_province"));
+    const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
+    const {roleList, isLoadingRoleList, errorRoleList} = useRole();
+
+    function getCities(province_id) {
+        formik.setFieldTouched("city_id", false, false);
+        citiesExist && formik.setFieldValue("city_id", "")
+        setCityTextField(t("ExpertMangement.text_field_loading_cities_list"))
+        requestServer(`${GET_CITY_LIST}?province_id=${province_id}`, "get", {auth: true, notification: false})
+            .then(({data}) => {
+                const result = data.data;
+                const formattedData = result.map((city, index) => ({
+                    id: index,
+                    name: city.name,
+                    value: city.id,
+                }));
+                setCitiesExist(true);
+                setCityList(formattedData);
+                setCityTextField(t("ExpertMangement.text_field_city_id"))
+            }).catch(() => {
+            setCityTextField(t("ExpertMangement.text_field_error_fetching_cities"))
+        });
+    }
+
+    const validationSchema = Yup.object().shape({
+        name: Yup.string().required(t("ExpertMangement.error_message_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")),
+        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")),
+        city_id: Yup.string().required(t("ExpertMangement.error_message_city_id")),
+        role_id: Yup.string().required(t("ExpertMangement.error_message_role_id"))
+    });
+    const formik = useFormik({
+        initialValues: {
+            name: row.original.name,
+            username: row.original.username,
+            email: row.original.email,
+            phone_number: row.original.phone_number,
+            national_id: row.original.national_id,
+            position: row.original.position,
+            province_id: row.original.province_id,
+            city_id: row.original.city_id,
+            role_id: row.original.roles[0].id
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("name", values.name);
+            formData.append("national_id", values.national_id);
+            formData.append("phone_number", values.phone_number);
+            formData.append("email", values.email);
+            formData.append("username", values.username);
+            formData.append("province_id", values.province_id);
+            formData.append("city_id", values.city_id);
+            formData.append("position", values.position);
+            formData.append("role_id", values.role_id);
+
+            requestServer(`${UPDATE_EXPERT_MANAGEMENT}/${row.original.id}`, 'post', {auth: true, data: formData})
+                .then((response) => {
+                    mutate(fetchUrl)
+                }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    useEffect(() => {
+        getCities(formik.values.province_id);
+    }, [formik.values.province_id]);
+
+    return (
+        <>
+            <DialogContent>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.personal_info")}
+                        />
+                    </Divider>
+                </Box>
+                <Grid container justifyContent="space-around" spacing={2} sx={{pb: 2}}>
+                    <Grid item xs={12} sm={6} md={4} lg={3}>
+                        <TextField
+                            name="name"
+                            label={t("ExpertMangement.text_field_name")}
+                            variant="outlined"
+                            margin="normal"
+                            size="small"
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            onBlur={formik.handleBlur}
+                            error={formik.touched.name && !!formik.errors.name}
+                            helperText={formik.touched.name && formik.errors.name ? formik.errors.name : null}
+                            sx={{width: "100%"}}
+                        />
+                    </Grid>
+                    <Grid item xs={12} sm={6} md={4} lg={3}>
+                        <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} lg={3}>
+                        <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} lg={3}>
+                        <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>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.user_info")}
+                        />
+                    </Divider>
+                </Box>
+                <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>
+                <Box sx={{my: 1}}>
+                    <Divider>
+                        <Chip
+                            label={t("ExpertMangement.rest_info")}
+                        />
+                    </Divider>
+                </Box>
+                <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"
+                                label={t("ExpertMangement.text_field_province_id")}
+                                value={provinceList ? formik.values.province_id : ""}
+                                onChange={formik.handleChange}
+                                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 item xs={12} sm={6}>
+                        <FormControl
+                            disabled={cityList.length === 0}
+                            error={formik.touched.city_id && !!formik.errors.city_id}
+                            sx={{width: "100%", mt: 2}}
+                            size="small"
+                        >
+                            <InputLabel>{cityTextField}</InputLabel>
+                            <Select
+                                name="city_id"
+                                label={t("ExpertMangement.text_field_city_id")}
+                                value={cityList.length ? formik.values.city_id : ""}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                variant="outlined"
+                            >
+                                {cityList.map((item) => (
+                                    <MenuItem key={item.value} value={item.value}>
+                                        {item.name}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                            <FormHelperText>
+                                {formik.touched.city_id && formik.errors.city_id ? formik.errors.city_id : ""}
+                            </FormHelperText>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+                <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.role_id && !!formik.errors.role_id}
+                            sx={{width: "100%", mt: 2}}
+                            size="small"
+                        >
+                            <InputLabel>{t("ExpertMangement.text_field_role_id")}</InputLabel>
+                            <Select
+                                name="role_id"
+                                label={t("ExpertMangement.text_field_role_id")}
+                                value={roleList ? formik.values.role_id : ""}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                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.role_id && formik.errors.role_id ? formik.errors.role_id : ""}
+                            </FormHelperText>
+                        </FormControl>
+                    </Grid>
+                </Grid>
+            </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}>
+                    {t("ExpertMangement.button-confirm")}
+                </Button>
+            </DialogActions>
+        </>
+    );
+};
+export default UpdateContent;

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

@@ -0,0 +1,32 @@
+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"
+                    onClick={() => {
+                        setOpenUpdateDialog(true)
+                    }}
+                >
+                    <EditIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog 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")}</DialogTitle>
+                <UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
+            </Dialog>
+        </>
+    );
+};
+export default Update;

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

@@ -0,0 +1,29 @@
+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,13 @@
+import {useTranslations} from "next-intl";
+import Create from "./Form/CreateForm";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+    return (
+        <>
+            <Create mutate={mutate} fetchUrl={fetchUrl}/>
+        </>
+    );
+}
+
+export default TableToolbar;

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

@@ -0,0 +1,191 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import DataTable from "@/core/components/DataTable";
+import TableToolbar from "@/components/dashboard/expert-management/TableToolbar";
+import moment from "jalali-moment";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+
+function DashboardExpertManagementComponent() {
+    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.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_name,
+                id: "province_name",
+                header: t("ExpertMangement.province_name"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.city_name,
+                id: "city_name",
+                header: t("ExpertMangement.city_name"),
+                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) =>
+                    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 (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_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>
+        </DashboardLayouts>
+    );
+}
+
+export default DashboardExpertManagementComponent;

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

@@ -177,6 +177,7 @@ function DashboardPassengerOfficeComponent() {
                     enableGlobalFilter={false}
                     enableColumnResizing={false} // if you want true this you shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                     enableRowActions={true}
+                    renderMainAction={TableToolbar}
                     TableRowAction={TableRowActions}
                 />
             </Box>

src/core/data/apiRoutes.js

@@ -151,6 +151,28 @@ export const GET_LOAN_STATE_NAVGAN =
     BASE_URL + "/dashboard/loan_states/navgan"
 //loan management navgan
 
+//expert management
+export const GET_EXPERT_MANAGEMENT =
+    BASE_URL + "/dashboard/experts/show"
+export const CREATE_EXPERT_MANAGEMENT =
+    BASE_URL + "/dashboard/experts/store"
+export const UPDATE_EXPERT_MANAGEMENT =
+    BASE_URL + "/dashboard/experts/update"
+export const DELETE_EXPERT_MANAGEMENT =
+    BASE_URL + "/dashboard/experts/delete"
+export const CHANGE_PASSWORD_EXPERT_MANAGEMENT =
+    BASE_URL + "/dashboard/experts/change_password"
+//expert management
+
+// province/city list
+export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
+export const GET_CITY_LIST = BASE_URL + "/api/cities";
+// province/city list
+
+// role list
+export const GET_ROLE_LIST = BASE_URL + "/dashboard/roles/list";
+// role list
+
 //user management
 export const GET_USER_MANAGEMENT =
     BASE_URL + "/dashboard/user_management/show"

src/core/data/sidebarMenu.jsx

@@ -10,6 +10,7 @@ import GradingIcon from '@mui/icons-material/Grading';
 import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
 import Diversity3Icon from '@mui/icons-material/Diversity3';
 import PaidIcon from '@mui/icons-material/Paid';
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import PersonIcon from '@mui/icons-material/Person';
 
 const sidebarMenu = [
@@ -137,6 +138,15 @@ const sidebarMenu = [
             selected: false,
             permission: "manage_navgan_loan",
         },
+        {
+            key: "sidebar.expert-management",
+            name: "expert_management",
+            type: "page",
+            route: "/dashboard/expert-management",
+            icon: <ManageAccountsIcon/>,
+            selected: false,
+            permission: "manage_navgan_loan",
+        },
         {
             key: "sidebar.user-management",
             name: "user_management",

src/lib/app/hooks/useProvince.jsx

@@ -0,0 +1,29 @@
+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;
+        }).catch(() => {
+        })
+    };
+
+    const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    });
+
+    return {
+        provinceList: data,
+        isLoadingProvinceList: isLoading,
+        errorProvinceList: !data
+    }
+};
+
+export default useProvince;

src/lib/app/hooks/useRole.jsx

@@ -0,0 +1,29 @@
+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
+    });
+
+    return {
+        roleList: data,
+        isLoadingRoleList: isLoading,
+        errorRoleList: !data
+    }
+};
+
+export default useRole;

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

@@ -0,0 +1,26 @@
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
+
+const requiredPermissions = ["manage_transportation_navgan"];
+export default function ExpertManagement() {
+    return (
+        <WithAuthMiddleware>
+            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
+                <DashboardExpertManagementComponent/>
+            </RolePermissionMiddleware>
+        </WithAuthMiddleware>
+    );
+}
+
+export async function getServerSideProps({req, locale}) {
+    const {isBot} = parse(req.headers["user-agent"]);
+    return {
+        props: {
+            messages: (await import(`&/locales/${locale}/app.json`)).default,
+            title: "Dashboard.expert_management",
+            isBot,
+        },
+    };
+}