feat: Interactive Animated Charts for Financial Insights (Line & Pie)

[psrisuphan]

Summary

Upgrade the Summary screen from static bars to interactive, animated charts for better data storytelling.

Proposed Behavior

• Animated Line Graph:
  • Show the total balance progression over the last 30 days.
  • Tapping a point on the line shows a tooltip with the value.
• Interactive Pie Chart:
  • A beautiful breakout of categories.
  • Tapping a slice opens a list of just those transactions.
• Comparison View:
  • A 12-month bar chart view (Income vs. Expense) that flips with an animation.

Technical Considerations

• Library: Choose a package like react-native-gifted-charts, victory-native, or react-native-chart-kit.
• Data aggregation: Group Firestore collections by month/category before mapping to chart points.
• Performance: Ensure charts don't lag when processing many transactions.

Acceptance Criteria

• Line graph shows a clear trend of spending/income over time.
• Pie chart slices correctly represent % of total expenses.
• Tooltips show exact values and dates on tap.
• Charts animate in smoothly when switching between tabs.