Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide a responsive merchandising system. The primary purpose is to display nearby stores organized by proximity, showcasing available shifts grouped by store, sector, and time slots. The application will feature a modern, clean dashboard layout to enhance user experience and accessibility.

## CORE FEATURES
1. **Fixed Header**: Contains the "Merchandising" logo and navigation menu for easy access to available shifts, user registrations, and filters for dates and sectors.
2. **Sidebar for Nearby Stores**: Displays stores in proximity, with expandable cards showing store details and occupancy indicators.
3. **Interactive Map**: Visual representation of stores with color-coded pins based on availability. Clicking on a pin reveals store information and the next available shifts.
4. **Dynamic Shift Display**: Shows shifts available for each store, including time slots, occupancy levels, and an option to register for shifts.
5. **User Notifications**: Displays a highlighted card for users with approved shifts for the day, providing a quick link to check-in.
6. **Responsive Design**: Optimized for both desktop and mobile views, ensuring a seamless experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a subtle color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: 
  - Header: Fixed at the top with logo and navigation.
  - Sidebar: 30% width for nearby stores on the left.
  - Interactive Map: 70% width on the right, displaying store locations.
- **Typography**: Use modern sans-serif fonts for headings and body text, ensuring clear hierarchy and readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling and responsive design.
- **UI Components**: Utilize shadcn/ui for a consistent UI component library.
- **State Management**: Use React Context or a state management library (e.g., Redux) if necessary for handling global state.

## IMPLEMENTATION STEPS
1. **Set Up Project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**:
   - Develop the fixed header component for navigation.
   - Build the sidebar component to display nearby stores.
   - Create the map component using a mapping library (e.g., Leaflet or Google Maps).
3. **Implement Store Cards**:
   - Design expandable store cards in the sidebar to show details and availability.
4. **Add Interactive Map**:
   - Integrate store location pins with color coding based on availability.
   - Implement popups for store information on pin click.
5. **Develop Shift Display**:
   - Create components for displaying available shifts and registration buttons.
6. **Implement User Notification Card**:
   - Add functionality to display a notification card for users with approved shifts.
7. **Ensure Responsiveness**:
   - Utilize Tailwind CSS utilities to ensure the layout is responsive on both desktop and mobile devices.
8. **Testing**:
   - Conduct thorough testing for usability and responsiveness across devices.

## USER EXPERIENCE
Key interactions include:
- Users can filter available shifts by date and sector from the header.
- The sidebar allows users to view nearby stores, with clear indicators of occupancy level.
- Clicking a store pin on the map opens a popup with detailed information and next available shifts.
- Users can easily register for available shifts and receive visual feedback on the status of their registrations.
- The experience is designed to prioritize clarity and quick access to information, ensuring users can efficiently navigate the application.