Claudio Schaad
1dcccf89b1
Adds two charts to the per-account transactions view: a stacked bar chart of monthly totals and a pie chart of overall totals, both grouped by booking text, so recurring bookings (rent, subscriptions, etc.) are visible at a glance. Chart components are keyed on the account id so switching accounts remounts them instead of reusing a stale Plotly instance.
82 lines
4.2 KiB
Text
82 lines
4.2 KiB
Text
@page "/transactions"
|
|
@rendermode InteractiveServer
|
|
@using Schaad.Accounting.UI.Components.Pages.Charts
|
|
|
|
<PageTitle>Transaktionen</PageTitle>
|
|
|
|
<FluentStack Orientation="Orientation.Horizontal" Width="100%">
|
|
<FluentNavMenu Width="700">
|
|
@foreach (var gr in accounts.GroupBy(a => a.ClassName))
|
|
{
|
|
<FluentNavGroup Title="@(gr.Key)" Expanded="true">
|
|
@foreach (var account in gr)
|
|
{
|
|
<FluentNavLink OnClick="() => ShowTransactionsAsync(account.Id)" Icon="@(new Icons.Regular.Size24.CalendarAgenda())">
|
|
<FluentStack Orientation="Orientation.Horizontal">
|
|
<div>
|
|
@account.Number / @account.Name
|
|
</div>
|
|
<div style="margin-left: auto;">
|
|
<FluentBadge Appearance="Appearance.Neutral">
|
|
@Math.Abs(account.Balance).ToString("N2") @account.Currency
|
|
</FluentBadge>
|
|
</div>
|
|
</FluentStack>
|
|
|
|
</FluentNavLink>
|
|
}
|
|
</FluentNavGroup>
|
|
}
|
|
</FluentNavMenu>
|
|
|
|
<FluentBodyContent>
|
|
@if (selectedAccount is not null)
|
|
{
|
|
<FluentGrid Justify="JustifyContent.FlexStart">
|
|
<FluentGridItem xs="4" Class="align-content-center title">
|
|
@selectedAccount.Name
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="4" Class="align-content-center">
|
|
Total @Math.Abs(selectedAccount.Balance).ToString("N2") @selectedAccount.Currency in @transactionList?.Count() Transaktionen
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="4" Class="align-content-center" Justify="JustifyContent.FlexEnd">
|
|
<FluentButton IconStart="@(new Icons.Regular.Size16.Add())" Appearance="Appearance.Neutral" OnClick="AddAsync">Neue Transaktion hinzufügen</FluentButton>
|
|
</FluentGridItem>
|
|
</FluentGrid>
|
|
|
|
<FluentGrid Justify="JustifyContent.FlexStart">
|
|
<FluentGridItem xs="6">
|
|
<BookingTextOverTime @key="selectedAccount.Id" AccountId="@selectedAccount.Id"/>
|
|
</FluentGridItem>
|
|
<FluentGridItem xs="6">
|
|
<BookingTextBreakdown @key="selectedAccount.Id" AccountId="@selectedAccount.Id"/>
|
|
</FluentGridItem>
|
|
</FluentGrid>
|
|
|
|
<FluentPaginator State="@pagination" SummaryTemplate="@template"/>
|
|
<FluentDataGrid Items="@transactionList" Pagination="@pagination" RowSize="DataGridRowSize.Medium">
|
|
<PropertyColumn Property="@(p => p.BookingDate)" Format="dd.MM.yyyy" Sortable="true" IsDefaultSortColumn="true" InitialSortDirection="SortDirection.Descending"/>
|
|
<PropertyColumn Property="@(p => p.ValueDate)" Format="dd.MM.yyyy" Sortable="true"/>
|
|
<PropertyColumn Property="@(p => p.Text)"/>
|
|
<TemplateColumn Title="Gegenkonto">
|
|
@GetAccountName(context)
|
|
</TemplateColumn>
|
|
<TemplateColumn Title="Betrag" Align="Align.End">
|
|
@context.GetValue(selectedAccount.IsFxAccount).ToString("N2") @selectedAccount.Currency
|
|
</TemplateColumn>
|
|
<TemplateColumn Align="Align.Center" Width="50px">
|
|
<FluentButton IconEnd="@(new Icons.Regular.Size16.Delete())" Appearance="Appearance.Neutral" title="Löschen" aria-label="Löschen" OnClick="@(() => DeleteAsync(context.Id))"/>
|
|
</TemplateColumn>
|
|
<TemplateColumn Align="Align.Center" Width="50px">
|
|
<FluentButton IconEnd="@(new Icons.Regular.Size16.Edit())" Appearance="Appearance.Neutral" title="Bearbeiten" aria-label="Bearbeiten" OnClick="@(() => EditAsync(context.Id))"/>
|
|
</TemplateColumn>
|
|
</FluentDataGrid>
|
|
}
|
|
</FluentBodyContent>
|
|
</FluentStack>
|
|
|
|
@code
|
|
{
|
|
private RenderFragment template = @<span />;
|
|
PaginationState pagination = new PaginationState() { ItemsPerPage = 20 };
|
|
}
|