256 lines
26 KiB
PHP
256 lines
26 KiB
PHP
<?php
|
|
// views/manual.php
|
|
require_once("../core/auth.php");
|
|
require_once("../config/db.php");
|
|
require_once("../core/utils.php");
|
|
|
|
$current_page = 'manual.php';
|
|
$username = $_SESSION['account'];
|
|
$is_admin = function_exists('is_admin') ? is_admin($username) : false;
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<?php require_once("../components/head.php"); ?>
|
|
<style>
|
|
.manual-content h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: #047857;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.manual-content h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #334155;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.manual-content p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.7;
|
|
}
|
|
.manual-content ul {
|
|
list-style-type: disc;
|
|
padding-left: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.7;
|
|
}
|
|
.manual-content li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.manual-step {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 9999px;
|
|
background-color: #10b981;
|
|
color: white;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#f0fdf4] text-slate-700 font-sans antialiased selection:bg-emerald-200 selection:text-emerald-900 min-h-screen flex">
|
|
|
|
<?php require_once("../components/layout_sidebar.php"); ?>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col min-w-0 h-screen relative z-0">
|
|
<?php require_once("../components/layout_topbar.php"); ?>
|
|
|
|
<!-- Decorative Background -->
|
|
<div class="absolute top-[73px] left-0 w-full h-96 bg-gradient-to-b from-emerald-500/10 to-transparent pointer-events-none -z-10"></div>
|
|
|
|
<div class="p-4 md:p-8 lg:p-10 flex-1 overflow-y-auto">
|
|
<div class="max-w-4xl mx-auto">
|
|
|
|
<div class="mb-8 animate-enter">
|
|
<h1 class="text-3xl font-extrabold text-slate-800 tracking-tight flex items-center gap-3">
|
|
<span class="bg-emerald-100 text-emerald-600 p-2.5 rounded-2xl">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
|
</span>
|
|
คู่มือการใช้งานระบบ
|
|
</h1>
|
|
<p class="text-slate-500 mt-2 text-lg">เอกสารอธิบายวิธีการใช้งานฟังก์ชันต่างๆ ของระบบสารสนเทศ</p>
|
|
</div>
|
|
|
|
<!-- Navigation Tabs -->
|
|
<div class="bg-white/70 backdrop-blur-md rounded-2xl p-2 flex flex-wrap gap-2 mb-8 shadow-sm border border-white animate-enter" style="animation-delay: 100ms;">
|
|
<button onclick="showSection('dashboard')" id="btn-dashboard" class="px-5 py-2.5 rounded-xl font-semibold text-sm transition-all tab-btn bg-emerald-500 text-white shadow-md">หน้าหลัก (Dashboard)</button>
|
|
<button onclick="showSection('search')" id="btn-search" class="px-5 py-2.5 rounded-xl font-semibold text-sm transition-all tab-btn text-slate-600 hover:bg-emerald-50">ค้นหาเวชระเบียน</button>
|
|
<button onclick="showSection('2fa')" id="btn-2fa" class="px-5 py-2.5 rounded-xl font-semibold text-sm transition-all tab-btn text-slate-600 hover:bg-emerald-50">การใช้งาน 2FA</button>
|
|
<?php if ($is_admin): ?>
|
|
<button onclick="showSection('admin')" id="btn-admin" class="px-5 py-2.5 rounded-xl font-semibold text-sm transition-all tab-btn text-slate-600 hover:bg-emerald-50">การตั้งค่าระบบ (สำหรับแอดมิน)</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="glass-card p-6 md:p-10 animate-enter manual-content" style="animation-delay: 200ms;">
|
|
|
|
<!-- Dashboard Section -->
|
|
<div id="sec-dashboard" class="manual-section">
|
|
<h2 class="!mt-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
|
การใช้งานหน้าหลัก (Dashboard)
|
|
</h2>
|
|
<p>หน้าหลักของระบบถูกออกแบบมาเพื่อให้เจ้าหน้าที่สามารถดูสถิติและภาพรวมของการให้บริการในโรงพยาบาล ณ วันปัจจุบันได้อย่างรวดเร็ว ข้อมูลจะถูกดึงมาจากฐานข้อมูล HOSxP โดยตรง</p>
|
|
|
|
<h3>ภาพรวมสถิติประจำวัน</h3>
|
|
<ul>
|
|
<li><strong>ผู้ป่วยนอก (OPD):</strong> แสดงจำนวนผู้ป่วยที่ลงทะเบียนรับบริการในแผนกผู้ป่วยนอกของวันนี้</li>
|
|
<li><strong>ผู้ป่วยใน (IPD):</strong> แสดงจำนวนผู้ป่วยที่กำลังนอนพักรักษาตัวอยู่ในโรงพยาบาลขณะนี้ (Admit)</li>
|
|
<li><strong>ผู้ป่วยใหม่ (New Patient):</strong> แสดงจำนวนผู้ป่วยที่เพิ่งได้รับการขึ้นทะเบียนประวัติใหม่ (ทำบัตรใหม่) ในวันนี้</li>
|
|
<li><strong>ยอดนัดหมาย (Appointments):</strong> แสดงจำนวนผู้ป่วยที่มีคิวนัดหมายมารับบริการในวันนี้ทั้งหมด</li>
|
|
</ul>
|
|
|
|
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg my-6">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<p class="text-blue-800 text-sm mb-0">ข้อมูลสถิติในหน้า Dashboard จะดึงข้อมูลแบบ Real-time ตามฐานข้อมูลหลัก หากมีการลงทะเบียนผู้ป่วยใหม่ ตัวเลขในหน้านี้จะอัปเดตโดยอัตโนมัติเมื่อทำการรีเฟรชหน้าเว็บ (F5)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Section -->
|
|
<div id="sec-search" class="manual-section hidden">
|
|
<h2 class="!mt-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
|
การค้นหาเวชระเบียนผู้ป่วย
|
|
</h2>
|
|
<p>เมนูนี้ใช้สำหรับค้นหาข้อมูลประวัติผู้ป่วย (Patient Profile) โดยสามารถค้นหาได้จากหลายเงื่อนไข เพื่ออำนวยความสะดวกในการค้นหาที่รวดเร็วและแม่นยำที่สุด</p>
|
|
|
|
<h3>วิธีการค้นหาข้อมูล</h3>
|
|
<p>คุณสามารถพิมพ์ข้อมูลอย่างใดอย่างหนึ่งลงในช่องค้นหา:</p>
|
|
<ul>
|
|
<li><strong>HN (Hospital Number):</strong> กรอกเลขประจำตัวผู้ป่วย (เช่น 0001234)</li>
|
|
<li><strong>หมายเลขบัตรประชาชน:</strong> กรอกเลขบัตรประชาชน 13 หลัก โดยไม่ต้องใส่เครื่องหมายขีด (เช่น 1101234567890)</li>
|
|
<li><strong>ชื่อ-นามสกุล:</strong> สามารถกรอกชื่อ หรือนามสกุล หรือทั้งชื่อและนามสกุล โดยเว้นวรรค (เช่น "สมชาย รักดี" หรือพิมพ์แค่ "สมชาย")</li>
|
|
</ul>
|
|
|
|
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg my-6">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-amber-500 mt-0.5 mr-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
|
<div class="text-amber-800 text-sm">
|
|
<strong>เงื่อนไขการค้นหาที่ต้องระวัง:</strong>
|
|
<ul class="mb-0 mt-1 pl-4">
|
|
<li class="mb-1"><strong>ค้นหาด้วย HN หรือ บัตรประชาชน:</strong> ต้องกรอกตัวเลขให้ครบถ้วนและถูกต้อง (บัตรประชาชน 13 หลัก)</li>
|
|
<li class="mb-0"><strong>ค้นหาด้วย ชื่อ-นามสกุล:</strong> ต้องพิมพ์ความยาวอย่างน้อย <strong>2 ตัวอักษรขึ้นไป</strong> หากพิมพ์น้อยกว่า 2 ตัวอักษร ระบบจะไม่อนุญาตให้ค้นหาเพื่อป้องกันการดึงข้อมูลที่มีปริมาณมากเกินไป</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>ขั้นตอนการดูรายละเอียดผู้ป่วย</h3>
|
|
<p><span class="manual-step">1</span> พิมพ์คำค้นหาในช่องค้นหา แล้วคลิกปุ่ม <strong>"ค้นหา"</strong> หรือกดปุ่ม Enter บนคีย์บอร์ด</p>
|
|
<p><span class="manual-step">2</span> ระบบจะแสดงรายชื่อผู้ป่วยที่ตรงกับเงื่อนไข หากพบหลายรายการ ระบบจะแสดงรายการทั้งหมด (สูงสุดตามที่ตั้งค่าไว้ในระบบ)</p>
|
|
<p><span class="manual-step">3</span> คลิกที่ปุ่ม <strong>"ดูประวัติ"</strong> ท้ายรายชื่อผู้ป่วยที่ต้องการ</p>
|
|
<p><span class="manual-step">4</span> ระบบจะพาไปยังหน้า <strong>รายละเอียดผู้ป่วย (Patient Detail)</strong> ซึ่งจะประกอบไปด้วย ข้อมูลทั่วไป, ข้อมูลการแพ้ยา, โรคประจำตัว และประวัติการรับบริการ (Visit History) ย้อนหลัง</p>
|
|
</div>
|
|
|
|
<!-- 2FA Section -->
|
|
<div id="sec-2fa" class="manual-section hidden">
|
|
<h2 class="!mt-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
การใช้งานระบบยืนยันตัวตน 2 ขั้นตอน (2FA)
|
|
</h2>
|
|
<p>เพื่อความปลอดภัยของข้อมูล ระบบรองรับการยืนยันตัวตนแบบ 2 ขั้นตอน (Two-Factor Authentication) ผ่านแอปพลิเคชัน Google Authenticator หรือแอปที่รองรับ TOTP</p>
|
|
|
|
<h3>สำหรับเจ้าหน้าที่ทั่วไป (การสแกนและล็อกอิน)</h3>
|
|
<p><span class="manual-step">1</span> ดาวน์โหลดแอปพลิเคชัน <strong>Google Authenticator</strong> ลงในสมาร์ทโฟน (รองรับทั้ง iOS และ Android)</p>
|
|
<p><span class="manual-step">2</span> ติดต่อผู้ดูแลระบบ (Admin) เพื่อขอให้ระบบสร้าง QR Code สำหรับบัญชีของคุณ</p>
|
|
<p><span class="manual-step">3</span> เปิดแอป Google Authenticator กดปุ่ม <strong>+</strong> และเลือก <strong>"Scan a QR code"</strong></p>
|
|
<p><span class="manual-step">4</span> นำสมาร์ทโฟนไปสแกนหน้าจอ QR Code ที่ผู้ดูแลระบบแสดงให้ เมื่อสแกนสำเร็จ ในแอปจะแสดงชื่อบัญชีและตัวเลข 6 หลักที่เปลี่ยนไปทุกๆ 30 วินาที</p>
|
|
<p><span class="manual-step">5</span> ในการเข้าใช้งานระบบ ให้กรอก Username, Password และตามด้วย <strong>รหัส 6 หลักจากแอปพลิเคชัน</strong> ในหน้า Login</p>
|
|
|
|
<?php if ($is_admin): ?>
|
|
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded-r-lg my-6">
|
|
<h3 class="!mt-0 text-indigo-800">สำหรับผู้ดูแลระบบ (การตั้งค่าให้เจ้าหน้าที่)</h3>
|
|
<p class="text-sm text-indigo-700 mb-2">แอดมินสามารถสร้าง QR Code ให้ผู้ใช้งานได้ดังนี้:</p>
|
|
<p class="text-sm text-indigo-700 mb-1"><span class="manual-step !bg-indigo-500 !w-5 !h-5 !text-[11px]">1</span> ไปที่เมนู <strong>"การตั้งค่าระบบ" (Admin Settings)</strong> ในแถบด้านซ้าย</p>
|
|
<p class="text-sm text-indigo-700 mb-1"><span class="manual-step !bg-indigo-500 !w-5 !h-5 !text-[11px]">2</span> ไปที่แท็บ <strong>"จัดการผู้ใช้งาน"</strong></p>
|
|
<p class="text-sm text-indigo-700 mb-1"><span class="manual-step !bg-indigo-500 !w-5 !h-5 !text-[11px]">3</span> ค้นหาชื่อเจ้าหน้าที่ที่ต้องการ แล้วคลิกปุ่ม <strong>"จัดการ 2FA"</strong> (รูปกุญแจ) ด้านขวาสุด</p>
|
|
<p class="text-sm text-indigo-700 mb-1"><span class="manual-step !bg-indigo-500 !w-5 !h-5 !text-[11px]">4</span> กดปุ่ม <strong>"สร้าง QR Code ใหม่"</strong></p>
|
|
<p class="text-sm text-indigo-700 mb-1"><span class="manual-step !bg-indigo-500 !w-5 !h-5 !text-[11px]">5</span> ให้เจ้าหน้าที่สแกน QR Code จากนั้นกดปุ่ม <strong>"บันทึกข้อมูล"</strong></p>
|
|
<p class="text-sm text-indigo-700 mb-0 mt-2"><em>* หากต้องการยกเลิกการใช้ 2FA สำหรับผู้ใช้นั้น ให้กดปุ่ม <strong>"รีเซ็ต (ล้างค่า 2FA)"</strong></em></p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if ($is_admin): ?>
|
|
<!-- Admin Settings Section -->
|
|
<div id="sec-admin" class="manual-section hidden">
|
|
<h2 class="!mt-0">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
|
การตั้งค่าระบบ (สำหรับผู้ดูแลระบบ)
|
|
</h2>
|
|
<p>เมนูนี้สงวนสิทธิ์เฉพาะผู้ใช้ที่มีสถานะเป็น Admin ในระบบ HOSxP เท่านั้น โดยใช้สำหรับตั้งค่าการแสดงผลต่างๆ ของเว็บแอปพลิเคชัน</p>
|
|
|
|
<h3>การตั้งค่าทั่วไป (General Settings)</h3>
|
|
<ul>
|
|
<li><strong>ชื่อโรงพยาบาล (Hospital Name):</strong> ข้อความที่จะแสดงเป็นหัวข้อใหญ่ที่หน้า Login</li>
|
|
<li><strong>ข้อความต้อนรับ (Welcome Text):</strong> ข้อความรองที่หน้า Login</li>
|
|
<li><strong>ข้อความ Footer (Footer Text):</strong> ข้อความลิขสิทธิ์ด้านล่างสุดของเว็บ (รองรับตัวแปร {YEAR} สำหรับปีปัจจุบัน)</li>
|
|
</ul>
|
|
|
|
<h3>การตั้งค่าข้อจำกัด (Limits & Performance)</h3>
|
|
<ul>
|
|
<li><strong>จำกัดการค้นหา (Max Search Results):</strong> กำหนดจำนวนรายชื่อผู้ป่วยสูงสุดที่จะแสดงผลในการค้นหาแต่ละครั้ง (ป้องกันการดึงข้อมูลที่มากเกินไปจนทำให้ฐานข้อมูลทำงานหนัก)</li>
|
|
<li><strong>จำกัดประวัติ Visit (Max Visit History):</strong> กำหนดจำนวนประวัติการมารับบริการย้อนหลังที่จะแสดงในหน้าประวัติผู้ป่วย</li>
|
|
<li><strong>ระยะเวลา Session (Session Timeout):</strong> เวลา(นาที) ที่ระบบจะบังคับให้ออกจากระบบอัตโนมัติ หากไม่มีการเคลื่อนไหวหรือใช้งานหน้าจอ (เพื่อความปลอดภัยของข้อมูล)</li>
|
|
</ul>
|
|
|
|
<h3>ระบบความปลอดภัย (Security Settings)</h3>
|
|
<ul>
|
|
<li><strong>ระบบล็อกอิน 2 ขั้นตอน (Enable 2FA):</strong> เปิดหรือปิดการบังคับให้ผู้ใช้งานต้องกรอกรหัส 2FA (Google Authenticator) ทุกครั้งที่ล็อกอิน (หากปิด จะใช้เพียงแค่ Username/Password)</li>
|
|
<li><strong>รหัส 2FA หลัก (Master 2FA Code):</strong> ในกรณีฉุกเฉิน หรือยังไม่ได้ผูกแอปพลิเคชัน สามารถตั้งรหัส Master Code เพื่อใช้ผ่านระบบ 2FA ได้ชั่วคราว</li>
|
|
</ul>
|
|
|
|
<div class="bg-rose-50 border-l-4 border-rose-500 p-4 rounded-r-lg my-6">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-rose-500 mt-0.5 mr-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
|
<p class="text-rose-800 text-sm mb-0"><strong>คำเตือน:</strong> การแก้ไขการตั้งค่าจะส่งผลต่อผู้ใช้งานทุกคนในระบบทันที ควรตรวจสอบข้อมูลให้ถูกต้องก่อนกดบันทึก</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<?php require_once("../components/layout_footer.php"); ?>
|
|
</main>
|
|
|
|
<script>
|
|
function showSection(sectionId) {
|
|
// Hide all sections
|
|
document.querySelectorAll('.manual-section').forEach(el => {
|
|
el.classList.add('hidden');
|
|
});
|
|
|
|
// Reset tab styles
|
|
document.querySelectorAll('.tab-btn').forEach(el => {
|
|
el.classList.remove('bg-emerald-500', 'text-white', 'shadow-md');
|
|
el.classList.add('text-slate-600', 'hover:bg-emerald-50');
|
|
});
|
|
|
|
// Show target section
|
|
document.getElementById('sec-' + sectionId).classList.remove('hidden');
|
|
|
|
// Highlight target tab
|
|
const activeBtn = document.getElementById('btn-' + sectionId);
|
|
activeBtn.classList.remove('text-slate-600', 'hover:bg-emerald-50');
|
|
activeBtn.classList.add('bg-emerald-500', 'text-white', 'shadow-md');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|