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

import DashboardLayouts from "@/layouts/dashboardLayouts";
import {Box, FormControl, FormHelperText, IconButton, MenuItem, Select, Stack, Typography} from "@mui/material";
import {useMemo} from "react";
import {GET_USER_MANAGEMENT} from "@/core/data/apiRoutes";
import {useTranslations} from "next-intl";
import DataTable from "@/core/components/DataTable";
import moment from "jalali-moment";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import TableToolbar from "@/components/dashboard/user-management/TableToolbar";
import TableRowActions from "./TableRowActions"
import ClearIcon from "@mui/icons-material/Clear";

function DashboardUserManagementComponent() {
    const t = useTranslations();

    const columns = useMemo(() => [{
        accessorFn: (row) => row.id,
        id: "id",
        sortDescFirst: true,
        header: t("UserManagement.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("UserManagement.navgan_id"),
        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("UserManagement.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("UserManagement.phone_number"),
        enableColumnFilter: true,
        datatype: "numeric",
        filterFn: "equals",
        columnFilterModeOptions: ["equals", "notEquals", "contains", "lessThan", "greaterThan", "between",],
        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("UserManagement.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) => moment(row.updated_at).locale("fa").format("HH:mm | yyyy/MM/DD"),
        id: "updated_at",
        header: t("UserManagement.updated_at"),
        enableColumnFilter: false,
        datatype: "numeric",
        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
    }, {
        accessorFn: (row) => row.type_name,
        id: "type_id",
        header: t("UserManagement.type_name"),
        enableColumnFilter: true,
        datatype: "numeric",
        filterFn: "equals",
        columnFilterModeOptions: ["equals"],
        Cell: ({renderedCellValue}) => (<Typography variant="body2">{renderedCellValue}</Typography>),
        Header: ({column}) => <>{column.columnDef.header}</>,
        Filter: ({column}) => {
            return (<Stack mt={0.5} direction="row" spacing={2}>
                <FormControl fullWidth>
                    <Select
                        variant={'standard'}
                        value={column.getFilterValue() ? column.getFilterValue() : 0}
                        onChange={(e) => column.setFilterValue(e.target.value)}
                        sx={{color: column.getFilterValue() ? 'black' : "rgba(0, 0, 0, 0.4)"}}
                    >
                        <MenuItem disabled value={0}>
                            {t("Select.menu_item")}
                        </MenuItem>
                        <MenuItem value={1}>{t("UpdateDialog.navgan")}</MenuItem>
                        <MenuItem value={2}>{t("UpdateDialog.refahi")}</MenuItem>
                    </Select>
                    <FormHelperText>{t("Select.helper_text")}</FormHelperText>
                </FormControl>
                <IconButton
                    size="small"
                    onClick={() => {
                        column.setFilterValue(null);
                    }}
                    sx={{
                        color: column.getFilterValue() ? "rgba(0, 0, 0, 0.54)" : "#bfbfbf", marginTop: 7, height: 25
                    }}
                >
                    <ClearIcon/>
                </IconButton>
            </Stack>)
        }
    },], []);
    return (<DashboardLayouts>
        <Box sx={{px: 3}}>
            <DataTable
                tableUrl={GET_USER_MANAGEMENT}
                columns={columns}
                selectableRow={false}
                enableCustomToolbar={true}
                CustomToolbar={TableToolbar}
                enableLastUpdate={true}
                enablePinning={true}
                enableDensityToggle={false}
                sorting={[{
                    id: 'id', desc: true
                }]}
                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>
    </DashboardLayouts>);
}

export default DashboardUserManagementComponent;