Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a payments lifecycle dashboard designed to help customers manage their invoices and payments effectively. It provides a clear timeline of key actions, such as receiving, approving, paying, and reconciling invoices on a monthly basis, while offering actionable prompts and insightful charts to track financial performance.

## CORE FEATURES
1. **Payments Timeline**: A visual representation of the customer journey, highlighting key activities such as invoice receipt, approval, payment, and reconciliation.
2. **Action Prompts**: Clear prompts guiding users on next steps, including options to pay invoices or manage payment methods.
3. **Payments Made Chart**: A dynamic chart displaying a three-month history of payments made, segmented by three entities (Acme USA, Acme BR, Acme Colombia) with options to view data by currency or product.
4. **Received Invoices Overview**: A comprehensive chart for all received invoices, projecting potential spending for unpaid invoices.
5. **Active Goals Management**: A section showcasing active financial goals with options to manage or add new goals, such as budget limits and overdue invoice targets.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, ample white space, and a limited color palette to enhance readability and user engagement.
- **Color Mode**: Light theme featuring dark text on light backgrounds for maximum clarity and comfort.
- **Layout**: 
  - **Header**: Includes the application title and navigation links.
  - **Main Section**: Divided into three primary areas—Timeline, Charts, and Goals Management.
  - **Footer**: Contains contact information and links to help resources.
- **Typography**: 
  - Primary font: Sans-serif (e.g., Open Sans or Roboto) for readability.
  - Headers: Bold for emphasis with a larger size.
  - Body text: Regular weight for clarity, ensuring a consistent hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for efficient and responsive styling.
- **UI Components**: shadcn/ui library for pre-built components to maintain design consistency.
- **State Management**: Use React Context API or Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript, and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop header, main section, and footer components to structure the application.
3. **Implement Timeline Feature**: Create a component for the payments timeline, ensuring it is visually engaging and easy to navigate.
4. **Develop Chart Components**: Integrate charting libraries (like Chart.js or Recharts) to visualize payments made and received invoices.
5. **Configure Goals Management**: Build a component for managing active goals, allowing users to add, edit, or remove goals.
6. **Set Up Routing**: Implement React Router for navigation across components if needed in future expansions.
7. **Test User Interactions**: Ensure all features work seamlessly and provide the intended user experience, focusing on responsiveness and accessibility.

## USER EXPERIENCE
Users will interact with the dashboard to track their payment lifecycle effectively. The intuitive layout will allow users to easily navigate through their payments timeline, access detailed charts for payments made and received invoices, and manage their financial goals. Prompts will guide users through necessary actions, ensuring they can make informed decisions about their payments and budgeting. The minimalist design will enhance usability, making it easy for users to focus on critical information without distraction.