Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web app designed to manage payment processing and financial data for a business. It aims to automate payment marking and delivery processes, while also enhancing the financial dashboard for accurate data representation and improved user experience.

## CORE FEATURES
1. **Automated Payment Processing**: Automatically mark payments as paid upon successful transactions, reducing manual input and errors.
2. **Delivery Automation**: Implement a system that automatically triggers delivery once payment is confirmed, streamlining operations.
3. **Financial Dashboard**: A comprehensive dashboard displaying accurate financial metrics, including income, expenses, and payment statuses.
4. **Admin Panel**: User-friendly admin interface for managing payments, deliveries, and viewing analytics.
5. **User Authentication**: Secure login system for users and admins, ensuring data privacy and security.
6. **Data Reporting**: Generate reports for payments and financial performance, allowing for easy tracking and analysis.

## 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 to enhance readability.
- **Layout**: 
  - Main navigation bar at the top for easy access to dashboard, payments, and settings.
  - A central dashboard area displaying financial metrics with cards and charts.
  - Side panel for quick access to automated processes and admin functions.
- **Typography**: Use a sans-serif font for clarity and modernity, with a clear hierarchy (e.g., larger headings for titles, medium for subheadings, and regular weight for body text).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type safety and component-based architecture.
- **Styling**: Tailwind CSS for efficient and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components.
- **State Management**: Use Context API or Redux if complex state management is required.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create User Authentication**: Implement authentication routes and components (login, register).
3. **Build Admin Panel**: Develop the admin interface with functionalities for managing payments and deliveries.
4. **Develop Payment Processing Logic**: Integrate payment gateway API to handle transactions and automate payment marking.
5. **Design Financial Dashboard**: Create components to display financial data using charts and cards, ensuring data accuracy.
6. **Connect Backend Services**: Ensure the frontend communicates effectively with backend services for payment and delivery automation.
7. **Testing**: Conduct thorough testing for functionality and user experience, making necessary adjustments.

## USER EXPERIENCE
Users will seamlessly navigate through the app, starting from the login page to access the dashboard. Upon logging in, they can view real-time financial metrics, manage payments, and trigger automated deliveries. Admins will have a straightforward interface to oversee operations, ensuring a fluid experience with minimal friction in task completion. The responsive design will ensure usability across devices, enhancing accessibility for all users.