Prompt:

Build a modern, responsive fintech dashboard application called "SoloBooks AI" using React, Tailwind CSS, Lucide React, and Recharts. The app is an "AI Accountant" for solopreneurs.

1. Design System & Layout:

• Theme: Clean, professional interface using a Slate (grays) and Indigo (primary brand color) palette. Use the 'Inter' font.
• Navigation: A fixed left sidebar for desktop containing: Overview, Transactions, AI Accountant, and Connections. On mobile, this should collapse into a hamburger menu header.

2. Data & State:

• Create a constants.ts file with realistic mock data:
  • MOCK_TRANSACTIONS: Array of objects with id, date, merchant, amount, category, type (income/expense), status (cleared/pending), and optional AI notes.
  • MONTHLY_DATA: Array for charts showing revenue vs expenses per month.

3. Core Views:

• Dashboard (Home):
  • Stats Cards: Display YTD Revenue (with trend indicator), YTD Expenses, and "Tax Set Aside" (calculated as 30% of profit).
  • Main Chart: A Recharts bar chart comparing Income vs Expenses over time.
  • Smart Nudges Widget: A sidebar widget displaying AI-generated insights (e.g., "Unusual Subscription detected", "Quarterly Taxes due in 15 days").
  • Recent Activity: A condensed table showing the last 5 transactions.
• Transactions Page:
  • A full detailed table of transactions.
  • Include a search bar and filter buttons (Date, Category) at the top.
  • Use color-coded badges for Status (Cleared = Green, Pending = Yellow).
  • Format amounts: Green for income, Black for expenses.
• AI Accountant (Chat Interface):
  • A chat UI similar to ChatGPT.
  • Context: The AI acts as a financial assistant. It must "know" the mock data (transactions/revenue) to answer questions like "How much did I spend on software?".
  • Features: Suggested query chips (e.g., "Can I afford a new laptop?"), typing indicators, and streaming message responses.
  • Technical implementation: If possible, hook this up to the Google Gemini API (using process.env.API_KEY). If not, simulate the AI response logic based on the mock data.
• Connections Page:
  • A "Settings" style page showing connected banks (e.g., Stripe, Chase).
  • Cards should show sync status (e.g., "Synced just now").
  • Add a large "Connect another institution" button.

4. Technical Requirements:

• Use TypeScript.
• Ensure the application is fully responsive (mobile-friendly).
• Use functional components and hooks (useState, useEffect).