Skip to content

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

Merged
JoeProgrammer88 merged 2 commits intomainfrom
copilot/add-monthly-navigation-finances
Mar 20, 2026
Merged

Add prev/next month navigation to Finances date filter#43
JoeProgrammer88 merged 2 commits intomainfrom
copilot/add-monthly-navigation-finances

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 20, 2026

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 JoeProgrammer88 March 20, 2026 23:28
@JoeProgrammer88 JoeProgrammer88 marked this pull request as ready for review March 20, 2026 23:31
@JoeProgrammer88 JoeProgrammer88 merged commit 4257f5f into main Mar 20, 2026
1 check passed
@JoeProgrammer88 JoeProgrammer88 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