Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a personal finance management tool designed in a mobile-first approach, similar to Fintonic. It allows users to manage multiple accounts, track expenses, and view financial summaries, all within a clean and modern interface optimized for mobile devices.

## CORE FEATURES
1. **Multi-account Management**: Users can create and manage multiple accounts or cards, with a consolidated view of their total balance.
2. **Dashboard**: A visually appealing main screen displaying monthly and yearly expense summaries, offering quick insights into financial health.
3. **Add Transactions**: A prominent floating action button (FAB) for users to quickly record new expenses or incomes, categorizing them by account and type.
4. **Local Storage with Dexie.js**: Efficient storage of financial data using IndexedDB, ensuring fast access and offline capabilities.
5. **Bottom Navigation Bar**: A fixed navigation bar for easy access to key functionalities, mimicking the experience of native mobile apps.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, focusing on usability and clarity.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and user comfort.
- **Layout**: Strictly mobile-first, with content centered on desktop screens to simulate a mobile interface (`max-w-md mx-auto min-h-screen border-x`). Utilize safe padding adjustments for iOS devices to accommodate notches and dynamic islands.
- **Typography**: Use a modern sans-serif font for readability, with clear hierarchy for headings, body text, and buttons.

## TECHNICAL REQUIREMENTS
- **Framework**: Next.js (App Router) with React
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui for a cohesive and modern design
- **State Management**: Utilize local state management with hooks; prepare for future integration with a backend.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a Next.js application with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Folder Structure**: Set up directories for components, pages, services (for Dexie.js integration), and styles.
3. **Design Layout**: Implement the mobile-first layout with responsive components, ensuring the content is centered on larger screens.
4. **Build Core Features**:
   - Develop the multi-account management system with the ability to add, edit, and delete accounts.
   - Create the dashboard component to summarize expenses using charts for visualization.
   - Implement the FAB for adding transactions, ensuring a smooth user experience.
5. **Integrate Dexie.js**: Create a service layer to interact with IndexedDB, encapsulating the database logic away from the UI components.
6. **Implement Navigation**: Develop the bottom navigation bar for easy access to different sections of the app.

## USER EXPERIENCE
Users will interact with the application primarily through touch gestures, with intuitive navigation via the bottom bar. The dashboard will provide instant feedback on their financial status, while the FAB will be prominently placed for quick access to transaction entry. All functionalities will be designed to ensure a seamless experience across devices, prioritizing responsiveness and user-friendly interactions.