Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
SmartPark is a production-level Smart Parking SaaS system designed to streamline parking management through a user-friendly and professional UI. It features role-based dashboards for Admin, Staff, and Users, allowing efficient management of parking slots and sessions while integrating with a real backend API for seamless operations.

## CORE FEATURES
1. **JWT Authentication**: Secure user signup and login processes with role-based access control.
2. **Admin Dashboard**: Manage parking slots with features for creating and viewing slots, occupancy statistics, and QR code generation.
3. **Staff Dashboard**: Monitor live parking slots, manage entry and exit sessions, and view active sessions of parked vehicles.
4. **User Dashboard**: Display active session details and parking history for users to track their parking activities.
5. **QR Code Generation**: Generate and display QR codes for each parking slot, allowing easy access and management.
6. **Responsive Design**: Ensure the application is fully responsive and provides an optimal experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean and simple design with plenty of white space and a minimal color palette that focuses on typography.
- **Color Mode**: Light theme with dark text on light backgrounds for readability.
- **Layout**: Sidebar layout for dashboards with a top navbar featuring a profile dropdown and logout button. Use clean cards for displaying information.
- **Typography**: Utilize modern sans-serif fonts for headings and body text, ensuring clear hierarchy and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for styling components and layouts.
- **UI Components**: Utilize shadcn/ui for consistent UI elements.
- **State Management**: Context API for managing authentication state and user roles.

## IMPLEMENTATION STEPS
1. **Setup Project Structure**:
   - Create a new Vite project with React and TypeScript.
   - Organize the folder structure as follows:
     ```
     smart-park-frontend/
     ├── src/
     │   ├── components/
     │   ├── layouts/
     │   ├── pages/
     │   ├── dashboard/
     │   │   ├── admin/
     │   │   ├── staff/
     │   │   └── user/
     │   ├── routes/
     │   ├── services/
     │   ├── api.ts
     │   ├── hooks/
     │   └── context/
     │       └── AuthContext.tsx
     ```

2. **Install Dependencies**:
   - Install React Router, Axios, Tailwind CSS, and any other necessary libraries.

3. **Implement Authentication**:
   - Create an authentication context to manage JWT tokens and user roles.
   - Set up routes for signup and login using the provided API endpoints.
   - Implement a ProtectedRoute component to handle role-based access.

4. **Develop Dashboards**:
   - Create separate components for Admin, Staff, and User dashboards, ensuring each has tailored features and UI.
   - Implement forms for slot management, session scanning, and active session displays.

5. **QR Code Integration**:
   - Use a QR code library to generate QR codes for parking slots with a modal for viewing and downloading.

6. **Responsive Design**:
   - Ensure all layouts and components are responsive, using Tailwind CSS utilities for flexible design.

7. **Testing and Deployment**:
   - Test the application thoroughly for functionality and user experience.
   - Prepare for deployment on Vercel or Netlify, ensuring environment variables are set up for API URLs.

## USER EXPERIENCE
Users will interact with a clean and intuitive interface, allowing them to easily navigate between different dashboards based on their roles. The Admin dashboard will facilitate efficient management of parking slots, while the Staff dashboard will enable real-time monitoring and session management. Users will have access to their active sessions and parking history in a straightforward manner, ensuring a seamless experience from login to logout. The use of QR codes and responsive design will enhance usability across devices. 

This prompt is designed to create a fully functional SmartPark SaaS UI that meets the specified requirements and delivers a professional, production-ready application.