Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a SaaS platform designed for stores selling products via live streams on TikTok. It automates the collection of shipping information from customers through a user-friendly web form, allowing multiple stores to manage their operations independently while ensuring scalability and professional appearance.

## CORE FEATURES
1. **Public Customer Form**: A mobile-optimized form where buyers fill in their shipping details using a unique link sent by the seller. It features smart autocompletion for returning customers.
   
2. **Agency Integration**: Automated web scraping to gather shipping agency information from Shalom's website, allowing users to select agencies based on their location.

3. **Vendor Dashboard**: A comprehensive dashboard for vendors to track all shipments, with filters for date and customer, as well as metrics like total shipments and customer history.

4. **Shipping Slip Generator**: A feature to create PDF shipping slips formatted for thermal or A4 printing, allowing bulk selections for multiple shipments.

5. **WhatsApp Integration**: Automated notifications for customers upon successful registration of their shipment and daily shipment summaries for vendors.

6. **Multi-Tenant Architecture**: Each store can customize its experience by uploading logos, changing colors, and configuring messaging and notification settings.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, focusing on readability and user interaction.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high contrast and readability.
- **Layout**: A single-page layout with a header for navigation, sections for the customer form, dashboard overview, and vendor summary, all easily accessible and responsive.
- **Typography**: Use modern sans-serif fonts for clarity and simplicity, with a clear hierarchy to guide users through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsiveness
- **UI Components**: shadcn/ui for modern UI elements
- **State Management**: Redux or Context API for managing application state across components.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**: Develop reusable components for the header, customer form, dashboard, and PDF generator.
3. **Implement Routing**: Set up React Router for navigation between different sections of the application.
4. **Connect to Backend**: Use Axios to communicate with the backend for form submissions and data retrieval.
5. **Integrate Web Scraping**: Develop a backend service to scrape Shalom's website for agency data and implement regular updates.
6. **Set Up Authentication**: Implement JWT authentication for vendor login and manage user sessions.
7. **Build the Dashboard**: Create a dashboard to display shipment statistics using charts and tables.
8. **Add PDF Generation**: Utilize a library like jsPDF to generate downloadable shipping slips based on user selections.
9. **Integrate WhatsApp API**: Set up notifications using the Meta WhatsApp Cloud API for customer and vendor communications.
10. **Deploy the Application**: Prepare for deployment using Docker, ensuring scalability and ease of updates.

## USER EXPERIENCE
The application is designed with a mobile-first approach, ensuring that users can easily fill out forms step-by-step with real-time validation and visual indicators. Vendors can navigate their dashboards effortlessly, accessing critical shipment data at a glance, while customers receive clear notifications throughout their purchasing journey. The overall experience emphasizes ease of use, efficiency, and clarity, catering to both vendors and buyers in the TikTok commerce ecosystem.