Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
MPS is a web application designed to manage parking facilities efficiently. It serves as a centralized platform where users can view and manage various parking options, edit details about each facility, set seasonal pricing, and control availability based on selected service modes: Valet and Shuttle.

## CORE FEATURES
1. **Parking Listings**: A comprehensive section displaying all registered parking facilities, including key details like location and availability.
2. **Facility Editing**: An intuitive interface for editing parking facility information, allowing uploads of images and logos, input for descriptions, and the ability to mark available paid and free services (e.g., electric charging, car wash) with price selectors for each.
3. **Seasonal Pricing Management**: A feature enabling administrators to set and adjust parking rates during specific seasons or promotional periods.
4. **Availability Management**: Tools for tracking and managing the availability of parking spaces over defined time periods, ensuring real-time updates.
5. **Service Mode Selection**: Users can choose between Valet and Shuttle service modes, impacting pricing and available services.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Emphasizing a clean and simple design with ample white space to enhance usability and readability.
- **Color Mode**: Light theme featuring dark text on light backgrounds to improve legibility and reduce eye strain.
- **Layout**: A responsive grid layout that organizes parking listings and editing interfaces intuitively, with clear sections for different functionalities and a sidebar for navigation.
- **Typography**: Use of a sans-serif font like 'Roboto' for body text to ensure clarity, with headings in a bolder weight for visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and type-safe development.
- **Styling**: Tailwind CSS for utility-first styling that aligns with the minimalist design approach.
- **UI Components**: shadcn/ui for pre-built components that maintain design consistency and save development time.
- **State Management**: Use React Context API or Zustand for efficient state management across the application.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React application with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**: Develop the main components including ParkingList, FacilityEdit, and SeasonalPricingManager.
4. **Design Layout**: Implement the responsive grid layout, ensuring that all components fit seamlessly within the design specifications.
5. **Integrate State Management**: Establish state management using Context API or Zustand to handle parking data and user selections.
6. **Develop Service Features**: Add functionality for managing availability and pricing, ensuring users can easily navigate and make selections.
7. **Testing**: Conduct thorough testing to ensure all functionalities work as intended and the user experience is smooth across devices.

## USER EXPERIENCE
Users will interact with MPS by first navigating to the Parking Listings page, where they can view all available parking facilities. Each listing will have an "Edit" button, leading to the Facility Editing interface, where they can update details and set prices. Seasonal pricing adjustments and availability management can be accessed through dedicated sections, with intuitive forms guiding users through the input process. The overall experience is designed to be straightforward, minimizing clicks and maximizing efficiency, with a responsive design that works seamlessly on both desktop and mobile devices.