From 4be163e7d33ff17f4a7537e2daf784385dbf73e7 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:13:47 +0700
Subject: [PATCH 01/23] refactor(frontend): introduce UserAvatar with real
 photo support

Replace ad-hoc initials logic scattered across comments, nav-user, and
profile-header with a single UserAvatar component that renders the user's
actual profile photo (AvatarImage) when available and falls back to
deterministic-color initials (hash mod 6 palette) when not.

Supersedes the former UserInitials helper (removed).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/common/user-avatar.tsx         | 83 +++++++++++++++++++
 .../cost-request-comment/comment-item.tsx     |  9 +-
 .../cost-request-comment/comments-panel.tsx   | 39 ++-------
 src/components/nav/nav-user.tsx               | 33 +++-----
 src/components/profile/profile-header.tsx     | 21 ++---
 5 files changed, 117 insertions(+), 68 deletions(-)
 create mode 100644 src/components/common/user-avatar.tsx

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-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/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">

From 6ac86192c92cb4696dd4220b56010fe8bbe3e8a1 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:14:06 +0700
Subject: [PATCH 02/23] feat(frontend): merge Classification + Feasibility into
 one sequential dialog; hide Use Existing Costing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace two separate single-step dialogs (VerifyClassification and
Feasibility) with a single ClassificationAndFeasibilityDialog that
submits both steps in sequence, shows partial-failure state when
classification succeeds but feasibility fails, and retries only the
failed step.

Also hides the Use Existing Costing button in the UNDER_REVIEW action
block — the transition existed but had no useful completion path for
the user at that stage.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/cost-product-request/index.ts     |   2 +-
 .../request-detail-panel.tsx                  |  66 +----
 .../transition-dialogs.tsx                    | 280 +++++++++++-------
 3 files changed, 188 insertions(+), 160 deletions(-)

diff --git a/src/components/finance/cost-product-request/index.ts b/src/components/finance/cost-product-request/index.ts
index 341c953..ac4b756 100644
--- a/src/components/finance/cost-product-request/index.ts
+++ b/src/components/finance/cost-product-request/index.ts
@@ -2,6 +2,6 @@ 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"
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..1b2a21b 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,15 @@ 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,
@@ -52,8 +49,6 @@ import {
   useRejectRequest,
   useStartReview,
   useSubmitRequest,
-  useUseExistingCosting,
-  useVerifyClassification,
   useCloseRequest,
 } from "@/hooks/finance/use-cost-product-request"
 import type { CostProductRequest } from "@/types/finance/cost-product-request"
@@ -72,7 +67,7 @@ interface Props {
   hasFillTracking?: boolean
 }
 
-type DialogKind = "reject" | "cancel" | "verify" | "feasibility" | "close" | "useExisting" | "confirmAction" | null
+type DialogKind = "reject" | "cancel" | "reviewDecide" | "close" | "confirmAction" | null
 
 export function RequestDetailPanel({ request, onEdit, allFillsApproved = false, hasFillTracking = false }: Props) {
   useCPRRealtimeSync(request.requestId)
@@ -84,9 +79,6 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
   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()
@@ -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 && (
@@ -508,36 +484,12 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
           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) },
-          )
-        }}
-      />
-      <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) },
-          )
-        }}
+        initialVerifiedClassification={request.verifiedClassification}
       />
       <CloseDialog
         open={dialog === "close"}
diff --git a/src/components/finance/cost-product-request/transition-dialogs.tsx b/src/components/finance/cost-product-request/transition-dialogs.tsx
index 4d92458..603cbdc 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,9 @@ 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 { useCostProductMaster, useCostProductMasters } from "@/hooks/finance/use-cost-product-master"
+import { useDecideFeasibility, useVerifyClassification } from "@/hooks/finance/use-cost-product-request"
 import { cn } from "@/lib/utils"
 import type { ClosedSubstatus, ProductClassification } from "@/types/finance/cost-product-request"
 
@@ -61,140 +64,213 @@ 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). Submits sequentially — classification first, then
+// feasibility — reusing the two existing mutations/RPCs unchanged. See design.md §2.
+//
+// Local state machine: "idle" (both sections editable) -> "classifying" (step 1 in flight)
+// -> "classified" (step 1 saved; either about to auto-run step 2, or step 2 failed and the
+// user is retrying just feasibility, with classification now read-only) -> "deciding" (step 2
+// in flight) -> "done" (both 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" | "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
 }
 
-export function VerifyClassificationDialog({ open, onOpenChange, currentClassification, pending, onConfirm }: VerifyProps) {
-  const [verified, setVerified] = useState<ProductClassification>(currentClassification)
-  const [overrideReason, setOverrideReason] = useState("")
-  const isOverride = verified !== currentClassification
-
-  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>
-  )
-}
+export function ClassificationAndFeasibilityDialog({
+  open,
+  onOpenChange,
+  requestId,
+  currentClassification,
+  initialVerifiedClassification,
+}: ClassificationAndFeasibilityProps) {
+  const verifyM = useVerifyClassification()
+  const feasibilityM = useDecideFeasibility()
 
-// ----- FeasibilityDialog -----------------------------------------------------------------
-interface FeasibilityProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  pending?: boolean
-  onConfirm: (decision: "FEASIBLE" | "NOT_FEASIBLE", note: string) => void
-}
+  const [phase, setPhase] = useState<ReviewPhase>("idle")
+  const [error, setError] = useState<string | null>(null)
 
-export function FeasibilityDialog({ open, onOpenChange, pending, onConfirm }: FeasibilityProps) {
+  const [verified, setVerified] = useState<ProductClassification>(
+    initialVerifiedClassification ?? currentClassification,
+  )
+  const [overrideReason, setOverrideReason] = useState("")
   const [decision, setDecision] = useState<"FEASIBLE" | "NOT_FEASIBLE">("FEASIBLE")
   const [note, setNote] = useState("")
+
+  const isOverride = verified !== currentClassification
   const isInfeasible = decision === "NOT_FEASIBLE"
+  // Once classification has been saved (either mid-flow or after a step-2 failure we're
+  // retrying), lock the classification section so a retry never re-submits it.
+  const classificationLocked = phase === "classified" || phase === "deciding"
+  const pending = verifyM.isPending || feasibilityM.isPending
+
+  function resetAll() {
+    setPhase("idle")
+    setError(null)
+    setVerified(initialVerifiedClassification ?? currentClassification)
+    setOverrideReason("")
+    setDecision("FEASIBLE")
+    setNote("")
+  }
+
+  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 already saved — only feasibility needs a retry.
+      setPhase("classified")
+      setError("Classification saved. Feasibility decision failed — please retry.")
+    }
+  }
+
+  async function handleSubmit() {
+    if (classificationLocked) {
+      // Retry path after a step-2 failure: classification is already saved.
+      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 submitFeasibility()
+  }
+
+  const canSubmitClassification = classificationLocked || !isOverride || !!overrideReason.trim()
+  const canSubmitFeasibility = !isInfeasible || !!note.trim()
+  const canSubmit = canSubmitClassification && canSubmitFeasibility
 
   return (
     <Dialog
       open={open}
       onOpenChange={(o) => {
         onOpenChange(o)
-        if (!o) {
-          setDecision("FEASIBLE")
-          setNote("")
-        }
+        if (!o) resetAll()
       }}
     >
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Decide feasibility</DialogTitle>
+          <DialogTitle>Review &amp; decide</DialogTitle>
           <DialogDescription>
-            FEASIBLE moves the request to ROUTING_DEFINED. NOT_FEASIBLE sends it to REJECTED — note is required.
+            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">
+          {/* Classification section */}
+          <div className="space-y-3">
+            <div className="text-xs uppercase tracking-wide text-muted-foreground">Classification</div>
+            <p className="text-sm text-muted-foreground">
+              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>
+
+          <Separator />
+
+          {/* Feasibility section */}
+          <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>
+
+          {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"}
+            {classificationLocked ? "Retry feasibility" : isInfeasible ? "Reject as infeasible" : "Save & continue"}
           </Button>
         </DialogFooter>
       </DialogContent>

From 1c7cbc3c6faf7351a9f431dda0c3f0ed01797cff Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:14:28 +0700
Subject: [PATCH 03/23] =?UTF-8?q?feat(frontend):=20fill=20tracking=20card?=
 =?UTF-8?q?=20=E2=80=94=20show=20product=20names=20+=20assignee=20identity?=
 =?UTF-8?q?=20pre-claim?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add FillTaskIdentity component that displays the product name (not just
code) and the assigned filler/approver's name before they have claimed
the task. Rendered in FillTrackingCompact and FillTaskRow so users can
identify which product each fill task belongs to without memorizing
product codes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../fill-assignment/FillTaskIdentity.tsx      | 66 +++++++++++++++++++
 .../finance/fill-assignment/FillTaskRow.tsx   | 55 +++++++++++-----
 .../fill-assignment/FillTrackingCompact.tsx   | 48 ++++++++++----
 .../finance/fill-assignment/index.ts          |  2 +
 src/hooks/finance/use-fill-assignment.ts      | 23 +++++++
 src/types/finance/fill-assignment.ts          | 10 +++
 6 files changed, 176 insertions(+), 28 deletions(-)
 create mode 100644 src/components/finance/fill-assignment/FillTaskIdentity.tsx

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..e8c883c 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,24 @@ 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) => (
+                          <Badge
+                            key={s.productSysId}
+                            variant="outline"
+                            className="font-mono text-[10px] font-normal"
+                          >
+                            {s.productCode || `#${s.productSysId}`}
+                          </Badge>
+                        ))}
+                      </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 +166,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 +195,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/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/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/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)
+}

From 17e25d2b8887b1cdd65fa05234535ca843efd037 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:14:40 +0700
Subject: [PATCH 04/23] =?UTF-8?q?feat(frontend):=20approval=20param=20visi?=
 =?UTF-8?q?bility=20=E2=80=94=20form=20fields=20+=20FillApprovalReviewDraw?=
 =?UTF-8?q?er?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add is_approval_visible toggle and approval_display_order number input to
the Parameter Master form dialog so operators can configure which
parameters appear in the CPR approval drawer.

FillApprovalReviewDrawer replaces the one-click Approve button with a
drawer that shows the filtered (isApprovalVisible=true), ordered
parameter values for every product at the fill level before the approver
confirms.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../FillApprovalReviewDrawer.tsx              | 277 ++++++++++++++++++
 .../parameter/parameter-form-dialog.tsx       |  66 +++++
 src/types/finance/parameter.ts                |   5 +
 src/types/generated/finance/v1/parameter.ts   |  98 ++++++-
 4 files changed, 445 insertions(+), 1 deletion(-)
 create mode 100644 src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx

diff --git a/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
new file mode 100644
index 0000000..39135e9
--- /dev/null
+++ b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import { useMemo } from "react"
+import { ArrowLeft, CheckCircle2, Loader2, X } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetClose,
+  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)
+
+  const rows = useMemo(() => {
+    const byParamId = new Map(applicable.map((p) => [p.paramId, p]))
+    return visibleParams
+      .map((vp) => byParamId.get(vp.paramId))
+      .filter((p): p is RequiredParamEntry => Boolean(p))
+  }, [applicable, visibleParams])
+
+  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">
+        {rows.length === 0 ? (
+          <p className="px-4 py-3 text-sm text-muted-foreground">
+            No summary parameters apply to this product.
+          </p>
+        ) : (
+          rows.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>
+  )
+}
+
+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>
+          <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>
+
+      {/* ── 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/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/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/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;
   },
 };

From 9fc9e8e689443a4a92abfb1262adab1d9943bc47 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:14:49 +0700
Subject: [PATCH 05/23] fix(frontend): correct cache invalidation on route
 link/unlink + lock guard

useUnlinkRoute.onSuccess was missing the ["finance","cost-route"]
invalidation added to useLinkExistingRoute, leaving the route's linked-
request list stale after an unlink. Add the missing key.

Also disables the Unlink button with a tooltip when the linked route is
in LOCKED status, reflecting the new backend 409 guard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/fill-assignment/FillParamDrawer.tsx   |  9 +++++----
 .../fill-assignment/FillParamEntryPage.tsx        |  9 +++++----
 .../finance/fill-assignment/FillTrackingTab.tsx   |  3 ---
 .../finance/fill-assignment/FillTrackingTable.tsx |  3 ---
 src/hooks/finance/use-link-route.ts               |  9 +++++++--
 src/types/finance/cost-route.ts                   | 15 +++++++++++++++
 6 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/finance/fill-assignment/FillParamDrawer.tsx b/src/components/finance/fill-assignment/FillParamDrawer.tsx
index cf69141..1f51b13 100644
--- a/src/components/finance/fill-assignment/FillParamDrawer.tsx
+++ b/src/components/finance/fill-assignment/FillParamDrawer.tsx
@@ -15,6 +15,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 +32,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())
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/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/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-route.ts b/src/types/finance/cost-route.ts
index 638a067..8ae4569 100644
--- a/src/types/finance/cost-route.ts
+++ b/src/types/finance/cost-route.ts
@@ -144,3 +144,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)
+}

From c69308cde5232d13c38fa0f3b89ac215ff1b0da5 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:14:55 +0700
Subject: [PATCH 06/23] =?UTF-8?q?docs(frontend):=20update=20CLAUDE.md=20?=
 =?UTF-8?q?=C2=A76.7=20for=20UserAvatar=20+=20fix=20test=20refs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update UserAvatar section to document the new colorHash prop behavior
and note the removal of the former UserInitials component.
Fix stale test references to removed components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CLAUDE.md                                     | 19 ++++++------
 .../components/request-detail-panel.test.tsx  | 29 +++++++++----------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 5589e86..2370546 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -502,19 +502,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)
 
@@ -1147,11 +1148,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
 
 ---
diff --git a/src/__tests__/components/request-detail-panel.test.tsx b/src/__tests__/components/request-detail-panel.test.tsx
index 220460f..9a75cc3 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,
   }),
 )
 
@@ -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", () => {

From 98f63902dbae37dce23e0d6b3b3a2f8636473211 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:15:10 +0700
Subject: [PATCH 07/23] fix(frontend): routing panel lock guard UI + fill-tasks
 page cleanup

routing-panel: disable Unlink button and show lock tooltip when route is
in LOCKED status, preventing accidental detach of routes with active cost
results.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/costing/fill-tasks/page.tsx       |  3 ---
 .../cost-product-request/routing-panel.tsx    | 27 ++++++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

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/components/finance/cost-product-request/routing-panel.tsx b/src/components/finance/cost-product-request/routing-panel.tsx
index f2eeec2..a43c9ce 100644
--- a/src/components/finance/cost-product-request/routing-panel.tsx
+++ b/src/components/finance/cost-product-request/routing-panel.tsx
@@ -187,11 +187,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 && (

From 09d2ff0baabfe4b090d8ec6e7f6013ff3deeb6ee Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:48:57 +0700
Subject: [PATCH 08/23] fix(frontend): skip classification step when
 feasibility is NOT_FEASIBLE

When the reviewer selects NOT_FEASIBLE, hide the classification section
entirely and submit directly to the feasibility RPC without first calling
the classification RPC. Eliminates the confusing question "which
classification?" for a product that is not feasible.

Changes:
- handleSubmit: early-return to submitFeasibility() when isInfeasible
- canSubmit: short-circuit canSubmitClassification with isInfeasible
- classification section + separator: wrapped in {!isInfeasible && ...}

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../transition-dialogs.tsx                    | 82 ++++++++++---------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/finance/cost-product-request/transition-dialogs.tsx b/src/components/finance/cost-product-request/transition-dialogs.tsx
index 603cbdc..86736bb 100644
--- a/src/components/finance/cost-product-request/transition-dialogs.tsx
+++ b/src/components/finance/cost-product-request/transition-dialogs.tsx
@@ -148,6 +148,10 @@ export function ClassificationAndFeasibilityDialog({
       await submitFeasibility()
       return
     }
+    if (isInfeasible) {
+      await submitFeasibility()
+      return
+    }
     setPhase("classifying")
     setError(null)
     try {
@@ -167,7 +171,7 @@ export function ClassificationAndFeasibilityDialog({
 
   const canSubmitClassification = classificationLocked || !isOverride || !!overrideReason.trim()
   const canSubmitFeasibility = !isInfeasible || !!note.trim()
-  const canSubmit = canSubmitClassification && canSubmitFeasibility
+  const canSubmit = (isInfeasible || canSubmitClassification) && canSubmitFeasibility
 
   return (
     <Dialog
@@ -186,44 +190,48 @@ export function ClassificationAndFeasibilityDialog({
         </DialogHeader>
 
         <div className="space-y-5">
-          {/* Classification section */}
-          <div className="space-y-3">
-            <div className="text-xs uppercase tracking-wide text-muted-foreground">Classification</div>
-            <p className="text-sm text-muted-foreground">
-              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)}
-                />
+          {!isInfeasible && (
+            <>
+              {/* Classification section */}
+              <div className="space-y-3">
+                <div className="text-xs uppercase tracking-wide text-muted-foreground">Classification</div>
+                <p className="text-sm text-muted-foreground">
+                  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>
-            )}
-            {classificationLocked && (
-              <p className="text-xs text-muted-foreground">Classification saved — read-only.</p>
-            )}
-          </div>
 
-          <Separator />
+              <Separator />
+            </>
+          )}
 
           {/* Feasibility section */}
           <div className="space-y-3">

From bbee2808ae851941aa27f8abc057bd65976360ed Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:49:05 +0700
Subject: [PATCH 09/23] =?UTF-8?q?feat(frontend):=20param=20summary=20card?=
 =?UTF-8?q?=20=E2=80=94=20show=20product=20name=20+=20Level=20N=20instead?=
 =?UTF-8?q?=20of=20count?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the ambiguous "N level(s)" count with "Level N, M" showing the
actual route level numbers each product sits at. Also display the product
name below the product code so users can identify products without
memorizing codes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/cost-product-request/param-summary-panel.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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)}

From 13937c513151e1b05da1ed661b196f90cf301b86 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:49:14 +0700
Subject: [PATCH 10/23] fix(frontend): remove redundant X close button from
 single-level drawers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each of these drawers had both a SheetClose/X icon button and a
"← Back to request" button doing the exact same thing. Remove the X
button — "Back to request" is more informative and less ambiguous.

FillTrackingDrawer had only an X and no Back button; replaced with a
proper "← Back" button for consistency.

Two-level drawers (param-detail, override-params, param-edit-log) are
intentionally left unchanged — their X/Back correctly closes only the
inner drawer while keeping the outer one open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../FillApprovalReviewDrawer.tsx              | 69 +++++++++++++------
 .../fill-assignment/FillParamDrawer.tsx       |  9 +--
 .../fill-assignment/FillTrackingDrawer.tsx    | 13 ++--
 3 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
index 39135e9..6d684d9 100644
--- a/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
+++ b/src/components/finance/fill-assignment/FillApprovalReviewDrawer.tsx
@@ -1,13 +1,12 @@
 "use client"
 
 import { useMemo } from "react"
-import { ArrowLeft, CheckCircle2, Loader2, X } from "lucide-react"
+import { ArrowLeft, CheckCircle2, Loader2 } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
   Sheet,
-  SheetClose,
   SheetContent,
   SheetDescription,
   SheetTitle,
@@ -61,13 +60,36 @@ function ApprovalReviewProductSection({
 }) {
   const { data: applicable = [], isLoading } = useProductRequiredParams(productSysId)
 
-  const rows = useMemo(() => {
+  // 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]))
-    return visibleParams
+    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) {
@@ -83,22 +105,31 @@ function ApprovalReviewProductSection({
         )}
       </div>
       <div className="divide-y">
-        {rows.length === 0 ? (
+        {totalRows === 0 ? (
           <p className="px-4 py-3 text-sm text-muted-foreground">
             No summary parameters apply to this product.
           </p>
         ) : (
-          rows.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>
+          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>
           ))
         )}
@@ -161,12 +192,6 @@ function DrawerContent({
             <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/FillParamDrawer.tsx b/src/components/finance/fill-assignment/FillParamDrawer.tsx
index 1f51b13..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,
@@ -82,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/FillTrackingDrawer.tsx b/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
index 88534c6..1e17a86 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,
@@ -63,12 +62,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 */}

From 1e3d5448cdb266c1ff8c2db003f229031af16dee Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:49:29 +0700
Subject: [PATCH 11/23] feat(frontend): sort param values by group + order in
 all fill drawers

Apply the same displayGroup / displayOrder grouping used in the cost
breakdown modal to FillParamProductSection and FillApprovalReviewDrawer.
Params are now grouped under labelled section headers (text-xs uppercase)
sorted by the group's minimum displayOrder; ungrouped params render last
with no header.

Makes param layout consistent across fill entry, approval review, and
cost results breakdown views.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../FillParamProductSection.tsx               | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

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 && (

From 8a95e06e7cf55ee96514baa63108cc141bbf9691 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 20:49:38 +0700
Subject: [PATCH 12/23] =?UTF-8?q?fix(frontend):=20remove=20Cancel=20button?=
 =?UTF-8?q?=20=E2=80=94=20keep=20Close=20and=20Reject=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cancel and Close both terminate a request to CLOSED status. The
difference (Cancel forces substatus=cancelled; Close lets the user pick
won/lost/cancelled/on_hold) was not visible to users, creating three
overlapping buttons.

Remove Cancel entirely. Users who want to close with substatus=cancelled
use the Close dialog and select that option. Reject remains separate
(terminates to REJECTED — recoverable via Revise — not CLOSED).

Also updates the action-bar test to assert Cancel is absent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/request-detail-panel.test.tsx   |  4 ++--
 .../request-detail-panel.tsx                   | 18 +-----------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/src/__tests__/components/request-detail-panel.test.tsx b/src/__tests__/components/request-detail-panel.test.tsx
index 9a75cc3..59d13fd 100644
--- a/src/__tests__/components/request-detail-panel.test.tsx
+++ b/src/__tests__/components/request-detail-panel.test.tsx
@@ -146,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()
   })
 })
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 1b2a21b..64c0ebf 100644
--- a/src/components/finance/cost-product-request/request-detail-panel.tsx
+++ b/src/components/finance/cost-product-request/request-detail-panel.tsx
@@ -39,7 +39,6 @@ import {
 } from "./transition-dialogs"
 import {
   useApproveRequest,
-  useCancelRequest,
   useConfirmRequest,
   useMarkParameterComplete,
   useMarkParameterPending,
@@ -67,7 +66,7 @@ interface Props {
   hasFillTracking?: boolean
 }
 
-type DialogKind = "reject" | "cancel" | "reviewDecide" | "close" | "confirmAction" | null
+type DialogKind = "reject" | "reviewDecide" | "close" | "confirmAction" | null
 
 export function RequestDetailPanel({ request, onEdit, allFillsApproved = false, hasFillTracking = false }: Props) {
   useCPRRealtimeSync(request.requestId)
@@ -80,7 +79,6 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
   const reviseM = useReviseRequest()
   const reopenM = useReopenRequest()
   const rejectM = useRejectRequest()
-  const cancelM = useCancelRequest()
   const closeM = useCloseRequest()
   const markPendingM = useMarkParameterPending()
   const markCompleteM = useMarkParameterComplete()
@@ -249,9 +247,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>
@@ -473,17 +468,6 @@ 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) })
-        }}
-      />
       <ClassificationAndFeasibilityDialog
         open={dialog === "reviewDecide"}
         onOpenChange={(o) => setDialog(o ? "reviewDecide" : null)}

From 8291e9cf8fd6011c0c9064125570559a93027a61 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 21:03:03 +0700
Subject: [PATCH 13/23] fix(frontend): move feasibility section above
 classification in review dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feasibility is the primary decision — show it first. Classification only
appears (below a separator) when FEASIBLE is selected, which already
matches the skip-classification-when-NOT_FEASIBLE behavior added in the
previous commit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../transition-dialogs.tsx                    | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/finance/cost-product-request/transition-dialogs.tsx b/src/components/finance/cost-product-request/transition-dialogs.tsx
index 86736bb..fd96998 100644
--- a/src/components/finance/cost-product-request/transition-dialogs.tsx
+++ b/src/components/finance/cost-product-request/transition-dialogs.tsx
@@ -190,9 +190,36 @@ export function ClassificationAndFeasibilityDialog({
         </DialogHeader>
 
         <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 && (
             <>
-              {/* Classification section */}
+              <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">
@@ -228,37 +255,9 @@ export function ClassificationAndFeasibilityDialog({
                   <p className="text-xs text-muted-foreground">Classification saved — read-only.</p>
                 )}
               </div>
-
-              <Separator />
             </>
           )}
 
-          {/* Feasibility section */}
-          <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>
-
           {error && <p className="text-sm text-destructive">{error}</p>}
         </div>
 

From 6888665ae0933c00f1812c40381ee870eeb3cf79 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 21:03:11 +0700
Subject: [PATCH 14/23] =?UTF-8?q?feat(frontend):=20fill=20tracking=20card?=
 =?UTF-8?q?=20=E2=80=94=20show=20product=20name=20below=20product=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each product badge in the fill tracking card now shows the product name
in a truncated muted line below the code, matching the product summary
card behavior. productName is optional so cards without name data render
unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../fill-assignment/FillTrackingCompact.tsx   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/finance/fill-assignment/FillTrackingCompact.tsx b/src/components/finance/fill-assignment/FillTrackingCompact.tsx
index e8c883c..0c5338b 100644
--- a/src/components/finance/fill-assignment/FillTrackingCompact.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingCompact.tsx
@@ -119,13 +119,19 @@ export function FillTrackingCompact({ requestId }: Props) {
                     {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 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>
                     )}

From 8d91da138c6f05047fe8e5e9cec46da6b01792b8 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 21:03:21 +0700
Subject: [PATCH 15/23] fix(frontend): remove redundant X close button from
 param detail drawers

param-detail-drawer (drawer 1), override-params-drawer (drawer 2), and
param-edit-log-drawer (drawer 2) each had both a SheetClose/X icon and
a Back button doing the same thing. Remove the X button; keep Back only.

Two-level behavior is preserved: Back on drawer 2 calls onClose which
unmounts only the inner drawer, leaving the outer one open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../cost-product-request/override-params-drawer.tsx    |  9 +--------
 .../cost-product-request/param-detail-drawer.tsx       | 10 ++--------
 .../cost-product-request/param-edit-log-drawer.tsx     | 10 ++--------
 3 files changed, 5 insertions(+), 24 deletions(-)

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..d4375b6 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 { 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"
@@ -185,12 +185,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>
 

From 10a46e38673925e2c8a55223038bf56ed88a1e3b Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 21:28:25 +0700
Subject: [PATCH 16/23] feat(finance): group param values by display_group in
 param-detail-drawer

- ParamValueEntry type gains displayGroup + displayOrder with normalizer
- ParamGroupedList component renders params grouped under section headers
  (divider line + bold uppercase label) ordered by min displayOrder per group
- Ungrouped params (empty display_group) fall to bottom
- Generated TS types updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../param-detail-drawer.tsx                   | 96 +++++++++++++------
 src/types/finance/param-summary.ts            |  4 +
 .../finance/v1/cost_product_request.ts        | 44 +++++++++
 3 files changed, 117 insertions(+), 27 deletions(-)

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 d4375b6..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,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import { ArrowLeft, Clock, Pencil } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
@@ -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">
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/generated/finance/v1/cost_product_request.ts b/src/types/generated/finance/v1/cost_product_request.ts
index 793b7c5..f069a5e 100644
--- a/src/types/generated/finance/v1/cost_product_request.ts
+++ b/src/types/generated/finance/v1/cost_product_request.ts
@@ -409,6 +409,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. */
@@ -6198,6 +6200,8 @@ function createBaseParamValueEntry(): ParamValueEntry {
     valueFlag: false,
     uomCode: "",
     isRequired: false,
+    displayGroup: "",
+    displayOrder: 0,
   };
 }
 
@@ -6233,6 +6237,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 +6333,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 +6410,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 +6455,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 +6479,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;
   },
 };

From af32915b5191dc0798fb736ccdcd16af5331a728 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Fri, 3 Jul 2026 22:21:02 +0700
Subject: [PATCH 17/23] =?UTF-8?q?feat(routes):=20polish=20list=20+=20detai?=
 =?UTF-8?q?l=20pages=20=E2=80=94=20sort/filter/dark-mode/UX=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

List page:
- Split page.tsx into server component + routes-page-client.tsx (client)
- Add loading.tsx skeleton
- useUrlState for all filter/sort/pagination params (URL-synced)
- SortableHeader on product, status, version columns
- ColumnVisibilityMenu in filter bar
- DataTablePagination replacing prev/next buttons
- TableRow onClick → router.push (whole row is clickable)
- KpiGrid with 4 KpiCards matching product-master layout

Detail page:
- Add loading.tsx skeleton
- Fix locked banner: remove absolute positioning → inline amber card with Lock icon
- Replace emoji Fork button (🔱) with GitFork Lucide icon
- Replace raw <Badge> status with <StatusBadge type="route">
- Hide notes textarea behind <details> to declutter header
- Replace window.confirm with <ConfirmDialog variant="destructive">
- LinkedRequestsPopover → responsive Sheet drawer (side="right")

React Flow dark mode:
- StageNode: add dark:bg-emerald-950/40 dark:border-emerald-700 variants
- RmNode: add dark:bg-purple-950/40 / dark:bg-amber-950/40 dark variants
- text-foreground on node text to prevent invisible text in dark mode

Bug fixes:
- deleteRm: was directly mutating seq.rms then shallow-spreading seqs
  → now uses .map() for fully immutable update (fixes delete 1 → deletes all)
- deleteStage: was directly mutating base.seqs via assignment
  → now uses .filter() returning new array (fully immutable)
- handleStageClick/handleEdgeClick: added seqId===0/rmId===0 guard
  → shows toast "Save first" instead of opening panel on unsaved nodes

Cards view:
- RM chips show typed color border (green=PRODUCT, purple=GROUP, amber=ITEM)
- routeRmName shown (group name already populated by RmGroupCombobox onChange)
- ratio displayed on second line of each chip for readability

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../finance/routes/[headId]/loading.tsx       |  19 ++
 .../(dashboard)/finance/routes/loading.tsx    |  20 ++
 src/app/(dashboard)/finance/routes/page.tsx   | 173 +-----------
 .../finance/routes/routes-page-client.tsx     | 252 ++++++++++++++++++
 .../cost-route/linked-requests-popover.tsx    | 107 +++++---
 .../finance/cost-route/route-graph-editor.tsx |  89 +++++--
 .../finance/cost-route/route-graph-flow.tsx   |  16 +-
 7 files changed, 445 insertions(+), 231 deletions(-)
 create mode 100644 src/app/(dashboard)/finance/routes/[headId]/loading.tsx
 create mode 100644 src/app/(dashboard)/finance/routes/loading.tsx
 create mode 100644 src/app/(dashboard)/finance/routes/routes-page-client.tsx

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..f39f722
--- /dev/null
+++ b/src/app/(dashboard)/finance/routes/routes-page-client.tsx
@@ -0,0 +1,252 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { useRouter } from "next/navigation"
+import {
+  CheckCircle2,
+  ChevronDown,
+  FileStack,
+  GitFork,
+  Lock,
+  PencilRuler,
+  Plus,
+} from "lucide-react"
+
+import { DebouncedSearchInput, EmptyState, 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 { ColumnVisibilityMenu, DataTablePagination, SortableHeader, useColumnVisibility } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useRouteCounts, useRoutes } from "@/hooks/finance/use-cost-route"
+import { useUrlState } from "@/lib/hooks"
+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: "promoted_from_draft_id", header: "From draft",  defaultHidden: true },
+] 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 [wizardOpen, setWizardOpen] = 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
+
+  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 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"
+      >
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>
+              <Plus className="mr-1 h-4 w-4" />
+              <span className="hidden sm:inline">New route</span>
+              <span className="sm:hidden">New</span>
+              <ChevronDown className="ml-1 h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setWizardOpen(true)}>
+              From product (wizard)
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </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} 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>
+
+      {/* 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">
+          <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="w-24 pl-4" {...sortProps} />
+                )}
+                {show("product_code") && (
+                  <SortableHeader label="Product" sortKey="product_code" {...sortProps} />
+                )}
+                {show("status") && (
+                  <SortableHeader label="Status" sortKey="status" className="w-28" {...sortProps} />
+                )}
+                {show("version") && (
+                  <SortableHeader label="Version" sortKey="version" className="w-24" {...sortProps} />
+                )}
+                {show("promoted_from_draft_id") && (
+                  <TableHead className="w-28">From draft</TableHead>
+                )}
+              </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("promoted_from_draft_id") && <TableCell><Skeleton className="h-4 w-10" /></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="cursor-pointer hover:bg-muted/50"
+                  onClick={() => router.push(`/finance/routes/${h.headId}`)}
+                >
+                  {show("head_id") && (
+                    <TableCell className="pl-4 font-mono text-xs">#{h.headId}</TableCell>
+                  )}
+                  {show("product_code") && (
+                    <TableCell>
+                      <div className="font-medium">{h.productCode || "—"}</div>
+                      {h.productName && (
+                        <div className="text-xs text-muted-foreground">{h.productName}</div>
+                      )}
+                    </TableCell>
+                  )}
+                  {show("status") && (
+                    <TableCell>
+                      <StatusBadge status={h.routingStatus} type="route" size="sm" />
+                    </TableCell>
+                  )}
+                  {show("version") && (
+                    <TableCell className="text-sm">v{h.version}</TableCell>
+                  )}
+                  {show("promoted_from_draft_id") && (
+                    <TableCell className="text-sm">
+                      {h.promotedFromDraftId ? `#${h.promotedFromDraftId}` : "—"}
+                    </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 })}
+        />
+      )}
+
+      <CreateRoutingWizard
+        open={wizardOpen}
+        onClose={() => setWizardOpen(false)}
+        requestId={0}
+      />
+    </div>
+  )
+}
diff --git a/src/components/finance/cost-route/linked-requests-popover.tsx b/src/components/finance/cost-route/linked-requests-popover.tsx
index 15d8b66..84fbd4b 100644
--- a/src/components/finance/cost-route/linked-requests-popover.tsx
+++ b/src/components/finance/cost-route/linked-requests-popover.tsx
@@ -1,10 +1,18 @@
 "use client"
 
+import { useState } from "react"
 import Link from "next/link"
+import { Link2, X } from "lucide-react"
 
-import { Badge } from "@/components/ui/badge"
+import { StatusBadge } from "@/components/common/status-badge"
 import { Button } from "@/components/ui/button"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet"
 import { useLinkedRequests } from "@/hooks/finance/use-duplicate-route"
 
 interface Props {
@@ -12,36 +20,75 @@ interface Props {
 }
 
 export function LinkedRequestsPopover({ headId }: Props) {
+  const [open, setOpen] = useState(false)
   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>
+    <>
+      <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-editor.tsx b/src/components/finance/cost-route/route-graph-editor.tsx
index 0567706..e055698 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,
@@ -29,6 +31,7 @@ import { DuplicateRouteDialog } from "@/components/finance/cost-route/duplicate-
 import { LinkedRequestsPopover } from "@/components/finance/cost-route/linked-requests-popover"
 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, DialogContent, DialogDescription, DialogFooter, DialogHeader, 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"
@@ -84,6 +88,7 @@ export function RouteGraphEditor({ headId }: Props) {
   >({ 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)
@@ -190,8 +195,7 @@ export function RouteGraphEditor({ headId }: Props) {
     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((_, i) => i !== seqIdx) }
     })
     setDirty(true)
   }
@@ -224,10 +228,12 @@ 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)
   }
@@ -288,13 +294,20 @@ export function RouteGraphEditor({ headId }: Props) {
   // scroll to the right card.
   const stageCardRefs = useRef<Map<number, HTMLDivElement | null>>(new Map())
   const handleStageClick = useCallback((seqId: number) => {
+    if (seqId === 0) {
+      toast.info("Save the route first to edit this element.")
+      return
+    }
     setSelectedRmId(null)
     setSelectedSeqId(seqId)
   }, [])
 
   // Click edge → open inline edit panel for that RM.
   const handleEdgeClick = useCallback((rmId: number) => {
-    if (rmId === 0) return // unsaved RM — wait until save
+    if (rmId === 0) {
+      toast.info("Save the route first to edit this element.")
+      return
+    }
     setSelectedSeqId(null)
     setSelectedRmId(rmId)
   }, [])
@@ -371,19 +384,22 @@ 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>
@@ -398,7 +414,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 +433,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,8 +444,9 @@ 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>
       )}
 
@@ -573,14 +586,22 @@ export function RouteGraphEditor({ headId }: Props) {
                           key={`${rm.rmId}-${rmIdx}`}
                           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
@@ -675,6 +696,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
diff --git a/src/components/finance/cost-route/route-graph-flow.tsx b/src/components/finance/cost-route/route-graph-flow.tsx
index a03c519..0e986cf 100644
--- a/src/components/finance/cost-route/route-graph-flow.tsx
+++ b/src/components/finance/cost-route/route-graph-flow.tsx
@@ -88,8 +88,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 +100,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,8 +114,10 @@ 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 }}
     >
@@ -121,7 +125,7 @@ const RmNode = ({ data }: NodeProps<Node<RmNodeData>>) => {
         <Badge variant="outline" className="px-1 py-0 text-[9px]">
           {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>

From c52308a22835a322be9b9583f9f7f420243ca4b2 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 08:37:25 +0700
Subject: [PATCH 18/23] =?UTF-8?q?feat(finance):=20routing=20pages=20UX=20?=
 =?UTF-8?q?=E2=80=94=20list=20polish=20+=20react-flow=20uid=20keying,=20rm?=
 =?UTF-8?q?=20drag,=20dark=20mode,=20modals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

List page: level/rm count columns, sort fix (head_id/version), KPI/filter polish.
Detail page: client-uuid keying for stages/RMs (fixes new-node-edit + multi-delete
on unsaved elements), RM drag position persists, RM label shows group name, dark
mode support in react-flow nodes, add-stage/add-RM dialogs restyled.
Renamed linked-requests-popover.tsx -> linked-requests-sheet.tsx (Popover -> Sheet).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/route-lock-card.test.tsx       |   2 +
 .../finance/routes/routes-page-client.tsx     | 133 ++++---
 .../v1/finance/routes/[headId]/graph/route.ts |   3 +
 ...-popover.tsx => linked-requests-sheet.tsx} |   2 +-
 .../cost-route/route-graph-edit-panel.tsx     |   2 +-
 .../finance/cost-route/route-graph-editor.tsx | 337 ++++++++++--------
 .../finance/cost-route/route-graph-flow.tsx   | 164 +++++----
 src/types/finance/cost-route.ts               |  37 +-
 src/types/generated/finance/v1/cost_route.ts  | 115 ++++++
 9 files changed, 515 insertions(+), 280 deletions(-)
 rename src/components/finance/cost-route/{linked-requests-popover.tsx => linked-requests-sheet.tsx} (98%)

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/app/(dashboard)/finance/routes/routes-page-client.tsx b/src/app/(dashboard)/finance/routes/routes-page-client.tsx
index f39f722..74d8312 100644
--- a/src/app/(dashboard)/finance/routes/routes-page-client.tsx
+++ b/src/app/(dashboard)/finance/routes/routes-page-client.tsx
@@ -1,33 +1,30 @@
 "use client"
 
 import { useMemo, useState } from "react"
+import Link from "next/link"
 import { useRouter } from "next/navigation"
 import {
   CheckCircle2,
-  ChevronDown,
   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 { CreateRoutingWizard } from "@/components/finance/cost-product-request/create-routing-wizard"
+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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+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, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+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
@@ -36,7 +33,8 @@ const ROUTE_COLUMNS = [
   { id: "product_code",           header: "Product" },
   { id: "status",                 header: "Status" },
   { id: "version",                header: "Version",     defaultHidden: false },
-  { id: "promoted_from_draft_id", header: "From draft",  defaultHidden: true },
+  { id: "level_count",            header: "# levels" },
+  { id: "rm_count",               header: "# RM" },
 ] as const
 
 type ColId = (typeof ROUTE_COLUMNS)[number]["id"]
@@ -55,7 +53,7 @@ const defaultFilters: ListRoutesParams = {
 export default function RoutesPageClient() {
   const router = useRouter()
   const [filters, setFilters] = useUrlState<ListRoutesParams>({ defaultValues: defaultFilters })
-  const [wizardOpen, setWizardOpen] = useState(false)
+  const [resolverOpen, setResolverOpen] = useState(false)
 
   const { data, isLoading } = useRoutes(filters)
   const { data: counts, isLoading: countsLoading } = useRouteCounts()
@@ -63,6 +61,9 @@ export default function RoutesPageClient() {
   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 =
@@ -76,6 +77,19 @@ export default function RoutesPageClient() {
     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
@@ -87,28 +101,17 @@ export default function RoutesPageClient() {
         subtitle="Multi-stage routings (DAG): one head per product, each stage produces an intermediate or FG product."
         className="pb-0"
       >
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button>
-              <Plus className="mr-1 h-4 w-4" />
-              <span className="hidden sm:inline">New route</span>
-              <span className="sm:hidden">New</span>
-              <ChevronDown className="ml-1 h-3 w-3" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={() => setWizardOpen(true)}>
-              From product (wizard)
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <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} 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} />
+        <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 */}
@@ -136,7 +139,12 @@ export default function RoutesPageClient() {
             <SelectItem value="LOCKED">Locked</SelectItem>
           </SelectContent>
         </Select>
-        <div className="flex items-center justify-end">
+        <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}
@@ -155,19 +163,22 @@ export default function RoutesPageClient() {
             <TableHeader>
               <TableRow>
                 {show("head_id") && (
-                  <SortableHeader label="Head #" sortKey="head_id" className="w-24 pl-4" {...sortProps} />
+                  <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" {...sortProps} />
+                  <SortableHeader label="Product" sortKey="product_code" className={edgeRight("product_code")} {...sortProps} />
                 )}
                 {show("status") && (
-                  <SortableHeader label="Status" sortKey="status" className="w-28" {...sortProps} />
+                  <SortableHeader label="Status" sortKey="status" className={cn("w-28", edgeRight("status"))} {...sortProps} />
                 )}
                 {show("version") && (
-                  <SortableHeader label="Version" sortKey="version" className="w-24" {...sortProps} />
+                  <SortableHeader label="Version" sortKey="version" className={cn("w-24", edgeRight("version"))} {...sortProps} />
                 )}
-                {show("promoted_from_draft_id") && (
-                  <TableHead className="w-28">From draft</TableHead>
+                {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>
@@ -179,7 +190,8 @@ export default function RoutesPageClient() {
                     {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("promoted_from_draft_id") && <TableCell><Skeleton className="h-4 w-10" /></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 && (
@@ -195,16 +207,17 @@ export default function RoutesPageClient() {
                 </TableRow>
               )}
               {items.map((h) => (
-                <TableRow
-                  key={h.headId}
-                  className="cursor-pointer hover:bg-muted/50"
-                  onClick={() => router.push(`/finance/routes/${h.headId}`)}
-                >
+                <TableRow key={h.headId} className="relative cursor-pointer hover:bg-muted/50">
                   {show("head_id") && (
-                    <TableCell className="pl-4 font-mono text-xs">#{h.headId}</TableCell>
+                    <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>
+                    <TableCell className={edgeRight("product_code")}>
                       <div className="font-medium">{h.productCode || "—"}</div>
                       {h.productName && (
                         <div className="text-xs text-muted-foreground">{h.productName}</div>
@@ -212,17 +225,18 @@ export default function RoutesPageClient() {
                     </TableCell>
                   )}
                   {show("status") && (
-                    <TableCell>
+                    <TableCell className={edgeRight("status")}>
                       <StatusBadge status={h.routingStatus} type="route" size="sm" />
                     </TableCell>
                   )}
                   {show("version") && (
-                    <TableCell className="text-sm">v{h.version}</TableCell>
+                    <TableCell className={cn("text-sm", edgeRight("version"))}>v{h.version}</TableCell>
                   )}
-                  {show("promoted_from_draft_id") && (
-                    <TableCell className="text-sm">
-                      {h.promotedFromDraftId ? `#${h.promotedFromDraftId}` : "—"}
-                    </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>
               ))}
@@ -242,11 +256,20 @@ export default function RoutesPageClient() {
         />
       )}
 
-      <CreateRoutingWizard
-        open={wizardOpen}
-        onClose={() => setWizardOpen(false)}
-        requestId={0}
-      />
+      <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/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/finance/cost-route/linked-requests-popover.tsx b/src/components/finance/cost-route/linked-requests-sheet.tsx
similarity index 98%
rename from src/components/finance/cost-route/linked-requests-popover.tsx
rename to src/components/finance/cost-route/linked-requests-sheet.tsx
index 84fbd4b..e466e10 100644
--- a/src/components/finance/cost-route/linked-requests-popover.tsx
+++ b/src/components/finance/cost-route/linked-requests-sheet.tsx
@@ -19,7 +19,7 @@ interface Props {
   headId: number
 }
 
-export function LinkedRequestsPopover({ headId }: Props) {
+export function LinkedRequestsSheet({ headId }: Props) {
   const [open, setOpen] = useState(false)
   const { data } = useLinkedRequests(headId)
   const rows = data ?? []
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 e055698..5bab5f6 100644
--- a/src/components/finance/cost-route/route-graph-editor.tsx
+++ b/src/components/finance/cost-route/route-graph-editor.tsx
@@ -28,7 +28,7 @@ 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"
@@ -43,7 +43,7 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command"
-import { Dialog, DialogContent, DialogDescription, 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"
@@ -63,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"
 
@@ -84,15 +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
@@ -141,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.
@@ -162,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,
@@ -183,31 +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
-      return { ...base, seqs: base.seqs.filter((_, i) => i !== seqIdx) }
+      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 }
@@ -240,32 +253,60 @@ export function RouteGraphEditor({ headId }: Props) {
 
   // ---------- 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],
+  )
+
+  // 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.
+  // 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) {
@@ -292,24 +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) => {
-    if (seqId === 0) {
-      toast.info("Save the route first to edit this element.")
-      return
-    }
-    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) {
-      toast.info("Save the route first to edit this element.")
-      return
-    }
-    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).
@@ -323,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)
     },
@@ -335,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).
@@ -354,7 +392,7 @@ export function RouteGraphEditor({ headId }: Props) {
       setStageDialogState({
         open: true,
         defaultLevel,
-        linkToSeqId: sourceSeqId,
+        linkToSeqUid: sourceSeqUid,
         linkDirection,
       })
     },
@@ -386,7 +424,6 @@ export function RouteGraphEditor({ headId }: Props) {
           <div className="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
             <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 && (
             <details className="mt-2">
@@ -406,7 +443,7 @@ export function RouteGraphEditor({ headId }: Props) {
           )}
         </div>
         <div className="flex flex-wrap gap-2">
-          <LinkedRequestsPopover headId={headId} />
+          <LinkedRequestsSheet headId={headId} />
           <CalculateButton
             routeHeadId={headId}
             size="sm"
@@ -451,7 +488,7 @@ export function RouteGraphEditor({ headId }: Props) {
       )}
 
       {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>
       )}
@@ -486,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}
@@ -496,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>
@@ -540,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">
@@ -570,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" />
@@ -583,7 +619,7 @@ 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 flex-1">
@@ -642,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.
@@ -730,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,
@@ -747,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 (
@@ -769,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
@@ -824,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"
@@ -838,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
@@ -894,8 +933,8 @@ function AddStageDialog({
           >
             Add stage
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </ScrollableDialogFooter>
+      </ScrollableDialogContent>
     </Dialog>
   )
 }
@@ -922,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)
@@ -940,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}
@@ -966,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}
@@ -982,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"
@@ -1000,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"
@@ -1012,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
@@ -1073,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 0e986cf..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
@@ -122,7 +128,7 @@ const RmNode = ({ data }: NodeProps<Node<RmNodeData>>) => {
       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 text-foreground">{data.label}</span>
@@ -146,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[] = []
@@ -201,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,
@@ -213,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,
         })
       })
     })
@@ -273,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) : ""
 }
 
 // ============================================================================
@@ -295,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(
@@ -331,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],
   )
@@ -343,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],
   )
@@ -354,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",
       }
     },
@@ -373,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],
   )
@@ -382,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],
   )
@@ -394,6 +407,7 @@ export function RouteGraphFlow({
         nodes={nodes}
         edges={edges}
         nodeTypes={nodeTypes}
+        colorMode={colorMode}
         fitView
         proOptions={{ hideAttribution: true }}
         nodesDraggable={!locked}
diff --git a/src/types/finance/cost-route.ts b/src/types/finance/cost-route.ts
index 8ae4569..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),
   }
 }
 
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;
   },
 };

From 4289d177d35f13d3603e66624c8a03ab85fb6084 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 08:37:32 +0700
Subject: [PATCH 19/23] fix(finance): product master row navigation via anchor
 overlay instead of onClick

Replace TableRow onClick + router.push with an absolutely-positioned Link
covering the product_code cell, so the row stays keyboard/middle-click/
new-tab friendly. Actions cell raised to z-10 to stay clickable above it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../product-master-table.tsx                   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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">

From 910061c19b1c9ae542590000dd61e447fa9bcf5e Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 08:37:47 +0700
Subject: [PATCH 20/23] docs: expand CLAUDE.md with key dependencies +
 improvement notes from doc audit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CLAUDE.md | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 2370546..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
@@ -947,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
@@ -1043,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
@@ -1218,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 |

From 22e79583b37837f3e737ddb687aecfdff7f7b8e0 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 08:38:25 +0700
Subject: [PATCH 21/23] feat(finance): product request classification +
 workflow revamp (frontend)

Combines two batches whose frontend edits landed interleaved in the working
tree (product-requests-ux-batch, product-request-workflow-revamp):

product-requests-ux-batch:
- request-table.tsx: sortable columns, "Pending" badge for pending classification.
- product-requests-page-client.tsx: sort state wired to SortableHeader.
- request-form-dialog.tsx: form restructure (D1-D5 field changes).

product-request-workflow-revamp:
- RoutingResolver component + useResolveRouting() hook replace the deleted
  create-routing-wizard.tsx / pick-existing-route-dialog.tsx (link-existing /
  create-from-product / create-master-then-route, all inline).
  RoutingPanel and the review dialog's routing phase both consume it.
- transition-dialogs.tsx: ClassificationAndFeasibilityDialog gains a routing
  phase between classified/deciding, gated on resolvedHeadId.
- useSubmitAndDecide hook + BFF route for the merged Submit+StartReview action.
- cost-product-request-import-dialog.tsx + BFF export/import/template routes
  for bulk request handling (xlsx, UOM-pattern), wired into a dropdown next
  to "New request".
- PaperTubeName: fixed Paper/Plastic enum display, falls back to legacy
  cost_paper_tube_type lookup for historical rows.
- FillTrackingDrawer: product info extracted into FillTrackingDrawerRow +
  badges.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 ...sification-and-feasibility-dialog.test.tsx |  204 +++
 ...ost-product-request-import-dialog.test.tsx |  123 ++
 .../components/fill-tracking-drawer.test.tsx  |  174 +++
 .../components/paper-tube-name.test.tsx       |   62 +
 .../components/request-form-dialog.test.tsx   |  155 ++
 .../components/routing-resolver.test.tsx      |  156 ++
 .../product-requests-page-client.tsx          |   85 +-
 .../[requestId]/route.ts                      |    9 +-
 .../[requestId]/submit-and-decide/route.ts    |   23 +
 .../cost-product-requests/export/route.ts     |   45 +
 .../cost-product-requests/import/route.ts     |   49 +
 .../v1/finance/cost-product-requests/route.ts |    9 +-
 .../cost-product-requests/template/route.ts   |   35 +
 src/components/common/paper-tube-name.tsx     |   27 +-
 .../cost-product-request-import-dialog.tsx    |  257 +++
 .../create-routing-wizard.tsx                 |  208 ---
 .../finance/cost-product-request/index.ts     |    1 +
 .../pick-existing-route-dialog.tsx            |   70 -
 .../request-detail-panel.tsx                  |   27 +-
 .../request-form-dialog.tsx                   |  356 ++---
 .../cost-product-request/request-table.tsx    |   70 +-
 .../cost-product-request/routing-panel.tsx    |   47 +-
 .../cost-product-request/routing-resolver.tsx |  216 +++
 .../transition-dialogs.tsx                    |  196 ++-
 .../fill-assignment/FillTrackingDrawer.tsx    |   90 +-
 src/hooks/finance/use-cost-product-request.ts |  139 ++
 src/types/finance/cost-product-request.ts     |   78 +-
 .../finance/v1/cost_product_request.ts        | 1385 ++++++++++++++++-
 28 files changed, 3605 insertions(+), 691 deletions(-)
 create mode 100644 src/__tests__/components/classification-and-feasibility-dialog.test.tsx
 create mode 100644 src/__tests__/components/cost-product-request-import-dialog.test.tsx
 create mode 100644 src/__tests__/components/fill-tracking-drawer.test.tsx
 create mode 100644 src/__tests__/components/paper-tube-name.test.tsx
 create mode 100644 src/__tests__/components/request-form-dialog.test.tsx
 create mode 100644 src/__tests__/components/routing-resolver.test.tsx
 create mode 100644 src/app/api/v1/finance/cost-product-requests/[requestId]/submit-and-decide/route.ts
 create mode 100644 src/app/api/v1/finance/cost-product-requests/export/route.ts
 create mode 100644 src/app/api/v1/finance/cost-product-requests/import/route.ts
 create mode 100644 src/app/api/v1/finance/cost-product-requests/template/route.ts
 create mode 100644 src/components/finance/cost-product-request/cost-product-request-import-dialog.tsx
 delete mode 100644 src/components/finance/cost-product-request/create-routing-wizard.tsx
 delete mode 100644 src/components/finance/cost-product-request/pick-existing-route-dialog.tsx
 create mode 100644 src/components/finance/cost-product-request/routing-resolver.tsx

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-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/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/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/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/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/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 ac4b756..72bac6a 100644
--- a/src/components/finance/cost-product-request/index.ts
+++ b/src/components/finance/cost-product-request/index.ts
@@ -5,3 +5,4 @@ export { StatusBadge } from "./status-badge"
 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/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 64c0ebf..4bf9793 100644
--- a/src/components/finance/cost-product-request/request-detail-panel.tsx
+++ b/src/components/finance/cost-product-request/request-detail-panel.tsx
@@ -47,7 +47,6 @@ import {
   useReopenRequest,
   useRejectRequest,
   useStartReview,
-  useSubmitRequest,
   useCloseRequest,
 } from "@/hooks/finance/use-cost-product-request"
 import type { CostProductRequest } from "@/types/finance/cost-product-request"
@@ -66,7 +65,11 @@ interface Props {
   hasFillTracking?: boolean
 }
 
-type DialogKind = "reject" | "reviewDecide" | "close" | "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)
@@ -74,7 +77,6 @@ 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()
@@ -166,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>
         )}
@@ -307,10 +309,13 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
               </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="Tube">
+                  <PaperTubeName id={request.spec.paperTubeTypeId} tubeType={request.spec.tubeType} />
+                </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>
+                <Field label="Shade code">{request.spec.shadeCode || `master #${request.spec.shadeId ?? "—"}`}</Field>
+                <Field label="Shade name">{request.spec.shadeName || "—"}</Field>
                 <div className="col-span-2 md:col-span-4">
                   <Separator className="my-2" />
                   <Field label="Product description">
@@ -474,6 +479,16 @@ export function RequestDetailPanel({ request, onEdit, allFillsApproved = false,
         requestId={requestId}
         currentClassification={request.productClassification}
         initialVerifiedClassification={request.verifiedClassification}
+        referenceProductSysId={request.referenceProductSysId}
+      />
+      <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..959d3ad 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,11 +24,10 @@ 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"),
@@ -35,18 +35,21 @@ const schema = z.object({
   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>
@@ -63,44 +66,27 @@ const DEFAULTS: FormValues = {
   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) {
@@ -110,17 +96,15 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
         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 +112,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,
       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 +180,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 +273,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}
@@ -354,125 +304,107 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
               />
             </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>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="specProductDescription"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Product description *</FormLabel>
-                      <FormControl>
-                        <Textarea {...field} rows={3} placeholder="Free text describing the requested product" />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+            {/* SECTION 2 — Product Specification & Pricing (always visible; description+tube
+                all-or-nothing, everything else independently optional) */}
+            <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 & pricing
+              </h3>
+              <FormField
+                control={form.control}
+                name="specProductDescription"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Product description</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} rows={3} placeholder="Free text describing the requested product" />
+                    </FormControl>
+                    <FormDescription>Optional — fill in if known.</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <FormField
                   control={form.control}
-                  name="specShadeCustomText"
+                  name="specShadeCode"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Shade *</FormLabel>
+                      <FormLabel>Shade code</FormLabel>
                       <FormControl>
-                        <Input {...field} placeholder="e.g. natural / biru langit / NL" />
+                        <Input {...field} placeholder="e.g. NL, Z114S" />
                       </FormControl>
                       <FormDescription>
-                        Use the master shade name if known, otherwise free-text. Use {`"natural"`} for unpigmented.
+                        Optional — independent of shade name. 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"
+                  name="specShadeName"
                   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>
+                      <FormLabel>Shade name</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="e.g. Natural, Jet Black" />
+                      </FormControl>
+                      <FormDescription>Optional — independent of shade code.</FormDescription>
                       <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>
+              <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 a43c9ce..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>
       </>
     )
   }
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 fd96998..287ea72 100644
--- a/src/components/finance/cost-product-request/transition-dialogs.tsx
+++ b/src/components/finance/cost-product-request/transition-dialogs.tsx
@@ -15,8 +15,10 @@ 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, useVerifyClassification } from "@/hooks/finance/use-cost-product-request"
+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"
 
@@ -66,16 +68,30 @@ export function ReasonDialog({ open, onOpenChange, title, description, confirmLa
 
 // ----- ClassificationAndFeasibilityDialog -------------------------------------------------
 // Merges the former VerifyClassificationDialog + FeasibilityDialog into a single screen
-// (item #2, 2026-07-03 CPR UX batch). Submits sequentially — classification first, then
-// feasibility — reusing the two existing mutations/RPCs unchanged. See design.md §2.
+// (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.
 //
-// Local state machine: "idle" (both sections editable) -> "classifying" (step 1 in flight)
-// -> "classified" (step 1 saved; either about to auto-run step 2, or step 2 failed and the
-// user is retrying just feasibility, with classification now read-only) -> "deciding" (step 2
-// in flight) -> "done" (both 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" | "deciding" | "done"
+// 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
@@ -85,6 +101,17 @@ interface ClassificationAndFeasibilityProps {
   currentClassification: ProductClassification
   /** 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 ClassificationAndFeasibilityDialog({
@@ -93,34 +120,47 @@ export function ClassificationAndFeasibilityDialog({
   requestId,
   currentClassification,
   initialVerifiedClassification,
+  referenceProductSysId,
+  mode = "review",
 }: ClassificationAndFeasibilityProps) {
   const verifyM = useVerifyClassification()
   const feasibilityM = useDecideFeasibility()
+  const linkRouteM = useLinkExistingRoute()
+  const submitAndDecideM = useSubmitAndDecide()
 
   const [phase, setPhase] = useState<ReviewPhase>("idle")
   const [error, setError] = useState<string | null>(null)
 
   const [verified, setVerified] = useState<ProductClassification>(
-    initialVerifiedClassification ?? currentClassification,
+    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
+  const isOverride = verified !== currentClassification && currentClassification !== "pending"
   const isInfeasible = decision === "NOT_FEASIBLE"
-  // Once classification has been saved (either mid-flow or after a step-2 failure we're
+  // 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 === "deciding"
-  const pending = verifyM.isPending || feasibilityM.isPending
+  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)
+    setVerified(initialVerifiedClassification ?? (currentClassification === "pending" ? "existing" : currentClassification))
     setOverrideReason("")
     setDecision("FEASIBLE")
     setNote("")
+    setResolvedHeadId(null)
+    setRouteLinked(false)
   }
 
   async function submitFeasibility() {
@@ -136,16 +176,71 @@ export function ClassificationAndFeasibilityDialog({
       toast.success("Classification & feasibility recorded")
       onOpenChange(false)
     } catch {
-      // Classification already saved — only feasibility needs a retry.
+      // 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 step-2 failure: classification is already saved.
-      await submitFeasibility()
+      // 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) {
@@ -166,12 +261,23 @@ export function ClassificationAndFeasibilityDialog({
       return
     }
     setPhase("classified")
-    await submitFeasibility()
+    await linkResolvedRouteThenDecide()
   }
 
   const canSubmitClassification = classificationLocked || !isOverride || !!overrideReason.trim()
   const canSubmitFeasibility = !isInfeasible || !!note.trim()
-  const canSubmit = (isInfeasible || canSubmitClassification) && canSubmitFeasibility
+  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
@@ -183,9 +289,11 @@ export function ClassificationAndFeasibilityDialog({
     >
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Review &amp; decide</DialogTitle>
+          <DialogTitle>{mode === "submit" ? "Submit for review" : "Review & decide"}</DialogTitle>
           <DialogDescription>
-            Confirm the product classification and decide feasibility for this request.
+            {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>
 
@@ -223,8 +331,14 @@ export function ClassificationAndFeasibilityDialog({
               <div className="space-y-3">
                 <div className="text-xs uppercase tracking-wide text-muted-foreground">Classification</div>
                 <p className="text-sm text-muted-foreground">
-                  Marketing marked this as <strong>{currentClassification}</strong>. Confirm or override; an override
-                  requires a reason.
+                  {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}
@@ -258,6 +372,36 @@ export function ClassificationAndFeasibilityDialog({
             </>
           )}
 
+          {/* 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>
 
@@ -277,7 +421,7 @@ export function ClassificationAndFeasibilityDialog({
             }}
           >
             {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {classificationLocked ? "Retry feasibility" : isInfeasible ? "Reject as infeasible" : "Save & continue"}
+            {submitLabel}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/src/components/finance/fill-assignment/FillTrackingDrawer.tsx b/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
index 1e17a86..eb0688c 100644
--- a/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
+++ b/src/components/finance/fill-assignment/FillTrackingDrawer.tsx
@@ -13,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"
@@ -24,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,
@@ -88,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/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/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/generated/finance/v1/cost_product_request.ts b/src/types/generated/finance/v1/cost_product_request.ts
index f069a5e..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;
   /**
@@ -454,13 +653,15 @@ function createBaseCostProductSpec(): CostProductSpec {
     rawMaterialType: "",
     productDescription: "",
     shadeId: 0,
-    shadeCustomText: "",
+    shadeCode: "",
     paperTubeTypeId: 0,
     paperTubeLabel: "",
     weightPerBobbinKg: "",
     boxType: "",
     createdAt: "",
     createdBy: "",
+    shadeName: "",
+    tubeType: 0,
   };
 }
 
@@ -481,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);
@@ -502,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;
   },
 
@@ -557,7 +764,7 @@ export const CostProductSpec: MessageFns<CostProductSpec> = {
             break;
           }
 
-          message.shadeCustomText = reader.string();
+          message.shadeCode = reader.string();
           continue;
         }
         case 7: {
@@ -608,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;
@@ -644,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)
@@ -679,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,
     };
   },
 
@@ -699,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);
@@ -720,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;
   },
 
@@ -733,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;
   },
 };
@@ -776,6 +1017,7 @@ function createBaseCostProductRequest(): CostProductRequest {
     existingProductSysId: 0,
     linkedRouteHeadId: 0,
     wflInstanceId: "",
+    referenceProductSysId: 0,
   };
 }
 
@@ -871,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;
   },
 
@@ -1121,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;
@@ -1262,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,
     };
   },
 
@@ -1357,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;
   },
 
@@ -1399,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;
   },
 };
@@ -1408,10 +1670,12 @@ function createBaseSpecInput(): SpecInput {
     rawMaterialType: "",
     productDescription: "",
     shadeId: 0,
-    shadeCustomText: "",
+    shadeCode: "",
     paperTubeTypeId: 0,
     weightPerBobbinKg: "",
     boxType: "",
+    shadeName: "",
+    tubeType: 0,
   };
 }
 
@@ -1426,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);
@@ -1438,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;
   },
 
@@ -1477,7 +1747,7 @@ export const SpecInput: MessageFns<SpecInput> = {
             break;
           }
 
-          message.shadeCustomText = reader.string();
+          message.shadeCode = reader.string();
           continue;
         }
         case 5: {
@@ -1504,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;
@@ -1530,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)
@@ -1550,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,
     };
   },
 
@@ -1564,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);
@@ -1576,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;
   },
 
@@ -1587,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;
   },
 };
@@ -1608,6 +1912,7 @@ function createBaseCreateCostProductRequestRequest(): CreateCostProductRequestRe
     urgencyLevel: "",
     neededByDate: "",
     spec: undefined,
+    referenceProductSysId: 0,
   };
 }
 
@@ -1646,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;
   },
 
@@ -1744,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;
@@ -1798,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,
     };
   },
 
@@ -1836,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;
   },
 
@@ -1855,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;
   },
 };
@@ -2240,6 +2565,7 @@ function createBaseUpdateCostProductRequestRequest(): UpdateCostProductRequestRe
     urgencyLevel: "",
     neededByDate: "",
     spec: undefined,
+    referenceProductSysId: 0,
   };
 }
 
@@ -2278,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;
   },
 
@@ -2376,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;
@@ -2430,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,
     };
   },
 
@@ -2468,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;
   },
 
@@ -2487,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;
   },
 };
@@ -2774,28 +3120,632 @@ export const ListCostProductRequestsRequest: MessageFns<ListCostProductRequestsR
   },
 };
 
-function createBaseListCostProductRequestsResponse(): ListCostProductRequestsResponse {
-  return { base: undefined, data: [], pagination: undefined };
+function createBaseListCostProductRequestsResponse(): ListCostProductRequestsResponse {
+  return { base: undefined, data: [], pagination: undefined };
+}
+
+export const ListCostProductRequestsResponse: MessageFns<ListCostProductRequestsResponse> = {
+  encode(message: ListCostProductRequestsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+    if (message.base !== undefined) {
+      BaseResponse.encode(message.base, writer.uint32(10).fork()).join();
+    }
+    for (const v of message.data) {
+      CostProductRequest.encode(v!, writer.uint32(18).fork()).join();
+    }
+    if (message.pagination !== undefined) {
+      PaginationResponse.encode(message.pagination, writer.uint32(26).fork()).join();
+    }
+    return writer;
+  },
+
+  decode(input: BinaryReader | Uint8Array, length?: number): ListCostProductRequestsResponse {
+    const reader = input instanceof BinaryReader ? input : new BinaryReader(input);
+    const end = length === undefined ? reader.len : reader.pos + length;
+    const message = createBaseListCostProductRequestsResponse();
+    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.push(CostProductRequest.decode(reader, reader.uint32()));
+          continue;
+        }
+        case 3: {
+          if (tag !== 26) {
+            break;
+          }
+
+          message.pagination = PaginationResponse.decode(reader, reader.uint32());
+          continue;
+        }
+      }
+      if ((tag & 7) === 4 || tag === 0) {
+        break;
+      }
+      reader.skip(tag & 7);
+    }
+    return message;
+  },
+
+  fromJSON(object: any): ListCostProductRequestsResponse {
+    return {
+      base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
+      data: globalThis.Array.isArray(object?.data) ? object.data.map((e: any) => CostProductRequest.fromJSON(e)) : [],
+      pagination: isSet(object.pagination) ? PaginationResponse.fromJSON(object.pagination) : undefined,
+    };
+  },
+
+  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 ListCostProductRequestsResponse: MessageFns<ListCostProductRequestsResponse> = {
-  encode(message: ListCostProductRequestsResponse, writer: BinaryWriter = new BinaryWriter()): BinaryWriter {
+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();
     }
-    for (const v of message.data) {
-      CostProductRequest.encode(v!, writer.uint32(18).fork()).join();
+    if (message.fileContent.length !== 0) {
+      writer.uint32(18).bytes(message.fileContent);
     }
-    if (message.pagination !== undefined) {
-      PaginationResponse.encode(message.pagination, writer.uint32(26).fork()).join();
+    if (message.fileName !== "") {
+      writer.uint32(26).string(message.fileName);
     }
     return writer;
   },
 
-  decode(input: BinaryReader | Uint8Array, length?: number): ListCostProductRequestsResponse {
+  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 = createBaseListCostProductRequestsResponse();
+    const message = createBaseGetCostProductRequestImportTemplateResponse();
     while (reader.pos < end) {
       const tag = reader.uint32();
       switch (tag >>> 3) {
@@ -2812,7 +3762,7 @@ export const ListCostProductRequestsResponse: MessageFns<ListCostProductRequests
             break;
           }
 
-          message.data.push(CostProductRequest.decode(reader, reader.uint32()));
+          message.fileContent = reader.bytes();
           continue;
         }
         case 3: {
@@ -2820,7 +3770,7 @@ export const ListCostProductRequestsResponse: MessageFns<ListCostProductRequests
             break;
           }
 
-          message.pagination = PaginationResponse.decode(reader, reader.uint32());
+          message.fileName = reader.string();
           continue;
         }
       }
@@ -2832,40 +3782,48 @@ export const ListCostProductRequestsResponse: MessageFns<ListCostProductRequests
     return message;
   },
 
-  fromJSON(object: any): ListCostProductRequestsResponse {
+  fromJSON(object: any): GetCostProductRequestImportTemplateResponse {
     return {
       base: isSet(object.base) ? BaseResponse.fromJSON(object.base) : undefined,
-      data: globalThis.Array.isArray(object?.data) ? object.data.map((e: any) => CostProductRequest.fromJSON(e)) : [],
-      pagination: isSet(object.pagination) ? PaginationResponse.fromJSON(object.pagination) : 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: ListCostProductRequestsResponse): unknown {
+  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;
   },
 };
@@ -3542,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 };
 }
@@ -7100,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,
@@ -7250,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

From c8db9b5651ead4ffde38723c6dc3e6db8890d342 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 10:09:27 +0700
Subject: [PATCH 22/23] test(finance): rewrite CPR E2E spec for
 RoutingResolver/SubmitAndDecide merge

Propagate the P3 helper rewrite (submitAndDecide, submitViaApi/startReviewViaApi
API-bypass pair, useExistingCostingViaApi, findAnyProductSysId) through every
remaining test that still referenced deleted helpers or pre-merge UI text.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 e2e/cpr-full-workflow.spec.ts | 219 +++++++++-----------------------
 e2e/helpers/cpr-helpers.ts    | 232 +++++++++++++++++++++++++---------
 2 files changed, 233 insertions(+), 218 deletions(-)

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) {

From a8e339d4d96abf89d501b05b694794031b797d94 Mon Sep 17 00:00:00 2001
From: ilhom <ilhamram332@gmail.com>
Date: Wed, 8 Jul 2026 10:51:48 +0700
Subject: [PATCH 23/23] fix(finance): simplify product request form and detail
 panel

- Drop the standalone description field from the create/edit form;
  product description now comes solely from the spec section, removing
  duplicate free-text inputs.
- Merge the description and attachments blocks into the product
  specification card in the detail panel, and always render the spec
  card (previously hidden when spec was absent) so description and
  attachments have a consistent home.
- Move shade code/name helper text to a shared FormDescription instead
  of duplicating it per field.
---
 .../request-detail-panel.tsx                  | 49 +++++++------------
 .../request-form-dialog.tsx                   | 27 ++--------
 2 files changed, 24 insertions(+), 52 deletions(-)

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 4bf9793..2c1adcf 100644
--- a/src/components/finance/cost-product-request/request-detail-panel.tsx
+++ b/src/components/finance/cost-product-request/request-detail-panel.tsx
@@ -290,41 +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="Tube">
-                  <PaperTubeName id={request.spec.paperTubeTypeId} tubeType={request.spec.tubeType} />
-                </Field>
-                <Field label="Weight / bobbin">{request.spec.weightPerBobbinKg} kg</Field>
-                <Field label="Box type">{request.spec.boxType}</Field>
-                <Field label="Shade code">{request.spec.shadeCode || `master #${request.spec.shadeId ?? "—"}`}</Field>
-                <Field label="Shade name">{request.spec.shadeName || "—"}</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>
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 959d3ad..b2442df 100644
--- a/src/components/finance/cost-product-request/request-form-dialog.tsx
+++ b/src/components/finance/cost-product-request/request-form-dialog.tsx
@@ -32,7 +32,6 @@ import type { CostProductRequest, SpecInput, UrgencyLevel } from "@/types/financ
 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"),
   urgencyLevel: z.enum(["low", "medium", "high"]),
@@ -63,7 +62,6 @@ interface Props {
 const DEFAULTS: FormValues = {
   requestTypeId: 0,
   title: "",
-  description: "",
   customerName: "",
   customerCode: "",
   urgencyLevel: "medium",
@@ -93,7 +91,6 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
       form.reset({
         requestTypeId: request.requestTypeId,
         title: request.title,
-        description: request.description || "",
         customerName: request.customerName,
         customerCode: request.customerCode || "",
         urgencyLevel: request.urgencyLevel,
@@ -135,7 +132,7 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
     const payload = {
       requestTypeId: values.requestTypeId,
       title: values.title,
-      description: values.description,
+      description: values.specProductDescription || "",
       customerName: values.customerName,
       customerCode: values.customerCode,
       productClassification: isEditing && request ? request.productClassification : "pending",
@@ -289,24 +286,11 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                 />
                 <div />
               </div>
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Description</FormLabel>
-                    <FormControl>
-                      <Textarea {...field} rows={3} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
             </section>
 
             {/* SECTION 2 — Product Specification & Pricing (always visible; description+tube
                 all-or-nothing, everything else independently optional) */}
-            <section className="space-y-4 rounded-md border bg-muted/30 p-4">
+            <section className="space-y-4">
               <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                 Section 2 — Product specification & pricing
               </h3>
@@ -334,9 +318,6 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                       <FormControl>
                         <Input {...field} placeholder="e.g. NL, Z114S" />
                       </FormControl>
-                      <FormDescription>
-                        Optional — independent of shade name. Use {`"natural"`} for unpigmented.
-                      </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -350,12 +331,14 @@ export function RequestFormDialog({ open, onOpenChange, request }: Props) {
                       <FormControl>
                         <Input {...field} placeholder="e.g. Natural, Jet Black" />
                       </FormControl>
-                      <FormDescription>Optional — independent of shade code.</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               </div>
+              <FormDescription>
+                Shade code/name are optional and independent of each other. Use {`"natural"`} for unpigmented.
+              </FormDescription>
               <FormField
                 control={form.control}
                 name="specTubeType"