Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to streamline the internal processes of a company managing Meta Ads for approximately 180 active clients. It automates the critical operational task of analyzing account balances and sending payment links via WhatsApp, enhancing organization, traceability, and scalability while reducing manual workload.

## CORE FEATURES
1. **Automatic Data Update**: The application will automatically update account balances, average daily spend, remaining days until balance depletion, last payment sent, and account status (OK, ALERT, CRITICAL) once daily.
   
2. **Account Classification**: Automatically classify accounts based on remaining days until balance depletion—CRITICAL (≤ 2 days), ALERT (between 2 and 4 days), and OK (> 4 days).

3. **Dashboard Display**: A visual dashboard displaying a list of clients, current balances, average daily spending, remaining days, and status indicators using color codes for at-a-glance monitoring.

4. **Trainee Interaction**: Allow trainees to register when they requested a payment send, input the requested amount, and mark it as SENT, ensuring a clear audit trail.

5. **Data Filters**: Implement filters to sort clients by their status (CRITICAL, ALERT, OK), enhancing usability for quick access to important accounts.

6. **Metrics Overview**: Display key metrics at the top of the dashboard indicating the number of accounts in CRITICAL, ALERT, and OK status.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design emphasizing usability with ample white space and a minimal color palette to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and comfort for users during extensive use.
- **Layout**: A single-page dashboard layout centered around a grid system that organizes information clearly. The top section will feature metrics, followed by a detailed list of clients with their respective data.
- **Typography**: Use sans-serif fonts for clarity, with a hierarchy that emphasizes headings and key metrics to guide user attention effectively.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS to ensure rapid styling and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Consider using React Context or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Set Up the Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Database Schema**: Define the necessary tables in Supabase to store client data, payment requests, and account statuses.
3. **Integrate n8n**: Set up n8n to fetch data from Meta Ads API and send processed data to Supabase.
4. **Develop the Dashboard**: Build the main dashboard component that fetches data from Supabase, displays it in a grid layout, and implements automatic data updates.
5. **Implement Filtering Logic**: Add functionality to filter and sort clients based on their payment status.
6. **Create Trainee Interaction Features**: Develop forms for trainees to log payment requests and mark them as SENT, updating the database accordingly.
7. **Testing & Debugging**: Conduct thorough testing to ensure all features work seamlessly and the application is user-friendly.

## USER EXPERIENCE
Users will interact with a streamlined dashboard that provides all necessary information at a glance. They can easily filter clients by status and log payment requests with minimal clicks. The application will provide visual cues through color coding for different account statuses, ensuring that trainees can quickly identify accounts needing urgent attention. The simplicity of the layout will facilitate a smooth workflow, allowing users to focus on critical tasks without unnecessary distractions.