Dashboard \u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 2569 | \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=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Kanit', sans-serif; background-color: #f8fafc; }\r\n .custom-scrollbar::-webkit-scrollbar { height: 8px; width: 6px; }\r\n .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n .sticky-col { position: sticky; left: 0; z-index: 20; background-color: #ffffff; border-right: 1px solid #e2e8f0; }\r\n .sticky-header { position: sticky; left: 0; z-index: 30; background-color: #f1f5f9; border-right: 1px solid #e2e8f0; }\r\n th, td { white-space: nowrap; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-slate-800 antialiased p-4 md:p-6\">\r\n\r\n <div class=\"max-w-[1800px] mx-auto space-y-6\">\r\n \r\n <header class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"bg-blue-800 text-amber-400 font-bold p-3 rounded-xl text-2xl shadow-inner\">BIT RMUTI<\/div>\r\n <div>\r\n <h1 class=\"text-2xl font-bold text-slate-900\">Dashboard \u0e2a\u0e23\u0e38\u0e1b\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569<\/h1>\r\n <p class=\"text-slate-500 text-sm mt-1\">\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=\"bg-blue-50 px-5 py-3 rounded-xl border border-blue-100 shadow-sm flex items-center gap-4\">\r\n <div>\r\n <p class=\"text-xs text-blue-600 font-medium uppercase\">\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <p class=\"text-2xl font-bold text-blue-800 leading-none mt-1\"><span id=\"kpi-total-reg\">0<\/span> <span class=\"text-sm font-normal text-blue-600\">\u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 xl:grid-cols-5 gap-6\">\r\n \r\n <div class=\"xl:col-span-4 space-y-6\">\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4\">\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-blue-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <h3 id=\"kpi-total-plan\" class=\"text-2xl font-bold text-blue-700 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-indigo-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <h3 id=\"kpi-total-apply\" class=\"text-2xl font-bold text-indigo-700 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-teal-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34)<\/p>\r\n <h3 id=\"kpi-reg-regular\" class=\"text-2xl font-bold text-teal-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-amber-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)<\/p>\r\n <h3 id=\"kpi-reg-transfer\" class=\"text-2xl font-bold text-amber-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-purple-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15)<\/p>\r\n <h3 id=\"kpi-reg-master\" class=\"text-2xl font-bold text-purple-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 md:col-span-2\">\r\n <h3 class=\"text-base font-bold text-slate-800 mb-4\">\ud83d\udcca \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23 \u0e41\u0e25\u0e30\u0e08\u0e33\u0e19\u0e27\u0e19\u0e01\u0e32\u0e23\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e41\u0e22\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/h3>\r\n <div class=\"relative h-[300px]\">\r\n <canvas id=\"barChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\">\r\n <h3 class=\"text-base font-bold text-slate-800 mb-4\">\ud83e\udd67 \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/h3>\r\n <div class=\"relative h-[250px] flex justify-center items-center\">\r\n <canvas id=\"pieChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\">\r\n <div class=\"p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center\">\r\n <h3 class=\"text-base font-bold text-slate-800\">\ud83d\udccb \u0e15\u0e32\u0e23\u0e32\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (\u0e41\u0e1c\u0e19\/\u0e2a\u0e21\u0e31\u0e04\u0e23\/\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19)<\/h3>\r\n <span id=\"showing-text\" class=\"text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full font-medium\">\u0e41\u0e2a\u0e14\u0e07: \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\r\n <\/div>\r\n <div class=\"overflow-x-auto custom-scrollbar pb-4\">\r\n <table class=\"w-full text-xs text-center border-collapse\">\r\n <thead class=\"bg-slate-100 text-slate-700 font-semibold border-b-2 border-slate-300\">\r\n <tr>\r\n <th rowspan=\"2\" class=\"px-4 py-3 sticky-header shadow-[1px_0_5px_rgba(0,0,0,0.05)] text-left w-72\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/th>\r\n <th rowspan=\"2\" class=\"px-3 py-3 border-x border-slate-300 bg-blue-100 text-blue-900\">\u0e1c\u0e25\u0e23\u0e27\u0e21\u0e41\u0e1c\u0e19<br>\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/th>\r\n <th rowspan=\"2\" class=\"px-3 py-3 border-r border-slate-300 bg-indigo-100 text-indigo-900\">\u0e22\u0e2d\u0e14\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23<br>\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-blue-50 text-blue-800\">\u0e42\u0e04\u0e27\u0e15\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e35<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-emerald-50 text-emerald-800\">\u0e42\u0e04\u0e27\u0e15\u0e32\u0e01\u0e35\u0e2c\u0e32\/\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 3<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e31\u0e1a\u0e15\u0e23\u0e07 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e31\u0e1a\u0e15\u0e23\u0e07 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-pink-50 text-pink-800\">\u0e17\u0e38\u0e19\u0e14\u0e31\u0e0a\u0e21\u0e34\u0e25\u0e25\u0e4c<\/th>\r\n <th rowspan=\"2\" class=\"px-4 py-3 border-l-2 border-slate-300 bg-slate-800 text-white font-bold text-sm\">\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<br>\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2a\u0e32\u0e02\u0e32<\/th>\r\n <\/tr>\r\n <tr class=\"text-[11px] text-slate-500 bg-slate-50 border-b border-slate-200\">\r\n <th class=\"p-2 border-x border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"table-body\" class=\"divide-y divide-slate-200 text-slate-700\">\r\n <\/tbody>\r\n <tfoot class=\"bg-slate-200 text-slate-900 font-bold border-t-2 border-slate-400\">\r\n <tr id=\"table-footer\">\r\n <\/tr>\r\n <\/tfoot>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"xl:col-span-1\">\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 sticky top-6\">\r\n <div class=\"flex justify-between items-center mb-4 border-b border-slate-100 pb-3\">\r\n <h4 class=\"text-base font-bold text-slate-900\">\ud83d\udd0d \u0e41\u0e22\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e32\u0e02\u0e32<\/h4>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-2 mb-5 text-xs\">\r\n <button onclick=\"toggleAll(true)\" class=\"py-2 bg-blue-50 text-blue-700 font-semibold rounded-lg hover:bg-blue-100 transition shadow-sm border border-blue-100\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n <button onclick=\"toggleAll(false)\" class=\"py-2 bg-slate-100 text-slate-600 font-semibold rounded-lg hover:bg-slate-200 transition shadow-sm border border-slate-200\">\u0e25\u0e49\u0e32\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 max-h-[800px] overflow-y-auto custom-scrollbar pr-2\">\r\n \r\n <div>\r\n <div class=\"text-[12px] font-bold text-amber-700 mb-2 bg-amber-50 py-1.5 px-3 rounded-md border border-amber-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 \u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19<\/div>\r\n <div id=\"filter-transfer\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"pt-2\">\r\n <div class=\"text-[12px] font-bold text-teal-700 mb-2 bg-teal-50 py-1.5 px-3 rounded-md border border-teal-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34<\/div>\r\n <div id=\"filter-regular\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-2\">\r\n <div class=\"text-[12px] font-bold text-purple-700 mb-2 bg-purple-50 py-1.5 px-3 rounded-md border border-purple-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 \u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15<\/div>\r\n <div id=\"filter-master\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 Data Source \u0e2a\u0e01\u0e31\u0e14\u0e08\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c Excel \u0e17\u0e35\u0e48\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e21\u0e32 + \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\r\n \/\/ Array structure = [\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a, \u0e2a\u0e21\u0e31\u0e04\u0e23, \u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19]\r\n const dataset = [\r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 \u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19 ---\r\n { id: \"t1\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BAC (T)\", \r\n planTotal: 105, regTotal: 91,\r\n qg: [10,21,19], qs: [5,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [90,63,53], d2: [20,15,15], ad1: [0,0,0], ad2: [0,0,0], dm: [10,12,4] },\r\n { id: \"t2\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BMG (T)\", \r\n planTotal: 35, regTotal: 39,\r\n qg: [3,0,0], qs: [2,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [30,27,22], d2: [15,24,17], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t3\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BIS (T)\", \r\n planTotal: 70, regTotal: 74,\r\n qg: [30,13,6], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [40,78,55], d2: [5,33,13], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t4\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BMK (T)\", \r\n planTotal: 35, regTotal: 27,\r\n qg: [13,6,6], qs: [2,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [20,13,10], d2: [25,14,10], ad1: [10,2,1], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t5\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2a\u0e15\u0e32\u0e23\u0e4c\u0e17\u0e2d\u0e31\u0e1e\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 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BTH (T)\", \r\n planTotal: 35, regTotal: 7,\r\n qg: [10,0,0], qs: [5,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [20,7,4], d2: [35,4,3], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t6\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BLM (T)\", \r\n planTotal: 35, regTotal: 37,\r\n qg: [5,10,8], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [30,25,15], d2: [15,16,14], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n \r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34 ---\r\n { id: \"r1\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BAC (R)\", \r\n planTotal: 70, regTotal: 71,\r\n qg: [0,0,0], qs: [0,0,0], t1: [10,30,14], t2: [20,40,16], t3: [5,5,4], d1: [35,42,31], d2: [0,0,0], ad1: [5,16,6], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r2\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMG (R)\", \r\n planTotal: 105, regTotal: 116,\r\n qg: [6,16,10], qs: [4,0,0], t1: [25,16,12], t2: [20,10,7], t3: [35,17,14], d1: [30,58,32], d2: [10,72,41], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r3\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BIS (R)\", \r\n planTotal: 70, regTotal: 74,\r\n qg: [5,6,5], qs: [0,0,0], t1: [5,4,1], t2: [10,18,7], t3: [20,16,14], d1: [45,54,33], d2: [5,85,14], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r4\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 - \u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMK-M (R)\", \r\n planTotal: 35, regTotal: 40,\r\n qg: [3,27,10], qs: [2,1,0], t1: [10,17,13], t2: [10,7,4], t3: [5,4,4], d1: [5,75,9], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r5\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 - \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMK-D (R)\", \r\n planTotal: 35, regTotal: 37,\r\n qg: [3,14,8], qs: [2,3,0], t1: [10,15,5], t2: [10,8,5], t3: [15,13,11], d1: [5,72,8], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r6\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2a\u0e15\u0e32\u0e23\u0e4c\u0e17\u0e2d\u0e31\u0e1e\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BTH (R)\", \r\n planTotal: 70, regTotal: 66,\r\n qg: [5,1,1], qs: [5,1,0], t1: [15,12,7], t2: [5,11,7], t3: [30,18,12], d1: [10,5,3], d2: [25,52,28], ad1: [10,7,5], ad2: [10,3,3], dm: [0,0,0] },\r\n { id: \"r7\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BLM (R)\", \r\n planTotal: 105, regTotal: 108,\r\n qg: [2,3,2], qs: [3,5,3], t1: [10,42,17], t2: [40,61,38], t3: [40,37,33], d1: [10,12,5], d2: [0,0,0], ad1: [10,17,10], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r8\", name: \"\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BML (R)\", \r\n planTotal: 30, regTotal: 26,\r\n qg: [5,4,2], qs: [0,0,0], t1: [2,0,0], t2: [3,1,0], t3: [10,2,1], d1: [15,14,9], d2: [15,14,9], ad1: [15,4,2], ad2: [15,3,3], dm: [0,0,0] },\r\n { id: \"r9\", name: \"\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"IBM (R)\", \r\n planTotal: 30, regTotal: 26,\r\n qg: [1,3,0], qs: [1,0,0], t1: [5,2,0], t2: [5,3,0], t3: [15,5,2], d1: [13,25,12], d2: [5,22,6], ad1: [10,5,3], ad2: [10,5,3], dm: [0,0,0] },\r\n { id: \"r10\", name: \"\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 (\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e08\u0e35\u0e19)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BML-C (R)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [5,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [0,0,0], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n\r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 \u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e2d\u0e34\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e31\u0e49\u0e07\u0e15\u0e49\u0e19) ---\r\n { id: \"m1\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e1a\u0e0a.\u0e21.) - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e41\u0e1c\u0e19 1.2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"M.Acc (1.2)\", \r\n planTotal: 5, regTotal: 1,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,1,1], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m2\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e1a\u0e0a.\u0e21.) - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e41\u0e1c\u0e19 2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"M.Acc (2)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m3\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e41\u0e1c\u0e19 1.2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"MBA (1.2)\", \r\n planTotal: 5, regTotal: 2,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,1,0], d2: [5,2,2], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m4\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e41\u0e1c\u0e19 2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"MBA (2)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] }\r\n ];\r\n\r\n let barChart, pieChart;\r\n\r\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderCheckboxes();\r\n initCharts();\r\n updateDashboard();\r\n });\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Checkboxes \u0e14\u0e49\u0e32\u0e19\u0e02\u0e27\u0e32\r\n function renderCheckboxes() {\r\n const trContainer = document.getElementById('filter-transfer');\r\n const regContainer = document.getElementById('filter-regular');\r\n const masterContainer = document.getElementById('filter-master');\r\n \r\n dataset.forEach(item => {\r\n const label = document.createElement('label');\r\n label.className = \"flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer text-[11px] xl:text-xs transition border border-transparent hover:border-slate-200\";\r\n label.innerHTML = `\r\n <input type=\"checkbox\" value=\"${item.id}\" checked onchange=\"updateDashboard()\" class=\"branch-cb w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 mt-0.5\">\r\n <span class=\"font-medium text-slate-700 leading-snug select-none\">${item.name}<\/span>\r\n `;\r\n \r\n if (item.type === \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\") trContainer.appendChild(label);\r\n else if (item.type === \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\") regContainer.appendChild(label);\r\n else if (item.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") masterContainer.appendChild(label);\r\n });\r\n }\r\n\r\n function toggleAll(isChecked) {\r\n document.querySelectorAll('.branch-cb').forEach(cb => cb.checked = isChecked);\r\n updateDashboard();\r\n }\r\n\r\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Graph \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\r\n function initCharts() {\r\n Chart.defaults.font.family = \"'Kanit', sans-serif\";\r\n \r\n \/\/ Bar Chart\r\n const ctxBar = document.getElementById('barChart').getContext('2d');\r\n barChart = new Chart(ctxBar, {\r\n type: 'bar',\r\n data: { labels: [], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { \r\n legend: { position: 'top', labels: { boxWidth: 12, font: { size: 12 } } },\r\n tooltip: { padding: 10 }\r\n },\r\n scales: { \r\n x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45, minRotation: 45 } },\r\n y: { beginAtZero: true, border: { dash: [4, 4] } }\r\n }\r\n }\r\n });\r\n\r\n \/\/ Pie Chart\r\n const ctxPie = document.getElementById('pieChart').getContext('2d');\r\n pieChart = new Chart(ctxPie, {\r\n type: 'doughnut',\r\n data: { labels: ['4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34', '\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19', '\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15'], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { \r\n legend: { position: 'bottom', labels: { boxWidth: 12, padding: 10, font: { size: 12 } } }\r\n },\r\n cutout: '55%'\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e15\u0e32\u0e23\u0e32\u0e07 \u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21 \u0e41\u0e25\u0e30\u0e01\u0e23\u0e32\u0e1f\u0e41\u0e1a\u0e1a Real-time\r\n function updateDashboard() {\r\n const checkedIds = Array.from(document.querySelectorAll('.branch-cb:checked')).map(cb => cb.value);\r\n const filteredData = dataset.filter(d => checkedIds.includes(d.id));\r\n\r\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e30\u0e2a\u0e21\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21\r\n let totals = {\r\n planTotal: 0, applyTotal: 0, regTotal: 0, \r\n regRegular: 0, regTransfer: 0, regMaster: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], \r\n d1: [0,0,0], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0]\r\n };\r\n\r\n const tbody = document.getElementById('table-body');\r\n tbody.innerHTML = '';\r\n\r\n if (filteredData.length === 0) {\r\n tbody.innerHTML = `<tr><td colspan=\"33\" class=\"px-4 py-8 text-center text-slate-400 font-medium text-sm\">\u274c \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e34\u0e4a\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 1 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e08\u0e32\u0e01\u0e41\u0e1c\u0e07\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07\u0e14\u0e49\u0e32\u0e19\u0e02\u0e27\u0e32<\/td><\/tr>`;\r\n } else {\r\n filteredData.forEach(row => {\r\n \/\/ \u0e04\u0e33\u0e19\u0e27\u0e13\u0e22\u0e2d\u0e14\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e23\u0e27\u0e21\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e35\u0e49 (\u0e14\u0e36\u0e07 Index \u0e17\u0e35\u0e48 1 \u0e08\u0e32\u0e01\u0e17\u0e38\u0e01\u0e46 \u0e23\u0e2d\u0e1a\u0e21\u0e32\u0e23\u0e27\u0e21\u0e01\u0e31\u0e19)\r\n let rowApplyTotal = row.qg[1] + row.qs[1] + row.t1[1] + row.t2[1] + row.t3[1] + row.d1[1] + row.d2[1] + row.ad1[1] + row.ad2[1] + row.dm[1];\r\n\r\n \/\/ Update Totals\r\n totals.planTotal += row.planTotal;\r\n totals.applyTotal += rowApplyTotal;\r\n totals.regTotal += row.regTotal;\r\n if (row.type === \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\") totals.regRegular += row.regTotal;\r\n if (row.type === \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\") totals.regTransfer += row.regTotal;\r\n if (row.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") totals.regMaster += row.regTotal;\r\n\r\n \/\/ Helper for summing array columns\r\n const addArr = (key) => { for(let i=0; i<3; i++) totals[key][i] += row[key][i]; };\r\n addArr('qg'); addArr('qs'); addArr('t1'); addArr('t2'); addArr('t3'); \r\n addArr('d1'); addArr('d2'); addArr('ad1'); addArr('ad2'); addArr('dm');\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Helper function \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e33 Cell \u0e43\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07\r\n const makeCells = (arr, isBg) => `\r\n <td class=\"p-2 border-x ${isBg ? 'bg-slate-50' : 'border-slate-200'}\">${arr[0]}<\/td>\r\n <td class=\"p-2 border-r ${isBg ? 'bg-slate-50' : 'border-slate-200'} font-medium text-indigo-500\">${arr[1]}<\/td>\r\n <td class=\"p-2 border-r ${isBg ? 'bg-slate-50' : 'border-slate-300'} font-semibold text-emerald-600\">${arr[2]}<\/td>\r\n `;\r\n\r\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e22\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e43\u0e2b\u0e49\u0e21\u0e2d\u0e07\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\r\n let bgRowClass = \"hover:bg-blue-50\/50 transition bg-white\";\r\n if(row.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") bgRowClass = \"hover:bg-purple-50\/50 transition bg-purple-50\/20\";\r\n\r\n const tr = document.createElement('tr');\r\n tr.className = bgRowClass;\r\n tr.innerHTML = `\r\n <td class=\"px-4 py-3 font-medium text-slate-800 sticky-col text-left\">${row.name}<\/td>\r\n <td class=\"px-3 py-3 border-x border-slate-300 font-bold bg-blue-50 text-blue-800\">${row.planTotal}<\/td>\r\n <td class=\"px-3 py-3 border-r border-slate-300 font-bold bg-indigo-50 text-indigo-700\">${rowApplyTotal}<\/td>\r\n ${makeCells(row.qg, false)} ${makeCells(row.qs, false)}\r\n ${makeCells(row.t1, false)} ${makeCells(row.t2, false)} ${makeCells(row.t3, false)}\r\n ${makeCells(row.d1, false)} ${makeCells(row.d2, false)} ${makeCells(row.ad1, false)} ${makeCells(row.ad2, false)}\r\n ${makeCells(row.dm, false)}\r\n <td class=\"px-4 py-3 border-l-2 border-slate-300 font-bold text-sm bg-slate-100 text-slate-900\">${row.regTotal}<\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n \/\/ \u0e40\u0e23\u0e19\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e22\u0e2d\u0e14\u0e2a\u0e23\u0e38\u0e1b\u0e15\u0e32\u0e23\u0e32\u0e07 (Table Footer)\r\n const makeFoot = (arr) => `\r\n <td class=\"p-2 border-x border-slate-300 text-slate-600\">${arr[0]}<\/td>\r\n <td class=\"p-2 border-r border-slate-300 text-indigo-600 font-normal\">${arr[1]}<\/td>\r\n <td class=\"p-2 border-r border-slate-400 text-emerald-700 text-[13px] font-bold\">${arr[2]}<\/td>\r\n `;\r\n \r\n document.getElementById('table-footer').innerHTML = `\r\n <td class=\"px-4 py-3 sticky-col bg-slate-200 text-left shadow-[1px_0_5px_rgba(0,0,0,0.05)]\">\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (${filteredData.length} \u0e2a\u0e32\u0e02\u0e32)<\/td>\r\n <td class=\"px-3 py-3 border-x border-slate-400 font-extrabold text-blue-800 bg-blue-200\">${totals.planTotal}<\/td>\r\n <td class=\"px-3 py-3 border-r border-slate-400 font-extrabold text-indigo-800 bg-indigo-200\">${totals.applyTotal}<\/td>\r\n ${makeFoot(totals.qg)} ${makeFoot(totals.qs)}\r\n ${makeFoot(totals.t1)} ${makeFoot(totals.t2)} ${makeFoot(totals.t3)}\r\n ${makeFoot(totals.d1)} ${makeFoot(totals.d2)} ${makeFoot(totals.ad1)} ${makeFoot(totals.ad2)}\r\n ${makeFoot(totals.dm)}\r\n <td class=\"px-4 py-3 border-l-2 border-slate-400 font-black text-base bg-emerald-200 text-emerald-900\">${totals.regTotal}<\/td>\r\n `;\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15 KPI Cards \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\r\n document.getElementById('kpi-total-reg').innerText = totals.regTotal.toLocaleString();\r\n document.getElementById('kpi-total-plan').innerText = totals.planTotal.toLocaleString();\r\n document.getElementById('kpi-total-apply').innerText = totals.applyTotal.toLocaleString();\r\n document.getElementById('kpi-reg-regular').innerText = totals.regRegular.toLocaleString();\r\n document.getElementById('kpi-reg-transfer').innerText = totals.regTransfer.toLocaleString();\r\n document.getElementById('kpi-reg-master').innerText = totals.regMaster.toLocaleString();\r\n document.getElementById('showing-text').innerText = `\u0e01\u0e33\u0e25\u0e31\u0e07\u0e41\u0e2a\u0e14\u0e07: ${filteredData.length} \/ 20 \u0e2a\u0e32\u0e02\u0e32`;\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e01\u0e23\u0e32\u0e1f\u0e41\u0e17\u0e48\u0e07 (Bar Chart)\r\n barChart.data.labels = filteredData.map(d => d.code);\r\n barChart.data.datasets = [\r\n { \r\n label: '\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14', \r\n data: filteredData.map(d => d.planTotal), \r\n backgroundColor: '#3b82f6', \r\n borderRadius: 4, barPercentage: 0.7 \r\n },\r\n { \r\n label: '\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e08\u0e23\u0e34\u0e07', \r\n data: filteredData.map(d => d.regTotal), \r\n backgroundColor: '#10b981', \r\n borderRadius: 4, barPercentage: 0.7 \r\n }\r\n ];\r\n barChart.update();\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e01\u0e23\u0e32\u0e1f\u0e27\u0e07\u0e01\u0e25\u0e21 (Pie Chart) \r\n \/\/ - \u0e41\u0e22\u0e01 3 \u0e2a\u0e35 : Teal(4\u0e1b\u0e35), Amber(\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19), Purple(\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15)\r\n pieChart.data.datasets = [{\r\n data: [totals.regRegular, totals.regTransfer, totals.regMaster],\r\n backgroundColor: ['#14b8a6', '#f59e0b', '#8b5cf6'],\r\n borderWidth: 2, borderColor: '#ffffff', hoverOffset: 5\r\n }];\r\n pieChart.update();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\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-3970","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970","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=3970"}],"version-history":[{"count":13,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970\/revisions"}],"predecessor-version":[{"id":4454,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970\/revisions\/4454"}],"wp:attachment":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3970,"date":"2025-04-29T14:18:34","date_gmt":"2025-04-29T07:18:34","guid":{"rendered":"https:\/\/www.bit.rmuti.ac.th\/bit\/?page_id=3970"},"modified":"2026-05-22T13:59:35","modified_gmt":"2026-05-22T06:59:35","slug":"%e0%b9%81%e0%b8%9c%e0%b8%99%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b8%aa%e0%b8%a1%e0%b8%b1%e0%b8%84%e0%b8%a3%e0%b8%99%e0%b8%b1%e0%b8%81%e0%b8%a8%e0%b8%b6%e0%b8%81%e0%b8%a9%e0%b8%b2-%e0%b8%9b%e0%b8%a3%e0%b8%b0","status":"publish","type":"page","link":"https:\/\/www.bit.rmuti.ac.th\/bit\/?page_id=3970","title":{"rendered":"\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569 \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"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n Dashboard \u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 2569 | \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=Kanit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Kanit', sans-serif; background-color: #f8fafc; }\r\n .custom-scrollbar::-webkit-scrollbar { height: 8px; width: 6px; }\r\n .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n .sticky-col { position: sticky; left: 0; z-index: 20; background-color: #ffffff; border-right: 1px solid #e2e8f0; }\r\n .sticky-header { position: sticky; left: 0; z-index: 30; background-color: #f1f5f9; border-right: 1px solid #e2e8f0; }\r\n th, td { white-space: nowrap; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-slate-800 antialiased p-4 md:p-6\">\r\n\r\n <div class=\"max-w-[1800px] mx-auto space-y-6\">\r\n \r\n <header class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"bg-blue-800 text-amber-400 font-bold p-3 rounded-xl text-2xl shadow-inner\">BIT RMUTI<\/div>\r\n <div>\r\n <h1 class=\"text-2xl font-bold text-slate-900\">Dashboard \u0e2a\u0e23\u0e38\u0e1b\u0e41\u0e1c\u0e19\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e1b\u0e23\u0e30\u0e08\u0e33\u0e1b\u0e35 2569<\/h1>\r\n <p class=\"text-slate-500 text-sm mt-1\">\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=\"bg-blue-50 px-5 py-3 rounded-xl border border-blue-100 shadow-sm flex items-center gap-4\">\r\n <div>\r\n <p class=\"text-xs text-blue-600 font-medium uppercase\">\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <p class=\"text-2xl font-bold text-blue-800 leading-none mt-1\"><span id=\"kpi-total-reg\">0<\/span> <span class=\"text-sm font-normal text-blue-600\">\u0e04\u0e19<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 xl:grid-cols-5 gap-6\">\r\n \r\n <div class=\"xl:col-span-4 space-y-6\">\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4\">\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-blue-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <h3 id=\"kpi-total-plan\" class=\"text-2xl font-bold text-blue-700 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-indigo-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\r\n <h3 id=\"kpi-total-apply\" class=\"text-2xl font-bold text-indigo-700 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-teal-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34)<\/p>\r\n <h3 id=\"kpi-reg-regular\" class=\"text-2xl font-bold text-teal-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-amber-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)<\/p>\r\n <h3 id=\"kpi-reg-transfer\" class=\"text-2xl font-bold text-amber-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-4 rounded-2xl shadow-sm border border-slate-200 border-l-4 border-l-purple-500\">\r\n <p class=\"text-[11px] font-semibold text-slate-500 uppercase\">\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19 (\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15)<\/p>\r\n <h3 id=\"kpi-reg-master\" class=\"text-2xl font-bold text-purple-600 mt-1\">0<\/h3>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 md:col-span-2\">\r\n <h3 class=\"text-base font-bold text-slate-800 mb-4\">\ud83d\udcca \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23 \u0e41\u0e25\u0e30\u0e08\u0e33\u0e19\u0e27\u0e19\u0e01\u0e32\u0e23\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e41\u0e22\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/h3>\r\n <div class=\"relative h-[300px]\">\r\n <canvas id=\"barChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200\">\r\n <h3 class=\"text-base font-bold text-slate-800 mb-4\">\ud83e\udd67 \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e17\u0e35\u0e48\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/h3>\r\n <div class=\"relative h-[250px] flex justify-center items-center\">\r\n <canvas id=\"pieChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\">\r\n <div class=\"p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center\">\r\n <h3 class=\"text-base font-bold text-slate-800\">\ud83d\udccb \u0e15\u0e32\u0e23\u0e32\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (\u0e41\u0e1c\u0e19\/\u0e2a\u0e21\u0e31\u0e04\u0e23\/\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19)<\/h3>\r\n <span id=\"showing-text\" class=\"text-xs bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full font-medium\">\u0e41\u0e2a\u0e14\u0e07: \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\r\n <\/div>\r\n <div class=\"overflow-x-auto custom-scrollbar pb-4\">\r\n <table class=\"w-full text-xs text-center border-collapse\">\r\n <thead class=\"bg-slate-100 text-slate-700 font-semibold border-b-2 border-slate-300\">\r\n <tr>\r\n <th rowspan=\"2\" class=\"px-4 py-3 sticky-header shadow-[1px_0_5px_rgba(0,0,0,0.05)] text-left w-72\">\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32<\/th>\r\n <th rowspan=\"2\" class=\"px-3 py-3 border-x border-slate-300 bg-blue-100 text-blue-900\">\u0e1c\u0e25\u0e23\u0e27\u0e21\u0e41\u0e1c\u0e19<br>\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/th>\r\n <th rowspan=\"2\" class=\"px-3 py-3 border-r border-slate-300 bg-indigo-100 text-indigo-900\">\u0e22\u0e2d\u0e14\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23<br>\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-blue-50 text-blue-800\">\u0e42\u0e04\u0e27\u0e15\u0e32\u0e40\u0e23\u0e35\u0e22\u0e19\u0e14\u0e35<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-emerald-50 text-emerald-800\">\u0e42\u0e04\u0e27\u0e15\u0e32\u0e01\u0e35\u0e2c\u0e32\/\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-indigo-50 text-indigo-800\">TCAS 3<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e31\u0e1a\u0e15\u0e23\u0e07 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e31\u0e1a\u0e15\u0e23\u0e07 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 1<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-amber-50 text-amber-800\">\u0e23\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 2<\/th>\r\n <th colspan=\"3\" class=\"px-2 py-2 border-r border-slate-300 bg-pink-50 text-pink-800\">\u0e17\u0e38\u0e19\u0e14\u0e31\u0e0a\u0e21\u0e34\u0e25\u0e25\u0e4c<\/th>\r\n <th rowspan=\"2\" class=\"px-4 py-3 border-l-2 border-slate-300 bg-slate-800 text-white font-bold text-sm\">\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<br>\u0e41\u0e15\u0e48\u0e25\u0e30\u0e2a\u0e32\u0e02\u0e32<\/th>\r\n <\/tr>\r\n <tr class=\"text-[11px] text-slate-500 bg-slate-50 border-b border-slate-200\">\r\n <th class=\"p-2 border-x border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <th class=\"p-2 border-r border-slate-200\">\u0e41\u0e1c\u0e19<\/th><th class=\"p-2 border-r border-slate-200 text-indigo-500\">\u0e2a\u0e21\u0e31\u0e04\u0e23<\/th><th class=\"p-2 border-r border-slate-300 text-emerald-600\">\u0e02\u0e36\u0e49\u0e19\u0e2f<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"table-body\" class=\"divide-y divide-slate-200 text-slate-700\">\r\n <\/tbody>\r\n <tfoot class=\"bg-slate-200 text-slate-900 font-bold border-t-2 border-slate-400\">\r\n <tr id=\"table-footer\">\r\n <\/tr>\r\n <\/tfoot>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"xl:col-span-1\">\r\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 sticky top-6\">\r\n <div class=\"flex justify-between items-center mb-4 border-b border-slate-100 pb-3\">\r\n <h4 class=\"text-base font-bold text-slate-900\">\ud83d\udd0d \u0e41\u0e22\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e2a\u0e32\u0e02\u0e32<\/h4>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-2 gap-2 mb-5 text-xs\">\r\n <button onclick=\"toggleAll(true)\" class=\"py-2 bg-blue-50 text-blue-700 font-semibold rounded-lg hover:bg-blue-100 transition shadow-sm border border-blue-100\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n <button onclick=\"toggleAll(false)\" class=\"py-2 bg-slate-100 text-slate-600 font-semibold rounded-lg hover:bg-slate-200 transition shadow-sm border border-slate-200\">\u0e25\u0e49\u0e32\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/button>\r\n <\/div>\r\n\r\n <div class=\"space-y-4 max-h-[800px] overflow-y-auto custom-scrollbar pr-2\">\r\n \r\n <div>\r\n <div class=\"text-[12px] font-bold text-amber-700 mb-2 bg-amber-50 py-1.5 px-3 rounded-md border border-amber-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 \u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19<\/div>\r\n <div id=\"filter-transfer\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"pt-2\">\r\n <div class=\"text-[12px] font-bold text-teal-700 mb-2 bg-teal-50 py-1.5 px-3 rounded-md border border-teal-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34<\/div>\r\n <div id=\"filter-regular\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-2\">\r\n <div class=\"text-[12px] font-bold text-purple-700 mb-2 bg-purple-50 py-1.5 px-3 rounded-md border border-purple-100\">\ud83c\udf93 \u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23 \u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15<\/div>\r\n <div id=\"filter-master\" class=\"space-y-1.5\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 Data Source \u0e2a\u0e01\u0e31\u0e14\u0e08\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c Excel \u0e17\u0e35\u0e48\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e21\u0e32 + \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\r\n \/\/ Array structure = [\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a, \u0e2a\u0e21\u0e31\u0e04\u0e23, \u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19]\r\n const dataset = [\r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 \u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19 ---\r\n { id: \"t1\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BAC (T)\", \r\n planTotal: 105, regTotal: 91,\r\n qg: [10,21,19], qs: [5,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [90,63,53], d2: [20,15,15], ad1: [0,0,0], ad2: [0,0,0], dm: [10,12,4] },\r\n { id: \"t2\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BMG (T)\", \r\n planTotal: 35, regTotal: 39,\r\n qg: [3,0,0], qs: [2,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [30,27,22], d2: [15,24,17], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t3\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BIS (T)\", \r\n planTotal: 70, regTotal: 74,\r\n qg: [30,13,6], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [40,78,55], d2: [5,33,13], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t4\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BMK (T)\", \r\n planTotal: 35, regTotal: 27,\r\n qg: [13,6,6], qs: [2,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [20,13,10], d2: [25,14,10], ad1: [10,2,1], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t5\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2a\u0e15\u0e32\u0e23\u0e4c\u0e17\u0e2d\u0e31\u0e1e\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 (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BTH (T)\", \r\n planTotal: 35, regTotal: 7,\r\n qg: [10,0,0], qs: [5,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [20,7,4], d2: [35,4,3], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"t6\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c (\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19)\", type: \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\", code: \"BLM (T)\", \r\n planTotal: 35, regTotal: 37,\r\n qg: [5,10,8], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [30,25,15], d2: [15,16,14], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n \r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34 ---\r\n { id: \"r1\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BAC (R)\", \r\n planTotal: 70, regTotal: 71,\r\n qg: [0,0,0], qs: [0,0,0], t1: [10,30,14], t2: [20,40,16], t3: [5,5,4], d1: [35,42,31], d2: [0,0,0], ad1: [5,16,6], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r2\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e19\u0e27\u0e31\u0e15\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMG (R)\", \r\n planTotal: 105, regTotal: 116,\r\n qg: [6,16,10], qs: [4,0,0], t1: [25,16,12], t2: [20,10,7], t3: [35,17,14], d1: [30,58,32], d2: [10,72,41], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r3\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BIS (R)\", \r\n planTotal: 70, regTotal: 74,\r\n qg: [5,6,5], qs: [0,0,0], t1: [5,4,1], t2: [10,18,7], t3: [20,16,14], d1: [45,54,33], d2: [5,85,14], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r4\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 - \u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMK-M (R)\", \r\n planTotal: 35, regTotal: 40,\r\n qg: [3,27,10], qs: [2,1,0], t1: [10,17,13], t2: [10,7,4], t3: [5,4,4], d1: [5,75,9], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r5\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 - \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BMK-D (R)\", \r\n planTotal: 35, regTotal: 37,\r\n qg: [3,14,8], qs: [2,3,0], t1: [10,15,5], t2: [10,8,5], t3: [15,13,11], d1: [5,72,8], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r6\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2a\u0e15\u0e32\u0e23\u0e4c\u0e17\u0e2d\u0e31\u0e1e\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BTH (R)\", \r\n planTotal: 70, regTotal: 66,\r\n qg: [5,1,1], qs: [5,1,0], t1: [15,12,7], t2: [5,11,7], t3: [30,18,12], d1: [10,5,3], d2: [25,52,28], ad1: [10,7,5], ad2: [10,3,3], dm: [0,0,0] },\r\n { id: \"r7\", name: \"\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e42\u0e25\u0e08\u0e34\u0e2a\u0e15\u0e34\u0e01\u0e2a\u0e4c 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BLM (R)\", \r\n planTotal: 105, regTotal: 108,\r\n qg: [2,3,2], qs: [3,5,3], t1: [10,42,17], t2: [40,61,38], t3: [40,37,33], d1: [10,12,5], d2: [0,0,0], ad1: [10,17,10], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"r8\", name: \"\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BML (R)\", \r\n planTotal: 30, regTotal: 26,\r\n qg: [5,4,2], qs: [0,0,0], t1: [2,0,0], t2: [3,1,0], t3: [10,2,1], d1: [15,14,9], d2: [15,14,9], ad1: [15,4,2], ad2: [15,3,3], dm: [0,0,0] },\r\n { id: \"r9\", name: \"\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 4 \u0e1b\u0e35 (\u0e1b\u0e01\u0e15\u0e34)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"IBM (R)\", \r\n planTotal: 30, regTotal: 26,\r\n qg: [1,3,0], qs: [1,0,0], t1: [5,2,0], t2: [5,3,0], t3: [15,5,2], d1: [13,25,12], d2: [5,22,6], ad1: [10,5,3], ad2: [10,5,3], dm: [0,0,0] },\r\n { id: \"r10\", name: \"\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 (\u0e19\u0e31\u0e01\u0e28\u0e36\u0e01\u0e29\u0e32\u0e08\u0e35\u0e19)\", type: \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\", code: \"BML-C (R)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [5,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [0,0,0], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n\r\n \/\/ --- \u0e01\u0e25\u0e38\u0e48\u0e21 \u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e2d\u0e34\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e31\u0e49\u0e07\u0e15\u0e49\u0e19) ---\r\n { id: \"m1\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e1a\u0e0a.\u0e21.) - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e41\u0e1c\u0e19 1.2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"M.Acc (1.2)\", \r\n planTotal: 5, regTotal: 1,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,1,1], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m2\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 (\u0e1a\u0e0a.\u0e21.) - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e41\u0e1c\u0e19 2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"M.Acc (2)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m3\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e41\u0e1c\u0e19 1.2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"MBA (1.2)\", \r\n planTotal: 5, regTotal: 2,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,1,0], d2: [5,2,2], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] },\r\n { id: \"m4\", name: \"\u0e2b\u0e25\u0e31\u0e01\u0e2a\u0e39\u0e15\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15 - \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 \u0e41\u0e1c\u0e19 2\", type: \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\", code: \"MBA (2)\", \r\n planTotal: 5, regTotal: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], d1: [5,0,0], d2: [5,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0] }\r\n ];\r\n\r\n let barChart, pieChart;\r\n\r\n \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\r\n window.addEventListener('DOMContentLoaded', () => {\r\n renderCheckboxes();\r\n initCharts();\r\n updateDashboard();\r\n });\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Checkboxes \u0e14\u0e49\u0e32\u0e19\u0e02\u0e27\u0e32\r\n function renderCheckboxes() {\r\n const trContainer = document.getElementById('filter-transfer');\r\n const regContainer = document.getElementById('filter-regular');\r\n const masterContainer = document.getElementById('filter-master');\r\n \r\n dataset.forEach(item => {\r\n const label = document.createElement('label');\r\n label.className = \"flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer text-[11px] xl:text-xs transition border border-transparent hover:border-slate-200\";\r\n label.innerHTML = `\r\n <input type=\"checkbox\" value=\"${item.id}\" checked onchange=\"updateDashboard()\" class=\"branch-cb w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 mt-0.5\">\r\n <span class=\"font-medium text-slate-700 leading-snug select-none\">${item.name}<\/span>\r\n `;\r\n \r\n if (item.type === \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\") trContainer.appendChild(label);\r\n else if (item.type === \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\") regContainer.appendChild(label);\r\n else if (item.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") masterContainer.appendChild(label);\r\n });\r\n }\r\n\r\n function toggleAll(isChecked) {\r\n document.querySelectorAll('.branch-cb').forEach(cb => cb.checked = isChecked);\r\n updateDashboard();\r\n }\r\n\r\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 Graph \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\r\n function initCharts() {\r\n Chart.defaults.font.family = \"'Kanit', sans-serif\";\r\n \r\n \/\/ Bar Chart\r\n const ctxBar = document.getElementById('barChart').getContext('2d');\r\n barChart = new Chart(ctxBar, {\r\n type: 'bar',\r\n data: { labels: [], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { \r\n legend: { position: 'top', labels: { boxWidth: 12, font: { size: 12 } } },\r\n tooltip: { padding: 10 }\r\n },\r\n scales: { \r\n x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 45, minRotation: 45 } },\r\n y: { beginAtZero: true, border: { dash: [4, 4] } }\r\n }\r\n }\r\n });\r\n\r\n \/\/ Pie Chart\r\n const ctxPie = document.getElementById('pieChart').getContext('2d');\r\n pieChart = new Chart(ctxPie, {\r\n type: 'doughnut',\r\n data: { labels: ['4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34', '\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19', '\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15'], datasets: [] },\r\n options: {\r\n responsive: true, maintainAspectRatio: false,\r\n plugins: { \r\n legend: { position: 'bottom', labels: { boxWidth: 12, padding: 10, font: { size: 12 } } }\r\n },\r\n cutout: '55%'\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e15\u0e32\u0e23\u0e32\u0e07 \u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21 \u0e41\u0e25\u0e30\u0e01\u0e23\u0e32\u0e1f\u0e41\u0e1a\u0e1a Real-time\r\n function updateDashboard() {\r\n const checkedIds = Array.from(document.querySelectorAll('.branch-cb:checked')).map(cb => cb.value);\r\n const filteredData = dataset.filter(d => checkedIds.includes(d.id));\r\n\r\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e30\u0e2a\u0e21\u0e22\u0e2d\u0e14\u0e23\u0e27\u0e21\r\n let totals = {\r\n planTotal: 0, applyTotal: 0, regTotal: 0, \r\n regRegular: 0, regTransfer: 0, regMaster: 0,\r\n qg: [0,0,0], qs: [0,0,0], t1: [0,0,0], t2: [0,0,0], t3: [0,0,0], \r\n d1: [0,0,0], d2: [0,0,0], ad1: [0,0,0], ad2: [0,0,0], dm: [0,0,0]\r\n };\r\n\r\n const tbody = document.getElementById('table-body');\r\n tbody.innerHTML = '';\r\n\r\n if (filteredData.length === 0) {\r\n tbody.innerHTML = `<tr><td colspan=\"33\" class=\"px-4 py-8 text-center text-slate-400 font-medium text-sm\">\u274c \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e34\u0e4a\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22 1 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e08\u0e32\u0e01\u0e41\u0e1c\u0e07\u0e15\u0e31\u0e27\u0e01\u0e23\u0e2d\u0e07\u0e14\u0e49\u0e32\u0e19\u0e02\u0e27\u0e32<\/td><\/tr>`;\r\n } else {\r\n filteredData.forEach(row => {\r\n \/\/ \u0e04\u0e33\u0e19\u0e27\u0e13\u0e22\u0e2d\u0e14\u0e23\u0e31\u0e1a\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e23\u0e27\u0e21\u0e02\u0e2d\u0e07\u0e2a\u0e32\u0e02\u0e32\u0e19\u0e35\u0e49 (\u0e14\u0e36\u0e07 Index \u0e17\u0e35\u0e48 1 \u0e08\u0e32\u0e01\u0e17\u0e38\u0e01\u0e46 \u0e23\u0e2d\u0e1a\u0e21\u0e32\u0e23\u0e27\u0e21\u0e01\u0e31\u0e19)\r\n let rowApplyTotal = row.qg[1] + row.qs[1] + row.t1[1] + row.t2[1] + row.t3[1] + row.d1[1] + row.d2[1] + row.ad1[1] + row.ad2[1] + row.dm[1];\r\n\r\n \/\/ Update Totals\r\n totals.planTotal += row.planTotal;\r\n totals.applyTotal += rowApplyTotal;\r\n totals.regTotal += row.regTotal;\r\n if (row.type === \"4 \u0e1b\u0e35 \u0e1b\u0e01\u0e15\u0e34\") totals.regRegular += row.regTotal;\r\n if (row.type === \"\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19\") totals.regTransfer += row.regTotal;\r\n if (row.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") totals.regMaster += row.regTotal;\r\n\r\n \/\/ Helper for summing array columns\r\n const addArr = (key) => { for(let i=0; i<3; i++) totals[key][i] += row[key][i]; };\r\n addArr('qg'); addArr('qs'); addArr('t1'); addArr('t2'); addArr('t3'); \r\n addArr('d1'); addArr('d2'); addArr('ad1'); addArr('ad2'); addArr('dm');\r\n\r\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07 Helper function \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e33 Cell \u0e43\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07\r\n const makeCells = (arr, isBg) => `\r\n <td class=\"p-2 border-x ${isBg ? 'bg-slate-50' : 'border-slate-200'}\">${arr[0]}<\/td>\r\n <td class=\"p-2 border-r ${isBg ? 'bg-slate-50' : 'border-slate-200'} font-medium text-indigo-500\">${arr[1]}<\/td>\r\n <td class=\"p-2 border-r ${isBg ? 'bg-slate-50' : 'border-slate-300'} font-semibold text-emerald-600\">${arr[2]}<\/td>\r\n `;\r\n\r\n \/\/ \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e41\u0e22\u0e01\u0e01\u0e25\u0e38\u0e48\u0e21\u0e43\u0e2b\u0e49\u0e21\u0e2d\u0e07\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\r\n let bgRowClass = \"hover:bg-blue-50\/50 transition bg-white\";\r\n if(row.type === \"\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15\") bgRowClass = \"hover:bg-purple-50\/50 transition bg-purple-50\/20\";\r\n\r\n const tr = document.createElement('tr');\r\n tr.className = bgRowClass;\r\n tr.innerHTML = `\r\n <td class=\"px-4 py-3 font-medium text-slate-800 sticky-col text-left\">${row.name}<\/td>\r\n <td class=\"px-3 py-3 border-x border-slate-300 font-bold bg-blue-50 text-blue-800\">${row.planTotal}<\/td>\r\n <td class=\"px-3 py-3 border-r border-slate-300 font-bold bg-indigo-50 text-indigo-700\">${rowApplyTotal}<\/td>\r\n ${makeCells(row.qg, false)} ${makeCells(row.qs, false)}\r\n ${makeCells(row.t1, false)} ${makeCells(row.t2, false)} ${makeCells(row.t3, false)}\r\n ${makeCells(row.d1, false)} ${makeCells(row.d2, false)} ${makeCells(row.ad1, false)} ${makeCells(row.ad2, false)}\r\n ${makeCells(row.dm, false)}\r\n <td class=\"px-4 py-3 border-l-2 border-slate-300 font-bold text-sm bg-slate-100 text-slate-900\">${row.regTotal}<\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n \/\/ \u0e40\u0e23\u0e19\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e22\u0e2d\u0e14\u0e2a\u0e23\u0e38\u0e1b\u0e15\u0e32\u0e23\u0e32\u0e07 (Table Footer)\r\n const makeFoot = (arr) => `\r\n <td class=\"p-2 border-x border-slate-300 text-slate-600\">${arr[0]}<\/td>\r\n <td class=\"p-2 border-r border-slate-300 text-indigo-600 font-normal\">${arr[1]}<\/td>\r\n <td class=\"p-2 border-r border-slate-400 text-emerald-700 text-[13px] font-bold\">${arr[2]}<\/td>\r\n `;\r\n \r\n document.getElementById('table-footer').innerHTML = `\r\n <td class=\"px-4 py-3 sticky-col bg-slate-200 text-left shadow-[1px_0_5px_rgba(0,0,0,0.05)]\">\u0e23\u0e27\u0e21\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (${filteredData.length} \u0e2a\u0e32\u0e02\u0e32)<\/td>\r\n <td class=\"px-3 py-3 border-x border-slate-400 font-extrabold text-blue-800 bg-blue-200\">${totals.planTotal}<\/td>\r\n <td class=\"px-3 py-3 border-r border-slate-400 font-extrabold text-indigo-800 bg-indigo-200\">${totals.applyTotal}<\/td>\r\n ${makeFoot(totals.qg)} ${makeFoot(totals.qs)}\r\n ${makeFoot(totals.t1)} ${makeFoot(totals.t2)} ${makeFoot(totals.t3)}\r\n ${makeFoot(totals.d1)} ${makeFoot(totals.d2)} ${makeFoot(totals.ad1)} ${makeFoot(totals.ad2)}\r\n ${makeFoot(totals.dm)}\r\n <td class=\"px-4 py-3 border-l-2 border-slate-400 font-black text-base bg-emerald-200 text-emerald-900\">${totals.regTotal}<\/td>\r\n `;\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15 KPI Cards \u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\r\n document.getElementById('kpi-total-reg').innerText = totals.regTotal.toLocaleString();\r\n document.getElementById('kpi-total-plan').innerText = totals.planTotal.toLocaleString();\r\n document.getElementById('kpi-total-apply').innerText = totals.applyTotal.toLocaleString();\r\n document.getElementById('kpi-reg-regular').innerText = totals.regRegular.toLocaleString();\r\n document.getElementById('kpi-reg-transfer').innerText = totals.regTransfer.toLocaleString();\r\n document.getElementById('kpi-reg-master').innerText = totals.regMaster.toLocaleString();\r\n document.getElementById('showing-text').innerText = `\u0e01\u0e33\u0e25\u0e31\u0e07\u0e41\u0e2a\u0e14\u0e07: ${filteredData.length} \/ 20 \u0e2a\u0e32\u0e02\u0e32`;\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e01\u0e23\u0e32\u0e1f\u0e41\u0e17\u0e48\u0e07 (Bar Chart)\r\n barChart.data.labels = filteredData.map(d => d.code);\r\n barChart.data.datasets = [\r\n { \r\n label: '\u0e41\u0e1c\u0e19\u0e23\u0e31\u0e1a\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14', \r\n data: filteredData.map(d => d.planTotal), \r\n backgroundColor: '#3b82f6', \r\n borderRadius: 4, barPercentage: 0.7 \r\n },\r\n { \r\n label: '\u0e23\u0e27\u0e21\u0e02\u0e36\u0e49\u0e19\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e08\u0e23\u0e34\u0e07', \r\n data: filteredData.map(d => d.regTotal), \r\n backgroundColor: '#10b981', \r\n borderRadius: 4, barPercentage: 0.7 \r\n }\r\n ];\r\n barChart.update();\r\n\r\n \/\/ \u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e01\u0e23\u0e32\u0e1f\u0e27\u0e07\u0e01\u0e25\u0e21 (Pie Chart) \r\n \/\/ - \u0e41\u0e22\u0e01 3 \u0e2a\u0e35 : Teal(4\u0e1b\u0e35), Amber(\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e42\u0e2d\u0e19), Purple(\u0e21\u0e2b\u0e32\u0e1a\u0e31\u0e13\u0e11\u0e34\u0e15)\r\n pieChart.data.datasets = [{\r\n data: [totals.regRegular, totals.regTransfer, totals.regMaster],\r\n backgroundColor: ['#14b8a6', '#f59e0b', '#8b5cf6'],\r\n borderWidth: 2, borderColor: '#ffffff', hoverOffset: 5\r\n }];\r\n pieChart.update();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\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-3970","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970","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=3970"}],"version-history":[{"count":13,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970\/revisions"}],"predecessor-version":[{"id":4454,"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=\/wp\/v2\/pages\/3970\/revisions\/4454"}],"wp:attachment":[{"href":"https:\/\/www.bit.rmuti.ac.th\/bit\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}