LFFE-29 first demo of loan history

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,8 @@
     "excel_export": "خروجی به اکسل",
     "export": "دریافت",
     "update_again": "بروزرسانی مجدد"
+  },
+  "LoanHistory": {
+    "history": "تاریخچه"
   }
 }

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

@@ -0,0 +1,190 @@
+import {
+    Button,
+    CircularProgress,
+    DialogActions,
+    DialogContent,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow
+} from "@mui/material"
+import {useTranslations} from "next-intl";
+import {useFormik} from "formik";
+import {EXPORT_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
+import moment from "jalali-moment";
+import DescriptionIcon from "@mui/icons-material/Description";
+import {useState} from "react";
+
+const fakeData = [
+    {
+        date: "1401/08/28",
+        name: "امین قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "امیر قاسم پور",
+        place: "اداره راه و شهرسازی مشهد",
+        toDo: "ارجاع به معاونت حمل و نقل"
+    },
+    {
+        date: "1401/08/28",
+        name: "محمد جلالی",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "احمد قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "اکبر قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "اصغر قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "نیما قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+    {
+        date: "1401/08/28",
+        name: "مهدی قاسم پور",
+        place: "اداره راه و شهرسازی تهران",
+        toDo: "ارجاع به کارشناس"
+    },
+]
+const HistoryContent = ({mutate, setOpenConfirmDialog, rowId}) => {
+    const t = useTranslations();
+    const [loading, setLoading] = useState(false)
+    const clickHandler = () => {
+        setLoading(true)
+        requestServer(`${EXPORT_MACHINARY_OFFICE}?${filterParams}`, 'get', {
+            auth: true,
+            notification: false,
+            requestOptions: {responseType: 'blob'}
+        }).then((response) => {
+            const filename = `گزارش ماشین آلات تاریخ_${moment().format('jYYYY_jMM_jDD')}.xlsx`;
+            FileSaver.saveAs(response.data, filename);
+        }).catch(() => {
+        }).finally(() => {
+            setLoading(false)
+        })
+    }
+    const formik = useFormik({});
+
+    return (
+        <>
+            <DialogContent>
+                <TableContainer component={Paper}>
+                    <Table sx={{minWidth: 650}}>
+                        <TableHead>
+                            <TableRow>
+                                <TableCell align={'center'}>نام</TableCell>
+                                <TableCell align={'center'}>تاریخ</TableCell>
+                                <TableCell align={'center'}>سازمان</TableCell>
+                                <TableCell align={'center'}>وضعیت</TableCell>
+                                <TableCell align={'center'}>فایل ضمیمه</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {fakeData.map((singleData) => (
+                                <TableRow
+                                    key={singleData.name}
+                                    sx={{
+                                        '&:last-child td, &:last-child th': {border: 0}
+                                    }}
+                                >
+                                    <TableCell align={'center'} component="th" scope="row">
+                                        {singleData.name}
+                                    </TableCell>
+                                    <TableCell align={'center'}>{singleData.date}</TableCell>
+                                    <TableCell align={'center'}>{singleData.place}</TableCell>
+                                    <TableCell align={'center'}>{singleData.toDo}</TableCell>
+                                    <TableCell align={'center'}>
+                                        <Button
+                                            color="primary"
+                                            variant="contained"
+                                            size="small"
+                                            disabled={loading}
+                                            sx={{textTransform: "unset", alignSelf: "center"}}
+                                            startIcon={loading ? <CircularProgress size={18} color="inherit"/> :
+                                                <DescriptionIcon/>}
+                                            onClick={clickHandler}
+                                        >
+                                            {t("MachinaryOffice.excel_report")}
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            </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/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,187 @@
+import {Box, Typography} from "@mui/material";
+import {useMemo} from "react";
+import {GET_MACHINARY_OFFICE} 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>
+                ),
+            },
+        ],
+        []
+    );
+    const data = [{
+        id: 1
+    }]
+    return (
+        <Box sx={{px: 3}}>
+            <DataTable
+                data={data}
+                tableUrl={GET_MACHINARY_OFFICE}
+                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/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 AccessTimeIcon from '@mui/icons-material/AccessTime';
 
 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: <AccessTimeIcon 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"]}}
+        },
+    };
+}