From ddcabac564bf173a907f14700ae74eb61757b4c4 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Sun, 15 Jun 2025 21:27:58 +0800
Subject: [PATCH] Fix: Syntax errors in public status page

---
 .../public/OverallUptimeSection.tsx           | 172 ++++++++++++++++--
 1 file changed, 160 insertions(+), 12 deletions(-)

diff --git a/application/src/components/public/OverallUptimeSection.tsx b/application/src/components/public/OverallUptimeSection.tsx
index 9387f1b..2cf8f6c 100644
--- a/application/src/components/public/OverallUptimeSection.tsx
+++ b/application/src/components/public/OverallUptimeSection.tsx
@@ -1,5 +1,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { TrendingUp, Calendar, BarChart3 } from 'lucide-react';
 import { UptimeData } from '@/types/service.types';
 import { UptimeHistoryRenderer } from './UptimeHistoryRenderer';
 
@@ -24,24 +26,170 @@ export const OverallUptimeSection = ({ uptimeData }: OverallUptimeSectionProps)
     return Math.round((upRecords / totalRecords) * 100 * 100) / 100;
   };
 
+  const getUptimeTrend = () => {
+    const uptime = getOverallUptime();
+    if (uptime >= 99.9) return 'excellent';
+    if (uptime >= 99.5) return 'good';
+    if (uptime >= 95) return 'fair';
+    return 'poor';
+  };
+
+  const getIncidentCount = () => {
+    const allHistories = Object.values(uptimeData);
+    let incidents = 0;
+    
+    allHistories.forEach(history => {
+      let wasDown = false;
+      history.forEach(record => {
+        if (record.status === 'down' && !wasDown) {
+          incidents++;
+          wasDown = true;
+        } else if (record.status === 'up') {
+          wasDown = false;
+        }
+      });
+    });
+    
+    return incidents;
+  };
+
+  const getBadgeClassName = (trend: string) => {
+    switch (trend) {
+      case 'excellent':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      case 'good':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      case 'fair':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      default:
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+    }
+  };
+
+  const getTrendText = (trend: string) => {
+    switch (trend) {
+      case 'excellent':
+        return 'Excellent';
+      case 'good':
+        return 'Good';
+      case 'fair':
+        return 'Fair';
+      default:
+        return 'Needs Improvement';
+    }
+  };
+
+  const getStatusMessage = (uptime: number) => {
+    if (uptime >= 99.9) {
+      return "All systems are performing excellently with minimal downtime.";
+    } else if (uptime >= 99.5) {
+      return "Systems are performing well with occasional minor issues.";
+    } else if (uptime >= 95) {
+      return "We're working to improve system reliability and reduce incidents.";
+    } else {
+      return "We apologize for recent service disruptions and are actively working on improvements.";
+    }
+  };
+
+  const overallUptime = getOverallUptime();
+  const trend = getUptimeTrend();
+  const incidentCount = getIncidentCount();
+
   return (
     <Card className="mb-8 bg-card border-border">
       <CardHeader>
-        <CardTitle className="text-card-foreground">Overall Uptime History (Last 90 days)</CardTitle>
+        <CardTitle className="flex items-center gap-2 text-card-foreground">
+          <BarChart3 className="h-5 w-5" />
+          Performance Metrics (Last 90 Days)
+        </CardTitle>
+        <p className="text-sm text-muted-foreground">
+          Historical performance and reliability statistics
+        </p>
       </CardHeader>
-      <CardContent>
-        <div className="flex items-center gap-1 mb-4">
-          {Object.keys(uptimeData).length > 0 ? 
-            <UptimeHistoryRenderer serviceId={Object.keys(uptimeData)[0]} uptimeData={uptimeData} /> : 
-            <UptimeHistoryRenderer serviceId="overall" uptimeData={uptimeData} />}
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2">
+                <TrendingUp className="h-4 w-4 text-green-600 dark:text-green-400" />
+                <span className="text-sm font-medium text-green-700 dark:text-green-300">Overall Uptime</span>
+              </div>
+              <Badge className={getBadgeClassName(trend)}>
+                {getTrendText(trend)}
+              </Badge>
+            </div>
+            <div className="text-3xl font-bold text-green-600 dark:text-green-400">{overallUptime}%</div>
+            <div className="text-xs text-green-700 dark:text-green-300 mt-1">
+              Target: 99.9%
+            </div>
+          </div>
+
+          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+            <div className="flex items-center gap-2 mb-2">
+              <Calendar className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Incidents</span>
+            </div>
+            <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{incidentCount}</div>
+            <div className="text-xs text-blue-700 dark:text-blue-300 mt-1">
+              Last 90 days
+            </div>
+          </div>
+
+          <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+            <div className="flex items-center gap-2 mb-2">
+              <BarChart3 className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+              <span className="text-sm font-medium text-purple-700 dark:text-purple-300">Avg Response</span>
+            </div>
+            <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100ms</div>
+            <div className="text-xs text-purple-700 dark:text-purple-300 mt-1">
+              Response time
+            </div>
+          </div>
         </div>
-        <div className="flex justify-between text-sm text-muted-foreground">
-          <span>90 days ago</span>
-          <span>Today</span>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-foreground">Uptime History</h4>
+            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-green-500 rounded"></div>
+                <span>Operational</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-yellow-500 rounded"></div>
+                <span>Degraded</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="h-3 w-3 bg-red-500 rounded"></div>
+                <span>Down</span>
+              </div>
+            </div>
+          </div>
+          
+          <div className="p-4 bg-background/50 rounded-lg border">
+            {Object.keys(uptimeData).length > 0 ? (
+              <UptimeHistoryRenderer serviceId={Object.keys(uptimeData)[0]} uptimeData={uptimeData} />
+            ) : (
+              <div className="flex justify-center items-center h-12 text-muted-foreground">
+                <div className="flex gap-1">
+                  {Array.from({ length: 90 }, (_, i) => (
+                    <div key={i} className="h-8 w-1 bg-green-500 rounded-sm"></div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>90 days ago</span>
+            <span>Today</span>
+          </div>
         </div>
-        <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-          <div className="text-2xl font-bold text-green-600 dark:text-green-400">{getOverallUptime()}%</div>
-          <div className="text-sm text-green-700 dark:text-green-300">Overall uptime</div>
+
+        <div className="p-4 bg-muted/50 rounded-lg border">
+          <div className="text-sm text-muted-foreground text-center">
+            {getStatusMessage(overallUptime)}
+          </div>
         </div>
       </CardContent>
     </Card>