make ready structure and directories for expert management implemention

public/locales/fa/app.json

@@ -42,7 +42,8 @@
     "province-head-expert": "کارشناس ستادی",
     "change-password": "تغییر رمز عبور",
     "development-assistant": "معاون توسعه",
-    "edit-profile": "ویرایش پروفایل"
+    "edit-profile": "ویرایش پروفایل",
+    "expert-management": "مدیریت کارشناسان"
   },
   "secondary": {
     "passenger-office": "توزیع درخواست",
@@ -321,5 +322,8 @@
     "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
     "delete": "پاک کردن",
     "uploadfile_error": "حجم فایل بیشتر از 2 مگابایت می باشد"
+  },
+  "ExpertMangement": {
+    "id": "کد یکتا"
   }
 }

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

@@ -0,0 +1,85 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    FormControl,
+    FormHelperText,
+    IconButton,
+    InputLabel,
+    MenuItem,
+    Select,
+    Stack,
+    TextField,
+    Tooltip
+} from "@mui/material";
+import {useFormik} from "formik";
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
+import {UPDATE_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import * as Yup from "yup";
+import useLoanStateRefahi from "@/lib/prefetchDataTable/hooks/useLoanStateRefahi";
+
+
+const Delete = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {loan_state_refahi} = useLoanStateRefahi()
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        description: Yup.string().required(t("UpdateDialog.description_error")),
+        next_state_id: Yup.number().required(t("UpdateDialog.next-state-id-error"))
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            description: "",
+            next_state_id: ""
+        },
+        validationSchema,
+        onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("description", values.description);
+            formData.append("next_state_id", values.next_state_id);
+
+            requestServer(`${UPDATE_LOAN_MANAGEMENT_REFAHI}/${rowId}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    const handleDescriptionChange = (event) => {
+        formik.setFieldValue("description", event.target.value)
+    };
+    const handleNextStateIDChange = (event) => {
+        formik.setFieldValue("next_state_id", event.target.value)
+    };
+
+    return (
+        <>
+            <Tooltip title={t("UpdateDialog.update-tooltip")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ChangeCircleIcon/>
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+export default Delete;

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

@@ -0,0 +1,24 @@
+import {useTranslations} from "next-intl";
+import {IconButton, Tooltip} from "@mui/material";
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
+
+
+const Update = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+
+    return (
+        <>
+            <Tooltip title={t("UpdateDialog.update-tooltip")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <ChangeCircleIcon/>
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+};
+export default Update;

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

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

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

@@ -0,0 +1,60 @@
+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";
+
+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>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_EXPERT_MANAGEMENT}
+                    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 DashboardExpertManagementComponent;

src/core/data/apiRoutes.js

@@ -150,3 +150,16 @@ export const UPDATE_LOAN_MANAGEMENT_NAVGAN =
 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

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';
 
 const sidebarMenu = [
     [
@@ -136,6 +137,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",
+        },
     ],
 ];
 

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 ExpertMangement() {
+    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,
+        },
+    };
+}