Budget Tracker with Investment Sync

I'll create a comprehensive budget tracker app that includes investment tracking with automatic API synchronization.

Key Features

1. Dashboard Overview

   • Summary cards showing income, expenses, savings, and investment value
   • Budget overview chart comparing income vs expenses
   • Investment performance chart
   • Recent transactions list

2. Budget Management

   • Add new transactions (income or expenses)
   • Categorize expenses
   • Track spending against budget categories
   • Visualize monthly budget data

3. Investment Tracking

   • Portfolio overview with holdings (including SXR8 as specified)
   • Performance charts with different time periods (1M, 3M, YTD, All)
   • Asset allocation visualization
   • Real-time investment data synced from API

4. Responsive Design

   • Works on mobile, tablet, and desktop
   • Sidebar navigation for easy access to different sections

Technical Implementation

The app uses Next.js with the App Router and is built with a component-based architecture. For the investment API integration, I've created mock data hooks that simulate fetching data from external sources. In a production environment, you would replace these with actual API calls to financial data providers.

The investment data for SXR8 (iShares Core S&P 500) is included in the portfolio view, showing 16 shares as specified in your request.

To deploy this application, you can click the "Deploy" button in the Block view, or add it to your codebase using the "add to codebase" button.