Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SecureGuard Dashboard</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .nav-item { | |
| justify-content: center; | |
| } | |
| .content { | |
| transition: margin-left 0.3s; | |
| } | |
| .status-badge { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .status-active { | |
| background-color: #10B981; | |
| } | |
| .status-warning { | |
| background-color: #F59E0B; | |
| } | |
| .status-critical { | |
| background-color: #EF4444; | |
| } | |
| .status-offline { | |
| background-color: #6B7280; | |
| } | |
| .checkpoint-marker { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .checkpoint-visited { | |
| background-color: #10B981; | |
| } | |
| .checkpoint-missed { | |
| background-color: #EF4444; | |
| } | |
| .checkpoint-pending { | |
| background-color: #F59E0B; | |
| } | |
| .map-container { | |
| height: 400px; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| font-size: 10px; | |
| background-color: #EF4444; | |
| color: white; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .smooth-transition { | |
| transition: all 0.3s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.02); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #E5E7EB; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background-color: #3B82F6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-blue-800 text-white w-64 flex flex-col sidebar"> | |
| <div class="p-4 flex items-center"> | |
| <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-blue-800 text-xl"></i> | |
| </div> | |
| <span class="logo-text ml-3 text-xl font-bold">SecureGuard</span> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <nav class="mt-6"> | |
| <div class="px-4 mb-6"> | |
| <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Main</div> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg bg-blue-700 text-white"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| </div> | |
| <div class="px-4 mb-6"> | |
| <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Monitoring</div> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> | |
| <span class="nav-text">Guard Map</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2"> | |
| <i class="fas fa-user-shield mr-3"></i> | |
| <span class="nav-text">Guard Status</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| <span class="nav-text">Shift Schedule</span> | |
| </a> | |
| </div> | |
| <div class="px-4 mb-6"> | |
| <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Reports</div> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2"> | |
| <i class="fas fa-clipboard-list mr-3"></i> | |
| <span class="nav-text">Check-in Log</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span class="nav-text">Performance</span> | |
| </a> | |
| </div> | |
| <div class="px-4"> | |
| <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Settings</div> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="nav-text">Account Settings</span> | |
| </a> | |
| <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white"> | |
| <i class="fas fa-sign-out-alt mr-3"></i> | |
| <span class="nav-text">Logout</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-blue-700"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-sm"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium">John Doe</div> | |
| <div class="text-xs text-blue-200">Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebarToggle" class="text-gray-500 hover:text-gray-600 mr-4"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="text-gray-500 hover:text-gray-600"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-badge">3</span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center text-gray-500 hover:text-gray-600"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Role Selector (Client vs Internal) --> | |
| <div class="mb-6 bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-800">View Mode</h2> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button type="button" id="clientViewBtn" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 bg-blue-600 text-white"> | |
| Client View | |
| </button> | |
| <button type="button" id="internalViewBtn" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50"> | |
| Internal View | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Client View (Default) --> | |
| <div id="clientView" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <!-- Site Status Card --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Downtown Office</h3> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="text-sm text-gray-500 mb-1">Current Guard</div> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Michael Johnson</div> | |
| <div class="text-xs text-gray-500">Force #SG-2456</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-500 mb-1">Current Shift</div> | |
| <div class="font-medium">8:00 AM - 4:00 PM</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-500 mb-1">Check-in Progress</div> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-full mr-2"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| <span class="text-sm font-medium">6/8</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity Card --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Check-ins</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="checkpoint-marker checkpoint-visited"></div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Main Entrance</div> | |
| <div class="text-sm text-gray-500">10:15 AM</div> | |
| </div> | |
| <div class="text-sm text-gray-500">On time</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="checkpoint-marker checkpoint-visited"></div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Server Room</div> | |
| <div class="text-sm text-gray-500">11:30 AM</div> | |
| </div> | |
| <div class="text-sm text-gray-500">On time</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="checkpoint-marker checkpoint-visited"></div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Parking Garage</div> | |
| <div class="text-sm text-gray-500">12:45 PM</div> | |
| </div> | |
| <div class="text-sm text-gray-500">On time</div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="checkpoint-marker checkpoint-pending"></div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Rooftop Access</div> | |
| <div class="text-sm text-gray-500">Pending</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Checkpoint Timeline --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition md:col-span-2"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Checkpoint Timeline</h3> | |
| <div class="relative"> | |
| <!-- Timeline --> | |
| <div class="border-l-2 border-gray-200 absolute h-full left-4 top-0"></div> | |
| <!-- Timeline items --> | |
| <div class="relative pl-8 pb-6"> | |
| <div class="absolute w-3 h-3 bg-green-500 rounded-full -left-1.5 border border-white"></div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Main Entrance</h4> | |
| <p class="text-sm text-gray-500">8:15 AM</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On time</span> | |
| </div> | |
| </div> | |
| <div class="relative pl-8 pb-6"> | |
| <div class="absolute w-3 h-3 bg-green-500 rounded-full -left-1.5 border border-white"></div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Lobby Desk</h4> | |
| <p class="text-sm text-gray-500">9:30 AM</p> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On time</span> | |
| </div> | |
| </div> | |
| <div class="relative pl-8 pb-6"> | |
| <div class="absolute w-3 h-3 bg-yellow-500 rounded-full -left-1.5 border border-white"></div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Server Room</h4> | |
| <p class="text-sm text-gray-500">10:45 AM</p> | |
| </div> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">5 mins late</span> | |
| </div> | |
| </div> | |
| <div class="relative pl-8 pb-6"> | |
| <div class="absolute w-3 h-3 bg-gray-300 rounded-full -left-1.5 border border-white"></div> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Rooftop Access</h4> | |
| <p class="text-sm text-gray-500">Scheduled: 11:30 AM</p> | |
| </div> | |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Pending</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Incident Report --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6 hover-scale smooth-transition"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Incident Reports</h3> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| No incidents reported for your site in the last 24 hours. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Report an Incident | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Internal View --> | |
| <div id="internalView" class="tab-content"> | |
| <!-- Overview Cards --> | |
| <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-sm p-6 hover-scale smooth-transition"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Guards On Duty</p> | |
| <h3 class="text-2xl font-bold text-gray-800">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-user-shield text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="status-badge status-active"></span> | |
| <span class="mr-4">Active: 24</span> | |
| <span class="status-badge status-offline"></span> | |
| <span>Off-duty: 36</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Shifts</p> | |
| <h3 class="text-2xl font-bold text-gray-800">18</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="status-badge status-active"></span> | |
| <span class="mr-4">In Progress: 18</span> | |
| <span class="status-badge status-warning"></span> | |
| <span>Starting Soon: 6</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Patrol Posts</p> | |
| <h3 class="text-2xl font-bold text-gray-800">32</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-map-marked-alt text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="status-badge status-active"></span> | |
| <span class="mr-4">Covered: 18</span> | |
| <span class="status-badge status-critical"></span> | |
| <span>Uncovered: 14</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Alerts</p> | |
| <h3 class="text-2xl font-bold text-gray-800">3</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="status-badge status-critical"></span> | |
| <span class="mr-4">Critical: 1</span> | |
| <span class="status-badge status-warning"></span> | |
| <span>Warnings: 2</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map and Guard Status --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Guard Map --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Live Guard Map</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="map-container bg-gray-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Map loading...</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div> | |
| <span class="text-xs">Guards</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div> | |
| <span class="text-xs">Checkpoints</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div> | |
| <span class="text-xs">Alerts</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Alerts --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Active Alerts</h3> | |
| <div class="space-y-4"> | |
| <!-- Critical Alert --> | |
| <div class="border-l-4 border-red-500 bg-red-50 p-3 rounded-r"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-red-800">Missed Check-in</h4> | |
| <div class="mt-1 text-sm text-red-700"> | |
| <p>Guard #SG-2456 missed checkpoint at Warehouse B</p> | |
| </div> | |
| <div class="mt-2 flex"> | |
| <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none"> | |
| Acknowledge | |
| </button> | |
| <button class="ml-3 inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Warning Alert --> | |
| <div class="border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded-r"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-yellow-800">Late for Shift</h4> | |
| <div class="mt-1 text-sm text-yellow-700"> | |
| <p>Guard #SG-3128 is 15 minutes late for shift at Downtown Office</p> | |
| </div> | |
| <div class="mt-2 flex"> | |
| <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none"> | |
| Acknowledge | |
| </button> | |
| <button class="ml-3 inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> | |
| Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Alert --> | |
| <div class="border-l-4 border-blue-500 bg-blue-50 p-3 rounded-r"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-medium text-blue-800">Equipment Check Due</h4> | |
| <div class="mt-1 text-sm text-blue-700"> | |
| <p>5 guards have equipment checks due today</p> | |
| </div> | |
| <div class="mt-2 flex"> | |
| <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none"> | |
| View List | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Guard Status and Shift Monitoring --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Guard Status Table --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Guard Status</h3> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search guards..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </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">Guard</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Assignment</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-ins</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Johnson</div> | |
| <div class="text-sm text-gray-500">#SG-2456</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <span class="status-badge status-active"></span> Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Downtown Office (8AM-4PM) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| <span class="text-sm">6/8</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Williams</div> | |
| <div class="text-sm text-gray-500">#SG-3128</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| <span class="status-badge status-warning"></span> Late | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Industrial Park (3PM-11PM) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <span class="text-sm">0/5</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Robert Chen</div> | |
| <div class="text-sm text-gray-500">#SG-1892</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| <span class="status-badge status-active"></span> Active | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Shopping Mall (10AM-6PM) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 40%"></div> | |
| </div> | |
| <span class="text-sm">4/10</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">David Miller</div> | |
| <div class="text-sm text-gray-500">#SG-4567</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| <span class="status-badge status-critical"></span> Alert | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Warehouse Complex (12PM-8PM) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 20%"></div> | |
| </div> | |
| <span class="text-sm">1/5</span> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> guards | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shift Monitoring --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Shift Monitoring</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md"> | |
| <i class="fas fa-calendar-day mr-1"></i> Today | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </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">Shift</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">8:00 AM - 4:00 PM</div> | |
| <div class="text-sm text-gray-500">Current</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Michael Johnson</div> | |
| <div class="text-sm text-gray-500">#SG-2456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Downtown Office | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| <span class="text-sm">6/8</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">10:00 AM - 6:00 PM</div> | |
| <div class="text-sm text-gray-500">Current</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Robert Chen</div> | |
| <div class="text-sm text-gray-500">#SG-1892</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Shopping Mall | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 40%"></div> | |
| </div> | |
| <span class="text-sm">4/10</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">12:00 PM - 8:00 PM</div> | |
| <div class="text-sm text-gray-500">Current</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">David Miller</div> | |
| <div class="text-sm text-gray-500">#SG-4567</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Warehouse Complex | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 20%"></div> | |
| </div> | |
| <span class="text-sm">1/5</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">3:00 PM - 11:00 PM</div> | |
| <div class="text-sm text-gray-500">Starting Soon</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Sarah Williams</div> | |
| <div class="text-sm text-gray-500">#SG-3128</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Industrial Park | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="progress-bar w-20 mr-2"> | |
| <div class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <span class="text-sm">0/5</span> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">18</span> shifts | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Check-in Log --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition mb-6"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Check-in Log</h3> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search check-ins..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="px-3 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded-md"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| <button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-md"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </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">Timestamp</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Checkpoint</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">12:45 PM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Michael Johnson</div> | |
| <div class="text-sm text-gray-500">#SG-2456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Parking Garage | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Downtown Office | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| On time | |
| </span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">11:30 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Michael Johnson</div> | |
| <div class="text-sm text-gray-500">#SG-2456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Server Room | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Downtown Office | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| 5 mins late | |
| </span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">10:15 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Michael Johnson</div> | |
| <div class="text-sm text-gray-500">#SG-2456</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Main Entrance | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Downtown Office | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| On time | |
| </span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">9:30 AM</div> | |
| <div class="text-sm text-gray-500">Today</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Robert Chen</div> | |
| <div class="text-sm text-gray-500">#SG-1892</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Food Court | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| Shopping Mall | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| On time | |
| </span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">124</span> check-ins | |
| </div> | |
| <div class="flex space-x-1"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Previous | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> | |
| Next | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('sidebar-collapsed'); | |
| document.querySelector('.content').classList.toggle('ml-20'); | |
| }); | |
| // Toggle between client and internal views | |
| document.getElementById('clientViewBtn').addEventListener('click', function() { | |
| this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50'); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| document.getElementById('internalViewBtn').classList.remove('bg-blue-600', 'text-white'); | |
| document.getElementById('internalViewBtn').classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50'); | |
| document.getElementById('clientView').classList.add('active'); | |
| document.getElementById('internalView').classList.remove('active'); | |
| }); | |
| document.getElementById('internalViewBtn').addEventListener('click', function() { | |
| this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50'); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| document.getElementById('clientViewBtn').classList.remove('bg-blue-600', 'text-white'); | |
| document.getElementById('clientViewBtn').classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50'); | |
| document.getElementById('internalView').classList.add('active'); | |
| document.getElementById('clientView').classList.remove('active'); | |
| }); | |
| // Initialize map (placeholder - would need Google Maps API key) | |
| function initMap() { | |
| // This would be replaced with actual Google Maps initialization | |
| console.log('Map would be initialized here with real API key'); | |
| } | |
| // Sample data for charts (would be replaced with real data) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Guard Status Pie Chart | |
| const guardStatusCtx = document.createElement('canvas'); | |
| guardStatusCtx.id = 'guardStatusChart'; | |
| document.querySelector('#internalView .grid-cols-4').appendChild(guardStatusCtx); | |
| const guardStatusChart = new Chart(guardStatusCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Active', 'Off-duty', 'On Leave', 'Late'], | |
| datasets: [{ | |
| data: [24, 36, 5, 3], | |
| backgroundColor: [ | |
| '#10B981', | |
| '#6B7280', | |
| '#3B82F6', | |
| '#F59E0B' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| boxWidth: 12, | |
| padding: 20 | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=W3cgymnott/secure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |