From 87adc683768ebc5df77b5ea2c10aa4a93080c371 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 16:28:42 +0700
Subject: [PATCH] refactor: enhance StockVerifyDialog layout by improving
 material display with thumbnails and better alignment for improved user
 interaction

---
 .../manage/stocks/table/StockVerifyDialog.vue | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue b/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
index e545ffc..35294a3 100644
--- a/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
+++ b/resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue
@@ -273,7 +273,29 @@ function submitVerify() {
                                     </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">
+                                            class="flex items-center gap-3 rounded-md border bg-background p-2.5">
+                                            <div class="shrink-0">
+                                                <MediaThumbnailCell :items="material.images ?? material.raw_material_price?.images ?? []" :max-visible="1" />
+                                            </div>
+                                            <div class="min-w-0 flex-1">
+                                                <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>
+
+                                <template v-else>
+                                    <div v-for="material in group.items" :key="material.id"
+                                        class="flex items-center gap-3 rounded-lg border p-3">
+                                        <div class="shrink-0">
+                                            <MediaThumbnailCell :items="material.images ?? material.raw_material_price?.images ?? []" :max-visible="1" />
+                                        </div>
+                                        <div class="min-w-0 flex-1">
                                             <p class="truncate text-sm font-medium">
                                                 {{ material.raw_material_name || material.raw_material_price?.raw_material?.name }}
                                             </p>
@@ -282,18 +304,6 @@ function submitVerify() {
                                             </p>
                                         </div>
                                     </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>