initial commit

2026-07-12 10:17:17 -04:00
commit dab5a4ebc6
1424 changed files with 330463 additions and 0 deletions
@@ -0,0 +1,37 @@
+# ShopProQuote UX Conventions
+
+## Modal behavior — NEVER close on outside click
+
+User preference: modals should ONLY close via explicit Save/Close/Cancel buttons. Clicking the backdrop (outside the modal) must NOT dismiss the modal.
+
+### Files that had click-outside-to-close handlers (all removed):
+
+| File | Modal | Was |
+|---|---|---|
+| `quote-tab-manager.js:1379` | Service edit modal | `modal.classList.add('hidden')` on `e.target === modal` |
+| `quote-tab-manager.js:1680` | Parts availability modal | `closeModal()` on `e.target === modal` |
+| `shared/customer-lookup.js:253` | Customer lookup modal | `modal.remove()` on `e.target === modal` |
+| `settings.js:315` | Site settings modal | `closeModal()` on `e.target === modal` |
+| `shared/modal-manager.js:328` | Confirm dialog overlay | `overlay.remove(); resolve(false)` on `e.target === overlay` |
+
+### Pattern to recognize
+
+Any `modal.addEventListener('click', (e) => { if (e.target === modal) { ... } });` blocks must be removed. If adding a new modal, do NOT add an outside-click handler.
+
+### What was NOT changed (correctly)
+
+Dropdown menus (service search, customer search, header menus) still close on outside click. This is expected UX for dropdowns — the rule only applies to modal dialogs.
+
+## Toggle checkboxes — always show the icon
+
+Approval/decline checkboxes (green ✓ and red ✕ in the ServiceRow) must always render their SVG icon, not conditionally. When inactive the icon is grayed-out (`text-gray-300`), when active the icon is white on a colored background (`text-white` on `bg-green-600` or `bg-red-600`).
+
+**Pattern:**
+```tsx
+// ✓ — always visible, gray when inactive, white when active
+<button className={`... ${active ? 'bg-green-600 border-green-600 text-white' : 'border-gray-300 text-gray-300'}`}>
+  <svg>...</svg>  // always rendered, never conditional
+</button>
+```
+
+Do NOT wrap the SVG in `{active && <svg>...</svg>}` — the icon should always be visible as a preview of the action.