WIP

BudgetApp/Components/Pages/Transactions.razor

@@ -107,7 +107,7 @@ else if (transactions.Count == 0)
 else
 {
     <div class="card">
-        <div class="card-header d-flex align-items-center gap-2">
+        <div class="card-header d-flex align-items-center gap-2 flex-wrap">
             <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>
@@ -119,6 +119,15 @@ else
                     }
                 }
             </select>
+            <div class="ms-auto d-flex align-items-center gap-2">
+                <label class="form-label mb-0 text-nowrap">Show:</label>
+                <select class="form-select form-select-sm" style="max-width: 90px;" @onchange="OnPageSizeChanged">
+                    @foreach (var size in pageSizeOptions)
+                    {
+                        <option value="@size" selected="@(pageSize == size)">@size</option>
+                    }
+                </select>
+            </div>
         </div>
         <div class="table-responsive">
             <table class="table table-hover mb-0">
@@ -134,7 +143,7 @@ else
                     </tr>
                 </thead>
                 <tbody>
-                    @foreach (var t in filteredTransactions)
+                    @foreach (var t in pagedTransactions)
                     {
                         <tr>
                             <td>@t.Date.ToString("MMM dd, yyyy")</td>
@@ -184,6 +193,20 @@ else
                 </tbody>
             </table>
         </div>
+        @if (totalPages > 1)
+        {
+            <div class="card-footer d-flex justify-content-between align-items-center">
+                <button class="btn btn-sm btn-outline-secondary" disabled="@(currentPage <= 1 ? true : (bool?)null)" @onclick="() => currentPage--">← Prev</button>
+                <small class="text-muted">Page @currentPage of @totalPages (@filteredTransactions.Count transactions)</small>
+                <button class="btn btn-sm btn-outline-secondary" disabled="@(currentPage >= totalPages ? true : (bool?)null)" @onclick="() => currentPage++">Next →</button>
+            </div>
+        }
+        else
+        {
+            <div class="card-footer">
+                <small class="text-muted">@filteredTransactions.Count transactions</small>
+            </div>
+        }
     </div>
 
     @if (showDeleteModal && pendingDeleteTransaction is not null)
@@ -293,6 +316,16 @@ else
     private string? userId;
     private int? filterAccountId;
 
+    // Pagination state
+    private int currentPage = 1;
+    private int pageSize = 25;
+    private static readonly int[] pageSizeOptions = [10, 25, 50, 100];
+    private int totalPages => (int)Math.Ceiling(filteredTransactions.Count / (double)pageSize);
+    private List<Transaction> pagedTransactions => filteredTransactions
+        .Skip((currentPage - 1) * pageSize)
+        .Take(pageSize)
+        .ToList();
+
     // Sort state
     private string sortColumn = "date";
     private bool sortAscending = true;
@@ -325,6 +358,16 @@ else
     private void OnAccountFilterChanged(ChangeEventArgs e)
     {
         filterAccountId = int.TryParse(e.Value?.ToString(), out var id) ? id : null;
+        currentPage = 1;
+    }
+
+    private void OnPageSizeChanged(ChangeEventArgs e)
+    {
+        if (int.TryParse(e.Value?.ToString(), out var size))
+        {
+            pageSize = size;
+            currentPage = 1;
+        }
     }
 
     private void SetSort(string column)
@@ -336,6 +379,7 @@ else
             sortColumn = column;
             sortAscending = true;
         }
+        currentPage = 1;
     }
 
     private MarkupString SortIndicator(string column)