From f337e50fa2a81fe4b54358ce94e7c9a03f576a2a Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 17 Jul 2026 19:21:27 +0700
Subject: [PATCH] feat: add media preview functionality for order transaction
 images

---
 .../js/pages/admin/manage/orders/Show.vue     | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/admin/manage/orders/Show.vue b/resources/js/pages/admin/manage/orders/Show.vue
index 99b4bcc..ad0b68a 100644
--- a/resources/js/pages/admin/manage/orders/Show.vue
+++ b/resources/js/pages/admin/manage/orders/Show.vue
@@ -13,6 +13,7 @@ import { computed, ref } from 'vue';
 import { toast } from 'vue-sonner';
 import { RowDeleteAction, RowDetailAction, RowEditAction, RowStatusAction } from '@/components/button';
 import BackButton from '@/components/button/BackButton.vue';
+import MediaPreviewDialog from '@/components/media/MediaPreviewDialog.vue';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -53,6 +54,12 @@ const pendingAction = ref<OrderStatusAction | null>(null);
 const canEdit = computed(() => props.order.is_editable && can('orders.update'));
 const canDelete = computed(() => can('orders.delete'));
 
+const previewOpen = ref(false);
+
+function openPreview() {
+    previewOpen.value = true;
+}
+
 const { open: deleteConfirmOpen, processing: deleteProcessing, destroy: destroyOrder } = useDestroy({
     url: destroy.url(props.order.id),
     preserveScroll: false,
@@ -473,12 +480,18 @@ const feeEntries = computed(() => {
                         </CardTitle>
                     </CardHeader>
                     <CardContent>
-                        <a :href="order.photos.url" target="_blank" class="block overflow-hidden rounded-md border">
-                            <img :src="order.photos.thumb_url" alt="Bukti Transaksi" class="w-full object-cover">
-                        </a>
+                        <button type="button"
+                            class="block w-full cursor-zoom-in overflow-hidden rounded-md border"
+                            @click="openPreview">
+                            <img :src="order.photos.thumb_url" alt="Bukti Transaksi"
+                                class="w-full object-cover">
+                        </button>
                     </CardContent>
                 </Card>
 
+                <MediaPreviewDialog v-model:open="previewOpen" :url="order.photos?.url ?? null"
+                    title="Bukti Transaksi" />
+
             </div>
         </div>
     </AdminLayout>