Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for managing router assignments and member registrations, enabling members to generate vouchers and configure routers. It includes features for onboarding members, approving registrations, handling payments, and providing an interactive visual topology for router management.

## CORE FEATURES
1. **Member Management**: Allows admin to approve member registrations and notify members via email upon approval.
2. **Router Assignment Drops Menu**: Replaces "Site Access" with a router selection menu for assigning routers to members.
3. **Voucher Generation**: Members can generate and download vouchers in five different designs, fitting 30-40 vouchers on an A4 page.
4. **Payment Recording**: A dedicated tab for recording and confirming payments, generating receipts, and sending them to members via email.
5. **Router Onboarding Process**: A four-stage onboarding process that includes router naming, VPN script generation, hotspot configuration, and interactive visual topology design.
6. **Dynamic Configuration**: Allows members to configure router settings and manage interfaces through an intuitive interface.

## 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 layout will consist of a sidebar for navigation and a main content area for displaying forms, tables, and interactive elements.

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

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and install dependencies (React, Tailwind CSS, shadcn/ui).
2. **Create Layout Components**: Develop the layout with a sidebar for navigation and a main content area for forms and data presentation.
3. **Implement Member Registration**:
   - Create registration forms and validation.
   - Implement email notification for approved registrations.
4. **Build Router Assignment Feature**:
   - Develop the dropdown menu for assigning routers to members.
5. **Create Voucher Generation Module**:
   - Implement the design selection and PDF generation functionality.
6. **Develop Payment Recording System**:
   - Create forms for payment entry and receipt generation.
7. **Implement Router Onboarding Process**:
   - Develop the four-stage onboarding process with necessary scripts.
8. **Test All Features**: Ensure all functionalities work as intended and fix any bugs.

## USER EXPERIENCE
Users will navigate through a minimalist interface where they can easily register, manage router assignments, generate vouchers, and handle payments. The onboarding process will guide members through configuring their routers step-by-step, ensuring a smooth and intuitive experience. Clear notifications and confirmations will enhance the overall usability of the application.