MiknasTrading/docs/superpowers/specs/2026-05-25-supplier-modal-wizard-design.md

Supplier Select Modal — Two-Step Wizard Redesign

Date: 2026-05-25 Status: Approved

---

Problem

The current supplier-select-modal has two tabs — "Full Order" and "By Item" — that are mutually exclusive: selecting suppliers in one mode makes the other irrelevant. But the tab UI implies they are equal parallel options, causing confusion. There is no enforcement preventing a user from switching tabs mid-flow with selections already made.

---

Solution

Replace the tab bar with a two-step wizard flow:

1. Step 1 — Choose Method: The modal opens on a method-selection screen with two large clickable cards. No tabs. No supplier list yet.
2. Step 2 — Select Suppliers: Clicking a card transitions into that mode's supplier selection UI (the existing Full Order list or By Item per-item dropdowns, structurally unchanged).

Going back always clears selections (fresh start — no preserved state per mode).

---

Step 1: Method Selection Screen

Header:

• Title: "Request for Quotation"
• Subtitle: "How do you want to assign suppliers?"
• Close (×) button

Body — two clickable cards (full-width, stacked vertically):

Card	Icon	Title	Subtitle
Full Order	📦	Full Order	One set of suppliers handles the entire purchase request
By Item	🔀	By Item	Assign different suppliers to specific items in this request

Each card has a right-pointing chevron (›). On hover: border turns blue, background tints to #f8fbff. Clicking immediately transitions to Step 2 — no confirmation needed.

Footer: Cancel button only (no Save & Continue on Step 1).

---

Step 2: Supplier Selection Screen

Header (replaces tab bar entirely):

• Top row: "← Change method" link (blue, with left chevron) · mode badge (e.g. 📦 Full Order in blue pill or 🔀 By Item in green pill)
• Below: Title "Select Suppliers", subtitle "Choose who receives the quote request"

Clicking "← Change method" returns to Step 1 and clears all current selections (checkboxes unchecked, channel inputs reset).

Body: Identical to the existing Full Order pane or By Item pane depending on the chosen mode. No structural changes to the selection UI itself.

Footer: Same as current — count label left, Cancel + "Save & Continue →" right.

---

State & Form Submission

• The hidden <input name="mode"> continues to drive the server-side logic (global vs by_item).
• On "← Change method": all checkboxes are unchecked programmatically, channel inputs reset to email, mode input cleared, then transition back to Step 1.
• Form submission logic (submitSuppliers()) is unchanged.

---

What Does NOT Change

• The supplier list rendering (search, checkboxes, channel toggles, "Added" badges)
• The By Item per-item dropdown panels
• The per-supplier channel section in By Item mode
• Form action, method, CSRF, field names
• openSupplierModal() / closeSupplierModal() entry points used by the parent view
• The pipe-modal CSS class and backdrop behaviour

---

Files Affected

File	Change
resources/views/components/purchase/supplier-select-modal.blade.php	Replace tab bar with Step 1 method-selection HTML; add mode badge + back link to Step 2 header; add showStep() / goBack() JS functions

No controller, route, or migration changes required.