{"id":3096,"date":"2026-02-13T09:12:17","date_gmt":"2026-02-13T09:12:17","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=3096"},"modified":"2026-02-17T12:38:03","modified_gmt":"2026-02-17T12:38:03","slug":"financial-dashboard","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/financial-dashboard\/","title":{"rendered":"Financial Dashboard"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Financial Dashboard<\/title>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; padding: 20px; }\r\n .container { max-width: 1400px; margin: 0 auto; background-color: white; padding: 0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); overflow: hidden; }\r\n header { background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8f 100%); color: white; padding: 30px; margin: 0; border-radius: 0; }\r\n h1 { font-size: 32px; margin-bottom: 15px; font-weight: 700; }\r\n .month-selector { display: flex; gap: 15px; align-items: center; margin-top: 15px; flex-wrap: wrap; }\r\n .month-selector label { font-weight: 600; font-size: 16px; }\r\n .month-selector select { padding: 10px 16px; border: 2px solid #fff; border-radius: 6px; font-size: 15px; background-color: white; color: #333; font-weight: 600; cursor: pointer; min-width: 150px; }\r\n .month-selector select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); }\r\n .nav-tabs { display: flex; background: #f8f9fa; border-bottom: 3px solid #667eea; overflow-x: auto; }\r\n .nav-tab { padding: 18px 30px; cursor: pointer; border: none; background: transparent; font-size: 16px; font-weight: 600; color: #555; transition: all 0.3s; border-bottom: 3px solid transparent; margin-bottom: -3px; white-space: nowrap; }\r\n .nav-tab:hover { background: #e9ecef; color: #333; }\r\n .nav-tab.active { background: white; color: #667eea; border-bottom: 3px solid #667eea; }\r\n .page-content { display: none; padding: 30px; animation: fadeIn 0.3s; }\r\n .page-content.active { display: block; }\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n .card { background-color: white; border: 1px solid #e8e8e8; border-radius: 10px; padding: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; margin-bottom: 20px; }\r\n .card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }\r\n .card-header { background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8f 100%); color: white; padding: 15px 20px; margin: 0; border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 700; }\r\n .card-content { padding: 20px; }\r\n .input-group { margin-bottom: 0; }\r\n .input-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; }\r\n .input-group input, .input-group select { width: 100%; padding: 12px 15px; border: 2px solid #e8e8e8; border-radius: 8px; font-size: 14px; transition: border-color 0.3s, box-shadow 0.3s; }\r\n .input-group input:focus, .input-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }\r\n .input-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: end; }\r\n .expense-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: end; }\r\n .vault-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: end; }\r\n .dues-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; margin-bottom: 10px; align-items: end; }\r\n .btn { padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\r\n .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n .btn:active { transform: translateY(0); }\r\n .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }\r\n .btn-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; }\r\n .btn-danger { background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%); color: white; }\r\n .btn-secondary { background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%); color: white; }\r\n .btn-small { padding: 8px 12px; font-size: 12px; }\r\n .btn-warning { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); color: white; }\r\n .summary-box { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; border-radius: 8px; margin: 20px 0; }\r\n .summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }\r\n .summary-row.total { font-weight: 700; font-size: 18px; padding-top: 10px; border-top: 2px solid #667eea; margin-top: 10px; }\r\n .alert { padding: 20px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; }\r\n .alert-success { background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); color: #155724; border: 2px solid #c3e6cb; }\r\n .alert-warning { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); color: #856404; border: 2px solid #ffeaa7; }\r\n .alert-danger { background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); color: #721c24; border: 2px solid #f5c6cb; }\r\n .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-bottom: 20px; }\r\n .expense-item, .dues-item, .vault-item { background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid #667eea; }\r\n .expense-item:hover, .dues-item:hover, .vault-item:hover { background-color: #e9ecef; }\r\n .item-info { flex: 1; }\r\n .item-name { font-weight: 600; margin-bottom: 5px; font-size: 15px; }\r\n .item-amount { color: #667eea; font-size: 18px; font-weight: 700; }\r\n .item-date { font-size: 12px; color: #6c757d; margin-top: 5px; }\r\n .item-actions { display: flex; gap: 5px; flex-wrap: wrap; }\r\n .chart-container { position: relative; height: 300px; margin-top: 20px; }\r\n .live-datetime { text-align: center; padding: 15px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 10px; margin-bottom: 20px; font-size: 14px; color: #333; }\r\n .live-datetime strong { font-size: 16px; color: #1e3a5f; }\r\n .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }\r\n .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; }\r\n .modal.active { display: flex; }\r\n .modal-content { background-color: white; padding: 30px; border-radius: 12px; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }\r\n .modal-header { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: #1e3a5f; }\r\n .modal-body { margin-bottom: 20px; }\r\n .modal-footer { display: flex; gap: 10px; justify-content: flex-end; }\r\n .payment-form { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 10px; }\r\n .payment-form .input-group { margin-bottom: 15px; }\r\n .file-input-wrapper { position: relative; display: inline-block; }\r\n .file-input-wrapper input[type=\"file\"] { position: absolute; left: -9999px; }\r\n .file-input-label { display: inline-block; padding: 12px 20px; background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: white; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\r\n .file-input-label:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n .history-item { background: white; border: 1px solid #e8e8e8; border-radius: 8px; padding: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }\r\n .history-info { flex: 1; }\r\n .history-type { font-size: 12px; color: #6c757d; margin-bottom: 4px; }\r\n .history-desc { font-weight: 600; font-size: 14px; margin-bottom: 4px; }\r\n .history-amount { font-size: 16px; font-weight: 700; }\r\n .history-amount.positive { color: #38ef7d; }\r\n .history-amount.negative { color: #ee0979; }\r\n .history-date { font-size: 11px; color: #999; }\r\n .vault-badge { display: inline-block; background: #667eea; color: white; border-radius: 4px; padding: 2px 8px; font-size: 11px; margin-top: 4px; }\r\n @media (max-width: 768px) {\r\n .grid { grid-template-columns: 1fr; }\r\n .input-row, .expense-row, .vault-row, .dues-row { grid-template-columns: 1fr; }\r\n .month-selector { flex-direction: column; align-items: flex-start; }\r\n .month-selector select { width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>\ud83d\udcb0 Financial Dashboard<\/h1>\r\n <div class=\"month-selector\">\r\n <label>\ud83d\udcc5 Select Month:<\/label>\r\n <select id=\"monthSelect\">\r\n <option value=\"1\">January<\/option><option value=\"2\">February<\/option><option value=\"3\">March<\/option>\r\n <option value=\"4\">April<\/option><option value=\"5\">May<\/option><option value=\"6\">June<\/option>\r\n <option value=\"7\">July<\/option><option value=\"8\">August<\/option><option value=\"9\">September<\/option>\r\n <option value=\"10\">October<\/option><option value=\"11\">November<\/option><option value=\"12\">December<\/option>\r\n <\/select>\r\n <label>\ud83d\udcc6 Select Year:<\/label>\r\n <select id=\"yearSelect\"><\/select>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"nav-tabs\">\r\n <button class=\"nav-tab active\" onclick=\"switchPage('page1')\">\ud83d\udcdd Income & Expenses<\/button>\r\n <button class=\"nav-tab\" onclick=\"switchPage('page2')\">\ud83c\udfe6 Vault & History<\/button>\r\n <button class=\"nav-tab\" onclick=\"switchPage('page3')\">\ud83d\udcb0 Dues Management<\/button>\r\n <button class=\"nav-tab\" onclick=\"switchPage('page4')\">\ud83d\udcca Dashboard<\/button>\r\n <\/div>\r\n\r\n <!-- Page 1: Income & Expenses -->\r\n <div id=\"page1\" class=\"page-content active\">\r\n <div class=\"live-datetime\" id=\"liveDateTime1\"><\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udcb0 Income<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"input-row\">\r\n <div class=\"input-group\">\r\n <label>Source<\/label>\r\n <input type=\"text\" id=\"incomeSource\" placeholder=\"e.g., Salary, Business\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"incomeAmount\" placeholder=\"10000\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>\ud83c\udfe6 Vault Account<\/label>\r\n <select id=\"incomeVaultSelect\">\r\n <option value=\"\">-- Select Vault --<\/option>\r\n <\/select>\r\n <\/div>\r\n <button class=\"btn btn-success\" onclick=\"addIncome()\">Add<\/button>\r\n <\/div>\r\n <div id=\"incomeList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total Income:<\/span><span id=\"totalIncome\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udcbc Business Expenses<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"expense-row\">\r\n <div class=\"input-group\">\r\n <label>Category<\/label>\r\n <input type=\"text\" id=\"businessCategory\" placeholder=\"e.g., Inventory\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"businessAmount\" placeholder=\"5000\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>\ud83c\udfe6 Vault Account<\/label>\r\n <select id=\"businessVaultSelect\">\r\n <option value=\"\">-- Select Vault --<\/option>\r\n <\/select>\r\n <\/div>\r\n <button class=\"btn btn-danger\" onclick=\"addBusinessExpense()\">Add<\/button>\r\n <\/div>\r\n <div id=\"businessList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total:<\/span><span id=\"totalBusiness\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83c\udfe0 House Expenses<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"expense-row\">\r\n <div class=\"input-group\">\r\n <label>Category<\/label>\r\n <input type=\"text\" id=\"houseCategory\" placeholder=\"e.g., Rent\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"houseAmount\" placeholder=\"3000\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>\ud83c\udfe6 Vault Account<\/label>\r\n <select id=\"houseVaultSelect\">\r\n <option value=\"\">-- Select Vault --<\/option>\r\n <\/select>\r\n <\/div>\r\n <button class=\"btn btn-danger\" onclick=\"addHouseExpense()\">Add<\/button>\r\n <\/div>\r\n <div id=\"houseList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total:<\/span><span id=\"totalHouse\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Page 2: Vault & History -->\r\n <div id=\"page2\" class=\"page-content\">\r\n <div class=\"live-datetime\" id=\"liveDateTime2\"><\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83c\udfe6 Vault Accounts (Actual Cash)<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"vault-row\">\r\n <div class=\"input-group\"><label>Account Name<\/label><input type=\"text\" id=\"vaultName\" placeholder=\"e.g., Cash, Bank A\"><\/div>\r\n <div class=\"input-group\"><label>Amount (\u20b9)<\/label><input type=\"number\" id=\"vaultAmount\" placeholder=\"20000\"><\/div>\r\n <button class=\"btn btn-primary\" onclick=\"addVaultAccount()\">Add<\/button>\r\n <\/div>\r\n <div id=\"vaultList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total Cash:<\/span><span id=\"totalVault\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udcdc Transaction History<\/div>\r\n <div class=\"card-content\">\r\n <div style=\"margin-bottom: 15px;\">\r\n <label style=\"font-weight: 600; margin-right: 10px;\">Filter by Vault:<\/label>\r\n <select id=\"vaultHistoryFilter\" onchange=\"renderTransactionHistory()\" style=\"padding: 8px 12px; border: 2px solid #e8e8e8; border-radius: 6px; font-size: 14px; min-width: 200px;\">\r\n <option value=\"all\">All Vaults<\/option>\r\n <\/select>\r\n <\/div>\r\n <div id=\"transactionHistory\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Page 3: Dues Management -->\r\n <div id=\"page3\" class=\"page-content\">\r\n <div class=\"live-datetime\" id=\"liveDateTime3\"><\/div>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udce5 Receivables (Money to Receive)<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"dues-row\">\r\n <div class=\"input-group\"><label>Party Name<\/label><input type=\"text\" id=\"receivableParty\" placeholder=\"e.g., Customer A\"><\/div>\r\n <div class=\"input-group\"><label>Amount (\u20b9)<\/label><input type=\"number\" id=\"receivableAmount\" placeholder=\"5000\"><\/div>\r\n <button class=\"btn btn-success\" onclick=\"addReceivable()\">Add<\/button>\r\n <\/div>\r\n <div id=\"receivablesList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total:<\/span><span id=\"totalReceivables\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udce4 Payables (Money to Pay)<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"dues-row\">\r\n <div class=\"input-group\"><label>Party Name<\/label><input type=\"text\" id=\"payableParty\" placeholder=\"e.g., Supplier B\"><\/div>\r\n <div class=\"input-group\"><label>Amount (\u20b9)<\/label><input type=\"number\" id=\"payableAmount\" placeholder=\"3000\"><\/div>\r\n <button class=\"btn btn-danger\" onclick=\"addPayable()\">Add<\/button>\r\n <\/div>\r\n <div id=\"payablesList\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row total\"><span>Total:<\/span><span id=\"totalPayables\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Page 4: Dashboard -->\r\n <div id=\"page4\" class=\"page-content\">\r\n <div class=\"live-datetime\" id=\"liveDateTime4\"><\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83e\uddee Financial Summary & Reconciliation<\/div>\r\n <div class=\"card-content\">\r\n <div id=\"reconciliationAlert\"><\/div>\r\n <div class=\"summary-box\">\r\n <div class=\"summary-row\"><span>\ud83d\udcb0 Total Income:<\/span><span id=\"dashTotalIncome\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row\"><span>\ud83d\udcbc Business Expenses:<\/span><span id=\"dashTotalBusiness\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row\"><span>\ud83c\udfe0 House Expenses:<\/span><span id=\"dashTotalHouse\">\u20b90<\/span><\/div>\r\n <hr style=\"margin: 15px 0;\">\r\n <div class=\"summary-row total\"><span>\ud83d\udcca Book Balance (Income - Expenses):<\/span><span id=\"bookBalance\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row total\"><span>\ud83d\udcb0 Actual Cash (Vault Total):<\/span><span id=\"actualCash\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row total\" style=\"font-size: 20px; color: #667eea;\"><span>\u2753 The Gap:<\/span><span id=\"theGap\">\u20b90<\/span><\/div>\r\n <hr style=\"margin: 15px 0;\">\r\n <div class=\"summary-row\"><span>\ud83d\udce5 Total Receivables:<\/span><span id=\"recapReceivables\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row\"><span>\ud83d\udce4 Total Payables:<\/span><span id=\"recapPayables\">\u20b90<\/span><\/div>\r\n <div class=\"summary-row total\"><span>\ud83d\udcb5 Net Dues Position:<\/span><span id=\"netDues\">\u20b90<\/span><\/div>\r\n <\/div>\r\n <div class=\"action-buttons\">\r\n <button class=\"btn btn-primary\" onclick=\"showWhatIf()\">\ud83d\udca1 What If?<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"downloadBackup()\">\ud83d\udce5 Export Backup<\/button>\r\n <div class=\"file-input-wrapper\">\r\n <input type=\"file\" id=\"importFile\" accept=\".json\" onchange=\"importBackup(event)\">\r\n <label for=\"importFile\" class=\"file-input-label\">\ud83d\udce4 Import Backup<\/label>\r\n <\/div>\r\n <button class=\"btn btn-success\" onclick=\"exportToExcel()\">\ud83d\udcca Export to Excel<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"clearMonth()\">\ud83d\uddd1\ufe0f Clear Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udcb0 Receivables vs Payables<\/div>\r\n <div class=\"card-content\"><div class=\"chart-container\"><canvas id=\"duesChart\"><\/canvas><\/div><\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"card-header\">\ud83d\udcc8 Income vs Expenses<\/div>\r\n <div class=\"card-content\"><div class=\"chart-container\"><canvas id=\"comparisonChart\"><\/canvas><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Payment Modal for Receivables -->\r\n <div id=\"receivePaymentModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\ud83d\udcb0 Receive Payment<\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"payment-form\">\r\n <div class=\"input-group\"><label>Party: <strong id=\"receivePartyName\"><\/strong><\/label><\/div>\r\n <div class=\"input-group\"><label>Total Due: \u20b9<strong id=\"receiveTotalDue\"><\/strong><\/label><\/div>\r\n <div class=\"input-group\"><label>Amount to Receive (\u20b9)<\/label><input type=\"number\" id=\"receiveAmount\" placeholder=\"Enter amount\"><\/div>\r\n <div class=\"input-group\"><label>Add to Vault Account<\/label><select id=\"receiveVaultSelect\"><\/select><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeReceiveModal()\">Cancel<\/button>\r\n <button class=\"btn btn-success\" onclick=\"confirmReceivePayment()\">Receive Payment<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Payment Modal for Payables -->\r\n <div id=\"makePaymentModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\ud83d\udcb8 Make Payment<\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"payment-form\">\r\n <div class=\"input-group\"><label>Party: <strong id=\"payPartyName\"><\/strong><\/label><\/div>\r\n <div class=\"input-group\"><label>Total Due: \u20b9<strong id=\"payTotalDue\"><\/strong><\/label><\/div>\r\n <div class=\"input-group\"><label>Amount to Pay (\u20b9)<\/label><input type=\"number\" id=\"payAmount\" placeholder=\"Enter amount\"><\/div>\r\n <div class=\"input-group\"><label>Pay from Vault Account<\/label><select id=\"payVaultSelect\"><\/select><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeMakePaymentModal()\">Cancel<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"confirmMakePayment()\">Make Payment<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let financialData = {};\r\n let vaultTransactionHistory = {};\r\n let duesChart = null;\r\n let comparisonChart = null;\r\n let currentReceivable = null;\r\n let currentPayable = null;\r\n\r\n function getCurrentMonthKey() {\r\n const month = document.getElementById('monthSelect').value;\r\n const year = document.getElementById('yearSelect').value;\r\n return `${year}-${month.padStart(2, '0')}`;\r\n }\r\n\r\n function getCurrentDateTime() {\r\n const now = new Date();\r\n return `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;\r\n }\r\n\r\n function formatDateTime(datetime) {\r\n const date = new Date(datetime);\r\n return date.toLocaleString('en-IN', { day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit' });\r\n }\r\n\r\n function getPreviousMonthKey(currentMonthKey) {\r\n const [year, month] = currentMonthKey.split('-').map(Number);\r\n let prevMonth = month - 1;\r\n let prevYear = year;\r\n if (prevMonth === 0) { prevMonth = 12; prevYear = year - 1; }\r\n return `${prevYear}-${String(prevMonth).padStart(2, '0')}`;\r\n }\r\n\r\n function initMonthData(monthKey) {\r\n if (!financialData[monthKey]) {\r\n const previousMonthKey = getPreviousMonthKey(monthKey);\r\n const previousMonthData = financialData[previousMonthKey];\r\n financialData[monthKey] = { income: [], businessExpenses: [], houseExpenses: [], vaultAccounts: [], receivables: [], payables: [] };\r\n if (previousMonthData && previousMonthData.vaultAccounts && previousMonthData.vaultAccounts.length > 0) {\r\n financialData[monthKey].vaultAccounts = previousMonthData.vaultAccounts.map(vault => ({ ...vault, date: getCurrentDateTime(), id: Date.now() + Math.random() }));\r\n }\r\n if (previousMonthData && previousMonthData.receivables && previousMonthData.receivables.length > 0) {\r\n financialData[monthKey].receivables = previousMonthData.receivables.map(r => ({ ...r, date: r.date, id: Date.now() + Math.random() }));\r\n }\r\n if (previousMonthData && previousMonthData.payables && previousMonthData.payables.length > 0) {\r\n financialData[monthKey].payables = previousMonthData.payables.map(p => ({ ...p, date: p.date, id: Date.now() + Math.random() }));\r\n }\r\n saveData();\r\n }\r\n if (!vaultTransactionHistory[monthKey]) {\r\n vaultTransactionHistory[monthKey] = [];\r\n }\r\n }\r\n\r\n function saveData() {\r\n localStorage.setItem('financialDashboardData', JSON.stringify(financialData));\r\n localStorage.setItem('vaultTransactionHistory', JSON.stringify(vaultTransactionHistory));\r\n }\r\n\r\n function loadMonthData() {\r\n const monthKey = getCurrentMonthKey();\r\n initMonthData(monthKey);\r\n renderIncomeList();\r\n renderBusinessList();\r\n renderHouseList();\r\n renderVaultAccounts();\r\n renderReceivablesList();\r\n renderPayablesList();\r\n renderTransactionHistory();\r\n calculateAll();\r\n }\r\n\r\n function switchPage(pageId) {\r\n document.querySelectorAll('.page-content').forEach(p => p.classList.remove('active'));\r\n document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));\r\n document.getElementById(pageId).classList.add('active');\r\n event.target.classList.add('active');\r\n if (pageId === 'page4') setTimeout(calculateAll, 100);\r\n }\r\n\r\n \/\/ ===================== INCOME =====================\r\n function addIncome() {\r\n const source = document.getElementById('incomeSource').value.trim();\r\n const amount = parseFloat(document.getElementById('incomeAmount').value);\r\n const vaultId = parseInt(document.getElementById('incomeVaultSelect').value);\r\n\r\n if (!source || !amount) { alert('Please fill Source and Amount'); return; }\r\n\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n\r\n \/\/ Update vault if selected\r\n if (vaultId) {\r\n const vaultAccount = financialData[monthKey].vaultAccounts.find(v => v.id === vaultId);\r\n if (vaultAccount) {\r\n vaultAccount.amount += amount;\r\n vaultTransactionHistory[monthKey].push({\r\n type: 'credit', vaultName: vaultAccount.name, amount: amount,\r\n description: `Income: ${source}`, date: datetime, id: Date.now()\r\n });\r\n }\r\n }\r\n\r\n financialData[monthKey].income.push({ source, amount, date: datetime, vaultId: vaultId || null, id: Date.now() });\r\n document.getElementById('incomeSource').value = '';\r\n document.getElementById('incomeAmount').value = '';\r\n document.getElementById('incomeVaultSelect').value = '';\r\n saveData();\r\n renderIncomeList();\r\n renderVaultAccounts();\r\n renderTransactionHistory();\r\n calculateAll();\r\n }\r\n\r\n function deleteIncome(id) {\r\n if (confirm('Delete this income entry?')) {\r\n const monthKey = getCurrentMonthKey();\r\n financialData[monthKey].income = financialData[monthKey].income.filter(item => item.id !== id);\r\n saveData(); renderIncomeList(); calculateAll();\r\n }\r\n }\r\n\r\n function renderIncomeList() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('incomeList');\r\n const items = financialData[monthKey].income;\r\n list.innerHTML = items.map(item => {\r\n const vault = item.vaultId ? financialData[monthKey].vaultAccounts.find(v => v.id === item.vaultId) : null;\r\n return `<div class=\"expense-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.source}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n ${vault ? `<span class=\"vault-badge\">\ud83c\udfe6 ${vault.name}<\/span>` : ''}\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\"><button class=\"btn btn-danger btn-small\" onclick=\"deleteIncome(${item.id})\">Delete<\/button><\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===================== BUSINESS EXPENSES =====================\r\n function addBusinessExpense() {\r\n const category = document.getElementById('businessCategory').value.trim();\r\n const amount = parseFloat(document.getElementById('businessAmount').value);\r\n const vaultId = parseInt(document.getElementById('businessVaultSelect').value);\r\n\r\n if (!category || !amount) { alert('Please fill Category and Amount'); return; }\r\n\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n\r\n if (vaultId) {\r\n const vaultAccount = financialData[monthKey].vaultAccounts.find(v => v.id === vaultId);\r\n if (vaultAccount) {\r\n if (vaultAccount.amount < amount) {\r\n if (!confirm(`${vaultAccount.name} balance (\u20b9${vaultAccount.amount.toLocaleString('en-IN')}) is less than expense. Still proceed?`)) return;\r\n }\r\n vaultAccount.amount -= amount;\r\n vaultTransactionHistory[monthKey].push({\r\n type: 'debit', vaultName: vaultAccount.name, amount: amount,\r\n description: `Business Expense: ${category}`, date: datetime, id: Date.now()\r\n });\r\n }\r\n }\r\n\r\n financialData[monthKey].businessExpenses.push({ category, amount, date: datetime, vaultId: vaultId || null, id: Date.now() });\r\n document.getElementById('businessCategory').value = '';\r\n document.getElementById('businessAmount').value = '';\r\n document.getElementById('businessVaultSelect').value = '';\r\n saveData();\r\n renderBusinessList();\r\n renderVaultAccounts();\r\n renderTransactionHistory();\r\n calculateAll();\r\n }\r\n\r\n function deleteBusinessExpense(id) {\r\n if (confirm('Delete this expense?')) {\r\n const monthKey = getCurrentMonthKey();\r\n financialData[monthKey].businessExpenses = financialData[monthKey].businessExpenses.filter(item => item.id !== id);\r\n saveData(); renderBusinessList(); calculateAll();\r\n }\r\n }\r\n\r\n function renderBusinessList() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('businessList');\r\n const items = financialData[monthKey].businessExpenses;\r\n list.innerHTML = items.map(item => {\r\n const vault = item.vaultId ? financialData[monthKey].vaultAccounts.find(v => v.id === item.vaultId) : null;\r\n return `<div class=\"expense-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.category}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n ${vault ? `<span class=\"vault-badge\">\ud83c\udfe6 ${vault.name}<\/span>` : ''}\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\"><button class=\"btn btn-danger btn-small\" onclick=\"deleteBusinessExpense(${item.id})\">Delete<\/button><\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===================== HOUSE EXPENSES =====================\r\n function addHouseExpense() {\r\n const category = document.getElementById('houseCategory').value.trim();\r\n const amount = parseFloat(document.getElementById('houseAmount').value);\r\n const vaultId = parseInt(document.getElementById('houseVaultSelect').value);\r\n\r\n if (!category || !amount) { alert('Please fill Category and Amount'); return; }\r\n\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n\r\n if (vaultId) {\r\n const vaultAccount = financialData[monthKey].vaultAccounts.find(v => v.id === vaultId);\r\n if (vaultAccount) {\r\n if (vaultAccount.amount < amount) {\r\n if (!confirm(`${vaultAccount.name} balance (\u20b9${vaultAccount.amount.toLocaleString('en-IN')}) is less than expense. Still proceed?`)) return;\r\n }\r\n vaultAccount.amount -= amount;\r\n vaultTransactionHistory[monthKey].push({\r\n type: 'debit', vaultName: vaultAccount.name, amount: amount,\r\n description: `House Expense: ${category}`, date: datetime, id: Date.now()\r\n });\r\n }\r\n }\r\n\r\n financialData[monthKey].houseExpenses.push({ category, amount, date: datetime, vaultId: vaultId || null, id: Date.now() });\r\n document.getElementById('houseCategory').value = '';\r\n document.getElementById('houseAmount').value = '';\r\n document.getElementById('houseVaultSelect').value = '';\r\n saveData();\r\n renderHouseList();\r\n renderVaultAccounts();\r\n renderTransactionHistory();\r\n calculateAll();\r\n }\r\n\r\n function deleteHouseExpense(id) {\r\n if (confirm('Delete this expense?')) {\r\n const monthKey = getCurrentMonthKey();\r\n financialData[monthKey].houseExpenses = financialData[monthKey].houseExpenses.filter(item => item.id !== id);\r\n saveData(); renderHouseList(); calculateAll();\r\n }\r\n }\r\n\r\n function renderHouseList() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('houseList');\r\n const items = financialData[monthKey].houseExpenses;\r\n list.innerHTML = items.map(item => {\r\n const vault = item.vaultId ? financialData[monthKey].vaultAccounts.find(v => v.id === item.vaultId) : null;\r\n return `<div class=\"expense-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.category}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n ${vault ? `<span class=\"vault-badge\">\ud83c\udfe6 ${vault.name}<\/span>` : ''}\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\"><button class=\"btn btn-danger btn-small\" onclick=\"deleteHouseExpense(${item.id})\">Delete<\/button><\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===================== VAULT ACCOUNTS =====================\r\n function addVaultAccount() {\r\n const name = document.getElementById('vaultName').value.trim();\r\n const amount = parseFloat(document.getElementById('vaultAmount').value);\r\n if (!name || isNaN(amount)) { alert('Please fill all fields'); return; }\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n const vaultId = Date.now();\r\n financialData[monthKey].vaultAccounts.push({ name, amount, date: datetime, id: vaultId });\r\n vaultTransactionHistory[monthKey].push({\r\n type: 'credit', vaultName: name, amount, description: `Initial balance: ${name}`, date: datetime, id: Date.now()\r\n });\r\n document.getElementById('vaultName').value = '';\r\n document.getElementById('vaultAmount').value = '';\r\n saveData(); renderVaultAccounts(); renderTransactionHistory(); calculateAll();\r\n }\r\n\r\n function deleteVaultAccount(id) {\r\n if (confirm('Delete this vault account?')) {\r\n const monthKey = getCurrentMonthKey();\r\n const vault = financialData[monthKey].vaultAccounts.find(v => v.id === id);\r\n vaultTransactionHistory[monthKey].push({\r\n type: 'delete', vaultName: vault.name, amount: vault.amount,\r\n description: `Deleted vault: ${vault.name}`, date: getCurrentDateTime(), id: Date.now()\r\n });\r\n financialData[monthKey].vaultAccounts = financialData[monthKey].vaultAccounts.filter(item => item.id !== id);\r\n saveData(); renderVaultAccounts(); renderTransactionHistory(); calculateAll();\r\n }\r\n }\r\n\r\n function renderVaultAccounts() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('vaultList');\r\n const items = financialData[monthKey].vaultAccounts;\r\n list.innerHTML = items.map(item => `\r\n <div class=\"vault-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.name}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\"><button class=\"btn btn-danger btn-small\" onclick=\"deleteVaultAccount(${item.id})\">Delete<\/button><\/div>\r\n <\/div>`).join('');\r\n updateAllVaultDropdowns();\r\n updateHistoryFilterDropdown();\r\n }\r\n\r\n function updateAllVaultDropdowns() {\r\n const monthKey = getCurrentMonthKey();\r\n const vaults = financialData[monthKey].vaultAccounts;\r\n const optionsWithEmpty = '<option value=\"\">-- Select Vault (Optional) --<\/option>' + vaults.map(v => `<option value=\"${v.id}\">${v.name} (\u20b9${v.amount.toLocaleString('en-IN')})<\/option>`).join('');\r\n const optionsNoEmpty = vaults.map(v => `<option value=\"${v.id}\">${v.name} (\u20b9${v.amount.toLocaleString('en-IN')})<\/option>`).join('');\r\n\r\n document.getElementById('incomeVaultSelect').innerHTML = optionsWithEmpty;\r\n document.getElementById('businessVaultSelect').innerHTML = optionsWithEmpty;\r\n document.getElementById('houseVaultSelect').innerHTML = optionsWithEmpty;\r\n\r\n const receiveSelect = document.getElementById('receiveVaultSelect');\r\n const paySelect = document.getElementById('payVaultSelect');\r\n receiveSelect.innerHTML = optionsNoEmpty || '<option value=\"\">No vault accounts<\/option>';\r\n paySelect.innerHTML = optionsNoEmpty || '<option value=\"\">No vault accounts<\/option>';\r\n }\r\n\r\n function updateHistoryFilterDropdown() {\r\n const monthKey = getCurrentMonthKey();\r\n const vaults = financialData[monthKey].vaultAccounts;\r\n const filterSelect = document.getElementById('vaultHistoryFilter');\r\n if (!filterSelect) return;\r\n const currentValue = filterSelect.value;\r\n filterSelect.innerHTML = '<option value=\"all\">All Vaults<\/option>' + vaults.map(v => `<option value=\"${v.name}\">${v.name}<\/option>`).join('');\r\n if (currentValue && [...filterSelect.options].some(opt => opt.value === currentValue)) filterSelect.value = currentValue;\r\n }\r\n\r\n function renderTransactionHistory() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('transactionHistory');\r\n const filterSelect = document.getElementById('vaultHistoryFilter');\r\n const selectedVault = filterSelect ? filterSelect.value : 'all';\r\n let items = vaultTransactionHistory[monthKey] || [];\r\n if (selectedVault !== 'all') items = items.filter(item => item.vaultName === selectedVault);\r\n if (items.length === 0) { list.innerHTML = '<p style=\"text-align:center;color:#999;padding:20px;\">No transactions yet<\/p>'; return; }\r\n const sortedItems = [...items].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n list.innerHTML = sortedItems.map(item => {\r\n const isCredit = item.type === 'credit';\r\n const isDebit = item.type === 'debit';\r\n const amountClass = isCredit ? 'positive' : isDebit ? 'negative' : '';\r\n const amountSign = isCredit ? '+' : isDebit ? '-' : '';\r\n return `<div class=\"history-item\">\r\n <div class=\"history-info\">\r\n <div class=\"history-type\">${item.vaultName}<\/div>\r\n <div class=\"history-desc\">${item.description}<\/div>\r\n <div class=\"history-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"history-amount ${amountClass}\">${amountSign}\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n <\/div>`;\r\n }).join('');\r\n }\r\n\r\n \/\/ ===================== RECEIVABLES - MERGE SAME PARTY =====================\r\n function addReceivable() {\r\n const party = document.getElementById('receivableParty').value.trim();\r\n const amount = parseFloat(document.getElementById('receivableAmount').value);\r\n if (!party || !amount) { alert('Please fill all fields'); return; }\r\n\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n\r\n \/\/ Check if same party already exists (case-insensitive)\r\n const existing = financialData[monthKey].receivables.find(r => r.party.toLowerCase() === party.toLowerCase());\r\n\r\n if (existing) {\r\n const oldAmount = existing.amount;\r\n existing.amount += amount;\r\n existing.date = datetime;\r\n alert(`\u2705 \"${existing.party}\" already exists!\\nPrevious: \u20b9${oldAmount.toLocaleString('en-IN')}\\nAdded: \u20b9${amount.toLocaleString('en-IN')}\\nNew Total: \u20b9${existing.amount.toLocaleString('en-IN')}`);\r\n } else {\r\n financialData[monthKey].receivables.push({ party, amount, date: datetime, id: Date.now() });\r\n }\r\n\r\n document.getElementById('receivableParty').value = '';\r\n document.getElementById('receivableAmount').value = '';\r\n saveData(); renderReceivablesList(); calculateAll();\r\n }\r\n\r\n function deleteReceivable(id) {\r\n if (confirm('Delete this receivable?')) {\r\n const monthKey = getCurrentMonthKey();\r\n financialData[monthKey].receivables = financialData[monthKey].receivables.filter(item => item.id !== id);\r\n saveData(); renderReceivablesList(); calculateAll();\r\n }\r\n }\r\n\r\n function openReceivePaymentModal(receivableId) {\r\n const monthKey = getCurrentMonthKey();\r\n const receivable = financialData[monthKey].receivables.find(r => r.id === receivableId);\r\n if (!receivable) return;\r\n currentReceivable = receivable;\r\n document.getElementById('receivePartyName').textContent = receivable.party;\r\n document.getElementById('receiveTotalDue').textContent = receivable.amount.toLocaleString('en-IN');\r\n document.getElementById('receiveAmount').value = receivable.amount;\r\n document.getElementById('receivePaymentModal').classList.add('active');\r\n }\r\n\r\n function closeReceiveModal() {\r\n document.getElementById('receivePaymentModal').classList.remove('active');\r\n currentReceivable = null;\r\n }\r\n\r\n function confirmReceivePayment() {\r\n const amount = parseFloat(document.getElementById('receiveAmount').value);\r\n const vaultId = parseInt(document.getElementById('receiveVaultSelect').value);\r\n if (!amount || amount <= 0) { alert('Please enter a valid amount'); return; }\r\n if (!vaultId) { alert('Please select a vault account'); return; }\r\n const monthKey = getCurrentMonthKey();\r\n const vaultAccount = financialData[monthKey].vaultAccounts.find(v => v.id === vaultId);\r\n if (!vaultAccount) { alert('Vault account not found'); return; }\r\n if (amount > currentReceivable.amount) {\r\n if (!confirm(`Amount (\u20b9${amount.toLocaleString('en-IN')}) is more than due (\u20b9${currentReceivable.amount.toLocaleString('en-IN')}). Continue?`)) return;\r\n }\r\n const datetime = getCurrentDateTime();\r\n financialData[monthKey].income.push({ source: `Received from ${currentReceivable.party}`, amount, date: datetime, vaultId, id: Date.now() });\r\n vaultAccount.amount += amount;\r\n vaultTransactionHistory[monthKey].push({ type: 'credit', vaultName: vaultAccount.name, amount, description: `Received from ${currentReceivable.party}`, date: datetime, id: Date.now() });\r\n if (amount >= currentReceivable.amount) {\r\n financialData[monthKey].receivables = financialData[monthKey].receivables.filter(r => r.id !== currentReceivable.id);\r\n } else {\r\n currentReceivable.amount -= amount;\r\n }\r\n saveData(); renderIncomeList(); renderReceivablesList(); renderVaultAccounts(); renderTransactionHistory(); calculateAll();\r\n closeReceiveModal();\r\n alert(`\u2705 Payment received! \u20b9${amount.toLocaleString('en-IN')} added to ${vaultAccount.name}`);\r\n }\r\n\r\n function renderReceivablesList() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('receivablesList');\r\n const items = financialData[monthKey].receivables;\r\n list.innerHTML = items.map(item => `\r\n <div class=\"dues-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.party}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\">\r\n <button class=\"btn btn-success btn-small\" onclick=\"openReceivePaymentModal(${item.id})\">Receive<\/button>\r\n <button class=\"btn btn-danger btn-small\" onclick=\"deleteReceivable(${item.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>`).join('');\r\n }\r\n\r\n \/\/ ===================== PAYABLES - MERGE SAME PARTY =====================\r\n function addPayable() {\r\n const party = document.getElementById('payableParty').value.trim();\r\n const amount = parseFloat(document.getElementById('payableAmount').value);\r\n if (!party || !amount) { alert('Please fill all fields'); return; }\r\n\r\n const monthKey = getCurrentMonthKey();\r\n const datetime = getCurrentDateTime();\r\n\r\n \/\/ Check if same party already exists (case-insensitive)\r\n const existing = financialData[monthKey].payables.find(p => p.party.toLowerCase() === party.toLowerCase());\r\n\r\n if (existing) {\r\n const oldAmount = existing.amount;\r\n existing.amount += amount;\r\n existing.date = datetime;\r\n alert(`\u2705 \"${existing.party}\" already exists!\\nPrevious: \u20b9${oldAmount.toLocaleString('en-IN')}\\nAdded: \u20b9${amount.toLocaleString('en-IN')}\\nNew Total: \u20b9${existing.amount.toLocaleString('en-IN')}`);\r\n } else {\r\n financialData[monthKey].payables.push({ party, amount, date: datetime, id: Date.now() });\r\n }\r\n\r\n document.getElementById('payableParty').value = '';\r\n document.getElementById('payableAmount').value = '';\r\n saveData(); renderPayablesList(); calculateAll();\r\n }\r\n\r\n function deletePayable(id) {\r\n if (confirm('Delete this payable?')) {\r\n const monthKey = getCurrentMonthKey();\r\n financialData[monthKey].payables = financialData[monthKey].payables.filter(item => item.id !== id);\r\n saveData(); renderPayablesList(); calculateAll();\r\n }\r\n }\r\n\r\n function openMakePaymentModal(payableId) {\r\n const monthKey = getCurrentMonthKey();\r\n const payable = financialData[monthKey].payables.find(p => p.id === payableId);\r\n if (!payable) return;\r\n currentPayable = payable;\r\n document.getElementById('payPartyName').textContent = payable.party;\r\n document.getElementById('payTotalDue').textContent = payable.amount.toLocaleString('en-IN');\r\n document.getElementById('payAmount').value = payable.amount;\r\n document.getElementById('makePaymentModal').classList.add('active');\r\n }\r\n\r\n function closeMakePaymentModal() {\r\n document.getElementById('makePaymentModal').classList.remove('active');\r\n currentPayable = null;\r\n }\r\n\r\n function confirmMakePayment() {\r\n const amount = parseFloat(document.getElementById('payAmount').value);\r\n const vaultId = parseInt(document.getElementById('payVaultSelect').value);\r\n if (!amount || amount <= 0) { alert('Please enter a valid amount'); return; }\r\n if (!vaultId) { alert('Please select a vault account'); return; }\r\n const monthKey = getCurrentMonthKey();\r\n const vaultAccount = financialData[monthKey].vaultAccounts.find(v => v.id === vaultId);\r\n if (!vaultAccount) { alert('Vault account not found'); return; }\r\n if (amount > currentPayable.amount) {\r\n if (!confirm(`Amount (\u20b9${amount.toLocaleString('en-IN')}) is more than due (\u20b9${currentPayable.amount.toLocaleString('en-IN')}). Continue?`)) return;\r\n }\r\n if (vaultAccount.amount < amount) {\r\n if (!confirm(`${vaultAccount.name} has insufficient balance (\u20b9${vaultAccount.amount.toLocaleString('en-IN')}). Still proceed?`)) return;\r\n }\r\n const datetime = getCurrentDateTime();\r\n financialData[monthKey].businessExpenses.push({ category: `Payment to ${currentPayable.party}`, amount, date: datetime, vaultId, id: Date.now() });\r\n vaultAccount.amount -= amount;\r\n vaultTransactionHistory[monthKey].push({ type: 'debit', vaultName: vaultAccount.name, amount, description: `Payment to ${currentPayable.party}`, date: datetime, id: Date.now() });\r\n if (amount >= currentPayable.amount) {\r\n financialData[monthKey].payables = financialData[monthKey].payables.filter(p => p.id !== currentPayable.id);\r\n } else {\r\n currentPayable.amount -= amount;\r\n }\r\n saveData(); renderBusinessList(); renderPayablesList(); renderVaultAccounts(); renderTransactionHistory(); calculateAll();\r\n closeMakePaymentModal();\r\n alert(`\u2705 Payment made! \u20b9${amount.toLocaleString('en-IN')} deducted from ${vaultAccount.name}`);\r\n }\r\n\r\n function renderPayablesList() {\r\n const monthKey = getCurrentMonthKey();\r\n const list = document.getElementById('payablesList');\r\n const items = financialData[monthKey].payables;\r\n list.innerHTML = items.map(item => `\r\n <div class=\"dues-item\">\r\n <div class=\"item-info\">\r\n <div class=\"item-name\">${item.party}<\/div>\r\n <div class=\"item-amount\">\u20b9${item.amount.toLocaleString('en-IN')}<\/div>\r\n <div class=\"item-date\">${formatDateTime(item.date)}<\/div>\r\n <\/div>\r\n <div class=\"item-actions\">\r\n <button class=\"btn btn-warning btn-small\" onclick=\"openMakePaymentModal(${item.id})\">Pay<\/button>\r\n <button class=\"btn btn-danger btn-small\" onclick=\"deletePayable(${item.id})\">Delete<\/button>\r\n <\/div>\r\n <\/div>`).join('');\r\n }\r\n\r\n \/\/ ===================== CALCULATIONS & CHARTS =====================\r\n function calculateAll() {\r\n const monthKey = getCurrentMonthKey();\r\n const data = financialData[monthKey];\r\n const totalIncome = data.income.reduce((s, i) => s + i.amount, 0);\r\n const totalBusiness = data.businessExpenses.reduce((s, i) => s + i.amount, 0);\r\n const totalHouse = data.houseExpenses.reduce((s, i) => s + i.amount, 0);\r\n const totalVault = data.vaultAccounts.reduce((s, i) => s + i.amount, 0);\r\n const totalReceivables = data.receivables.reduce((s, i) => s + i.amount, 0);\r\n const totalPayables = data.payables.reduce((s, i) => s + i.amount, 0);\r\n\r\n document.getElementById('totalIncome').textContent = `\u20b9${totalIncome.toLocaleString('en-IN')}`;\r\n document.getElementById('totalBusiness').textContent = `\u20b9${totalBusiness.toLocaleString('en-IN')}`;\r\n document.getElementById('totalHouse').textContent = `\u20b9${totalHouse.toLocaleString('en-IN')}`;\r\n document.getElementById('totalVault').textContent = `\u20b9${totalVault.toLocaleString('en-IN')}`;\r\n document.getElementById('totalReceivables').textContent = `\u20b9${totalReceivables.toLocaleString('en-IN')}`;\r\n document.getElementById('totalPayables').textContent = `\u20b9${totalPayables.toLocaleString('en-IN')}`;\r\n document.getElementById('dashTotalIncome').textContent = `\u20b9${totalIncome.toLocaleString('en-IN')}`;\r\n document.getElementById('dashTotalBusiness').textContent = `\u20b9${totalBusiness.toLocaleString('en-IN')}`;\r\n document.getElementById('dashTotalHouse').textContent = `\u20b9${totalHouse.toLocaleString('en-IN')}`;\r\n\r\n const bookBalance = totalIncome - totalBusiness - totalHouse;\r\n const theGap = totalVault - bookBalance;\r\n const netDues = totalReceivables - totalPayables;\r\n\r\n document.getElementById('bookBalance').textContent = `\u20b9${bookBalance.toLocaleString('en-IN')}`;\r\n document.getElementById('actualCash').textContent = `\u20b9${totalVault.toLocaleString('en-IN')}`;\r\n document.getElementById('theGap').textContent = `\u20b9${theGap.toLocaleString('en-IN')}`;\r\n document.getElementById('recapReceivables').textContent = `\u20b9${totalReceivables.toLocaleString('en-IN')}`;\r\n document.getElementById('recapPayables').textContent = `\u20b9${totalPayables.toLocaleString('en-IN')}`;\r\n document.getElementById('netDues').textContent = `\u20b9${netDues.toLocaleString('en-IN')}`;\r\n\r\n const alertDiv = document.getElementById('reconciliationAlert');\r\n if (Math.abs(theGap) < 1) alertDiv.innerHTML = '<div class=\"alert alert-success\">\u2705 Perfect! Books match actual cash.<\/div>';\r\n else if (theGap > 0) alertDiv.innerHTML = `<div class=\"alert alert-warning\">\u26a0\ufe0f You have \u20b9${theGap.toLocaleString('en-IN')} more cash than your books show.<\/div>`;\r\n else alertDiv.innerHTML = `<div class=\"alert alert-danger\">\u274c You have \u20b9${Math.abs(theGap).toLocaleString('en-IN')} less cash than your books show.<\/div>`;\r\n\r\n updateCharts(totalIncome, totalBusiness, totalHouse, totalReceivables, totalPayables);\r\n }\r\n\r\n function updateCharts(income, business, house, receivables, payables) {\r\n const duesCtx = document.getElementById('duesChart');\r\n const compCtx = document.getElementById('comparisonChart');\r\n if (!duesCtx || !compCtx) return;\r\n if (duesChart) duesChart.destroy();\r\n if (comparisonChart) comparisonChart.destroy();\r\n duesChart = new Chart(duesCtx.getContext('2d'), {\r\n type: 'doughnut',\r\n data: { labels: ['Receivables (To Receive)', 'Payables (To Pay)'], datasets: [{ data: [receivables, payables], backgroundColor: ['#38ef7d', '#ee0979'] }] },\r\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, tooltip: { callbacks: { label: ctx => ctx.label + ': \u20b9' + ctx.parsed.toLocaleString('en-IN') } } } }\r\n });\r\n comparisonChart = new Chart(compCtx.getContext('2d'), {\r\n type: 'bar',\r\n data: { labels: ['Income', 'Business Exp', 'House Exp'], datasets: [{ label: 'Amount (\u20b9)', data: [income, business, house], backgroundColor: ['#38ef7d', '#667eea', '#764ba2'] }] },\r\n options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => 'Amount: \u20b9' + ctx.parsed.y.toLocaleString('en-IN') } } }, scales: { y: { beginAtZero: true, ticks: { callback: v => '\u20b9' + v.toLocaleString('en-IN') } } } }\r\n });\r\n }\r\n\r\n \/\/ ===================== UTILITIES =====================\r\n function updateLiveDateTime() {\r\n const now = new Date();\r\n const opts = { weekday:'long', year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit', second:'2-digit' };\r\n const html = `<strong>\ud83d\udcc5 ${now.toLocaleDateString('en-IN', opts)}<\/strong>`;\r\n ['liveDateTime1','liveDateTime2','liveDateTime3','liveDateTime4'].forEach(id => document.getElementById(id).innerHTML = html);\r\n setTimeout(updateLiveDateTime, 1000);\r\n }\r\n\r\n function initYearDropdown() {\r\n const yearSelect = document.getElementById('yearSelect');\r\n const currentYear = new Date().getFullYear();\r\n for (let year = currentYear - 5; year <= currentYear + 5; year++) {\r\n const option = document.createElement('option');\r\n option.value = year; option.textContent = year;\r\n if (year === currentYear) option.selected = true;\r\n yearSelect.appendChild(option);\r\n }\r\n }\r\n\r\n function showWhatIf() {\r\n const monthKey = getCurrentMonthKey();\r\n const data = financialData[monthKey];\r\n const totalActualCash = data.vaultAccounts.reduce((s, a) => s + a.amount, 0);\r\n const totalReceivables = data.receivables.reduce((s, i) => s + i.amount, 0);\r\n const totalPayables = data.payables.reduce((s, i) => s + i.amount, 0);\r\n const trueNet = (totalActualCash + totalReceivables) - totalPayables;\r\n alert(`\ud83d\udca1 What If Analysis:\\n\\nCurrent Vault: \u20b9${totalActualCash.toLocaleString('en-IN')}\\nAdd Receivables: +\u20b9${totalReceivables.toLocaleString('en-IN')}\\nPay All Payables: -\u20b9${totalPayables.toLocaleString('en-IN')}\\n\\n\u2705 Your True Net Position: \u20b9${trueNet.toLocaleString('en-IN')}`);\r\n }\r\n\r\n function downloadBackup() {\r\n const dataStr = JSON.stringify(financialData, null, 2);\r\n const dataBlob = new Blob([dataStr], { type: 'application\/json' });\r\n const url = URL.createObjectURL(dataBlob);\r\n const link = document.createElement('a');\r\n link.href = url; link.download = `financial-backup-${new Date().toISOString().split('T')[0]}.json`;\r\n link.click(); alert('\u2705 Backup downloaded successfully!');\r\n }\r\n\r\n function importBackup(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const importedData = JSON.parse(e.target.result);\r\n if (confirm('This will replace ALL current data. Are you sure?')) {\r\n financialData = importedData; saveData(); loadMonthData(); alert('\u2705 Data imported successfully!');\r\n }\r\n } catch (error) { alert('\u274c Error importing file.'); }\r\n };\r\n reader.readAsText(file); event.target.value = '';\r\n }\r\n\r\n function clearMonth() {\r\n if (confirm('Are you sure you want to clear all data for this month?')) {\r\n const monthKey = getCurrentMonthKey();\r\n delete financialData[monthKey]; delete vaultTransactionHistory[monthKey];\r\n saveData(); loadMonthData(); alert('\u2705 Month data cleared!');\r\n }\r\n }\r\n\r\n function exportToExcel() {\r\n const monthKey = getCurrentMonthKey();\r\n const data = financialData[monthKey];\r\n const [year, month] = monthKey.split('-');\r\n const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];\r\n const monthName = monthNames[parseInt(month)-1];\r\n const wb = XLSX.utils.book_new();\r\n const colWidths = [{ wch:30 }, { wch:15 }, { wch:20 }];\r\n\r\n const mkSheet = (headerTitle, rows, fields) => {\r\n const sheetData = [[headerTitle, '', ''], [fields[0], 'Amount (\u20b9)', 'Date & Time'],\r\n ...rows.map(item => [item[Object.keys(item)[0]], item.amount, formatDateTime(item.date)]),\r\n ['', '', ''], [`TOTAL`, `=SUM(B3:B${2+rows.length})`, '']];\r\n const ws = XLSX.utils.aoa_to_sheet(sheetData);\r\n ws['!cols'] = colWidths; return ws;\r\n };\r\n\r\n const summaryData = [\r\n ['\ud83d\udcca FINANCIAL SUMMARY - ' + monthName + ' ' + year, '', ''], ['', '', ''],\r\n ['Description', 'Amount (\u20b9)', ''],\r\n ['Total Income', data.income.reduce((s,i)=>s+i.amount,0), ''],\r\n ['Total Business Expenses', data.businessExpenses.reduce((s,i)=>s+i.amount,0), ''],\r\n ['Total House Expenses', data.houseExpenses.reduce((s,i)=>s+i.amount,0), ''],\r\n ['', '', ''],\r\n ['Book Balance', '=B4-B5-B6', ''],\r\n ['Actual Cash (Vault Total)', data.vaultAccounts.reduce((s,i)=>s+i.amount,0), ''],\r\n ['The Gap', '=B9-B8', ''], ['', '', ''],\r\n ['Total Receivables', data.receivables.reduce((s,i)=>s+i.amount,0), ''],\r\n ['Total Payables', data.payables.reduce((s,i)=>s+i.amount,0), ''],\r\n ['Net Dues', '=B12-B13', '']\r\n ];\r\n const ws_summary = XLSX.utils.aoa_to_sheet(summaryData);\r\n ws_summary['!cols'] = [{ wch:35 }, { wch:20 }, { wch:15 }];\r\n\r\n XLSX.utils.book_append_sheet(wb, ws_summary, 'Summary');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83d\udcb0 INCOME', data.income, ['source']), 'Income');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83d\udcbc BUSINESS EXPENSES', data.businessExpenses, ['category']), 'Business');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83c\udfe0 HOUSE EXPENSES', data.houseExpenses, ['category']), 'House');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83c\udfe6 VAULT ACCOUNTS', data.vaultAccounts, ['name']), 'Vault');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83d\udce5 RECEIVABLES', data.receivables, ['party']), 'Receivables');\r\n XLSX.utils.book_append_sheet(wb, mkSheet('\ud83d\udce4 PAYABLES', data.payables, ['party']), 'Payables');\r\n\r\n XLSX.writeFile(wb, `Financial_Dashboard_${monthName}_${year}.xlsx`);\r\n alert(`\u2705 Excel file exported successfully!`);\r\n }\r\n\r\n \/\/ Event listeners\r\n document.getElementById('monthSelect').addEventListener('change', loadMonthData);\r\n document.getElementById('yearSelect').addEventListener('change', loadMonthData);\r\n document.getElementById('monthSelect').value = new Date().getMonth() + 1;\r\n\r\n window.addEventListener('DOMContentLoaded', function() {\r\n updateLiveDateTime();\r\n initYearDropdown();\r\n const saved = localStorage.getItem('financialDashboardData');\r\n if (saved) financialData = JSON.parse(saved);\r\n const savedHistory = localStorage.getItem('vaultTransactionHistory');\r\n if (savedHistory) vaultTransactionHistory = JSON.parse(savedHistory);\r\n loadMonthData();\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Financial Dashboard \ud83d\udcb0 Financial Dashboard \ud83d\udcc5 Select Month: JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember \ud83d\udcc6 Select Year: \ud83d\udcdd Income & Expenses \ud83c\udfe6 Vault & History \ud83d\udcb0 Dues Management \ud83d\udcca Dashboard \ud83d\udcb0 Income Source Amount (\u20b9) \ud83c\udfe6 Vault Account — Select Vault — Add Total Income:\u20b90 \ud83d\udcbc Business Expenses Category Amount (\u20b9) \ud83c\udfe6 Vault Account — Select Vault — Add Total:\u20b90 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","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":"","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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-3096","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=3096"}],"version-history":[{"count":13,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3096\/revisions"}],"predecessor-version":[{"id":3159,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3096\/revisions\/3159"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=3096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}