Phase 2 (P0 Core) — Designer Guide
This document outlines the required UI screens, their routes, and the key features the designer needs to accommodate for the Phase 2 Core (B1, B2, B3, S3) rollout of the Esendel B2B Platform.
🧑💼 BUYER SCREENS
B1 — Product Discovery & Listing
The endless aisle shopping experience for buyers (cafes, restaurants, etc.).
Screens Required:
- Product Listing Page
- Route:
[Domain]/buyer/shop - File:
app/buyer/shop/page.tsx - Designer Needs to Account For:
- Grid and List toggle views.
- Sidebar/Top navigation for Categories & Subcategories.
- Global search bar (by name, SKU, keyword).
- Advanced filtering side-pane (price slider, brand checkboxes, halal/organic cert badges, delivery time).
- Route:
- Product Detail Page (PDP)
- Route:
[Domain]/buyer/shop/[sku-or-id] - File:
app/buyer/shop/[id]/page.tsx - Designer Needs to Account For:
- PCNA-style layout (highly dense B2B view).
- Image gallery with zoom and thumbnails.
- Detailed specs table (ingredients, allergens, shelf life).
- Pricing Band Table: Live pricing by quantity (e.g., 1-11 units: AED 48; 12-49: AED 44).
- Stock availability badge (In Stock / Low / Out of Stock).
- Minimum Order Quantity (MOQ) indicator.
- Route:
B2 — Cart & Checkout
The B2B shopping cart and conversion flow.
Screens Required:
- Cart Review Page
- Route:
[Domain]/buyer/cart - File:
app/buyer/cart/page.tsx - Designer Needs to Account For:
- Line items with quantity adjusters, unit price, and subtotal.
- Inline warnings for MOQ or stock validation errors ("Only 5 left in stock").
- Ability to name the cart (e.g., "Weekly Restock").
- Promo/Coupon code input box.
- Route:
- Checkout Page
- Route:
[Domain]/buyer/checkout - File:
app/buyer/checkout/page.tsx - Designer Needs to Account For:
- Delivery address selector (cards for saved addresses + "Add New" button).
- Delivery Date & Time Slot calendar picker.
- Pre-approved Payment Terms selector (e.g., Radio buttons for COD, Net 7, Net 14, Net 30).
- Order Summary pane (subtotal, taxes, delivery, total).
- Credit limit warning (if the order exceeds their assigned credit limit).
- Route:
- Order Success Page
- Route:
[Domain]/buyer/checkout/success - File:
app/buyer/checkout/success/page.tsx - Designer Needs to Account For:
- Success illustration.
- Order Confirmation Number.
- Quick link to "View Order Status" or "Download Invoice".
- Route:
B3 — Order Tracking
Where buyers monitor their ongoing and past shipments.
Screens Required:
- Order History List
- Route:
[Domain]/buyer/orders - File:
app/buyer/orders/page.tsx - Designer Needs to Account For:
- Data table or rich list view.
- Status pills/badges (Confirmed, Processing, Dispatched, Delivered, Cancelled).
- Filters by date range or status.
- A prominent "One-Click Reorder" button next to past orders.
- Route:
- Order Details Page
- Route:
[Domain]/buyer/orders/[order-id] - File:
app/buyer/orders/[id]/page.tsx - Designer Needs to Account For:
- Visual timeline tracker (Real-time status: Processing ➡️ Dispatched ➡️ Delivered).
- Detailed line-item breakdown with pricing.
- Delivery info panel.
- Optional: GPS driver location map placeholder.
- "Cancel Order" button (only visible if pre-dispatch).
- Route:
- Return Request Modal/Page
- Route:
[Domain]/buyer/orders/[order-id]/return - File:
app/buyer/orders/[id]/return/page.tsx - Designer Needs to Account For:
- Form to select which specific line items to return.
- Dropdown for "Return Reason" (Damaged, Wrong Item, Expired).
- Image upload drag-and-drop zone (for proof of damage).
- Route:
🛒 SELLER SCREENS
S3 — Core Seller Order Management
The operations dashboard for suppliers accepting and fulfilling orders.
Screens Required:
- Incoming Orders Inbox
- Route:
[Domain]/seller/orders - File:
app/seller/orders/page.tsx - Designer Needs to Account For:
- High-density table view of New, Processing, and Dispatched POs (Purchase Orders).
- Bulk action checkboxes (to accept/process multiple orders at once).
- Immediate visibility into Buyer Name, Total Value, and Requested Delivery Date.
- Route:
- Seller Order Detail View
- Route:
[Domain]/seller/orders/[order-id] - File:
app/seller/orders/[id]/page.tsx - Designer Needs to Account For:
- Buyer profile snippet (Name, Address, Contact).
- Itemized list with requested quantities.
- Action Buttons: Large "Accept Order" and "Reject Order" buttons.
- If "Reject Order" is clicked, a required modal/textarea must pop up asking for the written reason.
- Status Advancer: A dropdown or stepper to manually advance the order (Processing ➡️ Ready for Dispatch ➡️ Dispatched).
- Ability to generate/print a PDF Packing Slip.
- Route:
UI/UX Cross-Cutting Requirements
- Status Badges: Consistent coloring schema (e.g., Green = Delivered/Accepted, Yellow = Processing/Pending, Red = Rejected/Cancelled).
- Cart Icon: A global cart icon in the header with a numerical badge that updates dynamically.
- Mobile Responsiveness: Buyers in kitchens and sellers in warehouses will heavily use iPads and mobile devices. Tables should be scrollable or collapse into card views on smaller screens.