Auto Virtual Tryon Frontend

Standalone Next.js admin frontend for the virtual try-on workflow.

UI Direction

• Shared admin shell uses a compact dense-console layout instead of wide hero-card framing.
• orders, reviews, and workflows prioritize toolbar + table + detail patterns for desktop operators.
• Review detail keeps image inspection on the left and grouped decision actions on the right.

Requirements

• Node.js 20+
• npm 10+
• Optional local backend at /Volumes/DockCase/codes/auto-virtual-tryon

Local Setup

1. Install dependencies:

npm install

2. Create .env.local:

BACKEND_BASE_URL=http://127.0.0.1:8000/api/v1

3. Start the frontend:

npm run dev

Open http://localhost:3000.

One-Click Local Stack

If the sibling backend exists at /Volumes/DockCase/codes/auto-virtual-tryon, you can start the full local integration stack from this repo:

npm run stack:start

This command starts:

• Temporal dev server on 127.0.0.1:7233
• FastAPI on 127.0.0.1:8000
• backend worker process
• Next.js dev server on 127.0.0.1:3000

The stack writes PID and log files under .dev-stack/.

Useful helpers:

• npm run stack:status
• npm run stack:logs
• npm run stack:stop

Optional log filters:

• SERVICE=frontend npm run stack:logs
• LINES=120 npm run stack:logs

If temporal is not installed globally, the stack script also checks the SDK-downloaded CLI binary under your temp directory. If neither exists, install Temporal CLI first or run the backend tests once to warm that cache.

Verification Commands

• npm run test
• npm run lint
• npm run typecheck
• npm run typecheck:clean
• npm run build
• npm run verify

npm run verify now clears .next/dev before type-checking, so stale Next dev validator output does not poison local verification.

Route Scope

Real integration pages:

• /submit-workbench
• /reviews/workbench
• /orders/[orderId]
• /workflows/[orderId]

Placeholder or transitional pages:

• /libraries/models
• /libraries/scenes
• /libraries/garments
• /settings
• /login

Backend Notes

The frontend assumes the current FastAPI backend exposes:

• POST /api/v1/orders
• GET /api/v1/orders/{orderId}
• GET /api/v1/orders/{orderId}/assets
• GET /api/v1/orders/{orderId}/revisions
• GET /api/v1/reviews/pending
• POST /api/v1/reviews/{orderId}/submit
• POST /api/v1/reviews/{orderId}/confirm-revision
• GET /api/v1/workflows/{orderId}

Manual Integration Notes

• Without the one-click stack, FastAPI can still be started manually with uvicorn app.main:app --reload in /Volumes/DockCase/codes/auto-virtual-tryon.
• GET /healthz and GET /api/v1/reviews/pending work once the backend dependencies are installed and the local DB has been migrated with alembic upgrade head.
• Order creation still depends on a Temporal server at 127.0.0.1:7233 plus the backend worker process. If those are not running, POST /api/v1/orders returns a Temporal connection error and the frontend surfaces that backend failure honestly.