From eb6d83f589270750e3b4a4ece6911a02401703a8 Mon Sep 17 00:00:00 2001
From: AJ <ajisaacs27@gmail.com>
Date: Sun, 12 Oct 2025 11:10:43 -0400
Subject: [PATCH] Add quick date range selectors to transactions page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added convenient buttons for common date ranges:
- Last 30 Days
- Last 60 Days
- Last 90 Days
- Last Year
- This Month
- Last Month

Clicking these buttons automatically populates the Start Date and End
Date filter fields. Users can still manually adjust the dates or use
the Filter button to apply the selected range.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 MoneyMap/Pages/Transactions.cshtml | 49 ++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/MoneyMap/Pages/Transactions.cshtml b/MoneyMap/Pages/Transactions.cshtml
index 90856f1..1e58b40 100644
--- a/MoneyMap/Pages/Transactions.cshtml
+++ b/MoneyMap/Pages/Transactions.cshtml
@@ -49,11 +49,21 @@
             </div>
             <div class="col-md-2">
                 <label for="StartDate" class="form-label">Start Date</label>
-                <input asp-for="StartDate" type="date" class="form-control" />
+                <input asp-for="StartDate" type="date" class="form-control" id="startDateInput" />
             </div>
             <div class="col-md-2">
                 <label for="EndDate" class="form-label">End Date</label>
-                <input asp-for="EndDate" type="date" class="form-control" />
+                <input asp-for="EndDate" type="date" class="form-control" id="endDateInput" />
+            </div>
+            <div class="col-md-12 mb-2">
+                <div class="btn-group btn-group-sm" role="group" aria-label="Quick date ranges">
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(30)">Last 30 Days</button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(60)">Last 60 Days</button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(90)">Last 90 Days</button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRange(365)">Last Year</button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRangeThisMonth()">This Month</button>
+                    <button type="button" class="btn btn-outline-secondary" onclick="setDateRangeLastMonth()">Last Month</button>
+                </div>
             </div>
             <div class="col-md-2 d-flex align-items-end">
                 <button type="submit" class="btn btn-primary w-100">Filter</button>
@@ -302,5 +312,40 @@ else
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
             return new bootstrap.Tooltip(tooltipTriggerEl)
         })
+
+        // Quick date range functions
+        function formatDate(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        function setDateRange(days) {
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(startDate.getDate() - days);
+
+            document.getElementById('startDateInput').value = formatDate(startDate);
+            document.getElementById('endDateInput').value = formatDate(endDate);
+        }
+
+        function setDateRangeThisMonth() {
+            const now = new Date();
+            const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+            const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+            document.getElementById('startDateInput').value = formatDate(startDate);
+            document.getElementById('endDateInput').value = formatDate(endDate);
+        }
+
+        function setDateRangeLastMonth() {
+            const now = new Date();
+            const startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+            const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
+
+            document.getElementById('startDateInput').value = formatDate(startDate);
+            document.getElementById('endDateInput').value = formatDate(endDate);
+        }
     </script>
 }
\ No newline at end of file