gravity/จัดการข้อมูลเงินเดือนเจ้าหน้าที่โรงพยาบาล/app/Views/manual/index.php

<?php include '../app/Views/layouts/header.php'; ?>

<div class="p-4 sm:ml-64 bg-slate-50 dark:bg-slate-900 min-h-screen pt-20 transition-colors duration-300">
    <div class="max-w-5xl mx-auto">
        <!-- Header -->
        <div class="bg-gradient-to-r from-sky-500 to-indigo-600 rounded-2xl p-8 mb-8 text-white shadow-lg relative overflow-hidden">
            <div class="relative z-10">
                <h1 class="text-3xl font-bold mb-2">คู่มือการใช้งานระบบ</h1>
                <p class="text-sky-100 text-lg">ระบบจัดการข้อมูลเงินเดือนเจ้าหน้าที่โรงพยาบาล</p>
            </div>
            <!-- Decorative circle -->
            <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 rounded-full bg-white opacity-10"></div>
            <div class="absolute bottom-0 right-16 -mb-16 w-32 h-32 rounded-full bg-white opacity-10"></div>
        </div>

        <!-- TOC & Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Sidebar TOC (Desktop) -->
            <div class="hidden lg:block lg:col-span-1">
                <div class="sticky top-24 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-5">
                    <h3 class="font-bold text-slate-800 dark:text-white mb-4">สารบัญ</h3>
                    <ul class="space-y-3 text-sm font-medium text-slate-600 dark:text-slate-400">
                        <li><a href="#intro" class="hover:text-sky-500 transition-colors">1. แนะนำระบบ</a></li>
                        <li><a href="#dashboard" class="hover:text-sky-500 transition-colors">2. แดชบอร์ด (Dashboard)</a></li>
                        <li><a href="#payroll" class="hover:text-sky-500 transition-colors">3. ข้อมูลเงินเดือน</a></li>
                        <li><a href="#print" class="hover:text-sky-500 transition-colors">4. พิมพ์สลิปเงินเดือน</a></li>
                        <li><a href="#kiosk" class="hover:text-sky-500 transition-colors">5. ระบบบริการตนเอง (Kiosk)</a></li>
                        <li><a href="#users" class="hover:text-sky-500 transition-colors">6. ผู้ใช้งานระบบและประวัติ</a></li>
                        <li><a href="#settings" class="hover:text-sky-500 transition-colors">7. ตั้งค่าระบบ</a></li>
                        <li><a href="#profile" class="hover:text-sky-500 transition-colors">8. ข้อมูลส่วนตัว</a></li>
                    </ul>
                </div>
            </div>

            <!-- Content Area -->
            <div class="lg:col-span-3 space-y-8">
                
                <!-- 1. Intro -->
                <section id="intro" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-sky-100 dark:bg-sky-900/50 flex items-center justify-center text-sky-500 mr-4">
                            <span class="font-bold text-lg">1</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">แนะนำระบบ</h2>
                    </div>
                    <div class="prose dark:prose-invert max-w-none text-slate-600 dark:text-slate-300">
                        <p>ระบบจัดการข้อมูลเงินเดือนเจ้าหน้าที่โรงพยาบาล ถูกออกแบบมาเพื่ออำนวยความสะดวกในการนำเข้าข้อมูลเงินเดือนจากไฟล์ Excel, คำนวณรายรับ-รายจ่าย, และพิมพ์สลิปเงินเดือนสำหรับเจ้าหน้าที่ โดยมีระบบจัดการสิทธิ์ผู้ใช้งานและบันทึกประวัติการใช้งานอย่างครบถ้วน</p>
                    </div>
                </section>

                <!-- 2. Dashboard -->
                <section id="dashboard" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-500 mr-4">
                            <span class="font-bold text-lg">2</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">แดชบอร์ดภาพรวม (Dashboard)</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>หน้าแรกของระบบ จะแสดงข้อมูลสรุปที่สำคัญ ได้แก่:</p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>สรุปข้อมูลล่าสุด:</strong> แสดงงวดเดือน/ปีล่าสุดที่มีข้อมูลในระบบ พร้อมจำนวนพนักงานและยอดเงินเดือนสุทธิรวม</li>
                            <li><strong>กราฟภาพรวมรายรับ-รายจ่าย:</strong> แสดงกราฟแท่งคู่เปรียบเทียบรายรับและรายจ่ายในแต่ละเดือนของปี
                                <ul class="list-circle pl-5 mt-1 text-sm text-slate-500 dark:text-slate-400">
                                    <li>สามารถเปลี่ยนปี พ.ศ. ที่ต้องการดูข้อมูลได้จากปุ่มเลือกมุมขวาบนของกราฟ</li>
                                    <li>จำนวนปีย้อนหลังในตัวเลือก สามารถกำหนดได้ที่หน้า <a href="#settings" class="text-sky-500 hover:underline">ตั้งค่าระบบทั่วไป</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>

                <!-- 3. Payroll -->
                <section id="payroll" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center text-emerald-500 mr-4">
                            <span class="font-bold text-lg">3</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">การจัดการข้อมูลเงินเดือน</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>เมนูหลักสำหรับการจัดการงวดเงินเดือน แบ่งเป็น 3 ส่วนหลักคือ การเตรียมข้อมูล, การนำเข้า, และการแก้ไข:</p>
                        
                        <h4 class="font-semibold text-slate-800 dark:text-white mt-4">3.1 การสร้างและจัดการงวด</h4>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>สร้างงวดใหม่:</strong> กดปุ่ม "สร้างงวดเงินเดือน" เลือกเดือนและปีที่ต้องการ (ระบบป้องกันการสร้างงวดซ้ำ)</li>
                            <li><strong>ดึงข้อมูลจากเดือนก่อน:</strong> หากต้องการใช้ฐานข้อมูลเดิม กด "คัดลอกข้อมูลจากเดือนก่อนหน้า" เพื่อคัดลอกรายชื่อ ฐานเงินเดือน รายรับ และรายจ่ายทั้งหมดมายังเดือนปัจจุบัน เพื่อประหยัดเวลาพิมพ์ใหม่</li>
                        </ul>

                        <h4 class="font-semibold text-slate-800 dark:text-white mt-4">3.2 การนำเข้าข้อมูล (Excel / CSV / TXT)</h4>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>ดาวน์โหลด Template:</strong> ในหน้ารายละเอียดงวด กด "นำเข้าข้อมูล" คุณสามารถโหลดไฟล์แม่แบบ <code>.xlsx</code> เพื่อกรอกข้อมูล</li>
                            <li><strong>อัปโหลดไฟล์ Excel:</strong> อัปโหลดไฟล์ที่กรอกข้อมูลครบถ้วน โดยระบบจะตรวจสอบความถูกต้องของหัวคอลัมน์อัตโนมัติ 
                                <br><span class="text-sm bg-amber-50 text-amber-700 p-1 rounded inline-block mt-1">⚠️ ข้อควรระวัง: หากชื่อคอลัมน์ใน Excel ไม่ตรงกับที่มีในระบบ (ตั้งค่า > หมวดหมู่รายรับ/รายจ่าย) ระบบจะไม่สามารถนำเข้าข้อมูลนั้นได้</span>
                            </li>
                            <li><strong>อัปโหลดไฟล์ของกรมบัญชีกลาง (.txt):</strong> 
                                <ul class="list-circle pl-5 mt-1 text-sm text-slate-500 dark:text-slate-400">
                                    <li>รองรับการนำเข้าไฟล์ Text (<code>.txt</code>) ที่ส่งออกมาจากระบบเงินเดือนของกรมบัญชีกลางได้โดยตรง</li>
                                    <li>ระบบจะทำการอ่านค่าตำแหน่งตัวอักษร (Fixed width) และจัดสรรเข้าสู่รายรับ-รายจ่ายที่ตรงกันโดยอัตโนมัติ</li>
                                </ul>
                            </li>
                        </ul>

                        <h4 class="font-semibold text-slate-800 dark:text-white mt-4">3.3 การจัดการสถานะงวด (ประกาศใช้ / ล็อก)</h4>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>สถานะเริ่มต้น (Draft):</strong> ข้อมูลจะยังแก้ไขได้และไม่แสดงผลให้พนักงานทั่วไปเห็นผ่านตู้ Kiosk</li>
                            <li><strong>ประกาศใช้ (Publish):</strong> เมื่อตรวจสอบข้อมูลเสร็จสิ้นแล้ว ให้กดปุ่ม <strong>"ประกาศใช้"</strong> (สีเขียว) สถานะจะเปลี่ยนไปและข้อมูลงวดนี้จะไปแสดงบนตู้ Kiosk ทันที!</li>
                            <li><strong>ปลดล็อก (Unlock):</strong> หากประกาศใช้ไปแล้วแต่พบข้อผิดพลาด สามารถกด <strong>"ปลดล็อกเพื่อแก้ไข"</strong> (สีส้ม) ระบบจะซ่อนข้อมูลจากตู้ Kiosk ชั่วคราวเพื่อให้ Admin แก้ไข</li>
                        </ul>

                        <h4 class="font-semibold text-slate-800 dark:text-white mt-4">3.4 การแก้ไขและคำนวณภาษี</h4>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>ตรวจสอบข้อมูล:</strong> หลังจากนำเข้าหรือคัดลอกมาแล้ว สามารถดูยอดเงินเดือนสุทธิรวมของแผนกต่างๆ ได้ในหน้าจอรายละเอียดงวด</li>
                            <li><strong>เปิด/ปิดคำนำหน้าชื่อ:</strong> ในตารางข้อมูลสามารถติ๊กถูกที่ <strong>"แสดงคำนำหน้าชื่อ"</strong> เพื่อสลับการแสดงผลคำนำหน้าชื่อออกไป ทำให้ค้นหาหรือเรียงลำดับตามชื่อได้อย่างแม่นยำขึ้น</li>
                            <li><strong>แก้ไขรายบุคคล:</strong> กดปุ่ม <strong>"View"</strong> เพื่อดูรายละเอียดสลิปของคนนั้น หรือไอคอนรูป <svg xmlns="http://www.w3.org/2000/svg" class="inline w-4 h-4 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg> เพื่อเข้าไปเพิ่ม/ลดรายรับรายจ่ายเฉพาะบุคคลนั้น</li>
                            <li><strong>คำนวณภาษีอัตโนมัติ:</strong> ในหน้าแก้ไข จะมีปุ่ม <span class="bg-amber-100 text-amber-700 px-2 py-0.5 rounded text-xs border border-amber-200">✨ คำนวณภาษีอัตโนมัติ</span> 
                                <ul class="list-circle pl-5 mt-1 text-sm text-slate-500">
                                    <li>ระบบจะทำการรวม "เงินได้สะสมทั้งปี" และนำไปหักลดหย่อนตามที่กฎหมายกำหนด จากนั้นจึงประเมินภาษีอัตราก้าวหน้าให้ทันที</li>
                                    <li>สามารถแก้ไขตัวเลขภาษีที่คำนวณได้เอง หากต้องการปรับแต่งตัวเลข</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </section>

                <!-- 4. Print -->
                <section id="print" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center text-orange-500 mr-4">
                            <span class="font-bold text-lg">4</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">การพิมพ์สลิปเงินเดือน</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>คุณสามารถพิมพ์สลิปได้จากเมนู <strong>"พิมพ์สลิป"</strong> โดยมีขั้นตอนดังนี้:</p>
                        <ol class="list-decimal pl-5 space-y-2">
                            <li>เลือกงวดเดือน/ปี และแผนกที่ต้องการพิมพ์</li>
                            <li>สามารถติ๊กเลือก <input type="checkbox" checked disabled class="rounded border-slate-300 mr-1"> เฉพาะบุคคล หรือเลือกทั้งหมดในแผนก</li>
                            <li>กดปุ่ม <strong>"พิมพ์สลิปที่เลือก"</strong></li>
                            <li>ระบบจะเปิดหน้าต่างใหม่ เป็นรูปแบบสลิป A4 ที่จัด Layout ไว้พอดีหน้ากระดาษ (1 หน้า A4 ต่อ 1 สลิป)
                                <br><span class="text-sm text-rose-500">*หมายเหตุ: อย่าลืมตั้งค่าในเบราว์เซอร์ให้ขนาดกระดาษเป็น A4 และปิดระยะขอบ (Margins = None) ตอนสั่งพิมพ์</span>
                            </li>
                        </ol>
                    </div>
                </section>

                <!-- 5. Kiosk -->
                <section id="kiosk" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/50 flex items-center justify-center text-yellow-600 mr-4">
                            <span class="font-bold text-lg">5</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">ระบบบริการตนเอง (Kiosk)</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>ระบบสำหรับเจ้าหน้าที่เพื่อสั่งพิมพ์สลิปเงินเดือนและใบ 50 ทวิ ด้วยตนเองผ่านหน้าจอสัมผัส โดยไม่ต้อง Login เข้าระบบ:</p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>การเข้าใช้งาน:</strong> เข้าผ่าน URL <code>/kiosk</code> จะพบกับหน้าจอรูปแบบ 3D รองรับการสัมผัส (Touch Screen) เต็มรูปแบบ</li>
                            <li><strong>การค้นหา:</strong> เจ้าหน้าที่เพียงกรอกเลขบัตรประชาชน 13 หลัก (ใส่หรือไม่ใส่ขีดคั่นก็ได้) ระบบจะดึงข้อมูลที่ "ประกาศใช้" แล้วเท่านั้นมาแสดง</li>
                            <li><strong>พิมพ์สลิปแบบกลุ่ม (Bulk Print):</strong> เจ้าหน้าที่สามารถเลือกเดือนที่ต้องการพิมพ์ได้มากกว่า 1 เดือน และสั่งพิมพ์รวดเดียว ระบบจะแบ่งหน้าสลิป 1 หน้าต่อ 1 เดือนให้พอดี A4</li>
                            <li><strong>ใบเสียภาษี (50 ทวิ):</strong> สามารถเลือกปี พ.ศ. เพื่อพิมพ์ใบสรุปภาษีเงินได้ประจำปี เพื่อนำไปยื่นภาษีได้ทันที</li>
                            <li><strong>ประวัติการใช้งาน:</strong> ทุกการสั่งพิมพ์จากตู้ Kiosk จะถูกบันทึก Log เก็บไว้เพื่อให้ Admin สามารถตรวจสอบย้อนหลังได้</li>
                        </ul>
                    </div>
                </section>

                <!-- 6. Users -->
                <section id="users" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center text-purple-500 mr-4">
                            <span class="font-bold text-lg">6</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">ผู้ใช้งานระบบและประวัติ</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>เมนูนี้สำหรับผู้ดูแลระบบ (Admin) เท่านั้น แบ่งเป็น 2 ส่วน:</p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>จัดการผู้ใช้งาน:</strong> 
                                <ul class="list-circle pl-5 mt-1">
                                    <li>เพิ่มผู้ใช้ใหม่ โดยค้นหาชื่อจากฐานข้อมูลเจ้าหน้าที่ (HR) อัตโนมัติ</li>
                                    <li>เปิด/ปิดสิทธิ์การใช้งาน (Deactivate) ด้วยสวิตช์ สีเขียว/แดง</li>
                                    <li>แก้ไขข้อมูลส่วนตัวและรหัสผ่านของผู้ใช้ได้</li>
                                </ul>
                            </li>
                            <li><strong>ประวัติการใช้งาน (Logs):</strong> บันทึกกิจกรรมทั้งหมดที่เกิดขึ้นในระบบ เช่น การเข้าสู่ระบบ การแก้ข้อมูล หรือปิดสิทธิ์ พร้อมระบบ Filter ค้นหาตามช่วงวันที่และประเภท</li>
                        </ul>
                    </div>
                </section>

                <!-- 7. Settings -->
                <section id="settings" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300 mr-4">
                            <span class="font-bold text-lg">7</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">ตั้งค่าระบบ</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>ใช้สำหรับปรับแต่งการทำงานของระบบให้ตรงตามต้องการ:</p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li><strong>ตั้งค่าระบบทั่วไป:</strong> กำหนดข้อความใต้ลายเซ็น, เลขประจำตัวผู้เสียภาษีหน่วยงาน, จำนวนปีย้อนหลังในกราฟ
                                <br><span class="text-sm bg-sky-50 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400 p-1 rounded inline-block mt-1">✨ พิเศษ: สามารถปรับขนาดลายเซ็น (Scale %) และขยับตำแหน่ง ซ้าย-ขวา, บน-ลง ได้จากที่นี่ทันที</span>
                            </li>
                            <li><strong>ตั้งค่าประเภทรายรับ:</strong> เพิ่ม/ลด/เปิด-ปิด รายการรายรับต่างๆ และกำหนดว่ารายรับนี้ต้องนำไปคำนวณภาษีด้วยหรือไม่</li>
                            <li><strong>ตั้งค่าประเภทรายจ่าย:</strong> เพิ่ม/ลด/เปิด-ปิด รายการหักเงิน และกำหนดหมวดหมู่ให้สอดคล้อง</li>
                        </ul>
                    </div>
                </section>

                <!-- 8. Profile -->
                <section id="profile" class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 p-6 md:p-8 scroll-mt-24">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-lg bg-pink-100 dark:bg-pink-900/50 flex items-center justify-center text-pink-500 mr-4">
                            <span class="font-bold text-lg">8</span>
                        </div>
                        <h2 class="text-xl font-bold text-slate-800 dark:text-white m-0">ข้อมูลส่วนตัว</h2>
                    </div>
                    <div class="space-y-4 text-slate-600 dark:text-slate-300">
                        <p>มุมขวาบนของหน้าจอ (Topbar) จะแสดงชื่อ-สกุลของคุณ สามารถคลิกเพื่อเข้าสู่หน้า <strong>"ข้อมูลส่วนตัว"</strong></p>
                        <ul class="list-disc pl-5 space-y-2">
                            <li>ในหน้านี้ คุณสามารถดูรายละเอียด Username และระดับสิทธิ์ของตนเอง</li>
                            <li>สามารถทำการ <strong>"เปลี่ยนรหัสผ่าน"</strong> ได้ด้วยตนเอง โดยต้องกรอกรหัสผ่านเดิมให้ถูกต้องเพื่อยืนยันความปลอดภัย</li>
                        </ul>
                    </div>
                </section>

            </div>
        </div>
    </div>
</div>

<?php include '../app/Views/layouts/footer.php'; ?>