add downloadable content in vault

src/components/ui/DocumentObject.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Download } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+import type { Document } from '@/types/Document';
+import { Button } from './Button';
+import { useDocumentDownload } from '@/hooks/useDocumentDownload';
+
+interface DocumentObjectProps {
+    doc: Document;
+}
+
+export const DocumentObject: React.FC<DocumentObjectProps> = ({ doc }) => {
+    // 2. On initialise le Hook pour ce document spécifique
+    const { downloadFile, isDownloading } = useDocumentDownload();
+
+    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 (
+        <tr key={doc.id} className={cn('hover:bg-amber-50 hover:dark:bg-slate-600 cursor-default transition-all duration-300')}>
+            <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 dark:text-slate-100">{doc.title}</div>
+                        <div className="text-xs text-slate-500 dark:text-slate-400">{doc.file} • 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 dark:text-slate-400">
+                {/* Petit conseil d'optimisation : utiliser une fonction date pour éviter les crashs si doc.created est mal formaté */}
+                {doc.created ? `${doc.created.split(" ")[0]} ${doc.created.split(" ")[1]?.substring(0,5)}` : 'N/A'}
+            </td>
+            <td className="px-6 py-4 items-center">
+                {/* 3. On relie le bouton à l'état et à la fonction du Hook */}
+                <Button 
+                    className="text-blue-900 dark:text-blue-400 hover:text-blue-700 px-3 py-1.5 flex ml-auto" 
+                    size='sm'
+                    leftIcon={<Download className="w-4 h-4" />}
+                    onClick={() => downloadFile(doc)}
+                    isLoading={isDownloading} // Si votre composant Button supporte cette prop !
+                    disabled={isDownloading}
+                > 
+                    {isDownloading ? 'Téléchargement...' : 'Télécharger'}
+                </Button>
+            </td>
+        </tr>
+    );
+};

src/components/ui/TicketRow.tsx

@@ -11,7 +11,7 @@ export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
   return (
     <div 
       onClick={() => onClick(ticket.id)}
-      className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
+      className="p-6 flex items-center justify-between hover:bg-amber-50 transition-colors"
     >
       <div className="space-y-1">
         <div className="flex items-center space-x-3">

src/components/widgets/DocumentsWidget.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useDocuments } from '@/hooks/useDocuments';
+import {DocumentObject} from '@ui/DocumentObject'
 import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
 
 interface DocumentsWidgetProps {
     onSelectDocument: (id: string) => void;
@@ -8,19 +10,10 @@ interface DocumentsWidgetProps {
 
 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">
+        <Card className='pb-7'>
             <table className="min-w-full divide-y divide-slate-200">
-                <thead className="bg-slate-50">
+                <thead>
                     <tr>
                         <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
                             Nom du fichier
@@ -36,41 +29,13 @@ export function DocumentsWidget(){
                         </th>
                     </tr>
                 </thead>
-                <tbody className="bg-white divide-y divide-slate-200">
+                <tbody className="divide-y divide-slate-200">
                     {documents.map((doc) => (
-                        <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
+                        <DocumentObject doc={doc}></DocumentObject>
-                            <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>
+        </Card>
     );
 };
 

src/components/widgets/TicketsWidget.tsx

@@ -13,7 +13,7 @@ export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket })
   const { tickets, isLoading, error } = useTickets();
 
   return (
-    <Card>
+    <Card className='pb-7'>
       <CardContent className="p-0">
         {/* En-tête du Widget */}
         <div className="p-6 border-b border-slate-100">

src/hooks/useDocumentDownload.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+// Importez votre instance PocketBase
+import {pb} from '@/services/pocketbase'; 
+import type { Document } from '@/types/Document';
+
+export function useDocumentDownload() {
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const downloadFile = async (doc: Document) => {
+        try {
+            setIsDownloading(true);
+            setError(null);
+
+            // 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
+            // Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
+            const fileToken = await pb.files.getToken();
+
+            // 2. Générer l'URL du fichier
+            // ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
+            const fileUrl = pb.files.getUrl(doc, doc.file);
+            
+            // 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
+            const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
+
+            // 4. Créer un lien invisible pour forcer le navigateur à télécharger
+            const link = document.createElement("a");
+            link.href = downloadUrl;
+            // On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
+            link.setAttribute("download", doc.title || "document_aegis.pdf"); 
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+        } catch (err) {
+            console.error("Erreur lors du téléchargement sécurisé :", err);
+            setError("Accès refusé au coffre-fort documentaire.");
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    return { downloadFile, isDownloading, error };
+}

src/pages/DocumentVault.tsx

@@ -1,4 +1,5 @@
 import { Card } from '@/components/ui/Card';
+import { Input } from '@/components/ui/Input';
 import PageHeader from '@/components/ui/PageHeader';
 import DocumentsWidget from '@/components/widgets/DocumentsWidget';
 import { useState } from 'react';
@@ -13,15 +14,6 @@ const mockDocuments = [
 export default function DocumentVault() {
   const [searchTerm, setSearchTerm] = useState('');
 
-  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="font-sans relative min-h-[calc(100vh-4rem)]">
 
@@ -40,19 +32,17 @@ export default function DocumentVault() {
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
               </svg>
             </div>
-            <input
+            <Input
               type="text"
               placeholder="Rechercher un document, une facture..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
             />
           </div>
         </div>
 
         {/* Liste des Documents (La Carte) */}
         <DocumentsWidget></DocumentsWidget>
-
       </main>
     </div >
   );

src/types/Document.ts

@@ -1,7 +1,11 @@
 export interface Document {
     id: string;
-  title: string;
+    collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
-  category: string;
+    collectionName: string; // (ex: 'aegis_documents_vault')
-  file: File;
     created: string;
+    updated: string;
+    title: string;
+    file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
+    category: string;
+    company?: string; // L'ID du client (Relation)
 }