universal_is/client/src/pages/Users.tsx

import { useRoles, useUsers } from "../hooks/swrHooks"
import { IRole } from "../interfaces/role"
import { useEffect, useState } from "react"
import { CreateField } from "../interfaces/create"
import UserService from "../services/UserService"
import { Flex, Loader, Stack } from "@mantine/core"
import CustomTable from "../components/CustomTable"

export default function Users() {
    const { users, isError, isLoading } = useUsers()

    const { roles } = useRoles()

    const [roleOptions, setRoleOptions] = useState<{ label: string, value: string }[]>()

    useEffect(() => {
        if (Array.isArray(roles)) {
            setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
        }
    }, [roles])

    const createFields: CreateField[] = [
        { key: 'email', headerName: 'E-mail', type: 'string', required: true, defaultValue: '' },
        { key: 'login', headerName: 'Логин', type: 'string', required: true, defaultValue: '' },
        { key: 'phone', headerName: 'Телефон', type: 'string', required: false, defaultValue: '' },
        { key: 'name', headerName: 'Имя', type: 'string', required: true, defaultValue: '' },
        { key: 'surname', headerName: 'Фамилия', type: 'string', required: true, defaultValue: '' },
        { key: 'password', headerName: 'Пароль', type: 'string', required: true, defaultValue: '' },
    ]

    if (isError) return (
        <div>
            Произошла ошибка при получении данных.
        </div>
    )

    if (isLoading) {
        return (
            <Flex direction='column' align='flex-start' gap='sm' p='sm'>
                <Loader />
            </Flex>
        )
    }

    return (
        <Stack w={'100%'} h={'100%'} p='xs'>
            {Array.isArray(roleOptions) &&
                <CustomTable
                    createFields={createFields}
                    submitHandler={UserService.createUser}
                    data={users}
                    columns={[
                        {
                            accessorKey: 'email',
                            header: 'E-mail',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'login',
                            header: 'Логин',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'phone',
                            header: 'Телефон',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'name',
                            header: 'Имя',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'surname',
                            header: 'Фамилия',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'is_active',
                            header: 'Активен',
                            cell: (info) => info.getValue(),
                        },
                        {
                            accessorKey: 'role_id',
                            header: 'Роль',
                            cell: (info) => info.getValue(),
                        }
                    ]} />
            }
        </Stack>
    )
}