Created a new BarChart component

[yashmitb]

Monthly Spending Bar Chart Implementation

Summary

This pull request adds a monthly spending visualization feature that displays user transaction data in an interactive bar chart. The implementation includes a new backend endpoint for aggregating monthly transaction totals and a frontend bar chart component for visual display.

Closes #(issue number) if applicable.

Changes Made

• ✅ Added a new feature
• ✅ Updated existing functionality
• ✅ Improved documentation
• ✅ Refactored internal code
• ✅ Fixed a bug

Briefly summarize the major changes:

• Backend: Created new GET /transactions/monthly/:user_id endpoint that aggregates transaction data by month using SQL TO_CHAR(date, 'YYYY-MM') and returns total spending per month
• Frontend: Built responsive BarChart component using react-native-svg that displays monthly spending data with auto-scaling bars and month labels
• Error Handling: Implemented comprehensive try-catch blocks and error logging on backend with clear JSON error responses
• UI/UX: Integrated chart into existing scrollable card layout with theme-consistent styling (rounded bars, responsive spacing)
• Real-time Updates: Chart automatically updates when users add or delete transactions

Testing

How was this change tested?

• ✅ Manual end-to-end testing
• ✅ Unit Tests
• ✅ CI checks passed

Backend Testing:

• Called endpoint manually in browser to verify JSON output format
• Verified correct sorting and grouping by month
• Tested with accounts containing varying transaction counts
• Confirmed proper error handling for edge cases

Frontend Testing:

• Tested bar chart rendering with single month data
• Tested bar chart rendering with multiple months data
• Verified fallback UI for zero data scenarios
• Checked responsiveness across multiple screen sizes
• Confirmed graph updates dynamically when transactions are added/deleted
• Validated theme consistency and visual polish

Screenshots

Example Test Data

Actual Data (November)

Technical Details

• Backend: Node.js/Express with SQL database
• Frontend: React Native with react-native-svg
• Data Aggregation: SQL TO_CHAR() function for month formatting
• Response Format: JSON array with {month, total} objects