{"id":3681,"date":"2024-08-06T10:04:23","date_gmt":"2024-08-06T03:04:23","guid":{"rendered":"https:\/\/www.bit.rmuti.ac.th\/bit\/?page_id=3681"},"modified":"2026-07-14T09:34:18","modified_gmt":"2026-07-14T02:34:18","slug":"3681-2","status":"publish","type":"page","link":"https:\/\/www.bit.rmuti.ac.th\/bit\/?page_id=3681","title":{"rendered":"BIT DASHBOARD"},"content":{"rendered":"<style id=\"sp_tab_dynamic_style894\">#sp-tabpro-wrapper_894.sp-tab__lay-default .sp-tab__tab-content {width: 100%;}#sp-tabpro-wrapper_894 .animated {-webkit-animation-duration: 500ms;animation-duration: 500ms;}#sp-wp-tabs-wrapper_894 .sp-tab__nav { justify-content: flex-start; }#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom {display: flex;flex-direction: column-reverse;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul {border-top: 1px solid #cccccc;border-bottom: 0;margin-top: 0;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul > li .sp-tab__nav-link.sp-tab__active {border-color: transparent #cccccc#cccccc;margin-top: -1px;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul > li .sp-tab__nav-link,#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul > li a,#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul > .sp-tab__nav-item {border-top: 0;border-top-left-radius: 0;border-top-right-radius: 0;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul {border-bottom: none;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom .sp-tab__tab-content .sp-tab__tab-pane {border-top: 1px solid #cccccc;border-bottom: 0;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__tab-content .sp-tab-content > ul,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__tab-content .sp-tab-content > ol {border-bottom: none;}#sp-wp-tabs-wrapper_894 .sp-tab__nav-tabs .sp-tab__nav-item.show .sp-tab__nav-link,#sp-wp-tabs-wrapper_894.sp-tab__lay-default ul li .sp-tab__nav-link.sp-tab__active {border-color: #cccccc#cccccc transparent;}#sp-wp-tabs-wrapper_894 > .sp-tab__nav-tabs .sp-tab__nav-link.sp-tab__active .sp-tab__tab_title,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__nav-link > .sp-tab__card-header {color: #444;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul > li > .sp-tab__nav-link,#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul > li > a {cursor: pointer;border-color: #cccccc;padding-top: 15px;padding-right: 15px;padding-bottom: 15px;padding-left: 15px;}#sp-wp-tabs-wrapper_894 > .sp-tab__nav-tabs .sp-tab__nav-link {border: 1px solid #cccccc;height: 100%;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul > li .sp-tab__nav-link,#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul > li a,#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul > .sp-tab__nav-item {border-top-left-radius: 2px;border-top-right-radius: 2px;}#sp-wp-tabs-wrapper_894 .sp-tab__nav-tabs .sp-tab__nav-item {margin-bottom: -1px; }#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item {margin-right: 10px;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default.sp-tab__horizontal-bottom > ul .sp-tab__nav-item {margin-right: 10px;margin-top: 0;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item .sp-tab__nav-link:hover .sp-tab__tab_title,#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item a:hover .sp-tab__tab_title,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__nav-link.collapsed .sp-tab__card-header:hover {color: #444;transition: .3s;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__nav-link.collapsed > .sp-tab__card-header {background-color: #eee;transition: 0.3s;}#sp-wp-tabs-wrapper_894 > .sp-tab__nav-tabs > .sp-tab__nav-item.show .sp-tab__nav-link,#sp-wp-tabs-wrapper_894 > .sp-tab__nav-tabs > .sp-tab__nav-item .sp-tab__nav-link.sp-tab__active,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__nav-link > .sp-tab__card-header {background-color: #fff;}#sp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item .sp-tab__nav-link:not(.sp-tab__active):hover,#sp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__tab-content > .sp-tab__tab-pane .sp-tab__card-header:hover {background-color: #fff;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item:not(.sp-tab__active):hover,#sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__nav-link.collapsed > .sp-tab__card-header:hover {background-color: #fff;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item:last-child {margin-right: 0;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > .sp-tab__tab-content .sp-tab__tab-pane {border: 1px solid #cccccc;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;background-color: #ffffff;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul {border-bottom: 1px solid #cccccc;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > .sp-tab__tab-content .sp-tab__tab-pane {border-top: 0px;}@media(max-width:600px) {#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul li.sp-tab__nav-item {width: 100%;margin-right: 0px;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul li.sp-tab__nav-item:last-child {margin-bottom: -1px;}}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > ul .sp-tab__nav-item .sp-tab__tab_title,#sp-wp-tabs-wrapper_894.sp-tab__lay-default span > .sp-tab__card-header {font-weight: 600;font-style: normal;font-size: 16px;line-height: 22px;letter-spacing: 0px;color: #444;margin: 0px;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > .sp-tab__tab-content .sp-tab__tab-pane,#sp-wp-tabs-wrapper_894.sp-tab__lay-default > .sp-tab__tab-content .sp-tab__tab-pane p {font-weight: 400;font-style: normal;font-size: 16px;line-height: 24px;letter-spacing: 0px;color: #444;}#sp-wp-tabs-wrapper_894.sp-tab__lay-default > .sp-tab__tab-content .sp-tab__tab-pane ul li a, #sp-wp-tabs-wrapper_894.sp-tab__lay-default .sp-tab__tab-content .sp-tab__tab-pane ol li a {color: #444;}<\/style>\t\t<div id=\"sp-wp-tabs-wrapper_894\" class=\"sp-tab__lay-default\" data-preloader=\"1\" data-activemode=\"tabs-activator-event-click\" data-anchor_linking=\"1\">\n\t\t\t<div class=\"sp-tab__preloader\">\n\t\t<div class=\"sp-tab__spinner\">\n\t\t\t<div class=\"rect1\"><\/div>\n\t\t\t<div class=\"rect2\"><\/div>\n\t\t\t<div class=\"rect3\"><\/div>\n\t\t\t<div class=\"rect4\"><\/div>\n\t\t\t<div class=\"rect5\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\t<ul class=\"sp-tab__nav sp-tab__nav-tabs\" id=\"sp-tab__ul\" role=\"tablist\">\n\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link sp-tab__active\" data-sptoggle=\"tab\" for=\"#tab-8941\" role=\"tab\" aria-controls=tab-8941 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H4 class=\"sp-tab__tab_title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32<\/H4><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-8942\" role=\"tab\" aria-controls=tab-8942 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H4 class=\"sp-tab__tab_title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23<\/H4><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-8943\" role=\"tab\" aria-controls=tab-8943 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H4 class=\"sp-tab__tab_title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23<\/H4><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-8944\" role=\"tab\" aria-controls=tab-8944 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H4 class=\"sp-tab__tab_title\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e27\u0e34\u0e08\u0e31\u0e22<\/H4><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-8945\" role=\"tab\" aria-controls=tab-8945 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H4 class=\"sp-tab__tab_title\">\u0e07\u0e1a\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13<\/H4><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t<\/ul>\n<div class=\"sp-tab__tab-content\">\n\t\t\t\t<div id=\"tab-8941\" class=\"sp-tab__tab-pane sp-tab__show sp-tab__active\" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Dashboard \u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 2569 - \u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e2f \u0e21\u0e17\u0e23.\u0e2d\u0e35\u0e2a\u0e32\u0e19 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19<\/title>\r\n    <!-- Tailwind CSS & Google Fonts -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <!-- Chart.js -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <style>\r\n        body { font-family: 'Kanit', sans-serif; background-color: #f8fafc; }\r\n        .chart-container { position: relative; height: 320px; width: 100%; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"text-slate-800 antialiased\">\r\n\r\n    <!-- Header Banner -->\r\n    <header class=\"bg-linear-to-r from-amber-600 via-blue-600 to-blue-700 text-white shadow-md\">\r\n        <div class=\"max-w-7xl mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-4\">\r\n            <div class=\"flex items-center gap-4\">\r\n                <div class=\"bg-blue p-2.5 rounded-xl shadow-inner hidden sm:block\">\r\n                <div class=\"bg-blue-800 text-amber-400 font-bold p-3 rounded-xl text-2xl shadow-inner\">BIT RMUTI<\/div>                <\/div>\r\n                <div>\r\n                    <h1 class=\"text-2xl md:text-3xl font-bold tracking-tight\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28<\/h1>\r\n                    <p class=\"text-amber-100 font-light mt-1\">\u0e21\u0e2b\u0e32\u0e27\u0e34\u0e17\u0e22\u0e32\u0e25\u0e31\u0e22\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e23\u0e32\u0e0a\u0e21\u0e07\u0e04\u0e25\u0e2d\u0e35\u0e2a\u0e32\u0e19 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19<\/p>\r\n                <\/div>\r\n            <\/div>\r\n           \r\n                <p class=\"text-amber-100 font-light mt-1\">\u0e13 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 10 \u0e01\u0e23\u0e01\u0e0e\u0e32\u0e04\u0e21 2569<\/p>\r\n           \r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Main Content Container -->\r\n    <main class=\"max-w-7xl mx-auto px-4 sm:px-6 py-8\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\">\r\n            \r\n            <!-- LEFT AREA: Dashboard View (3 Columns) -->\r\n            <div class=\"lg:col-span-3 space-y-8\">\r\n                \r\n                <!-- KPI Cards Section -->\r\n                <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-5\">\r\n                    <!-- Card 1: Total Students -->\r\n                    <div class=\"bg-white rounded-2xl p-6 shadow-xs border border-slate-100 flex flex-col justify-between transition-all hover:shadow-md\">\r\n                        <div class=\"flex justify-between items-start\">\r\n                            <div>\r\n                                <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider\">\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n                                <h3 id=\"kpi-total\" class=\"text-3xl font-bold text-slate-900 mt-2\">0<\/h3>\r\n                            <\/div>\r\n                            <div class=\"p-3 bg-blue-50 text-blue-600 rounded-xl\">\r\n                                <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"><\/path><\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mt-4 pt-4 border-t border-slate-50 flex justify-between text-xs text-slate-500\">\r\n                            <span>\u0e0a\u0e32\u0e22: <strong id=\"kpi-total-male\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                            <span>\u0e2b\u0e0d\u0e34\u0e07: <strong id=\"kpi-total-female\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Card 2: Bachelors Total -->\r\n                    <div class=\"bg-white rounded-2xl p-6 shadow-xs border border-slate-100 flex flex-col justify-between transition-all hover:shadow-md\">\r\n                        <div class=\"flex justify-between items-start\">\r\n                            <div>\r\n                                <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35<\/p>\r\n                                <h3 id=\"kpi-bach\" class=\"text-3xl font-bold text-orange-600 mt-2\">0<\/h3>\r\n                            <\/div>\r\n                            <div class=\"p-3 bg-blue-50 text-blue-600 rounded-xl\">\r\n                                <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 14l9-5-9-5-9 5 9 5z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z\"><\/path><\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mt-4 pt-4 border-t border-slate-50 flex justify-between text-xs text-slate-500\">\r\n                            <span>\u0e0a\u0e32\u0e22: <strong id=\"kpi-bach-male\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                            <span>\u0e2b\u0e0d\u0e34\u0e07: <strong id=\"kpi-bach-female\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Card 3: Masters Total -->\r\n                    <div class=\"bg-white rounded-2xl p-6 shadow-xs border border-slate-100 flex flex-col justify-between transition-all hover:shadow-md\">\r\n                        <div class=\"flex justify-between items-start\">\r\n                            <div>\r\n                                <p class=\"text-sm font-medium text-slate-500 uppercase tracking-wider\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17<\/p>\r\n                                <h3 id=\"kpi-mast\" class=\"text-3xl font-bold text-purple-600 mt-2\">0<\/h3>\r\n                            <\/div>\r\n                            <div class=\"p-3 bg-purple-50 text-purple-600 rounded-xl\">\r\n                                <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"><\/path><\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mt-4 pt-4 border-t border-slate-50 flex justify-between text-xs text-slate-500\">\r\n                            <span>\u0e0a\u0e32\u0e22: <strong id=\"kpi-mast-male\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                            <span>\u0e2b\u0e0d\u0e34\u0e07: <strong id=\"kpi-mast-female\" class=\"text-slate-700\">0<\/strong><\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Charts Section Layout Grid -->\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n                    <!-- Bar Chart Card -->\r\n                    <div class=\"bg-white p-6 rounded-2xl shadow-xs border border-slate-100\">\r\n                        <h4 class=\"text-base font-bold text-slate-900 mb-4 flex items-center gap-2\">\r\n                            <span class=\"w-3 h-3 bg-orange-500 rounded-full\"><\/span> \u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2a\u0e32\u0e02\u0e32\r\n                        <\/h4>\r\n                        <div class=\"chart-container\">\r\n                            <canvas id=\"barChart\"><\/canvas>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <!-- Pie Chart Card -->\r\n                    <div class=\"bg-white p-6 rounded-2xl shadow-xs border border-slate-100\">\r\n                        <h4 class=\"text-base font-bold text-slate-900 mb-4 flex items-center gap-2\">\r\n                            <span class=\"w-3 h-3 bg-purple-500 rounded-full\"><\/span> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e32\u0e21\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32 (%)\r\n                        <\/h4>\r\n                        <div class=\"chart-container\">\r\n                            <canvas id=\"pieChart\"><\/canvas>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Data Table Section -->\r\n                <div class=\"bg-white rounded-2xl shadow-xs border border-slate-100 overflow-hidden\">\r\n                    <div class=\"px-6 py-4 bg-slate-50\/70 border-b border-slate-100 flex justify-between items-center\">\r\n                        <h3 class=\"font-bold text-slate-900 text-base\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e41\u0e22\u0e01\u0e23\u0e32\u0e22\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35<\/h3>\r\n                        <span class=\"text-xs text-slate-500 bg-white border border-slate-200 px-2.5 py-1 rounded-md\">\u0e2b\u0e19\u0e48\u0e27\u0e22: \u0e23\u0e32\u0e22\u0e1a\u0e38\u0e04\u0e04\u0e25<\/span>\r\n                    <\/div>\r\n                    <div class=\"overflow-x-auto\">\r\n                        <table class=\"w-full text-left border-collapse\">\r\n                            <thead>\r\n                                <tr class=\"bg-slate-100\/70 text-slate-700 text-xs font-semibold uppercase tracking-wider border-b border-slate-200\">\r\n                                    <th class=\"py-3.5 px-4 sticky left-0 bg-slate-100 z-10\">\u0e2a\u0e32\u0e02\u0e32<\/th>\r\n                                    <th class=\"py-3.5 px-3 text-center bg-blue-50\/50\">\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 1<\/th>\r\n                                    <th class=\"py-3.5 px-3 text-center bg-emerald-50\/50\">\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 2<\/th>\r\n                                    <th class=\"py-3.5 px-3 text-center bg-amber-50\/50\">\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 3<\/th>\r\n                                    <th class=\"py-3.5 px-3 text-center bg-purple-50\/50\">\u0e0a\u0e31\u0e49\u0e19\u0e1b\u0e35 4<\/th>\r\n                                    <th class=\"py-3.5 px-3 text-center bg-rose-50\/50\">\u0e15\u0e01\u0e04\u0e49\u0e32\u0e07<\/th>\r\n                                    <th class=\"py-3.5 px-4 text-center bg-slate-200\/60 font-bold\">\u0e0a\u0e32\u0e22 \u0e23\u0e27\u0e21<\/th>\r\n                                    <th class=\"py-3.5 px-4 text-center bg-slate-200\/60 font-bold\">\u0e2b\u0e0d\u0e34\u0e07 \u0e23\u0e27\u0e21<\/th>\r\n                                    <th class=\"py-3.5 px-4 text-center bg-orange-600 text-white font-bold\">\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/th>\r\n                                <\/tr>\r\n                            <\/thead>\r\n                            <tbody id=\"table-body\" class=\"divide-y divide-slate-100 text-sm text-slate-700\">\r\n                                <!-- Generated Dynamic Content -->\r\n                            <\/tbody>\r\n                        <\/table>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <!-- RIGHT AREA: Sidebar Controls (1 Column) -->\r\n            <div class=\"lg:col-span-1 space-y-6\">\r\n                <div class=\"bg-white p-5 rounded-2xl shadow-xs border border-slate-200 sticky top-6\">\r\n                    <div class=\"flex items-center justify-between mb-4 border-b border-slate-100 pb-3\">\r\n                        <h4 class=\"font-bold text-slate-900 text-base flex items-center gap-2\">\r\n                            <svg class=\"w-5 h-5 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z\"><\/path><\/svg>\r\n                            \u0e2a\u0e32\u0e02\u0e32\r\n                        <\/h4>\r\n                        <button onclick=\"toggleAllFilters(true)\" class=\"text-xs text-orange-600 font-semibold hover:underline cursor-pointer\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n                    <\/div>\r\n\r\n\r\n                    <!-- Bachelor Degree Block Container -->\r\n                    <div>\r\n                        <span class=\"text-xs font-bold text-orange-700 bg-orange-50 px-2 py-0.5 rounded-md uppercase tracking-wider\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35<\/span>\r\n                        <div class=\"mt-2.5 space-y-2.5 pl-1\" id=\"filter-bachelors-group\">\r\n                            <!-- Dynamic Checkbox Bachelor -->\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n <!-- Master Degree Block Container -->\r\n                    <div class=\"mb-5\">\r\n                        <span class=\"text-xs font-bold text-purple-700 bg-purple-50 px-2 py-0.5 rounded-md uppercase tracking-wider\">\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17<\/span>\r\n                        <div class=\"mt-2.5 space-y-2.5 pl-1\" id=\"filter-masters-group\">\r\n                            <!-- Dynamic Checkbox Master -->\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mt-5 pt-4 border-t border-slate-100\">\r\n                        <button onclick=\"toggleAllFilters(false)\" class=\"w-full text-center text-xs text-slate-400 hover:text-rose-500 py-1 transition-colors cursor-pointer\">\r\n                            \u0e25\u0e49\u0e32\u0e07\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/main>\r\n    <!-- Core Script Logic for handling data and interactive triggers -->\r\n    <script>\r\n        \/\/ RAW DATA FROM EXCEL PROVIDED FOR YEAR 2569\r\n        const rawDataset = {\r\n            bachelors: [\r\n                { id: \"b1\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [28, 76, 104], y2: [34, 66, 100], y3: [14, 58, 68], y4: [20, 61, 81], leftover: [1, 6, 7], total: [97, 263, 360] },\r\n                { id: \"b2\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [51, 103, 154], y2: [32, 91, 123], y3: [16, 53, 69], y4: [12, 61, 73], leftover: [5, 4, 9], total: [116, 312, 428] },\r\n                { id: \"b3\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [16, 146, 162], y2: [10, 138, 148], y3: [6, 59, 65], y4: [6, 55, 61], leftover: [3, 7, 10], total: [41, 405, 446] },\r\n                { id: \"b4\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [83, 65, 148], y2: [54, 67, 121], y3: [37, 29, 66], y4: [32, 38, 70], leftover: [16, 14, 30], total: [222, 213, 435] },\r\n                { id: \"b5\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [33, 110, 143], y2: [33, 104, 137], y3: [19, 101, 120], y4: [32, 90, 122], leftover: [4, 22, 26], total: [121, 427, 548] },\r\n                { id: \"b6\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [27, 46, 73], y2: [16, 63, 79], y3: [11, 49, 60], y4: [8, 41, 49], leftover: [2, 6, 8], total: [64, 205, 269] },\r\n                { id: \"b7\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e04\u0e49\u0e32\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [0, 0, 0], y2: [0, 0, 0], y3: [0, 0, 0], y4: [5, 3, 8], leftover: [0, 0, 0], total: [5, 3, 8] },\r\n                { id: \"b8\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e1a\u0e1a\u0e1a\u0e39\u0e23\u0e13\u0e32\u0e01\u0e32\u0e23\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [8, 18, 26], y2: [6, 18, 24], y3: [7, 20, 27], y4: [7, 12, 19], leftover: [2, 1, 3], total: [30, 69, 99] },\r\n                { id: \"b9\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e1a\u0e39\u0e23\u0e13\u0e32\u0e01\u0e32\u0e23\u0e20\u0e32\u0e29\u0e32\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\", y1: [11, 15, 26], y2: [12, 21, 33], y3: [3, 12, 15], y4: [1, 13, 14], leftover: [0, 1, 1], total: [27, 62, 89] }\r\n            ],\r\n            masters: [\r\n                { id: \"m1\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\", y1: [0, 2, 2], y2: [0, 0, 0], y3: [0, 0, 0], y4: [0, 0, 0], leftover: [1, 1, 2], total: [1, 3, 4] },\r\n                { id: \"m2\", branch: \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\", degree: \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\", y1: [0, 3, 3], y2: [0, 8, 8], y3: [0, 0, 0], y4: [0, 0, 0], leftover: [1, 0, 1], total: [1, 9, 10] }\r\n            ]\r\n        };\r\n\r\n        \/\/ State to keep track of selected IDs\r\n        let activeFilters = [];\r\n        let barChartInstance = null;\r\n        let pieChartInstance = null;\r\n\r\n        \/\/ Initialize App\r\n        window.addEventListener('DOMContentLoaded', () => {\r\n            setupFiltersUI();\r\n            \/\/ Select all by default initially\r\n            rawDataset.bachelors.forEach(b => activeFilters.push(b.id));\r\n            rawDataset.masters.forEach(m => activeFilters.push(m.id));\r\n            \r\n            updateDashboard();\r\n        });\r\n\r\n        function setupFiltersUI() {\r\n            const bContainer = document.getElementById('filter-bachelors-group');\r\n            const mContainer = document.getElementById('filter-masters-group');\r\n            \r\n            \/\/ Build Bachelors\r\n            rawDataset.bachelors.forEach(item => {\r\n                bContainer.appendChild(createCheckboxItem(item, 'border-blue-500 text-orange-600'));\r\n            });\r\n\r\n            \/\/ Build Masters\r\n            rawDataset.masters.forEach(item => {\r\n                mContainer.appendChild(createCheckboxItem(item, 'border-purple-500 text-purple-600'));\r\n            });\r\n        }\r\n\r\n        function createCheckboxItem(item, accentColors) {\r\n            const label = document.createElement('label');\r\n            label.className = \"flex items-start gap-3 text-xs text-slate-600 hover:text-slate-900 cursor-pointer p-1.5 rounded-md hover:bg-slate-50 transition-colors\";\r\n            \r\n            const checkbox = document.createElement('input');\r\n            checkbox.type = 'checkbox';\r\n            checkbox.checked = true;\r\n            checkbox.value = item.id;\r\n            checkbox.className = \"mt-0.5 rounded border-slate-300 focus:ring-orange-500 cursor-pointer\";\r\n            checkbox.addEventListener('change', (e) => {\r\n                if (e.target.checked) {\r\n                    if (!activeFilters.includes(item.id)) activeFilters.push(item.id);\r\n                } else {\r\n                    activeFilters = activeFilters.filter(id => id !== item.id);\r\n                }\r\n                updateDashboard();\r\n            });\r\n\r\n            const textSpan = document.createElement('span');\r\n            textSpan.className = \"font-medium select-none\";\r\n            textSpan.textContent = item.branch;\r\n\r\n            label.appendChild(checkbox);\r\n            label.appendChild(textSpan);\r\n            return label;\r\n        }\r\n\r\n        function toggleAllFilters(selectAll) {\r\n            activeFilters = [];\r\n            const checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\r\n            checkboxes.forEach(cb => {\r\n                cb.checked = selectAll;\r\n                if (selectAll) activeFilters.push(cb.value);\r\n            });\r\n            updateDashboard();\r\n        }\r\n\r\n        function updateDashboard() {\r\n            \/\/ Filter original lists based on active filters\r\n            const filteredBachelors = rawDataset.bachelors.filter(b => activeFilters.includes(b.id));\r\n            const filteredMasters = rawDataset.masters.filter(m => activeFilters.includes(m.id));\r\n\r\n            \/\/ CALCULATE CALCULATION KPI OBJECTS\r\n            let metrics = {\r\n                grandTotal: 0, grandMale: 0, grandFemale: 0,\r\n                bachTotal: 0, bachMale: 0, bachFemale: 0,\r\n                mastTotal: 0, mastMale: 0, mastFemale: 0\r\n            };\r\n\r\n            filteredBachelors.forEach(b => {\r\n                metrics.bachMale += b.total[0];\r\n                metrics.bachFemale += b.total[1];\r\n                metrics.bachTotal += b.total[2];\r\n            });\r\n\r\n            filteredMasters.forEach(m => {\r\n                metrics.mastMale += m.total[0];\r\n                metrics.mastFemale += m.total[1];\r\n                metrics.mastTotal += m.total[2];\r\n            });\r\n\r\n            metrics.grandTotal = metrics.bachTotal + metrics.mastTotal;\r\n            metrics.grandMale = metrics.bachMale + metrics.mastMale;\r\n            metrics.grandFemale = metrics.bachFemale + metrics.mastFemale;\r\n\r\n            \/\/ RENDER KPI DOM CARD VALUES\r\n            document.getElementById('kpi-total').textContent = metrics.grandTotal.toLocaleString();\r\n            document.getElementById('kpi-total-male').textContent = metrics.grandMale.toLocaleString();\r\n            document.getElementById('kpi-total-female').textContent = metrics.grandFemale.toLocaleString();\r\n\r\n            document.getElementById('kpi-bach').textContent = metrics.bachTotal.toLocaleString();\r\n            document.getElementById('kpi-bach-male').textContent = metrics.bachMale.toLocaleString();\r\n            document.getElementById('kpi-bach-female').textContent = metrics.bachFemale.toLocaleString();\r\n\r\n            document.getElementById('kpi-mast').textContent = metrics.mastTotal.toLocaleString();\r\n            document.getElementById('kpi-mast-male').textContent = metrics.mastMale.toLocaleString();\r\n            document.getElementById('kpi-mast-female').textContent = metrics.mastFemale.toLocaleString();\r\n\r\n            \/\/ RENDER TABLE ROWS\r\n            renderTableRows(filteredBachelors, filteredMasters);\r\n\r\n            \/\/ RENDER UPDATED INTERACTIVE CHARTS\r\n            renderCharts(filteredBachelors, filteredMasters);\r\n        }\r\n\r\n        function renderTableRows(bachelors, masters) {\r\n            const tbody = document.getElementById('table-body');\r\n            tbody.innerHTML = '';\r\n\r\n            if (bachelors.length === 0 && masters.length === 0) {\r\n                tbody.innerHTML = `<tr><td colspan=\"9\" class=\"py-8 text-center text-slate-400 font-medium\">\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e32\u0e02\u0e32\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e04\u0e25\u0e34\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e17\u0e35\u0e48\u0e41\u0e16\u0e1a\u0e02\u0e27\u0e32\u0e21\u0e37\u0e2d<\/td><\/tr>`;\r\n                return;\r\n            }\r\n\r\n            \/\/ Render Level Bachelor rows\r\n            if (bachelors.length > 0) {\r\n                bachelors.forEach(row => {\r\n                    const tr = document.createElement('tr');\r\n                    tr.className = \"hover:bg-slate-50\/80 transition-colors\";\r\n                    tr.innerHTML = `\r\n                        <td class=\"py-3 px-4 font-medium sticky left-0 bg-white shadow-xs\">\r\n                            <span class=\"text-xs bg-orange-100 text-orange-800 font-bold px-1.5 py-0.5 rounded mr-1.5\">\u0e1b.\u0e15\u0e23\u0e35<\/span>\r\n                            ${row.branch}\r\n                        <\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-blue-50\/20\">${row.y1[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y1[0]} | \u0e0d:${row.y1[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-emerald-50\/20\">${row.y2[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y2[0]} | \u0e0d:${row.y2[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-amber-50\/20\">${row.y3[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y3[0]} | \u0e0d:${row.y3[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-purple-50\/20\">${row.y4[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y4[0]} | \u0e0d:${row.y4[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-rose-50\/20\">${row.leftover[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.leftover[0]} | \u0e0d:${row.leftover[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-slate-100\/50 font-medium\">${row.total[0]}<\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-slate-100\/50 font-medium\">${row.total[1]}<\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-orange-50 font-bold text-orange-700\">${row.total[2]}<\/td>\r\n                    `;\r\n                    tbody.appendChild(tr);\r\n                });\r\n            }\r\n\r\n            \/\/ Render Level Master rows\r\n            if (masters.length > 0) {\r\n                masters.forEach(row => {\r\n                    const tr = document.createElement('tr');\r\n                    tr.className = \"hover:bg-slate-50\/80 transition-colors\";\r\n                    tr.innerHTML = `\r\n                        <td class=\"py-3 px-4 font-medium sticky left-0 bg-white shadow-xs\">\r\n                            <span class=\"text-xs bg-purple-100 text-purple-800 font-bold px-1.5 py-0.5 rounded mr-1.5\">\u0e1b.\u0e42\u0e17<\/span>\r\n                            ${row.branch}\r\n                        <\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-blue-50\/20\">${row.y1[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y1[0]} | \u0e0d:${row.y1[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-emerald-50\/20\">${row.y2[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.y2[0]} | \u0e0d:${row.y2[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-3 text-center text-slate-300 bg-slate-50\">-<\/td>\r\n                        <td class=\"py-3 px-3 text-center text-slate-300 bg-slate-50\">-<\/td>\r\n                        <td class=\"py-3 px-3 text-center bg-rose-50\/20\">${row.leftover[2]} <span class=\"block text-[10px] text-slate-400\">\u0e0a:${row.leftover[0]} | \u0e0d:${row.leftover[1]}<\/span><\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-slate-100\/50 font-medium\">${row.total[0]}<\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-slate-100\/50 font-medium\">${row.total[1]}<\/td>\r\n                        <td class=\"py-3 px-4 text-center bg-purple-50 font-bold text-purple-700\">${row.total[2]}<\/td>\r\n                    `;\r\n                    tbody.appendChild(tr);\r\n                });\r\n            }\r\n        }\r\n\r\n        function renderCharts(bachelors, masters) {\r\n            \/\/ Prepare Labels and Totals Data arrays\r\n            let branchLabels = [];\r\n            let branchTotals = [];\r\n            let chartColors = [];\r\n\r\n            bachelors.forEach(b => {\r\n                branchLabels.push(b.branch + \" (\u0e1b.\u0e15\u0e23\u0e35)\");\r\n                branchTotals.push(b.total[2]);\r\n                chartColors.push('#f97316'); \/\/ Orange\r\n            });\r\n\r\n            masters.forEach(m => {\r\n                branchLabels.push(m.branch + \" (\u0e1b.\u0e42\u0e17)\");\r\n                branchTotals.push(m.total[2]);\r\n                chartColors.push('#a855f7'); \/\/ Purple\r\n            });\r\n\r\n            \/\/ 1. Destroy old Bar Chart instance if exists\r\n            if (barChartInstance) barChartInstance.destroy();\r\n            \r\n            const ctxBar = document.getElementById('barChart').getContext('2d');\r\n            barChartInstance = new Chart(ctxBar, {\r\n                type: 'bar',\r\n                data: {\r\n                    labels: branchLabels,\r\n                    datasets: [{\r\n                        label: '\u0e08\u0e33\u0e19\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 (\u0e04\u0e19)',\r\n                        data: branchTotals,\r\n                        backgroundColor: chartColors,\r\n                        borderRadius: 6,\r\n                        borderWidth: 0\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    plugins: { legend: { display: false } },\r\n                    scales: {\r\n                        y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { font: { family: 'kanit' } } },\r\n                        x: { grid: { display: false }, ticks: { font: { family: 'kanit', size: 10 } } }\r\n                    }\r\n                }\r\n            });\r\n\r\n            \/\/ 2. Destroy old Pie Chart instance if exists\r\n            if (pieChartInstance) pieChartInstance.destroy();\r\n\r\n            \/\/ Distinctive beautiful soft color palette for Pie Chart elements\r\n            const pieColors = [\r\n                '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#ec4899', \r\n                '#06b6d4', '#84cc16', '#6366f1', '#14b8a6', '#a855f7', '#64748b'\r\n            ];\r\n\r\n            const ctxPie = document.getElementById('pieChart').getContext('2d');\r\n            pieChartInstance = new Chart(ctxPie, {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: branchLabels,\r\n                    datasets: [{\r\n                        data: branchTotals,\r\n                        backgroundColor: pieColors.slice(0, branchLabels.length),\r\n                        hoverOffset: 4\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true,\r\n                    maintainAspectRatio: false,\r\n                    plugins: {\r\n                        legend: { \r\n                            position: 'bottom',\r\n                            labels: { font: { family: 'kanit', size: 10 }, boxWidth: 12 }\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<p style=\"text-align: right;\">Full screen : <a href=\"http:\/\/www.bit.rmuti.ac.th\/bit\/wp-content\/uploads\/2026\/07\/Student_Dashboard_2569.html\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e40\u0e15\u0e47\u0e21\u0e08\u0e2d<\/a><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-8942\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Dashboard \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23 \u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e21\u0e17\u0e23.\u0e2d\u0e35\u0e2a\u0e32\u0e19 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    \r\n    <script>\r\n        tailwind.config = {\r\n            theme: { extend: { fontFamily: { sans: ['Prompt', 'sans-serif'] } } }\r\n        }\r\n    <\/script>\r\n    <style>\r\n        body { background-color: #F4F7FC; font-family: 'Prompt', sans-serif; }\r\n        ::-webkit-scrollbar { width: 6px; height: 6px; }\r\n        ::-webkit-scrollbar-track { background: #f1f1f1; }\r\n        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n        .active-branch { border-left: 5px solid #FF6B00; background-color: #EFF6FF; font-weight: 600; color: #1E3A8A; }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800 antialiased\">\r\n    <!-- Header -->\r\n    <header class=\"bg-gradient-to-r from-[#0F2042] via-[#1A365D] to-[#2C5282] text-white shadow-md sticky top-0 z-40 px-6 py-4\">\r\n        <div class=\"max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n            <div class=\"flex items-center gap-4\">\r\n                <div class=\"flex items-center gap-4\">\r\n                <div class=\"bg-blue-900 text-amber-500 font-bold p-3 rounded-xl text-xl shadow-inner\">BIT RMUTI<\/div>\r\n                <\/div>\r\n                <div>\r\n                    <h1 class=\"text-xl md:text-2xl font-bold tracking-wide text-white flex items-center gap-2\"> Dashboard \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\r\n                    <\/h1>\r\n                    <p class=\"text-xs md:text-sm text-gray-300 font-light mt-0.5\">\u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e21\u0e17\u0e23.\u0e2d\u0e35\u0e2a\u0e32\u0e19 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e40\u0e02\u0e15\u0e02\u0e2d\u0e19\u0e41\u0e01\u0e48\u0e19<\/p>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"flex items-center gap-2\">\r\n                <button onclick=\"selectBranch('all')\" id=\"btn-all\" class=\"bg-[#FF6B00] hover:bg-orange-600 text-white font-medium text-sm py-2 px-4 rounded-lg shadow transition flex items-center gap-2\">\r\n                    <i class=\"fa-solid fa-chart-pie\"><\/i> \u0e1c\u0e25\u0e23\u0e27\u0e21\u0e17\u0e38\u0e01\u0e2a\u0e32\u0e02\u0e32\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <div class=\"max-w-7xl mx-auto px-4 lg:px-6 py-6 flex flex-col lg:flex-row gap-6\">\r\n        <!-- Main Content -->\r\n        <div class=\"flex-1 space-y-6\">\r\n            <div class=\"bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4\">\r\n                <div>\r\n                    <span class=\"text-xs font-semibold text-[#FF6B00] tracking-wider uppercase bg-orange-50 px-2.5 py-1 rounded-full\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/span>\r\n                    <h2 id=\"current-title\" class=\"text-2xl font-bold text-[#0F2042] mt-2\">\u0e1c\u0e25\u0e23\u0e27\u0e21\u0e17\u0e38\u0e01\u0e2a\u0e32\u0e02\u0e32 \/ \u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/h2>\r\n                <\/div>\r\n                <div class=\"text-sm text-gray-500 bg-gray-50 px-4 py-2 rounded-lg border border-gray-100\">\r\n                    <i class=\"fa-regular fa-calendar-days text-gray-400 mr-1.5\"><\/i> \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e1e\u0e24\u0e29\u0e20\u0e32\u0e04\u0e21 2569\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- KPI Cards -->\r\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between\">\r\n                    <div class=\"space-y-1\">\r\n                        <p class=\"text-xs font-medium text-gray-400 uppercase\">\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n                        <p id=\"kpi-total\" class=\"text-3xl font-extrabold text-[#0F2042]\">76<\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-blue-50 text-blue-600 p-3.5 rounded-xl\"><i class=\"fa-solid fa-users text-2xl\"><\/i><\/div>\r\n                <\/div>\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between\">\r\n                    <div class=\"space-y-1\">\r\n                        <p class=\"text-xs font-medium text-gray-400 uppercase\">\u0e0a\u0e32\u0e22 | \u0e2b\u0e0d\u0e34\u0e07<\/p>\r\n                        <p class=\"text-2xl font-bold text-gray-700\">\r\n                            <span id=\"kpi-male\" class=\"text-blue-600\">0<\/span> <span class=\"text-gray-300 mx-1\">\/<\/span> <span id=\"kpi-female\" class=\"text-pink-500\">0<\/span>\r\n                        <\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-purple-50 text-purple-600 p-3.5 rounded-xl\"><i class=\"fa-solid fa-venus-mars text-2xl\"><\/i><\/div>\r\n                <\/div>\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between\">\r\n                    <div class=\"space-y-1\">\r\n                        <p class=\"text-xs font-medium text-gray-400 uppercase\">\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 | \u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19<\/p>\r\n                        <p class=\"text-2xl font-bold text-gray-700\">\r\n                            <span id=\"kpi-academic\" class=\"text-emerald-600\">0<\/span> <span class=\"text-gray-300 mx-1\">\/<\/span> <span id=\"kpi-support\" class=\"text-amber-600\">0<\/span>\r\n                        <\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-emerald-50 text-emerald-600 p-3.5 rounded-xl\"><i class=\"fa-solid fa-user-graduate text-2xl\"><\/i><\/div>\r\n                <\/div>\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex items-center justify-between\">\r\n                    <div class=\"space-y-1\">\r\n                        <p class=\"text-xs font-medium text-gray-400 uppercase\">\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23<\/p>\r\n                        <p id=\"kpi-ranks\" class=\"text-xl font-bold text-gray-700\">\u0e1c\u0e28.0 | \u0e23\u0e28.0 | \u0e28.0<\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-orange-50 text-[#FF6B00] p-3.5 rounded-xl\"><i class=\"fa-solid fa-award text-2xl\"><\/i><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- New KPI Detail Cards -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                <!-- Academic Breakdown Card -->\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border-l-4 border-emerald-500 border border-gray-100 space-y-3\">\r\n                    <div class=\"flex items-center justify-between\">\r\n                        <h4 class=\"text-sm font-bold text-emerald-800 flex items-center gap-2\">\r\n                            <i class=\"fa-solid fa-briefcase\"><\/i> \u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\r\n                        <\/h4>\r\n                        <span id=\"kpi-aca-total-badge\" class=\"bg-emerald-100 text-emerald-800 text-xs font-bold px-2 py-0.5 rounded-full\">0 \u0e04\u0e19<\/span>\r\n                    <\/div>\r\n                    <div class=\"grid grid-cols-3 gap-2 text-center\">\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23<\/p>\r\n                            <p id=\"kpi-aca-gov\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/p>\r\n                            <p id=\"kpi-aca-emp\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49<\/p>\r\n                            <p id=\"kpi-aca-wage\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Support Breakdown Card -->\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border-l-4 border-amber-500 border border-gray-100 space-y-3\">\r\n                    <div class=\"flex items-center justify-between\">\r\n                        <h4 class=\"text-sm font-bold text-amber-800 flex items-center gap-2\">\r\n                            <i class=\"fa-solid fa-briefcase\"><\/i> \u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\r\n                        <\/h4>\r\n                        <span id=\"kpi-sup-total-badge\" class=\"bg-amber-100 text-amber-800 text-xs font-bold px-2 py-0.5 rounded-full\">0 \u0e04\u0e19<\/span>\r\n                    <\/div>\r\n                    <div class=\"grid grid-cols-3 gap-2 text-center\">\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23<\/p>\r\n                            <p id=\"kpi-sup-gov\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19<\/p>\r\n                            <p id=\"kpi-sup-emp\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                        <div class=\"bg-slate-50 p-2 rounded-lg\">\r\n                            <p class=\"text-[11px] text-gray-400\">\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49<\/p>\r\n                            <p id=\"kpi-sup-wage\" class=\"text-lg font-bold text-slate-700\">0<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Dynamic Sub-Department Banner (Hidden by Default) -->\r\n            <div id=\"sub-department-container\" class=\"hidden bg-white p-6 rounded-xl shadow-sm border border-[#FF6B00]\">\r\n                <div class=\"flex items-center gap-2 mb-4\">\r\n                    <i class=\"fa-solid fa-sitemap text-[#FF6B00] text-xl\"><\/i>\r\n                    <h3 class=\"text-base font-bold text-[#0F2042]\">\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e20\u0e32\u0e22\u0e43\u0e19\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e04\u0e13\u0e1a\u0e14\u0e35\u0e2f<\/h3>\r\n                <\/div>\r\n                <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3\" id=\"sub-department-cards\">\r\n                    <!-- Cards injected dynamically -->\r\n                <\/div>\r\n                <div class=\"h-64 mt-6\">\r\n                    <canvas id=\"chart-sub-dept\"><\/canvas>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Charts -->\r\n            <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex flex-col h-[320px]\">\r\n                    <h3 class=\"text-xs font-semibold text-[#0F2042] mb-3\">\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19 \u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23 : \u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19<\/h3>\r\n                    <div class=\"flex-1 relative\"><canvas id=\"chart-type\"><\/canvas><\/div>\r\n                <\/div>\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex flex-col h-[320px]\">\r\n                    <h3 class=\"text-xs font-semibold text-[#0F2042] mb-3\">\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e49\u0e32\u0e07\u0e07\u0e32\u0e19<\/h3>\r\n                    <div class=\"flex-1 relative\"><canvas id=\"chart-emp-prop\"><\/canvas><\/div>\r\n                <\/div>\r\n                <div class=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex flex-col h-[320px]\">\r\n                    <h3 class=\"text-xs font-semibold text-[#0F2042] mb-3\">\u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e27\u0e38\u0e12\u0e34\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32<\/h3>\r\n                    <div class=\"flex-1 relative\"><canvas id=\"chart-edu\"><\/canvas><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n                <h3 id=\"bar-chart-title\" class=\"text-base font-bold text-[#0F2042] mb-4\">\u0e08\u0e33\u0e19\u0e27\u0e19<\/h3>\r\n                <div class=\"h-72 w-full relative\"><canvas id=\"chart-main\"><\/canvas><\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <!-- Sidebar -->\r\n        <div class=\"w-full lg:w-80 shrink-0\">\r\n            <div class=\"bg-white rounded-xl shadow-sm border border-gray-100 lg:sticky lg:top-[92px]\">\r\n                <div class=\"p-5 border-b border-gray-100 bg-[#0F2042] text-white\">\r\n                    <h3 class=\"font-bold text-sm flex items-center gap-2\"><i class=\"fa-solid fa-list-check text-[#FF6B00]\"><\/i> \u0e04\u0e25\u0e34\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e14\u0e39\u0e2a\u0e32\u0e02\u0e32<\/h3>\r\n                <\/div>\r\n                <nav id=\"sidebar-list\" class=\"p-2 max-h-[700px] overflow-y-auto space-y-1\"><\/nav>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const rawData = [{\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 11, \"\u0e0a\u0e32\u0e22\": 2, \"\u0e2b\u0e0d\u0e34\u0e07\": 9, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 2, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 9, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 7, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 4, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 1, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 8, \"\u0e0a\u0e32\u0e22\": 2, \"\u0e2b\u0e0d\u0e34\u0e07\": 6, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 5, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 3, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 4, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 3, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 1, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 2, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 9, \"\u0e0a\u0e32\u0e22\": 1, \"\u0e2b\u0e0d\u0e34\u0e07\": 8, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 3, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 6, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 6, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 2, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 4, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 11, \"\u0e0a\u0e32\u0e22\": 3, \"\u0e2b\u0e0d\u0e34\u0e07\": 8, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 10, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 1, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 4, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 7, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 1, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e01\u0e32\u0e23\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 7, \"\u0e0a\u0e32\u0e22\": 6, \"\u0e2b\u0e0d\u0e34\u0e07\": 1, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 5, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 2, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 3, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 4, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 1, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e32\u0e02\u0e32\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 9, \"\u0e0a\u0e32\u0e22\": 7, \"\u0e2b\u0e0d\u0e34\u0e07\": 2, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 8, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 1, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 4, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 5, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 0, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 2, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": null}, {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e04\u0e13\u0e1a\u0e14\u0e35\u0e04\u0e13\u0e30\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 21, \"\u0e0a\u0e32\u0e22\": 10, \"\u0e2b\u0e0d\u0e34\u0e07\": 11, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 15, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 0, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 6, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 0, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 5, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 14, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 2, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"sub_departments\": {\"\u0e1d\u0e48\u0e32\u0e22\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\": 8, \"\u0e1d\u0e48\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\": 4, \"\u0e1d\u0e48\u0e32\u0e22\u0e41\u0e1c\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e31\u0e19\u0e04\u0e38\u0e13\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\": 3, \"\u0e1d\u0e48\u0e32\u0e22\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\": 3, \"\u0e07\u0e32\u0e19\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\u0e28\u0e36\u0e01\u0e29\u0e32\": 1, \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28\u0e14\u0e49\u0e32\u0e19\u0e1e\u0e32\u0e13\u0e34\u0e0a\u0e22\u0e4c\u0e2f\": 1}}];\r\n        const totalCalculated = {\"\u0e2a\u0e32\u0e02\u0e32\": \"\u0e23\u0e27\u0e21\u0e17\u0e38\u0e01\u0e2a\u0e32\u0e02\u0e32\/\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\", \"\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\": 76, \"\u0e0a\u0e32\u0e22\": 30, \"\u0e2b\u0e0d\u0e34\u0e07\": 46, \"\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 10, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 38, \"\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 15, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)\": 4, \"\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)\": 6, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01\": 28, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17\": 30, \"\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 15, \"\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35\": 2, \"\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 9, \"\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0, \"\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c\": 0};\r\n\r\n        let typeChart, empPropChart, eduChart, mainChart, subDeptChart;\r\n\r\n        function renderSidebar() {\r\n            const listContainer = document.getElementById('sidebar-list');\r\n            rawData.forEach((item, index) => {\r\n                const btn = document.createElement('button');\r\n                btn.id = `branch-item-${index}`;\r\n                btn.className = 'w-full text-left p-3 rounded-lg hover:bg-gray-50 text-xs transition flex justify-between items-center text-gray-700 group';\r\n                btn.onclick = () => selectBranch(index);\r\n                btn.innerHTML = `\r\n                    <div class=\"flex items-center gap-2 truncate pr-2\">\r\n                        <i class=\"fa-solid fa-chevron-right text-[10px] text-gray-300\"><\/i>\r\n                        <span class=\"truncate font-medium\">${item['\u0e2a\u0e32\u0e02\u0e32']}<\/span>\r\n                    <\/div>\r\n                    <span class=\"bg-slate-100 text-slate-700 font-bold text-[10px] px-2 py-0.5 rounded-full\">${item['\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23']}<\/span>\r\n                `;\r\n                listContainer.appendChild(btn);\r\n            });\r\n        }\r\n\r\n        function selectBranch(target) {\r\n            rawData.forEach((_, idx) => {\r\n                const el = document.getElementById(`branch-item-${idx}`);\r\n                if(el) el.classList.remove('active-branch');\r\n            });\r\n            const btnAll = document.getElementById('btn-all');\r\n            \r\n            let dataObj = null;\r\n            if (target === 'all') {\r\n                dataObj = totalCalculated;\r\n                btnAll.classList.replace('bg-slate-700', 'bg-[#FF6B00]');\r\n                document.getElementById('current-title').innerText = \"\u0e2a\u0e32\u0e02\u0e32 : \u0e41\u0e1c\u0e19\u0e01\/\u0e1d\u0e48\u0e32\u0e22 \";\r\n                document.getElementById('sub-department-container').classList.add('hidden');\r\n            } else {\r\n                dataObj = rawData[target];\r\n                document.getElementById(`branch-item-${target}`).classList.add('active-branch');\r\n                btnAll.classList.replace('bg-[#FF6B00]', 'bg-slate-700');\r\n                document.getElementById('current-title').innerText = `\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14: ${dataObj['\u0e2a\u0e32\u0e02\u0e32']}`;\r\n                \r\n                \/\/ Show Sub-departments if they exist\r\n                const subDeptContainer = document.getElementById('sub-department-container');\r\n                if (dataObj.sub_departments) {\r\n                    subDeptContainer.classList.remove('hidden');\r\n                    renderSubDepartments(dataObj.sub_departments);\r\n                } else {\r\n                    subDeptContainer.classList.add('hidden');\r\n                }\r\n            }\r\n\r\n            updateMetrics(dataObj);\r\n            renderCharts(dataObj, target === 'all');\r\n        }\r\n\r\n        function renderSubDepartments(subDepts) {\r\n            const container = document.getElementById('sub-department-cards');\r\n            container.innerHTML = '';\r\n            const labels = Object.keys(subDepts);\r\n            const dataCounts = Object.values(subDepts);\r\n            \r\n            \/\/ Build small cards\r\n            labels.forEach((label, i) => {\r\n                container.innerHTML += `\r\n                    <div class=\"bg-orange-50 border border-orange-100 rounded-lg p-3 text-center flex flex-col justify-between\">\r\n                        <span class=\"text-[10px] text-orange-800 font-medium leading-tight mb-2\">${label}<\/span>\r\n                        <span class=\"text-xl font-black text-[#FF6B00]\">${dataCounts[i]} <span class=\"text-xs font-normal text-gray-500\">\u0e04\u0e19<\/span><\/span>\r\n                    <\/div>\r\n                `;\r\n            });\r\n\r\n            \/\/ Build Sub Dept Bar Chart\r\n            if(subDeptChart) subDeptChart.destroy();\r\n            const ctx = document.getElementById('chart-sub-dept').getContext('2d');\r\n            subDeptChart = new Chart(ctx, {\r\n                type: 'bar',\r\n                data: {\r\n                    labels: labels,\r\n                    datasets: [{\r\n                        label: '\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23 (\u0e04\u0e19)',\r\n                        data: dataCounts,\r\n                        backgroundColor: '#FF6B00',\r\n                        borderRadius: 4\r\n                    }]\r\n                },\r\n                options: {\r\n                    responsive: true, maintainAspectRatio: false,\r\n                    plugins: { legend: { display: false } },\r\n                    scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { ticks: { font: { family: 'Prompt', size: 9 } } } }\r\n                }\r\n            });\r\n        }\r\n\r\n        function updateMetrics(dataObj) {\r\n            const acaGov = dataObj['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'];\r\n            const acaEmp = dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'];\r\n            const acaWage = dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'];\r\n            const acaTotal = acaGov + acaEmp + acaWage;\r\n\r\n            const supGov = 0; \/\/ Not explicitly defined, but inferred 0 in dataset generally for support gov\r\n            const supEmp = dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'];\r\n            const supWage = dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'];\r\n            const supTotal = supGov + supEmp + supWage;\r\n\r\n            document.getElementById('kpi-total').innerText = dataObj['\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23'];\r\n            document.getElementById('kpi-male').innerText = dataObj['\u0e0a\u0e32\u0e22'];\r\n            document.getElementById('kpi-female').innerText = dataObj['\u0e2b\u0e0d\u0e34\u0e07'];\r\n            document.getElementById('kpi-academic').innerText = acaTotal;\r\n            document.getElementById('kpi-support').innerText = supTotal;\r\n            document.getElementById('kpi-ranks').innerText = `\u0e1c\u0e28. ${dataObj['\u0e1c\u0e39\u0e49\u0e0a\u0e48\u0e27\u0e22\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c']} \/ \u0e23\u0e28. ${dataObj['\u0e23\u0e2d\u0e07\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c']} \/ \u0e28. ${dataObj['\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e32\u0e08\u0e32\u0e23\u0e22\u0e4c']}`;\r\n\r\n            document.getElementById('kpi-aca-total-badge').innerText = `${acaTotal} \u0e04\u0e19`;\r\n            document.getElementById('kpi-aca-gov').innerText = acaGov;\r\n            document.getElementById('kpi-aca-emp').innerText = acaEmp;\r\n            document.getElementById('kpi-aca-wage').innerText = acaWage;\r\n\r\n            document.getElementById('kpi-sup-total-badge').innerText = `${supTotal} \u0e04\u0e19`;\r\n            document.getElementById('kpi-sup-gov').innerText = supGov;\r\n            document.getElementById('kpi-sup-emp').innerText = supEmp;\r\n            document.getElementById('kpi-sup-wage').innerText = supWage;\r\n        }\r\n\r\n        function renderCharts(dataObj, isAll) {\r\n            const acaSum = dataObj['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'] + dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'] + dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'];\r\n            const supSum = dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'] + dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'];\r\n\r\n            if(typeChart) typeChart.destroy();\r\n            typeChart = new Chart(document.getElementById('chart-type'), {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23', '\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19'],\r\n                    datasets: [{ data: [acaSum, supSum], backgroundColor: ['#10B981', '#F59E0B'] }]\r\n                },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }\r\n            });\r\n\r\n            const gov = dataObj['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)']; \/\/ Total gov\r\n            const emp = dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'] + dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'];\r\n            const wage = dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'] + dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'];\r\n            \r\n            if(empPropChart) empPropChart.destroy();\r\n            empPropChart = new Chart(document.getElementById('chart-emp-prop'), {\r\n                type: 'pie',\r\n                data: {\r\n                    labels: ['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23', '\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2f', '\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49'],\r\n                    datasets: [{ data: [gov, emp, wage], backgroundColor: ['#4F46E5', '#3B82F6', '#EF4444'] }]\r\n                },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }\r\n            });\r\n\r\n            if(eduChart) eduChart.destroy();\r\n            eduChart = new Chart(document.getElementById('chart-edu'), {\r\n                type: 'doughnut',\r\n                data: {\r\n                    labels: ['\u0e1b.\u0e40\u0e2d\u0e01', '\u0e1b.\u0e42\u0e17', '\u0e1b.\u0e15\u0e23\u0e35', '\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32 \u0e1b.\u0e15\u0e23\u0e35'],\r\n                    datasets: [{ data: [dataObj['\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e40\u0e2d\u0e01'], dataObj['\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e42\u0e17'], dataObj['\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35'], dataObj['\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e23\u0e34\u0e0d\u0e0d\u0e32\u0e15\u0e23\u0e35']], backgroundColor: ['#6366F1', '#3B82F6', '#EC4899', '#94A3B8'] }]\r\n                },\r\n                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } }\r\n            });\r\n\r\n            if(mainChart) mainChart.destroy();\r\n            const ctxMain = document.getElementById('chart-main');\r\n            if(isAll) {\r\n                mainChart = new Chart(ctxMain, {\r\n                    type: 'bar',\r\n                    data: {\r\n                        labels: rawData.map(d => d['\u0e2a\u0e32\u0e02\u0e32']),\r\n                        datasets: [{ label: '\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23', data: rawData.map(d => d['\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23']), backgroundColor: '#3B82F6', borderRadius: 4 }]\r\n                    },\r\n                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { callback: function(val) { let lab = this.getLabelForValue(val); return lab.length > 15 ? lab.substr(0,15)+'...' : lab; } } } } }\r\n                });\r\n            } else {\r\n                mainChart = new Chart(ctxMain, {\r\n                    type: 'bar',\r\n                    data: {\r\n                        labels: ['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)', '\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19(\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)', '\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)', '\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19(\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)', '\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'],\r\n                        datasets: [{\r\n                            label: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1e\u0e25',\r\n                            data: [\r\n                                dataObj['\u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'], dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'], dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23)'],\r\n                                dataObj['\u0e1e\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e43\u0e19\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e2d\u0e38\u0e14\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)'], dataObj['\u0e25\u0e39\u0e01\u0e08\u0e49\u0e32\u0e07\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e22\u0e44\u0e14\u0e49(\u0e2a\u0e32\u0e22\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19)']\r\n                            ],\r\n                            backgroundColor: ['#4F46E5', '#3B82F6', '#10B981', '#F59E0B', '#EF4444'], borderRadius: 4\r\n                        }]\r\n                    },\r\n                    options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }\r\n                });\r\n            }\r\n        }\r\n\r\n        window.onload = function() {\r\n            renderSidebar();\r\n            selectBranch('all');\r\n        };\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<p style=\"text-align: right;\">Full screen : <a href=\"http:\/\/www.bit.rmuti.ac.th\/bit\/wp-content\/uploads\/2026\/07\/dashboard_personnel.html\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e40\u0e15\u0e47\u0e21\u0e08\u0e2d<\/a><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-8943\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><p><iframe loading=\"lazy\" title=\"\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23_2\" src=\"https:\/\/app.powerbi.com\/view?r=eyJrIjoiN2Q3MTgzZDktZTM0OC00MjdhLWFlMzgtNzg2YjZmYzM1MDdmIiwidCI6IjczM2UyY2UwLWNlMjgtNGRmYS04YWY2LWFkNTdiMzcwOTBjZSIsImMiOjEwfQ%3D%3D\" width=\"1140\" height=\"541.25\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-8944\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><p><iframe loading=\"lazy\" title=\"\u0e07\u0e32\u0e19\u0e27\u0e34\u0e08\u0e31\u0e22\u0e17\u0e35\u0e48\u0e15\u0e35\u0e1e\u0e34\u0e21\u0e1e\u0e4c\" src=\"https:\/\/app.powerbi.com\/view?r=eyJrIjoiNjU0NWVlZTAtNGJmYS00ZjZlLTkyNjYtMTU2MTIwNWUzMjhiIiwidCI6IjczM2UyY2UwLWNlMjgtNGRmYS04YWY2LWFkNTdiMzcwOTBjZSIsImMiOjEwfQ%3D%3D\" width=\"1140\" height=\"541.25\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-8945\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><p><iframe loading=\"lazy\" src=\"https:\/\/lookerstudio.google.com\/embed\/reporting\/6c45df70-126f-4da4-891b-2aaf0a3f6a09\/page\/f6R5D\" width=\"1140\" height=\"541.25\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3681","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3681"}],"version-history":[{"count":2,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3681\/revisions"}],"predecessor-version":[{"id":3683,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3681\/revisions\/3683"}],"wp:attachment":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}