refactor: Migrate frontend to use Vite and update testing framework

### Summary of Changes
- Replaced `react-query` with `@tanstack/react-query` in `package.json` and updated related imports.
- Updated frontend CI workflow to use `vitest` for testing instead of Jest, modifying test commands accordingly.
- Removed the `App.js`, `Dashboard.js`, `Settings.js`, and other component files, transitioning to a new structure.
- Enhanced error handling in the `useServiceStatus` hook to provide more informative error messages.

### Expected Results
- Improved performance and modernized the frontend build process with Vite.
- Streamlined testing setup with `vitest`, enhancing test execution speed and reliability.
- Increased clarity and maintainability of the codebase by adhering to clean code principles and removing unused components.

frontend/src/App.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { Layout, Menu, Typography } from 'antd';
 import { DashboardOutlined, SettingOutlined, BarChartOutlined } from '@ant-design/icons';
-import Dashboard from './components/Dashboard';
-import SystemMetrics from './components/SystemMetrics';
-import Settings from './components/Settings';
-import OfflineMode from './components/OfflineMode';
-import ErrorBoundary from './components/common/ErrorBoundary';
+import Dashboard from './components/Dashboard.jsx';
+import SystemMetrics from './components/SystemMetrics.jsx';
+import Settings from './components/Settings.jsx';
+import OfflineMode from './components/OfflineMode.jsx';
+import ErrorBoundary from './components/common/ErrorBoundary.jsx';
 import { useServiceStatus } from './hooks/useServiceStatus';
 import './App.css';
 

frontend/src/App.test.jsx

@@ -2,10 +2,11 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
 import '@testing-library/jest-dom'
-import App from './App'
+import { vi } from 'vitest'
+import App from './App.jsx'
 
 // Mock Recharts components to avoid ResponsiveContainer issues in tests
-jest.mock('recharts', () => ({
+vi.mock('recharts', () => ({
   ResponsiveContainer: ({ children }) => <div data-testid="responsive-container">{children}</div>,
   LineChart: ({ children }) => <div data-testid="line-chart">{children}</div>,
   AreaChart: ({ children }) => <div data-testid="area-chart">{children}</div>,
@@ -18,8 +19,8 @@ jest.mock('recharts', () => ({
 }))
 
 // Mock Dashboard components to avoid complex rendering issues in tests
-jest.mock('./components/Dashboard', () => {
-  return function MockDashboard() {
+vi.mock('./components/Dashboard.jsx', () => ({
+  default: function MockDashboard() {
     return (
       <div data-testid="dashboard">
         <h2>System Overview</h2>
@@ -28,29 +29,29 @@ jest.mock('./components/Dashboard', () => {
         <div>System Metrics</div>
       </div>
     );
-  };
-})
+  }
+}))
 
-jest.mock('./components/SystemMetrics', () => {
-  return function MockSystemMetrics() {
+vi.mock('./components/SystemMetrics.jsx', () => ({
+  default: function MockSystemMetrics() {
     return <div data-testid="system-metrics">System Metrics</div>;
-  };
-})
+  }
+}))
 
-jest.mock('./components/Settings', () => {
-  return function MockSettings() {
+vi.mock('./components/Settings.jsx', () => ({
+  default: function MockSettings() {
     return <div data-testid="settings">Settings</div>;
-  };
-})
+  }
+}))
 
-jest.mock('./components/OfflineMode', () => {
-  return function MockOfflineMode() {
+vi.mock('./components/OfflineMode.jsx', () => ({
+  default: function MockOfflineMode() {
     return <div data-testid="offline-mode">Offline Mode</div>;
-  };
-})
+  }
+}))
 
 // Mock the service status hook to avoid API calls during tests
-jest.mock('./hooks/useServiceStatus', () => ({
+vi.mock('./hooks/useServiceStatus', () => ({
   useServiceStatus: () => ({
     loading: false,
     apiGateway: { available: true, error: null },

frontend/src/components/Dashboard.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Row, Col, Typography, Alert } from 'antd';
-import SystemMetrics from './SystemMetrics';
-import ServiceStatusBanner from './ServiceStatusBanner';
-import SystemStatsCards from './dashboard/SystemStatsCards';
-import ServiceStatusList from './dashboard/ServiceStatusList';
-import RecentEventsList from './dashboard/RecentEventsList';
-import LoadingSpinner from './common/LoadingSpinner';
+import SystemMetrics from './SystemMetrics.jsx';
+import ServiceStatusBanner from './ServiceStatusBanner.jsx';
+import SystemStatsCards from './dashboard/SystemStatsCards.jsx';
+import ServiceStatusList from './dashboard/ServiceStatusList.jsx';
+import RecentEventsList from './dashboard/RecentEventsList.jsx';
+import LoadingSpinner from './common/LoadingSpinner.jsx';
 import { useServiceStatus, useSystemData } from '../hooks/useServiceStatus';
 import { ERROR_MESSAGES } from '../constants';
 

frontend/src/components/ServiceStatusBanner.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert, Button, Space } from 'antd';
 import { ReloadOutlined } from '@ant-design/icons';
-import StatusIcon from './common/StatusIcon';
+import StatusIcon from './common/StatusIcon.jsx';
 import { UI_CONSTANTS } from '../constants';
 
 const ServiceStatusBanner = ({ serviceStatus, onRefresh }) => {

frontend/src/components/Settings.jsx

@@ -8,7 +8,7 @@ const Settings = () => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
 
-  const onFinish = (values) => {
+  const onFinish = (_values) => {
     setLoading(true);
     // Simulate API call
     setTimeout(() => {

frontend/src/components/common/ErrorBoundary.jsx

@@ -9,7 +9,7 @@ class ErrorBoundary extends React.Component {
     this.state = { hasError: false, error: null, errorInfo: null };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
 

frontend/src/components/dashboard/ServiceStatusList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card, List, Typography } from 'antd';
-import StatusIcon from '../common/StatusIcon';
+import StatusIcon from '../common/StatusIcon.jsx';
 import { UI_CONSTANTS } from '../../constants';
 
 const { Text } = Typography;

frontend/src/hooks/useServiceStatus.js

@@ -112,7 +112,7 @@ export const useSystemData = () => {
           systemStats: fallbackData.systemStats,
           services: fallbackData.services,
           events: fallbackData.events,
-          error: 'Failed to fetch data from services'
+          error: `Failed to fetch data from services: ${error.message}`
         });
       }
     };

frontend/src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConfigProvider } from 'antd';
-import App from './App';
+import App from './App.jsx';
 import './index.css';
 
 const queryClient = new QueryClient();