74 lines
12 KiB
PHP
74 lines
12 KiB
PHP
<!-- includes/sidebar.php -->
|
|
<aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-72 bg-gradient-to-b from-[#0f172a] to-slate-900 text-slate-300 transform -translate-x-full transition-transform duration-300 shadow-[20px_0_40px_rgba(0,0,0,0.3)] flex flex-col border-r border-slate-800">
|
|
<div class="h-[72px] flex items-center justify-between px-6 border-b border-slate-800/80 shrink-0 bg-slate-900/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center shadow-lg shadow-blue-500/30 overflow-hidden">
|
|
<img src="assets/img/logo.png" alt="Logo" class="w-full h-full object-contain p-0.5">
|
|
</div>
|
|
<span class="font-bold text-lg text-white tracking-wide">เมนูระบบ</span>
|
|
</div>
|
|
<button onclick="window.closeSidebar()" class="text-slate-400 hover:text-white p-2 rounded-lg hover:bg-slate-800 transition-colors focus:outline-none">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto custom-scrollbar">
|
|
<p class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3">ระบบประเมินผล (Dashboards)</p>
|
|
|
|
<button onclick="window.switchTab('tab-overview', this, 'ภาพรวมโรงพยาบาล (Overview)')" class="w-full flex items-center px-4 py-3.5 rounded-xl bg-blue-600/20 text-blue-400 font-bold sidebar-tab transition-all border border-blue-500/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]">
|
|
<i class="fa-solid fa-chart-pie w-6 text-lg"></i> <span class="tracking-wide">ภาพรวม</span>
|
|
</button>
|
|
|
|
<div class="pt-1 pb-1">
|
|
<button onclick="window.toggleSubmenu('submenu-opd', this)" class="w-full flex items-center justify-between px-4 py-3.5 rounded-xl text-slate-400 hover:bg-slate-800/80 hover:text-white font-medium transition-all group border border-transparent focus:outline-none">
|
|
<div class="flex items-center"><i class="fa-solid fa-stopwatch w-6 text-lg group-hover:text-blue-400 transition-colors"></i> <span class="tracking-wide">ลดรอคอย OPD</span></div>
|
|
<i class="fa-solid fa-chevron-down text-xs transition-transform duration-300" id="icon-submenu-opd"></i>
|
|
</button>
|
|
<div id="submenu-opd" class="hidden flex-col pl-11 pr-2 py-2 mt-1 space-y-1.5 border-l border-slate-700 ml-5 relative before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-[2px] before:bg-gradient-to-b before:from-blue-500/50 before:to-transparent">
|
|
<button onclick="window.switchTab('tab-opd-overview', this, 'ภาพรวมลดรอคอย OPD')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-chart-line mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> ภาพรวมลดรอคอย</button>
|
|
<button onclick="window.switchTab('tab-opd-condition', this, 'ระยะเวลาตามเงื่อนไข (OPD)')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-filter mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> ระยะเวลาตามเงื่อนไข</button>
|
|
<button onclick="window.switchTab('tab-opd-service', this, 'บริการผู้ป่วยนอก')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-hand-holding-medical mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> บริการผู้ป่วยนอก</button>
|
|
<button onclick="window.switchTab('tab-opd-refer', this, 'ข้อมูลการส่งต่อผู้ป่วยนอก (Refer OPD)')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-truck-medical mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> Refer OPD</button>
|
|
<button onclick="window.switchTab('tab-opd-doctor', this, 'เวลาลงตรวจ')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-user-doctor mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> เวลาลงตรวจ</button>
|
|
<button onclick="window.switchTab('tab-opd-satisfaction', this, 'ความพึงพอใจผู้รับบริการ')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-blue-400 transition-colors"></span><i class="fa-solid fa-face-smile-beam mr-3 text-slate-500 group-hover:text-blue-400 transition-colors"></i> ความพึงพอใจ</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-1 pb-1">
|
|
<button onclick="window.toggleSubmenu('submenu-ipd', this)" class="w-full flex items-center justify-between px-4 py-3.5 rounded-xl text-slate-400 hover:bg-slate-800/80 hover:text-white font-medium transition-all group border border-transparent focus:outline-none">
|
|
<div class="flex items-center"><i class="fa-solid fa-bed-pulse w-6 text-lg group-hover:text-emerald-400 transition-colors"></i> <span class="tracking-wide">ลดแออัด IPD</span></div>
|
|
<i class="fa-solid fa-chevron-down text-xs transition-transform duration-300" id="icon-submenu-ipd"></i>
|
|
</button>
|
|
<div id="submenu-ipd" class="hidden flex-col pl-11 pr-2 py-2 mt-1 space-y-1.5 border-l border-slate-700 ml-5 relative before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-[2px] before:bg-gradient-to-b before:from-emerald-500/50 before:to-transparent">
|
|
<button onclick="window.switchTab('tab-ipd-occ', this, 'อัตราการครองเตียง (IPD)')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-emerald-400 transition-colors"></span><i class="fa-solid fa-chart-column mr-3 text-slate-500 group-hover:text-emerald-400 transition-colors"></i> อัตราการครองเตียง</button>
|
|
<button onclick="window.switchTab('tab-ipd-round', this, 'สถิติแพทย์ Round Ward')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-emerald-400 transition-colors"></span><i class="fa-solid fa-user-md mr-3 text-slate-500 group-hover:text-emerald-400 transition-colors"></i> แพทย์ Round Ward</button>
|
|
<button onclick="window.switchTab('tab-ipd-refer', this, 'ข้อมูลการส่งต่อผู้ป่วย (Refer IPD)')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-emerald-400 transition-colors"></span><i class="fa-solid fa-truck-medical mr-3 text-slate-500 group-hover:text-emerald-400 transition-colors"></i> ข้อมูลการส่งต่อ (Refer)</button>
|
|
<button onclick="window.switchTab('tab-ipd-adjrw', this, 'สถิติ Sum AdjRW (การส่งต่อ)')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group"><span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-emerald-400 transition-colors"></span><i class="fa-solid fa-weight-scale mr-3 text-slate-500 group-hover:text-emerald-400 transition-colors"></i> Sum AdjRW</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-1 pb-1">
|
|
<button onclick="window.toggleSubmenu('submenu-stats', this)" class="w-full flex items-center justify-between px-4 py-3.5 rounded-xl text-slate-400 hover:bg-slate-800/80 hover:text-white font-medium transition-all group border border-transparent focus:outline-none">
|
|
<div class="flex items-center"><i class="fa-solid fa-chart-bar w-6 text-lg group-hover:text-indigo-400 transition-colors"></i> <span class="tracking-wide">ข้อมูลสถิติ (Statistics)</span></div>
|
|
<i class="fa-solid fa-chevron-down text-xs transition-transform duration-300" id="icon-submenu-stats"></i>
|
|
</button>
|
|
<div id="submenu-stats" class="hidden flex-col pl-11 pr-2 py-2 mt-1 space-y-1.5 border-l border-slate-700 ml-5 relative before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-[2px] before:bg-gradient-to-b before:from-indigo-500/50 before:to-transparent">
|
|
<button onclick="window.switchTab('tab-disease', this, 'สถิติโรค')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group">
|
|
<span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-indigo-400 transition-colors"></span>
|
|
<i class="fa-solid fa-virus mr-3 text-slate-500 group-hover:text-indigo-400 transition-colors"></i> สถิติโรค
|
|
</button>
|
|
<button onclick="window.switchTab('tab-service', this, 'สถิติรับบริการรวม')" class="w-full flex items-center px-4 py-2.5 rounded-lg text-slate-400 hover:bg-slate-800/80 hover:text-white text-sm sidebar-tab transition-all relative group">
|
|
<span class="absolute left-[-17px] top-1/2 -translate-y-1/2 w-3 h-[1px] bg-slate-600 group-hover:bg-indigo-400 transition-colors"></span>
|
|
<i class="fa-solid fa-users mr-3 text-slate-500 group-hover:text-indigo-400 transition-colors"></i> สถิติรับบริการรวม
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-3 mt-4">ตั้งค่าระบบ (Settings)</p>
|
|
|
|
<button onclick="window.switchTab('tab-settings', this, 'ตั้งค่าชุดคำสั่ง SQL (SQL Settings)')" class="w-full flex items-center px-4 py-3.5 rounded-xl text-slate-400 hover:bg-slate-800/80 hover:text-white font-medium sidebar-tab transition-all border border-transparent focus:outline-none group">
|
|
<i class="fa-solid fa-gear w-6 text-lg group-hover:text-slate-300 transition-colors"></i> <span class="tracking-wide">ตั้งค่า SQL</span>
|
|
</button>
|
|
</nav>
|
|
|
|
</aside> |