Merge branch 'develop' into 'feature/commercial_chief'

# Conflicts:
#   src/core/data/apiRoutes.js

public/locales/fa/app.json

@@ -33,6 +33,7 @@
     "transportation-assistant": "معاونت حمل و نقل",
     "commercial-chief": "رئیس اداره بازرگانی",
     "province-manager": "مدیر کل استانی",
+    "province-head-expert": "کارشناس ستادی",
     "change-password": "تغییر رمز عبور",
     "edit-profile": "ویرایش پروفایل"
   },
@@ -164,6 +165,17 @@
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست"
   },
+  "ProvinceHeadExpert": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
   "TransportationAssistance": {
     "name": "نام",
     "id": "کد یکتا",
@@ -203,6 +215,14 @@
     "proposed_amount": "مقدار پیشنهادی",
     "proposed_amount_positive": "مقدار پیشنهادی باید مثبت باشد"
   },
+  "ReviseDialog": {
+    "confirm": "تایید",
+    "button-cancel": "بستن",
+    "button-confirm": "تایید",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "optional": " (اختیاری)",
+    "description": "توضیحات خود را وارد نمائید"
+  },
   "RejectDialog": {
     "reject": "عدم تایید",
     "context": "آیا از عدم تایید این آیتم اطمینان دارید؟",

src/components/dashboard/province-head-expert/Form/ConfirmForm.jsx

@@ -0,0 +1,137 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import UploadSystem from "@/core/components/UploadSystem";
+import {useFormik} from "formik";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import {CONFIRM_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const Confirm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            confirm_img: null
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("expert_description", values.description);
+            if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
+
+            requestServer(`${CONFIRM_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("confirm_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("ConfirmDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="confirm_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250, 150]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ConfirmDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ConfirmDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Confirm;

src/components/dashboard/province-head-expert/Form/RejectForm.jsx

@@ -0,0 +1,144 @@
+import {REJECT_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import * as Yup from "yup";
+import {useState} from "react";
+import UploadSystem from "@/core/components/UploadSystem";
+import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
+import useDirection from "@/lib/app/hooks/useDirection";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const Reject = ({rowId, fetchUrl, mutate}) => {
+    const [selectedImage, setSelectedImage] = useState("");
+    const [fileType, setfileType] = useState(null);
+    const [fileName, setfileName] = useState(null);
+    const [showAddIcon, setShowAddIcon] = useState(true);
+    const t = useTranslations();
+    const {directionApp} = useDirection();
+    const [openRejectDialog, setOpenRejectDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("RejectDialog.description_error")),
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            reject_img: null
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("expert_description", values.description);
+            if (values.reject_img != null) formData.append("attachment", values.reject_img);
+
+            requestServer(`${REJECT_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value);
+        formik.handleChange(event);
+    };
+    const handleUploadChange = (event) => {
+        const uploadedFile = event.target?.files?.[0];
+        if (uploadedFile) {
+            const maxFileSize = 2 * 1024 * 1024;
+            if (uploadedFile.size > maxFileSize) {
+                UploadFileNotification(t);
+                event.target.value = "";
+                return;
+            }
+            const fileType = event.target?.files?.[0].type;
+            const fileName = event.target?.files?.[0].name;
+            setSelectedImage(URL.createObjectURL(uploadedFile));
+            setfileType(fileType);
+            setfileName(fileName);
+            formik.setFieldValue("reject_img", uploadedFile);
+            setShowAddIcon(false);
+        }
+    };
+    return (
+        <>
+            <Tooltip title={t("RejectDialog.reject")}>
+                <IconButton color="primary" onClick={() => setOpenRejectDialog(true)}>
+                    <ThumbDownIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openRejectDialog}
+                    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("RejectDialog.reject")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={t("RejectDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                        <Stack>
+                            <Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography>
+                            <UploadSystem
+                                selectedImage={selectedImage}
+                                handleUploadChange={handleUploadChange} // Pass the updated function directly
+                                setselectedImage={setSelectedImage}
+                                setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
+                                fieldname="reject_img"
+                                fileType={fileType}
+                                fileName={fileName}
+                                imageAlt={t("app_name")}
+                                imageSize={[250 /*width*/, 150 /*height*/]}
+                                setShowAddIcon={setShowAddIcon}
+                                showAddIcon={showAddIcon}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenRejectDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("RejectDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("RejectDialog.button-reject")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Reject;

src/components/dashboard/province-head-expert/Form/ReviceForm.jsx

@@ -0,0 +1,94 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Stack,
+    TextField,
+    Tooltip,
+} from "@mui/material";
+import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
+import {useFormik} from "formik";
+import {REVISE_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const Revise = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+        },
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            if (values.description != "") formData.append("expert_description", values.description);
+
+            requestServer(`${REVISE_PROVINCE_HEAD_EXPERT}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+
+    return (
+        <>
+            <Tooltip title={t("ReviseDialog.confirm")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ThumbUpAltIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog fullWidth open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("ReviseDialog.confirm")}</DialogTitle>
+                <DialogContent>
+                    <Stack spacing={2}>
+                        <Stack>
+                            <TextField
+                                name="description"
+                                multiline
+                                rows={8}
+                                label={<>
+                                    <span>{t("ReviseDialog.description")}</span><small>{t("ReviseDialog.optional")}</small></>}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            />
+                        </Stack>
+                    </Stack>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={formik.isSubmitting} autoFocus>
+                        {t("ReviseDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                            disabled={formik.isSubmitting}>
+                        {t("ReviseDialog.button-confirm")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default Revise;

src/components/dashboard/province-head-expert/TableRowActions.jsx

@@ -0,0 +1,29 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+import ReviseForm from "@/components/dashboard/province-head-expert/Form/ReviceForm";
+
+const TableRowActions = ({row, mutate, fetchUrl}) => {
+
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <ConfirmForm
+                rowId={row.getValue("id")}
+                mutate={mutate}
+                fetchUrl={fetchUrl}
+            />
+            <RejectForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+            <ReviseForm
+                rowId={row.getValue("id")}
+                fetchUrl={fetchUrl}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRowActions;

src/components/dashboard/province-head-expert/index.jsx

@@ -0,0 +1,237 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, IconButton, Typography} from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import {useMemo} from "react";
+import {GET_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import {LocalizationProvider, MobileDateTimePicker,} from "@mui/x-date-pickers";
+import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
+import moment from "jalali-moment";
+import {faIR} from "@mui/x-date-pickers/locales";
+import DataTable from "@/core/components/DataTable";
+import TableRowActions from "./TableRowActions"
+
+function DashboardProvinceHeadExpertComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("ProvinceHeadExpert.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("ProvinceHeadExpert.name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.national_id,
+                id: "national_id",
+                header: t("ProvinceHeadExpert.national_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.phone_number,
+                id: "phone_number",
+                header: t("ProvinceHeadExpert.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "created_at",
+                header: t("ProvinceHeadExpert.created_at"),
+                enableColumnFilter: true,
+                datatype: "date",
+                filterFn: "lessThan",
+                columnFilterModeOptions: ["lessThan", "greaterThan"],
+                Cell: ({renderedCellValue}) => {
+                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+                },
+                Header: ({column}) => <em>{column.columnDef.header}</em>,
+                Filter: ({column}) => {
+                    const filterFnValue = column.columnDef._filterFn;
+                    return (
+                        <Box sx={{display: "flex", alignItems: "start"}}>
+                            <LocalizationProvider
+                                dateAdapter={AdapterDateFnsJalali}
+                                localeText={
+                                    faIR.components.MuiLocalizationProvider.defaultProps
+                                        .localeText
+                                }
+                            >
+                                <MobileDateTimePicker
+                                    ampm={false}
+                                    onChange={(newValue) => {
+                                        const date = new Date(newValue);
+                                        const formattedDate = moment(date)
+                                            .locale("en")
+                                            .format("YYYY-MM-DD HH:mm");
+                                        column.setFilterValue(formattedDate);
+                                    }}
+                                    slotProps={{
+                                        textField: {
+                                            placeholder: "تاریخ خود را وارد کنید",
+                                            helperText: `${t("filter_mode")}: ${t(filterFnValue)}`,
+                                            sx: {minWidth: "120px"},
+                                            variant: "standard",
+                                        },
+                                    }}
+                                    value={
+                                        column.getFilterValue()
+                                            ? new Date(column.getFilterValue())
+                                            : null
+                                    }
+                                />
+                            </LocalizationProvider>
+                            <IconButton
+                                size="small"
+                                onClick={() => {
+                                    column.setFilterValue(null);
+                                }}
+                                sx={{
+                                    color: column.getFilterValue()
+                                        ? "rgba(0, 0, 0, 0.54)"
+                                        : "#bfbfbf",
+                                }}
+                            >
+                                <ClearIcon/>
+                            </IconButton>
+                        </Box>
+                    );
+                },
+            },
+            {
+                accessorFn: (row) =>
+                    moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+                id: "updated_at",
+                header: t("ProvinceHeadExpert.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("ProvinceHeadExpert.navgan_id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: [
+                    "equals",
+                    "notEquals",
+                    "contains",
+                    "lessThan",
+                    "greaterThan",
+                    "between",
+                ],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.vehicle_type,
+                id: "vehicle_type",
+                header: t("ProvinceHeadExpert.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("ProvinceHeadExpert.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                // filterFn: "equals",
+                // filterSelectOptions: [
+                // ],
+                // filterVariant: "select",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_PROVINCE_HEAD_EXPERT}
+                    columns={columns}
+                    selectableRow={false}
+                    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 DashboardProvinceHeadExpertComponent;

src/core/data/apiRoutes.js

@@ -78,3 +78,16 @@ export const REJECT_PROVINCE_MANAGER =
     BASE_URL + "/dashboard/province_manager/reject";
 //province manager
 
+// province head expert
+export const GET_PROVINCE_HEAD_EXPERT =
+    BASE_URL + "/dashboard/province_head_expert/show";
+
+export const CONFIRM_PROVINCE_HEAD_EXPERT =
+    BASE_URL + "/dashboard/province_head_expert/confirm";
+
+export const REJECT_PROVINCE_HEAD_EXPERT =
+    BASE_URL + "/dashboard/province_head_expert/reject";
+
+export const REVISE_PROVINCE_HEAD_EXPERT =
+    BASE_URL + "/dashboard/province_head_expert/edit";
+//province head expert

src/core/data/sidebarMenu.jsx

@@ -65,6 +65,14 @@ const sidebarMenu = [
             selected: false,
             role: "province_manager",
         },
+        {
+            key: "sidebar.province-head-expert",
+            type: "page",
+            route: "/dashboard/province-head-expert",
+            icon: <DesktopWindowsIcon/>,
+            selected: false,
+            role: "province_head_expert",
+        },
     ],
 ];
 

src/pages/dashboard/province-head-expert/index.jsx

@@ -0,0 +1,26 @@
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardProvinceHeadExpertComponent from "@/components/dashboard/province-head-expert";
+
+const requiredPermissions = ["province_head_expert"];
+export default function PassengerOffice() {
+    return (
+        <WithAuthMiddleware>
+            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
+                <DashboardProvinceHeadExpertComponent/>
+            </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.province_manager_page",
+            isBot,
+        },
+    };
+}