gravity/Dashboard ลดแออัด-ลดรอคอย/views/tab_stats_1_disease.php

<!-- TAB: สถิติโรค -->
<div id="tab-disease" class="tab-content hidden space-y-4 md:space-y-6">
    <?= $stats_filter_html ?>
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-stethoscope mr-2"></i> 10 อันดับโรคผู้ป่วยนอก (OPD)</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-opd-top">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-bed-pulse mr-2"></i> 10 อันดับโรคผู้ป่วยใน (IPD)</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-ipd-top">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-bed-procedures mr-2"></i> 10 อันดับเสียชีวิต IPD</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-ipd-death">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-red-500 to-red-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-heart-crack mr-2"></i> 10 อันดับเสียชีวิตที่ ER</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-er-death">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
    </div>

    <h3 class="font-extrabold text-slate-800 text-base md:text-lg mt-6 md:mt-8 mb-3 md:mb-4 border-l-4 border-indigo-500 pl-3">10 อันดับโรคการส่งต่อ (Refer)</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-slate-500 to-slate-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-hospital mr-2"></i> ภาพรวมส่งต่อ</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-refer-overview">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-ambulance mr-2"></i> ส่งต่อรถพยาบาล</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-refer-ambulance">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-ship mr-2"></i> ส่งต่อทางเรือ</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-refer-ship">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 p-3.5 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-helicopter mr-2"></i> ส่งต่อทางอากาศ</h3>
            </div>
            <div class="overflow-y-auto h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="list-disease-refer-air">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
    </div>
</div>