File "dashboard2.php"
Full path: /home/u525140468/domains/productsizer.com/public_html/admin/dashboard2.php
File
size: 9.29 B (9.29 KB bytes)
MIME-type: text/html
Charset: utf-8
Download Open Edit Advanced Editor Back
<!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-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>
<!-- Recent Activity -->
<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="activity" class="lucide lucide-activity w-5 h-5"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>
Recent Activity
</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-start gap-3">
<div class="mt-1 bg-green-100 text-green-600 rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<div>
<p class="font-medium">New user registered</p>
<p class="text-xs text-gray-500">2 minutes ago</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="mt-1 bg-blue-100 text-blue-600 rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"><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>
</div>
<div>
<p class="font-medium">Report uploaded successfully</p>
<p class="text-xs text-gray-500">10 minutes ago</p>
</div>
</li>
<li class="flex items-start gap-3">
<div class="mt-1 bg-yellow-100 text-yellow-600 rounded-full p-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="edit" class="lucide lucide-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
</div>
<div>
<p class="font-medium">Profile updated</p>
<p class="text-xs text-gray-500">1 hour ago</p>
</div>
</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>