Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The YYZ Pay application is a mobile-first, Progressive Web App designed specifically for CATSA Screening Officers at Toronto Pearson Airport. Its primary purpose is to provide users with accurate estimates of their next paycheque and additional earnings from extra shifts, ensuring a fast, reliable, and user-friendly experience tailored to their unique payroll needs.

## CORE FEATURES
1. **Quick Estimate**: Users can input their hourly rate and regular hours to receive a quick estimate of their take-home pay without needing to upload any documents.
2. **Personalized Estimate**: Allows users to upload paystubs or enter their payroll information manually for a more precise calculation of their expected pay.
3. **Extra Shift Calculator**: Users can input details of an extra shift to see how much additional money it will add to their take-home pay.
4. **Payroll History**: A history feature that allows users to review past predictions and actual pay received, helping them track their earnings over time.
5. **Reconciliation Tool**: Enables users to reconcile their estimated pay with actual pay received after a pay period.
6. **Privacy Controls**: Users can manage their data retention preferences, including the ability to delete their original paystub after setup and clear all stored payroll data.

## 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 main layout will feature a vertical stacking of elements, with prominent CTAs, easy navigation at the bottom, and a clear separation between input fields and results.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand (or similar lightweight library)

## IMPLEMENTATION STEPS
1. **Setup the Project**:
   - Initialize a new React application using Create React App with TypeScript.
   - Install necessary dependencies: Tailwind CSS, shadcn/ui, Zustand.
2. **Configure Tailwind CSS**:
   - Set up Tailwind CSS in the project and configure the `tailwind.config.js` file to include custom colors and fonts.
3. **Create the Main Layout**:
   - Develop a responsive layout that includes the header, main content area, and bottom navigation.
4. **Build Core Features**:
   - Implement the Quick Estimate and Personalized Estimate components with forms for user input.
   - Integrate the Extra Shift Calculator with calculations based on user input.
   - Add the Payroll History and Reconciliation components with local storage integration.
5. **Implement Privacy Controls**:
   - Add settings for data retention and deletion of stored data.
6. **Testing**:
   - Write unit tests for core components and integration tests for user flows.
   - Ensure the app works offline and meets PWA requirements.
7. **Deploy**:
   - Deploy the application to a hosting platform suitable for PWAs, such as Vercel or Netlify.

## USER EXPERIENCE
Users will experience a smooth and intuitive interface, starting with a welcoming screen that allows them to choose between Quick Estimate and Personalized Estimate. They can quickly enter their data using large, touch-friendly inputs. The app will provide immediate feedback in the form of estimated take-home pay, with clear visual indications of any additional earnings from extra shifts. The bottom navigation will allow easy access to the history, profile settings, and extra shift features, ensuring a seamless experience across the app.