Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a mobile web application for a virtual wallet that facilitates linking user accounts to lenders for automatic debit of installment payments. The application will comply with the BCRA regulations while focusing on user experience through clarity, consent traceability, and user control.

## CORE FEATURES
1. **Home Screen**: Entry point showcasing the “Plan de Cuotas” with clear navigation.
2. **Plan Management**: Users can view, accept, or reject payment plans, including confirmation and feedback for each action.
3. **Cancellation of Plans**: Capability to revoke active plans with warnings and confirmations regarding the impact of cancellation.
4. **Payment History**: A detailed view of all debit attempts with clear status indicators (paid, unpaid) and navigation back to the plan.
5. **Visual State Indicators**: Differentiation between active, pending, canceled, and rejected plans through visual states.
6. **Empty States and Error Handling**: Clear messaging for empty states and loading scenarios to enhance user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout structure should consist of a clear hierarchical flow with sections for Home, Plan Management, and Payment History, utilizing tabs where necessary.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or context API as needed)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Core Components**: Design and build components for Home, Plan Management, and Payment History using functional components and hooks.
3. **Define Routing**: Implement React Router for navigation between different screens within the app.
4. **State Management**: Develop the necessary state management for handling user interactions, including accepting and rejecting plans, and managing payment history.
5. **Implement Visual States**: Create visual indicators for different states of plans and payments, ensuring accessibility and clarity in design.
6. **Testing and Feedback**: Conduct user testing sessions to gather feedback on navigation and UX, making adjustments as necessary based on user input.

## USER EXPERIENCE
The application will guide users through a straightforward flow, starting from the Home screen where they can access their “Plan de Cuotas”. Users will have clear actions available to accept or reject plans, with immediate feedback on their choices. The navigation will be intuitive, ensuring that users can easily return to previous screens or access detailed views of their payment history. States such as loading and errors will be handled gracefully, providing users with a smooth experience throughout their interactions.