61 lines
6.8 KiB
PHP
61 lines
6.8 KiB
PHP
<div id="tab-opd-overview" class="tab-content hidden space-y-4 md:space-y-6">
|
|
<?= $opd_filter_html ?>
|
|
|
|
<div class="card-premium p-4 md:p-8 bg-white relative overflow-visible mb-6">
|
|
<div class="absolute top-0 left-0 w-1 md:w-1.5 h-full bg-gradient-to-b from-blue-500 to-emerald-500 rounded-l-xl"></div>
|
|
<h3 class="font-bold text-slate-800 mb-4 md:mb-8 flex flex-col md:flex-row items-start md:items-center text-base md:text-lg">
|
|
<div class="flex items-center mb-2 md:mb-0">
|
|
<div class="w-6 h-6 md:w-8 md:h-8 rounded bg-blue-100 text-blue-600 flex items-center justify-center mr-2 md:mr-3"><i class="fa-solid fa-route"></i></div>ผลลัพธ์เส้นทางระยะเวลารอคอย
|
|
</div>
|
|
<span class="md:ml-auto bg-gradient-to-br from-emerald-400 to-blue-600 text-white px-5 py-2 rounded-full text-xs md:text-sm font-extrabold shadow-md opd-total-time-display-ov">- นาที</span>
|
|
</h3>
|
|
<div class="flow-container flex flex-col md:flex-row justify-between items-center py-2 md:py-4 relative">
|
|
<div class="flow-line hidden md:block"></div>
|
|
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-blue-200 text-blue-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-id-card text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">ยื่นบัตร</span>
|
|
</div>
|
|
<span class="t-step-1-ov text-xs font-bold text-blue-700 bg-blue-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-blue-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-indigo-200 text-indigo-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-clipboard-list text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">ซักประวัติ</span>
|
|
</div>
|
|
<span class="t-step-2-ov text-xs font-bold text-indigo-700 bg-indigo-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-indigo-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-10 h-10 md:w-20 md:h-20 bg-gradient-to-br from-orange-500 to-amber-400 text-white border-2 md:border-4 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-user-clock text-sm md:text-3xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">รอพบแพทย์</span>
|
|
</div>
|
|
<span class="t-step-3-ov text-xs font-bold text-orange-700 bg-orange-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-orange-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-teal-200 text-teal-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-user-doctor text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">แพทย์ตรวจ</span>
|
|
</div>
|
|
<span class="t-step-4-ov text-xs font-bold text-teal-700 bg-teal-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-teal-100 z-10">- นาที</span>
|
|
</div>
|
|
<div class="flex md:flex-col items-center justify-between md:justify-start w-full md:w-auto mb-3 md:mb-0 bg-slate-50 md:bg-transparent p-3 md:p-0 rounded-lg border border-slate-100 md:border-transparent">
|
|
<div class="flex items-center md:flex-col">
|
|
<div class="w-9 h-9 md:w-16 md:h-16 bg-white border-[2px] md:border-[3px] border-emerald-200 text-emerald-500 rounded-full shadow-md flex items-center justify-center md:mb-3 mr-3 md:mr-0 z-10"><i class="fa-solid fa-pills text-xs md:text-2xl"></i></div><span class="text-xs md:text-sm font-extrabold text-slate-700 bg-white md:px-2 z-10">รับยากลับบ้าน</span>
|
|
</div>
|
|
<span class="t-step-5-ov text-xs font-bold text-emerald-700 bg-emerald-50 px-2 md:px-3 py-0.5 rounded-full md:mt-1 border border-emerald-100 z-10">- นาที</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mt-6 mb-3 border-l-4 border-blue-500 pl-3">ระยะเวลารอคอยแต่ละคลินิกเฉลี่ย</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 md:gap-4 mb-6" id="db-clinic-wait-cards">
|
|
<div class="col-span-full text-center text-slate-400 py-8 bg-white rounded-xl border border-dashed border-slate-300 font-medium">รอการค้นหาข้อมูล...</div>
|
|
</div>
|
|
|
|
<div class="card-premium p-4 md:p-6 mb-6">
|
|
<h3 class="font-extrabold text-slate-800 text-sm md:text-base mb-4 md:mb-6 flex items-center justify-between">
|
|
<span class="flex items-center"><i class="fa-solid fa-chart-area text-blue-500 mr-2"></i> แนวโน้มระยะเวลารอคอย OPD</span>
|
|
</h3>
|
|
<div class="h-[300px] md:h-[400px] w-full flex items-center justify-center bg-slate-50 rounded-lg border border-dashed border-slate-200" id="opdWaitTimeChartTabOv_container">
|
|
<span class="text-slate-400 font-medium">รอการค้นหาข้อมูล...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|