expert-front/src/components/dashboard/bank-management/index.jsx

import {Box, Typography} from "@mui/material";
import {useMemo} from "react";
import {useTranslations} from "next-intl";
import moment from "jalali-moment";
import DataTable from "@/core/components/DataTable";
import TableRowActions from "@/components/dashboard/bank-management/TableRowActions";
import {GET_BANK_STATEMENT} from "@/core/data/apiRoutes";
import TableToolbar from "@/components/dashboard/bank-management/TableToobar";

function DashboardBankManagementComponent() {
    const t = useTranslations();
    const columns = useMemo(
        () => [
            {
                accessorFn: (row) => row.id,
                id: "id",
                header: t("BankManagement.id"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains",
                    "lessThan",
                    "greaterThan",
                    "between",
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.navgan_id,
                id: "navgan_id",
                header: t("BankManagement.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("BankManagement.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("BankManagement.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.national_serial_number,
                id: "national_serial_number",
                header: t("BankManagement.national_serial_number"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains",
                    "lessThan",
                    "greaterThan",
                    "between",
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.birthday,
                id: "birthday",
                header: t("BankManagement.birthday"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({renderedCellValue}) => (
                    <Typography
                        variant="body2">{moment(renderedCellValue).locale("fa").format("yyyy/MM/DD")}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.approved_amount,
                id: "approved_amount",
                header: t("BankManagement.approved_amount"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains",
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{Number(renderedCellValue).toLocaleString()}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.bank_loan_amount,
                id: "bank_loan_amount",
                header: t("BankManagement.bank_loan_amount"),
                enableColumnFilter: true,
                datatype: "numeric",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains",
                    "lessThan",
                    "greaterThan",
                    "between",
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{Number(renderedCellValue).toLocaleString()}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.branch_name,
                id: "branch_name",
                header: t("BankManagement.branch_name"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "contains",
                columnFilterModeOptions: ["contains", "equals", "notEquals"],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            },
            {
                accessorFn: (row) => row.bank_state_name,
                id: "bank_state_name",
                header: t("BankManagement.bank_state"),
                enableColumnFilter: true,
                datatype: "text",
                filterFn: "equals",
                columnFilterModeOptions: [
                    "equals",
                    "notEquals",
                    "contains"
                ],
                Cell: ({renderedCellValue}) => (
                    <Typography variant="body2">{renderedCellValue}</Typography>
                ),
            }
        ],
        []
    );
    return (
        <Box sx={{px: 3}}>
            <DataTable
                tableUrl={GET_BANK_STATEMENT}
                columns={columns}
                selectableRow={false}
                enableCustomToolbar={true}
                CustomToolbar={TableToolbar}
                enableLastUpdate={true}
                sorting={[{
                    id: 'score', 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 should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
                enableRowActions={true}
                TableRowAction={TableRowActions}
            />
        </Box>
    );
}

export default DashboardBankManagementComponent;