<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<?php include "data/styles.php"?>
</head>
<body class="bg-gray-100 min-h-screen p-6 text-gray-800">
<!-- dashboard.php -->
<main class="p-6 space-y-6">
<!-- Welcome Section -->
<div class="bg-white p-6 rounded-xl shadow flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div>
<h2 class="text-xl font-semibold mb-1">Welcome back, Admin!</h2>
<p class="text-gray-600 text-sm">Today is <span id="currentDate" class="font-medium"></span>, and it's currently <span id="currentTime" class="font-medium"></span></p>
</div>
<div class="flex items-center gap-2 text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar-days" class="lucide lucide-calendar-days"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="4" y="6" width="16" height="16" rx="2"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg>
<span class="text-sm font-medium">View Calendar</span>
</div>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-4 rounded-xl shadow flex items-center gap-4">
<div class="bg-blue-100 text-blue-600 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-check" class="lucide lucide-user-check w-5 h-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><polyline points="16 11 18 13 22 9"></polyline></svg>
</div>
<div>
<p class="text-sm text-gray-500">Active Users</p>
<p class="text-lg font-semibold"><?= $activeUsers ?? 'N/A' ?></p>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow flex items-center gap-4">
<div class="bg-green-100 text-green-600 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text" class="lucide lucide-file-text w-5 h-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
</div>
<div>
<p class="text-sm text-gray-500">Recent Reports</p>
<p class="text-lg font-semibold"><?= $recentReports ?? 'N/A' ?></p>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow flex items-center gap-4">
<div class="bg-yellow-100 text-yellow-600 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-5 h-5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div>
<p class="text-sm text-gray-500">Last Login</p>
<p class="text-lg font-semibold"><?= $lastLogin ?? 'Just now' ?></p>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow flex items-center gap-4">
<div class="bg-red-100 text-red-600 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="alert-circle" class="lucide lucide-alert-circle w-5 h-5"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>
</div>
<div>
<p class="text-sm text-gray-500">Pending Alerts</p>
<p class="text-lg font-semibold"><?= $pendingAlerts ?? '0' ?></p>
</div>
</div>
</div>
<!-- Two Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- System Status -->
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="server" class="lucide lucide-server"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6" y2="6"></line><line x1="6" y1="18" x2="6" y2="18"></line></svg>
System Status
</h3>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center">
<span class="text-gray-500">CPU Usage</span>
<span class="font-medium">45%</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-500">Memory Usage</span>
<span class="font-medium">62% / 16GB</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-500">Disk Usage</span>
<span class="font-medium">78% / 500GB</span>
</li>
<li class="flex justify-between items-center">
<span class="text-gray-500">Uptime</span>
<span class="font-medium">2 days 5h 34m</span>
</li>
</ul>
</div>
<!-- Quick Actions -->
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-5 h-5"><path d="M4.5 16.5c-1.5 1.26-2 5-1.5 5.5s3.74-.5 5.5-1.5M12.5 2.5c-1.5 1.26-2 5-1.5 5.5s3.74-.5 5.5-1.5M18 8l-1.5 1.5M21.5 1.5l-1.5 1.5M21 13.5h-1.5M12 21.5v-1.5M16 16l-1.5 1.5M13.5 10.5l-1.5 1.5M21.5 16.5l-1.5 1.5M16.5 21.5l-1.5 1.5"></path></svg>
Quick Actions
</h3>
<div class="grid grid-cols-2 gap-3 mt-4">
<a href="#" class="flex items-center gap-2 px-3 py-2 border border-gray-200 hover:border-blue-400 rounded-md text-sm text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-plus" class="lucide lucide-user-plus w-4 h-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="22" y1="8" y2="11"></line><line x1="19" x2="22" y1="11" y2="8"></line></svg>
Add User
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 border border-gray-200 hover:border-blue-400 rounded-md text-sm text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="settings" class="lucide lucide-settings w-4 h-4"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
Settings
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 border border-gray-200 hover:border-blue-400 rounded-md text-sm text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="upload" class="lucide lucide-upload w-4 h-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" x2="12" y1="3" y2="15"></line></svg>
Upload Report
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2 border border-gray-200 hover:border-blue-400 rounded-md text-sm text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="log-out" class="lucide lucide-log-out w-4 h-4"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>
Logout
</a>
</div>
</div>
<!-- Today's Tasks -->
<div class="lg:col-span-1 bg-white p-6 rounded-xl shadow">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-square" class="lucide lucide-check-square w-5 h-5"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
Today's Tasks
</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-start gap-2">
<input type="checkbox" class="mt-1 cursor-pointer">
<span>Review new user registrations</span>
</li>
<li class="flex items-start gap-2">
<input type="checkbox" class="mt-1 cursor-pointer">
<span>Approve pending reports</span>
</li>
<li class="flex items-start gap-2">
<input type="checkbox" class="mt-1 cursor-pointer">
<span>Check system logs</span>
</li>
<li class="flex items-start gap-2">
<input type="checkbox" class="mt-1 cursor-pointer">
<span>Update application settings</span>
</li>
</ul>
</div>
</div>
<!-- Three Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Calendar Preview -->
<div class="bg-white p-6 rounded-xl shadow">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
Monthly Overview
</h3>
<div class="grid grid-cols-7 gap-2 text-center text-xs font-medium text-gray-500">
Sun Mon Tue Wed Thu Fri Sat
</div>
<div class="grid grid-cols-7 gap-2 mt-2 text-center text-sm">
<?php for ($i = 1; $i <= 31; $i++): ?>
<div class="py-2 rounded hover:bg-blue-50 cursor-pointer <?= date('j') == $i ? 'bg-blue-100 text-blue-700 font-medium' : '' ?>">
<?= $i ?>
</div>
<?php endfor; ?>
</div>
</div>
<!-- User Logins -->
<div class="bg-white p-6 rounded-xl shadow">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-5 h-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
Recent Logins
</h3>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center">
<div>
<p class="font-medium">John Doe</p>
<p class="text-xs text-gray-500">IP: 192.168.1.100 • Local</p>
</div>
<span class="text-xs text-gray-400">10:22 AM</span>
</li>
<li class="flex justify-between items-center">
<div>
<p class="font-medium">Sarah Lee</p>
<p class="text-xs text-gray-500">IP: 142.251.42.174 • Google</p>
</div>
<span class="text-xs text-gray-400">9:15 AM</span>
</li>
<li class="flex justify-between items-center">
<div>
<p class="font-medium">Admin</p>
<p class="text-xs text-gray-500">IP: 8.8.8.8 • External</p>
</div>
<span class="text-xs text-gray-400">8:05 AM</span>
</li>
</ul>
</div>
</div>
<!-- Footer / Note -->
<div class="text-center text-xs text-gray-400">
System last checked at <?= date("g:i A") ?> • All times in local timezone
</div>
</main>
<script>
function updateDateTime() {
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
document.getElementById('currentDate').textContent = now.toLocaleDateString(undefined, options);
document.getElementById('currentTime').textContent = now.toLocaleTimeString();
}
setInterval(updateDateTime, 1000);
updateDateTime();
</script>
</body>
</html>