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,59 @@
+import React from 'react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
+
+// On pourrait extraire ces données dans un Custom Hook plus tard
+const BACKUP_HISTORY = [
+  { date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
+  { date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
+  { date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
+  { date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
+];
+
+export const Backups: 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">Historique des Sauvegardes PRA</h3>
+          <p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
+        </CardHeader>
+        
+        {/* On retire le padding sur le content pour que le tableau touche les bords */}
+        <CardContent className="p-0 overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-200">
+            <thead className="bg-white">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
+                <th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-slate-100">
+              {BACKUP_HISTORY.map((bkp, i) => (
+                <tr key={i} className="hover:bg-slate-50 transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right">
+                     <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
+                      Succès (Chiffré)
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Backups;