v1.0 with SW PWA enabled

frontend/src/components/OverallStatus.tsx

@@ -0,0 +1,60 @@
+import { ServiceStatus } from '@/types/monitoring';
+import { cn } from '@/lib/utils';
+import { CheckCircle2, AlertTriangle, XCircle, HelpCircle } from 'lucide-react';
+
+interface OverallStatusProps {
+  status: ServiceStatus;
+  totalServices: number;
+  operationalServices: number;
+}
+
+const statusConfig = {
+  operational: {
+    icon: CheckCircle2,
+    title: 'Tous les systèmes sont opérationnels',
+    bgClass: 'bg-success/10 border-success/30',
+    iconClass: 'text-success',
+  },
+  degraded: {
+    icon: AlertTriangle,
+    title: 'Certains systèmes sont dégradés',
+    bgClass: 'bg-warning/10 border-warning/30',
+    iconClass: 'text-warning',
+  },
+  down: {
+    icon: XCircle,
+    title: 'Incident majeur en cours',
+    bgClass: 'bg-destructive/10 border-destructive/30',
+    iconClass: 'text-destructive',
+  },
+  unknown: {
+    icon: HelpCircle,
+    title: 'Status inconnu',
+    bgClass: 'bg-muted border-muted-foreground/20',
+    iconClass: 'text-muted-foreground',
+  },
+};
+
+export function OverallStatus({ status, totalServices, operationalServices }: OverallStatusProps) {
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <div className={cn(
+      'p-4 sm:p-6 rounded-xl border-2 animate-fade-in',
+      config.bgClass,
+    )}>
+      <div className="flex items-center gap-3 sm:gap-4">
+        <div className={cn('p-2 sm:p-3 rounded-full flex-shrink-0', config.bgClass)}>
+          <Icon className={cn('w-6 h-6 sm:w-8 sm:h-8', config.iconClass)} />
+        </div>
+        <div className="min-w-0">
+          <h2 className="text-base sm:text-xl font-bold leading-tight">{config.title}</h2>
+          <p className="text-sm sm:text-base text-muted-foreground">
+            {operationalServices}/{totalServices} services opérationnels
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}