Equipment Balkans — Design vs Website Audit

The complete portal, screen by screen. Every screen below is live in the design prototype. Click any screenshot or "See it live" to open that exact screen in EB Auction Platform.html. Gated flows (checkout, account, payments, status bar) need a session — sign in with any email + password; a demo "won" lot and message are pre-seeded so every path is reachable. Toggle light/dark from the sun/moon in the header.

01 Browse & Buy

Home / Auction Browse

Hero, live filters and image-led lot cards. Entry point to every live and upcoming auction.

▶ See it live

Auction Detail

Gallery / video, EB Certified Inspection panel, live bid rail with countdown and bid history.

▶ See it live

Inspection Report

152-point report modal with per-component star ratings and photos. Open it from a lot's inspection panel.

▶ See it live

Marketplace

Fixed-price listings grid — the always-on sales channel alongside time-boxed auctions.

▶ See it live

Categories

Category index that deep-links into filtered auction results.

▶ See it live

Browse — Dark Theme

Same browse screen in the default dark palette, with the status bar. Toggle from the header sun/moon.

▶ See it live

02 Sell

Two Ways to Sell

The choice screen — Auction vs Marketplace — leading into the unified listing wizard.

▶ See it live

06b

Listing Wizard

Equipment → details → media → pricing. Auction or fixed-price, with cross-listing after publish.

▶ See it live

03 Bidding, Trust & Payments

Bid Gate — Add a Card

Bidding on a high-value lot requires a card on file. Sign in, then place a bid to trigger the gate.

▶ See it live

Pre-Authorization Hold

Bids at/above the threshold place a refundable 10% hold — released automatically if you lose.

▶ See it live

Checkout — Escrow

Card (escrow) or wire, buyer's premium, warranty and transport line items, plus the escrow timeline.

▶ See it live

Status / Attention Bar

Site-wide bar with won-lot countdown, "Pay now", outbid alerts and a multi-alert cycler. Visible once signed in.

▶ See it live

Account → Payments

Card on file, active pre-auth holds and escrow transactions with their state.

▶ See it live

04 Account & Reputation

Account Management

Profile, billing & collection addresses, business / VAT details and the verification center.

▶ See it live

Seller Trust Profile

Reputation tier, DSR sub-scores, equipment-trust signals and verified-transaction reviews.

▶ See it live

Seller Sales Dashboard

Orders, fulfilment status, net earnings and rate-your-buyer — the seller side of every transaction.

▶ See it live

05 Messaging

Messages

Buyer↔seller conversations — list + chat thread, lot context, "View lot" deep link and live send. Reached from the bell or account menu.

▶ See it live

06 Services

Services Overview

The inspection → guarantee → warranty pipeline plus the full service line (8 services).

▶ See it live

Service Detail

Per-service page — here, the 90-Day Guarantee with buyer/seller perspectives and the holdback flow.

▶ See it live

07 Access

Password or magic-link auth (styling parity reference; live auth is WorkOS). Any email works in the prototype.

▶ See it live

Every workflow, end to end. Three perspectives — Buyer, Seller/Lister, and Manager/Operator. Each step deep-links into the live prototype so you can walk the whole experience from sign-up to sign-out, including messaging and the escrow checkout. Buyer & Seller run inside the storefront prototype; Manager steps run in the separate Vendor and Admin portals (Mercur panels — shape documented in the handoff). Sign in with any email; a demo "won" lot, a seeded conversation and seller sales are pre-loaded.

🛒

Buyer

Discover a machine, bid with a card on file, win, pay into escrow and confirm delivery.

1
Sign up
Create an account (email + password, Google or Microsoft).
▶ Sign up
2
Browse auctions
Filter live, upcoming and ended lots; search by make or model.
▶ Browse
3
Inspect a lot
Open a lot, review specs and the EB Certified 152-point inspection report.
▶ Open lot
4
Add a card to bid
A card on file is required to bid on high-value lots. Place a bid to trigger the gate.
▶ Bid gate
5
Place a bid (pre-auth hold)
Bids at/above the threshold place a refundable 10% hold; released if you lose.
▶ Place bid
6
Message the seller
Ask about inspection, collection or history in the conversation thread.
▶ Messages
7
Outbid & win alerts
The status bar surfaces outbid, winning and won alerts with deep-linked CTAs.
▶ Status bar
8
Win the lot
See your won lots and the 24-hour payment countdown under My Bids.
▶ My Bids
9
Checkout via escrow
Pay by card (escrow) or wire, add an extended warranty and transport.
▶ Checkout
10
Track escrow & confirm delivery
Watch the escrow state and release funds once the machine is delivered.
▶ Payments
11
Rate the seller
Leave a verified-transaction review with DSR sub-scores.
▶ My Bids
12
Sign out
From the account menu — the status bar clears.
▶ Account menu

🏷️

Seller / Lister

List a machine to auction or marketplace, field questions, fulfil the sale and get paid.

1
Sign up
Create a seller account; dealers can complete business / VAT verification.
▶ Sign up
2
Choose how to sell
Two doors — Auction (time-boxed) or Marketplace (fixed price).
▶ Two ways to sell
3
Run the listing wizard
Equipment → details → media → pricing. Set reserve, increments, anti-snipe.
▶ Auction wizard
4
Cross-list to marketplace
Reuse the same media and specs to also list at a fixed price.
▶ Marketplace wizard
5
Manage live listings
Track your auctions and listings with linked-channel chips.
▶ My Auctions
6
Answer buyer questions
Respond in the message thread and link the relevant lot.
▶ Messages
7
Receive the sale
Orders, in-escrow, to-action and net earnings on the Sales dashboard.
▶ Sales
8
Fulfil & confirm handover
Mark dispatched and confirm handover to move the order to completed.
▶ Fulfilment
9
Get paid (escrow release)
90% on settlement, with a 10% indemnity held for the 90-day guarantee, then released.
▶ Payments
10
Rate the buyer & respond to reviews
Two-way reputation — rate buyers and reply to the reviews you receive.
▶ Reviews

🛠️

Manager / Operator

Run the storefront and the platform from the two operator portals. These are separate Mercur apps (Vendor & Admin) — shape and gaps are detailed in the handoff doc.

1
Store setup & onboarding
Vendor signs up, sets store profile, payout details and KYC.
Vendor portal
2
Seller approval & verification
Operator reviews dealer applications, verifies business/VAT, approves stores.
Admin portal
3
Products / listings management
Vendor manages inventory & listings; operator moderates and curates categories.
Vendor portal
4
Orders & fulfilment oversight
Vendor fulfils their orders; operator oversees all orders, disputes and escrow states. In-prototype seller view:
▶ Seller sales
5
Commissions & payouts
Operator sets commission rules and runs vendor payouts; vendor tracks earnings.
Admin portal
6
Reviews & trust moderation
Operator handles flagged reviews and trust signals; vendor responds to feedback.
Admin portal
7
Services & inspection ops
Assign inspectors, author 152-point reports, manage warranty & service requests.
Admin portal+ Vendor
8
Platform configuration
Business constants — fee rates, thresholds, escrow rules, custom fields.
Admin portal

Audit Summary

Features Complete 4 / 10

Partially Implemented 2 / 10

Not Started 4 / 10

Total Effort ~7,500 LOC

✅ What's Working (Faithfully Implemented)

The live website has a solid foundation with core marketplace and auction functionality:

✓ Homepage (hero, stats, category grid, latest listings)
✓ Marketplace (browse, search, filter, listing detail)
✓ Auctions (browse, bid, bid history, countdown)
✓ Categories (grid view, linked to browse)
✓ Auth (WorkOS login/signup, session, redirect)
✓ Account Dashboard (user info, saved items, activity)
✓ Seller Profiles (public profiles with reviews)
✓ Design Tokens (dark palette, typography, spacing)
✓ Responsive Layout (grid breakpoints, mobile nav)
✓ Realtime Infrastructure (Ably integration, notifications bell)

❌ What's Missing (Design Spec Gaps)

Six major feature areas from the design handoff are not yet implemented:

✗ F1: Light theme toggle (design complete)
✗ F2: Two-door selling (auction + marketplace wizard)
✗ F3: Buyer trust & payments (card-on-file, pre-auth, escrow)
✗ F4: Status/attention bar (alert cycling, deep links)
✗ F5: Account management overhaul (profile, addresses, trust tiers)
✗ F6: Services layer (inspection, warranty, transport, etc.)

▶ Each feature is built and working in the design prototype. Click "See it live" to open that screen in EB Auction Platform.html. Gated flows (payments, account, status bar) need a session — sign in with any email + password to unlock them; a demo "won" lot and message are pre-seeded. These features exist in the design but are still missing or partial in the deployed website codebase.

F1: Light Theme Toggle

▶ See it live

Missing in website

Sun/moon header toggle, persistent preference, theme-aware logo swap

✅ Design Spec

• Light + dark palette (CSS vars) • Header toggle (sun/moon icon) • Persistent (cookie/localStorage) • Logo swap (dark-ink / light-ink variants) • Available in both apps

❌ Current State

• Dark mode only • No theme toggle UI • No light tokens in globals.css • No logo variants

SCOPE

Light theme CSS (add `[data-theme="light"]` block to globals.css), theme toggle component in header, persistence logic, logo variant source files.

~200 lines | ~2–3 days | Low risk

F2: Two-Door Selling & Cross-Listing

▶ See it live

Missing in website

Choice screen (Auction vs Marketplace) → unified wizard → shared media → cross-list after publish

✅ Design Spec

• "Two ways to sell" choice screen • Unified wizard (Equipment → Details → Media → Pricing) • Pricing diverges (auction terms OR fixed price) • Cross-list CTA after publish • Linked-channel chips in account • Shared `groupId` + media

❌ Current State

• Only `/post-an-ad` exists (marketplace only) • No auction creation UI • No choice screen • No cross-listing • No linked-channel display

SCOPE

Choice screen UI, wizard refactor, auction pricing mode, `group_id` schema, cross-list CTA, account tab updates, API endpoints for auction creation.

~1,500 LOC | ~1 week | Medium risk (schema change)

F3: Buyer Trust & Payments

▶ See it live

Missing in website

Card-on-file requirement, pre-authorization holds (≥€500), escrow checkout, 24h payment window

✅ Design Spec

• Card-on-file (Stripe SetupIntent) • Pre-auth hold (10% for ≥€500) • Bid gating (card + hold check) • Escrow states (awaiting → captured → released) • Checkout tabs (Card / Wire) • 24h payment deadline + countdown • Escrow delivery confirmation

❌ Current State

• No card-on-file capture • Bids accepted unconditionally • No holds / pre-authorization • No escrow concept • No checkout flow • No payment deadline tracking

SCOPE

Stripe integration (SetupIntent, PaymentIntent, holds), payment method schema, bid eligibility enforcement, checkout UI/flow, escrow state machine, delivery confirmation, 24h timer in status bar.

~2,000 LOC | ~2 weeks | High risk (payment critical)

F4: Status/Attention Bar

▶ See it live

Partial in website

Non-dismissable bar under header (logged-in) with alert cycling, deep-linked CTAs, 24h countdown

✅ Design Spec

• Persistent bar (below header) • Alert types: won, outbid, message, winning, action • Alert cycling (‹ 1/2 ›) • Priority sort • Deep links to items/checkout • 24h countdown timer (won lot) • "View all" → activity hub

⚠️ Current State

• NotificationBell exists (dropdown) • No persistent bar under header • No alert cycling • No deep-linked CTAs • No countdown display

SCOPE

Bar component, Ably alert subscription, alert type enums, priority sorting, deep linking, countdown timer, render logic for alert states.

~600 LOC | ~4–5 days | Low-medium risk

F5: Account Management & Dual-Sided Reputation

▶ See it live

Partial in website

Profile management, trust tiers (New→Platinum), DSR sub-scores, equipment-specific signals, buyer reviews

✅ Design Spec

• Profile tab (personal, addresses, business, verification) • Reputation tiers (composited from metrics) • DSR sub-scores (described, communication, handover, documentation) • Equipment signals (% inspected, on-time %, warranty %) • Buyer + seller reviews (verified-transaction) • Public profiles (buyer + seller) • Badge system (Verified, Top Rated, etc.)

⚠️ Current State

• Account dashboard skeleton exists • Seller reviews exist (basic) • No buyer reviews • No DSR scores • No tier system • No collection address / business UI • No public buyer profile

SCOPE

Profile tab UI, buyer review schema, DSR aggregation queries, tier computation, equipment signal queries, public buyer profile, badge system, extended seller profile.

~1,200 LOC | ~1 week | Medium risk

F6: Services Layer (Differentiator)

▶ See it live

Missing in website

8 service detail pages, inspection reports, warranty selection, transport, financing, title/export, valuation, maintenance

✅ Design Spec

• `/services` overview page • 8 detail pages (Inspection, Guarantee, Warranty, Transport, Financing, Title, Valuation, Maintenance) • Auto-inspection for lots ≥€25,000 • 152-point inspection report • 90-day guarantee (included €0) • Extended warranty (1y +4% / 2y +7%) • Service request flow

❌ Current State

• No services infrastructure • No inspection concept • No guarantee / warranty • No service pages • Raw Materials page exists but unrelated

SCOPE

8 page templates, inspection schema + authoring flow, warranty selection at checkout, service request endpoints, inspector admin panel, inspection report UI.

~2,000 LOC | ~2 weeks | Medium risk

Feature Implementation Status

Feature	Design Status	Website Status	Impl. Status	Effort (LOC)	Timeline	Risk	Priority
F1 Light Theme	✅ Complete	❌ None	Missing	~200	2–3 days	Low	Medium
F2 Two-Door Selling	✅ Complete	⚠️ Marketplace only	Partial	~1,500	1 week	Medium	High
F3 Buyer Trust & Payments	✅ Complete	❌ None	Missing	~2,000	2 weeks	High	High
F4 Status Bar	✅ Complete	⚠️ Bell exists	Partial	~600	4–5 days	Low–Med	Medium
F5 Account Mgmt & Reputation	✅ Complete	⚠️ Skeleton	Partial	~1,200	1 week	Medium	High
F6 Services Layer	✅ Complete	❌ None	Missing	~2,000	2 weeks	Medium	High
TOTAL			—	~7,500	4–6 weeks	—	—

Recommended Build Phases

Phase 1: MVP Parity (Weeks 1–2)

Quick wins to reach feature parity with design spec core functionality

1. Light Theme

→ Add light CSS tokens to globals.css
→ Header theme toggle (sun/moon)
→ Persist preference
→ Logo variants

2. Two-Door Selling Wizard

→ Choice screen UI ("Auction or Marketplace")
→ Refactor post-an-ad into unified wizard
→ Add auction pricing step
→ API endpoint for auction creation

3. Profile Tab

→ Account → Profile tab UI
→ Personal info, billing address, collection address
→ Business/VAT fields (link to dealer-onboarding)
→ Verification center stub

PHASE 1 TOTAL

~1,900 LOC | 10–12 days | Team of 2–3 | Highest user-facing impact

Phase 2: Trust & Commerce (Weeks 3–4)

Payment infrastructure and buyer/seller protection mechanisms

4. Buyer Trust & Payments

→ Stripe integration (SetupIntent, PaymentIntent)
→ Card-on-file modal in bid panel
→ Pre-authorization hold (10% for ≥€500)
→ Bid eligibility enforcement
→ Schema: payment_method, bid_authorization tables

5. Checkout Flow

→ `/checkout?mode=won|buy` page
→ Method tabs (Card Escrow / Wire)
→ Line items (warranty, transport add-ons)
→ Escrow state timeline

6. Status Bar

→ Bar component (below header)
→ Ably alert subscription
→ Alert cycling + priority sort
→ 24h countdown timer (won lot)
→ Deep linking to items/checkout

PHASE 2 TOTAL

~2,600 LOC | 2–3 weeks | Team of 2–3 | Critical for commerce flow

Phase 3: Differentiation (Weeks 5–6)

Services infrastructure and advanced reputation system

7. Account Reputation Overhaul

→ Buyer review schema + UI
→ DSR sub-scores (described, communication, handover, documentation)
→ Tier computation (New → Bronze → Silver → Gold → Platinum)
→ Equipment-trust signals (inspection %, on-time %)
→ Public buyer profile page
→ Badge system

8. Services Pages

→ `/services` overview (pipeline + 8 cards)
→ 8 detail pages (Inspection, Guarantee, Warranty, Transport, Financing, Title, Valuation, Maintenance)
→ Inspection panel on lot detail
→ Inspection schema + admin flow
→ Service request endpoints
→ Warranty selection at checkout

PHASE 3 TOTAL

~3,200 LOC | 2–3 weeks | Team of 2–3 | Competitive differentiator

Critical Path & Dependencies

→ Phase 1 is prerequisite for Phase 2: Two-door selling wizard gates auction creation, which is needed for payment auth flow
→ Stripe setup must precede any checkout: Get credentials, set up webhook handling, test holds/captures in sandbox
→ Services pages can run in parallel: Low dependency on payment infrastructure (except warranty checkout add-on)
→ Database migrations: Plan schema changes early to avoid migration jams (group_id, payment_method, inspection, etc.)

File-by-File Implementation Map

✅ Fully Implemented (No Changes)

apps/website/src/app/page.tsx — Homepage
apps/website/src/app/marketplace/page.tsx — Marketplace browse
apps/website/src/app/listings/[id]/page.tsx — Listing detail
apps/auction/src/app/auctions/page.tsx — Auction browse
apps/auction/src/app/auctions/[id]/page.tsx — Auction detail + bid panel
apps/website/src/app/account/page.tsx — Account dashboard skeleton
apps/website/src/components/Header.tsx — Navigation
apps/website/src/components/Footer.tsx — Footer
apps/website/src/app/login/page.tsx — Auth screens
apps/website/src/app/profile/[slug]/page.tsx — Seller profile

⚠️ Needs Extension (Add to Existing)

apps/website/src/app/globals.css — Add light theme tokens + new vars (--header-bg, --media-bg, --veil, --shadow-card, --shadow-hover)
apps/website/src/components/Header.tsx — Add theme toggle (sun/moon + persist)
apps/website/src/app/account/page.tsx — Add `profile` tab (personal, addresses, business, verification)
apps/website/src/app/listings/[id]/page.tsx — Add seller trust panel (DSR, equipment signals)
apps/auction/src/app/auctions/[id]/page.tsx — Add inspection panel + extend bid panel with card/pre-auth gates
Both app layouts — Add status bar component under header

❌ Needs New Implementation

apps/website/src/app/post-an-ad/page.tsx — Refactor to two-door choice + wizard
apps/website/src/app/post-an-ad/sell-flow/page.tsx — New: Auction mode
apps/auction/src/app/auctions/create/page.tsx — New: Auction creation
apps/website/src/app/account/payments/page.tsx — New: Card, holds, escrow management
apps/website/src/app/checkout/page.tsx — New: Payment method, warranty, escrow
apps/website/src/app/services/page.tsx — New: Services overview
apps/website/src/app/services/[id]/page.tsx — New: 8 service detail pages
apps/website/src/app/categories/page.tsx — New: Categories grid
apps/website/src/app/about/page.tsx — New: About page
apps/website/src/components/StatusBar.tsx — New: Alert bar
apps/website/src/components/BidGateModal.tsx — New: Card + pre-auth
apps/website/src/components/CheckoutForm.tsx — New: Payment form
apps/auction/src/components/InspectionPanel.tsx — New: Inspection report
API routes + DB migrations — Payment, authorization, inspection, escrow

⚙️ Equipment Balkans — Portal Walkthrough

Audit Summary

Feature Implementation Status

Recommended Build Phases

File-by-File Implementation Map