From 60aae40575fde40194584e954d354ad828e3dc8d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 16:24:28 +0700
Subject: [PATCH] refactor: streamline StockPendingApprovalSection and
 StockPendingSection components by removing material usage display; enhance
 StockVerifyDialog layout for better user interaction and responsiveness

---
 .../table/StockPendingApprovalSection.vue     |   6 +-
 .../stocks/table/StockPendingSection.vue      |   6 +-
 .../manage/stocks/table/StockVerifyDialog.vue | 140 +++++++++++++-----
 3 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue b/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
index a1b3038..57e84ee 100644
--- a/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
+++ b/resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue
@@ -120,14 +120,13 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                 <TableRow>
                                     <TableHead>Varian</TableHead>
                                     <TableHead>Foto</TableHead>
-                                    <TableHead>Pemakaian</TableHead>
                                     <TableHead>Hasil</TableHead>
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
                                 <template v-for="group in getGroupedMaterials(cutting.materials)" :key="group.rawMaterialId">
                                     <TableRow class="bg-muted/20 hover:bg-muted/20">
-                                        <TableCell colspan="4" class="font-semibold text-foreground">
+                                        <TableCell colspan="3" class="font-semibold text-foreground">
                                             <template v-if="group.isCombination">
                                                 <span class="text-primary">{{ group.rawMaterialName }}</span>
                                                 <Badge variant="default" class="ml-2 font-normal">
@@ -154,9 +153,6 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                         <TableCell>
                                             <MediaThumbnailCell :items="material.images ?? []" :max-visible="1" />
                                         </TableCell>
-                                        <TableCell class="tabular-nums">
-                                            {{ material.material_usage_formatted }}
-                                        </TableCell>
                                         <TableCell class="tabular-nums">
                                             <template v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
                                                 {{ material.material_result }} pcs
diff --git a/resources/js/pages/admin/manage/stocks/table/StockPendingSection.vue b/resources/js/pages/admin/manage/stocks/table/StockPendingSection.vue
index 6ba6526..9efc90a 100644
--- a/resources/js/pages/admin/manage/stocks/table/StockPendingSection.vue
+++ b/resources/js/pages/admin/manage/stocks/table/StockPendingSection.vue
@@ -156,7 +156,6 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                 <TableRow>
                                     <TableHead>Varian</TableHead>
                                     <TableHead>Foto</TableHead>
-                                    <TableHead>Pemakaian</TableHead>
                                     <TableHead>Hasil</TableHead>
                                 </TableRow>
                             </TableHeader>
@@ -164,7 +163,7 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                 <template v-for="group in getGroupedMaterials(cutting.materials)"
                                     :key="group.rawMaterialId">
                                     <TableRow class="bg-muted/20 hover:bg-muted/20">
-                                        <TableCell colspan="4" class="font-semibold text-foreground">
+                                        <TableCell colspan="3" class="font-semibold text-foreground">
                                             <template v-if="group.isCombination">
                                                 <span class="text-primary">{{ group.rawMaterialName }}</span>
                                                 <Badge variant="default" class="ml-2 font-normal">
@@ -192,9 +191,6 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
                                         <TableCell>
                                             <MediaThumbnailCell :items="material.images ?? []" :max-visible="1" />
                                         </TableCell>
-                                        <TableCell class="tabular-nums">
-                                            {{ material.material_usage_formatted }}
-                                        </TableCell>
                                         <TableCell class="tabular-nums">
                                             <template
                                                 v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
diff --git a/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue b/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
index 9fa4cd1..e545ffc 100644
--- a/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
+++ b/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
@@ -5,6 +5,7 @@ import { toast } from 'vue-sonner';
 import { NumberInput } from '@/components/form/number-input';
 import { RupiahInput } from '@/components/form/rupiah-input';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -34,6 +35,48 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { required: true });
 
+type MaterialGroup = {
+    type: 'combination' | 'single';
+    combinationId?: number;
+    items: CuttingListItem['materials'];
+};
+
+const materialGroups = computed<MaterialGroup[]>(() => {
+    const materials = props.cutting.materials ?? [];
+    const combinationMap = new Map<number, CuttingListItem['materials']>();
+    const singleItems: CuttingListItem['materials'] = [];
+
+    materials.forEach((item) => {
+        if (item.combination_id) {
+            if (!combinationMap.has(item.combination_id)) {
+                combinationMap.set(item.combination_id, []);
+            }
+            combinationMap.get(item.combination_id)!.push(item);
+        } else {
+            singleItems.push(item);
+        }
+    });
+
+    const groups: MaterialGroup[] = [];
+
+    for (const [combinationId, items] of combinationMap) {
+        groups.push({
+            type: 'combination',
+            combinationId,
+            items,
+        });
+    }
+
+    if (singleItems.length > 0) {
+        groups.push({
+            type: 'single',
+            items: singleItems,
+        });
+    }
+
+    return groups;
+});
+
 function buildEmptyPrices(): Record<string, string> {
     return Object.fromEntries(PRICE_TYPES.map((type) => [type, '']));
 }
@@ -162,13 +205,13 @@ function submitVerify() {
 
 <template>
     <Dialog v-model:open="open">
-        <DialogContent class="sm:max-w-lg">
+        <DialogContent class="flex max-h-[90vh] flex-col sm:max-w-2xl">
             <DialogHeader>
                 <DialogTitle>Verifikasi Hasil Cutting</DialogTitle>
             </DialogHeader>
 
-            <form @submit.prevent="submitVerify">
-                <div class="space-y-4 max-h-[60vh] overflow-y-auto scrollbar-thin px-1 py-1">
+            <form @submit.prevent="submitVerify" class="flex flex-1 flex-col min-h-0">
+                <div class="scrollbar-thin flex-1 space-y-4 overflow-y-auto pr-1">
                     <p class="text-sm text-muted-foreground">
                         Verifikasi jumlah produk yang diterima dan tentukan harga jual. Stok akan ditambahkan setelah
                         verifikasi.
@@ -176,30 +219,32 @@ function submitVerify() {
 
                     <div class="space-y-2">
                         <div v-for="(result, index) in verifyForm.results" :key="result.product_variant_id"
-                            class="flex flex-col gap-1 rounded-lg border p-3">
-                            <div class="flex items-center gap-3">
-                                <div class="shrink-0">
-                                    <MediaThumbnailCell :items="cutting.results[index]?.product_variant?.images ?? []" :max-visible="1" />
+                            class="rounded-lg border p-3">
+                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                                <div class="flex items-center gap-3 min-w-0">
+                                    <div class="shrink-0">
+                                        <MediaThumbnailCell :items="cutting.results[index]?.product_variant?.images ?? []" :max-visible="1" />
+                                    </div>
+                                    <div class="flex-1 min-w-0">
+                                        <p class="font-medium text-sm truncate">{{ result.name }}</p>
+                                        <p class="text-xs text-muted-foreground">
+                                            {{ result.cutting_result }} pcs
+                                            <span class="text-[10px] block sm:inline">({{ result.original_sample }} Sample, {{
+                                                result.original_outside_sample }} Diluar Sample)</span>
+                                        </p>
+                                    </div>
                                 </div>
-                                <div class="flex-1 min-w-0">
-                                    <p class="font-medium text-sm truncate">{{ result.name }}</p>
-                                    <p class="text-xs text-muted-foreground">
-                                        {{ result.cutting_result }} pcs
-                                        <span class="text-[10px]">({{ result.original_sample }} Sample, {{
-                                            result.original_outside_sample }} Diluar Sample)</span>
-                                    </p>
-                                </div>
-                                <div class="flex items-center gap-2 shrink-0">
+                                <div class="flex items-center gap-2 self-end sm:self-center shrink-0">
                                     <div class="text-center">
                                         <label :for="`stock-good-${index}`"
-                                            class="text-[10px] text-muted-foreground block">Bagus</label>
+                                            class="text-[10px] text-muted-foreground block mb-0.5">Bagus</label>
                                         <NumberInput :id="`stock-good-${index}`" :model-value="result.good"
                                             class="h-7 w-20 px-1.5 text-xs text-center"
                                             @update:model-value="val => onGoodChange(result, val)" />
                                     </div>
                                     <div class="text-center">
                                         <label :for="`stock-reject-${index}`"
-                                            class="text-[10px] text-muted-foreground block">Reject</label>
+                                            class="text-[10px] text-muted-foreground block mb-0.5">Reject</label>
                                         <NumberInput :id="`stock-reject-${index}`" :model-value="result.reject"
                                             class="h-7 w-20 px-1.5 text-xs text-center"
                                             @update:model-value="val => onRejectChange(result, val)" />
@@ -214,24 +259,43 @@ function submitVerify() {
                         </div>
                     </div>
 
-                    <div v-if="cutting.materials && cutting.materials.length > 0" class="space-y-2 mt-4">
+                    <div v-if="cutting.materials && cutting.materials.length > 0" class="space-y-2">
                         <p class="text-sm font-medium">Bahan Baku Terpakai</p>
-                        <div class="grid gap-2">
-                            <div v-for="material in cutting.materials" :key="material.id"
-                                class="flex items-center gap-3 rounded-lg border p-3 bg-muted/10">
-                                <div class="shrink-0">
-                                    <MediaThumbnailCell :items="material.raw_material_price?.images ?? []" :max-visible="1" />
+                        <div class="scrollbar-thin max-h-48 space-y-3 overflow-y-auto overscroll-y-contain">
+                            <template v-for="group in materialGroups" :key="group.combinationId ?? 'single'">
+                                <div v-if="group.type === 'combination'"
+                                    class="rounded-lg border-2 border-dashed border-primary/30 p-3">
+                                    <div class="mb-2 flex items-center gap-2">
+                                        <span class="text-sm font-medium text-primary">Kombinasi</span>
+                                        <Badge variant="secondary" class="text-xs">
+                                            {{ group.items.length }} bahan
+                                        </Badge>
+                                    </div>
+                                    <div class="space-y-2">
+                                        <div v-for="material in group.items" :key="material.id"
+                                            class="rounded-md border bg-background p-2.5">
+                                            <p class="truncate text-sm font-medium">
+                                                {{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
+                                            </p>
+                                            <p class="truncate text-xs text-muted-foreground">
+                                                {{ material.variant || material.raw_material_price?.variant }}
+                                            </p>
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="flex-1 min-w-0">
-                                    <p class="font-medium text-sm truncate">
-                                        {{ material.raw_material_name || material.raw_material_price?.raw_material?.name }} - {{ material.variant || material.raw_material_price?.variant }}
-                                    </p>
-                                    <p class="text-xs text-muted-foreground">
-                                        Pemakaian: {{ material.material_usage_formatted }}
-                                        <span v-if="material.combination_id" class="text-[10px] text-primary bg-primary/10 px-1.5 py-0.5 rounded ml-2 font-medium">Kombinasi</span>
-                                    </p>
-                                </div>
-                            </div>
+
+                                <template v-else>
+                                    <div v-for="material in group.items" :key="material.id"
+                                        class="rounded-lg border p-3">
+                                        <p class="truncate text-sm font-medium">
+                                            {{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
+                                        </p>
+                                        <p class="truncate text-xs text-muted-foreground">
+                                            {{ material.variant || material.raw_material_price?.variant }}
+                                        </p>
+                                    </div>
+                                </template>
+                            </template>
                         </div>
                     </div>
 
@@ -239,7 +303,7 @@ function submitVerify() {
 
                     <div class="space-y-2">
                         <p class="text-sm font-medium">Harga</p>
-                        <div class="grid gap-2 sm:grid-cols-2">
+                        <div class="grid gap-2 grid-cols-2 sm:grid-cols-4">
                             <Field v-for="type in PRICE_TYPES" :key="`shared-${type}`">
                                 <FieldLabel class="text-xs" :for="`shared-price-${type}`" required>
                                     {{ PRICE_TYPE_LABELS[type] }}
@@ -261,11 +325,11 @@ function submitVerify() {
                     </Field>
                 </div>
 
-                <DialogFooter class="mt-6">
-                    <Button type="button" variant="outline" :disabled="verifyForm.processing" @click="open = false">
+                <DialogFooter class="flex-col gap-2 border-t pt-4 sm:flex-row">
+                    <Button type="button" variant="outline" class="w-full sm:w-auto" :disabled="verifyForm.processing" @click="open = false">
                         Batal
                     </Button>
-                    <Button type="submit" :disabled="verifyForm.processing">
+                    <Button type="submit" class="w-full sm:w-auto" :disabled="verifyForm.processing">
                         {{ verifyForm.processing ? 'Menyimpan...' : 'Verifikasi & Tambah Stok' }}
                     </Button>
                 </DialogFooter>