release: develop → main — sales/CRM stack with per-role lock release (backend image v2026-10-22, V193–V199.1)

.agents/skills/ui-revamp/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: ui-revamp
+description: Audit and fix web pages that look off — visual polish (type, layout, color, hierarchy, AI-slop removal) plus mobile-first responsive standards from 320px phones to wide desktops. Use when revising, critiquing, polishing or making any UI responsive.
+---
+
+# UI Revamp
+
+One skill for fixing pages that "don't look right" and making them work on every screen, from a 320px phone to a 1440px+ desktop. It condenses three open-source approaches into one workflow: a design-system-first reasoning pass, a command vocabulary for targeted visual fixes, and mobile-first responsive guardrails.
+
+## How to use
+
+Say what you want in plain words, or use a mode keyword followed by a target:
+
+```
+audit the pricing page
+critique landing
+fix layout on the dashboard
+typeset the blog post
+adapt checkout for mobile
+polish settings
+```
+
+With no mode named, run **audit → fix → polish** on the target.
+
+---
+
+## Step 1 — Gather context (always, before changing anything)
+
+1. **Read the existing code first.** Find the stack (React/Next, Vue, plain HTML, Tailwind or plain CSS, component library) and work inside it. Never introduce a new framework to fix a page.
+2. **Find the existing design system.** Look for tokens, a theme file, `tailwind.config`, CSS variables, `DESIGN.md`, or shared components. If one exists, it wins: extend it and don't override it. If none exists, extract one from the most-used values in the code (Step 2).
+3. **Know the product.** Who is the audience, what is the page for, and what is the one action a visitor should take? Check for `PRODUCT.md` or a README. Ask the user only when something material is missing, and ask once.
+4. **See the page.** Look at a screenshot or rendered view at 375px, 768px, 1024px and 1440px if you can. Judge the rendered result, not just the code.
+
+## Step 2 — Lock a design system (small, explicit)
+
+Write down, or confirm, a compact system before editing. If the project has none, save it as `DESIGN.md` at the project root so later pages stay consistent.
+
+- **Type:** 1–2 families at most (a display face plus a text face, or a single family). Use a modular scale, e.g. 12 / 14 / 16 / 20 / 24 / 32 / 40 / 48. Body text is never below 16px on mobile.
+- **Spacing:** a 4px or 8px base scale (4, 8, 12, 16, 24, 32, 48, 64, 96). No arbitrary values such as 13px or 27px.
+- **Color:** a primary, an accent or CTA, a neutral ramp of 5–9 steps tinted toward the brand hue (not pure gray), plus success/warning/danger. Define these as tokens or CSS variables, and a dark set if the site has dark mode.
+- **Radius and shadow:** 2–3 radius values and 2–3 elevation levels, used consistently.
+- **Style direction:** one named direction that fits the product (e.g. calm and minimal for finance or health, bold and editorial for creative work, dense and functional for dashboards). Industry fit matters: trust-heavy products such as banking, health and legal avoid playful or neon styles.
+
+**Page overrides:** if one page truly needs to deviate, record only the deviation in `design/pages/<page>.md`. Page rules override the master and everything else inherits.
+
+## Step 3 — Diagnose (audit + critique)
+
+Score each area **OK / Minor / Major** and list concrete findings with file and line where possible.
+
+**Visual hierarchy and clarity (critique)**
+- Is there one clear focal point and one primary CTA per view?
+- Does size, weight and color tell the reader what matters first, second and third?
+- Is the copy clear? Are labels and buttons action-oriented and free of jargon?
+
+**Technical quality (audit)**
+- Contrast is at least 4.5:1 for body text and 3:1 for large text and UI elements.
+- Focus states are visible, keyboard order is logical, and headings run in order with none skipped.
+- Images have alt text, and icon-only buttons have accessible labels.
+- Layout breaks, horizontal scroll, overflow and clipped text are checked at every breakpoint.
+- Performance: no huge images, no layout shift (reserve space for images and embeds), fonts load with `font-display: swap`.
+
+**AI-slop and generic-template tells (flag and remove)**
+- Inter or system default used for everything, with no typographic personality.
+- Purple-to-blue gradients, glowing dark-mode blobs, gradient text on every heading.
+- Cards inside cards, or every section wrapped in a card.
+- A rounded-square icon tile above every heading, and emoji used as icons (use SVG icons such as Lucide, Heroicons or Phosphor).
+- Gray text on colored backgrounds, and pure `#000` or pure gray (tint neutrals instead).
+- Side-accent borders on every card, bounce or elastic easing, everything centered.
+- Three identical feature columns with no hierarchy.
+
+## Step 4 — Fix (pick the modes the diagnosis calls for)
+
+| Mode | Fixes |
+|---|---|
+| **typeset** | Font choice and pairing, scale, weights, line height (1.4–1.6 for body, 1.1–1.25 for headings), line length (45–75 characters), heading wrapping |
+| **layout** | Spacing rhythm, alignment to a grid, grouping (related items closer, sections further apart), whitespace, density |
+| **colorize** | Strategic color: a neutral base, one accent used sparingly for actions and emphasis, and meaning that never relies on color alone |
+| **bolder** | Bland pages: stronger scale contrast, a confident hero, a real focal point, more decisive color |
+| **quieter** | Noisy pages: fewer colors, effects, borders and shadows; calmer motion |
+| **distill** | Cluttered pages: cut sections, merge duplicates, remove decoration that carries no meaning |
+| **harden** | Edge cases: long text and URLs wrap instead of clipping, empty, loading and error states exist, chips and badges wrap or collapse to "+n", the layout survives 200% zoom and translated text |
+| **clarify** | UX copy: specific headings, verb-first buttons, helpful error messages |
+| **animate** | Purposeful motion only: 150–300ms, ease-out, honors `prefers-reduced-motion`, and the final state stays correct if an animation is interrupted |
+| **adapt** | Make it responsive (see the standards below) |
+| **polish** | Final pass: align to the design system, make spacing and radius consistent, finish hover, focus and active states, run the pre-delivery checklist |
+
+Make the smallest change that fixes the problem. Reuse existing components and tokens. Keep behavior and content intact unless asked otherwise.
+
+---
+
+## Responsive standards (always on)
+
+**Mobile-first**
+- Write base styles for the smallest screen, then add larger layouts with `min-width` media queries (Tailwind: unprefixed first, then `sm:`, `md:`, `lg:`, `xl:`).
+- Always include `<meta name="viewport" content="width=device-width, initial-scale=1">`.
+
+**Breakpoints:** use the project's existing set. Default to 640 / 768 / 1024 / 1280 / 1536px, matching Tailwind. Choose breakpoints where the content breaks, not for specific devices, and never invent one-off values.
+
+**Fluid layouts**
+- Use Flexbox and Grid. Prefer `grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))` over fixed column counts.
+- Use relative units: `rem` for type and spacing, `%`, `fr`, `vw` and `ch` for widths. No fixed pixel widths on containers. Use `max-width` with `width: 100%`.
+- Constrain the content width (e.g. a max of 1200–1280px) with responsive side padding: 16px on mobile, 24–32px on tablet, 48px+ on desktop.
+- Use fluid type for headings with `clamp()`, e.g. `font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem)`.
+- Use container queries for components that appear in different-width slots.
+
+**Touch and interaction**
+- Tap targets are at least 44×44px, with at least 8px between adjacent targets.
+- Nothing depends on hover alone. Every hover reveal has a tap or focus equivalent.
+- Form inputs use 16px or larger text (prevents iOS zoom), and use the correct `type` and `inputmode`.
+- Add `cursor: pointer` to every clickable element.
+
+**Content adaptation**
+- Navigation collapses to a menu or bottom bar on mobile, and the primary CTA stays reachable.
+- Multi-column sections stack in a sensible reading order. Don't hide important content on mobile; reprioritize it instead.
+- Tables scroll horizontally inside a wrapper, or turn into stacked cards on mobile.
+- Images use `max-width: 100%; height: auto`, plus `srcset`/`sizes` or the framework's image component. Set `aspect-ratio` to prevent layout shift.
+- Respect safe areas on notched phones with `env(safe-area-inset-*)` for fixed bars.
+- Use `100dvh` instead of `100vh` for full-height mobile sections.
+
+**Test widths:** 320, 375, 768, 1024, 1440 and 1920px, in both orientations, plus 200% browser zoom.
+
+---
+
+## Pre-delivery checklist
+
+- [ ] No horizontal scroll at 320px; layout verified at 375 / 768 / 1024 / 1440
+- [ ] Text contrast is at least 4.5:1 (3:1 for large text and UI), in light and dark modes
+- [ ] Visible focus states and logical tab order
+- [ ] Tap targets are at least 44×44px; no hover-only interactions
+- [ ] Body text is at least 16px on mobile; line length is 45–75 characters
+- [ ] All spacing, color, type and radius values come from the design system
+- [ ] No AI-slop tells remain (see the list in Step 3)
+- [ ] SVG icons instead of emoji; icon buttons are labeled
+- [ ] Long text, empty, loading and error states handled
+- [ ] `prefers-reduced-motion` respected
+- [ ] Images sized and lazy-loaded, with no layout shift
+
+## Output format
+
+1. **Findings:** a short scored list (OK / Minor / Major) with the top 3–5 problems.
+2. **Changes:** what you changed and why, grouped by mode, with file references.
+3. **Before/after:** screenshots or a mockup at mobile and desktop widths when possible.
+4. **Checklist:** the pre-delivery checklist with every item ticked or explained.
+
+---
+
+*Credits: condensed and rewritten from ideas in UI UX Pro Max (nextlevelbuilder, MIT), Impeccable (Paul Bakaus, Apache-2.0) and Frontend Responsive Design Standards (am-will/codex-skills). No scripts or data files are required.*

.design/cr1-factory-contact-flow/FRONTEND_TEST_COVERAGE.md

@@ -0,0 +1,59 @@
+# CR-1 (GLA-167) frontend — test coverage list (written BEFORE implementation)
+
+All tests below were written first and run RED before any production code changed. Red = the
+assertion/lookup that fails is the missing behaviour (missing API method, missing element/label,
+wrong label), not an import or syntax error. Everything is UI/mock level: **role assertions are
+UI-level only (mockApi authz is not authoritative)** — the real enforcement is the Java integration
+tests for `FactoryQuoteService` / `LeadTimeChangeService`.
+
+## Red-run evidence (before implementation)
+
+| File | Red |
+|---|---|
+| `src/api/mockApi.factoryContact.test.js` (new, 24) | 24 failed — `api.pricingRequests.markFactoryQuoteContacted is not a function`, `api.leadTimeChanges` undefined, EUR/PER_SQM not echoed |
+| `src/features/pricingRequests/PricingRequestDetailPage.test.jsx` | 38 failed (5 rewritten old-flow tests + 33 new) — e.g. `Unable to find role=button name=สร้างเมล`, `Unable to find testid pcr-factory-terms-91`, 3s `findByTestId` timeouts for lead-time UI |
+| `src/features/pricingRequests/PricingRequestCreateModal.test.jsx` | 19 failed — 7 new + 12 existing happy-path tests that now need `สกุลเงิน (ราคาโรงงาน)` / `หน่วยราคา` (`fillRequiredFields` updated) |
+| `src/features/tickets/DealFulfilmentPanel.test.jsx` | 5 failed — label `สร้างใบ IR`, 4 auto-download assertions (`download` never called) |
+| `src/features/tickets/DealDocumentRegister.test.jsx` | 5 failed — `register-import-requests` section absent |
+| `src/api/serverContract.test.js` | 3 failed — hrApi still calls `POST /api/factory-quotes/{}/send` (removed server side); 7 new server endpoints not called; `ui-reachable.json` stale |
+| `src/features/fulfilment/ImportFulfilmentPage.test.jsx` | 1 new test **passes** before implementation (characterization of existing per-factory PDF buttons, pinned deliberately) |
+| 8 existing `mockApi.*.test.js` files | now call `markFactoryQuoteContacted` after `generateFactoryEmailDrafts` (B-R2); red with `is not a function` until the mock exists |
+
+## Test cases and what they pin
+
+### `mockApi.factoryContact.test.js` (mirrors `FactoryQuoteService#markContacted/#receive`, `LeadTimeChangeService`)
+- items echo `requestedCurrency`/`requestedPriceUnitBasis`; draft seeded from them (EUR / PER_SQM).
+- `sendFactoryQuote` is gone; `markFactoryQuoteContacted`: DRAFT→REQUESTED + date/note/by/at + request → AWAITING_FACTORY_RESPONSE; 409 on second call and recorded note unchanged (R7); 400 future / missing date; sales 403, CEO allowed (also edit draft + generate drafts, B-R1).
+- `receive`: 409 on DRAFT (B-R2); 409 on currency mismatch; 409 on unit mismatch; OK when matching; legacy line (no terms) accepts anything.
+- lead-time: create snapshots old range / PENDING / version 1; line untouched until approved; one PENDING per quote (409); validation 400 (reason, empty lines, min>max); update bumps version; withdraw frees the factory; approve (owning rep) writes new range; stale `expectedVersion` 409 changes nothing; reject needs reason; **CEO and import cannot approve/reject (B-R3)**; only import creates/updates/withdraws; list readable by import/ceo/sales/sales_manager, not account.
+
+### `PricingRequestDetailPage.test.jsx` (factory section, UI)
+- Card: chip `ยังไม่ติดต่อ`; `สร้างเมล` + `ติดต่อโรงงานแล้ว`; retired labels (`ร่างอีเมล`, `ดูอีเมล`, `ส่งแล้ว`) absent.
+- Locked terms strip `EUR · ต่อ ตร.ม. · ตามคำขอของฝ่ายขาย`; currency/unit comboboxes removed for lines with terms; legacy line keeps both selects (characterization, passes pre-impl); inputs disabled + hint `กด ติดต่อโรงงานแล้ว ก่อนกรอกราคา`; contacted chip `ติดต่อแล้ว 1 ต.ค. · <name>`, note shown, inputs unlocked, **no ติดต่อโรงงานแล้ว button and no undo (R7)**; `ยืนยันราคาแล้ว`; receive payload carries EUR/PER_SQM; CEO has no inputs/confirm/lead-time button.
+- Rewritten old tests: draft edit via `สร้างเมล`/`บันทึกร่าง`; lock hint testid `pcr-await-contact-*`; DRAFT stays locked **past the window** (B-R2 reverses #1062) with no contact button; mail modal read-only when contacted / outside window.
+- Contact dialog: date defaults to today (Bangkok) with `max`=today; confirm → `markFactoryQuoteContacted(id,{contactedOn,note})` + refetch of quotes and request (F); blank note omitted; future date → confirm disabled, nothing sent; cancel; 409 → error toast; CEO can use both buttons (R5).
+- `สร้างเมล` modal: ถึง prefilled from factory email (R8), หัวข้อ, เนื้อหา; only `บันทึกร่าง`/`คัดลอกเมล`(+ปิด); copy changes no status; close changes no status; ticked request attachments listed.
+- Lead-time (import): per-line `ระยะเวลานำเข้า`; panel with new min/max, required reason, non-stock lines pre-ticked (stock line never offered); submit sends ticked lines; unticked excluded; per-line override; min>max / empty reason blocks; pending shows `75–90 → 120–150 วัน · รอฝ่ายขายอนุมัติ`, `แก้ไข`/`ถอนคำขอ`, no second request; withdraw; edit → `update`; compact approved/rejected history with reason; **CEO read-only badge**.
+- Lead-time (deciders): owning rep / sales_manager see one banner (factory, reason, old→new) with `อนุมัติ`/`ไม่อนุมัติ`; approve sends `expectedVersion` and refreshes the request; reject needs reason then sends reason+version; **409 → `คำขอถูกแก้ไขแล้ว กรุณาตรวจสอบอีกครั้ง` + refetch**; non-owning sales / CEO / import see no decide controls; history-only → no banner.
+- IR row on the factory card (R9): `IR26001 · … · PDF` downloads, `ฉบับร่าง`, no create/issue/revise control for import, matches factory by id else name, ignores SUPERSEDED/other factories, absent when none.
+
+### `PricingRequestCreateModal.test.jsx` (F4)
+selects blank for hand-typed line; blocked with per-row errors; catalogue pick auto-fills (EUR / `per_sqm`→PER_SQM) and sales may change before submit; unknown catalogue unit leaves unit blank; hand-typed line payload; edit seeds + resends; legacy persisted line must be completed before save.
+
+### `DealFulfilmentPanel.test.jsx` / `DealDocumentRegister.test.jsx` / `ImportFulfilmentPage.test.jsx`
+`สร้างใบ IR` (+ `สร้างใบ IR โรงงานที่ยังไม่มี`) relabel; after create, PDF of **each newly created** IR downloads (existing ones skipped); failed PDF keeps the create + error toast; invalidation of stored IRs and `['tickets','list']` (characterization). Register: 5th section `ใบขอซื้อ (รายโรงงาน)`, one row per IR, `ฉบับร่าง`, SUPERSEDED hidden, PDF download, empty line, read gate (import/ceo/sales_manager/owner yes; other sales/account no and no fetch). `/fulfilment`: per-factory internal + factory PDF download pinned.
+
+### API parity
+`contract.test.js` (hrApi↔mockApi, same arity) and `serverContract.test.js` (hrApi↔springdoc, ui-reachable.json) — red now, green after the API layer change.
+
+## Deliberately NOT covered
+- **Authz correctness** (who may mark contacted / decide a lead-time change): UI conditionals only; real enforcement = Java integration tests. Mock authz is approximate and not evidence.
+- Visual layout / 375px: not unit-testable here; listed for manual browser verification in the handoff. The mock-frontend e2e suite no longer exists.
+- Real PDF bytes / clipboard in a real browser; Bangkok-vs-browser-timezone edge at 00:00–07:00 is covered only by computing "today" with `Intl` in Asia/Bangkok.
+- `/fulfilment` still lists only deals with ISSUED rows: a deal whose IRs are all DRAFT is not shown there (unchanged; flagged in the handoff, not changed).
+- Factory-master default currency/unit autofill for hand-typed lines: that endpoint is import/CEO-only, so sales has no source — the field stays blank + required.
+- Quotation re-issue after acceptance (B-R5): out of CR-1 scope.
+
+## Green run (after implementation)
+`cd frontend && npm run lint` 0 errors (1 pre-existing warning in `QuotationContactPicker.test.jsx`, untouched) · `npm test` 220 files / 3995 tests passed · `npm run build` ok.
+Two existing tests (`PricingRequestPanel.test.jsx` edit-draft, `PricingRequestDetailPage.test.jsx` revision modal) needed their fixture line to carry `requestedCurrency`/`requestedPriceUnitBasis`: a legacy line must now be completed before it can be saved (intended, pinned in `PricingRequestCreateModal.test.jsx`).