feat: Enhance frontend with theme support and offline capabilities

### Summary of Changes
- Introduced theme-aware CSS variables for consistent styling across light and dark modes.
- Updated `App.jsx` to manage theme settings and improve layout responsiveness.
- Refactored `OfflineMode` component to provide detailed connection status and quick actions for users.
- Enhanced `Dashboard`, `Settings`, and `SystemMetrics` components to utilize new theme variables and improve UI consistency.
- Updated service URLs in constants and API documentation to reflect new configurations.

### Expected Results
- Improved user experience with a cohesive design that adapts to user preferences.
- Enhanced offline functionality, providing users with better feedback and control during service outages.
- Streamlined codebase with consistent styling practices, making future updates easier.

frontend/src/components/SystemMetrics.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Card, Row, Col, Statistic, Progress, Alert } from 'antd';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
-import { useSystemData } from '../hooks/useServiceStatus';
+import { useOfflineAwareSystemData } from '../hooks/useOfflineAwareServiceStatus';
 
 const SystemMetrics = () => {
-  const { systemStats, loading, error } = useSystemData();
+  const { systemStats, loading, error } = useOfflineAwareSystemData();
 
   // Mock data for charts (fallback when services are unavailable)
   const cpuData = [
@@ -39,16 +39,36 @@ const SystemMetrics = () => {
 
   if (loading) {
     return (
-      <Card title="System Performance Metrics">
-        <div style={{ textAlign: 'center', padding: '50px' }}>
+      <Card 
+        title="System Performance Metrics"
+        style={{ 
+          background: 'var(--card-bg)',
+          border: '1px solid var(--border-color)'
+        }}
+        headStyle={{ color: 'var(--text-primary)' }}
+        bodyStyle={{ color: 'var(--text-primary)' }}
+      >
+        <div style={{ textAlign: 'center', padding: '50px', color: 'var(--text-primary)' }}>
           Loading metrics...
         </div>
       </Card>
     );
   }
 
+  // Ensure systemStats is an object with fallback values
+  const safeSystemStats = systemStats || {
+    cpu: 0,
+    memory: 0,
+    disk: 0,
+    network: 0
+  };
+
   return (
-    <div>
+    <div style={{ 
+      background: 'var(--bg-primary)', 
+      color: 'var(--text-primary)',
+      padding: '24px'
+    }}>
       {error && (
         <Alert
           message="Metrics Unavailable"
@@ -58,24 +78,57 @@ const SystemMetrics = () => {
         />
       )}
       
-      <Card title="System Performance Metrics" style={{ marginBottom: 16 }}>
+      <Card 
+        title="System Performance Metrics" 
+        style={{ 
+          marginBottom: 16,
+          background: 'var(--card-bg)',
+          border: '1px solid var(--border-color)'
+        }}
+        headStyle={{ color: 'var(--text-primary)' }}
+        bodyStyle={{ color: 'var(--text-primary)' }}
+      >
         <Row gutter={16}>
           <Col span={8}>
-            <Card size="small">
-              <Statistic title="CPU Usage (24h)" value={systemStats.cpu || 0} suffix="%" />
-              <Progress percent={systemStats.cpu || 0} showInfo={false} />
+            <Card 
+              size="small"
+              style={{ 
+                background: 'var(--card-bg)',
+                border: '1px solid var(--border-color)'
+              }}
+              headStyle={{ color: 'var(--text-primary)' }}
+              bodyStyle={{ color: 'var(--text-primary)' }}
+            >
+              <Statistic title="CPU Usage (24h)" value={safeSystemStats.cpu || 0} suffix="%" />
+              <Progress percent={safeSystemStats.cpu || 0} showInfo={false} />
             </Card>
           </Col>
           <Col span={8}>
-            <Card size="small">
-              <Statistic title="Memory Usage (24h)" value={systemStats.memory || 0} suffix="%" />
-              <Progress percent={systemStats.memory || 0} showInfo={false} />
+            <Card 
+              size="small"
+              style={{ 
+                background: 'var(--card-bg)',
+                border: '1px solid var(--border-color)'
+              }}
+              headStyle={{ color: 'var(--text-primary)' }}
+              bodyStyle={{ color: 'var(--text-primary)' }}
+            >
+              <Statistic title="Memory Usage (24h)" value={safeSystemStats.memory || 0} suffix="%" />
+              <Progress percent={safeSystemStats.memory || 0} showInfo={false} />
             </Card>
           </Col>
           <Col span={8}>
-            <Card size="small">
-              <Statistic title="Disk Usage" value={systemStats.disk || 0} suffix="%" />
-              <Progress percent={systemStats.disk || 0} showInfo={false} />
+            <Card 
+              size="small"
+              style={{ 
+                background: 'var(--card-bg)',
+                border: '1px solid var(--border-color)'
+              }}
+              headStyle={{ color: 'var(--text-primary)' }}
+              bodyStyle={{ color: 'var(--text-primary)' }}
+            >
+              <Statistic title="Disk Usage" value={safeSystemStats.disk || 0} suffix="%" />
+              <Progress percent={safeSystemStats.disk || 0} showInfo={false} />
             </Card>
           </Col>
         </Row>
@@ -83,7 +136,15 @@ const SystemMetrics = () => {
 
       <Row gutter={16}>
         <Col span={12}>
-          <Card title="CPU Usage Over Time">
+          <Card 
+            title="CPU Usage Over Time"
+            style={{ 
+              background: 'var(--card-bg)',
+              border: '1px solid var(--border-color)'
+            }}
+            headStyle={{ color: 'var(--text-primary)' }}
+            bodyStyle={{ color: 'var(--text-primary)' }}
+          >
             <ResponsiveContainer width="100%" height={300}>
               <AreaChart data={cpuData}>
                 <CartesianGrid strokeDasharray="3 3" />
@@ -96,7 +157,15 @@ const SystemMetrics = () => {
           </Card>
         </Col>
         <Col span={12}>
-          <Card title="Memory Usage Over Time">
+          <Card 
+            title="Memory Usage Over Time"
+            style={{ 
+              background: 'var(--card-bg)',
+              border: '1px solid var(--border-color)'
+            }}
+            headStyle={{ color: 'var(--text-primary)' }}
+            bodyStyle={{ color: 'var(--text-primary)' }}
+          >
             <ResponsiveContainer width="100%" height={300}>
               <LineChart data={memoryData}>
                 <CartesianGrid strokeDasharray="3 3" />
@@ -112,7 +181,15 @@ const SystemMetrics = () => {
 
       <Row gutter={16} style={{ marginTop: 16 }}>
         <Col span={24}>
-          <Card title="Network Traffic">
+          <Card 
+            title="Network Traffic"
+            style={{ 
+              background: 'var(--card-bg)',
+              border: '1px solid var(--border-color)'
+            }}
+            headStyle={{ color: 'var(--text-primary)' }}
+            bodyStyle={{ color: 'var(--text-primary)' }}
+          >
             <ResponsiveContainer width="100%" height={300}>
               <AreaChart data={networkData}>
                 <CartesianGrid strokeDasharray="3 3" />