feat: Visual Budgeting Health Bars for shared and personal wallets

[psrisuphan]

Summary

Allow users to set a monthly spending limit for each category. Instead of just tracking expenses, users should see a 'health bar' that visually indicates how much of their budget remains.

Motivation

Financial tracking is only half the battle; many users need help sticking to a plan. Budgeting is especially powerful when sharing a wallet, where both participants can see if the 'Food' or 'Travel' budget is nearing its limit for the month.

Proposed Behavior

• Set Limit: Add a 'Budget' tab or a modal where users can input a monthly limit for a specific category (e.g., Shopping: ฿2,000).
• Health Bar UI:
  • Show a progress bar for each budget.
  • Green (0-70%): Safe zone.
  • Yellow (70-90%): Approaching limit.
  • Red (90-100%+): Over budget.
• Shared Budgeting: If a wallet is shared, both participants see the same shared health bar for that wallet's transactions.

Technical Considerations

• Database: Add a budgets collection in Firestore, keyed by userId (for personal) or walletId (for shared).
• Calculation Logic: Dynamically calculate the month's spending in a category vs. its set monthly limit.
• Real-time: Ensure the bar updates instantly when a new transaction is recorded.

Acceptance Criteria

• Users can set a monthly ฿ limit for any existing category.
• Visual bars reflect spending vs. budget in real-time.
• Shared budgets properly calculate expenses from all wallet members.
• Visual indicators change color based on budget percentage.