diff --git a/BudgetApp/Components/Layout/NavMenu.razor b/BudgetApp/Components/Layout/NavMenu.razor index 7a17eb9..a205ebf 100644 --- a/BudgetApp/Components/Layout/NavMenu.razor +++ b/BudgetApp/Components/Layout/NavMenu.razor @@ -39,6 +39,12 @@ +
+ + Reports + +
+
Settings diff --git a/BudgetApp/Components/Layout/NavMenu.razor.css b/BudgetApp/Components/Layout/NavMenu.razor.css index de2e01f..e11e1c7 100644 --- a/BudgetApp/Components/Layout/NavMenu.razor.css +++ b/BudgetApp/Components/Layout/NavMenu.razor.css @@ -54,6 +54,10 @@ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-tag-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E"); } +.bi-bar-chart-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bar-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E"); +} + .bi-gear-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); } diff --git a/BudgetApp/Components/Pages/Accounts.razor b/BudgetApp/Components/Pages/Accounts.razor index 8113f7c..05d37c1 100644 --- a/BudgetApp/Components/Pages/Accounts.razor +++ b/BudgetApp/Components/Pages/Accounts.razor @@ -7,7 +7,8 @@ Accounts -

Accounts

+

Accounts

+

Manage your financial accounts, balances and currencies.

diff --git a/BudgetApp/Components/Pages/Categories.razor b/BudgetApp/Components/Pages/Categories.razor index c18c1e1..b082215 100644 --- a/BudgetApp/Components/Pages/Categories.razor +++ b/BudgetApp/Components/Pages/Categories.razor @@ -6,7 +6,8 @@ Categories -

Categories

+

Categories

+

Create and organise categories to classify your transactions.

diff --git a/BudgetApp/Components/Pages/Help.razor b/BudgetApp/Components/Pages/Help.razor index 1be8e61..4dfd669 100644 --- a/BudgetApp/Components/Pages/Help.razor +++ b/BudgetApp/Components/Pages/Help.razor @@ -3,7 +3,8 @@ Help -

Help

+

Help

+

Guides and tips to help you get the most out of Budgeteer.

diff --git a/BudgetApp/Components/Pages/Home.razor b/BudgetApp/Components/Pages/Home.razor index cf9f92e..cfb5f75 100644 --- a/BudgetApp/Components/Pages/Home.razor +++ b/BudgetApp/Components/Pages/Home.razor @@ -9,7 +9,8 @@ Dashboard -

Dashboard

+

Dashboard

+

An overview of your balances, recent and upcoming transactions.

@if (data is null) { diff --git a/BudgetApp/Components/Pages/Reports.razor b/BudgetApp/Components/Pages/Reports.razor new file mode 100644 index 0000000..33b9ac8 --- /dev/null +++ b/BudgetApp/Components/Pages/Reports.razor @@ -0,0 +1,372 @@ +@page "/reports" +@attribute [Authorize] +@inject TransactionService TransactionService +@inject AccountService AccountService +@inject CategoryService CategoryService +@inject AuthenticationStateProvider AuthStateProvider +@inject IJSRuntime JS +@implements IAsyncDisposable +@rendermode InteractiveServer + +Reports + +

Reports

+

Visual breakdown of your spending and income by category for a specified time period.

+ +@if (loading) +{ +

Loading...

+} +else if (accounts.Count == 0) +{ +
+
No data yet
+

Add some accounts and transactions to see your spending reports.

+
+} +else +{ + @* ── Date Range & Account Filters ── *@ +
+
+
Filters
+
+
+ + + + +
+ + to + +
+
+
+
+ @foreach (var account in accounts) + { + + } +
+
+
+ + @* ── Expense by Category (Doughnut) ── *@ +
+
+
+
Expenses by Category
+
+ @if (categoryBreakdown.Count == 0) + { +

No expenses in this period.

+ } + else + { +
+ +
+ } +
+
+
+ + @* ── Income by Category (Doughnut) ── *@ +
+
+
Income by Category
+
+ @if (incomeBreakdown.Count == 0) + { +

No income in this period.

+ } + else + { +
+ +
+ } +
+
+
+
+ + @* ── Monthly Income vs Expenses (Bar) ── *@ +
+
Monthly Income vs Expenses
+
+ @if (monthlyLabels.Count == 0) + { +

No transactions in this period.

+ } + else + { +
+ +
+ } +
+
+ + @* ── Category Breakdown Table ── *@ +
+
Category Summary
+
+ @if (categoryBreakdown.Count == 0 && incomeBreakdown.Count == 0) + { +

No transactions in this period.

+ } + else + { +
+ + + + + + + + + + + @foreach (var row in categorySummary) + { + + + + + + + } + + + + + + + @{ var totalNet = categorySummary.Sum(r => r.Net); } + + + +
CategoryIncomeExpensesNet
@row.Icon @row.Name@currencySymbol@row.Income.ToString("N2")@currencySymbol@row.Expense.ToString("N2") + @currencySymbol@row.Net.ToString("N2") +
Total@currencySymbol@categorySummary.Sum(r => r.Income).ToString("N2")@currencySymbol@categorySummary.Sum(r => r.Expense).ToString("N2") + @currencySymbol@totalNet.ToString("N2") +
+
+ } +
+
+} + +@code { + private bool loading = true; + private string? userId; + + private DateTime dateFrom = DateTime.Today; + private DateTime dateTo = DateTime.Today.AddDays(30); + private string? preset = "30d"; + + private List accounts = []; + private HashSet selectedAccountIds = []; + private List categories = []; + private string currencySymbol = "£"; + + private List categoryBreakdown = []; + private List incomeBreakdown = []; + private List categorySummary = []; + + private List monthlyLabels = []; + private List monthlyIncome = []; + private List monthlyExpenses = []; + + private static readonly string[] chartColors = + [ + "#4dc9f6", "#f67019", "#f53794", "#537bc4", "#acc236", + "#166a8f", "#00a950", "#58595b", "#8549ba", "#e6194b", + "#3cb44b", "#ffe119", "#4363d8", "#f58231", "#911eb4", + "#42d4f4", "#f032e6", "#bfef45", "#fabed4", "#469990" + ]; + + protected override async Task OnInitializedAsync() + { + var authState = await AuthStateProvider.GetAuthenticationStateAsync(); + userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value; + if (userId is null) return; + + accounts = await AccountService.GetAccountsAsync(userId); + categories = await CategoryService.GetCategoriesAsync(userId); + selectedAccountIds = accounts.Select(a => a.Id).ToHashSet(); + currencySymbol = accounts.FirstOrDefault()?.GetSymbol() ?? "£"; + + await LoadReport(); + loading = false; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (!firstRender || loading) return; + await RenderCharts(); + } + + private async Task LoadReport() + { + if (userId is null) return; + + var transactions = await TransactionService.GetTransactionsInRangeAsync(userId, dateFrom, dateTo); + + var filtered = transactions + .Where(t => selectedAccountIds.Contains(t.AccountId)) + .ToList(); + + categoryBreakdown = filtered + .Where(t => t.Type == TransactionType.Expense) + .GroupBy(t => t.CategoryId) + .Select(g => + { + var cat = categories.FirstOrDefault(c => c.Id == g.Key); + return new CategoryAmount + { + Name = cat?.Name ?? "Uncategorised", + Icon = cat?.Icon ?? "", + Total = g.Sum(t => t.Amount) + }; + }) + .OrderByDescending(c => c.Total) + .ToList(); + + incomeBreakdown = filtered + .Where(t => t.Type == TransactionType.Income) + .GroupBy(t => t.CategoryId) + .Select(g => + { + var cat = categories.FirstOrDefault(c => c.Id == g.Key); + return new CategoryAmount + { + Name = cat?.Name ?? "Uncategorised", + Icon = cat?.Icon ?? "", + Total = g.Sum(t => t.Amount) + }; + }) + .OrderByDescending(c => c.Total) + .ToList(); + + var allCategoryKeys = filtered + .Select(t => t.CategoryId) + .Distinct() + .ToList(); + + categorySummary = allCategoryKeys.Select(key => + { + var cat = categories.FirstOrDefault(c => c.Id == key); + var income = filtered.Where(t => t.CategoryId == key && t.Type == TransactionType.Income).Sum(t => t.Amount); + var expense = filtered.Where(t => t.CategoryId == key && t.Type == TransactionType.Expense).Sum(t => t.Amount); + return new CategorySummaryRow + { + Name = cat?.Name ?? "Uncategorised", + Icon = cat?.Icon ?? "", + Income = income, + Expense = expense + }; + }) + .OrderByDescending(r => r.Expense) + .ToList(); + + // Monthly data + var monthly = filtered + .GroupBy(t => new { t.Date.Year, t.Date.Month }) + .OrderBy(g => g.Key.Year).ThenBy(g => g.Key.Month) + .ToList(); + + monthlyLabels = monthly.Select(g => $"{g.Key.Year}-{g.Key.Month:D2}").ToList(); + monthlyIncome = monthly.Select(g => g.Where(t => t.Type == TransactionType.Income).Sum(t => t.Amount)).ToList(); + monthlyExpenses = monthly.Select(g => g.Where(t => t.Type == TransactionType.Expense).Sum(t => t.Amount)).ToList(); + } + + private async Task RenderCharts() + { + if (categoryBreakdown.Count > 0) + { + var labels = categoryBreakdown.Select(c => $"{c.Icon} {c.Name}".Trim()).ToArray(); + var data = categoryBreakdown.Select(c => c.Total).ToArray(); + var colors = Enumerable.Range(0, categoryBreakdown.Count).Select(i => chartColors[i % chartColors.Length]).ToArray(); + await JS.InvokeVoidAsync("chartInterop.createOrUpdatePieChart", "expensePieChart", labels, data, colors, currencySymbol, "doughnut"); + } + + if (incomeBreakdown.Count > 0) + { + var labels = incomeBreakdown.Select(c => $"{c.Icon} {c.Name}".Trim()).ToArray(); + var data = incomeBreakdown.Select(c => c.Total).ToArray(); + var colors = Enumerable.Range(0, incomeBreakdown.Count).Select(i => chartColors[i % chartColors.Length]).ToArray(); + await JS.InvokeVoidAsync("chartInterop.createOrUpdatePieChart", "incomePieChart", labels, data, colors, currencySymbol, "doughnut"); + } + + if (monthlyLabels.Count > 0) + { + await JS.InvokeVoidAsync("chartInterop.createOrUpdateBarChart", "monthlyBarChart", monthlyLabels.ToArray(), monthlyIncome.ToArray(), monthlyExpenses.ToArray(), currencySymbol); + } + } + + private async Task SetPreset(int days) + { + preset = days switch { 7 => "7d", 30 => "30d", 90 => "90d", 365 => "1y", _ => null }; + dateFrom = DateTime.Today; + dateTo = DateTime.Today.AddDays(days); + await Refresh(); + } + + private async Task OnDateChanged() + { + preset = null; + await Refresh(); + } + + private async Task ToggleAccount(int accountId) + { + if (!selectedAccountIds.Remove(accountId)) + selectedAccountIds.Add(accountId); + await Refresh(); + } + + private async Task Refresh() + { + await LoadReport(); + StateHasChanged(); + await Task.Yield(); + await RenderCharts(); + } + + public async ValueTask DisposeAsync() + { + try + { + await JS.InvokeVoidAsync("chartInterop.destroyChart", "expensePieChart"); + await JS.InvokeVoidAsync("chartInterop.destroyChart", "incomePieChart"); + await JS.InvokeVoidAsync("chartInterop.destroyChart", "monthlyBarChart"); + } + catch (JSDisconnectedException) { } + } + + private sealed class CategoryAmount + { + public string Name { get; set; } = string.Empty; + public string Icon { get; set; } = string.Empty; + public decimal Total { get; set; } + } + + private sealed class CategorySummaryRow + { + public string Name { get; set; } = string.Empty; + public string Icon { get; set; } = string.Empty; + public decimal Income { get; set; } + public decimal Expense { get; set; } + public decimal Net => Income - Expense; + } +} diff --git a/BudgetApp/Components/Pages/Settings.razor b/BudgetApp/Components/Pages/Settings.razor index 1e7eee9..e67832d 100644 --- a/BudgetApp/Components/Pages/Settings.razor +++ b/BudgetApp/Components/Pages/Settings.razor @@ -12,10 +12,11 @@ Settings -

+

Settings beta

+

Change your password, reset your data or delete your account.

@* ── Change Password ── *@
diff --git a/BudgetApp/Components/Pages/Transactions.razor b/BudgetApp/Components/Pages/Transactions.razor index 8e93b14..b39e15c 100644 --- a/BudgetApp/Components/Pages/Transactions.razor +++ b/BudgetApp/Components/Pages/Transactions.razor @@ -8,7 +8,8 @@ Transactions -

Transactions

+

Transactions

+

Record, edit and manage your income and expenses.

diff --git a/BudgetApp/Services/CategoryService.cs b/BudgetApp/Services/CategoryService.cs index b8992dd..4687073 100644 --- a/BudgetApp/Services/CategoryService.cs +++ b/BudgetApp/Services/CategoryService.cs @@ -23,7 +23,10 @@ public class CategoryService(ApplicationDbContext db) ("Shopping", "🛍️"), ("Education", "📚"), ("Travel", "✈️"), - ("Gifts", "🎁") + ("Gifts", "🎁"), + ("Loan", "🏧"), + ("Credit Card", "💳"), + ("Childcare", "👶") ]; public async Task> GetCategoriesAsync(string userId) diff --git a/BudgetApp/budgetapp.db-shm b/BudgetApp/budgetapp.db-shm index 7dd160e..0b469ad 100644 Binary files a/BudgetApp/budgetapp.db-shm and b/BudgetApp/budgetapp.db-shm differ diff --git a/BudgetApp/budgetapp.db-wal b/BudgetApp/budgetapp.db-wal index 2943f34..3270f37 100644 Binary files a/BudgetApp/budgetapp.db-wal and b/BudgetApp/budgetapp.db-wal differ diff --git a/BudgetApp/wwwroot/js/chart-interop.js b/BudgetApp/wwwroot/js/chart-interop.js index e53ab2d..b733338 100644 --- a/BudgetApp/wwwroot/js/chart-interop.js +++ b/BudgetApp/wwwroot/js/chart-interop.js @@ -164,6 +164,112 @@ window.chartInterop = { delete this.chartInstances[canvasId]; delete this.transactionLabels[canvasId]; } + }, + + createOrUpdatePieChart: function (canvasId, labels, data, colors, currencySymbol, chartType) { + const canvas = document.getElementById(canvasId); + if (!canvas) return; + + if (this.chartInstances[canvasId]) { + this.chartInstances[canvasId].destroy(); + } + + const sym = currencySymbol || '£'; + + this.chartInstances[canvasId] = new Chart(canvas, { + type: chartType || 'doughnut', + data: { + labels: labels, + datasets: [{ + data: data, + backgroundColor: colors, + borderColor: '#fff', + borderWidth: 2 + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'right', + labels: { + padding: 16, + usePointStyle: true, + pointStyle: 'circle' + } + }, + tooltip: { + callbacks: { + label: function (context) { + const value = context.parsed; + const total = context.dataset.data.reduce((a, b) => a + b, 0); + const pct = total > 0 ? ((value / total) * 100).toFixed(1) : 0; + return context.label + ': ' + sym + value.toFixed(2) + ' (' + pct + '%)'; + } + } + } + } + } + }); + }, + + createOrUpdateBarChart: function (canvasId, labels, incomeData, expenseData, currencySymbol) { + const canvas = document.getElementById(canvasId); + if (!canvas) return; + + if (this.chartInstances[canvasId]) { + this.chartInstances[canvasId].destroy(); + } + + const sym = currencySymbol || '£'; + + this.chartInstances[canvasId] = new Chart(canvas, { + type: 'bar', + data: { + labels: labels, + datasets: [ + { + label: 'Income', + data: incomeData, + backgroundColor: 'rgba(40, 167, 69, 0.7)', + borderColor: 'rgba(40, 167, 69, 1)', + borderWidth: 1 + }, + { + label: 'Expenses', + data: expenseData, + backgroundColor: 'rgba(220, 53, 69, 0.7)', + borderColor: 'rgba(220, 53, 69, 1)', + borderWidth: 1 + } + ] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { position: 'top' }, + tooltip: { + callbacks: { + label: function (context) { + return context.dataset.label + ': ' + sym + context.parsed.y.toFixed(2); + } + } + } + }, + scales: { + y: { + beginAtZero: true, + ticks: { + callback: function (value) { + return sym + value.toFixed(0); + } + } + } + } + } + }); } };