Fix: Implement public status page functionality

application/src/components/public/CurrentStatusSection.tsx

@@ -1,6 +1,6 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Shield, Clock } from 'lucide-react';
+import { Shield, Clock, CheckCircle, AlertTriangle, XCircle, Wrench } from 'lucide-react';
 import { format } from 'date-fns';
 import { OperationalPageRecord } from '@/types/operational.types';
 import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
@@ -75,31 +75,82 @@ const getStatusColor = (status: OperationalPageRecord['status']) => {
   }
 };
 
+const getStatusIcon = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return <CheckCircle className="h-6 w-6 text-green-500" />;
+    case 'degraded':
+      return <AlertTriangle className="h-6 w-6 text-yellow-500" />;
+    case 'maintenance':
+      return <Wrench className="h-6 w-6 text-blue-500" />;
+    case 'major_outage':
+      return <XCircle className="h-6 w-6 text-red-500" />;
+    default:
+      return <Shield className="h-6 w-6 text-muted-foreground" />;
+  }
+};
+
+const getStatusBackground = (status: OperationalPageRecord['status']) => {
+  switch (status) {
+    case 'operational':
+      return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+    case 'degraded':
+      return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
+    case 'maintenance':
+      return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
+    case 'major_outage':
+      return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
+    default:
+      return 'bg-gray-50 dark:bg-gray-900/20 border-gray-200 dark:border-gray-800';
+  }
+};
+
 export const CurrentStatusSection = ({ page, components, services }: CurrentStatusSectionProps) => {
   const actualStatus = getActualStatus(components, services);
+  const displayStatus = actualStatus; // Use actual status for real-time accuracy
   
   return (
-    <Card className="mb-8 bg-card border-border">
+    <Card className={`mb-8 border-2 ${getStatusBackground(displayStatus)}`}>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-card-foreground">
+        <CardTitle className="flex items-center gap-3 text-card-foreground text-xl">
-          <Shield className="h-5 w-5" />
+          <Shield className="h-6 w-6" />
-          Current Status
+          System Status
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-6">
-        <div className="flex items-center gap-3 mb-4">
+        <div className={`flex items-center justify-between p-6 rounded-lg border-2 ${getStatusBackground(displayStatus)}`}>
-          <div className={`h-3 w-3 rounded-full ${
+          <div className="flex items-center gap-4">
-            actualStatus === 'operational' ? 'bg-green-500' :
+            {getStatusIcon(displayStatus)}
-            actualStatus === 'degraded' ? 'bg-yellow-500' :
+            <div>
-            actualStatus === 'maintenance' ? 'bg-blue-500' : 'bg-red-500'
+              <h3 className={`text-2xl font-bold ${getStatusColor(displayStatus)}`}>
-          }`}></div>
+                {getStatusMessage(displayStatus)}
-          <span className={`text-lg font-medium ${getStatusColor(actualStatus)}`}>
+              </h3>
-            {getStatusMessage(actualStatus)}
+              <p className="text-sm text-muted-foreground mt-1">
-          </span>
+                Status automatically updated based on component health
+              </p>
             </div>
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          </div>
+          <div className={`px-4 py-2 rounded-full text-sm font-medium ${
+            displayStatus === 'operational' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
+            displayStatus === 'degraded' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
+            displayStatus === 'maintenance' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
+            'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+          }`}>
+            {displayStatus === 'operational' ? 'All Systems Operational' :
+             displayStatus === 'degraded' ? 'Degraded Performance' :
+             displayStatus === 'maintenance' ? 'Under Maintenance' : 'Major Outage'}
+          </div>
+        </div>
+        
+        <div className="flex items-center justify-between text-sm text-muted-foreground border-t pt-4">
+          <div className="flex items-center gap-2">
             <Clock className="h-4 w-4" />
-          <span>Last updated {format(new Date(page.updated), 'MMM dd, yyyy HH:mm')} UTC</span>
+            <span>Last updated: {format(new Date(), 'MMM dd, yyyy HH:mm')} UTC</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span>Live status monitoring</span>
+          </div>
         </div>
       </CardContent>
     </Card>