Frontend/src/components/dashboard/Users/DataTable.jsx

"use client";
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
import { GET_USER_LIST } from "@/core/utils/routes";
import { Box, Stack } from "@mui/material";
import { useMemo } from "react";
import RowActions from "./RowActions";
import Toolbar from "./Toolbar";
import useProvinces from "@/lib/hooks/useProvince";
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
import { Power, PowerOff } from "@mui/icons-material";
import useRoles from "@/lib/hooks/useRoles";
import OnlineCell from "./RowActions/Online";
import TelephoneId from "./RowActions/TelephoneId";

const DataTable = () => {
  const columns = useMemo(
    () => [
      {
        accessorKey: "id",
        header: "کد یکتا",
        id: "id",
        enableColumnFilter: true,
        datatype: "text",
        filterMode: "equals",
        sortDescFirst: false,
        columnFilterModeOptions: ["equals", "contains"],
        grow: false,
        size: 100,
      },
      {
        header: "استان",
        id: "province_id",
        enableColumnFilter: true,
        datatype: "numeric",
        filterMode: "equals",
        grow: false,
        size: 130,
        ColumnSelectComponent: (props) => {
          const { provinces, errorProvinces, loadingProvinces } =
            useProvinces();
          const getColumnSelectOptions = useMemo(() => {
            if (loadingProvinces) {
              return [{ value: "loading", label: "در حال بارگذاری..." }];
            }
            if (errorProvinces) {
              return [{ value: "error", label: "خطا در بارگذاری" }];
            }
            return [
              { value: "", label: "کل کشور" },
              ...provinces.map((province) => ({
                value: province.id,
                label: province.name,
              })),
            ];
          }, [provinces, errorProvinces, loadingProvinces]);
          return (
            <CustomSelectByDependency
              {...props}
              value={
                loadingProvinces ? "loading" : props.filterParameters.value
              }
              columnSelectOption={getColumnSelectOptions}
            />
          );
        },
        Cell: ({ renderedCellValue, row }) => <>{row.original.province_fa}</>,
      },
      {
        header: "شماره تماس داخلی",
        id: "telephone_id",
        enableColumnFilter: true,
        datatype: "text",
        filterMode: "equals",
        sortDescFirst: false,
        columnFilterModeOptions: ["equals", "contains"],
        grow: false,
        size: 100,
        Cell: ({ row }) => <TelephoneId user_id={row.original.id} />,
      },
      {
        accessorKey: "username",
        header: "نام کاربری",
        id: "username",
        enableColumnFilter: true,
        datatype: "text",
        filterMode: "equals",
        sortDescFirst: false,
        columnFilterModeOptions: ["equals", "contains"],
        grow: false,
        size: 100,
      },
      {
        accessorKey: "position",
        header: "سمت",
        id: "position",
        enableColumnFilter: false,
        grow: false,
        size: 100,
      },
      {
        accessorKey: "phone_number",
        header: "شماره همراه",
        id: "phone_number",
        enableColumnFilter: false,
        grow: false,
        size: 100,
      },
      {
        header: "نقش",
        id: "role__id",
        enableColumnFilter: false,
        grow: false,
        size: 100,
        enableColumnFilter: true,
        datatype: "numeric",
        filterMode: "equals",
        grow: false,
        size: 130,
        ColumnSelectComponent: (props) => {
          const { roles, errorRoles, loadingRoles } = useRoles();
          const getColumnSelectOptions = useMemo(() => {
            if (loadingRoles) {
              return [{ value: "loading", label: "در حال بارگذاری..." }];
            }
            if (errorRoles) {
              return [{ value: "error", label: "خطا در بارگذاری" }];
            }
            return [
              { value: "", label: "همه نقش ها" },
              ...roles.map((role) => ({
                value: role.id,
                label: role.name_fa,
              })),
            ];
          }, [roles, errorRoles, loadingRoles]);
          return (
            <CustomSelectByDependency
              {...props}
              value={loadingRoles ? "loading" : props.filterParameters.value}
              columnSelectOption={getColumnSelectOptions}
            />
          );
        },
        Cell: ({ row }) => <>{row.original.roles[0].name_fa}</>,
      },
      {
        accessorKey: "national_id",
        header: "کد ملی",
        id: "national_id",
        enableColumnFilter: true,
        datatype: "text",
        filterMode: "equals",
        sortDescFirst: false,
        columnFilterModeOptions: ["equals", "contains"],
        grow: false,
        size: 100,
      },
      {
        accessorKey: "is_online",
        header: "وضعیت برخط",
        id: "is_online",
        enableColumnFilter: true,
        datatype: "text",
        filterMode: "equals",
        sortDescFirst: false,
        columnFilterModeOptions: ["equals", "contains"],
        grow: false,
        size: 100,
        Cell: ({ row }) => <OnlineCell user_id={row.original.id} />,
      },
      {
        accessorKey: "gender",
        header: "جنسیت",
        id: "gender",
        enableColumnFilter: false,
        grow: false,
        size: 100,
        Cell: ({ renderedCellValue }) => (
          <>{renderedCellValue == "male" ? "آقا" : "خانم"}</>
        ),
      },
    ],
    [],
  );

  return (
    <>
      <Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
        <DataTableWithAuth
          need_filter={true}
          columns={columns}
          sorting={[{ id: "id", desc: true }]}
          table_url={GET_USER_LIST}
          page_name={"usersPage"}
          table_name={"usersList"}
          TableToolbar={Toolbar}
          enableRowActions
          positionActionsColumn={"last"}
          RowActions={RowActions}
        />
      </Box>
    </>
  );
};
export default DataTable;