Merge branch 'refactor'

client/src/shared/ui/AdminDialog/AdminDialog.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import Alert from '@mui/material/Alert'
+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 Typography from '@mui/material/Typography'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  title: ReactNode
+  children: ReactNode
+  actions?: ReactNode
+  loading?: boolean
+  error?: string | null
+  maxWidth?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+export function AdminDialog({ open, onClose, title, children, actions, loading, error, maxWidth = 'sm' }: Props) {
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth={maxWidth}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        {loading && <Typography>Загрузка…</Typography>}
+        {error && <Alert severity="error">{error}</Alert>}
+        {!loading && !error && children}
+      </DialogContent>
+      <DialogActions>
+        {actions}
+        <Button onClick={onClose}>Закрыть</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

client/src/shared/ui/AdminTable/AdminTable.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+import Alert from '@mui/material/Alert'
+import Skeleton from '@mui/material/Skeleton'
+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 TableRow from '@mui/material/TableRow'
+
+export type AdminTableColumn = {
+  key: string
+  label: string
+  align?: 'left' | 'right' | 'center'
+}
+
+type Props = {
+  columns: AdminTableColumn[]
+  children: ReactNode
+  loading?: boolean
+  error?: string | null
+  skeletonRows?: number
+}
+
+export function AdminTable({ columns, children, loading, error, skeletonRows = 3 }: Props) {
+  return (
+    <Table size="small">
+      <TableHead>
+        <TableRow>
+          {columns.map((col) => (
+            <TableCell key={col.key} align={col.align}>
+              {col.label}
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {error && (
+          <TableRow>
+            <TableCell colSpan={columns.length}>
+              <Alert severity="error">{error}</Alert>
+            </TableCell>
+          </TableRow>
+        )}
+        {loading && !error && (
+          <>
+            {Array.from({ length: skeletonRows }).map((_, i) => (
+              <TableRow key={i}>
+                {columns.map((col) => (
+                  <TableCell key={col.key}>
+                    <Skeleton />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </>
+        )}
+        {!loading && !error && children}
+      </TableBody>
+    </Table>
+  )
+}

client/src/shared/ui/AdminTable/index.ts

@@ -0,0 +1,2 @@
+export { AdminTable } from './AdminTable'
+export type { Column as AdminTableColumn } from './AdminTable'