Skip to main content

Rentals (Customer)

Routes: /rentals, /rentals/[id], /rentals/my, /rentals/my/[id] Files: ayts-fe/app/rentals/** Live: kapaldo.com/rentals

Purpose​

The Rentals pillar lets customers rent physical items (motorcycles, videoke machines, cameras, event equipment, dresses, tools, etc.) from local vendors for a date range. Unlike products (consumed) or services (delivered), rentals involve time-bounded possession — the customer takes custody of an item and returns it, with an optional security deposit held until return.

Pages​

/rentals — Browse​

File: ayts-fe/app/rentals/page.tsx

  • Hero with search input ("Search rentals…")
  • Horizontal category pill row loaded from GET /api/rentals/categories (18 live categories: Motorcycles, Cars & Vans, Electronics, Tools & Machines, Videoke & Sound, Party & Events, Dresses & Attire, Sports & Outdoors, Chairs/Tables & Tents, Generator & Power, Venue/Space, Medical Equipment, Photo & Video, Construction, Clothing & Costume, Catering, Kids & Inflatables, Farm & Agricultural)
  • Responsive card grid (2–4 columns): image, category badge, "Delivery" badge, vendor name, title, pickup location, rate with pricing unit (₱450/day)
  • "Have something to rent out?" CTA → /vendor/onboard?type=rentals

/rentals/[id] — Listing Detail + Booking​

File: ayts-fe/app/rentals/[id]/page.tsx

The core booking experience:

  • Image gallery — hero photo + horizontal strip of secondary photos, click for lightbox
  • Badges — security deposit amount, delivery availability, unit count
  • Rich-text description — renders Tiptap HTML or plain text
  • Pickup location card with instructions
  • Range calendar — month navigation, calls GET /api/rentals/:id/availability?year&month per month; past, blocked, and fully-booked dates are disabled. First click = start date, second click = end date
  • Units selector (when total_units > 1), clamped to min/max rental units
  • Delivery toggle (when offers_delivery) with address input and fee added to total
  • Live price breakdown — rate × days × units + delivery fee + security deposit = total
  • Rental agreement gate — if the listing has a linked vendor agreement, the customer must open and accept it (modal) before the Book button enables
  • Login gate — guests see "Log in to book this item" (/login?redirect=/rentals/[id])
  • On success: shows booking number (RNT-YYYYMMDD-XXXX) with links to My Bookings

/rentals/my — Booking History​

File: ayts-fe/app/rentals/my/page.tsx

  • Auth-required (redirects to login)
  • List of the customer's bookings via GET /api/rentals/bookings/my — matches on user_id or customer_email (covers guest-era bookings)
  • Card per booking: listing title, vendor, status badge, date range, total

/rentals/my/[id] — Booking Tracker​

File: ayts-fe/app/rentals/my/[id]/page.tsx

  • Full booking detail: dates, price breakdown, deposit, vendor contact
  • Status badge reflects the workflow: pending → confirmed → active → returned → completed (or cancelled)
  • Cancel action (via PATCH /api/rentals/bookings/:id/cancel) available until the booking is final

Booking Status Flow (as implemented)​

pending ──vendor confirms──▶ confirmed ──handover──▶ active ──return──▶ returned ──▶ completed
   │                             │
   └───────── cancelled ◀────────┘   (customer, vendor, or admin; blocked once returned/completed)

Homepage Integration​

The landing page (app/page.tsx) includes a "Rent" entry alongside Stores, Services, and Pasugo.

  • Rentals API — full endpoint reference
  • Rentals (Admin & Vendor) — management side
  • Vendor agreements: listings can require a signed agreement before booking (see the agreement modal flow above)