Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
LIAN·CTV is a web application designed for Chị Lan Phạm, a Vietnamese insurance field agent based in Cần Thơ. This application serves as a comprehensive portal for managing commissions, customer information, and claim alerts, all while providing a professional and efficient user experience tailored to the needs of B2B users.

## CORE FEATURES
1. **Dashboard Overview**: A summary page displaying key performance indicators (KPIs) such as commissions earned today and this month, along with active customer tracking.
2. **Customer Management**: A detailed customer ledger that allows filtering by status (active, expiring, expired) and searching by customer name or phone number.
3. **Claim Alerts**: A notification panel that slides in to display urgent claims, allowing quick access to details.
4. **Transaction History**: A comprehensive table tracking recent commission transactions, sortable by date and amount, with real-time updates.
5. **Commission Notifications**: A banner that appears for new commission events, providing real-time alerts to the user.
6. **User Profile Management**: A simple interface for the agent to manage her profile and settings, including customer interactions.

## 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 consists of a top header navigation bar, followed by a dashboard overview section, customer management section, and transaction history table, all with clear visual separation and easy navigation.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Core Components**:
   - Develop the top navigation bar including logo and navigation links.
   - Build the dashboard overview with KPI cards and transaction history table.
   - Implement the customer management section with filtering and searching functionalities.
   - Design the claim alerts slide-in panel.
   - Set up the commission notification banner.
3. **Style Components**: Apply Tailwind CSS styles according to the design specifications to ensure a consistent look and feel.
4. **Implement State Management**: Set up Redux or Context API to manage the application state, particularly for customer data and transaction history.
5. **Integrate API Services**: If applicable, connect the application to backend services for fetching and updating commission and customer data.
6. **Testing and Optimization**: Conduct thorough testing for usability and performance, ensuring responsive design across various devices.

## USER EXPERIENCE
Users will start by logging into the portal, where they will be greeted with a personalized dashboard displaying their KPIs. They can quickly view and manage customer information, stay updated on claim alerts, and keep track of their transaction history. The intuitive navigation and clear visual hierarchy guide users through the application, enhancing productivity while minimizing the learning curve. The minimalist design and use of space ensure that users can focus on their tasks without distractions.