add first files

project_design/PAGES.md

@@ -0,0 +1,316 @@
+# 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