From 06ad8a6e8a4d976edaae4c2be7ff4ae7afdaf24d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 29 Jul 2026 08:43:12 +0700
Subject: [PATCH] feat: enhance PurchasePosForm with image display for
 materials and add package icon for missing images

---
 .../admin/manage/purchases/form/PurchasePosForm.vue   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/admin/manage/purchases/form/PurchasePosForm.vue b/resources/js/pages/admin/manage/purchases/form/PurchasePosForm.vue
index e014437..eeb649e 100644
--- a/resources/js/pages/admin/manage/purchases/form/PurchasePosForm.vue
+++ b/resources/js/pages/admin/manage/purchases/form/PurchasePosForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { Check, Plus, Search, ShoppingCart } from '@lucide/vue';
+import { Check, Package, Plus, Search, ShoppingCart } from '@lucide/vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import { apiFetch } from '@/lib/api';
@@ -816,6 +816,15 @@ function submit() {
                             : 'cursor-pointer hover:bg-accent'"
                         @click="!isInCart(result.priceId) && selectExistingMaterial(result)"
                     >
+                        <div class="size-10 shrink-0 overflow-hidden rounded border bg-muted/30">
+                            <img v-if="result.images.length > 0"
+                                :src="result.images[0].thumb_url"
+                                :alt="result.variant"
+                                class="size-full object-cover" />
+                            <div v-else class="flex size-full items-center justify-center text-muted-foreground">
+                                <Package class="size-4 opacity-40" />
+                            </div>
+                        </div>
                         <div class="min-w-0 flex-1">
                             <p class="truncate font-medium">{{ selectedMaterialId ? '' : result.name + ' → ' }}{{ result.variant }}</p>
                             <p class="text-xs text-muted-foreground">