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

<div id="tab-opd-refer" class="tab-content hidden space-y-4 md:space-y-6">
    <?= $opd_filter_html ?>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 mb-6">
        <div class="card-premium p-4 md:p-5 border-t-4 border-t-emerald-500 bg-gradient-to-b from-emerald-50/30 to-white relative overflow-hidden">
            <i class="fa-solid fa-truck-medical absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-emerald-100/40 rotate-12 z-0"></i>
            <div class="relative z-10">
                <p class="text-xs md:text-sm font-bold text-emerald-800 mb-1">รับ Refer In (OPD)</p>
                <p class="text-[9px] md:text-[11px] text-slate-500">รพ.เกาะพะงัน, เกาะเต่า</p>
                <div class="mt-3 md:mt-4">
                    <h3 class="text-2xl md:text-3xl font-black text-emerald-600"><span id="db-refer-in-opd">-</span> <span class="text-xs md:text-sm font-medium text-slate-500">ราย</span></h3>
                </div>
            </div>
        </div>
        <div class="card-premium p-4 md:p-5 border-t-4 border-t-red-500 bg-gradient-to-b from-red-50/30 to-white relative overflow-hidden">
            <i class="fa-solid fa-ambulance absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-red-100/40 rotate-12 z-0"></i>
            <div class="relative z-10">
                <p class="text-xs md:text-sm font-bold text-red-800 mb-1">ส่ง Refer Out (OPD)</p>
                <p class="text-[9px] md:text-[11px] text-slate-500">รพ.สุราษฎร์ธานี</p>
                <div class="mt-3 md:mt-4">
                    <h3 class="text-2xl md:text-3xl font-black text-red-600"><span id="db-refer-out-opd">-</span> <span class="text-xs md:text-sm font-medium text-slate-500">ราย</span></h3>
                </div>
            </div>
        </div>
        <div class="card-premium p-4 md:p-5 border-t-4 border-t-blue-500 bg-gradient-to-b from-blue-50/30 to-white relative overflow-hidden">
            <i class="fa-solid fa-house-medical-circle-check absolute -right-2 -bottom-2 md:-right-4 md:-bottom-4 text-5xl md:text-7xl text-blue-100/40 rotate-12 z-0"></i>
            <div class="relative z-10">
                <p class="text-xs md:text-sm font-bold text-blue-800 mb-1">ส่งกลับ (Refer Back)</p>
                <p class="text-[9px] md:text-[11px] text-slate-500">รพ.สต. ในเครือข่าย</p>
                <div class="mt-3 md:mt-4">
                    <h3 class="text-2xl md:text-3xl font-black text-blue-600"><span id="db-refer-back-opd">-</span> <span class="text-xs md:text-sm font-medium text-slate-500">ราย</span></h3>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
        <div class="card-premium p-4 md:p-6 flex flex-col">
            <h4 class="font-bold text-slate-700 text-xs md:text-sm mb-4"><i class="fa-solid fa-chart-column text-emerald-500 mr-2"></i> จำนวนรับ Refer In แยกปลายทาง (รพ.ต้นทาง)</h4>
            <div class="h-[250px] md:h-[300px] w-full flex items-center justify-center bg-slate-50 rounded-lg border border-dashed border-slate-200" id="referInChartOpd_container">
                <span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span>
            </div>
        </div>
        <div class="card-premium p-4 md:p-6 flex flex-col">
            <h4 class="font-bold text-slate-700 text-xs md:text-sm mb-4"><i class="fa-solid fa-chart-column text-red-500 mr-2"></i> จำนวนส่ง Refer Out แยกปลายทาง</h4>
            <div class="h-[250px] md:h-[300px] w-full flex items-center justify-center bg-slate-50 rounded-lg border border-dashed border-slate-200" id="referOutChartOpd_container">
                <span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
        <div class="card-premium flex flex-col h-full">
            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 p-3 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-virus mr-2"></i> 10 อันดับโรคที่รับ Refer In</h3>
            </div>
            <div class="overflow-y-auto max-h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="db-list-refer-in">
                    <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 md:p-4">
                <h3 class="font-bold text-white text-xs md:text-sm flex items-center"><i class="fa-solid fa-virus mr-2"></i> 10 อันดับโรคที่ส่ง Refer Out</h3>
            </div>
            <div class="overflow-y-auto max-h-64 custom-scrollbar">
                <ul class="p-4 space-y-2.5 text-[11px] md:text-xs bg-white" id="db-list-refer-out">
                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
                </ul>
            </div>
        </div>
    </div>
</div>