Initial commit

This commit is contained in:
Porawit Dongwang
2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
@@ -0,0 +1,243 @@
<?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'; ?>