add useDocuments and load saved documents in DocumentsVault

2026-07-31 21:37:56 +02:00
parent c7389d747b
commit 6b93d21d19
16 changed files with 280 additions and 294 deletions
@@ -4,6 +4,8 @@ import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-
 import { cn } from '@/utils/utils';
 import { Card } from '@/components/ui/Card';
 import { NEUMORPHISM } from '@/styles/Neumorphism';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemeToggle } from '@ui/ThemeToggle';

 interface SidebarProps {
  onLogout: () => void;
@@ -21,20 +23,21 @@ const NAVIGATION_ITEMS = [


 export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
+  const { isDark, toggleTheme } = useTheme();
  return (
    <Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
      {/* 1. EN-TÊTE / LOGO */}
      <div className="flex items-center gap-4 mb-10 px-2">
        {/* Petit badge logo avec effet creusé */}
        <div className={cn(
-          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
          "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
        )}>
-          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500" />
+          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
        </div>
        <div>
-          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none">AEGIS</h1>
-          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">by GISE</span>
+          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
        </div>
      </div>

@@ -52,7 +55,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
                  "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
                  "bg-[#e8e8e8] dark:bg-[#1e293b]",
                  isActive
-                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "!text-blue-600 dark:!text-blue-400 font-black")
+                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
                    : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
                )
              }
@@ -74,6 +77,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
        })}
      </nav>

+      <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
      {/* 3. ZONE DE DÉCONNEXION */}
      <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
        <button
@@ -12,7 +12,7 @@ import { NEUMORPHISM } from '@/styles/Neumorphism';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
  // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
-  variant?: 'raised' | 'flat'|'digged';
+  variant?: 'raised' | 'flat'|'digged'|'prophunt';
 }

 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -21,11 +21,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
      ref={ref}
      className={cn(
        // Style de base
-        "rounded-3xl border-none transition-[background-color,box-shadow] duration-300 ease-in-out flex flex-col overflow-hidden",
+        "rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
        "bg-[#e8e8e8] dark:bg-[#1e293b]",
        // Relief neumorphique (par défaut)
        variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
        variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
+        variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
        // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
        variant === 'flat' && "border border-black/5 dark:border-white/10",
        className
@@ -9,7 +9,7 @@ interface ServiceObjectProps {

 export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
  return (
-    <Card variant= 'digged' className="p-4 rounded-lg border border-slate-100 flex flex-col">
+    <Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
      <div className='flex flex-row justify-between'>
        <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
        {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
@@ -0,0 +1,52 @@
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@utils/utils";
+
+interface ThemeToggleProps {
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
+  
+  const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
+  const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
+  
+  const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
+  const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
+
+  return (
+    <button 
+      onClick={toggleTheme}
+      // 1. On ajoute la transition globale sur le fond du bouton principal
+      className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
+      aria-label="Basculer le thème"
+    >
+      {/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
+      <div className={cn(
+        "absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
+        lightInset, darkInset
+      )}></div>
+
+      {/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
+      <div className={cn(
+        "absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
+        "transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
+        lightExtrude, darkExtrude,
+        isDark ? "translate-x-10" : "translate-x-0"
+      )}>
+        
+        {/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
+        <Sun className={cn(
+          "absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
+        )} strokeWidth={2.5} />
+        
+        <Moon className={cn(
+          "absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
+        )} strokeWidth={2.5} />
+        
+      </div>
+    </button>
+  );
+}
@@ -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>
  );
 };
@@ -0,0 +1,77 @@
+import React from 'react';
+import { useDocuments } from '@/hooks/useDocuments';
+import { Button } from '../ui/Button';
+
+interface DocumentsWidgetProps {
+    onSelectDocument: (id: string) => void;
+}
+
+export function DocumentsWidget(){
+    const { documents } = useDocuments();
+
+    const getCategoryBadge = (category: string) => {
+        switch (category) {
+            case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
+            case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
+            case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
+            default: return 'bg-blue-50 text-blue-700 border-blue-200';
+        }
+    };
+    return (
+        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+            <table className="min-w-full divide-y divide-slate-200">
+                <thead className="bg-slate-50">
+                    <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Nom du fichier
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Catégorie
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Ajouté le
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Action
+                        </th>
+                    </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-slate-200">
+                    {documents.map((doc) => (
+                        <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
+                            <td className="px-6 py-4 whitespace-nowrap">
+                                <div className="flex items-center">
+                                    <svg className="shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                    </svg>
+                                    <div>
+                                        <div className="text-sm font-medium text-slate-900">{doc.title}</div>
+                                        <div className="text-xs text-slate-500">{doc.file.size} • PDF</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap">
+                                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
+                                    {doc.category}
+                                </span>
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
+                                {doc.created.split(" ")[0]+" "+doc.created.split(" ")[1].split(":")[0]+":"+doc.created.split(" ")[1].split(":")[1]}
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <Button className="text-blue-900 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded flex items-center justify-end ml-auto transition-colors">
+                                    <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                    </svg>
+                                    Télécharger
+                                </Button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default DocumentsWidget;
@@ -19,7 +19,7 @@ export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
  return (
    <div
      className={cn(
-        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-300 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
        isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
      )}
    >
@@ -10,8 +10,8 @@ export default function UptimeWidget() {
  return (
    <Card>
      <CardContent className="p-6 flex flex-col h-full">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4">État des Services & SLA</h2>
-        
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>
+
        {/* 1. Gestion de l'erreur */}
        {error && (
          <EmptyState message={error} className="text-red-500 not-italic font-medium" />
@@ -26,13 +26,15 @@ export default function UptimeWidget() {
        )}

        {/* 4. Affichage des données */}
+        <table className="divide-y divide-slate-100 table-auto">
        {!isLoading && !error && nodes.length > 0 && (
-          <div className="divide-y divide-slate-100 flex-1">
-            {nodes.map((node) => (
-              <UptimeObject key={node.id} node={node} />
-            ))}
-          </div>
+            <tbody className=''>
+              {nodes.map((node) => (
+                <UptimeObject key={node.id} node={node} />
+              ))}
+            </tbody>
        )}
+        </table>
      </CardContent>
    </Card>
  );