Add embedded active equipment view for Drill iframe

client/src/App.tsx

@@ -1,6 +1,8 @@
-import { Admin, Resource } from 'react-admin';
+import { Admin, Authenticated, CustomRoutes, Resource } from 'react-admin';
+import { Route } from 'react-router-dom';
 import { authProvider } from './auth/authProvider';
 import { dataProvider } from './dataProvider';
+import { EmbeddedActiveEquipmentPage } from './pages/EmbeddedActiveEquipmentPage';
 import { EquipmentCreate } from './resources/equipment/EquipmentCreate';
 import { EquipmentEdit } from './resources/equipment/EquipmentEdit';
 import { EquipmentList } from './resources/equipment/EquipmentList';
@@ -13,6 +15,16 @@ import { EquipmentStatusChangeShow } from './resources/equipment-status-change/E
 function App() {
   return (
     <Admin dataProvider={dataProvider} authProvider={authProvider}>
+      <CustomRoutes noLayout>
+        <Route
+          path="/embedded/equipment-active"
+          element={
+            <Authenticated>
+              <EmbeddedActiveEquipmentPage />
+            </Authenticated>
+          }
+        />
+      </CustomRoutes>
       <Resource
         name="equipment"
         list={EquipmentList}

client/src/pages/EmbeddedActiveEquipmentPage.tsx

@@ -0,0 +1,90 @@
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import { useGetList } from 'react-admin';
+
+type EquipmentRecord = {
+  id: string;
+  name: string;
+  serialNumber: string;
+  dateOfInspection: string | null;
+  commissionedAt: string | null;
+};
+
+function formatDate(value: string | null) {
+  if (!value) {
+    return '-';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ru-RU').format(date);
+}
+
+export function EmbeddedActiveEquipmentPage() {
+  const { data, total, isPending, error } = useGetList<EquipmentRecord>('equipment', {
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: 'name', order: 'ASC' },
+    filter: { status: ['Active'] },
+  });
+
+  return (
+    <Box sx={{ minHeight: '100vh', boxSizing: 'border-box', p: { xs: 2, md: 3 }, bgcolor: '#f3f6fa' }}>
+      <Paper elevation={0} sx={{ overflow: 'hidden', borderRadius: 3, border: '1px solid #d7e0ea' }}>
+        <Box sx={{ px: 3, py: 2, borderBottom: '1px solid #d7e0ea', bgcolor: '#fff' }}>
+          <Typography variant="h5" sx={{ fontWeight: 700, color: '#10233a' }}>
+            Оборудование в эксплуатации
+          </Typography>
+          <Typography variant="body2" sx={{ mt: 0.5, color: '#5b7087' }}>
+            Отображаются записи со статусом `Active`
+            {typeof total === 'number' ? `: ${total}` : ''}
+          </Typography>
+        </Box>
+
+        {isPending ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+            <CircularProgress />
+          </Box>
+        ) : error ? (
+          <Box sx={{ p: 3 }}>
+            <Alert severity="error">Не удалось загрузить активное оборудование.</Alert>
+          </Box>
+        ) : (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ fontWeight: 700 }}>Наименование</TableCell>
+                  <TableCell sx={{ fontWeight: 700 }}>Заводской номер</TableCell>
+                  <TableCell sx={{ fontWeight: 700 }}>Дата изготовления</TableCell>
+                  <TableCell sx={{ fontWeight: 700 }}>Дата поверки</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {(data ?? []).map((item) => (
+                  <TableRow key={item.id} hover>
+                    <TableCell>{item.name}</TableCell>
+                    <TableCell>{item.serialNumber}</TableCell>
+                    <TableCell>{formatDate(item.dateOfInspection)}</TableCell>
+                    <TableCell>{formatDate(item.commissionedAt)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </Paper>
+    </Box>
+  );
+}