Initial commit

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

@@ -0,0 +1,84 @@
+<div id="tab-ipd-refer" class="tab-content hidden space-y-4 md:space-y-6">
+    <?= $ipd_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 (IPD)</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="ipd-refer-in-total">-</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 (IPD)</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="ipd-refer-out-total">-</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="ipd-refer-back-total">-</span> <span class="text-xs md:text-sm font-medium text-slate-500">ราย</span></h3></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Refer Charts & Lists -->
+    <h3 class="font-extrabold text-slate-800 text-sm md:text-base mt-8 mb-4 border-l-4 border-emerald-500 pl-3">รายละเอียด รับ Refer In (IPD)</h3>
+    <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="referInTrendIpd_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 bg-emerald-50 p-2.5 rounded-lg border border-emerald-100"><i class="fa-solid fa-virus text-emerald-500 mr-2"></i> 10 อันดับโรคที่รับ Refer In (IPD)</h4>
+            <div class="h-[250px] md:h-[300px] overflow-y-auto pr-2 custom-scrollbar"><ul class="space-y-3 text-[11px] md:text-xs" id="list-refer-in-disease-ipd"><li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li></ul></div>
+        </div>
+    </div>
+
+    <h3 class="font-extrabold text-slate-800 text-sm md:text-base mt-8 mb-4 border-l-4 border-red-500 pl-3">รายละเอียด ส่ง Refer Out (IPD)</h3>
+    <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-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="referOutTrendIpd_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 bg-red-50 p-2.5 rounded-lg border border-red-100"><i class="fa-solid fa-virus text-red-500 mr-2"></i> 10 อันดับโรคที่ส่ง Refer Out (IPD)</h4>
+            <div class="h-[250px] md:h-[300px] overflow-y-auto pr-2 custom-scrollbar"><ul class="space-y-3 text-[11px] md:text-xs" id="list-refer-out-disease-ipd"><li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li></ul></div>
+        </div>
+    </div>
+
+    <!-- Refer Back Section -->
+    <h3 class="font-extrabold text-slate-800 text-sm md:text-base mt-8 mb-4 border-l-4 border-blue-500 pl-3">รายละเอียด ส่งกลับ (Refer Back)</h3>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
+        <!-- 1. จำนวนที่ส่งกลับ แยกปลายทาง (รายเดือน) -->
+        <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-blue-500 mr-2"></i> จำนวนที่ส่งกลับ แยกปลายทาง (รายเดือน)</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="referBackDestTrendIpd_container"><span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span></div>
+        </div>
+        
+        <!-- 2. 10 อันดับโรคที่ส่งกลับ -->
+        <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 bg-blue-50 p-2.5 rounded-lg border border-blue-100"><i class="fa-solid fa-virus text-blue-500 mr-2"></i> 10 อันดับโรคที่ส่งกลับ</h4>
+            <div class="h-[250px] md:h-[300px] overflow-y-auto pr-2 custom-scrollbar">
+                <ul class="space-y-3 text-[11px] md:text-xs" id="list-refer-back-disease-ipd">
+                    <li class="text-center text-slate-500 py-4 font-medium">รอการค้นหาข้อมูล...</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6">
+        <!-- 3. สาเหตุการส่งกลับ (Refer Back) -->
+        <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-pie text-indigo-500 mr-2"></i> สาเหตุการส่งกลับ (Refer Back)</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="referBackCauseIpd_container"><span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span></div>
+        </div>
+    </div>
+</div>