244 lines
17 KiB
PHP
244 lines
17 KiB
PHP
<?php
|
|
require_once 'includes/auth.php';
|
|
require_once 'includes/db.php';
|
|
|
|
// ดึงสถิติยานพาหนะ
|
|
$stmt = $pdo->query("SELECT status, COUNT(*) as count FROM vehicles GROUP BY status");
|
|
$vehicle_stats = ['total' => 0, 'available' => 0, 'in_use' => 0, 'maintenance' => 0];
|
|
while($row = $stmt->fetch()) {
|
|
$vehicle_stats[$row['status']] = $row['count'];
|
|
$vehicle_stats['total'] += $row['count'];
|
|
}
|
|
|
|
// ดึงรายการเดินรถวันนี้
|
|
$stmt = $pdo->query("
|
|
SELECT s.*, v.license_plate, v.type as vehicle_type, d.first_name, d.last_name
|
|
FROM schedules s
|
|
LEFT JOIN vehicles v ON s.vehicle_id = v.id
|
|
LEFT JOIN drivers d ON s.driver_id = d.id
|
|
WHERE DATE(s.start_time) = CURDATE()
|
|
ORDER BY s.start_time ASC
|
|
LIMIT 5
|
|
");
|
|
$today_schedules = $stmt->fetchAll();
|
|
|
|
$pageTitle = 'ภาพรวมระบบ | ระบบจัดการข้อมูลยานพาหนะ โรงพยาบาลเกาะสมุย';
|
|
$pageTitleDisplay = 'ภาพรวม';
|
|
require_once 'includes/header.php';
|
|
?>
|
|
|
|
<!-- Floating Background -->
|
|
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
|
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary-500/10 rounded-full blur-[100px]"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/10 rounded-full blur-[100px]"></div>
|
|
</div>
|
|
|
|
<!-- Layout Wrapper -->
|
|
<div x-data="sidebarStore" class="flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<?php include 'includes/sidebar.php'; ?>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col min-w-0 overflow-hidden relative z-10">
|
|
<!-- Top Navbar -->
|
|
<?php include 'includes/navbar.php'; ?>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div class="flex-1 overflow-y-auto p-4 pt-0 custom-scrollbar page-transition">
|
|
|
|
<div class="mb-6 flex justify-between items-end">
|
|
<div>
|
|
<h1 class="text-2xl font-bold dark:text-white tracking-tight">ภาพรวมระบบยานพาหนะ</h1>
|
|
<p class="text-slate-500 dark:text-slate-400 mt-1">ข้อมูลสถานะรถยนต์และพนักงานขับรถวันนี้</p>
|
|
</div>
|
|
<button class="btn-gradient px-4 py-2 text-sm flex items-center">
|
|
<i class="fa-solid fa-plus mr-2"></i> เพิ่มการจอง
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
|
|
<!-- Stat Card 1 -->
|
|
<div class="glass-card p-6 flex items-center group">
|
|
<div class="w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 text-primary-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-van-shuttle"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-slate-500 dark:text-slate-400 text-sm font-medium">รถทั้งหมด</h3>
|
|
<p class="text-2xl font-bold dark:text-white mt-1"><?= $vehicle_stats['total'] ?> <span class="text-sm font-normal text-slate-400">คัน</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stat Card 2 -->
|
|
<div class="glass-card p-6 flex items-center group">
|
|
<div class="w-12 h-12 rounded-xl bg-success/10 text-success flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-slate-500 dark:text-slate-400 text-sm font-medium">พร้อมใช้งาน</h3>
|
|
<p class="text-2xl font-bold dark:text-white mt-1"><?= $vehicle_stats['available'] ?> <span class="text-sm font-normal text-slate-400">คัน</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stat Card 3 -->
|
|
<div class="glass-card p-6 flex items-center group">
|
|
<div class="w-12 h-12 rounded-xl bg-warning/10 text-warning flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-route"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-slate-500 dark:text-slate-400 text-sm font-medium">กำลังปฏิบัติงาน</h3>
|
|
<p class="text-2xl font-bold dark:text-white mt-1"><?= $vehicle_stats['in_use'] ?> <span class="text-sm font-normal text-slate-400">คัน</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stat Card 4 -->
|
|
<div class="glass-card p-6 flex items-center group">
|
|
<div class="w-12 h-12 rounded-xl bg-danger/10 text-danger flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-wrench"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-slate-500 dark:text-slate-400 text-sm font-medium">ส่งซ่อม/บำรุง</h3>
|
|
<p class="text-2xl font-bold dark:text-white mt-1"><?= $vehicle_stats['maintenance'] ?> <span class="text-sm font-normal text-slate-400">คัน</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Section -->
|
|
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
|
|
<!-- Table Section -->
|
|
<div class="xl:col-span-2 glass-card rounded-[16px] overflow-hidden flex flex-col">
|
|
<div class="p-5 border-b border-slate-200 dark:border-slate-700/50 flex justify-between items-center bg-white/50 dark:bg-slate-800/50">
|
|
<h2 class="text-lg font-semibold dark:text-white">รายการเดินรถวันนี้</h2>
|
|
<button class="text-primary-600 hover:text-primary-700 text-sm font-medium">ดูทั้งหมด <i class="fa-solid fa-arrow-right text-xs ml-1"></i></button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-slate-500 dark:text-slate-400">
|
|
<thead class="text-xs text-slate-700 uppercase bg-slate-50 dark:bg-slate-700/50 dark:text-slate-300 sticky top-0 shadow-sm">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-4">ทะเบียนรถ</th>
|
|
<th scope="col" class="px-6 py-4">ประเภท</th>
|
|
<th scope="col" class="px-6 py-4">พนักงานขับรถ</th>
|
|
<th scope="col" class="px-6 py-4">สถานะ</th>
|
|
<th scope="col" class="px-6 py-4">เวลา</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if(count($today_schedules) > 0): ?>
|
|
<?php foreach($today_schedules as $s): ?>
|
|
<tr class="bg-white/40 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-slate-900 dark:text-white"><?= htmlspecialchars($s['license_plate']) ?></td>
|
|
<td class="px-6 py-4"><?= htmlspecialchars($s['vehicle_type']) ?></td>
|
|
<td class="px-6 py-4 flex items-center">
|
|
<img class="w-6 h-6 rounded-full mr-2" src="https://ui-avatars.com/api/?name=<?= urlencode($s['first_name']) ?>&background=random" alt="Avatar">
|
|
<?= htmlspecialchars($s['first_name'] . ' ' . $s['last_name']) ?>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<?php if($s['status'] == 'approved'): ?>
|
|
<span class="bg-success/10 text-success text-xs font-medium px-2.5 py-1 rounded-full border border-success/20">สแตนด์บาย</span>
|
|
<?php elseif($s['status'] == 'pending'): ?>
|
|
<span class="bg-warning/10 text-warning text-xs font-medium px-2.5 py-1 rounded-full border border-warning/20">รออนุมัติ</span>
|
|
<?php else: ?>
|
|
<span class="bg-slate-100 text-slate-600 text-xs font-medium px-2.5 py-1 rounded-full border border-slate-200">เสร็จสิ้น</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="px-6 py-4"><?= date('H:i', strtotime($s['start_time'])) ?> <?= $s['end_time'] ? '- ' . date('H:i', strtotime($s['end_time'])) : '' ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-8 text-center text-slate-500">ไม่มีคิวเดินรถวันนี้</td>
|
|
</tr>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination Placeholder -->
|
|
<div class="p-4 border-t border-slate-200 dark:border-slate-700/50 flex items-center justify-between mt-auto">
|
|
<span class="text-sm text-slate-500">แสดง 1 ถึง 3 จาก 12 รายการ</span>
|
|
<div class="flex space-x-1">
|
|
<button class="px-3 py-1 border border-slate-200 dark:border-slate-700 rounded-md text-slate-400 cursor-not-allowed">ก่อนหน้า</button>
|
|
<button class="px-3 py-1 bg-primary-600 text-white rounded-md">1</button>
|
|
<button class="px-3 py-1 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-md">2</button>
|
|
<button class="px-3 py-1 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-md">ถัดไป</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column (Charts / Mini Stats) -->
|
|
<div class="space-y-6">
|
|
<!-- Chart Card -->
|
|
<div class="glass-card p-5 h-64 flex flex-col">
|
|
<h2 class="text-lg font-semibold dark:text-white mb-4">สถิติการใช้งานรายสัปดาห์</h2>
|
|
<div class="flex-1 flex items-end justify-between space-x-2 pb-2">
|
|
<!-- Fake Bar Chart with Animation -->
|
|
<div class="w-1/6 bg-primary-200 dark:bg-primary-900/40 rounded-t-md h-[40%] hover:bg-primary-400 transition-all cursor-pointer relative group">
|
|
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">12</div>
|
|
</div>
|
|
<div class="w-1/6 bg-primary-300 dark:bg-primary-800/50 rounded-t-md h-[60%] hover:bg-primary-400 transition-all cursor-pointer relative group"></div>
|
|
<div class="w-1/6 bg-primary-500 dark:bg-primary-600 rounded-t-md h-[90%] hover:bg-primary-400 transition-all cursor-pointer shadow-lg shadow-primary-500/20 relative group"></div>
|
|
<div class="w-1/6 bg-primary-300 dark:bg-primary-800/50 rounded-t-md h-[55%] hover:bg-primary-400 transition-all cursor-pointer relative group"></div>
|
|
<div class="w-1/6 bg-primary-200 dark:bg-primary-900/40 rounded-t-md h-[30%] hover:bg-primary-400 transition-all cursor-pointer relative group"></div>
|
|
<div class="w-1/6 bg-primary-200 dark:bg-primary-900/40 rounded-t-md h-[20%] hover:bg-primary-400 transition-all cursor-pointer relative group"></div>
|
|
<div class="w-1/6 bg-primary-200 dark:bg-primary-900/40 rounded-t-md h-[10%] hover:bg-primary-400 transition-all cursor-pointer relative group"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-slate-400 mt-2">
|
|
<span>จ.</span><span>อ.</span><span>พ.</span><span>พฤ.</span><span>ศ.</span><span>ส.</span><span>อา.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mini Card -->
|
|
<div class="glass-card p-5">
|
|
<h2 class="text-lg font-semibold dark:text-white mb-4">แจ้งเตือนล่าสุด</h2>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start">
|
|
<div class="w-8 h-8 rounded-full bg-danger/10 text-danger flex items-center justify-center mt-0.5">
|
|
<i class="fa-solid fa-triangle-exclamation text-xs"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium dark:text-slate-200">รถตู้ กค 1234 ใกล้ถึงกำหนดต่อภาษี</p>
|
|
<p class="text-xs text-slate-500 mt-0.5">2 ชั่วโมงที่แล้ว</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-8 h-8 rounded-full bg-info/10 text-info flex items-center justify-center mt-0.5">
|
|
<i class="fa-solid fa-oil-can text-xs"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm font-medium dark:text-slate-200">รถกระบะ ขข 5678 ถึงกำหนดถ่ายน้ำมันเครื่อง</p>
|
|
<p class="text-xs text-slate-500 mt-0.5">เมื่อวานนี้</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Additional Custom Styles for Scrollbar inside index.html for quick fix -->
|
|
<style>
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 10px;
|
|
}
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #475569;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
</style>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|