Update README and documentation; refactor frontend components for improved structure and resilience

frontend/src/components/SystemMetrics.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import { Card, Row, Col, Statistic, Progress } from 'antd';
+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';
 
 const SystemMetrics = () => {
-  // Mock data for charts
+  const { systemStats, loading, error } = useSystemData();
+
+  // Mock data for charts (fallback when services are unavailable)
   const cpuData = [
     { time: '00:00', cpu: 25 },
     { time: '04:00', cpu: 30 },
@@ -34,26 +37,45 @@ const SystemMetrics = () => {
     { time: '24:00', in: 6, out: 4 }
   ];
 
+  if (loading) {
+    return (
+      <Card title="System Performance Metrics">
+        <div style={{ textAlign: 'center', padding: '50px' }}>
+          Loading metrics...
+        </div>
+      </Card>
+    );
+  }
+
   return (
     <div>
+      {error && (
+        <Alert
+          message="Metrics Unavailable"
+          description="Real-time metrics are not available. Showing sample data."
+          type="warning"
+          style={{ marginBottom: 16 }}
+        />
+      )}
+      
       <Card title="System Performance Metrics" style={{ marginBottom: 16 }}>
         <Row gutter={16}>
           <Col span={8}>
             <Card size="small">
-              <Statistic title="CPU Usage (24h)" value={45.2} suffix="%" />
-              <Progress percent={45.2} showInfo={false} />
+              <Statistic title="CPU Usage (24h)" value={systemStats.cpu || 0} suffix="%" />
+              <Progress percent={systemStats.cpu || 0} showInfo={false} />
             </Card>
           </Col>
           <Col span={8}>
             <Card size="small">
-              <Statistic title="Memory Usage (24h)" value={68.5} suffix="%" />
-              <Progress percent={68.5} showInfo={false} />
+              <Statistic title="Memory Usage (24h)" value={systemStats.memory || 0} suffix="%" />
+              <Progress percent={systemStats.memory || 0} showInfo={false} />
             </Card>
           </Col>
           <Col span={8}>
             <Card size="small">
-              <Statistic title="Disk Usage" value={32.1} suffix="%" />
-              <Progress percent={32.1} showInfo={false} />
+              <Statistic title="Disk Usage" value={systemStats.disk || 0} suffix="%" />
+              <Progress percent={systemStats.disk || 0} showInfo={false} />
             </Card>
           </Col>
         </Row>