mirror of
https://github.com/xodivorce/infra-xodivorce-in.git
synced 2026-02-04 20:32:23 +05:30
feat(core): restructure auth, routing, and role-based dashboards
This commit is contained in:
244
src/assets/admin/_activity_logs.php
Normal file
244
src/assets/admin/_activity_logs.php
Normal file
@@ -0,0 +1,244 @@
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h1 class="text-2xl font-semibold text-white">Activity Logs</h1>
|
||||
<p class="mt-1 text-sm text-neutral-400">Recent system and user activities</p>
|
||||
</header>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Event Type</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>All</option>
|
||||
<option>Reports</option>
|
||||
<option>Status Changes</option>
|
||||
<option>Admin Actions</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Severity</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>All</option>
|
||||
<option>Info</option>
|
||||
<option>Warning</option>
|
||||
<option>Critical</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Date Range</label>
|
||||
<select class="w-full bg-neutral-900 border border-neutral-700 text-white text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Today</option>
|
||||
<option>Last 7 days</option>
|
||||
<option>Last 30 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-neutral-400 mb-1.5">Search</label>
|
||||
<input type="text" placeholder="Search activity…" class="w-full bg-neutral-900 border border-neutral-700 text-white placeholder-neutral-500 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actor</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Related Entity</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:32:15</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">admin@system</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Updated service configuration</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">API Gateway - US-East</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:28:43</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Service health check failed</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Database - EU-West</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Warning</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 14:15:22</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">john.doe@company.com</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Generated monthly report</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Report #1247</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:58:09</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Critical alert triggered</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Load Balancer - APAC</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">Critical</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:45:31</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">admin@system</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Modified user permissions</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">User: jane.smith@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 13:22:17</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Backup completed successfully</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">All Services</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 12:58:44</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">mark.wilson@company.com</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">Updated service status</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">CDN - US-West</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Info</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">2025-12-27 12:31:05</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">System</td>
|
||||
<td class="px-6 py-4 text-sm text-neutral-300">High memory usage detected</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">Cache Server - EU-Central</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Warning</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 p-12">
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<svg class="w-16 h-16 text-neutral-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-white mb-1">No activity logs available</h3>
|
||||
<p class="text-sm text-neutral-400">System and user actions will appear here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Actor</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Action</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Related Entity</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Severity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-56"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-40"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-20"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-52"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-40"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
438
src/assets/admin/_admin.php
Normal file
438
src/assets/admin/_admin.php
Normal file
@@ -0,0 +1,438 @@
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h1 class="text-2xl font-semibold text-white">Admin Panel</h1>
|
||||
<p class="mt-1 text-sm text-neutral-400">System management and administrative controls</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Total Users</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">1,247</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">Active: 1,189 | Suspended: 58</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Pending Reports</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">34</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-yellow-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">High: 8 | Medium: 15 | Low: 11</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">Active Incidents</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">7</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-red-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">Critical: 2 | Warning: 5</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-400">System Health</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-green-400">98.5%</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-900 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-neutral-500">All services operational</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">User Management</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
User ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1001</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">John Anderson</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">john.anderson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-900 text-purple-200">Admin</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1002</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Sarah Mitchell</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">sarah.mitchell@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Moderator</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1003</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Michael Chen</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">michael.chen@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-700 text-neutral-300">User</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1004</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">Emily Rodriguez</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">emily.rodriguez@company.com
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-700 text-neutral-300">User</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">Suspended</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-green-400 hover:text-green-300">Enable</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#1005</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">David Thompson</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">david.thompson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Moderator</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-200">Active</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-blue-400 hover:text-blue-300 mr-3">View</button>
|
||||
<button class="text-red-400 hover:text-red-300">Disable</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">Report Moderation</h2>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Report ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Title</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Submitted By</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Priority</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2045</td>
|
||||
<td class="px-6 py-4 text-sm text-white">Database Connection Issues</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">alex.kim@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">High</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2044</td>
|
||||
<td class="px-6 py-4 text-sm text-white">API Response Time Degradation</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">maria.santos@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Medium</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2043</td>
|
||||
<td class="px-6 py-4 text-sm text-white">UI Rendering Bug</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">james.wilson@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-200">Low</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-neutral-750">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">#2042</td>
|
||||
<td class="px-6 py-4 text-sm text-white">Memory Leak in Production</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-400">lisa.park@company.com</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-900 text-red-200">High</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-200">Pending</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button class="text-green-400 hover:text-green-300 mr-2">Approve</button>
|
||||
<button class="text-orange-400 hover:text-orange-300 mr-2">Escalate</button>
|
||||
<button class="text-red-400 hover:text-red-300">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700">
|
||||
<div class="px-6 py-4 border-b border-neutral-700">
|
||||
<h2 class="text-lg font-semibold text-white">System Controls</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div class="flex items-center justify-between p-4 bg-neutral-900 rounded-lg border border-neutral-700">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-white">Maintenance Mode</h3>
|
||||
<p class="mt-1 text-xs text-neutral-400">Enable maintenance mode to perform system updates</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<div
|
||||
class="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-sm font-medium text-white hover:bg-neutral-750 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
||||
</path>
|
||||
</svg>
|
||||
Clear Cache
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-neutral-900 border border-neutral-700 rounded-lg text-sm font-medium text-white hover:bg-neutral-750 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
</path>
|
||||
</svg>
|
||||
Force Status Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="flex items-center justify-center px-4 py-3 bg-yellow-900 border border-yellow-700 rounded-lg text-sm font-medium text-yellow-200 hover:bg-yellow-800 transition-colors">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
|
||||
</path>
|
||||
</svg>
|
||||
Restart Services
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 p-12">
|
||||
<div class="flex flex-col items-center justify-center text-center">
|
||||
<svg class="w-16 h-16 text-neutral-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
|
||||
</path>
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-white mb-1">No data available</h3>
|
||||
<p class="text-sm text-neutral-400">Administrative data will appear here when available</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
User ID</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">
|
||||
Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-32"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-48"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-28"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-44"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="animate-pulse">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-36"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-52"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-5 bg-neutral-700 rounded-full w-16"></div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="h-4 bg-neutral-700 rounded w-24"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
296
src/assets/admin/_status_board.php
Normal file
296
src/assets/admin/_status_board.php
Normal file
@@ -0,0 +1,296 @@
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-neutral-800">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Status Board</h1>
|
||||
<p class="text-sm text-neutral-400 mt-1">Live infrastructure and service health</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="text-neutral-300">Operational</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
<span class="text-neutral-300">Degraded</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
<span class="text-neutral-300">Outage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global Status Summary -->
|
||||
<section>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Overall System</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">Operational</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Services Operational</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">12/14</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Active Incidents</span>
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">2</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-neutral-400">Regions Affected</span>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white">0/8</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Status Grid -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Services Status</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Power Grid</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Running normally</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 2 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Water Supply</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Running normally</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 5 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<h3 class="font-semibold text-white">Network Infrastructure</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">Degraded</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Partial outage in Zone C</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 1 minute ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Road Network</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">All routes clear</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 3 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<h3 class="font-semibold text-white">Public Transit</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-red-500/10 text-red-400 border border-red-500/20">Outage</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">Service suspended on Line 5</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 8 minutes ago</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<h3 class="font-semibold text-white">Emergency Services</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">Operational</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-400 mb-2">All systems nominal</p>
|
||||
<p class="text-xs text-neutral-500">Last updated: 1 minute ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Location / Region Status -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Regional Status</h2>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-neutral-900 border-b border-neutral-700">
|
||||
<tr>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Region / Area</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Affected Services</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Status</th>
|
||||
<th class="text-left px-4 py-3 text-xs font-semibold text-neutral-300 uppercase tracking-wider">Last Update</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-700">
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">North District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">2 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">South District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">4 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">East District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">Network, Transit</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
||||
Degraded
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">1 minute ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">West District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">3 minutes ago</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-sm text-white whitespace-nowrap">Central District</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-400">None</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center gap-2 px-2 py-1 text-xs font-medium rounded bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
Operational
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">5 minutes ago</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Incident Snapshot -->
|
||||
<section>
|
||||
<h2 class="text-lg font-semibold text-white mb-4">Active Incidents</h2>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 divide-y divide-neutral-700">
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-2">
|
||||
<h3 class="font-semibold text-white">Network connectivity issues in Zone C</h3>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 self-start">High</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-blue-500/10 text-blue-400 border border-blue-500/20">Investigating</span>
|
||||
<span class="text-neutral-500">15 minutes ago</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-2">
|
||||
<h3 class="font-semibold text-white">Transit Line 5 service disruption</h3>
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-red-500/10 text-red-400 border border-red-500/20 self-start">Critical</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded bg-orange-500/10 text-orange-400 border border-orange-500/20">Identified</span>
|
||||
<span class="text-neutral-500">32 minutes ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Loading State (Hidden by default) -->
|
||||
<div class="space-y-6 hidden" data-loading-state>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-4 bg-neutral-700 rounded w-1/2 mb-3"></div>
|
||||
<div class="h-8 bg-neutral-700 rounded w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-5 bg-neutral-700 rounded w-1/3 mb-3"></div>
|
||||
<div class="h-4 bg-neutral-700 rounded w-full mb-2"></div>
|
||||
<div class="h-3 bg-neutral-700 rounded w-1/4"></div>
|
||||
</div>
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4 animate-pulse">
|
||||
<div class="h-5 bg-neutral-700 rounded w-1/3 mb-3"></div>
|
||||
<div class="h-4 bg-neutral-700 rounded w-full mb-2"></div>
|
||||
<div class="h-3 bg-neutral-700 rounded w-1/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-4">
|
||||
<div class="space-y-3">
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
<div class="h-10 bg-neutral-700 rounded animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State for Incidents -->
|
||||
<div class="bg-neutral-800 rounded-lg border border-neutral-700 p-12 text-center hidden" data-empty-incidents>
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10 mb-4">
|
||||
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-white mb-1">No active incidents</p>
|
||||
<p class="text-sm text-neutral-400">All systems are operating normally</p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user