add useDocuments and load saved documents in DocumentsVault

src/components/ui/UptimeObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { InfrastructureNode } from '@/types/InfrastructureNode';
 import { StatusBadge } from '@ui/StatusBadge';
+import { cn } from '@/utils/utils';
 
 interface UptimeObjectProps {
   node: InfrastructureNode;
@@ -9,24 +10,25 @@ interface UptimeObjectProps {
 export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
   return (
     // La "key" a été retirée d'ici, elle sera gérée par le parent
-    <div className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
-      
-      {/* Infos Serveur */}
-      <div>
-        <p className="font-medium text-slate-900">{node.label}</p>
-        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
-      </div>
-      
-      {/* Métriques & Badge */}
-      <div className="flex items-center space-x-6">
-        <div className="text-right">
-          <p className="text-xs text-slate-500">SLA</p>
-          <p className="text-sm font-semibold text-slate-900">{node.uptime_sla}</p>
-        </div>
-        
-        <StatusBadge status={node.status} />
-      </div>
+    <tr className={cn(
+      "hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
+    )}>
 
-    </div>
+      {/* Infos Serveur */}
+      <td className='p-2'>
+        <p className="font-medium text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.label}</p>
+        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
+      </td>
+
+      {/* Métriques & Badge */}
+      <td className='p-2'>
+        <p className="text-xs text-slate-500">SLA</p>
+        <p className="text-sm font-semibold text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.uptime_sla}</p>
+      </td>
+      <td className='text-right p-2'>
+        <StatusBadge status={node.status} />
+      </td>
+
+    </tr>
   );
 };