UI PREVIEW Design Review v2

AMR Product Catalog System

Interactive mockups for product owner review

At Home Remodel & Repair · Redesign · v2.0

What's Changing

Before (current system):
  • Admin picks products for client
  • Client only approves/rejects what admin chose
  • Limited flexibility, manual work-heavy
After (new catalog system):
  • Admin enables categories/products for client
  • Client browses and selects themselves
  • Live budget calculator, audit trail, re-enable flow
ADMIN SIDE

Edit Project Product Catalog Tab

Admin configures which categories and products are enabled. Accordion layout with toggles. Switch between "Edit existing" and "Create new" project views.

  • Accordion by category (closed by default for new, open for enabled)
  • Enable All / Disable All / Expand All / Collapse All
  • Working search (categories + products)
  • Client status card (pending/completed per category)
  • Image hover zoom popup
  • Re-enable + category warning modals (with reason)
  • Product Trail (renamed from Audit Log)
CLIENT SIDE

Product Catalog Browse + Select

Full catalog. Select a project from dropdown to enable items. Floating calculator that stays with you as you scroll.

  • Project dropdown for multi-project clients
  • Floating calculator (fixed right, scrolls with you)
  • Working search products, brands, models
  • Image hover zoom popup
  • "SELECTED" in green, "CANCELLED" in red
  • Pending categories warning at submit
  • Full trail: Pending + Selected + Cancelled

How to Test

Admin Side:
  1. Top banner → switch between "Edit existing" and "Create new"
  2. Try accordion expand/collapse, Enable All / Collapse All buttons
  3. Try disabling an enabled category that has selections → reason modal
  4. Click "Re-enable" on a locked product
  5. Type in search box → filters categories + products
  6. Hover any product image → floating zoom popup
  7. Click "View Product Trail" on cancelled alert
Client Side:
  1. Default: browse mode, no add buttons
  2. Select "Kitchen Renovation" → items selectable
  3. Try "Berwick Rd" → already submitted (locked, with pending category warning)
  4. Click products → add to floating calculator on right
  5. Scroll down → calculator stays visible
  6. Enter budget → see over/under feedback
  7. Type in search → filters products across all categories
  8. Hover images → zoom popup
  9. Click Submit → modal with pending category warning
Note: This is a visual mockup only. Nothing is saved. Product images are dummy Images. Data structure from live PROD system.
Built for feedback & approval · Once signed off, we move to functional development