add downloadable content in vault

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 >
   );