Files
expert-front/src/components/dashboard/transportation-assistance/index.jsx

470 lines
18 KiB
JavaScript

import {Box, Stack, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_TRANSPORTATION_ASSISTANCE} 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 "@/components/dashboard/transportation-assistance/TableToolbar";
function DashboardTransportationAssistanceComponent() {
const t = useTranslations();
const columns = useMemo(
() => [
{
accessorFn: (row) => row.id,
id: "id",
header: t("TransportationAssistance.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("TransportationAssistance.is_legal_person"),
enableColumnFilter: false,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: ["equals"],
Cell: ({renderedCellValue}) => (
<Typography
variant="body2">{renderedCellValue === 1 ? `${t("TransportationAssistance.hoghoghi")}` : `${t("TransportationAssistance.haghighi")}`}</Typography>
),
},
{
accessorFn: (row) => row.navgan_id,
id: "navgan_id",
header: t("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.city_name"),
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
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("TransportationAssistance.created_at"),
enableColumnFilter: true,
datatype: "date",
filterFn: "lessThan",
columnFilterModeOptions: ["lessThan", "greaterThan"],
Cell: ({renderedCellValue}) => (
<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("TransportationAssistance.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("TransportationAssistance.statement_count"),
enableColumnFilter: true,
datatype: "numeric",
filterFn: "equals",
columnFilterModeOptions: [
"equals",
],
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
{
accessorFn: (row) => row.vehicle_type,
id: "vehicle_type",
header: t("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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("TransportationAssistance.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.refer_reason,
id: "refer_reason",
header: t("TransportationAssistance.refer_reason"),
enableColumnFilter: false,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],
Cell: ({renderedCellValue, row}) => {
return (
<Typography variant="body2">{renderedCellValue}</Typography>
)
},
},
{
accessorFn: (row) => row.state_name,
id: "state_id",
header: t("TransportationAssistance.state_name"),
enableColumnFilter: false,
datatype: "numeric",
Cell: ({renderedCellValue}) => (
<Typography variant="body2">{renderedCellValue}</Typography>
),
},
],
[]
);
return (
<Box sx={{px: 3}}>
<DataTable
tableUrl={GET_TRANSPORTATION_ASSISTANCE}
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 should change renderRowActions props ** see https://www.material-react-table.com/docs/guides/row-actions
enableRowActions={true}
TableRowAction={TableRowActions}
/>
</Box>
);
}
export default DashboardTransportationAssistanceComponent;