Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new project using Vite with React and TypeScript. The project should have the following structure:

```
/src
  /components
    /Dashboard
      Dashboard.tsx
      EarningsCard.tsx
      AppointmentsCard.tsx
    /ServicesManagement
      ServicesList.tsx
      ServiceForm.tsx
    /StaffManagement
      StaffList.tsx
      StaffForm.tsx
    /Booking
      BookingCalendar.tsx
      BookingList.tsx
      AppointmentForm.tsx
    /EarningsHistory
      EarningsTable.tsx
  /hooks
    useEarnings.ts
    useAppointments.ts
    useServices.ts
    useStaff.ts
  /contexts
    AppContext.tsx
  /utils
    api.ts
    constants.ts
  App.tsx
  index.tsx
  tailwind.config.js
  supabaseClient.ts
```

The `components` folder will contain all the UI components, `hooks` for reusable logic, `contexts` for state management, `utils` for API interactions and constants.

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. **Dashboard**: Displays today's bookings and earnings. Includes `EarningsCard` and `AppointmentsCard`.
2. **ServicesManagement**: Contains `ServicesList` and `ServiceForm` for adding/editing services.
3. **StaffManagement**: Includes `StaffList` and `StaffForm` for handling staff CRUD operations.
4. **Booking**: Comprises `BookingCalendar`, `BookingList`, and `AppointmentForm` to manage appointments.
5. **EarningsHistory**: A table to show completed appointments with filters.

IMPLEMENTATION APPROACH
1. **Project Initialization**:
   - Run `npm create vite@latest my-salon-app --template react-ts` to initialize the project.
   - Install dependencies with `npm install tailwindcss postcss autoprefixer @supabase/supabase-js`.

2. **Setup Tailwind CSS**:
   - Configure Tailwind in `tailwind.config.js` and include in `index.css`.

3. **Supabase Setup**:
   - Initialize Supabase client in `supabaseClient.ts` and configure database schema according to the data model.

4. **Component Development**:
   - Build out the components according to the hierarchy established in the project structure. For example, in `Dashboard.tsx`, fetch earnings data and display it using the `EarningsCard`.

5. **State Management**:
   - Create a context in `AppContext.tsx` to provide global state (like user authentication and earnings).

6. **API Integration**:
   - Use `api.ts` for CRUD operations with Supabase for services, appointments, and staff.

7. **Routing**:
   - Implement routing using React Router for navigating between different pages if necessary.

ARCHITECTURE CONSIDERATIONS
The application will follow a component-based architecture with hooks for state management and side effects. Use context for global state management to keep the components decoupled and maintainable. Each component should be responsible for its own state and UI logic.

ERROR HANDLING
Implement error handling in API calls to handle cases such as:
- Network errors
- Validation errors when creating or updating records
- Display user-friendly messages using alerts or modals

TESTING STRATEGY
Adopt a testing strategy that includes:
- Unit tests for components using Jest and React Testing Library.
- Integration tests for API interactions.
- End-to-end testing using a tool like Cypress to verify the complete booking and earnings flow.

Please provide detailed, production-ready code that follows best practices for Cursor.