\u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;700&display=swap');\r\n\r\nbody {\r\n font-family: 'Heebo', sans-serif;\r\n line-height: 1.6;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\nheader {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n text-align: center;\r\n padding: 1rem;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\nmain {\r\n padding: 2rem;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n}\r\n\r\nnav ul {\r\n list-style-type: none;\r\n padding: 0;\r\n display: flex;\r\n justify-content: space-around;\r\n background-color: #fff;\r\n border-radius: 10px;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\nnav ul li a {\r\n display: block;\r\n padding: 1rem;\r\n text-decoration: none;\r\n color: #333;\r\n font-weight: bold;\r\n}\r\n\r\nnav ul li a.active {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n border-radius: 10px;\r\n}\r\n\r\n.card {\r\n background-color: #fff;\r\n border-radius: 10px;\r\n padding: 2rem;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n}\r\n\r\nform {\r\n display: grid;\r\n gap: 1rem;\r\n}\r\n\r\nlabel {\r\n font-weight: bold;\r\n}\r\n\r\ninput, select, textarea {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n font-family: 'Heebo', sans-serif;\r\n}\r\n\r\nbutton {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n padding: 0.5rem 1rem;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\nbutton:hover {\r\n background-color: #3a7bc8;\r\n}\r\n\r\ntable {\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n}\r\n\r\nth, td {\r\n border: 1px solid #ddd;\r\n padding: 0.5rem;\r\n text-align: right;\r\n}\r\n\r\nth {\r\n background-color: #f2f2f2;\r\n}\r\n\r\ntr:first-child th:first-child {\r\n border-top-right-radius: 5px;\r\n}\r\n\r\ntr:first-child th:last-child {\r\n border-top-left-radius: 5px;\r\n}\r\n\r\ntr:last-child td:first-child {\r\n border-bottom-right-radius: 5px;\r\n}\r\n\r\ntr:last-child td:last-child {\r\n border-bottom-left-radius: 5px;\r\n}\r\n\r\n#categories ul {\r\n list-style-type: none;\r\n padding: 0;\r\n}\r\n\r\n#categories li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n#categories input[type=\"color\"] {\r\n width: 30px;\r\n height: 30px;\r\n padding: 0;\r\n border: none;\r\n}\r\n\r\n\/* \u05d7\u05dc\u05e7 \u05d7\u05d3\u05e9: \u05e2\u05d9\u05e6\u05d5\u05d1 \u05d4\u05d2\u05e8\u05e4\u05d9\u05dd *\/\r\n.chart-container {\r\n position: relative;\r\n height: 60vh;\r\n width: 100%;\r\n margin: 2rem auto;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n nav ul {\r\n flex-direction: column;\r\n }\r\n\r\n nav ul li {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .card {\r\n padding: 1rem;\r\n }\r\n\r\n form {\r\n gap: 0.5rem;\r\n }\r\n\r\n .chart-container {\r\n height: 50vh;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <h1>\u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9<\/h1>\r\n <\/header>\r\n \r\n <main>\r\n <nav>\r\n <ul>\r\n <li><a href=\"#expenses\" class=\"active\">\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#income\">\u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#reports\">\u05d3\u05d5\u05d7\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#categories\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <section id=\"expenses\" class=\"tab-content card\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/h2>\r\n <form id=\"expense-form\">\r\n <label for=\"expense-amount\">\u05e1\u05db\u05d5\u05dd:<\/label>\r\n <input type=\"number\" id=\"expense-amount\" name=\"amount\" required min=\"0\" step=\"0.01\">\r\n \r\n <label for=\"expense-category\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/label>\r\n <select id=\"expense-category\" name=\"category\" required><\/select>\r\n \r\n <label for=\"expense-date\">\u05ea\u05d0\u05e8\u05d9\u05da:<\/label>\r\n <input type=\"date\" id=\"expense-date\" name=\"date\" required>\r\n \r\n <label for=\"expense-description\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/label>\r\n <textarea id=\"expense-description\" name=\"description\"><\/textarea>\r\n \r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05d4\u05d5\u05e6\u05d0\u05d4<\/button>\r\n <\/form>\r\n\r\n <div class=\"table-container\">\r\n <table id=\"expenses-table\">\r\n <thead>\r\n <tr>\r\n <th>\u05ea\u05d0\u05e8\u05d9\u05da<\/th>\r\n <th>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/th>\r\n <th>\u05e1\u05db\u05d5\u05dd<\/th>\r\n <th>\u05ea\u05d9\u05d0\u05d5\u05e8<\/th>\r\n <th>\u05e4\u05e2\u05d5\u05dc\u05d5\u05ea<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"expenses-body\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"income\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/h2>\r\n <form id=\"income-form\">\r\n <label for=\"income-amount\">\u05e1\u05db\u05d5\u05dd:<\/label>\r\n <input type=\"number\" id=\"income-amount\" name=\"amount\" required min=\"0\" step=\"0.01\">\r\n \r\n <label for=\"income-category\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/label>\r\n <select id=\"income-category\" name=\"category\" required><\/select>\r\n \r\n <label for=\"income-date\">\u05ea\u05d0\u05e8\u05d9\u05da:<\/label>\r\n <input type=\"date\" id=\"income-date\" name=\"date\" required>\r\n \r\n <label for=\"income-description\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/label>\r\n <textarea id=\"income-description\" name=\"description\"><\/textarea>\r\n \r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05d4\u05db\u05e0\u05e1\u05d4<\/button>\r\n <\/form>\r\n\r\n <div class=\"table-container\">\r\n <table id=\"income-table\">\r\n <thead>\r\n <tr>\r\n <th>\u05ea\u05d0\u05e8\u05d9\u05da<\/th>\r\n <th>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/th>\r\n <th>\u05e1\u05db\u05d5\u05dd<\/th>\r\n <th>\u05ea\u05d9\u05d0\u05d5\u05e8<\/th>\r\n <th>\u05e4\u05e2\u05d5\u05dc\u05d5\u05ea<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"income-body\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"reports\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05d3\u05d5\u05d7\u05d5\u05ea \u05d5\u05d4\u05e9\u05d5\u05d5\u05d0\u05d5\u05ea<\/h2>\r\n <div id=\"monthly-summary\"><\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"expense-chart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"income-chart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"comparison-chart\"><\/canvas>\r\n <\/div>\r\n <div id=\"month-comparison\"><\/div>\r\n <div id=\"improvement-suggestions\"><\/div>\r\n <\/section>\r\n\r\n <section id=\"categories\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea<\/h2>\r\n <div id=\"expense-categories\">\r\n <h3>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/h3>\r\n <ul id=\"expense-categories-list\"><\/ul>\r\n <form id=\"add-expense-category-form\">\r\n <input type=\"text\" id=\"new-expense-category\" required placeholder=\"\u05e9\u05dd \u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4\">\r\n <input type=\"color\" id=\"new-expense-category-color\" required>\r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/button>\r\n <\/form>\r\n <\/div>\r\n <div id=\"income-categories\">\r\n <h3>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/h3>\r\n <ul id=\"income-categories-list\"><\/ul>\r\n <form id=\"add-income-category-form\">\r\n <input type=\"text\" id=\"new-income-category\" required placeholder=\"\u05e9\u05dd \u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4\">\r\n <input type=\"color\" id=\"new-income-category-color\" required>\r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script>\r\n \/\/ \u05de\u05d1\u05e0\u05d9 \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd\r\nlet expenses = JSON.parse(localStorage.getItem('expenses')) || [];\r\nlet incomes = JSON.parse(localStorage.getItem('incomes')) || [];\r\nlet expenseCategories = JSON.parse(localStorage.getItem('expenseCategories')) || [\r\n { name: '\u05de\u05d6\u05d5\u05df', color: '#FF5733' },\r\n { name: '\u05ea\u05d7\u05d1\u05d5\u05e8\u05d4', color: '#33FF57' },\r\n { name: '\u05d1\u05d9\u05d2\u05d5\u05d3', color: '#3357FF' }\r\n];\r\nlet incomeCategories = JSON.parse(localStorage.getItem('incomeCategories')) || [\r\n { name: '\u05de\u05e9\u05db\u05d5\u05e8\u05ea', color: '#FFFF33' },\r\n { name: '\u05de\u05ea\u05e0\u05d5\u05ea', color: '#FF33FF' }\r\n];\r\n\r\n\/\/ \u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u05d1\u05d3\u05e3\r\nconst expenseForm = document.getElementById('expense-form');\r\nconst incomeForm = document.getElementById('income-form');\r\nconst expensesBody = document.getElementById('expenses-body');\r\nconst incomeBody = document.getElementById('income-body');\r\nconst expenseCategorySelect = document.getElementById('expense-category');\r\nconst incomeCategorySelect = document.getElementById('income-category');\r\nconst addExpenseCategoryForm = document.getElementById('add-expense-category-form');\r\nconst addIncomeCategoryForm = document.getElementById('add-income-category-form');\r\nconst navLinks = document.querySelectorAll('nav a');\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05e2\u05d6\u05e8\r\nfunction saveToLocalStorage() {\r\n localStorage.setItem('expenses', JSON.stringify(expenses));\r\n localStorage.setItem('incomes', JSON.stringify(incomes));\r\n localStorage.setItem('expenseCategories', JSON.stringify(expenseCategories));\r\n localStorage.setItem('incomeCategories', JSON.stringify(incomeCategories));\r\n}\r\n\r\nfunction populateCategorySelects() {\r\n expenseCategorySelect.innerHTML = expenseCategories.map(cat => `<option value=\"${cat.name}\">${cat.name}<\/option>`).join('');\r\n incomeCategorySelect.innerHTML = incomeCategories.map(cat => `<option value=\"${cat.name}\">${cat.name}<\/option>`).join('');\r\n}\r\n\r\nfunction getCategoryColor(categoryName, type) {\r\n const categories = type === 'expense' ? expenseCategories : incomeCategories;\r\n return categories.find(cat => cat.name === categoryName)?.color || '#000000';\r\n}\r\n\r\n\/\/ \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd\r\nexpenseForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const amount = document.getElementById('expense-amount').value;\r\n const category = document.getElementById('expense-category').value;\r\n const date = document.getElementById('expense-date').value;\r\n const description = document.getElementById('expense-description').value;\r\n \r\n expenses.push({ amount, category, date, description });\r\n saveToLocalStorage();\r\n renderExpenses();\r\n updateReports();\r\n expenseForm.reset();\r\n});\r\n\r\nincomeForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const amount = document.getElementById('income-amount').value;\r\n const category = document.getElementById('income-category').value;\r\n const date = document.getElementById('income-date').value;\r\n const description = document.getElementById('income-description').value;\r\n \r\n incomes.push({ amount, category, date, description });\r\n saveToLocalStorage();\r\n renderIncomes();\r\n updateReports();\r\n incomeForm.reset();\r\n});\r\n\r\naddExpenseCategoryForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById('new-expense-category').value;\r\n const color = document.getElementById('new-expense-category-color').value;\r\n expenseCategories.push({ name, color });\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n addExpenseCategoryForm.reset();\r\n});\r\n\r\naddIncomeCategoryForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById('new-income-category').value;\r\n const color = document.getElementById('new-income-category-color').value;\r\n incomeCategories.push({ name, color });\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n addIncomeCategoryForm.reset();\r\n});\r\n\r\nnavLinks.forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n document.querySelector('nav a.active').classList.remove('active');\r\n this.classList.add('active');\r\n document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');\r\n document.querySelector(this.getAttribute('href')).style.display = 'block';\r\n if (this.getAttribute('href') === '#reports') {\r\n updateReports();\r\n }\r\n });\r\n});\r\n\r\n\/\/ \u05e8\u05d9\u05e0\u05d3\u05d5\u05e8 \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea\r\nfunction renderExpenses() {\r\n expensesBody.innerHTML = expenses.map((expense, index) => `\r\n <tr style=\"color: ${getCategoryColor(expense.category, 'expense')}\">\r\n <td>${expense.date}<\/td>\r\n <td>${expense.category}<\/td>\r\n <td>\u20aa${parseFloat(expense.amount).toFixed(2)}<\/td>\r\n <td>${expense.description}<\/td>\r\n <td>\r\n <button onclick=\"editItem('expense', ${index})\">\u05e2\u05e8\u05d5\u05da<\/button>\r\n <button onclick=\"deleteItem('expense', ${index})\">\u05de\u05d7\u05e7<\/button>\r\n <\/td>\r\n <\/tr>\r\n `).join('');\r\n}\r\n\r\nfunction renderIncomes() {\r\n incomeBody.innerHTML = incomes.map((income, index) => `\r\n <tr style=\"color: ${getCategoryColor(income.category, 'income')}\">\r\n <td>${income.date}<\/td>\r\n <td>${income.category}<\/td>\r\n <td>\u20aa${parseFloat(income.amount).toFixed(2)}<\/td>\r\n <td>${income.description}<\/td>\r\n <td>\r\n <button onclick=\"editItem('income', ${index})\">\u05e2\u05e8\u05d5\u05da<\/button>\r\n <button onclick=\"deleteItem('income', ${index})\">\u05de\u05d7\u05e7<\/button>\r\n <\/td>\r\n <\/tr>\r\n `).join('');\r\n}\r\n\r\nfunction renderCategoryLists() {\r\n document.getElementById('expense-categories-list').innerHTML = expenseCategories.map(cat => `\r\n <li>\r\n <span style=\"color: ${cat.color}\">${cat.name}<\/span>\r\n <button onclick=\"deleteCategory('expense', '${cat.name}')\">\u05de\u05d7\u05e7<\/button>\r\n <\/li>\r\n `).join('');\r\n\r\n document.getElementById('income-categories-list').innerHTML = incomeCategories.map(cat => `\r\n <li>\r\n <span style=\"color: ${cat.color}\">${cat.name}<\/span>\r\n <button onclick=\"deleteCategory('income', '${cat.name}')\">\u05de\u05d7\u05e7<\/button>\r\n <\/li>\r\n `).join('');\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05e2\u05e8\u05d9\u05db\u05d4 \u05d5\u05de\u05d7\u05d9\u05e7\u05d4\r\nfunction editItem(type, index) {\r\n const items = type === 'expense' ? expenses : incomes;\r\n const item = items[index];\r\n const form = type === 'expense' ? expenseForm : incomeForm;\r\n\r\n form.querySelector('[name=\"amount\"]').value = item.amount;\r\n form.querySelector('[name=\"category\"]').value = item.category;\r\n form.querySelector('[name=\"date\"]').value = item.date;\r\n form.querySelector('[name=\"description\"]').value = item.description;\r\n\r\n items.splice(index, 1);\r\n saveToLocalStorage();\r\n type === 'expense' ? renderExpenses() : renderIncomes();\r\n updateReports();\r\n}\r\n\r\nfunction deleteItem(type, index) {\r\n const items = type === 'expense' ? expenses : incomes;\r\n items.splice(index, 1);\r\n saveToLocalStorage();\r\n type === 'expense' ? renderExpenses() : renderIncomes();\r\n updateReports();\r\n}\r\n\r\nfunction deleteCategory(type, categoryName) {\r\n const categories = type === 'expense' ? expenseCategories : incomeCategories;\r\n const index = categories.findIndex(cat => cat.name === categoryName);\r\n if (index !== -1) {\r\n categories.splice(index, 1);\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea\r\nfunction updateReports() {\r\n updateMonthlySummary();\r\n updateCategoryCharts();\r\n updateComparisonChart();\r\n updateMonthComparison();\r\n updateImprovementSuggestions();\r\n}\r\n\r\nfunction updateMonthlySummary() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n\r\n const monthlyExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const monthlyIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n const balance = monthlyIncomes - monthlyExpenses;\r\n\r\n document.getElementById('monthly-summary').innerHTML = `\r\n <h3>\u05e1\u05d9\u05db\u05d5\u05dd \u05d7\u05d5\u05d3\u05e9\u05d9<\/h3>\r\n <p>\u05d4\u05db\u05e0\u05e1\u05d5\u05ea: \u20aa${monthlyIncomes.toFixed(2)}<\/p>\r\n <p>\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea: \u20aa${monthlyExpenses.toFixed(2)}<\/p>\r\n <p>\u05de\u05d0\u05d6\u05df: \u20aa${balance.toFixed(2)}<\/p>\r\n `;\r\n}\r\n\r\nfunction updateCategoryCharts() {\r\n const expenseData = aggregateByCategory(expenses);\r\n const incomeData = aggregateByCategory(incomes);\r\n\r\n createPieChart('expense-chart', '\u05d4\u05ea\u05e4\u05dc\u05d2\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05dc\u05e4\u05d9 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4', expenseData, 'expense');\r\n createPieChart('income-chart', '\u05d4\u05ea\u05e4\u05dc\u05d2\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05dc\u05e4\u05d9 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4', incomeData, 'income');\r\n}\r\n\r\nfunction aggregateByCategory(items) {\r\n const aggregated = {};\r\n items.forEach(item => {\r\n if (aggregated[item.category]) {\r\n aggregated[item.category] += parseFloat(item.amount);\r\n } else {\r\n aggregated[item.category] = parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(aggregated).map(([category, amount]) => ({ category, amount }));\r\n}\r\n\r\nfunction createPieChart(canvasId, title, data, type) {\r\n const ctx = document.getElementById(canvasId).getContext('2d');\r\n new Chart(ctx, {\r\n type: 'pie',\r\n data: {\r\n labels: data.map(item => item.category),\r\n datasets: [{\r\n data: data.map(item => item.amount),\r\n backgroundColor: data.map(item => getCategoryColor(item.category, type))\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'right',\r\n },\r\n title: {\r\n display: true,\r\n text: title,\r\n font: {\r\n size: 18\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction updateComparisonChart() {\r\n const monthlyExpenses = aggregateByMonth(expenses);\r\n const monthlyIncomes = aggregateByMonth(incomes);\r\n\r\n const ctx = document.getElementById('comparison-chart').getContext('2d');\r\n new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: monthlyExpenses.map(item => item.month),\r\n datasets: [\r\n {\r\n label: '\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea',\r\n data: monthlyExpenses.map(item => item.amount),\r\n backgroundColor: 'rgba(255, 99, 132, 0.5)'\r\n },\r\n {\r\n label: '\u05d4\u05db\u05e0\u05e1\u05d5\u05ea',\r\n data: monthlyIncomes.map(item => item.amount),\r\n backgroundColor: 'rgba(75, 192, 192, 0.5)'\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n title: {\r\n display: true,\r\n text: '\u05d4\u05e9\u05d5\u05d5\u05d0\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d5\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d7\u05d5\u05d3\u05e9\u05d9\u05ea',\r\n font: {\r\n size: 18\r\n }\r\n }\r\n },\r\n scales: {\r\n x: {\r\n stacked: false,\r\n },\r\n y: {\r\n stacked: false\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction aggregateByMonth(items) {\r\n const aggregated = {};\r\n items.forEach(item => {\r\n const date = new Date(item.date);\r\n const monthYear = `${date.getMonth() + 1}\/${date.getFullYear()}`;\r\n if (aggregated[monthYear]) {\r\n aggregated[monthYear] += parseFloat(item.amount);\r\n } else {\r\n aggregated[monthYear] = parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(aggregated).map(([month, amount]) => ({ month, amount }));\r\n}\r\n\r\nfunction updateMonthComparison() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;\r\n const lastMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;\r\n\r\n const currentMonthExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const lastMonthExpenses = sumItemsForMonth(expenses, lastMonth, lastMonthYear);\r\n const currentMonthIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n const lastMonthIncomes = sumItemsForMonth(incomes, lastMonth, lastMonthYear);\r\n\r\n const expenseDifference = currentMonthExpenses - lastMonthExpenses;\r\n const incomeDifference = currentMonthIncomes - lastMonthIncomes;\r\n\r\n document.getElementById('month-comparison').innerHTML = `\r\n <h3>\u05d4\u05e9\u05d5\u05d5\u05d0\u05d4 \u05dc\u05d7\u05d5\u05d3\u05e9 \u05e7\u05d5\u05d3\u05dd<\/h3>\r\n <p>\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea: ${expenseDifference > 0 ? '\u05e2\u05dc\u05d9\u05d9\u05d4' : '\u05d9\u05e8\u05d9\u05d3\u05d4'} \u05e9\u05dc \u20aa${Math.abs(expenseDifference).toFixed(2)}<\/p>\r\n <p>\u05d4\u05db\u05e0\u05e1\u05d5\u05ea: ${incomeDifference > 0 ? '\u05e2\u05dc\u05d9\u05d9\u05d4' : '\u05d9\u05e8\u05d9\u05d3\u05d4'} \u05e9\u05dc \u20aa${Math.abs(incomeDifference).toFixed(2)}<\/p>\r\n `;\r\n}\r\n\r\nfunction sumItemsForMonth(items, month, year) {\r\n return items.filter(item => {\r\n const date = new Date(item.date);\r\n return date.getMonth() === month && date.getFullYear() === year;\r\n }).reduce((sum, item) => sum + parseFloat(item.amount), 0);\r\n}\r\n\r\nfunction updateImprovementSuggestions() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n\r\n const monthlyExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const monthlyIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n\r\n let suggestions = [];\r\n\r\n if (monthlyExpenses > monthlyIncomes) {\r\n suggestions.push('\u05d4\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05e9\u05dc\u05da \u05d2\u05d1\u05d5\u05d4\u05d5\u05ea \u05de\u05d4\u05d4\u05db\u05e0\u05e1\u05d5\u05ea. \u05e0\u05e1\u05d4 \u05dc\u05e6\u05de\u05e6\u05dd \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d0\u05d5 \u05dc\u05d4\u05d2\u05d3\u05d9\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea.');\r\n }\r\n\r\n const topExpenseCategories = getTopCategories(expenses, currentMonth, currentYear, 3);\r\n suggestions.push(`\u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e2\u05dd \u05d4\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05d2\u05d1\u05d5\u05d4\u05d5\u05ea \u05d1\u05d9\u05d5\u05ea\u05e8: ${topExpenseCategories.join(', ')}. \u05e9\u05e7\u05d5\u05dc \u05dc\u05e6\u05de\u05e6\u05dd \u05d1\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d0\u05dc\u05d5.`);\r\n\r\n if (monthlyIncomes > 0 && (monthlyExpenses \/ monthlyIncomes) > 0.7) {\r\n suggestions.push('\u05d0\u05ea\u05d4 \u05de\u05d5\u05e6\u05d9\u05d0 \u05d9\u05d5\u05ea\u05e8 \u05de-70% \u05de\u05d4\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05e9\u05dc\u05da. \u05e0\u05e1\u05d4 \u05dc\u05d7\u05e1\u05d5\u05da \u05d9\u05d5\u05ea\u05e8.');\r\n }\r\n\r\n document.getElementById('improvement-suggestions').innerHTML = `\r\n <h3>\u05d4\u05e6\u05e2\u05d5\u05ea \u05dc\u05e9\u05d9\u05e4\u05d5\u05e8<\/h3>\r\n <ul>\r\n ${suggestions.map(suggestion => `<li>${suggestion}<\/li>`).join('')}\r\n <\/ul>\r\n `;\r\n}\r\n\r\nfunction getTopCategories(items, month, year, count) {\r\n const categorySums = {};\r\n items.forEach(item => {\r\n const date = new Date(item.date);\r\n if (date.getMonth() === month && date.getFullYear() === year) {\r\n categorySums[item.category] = (categorySums[item.category] || 0) + parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(categorySums)\r\n .sort((a, b) => b[1] - a[1])\r\n .slice(0, count)\r\n .map(item => item[0]);\r\n}\r\n\r\n\/\/ \u05d0\u05ea\u05d7\u05d5\u05dc\r\npopulateCategorySelects();\r\nrenderExpenses();\r\nrenderIncomes();\r\nrenderCategoryLists();\r\nupdateReports();\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>\u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9 \u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05e1\u05db\u05d5\u05dd: \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4: \u05ea\u05d0\u05e8\u05d9\u05da: \u05ea\u05d9\u05d0\u05d5\u05e8: \u05d4\u05d5\u05e1\u05e3 \u05d4\u05d5\u05e6\u05d0\u05d4 \u05ea\u05d0\u05e8\u05d9\u05da \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e1\u05db\u05d5\u05dd \u05ea\u05d9\u05d0\u05d5\u05e8 \u05e4\u05e2\u05d5\u05dc\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05e1\u05db\u05d5\u05dd: \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4: \u05ea\u05d0\u05e8\u05d9\u05da: \u05ea\u05d9\u05d0\u05d5\u05e8: \u05d4\u05d5\u05e1\u05e3 \u05d4\u05db\u05e0\u05e1\u05d4 \u05ea\u05d0\u05e8\u05d9\u05da \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e1\u05db\u05d5\u05dd \u05ea\u05d9\u05d0\u05d5\u05e8 \u05e4\u05e2\u05d5\u05dc\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea \u05d5\u05d4\u05e9\u05d5\u05d5\u05d0\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","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":"","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-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-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-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-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-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-gradient":""}},"footnotes":""},"class_list":["post-6932","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6932"}],"version-history":[{"count":13,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932\/revisions"}],"predecessor-version":[{"id":6948,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932\/revisions\/6948"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\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 \u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Heebo:wght@300;400;700&display=swap');\r\n\r\nbody {\r\n font-family: 'Heebo', sans-serif;\r\n line-height: 1.6;\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\nheader {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n text-align: center;\r\n padding: 1rem;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\nmain {\r\n padding: 2rem;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n}\r\n\r\nnav ul {\r\n list-style-type: none;\r\n padding: 0;\r\n display: flex;\r\n justify-content: space-around;\r\n background-color: #fff;\r\n border-radius: 10px;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\nnav ul li a {\r\n display: block;\r\n padding: 1rem;\r\n text-decoration: none;\r\n color: #333;\r\n font-weight: bold;\r\n}\r\n\r\nnav ul li a.active {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n border-radius: 10px;\r\n}\r\n\r\n.card {\r\n background-color: #fff;\r\n border-radius: 10px;\r\n padding: 2rem;\r\n margin-bottom: 2rem;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n}\r\n\r\nform {\r\n display: grid;\r\n gap: 1rem;\r\n}\r\n\r\nlabel {\r\n font-weight: bold;\r\n}\r\n\r\ninput, select, textarea {\r\n width: 100%;\r\n padding: 0.5rem;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n font-family: 'Heebo', sans-serif;\r\n}\r\n\r\nbutton {\r\n background-color: #4a90e2;\r\n color: #fff;\r\n padding: 0.5rem 1rem;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\nbutton:hover {\r\n background-color: #3a7bc8;\r\n}\r\n\r\ntable {\r\n width: 100%;\r\n border-collapse: separate;\r\n border-spacing: 0;\r\n}\r\n\r\nth, td {\r\n border: 1px solid #ddd;\r\n padding: 0.5rem;\r\n text-align: right;\r\n}\r\n\r\nth {\r\n background-color: #f2f2f2;\r\n}\r\n\r\ntr:first-child th:first-child {\r\n border-top-right-radius: 5px;\r\n}\r\n\r\ntr:first-child th:last-child {\r\n border-top-left-radius: 5px;\r\n}\r\n\r\ntr:last-child td:first-child {\r\n border-bottom-right-radius: 5px;\r\n}\r\n\r\ntr:last-child td:last-child {\r\n border-bottom-left-radius: 5px;\r\n}\r\n\r\n#categories ul {\r\n list-style-type: none;\r\n padding: 0;\r\n}\r\n\r\n#categories li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n#categories input[type=\"color\"] {\r\n width: 30px;\r\n height: 30px;\r\n padding: 0;\r\n border: none;\r\n}\r\n\r\n\/* \u05d7\u05dc\u05e7 \u05d7\u05d3\u05e9: \u05e2\u05d9\u05e6\u05d5\u05d1 \u05d4\u05d2\u05e8\u05e4\u05d9\u05dd *\/\r\n.chart-container {\r\n position: relative;\r\n height: 60vh;\r\n width: 100%;\r\n margin: 2rem auto;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n nav ul {\r\n flex-direction: column;\r\n }\r\n\r\n nav ul li {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .card {\r\n padding: 1rem;\r\n }\r\n\r\n form {\r\n gap: 0.5rem;\r\n }\r\n\r\n .chart-container {\r\n height: 50vh;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <h1>\u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9<\/h1>\r\n <\/header>\r\n \r\n <main>\r\n <nav>\r\n <ul>\r\n <li><a href=\"#expenses\" class=\"active\">\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#income\">\u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#reports\">\u05d3\u05d5\u05d7\u05d5\u05ea<\/a><\/li>\r\n <li><a href=\"#categories\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <section id=\"expenses\" class=\"tab-content card\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/h2>\r\n <form id=\"expense-form\">\r\n <label for=\"expense-amount\">\u05e1\u05db\u05d5\u05dd:<\/label>\r\n <input type=\"number\" id=\"expense-amount\" name=\"amount\" required min=\"0\" step=\"0.01\">\r\n \r\n <label for=\"expense-category\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/label>\r\n <select id=\"expense-category\" name=\"category\" required><\/select>\r\n \r\n <label for=\"expense-date\">\u05ea\u05d0\u05e8\u05d9\u05da:<\/label>\r\n <input type=\"date\" id=\"expense-date\" name=\"date\" required>\r\n \r\n <label for=\"expense-description\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/label>\r\n <textarea id=\"expense-description\" name=\"description\"><\/textarea>\r\n \r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05d4\u05d5\u05e6\u05d0\u05d4<\/button>\r\n <\/form>\r\n\r\n <div class=\"table-container\">\r\n <table id=\"expenses-table\">\r\n <thead>\r\n <tr>\r\n <th>\u05ea\u05d0\u05e8\u05d9\u05da<\/th>\r\n <th>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/th>\r\n <th>\u05e1\u05db\u05d5\u05dd<\/th>\r\n <th>\u05ea\u05d9\u05d0\u05d5\u05e8<\/th>\r\n <th>\u05e4\u05e2\u05d5\u05dc\u05d5\u05ea<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"expenses-body\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"income\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/h2>\r\n <form id=\"income-form\">\r\n <label for=\"income-amount\">\u05e1\u05db\u05d5\u05dd:<\/label>\r\n <input type=\"number\" id=\"income-amount\" name=\"amount\" required min=\"0\" step=\"0.01\">\r\n \r\n <label for=\"income-category\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/label>\r\n <select id=\"income-category\" name=\"category\" required><\/select>\r\n \r\n <label for=\"income-date\">\u05ea\u05d0\u05e8\u05d9\u05da:<\/label>\r\n <input type=\"date\" id=\"income-date\" name=\"date\" required>\r\n \r\n <label for=\"income-description\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/label>\r\n <textarea id=\"income-description\" name=\"description\"><\/textarea>\r\n \r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05d4\u05db\u05e0\u05e1\u05d4<\/button>\r\n <\/form>\r\n\r\n <div class=\"table-container\">\r\n <table id=\"income-table\">\r\n <thead>\r\n <tr>\r\n <th>\u05ea\u05d0\u05e8\u05d9\u05da<\/th>\r\n <th>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/th>\r\n <th>\u05e1\u05db\u05d5\u05dd<\/th>\r\n <th>\u05ea\u05d9\u05d0\u05d5\u05e8<\/th>\r\n <th>\u05e4\u05e2\u05d5\u05dc\u05d5\u05ea<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"income-body\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"reports\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05d3\u05d5\u05d7\u05d5\u05ea \u05d5\u05d4\u05e9\u05d5\u05d5\u05d0\u05d5\u05ea<\/h2>\r\n <div id=\"monthly-summary\"><\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"expense-chart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"income-chart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"comparison-chart\"><\/canvas>\r\n <\/div>\r\n <div id=\"month-comparison\"><\/div>\r\n <div id=\"improvement-suggestions\"><\/div>\r\n <\/section>\r\n\r\n <section id=\"categories\" class=\"tab-content card\" style=\"display: none;\">\r\n <h2>\u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea<\/h2>\r\n <div id=\"expense-categories\">\r\n <h3>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea<\/h3>\r\n <ul id=\"expense-categories-list\"><\/ul>\r\n <form id=\"add-expense-category-form\">\r\n <input type=\"text\" id=\"new-expense-category\" required placeholder=\"\u05e9\u05dd \u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4\">\r\n <input type=\"color\" id=\"new-expense-category-color\" required>\r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/button>\r\n <\/form>\r\n <\/div>\r\n <div id=\"income-categories\">\r\n <h3>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea<\/h3>\r\n <ul id=\"income-categories-list\"><\/ul>\r\n <form id=\"add-income-category-form\">\r\n <input type=\"text\" id=\"new-income-category\" required placeholder=\"\u05e9\u05dd \u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4\">\r\n <input type=\"color\" id=\"new-income-category-color\" required>\r\n <button type=\"submit\">\u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script>\r\n \/\/ \u05de\u05d1\u05e0\u05d9 \u05e0\u05ea\u05d5\u05e0\u05d9\u05dd\r\nlet expenses = JSON.parse(localStorage.getItem('expenses')) || [];\r\nlet incomes = JSON.parse(localStorage.getItem('incomes')) || [];\r\nlet expenseCategories = JSON.parse(localStorage.getItem('expenseCategories')) || [\r\n { name: '\u05de\u05d6\u05d5\u05df', color: '#FF5733' },\r\n { name: '\u05ea\u05d7\u05d1\u05d5\u05e8\u05d4', color: '#33FF57' },\r\n { name: '\u05d1\u05d9\u05d2\u05d5\u05d3', color: '#3357FF' }\r\n];\r\nlet incomeCategories = JSON.parse(localStorage.getItem('incomeCategories')) || [\r\n { name: '\u05de\u05e9\u05db\u05d5\u05e8\u05ea', color: '#FFFF33' },\r\n { name: '\u05de\u05ea\u05e0\u05d5\u05ea', color: '#FF33FF' }\r\n];\r\n\r\n\/\/ \u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u05d1\u05d3\u05e3\r\nconst expenseForm = document.getElementById('expense-form');\r\nconst incomeForm = document.getElementById('income-form');\r\nconst expensesBody = document.getElementById('expenses-body');\r\nconst incomeBody = document.getElementById('income-body');\r\nconst expenseCategorySelect = document.getElementById('expense-category');\r\nconst incomeCategorySelect = document.getElementById('income-category');\r\nconst addExpenseCategoryForm = document.getElementById('add-expense-category-form');\r\nconst addIncomeCategoryForm = document.getElementById('add-income-category-form');\r\nconst navLinks = document.querySelectorAll('nav a');\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05e2\u05d6\u05e8\r\nfunction saveToLocalStorage() {\r\n localStorage.setItem('expenses', JSON.stringify(expenses));\r\n localStorage.setItem('incomes', JSON.stringify(incomes));\r\n localStorage.setItem('expenseCategories', JSON.stringify(expenseCategories));\r\n localStorage.setItem('incomeCategories', JSON.stringify(incomeCategories));\r\n}\r\n\r\nfunction populateCategorySelects() {\r\n expenseCategorySelect.innerHTML = expenseCategories.map(cat => `<option value=\"${cat.name}\">${cat.name}<\/option>`).join('');\r\n incomeCategorySelect.innerHTML = incomeCategories.map(cat => `<option value=\"${cat.name}\">${cat.name}<\/option>`).join('');\r\n}\r\n\r\nfunction getCategoryColor(categoryName, type) {\r\n const categories = type === 'expense' ? expenseCategories : incomeCategories;\r\n return categories.find(cat => cat.name === categoryName)?.color || '#000000';\r\n}\r\n\r\n\/\/ \u05d0\u05d9\u05e8\u05d5\u05e2\u05d9\u05dd\r\nexpenseForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const amount = document.getElementById('expense-amount').value;\r\n const category = document.getElementById('expense-category').value;\r\n const date = document.getElementById('expense-date').value;\r\n const description = document.getElementById('expense-description').value;\r\n \r\n expenses.push({ amount, category, date, description });\r\n saveToLocalStorage();\r\n renderExpenses();\r\n updateReports();\r\n expenseForm.reset();\r\n});\r\n\r\nincomeForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const amount = document.getElementById('income-amount').value;\r\n const category = document.getElementById('income-category').value;\r\n const date = document.getElementById('income-date').value;\r\n const description = document.getElementById('income-description').value;\r\n \r\n incomes.push({ amount, category, date, description });\r\n saveToLocalStorage();\r\n renderIncomes();\r\n updateReports();\r\n incomeForm.reset();\r\n});\r\n\r\naddExpenseCategoryForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById('new-expense-category').value;\r\n const color = document.getElementById('new-expense-category-color').value;\r\n expenseCategories.push({ name, color });\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n addExpenseCategoryForm.reset();\r\n});\r\n\r\naddIncomeCategoryForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const name = document.getElementById('new-income-category').value;\r\n const color = document.getElementById('new-income-category-color').value;\r\n incomeCategories.push({ name, color });\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n addIncomeCategoryForm.reset();\r\n});\r\n\r\nnavLinks.forEach(link => {\r\n link.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n document.querySelector('nav a.active').classList.remove('active');\r\n this.classList.add('active');\r\n document.querySelectorAll('.tab-content').forEach(tab => tab.style.display = 'none');\r\n document.querySelector(this.getAttribute('href')).style.display = 'block';\r\n if (this.getAttribute('href') === '#reports') {\r\n updateReports();\r\n }\r\n });\r\n});\r\n\r\n\/\/ \u05e8\u05d9\u05e0\u05d3\u05d5\u05e8 \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea\r\nfunction renderExpenses() {\r\n expensesBody.innerHTML = expenses.map((expense, index) => `\r\n <tr style=\"color: ${getCategoryColor(expense.category, 'expense')}\">\r\n <td>${expense.date}<\/td>\r\n <td>${expense.category}<\/td>\r\n <td>\u20aa${parseFloat(expense.amount).toFixed(2)}<\/td>\r\n <td>${expense.description}<\/td>\r\n <td>\r\n <button onclick=\"editItem('expense', ${index})\">\u05e2\u05e8\u05d5\u05da<\/button>\r\n <button onclick=\"deleteItem('expense', ${index})\">\u05de\u05d7\u05e7<\/button>\r\n <\/td>\r\n <\/tr>\r\n `).join('');\r\n}\r\n\r\nfunction renderIncomes() {\r\n incomeBody.innerHTML = incomes.map((income, index) => `\r\n <tr style=\"color: ${getCategoryColor(income.category, 'income')}\">\r\n <td>${income.date}<\/td>\r\n <td>${income.category}<\/td>\r\n <td>\u20aa${parseFloat(income.amount).toFixed(2)}<\/td>\r\n <td>${income.description}<\/td>\r\n <td>\r\n <button onclick=\"editItem('income', ${index})\">\u05e2\u05e8\u05d5\u05da<\/button>\r\n <button onclick=\"deleteItem('income', ${index})\">\u05de\u05d7\u05e7<\/button>\r\n <\/td>\r\n <\/tr>\r\n `).join('');\r\n}\r\n\r\nfunction renderCategoryLists() {\r\n document.getElementById('expense-categories-list').innerHTML = expenseCategories.map(cat => `\r\n <li>\r\n <span style=\"color: ${cat.color}\">${cat.name}<\/span>\r\n <button onclick=\"deleteCategory('expense', '${cat.name}')\">\u05de\u05d7\u05e7<\/button>\r\n <\/li>\r\n `).join('');\r\n\r\n document.getElementById('income-categories-list').innerHTML = incomeCategories.map(cat => `\r\n <li>\r\n <span style=\"color: ${cat.color}\">${cat.name}<\/span>\r\n <button onclick=\"deleteCategory('income', '${cat.name}')\">\u05de\u05d7\u05e7<\/button>\r\n <\/li>\r\n `).join('');\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05e2\u05e8\u05d9\u05db\u05d4 \u05d5\u05de\u05d7\u05d9\u05e7\u05d4\r\nfunction editItem(type, index) {\r\n const items = type === 'expense' ? expenses : incomes;\r\n const item = items[index];\r\n const form = type === 'expense' ? expenseForm : incomeForm;\r\n\r\n form.querySelector('[name=\"amount\"]').value = item.amount;\r\n form.querySelector('[name=\"category\"]').value = item.category;\r\n form.querySelector('[name=\"date\"]').value = item.date;\r\n form.querySelector('[name=\"description\"]').value = item.description;\r\n\r\n items.splice(index, 1);\r\n saveToLocalStorage();\r\n type === 'expense' ? renderExpenses() : renderIncomes();\r\n updateReports();\r\n}\r\n\r\nfunction deleteItem(type, index) {\r\n const items = type === 'expense' ? expenses : incomes;\r\n items.splice(index, 1);\r\n saveToLocalStorage();\r\n type === 'expense' ? renderExpenses() : renderIncomes();\r\n updateReports();\r\n}\r\n\r\nfunction deleteCategory(type, categoryName) {\r\n const categories = type === 'expense' ? expenseCategories : incomeCategories;\r\n const index = categories.findIndex(cat => cat.name === categoryName);\r\n if (index !== -1) {\r\n categories.splice(index, 1);\r\n saveToLocalStorage();\r\n populateCategorySelects();\r\n renderCategoryLists();\r\n }\r\n}\r\n\r\n\/\/ \u05e4\u05d5\u05e0\u05e7\u05e6\u05d9\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea\r\nfunction updateReports() {\r\n updateMonthlySummary();\r\n updateCategoryCharts();\r\n updateComparisonChart();\r\n updateMonthComparison();\r\n updateImprovementSuggestions();\r\n}\r\n\r\nfunction updateMonthlySummary() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n\r\n const monthlyExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const monthlyIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n const balance = monthlyIncomes - monthlyExpenses;\r\n\r\n document.getElementById('monthly-summary').innerHTML = `\r\n <h3>\u05e1\u05d9\u05db\u05d5\u05dd \u05d7\u05d5\u05d3\u05e9\u05d9<\/h3>\r\n <p>\u05d4\u05db\u05e0\u05e1\u05d5\u05ea: \u20aa${monthlyIncomes.toFixed(2)}<\/p>\r\n <p>\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea: \u20aa${monthlyExpenses.toFixed(2)}<\/p>\r\n <p>\u05de\u05d0\u05d6\u05df: \u20aa${balance.toFixed(2)}<\/p>\r\n `;\r\n}\r\n\r\nfunction updateCategoryCharts() {\r\n const expenseData = aggregateByCategory(expenses);\r\n const incomeData = aggregateByCategory(incomes);\r\n\r\n createPieChart('expense-chart', '\u05d4\u05ea\u05e4\u05dc\u05d2\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05dc\u05e4\u05d9 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4', expenseData, 'expense');\r\n createPieChart('income-chart', '\u05d4\u05ea\u05e4\u05dc\u05d2\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05dc\u05e4\u05d9 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4', incomeData, 'income');\r\n}\r\n\r\nfunction aggregateByCategory(items) {\r\n const aggregated = {};\r\n items.forEach(item => {\r\n if (aggregated[item.category]) {\r\n aggregated[item.category] += parseFloat(item.amount);\r\n } else {\r\n aggregated[item.category] = parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(aggregated).map(([category, amount]) => ({ category, amount }));\r\n}\r\n\r\nfunction createPieChart(canvasId, title, data, type) {\r\n const ctx = document.getElementById(canvasId).getContext('2d');\r\n new Chart(ctx, {\r\n type: 'pie',\r\n data: {\r\n labels: data.map(item => item.category),\r\n datasets: [{\r\n data: data.map(item => item.amount),\r\n backgroundColor: data.map(item => getCategoryColor(item.category, type))\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'right',\r\n },\r\n title: {\r\n display: true,\r\n text: title,\r\n font: {\r\n size: 18\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction updateComparisonChart() {\r\n const monthlyExpenses = aggregateByMonth(expenses);\r\n const monthlyIncomes = aggregateByMonth(incomes);\r\n\r\n const ctx = document.getElementById('comparison-chart').getContext('2d');\r\n new Chart(ctx, {\r\n type: 'bar',\r\n data: {\r\n labels: monthlyExpenses.map(item => item.month),\r\n datasets: [\r\n {\r\n label: '\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea',\r\n data: monthlyExpenses.map(item => item.amount),\r\n backgroundColor: 'rgba(255, 99, 132, 0.5)'\r\n },\r\n {\r\n label: '\u05d4\u05db\u05e0\u05e1\u05d5\u05ea',\r\n data: monthlyIncomes.map(item => item.amount),\r\n backgroundColor: 'rgba(75, 192, 192, 0.5)'\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n title: {\r\n display: true,\r\n text: '\u05d4\u05e9\u05d5\u05d5\u05d0\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d5\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d7\u05d5\u05d3\u05e9\u05d9\u05ea',\r\n font: {\r\n size: 18\r\n }\r\n }\r\n },\r\n scales: {\r\n x: {\r\n stacked: false,\r\n },\r\n y: {\r\n stacked: false\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction aggregateByMonth(items) {\r\n const aggregated = {};\r\n items.forEach(item => {\r\n const date = new Date(item.date);\r\n const monthYear = `${date.getMonth() + 1}\/${date.getFullYear()}`;\r\n if (aggregated[monthYear]) {\r\n aggregated[monthYear] += parseFloat(item.amount);\r\n } else {\r\n aggregated[monthYear] = parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(aggregated).map(([month, amount]) => ({ month, amount }));\r\n}\r\n\r\nfunction updateMonthComparison() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;\r\n const lastMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;\r\n\r\n const currentMonthExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const lastMonthExpenses = sumItemsForMonth(expenses, lastMonth, lastMonthYear);\r\n const currentMonthIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n const lastMonthIncomes = sumItemsForMonth(incomes, lastMonth, lastMonthYear);\r\n\r\n const expenseDifference = currentMonthExpenses - lastMonthExpenses;\r\n const incomeDifference = currentMonthIncomes - lastMonthIncomes;\r\n\r\n document.getElementById('month-comparison').innerHTML = `\r\n <h3>\u05d4\u05e9\u05d5\u05d5\u05d0\u05d4 \u05dc\u05d7\u05d5\u05d3\u05e9 \u05e7\u05d5\u05d3\u05dd<\/h3>\r\n <p>\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea: ${expenseDifference > 0 ? '\u05e2\u05dc\u05d9\u05d9\u05d4' : '\u05d9\u05e8\u05d9\u05d3\u05d4'} \u05e9\u05dc \u20aa${Math.abs(expenseDifference).toFixed(2)}<\/p>\r\n <p>\u05d4\u05db\u05e0\u05e1\u05d5\u05ea: ${incomeDifference > 0 ? '\u05e2\u05dc\u05d9\u05d9\u05d4' : '\u05d9\u05e8\u05d9\u05d3\u05d4'} \u05e9\u05dc \u20aa${Math.abs(incomeDifference).toFixed(2)}<\/p>\r\n `;\r\n}\r\n\r\nfunction sumItemsForMonth(items, month, year) {\r\n return items.filter(item => {\r\n const date = new Date(item.date);\r\n return date.getMonth() === month && date.getFullYear() === year;\r\n }).reduce((sum, item) => sum + parseFloat(item.amount), 0);\r\n}\r\n\r\nfunction updateImprovementSuggestions() {\r\n const currentDate = new Date();\r\n const currentMonth = currentDate.getMonth();\r\n const currentYear = currentDate.getFullYear();\r\n\r\n const monthlyExpenses = sumItemsForMonth(expenses, currentMonth, currentYear);\r\n const monthlyIncomes = sumItemsForMonth(incomes, currentMonth, currentYear);\r\n\r\n let suggestions = [];\r\n\r\n if (monthlyExpenses > monthlyIncomes) {\r\n suggestions.push('\u05d4\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05e9\u05dc\u05da \u05d2\u05d1\u05d5\u05d4\u05d5\u05ea \u05de\u05d4\u05d4\u05db\u05e0\u05e1\u05d5\u05ea. \u05e0\u05e1\u05d4 \u05dc\u05e6\u05de\u05e6\u05dd \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d0\u05d5 \u05dc\u05d4\u05d2\u05d3\u05d9\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea.');\r\n }\r\n\r\n const topExpenseCategories = getTopCategories(expenses, currentMonth, currentYear, 3);\r\n suggestions.push(`\u05d4\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e2\u05dd \u05d4\u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05d2\u05d1\u05d5\u05d4\u05d5\u05ea \u05d1\u05d9\u05d5\u05ea\u05e8: ${topExpenseCategories.join(', ')}. \u05e9\u05e7\u05d5\u05dc \u05dc\u05e6\u05de\u05e6\u05dd \u05d1\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d0\u05dc\u05d5.`);\r\n\r\n if (monthlyIncomes > 0 && (monthlyExpenses \/ monthlyIncomes) > 0.7) {\r\n suggestions.push('\u05d0\u05ea\u05d4 \u05de\u05d5\u05e6\u05d9\u05d0 \u05d9\u05d5\u05ea\u05e8 \u05de-70% \u05de\u05d4\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05e9\u05dc\u05da. \u05e0\u05e1\u05d4 \u05dc\u05d7\u05e1\u05d5\u05da \u05d9\u05d5\u05ea\u05e8.');\r\n }\r\n\r\n document.getElementById('improvement-suggestions').innerHTML = `\r\n <h3>\u05d4\u05e6\u05e2\u05d5\u05ea \u05dc\u05e9\u05d9\u05e4\u05d5\u05e8<\/h3>\r\n <ul>\r\n ${suggestions.map(suggestion => `<li>${suggestion}<\/li>`).join('')}\r\n <\/ul>\r\n `;\r\n}\r\n\r\nfunction getTopCategories(items, month, year, count) {\r\n const categorySums = {};\r\n items.forEach(item => {\r\n const date = new Date(item.date);\r\n if (date.getMonth() === month && date.getFullYear() === year) {\r\n categorySums[item.category] = (categorySums[item.category] || 0) + parseFloat(item.amount);\r\n }\r\n });\r\n return Object.entries(categorySums)\r\n .sort((a, b) => b[1] - a[1])\r\n .slice(0, count)\r\n .map(item => item[0]);\r\n}\r\n\r\n\/\/ \u05d0\u05ea\u05d7\u05d5\u05dc\r\npopulateCategorySelects();\r\nrenderExpenses();\r\nrenderIncomes();\r\nrenderCategoryLists();\r\nupdateReports();\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>\u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9 \u05de\u05e2\u05e7\u05d1 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d5\u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d0\u05d9\u05e9\u05d9 \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05e1\u05db\u05d5\u05dd: \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4: \u05ea\u05d0\u05e8\u05d9\u05da: \u05ea\u05d9\u05d0\u05d5\u05e8: \u05d4\u05d5\u05e1\u05e3 \u05d4\u05d5\u05e6\u05d0\u05d4 \u05ea\u05d0\u05e8\u05d9\u05da \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e1\u05db\u05d5\u05dd \u05ea\u05d9\u05d0\u05d5\u05e8 \u05e4\u05e2\u05d5\u05dc\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05e1\u05db\u05d5\u05dd: \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4: \u05ea\u05d0\u05e8\u05d9\u05da: \u05ea\u05d9\u05d0\u05d5\u05e8: \u05d4\u05d5\u05e1\u05e3 \u05d4\u05db\u05e0\u05e1\u05d4 \u05ea\u05d0\u05e8\u05d9\u05da \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e1\u05db\u05d5\u05dd \u05ea\u05d9\u05d0\u05d5\u05e8 \u05e4\u05e2\u05d5\u05dc\u05d5\u05ea \u05d3\u05d5\u05d7\u05d5\u05ea \u05d5\u05d4\u05e9\u05d5\u05d5\u05d0\u05d5\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05d5\u05e6\u05d0\u05d5\u05ea \u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05d4\u05db\u05e0\u05e1\u05d5\u05ea \u05d4\u05d5\u05e1\u05e3 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","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":"","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-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-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-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-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-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-gradient":""}},"footnotes":""},"class_list":["post-6932","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6932"}],"version-history":[{"count":13,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932\/revisions"}],"predecessor-version":[{"id":6948,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/6932\/revisions\/6948"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}