Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ArchivPro - Solution d'Archivage Sécurisé</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| .document-preview { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .document-preview::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 66%; | |
| background: linear-gradient(to top, rgba(255,255,255,0.9), transparent); | |
| pointer-events: none; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-expanded { | |
| width: 250px; | |
| } | |
| .blur-effect { | |
| filter: blur(5px); | |
| transition: filter 0.3s ease; | |
| } | |
| .blur-effect:hover { | |
| filter: blur(0); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| /* Page specific styles */ | |
| .page { | |
| display: none; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| .nav-link { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link.active { | |
| background-color: rgba(30, 64, 175, 0.9); | |
| } | |
| .folder-structure li { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .folder-structure li:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 7px; | |
| width: 12px; | |
| height: 12px; | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| } | |
| .folder-item:before { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' /%3E%3C/svg%3E"); | |
| } | |
| .file-item:before { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' 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' /%3E%3C/svg%3E"); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar sidebar-expanded bg-blue-800 text-white flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-blue-700"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-archive text-2xl"></i> | |
| <span id="logo-text" class="text-xl font-bold">ArchivPro</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-white hover:text-blue-200"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 flex items-center space-x-3 bg-blue-700"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div id="user-info"> | |
| <div class="font-medium">Admin</div> | |
| <div class="text-xs text-blue-200">Administrateur</div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto py-2"> | |
| <div class="px-4 py-2 text-blue-200 text-sm font-medium">MENU PRINCIPAL</div> | |
| <a href="#" data-page="dashboard" class="nav-link active flex items-center space-x-3 px-4 py-3 text-white bg-blue-900"> | |
| <i class="fas fa-home w-6 text-center"></i> | |
| <span>Tableau de bord</span> | |
| </a> | |
| <a href="#" data-page="scan" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-upload w-6 text-center"></i> | |
| <span>Numériser</span> | |
| </a> | |
| <a href="#" data-page="archive" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-folder w-6 text-center"></i> | |
| <span>Archives</span> | |
| </a> | |
| <a href="#" data-page="search" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-search w-6 text-center"></i> | |
| <span>Recherche</span> | |
| </a> | |
| <a href="#" data-page="print" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-print w-6 text-center"></i> | |
| <span>Imprimer</span> | |
| </a> | |
| <div class="px-4 py-2 text-blue-200 text-sm font-medium mt-4">ADMINISTRATION</div> | |
| <a href="#" data-page="users" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-users w-6 text-center"></i> | |
| <span>Utilisateurs</span> | |
| </a> | |
| <a href="#" data-page="security" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-lock w-6 text-center"></i> | |
| <span>Sécurité</span> | |
| </a> | |
| <a href="#" data-page="settings" class="nav-link flex items-center space-x-3 px-4 py-3 text-white hover:bg-blue-700"> | |
| <i class="fas fa-cog w-6 text-center"></i> | |
| <span>Paramètres</span> | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t border-blue-700"> | |
| <button class="flex items-center space-x-3 text-white hover:text-blue-200"> | |
| <i class="fas fa-sign-out-alt w-6 text-center"></i> | |
| <span>Déconnexion</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h1 id="page-title" class="text-2xl font-bold text-gray-800">Tableau de bord</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard Page --> | |
| <div id="dashboard-page" class="page active"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Documents archivés</p> | |
| <h3 class="text-2xl font-bold">1,248</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-green-600"> | |
| <i class="fas fa-arrow-up"></i> 12% depuis le mois dernier | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in" style="animation-delay: 0.1s;"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Dossiers créés</p> | |
| <h3 class="text-2xl font-bold">56</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-folder text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-green-600"> | |
| <i class="fas fa-arrow-up"></i> 8% depuis le mois dernier | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in" style="animation-delay: 0.2s;"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Utilisateurs actifs</p> | |
| <h3 class="text-2xl font-bold">24</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-users text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-red-600"> | |
| <i class="fas fa-arrow-down"></i> 2% depuis le mois dernier | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 fade-in" style="animation-delay: 0.3s;"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Espace utilisé</p> | |
| <h3 class="text-2xl font-bold">45%</h3> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-database text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 45%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scanner Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <h2 class="text-xl font-bold mb-4">Numériser un document</h2> | |
| <div class="flex space-x-4 mb-6"> | |
| <button id="upload-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all"> | |
| <i class="fas fa-upload"></i> | |
| <span>Téléverser un document</span> | |
| </button> | |
| <button id="scan-btn" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all"> | |
| <i class="fas fa-scanner"></i> | |
| <span>Scanner depuis l'imprimante</span> | |
| </button> | |
| </div> | |
| <div id="upload-section" class="hidden border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> | |
| <p class="text-gray-600 mb-4">Glissez-déposez vos fichiers ici ou cliquez pour sélectionner</p> | |
| <input type="file" id="file-input" class="hidden" multiple> | |
| <label for="file-input" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded cursor-pointer"> | |
| Sélectionner des fichiers | |
| </label> | |
| <div class="mt-4 text-sm text-gray-500"> | |
| Formats supportés: PDF, DOCX, JPG, PNG (max 50MB) | |
| </div> | |
| </div> | |
| <div id="scan-section" class="hidden"> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| <p class="text-gray-700">Connectez-vous à une imprimante pour commencer la numérisation</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Type de document</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Noir et blanc</option> | |
| <option>Couleur</option> | |
| <option>Photo</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Résolution</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>300 dpi (standard)</option> | |
| <option>600 dpi (haute qualité)</option> | |
| <option>1200 dpi (très haute qualité)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Démarrer la numérisation</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-bold mb-4">Derniers documents</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-file-pdf text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Contrat Client XYZ</h4> | |
| <p class="text-sm text-gray-500">Ajouté aujourd'hui à 14:30</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-file-word text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Rapport Annuel 2023</h4> | |
| <p class="text-sm text-gray-500">Ajouté hier à 09:15</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-file-excel text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Budget Q3 2023</h4> | |
| <p class="text-sm text-gray-500">Ajouté le 15/06/2023</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-file-image text-red-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Plan Projet ABC</h4> | |
| <p class="text-sm text-gray-500">Ajouté le 10/06/2023</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-blue-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 font-medium flex items-center space-x-1"> | |
| <span>Voir tout</span> | |
| <i class="fas fa-chevron-right text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Document Preview --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Aperçu du document</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="document-preview bg-gray-100 rounded-lg p-4 h-96 overflow-y-auto"> | |
| <div class="bg-white p-6 shadow-inner"> | |
| <h3 class="text-2xl font-bold mb-4 text-center">CONTRAT DE SERVICES PROFESSIONNELS</h3> | |
| <p class="mb-4">ENTRE LES SOUSSIGNÉS :</p> | |
| <p class="mb-4">La société <strong>XYZ Corporation</strong>, dont le siège social est situé au 123 Avenue des Champs, 75000 Paris, immatriculée au RCS de Paris sous le numéro 123 456 789, représentée par Monsieur Jean Dupont, en sa qualité de Directeur Général,</p> | |
| <p class="mb-4">ET</p> | |
| <p class="mb-4">La société <strong>ABC Services</strong>, dont le siège social est situé au 456 Rue de la République, 69000 Lyon, immatriculée au RCS de Lyon sous le numéro 987 654 321, représentée par Madame Sophie Martin, en sa qualité de Présidente,</p> | |
| <p class="mb-4">IL A ÉTÉ CONVENU CE QUI SUIT :</p> | |
| <h4 class="text-xl font-bold mb-2">ARTICLE 1 - OBJET</h4> | |
| <p class="mb-4">Le présent contrat a pour objet de définir les conditions dans lesquelles XYZ Corporation confie à ABC Services la réalisation des prestations décrites en annexe 1.</p> | |
| <h4 class="text-xl font-bold mb-2">ARTICLE 2 - DURÉE</h4> | |
| <p class="mb-4">Le présent contrat prend effet à compter de la date de signature et aura une durée de douze (12) mois. Il sera renouvelable par tacite reconduction par périodes successives d'une année, sauf dénonciation par l'une ou l'autre des parties par lettre recommandée avec accusé de réception trois (3) mois avant son terme.</p> | |
| <div class="blur-effect"> | |
| <h4 class="text-xl font-bold mb-2">ARTICLE 3 - PRIX ET MODALITÉS DE PAIEMENT</h4> | |
| <p class="mb-4">Le prix des prestations est fixé à la somme de cinquante mille euros (50 000 €) hors taxes. Ce montant sera payé selon l'échéancier suivant :</p> | |
| <ul class="list-disc pl-6 mb-4"> | |
| <li>30% à la signature du contrat</li> | |
| <li>40% à mi-parcours</li> | |
| <li>30% à la réception des livrables finaux</li> | |
| </ul> | |
| <p class="mb-4">Les paiements seront effectués par virement bancaire dans les trente (30) jours suivant la réception de la facture.</p> | |
| <h4 class="text-xl font-bold mb-2">ARTICLE 4 - CONFIDENTIALITÉ</h4> | |
| <p class="mb-4">Les parties s'engagent à garder confidentiels tous les documents, informations et données échangés dans le cadre de l'exécution du présent contrat. Cette obligation de confidentialité subsistera pendant une durée de cinq (5) ans à compter de la fin du contrat.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-lock"></i> | |
| <span>Déverrouiller</span> | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-print"></i> | |
| <span>Imprimer</span> | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| Document sécurisé - Accès restreint | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <h3 class="font-bold mb-2">Métadonnées du document</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-500">Titre</label> | |
| <p class="font-medium">Contrat de Services Professionnels</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Type</label> | |
| <p class="font-medium">Contrat</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Date d'archivage</label> | |
| <p class="font-medium">15/06/2023 à 14:30</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Dossier</label> | |
| <p class="font-medium">Contrats / Clients</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Format</label> | |
| <p class="font-medium">A4 - Portrait</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Police</label> | |
| <p class="font-medium">Times New Roman, 12pt</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Pages</label> | |
| <p class="font-medium">8</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-500">Taille</label> | |
| <p class="font-medium">2.4 MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2">Actions</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2 justify-center"> | |
| <i class="fas fa-edit"></i> | |
| <span>Modifier les métadonnées</span> | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2 justify-center"> | |
| <i class="fas fa-share-alt"></i> | |
| <span>Partager</span> | |
| </button> | |
| <button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2 justify-center"> | |
| <i class="fas fa-trash-alt"></i> | |
| <span>Supprimer</span> | |
| </button> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-bold mb-2">Tags</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">contrat</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">client</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">juridique</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">2023</span> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Section --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-bold mb-4">Recherche avancée</h2> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher par mot-clé, titre, contenu..." class="pl-10 pr-4 py-3 w-full border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-4 text-gray-400"></i> | |
| <button class="absolute right-3 top-3 bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded-lg"> | |
| Rechercher | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Type de document</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Tous les types</option> | |
| <option>Contrat</option> | |
| <option>Facture</option> | |
| <option>Rapport</option> | |
| <option>Présentation</option> | |
| <option>Email</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Date</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Toutes les dates</option> | |
| <option>Aujourd'hui</option> | |
| <option>Cette semaine</option> | |
| <option>Ce mois</option> | |
| <option>Cette année</option> | |
| <option>Plage personnalisée...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Dossier</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Tous les dossiers</option> | |
| <option>Comptabilité</option> | |
| <option>Ressources Humaines</option> | |
| <option>Juridique</option> | |
| <option>Projets</option> | |
| <option>Clients</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-bold mb-2">Résultats de recherche (24)</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="py-3 px-4 text-left">Titre</th> | |
| <th class="py-3 px-4 text-left">Type</th> | |
| <th class="py-3 px-4 text-left">Dossier</th> | |
| <th class="py-3 px-4 text-left">Date</th> | |
| <th class="py-3 px-4 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Contrat Client XYZ</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Contrat</td> | |
| <td class="py-3 px-4">Clients / Contrats</td> | |
| <td class="py-3 px-4">15/06/2023</td> | |
| <td class="py-3 px-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-word text-blue-500"></i> | |
| <span>Annexe 1 - Spécifications</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Document</td> | |
| <td class="py-3 px-4">Clients / XYZ</td> | |
| <td class="py-3 px-4">10/06/2023</td> | |
| <td class="py-3 px-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-excel text-green-500"></i> | |
| <span>Budget Projet XYZ</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Feuille de calcul</td> | |
| <td class="py-3 px-4">Projets / XYZ</td> | |
| <td class="py-3 px-4">05/06/2023</td> | |
| <td class="py-3 px-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| Affichage 1-3 sur 24 résultats | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded"> | |
| 1 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| 2 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| 3 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scan Page --> | |
| <div id="scan-page" class="page"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Numérisation de documents</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="flex space-x-4 mb-6"> | |
| <button id="upload-btn-scan" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all"> | |
| <i class="fas fa-upload"></i> | |
| <span>Téléverser un document</span> | |
| </button> | |
| <button id="scan-btn-scan" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition-all"> | |
| <i class="fas fa-scanner"></i> | |
| <span>Scanner depuis l'imprimante</span> | |
| </button> | |
| </div> | |
| <div id="upload-section-scan" class="hidden border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> | |
| <p class="text-gray-600 mb-4">Glissez-déposez vos fichiers ici ou cliquez pour sélectionner</p> | |
| <input type="file" id="file-input-scan" class="hidden" multiple> | |
| <label for="file-input-scan" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded cursor-pointer"> | |
| Sélectionner des fichiers | |
| </label> | |
| <div class="mt-4 text-sm text-gray-500"> | |
| Formats supportés: PDF, DOCX, JPG, PNG (max 50MB) | |
| </div> | |
| </div> | |
| <div id="scan-section-scan" class="hidden"> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| <p class="text-gray-700">Connectez-vous à une imprimante pour commencer la numérisation</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Type de document</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Noir et blanc</option> | |
| <option>Couleur</option> | |
| <option>Photo</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Résolution</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>300 dpi (standard)</option> | |
| <option>600 dpi (haute qualité)</option> | |
| <option>1200 dpi (très haute qualité)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Format de sortie</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>PDF (recommandé)</option> | |
| <option>JPEG</option> | |
| <option>PNG</option> | |
| <option>TIFF</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Démarrer la numérisation</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <h3 class="font-bold mb-2">Paramètres avancés</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span>Reconnaissance automatique du texte (OCR)</span> | |
| </label> | |
| <p class="text-sm text-gray-500 mt-1">Activez cette option pour extraire le texte des documents scannés</p> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span>Correction automatique des marges</span> | |
| </label> | |
| <p class="text-sm text-gray-500 mt-1">Ajuste automatiquement les marges pour un meilleur rendu</p> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span>Optimisation de la qualité</span> | |
| </label> | |
| <p class="text-sm text-gray-500 mt-1">Améliore la lisibilité des documents anciens ou de mauvaise qualité</p> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-blue-600"> | |
| <span>Détection automatique du format</span> | |
| </label> | |
| <p class="text-sm text-gray-500 mt-1">Reconnaît automatiquement le format du document (A4, A3, etc.)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2">Historique des scans</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Scan_20230615_1430.pdf</span> | |
| </div> | |
| <span class="text-sm text-gray-500">15/06/2023</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-image text-blue-500"></i> | |
| <span>Scan_20230610_0915.jpg</span> | |
| </div> | |
| <span class="text-sm text-gray-500">10/06/2023</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Scan_20230605_1045.pdf</span> | |
| </div> | |
| <span class="text-sm text-gray-500">05/06/2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-bold mb-4">Documents récemment numérisés</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="py-3 px-4 text-left">Nom du fichier</th> | |
| <th class="py-3 px-4 text-left">Type</th> | |
| <th class="py-3 px-4 text-left">Date</th> | |
| <th class="py-3 px-4 text-left">Taille</th> | |
| <th class="py-3 px-4 text-left">Statut</th> | |
| <th class="py-3 px-4 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Contrat_XYZ_2023.pdf</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">PDF</td> | |
| <td class="py-3 px-4">15/06/2023 14:30</td> | |
| <td class="py-3 px-4">2.4 MB</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Archivé</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-word text-blue-500"></i> | |
| <span>Rapport_Annuel_2023.docx</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">DOCX</td> | |
| <td class="py-3 px-4">10/06/2023 09:15</td> | |
| <td class="py-3 px-4">1.8 MB</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Archivé</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-image text-yellow-500"></i> | |
| <span>Plan_Projet_ABC.jpg</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">JPG</td> | |
| <td class="py-3 px-4">05/06/2023 10:45</td> | |
| <td class="py-3 px-4">3.2 MB</td> | |
| <td class="py-3 px-4"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">En attente</span> | |
| </td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-archive"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Archive Page --> | |
| <div id="archive-page" class="page"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold">Gestion des archives</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>Nouveau dossier</span> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-3">Structure des dossiers</h3> | |
| <ul class="folder-structure space-y-2"> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">Archives</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| <ul class="mt-2 ml-4 space-y-2"> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span>Comptabilité</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| </li> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span>Clients</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| <ul class="mt-2 ml-4 space-y-2"> | |
| <li class="folder-item"> | |
| <span>Contrats</span> | |
| </li> | |
| <li class="folder-item"> | |
| <span>Factures</span> | |
| </li> | |
| <li class="file-item"> | |
| <span>XYZ Corporation</span> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span>Juridique</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| </li> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span>Projets</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| <ul class="mt-2 ml-4 space-y-2"> | |
| <li class="file-item"> | |
| <span>Projet ABC</span> | |
| </li> | |
| <li class="file-item"> | |
| <span>Projet XYZ</span> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="folder-item"> | |
| <div class="flex items-center justify-between"> | |
| <span>Ressources Humaines</span> | |
| <i class="fas fa-chevron-down text-xs text-gray-500"></i> | |
| </div> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-3"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium">Contenu du dossier : <span class="font-bold">Clients / Contrats</span></h3> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher dans ce dossier..." class="pl-8 pr-4 py-1 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-2 top-2 text-gray-400"></i> | |
| </div> | |
| <button class="text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-sort-alpha-down"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-th-list"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="py-3 px-4 text-left">Nom</th> | |
| <th class="py-3 px-4 text-left">Type</th> | |
| <th class="py-3 px-4 text-left">Date de modification</th> | |
| <th class="py-3 px-4 text-left">Taille</th> | |
| <th class="py-3 px-4 text-left">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Contrat_Client_XYZ_2023.pdf</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Document PDF</td> | |
| <td class="py-3 px-4">15/06/2023 14:30</td> | |
| <td class="py-3 px-4">2.4 MB</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-word text-blue-500"></i> | |
| <span>Annexe_1_Spécifications.docx</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Document Word</td> | |
| <td class="py-3 px-4">10/06/2023 09:15</td> | |
| <td class="py-3 px-4">1.8 MB</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-excel text-green-500"></i> | |
| <span>Budget_Projet_XYZ.xlsx</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Feuille de calcul</td> | |
| <td class="py-3 px-4">05/06/2023 10:45</td> | |
| <td class="py-3 px-4">1.2 MB</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-image text-yellow-500"></i> | |
| <span>Plan_Projet_ABC.jpg</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Image</td> | |
| <td class="py-3 px-4">01/06/2023 16:20</td> | |
| <td class="py-3 px-4">3.2 MB</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| <span>Conditions_Générales.pdf</span> | |
| </div> | |
| </td> | |
| <td class="py-3 px-4">Document PDF</td> | |
| <td class="py-3 px-4">25/05/2023 11:10</td> | |
| <td class="py-3 px-4">0.8 MB</td> | |
| <td class="py-3 px-4"> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-gray-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| Affichage 1-5 sur 12 documents | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded"> | |
| 1 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| 2 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| 3 | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-xl font-bold mb-4">Statistiques des archives</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-3">Utilisation de l'espace</h3> | |
| <div class="flex items-center justify-center"> | |
| <div class="relative w-40 h-40"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <!-- Background circle --> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#e5e7eb" stroke-width="10"/> | |
| <!-- Progress circle --> | |
| <circle cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="10" stroke-dasharray="283" stroke-dashoffset="155" stroke-linecap="round" transform="rotate(-90 50 50)"/> | |
| <!-- Text --> | |
| <text x="50" y="50" text-anchor="middle" dy=".3em" font-size="16" font-weight="bold">45%</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center"> | |
| <p class="text-sm text-gray-600">45% de 500 Go utilisés</p> | |
| <p class="text-sm text-gray-600">225 Go sur 500 Go</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-3">Répartition par type</h3> | |
| <div class="flex items-center justify-center"> | |
| <div class="relative w-40 h-40"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <!-- PDF --> | |
| <path d="M50 50 L50 0 A50 50 0 0 1 82 18 Z" fill="#ef4444"/> | |
| <!-- DOCX --> | |
| <path d="M50 50 L82 18 A50 50 0 0 1 95 50 Z" fill="#3b82f6"/> | |
| <!-- XLSX --> | |
| <path d="M50 50 L95 50 A50 50 0 0 1 82 82 Z" fill="#22c55e"/> | |
| <!-- JPG/PNG --> | |
| <path d="M50 50 L82 82 A50 50 0 0 1 50 100 Z" fill="#f59e0b"/> | |
| <!-- Autres --> | |
| <path d="M50 50 L50 100 A50 50 0 0 1 18 82 Z" fill="#94a3b8"/> | |
| <path d="M50 50 L18 82 A50 50 0 0 1 0 50 Z" fill="#64748b"/> | |
| <path d="M50 50 L0 50 A50 50 0 0 1 18 18 Z" fill="#475569"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full"></div> | |
| <span class="text-sm">PDF (42%)</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-blue-500 rounded-full"></div> | |
| <span class="text-sm">DOCX (23%)</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> | |
| <span class="text-sm">XLSX (15%)</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> | |
| <span class="text-sm">JPG/PNG (12%)</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-gray-400 rounded-full"></div> | |
| <span class="text-sm">Autres (8%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-3">Activité récente</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mt-1"> | |
| <i class="fas fa-user text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Jean Dupont</span> a ajouté <span class="font-medium">Contrat_XYZ.pdf</span></p> | |
| <p class="text-xs text-gray-500">il y a 2 heures</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mt-1"> | |
| <i class="fas fa-user text-green-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Sophie Martin</span> a créé le dossier <span class="font-medium">Projet ABC</span></p> | |
| <p class="text-xs text-gray-500">hier à 16:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mt-1"> | |
| <i class="fas fa-user text-purple-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Pierre Durand</span> a supprimé <span class="font-medium">Ancien_Contrat.doc</span></p> | |
| <p class="text-xs text-gray-500">hier à 09:15</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mt-1"> | |
| <i class="fas fa-user text-yellow-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Marie Lambert</span> a modifié <span class="font-medium">Budget_Q3.xlsx</span></p> | |
| <p class="text-xs text-gray-500">15/06/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Page --> | |
| <div id="search-page" class="page"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Recherche avancée</h2> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher par mot-clé, titre, contenu..." class="pl-10 pr-4 py-3 w-full border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-4 text-gray-400"></i> | |
| <button class="absolute right-3 top-3 bg-blue-600 hover:bg-blue-700 text-white py-1 px-4 rounded-lg"> | |
| Rechercher | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Type de document</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Tous les types</option> | |
| <option>Contrat</option> | |
| <option>Facture</option> | |
| <option>Rapport</option> | |
| <option>Présentation</option> | |
| <option>Email</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Date</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Toutes les dates</option> | |
| <option>Aujourd'hui</option> | |
| <option>Cette semaine</option> | |
| <option>Ce mois</option> | |
| <option>Cette année</option> | |
| <option>Plage personnalisée...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Dossier</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Tous les dossiers</option> | |
| <option>Comptabilité</option> | |
| <option>Ressources Humaines</option> | |
| <option>Juridique</option> | |
| <option>Projets</option> | |
| <option>Clients</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Auteur</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Tous les auteurs</option> | |
| <option>Jean Dupont</option> | |
| <option>Sophie Martin</option> | |
| <option>Pierre Durand</option> | |
| <option>Marie Lambert</option> | |
| </select> | |
| </html> |