IMPORTANT: Build this as a pure static single-page application (SPA). Do NOT use SSR, do NOT use TanStack Start. Use React with React Router instead.

Create a beautiful mobile-first expense tracker app called "Spendly".

SCREENS:

1. Home screen with:

   - Gradient purple header with app name "Spendly" and current month

   - Three summary cards: Total Balance (large), Income (green), Expenses (red)

   - Recent transactions list (last 5)

   - Bottom navigation bar with: Home, Transactions, Add, Stats, Settings

2. Transactions screen with:

   - Full list of all transactions, grouped by date

   - Search bar at the top

   - Filter by category chips (All, Food, Transport, Shopping, Entertainment, Health, Other)

3. Add/Edit Transaction screen (modal or page) with:

   - Toggle: Income / Expense

   - Amount input (large, prominent)

   - Description text field

   - Category selector with emoji icons (🍔 Food, 🚗 Transport, 🛍️ Shopping, 🎬 Entertainment, 💊 Health, 📦 Other)

   - Date picker

   - Save button (purple gradient)

4. Transaction detail view with:

   - Full transaction info

   - Edit button

   - Delete button (with confirmation dialog)

5. Stats screen with:

   - Pie or donut chart showing spending by category

   - Bar chart showing income vs expenses by week

   - Top spending categories list

DESIGN:

- Color scheme: deep purple (#6C3CE1) and white, with green (#22C55E) for income and red (#EF4444) for expenses

- Cards with subtle shadows and rounded corners (16px radius)

- Smooth transitions between screens

- Empty states with friendly SVG illustrations

- Floating "+" action button on home and transactions screens

- Clean sans-serif typography (Inter or similar)

- Mobile viewport optimized (375px wide)

FUNCTIONALITY (full CRUD):

- Create: add income or expense transactions

- Read: view all transactions, grouped and filtered

- Update: edit any existing transaction

- Delete: delete with a confirmation dialog before removing

- All data persisted in localStorage

- Format all amounts as currency ($ with 2 decimals)

- Sort transactions by date descending

PRELOADED SAMPLE DATA:

Load the app with realistic sample transactions for the current month so it looks great on first open:

- 2024-01-01: Salary +$3,500 (Income)

- 2024-01-02: Grocery store -$85.50 (Food)

- 2024-01-03: Uber -$12.30 (Transport)

- 2024-01-04: Netflix -$15.99 (Entertainment)

- 2024-01-05: Pharmacy -$34.00 (Health)

- 2024-01-06: Amazon order -$67.80 (Shopping)

- 2024-01-07: Coffee shop -$8.50 (Food)

- 2024-01-08: Freelance project +$850.00 (Income)

- 2024-01-09: Gas station -$55.00 (Transport)

- 2024-01-10: Restaurant dinner -$42.00 (Food)

- 2024-01-11: Gym membership -$30.00 (Health)

- 2024-01-12: Online course -$29.99 (Shopping)

- 2024-01-13: Bus pass -$22.00 (Transport)

- 2024-01-14: Supermarket -$91.20 (Food)

- 2024-01-15: Spotify -$9.99 (Entertainment)

Only load this sample data if localStorage is empty (first time the app opens), so real user data is never overwritten.

Use only frontend. No backend, no auth, no external APIs.