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/components/ServiceStatusBanner.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Alert, Button, Space } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
+import StatusIcon from './common/StatusIcon.jsx';
+import { UI_CONSTANTS } from '../constants';
+
+const ServiceStatusBanner = ({ serviceStatus, onRefresh }) => {
+
+  const getStatusMessage = () => {
+    switch (serviceStatus.overall) {
+      case 'online':
+        return 'All services are running normally';
+      case 'partial':
+        return 'Some services are unavailable - limited functionality';
+      case 'offline':
+        return 'Backend services are offline - running in offline mode';
+      default:
+        return 'Checking service status...';
+    }
+  };
+
+  const getStatusType = () => {
+    switch (serviceStatus.overall) {
+      case 'online':
+        return 'success';
+      case 'partial':
+        return 'warning';
+      case 'offline':
+        return 'error';
+      default:
+        return 'info';
+    }
+  };
+
+  const getServiceDetails = () => {
+    const details = [];
+    
+    if (!serviceStatus.apiGateway.available) {
+      details.push(`API Gateway: ${serviceStatus.apiGateway.error || 'Unavailable'}`);
+    }
+    if (!serviceStatus.serviceAdapters.available) {
+      details.push(`Service Adapters: ${serviceStatus.serviceAdapters.error || 'Unavailable'}`);
+    }
+    if (!serviceStatus.apiDocs.available) {
+      details.push(`API Docs: ${serviceStatus.apiDocs.error || 'Unavailable'}`);
+    }
+
+    return details;
+  };
+
+  if (serviceStatus.overall === 'online') {
+    return null; // Don't show banner when everything is working
+  }
+
+  return (
+    <Alert
+      message={
+        <Space>
+          <StatusIcon status={serviceStatus.overall} />
+          <span>{getStatusMessage()}</span>
+          {onRefresh && (
+            <Button 
+              type="link" 
+              size="small" 
+              icon={<ReloadOutlined />}
+              onClick={onRefresh}
+            >
+              Refresh
+            </Button>
+          )}
+        </Space>
+      }
+      description={
+        serviceStatus.overall !== 'checking' && (
+          <div>
+            {getServiceDetails().length > 0 && (
+              <div style={{ marginTop: 8 }}>
+                <strong>Service Details:</strong>
+                <ul style={{ margin: '4px 0 0 0', paddingLeft: '20px' }}>
+                  {getServiceDetails().map((detail, index) => (
+                    <li key={index}>{detail}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {serviceStatus.overall === 'offline' && (
+              <div style={{ marginTop: 8 }}>
+                <strong>Offline Mode:</strong> The frontend is running with fallback data. 
+                Start the backend services to enable full functionality.
+              </div>
+            )}
+          </div>
+        )
+      }
+      type={getStatusType()}
+      showIcon={false}
+      style={{ marginBottom: UI_CONSTANTS.MARGIN_BOTTOM }}
+      closable={serviceStatus.overall === 'partial'}
+    />
+  );
+};
+
+export default ServiceStatusBanner;