Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a payments monitoring dashboard designed to provide users with insights into their organization's payment activities. It features resizable and draggable widgets that allow users to customize their view, along with filtering options for specific entities or products. The application aims to enhance decision-making through clear visual representations of payment data.

## CORE FEATURES
1. **Resizable and Draggable Widgets**: Users can adjust the size and position of widgets to personalize their dashboard layout.
   
2. **Payment Statistics**: Display key metrics such as payments due, payments made, timely payments, and invoice amounts, categorized into three sizes (S, M, L) for varying levels of detail.

3. **Variance Monitor**: A dedicated section that highlights significant changes in payment amounts, allowing users to set delta sensitivity for customized alerts on invoice changes.

4. **Filter Controls**: A page-wide control that lets users filter data to show insights for the entire organization or specific entities/products.

5. **Chart Display Options**: Users can toggle between line and bar charts for visualizing payment trends over time.

6. **Alerts and Notifications**: Provide real-time alerts for significant payment variances, ensuring users stay informed about critical changes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, ample white space, and a minimal color palette to enhance readability and user engagement.
- **Color Mode**: Light theme featuring dark text on light backgrounds for optimal contrast and legibility.
- **Layout**: A grid-based layout that allows for the flexible arrangement of widgets, ensuring a responsive design that adapts to various screen sizes.
- **Typography**: Utilize a modern sans-serif font for headings (e.g., 'Helvetica Neue') and a legible serif font for body text (e.g., 'Georgia'), ensuring a clear hierarchy between different text elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and scalable code.
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **UI Components**: shadcn/ui library for pre-built, customizable components.
- **State Management**: Use React Context or Redux for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and configure Tailwind CSS.
2. **Create Layout**: Develop the main layout using a grid system to accommodate draggable and resizable widgets.
3. **Implement Widgets**: Build individual widget components for payments due, payments made, timely payments, and invoice amounts, ensuring each supports responsive sizing.
4. **Develop Variance Monitor**: Create the variance monitor section, including input fields for delta sensitivity and logic for highlighting changes.
5. **Add Filtering Functionality**: Implement page-wide filter controls to toggle data views based on organization, entities, or products.
6. **Incorporate Charting Library**: Integrate a charting library (e.g., Chart.js or Recharts) to enable visualization for the payment data with line and bar chart options.
7. **Implement Alerts**: Set up notification systems for highlighting significant variances in payment data.
8. **Testing and Optimization**: Conduct thorough testing for responsiveness, usability, and performance optimization.

## USER EXPERIENCE
Users will interact with the application through an intuitive dashboard where they can easily drag and resize widgets to tailor their view. The filtering options will allow them to quickly switch between organizational insights or focus on specific entities or products. Alerts will notify users of significant payment variances, while visual charts will provide a clear representation of payment trends over recent months, enhancing their ability to monitor and analyze payments effectively.