From f220a034b1a758b0bae81a52517e98466938680c Mon Sep 17 00:00:00 2001 From: Ross Miller Date: Mon, 2 Mar 2026 17:00:53 +0000 Subject: [PATCH] WIP --- BudgetApp/Components/Layout/NavMenu.razor | 6 + BudgetApp/Components/Layout/NavMenu.razor.css | 4 + BudgetApp/Components/Pages/Accounts.razor | 3 +- BudgetApp/Components/Pages/Categories.razor | 3 +- BudgetApp/Components/Pages/Help.razor | 3 +- BudgetApp/Components/Pages/Home.razor | 3 +- BudgetApp/Components/Pages/Reports.razor | 372 ++++++++++++++++++ BudgetApp/Components/Pages/Settings.razor | 3 +- BudgetApp/Components/Pages/Transactions.razor | 3 +- BudgetApp/Services/CategoryService.cs | 5 +- BudgetApp/budgetapp.db-shm | Bin 32768 -> 32768 bytes BudgetApp/budgetapp.db-wal | Bin 1569752 -> 1759272 bytes BudgetApp/wwwroot/js/chart-interop.js | 106 +++++ 13 files changed, 504 insertions(+), 7 deletions(-) create mode 100644 BudgetApp/Components/Pages/Reports.razor 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 7dd160e14d0a9fa1bb0c12f2442099815ae1c2f6..0b469ad28c21468773c07f8b95ddc5f01bb556de 100644 GIT binary patch delta 372 zcmb7-JugFX6vprGw!JBCn!AuL47FG!oyF2YNPGc{XiP?gst$T@74_DtQ}s^0t1hHl zi8KbY!77oC;v10AKa16qoRjms~VxRMqb{+jc$jciaa9s!!dK7W!BhWpJSy) dJW?4+`xaOsOP&KxI90mc?CoWeC|imJ_y!l2a;^XX delta 252 zcmZo@U}|V!s+V}A%K!pQK+MR%AW#b=l!0vd8!U$xyi@3D*17yr#oO~d@W3nOpqRFokxPStu7$@&b0-4jq VI(b({ACS=}%I3~k%2)x>2LSP2QsDpq diff --git a/BudgetApp/budgetapp.db-wal b/BudgetApp/budgetapp.db-wal index 2943f342674a6abcf56785bf56e6b856e8fe041a..3270f371257f111f97ea748b80718a7fbc5c5463 100644 GIT binary patch delta 13311 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 delta 55 zcmZ3nA^XPj_=Xn77N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LgXw L7O^ejH$DRZFK!b} 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); + } + } + } + } + } + }); } };