carmanagement/docs/project-design/PAGES.md

# Pages Specification — RentalDriveGo

---

## LAYER 1A — Marketing Site (RentalDriveGo.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 RentalDriveGo 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 (RentalDriveGo.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}.RentalDriveGo.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 RentalDriveGo marketplace (RentalDriveGo-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}.RentalDriveGo.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}.RentalDriveGo.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.RentalDriveGo.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].RentalDriveGo.com" + "Your vehicles are now visible on RentalDriveGo.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}.RentalDriveGo.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 RentalDriveGo" (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 RentalDriveGo 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.RentalDriveGo.com — internal)

> Separate app from the company dashboard. Own auth (JWT + TOTP 2FA). Only RentalDriveGo 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