Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to help users manage their financial portfolio, specifically tracking current debts, overdue accounts, and accounts in pre-legal collection. It will integrate with Siigo to download and provide real-time data, allowing users to visualize their clients who are at risk of service suspension due to overdue invoices.

## CORE FEATURES
1. **Debt Portfolio Management**: Users can view and manage their current, overdue, and pre-legal collection accounts in a clear and organized manner.
2. **Siigo Integration**: Automatically download and synchronize account information from Siigo for accurate tracking and management.
3. **Alert System**: Identify and flag clients who have more than three invoices overdue for over 30 days, providing timely alerts for potential service suspension.
4. **Visual Analytics Dashboard**: Display graphical representations of overdue accounts, trends in payments, and alerts to enhance decision-making.
5. **Client Details View**: Access detailed information about each client, including payment history and outstanding invoices.
6. **User Authentication**: Secure login and user management to ensure that sensitive financial data is protected.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring a clean, simple layout with ample white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds for optimal readability and a professional appearance.
- **Layout**: A single-page dashboard layout that includes a navigation sidebar, a main content area for displaying graphs, alerts, and client details, and a footer for additional information.
- **Typography**: Use a sans-serif font such as 'Inter' for a modern look, with a clear hierarchy (larger headings for section titles, standard size for body text, and appropriate spacing for readability).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for efficient and responsive design implementation.
- **UI Components**: Utilize shadcn/ui for pre-built components that maintain a consistent style and enhance user experience.
- **State Management**: Use React Query or Redux Toolkit for efficient data fetching and state management.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Create a new React application using Create React App with TypeScript template.
2. **Install necessary dependencies**: Install Tailwind CSS, shadcn/ui, and any required libraries for data fetching and state management.
3. **Design the layout**: Create the main layout components, including the navigation sidebar and dashboard area.
4. **Integrate Siigo API**: Develop the functionality to connect to the Siigo API for data retrieval and synchronization.
5. **Develop core features**: Implement the core features such as debt management, alert system, and detailed client views using UI components.
6. **Create visual analytics**: Utilize libraries like Chart.js or Recharts to build visual representations of data for the analytics dashboard.
7. **Implement user authentication**: Set up a secure authentication system to protect user data.
8. **Test and refine**: Conduct thorough testing to ensure all functionalities work as intended and refine the user interface based on feedback.

## USER EXPERIENCE
Users will log in to the application where they are greeted with a clean dashboard. They can easily navigate through their portfolio, view overdue accounts highlighted with alerts, and access detailed client information with a single click. The visual analytics will provide quick insights into their financial status, helping them make informed decisions regarding their accounts. The minimalist design ensures that users can focus on the data without distractions, providing a seamless and efficient experience.