Add Document API calls

frontend_reactjs/src/pages/Documents.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import DocumentService from '../services/DocumentService'
+import { Box, Button } from '@mui/material'
+
+export default function Documents() {
+    const [data, setData] = useState()
+
+    const fetchData = async () => {
+        await DocumentService.getDocuments().then(response => {
+            setData(response.data)
+        })
+    }
+
+    return (
+        <div>
+            <Button onClick={() => {
+                fetchData()
+            }}>
+                Get data
+            </Button>
+
+            <Box>
+                {JSON.stringify(data)}
+            </Box>
+        </div>
+    )
+}

frontend_reactjs/src/pages/Settings.tsx

@@ -0,0 +1,62 @@
+import { Box, Button, CircularProgress } from "@mui/material"
+import DataTable from "../components/DataTable"
+import { GridColDef } from "@mui/x-data-grid"
+import { useRoles, useUsers } from "../hooks/swrHooks"
+import { IRole } from "../interfaces/role"
+import { useState } from "react"
+import CreateUserModal from "../components/modals/CreateUserModal"
+
+export default function Settings() {
+    const { users, isError, isLoading } = useUsers()
+
+    const { roles } = useRoles()
+
+    const [open, setOpen] = useState(false)
+
+    const columns: GridColDef[] = [
+        { field: 'id', headerName: 'ID', type: "number", width: 70 },
+        { field: 'email', headerName: 'Email', width: 130, editable: true },
+        { field: 'login', headerName: 'Логин', width: 130, editable: true },
+        { field: 'phone', headerName: 'Телефон', width: 90, editable: true },
+        { field: 'name', headerName: 'Имя', width: 90, editable: true },
+        { field: 'surname', headerName: 'Фамилия', width: 90, editable: true },
+        { field: 'is_active', headerName: 'Активен', type: "boolean", width: 90, editable: true },
+        {
+            field: 'role_id',
+            headerName: 'Роль',
+            valueGetter: (value, row) => {
+                if (roles) {
+                    const roleName = roles.find((role: IRole) => role.id === value).name
+                    return roleName
+                } else {
+                    return value
+                }
+            },
+            width: 90
+        },
+    ];
+
+    if (isError) return <div>Произошла ошибка при получении данных.</div>
+    if (isLoading) return <CircularProgress />
+
+    return (
+        <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "16px",
+        }}
+        >
+            <Button onClick={() => setOpen(true)}>
+                Добавить пользователя
+            </Button>
+
+            <CreateUserModal
+                open={open}
+                setOpen={setOpen}
+            />
+
+            <DataTable rows={users} columns={columns} />
+        </Box>
+    )
+}