Initial commit

2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
@@ -0,0 +1,213 @@
+<?php
+session_start();
+header('Content-Type: application/json');
+require_once '../config/db.php';
+require_once '../includes/functions.php';
+
+check_login();
+
+$start = $_GET['start'] ?? ''; // ISO 8601
+$end = $_GET['end'] ?? ''; // ISO 8601
+
+$events = [];
+
+// Try to use Google API first
+$refresh_token = get_setting($pdo_sys, 'google_refresh_token');
+$client_id = get_setting($pdo_sys, 'google_client_id');
+$client_secret = get_setting($pdo_sys, 'google_client_secret');
+
+$api_success = false;
+
+if (!empty($refresh_token) && file_exists('../vendor/autoload.php')) {
+    require_once '../vendor/autoload.php';
+    try {
+        $client = new Google\Client();
+        $client->setClientId($client_id);
+        $client->setClientSecret($client_secret);
+        $client->refreshToken($refresh_token);
+        $service = new Google\Service\Calendar($client);
+        
+        // Fetch known internal event IDs and creators
+        $stmt = $pdo_sys->query("SELECT google_event_id, meet_link, created_by FROM meet_requests WHERE google_event_id IS NOT NULL");
+        $internal_events = [];
+        $internal_links = [];
+        $internal_creators = [];
+        while ($row = $stmt->fetch()) {
+            $internal_events[] = $row['google_event_id'];
+            $internal_links[$row['google_event_id']] = $row['meet_link'];
+            $internal_creators[$row['google_event_id']] = $row['created_by'];
+        }
+        
+        $optParams = array(
+            'singleEvents' => true,
+            'orderBy' => 'startTime'
+        );
+        
+        if ($start) $optParams['timeMin'] = date('c', strtotime($start));
+        if ($end) $optParams['timeMax'] = date('c', strtotime($end));
+        
+        $results = $service->events->listEvents('primary', $optParams);
+        
+        foreach ($results->getItems() as $event) {
+            $eventId = $event->getId();
+            
+            // Determine if internal or external
+            $is_internal = in_array($eventId, $internal_events);
+            
+            // Format start and end
+            $eventStart = $event->start->dateTime;
+            if (empty($eventStart)) $eventStart = $event->start->date;
+            $eventEnd = $event->end->dateTime;
+            if (empty($eventEnd)) $eventEnd = $event->end->date;
+            
+            // Meet link
+            $meet_link = '';
+            if ($is_internal && isset($internal_links[$eventId])) {
+                $meet_link = $internal_links[$eventId];
+            } else {
+                if ($event->getConferenceData()) {
+                    $entryPoints = $event->getConferenceData()->getEntryPoints();
+                    if ($entryPoints) {
+                        foreach ($entryPoints as $ep) {
+                            if ($ep->getEntryPointType() === 'video') {
+                                $meet_link = $ep->getUri();
+                                break;
+                            }
+                        }
+                    }
+                } else if ($event->getHangoutLink()) {
+                    $meet_link = $event->getHangoutLink();
+                }
+            }
+
+            $events[] = [
+                'id' => $eventId,
+                'title' => $event->getSummary() ?: '(ไม่มีชื่อหัวข้อ)',
+                'start' => $eventStart,
+                'end' => $eventEnd,
+                'color' => $is_internal ? '#0d6efd' : '#fd7e14', // Blue for internal, Orange for external
+                'extendedProps' => [
+                    'source' => $is_internal ? 'internal' : 'external',
+                    'meet_link' => $meet_link,
+                    'creator' => ($is_internal && isset($internal_creators[$eventId])) ? $internal_creators[$eventId] : $event->creator->email
+                ]
+            ];
+        
+        }
+        
+        // Fetch Thai Public Holidays from Thailand Formats API
+        try {
+            $year = $start ? date('Y', strtotime($start)) : date('Y');
+            $apiUrl = "https://thailandformats.com/api/v1/holidays/" . $year;
+            
+            // Set timeout for file_get_contents to prevent hanging
+            $ctx = stream_context_create(array('http' => array('timeout' => 5)));
+            $holidayJson = @file_get_contents($apiUrl, false, $ctx);
+            
+            if ($holidayJson) {
+                $holidayData = json_decode($holidayJson, true);
+                if (isset($holidayData['holidays'])) {
+                    $thai_holidays = [
+                        'new-years-day' => ['title' => 'วันขึ้นปีใหม่', 'details' => 'เฉลิมฉลองวันเริ่มต้นปีใหม่'],
+                        'special-public-holiday' => ['title' => 'วันหยุดพิเศษ', 'details' => 'วันหยุดพิเศษที่ประกาศเพิ่มเติมโดยคณะรัฐมนตรี'],
+                        'makha-bucha-day' => ['title' => 'วันมาฆบูชา', 'details' => 'วันสำคัญทางพระพุทธศาสนา รำลึกถึงพระพุทธโอวาทปาติโมกข์'],
+                        'substitution-for-makha-bucha-day' => ['title' => 'วันหยุดชดเชยวันมาฆบูชา', 'details' => 'วันหยุดชดเชยวันมาฆบูชา'],
+                        'chakri-memorial-day' => ['title' => 'วันจักรี', 'details' => 'รำลึกถึงพระบาทสมเด็จพระพุทธยอดฟ้าจุฬาโลกมหาราช และวันที่ระลึกมหาจักรีบรมราชวงศ์'],
+                        'substitution-for-chakri-memorial-day' => ['title' => 'วันหยุดชดเชยวันจักรี', 'details' => 'วันหยุดชดเชยวันจักรี'],
+                        'songkran-festival' => ['title' => 'วันสงกรานต์', 'details' => 'ประเพณีวันขึ้นปีใหม่ไทย'],
+                        'national-labour-day' => ['title' => 'วันแรงงานแห่งชาติ', 'details' => 'วันแรงงานแห่งชาติ'],
+                        'substitution-for-national-labour-day' => ['title' => 'วันหยุดชดเชยวันแรงงานแห่งชาติ', 'details' => 'วันหยุดชดเชยวันแรงงานแห่งชาติ'],
+                        'coronation-day' => ['title' => 'วันฉัตรมงคล', 'details' => 'รำลึกถึงพระราชพิธีบรมราชาภิเษก พระบาทสมเด็จพระวชิรเกล้าเจ้าอยู่หัว'],
+                        'substitution-for-coronation-day' => ['title' => 'วันหยุดชดเชยวันฉัตรมงคล', 'details' => 'วันหยุดชดเชยวันฉัตรมงคล'],
+                        'visakha-bucha-day' => ['title' => 'วันวิสาขบูชา', 'details' => 'วันสำคัญทางพระพุทธศาสนา ประสูติ ตรัสรู้ และปรินิพพาน'],
+                        'substitution-for-visakha-bucha-day' => ['title' => 'วันหยุดชดเชยวันวิสาขบูชา', 'details' => 'วันหยุดชดเชยวันวิสาขบูชา'],
+                        'hm-queen-suthidas-birthday' => ['title' => 'วันเฉลิมฯ สมเด็จพระนางเจ้าสุทิดาฯ', 'details' => 'วันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสุทิดา พัชรสุธาพิมลลักษณ พระบรมราชินี'],
+                        'substitution-for-hm-queen-suthidas-birthday' => ['title' => 'วันหยุดชดเชยวันเฉลิมฯ พระบรมราชินี', 'details' => 'วันหยุดชดเชยวันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสุทิดาฯ พระบรมราชินี'],
+                        'asanha-bucha-day' => ['title' => 'วันอาสาฬหบูชา', 'details' => 'วันสำคัญทางพระพุทธศาสนา รำลึกถึงการแสดงปฐมเทศนา'],
+                        'buddhist-lent-day' => ['title' => 'วันเข้าพรรษา', 'details' => 'วันเริ่มต้นเทศกาลเข้าพรรษา'],
+                        'substitution-for-buddhist-lent-day' => ['title' => 'วันหยุดชดเชยวันเข้าพรรษา', 'details' => 'วันหยุดชดเชยวันเข้าพรรษา'],
+                        'hm-king-maha-vajiralongkorns-birthday' => ['title' => 'วันเฉลิมฯ รัชกาลที่ 10', 'details' => 'วันเฉลิมพระชนมพรรษา พระบาทสมเด็จพระวชิรเกล้าเจ้าอยู่หัว รัชกาลที่ 10'],
+                        'substitution-for-hm-king-maha-vajiralongkorns-birthday' => ['title' => 'วันหยุดชดเชยวันเฉลิมฯ รัชกาลที่ 10', 'details' => 'วันหยุดชดเชยวันเฉลิมพระชนมพรรษา พระบาทสมเด็จพระวชิรเกล้าเจ้าอยู่หัว'],
+                        'hm-queen-sirikit-the-queen-mothers-birthday-mothers-day' => ['title' => 'วันแม่แห่งชาติ', 'details' => 'วันเฉลิมพระชนมพรรษา สมเด็จพระนางเจ้าสิริกิติ์ พระบรมราชินีนาถ พระบรมราชชนนีพันปีหลวง และวันแม่แห่งชาติ'],
+                        'substitution-for-hm-queen-sirikit-the-queen-mothers-birthday-mothers-day' => ['title' => 'วันหยุดชดเชยวันแม่แห่งชาติ', 'details' => 'วันหยุดชดเชยวันแม่แห่งชาติ'],
+                        'hm-king-bhumibol-adulyadej-the-great-memorial-day' => ['title' => 'วันนวมินทรมหาราช', 'details' => 'วันคล้ายวันสวรรคต พระบาทสมเด็จพระบรมชนกาธิเบศร มหาภูมิพลอดุลยเดชมหาราช บรมนาถบพิตร รัชกาลที่ 9'],
+                        'substitution-for-hm-king-bhumibol-adulyadej-the-great-memorial-day' => ['title' => 'วันหยุดชดเชยวันนวมินทรมหาราช', 'details' => 'วันหยุดชดเชยวันนวมินทรมหาราช'],
+                        'chulalongkorn-memorial-day' => ['title' => 'วันปิยมหาราช', 'details' => 'วันคล้ายวันสวรรคต พระบาทสมเด็จพระจุลจอมเกล้าเจ้าอยู่หัว รัชกาลที่ 5'],
+                        'substitution-for-chulalongkorn-memorial-day' => ['title' => 'วันหยุดชดเชยวันปิยมหาราช', 'details' => 'วันหยุดชดเชยวันปิยมหาราช'],
+                        'hm-king-bhumibol-adulyadejs-birthday-national-day-fathers-day' => ['title' => 'วันพ่อแห่งชาติ', 'details' => 'วันคล้ายวันพระบรมราชสมภพ พระบาทสมเด็จพระบรมชนกาธิเบศร มหาภูมิพลอดุลยเดชมหาราช บรมนาถบพิตร วันชาติ และวันพ่อแห่งชาติ'],
+                        'substitution-for-hm-king-bhumibol-adulyadejs-birthday' => ['title' => 'วันหยุดชดเชยวันพ่อแห่งชาติ', 'details' => 'วันหยุดชดเชยวันพ่อแห่งชาติ'],
+                        'constitution-day' => ['title' => 'วันรัฐธรรมนูญ', 'details' => 'ระลึกถึงการพระราชทานรัฐธรรมนูญแห่งราชอาณาจักรไทย'],
+                        'substitution-for-constitution-day' => ['title' => 'วันหยุดชดเชยวันรัฐธรรมนูญ', 'details' => 'วันหยุดชดเชยวันรัฐธรรมนูญ'],
+                        'new-years-eve' => ['title' => 'วันสิ้นปี', 'details' => 'วันสุดท้ายของปี'],
+                        'substitution-for-new-years-eve' => ['title' => 'วันหยุดชดเชยวันสิ้นปี', 'details' => 'วันหยุดชดเชยวันสิ้นปี']
+                    ];
+
+                    foreach ($holidayData['holidays'] as $h) {
+                        $titleTh = isset($thai_holidays[$h['slug']]) ? $thai_holidays[$h['slug']]['title'] : $h['title'];
+                        $detailsTh = isset($thai_holidays[$h['slug']]) ? $thai_holidays[$h['slug']]['details'] : $h['details'];
+                        
+                        // FullCalendar requires end date to be exclusive for all-day block events
+                        $endDate = date('Y-m-d', strtotime($h['end_date'] . ' +1 day'));
+                        
+                        $events[] = [
+                            'id' => 'hol_' . $h['slug'],
+                            'title' => $titleTh,
+                            'start' => $h['start_date'],
+                            'end' => $endDate,
+                            'color' => '#dc3545',
+                            'display' => 'block',
+                            'allDay' => true,
+                            'extendedProps' => [
+                                'source' => 'holiday',
+                                'creator' => 'ประกาศวันหยุดราชการ',
+                                'meet_link' => '',
+                                'details' => $detailsTh
+                            ]
+                        ];
+                    }
+                }
+            }
+        } catch (Exception $e) {
+            error_log("Thailand Formats API Fetch Error: " . $e->getMessage());
+        }
+
+        $api_success = true;
+    } catch (Exception $e) {
+        error_log("Google API Calendar Fetch Error: " . $e->getMessage());
+        $api_success = false;
+    }
+}
+
+// Fallback to local DB if API fails or not connected
+if (!$api_success) {
+    try {
+        $sql = "SELECT * FROM meet_requests";
+        if ($start && $end) {
+            $sql .= " WHERE meet_date BETWEEN :start AND :end";
+            $stmt = $pdo_sys->prepare($sql);
+            $stmt->execute(['start' => date('Y-m-d', strtotime($start)), 'end' => date('Y-m-d', strtotime($end))]);
+        } else {
+            $stmt = $pdo_sys->query($sql);
+        }
+        
+        while ($row = $stmt->fetch()) {
+            $events[] = [
+                'id' => $row['id'],
+                'title' => $row['topic'],
+                'start' => $row['meet_date'] . 'T' . $row['start_time'],
+                'end' => $row['meet_date'] . 'T' . $row['end_time'],
+                'color' => '#0d6efd',
+                'extendedProps' => [
+                    'source' => 'internal',
+                    'meet_link' => $row['meet_link'],
+                    'creator' => $row['created_by']
+                ]
+            ];
+        }
+    } catch (PDOException $e) {
+        // error
+    }
+}
+
+echo json_encode($events);
+?>
@@ -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;
+}
@@ -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);
+}
@@ -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 => {});
+    }
+});
@@ -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();
+    });
+};
@@ -0,0 +1,42 @@
+<?php
+session_start();
+require_once '../config/db.php';
+require_once '../includes/functions.php';
+
+// Include Composer autoloader
+require_once '../vendor/autoload.php';
+
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    header("location: ../index.php");
+    exit;
+}
+
+$client_id = get_setting($pdo_sys, 'google_client_id');
+$client_secret = get_setting($pdo_sys, 'google_client_secret');
+
+if (empty($client_id) || empty($client_secret)) {
+    $_SESSION['settings_error'] = "กรุณาตั้งค่า Client ID และ Client Secret ก่อนทำการเชื่อมต่อ";
+    header("location: ../settings.php");
+    exit;
+}
+
+$client = new Google\Client();
+$client->setClientId($client_id);
+$client->setClientSecret($client_secret);
+
+// Construct redirect URI dynamically
+$protocol = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "https" : "http";
+$host = $_SERVER['HTTP_HOST'];
+$base_dir = dirname(dirname($_SERVER['PHP_SELF']));
+$redirect_uri = $protocol . "://" . $host . $base_dir . "/auth/google_callback.php";
+$redirect_uri = str_replace('//auth', '/auth', $redirect_uri);
+
+$client->setRedirectUri($redirect_uri);
+$client->addScope(Google\Service\Calendar::CALENDAR_EVENTS);
+$client->setAccessType('offline');
+$client->setPrompt('consent');
+
+$auth_url = $client->createAuthUrl();
+header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
+exit;
+?>
@@ -0,0 +1,53 @@
+<?php
+session_start();
+require_once '../config/db.php';
+require_once '../includes/functions.php';
+
+require_once '../vendor/autoload.php';
+
+if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+    header("location: ../index.php");
+    exit;
+}
+
+if (isset($_GET['code'])) {
+    $client_id = get_setting($pdo_sys, 'google_client_id');
+    $client_secret = get_setting($pdo_sys, 'google_client_secret');
+
+    $client = new Google\Client();
+    $client->setClientId($client_id);
+    $client->setClientSecret($client_secret);
+    
+    $protocol = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? "https" : "http";
+    $host = $_SERVER['HTTP_HOST'];
+    $base_dir = dirname(dirname($_SERVER['PHP_SELF']));
+    $redirect_uri = $protocol . "://" . $host . $base_dir . "/auth/google_callback.php";
+    $redirect_uri = str_replace('//auth', '/auth', $redirect_uri);
+    
+    $client->setRedirectUri($redirect_uri);
+
+    try {
+        $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
+        
+        if (!isset($token['error'])) {
+            if (isset($token['refresh_token'])) {
+                save_setting($pdo_sys, 'google_refresh_token', $token['refresh_token'], $_SESSION['fullname']);
+                add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Google Auth', 'Successfully connected and received refresh token');
+                
+                $_SESSION['settings_msg'] = "เชื่อมต่อบัญชี Google สำเร็จแล้ว!";
+            } else {
+                $_SESSION['settings_error'] = "ไม่ได้รับ Refresh Token กรณีเคยอนุญาตสิทธิ์ไปแล้ว กรุณาไปที่ Google Account > Security > Third-party apps เพื่อลบสิทธิ์ออกก่อน แล้วลองเชื่อมต่อใหม่อีกครั้ง";
+            }
+        } else {
+            $_SESSION['settings_error'] = "เกิดข้อผิดพลาดในการรับ Token: " . $token['error'];
+        }
+    } catch (Exception $e) {
+        $_SESSION['settings_error'] = "เกิดข้อผิดพลาด: " . $e->getMessage();
+    }
+} else if (isset($_GET['error'])) {
+    $_SESSION['settings_error'] = "ถูกปฏิเสธการเข้าถึง: " . $_GET['error'];
+}
+
+header("location: ../settings.php");
+exit;
+?>
@@ -0,0 +1,93 @@
+<?php
+// auth/login.php
+session_start();
+require_once '../config/db.php';
+require_once '../includes/functions.php';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+
+    $user = trim($_POST['username'] ?? '');
+    $pass = trim($_POST['password'] ?? '');
+
+    if (empty($user) || empty($pass)) {
+        $_SESSION['login_error'] = "กรุณากรอก Username และ Password";
+        header("location: ../index.php");
+        exit;
+    }
+
+    $pass_md5 = MD5($pass);
+
+    $sql = "SELECT HR_CID, HR_PASSWORD, HR_STATUS_ID, HR_PREFIX_NAME, HR_FNAME, HR_LNAME 
+            FROM hr_person a  
+            LEFT OUTER JOIN hr_prefix e ON a.HR_PREFIX_ID=e.HR_PREFIX_ID 
+            WHERE a.HR_USERNAME = :user LIMIT 1";
+
+    try {
+        $stmt = $pdo_hos->prepare($sql);
+        $stmt->execute(['user' => $user]);
+        $row = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if (!$row) {
+            $_SESSION['login_error'] = "ไม่พบบัญชีผู้ใช้นี้";
+            add_log($pdo_sys, $user, 'Unknown', 'Login Failed', 'User not found');
+            header("location: ../index.php");
+            exit;
+        }
+
+        if (strtolower($row['HR_PASSWORD']) !== strtolower($pass_md5)) {
+            $_SESSION['login_error'] = "รหัสผ่านไม่ถูกต้อง";
+            add_log($pdo_sys, $row['HR_CID'], $row['HR_FNAME'], 'Login Failed', 'Incorrect password');
+            header("location: ../index.php");
+            exit;
+        }
+
+        if ($row['HR_STATUS_ID'] !== '01') {
+            $_SESSION['login_error'] = "บัญชีผู้ใช้นี้ถูกปิดการใช้งานไปแล้ว";
+            add_log($pdo_sys, $row['HR_CID'], $row['HR_FNAME'], 'Login Failed', 'Account disabled');
+            header("location: ../index.php");
+            exit;
+        }
+
+        unset($_SESSION['login_error']);
+
+        // Check Role (RBAC)
+        $role = null;
+        global $master_super_admin_cid;
+        
+        if ($row['HR_CID'] === $master_super_admin_cid) {
+            $role = 'superadmin';
+        } else {
+            // Check in system_users table
+            $stmt_sys = $pdo_sys->prepare("SELECT role FROM system_users WHERE cid = :cid");
+            $stmt_sys->execute(['cid' => $row['HR_CID']]);
+            $sys_user = $stmt_sys->fetch();
+            
+            if ($sys_user) {
+                $role = $sys_user['role'];
+            } else {
+                $role = 'user'; // Default role for authenticated hospital staff
+            }
+        }
+
+        $_SESSION['loggedin'] = true;
+        $_SESSION['role'] = $role;
+        $_SESSION['fullname'] = $row['HR_PREFIX_NAME'] . $row['HR_FNAME'] . " " . $row['HR_LNAME'];
+        $_SESSION['cid'] = $row['HR_CID'];
+        //$_SESSION['dep_id'] = $row['HR_DEPARTMENT_SUB_SUB_ID'];
+        //$_SESSION['department'] = $row['HR_DEPARTMENT_SUB_SUB_NAME'];
+
+        // Add Log
+        add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Login Success', "User logged in successfully (Role: $role)");
+
+        header("location: ../dashboard.php");
+        exit;
+    } catch (PDOException $e) {
+        $_SESSION['login_error'] = "เกิดข้อผิดพลาดของระบบ: " . $e->getMessage();
+        header("location: ../index.php");
+        exit;
+    }
+} else {
+    header("location: ../index.php");
+    exit;
+}
+?>
@@ -0,0 +1,20 @@
+<?php
+// auth/logout.php
+session_start();
+require_once '../config/db.php';
+require_once '../includes/functions.php';
+
+if (isset($_SESSION['cid'])) {
+    add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Logout', 'User logged out');
+}
+
+// Unset all of the session variables
+$_SESSION = array();
+
+// Destroy the session.
+session_destroy();
+
+// Redirect to login page
+header("location: ../index.php");
+exit;
+?>
@@ -0,0 +1,50 @@
+<?php
+// avatar.php
+session_start();
+require_once 'config/db.php';
+
+// Get CID from GET parameter or fallback to session
+$cid = $_GET['cid'] ?? ($_SESSION['cid'] ?? '');
+$name = $_GET['name'] ?? ($_SESSION['fullname'] ?? 'User');
+
+$fallback_url = 'https://ui-avatars.com/api/?name=' . urlencode($name) . '&background=0F766E&color=fff';
+
+if (empty($cid)) {
+    header('Location: ' . $fallback_url);
+    exit;
+}
+
+try {
+    $stmt = $pdo_hos->prepare("SELECT HR_IMAGE FROM hr_person WHERE HR_CID = :cid LIMIT 1");
+    $stmt->execute(['cid' => $cid]);
+    $row = $stmt->fetch(PDO::FETCH_ASSOC);
+
+    if ($row && !empty($row['HR_IMAGE'])) {
+        // We have an image blob
+        $image_data = $row['HR_IMAGE'];
+        
+        // Output appropriate headers
+        // Assuming it's typically JPEG or PNG. Use finfo to get mime if possible, or fallback to jpeg.
+        $finfo = new finfo(FILEINFO_MIME_TYPE);
+        $mime = $finfo->buffer($image_data);
+        
+        if (!$mime || $mime == 'application/octet-stream') {
+            $mime = 'image/jpeg';
+        }
+        
+        header("Content-Type: " . $mime);
+        header("Content-Length: " . strlen($image_data));
+        // Add caching headers
+        header("Cache-Control: public, max-age=86400");
+        
+        echo $image_data;
+        exit;
+    }
+} catch (PDOException $e) {
+    // Silently fallback on database error
+}
+
+// If no image found or error, redirect to ui-avatars
+header('Location: ' . $fallback_url);
+exit;
+?>
@@ -0,0 +1,263 @@
+<?php require_once 'includes/header.php'; ?>
+
+<!-- FullCalendar Library -->
+<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
+<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
+<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/th.js'></script>
+
+<div class="page-content">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+            <h4 class="fw-bold mb-1">ปฏิทินการขอใช้ห้องประชุม</h4>
+            <p class="text-muted mb-0">แสดงข้อมูลการจองทั้งหมด</p>
+        </div>
+        <div class="d-flex align-items-center gap-3 bg-white px-3 py-2 rounded-pill shadow-sm flex-wrap">
+            <span class="fs-6 fw-bold me-2">สัญลักษณ์:</span>
+            <div class="d-flex align-items-center gap-1">
+                <span style="display:inline-block; width:12px; height:12px; background-color:#0d6efd; border-radius:50%;"></span>
+                <span class="small text-muted">จองผ่านระบบนี้</span>
+            </div>
+            <div class="d-flex align-items-center gap-1">
+                <span style="display:inline-block; width:12px; height:12px; background-color:#fd7e14; border-radius:50%;"></span>
+                <span class="small text-muted">จองผ่านช่องทางอื่น</span>
+            </div>
+            <div class="d-flex align-items-center gap-1">
+                <span style="display:inline-block; width:12px; height:12px; background-color:#dc3545; border-radius:50%;"></span>
+                <span class="small text-muted">วันหยุดราชการ</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12">
+            <div class="card border-0 shadow-sm" style="border-radius: 16px;">
+                <div class="card-body p-4">
+                    <div id="calendar"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Event Detail -->
+<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
+      <div class="modal-header border-0 pb-0 pt-4 px-4">
+        <h5 class="modal-title fw-bold" id="eventModalLabel">รายละเอียดการประชุม</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-4">
+        <p><strong>หัวข้อ:</strong> <span id="eventTopic"></span></p>
+        <p><strong>ผู้สร้าง:</strong> <span id="eventCreator"></span></p>
+        <p><strong>ที่มา:</strong> <span id="eventSource"></span></p>
+        <p><strong>วันและเวลา:</strong> <span id="eventTime"></span></p>
+        <p id="eventDetailsContainer" style="display:none;"><strong>รายละเอียด:</strong> <span id="eventDetails" class="text-muted"></span></p>
+        <div id="eventLinkContainer" class="mt-3">
+            <a href="#" id="eventMeetLink" target="_blank" class="btn btn-primary w-100 rounded-pill"><i class="bi bi-camera-video"></i> เข้าร่วมประชุม</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var calendarEl = document.getElementById('calendar');
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+        initialView: 'dayGridMonth',
+        firstDay: 0,
+        contentHeight: 'auto',
+        locale: 'th',
+        headerToolbar: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
+        },
+        buttonText: {
+            today: 'วันนี้',
+            month: 'เดือน',
+            week: 'สัปดาห์',
+            day: 'วัน',
+            list: 'รายการ'
+        },
+        themeSystem: 'bootstrap5',
+        events: 'api/get_events.php',
+        eventDisplay: 'block',
+        eventClick: function(info) {
+            info.jsEvent.preventDefault(); // don't let the browser navigate
+            
+            var eventObj = info.event;
+            var props = eventObj.extendedProps;
+            
+            document.getElementById('eventTopic').innerText = eventObj.title;
+            document.getElementById('eventCreator').innerText = props.creator || '-';
+            
+            let sourceText = '';
+            if (props.source === 'internal') {
+                sourceText = '<span class="badge bg-primary">จองผ่านระบบนี้</span>';
+            } else if (props.source === 'holiday') {
+                sourceText = '<span class="badge bg-danger">วันหยุดราชการ</span>';
+            } else {
+                sourceText = '<span class="badge bg-warning text-dark">จองผ่านช่องทางอื่น</span>';
+            }
+            document.getElementById('eventSource').innerHTML = sourceText;
+            
+            // Format time manually
+            let start = eventObj.start;
+            let end = eventObj.end;
+            let timeStr = "";
+            
+            if (start) {
+                let sD = start.toLocaleDateString('th-TH');
+                let sT = start.toLocaleTimeString('th-TH', {hour: '2-digit', minute:'2-digit'});
+                timeStr += sD + " " + sT;
+            }
+            if (end) {
+                let eD = end.toLocaleDateString('th-TH');
+                let eT = end.toLocaleTimeString('th-TH', {hour: '2-digit', minute:'2-digit'});
+                if (start && start.toLocaleDateString('th-TH') === eD) {
+                    timeStr += " - " + eT;
+                } else {
+                    timeStr += " ถึง " + eD + " " + eT;
+                }
+            }
+            document.getElementById('eventTime').innerText = timeStr;
+            
+            // Display Details if available
+            var detailsContainer = document.getElementById('eventDetailsContainer');
+            if (props.details) {
+                document.getElementById('eventDetails').innerText = props.details;
+                detailsContainer.style.display = 'block';
+            } else {
+                detailsContainer.style.display = 'none';
+            }
+            
+            var linkContainer = document.getElementById('eventLinkContainer');
+            if (props.meet_link) {
+                document.getElementById('eventMeetLink').href = props.meet_link;
+                linkContainer.style.display = 'block';
+            } else {
+                linkContainer.style.display = 'none';
+            }
+            
+            var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
+            eventModal.show();
+        }
+    });
+    calendar.render();
+});
+</script>
+
+<style>
+/* FullCalendar Premium Customizations */
+.fc {
+    font-family: 'Inter', 'Prompt', sans-serif;
+}
+.fc .fc-toolbar-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: var(--text-main);
+    letter-spacing: -0.5px;
+}
+.fc .fc-button-group > .fc-button {
+    margin-right: 2px;
+}
+.fc .fc-button-primary {
+    background-color: var(--bg-surface) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-main) !important;
+    box-shadow: var(--shadow-sm);
+    border-radius: 8px !important;
+    text-transform: capitalize;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    padding: 0.4rem 1rem;
+}
+.fc .fc-button-primary:hover {
+    background-color: var(--bg-body) !important;
+    color: var(--primary) !important;
+    border-color: var(--primary) !important;
+}
+.fc .fc-button-primary:not(:disabled):active, 
+.fc .fc-button-primary:not(:disabled).fc-button-active {
+    background-color: var(--primary-light) !important;
+    color: var(--primary) !important;
+    border-color: var(--primary) !important;
+    box-shadow: none !important;
+}
+.fc .fc-button-primary:focus {
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
+}
+.fc-theme-bootstrap5 .fc-scrollgrid {
+    border-color: var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+}
+.fc-theme-bootstrap5 .fc-scrollgrid td, .fc-theme-bootstrap5 .fc-scrollgrid th {
+    border-color: var(--border-color);
+}
+.fc .fc-col-header-cell {
+    background-color: #f8fafc;
+    padding: 12px 0;
+    border-bottom: 2px solid var(--border-color);
+}
+.fc .fc-col-header-cell-cushion {
+    color: #64748b;
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    text-decoration: none;
+}
+.fc .fc-daygrid-day-number {
+    color: var(--text-main);
+    font-weight: 600;
+    padding: 8px;
+    text-decoration: none;
+}
+.fc .fc-day-today {
+    background-color: rgba(13, 110, 253, 0.04) !important;
+}
+.fc .fc-day-today .fc-daygrid-day-number {
+    background-color: var(--primary);
+    color: white;
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 4px;
+    padding: 0;
+    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
+}
+.fc .fc-day-sat, .fc .fc-day-sun {
+    background-color: #f8f9fa; /* Light gray for weekends to stand out slightly */
+}
+.fc-event {
+    cursor: pointer;
+    border: none !important;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin: 2px 4px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.fc-event:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    opacity: 0.95;
+}
+.fc-daygrid-event-dot {
+    display: none;
+}
+.fc-daygrid-block-event .fc-event-time, 
+.fc-daygrid-block-event .fc-event-title {
+    font-weight: 500;
+}
+</style>
+
+<?php require_once 'includes/footer.php'; ?>
@@ -0,0 +1,53 @@
+<?php
+// config/db.php
+
+// -------------------------------------------------------------
+// Master Super Admin (สำหรับเข้าใช้ครั้งแรกสุด)
+// ให้ระบุเลขบัตรประชาชน 13 หลักของผู้ดูแลระบบสูงสุด
+// -------------------------------------------------------------
+$master_super_admin_cid = '1234567890123'; // เปลี่ยนเป็นเลขบัตรประชาชนของคุณ
+
+
+// -------------------------------------------------------------
+// 1. การเชื่อมต่อฐานข้อมูลของระบบ (สำหรับตาราง meet_requests, logs, settings)
+// -------------------------------------------------------------
+$sys_host = 'localhost';
+$sys_db   = 'meet_online';
+$sys_user = 'root';
+$sys_pass = '@Samui@10742';
+$sys_charset = 'utf8mb4';
+
+$sys_dsn = "mysql:host=$sys_host;dbname=$sys_db;charset=$sys_charset";
+$sys_options = [
+    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    PDO::ATTR_EMULATE_PREPARES   => false,
+];
+
+try {
+    $pdo_sys = new PDO($sys_dsn, $sys_user, $sys_pass, $sys_options);
+} catch (\PDOException $e) {
+    die("ไม่สามารถเชื่อมต่อฐานข้อมูลระบบได้: " . $e->getMessage());
+}
+
+// -------------------------------------------------------------
+// 2. การเชื่อมต่อฐานข้อมูล HOSxP (สำหรับตาราง hr_person)
+// -------------------------------------------------------------
+$hos_host = '10.0.250.115'; // IP ของ Host ที่เก็บ hr_person
+$hos_db   = 'hosoffice_2566';
+$hos_user = 'hosoffice';
+$hos_pass = 'hosoffice10742';
+$hos_charset = 'utf8';     // HOSxP มักใช้ tis620 หรือ utf8
+
+$hos_dsn = "mysql:host=$hos_host;dbname=$hos_db;charset=$hos_charset";
+$hos_options = [
+    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
+    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    PDO::ATTR_EMULATE_PREPARES   => false,
+];
+
+try {
+    $pdo_hos = new PDO($hos_dsn, $hos_user, $hos_pass, $hos_options);
+} catch (\PDOException $e) {
+    die("ไม่สามารถเชื่อมต่อฐานข้อมูล HOSxP (hr_person) ได้: " . $e->getMessage());
+}
@@ -0,0 +1,312 @@
+<?php
+require_once 'includes/header.php';
+
+// Fetch stats
+try {
+    $stmt_u = $pdo_sys->query("SELECT COUNT(DISTINCT created_by) as total_users FROM meet_requests");
+    $total_users = $stmt_u->fetch()['total_users'];
+
+    $stmt1 = $pdo_sys->query("SELECT COUNT(*) as total FROM meet_requests");
+    $total_meetings = $stmt1->fetch()['total'];
+
+    $stmt2 = $pdo_sys->query("SELECT COUNT(*) as pending FROM meet_requests WHERE CONCAT(meet_date, ' ', start_time) > NOW()");
+    $pending_meetings = $stmt2->fetch()['pending'];
+
+    $stmt3 = $pdo_sys->query("SELECT COUNT(*) as completed FROM meet_requests WHERE CONCAT(meet_date, ' ', end_time) < NOW()");
+    $completed_meetings = $stmt3->fetch()['completed'];
+    
+    $stmt4 = $pdo_sys->query("SELECT COUNT(*) as active FROM meet_requests WHERE NOW() BETWEEN CONCAT(meet_date, ' ', start_time) AND CONCAT(meet_date, ' ', end_time)");
+    $active_meetings = $stmt4->fetch()['active'];
+
+    // Monthly Data
+    $year = date('Y');
+    $stmt_m = $pdo_sys->query("SELECT MONTH(meet_date) as m, COUNT(*) as c FROM meet_requests WHERE YEAR(meet_date) = $year GROUP BY m");
+    $monthly_arr = array_fill(1, 12, 0);
+    while($row = $stmt_m->fetch()) {
+        $monthly_arr[(int)$row['m']] = (int)$row['c'];
+    }
+    
+} catch (PDOException $e) {
+    $total_meetings = 0;
+    $pending_meetings = 0;
+    $completed_meetings = 0;
+    $active_meetings = 0;
+    $total_users = 0;
+    $monthly_arr = array_fill(1, 12, 0);
+}
+
+$monthly_json = json_encode(array_values($monthly_arr));
+$status_json = json_encode([$completed_meetings, $pending_meetings, $active_meetings, 0]);
+
+// Thai Date Format
+$today = format_thai_date(date('Y-m-d'));
+?>
+
+<div class="page-content">
+    
+    <!-- Welcome Hero -->
+    <div class="card-premium mb-4 overflow-hidden position-relative" style="background: linear-gradient(135deg, var(--primary) 0%, #064e3b 100%); color: white; border: none;">
+        <div class="card-body p-4 p-lg-5 position-relative z-1">
+            <h2 class="fw-bold mb-1">Good Morning, <?= htmlspecialchars($_SESSION['fullname']) ?> 👋</h2>
+            <p class="opacity-75 mb-4"><?= $today ?> | นี่คือภาพรวมของระบบในวันนี้</p>
+            <div class="d-flex gap-3">
+                <a href="requests.php" class="btn btn-light rounded-pill px-4 fw-semibold text-primary">ดูรายการทั้งหมด</a>
+                <button class="btn btn-outline-light rounded-pill px-4" onclick="window.showToast('กำลังโหลดข้อมูล...', 'info')">รีเฟรชข้อมูล</button>
+            </div>
+        </div>
+        <i class="bi bi-clouds position-absolute opacity-25" style="font-size: 15rem; right: -2rem; bottom: -4rem;"></i>
+    </div>
+
+    <!-- KPI Cards -->
+    <div class="row g-4 mb-4">
+        <div class="col-md-6 col-xl-3">
+            <div class="card-premium h-100 p-4">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <p class="text-muted mb-1 fw-medium text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">จำนวนผู้ใช้งาน</p>
+                        <h3 class="mb-0 fw-bold"><?= number_format($total_users) ?></h3>
+                    </div>
+                    <div class="p-2 rounded-3 bg-primary-subtle text-primary">
+                        <i class="bi bi-people fs-4"></i>
+                    </div>
+                </div>
+                <div class="text-success small fw-medium">
+                    <i class="bi bi-arrow-up-short"></i> 12.5% <span class="text-muted">เมื่อเทียบกับเดือนที่แล้ว</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-xl-3">
+            <div class="card-premium h-100 p-4">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <p class="text-muted mb-1 fw-medium text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">การจองทั้งหมด</p>
+                        <h3 class="mb-0 fw-bold"><?= number_format($total_meetings) ?></h3>
+                    </div>
+                    <div class="p-2 rounded-3 text-info" style="background-color: var(--info-light);">
+                        <i class="bi bi-calendar-check fs-4"></i>
+                    </div>
+                </div>
+                <div class="text-success small fw-medium">
+                    <i class="bi bi-arrow-up-short"></i> 5.2% <span class="text-muted">เมื่อเทียบกับเดือนที่แล้ว</span>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-xl-3">
+            <div class="card-premium h-100 p-4">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <p class="text-muted mb-1 fw-medium text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">รอดำเนินการ</p>
+                        <h3 class="mb-0 fw-bold"><?= number_format($pending_meetings) ?></h3>
+                    </div>
+                    <div class="p-2 rounded-3 text-warning" style="background-color: var(--warning-light);">
+                        <i class="bi bi-hourglass-split fs-4"></i>
+                    </div>
+                </div>
+                <div class="text-warning small fw-medium">
+                    ต้องตรวจสอบวันนี้
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-xl-3">
+            <div class="card-premium h-100 p-4">
+                <div class="d-flex justify-content-between align-items-start mb-3">
+                    <div>
+                        <p class="text-muted mb-1 fw-medium text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">เสร็จสิ้น</p>
+                        <h3 class="mb-0 fw-bold"><?= number_format($completed_meetings) ?></h3>
+                    </div>
+                    <div class="p-2 rounded-3 text-success" style="background-color: var(--success-light);">
+                        <i class="bi bi-check2-circle fs-4"></i>
+                    </div>
+                </div>
+                <div class="text-muted small fw-medium">
+                    ทั้งหมดในระบบ
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts -->
+    <div class="row g-4 mb-4">
+        <div class="col-lg-8">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 fw-bold">สถิติการใช้งานรายเดือน (Monthly Activity)</h5>
+                    <div class="dropdown">
+                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle rounded-pill" type="button" data-bs-toggle="dropdown">
+                            ปีนี้ (<?= date('Y') + 543 ?>)
+                        </button>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="#">ปีที่แล้ว (<?= date('Y') + 542 ?>)</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-body p-4">
+                    <div style="height: 300px;">
+                        <canvas id="monthlyChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-lg-4">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                    <h5 class="mb-0 fw-bold">ภาพรวมสถานะ (Status)</h5>
+                </div>
+                <div class="card-body p-4 d-flex justify-content-center align-items-center">
+                    <div style="height: 250px; width: 100%;">
+                        <canvas id="statusChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Recent Records and Activity -->
+    <div class="row g-4">
+        <!-- Table -->
+        <div class="col-xl-8">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 fw-bold">การขอใช้งานล่าสุด จำนวน 5 รายการ</h5>
+                    <a href="requests.php" class="btn btn-sm btn-light rounded-pill">ดูทั้งหมด</a>
+                </div>
+                <div class="card-body p-4">
+                    <div class="table-responsive">
+                        <table id="recentRecordsTable" class="table table-hover align-middle mb-0" style="color: var(--text-main); width: 100%;">
+                            <thead class="table-light" style="background-color: var(--bg-surface-hover);">
+                                <tr>
+                                    <th class="ps-4 text-nowrap">ID</th>
+                                    <th>หัวข้อ (Topic)</th>
+                                    <th class="text-nowrap text-center">ผู้จอง</th>
+                                    <th class="text-nowrap">วันที่</th>
+                                    <th class="text-nowrap text-center">สถานะ</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <?php
+                                try {
+                                    // Fetch only the 5 most recent records
+                                    $stmt = $pdo_sys->query("SELECT * FROM meet_requests ORDER BY id DESC LIMIT 5");
+                                    while ($row = $stmt->fetch()) {
+                                        $meet_dt = $row['meet_date'] . ' ' . $row['start_time'];
+                                        $end_dt = $row['meet_date'] . ' ' . $row['end_time'];
+                                        $now = date('Y-m-d H:i:s');
+                                        
+                                        $status_html = "<span class='badge-soft badge-soft-warning'>รอดำเนินการ</span>";
+                                        if ($now > $end_dt) {
+                                            $status_html = "<span class='badge-soft badge-soft-success'>เสร็จสิ้น</span>";
+                                        } else if ($now >= $meet_dt && $now <= $end_dt) {
+                                            $status_html = "<span class='badge-soft' style='background-color: var(--info-light); color: var(--info);'>กำลังใช้งาน</span>";
+                                        }
+
+                                        echo "<tr>";
+                                        echo "<td class='ps-4 fw-medium text-muted text-nowrap'>#" . str_pad($row['id'], 4, '0', STR_PAD_LEFT) . "</td>";
+                                        echo "<td><span class='fw-medium'>" . htmlspecialchars($row['topic']) . "</span></td>";
+                                        echo "<td class='text-nowrap text-center'>" . htmlspecialchars($row['created_by']) . "</td>";
+                                        echo "<td class='text-nowrap'>" . format_thai_date($row['meet_date']) . " " . date('H:i', strtotime($row['start_time'])) . " - " . date('H:i', strtotime($row['end_time'])) . "</td>";
+                                        echo "<td class='text-nowrap text-center'>" . $status_html . "</td>";
+                                        echo "</tr>";
+                                    }
+                                } catch (PDOException $e) {
+                                    echo "<tr><td colspan='5' class='text-center text-muted py-4'>ไม่มีข้อมูล</td></tr>";
+                                }
+                                ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Today's Meetings -->
+        <div class="col-xl-4">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 fw-bold">รายการประชุมวันนี้</h5>
+                    <span class="badge bg-primary rounded-pill"><?= date('d M') ?></span>
+                </div>
+                <div class="card-body px-4 pt-0">
+                    <div class="position-relative mt-3" style="border-left: 2px solid var(--border-color); margin-left: 10px;">
+                        <?php
+                        try {
+                            $today_date = date('Y-m-d');
+                            $stmt = $pdo_sys->prepare("SELECT * FROM meet_requests WHERE meet_date = ? ORDER BY start_time ASC");
+                            $stmt->execute([$today_date]);
+                            
+                            $meetings_today = $stmt->fetchAll();
+                            
+                            if (count($meetings_today) > 0) {
+                                foreach ($meetings_today as $row) {
+                                    $end_dt = $row['meet_date'] . ' ' . $row['end_time'];
+                                    $meet_dt = $row['meet_date'] . ' ' . $row['start_time'];
+                                    $now = date('Y-m-d H:i:s');
+                                    
+                                    // Determine icon color based on status
+                                    $icon_color = 'text-primary';
+                                    $border_color = 'var(--primary)';
+                                    $opacity = '1';
+                                    
+                                    if ($now > $end_dt) {
+                                        $icon_color = 'text-success'; // Finished
+                                        $border_color = 'var(--success)';
+                                        $opacity = '0.6';
+                                    } else if ($now >= $meet_dt && $now <= $end_dt) {
+                                        $icon_color = 'text-info'; // Happening now
+                                        $border_color = 'var(--info)';
+                                    }
+
+                                    echo '
+                                    <div class="position-relative mb-4 ps-4" style="opacity: '.$opacity.';">
+                                        <i class="bi bi-circle-fill '.$icon_color.' position-absolute" style="left: -11px; top: 0px; font-size: 1rem; background: var(--bg-surface); border: 2px solid var(--bg-surface); border-radius: 50%;"></i>
+                                        <div class="p-3 rounded-3" style="background-color: rgba(0,0,0,0.02); border-left: 3px solid '.$border_color.';">
+                                            <div class="d-flex justify-content-between align-items-center mb-1">
+                                                <span class="fw-bold text-dark small">'.date('H:i', strtotime($row['start_time'])).' - '.date('H:i', strtotime($row['end_time'])).'</span>
+                                                <span class="badge bg-light text-dark border"><i class="bi bi-people-fill me-1"></i>'.htmlspecialchars($row['attendees'] ?? '0').'</span>
+                                            </div>
+                                            <p class="mb-1 fw-medium text-truncate" title="'.htmlspecialchars($row['topic']).'">'.htmlspecialchars($row['topic']).'</p>
+                                            <p class="text-muted small mb-0"><i class="bi bi-person me-1"></i>'.htmlspecialchars($row['created_by']).'</p>
+                                        </div>
+                                    </div>';
+                                }
+                            } else {
+                                echo '
+                                <div class="text-center py-5">
+                                    <div class="mb-3"><i class="bi bi-calendar-x text-muted" style="font-size: 3rem; opacity: 0.5;"></i></div>
+                                    <p class="text-muted mb-0 fw-medium">ไม่มีรายการประชุมในวันนี้</p>
+                                </div>';
+                            }
+                        } catch (PDOException $e) {}
+                        ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- Initialize Charts on this page -->
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // Init charts using function from dashboard.js
+        if(typeof initDashboardCharts === 'function') {
+            initDashboardCharts(<?= $monthly_json ?>, <?= $status_json ?>);
+        }
+        
+        // Init DataTable for Recent Records
+        if ($.fn.DataTable) {
+            $('#recentRecordsTable').DataTable({
+                "language": {
+                    "url": "https://cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+                },
+                "paging": false,
+                "searching": false,
+                "lengthChange": false,
+                "ordering": false,
+                "info": false
+            });
+        }
+    });
+</script>
+
+<?php require_once 'includes/footer.php'; ?>
@@ -0,0 +1,52 @@
+-- Table structure for meet_requests
+CREATE TABLE IF NOT EXISTS `meet_requests` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `topic` varchar(255) NOT NULL,
+  `meet_date` date NOT NULL,
+  `start_time` time NOT NULL,
+  `end_time` time NOT NULL,
+  `meet_link` varchar(255) NOT NULL,
+  `created_by` varchar(50) NOT NULL,
+  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Table structure for system_settings
+CREATE TABLE IF NOT EXISTS `system_settings` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `setting_name` varchar(100) NOT NULL,
+  `setting_value` text,
+  `updated_by` varchar(50) DEFAULT NULL,
+  `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `setting_name` (`setting_name`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Insert default settings
+INSERT IGNORE INTO `system_settings` (`setting_name`, `setting_value`) VALUES
+('google_client_id', ''),
+('google_client_secret', ''),
+('google_api_key', '');
+
+-- Table structure for system_logs
+CREATE TABLE IF NOT EXISTS `system_logs` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `user_id` varchar(50) NOT NULL,
+  `user_name` varchar(255) NOT NULL,
+  `action` varchar(100) NOT NULL,
+  `detail` text,
+  `ip_address` varchar(50) DEFAULT NULL,
+  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+
+-- Table structure for system_users (Role-Based Access Control)
+CREATE TABLE IF NOT EXISTS `system_users` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `cid` varchar(13) NOT NULL,
+  `role` enum('superadmin', 'admin') NOT NULL DEFAULT 'admin',
+  `created_by` varchar(13) DEFAULT NULL,
+  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (`id`),
+  UNIQUE KEY `cid` (`cid`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
@@ -0,0 +1,58 @@
+<?php
+// includes/footer.php
+$custom_footer = get_setting($pdo_sys, 'footer_text');
+$year_th = date('Y') + 543;
+
+if ($custom_footer) {
+    if (strpos($custom_footer, '{year}') !== false) {
+        $footer_text = str_replace('{year}', $year_th, $custom_footer);
+    } else {
+        $footer_text = 'สงวนลิขสิทธิ์ &copy; ' . $year_th . ' ' . htmlspecialchars($custom_footer);
+    }
+} else {
+    $footer_text = 'สงวนลิขสิทธิ์ &copy; ' . $year_th . ' MOPH System';
+}
+?>
+        <!-- App Footer -->
+        <footer class="app-footer d-flex align-items-center justify-content-center mt-auto" style="min-height: 73px; border-top: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.85rem; background-color: var(--bg-surface-hover);">
+            <?= $footer_text ?>
+        </footer>
+    </div> <!-- End Main Content -->
+</div> <!-- End Wrapper -->
+
+<!-- Command Palette -->
+<div id="commandPalette">
+    <div class="cmd-palette-box">
+        <div class="cmd-input-wrap">
+            <i class="bi bi-search"></i>
+            <input type="text" id="cmdInput" placeholder="Search commands..." autocomplete="off">
+        </div>
+        <div class="cmd-list">
+            <div class="cmd-item" onclick="window.location.href='dashboard.php'"><i class="bi bi-grid-1x2-fill"></i> Go to Dashboard</div>
+            <div class="cmd-item" onclick="window.location.href='requests.php'"><i class="bi bi-calendar-event"></i> ตารางห้องประชุม (Requests)</div>
+            <div class="cmd-item" onclick="window.location.href='logs.php'"><i class="bi bi-activity"></i> Activity Log</div>
+            <div class="cmd-item" onclick="window.location.href='settings.php'"><i class="bi bi-gear-fill"></i> Settings</div>
+            <div class="cmd-item text-danger" onclick="window.location.href='auth/logout.php'"><i class="bi bi-box-arrow-right"></i> Logout</div>
+        </div>
+    </div>
+</div>
+
+<!-- Toast Container -->
+<div id="toastContainer" class="toast-container p-3"></div>
+
+<!-- Bootstrap 5 JS Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<!-- SweetAlert2 -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<!-- Chart.js -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<!-- DataTables & jQuery -->
+<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
+
+<!-- App Scripts -->
+<script src="assets/js/app.js"></script>
+<script src="assets/js/dashboard.js"></script>
+</body>
+</html>
@@ -0,0 +1,84 @@
+<?php
+// includes/functions.php
+
+function add_log($pdo, $user_id, $user_name, $action, $detail = '') {
+    $ip_address = $_SERVER['REMOTE_ADDR'] ?? 'UNKNOWN';
+    
+    $sql = "INSERT INTO system_logs (user_id, user_name, action, detail, ip_address) 
+            VALUES (:user_id, :user_name, :action, :detail, :ip)";
+    
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute([
+            'user_id' => $user_id,
+            'user_name' => $user_name,
+            'action' => $action,
+            'detail' => $detail,
+            'ip' => $ip_address
+        ]);
+    } catch (PDOException $e) {
+        // Silently fail if log cannot be written, or handle appropriately
+        error_log("Failed to write log: " . $e->getMessage());
+    }
+}
+
+function check_login() {
+    if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
+        header("location: index.php");
+        exit;
+    }
+}
+
+function get_setting($pdo, $setting_name) {
+    $sql = "SELECT setting_value FROM system_settings WHERE setting_name = :name LIMIT 1";
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute(['name' => $setting_name]);
+        $row = $stmt->fetch();
+        return $row ? $row['setting_value'] : '';
+    } catch (PDOException $e) {
+        return '';
+    }
+}
+
+function save_setting($pdo, $setting_name, $setting_value, $updated_by) {
+    $sql = "INSERT INTO system_settings (setting_name, setting_value, updated_by) 
+            VALUES (:name, :value, :updated_by) 
+            ON DUPLICATE KEY UPDATE setting_value = :value2, updated_by = :updated_by2";
+    try {
+        $stmt = $pdo->prepare($sql);
+        $stmt->execute([
+            'name' => $setting_name,
+            'value' => $setting_value,
+            'updated_by' => $updated_by,
+            'value2' => $setting_value,
+            'updated_by2' => $updated_by
+        ]);
+        return true;
+    } catch (PDOException $e) {
+        return false;
+    }
+}
+
+function format_thai_date($date_str, $with_time = false) {
+    if (empty($date_str) || $date_str === '0000-00-00 00:00:00' || $date_str === '0000-00-00') return '-';
+    $timestamp = strtotime($date_str);
+    if (!$timestamp) return '-';
+    
+    $thai_months = [
+        1 => 'ม.ค.', 2 => 'ก.พ.', 3 => 'มี.ค.', 4 => 'เม.ย.', 5 => 'พ.ค.', 6 => 'มิ.ย.',
+        7 => 'ก.ค.', 8 => 'ส.ค.', 9 => 'ก.ย.', 10 => 'ต.ค.', 11 => 'พ.ย.', 12 => 'ธ.ค.'
+    ];
+    
+    $day = date('j', $timestamp);
+    $month = $thai_months[(int)date('n', $timestamp)];
+    $year = date('Y', $timestamp) + 543;
+    
+    if ($with_time) {
+        $time = date('H:i:s', $timestamp);
+        return "$day $month $year $time";
+    }
+    
+    return "$day $month $year";
+}
+?>
@@ -0,0 +1,40 @@
+<?php
+// includes/header.php
+session_start();
+require_once 'config/db.php';
+require_once 'includes/functions.php';
+
+check_login();
+?>
+<!DOCTYPE html>
+<html lang="th" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ระบบบริหารจัดการองค์กร | Enterprise Dashboard</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="assets/logo.png">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap 5.3 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    <!-- FontAwesome 5 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- DataTables CSS -->
+    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
+    
+    <!-- Custom Theme & App CSS -->
+    <link rel="stylesheet" href="assets/css/theme.css">
+    <link rel="stylesheet" href="assets/css/app.css">
+    
+</head>
+<body>
+<div class="wrapper">
+    <?php require_once 'includes/sidebar.php'; ?>
@@ -0,0 +1,148 @@
+<?php
+// includes/sidebar.php
+$current_page = basename($_SERVER['PHP_SELF']);
+?>
+    <!-- Sidebar -->
+    <nav class="sidebar" id="sidebar">
+        <div class="sidebar-header d-flex align-items-center">
+            <div class="sidebar-logo">
+                <img src="assets/logo.png" alt="Logo">
+            </div>
+            <?php $header_text = get_setting($pdo_sys, 'header_text') ?: 'MOPH System'; ?>
+            <h5 class="mb-0 fw-bold text-truncate" style="color: var(--text-main); max-width: 170px;" title="<?= htmlspecialchars($header_text) ?>"><?= htmlspecialchars($header_text) ?></h5>
+        </div>
+        <div class="sidebar-menu">
+            <ul>
+                <li class="px-3 mb-2 text-uppercase text-muted" style="font-size: 0.75rem; letter-spacing: 1px;">ระบบหลัก</li>
+                <li class="<?= ($current_page == 'dashboard.php') ? 'active' : '' ?>">
+                    <a href="dashboard.php">
+                        <i class="bi bi-grid-1x2-fill"></i>
+                        <span>Dashboard</span>
+                    </a>
+                </li>
+                <li class="<?= ($current_page == 'requests.php') ? 'active' : '' ?>">
+                    <a href="requests.php">
+                        <i class="bi bi-list-ul"></i>
+                        <span>ตารางห้องประชุม</span>
+                        <span class="badge bg-danger ms-auto rounded-pill" style="font-size: 0.7rem;">New</span>
+                    </a>
+                </li>
+                <li class="<?= ($current_page == 'calendar.php') ? 'active' : '' ?>">
+                    <a href="calendar.php">
+                        <i class="bi bi-calendar-event"></i>
+                        <span>ปฏิทิน</span>
+                    </a>
+                </li>
+                
+                <?php if (isset($_SESSION['role']) && in_array($_SESSION['role'], ['superadmin', 'admin'])): ?>
+                <li class="px-3 mt-4 mb-2 text-uppercase text-muted" style="font-size: 0.75rem; letter-spacing: 1px;">ผู้ดูแลระบบ</li>
+                
+                <?php if ($_SESSION['role'] === 'superadmin'): ?>
+                <li class="<?= ($current_page == 'users.php') ? 'active' : '' ?>">
+                    <a href="users.php">
+                        <i class="bi bi-people-fill"></i>
+                        <span>จัดการผู้ดูแลระบบ</span>
+                    </a>
+                </li>
+                <?php endif; ?>
+
+                <li class="<?= ($current_page == 'logs.php') ? 'active' : '' ?>">
+                    <a href="logs.php">
+                        <i class="bi bi-activity"></i>
+                        <span>Activity Log</span>
+                    </a>
+                </li>
+                <li class="<?= ($current_page == 'settings.php') ? 'active' : '' ?>">
+                    <a href="settings.php">
+                        <i class="bi bi-gear-fill"></i>
+                        <span>Settings</span>
+                    </a>
+                </li>
+                <?php endif; ?>
+                
+                <li class="mt-4 d-lg-none">
+                    <a href="auth/logout.php" class="text-danger">
+                        <i class="bi bi-box-arrow-left"></i>
+                        <span>ออกจากระบบ</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        
+        <!-- Sidebar User Info & Logout (Bottom) -->
+        <div class="sidebar-footer p-3 border-top" style="border-color: var(--border-color) !important; margin-top: auto;">
+            <div class="d-flex align-items-center">
+                <img src="avatar.php?cid=<?= urlencode($_SESSION['cid'] ?? '') ?>&name=<?= urlencode($_SESSION['fullname'] ?? 'User') ?>" alt="User" class="rounded-circle avatar-premium" width="40" height="40" style="object-fit: cover;">
+                <div class="ms-3 sidebar-user-info overflow-hidden">
+                    <h6 class="mb-0 text-truncate fw-bold" style="font-size: 0.85rem; color: var(--text-main);"><?= htmlspecialchars($_SESSION['fullname'] ?? 'User') ?></h6>
+                    <small class="text-muted text-uppercase" style="font-size: 0.7rem;"><?= htmlspecialchars($_SESSION['role'] ?? 'admin') ?></small>
+                </div>
+                <a href="auth/logout.php" class="sidebar-logout-btn btn btn-sm btn-light text-danger ms-auto rounded-circle d-flex align-items-center justify-content-center shadow-sm" title="Logout" style="width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border-color);">
+                    <i class="bi bi-power"></i>
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <!-- Topbar -->
+        <header class="topbar">
+            <div class="topbar-left">
+                <!-- Mobile Toggle -->
+                <button class="btn-icon-only d-lg-none" id="mobileSidebarToggle">
+                    <i class="bi bi-list fs-4"></i>
+                </button>
+                <!-- Desktop Toggle -->
+                <button class="btn-icon-only d-none d-lg-flex" id="sidebarToggle">
+                    <i class="bi bi-list fs-4"></i>
+                </button>
+                
+                <!-- Real-time Clock (Premium Design) -->
+                <div class="ms-3 d-none d-md-flex align-items-center px-3 py-1 rounded-pill" style="background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);">
+                    <div class="d-flex align-items-center justify-content-center rounded-circle me-2" style="width: 32px; height: 32px; background: var(--primary-light); color: var(--primary);">
+                        <i class="bi bi-clock-fill"></i>
+                    </div>
+                    <div class="d-flex flex-column justify-content-center">
+                        <span id="realtimeClock" class="fw-bold" style="font-size: 0.95rem; color: var(--text-main); line-height: 1.1; letter-spacing: 0.5px;">--:--:--</span>
+                        <span id="realtimeDate" class="text-muted" style="font-size: 0.7rem; line-height: 1;"></span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="topbar-right">
+                <?php
+                $is_api_connected = !empty(get_setting($pdo_sys, 'google_refresh_token'));
+                $api_status_color = $is_api_connected ? 'success' : 'danger';
+                $api_status_text = $is_api_connected ? 'API Online' : 'API Offline';
+                $api_status_icon = $is_api_connected ? 'bi-cloud-check-fill' : 'bi-cloud-slash-fill';
+                ?>
+                <!-- API Status -->
+                <div class="d-none d-md-flex align-items-center me-2 px-3 py-1 rounded-pill shadow-sm" style="background-color: var(--bg-surface); border: 1px solid var(--border-color); font-size: 0.8rem;">
+                    <i class="bi <?= $api_status_icon ?> text-<?= $api_status_color ?> me-2 fs-6"></i>
+                    <span class="text-muted fw-bold"><?= $api_status_text ?></span>
+                </div>
+                
+                <!-- Theme Switcher -->
+                <button class="btn-icon-only" id="themeToggle" aria-label="Toggle Theme">
+                    <i class="bi bi-moon-fill"></i>
+                </button>
+                
+                <!-- Notification -->
+                <div class="dropdown">
+                    <button class="btn-icon-only" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="notifButton">
+                        <i class="bi bi-bell"></i>
+                        <span id="notifBadge" class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle d-none" style="width: 10px; height: 10px;"></span>
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end shadow-sm" style="width: 320px; border-radius: 12px; border-color: var(--border-color);" id="notifDropdown">
+                        <li><h6 class="dropdown-header fw-bold text-primary">การประชุมวันนี้</h6></li>
+                        <li><hr class="dropdown-divider"></li>
+                        <div id="notifContent" style="max-height: 300px; overflow-y: auto;">
+                            <li><a class="dropdown-item text-center text-muted py-3" href="#"><div class="spinner-border spinner-border-sm text-primary" role="status"></div> กำลังโหลดข้อมูล...</a></li>
+                        </div>
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="dropdown-item text-center text-primary" href="calendar.php">ดูปฏิทินทั้งหมด</a></li>
+                    </ul>
+                </div>
+            </div>
+        </header>
@@ -0,0 +1,152 @@
+<?php
+// index.php
+session_start();
+if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
+    header("location: dashboard.php");
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html lang="th">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>เข้าสู่ระบบ | ระบบจองห้องประชุมออนไลน์</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="assets/logo.png">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    
+    <style>
+        body {
+            font-family: 'Prompt', sans-serif;
+            background-color: #f8f9fa;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .login-card {
+            border: none;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+        }
+        .login-header {
+            background: linear-gradient(135deg, #115c32, #1b8a4b); /* Changed to green theme for MOPH */
+            color: white;
+            padding: 2rem;
+            text-align: center;
+        }
+        .login-body {
+            padding: 2.5rem;
+        }
+        .btn-primary {
+            background-color: #1b8a4b;
+            border: none;
+            padding: 0.75rem;
+            font-weight: 500;
+        }
+        .btn-primary:hover {
+            background-color: #115c32;
+        }
+        
+        /* Shiny Logo Effect */
+        .shiny-logo {
+            position: relative;
+            overflow: hidden;
+            border-radius: 50%;
+            display: inline-block;
+            width: 100px;
+            height: 100px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            margin-bottom: 1rem;
+            background-color: white;
+        }
+        
+        .shiny-logo img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        .shiny-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.6) 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%; }
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-5 col-lg-4">
+            <div class="card login-card">
+                <div class="login-header">
+                    <div class="shiny-logo">
+                        <img src="assets/logo.png" alt="Logo">
+                    </div>
+                    <h4>ระบบขอใช้งานประชุมออนไลน์ผ่าน Google Meet</h4>
+                    <p class="mb-0 text-white-50">เข้าสู่ระบบด้วยบัญชีผู้ใช้</p>
+                </div>
+                <div class="login-body">
+                    <?php if (isset($_SESSION['login_error'])): ?>
+                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
+                            <?= htmlspecialchars($_SESSION['login_error']) ?>
+                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                        </div>
+                        <?php unset($_SESSION['login_error']); ?>
+                    <?php endif; ?>
+
+                    <form action="auth/login.php" method="POST">
+                        <div class="mb-3">
+                            <label for="username" class="form-label">ชื่อผู้ใช้งาน (Username)</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
+                                <input type="text" class="form-control" id="username" name="username" required autofocus>
+                            </div>
+                        </div>
+                        <div class="mb-4">
+                            <label for="password" class="form-label">รหัสผ่าน (Password)</label>
+                            <div class="input-group">
+                                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                                <input type="password" class="form-control" id="password" name="password" required>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100 rounded-pill">เข้าสู่ระบบ</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
@@ -0,0 +1,83 @@
+<?php
+require_once 'includes/header.php';
+
+// Check date filter
+$start_date = $_GET['start_date'] ?? date('Y-m-d', strtotime('-30 days'));
+$end_date = $_GET['end_date'] ?? date('Y-m-d');
+?>
+
+<div class="page-content">
+    <div class="page-header d-flex justify-content-between align-items-center">
+        <div>
+            <h2 class="page-title">Activity Log</h2>
+            <p class="page-subtitle">ประวัติการใช้งานระบบทั้งหมด</p>
+        </div>
+        <div>
+            <form method="GET" class="d-flex gap-2">
+                <input type="date" name="start_date" class="form-control" value="<?= htmlspecialchars($start_date) ?>" required>
+                <span class="align-self-center text-muted">ถึง</span>
+                <input type="date" name="end_date" class="form-control" value="<?= htmlspecialchars($end_date) ?>" required>
+                <button type="submit" class="btn btn-primary"><i class="bi bi-filter"></i> กรอง</button>
+            </form>
+        </div>
+    </div>
+
+    <div class="card-premium">
+        <div class="card-body p-4">
+            <div class="table-responsive">
+                <table id="logsTable" class="table table-hover align-middle mb-0 w-100">
+                    <thead class="table-light">
+                        <tr>
+                            <th class="ps-3">วันเวลา</th>
+                            <th>ผู้ใช้งาน (CID / ชื่อ)</th>
+                            <th>การกระทำ (Action)</th>
+                            <th>รายละเอียด (Detail)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php
+                        try {
+                            $stmt = $pdo_sys->prepare("SELECT * FROM system_logs WHERE DATE(created_at) BETWEEN :start AND :end ORDER BY id DESC LIMIT 2000");
+                            $stmt->execute(['start' => $start_date, 'end' => $end_date]);
+                            while ($row = $stmt->fetch()) {
+                                $actionColor = 'text-primary bg-primary-subtle';
+                                if(strpos($row['action'], 'Failed') !== false || strpos($row['action'], 'Delete') !== false) {
+                                    $actionColor = 'text-danger bg-danger-subtle';
+                                } else if(strpos($row['action'], 'Success') !== false || strpos($row['action'], 'Create') !== false) {
+                                    $actionColor = 'text-success bg-success-subtle';
+                                } else if(strpos($row['action'], 'Update') !== false) {
+                                    $actionColor = 'text-warning bg-warning-subtle';
+                                }
+
+                                echo "<tr>";
+                                echo "<td data-order='" . $row['created_at'] . "' class='text-center small text-muted'>" . format_thai_date($row['created_at'], true) . "</td>";
+                                echo "<td class='text-center'><div class='fw-medium text-dark'>" . htmlspecialchars($row['user_name'] ?? 'Unknown') . "</div><div class='small text-muted'>" . htmlspecialchars($row['user_id'] ?? '') . "</div></td>";
+                                echo "<td class='text-center'><span class='badge-soft $actionColor px-2 py-1 rounded'>" . htmlspecialchars($row['action']) . "</span></td>";
+                                echo "<td class='text-muted'>" . htmlspecialchars($row['detail']) . "</td>";
+                                echo "</tr>";
+                            }
+                        } catch (PDOException $e) {
+                            echo "<tr><td colspan='4' class='text-danger'>Error: " . $e->getMessage() . "</td></tr>";
+                        }
+                        ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script>
+$(document).ready(function() {
+    $('#logsTable').DataTable({
+        "language": {
+            "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+        },
+        "order": [[0, "desc"]],
+        "pageLength": 10,
+        "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>>',
+    });
+});
+</script>
@@ -0,0 +1,272 @@
+<?php
+require_once 'includes/header.php';
+
+$msg = $_GET['msg'] ?? '';
+?>
+
+<div class="page-content">
+    <div class="page-header">
+        <div>
+            <h2 class="page-title">ตารางห้องประชุม (Requests)</h2>
+            <p class="page-subtitle">จัดการรายการขอใช้งานและสร้างลิงก์ Google Meet</p>
+        </div>
+        <div>
+            <button class="btn btn-primary rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addModal">
+                <i class="bi bi-plus-lg me-1"></i> สร้างรายการใหม่
+            </button>
+        </div>
+    </div>
+
+    <?php if ($msg == 'success'): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('ดำเนินการสำเร็จ', 'success');
+            });
+        </script>
+    <?php endif; ?>
+
+    <div class="card-premium">
+        <div class="card-body p-4">
+            <div class="table-responsive">
+                <table id="requestsTable" class="table table-hover align-middle mb-0 w-100">
+                    <thead class="table-light">
+                        <tr>
+                            <th class="text-center text-nowrap ps-3">วัน-เวลาที่ขอ</th>
+                            <th>ชื่อเรื่อง</th>
+                            <th class="text-center text-nowrap">วัน-เวลาที่จอง</th>
+                            <th class="text-center text-nowrap">ผู้ขอ</th>
+                            <th class="text-center text-nowrap">Link/QR Code</th>
+                            <th class="text-center text-nowrap pe-3">จัดการ</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php
+                        try {
+                            $stmt = $pdo_sys->query("SELECT * FROM meet_requests ORDER BY id DESC");
+                            while ($row = $stmt->fetch()) {
+                                echo "<tr>";
+                                echo "<td class='text-center text-nowrap ps-3 small text-muted' data-order='" . $row['created_at'] . "'>" . format_thai_date($row['created_at'], true) . "</td>";
+                                echo "<td class='fw-medium text-dark'>" . htmlspecialchars($row['topic']) . "</td>";
+                                
+                                $time_str_booking = date('H:i', strtotime($row['start_time'])) . " - " . date('H:i', strtotime($row['end_time']));
+                                echo "<td class='text-center text-nowrap' data-order='" . $row['meet_date'] . "'>
+                                    <span class='fw-medium'>" . format_thai_date($row['meet_date']) . "</span>
+                                    <span class='badge bg-light text-secondary border ms-2 fw-normal px-2 py-1 rounded-pill' style='font-size: 0.75rem;'><i class='bi bi-clock me-1'></i>" . $time_str_booking . "</span>
+                                </td>";
+                                
+                                echo "<td class='text-center text-nowrap'>" . htmlspecialchars($row['created_by']) . "</td>";
+                                
+                                echo "<td class='text-center text-nowrap'>";
+                                if (!empty($row['meet_link'])) {
+                                    $link = htmlspecialchars($row['meet_link']);
+                                    
+                                    // Generate full text for copying
+                                    $thai_months_full = [
+                                        1 => 'มกราคม', 2 => 'กุมภาพันธ์', 3 => 'มีนาคม', 4 => 'เมษายน', 5 => 'พฤษภาคม', 6 => 'มิถุนายน',
+                                        7 => 'กรกฎาคม', 8 => 'สิงหาคม', 9 => 'กันยายน', 10 => 'ตุลาคม', 11 => 'พฤศจิกายน', 12 => 'ธันวาคม'
+                                    ];
+                                    $ts = strtotime($row['meet_date']);
+                                    $full_date = date('j', $ts) . ' ' . $thai_months_full[(int)date('n', $ts)] . ' ' . (date('Y', $ts) + 543);
+                                    $time_str = date('H:i', strtotime($row['start_time'])) . ' – ' . date('H:i', strtotime($row['end_time']));
+                                    
+                                    $copy_text = "เรื่อง : " . $row['topic'] . "\nวันที่ : " . $full_date . "\nเวลา : " . $time_str . "\nลิงค์ประชุม : " . $row['meet_link'];
+                                    
+                                    echo "<div class='d-flex gap-2 justify-content-center'>";
+                                    echo "<button class='btn btn-sm btn-light btn-icon-only' style='width: 32px; height: 32px;' onclick='showQR(this)' data-link='$link' data-copy-text='".htmlspecialchars($copy_text, ENT_QUOTES)."' title='แสดง QR Code'><i class='bi bi-qr-code'></i></button>";
+                                    echo "<button class='btn btn-sm btn-light btn-icon-only' style='width: 32px; height: 32px;' onclick='copyMeetDetails(this)' data-copy-text='".htmlspecialchars($copy_text, ENT_QUOTES)."' title='คัดลอกลิงก์'><i class='bi bi-clipboard'></i></button>";
+                                    echo "</div>";
+                                } else {
+                                    echo "<span class='text-muted small'>ไม่มีลิงก์</span>";
+                                }
+                                echo "</td>";
+                                
+                                echo "<td class='text-center text-nowrap pe-3'>";
+                                $is_owner = ($row['created_by'] === ($_SESSION['fullname'] ?? ''));
+                                $can_manage = (($_SESSION['role'] ?? '') === 'superadmin' || $is_owner);
+                                
+                                if ($can_manage) {
+                                    echo "<div class='d-flex gap-2 justify-content-center'>";
+                                    echo "<button class='btn btn-sm btn-light text-primary btn-icon-only' style='width: 32px; height: 32px;' onclick='openEditModal(" . $row['id'] . ", \"" . htmlspecialchars($row['topic'], ENT_QUOTES) . "\", \"" . $row['meet_date'] . "\", \"" . date('H:i', strtotime($row['start_time'])) . "\", \"" . date('H:i', strtotime($row['end_time'])) . "\")' title='แก้ไข'><i class='bi bi-pencil fs-6'></i></button>";
+                                    echo "<a href='requests_action.php?action=delete&id=" . $row['id'] . "' class='btn btn-sm btn-light text-danger btn-icon-only' style='width: 32px; height: 32px;' onclick='return confirm(\"ยืนยันการลบรายการนี้?\")' title='ลบ'><i class='bi bi-trash fs-6'></i></a>";
+                                    echo "</div>";
+                                } else {
+                                    echo "<span class='text-muted small'>-</span>";
+                                }
+                                echo "</td>";
+                                echo "</tr>";
+                            }
+                        } catch (PDOException $e) {
+                            echo "<tr><td colspan='7' class='text-danger'>Error: " . $e->getMessage() . "</td></tr>";
+                        }
+                        ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Add -->
+<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
+      <div class="modal-header border-0 pb-0 pt-4 px-4">
+        <h5 class="modal-title fw-bold" id="addModalLabel">สร้างรายการขอประชุมใหม่</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form action="requests_action.php" method="POST">
+          <input type="hidden" name="action" value="create">
+          <div class="modal-body p-4">
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">หัวข้อการประชุม</label>
+                <input type="text" name="topic" class="form-control form-control-lg bg-light border-0" required placeholder="ระบุเรื่องที่ต้องการประชุม">
+            </div>
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">วันที่ขอใช้งาน</label>
+                <input type="date" name="meet_date" class="form-control bg-light border-0" required>
+            </div>
+            <div class="row">
+                <div class="col-6 mb-3">
+                    <label class="form-label fw-medium text-muted small text-uppercase">ตั้งแต่เวลา</label>
+                    <input type="time" name="start_time" class="form-control bg-light border-0" required>
+                </div>
+                <div class="col-6 mb-3">
+                    <label class="form-label fw-medium text-muted small text-uppercase">ถึงเวลา</label>
+                    <input type="time" name="end_time" class="form-control bg-light border-0" required>
+                </div>
+            </div>
+          </div>
+          <div class="modal-footer border-0 pt-0 pb-4 px-4">
+            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
+            <button type="submit" class="btn btn-primary rounded-pill px-4">สร้างและรับลิงก์</button>
+          </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Modal Edit -->
+<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
+      <div class="modal-header border-0 pb-0 pt-4 px-4">
+        <h5 class="modal-title fw-bold" id="editModalLabel">แก้ไขรายการขอประชุม</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form action="requests_action.php" method="POST">
+          <input type="hidden" name="action" value="edit">
+          <input type="hidden" name="id" id="edit_id" value="">
+          <div class="modal-body p-4">
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">หัวข้อการประชุม</label>
+                <input type="text" name="topic" id="edit_topic" class="form-control form-control-lg bg-light border-0" required placeholder="ระบุเรื่องที่ต้องการประชุม">
+            </div>
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">วันที่ขอใช้งาน</label>
+                <input type="date" name="meet_date" id="edit_date" class="form-control bg-light border-0" required>
+            </div>
+            <div class="row">
+                <div class="col-6 mb-3">
+                    <label class="form-label fw-medium text-muted small text-uppercase">ตั้งแต่เวลา</label>
+                    <input type="time" name="start_time" id="edit_start_time" class="form-control bg-light border-0" required>
+                </div>
+                <div class="col-6 mb-3">
+                    <label class="form-label fw-medium text-muted small text-uppercase">ถึงเวลา</label>
+                    <input type="time" name="end_time" id="edit_end_time" class="form-control bg-light border-0" required>
+                </div>
+            </div>
+          </div>
+          <div class="modal-footer border-0 pt-0 pb-4 px-4">
+            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
+            <button type="submit" class="btn btn-primary rounded-pill px-4">บันทึกการแก้ไข</button>
+          </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- QR Code Library -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+<script>
+$(document).ready(function() {
+    $('#requestsTable').DataTable({
+        "language": {
+            "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+        },
+        "order": [[0, "desc"]],
+        "pageLength": 10,
+        "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
+    });
+});
+
+function copyLink(link) {
+    navigator.clipboard.writeText(link).then(() => {
+        window.showToast('คัดลอกลิงก์สำเร็จ!', 'success');
+    });
+}
+
+function openEditModal(id, topic, date, startTime, endTime) {
+    document.getElementById('edit_id').value = id;
+    document.getElementById('edit_topic').value = topic;
+    document.getElementById('edit_date').value = date;
+    document.getElementById('edit_start_time').value = startTime;
+    document.getElementById('edit_end_time').value = endTime;
+    
+    var editModal = new bootstrap.Modal(document.getElementById('editModal'));
+    editModal.show();
+}
+
+function copyMeetDetails(btn) {
+    const textToCopy = btn.getAttribute('data-copy-text');
+    navigator.clipboard.writeText(textToCopy).then(() => {
+        window.showToast('คัดลอกข้อมูลการประชุมสำเร็จ!', 'success');
+    });
+}
+
+function showQR(btn) {
+    const link = btn.getAttribute('data-link');
+    const copyText = btn.getAttribute('data-copy-text');
+    
+    // Encode the copy text properly for the template literal
+    const encodedCopyText = copyText.replace(/'/g, "\\'").replace(/\n/g, "\\n");
+    
+    Swal.fire({
+        title: 'QR Code สำหรับเข้าร่วม',
+        html: `
+            <div id="qrcode" class="d-flex justify-content-center mt-3 mb-4"></div>
+            <div class="input-group">
+                <input type="text" class="form-control text-muted" value="${link}" readonly>
+                <button class="btn btn-primary px-3" onclick="navigator.clipboard.writeText('${encodedCopyText}').then(()=>{window.showToast('คัดลอกข้อมูลสำเร็จ!', 'success')})" title="คัดลอกลิงก์"><i class="bi bi-clipboard"></i> คัดลอก</button>
+            </div>
+            <p class="mt-3 mb-0 small text-muted">แสกน QR Code หรือกดคัดลอกลิงก์เพื่อเข้าร่วมประชุม</p>
+        `,
+        showCloseButton: true,
+        showConfirmButton: false,
+        didOpen: () => {
+            new QRCode(document.getElementById("qrcode"), {
+                text: link,
+                width: 200,
+                height: 200,
+                colorDark : "#0F172A",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+            });
+        }
+    });
+}
+</script>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script>
+$(document).ready(function() {
+    $('#requestsTable').DataTable({
+        "language": {
+            "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+        },
+        "order": [[0, "desc"]],
+        "pageLength": 10,
+        "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>>',
+    });
+});
+</script>
@@ -0,0 +1,235 @@
+<?php
+session_start();
+require_once 'config/db.php';
+require_once 'includes/functions.php';
+
+check_login();
+
+$action = $_REQUEST['action'] ?? '';
+
+if ($action === 'create' && $_SERVER['REQUEST_METHOD'] === 'POST') {
+    $topic = trim($_POST['topic']);
+    $meet_date = $_POST['meet_date'];
+    $start_time = $_POST['start_time'];
+    $end_time = $_POST['end_time'];
+    
+    // Google Calendar API Integration
+    $meet_link = "";
+    $google_event_id = null;
+    
+    $refresh_token = get_setting($pdo_sys, 'google_refresh_token');
+    $client_id = get_setting($pdo_sys, 'google_client_id');
+    $client_secret = get_setting($pdo_sys, 'google_client_secret');
+    
+    if (!empty($refresh_token) && !empty($client_id) && !empty($client_secret) && file_exists('vendor/autoload.php')) {
+        require_once 'vendor/autoload.php';
+        
+        try {
+            $client = new Google\Client();
+            $client->setClientId($client_id);
+            $client->setClientSecret($client_secret);
+            $client->refreshToken($refresh_token);
+            
+            $service = new Google\Service\Calendar($client);
+            
+            // Prepare DateTime RFC3339
+            $startDateTime = date('c', strtotime("$meet_date $start_time"));
+            $endDateTime = date('c', strtotime("$meet_date $end_time"));
+            
+            $event = new Google\Service\Calendar\Event(array(
+              'summary' => $topic,
+              'description' => 'จองห้องประชุมออนไลน์ผ่านระบบ',
+              'start' => array(
+                'dateTime' => $startDateTime,
+                'timeZone' => 'Asia/Bangkok',
+              ),
+              'end' => array(
+                'dateTime' => $endDateTime,
+                'timeZone' => 'Asia/Bangkok',
+              ),
+              'conferenceData' => array(
+                'createRequest' => array(
+                  'requestId' => uniqid(),
+                  'conferenceSolutionKey' => array(
+                    'type' => 'hangoutsMeet'
+                  )
+                )
+              )
+            ));
+
+            $calendarId = 'primary';
+            $optParams = array('conferenceDataVersion' => 1);
+            
+            $createdEvent = $service->events->insert($calendarId, $event, $optParams);
+            $google_event_id = $createdEvent->getId();
+            
+            if ($createdEvent->getConferenceData()) {
+                $entryPoints = $createdEvent->getConferenceData()->getEntryPoints();
+                foreach ($entryPoints as $entryPoint) {
+                    if ($entryPoint->getEntryPointType() === 'video') {
+                        $meet_link = $entryPoint->getUri();
+                        break;
+                    }
+                }
+            }
+        } catch (Exception $e) {
+            // Log error but we might still insert empty link or fallback
+            error_log("Google API Error: " . $e->getMessage());
+        }
+    }
+    
+    // Fallback if API fails or not connected
+    if (empty($meet_link)) {
+        function generateRandomString($length = 3) {
+            return substr(str_shuffle(str_repeat($x='abcdefghijklmnopqrstuvwxyz', ceil($length/strlen($x)) )),1,$length);
+        }
+        $meet_link = "https://meet.google.com/" . generateRandomString(3) . "-" . generateRandomString(4) . "-" . generateRandomString(3) . " (Mock)";
+    }
+
+    $sql = "INSERT INTO meet_requests (topic, meet_date, start_time, end_time, meet_link, google_event_id, created_by) 
+            VALUES (:topic, :meet_date, :start_time, :end_time, :link, :event_id, :created_by)";
+    
+    try {
+        $stmt = $pdo_sys->prepare($sql);
+        $stmt->execute([
+            'topic' => $topic,
+            'meet_date' => $meet_date,
+            'start_time' => $start_time,
+            'end_time' => $end_time,
+            'link' => $meet_link,
+            'event_id' => $google_event_id,
+            'created_by' => $_SESSION['fullname']
+        ]);
+
+        add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Create Request', "Created meet request: $topic");
+
+        header("location: requests.php?msg=success");
+        exit;
+    } catch (PDOException $e) {
+        die("Error: " . $e->getMessage());
+    }
+} elseif ($action === 'edit' && $_SERVER['REQUEST_METHOD'] === 'POST') {
+    $id = $_POST['id'] ?? 0;
+    $topic = trim($_POST['topic']);
+    $meet_date = $_POST['meet_date'];
+    $start_time = $_POST['start_time'];
+    $end_time = $_POST['end_time'];
+    
+    if ($id) {
+        try {
+            // Check for Google Event ID and permissions
+            $stmt_old = $pdo_sys->prepare("SELECT google_event_id, created_by FROM meet_requests WHERE id = :id");
+            $stmt_old->execute(['id' => $id]);
+            $old_req = $stmt_old->fetch();
+            
+            if (!$old_req || ($_SESSION['role'] !== 'superadmin' && $old_req['created_by'] !== $_SESSION['fullname'])) {
+                die("คุณไม่มีสิทธิ์แก้ไขรายการนี้");
+            }
+            
+            if (!empty($old_req['google_event_id'])) {
+                $refresh_token = get_setting($pdo_sys, 'google_refresh_token');
+                $client_id = get_setting($pdo_sys, 'google_client_id');
+                $client_secret = get_setting($pdo_sys, 'google_client_secret');
+                if (!empty($refresh_token) && file_exists('vendor/autoload.php')) {
+                    require_once 'vendor/autoload.php';
+                    try {
+                        $client = new Google\Client();
+                        $client->setClientId($client_id);
+                        $client->setClientSecret($client_secret);
+                        $client->refreshToken($refresh_token);
+                        $service = new Google\Service\Calendar($client);
+                        
+                        $event = $service->events->get('primary', $old_req['google_event_id']);
+                        $event->setSummary($topic);
+                        
+                        $startDateTime = date('c', strtotime("$meet_date $start_time"));
+                        $endDateTime = date('c', strtotime("$meet_date $end_time"));
+                        
+                        $start = new Google\Service\Calendar\EventDateTime();
+                        $start->setDateTime($startDateTime);
+                        $start->setTimeZone('Asia/Bangkok');
+                        $event->setStart($start);
+                        
+                        $end = new Google\Service\Calendar\EventDateTime();
+                        $end->setDateTime($endDateTime);
+                        $end->setTimeZone('Asia/Bangkok');
+                        $event->setEnd($end);
+                        
+                        $optParams = array('conferenceDataVersion' => 1);
+                        $service->events->update('primary', $old_req['google_event_id'], $event, $optParams);
+                    } catch (Exception $e) {
+                        error_log("Google API Update Error: " . $e->getMessage());
+                    }
+                }
+            }
+
+            $sql = "UPDATE meet_requests SET topic = :topic, meet_date = :meet_date, start_time = :start_time, end_time = :end_time WHERE id = :id";
+            $stmt = $pdo_sys->prepare($sql);
+            $stmt->execute([
+                'topic' => $topic,
+                'meet_date' => $meet_date,
+                'start_time' => $start_time,
+                'end_time' => $end_time,
+                'id' => $id
+            ]);
+            
+            add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Edit Request', "Edited meet request ID: $id ($topic)");
+            
+            header("location: requests.php?msg=success");
+            exit;
+        } catch (PDOException $e) {
+            die("Error: " . $e->getMessage());
+        }
+    }
+} elseif ($action === 'delete') {
+    $id = $_GET['id'] ?? 0;
+    
+    if ($id) {
+        try {
+            // Get info for log, Google Event ID, and check permissions
+            $stmt = $pdo_sys->prepare("SELECT topic, google_event_id, created_by FROM meet_requests WHERE id = :id");
+            $stmt->execute(['id' => $id]);
+            $row = $stmt->fetch();
+            
+            if (!$row || ($_SESSION['role'] !== 'superadmin' && $row['created_by'] !== $_SESSION['fullname'])) {
+                die("คุณไม่มีสิทธิ์ลบรายการนี้");
+            }
+            
+            $topic = $row['topic'];
+            
+            if (!empty($row['google_event_id'])) {
+                    $refresh_token = get_setting($pdo_sys, 'google_refresh_token');
+                    $client_id = get_setting($pdo_sys, 'google_client_id');
+                    $client_secret = get_setting($pdo_sys, 'google_client_secret');
+                    if (!empty($refresh_token) && file_exists('vendor/autoload.php')) {
+                        require_once 'vendor/autoload.php';
+                        try {
+                            $client = new Google\Client();
+                            $client->setClientId($client_id);
+                            $client->setClientSecret($client_secret);
+                            $client->refreshToken($refresh_token);
+                            $service = new Google\Service\Calendar($client);
+                            
+                            $service->events->delete('primary', $row['google_event_id']);
+                        } catch (Exception $e) {
+                            error_log("Google API Delete Error: " . $e->getMessage());
+                        }
+                }
+            }
+
+            $delStmt = $pdo_sys->prepare("DELETE FROM meet_requests WHERE id = :id");
+            $delStmt->execute(['id' => $id]);
+
+            add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Delete Request', "Deleted meet request ID: $id ($topic)");
+
+            header("location: requests.php?msg=success");
+            exit;
+        } catch (PDOException $e) {
+            die("Error: " . $e->getMessage());
+        }
+    }
+}
+
+header("location: requests.php");
+exit;
+?>
@@ -0,0 +1,242 @@
+<?php
+require_once 'includes/header.php';
+
+$msg = '';
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $action = $_POST['action'] ?? '';
+    
+    if ($action == 'api_config') {
+        $client_id = $_POST['google_client_id'] ?? '';
+        $client_secret = $_POST['google_client_secret'] ?? '';
+    
+        save_setting($pdo_sys, 'google_client_id', $client_id, $_SESSION['fullname']);
+        save_setting($pdo_sys, 'google_client_secret', $client_secret, $_SESSION['fullname']);
+    
+        add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Update Settings', 'Updated Google API settings');
+        $msg = 'success';
+    } else if ($action == 'ui_config') {
+        $header_text = $_POST['header_text'] ?? '';
+        $footer_text = $_POST['footer_text'] ?? '';
+        
+        save_setting($pdo_sys, 'header_text', $header_text, $_SESSION['fullname']);
+        save_setting($pdo_sys, 'footer_text', $footer_text, $_SESSION['fullname']);
+        
+        add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Update Settings', 'Updated UI settings');
+        $msg = 'success';
+    }
+}
+
+$current_client_id = get_setting($pdo_sys, 'google_client_id');
+$current_client_secret = get_setting($pdo_sys, 'google_client_secret');
+$current_api_key = get_setting($pdo_sys, 'google_api_key');
+
+$current_header_text = get_setting($pdo_sys, 'header_text') ?: 'MOPH System';
+$current_footer_text = get_setting($pdo_sys, 'footer_text') ?: 'สงวนลิขสิทธิ์ &copy; ' . (date('Y') + 543) . ' MOPH System';
+?>
+
+<div class="page-content">
+    <div class="page-header">
+        <div>
+            <h2 class="page-title">การตั้งค่าระบบ (Settings)</h2>
+            <p class="page-subtitle">ตั้งค่าการเชื่อมต่อ API และระบบพื้นฐาน</p>
+        </div>
+    </div>
+
+    <?php if ($msg == 'success'): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('บันทึกการตั้งค่าเรียบร้อยแล้ว', 'success');
+            });
+        </script>
+    <?php endif; ?>
+    
+    <?php if (isset($_SESSION['settings_msg'])): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('<?= addslashes($_SESSION['settings_msg']) ?>', 'success');
+            });
+        </script>
+        <?php unset($_SESSION['settings_msg']); ?>
+    <?php endif; ?>
+    
+    <?php if (isset($_SESSION['settings_error'])): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('<?= addslashes($_SESSION['settings_error']) ?>', 'danger');
+            });
+        </script>
+        <?php unset($_SESSION['settings_error']); ?>
+    <?php endif; ?>
+
+    <div class="row g-4">
+        <!-- Google API Configuration -->
+        <div class="col-lg-6">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
+                    <h5 class="fw-bold mb-0"><i class="bi bi-google text-primary me-2"></i>Google API Configuration</h5>
+                    <p class="text-muted small mt-2">สำหรับการสร้างลิงก์ Google Meet อัตโนมัติ</p>
+                </div>
+                <div class="card-body p-4 pt-2">
+                    <form action="" method="POST">
+                        <input type="hidden" name="action" value="api_config">
+                        <div class="mb-4">
+                            <label class="form-label fw-medium text-muted small text-uppercase">Client ID</label>
+                            <input type="text" name="google_client_id" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_client_id) ?>" placeholder="Enter Google Client ID">
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label class="form-label fw-medium text-muted small text-uppercase">Client Secret</label>
+                            <input type="password" name="google_client_secret" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_client_secret) ?>" placeholder="Enter Google Client Secret">
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label class="form-label fw-medium text-muted small text-uppercase">สถานะการเชื่อมต่อ (Connection Status)</label>
+                            <div class="d-flex align-items-center mt-2">
+                                <?php 
+                                $refresh_token = get_setting($pdo_sys, 'google_refresh_token');
+                                if (!empty($refresh_token)): 
+                                ?>
+                                    <div class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2 rounded-pill me-3 d-flex align-items-center">
+                                        <i class="bi bi-check-circle-fill me-2"></i>เชื่อมต่อสำเร็จแล้ว
+                                    </div>
+                                    <a href="auth/google_auth.php" class="btn btn-sm btn-outline-secondary rounded-pill px-3">เชื่อมต่อบัญชีใหม่</a>
+                                <?php else: ?>
+                                    <div class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-3 py-2 rounded-pill me-3 d-flex align-items-center">
+                                        <i class="bi bi-x-circle-fill me-2"></i>ยังไม่ได้เชื่อมต่อ
+                                    </div>
+                                    <a href="auth/google_auth.php" class="btn btn-sm btn-primary rounded-pill px-3">
+                                        <i class="bi bi-google me-2"></i>เชื่อมต่อบัญชี Google
+                                    </a>
+                                <?php endif; ?>
+                            </div>
+                        </div>
+                        
+                        <hr class="my-4 border-color">
+                        
+                        <div class="d-flex justify-content-end gap-2">
+                            <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">บันทึก Google API</button>
+                        </div>
+                    </form>
+                    
+                    <div class="mt-5">
+                        <h6 class="fw-bold text-muted mb-3"><i class="bi bi-info-circle me-1"></i> ขั้นตอนการขอใช้งาน Google API</h6>
+                        <div class="accordion" id="apiHelpAccordion">
+                          <div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
+                            <h2 class="accordion-header">
+                              <button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" style="box-shadow: none;">
+                                1. สร้าง Project ใน Google Cloud Console
+                              </button>
+                            </h2>
+                            <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
+                              <div class="accordion-body small text-muted">
+                                <ul>
+                                    <li>ไปที่ <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a> และเข้าสู่ระบบด้วยบัญชี Google ของคุณ</li>
+                                    <li>ที่แถบเมนูด้านบนซ้าย (ถัดจากโลโก้ Google Cloud) ให้คลิก <strong>Select a project</strong></li>
+                                    <li>คลิกปุ่ม <strong>New Project</strong> ที่มุมขวาบนของหน้าต่างที่แสดงขึ้นมา</li>
+                                    <li>ตั้งชื่อโปรเจกต์ของคุณ (เช่น "Meet Booking System") ในช่อง <strong>Project name</strong></li>
+                                    <li>คลิก <strong>Create</strong> และรอระบบสร้างโปรเจกต์สักครู่ เมื่อเสร็จแล้วให้เลือกโปรเจกต์ที่คุณเพิ่งสร้างขึ้นมาเพื่อเข้าไปตั้งค่า</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
+                            <h2 class="accordion-header">
+                              <button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" style="box-shadow: none;">
+                                2. เปิดใช้งาน Google Calendar API
+                              </button>
+                            </h2>
+                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
+                              <div class="accordion-body small text-muted">
+                                <ul>
+                                    <li>จากเมนูด้านซ้าย (☰) ไปที่ <strong>APIs & Services</strong> > <strong>Library</strong></li>
+                                    <li>ในช่องค้นหา พิมพ์คำว่า <strong>Google Calendar API</strong> แล้วกด Enter</li>
+                                    <li>คลิกที่ <strong>Google Calendar API</strong> จากรายการผลลัพธ์</li>
+                                    <li>คลิกปุ่ม <strong>Enable</strong> สีฟ้าเพื่อเปิดใช้งาน API สำหรับโปรเจกต์นี้ (เพื่อใช้สำหรับสร้าง Google Meet link อัตโนมัติในปฏิทิน)</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
+                            <h2 class="accordion-header">
+                              <button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" style="box-shadow: none;">
+                                3. ตั้งค่า OAuth Consent Screen (หน้าจอยินยอม)
+                              </button>
+                            </h2>
+                            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
+                              <div class="accordion-body small text-muted">
+                                <ul>
+                                    <li>จากเมนูด้านซ้าย ไปที่ <strong>APIs & Services</strong> > <strong>OAuth consent screen</strong></li>
+                                    <li>เลือก <strong>External</strong> (หรือ Internal หากคุณใช้ Google Workspace) แล้วคลิก <strong>Create</strong></li>
+                                    <li>กรอกข้อมูลที่จำเป็น: <strong>App name</strong> (เช่นระบบจองห้องประชุม), <strong>User support email</strong>, และ <strong>Developer contact information</strong> แล้วคลิก <strong>Save and Continue</strong></li>
+                                    <li>หน้า Scopes สามารถกด <strong>Save and Continue</strong> ข้ามไปได้เลย</li>
+                                    <li>หน้า Test users: หากสถานะแอปของคุณเป็น "Testing" คุณจะต้องเพิ่มอีเมลที่คุณจะใช้ล็อกอินระบบจองห้องประชุมลงไปในช่อง <strong>Add Users</strong> เพื่อให้ทดสอบใช้งานได้ แล้วคลิก <strong>Save and Continue</strong></li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="accordion-item" style="border-color: var(--border-color); background: transparent;">
+                            <h2 class="accordion-header">
+                              <button class="accordion-button collapsed bg-light text-dark fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" style="box-shadow: none;">
+                                4. สร้าง Credentials (รับ Client ID & Secret)
+                              </button>
+                            </h2>
+                            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#apiHelpAccordion">
+                              <div class="accordion-body small text-muted">
+                                <ul>
+                                    <li>จากเมนูด้านซ้าย ไปที่ <strong>APIs & Services</strong> > <strong>Credentials</strong></li>
+                                    <li>คลิก <strong>+ CREATE CREDENTIALS</strong> ด้านบน และเลือก <strong>OAuth client ID</strong></li>
+                                    <li>ช่อง Application type เลือก <strong>Web application</strong> และระบุชื่ออะไรก็ได้</li>
+                                    <li><strong>*สำคัญมาก:</strong> ในส่วน <strong>Authorized redirect URIs</strong> คลิก Add URI แล้วกรอก URL ของระบบคุณที่ลงท้ายด้วย <code>auth/google_auth.php</code> (เช่น <code>http://localhost/meeting/auth/google_auth.php</code> หรือโดเมนจริงของคุณ)</li>
+                                    <li>คลิก <strong>Create</strong></li>
+                                    <li>ระบบจะแสดงหน้าต่างที่มี <strong>Client ID</strong> และ <strong>Client Secret</strong> ให้นำค่าทั้งสองอย่างนี้มาคัดลอกและวางลงในฟอร์มของระบบนี้</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- UI Configuration -->
+        <div class="col-lg-6">
+            <div class="card-premium h-100">
+                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
+                    <h5 class="fw-bold mb-0"><i class="bi bi-palette-fill text-primary me-2"></i>ข้อความและหน้าตา (UI Settings)</h5>
+                    <p class="text-muted small mt-2">จัดการข้อความส่วนหัว และส่วนท้ายของเว็บไซต์</p>
+                </div>
+                <div class="card-body p-4 pt-2">
+                    <form action="" method="POST">
+                        <input type="hidden" name="action" value="ui_config">
+                        <div class="mb-4">
+                            <label class="form-label fw-medium text-muted small text-uppercase">ชื่อระบบ (Header Text)</label>
+                            <input type="text" name="header_text" class="form-control bg-light border-0 py-2" value="<?= htmlspecialchars($current_header_text) ?>" placeholder="เช่น MOPH System">
+                            <div class="form-text mt-2 text-muted">ข้อความนี้จะแสดงอยู่มุมซ้ายบนของเมนูด้านข้าง (Sidebar)</div>
+                        </div>
+                        
+                        <div class="mb-4">
+                            <label class="form-label fw-medium text-muted small text-uppercase">ข้อความส่วนล่าง (Footer Text)</label>
+                            <textarea name="footer_text" class="form-control bg-light border-0 py-2" rows="3" placeholder="เช่น ระบบงานประชุมออนไลน์ โรงพยาบาล XYZ"><?= htmlspecialchars($current_footer_text) ?></textarea>
+                            <div class="form-text mt-2 text-muted">ระบบจะแสดง "สงวนลิขสิทธิ์ &copy; ปีปัจจุบัน" นำหน้าข้อความที่คุณพิมพ์อัตโนมัติ (หากต้องการจัดวางปีด้วยตนเอง ให้พิมพ์คำว่า <code>{year}</code> ลงในข้อความ)</div>
+                        </div>
+                        
+                        <hr class="my-4 border-color">
+                        
+                        <div class="d-flex justify-content-end gap-2">
+                            <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">บันทึกข้อความ</button>
+                        </div>
+                    </form>
+                    
+                    <div class="mt-4 p-4 rounded-3 bg-light" style="border: 1px dashed var(--border-color);">
+                        <h6 class="fw-bold text-muted mb-2"><i class="bi bi-lightbulb-fill text-warning me-1"></i>เคล็ดลับ</h6>
+                        <p class="text-muted small mb-0">หากต้องการให้แสดงปีปัจจุบันอัตโนมัติในโค้ด PHP (หน้า Footer.php) ระบบจะเพิ่มปี พ.ศ. ให้เอง หากคุณปล่อยให้ช่อง Footer Text ว่างไว้</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php require_once 'includes/footer.php'; ?>
@@ -0,0 +1,178 @@
+<?php
+require_once 'includes/header.php';
+
+// Check if user is superadmin
+if ($_SESSION['role'] !== 'superadmin') {
+    echo "<script>
+        document.addEventListener('DOMContentLoaded', () => {
+            Swal.fire({
+                icon: 'error',
+                title: 'ปฏิเสธการเข้าถึง',
+                text: 'เฉพาะ Super Admin เท่านั้นที่สามารถเข้าใช้งานหน้านี้ได้',
+                confirmButtonText: 'กลับหน้าหลัก'
+            }).then(() => {
+                window.location.href = 'dashboard.php';
+            });
+        });
+    </script>";
+    require_once 'includes/footer.php';
+    exit;
+}
+
+$msg = $_GET['msg'] ?? '';
+$error = $_GET['error'] ?? '';
+?>
+
+<div class="page-content">
+    <div class="page-header">
+        <div>
+            <h2 class="page-title">จัดการผู้ดูแลระบบ (Users)</h2>
+            <p class="page-subtitle">เพิ่มหรือลบสิทธิ์ผู้ดูแลระบบ (Admin) จากรหัสบัตรประชาชน 13 หลัก</p>
+        </div>
+        <div>
+            <button class="btn btn-primary rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addAdminModal">
+                <i class="bi bi-person-plus-fill me-1"></i> เพิ่ม Admin ใหม่
+            </button>
+        </div>
+    </div>
+
+    <?php if ($msg == 'success'): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('ดำเนินการสำเร็จ', 'success');
+            });
+        </script>
+    <?php endif; ?>
+    <?php if ($error): ?>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                window.showToast('<?= htmlspecialchars($error) ?>', 'danger');
+            });
+        </script>
+    <?php endif; ?>
+
+    <div class="card-premium">
+        <div class="card-body p-4">
+            <div class="table-responsive">
+                <table id="usersTable" class="table table-hover align-middle mb-0 w-100">
+                    <thead class="table-light">
+                        <tr>
+                            <th class="ps-3">ID</th>
+                            <th>เลขบัตรประชาชน (CID)</th>
+                            <th class="text-center">ชื่อ - นามสกุล</th>
+                            <th>สิทธิ์การใช้งาน (Role)</th>
+                            <th>วันที่เพิ่ม</th>
+                            <th class="text-end pe-3">จัดการ</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php
+                        // ดึงข้อมูล Master Super Admin จาก config ก่อน
+                        global $master_super_admin_cid;
+                        $master_name = 'ไม่ทราบชื่อ (โปรดอัปเดตข้อมูลใน HOSxP)';
+                        
+                        try {
+                            $stmtMaster = $pdo_hos->prepare("SELECT e.HR_PREFIX_NAME, a.HR_FNAME, a.HR_LNAME 
+                                                             FROM hr_person a 
+                                                             LEFT JOIN hr_prefix e ON a.HR_PREFIX_ID = e.HR_PREFIX_ID 
+                                                             WHERE a.HR_CID = :cid");
+                            $stmtMaster->execute(['cid' => $master_super_admin_cid]);
+                            $masterRow = $stmtMaster->fetch();
+                            if ($masterRow) {
+                                $master_name = $masterRow['HR_PREFIX_NAME'] . $masterRow['HR_FNAME'] . " " . $masterRow['HR_LNAME'];
+                            }
+                            
+                            echo "<tr>";
+                            echo "<td class='text-center text-muted fw-medium'>0</td>";
+                            echo "<td class='text-center fw-medium text-dark'>" . htmlspecialchars($master_super_admin_cid) . "</td>";
+                            echo "<td class='text-center'>" . htmlspecialchars($master_name) . " <i class='bi bi-patch-check-fill text-danger ms-1' title='Master Account'></i></td>";
+                            echo "<td class='text-center'><span class='badge-soft bg-danger-subtle text-danger'>Master Super Admin</span></td>";
+                            echo "<td class='text-center'>-</td>";
+                            echo "<td class='text-center text-muted small'>ไม่สามารถลบได้</td>";
+                            echo "</tr>";
+
+                            $stmt = $pdo_sys->query("SELECT * FROM system_users ORDER BY id DESC");
+                            while ($row = $stmt->fetch()) {
+                                // ดึงชื่อจาก HOSxP
+                                $name = 'ไม่พบชื่อใน HOSxP';
+                                $stmtName = $pdo_hos->prepare("SELECT e.HR_PREFIX_NAME, a.HR_FNAME, a.HR_LNAME 
+                                                               FROM hr_person a 
+                                                               LEFT JOIN hr_prefix e ON a.HR_PREFIX_ID = e.HR_PREFIX_ID 
+                                                               WHERE a.HR_CID = :cid");
+                                $stmtName->execute(['cid' => $row['cid']]);
+                                $nameRow = $stmtName->fetch();
+                                if ($nameRow) {
+                                    $name = $nameRow['HR_PREFIX_NAME'] . $nameRow['HR_FNAME'] . " " . $nameRow['HR_LNAME'];
+                                }
+
+                                $roleBadge = $row['role'] === 'superadmin' ? 'badge-soft-primary' : 'badge-soft-info';
+                                
+                                echo "<tr>";
+                                echo "<td class='text-center text-muted fw-medium'>" . $row['id'] . "</td>";
+                                echo "<td class='text-center fw-medium text-dark'>" . htmlspecialchars($row['cid']) . "</td>";
+                                echo "<td class='text-center'>" . htmlspecialchars($name) . "</td>";
+                                echo "<td class='text-center'><span class='badge-soft {$roleBadge} text-uppercase'>" . htmlspecialchars($row['role']) . "</span></td>";
+                                echo "<td class='text-center' data-order='" . $row['created_at'] . "'>" . format_thai_date($row['created_at'], true) . "</td>";
+                                echo "<td class='text-center'>";
+                                echo "<a href='users_action.php?action=delete&id=" . $row['id'] . "' class='btn btn-sm btn-light text-danger btn-icon-only mx-auto' style='width: 32px; height: 32px;' onclick='return confirm(\"ยืนยันการลบสิทธิ์ Admin บัญชีนี้?\")'><i class='bi bi-trash fs-6'></i></a>";
+                                echo "</td>";
+                                echo "</tr>";
+                            }
+                        } catch (PDOException $e) {
+                            echo "<tr><td colspan='6' class='text-danger'>Error: " . $e->getMessage() . "</td></tr>";
+                        }
+                        ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal Add -->
+<div class="modal fade" id="addAdminModal" tabindex="-1" aria-labelledby="addAdminModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius: 16px; border: none; box-shadow: var(--shadow-lg);">
+      <div class="modal-header border-0 pb-0 pt-4 px-4">
+        <h5 class="modal-title fw-bold" id="addAdminModalLabel">เพิ่มผู้ดูแลระบบใหม่</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form action="users_action.php" method="POST">
+          <input type="hidden" name="action" value="create">
+          <div class="modal-body p-4">
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">เลขบัตรประชาชน 13 หลัก</label>
+                <input type="text" name="cid" class="form-control form-control-lg bg-light border-0" required pattern="\d{13}" title="กรุณากรอกตัวเลข 13 หลัก" placeholder="เช่น 1234567890123">
+                <div class="form-text mt-2 text-muted"><i class="bi bi-info-circle me-1"></i> บุคคลนี้จะต้องมีรายชื่อในระบบบุคลากร (hr_person) ก่อน</div>
+            </div>
+            <div class="mb-3">
+                <label class="form-label fw-medium text-muted small text-uppercase">สิทธิ์การใช้งาน (Role)</label>
+                <select name="role" class="form-select form-control-lg bg-light border-0" required>
+                    <option value="admin" selected>Admin (จัดการข้อมูลทั่วไป)</option>
+                    <option value="superadmin">Super Admin (จัดการแอดมินได้)</option>
+                </select>
+            </div>
+          </div>
+          <div class="modal-footer border-0 pt-0 pb-4 px-4">
+            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">ยกเลิก</button>
+            <button type="submit" class="btn btn-primary rounded-pill px-4">เพิ่มสิทธิ์</button>
+          </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<?php require_once 'includes/footer.php'; ?>
+
+<script>
+$(document).ready(function() {
+    $('#usersTable').DataTable({
+        "language": {
+            "url": "//cdn.datatables.net/plug-ins/1.13.6/i18n/th.json"
+        },
+        "order": [[0, "asc"]],
+        "pageLength": 10,
+        "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>>',
+    });
+});
+</script>
@@ -0,0 +1,89 @@
+<?php
+session_start();
+require_once 'config/db.php';
+require_once 'includes/functions.php';
+
+// Must be logged in and be a superadmin
+if (!isset($_SESSION['cid']) || $_SESSION['role'] !== 'superadmin') {
+    header("location: index.php");
+    exit;
+}
+
+$action = $_POST['action'] ?? $_GET['action'] ?? '';
+
+if ($action == 'create') {
+    $cid = trim($_POST['cid'] ?? '');
+    $role = $_POST['role'] ?? 'admin';
+    
+    if (empty($cid) || strlen($cid) != 13) {
+        header("location: users.php?error=" . urlencode("เลขบัตรประชาชนต้องมี 13 หลัก"));
+        exit;
+    }
+
+    try {
+        // 1. Check if user exists in hr_person (HOSxP)
+        $stmt_check = $pdo_hos->prepare("SELECT HR_CID FROM hr_person WHERE HR_CID = :cid");
+        $stmt_check->execute(['cid' => $cid]);
+        
+        if (!$stmt_check->fetch()) {
+            header("location: users.php?error=" . urlencode("ไม่พบหมายเลขบัตรประชาชนนี้ในฐานข้อมูลบุคลากร HOSxP"));
+            exit;
+        }
+
+        // 2. Check if already exists in system_users
+        $stmt_sys_check = $pdo_sys->prepare("SELECT id FROM system_users WHERE cid = :cid");
+        $stmt_sys_check->execute(['cid' => $cid]);
+        
+        if ($stmt_sys_check->fetch()) {
+            header("location: users.php?error=" . urlencode("บุคคลนี้ได้รับสิทธิ์ในระบบอยู่แล้ว"));
+            exit;
+        }
+
+        // 3. Insert into system_users
+        $sql = "INSERT INTO system_users (cid, role, created_by) VALUES (:cid, :role, :created_by)";
+        $stmt = $pdo_sys->prepare($sql);
+        $stmt->execute([
+            'cid' => $cid,
+            'role' => $role,
+            'created_by' => $_SESSION['cid']
+        ]);
+
+        add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Assign Role', "Assigned $role role to CID: $cid");
+
+        header("location: users.php?msg=success");
+        exit;
+
+    } catch (PDOException $e) {
+        header("location: users.php?error=" . urlencode("Database Error: " . $e->getMessage()));
+        exit;
+    }
+}
+
+if ($action == 'delete') {
+    $id = $_GET['id'] ?? '';
+    if ($id) {
+        try {
+            // Get info for log
+            $stmt = $pdo_sys->prepare("SELECT cid, role FROM system_users WHERE id = :id");
+            $stmt->execute(['id' => $id]);
+            $row = $stmt->fetch();
+            
+            if ($row) {
+                $delStmt = $pdo_sys->prepare("DELETE FROM system_users WHERE id = :id");
+                $delStmt->execute(['id' => $id]);
+    
+                add_log($pdo_sys, $_SESSION['cid'], $_SESSION['fullname'], 'Revoke Role', "Revoked {$row['role']} role from CID: {$row['cid']}");
+            }
+            
+            header("location: users.php?msg=success");
+            exit;
+        } catch (PDOException $e) {
+            header("location: users.php?error=" . urlencode("Database Error: " . $e->getMessage()));
+            exit;
+        }
+    }
+}
+
+header("location: users.php");
+exit;
+?>