loan history refahi

public/locales/fa/app.json

@@ -72,6 +72,7 @@
     "role-management": "مدیریت نقش ها",
     "edit-profile": "ویرایش پروفایل",
     "loan-history": "کارتابل نظارت",
+    "loan-history-refahi": "کارتابل نظارت",
     "loan-followup": "پیگیری وام",
     "refahi-loan-followup": "پیگیری وام",
     "loan-history-province": "کارتابل نظارت استانی",
@@ -80,7 +81,9 @@
   "secondary": {
     "passenger-boss": "کارگروه",
     "loan-followup": "ناوگان",
+    "loan-history": "ناوگان",
     "refahi-loan-management": "رفاهی",
+    "loan-history-refahi": "رفاهی",
     "refahi-province-manager": "رفاهی",
     "refahi-transportation": "رفاهی",
     "refahi-province-working-group": "رفاهی",

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

@@ -1,7 +1,7 @@
 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";
+import TableContent from "./TableContent";
 
 const HistoryContent = ({ mutate, setOpenConfirmDialog, rowId }) => {
     const t = useTranslations();

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

@@ -13,7 +13,7 @@ import {
 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 PrintHistory from "./PrintHistory";
 import useRequest from "@/lib/app/hooks/useRequest";
 import { useEffect, useState } from "react";
 

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

@@ -2,7 +2,7 @@ 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";
+import HistoryContent from "./HistoryContent";
 
 const History = ({ rowId, mutate }) => {
     const t = useTranslations();

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

@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import History from "@/components/dashboard/loan-history/Form/HistoryForm";
+import History from "./Form/HistoryForm";
 
 const TableRow = ({ row, mutate }) => {
     return (

src/components/dashboard/loan-history/navgan/TableToolbar.jsx

@@ -1,5 +1,5 @@
 import { Stack } from "@mui/material";
-import PrintExcel from "@/components/dashboard/loan-history/Buttons/printExcel";
+import PrintExcel from "./Buttons/printExcel";
 
 const TableToolbar = ({ table }) => {
     return (

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

@@ -6,7 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
-import TableToolbar from "@/components/dashboard/loan-history/TableToolbar";
+import TableToolbar from "./TableToolbar";
 
 function DashboardLoanHistoryComponent() {
     const t = useTranslations();
@@ -106,22 +106,22 @@ function DashboardLoanHistoryComponent() {
                 columnFilterModeOptions: ["equals", "notEquals", "contains"],
                 Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
             },
-            {
+            // {
-                accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
+            //     accessorFn: (row) => moment(row.created_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
-                id: "created_at",
+            //     id: "created_at",
-                header: t("LoanHistory.created_at"),
+            //     header: t("LoanHistory.created_at"),
-                enableColumnFilter: true,
+            //     enableColumnFilter: true,
-                datatype: "date",
+            //     datatype: "date",
-                filterFn: "lessThan",
+            //     filterFn: "lessThan",
-                columnFilterModeOptions: ["lessThan", "greaterThan"],
+            //     columnFilterModeOptions: ["lessThan", "greaterThan"],
-                Cell: ({ renderedCellValue }) => {
+            //     Cell: ({ renderedCellValue }) => {
-                    return <Typography variant="body2">{renderedCellValue}</Typography>;
+            //         return <Typography variant="body2">{renderedCellValue}</Typography>;
-                },
+            //     },
-                Header: ({ column }) => <>{column.columnDef.header}</>,
+            //     Header: ({ column }) => <>{column.columnDef.header}</>,
-                Filter: ({ column }) => {
+            //     Filter: ({ column }) => {
-                    return <MuiDatePicker column={column} />;
+            //         return <MuiDatePicker column={column} />;
-                },
+            //     },
-            },
+            // },
             {
                 accessorFn: (row) => row.phone_number,
                 id: "phone_number",

src/components/dashboard/loan-history/refahi/Buttons/printExcel.jsx

@@ -0,0 +1,69 @@
+import { Button, CircularProgress } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import useRequest from "@/lib/app/hooks/useRequest";
+import { EXPORT_LOAN_HISTORY } from "@/core/data/apiRoutes";
+import moment from "jalali-moment";
+import FileSaver from "file-saver";
+import DescriptionIcon from "@mui/icons-material/Description";
+
+const PrintExcel = ({ table }) => {
+    const t = useTranslations();
+    const [loading, setLoading] = useState(false);
+    const requestServer = useRequest({ auth: true, pending: false, success: { notification: { show: false } } });
+    const { columnFilters, columnFilterFns, sorting } = table.getState();
+    const columns = table.getAllColumns();
+
+    const filterParams = useMemo(() => {
+        const params = new URLSearchParams();
+        const filters = columnFilters.map((filter) => {
+            let datatype;
+            for (const i in columns) {
+                if (columns[i].id == filter.id) {
+                    datatype = columns[i].columnDef.datatype;
+                }
+            }
+            return {
+                ...filter,
+                fn: columnFilterFns[filter.id],
+                datatype: datatype,
+            };
+        });
+        params.set("start", "0");
+        params.set("filters", JSON.stringify(filters ?? []));
+        params.set("sorting", JSON.stringify(sorting ?? []));
+        return params;
+    }, [columnFilters, columnFilterFns, sorting, columns]);
+
+    const clickHandler = () => {
+        setLoading(true);
+        requestServer(`${EXPORT_LOAN_HISTORY}?${filterParams}`, "get", {
+            auth: true,
+            requestOptions: { responseType: "blob" },
+        })
+            .then((response) => {
+                const filename = `خروجی کارتابل نظارت تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
+                FileSaver.saveAs(response.data, filename);
+            })
+            .catch(() => {})
+            .finally(() => {
+                setLoading(false);
+            });
+    };
+
+    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}
+        >
+            {t("LoanHistory.excel_report")}
+        </Button>
+    );
+};
+
+export default PrintExcel;

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

@@ -0,0 +1,30 @@
+import { Button, DialogActions, DialogContent } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useFormik } from "formik";
+import TableContent from "./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/refahi/Form/HistoryForm/PrintHistory.jsx

@@ -0,0 +1,25 @@
+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";
+import Link from "next/link";
+
+const PrintHistory = ({ attachment }) => {
+    const t = useTranslations();
+    return (
+        <Button
+            color="primary"
+            variant="contained"
+            size="small"
+            component={Link}
+            href={attachment.file || ""}
+            target="_blank"
+            sx={{ textTransform: "unset", alignSelf: "center", mx: 0.25 }}
+        >
+            {attachment.title}
+        </Button>
+    );
+};
+
+export default PrintHistory;

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

@@ -0,0 +1,145 @@
+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 "./PrintHistory";
+import useRequest from "@/lib/app/hooks/useRequest";
+import { useEffect, useState } from "react";
+
+const action_name = {
+    confirm: "تایید",
+    reject: "عدم تایید",
+    refer: "ارجاع",
+    reserve: "رزرو",
+};
+
+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: 800 }}>
+                            <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_state")}</TableCell>
+                                    <TableCell>{t("LoanHistory.Table_head_action")}</TableCell>
+                                    <TableCell>{t("LoanHistory.Table_head_expert_description")}</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>
+                                                {" "}
+                                                {latest_history?.expert?.name ? latest_history.expert.name : null}
+                                            </TableCell>
+                                            <TableCell>
+                                                {moment(latest_history.created_at)
+                                                    .locale("fa")
+                                                    .format("HH:mm | yyyy/MM/DD")}
+                                            </TableCell>
+                                            <TableCell>
+                                                {latest_history?.expert?.position
+                                                    ? latest_history.expert.position
+                                                    : null}
+                                            </TableCell>
+                                            <TableCell>
+                                                {latest_history?.previous_state_name
+                                                    ? latest_history.previous_state_name
+                                                    : null}
+                                            </TableCell>
+                                            <TableCell>{action_name[latest_history?.action]}</TableCell>
+                                            <TableCell>{latest_history?.expert_description}</TableCell>
+                                            <TableCell>
+                                                {latest_history.attachments.map((attachment, index) => (
+                                                    <PrintHistory key={index} attachment={attachment} />
+                                                ))}
+                                            </TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Paper>
+            )}
+        </Box>
+    );
+};
+export default TableContent;

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

@@ -0,0 +1,39 @@
+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 "./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="xl"
+                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/refahi/TableRowActions.jsx

@@ -0,0 +1,12 @@
+import { Box } from "@mui/material";
+import History from "./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/refahi/TableToolbar.jsx

@@ -0,0 +1,12 @@
+import { Stack } from "@mui/material";
+import PrintExcel from "./Buttons/printExcel";
+
+const TableToolbar = ({ table }) => {
+    return (
+        <Stack direction={"row"} spacing={2}>
+            <PrintExcel table={table} />
+        </Stack>
+    );
+};
+
+export default TableToolbar;

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

@@ -0,0 +1,360 @@
+import { Box, Stack, 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";
+import TableToolbar from "./TableToolbar";
+
+function DashboardLoanHistoryComponent() {
+    const t = useTranslations();
+    const columns = useMemo(
+        () => [
+            {
+                accessorFn: (row) => row.id,
+                id: "id",
+                header: t("LoanHistory.id"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.is_legal_person,
+                id: "is_legal_person",
+                header: t("LoanHistory.is_legal_person"),
+                enableColumnFilter: false,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals"],
+                Cell: ({ renderedCellValue }) => (
+                    <Typography variant="body2">
+                        {renderedCellValue === 1 ? `${t("LoanHistory.hoghoghi")}` : `${t("LoanHistory.haghighi")}`}
+                    </Typography>
+                ),
+            },
+            {
+                accessorFn: (row) => row.navgan_id,
+                id: "navgan_id",
+                header: t("LoanHistory.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.name,
+                id: "name",
+                header: t("LoanHistory.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("LoanHistory.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.shenase_meli,
+                id: "shenase_meli",
+                header: t("LoanHistory.shenase_meli"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.province_name,
+                id: "province_name",
+                header: t("LoanHistory.province_name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.city_name,
+                id: "city_name",
+                header: t("LoanHistory.city_name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.postal_code,
+                id: "postal_code",
+                header: t("LoanHistory.postal_code"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["equals", "notEquals", "contains"],
+                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("LoanHistory.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) => row.phone_number,
+                id: "phone_number",
+                header: t("LoanHistory.phone_number"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.statement_count,
+                id: "statement_count",
+                header: t("LoanHistory.statement_count"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.navgan_capacity,
+                id: "navgan_capacity",
+                header: t("LoanHistory.navgan_capacity"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.manufacture_date,
+                id: "manufacture_date",
+                header: t("LoanHistory.manufacture_date"),
+                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("LoanHistory.vehicle_type"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.plate_number,
+                id: "plate_number",
+                header: t("LoanHistory.plate_number"),
+                enableColumnFilter: false,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({ renderedCellValue }) => (
+                    <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1 }} direction={"row"}>
+                        <Stack sx={{ borderRight: 1, borderColor: "divider", textAlign: "center", width: "40%" }}>
+                            {renderedCellValue.split("-")[3]}
+                        </Stack>
+                        <Stack direction={"row"} sx={{ width: "100%", px: 0.5 }}>
+                            <Stack
+                                sx={{
+                                    textAlign: "center",
+                                    width: "100%",
+                                }}
+                            >
+                                {renderedCellValue.split("-")[2]}
+                            </Stack>
+                            <Stack
+                                sx={{
+                                    textAlign: "center",
+                                    width: "100%",
+                                }}
+                            >
+                                {renderedCellValue.split("-")[1]}
+                            </Stack>
+                            <Stack
+                                sx={{
+                                    textAlign: "center",
+                                    width: "100%",
+                                }}
+                            >
+                                {renderedCellValue.split("-")[0]}
+                            </Stack>
+                        </Stack>
+                    </Stack>
+                ),
+            },
+            {
+                accessorFn: (row) => row.approved_amount,
+                id: "approved_amount",
+                header: t("LoanHistory.approved_amount"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue / 1000000}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.facility_bank,
+                id: "facility_bank",
+                header: t("LoanHistory.facility_bank"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue / 1000000}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.facility_gov,
+                id: "facility_gov",
+                header: t("LoanHistory.facility_gov"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue / 1000000}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.facility_person,
+                id: "facility_person",
+                header: t("LoanHistory.facility_person"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue / 1000000}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.physical_progress,
+                id: "physical_progress",
+                header: t("LoanHistory.physical_progress"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.repayment_period,
+                id: "repayment_period",
+                header: t("LoanHistory.repayment_period"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.sakht_period,
+                id: "sakht_period",
+                header: t("LoanHistory.sakht_period"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.tanafos_period,
+                id: "tanafos_period",
+                header: t("LoanHistory.tanafos_period"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.committed_employment,
+                id: "committed_employment",
+                header: t("LoanHistory.committed_employment"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.existing_employment,
+                id: "existing_employment",
+                header: t("LoanHistory.existing_employment"),
+                enableColumnFilter: true,
+                datatype: "numeric",
+                filterFn: "equals",
+                columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+            {
+                accessorFn: (row) => row.state_name,
+                id: "state_name",
+                header: t("LoanHistory.state_name"),
+                enableColumnFilter: true,
+                datatype: "text",
+                filterFn: "contains",
+                columnFilterModeOptions: ["contains", "equals", "notEquals"],
+                Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
+            },
+        ],
+        []
+    );
+    return (
+        <Box sx={{ px: 3 }}>
+            <DataTable
+                tableUrl={GET_LOAN_HISTORY}
+                columns={columns}
+                selectableRow={false}
+                enableCustomToolbar={true}
+                CustomToolbar={TableToolbar}
+                enableLastUpdate={true}
+                sorting={[
+                    {
+                        id: "statement_count",
+                        desc: 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 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

@@ -4,9 +4,7 @@ import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
 import DesktopWindowsIcon from "@mui/icons-material/DesktopWindows";
 import GavelIcon from "@mui/icons-material/Gavel";
 import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
-import GradingIcon from "@mui/icons-material/Grading";
+import PollIcon from '@mui/icons-material/Poll';
-import SupervisedUserCircleIcon from "@mui/icons-material/SupervisedUserCircle";
-import Diversity3Icon from "@mui/icons-material/Diversity3";
 import PaidIcon from "@mui/icons-material/Paid";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import PersonIcon from "@mui/icons-material/Person";
@@ -17,6 +15,7 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import RepartitionIcon from "@mui/icons-material/Repartition";
 import AccountBalanceIcon from "@mui/icons-material/AccountBalance";
 import RepeatIcon from "@mui/icons-material/Repeat";
+import DisplaySettingsIcon from '@mui/icons-material/DisplaySettings';
 
 const sidebarMenu = [
     [
@@ -39,13 +38,24 @@ const sidebarMenu = [
         },
         {
             key: "sidebar.loan-history",
+            secondary: "secondary.loan-history",
             name: "loan-history",
             type: "page",
-            route: "/dashboard/loan-history",
+            route: "/dashboard/loan-history/navgan",
             icon: <SecurityIcon sx={{ width: "inherit", height: "inherit" }} />,
             selected: false,
             permissions: ["view_navgan_loans", "view_navgan_loans_province"],
         },
+        {
+            key: "sidebar.loan-history-refahi",
+            secondary: "secondary.loan-history-refahi",
+            name: "loan-history-refahi",
+            type: "page",
+            route: "/dashboard/loan-history/refahi",
+            icon: <PollIcon sx={{ width: "inherit", height: "inherit" }} />,
+            selected: false,
+            permissions: ["view_navgan_loans", "view_navgan_loans_province"],
+        },
     ],
     [
         {
@@ -166,7 +176,7 @@ const sidebarMenu = [
             name: "refahi_province_manager_navgan",
             type: "page",
             route: "/dashboard/refahi/refahi-province-manager",
-            icon: <DesktopWindowsIcon sx={{ width: "inherit", height: "inherit" }} />,
+            icon: <DisplaySettingsIcon sx={{ width: "inherit", height: "inherit" }} />,
             selected: false,
             permissions: ["manage_province_affairs_refahi"],
         },

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

@@ -1,5 +1,5 @@
 import { parse } from "next-useragent";
-import DashboardLoanHistoryComponent from "@/components/dashboard/loan-history";
+import DashboardLoanHistoryComponent from "@/components/dashboard/loan-history/navgan";
 
 export default function LoanHistory() {
     return <DashboardLoanHistoryComponent />;

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

@@ -0,0 +1,22 @@
+import { parse } from "next-useragent";
+import DashboardLoanHistoryComponent from "@/components/dashboard/loan-history/refahi";
+
+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: ["view_navgan_loans", "view_navgan_loans_province"] },
+            },
+        },
+    };
+}