fix: TypeScript errors - missing icons, unused imports, addRelationship API

frontend/src/components/Layout.tsx

@@ -5,7 +5,7 @@ import {
   ListItemIcon, ListItemText, Box, IconButton, Avatar, Menu, MenuItem,
 } from '@mui/material';
 import {
-  Dashboard as DashboardIcon, Server as ServerIcon,
+  Dashboard as DashboardIcon, Dns as DnsIcon,
   AccountTree as GraphIcon, Menu as MenuIcon, Logout as LogoutIcon,
 } from '@mui/icons-material';
 
@@ -13,7 +13,7 @@ const DRAWER_WIDTH = 240;
 
 const menuItems = [
   { text: 'Dashboard', icon: <DashboardIcon />, path: '/' },
-  { text: 'Configuration Items', icon: <ServerIcon />, path: '/ci' },
+  { text: 'Configuration Items', icon: <DnsIcon />, path: '/ci' },
   { text: 'Relationship Graph', icon: <GraphIcon />, path: '/graph' },
 ];
 

frontend/src/pages/CIDetailPage.tsx

@@ -4,10 +4,10 @@ import {
   Box, Typography, Card, CardContent, Grid, Chip, Button, TextField,
   Dialog, DialogTitle, DialogContent, DialogActions, Tabs, Tab, Table,
   TableBody, TableCell, TableContainer, TableHead, TableRow, Paper,
-  IconButton, Tooltip, Alert, CircularProgress, Divider, Select,
+  IconButton, CircularProgress, Divider, Select,
   MenuItem, FormControl, InputLabel,
 } from '@mui/material';
-import { ArrowBack, Edit, Save, Link as LinkIcon, Hub } from '@mui/icons-material';
+import { ArrowBack, Edit, Save, Link as LinkIcon } from '@mui/icons-material';
 import { ciApi, CI } from '../services/api';
 import { useSnackbar } from 'notistack';
 

frontend/src/pages/CIListPage.tsx

@@ -11,7 +11,7 @@ import {
   Refresh as RefreshIcon, Add as AddIcon, Delete as DeleteIcon,
   Edit as EditIcon, Search as SearchIcon,
 } from '@mui/icons-material';
-import { ciApi, refApi, CI, PaginatedResponse } from '../services/api';
+import { ciApi, refApi, PaginatedResponse } from '../services/api';
 import { useSnackbar } from 'notistack';
 
 const STATUS_COLORS: Record<string, 'success' | 'warning' | 'error' | 'default' | 'info'> = {
@@ -29,8 +29,8 @@ export default function CIListPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('');
   const [typeFilter, setTypeFilter] = useState('');
-  const [sortBy, setSortBy] = useState('name');
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [sortBy] = useState('name');
+  const [sortOrder] = useState<'asc' | 'desc'>('asc');
   const [createOpen, setCreateOpen] = useState(false);
   const [newCI, setNewCI] = useState({ name: '', ci_type_id: '', description: '', status: 'active' });
   const [types, setTypes] = useState<any[]>([]);

frontend/src/pages/DashboardPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Box, Card, CardContent, Typography, Grid } from '@mui/material';
-import { Server, Hub, LocationOn, TrendingUp } from '@mui/icons-material';
+import { Dns, Hub, LocationOn, TrendingUp } from '@mui/icons-material';
 import { dashboardApi } from '../services/api';
 
 interface Stats {
@@ -39,7 +39,7 @@ export default function DashboardPage() {
       <Typography variant="h4" gutterBottom>Dashboard</Typography>
       <Grid container spacing={3}>
         <Grid item xs={12} sm={6} md={3}>
-          <StatCard title="Total CIs" value={stats.total_cis} icon={<Server fontSize="large" />} color="#4fc3f7" />
+          <StatCard title="Total CIs" value={stats.total_cis} icon={<Dns fontSize="large" />} color="#4fc3f7" />
         </Grid>
         <Grid item xs={12} sm={6} md={3}>
           <StatCard title="Relationships" value={stats.total_relationships} icon={<Hub fontSize="large" />} color="#ff8a65" />

frontend/src/pages/GraphPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Box, Typography, Card, CardContent, Slider, Button, CircularProgress, Alert } from '@mui/material';
 import { ciApi, GraphData } from '../services/api';
 import { useSnackbar } from 'notistack';

frontend/src/services/api.ts

@@ -67,6 +67,8 @@ export const ciApi = {
   exportData: (format: string = 'csv') =>
     api.get('/ci/export', { params: { format }, responseType: 'blob' }),
   bulkImport: (items: any[]) => api.post('/ci/bulk/import', { items }),
+  addRelationship: (ciId: string, data: any) => api.post(`/ci/${ciId}/relationships`, data),
+  removeRelationship: (ciId: string, relId: string) => api.delete(`/ci/${ciId}/relationships/${relId}`),
 };
 
 export const refApi = {