LFFE-29 Merge branch 'feature/LFFE-29_loan_history' into 'develop'

package.json

@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
+    "@mui/x-data-grid": "^6.18.1",
     "@mui/x-date-pickers": "^6.9.2",
     "apexcharts": "^3.44.0",
     "axios": "^1.4.0",

public/locales/fa/app.json

@@ -57,7 +57,8 @@
     "expert-management": "مدیریت کارشناسان",
     "user-management": "مدیریت کاربر",
     "role-management": "مدیریت نقش ها",
-    "edit-profile": "ویرایش پروفایل"
+    "edit-profile": "ویرایش پروفایل",
+    "loan-history": "کارتابل نظارت"
   },
   "secondary": {
     "passenger-office": "توزیع درخواست",
@@ -115,7 +116,8 @@
     "role_management_page": "مدیریت نقش ها",
     "edit_profile": "ویرایش پروفایل",
     "expert_management": "مدیریت کارشناسان",
-    "user_management_page": "مدیریت کاربر"
+    "user_management_page": "مدیریت کاربر",
+    "loan_history": "کارتابل نظارت"
   },
   "MuiDatePicker": {
     "date_picker_birthday": "تاریخ"
@@ -533,5 +535,16 @@
     "excel_export": "خروجی به اکسل",
     "export": "دریافت",
     "update_again": "بروزرسانی مجدد"
+  },
+  "LoanHistory": {
+    "history": "تاریخچه",
+    "Table_history_error": "خطا در دریافت اطلاعات",
+    "history_report": "فایل ضمیمه",
+    "Table_head_name": "نام",
+    "Table_head_date": "تاریخ",
+    "Table_head_position": "سمت",
+    "Table_head_action": "عملیات",
+    "Table_head_file": "فایل پیوست",
+    "empty_history_detail": "سابقه ای برای این وام وجود ندارد"
   }
 }

src/components/dashboard/loan-history/Form/HistoryForm/HistoryContent.jsx

@@ -0,0 +1,26 @@
+import {Button, DialogActions, DialogContent,} from "@mui/material"
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import TableContent from "@/components/dashboard/loan-history/Form/HistoryForm/TableContent";
+
+const HistoryContent = ({mutate, setOpenConfirmDialog, rowId}) => {
+    const t = useTranslations();
+
+    const formik = useFormik({});
+
+    return (
+        <>
+            <DialogContent>
+                <TableContent rowId={rowId}/>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => setOpenConfirmDialog(false)} variant="outlined" color="secondary"
+                        disabled={formik.isSubmitting} autoFocus>
+                    {t("ConfirmDialog.button-cancel")}
+                </Button>
+            </DialogActions>
+        </>
+    )
+
+}
+export default HistoryContent

src/components/dashboard/loan-history/Form/HistoryForm/PrintHistory.jsx

@@ -0,0 +1,39 @@
+import {Button, CircularProgress} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const PrintHistory = ({attachment}) => {
+    const t = useTranslations();
+    const [loading, setLoading] = useState(false)
+    const requestServer = useRequest({auth: true, pending: false, success: {notification: {show: false}}})
+
+    const clickHandler = (attachment) => {
+        const anchor = document.createElement('a');
+        anchor.href = attachment;
+        anchor.setAttribute('download', '');
+        document.body.appendChild(anchor);
+        anchor.click();
+        document.body.removeChild(anchor);
+    }
+
+
+    return (
+        <Button
+            color="primary"
+            variant="contained"
+            size="small"
+            disabled={loading}
+            sx={{textTransform: "unset", alignSelf: "center"}}
+            startIcon={loading ?
+                <CircularProgress size={18} color="inherit"/> :
+                <DescriptionIcon/>}
+            onClick={() => clickHandler(attachment)}
+        >
+            {t("LoanHistory.history_report")}
+        </Button>
+    )
+}
+
+export default PrintHistory

src/components/dashboard/loan-history/Form/HistoryForm/TableContent.jsx

@@ -0,0 +1,111 @@
+import {
+    Box,
+    LinearProgress,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Typography
+} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {GET_HISTORY_DETAIL} from "@/core/data/apiRoutes";
+import moment from "jalali-moment";
+import PrintHistory from "@/components/dashboard/loan-history/Form/HistoryForm/PrintHistory";
+import useRequest from "@/lib/app/hooks/useRequest";
+import {useEffect, useState} from "react";
+
+const TableContent = ({rowId}) => {
+    const t = useTranslations();
+    const requestServer = useRequest({auth: true, notification: false})
+    const [historyDetails, setHistoryDetails] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        requestServer(`${GET_HISTORY_DETAIL}/${rowId}`, 'get').then((response) => {
+            setIsLoading(false);
+            setHistoryDetails(response.data.data);
+        }).catch(() => {
+            setError(true);
+        })
+    }, []);
+
+    return (
+        <Box>
+            {error ? (<Typography sx={{
+                    padding: 2,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }}>{t("LoanHistory.Table_history_error")}</Typography>) :
+                (isLoading ? (<LinearProgress sx={{width: "100%"}}/>) : (
+                    historyDetails.latest_histories.length === 0 ? (
+                        <Typography
+                            sx={{
+                                padding: 2,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center"
+                            }}
+                            variant={'h6'}>{t("LoanHistory.empty_history_detail")}</Typography>
+                    ) : (
+                        <Paper elevation={0} sx={{
+                            width: '100%', overflow: 'hidden',
+                            '*::-webkit-scrollbar': {
+                                width: '0.5em'
+                            },
+                            '*::-webkit-scrollbar-thumb': {
+                                backgroundColor: 'primary.main',
+                            }
+                        }}>
+                            <TableContainer sx={{maxHeight: 600}}>
+                                <Table stickyHeader sx={{minWidth: 650}}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableCell>{t("LoanHistory.Table_head_name")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_date")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_position")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_action")}</TableCell>
+                                            <TableCell>{t("LoanHistory.Table_head_file")}</TableCell>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {
+                                            historyDetails.latest_histories.map((latest_history, index) => {
+                                                return (
+                                                    <TableRow
+                                                        key={index}
+                                                        sx={{
+                                                            '&:last-child td, &:last-child th': {border: 0}
+                                                        }}
+                                                    >
+                                                        <TableCell component="th" scope="row">
+                                                            {latest_history.expert.name}
+                                                        </TableCell>
+                                                        <TableCell>{moment(latest_history.created_at).locale("fa").format("HH:mm | yyyy/MM/DD")}</TableCell>
+                                                        <TableCell>{latest_history.expert.position}</TableCell>
+                                                        <TableCell>{latest_history.previous_state_name}</TableCell>
+                                                        <TableCell>
+                                                            {latest_history.attachment ? (
+                                                                <PrintHistory attachment={latest_history.attachment}/>
+                                                            ) : null}
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )
+                                            })
+                                        }
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Paper>
+                    )
+                ))
+            }
+        </Box>
+
+    )
+}
+export default TableContent

src/components/dashboard/loan-history/Form/HistoryForm/index.jsx

@@ -0,0 +1,31 @@
+import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {useState} from "react";
+import HistoryIcon from '@mui/icons-material/History';
+import HistoryContent from "@/components/dashboard/loan-history/Form/HistoryForm/HistoryContent";
+
+const History = ({rowId, mutate}) => {
+    const t = useTranslations();
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    return (
+        <>
+            <Tooltip title={t("LoanHistory.history")}>
+                <IconButton
+                    color="primary"
+                    onClick={() => {
+                        setOpenConfirmDialog(true)
+                    }}
+                >
+                    <HistoryIcon/>
+                </IconButton>
+            </Tooltip>
+            <Dialog scroll={'paper'} fullWidth maxWidth='lg' 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("LoanHistory.history")}</DialogTitle>
+                <HistoryContent mutate={mutate} rowId={rowId} setOpenConfirmDialog={setOpenConfirmDialog}/>
+            </Dialog>
+        </>
+    )
+
+}
+export default History;

src/components/dashboard/loan-history/TableRowActions.jsx

@@ -0,0 +1,16 @@
+import {Box} from "@mui/material";
+import History from "@/components/dashboard/loan-history/Form/HistoryForm";
+
+const TableRow = ({row, mutate}) => {
+    return (
+        <Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
+            <History
+                rowId={row.getValue("id")}
+                vehicle_type={row.original.vehicle_type}
+                mutate={mutate}
+            />
+        </Box>
+    );
+};
+
+export default TableRow;

src/components/dashboard/loan-history/index.jsx

@@ -0,0 +1,183 @@
+import {Box, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_LOAN_HISTORY} from "@/core/data/apiRoutes";
+import {useTranslations} from "next-intl";
+import TableRowActions from "./TableRowActions";
+import moment from "jalali-moment";
+import DataTable from "@/core/components/DataTable";
+import MuiDatePicker from "@/core/components/MuiDatePicker";
+
+function DashboardLoanHistoryComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("PassengerOffice.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("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.updated_at"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("MachinaryOffice.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("MachinaryOffice.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("MachinaryOffice.state_name"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                Cell: ({renderedCellValue}) => (
+                    <Typography variant="body2">{renderedCellValue}</Typography>
+                ),
+            },
+        ],
+        []
+    );
+    return (
+        <Box sx={{px: 3}}>
+            <DataTable
+                tableUrl={GET_LOAN_HISTORY}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={false}
+                enableLastUpdate={true}
+                sorting={[{
+                    id: 'id', desc: false
+                }]}
+                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 shold change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
+                enableRowActions={true}
+                TableRowAction={TableRowActions}
+            />
+        </Box>
+    );
+}
+
+export default DashboardLoanHistoryComponent;

src/core/data/apiRoutes.js

@@ -214,3 +214,7 @@ export const GET_EXPORT = BASE_URL + "/dashboard/exports/navgan"
 export const GET_PROVINCE_PROGRESS = BASE_URL + "/dashboard/reports/navgan/province_progress"
 export const GET_LOAN_DISTRIBUTION = BASE_URL + "/dashboard/reports/navgan/loan_distribution"
 // reports
+
+//loan history
+export const GET_LOAN_HISTORY = BASE_URL + "/dashboard/navgan_loans"
+export const GET_HISTORY_DETAIL = BASE_URL + "/dashboard/navgan_loans"

src/core/data/sidebarMenu.jsx

@@ -14,6 +14,7 @@ import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import PersonIcon from '@mui/icons-material/Person';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import AssessmentIcon from '@mui/icons-material/Assessment';
+import SecurityIcon from '@mui/icons-material/Security';
 
 const sidebarMenu = [
     [
@@ -176,6 +177,15 @@ const sidebarMenu = [
             selected: false,
             permission: "manage_roles",
         },
+        {
+            key: "sidebar.loan-history",
+            name: "loan-history",
+            type: "page",
+            route: "/dashboard/loan-history",
+            icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
+            selected: false,
+            permission: "manage_navgan_loan",
+        },
     ],
 ];
 

src/pages/dashboard/loan-history/index.jsx

@@ -0,0 +1,21 @@
+import {parse} from "next-useragent";
+import DashboardLoanHistoryComponent from "@/components/dashboard/loan-history";
+
+export default function LoanHistory() {
+    return (
+        <DashboardLoanHistoryComponent/>
+    );
+}
+
+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_history",
+            isBot,
+            locale,
+            layout: {name: 'DashboardLayout', props: {permissions: ["manage_navgan_loan"]}}
+        },
+    };
+}