carmanagement/project_design/PAGES.md

Pages Specification — RentFlow

---

LAYER 1A — Marketing Site (rentflow.com)

/ — Home

Sections:

1. Hero — "Run your rental car business like a pro" + CTA
2. Two-column value: "For rental companies" / "For renters"
3. Social proof bar
4. Pain points (for companies)
5. Features grid — fleet, photos, offers, site, CRM, analytics
6. Marketplace callout — "Your vehicle photos appear on the RentFlow global marketplace automatically"
7. How it works — 3 steps
8. Pricing teaser (AmanPay / PayPal accepted badges shown)
9. Testimonials
10. Final CTA

/pricing — Pricing

• Three plan cards (Starter / Growth / Pro) with monthly/annual toggle
• Payment method icons: AmanPay logo + PayPal logo
• "Pay securely with AmanPay (cards, cash, e-wallet) or PayPal"
• Supported currencies: MAD, USD, EUR
• FAQ section

/features, /about, /contact, /blog — standard

---

LAYER 1B — Global Marketplace (rentflow.com/explore)

Design principle: This is a DISCOVERY layer. No booking form, no payment form. Every CTA leads to the company's own site.

/explore — Marketplace Home

Sections:

1. Search Hero

   • Headline: "Find your next rental — from trusted local companies"
   • Search bar: [City / Location] [Pick-up date] [Return date] [Search]
   • Popular cities quick links

2. Featured Offers Carousel

   • "🔥 Current Deals" header
   • Horizontal scroll of offer cards:
     • Vehicle photo (from company upload)
     • Company logo + name
     • Offer title + discount badge (e.g. "20% OFF")
     • Valid until date
     • "View Deal →" → links to /explore/[slug]#offers

3. All Available Vehicles

   • Grid of vehicle cards showing ALL published vehicles from ALL companies:
     • Vehicle photo (first photo from Vehicle.photos[])
     • Make, model, year, category badge
     • Company logo + name (clickable)
     • Daily rate + currency
     • Active offer badge (if applicable, e.g. "20% OFF until July 31")
     • Star rating from reviews
     • "Book at [Company Name] →" — on click: redirect to {slug}.rentflow.com/book?vehicleId=X&from=Y&to=Z&ref=marketplace
   • Filter panel: category, transmission, fuel type, price range, city, offer only
   • Sort: price (low-high, high-low), rating, newest

4. Browse by Category

   • Economy · Compact · SUV · Luxury · Van · Truck · Electric

5. Browse by Company

   • Company cards: logo, name, city, rating, vehicle count, active offer badge
   • "View Fleet →" → /explore/[slug]

6. How It Works (for first-time visitors)

   • 3 steps: 1. Browse vehicles → 2. Click to go to company site → 3. Book & pay directly

/explore?... — Search Results

• Same vehicle card grid, filtered by search params
• No booking happens here — every card links to company site with pre-filled params
• Availability indicator on each card ("3 available for your dates" vs "Check availability")

/explore/[slug] — Company Marketplace Profile

This is the company's listing on the RentFlow marketplace (RentFlow-styled, not their branded site).

Sections:

1. Company header — logo, display name, city/country, rating, phone, "Save" heart
2. Current Offers section — offer cards with discount badges
3. Available Vehicles grid — all published vehicles with photos
   • Each card: photo(s), specs, daily rate, offer badge, "Book at [Company Name] →" redirect button
4. Reviews — renter reviews with star ratings + company replies
5. Contact info — email, phone, WhatsApp link (opens wa.me/...)
6. "Visit their website →" link to {slug}.rentflow.com

/explore/[slug]/vehicles/[id] — Vehicle Detail (Marketplace)

• Photo gallery (all Vehicle.photos[] uploaded by company)
• Full specs: make, model, year, color, category, seats, transmission, fuel, features
• Daily rate + active offer badge + calculated total for selected dates
• Availability calendar (shows blocked dates — unavailable for booking)
• Company info sidebar: logo, name, rating, phone, WhatsApp
• BIG CTA: "Book at [Company Name] →"
  • Redirects to: {slug}.rentflow.com/book?vehicleId=[id]&from=[startDate]&to=[endDate]&ref=marketplace
  • Opens in same tab

No /explore/[slug]/book page

There is no booking flow on the marketplace. Booking happens entirely on the company's site.

---

LAYER 1B — Renter Account

/renter/signup, /renter/login

Standard auth pages. Login with Google optional.

/renter/dashboard — My Rentals

• Cross-company reservations list (tabs: Upcoming / Active / Past / Cancelled)
• Each card: company logo, vehicle photo, dates, status, "View" → links to company site booking detail

/renter/notifications — Notification Inbox

• All in-app notifications (new booking, reminders, offers, etc.)

/renter/saved-companies

• Saved companies with "New Offer" badges if they have active offers
• "View Fleet →" links to marketplace profile

/renter/profile

• Personal info, locale, currency preference
• Notification preferences matrix (Email / SMS / WhatsApp / Push per event type)

---

LAYER 2 — Company Dashboard (app.rentflow.com)

Auth

/signup — Signup Wizard

1. Account (name, email, password)
2. Company (name, country, phone)
3. Plan selection (Starter / Growth / Pro + Monthly / Annual + currency: MAD / USD / EUR)
4. Payment:
   • Option A: Pay with AmanPay → shows AmanPay widget (card, cash, e-wallet)
   • Option B: Pay with PayPal → redirect to PayPal, return here
   • AmanPay and PayPal logos shown prominently
   • "Supported: Visa, Mastercard, CMI, cash at 3000+ points, PayPal"

/onboarding — 4-Step Wizard

1. Company profile (address, phone)
2. Branding (logo, color, subdomain)
3. Add first vehicle + upload photos — emphasize: "Photos appear on the global marketplace"
4. Launch: "Your site is live at [slug].rentflow.com" + "Your vehicles are now visible on rentflow.com/explore"

Dashboard Pages

/dashboard — Home

• Subscription status banner (trial / past-due / renewal due)
• KPI cards + active offers widget + booking source breakdown

/dashboard/fleet — Fleet Management

• Vehicle list with status + published/unpublished badge
• Photos column — thumbnail of first photo, "0 photos" warning badge if none uploaded
• Vehicle detail:
  • Photos section at top — drag-drop upload area
  • "Photos appear on marketplace" callout
  • Upload multiple photos (Cloudinary)
  • Reorder photos (first = cover image)
  • Delete photos
  • Specs + maintenance + reservation history

/dashboard/offers — Offers

• Create / manage promotional offers
• isPublic toggle: "Show on global marketplace"
• isFeatured toggle: "Feature on explore homepage" (GROWTH+ plan badge)

/dashboard/reservations

• Source filter includes MARKETPLACE (bookings from renter redirected from explore)

/dashboard/billing — Billing & Plan

• Current plan + status
• "Renew Subscription" button (manual renewal — AmanPay or PayPal)
• Invoice history (with AmanPay transaction IDs or PayPal capture IDs)
• Payment methods accepted: AmanPay badge + PayPal badge

/dashboard/settings — Settings

• Payments tab ← UPDATED:
  • "Your rental payment methods" section (what renters use to pay YOU)
  • AmanPay section: Merchant ID input + Secret Key input + "Test connection" button
  • PayPal section: PayPal business email input + "Connect PayPal" button
  • Active payment methods shown with green/grey status dots
  • "If no payment method configured, renters can only make reservation requests (pay on pickup)"

/dashboard/notifications — Notification Center

• Inbox tab (in-app notification log)
• Preferences tab (Email / SMS / In-App / Push matrix per event type)

---

LAYER 3 — Company Public Site ({slug}.rentflow.com)

All booking and payment happens here. Company's brand. Company's AmanPay/PayPal.

/ — Home

• Company header: logo + name + nav
• Hero: tagline + hero image + "Browse Our Vehicles" CTA
• Active Offers section — offer banners with countdown (valid until X days)
• Vehicle grid (all published vehicles with photos)
• Footer: contact + social + "Powered by RentFlow" (Pro removes)

/vehicles/[id] — Vehicle Detail

• Photo gallery (all company-uploaded photos, full lightbox)
• Specs + features list
• Daily rate + active offer badge
• Availability calendar
• "Book Now" CTA

/offers — All Offers

• All active offers with banner images, descriptions, discount badges, valid until
• "Book with this offer" → pre-fills booking form with offer applied

/book — Booking Flow

The booking form accepts a ?vehicleId=X&from=Y&to=Z&ref=marketplace&offerId=O querystring. When ref=marketplace is present, the reservation is tagged as source=MARKETPLACE.

Step 1 — Vehicle & Dates

• Vehicle card (pre-filled if from marketplace redirect or offer click)
• Date range picker
• Active offer applied (if applicable) + promo code input
• Price breakdown: base rate − discount = total

Step 2 — Your Details

• First name, last name, email, phone (required)
• Driver license (optional, company-configurable)
• Renter account login prompt (optional — "Save this booking to your RentFlow account")

Step 3 — Payment

• Order summary card
• Payment method selection:
  • AmanPay tab (if company has AmanPay configured):
    • AmanPay widget loads inline (card national, card international, cash)
    • Powered by AmanPay + M2T + PCI-DSS badge
  • PayPal tab (if company has PayPal configured):
    • PayPal buttons component
  • If only one method: show directly without tabs
  • If none: "Contact us to reserve" + company phone/WhatsApp
• "Confirm & Pay" / "Confirm Reservation"

/book/confirmation — Booking Confirmed

• Booking reference number
• Full summary
• Company contact info
• "Download receipt" (PDF, optional)
• "Track this booking" → link to renter account
• Notifications already sent automatically

/contact — Contact

• Contact form → email via Resend to company

---

Admin Panel (admin.rentflow.com — internal)

Separate app from the company dashboard. Own auth (JWT + TOTP 2FA). Only RentFlow staff.

Auth

• /admin/login — email + password + optional 2FA code field (shown if 2FA enabled)
• /admin/login/2fa — TOTP entry step

/admin — Overview Dashboard

• Platform KPI cards: Total Companies, Active, Trialing, Suspended, MRR, Churn
• Recent signups feed
• Quick links to all sections

/admin/companies — Company List

• Search (name, email, slug), filter (plan, status, country), sort (name, MRR, created)
• Table: Logo, Name, Plan badge, Status badge, Vehicle count, Employee count, MRR, Actions
• Actions: View | Edit | Suspend/Reactivate | Delete
• Bulk: Suspend selected, Export CSV

/admin/companies/:id — Company Detail

• Tabs: Overview | Staff | Subscription | Activity | Settings
• Overview: brand info, legal info, payment accounts status
• Staff tab:
  • Employee table: name, email, role badge, status (Active/Deactivated), last login
  • Actions per employee: Edit | Change Role | Deactivate/Reactivate | Reset Password | Impersonate
  • "Add Employee" button → modal: name, email, role → sends Clerk invitation
  • Role dropdown: OWNER / MANAGER / AGENT with permission matrix tooltip
• Subscription tab:
  • Current plan, status, billing period, last payment, next renewal
  • Invoice history table
  • Override controls: force status, change plan, mark invoice paid, add free period
• Activity tab: recent reservations, offers, audit events for this company

/admin/renters — Renter Accounts

• Search by name, email, phone
• Filter: blocked / unblocked
• Table: name, email, phone, joined, reservation count, blocked badge
• Actions: View | Block/Unblock

/admin/metrics — Platform Analytics

• MRR trend chart
• New companies per week
• Subscription breakdown by plan (donut chart)
• Marketplace: impressions, bookings, top companies
• Notification delivery rates per channel

/admin/users — Admin User Management (SUPER_ADMIN only)

• List of admin accounts: name, email, role, 2FA status, last login
• Create admin: name, email, role → password emailed
• Edit role | Deactivate | View audit trail

/admin/audit-logs — Audit Log

• Searchable, filterable (by admin, action, company, date range)
• Columns: Timestamp, Admin, Action, Target, Before/After (expandable), IP, Note
• Export CSV button

/admin/settings — Admin Panel Settings

• Admin account: update own name, email, password
• 2FA: setup QR code, verify, enable/disable