\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e28\u0e1e\u0e01. (\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32)<\/title>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-green: #2e7d32;\n --light-green: #4caf50;\n --yellow-accent: #fbc02d;\n --white: #ffffff;\n --bg-light: #f9fbf9;\n --text-main: #1b5e20;\n --shadow: 0 4px 20px rgba(0,0,0,0.08);\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--bg-light);\n color: var(--text-main);\n margin: 0;\n padding: 10px;\n }\n\n .dashboard-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n \/* Header Section *\/\n header {\n background: linear-gradient(135deg, var(--primary-green), var(--light-green));\n color: var(--white);\n padding: 30px;\n border-radius: 24px;\n text-align: center;\n box-shadow: var(--shadow);\n margin-bottom: 30px;\n border-bottom: 6px solid var(--yellow-accent);\n }\n\n header h1 { margin: 0; font-size: 2rem; font-weight: 700; }\n header p { margin: 10px 0 0; opacity: 0.9; font-weight: 300; }\n\n \/* Stats Cards *\/\n .summary-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-card {\n background: var(--white);\n padding: 20px;\n border-radius: 20px;\n text-align: center;\n box-shadow: var(--shadow);\n border: 1px solid #e0f2f1;\n transition: transform 0.3s ease;\n }\n\n .stat-card:hover { transform: translateY(-5px); }\n .stat-card i { font-size: 2rem; color: var(--primary-green); margin-bottom: 10px; }\n .stat-card .value { font-size: 2.2rem; font-weight: 700; color: #333; display: block; }\n .stat-card .label { color: #666; font-size: 0.9rem; font-weight: 700; }\n\n \/* Filter Section *\/\n .filter-area {\n background: var(--white);\n padding: 20px;\n border-radius: 20px;\n margin-bottom: 30px;\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: center;\n box-shadow: var(--shadow);\n }\n\n .filter-group { flex: 1; min-width: 280px; }\n .filter-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--primary-green); }\n \n input, select {\n width: 100%;\n padding: 12px 18px;\n border: 2px solid #e8f5e9;\n border-radius: 12px;\n font-size: 1rem;\n outline: none;\n transition: 0.3s;\n background-color: #fcfdfc;\n font-family: 'Sarabun', sans-serif;\n }\n\n input:focus, select:focus { border-color: var(--primary-green); background-color: #fff; }\n\n \/* Visualization Grid *\/\n .charts-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n }\n\n .chart-box {\n background: var(--white);\n padding: 25px;\n border-radius: 24px;\n box-shadow: var(--shadow);\n text-align: center;\n min-height: 350px;\n }\n\n .chart-box h3 { margin-top: 0; color: var(--primary-green); font-size: 1.1rem; margin-bottom: 20px; }\n\n \/* Table Section *\/\n .table-section {\n background: var(--white);\n padding: 25px;\n border-radius: 24px;\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .table-section h3 { margin-top: 0; color: var(--primary-green); display: flex; align-items: center; gap: 10px; }\n\n .table-wrapper {\n overflow-x: auto;\n border-radius: 15px;\n border: 1px solid #eee;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.95rem;\n }\n\n thead th {\n background-color: var(--primary-green);\n color: var(--white);\n padding: 15px;\n text-align: left;\n font-weight: 400;\n white-space: nowrap;\n }\n\n tbody td {\n padding: 12px 15px;\n border-bottom: 1px solid #f0f0f0;\n white-space: nowrap; \/* \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27\u0e15\u0e32\u0e21\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 *\/\n }\n\n tbody tr:nth-child(even) { background-color: #f9fdf9; }\n tbody tr:hover { background-color: #fffde7; }\n\n .badge-type {\n background: #e8f5e9;\n color: var(--primary-green);\n padding: 4px 10px;\n border-radius: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n border: 1px solid #c8e6c9;\n }\n\n @media (max-width: 768px) {\n .charts-container { grid-template-columns: 1fr; }\n header h1 { font-size: 1.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"dashboard-container\">\n <header>\n <h1><i class=\"fas fa-chart-line\"><\/i> \u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e28\u0e1e\u0e01. \u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32<\/h1>\n <p>\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1e\u0e19\u0e21<\/p>\n <\/header>\n\n \n <div class=\"summary-grid\">\n <div class=\"stat-card\">\n <i class=\"fas fa-store-alt\"><\/i>\n <span class=\"value\" id=\"stat-total\">0<\/span>\n <span class=\"label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n <\/div>\n <div class=\"stat-card\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <span class=\"value\" id=\"stat-subs\">0<\/span>\n <span class=\"label\">\u0e15\u0e33\u0e1a\u0e25\u0e17\u0e35\u0e48\u0e21\u0e35\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22<\/span>\n <\/div>\n <div class=\"stat-card\">\n <i class=\"fas fa-tags\"><\/i>\n <span class=\"value\" id=\"stat-types\">0<\/span>\n <span class=\"label\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"filter-area\">\n <div class=\"filter-group\">\n <label><i class=\"fas fa-search\"><\/i> \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e14\u0e49\u0e27\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e28\u0e39\u0e19\u0e22\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19:<\/label>\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32...\" onkeyup=\"filterDashboard()\">\n <\/div>\n <div class=\"filter-group\">\n <label><i class=\"fas fa-filter\"><\/i> \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e33\u0e1a\u0e25:<\/label>\n <select id=\"subDistrictFilter\" onchange=\"filterDashboard()\">\n <option value=\"\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\">— \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e38\u0e01\u0e15\u0e33\u0e1a\u0e25 —<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"charts-container\">\n <div class=\"chart-box\">\n <h3><i class=\"fas fa-chart-bar\"><\/i> \u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e23\u0e32\u0e22\u0e15\u0e33\u0e1a\u0e25 (\u0e0a\u0e48\u0e27\u0e07\u0e25\u0e30 2-10)<\/h3>\n <div style=\"height: 300px;\"><canvas id=\"barChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"chart-box\">\n <h3><i class=\"fas fa-chart-pie\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2b\u0e25\u0e31\u0e01<\/h3>\n <div style=\"height: 300px;\"><canvas id=\"pieChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"table-section\">\n <h3><i class=\"fas fa-list-ul\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 (\u0e41\u0e1a\u0e1a\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27)<\/h3>\n <div class=\"table-wrapper\">\n <table id=\"mainTable\">\n <thead>\n <tr>\n <th>\u0e25\u0e33\u0e14\u0e31\u0e1a<\/th>\n <th>\u0e0a\u0e37\u0e48\u0e2d\u0e28\u0e39\u0e19\u0e22\u0e4c<\/th>\n <th>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2b\u0e25\u0e31\u0e01<\/th>\n <th>\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48 (\u0e21.\/\u0e15\u0e33\u0e1a\u0e25)<\/th>\n <th>\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c<\/th>\n <th>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Raw Data from provided CSV logic\n const dataset = [\n { id: 1, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"1\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e22\u0e13\u0e20\u0e31\u0e17\u0e23 \u0e28\u0e34\u0e23\u0e34\u0e27\u0e38\u0e18\", tel: \"-\" },\n { id: 2, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e33\u0e08\u0e31\u0e14\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", type: \"\u0e28\u0e08\u0e0a.\", moo: \"2\", sub: \"\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", leader: \"\u0e19\u0e32\u0e22\u0e1a\u0e38\u0e0d\u0e40\u0e23\u0e37\u0e2d\u0e07 \u0e0a\u0e31\u0e22\u0e1a\u0e34\u0e19\", tel: \"080-1987389\" },\n { id: 3, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e01\u0e29\u0e15\u0e23\u0e17\u0e24\u0e29\u0e0e\u0e35\u0e43\u0e2b\u0e21\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"7\", sub: \"\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", leader: \"\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e07\u0e27\u0e23 \u0e0a\u0e31\u0e22\u0e1b\u0e31\u0e0d\u0e2b\u0e32\", tel: \"-\" },\n { id: 4, name: \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e41\u0e21\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e01\u0e23\u0e30\u0e15\u0e34\u0e4a\u0e1a\u0e02\u0e49\u0e32\u0e27\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e07\u0e2d\u0e27\u0e19 \u0e1b\u0e34\u0e25\u0e2d\u0e07\", tel: \"-\" },\n { id: 5, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e14\u0e34\u0e19\u0e1b\u0e38\u0e4b\u0e22\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", type: \"\u0e28\u0e14\u0e1b\u0e0a.\", moo: \"7\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e22\u0e1e\u0e35\u0e23\u0e30\u0e1e\u0e07\u0e28\u0e4c \u0e40\u0e23\u0e37\u0e2d\u0e07\u0e02\u0e27\u0e31\u0e0d\", tel: \"085-7792842\" },\n { id: 6, name: \"\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e21\u0e31\u0e14\u0e2b\u0e21\u0e35\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e19\u0e19\u0e2a\u0e30\u0e2d\u0e32\u0e14\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"12\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e23\u0e32\u0e15\u0e23\u0e35 \u0e2d\u0e38\u0e2a\u0e32\u0e1e\u0e23\u0e2b\u0e21\", tel: \"098-2076751\" },\n { id: 7, name: \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e19\u0e32\u0e07\u0e31\u0e27\", type: \"\u0e14\u0e49\u0e32\u0e19\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\", moo: \"2\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14 \u0e23\u0e32\u0e0a\u0e0a\u0e21\u0e1e\u0e39\", tel: \"-\" },\n { id: 8, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e25\u0e30\u0e40\u0e01\u0e29\u0e15\u0e23\u0e17\u0e24\u0e29\u0e0e\u0e35\u0e43\u0e2b\u0e21\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"2\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e07\u0e04\u0e25 \u0e19\u0e32\u0e42\u0e04\u0e27\u0e07\u0e04\u0e4c\", tel: \"-\" },\n { id: 9, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e2a.\u0e0a\u0e31\u0e22\u0e23\u0e31\u0e15\u0e19\u0e4c\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e0a\u0e31\u0e22\u0e23\u0e31\u0e15\u0e19\u0e4c \u0e1e\u0e25\u0e20\u0e31\u0e01\u0e14\u0e35\", tel: \"-\" },\n { id: 10, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e0a\u0e38\u0e21\u0e0a\u0e19\", type: \"\u0e28\u0e08\u0e0a.\", moo: \"5\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e27\u0e34\u0e17\u0e22\u0e4c \u0e19\u0e32\u0e42\u0e04\u0e27\u0e07\u0e04\u0e4c\", tel: \"-\" },\n { id: 11, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"14\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e34\u0e48\u0e07 \u0e0a\u0e32\u0e41\u0e2a\u0e19\", tel: \"-\" },\n { id: 12, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e2b\u0e31\u0e15\u0e16\u0e01\u0e23\u0e23\u0e21\u0e27\u0e31\u0e14\u0e18\u0e32\u0e15\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e23\u0e31\u0e15\u0e19\u0e32 \u0e21\u0e2b\u0e32\u0e42\u0e04\u0e15\u0e23\", tel: \"081-3694086\" },\n { id: 13, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e25\u0e32\u0e22\u0e02\u0e34\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e42\u0e2e\u0e21 \u0e21\u0e30\u0e25\u0e34\u0e1a\u0e38\u0e0d\", tel: \"089-5743477\" },\n { id: 14, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1e\u0e37\u0e49\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e14\u0e2d\u0e19\u0e41\u0e14\u0e07\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"2\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e2d\u0e27\u0e22\u0e1e\u0e23 \u0e19\u0e04\u0e23\u0e0a\u0e31\u0e22\", tel: \"080-7539343\" },\n { id: 15, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"10\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e34\u0e48\u0e07 \u0e0a\u0e32\u0e41\u0e2a\u0e19\", tel: \"-\" },\n { id: 16, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e14\u0e2d\u0e19\u0e1e\u0e30\u0e18\u0e32\u0e22\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"2\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e41\u0e2a\u0e07\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e2a\u0e38\u0e04\u0e33\u0e20\u0e32\", tel: \"085-7561875\" },\n { id: 17, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e40\u0e2a\u0e37\u0e48\u0e2d\u0e01\u0e01\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"5\", sub: \"\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e22\u0e38\u0e23\u0e14\u0e32 \u0e04\u0e33\u0e21\u0e35\u0e41\u0e14\u0e07\", tel: \"085-7517651\" },\n { id: 18, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e1a\u0e49\u0e32\u0e19\u0e14\u0e2d\u0e19\u0e28\u0e32\u0e25\u0e32\", type: \"\u0e14\u0e49\u0e32\u0e19\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\", moo: \"11\", sub: \"\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", leader: \"\u0e19\u0e32\u0e22\u0e08\u0e33\u0e23\u0e31\u0e2a \u0e27\u0e07\u0e28\u0e32\u0e25\u0e32\", tel: \"-\" }\n ];\n\n let barChart, pieChart;\n\n \/\/ Initialize Dashboard\n window.onload = function() {\n populateFilters();\n initCharts();\n filterDashboard();\n };\n\n function populateFilters() {\n const subDistricts = [...new Set(dataset.map(d => d.sub))].sort();\n const select = document.getElementById('subDistrictFilter');\n subDistricts.forEach(sub => {\n const opt = document.createElement('option');\n opt.value = sub;\n opt.innerText = sub;\n select.appendChild(opt);\n });\n }\n\n function initCharts() {\n \/\/ Bar Chart Initial\n const ctxBar = document.getElementById('barChart').getContext('2d');\n barChart = new Chart(ctxBar, {\n type: 'bar',\n data: { labels: [], datasets: [{ label: '\u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c', data: [], backgroundColor: '#4caf50', borderRadius: 8 }] },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: { \n beginAtZero: true, \n max: 10, \/\/ Max data range according to requirement\n ticks: { stepSize: 2 } \/\/ Range 2-10 as requested\n }\n },\n plugins: { legend: { display: false } }\n }\n });\n\n \/\/ Pie Chart Initial\n const ctxPie = document.getElementById('pieChart').getContext('2d');\n pieChart = new Chart(ctxPie, {\n type: 'doughnut',\n data: { labels: [], datasets: [{ data: [], backgroundColor: ['#2e7d32', '#66bb6a', '#fbc02d', '#fff176', '#a5d6a7', '#ffeb3b'] }] },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15, font: { family: 'Sarabun' } } } }\n }\n });\n }\n\n function filterDashboard() {\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\n const subFilter = document.getElementById('subDistrictFilter').value;\n\n \/\/ Filtering logic\n const filteredData = dataset.filter(item => {\n const matchesSearch = item.name.toLowerCase().includes(searchTerm) || item.leader.toLowerCase().includes(searchTerm);\n const matchesSub = subFilter === '\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' || item.sub === subFilter;\n return matchesSearch && matchesSub;\n });\n\n updateTable(filteredData);\n updateStats(filteredData);\n updateChartsData(filteredData);\n }\n\n function updateTable(data) {\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n\n if (data.length === 0) {\n tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align:center; padding: 40px; color: #999;\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/td><\/tr>';\n return;\n }\n\n data.forEach((item, index) => {\n const row = `\n <tr>\n <td>${index + 1}<\/td>\n <td style=\"font-weight:700; color:var(--primary-green)\">${item.name}<\/td>\n <td><span class=\"badge-type\">${item.type}<\/span><\/td>\n <td>\u0e2b\u0e21\u0e39\u0e48 ${item.moo} \u0e15.${item.sub}<\/td>\n <td>${item.leader}<\/td>\n <td>${item.tel}<\/td>\n <\/tr>\n `;\n tbody.innerHTML += row;\n });\n }\n\n function updateStats(data) {\n document.getElementById('stat-total').innerText = data.length;\n const subSet = new Set(data.map(i => i.sub));\n document.getElementById('stat-subs').innerText = subSet.size;\n const typeSet = new Set(data.map(i => i.type));\n document.getElementById('stat-types').innerText = typeSet.size;\n }\n\n function updateChartsData(data) {\n \/\/ Aggregate for Bar Chart (By Sub-district)\n const subCounts = {};\n data.forEach(item => {\n subCounts[item.sub] = (subCounts[item.sub] || 0) + 1;\n });\n\n barChart.data.labels = Object.keys(subCounts);\n barChart.data.datasets[0].data = Object.values(subCounts);\n barChart.update();\n\n \/\/ Aggregate for Pie Chart (By Activity Type)\n const typeCounts = {};\n data.forEach(item => {\n typeCounts[item.type] = (typeCounts[item.type] || 0) + 1;\n });\n\n pieChart.data.labels = Object.keys(typeCounts);\n pieChart.data.datasets[0].data = Object.values(typeCounts);\n pieChart.update();\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48 […]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1911","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin_nawa","author_link":"https:\/\/nakhonphanom.doae.go.th\/nawa\/blog\/author\/admin_nawa\/"},"uagb_comment_info":0,"uagb_excerpt":"\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48 […]","_links":{"self":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/comments?post=1911"}],"version-history":[{"count":1,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911\/revisions"}],"predecessor-version":[{"id":1912,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911\/revisions\/1912"}],"wp:attachment":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/media?parent=1911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1911,"date":"2026-04-02T09:45:40","date_gmt":"2026-04-02T02:45:40","guid":{"rendered":"https:\/\/nakhonphanom.doae.go.th\/nawa\/?page_id=1911"},"modified":"2026-04-02T09:46:08","modified_gmt":"2026-04-02T02:46:08","slug":"%e0%b8%a8%e0%b8%b9%e0%b8%99%e0%b8%a2%e0%b9%8c%e0%b9%80%e0%b8%84%e0%b8%a3%e0%b8%b7%e0%b8%ad%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a2-%e0%b8%a8%e0%b8%9e%e0%b8%81-%e0%b8%ad%e0%b8%b3%e0%b9%80%e0%b8%a0-3","status":"publish","type":"page","link":"https:\/\/nakhonphanom.doae.go.th\/nawa\/%e0%b8%a8%e0%b8%b9%e0%b8%99%e0%b8%a2%e0%b9%8c%e0%b9%80%e0%b8%84%e0%b8%a3%e0%b8%b7%e0%b8%ad%e0%b8%82%e0%b9%88%e0%b8%b2%e0%b8%a2-%e0%b8%a8%e0%b8%9e%e0%b8%81-%e0%b8%ad%e0%b8%b3%e0%b9%80%e0%b8%a0-3\/","title":{"rendered":"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e28\u0e1e\u0e01. \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32"},"content":{"rendered":"\n\n\n\n \n \n \u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e28\u0e1e\u0e01. (\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32)<\/title>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-green: #2e7d32;\n --light-green: #4caf50;\n --yellow-accent: #fbc02d;\n --white: #ffffff;\n --bg-light: #f9fbf9;\n --text-main: #1b5e20;\n --shadow: 0 4px 20px rgba(0,0,0,0.08);\n }\n\n body {\n font-family: 'Sarabun', sans-serif;\n background-color: var(--bg-light);\n color: var(--text-main);\n margin: 0;\n padding: 10px;\n }\n\n .dashboard-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n \/* Header Section *\/\n header {\n background: linear-gradient(135deg, var(--primary-green), var(--light-green));\n color: var(--white);\n padding: 30px;\n border-radius: 24px;\n text-align: center;\n box-shadow: var(--shadow);\n margin-bottom: 30px;\n border-bottom: 6px solid var(--yellow-accent);\n }\n\n header h1 { margin: 0; font-size: 2rem; font-weight: 700; }\n header p { margin: 10px 0 0; opacity: 0.9; font-weight: 300; }\n\n \/* Stats Cards *\/\n .summary-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-card {\n background: var(--white);\n padding: 20px;\n border-radius: 20px;\n text-align: center;\n box-shadow: var(--shadow);\n border: 1px solid #e0f2f1;\n transition: transform 0.3s ease;\n }\n\n .stat-card:hover { transform: translateY(-5px); }\n .stat-card i { font-size: 2rem; color: var(--primary-green); margin-bottom: 10px; }\n .stat-card .value { font-size: 2.2rem; font-weight: 700; color: #333; display: block; }\n .stat-card .label { color: #666; font-size: 0.9rem; font-weight: 700; }\n\n \/* Filter Section *\/\n .filter-area {\n background: var(--white);\n padding: 20px;\n border-radius: 20px;\n margin-bottom: 30px;\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: center;\n box-shadow: var(--shadow);\n }\n\n .filter-group { flex: 1; min-width: 280px; }\n .filter-group label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--primary-green); }\n \n input, select {\n width: 100%;\n padding: 12px 18px;\n border: 2px solid #e8f5e9;\n border-radius: 12px;\n font-size: 1rem;\n outline: none;\n transition: 0.3s;\n background-color: #fcfdfc;\n font-family: 'Sarabun', sans-serif;\n }\n\n input:focus, select:focus { border-color: var(--primary-green); background-color: #fff; }\n\n \/* Visualization Grid *\/\n .charts-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n gap: 25px;\n margin-bottom: 30px;\n }\n\n .chart-box {\n background: var(--white);\n padding: 25px;\n border-radius: 24px;\n box-shadow: var(--shadow);\n text-align: center;\n min-height: 350px;\n }\n\n .chart-box h3 { margin-top: 0; color: var(--primary-green); font-size: 1.1rem; margin-bottom: 20px; }\n\n \/* Table Section *\/\n .table-section {\n background: var(--white);\n padding: 25px;\n border-radius: 24px;\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .table-section h3 { margin-top: 0; color: var(--primary-green); display: flex; align-items: center; gap: 10px; }\n\n .table-wrapper {\n overflow-x: auto;\n border-radius: 15px;\n border: 1px solid #eee;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.95rem;\n }\n\n thead th {\n background-color: var(--primary-green);\n color: var(--white);\n padding: 15px;\n text-align: left;\n font-weight: 400;\n white-space: nowrap;\n }\n\n tbody td {\n padding: 12px 15px;\n border-bottom: 1px solid #f0f0f0;\n white-space: nowrap; \/* \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27\u0e15\u0e32\u0e21\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 *\/\n }\n\n tbody tr:nth-child(even) { background-color: #f9fdf9; }\n tbody tr:hover { background-color: #fffde7; }\n\n .badge-type {\n background: #e8f5e9;\n color: var(--primary-green);\n padding: 4px 10px;\n border-radius: 8px;\n font-size: 0.8rem;\n font-weight: 700;\n border: 1px solid #c8e6c9;\n }\n\n @media (max-width: 768px) {\n .charts-container { grid-template-columns: 1fr; }\n header h1 { font-size: 1.5rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"dashboard-container\">\n <header>\n <h1><i class=\"fas fa-chart-line\"><\/i> \u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 \u0e28\u0e1e\u0e01. \u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32<\/h1>\n <p>\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e19\u0e04\u0e23\u0e1e\u0e19\u0e21<\/p>\n <\/header>\n\n \n <div class=\"summary-grid\">\n <div class=\"stat-card\">\n <i class=\"fas fa-store-alt\"><\/i>\n <span class=\"value\" id=\"stat-total\">0<\/span>\n <span class=\"label\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/span>\n <\/div>\n <div class=\"stat-card\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <span class=\"value\" id=\"stat-subs\">0<\/span>\n <span class=\"label\">\u0e15\u0e33\u0e1a\u0e25\u0e17\u0e35\u0e48\u0e21\u0e35\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22<\/span>\n <\/div>\n <div class=\"stat-card\">\n <i class=\"fas fa-tags\"><\/i>\n <span class=\"value\" id=\"stat-types\">0<\/span>\n <span class=\"label\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"filter-area\">\n <div class=\"filter-group\">\n <label><i class=\"fas fa-search\"><\/i> \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e14\u0e49\u0e27\u0e22\u0e0a\u0e37\u0e48\u0e2d\u0e28\u0e39\u0e19\u0e22\u0e4c \u0e2b\u0e23\u0e37\u0e2d \u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19:<\/label>\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32...\" onkeyup=\"filterDashboard()\">\n <\/div>\n <div class=\"filter-group\">\n <label><i class=\"fas fa-filter\"><\/i> \u0e40\u0e25\u0e37\u0e2d\u0e01\u0e15\u0e33\u0e1a\u0e25:<\/label>\n <select id=\"subDistrictFilter\" onchange=\"filterDashboard()\">\n <option value=\"\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\">— \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e38\u0e01\u0e15\u0e33\u0e1a\u0e25 —<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div class=\"charts-container\">\n <div class=\"chart-box\">\n <h3><i class=\"fas fa-chart-bar\"><\/i> \u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e23\u0e32\u0e22\u0e15\u0e33\u0e1a\u0e25 (\u0e0a\u0e48\u0e27\u0e07\u0e25\u0e30 2-10)<\/h3>\n <div style=\"height: 300px;\"><canvas id=\"barChart\"><\/canvas><\/div>\n <\/div>\n <div class=\"chart-box\">\n <h3><i class=\"fas fa-chart-pie\"><\/i> \u0e2a\u0e31\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2b\u0e25\u0e31\u0e01<\/h3>\n <div style=\"height: 300px;\"><canvas id=\"pieChart\"><\/canvas><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"table-section\">\n <h3><i class=\"fas fa-list-ul\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e22 (\u0e41\u0e1a\u0e1a\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14\u0e40\u0e14\u0e35\u0e22\u0e27)<\/h3>\n <div class=\"table-wrapper\">\n <table id=\"mainTable\">\n <thead>\n <tr>\n <th>\u0e25\u0e33\u0e14\u0e31\u0e1a<\/th>\n <th>\u0e0a\u0e37\u0e48\u0e2d\u0e28\u0e39\u0e19\u0e22\u0e4c<\/th>\n <th>\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e2b\u0e25\u0e31\u0e01<\/th>\n <th>\u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48 (\u0e21.\/\u0e15\u0e33\u0e1a\u0e25)<\/th>\n <th>\u0e1b\u0e23\u0e30\u0e18\u0e32\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c<\/th>\n <th>\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tableBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Raw Data from provided CSV logic\n const dataset = [\n { id: 1, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e32\u0e23\u0e1c\u0e25\u0e34\u0e15\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32\u0e40\u0e01\u0e29\u0e15\u0e23\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"1\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e22\u0e13\u0e20\u0e31\u0e17\u0e23 \u0e28\u0e34\u0e23\u0e34\u0e27\u0e38\u0e18\", tel: \"-\" },\n { id: 2, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e33\u0e08\u0e31\u0e14\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", type: \"\u0e28\u0e08\u0e0a.\", moo: \"2\", sub: \"\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", leader: \"\u0e19\u0e32\u0e22\u0e1a\u0e38\u0e0d\u0e40\u0e23\u0e37\u0e2d\u0e07 \u0e0a\u0e31\u0e22\u0e1a\u0e34\u0e19\", tel: \"080-1987389\" },\n { id: 3, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e01\u0e29\u0e15\u0e23\u0e17\u0e24\u0e29\u0e0e\u0e35\u0e43\u0e2b\u0e21\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"7\", sub: \"\u0e17\u0e48\u0e32\u0e40\u0e23\u0e37\u0e2d\", leader: \"\u0e19\u0e32\u0e22\u0e2a\u0e31\u0e07\u0e27\u0e23 \u0e0a\u0e31\u0e22\u0e1b\u0e31\u0e0d\u0e2b\u0e32\", tel: \"-\" },\n { id: 4, name: \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e01\u0e25\u0e38\u0e48\u0e21\u0e41\u0e21\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e01\u0e23\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e01\u0e23\u0e30\u0e15\u0e34\u0e4a\u0e1a\u0e02\u0e49\u0e32\u0e27\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e07\u0e2d\u0e27\u0e19 \u0e1b\u0e34\u0e25\u0e2d\u0e07\", tel: \"-\" },\n { id: 5, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e14\u0e34\u0e19\u0e1b\u0e38\u0e4b\u0e22\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", type: \"\u0e28\u0e14\u0e1b\u0e0a.\", moo: \"7\", sub: \"\u0e19\u0e32\u0e04\u0e39\u0e13\u0e43\u0e2b\u0e0d\u0e48\", leader: \"\u0e19\u0e32\u0e22\u0e1e\u0e35\u0e23\u0e30\u0e1e\u0e07\u0e28\u0e4c \u0e40\u0e23\u0e37\u0e2d\u0e07\u0e02\u0e27\u0e31\u0e0d\", tel: \"085-7792842\" },\n { id: 6, name: \"\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e21\u0e31\u0e14\u0e2b\u0e21\u0e35\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e19\u0e19\u0e2a\u0e30\u0e2d\u0e32\u0e14\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"12\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e23\u0e32\u0e15\u0e23\u0e35 \u0e2d\u0e38\u0e2a\u0e32\u0e1e\u0e23\u0e2b\u0e21\", tel: \"098-2076751\" },\n { id: 7, name: \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\u0e15\u0e33\u0e1a\u0e25\u0e19\u0e32\u0e07\u0e31\u0e27\", type: \"\u0e14\u0e49\u0e32\u0e19\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\", moo: \"2\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2b\u0e22\u0e31\u0e14 \u0e23\u0e32\u0e0a\u0e0a\u0e21\u0e1e\u0e39\", tel: \"-\" },\n { id: 8, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e41\u0e25\u0e30\u0e40\u0e01\u0e29\u0e15\u0e23\u0e17\u0e24\u0e29\u0e0e\u0e35\u0e43\u0e2b\u0e21\u0e48\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"2\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e07\u0e04\u0e25 \u0e19\u0e32\u0e42\u0e04\u0e27\u0e07\u0e04\u0e4c\", tel: \"-\" },\n { id: 9, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23 \u0e2a.\u0e0a\u0e31\u0e22\u0e23\u0e31\u0e15\u0e19\u0e4c\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e0a\u0e31\u0e22\u0e23\u0e31\u0e15\u0e19\u0e4c \u0e1e\u0e25\u0e20\u0e31\u0e01\u0e14\u0e35\", tel: \"-\" },\n { id: 10, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e28\u0e31\u0e15\u0e23\u0e39\u0e1e\u0e37\u0e0a\u0e0a\u0e38\u0e21\u0e0a\u0e19\", type: \"\u0e28\u0e08\u0e0a.\", moo: \"5\", sub: \"\u0e19\u0e32\u0e07\u0e31\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e27\u0e34\u0e17\u0e22\u0e4c \u0e19\u0e32\u0e42\u0e04\u0e27\u0e07\u0e04\u0e4c\", tel: \"-\" },\n { id: 11, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"14\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e34\u0e48\u0e07 \u0e0a\u0e32\u0e41\u0e2a\u0e19\", tel: \"-\" },\n { id: 12, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e2b\u0e31\u0e15\u0e16\u0e01\u0e23\u0e23\u0e21\u0e27\u0e31\u0e14\u0e18\u0e32\u0e15\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e23\u0e31\u0e15\u0e19\u0e32 \u0e21\u0e2b\u0e32\u0e42\u0e04\u0e15\u0e23\", tel: \"081-3694086\" },\n { id: 13, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e25\u0e32\u0e22\u0e02\u0e34\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"4\", sub: \"\u0e19\u0e32\u0e2b\u0e27\u0e49\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e42\u0e2e\u0e21 \u0e21\u0e30\u0e25\u0e34\u0e1a\u0e38\u0e0d\", tel: \"089-5743477\" },\n { id: 14, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1e\u0e37\u0e49\u0e19\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e14\u0e2d\u0e19\u0e41\u0e14\u0e07\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"2\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e2d\u0e27\u0e22\u0e1e\u0e23 \u0e19\u0e04\u0e23\u0e0a\u0e31\u0e22\", tel: \"080-7539343\" },\n { id: 15, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e01\u0e29\u0e15\u0e23\u0e1c\u0e2a\u0e21\u0e1c\u0e2a\u0e32\u0e19\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"10\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e22\u0e21\u0e34\u0e48\u0e07 \u0e0a\u0e32\u0e41\u0e2a\u0e19\", tel: \"-\" },\n { id: 16, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e16\u0e32\u0e1a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e40\u0e07\u0e34\u0e19\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e14\u0e2d\u0e19\u0e1e\u0e30\u0e18\u0e32\u0e22\", type: \"\u0e28\u0e1e\u0e01.\/\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e1e\u0e2d\u0e40\u0e1e\u0e35\u0e22\u0e07\", moo: \"2\", sub: \"\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e2a\u0e35\u0e22\u0e27\", leader: \"\u0e19\u0e32\u0e07\u0e41\u0e2a\u0e07\u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e2a\u0e38\u0e04\u0e33\u0e20\u0e32\", tel: \"085-7561875\" },\n { id: 17, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e17\u0e2d\u0e40\u0e2a\u0e37\u0e48\u0e2d\u0e01\u0e01\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", type: \"\u0e17\u0e48\u0e2d\u0e07\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e40\u0e0a\u0e34\u0e07\u0e40\u0e01\u0e29\u0e15\u0e23\", moo: \"5\", sub: \"\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", leader: \"\u0e19\u0e32\u0e07\u0e22\u0e38\u0e23\u0e14\u0e32 \u0e04\u0e33\u0e21\u0e35\u0e41\u0e14\u0e07\", tel: \"085-7517651\" },\n { id: 18, name: \"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e31\u0e15\u0e27\u0e4c\u0e1a\u0e49\u0e32\u0e19\u0e14\u0e2d\u0e19\u0e28\u0e32\u0e25\u0e32\", type: \"\u0e14\u0e49\u0e32\u0e19\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\", moo: \"11\", sub: \"\u0e40\u0e2b\u0e25\u0e48\u0e32\u0e1e\u0e31\u0e12\u0e19\u0e32\", leader: \"\u0e19\u0e32\u0e22\u0e08\u0e33\u0e23\u0e31\u0e2a \u0e27\u0e07\u0e28\u0e32\u0e25\u0e32\", tel: \"-\" }\n ];\n\n let barChart, pieChart;\n\n \/\/ Initialize Dashboard\n window.onload = function() {\n populateFilters();\n initCharts();\n filterDashboard();\n };\n\n function populateFilters() {\n const subDistricts = [...new Set(dataset.map(d => d.sub))].sort();\n const select = document.getElementById('subDistrictFilter');\n subDistricts.forEach(sub => {\n const opt = document.createElement('option');\n opt.value = sub;\n opt.innerText = sub;\n select.appendChild(opt);\n });\n }\n\n function initCharts() {\n \/\/ Bar Chart Initial\n const ctxBar = document.getElementById('barChart').getContext('2d');\n barChart = new Chart(ctxBar, {\n type: 'bar',\n data: { labels: [], datasets: [{ label: '\u0e08\u0e33\u0e19\u0e27\u0e19\u0e28\u0e39\u0e19\u0e22\u0e4c', data: [], backgroundColor: '#4caf50', borderRadius: 8 }] },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: { \n beginAtZero: true, \n max: 10, \/\/ Max data range according to requirement\n ticks: { stepSize: 2 } \/\/ Range 2-10 as requested\n }\n },\n plugins: { legend: { display: false } }\n }\n });\n\n \/\/ Pie Chart Initial\n const ctxPie = document.getElementById('pieChart').getContext('2d');\n pieChart = new Chart(ctxPie, {\n type: 'doughnut',\n data: { labels: [], datasets: [{ data: [], backgroundColor: ['#2e7d32', '#66bb6a', '#fbc02d', '#fff176', '#a5d6a7', '#ffeb3b'] }] },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15, font: { family: 'Sarabun' } } } }\n }\n });\n }\n\n function filterDashboard() {\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\n const subFilter = document.getElementById('subDistrictFilter').value;\n\n \/\/ Filtering logic\n const filteredData = dataset.filter(item => {\n const matchesSearch = item.name.toLowerCase().includes(searchTerm) || item.leader.toLowerCase().includes(searchTerm);\n const matchesSub = subFilter === '\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14' || item.sub === subFilter;\n return matchesSearch && matchesSub;\n });\n\n updateTable(filteredData);\n updateStats(filteredData);\n updateChartsData(filteredData);\n }\n\n function updateTable(data) {\n const tbody = document.getElementById('tableBody');\n tbody.innerHTML = '';\n\n if (data.length === 0) {\n tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align:center; padding: 40px; color: #999;\">\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32<\/td><\/tr>';\n return;\n }\n\n data.forEach((item, index) => {\n const row = `\n <tr>\n <td>${index + 1}<\/td>\n <td style=\"font-weight:700; color:var(--primary-green)\">${item.name}<\/td>\n <td><span class=\"badge-type\">${item.type}<\/span><\/td>\n <td>\u0e2b\u0e21\u0e39\u0e48 ${item.moo} \u0e15.${item.sub}<\/td>\n <td>${item.leader}<\/td>\n <td>${item.tel}<\/td>\n <\/tr>\n `;\n tbody.innerHTML += row;\n });\n }\n\n function updateStats(data) {\n document.getElementById('stat-total').innerText = data.length;\n const subSet = new Set(data.map(i => i.sub));\n document.getElementById('stat-subs').innerText = subSet.size;\n const typeSet = new Set(data.map(i => i.type));\n document.getElementById('stat-types').innerText = typeSet.size;\n }\n\n function updateChartsData(data) {\n \/\/ Aggregate for Bar Chart (By Sub-district)\n const subCounts = {};\n data.forEach(item => {\n subCounts[item.sub] = (subCounts[item.sub] || 0) + 1;\n });\n\n barChart.data.labels = Object.keys(subCounts);\n barChart.data.datasets[0].data = Object.values(subCounts);\n barChart.update();\n\n \/\/ Aggregate for Pie Chart (By Activity Type)\n const typeCounts = {};\n data.forEach(item => {\n typeCounts[item.type] = (typeCounts[item.type] || 0) + 1;\n });\n\n pieChart.data.labels = Object.keys(typeCounts);\n pieChart.data.datasets[0].data = Object.values(typeCounts);\n pieChart.update();\n }\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48 […]<\/p>\n","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1911","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin_nawa","author_link":"https:\/\/nakhonphanom.doae.go.th\/nawa\/blog\/author\/admin_nawa\/"},"uagb_comment_info":0,"uagb_excerpt":"\u0e41\u0e14\u0e0a\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e04\u0e23\u0e37\u0e2d\u0e02\u0e48 […]","_links":{"self":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/comments?post=1911"}],"version-history":[{"count":1,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911\/revisions"}],"predecessor-version":[{"id":1912,"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/pages\/1911\/revisions\/1912"}],"wp:attachment":[{"href":"https:\/\/nakhonphanom.doae.go.th\/nawa\/wp-json\/wp\/v2\/media?parent=1911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}