Добавление переключения DCHP

FRONT/DEV/src/components/workSpace/modules/appModules/usersScanner/modules/TableScanner.tsx

@@ -0,0 +1,143 @@
+import React, {useState} from 'react';
+import { DeviceUser } from '../../../../../../store/useDeviceStore';
+
+interface TableScannerProps {
+    devices: DeviceUser[];
+}
+import styled from 'styled-components';
+import {IconComponent} from "../../../../../../const/buttons/icons";
+import {buttonNames} from "../../../../../../const/buttons/names";
+import {ModalMap} from "../../../../../modalwindows/windowsType";
+import {useModalContext} from "../../../../../../store";
+import Pagination from "../../../../../UI/Pagination";
+
+const TableContainer = styled.div`
+  width: 100%;
+  margin: 24px 0;
+`;
+
+const StyledTable = styled.table`
+        width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    background: ${({ theme }) => theme.primary};
+`;
+
+const TableHeaderCell = styled.th<{ sortable?: boolean }>`
+  padding: 16px 24px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 14px;
+  color: ${({ theme }) => theme.textColor};
+  background: ${({ theme }) => theme.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.borderColor};
+  transition: all 0.2s ease;
+`;
+
+const TableRow = styled.tr<{ clickable?: boolean }>`
+  transition: all 0.2s ease;
+    &:hover {
+        background-color: ${({ theme }) => theme.background};
+    }
+`;
+
+const TableCell = styled.td`
+  padding: 16px 24px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.text};
+  border-bottom: 1px solid ${({ theme }) => theme.borderColor};
+  transition: all 0.2s ease;
+    button{
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+    }
+`;
+
+const StatusBadge = styled.span<{ status:string }>`
+    width: 10px;
+    height: 30px;
+    background-color: ${({theme, status}) => (status==='online' ? theme.successColor : theme.offlineColor)};
+    display: inline-block;
+    border-radius:4px;
+`
+
+const TableScanner = ({devices}:TableScannerProps) => {
+    const { openModal } = useModalContext();
+
+    const openModalNote = (e: React.MouseEvent, device:DeviceUser ) => {
+        e.stopPropagation();
+        openModal(ModalMap['6'], {
+            address: device.mac,
+            currentNote: device.note || ''
+        });
+    };
+
+    // Пагинация
+    const [currentPage, setCurrentPage] = useState(1);
+    const [devicesPerPage] = useState(15);
+
+    const indexOfLastDevice = currentPage * devicesPerPage;
+    const indexOfFirstDevice = indexOfLastDevice - devicesPerPage;
+    const currentDevices = devices.slice(indexOfFirstDevice, indexOfLastDevice);
+    const totalPages = Math.ceil(devices.length / devicesPerPage);
+
+    const handlePrevPage = () => {
+        if(currentPage > 1) setCurrentPage(currentPage - 1);
+    }
+    const handleNextPage = () => {
+        if(currentPage < totalPages) setCurrentPage(currentPage + 1);
+    }
+    const onPageChange = (page: number) => {
+        setCurrentPage(page);
+    }
+
+    return (
+            <TableContainer>
+                <StyledTable>
+                    <thead>
+                        <tr>
+                            <TableHeaderCell></TableHeaderCell>
+                            <TableHeaderCell>Имя</TableHeaderCell>
+                            <TableHeaderCell>Производитель</TableHeaderCell>
+                            <TableHeaderCell>IP адрес</TableHeaderCell>
+                            <TableHeaderCell>Открытые порты</TableHeaderCell>
+                            <TableHeaderCell>Последняя активность</TableHeaderCell>
+                            <TableHeaderCell>Заметка</TableHeaderCell>
+                            <TableHeaderCell></TableHeaderCell>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {currentDevices.map((item, i) => (
+                        <TableRow key={i}>
+                            <TableCell><StatusBadge status={item.status}></StatusBadge></TableCell>
+                            <TableCell>{item.hostname || item.ip}</TableCell>
+                            <TableCell>{item.vendor}</TableCell>
+                            <TableCell>{item.ip}</TableCell>
+                            <TableCell>{item.open_ports.join(', ') || '-'}</TableCell>
+                            <TableCell>{item.last_seen}</TableCell>
+                            <TableCell>{item.note || '-'}</TableCell>
+                            <TableCell>
+                                <button onClick={(e)=>openModalNote(e, item)}>
+                                    <IconComponent name={buttonNames[16]} width="26" height="26" />
+                                </button>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                    </tbody>
+                </StyledTable>
+                {totalPages > 1 && (
+                    <Pagination
+                        onPageChange={onPageChange}
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPrevPage={handlePrevPage}
+                        onNextPage={handleNextPage}
+                    />
+                )}
+            </TableContainer>
+        );
+};
+
+export default TableScanner;

FRONT/DEV/src/components/workSpace/modules/appModules/usersScanner/modules/TableUsers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import DeviceCard from "../../../../../UI/Dropdown/DeviceCard";
 import {DeviceUser} from "../../../../../../store/useDeviceStore";
-import TableScanner from "../../../../../UI/tables/TableScanner";
+import TableScanner from "./TableScanner";
 
 const ScanBtn = styled.button`
     position: relative;

FRONT/DEV/src/components/workSpace/sideBar/toolBar/toolBar.tsx

@@ -81,6 +81,11 @@ export const ToolBar = () => {
                         />
                     </IconContainer>
                 </Button>
+                <Button>
+                    <IconContainer>
+                        <IconComponent name={buttonNames[3]} width="30" height="30" onClick={() => openModal(ModalMap['10'])} />
+                    </IconContainer>
+                </Button>
             </ButtonContainer>
         </Container>
     )