Skip to content

F
finwise-miniapp-fe
Merged
Opened by ThinhNC@ThinhNC
Report abuse

feat(reports,budgets): enhance cash flow chart, category drilldown, and budget auto-renewal UI

Feature: Budget Auto-Renewal & Financial Reports Visualization Enhancements

Overview

This pull request introduces two major functional and analytical enhancements:

  1. Automated Recurring Budget Renewal: Adds automated cycle rollover and renewal for budgets across both background workers and JIT catch-up on user access.
  2. Financial Reports UX Improvements: Refines the Cash Flow Trend chart (adaptive week/year tick intervals, line-level value labels, left Y-axis removal) and redirects Category Spending drill-downs directly to the filtered Transactions ledger.

2. Frontend (finwise-miniapp-fe)

  • Budget Auto-Renewal Management:
    • [BudgetFormModal.tsx]: Added toggle for recurring cycles with Claymorphic radio selection for rollover policies.
    • [BudgetCard.tsx]: Added auto-renew status badge using Claymorphic RefreshIcon (no emojis) and rollover amount indicator.
    • [detail.tsx]: Added auto-renewal toggle control card and removed legacy series timeline for a cleaner layout.
  • Cash Flow Trend Chart Enhancements ([CashFlowChart.tsx]):
    • Weekly Period (WEEK): X-axis divided into 7 distinct points: Monday to Sunday (Thứ 2 to CN in VI / Mon to Sun in EN).
    • Yearly Period (YEAR): X-axis divided into 12 monthly points (T1 to T12 in VI / Jan to Dec in EN).
    • Line Value Labels: Amounts are displayed directly on the green (income) and red (expense) curve nodes with automatic collision separation and text halo contrast.
    • Clean Layout: Removed left Y-axis value column and redundant "Net" label, expanding plot width to 320px.
    • Interactive Inspection: Added tap/click highlight line with quick value summary banner.
  • Category Spending Drill-Down ([CategoryDistribution.tsx], [reports/index.tsx], [transactions/index.tsx]):
    • Clicking "Spending by Category" or individual category rows navigates directly to the /transactions ledger instead of Category Management.
    • Automatically pre-populates and expands filters: type: EXPENSE, selected categoryId, report period date range (dateFrom, dateTo), and active walletId.