214 lines
15 KiB
PHP
214 lines
15 KiB
PHP
<?php
|
|
/**
|
|
* Master Glassmorphism Healthcare Layout for TTMQMS Enterprise
|
|
* Supports Responsive Desktop, Tablet, and Mobile Bottom Navigation
|
|
*/
|
|
$title = $title ?? 'TTMQMS - ระบบบริหารจัดการคิวนวดแผนไทย';
|
|
$activeMenu = $activeMenu ?? 'dashboard';
|
|
$b = defined('BASE_URL') ? BASE_URL : '';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="th" class="h-full">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title><?= htmlspecialchars($title) ?></title>
|
|
|
|
<!-- PWA Manifest & Meta -->
|
|
<link rel="manifest" href="<?= $b ?>/manifest.json">
|
|
<meta name="theme-color" content="#10b981">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<!-- Offline-Ready Local Assets (No Internet Required) -->
|
|
<script src="<?= $b ?>/assets/js/tailwindcss.min.js"></script>
|
|
<link rel="stylesheet" href="<?= $b ?>/assets/css/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="<?= $b ?>/assets/css/flatpickr.min.css">
|
|
<link rel="stylesheet" href="<?= $b ?>/assets/css/index.css">
|
|
|
|
<script src="<?= $b ?>/assets/js/chart.umd.min.js"></script>
|
|
<script src="<?= $b ?>/assets/js/sweetalert2.all.min.js"></script>
|
|
<script src="<?= $b ?>/assets/js/flatpickr.min.js"></script>
|
|
<script defer src="<?= $b ?>/assets/js/alpine.min.js"></script>
|
|
<script>window.BASE_URL = "<?= $b ?>";</script>
|
|
<script src="<?= $b ?>/assets/js/app.js"></script>
|
|
</head>
|
|
<body x-data="globalApp" :class="`theme-${theme}`" class="min-h-screen flex flex-col lg:flex-row antialiased transition-colors duration-500">
|
|
|
|
<!-- Desktop & Tablet Glass Sidebar -->
|
|
<aside class="hidden lg:flex flex-col w-72 glass-nav z-30 p-6 flex-shrink-0 sticky top-0 h-screen justify-between border-r">
|
|
<div>
|
|
<!-- Brand Logo -->
|
|
<div class="flex items-center gap-3 mb-8 pb-4 border-b border-emerald-500/20">
|
|
<div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-emerald-500 to-cyan-500 flex items-center justify-center text-white text-2xl shadow-lg shadow-emerald-500/30 animate-pulse-glow">
|
|
<i class="bi bi-flower1"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-bold text-lg tracking-tight bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
|
|
TTMQMS
|
|
</h1>
|
|
<p class="text-xs text-subtle font-medium">Enterprise Spa & Clinical</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Links -->
|
|
<nav class="space-y-1.5">
|
|
<a href="<?= $b ?>/" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'dashboard' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-grid-1x2-fill text-lg"></i>
|
|
<span>แดชบอร์ด KPI</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/queue" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'queue' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-person-lines-fill text-lg"></i>
|
|
<span>จัดการคิวนวด & AI</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/clinical/soap" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'soap' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-heart-pulse-fill text-lg"></i>
|
|
<span>เวชระเบียน SOAP</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/billing" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'billing' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-receipt-cutoff text-lg"></i>
|
|
<span>คิดเงิน & พิมพ์ใบเสร็จ</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/tv" target="_blank" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium text-subtle hover:bg-emerald-500/10 hover:text-emerald-400 transition-all">
|
|
<i class="bi bi-tv text-lg"></i>
|
|
<span>หน้าจอเรียกคิว TV</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/reports" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'reports' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-bar-chart-line-fill text-lg"></i>
|
|
<span>รายงานผู้บริหาร</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/his-sync" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'his' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-hospital text-lg"></i>
|
|
<span>เชื่อมต่อ HIS & FHIR</span>
|
|
</a>
|
|
|
|
<a href="<?= $b ?>/settings" class="flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all <?= $activeMenu === 'settings' ? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md shadow-emerald-500/20' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>">
|
|
<i class="bi bi-gear-fill text-lg"></i>
|
|
<span>ตั้งค่าระบบ</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- User Profile Footer -->
|
|
<div class="pt-4 border-t border-emerald-500/20">
|
|
<div class="flex items-center justify-between p-3 rounded-xl bg-emerald-500/5 border border-emerald-500/10">
|
|
<div class="flex items-center gap-3 overflow-hidden">
|
|
<div class="w-10 h-10 rounded-full bg-emerald-500 flex items-center justify-center text-white font-bold text-sm flex-shrink-0 shadow">
|
|
<span x-text="user ? user.full_name.charAt(0) : 'A'"></span>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
<p class="text-sm font-semibold truncate" x-text="user ? user.full_name : 'ผู้ดูแลระบบ'"></p>
|
|
<p class="text-xs text-emerald-400 font-medium truncate" x-text="user ? user.role : 'Admin'"></p>
|
|
</div>
|
|
</div>
|
|
<button @click="logout('ท่านได้ออกจากระบบแล้ว')" class="text-subtle hover:text-red-400 p-2 transition-colors" title="ออกจากระบบ">
|
|
<i class="bi bi-box-arrow-right text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 flex flex-col min-h-screen pb-20 lg:pb-0">
|
|
<!-- Top Glassmorphism Navbar -->
|
|
<header class="glass-nav sticky top-0 z-20 px-6 py-4 flex items-center justify-between border-b">
|
|
<div class="flex items-center gap-4">
|
|
<!-- Mobile Sidebar Hamburger -->
|
|
<button @click="sidebarOpen = !sidebarOpen" class="lg:hidden text-subtle hover:text-emerald-400 text-2xl p-1">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
|
|
<div class="hidden md:flex items-center gap-2 bg-emerald-500/10 px-3 py-1.5 rounded-full border border-emerald-500/20 text-xs font-semibold text-emerald-400">
|
|
<span class="w-2 h-2 rounded-full animate-ping" :class="isOnline ? 'bg-emerald-500' : 'bg-red-500'"></span>
|
|
<span x-text="isOnline ? 'ออนไลน์ (Online Mode)' : 'ออฟไลน์ (Offline Mode)'"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Navbar Actions -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- WebUSB Printer Connect -->
|
|
<button @click="connectUsbPrinter()" class="hidden sm:flex items-center gap-2 text-xs font-medium px-3 py-1.5 rounded-full bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20 transition-all">
|
|
<i class="bi bi-printer-fill"></i>
|
|
<span x-text="usbDevice ? 'USB Printer: Ready' : 'เชื่อมต่อ USB Printer'"></span>
|
|
</button>
|
|
|
|
<!-- Dark / Light Toggle Switch -->
|
|
<button @click="toggleTheme()" class="p-2.5 rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:scale-105 transition-all shadow-sm" title="สลับโหมดมืด/สว่าง">
|
|
<i class="bi text-lg" :class="theme === 'dark' ? 'bi-sun-fill text-amber-400' : 'bi-moon-stars-fill text-slate-600'"></i>
|
|
</button>
|
|
|
|
<!-- User Badge -->
|
|
<div class="flex items-center gap-2 pl-2 border-l border-emerald-500/20">
|
|
<span class="text-sm font-medium hidden md:inline" x-text="user ? user.full_name : 'Admin'"></span>
|
|
<div class="w-9 h-9 rounded-full bg-gradient-to-tr from-emerald-500 to-teal-500 flex items-center justify-center text-white font-bold text-sm shadow">
|
|
<i class="bi bi-person-fill"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Content View -->
|
|
<main class="flex-1 p-4 md:p-8 space-y-6 max-w-7xl w-full mx-auto animate-slide-up">
|
|
<?php if (isset($contentView) && file_exists($contentView)) { include $contentView; } ?>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Mobile Bottom Navigation Bar (PWA Mobile First) -->
|
|
<nav class="lg:hidden fixed bottom-0 left-0 right-0 glass-nav z-40 border-t flex items-center justify-around py-2.5 px-2">
|
|
<a href="<?= $b ?>/" class="flex flex-col items-center gap-1 text-xs font-medium <?= $activeMenu === 'dashboard' ? 'text-emerald-400' : 'text-subtle' ?>">
|
|
<i class="bi bi-grid-1x2-fill text-xl"></i>
|
|
<span>แดชบอร์ด</span>
|
|
</a>
|
|
<a href="<?= $b ?>/queue" class="flex flex-col items-center gap-1 text-xs font-medium <?= $activeMenu === 'queue' ? 'text-emerald-400' : 'text-subtle' ?>">
|
|
<i class="bi bi-person-lines-fill text-xl"></i>
|
|
<span>ออกคิว</span>
|
|
</a>
|
|
<a href="<?= $b ?>/clinical/soap" class="flex flex-col items-center gap-1 text-xs font-medium <?= $activeMenu === 'soap' ? 'text-emerald-400' : 'text-subtle' ?>">
|
|
<i class="bi bi-heart-pulse-fill text-xl"></i>
|
|
<span>SOAP Note</span>
|
|
</a>
|
|
<a href="<?= $b ?>/billing" class="flex flex-col items-center gap-1 text-xs font-medium <?= $activeMenu === 'billing' ? 'text-emerald-400' : 'text-subtle' ?>">
|
|
<i class="bi bi-receipt-cutoff text-xl"></i>
|
|
<span>คิดเงิน</span>
|
|
</a>
|
|
<button @click="sidebarOpen = true" class="flex flex-col items-center gap-1 text-xs font-medium text-subtle">
|
|
<i class="bi bi-list text-xl"></i>
|
|
<span>เมนู</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Mobile Sidebar Drawer (Alpine Modal) -->
|
|
<div x-show="sidebarOpen" x-cloak class="fixed inset-0 z-50 lg:hidden flex">
|
|
<div x-show="sidebarOpen" x-transition.opacity @click="sidebarOpen = false" class="fixed inset-0 bg-black/60 backdrop-blur-sm"></div>
|
|
<div x-show="sidebarOpen" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" class="relative w-72 glass-nav h-full p-6 flex flex-col justify-between shadow-2xl">
|
|
<div>
|
|
<div class="flex items-center justify-between pb-4 border-b border-emerald-500/20">
|
|
<span class="font-bold text-lg bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">เมนูระบบ TTMQMS</span>
|
|
<button @click="sidebarOpen = false" class="text-subtle hover:text-white text-xl"><i class="bi bi-x-lg"></i></button>
|
|
</div>
|
|
<nav class="mt-6 space-y-2">
|
|
<a href="<?= $b ?>/" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'dashboard' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-grid-1x2-fill"></i> แดชบอร์ด</a>
|
|
<a href="<?= $b ?>/queue" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'queue' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-person-lines-fill"></i> จัดการคิวนวด & AI</a>
|
|
<a href="<?= $b ?>/clinical/soap" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'soap' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-heart-pulse-fill"></i> เวชระเบียน SOAP</a>
|
|
<a href="<?= $b ?>/billing" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'billing' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-receipt-cutoff"></i> คิดเงิน & พิมพ์ใบเสร็จ</a>
|
|
<a href="<?= $b ?>/tv" target="_blank" class="flex items-center gap-3 p-3 rounded-xl text-subtle hover:bg-emerald-500/10 hover:text-emerald-400"><i class="bi bi-tv"></i> หน้าจอ TV</a>
|
|
<a href="<?= $b ?>/reports" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'reports' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-bar-chart-line-fill"></i> รายงานผู้บริหาร</a>
|
|
<a href="<?= $b ?>/his-sync" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'his' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-hospital"></i> เชื่อมต่อ HIS & FHIR</a>
|
|
<a href="<?= $b ?>/settings" class="flex items-center gap-3 p-3 rounded-xl <?= $activeMenu === 'settings' ? 'bg-emerald-500 text-white' : 'text-subtle hover:bg-emerald-500/10 hover:text-emerald-400' ?>"><i class="bi bi-gear-fill"></i> ตั้งค่าระบบ</a>
|
|
</nav>
|
|
</div>
|
|
<button @click="logout('ท่านได้ออกจากระบบแล้ว')" class="w-full py-3 rounded-xl bg-red-500/10 text-red-400 border border-red-500/20 font-medium flex items-center justify-center gap-2 hover:bg-red-500 hover:text-white transition-all">
|
|
<i class="bi bi-box-arrow-right"></i> ออกจากระบบ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|