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

# Conflicts:
#   public/locales/fa/app.json
#   src/core/components/DataTable.jsx
#   src/core/data/apiRoutes.js
#   src/core/data/sidebarMenu.jsx

src/components/dashboard/change-password/index.jsx

@@ -35,13 +35,13 @@ const DashboardChangePasswordComponent = () => {
     };
     const validationSchema = Yup.object().shape({
         current_password: Yup.string().required(
-            t("ChangePassword.error_message_required")
+            t("ChangePassword.error_message_current_password")
         ),
         new_password: Yup.string()
             .min(8, t("ChangePassword.error_message_password_length"))
-            .required(t("ChangePassword.error_message_required")),
+            .required(t("ChangePassword.error_message_new_password")),
         new_password_confirmation: Yup.string()
-            .required(t("ChangePassword.error_message_required"))
+            .required(t("ChangePassword.error_message_confirm_password"))
             .test(
                 t("ChangePassword.error_message_password_match"),
                 t("ChangePassword.error_message_password_not_match"),

src/components/dashboard/commercial-chief/index.jsx

@@ -131,8 +131,11 @@ function DashboardCommercialChiefComponent() {
                     tableUrl={GET_COMMERCIAL_CHIEF}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

src/components/dashboard/development-assistant/index.jsx

@@ -132,10 +132,13 @@ function DashboardDevelopmentAssistantComponent() {
                     tableUrl={GET_DEVELOPMENT_ASSISTANT}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
                     enablePinning={true}
                     enableDensityToggle={false}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}
                     enableHiding={true}

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

@@ -131,9 +131,12 @@ function DashboardInspectorExpertComponent() {
                     tableUrl={GET_INSPECTOR_EXPERT}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
                     enablePinning={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
                     enableColumnFilters={true}

src/components/dashboard/machinary-office/index.jsx

@@ -162,8 +162,11 @@ function DashboardMachinaryOfficeComponent() {
                     tableUrl={GET_MACHINARY_OFFICE}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

src/components/dashboard/navgan-loan-management/index.jsx

@@ -132,9 +132,11 @@ function DashboardNavganLoanManagementComponent() {
                     tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

src/components/dashboard/navgan-province-manager/index.jsx

@@ -163,8 +163,11 @@ function DashboardNavganProvinceManagerComponent() {
                     tableUrl={GET_NAVGAN_PROVINCE_MANAGER}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx

@@ -40,7 +40,7 @@ const Confirm = ({rowId, fetchUrl, mutate}) => {
             "is-number",
             `${t("ConfirmDialog.approved_amount_number")}`,
             (value) => !isNaN(value)
-        ).test("positive", `${t("ConfirmDialog.proposed_amount_positive")}`, (value) => value >= 0)
+        ).test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
             .required(t("ConfirmDialog.approved_amount_error"))
     });
     const formik = useFormik({

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

@@ -163,9 +163,11 @@ function DashboardPassengerOfficeComponent() {
                     tableUrl={GET_PASSENGER_BOSS}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

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

@@ -163,9 +163,11 @@ function DashboardPassengerOfficeComponent() {
                     tableUrl={GET_PASSENGER_OFFICE}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

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

@@ -132,8 +132,11 @@ function DashboardProvinceHeadExpertComponent() {
                     tableUrl={GET_PROVINCE_HEAD_EXPERT}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

src/components/dashboard/refahi-loan-management/index.jsx

@@ -132,8 +132,10 @@ function DashboardRefahiLoanManagementComponent() {
                     tableUrl={GET_LOAN_MANAGEMENT_REFAHI}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
+                    enableCustomToolbar={false}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enableLastUpdate={true}
                     enablePinning={true}
                     enableDensityToggle={false}

src/components/dashboard/refahi-province-manager/index.jsx

@@ -132,8 +132,10 @@ function DashboardRefahiProvinceManagerComponent() {
                     tableUrl={GET_REFAHI_PROVINCE_MANAGER}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
-                    // CustomToolbar={<TableToolbar />}
+                    enableCustomToolbar={false}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enableLastUpdate={true}
                     enablePinning={true}
                     enableDensityToggle={false}

src/components/dashboard/transportation-assistance/index.jsx

@@ -163,8 +163,11 @@ function DashboardTransportationAssistanceComponent() {
                     tableUrl={GET_TRANSPORTATION_ASSISTANCE}
                     columns={columns}
                     selectableRow={false}
-                    enableCustomToolbar={true}
+                    enableCustomToolbar={false}
                     enableLastUpdate={true}
+                    sorting={[{
+                        id: 'id', desc: false
+                    }]}
                     enablePinning={true}
                     enableDensityToggle={false}
                     initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)

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

@@ -0,0 +1,163 @@
+import {
+    Button,
+    DialogActions,
+    DialogContent,
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    MenuItem,
+    Select,
+    Stack,
+    TextField
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import useRequest from "@/lib/app/hooks/useRequest";
+import * as Yup from "yup";
+import {useFormik} from "formik";
+import {ADD_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+
+const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true})
+    const validationSchema = Yup.object().shape({
+        phone_number: Yup.mixed().test("is-number", `${t("AddDialog.phone_number_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.phone_number_positive")}`, (value) => value >= 0)
+            .test("max", `${t("AddDialog.phone_number_max")}`, (value) => value.length <= 11)
+            .required(t("AddDialog.phone_number_error")),
+        national_id: Yup.mixed().test("is-number", `${t("AddDialog.national_id_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.national_id_positive")}`, (value) => value >= 0)
+            .test("max", `${t("AddDialog.national_id_max")}`, (value) => value.length <= 10)
+            .required(t("AddDialog.national_id_error")),
+        type_id: Yup.number().required(t("AddDialog.type_id_error")),
+        navgan_id: Yup.number().when('type_id', {
+            is: 1, // Condition: Check if type_id is equal to 1
+            then: (schema) => schema.required(t("AddDialog.navgan_id_error")),
+            otherwise: (schema) => schema, // No validation for navgan_id when type_id is not 1
+        })
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            phone_number: "",
+            national_id: "",
+            type_id: "",
+            navgan_id: "",
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("phone_number", values.phone_number);
+            formData.append("national_id", values.national_id);
+            formData.append("type_id", values.type_id);
+            if (formik.values.type_id === 1) formData.append("navgan_id", values.navgan_id);
+
+            requestServer(ADD_USER_MANAGEMENT, 'post', {
+                data: formData,
+            }).then((response) => {
+                setOpenConfirmDialog(false)
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (
+        <>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            name="phone_number"
+                            rows={8}
+                            label={t("AddDialog.phone_number")}
+                            type="text"
+                            inputProps={{
+                                inputMode: "number", min: 0, pattern: "[0-9]*",
+                            }}
+                            value={formik.values.phone_number}
+                            onChange={(event) => {
+                                if (event.target.value.length <= 11) return formik.handleChange(event)
+                            }}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("phone_number")}
+                            error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
+                            helperText={formik.touched.phone_number && formik.errors.phone_number}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <TextField
+                            name="national_id"
+                            rows={8}
+                            label={t("AddDialog.national_id")}
+                            value={formik.values.national_id}
+                            onChange={(event) => {
+                                if (event.target.value.length <= 10) return formik.handleChange(event)
+                            }}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("national_id")}
+                            error={formik.touched.national_id && Boolean(formik.errors.national_id)}
+                            helperText={formik.touched.national_id && formik.errors.national_id}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormControl
+                            error={formik.touched.type_id && Boolean(formik.errors.type_id)}
+                        >
+                            <InputLabel>{t("AddDialog.type_id")}</InputLabel>
+                            <Select
+                                name="type_id"
+                                onBlur={formik.handleBlur("type_id")}
+                                label={t("AddDialog.type_id")}
+                                value={formik.values.type_id}
+                                onChange={formik.handleChange}
+                                fullWidth
+                                variant="outlined"
+
+                                sx={{mt: 1}}
+                            >
+                                <MenuItem value={1}>
+                                    {t("AddDialog.navgan")}
+                                </MenuItem>
+                                <MenuItem value={2}>
+                                    {t("AddDialog.refahi")}
+                                </MenuItem>
+                            </Select>
+                            <FormHelperText>
+                                {formik.touched.type_id && formik.errors.type_id}
+                            </FormHelperText>
+                        </FormControl>
+                    </Stack>
+                    <Stack>
+                        {formik.values.type_id === 1 ? (<TextField
+                            name="navgan_id"
+                            rows={8}
+                            label={t("AddDialog.navgan_id")}
+                            value={formik.values.navgan_id}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("navgan_id")}
+                            error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
+                            helperText={formik.touched.navgan_id && formik.errors.navgan_id}
+                            sx={{mt: 1}}
+                        />) : null}
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("AddDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("AddDialog.button-add")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+}
+export default CreateContent

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

@@ -0,0 +1,35 @@
+import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import CreateContent from "@/components/dashboard/user-management/Form/CreateForm/CreateContent";
+
+const CreateForm = ({mutate, fetchUrl}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <Tooltip title={t("AddDialog.add")} arrow placement="right">
+                <Button
+                    color="primary"
+                    variant="contained"
+                    size="small"
+                    sx={{textTransform: "unset", alignSelf: "center"}}
+                    startIcon={<DataSaverOnIcon/>}
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    {t("AddDialog.add")}
+                </Button>
+            </Tooltip>
+            <Dialog 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("AddDialog.add")}</DialogTitle>
+                <CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </Stack>
+    )
+}
+export default CreateForm

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

@@ -0,0 +1,67 @@
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    Tooltip,
+    Typography
+} from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import {DELETE_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+const DeleteForm = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+    const handleSubmit = () => {
+        setIsSubmitting(true)
+        requestServer(`${DELETE_USER_MANAGEMENT}/${rowId}`, 'delete').then((response) => {
+            mutate(fetchUrl)
+            update_notification()
+        }).catch(() => {
+        }).finally(() => {
+            setIsSubmitting(false)
+        });
+    }
+
+    return (
+        <>
+            <Tooltip title={t("DeleteDialog.delete")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <DeleteIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog maxWidth="sm" open={openConfirmDialog}
+                    PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
+                <DialogTitle>{t("DeleteDialog.delete")}</DialogTitle>
+                <DialogContent>
+                    <Typography>{t("DeleteDialog.typography")}</Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                            disabled={isSubmitting} autoFocus>
+                        {t("DeleteDialog.button-cancel")}
+                    </Button>
+                    <Button onClick={handleSubmit} variant="contained" color="primary"
+                            disabled={isSubmitting}>
+                        {t("DeleteDialog.button-delete")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};
+export default DeleteForm;

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

@@ -0,0 +1,178 @@
+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 EditIcon from '@mui/icons-material/Edit';
+import {UPDATE_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import * as Yup from "yup";
+
+const UpdateForm = ({row, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const requestServer = useRequest({auth: true})
+    const {update_notification} = useNotification()
+
+    const validationSchema = Yup.object().shape({
+        phone_number: Yup.mixed().test("is-number", `${t("AddDialog.phone_number_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.phone_number_positive")}`, (value) => value >= 0)
+            .test("max", `${t("AddDialog.phone_number_max")}`, (value) => value.length <= 11)
+            .required(t("AddDialog.phone_number_error")),
+        national_id: Yup.mixed().test("is-number", `${t("AddDialog.national_id_number")}`, (value) => !isNaN(value)).test("positive", `${t("AddDialog.national_id_positive")}`, (value) => value >= 0)
+            .test("max", `${t("AddDialog.national_id_max")}`, (value) => value.length <= 10)
+            .required(t("AddDialog.national_id_error")),
+        type_id: Yup.number().required(t("AddDialog.type_id_error")),
+        navgan_id: Yup.number().when('type_id', {
+            is: 1, // Condition: Check if type_id is equal to 1
+            then: (schema) => schema.required(t("AddDialog.navgan_id_error")),
+            otherwise: (schema) => schema, // No validation for navgan_id when type_id is not 1
+        })
+    });
+
+    const formik = useFormik({
+        initialValues: {
+            phone_number: row.getValue("phone_number"),
+            national_id: row.getValue("national_id"),
+            type_id: row.original.type_id,
+            navgan_id: row.getValue("navgan_id"),
+        }, validationSchema, onSubmit: (values, {setSubmitting}) => {
+            const formData = new FormData();
+            formData.append("phone_number", values.phone_number);
+            formData.append("national_id", values.national_id);
+            formData.append("type_id", values.type_id);
+            if (formik.values.type_id === 1) formData.append("navgan_id", values.navgan_id);
+            requestServer(`${UPDATE_USER_MANAGEMENT}/${row.getValue("id")}`, 'post', {
+                data: formData,
+            }).then((response) => {
+                mutate(fetchUrl)
+                update_notification()
+            }).catch(() => {
+            }).finally(() => {
+                setSubmitting(false);
+            });
+        },
+    });
+
+    return (<>
+        <Tooltip title={t("UpdateDialog.update-tooltip")}>
+            <IconButton
+                color="primary"
+                onClick={() => {
+                    setOpenConfirmDialog(true)
+                }}
+            >
+                <EditIcon/>
+            </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("UpdateDialog.update")}</DialogTitle>
+            <DialogContent>
+                <Stack spacing={2}>
+                    <Stack>
+                        <TextField
+                            name="phone_number"
+                            rows={8}
+                            label={t("UpdateDialog.phone_number")}
+                            value={formik.values.phone_number}
+                            onChange={(event) => {
+                                if (event.target.value.length <= 11) return formik.handleChange(event)
+                            }}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("phone_number")}
+                            error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
+                            helperText={formik.touched.phone_number && formik.errors.phone_number}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <TextField
+                            name="national_id"
+                            rows={8}
+                            label={t("UpdateDialog.national_id")}
+                            value={formik.values.national_id}
+                            onChange={(event) => {
+                                if (event.target.value.length <= 10) return formik.handleChange(event)
+                            }}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("national_id")}
+                            error={formik.touched.national_id && Boolean(formik.errors.national_id)}
+                            helperText={formik.touched.national_id && formik.errors.national_id}
+                            sx={{mt: 1}}
+                        />
+                    </Stack>
+                    <Stack>
+                        <FormControl
+                            error={formik.touched.type_id && Boolean(formik.errors.type_id)}
+                        >
+                            <InputLabel>{t("UpdateDialog.type_id")}</InputLabel>
+                            <Select
+                                name="type_id"
+                                label={t("UpdateDialog.type_id")}
+                                value={formik.values.type_id}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                            >
+                                <MenuItem value={1}>
+                                    {t("UpdateDialog.navgan")}
+                                </MenuItem>
+                                <MenuItem value={2}>
+                                    {t("UpdateDialog.refahi")}
+                                </MenuItem>
+                            </Select>
+                            <FormHelperText>
+                                {formik.touched.type_id && formik.errors.type_id}
+                            </FormHelperText>
+                        </FormControl>
+                    </Stack>
+                    <Stack>
+                        {formik.values.type_id === 1 ? (<TextField
+                            name="navgan_id"
+                            rows={8}
+                            label={t("UpdateDialog.navgan_id")}
+                            value={formik.values.navgan_id}
+                            onChange={formik.handleChange}
+                            fullWidth
+                            variant="outlined"
+                            onBlur={formik.handleBlur("navgan_id")}
+                            error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
+                            helperText={formik.touched.navgan_id && formik.errors.navgan_id}
+                            sx={{mt: 1}}
+                        />) : null}
+                    </Stack>
+                </Stack>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("UpdateDialog.button-cancel")}
+                </Button>
+                <Button onClick={formik.handleSubmit} variant="contained" color="primary"
+                        disabled={formik.isSubmitting}>
+                    {t("UpdateDialog.button-update")}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    </>);
+};
+export default UpdateForm;

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

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

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

@@ -0,0 +1,11 @@
+import {useTranslations} from "next-intl";
+import CreateForm from "@/components/dashboard/user-management/Form/CreateForm";
+
+function TableToolbar({mutate, fetchUrl}) {
+    const t = useTranslations();
+
+    return <CreateForm mutate={mutate} fetchUrl={fetchUrl}/>
+
+}
+
+export default TableToolbar;

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

@@ -0,0 +1,143 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, FormControl, FormHelperText, IconButton, MenuItem, Select, Stack, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_USER_MANAGEMENT} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import DataTable from "@/core/components/DataTable";
+import moment from "jalali-moment";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+import TableToolbar from "@/components/dashboard/user-management/TableToolbar";
+import TableRowActions from "./TableRowActions"
+import ClearIcon from "@mui/icons-material/Clear";
+
+function DashboardUserManagementComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(() => [{
+        accessorFn: (row) => row.id,
+        id: "id",
+        sortDescFirst: true,
+        header: t("UserManagement.id"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.navgan_id,
+        id: "navgan_id",
+        header: t("UserManagement.navgan_id"),
+        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("UserManagement.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("UserManagement.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("UserManagement.created_at"),
+        enableColumnFilter: true,
+        datatype: "date",
+        filterFn: "lessThan",
+        columnFilterModeOptions: ["lessThan", "greaterThan"],
+        Cell: ({renderedCellValue}) => {
+            return <Typography variant="body2">{renderedCellValue}</Typography>;
+        },
+        Header: ({column}) => <>{column.columnDef.header}</>,
+        Filter: ({column}) => {
+            return (<MuiDatePicker column={column}/>);
+        },
+    }, {
+        accessorFn: (row) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+        id: "updated_at",
+        header: t("UserManagement.updated_at"),
+        enableColumnFilter: false,
+        datatype: "numeric",
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+    }, {
+        accessorFn: (row) => row.type_name,
+        id: "type_id",
+        header: t("UserManagement.type_name"),
+        enableColumnFilter: true,
+        datatype: "numeric",
+        filterFn: "equals",
+        columnFilterModeOptions: ["equals"],
+        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
+        Header: ({column}) => <>{column.columnDef.header}</>,
+        Filter: ({column}) => {
+            return (<Stack direction="row" alignItems={'start'}>
+                <FormControl fullWidth>
+                    <Select
+                        variant={'standard'}
+                        value={column.getFilterValue() ? column.getFilterValue() : 0}
+                        onChange={(e) => column.setFilterValue(e.target.value)}
+                        sx={{color: column.getFilterValue() ? 'black' : "rgba(0, 0, 0, 0.4)"}}
+                    >
+                        <MenuItem disabled value={0}>
+                            {t("Select.menu_item")}
+                        </MenuItem>
+                        <MenuItem value={1}>{t("UpdateDialog.navgan")}</MenuItem>
+                        <MenuItem value={2}>{t("UpdateDialog.refahi")}</MenuItem>
+                    </Select>
+                    <FormHelperText sx={{mx: 0}}>{t("filter_mode")}: {t(column.columnDef._filterFn)}</FormHelperText>
+                </FormControl>
+                <IconButton
+                    size="small"
+                    onClick={() => {
+                        column.setFilterValue(null);
+                    }}
+                    sx={{
+                        color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf"
+                    }}
+                >
+                    <ClearIcon/>
+                </IconButton>
+            </Stack>)
+        }
+    },], []);
+    return (<DashboardLayouts>
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_USER_MANAGEMENT}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                enablePinning={true}
+                enableDensityToggle={false}
+                sorting={[{
+                    id: 'id', desc: true
+                }]}
+                initialState={{density: 'compact'}} //compact (small) //comfortable (medium) //spacious (large)
+                enableColumnFilters={true}
+                enableHiding={true}
+                enableFullScreenToggle={false}
+                enableGlobalFilter={false}
+                enableColumnResizing={false} // if you want true this you should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    </DashboardLayouts>);
+}
+
+export default DashboardUserManagementComponent;

src/components/login-expert/index.jsx

@@ -46,8 +46,8 @@ const LoginComponent = () => {
         password: "",
     };
     const validationSchema = Yup.object().shape({
-        username: Yup.string().required(t("LoginPage.error_message_required")),
-        password: Yup.string().required(t("LoginPage.error_message_required")),
+        username: Yup.string().required(t("LoginPage.error_message_username")),
+        password: Yup.string().required(t("LoginPage.error_message_password")),
     });
 
     return (