From e4e17e32ecd906bec7f17d41961db4e87e37be23 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 17:03:28 +0700
Subject: [PATCH] refactor: enhance StockPendingApprovalSection to include
 pricing information and improve layout for better clarity in stock results

---
 .../table/StockPendingApprovalSection.vue     | 31 ++++++++++++++++---
 resources/js/types/cutting.ts                 |  8 +++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue b/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
index 6d93197..9859d7a 100644
--- a/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
+++ b/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
@@ -127,7 +127,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
-                                <template v-for="group in getGroupedMaterials(cutting.materials)" :key="group.rawMaterialId">
+                                <template v-for="group in getGroupedMaterials(cutting.materials)"
+                                    :key="group.rawMaterialId">
                                     <TableRow class="bg-muted/20 hover:bg-muted/20">
                                         <TableCell colspan="3" class="font-semibold text-foreground">
                                             <template v-if="group.isCombination">
@@ -143,7 +144,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                             </template>
                                             <template v-else>
                                                 {{ group.rawMaterialName }}
-                                                <Badge v-if="group.unitLabel" variant="secondary" class="ml-2 font-normal">
+                                                <Badge v-if="group.unitLabel" variant="secondary"
+                                                    class="ml-2 font-normal">
                                                     {{ group.unitLabel }}
                                                 </Badge>
                                             </template>
@@ -157,7 +159,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                             <MediaThumbnailCell :items="material.images ?? []" :max-visible="1" />
                                         </TableCell>
                                         <TableCell class="tabular-nums">
-                                            <template v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
+                                            <template
+                                                v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
                                                 {{ material.material_result }} pcs
                                             </template>
                                             <template v-else>
@@ -182,11 +185,12 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                     <TableHead>Hasil</TableHead>
                                     <TableHead>Bagus</TableHead>
                                     <TableHead>Reject</TableHead>
+                                    <TableHead>Harga</TableHead>
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
                                 <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
-                                    <TableCell colspan="5" class="text-muted-foreground">
+                                    <TableCell colspan="6" class="text-muted-foreground">
                                         Belum ada hasil verifikasi
                                     </TableCell>
                                 </TableRow>
@@ -195,7 +199,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                         {{ result.product_variant?.product?.name }} ({{ result.product_variant?.name }})
                                     </TableCell>
                                     <TableCell>
-                                        <MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
+                                        <MediaThumbnailCell :items="result.product_variant?.images ?? []"
+                                            :max-visible="1" />
                                     </TableCell>
                                     <TableCell class="tabular-nums">
                                         {{ result.cutting_result }} pcs
@@ -206,6 +211,22 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                     <TableCell class="tabular-nums">
                                         {{ result.original_outside_sample }} pcs
                                     </TableCell>
+                                    <TableCell>
+                                        <div v-if="cutting.result_prices?.filter(p => p.product_variant_id === result.product_variant?.id).length"
+                                            class="space-y-0.5 text-xs">
+                                            <div v-for="price in cutting.result_prices.filter(p => p.product_variant_id === result.product_variant?.id)"
+                                                :key="price.id"
+                                                class="flex items-center justify-between gap-3">
+                                                <span class="text-muted-foreground">
+                                                    {{ price.type_label }}
+                                                </span>
+                                                <span class="font-medium tabular-nums">
+                                                    {{ price.price_formatted }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <span v-else class="text-xs text-muted-foreground">-</span>
+                                    </TableCell>
                                 </TableRow>
                             </TableBody>
                         </Table>
diff --git a/resources/js/types/cutting.ts b/resources/js/types/cutting.ts
index c7e91b0..caa15e1 100644
--- a/resources/js/types/cutting.ts
+++ b/resources/js/types/cutting.ts
@@ -45,6 +45,14 @@ export type CuttingResultPriceItem = {
     cost_per_unit: number;
     cost_per_unit_formatted: string;
     type_label: string;
+    product_variant?: {
+        id: number;
+        name: string;
+        product?: {
+            id: number;
+            name: string;
+        };
+    };
 };
 
 export type CuttingResultListItem = {