refact & cleanup : Sidebar, Button, card, EmptyState, Loader, ServiceObject, StatusBadge, UptameObject, BackupWidget, SecurityWidget, ServicesWidget, SupportCtaWidget, UptimeWidget, DashboardLayout

src/components/widgets/SecurityWidget.tsx

@@ -1,23 +1,34 @@
-export default function SecurityWidget() {
-  return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-      <h2 className="text-lg font-semibold text-slate-900 mb-4">Posture de Sécurité</h2>
-      
-      <div className="flex items-baseline space-x-2 mb-4">
-        <span className="text-3xl font-bold text-slate-900">1,432</span>
-        <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
-      </div>
+import { Card, CardContent } from '@/components/ui/Card';
 
-      <div className="space-y-3">
-        <div className="flex justify-between items-center text-sm">
-          <span className="text-slate-600">Bouclier Cloudflare WAF</span>
-          <span className="text-emerald-500 font-medium">Actif</span>
+interface SecurityWidgetProps {
+  onClick?: () => void;
+}
+
+export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
+  return (
+    <Card 
+      onClick={onClick}
+      className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
+    >
+      <CardContent className="p-6">
+        <h2 className="text-lg font-semibold text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">Posture de Sécurité</h2>
+        
+        <div className="flex items-baseline space-x-2 mb-4">
+          <span className="text-3xl font-bold text-slate-900">1,432</span>
+          <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
         </div>
-        <div className="flex justify-between items-center text-sm">
-          <span className="text-slate-600">Dernier audit de vulnérabilité</span>
-          <span className="text-slate-900 font-medium">Il y a 12 jours</span>
+
+        <div className="space-y-3">
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-slate-600">Bouclier Cloudflare WAF</span>
+            <span className="text-emerald-500 font-medium">Actif</span>
+          </div>
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-slate-600">Dernier audit de vulnérabilité</span>
+            <span className="text-slate-900 font-medium">Il y a 12 jours</span>
+          </div>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }