219 lines
22 KiB
PHP
219 lines
22 KiB
PHP
<?php
|
|
require_once 'includes/auth.php';
|
|
|
|
$pageTitle = 'คู่มือการใช้งาน | ระบบจัดการข้อมูลยานพาหนะ โรงพยาบาลเกาะสมุย';
|
|
$bodyClass = 'bg-slate-50 dark:bg-slate-900 overflow-hidden';
|
|
require_once 'includes/header.php';
|
|
?>
|
|
<div class="flex h-screen overflow-hidden" x-data="sidebarStore">
|
|
|
|
<?php require_once 'includes/sidebar.php'; ?>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col min-w-0 overflow-hidden page-transition">
|
|
<?php require_once 'includes/navbar.php'; ?>
|
|
|
|
<!-- Content Area -->
|
|
<div class="flex-1 overflow-auto p-4 sm:p-6 lg:p-8 custom-scrollbar relative" x-data="{ activeTab: 'overview' }">
|
|
|
|
<!-- Background decoration -->
|
|
<div class="absolute top-[0%] left-[20%] w-[40vw] h-[40vw] rounded-full bg-blue-300/10 dark:bg-blue-900/10 blur-[100px] pointer-events-none"></div>
|
|
|
|
<div class="max-w-6xl mx-auto relative z-10">
|
|
<div class="text-center mb-10">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white drop-shadow-sm mb-4">
|
|
คู่มือการใช้งานระบบ
|
|
</h1>
|
|
<p class="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">ระบบจัดการข้อมูลยานพาหนะ-พนักงานขับรถ โรงพยาบาลเกาะสมุย ถูกออกแบบมาเพื่อให้ใช้งานง่ายและมีประสิทธิภาพสูงสุด</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<div class="lg:w-1/4">
|
|
<div class="glass-card p-2 sticky top-4">
|
|
<nav class="space-y-1">
|
|
<button @click="activeTab = 'overview'" :class="activeTab === 'overview' ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50'" class="w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-colors">
|
|
<i class="fa-solid fa-chart-pie w-6 text-lg"></i>
|
|
ภาพรวมระบบ
|
|
</button>
|
|
<button @click="activeTab = 'vehicles'" :class="activeTab === 'vehicles' ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50'" class="w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-colors">
|
|
<i class="fa-solid fa-car w-6 text-lg"></i>
|
|
การจัดการยานพาหนะ
|
|
</button>
|
|
<button @click="activeTab = 'drivers'" :class="activeTab === 'drivers' ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50'" class="w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-colors">
|
|
<i class="fa-solid fa-id-card w-6 text-lg"></i>
|
|
ข้อมูลพนักงานขับรถ
|
|
</button>
|
|
<button @click="activeTab = 'schedules'" :class="activeTab === 'schedules' ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50'" class="w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-colors">
|
|
<i class="fa-regular fa-calendar-check w-6 text-lg"></i>
|
|
ตารางการเดินรถ
|
|
</button>
|
|
<?php if(isAdmin()): ?>
|
|
<button @click="activeTab = 'settings'" :class="activeTab === 'settings' ? 'bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50'" class="w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-colors">
|
|
<i class="fa-solid fa-users-gear w-6 text-lg"></i>
|
|
การตั้งค่าผู้ใช้งาน
|
|
</button>
|
|
<?php endif; ?>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div class="lg:w-3/4">
|
|
<!-- Overview Tab -->
|
|
<div x-show="activeTab === 'overview'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="glass-card p-6 md:p-8">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-3">
|
|
<div class="bg-primary-100 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 p-2 rounded-lg">
|
|
<i class="fa-solid fa-chart-pie"></i>
|
|
</div>
|
|
ภาพรวมระบบ (Dashboard)
|
|
</h2>
|
|
<div class="prose prose-slate dark:prose-invert max-w-none">
|
|
<p>หน้า Dashboard เป็นหน้าแรกหลังจากที่คุณเข้าสู่ระบบ หน้านี้จะสรุปข้อมูลสำคัญทั้งหมดเพื่อให้คุณเห็นภาพรวมของการทำงานได้อย่างรวดเร็ว</p>
|
|
|
|
<h3 class="text-xl font-semibold mt-6 mb-3 text-slate-700 dark:text-slate-200">ส่วนประกอบหลัก</h3>
|
|
<ul class="space-y-3 list-none pl-0">
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa-solid fa-check-circle text-primary-500 mt-1"></i>
|
|
<div>
|
|
<strong>การ์ดสรุปข้อมูล (Summary Cards):</strong> แสดงจำนวนรวมของยานพาหนะ, พนักงานขับรถ, และตารางงานที่กำลังดำเนินการ
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa-solid fa-check-circle text-primary-500 mt-1"></i>
|
|
<div>
|
|
<strong>สถานะยานพาหนะแบบเรียลไทม์:</strong> กราฟแสดงสัดส่วนรถที่ว่าง, กำลังใช้งาน, และกำลังซ่อมบำรุง
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i class="fa-solid fa-check-circle text-primary-500 mt-1"></i>
|
|
<div>
|
|
<strong>สถานะพนักงานขับรถ:</strong> สรุปจำนวนพนักงานที่พร้อมปฏิบัติงาน
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vehicles Tab -->
|
|
<div x-show="activeTab === 'vehicles'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="glass-card p-6 md:p-8">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-3">
|
|
<div class="bg-primary-100 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 p-2 rounded-lg">
|
|
<i class="fa-solid fa-car"></i>
|
|
</div>
|
|
การจัดการยานพาหนะ
|
|
</h2>
|
|
<div class="prose prose-slate dark:prose-invert max-w-none">
|
|
<p>เมนูนี้ใช้สำหรับจัดการข้อมูลรถยนต์ทั้งหมดของโรงพยาบาล รวมถึงการบันทึกประวัติการซ่อมบำรุงและเอกสารต่างๆ</p>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl mt-6 border border-slate-200 dark:border-slate-700">
|
|
<h4 class="font-semibold text-slate-800 dark:text-white mb-2"><i class="fa-solid fa-plus text-primary-500 mr-2"></i>การเพิ่มยานพาหนะ</h4>
|
|
<p class="text-sm">คลิกปุ่ม "เพิ่มยานพาหนะ" ที่มุมบนขวา กรอกข้อมูลป้ายทะเบียน, ยี่ห้อ, รุ่น, ประเภท และวันต่อภาษี สามารถแนบเอกสาร (PDF) ประจำรถได้ในหน้าแก้ไข</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl mt-4 border border-slate-200 dark:border-slate-700">
|
|
<h4 class="font-semibold text-slate-800 dark:text-white mb-2"><i class="fa-solid fa-wrench text-primary-500 mr-2"></i>การซ่อมบำรุง (Maintenance)</h4>
|
|
<p class="text-sm">ในหน้ารายละเอียดยานพาหนะ คุณสามารถเพิ่ม "บันทึกการซ่อมบำรุง" ได้ โดยระบุวันที่, รายละเอียดการซ่อม, เลขไมล์, ค่าใช้จ่าย และอู่ซ่อม พร้อมแนบใบเสร็จได้</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drivers Tab -->
|
|
<div x-show="activeTab === 'drivers'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="glass-card p-6 md:p-8">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-3">
|
|
<div class="bg-primary-100 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 p-2 rounded-lg">
|
|
<i class="fa-solid fa-id-card"></i>
|
|
</div>
|
|
ข้อมูลพนักงานขับรถ
|
|
</h2>
|
|
<div class="prose prose-slate dark:prose-invert max-w-none">
|
|
<p>จัดการประวัติของพนักงานขับรถ การเชื่อมโยงกับระบบ HIS และวันหมดอายุใบขับขี่</p>
|
|
|
|
<ul class="space-y-4 mt-6">
|
|
<li class="p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-sm">
|
|
<h4 class="font-bold text-primary-600 dark:text-primary-400 mb-1">การเพิ่มพนักงานใหม่</h4>
|
|
<p class="text-sm">สามารถทำได้ 2 วิธี:</p>
|
|
<ol class="text-sm mt-2 ml-4 list-decimal">
|
|
<li><strong>ค้นหาจาก HIS:</strong> พิมพ์ชื่อ ระบบจะดึงข้อมูล ตำแหน่ง, หน่วยงาน มาให้อัตโนมัติ</li>
|
|
<li><strong>กรอกเอง:</strong> หากไม่มีในระบบ สามารถพิมพ์ชื่อ-สกุล และเบอร์โทรศัพท์ได้โดยตรง</li>
|
|
</ol>
|
|
</li>
|
|
<li class="p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-sm">
|
|
<h4 class="font-bold text-primary-600 dark:text-primary-400 mb-1">การตั้งสถานะ</h4>
|
|
<p class="text-sm">ผู้ดูแลระบบสามารถปรับสถานะ (ว่าง, ติดภารกิจ, ลางาน) ได้จาก Dropdown ที่มุมขวาของการ์ดพนักงานแต่ละคน</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedules Tab -->
|
|
<div x-show="activeTab === 'schedules'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="glass-card p-6 md:p-8">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-3">
|
|
<div class="bg-primary-100 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 p-2 rounded-lg">
|
|
<i class="fa-regular fa-calendar-check"></i>
|
|
</div>
|
|
ตารางการเดินรถ
|
|
</h2>
|
|
<div class="prose prose-slate dark:prose-invert max-w-none">
|
|
<p>ดูและจัดการคิวการเดินรถทั้งหมดในรูปแบบปฏิทิน และรายการ (List View)</p>
|
|
|
|
<div class="mt-6 flex flex-col md:flex-row gap-4">
|
|
<div class="flex-1 bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
|
|
<div class="text-center mb-3 text-primary-500 text-3xl"><i class="fa-solid fa-calendar-days"></i></div>
|
|
<h4 class="font-bold text-center mb-2 text-slate-800 dark:text-white">มุมมองปฏิทิน (Calendar)</h4>
|
|
<p class="text-sm text-center text-slate-600 dark:text-slate-400">ดูคิวงานแบบรายเดือน รายสัปดาห์ หรือรายวัน สามารถคลิกที่กิจกรรมเพื่อดูรายละเอียดเพิ่มเติม</p>
|
|
</div>
|
|
<div class="flex-1 bg-slate-50 dark:bg-slate-800/50 p-4 rounded-xl border border-slate-200 dark:border-slate-700">
|
|
<div class="text-center mb-3 text-teal-500 text-3xl"><i class="fa-solid fa-list-ul"></i></div>
|
|
<h4 class="font-bold text-center mb-2 text-slate-800 dark:text-white">มุมมองรายการ (List)</h4>
|
|
<p class="text-sm text-center text-slate-600 dark:text-slate-400">ค้นหาและกรองตารางงานได้ง่ายขึ้น เรียงลำดับตามเวลา หรือค้นหาจากชื่อสถานที่</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-bold mt-6 mb-2">การเพิ่มตารางงานใหม่</h3>
|
|
<p class="text-sm">คลิก "เพิ่มตารางเดินรถ" เลือกรถยนต์, เลือกพนักงานขับรถ, ระบุสถานที่, จุดประสงค์ และเวลาไป-กลับ จากนั้นกดบันทึก</p>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if(isAdmin()): ?>
|
|
<!-- Settings Tab -->
|
|
<div x-show="activeTab === 'settings'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="glass-card p-6 md:p-8 border-t-4 border-t-primary-500">
|
|
<h2 class="text-2xl font-bold text-slate-800 dark:text-white mb-6 flex items-center gap-3">
|
|
<div class="bg-primary-100 dark:bg-primary-900/50 text-primary-600 dark:text-primary-400 p-2 rounded-lg">
|
|
<i class="fa-solid fa-users-gear"></i>
|
|
</div>
|
|
การตั้งค่าผู้ใช้งาน
|
|
<span class="text-xs bg-primary-100 text-primary-700 px-2 py-1 rounded-md ml-2 font-normal">เฉพาะผู้ดูแลระบบ</span>
|
|
</h2>
|
|
<div class="prose prose-slate dark:prose-invert max-w-none">
|
|
<p>จัดการสิทธิ์การเข้าใช้งานระบบสำหรับเจ้าหน้าที่โรงพยาบาล</p>
|
|
|
|
<div class="bg-warning/10 border-l-4 border-warning p-4 my-4 rounded-r-xl">
|
|
<p class="text-sm text-warning-700 dark:text-warning-400 m-0"><strong>ข้อควรระวัง:</strong> รหัสผ่านจะต้องมีความยาวอย่างน้อย 8 ตัวอักษร, ประกอบด้วยตัวพิมพ์ใหญ่, ตัวพิมพ์เล็ก, ตัวเลข และอักขระพิเศษ เพื่อความปลอดภัยสูงสุด</p>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-bold mt-6 mb-2">ระดับสิทธิ์ (Roles)</h3>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start gap-2">
|
|
<span class="bg-primary-100 text-primary-800 px-2 py-0.5 rounded text-xs font-bold mt-1 min-w-[100px] text-center">ผู้ดูแลระบบ</span>
|
|
<span class="text-sm mt-0.5">สามารถเข้าถึงทุกเมนู รวมถึงการตั้งค่าผู้ใช้งาน</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300 px-2 py-0.5 rounded text-xs font-bold mt-1 min-w-[100px] text-center">ผู้ใช้ทั่วไป</span>
|
|
<span class="text-sm mt-0.5">สามารถจัดการรถ, พนักงาน และตารางเดินรถได้ แต่ไม่สามารถเพิ่มหรือลบผู้ใช้งานระบบได้</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|