expert-front/src/components/dashboard/machinary-office/index.jsx

import DataTableStructure from "@/core/components/DatatableStructure";
import DashboardLayouts from "@/layouts/dashboardLayouts";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
// import TableToolbar from "./TableTollbar";
import { GET_MACHINARY_OFFICE } from "@/core/data/apiRoutes";
import { useTranslations } from "next-intl";
import TableRowActions from "./TableRowActions";

function DashboardMachinaryOfficeComponent() {
  const t = useTranslations();
  const columns = useMemo(
    () => [
      {
        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) => row.created_at,
        id: "created_at",
        header: t("MachinaryOffice.created_at"),
        enableColumnFilter: true,
        datatype: "numeric",
        filterFn: "equals",
        columnFilterModeOptions: [
          "equals",
          "notEquals",
          "contains",
          "lessThan",
          "greaterThan",
          "between",
        ],
        Cell: ({ renderedCellValue }) => (
          <Typography variant="body2">{renderedCellValue}</Typography>
        ),
      },
      {
        accessorFn: (row) => row.updated_at,
        id: "updated_at",
        header: t("MachinaryOffice.updated_at"),
        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("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: true,
        datatype: "numeric",
        filterFn: "equals",
        filterSelectOptions: [
          { text: "Active", value: "0" },
          { text: "Deactive", value: "1" },
        ],
        filterVariant: "select",
        Cell: ({ renderedCellValue }) => (
          <Typography variant="body2">{renderedCellValue}</Typography>
        ),
      },
    ],
    []
  );
  return (
    <DashboardLayouts>
      <Box sx={{ px: 3 }}>
        <DataTableStructure
          tableUrl={GET_MACHINARY_OFFICE}
          columns={columns}
          selectableRow={false}
          enableCustomToolbar={true}
          // CustomToolbar={<TableToolbar />}
          enableLastUpdate={true}
          enablePinning={true}
          enableDensityToggle={true}
          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}
          renderRowActions={({ row }) => <TableRowActions row={row} />}
        />
      </Box>
    </DashboardLayouts>
  );
}

export default DashboardMachinaryOfficeComponent;