feat(finance,frontend): add product cost-sheet export UI, fill parameter drawer, and UI fixes (mutugading#74)

* fix(finance): remove unused CalculateRMCost generated types

Follows the backend/proto removal of the synchronous, admin-only
CalculateRMCost RPC (V1 consumption-only calc, superseded by V2 and the
async TriggerRMCostCalculation RPC). No frontend service/hook/BFF route
ever invoked this RPC — dead code.

Removes CalculateRMCostRequest/CalculateRMCostResponse from the generated
proto types and from the hand-written re-export wrapper.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(frontend): resolve fill-config UUID display + responsiveness bugs

Global Defaults and Product Overrides tabs on the fill-config page
rendered raw actor UUIDs instead of user/dept names. Add
FillConfigActorLabel to resolve unprefixed USER/DEPT actor values via
UserName/DeptName, and fix fixed-width popovers/grids on
FillConfigForm and the fill-tasks request picker so they don't
overflow on small screens.

* feat(frontend): replace fill parameters page with an inline drawer

Remove the standalone fill/[taskId] route and FillParamEntryPage in
favor of FillParamDrawer opened directly from FillTaskRow, matching
the drawer pattern used elsewhere in the fill-assignment flow.
Drop the Card wrapper from FillParamProductSection to match the
Edit Params drawer used on the product-request detail page, convert
FillTrackingTable to shadcn Table components, and add a breadcrumb
override on the request detail page to avoid flashing the raw
request ID.

* feat(finance): regenerate TS types for product cost-sheet export contracts

Generated from goapps-shared-proto's finance/v1/cost_calc.proto after
adding the export/batch/route-cost-sheet/period RPCs and messages.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(finance): add product cost-sheet export UI, BFF routes, and hooks

Adds the BFF proxy routes for the async export pipeline (request-export,
periods, and the exports/[jobId] status/download/download-all/children
tree, including per-child download-url) and the corresponding
TanStack Query hooks in use-cost-calc.ts (useRequestCostSheetExport,
useExportJobStatus, useExportBatchProgress, recent-exports list).

ExportCostSheetButton drives both standalone and batch-parent export
jobs from one control: shows live progress for batch children, renders
a Download action once a standalone job completes, and exposes a
dismiss control to clear a previously-selected job back to idle.
ExportBatchFilesPopover lists per-child download links (each presigned
fresh on click) plus a download-all zip action.
RecentExportsPopover lets a user reopen a past export by job id without
re-triggering a new one.

cost-results-page-client.tsx replaces the standalone cost-result-filters
component with an inline filter bar wired to the new product_type_ids/
sort_by/sort_order/period params, and threads exportJobId through URL
state so a selected export survives a refresh. data-table.tsx gains
hideColumnsButton (the export toolbar owns its own actions) and switches
skeleton loading to per-row TableRow cells so column widths don't jump
once data arrives. notification-actions.ts generalizes the
notification-click download-route map to also cover
finance.product_cost_sheet_export.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(frontend): breadcrumb never falls back to raw sys-id on cost result detail

The cost-result detail page previously let dynamic-breadcrumb derive the
trail from the URL segment, which showed the raw system id when the
product/period label hadn't loaded yet (and could flash the id before
the real label painted in). Adds useBreadcrumbTrail so the page can push
an explicit, already-resolved trail (using the new calcTypeLabel helper
in format.ts, also shared by the results list), and switches
dynamic-breadcrumb's override wiring to useIsomorphicLayoutEffect so the
trail is set before first paint instead of flashing the fallback first.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(finance): resolve MASTER_LOOKUP params in formula input picker

Formula inputs such as F_YARN_VB1_LOSS consume MASTER_LOOKUP params
(CHANGE_OVER_QLTY_LOSS, VOLUME_BUCKET_1_QTY), but the input picker only
queried INPUT/RATE/CALCULATED, so those ids were unresolvable and
rendered as raw UUIDs with no way to checklist them. Adds the
MASTER_LOOKUP param query to the pool and a resolveParamLabel fallback
that checks the pool first, then the formula's own joined inputParams,
before ever falling back to a placeholder — never a bare UUID.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* docs(frontend): clarify use-url-state ref staleness in the setState comment

The comment claimed the ref was synced during render, but it is synced
in a passive effect and lags by one commit. No functional change — the
lag is not currently observable since every caller passes a whole new
object or derives from state directly — just correcting the comment so
it doesn't mislead the next person relying on the ref inside an
earlier-running effect.

Authored-By: Ilham R <ilhamram332@gmail.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: ilramdhan

src/app/(dashboard)/finance/costing/fill-config/page.tsx

@@ -12,6 +12,16 @@ import { useUser } from "@/providers/auth-provider";
 import { FillTrackingTable } from "@/components/finance/fill-assignment/FillTrackingTable";
 import { FillBlockerAlert } from "@/components/finance/fill-assignment/FillBlockerAlert";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { PageHeader } from "@/components/common/page-header";
+import { EmptyState } from "@/components/common/empty-state";
 import {
   Command,
   CommandEmpty,
@@ -56,15 +66,17 @@ function RequestPicker({ selectedId, onSelect }: RequestPickerProps) {
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full max-w-md justify-between"
+          className="w-full justify-between font-normal"
         >
-          {selectedItem
-            ? `${selectedItem.requestNo} — ${selectedItem.title}`
-            : "Select request…"}
+          <span className="truncate">
+            {selectedItem
+              ? `${selectedItem.requestNo} — ${selectedItem.title}`
+              : "Select request…"}
+          </span>
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[480px] p-0">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
         <Command shouldFilter={false}>
           <CommandInput
             placeholder="Search by request no or title…"
@@ -149,23 +161,22 @@ function FillTasksContent({ requestId, onRequestSelect }: FillTasksContentProps)
       </div>
 
       {!requestId ? (
-        <div className="flex flex-col items-center justify-center py-24 text-center gap-4">
-          <ClipboardList className="h-12 w-12 text-muted-foreground/40" />
-          <div>
-            <p className="text-base font-medium text-muted-foreground">
-              No request selected
-            </p>
-            <p className="text-sm text-muted-foreground mt-1">
-              Search for a product request above to view its fill tasks.
-            </p>
-          </div>
-        </div>
+        <EmptyState
+          icon={ClipboardList}
+          title="No request selected"
+          description="Search for a product request above to view its fill tasks."
+        />
       ) : isLoading ? (
-        <p className="text-sm text-muted-foreground">Loading fill tasks…</p>
+        <div className="space-y-2">
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-9 w-full" />
+        </div>
       ) : tasks.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          No fill tasks found for this request.
-        </p>
+        <EmptyState
+          title="No fill tasks found"
+          description="This request has no fill tasks yet."
+        />
       ) : (
         <>
           {myBlockerTask && <FillBlockerAlert task={myBlockerTask} />}
@@ -226,20 +237,32 @@ function FillTasksPageContent() {
 
 export default function FillTasksPage() {
   return (
-    <div className="p-6 space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Fill Tasks</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          Parameter fill tasks and approvals for costing requests.
-        </p>
-      </div>
-      <Suspense
-        fallback={
-          <p className="text-sm text-muted-foreground">Loading…</p>
-        }
-      >
-        <FillTasksPageContent />
-      </Suspense>
+    <div className="space-y-6">
+      <PageHeader
+        title="Fill Tasks"
+        subtitle="Parameter fill tasks and approvals for costing requests."
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">Fill Tracking</CardTitle>
+          <CardDescription>
+            Select a request to view and manage its parameter fill tasks.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Suspense
+            fallback={
+              <div className="space-y-2">
+                <Skeleton className="h-9 w-full max-w-md" />
+                <Skeleton className="h-9 w-full" />
+              </div>
+            }
+          >
+            <FillTasksPageContent />
+          </Suspense>
+        </CardContent>
+      </Card>
     </div>
   );
 }

src/app/(dashboard)/finance/costing/fill-tasks/page.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft } from "lucide-react"
 
 import { PageHeader } from "@/components/common/page-header"
 import { EmptyState } from "@/components/common/empty-state"
+import { useBreadcrumbOverride } from "@/components/common/dynamic-breadcrumb"
 import { Button } from "@/components/ui/button"
 import {
   RequestDetailPanel,
@@ -35,6 +36,8 @@ export default function ProductRequestDetailClient({ requestId }: Props) {
     fillTasks.every((t) => t.status === "FILL_TASK_STATUS_APPROVED")
   const [formOpen, setFormOpen] = useState(false)
 
+  useBreadcrumbOverride(request?.requestNo ?? null)
+
   function backToList() {
     router.push("/finance/product-requests")
   }

src/app/(dashboard)/finance/product-requests/[requestId]/detail-client.tsx

@@ -0,0 +1,61 @@
+// GET /api/v1/finance/cost-results/exports/{jobId}/children/{childJobId}/download-url
+// — freshly presign one batch child's artifact on demand. The batch-children
+// list (see ../../children/route.ts) is fetched once and cached (staleTime:
+// Infinity in useExportBatchChildren), so any downloadUrl it carries can be
+// stale by the time the user clicks Download (MinIO presigned URLs expire
+// after ~5 min). This route re-presigns fresh, every call.
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostCalcClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type Ctx = { params: Promise<{ jobId: string; childJobId: string }> }
+
+export async function GET(request: NextRequest, ctx: Ctx) {
+  try {
+    const { jobId, childJobId } = await ctx.params
+    const metadata = createMetadataFromRequest(request)
+    const client = getCostCalcClient()
+
+    const response = await client.getBatchChildDownloadUrl(
+      { parentJobId: jobId, childJobId },
+      metadata,
+    )
+    if (response.base?.isSuccess === false) {
+      return NextResponse.json(
+        { base: response.base },
+        { status: Number(response.base?.statusCode ?? "400") || 400 },
+      )
+    }
+    if (!response.downloadUrl) {
+      return NextResponse.json(
+        {
+          base: {
+            isSuccess: false,
+            statusCode: "404",
+            message: "Download URL unavailable",
+            validationErrors: [],
+          },
+        },
+        { status: 404 },
+      )
+    }
+
+    return NextResponse.json({
+      base: response.base,
+      data: { downloadUrl: response.downloadUrl, fileName: response.fileName },
+    })
+  } catch (error) {
+    if (isGrpcError(error)) return handleGrpcError(error)
+    return NextResponse.json(
+      {
+        base: {
+          isSuccess: false,
+          statusCode: "500",
+          message: "Failed to resolve batch child download URL",
+          validationErrors: [],
+        },
+      },
+      { status: 500 },
+    )
+  }
+}

src/app/(dashboard)/finance/product-requests/[requestId]/fill/[taskId]/loading.tsx

@@ -0,0 +1,42 @@
+// GET /api/v1/finance/cost-results/exports/{jobId}/children — enumerate a
+// batch-tracking parent export job's child jobs (status + download URL once
+// ready). Only meaningful for batch exports (see CostSheetExportJobInfo.isBatch).
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostCalcClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type Ctx = { params: Promise<{ jobId: string }> }
+
+export async function GET(request: NextRequest, ctx: Ctx) {
+  try {
+    const { jobId } = await ctx.params
+    const metadata = createMetadataFromRequest(request)
+    const client = getCostCalcClient()
+
+    const response = await client.listCostSheetExportBatchChildren({ parentJobId: jobId }, metadata)
+    if (response.base?.isSuccess === false) {
+      return NextResponse.json(
+        { base: response.base },
+        { status: Number(response.base?.statusCode ?? "400") || 400 },
+      )
+    }
+
+    return NextResponse.json({
+      base: response.base,
+      data: { children: response.children || [] },
+    })
+  } catch (error) {
+    if (isGrpcError(error)) return handleGrpcError(error)
+    return NextResponse.json(
+      {
+        base: {
+          isSuccess: false,
+          statusCode: "500",
+          message: "Failed to list export batch children",
+          validationErrors: [],
+        },
+      },
+      { status: 500 },
+    )
+  }
+}

src/app/(dashboard)/finance/product-requests/[requestId]/fill/[taskId]/page.tsx

@@ -0,0 +1,58 @@
+// GET /api/v1/finance/cost-results/exports/{jobId}/download-all — bundle
+// every completed child artifact of a batch export job into one zip and
+// stream it back as a native browser download.
+//
+// DownloadExportBatchZip has no BaseResponse envelope on success (see the
+// proto comment on DownloadExportBatchZipResponse), so gRPC errors surface
+// as thrown errors here rather than an `isSuccess: false` base field.
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostCalcClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type Ctx = { params: Promise<{ jobId: string }> }
+
+export async function GET(request: NextRequest, ctx: Ctx) {
+  try {
+    const { jobId } = await ctx.params
+    const metadata = createMetadataFromRequest(request)
+    const client = getCostCalcClient()
+
+    const response = await client.downloadExportBatchZip({ parentJobId: jobId }, metadata)
+    if (!response.zipData || response.zipData.length === 0) {
+      return NextResponse.json(
+        {
+          base: {
+            isSuccess: false,
+            statusCode: "404",
+            message: "No completed files available to download",
+            validationErrors: [],
+          },
+        },
+        { status: 404 },
+      )
+    }
+
+    const fileName = response.fileName || "cost-sheet-export.zip"
+    return new NextResponse(Buffer.from(response.zipData), {
+      status: 200,
+      headers: {
+        "Content-Type": "application/octet-stream",
+        "Content-Disposition": `attachment; filename="${fileName}"`,
+        "Content-Length": String(response.zipData.length),
+      },
+    })
+  } catch (error) {
+    if (isGrpcError(error)) return handleGrpcError(error)
+    return NextResponse.json(
+      {
+        base: {
+          isSuccess: false,
+          statusCode: "500",
+          message: "Failed to build batch export zip",
+          validationErrors: [],
+        },
+      },
+      { status: 500 },
+    )
+  }
+}

src/app/api/v1/finance/cost-results/exports/[jobId]/children/[childJobId]/download-url/route.ts

@@ -0,0 +1,54 @@
+// GET /api/v1/finance/cost-results/exports/{jobId}/download — redirect to a
+// presigned MinIO URL for a finished product cost sheet export.
+//
+// GetProductCostSheetDownloadURL verifies job ownership and COMPLETED status
+// server-side before presigning, so this route only translates the envelope.
+
+import { NextRequest, NextResponse } from "next/server"
+import { getCostCalcClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type Ctx = { params: Promise<{ jobId: string }> }
+
+export async function GET(request: NextRequest, ctx: Ctx) {
+  try {
+    const { jobId } = await ctx.params
+    const metadata = createMetadataFromRequest(request)
+    const client = getCostCalcClient()
+
+    const response = await client.getProductCostSheetDownloadURL({ jobId }, metadata)
+    if (response.base?.isSuccess === false) {
+      return NextResponse.json(
+        { base: response.base },
+        { status: Number(response.base?.statusCode ?? "400") || 400 },
+      )
+    }
+    const url = response.data?.url ?? ""
+    if (!url) {
+      return NextResponse.json(
+        {
+          base: {
+            isSuccess: false,
+            statusCode: "404",
+            message: "Download URL unavailable",
+            validationErrors: [],
+          },
+        },
+        { status: 404 },
+      )
+    }
+    return NextResponse.redirect(url, { status: 302 })
+  } catch (error) {
+    if (isGrpcError(error)) return handleGrpcError(error)
+    return NextResponse.json(
+      {
+        base: {
+          isSuccess: false,
+          statusCode: "500",
+          message: "Failed to resolve download URL",
+          validationErrors: [],
+        },
+      },
+      { status: 500 },
+    )
+  }
+}