gestion-tecaled / index.html
Timoxy's picture
Add 2 files
3e9a606 verified
Raw History Blame Contribute Delete
79.4 kB
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GMAO LED - Suivi des Maintenances</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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', dark: '#1F2937', light: '#F3F4F6', } } } } </script> <style> .sidebar { transition: all 0.3s ease; } .sidebar.collapsed { width: 70px; } .sidebar.collapsed .sidebar-text { display: none; } .sidebar.collapsed .logo-text { display: none; } .sidebar.collapsed .nav-item { justify-content: center; } .main-content { transition: all 0.3s ease; } .sidebar.collapsed + .main-content { margin-left: 70px; } .fade-in { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; } </style> </head> <body class="bg-gray-100 font-sans"> <div class="flex h-screen overflow-hidden"> <!-- Sidebar --> <div class="sidebar bg-dark text-white w-64 flex flex-col h-full fixed"> <div class="p-4 flex items-center border-b border-gray-700"> <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center"> <i class="fas fa-tv text-white"></i> </div> <span class="logo-text ml-3 text-xl font-bold">LED GMAO</span> </div> <div class="flex-1 overflow-y-auto custom-scrollbar py-4"> <nav> <div class="px-4"> <div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Menu Principal</div> <a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-primary rounded-lg mx-2 mb-1" onclick="showSection('dashboard')"> <i class="fas fa-tachometer-alt"></i> <span class="sidebar-text ml-3">Tableau de bord</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('clients')"> <i class="fas fa-users"></i> <span class="sidebar-text ml-3">Clients</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('ecrans')"> <i class="fas fa-tv"></i> <span class="sidebar-text ml-3">Écrans LED</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('dalles')"> <i class="fas fa-th-large"></i> <span class="sidebar-text ml-3">Dalles</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('modules')"> <i class="fas fa-microchip"></i> <span class="sidebar-text ml-3">Modules</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('interventions')"> <i class="fas fa-tools"></i> <span class="sidebar-text ml-3">Interventions</span> </a> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('rapports')"> <i class="fas fa-file-alt"></i> <span class="sidebar-text ml-3">Rapports</span> </a> </div> <div class="px-4 mt-6"> <div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Paramètres</div> <a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('parametres')"> <i class="fas fa-cog"></i> <span class="sidebar-text ml-3">Paramètres</span> </a> </div> </nav> </div> <div class="p-4 border-t border-gray-700"> <button onclick="toggleSidebar()" class="w-full flex items-center justify-center text-gray-300 hover:text-white"> <i class="fas fa-chevron-left"></i> <span class="sidebar-text ml-2">Réduire</span> </button> </div> </div> <!-- Main Content --> <div class="main-content flex-1 overflow-auto ml-64"> <!-- Top Navigation --> <header class="bg-white shadow-sm"> <div class="flex justify-between items-center px-6 py-4"> <div class="flex items-center"> <h1 class="text-xl font-semibold text-gray-800" id="page-title">Tableau de bord</h1> </div> <div class="flex items-center space-x-4"> <div class="relative"> <input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="relative"> <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> <i class="fas fa-bell"></i> <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> </button> </div> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold">JD</div> <span class="ml-2 text-gray-700">John Doe</span> </div> </div> </div> </header> <!-- Dashboard Section --> <div id="dashboard-section" class="p-6 fade-in"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> <div class="bg-white rounded-lg shadow p-6"> <div class="flex items-center"> <div class="p-3 rounded-full bg-blue-100 text-primary"> <i class="fas fa-users text-xl"></i> </div> <div class="ml-4"> <p class="text-gray-500">Clients</p> <h3 class="text-2xl font-bold" id="client-count">12</h3> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex items-center"> <div class="p-3 rounded-full bg-green-100 text-secondary"> <i class="fas fa-tv text-xl"></i> </div> <div class="ml-4"> <p class="text-gray-500">Écrans LED</p> <h3 class="text-2xl font-bold" id="ecran-count">24</h3> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex items-center"> <div class="p-3 rounded-full bg-yellow-100 text-yellow-500"> <i class="fas fa-tools text-xl"></i> </div> <div class="ml-4"> <p class="text-gray-500">Interventions</p> <h3 class="text-2xl font-bold" id="intervention-count">56</h3> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex items-center"> <div class="p-3 rounded-full bg-purple-100 text-purple-500"> <i class="fas fa-exclamation-triangle text-xl"></i> </div> <div class="ml-4"> <p class="text-gray-500">En attente</p> <h3 class="text-2xl font-bold" id="pending-count">5</h3> </div> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> <div class="bg-white rounded-lg shadow p-6"> <div class="flex justify-between items-center mb-4"> <h2 class="text-lg font-semibold">Dernières interventions</h2> <a href="#" class="text-primary text-sm" onclick="showSection('interventions')">Voir tout</a> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead> <tr> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écran</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr> <td class="px-4 py-3 whitespace-nowrap">15/06/2023</td> <td class="px-4 py-3 whitespace-nowrap">LED-2456</td> <td class="px-4 py-3 whitespace-nowrap">Remplacement module</td> <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span></td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap">10/06/2023</td> <td class="px-4 py-3 whitespace-nowrap">LED-1892</td> <td class="px-4 py-3 whitespace-nowrap">Réparation mécanique</td> <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Terminé</span></td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap">05/06/2023</td> <td class="px-4 py-3 whitespace-nowrap">LED-3345</td> <td class="px-4 py-3 whitespace-nowrap">Diagnostic</td> <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span></td> </tr> <tr> <td class="px-4 py-3 whitespace-nowrap">01/06/2023</td> <td class="px-4 py-3 whitespace-nowrap">LED-1123</td> <td class="px-4 py-3 whitespace-nowrap">Remplacement dalle</td> <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">En attente</span></td> </tr> </tbody> </table> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex justify-between items-center mb-4"> <h2 class="text-lg font-semibold">Écrans en maintenance</h2> <a href="#" class="text-primary text-sm" onclick="showSection('ecrans')">Voir tout</a> </div> <div class="space-y-4"> <div class="flex items-center p-3 border border-gray-200 rounded-lg"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary"> <i class="fas fa-tv"></i> </div> <div class="ml-4"> <h4 class="font-medium">LED-2456</h4> <p class="text-sm text-gray-500">Client: Société ABC</p> </div> <div class="ml-auto"> <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span> </div> </div> <div class="flex items-center p-3 border border-gray-200 rounded-lg"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary"> <i class="fas fa-tv"></i> </div> <div class="ml-4"> <h4 class="font-medium">LED-1123</h4> <p class="text-sm text-gray-500">Client: Entreprise XYZ</p> </div> <div class="ml-auto"> <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">En attente</span> </div> </div> <div class="flex items-center p-3 border border-gray-200 rounded-lg"> <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-primary"> <i class="fas fa-tv"></i> </div> <div class="ml-4"> <h4 class="font-medium">LED-3345</h4> <p class="text-sm text-gray-500">Client: Groupe 123</p> </div> <div class="ml-auto"> <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En cours</span> </div> </div> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex justify-between items-center mb-4"> <h2 class="text-lg font-semibold">Statistiques des interventions</h2> <div class="flex space-x-2"> <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg">Mois</button> <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">Trimestre</button> <button class="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded-lg">Année</button> </div> </div> <div class="h-64"> <!-- Chart placeholder --> <div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg"> <p class="text-gray-500">Graphique des interventions</p> </div> </div> </div> </div> <!-- Clients Section --> <div id="clients-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Gestion des Clients</h2> <button onclick="openClientModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Nouveau Client </button> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="p-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="relative w-64"> <input type="text" placeholder="Rechercher un client..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-filter"></i> Filtres </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-download"></i> Exporter </button> </div> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Téléphone</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écrans</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="clients-table-body"> <!-- Clients will be loaded here --> </tbody> </table> </div> <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> <div class="text-sm text-gray-500"> Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">24</span> clients </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Précédent </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Suivant </button> </div> </div> </div> </div> <!-- Ecrans Section --> <div id="ecrans-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Gestion des Écrans LED</h2> <button onclick="openEcranModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Nouvel Écran </button> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="p-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="relative w-64"> <input type="text" placeholder="Rechercher un écran..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="flex space-x-2"> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les clients</option> <option>Client A</option> <option>Client B</option> </select> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les statuts</option> <option>Actif</option> <option>En maintenance</option> <option>Hors service</option> </select> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-download"></i> Exporter </button> </div> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dimensions</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dalles</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernière intervention</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="ecrans-table-body"> <!-- Ecrans will be loaded here --> </tbody> </table> </div> <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> <div class="text-sm text-gray-500"> Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">24</span> écrans </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Précédent </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Suivant </button> </div> </div> </div> </div> <!-- Dalles Section --> <div id="dalles-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Gestion des Dalles</h2> <button onclick="openDalleModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Nouvelle Dalle </button> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="p-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="relative w-64"> <input type="text" placeholder="Rechercher une dalle..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="flex space-x-2"> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les écrans</option> <option>LED-2456</option> <option>LED-1892</option> </select> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les statuts</option> <option>Fonctionnelle</option> <option>En réparation</option> <option>Hors service</option> </select> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-download"></i> Exporter </button> </div> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Écran</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modules</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernière intervention</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="dalles-table-body"> <!-- Dalles will be loaded here --> </tbody> </table> </div> <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> <div class="text-sm text-gray-500"> Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">48</span> dalles </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Précédent </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Suivant </button> </div> </div> </div> </div> <!-- Modules Section --> <div id="modules-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Gestion des Modules</h2> <button onclick="openModuleModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Nouveau Module </button> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="p-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="relative w-64"> <input type="text" placeholder="Rechercher un module..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="flex space-x-2"> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Toutes les dalles</option> <option>DAL-4567</option> <option>DAL-7890</option> </select> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les types</option> <option>LED</option> <option>Contrôleur</option> <option>Alimentation</option> </select> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-download"></i> Exporter </button> </div> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dalle</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernière intervention</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="modules-table-body"> <!-- Modules will be loaded here --> </tbody> </table> </div> <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> <div class="text-sm text-gray-500"> Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">192</span> modules </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Précédent </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Suivant </button> </div> </div> </div> </div> <!-- Interventions Section --> <div id="interventions-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Gestion des Interventions</h2> <button onclick="openInterventionModal()" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Nouvelle Intervention </button> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="p-4 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="relative w-64"> <input type="text" placeholder="Rechercher une intervention..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> </div> <div class="flex space-x-2"> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les types</option> <option>Mécanique</option> <option>Électronique</option> <option>Logiciel</option> </select> <select class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 focus:outline-none"> <option>Tous les statuts</option> <option>Planifiée</option> <option>En cours</option> <option>Terminée</option> <option>Annulée</option> </select> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> <i class="fas fa-download"></i> Exporter </button> </div> </div> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Élément</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technicien</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200" id="interventions-table-body"> <!-- Interventions will be loaded here --> </tbody> </table> </div> <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> <div class="text-sm text-gray-500"> Affichage de <span class="font-medium">1</span> à <span class="font-medium">10</span> sur <span class="font-medium">56</span> interventions </div> <div class="flex space-x-2"> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Précédent </button> <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"> Suivant </button> </div> </div> </div> </div> <!-- Rapports Section --> <div id="rapports-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Rapports et Statistiques</h2> <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-download mr-2"></i> Exporter </button> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> <div class="bg-white rounded-lg shadow p-6"> <h3 class="text-lg font-semibold mb-4">Interventions par type</h3> <div class="h-64"> <!-- Chart placeholder --> <div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg"> <p class="text-gray-500">Graphique des interventions par type</p> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <h3 class="text-lg font-semibold mb-4">Interventions par statut</h3> <div class="h-64"> <!-- Chart placeholder --> <div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg"> <p class="text-gray-500">Graphique des interventions par statut</p> </div> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6 mb-6"> <h3 class="text-lg font-semibold mb-4">Interventions par mois</h3> <div class="h-96"> <!-- Chart placeholder --> <div class="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg"> <p class="text-gray-500">Graphique des interventions par mois</p> </div> </div> </div> <div class="bg-white rounded-lg shadow p-6"> <div class="flex justify-between items-center mb-4"> <h3 class="text-lg font-semibold">Rapports personnalisés</h3> <button class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> <i class="fas fa-plus mr-2"></i> Créer un rapport </button> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> <div class="flex items-center mb-3"> <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-primary mr-3"> <i class="fas fa-file-alt"></i> </div> <h4 class="font-medium">Rapport mensuel</h4> </div> <p class="text-sm text-gray-500 mb-3">Rapport complet des interventions du mois dernier</p> <div class="flex justify-between text-sm"> <span class="text-gray-500">15/06/2023</span> <button class="text-primary hover:text-blue-700">Télécharger</button> </div> </div> <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> <div class="flex items-center mb-3"> <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-secondary mr-3"> <i class="fas fa-file-excel"></i> </div> <h4 class="font-medium">Statistiques annuelles</h4> </div> <p class="text-sm text-gray-500 mb-3">Toutes les interventions de l'année en cours</p> <div class="flex justify-between text-sm"> <span class="text-gray-500">01/06/2023</span> <button class="text-primary hover:text-blue-700">Télécharger</button> </div> </div> <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> <div class="flex items-center mb-3"> <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center text-purple-500 mr-3"> <i class="fas fa-file-pdf"></i> </div> <h4 class="font-medium">Analyse des pannes</h4> </div> <p class="text-sm text-gray-500 mb-3">Analyse des pannes récurrentes et solutions</p> <div class="flex justify-between text-sm"> <span class="text-gray-500">20/05/2023</span> <button class="text-primary hover:text-blue-700">Télécharger</button> </div> </div> </div> </div> </div> <!-- Paramètres Section --> <div id="parametres-section" class="p-6 hidden"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold text-gray-800">Paramètres</h2> </div> <div class="bg-white rounded-lg shadow overflow-hidden"> <div class="border-b border-gray-200"> <nav class="flex -mb-px"> <button onclick="showSettingsTab('general')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-primary text-primary"> Général </button> <button onclick="showSettingsTab('users')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> Utilisateurs </button> <button onclick="showSettingsTab('notifications')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> Notifications </button> <button onclick="showSettingsTab('backup')" class="settings-tab py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> Sauvegarde </button> </nav> </div> <div class="p-6"> <div id="general-settings" class="settings-content"> <h3 class="text-lg font-semibold mb-4">Paramètres généraux</h3> <div class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'entreprise</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="LED Maintenance Pro"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Logo</label> <div class="flex items-center"> <div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center mr-4"> <i class="fas fa-image text-gray-400"></i> </div> <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Changer</button> </div> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="123 Rue des Écrans, 75000 Paris"> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="+33 1 23 45 67 89"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="contact@ledmaintenance.com"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Fuseau horaire</label> <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>Europe/Paris</option> <option>Europe/London</option> <option>America/New_York</option> </select> </div> <div class="flex justify-end"> <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button> </div> </div> </div> <div id="users-settings" class="settings-content hidden"> <h3 class="text-lg font-semibold mb-4">Gestion des utilisateurs</h3> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dernière connexion</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr> <td class="px-6 py-4 whitespace-nowrap"> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white font-semibold mr-3">JD</div> <div>John Doe</div> </div> </td> <td class="px-6 py-4 whitespace-nowrap">john.doe@example.com</td> <td class="px-6 py-4 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Administrateur</span> </td> <td class="px-6 py-4 whitespace-nowrap">15/06/2023 14:30</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap"> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-semibold mr-3">AS</div> <div>Alice Smith</div> </div> </td> <td class="px-6 py-4 whitespace-nowrap">alice.smith@example.com</td> <td class="px-6 py-4 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Technicien</span> </td> <td class="px-6 py-4 whitespace-nowrap">14/06/2023 09:15</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap"> <div class="flex items-center"> <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-white font-semibold mr-3">RJ</div> <div>Robert Johnson</div> </div> </td> <td class="px-6 py-4 whitespace-nowrap">robert.j@example.com</td> <td class="px-6 py-4 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Assistant</span> </td> <td class="px-6 py-4 whitespace-nowrap">10/06/2023 16:45</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-edit"></i></button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> </tbody> </table> </div> <div class="mt-6"> <h4 class="text-md font-semibold mb-3">Ajouter un utilisateur</h4> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Rôle</label> <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>Administrateur</option> <option>Technicien</option> <option>Assistant</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label> <input type="password" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> </div> <div class="mt-4 flex justify-end"> <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Ajouter</button> </div> </div> </div> <div id="notifications-settings" class="settings-content hidden"> <h3 class="text-lg font-semibold mb-4">Paramètres de notifications</h3> <div class="space-y-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Notifications par email</label> <div class="space-y-3"> <div class="flex items-center"> <input type="checkbox" id="notif-new-intervention" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked> <label for="notif-new-intervention" class="ml-2 block text-sm text-gray-700">Nouvelle intervention planifiée</label> </div> <div class="flex items-center"> <input type="checkbox" id="notif-intervention-status" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked> <label for="notif-intervention-status" class="ml-2 block text-sm text-gray-700">Changement de statut d'intervention</label> </div> <div class="flex items-center"> <input type="checkbox" id="notif-maintenance-alert" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"> <label for="notif-maintenance-alert" class="ml-2 block text-sm text-gray-700">Alerte de maintenance préventive</label> </div> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Email de notification</label> <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="contact@ledmaintenance.com"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Notifications dans l'application</label> <div class="space-y-3"> <div class="flex items-center"> <input type="checkbox" id="app-notif-new-intervention" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked> <label for="app-notif-new-intervention" class="ml-2 block text-sm text-gray-700">Nouvelle intervention assignée</label> </div> <div class="flex items-center"> <input type="checkbox" id="app-notif-urgent" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" checked> <label for="app-notif-urgent" class="ml-2 block text-sm text-gray-700">Interventions urgentes</label> </div> </div> </div> <div class="flex justify-end"> <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button> </div> </div> </div> <div id="backup-settings" class="settings-content hidden"> <h3 class="text-lg font-semibold mb-4">Sauvegarde et restauration</h3> <div class="space-y-6"> <div class="bg-blue-50 border border-blue-200 rounded-lg p-4"> <div class="flex"> <div class="flex-shrink-0"> <i class="fas fa-info-circle text-blue-500 mt-1"></i> </div> <div class="ml-3"> <h3 class="text-sm font-medium text-blue-800">Information</h3> <div class="mt-2 text-sm text-blue-700"> <p>Les sauvegardes sont automatiquement effectuées tous les jours à 2h00. Vous pouvez également créer une sauvegarde manuelle à tout moment.</p> </div> </div> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Dernières sauvegardes</label> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taille</th> <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr> <td class="px-6 py-4 whitespace-nowrap">15/06/2023 02:00</td> <td class="px-6 py-4 whitespace-nowrap">Automatique</td> <td class="px-6 py-4 whitespace-nowrap">45.7 MB</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap">14/06/2023 02:00</td> <td class="px-6 py-4 whitespace-nowrap">Automatique</td> <td class="px-6 py-4 whitespace-nowrap">45.2 MB</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap">10/06/2023 15:30</td> <td class="px-6 py-4 whitespace-nowrap">Manuelle</td> <td class="px-6 py-4 whitespace-nowrap">44.9 MB</td> <td class="px-6 py-4 whitespace-nowrap text-right"> <button class="text-primary hover:text-blue-700 mr-3"><i class="fas fa-download"></i> Télécharger</button> <button class="text-red-500 hover:text-red-700"><i class="fas fa-trash"></i></button> </td> </tr> </tbody> </table> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h4 class="text-md font-semibold mb-3">Créer une sauvegarde</h4> <p class="text-sm text-gray-500 mb-4">Créez une sauvegarde manuelle de toutes vos données.</p> <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 flex items-center"> <i class="fas fa-save mr-2"></i> Créer une sauvegarde </button> </div> <div> <h4 class="text-md font-semibold mb-3">Restaurer une sauvegarde</h4> <p class="text-sm text-gray-500 mb-4">Restaurer les données à partir d'un fichier de sauvegarde.</p> <div class="flex"> <input type="file" class="hidden" id="backup-file"> <label for="backup-file" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 flex items-center cursor-pointer"> <i class="fas fa-file-upload mr-2"></i> Sélectionner un fichier </label> <button class="ml-3 px-6 py-2 bg-secondary text-white rounded-lg hover:bg-green-700 flex items-center"> <i class="fas fa-redo mr-2"></i> Restaurer </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Client Modal --> <div id="client-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto"> <div class="p-6"> <div class="flex justify-between items-center border-b pb-4"> <h3 class="text-xl font-semibold">Nouveau Client</h3> <button onclick="closeClientModal()" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <div class="mt-6 space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Nom du client*</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Société ABC"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Contact principal*</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Jean Dupont"> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Email*</label> <input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="contact@societe-abc.com"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone*</label> <input type="tel" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="01 23 45 67 89"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Adresse</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="123 Rue des Écrans, 75000 Paris"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label> <textarea class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="3" placeholder="Informations supplémentaires..."></textarea> </div> </div> <div class="mt-6 flex justify-end space-x-3"> <button onclick="closeClientModal()" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-100">Annuler</button> <button class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-700">Enregistrer</button> </div> </div> </div> </div> <!-- Ecran Modal --> <div id="ecran-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto"> <div class="p-6"> <div class="flex justify-between items-center border-b pb-4"> <h3 class="text-xl font-semibold">Nouvel Écran LED</h3> <button onclick="closeEcranModal()" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times"></i> </button> </div> <div class="mt-6 space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Client*</label> <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>Sélectionner un client</option> <option>Société ABC</option> <option>Entreprise XYZ</option> <option>Groupe 123</option> </select> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Référence*</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="LED-XXXX"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-1">Modèle</label> <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="P3.91"> </div> </div> <div class="grid grid-c </html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GMAO LED - Suivi des Maintenances</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
dark: '#1F2937',
light: '#F3F4F6',
}
}
}
}
</script>
<style>
.sidebar {
transition: all 0.3s ease;
}
.sidebar.collapsed {
width: 70px;
}
.sidebar.collapsed .sidebar-text {
display: none;
}
.sidebar.collapsed .logo-text {
display: none;
}
.sidebar.collapsed .nav-item {
justify-content: center;
}
.main-content {
transition: all 0.3s ease;
}
.sidebar.collapsed + .main-content {
margin-left: 70px;
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-dark text-white w-64 flex flex-col h-full fixed">
<div class="p-4 flex items-center border-b border-gray-700">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
<i class="fas fa-tv text-white"></i>
</div>
<span class="logo-text ml-3 text-xl font-bold">LED GMAO</span>
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar py-4">
<nav>
<div class="px-4">
<div class="text-gray-400 uppercase text-xs font-semibold mb-2 sidebar-text">Menu Principal</div>
<a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-primary rounded-lg mx-2 mb-1" onclick="showSection('dashboard')">
<i class="fas fa-tachometer-alt"></i>
<span class="sidebar-text ml-3">Tableau de bord</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('clients')">
<i class="fas fa-users"></i>
<span class="sidebar-text ml-3">Clients</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('ecrans')">
<i class="fas fa-tv"></i>
<span class="sidebar-text ml-3">Écrans LED</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('dalles')">
<i class="fas fa-th-large"></i>
<span class="sidebar-text ml-3">Dalles</span>
</a>
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 rounded-lg mx-2 mb-1" onclick="showSection('modules')">
<i class="fas fa-microchip"></i>
<span class="sidebar-text ml-3">Modules</span>