Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SecureGuard - Gestion de Société de Sécurité</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> | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .mobile-menu { | |
| transform: translateX(-100%); | |
| transition: all 0.3s; | |
| } | |
| .mobile-menu.active { | |
| transform: translateX(0); | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| } | |
| .sos-button { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Mobile Menu Button --> | |
| <div class="lg:hidden fixed top-4 left-4 z-50"> | |
| <button id="mobileMenuButton" class="p-2 rounded-md bg-white shadow-md"> | |
| <i class="fas fa-bars text-gray-700"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="mobile-menu fixed inset-y-0 left-0 z-40 w-64 bg-gray-800 text-white overflow-y-auto"> | |
| <div class="p-4 flex items-center border-b border-gray-700"> | |
| <i class="fas fa-shield-alt text-2xl mr-2 text-blue-400"></i> | |
| <span class="text-xl font-bold">SecureGuard</span> | |
| </div> | |
| <nav class="p-4"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1 active-nav-item" data-section="dashboard"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="agents"> | |
| <i class="fas fa-user-shield mr-2"></i> Agents | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="sites"> | |
| <i class="fas fa-building mr-2"></i> Sites | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="assignments"> | |
| <i class="fas fa-tasks mr-2"></i> Affectations | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="inventory"> | |
| <i class="fas fa-boxes mr-2"></i> Stock | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="sos"> | |
| <i class="fas fa-bell mr-2"></i> SOS | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="timekeeping"> | |
| <i class="fas fa-clock mr-2"></i> Pointage | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="vehicles"> | |
| <i class="fas fa-car mr-2"></i> Véhicules | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="hr"> | |
| <i class="fas fa-users mr-2"></i> RH | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="clients"> | |
| <i class="fas fa-user-tie mr-2"></i> Clients | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="reports"> | |
| <i class="fas fa-chart-bar mr-2"></i> Rapports | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Desktop Sidebar --> | |
| <div class="hidden lg:block fixed inset-y-0 left-0 z-30 w-64 bg-gray-800 text-white overflow-y-auto"> | |
| <div class="p-4 flex items-center border-b border-gray-700"> | |
| <i class="fas fa-shield-alt text-2xl mr-2 text-blue-400"></i> | |
| <span class="text-xl font-bold">SecureGuard</span> | |
| </div> | |
| <nav class="p-4"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1 active-nav-item" data-section="dashboard"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="agents"> | |
| <i class="fas fa-user-shield mr-2"></i> Agents | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="sites"> | |
| <i class="fas fa-building mr-2"></i> Sites | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="assignments"> | |
| <i class="fas fa-tasks mr-2"></i> Affectations | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="inventory"> | |
| <i class="fas fa-boxes mr-2"></i> Stock | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="sos"> | |
| <i class="fas fa-bell mr-2"></i> SOS | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="timekeeping"> | |
| <i class="fas fa-clock mr-2"></i> Pointage | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="vehicles"> | |
| <i class="fas fa-car mr-2"></i> Véhicules | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="hr"> | |
| <i class="fas fa-users mr-2"></i> RH | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="clients"> | |
| <i class="fas fa-user-tie mr-2"></i> Clients | |
| </a> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1" data-section="reports"> | |
| <i class="fas fa-chart-bar mr-2"></i> Rapports | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:ml-64 min-h-screen"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-semibold text-gray-800" id="pageTitle">Tableau de bord</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notificationButton" class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="notification-badge bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </button> | |
| <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-50"> | |
| <div class="p-3 border-b"> | |
| <h3 class="font-medium">Notifications</h3> | |
| </div> | |
| <div class="max-h-60 overflow-y-auto"> | |
| <a href="#" class="block px-4 py-3 border-b hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Nouvelle alerte SOS</p> | |
| <p class="text-xs text-gray-500">Site: Centre Commercial ABC</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 border-b hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-clock text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Contrat à renouveler</p> | |
| <p class="text-xs text-gray-500">Agent: Jean Dupont</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 hover:bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-car text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Véhicule à réviser</p> | |
| <p class="text-xs text-gray-500">Plaque: AB-123-CD</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <button id="profileButton" class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full"> | |
| <span class="hidden md:inline text-gray-700">Admin</span> | |
| </button> | |
| <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Profil</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Paramètres</a> | |
| <div class="border-t border-gray-200"></div> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Sections --> | |
| <main class="p-4"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboardSection" class="content-section"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-user-shield text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Agents actifs</p> | |
| <p class="text-2xl font-semibold">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-building text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Sites sécurisés</p> | |
| <p class="text-2xl font-semibold">18</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Alertes ce mois</p> | |
| <p class="text-2xl font-semibold">7</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Interventions</p> | |
| <p class="text-2xl font-semibold">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow lg:col-span-2"> | |
| <h2 class="text-lg font-semibold mb-4">Activité récente</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heure</th> | |
| <th class="px-4 py-2 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-2 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Centre Commercial ABC</td> | |
| <td class="px-4 py-2 whitespace-nowrap">08:00 - 16:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">En service</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Marie Lambert</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Siège Social XYZ</td> | |
| <td class="px-4 py-2 whitespace-nowrap">12:00 - 20:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En pause</span></td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Pierre Martin</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Entrepôt Nord</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20:00 - 04:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">À venir</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h2 class="text-lg font-semibold mb-4">Échéances à venir</h2> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-red-500 pl-4 py-2"> | |
| <p class="font-medium">Contrat agent</p> | |
| <p class="text-sm text-gray-600">Jean Dupont - 15/06/2023</p> | |
| </div> | |
| <div class="border-l-4 border-yellow-500 pl-4 py-2"> | |
| <p class="font-medium">Assurance véhicule</p> | |
| <p class="text-sm text-gray-600">AB-123-CD - 20/06/2023</p> | |
| </div> | |
| <div class="border-l-4 border-blue-500 pl-4 py-2"> | |
| <p class="font-medium">Contrat client</p> | |
| <p class="text-sm text-gray-600">Entreprise XYZ - 25/06/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Agents Section --> | |
| <section id="agentsSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion des Agents</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un agent | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Formation</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contrat</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">AG001</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-4 py-2 whitespace-nowrap">SSIAP 1, CQP APS</td> | |
| <td class="px-4 py-2 whitespace-nowrap">CDI</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">AG002</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Marie Lambert</td> | |
| <td class="px-4 py-2 whitespace-nowrap">SSIAP 2, SST</td> | |
| <td class="px-4 py-2 whitespace-nowrap">CDD</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">AG003</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Pierre Martin</td> | |
| <td class="px-4 py-2 whitespace-nowrap">CQP APS, Permis B</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Intérim</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En congé</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sites Section --> | |
| <section id="sitesSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Sites Sécurisés</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un site | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Centre Commercial ABC</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">123 Avenue des Champs, Paris</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> M. Durand - 06 12 34 56 78</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm"><i class="fas fa-user-shield mr-1"></i> 3 agents</span> | |
| <button class="text-blue-600 text-sm hover:text-blue-800">Voir détails</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Siège Social XYZ</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">45 Rue des Entrepreneurs, Lyon</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> Mme. Bernard - 06 87 65 43 21</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm"><i class="fas fa-user-shield mr-1"></i> 2 agents</span> | |
| <button class="text-blue-600 text-sm hover:text-blue-800">Voir détails</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Entrepôt Nord</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En pause</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Zone Industrielle, Lille</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> M. Lefèvre - 06 45 67 89 01</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm"><i class="fas fa-user-shield mr-1"></i> 1 agent</span> | |
| <button class="text-blue-600 text-sm hover:text-blue-800">Voir détails</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Assignments Section --> | |
| <section id="assignmentsSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Affectation des Agents</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouvelle affectation | |
| </button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Horaire</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Centre Commercial ABC</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">08:00 - 16:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmé</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Marie Lambert</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Siège Social XYZ</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">12:00 - 20:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmé</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Pierre Martin</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Entrepôt Nord</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20:00 - 04:00</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En attente</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Inventory Section --> | |
| <section id="inventorySection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion du Stock</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un article | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Référence</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Article</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Catégorie</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantité</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Localisation</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">EQ001</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Talkie-walkie Motorola</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Communication</td> | |
| <td class="px-4 py-2 whitespace-nowrap">12</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Bureau principal</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">EQ002</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Uniforme complet</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Vêtement</td> | |
| <td class="px-4 py-2 whitespace-nowrap">25</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Stockage vestiaire</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">EQ003</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Lampe torche LED</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Équipement</td> | |
| <td class="px-4 py-2 whitespace-nowrap">18</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Bureau principal</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SOS Section --> | |
| <section id="sosSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion des Alertes SOS</h2> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-history mr-2"></i> Historique | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-medium mb-2">Alertes en cours</h3> | |
| <div class="space-y-3"> | |
| <div class="border-l-4 border-red-500 bg-red-50 p-3 rounded-r"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Centre Commercial ABC</p> | |
| <p class="text-sm text-gray-600">Niveau de danger: Élevé</p> | |
| </div> | |
| <span class="text-xs text-gray-500">10:23</span> | |
| </div> | |
| <p class="text-sm mt-1">Intrusion détectée au niveau de l'entrée arrière</p> | |
| <div class="flex justify-end mt-2 space-x-2"> | |
| <button class="text-xs bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded">Intervenir</button> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded">Archiver</button> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded-r"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium">Siège Social XYZ</p> | |
| <p class="text-sm text-gray-600">Niveau de danger: Moyen</p> | |
| </div> | |
| <span class="text-xs text-gray-500">09:45</span> | |
| </div> | |
| <p class="text-sm mt-1">Personne suspecte dans le hall</p> | |
| <div class="flex justify-end mt-2 space-x-2"> | |
| <button class="text-xs bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded">Vérifier</button> | |
| <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded">Archiver</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-2">Bouton SOS Client</h3> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm mb-4">Les clients peuvent déclencher une alerte via leur application mobile ou le bouton ci-dessous :</p> | |
| <div class="flex justify-center mb-4"> | |
| <button id="sosButton" class="sos-button bg-red-600 hover:bg-red-700 text-white rounded-full h-20 w-20 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-bell text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm font-medium mb-1">Numéro d'urgence client</p> | |
| <p class="text-xl font-bold">0800 123 456</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timekeeping Section --> | |
| <section id="timekeepingSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Pointage des Agents</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un pointage | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div> | |
| <label for="dateFilter" class="block text-sm font-medium text-gray-700 mb-1">Date</label> | |
| <input type="date" id="dateFilter" class="border rounded-md px-3 py-2"> | |
| </div> | |
| <div> | |
| <label for="agentFilter" class="block text-sm font-medium text-gray-700 mb-1">Agent</label> | |
| <select id="agentFilter" class="border rounded-md px-3 py-2"> | |
| <option value="">Tous</option> | |
| <option value="AG001">Jean Dupont</option> | |
| <option value="AG002">Marie Lambert</option> | |
| <option value="AG003">Pierre Martin</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="siteFilter" class="block text-sm font-medium text-gray-700 mb-1">Site</label> | |
| <select id="siteFilter" class="border rounded-md px-3 py-2"> | |
| <option value="">Tous</option> | |
| <option value="S001">Centre Commercial ABC</option> | |
| <option value="S002">Siège Social XYZ</option> | |
| <option value="S003">Entrepôt Nord</option> | |
| </select> | |
| </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 class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Arrivée</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Départ</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heures</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">14/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Centre Commercial ABC</td> | |
| <td class="px-4 py-2 whitespace-nowrap">07:58</td> | |
| <td class="px-4 py-2 whitespace-nowrap">16:05</td> | |
| <td class="px-4 py-2 whitespace-nowrap">8h07</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Validé</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">14/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Marie Lambert</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Siège Social XYZ</td> | |
| <td class="px-4 py-2 whitespace-nowrap">11:55</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20:10</td> | |
| <td class="px-4 py-2 whitespace-nowrap">8h15</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Validé</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">14/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Pierre Martin</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Entrepôt Nord</td> | |
| <td class="px-4 py-2 whitespace-nowrap">19:45</td> | |
| <td class="px-4 py-2 whitespace-nowrap">-</td> | |
| <td class="px-4 py-2 whitespace-nowrap">-</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En cours</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vehicles Section --> | |
| <section id="vehiclesSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion du Parc Automobile</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un véhicule | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Véhicule 1</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Disponible</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Plaque: AB-123-CD</p> | |
| <p class="text-sm mb-2">Modèle: Renault Kangoo</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs text-red-600">Contrôle technique - 20/07/2023</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Véhicule 2</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">En mission</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Plaque: EF-456-GH</p> | |
| <p class="text-sm mb-2">Modèle: Peugeot Partner</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs text-yellow-600">Assurance - 15/08/2023</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Véhicule 3</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">En réparation</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Plaque: IJ-789-KL</p> | |
| <p class="text-sm mb-2">Modèle: Citroën Berlingo</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs">Vidange - 30/06/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-2">Calendrier des échéances</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Véhicule</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jours restants</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">AB-123-CD</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Contrôle technique</td> | |
| <td class="px-4 py-2 whitespace-nowrap">20/07/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">35 jours</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 text-sm">Planifier</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">EF-456-GH</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Assurance</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/08/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">61 jours</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 text-sm">Planifier</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">IJ-789-KL</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Vidange</td> | |
| <td class="px-4 py-2 whitespace-nowrap">30/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">15 jours</span></td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 text-sm">Planifier</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HR Section --> | |
| <section id="hrSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion des Ressources Humaines</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouvel employé | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-2">Contrats à renouveler</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border-l-4 border-red-500 bg-red-50 p-3 rounded-r"> | |
| <p class="font-medium">Jean Dupont</p> | |
| <p class="text-sm text-gray-600">CDI - Fin de période d'essai</p> | |
| <p class="text-sm mt-1">Échéance: <span class="font-medium">15/06/2023</span></p> | |
| <div class="flex justify-end mt-2"> | |
| <button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">Renouveler</button> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded-r"> | |
| <p class="font-medium">Marie Lambert</p> | |
| <p class="text-sm text-gray-600">CDD - Fin de contrat</p> | |
| <p class="text-sm mt-1">Échéance: <span class="font-medium">30/06/2023</span></p> | |
| <div class="flex justify-end mt-2"> | |
| <button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">Renouveler</button> | |
| </div> | |
| </div> | |
| <div class="border-l-4 border-blue-500 bg-blue-50 p-3 rounded-r"> | |
| <p class="font-medium">Pierre Martin</p> | |
| <p class="text-sm text-gray-600">Intérim - Fin de mission</p> | |
| <p class="text-sm mt-1">Échéance: <span class="font-medium">15/07/2023</span></p> | |
| <div class="flex justify-end mt-2"> | |
| <button class="text-xs bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">Renouveler</button> | |
| </div> | |
| </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 class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type de contrat</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date d'embauche</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fin de contrat</th> | |
| <th class="px-4 py-2 text-left 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-4 py-2 whitespace-nowrap">AG001</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Jean Dupont</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Agent de sécurité</td> | |
| <td class="px-4 py-2 whitespace-nowrap">CDI</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/12/2022</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">AG002</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Marie Lambert</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Chef d'équipe</td> | |
| <td class="px-4 py-2 whitespace-nowrap">CDD</td> | |
| <td class="px-4 py-2 whitespace-nowrap">01/01/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">30/06/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">AG003</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Pierre Martin</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Agent de sécurité</td> | |
| <td class="px-4 py-2 whitespace-nowrap">Intérim</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/04/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap">15/07/2023</td> | |
| <td class="px-4 py-2 whitespace-nowrap"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-2"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section id="clientsSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Gestion des Clients</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau client | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Entreprise XYZ</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Contrat: Sécurité permanente</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> Mme. Bernard - 06 87 65 43 21</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs">Renouvellement contrat - 25/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Centre Commercial ABC</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Actif</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Contrat: Sécurité événementielle</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> M. Durand - 06 12 34 56 78</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs">Paiement mensuel - 30/06/2023</p> | |
| </div> | |
| </div> | |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Entrepôt Nord</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">En attente</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">Contrat: Surveillance nocturne</p> | |
| <p class="text-sm mb-2"><span class="font-medium">Contact:</span> M. Lefèvre - 06 45 67 89 01</p> | |
| <div class="border-t pt-2"> | |
| <p class="text-xs font-medium mb-1">Prochaine échéance:</p> | |
| <p class="text-xs">Signature contrat - 20/06/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reports Section --> | |
| <section id="reportsSection" class="content-section hidden"> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-semibold">Rapports et Statistiques</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> Générer PDF | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-excel mr-2"></i> Exporter Excel | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <h3 class="font-medium mb-4">Activité mensuelle</h3> | |
| <div class="h-64 bg-gray-50 flex items-center justify-center"> | |
| <p class="text-gray-500">Graphique des activités</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <h3 class="font-medium mb-4">Répartition des agents</h3> | |
| <div class="h-64 bg-gray-50 flex items-center justify-center"> | |
| <p class="text-gray-500">Graphique de répartition</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border"> | |
| <h3 class="font-medium mb-4">Statistiques des alertes</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Alertes</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Interventions</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fausses alertes</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taux de résolution</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Centre Commercial ABC</td> | |
| <td class="px-4 py-2 whitespace-nowrap">12</td> | |
| <td class="px-4 py-2 whitespace-nowrap">5</td> | |
| <td class="px-4 py-2 whitespace-nowrap">7</td> | |
| <td class="px-4 py-2 whitespace-nowrap">58%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Siège Social XYZ</td> | |
| <td class="px-4 py-2 whitespace-nowrap">8</td> | |
| <td class="px-4 py-2 whitespace-nowrap">3</td> | |
| <td class="px-4 py-2 whitespace-nowrap">5</td> | |
| <td class="px-4 py-2 whitespace-nowrap">62%</td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 py-2 whitespace-nowrap">Entrepôt Nord</td> | |
| <td class="px-4 py-2 whitespace-nowrap">5</td> | |
| <td class="px-4 py-2 whitespace-nowrap">2</td> | |
| <td class="px-4 py-2 whitespace-nowrap">3</td> | |
| <td class="px-4 py-2 whitespace-nowrap">60%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- SOS Modal --> | |
| <div id="sosModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-red-600">ALERTE SOS</h3> | |
| <button id="closeSosModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| </html> |