Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a payments lifecycle monitoring dashboard designed to help users manage their invoices efficiently. It provides an overview of outstanding payments, visual analytics for invoice categorization, and AI assistance for common inquiries, all within a clean and user-friendly interface.

## CORE FEATURES
1. **Invoice Overview Chart**: A large bar chart visualizing the total amount left to pay in invoices, with color-coded bars indicating overdue and due invoices. A prominently placed "Pay" button allows users to address urgent payments directly from this section.

2. **High-Level Financial Metrics**: Displays summary figures that break down invoices by entities, activated products, currencies, and payment groups, giving users a comprehensive view of their financial commitments.

3. **AI Assistant**: An interactive section featuring pre-loaded questions presented as selectable tags. Users can click on these tags to receive AI-generated answers about their invoices, payment habits, and actionable insights.

4. **Payment Health Score**: A visual score indicating overall payment health, along with suggestions for improvements and a forecast of the likelihood of timely payments to workers.

5. **Actionable Insights Section**: A dedicated area for users to take necessary actions, such as verifying payment methods, checking on customer support inquiries, and creating payment automations.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette, and a focus on typography to enhance readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure clarity and ease of use.
- **Layout**: The main layout will feature a top navigation bar, followed by a large chart area, high-level metrics displayed in cards below, the AI assistant section, the payment health score, and finally, the actionable insights section arranged in a visually appealing grid format.
- **Typography**: Use a clean, sans-serif font such as Inter or Roboto for body text, with a slightly bolder font for headings to establish a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component management and type safety.
- **Styling**: Tailwind CSS for utility-first styling that promotes a responsive design approach.
- **UI Components**: Utilize shadcn/ui for accessible and customizable UI components.
- **State Management**: Use React's Context API or Zustand for managing application state effectively.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS.
2. **Create Layout**: Implement the main layout structure including the navigation bar, and section placeholders for the chart, metrics, AI assistant, health score, and actionable insights.
3. **Develop Chart Component**: Use a chart library (e.g., Chart.js or Recharts) to create the invoice overview chart with color-coded bars.
4. **Build Metrics Component**: Create a component to display high-level metrics, ensuring responsive design for different screen sizes.
5. **Integrate AI Assistant**: Develop the AI assistant section with selectable tags, integrating an AI API for generating responses based on user interactions.
6. **Implement Payment Health Score**: Create a scoring system based on user-defined criteria, and display suggestions for improvement.
7. **Finalize Actionable Insights**: Design the actions section with clear buttons and links to facilitate user interactions.

## USER EXPERIENCE
Users will first encounter a visually striking chart that provides immediate insights into their outstanding invoices. The interactivity of the AI assistant encourages exploration, while the clear presentation of financial metrics helps users make informed decisions. The overall design promotes ease of navigation, ensuring users can quickly access the information and actions they need to manage their payments effectively. Responsive design principles will ensure a seamless experience across devices.