From 64c3eaa47303e6dcf7eecccc63037c3577d9fec3 Mon Sep 17 00:00:00 2001
From: Ross Miller <rossajmiller76@gmail.com>
Date: Mon, 2 Mar 2026 18:07:08 +0000
Subject: [PATCH] WIP

---
 BudgetApp/Components/Pages/Transactions.razor | 119 ++++++++++++------
 .../Components/Pages/Transactions.razor.css   |   6 +
 BudgetApp/budgetapp.db-shm                    | Bin 32768 -> 32768 bytes
 BudgetApp/budgetapp.db-wal                    | Bin 1759272 -> 1788112 bytes
 4 files changed, 86 insertions(+), 39 deletions(-)
 create mode 100644 BudgetApp/Components/Pages/Transactions.razor.css

diff --git a/BudgetApp/Components/Pages/Transactions.razor b/BudgetApp/Components/Pages/Transactions.razor
index b39e15c..983be29 100644
--- a/BudgetApp/Components/Pages/Transactions.razor
+++ b/BudgetApp/Components/Pages/Transactions.razor
@@ -107,31 +107,55 @@ else if (transactions.Count == 0)
 }
 else
 {
-    <div class="card">
-        <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;" title="Filter transactions by account" @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>
-            <input type="search" class="form-control form-control-sm" style="max-width: 220px;"
-                   title="Search by description, account, category or amount" placeholder="Search..." @bind="searchQuery" @bind:event="oninput" @bind:after="OnSearchChanged" />
-            <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 class="card mb-3">
+        <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
+            <h5 class="mb-0">Filters</h5>
+            <div class="d-flex flex-wrap align-items-center gap-2">
+                <div class="btn-group btn-group-sm">
+                    <button class="btn @(windowPreset == "7d" ? "btn-primary" : "btn-outline-secondary")" title="Show next 7 days" @onclick="() => SetWindow(7)">7d</button>
+                    <button class="btn @(windowPreset == "30d" ? "btn-primary" : "btn-outline-secondary")" title="Show next 30 days" @onclick="() => SetWindow(30)">30d</button>
+                    <button class="btn @(windowPreset == "90d" ? "btn-primary" : "btn-outline-secondary")" title="Show next 90 days" @onclick="() => SetWindow(90)">90d</button>
+                    <button class="btn @(windowPreset == "1y" ? "btn-primary" : "btn-outline-secondary")" title="Show next year" @onclick="() => SetWindow(365)">1y</button>
+                </div>
+                <input type="date" class="form-control form-control-sm" style="width:auto;"
+                       title="Custom start date" @bind="windowStart" @bind:after="OnWindowDateChanged" />
+                <span class="text-muted">to</span>
+                <input type="date" class="form-control form-control-sm" style="width:auto;"
+                       title="Custom end date" @bind="windowEnd" @bind:after="OnWindowDateChanged" />
             </div>
         </div>
+        <div class="card-body py-2">
+            <div class="row g-2 align-items-center">
+                <div class="col-12 col-sm-auto">
+                    <select class="form-select form-select-sm" title="Filter transactions by account" @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="col-12 col-sm">
+                    <input type="search" class="form-control form-control-sm"
+                           title="Search by description, account, category or amount" placeholder="Search..." @bind="searchQuery" @bind:event="oninput" @bind:after="OnSearchChanged" />
+                </div>
+                <div class="col-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="width:auto;" @onchange="OnPageSizeChanged">
+                        @foreach (var size in pageSizeOptions)
+                        {
+                            <option value="@size" selected="@(pageSize == size)">@size</option>
+                        }
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
         <div class="table-responsive">
             <table class="table table-hover mb-0">
                 <thead class="table-light">
@@ -142,8 +166,8 @@ else
                         <th role="button" class="user-select-none" title="Sort by date" @onclick='() => SetSort("date")'>Date @SortIndicator("date")</th>
                         <th role="button" class="user-select-none" title="Sort by description" @onclick='() => SetSort("description")'>Description @SortIndicator("description")</th>
                         <th>Account</th>
-                        <th>Category</th>
-                        <th>Recurrence</th>
+                        <th class="d-none d-md-table-cell">Category</th>
+                        <th class="d-none d-md-table-cell">Recurrence</th>
                         <th role="button" class="user-select-none text-end" title="Sort by amount" @onclick='() => SetSort("amount")'>Amount @SortIndicator("amount")</th>
                         <th></th>
                     </tr>
@@ -155,14 +179,14 @@ else
                             <td>
                                 <input type="checkbox" class="form-check-input" checked="@selectedIds.Contains(t.Id)" @onchange="() => ToggleSelect(t.Id)" />
                             </td>
-                            <td>@t.Date.ToString("MMM dd, yyyy")</td>
+                            <td class="text-nowrap">@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>
+                            <td class="d-none d-md-table-cell">
                                 @if (t.Category is not null)
                                 {
                                     @if (!string.IsNullOrEmpty(t.Category.Icon))
@@ -176,7 +200,7 @@ else
                                     <span>—</span>
                                 }
                             </td>
-                            <td>
+                            <td class="d-none d-md-table-cell">
                                 @if (t.RecurrenceType != RecurrenceType.None)
                                 {
                                     <span class="badge bg-info">🔁 @t.RecurrenceType</span>
@@ -186,16 +210,14 @@ else
                                     <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">
+                            <td class="text-end text-nowrap @(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-primary btn-sm" @onclick="() => OpenEditModal(t)">
-                                    Edit
-                                </button>
-                                <button class="btn btn-outline-danger btn-sm" @onclick="() => ConfirmDelete(t)">
-                                    Delete
-                                </button>
+                            <td class="text-end text-nowrap">
+                                <div class="btn-group btn-group-sm">
+                                    <button class="btn btn-outline-primary" @onclick="() => OpenEditModal(t)">Edit</button>
+                                    <button class="btn btn-outline-danger" @onclick="() => ConfirmDelete(t)">Delete</button>
+                                </div>
                             </td>
                         </tr>
                     }
@@ -204,7 +226,7 @@ else
         </div>
         @if (totalPages > 1)
         {
-            <div class="card-footer d-flex justify-content-between align-items-center">
+            <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-2">
                 <button class="btn btn-sm btn-outline-secondary" disabled="@(currentPage <= 1 ? true : (bool?)null)" @onclick="() => currentPage--">← Prev</button>
                 <div class="d-flex align-items-center gap-3">
                     @if (selectedIds.Count > 0)
@@ -220,7 +242,7 @@ else
         }
         else
         {
-            <div class="card-footer d-flex justify-content-between align-items-center">
+            <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-2">
                 <small class="text-muted">@filteredTransactions.Count transactions</small>
                 @if (selectedIds.Count > 0)
                 {
@@ -364,6 +386,11 @@ else
     private int? filterAccountId;
     private string searchQuery = string.Empty;
 
+    // Time window state
+    private DateTime windowStart = DateTime.Today;
+    private DateTime windowEnd = DateTime.Today.AddDays(30);
+    private string? windowPreset = "30d";
+
     // Pagination state
     private int currentPage = 1;
     private int pageSize = 25;
@@ -382,7 +409,7 @@ else
     {
         get
         {
-            var list = (transactions ?? []).Where(t => t.Date.Date >= DateTime.Today);
+            var list = (transactions ?? []).Where(t => t.Date.Date >= windowStart.Date && t.Date.Date <= windowEnd.Date);
             if (filterAccountId is not null)
                 list = list.Where(t => t.AccountId == filterAccountId);
 
@@ -421,6 +448,20 @@ else
 
     private void OnSearchChanged() => currentPage = 1;
 
+    private void SetWindow(int days)
+    {
+        windowPreset = days switch { 7 => "7d", 30 => "30d", 90 => "90d", 365 => "1y", _ => null };
+        windowStart = DateTime.Today;
+        windowEnd = DateTime.Today.AddDays(days);
+        currentPage = 1;
+    }
+
+    private void OnWindowDateChanged()
+    {
+        windowPreset = null;
+        currentPage = 1;
+    }
+
     private void OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
diff --git a/BudgetApp/Components/Pages/Transactions.razor.css b/BudgetApp/Components/Pages/Transactions.razor.css
new file mode 100644
index 0000000..9103893
--- /dev/null
+++ b/BudgetApp/Components/Pages/Transactions.razor.css
@@ -0,0 +1,6 @@
+@media (max-width: 767.98px) {
+    ::deep .table > :not(caption) > * > * {
+        padding: 0.3rem 0.4rem;
+        font-size: 0.8125rem;
+    }
+}
diff --git a/BudgetApp/budgetapp.db-shm b/BudgetApp/budgetapp.db-shm
index 0b469ad28c21468773c07f8b95ddc5f01bb556de..8be99ab0c6018f23428ad43784a29b480612c5c9 100644
GIT binary patch
delta 195
zcmZo@U}|V!s+V}A%K!pQK+MR%Ag~EYC<EEdGdnlzn007o%kF~m#sh4Q<ul@b$jFsm
zCsjSjY!CpM`yUBFM1j_B*x0z4ZE_4V$7B^Yk<BLTEmoVaIG$nQS;M%NaXsS(#*K`d
b7&jZTi-~PM6f=c~X&s1DC%XAsofabi%|k##

delta 175
zcmZo@U}|V!s+V}A%K!pQK+MR%Ag~%pC<ECE26s7`9(fzI>@Fy8Jiz7{!PoEDU(_T(
zs(O&wAOJG=KN5h50<B%Sv2ioo<`DJ<tH}xM3Y)Juo?+P>$gU)|`B2Oh9w4hhbn~@3
GEk*#rCpBaM

diff --git a/BudgetApp/budgetapp.db-wal b/BudgetApp/budgetapp.db-wal
index 3270f371257f111f97ea748b80718a7fbc5c5463..9053516b36a13a83d14d8cde00c076a53eeebe7a 100644
GIT binary patch
delta 415
zcmZ3nA^XC_+=dp$7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LgXw
z7O@ub7Ks+gEm9gcrVE^q65u#|?})J94&!Ir6}W|7^YfWonV49a8tIvv8XFrLPc{?~
z=ZIgym3Xpx(}C?5bcA2?>!PYK(Kax!GB99ZU{D6(mfZ#AjR)8qPYaqxiywILV|zom
z)Cyk4%;|~7l2X&>r%JI-_ehoE0}AxR1<D`-d!YitK*`rIN&aMR21X`EV@W0k4h~lS
z%;^tPrF4M`_|w3YEs$c$l$`!BkVSZVeVUXYBggFxe_7bf=Cr{5V`^q)V5w(eU}kJ)
zGF|a7k2uGwbx%L2?|;1w;vt}yF_o-twstzG@@Waw6bmZ@Q!7&oJ!1oNGjnrrsBGw*
S$vpGWtQ`<TL{U{hLj?fzp@4M&

delta 61
zcmcaGF?Yp=?1mP`7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQ7NHj57LgXw
Q7O@ub7Ks+gEm9gc0FKoZ2><{9