commercial chief init

public/locales/fa/app.json

@@ -31,6 +31,7 @@
     "machinery-expert": "ماشین آلات",
     "passenger-boss": "رئیس مسافر ",
     "transportation-assistant": "معاونت حمل و نقل",
+    "commercial-chief": "رئیس اداره بازرگانی",
     "province-manager": "مدیر کل استانی",
     "change-password": "تغییر رمز عبور",
     "edit-profile": "ویرایش پروفایل"
@@ -77,6 +78,7 @@
     "province_manager_page": "مدیر کل استانی",
     "passenger_office_page": "اداره مسافر",
     "machinary_office_page": "ماشین آلات",
+    "commercial_chief_page": "رئیس اداره بازرگانی",
     "edit_profile": "ویرایش پروفایل"
   },
   "MuiDatePicker": {
@@ -129,6 +131,17 @@
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست"
   },
+  "CommercialChief": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
   "ProvinceManager": {
     "name": "نام",
     "id": "کد یکتا",

src/components/dashboard/commercial-chief/Form/ConfirmForm.jsx

@@ -0,0 +1,138 @@
+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_COMMERCIAL_CHIEF} 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_COMMERCIAL_CHIEF}/${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/commercial-chief/Form/RejectForm.jsx

@@ -0,0 +1,144 @@
+import {REJECT_COMMERCIAL_CHIEF} 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_COMMERCIAL_CHIEF}/${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/commercial-chief/TableRowActions.jsx

@@ -0,0 +1,23 @@
+import {Box} from "@mui/material";
+import ConfirmForm from "./Form/ConfirmForm"
+import RejectForm from "./Form/RejectForm"
+
+const TableRow = ({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}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;

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

@@ -0,0 +1,236 @@
+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_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+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";
+
+function DashboardCommercialChiefComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("CommercialChief.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("CommercialChief.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("CommercialChief.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("CommercialChief.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("CommercialChief.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("CommercialChief.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            // {
+            //     accessorFn: (row) => row.navgan_id,
+            //     id: "navgan_id",
+            //     header: t("CommercialChief.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("CommercialChief.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("CommercialChief.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_COMMERCIAL_CHIEF}
+                    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 DashboardCommercialChiefComponent;

src/core/data/apiRoutes.js

@@ -56,6 +56,17 @@ export const REJECT_MACHINARY_OFFICE =
     BASE_URL + "/dashboard/machinery_expert/reject";
 //passenger office
 
+//commercial chief
+export const GET_COMMERCIAL_CHIEF =
+    BASE_URL + "/dashboard/commercial_chief/show";
+
+export const CONFIRM_COMMERCIAL_CHIEF =
+    BASE_URL + "/dashboard/commercial_chief/confirm";
+
+export const REJECT_COMMERCIAL_CHIEF =
+    BASE_URL + "/dashboard/commercial_chief/reject";
+//commercial chief
+
 //province manager
 export const GET_PROVINCE_MANAGER =
     BASE_URL + "/dashboard/province_manager/show";
@@ -66,3 +77,4 @@ export const CONFIRM_PROVINCE_MANAGER =
 export const REJECT_PROVINCE_MANAGER =
     BASE_URL + "/dashboard/province_manager/reject";
 //province manager
+

src/core/data/sidebarMenu.jsx

@@ -41,6 +41,14 @@ const sidebarMenu = [
             selected: false,
             role: "passenger_office_chief",
         },
+        {
+            key: "sidebar.commercial-chief",
+            type: "page",
+            route: "/dashboard/commercial-chief",
+            icon: <AssignmentIndIcon/>,
+            selected: false,
+            role: "commercial_chief",
+        },
         {
             key: "sidebar.transportation-assistant",
             type: "page",

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

@@ -0,0 +1,26 @@
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardCommercialChiefComponent from "@/components/dashboard/commercial-chief";
+
+const requiredPermissions = ["commercial_chief"];
+export default function PassengerBoss() {
+    return (
+        <WithAuthMiddleware>
+            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
+                <DashboardCommercialChiefComponent/>
+            </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.commercial_chief_page",
+            isBot,
+        },
+    };
+}