web: fix dashboard import paths and TypeScript build errors

- Correct component imports from ../../services|types to ../services|types
- Fix react-bootstrap Alert alias in ContainerList
- Add explicit typed mappings for alert/container badge variants
- Type websocket stats callback payload
- Import fireEvent in ThreatMap tests
- Improve WebSocket test mock shape to satisfy TS
- Expose ApiService.api for existing tests

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: vsilent

web/src/components/AlertPanel.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Button, Form, Table, Badge, Modal, Spinner, Alert as BootstrapAlert, Pagination } from 'react-bootstrap';
-import apiService from '../../services/api';
-import webSocketService from '../../services/websocket';
-import { Alert, AlertSeverity, AlertStatus, AlertFilter, AlertStats } from '../../types/alerts';
+import apiService from '../services/api';
+import webSocketService from '../services/websocket';
+import { Alert, AlertSeverity, AlertStatus, AlertFilter, AlertStats } from '../types/alerts';
 import './AlertPanel.css';
 
 const ITEMS_PER_PAGE = 10;
@@ -121,7 +121,7 @@ const AlertPanel: React.FC = () => {
   };
 
   const getSeverityBadge = (severity: AlertSeverity) => {
-    const variants = {
+    const variants: Record<AlertSeverity, string> = {
       Info: 'info',
       Low: 'success',
       Medium: 'warning',
@@ -132,7 +132,7 @@ const AlertPanel: React.FC = () => {
   };
 
   const getStatusBadge = (status: AlertStatus) => {
-    const variants = {
+    const variants: Record<AlertStatus, string> = {
       New: 'primary',
       Acknowledged: 'warning',
       Resolved: 'success',

web/src/components/ContainerList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Button, Form, Badge, Modal, Spinner, BootstrapAlert } from 'react-bootstrap';
-import apiService from '../../services/api';
-import { Container, ContainerStatus } from '../../types/containers';
+import { Card, Button, Form, Badge, Modal, Spinner, Alert as BootstrapAlert } from 'react-bootstrap';
+import apiService from '../services/api';
+import { Container, ContainerStatus } from '../types/containers';
 import './ContainerList.css';
 
 const ContainerList: React.FC = () => {
@@ -21,7 +21,7 @@ const ContainerList: React.FC = () => {
     try {
       setLoading(true);
       const data = await apiService.getContainers();
-      setContainers(filterStatus ? data.filter(c => c.status === filterStatus) : data);
+      setContainers(filterStatus ? data.filter((c: Container) => c.status === filterStatus) : data);
     } catch (err) {
       console.error('Error loading containers:', err);
     } finally {
@@ -53,7 +53,7 @@ const ContainerList: React.FC = () => {
   };
 
   const getStatusBadge = (status: ContainerStatus) => {
-    const variants = {
+    const variants: Record<ContainerStatus, string> = {
       Running: 'success',
       Stopped: 'secondary',
       Paused: 'warning',

web/src/components/Dashboard.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Container, Row, Col, Card, Spinner, Alert as BootstrapAlert } from 'react-bootstrap';
-import apiService from '../../services/api';
-import webSocketService from '../../services/websocket';
-import { SecurityStatus } from '../../types/security';
+import apiService from '../services/api';
+import webSocketService from '../services/websocket';
+import { SecurityStatus } from '../types/security';
 import SecurityScore from './SecurityScore';
 import AlertPanel from './AlertPanel';
 import ContainerList from './ContainerList';
@@ -42,7 +42,7 @@ const Dashboard: React.FC = () => {
       await webSocketService.connect();
 
       // Subscribe to real-time updates
-      webSocketService.subscribe('stats:updated', (data) => {
+      webSocketService.subscribe('stats:updated', (data: Partial<SecurityStatus>) => {
         setSecurityStatus(prev => prev ? { ...prev, ...data } : null);
       });
 

web/src/components/ThreatMap.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Card, Form, Spinner } from 'react-bootstrap';
 import { BarChart, Bar, PieChart, Pie, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';
-import apiService from '../../services/api';
-import { Threat, ThreatStatistics } from '../../types/security';
+import apiService from '../services/api';
+import { Threat, ThreatStatistics } from '../types/security';
 import './ThreatMap.css';
 
 const COLORS = ['#e74c3c', '#e67e22', '#f39c12', '#3498db', '#27ae60'];

web/src/components/__tests__/ThreatMap.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ThreatMap from '../ThreatMap';
 import apiService from '../../services/api';
 

web/src/services/api.ts

@@ -6,7 +6,7 @@ import { Container, QuarantineRequest } from '../types/containers';
 const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
 
 class ApiService {
-  private api: AxiosInstance;
+  public api: AxiosInstance;
 
   constructor() {
     this.api = axios.create({

web/src/setupTests.ts

@@ -1,15 +1,25 @@
 import '@testing-library/jest-dom';
 
 // Mock WebSocket
-global.WebSocket = class MockWebSocket {
-  constructor(url: string) {
-    this.url = url;
-  }
+class MockWebSocket {
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSING = 2;
+  static CLOSED = 3;
+
+  url: string;
+  readyState = MockWebSocket.OPEN;
   send = jest.fn();
   close = jest.fn();
   addEventListener = jest.fn();
   removeEventListener = jest.fn();
-};
+
+  constructor(url: string) {
+    this.url = url;
+  }
+}
+
+global.WebSocket = MockWebSocket as unknown as typeof WebSocket;
 
 // Mock fetch
 global.fetch = jest.fn();