docs: add supplier modal wizard redesign spec

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

@@ -0,0 +1,84 @@
+# 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.