change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
+
+export const Analytics: React.FC = () => {
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-8">
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
+
+      <Card>
+        <CardHeader className="bg-slate-50">
+          <h3 className="text-xl font-bold text-slate-900">Télémétrie & Analytics</h3>
+          <p className="text-sm text-slate-500">Données réseau en temps réel</p>
+        </CardHeader>
+        
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
+              <p className="text-2xl font-bold text-emerald-600">100%</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
+              <p className="text-2xl font-bold text-slate-900">14%</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
+              <p className="text-2xl font-bold text-slate-900">1.2 TB</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
+              <p className="text-2xl font-bold text-blue-900">3,492</p>
+            </div>
+          </div>
+          
+          {/* Représentation visuelle du graphe */}
+          <h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
+          <div className="h-48 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
+            {[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
+              <div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Analytics;