Add project files.
This commit is contained in:
rossmill76 committed
1 parent
fd9f318d6a
commit
0ce077ec11
98 files changed
+65707
No files matched your search
@@ -0,0 +1,286 @@
|
||||
@page "/accounts"
|
||||
@attribute [Authorize]
|
||||
@inject AccountService AccountService
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Accounts</PageTitle>
|
||||
|
||||
<h3 class="mb-4">Accounts</h3>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Add Account</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<EditForm Model="formModel" OnValidSubmit="AddAccount" FormName="addAccount">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Account Name</label>
|
||||
<InputText @bind-Value="formModel.Name" class="form-control" placeholder="e.g. Current Account" />
|
||||
<ValidationMessage For="() => formModel.Name" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Current Balance</label>
|
||||
<InputNumber @bind-Value="formModel.CurrentBalance" class="form-control numeric-input" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Currency</label>
|
||||
<InputSelect @bind-Value="formModel.CurrencyCode" class="form-select">
|
||||
@foreach (var kvp in Account.CurrencySymbols)
|
||||
{
|
||||
<option value="@kvp.Key">@kvp.Key (@kvp.Value)</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Colour</label>
|
||||
<InputText @bind-Value="formModel.Color" type="color" class="form-control form-control-color" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<button type="submit" class="btn btn-primary w-100">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (accounts is null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else if (accounts.Count == 0)
|
||||
{
|
||||
<div class="alert alert-info">No accounts yet. Add one above to get started.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="row">
|
||||
@foreach (var account in accounts)
|
||||
{
|
||||
<div class="col-md-4 col-sm-6 mb-3">
|
||||
<div class="card h-100" style="border-left: 4px solid @account.Color;">
|
||||
<div class="card-body">
|
||||
@if (editingAccountId == account.Id)
|
||||
{
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm mb-1">Name</label>
|
||||
<input type="text" class="form-control form-control-sm" @bind="editName" />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm mb-1">Currency</label>
|
||||
<select class="form-select form-select-sm" @bind="editCurrencyCode">
|
||||
@foreach (var kvp in Account.CurrencySymbols)
|
||||
{
|
||||
<option value="@kvp.Key">@kvp.Key (@kvp.Value)</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm mb-1">Colour</label>
|
||||
<input type="color" class="form-control form-control-color form-control-sm" @bind="editColor" />
|
||||
</div>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-success btn-sm" @onclick="() => SaveAccountDetails(account.Id)">Save</button>
|
||||
<button class="btn btn-secondary btn-sm" @onclick="CancelAccountEdit">Cancel</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h5 class="card-title mb-1">@account.Name</h5>
|
||||
<small class="text-muted">@account.CurrencyCode</small>
|
||||
</div>
|
||||
<div class="d-flex gap-1">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick="() => StartAccountEdit(account)">Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => ConfirmDeleteAccount(account)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (editingBalanceAccountId == account.Id)
|
||||
{
|
||||
<div class="mt-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text">@account.GetSymbol()</span>
|
||||
<input type="number" class="form-control numeric-input" step="0.01"
|
||||
@bind="editingBalanceValue" />
|
||||
</div>
|
||||
<div class="d-flex gap-1 mt-2">
|
||||
<button class="btn btn-success btn-sm flex-fill" @onclick="() => SaveBalance(account.Id)">Save</button>
|
||||
<button class="btn btn-outline-secondary btn-sm flex-fill" @onclick="CancelBalanceEdit">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<h4 class="@(account.CurrentBalance >= 0 ? "text-success" : "text-danger") mb-1"
|
||||
style="cursor: pointer;" title="Click to edit balance"
|
||||
@onclick="() => StartBalanceEdit(account)">
|
||||
@account.FormatAmount(account.CurrentBalance)
|
||||
</h4>
|
||||
<small class="text-muted">Click balance to adjust</small>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showDeleteModal && pendingDeleteAccount is not null)
|
||||
{
|
||||
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete Account</h5>
|
||||
<button type="button" class="btn-close" @onclick="CancelDeleteAccount"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete <strong>@pendingDeleteAccount.Name</strong>?</p>
|
||||
<p class="text-danger mb-0">This will permanently remove the account and all its transactions.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @onclick="CancelDeleteAccount">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" @onclick="DeleteAccountConfirmed">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private List<Account>? accounts;
|
||||
private AccountForm formModel = new();
|
||||
private string? userId;
|
||||
|
||||
// Balance editing state
|
||||
private int? editingBalanceAccountId;
|
||||
private decimal editingBalanceValue;
|
||||
|
||||
// Account details editing state
|
||||
private int? editingAccountId;
|
||||
private string editName = string.Empty;
|
||||
private string editColor = "#1b6ec2";
|
||||
private string editCurrencyCode = "GBP";
|
||||
|
||||
// Delete confirmation state
|
||||
private bool showDeleteModal;
|
||||
private Account? pendingDeleteAccount;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
await LoadAccounts();
|
||||
}
|
||||
|
||||
private async Task LoadAccounts()
|
||||
{
|
||||
if (userId is not null)
|
||||
{
|
||||
accounts = await AccountService.GetAccountsAsync(userId);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AddAccount()
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
var account = new Account
|
||||
{
|
||||
Name = formModel.Name,
|
||||
CurrentBalance = formModel.CurrentBalance,
|
||||
Color = formModel.Color,
|
||||
CurrencyCode = formModel.CurrencyCode,
|
||||
UserId = userId
|
||||
};
|
||||
await AccountService.CreateAccountAsync(account);
|
||||
formModel = new AccountForm();
|
||||
await LoadAccounts();
|
||||
}
|
||||
|
||||
private void ConfirmDeleteAccount(Account account)
|
||||
{
|
||||
pendingDeleteAccount = account;
|
||||
showDeleteModal = true;
|
||||
}
|
||||
|
||||
private async Task DeleteAccountConfirmed()
|
||||
{
|
||||
if (userId is null || pendingDeleteAccount is null) return;
|
||||
|
||||
showDeleteModal = false;
|
||||
await AccountService.DeleteAccountAsync(pendingDeleteAccount.Id, userId);
|
||||
pendingDeleteAccount = null;
|
||||
await LoadAccounts();
|
||||
}
|
||||
|
||||
private void CancelDeleteAccount()
|
||||
{
|
||||
showDeleteModal = false;
|
||||
pendingDeleteAccount = null;
|
||||
}
|
||||
|
||||
private void StartBalanceEdit(Account account)
|
||||
{
|
||||
editingBalanceAccountId = account.Id;
|
||||
editingBalanceValue = account.CurrentBalance;
|
||||
}
|
||||
|
||||
private void CancelBalanceEdit()
|
||||
{
|
||||
editingBalanceAccountId = null;
|
||||
}
|
||||
|
||||
private async Task SaveBalance(int accountId)
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
await AccountService.UpdateBalanceAsync(accountId, userId, editingBalanceValue);
|
||||
editingBalanceAccountId = null;
|
||||
await LoadAccounts();
|
||||
}
|
||||
|
||||
private void StartAccountEdit(Account account)
|
||||
{
|
||||
editingAccountId = account.Id;
|
||||
editName = account.Name;
|
||||
editColor = account.Color;
|
||||
editCurrencyCode = account.CurrencyCode;
|
||||
}
|
||||
|
||||
private void CancelAccountEdit()
|
||||
{
|
||||
editingAccountId = null;
|
||||
}
|
||||
|
||||
private async Task SaveAccountDetails(int accountId)
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
await AccountService.UpdateAccountDetailsAsync(accountId, userId, editName, editColor, editCurrencyCode);
|
||||
editingAccountId = null;
|
||||
await LoadAccounts();
|
||||
}
|
||||
|
||||
private sealed class AccountForm
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Account name is required")]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(100)]
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
public decimal CurrentBalance { get; set; }
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(7)]
|
||||
public string Color { get; set; } = "#1b6ec2";
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(3)]
|
||||
public string CurrencyCode { get; set; } = "GBP";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
@page "/categories"
|
||||
@attribute [Authorize]
|
||||
@inject CategoryService CategoryService
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Categories</PageTitle>
|
||||
|
||||
<h3 class="mb-4">Categories</h3>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Add Category</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<EditForm Model="formModel" OnValidSubmit="AddCategory" FormName="addCategory">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Category Name</label>
|
||||
<InputText @bind-Value="formModel.Name" class="form-control" placeholder="e.g. Groceries, Rent, Salary" />
|
||||
<ValidationMessage For="() => formModel.Name" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Icon</label>
|
||||
<button type="button" class="btn btn-outline-secondary w-100" style="font-size: 1.4rem; height: 38px; padding: 0;"
|
||||
@onclick="OpenAddIconPicker">@(string.IsNullOrEmpty(formModel.Icon) ? "📁" : formModel.Icon)</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="submit" class="btn btn-primary w-100">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (categories is null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else if (categories.Count == 0)
|
||||
{
|
||||
<div class="alert alert-info">No categories yet. Add one above to organise your transactions.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
|
||||
@foreach (var category in categories)
|
||||
{
|
||||
<div class="col">
|
||||
<div class="card h-100 text-center">
|
||||
@if (editingCategoryId == category.Id)
|
||||
{
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-outline-secondary" style="font-size: 2rem; width: 52px; height: 52px; padding: 0;"
|
||||
@onclick="OpenEditIconPicker">@(string.IsNullOrEmpty(editIcon) ? "📁" : editIcon)</button>
|
||||
<input type="text" class="form-control form-control-sm mt-2 text-center" @bind="editCategoryName" />
|
||||
<div class="mt-2 d-flex gap-1 justify-content-center">
|
||||
<button class="btn btn-success btn-sm" @onclick="() => SaveCategoryEdit(category.Id)">Save</button>
|
||||
<button class="btn btn-secondary btn-sm" @onclick="CancelCategoryEdit">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card-body">
|
||||
<div style="font-size: 2rem;">@(string.IsNullOrEmpty(category.Icon) ? "📁" : category.Icon)</div>
|
||||
<h6 class="card-title mt-2 mb-0">@category.Name</h6>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 pt-0">
|
||||
<div class="d-flex gap-1 justify-content-center">
|
||||
<button class="btn btn-outline-primary btn-sm" @onclick="() => StartCategoryEdit(category)">Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => DeleteCategory(category.Id)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showIconModal)
|
||||
{
|
||||
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,.5);" @onclick="CloseIconModal">
|
||||
<div class="modal-dialog modal-dialog-centered modal-sm" @onclick:stopPropagation="true">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h6 class="modal-title">Pick an Icon</h6>
|
||||
<button type="button" class="btn-close" @onclick="CloseIconModal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="d-flex flex-wrap gap-1 justify-content-center">
|
||||
@foreach (var emoji in AvailableIcons)
|
||||
{
|
||||
<button type="button" class="btn btn-outline-secondary" style="font-size: 1.4rem; width: 42px; height: 42px; padding: 0;"
|
||||
@onclick="() => SelectIcon(emoji)">@emoji</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private List<Category>? categories;
|
||||
private CategoryForm formModel = new();
|
||||
private string? userId;
|
||||
|
||||
// Edit state
|
||||
private int? editingCategoryId;
|
||||
private string editCategoryName = string.Empty;
|
||||
private string editIcon = string.Empty;
|
||||
|
||||
// Icon modal state
|
||||
private bool showIconModal;
|
||||
private string iconPickerTarget = "add"; // "add" or "edit"
|
||||
|
||||
private static readonly string[] AvailableIcons =
|
||||
[
|
||||
"🛒", "🏠", "💡", "🚗", "🍽️", "🎬", "🏥", "🛡️", "💰", "🏦",
|
||||
"📱", "🛍️", "📚", "✈️", "🎁", "🏋️", "🎮", "🎵", "🐾", "☕",
|
||||
"🍕", "👶", "💼", "🔧", "📦", "💊", "🎨", "🌿", "🏢", "📰",
|
||||
"💳", "🧾", "📋", "🔌", "🚌", "🚀", "🎂", "🧹", "📸", "💎"
|
||||
];
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
await LoadCategories();
|
||||
}
|
||||
|
||||
private async Task LoadCategories()
|
||||
{
|
||||
if (userId is not null)
|
||||
{
|
||||
await CategoryService.EnsureDefaultCategoriesAsync(userId);
|
||||
categories = await CategoryService.GetCategoriesAsync(userId);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AddCategory()
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
var category = new Category
|
||||
{
|
||||
Name = formModel.Name,
|
||||
Icon = formModel.Icon,
|
||||
UserId = userId
|
||||
};
|
||||
await CategoryService.CreateCategoryAsync(category);
|
||||
formModel = new CategoryForm();
|
||||
await LoadCategories();
|
||||
}
|
||||
|
||||
private void StartCategoryEdit(Category category)
|
||||
{
|
||||
editingCategoryId = category.Id;
|
||||
editCategoryName = category.Name;
|
||||
editIcon = category.Icon;
|
||||
}
|
||||
|
||||
private void CancelCategoryEdit()
|
||||
{
|
||||
editingCategoryId = null;
|
||||
}
|
||||
|
||||
private async Task SaveCategoryEdit(int id)
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
await CategoryService.UpdateCategoryAsync(id, userId, editCategoryName, editIcon);
|
||||
editingCategoryId = null;
|
||||
await LoadCategories();
|
||||
}
|
||||
|
||||
private async Task DeleteCategory(int id)
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
await CategoryService.DeleteCategoryAsync(id, userId);
|
||||
await LoadCategories();
|
||||
}
|
||||
|
||||
private void OpenAddIconPicker()
|
||||
{
|
||||
iconPickerTarget = "add";
|
||||
showIconModal = true;
|
||||
}
|
||||
|
||||
private void OpenEditIconPicker()
|
||||
{
|
||||
iconPickerTarget = "edit";
|
||||
showIconModal = true;
|
||||
}
|
||||
|
||||
private void CloseIconModal() => showIconModal = false;
|
||||
|
||||
private void SelectIcon(string emoji)
|
||||
{
|
||||
if (iconPickerTarget == "add")
|
||||
formModel.Icon = emoji;
|
||||
else
|
||||
editIcon = emoji;
|
||||
|
||||
showIconModal = false;
|
||||
}
|
||||
|
||||
private sealed class CategoryForm
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Category name is required")]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(100)]
|
||||
public string Name { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(10)]
|
||||
public string Icon { get; set; } = "📁";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p>
|
||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
|
||||
@code{
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
}
|
||||
@@ -0,0 +1,650 @@
|
||||
@page "/"
|
||||
@attribute [Authorize]
|
||||
@inject DashboardService DashboardService
|
||||
@inject TransactionService TransactionService
|
||||
@inject AccountService AccountService
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@inject IJSRuntime JS
|
||||
@implements IAsyncDisposable
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Dashboard</PageTitle>
|
||||
|
||||
<h3 class="mb-4">Dashboard</h3>
|
||||
|
||||
@if (data is null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else if (data.Accounts.Count == 0)
|
||||
{
|
||||
<div class="alert alert-info">
|
||||
<h5>Welcome!</h5>
|
||||
<p>Get started by <a href="/accounts">adding an account</a> and then <a href="/transactions">recording transactions</a>.</p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="d-flex flex-wrap gap-2 mb-3" style="overflow-x: auto;">
|
||||
@foreach (var account in data.Accounts)
|
||||
{
|
||||
<div class="border rounded px-3 py-2 balance-chip" style="border-left: 3px solid @account.Color !important; min-width: 180px;">
|
||||
<small class="text-muted">@account.Name</small>
|
||||
@if (editingBalanceAccountId == account.Id)
|
||||
{
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<span class="text-muted" style="font-size: 0.85rem;">@account.GetSymbol()</span>
|
||||
<input type="number" class="form-control form-control-sm numeric-input" step="0.01"
|
||||
style="width: 90px;" @bind="editingBalanceValue" />
|
||||
<button class="btn btn-success btn-sm px-1" @onclick="() => SaveBalance(account.Id)" title="Save">✓</button>
|
||||
<button class="btn btn-outline-secondary btn-sm px-1" @onclick="CancelBalanceEdit" title="Cancel">✕</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div style="cursor: pointer;" title="Click to edit balance"
|
||||
@onclick="() => StartBalanceEdit(account)">
|
||||
<span class="fw-semibold @(account.CurrentBalance >= 0 ? "text-success" : "text-danger")">
|
||||
@account.FormatAmount(account.CurrentBalance)
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
|
||||
<small class="text-muted fw-semibold">Window:</small>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn @(windowPreset == "7d" ? "btn-primary" : "btn-outline-secondary")" @onclick="() => SetWindow(7)">7d</button>
|
||||
<button class="btn @(windowPreset == "30d" ? "btn-primary" : "btn-outline-secondary")" @onclick="() => SetWindow(30)">30d</button>
|
||||
<button class="btn @(windowPreset == "90d" ? "btn-primary" : "btn-outline-secondary")" @onclick="() => SetWindow(90)">90d</button>
|
||||
<button class="btn @(windowPreset == "1y" ? "btn-primary" : "btn-outline-secondary")" @onclick="() => SetWindow(365)">1y</button>
|
||||
</div>
|
||||
<input type="date" class="form-control form-control-sm" style="width: auto;"
|
||||
@bind="windowStart" @bind:after="OnWindowDateChanged" />
|
||||
<span class="text-muted">to</span>
|
||||
<input type="date" class="form-control form-control-sm" style="width: auto;"
|
||||
@bind="windowEnd" @bind:after="OnWindowDateChanged" />
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Balance Trend</h5>
|
||||
<div style="height: clamp(200px, 40vw, 350px); position: relative;">
|
||||
<canvas id="balanceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* ── Edit / Add Modal ── *@
|
||||
@if (showModal)
|
||||
{
|
||||
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">@(editingTransactionId is null ? "Add Transaction" : "Edit Transaction")</h5>
|
||||
<button type="button" class="btn-close" @onclick="CloseModal"></button>
|
||||
</div>
|
||||
<EditForm Model="modalForm" OnValidSubmit="SaveModal" FormName="dashboardModal">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<InputText @bind-Value="modalForm.Description" class="form-control" />
|
||||
<ValidationMessage For="() => modalForm.Description" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Amount</label>
|
||||
<InputNumber @bind-Value="modalForm.Amount" class="form-control numeric-input" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Date</label>
|
||||
<InputDate @bind-Value="modalForm.Date" class="form-control" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Type</label>
|
||||
<InputSelect @bind-Value="modalForm.Type" class="form-select">
|
||||
<option value="@TransactionType.Expense">Expense</option>
|
||||
<option value="@TransactionType.Income">Income</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Account</label>
|
||||
<InputSelect @bind-Value="modalForm.AccountId" class="form-select">
|
||||
@foreach (var a in data.Accounts)
|
||||
{
|
||||
<option value="@a.Id">@a.Name</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Category</label>
|
||||
<InputSelect @bind-Value="modalForm.CategoryId" class="form-select">
|
||||
<option value="">— None —</option>
|
||||
@foreach (var c in data.Categories)
|
||||
{
|
||||
<option value="@c.Id">@(string.IsNullOrEmpty(c.Icon) ? "" : c.Icon + " ")@c.Name</option>
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Recurrence</label>
|
||||
<InputSelect @bind-Value="modalForm.RecurrenceType" class="form-select">
|
||||
<option value="@RecurrenceType.None">None</option>
|
||||
<option value="@RecurrenceType.Daily">Daily</option>
|
||||
<option value="@RecurrenceType.Weekly">Weekly</option>
|
||||
<option value="@RecurrenceType.Monthly">Monthly</option>
|
||||
<option value="@RecurrenceType.Yearly">Yearly</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
@if (modalForm.RecurrenceType != RecurrenceType.None)
|
||||
{
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Recurrence End Date <small class="text-muted">(max 1 year, defaults to 1 year if blank)</small></label>
|
||||
<InputDate @bind-Value="modalForm.RecurrenceEndDate" class="form-control" max="@modalForm.Date.AddYears(1).ToString("yyyy-MM-dd")" />
|
||||
<ValidationMessage For="() => modalForm.RecurrenceEndDate" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @onclick="CloseModal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(activeTab == "recent" ? "active" : "")" @onclick='() => activeTab = "recent"'>
|
||||
Recent <span class="badge bg-secondary ms-1">@data.RecentTransactions.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link @(activeTab == "upcoming" ? "active" : "")" @onclick='() => activeTab = "upcoming"'>
|
||||
Upcoming <span class="badge bg-secondary ms-1">@data.UpcomingTransactions.Count</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-sm btn-primary" @onclick="OpenAddModal">+ Add</button>
|
||||
</div>
|
||||
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
|
||||
@if (activeTab == "recent")
|
||||
{
|
||||
@if (data.RecentTransactions.Count == 0)
|
||||
{
|
||||
<p class="p-3 text-muted mb-0">No recent transactions.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach (var t in data.RecentTransactions.Skip((recentPage - 1) * PageSize).Take(PageSize))
|
||||
{
|
||||
<div class="list-group-item list-group-item-action txn-row @(selectedTransactionId == t.Id ? "txn-row-selected" : "")"
|
||||
style="cursor: pointer; border-left: 3px solid @(t.Type == TransactionType.Income ? "#198754" : "#dc3545");"
|
||||
@onclick="() => SelectTransaction(t.Id)">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="me-3" style="min-width: 0;">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<span class="fw-semibold text-truncate">@t.Description</span>
|
||||
@if (t.RecurrenceType != RecurrenceType.None || t.ParentTransactionId is not null)
|
||||
{
|
||||
<span class="badge bg-info bg-opacity-10 text-info" style="font-size: 0.7rem;">🔁 @GetRecurrenceLabel(t)</span>
|
||||
}
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2 mt-1 flex-wrap" style="font-size: 0.8rem;">
|
||||
<span class="text-muted">@t.Date.ToString("MMM dd, yyyy")</span>
|
||||
<span class="badge" style="background-color: @t.Account.Color; font-size: 0.7rem;">@t.Account.Name</span>
|
||||
@if (t.Category is not null)
|
||||
{
|
||||
<span class="text-muted">@(string.IsNullOrEmpty(t.Category.Icon) ? "" : t.Category.Icon + " ")@t.Category.Name</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end text-nowrap" style="flex-shrink: 0;">
|
||||
<div class="@(t.Type == TransactionType.Income ? "text-success" : "text-danger") fw-semibold" style="font-size: 1.05rem;">
|
||||
@(t.Type == TransactionType.Income ? "+" : "−")@t.Account.FormatAmount(t.Amount)
|
||||
</div>
|
||||
<small class="text-muted" style="font-size: 0.7rem;">@(t.Type == TransactionType.Income ? "Income" : "Expense")</small>
|
||||
</div>
|
||||
</div>
|
||||
@if (selectedTransactionId == t.Id)
|
||||
{
|
||||
<div class="mt-2 pt-2 border-top d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditModal(t)" @onclick:stopPropagation="true">✏️ Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => ConfirmDelete(t)" @onclick:stopPropagation="true">🗑️ Delete</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (RecentTotalPages > 1)
|
||||
{
|
||||
<div class="d-flex justify-content-between align-items-center px-3 py-2 border-top">
|
||||
<button class="btn btn-sm btn-outline-secondary" disabled="@(recentPage <= 1 ? true : (bool?)null)" @onclick="() => recentPage--">← Prev</button>
|
||||
<small class="text-muted">Page @recentPage of @RecentTotalPages</small>
|
||||
<button class="btn btn-sm btn-outline-secondary" disabled="@(recentPage >= RecentTotalPages ? true : (bool?)null)" @onclick="() => recentPage++">Next →</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
@if (data.UpcomingTransactions.Count == 0)
|
||||
{
|
||||
<p class="p-3 text-muted mb-0">No upcoming transactions.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="list-group list-group-flush">
|
||||
@foreach (var t in data.UpcomingTransactions.Skip((upcomingPage - 1) * PageSize).Take(PageSize))
|
||||
{
|
||||
<div class="list-group-item list-group-item-action txn-row @(selectedTransactionId == t.Id ? "txn-row-selected" : "")"
|
||||
style="cursor: pointer; border-left: 3px solid @(t.Type == TransactionType.Income ? "#198754" : "#dc3545");"
|
||||
@onclick="() => SelectTransaction(t.Id)">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="me-3" style="min-width: 0;">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<span class="fw-semibold text-truncate">@t.Description</span>
|
||||
@if (t.RecurrenceType != RecurrenceType.None || t.ParentTransactionId is not null)
|
||||
{
|
||||
<span class="badge bg-info bg-opacity-10 text-info" style="font-size: 0.7rem;">🔁 @GetRecurrenceLabel(t)</span>
|
||||
}
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2 mt-1 flex-wrap" style="font-size: 0.8rem;">
|
||||
<span class="text-muted">@t.Date.ToString("MMM dd, yyyy")</span>
|
||||
<span class="badge" style="background-color: @t.Account.Color; font-size: 0.7rem;">@t.Account.Name</span>
|
||||
@if (t.Category is not null)
|
||||
{
|
||||
<span class="text-muted">@(string.IsNullOrEmpty(t.Category.Icon) ? "" : t.Category.Icon + " ")@t.Category.Name</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end text-nowrap" style="flex-shrink: 0;">
|
||||
<div class="@(t.Type == TransactionType.Income ? "text-success" : "text-danger") fw-semibold" style="font-size: 1.05rem;">
|
||||
@(t.Type == TransactionType.Income ? "+" : "−")@t.Account.FormatAmount(t.Amount)
|
||||
</div>
|
||||
@if (projectedBalances.TryGetValue(t.Id, out var projected))
|
||||
{
|
||||
<small class="@(projected >= 0 ? "text-success" : "text-danger")" style="font-size: 0.7rem;">
|
||||
Projected: @t.Account.FormatAmount(projected)
|
||||
</small>
|
||||
}
|
||||
else
|
||||
{
|
||||
<small class="text-muted" style="font-size: 0.7rem;">@(t.Type == TransactionType.Income ? "Income" : "Expense")</small>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (selectedTransactionId == t.Id)
|
||||
{
|
||||
<div class="mt-2 pt-2 border-top d-flex justify-content-end gap-2">
|
||||
<button class="btn btn-outline-secondary btn-sm" @onclick="() => OpenEditModal(t)" @onclick:stopPropagation="true">✏️ Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => ConfirmDelete(t)" @onclick:stopPropagation="true">🗑️ Delete</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@if (UpcomingTotalPages > 1)
|
||||
{
|
||||
<div class="d-flex justify-content-between align-items-center px-3 py-2 border-top">
|
||||
<button class="btn btn-sm btn-outline-secondary" disabled="@(upcomingPage <= 1 ? true : (bool?)null)" @onclick="() => upcomingPage--">← Prev</button>
|
||||
<small class="text-muted">Page @upcomingPage of @UpcomingTotalPages</small>
|
||||
<button class="btn btn-sm btn-outline-secondary" disabled="@(upcomingPage >= UpcomingTotalPages ? true : (bool?)null)" @onclick="() => upcomingPage++">Next →</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showDeleteModal && pendingDeleteTransaction is not null)
|
||||
{
|
||||
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete Recurring Transaction</h5>
|
||||
<button type="button" class="btn-close" @onclick="CancelDelete"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<strong>@pendingDeleteTransaction.Description</strong> is part of a recurring series.
|
||||
</p>
|
||||
<p>Would you like to delete just this transaction, or all future transactions in the series?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @onclick="CancelDelete">Cancel</button>
|
||||
<button type="button" class="btn btn-outline-danger" @onclick="DeleteSingle">This One Only</button>
|
||||
<button type="button" class="btn btn-danger" @onclick="DeleteSeries">All Future in Series</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@code {
|
||||
private DashboardData? data;
|
||||
private string? userId;
|
||||
private int? selectedTransactionId;
|
||||
private string activeTab = "recent";
|
||||
private Dictionary<int, decimal> projectedBalances = new();
|
||||
|
||||
// Modal state
|
||||
private bool showModal;
|
||||
private int? editingTransactionId;
|
||||
private ModalTransactionForm modalForm = new();
|
||||
|
||||
// Chart redraw tracking
|
||||
private int chartDataVersion;
|
||||
private int lastRenderedChartVersion;
|
||||
|
||||
// Time window
|
||||
private DateTime windowStart = DateTime.Today.AddDays(-30);
|
||||
private DateTime windowEnd = DateTime.Today.AddDays(30);
|
||||
private string windowPreset = "30d";
|
||||
|
||||
// Pagination
|
||||
private int recentPage = 1;
|
||||
private int upcomingPage = 1;
|
||||
private const int PageSize = 10;
|
||||
private int RecentTotalPages => data is null ? 0 : (int)Math.Ceiling(data.RecentTransactions.Count / (double)PageSize);
|
||||
private int UpcomingTotalPages => data is null ? 0 : (int)Math.Ceiling(data.UpcomingTransactions.Count / (double)PageSize);
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
|
||||
if (userId is not null)
|
||||
{
|
||||
await RefreshData();
|
||||
}
|
||||
}
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (data?.ChartData.Datasets.Count > 0 && chartDataVersion != lastRenderedChartVersion)
|
||||
{
|
||||
lastRenderedChartVersion = chartDataVersion;
|
||||
|
||||
var datasets = data.ChartData.Datasets.Select(ds => new
|
||||
{
|
||||
label = ds.Label,
|
||||
color = ds.Color,
|
||||
data = ds.Data.Select(d => (double)d).ToArray(),
|
||||
currencySymbol = ds.CurrencySymbol
|
||||
}).ToArray();
|
||||
|
||||
var dayLabels = data.ChartData.DayTransactionLabels
|
||||
.Select(d => d.ToArray()).ToArray();
|
||||
|
||||
int highlightIndex = GetHighlightIndex();
|
||||
|
||||
await JS.InvokeVoidAsync("chartInterop.createOrUpdateChart",
|
||||
"balanceChart",
|
||||
data.ChartData.Labels.ToArray(),
|
||||
datasets,
|
||||
dayLabels,
|
||||
highlightIndex,
|
||||
data.CurrencySymbol);
|
||||
}
|
||||
}
|
||||
|
||||
private int GetHighlightIndex()
|
||||
{
|
||||
if (selectedTransactionId is null || data is null) return -1;
|
||||
|
||||
var txn = data.RecentTransactions.FirstOrDefault(t => t.Id == selectedTransactionId)
|
||||
?? data.UpcomingTransactions.FirstOrDefault(t => t.Id == selectedTransactionId);
|
||||
if (txn is null) return -1;
|
||||
|
||||
var label = txn.Date.ToString("MMM dd");
|
||||
return data.ChartData.Labels.IndexOf(label);
|
||||
}
|
||||
|
||||
private async Task SelectTransaction(int id)
|
||||
{
|
||||
selectedTransactionId = selectedTransactionId == id ? null : id;
|
||||
|
||||
if (data?.ChartData.Datasets.Count > 0)
|
||||
{
|
||||
int highlightIndex = GetHighlightIndex();
|
||||
await JS.InvokeVoidAsync("chartInterop.highlightDate", "balanceChart", highlightIndex);
|
||||
}
|
||||
}
|
||||
|
||||
// Balance editing state
|
||||
private int? editingBalanceAccountId;
|
||||
private decimal editingBalanceValue;
|
||||
|
||||
private void StartBalanceEdit(Account account)
|
||||
{
|
||||
editingBalanceAccountId = account.Id;
|
||||
editingBalanceValue = account.CurrentBalance;
|
||||
}
|
||||
|
||||
private void CancelBalanceEdit()
|
||||
{
|
||||
editingBalanceAccountId = null;
|
||||
}
|
||||
|
||||
private async Task SaveBalance(int accountId)
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
await AccountService.UpdateBalanceAsync(accountId, userId, editingBalanceValue);
|
||||
editingBalanceAccountId = null;
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
private void OpenAddModal()
|
||||
{
|
||||
editingTransactionId = null;
|
||||
modalForm = new ModalTransactionForm
|
||||
{
|
||||
AccountId = data?.Accounts.FirstOrDefault()?.Id ?? 0
|
||||
};
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
private void OpenEditModal(Transaction t)
|
||||
{
|
||||
editingTransactionId = t.Id;
|
||||
modalForm = new ModalTransactionForm
|
||||
{
|
||||
Description = t.Description,
|
||||
Amount = t.Amount,
|
||||
Date = t.Date,
|
||||
Type = t.Type,
|
||||
AccountId = t.AccountId,
|
||||
CategoryId = t.CategoryId,
|
||||
RecurrenceType = t.RecurrenceType,
|
||||
RecurrenceEndDate = t.RecurrenceEndDate
|
||||
};
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
private void CloseModal() => showModal = false;
|
||||
|
||||
private async Task SaveModal()
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
if (editingTransactionId is null)
|
||||
{
|
||||
var transaction = new Transaction
|
||||
{
|
||||
Description = modalForm.Description,
|
||||
Amount = modalForm.Amount,
|
||||
Date = modalForm.Date,
|
||||
Type = modalForm.Type,
|
||||
AccountId = modalForm.AccountId,
|
||||
CategoryId = modalForm.CategoryId,
|
||||
RecurrenceType = modalForm.RecurrenceType,
|
||||
RecurrenceEndDate = modalForm.RecurrenceEndDate
|
||||
};
|
||||
await TransactionService.CreateTransactionAsync(transaction);
|
||||
}
|
||||
else
|
||||
{
|
||||
await TransactionService.UpdateTransactionAsync(
|
||||
editingTransactionId.Value, userId,
|
||||
modalForm.Description, modalForm.Amount, modalForm.Date,
|
||||
modalForm.Type, modalForm.AccountId, modalForm.CategoryId,
|
||||
modalForm.RecurrenceType, modalForm.RecurrenceEndDate);
|
||||
}
|
||||
|
||||
showModal = false;
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
// Delete confirmation state
|
||||
private bool showDeleteModal;
|
||||
private Transaction? pendingDeleteTransaction;
|
||||
|
||||
private void ConfirmDelete(Transaction t)
|
||||
{
|
||||
pendingDeleteTransaction = t;
|
||||
if (t.RecurrenceType != RecurrenceType.None || t.ParentTransactionId is not null)
|
||||
{
|
||||
showDeleteModal = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
_ = DeleteSingle();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task DeleteSingle()
|
||||
{
|
||||
if (userId is null || pendingDeleteTransaction is null) return;
|
||||
showDeleteModal = false;
|
||||
await TransactionService.DeleteTransactionAsync(pendingDeleteTransaction.Id, userId);
|
||||
pendingDeleteTransaction = null;
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
private async Task DeleteSeries()
|
||||
{
|
||||
if (userId is null || pendingDeleteTransaction is null) return;
|
||||
showDeleteModal = false;
|
||||
await TransactionService.DeleteTransactionSeriesAsync(pendingDeleteTransaction.Id, userId);
|
||||
pendingDeleteTransaction = null;
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
private void CancelDelete()
|
||||
{
|
||||
showDeleteModal = false;
|
||||
pendingDeleteTransaction = null;
|
||||
}
|
||||
|
||||
private static string GetRecurrenceLabel(Transaction t)
|
||||
{
|
||||
if (t.RecurrenceType != RecurrenceType.None)
|
||||
return t.RecurrenceType.ToString();
|
||||
return t.ParentTransaction?.RecurrenceType.ToString() ?? "Recurring";
|
||||
}
|
||||
|
||||
private void ComputeProjectedBalances()
|
||||
{
|
||||
projectedBalances.Clear();
|
||||
if (data is null) return;
|
||||
|
||||
var accountBalances = data.Accounts.ToDictionary(a => a.Id, a => a.CurrentBalance);
|
||||
|
||||
foreach (var t in data.UpcomingTransactions)
|
||||
{
|
||||
if (!accountBalances.ContainsKey(t.AccountId)) continue;
|
||||
|
||||
accountBalances[t.AccountId] += t.Type == TransactionType.Income ? t.Amount : -t.Amount;
|
||||
projectedBalances[t.Id] = accountBalances[t.AccountId];
|
||||
}
|
||||
}
|
||||
|
||||
private async Task RefreshData()
|
||||
{
|
||||
if (userId is null) return;
|
||||
data = await DashboardService.GetDashboardDataAsync(userId, windowStart, windowEnd);
|
||||
chartDataVersion++;
|
||||
ComputeProjectedBalances();
|
||||
recentPage = 1;
|
||||
upcomingPage = 1;
|
||||
}
|
||||
|
||||
private async Task SetWindow(int days)
|
||||
{
|
||||
windowPreset = days switch { 7 => "7d", 30 => "30d", 90 => "90d", 365 => "1y", _ => "custom" };
|
||||
windowStart = DateTime.Today.AddDays(-days);
|
||||
windowEnd = DateTime.Today.AddDays(days);
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
private async Task OnWindowDateChanged()
|
||||
{
|
||||
windowPreset = "custom";
|
||||
await RefreshData();
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
await JS.InvokeVoidAsync("chartInterop.destroyChart", "balanceChart");
|
||||
}
|
||||
catch (JSDisconnectedException)
|
||||
{
|
||||
}
|
||||
}
|
||||
|
||||
private sealed class ModalTransactionForm : System.ComponentModel.DataAnnotations.IValidatableObject
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Description is required")]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(200)]
|
||||
public string Description { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Range(0.01, (double)decimal.MaxValue, ErrorMessage = "Amount must be greater than zero")]
|
||||
public decimal Amount { get; set; }
|
||||
|
||||
public DateTime Date { get; set; } = DateTime.Today;
|
||||
|
||||
public TransactionType Type { get; set; } = TransactionType.Expense;
|
||||
|
||||
public int AccountId { get; set; }
|
||||
|
||||
public int? CategoryId { get; set; }
|
||||
|
||||
public RecurrenceType RecurrenceType { get; set; } = RecurrenceType.None;
|
||||
|
||||
public DateTime? RecurrenceEndDate { get; set; }
|
||||
|
||||
public IEnumerable<System.ComponentModel.DataAnnotations.ValidationResult> Validate(System.ComponentModel.DataAnnotations.ValidationContext validationContext)
|
||||
{
|
||||
if (RecurrenceType != RecurrenceType.None && RecurrenceEndDate.HasValue)
|
||||
{
|
||||
var maxEnd = Date.AddYears(1);
|
||||
if (RecurrenceEndDate.Value > maxEnd)
|
||||
{
|
||||
yield return new System.ComponentModel.DataAnnotations.ValidationResult(
|
||||
"Recurrence end date cannot be more than 1 year from the transaction date.",
|
||||
[nameof(RecurrenceEndDate)]);
|
||||
}
|
||||
if (RecurrenceEndDate.Value <= Date)
|
||||
{
|
||||
yield return new System.ComponentModel.DataAnnotations.ValidationResult(
|
||||
"Recurrence end date must be after the transaction date.",
|
||||
[nameof(RecurrenceEndDate)]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
@page "/login"
|
||||
@layout AuthLayout
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@inject SignInManager<ApplicationUser> SignInManager
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>Budgeteer — Sign In</PageTitle>
|
||||
|
||||
<h3 class="text-center mb-4">Sign In</h3>
|
||||
|
||||
<EditForm Model="Model" OnValidSubmit="HandleLogin" FormName="login">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
@if (!string.IsNullOrEmpty(errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger">@errorMessage</div>
|
||||
}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<InputText @bind-Value="Model.Email" class="form-control" placeholder="you@example.com" />
|
||||
<ValidationMessage For="() => Model.Email" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<InputText @bind-Value="Model.Password" type="password" class="form-control" />
|
||||
<ValidationMessage For="() => Model.Password" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100">Sign In</button>
|
||||
</EditForm>
|
||||
|
||||
<p class="text-center mt-3">
|
||||
Don't have an account? <a href="/register">Register</a>
|
||||
</p>
|
||||
|
||||
@code {
|
||||
[SupplyParameterFromForm]
|
||||
private LoginModel Model { get; set; } = new();
|
||||
|
||||
private string? errorMessage;
|
||||
|
||||
private async Task HandleLogin()
|
||||
{
|
||||
errorMessage = null;
|
||||
|
||||
var result = await SignInManager.PasswordSignInAsync(
|
||||
Model.Email, Model.Password, isPersistent: false, lockoutOnFailure: false);
|
||||
|
||||
if (result.Succeeded)
|
||||
{
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
}
|
||||
else
|
||||
{
|
||||
errorMessage = "Invalid email or password.";
|
||||
}
|
||||
}
|
||||
|
||||
private sealed class LoginModel
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Email is required")]
|
||||
[System.ComponentModel.DataAnnotations.EmailAddress]
|
||||
public string Email { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Password is required")]
|
||||
public string Password { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@page "/logout"
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@inject SignInManager<ApplicationUser> SignInManager
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
@code {
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await SignInManager.SignOutAsync();
|
||||
Navigation.NavigateTo("/login", forceLoad: true);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
@@ -0,0 +1,83 @@
|
||||
@page "/register"
|
||||
@layout AuthLayout
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@inject UserManager<ApplicationUser> UserManager
|
||||
@inject SignInManager<ApplicationUser> SignInManager
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<PageTitle>Budgeteer — Register</PageTitle>
|
||||
|
||||
<h3 class="text-center mb-4">Create Account</h3>
|
||||
|
||||
<EditForm Model="Model" OnValidSubmit="HandleRegister" FormName="register">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
@if (!string.IsNullOrEmpty(errorMessage))
|
||||
{
|
||||
<div class="alert alert-danger">@errorMessage</div>
|
||||
}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<InputText @bind-Value="Model.Email" class="form-control" placeholder="you@example.com" />
|
||||
<ValidationMessage For="() => Model.Email" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<InputText @bind-Value="Model.Password" type="password" class="form-control" placeholder="At least 8 characters" />
|
||||
<ValidationMessage For="() => Model.Password" />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Confirm Password</label>
|
||||
<InputText @bind-Value="Model.ConfirmPassword" type="password" class="form-control" />
|
||||
<ValidationMessage For="() => Model.ConfirmPassword" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-100">Register</button>
|
||||
</EditForm>
|
||||
|
||||
<p class="text-center mt-3">
|
||||
Already have an account? <a href="/login">Sign in</a>
|
||||
</p>
|
||||
|
||||
@code {
|
||||
[SupplyParameterFromForm]
|
||||
private RegisterModel Model { get; set; } = new();
|
||||
|
||||
private string? errorMessage;
|
||||
|
||||
private async Task HandleRegister()
|
||||
{
|
||||
errorMessage = null;
|
||||
|
||||
var user = new ApplicationUser { UserName = Model.Email, Email = Model.Email };
|
||||
var result = await UserManager.CreateAsync(user, Model.Password);
|
||||
|
||||
if (result.Succeeded)
|
||||
{
|
||||
await SignInManager.SignInAsync(user, isPersistent: false);
|
||||
Navigation.NavigateTo("/", forceLoad: true);
|
||||
}
|
||||
else
|
||||
{
|
||||
errorMessage = string.Join(" ", result.Errors.Select(e => e.Description));
|
||||
}
|
||||
}
|
||||
|
||||
private sealed class RegisterModel
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Email is required")]
|
||||
[System.ComponentModel.DataAnnotations.EmailAddress(ErrorMessage = "Invalid email address")]
|
||||
public string Email { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Password is required")]
|
||||
[System.ComponentModel.DataAnnotations.MinLength(8, ErrorMessage = "Password must be at least 8 characters")]
|
||||
public string Password { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Please confirm your password")]
|
||||
[System.ComponentModel.DataAnnotations.Compare(nameof(Password), ErrorMessage = "Passwords do not match")]
|
||||
public string ConfirmPassword { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
@page "/settings"
|
||||
@attribute [Authorize]
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@using Microsoft.EntityFrameworkCore
|
||||
@inject UserManager<ApplicationUser> UserManager
|
||||
@inject SignInManager<ApplicationUser> SignInManager
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@inject ApplicationDbContext DbContext
|
||||
@inject NavigationManager Navigation
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Settings</PageTitle>
|
||||
|
||||
<h3 class="mb-4">Settings</h3>
|
||||
|
||||
@* ── Change Password ── *@
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Change Password</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if (passwordSuccess)
|
||||
{
|
||||
<div class="alert alert-success">Password changed successfully.</div>
|
||||
}
|
||||
|
||||
@if (!string.IsNullOrEmpty(passwordError))
|
||||
{
|
||||
<div class="alert alert-danger">@passwordError</div>
|
||||
}
|
||||
|
||||
<EditForm Model="passwordForm" OnValidSubmit="ChangePassword" FormName="changePassword">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Current Password</label>
|
||||
<InputText @bind-Value="passwordForm.CurrentPassword" type="password" class="form-control" />
|
||||
<ValidationMessage For="() => passwordForm.CurrentPassword" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">New Password</label>
|
||||
<InputText @bind-Value="passwordForm.NewPassword" type="password" class="form-control" />
|
||||
<ValidationMessage For="() => passwordForm.NewPassword" />
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Confirm New Password</label>
|
||||
<InputText @bind-Value="passwordForm.ConfirmNewPassword" type="password" class="form-control" />
|
||||
<ValidationMessage For="() => passwordForm.ConfirmNewPassword" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary">Update Password</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* ── Delete Account ── *@
|
||||
<div class="card border-danger">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h5 class="mb-0">Delete Account</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="text-danger fw-semibold">
|
||||
This will permanently delete your account and all associated data (accounts, transactions, and categories). This action cannot be undone.
|
||||
</p>
|
||||
|
||||
@if (!string.IsNullOrEmpty(deleteError))
|
||||
{
|
||||
<div class="alert alert-danger">@deleteError</div>
|
||||
}
|
||||
|
||||
@if (!confirmingDelete)
|
||||
{
|
||||
<button class="btn btn-outline-danger" @onclick="() => confirmingDelete = true">
|
||||
Delete My Account
|
||||
</button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="alert alert-warning">
|
||||
<strong>Are you sure?</strong> Type your password to confirm.
|
||||
</div>
|
||||
<div class="input-group mb-3" style="max-width: 400px;">
|
||||
<input type="password" class="form-control" placeholder="Enter your password" @bind="deletePassword" />
|
||||
<button class="btn btn-danger" @onclick="DeleteAccount">Confirm Delete</button>
|
||||
<button class="btn btn-secondary" @onclick="CancelDelete">Cancel</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private ChangePasswordForm passwordForm = new();
|
||||
private bool passwordSuccess;
|
||||
private string? passwordError;
|
||||
|
||||
private bool confirmingDelete;
|
||||
private string deletePassword = string.Empty;
|
||||
private string? deleteError;
|
||||
|
||||
private async Task ChangePassword()
|
||||
{
|
||||
passwordSuccess = false;
|
||||
passwordError = null;
|
||||
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
var userIdClaim = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
if (userIdClaim is null) return;
|
||||
|
||||
var user = await UserManager.FindByIdAsync(userIdClaim);
|
||||
if (user is null) return;
|
||||
|
||||
var result = await UserManager.ChangePasswordAsync(user, passwordForm.CurrentPassword, passwordForm.NewPassword);
|
||||
|
||||
if (result.Succeeded)
|
||||
{
|
||||
passwordSuccess = true;
|
||||
passwordForm = new ChangePasswordForm();
|
||||
}
|
||||
else
|
||||
{
|
||||
passwordError = string.Join(" ", result.Errors.Select(e => e.Description));
|
||||
}
|
||||
}
|
||||
|
||||
private async Task DeleteAccount()
|
||||
{
|
||||
deleteError = null;
|
||||
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
var userIdClaim = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
if (userIdClaim is null) return;
|
||||
|
||||
var user = await UserManager.FindByIdAsync(userIdClaim);
|
||||
if (user is null) return;
|
||||
|
||||
var passwordValid = await UserManager.CheckPasswordAsync(user, deletePassword);
|
||||
if (!passwordValid)
|
||||
{
|
||||
deleteError = "Incorrect password.";
|
||||
return;
|
||||
}
|
||||
|
||||
// Delete all user data explicitly in correct dependency order
|
||||
await DbContext.Transactions
|
||||
.Where(t => t.Account.UserId == userIdClaim)
|
||||
.ExecuteDeleteAsync();
|
||||
|
||||
await DbContext.Accounts
|
||||
.Where(a => a.UserId == userIdClaim)
|
||||
.ExecuteDeleteAsync();
|
||||
|
||||
await DbContext.Categories
|
||||
.Where(c => c.UserId == userIdClaim)
|
||||
.ExecuteDeleteAsync();
|
||||
|
||||
// Delete identity user
|
||||
await UserManager.DeleteAsync(user);
|
||||
await SignInManager.SignOutAsync();
|
||||
|
||||
Navigation.NavigateTo("/login", forceLoad: true);
|
||||
}
|
||||
|
||||
private void CancelDelete()
|
||||
{
|
||||
confirmingDelete = false;
|
||||
deletePassword = string.Empty;
|
||||
deleteError = null;
|
||||
}
|
||||
|
||||
private sealed class ChangePasswordForm
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Current password is required")]
|
||||
public string CurrentPassword { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "New password is required")]
|
||||
[System.ComponentModel.DataAnnotations.MinLength(8, ErrorMessage = "Password must be at least 8 characters")]
|
||||
public string NewPassword { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Please confirm your new password")]
|
||||
[System.ComponentModel.DataAnnotations.Compare(nameof(NewPassword), ErrorMessage = "Passwords do not match")]
|
||||
public string ConfirmNewPassword { get; set; } = string.Empty;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
@page "/transactions"
|
||||
@attribute [Authorize]
|
||||
@inject TransactionService TransactionService
|
||||
@inject AccountService AccountService
|
||||
@inject CategoryService CategoryService
|
||||
@inject AuthenticationStateProvider AuthStateProvider
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Transactions</PageTitle>
|
||||
|
||||
<h3 class="mb-4">Transactions</h3>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Add Transaction</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if (accountsList is not null && accountsList.Count == 0)
|
||||
{
|
||||
<div class="alert alert-warning mb-0">
|
||||
You need to <a href="/accounts">create an account</a> before adding transactions.
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<EditForm Model="formModel" OnValidSubmit="AddTransaction" FormName="addTransaction">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Description</label>
|
||||
<InputText @bind-Value="formModel.Description" class="form-control" placeholder="e.g. Food shopping" />
|
||||
<ValidationMessage For="() => formModel.Description" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Amount</label>
|
||||
<InputNumber @bind-Value="formModel.Amount" class="form-control numeric-input" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Date</label>
|
||||
<InputDate @bind-Value="formModel.Date" class="form-control" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Type</label>
|
||||
<InputSelect @bind-Value="formModel.Type" class="form-select">
|
||||
<option value="@TransactionType.Expense">Expense</option>
|
||||
<option value="@TransactionType.Income">Income</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Account</label>
|
||||
<InputSelect @bind-Value="formModel.AccountId" class="form-select">
|
||||
@if (accountsList is not null)
|
||||
{
|
||||
@foreach (var account in accountsList)
|
||||
{
|
||||
<option value="@account.Id">@account.Name</option>
|
||||
}
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label">Category</label>
|
||||
<InputSelect @bind-Value="formModel.CategoryId" class="form-select">
|
||||
<option value="">— None —</option>
|
||||
@if (categoriesList is not null)
|
||||
{
|
||||
@foreach (var category in categoriesList)
|
||||
{
|
||||
<option value="@category.Id">@(string.IsNullOrEmpty(category.Icon) ? "" : category.Icon + " ")@category.Name</option>
|
||||
}
|
||||
}
|
||||
</InputSelect>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">Recurrence</label>
|
||||
<InputSelect @bind-Value="formModel.RecurrenceType" class="form-select">
|
||||
<option value="@RecurrenceType.None">None</option>
|
||||
<option value="@RecurrenceType.Daily">Daily</option>
|
||||
<option value="@RecurrenceType.Weekly">Weekly</option>
|
||||
<option value="@RecurrenceType.Monthly">Monthly</option>
|
||||
<option value="@RecurrenceType.Yearly">Yearly</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
@if (formModel.RecurrenceType != RecurrenceType.None)
|
||||
{
|
||||
<div class="col-md-2">
|
||||
<label class="form-label">End Date <small class="text-muted">(max 1yr)</small></label>
|
||||
<InputDate @bind-Value="formModel.RecurrenceEndDate" class="form-control" max="@formModel.Date.AddYears(1).ToString("yyyy-MM-dd")" />
|
||||
<ValidationMessage For="() => formModel.RecurrenceEndDate" />
|
||||
</div>
|
||||
}
|
||||
<div class="col-md-2 d-flex align-items-end">
|
||||
<button type="submit" class="btn btn-primary w-100">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</EditForm>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (transactions is null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else if (transactions.Count == 0)
|
||||
{
|
||||
<div class="alert alert-info">No transactions yet.</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card">
|
||||
<div class="card-header d-flex align-items-center gap-2">
|
||||
<label class="form-label mb-0 text-nowrap">Account:</label>
|
||||
<select class="form-select form-select-sm" style="max-width: 200px;" @onchange="OnAccountFilterChanged">
|
||||
<option value="">All Accounts</option>
|
||||
@if (accountsList is not null)
|
||||
{
|
||||
@foreach (var a in accountsList)
|
||||
{
|
||||
<option value="@a.Id" selected="@(filterAccountId == a.Id)">@a.Name</option>
|
||||
}
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th role="button" class="user-select-none" @onclick='() => SetSort("date")'>Date @SortIndicator("date")</th>
|
||||
<th role="button" class="user-select-none" @onclick='() => SetSort("description")'>Description @SortIndicator("description")</th>
|
||||
<th>Account</th>
|
||||
<th>Category</th>
|
||||
<th>Recurrence</th>
|
||||
<th role="button" class="user-select-none text-end" @onclick='() => SetSort("amount")'>Amount @SortIndicator("amount")</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var t in filteredTransactions)
|
||||
{
|
||||
<tr>
|
||||
<td>@t.Date.ToString("MMM dd, yyyy")</td>
|
||||
<td>@t.Description</td>
|
||||
<td>
|
||||
<span class="badge" style="background-color: @t.Account.Color;">
|
||||
@t.Account.Name
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@if (t.Category is not null)
|
||||
{
|
||||
@if (!string.IsNullOrEmpty(t.Category.Icon))
|
||||
{
|
||||
<span class="me-1">@t.Category.Icon</span>
|
||||
}
|
||||
@t.Category.Name
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>—</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (t.RecurrenceType != RecurrenceType.None)
|
||||
{
|
||||
<span class="badge bg-info">🔁 @t.RecurrenceType</span>
|
||||
}
|
||||
else if (t.ParentTransactionId is not null)
|
||||
{
|
||||
<span class="badge bg-info">🔁 @(t.ParentTransaction?.RecurrenceType.ToString() ?? "Recurring")</span>
|
||||
}
|
||||
</td>
|
||||
<td class="text-end @(t.Type == TransactionType.Income ? "text-success" : "text-danger") fw-semibold">
|
||||
@(t.Type == TransactionType.Income ? "+" : "-")@t.Account.FormatAmount(t.Amount)
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-outline-danger btn-sm" @onclick="() => ConfirmDelete(t)">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (showDeleteModal && pendingDeleteTransaction is not null)
|
||||
{
|
||||
<div class="modal d-block" tabindex="-1" style="background: rgba(0,0,0,.5);">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Delete Recurring Transaction</h5>
|
||||
<button type="button" class="btn-close" @onclick="CancelDelete"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<strong>@pendingDeleteTransaction.Description</strong> is part of a recurring series.
|
||||
</p>
|
||||
<p>Would you like to delete just this transaction, or all future transactions in the series?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @onclick="CancelDelete">Cancel</button>
|
||||
<button type="button" class="btn btn-outline-danger" @onclick="DeleteSingle">This One Only</button>
|
||||
<button type="button" class="btn btn-danger" @onclick="DeleteSeries">All Future in Series</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@code {
|
||||
private List<Transaction>? transactions;
|
||||
private List<Account>? accountsList;
|
||||
private List<Category>? categoriesList;
|
||||
private TransactionForm formModel = new();
|
||||
private string? userId;
|
||||
private int? filterAccountId;
|
||||
|
||||
// Sort state
|
||||
private string sortColumn = "date";
|
||||
private bool sortAscending = true;
|
||||
|
||||
private List<Transaction> filteredTransactions
|
||||
{
|
||||
get
|
||||
{
|
||||
var list = (transactions ?? []).Where(t => t.Date.Date >= DateTime.Today);
|
||||
if (filterAccountId is not null)
|
||||
list = list.Where(t => t.AccountId == filterAccountId);
|
||||
|
||||
list = sortColumn switch
|
||||
{
|
||||
"description" => sortAscending
|
||||
? list.OrderBy(t => t.Description, StringComparer.OrdinalIgnoreCase)
|
||||
: list.OrderByDescending(t => t.Description, StringComparer.OrdinalIgnoreCase),
|
||||
"amount" => sortAscending
|
||||
? list.OrderBy(t => t.Amount)
|
||||
: list.OrderByDescending(t => t.Amount),
|
||||
_ => sortAscending
|
||||
? list.OrderBy(t => t.Date)
|
||||
: list.OrderByDescending(t => t.Date),
|
||||
};
|
||||
|
||||
return list.ToList();
|
||||
}
|
||||
}
|
||||
|
||||
private void OnAccountFilterChanged(ChangeEventArgs e)
|
||||
{
|
||||
filterAccountId = int.TryParse(e.Value?.ToString(), out var id) ? id : null;
|
||||
}
|
||||
|
||||
private void SetSort(string column)
|
||||
{
|
||||
if (sortColumn == column)
|
||||
sortAscending = !sortAscending;
|
||||
else
|
||||
{
|
||||
sortColumn = column;
|
||||
sortAscending = true;
|
||||
}
|
||||
}
|
||||
|
||||
private MarkupString SortIndicator(string column)
|
||||
{
|
||||
if (sortColumn != column)
|
||||
return new MarkupString("<span class=\"text-muted opacity-50\">⇅</span>");
|
||||
return new MarkupString(sortAscending ? "▲" : "▼");
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var authState = await AuthStateProvider.GetAuthenticationStateAsync();
|
||||
userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private async Task LoadData()
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
transactions = await TransactionService.GetTransactionsAsync(userId);
|
||||
accountsList = await AccountService.GetAccountsAsync(userId);
|
||||
categoriesList = await CategoryService.GetCategoriesAsync(userId);
|
||||
|
||||
if (accountsList.Count > 0 && formModel.AccountId == 0)
|
||||
{
|
||||
formModel.AccountId = accountsList[0].Id;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AddTransaction()
|
||||
{
|
||||
if (userId is null) return;
|
||||
|
||||
var transaction = new Transaction
|
||||
{
|
||||
Description = formModel.Description,
|
||||
Amount = formModel.Amount,
|
||||
Date = formModel.Date,
|
||||
Type = formModel.Type,
|
||||
AccountId = formModel.AccountId,
|
||||
CategoryId = formModel.CategoryId,
|
||||
RecurrenceType = formModel.RecurrenceType,
|
||||
RecurrenceEndDate = formModel.RecurrenceEndDate
|
||||
};
|
||||
await TransactionService.CreateTransactionAsync(transaction);
|
||||
formModel = new TransactionForm
|
||||
{
|
||||
AccountId = accountsList?.FirstOrDefault()?.Id ?? 0
|
||||
};
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
// Delete confirmation state
|
||||
private bool showDeleteModal;
|
||||
private Transaction? pendingDeleteTransaction;
|
||||
|
||||
private void ConfirmDelete(Transaction t)
|
||||
{
|
||||
pendingDeleteTransaction = t;
|
||||
if (t.RecurrenceType != RecurrenceType.None || t.ParentTransactionId is not null)
|
||||
{
|
||||
showDeleteModal = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
_ = DeleteSingle();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task DeleteSingle()
|
||||
{
|
||||
if (userId is null || pendingDeleteTransaction is null) return;
|
||||
showDeleteModal = false;
|
||||
await TransactionService.DeleteTransactionAsync(pendingDeleteTransaction.Id, userId);
|
||||
pendingDeleteTransaction = null;
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private async Task DeleteSeries()
|
||||
{
|
||||
if (userId is null || pendingDeleteTransaction is null) return;
|
||||
showDeleteModal = false;
|
||||
await TransactionService.DeleteTransactionSeriesAsync(pendingDeleteTransaction.Id, userId);
|
||||
pendingDeleteTransaction = null;
|
||||
await LoadData();
|
||||
}
|
||||
|
||||
private void CancelDelete()
|
||||
{
|
||||
showDeleteModal = false;
|
||||
pendingDeleteTransaction = null;
|
||||
}
|
||||
|
||||
private sealed class TransactionForm : System.ComponentModel.DataAnnotations.IValidatableObject
|
||||
{
|
||||
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "Description is required")]
|
||||
[System.ComponentModel.DataAnnotations.MaxLength(200)]
|
||||
public string Description { get; set; } = string.Empty;
|
||||
|
||||
[System.ComponentModel.DataAnnotations.Range(0.01, double.MaxValue, ErrorMessage = "Amount must be greater than zero")]
|
||||
public decimal Amount { get; set; }
|
||||
|
||||
public DateTime Date { get; set; } = DateTime.Today;
|
||||
|
||||
public TransactionType Type { get; set; } = TransactionType.Expense;
|
||||
|
||||
public int AccountId { get; set; }
|
||||
|
||||
public int? CategoryId { get; set; }
|
||||
|
||||
public RecurrenceType RecurrenceType { get; set; } = RecurrenceType.None;
|
||||
|
||||
public DateTime? RecurrenceEndDate { get; set; }
|
||||
|
||||
public IEnumerable<System.ComponentModel.DataAnnotations.ValidationResult> Validate(System.ComponentModel.DataAnnotations.ValidationContext validationContext)
|
||||
{
|
||||
if (RecurrenceType != RecurrenceType.None && RecurrenceEndDate.HasValue)
|
||||
{
|
||||
var maxEnd = Date.AddYears(1);
|
||||
if (RecurrenceEndDate.Value > maxEnd)
|
||||
{
|
||||
yield return new System.ComponentModel.DataAnnotations.ValidationResult(
|
||||
"Recurrence end date cannot be more than 1 year from the transaction date.",
|
||||
[nameof(RecurrenceEndDate)]);
|
||||
}
|
||||
if (RecurrenceEndDate.Value <= Date)
|
||||
{
|
||||
yield return new System.ComponentModel.DataAnnotations.ValidationResult(
|
||||
"Recurrence end date must be after the transaction date.",
|
||||
[nameof(RecurrenceEndDate)]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@page "/weather"
|
||||
@attribute [StreamRendering]
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<p>This component demonstrates showing data.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th aria-label="Temperature in Celsius">Temp. (C)</th>
|
||||
<th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
|
||||
@code {
|
||||
private WeatherForecast[]? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate streaming rendering
|
||||
await Task.Delay(500);
|
||||
|
||||
var startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = summaries[Random.Shared.Next(summaries.Length)]
|
||||
}).ToArray();
|
||||
}
|
||||
|
||||
private class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
public int TemperatureC { get; set; }
|
||||
public string? Summary { get; set; }
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user