\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2a\u0e2b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Sarabun', sans-serif;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 min-h-screen text-slate-800\">\r\n\r\n \r\n <div id=\"login-view\" class=\"min-h-screen flex items-center justify-center p-4\">\r\n <div class=\"bg-white rounded-2xl shadow-lg border border-slate-200 p-8 w-full max-w-md\">\r\n <div class=\"flex flex-col items-center mb-6\">\r\n <div class=\"p-4 bg-blue-100 text-blue-600 rounded-full mb-4\">\r\n <i data-lucide=\"lock\" class=\"w-8 h-8\"><\/i>\r\n <\/div>\r\n <h1 class=\"text-2xl font-bold text-center\">\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a<\/h1>\r\n <p class=\"text-slate-500 text-center mt-1\">\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2a\u0e2b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e1b\u0e49\u0e19\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07<\/p>\r\n <\/div>\r\n \r\n <form id=\"login-form\" class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19<\/label>\r\n <input \r\n type=\"password\" \r\n id=\"password-input\"\r\n placeholder=\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\"\r\n class=\"w-full rounded-lg border border-slate-300 p-3 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 focus:outline-none transition-all text-center tracking-widest\"\r\n autofocus\r\n required\r\n \/>\r\n <p id=\"login-error\" class=\"text-red-500 text-sm mt-2 text-center font-medium hidden\">\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/p>\r\n <\/div>\r\n <button \r\n type=\"submit\" \r\n class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors shadow-sm\"\r\n >\r\n \u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"app-view\" class=\"hidden max-w-6xl mx-auto space-y-6 p-4 md:p-8\">\r\n \r\n \r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 flex flex-col md:flex-row items-center justify-between gap-4\">\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"p-3 bg-blue-100 text-blue-600 rounded-xl\">\r\n <i data-lucide=\"book-open\" class=\"w-8 h-8\"><\/i>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-2xl font-bold\">\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2a\u0e2b\u0e01\u0e23\u0e13\u0e4c\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19<\/h1>\r\n <p class=\"text-slate-500\">\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e1b\u0e49\u0e19\u0e2a\u0e32\u0e21\u0e31\u0e04\u0e04\u0e35\u0e23\u0e32\u0e29\u0e0e\u0e23\u0e4c\u0e1a\u0e33\u0e23\u0e38\u0e07<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200 flex items-center gap-4\">\r\n <div class=\"p-3 bg-green-100 text-green-600 rounded-full\">\r\n <i data-lucide=\"trending-up\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm font-medium text-slate-500\">\u0e23\u0e32\u0e22\u0e23\u0e31\u0e1a\u0e23\u0e27\u0e21<\/p>\r\n <p class=\"text-2xl font-bold text-green-600\"><span id=\"sum-income\">0.00<\/span> <span class=\"text-sm font-normal text-slate-500\">\u0e1a\u0e32\u0e17<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200 flex items-center gap-4\">\r\n <div class=\"p-3 bg-red-100 text-red-600 rounded-full\">\r\n <i data-lucide=\"trending-down\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm font-medium text-slate-500\">\u0e23\u0e32\u0e22\u0e08\u0e48\u0e32\u0e22\u0e23\u0e27\u0e21<\/p>\r\n <p class=\"text-2xl font-bold text-red-600\"><span id=\"sum-expense\">0.00<\/span> <span class=\"text-sm font-normal text-slate-500\">\u0e1a\u0e32\u0e17<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-blue-200 flex items-center gap-4 ring-1 ring-blue-50\">\r\n <div class=\"p-3 bg-blue-600 text-white rounded-full\">\r\n <i data-lucide=\"wallet\" class=\"w-6 h-6\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm font-medium text-slate-500\">\u0e22\u0e2d\u0e14\u0e04\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19<\/p>\r\n <p class=\"text-2xl font-bold text-blue-700\"><span id=\"sum-balance\">0.00<\/span> <span class=\"text-sm font-normal text-slate-500\">\u0e1a\u0e32\u0e17<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\r\n \r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 lg:col-span-1 h-fit\">\r\n <h2 class=\"text-lg font-semibold mb-4 flex items-center gap-2\">\r\n <i data-lucide=\"plus-circle\" class=\"w-5 h-5 text-blue-500\"><\/i> \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e21\u0e48\r\n <\/h2>\r\n <form id=\"tx-form\" class=\"space-y-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/label>\r\n <input type=\"date\" id=\"tx-date\" class=\"w-full rounded-lg border-slate-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none\">\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 (\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22)<\/label>\r\n <input type=\"text\" id=\"tx-desc\" placeholder=\"\u0e40\u0e0a\u0e48\u0e19 \u0e0b\u0e37\u0e49\u0e2d\u0e02\u0e19\u0e21, \u0e17\u0e38\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23...\" class=\"w-full rounded-lg border-slate-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17<\/label>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <label id=\"label-income\" class=\"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-green-50 border-green-500 text-green-700\">\r\n <input type=\"radio\" name=\"tx-type\" value=\"income\" checked class=\"hidden\">\r\n <i data-lucide=\"trending-up\" class=\"w-4 h-4\"><\/i> \u0e23\u0e32\u0e22\u0e23\u0e31\u0e1a\r\n <\/label>\r\n <label id=\"label-expense\" class=\"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100\">\r\n <input type=\"radio\" name=\"tx-type\" value=\"expense\" class=\"hidden\">\r\n <i data-lucide=\"trending-down\" class=\"w-4 h-4\"><\/i> \u0e23\u0e32\u0e22\u0e08\u0e48\u0e32\u0e22\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">\u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19 (\u0e1a\u0e32\u0e17)<\/label>\r\n <input type=\"number\" id=\"tx-amount\" placeholder=\"0.00\" step=\"0.01\" min=\"0\" class=\"w-full rounded-lg border-slate-300 border p-2.5 focus:ring-2 focus:ring-blue-500 outline-none\">\r\n <\/div>\r\n\r\n <p id=\"tx-error\" class=\"text-red-500 text-sm font-medium hidden\">\u0e01\u0e23\u0e38\u0e13\u0e32\u0e01\u0e23\u0e2d\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e27\u0e31\u0e19\u0e17\u0e35\u0e48, \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e41\u0e25\u0e30 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e40\u0e07\u0e34\u0e19 \u0e43\u0e2b\u0e49\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19<\/p>\r\n\r\n <button type=\"submit\" class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 rounded-lg transition-colors mt-2\">\r\n \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden lg:col-span-2\">\r\n <div class=\"overflow-x-auto\">\r\n <table class=\"w-full text-left border-collapse min-w-[600px]\">\r\n <thead>\r\n <tr class=\"bg-slate-50 border-b border-slate-200 text-slate-600 text-sm\">\r\n <th class=\"p-4 font-semibold w-[15%] whitespace-nowrap\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48<\/th>\r\n <th class=\"p-4 font-semibold w-[35%]\">\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/th>\r\n <th class=\"p-4 font-semibold text-right w-[15%]\">\u0e23\u0e32\u0e22\u0e23\u0e31\u0e1a<\/th>\r\n <th class=\"p-4 font-semibold text-right w-[15%]\">\u0e23\u0e32\u0e22\u0e08\u0e48\u0e32\u0e22<\/th>\r\n <th class=\"p-4 font-semibold text-right w-[15%]\">\u0e04\u0e07\u0e40\u0e2b\u0e25\u0e37\u0e2d<\/th>\r\n <th class=\"p-4 font-semibold text-center w-[5%]\"><\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tx-table-body\" class=\"divide-y divide-slate-100 text-slate-700\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script type=\"module\">\r\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-app.js\";\r\n import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-auth.js\";\r\n import { getFirestore, collection, onSnapshot, doc, setDoc, deleteDoc } from \"https:\/\/www.gstatic.com\/firebasejs\/11.6.1\/firebase-firestore.js\";\r\n\r\n \/\/ \u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e48\u0e27\u0e19\u0e01\u0e25\u0e32\u0e07\r\n let transactions = [];\r\n let isAppUnlocked = false; \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e43\u0e2a\u0e48\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19 kruMay \u0e1c\u0e48\u0e32\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e22\u0e31\u0e07\r\n\r\n \/\/ ==========================================\r\n \/\/ 1. \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e41\u0e25\u0e30\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 (Firebase)\r\n \/\/ ==========================================\r\n let db, auth, userId;\r\n const appId = typeof __app_id !== 'undefined' ? __app_id : 'school-coop-app';\r\n\r\n try {\r\n const firebaseConfig = JSON.parse(typeof __firebase_config !== 'undefined' ? __firebase_config : '{}');\r\n const app = initializeApp(firebaseConfig);\r\n auth = getAuth(app);\r\n db = getFirestore(app);\r\n \r\n \/\/ \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e32\u0e23\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e15\u0e31\u0e27\u0e15\u0e19 (Authentication) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n const initAuth = async () => {\r\n if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {\r\n await signInWithCustomToken(auth, __initial_auth_token);\r\n } else {\r\n await signInAnonymously(auth);\r\n }\r\n };\r\n \r\n initAuth();\r\n\r\n \/\/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\r\n onAuthStateChanged(auth, (user) => {\r\n if (user) {\r\n userId = user.uid;\r\n setupDatabaseListener(); \/\/ \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08 \u0e43\u0e2b\u0e49\u0e44\u0e1b\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n } else {\r\n userId = null;\r\n }\r\n });\r\n } catch (error) {\r\n console.error(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:\", error);\r\n }\r\n\r\n \/\/ ==========================================\r\n \/\/ 2. \u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e1a\u0e1a Real-time \u0e08\u0e32\u0e01\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n \/\/ ==========================================\r\n function setupDatabaseListener() {\r\n if (!userId || !db) return;\r\n \r\n const txRef = collection(db, 'artifacts', appId, 'users', userId, 'transactions');\r\n \r\n \/\/ onSnapshot \u0e08\u0e30\u0e04\u0e2d\u0e22\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e21\u0e48\u0e17\u0e31\u0e19\u0e17\u0e35\u0e17\u0e35\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e41\u0e1b\u0e25\u0e07\r\n onSnapshot(txRef, (snapshot) => {\r\n transactions = [];\r\n snapshot.forEach((doc) => {\r\n transactions.push({ id: doc.id, ...doc.data() });\r\n });\r\n \r\n \/\/ \u0e16\u0e49\u0e32\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e01\u0e23\u0e2d\u0e01\u0e23\u0e2b\u0e31\u0e2a\u0e1c\u0e48\u0e32\u0e19\u0e1c\u0e48\u0e32\u0e19\u0e41\u0e25\u0e49\u0e27 \u0e43\u0e2b\u0e49\u0e27\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e43\u0e2b\u0e21\u0e48\r\n if (isAppUnlocked) {\r\n renderApp();\r\n }\r\n }, (error) => {\r\n console.error(\"\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:\", error);\r\n });\r\n }\r\n\r\n \/\/ \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\r\n document.getElementById('tx-date').value = new Date().toISOString().split('T')[0];\r\n lucide.createIcons();\r\n\r\n \/\/ ==========================================\r\n \/\/ 3. \u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e23\u0e30\u0e1a\u0e1a (Login)\r\n \/\/ ==========================================\r\n const loginForm = document.getElementById('login-form');\r\n const passwordInput = document.getElementById('password-input');\r\n const loginError = document.getElementById('login-error');\r\n const loginView = document.getElementById('login-view');\r\n const appView = document.getElementById('app-view');\r\n\r\n loginForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n if (passwordInput.value === 'kruMay') {\r\n loginView.classList.add('hidden');\r\n loginView.classList.remove('flex');\r\n appView.classList.remove('hidden');\r\n isAppUnlocked = true;\r\n renderApp(); \/\/ \u0e40\u0e23\u0e34\u0e48\u0e21\u0e04\u0e33\u0e19\u0e27\u0e13\u0e41\u0e25\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e15\u0e32\u0e23\u0e32\u0e07\r\n } else {\r\n loginError.classList.remove('hidden');\r\n passwordInput.classList.add('border-red-300', 'focus:ring-red-200', 'focus:border-red-500');\r\n }\r\n });\r\n\r\n \/\/ ==========================================\r\n \/\/ 4. \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e04\u0e33\u0e19\u0e27\u0e13\u0e41\u0e25\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\r\n \/\/ ==========================================\r\n function formatNumber(num) {\r\n if (num === null || num === undefined) return '-';\r\n return Number(num).toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n }\r\n\r\n function formatDateThai(dateString) {\r\n const date = new Date(dateString);\r\n const day = String(date.getDate()).padStart(2, '0');\r\n const month = String(date.getMonth() + 1).padStart(2, '0');\r\n const year = date.getFullYear() + 543;\r\n return `${day}\/${month}\/${year.toString().slice(-2)}`;\r\n }\r\n\r\n function processData() {\r\n \/\/ \u0e40\u0e23\u0e35\u0e22\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48\u0e08\u0e32\u0e01\u0e2d\u0e14\u0e35\u0e15 -> \u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19 (\u0e41\u0e25\u0e30\u0e40\u0e23\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e40\u0e27\u0e25\u0e32\u0e17\u0e35\u0e48\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01)\r\n const sorted = [...transactions].sort((a, b) => {\r\n if (a.date !== b.date) {\r\n return new Date(a.date) - new Date(b.date);\r\n }\r\n return (a.createdAt || 0) - (b.createdAt || 0);\r\n });\r\n\r\n let runningBalance = 0;\r\n let totalIncome = 0;\r\n let totalExpense = 0;\r\n\r\n const formatted = sorted.map(t => {\r\n const amount = parseFloat(t.amount);\r\n if (t.type === 'income') {\r\n runningBalance += amount;\r\n totalIncome += amount;\r\n } else {\r\n runningBalance -= amount;\r\n totalExpense += amount;\r\n }\r\n return { ...t, balance: runningBalance };\r\n });\r\n\r\n return { list: formatted, totalIncome, totalExpense, currentBalance: runningBalance };\r\n }\r\n\r\n function renderApp() {\r\n const data = processData();\r\n \r\n document.getElementById('sum-income').innerText = formatNumber(data.totalIncome);\r\n document.getElementById('sum-expense').innerText = formatNumber(data.totalExpense);\r\n document.getElementById('sum-balance').innerText = formatNumber(data.currentBalance);\r\n\r\n const tbody = document.getElementById('tx-table-body');\r\n tbody.innerHTML = '';\r\n\r\n if (data.list.length === 0) {\r\n tbody.innerHTML = `<tr><td colSpan=\"6\" class=\"p-8 text-center text-slate-400\">\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e0d\u0e0a\u0e35 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e23\u0e01\u0e44\u0e14\u0e49\u0e40\u0e25\u0e22<\/td><\/tr>`;\r\n } else {\r\n data.list.forEach((item, index) => {\r\n const showDate = index === 0 || item.date !== data.list[index - 1].date;\r\n const dateText = showDate ? formatDateThai(item.date) : '';\r\n const incomeText = item.type === 'income' ? formatNumber(item.amount) : '';\r\n const expenseText = item.type === 'expense' ? formatNumber(item.amount) : '';\r\n\r\n const tr = document.createElement('tr');\r\n tr.className = \"hover:bg-slate-50 transition-colors\";\r\n tr.innerHTML = `\r\n <td class=\"p-4 text-sm text-slate-500\">${dateText}<\/td>\r\n <td class=\"p-4\">${item.description}<\/td>\r\n <td class=\"p-4 text-right text-green-600\">${incomeText}<\/td>\r\n <td class=\"p-4 text-right text-red-500\">${expenseText}<\/td>\r\n <td class=\"p-4 text-right font-medium text-slate-800\">${formatNumber(item.balance)}<\/td>\r\n <td class=\"p-4 text-center\">\r\n <button onclick=\"deleteTransaction('${item.id}')\" class=\"p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors\" title=\"\u0e25\u0e1a\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\">\r\n <i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i>\r\n <\/button>\r\n <\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n lucide.createIcons();\r\n }\r\n\r\n \/\/ ==========================================\r\n \/\/ 5. \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e25\u0e30\u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n \/\/ ==========================================\r\n const txForm = document.getElementById('tx-form');\r\n const txError = document.getElementById('tx-error');\r\n\r\n txForm.addEventListener('submit', async (e) => {\r\n e.preventDefault();\r\n const date = document.getElementById('tx-date').value;\r\n const desc = document.getElementById('tx-desc').value;\r\n const type = document.querySelector('input[name=\"tx-type\"]:checked').value;\r\n const amount = document.getElementById('tx-amount').value;\r\n\r\n if (!date || !desc || !amount) {\r\n txError.classList.remove('hidden');\r\n return;\r\n }\r\n txError.classList.add('hidden');\r\n\r\n if (!userId || !db) {\r\n console.error(\"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e23\u0e2d\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...\");\r\n return;\r\n }\r\n\r\n \/\/ \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e48\u0e07\u0e02\u0e36\u0e49\u0e19\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n const newTx = {\r\n date: date,\r\n description: desc,\r\n type: type,\r\n amount: parseFloat(amount),\r\n createdAt: Date.now() \/\/ \u0e40\u0e01\u0e47\u0e1a\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e44\u0e27\u0e49\u0e40\u0e23\u0e35\u0e22\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\r\n };\r\n\r\n try {\r\n \/\/ \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e25\u0e07 Firestore\r\n const newDocRef = doc(collection(db, 'artifacts', appId, 'users', userId, 'transactions'));\r\n await setDoc(newDocRef, newTx);\r\n \r\n document.getElementById('tx-desc').value = '';\r\n document.getElementById('tx-amount').value = '';\r\n } catch (error) {\r\n console.error(\"\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08:\", error);\r\n }\r\n });\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e25\u0e1a\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e40\u0e23\u0e35\u0e22\u0e01\u0e1c\u0e48\u0e32\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07 (\u0e25\u0e1a\u0e08\u0e32\u0e01\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25)\r\n window.deleteTransaction = async function(id) {\r\n if (confirm('\u0e04\u0e38\u0e13\u0e41\u0e19\u0e48\u0e43\u0e08\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e19\u0e35\u0e49?')) {\r\n if (userId && db) {\r\n try {\r\n await deleteDoc(doc(db, 'artifacts', appId, 'users', userId, 'transactions', id));\r\n } catch (error) {\r\n console.error(\"\u0e25\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e21\u0e48\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08:\", error);\r\n }\r\n }\r\n }\r\n };\r\n\r\n \/\/ \u0e2a\u0e04\u0e23\u0e34\u0e1b\u0e15\u0e4c\u0e2a\u0e25\u0e31\u0e1a\u0e2a\u0e35\u0e1b\u0e38\u0e48\u0e21 Radio\r\n const typeRadios = document.querySelectorAll('input[name=\"tx-type\"]');\r\n const labelIncome = document.getElementById('label-income');\r\n const labelExpense = document.getElementById('label-expense');\r\n\r\n typeRadios.forEach(radio => {\r\n radio.addEventListener('change', () => {\r\n const selectedType = document.querySelector('input[name=\"tx-type\"]:checked').value;\r\n if (selectedType === 'income') {\r\n labelIncome.className = \"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-green-50 border-green-500 text-green-700\";\r\n labelExpense.className = \"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100\";\r\n } else {\r\n labelExpense.className = \"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-red-50 border-red-500 text-red-700\";\r\n labelIncome.className = \"cursor-pointer rounded-lg border p-3 flex items-center justify-center gap-2 transition-all bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100\";\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2a\u0e2b\u0e01\u0e23\u0e13 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","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-1873","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkaporn keumyarach","author_link":"https:\/\/banpan.ac.th\/?author=3"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"\u0e23\u0e30\u0e1a\u0e1a\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1a\u0e31\u0e0d\u0e0a\u0e35\u0e2a\u0e2b\u0e01\u0e23\u0e13 […]","_links":{"self":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1873"}],"version-history":[{"count":10,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1873\/revisions"}],"predecessor-version":[{"id":1883,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/1873\/revisions\/1883"}],"wp:attachment":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}