Spaces:
Configuration error
Configuration error
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tableau de Bord - Système de Contrôle de Patrouille</title> | |
| <!-- Preload critical resources --> | |
| <link rel="preload" href="assets/css/main.css" as="style"> | |
| <link rel="preload" href="assets/js/main.js" as="script"> | |
| <!-- Core CSS --> | |
| <link rel="stylesheet" href="assets/css/main.css"> | |
| <link rel="stylesheet" href="https://cdn.tailwindcss.com"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <!-- Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Application Container --> | |
| <div id="app" class="flex"> | |
| <!-- Sidebar --> | |
| <custom-sidebar></custom-sidebar> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Header --> | |
| <custom-header></custom-header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-auto"> | |
| <div class="p-6"> | |
| <!-- Stats Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">POINTS ACTIFS</p> | |
| <p class="text-2xl font-bold mt-1" id="activePoints">24</p> | |
| <p class="text-green-500 text-xs mt-1 flex items-center"> | |
| <i data-feather="trending-up" class="w-3 h-3 mr-1"></i> | |
| +8% cette semaine | |
| </p> | |
| </div> | |
| <div class="bg-blue-100 p-3 rounded-lg"> | |
| <i data-feather="map-pin" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">RONDES AUJOURD'HUI</p> | |
| <p class="text-2xl font-bold mt-1" id="todayRounds">12</p> | |
| <p class="text-green-500 text-xs mt-1 flex items-center"> | |
| <i data-feather="check-circle" class="w-3 h-3 mr-1"></i> | |
| En cours: 3 | |
| </p> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-lg"> | |
| <i data-feather="refresh-cw" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-amber-500 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">AGENTS ACTIFS</p> | |
| <p class="text-2xl font-bold mt-1" id="activeAgents">18</p> | |
| <p class="text-green-500 text-xs mt-1 flex items-center"> | |
| <i data-feather="users" class="text-amber-600 w-6 h-6"></i> | |
| </div> | |
| <div class="bg-amber-100 p-3 rounded-lg"> | |
| <i data-feather="clock" class="text-amber-600 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-violet-500 hover:shadow-md transition-shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm font-medium">INCIDENTS NON RÉSOLUS</p> | |
| <p class="text-2xl font-bold mt-1" id="pendingIncidents">2</p> | |
| <p class="text-red-500 text-xs mt-1 flex items-center"> | |
| <i data-feather="alert-triangle" class="text-red-600 w-6 h-6"></i> | |
| </div> | |
| <div class="bg-violet-100 p-3 rounded-lg"> | |
| <i data-feather="target" class="text-violet-600 w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Activité Récente</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-lg mr-3"> | |
| <i data-feather="check-circle" class="text-green-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Jean Dupont a complété la ronde nocturne</p> | |
| <p class="text-xs text-gray-500">15 mars 2023, 23:45</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-2 rounded-lg mr-3"> | |
| <i data-feather="map-pin" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Nouveau point de contrôle créé</p> | |
| <p class="text-xs text-gray-500">Par Admin - 15 mars 2023, 23:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-100 p-2 rounded-lg mr-3"> | |
| <i data-feather="edit-2" class="text-amber-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Point NFC-001 en maintenance</p> | |
| <p class="text-xs text-gray-500">Par Marie Dubois - 15 mars 2023, 22:15</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Patrol Map --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Carte des Patrouilles en Temps Réel</h2> | |
| <div class="map-container"> | |
| <div id="liveMap"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Global Modals --> | |
| <div id="modal-container"></div> | |
| <!-- Global Notifications --> | |
| <div id="notification-container"></div> | |
| <!-- Scripts --> | |
| <script src="assets/js/main.js"></script> | |
| <script src="assets/js/components.js"></script> | |
| <script src="assets/js/api.js"></script> | |
| <script src="assets/js/utils.js"></script> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <script type="module" src="script.js"></script> | |
| </body> | |
| </html> |