Initial commit

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/css/app.css

@@ -0,0 +1,471 @@
+/* Layout Core */
+.wrapper {
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+    min-width: 260px;
+    max-width: 260px;
+    background: var(--bg-surface);
+    color: var(--text-main);
+    transition: all 0.3s ease;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    z-index: 1040;
+}
+
+.sidebar.collapsed {
+    min-width: 80px;
+    max-width: 80px;
+}
+
+.sidebar-header {
+    padding: 0 1.5rem;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    height: 75px;
+}
+
+.sidebar-header h5 {
+    white-space: nowrap;
+    overflow: hidden;
+    transition: opacity 0.3s;
+}
+
+.sidebar.collapsed .sidebar-header h5 {
+    opacity: 0;
+    width: 0;
+}
+
+/* Shiny Logo */
+.sidebar-logo {
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    margin-right: 12px;
+    background-color: transparent;
+    transition: margin 0.3s;
+}
+
+.sidebar-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sidebar-logo::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
+    transform: skewX(-25deg);
+    animation: shine 3s infinite;
+    z-index: 1;
+}
+
+@keyframes shine {
+    0% { left: -100%; }
+    20% { left: 200%; }
+    100% { left: 200%; }
+}
+
+.sidebar.collapsed .sidebar-logo {
+    margin-right: 0;
+}
+
+.sidebar-menu {
+    padding: 1rem 0.5rem;
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+.sidebar-menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sidebar-menu li {
+    margin-bottom: 0.25rem;
+}
+
+.sidebar-menu a {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: var(--text-muted);
+    border-radius: 8px;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.sidebar-menu a i {
+    font-size: 1.25rem;
+    margin-right: 1rem;
+    min-width: 24px;
+    text-align: center;
+}
+
+.sidebar-menu a span {
+    white-space: nowrap;
+    transition: opacity 0.3s;
+}
+
+.sidebar.collapsed .sidebar-menu a span {
+    opacity: 0;
+    display: none;
+}
+
+.sidebar-menu a:hover, .sidebar-menu li.active a {
+    background-color: var(--primary-light);
+    color: var(--primary);
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+    min-height: 70px;
+    overflow: hidden;
+}
+
+.sidebar.collapsed .sidebar-user-info,
+.sidebar.collapsed .sidebar-logout-btn {
+    opacity: 0;
+    display: none !important;
+}
+
+/* Main Content */
+.main-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: var(--bg-body);
+}
+
+/* Topbar */
+.topbar {
+    height: 75px;
+    padding: 0 1.5rem;
+    background: var(--bg-surface-hover);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1030;
+}
+
+.topbar-left, .topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.btn-icon-only {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    transition: all 0.2s;
+}
+
+.btn-icon-only:hover {
+    background: var(--bg-surface-hover);
+    color: var(--text-main);
+}
+
+.search-box {
+    display: flex;
+    align-items: center;
+    background: var(--bg-surface-hover);
+    border-radius: 20px;
+    padding: 0.4rem 1rem;
+    border: 1px solid var(--border-color);
+    width: 300px;
+}
+
+.search-box i {
+    color: var(--text-muted);
+    margin-right: 0.5rem;
+}
+
+.search-box input {
+    border: none;
+    background: transparent;
+    outline: none;
+    width: 100%;
+    color: var(--text-main);
+}
+
+.search-box .shortcut {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    background: var(--border-color);
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+}
+
+/* Avatar Premium Styling */
+.avatar-premium {
+    border: 2px solid var(--bg-surface);
+    box-shadow: 0 0 0 2px var(--primary), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+.avatar-premium:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 3px var(--primary), 0 8px 12px -3px rgba(0, 0, 0, 0.15);
+}
+
+.profile-dropdown img {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--bg-surface);
+    box-shadow: 0 0 0 2px var(--primary), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+.profile-dropdown img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 3px var(--primary), 0 8px 12px -3px rgba(0, 0, 0, 0.15);
+}
+
+/* Page Content */
+.page-content {
+    flex-grow: 1;
+    padding: 1.5rem;
+    overflow-y: auto;
+}
+
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 1.5rem;
+}
+
+.page-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.page-subtitle {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* DataTables Overrides */
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
+    color: var(--text-main) !important;
+}
+
+table.dataTable {
+    color: var(--text-main) !important;
+    border-collapse: collapse !important;
+}
+
+table.dataTable thead th, table.dataTable thead td {
+    border-bottom: 1px solid var(--border-color) !important;
+    background-color: var(--bg-surface-hover);
+}
+
+table.dataTable tbody tr {
+    background-color: transparent !important;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    border-bottom: 1px solid var(--border-color) !important;
+}
+
+/* Command Palette Overlay */
+#commandPalette {
+    display: none;
+    position: fixed;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 9999;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 10vh;
+}
+
+#commandPalette.active {
+    display: flex;
+}
+
+.cmd-palette-box {
+    width: 100%;
+    max-width: 600px;
+    background: var(--bg-surface);
+    border-radius: 12px;
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+}
+
+.cmd-input-wrap {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+}
+
+.cmd-input-wrap i {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-right: 1rem;
+}
+
+.cmd-input-wrap input {
+    width: 100%;
+    border: none;
+    background: transparent;
+    font-size: 1.1rem;
+    outline: none;
+    color: var(--text-main);
+}
+
+.cmd-list {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+}
+
+.cmd-item {
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    color: var(--text-main);
+    cursor: pointer;
+}
+
+.cmd-item:hover, .cmd-item.active {
+    background: var(--bg-surface-hover);
+    color: var(--primary);
+}
+
+.cmd-item i {
+    margin-right: 1rem;
+    color: var(--text-muted);
+}
+
+/* Toast Container */
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1050;
+}
+
+/* Responsive */
+@media (max-width: 991.98px) {
+    .sidebar {
+        position: fixed;
+        left: -260px;
+        height: 100%;
+    }
+    
+    .sidebar.show {
+        left: 0;
+    }
+    
+    .main-content {
+        width: 100%;
+    }
+    
+    .search-box {
+        display: none;
+    }
+}
+
+/* Global DataTables Customization */
+table.dataTable thead > tr > th, table.dataTable thead > tr > td {
+    text-align: center !important;
+    vertical-align: middle;
+}
+
+table.dataTable.table-sm thead > tr > th {
+    padding-right: 20px !important;
+}
+
+/* Hide default DataTables sorting arrows */
+table.dataTable thead > tr > th.sorting, 
+table.dataTable thead > tr > th.sorting_asc, 
+table.dataTable thead > tr > th.sorting_desc {
+    background-image: none !important;
+    position: relative;
+    padding-right: 25px !important;
+}
+
+/* Hide Native DataTables ::before (Up Triangle) */
+table.dataTable thead > tr > th.sorting::before,
+table.dataTable thead > tr > th.sorting_asc::before,
+table.dataTable thead > tr > th.sorting_desc::before,
+table.dataTable thead > tr > td.sorting::before,
+table.dataTable thead > tr > td.sorting_asc::before,
+table.dataTable thead > tr > td.sorting_desc::before {
+    display: none !important;
+    content: none !important;
+}
+
+/* Custom Sort Icons using FontAwesome 5 (Matched to request) */
+table.dataTable thead > tr > th.sorting::after,
+table.dataTable thead > tr > th.sorting_asc::after,
+table.dataTable thead > tr > th.sorting_desc::after,
+table.dataTable thead > tr > td.sorting::after,
+table.dataTable thead > tr > td.sorting_asc::after,
+table.dataTable thead > tr > td.sorting_desc::after {
+    position: absolute !important;
+    right: 8px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    font-family: "Font Awesome 5 Free" !important;
+    font-weight: 900 !important;
+    font-size: 0.95rem !important;
+    color: var(--text-muted) !important;
+    opacity: 0.3 !important;
+    line-height: 1 !important;
+    display: block !important;
+}
+
+/* Unsorted state: show sort-down faded */
+table.dataTable thead > tr > th.sorting::after,
+table.dataTable thead > tr > td.sorting::after {
+    content: "\f160" !important; /* fa-sort-amount-down */
+}
+
+/* Ascending state */
+table.dataTable thead > tr > th.sorting_asc::after,
+table.dataTable thead > tr > td.sorting_asc::after {
+    content: "\f162" !important; /* fa-sort-amount-up */
+    opacity: 1 !important;
+    color: var(--primary) !important;
+}
+
+/* Descending state */
+table.dataTable thead > tr > th.sorting_desc::after,
+table.dataTable thead > tr > td.sorting_desc::after {
+    content: "\f160" !important; /* fa-sort-amount-down */
+    opacity: 1 !important;
+    color: var(--primary) !important;
+}

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/css/theme.css

@@ -0,0 +1,128 @@
+:root {
+    /* Primary Color - Medical / Hospital Theme (Trustworthy, Calm) */
+    --primary: #0F766E;
+    --primary-hover: #115E59;
+    --primary-light: #CCFBF1;
+    
+    /* Semantic Colors */
+    --success: #10B981;
+    --success-light: #D1FAE5;
+    --warning: #F59E0B;
+    --warning-light: #FEF3C7;
+    --danger: #EF4444;
+    --danger-light: #FEE2E2;
+    --info: #3B82F6;
+    --info-light: #DBEAFE;
+    
+    /* Neutral - Light Theme */
+    --bg-body: #F8FAFC;
+    --bg-surface: #FFFFFF;
+    --bg-surface-hover: #F1F5F9;
+    --text-main: #0F172A;
+    --text-muted: #64748B;
+    --border-color: #E2E8F0;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    
+    /* Glassmorphism */
+    --glass-bg: rgba(255, 255, 255, 0.85);
+    --glass-border: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] {
+    /* Neutral - Dark Theme */
+    --bg-body: #0F172A;
+    --bg-surface: #1E293B;
+    --bg-surface-hover: #334155;
+    --text-main: #F8FAFC;
+    --text-muted: #94A3B8;
+    --border-color: #334155;
+    
+    /* Adjusted Semantic Colors for Dark Mode */
+    --primary-light: rgba(15, 118, 110, 0.2);
+    --success-light: rgba(16, 185, 129, 0.2);
+    --warning-light: rgba(245, 158, 11, 0.2);
+    --danger-light: rgba(239, 68, 68, 0.2);
+    --info-light: rgba(59, 130, 246, 0.2);
+    
+    /* Glassmorphism */
+    --glass-bg: rgba(30, 41, 59, 0.85);
+    --glass-border: rgba(255, 255, 255, 0.05);
+}
+
+/* Global Transition for Theme */
+body {
+    background-color: var(--bg-body);
+    color: var(--text-main);
+    transition: background-color 0.3s ease, color 0.3s ease;
+    font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Base Elements */
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+a:hover {
+    color: var(--primary-hover);
+}
+
+/* Premium Card Design */
+.card-premium {
+    background-color: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.25s ease;
+}
+
+.card-premium:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-2px);
+}
+
+/* Glassmorphism utility */
+.glass-panel {
+    background: var(--glass-bg);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--glass-border);
+}
+
+/* Status Badges */
+.badge-soft {
+    padding: 0.35em 0.8em;
+    border-radius: 999px;
+    font-weight: 500;
+    font-size: 0.85em;
+}
+
+.badge-soft-success {
+    background-color: var(--success-light);
+    color: var(--success);
+}
+
+.badge-soft-warning {
+    background-color: var(--warning-light);
+    color: var(--warning);
+}
+
+.badge-soft-danger {
+    background-color: var(--danger-light);
+    color: var(--danger);
+}
+
+.badge-soft-info {
+    background-color: var(--info-light);
+    color: var(--info);
+}
+
+.badge-soft-primary {
+    background-color: var(--primary-light);
+    color: var(--primary);
+}

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/js/app.js

@@ -0,0 +1,222 @@
+// Global DataTables Configuration
+if (typeof $ !== 'undefined' && $.fn && $.fn.dataTable) {
+    $.extend(true, $.fn.dataTable.defaults, {
+        pageLength: 10,
+        language: {
+            url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+        },
+        dom: '<"row mb-3"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row mt-3"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. Sidebar Toggle
+    const sidebar = document.getElementById('sidebar');
+    const toggleBtn = document.getElementById('sidebarToggle');
+    const mobileToggleBtn = document.getElementById('mobileSidebarToggle');
+    
+    if (toggleBtn && sidebar) {
+        toggleBtn.addEventListener('click', () => {
+            if (window.innerWidth >= 992) {
+                sidebar.classList.toggle('collapsed');
+            }
+        });
+    }
+
+    if (mobileToggleBtn && sidebar) {
+        mobileToggleBtn.addEventListener('click', () => {
+            sidebar.classList.toggle('show');
+        });
+    }
+
+    // 2. Theme Management (Light/Dark)
+    const themeToggleBtn = document.getElementById('themeToggle');
+    const htmlEl = document.documentElement;
+    const themeIcon = themeToggleBtn ? themeToggleBtn.querySelector('i') : null;
+
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    setTheme(savedTheme);
+
+    if (themeToggleBtn) {
+        themeToggleBtn.addEventListener('click', () => {
+            const currentTheme = htmlEl.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            setTheme(newTheme);
+        });
+    }
+
+    function setTheme(theme) {
+        htmlEl.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        if (themeIcon) {
+            themeIcon.className = theme === 'dark' ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
+        }
+        
+        // Update Chart.js colors dynamically if function exists
+        if (typeof window.updateChartsTheme === 'function') {
+            setTimeout(window.updateChartsTheme, 50); // wait for CSS variables to apply
+        }
+    }
+
+    // 3. Command Palette (Ctrl + K)
+    const cmdPalette = document.getElementById('commandPalette');
+    const cmdInput = document.getElementById('cmdInput');
+    
+    if (cmdPalette && cmdInput) {
+        document.addEventListener('keydown', (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                cmdPalette.classList.add('active');
+                cmdInput.focus();
+            }
+            if (e.key === 'Escape' && cmdPalette.classList.contains('active')) {
+                cmdPalette.classList.remove('active');
+            }
+        });
+
+        // Close when clicking outside
+        cmdPalette.addEventListener('click', (e) => {
+            if (e.target === cmdPalette) {
+                cmdPalette.classList.remove('active');
+            }
+        });
+
+        // Simple Search Filter
+        cmdInput.addEventListener('input', function() {
+            const val = this.value.toLowerCase();
+            const items = cmdPalette.querySelectorAll('.cmd-item');
+            items.forEach(item => {
+                const text = item.textContent.toLowerCase();
+                item.style.display = text.includes(val) ? 'flex' : 'none';
+            });
+        });
+    }
+
+    // 4. Toast Notifications
+    window.showToast = function(message, type = 'success') {
+        const container = document.getElementById('toastContainer');
+        if (!container) return;
+
+        const bgClass = type === 'success' ? 'bg-success text-white' : 
+                        type === 'danger' ? 'bg-danger text-white' : 
+                        type === 'warning' ? 'bg-warning text-dark' : 'bg-primary text-white';
+        const iconClass = type === 'success' ? 'bi-check-circle' : 
+                          type === 'danger' ? 'bi-x-circle' : 
+                          type === 'warning' ? 'bi-exclamation-triangle' : 'bi-info-circle';
+
+        const toastHtml = `
+            <div class="toast align-items-center ${bgClass} border-0 mb-2" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="d-flex">
+                    <div class="toast-body">
+                        <i class="bi ${iconClass} me-2"></i> ${message}
+                    </div>
+                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+        `;
+        
+        container.insertAdjacentHTML('beforeend', toastHtml);
+        const toastEl = container.lastElementChild;
+        const bsToast = new bootstrap.Toast(toastEl, { delay: 3000 });
+        bsToast.show();
+        
+        toastEl.addEventListener('hidden.bs.toast', () => {
+            toastEl.remove();
+        });
+    };
+
+    // 5. Real-time Clock
+    const rClock = document.getElementById('realtimeClock');
+    const rDate = document.getElementById('realtimeDate');
+    
+    function updateClock() {
+        if (!rClock) return;
+        const now = new Date();
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        const seconds = String(now.getSeconds()).padStart(2, '0');
+        rClock.textContent = `${hours}:${minutes}:${seconds}`;
+        
+        if (rDate) {
+            const options = { year: 'numeric', month: 'short', day: 'numeric' };
+            // Adjust Thai year (+543)
+            let thDate = now.toLocaleDateString('th-TH', options);
+            rDate.textContent = thDate;
+        }
+    }
+    
+    if (rClock) {
+        updateClock();
+        setInterval(updateClock, 1000);
+    }
+    
+    // 6. Fetch Today's Meetings for Notifications
+    const notifButton = document.getElementById('notifButton');
+    if (notifButton) {
+        notifButton.addEventListener('show.bs.dropdown', function () {
+            const content = document.getElementById('notifContent');
+            const badge = document.getElementById('notifBadge');
+            
+            // Format today's date for API call
+            const today = new Date();
+            const year = today.getFullYear();
+            const month = String(today.getMonth() + 1).padStart(2, '0');
+            const day = String(today.getDate()).padStart(2, '0');
+            const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
+            const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
+            
+            fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
+                .then(res => res.json())
+                .then(events => {
+                    if (events.length > 0) {
+                        badge.classList.remove('d-none');
+                        let html = '';
+                        events.forEach(evt => {
+                            let sourceBadge = evt.extendedProps.source === 'internal' 
+                                ? '<span class="badge bg-primary text-white" style="font-size: 0.6rem;">ระบบ</span>' 
+                                : '<span class="badge bg-warning text-dark" style="font-size: 0.6rem;">ภายนอก</span>';
+                            
+                            // format time
+                            let tStart = new Date(evt.start).toLocaleTimeString('th-TH', {hour: '2-digit', minute:'2-digit'});
+                            html += `
+                                <li>
+                                    <a class="dropdown-item py-2" href="calendar.php">
+                                        <div class="d-flex w-100 justify-content-between">
+                                            <h6 class="mb-1 text-truncate" style="max-width: 180px;">${evt.title}</h6>
+                                            <small class="text-muted">${tStart}</small>
+                                        </div>
+                                        <div class="mt-1">${sourceBadge}</div>
+                                    </a>
+                                </li>
+                                <li><hr class="dropdown-divider"></li>
+                            `;
+                        });
+                        content.innerHTML = html;
+                    } else {
+                        badge.classList.add('d-none');
+                        content.innerHTML = `<li><a class="dropdown-item text-center text-muted py-3" href="#">ไม่มีการประชุมวันนี้</a></li>`;
+                    }
+                })
+                .catch(err => {
+                    content.innerHTML = `<li><a class="dropdown-item text-center text-danger py-3" href="#">โหลดข้อมูลล้มเหลว</a></li>`;
+                });
+        });
+        
+        // Initial fetch just to check if we should show the red dot badge
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, '0');
+        const day = String(today.getDate()).padStart(2, '0');
+        const startStr = `${year}-${month}-${day}T00:00:00+07:00`;
+        const endStr = `${year}-${month}-${day}T23:59:59+07:00`;
+        
+        fetch(`api/get_events.php?start=${startStr}&end=${endStr}`)
+            .then(res => res.json())
+            .then(events => {
+                const badge = document.getElementById('notifBadge');
+                if (events.length > 0 && badge) {
+                    badge.classList.remove('d-none');
+                }
+            }).catch(e => {});
+    }
+});

ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet/assets/js/dashboard.js

@@ -0,0 +1,118 @@
+window.dashboardCharts = [];
+
+function initDashboardCharts(monthlyData, statusData) {
+    const rootStyle = getComputedStyle(document.documentElement);
+    const getVar = (name) => rootStyle.getPropertyValue(name).trim();
+
+    // Chart Options for Dark Mode Compatibility
+    const commonOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                labels: {
+                    color: getVar('--text-main') || '#64748B',
+                    font: { family: 'Sarabun' }
+                }
+            }
+        },
+        scales: {
+            x: {
+                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
+                grid: { color: getVar('--border-color') || '#E2E8F0' }
+            },
+            y: {
+                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
+                grid: { color: getVar('--border-color') || '#E2E8F0' }
+            }
+        }
+    };
+
+    // 1. Line Chart (Monthly Activity)
+    const lineCtx = document.getElementById('monthlyChart');
+    if (lineCtx) {
+        const lineChart = new Chart(lineCtx, {
+            type: 'line',
+            data: {
+                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+                datasets: [{
+                    label: 'จำนวนผู้ใช้งาน/การจอง',
+                    data: monthlyData || [12, 19, 15, 25, 22, 30, 28, 35],
+                    borderColor: '#0F766E', // Primary color
+                    backgroundColor: 'rgba(15, 118, 110, 0.1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                    fill: true
+                }]
+            },
+            options: commonOptions
+        });
+        window.dashboardCharts.push(lineChart);
+    }
+
+    // 2. Doughnut Chart (Status Overview)
+    const doughnutCtx = document.getElementById('statusChart');
+    if (doughnutCtx) {
+        const doughnutChart = new Chart(doughnutCtx, {
+            type: 'doughnut',
+            data: {
+                labels: ['เสร็จสิ้น', 'รอดำเนินการ', 'กำลังใช้งาน', 'ไม่มีข้อมูล'],
+                datasets: [{
+                    data: statusData || [55, 25, 15, 5],
+                    backgroundColor: [
+                        '#10B981', // Success (Completed)
+                        '#F59E0B', // Warning (Pending)
+                        '#0ea5e9', // Info (Active)
+                        '#64748B'  // Muted
+                    ],
+                    borderWidth: 0,
+                    hoverOffset: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '75%',
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: getVar('--text-main') || '#64748B',
+                            padding: 20,
+                            font: { family: 'Sarabun' }
+                        }
+                    }
+                }
+            }
+        });
+        window.dashboardCharts.push(doughnutChart);
+    }
+}
+
+window.updateChartsTheme = function() {
+    if (!window.dashboardCharts || window.dashboardCharts.length === 0) return;
+    
+    const rootStyle = getComputedStyle(document.documentElement);
+    const textMain = rootStyle.getPropertyValue('--text-main').trim() || '#64748B';
+    const textMuted = rootStyle.getPropertyValue('--text-muted').trim() || '#94A3B8';
+    const borderColor = rootStyle.getPropertyValue('--border-color').trim() || '#E2E8F0';
+
+    window.dashboardCharts.forEach(chart => {
+        // Update Legend
+        if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
+            chart.options.plugins.legend.labels.color = textMain;
+        }
+        // Update Scales (if exist)
+        if (chart.options.scales) {
+            if (chart.options.scales.x) {
+                if (chart.options.scales.x.ticks) chart.options.scales.x.ticks.color = textMuted;
+                if (chart.options.scales.x.grid) chart.options.scales.x.grid.color = borderColor;
+            }
+            if (chart.options.scales.y) {
+                if (chart.options.scales.y.ticks) chart.options.scales.y.ticks.color = textMuted;
+                if (chart.options.scales.y.grid) chart.options.scales.y.grid.color = borderColor;
+            }
+        }
+        chart.update();
+    });
+};