Feature/kargrouh refahi cartable
This commit is contained in:
AmirHossein Mahmoodi
249
src/components/dashboard/navgan/passenger-boss/index.jsx
Normal file
249
src/components/dashboard/navgan/passenger-boss/index.jsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { Box, Stack, Typography } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
import { GET_PASSENGER_BOSS } 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 DashboardPassengerOfficeComponent() {
|
||||
const t = useTranslations();
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorFn: (row) => row.id,
|
||||
id: "id",
|
||||
header: t("PassengerBoss.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("PassengerBoss.is_legal_person"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
filterFn: "equals",
|
||||
columnFilterModeOptions: ["equals"],
|
||||
Cell: ({ renderedCellValue }) => (
|
||||
<Typography variant="body2">
|
||||
{renderedCellValue === 1 ? `${t("PassengerBoss.hoghoghi")}` : `${t("PassengerBoss.haghighi")}`}
|
||||
</Typography>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.navgan_id,
|
||||
id: "navgan_id",
|
||||
header: t("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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("PassengerBoss.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.state_name,
|
||||
id: "state_id",
|
||||
header: t("PassengerBoss.state_name"),
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
Cell: ({ renderedCellValue }) => <Typography variant="body2">{renderedCellValue}</Typography>,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
return (
|
||||
<Box sx={{ px: 3 }}>
|
||||
<DataTable
|
||||
tableUrl={GET_PASSENGER_BOSS}
|
||||
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 DashboardPassengerOfficeComponent;
|
||||
Reference in New Issue
Block a user