294 lines
25 KiB
PHP
294 lines
25 KiB
PHP
<!-- Hero Banner -->
|
|
<div class="card shadow-sm border-0 mb-4 bg-primary text-white overflow-hidden" style="border-radius: 15px;">
|
|
<div class="card-body p-4 p-md-5 position-relative">
|
|
<div class="position-absolute top-0 end-0 opacity-10 pt-3 pe-3">
|
|
<i class="fa-solid fa-book-open-reader fa-10x"></i>
|
|
</div>
|
|
<div class="position-relative" style="z-index: 1;">
|
|
<h2 class="fw-bold mb-2">คู่มือการใช้งานระบบ</h2>
|
|
<p class="lead mb-0 opacity-75">ศูนย์รวมคำแนะนำและขั้นตอนการใช้งานสำหรับทุกระดับสิทธิ์</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Sidebar Navigation -->
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="card shadow-sm border-0" style="border-radius: 15px;">
|
|
<div class="card-header bg-white py-3 border-bottom-0 pt-4">
|
|
<h6 class="m-0 font-weight-bold text-muted text-uppercase" style="letter-spacing: 1px; font-size: 0.85rem;">หมวดหมู่คู่มือ</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush" id="manual-tab" role="tablist" style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden;">
|
|
<a class="list-group-item list-group-item-action active p-3 border-0" id="list-user-list" data-bs-toggle="list" href="#list-user" role="tab">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
|
|
<i class="fa-solid fa-user"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0 fw-bold">ผู้ใช้ทั่วไป</h6>
|
|
<small class="opacity-75">การขอเดินทางและติดตาม</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="list-group-item list-group-item-action p-3 border-0" id="list-approver-list" data-bs-toggle="list" href="#list-approver" role="tab">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
|
|
<i class="fa-solid fa-user-tie"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0 fw-bold">ผู้อนุมัติ</h6>
|
|
<small class="opacity-75">การพิจารณาคำขอ</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php if ($isAdmin): ?>
|
|
<a class="list-group-item list-group-item-action p-3 border-0" id="list-admin-list" data-bs-toggle="list" href="#list-admin" role="tab">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
|
|
<i class="fa-solid fa-user-shield"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0 fw-bold">ผู้ดูแลระบบ</h6>
|
|
<small class="opacity-75">การตั้งค่าและจัดการระบบ</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="col-lg-9">
|
|
<div class="card shadow-sm border-0 mb-4" style="border-radius: 15px;">
|
|
<div class="card-body p-4 p-lg-5">
|
|
<div class="tab-content" id="nav-tabContent">
|
|
|
|
<!-- ส่วนของผู้ใช้ทั่วไป -->
|
|
<div class="tab-pane fade show active" id="list-user" role="tabpanel">
|
|
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
|
<i class="fa-solid fa-user fa-2x text-primary me-3"></i>
|
|
<h4 class="fw-bold mb-0">คู่มือสำหรับผู้ใช้งานทั่วไป</h4>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 bg-light rounded-4">
|
|
<div class="card-body p-4">
|
|
<div class="mb-3">
|
|
<span class="badge bg-primary px-3 py-2 rounded-pill"><i class="fa-solid fa-pen me-1"></i> ขั้นตอนที่ 1</span>
|
|
</div>
|
|
<h5 class="fw-bold text-dark">การสร้างคำขอเดินทาง</h5>
|
|
<p class="text-muted small mb-3">คุณสามารถสร้างคำขอใหม่ได้จากเมนู <strong>"ขออนุมัติเดินทาง"</strong> หรือหน้าแดชบอร์ด</p>
|
|
<ul class="text-muted small ps-3 mb-0">
|
|
<li class="mb-2">กรอกรายละเอียดสถานที่ วันที่ และ <strong class="text-primary">แหล่งงบประมาณ</strong> ให้ครบถ้วน</li>
|
|
<li class="mb-2">สามารถแจกแจง <strong class="text-primary">รายละเอียดค่าใช้จ่าย</strong> (ค่าที่พัก, ค่าเบี้ยเลี้ยง, ค่าพาหนะ, ค่าลงทะเบียน) ได้ในระบบ</li>
|
|
<li class="mb-2">เมื่อสร้างคำขอสำเร็จ ระบบจะสร้าง <strong class="text-success">"เลขที่หนังสือเดินทาง"</strong> (เช่น พ.ศ./Running) ให้อัตโนมัติ</li>
|
|
<li>ระบบจะส่งคำขอให้ผู้อนุมัติของคุณโดยอัตโนมัติ ตามที่ Admin ตั้งค่าไว้</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-0 bg-light rounded-4">
|
|
<div class="card-body p-4">
|
|
<div class="mb-3">
|
|
<span class="badge bg-info px-3 py-2 rounded-pill"><i class="fa-solid fa-magnifying-glass me-1"></i> ขั้นตอนที่ 2</span>
|
|
</div>
|
|
<h5 class="fw-bold text-dark">การติดตามสถานะและรายงาน</h5>
|
|
<p class="text-muted small mb-3">ตรวจสอบสถานะได้ที่ <strong>"แดชบอร์ด"</strong> และดูสถิติที่ <strong>"รายงานสรุป"</strong></p>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-warning text-dark me-2" style="width: 70px;">รออนุมัติ</span>
|
|
<small class="text-muted">กำลังรอพิจารณา (สามารถแก้ไขได้)</small>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-success me-2" style="width: 70px;">อนุมัติแล้ว</span>
|
|
<small class="text-muted">คลิก <i class="fa-solid fa-print mx-1"></i> เพื่อพิมพ์แบบฟอร์ม</small>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-danger me-2" style="width: 70px;">ไม่อนุมัติ</span>
|
|
<small class="text-muted">คำขอถูกปฏิเสธ ดูหมายเหตุได้</small>
|
|
</div>
|
|
<hr class="my-2">
|
|
<small class="text-muted d-block"><i class="fa-solid fa-chart-pie me-1 text-primary"></i> <strong>รายงานสรุป:</strong> สามารถเลือกกรองสถิติตามปี พ.ศ. และ Export เป็น CSV ได้</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mt-1">
|
|
<div class="col-12">
|
|
<div class="card border-0 bg-light rounded-4 shadow-sm">
|
|
<div class="card-body p-4">
|
|
<div class="mb-3">
|
|
<span class="badge bg-danger px-3 py-2 rounded-pill"><i class="fa-solid fa-ban me-1"></i> ขั้นตอนพิเศษ (กรณีมีการเปลี่ยนแปลงหน้างาน)</span>
|
|
</div>
|
|
<h5 class="fw-bold text-dark">การขอยกเลิก / ขอเปลี่ยนแปลงกำหนดการ</h5>
|
|
<p class="text-muted small mb-3">เมื่อคำขอได้รับการ <strong>"อนุมัติแล้ว"</strong> แต่มีการเปลี่ยนแปลงจากผู้จัดงาน คุณสามารถดำเนินการเพิ่มเติมได้จากหน้าแดชบอร์ด:</p>
|
|
<ul class="text-muted small ps-3 mb-0">
|
|
<li class="mb-2"><strong>ขอยกเลิก:</strong> กดปุ่มไอคอน <i class="fa-solid fa-ban text-danger mx-1"></i> พร้อมระบุเหตุผล (เช่น ผู้จัดประกาศยกเลิกงาน)</li>
|
|
<li class="mb-2"><strong>ขอเปลี่ยนแปลง:</strong> กดปุ่มไอคอน <i class="fa-solid fa-pen text-warning mx-1"></i> พร้อมระบุรายละเอียดที่เปลี่ยนแปลง (เช่น ขอเลื่อนวันเดินทาง)</li>
|
|
<li><span class="text-danger fw-bold">สำคัญ:</span> คำขอดังกล่าวจะถูกเปลี่ยนสถานะเป็น <span class="badge bg-danger">ขอยกเลิก</span> หรือ <span class="badge bg-warning text-dark">ขอเปลี่ยนแปลง</span> และจะถูกส่งกลับไปให้ <strong>ผู้อนุมัติ</strong> พิจารณาอีกครั้ง</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ส่วนของผู้อนุมัติ -->
|
|
<div class="tab-pane fade" id="list-approver" role="tabpanel">
|
|
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
|
<i class="fa-solid fa-user-tie fa-2x text-warning me-3"></i>
|
|
<h4 class="fw-bold mb-0">คู่มือสำหรับผู้อนุมัติ</h4>
|
|
</div>
|
|
|
|
<div class="card border-0 bg-warning bg-opacity-10 rounded-4 mb-4">
|
|
<div class="card-body p-4">
|
|
<h5 class="fw-bold text-warning-emphasis"><i class="fa-regular fa-bell me-2"></i> การรับการแจ้งเตือน</h5>
|
|
<p class="text-muted small mb-0">
|
|
เมื่อมีคำขอที่ต้องให้คุณพิจารณา ระบบจะส่งการแจ้งเตือนไปหาคุณ (หากองค์กรของคุณเปิดใช้งาน LINE หรือ Telegram) หรือคุณสามารถหมั่นเข้ามาตรวจสอบได้ที่เมนู <strong>"พิจารณาอนุมัติ"</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h5 class="fw-bold mt-4"><i class="fa-solid fa-list-check text-warning me-2"></i> ขั้นตอนการอนุมัติเอกสาร</h5>
|
|
<div class="timeline mt-3 px-3 border-start border-3 border-warning ms-2">
|
|
<div class="position-relative mb-4 ps-4">
|
|
<div class="position-absolute bg-warning rounded-circle" style="width: 12px; height: 12px; left: -8px; top: 5px;"></div>
|
|
<h6 class="fw-bold">1. เปิดรายการคำขอ</h6>
|
|
<p class="text-muted small">ไปที่เมนูพิจารณาอนุมัติ และคลิกปุ่ม <span class="badge bg-primary">พิจารณา</span> ที่รายการที่ต้องการ</p>
|
|
</div>
|
|
<div class="position-relative mb-4 ps-4">
|
|
<div class="position-absolute bg-warning rounded-circle" style="width: 12px; height: 12px; left: -8px; top: 5px;"></div>
|
|
<h6 class="fw-bold">2. ตรวจสอบข้อมูล</h6>
|
|
<p class="text-muted small">ระบบจะแสดงหน้าต่าง (Modal) ให้คุณตรวจสอบสถานที่ วันที่ และงบประมาณโดยละเอียด</p>
|
|
</div>
|
|
<div class="position-relative ps-4">
|
|
<div class="position-absolute bg-warning rounded-circle" style="width: 12px; height: 12px; left: -8px; top: 5px;"></div>
|
|
<h6 class="fw-bold">3. บันทึกผล</h6>
|
|
<p class="text-muted small mb-0">คุณสามารถระบุ <strong>"หมายเหตุ"</strong> เพื่อสื่อสารกับผู้ขอได้ จากนั้นคลิกปุ่ม <span class="text-success fw-bold">อนุมัติ</span> หรือ <span class="text-danger fw-bold">ไม่อนุมัติ</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ส่วนของผู้ดูแลระบบ -->
|
|
<?php if ($isAdmin): ?>
|
|
<div class="tab-pane fade" id="list-admin" role="tabpanel">
|
|
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
|
<i class="fa-solid fa-user-shield fa-2x text-danger me-3"></i>
|
|
<h4 class="fw-bold mb-0">คู่มือสำหรับผู้ดูแลระบบ (Admin)</h4>
|
|
</div>
|
|
|
|
<div class="alert alert-danger bg-danger bg-opacity-10 border-0 text-danger-emphasis rounded-4 mb-4" role="alert">
|
|
<i class="fa-solid fa-lock me-2"></i> เนื้อหาส่วนนี้จะแสดงผลให้เฉพาะผู้ที่มีสิทธิ์ Admin เท่านั้น
|
|
</div>
|
|
|
|
<!-- Accordion for Admin Manual -->
|
|
<div class="accordion accordion-flush" id="adminManualAccordion">
|
|
|
|
<!-- Item 1 -->
|
|
<div class="accordion-item border-0 mb-3 bg-light rounded-4 overflow-hidden">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-transparent fw-bold text-dark shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#adminCollapseOne">
|
|
<i class="fa-solid fa-users-gear text-info me-3"></i> 1. การจัดการสิทธิ์ (Roles) และสายงานอนุมัติ
|
|
</button>
|
|
</h2>
|
|
<div id="adminCollapseOne" class="accordion-collapse collapse" data-bs-parent="#adminManualAccordion">
|
|
<div class="accordion-body text-muted small pt-0 pb-4">
|
|
<ul>
|
|
<li class="mb-2"><strong>จัดการสิทธิ์:</strong> ไปที่หน้าตั้งค่า > จัดการสิทธิ์ เพื่อพิมพ์ค้นหาชื่อพนักงาน และมอบหมาย Role เช่น Admin หรือ Approver</li>
|
|
<li><strong>สายงานอนุมัติ:</strong> ไปที่หน้าตั้งค่า > สายงานอนุมัติ
|
|
<ul class="mt-1">
|
|
<li>สามารถ <strong>ค้นหาชื่อ-สกุล</strong> ของพนักงานและผู้อนุมัติจากฐานข้อมูล HR ได้โดยตรง</li>
|
|
<li>สามารถกดปุ่ม <i class="fa-solid fa-trash text-danger"></i> ลบรายการรายบุคคลออกจากตารางได้ทันที</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 2 -->
|
|
<div class="accordion-item border-0 mb-3 bg-light rounded-4 overflow-hidden">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-transparent fw-bold text-dark shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#adminCollapseTwo">
|
|
<i class="fa-solid fa-file-pdf text-danger me-3"></i> 2. การออกแบบฟอร์ม PDF ต้นฉบับ
|
|
</button>
|
|
</h2>
|
|
<div id="adminCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#adminManualAccordion">
|
|
<div class="accordion-body text-muted small pt-0 pb-4">
|
|
<p class="mb-2">เมนู <strong>"ฟอร์ม PDF ต้นฉบับ"</strong> ในหน้าตั้งค่าระบบ ใช้สำหรับสร้างเอกสารฟอร์มใบปะหน้า</p>
|
|
<ul>
|
|
<li class="mb-1">อัปโหลดไฟล์ PDF เปล่าที่เป็นฟอร์มขององค์กร</li>
|
|
<li class="mb-1">ลาก (Drag) แท็กตัวแปรต่างๆ จากแถบด้านซ้าย ไปวางทับพิกัดบนฟอร์ม PDF ให้ตรงช่อง (Drop)</li>
|
|
<li class="mb-1">กดบันทึกพิกัด เมื่อผู้ใช้งานสั่งพิมพ์ ระบบจะนำพิกัดเหล่านี้ไปวางทับใน PDF อัตโนมัติ</li>
|
|
<li><span class="text-primary fw-bold">ใหม่!</span> เพิ่มตัวแปร <code class="text-info">{trip_running_number}</code> สำหรับแสดงเลขที่หนังสือเดินทาง และ <code class="text-info">{current_date}</code> สำหรับวันที่พิมพ์เอกสารปัจจุบัน</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item 3 -->
|
|
<div class="accordion-item border-0 mb-3 bg-light rounded-4 overflow-hidden">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed bg-transparent fw-bold text-dark shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#adminCollapseThree">
|
|
<i class="fa-solid fa-bell text-success me-3"></i> 3. การเชื่อมต่อและระบบแจ้งเตือน
|
|
</button>
|
|
</h2>
|
|
<div id="adminCollapseThree" class="accordion-collapse collapse" data-bs-parent="#adminManualAccordion">
|
|
<div class="accordion-body text-muted small pt-0 pb-4">
|
|
<ul>
|
|
<li class="mb-2"><strong>Google Sheets:</strong> ตั้งค่าดึงข้อมูลจากไฟล์ Spreadsheet ภายนอกเข้าสู่ระบบผ่าน API หรือ Public Link</li>
|
|
<li class="mb-2"><strong>LINE Notify:</strong> นำ Token ของ LINE Notify มากรอกเพื่อให้ระบบแจ้งเตือนเข้ากลุ่ม LINE</li>
|
|
<li><strong>Telegram:</strong> ระบุ Bot Token และ Chat ID สำหรับรับการแจ้งเตือนทาง Telegram</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Custom Styling for the Manual Page */
|
|
.list-group-item.active {
|
|
background-color: transparent !important;
|
|
color: #0d6efd !important;
|
|
font-weight: 600;
|
|
border-left: 4px solid #0d6efd !important;
|
|
}
|
|
.list-group-item.active .bg-opacity-10 {
|
|
background-color: #0d6efd !important;
|
|
color: white !important;
|
|
}
|
|
.accordion-button:not(.collapsed) {
|
|
color: inherit;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.timeline {
|
|
position: relative;
|
|
}
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 14px;
|
|
width: 3px;
|
|
background: #ffc107;
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|