Skip to content

Add prev/next month navigation to Finances date filter - #43

Merged
Joe-Ortiz merged 2 commits into
mainfrom
copilot/add-monthly-navigation-finances
Mar 20, 2026
Merged

Add prev/next month navigation to Finances date filter#43
Joe-Ortiz merged 2 commits into
mainfrom
copilot/add-monthly-navigation-finances

Conversation

Copilot AI commented Mar 20, 2026

Copy link
Copy Markdown
Contributor

Users had no way to quickly shift the Finances date filter by month — they had to manually edit both date inputs. This adds ‹ Prev and Next › buttons that snap the date range to the first/last day of the adjacent month and immediately apply the filter.

Changes

  • index.html: Added #prevMonthBtn (before the From: input) and #nextMonthBtn (after the This Month button) to the finance filter row.
  • src/app.ts:
    • Registered click listeners for both buttons.
    • Added navigateToPrevMonth() and navigateToNextMonth() — each reads the current start date as the base, computes the target month's first/last day, updates both inputs, and calls renderFinances().
navigateToPrevMonth(): void {
    const startInput = document.getElementById('financeStartDate') as HTMLInputElement;
    const base = startInput.value ? new Date(startInput.value + 'T00:00:00') : new Date();
    const firstDay = new Date(base.getFullYear(), base.getMonth() - 1, 1);
    const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
    startInput.valueAsDate = firstDay;
    (document.getElementById('financeEndDate') as HTMLInputElement).valueAsDate = lastDay;
    this.renderFinances();
}

lastDay is derived from firstDay (not the original base) to correctly handle year boundaries (e.g. Jan → Dec, Dec → Jan). Falls back to current date when no start date is set.

Original prompt

This section details on the original issue you should resolve

<issue_title>Add Monthly Navigation to the Finances filter</issue_title>
<issue_description>A user requested a previous and next month button be added to the Finances page. It should automatically adjust the date filters to be the first of the month and the last of the month and apply the filter.</issue_description>

Comments on the Issue (you are @copilot in this section)


⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.

Copilot AI changed the title [WIP] Add monthly navigation buttons to Finances filter Add prev/next month navigation to Finances date filter Mar 20, 2026
Copilot AI requested a review from Joe-Ortiz March 20, 2026 23:28
@Joe-Ortiz
Joe-Ortiz marked this pull request as ready for review March 20, 2026 23:31
@Joe-Ortiz
Joe-Ortiz merged commit 4257f5f into main Mar 20, 2026
1 check passed
@Joe-Ortiz
Joe-Ortiz deleted the copilot/add-monthly-navigation-finances branch March 20, 2026 23:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Monthly Navigation to the Finances filter

2 participants