URA Tax Dashboard | Income & Expense Entry<\/title>\n <style>\n :root {\n --primary: #1a5632;\n --primary-light: #2d7a4a;\n --primary-dark: #0f3d21;\n --gold: #d4a843;\n --gold-light: #f0d078;\n --bg: #f5f6f8;\n --card-bg: #ffffff;\n --sidebar-bg: #0a1f14;\n --text: #1a1a2e;\n --text-light: #5a5a7a;\n --text-muted: #8888a0;\n --border: #e2e4ea;\n --danger: #d93030;\n --success: #1a8a3f;\n --warning: #e8a020;\n --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);\n --radius: 12px;\n --radius-sm: 8px;\n --transition: 0.2s ease;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n display: flex;\n min-height: 100vh;\n line-height: 1.5;\n overflow-x: hidden;\n }\n\n \/* STARTUP OVERLAY *\/\n .startup-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n padding: 20px;\n }\n .startup-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow-lg);\n padding: 30px 28px;\n width: 100%;\n max-width: 480px;\n text-align: center;\n }\n .startup-card h2 {\n font-size: 1.6rem;\n margin-bottom: 8px;\n color: var(--primary);\n }\n .startup-card .sub {\n color: var(--text-light);\n font-size: 0.9rem;\n margin-bottom: 24px;\n }\n .startup-card .form-group {\n margin-bottom: 16px;\n text-align: left;\n }\n .startup-card .form-label {\n font-weight: 600;\n font-size: 0.8rem;\n color: var(--text-light);\n display: block;\n margin-bottom: 4px;\n }\n .startup-card .form-input {\n width: 100%;\n padding: 12px 14px;\n border: 2px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n background: #fafbfc;\n }\n .startup-card .form-input:focus {\n border-color: var(--primary);\n outline: none;\n background: #fff;\n }\n .sponsor-link {\n display: inline-block;\n margin-top: 6px;\n color: var(--primary);\n font-weight: 600;\n text-decoration: none;\n font-size: 0.8rem;\n border: 1px solid var(--primary);\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s;\n }\n .sponsor-link:hover {\n background: var(--primary);\n color: #fff;\n }\n .btn-block {\n width: 100%;\n padding: 13px;\n font-weight: 700;\n font-size: 1rem;\n margin-top: 8px;\n }\n .startup-error {\n color: var(--danger);\n font-size: 0.8rem;\n margin-top: 5px;\n min-height: 20px;\n }\n\n \/* SIDEBAR *\/\n .sidebar {\n width: 260px;\n min-width: 260px;\n background: var(--sidebar-bg);\n color: #d0d8d4;\n display: flex;\n flex-direction: column;\n position: sticky;\n top: 0;\n height: 100vh;\n z-index: 100;\n transition: transform var(--transition);\n box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);\n }\n .sidebar-header {\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .sidebar-logo {\n width: 40px;\n height: 40px;\n background: var(--gold);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n font-size: 1.2rem;\n color: var(--primary-dark);\n flex-shrink: 0;\n }\n .sidebar-title {\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n letter-spacing: -0.3px;\n }\n .sidebar-subtitle {\n font-size: 0.7rem;\n color: #8a9a90;\n font-weight: 500;\n }\n .sidebar-nav {\n flex: 1;\n padding: 16px 12px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n overflow-y: auto;\n }\n .nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 500;\n font-size: 0.9rem;\n transition: all var(--transition);\n color: #b0bcb4;\n background: none;\n border: none;\n width: 100%;\n text-align: left;\n }\n .nav-item:hover {\n background: rgba(255, 255, 255, 0.05);\n color: #e8ece9;\n }\n .nav-item.active {\n background: var(--primary);\n color: #fff;\n font-weight: 600;\n box-shadow: 0 4px 12px rgba(26, 86, 50, 0.4);\n }\n .nav-icon {\n font-size: 1.2rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n }\n .sidebar-footer {\n padding: 16px 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 0.75rem;\n color: #6a7a70;\n text-align: center;\n }\n\n \/* MAIN *\/\n .main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n overflow-x: hidden;\n }\n .topbar {\n background: var(--card-bg);\n padding: 14px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--border);\n gap: 16px;\n flex-wrap: wrap;\n position: sticky;\n top: 0;\n z-index: 50;\n box-shadow: var(--shadow);\n }\n .topbar-left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .menu-toggle {\n display: none;\n background: none;\n border: none;\n font-size: 1.6rem;\n cursor: pointer;\n padding: 6px;\n color: var(--text);\n line-height: 1;\n }\n .page-title {\n font-size: 1.3rem;\n font-weight: 700;\n letter-spacing: -0.4px;\n color: var(--text);\n }\n .company-badge {\n background: var(--primary-light);\n color: #fff;\n padding: 4px 14px;\n border-radius: 20px;\n font-weight: 600;\n font-size: 0.8rem;\n }\n .topbar-right {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .date-display {\n font-size: 0.85rem;\n color: var(--text-light);\n font-weight: 500;\n }\n .content {\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n flex: 1;\n }\n\n \/* STATS ROW *\/\n .stats-row {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n }\n .stat-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n padding: 18px 20px;\n box-shadow: var(--shadow);\n display: flex;\n align-items: center;\n gap: 14px;\n transition: all var(--transition);\n border: 1px solid transparent;\n }\n .stat-card:hover {\n box-shadow: var(--shadow-lg);\n border-color: var(--border);\n }\n .stat-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n flex-shrink: 0;\n }\n .stat-icon.income {\n background: #e6f7ee;\n color: #1a8a3f;\n }\n .stat-icon.expense {\n background: #fde8e8;\n color: #d93030;\n }\n .stat-icon.balance {\n background: #eef2ff;\n color: #3b4fbf;\n }\n .stat-icon.pending {\n background: #fff8e6;\n color: #c47a0a;\n }\n .stat-info .stat-label {\n font-size: 0.78rem;\n color: var(--text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n .stat-info .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n color: var(--text);\n }\n\n \/* CARDS *\/\n .card {\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 22px 24px;\n border: 1px solid transparent;\n }\n .card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 18px;\n flex-wrap: wrap;\n gap: 10px;\n }\n .card-title {\n font-size: 1.1rem;\n font-weight: 700;\n letter-spacing: -0.3px;\n }\n .badge {\n font-size: 0.7rem;\n padding: 5px 10px;\n border-radius: 20px;\n font-weight: 600;\n letter-spacing: 0.3px;\n }\n .badge-ura {\n background: #e8f0ec;\n color: var(--primary);\n }\n\n \/* TWO COLUMN *\/\n .two-col {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n @media (max-width: 900px) {\n .two-col {\n grid-template-columns: 1fr;\n }\n }\n\n \/* FORM *\/\n .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px 16px;\n }\n @media (max-width: 500px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n }\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n .form-group.full {\n grid-column: 1 \/ -1;\n }\n .form-label {\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--text-light);\n letter-spacing: 0.2px;\n }\n .form-input,\n .form-select,\n .form-textarea {\n padding: 11px 14px;\n border: 2px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.9rem;\n font-family: inherit;\n background: #fafbfc;\n transition: all var(--transition);\n color: var(--text);\n width: 100%;\n }\n .form-input:focus,\n .form-select:focus,\n .form-textarea:focus {\n outline: none;\n border-color: var(--primary-light);\n box-shadow: 0 0 0 3px rgba(26, 86, 50, 0.08);\n background: #fff;\n }\n .form-textarea {\n resize: vertical;\n min-height: 70px;\n }\n .btn {\n padding: 11px 22px;\n border-radius: var(--radius-sm);\n font-weight: 600;\n font-size: 0.9rem;\n cursor: pointer;\n border: none;\n transition: all var(--transition);\n letter-spacing: 0.2px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n background: none;\n }\n .btn-primary {\n background: var(--primary);\n color: #fff;\n }\n .btn-primary:hover {\n background: var(--primary-dark);\n box-shadow: 0 4px 14px rgba(26, 86, 50, 0.35);\n transform: translateY(-1px);\n }\n .btn-outline {\n background: #fff;\n color: var(--primary);\n border: 2px solid var(--primary);\n }\n .btn-outline:hover {\n background: #f0faf3;\n }\n .btn-danger {\n background: #fff;\n color: var(--danger);\n border: 2px solid var(--danger);\n }\n .btn-sm {\n padding: 6px 14px;\n font-size: 0.78rem;\n border-radius: 6px;\n }\n .btn-group {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n \/* TABLE *\/\n .table-wrap {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.85rem;\n min-width: 700px;\n }\n table th,\n table td {\n padding: 12px 14px;\n text-align: left;\n border-bottom: 1px solid var(--border);\n }\n table th {\n font-weight: 700;\n color: var(--text-light);\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n background: #f9fafb;\n }\n table tbody tr:hover {\n background: #fafdfb;\n }\n .type-badge {\n padding: 4px 10px;\n border-radius: 20px;\n font-size: 0.72rem;\n font-weight: 700;\n }\n .type-badge.income {\n background: #e6f7ee;\n color: #1a8a3f;\n }\n .type-badge.expense {\n background: #fde8e8;\n color: #c0392b;\n }\n .action-btns {\n display: flex;\n gap: 6px;\n }\n\n \/* MODAL *\/\n .modal-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n align-items: center;\n justify-content: center;\n z-index: 300;\n padding: 20px;\n }\n .modal-overlay.active {\n display: flex;\n }\n .modal {\n background: #fff;\n border-radius: var(--radius);\n padding: 24px;\n max-width: 500px;\n width: 100%;\n box-shadow: var(--shadow-lg);\n }\n\n \/* TOAST *\/\n .toast {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #222;\n color: #fff;\n padding: 14px 22px;\n border-radius: 10px;\n font-weight: 600;\n z-index: 9999;\n opacity: 0;\n transform: translateY(20px);\n pointer-events: none;\n transition: all 0.35s ease;\n }\n .toast.show {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n .toast.success { background: #1a8a3f; }\n .toast.error { background: #c0392b; }\n\n \/* PRINT *\/\n @media print {\n body { background: #fff; }\n .sidebar, .topbar, .btn, .menu-toggle, .modal-overlay, .toast, .startup-overlay {\n display: none !important;\n }\n .main { overflow: visible; }\n .content { padding: 0; }\n table { font-size: 0.75rem; }\n }\n\n \/* MOBILE *\/\n @media (max-width: 768px) {\n .sidebar {\n position: fixed;\n left: 0;\n top: 0;\n height: 100vh;\n transform: translateX(-100%);\n z-index: 200;\n }\n .sidebar.open {\n transform: translateX(0);\n }\n .menu-toggle { display: block; }\n .overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n z-index: 150;\n }\n .overlay.active { display: block; }\n .content { padding: 16px; }\n .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }\n }\n @media (max-width: 400px) {\n .stats-row { grid-template-columns: 1fr; }\n .topbar { padding: 10px 14px; }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"startup-overlay\" id=\"startupOverlay\">\n <div class=\"startup-card\">\n <h2>\ud83d\udd10 Company Access<\/h2>\n <p class=\"sub\">Enter your company details and sponsor code to continue.<\/p>\n <div class=\"form-group\">\n <label class=\"form-label\">Company Name *<\/label>\n <input type=\"text\" class=\"form-input\" id=\"companyNameInput\" placeholder=\"Your registered company name\" autocomplete=\"off\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Sponsor Code *<\/label>\n <input type=\"text\" class=\"form-input\" id=\"sponsorCodeInput\" placeholder=\"Enter sponsor code\">\n <a href=\"https:\/\/cashchatbank.com\" target=\"_blank\" rel=\"noopener\" class=\"sponsor-link\">\ud83d\udd17 Get Sponsor Code<\/a>\n <\/div>\n <div class=\"startup-error\" id=\"startupError\"><\/div>\n <button class=\"btn btn-primary btn-block\" id=\"startupSubmit\">\ud83d\ude80 Access Dashboard<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"overlay\" id=\"overlay\"><\/div>\n\n \n <aside class=\"sidebar\" id=\"sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-logo\">URA<\/div>\n <div>\n <div class=\"sidebar-title\">Tax Dashboard<\/div>\n <div class=\"sidebar-subtitle\">Uganda Revenue Authority<\/div>\n <\/div>\n <\/div>\n <nav class=\"sidebar-nav\">\n <button class=\"nav-item active\" data-page=\"dashboard\"><span class=\"nav-icon\">\ud83d\udcca<\/span> Dashboard<\/button>\n <button class=\"nav-item\" data-page=\"income-form\"><span class=\"nav-icon\">\ud83d\udcb0<\/span> Record Income<\/button>\n <button class=\"nav-item\" data-page=\"expense-form\"><span class=\"nav-icon\">\ud83d\udccb<\/span> Record Expense<\/button>\n <button class=\"nav-item\" data-page=\"transactions\"><span class=\"nav-icon\">\ud83d\udcdc<\/span> All Transactions<\/button>\n <\/nav>\n <div class=\"sidebar-footer\">© 2025 URA-Compliant | v2.0<\/div>\n <\/aside>\n\n \n <div class=\"main\">\n <header class=\"topbar\">\n <div class=\"topbar-left\">\n <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"Menu\">\u2630<\/button>\n <span class=\"page-title\" id=\"pageTitle\">Dashboard<\/span>\n <span class=\"company-badge\" id=\"companyBadge\">\ud83c\udfe2 Company<\/span>\n <\/div>\n <div class=\"topbar-right\">\n <span class=\"date-display\" id=\"currentDate\"><\/span>\n <div class=\"user-avatar\" style=\"width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;\">\ud83d\udc64<\/div>\n <\/div>\n <\/header>\n <div class=\"content\" id=\"pageContent\"><\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"editModal\">\n <div class=\"modal\">\n <h3 style=\"margin-bottom:16px;\">\u270f\ufe0f Edit Transaction<\/h3>\n <form id=\"editForm\" class=\"form-grid\">\n <input type=\"hidden\" name=\"editId\">\n <div class=\"form-group\">\n <label class=\"form-label\">Date<\/label>\n <input type=\"date\" class=\"form-input\" name=\"editDate\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Category<\/label>\n <select class=\"form-select\" name=\"editCategory\" required><\/select>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Amount (UGX)<\/label>\n <input type=\"number\" class=\"form-input\" name=\"editAmount\" min=\"1\" step=\"0.01\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Status<\/label>\n <select class=\"form-select\" name=\"editStatus\">\n <option value=\"completed\">Completed<\/option>\n <option value=\"pending\">Pending<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group full\">\n <label class=\"form-label\">Description<\/label>\n <textarea class=\"form-textarea\" name=\"editDescription\"><\/textarea>\n <\/div>\n <div class=\"form-group full btn-group\">\n <button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Update<\/button>\n <button type=\"button\" class=\"btn btn-outline\" id=\"closeEditModal\">Cancel<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div class=\"toast\" id=\"toast\"><\/div>\n\n <script>\n (function() {\n \/\/ URA Categories\n const URA_INCOME_CATEGORIES = [\n 'Business Income','Employment Income','Rental Income','Agricultural Income',\n 'Investment Income (Dividends)','Investment Income (Interest)','Capital Gains',\n 'Royalty Income','Professional \/ Consultancy Fees','Other Income'\n ];\n const URA_EXPENSE_CATEGORIES = [\n 'Cost of Goods Sold','Salaries and Wages','Rent Expenses','Repairs and Maintenance',\n 'Bad Debts Written Off','Depreciation & Amortization','Interest Expenses',\n 'Insurance Premiums','Professional & Legal Fees','Office Supplies & Stationery',\n 'Transport & Travel Expenses','Advertising & Marketing','Utilities (Electricity, Water)',\n 'Communication (Internet, Airtime)','Taxes, Licenses & Permits','Staff Welfare & Training',\n 'Security Expenses','Cleaning & Sanitation','Bank Charges','Other Allowable Expenses'\n ];\n\n \/\/ State\n let currentCompany = '';\n let currentSponsor = '';\n let transactions = JSON.parse(localStorage.getItem('ura_all_transactions')) || [];\n let currentPage = 'dashboard';\n\n \/\/ DOM refs\n const startupOverlay = document.getElementById('startupOverlay');\n const companyNameInput = document.getElementById('companyNameInput');\n const sponsorCodeInput = document.getElementById('sponsorCodeInput');\n const startupError = document.getElementById('startupError');\n const startupSubmit = document.getElementById('startupSubmit');\n const companyBadge = document.getElementById('companyBadge');\n const pageTitle = document.getElementById('pageTitle');\n const pageContent = document.getElementById('pageContent');\n const toast = document.getElementById('toast');\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('overlay');\n const menuToggle = document.getElementById('menuToggle');\n const editModal = document.getElementById('editModal');\n const editForm = document.getElementById('editForm');\n const closeEditModalBtn = document.getElementById('closeEditModal');\n const navItems = document.querySelectorAll('.nav-item');\n\n \/\/ Helpers\n function formatCurrency(amount) {\n return 'UGX ' + Number(amount).toLocaleString('en-UG', { minimumFractionDigits: 0 });\n }\n function formatDate(dateStr) {\n return new Date(dateStr).toLocaleDateString('en-UG', { year:'numeric', month:'short', day:'numeric' });\n }\n function getToday() { return new Date().toISOString().split('T')[0]; }\n function showToast(msg, type='success') {\n toast.textContent = msg;\n toast.className = 'toast '+type+' show';\n clearTimeout(toast._timeout);\n toast._timeout = setTimeout(() => toast.classList.remove('show'), 2800);\n }\n function saveAllTransactions() {\n localStorage.setItem('ura_all_transactions', JSON.stringify(transactions));\n }\n\n \/\/ Filter transactions for current company\n function companyTransactions() {\n return transactions.filter(t => t.company === currentCompany);\n }\n\n function getStats() {\n const compTx = companyTransactions();\n let totalIncome = 0, totalExpense = 0;\n compTx.forEach(t => {\n if (t.type === 'income') totalIncome += t.amount;\n else totalExpense += t.amount;\n });\n return {\n totalIncome, totalExpense,\n balance: totalIncome - totalExpense,\n count: compTx.length\n };\n }\n\n \/\/ Render table (accepts an array of transactions)\n function renderTable(data) {\n if (!data.length) {\n return `<div class=\"empty-state\" style=\"text-align:center;padding:40px;\"><span style=\"font-size:3rem;\">\ud83d\udced<\/span><p>No transactions yet.<\/p><\/div>`;\n }\n return `\n <div class=\"table-wrap\">\n <table>\n <thead><tr><th>Date<\/th><th>Type<\/th><th>Category<\/th><th>Description<\/th><th>Amount<\/th><th>Status<\/th><th>Actions<\/th><\/tr><\/thead>\n <tbody>\n ${data.map(t => `\n <tr>\n <td>${formatDate(t.date)}<\/td>\n <td><span class=\"type-badge ${t.type}\">${t.type==='income'?'Income':'Expense'}<\/span><\/td>\n <td>${t.category}<\/td>\n <td>${t.description || '\u2014'}<\/td>\n <td><strong>${formatCurrency(t.amount)}<\/strong><\/td>\n <td>${t.status==='completed'?'\u2705 Completed':'\u23f3 Pending'}<\/td>\n <td class=\"action-btns\">\n <button class=\"btn btn-outline btn-sm edit-btn\" data-id=\"${t.id}\">\u270f\ufe0f<\/button>\n <button class=\"btn btn-danger btn-sm delete-btn\" data-id=\"${t.id}\">\ud83d\uddd1\ufe0f<\/button>\n <\/td>\n <\/tr>\n `).join('')}\n <\/tbody>\n <\/table>\n <\/div>`;\n }\n\n \/\/ Page renderers\n function renderDashboard() {\n const stats = getStats();\n pageTitle.textContent = 'Dashboard';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"stats-row\">\n <div class=\"stat-card\"><div class=\"stat-icon income\">\ud83d\udcc8<\/div><div class=\"stat-info\"><div class=\"stat-label\">Total Income<\/div><div class=\"stat-value\">${formatCurrency(stats.totalIncome)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon expense\">\ud83d\udcc9<\/div><div class=\"stat-info\"><div class=\"stat-label\">Total Expenses<\/div><div class=\"stat-value\">${formatCurrency(stats.totalExpense)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon balance\">\ud83d\udc8e<\/div><div class=\"stat-info\"><div class=\"stat-label\">Net Balance<\/div><div class=\"stat-value\">${formatCurrency(stats.balance)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon pending\">\ud83d\udcdd<\/div><div class=\"stat-info\"><div class=\"stat-label\">Entries<\/div><div class=\"stat-value\">${stats.count}<\/div><\/div><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udccb Recent Transactions<\/span><span class=\"badge badge-ura\">URA Compliant<\/span><\/div>\n ${renderTable(companyTransactions().slice(-8).reverse())}\n <\/div>\n `;\n attachTableEvents();\n }\n\n function renderIncomeForm() {\n pageTitle.textContent = 'Record Income';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udcb0 New Income Entry<\/span><span class=\"badge badge-ura\">URA Categories<\/span><\/div>\n <form id=\"incomeForm\" class=\"form-grid\">\n <div class=\"form-group\"><label class=\"form-label\">Date *<\/label><input type=\"date\" class=\"form-input\" name=\"date\" value=\"${getToday()}\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Category *<\/label><select class=\"form-select\" name=\"category\" required>\n <option value=\"\">-- Select --<\/option>${URA_INCOME_CATEGORIES.map(c=>`<option>${c}<\/option>`).join('')}\n <\/select><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Amount (UGX) *<\/label><input type=\"number\" class=\"form-input\" name=\"amount\" min=\"1\" step=\"0.01\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Status<\/label><select class=\"form-select\" name=\"status\"><option value=\"completed\">Completed<\/option><option value=\"pending\">Pending<\/option><\/select><\/div>\n <div class=\"form-group full\"><label class=\"form-label\">Description<\/label><textarea class=\"form-textarea\" name=\"description\"><\/textarea><\/div>\n <div class=\"form-group full btn-group\"><button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save<\/button><button type=\"reset\" class=\"btn btn-outline\">\ud83d\udd04 Reset<\/button><\/div>\n <\/form>\n <\/div>`;\n document.getElementById('incomeForm').addEventListener('submit', handleIncomeSubmit);\n }\n\n function renderExpenseForm() {\n pageTitle.textContent = 'Record Expense';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udccb New Expense Entry<\/span><span class=\"badge badge-ura\">URA Deductions<\/span><\/div>\n <form id=\"expenseForm\" class=\"form-grid\">\n <div class=\"form-group\"><label class=\"form-label\">Date *<\/label><input type=\"date\" class=\"form-input\" name=\"date\" value=\"${getToday()}\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Category *<\/label><select class=\"form-select\" name=\"category\" required>\n <option value=\"\">-- Select --<\/option>${URA_EXPENSE_CATEGORIES.map(c=>`<option>${c}<\/option>`).join('')}\n <\/select><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Amount (UGX) *<\/label><input type=\"number\" class=\"form-input\" name=\"amount\" min=\"1\" step=\"0.01\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Status<\/label><select class=\"form-select\" name=\"status\"><option value=\"completed\">Completed<\/option><option value=\"pending\">Pending<\/option><\/select><\/div>\n <div class=\"form-group full\"><label class=\"form-label\">Description<\/label><textarea class=\"form-textarea\" name=\"description\"><\/textarea><\/div>\n <div class=\"form-group full btn-group\"><button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save<\/button><button type=\"reset\" class=\"btn btn-outline\">\ud83d\udd04 Reset<\/button><\/div>\n <\/form>\n <\/div>`;\n document.getElementById('expenseForm').addEventListener('submit', handleExpenseSubmit);\n }\n\n function renderTransactionsPage() {\n pageTitle.textContent = 'All Transactions';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n const compTx = companyTransactions().reverse();\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udcdc Transaction History<\/span><span class=\"badge badge-ura\">${compTx.length} entries<\/span><\/div>\n <div style=\"display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;\">\n <input type=\"text\" id=\"searchInput\" class=\"form-input\" placeholder=\"\ud83d\udd0d Search...\" style=\"max-width:300px;\">\n <select id=\"filterType\" class=\"form-select\" style=\"max-width:160px;\">\n <option value=\"all\">All<\/option><option value=\"income\">Income<\/option><option value=\"expense\">Expense<\/option>\n <\/select>\n <button class=\"btn btn-outline btn-sm\" id=\"clearFilters\">Clear<\/button>\n <button class=\"btn btn-primary btn-sm\" id=\"exportCSV\">\ud83d\udce5 CSV<\/button>\n <button class=\"btn btn-outline btn-sm\" id=\"printTable\">\ud83d\udda8\ufe0f PDF\/Print<\/button>\n <\/div>\n <div id=\"filteredTable\">${renderTable(compTx)}<\/div>\n <\/div>`;\n attachTableEvents();\n \/\/ Filter logic\n const searchInput = document.getElementById('searchInput');\n const filterType = document.getElementById('filterType');\n const filteredDiv = document.getElementById('filteredTable');\n function applyFilters() {\n let filtered = compTx;\n const q = searchInput.value.toLowerCase().trim();\n const type = filterType.value;\n if (type !== 'all') filtered = filtered.filter(t => t.type === type);\n if (q) filtered = filtered.filter(t => t.category.toLowerCase().includes(q) || (t.description||'').toLowerCase().includes(q));\n filteredDiv.innerHTML = renderTable(filtered);\n attachTableEvents();\n }\n searchInput.addEventListener('input', applyFilters);\n filterType.addEventListener('change', applyFilters);\n document.getElementById('clearFilters').addEventListener('click', ()=>{\n searchInput.value=''; filterType.value='all'; applyFilters();\n });\n document.getElementById('exportCSV').addEventListener('click', exportToCSV);\n document.getElementById('printTable').addEventListener('click', ()=> window.print());\n }\n\n function attachTableEvents() {\n document.querySelectorAll('.edit-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const id = e.currentTarget.dataset.id;\n openEditModal(id);\n });\n });\n document.querySelectorAll('.delete-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const id = e.currentTarget.dataset.id;\n if (confirm('Delete this transaction permanently?')) {\n transactions = transactions.filter(t => t.id !== id);\n saveAllTransactions();\n showToast('Deleted.', 'error');\n navigateTo(currentPage);\n }\n });\n });\n }\n\n \/\/ Edit modal\n function openEditModal(id) {\n const txn = transactions.find(t => t.id === id);\n if (!txn) return;\n editForm.editId.value = txn.id;\n editForm.editDate.value = txn.date;\n editForm.editAmount.value = txn.amount;\n editForm.editStatus.value = txn.status;\n editForm.editDescription.value = txn.description || '';\n const catSelect = editForm.editCategory;\n catSelect.innerHTML = '';\n const categories = txn.type === 'income' ? URA_INCOME_CATEGORIES : URA_EXPENSE_CATEGORIES;\n categories.forEach(c => {\n const opt = document.createElement('option');\n opt.value = c; opt.textContent = c;\n if (c === txn.category) opt.selected = true;\n catSelect.appendChild(opt);\n });\n editModal.classList.add('active');\n }\n function closeEditModal() {\n editModal.classList.remove('active');\n }\n closeEditModalBtn.addEventListener('click', closeEditModal);\n editModal.addEventListener('click', (e) => { if (e.target === editModal) closeEditModal(); });\n editForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const id = editForm.editId.value;\n const txnIndex = transactions.findIndex(t => t.id === id);\n if (txnIndex === -1) return;\n transactions[txnIndex].date = editForm.editDate.value;\n transactions[txnIndex].category = editForm.editCategory.value;\n transactions[txnIndex].amount = parseFloat(editForm.editAmount.value);\n transactions[txnIndex].status = editForm.editStatus.value;\n transactions[txnIndex].description = editForm.editDescription.value.trim();\n saveAllTransactions();\n showToast('Transaction updated.', 'success');\n closeEditModal();\n navigateTo(currentPage);\n });\n\n \/\/ Form handlers\n function handleIncomeSubmit(e) {\n e.preventDefault();\n const form = e.target;\n const tx = {\n id: 'txn_'+Date.now()+'_'+Math.random().toString(36).substr(2,5),\n type: 'income',\n company: currentCompany,\n date: form.date.value,\n category: form.category.value,\n amount: parseFloat(form.amount.value),\n status: form.status.value,\n description: form.description.value.trim()\n };\n if (!tx.category || isNaN(tx.amount) || tx.amount<=0) {\n showToast('Fill all required fields correctly.', 'error'); return;\n }\n transactions.push(tx);\n saveAllTransactions();\n showToast('Income recorded!', 'success');\n form.reset();\n form.date.value = getToday();\n }\n function handleExpenseSubmit(e) {\n e.preventDefault();\n const form = e.target;\n const tx = {\n id: 'txn_'+Date.now()+'_'+Math.random().toString(36).substr(2,5),\n type: 'expense',\n company: currentCompany,\n date: form.date.value,\n category: form.category.value,\n amount: parseFloat(form.amount.value),\n status: form.status.value,\n description: form.description.value.trim()\n };\n if (!tx.category || isNaN(tx.amount) || tx.amount<=0) {\n showToast('Fill all required fields correctly.', 'error'); return;\n }\n transactions.push(tx);\n saveAllTransactions();\n showToast('Expense recorded!', 'success');\n form.reset();\n form.date.value = getToday();\n }\n\n \/\/ CSV Export\n function exportToCSV() {\n const compTx = companyTransactions();\n if (!compTx.length) { showToast('No data to export.', 'error'); return; }\n const headers = ['Date','Type','Category','Description','Amount (UGX)','Status'];\n const rows = compTx.map(t => [\n t.date,\n t.type,\n t.category,\n t.description || '',\n t.amount,\n t.status\n ]);\n let csvContent = headers.join(',') + '\\n';\n rows.forEach(row => {\n csvContent += row.map(val => `\"${val}\"`).join(',') + '\\n';\n });\n const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `URA_Transactions_${currentCompany.replace(\/\\s+\/g,'_')}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n showToast('CSV exported.', 'success');\n }\n\n \/\/ Navigation\n function navigateTo(page) {\n currentPage = page;\n navItems.forEach(item => item.classList.remove('active'));\n const activeNav = document.querySelector(`.nav-item[data-page=\"${page}\"]`);\n if (activeNav) activeNav.classList.add('active');\n switch(page) {\n case 'dashboard': renderDashboard(); break;\n case 'income-form': renderIncomeForm(); break;\n case 'expense-form': renderExpenseForm(); break;\n case 'transactions': renderTransactionsPage(); break;\n }\n if (window.innerWidth <= 768) {\n sidebar.classList.remove('open');\n overlay.classList.remove('active');\n }\n }\n navItems.forEach(item => {\n item.addEventListener('click', () => navigateTo(item.dataset.page));\n });\n\n \/\/ Mobile sidebar toggle\n menuToggle.addEventListener('click', () => {\n sidebar.classList.toggle('open');\n overlay.classList.toggle('active');\n });\n overlay.addEventListener('click', () => {\n sidebar.classList.remove('open');\n overlay.classList.remove('active');\n });\n\n \/\/ Startup flow\n function showStartup() {\n startupOverlay.style.display = 'flex';\n companyNameInput.value = '';\n sponsorCodeInput.value = '';\n startupError.textContent = '';\n }\n function hideStartup() {\n startupOverlay.style.display = 'none';\n }\n startupSubmit.addEventListener('click', () => {\n const name = companyNameInput.value.trim();\n const code = sponsorCodeInput.value.trim();\n if (!name || !code) {\n startupError.textContent = 'Both company name and sponsor code are required.';\n return;\n }\n currentCompany = name;\n currentSponsor = code;\n hideStartup();\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n navigateTo('dashboard');\n });\n\n \/\/ Init\n document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-UG', {\n weekday:'short', year:'numeric', month:'long', day:'numeric'\n });\n showStartup();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>URA Tax Dashboard | Income & Expense Entry \ud83d\udd10 Company Access Enter your company details and sponsor code to continue. Company Name * Sponsor Code * \ud83d\udd17 Get Sponsor Code \ud83d\ude80 Access Dashboard URA Tax Dashboard Uganda Revenue Authority \ud83d\udcca Dashboard \ud83d\udcb0 Record Income \ud83d\udccb Record Expense \ud83d\udcdc All Transactions © 2025 URA-Compliant | v2.0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-136","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":1,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/media?parent=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":136,"date":"2026-04-25T18:53:57","date_gmt":"2026-04-25T18:53:57","guid":{"rendered":"https:\/\/cashchat.se\/dir\/?page_id=136"},"modified":"2026-04-25T18:53:57","modified_gmt":"2026-04-25T18:53:57","slug":"tax","status":"publish","type":"page","link":"https:\/\/cashchat.se\/dir\/tax\/","title":{"rendered":"Tax"},"content":{"rendered":"\n\n\n\n \n \n URA Tax Dashboard | Income & Expense Entry<\/title>\n <style>\n :root {\n --primary: #1a5632;\n --primary-light: #2d7a4a;\n --primary-dark: #0f3d21;\n --gold: #d4a843;\n --gold-light: #f0d078;\n --bg: #f5f6f8;\n --card-bg: #ffffff;\n --sidebar-bg: #0a1f14;\n --text: #1a1a2e;\n --text-light: #5a5a7a;\n --text-muted: #8888a0;\n --border: #e2e4ea;\n --danger: #d93030;\n --success: #1a8a3f;\n --warning: #e8a020;\n --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);\n --radius: 12px;\n --radius-sm: 8px;\n --transition: 0.2s ease;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n display: flex;\n min-height: 100vh;\n line-height: 1.5;\n overflow-x: hidden;\n }\n\n \/* STARTUP OVERLAY *\/\n .startup-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(8px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n padding: 20px;\n }\n .startup-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow-lg);\n padding: 30px 28px;\n width: 100%;\n max-width: 480px;\n text-align: center;\n }\n .startup-card h2 {\n font-size: 1.6rem;\n margin-bottom: 8px;\n color: var(--primary);\n }\n .startup-card .sub {\n color: var(--text-light);\n font-size: 0.9rem;\n margin-bottom: 24px;\n }\n .startup-card .form-group {\n margin-bottom: 16px;\n text-align: left;\n }\n .startup-card .form-label {\n font-weight: 600;\n font-size: 0.8rem;\n color: var(--text-light);\n display: block;\n margin-bottom: 4px;\n }\n .startup-card .form-input {\n width: 100%;\n padding: 12px 14px;\n border: 2px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.95rem;\n background: #fafbfc;\n }\n .startup-card .form-input:focus {\n border-color: var(--primary);\n outline: none;\n background: #fff;\n }\n .sponsor-link {\n display: inline-block;\n margin-top: 6px;\n color: var(--primary);\n font-weight: 600;\n text-decoration: none;\n font-size: 0.8rem;\n border: 1px solid var(--primary);\n padding: 6px 12px;\n border-radius: 20px;\n transition: all 0.2s;\n }\n .sponsor-link:hover {\n background: var(--primary);\n color: #fff;\n }\n .btn-block {\n width: 100%;\n padding: 13px;\n font-weight: 700;\n font-size: 1rem;\n margin-top: 8px;\n }\n .startup-error {\n color: var(--danger);\n font-size: 0.8rem;\n margin-top: 5px;\n min-height: 20px;\n }\n\n \/* SIDEBAR *\/\n .sidebar {\n width: 260px;\n min-width: 260px;\n background: var(--sidebar-bg);\n color: #d0d8d4;\n display: flex;\n flex-direction: column;\n position: sticky;\n top: 0;\n height: 100vh;\n z-index: 100;\n transition: transform var(--transition);\n box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);\n }\n .sidebar-header {\n padding: 20px 24px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .sidebar-logo {\n width: 40px;\n height: 40px;\n background: var(--gold);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 900;\n font-size: 1.2rem;\n color: var(--primary-dark);\n flex-shrink: 0;\n }\n .sidebar-title {\n font-size: 1rem;\n font-weight: 700;\n color: #fff;\n letter-spacing: -0.3px;\n }\n .sidebar-subtitle {\n font-size: 0.7rem;\n color: #8a9a90;\n font-weight: 500;\n }\n .sidebar-nav {\n flex: 1;\n padding: 16px 12px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n overflow-y: auto;\n }\n .nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: 10px;\n cursor: pointer;\n font-weight: 500;\n font-size: 0.9rem;\n transition: all var(--transition);\n color: #b0bcb4;\n background: none;\n border: none;\n width: 100%;\n text-align: left;\n }\n .nav-item:hover {\n background: rgba(255, 255, 255, 0.05);\n color: #e8ece9;\n }\n .nav-item.active {\n background: var(--primary);\n color: #fff;\n font-weight: 600;\n box-shadow: 0 4px 12px rgba(26, 86, 50, 0.4);\n }\n .nav-icon {\n font-size: 1.2rem;\n width: 24px;\n text-align: center;\n flex-shrink: 0;\n }\n .sidebar-footer {\n padding: 16px 20px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font-size: 0.75rem;\n color: #6a7a70;\n text-align: center;\n }\n\n \/* MAIN *\/\n .main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n overflow-x: hidden;\n }\n .topbar {\n background: var(--card-bg);\n padding: 14px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--border);\n gap: 16px;\n flex-wrap: wrap;\n position: sticky;\n top: 0;\n z-index: 50;\n box-shadow: var(--shadow);\n }\n .topbar-left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .menu-toggle {\n display: none;\n background: none;\n border: none;\n font-size: 1.6rem;\n cursor: pointer;\n padding: 6px;\n color: var(--text);\n line-height: 1;\n }\n .page-title {\n font-size: 1.3rem;\n font-weight: 700;\n letter-spacing: -0.4px;\n color: var(--text);\n }\n .company-badge {\n background: var(--primary-light);\n color: #fff;\n padding: 4px 14px;\n border-radius: 20px;\n font-weight: 600;\n font-size: 0.8rem;\n }\n .topbar-right {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .date-display {\n font-size: 0.85rem;\n color: var(--text-light);\n font-weight: 500;\n }\n .content {\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n flex: 1;\n }\n\n \/* STATS ROW *\/\n .stats-row {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n }\n .stat-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n padding: 18px 20px;\n box-shadow: var(--shadow);\n display: flex;\n align-items: center;\n gap: 14px;\n transition: all var(--transition);\n border: 1px solid transparent;\n }\n .stat-card:hover {\n box-shadow: var(--shadow-lg);\n border-color: var(--border);\n }\n .stat-icon {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n flex-shrink: 0;\n }\n .stat-icon.income {\n background: #e6f7ee;\n color: #1a8a3f;\n }\n .stat-icon.expense {\n background: #fde8e8;\n color: #d93030;\n }\n .stat-icon.balance {\n background: #eef2ff;\n color: #3b4fbf;\n }\n .stat-icon.pending {\n background: #fff8e6;\n color: #c47a0a;\n }\n .stat-info .stat-label {\n font-size: 0.78rem;\n color: var(--text-muted);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n .stat-info .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n color: var(--text);\n }\n\n \/* CARDS *\/\n .card {\n background: var(--card-bg);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n padding: 22px 24px;\n border: 1px solid transparent;\n }\n .card-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 18px;\n flex-wrap: wrap;\n gap: 10px;\n }\n .card-title {\n font-size: 1.1rem;\n font-weight: 700;\n letter-spacing: -0.3px;\n }\n .badge {\n font-size: 0.7rem;\n padding: 5px 10px;\n border-radius: 20px;\n font-weight: 600;\n letter-spacing: 0.3px;\n }\n .badge-ura {\n background: #e8f0ec;\n color: var(--primary);\n }\n\n \/* TWO COLUMN *\/\n .two-col {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n }\n @media (max-width: 900px) {\n .two-col {\n grid-template-columns: 1fr;\n }\n }\n\n \/* FORM *\/\n .form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px 16px;\n }\n @media (max-width: 500px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n }\n .form-group {\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n .form-group.full {\n grid-column: 1 \/ -1;\n }\n .form-label {\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--text-light);\n letter-spacing: 0.2px;\n }\n .form-input,\n .form-select,\n .form-textarea {\n padding: 11px 14px;\n border: 2px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.9rem;\n font-family: inherit;\n background: #fafbfc;\n transition: all var(--transition);\n color: var(--text);\n width: 100%;\n }\n .form-input:focus,\n .form-select:focus,\n .form-textarea:focus {\n outline: none;\n border-color: var(--primary-light);\n box-shadow: 0 0 0 3px rgba(26, 86, 50, 0.08);\n background: #fff;\n }\n .form-textarea {\n resize: vertical;\n min-height: 70px;\n }\n .btn {\n padding: 11px 22px;\n border-radius: var(--radius-sm);\n font-weight: 600;\n font-size: 0.9rem;\n cursor: pointer;\n border: none;\n transition: all var(--transition);\n letter-spacing: 0.2px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n background: none;\n }\n .btn-primary {\n background: var(--primary);\n color: #fff;\n }\n .btn-primary:hover {\n background: var(--primary-dark);\n box-shadow: 0 4px 14px rgba(26, 86, 50, 0.35);\n transform: translateY(-1px);\n }\n .btn-outline {\n background: #fff;\n color: var(--primary);\n border: 2px solid var(--primary);\n }\n .btn-outline:hover {\n background: #f0faf3;\n }\n .btn-danger {\n background: #fff;\n color: var(--danger);\n border: 2px solid var(--danger);\n }\n .btn-sm {\n padding: 6px 14px;\n font-size: 0.78rem;\n border-radius: 6px;\n }\n .btn-group {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n \/* TABLE *\/\n .table-wrap {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.85rem;\n min-width: 700px;\n }\n table th,\n table td {\n padding: 12px 14px;\n text-align: left;\n border-bottom: 1px solid var(--border);\n }\n table th {\n font-weight: 700;\n color: var(--text-light);\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n background: #f9fafb;\n }\n table tbody tr:hover {\n background: #fafdfb;\n }\n .type-badge {\n padding: 4px 10px;\n border-radius: 20px;\n font-size: 0.72rem;\n font-weight: 700;\n }\n .type-badge.income {\n background: #e6f7ee;\n color: #1a8a3f;\n }\n .type-badge.expense {\n background: #fde8e8;\n color: #c0392b;\n }\n .action-btns {\n display: flex;\n gap: 6px;\n }\n\n \/* MODAL *\/\n .modal-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n align-items: center;\n justify-content: center;\n z-index: 300;\n padding: 20px;\n }\n .modal-overlay.active {\n display: flex;\n }\n .modal {\n background: #fff;\n border-radius: var(--radius);\n padding: 24px;\n max-width: 500px;\n width: 100%;\n box-shadow: var(--shadow-lg);\n }\n\n \/* TOAST *\/\n .toast {\n position: fixed;\n bottom: 30px;\n right: 30px;\n background: #222;\n color: #fff;\n padding: 14px 22px;\n border-radius: 10px;\n font-weight: 600;\n z-index: 9999;\n opacity: 0;\n transform: translateY(20px);\n pointer-events: none;\n transition: all 0.35s ease;\n }\n .toast.show {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n .toast.success { background: #1a8a3f; }\n .toast.error { background: #c0392b; }\n\n \/* PRINT *\/\n @media print {\n body { background: #fff; }\n .sidebar, .topbar, .btn, .menu-toggle, .modal-overlay, .toast, .startup-overlay {\n display: none !important;\n }\n .main { overflow: visible; }\n .content { padding: 0; }\n table { font-size: 0.75rem; }\n }\n\n \/* MOBILE *\/\n @media (max-width: 768px) {\n .sidebar {\n position: fixed;\n left: 0;\n top: 0;\n height: 100vh;\n transform: translateX(-100%);\n z-index: 200;\n }\n .sidebar.open {\n transform: translateX(0);\n }\n .menu-toggle { display: block; }\n .overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n z-index: 150;\n }\n .overlay.active { display: block; }\n .content { padding: 16px; }\n .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }\n }\n @media (max-width: 400px) {\n .stats-row { grid-template-columns: 1fr; }\n .topbar { padding: 10px 14px; }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"startup-overlay\" id=\"startupOverlay\">\n <div class=\"startup-card\">\n <h2>\ud83d\udd10 Company Access<\/h2>\n <p class=\"sub\">Enter your company details and sponsor code to continue.<\/p>\n <div class=\"form-group\">\n <label class=\"form-label\">Company Name *<\/label>\n <input type=\"text\" class=\"form-input\" id=\"companyNameInput\" placeholder=\"Your registered company name\" autocomplete=\"off\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Sponsor Code *<\/label>\n <input type=\"text\" class=\"form-input\" id=\"sponsorCodeInput\" placeholder=\"Enter sponsor code\">\n <a href=\"https:\/\/cashchatbank.com\" target=\"_blank\" rel=\"noopener\" class=\"sponsor-link\">\ud83d\udd17 Get Sponsor Code<\/a>\n <\/div>\n <div class=\"startup-error\" id=\"startupError\"><\/div>\n <button class=\"btn btn-primary btn-block\" id=\"startupSubmit\">\ud83d\ude80 Access Dashboard<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"overlay\" id=\"overlay\"><\/div>\n\n \n <aside class=\"sidebar\" id=\"sidebar\">\n <div class=\"sidebar-header\">\n <div class=\"sidebar-logo\">URA<\/div>\n <div>\n <div class=\"sidebar-title\">Tax Dashboard<\/div>\n <div class=\"sidebar-subtitle\">Uganda Revenue Authority<\/div>\n <\/div>\n <\/div>\n <nav class=\"sidebar-nav\">\n <button class=\"nav-item active\" data-page=\"dashboard\"><span class=\"nav-icon\">\ud83d\udcca<\/span> Dashboard<\/button>\n <button class=\"nav-item\" data-page=\"income-form\"><span class=\"nav-icon\">\ud83d\udcb0<\/span> Record Income<\/button>\n <button class=\"nav-item\" data-page=\"expense-form\"><span class=\"nav-icon\">\ud83d\udccb<\/span> Record Expense<\/button>\n <button class=\"nav-item\" data-page=\"transactions\"><span class=\"nav-icon\">\ud83d\udcdc<\/span> All Transactions<\/button>\n <\/nav>\n <div class=\"sidebar-footer\">© 2025 URA-Compliant | v2.0<\/div>\n <\/aside>\n\n \n <div class=\"main\">\n <header class=\"topbar\">\n <div class=\"topbar-left\">\n <button class=\"menu-toggle\" id=\"menuToggle\" aria-label=\"Menu\">\u2630<\/button>\n <span class=\"page-title\" id=\"pageTitle\">Dashboard<\/span>\n <span class=\"company-badge\" id=\"companyBadge\">\ud83c\udfe2 Company<\/span>\n <\/div>\n <div class=\"topbar-right\">\n <span class=\"date-display\" id=\"currentDate\"><\/span>\n <div class=\"user-avatar\" style=\"width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;\">\ud83d\udc64<\/div>\n <\/div>\n <\/header>\n <div class=\"content\" id=\"pageContent\"><\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"editModal\">\n <div class=\"modal\">\n <h3 style=\"margin-bottom:16px;\">\u270f\ufe0f Edit Transaction<\/h3>\n <form id=\"editForm\" class=\"form-grid\">\n <input type=\"hidden\" name=\"editId\">\n <div class=\"form-group\">\n <label class=\"form-label\">Date<\/label>\n <input type=\"date\" class=\"form-input\" name=\"editDate\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Category<\/label>\n <select class=\"form-select\" name=\"editCategory\" required><\/select>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Amount (UGX)<\/label>\n <input type=\"number\" class=\"form-input\" name=\"editAmount\" min=\"1\" step=\"0.01\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Status<\/label>\n <select class=\"form-select\" name=\"editStatus\">\n <option value=\"completed\">Completed<\/option>\n <option value=\"pending\">Pending<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group full\">\n <label class=\"form-label\">Description<\/label>\n <textarea class=\"form-textarea\" name=\"editDescription\"><\/textarea>\n <\/div>\n <div class=\"form-group full btn-group\">\n <button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Update<\/button>\n <button type=\"button\" class=\"btn btn-outline\" id=\"closeEditModal\">Cancel<\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div class=\"toast\" id=\"toast\"><\/div>\n\n <script>\n (function() {\n \/\/ URA Categories\n const URA_INCOME_CATEGORIES = [\n 'Business Income','Employment Income','Rental Income','Agricultural Income',\n 'Investment Income (Dividends)','Investment Income (Interest)','Capital Gains',\n 'Royalty Income','Professional \/ Consultancy Fees','Other Income'\n ];\n const URA_EXPENSE_CATEGORIES = [\n 'Cost of Goods Sold','Salaries and Wages','Rent Expenses','Repairs and Maintenance',\n 'Bad Debts Written Off','Depreciation & Amortization','Interest Expenses',\n 'Insurance Premiums','Professional & Legal Fees','Office Supplies & Stationery',\n 'Transport & Travel Expenses','Advertising & Marketing','Utilities (Electricity, Water)',\n 'Communication (Internet, Airtime)','Taxes, Licenses & Permits','Staff Welfare & Training',\n 'Security Expenses','Cleaning & Sanitation','Bank Charges','Other Allowable Expenses'\n ];\n\n \/\/ State\n let currentCompany = '';\n let currentSponsor = '';\n let transactions = JSON.parse(localStorage.getItem('ura_all_transactions')) || [];\n let currentPage = 'dashboard';\n\n \/\/ DOM refs\n const startupOverlay = document.getElementById('startupOverlay');\n const companyNameInput = document.getElementById('companyNameInput');\n const sponsorCodeInput = document.getElementById('sponsorCodeInput');\n const startupError = document.getElementById('startupError');\n const startupSubmit = document.getElementById('startupSubmit');\n const companyBadge = document.getElementById('companyBadge');\n const pageTitle = document.getElementById('pageTitle');\n const pageContent = document.getElementById('pageContent');\n const toast = document.getElementById('toast');\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('overlay');\n const menuToggle = document.getElementById('menuToggle');\n const editModal = document.getElementById('editModal');\n const editForm = document.getElementById('editForm');\n const closeEditModalBtn = document.getElementById('closeEditModal');\n const navItems = document.querySelectorAll('.nav-item');\n\n \/\/ Helpers\n function formatCurrency(amount) {\n return 'UGX ' + Number(amount).toLocaleString('en-UG', { minimumFractionDigits: 0 });\n }\n function formatDate(dateStr) {\n return new Date(dateStr).toLocaleDateString('en-UG', { year:'numeric', month:'short', day:'numeric' });\n }\n function getToday() { return new Date().toISOString().split('T')[0]; }\n function showToast(msg, type='success') {\n toast.textContent = msg;\n toast.className = 'toast '+type+' show';\n clearTimeout(toast._timeout);\n toast._timeout = setTimeout(() => toast.classList.remove('show'), 2800);\n }\n function saveAllTransactions() {\n localStorage.setItem('ura_all_transactions', JSON.stringify(transactions));\n }\n\n \/\/ Filter transactions for current company\n function companyTransactions() {\n return transactions.filter(t => t.company === currentCompany);\n }\n\n function getStats() {\n const compTx = companyTransactions();\n let totalIncome = 0, totalExpense = 0;\n compTx.forEach(t => {\n if (t.type === 'income') totalIncome += t.amount;\n else totalExpense += t.amount;\n });\n return {\n totalIncome, totalExpense,\n balance: totalIncome - totalExpense,\n count: compTx.length\n };\n }\n\n \/\/ Render table (accepts an array of transactions)\n function renderTable(data) {\n if (!data.length) {\n return `<div class=\"empty-state\" style=\"text-align:center;padding:40px;\"><span style=\"font-size:3rem;\">\ud83d\udced<\/span><p>No transactions yet.<\/p><\/div>`;\n }\n return `\n <div class=\"table-wrap\">\n <table>\n <thead><tr><th>Date<\/th><th>Type<\/th><th>Category<\/th><th>Description<\/th><th>Amount<\/th><th>Status<\/th><th>Actions<\/th><\/tr><\/thead>\n <tbody>\n ${data.map(t => `\n <tr>\n <td>${formatDate(t.date)}<\/td>\n <td><span class=\"type-badge ${t.type}\">${t.type==='income'?'Income':'Expense'}<\/span><\/td>\n <td>${t.category}<\/td>\n <td>${t.description || '\u2014'}<\/td>\n <td><strong>${formatCurrency(t.amount)}<\/strong><\/td>\n <td>${t.status==='completed'?'\u2705 Completed':'\u23f3 Pending'}<\/td>\n <td class=\"action-btns\">\n <button class=\"btn btn-outline btn-sm edit-btn\" data-id=\"${t.id}\">\u270f\ufe0f<\/button>\n <button class=\"btn btn-danger btn-sm delete-btn\" data-id=\"${t.id}\">\ud83d\uddd1\ufe0f<\/button>\n <\/td>\n <\/tr>\n `).join('')}\n <\/tbody>\n <\/table>\n <\/div>`;\n }\n\n \/\/ Page renderers\n function renderDashboard() {\n const stats = getStats();\n pageTitle.textContent = 'Dashboard';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"stats-row\">\n <div class=\"stat-card\"><div class=\"stat-icon income\">\ud83d\udcc8<\/div><div class=\"stat-info\"><div class=\"stat-label\">Total Income<\/div><div class=\"stat-value\">${formatCurrency(stats.totalIncome)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon expense\">\ud83d\udcc9<\/div><div class=\"stat-info\"><div class=\"stat-label\">Total Expenses<\/div><div class=\"stat-value\">${formatCurrency(stats.totalExpense)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon balance\">\ud83d\udc8e<\/div><div class=\"stat-info\"><div class=\"stat-label\">Net Balance<\/div><div class=\"stat-value\">${formatCurrency(stats.balance)}<\/div><\/div><\/div>\n <div class=\"stat-card\"><div class=\"stat-icon pending\">\ud83d\udcdd<\/div><div class=\"stat-info\"><div class=\"stat-label\">Entries<\/div><div class=\"stat-value\">${stats.count}<\/div><\/div><\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udccb Recent Transactions<\/span><span class=\"badge badge-ura\">URA Compliant<\/span><\/div>\n ${renderTable(companyTransactions().slice(-8).reverse())}\n <\/div>\n `;\n attachTableEvents();\n }\n\n function renderIncomeForm() {\n pageTitle.textContent = 'Record Income';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udcb0 New Income Entry<\/span><span class=\"badge badge-ura\">URA Categories<\/span><\/div>\n <form id=\"incomeForm\" class=\"form-grid\">\n <div class=\"form-group\"><label class=\"form-label\">Date *<\/label><input type=\"date\" class=\"form-input\" name=\"date\" value=\"${getToday()}\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Category *<\/label><select class=\"form-select\" name=\"category\" required>\n <option value=\"\">-- Select --<\/option>${URA_INCOME_CATEGORIES.map(c=>`<option>${c}<\/option>`).join('')}\n <\/select><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Amount (UGX) *<\/label><input type=\"number\" class=\"form-input\" name=\"amount\" min=\"1\" step=\"0.01\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Status<\/label><select class=\"form-select\" name=\"status\"><option value=\"completed\">Completed<\/option><option value=\"pending\">Pending<\/option><\/select><\/div>\n <div class=\"form-group full\"><label class=\"form-label\">Description<\/label><textarea class=\"form-textarea\" name=\"description\"><\/textarea><\/div>\n <div class=\"form-group full btn-group\"><button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save<\/button><button type=\"reset\" class=\"btn btn-outline\">\ud83d\udd04 Reset<\/button><\/div>\n <\/form>\n <\/div>`;\n document.getElementById('incomeForm').addEventListener('submit', handleIncomeSubmit);\n }\n\n function renderExpenseForm() {\n pageTitle.textContent = 'Record Expense';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udccb New Expense Entry<\/span><span class=\"badge badge-ura\">URA Deductions<\/span><\/div>\n <form id=\"expenseForm\" class=\"form-grid\">\n <div class=\"form-group\"><label class=\"form-label\">Date *<\/label><input type=\"date\" class=\"form-input\" name=\"date\" value=\"${getToday()}\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Category *<\/label><select class=\"form-select\" name=\"category\" required>\n <option value=\"\">-- Select --<\/option>${URA_EXPENSE_CATEGORIES.map(c=>`<option>${c}<\/option>`).join('')}\n <\/select><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Amount (UGX) *<\/label><input type=\"number\" class=\"form-input\" name=\"amount\" min=\"1\" step=\"0.01\" required><\/div>\n <div class=\"form-group\"><label class=\"form-label\">Status<\/label><select class=\"form-select\" name=\"status\"><option value=\"completed\">Completed<\/option><option value=\"pending\">Pending<\/option><\/select><\/div>\n <div class=\"form-group full\"><label class=\"form-label\">Description<\/label><textarea class=\"form-textarea\" name=\"description\"><\/textarea><\/div>\n <div class=\"form-group full btn-group\"><button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save<\/button><button type=\"reset\" class=\"btn btn-outline\">\ud83d\udd04 Reset<\/button><\/div>\n <\/form>\n <\/div>`;\n document.getElementById('expenseForm').addEventListener('submit', handleExpenseSubmit);\n }\n\n function renderTransactionsPage() {\n pageTitle.textContent = 'All Transactions';\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n const compTx = companyTransactions().reverse();\n pageContent.innerHTML = `\n <div class=\"card\">\n <div class=\"card-header\"><span class=\"card-title\">\ud83d\udcdc Transaction History<\/span><span class=\"badge badge-ura\">${compTx.length} entries<\/span><\/div>\n <div style=\"display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;\">\n <input type=\"text\" id=\"searchInput\" class=\"form-input\" placeholder=\"\ud83d\udd0d Search...\" style=\"max-width:300px;\">\n <select id=\"filterType\" class=\"form-select\" style=\"max-width:160px;\">\n <option value=\"all\">All<\/option><option value=\"income\">Income<\/option><option value=\"expense\">Expense<\/option>\n <\/select>\n <button class=\"btn btn-outline btn-sm\" id=\"clearFilters\">Clear<\/button>\n <button class=\"btn btn-primary btn-sm\" id=\"exportCSV\">\ud83d\udce5 CSV<\/button>\n <button class=\"btn btn-outline btn-sm\" id=\"printTable\">\ud83d\udda8\ufe0f PDF\/Print<\/button>\n <\/div>\n <div id=\"filteredTable\">${renderTable(compTx)}<\/div>\n <\/div>`;\n attachTableEvents();\n \/\/ Filter logic\n const searchInput = document.getElementById('searchInput');\n const filterType = document.getElementById('filterType');\n const filteredDiv = document.getElementById('filteredTable');\n function applyFilters() {\n let filtered = compTx;\n const q = searchInput.value.toLowerCase().trim();\n const type = filterType.value;\n if (type !== 'all') filtered = filtered.filter(t => t.type === type);\n if (q) filtered = filtered.filter(t => t.category.toLowerCase().includes(q) || (t.description||'').toLowerCase().includes(q));\n filteredDiv.innerHTML = renderTable(filtered);\n attachTableEvents();\n }\n searchInput.addEventListener('input', applyFilters);\n filterType.addEventListener('change', applyFilters);\n document.getElementById('clearFilters').addEventListener('click', ()=>{\n searchInput.value=''; filterType.value='all'; applyFilters();\n });\n document.getElementById('exportCSV').addEventListener('click', exportToCSV);\n document.getElementById('printTable').addEventListener('click', ()=> window.print());\n }\n\n function attachTableEvents() {\n document.querySelectorAll('.edit-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const id = e.currentTarget.dataset.id;\n openEditModal(id);\n });\n });\n document.querySelectorAll('.delete-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const id = e.currentTarget.dataset.id;\n if (confirm('Delete this transaction permanently?')) {\n transactions = transactions.filter(t => t.id !== id);\n saveAllTransactions();\n showToast('Deleted.', 'error');\n navigateTo(currentPage);\n }\n });\n });\n }\n\n \/\/ Edit modal\n function openEditModal(id) {\n const txn = transactions.find(t => t.id === id);\n if (!txn) return;\n editForm.editId.value = txn.id;\n editForm.editDate.value = txn.date;\n editForm.editAmount.value = txn.amount;\n editForm.editStatus.value = txn.status;\n editForm.editDescription.value = txn.description || '';\n const catSelect = editForm.editCategory;\n catSelect.innerHTML = '';\n const categories = txn.type === 'income' ? URA_INCOME_CATEGORIES : URA_EXPENSE_CATEGORIES;\n categories.forEach(c => {\n const opt = document.createElement('option');\n opt.value = c; opt.textContent = c;\n if (c === txn.category) opt.selected = true;\n catSelect.appendChild(opt);\n });\n editModal.classList.add('active');\n }\n function closeEditModal() {\n editModal.classList.remove('active');\n }\n closeEditModalBtn.addEventListener('click', closeEditModal);\n editModal.addEventListener('click', (e) => { if (e.target === editModal) closeEditModal(); });\n editForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const id = editForm.editId.value;\n const txnIndex = transactions.findIndex(t => t.id === id);\n if (txnIndex === -1) return;\n transactions[txnIndex].date = editForm.editDate.value;\n transactions[txnIndex].category = editForm.editCategory.value;\n transactions[txnIndex].amount = parseFloat(editForm.editAmount.value);\n transactions[txnIndex].status = editForm.editStatus.value;\n transactions[txnIndex].description = editForm.editDescription.value.trim();\n saveAllTransactions();\n showToast('Transaction updated.', 'success');\n closeEditModal();\n navigateTo(currentPage);\n });\n\n \/\/ Form handlers\n function handleIncomeSubmit(e) {\n e.preventDefault();\n const form = e.target;\n const tx = {\n id: 'txn_'+Date.now()+'_'+Math.random().toString(36).substr(2,5),\n type: 'income',\n company: currentCompany,\n date: form.date.value,\n category: form.category.value,\n amount: parseFloat(form.amount.value),\n status: form.status.value,\n description: form.description.value.trim()\n };\n if (!tx.category || isNaN(tx.amount) || tx.amount<=0) {\n showToast('Fill all required fields correctly.', 'error'); return;\n }\n transactions.push(tx);\n saveAllTransactions();\n showToast('Income recorded!', 'success');\n form.reset();\n form.date.value = getToday();\n }\n function handleExpenseSubmit(e) {\n e.preventDefault();\n const form = e.target;\n const tx = {\n id: 'txn_'+Date.now()+'_'+Math.random().toString(36).substr(2,5),\n type: 'expense',\n company: currentCompany,\n date: form.date.value,\n category: form.category.value,\n amount: parseFloat(form.amount.value),\n status: form.status.value,\n description: form.description.value.trim()\n };\n if (!tx.category || isNaN(tx.amount) || tx.amount<=0) {\n showToast('Fill all required fields correctly.', 'error'); return;\n }\n transactions.push(tx);\n saveAllTransactions();\n showToast('Expense recorded!', 'success');\n form.reset();\n form.date.value = getToday();\n }\n\n \/\/ CSV Export\n function exportToCSV() {\n const compTx = companyTransactions();\n if (!compTx.length) { showToast('No data to export.', 'error'); return; }\n const headers = ['Date','Type','Category','Description','Amount (UGX)','Status'];\n const rows = compTx.map(t => [\n t.date,\n t.type,\n t.category,\n t.description || '',\n t.amount,\n t.status\n ]);\n let csvContent = headers.join(',') + '\\n';\n rows.forEach(row => {\n csvContent += row.map(val => `\"${val}\"`).join(',') + '\\n';\n });\n const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `URA_Transactions_${currentCompany.replace(\/\\s+\/g,'_')}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n showToast('CSV exported.', 'success');\n }\n\n \/\/ Navigation\n function navigateTo(page) {\n currentPage = page;\n navItems.forEach(item => item.classList.remove('active'));\n const activeNav = document.querySelector(`.nav-item[data-page=\"${page}\"]`);\n if (activeNav) activeNav.classList.add('active');\n switch(page) {\n case 'dashboard': renderDashboard(); break;\n case 'income-form': renderIncomeForm(); break;\n case 'expense-form': renderExpenseForm(); break;\n case 'transactions': renderTransactionsPage(); break;\n }\n if (window.innerWidth <= 768) {\n sidebar.classList.remove('open');\n overlay.classList.remove('active');\n }\n }\n navItems.forEach(item => {\n item.addEventListener('click', () => navigateTo(item.dataset.page));\n });\n\n \/\/ Mobile sidebar toggle\n menuToggle.addEventListener('click', () => {\n sidebar.classList.toggle('open');\n overlay.classList.toggle('active');\n });\n overlay.addEventListener('click', () => {\n sidebar.classList.remove('open');\n overlay.classList.remove('active');\n });\n\n \/\/ Startup flow\n function showStartup() {\n startupOverlay.style.display = 'flex';\n companyNameInput.value = '';\n sponsorCodeInput.value = '';\n startupError.textContent = '';\n }\n function hideStartup() {\n startupOverlay.style.display = 'none';\n }\n startupSubmit.addEventListener('click', () => {\n const name = companyNameInput.value.trim();\n const code = sponsorCodeInput.value.trim();\n if (!name || !code) {\n startupError.textContent = 'Both company name and sponsor code are required.';\n return;\n }\n currentCompany = name;\n currentSponsor = code;\n hideStartup();\n companyBadge.textContent = '\ud83c\udfe2 ' + currentCompany;\n navigateTo('dashboard');\n });\n\n \/\/ Init\n document.getElementById('currentDate').textContent = new Date().toLocaleDateString('en-UG', {\n weekday:'short', year:'numeric', month:'long', day:'numeric'\n });\n showStartup();\n })();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>URA Tax Dashboard | Income & Expense Entry \ud83d\udd10 Company Access Enter your company details and sponsor code to continue. Company Name * Sponsor Code * \ud83d\udd17 Get Sponsor Code \ud83d\ude80 Access Dashboard URA Tax Dashboard Uganda Revenue Authority \ud83d\udcca Dashboard \ud83d\udcb0 Record Income \ud83d\udccb Record Expense \ud83d\udcdc All Transactions © 2025 URA-Compliant | v2.0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-136","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/comments?post=136"}],"version-history":[{"count":1,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/136\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/media?parent=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}