diff --git a/CLAUDE.md b/CLAUDE.md
index 5589e86..bd9ad5e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -74,6 +74,43 @@ npx tsc --noEmit         # Type-check only — run after every significant chang
 npx shadcn@latest add [name]  # Add shadcn/ui component
 ```
 
+### Key Dependencies
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| next | 16.x | Framework (App Router) |
+| react | 19.x | UI library |
+| @tanstack/react-query | 5.x | Server state |
+| zustand | 5.x | Client state |
+| react-hook-form | 7.x | Forms |
+| zod | 3.x | Validation |
+| @grpc/grpc-js | 1.x | gRPC client (BFF) |
+| tailwindcss | 4.x | Styling |
+| sonner | — | Toast notifications |
+| lucide-react | — | Icons |
+| recharts | — | Charts |
+
+### Testing Stack
+
+- Vitest + Testing Library + MSW (Mock Service Worker)
+- Setup file: `src/__tests__/setup.ts` — auto-cleanup, MSW server, `matchMedia`/`ResizeObserver` mocks
+- Test files: `src/__tests__/**/*.test.{ts,tsx}`
+- Current coverage: query-key unit tests + component filter tests (see §Improvement Notes for gaps)
+
+### Environment Variables (`.env.local`)
+
+```bash
+# gRPC endpoints (server-side only, NOT exposed to the browser)
+IAM_GRPC_HOST=localhost
+IAM_GRPC_PORT=50052
+FINANCE_GRPC_HOST=localhost
+FINANCE_GRPC_PORT=50051
+
+# Public variables (exposed to the browser)
+NEXT_PUBLIC_API_URL=           # Leave empty for relative paths (recommended)
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+```
+
 ---
 
 ## 2. Architecture Overview
@@ -96,10 +133,31 @@ The frontend **never** calls the Go backend directly. All requests go through `/
 QueryProvider → ThemeProvider → AuthProvider → PermissionProvider → {children}
 ```
 
-- `AuthProvider` — user state, login/logout, auto token refresh every 10 min
+- `AuthProvider` — user state, login/logout, auto token refresh every 10 min, **plus a silent refresh on mount** (attempts a token refresh once when the app loads, ahead of the 10-min interval)
 - `PermissionProvider` — `hasPermission(code)`, `hasAnyRole(...roles)`
 - `QueryProvider` — TanStack Query client (staleTime 60s, refetchOnWindowFocus false)
 
+### Route Protection (`src/proxy.ts`)
+
+Next.js 16 route protection (replaces the old `middleware.ts`):
+
+- **Public routes**: `/login`, `/forgot-password`, `/reset-password`, `/verify-otp`
+- **Protected routes**: everything else — redirect to `/login?callbackUrl=...` when unauthenticated
+- **API routes**: pass through untouched — each BFF route handles its own auth
+- Auth check is based on the presence of `access_token` + `refresh_token` cookies
+
+### Dynamic Sidebar System
+
+The sidebar is **fully dynamic** — driven by database menu data, not a hardcoded nav config:
+
+1. Backend `GetMenuTree` RPC returns hierarchical menu data already filtered by the current user's permissions
+2. BFF route `/api/v1/iam/menus/tree` proxies the RPC
+3. `useMenuTree()` hook (`src/hooks/iam/use-menu.ts`) fetches the tree → `menuTreeToNavGroups()` converts it to sidebar nav-group shape
+4. Icons lazy-load via `preloadMenuIcons()` + `resolveIcon()` in `src/types/iam/menu.ts` (dynamic imports from `lucide-react`)
+5. `AppSidebar` renders the resulting nav groups
+
+**Menu permission visibility rule**: a menu with **no** rows in `menu_permissions` is visible to **all** authenticated users; a menu **with** rows requires the user to hold at least one matching permission. Parent menus filtered out by permission drop their children too — `buildMenuTree()` only keeps children under a parent that itself survived the filter.
+
 ---
 
 ## 3. Directory Structure
@@ -502,19 +560,20 @@ Centered dashed-border box. Use whenever a list or section has no data.
 - Resolves UUID → full name via `useUser()` hook (TanStack Query, cached)
 - Never display raw UUIDs to users
 
-### 6.7 UserInitials (avatar)
+### 6.7 UserAvatar (photo or initials)
 
-**File**: `src/components/finance/cost-request-comment/comments-panel.tsx` (exported)
+**File**: `src/components/common/user-avatar.tsx`
 
 ```tsx
-import { UserInitials } from "@/components/finance/cost-request-comment/comments-panel"
+import { UserAvatar } from "@/components/common/user-avatar"
 
-<UserInitials userId={comment.authorUserId} className="mt-0.5 shrink-0" />
+<UserAvatar userId={comment.authorUserId} colorHash className="mt-0.5 shrink-0" />
 ```
 
-- Resolves full name via `useUser()` → derives initials ("Ilham Ramadhan" → "IR")
-- Deterministic color per userId (hash-based from 6-color palette)
+- Resolves full name + `profilePictureUrl` via `useUser()` → renders the real photo (`AvatarImage`) when set, else falls back to initials ("Ilham Ramadhan" → "IR")
+- `colorHash` prop enables the deterministic color-per-userId fallback (hash-based from 6-color palette); omit it to use the plain shadcn muted fallback (used by `nav-user.tsx`/`profile-header.tsx`)
 - Falls back to first char of userId if name not yet resolved
+- Supersedes the former `UserInitials` component (removed 2026-07-03) — same hook, same deterministic-color logic, now also renders a real photo when available
 
 ### 6.8 ScrollableDialog (tall forms)
 
@@ -946,6 +1005,20 @@ export const ACTIVE_FILTER_OPTIONS = [
 
 **Never** edit files in `src/types/generated/` — they are auto-generated from proto.
 
+### Response normalization (camelCase + snake_case)
+
+Backend responses aren't guaranteed to arrive in one casing consistently, so normalizer functions read both:
+
+```ts
+function normalizeUOM(raw: RawUOM): NormalizedUOM {
+  return {
+    uomId: raw.uomId || raw.uom_id || "",
+    uomCode: raw.uomCode || raw.uom_code || "",
+    // ...
+  }
+}
+```
+
 ---
 
 ## 12. BFF API Route Pattern
@@ -1042,6 +1115,23 @@ getCompanyClient()         // IAM Organization
 
 All clients are singletons via `globalThis` (survive HMR in dev).
 
+### gRPC → HTTP error mapping
+
+**File**: `src/lib/grpc/errors.ts`
+
+```ts
+const GRPC_TO_HTTP = {
+  [grpc.status.NOT_FOUND]: 404,
+  [grpc.status.ALREADY_EXISTS]: 409,
+  [grpc.status.INVALID_ARGUMENT]: 400,
+  [grpc.status.PERMISSION_DENIED]: 403,
+  [grpc.status.UNAUTHENTICATED]: 401,
+  // ...
+}
+```
+
+`isGrpcError()` + `handleGrpcError()` use this table to translate a caught gRPC error into the right `NextResponse` status before returning the standard `{ base, data }` envelope.
+
 ---
 
 ## 13. Loading & Skeleton Pattern
@@ -1147,11 +1237,11 @@ const STATUS_OPTIONS = [
 |----------|---------------------|
 | Display full name | `<UserName userId={id} />` |
 | Display full name (compact, no @username) | `<UserName userId={id} compact />` |
-| Avatar circle with initials | `<UserInitials userId={id} />` |
+| Avatar circle with photo or initials | `<UserAvatar userId={id} colorHash />` |
 | Department / org unit name | `<DeptName deptCode={code} />` |
 
-- `UserName` and `UserInitials` both call `useUser(userId)` internally — TanStack Query caches the result, so the same user appearing 10× in a list triggers only one network request
-- `UserInitials` derives initials from full name word boundaries: "Ilham Ramadhan" → "IR", single word → "I"
+- `UserName` and `UserAvatar` both call `useUser(userId)` internally — TanStack Query caches the result, so the same user appearing 10× in a list triggers only one network request
+- `UserAvatar` derives initials from full name word boundaries: "Ilham Ramadhan" → "IR", single word → "I"; renders the real photo instead when `profilePictureUrl` is set
 - Colors are deterministic per userId (hash mod 6 palette) — same user always gets same color
 
 ---
@@ -1217,3 +1307,17 @@ When building a new CRUD feature from scratch, complete in this order:
 9. `src/app/(dashboard)/{module}/{resource}/page.tsx` — server component
 10. `src/app/(dashboard)/{module}/{resource}/loading.tsx` — skeleton
 11. `src/app/(dashboard)/{module}/{resource}/{resource}-page-client.tsx` — client component wiring everything together
+
+---
+
+## 18. Improvement Notes
+
+Known gaps identified during a 2026-07 documentation audit — not blockers, but worth knowing before assuming full coverage:
+
+| Area | Severity | Note |
+|------|----------|------|
+| Limited test coverage | Medium | Only 2 test files exist (query keys + component filter) |
+| No E2E tests | Medium | No Playwright/Cypress — only unit/component tests |
+| Generated proto types in git | Low | Could be generated in CI instead of committed |
+| No error boundary components | Low | Missing React error boundaries |
+| No i18n/internationalization | Low | All strings hardcoded |
diff --git a/e2e/cpr-full-workflow.spec.ts b/e2e/cpr-full-workflow.spec.ts
index f28bb6f..3d2c30d 100644
--- a/e2e/cpr-full-workflow.spec.ts
+++ b/e2e/cpr-full-workflow.spec.ts
@@ -30,23 +30,23 @@ import {
   loginAs,
   logout,
   createDraftRequest,
-  findRequestInList,
   gotoRequestDetail,
-  submitRequest,
+  submitAndDecide,
+  submitViaApi,
+  startReviewViaApi,
   startReview,
   decideFeasibility,
-  useExistingCosting,
+  useExistingCostingViaApi,
+  findAnyProductSysId,
   rejectRequest,
   reviseRequest,
   cancelRequest,
-  createProductAndRoute,
   promoteRoute,
   openFillTrackingTab,
   claimFillTask,
   submitFillTask,
   approveFillTask,
   rejectFillTask,
-  markParametersComplete,
   expectStatus,
   expectButtonVisible,
   expectButtonHidden,
@@ -84,11 +84,10 @@ test.describe("E2E-01: Full new product workflow", () => {
     await expectButtonVisible(page, /^edit$/i)
     await expectButtonHidden(page, /^submit$/i)
     // Routing buttons must NOT appear at DRAFT
-    await expectButtonHidden(page, /create new routing/i)
-    await expectButtonHidden(page, /pick existing product/i)
+    await expectButtonHidden(page, /attach product routing/i)
   })
 
-  test("1.3 marketingmgr sees Submit and submits", async ({ page }) => {
+  test("1.3 marketingmgr sees Submit, decides classification+feasibility inline", async ({ page }) => {
     await loginAs(page, "marketingmgr")
     await gotoRequestDetail(page, createdRequestId)
 
@@ -96,36 +95,10 @@ test.describe("E2E-01: Full new product workflow", () => {
     await expectButtonHidden(page, /^edit$/i)
     await expectButtonVisible(page, /^submit$/i)
 
-    await submitRequest(page)
-    // Status should be SUBMITTED after submit
-    await expectStatus(page, "SUBMITTED")
-  })
-
-  test("1.4 marketing01 cannot see Start Review button at SUBMITTED", async ({ page }) => {
-    await loginAs(page, "marketing01")
-    await gotoRequestDetail(page, createdRequestId)
-
-    await expectStatus(page, "SUBMITTED")
-    await expectButtonHidden(page, /start review/i)
-    await expectButtonHidden(page, /reject/i)
-  })
-
-  test("1.5 finance01 starts review and decides FEASIBLE", async ({ page }) => {
-    await loginAs(page, "finance01")
-    await gotoRequestDetail(page, createdRequestId)
-
-    await expectButtonVisible(page, /start review/i)
-    await startReview(page)
-    await expectStatus(page, "UNDER_REVIEW")
-
-    // "Verify Classification" button should NOT appear (design decision: removed)
-    await expectButtonHidden(page, /verify classification/i)
-
-    // Use Existing Costing button should be visible (no longer needs pre-verification)
-    await expectButtonVisible(page, /use existing costing/i)
-
-    // Decide FEASIBLE → new product
-    await decideFeasibility(page, "FEASIBLE", "Product specifications are clear")
+    // B3 merge: Submit opens ClassificationAndFeasibilityDialog(mode="submit"), which
+    // folds Submit + StartReview + VerifyClassification + DecideFeasibility + LinkRoute
+    // into one SubmitAndDecide RPC — final status is ROUTING_DEFINED (FEASIBLE path).
+    await submitAndDecide(page)
     await expectStatus(page, "ROUTING_DEFINED")
   })
 
@@ -134,34 +107,16 @@ test.describe("E2E-01: Full new product workflow", () => {
     await gotoRequestDetail(page, createdRequestId)
 
     await expectStatus(page, "ROUTING_DEFINED")
-    // Routing panel should be visible for engineers
+    // Routing panel should be visible for engineers, already resolved by 1.3's submitAndDecide
     const routingPanel = page.locator('[data-testid="routing-panel"]')
     await expect(routingPanel).toBeVisible()
-
-    await expectButtonVisible(page, /create new routing/i)
-  })
-
-  test("1.7 production01 creates product master and routing", async ({ page }) => {
-    await loginAs(page, "production01")
-    await gotoRequestDetail(page, createdRequestId)
-
-    const routeId = await createProductAndRoute(page, `E2E FG Product ${Date.now()}`)
-    expect(routeId).toBeTruthy()
-
-    // Should be in route editor — navigate back to request after
-    await gotoRequestDetail(page, createdRequestId)
-    await expectStatus(page, "ROUTING_DEFINED")
   })
 
   test("1.8 production01 promotes route → PARAMETER_PENDING + fill tasks created", async ({ page }) => {
     await loginAs(page, "production01")
     await gotoRequestDetail(page, createdRequestId)
 
-    // Route must be linked — find the link button or already-linked route
-    const routePanel = page.locator('[data-testid="routing-panel"]')
-    await expect(routePanel).toBeVisible()
-
-    // Try to promote if route is already linked and complete
+    // Route already linked by 1.3's submitAndDecide() — go straight to promotion.
     await promoteRoute(page)
     await expectStatus(page, "PARAMETER_PENDING")
 
@@ -243,7 +198,7 @@ test.describe("E2E-02: Existing product path (Use Existing Costing)", () => {
   const requestTitle = `E2E-02 Existing Product ${Date.now()}`
   let requestId: string
 
-  test("2.1 Create and submit request", async ({ page }) => {
+  test("2.1 Create request and submit via API (setup only — not the thing under test)", async ({ page }) => {
     await loginAs(page, "marketing01")
     requestId = await createDraftRequest(page, {
       title: requestTitle,
@@ -253,42 +208,27 @@ test.describe("E2E-02: Existing product path (Use Existing Costing)", () => {
     })
     await expectStatus(page, "DRAFT")
 
-    await logout(page)
-    await loginAs(page, "marketingmgr")
-    await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    // Use Existing Costing is a review-phase action, reachable from UNDER_REVIEW regardless
+    // of how classification/feasibility were decided — API-bypass Submit + StartReview here
+    // since the dialog flow itself is already covered by E2E-01's submitAndDecide() test.
+    await submitViaApi(page, requestId)
+    await startReviewViaApi(page, requestId)
+    await page.reload()
+    await expectStatus(page, "UNDER_REVIEW")
   })
 
-  test("2.2 finance01 uses existing costing path — no verify step needed", async ({ page }) => {
+  test("2.2 finance01 uses existing costing via API — bypasses removed UI", async ({ page }) => {
+    // UseExistingCostingDialog has no live call site in request-detail-panel.tsx anymore
+    // (DialogKind no longer has a "useExisting" variant) — the RPC/BFF route is still
+    // reachable directly, so this test drives it via API rather than asserting on dead UI.
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
-
-    await startReview(page)
     await expectStatus(page, "UNDER_REVIEW")
 
-    // "Use Existing Costing" should be directly visible (no Verify Classification needed)
-    await expectButtonVisible(page, /use existing costing/i)
-
-    // Use existing costing with a product from CSTFG26BLK0001 (seeded product)
-    await page.getByRole("button", { name: /use existing costing/i }).click()
-    await page.waitForSelector('[role="dialog"]', { state: "visible" })
-
-    // Try to find the existing product
-    const searchInput = page.getByPlaceholder(/search|product/i).first()
-    await searchInput.fill("CSTFG")
-    await page.waitForTimeout(600) // debounce
-
-    const option = page.getByRole("option").first()
-    const hasOption = await option.isVisible({ timeout: 3000 }).catch(() => false)
-    if (hasOption) {
-      await option.click()
-      await page.getByRole("button", { name: /confirm|select|use/i }).last().click()
-      await page.waitForLoadState("load")
-      await expectStatus(page, "QUOTE_READY")
-    } else {
-      // No existing product in test env — skip to QUOTE_READY manually would need admin
-      test.skip()
-    }
+    const productSysId = await findAnyProductSysId(page)
+    await useExistingCostingViaApi(page, requestId, productSysId)
+    await page.reload()
+    await expectStatus(page, "QUOTE_READY")
   })
 
   test("2.3 QUOTE_READY: routing buttons not visible", async ({ page }) => {
@@ -296,8 +236,8 @@ test.describe("E2E-02: Existing product path (Use Existing Costing)", () => {
     await gotoRequestDetail(page, requestId)
 
     await expectStatus(page, "QUOTE_READY")
-    await expectButtonHidden(page, /create new routing/i)
-    await expectButtonHidden(page, /decide feasibility/i)
+    await expectButtonHidden(page, /attach product routing/i)
+    await expectButtonHidden(page, /review.*decide/i)
     // Fill tracking tab should NOT be present (no fill tasks for existing path)
     const fillTab = page.getByRole("tab", { name: /fill tracking/i })
     await expect(fillTab).not.toBeVisible()
@@ -318,10 +258,8 @@ test.describe("E2E-03: Reject and revise flow", () => {
       classification: "existing",
       urgency: "NORMAL",
     })
-    await logout(page)
-    await loginAs(page, "marketingmgr")
-    await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    // API-bypass — this suite tests reject/revise, not the submit dialog itself.
+    await submitViaApi(page, requestId)
     await page.close()
   })
 
@@ -393,19 +331,16 @@ test.describe("E2E-04: Permission gates", () => {
   })
 
   test("4.2 After submit: marketing01 cannot see reviewer buttons", async ({ page }) => {
-    // Submit as marketingmgr first
-    await loginAs(page, "marketingmgr")
-    await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    // API-bypass — this test is about button visibility for marketing01, not the submit dialog.
+    await submitViaApi(page, requestId)
 
     // Now check as marketing01
-    await logout(page)
     await loginAs(page, "marketing01")
     await gotoRequestDetail(page, requestId)
 
     await expectStatus(page, "SUBMITTED")
     await expectButtonHidden(page, /start review/i)
-    await expectButtonHidden(page, /decide feasibility/i)
+    await expectButtonHidden(page, /review.*decide/i)
     await expectButtonHidden(page, /reject/i)
   })
 
@@ -415,14 +350,15 @@ test.describe("E2E-04: Permission gates", () => {
 
     await expectStatus(page, "SUBMITTED")
     await expectButtonHidden(page, /start review/i)
-    await expectButtonHidden(page, /decide feasibility/i)
+    await expectButtonHidden(page, /review.*decide/i)
     await expectButtonHidden(page, /submit/i)
     // Routing panel only appears at ROUTING_DEFINED — not at SUBMITTED
     await expect(page.locator('[data-testid="routing-panel"]')).not.toBeVisible()
   })
 
   test("4.4 production01 at ROUTING_DEFINED: routing panel visible", async ({ page }) => {
-    // Get to ROUTING_DEFINED first
+    // Get to ROUTING_DEFINED first — "review" mode path via startReview + decideFeasibility
+    // (distinct from E2E-01's "submit" mode path via submitAndDecide).
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
     await startReview(page)
@@ -436,22 +372,18 @@ test.describe("E2E-04: Permission gates", () => {
     await expectStatus(page, "ROUTING_DEFINED")
     const routingPanel = page.locator('[data-testid="routing-panel"]')
     await expect(routingPanel).toBeVisible()
-    await expectButtonVisible(page, /create new routing/i)
+    // Already resolved by decideFeasibility's inline RoutingResolver — no "attach" button left.
+    await expectButtonHidden(page, /attach product routing/i)
   })
 
-  test("4.5 finance01 at ROUTING_DEFINED: no routing create button (not engineer)", async ({ page }) => {
+  test("4.5 finance01 at ROUTING_DEFINED: no routing attach button (not engineer)", async ({ page }) => {
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
 
-    // finance01 has CPR_REVIEWER but NOT CPR_ENGINEER, so no create routing
+    // Routing is already resolved by 4.4 — the "Attach product routing" button only ever
+    // appears when unresolved, so this always evaluates hidden regardless of role.
     await expectStatus(page, "ROUTING_DEFINED")
-    // Only reviewer actions: Close, Cancel (no routing create for non-engineers)
-    // NOTE: finance01 might have route.view but not route.create
-    // This depends on role assignment — adjust if finance01 also gets CPR_ENGINEER
-    const createRoutingBtn = page.getByRole("button", { name: /create new routing/i })
-    const hasButton = await createRoutingBtn.isVisible({ timeout: 1000 }).catch(() => false)
-    // If finance01 has CPR_ADMIN which includes route.create, this test may need adjustment
-    expect(typeof hasButton).toBe("boolean") // just verify the test runs
+    await expectButtonHidden(page, /attach product routing/i)
   })
 })
 
@@ -514,45 +446,21 @@ test.describe("E2E-07: Fill task claim → submit → approve", () => {
       urgency: "NORMAL",
     })
 
-    // Submit
-    await logout(page)
-    await loginAs(page, "marketingmgr")
-    await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    // Submit (as marketingmgr) — API-bypass, this suite tests fill tasks, not the submit dialog.
+    await submitViaApi(page, requestId)
 
-    // Review and decide FEASIBLE
-    await logout(page)
+    // Review and decide FEASIBLE — decideFeasibility's inline RoutingResolver already
+    // resolves + links routing as part of this step (see resolveRoutingInline).
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
     await startReview(page)
-    await decideFeasibility(page, "FEASIBLE", "Feasible")
+    await decideFeasibility(page, "FEASIBLE", "Feasible", { newProductName: `E2E-07 Product ${Date.now()}` })
     await expectStatus(page, "ROUTING_DEFINED")
 
-    // Create routing as production01
+    // Promote to PARAMETER_PENDING as production01 — routing already linked above.
     await logout(page)
     await loginAs(page, "production01")
     await gotoRequestDetail(page, requestId)
-
-    // If a pre-existing route is available, link it
-    const linkRouteBtn = page.getByRole("button", { name: /link.*route|use.*existing.*route/i })
-    const hasLinkBtn = await linkRouteBtn.isVisible({ timeout: 2000 }).catch(() => false)
-    if (hasLinkBtn) {
-      await linkRouteBtn.click()
-      await page.waitForSelector('[role="dialog"]', { state: "visible" })
-      // Select first available route
-      const firstRoute = page.getByRole("row").nth(1)
-      await firstRoute.click()
-      const confirmBtn = page.getByRole("button", { name: /confirm|link|select/i }).last()
-      await confirmBtn.click()
-      await page.waitForLoadState("load")
-    } else {
-      // Create new route
-      await createProductAndRoute(page, `E2E-07 Product ${Date.now()}`)
-      // Navigate back
-      await gotoRequestDetail(page, requestId)
-    }
-
-    // Promote to PARAMETER_PENDING
     await promoteRoute(page)
     await expectStatus(page, "PARAMETER_PENDING")
   })
@@ -701,27 +609,17 @@ test.describe("E2E-FULL: Complete workflow smoke test", () => {
     })
     await expectStatus(page, "DRAFT")
 
-    // Step 2: Submit (as marketingmgr)
-    await logout(page)
-    await loginAs(page, "marketingmgr")
-    await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
-    await expectStatus(page, "SUBMITTED")
+    // Step 2: Submit (API-bypass — smoke test targets the overall status chain)
+    await submitViaApi(page, requestId)
 
     // Step 3: Review
-    await logout(page)
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
     await startReview(page)
     await expectStatus(page, "UNDER_REVIEW")
 
-    // Verify classification button absent
-    await expectButtonHidden(page, /verify classification/i)
-    // Use Existing Costing button present without pre-verification
-    await expectButtonVisible(page, /use existing costing/i)
-
-    // Step 4: Decide FEASIBLE
-    await decideFeasibility(page, "FEASIBLE", "OK")
+    // Step 4: Decide FEASIBLE — inline RoutingResolver resolves + links routing.
+    await decideFeasibility(page, "FEASIBLE", "OK", { newProductName: `E2E-FULL Product ${Date.now()}` })
     await expectStatus(page, "ROUTING_DEFINED")
 
     // Step 5: Verify routing panel visible for engineer
@@ -823,7 +721,8 @@ test.describe("E2E-12: A6 — Approval trace history timeline", () => {
       urgency: "NORMAL",
     })
     await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    await submitViaApi(page, requestId)
+    await page.reload()
     await expectStatus(page, "SUBMITTED")
 
     // Expand history section.
@@ -841,10 +740,10 @@ test.describe("E2E-12: A6 — Approval trace history timeline", () => {
       urgency: "NORMAL",
     })
     await gotoRequestDetail(page, requestId)
-    await submitRequest(page)
+    await submitViaApi(page, requestId)
+    await page.reload()
     await expectStatus(page, "SUBMITTED")
 
-    await logout(page)
     await loginAs(page, "finance01")
     await gotoRequestDetail(page, requestId)
     await startReview(page)
diff --git a/e2e/helpers/cpr-helpers.ts b/e2e/helpers/cpr-helpers.ts
index 14eb151..95fef8e 100644
--- a/e2e/helpers/cpr-helpers.ts
+++ b/e2e/helpers/cpr-helpers.ts
@@ -152,22 +152,101 @@ export async function createDraftRequest(
 
 // ─── Status Transitions ───────────────────────────────────────────────────────
 
-export async function submitRequest(page: Page) {
+// B3 merge: the DRAFT "Submit" button now opens ClassificationAndFeasibilityDialog in
+// mode="submit" (single SubmitAndDecide RPC — Submit + StartReview + VerifyClassification
+// + DecideFeasibility + (conditional) LinkRoute, see handlers.go's SubmitAndDecide) instead
+// of firing a bare submit mutation. This drives the full dialog flow: classification ->
+// routing (RoutingResolver, inline, FEASIBLE only) -> feasibility -> "Submit for review".
+// Final status is ROUTING_DEFINED (FEASIBLE) or REJECTED (NOT_FEASIBLE) — SubmitAndDecide's
+// chain ends at DecideFeasibility, it does not stop at UNDER_REVIEW.
+export interface SubmitAndDecideOptions {
+  classification?: "existing" | "new"
+  overrideReason?: string
+  decision?: "FEASIBLE" | "NOT_FEASIBLE"
+  productCode?: string
+  newProductName?: string
+  note?: string
+}
+
+export async function submitAndDecide(page: Page, opts: SubmitAndDecideOptions = {}) {
+  const decision = opts.decision ?? "FEASIBLE"
   const btn = page.getByRole("button", { name: /^submit$/i })
   await expect(btn).toBeVisible()
-  // Wait for the BFF mutation response before asserting UI update
-  const [response] = await Promise.all([
-    page.waitForResponse(
-      (r) => r.url().includes("/submit") && r.request().method() === "POST",
-      { timeout: 15000 },
-    ).catch(() => null),
-    btn.click(),
-  ])
-  if (response && !response.ok()) {
-    const body = await response.json().catch(() => ({}))
-    throw new Error(`Submit failed: ${response.status()} — ${JSON.stringify(body)}`)
+  await btn.click()
+  await page.waitForSelector('[role="dialog"]', { state: "visible" })
+
+  if (decision === "NOT_FEASIBLE") {
+    await page.locator('[role="radio"][value="NOT_FEASIBLE"]').click()
   }
-  await expectStatus(page, "SUBMITTED")
+  if (opts.note || decision === "NOT_FEASIBLE") {
+    await page.getByLabel(/^note/i).fill(opts.note ?? "Test note")
+  }
+  if (opts.classification) {
+    await page.locator(`[role="radio"][value="${opts.classification}"]`).click()
+  }
+  if (opts.overrideReason) {
+    const overrideField = page.getByLabel(/override reason/i)
+    if (await overrideField.isVisible({ timeout: 1000 }).catch(() => false)) {
+      await overrideField.fill(opts.overrideReason)
+    }
+  }
+
+  if (decision === "FEASIBLE") {
+    await resolveRoutingInline(page, { productCode: opts.productCode, newProductName: opts.newProductName })
+  }
+
+  const submitBtn = decision === "FEASIBLE"
+    ? page.getByRole("button", { name: /submit for review/i })
+    : page.getByRole("button", { name: /reject as infeasible/i })
+  await expect(submitBtn).toBeEnabled({ timeout: 10000 })
+  await submitBtn.click()
+  await page.waitForSelector('[role="dialog"]', { state: "hidden", timeout: 15000 })
+  await page.waitForLoadState("load")
+  await expectStatus(page, decision === "FEASIBLE" ? "ROUTING_DEFINED" : "REJECTED")
+}
+
+// Direct API-bypass helpers — skip the UI for test setup steps that aren't the
+// thing under test. All hit the same BFF routes the UI mutations call.
+export async function submitViaApi(page: Page, requestId: string | number) {
+  const baseUrl = process.env.E2E_BASE_URL ?? "http://localhost:3000"
+  const resp = await page.request.post(`${baseUrl}/api/v1/finance/cost-product-requests/${requestId}/submit`, {
+    data: {},
+  })
+  if (!resp.ok()) throw new Error(`submitViaApi failed: ${resp.status()} — ${await resp.text()}`)
+}
+
+export async function startReviewViaApi(page: Page, requestId: string | number) {
+  const baseUrl = process.env.E2E_BASE_URL ?? "http://localhost:3000"
+  const resp = await page.request.post(
+    `${baseUrl}/api/v1/finance/cost-product-requests/${requestId}/start-review`,
+    { data: {} },
+  )
+  if (!resp.ok()) throw new Error(`startReviewViaApi failed: ${resp.status()} — ${await resp.text()}`)
+}
+
+export async function useExistingCostingViaApi(
+  page: Page,
+  requestId: string | number,
+  existingProductSysId: number,
+) {
+  const baseUrl = process.env.E2E_BASE_URL ?? "http://localhost:3000"
+  const resp = await page.request.post(
+    `${baseUrl}/api/v1/finance/cost-product-requests/${requestId}/use-existing-costing`,
+    { data: { existingProductSysId } },
+  )
+  if (!resp.ok()) throw new Error(`useExistingCostingViaApi failed: ${resp.status()} — ${await resp.text()}`)
+}
+
+// Looks up any active product master row's sysId — avoids hardcoding a seed-data ID that
+// may not exist in every environment.
+export async function findAnyProductSysId(page: Page): Promise<number> {
+  const baseUrl = process.env.E2E_BASE_URL ?? "http://localhost:3000"
+  const resp = await page.request.get(`${baseUrl}/api/v1/finance/cost-product-masters?pageSize=1&activeFilter=active`)
+  if (!resp.ok()) throw new Error(`findAnyProductSysId failed: ${resp.status()} — ${await resp.text()}`)
+  const body = await resp.json()
+  const sysId = body?.data?.[0]?.productSysId
+  if (!sysId) throw new Error("findAnyProductSysId: no active product masters found in this environment")
+  return sysId
 }
 
 export async function startReview(page: Page) {
@@ -176,12 +255,66 @@ export async function startReview(page: Page) {
   await expectStatus(page, "UNDER_REVIEW")
 }
 
+// Drives RoutingResolver inline (used by both the "submitDecide" and "reviewDecide"
+// variants of ClassificationAndFeasibilityDialog, and by RoutingPanel's standalone
+// "Attach product routing" dialog). Only runs when the resolver form is actually
+// visible — the FEASIBLE section renders it, NOT_FEASIBLE skips it entirely.
+export interface ResolveRoutingOptions {
+  productCode?: string
+  newProductName?: string
+  newProductTypeIndex?: number
+}
+
+export async function resolveRoutingInline(page: Page, opts: ResolveRoutingOptions = {}) {
+  const resolveBtn = page.getByRole("button", { name: /^resolve routing$/i })
+  if (!(await resolveBtn.isVisible({ timeout: 1000 }).catch(() => false))) {
+    return // NOT_FEASIBLE path, or already resolved (routeLinked) — nothing to do
+  }
+
+  if (opts.newProductName) {
+    const newProductCheckbox = page.locator("#rr-new-product")
+    if (await newProductCheckbox.isVisible({ timeout: 1000 }).catch(() => false)) {
+      await newProductCheckbox.check()
+    }
+    await page.getByPlaceholder(/PTY 75\/72 SD BRIGHT/i).fill(opts.newProductName)
+    const typeCombobox = page.getByRole("combobox", { name: /select product type/i })
+    await typeCombobox.click()
+    await page.waitForSelector('[role="option"]', { state: "visible", timeout: 5000 })
+    const options = page.getByRole("option")
+    const idx = opts.newProductTypeIndex ?? 0
+    await options.nth(idx).click()
+  } else {
+    const productCombobox = page.getByRole("combobox", { name: /search product by code or name/i })
+    await productCombobox.click()
+    await page.waitForSelector('[role="option"]', { state: "visible", timeout: 5000 })
+    if (opts.productCode) {
+      const searchInput = page.getByPlaceholder(/search by code or name/i)
+      await searchInput.fill(opts.productCode)
+      await page.waitForTimeout(400) // debounce
+      await page.getByRole("option", { name: new RegExp(opts.productCode, "i") }).first().click()
+    } else {
+      await page.getByRole("option").first().click()
+    }
+  }
+
+  await resolveBtn.click()
+  // Two different hosts react differently on success: ClassificationAndFeasibilityDialog
+  // keeps RoutingResolver mounted and shows a "Routing resolved — head #N…" message,
+  // while RoutingPanel's standalone dialog just closes (onResolved => setResolverOpen(false)).
+  // Race both signals instead of assuming either one.
+  await Promise.race([
+    page.getByText(/rout(e|ing) #?\d* ?resolved/i).waitFor({ state: "visible", timeout: 15000 }),
+    resolveBtn.waitFor({ state: "hidden", timeout: 15000 }),
+  ])
+}
+
 export async function decideFeasibility(
   page: Page,
   decision: "FEASIBLE" | "NOT_FEASIBLE",
   note = "Test note",
+  routingOpts: ResolveRoutingOptions = {},
 ) {
-  await page.getByRole("button", { name: /decide feasibility/i }).click()
+  await page.getByRole("button", { name: /review.*decide/i }).click()
   await page.waitForSelector('[role="dialog"]', { state: "visible" })
 
   // Select decision — use value attribute to avoid /FEASIBLE/i matching both "Feasible" and "Not feasible"
@@ -189,16 +322,23 @@ export async function decideFeasibility(
   await radio.click()
 
   // Fill note
-  const noteField = page.getByLabel(/note/i)
+  const noteField = page.getByLabel(/^note/i)
   if (await noteField.isVisible({ timeout: 1000 }).catch(() => false)) {
     await noteField.fill(note)
   }
 
-  // Button label is "Approve" for FEASIBLE, "Reject as infeasible" for NOT_FEASIBLE
+  if (decision === "FEASIBLE") {
+    await resolveRoutingInline(page, routingOpts)
+  }
+
+  // Submit label is dynamic: "Save & continue" (first pass), "Reject as infeasible"
+  // (NOT_FEASIBLE), or a retry label after a partial failure.
   const submitBtn = decision === "FEASIBLE"
-    ? page.getByRole("button", { name: /^approve$/i })
+    ? page.getByRole("button", { name: /save.*continue|retry/i })
     : page.getByRole("button", { name: /reject as infeasible/i })
+  await expect(submitBtn).toBeEnabled({ timeout: 10000 })
   await submitBtn.click()
+  await page.waitForSelector('[role="dialog"]', { state: "hidden", timeout: 15000 })
   await page.waitForLoadState("load")
 
   if (decision === "FEASIBLE") {
@@ -208,23 +348,6 @@ export async function decideFeasibility(
   }
 }
 
-export async function useExistingCosting(page: Page, productCode: string) {
-  await page.getByRole("button", { name: /use existing costing/i }).click()
-  await page.waitForSelector('[role="dialog"]', { state: "visible" })
-
-  // Search for product
-  const searchInput = page.getByPlaceholder(/search.*product|product.*code/i)
-  await searchInput.fill(productCode)
-  await page.waitForTimeout(500) // debounce
-
-  // Select from dropdown
-  await page.getByRole("option", { name: new RegExp(productCode, "i") }).first().click()
-
-  await page.getByRole("button", { name: /^(confirm|select|use)$/i }).last().click()
-  await page.waitForLoadState("load")
-  await expectStatus(page, "QUOTE_READY")
-}
-
 export async function rejectRequest(page: Page, reason: string) {
   await page.getByRole("button", { name: /^reject$/i }).click()
   await page.waitForSelector('[role="dialog"]', { state: "visible" })
@@ -278,35 +401,28 @@ export interface RouteMaterial {
   ratio: number
 }
 
-export async function createProductAndRoute(
+// Drives RoutingPanel's standalone "Attach product routing" button (shown when a
+// request has no linked route yet), which opens a Dialog containing an inline
+// RoutingResolver — the same component used by ClassificationAndFeasibilityDialog's
+// Routing section. Does NOT navigate to a separate route editor URL; it just closes
+// the dialog once RoutingResolver's onResolved fires. Returns nothing resolvable as
+// a route ID from the UI — callers needing the head ID should read it from the panel
+// (e.g. via `page.getByText(/route #(\d+)/i)`) or use the API directly.
+export async function attachProductRouting(
   page: Page,
   fgProductName: string,
-): Promise<string> {
-  // Click Create new routing button in routing panel
-  await page.getByRole("button", { name: /create new routing/i }).click()
+  opts: { productTypeIndex?: number } = {},
+) {
+  await page.getByRole("button", { name: /attach product routing/i }).click()
   await page.waitForSelector('[role="dialog"]', { state: "visible" })
 
-  // Step 1: switch to "Create new product master" mode (default is "existing")
-  await page.locator('[role="radio"][value="new"]').click()
-  // Click Next to go to step 2
-  await page.getByRole("button", { name: /^next$/i }).click()
-
-  // Step 2: fill product name via placeholder (Label has no htmlFor)
-  await page.getByPlaceholder(/PTY|product name/i).first().fill(fgProductName)
-
-  // Select product type — only one role="combobox" on step 2
-  await page.getByRole("combobox").click()
-  await page.waitForSelector('[role="option"]', { state: "visible", timeout: 10000 })
-  await page.getByRole("option").first().click()
-
-  // Click "Create product + route"
-  await page.getByRole("button", { name: /create product.*route/i }).click()
+  await resolveRoutingInline(page, {
+    newProductName: fgProductName,
+    newProductTypeIndex: opts.productTypeIndex,
+  })
 
-  // Wizard navigates to route editor at /finance/routes/[id]
-  await page.waitForURL(/\/finance\/routes\/\d+/, { timeout: 15000 })
-  const url = page.url()
-  const match = url.match(/routes\/(\d+)/)
-  return match?.[1] ?? ""
+  await page.waitForSelector('[role="dialog"]', { state: "hidden", timeout: 15000 })
+  await page.waitForLoadState("load")
 }
 
 export async function promoteRoute(page: Page) {
diff --git a/src/__tests__/components/classification-and-feasibility-dialog.test.tsx b/src/__tests__/components/classification-and-feasibility-dialog.test.tsx
new file mode 100644
index 0000000..289d4b8
--- /dev/null
+++ b/src/__tests__/components/classification-and-feasibility-dialog.test.tsx
@@ -0,0 +1,204 @@
+/**
+ * Tests for ClassificationAndFeasibilityDialog's extended phase state machine
+ * (P3-T3, design.md §3 Area B / B1): idle -> classifying -> classified ->
+ * routing -> deciding -> done, with RoutingResolver rendered inline when the
+ * decision is FEASIBLE and the submit button gated on `resolvedHeadId`.
+ *
+ * Covers:
+ *  - happy path: Classification -> Routing resolve -> LinkRoute -> Feasibility
+ *  - submit is disabled until RoutingResolver has resolved a head id
+ *  - a routing-link failure leaves classification saved and only retries the
+ *    routing step (not a full restart)
+ *  - a feasibility failure after a successful routing link only retries
+ *    feasibility, never re-submitting the already-linked route
+ *  - verified === "new" forces RoutingResolver straight into the new-product
+ *    form (no existing-product picker)
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+// ─── Module mocks ─────────────────────────────────────────────────────────────
+
+const verifyMutateAsync = vi.fn()
+const linkRouteMutateAsync = vi.fn()
+const feasibilityMutateAsync = vi.fn()
+const submitAndDecideMutateAsync = vi.fn()
+
+vi.mock("@/hooks/finance/use-cost-product-request", () => ({
+  useVerifyClassification: () => ({ mutateAsync: verifyMutateAsync, isPending: false }),
+  useDecideFeasibility: () => ({ mutateAsync: feasibilityMutateAsync, isPending: false }),
+  // P3-T6 wires mode="submit" through useSubmitAndDecide; this test file only
+  // exercises mode="reviewDecide" (the pre-existing UNDER_REVIEW flow), but the
+  // dialog calls the hook unconditionally at the top level regardless of mode,
+  // so it must always be mocked here even though these tests never invoke it.
+  useSubmitAndDecide: () => ({ mutateAsync: submitAndDecideMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/hooks/finance/use-link-route", () => ({
+  useLinkExistingRoute: () => ({ mutateAsync: linkRouteMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/hooks/finance/use-cost-product-master", () => ({
+  useCostProductMaster: () => ({ data: undefined }),
+  useCostProductMasters: () => ({ data: { items: [] }, isLoading: false }),
+}))
+
+// RoutingResolver is exercised by its own test file (routing-resolver.test.tsx);
+// here it's stubbed to a single "Resolve routing" button that immediately
+// invokes onResolved(999), or nothing when `failOnce` mode is toggled on via a
+// second button — this keeps the dialog's own phase-machine tests focused on
+// the dialog, not RoutingResolver's internal branching.
+let forceNewProductSeen: boolean | undefined
+vi.mock("@/components/finance/cost-product-request/routing-resolver", () => ({
+  RoutingResolver: ({
+    onResolved,
+    forceNewProduct,
+  }: {
+    onResolved: (headId: number) => void
+    forceNewProduct?: boolean
+  }) => {
+    forceNewProductSeen = forceNewProduct
+    return (
+      <button type="button" onClick={() => onResolved(999)}>
+        resolve-routing
+      </button>
+    )
+  },
+}))
+
+// ─── Import under test (after all mocks are registered) ──────────────────────
+
+import { ClassificationAndFeasibilityDialog } from "@/components/finance/cost-product-request/transition-dialogs"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function renderDialog(overrides: Partial<Parameters<typeof ClassificationAndFeasibilityDialog>[0]> = {}) {
+  const onOpenChange = vi.fn()
+  render(
+    <ClassificationAndFeasibilityDialog
+      open
+      onOpenChange={onOpenChange}
+      requestId={7}
+      currentClassification="existing"
+      referenceProductSysId={42}
+      {...overrides}
+    />,
+  )
+  return { onOpenChange }
+}
+
+async function resolveRoutingViaUI() {
+  await userEvent.click(screen.getByRole("button", { name: "resolve-routing" }))
+}
+
+function submitButton() {
+  return screen.getByRole("button", { name: /save & continue|retry routing link|retry feasibility/i })
+}
+
+describe("ClassificationAndFeasibilityDialog — extended phase machine (routing)", () => {
+  beforeEach(() => {
+    verifyMutateAsync.mockReset()
+    linkRouteMutateAsync.mockReset()
+    feasibilityMutateAsync.mockReset()
+    forceNewProductSeen = undefined
+  })
+
+  it("gates submit on resolvedHeadId being set", async () => {
+    renderDialog()
+
+    // Before routing is resolved, submit is disabled.
+    expect(submitButton()).toBeDisabled()
+
+    await resolveRoutingViaUI()
+
+    expect(submitButton()).toBeEnabled()
+  })
+
+  it("runs the full chain Classification -> Routing resolve -> LinkRoute -> Feasibility on success", async () => {
+    verifyMutateAsync.mockResolvedValue({})
+    linkRouteMutateAsync.mockResolvedValue({})
+    feasibilityMutateAsync.mockResolvedValue({})
+    const { onOpenChange } = renderDialog()
+
+    await resolveRoutingViaUI()
+    await userEvent.click(submitButton())
+
+    expect(verifyMutateAsync).toHaveBeenCalledTimes(1)
+    expect(linkRouteMutateAsync).toHaveBeenCalledTimes(1)
+    expect(linkRouteMutateAsync).toHaveBeenCalledWith({ requestId: 7, routeHeadId: 999 })
+    expect(feasibilityMutateAsync).toHaveBeenCalledTimes(1)
+
+    // Ordering: verify called before link, link called before feasibility.
+    const verifyOrder = verifyMutateAsync.mock.invocationCallOrder[0]
+    const linkOrder = linkRouteMutateAsync.mock.invocationCallOrder[0]
+    const feasibilityOrder = feasibilityMutateAsync.mock.invocationCallOrder[0]
+    expect(verifyOrder).toBeLessThan(linkOrder)
+    expect(linkOrder).toBeLessThan(feasibilityOrder)
+
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it("routing-failure-then-retry: LinkRoute failing leaves classification saved and only re-runs routing on retry", async () => {
+    verifyMutateAsync.mockResolvedValue({})
+    linkRouteMutateAsync.mockRejectedValueOnce(new Error("link failed")).mockResolvedValueOnce({})
+    feasibilityMutateAsync.mockResolvedValue({})
+    renderDialog()
+
+    await resolveRoutingViaUI()
+    await userEvent.click(submitButton())
+
+    // First attempt: classification saved, routing failed — inline error shown,
+    // classification section now read-only, submit button relabeled to retry routing.
+    expect(await screen.findByText(/linking the route failed/i)).toBeInTheDocument()
+    expect(verifyMutateAsync).toHaveBeenCalledTimes(1)
+    expect(linkRouteMutateAsync).toHaveBeenCalledTimes(1)
+    expect(feasibilityMutateAsync).not.toHaveBeenCalled()
+    expect(screen.getByRole("button", { name: /retry routing link/i })).toBeInTheDocument()
+
+    // Retry: classification must NOT be re-submitted; routing link retried; then feasibility runs.
+    await userEvent.click(screen.getByRole("button", { name: /retry routing link/i }))
+
+    expect(verifyMutateAsync).toHaveBeenCalledTimes(1)
+    expect(linkRouteMutateAsync).toHaveBeenCalledTimes(2)
+    expect(feasibilityMutateAsync).toHaveBeenCalledTimes(1)
+  })
+
+  it("feasibility-failure-then-retry: once routing already linked, retry never re-submits LinkRoute", async () => {
+    verifyMutateAsync.mockResolvedValue({})
+    linkRouteMutateAsync.mockResolvedValue({})
+    feasibilityMutateAsync.mockRejectedValueOnce(new Error("feasibility failed")).mockResolvedValueOnce({})
+    renderDialog()
+
+    await resolveRoutingViaUI()
+    await userEvent.click(submitButton())
+
+    expect(await screen.findByText(/feasibility decision failed/i)).toBeInTheDocument()
+    expect(linkRouteMutateAsync).toHaveBeenCalledTimes(1)
+    expect(feasibilityMutateAsync).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole("button", { name: /retry feasibility/i })).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole("button", { name: /retry feasibility/i }))
+
+    // LinkRoute must not be called again — routeLinked already true.
+    expect(linkRouteMutateAsync).toHaveBeenCalledTimes(1)
+    expect(feasibilityMutateAsync).toHaveBeenCalledTimes(2)
+  })
+
+  it("forces RoutingResolver into new-product mode when verified classification is 'new'", async () => {
+    renderDialog({ currentClassification: "pending" })
+
+    // Switch the classification radio to "new".
+    await userEvent.click(screen.getByRole("radio", { name: "New" }))
+
+    expect(forceNewProductSeen).toBe(true)
+  })
+
+  it("does not render the routing section at all when NOT_FEASIBLE is chosen", async () => {
+    renderDialog()
+
+    await userEvent.click(screen.getByRole("radio", { name: "Not feasible" }))
+
+    expect(screen.queryByRole("button", { name: "resolve-routing" })).not.toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/components/cost-product-request-import-dialog.test.tsx b/src/__tests__/components/cost-product-request-import-dialog.test.tsx
new file mode 100644
index 0000000..df607cc
--- /dev/null
+++ b/src/__tests__/components/cost-product-request-import-dialog.test.tsx
@@ -0,0 +1,123 @@
+/**
+ * Tests for CostProductRequestImportDialog (P4-T4, design.md §4 Area D6):
+ *  - error rows render as "Row {rowNumber}: {field} - {message}"
+ *  - success/failure counts render correctly after an import completes
+ *  - a fully successful import (no errors) shows zero failures and no error list
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+// jsdom doesn't implement scrollIntoView / hasPointerCapture — some shared UI
+// primitives touch these during interaction; polyfill defensively like other
+// dialog tests in this suite.
+if (!Element.prototype.hasPointerCapture) {
+  Element.prototype.hasPointerCapture = () => false
+}
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = () => {}
+}
+
+// ─── Module mocks ─────────────────────────────────────────────────────────────
+
+const importMutateAsync = vi.fn()
+const templateMutateAsync = vi.fn().mockResolvedValue({})
+
+vi.mock("@/hooks/finance/use-cost-product-request", () => ({
+  useImportCostProductRequests: () => ({ mutateAsync: importMutateAsync, isPending: false }),
+  useDownloadCostProductRequestTemplate: () => ({ mutateAsync: templateMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/lib/api", () => ({
+  readFileAsBytes: vi.fn().mockResolvedValue(new Uint8Array([1, 2, 3])),
+}))
+
+// ─── Import under test (after all mocks are registered) ──────────────────────
+
+import { CostProductRequestImportDialog } from "@/components/finance/cost-product-request/cost-product-request-import-dialog"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function renderDialog(onSuccess = vi.fn()) {
+  return render(
+    <CostProductRequestImportDialog open onOpenChange={() => {}} onSuccess={onSuccess} />,
+  )
+}
+
+async function selectFile() {
+  const file = new File(["dummy content"], "requests.xlsx", {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  })
+  const input = document.querySelector('input[type="file"]') as HTMLInputElement
+  await userEvent.upload(input, file)
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("CostProductRequestImportDialog", () => {
+  beforeEach(() => {
+    importMutateAsync.mockReset()
+    templateMutateAsync.mockClear()
+  })
+
+  it("renders error rows as 'Row {rowNumber}: {field} - {message}'", async () => {
+    importMutateAsync.mockResolvedValue({
+      successCount: 2,
+      skippedCount: 0,
+      updatedCount: 0,
+      failedCount: 1,
+      errors: [
+        { rowNumber: 3, field: "requestTypeId", message: "unknown request type code 'BOGUS'" },
+      ],
+    })
+
+    renderDialog()
+    await selectFile()
+    await userEvent.click(screen.getByRole("button", { name: "Import" }))
+
+    expect(
+      await screen.findByText("Row 3: requestTypeId - unknown request type code 'BOGUS'"),
+    ).toBeInTheDocument()
+  })
+
+  it("renders success and failure counts after import completes", async () => {
+    importMutateAsync.mockResolvedValue({
+      successCount: 5,
+      skippedCount: 0,
+      updatedCount: 0,
+      failedCount: 2,
+      errors: [
+        { rowNumber: 2, field: "spec.productDescription", message: "required" },
+        { rowNumber: 4, field: "spec.shadeId", message: "shade code or id required" },
+      ],
+    })
+
+    const onSuccess = vi.fn()
+    renderDialog(onSuccess)
+    await selectFile()
+    await userEvent.click(screen.getByRole("button", { name: "Import" }))
+
+    expect(await screen.findByText("Import Complete")).toBeInTheDocument()
+    expect(screen.getByText("5")).toBeInTheDocument()
+    expect(screen.getByText("2")).toBeInTheDocument()
+    expect(onSuccess).toHaveBeenCalled()
+  })
+
+  it("renders zero failures and no error list for a fully successful import", async () => {
+    importMutateAsync.mockResolvedValue({
+      successCount: 4,
+      skippedCount: 0,
+      updatedCount: 0,
+      failedCount: 0,
+      errors: [],
+    })
+
+    renderDialog()
+    await selectFile()
+    await userEvent.click(screen.getByRole("button", { name: "Import" }))
+
+    expect(await screen.findByText("Import Complete")).toBeInTheDocument()
+    expect(screen.getByText("4")).toBeInTheDocument()
+    expect(screen.queryByText(/^Errors:$/)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/components/fill-tracking-drawer.test.tsx b/src/__tests__/components/fill-tracking-drawer.test.tsx
new file mode 100644
index 0000000..005adc1
--- /dev/null
+++ b/src/__tests__/components/fill-tracking-drawer.test.tsx
@@ -0,0 +1,174 @@
+/**
+ * Tests for FillTrackingDrawer — verifies each task row renders product-code
+ * badges for its route level, sourced via useRouteGraph + getProductsAtLevel.
+ */
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import type { FillTask } from "@/types/finance/fill-assignment"
+import type { RouteGraph } from "@/types/finance/cost-route"
+
+// ─── Module mocks ─────────────────────────────────────────────────────────────
+
+vi.mock("@/hooks/finance/use-fill-assignment", () => ({
+  useFillTasks: vi.fn(),
+}))
+
+vi.mock("@/hooks/finance/use-cost-route", () => ({
+  useRouteGraph: vi.fn(),
+}))
+
+vi.mock("@/components/common/user-name", () => ({
+  UserName: ({ userId }: { userId: string }) => <span>{userId}</span>,
+}))
+
+vi.mock("@/components/common/dept-name", () => ({
+  DeptName: ({ deptCode }: { deptCode: string }) => <span>{deptCode}</span>,
+}))
+
+// ─── Import under test (after all mocks are registered) ──────────────────────
+
+import { FillTrackingDrawer } from "@/components/finance/fill-assignment/FillTrackingDrawer"
+import { useFillTasks } from "@/hooks/finance/use-fill-assignment"
+import { useRouteGraph } from "@/hooks/finance/use-cost-route"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function baseTask(overrides: Partial<FillTask> = {}): FillTask {
+  return {
+    taskId: 1,
+    requestId: 42,
+    routeHeadId: 100,
+    routeLevel: 1,
+    fillerType: "FILL_ACTOR_TYPE_USER",
+    fillerValue: "user-1",
+    approverType: "FILL_ACTOR_TYPE_USER",
+    approverValue: "user-2",
+    status: "FILL_TASK_STATUS_ACTIVE",
+    claimedBy: "",
+    reapproveOnChange: false,
+    slaFillHours: 24,
+    slaApproveHours: 12,
+    totalParams: 5,
+    filledParams: 0,
+    activatedAt: "",
+    approvals: [],
+    ...overrides,
+  }
+}
+
+function baseGraph(): RouteGraph {
+  return {
+    head: {
+      headId: 100,
+      productSysId: 10,
+      routingStatus: "COMPLETE",
+      version: 1,
+      lockedBy: "",
+      lockedAt: "",
+      unlockedBy: "",
+      unlockedAt: "",
+      levelCount: 1,
+      rmCount: 0,
+    },
+    seqs: [
+      {
+        uid: "seq-1",
+        seqId: 1,
+        headId: 100,
+        productSysId: 10,
+        productCode: "PRD-001",
+        productName: "Product One",
+        routeLevel: 1,
+        routeSeq: 1,
+        positionX: 0,
+        positionY: 0,
+        rms: [],
+      },
+    ],
+  }
+}
+
+function renderDrawer() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <FillTrackingDrawer
+        open
+        onOpenChange={() => {}}
+        requestId={42}
+        requestNo="REQ-001"
+      />
+    </QueryClientProvider>,
+  )
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("FillTrackingDrawer", () => {
+  it("renders a product-code badge for the task's route level", () => {
+    vi.mocked(useFillTasks).mockReturnValue({
+      data: [baseTask()],
+      isLoading: false,
+    } as unknown as ReturnType<typeof useFillTasks>)
+
+    vi.mocked(useRouteGraph).mockReturnValue({
+      data: baseGraph(),
+      isLoading: false,
+    } as unknown as ReturnType<typeof useRouteGraph>)
+
+    renderDrawer()
+
+    expect(screen.getByText("PRD-001")).toBeInTheDocument()
+    expect(useRouteGraph).toHaveBeenCalledWith(100)
+  })
+
+  it("renders no product badge when the graph has no product for the task's level", () => {
+    vi.mocked(useFillTasks).mockReturnValue({
+      data: [baseTask({ routeLevel: 2 })],
+      isLoading: false,
+    } as unknown as ReturnType<typeof useFillTasks>)
+
+    vi.mocked(useRouteGraph).mockReturnValue({
+      data: baseGraph(),
+      isLoading: false,
+    } as unknown as ReturnType<typeof useRouteGraph>)
+
+    renderDrawer()
+
+    expect(screen.queryByText("PRD-001")).not.toBeInTheDocument()
+    expect(screen.getByText("Level 2")).toBeInTheDocument()
+  })
+
+  it("shows the loading skeleton unchanged while tasks are loading", () => {
+    vi.mocked(useFillTasks).mockReturnValue({
+      data: undefined,
+      isLoading: true,
+    } as unknown as ReturnType<typeof useFillTasks>)
+
+    vi.mocked(useRouteGraph).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    } as unknown as ReturnType<typeof useRouteGraph>)
+
+    renderDrawer()
+
+    expect(screen.getByText("Loading tasks…")).toBeInTheDocument()
+  })
+
+  it("shows the empty state unchanged when there are no tasks", () => {
+    vi.mocked(useFillTasks).mockReturnValue({
+      data: [],
+      isLoading: false,
+    } as unknown as ReturnType<typeof useFillTasks>)
+
+    vi.mocked(useRouteGraph).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+    } as unknown as ReturnType<typeof useRouteGraph>)
+
+    renderDrawer()
+
+    expect(screen.getByText("No fill tasks yet")).toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/components/paper-tube-name.test.tsx b/src/__tests__/components/paper-tube-name.test.tsx
new file mode 100644
index 0000000..02fc49b
--- /dev/null
+++ b/src/__tests__/components/paper-tube-name.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * Tests for PaperTubeName — P2-T13: fixed Paper/Plastic tube classification.
+ * Verifies both display branches:
+ *  - tubeType set (PAPER/PLASTIC) -> static label, no master-lookup hook data needed.
+ *  - tubeType unset, legacy paperTubeTypeId set -> falls back to master-lookup display.
+ */
+import { describe, it, expect, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+
+const mockUseCostPaperTubeTypes = vi.fn()
+
+vi.mock("@/hooks/finance/use-cost-paper-tube-type", () => ({
+  useCostPaperTubeTypes: () => mockUseCostPaperTubeTypes(),
+}))
+
+import { PaperTubeName } from "@/components/common/paper-tube-name"
+import { TubeType } from "@/types/generated/finance/v1/cost_product_request"
+
+describe("PaperTubeName", () => {
+  it("renders a static 'Paper' label when tubeType is TUBE_TYPE_PAPER, without needing lookup data", () => {
+    mockUseCostPaperTubeTypes.mockReturnValue({ data: undefined, isLoading: true })
+
+    render(<PaperTubeName id={null} tubeType={TubeType.TUBE_TYPE_PAPER} />)
+
+    expect(screen.getByText("Paper")).toBeInTheDocument()
+  })
+
+  it("renders a static 'Plastic' label when tubeType is TUBE_TYPE_PLASTIC", () => {
+    mockUseCostPaperTubeTypes.mockReturnValue({ data: undefined, isLoading: true })
+
+    render(<PaperTubeName id={null} tubeType={TubeType.TUBE_TYPE_PLASTIC} />)
+
+    expect(screen.getByText("Plastic")).toBeInTheDocument()
+  })
+
+  it("falls back to legacy master-lookup display when tubeType is unset but paperTubeTypeId is set", () => {
+    mockUseCostPaperTubeTypes.mockReturnValue({
+      data: [{ paperTubeTypeId: 3, code: "PT-3", displayName: "3 inch jumbo" }],
+      isLoading: false,
+    })
+
+    render(<PaperTubeName id={3} tubeType={TubeType.TUBE_TYPE_UNSPECIFIED} />)
+
+    expect(screen.getByText(/PT-3 — 3 inch jumbo/)).toBeInTheDocument()
+  })
+
+  it("renders an em dash when neither tubeType nor paperTubeTypeId is set", () => {
+    mockUseCostPaperTubeTypes.mockReturnValue({ data: [], isLoading: false })
+
+    render(<PaperTubeName id={null} tubeType={TubeType.TUBE_TYPE_UNSPECIFIED} />)
+
+    expect(screen.getByText("—")).toBeInTheDocument()
+  })
+
+  it("renders 'Unknown paper tube' for a legacy id with no lookup match", () => {
+    mockUseCostPaperTubeTypes.mockReturnValue({ data: [], isLoading: false })
+
+    render(<PaperTubeName id={99} tubeType={TubeType.TUBE_TYPE_UNSPECIFIED} />)
+
+    expect(screen.getByText("Unknown paper tube")).toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/components/request-detail-panel.test.tsx b/src/__tests__/components/request-detail-panel.test.tsx
index 220460f..59d13fd 100644
--- a/src/__tests__/components/request-detail-panel.test.tsx
+++ b/src/__tests__/components/request-detail-panel.test.tsx
@@ -17,8 +17,6 @@ vi.mock("@/hooks/finance/use-cost-product-request", () => {
     useReviseRequest:          stub,
     useReopenRequest:          stub,
     useUseExistingCosting:     stub,
-    useVerifyClassification:   stub,
-    useDecideFeasibility:      stub,
     useRejectRequest:          stub,
     useCancelRequest:          stub,
     useCloseRequest:           stub,
@@ -70,12 +68,11 @@ vi.mock(
 vi.mock(
   "@/components/finance/cost-product-request/transition-dialogs",
   () => ({
-    CloseDialog:                () => null,
-    ConfirmActionDialog:        () => null,
-    FeasibilityDialog:          () => null,
-    ReasonDialog:               () => null,
-    UseExistingCostingDialog:   () => null,
-    VerifyClassificationDialog: () => null,
+    ClassificationAndFeasibilityDialog: () => null,
+    CloseDialog:                        () => null,
+    ConfirmActionDialog:                () => null,
+    ReasonDialog:                       () => null,
+    UseExistingCostingDialog:           () => null,
   }),
 )
 
@@ -149,9 +146,9 @@ describe("RequestDetailPanel — DRAFT status", () => {
     expect(screen.queryByRole("button", { name: /^submit$/i })).not.toBeInTheDocument()
   })
 
-  it("shows Cancel and Close when owner", () => {
+  it("shows Close when owner", () => {
     renderPanel(baseRequest({ status: "DRAFT" }), ["finance.product.request.create"])
-    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /cancel/i })).not.toBeInTheDocument()
     expect(screen.getByRole("button", { name: /^close$/i })).toBeInTheDocument()
   })
 })
@@ -187,30 +184,30 @@ describe("RequestDetailPanel — UNDER_REVIEW status", () => {
     mockHasPermission.mockReset()
   })
 
-  it("shows Decide feasibility when user has resolve permission", () => {
+  it("shows Review & decide when user has resolve permission", () => {
     renderPanel(baseRequest({ status: "UNDER_REVIEW" }), ["finance.product.request.resolve"])
-    expect(screen.getByRole("button", { name: /decide feasibility/i })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /review & decide/i })).toBeInTheDocument()
   })
 
-  it("hides Decide feasibility when user lacks resolve permission", () => {
+  it("hides Review & decide when user lacks resolve permission", () => {
     renderPanel(baseRequest({ status: "UNDER_REVIEW" }), [])
-    expect(screen.queryByRole("button", { name: /decide feasibility/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /review & decide/i })).not.toBeInTheDocument()
   })
 
-  it("shows Use existing costing when verifiedClassification is existing", () => {
+  it("hides Use existing costing even when verifiedClassification is existing (item #1: hidden from UI)", () => {
     renderPanel(
       baseRequest({ status: "UNDER_REVIEW", verifiedClassification: "existing" }),
       ["finance.product.request.resolve"],
     )
-    expect(screen.getByRole("button", { name: /use existing costing/i })).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /use existing costing/i })).not.toBeInTheDocument()
   })
 
-  it("shows Use existing costing when productClassification is existing and verifiedClassification is unset", () => {
+  it("hides Use existing costing even when productClassification is existing and verifiedClassification is unset", () => {
     renderPanel(
       baseRequest({ status: "UNDER_REVIEW", productClassification: "existing", verifiedClassification: undefined }),
       ["finance.product.request.resolve"],
     )
-    expect(screen.getByRole("button", { name: /use existing costing/i })).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: /use existing costing/i })).not.toBeInTheDocument()
   })
 
   it("hides Use existing costing when classification is new", () => {
diff --git a/src/__tests__/components/request-form-dialog.test.tsx b/src/__tests__/components/request-form-dialog.test.tsx
new file mode 100644
index 0000000..d7225d6
--- /dev/null
+++ b/src/__tests__/components/request-form-dialog.test.tsx
@@ -0,0 +1,155 @@
+/**
+ * Tests for RequestFormDialog — P2-T9: shade code/name split.
+ * Verifies:
+ *  - Submitting with only shade code (no shade name) succeeds.
+ *  - The all-or-nothing spec validation group no longer includes shade fields
+ *    (product description + tube type only) — leaving those two blank while
+ *    filling only shade code does not trigger the "fill in all spec fields" error.
+ */
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+// jsdom doesn't implement these — Radix's Select relies on them for pointer
+// interactions during open/close. Without the polyfill, clicking the tube
+// type Select throws "hasPointerCapture is not a function".
+if (!Element.prototype.hasPointerCapture) {
+  Element.prototype.hasPointerCapture = () => false
+}
+if (!Element.prototype.scrollIntoView) {
+  Element.prototype.scrollIntoView = () => {}
+}
+
+// ─── Module mocks ─────────────────────────────────────────────────────────────
+
+const mutateAsync = vi.fn().mockResolvedValue({ requestId: 1, requestNo: "REQ-0001" })
+
+vi.mock("@/hooks/finance/use-cost-product-request", () => ({
+  useCreateCostProductRequest: () => ({ mutateAsync, isPending: false }),
+  useUpdateCostProductRequest: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}))
+
+vi.mock("@/components/finance/comboboxes", () => ({
+  RequestTypeCombobox: ({ onChange }: { onChange: (typeId: number, code: string, variant: string) => void }) => (
+    <button type="button" onClick={() => onChange(7, "QUOTE", "quote")}>
+      pick-request-type
+    </button>
+  ),
+  ProductMasterCombobox: ({
+    onChange,
+  }: {
+    onChange: (productSysId: number, productCode: string, productName: string) => void
+  }) => (
+    <button type="button" onClick={() => onChange(42, "PM-42", "Reference Product")}>
+      pick-reference-product
+    </button>
+  ),
+}))
+
+// ─── Import under test (after all mocks are registered) ──────────────────────
+
+import { RequestFormDialog } from "@/components/finance/cost-product-request/request-form-dialog"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function renderDialog() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <RequestFormDialog open onOpenChange={() => {}} request={null} />
+    </QueryClientProvider>,
+  )
+}
+
+async function fillRequiredBaseFields() {
+  await userEvent.click(screen.getByRole("button", { name: "pick-request-type" }))
+  await userEvent.type(screen.getByLabelText(/title \*/i), "New product request")
+  await userEvent.type(screen.getByLabelText(/customer name \*/i), "Acme Corp")
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("RequestFormDialog — shade code/name split (P2-T9)", () => {
+  it("submits successfully with only shade code filled (no shade name)", async () => {
+    mutateAsync.mockClear()
+    renderDialog()
+
+    await fillRequiredBaseFields()
+    await userEvent.type(screen.getByLabelText(/shade code/i), "NL")
+
+    await userEvent.click(screen.getByRole("button", { name: /create request/i }))
+
+    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1))
+
+    const payload = mutateAsync.mock.calls[0][0]
+    expect(payload.spec).toBeUndefined()
+    expect(screen.queryByText(/fill in all spec fields/i)).not.toBeInTheDocument()
+  })
+
+  it("does not require shade fields as part of the all-or-nothing spec group", async () => {
+    mutateAsync.mockClear()
+    renderDialog()
+
+    await fillRequiredBaseFields()
+    // Fill only the all-or-nothing pair (description + tube type), leave shade blank.
+    await userEvent.type(screen.getByLabelText(/product description/i), "PET bottle grade resin")
+    await userEvent.click(screen.getByRole("combobox", { name: /tube/i }))
+    await userEvent.click(await screen.findByRole("option", { name: "Paper" }))
+
+    await userEvent.click(screen.getByRole("button", { name: /create request/i }))
+
+    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1))
+
+    const payload = mutateAsync.mock.calls[0][0]
+    expect(payload.spec).toBeDefined()
+    expect(payload.spec.shadeCode).toBe("")
+    expect(payload.spec.shadeName).toBe("")
+    expect(screen.queryByText(/fill in all spec fields/i)).not.toBeInTheDocument()
+  })
+
+  it("rejects a half-filled all-or-nothing group (description without tube type) while shade is irrelevant to that check", async () => {
+    mutateAsync.mockClear()
+    renderDialog()
+
+    await fillRequiredBaseFields()
+    await userEvent.type(screen.getByLabelText(/product description/i), "PET bottle grade resin")
+    await userEvent.type(screen.getByLabelText(/shade code/i), "NL")
+    await userEvent.type(screen.getByLabelText(/shade name/i), "Natural")
+
+    await userEvent.click(screen.getByRole("button", { name: /create request/i }))
+
+    expect(await screen.findAllByText(/fill in all spec fields/i)).not.toHaveLength(0)
+    expect(mutateAsync).not.toHaveBeenCalled()
+  })
+})
+
+describe("RequestFormDialog — reference product field (P2-T18)", () => {
+  it("submits successfully with the reference product left unset", async () => {
+    mutateAsync.mockClear()
+    renderDialog()
+
+    await fillRequiredBaseFields()
+    await userEvent.click(screen.getByRole("button", { name: /create request/i }))
+
+    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1))
+
+    const payload = mutateAsync.mock.calls[0][0]
+    expect(payload.referenceProductSysId).toBeUndefined()
+    expect(screen.queryByText(/reference product/i)).toBeInTheDocument() // label still rendered, just optional
+  })
+
+  it("submits the picked reference product sys id when one is selected", async () => {
+    mutateAsync.mockClear()
+    renderDialog()
+
+    await fillRequiredBaseFields()
+    await userEvent.click(screen.getByRole("button", { name: "pick-reference-product" }))
+    await userEvent.click(screen.getByRole("button", { name: /create request/i }))
+
+    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1))
+
+    const payload = mutateAsync.mock.calls[0][0]
+    expect(payload.referenceProductSysId).toBe(42)
+  })
+})
diff --git a/src/__tests__/components/route-lock-card.test.tsx b/src/__tests__/components/route-lock-card.test.tsx
index ff62676..092240a 100644
--- a/src/__tests__/components/route-lock-card.test.tsx
+++ b/src/__tests__/components/route-lock-card.test.tsx
@@ -43,6 +43,8 @@ function baseHead(overrides: Partial<CostRouteHead> = {}): CostRouteHead {
     lockedAt: "",
     unlockedBy: "",
     unlockedAt: "",
+    levelCount: 0,
+    rmCount: 0,
     ...overrides,
   }
 }
diff --git a/src/__tests__/components/routing-resolver.test.tsx b/src/__tests__/components/routing-resolver.test.tsx
new file mode 100644
index 0000000..0cc58e6
--- /dev/null
+++ b/src/__tests__/components/routing-resolver.test.tsx
@@ -0,0 +1,156 @@
+/**
+ * Tests for RoutingResolver — P3-T1: unified link-vs-create routing entry
+ * point (design.md §3, Area B / B1+B2). Covers all 3 branches:
+ *  - existing route found        → useLinkExistingRoute is invoked
+ *  - no route found (has product)→ useCreateRouteFromProduct is invoked directly
+ *  - brand-new-product toggle    → useCreateCostProductMaster then
+ *                                   useCreateRouteFromProduct are invoked, in order
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import type { CostRouteHead } from "@/types/finance/cost-route"
+
+// ─── Module mocks ─────────────────────────────────────────────────────────────
+
+const linkMutateAsync = vi.fn()
+const createFromProductMutateAsync = vi.fn()
+const createProductMutateAsync = vi.fn()
+
+let routeByProductData: CostRouteHead | null = null
+
+vi.mock("@/hooks/finance/use-cost-route", () => ({
+  useRouteByProduct: vi.fn(() => ({ data: routeByProductData, isLoading: false })),
+  useCreateRouteFromProduct: () => ({ mutateAsync: createFromProductMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/hooks/finance/use-link-route", () => ({
+  useLinkExistingRoute: () => ({ mutateAsync: linkMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/hooks/finance/use-cost-product-master", () => ({
+  useCreateCostProductMaster: () => ({ mutateAsync: createProductMutateAsync, isPending: false }),
+}))
+
+vi.mock("@/components/finance/comboboxes/product-master-combobox", () => ({
+  ProductMasterCombobox: ({
+    onChange,
+  }: {
+    onChange: (productSysId: number, productCode: string, productName: string) => void
+  }) => (
+    <button type="button" onClick={() => onChange(42, "PM-42", "Existing Product")}>
+      pick-product
+    </button>
+  ),
+}))
+
+vi.mock("@/components/finance/comboboxes/product-type-combobox", () => ({
+  ProductTypeCombobox: ({ onChange }: { onChange: (typeId: number, code: string, name: string) => void }) => (
+    <button type="button" onClick={() => onChange(9, "TYPE9", "Type 9")}>
+      pick-product-type
+    </button>
+  ),
+}))
+
+// ─── Import under test (after all mocks are registered) ──────────────────────
+
+import { RoutingResolver } from "@/components/finance/cost-product-request/routing-resolver"
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function baseHead(overrides: Partial<CostRouteHead> = {}): CostRouteHead {
+  return {
+    headId: 100,
+    productSysId: 42,
+    routingStatus: "DRAFT",
+    version: 1,
+    lockedBy: "",
+    lockedAt: "",
+    unlockedBy: "",
+    unlockedAt: "",
+    levelCount: 0,
+    rmCount: 0,
+    ...overrides,
+  }
+}
+
+function renderResolver(onResolved: (headId: number) => void) {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <RoutingResolver requestId={7} onResolved={onResolved} />
+    </QueryClientProvider>,
+  )
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("RoutingResolver", () => {
+  beforeEach(() => {
+    linkMutateAsync.mockReset()
+    createFromProductMutateAsync.mockReset()
+    createProductMutateAsync.mockReset()
+    routeByProductData = null
+  })
+
+  it("links the existing route when useRouteByProduct finds one", async () => {
+    routeByProductData = baseHead({ headId: 555 })
+    linkMutateAsync.mockResolvedValue({})
+    const onResolved = vi.fn()
+
+    renderResolver(onResolved)
+
+    await userEvent.click(screen.getByRole("button", { name: "pick-product" }))
+    await userEvent.click(screen.getByRole("button", { name: /resolve routing/i }))
+
+    expect(linkMutateAsync).toHaveBeenCalledTimes(1)
+    expect(linkMutateAsync).toHaveBeenCalledWith({ requestId: 7, routeHeadId: 555 })
+    expect(createFromProductMutateAsync).not.toHaveBeenCalled()
+    expect(createProductMutateAsync).not.toHaveBeenCalled()
+    expect(onResolved).toHaveBeenCalledWith(555)
+  })
+
+  it("creates a route from the product when no existing route is found", async () => {
+    routeByProductData = null
+    createFromProductMutateAsync.mockResolvedValue(777)
+    const onResolved = vi.fn()
+
+    renderResolver(onResolved)
+
+    await userEvent.click(screen.getByRole("button", { name: "pick-product" }))
+    await userEvent.click(screen.getByRole("button", { name: /resolve routing/i }))
+
+    expect(createFromProductMutateAsync).toHaveBeenCalledTimes(1)
+    expect(createFromProductMutateAsync).toHaveBeenCalledWith({ productSysId: 42, linkedRequestId: 7 })
+    expect(linkMutateAsync).not.toHaveBeenCalled()
+    expect(onResolved).toHaveBeenCalledWith(777)
+  })
+
+  it("creates the product master then the route when the brand-new-product toggle is used", async () => {
+    createProductMutateAsync.mockResolvedValue({ productSysId: 900 })
+    createFromProductMutateAsync.mockResolvedValue(901)
+    const onResolved = vi.fn()
+
+    renderResolver(onResolved)
+
+    await userEvent.click(screen.getByLabelText(/brand-new product/i))
+    await userEvent.type(screen.getByPlaceholderText(/PTY 75\/72/i), "New Product X")
+    await userEvent.click(screen.getByRole("button", { name: "pick-product-type" }))
+    await userEvent.click(screen.getByRole("button", { name: /resolve routing/i }))
+
+    expect(createProductMutateAsync).toHaveBeenCalledTimes(1)
+    expect(createProductMutateAsync).toHaveBeenCalledWith(
+      expect.objectContaining({ productTypeId: 9, productName: "New Product X" }),
+    )
+    expect(createFromProductMutateAsync).toHaveBeenCalledTimes(1)
+    expect(createFromProductMutateAsync).toHaveBeenCalledWith({ productSysId: 900, linkedRequestId: 7 })
+    expect(linkMutateAsync).not.toHaveBeenCalled()
+
+    const productCallOrder = createProductMutateAsync.mock.invocationCallOrder[0]
+    const routeCallOrder = createFromProductMutateAsync.mock.invocationCallOrder[0]
+    expect(productCallOrder).toBeLessThan(routeCallOrder)
+
+    expect(onResolved).toHaveBeenCalledWith(901)
+  })
+})
diff --git a/src/app/(dashboard)/finance/costing/fill-tasks/page.tsx b/src/app/(dashboard)/finance/costing/fill-tasks/page.tsx
index d9673df..98576cc 100644
--- a/src/app/(dashboard)/finance/costing/fill-tasks/page.tsx
+++ b/src/app/(dashboard)/finance/costing/fill-tasks/page.tsx
@@ -5,7 +5,6 @@ import { useSearchParams, useRouter } from "next/navigation";
 import {
   useFillTasks,
   useClaimFillTask,
-  useApproveFillTask,
   useRejectFillTask,
 } from "@/hooks/finance/use-fill-assignment";
 import { useCostProductRequests } from "@/hooks/finance/use-cost-product-request";
@@ -128,7 +127,6 @@ function FillTasksContent({ requestId, onRequestSelect }: FillTasksContentProps)
 
   const { data: tasks = [], isLoading } = useFillTasks(requestId);
   const claim = useClaimFillTask(requestId);
-  const approve = useApproveFillTask(requestId);
   const reject = useRejectFillTask(requestId);
 
   const myBlockerTask = tasks.find(
@@ -185,7 +183,6 @@ function FillTasksContent({ requestId, onRequestSelect }: FillTasksContentProps)
                 },
               });
             }}
-            onApprove={(taskId) => approve.mutate({ taskId })}
             onReject={(taskId) =>
               reject.mutate({ taskId, reason: "Rejected" })
             }
diff --git a/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx b/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
index fa68707..8940e11 100644
--- a/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
+++ b/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { useRouter } from "next/navigation"
-import { Ban, FileText, Inbox, Plus, XCircle } from "lucide-react"
+import { Ban, Download, FileText, Inbox, Loader2, Plus, Upload, XCircle } from "lucide-react"
 
 import { PageHeader } from "@/components/common/page-header"
 import { DebouncedSearchInput } from "@/components/common/debounced-search-input"
@@ -18,9 +17,16 @@ import {
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { ColumnVisibilityMenu } from "@/components/shared/data-table/column-visibility-menu"
 import { DataTablePagination } from "@/components/shared"
 import {
+  CostProductRequestImportDialog,
   RequestFormDialog,
   RequestTable,
   buildColumns,
@@ -28,7 +34,11 @@ import {
   useRequestTableColumns,
 } from "@/components/finance/cost-product-request"
 import { FillTrackingDrawer } from "@/components/finance/fill-assignment"
-import { useCostProductRequestCounts, useCostProductRequests } from "@/hooks/finance/use-cost-product-request"
+import {
+  useCostProductRequestCounts,
+  useCostProductRequests,
+  useExportCostProductRequests,
+} from "@/hooks/finance/use-cost-product-request"
 import { useUrlState } from "@/lib/hooks"
 import { getStatusDisplay } from "@/lib/ui/status-colors"
 import { usePermissionContext } from "@/providers/permission-provider"
@@ -46,17 +56,25 @@ const defaultFilters: ListCostProductRequestsParams = {
   status: "",
   page: 1,
   pageSize: 25,
+  // sortBy/sortOrder must be listed here — useUrlState only tracks keys present in defaultValues.
+  // sortOrder must default to a string ("asc"), not undefined — useUrlState's defaultDeserialize
+  // branches on typeof defaultValue, and "undefined" falls through to JSON.parse(urlValue), which
+  // throws for a plain string like "asc" and silently resets to the default on every read. That
+  // made sortOrder permanently stick at undefined regardless of the URL (found during manual
+  // verification of this batch — same latent bug in product-master-page-client.tsx, out of scope here).
+  sortBy: "",
+  sortOrder: "asc",
 }
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100]
 
 export default function ProductRequestsPageClient() {
-  const router = useRouter()
   const { hasPermission } = usePermissionContext()
   const canCreate = hasPermission(PERMISSIONS.ProductRequests.requestCreate)
 
   const [filters, setFilters] = useUrlState<ListCostProductRequestsParams>({ defaultValues: defaultFilters })
   const [formOpen, setFormOpen] = useState(false)
+  const [importOpen, setImportOpen] = useState(false)
   const [trackingRequest, setTrackingRequest] = useState<CostProductRequest | null>(null)
 
   // Column visibility managed at page level so the toggle lives in CardHeader
@@ -64,19 +82,62 @@ export default function ProductRequestsPageClient() {
 
   const { data: list, isLoading } = useCostProductRequests(filters)
   const { data: counts, isLoading: countsLoading } = useCostProductRequestCounts()
+  const exportMutation = useExportCostProductRequests()
 
   const items = list?.items ?? []
   const pagination = list?.pagination
   const totalItems = Number(pagination?.totalItems ?? 0)
 
+  function handleSort(sortKey: string) {
+    const nextOrder = filters.sortBy === sortKey && filters.sortOrder === "asc" ? "desc" : "asc"
+    setFilters({ ...filters, sortBy: sortKey as ListCostProductRequestsParams["sortBy"], sortOrder: nextOrder, page: 1 })
+  }
+
+  async function handleExport() {
+    await exportMutation.mutateAsync({
+      search: filters.search,
+      status: filters.status,
+      requestTypeId: filters.requestTypeId,
+    })
+  }
+
   return (
     <div className="w-full min-w-0 space-y-5">
       <PageHeader title="Product Requests" subtitle="Marketing → Engineering request lifecycle (Phase A).">
-        {canCreate && (
-          <Button onClick={() => setFormOpen(true)}>
-            <Plus className="mr-2 h-4 w-4" /> New request
-          </Button>
-        )}
+        <div className="flex items-center gap-2">
+          {/* Export/Import Dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                {exportMutation.isPending ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Download className="mr-2 h-4 w-4" />
+                )}
+                Export/Import
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onClick={handleExport}
+                disabled={exportMutation.isPending}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Export to Excel
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setImportOpen(true)}>
+                <Upload className="mr-2 h-4 w-4" />
+                Import from Excel
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {canCreate && (
+            <Button onClick={() => setFormOpen(true)}>
+              <Plus className="mr-2 h-4 w-4" /> New request
+            </Button>
+          )}
+        </div>
       </PageHeader>
 
       <KpiGrid>
@@ -137,8 +198,10 @@ export default function ProductRequestsPageClient() {
             items={items}
             isLoading={isLoading}
             visibility={visibility}
-            onOpen={(r) => router.push(`/finance/product-requests/${r.requestId}`)}
             onTrack={(r) => setTrackingRequest(r)}
+            sortBy={filters.sortBy}
+            sortOrder={filters.sortOrder}
+            onSort={handleSort}
           />
 
           {totalItems > 0 && (
@@ -157,6 +220,8 @@ export default function ProductRequestsPageClient() {
 
       <RequestFormDialog open={formOpen} onOpenChange={setFormOpen} request={null} />
 
+      <CostProductRequestImportDialog open={importOpen} onOpenChange={setImportOpen} />
+
       <FillTrackingDrawer
         open={trackingRequest !== null}
         onOpenChange={(open) => { if (!open) setTrackingRequest(null); }}
diff --git a/src/app/(dashboard)/finance/routes/[headId]/loading.tsx b/src/app/(dashboard)/finance/routes/[headId]/loading.tsx
new file mode 100644
index 0000000..98d2142
--- /dev/null
+++ b/src/app/(dashboard)/finance/routes/[headId]/loading.tsx
@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function RouteDetailLoading() {
+  return (
+    <div className="space-y-6 p-6">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-8 w-72" />
+        <Skeleton className="h-4 w-48" />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Skeleton className="h-9 w-32" />
+        <Skeleton className="h-9 w-28" />
+        <Skeleton className="h-9 w-24" />
+      </div>
+      <Skeleton className="h-[500px] w-full rounded-lg" />
+    </div>
+  )
+}
diff --git a/src/app/(dashboard)/finance/routes/loading.tsx b/src/app/(dashboard)/finance/routes/loading.tsx
new file mode 100644
index 0000000..3543c39
--- /dev/null
+++ b/src/app/(dashboard)/finance/routes/loading.tsx
@@ -0,0 +1,20 @@
+import { TableSkeleton } from "@/components/loading"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function RoutesLoading() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-24 rounded-lg" />
+        ))}
+      </div>
+      <TableSkeleton rows={8} />
+    </div>
+  )
+}
diff --git a/src/app/(dashboard)/finance/routes/page.tsx b/src/app/(dashboard)/finance/routes/page.tsx
index 7528172..ba60ddd 100644
--- a/src/app/(dashboard)/finance/routes/page.tsx
+++ b/src/app/(dashboard)/finance/routes/page.tsx
@@ -1,171 +1,8 @@
-"use client"
+import { generateMetadata as genMeta } from "@/config/site"
+import RoutesPageClient from "./routes-page-client"
 
-import Link from "next/link"
-import { useState } from "react"
-import { CheckCircle2, FileStack, Loader2, Lock, PencilRuler } from "lucide-react"
+export const metadata = genMeta("Product Routes")
 
-import { DebouncedSearchInput, KpiCard, KpiGrid, PageHeader } from "@/components/common"
-import { StatusBadge } from "@/components/common/status-badge"
-import { CreateRoutingWizard } from "@/components/finance/cost-product-request/create-routing-wizard"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { useRouteCounts, useRoutes } from "@/hooks/finance/use-cost-route"
-import type { RouteStatus } from "@/types/finance/cost-route"
-
-export default function RoutesListPage() {
-  const [search, setSearch] = useState("")
-  const [status, setStatus] = useState<RouteStatus | "">("")
-  const [page, setPage] = useState(1)
-  const [wizardOpen, setWizardOpen] = useState(false)
-  const pageSize = 20
-
-  const { data, isLoading } = useRoutes({ search, status, page, pageSize })
-  const { data: counts, isLoading: countsLoading } = useRouteCounts()
-
-  return (
-    <div className="space-y-6 p-6">
-      <PageHeader
-        title="Product Routes"
-        subtitle="Multi-stage routings (DAG): one head per product, each stage produces an intermediate or FG product."
-      >
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button>+ New route ▾</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={() => setWizardOpen(true)}>
-              From product (wizard)
-            </DropdownMenuItem>
-            {/* "From template (duplicate)" deferred — user opens an existing route then Fork. */}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </PageHeader>
-
-      <KpiGrid>
-        <KpiCard title="Total routes" value={counts?.total ?? 0} icon={FileStack} loading={countsLoading} />
-        <KpiCard title="Draft" value={counts?.draft ?? 0} icon={PencilRuler} variant="warning" loading={countsLoading} />
-        <KpiCard title="Complete" value={counts?.complete ?? 0} icon={CheckCircle2} variant="success" loading={countsLoading} />
-        <KpiCard title="Locked" value={counts?.locked ?? 0} icon={Lock} loading={countsLoading} />
-      </KpiGrid>
-
-      <CreateRoutingWizard
-        open={wizardOpen}
-        onClose={() => setWizardOpen(false)}
-        requestId={0}
-      />
-
-      <Card className="p-4">
-        <div className="flex flex-wrap gap-3">
-          <div className="min-w-[260px] flex-1">
-            <DebouncedSearchInput
-              value={search}
-              onValueChange={(v) => {
-                setSearch(v)
-                setPage(1)
-              }}
-              placeholder="Search by product code or name…"
-              debounceMs={300}
-            />
-          </div>
-          <Select
-            value={status || "ALL"}
-            onValueChange={(v) => {
-              setStatus(v === "ALL" ? "" : (v as RouteStatus))
-              setPage(1)
-            }}
-          >
-            <SelectTrigger className="w-48">
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="ALL">All statuses</SelectItem>
-              <SelectItem value="DRAFT">DRAFT</SelectItem>
-              <SelectItem value="COMPLETE">COMPLETE</SelectItem>
-              <SelectItem value="LOCKED">LOCKED</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </Card>
-
-      <Card>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Head #</TableHead>
-              <TableHead>Product</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Version</TableHead>
-              <TableHead>From draft</TableHead>
-              <TableHead className="w-28">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {isLoading && (
-              <TableRow>
-                <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">
-                  <Loader2 className="mr-2 inline h-4 w-4 animate-spin" /> Loading…
-                </TableCell>
-              </TableRow>
-            )}
-            {!isLoading && data?.items.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={6} className="py-8 text-center text-muted-foreground">
-                  No routes yet. Promote a routing draft to create one.
-                </TableCell>
-              </TableRow>
-            )}
-            {data?.items.map((h) => (
-              <TableRow key={h.headId}>
-                <TableCell className="font-mono">#{h.headId}</TableCell>
-                <TableCell>
-                  <div className="font-medium">{h.productCode || "—"}</div>
-                  <div className="text-xs text-muted-foreground">{h.productName || ""}</div>
-                </TableCell>
-                <TableCell>
-                  <StatusBadge status={h.routingStatus} type="route" />
-                </TableCell>
-                <TableCell>v{h.version}</TableCell>
-                <TableCell>{h.promotedFromDraftId ? `#${h.promotedFromDraftId}` : "—"}</TableCell>
-                <TableCell>
-                  <Button asChild size="sm" variant="outline">
-                    <Link href={`/finance/routes/${h.headId}`}>Open</Link>
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Card>
-
-      {data && data.totalPages > 1 && (
-        <div className="flex items-center justify-between">
-          <div className="text-sm text-muted-foreground">
-            Showing page {data.page} of {data.totalPages} ({data.total} total)
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-              Previous
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={page >= data.totalPages}
-              onClick={() => setPage((p) => p + 1)}
-            >
-              Next
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
+export default function RoutesPage() {
+  return <RoutesPageClient />
 }
-
diff --git a/src/app/(dashboard)/finance/routes/routes-page-client.tsx b/src/app/(dashboard)/finance/routes/routes-page-client.tsx
new file mode 100644
index 0000000..74d8312
--- /dev/null
+++ b/src/app/(dashboard)/finance/routes/routes-page-client.tsx
@@ -0,0 +1,275 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import {
+  CheckCircle2,
+  FileStack,
+  GitFork,
+  Lock,
+  PencilRuler,
+  Plus,
+  X,
+} from "lucide-react"
+
+import { DebouncedSearchInput, EmptyState, KpiCard, KpiGrid, PageHeader } from "@/components/common"
+import { StatusBadge } from "@/components/common/status-badge"
+import { RoutingResolver } from "@/components/finance/cost-product-request/routing-resolver"
+import { ColumnVisibilityMenu, DataTablePagination, SortableHeader, useColumnVisibility } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table"
+import { useRouteCounts, useRoutes } from "@/hooks/finance/use-cost-route"
+import { useUrlState } from "@/lib/hooks"
+import { cn } from "@/lib/utils"
+import type { ListRoutesParams, RouteStatus } from "@/types/finance/cost-route"
+
+// Column definitions — id doubles as the sort key where sortable
+const ROUTE_COLUMNS = [
+  { id: "head_id",                header: "Head #",      canHide: false },
+  { id: "product_code",           header: "Product" },
+  { id: "status",                 header: "Status" },
+  { id: "version",                header: "Version",     defaultHidden: false },
+  { id: "level_count",            header: "# levels" },
+  { id: "rm_count",               header: "# RM" },
+] as const
+
+type ColId = (typeof ROUTE_COLUMNS)[number]["id"]
+
+const TABLE_ID = "finance-routes"
+
+const defaultFilters: ListRoutesParams = {
+  page: 1,
+  pageSize: 20,
+  search: "",
+  status: "",
+  sortBy: "",
+  sortOrder: "asc",
+}
+
+export default function RoutesPageClient() {
+  const router = useRouter()
+  const [filters, setFilters] = useUrlState<ListRoutesParams>({ defaultValues: defaultFilters })
+  const [resolverOpen, setResolverOpen] = useState(false)
+
+  const { data, isLoading } = useRoutes(filters)
+  const { data: counts, isLoading: countsLoading } = useRouteCounts()
+
+  const columns = useMemo(() => [...ROUTE_COLUMNS], [])
+  const { visibility, toggle, setAll, reset } = useColumnVisibility(TABLE_ID, columns)
+  const show = (id: ColId) => visibility[id] !== false
+  // Right edge padding goes on whichever column renders last (routes has no trailing actions column).
+  const lastVisibleId = [...ROUTE_COLUMNS].reverse().find((c) => show(c.id))?.id
+  const edgeRight = (id: ColId) => (id === lastVisibleId ? "pr-4" : "")
+
+  function handleSort(sortKey: string) {
+    const nextOrder =
+      filters.sortBy === sortKey && filters.sortOrder === "asc" ? "desc" : "asc"
+    setFilters({ ...filters, sortBy: sortKey as ListRoutesParams["sortBy"], sortOrder: nextOrder, page: 1 })
+  }
+
+  const sortProps = {
+    currentSortBy: filters.sortBy,
+    currentSortOrder: filters.sortOrder as "asc" | "desc" | undefined,
+    onSort: handleSort,
+  }
+
+  const hasActiveFilters = !!filters.search || !!filters.status || !!filters.sortBy
+
+  function clearFilters() {
+    setFilters({
+      ...filters,
+      search: "",
+      status: "",
+      sortBy: "",
+      sortOrder: "asc",
+      page: 1,
+    })
+  }
+
+  const items = data?.items ?? []
+  const totalItems = data?.total ?? 0
+  const totalPages = data?.totalPages ?? 0
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Product Routes"
+        subtitle="Multi-stage routings (DAG): one head per product, each stage produces an intermediate or FG product."
+        className="pb-0"
+      >
+        <Button onClick={() => setResolverOpen(true)} aria-label="New route">
+          <Plus className="h-4 w-4" />
+          <span className="hidden sm:inline">New route</span>
+        </Button>
+      </PageHeader>
+
+      <KpiGrid cols={4}>
+        <KpiCard title="Total routes" value={counts?.total ?? 0} icon={FileStack} loading={countsLoading} />
+        <KpiCard title="Draft"    value={counts?.draft ?? 0}    icon={PencilRuler}  loading={countsLoading} />
+        <KpiCard title="Complete" value={counts?.complete ?? 0} icon={CheckCircle2} loading={countsLoading} />
+        <KpiCard title="Locked"   value={counts?.locked ?? 0}   icon={Lock}         loading={countsLoading} />
+      </KpiGrid>
+
+      {/* Filter bar — matches product-master grid pattern */}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_170px_auto] lg:items-center">
+        <DebouncedSearchInput
+          value={filters.search || ""}
+          onValueChange={(search) => setFilters({ ...filters, search, page: 1 })}
+          placeholder="Search by product code or name…"
+          className="h-9"
+          containerClassName="min-w-0 sm:col-span-2 lg:col-span-1"
+        />
+        <Select
+          value={filters.status || "ALL"}
+          onValueChange={(v) => {
+            setFilters({ ...filters, status: v === "ALL" ? "" : (v as RouteStatus), page: 1 })
+          }}
+        >
+          <SelectTrigger className="h-9">
+            <SelectValue placeholder="All statuses" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="ALL">All statuses</SelectItem>
+            <SelectItem value="DRAFT">Draft</SelectItem>
+            <SelectItem value="COMPLETE">Complete</SelectItem>
+            <SelectItem value="LOCKED">Locked</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="flex items-center justify-end gap-2">
+          {hasActiveFilters && (
+            <Button variant="ghost" size="sm" className="h-9" onClick={clearFilters}>
+              <X className="mr-1.5 h-3.5 w-3.5" /> Clear
+            </Button>
+          )}
+          <ColumnVisibilityMenu
+            columns={columns}
+            visibility={visibility}
+            onToggle={toggle}
+            onSetAll={setAll}
+            onReset={reset}
+            className="h-9"
+          />
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="rounded-md border overflow-hidden">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {show("head_id") && (
+                  <SortableHeader label="Head #" sortKey="head_id" className={cn("w-24 pl-4", edgeRight("head_id"))} {...sortProps} />
+                )}
+                {show("product_code") && (
+                  <SortableHeader label="Product" sortKey="product_code" className={edgeRight("product_code")} {...sortProps} />
+                )}
+                {show("status") && (
+                  <SortableHeader label="Status" sortKey="status" className={cn("w-28", edgeRight("status"))} {...sortProps} />
+                )}
+                {show("version") && (
+                  <SortableHeader label="Version" sortKey="version" className={cn("w-24", edgeRight("version"))} {...sortProps} />
+                )}
+                {show("level_count") && (
+                  <SortableHeader label="# levels" sortKey="level_count" className={cn("w-24 text-right", edgeRight("level_count"))} {...sortProps} />
+                )}
+                {show("rm_count") && (
+                  <SortableHeader label="# RM" sortKey="rm_count" className={cn("w-20 text-right", edgeRight("rm_count"))} {...sortProps} />
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {isLoading &&
+                Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i}>
+                    {show("head_id") && <TableCell className="pl-4"><Skeleton className="h-4 w-12" /></TableCell>}
+                    {show("product_code") && <TableCell><Skeleton className="h-4 w-40" /></TableCell>}
+                    {show("status") && <TableCell><Skeleton className="h-5 w-16 rounded-full" /></TableCell>}
+                    {show("version") && <TableCell><Skeleton className="h-4 w-8" /></TableCell>}
+                    {show("level_count") && <TableCell className="text-right"><Skeleton className="ml-auto h-4 w-8" /></TableCell>}
+                    {show("rm_count") && <TableCell className="text-right"><Skeleton className="ml-auto h-4 w-8" /></TableCell>}
+                  </TableRow>
+                ))}
+              {!isLoading && items.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={ROUTE_COLUMNS.filter((c) => show(c.id)).length} className="p-0">
+                    <EmptyState
+                      icon={GitFork}
+                      title="No routes found"
+                      description="Promote a routing draft or adjust your search filters."
+                      className="border-0 rounded-none"
+                    />
+                  </TableCell>
+                </TableRow>
+              )}
+              {items.map((h) => (
+                <TableRow key={h.headId} className="relative cursor-pointer hover:bg-muted/50">
+                  {show("head_id") && (
+                    <TableCell className={cn("pl-4 font-mono text-xs", edgeRight("head_id"))}>
+                      <Link href={`/finance/routes/${h.headId}`} className="absolute inset-0">
+                        <span className="sr-only">Open route #{h.headId}</span>
+                      </Link>
+                      #{h.headId}
+                    </TableCell>
+                  )}
+                  {show("product_code") && (
+                    <TableCell className={edgeRight("product_code")}>
+                      <div className="font-medium">{h.productCode || "—"}</div>
+                      {h.productName && (
+                        <div className="text-xs text-muted-foreground">{h.productName}</div>
+                      )}
+                    </TableCell>
+                  )}
+                  {show("status") && (
+                    <TableCell className={edgeRight("status")}>
+                      <StatusBadge status={h.routingStatus} type="route" size="sm" />
+                    </TableCell>
+                  )}
+                  {show("version") && (
+                    <TableCell className={cn("text-sm", edgeRight("version"))}>v{h.version}</TableCell>
+                  )}
+                  {show("level_count") && (
+                    <TableCell className={cn("text-right text-sm tabular-nums", edgeRight("level_count"))}>{h.levelCount}</TableCell>
+                  )}
+                  {show("rm_count") && (
+                    <TableCell className={cn("text-right text-sm tabular-nums", edgeRight("rm_count"))}>{h.rmCount}</TableCell>
+                  )}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {totalItems > 0 && (
+        <DataTablePagination
+          currentPage={filters.page ?? 1}
+          pageSize={filters.pageSize ?? 20}
+          totalItems={totalItems}
+          totalPages={totalPages}
+          onPageChange={(page) => setFilters({ ...filters, page })}
+          onPageSizeChange={(pageSize) => setFilters({ ...filters, pageSize, page: 1 })}
+        />
+      )}
+
+      <Dialog open={resolverOpen} onOpenChange={setResolverOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New route</DialogTitle>
+          </DialogHeader>
+          <RoutingResolver
+            requestId={0}
+            onResolved={(headId) => {
+              setResolverOpen(false)
+              router.push(`/finance/routes/${headId}`)
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/src/app/api/v1/finance/cost-product-requests/[requestId]/route.ts b/src/app/api/v1/finance/cost-product-requests/[requestId]/route.ts
index efd906a..b138655 100644
--- a/src/app/api/v1/finance/cost-product-requests/[requestId]/route.ts
+++ b/src/app/api/v1/finance/cost-product-requests/[requestId]/route.ts
@@ -6,8 +6,10 @@ type SpecBody = {
   rawMaterialType?: string
   productDescription?: string
   shadeId?: number | string
-  shadeCustomText?: string
+  shadeCode?: string
+  shadeName?: string
   paperTubeTypeId?: number | string
+  tubeType?: number
   weightPerBobbinKg?: string
   boxType?: string
 }
@@ -18,8 +20,10 @@ function normalizeSpec(spec: SpecBody | undefined | null) {
     rawMaterialType: spec.rawMaterialType ?? "",
     productDescription: spec.productDescription ?? "",
     shadeId: Number(spec.shadeId ?? 0) || 0,
-    shadeCustomText: spec.shadeCustomText ?? "",
+    shadeCode: spec.shadeCode ?? "",
+    shadeName: spec.shadeName ?? "",
     paperTubeTypeId: Number(spec.paperTubeTypeId ?? 0) || 0,
+    tubeType: Number(spec.tubeType ?? 0) || 0,
     weightPerBobbinKg: spec.weightPerBobbinKg ?? "",
     boxType: spec.boxType ?? "",
   }
@@ -57,6 +61,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
         urgencyLevel: body.urgencyLevel ?? body.urgency_level ?? "",
         neededByDate: body.neededByDate ?? body.needed_by_date ?? "",
         spec: normalizeSpec(body.spec),
+        referenceProductSysId: Number(body.referenceProductSysId ?? body.reference_product_sys_id ?? 0) || 0,
       },
       metadata,
     )
diff --git a/src/app/api/v1/finance/cost-product-requests/[requestId]/submit-and-decide/route.ts b/src/app/api/v1/finance/cost-product-requests/[requestId]/submit-and-decide/route.ts
new file mode 100644
index 0000000..47a8171
--- /dev/null
+++ b/src/app/api/v1/finance/cost-product-requests/[requestId]/submit-and-decide/route.ts
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCostProductRequestClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ requestId: string }> }) {
+  try {
+    const { requestId } = await params
+    const body = await request.json()
+    const metadata = createMetadataFromRequest(request)
+    const client = getCostProductRequestClient()
+    const response = await client.submitAndDecideCostProductRequest({
+      requestId: Number(requestId),
+      verifiedClassification: body.verifiedClassification || body.verified_classification,
+      overrideReason: body.overrideReason || body.override_reason || "",
+      decision: body.decision,
+      note: body.note || "",
+      referenceProductHeadId: body.referenceProductHeadId || body.reference_product_head_id || 0,
+    }, metadata)
+    return NextResponse.json({ base: response.base, data: response.data })
+  } catch (error) {
+    if (isGrpcError(error)) return handleGrpcError(error)
+    return NextResponse.json({ base: { isSuccess: false, statusCode: "500", message: "Failed to submit and decide", validationErrors: [] } }, { status: 500 })
+  }
+}
diff --git a/src/app/api/v1/finance/cost-product-requests/export/route.ts b/src/app/api/v1/finance/cost-product-requests/export/route.ts
new file mode 100644
index 0000000..b0f541e
--- /dev/null
+++ b/src/app/api/v1/finance/cost-product-requests/export/route.ts
@@ -0,0 +1,45 @@
+// GET /api/v1/finance/cost-product-requests/export - Export cost product requests to Excel
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostProductRequestClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+export async function GET(request: NextRequest) {
+    try {
+        const { searchParams } = new URL(request.url)
+        const metadata = createMetadataFromRequest(request)
+        const client = getCostProductRequestClient()
+
+        const response = await client.exportCostProductRequests(
+            {
+                search: searchParams.get("search") || "",
+                status: searchParams.get("status") || "",
+                requestTypeId: Number(searchParams.get("requestTypeId") || searchParams.get("request_type_id")) || 0,
+            },
+            metadata
+        )
+
+        // Convert Uint8Array to base64 string for JSON serialization
+        // Proto parser (bytesFromBase64) expects base64 string, not Uint8Array object
+        const fileContentBase64 = Buffer.from(response.fileContent).toString('base64')
+
+        return NextResponse.json({
+            base: response.base,
+            fileContent: fileContentBase64,
+            fileName: response.fileName,
+        })
+    } catch (error) {
+        if (isGrpcError(error)) return handleGrpcError(error)
+        console.error("Error exporting cost product requests:", error)
+        return NextResponse.json(
+            {
+                base: {
+                    isSuccess: false,
+                    statusCode: "500",
+                    message: "Failed to export product requests",
+                    validationErrors: [],
+                },
+            },
+            { status: 500 }
+        )
+    }
+}
diff --git a/src/app/api/v1/finance/cost-product-requests/import/route.ts b/src/app/api/v1/finance/cost-product-requests/import/route.ts
new file mode 100644
index 0000000..10ee6a0
--- /dev/null
+++ b/src/app/api/v1/finance/cost-product-requests/import/route.ts
@@ -0,0 +1,49 @@
+// POST /api/v1/finance/cost-product-requests/import - Import cost product requests from Excel
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostProductRequestClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+export async function POST(request: NextRequest) {
+    try {
+        const body = await request.json()
+        const metadata = createMetadataFromRequest(request)
+        const client = getCostProductRequestClient()
+
+        // Convert fileContent array to Uint8Array for gRPC
+        const fileContentBytes = new Uint8Array(body.fileContent)
+
+        const response = await client.importCostProductRequests({
+            fileContent: fileContentBytes,
+            fileName: body.fileName,
+            duplicateAction: body.duplicateAction,
+        }, metadata)
+
+        return NextResponse.json({
+            base: response.base,
+            successCount: response.successCount,
+            skippedCount: response.skippedCount,
+            updatedCount: response.updatedCount,
+            failedCount: response.failedCount,
+            errors: response.errors,
+        })
+    } catch (error) {
+        if (isGrpcError(error)) return handleGrpcError(error)
+        console.error("Error importing cost product requests:", error)
+        return NextResponse.json(
+            {
+                base: {
+                    isSuccess: false,
+                    statusCode: "500",
+                    message: "Failed to import product requests",
+                    validationErrors: [],
+                },
+                successCount: 0,
+                skippedCount: 0,
+                updatedCount: 0,
+                failedCount: 0,
+                errors: [],
+            },
+            { status: 500 }
+        )
+    }
+}
diff --git a/src/app/api/v1/finance/cost-product-requests/route.ts b/src/app/api/v1/finance/cost-product-requests/route.ts
index 66dd4b7..f5861e7 100644
--- a/src/app/api/v1/finance/cost-product-requests/route.ts
+++ b/src/app/api/v1/finance/cost-product-requests/route.ts
@@ -8,8 +8,10 @@ type SpecBody = {
   rawMaterialType?: string
   productDescription?: string
   shadeId?: number | string
-  shadeCustomText?: string
+  shadeCode?: string
+  shadeName?: string
   paperTubeTypeId?: number | string
+  tubeType?: number
   weightPerBobbinKg?: string
   boxType?: string
 }
@@ -20,8 +22,10 @@ function normalizeSpec(spec: SpecBody | undefined | null) {
     rawMaterialType: spec.rawMaterialType ?? "",
     productDescription: spec.productDescription ?? "",
     shadeId: Number(spec.shadeId ?? 0) || 0,
-    shadeCustomText: spec.shadeCustomText ?? "",
+    shadeCode: spec.shadeCode ?? "",
+    shadeName: spec.shadeName ?? "",
     paperTubeTypeId: Number(spec.paperTubeTypeId ?? 0) || 0,
+    tubeType: Number(spec.tubeType ?? 0) || 0,
     weightPerBobbinKg: spec.weightPerBobbinKg ?? "",
     boxType: spec.boxType ?? "",
   }
@@ -73,6 +77,7 @@ export async function POST(request: NextRequest) {
         urgencyLevel: body.urgencyLevel ?? body.urgency_level ?? "",
         neededByDate: body.neededByDate ?? body.needed_by_date ?? "",
         spec: normalizeSpec(body.spec),
+        referenceProductSysId: Number(body.referenceProductSysId ?? body.reference_product_sys_id ?? 0) || 0,
       },
       metadata,
     )
diff --git a/src/app/api/v1/finance/cost-product-requests/template/route.ts b/src/app/api/v1/finance/cost-product-requests/template/route.ts
new file mode 100644
index 0000000..baa0d54
--- /dev/null
+++ b/src/app/api/v1/finance/cost-product-requests/template/route.ts
@@ -0,0 +1,35 @@
+// GET /api/v1/finance/cost-product-requests/template - Download import template
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostProductRequestClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+export async function GET(request: NextRequest) {
+    try {
+        const metadata = createMetadataFromRequest(request)
+        const client = getCostProductRequestClient()
+        const response = await client.getCostProductRequestImportTemplate({}, metadata)
+
+        // Convert Uint8Array to base64 string for JSON serialization
+        const fileContentBase64 = Buffer.from(response.fileContent).toString('base64')
+
+        return NextResponse.json({
+            base: response.base,
+            fileContent: fileContentBase64,
+            fileName: response.fileName,
+        })
+    } catch (error) {
+        if (isGrpcError(error)) return handleGrpcError(error)
+        console.error("Error downloading cost product request template:", error)
+        return NextResponse.json(
+            {
+                base: {
+                    isSuccess: false,
+                    statusCode: "500",
+                    message: "Failed to download template",
+                    validationErrors: [],
+                },
+            },
+            { status: 500 }
+        )
+    }
+}
diff --git a/src/app/api/v1/finance/routes/[headId]/graph/route.ts b/src/app/api/v1/finance/routes/[headId]/graph/route.ts
index f44a343..7001186 100644
--- a/src/app/api/v1/finance/routes/[headId]/graph/route.ts
+++ b/src/app/api/v1/finance/routes/[headId]/graph/route.ts
@@ -49,6 +49,9 @@ function normalizeGraphForSave(graph: unknown): unknown {
                 rmProductSysId: n0(r.rmProductSysId),
                 uomId: n0(r.uomId),
                 routeRmRatio: n0(r.routeRmRatio) || 1,
+                // double position fields — undefined throws in ts-proto BinaryWriter.
+                positionX: n0(r.positionX),
+                positionY: n0(r.positionY),
               }
             }),
           }
diff --git a/src/components/common/paper-tube-name.tsx b/src/components/common/paper-tube-name.tsx
index f518d6c..561a342 100644
--- a/src/components/common/paper-tube-name.tsx
+++ b/src/components/common/paper-tube-name.tsx
@@ -1,18 +1,35 @@
 "use client"
 
-// PaperTubeName — resolves a cost_paper_tube_type ID to its code + display name
-// via the existing TanStack-cached useCostPaperTubeTypes hook. Avoids the
-// "Paper tube: #3" UUID-style display in spec / detail sections.
+// PaperTubeName — displays a product spec's tube classification.
+// Prefers the fixed Paper/Plastic `tubeType` enum (product-request-workflow-
+// revamp D3) when set — a static label, no lookup needed. Falls back to
+// resolving the legacy `cost_paper_tube_type` master-data ID (via the
+// TanStack-cached useCostPaperTubeTypes hook) for historical rows that only
+// have `paperTubeTypeId` and no `tubeType`.
 import { useCostPaperTubeTypes } from "@/hooks/finance/use-cost-paper-tube-type"
+import { TubeType } from "@/types/generated/finance/v1/cost_product_request"
 
 interface Props {
   id: number | undefined | null
+  tubeType?: TubeType
   className?: string
 }
 
-export function PaperTubeName({ id, className }: Props) {
+const TUBE_TYPE_LABELS: Partial<Record<TubeType, string>> = {
+  [TubeType.TUBE_TYPE_PAPER]: "Paper",
+  [TubeType.TUBE_TYPE_PLASTIC]: "Plastic",
+}
+
+export function PaperTubeName({ id, tubeType, className }: Props) {
+  const legacyLookupEnabled = !tubeType && !!id
   const { data, isLoading } = useCostPaperTubeTypes()
-  if (!id) return <span className={className}>—</span>
+
+  if (tubeType) {
+    const label = TUBE_TYPE_LABELS[tubeType]
+    if (label) return <span className={className}>{label}</span>
+  }
+
+  if (!legacyLookupEnabled) return <span className={className}>—</span>
   if (isLoading) return <span className={className}>Loading…</span>
   const match = (data ?? []).find((p) => p.paperTubeTypeId === id)
   if (!match) {
diff --git a/src/components/common/user-avatar.tsx b/src/components/common/user-avatar.tsx
new file mode 100644
index 0000000..ef8a0fd
--- /dev/null
+++ b/src/components/common/user-avatar.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+// UserAvatar — shared avatar component. Renders the user's uploaded photo
+// (mst_user.profile_picture_url, surfaced as `profilePictureUrl` on UserDetail)
+// when available, falling back to initials. Consolidates three previously
+// duplicated implementations:
+//   - cost-request-comment/comments-panel.tsx's `UserInitials` (deterministic
+//     per-userId color hash fallback — pass `colorHash` to reproduce that look)
+//   - nav/nav-user.tsx (plain shadcn fallback, already-resolved avatar/name)
+//   - profile/profile-header.tsx (plain shadcn fallback, already-resolved avatarUrl/name)
+//
+// Callers that already have `avatarUrl`/`fullName` (nav-user, profile-header)
+// pass them directly and no lookup happens. Callers that only have a `userId`
+// (comment threads) let this component resolve both via useUser().
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { useUser as useIamUser } from "@/hooks/iam/use-users"
+
+const AVATAR_COLORS = [
+  "bg-blue-100 text-blue-700",
+  "bg-emerald-100 text-emerald-700",
+  "bg-violet-100 text-violet-700",
+  "bg-orange-100 text-orange-700",
+  "bg-pink-100 text-pink-700",
+  "bg-cyan-100 text-cyan-700",
+]
+
+/** Deterministic per-userId color hash — same user always gets the same color. */
+function avatarColor(userId: string): string {
+  const hash = (userId || "").split("").reduce((a, c) => a + c.charCodeAt(0), 0)
+  return AVATAR_COLORS[hash % AVATAR_COLORS.length]
+}
+
+export interface UserAvatarProps {
+  /** IAM user id. When `avatarUrl`/`fullName` aren't passed directly, both are resolved via useUser(). */
+  userId?: string | null
+  /** Pre-resolved full name — skips the name portion of the lookup when provided. */
+  fullName?: string
+  /** Pre-resolved avatar URL — skips the avatar portion of the lookup when provided. */
+  avatarUrl?: string | null
+  /** Applied to the outer Avatar element — controls size/shape, e.g. "h-8 w-8 rounded-lg". */
+  className?: string
+  /** Applied to AvatarFallback — controls fallback text styling. */
+  fallbackClassName?: string
+  /**
+   * When true, the fallback background uses the deterministic per-userId color hash
+   * (the look originally used in comment threads' `UserInitials`). Defaults to false,
+   * matching the plain shadcn muted fallback already used by nav-user/profile-header.
+   */
+  colorHash?: boolean
+}
+
+export function UserAvatar({
+  userId,
+  fullName: fullNameProp,
+  avatarUrl: avatarUrlProp,
+  className,
+  fallbackClassName,
+  colorHash = false,
+}: UserAvatarProps) {
+  // Only hit the network when the caller hasn't already resolved both fields
+  // (mirrors the enabled: !!id guard inside useUser/createCrudHooks).
+  const needsLookup = fullNameProp === undefined || avatarUrlProp === undefined
+  const { data: resp } = useIamUser(needsLookup ? userId || "" : "")
+  const detail = resp?.data?.detail
+
+  const fullName = fullNameProp ?? detail?.fullName ?? ""
+  const avatarUrl = avatarUrlProp ?? detail?.profilePictureUrl ?? undefined
+
+  const initials = fullName
+    ? fullName.trim().split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2)
+    : (userId || "?").charAt(0).toUpperCase()
+
+  const hashClass = colorHash && userId ? avatarColor(userId) : ""
+
+  return (
+    <Avatar className={className} title={fullName || userId || undefined}>
+      {avatarUrl && <AvatarImage src={avatarUrl} alt={fullName || userId || "User"} />}
+      <AvatarFallback className={[hashClass, fallbackClassName].filter(Boolean).join(" ")}>
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/src/components/finance/cost-product-master/product-master-table.tsx b/src/components/finance/cost-product-master/product-master-table.tsx
index 92309ee..490cabf 100644
--- a/src/components/finance/cost-product-master/product-master-table.tsx
+++ b/src/components/finance/cost-product-master/product-master-table.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useMemo } from "react"
-import { useRouter } from "next/navigation"
+import Link from "next/link"
 import { Edit, Eye, Package, Power } from "lucide-react"
 
 import { ProductTypeName } from "@/components/common/product-type-name"
@@ -62,7 +62,6 @@ export function ProductMasterTable({
   onSort,
   visibility,
 }: Props) {
-  const router = useRouter()
   const show = (id: string) => visibility[id] !== false
   const visibleCount = PRODUCT_MASTER_COLUMNS.filter((c) => show(c.id)).length + 1 // +1 actions
 
@@ -133,13 +132,14 @@ export function ProductMasterTable({
               </TableRow>
             )}
             {items.map((p) => (
-              <TableRow
-                key={p.productSysId}
-                className="cursor-pointer hover:bg-muted/50"
-                onClick={() => router.push(`/finance/product-master/${p.productSysId}`)}
-              >
+              <TableRow key={p.productSysId} className="relative cursor-pointer hover:bg-muted/50">
                 {show("product_code") && (
-                  <TableCell className="pl-4 font-mono text-xs">{p.productCode}</TableCell>
+                  <TableCell className="pl-4 font-mono text-xs">
+                    <Link href={`/finance/product-master/${p.productSysId}`} className="absolute inset-0">
+                      <span className="sr-only">View {p.productCode}</span>
+                    </Link>
+                    {p.productCode}
+                  </TableCell>
                 )}
                 {show("product_name") && <TableCell>{p.productName}</TableCell>}
                 {show("product_type_code") && (
@@ -166,7 +166,7 @@ export function ProductMasterTable({
                   </TableCell>
                 )}
                 <TableCell
-                  className="pr-4 text-right space-x-1"
+                  className="relative z-10 pr-4 text-right space-x-1"
                   onClick={(e) => e.stopPropagation()}
                 >
                   <Button size="icon" variant="ghost" onClick={() => onView(p)} title="View">
diff --git a/src/components/finance/cost-product-request/cost-product-request-import-dialog.tsx b/src/components/finance/cost-product-request/cost-product-request-import-dialog.tsx
new file mode 100644
index 0000000..f01ba27
--- /dev/null
+++ b/src/components/finance/cost-product-request/cost-product-request-import-dialog.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Loader2, Upload, Download, FileSpreadsheet, AlertCircle, CheckCircle2 } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import type { ImportError } from "@/types/finance/cost-product-request"
+import {
+  useImportCostProductRequests,
+  useDownloadCostProductRequestTemplate,
+} from "@/hooks/finance/use-cost-product-request"
+import { readFileAsBytes } from "@/lib/api"
+
+interface CostProductRequestImportDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSuccess?: () => void
+}
+
+interface ImportResult {
+  successCount: number
+  skippedCount: number
+  updatedCount: number
+  failedCount: number
+  errors: ImportError[]
+}
+
+// duplicate_action has no skip/update effect server-side for this create-only
+// import (design.md §4 D6) — fixed to "error" (a no-op value here) rather than
+// exposing a selector the user would expect to actually change behavior.
+const CREATE_ONLY_DUPLICATE_ACTION = "error"
+
+export function CostProductRequestImportDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+}: CostProductRequestImportDialogProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [importResult, setImportResult] = useState<ImportResult | null>(null)
+
+  const importMutation = useImportCostProductRequests()
+  const templateMutation = useDownloadCostProductRequestTemplate()
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      // Validate file type
+      const validTypes = [
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "application/vnd.ms-excel",
+      ]
+      if (!validTypes.includes(file.type) && !file.name.match(/\.(xlsx|xls)$/i)) {
+        alert("Please select a valid Excel file (.xlsx or .xls)")
+        return
+      }
+      setSelectedFile(file)
+      setImportResult(null)
+    }
+  }
+
+  const handleImport = async () => {
+    if (!selectedFile) return
+
+    try {
+      const fileContent = await readFileAsBytes(selectedFile)
+      const response = await importMutation.mutateAsync({
+        fileContent,
+        fileName: selectedFile.name,
+        duplicateAction: CREATE_ONLY_DUPLICATE_ACTION,
+      })
+
+      setImportResult({
+        successCount: response.successCount,
+        skippedCount: response.skippedCount,
+        updatedCount: response.updatedCount,
+        failedCount: response.failedCount,
+        errors: response.errors,
+      })
+
+      if (response.successCount > 0) {
+        onSuccess?.()
+      }
+    } catch (error) {
+      console.error("Import failed:", error)
+    }
+  }
+
+  const handleDownloadTemplate = async () => {
+    try {
+      await templateMutation.mutateAsync()
+    } catch (error) {
+      console.error("Failed to download template:", error)
+    }
+  }
+
+  const handleClose = () => {
+    setSelectedFile(null)
+    setImportResult(null)
+    onOpenChange(false)
+  }
+
+  const isProcessing = importMutation.isPending || templateMutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>Import Product Requests</DialogTitle>
+          <DialogDescription>
+            Import product requests from an Excel file. Each row creates a new
+            draft request. Download the template first to ensure proper
+            formatting.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Template Download */}
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="flex items-center gap-3">
+              <FileSpreadsheet className="h-8 w-8 text-green-600" />
+              <div>
+                <p className="font-medium">Import Template</p>
+                <p className="text-sm text-muted-foreground">
+                  Download the Excel template with required columns
+                </p>
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleDownloadTemplate}
+              disabled={isProcessing}
+            >
+              {templateMutation.isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Download className="mr-2 h-4 w-4" />
+              )}
+              Download
+            </Button>
+          </div>
+
+          {/* File Upload */}
+          <div className="space-y-2">
+            <Label>Select File</Label>
+            <div
+              className="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors hover:border-primary/50"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".xlsx,.xls"
+                onChange={handleFileSelect}
+                className="hidden"
+              />
+              {selectedFile ? (
+                <div className="flex items-center gap-2">
+                  <FileSpreadsheet className="h-6 w-6 text-green-600" />
+                  <span className="font-medium">{selectedFile.name}</span>
+                  <span className="text-sm text-muted-foreground">
+                    ({(selectedFile.size / 1024).toFixed(1)} KB)
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <Upload className="mb-2 h-8 w-8 text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    Click to select or drag and drop an Excel file
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Supported: .xlsx, .xls
+                  </p>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Import Result */}
+          {importResult && (
+            <div className="rounded-lg border p-4 space-y-3">
+              <div className="flex items-center gap-2">
+                {importResult.failedCount === 0 ? (
+                  <CheckCircle2 className="h-5 w-5 text-green-600" />
+                ) : (
+                  <AlertCircle className="h-5 w-5 text-yellow-600" />
+                )}
+                <span className="font-medium">Import Complete</span>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Created:</span>
+                  <span className="font-medium text-green-600">
+                    {importResult.successCount}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Failed:</span>
+                  <span className="font-medium text-destructive">
+                    {importResult.failedCount}
+                  </span>
+                </div>
+              </div>
+
+              {importResult.errors.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-destructive">
+                    Errors:
+                  </p>
+                  <ScrollArea className="h-32 rounded border p-2">
+                    <ul className="space-y-1 text-sm">
+                      {importResult.errors.map((error, index) => (
+                        <li key={index} className="text-destructive">
+                          Row {error.rowNumber}: {error.field} - {error.message}
+                        </li>
+                      ))}
+                    </ul>
+                  </ScrollArea>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isProcessing}>
+            {importResult ? "Close" : "Cancel"}
+          </Button>
+          {!importResult && (
+            <Button
+              onClick={handleImport}
+              disabled={!selectedFile || isProcessing}
+            >
+              {importMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Import
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/components/finance/cost-product-request/create-routing-wizard.tsx b/src/components/finance/cost-product-request/create-routing-wizard.tsx
deleted file mode 100644
index bf76660..0000000
--- a/src/components/finance/cost-product-request/create-routing-wizard.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-"use client"
-
-import { useRouter } from "next/navigation"
-import { useState } from "react"
-import { toast } from "sonner"
-
-import { ProductMasterCombobox } from "@/components/finance/comboboxes/product-master-combobox"
-import { ProductTypeCombobox } from "@/components/finance/comboboxes/product-type-combobox"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { useCreateCostProductMaster } from "@/hooks/finance/use-cost-product-master"
-import { useCreateRouteFromProduct } from "@/hooks/finance/use-cost-route"
-
-interface Props {
-  open: boolean
-  onClose: () => void
-  /** Pass 0 when launched from Routes list (no auto-link to a request). */
-  requestId: number
-}
-
-type Mode = "existing" | "new"
-
-export function CreateRoutingWizard({ open, onClose, requestId }: Props) {
-  const router = useRouter()
-  const [step, setStep] = useState<1 | 2>(1)
-  const [mode, setMode] = useState<Mode>("existing")
-  const [existingProductSysId, setExistingProductSysId] = useState<number | undefined>()
-  const [newProduct, setNewProduct] = useState({
-    name: "",
-    typeId: 0,
-    shade: "",
-    grade: "AX",
-    description: "",
-  })
-
-  const createProductM = useCreateCostProductMaster()
-  const createRouteM = useCreateRouteFromProduct()
-
-  const reset = () => {
-    setStep(1)
-    setMode("existing")
-    setExistingProductSysId(undefined)
-    setNewProduct({ name: "", typeId: 0, shade: "", grade: "AX", description: "" })
-  }
-
-  const handleClose = () => {
-    reset()
-    onClose()
-  }
-
-  const handleSubmit = async () => {
-    try {
-      let productSysId = existingProductSysId
-      if (mode === "new") {
-        const created = await createProductM.mutateAsync({
-          productTypeId: newProduct.typeId,
-          productName: newProduct.name,
-          shadeCode: newProduct.shade,
-          gradeCode: newProduct.grade || "AX",
-          description: newProduct.description,
-        })
-        productSysId = created.productSysId
-        if (!productSysId) throw new Error("Product master create returned no sys id")
-      }
-      if (!productSysId) {
-        toast.error("Pick or create a product first")
-        return
-      }
-      const newHeadId = await createRouteM.mutateAsync({
-        productSysId,
-        linkedRequestId: requestId,
-      })
-      handleClose()
-      router.push(`/finance/routes/${newHeadId}`)
-    } catch {
-      // Mutation hooks already surface a toast; avoid double-toasting.
-    }
-  }
-
-  const canSubmitStep1 = mode === "existing" && !!existingProductSysId
-  const canSubmitStep2 =
-    mode === "new" && newProduct.name.trim().length > 0 && newProduct.typeId > 0
-
-  return (
-    <Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
-      <DialogContent className="max-w-xl">
-        <DialogHeader>
-          <DialogTitle>Create new routing {mode === "new" ? `(step ${step} of 2)` : ""}</DialogTitle>
-        </DialogHeader>
-
-        {step === 1 && (
-          <div className="space-y-3">
-            <Label>FG product source</Label>
-            <RadioGroup value={mode} onValueChange={(v) => setMode(v as Mode)}>
-              <div className="flex items-center gap-2">
-                <RadioGroupItem value="existing" id="m-existing" />
-                <Label htmlFor="m-existing">Pick existing product master</Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <RadioGroupItem value="new" id="m-new" />
-                <Label htmlFor="m-new">Create new product master</Label>
-              </div>
-            </RadioGroup>
-            {mode === "existing" && (
-              <div className="space-y-1">
-                <Label>Product (existing master)</Label>
-                <ProductMasterCombobox
-                  value={existingProductSysId}
-                  onChange={(id) => setExistingProductSysId(id)}
-                  placeholder="Search product by code or name…"
-                />
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {requestId > 0
-                    ? "The new route will be linked to this request."
-                    : "Standalone route (no request link)."}
-                </p>
-              </div>
-            )}
-            {mode === "new" && (
-              <p className="text-xs text-muted-foreground">
-                Next: provide the new product master fields (code is auto-generated).
-              </p>
-            )}
-          </div>
-        )}
-
-        {step === 2 && (
-          <div className="space-y-3">
-            <div>
-              <Label>Product name *</Label>
-              <Input
-                value={newProduct.name}
-                onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
-                placeholder="e.g. PTY 75/72 SD BRIGHT"
-              />
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <Label>Product type *</Label>
-                <ProductTypeCombobox
-                  value={newProduct.typeId || undefined}
-                  onChange={(id) => setNewProduct({ ...newProduct, typeId: id })}
-                />
-              </div>
-              <div>
-                <Label>Grade code</Label>
-                <Input
-                  value={newProduct.grade}
-                  onChange={(e) => setNewProduct({ ...newProduct, grade: e.target.value })}
-                />
-              </div>
-            </div>
-            <div>
-              <Label>Shade code (optional)</Label>
-              <Input
-                value={newProduct.shade}
-                onChange={(e) => setNewProduct({ ...newProduct, shade: e.target.value })}
-              />
-            </div>
-            <div>
-              <Label>Description (optional)</Label>
-              <Input
-                value={newProduct.description}
-                onChange={(e) => setNewProduct({ ...newProduct, description: e.target.value })}
-              />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Product code is auto-generated. Required parameters (CAPP) are empty initially — open
-              the new product master after creation to fill values.
-            </p>
-          </div>
-        )}
-
-        <DialogFooter>
-          {step === 2 && (
-            <Button
-              variant="ghost"
-              onClick={() => setStep(1)}
-              disabled={createProductM.isPending || createRouteM.isPending}
-            >
-              Back
-            </Button>
-          )}
-          <Button variant="ghost" onClick={handleClose}>
-            Cancel
-          </Button>
-          {step === 1 && mode === "existing" && (
-            <Button disabled={!canSubmitStep1 || createRouteM.isPending} onClick={handleSubmit}>
-              {createRouteM.isPending ? "Creating…" : "Create route"}
-            </Button>
-          )}
-          {step === 1 && mode === "new" && <Button onClick={() => setStep(2)}>Next</Button>}
-          {step === 2 && (
-            <Button
-              disabled={!canSubmitStep2 || createProductM.isPending || createRouteM.isPending}
-              onClick={handleSubmit}
-            >
-              {createProductM.isPending || createRouteM.isPending ? "Creating…" : "Create product + route"}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/src/components/finance/cost-product-request/index.ts b/src/components/finance/cost-product-request/index.ts
index 341c953..72bac6a 100644
--- a/src/components/finance/cost-product-request/index.ts
+++ b/src/components/finance/cost-product-request/index.ts
@@ -2,6 +2,7 @@ export { RequestFormDialog } from "./request-form-dialog"
 export { RequestTable, buildColumns, useRequestTableColumns, TABLE_ID } from "./request-table"
 export { RequestDetailPanel } from "./request-detail-panel"
 export { StatusBadge } from "./status-badge"
-export { CloseDialog, ConfirmActionDialog, FeasibilityDialog, ReasonDialog, UseExistingCostingDialog, VerifyClassificationDialog } from "./transition-dialogs"
+export { ClassificationAndFeasibilityDialog, CloseDialog, ConfirmActionDialog, ReasonDialog, UseExistingCostingDialog } from "./transition-dialogs"
 export { UnlockPasswordDialog } from "./unlock-password-dialog"
 export { ParamSummaryPanel } from "./param-summary-panel"
+export { CostProductRequestImportDialog } from "./cost-product-request-import-dialog"
diff --git a/src/components/finance/cost-product-request/override-params-drawer.tsx b/src/components/finance/cost-product-request/override-params-drawer.tsx
index 6f50663..869664b 100644
--- a/src/components/finance/cost-product-request/override-params-drawer.tsx
+++ b/src/components/finance/cost-product-request/override-params-drawer.tsx
@@ -1,13 +1,12 @@
 "use client"
 
 import { useState } from "react"
-import { ArrowLeft, Loader2, X } from "lucide-react"
+import { ArrowLeft, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Switch } from "@/components/ui/switch"
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
   SheetTitle,
@@ -118,12 +117,6 @@ export function OverrideParamsDrawer({
             <Button variant="ghost" size="sm" className="gap-1.5 text-xs" onClick={onClose}>
               <ArrowLeft className="h-3.5 w-3.5" /> Back
             </Button>
-            <SheetClose asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-              </Button>
-            </SheetClose>
           </div>
         </div>
 
diff --git a/src/components/finance/cost-product-request/param-detail-drawer.tsx b/src/components/finance/cost-product-request/param-detail-drawer.tsx
index 8dc497b..529f0da 100644
--- a/src/components/finance/cost-product-request/param-detail-drawer.tsx
+++ b/src/components/finance/cost-product-request/param-detail-drawer.tsx
@@ -1,9 +1,9 @@
 "use client"
 
-import { useState } from "react"
-import { ArrowLeft, Clock, Pencil, X } from "lucide-react"
+import { useMemo, useState } from "react"
+import { ArrowLeft, Clock, Pencil } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
 import { Badge } from "@/components/ui/badge"
 import { UserName } from "@/components/common/user-name"
 import { OverrideParamsDrawer } from "./override-params-drawer"
@@ -29,6 +29,73 @@ interface Props {
   routeLocked: boolean
 }
 
+function ParamGroupedList({ params }: { params: ParamValueEntry[] }) {
+  const groups = useMemo(() => {
+    const groupMinOrder: Record<string, number> = {}
+    for (const p of params) {
+      const g = p.displayGroup ?? ""
+      const cur = groupMinOrder[g]
+      if (cur === undefined || p.displayOrder < cur) {
+        groupMinOrder[g] = p.displayOrder
+      }
+    }
+    const sorted = Object.keys(groupMinOrder).sort((a, b) => {
+      if (a === "" && b !== "") return 1
+      if (b === "" && a !== "") return -1
+      return (groupMinOrder[a] ?? 0) - (groupMinOrder[b] ?? 0)
+    })
+    return sorted.map((g) => ({
+      name: g,
+      params: params
+        .filter((p) => (p.displayGroup ?? "") === g)
+        .sort((a, b) => a.displayOrder - b.displayOrder || a.paramCode.localeCompare(b.paramCode)),
+    }))
+  }, [params])
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group, i) => (
+        <div key={group.name || "__ungrouped__"}>
+          {group.name && (
+            <div className={`flex items-center gap-2 mb-1 ${i > 0 ? "mt-1" : ""}`}>
+              <span className="text-[10px] font-semibold text-foreground/80 uppercase tracking-wider shrink-0">
+                {group.name}
+              </span>
+              <div className="flex-1 h-px bg-border" />
+            </div>
+          )}
+          <div className="space-y-0.5">
+            {group.params.map((p) => (
+              <div key={p.paramCode} className="flex items-baseline gap-2">
+                <span
+                  className="w-36 shrink-0 truncate font-mono text-[11px] text-muted-foreground"
+                  title={p.paramCode}
+                >
+                  {p.paramCode}
+                </span>
+                {p.hasValue ? (
+                  <span className="font-mono text-[11px]">
+                    {p.dataType === "NUMBER"
+                      ? p.valueNumeric
+                      : p.dataType === "BOOLEAN"
+                        ? p.valueFlag
+                          ? "true"
+                          : "false"
+                        : p.valueText}
+                    {p.uomCode ? ` ${p.uomCode}` : ""}
+                  </span>
+                ) : (
+                  <span className="font-medium text-destructive text-[11px]">——</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 function taskBadge(status: string) {
   switch (status) {
     case "APPROVED":
@@ -106,32 +173,7 @@ function LevelSection({
         </div>
       </div>
 
-      <div className="space-y-0.5">
-        {level.params.map((p) => (
-          <div key={p.paramCode} className="flex items-baseline gap-2">
-            <span
-              className="w-36 shrink-0 truncate font-mono text-[11px] text-muted-foreground"
-              title={p.paramCode}
-            >
-              {p.paramCode}
-            </span>
-            {p.hasValue ? (
-              <span className="font-mono text-[11px]">
-                {p.dataType === "NUMBER"
-                  ? p.valueNumeric
-                  : p.dataType === "BOOLEAN"
-                    ? p.valueFlag
-                      ? "true"
-                      : "false"
-                    : p.valueText}
-                {p.uomCode ? ` ${p.uomCode}` : ""}
-              </span>
-            ) : (
-              <span className="font-medium text-destructive text-[11px]">——</span>
-            )}
-          </div>
-        ))}
-      </div>
+      <ParamGroupedList params={level.params} />
 
       {level.filledByUserId && (
         <p className="text-[10px] text-muted-foreground">
@@ -185,12 +227,6 @@ export function ParamDetailDrawer({ open, onClose, requestId, product, canEdit,
               <Button variant="ghost" size="sm" className="gap-1.5 text-xs" onClick={onClose}>
                 <ArrowLeft className="h-3.5 w-3.5" /> Back
               </Button>
-              <SheetClose asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8">
-                  <X className="h-4 w-4" />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </SheetClose>
             </div>
           </div>
 
diff --git a/src/components/finance/cost-product-request/param-edit-log-drawer.tsx b/src/components/finance/cost-product-request/param-edit-log-drawer.tsx
index d5c9d66..8b5a071 100644
--- a/src/components/finance/cost-product-request/param-edit-log-drawer.tsx
+++ b/src/components/finance/cost-product-request/param-edit-log-drawer.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import { ArrowLeft, X } from "lucide-react"
+import { ArrowLeft } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useParamEditLog } from "@/hooks/finance/use-param-summary"
 
@@ -53,12 +53,6 @@ export function ParamEditLogDrawer({ open, onClose, requestId, routeLevel, produ
             <Button variant="ghost" size="sm" className="gap-1.5 text-xs" onClick={onClose}>
               <ArrowLeft className="h-3.5 w-3.5" /> Back
             </Button>
-            <SheetClose asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-              </Button>
-            </SheetClose>
           </div>
         </div>
 
diff --git a/src/components/finance/cost-product-request/param-summary-panel.tsx b/src/components/finance/cost-product-request/param-summary-panel.tsx
index 1cb694c..9341bde 100644
--- a/src/components/finance/cost-product-request/param-summary-panel.tsx
+++ b/src/components/finance/cost-product-request/param-summary-panel.tsx
@@ -97,8 +97,9 @@ export function ParamSummaryPanel({ requestId, routeLocked = false }: Props) {
                 >
                   <span className="flex-1 min-w-0">
                     <span className="font-mono font-medium truncate block">{product.productCode}</span>
+                    {product.productName && <span className="text-xs text-muted-foreground truncate block">{product.productName}</span>}
                     <span className="text-muted-foreground">
-                      {product.levels.length} level{product.levels.length !== 1 ? "s" : ""} · {productFilled}/{productTotal} params
+                      Level {product.levels.map(l => l.routeLevel).sort((a,b)=>a-b).join(", ")} · {productFilled}/{productTotal} params
                     </span>
                   </span>
                   {fillStatusBadge(productFilled, productTotal, hasRejected)}
diff --git a/src/components/finance/cost-product-request/pick-existing-route-dialog.tsx b/src/components/finance/cost-product-request/pick-existing-route-dialog.tsx
deleted file mode 100644
index 80b2f22..0000000
--- a/src/components/finance/cost-product-request/pick-existing-route-dialog.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { ProductMasterCombobox } from "@/components/finance/comboboxes/product-master-combobox"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
-import { useRouteByProduct } from "@/hooks/finance/use-cost-route"
-
-interface Props {
-  open: boolean
-  onClose: () => void
-  onPick: (headId: number) => void
-}
-
-export function PickExistingRouteDialog({ open, onClose, onPick }: Props) {
-  const [productSysId, setProductSysId] = useState<number | undefined>()
-  const [productCode, setProductCode] = useState<string>("")
-  const [productName, setProductName] = useState<string>("")
-  const { data: head } = useRouteByProduct(productSysId)
-
-  return (
-    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Pick existing product with route</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-3">
-          <div>
-            <Label>Product (must already have an active route)</Label>
-            <ProductMasterCombobox
-              value={productSysId}
-              onChange={(id, code, name) => {
-                setProductSysId(id)
-                setProductCode(code)
-                setProductName(name)
-              }}
-              placeholder="Search product by code or name…"
-            />
-          </div>
-          {productSysId && (
-            <div className="rounded border bg-muted/30 p-2 text-sm">
-              {head ? (
-                <>
-                  <div className="font-mono">
-                    Route #{head.headId} · {head.routingStatus}
-                  </div>
-                  <div className="text-muted-foreground">
-                    {productCode} — {productName}
-                  </div>
-                </>
-              ) : (
-                <span className="text-amber-700">This product does not have a route yet.</span>
-              )}
-            </div>
-          )}
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button disabled={!head} onClick={() => head && onPick(head.headId)}>
-            Link
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/src/components/finance/cost-product-request/request-detail-panel.tsx b/src/components/finance/cost-product-request/request-detail-panel.tsx
index 559acdc..2c1adcf 100644
--- a/src/components/finance/cost-product-request/request-detail-panel.tsx
+++ b/src/components/finance/cost-product-request/request-detail-panel.tsx
@@ -32,18 +32,14 @@ import { RoutingPanel } from "./routing-panel"
 import { StatusBadge } from "./status-badge"
 import { ParamSummaryPanel } from "./param-summary-panel"
 import {
+  ClassificationAndFeasibilityDialog,
   CloseDialog,
   ConfirmActionDialog,
-  FeasibilityDialog,
   ReasonDialog,
-  UseExistingCostingDialog,
-  VerifyClassificationDialog,
 } from "./transition-dialogs"
 import {
   useApproveRequest,
-  useCancelRequest,
   useConfirmRequest,
-  useDecideFeasibility,
   useMarkParameterComplete,
   useMarkParameterPending,
   useReleaseRequest,
@@ -51,9 +47,6 @@ import {
   useReopenRequest,
   useRejectRequest,
   useStartReview,
-  useSubmitRequest,
-  useUseExistingCosting,
-  useVerifyClassification,
   useCloseRequest,
 } from "@/hooks/finance/use-cost-product-request"
 import type { CostProductRequest } from "@/types/finance/cost-product-request"
@@ -72,7 +65,11 @@ interface Props {
   hasFillTracking?: boolean
 }
 
-type DialogKind = "reject" | "cancel" | "verify" | "feasibility" | "close" | "useExisting" | "confirmAction" | null
+// "submitDecide" — B3 merge (design.md §3 B3): the DRAFT "Submit" button now opens
+// ClassificationAndFeasibilityDialog in mode="submit" instead of firing a bare
+// useSubmitRequest() mutation. "reviewDecide" (mode="review", the UNDER_REVIEW flow)
+// is unchanged and stays a separate dialog kind since its retry semantics differ.
+type DialogKind = "reject" | "reviewDecide" | "submitDecide" | "close" | "confirmAction" | null
 
 export function RequestDetailPanel({ request, onEdit, allFillsApproved = false, hasFillTracking = false }: Props) {
   useCPRRealtimeSync(request.requestId)
@@ -80,15 +77,10 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
   const [dialog, setDialog] = useState<DialogKind>(null)
   const [confirmActionType, setConfirmActionType] = useState<"confirm" | "approve" | "release">("confirm")
 
-  const submitM = useSubmitRequest()
   const startM = useStartReview()
   const reviseM = useReviseRequest()
   const reopenM = useReopenRequest()
-  const useExistingM = useUseExistingCosting()
-  const verifyM = useVerifyClassification()
-  const feasibilityM = useDecideFeasibility()
   const rejectM = useRejectRequest()
-  const cancelM = useCancelRequest()
   const closeM = useCloseRequest()
   const markPendingM = useMarkParameterPending()
   const markCompleteM = useMarkParameterComplete()
@@ -176,7 +168,7 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
           </Button>
         )}
         {isDraft && canSubmit && (
-          <Button onClick={() => submitM.mutate({ requestId })} disabled={submitM.isPending}>
+          <Button onClick={() => setDialog("submitDecide")}>
             <Play className="mr-2 h-4 w-4" /> Submit
           </Button>
         )}
@@ -193,25 +185,9 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
             <Play className="mr-2 h-4 w-4" /> Promote route
           </Button>
         )}
-        {isUnderReview && canResolve && !request.verifiedClassification && (
-          <Button variant="secondary" onClick={() => setDialog("verify")}>
-            <FileCheck className="mr-2 h-4 w-4" /> Verify classification
-          </Button>
-        )}
         {isUnderReview && canResolve && (
-          <Button onClick={() => setDialog("feasibility")} disabled={feasibilityM.isPending}>
-            <CheckCircle2 className="mr-2 h-4 w-4" /> Decide feasibility
-          </Button>
-        )}
-        {isUnderReview && canResolve &&
-          (request.verifiedClassification === "existing" ||
-            (!request.verifiedClassification && request.productClassification === "existing")) && (
-          <Button
-            variant="secondary"
-            onClick={() => setDialog("useExisting")}
-            disabled={useExistingM.isPending}
-          >
-            <FileCheck className="mr-2 h-4 w-4" /> Use existing costing
+          <Button onClick={() => setDialog("reviewDecide")}>
+            <FileCheck className="mr-2 h-4 w-4" /> Review &amp; decide
           </Button>
         )}
         {(isSubmitted || isUnderReview) && canReject && (
@@ -273,9 +249,6 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
             <Button variant="outline" onClick={() => setDialog("close")}>
               Close
             </Button>
-            <Button variant="outline" className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive" onClick={() => setDialog("cancel")}>
-              <Ban className="mr-2 h-4 w-4" /> Cancel
-            </Button>
           </>
         )}
       </div>
@@ -317,38 +290,30 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
                 <Field label="Target price">{request.targetPriceRange || "—"}</Field>
                 <Field label="Requester"><UserName userId={request.requesterUserId} /></Field>
               </div>
-              {request.description && (
-                <div className="border-t pt-4">
-                  <div className="text-xs uppercase tracking-wide text-muted-foreground mb-1">Description</div>
-                  <p className="text-sm whitespace-pre-wrap">{request.description}</p>
-                </div>
-              )}
-              <div className="border-t pt-4 space-y-2">
-                <AttachmentsPanel requestId={request.requestId} readOnly={readOnly} inline />
-              </div>
             </CardContent>
           </Card>
 
-          {request.spec && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-sm font-semibold">Product specification</CardTitle>
-              </CardHeader>
-              <CardContent className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                <Field label="Raw material">{request.spec.rawMaterialType}</Field>
-                <Field label="Paper tube"><PaperTubeName id={request.spec.paperTubeTypeId} /></Field>
-                <Field label="Weight / bobbin">{request.spec.weightPerBobbinKg} kg</Field>
-                <Field label="Box type">{request.spec.boxType}</Field>
-                <Field label="Shade">{request.spec.shadeCustomText || `master #${request.spec.shadeId ?? "—"}`}</Field>
-                <div className="col-span-2 md:col-span-4">
-                  <Separator className="my-2" />
-                  <Field label="Product description">
-                    <p className="whitespace-pre-wrap">{request.spec.productDescription}</p>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm font-semibold">Product specification</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4 text-sm">
+              {request.spec && (
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <Field label="Tube">
+                    <PaperTubeName id={request.spec.paperTubeTypeId} tubeType={request.spec.tubeType} />
                   </Field>
+                  <Field label="Shade code">{request.spec.shadeCode || `master #${request.spec.shadeId ?? "—"}`}</Field>
+                  <Field label="Shade name">{request.spec.shadeName || "—"}</Field>
                 </div>
-              </CardContent>
-            </Card>
-          )}
+              )}
+              <Field label="Product description">
+                <p className="whitespace-pre-wrap">{request.spec?.productDescription || request.description || "—"}</p>
+              </Field>
+              <Separator className="my-2" />
+              <AttachmentsPanel requestId={request.requestId} readOnly={readOnly} inline />
+            </CardContent>
+          </Card>
 
           {(request.classificationOverrideReason || request.feasibilityDecision) && (
             <Card>
@@ -497,47 +462,22 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
           rejectM.mutate({ requestId, body: { reason } }, { onSuccess: () => setDialog(null) })
         }}
       />
-      <ReasonDialog
-        open={dialog === "cancel"}
-        onOpenChange={(o) => setDialog(o ? "cancel" : null)}
-        title="Cancel request"
-        description="Cancelling closes the request with sub-status = cancelled. Provide a reason."
-        confirmLabel="Cancel request"
-        pending={cancelM.isPending}
-        onConfirm={(reason) => {
-          cancelM.mutate({ requestId, body: { reason } }, { onSuccess: () => setDialog(null) })
-        }}
-      />
-      <VerifyClassificationDialog
-        open={dialog === "verify"}
-        onOpenChange={(o) => setDialog(o ? "verify" : null)}
+      <ClassificationAndFeasibilityDialog
+        open={dialog === "reviewDecide"}
+        onOpenChange={(o) => setDialog(o ? "reviewDecide" : null)}
+        requestId={requestId}
         currentClassification={request.productClassification}
-        pending={verifyM.isPending}
-        onConfirm={(verified, overrideReason) => {
-          verifyM.mutate(
-            { requestId, verifiedClassification: verified, overrideReason },
-            { onSuccess: () => setDialog(null) },
-          )
-        }}
+        initialVerifiedClassification={request.verifiedClassification}
+        referenceProductSysId={request.referenceProductSysId}
       />
-      <FeasibilityDialog
-        open={dialog === "feasibility"}
-        onOpenChange={(o) => setDialog(o ? "feasibility" : null)}
-        pending={feasibilityM.isPending}
-        onConfirm={(decision, note) => {
-          feasibilityM.mutate({ requestId, decision, note }, { onSuccess: () => setDialog(null) })
-        }}
-      />
-      <UseExistingCostingDialog
-        open={dialog === "useExisting"}
-        onOpenChange={(o) => setDialog(o ? "useExisting" : null)}
-        pending={useExistingM.isPending}
-        onConfirm={(existingProductSysId) => {
-          useExistingM.mutate(
-            { requestId, body: { existingProductSysId } },
-            { onSuccess: () => setDialog(null) },
-          )
-        }}
+      <ClassificationAndFeasibilityDialog
+        open={dialog === "submitDecide"}
+        onOpenChange={(o) => setDialog(o ? "submitDecide" : null)}
+        requestId={requestId}
+        currentClassification={request.productClassification}
+        initialVerifiedClassification={request.verifiedClassification}
+        referenceProductSysId={request.referenceProductSysId}
+        mode="submit"
       />
       <CloseDialog
         open={dialog === "close"}
diff --git a/src/components/finance/cost-product-request/request-form-dialog.tsx b/src/components/finance/cost-product-request/request-form-dialog.tsx
index 4fcc635..b2442df 100644
--- a/src/components/finance/cost-product-request/request-form-dialog.tsx
+++ b/src/components/finance/cost-product-request/request-form-dialog.tsx
@@ -1,9 +1,10 @@
 "use client"
 
-// RequestFormDialog — three-section product request form (FR-1).
-// Section 2 (Product Specification) only appears when classification = new.
-// NO UUID input anywhere — uses RequestTypeCombobox + PaperTubeTypeCombobox.
-import { useEffect, useMemo } from "react"
+// RequestFormDialog — two-section product request form (FR-1).
+// Section 2 (Product specification & pricing) is always visible; description+tube are
+// all-or-nothing, everything else in the section is independently optional.
+// NO UUID input anywhere — uses RequestTypeCombobox + a fixed Paper/Plastic Select.
+import { useEffect } from "react"
 import { Loader2 } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
@@ -23,30 +24,31 @@ import { Textarea } from "@/components/ui/textarea"
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { PaperTubeTypeCombobox, RequestTypeCombobox } from "@/components/finance/comboboxes"
-import { useCostRequestTypes } from "@/hooks/finance/use-cost-request-type"
+import { ProductMasterCombobox, RequestTypeCombobox } from "@/components/finance/comboboxes"
 import { useCreateCostProductRequest, useUpdateCostProductRequest } from "@/hooks/finance/use-cost-product-request"
-import type { CostProductRequest, ProductClassification, RawMaterialType, UrgencyLevel } from "@/types/finance/cost-product-request"
+import { TUBE_TYPE_OPTIONS, TubeType } from "@/types/finance/cost-product-request"
+import type { CostProductRequest, SpecInput, UrgencyLevel } from "@/types/finance/cost-product-request"
 
 const schema = z.object({
   requestTypeId: z.number().int().positive("Pick a request type"),
   title: z.string().min(1, "Required").max(255, "Max 255 chars"),
-  description: z.string().max(10000, "Max 10000 chars"),
   customerName: z.string().min(1, "Required").max(255, "Max 255 chars"),
   customerCode: z.string().max(50, "Max 50 chars"),
-  productClassification: z.enum(["existing", "new"]),
   urgencyLevel: z.enum(["low", "medium", "high"]),
   neededByDate: z.string().max(10, "YYYY-MM-DD").regex(/^$|^\d{4}-\d{2}-\d{2}$/, "Use YYYY-MM-DD"),
   targetVolume: z.string().max(30, "Max 30 chars"),
   targetPriceRange: z.string().max(50, "Max 50 chars"),
-  // Spec — only required when classification = new, validated below.
-  specRawMaterial: z.enum(["POY_BOUGHTOUT", "CHIPS_SD", "CHIPS_BRT", "CHIPS_RECYCLE", ""]).optional(),
+  // Reference product (product-request-workflow-revamp D4) — optional hint pointing
+  // at a similar existing product master; 0/undefined means unset.
+  referenceProductSysId: z.number().int().nonnegative().optional(),
+  // Spec — optional, all-or-nothing validated below in onSubmit.
   specProductDescription: z.string().max(5000, "Max 5000 chars").optional(),
-  specShadeCustomText: z.string().max(100, "Max 100 chars").optional(),
-  specPaperTubeTypeId: z.number().int().nonnegative().optional(),
-  specWeightPerBobbinKg: z.string().max(20, "Max 20 chars").optional(),
-  specBoxType: z.enum(["JUMBO", "NORMAL", "PALLET", ""]).optional(),
+  // Shade code/name are independently optional — not part of the all-or-nothing group.
+  specShadeCode: z.string().max(100, "Max 100 chars").optional(),
+  specShadeName: z.string().max(100, "Max 100 chars").optional(),
+  // Fixed Paper/Plastic classification (product-request-workflow-revamp D3) —
+  // replaces the old master-data paper tube combobox. UNSPECIFIED = not picked.
+  specTubeType: z.nativeEnum(TubeType).optional(),
 })
 
 type FormValues = z.infer<typeof schema>
@@ -60,67 +62,46 @@ interface Props {
 const DEFAULTS: FormValues = {
   requestTypeId: 0,
   title: "",
-  description: "",
   customerName: "",
   customerCode: "",
-  productClassification: "existing",
   urgencyLevel: "medium",
   neededByDate: "",
   targetVolume: "",
   targetPriceRange: "",
-  specRawMaterial: "",
+  referenceProductSysId: undefined,
   specProductDescription: "",
-  specShadeCustomText: "",
-  specPaperTubeTypeId: 0,
-  specWeightPerBobbinKg: "",
-  specBoxType: "",
+  specShadeCode: "",
+  specShadeName: "",
+  specTubeType: TubeType.TUBE_TYPE_UNSPECIFIED,
 }
 
 export function RequestFormDialog({ open, onOpenChange, request }: Props) {
   const isEditing = !!request && request.status === "DRAFT"
   const createMutation = useCreateCostProductRequest()
   const updateMutation = useUpdateCostProductRequest()
-  const { data: requestTypes } = useCostRequestTypes()
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema) as never,
     defaultValues: DEFAULTS,
   })
 
-  const productClassification = form.watch("productClassification")
-  const requestTypeId = form.watch("requestTypeId")
-  const selectedType = useMemo(
-    () => (requestTypes ?? []).find((t) => t.typeId === requestTypeId),
-    [requestTypes, requestTypeId],
-  )
-
-  // DEVELOPMENT always implies new classification (FR-1).
-  useEffect(() => {
-    if (selectedType?.code === "DEVELOPMENT" && form.getValues("productClassification") !== "new") {
-      form.setValue("productClassification", "new")
-    }
-  }, [selectedType, form])
-
   useEffect(() => {
     if (!open) return
     if (request) {
       form.reset({
         requestTypeId: request.requestTypeId,
         title: request.title,
-        description: request.description || "",
         customerName: request.customerName,
         customerCode: request.customerCode || "",
-        productClassification: request.productClassification,
         urgencyLevel: request.urgencyLevel,
         neededByDate: request.neededByDate || "",
         targetVolume: request.targetVolume || "",
         targetPriceRange: request.targetPriceRange || "",
-        specRawMaterial: (request.spec?.rawMaterialType as RawMaterialType) || "",
+        referenceProductSysId: request.referenceProductSysId || undefined,
         specProductDescription: request.spec?.productDescription || "",
-        specShadeCustomText: request.spec?.shadeCustomText || "",
-        specPaperTubeTypeId: request.spec?.paperTubeTypeId || 0,
-        specWeightPerBobbinKg: request.spec?.weightPerBobbinKg || "",
-        specBoxType: (request.spec?.boxType as "JUMBO" | "NORMAL" | "PALLET") || "",
+        specShadeCode: request.spec?.shadeCode || "",
+        specShadeName: request.spec?.shadeName || "",
+        specTubeType: request.spec?.tubeType || TubeType.TUBE_TYPE_UNSPECIFIED,
       })
     } else {
       form.reset(DEFAULTS)
@@ -128,56 +109,53 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
   }, [open, request, form])
 
   async function onSubmit(values: FormValues) {
-    // Cross-field rule: spec required iff classification = new.
-    if (values.productClassification === "new") {
-      if (!values.specRawMaterial) {
-        form.setError("specRawMaterial", { message: "Required for new products" })
-        return
-      }
-      if (!values.specProductDescription) {
-        form.setError("specProductDescription", { message: "Required for new products" })
-        return
-      }
-      if (!values.specPaperTubeTypeId) {
-        form.setError("specPaperTubeTypeId", { message: "Required for new products" })
-        return
-      }
-      if (!values.specWeightPerBobbinKg) {
-        form.setError("specWeightPerBobbinKg", { message: "Required for new products" })
-        return
-      }
-      if (!values.specBoxType) {
-        form.setError("specBoxType", { message: "Required for new products" })
-        return
-      }
-      if (!values.specShadeCustomText) {
-        form.setError("specShadeCustomText", { message: "Required (use 'natural' if unpigmented)" })
-        return
+    // Cross-field rule: spec is all-or-nothing — either every field is filled, or none are.
+    // Shade code/name are excluded from this group — both are independently optional.
+    const specFieldEntries: Array<[keyof FormValues, string]> = [
+      ["specProductDescription", "Fill in all spec fields, or leave all blank"],
+      ["specTubeType", "Fill in all spec fields, or leave all blank"],
+    ]
+    const isEmpty = (v: unknown) =>
+      v === undefined || v === null || v === "" || v === 0 || v === TubeType.TUBE_TYPE_UNSPECIFIED
+    const filledCount = specFieldEntries.filter(([key]) => !isEmpty(values[key])).length
+    if (filledCount > 0 && filledCount < specFieldEntries.length) {
+      for (const [key, message] of specFieldEntries) {
+        if (isEmpty(values[key])) {
+          form.setError(key, { message })
+        }
       }
+      return
     }
+    // Shade code/name never gate whether a spec is sent — they're independently
+    // optional extras included alongside the description+tube all-or-nothing group.
+    const hasSpec = filledCount === specFieldEntries.length
     const payload = {
       requestTypeId: values.requestTypeId,
       title: values.title,
-      description: values.description,
+      description: values.specProductDescription || "",
       customerName: values.customerName,
       customerCode: values.customerCode,
-      productClassification: values.productClassification as ProductClassification,
+      productClassification: isEditing && request ? request.productClassification : "pending",
       urgencyLevel: values.urgencyLevel as UrgencyLevel,
       neededByDate: values.neededByDate,
       targetVolume: values.targetVolume,
       targetPriceRange: values.targetPriceRange,
-      spec:
-        values.productClassification === "new"
-          ? {
-              rawMaterialType: values.specRawMaterial as RawMaterialType,
-              productDescription: values.specProductDescription!,
-              shadeId: 0, // master shade not picked — using free-text fallback
-              shadeCustomText: values.specShadeCustomText,
-              paperTubeTypeId: values.specPaperTubeTypeId!,
-              weightPerBobbinKg: values.specWeightPerBobbinKg!,
-              boxType: values.specBoxType as "JUMBO" | "NORMAL" | "PALLET",
-            }
-          : undefined,
+      referenceProductSysId: values.referenceProductSysId,
+      spec: hasSpec
+        ? {
+            // rawMaterialType/weightPerBobbinKg/boxType removed from the form (D1) — send
+            // empty so historical rows' columns stay unpopulated on new writes.
+            rawMaterialType: "" as SpecInput["rawMaterialType"],
+            productDescription: values.specProductDescription || "",
+            shadeId: 0, // master shade not picked — using free-text fallback
+            shadeCode: values.specShadeCode,
+            shadeName: values.specShadeName,
+            paperTubeTypeId: 0,
+            tubeType: values.specTubeType ?? TubeType.TUBE_TYPE_UNSPECIFIED,
+            weightPerBobbinKg: "",
+            boxType: "" as SpecInput["boxType"],
+          }
+        : undefined,
     }
     try {
       if (isEditing && request) {
@@ -199,8 +177,8 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
         <ScrollableDialogHeader>
           <DialogTitle>{isEditing ? `Edit ${request?.requestNo}` : "New product request"}</DialogTitle>
           <DialogDescription>
-            Section 2 (Product specification) becomes required when classification = new. DEVELOPMENT
-            requests are forced to new.
+            Product specification is optional — leave it blank, or fill in every field if you have the
+            details.
           </DialogDescription>
         </ScrollableDialogHeader>
         <Form {...form}>
@@ -292,37 +270,6 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                   )}
                 />
               </div>
-              <FormField
-                control={form.control}
-                name="productClassification"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Product classification *</FormLabel>
-                    <FormControl>
-                      <RadioGroup
-                        value={field.value}
-                        onValueChange={field.onChange}
-                        className="flex gap-6"
-                      >
-                        <label className="flex items-center gap-2 cursor-pointer">
-                          <RadioGroupItem value="existing" />
-                          Existing product
-                        </label>
-                        <label className="flex items-center gap-2 cursor-pointer">
-                          <RadioGroupItem value="new" />
-                          New product
-                        </label>
-                      </RadioGroup>
-                    </FormControl>
-                    {selectedType?.code === "DEVELOPMENT" && (
-                      <FormDescription>
-                        DEVELOPMENT request type forces classification = new.
-                      </FormDescription>
-                    )}
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <FormField
                   control={form.control}
@@ -339,58 +286,37 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                 />
                 <div />
               </div>
+            </section>
+
+            {/* SECTION 2 — Product Specification & Pricing (always visible; description+tube
+                all-or-nothing, everything else independently optional) */}
+            <section className="space-y-4">
+              <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                Section 2 — Product specification & pricing
+              </h3>
               <FormField
                 control={form.control}
-                name="description"
+                name="specProductDescription"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Description</FormLabel>
+                    <FormLabel>Product description</FormLabel>
                     <FormControl>
-                      <Textarea {...field} rows={3} />
+                      <Textarea {...field} rows={3} placeholder="Free text describing the requested product" />
                     </FormControl>
+                    <FormDescription>Optional — fill in if known.</FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-            </section>
-
-            {/* SECTION 2 — Product Specification (conditional) */}
-            {productClassification === "new" && (
-              <section className="space-y-4 rounded-md border bg-muted/30 p-4">
-                <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                  Section 2 — Product specification
-                </h3>
-                <FormField
-                  control={form.control}
-                  name="specRawMaterial"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Raw material type *</FormLabel>
-                      <Select value={field.value || ""} onValueChange={field.onChange}>
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Pick one" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="POY_BOUGHTOUT">POY Boughtout</SelectItem>
-                          <SelectItem value="CHIPS_SD">Chips SD</SelectItem>
-                          <SelectItem value="CHIPS_BRT">Chips BRT</SelectItem>
-                          <SelectItem value="CHIPS_RECYCLE">Chips Recycle</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <FormField
                   control={form.control}
-                  name="specProductDescription"
+                  name="specShadeCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Product description *</FormLabel>
+                      <FormLabel>Shade code</FormLabel>
                       <FormControl>
-                        <Textarea {...field} rows={3} placeholder="Free text describing the requested product" />
+                        <Input {...field} placeholder="e.g. NL, Z114S" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -398,81 +324,70 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                 />
                 <FormField
                   control={form.control}
-                  name="specShadeCustomText"
+                  name="specShadeName"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Shade *</FormLabel>
+                      <FormLabel>Shade name</FormLabel>
                       <FormControl>
-                        <Input {...field} placeholder="e.g. natural / biru langit / NL" />
+                        <Input {...field} placeholder="e.g. Natural, Jet Black" />
                       </FormControl>
-                      <FormDescription>
-                        Use the master shade name if known, otherwise free-text. Use {`"natural"`} for unpigmented.
-                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                  <FormField
-                    control={form.control}
-                    name="specPaperTubeTypeId"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Paper tube *</FormLabel>
-                        <FormControl>
-                          <PaperTubeTypeCombobox
-                            value={field.value || undefined}
-                            onChange={(id) => field.onChange(id)}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="specWeightPerBobbinKg"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Weight per bobbin (kg) *</FormLabel>
-                        <FormControl>
-                          <Input {...field} placeholder="e.g. 4.5" />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <FormField
-                  control={form.control}
-                  name="specBoxType"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Box type *</FormLabel>
-                      <Select value={field.value || ""} onValueChange={field.onChange}>
-                        <FormControl>
-                          <SelectTrigger>
-                            <SelectValue placeholder="Pick one" />
-                          </SelectTrigger>
-                        </FormControl>
-                        <SelectContent>
-                          <SelectItem value="JUMBO">Jumbo</SelectItem>
-                          <SelectItem value="NORMAL">Normal</SelectItem>
-                          <SelectItem value="PALLET">Pallet</SelectItem>
-                        </SelectContent>
-                      </Select>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </section>
-            )}
-
-            {/* SECTION 3 — Pricing Context */}
-            <section className="space-y-4">
-              <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-                Section 3 — Pricing context
-              </h3>
+              </div>
+              <FormDescription>
+                Shade code/name are optional and independent of each other. Use {`"natural"`} for unpigmented.
+              </FormDescription>
+              <FormField
+                control={form.control}
+                name="specTubeType"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tube</FormLabel>
+                    <Select
+                      value={String(field.value ?? TubeType.TUBE_TYPE_UNSPECIFIED)}
+                      onValueChange={(v) => field.onChange(Number(v) as TubeType)}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select tube type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {TUBE_TYPE_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={String(opt.value)}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>Optional — fill in if known.</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="referenceProductSysId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Reference product (optional)</FormLabel>
+                    <FormControl>
+                      <ProductMasterCombobox
+                        value={field.value || undefined}
+                        onChange={(productSysId) => field.onChange(productSysId)}
+                        placeholder="Search product by code or name…"
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      If this request is similar to an existing product, pick it — its routing will be
+                      suggested during review.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <FormField
                   control={form.control}
diff --git a/src/components/finance/cost-product-request/request-table.tsx b/src/components/finance/cost-product-request/request-table.tsx
index e529638..ead0507 100644
--- a/src/components/finance/cost-product-request/request-table.tsx
+++ b/src/components/finance/cost-product-request/request-table.tsx
@@ -1,12 +1,15 @@
 "use client"
 
 import { useMemo } from "react"
-import { ArrowRight, FileText, ListChecks } from "lucide-react"
+import Link from "next/link"
+import { FileText, ListChecks } from "lucide-react"
 
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { EmptyState } from "@/components/common/empty-state"
+import { SortableHeader } from "@/components/shared/data-table/sortable-header"
 import { useColumnVisibility } from "@/components/shared/data-table/use-column-visibility"
 import { cn } from "@/lib/utils"
 import { typography } from "@/lib/ui/typography"
@@ -17,9 +20,11 @@ import type { ColumnDef } from "@/components/shared/data-table/types"
 interface Props {
   items: CostProductRequest[]
   isLoading?: boolean
-  onOpen: (r: CostProductRequest) => void
   onTrack?: (r: CostProductRequest) => void
   visibility: Record<string, boolean>
+  sortBy?: string
+  sortOrder?: "asc" | "desc"
+  onSort: (sortKey: string) => void
 }
 
 function humanize(value: string): string {
@@ -49,11 +54,12 @@ export function useRequestTableColumns(hasTrack: boolean) {
 
 const th = cn(typography.tableHeader)
 
-export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }: Props) {
+export function RequestTable({ items, isLoading, onTrack, visibility, sortBy, sortOrder, onSort }: Props) {
   const hasTrack = !!onTrack
   const columns = useMemo(() => buildColumns(hasTrack), [hasTrack])
   const show = (id: string) => visibility[id] !== false
-  const visibleCount = columns.filter((c) => show(c.id)).length + 1 // +1 for action col
+  const visibleCount = columns.filter((c) => show(c.id)).length
+  const sortProps = { currentSortBy: sortBy, currentSortOrder: sortOrder, onSort }
 
   return (
     /*
@@ -69,15 +75,28 @@ export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }:
         <table className="w-full caption-bottom text-sm">
           <TableHeader className="sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]">
             <TableRow>
-              {show("request_no") && <TableHead className={cn(th, "w-40 pl-4")}>Request #</TableHead>}
-              {show("type")       && <TableHead className={cn(th, "w-28")}>Type</TableHead>}
-              {show("title")      && <TableHead className={th}>Title</TableHead>}
-              {show("customer")   && <TableHead className={cn(th, "w-44")}>Customer</TableHead>}
-              {show("class")      && <TableHead className={cn(th, "w-28")}>Class</TableHead>}
-              {show("urgency")    && <TableHead className={cn(th, "w-24")}>Urgency</TableHead>}
-              {show("status")     && <TableHead className={cn(th, "w-44")}>Status</TableHead>}
+              {show("request_no") && (
+                <SortableHeader label="Request #" sortKey="request_no" className={cn(th, "w-40 pl-4")} {...sortProps} />
+              )}
+              {show("type") && (
+                <SortableHeader label="Type" sortKey="type" className={cn(th, "w-28")} {...sortProps} />
+              )}
+              {show("title") && (
+                <SortableHeader label="Title" sortKey="title" className={th} {...sortProps} />
+              )}
+              {show("customer") && (
+                <SortableHeader label="Customer" sortKey="customer" className={cn(th, "w-44")} {...sortProps} />
+              )}
+              {show("class") && (
+                <SortableHeader label="Class" sortKey="class" className={cn(th, "w-28")} {...sortProps} />
+              )}
+              {show("urgency") && (
+                <SortableHeader label="Urgency" sortKey="urgency" className={cn(th, "w-24")} {...sortProps} />
+              )}
+              {show("status") && (
+                <SortableHeader label="Status" sortKey="status" className={cn(th, "w-44")} {...sortProps} />
+              )}
               {show("fills") && onTrack && <TableHead className={cn(th, "w-16 text-center")}>Fills</TableHead>}
-              <TableHead className={cn(th, "w-14 pr-4")} />
             </TableRow>
           </TableHeader>
 
@@ -92,7 +111,6 @@ export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }:
                 {show("urgency")    && <TableCell><Skeleton className="h-4 w-14" /></TableCell>}
                 {show("status")     && <TableCell><Skeleton className="h-5 w-28 rounded-full" /></TableCell>}
                 {show("fills") && onTrack && <TableCell />}
-                <TableCell className="pr-4" />
               </TableRow>
             ))}
 
@@ -110,13 +128,14 @@ export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }:
             )}
 
             {items.map((r) => (
-              <TableRow
-                key={r.requestId}
-                className="hover:bg-muted/50 cursor-pointer"
-                onClick={() => onOpen(r)}
-              >
+              <TableRow key={r.requestId} className="relative hover:bg-muted/50 cursor-pointer">
                 {show("request_no") && (
-                  <TableCell className="pl-4 font-mono text-xs">{r.requestNo}</TableCell>
+                  <TableCell className="pl-4 font-mono text-xs">
+                    <Link href={`/finance/product-requests/${r.requestId}`} className="absolute inset-0">
+                      <span className="sr-only">Open {r.requestNo}</span>
+                    </Link>
+                    {r.requestNo}
+                  </TableCell>
                 )}
                 {show("type") && (
                   <TableCell className="font-mono text-xs text-muted-foreground">
@@ -138,7 +157,11 @@ export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }:
                 )}
                 {show("class") && (
                   <TableCell className="text-sm">
-                    <span>{humanize(r.productClassification)}</span>
+                    {r.productClassification === "pending" ? (
+                      <Badge variant="outline">Pending</Badge>
+                    ) : (
+                      <span>{humanize(r.productClassification)}</span>
+                    )}
                     {r.verifiedClassification && r.verifiedClassification !== r.productClassification && (
                       <span className="ml-1 text-xs text-orange-600">→ {humanize(r.verifiedClassification)}</span>
                     )}
@@ -153,17 +176,12 @@ export function RequestTable({ items, isLoading, onOpen, onTrack, visibility }:
                   </TableCell>
                 )}
                 {show("fills") && onTrack && (
-                  <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+                  <TableCell className="relative z-10 text-center" onClick={(e) => e.stopPropagation()}>
                     <Button size="icon" variant="ghost" aria-label="Track fill tasks" onClick={() => onTrack(r)}>
                       <ListChecks className="h-4 w-4" />
                     </Button>
                   </TableCell>
                 )}
-                <TableCell className="pr-4 text-right">
-                  <Button size="icon" variant="ghost" aria-label="Open request">
-                    <ArrowRight className="h-4 w-4" />
-                  </Button>
-                </TableCell>
               </TableRow>
             ))}
           </TableBody>
diff --git a/src/components/finance/cost-product-request/routing-panel.tsx b/src/components/finance/cost-product-request/routing-panel.tsx
index f2eeec2..924b828 100644
--- a/src/components/finance/cost-product-request/routing-panel.tsx
+++ b/src/components/finance/cost-product-request/routing-panel.tsx
@@ -7,15 +7,15 @@ import { AlertTriangle, Lock, Loader2, Unlock } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { UserName } from "@/components/common/user-name"
-import { CreateRoutingWizard } from "@/components/finance/cost-product-request/create-routing-wizard"
 import { DuplicateRouteDialog } from "@/components/finance/cost-route/duplicate-route-dialog"
-import { PickExistingRouteDialog } from "@/components/finance/cost-product-request/pick-existing-route-dialog"
+import { RoutingResolver } from "@/components/finance/cost-product-request/routing-resolver"
 import { UnlockPasswordDialog } from "./unlock-password-dialog"
 import { useCompleteRoute, useLockRoute, useRouteGraph, useUnlockRoute } from "@/hooks/finance/use-cost-route"
 import { useLinkedRequests } from "@/hooks/finance/use-duplicate-route"
-import { useLinkExistingRoute, useUnlinkRoute } from "@/hooks/finance/use-link-route"
+import { useUnlinkRoute } from "@/hooks/finance/use-link-route"
 import { useParamSummary } from "@/hooks/finance/use-param-summary"
 
 interface Props {
@@ -39,13 +39,11 @@ export function RoutingPanel({
   canManageLock = false,
   showCompleteAction = false,
 }: Props) {
-  const [pickOpen, setPickOpen] = useState(false)
-  const [wizardOpen, setWizardOpen] = useState(false)
+  const [resolverOpen, setResolverOpen] = useState(false)
   const [dupOpen, setDupOpen] = useState(false)
   const [dialogAction, setDialogAction] = useState<"lock" | "unlock" | null>(null)
   const [passwordError, setPasswordError] = useState<string | undefined>()
 
-  const linkM = useLinkExistingRoute()
   const unlinkM = useUnlinkRoute()
   const completeRouteM = useCompleteRoute()
   const lockM = useLockRoute()
@@ -97,33 +95,26 @@ export function RoutingPanel({
             ) : (
               <>
                 <p className="text-sm text-muted-foreground">
-                  No routing defined yet. Choose how to build the cost basis:
+                  No routing defined yet. Attach a product to build the cost basis.
                 </p>
-                <div className="grid gap-2 md:grid-cols-2">
-                  <Button variant="outline" onClick={() => setPickOpen(true)}>
-                    📋 Pick existing product
-                  </Button>
-                  <Button variant="default" onClick={() => setWizardOpen(true)}>
-                    🆕 Create new routing
-                  </Button>
-                </div>
+                <Button variant="default" onClick={() => setResolverOpen(true)}>
+                  Attach product routing
+                </Button>
               </>
             )}
           </CardContent>
         </Card>
-        <PickExistingRouteDialog
-          open={pickOpen}
-          onClose={() => setPickOpen(false)}
-          onPick={(headId) => {
-            linkM.mutate({ requestId, routeHeadId: headId })
-            setPickOpen(false)
-          }}
-        />
-        <CreateRoutingWizard
-          open={wizardOpen}
-          requestId={requestId}
-          onClose={() => setWizardOpen(false)}
-        />
+        <Dialog open={resolverOpen} onOpenChange={setResolverOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Attach product routing</DialogTitle>
+            </DialogHeader>
+            <RoutingResolver
+              requestId={requestId}
+              onResolved={() => setResolverOpen(false)}
+            />
+          </DialogContent>
+        </Dialog>
       </>
     )
   }
@@ -187,11 +178,32 @@ export function RoutingPanel({
               </Button>
             )}
             {!readOnly && canUnlink && (
-              <Button variant="outline" size="sm" onClick={() => unlinkM.mutate({ requestId })}>
-                Unlink
-              </Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        disabled={isLocked || unlinkM.isPending}
+                        onClick={() => unlinkM.mutate({ requestId })}
+                      >
+                        Unlink
+                      </Button>
+                    </span>
+                  </TooltipTrigger>
+                  {isLocked && (
+                    <TooltipContent>Unlock the route before unlinking.</TooltipContent>
+                  )}
+                </Tooltip>
+              </TooltipProvider>
             )}
           </div>
+          {!readOnly && canUnlink && isLocked && (
+            <p className="text-xs text-muted-foreground">
+              Unlock the route before unlinking.
+            </p>
+          )}
 
           {/* Lock management — only visible to route managers */}
           {canManageLock && (
diff --git a/src/components/finance/cost-product-request/routing-resolver.tsx b/src/components/finance/cost-product-request/routing-resolver.tsx
new file mode 100644
index 0000000..cbfac82
--- /dev/null
+++ b/src/components/finance/cost-product-request/routing-resolver.tsx
@@ -0,0 +1,216 @@
+"use client"
+
+// RoutingResolver — the ONE entry point for resolving a Cost Product Request's
+// routing (design.md §3, Area B — B1/B2/D4 unification). Given a product,
+// auto-detects whether an active route already exists:
+//   - route exists            → link it to the request (useLinkExistingRoute)
+//   - no route exists yet     → create a new route from the product (useCreateRouteFromProduct)
+//   - brand-new product       → create the product master first (useCreateCostProductMaster),
+//                                then create a route from it (useCreateRouteFromProduct)
+// All 3 branches converge on the same onResolved(headId) callback.
+//
+// This replaces the old 2-entry-point split (PickExistingRouteDialog +
+// CreateRoutingWizard) with a single auto-detecting flow; the "create new
+// product master" branch is preserved inline, not dropped.
+import { useState } from "react"
+
+import { ProductMasterCombobox } from "@/components/finance/comboboxes/product-master-combobox"
+import { ProductTypeCombobox } from "@/components/finance/comboboxes/product-type-combobox"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useCreateCostProductMaster } from "@/hooks/finance/use-cost-product-master"
+import { useCreateRouteFromProduct, useRouteByProduct } from "@/hooks/finance/use-cost-route"
+import { useLinkExistingRoute } from "@/hooks/finance/use-link-route"
+import { cn } from "@/lib/utils"
+
+export interface NewProductInput {
+  name: string
+  typeId: number
+  shade: string
+  grade: string
+  description: string
+}
+
+const emptyNewProduct: NewProductInput = { name: "", typeId: 0, shade: "", grade: "AX", description: "" }
+
+/**
+ * useResolveRouting resolves the routing for a given (possibly undefined)
+ * product. It exposes the "does this product already have a route" check
+ * (via useRouteByProduct) plus two resolve functions:
+ *   - resolveExisting: link-or-create for an already-known product master.
+ *   - resolveNewProduct: create the product master, then create a route from it.
+ */
+export function useResolveRouting(productSysId: number | undefined) {
+  const routeQuery = useRouteByProduct(productSysId)
+  const linkM = useLinkExistingRoute()
+  const createFromProductM = useCreateRouteFromProduct()
+  const createProductM = useCreateCostProductMaster()
+
+  const hasExistingRoute = !!routeQuery.data
+  const existingHeadId = routeQuery.data?.headId
+
+  async function resolveExisting(requestId: number): Promise<number> {
+    if (!productSysId) throw new Error("No product selected")
+    if (hasExistingRoute && existingHeadId) {
+      await linkM.mutateAsync({ requestId, routeHeadId: existingHeadId })
+      return existingHeadId
+    }
+    return createFromProductM.mutateAsync({ productSysId, linkedRequestId: requestId })
+  }
+
+  async function resolveNewProduct(requestId: number, newProduct: NewProductInput): Promise<number> {
+    const created = await createProductM.mutateAsync({
+      productTypeId: newProduct.typeId,
+      productName: newProduct.name,
+      shadeCode: newProduct.shade,
+      gradeCode: newProduct.grade || "AX",
+      description: newProduct.description,
+    })
+    if (!created.productSysId) throw new Error("Product master create returned no sys id")
+    return createFromProductM.mutateAsync({ productSysId: created.productSysId, linkedRequestId: requestId })
+  }
+
+  return {
+    routeQuery,
+    hasExistingRoute,
+    existingHeadId,
+    resolveExisting,
+    resolveNewProduct,
+    isPending: linkM.isPending || createFromProductM.isPending || createProductM.isPending,
+  }
+}
+
+interface RoutingResolverProps {
+  requestId: number
+  productSysId?: number
+  onResolved: (headId: number) => void
+  className?: string
+  /**
+   * When true, skip the "brand-new product" toggle entirely and always render
+   * the new-product-master form — used by ClassificationAndFeasibilityDialog's
+   * inline B1 picker when verified classification is already known to be "new"
+   * (design.md §3 B1: "skipping the existing-product picker entirely").
+   */
+  forceNewProduct?: boolean
+}
+
+export function RoutingResolver({
+  requestId,
+  productSysId,
+  onResolved,
+  className,
+  forceNewProduct = false,
+}: RoutingResolverProps) {
+  const [selectedProductSysId, setSelectedProductSysId] = useState<number | undefined>(productSysId)
+  const [isNewProduct, setIsNewProduct] = useState(forceNewProduct)
+  const [newProduct, setNewProduct] = useState<NewProductInput>(emptyNewProduct)
+
+  const { routeQuery, hasExistingRoute, resolveExisting, resolveNewProduct, isPending } = useResolveRouting(
+    isNewProduct ? undefined : selectedProductSysId,
+  )
+
+  async function handleResolve() {
+    try {
+      const headId = isNewProduct
+        ? await resolveNewProduct(requestId, newProduct)
+        : await resolveExisting(requestId)
+      onResolved(headId)
+    } catch {
+      // Mutation hooks already surface a toast on error; avoid double-toasting.
+    }
+  }
+
+  const canResolveExisting = !isNewProduct && !!selectedProductSysId
+  const canResolveNew = isNewProduct && newProduct.name.trim().length > 0 && newProduct.typeId > 0
+  const canResolve = canResolveExisting || canResolveNew
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {!forceNewProduct && (
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="rr-new-product"
+            checked={isNewProduct}
+            onCheckedChange={(checked) => setIsNewProduct(checked === true)}
+          />
+          <Label htmlFor="rr-new-product" className="text-sm font-normal">
+            This is a brand-new product (not yet in the product master)
+          </Label>
+        </div>
+      )}
+
+      {!isNewProduct && (
+        <div className="space-y-1">
+          <Label>Product</Label>
+          <ProductMasterCombobox
+            value={selectedProductSysId}
+            onChange={(id) => setSelectedProductSysId(id)}
+            placeholder="Search product by code or name…"
+          />
+          {selectedProductSysId && (
+            <p className="text-xs text-muted-foreground">
+              {routeQuery.isLoading
+                ? "Checking for an existing route…"
+                : hasExistingRoute
+                  ? `Existing route #${routeQuery.data?.headId} will be linked to this request.`
+                  : "No route yet for this product — a new route will be created."}
+            </p>
+          )}
+        </div>
+      )}
+
+      {isNewProduct && (
+        <div className="space-y-3">
+          <div>
+            <Label>Product name *</Label>
+            <Input
+              value={newProduct.name}
+              onChange={(e) => setNewProduct({ ...newProduct, name: e.target.value })}
+              placeholder="e.g. PTY 75/72 SD BRIGHT"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label>Product type *</Label>
+              <ProductTypeCombobox
+                value={newProduct.typeId || undefined}
+                onChange={(id) => setNewProduct({ ...newProduct, typeId: id })}
+              />
+            </div>
+            <div>
+              <Label>Grade code</Label>
+              <Input
+                value={newProduct.grade}
+                onChange={(e) => setNewProduct({ ...newProduct, grade: e.target.value })}
+              />
+            </div>
+          </div>
+          <div>
+            <Label>Shade code (optional)</Label>
+            <Input
+              value={newProduct.shade}
+              onChange={(e) => setNewProduct({ ...newProduct, shade: e.target.value })}
+            />
+          </div>
+          <div>
+            <Label>Description (optional)</Label>
+            <Input
+              value={newProduct.description}
+              onChange={(e) => setNewProduct({ ...newProduct, description: e.target.value })}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Product code is auto-generated. Required parameters (CAPP) are empty initially — open the new
+            product master after creation to fill values.
+          </p>
+        </div>
+      )}
+
+      <Button disabled={isPending || !canResolve} onClick={handleResolve}>
+        {isPending ? "Resolving…" : "Resolve routing"}
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/finance/cost-product-request/transition-dialogs.tsx b/src/components/finance/cost-product-request/transition-dialogs.tsx
index 4d92458..287ea72 100644
--- a/src/components/finance/cost-product-request/transition-dialogs.tsx
+++ b/src/components/finance/cost-product-request/transition-dialogs.tsx
@@ -3,6 +3,7 @@
 // transition-dialogs — small per-transition modal helpers (reason / decision / substatus inputs).
 import { useMemo, useState } from "react"
 import { Check, Loader2 } from "lucide-react"
+import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
@@ -13,7 +14,11 @@ import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Separator } from "@/components/ui/separator"
+import { RoutingResolver } from "@/components/finance/cost-product-request/routing-resolver"
 import { useCostProductMaster, useCostProductMasters } from "@/hooks/finance/use-cost-product-master"
+import { useDecideFeasibility, useSubmitAndDecide, useVerifyClassification } from "@/hooks/finance/use-cost-product-request"
+import { useLinkExistingRoute } from "@/hooks/finance/use-link-route"
 import { cn } from "@/lib/utils"
 import type { ClosedSubstatus, ProductClassification } from "@/types/finance/cost-product-request"
 
@@ -61,140 +66,362 @@ export function ReasonDialog({ open, onOpenChange, title, description, confirmLa
   )
 }
 
-// ----- VerifyClassificationDialog -------------------------------------------------------
-interface VerifyProps {
+// ----- ClassificationAndFeasibilityDialog -------------------------------------------------
+// Merges the former VerifyClassificationDialog + FeasibilityDialog into a single screen
+// (item #2, 2026-07-03 CPR UX batch). Extended per design.md §3 Area B (B1) to also resolve
+// + link the request's routing inline, when the decision is FEASIBLE, instead of deferring
+// routing to a separate later step via the Routing card.
+//
+// Routing resolution itself (picking a product / brand-new-product form, then clicking
+// RoutingResolver's own "Resolve routing" button) is a separate, frontend-only interaction
+// that happens BEFORE the dialog's main Submit button is even enabled (mirrors
+// `classificationLocked`'s existing gating pattern) — see `resolvedHeadId` below.
+//
+// Once resolvedHeadId is set and Submit is clicked, the RPC chain is:
+//   VerifyClassification -> LinkRoute(requestId, resolvedHeadId) -> DecideFeasibility -> done
+// (design.md §3 B1's recommended ordering: routing resolves right after classification, before
+// feasibility, since a routing failure should block the whole dialog — consistent with the
+// existing "classification saved but feasibility failed -> retry feasibility" pattern extending
+// naturally to "classification+routing saved but feasibility failed -> retry feasibility only").
+//
+// Local state machine: "idle" (all sections editable) -> "classifying" (step 1, VerifyClassification,
+// in flight) -> "classified" (step 1 saved; either about to auto-run the routing link, or a later
+// step failed and the user is retrying just that step, with classification now read-only) ->
+// "routing" (step 2, LinkRoute, in flight; on failure this phase doubles as the "only the route
+// link needs a retry" state) -> "deciding" (step 3, DecideFeasibility, in flight) -> "done" (all
+// steps succeeded, dialog closes). `error` carries the latest inline message; it is distinct from
+// the toasts the underlying hooks already fire on their own success/failure.
+type ReviewPhase = "idle" | "classifying" | "classified" | "routing" | "deciding" | "done"
+
+interface ClassificationAndFeasibilityProps {
   open: boolean
   onOpenChange: (open: boolean) => void
+  requestId: number
+  /** productClassification — the system/marketing-predicted value. */
   currentClassification: ProductClassification
-  pending?: boolean
-  onConfirm: (verified: ProductClassification, overrideReason: string) => void
+  /** request.verifiedClassification, if already set — used to pre-fill instead of the prediction. */
+  initialVerifiedClassification?: ProductClassification
+  /** request.referenceProductSysId (D4) — prefills RoutingResolver's product picker when set. */
+  referenceProductSysId?: number
+  /**
+   * "review" (default) — UNDER_REVIEW flow: classification/routing/feasibility are saved via
+   * 3 separate calls (VerifyClassification -> LinkRoute -> DecideFeasibility), each individually
+   * retryable on failure — used by the "Review & decide" button.
+   * "submit" — DRAFT flow (B3 merge): the whole sequence (Submit + StartReview + VerifyClassification
+   * + DecideFeasibility + LinkRoute) is composed server-side in a single SubmitAndDecide call, so
+   * only one consolidated notification pair fires — used by the DRAFT "Submit" button.
+   */
+  mode?: "review" | "submit"
 }
 
-export function VerifyClassificationDialog({ open, onOpenChange, currentClassification, pending, onConfirm }: VerifyProps) {
-  const [verified, setVerified] = useState<ProductClassification>(currentClassification)
-  const [overrideReason, setOverrideReason] = useState("")
-  const isOverride = verified !== currentClassification
+export function ClassificationAndFeasibilityDialog({
+  open,
+  onOpenChange,
+  requestId,
+  currentClassification,
+  initialVerifiedClassification,
+  referenceProductSysId,
+  mode = "review",
+}: ClassificationAndFeasibilityProps) {
+  const verifyM = useVerifyClassification()
+  const feasibilityM = useDecideFeasibility()
+  const linkRouteM = useLinkExistingRoute()
+  const submitAndDecideM = useSubmitAndDecide()
 
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(o) => {
-        onOpenChange(o)
-        if (!o) {
-          setVerified(currentClassification)
-          setOverrideReason("")
-        }
-      }}
-    >
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Verify classification</DialogTitle>
-          <DialogDescription>
-            Marketing marked this as <strong>{currentClassification}</strong>. Confirm or override; an override
-            requires a reason.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-3">
-          <RadioGroup
-            value={verified}
-            onValueChange={(v) => setVerified(v as ProductClassification)}
-            className="flex gap-6"
-          >
-            <label className="flex items-center gap-2 cursor-pointer">
-              <RadioGroupItem value="existing" />
-              Existing
-            </label>
-            <label className="flex items-center gap-2 cursor-pointer">
-              <RadioGroupItem value="new" />
-              New
-            </label>
-          </RadioGroup>
-          {isOverride && (
-            <div className="space-y-2">
-              <Label>Override reason *</Label>
-              <Textarea rows={3} value={overrideReason} onChange={(e) => setOverrideReason(e.target.value)} />
-            </div>
-          )}
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            disabled={(isOverride && !overrideReason.trim()) || pending}
-            onClick={() => onConfirm(verified, isOverride ? overrideReason.trim() : "")}
-          >
-            {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            Confirm
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
+  const [phase, setPhase] = useState<ReviewPhase>("idle")
+  const [error, setError] = useState<string | null>(null)
 
-// ----- FeasibilityDialog -----------------------------------------------------------------
-interface FeasibilityProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  pending?: boolean
-  onConfirm: (decision: "FEASIBLE" | "NOT_FEASIBLE", note: string) => void
-}
-
-export function FeasibilityDialog({ open, onOpenChange, pending, onConfirm }: FeasibilityProps) {
+  const [verified, setVerified] = useState<ProductClassification>(
+    initialVerifiedClassification ?? (currentClassification === "pending" ? "existing" : currentClassification),
+  )
+  const [overrideReason, setOverrideReason] = useState("")
   const [decision, setDecision] = useState<"FEASIBLE" | "NOT_FEASIBLE">("FEASIBLE")
   const [note, setNote] = useState("")
+  // Populated by RoutingResolver's onResolved callback once the user has picked/created a
+  // product and clicked its own "Resolve routing" button — a precondition step that happens
+  // before the dialog's main Submit button is even enabled (mirrors classificationLocked's gate).
+  const [resolvedHeadId, setResolvedHeadId] = useState<number | null>(null)
+  // Tracks whether LinkRoute already succeeded, so a feasibility-only retry (after routing
+  // succeeded but feasibility failed) never re-submits the already-linked route.
+  const [routeLinked, setRouteLinked] = useState(false)
+
+  const isOverride = verified !== currentClassification && currentClassification !== "pending"
   const isInfeasible = decision === "NOT_FEASIBLE"
+  // Once classification has been saved (either mid-flow or after a later-step failure we're
+  // retrying), lock the classification section so a retry never re-submits it.
+  const classificationLocked = phase === "classified" || phase === "routing" || phase === "deciding"
+  const pending = verifyM.isPending || linkRouteM.isPending || feasibilityM.isPending || submitAndDecideM.isPending
+
+  function resetAll() {
+    setPhase("idle")
+    setError(null)
+    setVerified(initialVerifiedClassification ?? (currentClassification === "pending" ? "existing" : currentClassification))
+    setOverrideReason("")
+    setDecision("FEASIBLE")
+    setNote("")
+    setResolvedHeadId(null)
+    setRouteLinked(false)
+  }
+
+  async function submitFeasibility() {
+    setPhase("deciding")
+    try {
+      await feasibilityM.mutateAsync({
+        requestId,
+        decision,
+        note: isInfeasible ? note.trim() : "",
+      })
+      setPhase("done")
+      setError(null)
+      toast.success("Classification & feasibility recorded")
+      onOpenChange(false)
+    } catch {
+      // Classification (and routing, if FEASIBLE) already saved — only feasibility needs a retry.
+      setPhase("classified")
+      setError("Classification saved. Feasibility decision failed — please retry.")
+    }
+  }
+
+  async function linkResolvedRouteThenDecide() {
+    if (!routeLinked) {
+      setPhase("routing")
+      if (!resolvedHeadId) {
+        // Guarded by canSubmit below — should not be reachable, but keep an explicit message.
+        setError("Resolve routing before continuing.")
+        return
+      }
+      try {
+        await linkRouteM.mutateAsync({ requestId, routeHeadId: resolvedHeadId })
+        setRouteLinked(true)
+      } catch {
+        // Classification already saved — only the routing link needs a retry.
+        setPhase("classified")
+        setError("Classification saved. Linking the route failed — please retry.")
+        return
+      }
+    }
+    await submitFeasibility()
+  }
+
+  // "submit" mode (B3 merge): the entire sequence is one server-side call
+  // (SubmitAndDecide) instead of the "review" mode's 3 separately-retryable
+  // mutations — so on failure the whole action is simply retried as a whole,
+  // there is no partial "classification saved, routing failed" state to track.
+  async function submitAndDecide() {
+    setPhase("deciding")
+    setError(null)
+    try {
+      await submitAndDecideM.mutateAsync({
+        requestId,
+        verifiedClassification: verified,
+        overrideReason: isOverride ? overrideReason.trim() : "",
+        decision,
+        note: isInfeasible ? note.trim() : "",
+        referenceProductHeadId: !isInfeasible && resolvedHeadId != null ? resolvedHeadId : undefined,
+      })
+      setPhase("done")
+      toast.success("Submitted for review")
+      onOpenChange(false)
+    } catch {
+      setPhase("idle")
+      setError("Submit failed — please check the details and try again.")
+    }
+  }
+
+  async function handleSubmit() {
+    if (mode === "submit") {
+      await submitAndDecide()
+      return
+    }
+    if (classificationLocked) {
+      // Retry path after a later-step failure: classification is already saved. Re-drive
+      // whichever step is next — routing (if FEASIBLE and not yet linked) or feasibility.
+      if (!isInfeasible && !routeLinked) {
+        await linkResolvedRouteThenDecide()
+      } else {
+        await submitFeasibility()
+      }
+      return
+    }
+    if (isInfeasible) {
+      await submitFeasibility()
+      return
+    }
+    setPhase("classifying")
+    setError(null)
+    try {
+      await verifyM.mutateAsync({
+        requestId,
+        verifiedClassification: verified,
+        overrideReason: isOverride ? overrideReason.trim() : "",
+      })
+    } catch {
+      setPhase("idle")
+      setError("Failed to save classification — please check the details and try again.")
+      return
+    }
+    setPhase("classified")
+    await linkResolvedRouteThenDecide()
+  }
+
+  const canSubmitClassification = classificationLocked || !isOverride || !!overrideReason.trim()
+  const canSubmitFeasibility = !isInfeasible || !!note.trim()
+  const canSubmitRouting = isInfeasible || resolvedHeadId != null
+  const canSubmit = (isInfeasible || canSubmitClassification) && canSubmitFeasibility && canSubmitRouting
+
+  const submitLabel = classificationLocked
+    ? !isInfeasible && !routeLinked
+      ? "Retry routing link"
+      : "Retry feasibility"
+    : isInfeasible
+      ? "Reject as infeasible"
+      : mode === "submit"
+        ? "Submit for review"
+        : "Save & continue"
 
   return (
     <Dialog
       open={open}
       onOpenChange={(o) => {
         onOpenChange(o)
-        if (!o) {
-          setDecision("FEASIBLE")
-          setNote("")
-        }
+        if (!o) resetAll()
       }}
     >
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Decide feasibility</DialogTitle>
+          <DialogTitle>{mode === "submit" ? "Submit for review" : "Review & decide"}</DialogTitle>
           <DialogDescription>
-            FEASIBLE moves the request to ROUTING_DEFINED. NOT_FEASIBLE sends it to REJECTED — note is required.
+            {mode === "submit"
+              ? "Confirm the product classification, resolve routing, and decide feasibility — submitted directly to review."
+              : "Confirm the product classification and decide feasibility for this request."}
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-3">
-          <RadioGroup
-            value={decision}
-            onValueChange={(v) => setDecision(v as "FEASIBLE" | "NOT_FEASIBLE")}
-            className="flex gap-6"
-          >
-            <label className="flex items-center gap-2 cursor-pointer">
-              <RadioGroupItem value="FEASIBLE" />
-              Feasible
-            </label>
-            <label className="flex items-center gap-2 cursor-pointer">
-              <RadioGroupItem value="NOT_FEASIBLE" />
-              Not feasible
-            </label>
-          </RadioGroup>
-          <div className="space-y-2">
-            <Label>Note {isInfeasible ? "*" : "(optional)"}</Label>
-            <Textarea rows={3} value={note} onChange={(e) => setNote(e.target.value)} />
+
+        <div className="space-y-5">
+          {/* Feasibility section — always first */}
+          <div className="space-y-3">
+            <div className="text-xs uppercase tracking-wide text-muted-foreground">Feasibility</div>
+            <p className="text-sm text-muted-foreground">
+              FEASIBLE moves the request to ROUTING_DEFINED. NOT_FEASIBLE sends it to REJECTED — note is required.
+            </p>
+            <RadioGroup
+              value={decision}
+              onValueChange={(v) => setDecision(v as "FEASIBLE" | "NOT_FEASIBLE")}
+              className="flex gap-6"
+            >
+              <label className="flex items-center gap-2 cursor-pointer">
+                <RadioGroupItem value="FEASIBLE" />
+                Feasible
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <RadioGroupItem value="NOT_FEASIBLE" />
+                Not feasible
+              </label>
+            </RadioGroup>
+            <div className="space-y-2">
+              <Label>Note {isInfeasible ? "*" : "(optional)"}</Label>
+              <Textarea rows={3} value={note} onChange={(e) => setNote(e.target.value)} />
+            </div>
           </div>
+
+          {/* Classification section — only shown when FEASIBLE */}
+          {!isInfeasible && (
+            <>
+              <Separator />
+              <div className="space-y-3">
+                <div className="text-xs uppercase tracking-wide text-muted-foreground">Classification</div>
+                <p className="text-sm text-muted-foreground">
+                  {currentClassification === "pending" ? (
+                    "This request has not yet been classified. Choose existing or new."
+                  ) : (
+                    <>
+                      Marketing marked this as <strong>{currentClassification}</strong>. Confirm or override; an
+                      override requires a reason.
+                    </>
+                  )}
+                </p>
+                <RadioGroup
+                  value={verified}
+                  onValueChange={(v) => setVerified(v as ProductClassification)}
+                  className="flex gap-6"
+                >
+                  <label className={cn("flex items-center gap-2", classificationLocked ? "opacity-60" : "cursor-pointer")}>
+                    <RadioGroupItem value="existing" disabled={classificationLocked} />
+                    Existing
+                  </label>
+                  <label className={cn("flex items-center gap-2", classificationLocked ? "opacity-60" : "cursor-pointer")}>
+                    <RadioGroupItem value="new" disabled={classificationLocked} />
+                    New
+                  </label>
+                </RadioGroup>
+                {isOverride && (
+                  <div className="space-y-2">
+                    <Label>Override reason *</Label>
+                    <Textarea
+                      rows={3}
+                      value={overrideReason}
+                      disabled={classificationLocked}
+                      onChange={(e) => setOverrideReason(e.target.value)}
+                    />
+                  </div>
+                )}
+                {classificationLocked && (
+                  <p className="text-xs text-muted-foreground">Classification saved — read-only.</p>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* Routing section (B1) — only when FEASIBLE; resolves + links the request's route
+              inline instead of deferring to the separate Routing card. "existing" verified
+              classification shows the full picker (existing product / brand-new toggle);
+              "new" skips straight to the new-product-master form (design.md §3 B1). */}
+          {!isInfeasible && (
+            <>
+              <Separator />
+              <div className="space-y-3">
+                <div className="text-xs uppercase tracking-wide text-muted-foreground">Routing</div>
+                {routeLinked ? (
+                  <p className="text-sm text-muted-foreground">
+                    Route #{resolvedHeadId} resolved and ready to link.
+                  </p>
+                ) : (
+                  <RoutingResolver
+                    requestId={requestId}
+                    productSysId={referenceProductSysId}
+                    forceNewProduct={verified === "new"}
+                    onResolved={setResolvedHeadId}
+                  />
+                )}
+                {resolvedHeadId != null && !routeLinked && (
+                  <p className="text-sm text-muted-foreground">
+                    Routing resolved — head #{resolvedHeadId} will be linked on submit.
+                  </p>
+                )}
+              </div>
+            </>
+          )}
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
+
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>
             Cancel
           </Button>
           <Button
             variant={isInfeasible ? "destructive" : "default"}
-            disabled={(isInfeasible && !note.trim()) || pending}
-            onClick={() => onConfirm(decision, note.trim())}
+            disabled={!canSubmit || pending}
+            onClick={() => {
+              handleSubmit().catch(() => {
+                // Both mutateAsync calls already have their own try/catch above; this guards
+                // against any unexpected rejection so the promise is never left unhandled.
+                setError("Something went wrong — please try again.")
+              })
+            }}
           >
             {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {isInfeasible ? "Reject as infeasible" : "Approve"}
+            {submitLabel}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/finance/cost-request-comment/comment-item.tsx b/src/components/finance/cost-request-comment/comment-item.tsx
index a4df874..88b7080 100644
--- a/src/components/finance/cost-request-comment/comment-item.tsx
+++ b/src/components/finance/cost-request-comment/comment-item.tsx
@@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
 import { MentionContent } from "@/components/common/mentionable-textarea"
+import { UserAvatar } from "@/components/common/user-avatar"
 import { UserName } from "@/components/common/user-name"
 import { usePermissionContext } from "@/providers/permission-provider"
 import {
@@ -32,7 +33,6 @@ import {
 import type { CostRequestComment } from "@/types/finance/cost-request-comment"
 
 import { AttachmentList } from "./attachment-list"
-import { UserInitials } from "./comments-panel"
 
 interface Props {
   comment: CostRequestComment
@@ -75,7 +75,12 @@ export function CommentItem({ comment, currentUserId }: Props) {
 
   return (
     <div className={`flex gap-3 ${isAuthor ? "" : "flex-row-reverse"} ${comment.isHidden ? "opacity-60" : ""}`}>
-      <UserInitials userId={comment.authorUserId} className="mt-0.5 shrink-0" />
+      <UserAvatar
+        userId={comment.authorUserId}
+        colorHash
+        className="h-7 w-7 mt-0.5 shrink-0"
+        fallbackClassName="text-xs font-semibold"
+      />
       <div className="min-w-0 max-w-[75%] rounded-md border bg-card p-3 space-y-2">
       <div className={`flex items-center gap-2 text-xs ${isAuthor ? "" : "flex-row-reverse"}`}>
         <span className="font-medium"><UserName userId={comment.authorUserId} compact /></span>
diff --git a/src/components/finance/cost-request-comment/comments-panel.tsx b/src/components/finance/cost-request-comment/comments-panel.tsx
index 3db1f6b..9d89c59 100644
--- a/src/components/finance/cost-request-comment/comments-panel.tsx
+++ b/src/components/finance/cost-request-comment/comments-panel.tsx
@@ -9,8 +9,8 @@ import { Loader2, Paperclip, Send, X } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { MentionableTextarea } from "@/components/common/mentionable-textarea"
+import { UserAvatar } from "@/components/common/user-avatar"
 import { useAuth } from "@/providers/auth-provider"
-import { useUser as useIamUser } from "@/hooks/iam/use-users"
 import { useCreateRequestComment, useRequestComments } from "@/hooks/finance/use-cost-request-comment"
 import { useUploadAttachment } from "@/hooks/finance/use-cost-attachment"
 
@@ -22,36 +22,6 @@ interface Props {
   readOnly?: boolean
 }
 
-const AVATAR_COLORS = [
-  "bg-blue-100 text-blue-700",
-  "bg-emerald-100 text-emerald-700",
-  "bg-violet-100 text-violet-700",
-  "bg-orange-100 text-orange-700",
-  "bg-pink-100 text-pink-700",
-  "bg-cyan-100 text-cyan-700",
-]
-
-function avatarColor(userId: string): string {
-  const hash = (userId || "").split("").reduce((a, c) => a + c.charCodeAt(0), 0)
-  return AVATAR_COLORS[hash % AVATAR_COLORS.length]
-}
-
-export function UserInitials({ userId, className = "" }: { userId: string; className?: string }) {
-  const { data: resp } = useIamUser(userId || "")
-  const fullName: string = resp?.data?.detail?.fullName || ""
-  const initials = fullName
-    ? fullName.trim().split(/\s+/).map((w: string) => w[0]).join("").toUpperCase().slice(0, 2)
-    : (userId || "?").charAt(0).toUpperCase()
-  return (
-    <div
-      className={`h-7 w-7 rounded-full flex items-center justify-center text-xs font-semibold ${avatarColor(userId)} ${className}`}
-      title={fullName || userId}
-    >
-      {initials}
-    </div>
-  )
-}
-
 function wrapRichtext(plain: string): string {
   return JSON.stringify({
     type: "doc",
@@ -154,7 +124,12 @@ export function CommentsPanel({ requestId, readOnly = false }: Props) {
           </div>
         ) : (
           <div className="flex gap-3 pt-2 border-t items-start">
-            <UserInitials userId={currentUserId} className="mt-1 shrink-0" />
+            <UserAvatar
+              userId={currentUserId}
+              colorHash
+              className="h-7 w-7 mt-1 shrink-0"
+              fallbackClassName="text-xs font-semibold"
+            />
             <div className="flex-1 space-y-2 min-w-0">
               <MentionableTextarea
                 rows={3}
diff --git a/src/components/finance/cost-route/linked-requests-popover.tsx b/src/components/finance/cost-route/linked-requests-popover.tsx
deleted file mode 100644
index 15d8b66..0000000
--- a/src/components/finance/cost-route/linked-requests-popover.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client"
-
-import Link from "next/link"
-
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { useLinkedRequests } from "@/hooks/finance/use-duplicate-route"
-
-interface Props {
-  headId: number
-}
-
-export function LinkedRequestsPopover({ headId }: Props) {
-  const { data } = useLinkedRequests(headId)
-  const rows = data ?? []
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm">
-          🔗 {rows.length} linked {rows.length === 1 ? "request" : "requests"}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-80 p-2">
-        {rows.length === 0 ? (
-          <p className="p-2 text-sm text-muted-foreground">No requests linked yet.</p>
-        ) : (
-          <ul className="divide-y">
-            {rows.map((r) => (
-              <li key={r.requestId} className="py-2">
-                <Link
-                  href={`/finance/product-requests/${r.requestId}`}
-                  className="text-sm hover:underline"
-                >
-                  <div className="font-mono">{r.requestNo}</div>
-                  <div className="text-xs text-muted-foreground">
-                    {r.productTop2 || "—"} · <Badge variant="outline">{r.status}</Badge>
-                  </div>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/src/components/finance/cost-route/linked-requests-sheet.tsx b/src/components/finance/cost-route/linked-requests-sheet.tsx
new file mode 100644
index 0000000..e466e10
--- /dev/null
+++ b/src/components/finance/cost-route/linked-requests-sheet.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { Link2, X } from "lucide-react"
+
+import { StatusBadge } from "@/components/common/status-badge"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { useLinkedRequests } from "@/hooks/finance/use-duplicate-route"
+
+interface Props {
+  headId: number
+}
+
+export function LinkedRequestsSheet({ headId }: Props) {
+  const [open, setOpen] = useState(false)
+  const { data } = useLinkedRequests(headId)
+  const rows = data ?? []
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <Link2 className="mr-1.5 h-4 w-4" />
+        {rows.length} linked {rows.length === 1 ? "request" : "requests"}
+      </Button>
+
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent
+          side="right"
+          showCloseButton={false}
+          className="flex flex-col p-0 w-full sm:max-w-md gap-0"
+        >
+          {/* Sticky header */}
+          <div className="flex shrink-0 items-center justify-between gap-3 border-b bg-background px-6 py-4">
+            <div className="space-y-0.5">
+              <SheetTitle className="text-base font-semibold">Linked requests</SheetTitle>
+              <SheetDescription className="text-xs text-muted-foreground">
+                {rows.length === 0
+                  ? "No product requests linked to this route."
+                  : `${rows.length} product ${rows.length === 1 ? "request" : "requests"} linked to this route.`}
+              </SheetDescription>
+            </div>
+            <SheetClose asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </Button>
+            </SheetClose>
+          </div>
+
+          {/* Scrollable content */}
+          <div className="flex-1 overflow-y-auto px-6 py-4">
+            {rows.length === 0 ? (
+              <p className="py-8 text-center text-sm text-muted-foreground">
+                No requests linked yet.
+              </p>
+            ) : (
+              <ul className="divide-y">
+                {rows.map((r) => (
+                  <li key={r.requestId} className="py-3">
+                    <Link
+                      href={`/finance/product-requests/${r.requestId}`}
+                      className="group -mx-2 block space-y-1 rounded-md p-2 transition-colors hover:bg-muted/50"
+                      onClick={() => setOpen(false)}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-mono text-sm font-medium group-hover:text-primary">
+                          {r.requestNo}
+                        </span>
+                        <StatusBadge status={r.status} type="request" size="sm" />
+                      </div>
+                      {r.productTop2 && (
+                        <div className="truncate text-xs text-muted-foreground">
+                          {r.productTop2}
+                        </div>
+                      )}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
diff --git a/src/components/finance/cost-route/route-graph-edit-panel.tsx b/src/components/finance/cost-route/route-graph-edit-panel.tsx
index 97877a0..7509280 100644
--- a/src/components/finance/cost-route/route-graph-edit-panel.tsx
+++ b/src/components/finance/cost-route/route-graph-edit-panel.tsx
@@ -116,7 +116,7 @@ function SeqBody({
           <div className="mt-2 space-y-1">
             {rms.map((rm, rmIdx) => (
               <div
-                key={`${rm.rmId}-${rmIdx}`}
+                key={rm.uid}
                 className="flex items-center gap-2 rounded border bg-muted/20 px-2 py-1.5 text-xs"
               >
                 <Badge variant="outline" className="shrink-0 text-[10px]">
diff --git a/src/components/finance/cost-route/route-graph-editor.tsx b/src/components/finance/cost-route/route-graph-editor.tsx
index 0567706..5bab5f6 100644
--- a/src/components/finance/cost-route/route-graph-editor.tsx
+++ b/src/components/finance/cost-route/route-graph-editor.tsx
@@ -15,7 +15,9 @@ import { isValidProductRmEdge } from "@/components/finance/cost-route/dag-rules"
 import {
   ArrowLeft,
   CheckCircle2,
+  GitFork,
   Loader2,
+  Lock,
   Plus,
   Save,
   Trash2,
@@ -26,9 +28,10 @@ import Link from "next/link"
 import { CalculateButton } from "@/components/finance/calc-jobs/calculate-button"
 import { ProductMasterCombobox } from "@/components/finance/comboboxes/product-master-combobox"
 import { DuplicateRouteDialog } from "@/components/finance/cost-route/duplicate-route-dialog"
-import { LinkedRequestsPopover } from "@/components/finance/cost-route/linked-requests-popover"
+import { LinkedRequestsSheet } from "@/components/finance/cost-route/linked-requests-sheet"
 import { RouteGraphEditPanel } from "@/components/finance/cost-route/route-graph-edit-panel"
 import { RouteGraphFlow } from "@/components/finance/cost-route/route-graph-flow"
+import { StatusBadge } from "@/components/common/status-badge"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card } from "@/components/ui/card"
@@ -40,7 +43,8 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command"
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Dialog, DialogDescription, DialogTitle } from "@/components/ui/dialog"
+import { ConfirmDialog } from "@/components/shared"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
@@ -59,11 +63,18 @@ import {
   useSaveRouteGraph,
 } from "@/hooks/finance/use-cost-route"
 import { useRMGroups } from "@/hooks/finance/use-rm-group"
-import type {
-  CostRouteRm,
-  CostRouteSeq,
-  RmRefType,
-  RouteGraph,
+import {
+  ScrollableDialogBody,
+  ScrollableDialogContent,
+  ScrollableDialogFooter,
+  ScrollableDialogHeader,
+} from "@/components/common/scrollable-dialog"
+import {
+  newUid,
+  type CostRouteRm,
+  type CostRouteSeq,
+  type RmRefType,
+  type RouteGraph,
 } from "@/types/finance/cost-route"
 import { cn } from "@/lib/utils"
 
@@ -80,14 +91,16 @@ export function RouteGraphEditor({ headId }: Props) {
   const [dirty, setDirty] = useState(false)
   const [stageDialogState, setStageDialogState] = useState<
     | { open: false }
-    | { open: true; defaultLevel?: number; linkToSeqId?: number; linkDirection?: "upstream" | "downstream" }
+    | { open: true; defaultLevel?: number; linkToSeqUid?: string; linkDirection?: "upstream" | "downstream" }
   >({ open: false })
   const [forkOpen, setForkOpen] = useState(false)
   const [rmDialog, setRmDialog] = useState<{ seqIdx: number } | null>(null)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
   const [view, setView] = useState<"visual" | "cards">("visual")
   // Inline edit-panel selection — only one of these is set at a time.
-  const [selectedSeqId, setSelectedSeqId] = useState<number | null>(null)
-  const [selectedRmId, setSelectedRmId] = useState<number | null>(null)
+  // Keyed on the client uid so new/unsaved elements are selectable pre-save.
+  const [selectedSeqUid, setSelectedSeqUid] = useState<string | null>(null)
+  const [selectedRmUid, setSelectedRmUid] = useState<string | null>(null)
 
   useEffect(() => {
     workingRef.current = working
@@ -136,14 +149,6 @@ export function RouteGraphEditor({ headId }: Props) {
     [seqs],
   )
 
-  const ensureWorking = useCallback((): RouteGraph | null => {
-    if (working) return working
-    if (!persisted) return null
-    const clone = JSON.parse(JSON.stringify(persisted)) as RouteGraph
-    setWorking(clone)
-    return clone
-  }, [working, persisted])
-
   // ---------- stage actions ----------
   // addStage returns the index of the newly-pushed seq in the next graph's
   // seqs array, so callers (e.g. F3 drop-on-pane) can immediately link it.
@@ -157,13 +162,17 @@ export function RouteGraphEditor({ headId }: Props) {
     productCode?: string,
     productName?: string,
     meta?: { routeName?: string; routeItemCode?: string; routeShadeCode?: string; routeShadeName?: string },
-  ): { newSeqIdx: number } => {
-    let newSeqIdx = -1
+  ): { newSeqUid: string } => {
+    const newSeqUid = newUid()
     setWorking((prev) => {
       const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
       if (!base) return prev
       const existing = base.seqs.filter((s) => s.routeLevel === level).length
-      base.seqs.push({
+      // Pure updater: never mutate `prev`. Under React StrictMode the updater is
+      // double-invoked with the same `prev`, so an in-place push would append the
+      // stage twice with a shared uid. Build a fresh seqs array instead.
+      const newSeq = {
+        uid: newSeqUid,
         seqId: 0,
         headId,
         productSysId,
@@ -178,32 +187,40 @@ export function RouteGraphEditor({ headId }: Props) {
         positionX: 0,
         positionY: 0,
         rms: [],
-      })
-      newSeqIdx = base.seqs.length - 1
-      return { ...base, seqs: [...base.seqs] }
+      }
+      return { ...base, seqs: [...base.seqs, newSeq] }
     })
     setDirty(true)
-    return { newSeqIdx }
+    return { newSeqUid }
   }
 
-  const deleteStage = (seqIdx: number) => {
+  const deleteStageByUid = (seqUid: string) => {
     setWorking((prev) => {
       const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
       if (!base) return prev
-      base.seqs = base.seqs.filter((_, i) => i !== seqIdx)
-      return { ...base, seqs: [...base.seqs] }
+      return { ...base, seqs: base.seqs.filter((s) => s.uid !== seqUid) }
     })
     setDirty(true)
   }
 
   // ---------- rm actions ----------
-  const addRm = (seqIdx: number, rm: CostRouteRm) => {
+  // Callers may omit `uid` — a fresh client uid is always stamped here so the
+  // new RM is immediately clickable/editable and delete targets exactly one.
+  const addRm = (seqIdx: number, rm: Omit<CostRouteRm, "uid"> & { uid?: string }) => {
     setWorking((prev) => {
       const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
       if (!base) return prev
       const seq = base.seqs[seqIdx]
       if (!seq) return base
-      const updatedSeq = { ...seq, rms: [...(seq.rms ?? []), { ...rm, seqId: seq.seqId, parentProductSysId: seq.productSysId }] }
+      const newRm: CostRouteRm = {
+        ...rm,
+        // Always stamp a fresh client uid so the new RM is immediately
+        // clickable/editable and delete targets exactly this one.
+        uid: rm.uid || newUid(),
+        seqId: seq.seqId,
+        parentProductSysId: seq.productSysId,
+      }
+      const updatedSeq = { ...seq, rms: [...(seq.rms ?? []), newRm] }
       const updatedSeqs = [...base.seqs]
       updatedSeqs[seqIdx] = updatedSeq
       return { ...base, seqs: updatedSeqs }
@@ -224,42 +241,72 @@ export function RouteGraphEditor({ headId }: Props) {
     setWorking((prev) => {
       const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
       if (!base) return prev
-      const seq = base.seqs[seqIdx]
-      if (!seq) return base
-      seq.rms = seq.rms.filter((_, i) => i !== rmIdx)
-      return { ...base, seqs: [...base.seqs] }
+      const updatedSeqs = base.seqs.map((seq, i) =>
+        i === seqIdx
+          ? { ...seq, rms: seq.rms.filter((_, j) => j !== rmIdx) }
+          : seq,
+      )
+      return { ...base, seqs: updatedSeqs }
     })
     setDirty(true)
   }
 
   // ---------- React Flow native actions ----------
 
-  // Persist a stage's drag position.
+  // Persist a stage's drag position (keyed on the client uid).
   const updateSeqPosition = useCallback(
-    (seqId: number, x: number, y: number) => {
+    (seqUid: string, x: number, y: number) => {
       setWorking((prev) => {
         const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
         if (!base) return prev
-        const seq = base.seqs.find((s) => s.seqId === seqId)
+        const seq = base.seqs.find((s) => s.uid === seqUid)
         if (!seq) return base
         if (seq.positionX === x && seq.positionY === y) return base
-        seq.positionX = x
-        seq.positionY = y
-        return { ...base, seqs: [...base.seqs] }
+        // Pure updater — replace the target seq, never mutate `prev` in place.
+        return {
+          ...base,
+          seqs: base.seqs.map((s) => (s.uid === seqUid ? { ...s, positionX: x, positionY: y } : s)),
+        }
       })
       setDirty(true)
     },
     [persisted],
   )
 
-  // Add a PRODUCT-RM by drawing an edge from upstream → downstream stage.
+  // Persist an ITEM/GROUP RM's drag position (keyed on the client uid).
+  const updateRmPosition = useCallback(
+    (rmUid: string, x: number, y: number) => {
+      setWorking((prev) => {
+        const base = prev ?? (persisted ? (JSON.parse(JSON.stringify(persisted)) as RouteGraph) : null)
+        if (!base) return prev
+        let changed = false
+        const seqs = base.seqs.map((seq) => {
+          const idx = (seq.rms ?? []).findIndex((r) => r.uid === rmUid)
+          if (idx < 0) return seq
+          const rm = seq.rms[idx]
+          if (rm.positionX === x && rm.positionY === y) return seq
+          changed = true
+          const rms = [...seq.rms]
+          rms[idx] = { ...rm, positionX: x, positionY: y }
+          return { ...seq, rms }
+        })
+        if (!changed) return base
+        return { ...base, seqs }
+      })
+      setDirty(true)
+    },
+    [persisted],
+  )
+
+  // Add a PRODUCT-RM by drawing an edge from upstream → downstream stage
+  // (keyed on client uids so newly-added, unsaved stages can be linked).
   const addProductRmFromEdge = useCallback(
-    (upstreamSeqId: number, downstreamSeqId: number) => {
+    (upstreamSeqUid: string, downstreamSeqUid: string) => {
       if (locked) return
       const current = working ?? persisted
       if (!current) return
-      const upstream = current.seqs.find((s) => s.seqId === upstreamSeqId)
-      const downstream = current.seqs.find((s) => s.seqId === downstreamSeqId)
+      const upstream = current.seqs.find((s) => s.uid === upstreamSeqUid)
+      const downstream = current.seqs.find((s) => s.uid === downstreamSeqUid)
       if (!upstream || !downstream) return
       const verdict = isValidProductRmEdge(current, upstream, downstream)
       if (!verdict.ok) {
@@ -286,17 +333,17 @@ export function RouteGraphEditor({ headId }: Props) {
   // Click stage node → open inline edit panel (stays on React Flow view).
   // We still keep stageCardRefs so the "Open in Cards view" escape hatch can
   // scroll to the right card.
-  const stageCardRefs = useRef<Map<number, HTMLDivElement | null>>(new Map())
-  const handleStageClick = useCallback((seqId: number) => {
-    setSelectedRmId(null)
-    setSelectedSeqId(seqId)
+  const stageCardRefs = useRef<Map<string, HTMLDivElement | null>>(new Map())
+  const handleStageClick = useCallback((seqUid: string) => {
+    // Keyed on the stable client uid — new/unsaved stages are editable too.
+    setSelectedRmUid(null)
+    setSelectedSeqUid(seqUid)
   }, [])
 
-  // Click edge → open inline edit panel for that RM.
-  const handleEdgeClick = useCallback((rmId: number) => {
-    if (rmId === 0) return // unsaved RM — wait until save
-    setSelectedSeqId(null)
-    setSelectedRmId(rmId)
+  // Click edge → open inline edit panel for that RM (keyed on client uid).
+  const handleEdgeClick = useCallback((rmUid: string) => {
+    setSelectedSeqUid(null)
+    setSelectedRmUid(rmUid)
   }, [])
 
   // Update a single RM's ratio (used by both seq-panel rows + rm-panel).
@@ -310,8 +357,12 @@ export function RouteGraphEditor({ headId }: Props) {
         if (!seq) return base
         const targetRm = seq.rms[rmIdx]
         if (!targetRm) return base
-        targetRm.routeRmRatio = next
-        return { ...base, seqs: [...base.seqs] }
+        // Pure updater — rebuild the target seq's rms array, never mutate `prev`.
+        const rms = [...seq.rms]
+        rms[rmIdx] = { ...targetRm, routeRmRatio: next }
+        const seqs = [...base.seqs]
+        seqs[seqIdx] = { ...seq, rms }
+        return { ...base, seqs }
       })
       setDirty(true)
     },
@@ -322,11 +373,11 @@ export function RouteGraphEditor({ headId }: Props) {
   // AddStageDialog pre-filled with a level hint and a "link back to source"
   // intent. The dialog's onAdd callback will append the new stage and link.
   const handleDropOnPane = useCallback(
-    (sourceSeqId: number, handleType: "source" | "target") => {
+    (sourceSeqUid: string, handleType: "source" | "target") => {
       if (locked) return
       const current = working ?? persisted
       if (!current) return
-      const sourceSeq = current.seqs.find((s) => s.seqId === sourceSeqId)
+      const sourceSeq = current.seqs.find((s) => s.uid === sourceSeqUid)
       if (!sourceSeq) return
       // handleType === "source" = dragged from the BOTTOM handle = adding a
       // DOWNSTREAM stage (one level shallower than source).
@@ -341,7 +392,7 @@ export function RouteGraphEditor({ headId }: Props) {
       setStageDialogState({
         open: true,
         defaultLevel,
-        linkToSeqId: sourceSeqId,
+        linkToSeqUid: sourceSeqUid,
         linkDirection,
       })
     },
@@ -371,26 +422,28 @@ export function RouteGraphEditor({ headId }: Props) {
             {head?.productName ? <span className="ml-2 text-base font-normal text-muted-foreground">{head.productName}</span> : null}
           </h1>
           <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
-            <Badge>{head?.routingStatus}</Badge>
+            <StatusBadge status={head?.routingStatus} type="route" size="sm" />
             <span>version v{head?.version}</span>
-            {head?.promotedFromDraftId ? <span>· promoted from a routing draft</span> : null}
           </div>
           {!locked && (
-            <div className="mt-2">
+            <details className="mt-2">
+              <summary className="cursor-pointer select-none text-xs text-muted-foreground hover:text-foreground transition-colors">
+                {head?.notes ? "Edit notes" : "Add notes (optional)"}
+              </summary>
               <Textarea
                 placeholder="Routing notes (optional)…"
-                className="h-14 resize-none text-xs"
+                className="mt-1.5 h-14 resize-none text-xs"
                 value={head?.notes ?? ""}
                 onChange={(e) => setHeadNotes(e.target.value)}
               />
-            </div>
+            </details>
           )}
           {locked && head?.notes && (
             <p className="mt-2 text-xs text-muted-foreground whitespace-pre-wrap">{head.notes}</p>
           )}
         </div>
         <div className="flex flex-wrap gap-2">
-          <LinkedRequestsPopover headId={headId} />
+          <LinkedRequestsSheet headId={headId} />
           <CalculateButton
             routeHeadId={headId}
             size="sm"
@@ -398,7 +451,7 @@ export function RouteGraphEditor({ headId }: Props) {
             disabledReason="Mark route COMPLETE before calculating"
           />
           <Button variant="outline" size="sm" onClick={() => setForkOpen(true)}>
-            🔱 Fork
+            <GitFork className="mr-1 h-4 w-4" /> Fork
           </Button>
           {!locked && (
             <Button onClick={() => setStageDialogState({ open: true })} variant="outline">
@@ -417,13 +470,9 @@ export function RouteGraphEditor({ headId }: Props) {
           )}
           {!locked && (
             <Button
-              onClick={() => {
-                if (confirm("Delete this route head? Cannot be undone via UI.")) {
-                  deleteM.mutate({ headId })
-                }
-              }}
+              onClick={() => setDeleteConfirmOpen(true)}
               variant="ghost"
-              className="text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
             >
               <Trash2 className="mr-1 h-4 w-4" /> Delete
             </Button>
@@ -432,13 +481,14 @@ export function RouteGraphEditor({ headId }: Props) {
       </div>
 
       {locked && (
-        <div className="absolute inset-x-0 top-0 z-10 rounded-t-md bg-amber-100 border-b border-amber-200 px-4 py-2 text-sm text-amber-800 dark:bg-amber-950/50 dark:border-amber-800 dark:text-amber-300">
-          🔒 Route is LOCKED — editing disabled. Manage lock from the product request detail page.
+        <div className="flex items-center gap-2 rounded-md border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950/50 dark:text-amber-300">
+          <Lock className="h-4 w-4 shrink-0" />
+          Route is <strong>LOCKED</strong> — editing disabled. Manage lock from the product request detail page.
         </div>
       )}
 
       {complete && (
-        <Card className="border-blue-200 bg-blue-50 p-3 text-sm text-blue-900">
+        <Card className="border-blue-200 bg-blue-50 p-3 text-sm text-blue-900 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-300">
           Status: COMPLETE. Edits are still allowed — Lock the route to freeze it for calculation.
         </Card>
       )}
@@ -473,7 +523,8 @@ export function RouteGraphEditor({ headId }: Props) {
             graph={graph}
             locked={locked}
             onAddStage={!locked ? () => setStageDialogState({ open: true }) : undefined}
-            onNodePositionChange={updateSeqPosition}
+            onStagePositionChange={updateSeqPosition}
+            onRmPositionChange={updateRmPosition}
             onConnectStages={addProductRmFromEdge}
             onStageClick={handleStageClick}
             onEdgeClick={handleEdgeClick}
@@ -483,34 +534,34 @@ export function RouteGraphEditor({ headId }: Props) {
           <EditPanelHost
             graph={graph}
             locked={locked}
-            selectedSeqId={selectedSeqId}
-            selectedRmId={selectedRmId}
+            selectedSeqUid={selectedSeqUid}
+            selectedRmUid={selectedRmUid}
             onClose={() => {
-              setSelectedSeqId(null)
-              setSelectedRmId(null)
+              setSelectedSeqUid(null)
+              setSelectedRmUid(null)
             }}
             onChangeRmRatio={updateRmRatio}
             onRemoveRm={(seqIdx, rmIdx) => {
               deleteRm(seqIdx, rmIdx)
-              setSelectedRmId(null)
+              setSelectedRmUid(null)
             }}
             onAddRm={(seqIdx) => setRmDialog({ seqIdx })}
-            onRemoveStage={(seqIdx) => {
-              deleteStage(seqIdx)
-              setSelectedSeqId(null)
+            onRemoveStage={(seqUid) => {
+              deleteStageByUid(seqUid)
+              setSelectedSeqUid(null)
             }}
-            onOpenInCards={(seqId) => {
+            onOpenInCards={(seqUid) => {
               setView("cards")
               requestAnimationFrame(() => {
-                const el = stageCardRefs.current.get(seqId)
+                const el = stageCardRefs.current.get(seqUid)
                 if (el) {
                   el.scrollIntoView({ behavior: "smooth", block: "center" })
                   el.classList.add("ring-2", "ring-primary")
                   setTimeout(() => el.classList.remove("ring-2", "ring-primary"), 1500)
                 }
               })
-              setSelectedSeqId(null)
-              setSelectedRmId(null)
+              setSelectedSeqUid(null)
+              setSelectedRmUid(null)
             }}
           />
         </div>
@@ -527,13 +578,11 @@ export function RouteGraphEditor({ headId }: Props) {
               const idx = seqs.indexOf(s)
               return (
                 <Card
-                  key={`${s.seqId}-${s.routeLevel}-${s.routeSeq}-${idx}`}
+                  key={s.uid}
                   className="p-3 transition-shadow"
                   ref={(el: HTMLDivElement | null) => {
-                    if (s.seqId > 0) {
-                      if (el) stageCardRefs.current.set(s.seqId, el)
-                      else stageCardRefs.current.delete(s.seqId)
-                    }
+                    if (el) stageCardRefs.current.set(s.uid, el)
+                    else stageCardRefs.current.delete(s.uid)
                   }}
                 >
                   <div className="flex items-start justify-between gap-2">
@@ -557,7 +606,7 @@ export function RouteGraphEditor({ headId }: Props) {
                         size="icon"
                         variant="ghost"
                         className="h-7 w-7 text-red-500"
-                        onClick={() => deleteStage(idx)}
+                        onClick={() => deleteStageByUid(s.uid)}
                         title="Remove stage"
                       >
                         <X className="h-4 w-4" />
@@ -570,17 +619,25 @@ export function RouteGraphEditor({ headId }: Props) {
                     ) : (
                       s.rms.map((rm, rmIdx) => (
                         <div
-                          key={`${rm.rmId}-${rmIdx}`}
+                          key={rm.uid}
                           className="flex items-center justify-between rounded border bg-muted/30 px-2 py-1 text-xs"
                         >
-                          <div className="flex min-w-0 items-center gap-2">
-                            <Badge variant="outline" className="text-[10px]">
+                          <div className="flex min-w-0 items-center gap-2 flex-1">
+                            <span className={`shrink-0 rounded px-1 py-0.5 text-[10px] font-medium border ${
+                              rm.rmType === "GROUP"
+                                ? "border-purple-400 text-purple-700 dark:text-purple-300"
+                                : rm.rmType === "PRODUCT"
+                                ? "border-emerald-400 text-emerald-700 dark:text-emerald-300"
+                                : "border-amber-400 text-amber-700 dark:text-amber-300"
+                            }`}>
                               {rm.rmType}
-                            </Badge>
-                            <span className="truncate font-mono">
-                              {rm.routeRmName || rm.rmItemCode || rm.rmGroupCode || `product`}
                             </span>
-                            <span className="shrink-0 text-muted-foreground">×{rm.routeRmRatio}</span>
+                            <div className="min-w-0 flex-1">
+                              <div className="truncate font-mono">
+                                {rm.routeRmName || rm.rmItemCode || rm.rmGroupCode || "—"}
+                              </div>
+                              <div className="text-[10px] text-muted-foreground">×{rm.routeRmRatio}</div>
+                            </div>
                           </div>
                           {!locked && (
                             <Button
@@ -621,18 +678,18 @@ export function RouteGraphEditor({ headId }: Props) {
         existingLevels={seqsByLevel.map((g) => g.level)}
         defaultLevel={stageDialogState.defaultLevel}
         onAdd={(level, productSysId, productCode, productName, meta) => {
-          const { newSeqIdx } = addStage(level, productSysId, productCode, productName, meta)
+          const { newSeqUid } = addStage(level, productSysId, productCode, productName, meta)
           // F3 link-after-add: if we opened the dialog by dropping on the pane,
           // wire a PRODUCT-RM between the source seq and the newly-created seq.
-          if (stageDialogState.open && stageDialogState.linkToSeqId !== undefined && newSeqIdx >= 0) {
-            const sourceSeqId = stageDialogState.linkToSeqId
+          if (stageDialogState.open && stageDialogState.linkToSeqUid !== undefined) {
+            const sourceSeqUid = stageDialogState.linkToSeqUid
             const direction = stageDialogState.linkDirection ?? "upstream"
             // Defer one frame so the working state setter has flushed.
             requestAnimationFrame(() => {
               const current = (workingRef.current ?? persisted) as RouteGraph | null
               if (!current) return
-              const newSeq = current.seqs[newSeqIdx]
-              const sourceSeq = current.seqs.find((s) => s.seqId === sourceSeqId)
+              const newSeq = current.seqs.find((s) => s.uid === newSeqUid)
+              const sourceSeq = current.seqs.find((s) => s.uid === sourceSeqUid)
               if (!newSeq || !sourceSeq) return
               // Newly-added seq has seqId === 0 (unsaved). PRODUCT-RM expects
               // both ends to exist; we add it by indexing into the seqs array.
@@ -675,6 +732,20 @@ export function RouteGraphEditor({ headId }: Props) {
         sourceProductCode={head?.productCode}
       />
 
+      <ConfirmDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        title="Delete this route?"
+        description="This route head and all its stages will be permanently deleted. This cannot be undone."
+        variant="destructive"
+        confirmText="Delete"
+        isLoading={deleteM.isPending}
+        onConfirm={() => {
+          deleteM.mutate({ headId })
+          setDeleteConfirmOpen(false)
+        }}
+      />
+
       {rmDialog && (
         <AddRmDialog
           open
@@ -695,14 +766,14 @@ export function RouteGraphEditor({ headId }: Props) {
 
 // ============================================================================
 // Edit-panel render helper — Bug 2 (stage click) + Bug 5 (RM edge click).
-// Picks the right panel mode based on selectedSeqId / selectedRmId.
+// Picks the right panel mode based on selectedSeqUid / selectedRmUid.
 // ============================================================================
 
 function EditPanelHost({
   graph,
   locked,
-  selectedSeqId,
-  selectedRmId,
+  selectedSeqUid,
+  selectedRmUid,
   onClose,
   onChangeRmRatio,
   onRemoveRm,
@@ -712,17 +783,17 @@ function EditPanelHost({
 }: {
   graph: RouteGraph
   locked: boolean
-  selectedSeqId: number | null
-  selectedRmId: number | null
+  selectedSeqUid: string | null
+  selectedRmUid: string | null
   onClose: () => void
   onChangeRmRatio: (seqIdx: number, rmIdx: number, next: number) => void
   onRemoveRm: (seqIdx: number, rmIdx: number) => void
   onAddRm: (seqIdx: number) => void
-  onRemoveStage: (seqIdx: number) => void
-  onOpenInCards: (seqId: number) => void
+  onRemoveStage: (seqUid: string) => void
+  onOpenInCards: (seqUid: string) => void
 }) {
-  if (selectedSeqId !== null) {
-    const seqIdx = graph.seqs.findIndex((s) => s.seqId === selectedSeqId)
+  if (selectedSeqUid !== null) {
+    const seqIdx = graph.seqs.findIndex((s) => s.uid === selectedSeqUid)
     if (seqIdx < 0) return null
     const seq = graph.seqs[seqIdx]
     return (
@@ -734,14 +805,14 @@ function EditPanelHost({
         onChangeRmRatio={(rmIdx, ratio) => onChangeRmRatio(seqIdx, rmIdx, ratio)}
         onRemoveRm={(rmIdx) => onRemoveRm(seqIdx, rmIdx)}
         onAddRm={() => onAddRm(seqIdx)}
-        onRemoveStage={() => onRemoveStage(seqIdx)}
-        onOpenInCards={() => onOpenInCards(selectedSeqId)}
+        onRemoveStage={() => onRemoveStage(selectedSeqUid)}
+        onOpenInCards={() => onOpenInCards(selectedSeqUid)}
       />
     )
   }
-  if (selectedRmId !== null) {
+  if (selectedRmUid !== null) {
     for (let i = 0; i < graph.seqs.length; i += 1) {
-      const j = graph.seqs[i].rms.findIndex((r) => r.rmId === selectedRmId)
+      const j = graph.seqs[i].rms.findIndex((r) => r.uid === selectedRmUid)
       if (j >= 0) {
         return (
           <RouteGraphEditPanel
@@ -789,12 +860,15 @@ function AddStageDialog({
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent>
-        <DialogHeader>
+      <ScrollableDialogContent className="max-w-lg">
+        <ScrollableDialogHeader>
           <DialogTitle>Add stage</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-3">
-          <div>
+          <DialogDescription>
+            A stage produces one product at a route level. 1 = finished good.
+          </DialogDescription>
+        </ScrollableDialogHeader>
+        <ScrollableDialogBody className="space-y-4">
+          <div className="space-y-1.5">
             <Label htmlFor="stage-level">Route level</Label>
             <Input
               id="stage-level"
@@ -803,45 +877,45 @@ function AddStageDialog({
               value={level}
               onChange={(e) => setLevel(Number(e.target.value) || 1)}
             />
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground">
               1 = Finished good. Each higher level is one step upstream.
             </p>
           </div>
-          <div>
+          <div className="space-y-1.5">
             <Label>Output product *</Label>
             <ProductMasterCombobox
               value={picked?.id}
               onChange={(id, code, name) => setPicked({ id, code, name })}
               placeholder="Search product by code or name…"
             />
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="text-xs text-muted-foreground">
               The product this stage produces (intermediate or FG).
             </p>
           </div>
           <details className="text-xs">
             <summary className="cursor-pointer text-muted-foreground select-none">Additional metadata (optional)</summary>
-            <div className="mt-2 grid grid-cols-2 gap-2">
-              <div>
+            <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div className="space-y-1.5">
                 <Label className="text-xs">Route name</Label>
-                <Input value={routeName} onChange={(e) => setRouteName(e.target.value)} placeholder="e.g. Main spin" className="h-8 text-xs" />
+                <Input value={routeName} onChange={(e) => setRouteName(e.target.value)} placeholder="e.g. Main spin" className="h-9 text-sm" />
               </div>
-              <div>
+              <div className="space-y-1.5">
                 <Label className="text-xs">ERP item code</Label>
-                <Input value={routeItemCode} onChange={(e) => setRouteItemCode(e.target.value)} placeholder="e.g. ACY0000001" className="h-8 text-xs" />
+                <Input value={routeItemCode} onChange={(e) => setRouteItemCode(e.target.value)} placeholder="e.g. ACY0000001" className="h-9 text-sm" />
               </div>
-              <div>
+              <div className="space-y-1.5">
                 <Label className="text-xs">Shade code</Label>
-                <Input value={routeShadeCode} onChange={(e) => setRouteShadeCode(e.target.value)} placeholder="NL" className="h-8 text-xs" />
+                <Input value={routeShadeCode} onChange={(e) => setRouteShadeCode(e.target.value)} placeholder="NL" className="h-9 text-sm" />
               </div>
-              <div>
+              <div className="space-y-1.5">
                 <Label className="text-xs">Shade name</Label>
-                <Input value={routeShadeName} onChange={(e) => setRouteShadeName(e.target.value)} placeholder="NATURAL" className="h-8 text-xs" />
+                <Input value={routeShadeName} onChange={(e) => setRouteShadeName(e.target.value)} placeholder="NATURAL" className="h-9 text-sm" />
               </div>
             </div>
           </details>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
+        </ScrollableDialogBody>
+        <ScrollableDialogFooter>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
@@ -859,8 +933,8 @@ function AddStageDialog({
           >
             Add stage
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </ScrollableDialogFooter>
+      </ScrollableDialogContent>
     </Dialog>
   )
 }
@@ -887,7 +961,7 @@ function AddRmDialog({
   onClose: () => void
   stageLevel: number
   upstreamProducts: UpstreamProduct[]
-  onAdd: (rm: CostRouteRm) => void
+  onAdd: (rm: Omit<CostRouteRm, "uid">) => void
 }) {
   const [rmType, setRmType] = useState<RmRefType>("PRODUCT")
   const [productPick, setProductPick] = useState<UpstreamProduct | null>(null)
@@ -905,12 +979,16 @@ function AddRmDialog({
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Add RM input (feeding stage at level {stageLevel})</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-3">
-          <div>
+      <ScrollableDialogContent className="max-w-lg">
+        <ScrollableDialogHeader>
+          <DialogTitle>Add RM input</DialogTitle>
+          <DialogDescription>
+            Feeding the stage at level {stageLevel}. PRODUCT comes from another
+            stage in this routing; GROUP is a raw-material group.
+          </DialogDescription>
+        </ScrollableDialogHeader>
+        <ScrollableDialogBody className="space-y-4">
+          <div className="space-y-1.5">
             <Label htmlFor="rm-type">Source</Label>
             <Select
               value={rmType}
@@ -931,7 +1009,7 @@ function AddRmDialog({
           </div>
 
           {rmType === "PRODUCT" && (
-            <div>
+            <div className="space-y-1.5">
               <Label>Upstream stage (must be at higher level)</Label>
               <UpstreamProductPicker
                 candidates={upstreamProducts}
@@ -947,14 +1025,14 @@ function AddRmDialog({
           )}
 
           {rmType === "GROUP" && (
-            <div>
+            <div className="space-y-1.5">
               <Label>RM group</Label>
               <RmGroupCombobox value={groupPick?.code} onChange={(code, name) => setGroupPick({ code, name })} />
             </div>
           )}
 
-          <div className="grid grid-cols-2 gap-3">
-            <div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-1.5">
               <Label htmlFor="rm-ratio">Ratio per output unit *</Label>
               <Input
                 id="rm-ratio"
@@ -965,7 +1043,7 @@ function AddRmDialog({
                 onChange={(e) => setRatio(e.target.value)}
               />
             </div>
-            <div>
+            <div className="space-y-1.5">
               <Label htmlFor="rm-subtype">Sub type (optional)</Label>
               <Input
                 id="rm-subtype"
@@ -977,24 +1055,24 @@ function AddRmDialog({
           </div>
           <details className="text-xs">
             <summary className="cursor-pointer text-muted-foreground select-none">Additional metadata (optional)</summary>
-            <div className="mt-2 grid grid-cols-2 gap-2">
-              <div>
+            <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div className="space-y-1.5">
                 <Label className="text-xs">Shade code</Label>
-                <Input value={shadeCode} onChange={(e) => setShadeCode(e.target.value)} placeholder="NL" className="h-8 text-xs" />
+                <Input value={shadeCode} onChange={(e) => setShadeCode(e.target.value)} placeholder="NL" className="h-9 text-sm" />
               </div>
-              <div>
+              <div className="space-y-1.5">
                 <Label className="text-xs">Shade name</Label>
-                <Input value={shadeName} onChange={(e) => setRmShadeName(e.target.value)} placeholder="NATURAL" className="h-8 text-xs" />
+                <Input value={shadeName} onChange={(e) => setRmShadeName(e.target.value)} placeholder="NATURAL" className="h-9 text-sm" />
               </div>
-              <div className="col-span-2">
+              <div className="space-y-1.5 sm:col-span-2">
                 <Label className="text-xs">Notes</Label>
-                <Input value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Optional notes…" className="h-8 text-xs" />
+                <Input value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Optional notes…" className="h-9 text-sm" />
               </div>
             </div>
           </details>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onClose}>
+        </ScrollableDialogBody>
+        <ScrollableDialogFooter>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
           <Button
@@ -1038,8 +1116,8 @@ function AddRmDialog({
           >
             Add input
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </ScrollableDialogFooter>
+      </ScrollableDialogContent>
     </Dialog>
   )
 }
diff --git a/src/components/finance/cost-route/route-graph-flow.tsx b/src/components/finance/cost-route/route-graph-flow.tsx
index a03c519..e4ecbb9 100644
--- a/src/components/finance/cost-route/route-graph-flow.tsx
+++ b/src/components/finance/cost-route/route-graph-flow.tsx
@@ -14,13 +14,15 @@
 //   • RM→Stage:    ITEM and GROUP RMs render as small RM nodes to the left
 //     of their stage, connected by an edge labelled with their ratio.
 //
-// Interactions (gated by `locked`):
-//   • Drag a stage node → onNodePositionChange(seqId, x, y)
-//   • Connect stage→stage → onConnectStages(sourceSeqId, targetSeqId)
-//   • Click stage node → onStageClick(seqId)
-//   • Click edge (PRODUCT/ITEM/GROUP RM) → onEdgeClick(rmId)
+// Interactions (gated by `locked`) — all keyed by stable client uid, not DB id:
+//   • Drag a stage node → onStagePositionChange(seqUid, x, y)
+//   • Drag an RM node   → onRmPositionChange(rmUid, x, y)
+//   • Connect stage→stage → onConnectStages(sourceSeqUid, targetSeqUid)
+//   • Click stage node → onStageClick(seqUid)
+//   • Click edge (PRODUCT/ITEM/GROUP RM) → onEdgeClick(rmUid)
 
 import { useCallback, useMemo, useRef } from "react"
+import { useTheme } from "next-themes"
 import {
   Background,
   Controls,
@@ -49,21 +51,23 @@ interface Props {
   graph: RouteGraph
   locked?: boolean
   onAddStage?: () => void
-  /** User finished dragging a stage node to (x,y). */
-  onNodePositionChange?: (seqId: number, x: number, y: number) => void
+  /** User finished dragging a stage node to (x,y). Keyed on the client uid. */
+  onStagePositionChange?: (seqUid: string, x: number, y: number) => void
+  /** User finished dragging an ITEM/GROUP RM node to (x,y). Keyed on the client uid. */
+  onRmPositionChange?: (rmUid: string, x: number, y: number) => void
   /** User drew an edge between two stage nodes (source = upstream, target = downstream). */
-  onConnectStages?: (sourceSeqId: number, targetSeqId: number) => void
+  onConnectStages?: (sourceSeqUid: string, targetSeqUid: string) => void
   /** User clicked a stage node. */
-  onStageClick?: (seqId: number) => void
+  onStageClick?: (seqUid: string) => void
   /** User clicked an edge that maps to a CostRouteRm (PRODUCT / ITEM / GROUP). */
-  onEdgeClick?: (rmId: number) => void
+  onEdgeClick?: (rmUid: string) => void
   /**
    * User started dragging from a node handle and dropped on the empty React
-   * Flow pane (not on another node). Source seq + which handle was used.
+   * Flow pane (not on another node). Source seq uid + which handle was used.
    * `handleType === "source"` = bottom handle (downstream side).
    * `handleType === "target"` = top handle (upstream side).
    */
-  onDropOnPane?: (sourceSeqId: number, handleType: "source" | "target") => void
+  onDropOnPane?: (sourceSeqUid: string, handleType: "source" | "target") => void
 }
 
 // ============================================================================
@@ -71,6 +75,7 @@ interface Props {
 // ============================================================================
 
 type StageNodeData = {
+  uid: string
   level: number
   seq: number
   productCode?: string
@@ -80,6 +85,7 @@ type StageNodeData = {
 }
 
 type RmNodeData = {
+  uid: string
   label: string
   kind: "ITEM" | "GROUP"
   [key: string]: unknown
@@ -88,8 +94,10 @@ type RmNodeData = {
 const StageNode = ({ data }: NodeProps<Node<StageNodeData>>) => {
   return (
     <div
-      className={`rounded-md border bg-card px-3 py-2 shadow-sm ${
-        data.isFG ? "border-emerald-400 bg-emerald-50" : "border-blue-300"
+      className={`rounded-md border px-3 py-2 shadow-sm text-card-foreground ${
+        data.isFG
+          ? "border-emerald-500 bg-emerald-50 dark:bg-emerald-950/40 dark:border-emerald-700"
+          : "border-blue-400 bg-card dark:border-blue-700"
       }`}
       style={{ minWidth: 180 }}
     >
@@ -98,7 +106,7 @@ const StageNode = ({ data }: NodeProps<Node<StageNodeData>>) => {
         L{data.level} · seq {data.seq}
         {data.isFG ? " · FG" : ""}
       </div>
-      <div className="text-sm font-medium">
+      <div className="text-sm font-medium text-foreground">
         {data.productCode || "(no code)"}
       </div>
       {data.productName ? (
@@ -112,16 +120,18 @@ const StageNode = ({ data }: NodeProps<Node<StageNodeData>>) => {
 const RmNode = ({ data }: NodeProps<Node<RmNodeData>>) => {
   return (
     <div
-      className={`rounded-md border bg-background px-2 py-1 text-xs shadow-sm ${
-        data.kind === "GROUP" ? "border-purple-300 bg-purple-50" : "border-amber-300 bg-amber-50"
+      className={`rounded-md border px-2 py-1 text-xs shadow-sm text-foreground ${
+        data.kind === "GROUP"
+          ? "border-purple-400 bg-purple-50 dark:bg-purple-950/40 dark:border-purple-700"
+          : "border-amber-400 bg-amber-50 dark:bg-amber-950/40 dark:border-amber-700"
       }`}
       style={{ minWidth: 130, maxWidth: 200 }}
     >
       <div className="flex items-center gap-1">
-        <Badge variant="outline" className="px-1 py-0 text-[9px]">
+        <Badge variant="outline" className="px-1 py-0 text-[9px] text-foreground border-current/40">
           {data.kind}
         </Badge>
-        <span className="truncate font-mono">{data.label}</span>
+        <span className="truncate font-mono text-foreground">{data.label}</span>
       </div>
       <Handle type="source" position={Position.Right} />
     </div>
@@ -142,19 +152,19 @@ const RM_W = 180
 const RM_GAP_X = 30
 const RM_GAP_Y = 50
 
-// Node ID conventions — must be reversible so we can pluck seqId back out in
-// callbacks. Stage nodes use the actual seqId (only when persisted, > 0). For
-// new unsaved stages (seqId === 0) we synthesise a stable id from level+seq.
+// Node ID conventions — keyed on the stable client uid (not the DB id, which
+// is 0 until save). This makes new/unsaved elements clickable + editable, and
+// keeps node/edge ids collision-free so deleting one RM removes exactly one.
 function stageNodeId(seq: CostRouteSeq): string {
-  return seq.seqId > 0 ? `seq-${seq.seqId}` : `seq-new-${seq.routeLevel}-${seq.routeSeq}`
+  return `seq-${seq.uid}`
 }
 
-function rmNodeId(seq: CostRouteSeq, rm: CostRouteRm, rmIdx: number): string {
-  return rm.rmId > 0 ? `rm-${rm.rmId}` : `rm-new-${stageNodeId(seq)}-${rmIdx}`
+function rmNodeId(rm: CostRouteRm): string {
+  return `rm-${rm.uid}`
 }
 
-// Edge data carries the rmId so onEdgeClick can dispatch back.
-type EdgeData = { rmId: number; rmType: "PRODUCT" | "ITEM" | "GROUP" }
+// Edge data carries the rm uid so onEdgeClick can dispatch back.
+type EdgeData = { rmUid: string; rmType: "PRODUCT" | "ITEM" | "GROUP" }
 
 function buildFlow(graph: RouteGraph): { nodes: Node[]; edges: Edge[] } {
   const nodes: Node[] = []
@@ -197,6 +207,7 @@ function buildFlow(graph: RouteGraph): { nodes: Node[]; edges: Edge[] } {
         type: "stage",
         position: { x, y },
         data: {
+          uid: s.uid,
           level: s.routeLevel,
           seq: s.routeSeq,
           productCode: s.productCode,
@@ -209,57 +220,48 @@ function buildFlow(graph: RouteGraph): { nodes: Node[]; edges: Edge[] } {
       // stacked vertically. PRODUCT rms become edges (handled below).
       const localRms = (s.rms ?? []).filter((r) => r.rmType !== "PRODUCT")
       localRms.forEach((rm, rmIdx) => {
-        const rmId = rmNodeId(s, rm, rmIdx)
+        const rmId = rmNodeId(rm)
+        // Use the RM's persisted free position when set (>0), else auto-layout
+        // beside the stage as the default starting point.
+        const hasRmPos = (rm.positionX ?? 0) !== 0 || (rm.positionY ?? 0) !== 0
         nodes.push({
           id: rmId,
           type: "rm",
-          position: {
-            x: x - (RM_W + RM_GAP_X),
-            y: y + rmIdx * RM_GAP_Y,
-          },
+          position: hasRmPos
+            ? { x: rm.positionX ?? 0, y: rm.positionY ?? 0 }
+            : { x: x - (RM_W + RM_GAP_X), y: y + rmIdx * RM_GAP_Y },
           data: {
+            uid: rm.uid,
             label: rmLabel(rm),
             kind: rm.rmType === "GROUP" ? "GROUP" : "ITEM",
           } satisfies RmNodeData,
         })
-        // Edge id must be unique even when multiple new (rmId === 0) RMs of the
-        // same type exist on the same stage — fall back to rmIdx + ref code.
-        const edgeId =
-          rm.rmId > 0
-            ? `e-${rm.rmType.toLowerCase()}-rm-${rm.rmId}`
-            : `e-${rm.rmType.toLowerCase()}-rm-new-${id}-${rm.rmItemCode || rm.rmGroupCode || "x"}-${rmIdx}`
         edges.push({
-          id: edgeId,
+          id: `e-${rm.rmType.toLowerCase()}-${rm.uid}`,
           source: rmId,
           target: id,
           label: `×${rm.routeRmRatio}`,
           labelStyle: { fontSize: 10 },
           animated: false,
-          data: { rmId: rm.rmId, rmType: rm.rmType } satisfies EdgeData,
+          data: { rmUid: rm.uid, rmType: rm.rmType } satisfies EdgeData,
         })
       })
 
       // PRODUCT rms become edges from the upstream stage that produces them
       // down to this stage.
       const productRms = (s.rms ?? []).filter((r) => r.rmType === "PRODUCT")
-      productRms.forEach((rm, rmIdx) => {
+      productRms.forEach((rm) => {
         const upstreamId = rm.rmProductSysId ? stageIdByProduct.get(rm.rmProductSysId) : undefined
         if (!upstreamId) return // dangling — validator should have caught
-        // Edge id must be unique even when multiple new (rmId === 0) PRODUCT-RMs
-        // exist on the same stage — fall back to upstreamProductSysId + rmIdx.
-        const edgeId =
-          rm.rmId > 0
-            ? `e-product-rm-${rm.rmId}`
-            : `e-product-rm-new-${id}-${rm.rmProductSysId}-${rmIdx}`
         edges.push({
-          id: edgeId,
+          id: `e-product-${rm.uid}`,
           source: upstreamId,
           target: id,
           label: `×${rm.routeRmRatio}`,
           labelStyle: { fontSize: 10, fontWeight: 600 },
           animated: true,
           style: { stroke: "#10b981", strokeWidth: 1.5 },
-          data: { rmId: rm.rmId, rmType: "PRODUCT" } satisfies EdgeData,
+          data: { rmUid: rm.uid, rmType: "PRODUCT" } satisfies EdgeData,
         })
       })
     })
@@ -269,18 +271,26 @@ function buildFlow(graph: RouteGraph): { nodes: Node[]; edges: Edge[] } {
 }
 
 function rmLabel(rm: CostRouteRm): string {
-  if (rm.rmType === "GROUP") return rm.rmGroupCode || rm.routeRmName || "(group)"
+  if (rm.rmType === "GROUP") {
+    // Prefer the human-readable group name; render "name (code)" when both
+    // exist so users see the group name, not just the numeric group code.
+    const name = rm.rmGroupName || rm.routeRmName
+    const code = rm.rmGroupCode
+    if (name && code && name !== code) return `${name} (${code})`
+    return name || code || "(group)"
+  }
   if (rm.rmType === "ITEM") return rm.rmItemCode || rm.routeRmName || "(item)"
   return rm.routeRmName || ""
 }
 
-// Pluck the seqId back out of a stage node id. Returns 0 for new/unsaved
-// stages — caller must handle the "not yet persisted, ignore" case.
-function parseSeqIdFromNodeId(nodeId: string): number {
-  // Persisted form: "seq-<id>". New form: "seq-new-<level>-<seq>".
-  if (nodeId.startsWith("seq-new-")) return 0
-  if (nodeId.startsWith("seq-")) return Number(nodeId.slice(4)) || 0
-  return 0
+// Pluck the seq uid back out of a stage node id. Returns "" for non-stage ids.
+function parseSeqUidFromNodeId(nodeId: string): string {
+  return nodeId.startsWith("seq-") ? nodeId.slice(4) : ""
+}
+
+// Pluck the rm uid back out of an rm node id. Returns "" for non-rm ids.
+function parseRmUidFromNodeId(nodeId: string): string {
+  return nodeId.startsWith("rm-") ? nodeId.slice(3) : ""
 }
 
 // ============================================================================
@@ -291,34 +301,41 @@ export function RouteGraphFlow({
   graph,
   locked = false,
   onAddStage,
-  onNodePositionChange,
+  onStagePositionChange,
+  onRmPositionChange,
   onConnectStages,
   onStageClick,
   onEdgeClick,
   onDropOnPane,
 }: Props) {
   const { nodes, edges } = useMemo(() => buildFlow(graph), [graph])
+  const { resolvedTheme } = useTheme()
+  const colorMode = resolvedTheme === "dark" ? "dark" : "light"
 
   // Pending connect state — captured on onConnectStart, consumed on
   // onConnectEnd if the drop landed on the empty pane (not on another node).
   const pendingConnectRef = useRef<
-    null | { sourceSeqId: number; handleType: "source" | "target" }
+    null | { sourceSeqUid: string; handleType: "source" | "target" }
   >(null)
 
   const handleNodeDragStop = useCallback<NodeMouseHandler>(
     (_event, node) => {
-      if (locked || !onNodePositionChange) return
-      if (node.type !== "stage") return
-      const seqId = parseSeqIdFromNodeId(node.id)
-      if (seqId === 0) {
-        // New unsaved stage — find by synthetic id and look up actual seq.
-        // We can't safely persist position without seqId; let parent decide
-        // via the synthetic key (level/seq embedded in id).
+      if (locked) return
+      if (node.type === "stage") {
+        if (!onStagePositionChange) return
+        const seqUid = parseSeqUidFromNodeId(node.id)
+        if (!seqUid) return
+        onStagePositionChange(seqUid, node.position.x, node.position.y)
         return
       }
-      onNodePositionChange(seqId, node.position.x, node.position.y)
+      if (node.type === "rm") {
+        if (!onRmPositionChange) return
+        const rmUid = parseRmUidFromNodeId(node.id)
+        if (!rmUid) return
+        onRmPositionChange(rmUid, node.position.x, node.position.y)
+      }
     },
-    [locked, onNodePositionChange],
+    [locked, onStagePositionChange, onRmPositionChange],
   )
 
   const handleConnect = useCallback(
@@ -327,10 +344,10 @@ export function RouteGraphFlow({
       if (!conn.source || !conn.target) return
       // Only stage↔stage links are meaningful. Reject if either end is an rm-* node.
       if (!conn.source.startsWith("seq-") || !conn.target.startsWith("seq-")) return
-      const srcSeqId = parseSeqIdFromNodeId(conn.source)
-      const tgtSeqId = parseSeqIdFromNodeId(conn.target)
-      if (srcSeqId === 0 || tgtSeqId === 0) return // need persisted stages
-      onConnectStages(srcSeqId, tgtSeqId)
+      const srcSeqUid = parseSeqUidFromNodeId(conn.source)
+      const tgtSeqUid = parseSeqUidFromNodeId(conn.target)
+      if (!srcSeqUid || !tgtSeqUid) return
+      onConnectStages(srcSeqUid, tgtSeqUid)
     },
     [locked, onConnectStages],
   )
@@ -339,9 +356,9 @@ export function RouteGraphFlow({
     (_event, node) => {
       if (!onStageClick) return
       if (node.type !== "stage") return
-      const seqId = parseSeqIdFromNodeId(node.id)
-      if (seqId === 0) return
-      onStageClick(seqId)
+      const seqUid = parseSeqUidFromNodeId(node.id)
+      if (!seqUid) return
+      onStageClick(seqUid)
     },
     [onStageClick],
   )
@@ -350,10 +367,10 @@ export function RouteGraphFlow({
     (_event, params) => {
       if (locked || !onDropOnPane) return
       if (!params.nodeId || !params.nodeId.startsWith("seq-")) return
-      const seqId = parseSeqIdFromNodeId(params.nodeId)
-      if (seqId === 0) return
+      const seqUid = parseSeqUidFromNodeId(params.nodeId)
+      if (!seqUid) return
       pendingConnectRef.current = {
-        sourceSeqId: seqId,
+        sourceSeqUid: seqUid,
         handleType: params.handleType ?? "source",
       }
     },
@@ -369,7 +386,7 @@ export function RouteGraphFlow({
       // React Flow tags the empty canvas element with .react-flow__pane.
       const droppedOnPane = !!target?.classList?.contains("react-flow__pane")
       if (!droppedOnPane) return
-      onDropOnPane(pending.sourceSeqId, pending.handleType)
+      onDropOnPane(pending.sourceSeqUid, pending.handleType)
     },
     [locked, onDropOnPane, pendingConnectRef],
   )
@@ -378,8 +395,8 @@ export function RouteGraphFlow({
     (_event, edge) => {
       if (!onEdgeClick) return
       const data = edge.data as EdgeData | undefined
-      if (!data || !data.rmId) return
-      onEdgeClick(data.rmId)
+      if (!data || !data.rmUid) return
+      onEdgeClick(data.rmUid)
     },
     [onEdgeClick],
   )
@@ -390,6 +407,7 @@ export function RouteGraphFlow({
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
+        colorMode={colorMode}
         fitView
         proOptions={{ hideAttribution: true }}
         nodesDraggable={!locked}
diff --git a/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
new file mode 100644
index 0000000..6d684d9
--- /dev/null
+++ b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
@@ -0,0 +1,302 @@
+"use client"
+
+import { useMemo } from "react"
+import { ArrowLeft, CheckCircle2, Loader2 } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { EmptyState } from "@/components/common/empty-state"
+import {
+  useFillTasks,
+  useApproveFillTask,
+  useApprovalVisibleParams,
+} from "@/hooks/finance/use-fill-assignment"
+import { useProductRequiredParams } from "@/hooks/finance/use-cost-product-parameter"
+import { useRouteGraph } from "@/hooks/finance/use-cost-route"
+import { getProductsAtLevel } from "@/types/finance/cost-route"
+import type { RequiredParamEntry } from "@/types/finance/cost-product-parameter"
+import type { Parameter } from "@/types/finance/parameter"
+
+import { FillTaskStatusBadge } from "./FillTaskStatusBadge"
+
+interface Props {
+  requestId: number
+  taskId: number | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+function formatParamValue(param: RequiredParamEntry): string {
+  if (!param.hasValue) return "—"
+  if (param.dataType === "BOOLEAN") return param.valueFlag ? "Yes" : "No"
+  if (param.dataType === "NUMBER") return param.valueNumeric || "—"
+  return param.valueText || "—"
+}
+
+/**
+ * One product's read-only summary — intersects the approval-visible param
+ * list (is_approval_visible = true, ordered by approval_display_order) with
+ * the params actually applicable to THIS product (cost_product_applicable_param,
+ * same source `useProductRequiredParams` the fill-entry drawer already reads —
+ * shares its React Query cache entry, so no duplicate network call when this
+ * drawer is opened for a product already visited during filling).
+ */
+function ApprovalReviewProductSection({
+  productSysId,
+  productCode,
+  productName,
+  visibleParams,
+}: {
+  productSysId: number
+  productCode?: string
+  productName?: string
+  visibleParams: Parameter[]
+}) {
+  const { data: applicable = [], isLoading } = useProductRequiredParams(productSysId)
+
+  // Build rows: intersect visibleParams with applicable, then group+sort by displayGroup/displayOrder
+  const groupedRows = useMemo(() => {
+    const byParamId = new Map(applicable.map((p) => [p.paramId, p]))
+    const matched = visibleParams
+      .map((vp) => byParamId.get(vp.paramId))
+      .filter((p): p is RequiredParamEntry => Boolean(p))
+
+    const groupMinOrder: Record<string, number> = {}
+    const grouped: Record<string, RequiredParamEntry[]> = {}
+    for (const p of matched) {
+      const g = p.displayGroup
+      if (!grouped[g]) {
+        grouped[g] = []
+        groupMinOrder[g] = p.displayOrder
+      } else {
+        groupMinOrder[g] = Math.min(groupMinOrder[g], p.displayOrder)
+      }
+      grouped[g].push(p)
+    }
+    return Object.keys(grouped)
+      .sort((a, b) => {
+        if (!a && !b) return 0
+        if (!a) return 1
+        if (!b) return -1
+        return (groupMinOrder[a] ?? 9999) - (groupMinOrder[b] ?? 9999)
+      })
+      .map((g) => ({ group: g, entries: grouped[g] }))
+  }, [applicable, visibleParams])
+
+  const totalRows = groupedRows.reduce((sum, { entries }) => sum + entries.length, 0)
+  const title = productCode ?? productName ?? `Product ${productSysId}`
+
+  if (isLoading) {
+    return <div className="h-16 animate-pulse rounded-md bg-muted" />
+  }
+
+  return (
+    <div className="rounded-md border">
+      <div className="flex items-center justify-between gap-2 border-b bg-muted/30 px-4 py-2.5">
+        <span className="text-sm font-semibold">{title}</span>
+        {productName && productCode && (
+          <span className="text-xs text-muted-foreground truncate">{productName}</span>
+        )}
+      </div>
+      <div className="divide-y">
+        {totalRows === 0 ? (
+          <p className="px-4 py-3 text-sm text-muted-foreground">
+            No summary parameters apply to this product.
+          </p>
+        ) : (
+          groupedRows.map(({ group, entries }) => (
+            <div key={group || "__ungrouped"}>
+              {group && (
+                <div className="px-4 py-2 border-b bg-muted/20">
+                  <p className="text-xs uppercase tracking-wide text-muted-foreground">{group}</p>
+                </div>
+              )}
+              {entries.map((p) => (
+                <div key={p.paramId} className="flex items-center justify-between gap-3 px-4 py-2.5">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="text-sm font-medium truncate">{p.paramName || p.paramCode}</span>
+                    {p.uomCode && (
+                      <Badge variant="outline" className="text-[10px] px-1.5 shrink-0 font-normal">
+                        {p.uomCode}
+                      </Badge>
+                    )}
+                  </div>
+                  <span className="text-sm text-muted-foreground shrink-0">{formatParamValue(p)}</span>
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+function DrawerContent({
+  requestId,
+  taskId,
+  onClose,
+}: {
+  requestId: number
+  taskId: number
+  onClose: () => void
+}) {
+  const { data: tasks = [], isLoading: tasksLoading } = useFillTasks(requestId)
+  const task = useMemo(() => tasks.find((t) => t.taskId === taskId), [tasks, taskId])
+  const { data: graph, isLoading: graphLoading } = useRouteGraph(task?.routeHeadId)
+  const { data: visibleParams, isLoading: paramsLoading } = useApprovalVisibleParams()
+
+  const productsAtLevel = useMemo(
+    () => getProductsAtLevel(graph, task?.routeLevel),
+    [graph, task],
+  )
+
+  const approveM = useApproveFillTask(requestId)
+
+  const isLoading = tasksLoading || graphLoading || paramsLoading
+  const isApprovalPending = task?.status === "FILL_TASK_STATUS_APPROVAL_PENDING"
+
+  function onApprove() {
+    if (!task) return
+    approveM.mutate({ taskId: task.taskId }, { onSuccess: onClose })
+  }
+
+  return (
+    <>
+      {/* ── Sticky header ── */}
+      <div className="flex shrink-0 items-start gap-3 border-b bg-background px-6 py-4">
+        <div className="flex-1 min-w-0 space-y-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge variant="secondary" className="font-mono text-xs font-normal">
+              REQ-{requestId}
+            </Badge>
+            {task && <FillTaskStatusBadge status={task.status} />}
+          </div>
+          <SheetTitle className="text-base font-semibold leading-tight">
+            Review Before Approving{task ? ` — Level ${task.routeLevel}` : ""}
+          </SheetTitle>
+          <SheetDescription className="text-xs text-muted-foreground">
+            {task
+              ? `Fill task #${task.taskId} · ${productsAtLevel.length} product(s) at this level`
+              : "Loading task…"}
+          </SheetDescription>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button variant="ghost" size="sm" className="gap-1.5 text-xs" onClick={onClose}>
+            <ArrowLeft className="h-3.5 w-3.5" />
+            Back to request
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Scrollable content ── */}
+      <div className="flex-1 overflow-y-auto px-6 py-5 space-y-4">
+        {isLoading && (
+          <div className="space-y-4">
+            <div className="h-12 animate-pulse rounded-lg bg-muted" />
+            <div className="h-48 animate-pulse rounded-lg bg-muted" />
+          </div>
+        )}
+
+        {!isLoading && !task && (
+          <EmptyState
+            title="Fill task not found"
+            description={`No fill task #${taskId} for request ${requestId}.`}
+            action={<Button onClick={onClose}>Back to request</Button>}
+          />
+        )}
+
+        {!isLoading && task && !isApprovalPending && (
+          <div className="rounded-md border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-300">
+            This task is in <strong>{task.status.replace("FILL_TASK_STATUS_", "")}</strong> state
+            and is no longer pending approval.
+          </div>
+        )}
+
+        {!isLoading && task && isApprovalPending && visibleParams.length === 0 && (
+          <div className="rounded-md border border-dashed px-4 py-3 text-sm text-muted-foreground">
+            No summary parameters configured — showing full approval is still enabled.
+          </div>
+        )}
+
+        {!isLoading && task && isApprovalPending && productsAtLevel.length === 0 && (
+          <EmptyState
+            title="No products at this level"
+            description={`Route level ${task.routeLevel} has no products in the routing graph.`}
+          />
+        )}
+
+        {!isLoading &&
+          task &&
+          isApprovalPending &&
+          visibleParams.length > 0 &&
+          productsAtLevel.map((seq) => (
+            <ApprovalReviewProductSection
+              key={seq.productSysId}
+              productSysId={seq.productSysId}
+              productCode={seq.productCode}
+              productName={seq.productName}
+              visibleParams={visibleParams}
+            />
+          ))}
+      </div>
+
+      {/* ── Sticky footer ── */}
+      {!isLoading && task && isApprovalPending && (
+        <div className="flex shrink-0 items-center justify-between gap-4 border-t bg-background px-6 py-4">
+          <p className="text-sm text-muted-foreground">
+            Review the values above, then approve to move this level forward.
+          </p>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={onClose} disabled={approveM.isPending}>
+              Cancel
+            </Button>
+            <Button onClick={onApprove} disabled={approveM.isPending}>
+              {approveM.isPending ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <CheckCircle2 className="mr-2 h-4 w-4" />
+              )}
+              Approve
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+/**
+ * Review-before-approve drawer for a fill task (item #4). Opened in place of
+ * the old one-click `ApproveFillTask` call — shows a read-only, per-product
+ * summary of the params flagged `is_approval_visible` in Parameter Master,
+ * intersected with what's actually applicable to each product at this route
+ * level. The footer's Approve button calls the SAME unchanged
+ * `useApproveFillTask` mutation as before; this component adds a review step,
+ * it does not change the approve RPC contract.
+ */
+export function FillApprovalReviewDrawer({ requestId, taskId, open, onOpenChange }: Props) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="flex flex-col p-0 w-full sm:max-w-2xl gap-0"
+      >
+        {open && taskId !== null && (
+          <DrawerContent
+            requestId={requestId}
+            taskId={taskId}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/src/components/finance/fill-assignment/FillParamDrawer.tsx b/src/components/finance/fill-assignment/FillParamDrawer.tsx
index cf69141..5a3ea6b 100644
--- a/src/components/finance/fill-assignment/FillParamDrawer.tsx
+++ b/src/components/finance/fill-assignment/FillParamDrawer.tsx
@@ -1,13 +1,12 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import { ArrowLeft, CheckCircle, Loader2, X } from "lucide-react"
+import { ArrowLeft, CheckCircle, Loader2 } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
   SheetTitle,
@@ -15,6 +14,7 @@ import {
 import { EmptyState } from "@/components/common/empty-state"
 import { useFillTasks, useSubmitFillTask } from "@/hooks/finance/use-fill-assignment"
 import { useRouteGraph } from "@/hooks/finance/use-cost-route"
+import { getProductsAtLevel } from "@/types/finance/cost-route"
 
 import { FillParamProductSection } from "./FillParamProductSection"
 import { FillTaskStatusBadge } from "./FillTaskStatusBadge"
@@ -31,10 +31,10 @@ function DrawerContent({ requestId, taskId, onClose }: { requestId: number; task
   const task = useMemo(() => tasks.find((t) => t.taskId === taskId), [tasks, taskId])
   const { data: graph, isLoading: graphLoading } = useRouteGraph(task?.routeHeadId)
 
-  const productsAtLevel = useMemo(() => {
-    if (!graph || !task) return []
-    return graph.seqs.filter((s) => s.routeLevel === task.routeLevel)
-  }, [graph, task])
+  const productsAtLevel = useMemo(
+    () => getProductsAtLevel(graph, task?.routeLevel),
+    [graph, task],
+  )
 
   const submitM = useSubmitFillTask(requestId)
   const [savedProducts, setSavedProducts] = useState<Set<number>>(new Set())
@@ -81,12 +81,6 @@ function DrawerContent({ requestId, taskId, onClose }: { requestId: number; task
             <ArrowLeft className="h-3.5 w-3.5" />
             Back to request
           </Button>
-          <SheetClose asChild>
-            <Button variant="ghost" size="icon" className="h-8 w-8">
-              <X className="h-4 w-4" />
-              <span className="sr-only">Close</span>
-            </Button>
-          </SheetClose>
         </div>
       </div>
 
diff --git a/src/components/finance/fill-assignment/FillParamEntryPage.tsx b/src/components/finance/fill-assignment/FillParamEntryPage.tsx
index d175ebf..10cf608 100644
--- a/src/components/finance/fill-assignment/FillParamEntryPage.tsx
+++ b/src/components/finance/fill-assignment/FillParamEntryPage.tsx
@@ -9,6 +9,7 @@ import { EmptyState } from "@/components/common/empty-state"
 import { PageHeader } from "@/components/common/page-header"
 import { useFillTasks, useSubmitFillTask } from "@/hooks/finance/use-fill-assignment"
 import { useRouteGraph } from "@/hooks/finance/use-cost-route"
+import { getProductsAtLevel } from "@/types/finance/cost-route"
 
 import { FillParamProductSection } from "./FillParamProductSection"
 import { FillTaskStatusBadge } from "./FillTaskStatusBadge"
@@ -27,10 +28,10 @@ export function FillParamEntryPage({ requestId, taskId, onDone }: Props) {
   const { data: graph, isLoading: graphLoading } = useRouteGraph(task?.routeHeadId)
   const isLocked = graph?.head?.routingStatus === "LOCKED"
 
-  const productsAtLevel = useMemo(() => {
-    if (!graph || !task) return []
-    return graph.seqs.filter((s) => s.routeLevel === task.routeLevel)
-  }, [graph, task])
+  const productsAtLevel = useMemo(
+    () => getProductsAtLevel(graph, task?.routeLevel),
+    [graph, task],
+  )
 
   const submitM = useSubmitFillTask(requestId)
   const [savedProducts, setSavedProducts] = useState<Set<number>>(new Set())
diff --git a/src/components/finance/fill-assignment/FillParamProductSection.tsx b/src/components/finance/fill-assignment/FillParamProductSection.tsx
index 46ffc39..5545a58 100644
--- a/src/components/finance/fill-assignment/FillParamProductSection.tsx
+++ b/src/components/finance/fill-assignment/FillParamProductSection.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
 import { Check, Loader2 } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
@@ -33,6 +33,30 @@ export function FillParamProductSection({ productSysId, productCode, productName
   const { data: params = [], isLoading } = useProductRequiredParams(productSysId)
   const upsertM = useUpsertProductParamValuesBatch()
 
+  // Group+sort params by displayGroup/displayOrder (same pattern as cost-breakdown-modal)
+  const groupedParams = useMemo(() => {
+    const groupMinOrder: Record<string, number> = {}
+    const grouped: Record<string, typeof params> = {}
+    for (const p of params) {
+      const g = p.displayGroup
+      if (!grouped[g]) {
+        grouped[g] = []
+        groupMinOrder[g] = p.displayOrder
+      } else {
+        groupMinOrder[g] = Math.min(groupMinOrder[g], p.displayOrder)
+      }
+      grouped[g].push(p)
+    }
+    return Object.keys(grouped)
+      .sort((a, b) => {
+        if (!a && !b) return 0
+        if (!a) return 1
+        if (!b) return -1
+        return (groupMinOrder[a] ?? 9999) - (groupMinOrder[b] ?? 9999)
+      })
+      .map((g) => ({ group: g, entries: grouped[g] }))
+  }, [params])
+
   // Track user edits as a delta map — no useEffect initialization needed.
   // getEffectiveValue falls back to the server value when the user hasn't changed it.
   const [userEdits, setUserEdits] = useState<Map<string, LocalValue>>(new Map())
@@ -104,13 +128,20 @@ export function FillParamProductSection({ productSysId, productCode, productName
         {params.length === 0 ? (
           <p className="text-sm text-muted-foreground">No parameters defined for this product.</p>
         ) : (
-          params.map((param) => (
-            <ParamInput
-              key={param.paramId}
-              param={param}
-              value={getEffectiveValue(param)}
-              onChange={(v) => handleChange(param.paramId, v)}
-            />
+          groupedParams.map(({ group, entries }) => (
+            <div key={group || "__ungrouped"} className="space-y-4">
+              {group && (
+                <p className="text-xs uppercase tracking-wide text-muted-foreground">{group}</p>
+              )}
+              {entries.map((param) => (
+                <ParamInput
+                  key={param.paramId}
+                  param={param}
+                  value={getEffectiveValue(param)}
+                  onChange={(v) => handleChange(param.paramId, v)}
+                />
+              ))}
+            </div>
           ))
         )}
         {params.length > 0 && (
diff --git a/src/components/finance/fill-assignment/FillTaskIdentity.tsx b/src/components/finance/fill-assignment/FillTaskIdentity.tsx
new file mode 100644
index 0000000..74f5075
--- /dev/null
+++ b/src/components/finance/fill-assignment/FillTaskIdentity.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { UserName } from "@/components/common/user-name";
+import { DeptName } from "@/components/common/dept-name";
+import { type FillTask, findApproval } from "@/types/finance/fill-assignment";
+
+interface Props {
+  task: FillTask;
+  className?: string;
+}
+
+function renderActor(actorType: string, actorValue: string) {
+  if (actorType === "FILL_ACTOR_TYPE_USER") return <UserName userId={actorValue} />;
+  if (actorType === "FILL_ACTOR_TYPE_DEPT") return <DeptName deptCode={actorValue} />;
+  return <>{actorValue || "—"}</>;
+}
+
+/**
+ * Renders "who's responsible" for a fill task — shared by FillTaskRow and
+ * FillTrackingCompact so the identity logic lives in exactly one place.
+ *
+ * - ACTIVE / FILLING: the assigned filler ("Assigned to: X"), shown even
+ *   before anyone has claimed the task.
+ * - APPROVAL_PENDING: the assigned approver ("Assigned to: X") — this is
+ *   who's actually blocking progress once filling is done.
+ * - APPROVED: the historical "Approved by X" line, from the most recent
+ *   APPROVED entry in the task's already-fetched approval history.
+ * - Any other status (INACTIVE / FILLED / REJECTED): falls back to the
+ *   filler, matching prior behavior.
+ */
+export function FillTaskIdentity({ task, className }: Props) {
+  if (task.status === "FILL_TASK_STATUS_APPROVED") {
+    const approval = findApproval(task, "APPROVED");
+    if (approval?.decidedBy) {
+      return (
+        <span className={className}>
+          <span className="opacity-60">Approved by </span>
+          <UserName userId={approval.decidedBy} />
+        </span>
+      );
+    }
+  }
+
+  if (task.status === "FILL_TASK_STATUS_APPROVAL_PENDING") {
+    return (
+      <span className={className}>
+        <span className="opacity-60">Assigned to </span>
+        {renderActor(task.approverType, task.approverValue)}
+      </span>
+    );
+  }
+
+  if (
+    task.status === "FILL_TASK_STATUS_ACTIVE" ||
+    task.status === "FILL_TASK_STATUS_FILLING"
+  ) {
+    return (
+      <span className={className}>
+        <span className="opacity-60">Assigned to </span>
+        {renderActor(task.fillerType, task.fillerValue)}
+      </span>
+    );
+  }
+
+  return <span className={className}>{renderActor(task.fillerType, task.fillerValue)}</span>;
+}
diff --git a/src/components/finance/fill-assignment/FillTaskRow.tsx b/src/components/finance/fill-assignment/FillTaskRow.tsx
index 823a403..bd083f2 100644
--- a/src/components/finance/fill-assignment/FillTaskRow.tsx
+++ b/src/components/finance/fill-assignment/FillTaskRow.tsx
@@ -1,13 +1,17 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 
 import { type FillTask } from "@/types/finance/fill-assignment";
+import { useRouteGraph } from "@/hooks/finance/use-cost-route";
+import { getProductsAtLevel } from "@/types/finance/cost-route";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { FillTaskStatusBadge } from "./FillTaskStatusBadge";
 import { FillTaskProgressBar } from "./FillTaskProgressBar";
-import { UserName } from "@/components/common/user-name";
-import { DeptName } from "@/components/common/dept-name";
+import { FillTaskIdentity } from "./FillTaskIdentity";
+import { FillApprovalReviewDrawer } from "./FillApprovalReviewDrawer";
 
 interface FillTaskRowProps {
   task: FillTask;
@@ -20,7 +24,6 @@ interface FillTaskRowProps {
    */
   currentUserDepts?: string[];
   onClaim?: (taskId: number) => void;
-  onApprove?: (taskId: number) => void;
   onReject?: (taskId: number) => void;
 }
 
@@ -30,12 +33,15 @@ export function FillTaskRow({
   isSuperAdmin = false,
   currentUserDepts = [],
   onClaim,
-  onApprove,
   onReject,
 }: FillTaskRowProps) {
   const isActive = task.status === "FILL_TASK_STATUS_ACTIVE";
   const isFilling = task.status === "FILL_TASK_STATUS_FILLING";
   const isApprovalPending = task.status === "FILL_TASK_STATUS_APPROVAL_PENDING";
+  const [approvalDrawerOpen, setApprovalDrawerOpen] = useState(false);
+
+  const { data: graph } = useRouteGraph(task.routeHeadId || undefined);
+  const productsAtLevel = getProductsAtLevel(graph, task.routeLevel);
 
   const isUserFiller =
     task.fillerType === "FILL_ACTOR_TYPE_USER" &&
@@ -65,16 +71,29 @@ export function FillTaskRow({
 
   return (
     <tr className="border-b" data-testid={`fill-task-level-${task.routeLevel}`}>
-      <td className="py-3 px-4 text-sm font-medium">Level {task.routeLevel}</td>
+      <td className="py-3 px-4 text-sm font-medium">
+        <div className="space-y-1">
+          <div>Level {task.routeLevel}</div>
+          {productsAtLevel.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {productsAtLevel.map((s) => (
+                <Badge
+                  key={s.productSysId}
+                  variant="outline"
+                  className="font-mono text-[10px] font-normal"
+                >
+                  {s.productCode || `#${s.productSysId}`}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+      </td>
       <td className="py-3 px-4">
         <FillTaskStatusBadge status={task.status} />
       </td>
       <td className="py-3 px-4 text-sm text-muted-foreground">
-        {task.fillerType === "FILL_ACTOR_TYPE_USER"
-          ? <UserName userId={task.fillerValue} />
-          : task.fillerType === "FILL_ACTOR_TYPE_DEPT"
-            ? <DeptName deptCode={task.fillerValue} />
-            : task.fillerValue || "—"}
+        <FillTaskIdentity task={task} />
       </td>
       <td className="py-3 px-4 min-w-[160px]">
         <FillTaskProgressBar task={task} />
@@ -102,11 +121,9 @@ export function FillTaskRow({
           )}
           {canApproveReject && (
             <>
-              {onApprove && (
-                <Button size="sm" onClick={() => onApprove(task.taskId)}>
-                  Approve
-                </Button>
-              )}
+              <Button size="sm" onClick={() => setApprovalDrawerOpen(true)}>
+                Approve
+              </Button>
               {onReject && (
                 <Button
                   size="sm"
@@ -120,6 +137,14 @@ export function FillTaskRow({
           )}
         </div>
       </td>
+      {canApproveReject && (
+        <FillApprovalReviewDrawer
+          requestId={task.requestId}
+          taskId={task.taskId}
+          open={approvalDrawerOpen}
+          onOpenChange={setApprovalDrawerOpen}
+        />
+      )}
     </tr>
   );
 }
diff --git a/src/components/finance/fill-assignment/FillTrackingCompact.tsx b/src/components/finance/fill-assignment/FillTrackingCompact.tsx
index 65ece13..0c5338b 100644
--- a/src/components/finance/fill-assignment/FillTrackingCompact.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingCompact.tsx
@@ -6,17 +6,19 @@ import { AlertTriangle } from "lucide-react";
 import {
   useFillTasks,
   useClaimFillTask,
-  useApproveFillTask,
   useRejectFillTask,
 } from "@/hooks/finance/use-fill-assignment";
 import { useUser } from "@/providers/auth-provider";
-import { UserName } from "@/components/common/user-name";
-import { DeptName } from "@/components/common/dept-name";
+import { useRouteGraph } from "@/hooks/finance/use-cost-route";
+import { getProductsAtLevel } from "@/types/finance/cost-route";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { FillTaskStatusBadge } from "./FillTaskStatusBadge";
 import { FillTaskProgressBar } from "./FillTaskProgressBar";
+import { FillTaskIdentity } from "./FillTaskIdentity";
 import { FillParamDrawer } from "./FillParamDrawer";
+import { FillApprovalReviewDrawer } from "./FillApprovalReviewDrawer";
 
 interface Props {
   requestId: number;
@@ -25,6 +27,7 @@ interface Props {
 export function FillTrackingCompact({ requestId }: Props) {
   const user = useUser();
   const [drawerTaskId, setDrawerTaskId] = useState<number | null>(null);
+  const [approvalDrawerTaskId, setApprovalDrawerTaskId] = useState<number | null>(null);
   const currentUserId = user?.userId ?? "";
   const isSuperAdmin = user?.roles?.includes("SUPER_ADMIN") ?? false;
   const currentUserDepts: string[] = [user?.departmentCode, user?.sectionCode].filter(
@@ -33,9 +36,12 @@ export function FillTrackingCompact({ requestId }: Props) {
 
   const { data: tasks = [], isLoading } = useFillTasks(requestId);
   const claim = useClaimFillTask(requestId);
-  const approve = useApproveFillTask(requestId);
   const reject = useRejectFillTask(requestId);
 
+  // All fill tasks for a request share the same route head (generated in one
+  // batch), so a single graph fetch covers every task's "products at level".
+  const { data: graph } = useRouteGraph(tasks[0]?.routeHeadId || undefined);
+
   if (!isLoading && tasks.length === 0) return null;
 
   const myBlockerTask = tasks.find(
@@ -95,6 +101,7 @@ export function FillTrackingCompact({ requestId }: Props) {
                   isApprovalPending && (isSuperAdmin || isUserApprover || isDeptApprover);
 
                 const hasActions = canClaim || canSubmit || canApproveReject;
+                const productsAtLevel = getProductsAtLevel(graph, task.routeLevel);
 
                 return (
                   <li
@@ -108,15 +115,30 @@ export function FillTrackingCompact({ requestId }: Props) {
                       <FillTaskStatusBadge status={task.status} />
                     </div>
 
-                    {/* Filler */}
+                    {/* Products at this level */}
+                    {productsAtLevel.length > 0 && (
+                      <div className="flex flex-wrap gap-1">
+                        {productsAtLevel.map((s) => (
+                          <div key={s.productSysId} className="flex flex-col min-w-0">
+                            <Badge
+                              variant="outline"
+                              className="font-mono text-[10px] font-normal"
+                            >
+                              {s.productCode || `#${s.productSysId}`}
+                            </Badge>
+                            {s.productName && (
+                              <span className="text-[10px] text-muted-foreground truncate max-w-[140px] mt-0.5 px-0.5">
+                                {s.productName}
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Filler / approver identity */}
                     <div className="text-xs text-muted-foreground">
-                      {task.fillerType === "FILL_ACTOR_TYPE_USER" ? (
-                        <UserName userId={task.fillerValue} />
-                      ) : task.fillerType === "FILL_ACTOR_TYPE_DEPT" ? (
-                        <DeptName deptCode={task.fillerValue} />
-                      ) : (
-                        task.fillerValue || "—"
-                      )}
+                      <FillTaskIdentity task={task} />
                       <span className="ml-2 opacity-60">{task.slaFillHours}h SLA</span>
                     </div>
 
@@ -150,7 +172,7 @@ export function FillTrackingCompact({ requestId }: Props) {
                             <Button
                               size="sm"
                               className="h-7 text-xs"
-                              onClick={() => approve.mutate({ taskId: task.taskId })}
+                              onClick={() => setApprovalDrawerTaskId(task.taskId)}
                             >
                               Approve
                             </Button>
@@ -179,6 +201,12 @@ export function FillTrackingCompact({ requestId }: Props) {
         open={drawerTaskId !== null}
         onOpenChange={(o) => { if (!o) setDrawerTaskId(null) }}
       />
+      <FillApprovalReviewDrawer
+        requestId={requestId}
+        taskId={approvalDrawerTaskId}
+        open={approvalDrawerTaskId !== null}
+        onOpenChange={(o) => { if (!o) setApprovalDrawerTaskId(null) }}
+      />
     </Card>
   );
 }
diff --git a/src/components/finance/fill-assignment/FillTrackingDrawer.tsx b/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
index 88534c6..eb0688c 100644
--- a/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
@@ -1,12 +1,11 @@
 "use client"
 
-import { ListChecks, X } from "lucide-react"
+import { ArrowLeft, ListChecks } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
   SheetTitle,
@@ -14,6 +13,9 @@ import {
 import { DeptName } from "@/components/common/dept-name"
 import { UserName } from "@/components/common/user-name"
 import { useFillTasks } from "@/hooks/finance/use-fill-assignment"
+import { useRouteGraph } from "@/hooks/finance/use-cost-route"
+import { getProductsAtLevel } from "@/types/finance/cost-route"
+import { type FillTask } from "@/types/finance/fill-assignment"
 
 import { FillTaskProgressBar } from "./FillTaskProgressBar"
 import { FillTaskStatusBadge } from "./FillTaskStatusBadge"
@@ -25,6 +27,59 @@ interface Props {
   requestNo: string
 }
 
+function FillTrackingDrawerRow({ task }: { task: FillTask }) {
+  const { data: graph } = useRouteGraph(task.routeHeadId || undefined)
+  const productsAtLevel = getProductsAtLevel(graph, task.routeLevel)
+
+  return (
+    <li className="rounded-md border bg-muted/20 px-3 py-2.5 space-y-2">
+      {/* Level + status */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-semibold">Level {task.routeLevel}</span>
+        <FillTaskStatusBadge status={task.status} />
+      </div>
+
+      {/* Product codes at this level */}
+      {productsAtLevel.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {productsAtLevel.map((s) => (
+            <Badge
+              key={s.productSysId}
+              variant="outline"
+              className="font-mono text-[10px] font-normal"
+            >
+              {s.productCode || `#${s.productSysId}`}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {/* Filler + SLA */}
+      <div className="text-xs text-muted-foreground">
+        {task.fillerType === "FILL_ACTOR_TYPE_USER" ? (
+          <UserName userId={task.fillerValue} />
+        ) : task.fillerType === "FILL_ACTOR_TYPE_DEPT" ? (
+          <DeptName deptCode={task.fillerValue} />
+        ) : (
+          task.fillerValue || "—"
+        )}
+        <span className="ml-2 opacity-60">{task.slaFillHours}h SLA</span>
+      </div>
+
+      {/* Progress bar */}
+      <FillTaskProgressBar task={task} />
+
+      {/* Claimed by */}
+      {task.claimedBy && (
+        <div className="text-xs text-muted-foreground">
+          <span className="opacity-60">Claimed by </span>
+          <UserName userId={task.claimedBy} />
+        </div>
+      )}
+    </li>
+  )
+}
+
 function DrawerContent({
   requestId,
   requestNo,
@@ -63,12 +118,10 @@ function DrawerContent({
                 : `${tasks.length} fill task${tasks.length !== 1 ? "s" : ""}`}
           </SheetDescription>
         </div>
-        <SheetClose asChild>
-          <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onClose}>
-            <X className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </Button>
-        </SheetClose>
+        <Button variant="ghost" size="sm" className="gap-1.5 text-xs shrink-0" onClick={onClose}>
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Back
+        </Button>
       </div>
 
       {/* Scrollable content */}
@@ -91,39 +144,7 @@ function DrawerContent({
         {!isLoading && tasks.length > 0 && (
           <ol className="space-y-3">
             {tasks.map((task) => (
-              <li
-                key={task.taskId}
-                className="rounded-md border bg-muted/20 px-3 py-2.5 space-y-2"
-              >
-                {/* Level + status */}
-                <div className="flex items-center justify-between gap-2">
-                  <span className="text-xs font-semibold">Level {task.routeLevel}</span>
-                  <FillTaskStatusBadge status={task.status} />
-                </div>
-
-                {/* Filler + SLA */}
-                <div className="text-xs text-muted-foreground">
-                  {task.fillerType === "FILL_ACTOR_TYPE_USER" ? (
-                    <UserName userId={task.fillerValue} />
-                  ) : task.fillerType === "FILL_ACTOR_TYPE_DEPT" ? (
-                    <DeptName deptCode={task.fillerValue} />
-                  ) : (
-                    task.fillerValue || "—"
-                  )}
-                  <span className="ml-2 opacity-60">{task.slaFillHours}h SLA</span>
-                </div>
-
-                {/* Progress bar */}
-                <FillTaskProgressBar task={task} />
-
-                {/* Claimed by */}
-                {task.claimedBy && (
-                  <div className="text-xs text-muted-foreground">
-                    <span className="opacity-60">Claimed by </span>
-                    <UserName userId={task.claimedBy} />
-                  </div>
-                )}
-              </li>
+              <FillTrackingDrawerRow key={task.taskId} task={task} />
             ))}
           </ol>
         )}
diff --git a/src/components/finance/fill-assignment/FillTrackingTab.tsx b/src/components/finance/fill-assignment/FillTrackingTab.tsx
index 517883c..e4d578c 100644
--- a/src/components/finance/fill-assignment/FillTrackingTab.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingTab.tsx
@@ -3,7 +3,6 @@
 import {
   useFillTasks,
   useClaimFillTask,
-  useApproveFillTask,
   useRejectFillTask,
 } from "@/hooks/finance/use-fill-assignment";
 import { useUser } from "@/providers/auth-provider";
@@ -27,7 +26,6 @@ export function FillTrackingTab({ requestId }: Props) {
 
   const { data: tasks = [], isLoading } = useFillTasks(requestId);
   const claim = useClaimFillTask(requestId);
-  const approve = useApproveFillTask(requestId);
   const reject = useRejectFillTask(requestId);
 
   const myBlockerTask = tasks.find(
@@ -57,7 +55,6 @@ export function FillTrackingTab({ requestId }: Props) {
         isSuperAdmin={isSuperAdmin}
         currentUserDepts={currentUserDepts}
         onClaim={(taskId) => claim.mutate(taskId)}
-        onApprove={(taskId) => approve.mutate({ taskId })}
         onReject={(taskId) => reject.mutate({ taskId, reason: "Rejected" })}
       />
     </div>
diff --git a/src/components/finance/fill-assignment/FillTrackingTable.tsx b/src/components/finance/fill-assignment/FillTrackingTable.tsx
index 96f699e..0252e09 100644
--- a/src/components/finance/fill-assignment/FillTrackingTable.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingTable.tsx
@@ -14,7 +14,6 @@ interface FillTrackingTableProps {
    */
   currentUserDepts?: string[];
   onClaim?: (taskId: number) => void;
-  onApprove?: (taskId: number) => void;
   onReject?: (taskId: number) => void;
 }
 
@@ -24,7 +23,6 @@ export function FillTrackingTable({
   isSuperAdmin = false,
   currentUserDepts = [],
   onClaim,
-  onApprove,
   onReject,
 }: FillTrackingTableProps) {
   if (tasks.length === 0) {
@@ -57,7 +55,6 @@ export function FillTrackingTable({
               isSuperAdmin={isSuperAdmin}
               currentUserDepts={currentUserDepts}
               onClaim={onClaim}
-              onApprove={onApprove}
               onReject={onReject}
             />
           ))}
diff --git a/src/components/finance/fill-assignment/index.ts b/src/components/finance/fill-assignment/index.ts
index 1f75fd0..186d84c 100644
--- a/src/components/finance/fill-assignment/index.ts
+++ b/src/components/finance/fill-assignment/index.ts
@@ -1,5 +1,6 @@
 export { FillTaskStatusBadge } from "./FillTaskStatusBadge";
 export { FillTaskProgressBar } from "./FillTaskProgressBar";
+export { FillTaskIdentity } from "./FillTaskIdentity";
 export { FillTaskRow } from "./FillTaskRow";
 export { FillTrackingTable } from "./FillTrackingTable";
 export { FillBlockerAlert } from "./FillBlockerAlert";
@@ -11,3 +12,4 @@ export { FillConfigForm } from "./FillConfigForm";
 export { FillParamEntryPage } from "./FillParamEntryPage";
 export { FillParamDrawer } from "./FillParamDrawer";
 export { FillParamProductSection } from "./FillParamProductSection";
+export { FillApprovalReviewDrawer } from "./FillApprovalReviewDrawer";
diff --git a/src/components/finance/parameter/parameter-form-dialog.tsx b/src/components/finance/parameter/parameter-form-dialog.tsx
index 2b412ed..13a838e 100644
--- a/src/components/finance/parameter/parameter-form-dialog.tsx
+++ b/src/components/finance/parameter/parameter-form-dialog.tsx
@@ -69,6 +69,8 @@ interface ParameterFormValues {
   displayOrder: number
   displayGroup: string
   notes: string
+  isApprovalVisible: boolean
+  approvalDisplayOrder: number
 }
 
 const parameterFormSchema = z.object({
@@ -107,6 +109,8 @@ const parameterFormSchema = z.object({
   displayOrder: z.coerce.number().int().gte(0),
   displayGroup: z.string().max(50),
   notes: z.string().max(500),
+  isApprovalVisible: z.boolean(),
+  approvalDisplayOrder: z.coerce.number().int().gte(0),
 })
 
 interface ParameterFormDialogProps {
@@ -159,6 +163,8 @@ export function ParameterFormDialog({
       displayOrder: 0,
       displayGroup: "",
       notes: "",
+      isApprovalVisible: false,
+      approvalDisplayOrder: 0,
     },
   })
 
@@ -185,6 +191,8 @@ export function ParameterFormDialog({
           displayOrder: parameter.displayOrder ?? 0,
           displayGroup: parameter.displayGroup || "",
           notes: parameter.notes || "",
+          isApprovalVisible: parameter.isApprovalVisible ?? false,
+          approvalDisplayOrder: parameter.approvalDisplayOrder ?? 0,
         })
       } else {
         form.reset({
@@ -207,6 +215,8 @@ export function ParameterFormDialog({
           displayOrder: 0,
           displayGroup: "",
           notes: "",
+          isApprovalVisible: false,
+          approvalDisplayOrder: 0,
         })
       }
     }
@@ -237,6 +247,8 @@ export function ParameterFormDialog({
             displayOrder: values.displayOrder,
             displayGroup: values.displayGroup,
             notes: values.notes,
+            isApprovalVisible: values.isApprovalVisible,
+            approvalDisplayOrder: values.approvalDisplayOrder,
           },
         })
       } else {
@@ -274,6 +286,7 @@ export function ParameterFormDialog({
   const { data: lookupMasters = [] } = useLookupMasters(true)
   const watchedCategory = form.watch("paramCategory")
   const watchedFillGroup = form.watch("lookupFillGroupCode")
+  const watchedIsApprovalVisible = form.watch("isApprovalVisible")
 
   // Fetch MASTER_LOOKUP trigger params for the fill-group combobox (child params only)
   const { data: triggerParams } = useQuery({
@@ -782,6 +795,59 @@ export function ParameterFormDialog({
                     </FormItem>
                   )}
                 />
+
+                {isEditing && (
+                  <>
+                    <FormField
+                      control={form.control}
+                      name="isApprovalVisible"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                          <div className="space-y-0.5">
+                            <FormLabel>Visible in Approval Summary</FormLabel>
+                            <FormDescription>
+                              Shown to the approver on the read-only review drawer before approving a
+                              fill task.
+                            </FormDescription>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value ?? false}
+                              onCheckedChange={field.onChange}
+                              disabled={isPending}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+
+                    {watchedIsApprovalVisible && (
+                      <FormField
+                        control={form.control}
+                        name="approvalDisplayOrder"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Approval Display Order</FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                min={0}
+                                {...field}
+                                value={field.value ?? 0}
+                                onChange={(e) => field.onChange(Number(e.target.value || 0))}
+                                disabled={isPending}
+                              />
+                            </FormControl>
+                            <FormDescription>
+                              Render order within the approval review drawer.
+                            </FormDescription>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                  </>
+                )}
               </div>
             </div>
 
diff --git a/src/components/nav/nav-user.tsx b/src/components/nav/nav-user.tsx
index 185a772..154cea2 100644
--- a/src/components/nav/nav-user.tsx
+++ b/src/components/nav/nav-user.tsx
@@ -14,11 +14,7 @@ import { useTheme } from "next-themes"
 import { useRouter } from "next/navigation"
 import { useAuth } from "@/providers/auth-provider"
 
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from "@/components/ui/avatar"
+import { UserAvatar } from "@/components/common/user-avatar"
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -61,13 +57,6 @@ export function NavUser({ user }: NavUserProps) {
         window.location.href = "/login"
     }
 
-    const initials = user.name
-        .split(" ")
-        .map((n) => n[0])
-        .join("")
-        .toUpperCase()
-        .slice(0, 2)
-
     return (
         <SidebarMenu>
             <SidebarMenuItem>
@@ -78,10 +67,12 @@ export function NavUser({ user }: NavUserProps) {
                             data-testid="nav-user-trigger"
                             className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                         >
-                            <Avatar className="h-8 w-8 rounded-lg">
-                                <AvatarImage src={user.avatar} alt={user.name} />
-                                <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
-                            </Avatar>
+                            <UserAvatar
+                                fullName={user.name}
+                                avatarUrl={user.avatar}
+                                className="h-8 w-8 rounded-lg"
+                                fallbackClassName="rounded-lg"
+                            />
                             <div className="grid flex-1 text-left text-sm leading-tight">
                                 <span className="truncate font-medium">{user.name}</span>
                                 <span className="truncate text-xs">{user.email}</span>
@@ -97,10 +88,12 @@ export function NavUser({ user }: NavUserProps) {
                     >
                         <DropdownMenuLabel className="p-0 font-normal">
                             <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                <Avatar className="h-8 w-8 rounded-lg">
-                                    <AvatarImage src={user.avatar} alt={user.name} />
-                                    <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
-                                </Avatar>
+                                <UserAvatar
+                                    fullName={user.name}
+                                    avatarUrl={user.avatar}
+                                    className="h-8 w-8 rounded-lg"
+                                    fallbackClassName="rounded-lg"
+                                />
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                     <span className="truncate font-medium">{user.name}</span>
                                     <span className="truncate text-xs">{user.email}</span>
diff --git a/src/components/profile/profile-header.tsx b/src/components/profile/profile-header.tsx
index 57f8dd8..8e2e110 100644
--- a/src/components/profile/profile-header.tsx
+++ b/src/components/profile/profile-header.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { UserAvatar } from "@/components/common/user-avatar"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent } from "@/components/ui/card"
 import { ShieldCheck, ShieldOff, Building2, Briefcase } from "lucide-react"
@@ -24,24 +24,17 @@ export function ProfileHeader({
     roles = [],
     twoFactorEnabled = false,
 }: ProfileHeaderProps) {
-    const initials = name
-        .split(" ")
-        .map((n) => n[0])
-        .join("")
-        .toUpperCase()
-        .slice(0, 2)
-
     return (
         <Card>
             <CardContent className="pt-6">
                 <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
                     {/* Avatar */}
-                    <Avatar className="h-24 w-24">
-                        <AvatarImage src={avatarUrl} alt={name} />
-                        <AvatarFallback className="text-2xl font-semibold bg-primary text-primary-foreground">
-                            {initials}
-                        </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar
+                        fullName={name}
+                        avatarUrl={avatarUrl}
+                        className="h-24 w-24"
+                        fallbackClassName="text-2xl font-semibold bg-primary text-primary-foreground"
+                    />
 
                     {/* User Info */}
                     <div className="flex-1 text-center sm:text-left space-y-3">
diff --git a/src/hooks/finance/use-cost-product-request.ts b/src/hooks/finance/use-cost-product-request.ts
index 8a17420..a132687 100644
--- a/src/hooks/finance/use-cost-product-request.ts
+++ b/src/hooks/finance/use-cost-product-request.ts
@@ -4,18 +4,27 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { toast } from "sonner"
 
 import { fillAssignmentKeys } from "@/hooks/finance/use-fill-assignment"
+import { apiClient, buildQueryString, downloadFileFromBytes } from "@/lib/api"
 import {
   type ClosedSubstatus,
   type CostProductRequest,
   type CreateCostProductRequestPayload,
+  type ExportCostProductRequestsParams,
+  type ExportCostProductRequestsResponse,
+  type ImportCostProductRequestsResponse,
+  type GetCostProductRequestImportTemplateResponse,
   type ListCostProductRequestsParams,
   type ProductClassification,
   type UpdateCostProductRequestPayload,
+  ExportCostProductRequestsResponseParser,
+  ImportCostProductRequestsResponseParser,
+  GetCostProductRequestImportTemplateResponseParser,
   normalizeCostProductRequest,
 } from "@/types/finance/cost-product-request"
 
 const KEYS = {
   all: ["finance", "cost-product-request"] as const,
+  lists: () => ["finance", "cost-product-request", "list"] as const,
   list: (p: ListCostProductRequestsParams) => ["finance", "cost-product-request", "list", p] as const,
   detail: (id: number) => ["finance", "cost-product-request", "detail", id] as const,
 }
@@ -234,6 +243,39 @@ export function useDecideFeasibility() {
   })
 }
 
+// useSubmitAndDecide is the B3 merged action — replaces the standalone Submit +
+// Start review click sequence. It performs Submit + StartReview + VerifyClassification +
+// DecideFeasibility + (if FEASIBLE) LinkRoute server-side in one call, gated by a single
+// `finance.product.request.review` permission (design.md §3 B3). Used by
+// ClassificationAndFeasibilityDialog when opened from a DRAFT request.
+export function useSubmitAndDecide() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (input: {
+      requestId: number
+      verifiedClassification: ProductClassification
+      overrideReason?: string
+      decision: "FEASIBLE" | "NOT_FEASIBLE"
+      note?: string
+      referenceProductHeadId?: number
+    }) => {
+      const result = await postJson(`/api/v1/finance/cost-product-requests/${input.requestId}/submit-and-decide`, {
+        verifiedClassification: input.verifiedClassification,
+        overrideReason: input.overrideReason || "",
+        decision: input.decision,
+        note: input.note || "",
+        referenceProductHeadId: input.referenceProductHeadId || 0,
+      })
+      return result.data
+    },
+    onSuccess: () => {
+      toast.success("Submitted and decided")
+      qc.invalidateQueries({ queryKey: KEYS.all })
+    },
+    onError: (e: Error) => toast.error(e.message),
+  })
+}
+
 export function useCloseRequest() {
   const qc = useQueryClient()
   return useMutation({
@@ -270,6 +312,103 @@ export function useAssignRequest() {
 
 export const costProductRequestKeys = KEYS
 
+// =============================================================================
+// Export/Import/Template (design.md §4 Area D6, P4-T4) — mirrors use-uom.ts's
+// useExportUOMs/useImportUOMs/useDownloadTemplate (apiClient-based style),
+// not this file's own postJson/fetch style, per plan.md's explicit mirror
+// instruction for the 3 new hooks.
+// =============================================================================
+
+/**
+ * Hook for exporting cost product requests to Excel.
+ */
+export function useExportCostProductRequests() {
+  return useMutation({
+    mutationFn: async (params: ExportCostProductRequestsParams = {}): Promise<ExportCostProductRequestsResponse> => {
+      const queryString = buildQueryString(params as Record<string, unknown>)
+      const rawResponse = await apiClient.get<unknown>(`/api/v1/finance/cost-product-requests/export${queryString}`)
+      return ExportCostProductRequestsResponseParser.fromJSON(rawResponse)
+    },
+    onSuccess: (response) => {
+      if (response.base?.isSuccess && response.fileContent.length > 0) {
+        downloadFileFromBytes(response.fileContent, response.fileName || "product-requests-export.xlsx")
+        toast.success("Export completed successfully")
+      } else {
+        toast.error(response.base?.message || "Failed to export product requests")
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to export product requests")
+    },
+  })
+}
+
+/**
+ * Import request data for cost product requests.
+ */
+interface ImportCostProductRequestsData {
+  fileContent: Uint8Array
+  fileName: string
+  duplicateAction: string
+}
+
+/**
+ * Hook for importing cost product requests from Excel. Create-only in v1
+ * (design.md §4 D6): every row creates a new DRAFT request, so
+ * updatedCount/skippedCount are always 0.
+ */
+export function useImportCostProductRequests() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data: ImportCostProductRequestsData): Promise<ImportCostProductRequestsResponse> => {
+      const rawResponse = await apiClient.post<unknown>("/api/v1/finance/cost-product-requests/import", {
+        fileContent: Array.from(data.fileContent), // Convert Uint8Array to array for JSON
+        fileName: data.fileName,
+        duplicateAction: data.duplicateAction,
+      })
+      return ImportCostProductRequestsResponseParser.fromJSON(rawResponse)
+    },
+    onSuccess: (response) => {
+      qc.invalidateQueries({ queryKey: costProductRequestKeys.lists() })
+      if (response.base?.isSuccess) {
+        const { successCount, updatedCount, skippedCount, failedCount } = response
+        toast.success(
+          `Import completed: ${successCount} created, ${updatedCount} updated, ${skippedCount} skipped, ${failedCount} failed`
+        )
+      } else {
+        toast.error(response.base?.message || "Failed to import product requests")
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to import product requests")
+    },
+  })
+}
+
+/**
+ * Hook for downloading the cost product request import template.
+ */
+export function useDownloadCostProductRequestTemplate() {
+  return useMutation({
+    mutationFn: async (): Promise<GetCostProductRequestImportTemplateResponse> => {
+      const rawResponse = await apiClient.get<unknown>("/api/v1/finance/cost-product-requests/template")
+      return GetCostProductRequestImportTemplateResponseParser.fromJSON(rawResponse)
+    },
+    onSuccess: (response) => {
+      if (response.base?.isSuccess && response.fileContent.length > 0) {
+        downloadFileFromBytes(response.fileContent, response.fileName || "product-request-import-template.xlsx")
+        toast.success("Template downloaded successfully")
+      } else {
+        toast.error(response.base?.message || "Failed to download template")
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to download template")
+    },
+  })
+}
+
 // -- Approval Trace History --------------------------------------------------
 
 interface StatusHistoryEntry {
diff --git a/src/hooks/finance/use-fill-assignment.ts b/src/hooks/finance/use-fill-assignment.ts
index b54cccb..e8da443 100644
--- a/src/hooks/finance/use-fill-assignment.ts
+++ b/src/hooks/finance/use-fill-assignment.ts
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import {
@@ -8,6 +9,8 @@ import {
   type FillTask,
   type LevelAssignmentConfig,
 } from "@/types/finance/fill-assignment";
+import { useParameters } from "@/hooks/finance/use-parameter";
+import type { Parameter } from "@/types/finance/parameter";
 
 // Query keys
 export const fillAssignmentKeys = {
@@ -67,6 +70,26 @@ export function useFillTasks(requestId: number) {
   });
 }
 
+// Approval-visible parameter subset — for the FillApprovalReviewDrawer (item #4).
+//
+// Reuses the existing ListParameters RPC/BFF route (no dedicated backend endpoint,
+// per the P4-T2 scope decision) with a large pageSize and filters/sorts client-side.
+// Piggybacks on `useParameters`'s own query-key/cache, so toggling a param's
+// visibility in Parameter Master (which invalidates ["finance", "parameter"]) also
+// invalidates this list — no separate cache-invalidation wiring needed.
+export function useApprovalVisibleParams() {
+  const { data, isLoading, isError } = useParameters({ page: 1, pageSize: 100 });
+
+  const params = useMemo(() => {
+    const all: Parameter[] = data?.data ?? [];
+    return all
+      .filter((p) => p.isApprovalVisible)
+      .sort((a, b) => a.approvalDisplayOrder - b.approvalDisplayOrder);
+  }, [data]);
+
+  return { data: params, isLoading, isError };
+}
+
 // --- Config mutations ---
 
 export function useUpsertFillConfig() {
diff --git a/src/hooks/finance/use-link-route.ts b/src/hooks/finance/use-link-route.ts
index c23ff80..91e6a00 100644
--- a/src/hooks/finance/use-link-route.ts
+++ b/src/hooks/finance/use-link-route.ts
@@ -3,6 +3,8 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { toast } from "sonner"
 
+import { costProductRequestKeys } from "./use-cost-product-request"
+
 export function useLinkExistingRoute() {
   const qc = useQueryClient()
   return useMutation({
@@ -18,7 +20,8 @@ export function useLinkExistingRoute() {
     },
     onSuccess: (_data, { requestId }) => {
       toast.success("Route linked")
-      qc.invalidateQueries({ queryKey: ["finance", "cost-product-request", requestId] })
+      qc.invalidateQueries({ queryKey: costProductRequestKeys.detail(requestId) })
+      qc.invalidateQueries({ queryKey: costProductRequestKeys.all })
       qc.invalidateQueries({ queryKey: ["finance", "cost-route"] })
     },
     onError: (err: Error) => toast.error(err.message),
@@ -40,7 +43,9 @@ export function useUnlinkRoute() {
     },
     onSuccess: (_data, { requestId }) => {
       toast.success("Route unlinked")
-      qc.invalidateQueries({ queryKey: ["finance", "cost-product-request", requestId] })
+      qc.invalidateQueries({ queryKey: costProductRequestKeys.detail(requestId) })
+      qc.invalidateQueries({ queryKey: costProductRequestKeys.all })
+      qc.invalidateQueries({ queryKey: ["finance", "cost-route"] })
     },
     onError: (err: Error) => toast.error(err.message),
   })
diff --git a/src/types/finance/cost-product-request.ts b/src/types/finance/cost-product-request.ts
index bb13075..4819054 100644
--- a/src/types/finance/cost-product-request.ts
+++ b/src/types/finance/cost-product-request.ts
@@ -1,4 +1,52 @@
 // Canonical Phase A — CostProductRequest (CPR_) + CostProductSpec (CPS_).
+import { TubeType } from "@/types/generated/finance/v1/cost_product_request"
+
+export { TubeType }
+
+// ============================================================================
+// Export/Import/Template (design.md §4 Area D6, P4-T4) — re-export proto
+// message + parser types, mirroring uom.ts's pattern.
+// ============================================================================
+
+export type {
+  ExportCostProductRequestsRequest,
+  ExportCostProductRequestsResponse,
+  ImportCostProductRequestsRequest,
+  ImportCostProductRequestsResponse,
+  GetCostProductRequestImportTemplateRequest,
+  GetCostProductRequestImportTemplateResponse,
+} from "@/types/generated/finance/v1/cost_product_request"
+
+// ImportError is defined in uom.ts's generated module and reused by
+// cost_product_request.ts's ImportCostProductRequestsResponse — re-export
+// from its actual source rather than re-exporting a type that
+// cost_product_request.ts only imports internally.
+export type { ImportError } from "@/types/generated/finance/v1/uom"
+
+export {
+  ExportCostProductRequestsRequest as ExportCostProductRequestsRequestParser,
+  ExportCostProductRequestsResponse as ExportCostProductRequestsResponseParser,
+  ImportCostProductRequestsRequest as ImportCostProductRequestsRequestParser,
+  ImportCostProductRequestsResponse as ImportCostProductRequestsResponseParser,
+  GetCostProductRequestImportTemplateRequest as GetCostProductRequestImportTemplateRequestParser,
+  GetCostProductRequestImportTemplateResponse as GetCostProductRequestImportTemplateResponseParser,
+} from "@/types/generated/finance/v1/cost_product_request"
+
+/**
+ * Simplified export params for hooks.
+ */
+export interface ExportCostProductRequestsParams {
+  search?: string
+  status?: string
+  requestTypeId?: number
+}
+
+// Note: no local `DuplicateAction` type here (unlike uom.ts's) — this
+// import is create-only in v1 (design.md §4 D6), so
+// CostProductRequestImportDialog sends a fixed no-op string rather than
+// exposing a selector. Adding one would collide with uom.ts's own
+// `DuplicateAction` export via the `@/types/finance` barrel.
+
 export type RequestStatus =
   | "DRAFT"
   | "SUBMITTED"
@@ -16,7 +64,7 @@ export type RequestStatus =
   | "REJECTED"
 
 export type ClosedSubstatus = "won" | "lost" | "cancelled" | "on_hold"
-export type ProductClassification = "existing" | "new"
+export type ProductClassification = "existing" | "new" | "pending"
 export type UrgencyLevel = "low" | "medium" | "high"
 export type RawMaterialType = "POY_BOUGHTOUT" | "CHIPS_SD" | "CHIPS_BRT" | "CHIPS_RECYCLE"
 export type BoxType = "JUMBO" | "NORMAL" | "PALLET"
@@ -27,9 +75,11 @@ export interface CostProductSpec {
   rawMaterialType: RawMaterialType | string
   productDescription: string
   shadeId?: number
-  shadeCustomText?: string
+  shadeCode?: string
+  shadeName?: string
   paperTubeTypeId: number
   paperTubeLabel?: string
+  tubeType: TubeType
   weightPerBobbinKg: string
   boxType: BoxType | string
   createdAt?: string
@@ -63,6 +113,7 @@ export interface CostProductRequest {
   assignedToUserId?: string
   requesterUserId: string
   linkedRouteHeadId?: number
+  referenceProductSysId?: number
   createdAt?: string
   updatedAt?: string
   spec?: CostProductSpec
@@ -72,12 +123,23 @@ export interface SpecInput {
   rawMaterialType: RawMaterialType
   productDescription: string
   shadeId?: number
-  shadeCustomText?: string
+  shadeCode?: string
+  shadeName?: string
   paperTubeTypeId: number
+  tubeType: TubeType
   weightPerBobbinKg: string
   boxType: BoxType
 }
 
+// TUBE_TYPE_OPTIONS — plain 2-option Select for the fixed Paper/Plastic
+// classification (product-request-workflow-revamp D3). UNSPECIFIED is
+// intentionally excluded here — it represents "not collected", handled by
+// leaving the field blank in the form rather than an explicit option.
+export const TUBE_TYPE_OPTIONS: Array<{ value: TubeType; label: string }> = [
+  { value: TubeType.TUBE_TYPE_PAPER, label: "Paper" },
+  { value: TubeType.TUBE_TYPE_PLASTIC, label: "Plastic" },
+]
+
 export interface CreateCostProductRequestPayload {
   requestTypeId: number
   title: string
@@ -90,6 +152,7 @@ export interface CreateCostProductRequestPayload {
   urgencyLevel?: UrgencyLevel
   neededByDate?: string
   spec?: SpecInput
+  referenceProductSysId?: number
 }
 
 export type UpdateCostProductRequestPayload = CreateCostProductRequestPayload
@@ -102,7 +165,7 @@ export interface ListCostProductRequestsParams {
   assigneeUserId?: string
   page?: number
   pageSize?: number
-  sortBy?: "request_no" | "created_at" | "updated_at" | "status" | ""
+  sortBy?: "request_no" | "created_at" | "updated_at" | "status" | "type" | "title" | "customer" | "class" | "urgency" | ""
   sortOrder?: "asc" | "desc"
 }
 
@@ -130,9 +193,11 @@ function normalizeSpec(raw: Record<string, unknown>, requestId: number): CostPro
     rawMaterialType: str(raw.rawMaterialType ?? raw.raw_material_type),
     productDescription: str(raw.productDescription ?? raw.product_description),
     shadeId: numOpt(raw.shadeId ?? raw.shade_id),
-    shadeCustomText: str(raw.shadeCustomText ?? raw.shade_custom_text) || undefined,
+    shadeCode: str(raw.shadeCode ?? raw.shade_code) || undefined,
+    shadeName: str(raw.shadeName ?? raw.shade_name) || undefined,
     paperTubeTypeId: num(raw.paperTubeTypeId ?? raw.paper_tube_type_id),
     paperTubeLabel: str(raw.paperTubeLabel ?? raw.paper_tube_label) || undefined,
+    tubeType: num(raw.tubeType ?? raw.tube_type) as TubeType,
     weightPerBobbinKg: str(raw.weightPerBobbinKg ?? raw.weight_per_bobbin_kg),
     boxType: str(raw.boxType ?? raw.box_type),
     createdAt: str(raw.createdAt ?? raw.created_at) || undefined,
@@ -142,7 +207,7 @@ function normalizeSpec(raw: Record<string, unknown>, requestId: number): CostPro
 
 export function normalizeCostProductRequest(raw: Raw): CostProductRequest {
   const requestId = num(raw.requestId ?? raw.request_id)
-  const classification = (str(raw.productClassification ?? raw.product_classification) || "existing") as ProductClassification
+  const classification = (str(raw.productClassification ?? raw.product_classification) || "pending") as ProductClassification
   const verified = str(raw.verifiedClassification ?? raw.verified_classification)
   return {
     requestId,
@@ -171,6 +236,7 @@ export function normalizeCostProductRequest(raw: Raw): CostProductRequest {
     assignedToUserId: str(raw.assignedToUserId ?? raw.assigned_to_user_id) || undefined,
     requesterUserId: str(raw.requesterUserId ?? raw.requester_user_id),
     linkedRouteHeadId: numOpt(raw.linkedRouteHeadId ?? raw.linked_route_head_id),
+    referenceProductSysId: numOpt(raw.referenceProductSysId ?? raw.reference_product_sys_id),
     createdAt: raw.audit?.createdAt ?? raw.audit?.created_at,
     updatedAt: raw.audit?.updatedAt ?? raw.audit?.updated_at,
     spec: raw.spec ? normalizeSpec(raw.spec, requestId) : undefined,
diff --git a/src/types/finance/cost-route.ts b/src/types/finance/cost-route.ts
index 638a067..d0aede8 100644
--- a/src/types/finance/cost-route.ts
+++ b/src/types/finance/cost-route.ts
@@ -18,9 +18,16 @@ export interface CostRouteHead {
   lockedAt: string
   unlockedBy: string
   unlockedAt: string
+  // Read-time aggregates from ListRoutes (distinct route levels / total RM entries).
+  levelCount: number
+  rmCount: number
 }
 
 export interface CostRouteRm {
+  // Stable client-side id — assigned on hydration + creation so React keys,
+  // React Flow node/edge ids, and edit-panel lookups never collide when the
+  // DB id is still 0 (unsaved). Never sent to / read from the backend.
+  uid: string
   rmId: number
   seqId: number
   parentProductSysId: number
@@ -28,6 +35,7 @@ export interface CostRouteRm {
   rmProductSysId?: number
   rmItemCode?: string
   rmGroupCode?: string
+  rmGroupName?: string
   routeRmName?: string
   routeRmItemCode?: string
   routeRmShadeCode?: string
@@ -36,9 +44,14 @@ export interface CostRouteRm {
   uomId?: number
   subType?: string
   notes?: string
+  // Persisted free node position for ITEM/GROUP RM nodes (0 = auto-layout).
+  positionX?: number
+  positionY?: number
 }
 
 export interface CostRouteSeq {
+  // Stable client-side id — see CostRouteRm.uid.
+  uid: string
   seqId: number
   headId: number
   productSysId: number
@@ -65,10 +78,25 @@ export interface ListRoutesParams {
   status?: RouteStatus | ""
   page?: number
   pageSize?: number
-  sortBy?: "created_at" | "product_code" | "status" | ""
+  sortBy?: "created_at" | "product_code" | "status" | "head_id" | "version" | "level_count" | "rm_count" | ""
   sortOrder?: "asc" | "desc" | ""
 }
 
+// ---------- client uid ----------
+
+/**
+ * newUid — stable client-side identifier for a seq/rm. Independent of the DB
+ * id (which is 0 until the graph is saved). Used for React keys, React Flow
+ * node/edge ids, and edit-panel lookups so newly-added elements are
+ * clickable/editable before save and deletes target exactly one element.
+ */
+export function newUid(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID()
+  }
+  return `uid-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
 // ---------- normalizers (handle both camel + snake_case) ----------
 
 const str = (v: unknown): string => (typeof v === "string" ? v : "")
@@ -80,6 +108,7 @@ const numOpt = (v: unknown): number | undefined => {
 
 export function normalizeCostRouteRm(raw: Record<string, unknown>): CostRouteRm {
   return {
+    uid: newUid(),
     rmId: num(raw.rmId ?? raw.rm_id),
     seqId: num(raw.seqId ?? raw.seq_id),
     parentProductSysId: num(raw.parentProductSysId ?? raw.parent_product_sys_id),
@@ -87,6 +116,7 @@ export function normalizeCostRouteRm(raw: Record<string, unknown>): CostRouteRm
     rmProductSysId: numOpt(raw.rmProductSysId ?? raw.rm_product_sys_id),
     rmItemCode: str(raw.rmItemCode ?? raw.rm_item_code) || undefined,
     rmGroupCode: str(raw.rmGroupCode ?? raw.rm_group_code) || undefined,
+    rmGroupName: str(raw.rmGroupName ?? raw.rm_group_name) || undefined,
     routeRmName: str(raw.routeRmName ?? raw.route_rm_name) || undefined,
     routeRmItemCode: str(raw.routeRmItemCode ?? raw.route_rm_item_code) || undefined,
     routeRmShadeCode: str(raw.routeRmShadeCode ?? raw.route_rm_shade_code) || undefined,
@@ -95,12 +125,15 @@ export function normalizeCostRouteRm(raw: Record<string, unknown>): CostRouteRm
     uomId: numOpt(raw.uomId ?? raw.uom_id),
     subType: str(raw.subType ?? raw.sub_type) || undefined,
     notes: str(raw.notes) || undefined,
+    positionX: Number(raw.positionX ?? raw.position_x ?? 0),
+    positionY: Number(raw.positionY ?? raw.position_y ?? 0),
   }
 }
 
 export function normalizeCostRouteSeq(raw: Record<string, unknown>): CostRouteSeq {
   const rms = (raw.rms as unknown[]) ?? []
   return {
+    uid: newUid(),
     seqId: num(raw.seqId ?? raw.seq_id),
     headId: num(raw.headId ?? raw.head_id),
     productSysId: num(raw.productSysId ?? raw.product_sys_id),
@@ -133,6 +166,8 @@ export function normalizeCostRouteHead(raw: Record<string, unknown>): CostRouteH
     lockedAt: str(raw.lockedAt ?? raw.locked_at),
     unlockedBy: str(raw.unlockedBy ?? raw.unlocked_by),
     unlockedAt: str(raw.unlockedAt ?? raw.unlocked_at),
+    levelCount: num(raw.levelCount ?? raw.level_count),
+    rmCount: num(raw.rmCount ?? raw.rm_count),
   }
 }
 
@@ -144,3 +179,18 @@ export function normalizeRouteGraph(raw: Record<string, unknown>): RouteGraph {
     seqs: seqs.map((s) => normalizeCostRouteSeq(s as Record<string, unknown>)),
   }
 }
+
+/**
+ * Returns the route-graph sequences (products) sitting at a given route
+ * level, or an empty array if the graph/level isn't available yet. Shared
+ * by the fill-entry flow (FillParamEntryPage, FillParamDrawer) and the fill
+ * tracking cards (FillTaskRow, FillTrackingCompact) so the "products at this
+ * level" filter logic lives in exactly one place.
+ */
+export function getProductsAtLevel(
+  graph: RouteGraph | null | undefined,
+  level: number | undefined,
+): CostRouteSeq[] {
+  if (!graph || level === undefined) return []
+  return graph.seqs.filter((s) => s.routeLevel === level)
+}
diff --git a/src/types/finance/fill-assignment.ts b/src/types/finance/fill-assignment.ts
index e7e5b36..94297eb 100644
--- a/src/types/finance/fill-assignment.ts
+++ b/src/types/finance/fill-assignment.ts
@@ -154,3 +154,13 @@ export function fillTaskProgress(task: FillTask): number {
   if (task.totalParams === 0) return 0
   return Math.round((task.filledParams / task.totalParams) * 100)
 }
+
+/**
+ * Returns the most recent approval-history entry matching `decision`
+ * (e.g. "APPROVED"), or undefined if none exists. `task.approvals` is
+ * always ordered newest-first by the backend (ListApprovals), so the first
+ * match is the latest one.
+ */
+export function findApproval(task: FillTask, decision: string): FillApproval | undefined {
+  return task.approvals.find((a) => a.decision === decision)
+}
diff --git a/src/types/finance/param-summary.ts b/src/types/finance/param-summary.ts
index a946150..8b32976 100644
--- a/src/types/finance/param-summary.ts
+++ b/src/types/finance/param-summary.ts
@@ -6,6 +6,8 @@ export interface ParamValueEntry {
   paramCode: string
   paramName: string
   dataType: string // "NUMBER" | "TEXT" | "BOOLEAN"
+  displayGroup: string
+  displayOrder: number
   hasValue: boolean
   valueNumeric: string
   valueText: string
@@ -47,6 +49,8 @@ function normalizeParamValue(raw: Record<string, unknown>): ParamValueEntry {
     paramCode: String(raw.paramCode ?? raw.param_code ?? ""),
     paramName: String(raw.paramName ?? raw.param_name ?? ""),
     dataType: String(raw.dataType ?? raw.data_type ?? ""),
+    displayGroup: String(raw.displayGroup ?? raw.display_group ?? ""),
+    displayOrder: Number(raw.displayOrder ?? raw.display_order ?? 0),
     hasValue: Boolean(raw.hasValue ?? raw.has_value ?? false),
     valueNumeric: String(raw.valueNumeric ?? raw.value_numeric ?? ""),
     valueText: String(raw.valueText ?? raw.value_text ?? ""),
diff --git a/src/types/finance/parameter.ts b/src/types/finance/parameter.ts
index 0b4e975..4814be2 100644
--- a/src/types/finance/parameter.ts
+++ b/src/types/finance/parameter.ts
@@ -184,6 +184,9 @@ export interface ParameterFormData {
   displayOrder: number
   displayGroup: string
   notes: string
+  // Approval review drawer visibility (edit-only; UpdateParameterRequest field)
+  isApprovalVisible: boolean
+  approvalDisplayOrder: number
 }
 
 /**
@@ -207,6 +210,8 @@ export const DEFAULT_PARAMETER_FORM_VALUES: ParameterFormData = {
   displayOrder: 0,
   displayGroup: "",
   notes: "",
+  isApprovalVisible: false,
+  approvalDisplayOrder: 0,
 }
 
 /**
diff --git a/src/types/generated/finance/v1/cost_product_request.ts b/src/types/generated/finance/v1/cost_product_request.ts
index 793b7c5..6be5329 100644
--- a/src/types/generated/finance/v1/cost_product_request.ts
+++ b/src/types/generated/finance/v1/cost_product_request.ts
@@ -7,26 +7,85 @@
 /* eslint-disable */
 import { BinaryReader, BinaryWriter } from "@bufbuild/protobuf/wire";
 import { AuditInfo, BaseResponse, PaginationRequest, PaginationResponse } from "../../common/v1/common";
+import { ImportError } from "./uom";
 
 export const protobufPackage = "finance.v1";
 
+/**
+ * TubeType represents the fixed Paper/Plastic tube classification for a
+ * product spec, replacing the old master-data-backed paper_tube_type_id lookup.
+ */
+export enum TubeType {
+  /** TUBE_TYPE_UNSPECIFIED - Default unspecified value - used when no tube type has been selected. */
+  TUBE_TYPE_UNSPECIFIED = 0,
+  /** TUBE_TYPE_PAPER - Paper tube. */
+  TUBE_TYPE_PAPER = 1,
+  /** TUBE_TYPE_PLASTIC - Plastic tube. */
+  TUBE_TYPE_PLASTIC = 2,
+  UNRECOGNIZED = -1,
+}
+
+export function tubeTypeFromJSON(object: any): TubeType {
+  switch (object) {
+    case 0:
+    case "TUBE_TYPE_UNSPECIFIED":
+      return TubeType.TUBE_TYPE_UNSPECIFIED;
+    case 1:
+    case "TUBE_TYPE_PAPER":
+      return TubeType.TUBE_TYPE_PAPER;
+    case 2:
+    case "TUBE_TYPE_PLASTIC":
+      return TubeType.TUBE_TYPE_PLASTIC;
+    case -1:
+    case "UNRECOGNIZED":
+    default:
+      return TubeType.UNRECOGNIZED;
+  }
+}
+
+export function tubeTypeToJSON(object: TubeType): string {
+  switch (object) {
+    case TubeType.TUBE_TYPE_UNSPECIFIED:
+      return "TUBE_TYPE_UNSPECIFIED";
+    case TubeType.TUBE_TYPE_PAPER:
+      return "TUBE_TYPE_PAPER";
+    case TubeType.TUBE_TYPE_PLASTIC:
+      return "TUBE_TYPE_PLASTIC";
+    case TubeType.UNRECOGNIZED:
+    default:
+      return "UNRECOGNIZED";
+  }
+}
+
 export interface CostProductSpec {
   specId: number;
   requestId: number;
-  /** POY_BOUGHTOUT | CHIPS_SD | CHIPS_BRT | CHIPS_RECYCLE. */
+  /**
+   * POY_BOUGHTOUT | CHIPS_SD | CHIPS_BRT | CHIPS_RECYCLE.
+   * Deprecated for new writes: retained for historical rows, no longer populated by new writes.
+   */
   rawMaterialType: string;
   productDescription: string;
   shadeId: number;
-  shadeCustomText: string;
+  /** Free-text or master shade code (e.g. NL, Z114S). Renamed from shade_custom_text — field number unchanged for wire compatibility. */
+  shadeCode: string;
+  /** Deprecated: retained for historical rows, no longer populated by new writes. Use tube_type instead. */
   paperTubeTypeId: number;
   /** denormalized */
   paperTubeLabel: string;
-  /** decimal stringified to preserve precision */
+  /** Deprecated for new writes: retained for historical rows, no longer populated by new writes. */
   weightPerBobbinKg: string;
-  /** JUMBO | NORMAL | PALLET. */
+  /**
+   * JUMBO | NORMAL | PALLET.
+   * Deprecated for new writes: retained for historical rows, no longer populated by new writes.
+   */
   boxType: string;
   createdAt: string;
   createdBy: string;
+  /** Human-readable shade name (e.g. Natural, Jet Black), mirrors cost_product_master's shade_name. */
+  shadeName: string;
+  /** Fixed Paper/Plastic tube classification. Replaces paper_tube_type_id for new writes. */
+  tubeType: TubeType;
 }
 
 export interface CostProductRequest {
@@ -72,16 +131,30 @@ export interface CostProductRequest {
   linkedRouteHeadId: number;
   /** IAM workflow instance ID linked to this request (empty if no workflow attached). */
   wflInstanceId: string;
+  /**
+   * Optional reviewer-facing hint pointing at a similar existing product master,
+   * used to pre-fill routing resolution during review. 0 = unset.
+   */
+  referenceProductSysId: number;
 }
 
 export interface SpecInput {
+  /** Deprecated for new writes: retained for historical rows, no longer populated by new writes. */
   rawMaterialType: string;
   productDescription: string;
   shadeId: number;
-  shadeCustomText: string;
+  /** Free-text or master shade code (e.g. NL, Z114S). Renamed from shade_custom_text — field number unchanged for wire compatibility. */
+  shadeCode: string;
+  /** Deprecated: retained for historical rows, no longer populated by new writes. Use tube_type instead. */
   paperTubeTypeId: number;
+  /** Deprecated for new writes: retained for historical rows, no longer populated by new writes. */
   weightPerBobbinKg: string;
+  /** Deprecated for new writes: retained for historical rows, no longer populated by new writes. */
   boxType: string;
+  /** Human-readable shade name (e.g. Natural, Jet Black), mirrors cost_product_master's shade_name. */
+  shadeName: string;
+  /** Fixed Paper/Plastic tube classification. Replaces paper_tube_type_id for new writes. */
+  tubeType: TubeType;
 }
 
 export interface CreateCostProductRequestRequest {
@@ -95,7 +168,14 @@ export interface CreateCostProductRequestRequest {
   targetPriceRange: string;
   urgencyLevel: string;
   neededByDate: string;
-  spec: SpecInput | undefined;
+  spec:
+    | SpecInput
+    | undefined;
+  /**
+   * Optional reviewer-facing hint pointing at a similar existing product master.
+   * 0 = unset.
+   */
+  referenceProductSysId: number;
 }
 
 export interface CreateCostProductRequestResponse {
@@ -132,7 +212,14 @@ export interface UpdateCostProductRequestRequest {
   targetPriceRange: string;
   urgencyLevel: string;
   neededByDate: string;
-  spec: SpecInput | undefined;
+  spec:
+    | SpecInput
+    | undefined;
+  /**
+   * Optional reviewer-facing hint pointing at a similar existing product master.
+   * 0 = unset.
+   */
+  referenceProductSysId: number;
 }
 
 export interface UpdateCostProductRequestResponse {
@@ -157,6 +244,92 @@ export interface ListCostProductRequestsResponse {
   pagination: PaginationResponse | undefined;
 }
 
+/**
+ * ExportCostProductRequestsRequest is the request for exporting cost product
+ * requests to Excel. Filters mirror ListCostProductRequestsRequest's subset
+ * relevant to export (no pagination/sort — export returns all matches).
+ */
+export interface ExportCostProductRequestsRequest {
+  search: string;
+  status: string;
+  requestTypeId: number;
+}
+
+/** ExportCostProductRequestsResponse is the response containing the Excel file. */
+export interface ExportCostProductRequestsResponse {
+  base:
+    | BaseResponse
+    | undefined;
+  /** Excel file content as bytes (.xlsx format). */
+  fileContent: Uint8Array;
+  /** Suggested filename. */
+  fileName: string;
+}
+
+/**
+ * ImportCostProductRequestsRequest is the request for importing cost product
+ * requests from Excel. Create-only: every row creates a new DRAFT request
+ * regardless of duplicate_action — the field is accepted for shape parity
+ * with other import RPCs but has no skip/update effect in v1.
+ */
+export interface ImportCostProductRequestsRequest {
+  /** Excel file content as bytes (.xlsx or .xls format). */
+  fileContent: Uint8Array;
+  /**
+   * Original filename (for format detection).
+   * Must be a simple filename without path separators.
+   */
+  fileName: string;
+  /**
+   * Accepted for shape parity with other import RPCs. Create-only: only
+   * "error" semantics apply (unresolvable rows fail with a row-level
+   * ImportError); there is no update/skip behavior in v1.
+   */
+  duplicateAction: string;
+}
+
+/**
+ * ImportCostProductRequestsResponse is the response for importing cost
+ * product requests. updated_count/skipped_count are always 0 in v1 since
+ * the import is create-only (kept for shape consistency with other imports).
+ */
+export interface ImportCostProductRequestsResponse {
+  base:
+    | BaseResponse
+    | undefined;
+  /** Number of successfully created DRAFT requests. */
+  successCount: number;
+  /** Always 0 in v1 (create-only import has no skip semantics). */
+  skippedCount: number;
+  /** Always 0 in v1 (create-only import has no update semantics). */
+  updatedCount: number;
+  /** Number of failed rows. */
+  failedCount: number;
+  /** Details of failed rows. */
+  errors: ImportError[];
+}
+
+/**
+ * GetCostProductRequestImportTemplateRequest is the request for downloading
+ * the Excel import template.
+ */
+export interface GetCostProductRequestImportTemplateRequest {
+}
+
+/**
+ * GetCostProductRequestImportTemplateResponse is the response containing the
+ * template file.
+ */
+export interface GetCostProductRequestImportTemplateResponse {
+  base:
+    | BaseResponse
+    | undefined;
+  /** Excel template file content as bytes (.xlsx format). */
+  fileContent: Uint8Array;
+  /** Suggested filename. */
+  fileName: string;
+}
+
 export interface SubmitCostProductRequestRequest {
   requestId: number;
 }
@@ -197,6 +370,32 @@ export interface DecideCostProductRequestFeasibilityResponse {
   data: CostProductRequest | undefined;
 }
 
+/**
+ * SubmitAndDecideCostProductRequest merges Submit + Start-review + Verify
+ * classification + Decide feasibility + (when feasible) Link route into a
+ * single action (design.md §3 B3). SUBMITTED and UNDER_REVIEW remain real
+ * internal states recorded in the audit trail; only one consolidated
+ * notification pair is emitted regardless of the feasibility outcome.
+ */
+export interface SubmitAndDecideCostProductRequestRequest {
+  requestId: number;
+  verifiedClassification: string;
+  overrideReason: string;
+  decision: string;
+  note: string;
+  /**
+   * reference_product_head_id is the route head resolved by RoutingResolver
+   * on the client before submitting; only applied when decision is FEASIBLE.
+   * 0 means no route was resolved (e.g. decision is NOT_FEASIBLE).
+   */
+  referenceProductHeadId: number;
+}
+
+export interface SubmitAndDecideCostProductRequestResponse {
+  base: BaseResponse | undefined;
+  data: CostProductRequest | undefined;
+}
+
 export interface UseExistingCostingForCostProductRequestRequest {
   requestId: number;
   /**
@@ -409,6 +608,8 @@ export interface ParamValueEntry {
   valueFlag: boolean;
   uomCode: string;
   isRequired: boolean;
+  displayGroup: string;
+  displayOrder: number;
 }
 
 /** FillLevelSummary groups params for one fill task level of a product. */
@@ -452,13 +653,15 @@ function createBaseCostProductSpec(): CostProductSpec {
     rawMaterialType: "",
     productDescription: "",
     shadeId: 0,
-    shadeCustomText: "",
+    shadeCode: "",
     paperTubeTypeId: 0,
     paperTubeLabel: "",
     weightPerBobbinKg: "",
     boxType: "",
     createdAt: "",
     createdBy: "",
+    shadeName: "",
+    tubeType: 0,
   };
 }
 
@@ -479,8 +682,8 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
     if (message.shadeId !== 0) {
       writer.uint32(40).int32(message.shadeId);
     }
-    if (message.shadeCustomText !== "") {
-      writer.uint32(50).string(message.shadeCustomText);
+    if (message.shadeCode !== "") {
+      writer.uint32(50).string(message.shadeCode);
     }
     if (message.paperTubeTypeId !== 0) {
       writer.uint32(56).int32(message.paperTubeTypeId);
@@ -500,6 +703,12 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
     if (message.createdBy !== "") {
       writer.uint32(98).string(message.createdBy);
     }
+    if (message.shadeName !== "") {
+      writer.uint32(106).string(message.shadeName);
+    }
+    if (message.tubeType !== 0) {
+      writer.uint32(112).int32(message.tubeType);
+    }
     return writer;
   },
 
@@ -555,7 +764,7 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
             break;
           }
 
-          message.shadeCustomText = reader.string();
+          message.shadeCode = reader.string();
           continue;
         }
         case 7: {
@@ -606,6 +815,22 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
           message.createdBy = reader.string();
           continue;
         }
+        case 13: {
+          if (tag !== 106) {
+            break;
+          }
+
+          message.shadeName = reader.string();
+          continue;
+        }
+        case 14: {
+          if (tag !== 112) {
+            break;
+          }
+
+          message.tubeType = reader.int32() as any;
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -642,10 +867,10 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
         : isSet(object.shade_id)
         ? globalThis.Number(object.shade_id)
         : 0,
-      shadeCustomText: isSet(object.shadeCustomText)
-        ? globalThis.String(object.shadeCustomText)
-        : isSet(object.shade_custom_text)
-        ? globalThis.String(object.shade_custom_text)
+      shadeCode: isSet(object.shadeCode)
+        ? globalThis.String(object.shadeCode)
+        : isSet(object.shade_code)
+        ? globalThis.String(object.shade_code)
         : "",
       paperTubeTypeId: isSet(object.paperTubeTypeId)
         ? globalThis.Number(object.paperTubeTypeId)
@@ -677,6 +902,16 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
         : isSet(object.created_by)
         ? globalThis.String(object.created_by)
         : "",
+      shadeName: isSet(object.shadeName)
+        ? globalThis.String(object.shadeName)
+        : isSet(object.shade_name)
+        ? globalThis.String(object.shade_name)
+        : "",
+      tubeType: isSet(object.tubeType)
+        ? tubeTypeFromJSON(object.tubeType)
+        : isSet(object.tube_type)
+        ? tubeTypeFromJSON(object.tube_type)
+        : 0,
     };
   },
 
@@ -697,8 +932,8 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
     if (message.shadeId !== 0) {
       obj.shadeId = Math.round(message.shadeId);
     }
-    if (message.shadeCustomText !== "") {
-      obj.shadeCustomText = message.shadeCustomText;
+    if (message.shadeCode !== "") {
+      obj.shadeCode = message.shadeCode;
     }
     if (message.paperTubeTypeId !== 0) {
       obj.paperTubeTypeId = Math.round(message.paperTubeTypeId);
@@ -718,6 +953,12 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
     if (message.createdBy !== "") {
       obj.createdBy = message.createdBy;
     }
+    if (message.shadeName !== "") {
+      obj.shadeName = message.shadeName;
+    }
+    if (message.tubeType !== 0) {
+      obj.tubeType = tubeTypeToJSON(message.tubeType);
+    }
     return obj;
   },
 
@@ -731,13 +972,15 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
     message.rawMaterialType = object.rawMaterialType ?? "";
     message.productDescription = object.productDescription ?? "";
     message.shadeId = object.shadeId ?? 0;
-    message.shadeCustomText = object.shadeCustomText ?? "";
+    message.shadeCode = object.shadeCode ?? "";
     message.paperTubeTypeId = object.paperTubeTypeId ?? 0;
     message.paperTubeLabel = object.paperTubeLabel ?? "";
     message.weightPerBobbinKg = object.weightPerBobbinKg ?? "";
     message.boxType = object.boxType ?? "";
     message.createdAt = object.createdAt ?? "";
     message.createdBy = object.createdBy ?? "";
+    message.shadeName = object.shadeName ?? "";
+    message.tubeType = object.tubeType ?? 0;
     return message;
   },
 };
@@ -774,6 +1017,7 @@ function createBaseCostProductRequest(): CostProductRequest {
     existingProductSysId: 0,
     linkedRouteHeadId: 0,
     wflInstanceId: "",
+    referenceProductSysId: 0,
   };
 }
 
@@ -869,6 +1113,9 @@ export const CostProductRequest: MessageFns<CostProductRequest> = {
     if (message.wflInstanceId !== "") {
       writer.uint32(242).string(message.wflInstanceId);
     }
+    if (message.referenceProductSysId !== 0) {
+      writer.uint32(248).int64(message.referenceProductSysId);
+    }
     return writer;
   },
 
@@ -1119,6 +1366,14 @@ export const CostProductRequest: MessageFns<CostProductRequest> = {
           message.wflInstanceId = reader.string();
           continue;
         }
+        case 31: {
+          if (tag !== 248) {
+            break;
+          }
+
+          message.referenceProductSysId = longToNumber(reader.int64());
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1260,6 +1515,11 @@ export const CostProductRequest: MessageFns<CostProductRequest> = {
         : isSet(object.wfl_instance_id)
         ? globalThis.String(object.wfl_instance_id)
         : "",
+      referenceProductSysId: isSet(object.referenceProductSysId)
+        ? globalThis.Number(object.referenceProductSysId)
+        : isSet(object.reference_product_sys_id)
+        ? globalThis.Number(object.reference_product_sys_id)
+        : 0,
     };
   },
 
@@ -1355,6 +1615,9 @@ export const CostProductRequest: MessageFns<CostProductRequest> = {
     if (message.wflInstanceId !== "") {
       obj.wflInstanceId = message.wflInstanceId;
     }
+    if (message.referenceProductSysId !== 0) {
+      obj.referenceProductSysId = Math.round(message.referenceProductSysId);
+    }
     return obj;
   },
 
@@ -1397,6 +1660,7 @@ export const CostProductRequest: MessageFns<CostProductRequest> = {
     message.existingProductSysId = object.existingProductSysId ?? 0;
     message.linkedRouteHeadId = object.linkedRouteHeadId ?? 0;
     message.wflInstanceId = object.wflInstanceId ?? "";
+    message.referenceProductSysId = object.referenceProductSysId ?? 0;
     return message;
   },
 };
@@ -1406,10 +1670,12 @@ function createBaseSpecInput(): SpecInput {
     rawMaterialType: "",
     productDescription: "",
     shadeId: 0,
-    shadeCustomText: "",
+    shadeCode: "",
     paperTubeTypeId: 0,
     weightPerBobbinKg: "",
     boxType: "",
+    shadeName: "",
+    tubeType: 0,
   };
 }
 
@@ -1424,8 +1690,8 @@ export const SpecInput: MessageFns<SpecInput> = {
     if (message.shadeId !== 0) {
       writer.uint32(24).int32(message.shadeId);
     }
-    if (message.shadeCustomText !== "") {
-      writer.uint32(34).string(message.shadeCustomText);
+    if (message.shadeCode !== "") {
+      writer.uint32(34).string(message.shadeCode);
     }
     if (message.paperTubeTypeId !== 0) {
       writer.uint32(40).int32(message.paperTubeTypeId);
@@ -1436,6 +1702,12 @@ export const SpecInput: MessageFns<SpecInput> = {
     if (message.boxType !== "") {
       writer.uint32(58).string(message.boxType);
     }
+    if (message.shadeName !== "") {
+      writer.uint32(66).string(message.shadeName);
+    }
+    if (message.tubeType !== 0) {
+      writer.uint32(72).int32(message.tubeType);
+    }
     return writer;
   },
 
@@ -1475,7 +1747,7 @@ export const SpecInput: MessageFns<SpecInput> = {
             break;
           }
 
-          message.shadeCustomText = reader.string();
+          message.shadeCode = reader.string();
           continue;
         }
         case 5: {
@@ -1502,6 +1774,22 @@ export const SpecInput: MessageFns<SpecInput> = {
           message.boxType = reader.string();
           continue;
         }
+        case 8: {
+          if (tag !== 66) {
+            break;
+          }
+
+          message.shadeName = reader.string();
+          continue;
+        }
+        case 9: {
+          if (tag !== 72) {
+            break;
+          }
+
+          message.tubeType = reader.int32() as any;
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1528,10 +1816,10 @@ export const SpecInput: MessageFns<SpecInput> = {
         : isSet(object.shade_id)
         ? globalThis.Number(object.shade_id)
         : 0,
-      shadeCustomText: isSet(object.shadeCustomText)
-        ? globalThis.String(object.shadeCustomText)
-        : isSet(object.shade_custom_text)
-        ? globalThis.String(object.shade_custom_text)
+      shadeCode: isSet(object.shadeCode)
+        ? globalThis.String(object.shadeCode)
+        : isSet(object.shade_code)
+        ? globalThis.String(object.shade_code)
         : "",
       paperTubeTypeId: isSet(object.paperTubeTypeId)
         ? globalThis.Number(object.paperTubeTypeId)
@@ -1548,6 +1836,16 @@ export const SpecInput: MessageFns<SpecInput> = {
         : isSet(object.box_type)
         ? globalThis.String(object.box_type)
         : "",
+      shadeName: isSet(object.shadeName)
+        ? globalThis.String(object.shadeName)
+        : isSet(object.shade_name)
+        ? globalThis.String(object.shade_name)
+        : "",
+      tubeType: isSet(object.tubeType)
+        ? tubeTypeFromJSON(object.tubeType)
+        : isSet(object.tube_type)
+        ? tubeTypeFromJSON(object.tube_type)
+        : 0,
     };
   },
 
@@ -1562,8 +1860,8 @@ export const SpecInput: MessageFns<SpecInput> = {
     if (message.shadeId !== 0) {
       obj.shadeId = Math.round(message.shadeId);
     }
-    if (message.shadeCustomText !== "") {
-      obj.shadeCustomText = message.shadeCustomText;
+    if (message.shadeCode !== "") {
+      obj.shadeCode = message.shadeCode;
     }
     if (message.paperTubeTypeId !== 0) {
       obj.paperTubeTypeId = Math.round(message.paperTubeTypeId);
@@ -1574,6 +1872,12 @@ export const SpecInput: MessageFns<SpecInput> = {
     if (message.boxType !== "") {
       obj.boxType = message.boxType;
     }
+    if (message.shadeName !== "") {
+      obj.shadeName = message.shadeName;
+    }
+    if (message.tubeType !== 0) {
+      obj.tubeType = tubeTypeToJSON(message.tubeType);
+    }
     return obj;
   },
 
@@ -1585,10 +1889,12 @@ export const SpecInput: MessageFns<SpecInput> = {
     message.rawMaterialType = object.rawMaterialType ?? "";
     message.productDescription = object.productDescription ?? "";
     message.shadeId = object.shadeId ?? 0;
-    message.shadeCustomText = object.shadeCustomText ?? "";
+    message.shadeCode = object.shadeCode ?? "";
     message.paperTubeTypeId = object.paperTubeTypeId ?? 0;
     message.weightPerBobbinKg = object.weightPerBobbinKg ?? "";
     message.boxType = object.boxType ?? "";
+    message.shadeName = object.shadeName ?? "";
+    message.tubeType = object.tubeType ?? 0;
     return message;
   },
 };
@@ -1606,6 +1912,7 @@ function createBaseCreateCostProductRequestRequest(): CreateCostProductRequestRe
     urgencyLevel: "",
     neededByDate: "",
     spec: undefined,
+    referenceProductSysId: 0,
   };
 }
 
@@ -1644,6 +1951,9 @@ export const CreateCostProductRequestRequest: MessageFns<CreateCostProductReques
     if (message.spec !== undefined) {
       SpecInput.encode(message.spec, writer.uint32(90).fork()).join();
     }
+    if (message.referenceProductSysId !== 0) {
+      writer.uint32(96).int64(message.referenceProductSysId);
+    }
     return writer;
   },
 
@@ -1742,6 +2052,14 @@ export const CreateCostProductRequestRequest: MessageFns<CreateCostProductReques
           message.spec = SpecInput.decode(reader, reader.uint32());
           continue;
         }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.referenceProductSysId = longToNumber(reader.int64());
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1796,6 +2114,11 @@ export const CreateCostProductRequestRequest: MessageFns<CreateCostProductReques
         ? globalThis.String(object.needed_by_date)
         : "",
       spec: isSet(object.spec) ? SpecInput.fromJSON(object.spec) : undefined,
+      referenceProductSysId: isSet(object.referenceProductSysId)
+        ? globalThis.Number(object.referenceProductSysId)
+        : isSet(object.reference_product_sys_id)
+        ? globalThis.Number(object.reference_product_sys_id)
+        : 0,
     };
   },
 
@@ -1834,6 +2157,9 @@ export const CreateCostProductRequestRequest: MessageFns<CreateCostProductReques
     if (message.spec !== undefined) {
       obj.spec = SpecInput.toJSON(message.spec);
     }
+    if (message.referenceProductSysId !== 0) {
+      obj.referenceProductSysId = Math.round(message.referenceProductSysId);
+    }
     return obj;
   },
 
@@ -1853,6 +2179,7 @@ export const CreateCostProductRequestRequest: MessageFns<CreateCostProductReques
     message.urgencyLevel = object.urgencyLevel ?? "";
     message.neededByDate = object.neededByDate ?? "";
     message.spec = (object.spec !== undefined && object.spec !== null) ? SpecInput.fromPartial(object.spec) : undefined;
+    message.referenceProductSysId = object.referenceProductSysId ?? 0;
     return message;
   },
 };
@@ -2238,6 +2565,7 @@ function createBaseUpdateCostProductRequestRequest(): UpdateCostProductRequestRe
     urgencyLevel: "",
     neededByDate: "",
     spec: undefined,
+    referenceProductSysId: 0,
   };
 }
 
@@ -2276,6 +2604,9 @@ export const UpdateCostProductRequestRequest: MessageFns<UpdateCostProductReques
     if (message.spec !== undefined) {
       SpecInput.encode(message.spec, writer.uint32(90).fork()).join();
     }
+    if (message.referenceProductSysId !== 0) {
+      writer.uint32(96).int64(message.referenceProductSysId);
+    }
     return writer;
   },
 
@@ -2374,6 +2705,14 @@ export const UpdateCostProductRequestRequest: MessageFns<UpdateCostProductReques
           message.spec = SpecInput.decode(reader, reader.uint32());
           continue;
         }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.referenceProductSysId = longToNumber(reader.int64());
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -2428,6 +2767,11 @@ export const UpdateCostProductRequestRequest: MessageFns<UpdateCostProductReques
         ? globalThis.String(object.needed_by_date)
         : "",
       spec: isSet(object.spec) ? SpecInput.fromJSON(object.spec) : undefined,
+      referenceProductSysId: isSet(object.referenceProductSysId)
+        ? globalThis.Number(object.referenceProductSysId)
+        : isSet(object.reference_product_sys_id)
+        ? globalThis.Number(object.reference_product_sys_id)
+        : 0,
     };
   },
 
@@ -2466,6 +2810,9 @@ export const UpdateCostProductRequestRequest: MessageFns<UpdateCostProductReques
     if (message.spec !== undefined) {
       obj.spec = SpecInput.toJSON(message.spec);
     }
+    if (message.referenceProductSysId !== 0) {
+      obj.referenceProductSysId = Math.round(message.referenceProductSysId);
+    }
     return obj;
   },
 
@@ -2485,6 +2832,7 @@ export const UpdateCostProductRequestRequest: MessageFns<UpdateCostProductReques
     message.urgencyLevel = object.urgencyLevel ?? "";
     message.neededByDate = object.neededByDate ?? "";
     message.spec = (object.spec !== undefined && object.spec !== null) ? SpecInput.fromPartial(object.spec) : undefined;
+    message.referenceProductSysId = object.referenceProductSysId ?? 0;
     return message;
   },
 };
@@ -2838,32 +3186,644 @@ export const ListCostProductRequestsResponse: MessageFns<ListCostProductRequests
     };
   },
 
-  toJSON(message: ListCostProductRequestsResponse): unknown {
+  toJSON(message: ListCostProductRequestsResponse): unknown {
+    const obj: any = {};
+    if (message.base !== undefined) {
+      obj.base = BaseResponse.toJSON(message.base);
+    }
+    if (message.data?.length) {
+      obj.data = message.data.map((e) => CostProductRequest.toJSON(e));
+    }
+    if (message.pagination !== undefined) {
+      obj.pagination = PaginationResponse.toJSON(message.pagination);
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<ListCostProductRequestsResponse>): ListCostProductRequestsResponse {
+    return ListCostProductRequestsResponse.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<ListCostProductRequestsResponse>): ListCostProductRequestsResponse {
+    const message = createBaseListCostProductRequestsResponse();
+    message.base = (object.base !== undefined && object.base !== null)
+      ? BaseResponse.fromPartial(object.base)
+      : undefined;
+    message.data = object.data?.map((e) => CostProductRequest.fromPartial(e)) || [];
+    message.pagination = (object.pagination !== undefined && object.pagination !== null)
+      ? PaginationResponse.fromPartial(object.pagination)
+      : undefined;
+    return message;
+  },
+};
+
+function createBaseExportCostProductRequestsRequest(): ExportCostProductRequestsRequest {
+  return { search: "", status: "", requestTypeId: 0 };
+}
+
+export const ExportCostProductRequestsRequest: MessageFns<ExportCostProductRequestsRequest> = {
+  encode(message: ExportCostProductRequestsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.search !== "") {
+      writer.uint32(10).string(message.search);
+    }
+    if (message.status !== "") {
+      writer.uint32(18).string(message.status);
+    }
+    if (message.requestTypeId !== 0) {
+      writer.uint32(24).int32(message.requestTypeId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ExportCostProductRequestsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseExportCostProductRequestsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.search = reader.string();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.status = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.requestTypeId = reader.int32();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ExportCostProductRequestsRequest {
+    return {
+      search: isSet(object.search) ? globalThis.String(object.search) : "",
+      status: isSet(object.status) ? globalThis.String(object.status) : "",
+      requestTypeId: isSet(object.requestTypeId)
+        ? globalThis.Number(object.requestTypeId)
+        : isSet(object.request_type_id)
+        ? globalThis.Number(object.request_type_id)
+        : 0,
+    };
+  },
+
+  toJSON(message: ExportCostProductRequestsRequest): unknown {
+    const obj: any = {};
+    if (message.search !== "") {
+      obj.search = message.search;
+    }
+    if (message.status !== "") {
+      obj.status = message.status;
+    }
+    if (message.requestTypeId !== 0) {
+      obj.requestTypeId = Math.round(message.requestTypeId);
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<ExportCostProductRequestsRequest>): ExportCostProductRequestsRequest {
+    return ExportCostProductRequestsRequest.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<ExportCostProductRequestsRequest>): ExportCostProductRequestsRequest {
+    const message = createBaseExportCostProductRequestsRequest();
+    message.search = object.search ?? "";
+    message.status = object.status ?? "";
+    message.requestTypeId = object.requestTypeId ?? 0;
+    return message;
+  },
+};
+
+function createBaseExportCostProductRequestsResponse(): ExportCostProductRequestsResponse {
+  return { base: undefined, fileContent: new Uint8Array(0), fileName: "" };
+}
+
+export const ExportCostProductRequestsResponse: MessageFns<ExportCostProductRequestsResponse> = {
+  encode(message: ExportCostProductRequestsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.base !== undefined) {
+      BaseResponse.encode(message.base, writer.uint32(10).fork()).join();
+    }
+    if (message.fileContent.length !== 0) {
+      writer.uint32(18).bytes(message.fileContent);
+    }
+    if (message.fileName !== "") {
+      writer.uint32(26).string(message.fileName);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ExportCostProductRequestsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseExportCostProductRequestsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.base = BaseResponse.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.fileContent = reader.bytes();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.fileName = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ExportCostProductRequestsResponse {
+    return {
+      base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
+      fileContent: isSet(object.fileContent)
+        ? bytesFromBase64(object.fileContent)
+        : isSet(object.file_content)
+        ? bytesFromBase64(object.file_content)
+        : new Uint8Array(0),
+      fileName: isSet(object.fileName)
+        ? globalThis.String(object.fileName)
+        : isSet(object.file_name)
+        ? globalThis.String(object.file_name)
+        : "",
+    };
+  },
+
+  toJSON(message: ExportCostProductRequestsResponse): unknown {
+    const obj: any = {};
+    if (message.base !== undefined) {
+      obj.base = BaseResponse.toJSON(message.base);
+    }
+    if (message.fileContent.length !== 0) {
+      obj.fileContent = base64FromBytes(message.fileContent);
+    }
+    if (message.fileName !== "") {
+      obj.fileName = message.fileName;
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<ExportCostProductRequestsResponse>): ExportCostProductRequestsResponse {
+    return ExportCostProductRequestsResponse.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<ExportCostProductRequestsResponse>): ExportCostProductRequestsResponse {
+    const message = createBaseExportCostProductRequestsResponse();
+    message.base = (object.base !== undefined && object.base !== null)
+      ? BaseResponse.fromPartial(object.base)
+      : undefined;
+    message.fileContent = object.fileContent ?? new Uint8Array(0);
+    message.fileName = object.fileName ?? "";
+    return message;
+  },
+};
+
+function createBaseImportCostProductRequestsRequest(): ImportCostProductRequestsRequest {
+  return { fileContent: new Uint8Array(0), fileName: "", duplicateAction: "" };
+}
+
+export const ImportCostProductRequestsRequest: MessageFns<ImportCostProductRequestsRequest> = {
+  encode(message: ImportCostProductRequestsRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.fileContent.length !== 0) {
+      writer.uint32(10).bytes(message.fileContent);
+    }
+    if (message.fileName !== "") {
+      writer.uint32(18).string(message.fileName);
+    }
+    if (message.duplicateAction !== "") {
+      writer.uint32(26).string(message.duplicateAction);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ImportCostProductRequestsRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseImportCostProductRequestsRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.fileContent = reader.bytes();
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.fileName = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.duplicateAction = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ImportCostProductRequestsRequest {
+    return {
+      fileContent: isSet(object.fileContent)
+        ? bytesFromBase64(object.fileContent)
+        : isSet(object.file_content)
+        ? bytesFromBase64(object.file_content)
+        : new Uint8Array(0),
+      fileName: isSet(object.fileName)
+        ? globalThis.String(object.fileName)
+        : isSet(object.file_name)
+        ? globalThis.String(object.file_name)
+        : "",
+      duplicateAction: isSet(object.duplicateAction)
+        ? globalThis.String(object.duplicateAction)
+        : isSet(object.duplicate_action)
+        ? globalThis.String(object.duplicate_action)
+        : "",
+    };
+  },
+
+  toJSON(message: ImportCostProductRequestsRequest): unknown {
+    const obj: any = {};
+    if (message.fileContent.length !== 0) {
+      obj.fileContent = base64FromBytes(message.fileContent);
+    }
+    if (message.fileName !== "") {
+      obj.fileName = message.fileName;
+    }
+    if (message.duplicateAction !== "") {
+      obj.duplicateAction = message.duplicateAction;
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<ImportCostProductRequestsRequest>): ImportCostProductRequestsRequest {
+    return ImportCostProductRequestsRequest.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<ImportCostProductRequestsRequest>): ImportCostProductRequestsRequest {
+    const message = createBaseImportCostProductRequestsRequest();
+    message.fileContent = object.fileContent ?? new Uint8Array(0);
+    message.fileName = object.fileName ?? "";
+    message.duplicateAction = object.duplicateAction ?? "";
+    return message;
+  },
+};
+
+function createBaseImportCostProductRequestsResponse(): ImportCostProductRequestsResponse {
+  return { base: undefined, successCount: 0, skippedCount: 0, updatedCount: 0, failedCount: 0, errors: [] };
+}
+
+export const ImportCostProductRequestsResponse: MessageFns<ImportCostProductRequestsResponse> = {
+  encode(message: ImportCostProductRequestsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.base !== undefined) {
+      BaseResponse.encode(message.base, writer.uint32(10).fork()).join();
+    }
+    if (message.successCount !== 0) {
+      writer.uint32(16).int32(message.successCount);
+    }
+    if (message.skippedCount !== 0) {
+      writer.uint32(24).int32(message.skippedCount);
+    }
+    if (message.updatedCount !== 0) {
+      writer.uint32(32).int32(message.updatedCount);
+    }
+    if (message.failedCount !== 0) {
+      writer.uint32(40).int32(message.failedCount);
+    }
+    for (const v of message.errors) {
+      ImportError.encode(v!, writer.uint32(50).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ImportCostProductRequestsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseImportCostProductRequestsResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.base = BaseResponse.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 16) {
+            break;
+          }
+
+          message.successCount = reader.int32();
+          continue;
+        }
+        case 3: {
+          if (tag !== 24) {
+            break;
+          }
+
+          message.skippedCount = reader.int32();
+          continue;
+        }
+        case 4: {
+          if (tag !== 32) {
+            break;
+          }
+
+          message.updatedCount = reader.int32();
+          continue;
+        }
+        case 5: {
+          if (tag !== 40) {
+            break;
+          }
+
+          message.failedCount = reader.int32();
+          continue;
+        }
+        case 6: {
+          if (tag !== 50) {
+            break;
+          }
+
+          message.errors.push(ImportError.decode(reader, reader.uint32()));
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ImportCostProductRequestsResponse {
+    return {
+      base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
+      successCount: isSet(object.successCount)
+        ? globalThis.Number(object.successCount)
+        : isSet(object.success_count)
+        ? globalThis.Number(object.success_count)
+        : 0,
+      skippedCount: isSet(object.skippedCount)
+        ? globalThis.Number(object.skippedCount)
+        : isSet(object.skipped_count)
+        ? globalThis.Number(object.skipped_count)
+        : 0,
+      updatedCount: isSet(object.updatedCount)
+        ? globalThis.Number(object.updatedCount)
+        : isSet(object.updated_count)
+        ? globalThis.Number(object.updated_count)
+        : 0,
+      failedCount: isSet(object.failedCount)
+        ? globalThis.Number(object.failedCount)
+        : isSet(object.failed_count)
+        ? globalThis.Number(object.failed_count)
+        : 0,
+      errors: globalThis.Array.isArray(object?.errors)
+        ? object.errors.map((e: any) => ImportError.fromJSON(e))
+        : [],
+    };
+  },
+
+  toJSON(message: ImportCostProductRequestsResponse): unknown {
+    const obj: any = {};
+    if (message.base !== undefined) {
+      obj.base = BaseResponse.toJSON(message.base);
+    }
+    if (message.successCount !== 0) {
+      obj.successCount = Math.round(message.successCount);
+    }
+    if (message.skippedCount !== 0) {
+      obj.skippedCount = Math.round(message.skippedCount);
+    }
+    if (message.updatedCount !== 0) {
+      obj.updatedCount = Math.round(message.updatedCount);
+    }
+    if (message.failedCount !== 0) {
+      obj.failedCount = Math.round(message.failedCount);
+    }
+    if (message.errors?.length) {
+      obj.errors = message.errors.map((e) => ImportError.toJSON(e));
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<ImportCostProductRequestsResponse>): ImportCostProductRequestsResponse {
+    return ImportCostProductRequestsResponse.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<ImportCostProductRequestsResponse>): ImportCostProductRequestsResponse {
+    const message = createBaseImportCostProductRequestsResponse();
+    message.base = (object.base !== undefined && object.base !== null)
+      ? BaseResponse.fromPartial(object.base)
+      : undefined;
+    message.successCount = object.successCount ?? 0;
+    message.skippedCount = object.skippedCount ?? 0;
+    message.updatedCount = object.updatedCount ?? 0;
+    message.failedCount = object.failedCount ?? 0;
+    message.errors = object.errors?.map((e) => ImportError.fromPartial(e)) || [];
+    return message;
+  },
+};
+
+function createBaseGetCostProductRequestImportTemplateRequest(): GetCostProductRequestImportTemplateRequest {
+  return {};
+}
+
+export const GetCostProductRequestImportTemplateRequest: MessageFns<GetCostProductRequestImportTemplateRequest> = {
+  encode(_: GetCostProductRequestImportTemplateRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetCostProductRequestImportTemplateRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetCostProductRequestImportTemplateRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(_: any): GetCostProductRequestImportTemplateRequest {
+    return {};
+  },
+
+  toJSON(_: GetCostProductRequestImportTemplateRequest): unknown {
+    const obj: any = {};
+    return obj;
+  },
+
+  create(base?: DeepPartial<GetCostProductRequestImportTemplateRequest>): GetCostProductRequestImportTemplateRequest {
+    return GetCostProductRequestImportTemplateRequest.fromPartial(base ?? {});
+  },
+  fromPartial(_: DeepPartial<GetCostProductRequestImportTemplateRequest>): GetCostProductRequestImportTemplateRequest {
+    const message = createBaseGetCostProductRequestImportTemplateRequest();
+    return message;
+  },
+};
+
+function createBaseGetCostProductRequestImportTemplateResponse(): GetCostProductRequestImportTemplateResponse {
+  return { base: undefined, fileContent: new Uint8Array(0), fileName: "" };
+}
+
+export const GetCostProductRequestImportTemplateResponse: MessageFns<GetCostProductRequestImportTemplateResponse> = {
+  encode(
+    message: GetCostProductRequestImportTemplateResponse,
+    writer: BinaryWriter = new BinaryWriter(),
+  ): BinaryWriter {
+    if (message.base !== undefined) {
+      BaseResponse.encode(message.base, writer.uint32(10).fork()).join();
+    }
+    if (message.fileContent.length !== 0) {
+      writer.uint32(18).bytes(message.fileContent);
+    }
+    if (message.fileName !== "") {
+      writer.uint32(26).string(message.fileName);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): GetCostProductRequestImportTemplateResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseGetCostProductRequestImportTemplateResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.base = BaseResponse.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.fileContent = reader.bytes();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.fileName = reader.string();
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): GetCostProductRequestImportTemplateResponse {
+    return {
+      base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
+      fileContent: isSet(object.fileContent)
+        ? bytesFromBase64(object.fileContent)
+        : isSet(object.file_content)
+        ? bytesFromBase64(object.file_content)
+        : new Uint8Array(0),
+      fileName: isSet(object.fileName)
+        ? globalThis.String(object.fileName)
+        : isSet(object.file_name)
+        ? globalThis.String(object.file_name)
+        : "",
+    };
+  },
+
+  toJSON(message: GetCostProductRequestImportTemplateResponse): unknown {
     const obj: any = {};
     if (message.base !== undefined) {
       obj.base = BaseResponse.toJSON(message.base);
     }
-    if (message.data?.length) {
-      obj.data = message.data.map((e) => CostProductRequest.toJSON(e));
+    if (message.fileContent.length !== 0) {
+      obj.fileContent = base64FromBytes(message.fileContent);
     }
-    if (message.pagination !== undefined) {
-      obj.pagination = PaginationResponse.toJSON(message.pagination);
+    if (message.fileName !== "") {
+      obj.fileName = message.fileName;
     }
     return obj;
   },
 
-  create(base?: DeepPartial<ListCostProductRequestsResponse>): ListCostProductRequestsResponse {
-    return ListCostProductRequestsResponse.fromPartial(base ?? {});
+  create(base?: DeepPartial<GetCostProductRequestImportTemplateResponse>): GetCostProductRequestImportTemplateResponse {
+    return GetCostProductRequestImportTemplateResponse.fromPartial(base ?? {});
   },
-  fromPartial(object: DeepPartial<ListCostProductRequestsResponse>): ListCostProductRequestsResponse {
-    const message = createBaseListCostProductRequestsResponse();
+  fromPartial(
+    object: DeepPartial<GetCostProductRequestImportTemplateResponse>,
+  ): GetCostProductRequestImportTemplateResponse {
+    const message = createBaseGetCostProductRequestImportTemplateResponse();
     message.base = (object.base !== undefined && object.base !== null)
       ? BaseResponse.fromPartial(object.base)
       : undefined;
-    message.data = object.data?.map((e) => CostProductRequest.fromPartial(e)) || [];
-    message.pagination = (object.pagination !== undefined && object.pagination !== null)
-      ? PaginationResponse.fromPartial(object.pagination)
-      : undefined;
+    message.fileContent = object.fileContent ?? new Uint8Array(0);
+    message.fileName = object.fileName ?? "";
     return message;
   },
 };
@@ -3540,6 +4500,251 @@ export const DecideCostProductRequestFeasibilityResponse: MessageFns<DecideCostP
   },
 };
 
+function createBaseSubmitAndDecideCostProductRequestRequest(): SubmitAndDecideCostProductRequestRequest {
+  return {
+    requestId: 0,
+    verifiedClassification: "",
+    overrideReason: "",
+    decision: "",
+    note: "",
+    referenceProductHeadId: 0,
+  };
+}
+
+export const SubmitAndDecideCostProductRequestRequest: MessageFns<SubmitAndDecideCostProductRequestRequest> = {
+  encode(message: SubmitAndDecideCostProductRequestRequest, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.requestId !== 0) {
+      writer.uint32(8).int64(message.requestId);
+    }
+    if (message.verifiedClassification !== "") {
+      writer.uint32(18).string(message.verifiedClassification);
+    }
+    if (message.overrideReason !== "") {
+      writer.uint32(26).string(message.overrideReason);
+    }
+    if (message.decision !== "") {
+      writer.uint32(34).string(message.decision);
+    }
+    if (message.note !== "") {
+      writer.uint32(42).string(message.note);
+    }
+    if (message.referenceProductHeadId !== 0) {
+      writer.uint32(48).int64(message.referenceProductHeadId);
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): SubmitAndDecideCostProductRequestRequest {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseSubmitAndDecideCostProductRequestRequest();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 8) {
+            break;
+          }
+
+          message.requestId = longToNumber(reader.int64());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.verifiedClassification = reader.string();
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.overrideReason = reader.string();
+          continue;
+        }
+        case 4: {
+          if (tag !== 34) {
+            break;
+          }
+
+          message.decision = reader.string();
+          continue;
+        }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.note = reader.string();
+          continue;
+        }
+        case 6: {
+          if (tag !== 48) {
+            break;
+          }
+
+          message.referenceProductHeadId = longToNumber(reader.int64());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): SubmitAndDecideCostProductRequestRequest {
+    return {
+      requestId: isSet(object.requestId)
+        ? globalThis.Number(object.requestId)
+        : isSet(object.request_id)
+        ? globalThis.Number(object.request_id)
+        : 0,
+      verifiedClassification: isSet(object.verifiedClassification)
+        ? globalThis.String(object.verifiedClassification)
+        : isSet(object.verified_classification)
+        ? globalThis.String(object.verified_classification)
+        : "",
+      overrideReason: isSet(object.overrideReason)
+        ? globalThis.String(object.overrideReason)
+        : isSet(object.override_reason)
+        ? globalThis.String(object.override_reason)
+        : "",
+      decision: isSet(object.decision) ? globalThis.String(object.decision) : "",
+      note: isSet(object.note) ? globalThis.String(object.note) : "",
+      referenceProductHeadId: isSet(object.referenceProductHeadId)
+        ? globalThis.Number(object.referenceProductHeadId)
+        : isSet(object.reference_product_head_id)
+        ? globalThis.Number(object.reference_product_head_id)
+        : 0,
+    };
+  },
+
+  toJSON(message: SubmitAndDecideCostProductRequestRequest): unknown {
+    const obj: any = {};
+    if (message.requestId !== 0) {
+      obj.requestId = Math.round(message.requestId);
+    }
+    if (message.verifiedClassification !== "") {
+      obj.verifiedClassification = message.verifiedClassification;
+    }
+    if (message.overrideReason !== "") {
+      obj.overrideReason = message.overrideReason;
+    }
+    if (message.decision !== "") {
+      obj.decision = message.decision;
+    }
+    if (message.note !== "") {
+      obj.note = message.note;
+    }
+    if (message.referenceProductHeadId !== 0) {
+      obj.referenceProductHeadId = Math.round(message.referenceProductHeadId);
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<SubmitAndDecideCostProductRequestRequest>): SubmitAndDecideCostProductRequestRequest {
+    return SubmitAndDecideCostProductRequestRequest.fromPartial(base ?? {});
+  },
+  fromPartial(object: DeepPartial<SubmitAndDecideCostProductRequestRequest>): SubmitAndDecideCostProductRequestRequest {
+    const message = createBaseSubmitAndDecideCostProductRequestRequest();
+    message.requestId = object.requestId ?? 0;
+    message.verifiedClassification = object.verifiedClassification ?? "";
+    message.overrideReason = object.overrideReason ?? "";
+    message.decision = object.decision ?? "";
+    message.note = object.note ?? "";
+    message.referenceProductHeadId = object.referenceProductHeadId ?? 0;
+    return message;
+  },
+};
+
+function createBaseSubmitAndDecideCostProductRequestResponse(): SubmitAndDecideCostProductRequestResponse {
+  return { base: undefined, data: undefined };
+}
+
+export const SubmitAndDecideCostProductRequestResponse: MessageFns<SubmitAndDecideCostProductRequestResponse> = {
+  encode(message: SubmitAndDecideCostProductRequestResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.base !== undefined) {
+      BaseResponse.encode(message.base, writer.uint32(10).fork()).join();
+    }
+    if (message.data !== undefined) {
+      CostProductRequest.encode(message.data, writer.uint32(18).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): SubmitAndDecideCostProductRequestResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseSubmitAndDecideCostProductRequestResponse();
+    while (reader.pos < end) {
+      const tag = reader.uint32();
+      switch (tag >>> 3) {
+        case 1: {
+          if (tag !== 10) {
+            break;
+          }
+
+          message.base = BaseResponse.decode(reader, reader.uint32());
+          continue;
+        }
+        case 2: {
+          if (tag !== 18) {
+            break;
+          }
+
+          message.data = CostProductRequest.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): SubmitAndDecideCostProductRequestResponse {
+    return {
+      base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
+      data: isSet(object.data) ? CostProductRequest.fromJSON(object.data) : undefined,
+    };
+  },
+
+  toJSON(message: SubmitAndDecideCostProductRequestResponse): unknown {
+    const obj: any = {};
+    if (message.base !== undefined) {
+      obj.base = BaseResponse.toJSON(message.base);
+    }
+    if (message.data !== undefined) {
+      obj.data = CostProductRequest.toJSON(message.data);
+    }
+    return obj;
+  },
+
+  create(base?: DeepPartial<SubmitAndDecideCostProductRequestResponse>): SubmitAndDecideCostProductRequestResponse {
+    return SubmitAndDecideCostProductRequestResponse.fromPartial(base ?? {});
+  },
+  fromPartial(
+    object: DeepPartial<SubmitAndDecideCostProductRequestResponse>,
+  ): SubmitAndDecideCostProductRequestResponse {
+    const message = createBaseSubmitAndDecideCostProductRequestResponse();
+    message.base = (object.base !== undefined && object.base !== null)
+      ? BaseResponse.fromPartial(object.base)
+      : undefined;
+    message.data = (object.data !== undefined && object.data !== null)
+      ? CostProductRequest.fromPartial(object.data)
+      : undefined;
+    return message;
+  },
+};
+
 function createBaseUseExistingCostingForCostProductRequestRequest(): UseExistingCostingForCostProductRequestRequest {
   return { requestId: 0, existingProductSysId: 0 };
 }
@@ -6198,6 +7403,8 @@ function createBaseParamValueEntry(): ParamValueEntry {
     valueFlag: false,
     uomCode: "",
     isRequired: false,
+    displayGroup: "",
+    displayOrder: 0,
   };
 }
 
@@ -6233,6 +7440,12 @@ export const ParamValueEntry: MessageFns<ParamValueEntry> = {
     if (message.isRequired !== false) {
       writer.uint32(80).bool(message.isRequired);
     }
+    if (message.displayGroup !== "") {
+      writer.uint32(90).string(message.displayGroup);
+    }
+    if (message.displayOrder !== 0) {
+      writer.uint32(96).int32(message.displayOrder);
+    }
     return writer;
   },
 
@@ -6323,6 +7536,22 @@ export const ParamValueEntry: MessageFns<ParamValueEntry> = {
           message.isRequired = reader.bool();
           continue;
         }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.displayGroup = reader.string();
+          continue;
+        }
+        case 12: {
+          if (tag !== 96) {
+            break;
+          }
+
+          message.displayOrder = reader.int32();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -6384,6 +7613,16 @@ export const ParamValueEntry: MessageFns<ParamValueEntry> = {
         : isSet(object.is_required)
         ? globalThis.Boolean(object.is_required)
         : false,
+      displayGroup: isSet(object.displayGroup)
+        ? globalThis.String(object.displayGroup)
+        : isSet(object.display_group)
+        ? globalThis.String(object.display_group)
+        : "",
+      displayOrder: isSet(object.displayOrder)
+        ? globalThis.Number(object.displayOrder)
+        : isSet(object.display_order)
+        ? globalThis.Number(object.display_order)
+        : 0,
     };
   },
 
@@ -6419,6 +7658,12 @@ export const ParamValueEntry: MessageFns<ParamValueEntry> = {
     if (message.isRequired !== false) {
       obj.isRequired = message.isRequired;
     }
+    if (message.displayGroup !== "") {
+      obj.displayGroup = message.displayGroup;
+    }
+    if (message.displayOrder !== 0) {
+      obj.displayOrder = Math.round(message.displayOrder);
+    }
     return obj;
   },
 
@@ -6437,6 +7682,8 @@ export const ParamValueEntry: MessageFns<ParamValueEntry> = {
     message.valueFlag = object.valueFlag ?? false;
     message.uomCode = object.uomCode ?? "";
     message.isRequired = object.isRequired ?? false;
+    message.displayGroup = object.displayGroup ?? "";
+    message.displayOrder = object.displayOrder ?? 0;
     return message;
   },
 };
@@ -7056,6 +8303,19 @@ export const CostProductRequestServiceDefinition = {
       responseStream: false,
       options: {},
     },
+    /**
+     * SubmitAndDecideCostProductRequest merges Submit + Start-review + Verify
+     * classification + Decide feasibility + (when feasible) Link route into a
+     * single action (design.md §3 B3).
+     */
+    submitAndDecideCostProductRequest: {
+      name: "SubmitAndDecideCostProductRequest",
+      requestType: SubmitAndDecideCostProductRequestRequest,
+      requestStream: false,
+      responseType: SubmitAndDecideCostProductRequestResponse,
+      responseStream: false,
+      options: {},
+    },
     useExistingCostingForCostProductRequest: {
       name: "UseExistingCostingForCostProductRequest",
       requestType: UseExistingCostingForCostProductRequestRequest,
@@ -7206,9 +8466,64 @@ export const CostProductRequestServiceDefinition = {
       responseStream: false,
       options: {},
     },
+    /** ExportCostProductRequests exports cost product requests to Excel file. */
+    exportCostProductRequests: {
+      name: "ExportCostProductRequests",
+      requestType: ExportCostProductRequestsRequest,
+      requestStream: false,
+      responseType: ExportCostProductRequestsResponse,
+      responseStream: false,
+      options: {},
+    },
+    /**
+     * ImportCostProductRequests imports cost product requests from Excel file.
+     * Create-only: every row creates a new DRAFT request, no dedup/merge.
+     */
+    importCostProductRequests: {
+      name: "ImportCostProductRequests",
+      requestType: ImportCostProductRequestsRequest,
+      requestStream: false,
+      responseType: ImportCostProductRequestsResponse,
+      responseStream: false,
+      options: {},
+    },
+    /** GetCostProductRequestImportTemplate downloads the Excel import template. */
+    getCostProductRequestImportTemplate: {
+      name: "GetCostProductRequestImportTemplate",
+      requestType: GetCostProductRequestImportTemplateRequest,
+      requestStream: false,
+      responseType: GetCostProductRequestImportTemplateResponse,
+      responseStream: false,
+      options: {},
+    },
   },
 } as const;
 
+function bytesFromBase64(b64: string): Uint8Array {
+  if ((globalThis as any).Buffer) {
+    return Uint8Array.from(globalThis.Buffer.from(b64, "base64"));
+  } else {
+    const bin = globalThis.atob(b64);
+    const arr = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; ++i) {
+      arr[i] = bin.charCodeAt(i);
+    }
+    return arr;
+  }
+}
+
+function base64FromBytes(arr: Uint8Array): string {
+  if ((globalThis as any).Buffer) {
+    return globalThis.Buffer.from(arr).toString("base64");
+  } else {
+    const bin: string[] = [];
+    arr.forEach((byte) => {
+      bin.push(globalThis.String.fromCharCode(byte));
+    });
+    return globalThis.btoa(bin.join(""));
+  }
+}
+
 type Builtin = Date | Function | Uint8Array | string | number | boolean | undefined;
 
 export type DeepPartial<T> = T extends Builtin ? T
diff --git a/src/types/generated/finance/v1/cost_route.ts b/src/types/generated/finance/v1/cost_route.ts
index 3e850c6..e5cdf4b 100644
--- a/src/types/generated/finance/v1/cost_route.ts
+++ b/src/types/generated/finance/v1/cost_route.ts
@@ -27,6 +27,10 @@ export interface CostRouteHead {
   promotedFromDraftId: number;
   cylTypeId: number;
   notes: string;
+  /** Number of distinct route levels in this routing (read-time aggregate). */
+  levelCount: number;
+  /** Number of RM inputs across all stages (read-time aggregate). */
+  rmCount: number;
   /** Lock tracking -- populated when routing_status = "LOCKED". */
   lockedBy: string;
   lockedAt: string;
@@ -80,6 +84,12 @@ export interface CostRouteRm {
   uomId: number;
   subType: string;
   notes: string;
+  /** Persisted node X position on the routing graph. */
+  positionX: number;
+  /** Persisted node Y position on the routing graph. */
+  positionY: number;
+  /** RM group display name (read-time join on rm_group_code). */
+  rmGroupName: string;
 }
 
 /** RouteGraph bundles the head + all seqs (with rms inline). */
@@ -225,6 +235,8 @@ function createBaseCostRouteHead(): CostRouteHead {
     promotedFromDraftId: 0,
     cylTypeId: 0,
     notes: "",
+    levelCount: 0,
+    rmCount: 0,
     lockedBy: "",
     lockedAt: "",
     unlockedBy: "",
@@ -262,6 +274,12 @@ export const CostRouteHead: MessageFns<CostRouteHead> = {
     if (message.notes !== "") {
       writer.uint32(74).string(message.notes);
     }
+    if (message.levelCount !== 0) {
+      writer.uint32(80).int32(message.levelCount);
+    }
+    if (message.rmCount !== 0) {
+      writer.uint32(88).int32(message.rmCount);
+    }
     if (message.lockedBy !== "") {
       writer.uint32(138).string(message.lockedBy);
     }
@@ -359,6 +377,22 @@ export const CostRouteHead: MessageFns<CostRouteHead> = {
           message.notes = reader.string();
           continue;
         }
+        case 10: {
+          if (tag !== 80) {
+            break;
+          }
+
+          message.levelCount = reader.int32();
+          continue;
+        }
+        case 11: {
+          if (tag !== 88) {
+            break;
+          }
+
+          message.rmCount = reader.int32();
+          continue;
+        }
         case 17: {
           if (tag !== 138) {
             break;
@@ -447,6 +481,16 @@ export const CostRouteHead: MessageFns<CostRouteHead> = {
         ? globalThis.Number(object.cyl_type_id)
         : 0,
       notes: isSet(object.notes) ? globalThis.String(object.notes) : "",
+      levelCount: isSet(object.levelCount)
+        ? globalThis.Number(object.levelCount)
+        : isSet(object.level_count)
+        ? globalThis.Number(object.level_count)
+        : 0,
+      rmCount: isSet(object.rmCount)
+        ? globalThis.Number(object.rmCount)
+        : isSet(object.rm_count)
+        ? globalThis.Number(object.rm_count)
+        : 0,
       lockedBy: isSet(object.lockedBy)
         ? globalThis.String(object.lockedBy)
         : isSet(object.locked_by)
@@ -500,6 +544,12 @@ export const CostRouteHead: MessageFns<CostRouteHead> = {
     if (message.notes !== "") {
       obj.notes = message.notes;
     }
+    if (message.levelCount !== 0) {
+      obj.levelCount = Math.round(message.levelCount);
+    }
+    if (message.rmCount !== 0) {
+      obj.rmCount = Math.round(message.rmCount);
+    }
     if (message.lockedBy !== "") {
       obj.lockedBy = message.lockedBy;
     }
@@ -532,6 +582,8 @@ export const CostRouteHead: MessageFns<CostRouteHead> = {
     message.promotedFromDraftId = object.promotedFromDraftId ?? 0;
     message.cylTypeId = object.cylTypeId ?? 0;
     message.notes = object.notes ?? "";
+    message.levelCount = object.levelCount ?? 0;
+    message.rmCount = object.rmCount ?? 0;
     message.lockedBy = object.lockedBy ?? "";
     message.lockedAt = object.lockedAt ?? "";
     message.unlockedBy = object.unlockedBy ?? "";
@@ -897,6 +949,9 @@ function createBaseCostRouteRm(): CostRouteRm {
     uomId: 0,
     subType: "",
     notes: "",
+    positionX: 0,
+    positionY: 0,
+    rmGroupName: "",
   };
 }
 
@@ -947,6 +1002,15 @@ export const CostRouteRm: MessageFns<CostRouteRm> = {
     if (message.notes !== "") {
       writer.uint32(122).string(message.notes);
     }
+    if (message.positionX !== 0) {
+      writer.uint32(129).double(message.positionX);
+    }
+    if (message.positionY !== 0) {
+      writer.uint32(137).double(message.positionY);
+    }
+    if (message.rmGroupName !== "") {
+      writer.uint32(146).string(message.rmGroupName);
+    }
     return writer;
   },
 
@@ -1077,6 +1141,30 @@ export const CostRouteRm: MessageFns<CostRouteRm> = {
           message.notes = reader.string();
           continue;
         }
+        case 16: {
+          if (tag !== 129) {
+            break;
+          }
+
+          message.positionX = reader.double();
+          continue;
+        }
+        case 17: {
+          if (tag !== 137) {
+            break;
+          }
+
+          message.positionY = reader.double();
+          continue;
+        }
+        case 18: {
+          if (tag !== 146) {
+            break;
+          }
+
+          message.rmGroupName = reader.string();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1159,6 +1247,21 @@ export const CostRouteRm: MessageFns<CostRouteRm> = {
         ? globalThis.String(object.sub_type)
         : "",
       notes: isSet(object.notes) ? globalThis.String(object.notes) : "",
+      positionX: isSet(object.positionX)
+        ? globalThis.Number(object.positionX)
+        : isSet(object.position_x)
+        ? globalThis.Number(object.position_x)
+        : 0,
+      positionY: isSet(object.positionY)
+        ? globalThis.Number(object.positionY)
+        : isSet(object.position_y)
+        ? globalThis.Number(object.position_y)
+        : 0,
+      rmGroupName: isSet(object.rmGroupName)
+        ? globalThis.String(object.rmGroupName)
+        : isSet(object.rm_group_name)
+        ? globalThis.String(object.rm_group_name)
+        : "",
     };
   },
 
@@ -1209,6 +1312,15 @@ export const CostRouteRm: MessageFns<CostRouteRm> = {
     if (message.notes !== "") {
       obj.notes = message.notes;
     }
+    if (message.positionX !== 0) {
+      obj.positionX = message.positionX;
+    }
+    if (message.positionY !== 0) {
+      obj.positionY = message.positionY;
+    }
+    if (message.rmGroupName !== "") {
+      obj.rmGroupName = message.rmGroupName;
+    }
     return obj;
   },
 
@@ -1232,6 +1344,9 @@ export const CostRouteRm: MessageFns<CostRouteRm> = {
     message.uomId = object.uomId ?? 0;
     message.subType = object.subType ?? "";
     message.notes = object.notes ?? "";
+    message.positionX = object.positionX ?? 0;
+    message.positionY = object.positionY ?? 0;
+    message.rmGroupName = object.rmGroupName ?? "";
     return message;
   },
 };
diff --git a/src/types/generated/finance/v1/parameter.ts b/src/types/generated/finance/v1/parameter.ts
index 7b448f2..3184b9b 100644
--- a/src/types/generated/finance/v1/parameter.ts
+++ b/src/types/generated/finance/v1/parameter.ts
@@ -168,6 +168,10 @@ export interface Parameter {
   lookupFillGroupCode: string;
   /** Column name in the master entity to read value from (e.g., "mc_speed"). */
   lookupSourceColumn: string;
+  /** Whether this parameter is shown in the approval review drawer summary. */
+  isApprovalVisible: boolean;
+  /** Render order within the approval review drawer summary. */
+  approvalDisplayOrder: number;
 }
 
 /** CreateParameterRequest is the request for creating a new parameter. */
@@ -315,7 +319,15 @@ export interface UpdateParameterRequest {
     | string
     | undefined;
   /** New source column (optional). Set to empty string to clear. */
-  lookupSourceColumn?: string | undefined;
+  lookupSourceColumn?:
+    | string
+    | undefined;
+  /** New is_approval_visible flag (optional). */
+  isApprovalVisible?:
+    | boolean
+    | undefined;
+  /** New approval display order (optional). */
+  approvalDisplayOrder?: number | undefined;
 }
 
 /** UpdateParameterResponse is the response for updating a parameter. */
@@ -475,6 +487,8 @@ function createBaseParameter(): Parameter {
     notes: "",
     lookupFillGroupCode: "",
     lookupSourceColumn: "",
+    isApprovalVisible: false,
+    approvalDisplayOrder: 0,
   };
 }
 
@@ -549,6 +563,12 @@ export const Parameter: MessageFns<Parameter> = {
     if (message.lookupSourceColumn !== "") {
       writer.uint32(258).string(message.lookupSourceColumn);
     }
+    if (message.isApprovalVisible !== false) {
+      writer.uint32(264).bool(message.isApprovalVisible);
+    }
+    if (message.approvalDisplayOrder !== 0) {
+      writer.uint32(272).int32(message.approvalDisplayOrder);
+    }
     return writer;
   },
 
@@ -743,6 +763,22 @@ export const Parameter: MessageFns<Parameter> = {
           message.lookupSourceColumn = reader.string();
           continue;
         }
+        case 33: {
+          if (tag !== 264) {
+            break;
+          }
+
+          message.isApprovalVisible = reader.bool();
+          continue;
+        }
+        case 34: {
+          if (tag !== 272) {
+            break;
+          }
+
+          message.approvalDisplayOrder = reader.int32();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -861,6 +897,16 @@ export const Parameter: MessageFns<Parameter> = {
         : isSet(object.lookup_source_column)
         ? globalThis.String(object.lookup_source_column)
         : "",
+      isApprovalVisible: isSet(object.isApprovalVisible)
+        ? globalThis.Boolean(object.isApprovalVisible)
+        : isSet(object.is_approval_visible)
+        ? globalThis.Boolean(object.is_approval_visible)
+        : false,
+      approvalDisplayOrder: isSet(object.approvalDisplayOrder)
+        ? globalThis.Number(object.approvalDisplayOrder)
+        : isSet(object.approval_display_order)
+        ? globalThis.Number(object.approval_display_order)
+        : 0,
     };
   },
 
@@ -935,6 +981,12 @@ export const Parameter: MessageFns<Parameter> = {
     if (message.lookupSourceColumn !== "") {
       obj.lookupSourceColumn = message.lookupSourceColumn;
     }
+    if (message.isApprovalVisible !== false) {
+      obj.isApprovalVisible = message.isApprovalVisible;
+    }
+    if (message.approvalDisplayOrder !== 0) {
+      obj.approvalDisplayOrder = Math.round(message.approvalDisplayOrder);
+    }
     return obj;
   },
 
@@ -968,6 +1020,8 @@ export const Parameter: MessageFns<Parameter> = {
     message.notes = object.notes ?? "";
     message.lookupFillGroupCode = object.lookupFillGroupCode ?? "";
     message.lookupSourceColumn = object.lookupSourceColumn ?? "";
+    message.isApprovalVisible = object.isApprovalVisible ?? false;
+    message.approvalDisplayOrder = object.approvalDisplayOrder ?? 0;
     return message;
   },
 };
@@ -1632,6 +1686,8 @@ function createBaseUpdateParameterRequest(): UpdateParameterRequest {
     notes: undefined,
     lookupFillGroupCode: undefined,
     lookupSourceColumn: undefined,
+    isApprovalVisible: undefined,
+    approvalDisplayOrder: undefined,
   };
 }
 
@@ -1694,6 +1750,12 @@ export const UpdateParameterRequest: MessageFns<UpdateParameterRequest> = {
     if (message.lookupSourceColumn !== undefined) {
       writer.uint32(154).string(message.lookupSourceColumn);
     }
+    if (message.isApprovalVisible !== undefined) {
+      writer.uint32(160).bool(message.isApprovalVisible);
+    }
+    if (message.approvalDisplayOrder !== undefined) {
+      writer.uint32(168).int32(message.approvalDisplayOrder);
+    }
     return writer;
   },
 
@@ -1856,6 +1918,22 @@ export const UpdateParameterRequest: MessageFns<UpdateParameterRequest> = {
           message.lookupSourceColumn = reader.string();
           continue;
         }
+        case 20: {
+          if (tag !== 160) {
+            break;
+          }
+
+          message.isApprovalVisible = reader.bool();
+          continue;
+        }
+        case 21: {
+          if (tag !== 168) {
+            break;
+          }
+
+          message.approvalDisplayOrder = reader.int32();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -1958,6 +2036,16 @@ export const UpdateParameterRequest: MessageFns<UpdateParameterRequest> = {
         : isSet(object.lookup_source_column)
         ? globalThis.String(object.lookup_source_column)
         : undefined,
+      isApprovalVisible: isSet(object.isApprovalVisible)
+        ? globalThis.Boolean(object.isApprovalVisible)
+        : isSet(object.is_approval_visible)
+        ? globalThis.Boolean(object.is_approval_visible)
+        : undefined,
+      approvalDisplayOrder: isSet(object.approvalDisplayOrder)
+        ? globalThis.Number(object.approvalDisplayOrder)
+        : isSet(object.approval_display_order)
+        ? globalThis.Number(object.approval_display_order)
+        : undefined,
     };
   },
 
@@ -2020,6 +2108,12 @@ export const UpdateParameterRequest: MessageFns<UpdateParameterRequest> = {
     if (message.lookupSourceColumn !== undefined) {
       obj.lookupSourceColumn = message.lookupSourceColumn;
     }
+    if (message.isApprovalVisible !== undefined) {
+      obj.isApprovalVisible = message.isApprovalVisible;
+    }
+    if (message.approvalDisplayOrder !== undefined) {
+      obj.approvalDisplayOrder = Math.round(message.approvalDisplayOrder);
+    }
     return obj;
   },
 
@@ -2047,6 +2141,8 @@ export const UpdateParameterRequest: MessageFns<UpdateParameterRequest> = {
     message.notes = object.notes ?? undefined;
     message.lookupFillGroupCode = object.lookupFillGroupCode ?? undefined;
     message.lookupSourceColumn = object.lookupSourceColumn ?? undefined;
+    message.isApprovalVisible = object.isApprovalVisible ?? undefined;
+    message.approvalDisplayOrder = object.approvalDisplayOrder ?? undefined;
     return message;
   },
 };