Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive Software-as-a-Service (SaaS) platform designed to connect Dubai real estate brokers with verified investor leads. The application will feature a credit-based system to facilitate lead access, along with an intuitive agent panel for lead management and a robust admin panel for oversight and control.

## CORE FEATURES
1. **Credit-Based Lead Access System**: Brokers can purchase credits to access verified investor leads, with contact details hidden until unlocked.
2. **Lead Verification Process**: All leads will undergo verification to ensure authenticity and investment intent, enhancing lead quality.
3. **Admin Panel**: A centralized interface for managing users, leads, and financial tracking, including broker registration, lead uploads, and activity logs.
4. **Agent Panel**: Brokers can discover, filter, and manage leads effectively, with tools for tracking lead status, adding notes, and setting reminders.
5. **Payment & Credit Management**: Comprehensive records of credit purchases, usage tracking, and refund processing for invalid leads.
6. **Advanced Filtering Options**: Agents can filter leads based on various criteria such as budget, property type, and buying timeline, enhancing lead relevance.

## 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 will consist of a clear header, a sidebar for navigation in the admin panel, a dashboard overview for agents, and content sections for lead management and analytics.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (if needed for managing global state).

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS).
2. **Create Folder Structure**: Organize folders for components, pages, styles, and services.
3. **Design UI Components**: Build reusable components (buttons, cards, modals) using Tailwind CSS, adhering to the design specifications.
4. **Develop Admin Panel**: Implement features for user management, lead management, and financial tracking, ensuring functionality aligns with requirements.
5. **Build Agent Panel**: Create interfaces for lead discovery, filtering, and tracking, integrating the credit-based system for lead access.
6. **Set Up API**: Develop backend services for managing leads, user authentication, and payment processing (consider using a service like Firebase or a custom Node.js server).
7. **Implement State Management**: Use Redux to manage application state across components, particularly for user sessions and lead data.
8. **Test Functionality**: Conduct thorough testing for both admin and agent features to ensure functionality and responsiveness.
9. **Deploy Application**: Choose a deployment platform (like Vercel or Netlify) and deploy the application, ensuring to set up any necessary environment variables.

## USER EXPERIENCE
Users will have distinct experiences based on their roles (admin vs. agent). Admins will focus on managing users and overseeing the platform, while agents will interact with the lead management system through a seamless interface. Key interactions include filtering leads based on specific criteria, unlocking contact details via credits, and accessing analytics to monitor performance. The design will prioritize usability, ensuring that all interactions are intuitive and efficient, with responsive layouts for both desktop and mobile devices.