Schaad.Accounting.UI/Components/Pages/Reports/BalanceReport.razor

@@ -1,4 +1,4 @@
-@page "/BalanceReport"
+@page "/BalanceReport"
 
 @if (balance is null)
 {
@@ -6,8 +6,11 @@
     return;
 }
 
-<ReportHeader Title="@header"/>
+<h3>@header</h3>
+<a href="javascript:window.print()" class="hidePrint">Print</a>
 
+<br />
+<br />
 <table class="report">
     <thead>
         <tr>
@@ -21,7 +24,12 @@
         </tr>
     </thead>
     <tbody>
-        <ReportSectionHeader Title="Aktiven" Colspan="4"/>
+        <tr>
+            <td colspan="4" class="header">Aktiven</td>
+        </tr>
+        <tr>
+            <td colspan="4"><hr /></td>
+        </tr>
         @foreach (var account in balance.ActivaAccountList.OrderBy(m => m.Number))
         {
             @if (account.BalanceCHF == 0) { continue; }
@@ -33,14 +41,23 @@
                 <td></td>
             </tr>
         }
-        <ReportDivider Colspan="4"/>
+        <tr>
+            <td colspan="4"><hr /></td>
+        </tr>
         <tr>
             <td colspan="2" class="total">Total Aktiven</td>
             <td class="right total">CHF @balance.TotalActivaCHF.ToFormattedString()</td>
             <td></td>
         </tr>
-        <ReportDivider Colspan="4"/>
+        <tr>
-        <ReportSectionHeader Title="Passiven" Colspan="4"/>
+            <td colspan="4"><hr /></td>
+        </tr>
+        <tr>
+            <td colspan="4" class="header">Passiven</td>
+        </tr>
+        <tr>
+            <td colspan="4"><hr /></td>
+        </tr>
         @foreach (var account in balance.PassivaAccountList.OrderBy(m => m.Number))
         {
             @if (account.BalanceCHF == 0) { continue; }
@@ -52,13 +69,17 @@
                 <td class="right">@Math.Abs(account.BalanceCHF).ToFormattedString()</td>
             </tr>
         }
-        <ReportDivider Colspan="4"/>
+        <tr>
+            <td colspan="4"><hr /></td>
+        </tr>
         <tr>
             <td colspan="2" class="total">Total Passiven</td>
             <td></td>
             <td class="right total">@balance.TotalPassivaCHF.ToFormattedString()</td>
         </tr>
-        <ReportDivider Colspan="4"/>
+        <tr>
+            <td colspan="4"><hr /></td>
+        </tr>
         <tr>
             <td colspan="2" class="total">Total</td>
             <td class="right">@balance.TotalActivaCHF.ToFormattedString()</td>
@@ -74,6 +95,11 @@
             <td class="right total sum">CHF @balance.TotalActivaCHF.ToFormattedString()</td>
             <td class="right total sum">CHF @((balance.TotalPassivaCHF + win).ToFormattedString())</td>
         </tr>
-        <ReportFooter Footer="@footer" Colspan="4"/>
+        <tr>
+            <td colspan="4" style="height: 30px">&nbsp;</td>
+        </tr>
+        <tr>
+            <td colspan="4" class="footer">@footer</td>
+        </tr>
     </tbody>
 </table>

Schaad.Accounting.UI/Components/Pages/Reports/BalanceSheetReport.razor

@@ -1,4 +1,4 @@
-@page "/BalanceSheetReport"
+@page "/BalanceSheetReport"
 
 @if (balanceSheet is null)
 {
@@ -6,11 +6,18 @@
     return;
 }
 
-<ReportHeader Title="@header"/>
+<h3>@header</h3>
-
+<a href="javascript:window.print()" class="hidePrint">Print</a>
+<br />
+<br />
 <table class="report">
     <tbody>
-        <ReportSectionHeader Title="Einnahmen" Colspan="3"/>
+        <tr>
+            <td colspan="3" class="header">Einnahmen</td>
+        </tr>
+        <tr>
+            <td colspan="3"><hr /></td>
+        </tr>
         @foreach (var account in balanceSheet.ActivaAccountList.OrderBy(m => m.Number))
         {
             @if (account.StartBalanceCHF == 0) { continue; }
@@ -31,8 +38,15 @@
                 <td class="right">@Math.Abs(account.BalanceCHF).ToFormattedString()</td>
             </tr>
         }
-        <ReportDivider Colspan="3"/>
+        <tr>
-        <ReportSectionHeader Title="Ausgaben" Colspan="3"/>
+            <td colspan="3"><hr /></td>
+        </tr>
+        <tr>
+            <td colspan="3" class="header">Ausgaben</td>
+        </tr>
+        <tr>
+            <td colspan="3"><hr /></td>
+        </tr>
         @foreach (var account in balanceSheet.ExpensesAccountList.OrderBy(m => m.Number))
         {
             @if (account.BalanceCHF == 0) { continue; }
@@ -43,7 +57,9 @@
                 <td class="right">@account.BalanceCHF.ToFormattedString()</td>
             </tr>
         }
-        <ReportDivider Colspan="3"/>
+        <tr>
+            <td colspan="3"><hr /></td>
+        </tr>
         <tr>
             <td colspan="2">Total Einnahmen</td>
             <td class="right">@balanceSheet.ProfitCHF.ToFormattedString()</td>
@@ -56,6 +72,11 @@
             <td colspan="2" class="total">Übertrag @(balanceSheet.Year + 1)</td>
             <td class="right total sum">CHF @win.ToFormattedString()</td>
         </tr>
-        <ReportFooter Footer="@footer"/>
+        <tr>
+            <td colspan="4" style="height: 30px">&nbsp;</td>
+        </tr>
+        <tr>
+            <td colspan="4" class="footer">@footer</td>
+        </tr>
     </tbody>
 </table>

Schaad.Accounting.UI/Components/Pages/Reports/DetailReport.razor

@@ -1,4 +1,4 @@
-@page "/DetailReport"
+@page "/DetailReport"
 
 @if (accounts is null || transactions is null)
 {
@@ -6,8 +6,11 @@
     return;
 }
 
-<ReportHeader Title="@header"/>
+<h3>@header</h3>
+<a href="javascript:window.print()" class="hidePrint">Print</a>
 
+<br />
+<br />
 <table class="report">
     <thead>
         <tr>
@@ -20,8 +23,13 @@
         </tr>
     </thead>
     <tbody>
-        <ReportSectionHeader Title="Einkünfte" Colspan="3"/>
+    <tr>
-        @foreach (var account in accounts.Where(m => m.Class == ClassIds.Income).OrderBy(m => m.Number))
+        <td colspan="3" class="header">Einkünfte</td>
+    </tr>
+    <tr>
+        <td colspan="3"><hr /></td>
+    </tr>
+@foreach(var account in accounts.Where(m => m.Class == 3).OrderBy(m => m.Number))
 {
     @if (account.Balance == 0) {continue;}
 
@@ -43,21 +51,29 @@
                     }
                     else 
                     {
-                            <span>-</span>
+                        <span>-</span>@trx.Value.ToFormattedString();
-                            @trx.Value.ToFormattedString();
                     }
                 </td>
             </tr>
         }
-            <ReportDivider Colspan="3"/>
+        <tr>
+            <td colspan="3"><hr /></td>
+        </tr>
 }
     <tr>
         <td colspan="2" class="total right">Total Einkünfte</td>
         <td class="right total">@profit.ToFormattedString()</td>
     </tr>
-        <ReportDivider Colspan="3"/>
+    <tr>
-        <ReportSectionHeader Title="Ausgaben" Colspan="3"/>
+        <td colspan="3"><hr /></td>
-        @foreach (var account in accounts.Where(m => m.Class == ClassIds.Expenses).OrderBy(m => m.Number))
+    </tr>
+    <tr>
+        <td colspan="3" class="header">Ausgaben</td>
+    </tr>
+    <tr>
+        <td colspan="3"><hr /></td>
+    </tr>
+@foreach(var account in accounts.Where(m => m.Class == 4).OrderBy(m => m.Number))
 {
     @if (account.Balance == 0) {continue;}
 
@@ -79,18 +95,24 @@
                     }
                     else 
                     {
-                            <span>-</span>
+                        <span>-</span>@trx.Value.ToFormattedString();
-                            @trx.Value.ToFormattedString();
                     }
                 </td>
             </tr>
         }
-            <ReportDivider Colspan="3"/>
+        <tr>
+            <td colspan="3"><hr /></td>
+        </tr>
 }
     <tr>
         <td colspan="2" class="total right">Total Ausgaben</td>
         <td class="right total">@loss.ToFormattedString()</td>
     </tr>
-        <ReportFooter Footer="@footer"/>
+    <tr>
+        <td colspan="4" style="height: 30px">&nbsp;</td>
+    </tr>
+    <tr>
+        <td colspan="4" class="footer">@footer</td>
+    </tr>
     </tbody>
 </table>

Schaad.Accounting.UI/Components/Pages/Reports/ProfitLossReport.razor

@@ -1,4 +1,4 @@
-@page "/ProfitLossReport"
+@page "/ProfitLossReport"
 
 @if (accounts is null)
 {
@@ -6,8 +6,11 @@
     return;
 }
 
-<ReportHeader Title="@header"/>
+<h3>@header</h3>
+<a href="javascript:window.print()" class="hidePrint">Print</a>
 
+<br />
+<br />
 <table class="report">
     <thead>
         <tr>
@@ -21,8 +24,13 @@
         </tr>
     </thead>
     <tbody>
-        <ReportSectionHeader Title="Einkünfte" Colspan="4"/>
+    <tr>
-        @foreach (var account in accounts.Where(m => m.Class == ClassIds.Income).OrderBy(m => m.Number))
+        <td colspan="4" class="header">Einkünfte</td>
+    </tr>
+    <tr>
+        <td colspan="4"><hr /></td>
+    </tr>
+@foreach(var account in accounts.Where(m => m.Class == 3).OrderBy(m => m.Number))
 {
     @if (account.Balance == 0) {continue;}
 
@@ -33,15 +41,24 @@
         <td class="right">@Math.Abs(account.Balance).ToFormattedString()</td>
     </tr>
 }
-        <ReportDivider Colspan="4"/>
+    <tr>
+        <td colspan="4"><hr /></td>
+    </tr>
     <tr>
         <td colspan="2" class="total">Total Einkünfte</td>
         <td></td>
         <td class="right total">@profit.ToFormattedString()</td>
     </tr>
-        <ReportDivider Colspan="4"/>
+    <tr>
-        <ReportSectionHeader Title="Ausgaben" Colspan="4"/>
+        <td colspan="4"><hr /></td>
-        @foreach (var account in accounts.Where(m => m.Class == ClassIds.Expenses).OrderBy(m => m.Number))
+    </tr>
+    <tr>
+        <td colspan="4" class="header">Ausgaben</td>
+    </tr>
+    <tr>
+        <td colspan="4"><hr /></td>
+    </tr>
+@foreach(var account in accounts.Where(m => m.Class == 4).OrderBy(m => m.Number))
 {
     @if (account.Balance == 0) {continue;}
     
@@ -52,13 +69,17 @@
         <td></td>
     </tr>
 }
-        <ReportDivider Colspan="4"/>
+    <tr>
+        <td colspan="4"><hr /></td>
+    </tr>
     <tr>
         <td colspan="2" class="total">Total Ausgaben</td>
         <td class="right total">@loss.ToFormattedString()</td>
         <td></td>
     </tr>
-        <ReportDivider Colspan="4"/>
+    <tr>
+        <td colspan="4"><hr /></td>
+    </tr>
     <tr>
         <td colspan="2" class="total"></td>
         <td class="right total">@loss.ToFormattedString()</td>
@@ -74,6 +95,11 @@
         <td class="right total sum">@profit.ToFormattedString()</td>
         <td class="right total sum">@profit.ToFormattedString()</td>
     </tr>
-        <ReportFooter Footer="@footer" Colspan="4"/>
+    <tr>
+        <td colspan="4" style="height: 30px">&nbsp;</td>
+    </tr>
+    <tr>
+        <td colspan="4" class="footer">@footer</td>
+    </tr>
     </tbody>
 </table>

Schaad.Accounting.UI/Components/Pages/Reports/ReportDivider.razor

@@ -1,11 +0,0 @@
-@* Full-width table divider — <tr><td colspan="N"><hr/></td></tr>.
-   Callers pass their table's column count. *@
-
-<tr>
-    <td colspan="@Colspan"><hr/></td>
-</tr>
-
-@code {
-    [Parameter, EditorRequired]
-    public int Colspan { get; set; }
-}

Schaad.Accounting.UI/Components/Pages/Reports/ReportFooter.razor

@@ -1,19 +0,0 @@
-@* Report tail — spacer row + italic footer line ("Stand: dd.MM.yyyy").
-   Note: the existing code used colspan="4" here even in reports whose
-   table only has 3 columns; preserved as-is so the visual is unchanged.
-   Callers can override via the Colspan parameter. *@
-
-<tr>
-    <td colspan="@Colspan" style="height: 30px">&nbsp;</td>
-</tr>
-<tr>
-    <td colspan="@Colspan" class="footer">@Footer</td>
-</tr>
-
-@code {
-    [Parameter, EditorRequired]
-    public string Footer { get; set; } = "";
-
-    [Parameter]
-    public int Colspan { get; set; } = 4;
-}

Schaad.Accounting.UI/Components/Pages/Reports/ReportHeader.razor

@@ -1,14 +0,0 @@
-@* Shared banner used at the top of every printable report.
-   H3 + browser print trigger + spacer. The Print link is hidden in the
-   print stylesheet via .hidePrint. *@
-
-<h3>@Title</h3>
-<a href="javascript:window.print()" class="hidePrint">Print</a>
-
-<br/>
-<br/>
-
-@code {
-    [Parameter, EditorRequired]
-    public string Title { get; set; } = "";
-}

Schaad.Accounting.UI/Components/Pages/Reports/ReportSectionHeader.razor

@@ -1,18 +0,0 @@
-@* Section header + divider pair — "Aktiven", "Passiven", "Einkünfte",
-   "Ausgaben", "Einnahmen" etc. Wraps two <tr>s so the caller drops it
-   into <tbody> as a single element. *@
-
-<tr>
-    <td colspan="@Colspan" class="header">@Title</td>
-</tr>
-<tr>
-    <td colspan="@Colspan"><hr/></td>
-</tr>
-
-@code {
-    [Parameter, EditorRequired]
-    public string Title { get; set; } = "";
-
-    [Parameter, EditorRequired]
-    public int Colspan { get; set; }
-}

Schaad.Accounting.UI/wwwroot/app.css

@@ -63,13 +63,6 @@ h1:focus {
     .hidePrint {
         display: none !important;
     }
-
-    /* Keep report rows intact across page breaks. Without this a row could
-       be split by the printer between an amount and its label, or between a
-       section header and its first data row. */
-    table.report tr {
-        page-break-inside: avoid;
-    }
 }
 
 table.report

UI_IMPROVEMENT_PLAN.md

@@ -177,11 +177,7 @@ Split into two PRs on delivery because the header path touches ~15 pages.
 ### Phase 5 — Home page split
 
 - **U-10** Extract `<StatementImport />` and `<PendingBookings />` components. Home stacks them.
-- **U-11** ~~Replace the Home `<input list="texts">` + `<datalist>` with `FluentAutocomplete`.~~ **Won't do.** Two attempts, both broke the UI:
+- **U-11** Replace the Home `<input list="texts">` + `<datalist>` with `FluentAutocomplete` so the autocomplete UI is uniform with the split dialog.
-  - Attempt 1 (`ceef2c1`, reverted in `2522274`): `FluentCombobox` with `Autocomplete=Both`, a computed-getter `Items` source (fresh `IEnumerable` per access), and inline `@(t => t)` delegates. Suspected root cause: per-render parameter churn triggering re-init inside every row's Combobox, flooding the SignalR circuit.
-  - Attempt 2 (branch `refactor/pr-u11b-retry`, never merged): all three suspected causes fixed — `sortedBookingTexts` materialised into a real field populated in `LoadDataAsync`, `OptionText`/`OptionValue` extracted to `static readonly Func<string, string>`, `Autocomplete` downgraded to `List`. Same UI lockup.
-
-  Conclusion: `FluentCombobox` in Fluent UI Blazor 4.11.8 is not usable inside a per-row `@foreach` on a Blazor Server page with more than a handful of rows, independent of parameter stability. The native `<input list>` + `<datalist>` stays. If someone wants Fluent styling later, options that avoid the per-row Fluent component are: (a) a lightly-styled `<input>` wrapped in Fluent's CSS classes; (b) rendering the suggestions as a single shared component with a `TextChanged` callback that updates the row's `Text` field.
 
 ### Phase 6 — Report componentization