# Office Harmony

Please build a modern, production-ready Office Venue and Conference Room Booking Application optimized as a Progressive Web App (PWA). The app will be self-hosted on a Linux/GoDaddy VPS running PHP and MySQL:

### 1. Architecture & Backend Compatibility (PHP / MySQL Stack)

- Data Layer: Design the database schema using standard MySQL syntax (InnoDB engine, foreign keys, and indexes).

- API Design: Structure all data-fetching and mutation logic around clean, decoupled RESTful API endpoints suitable for a PHP backend (`/api/auth.php`, `/api/bookings.php`, `/api/rooms.php`, `/api/settings.php`, `/api/users.php`).

- File Uploads: Handle Company Logo uploads via standard HTTP multipart form POST to be stored on the local VPS server directory (`/uploads/logo/`) with URL references saved in MySQL.

---

### 2. Company Branding & Customization Settings

- Admin Branding Panel: Allow Admins to upload a custom Company Logo and set the Company Name (e.g., "Acme Corp Room Booking").

- Dynamic Top Header: Prominently display the uploaded Company Logo and Company Name across both Desktop and Mobile views for all users. Provide a clean default icon and placeholder title if none is set.

---

### 3. User Management & Google Auth Access Control (Pre-Authorized Gmail)

- Pre-Authorized Gmail List (1st-Time Login Authorization):

  - Admin pre-approves staff by adding their Gmail address into an "Authorized Staff List" in the Admin panel.

  - When staff log in via Google OAuth 2.0 for the 1st time:

    - If their Gmail address is ALREADY on the Authorized Staff List in MySQL, the system automatically creates their profile and grants access as "Staff".

    - If their Gmail address is NOT on the list, the login attempt is immediately denied, their session is revoked, and an error pops up: "Your Gmail address has not been authorized by an Administrator. Please contact HR or IT."

- Account Status & Admin Controls:

  - Admin panel must feature an "Add Authorized Gmail" form to add single or multiple Gmail addresses to the whitelist.

  - Admins can view a full directory of all authorized staff with their status (Active / Suspended).

  - Admins have full rights to Suspend, Reactivate, or Remove/Delete any staff email from the system.

  - Suspended accounts have their active sessions immediately terminated and future Google Logins blocked until reactivated.

---

### 4. Calendar & Color-Coding Logic

Display a monthly calendar starting from the current date with touch-friendly navigation and clear visual indicators:

- Grey: Closed / Not open for booking (Admin disabled or outside operating hours).

- Light Blue: Completely open and available for booking.

- Darker Blue: Partially booked (some hours within the day remain available, but others are taken).

- Light Pink: Fully booked / completely occupied dates or time slots.

---

### 5. Multi-Slot, Multi-Date & Recurring Booking Workflow

- Selection Flexibility: Allow staff to select single time slots, multi-slots on the same day, multi-dates across different days, or a recurring series.

- Recurring Options:

  - Frequency: Weekly (e.g., every Tuesday) or Custom Days (e.g., every Monday & Wednesday).

  - Duration/End Condition: Set duration by number of occurrences (e.g., repeat for 4 weeks) or until a specific end date.

- Floating Mobile Cart / Tray: Show a dynamic bottom sheet or drawer listing all selected slots/recurring instances with a clear summary before a one-tap "Confirm Reservation".

- Conflict Validation: Automatically check all future dates in a recurring series against existing bookings and closed dates. Highlight unavailable dates in the cart before checkout.

---

### 6. Backend Concurrency Lockout & Double-Booking Prevention

- Database Level Protection:

  - Enforce atomic SQL transactions (`START TRANSACTION`, `COMMIT`, `ROLLBACK`) with row locking (`SELECT ... FOR UPDATE`) in MySQL to prevent race conditions when two staff members attempt to reserve the exact same slot at the exact same millisecond.

  - Ensure overlapping time range checks fail if `start_time < existing_end_time` AND `end_time > existing_start_time` for the same room.

- User Experience During Conflicts:

  - If a race condition occurs during checkout, fail gracefully and display a clear notification: "Slot already reserved! Someone else just booked this time slot. Please choose another time."

---

### 7. PWA & Mobile UX Requirements

- Progressive Web App Manifest: Include manifest.json with display mode "standalone", app name ("Office Bookings"), and standard app icons (192x192 and 512x512) so staff can tap "Add to Home Screen" on iOS/Android.

- Mobile-First Interface: Design touch-friendly calendar slots, responsive navigation, sticky bottom cart drawer for multi-slot selections, and a native mobile app look-and-feel.

---

### 8. Admin Control Panel & Dashboard

- Branding Setup: Upload company logo and edit company name.

- Staff Authorization: Add authorized Gmail addresses, view staff directory, and suspend/reactivate/delete staff access.

- Room Setup: Create, edit, set room capacity, and temporarily toggle status (Open/Closed).

- Operating Rules: Set custom open booking time windows per room/day.

- Master Booking Overview: Live filterable calendar and list view of all company bookings (including recurring series badges).

- Real-Time Activity Badge: Show visual badge alerts when staff make new bookings, edit times, or cancel slots.

- Action Controls: Reject, modify, or manually edit staff reservations (individual or recurring series).

---

### 9. Staff "My Bookings" Portal

- Dedicated view for staff to see upcoming and past reservations.

- One-tap options to amend (reschedule) or cancel individual slots, multi-slot batches, or an entire recurring series.

---

### 10. MySQL Database Schema Specification

Structure the MySQL database with the following table layout:

- `app_settings` (id, company_name, logo_url, updated_at)

- `authorized_emails` (email PK, role ENUM('Admin','Staff'), status ENUM('Active','Suspended'), added_by, created_at)

- `users` (id, name, email, role ENUM('Admin','Staff'), status ENUM('Active','Suspended'), profile_image_url, created_at)

- `rooms` (id, name, description, capacity, status ENUM('Active','Closed'))

- `availability_rules` (id, room_id, day_of_week, open_time, close_time)

- `booking_series` (id, user_id, room_id, recurrence_pattern, frequency, end_date, occurrence_count)

- `bookings` (id, series_id, parent_batch_id, user_id, room_id, start_time DATETIME, end_time DATETIME, status ENUM('Approved','Pending','Rejected','Cancelled'), created_at)

This project was built with [Lovable](https://lovable.dev).

## Build with Lovable

Continue developing this project in the [Lovable editor](https://lovable.dev/projects/9efa24fc-1f45-4f4e-9689-d18c9d830a2f).

- **Ship faster**: describe what you want to build and Lovable handles the code.
- **Stay in sync**: every change made in Lovable is committed straight to this repository.
- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.

## Development

Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).

```sh
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev
```
