Issue #24 — Frontend: Book a Workspace — Create Booking Modal

[yusuftomilola]

Location: frontend/components/bookings/CreateBookingModal.tsx

Description

From the workspaces listing page, members need to be able to initiate a booking for a workspace. This issue implements the booking creation modal — a form where the member selects a plan type, picks their start and end dates, chooses the number of seats, and sees a live total price before submitting.

Note: payment processing (Paystack) is handled as a separate feature. This modal only covers booking creation, which results in a PENDING booking. Payment initiation happens after the booking is confirmed by an admin.

Acceptance Criteria

• The component is created at frontend/components/bookings/CreateBookingModal.tsx
• Accepts props: open: boolean, onClose: () => void, workspace: Workspace
• The form includes:
  • Plan type selector: Hourly / Daily / Monthly (only shows options the workspace has prices set for)
  • Start date and End date date pickers
  • Seat count number input (min 1, max workspace capacity)
  • Notes textarea (optional)
• A live Total Price preview is calculated and displayed as the user changes plan type, dates, and seat count (same formula as backend: rate × seats × duration)
• On submit, calls the useCreateBooking mutation from Issue Create Admin Layout with All Admin Pages and Search Functionality #21
• The submit button shows a loading state while the mutation is pending
• On success, the modal closes and a success message is shown to the user
• Validation prevents submission if required fields are missing or if end date is before start date
• npx tsc --noEmit passes with no errors