Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to provide clients with an interactive and visual representation of the payments lifecycle. It features dynamic charts and monitors that allow users to analyze invoice flows, payment health, and variances, facilitating better financial oversight and decision-making.

## CORE FEATURES
1. **Sankey Chart**: Displays the flow of invoices categorized as paid, due, and overdue, with a toggle option to view amounts due by entities or products.
2. **Global Monitor**: Shows a map with highlighted countries, displaying the number of submitted invoices and their total amounts, alongside filter options for global or specific country views.
3. **Payments Health Monitor**: Provides a health score indicating the likelihood of timely payments to workers, with alerts for invoices requiring immediate attention.
4. **Radar Chart**: Visualizes the distribution of payments by products or entities, with toggle functionality for user preference.
5. **Variance Monitor**: Highlights invoices with more than a 5% variance in amounts since the previous month, along with notifications for any new invoices added to the payroll.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with ample white space, a limited color palette, and a strong emphasis on typography.
- **Color Mode**: Light theme featuring dark text against light backgrounds for optimal readability.
- **Layout**: A responsive grid layout that organizes the various charts and monitors into distinct sections. The Sankey Chart will be prominently displayed at the top, followed by the Global Monitor and Payments Health Monitor side by side, and the Radar Chart and Variance Monitor below them.
- **Typography**: Utilize a sans-serif font such as "Roboto" or "Open Sans" for a modern look. Headings should be bold and larger, while body text should maintain a standard size for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: shadcn/ui for pre-built UI elements
- **State Management**: Redux or Context API for managing application state (if needed)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Develop functional components for the Sankey Chart, Global Monitor, Payments Health Monitor, Radar Chart, and Variance Monitor.
3. **Implement State Management**: Set up Redux or Context API to manage and share state across components.
4. **Design Layout**: Use Tailwind CSS to create the responsive grid layout, ensuring all components are correctly arranged.
5. **Chart Integration**: Integrate chart libraries (e.g., Chart.js or D3.js) to render the Sankey and Radar charts with interactive features.
6. **Add Interactivity**: Implement toggle functionality for the charts and filters for the Global Monitor.
7. **Testing & Optimization**: Conduct testing for usability and performance, making adjustments as necessary.

## USER EXPERIENCE
Users will interact with the application through intuitive controls such as toggles and filters. The Sankey Chart will allow them to visually analyze invoice flows, while the Global Monitor will provide insights into invoice submissions across different regions. The Payments Health Monitor will alert users to invoices that require their attention, and the Radar Chart will enable comparison of distributions efficiently. The overall experience should be seamless, with a focus on clarity and ease of navigation.