From 12cf77ea122639c6845bdd5049f67da7a9d1c00e Mon Sep 17 00:00:00 2001
From: smolkik-code <mishel.smolin@yandex.ru>
Date: Thu, 25 Jun 2026 13:17:50 +0700
Subject: [PATCH] fix: TypeScript errors - missing icons, unused imports,
 addRelationship API

---
 frontend/src/components/Layout.tsx   | 4 ++--
 frontend/src/pages/CIDetailPage.tsx  | 4 ++--
 frontend/src/pages/CIListPage.tsx    | 6 +++---
 frontend/src/pages/DashboardPage.tsx | 4 ++--
 frontend/src/pages/GraphPage.tsx     | 2 +-
 frontend/src/services/api.ts         | 2 ++
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 87f3098..308aee4 100644
--- a/frontend/src/components/Layout.tsx
+++ b/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' },
 ];
 
diff --git a/frontend/src/pages/CIDetailPage.tsx b/frontend/src/pages/CIDetailPage.tsx
index d03d0e0..511bd2e 100644
--- a/frontend/src/pages/CIDetailPage.tsx
+++ b/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';
 
diff --git a/frontend/src/pages/CIListPage.tsx b/frontend/src/pages/CIListPage.tsx
index 2b6b263..4f5a00f 100644
--- a/frontend/src/pages/CIListPage.tsx
+++ b/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[]>([]);
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index b2479a8..09a7b29 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/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" />
diff --git a/frontend/src/pages/GraphPage.tsx b/frontend/src/pages/GraphPage.tsx
index 18362a6..09b0cf9 100644
--- a/frontend/src/pages/GraphPage.tsx
+++ b/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';
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 37c85d7..a82458e 100644
--- a/frontend/src/services/api.ts
+++ b/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 = {