Merge branch 'refactor'

client/src/pages/admin-users/ui/AdminUsersPage.tsx

@@ -2,15 +2,8 @@ import { useEffect, useState } from 'react'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import Dialog from '@mui/material/Dialog'
-import DialogActions from '@mui/material/DialogActions'
-import DialogContent from '@mui/material/DialogContent'
-import DialogTitle from '@mui/material/DialogTitle'
 import Stack from '@mui/material/Stack'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
-import TableHead from '@mui/material/TableHead'
 import TablePagination from '@mui/material/TablePagination'
 import TableRow from '@mui/material/TableRow'
 import TextField from '@mui/material/TextField'
@@ -23,6 +16,8 @@ import type { AdminUser } from '@/entities/user/model/types'
 import { getErrorMessage } from '@/shared/lib/get-error-message'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
 import { useEditDialogState } from '@/shared/lib/use-edit-dialog-state'
+import { AdminDialog } from '@/shared/ui/AdminDialog/AdminDialog'
+import { AdminTable } from '@/shared/ui/AdminTable'
 import { EntityRowActions } from '@/shared/ui/EntityRowActions'
 
 type UserFormState = {
@@ -170,18 +165,25 @@ export function AdminUsersPage() {
         </Alert>
       )}
 
-      <Table size="small">
-        <TableHead>
+      <AdminTable
+        columns={[
+          { key: 'email', label: 'Почта' },
+          { key: 'name', label: 'Имя' },
+          { key: 'createdAt', label: 'Создан' },
+          { key: 'updatedAt', label: 'Обновлён' },
+          { key: 'actions', label: 'Действия', align: 'right' },
+        ]}
+        loading={usersQuery.isLoading}
+        error={usersQuery.isError ? 'Ошибка загрузки.' : null}
+      >
+        {users.length === 0 && !usersQuery.isLoading ? (
           <TableRow>
-            <TableCell>Почта</TableCell>
-            <TableCell>Имя</TableCell>
-            <TableCell>Создан</TableCell>
-            <TableCell>Обновлён</TableCell>
-            <TableCell align="right">Действия</TableCell>
+            <TableCell colSpan={5} sx={{ color: 'text.secondary' }}>
+              Пользователей пока нет.
+            </TableCell>
           </TableRow>
-        </TableHead>
-        <TableBody>
-          {users.map((u) => (
+        ) : (
+          users.map((u) => (
             <TableRow key={u.id} hover>
               <TableCell>{u.email}</TableCell>
               <TableCell>{u.name ?? '—'}</TableCell>
@@ -196,16 +198,9 @@ export function AdminUsersPage() {
                 />
               </TableCell>
             </TableRow>
-          ))}
-          {users.length === 0 && !usersQuery.isLoading && (
-            <TableRow>
-              <TableCell colSpan={5} sx={{ color: 'text.secondary' }}>
-                Пользователей пока нет.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+          ))
+        )}
+      </AdminTable>
 
       <TablePagination
         component="div"
@@ -220,33 +215,37 @@ export function AdminUsersPage() {
         rowsPerPageOptions={[10, 20, 50, 100]}
       />
 
-      <Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="xs">
-        <DialogTitle>{editing ? 'Редактировать пользователя' : 'Новый пользователь'}</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2} sx={{ mt: 1 }}>
-            <Controller
-              control={userForm.control}
-              name="email"
-              render={({ field }) => <TextField label="Почта" fullWidth required {...field} />}
-            />
-            <Controller
-              control={userForm.control}
-              name="name"
-              render={({ field }) => <TextField label="Имя/ник" fullWidth {...field} />}
-            />
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeDialog}>Отмена</Button>
-          <Button
-            variant="contained"
-            onClick={() => (editing ? updateMut.mutate() : createMut.mutate())}
-            disabled={isSaveDisabled}
-          >
-            {editing ? 'Сохранить' : 'Создать'}
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <AdminDialog
+        open={dialogOpen}
+        onClose={closeDialog}
+        title={editing ? 'Редактировать пользователя' : 'Новый пользователь'}
+        maxWidth="xs"
+        actions={
+          <>
+            <Button onClick={closeDialog}>Отмена</Button>
+            <Button
+              variant="contained"
+              onClick={() => (editing ? updateMut.mutate() : createMut.mutate())}
+              disabled={isSaveDisabled}
+            >
+              {editing ? 'Сохранить' : 'Создать'}
+            </Button>
+          </>
+        }
+      >
+        <Stack spacing={2} sx={{ mt: 1 }}>
+          <Controller
+            control={userForm.control}
+            name="email"
+            render={({ field }) => <TextField label="Почта" fullWidth required {...field} />}
+          />
+          <Controller
+            control={userForm.control}
+            name="name"
+            render={({ field }) => <TextField label="Имя/ник" fullWidth {...field} />}
+          />
+        </Stack>
+      </AdminDialog>
     </Box>
   )
 }