TF-88 navgan loan management

public/locales/fa/app.json

@@ -36,6 +36,7 @@
     "navgan-province-manager": "مدیر کل استانی",
     "refahi-province-manager": "مدیر کل استانی",
     "refahi-loan-management": "مدیریت وام",
+    "navgan-loan-management": "مدیریت وام",
     "commercial-chief": "رئیس اداره بازرگانی",
     "inspector-expert": "بازدید کارشناس",
     "province-head-expert": "کارشناس ستادی",
@@ -48,6 +49,7 @@
     "passenger-boss": "کارگروه استانی",
     "refahi-province-manager": "رفاهی",
     "refahi-loan-management": "رفاهی",
+    "navgan-loan-management": "ناوگان",
     "navgan-province-manager": "ناوگان"
   },
   "Authorization": {
@@ -200,6 +202,17 @@
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست"
   },
+  "NavganLoanManagement": {
+    "name": "نام",
+    "id": "کد یکتا",
+    "national_id": "کد ملی",
+    "phone_number": "موبایل",
+    "created_at": "تاریخ درخواست",
+    "updated_at": "تاریخ بروزرسانی",
+    "navgan_id": "کد ناوگان",
+    "vehicle_type": "نوع ماشین",
+    "state_name": "وضعیت درخواست"
+  },
   "DevelopmentAssistant": {
     "name": "نام",
     "id": "کد یکتا",

src/components/dashboard/navgan-loan-management/Form/UpdateForm.jsx

@@ -0,0 +1,150 @@
+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_NAVGAN} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useNotification from "@/lib/app/hooks/useNotification";
+import * as Yup from "yup";
+import useLoanStateNavgan from "@/lib/prefetchDataTable/hooks/useLoanStateNavgan";
+
+
+const Update = ({rowId, fetchUrl, mutate}) => {
+    const t = useTranslations();
+    const {loan_state_navgan} = useLoanStateNavgan()
+    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("expert_description", values.description);
+            formData.append("next_state_id", values.next_state_id);
+
+            requestServer(`${UPDATE_LOAN_MANAGEMENT_NAVGAN}/${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>
+            <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="description"
+                                multiline
+                                rows={8}
+                                label={t("UpdateDialog.description")}
+                                value={formik.values.description}
+                                onChange={handleDescriptionChange}
+                                fullWidth
+                                variant="outlined"
+                                sx={{mt: 1}}
+                                onBlur={formik.handleBlur("description")}
+                                error={
+                                    formik.touched.description && Boolean(formik.errors.description)
+                                }
+                                helperText={formik.touched.description && formik.errors.description}
+                            />
+                        </Stack>
+                        <Stack>
+                            <FormControl
+                                error={
+                                    formik.touched.next_state_id &&
+                                    Boolean(formik.errors.next_state_id)
+                                } fullWidth>
+                                <InputLabel>{t("UpdateDialog.next-state-id")}</InputLabel>
+                                <Select
+                                    labelId="next_state_id"
+                                    id="next_state_id"
+                                    value={formik.values.next_state_id}
+                                    label={t("UpdateDialog.next-state-id")}
+                                    onChange={handleNextStateIDChange}
+                                    onBlur={formik.handleBlur("next_state_id")}
+                                    helperText={
+                                        formik.touched.next_state_id && formik.errors.next_state_id
+                                    }
+                                >
+                                    {loan_state_navgan ? (loan_state_navgan.map((item) => {
+                                        return (
+                                            <MenuItem key={item.id} value={item.id}>{item.name}</MenuItem>
+                                        )
+                                    })) : null}
+                                </Select>
+                                <FormHelperText>
+                                    {formik.touched.next_state_id && formik.errors.next_state_id}
+                                </FormHelperText>
+                            </FormControl>
+                        </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 Update;

src/components/dashboard/navgan-loan-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/navgan-loan-management/index.jsx

@@ -0,0 +1,154 @@
+import DashboardLayouts from "@/layouts/dashboardLayouts";
+import {Box, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import DataTable from "@/core/components/DataTable";
+import moment from "jalali-moment";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+
+function DashboardNavganLoanManagementComponent() {
+    const t = useTranslations();
+
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("NavganLoanManagement.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("NavganLoanManagement.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("NavganLoanManagement.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("NavganLoanManagement.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("NavganLoanManagement.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("NavganLoanManagement.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_id",
+                header: t("NavganLoanManagement.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <DashboardLayouts>
+            <Box sx={{px: 3}}>
+                <DataTable
+                    tableUrl={GET_LOAN_MANAGEMENT_NAVGAN}
+                    columns={columns}
+                    selectableRow={false}
+                    enableCustomToolbar={true}
+                    // CustomToolbar={<TableToolbar />}
+                    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 DashboardNavganLoanManagementComponent;

src/core/data/apiRoutes.js

@@ -141,3 +141,12 @@ export const UPDATE_LOAN_MANAGEMENT_REFAHI =
 export const GET_LOAN_STATE_REFAHI =
     BASE_URL + "/dashboard/loan_states/refahi"
 //loan management refahi
+
+// loan management navgan
+export const GET_LOAN_MANAGEMENT_NAVGAN =
+    BASE_URL + "/dashboard/navgan_loans"
+export const UPDATE_LOAN_MANAGEMENT_NAVGAN =
+    BASE_URL + "/dashboard/navgan_loans/update"
+export const GET_LOAN_STATE_NAVGAN =
+    BASE_URL + "/dashboard/loan_states/navgan"
+//loan management navgan

src/core/data/sidebarMenu.jsx

@@ -126,6 +126,16 @@ const sidebarMenu = [
             selected: false,
             permission: "manage_refahi_loan",
         },
+        {
+            key: "sidebar.navgan-loan-management",
+            secondary: "secondary.navgan-loan-management",
+            name: "navgan_loan_management",
+            type: "page",
+            route: "/dashboard/navgan-loan-management",
+            icon: <PaidIcon/>,
+            selected: false,
+            permission: "manage_navgan_loan",
+        },
     ],
 ];
 

src/lib/prefetchDataTable/hooks/useLoanStateNavgan.jsx

@@ -0,0 +1,27 @@
+import useSWR from 'swr'
+import {GET_LOAN_STATE_NAVGAN} from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+
+const useLoanStateNavgan = () => {
+    const requestServer = useRequest({auth: true, notification: false})
+
+    //swr config
+    const fetcher = (...args) => {
+        return requestServer(args, 'get').then((response) => {
+            return response.data.data;
+        }).catch(() => {
+        })
+    };
+
+    const {data} = useSWR(GET_LOAN_STATE_NAVGAN, fetcher, {
+        revalidateIfStale: false,
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false
+    })
+    const loan_state_navgan = data
+    //swr config
+
+    // render data
+    return {loan_state_navgan}
+}
+export default useLoanStateNavgan

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

@@ -0,0 +1,26 @@
+import RolePermissionMiddleware from "@/middlewares/RolePermission";
+import WithAuthMiddleware from "@/middlewares/WithAuth";
+import {parse} from "next-useragent";
+import DashboardNavganLoanManagementComponent from "@/components/dashboard/navgan-loan-management";
+
+const requiredPermissions = ["manage_navgan_loan"];
+export default function NavganLoanManagement() {
+    return (
+        <WithAuthMiddleware>
+            <RolePermissionMiddleware requiredPermissions={requiredPermissions}>
+                <DashboardNavganLoanManagementComponent/>
+            </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.loan_management_page",
+            isBot,
+        },
+    };
+}