Add logs report page

1 files changed, 46 insertions, 0 deletions

diff --git a/modern/src/reports/LogsPage.jsx b/modern/src/reports/LogsPage.jsx
new file mode 100644
index 00000000..3a72f81b
--- /dev/null
+++ b/modern/src/reports/LogsPage.jsx
@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Table, TableRow, TableCell, TableHead, TableBody,
+} from '@mui/material';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
+import { sessionActions } from '../store';
+
+const LogsPage = () => {
+  const dispatch = useDispatch();
+  const t = useTranslation();
+
+  useEffect(() => {
+    dispatch(sessionActions.enableLogs(true));
+    return () => dispatch(sessionActions.enableLogs(false));
+  }, []);
+
+  const items = useSelector((state) => state.session.logs);
+
+  return (
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>{t('deviceIdentifier')}</TableCell>
+            <TableCell>{t('positionProtocol')}</TableCell>
+            <TableCell>{t('commandData')}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {items.map((item, index) => (
+            <TableRow key={index}>
+              <TableCell>{item.uniqueId}</TableCell>
+              <TableCell>{item.port}</TableCell>
+              <TableCell>{item.data}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </PageLayout>
+  );
+};
+
+export default LogsPage;