From 86ee45c1fbaae2ac980f554ad8192523a1be8027 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 30 Jun 2026 17:42:48 +0700
Subject: [PATCH] feat: implement owner verification detail modal with data
 fetching and display functionality

---
 .../Manage/OwnerVerificationController.php    |  19 ++
 app/Services/Manage/PurchaseService.php       |   3 +-
 app/Services/Master/ProductService.php        |   3 +-
 app/Services/Master/RawMaterialService.php    |   3 +-
 .../VerificationChangeFormatter.php           |  45 ++-
 .../VerificationDetailModal.vue               | 278 ++++++++++++++++++
 .../purchases/table/PurchaseGroupedTable.vue  |  30 +-
 .../products/table/ProductGroupedTable.vue    |  26 +-
 .../table/RawMaterialGroupedTable.vue         |  24 +-
 resources/js/types/product.ts                 |   1 +
 resources/js/types/purchase.ts                |   1 +
 resources/js/types/raw-material.ts            |   1 +
 routes/web.php                                |   3 +
 13 files changed, 385 insertions(+), 52 deletions(-)
 create mode 100644 resources/js/components/owner-verification/VerificationDetailModal.vue

diff --git a/app/Http/Controllers/Admin/Manage/OwnerVerificationController.php b/app/Http/Controllers/Admin/Manage/OwnerVerificationController.php
index 1f52d67..78cca97 100644
--- a/app/Http/Controllers/Admin/Manage/OwnerVerificationController.php
+++ b/app/Http/Controllers/Admin/Manage/OwnerVerificationController.php
@@ -10,6 +10,9 @@
 use App\Models\OwnerVerificationRequest;
 use App\Services\Manage\OwnerVerificationService;
 use App\Services\Manage\StockService;
+use App\Support\ActivityLog\ModelLabel;
+use App\Support\OwnerVerification\VerificationChangeFormatter;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 
 class OwnerVerificationController extends Controller
@@ -21,6 +24,22 @@ public function __construct(
         private readonly StockService $stockService,
     ) {}
 
+    public function show(OwnerVerificationRequest $ownerVerificationRequest): JsonResponse
+    {
+        $payload = is_array($ownerVerificationRequest->payload) ? $ownerVerificationRequest->payload : [];
+
+        return response()->json([
+            'id' => $ownerVerificationRequest->id,
+            'action_label' => $ownerVerificationRequest->action->label(),
+            'subject_label' => ModelLabel::for($ownerVerificationRequest->subject_type),
+            'submitted_by_name' => $ownerVerificationRequest->submittedBy?->profile?->full_name
+                ?? $ownerVerificationRequest->submittedBy?->username
+                ?? '-',
+            'created_at_formatted' => $ownerVerificationRequest->created_at?->translatedFormat('l, d F Y H:i'),
+            'changes' => VerificationChangeFormatter::format($payload),
+        ]);
+    }
+
     public function approveCutting(ApproveVerificationRequest $request, Cutting $cutting): RedirectResponse
     {
         $this->stockService->approveVerification(
diff --git a/app/Services/Manage/PurchaseService.php b/app/Services/Manage/PurchaseService.php
index e295b68..1988905 100644
--- a/app/Services/Manage/PurchaseService.php
+++ b/app/Services/Manage/PurchaseService.php
@@ -37,7 +37,7 @@ public function paginateForIndex(array $tableQuery): LengthAwarePaginator
             ->with([
                 'supplier:id,name',
                 'createdBy.profile',
-                'pendingOwnerVerificationRequest',
+                'pendingOwnerVerificationRequest.submittedBy.profile',
                 'items.rawMaterialPrice.rawMaterial:id,name,unit',
                 'media',
             ])
@@ -70,6 +70,7 @@ public function paginateForIndex(array $tableQuery): LengthAwarePaginator
                 $purchase->setAttribute('pending_request_id', $pendingRequest?->id);
                 $purchase->setAttribute('pending_request_action', $pendingRequest?->action->value);
                 $purchase->setAttribute('pending_request_action_label', $pendingRequest?->action->label());
+                $purchase->setAttribute('pending_request_submitted_by_name', $pendingRequest?->submittedBy?->profile?->full_name ?? $pendingRequest?->submittedBy?->username);
 
                 $purchase->items->each(fn (PurchaseItem $item) => $this->breakItemCircularReference($item));
 
diff --git a/app/Services/Master/ProductService.php b/app/Services/Master/ProductService.php
index e9af99b..0a49bb0 100644
--- a/app/Services/Master/ProductService.php
+++ b/app/Services/Master/ProductService.php
@@ -33,7 +33,7 @@ public function paginateForIndex(array $tableQuery, string $isActive, string $ca
         $query = Product::query()
             ->with([
                 'categories',
-                'pendingOwnerVerificationRequest',
+                'pendingOwnerVerificationRequest.submittedBy.profile',
                 'variants' => fn ($query) => $query
                     ->with(['media', 'prices' => fn ($query) => $query->orderBy('type')])
                     ->orderBy('created_at'),
@@ -89,6 +89,7 @@ public function paginateForIndex(array $tableQuery, string $isActive, string $ca
                 $product->setAttribute('pending_request_id', $pendingRequest?->id);
                 $product->setAttribute('pending_request_action', $pendingRequest?->action->value);
                 $product->setAttribute('pending_request_action_label', $pendingRequest?->action->label());
+                $product->setAttribute('pending_request_submitted_by_name', $pendingRequest?->submittedBy?->profile?->full_name ?? $pendingRequest?->submittedBy?->username);
                 $product->setAttribute(
                     'display_is_active',
                     $pendingRequest?->pendingToggleIsActive() ?? $product->is_active,
diff --git a/app/Services/Master/RawMaterialService.php b/app/Services/Master/RawMaterialService.php
index 03e14e5..6e2e583 100644
--- a/app/Services/Master/RawMaterialService.php
+++ b/app/Services/Master/RawMaterialService.php
@@ -32,7 +32,7 @@ public function paginateForIndex(array $tableQuery, string $isActive, string $st
     {
         $query = RawMaterial::query()
             ->with([
-                'pendingOwnerVerificationRequest',
+                'pendingOwnerVerificationRequest.submittedBy.profile',
                 'prices' => fn ($query) => $query
                     ->orderBy('created_at')
                     ->with('media'),
@@ -85,6 +85,7 @@ public function paginateForIndex(array $tableQuery, string $isActive, string $st
                 $rawMaterial->setAttribute('pending_request_id', $pendingRequest?->id);
                 $rawMaterial->setAttribute('pending_request_action', $pendingRequest?->action->value);
                 $rawMaterial->setAttribute('pending_request_action_label', $pendingRequest?->action->label());
+                $rawMaterial->setAttribute('pending_request_submitted_by_name', $pendingRequest?->submittedBy?->profile?->full_name ?? $pendingRequest?->submittedBy?->username);
                 $rawMaterial->setAttribute(
                     'display_is_active',
                     $pendingRequest?->pendingToggleIsActive() ?? $rawMaterial->is_active,
diff --git a/app/Support/OwnerVerification/VerificationChangeFormatter.php b/app/Support/OwnerVerification/VerificationChangeFormatter.php
index 0adcba6..48ea3a9 100644
--- a/app/Support/OwnerVerification/VerificationChangeFormatter.php
+++ b/app/Support/OwnerVerification/VerificationChangeFormatter.php
@@ -144,38 +144,35 @@ private static function presentValue(string $field, mixed $value): mixed
 
         if ($field === 'variants' && is_array($value)) {
             return collect($value)
-                ->map(function (array $variant): string {
-                    $name = $variant['name'] ?? '-';
-                    $stock = $variant['stock'] ?? 0;
-
-                    return "{$name} (stok: {$stock})";
-                })
-                ->implode(', ');
+                ->map(fn (array $variant) => [
+                    'name' => $variant['name'] ?? '-',
+                    'stock' => (int) ($variant['stock'] ?? 0),
+                ])
+                ->values()
+                ->all();
         }
 
         if ($field === 'prices' && is_array($value)) {
             return collect($value)
-                ->map(function (array $price): string {
-                    $variant = $price['variant'] ?? '-';
-                    $stock = $price['stock'] ?? 0;
-                    $priceValue = $price['price'] ?? 0;
-
-                    return "{$variant} (stok: {$stock}, harga: {$priceValue})";
-                })
-                ->implode(', ');
+                ->map(fn (array $price) => [
+                    'variant' => $price['variant'] ?? '-',
+                    'stock' => (int) ($price['stock'] ?? 0),
+                    'price' => (int) ($price['price'] ?? 0),
+                ])
+                ->values()
+                ->all();
         }
 
         if ($field === 'items' && is_array($value)) {
             return collect($value)
-                ->map(function (array $item): string {
-                    $name = $item['raw_material_name'] ?? '-';
-                    $variant = $item['variant'] ?? '-';
-                    $quantity = $item['quantity'] ?? 0;
-                    $subtotal = $item['subtotal'] ?? 0;
-
-                    return "{$name} / {$variant} (jumlah: {$quantity}, subtotal: {$subtotal})";
-                })
-                ->implode('; ');
+                ->map(fn (array $item) => [
+                    'raw_material_name' => $item['raw_material_name'] ?? '-',
+                    'variant' => $item['variant'] ?? '-',
+                    'quantity' => (int) ($item['quantity'] ?? 0),
+                    'subtotal' => (int) ($item['subtotal'] ?? 0),
+                ])
+                ->values()
+                ->all();
         }
 
         if ($field === 'has_photos') {
diff --git a/resources/js/components/owner-verification/VerificationDetailModal.vue b/resources/js/components/owner-verification/VerificationDetailModal.vue
new file mode 100644
index 0000000..d2743a4
--- /dev/null
+++ b/resources/js/components/owner-verification/VerificationDetailModal.vue
@@ -0,0 +1,278 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { show } from '@/routes/admin/manage/owner_verifications';
+
+interface VariantItem {
+    name: string;
+    stock: number;
+}
+
+interface PriceItem {
+    variant: string;
+    stock: number;
+    price: number;
+}
+
+interface PurchaseItem {
+    raw_material_name: string;
+    variant: string;
+    quantity: number;
+    subtotal: number;
+}
+
+interface VerificationChange {
+    field: string;
+    old: unknown;
+    new: unknown;
+}
+
+interface VerificationDetail {
+    id: number;
+    action_label: string;
+    subject_label: string;
+    submitted_by_name: string;
+    created_at_formatted: string;
+    changes: VerificationChange[];
+}
+
+const open = defineModel<boolean>('open', { default: false });
+
+const props = defineProps<{
+    requestId?: number | null;
+}>();
+
+const loading = ref(false);
+const detail = ref<VerificationDetail | null>(null);
+const error = ref<string | null>(null);
+
+watch(() => open.value, async (isOpen) => {
+    if (isOpen && props.requestId) {
+        await fetchDetail();
+    } else {
+        detail.value = null;
+        error.value = null;
+    }
+});
+
+async function fetchDetail() {
+    if (!props.requestId) {
+        return;
+    }
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const response = await fetch(show.url(props.requestId));
+
+        if (!response.ok) {
+            throw new Error('Gagal memuat detail verifikasi');
+        }
+
+        detail.value = await response.json();
+    } catch (e) {
+        error.value = e instanceof Error ? e.message : 'Terjadi kesalahan';
+    } finally {
+        loading.value = false;
+    }
+}
+
+const hasChanges = computed(() => (detail.value?.changes.length ?? 0) > 0);
+
+function isVariantArray(value: unknown): value is VariantItem[] {
+    return Array.isArray(value) && value.length > 0 && 'name' in value[0] && 'stock' in value[0];
+}
+
+function isPriceArray(value: unknown): value is PriceItem[] {
+    return Array.isArray(value) && value.length > 0 && 'variant' in value[0] && 'price' in value[0];
+}
+
+function isPurchaseItemArray(value: unknown): value is PurchaseItem[] {
+    return Array.isArray(value) && value.length > 0 && 'raw_material_name' in value[0];
+}
+
+function formatSimpleValue(value: unknown): string {
+    if (value === null || value === undefined || value === '') {
+        return '-';
+    }
+
+    if (typeof value === 'boolean') {
+        return value ? 'Ya' : 'Tidak';
+    }
+
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+
+    return String(value);
+}
+
+function formatNumber(value: number): string {
+    return new Intl.NumberFormat('id-ID').format(value);
+}
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogContent class="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+            <DialogHeader>
+                <DialogTitle>Detail Pengajuan Verifikasi</DialogTitle>
+            </DialogHeader>
+
+            <div v-if="loading" class="flex items-center justify-center py-8">
+                <div class="text-muted-foreground text-sm">Memuat detail...</div>
+            </div>
+
+            <div v-else-if="error" class="py-4 text-center">
+                <p class="text-sm text-destructive">{{ error }}</p>
+            </div>
+
+            <div v-else-if="detail" class="space-y-4 text-sm">
+                <div class="grid gap-3 sm:grid-cols-2">
+                    <div>
+                        <p class="text-muted-foreground">Waktu</p>
+                        <p class="font-medium">{{ detail.created_at_formatted ?? '-' }}</p>
+                    </div>
+                    <div>
+                        <p class="text-muted-foreground">Diajukan Oleh</p>
+                        <p class="font-medium">{{ detail.submitted_by_name }}</p>
+                    </div>
+                    <div>
+                        <p class="text-muted-foreground">Aksi</p>
+                        <p class="font-medium">{{ detail.action_label }}</p>
+                    </div>
+                    <div>
+                        <p class="text-muted-foreground">Modul</p>
+                        <p class="font-medium">{{ detail.subject_label }}</p>
+                    </div>
+                </div>
+
+                <div v-if="hasChanges" class="space-y-4">
+                    <p class="font-medium">Perubahan Data</p>
+
+                    <template v-for="change in detail.changes" :key="change.field">
+                        <!-- Variants Table -->
+                        <div v-if="change.field === 'Varian' && (isVariantArray(change.old) || isVariantArray(change.new))" class="space-y-2">
+                            <p class="text-sm font-medium text-muted-foreground">{{ change.field }}</p>
+                            <div class="overflow-hidden rounded-md border">
+                                <table class="w-full text-sm">
+                                    <thead class="bg-muted/50">
+                                        <tr>
+                                            <th class="px-3 py-2 text-left font-medium">Nama Varian</th>
+                                            <th class="px-3 py-2 text-right font-medium">Stok Sebelum</th>
+                                            <th class="px-3 py-2 text-right font-medium">Stok Sesudah</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="(item, idx) in (change.new as VariantItem[] || change.old as VariantItem[])" :key="idx" class="border-t">
+                                            <td class="px-3 py-2 font-medium">{{ item.name }}</td>
+                                            <td class="px-3 py-2 text-right tabular-nums text-muted-foreground">
+                                                {{ isVariantArray(change.old) && change.old[idx] ? formatNumber(change.old[idx].stock) : '-' }}
+                                            </td>
+                                            <td class="px-3 py-2 text-right tabular-nums">
+                                                {{ isVariantArray(change.new) && change.new[idx] ? formatNumber(change.new[idx].stock) : '-' }}
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Prices Table -->
+                        <div v-else-if="change.field === 'Varian Harga' && (isPriceArray(change.old) || isPriceArray(change.new))" class="space-y-2">
+                            <p class="text-sm font-medium text-muted-foreground">{{ change.field }}</p>
+                            <div class="overflow-hidden rounded-md border">
+                                <table class="w-full text-sm">
+                                    <thead class="bg-muted/50">
+                                        <tr>
+                                            <th class="px-3 py-2 text-left font-medium">Varian</th>
+                                            <th class="px-3 py-2 text-right font-medium">Stok</th>
+                                            <th class="px-3 py-2 text-right font-medium">Harga</th>
+                                            <th class="px-3 py-2 text-center font-medium">Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <template v-if="isPriceArray(change.new)">
+                                            <tr v-for="(item, idx) in change.new" :key="idx" class="border-t">
+                                                <td class="px-3 py-2 font-medium">{{ item.variant }}</td>
+                                                <td class="px-3 py-2 text-right tabular-nums">{{ formatNumber(item.stock) }}</td>
+                                                <td class="px-3 py-2 text-right tabular-nums">Rp {{ formatNumber(item.price) }}</td>
+                                                <td class="px-3 py-2 text-center">
+                                                    <span v-if="!isPriceArray(change.old) || !change.old.find(o => o.variant === item.variant)" class="text-green-600">Baru</span>
+                                                    <span v-else class="text-muted-foreground">Ada</span>
+                                                </td>
+                                            </tr>
+                                        </template>
+                                        <template v-else-if="isPriceArray(change.old)">
+                                            <tr v-for="(item, idx) in change.old" :key="idx" class="border-t">
+                                                <td class="px-3 py-2 font-medium">{{ item.variant }}</td>
+                                                <td class="px-3 py-2 text-right tabular-nums">{{ formatNumber(item.stock) }}</td>
+                                                <td class="px-3 py-2 text-right tabular-nums">Rp {{ formatNumber(item.price) }}</td>
+                                                <td class="px-3 py-2 text-center text-destructive">Dihapus</td>
+                                            </tr>
+                                        </template>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Purchase Items Table -->
+                        <div v-else-if="change.field === 'Item Belanja' && (isPurchaseItemArray(change.old) || isPurchaseItemArray(change.new))" class="space-y-2">
+                            <p class="text-sm font-medium text-muted-foreground">{{ change.field }}</p>
+                            <div class="overflow-hidden rounded-md border">
+                                <table class="w-full text-sm">
+                                    <thead class="bg-muted/50">
+                                        <tr>
+                                            <th class="px-3 py-2 text-left font-medium">Bahan Baku</th>
+                                            <th class="px-3 py-2 text-left font-medium">Varian</th>
+                                            <th class="px-3 py-2 text-right font-medium">Jumlah</th>
+                                            <th class="px-3 py-2 text-right font-medium">Subtotal</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="(item, idx) in (change.new as PurchaseItem[] || change.old as PurchaseItem[])" :key="idx" class="border-t">
+                                            <td class="px-3 py-2 font-medium">{{ item.raw_material_name }}</td>
+                                            <td class="px-3 py-2">{{ item.variant }}</td>
+                                            <td class="px-3 py-2 text-right tabular-nums">{{ formatNumber(item.quantity) }}</td>
+                                            <td class="px-3 py-2 text-right tabular-nums">Rp {{ formatNumber(item.subtotal) }}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Simple Field -->
+                        <div v-else class="overflow-hidden rounded-md border">
+                            <table class="w-full text-sm">
+                                <thead class="bg-muted/50">
+                                    <tr>
+                                        <th class="px-3 py-2 text-left font-medium">Field</th>
+                                        <th class="px-3 py-2 text-left font-medium">Sebelum</th>
+                                        <th class="px-3 py-2 text-left font-medium">Sesudah</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr class="border-t">
+                                        <td class="px-3 py-2 align-top font-medium">{{ change.field }}</td>
+                                        <td class="px-3 py-2 align-top text-muted-foreground">{{ formatSimpleValue(change.old) }}</td>
+                                        <td class="px-3 py-2 align-top">{{ formatSimpleValue(change.new) }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </template>
+                </div>
+
+                <div v-else class="py-2 text-center text-muted-foreground">
+                    Tidak ada perubahan data
+                </div>
+            </div>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/pages/admin/manage/purchases/table/PurchaseGroupedTable.vue b/resources/js/pages/admin/manage/purchases/table/PurchaseGroupedTable.vue
index d1b29fe..8ab705c 100644
--- a/resources/js/pages/admin/manage/purchases/table/PurchaseGroupedTable.vue
+++ b/resources/js/pages/admin/manage/purchases/table/PurchaseGroupedTable.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import DataTableActions from './data-table-actions.vue';
+import { computed, ref } from 'vue';
 import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import VerificationDetailModal from '@/components/owner-verification/VerificationDetailModal.vue';
 import { Badge } from '@/components/ui/badge';
 import {
     Empty,
@@ -26,6 +26,7 @@ import type {
     DataTablePaginationLink,
 } from '@/types/data-table';
 import type { PurchaseItemDetail, PurchaseListItem } from '@/types/purchase';
+import DataTableActions from './data-table-actions.vue';
 
 const props = defineProps<{
     purchases: PurchaseListItem[];
@@ -76,6 +77,16 @@ function getGroupedItems(items: PurchaseItemDetail[]): GroupedPurchaseItems[] {
 
     return Object.values(groups);
 }
+
+const verificationModalOpen = ref(false);
+const selectedRequestId = ref<number | null>(null);
+
+function openVerificationDetail(requestId: number | undefined) {
+    if (requestId) {
+        selectedRequestId.value = requestId;
+        verificationModalOpen.value = true;
+    }
+}
 </script>
 
 <template>
@@ -95,7 +106,8 @@ function getGroupedItems(items: PurchaseItemDetail[]): GroupedPurchaseItems[] {
                                 {{ purchase.supplier?.name }}
                             </h3>
                             <p v-if="purchase.has_pending_request" class="text-sm text-amber-600">
-                                Sedang menunggu verifikasi owner
+                                {{ purchase.pending_request_submitted_by_name }} mengajukan {{ purchase.pending_request_action_label?.toLowerCase() }} belanja ini —
+                                <button type="button" class="underline-offset-2 hover:underline" @click="openVerificationDetail(purchase.pending_request_id)">lihat</button>
                             </p>
                             <div class="text-muted-foreground space-y-1 text-sm">
                                 <p>{{ purchase.created_at_formatted }}</p>
@@ -104,9 +116,9 @@ function getGroupedItems(items: PurchaseItemDetail[]): GroupedPurchaseItems[] {
                             </div>
                             <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                                 <span>Subtotal <strong class="text-primary">{{ purchase.subtotal_formatted
-                                }}</strong></span>
+                                        }}</strong></span>
                                 <span>Diskon <strong class="text-primary">{{ purchase.discount_formatted
-                                }}</strong></span>
+                                        }}</strong></span>
                                 <span v-if="purchase.shipping_cost > 0">Ongkir <strong class="text-primary">{{
                                     purchase.shipping_cost_formatted }}</strong></span>
                                 <span>Total <strong class="text-primary">{{ purchase.total_formatted }}</strong></span>
@@ -178,10 +190,8 @@ function getGroupedItems(items: PurchaseItemDetail[]): GroupedPurchaseItems[] {
             </Empty>
         </div>
 
-        <GroupedTableFooter
-            :summary="paginationSummary"
-            :pagination="pagination"
-            :pagination-links="paginationLinks"
-        />
+        <GroupedTableFooter :summary="paginationSummary" :pagination="pagination" :pagination-links="paginationLinks" />
+
+        <VerificationDetailModal v-model:open="verificationModalOpen" :request-id="selectedRequestId" />
     </div>
 </template>
diff --git a/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue b/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
index 35073cb..ec4a5fc 100644
--- a/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
+++ b/resources/js/pages/admin/master/products/table/ProductGroupedTable.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { DataTableEmpty } from '@/components/data-table';
 import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import VerificationDetailModal from '@/components/owner-verification/VerificationDetailModal.vue';
 import { Badge } from '@/components/ui/badge';
 import {
     Table,
@@ -25,7 +26,7 @@ import {
     PRICE_TYPES,
     PRICE_TYPE_LABELS,
 } from '@/types/product';
-import type { ProductListItem, Variant } from '@/types/product';
+import type { ProductListItem } from '@/types/product';
 import DataTableActions from './data-table-actions.vue';
 import ProductStatusToggle from './product-status-toggle.vue';
 
@@ -53,6 +54,16 @@ const paginationSummary = usePaginationSummary(() => props.pagination, showingCo
 function rowNumber(index: number): number {
     return groupedTableRowNumber(props.firstItem, index);
 }
+
+const verificationModalOpen = ref(false);
+const selectedRequestId = ref<number | null>(null);
+
+function openVerificationDetail(requestId: number | undefined) {
+    if (requestId) {
+        selectedRequestId.value = requestId;
+        verificationModalOpen.value = true;
+    }
+}
 </script>
 
 <template>
@@ -75,7 +86,8 @@ function rowNumber(index: number): number {
                                 </h3>
                             </div>
                             <p v-if="product.has_pending_request" class="text-sm text-amber-600">
-                                Sedang menunggu verifikasi owner
+                                {{ product.pending_request_submitted_by_name }} mengajukan {{ product.pending_request_action_label?.toLowerCase() }} produk ini —
+                                <button type="button" class="underline-offset-2 hover:underline" @click="openVerificationDetail(product.pending_request_id)">lihat</button>
                             </p>
                             <div v-if="product.categories.length" class="flex flex-wrap gap-1">
                                 <Badge v-for="category in product.categories" :key="category.id" variant="outline">
@@ -167,10 +179,8 @@ function rowNumber(index: number): number {
 
         <DataTableEmpty v-else />
 
-        <GroupedTableFooter
-            :summary="paginationSummary"
-            :pagination="pagination"
-            :pagination-links="paginationLinks"
-        />
+        <GroupedTableFooter :summary="paginationSummary" :pagination="pagination" :pagination-links="paginationLinks" />
+
+        <VerificationDetailModal v-model:open="verificationModalOpen" :request-id="selectedRequestId" />
     </div>
 </template>
diff --git a/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue b/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
index 2c0d195..c7279b8 100644
--- a/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
+++ b/resources/js/pages/admin/master/raw-materials/table/RawMaterialGroupedTable.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { DataTableEmpty } from '@/components/data-table';
 import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
 import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import VerificationDetailModal from '@/components/owner-verification/VerificationDetailModal.vue';
 import { Badge } from '@/components/ui/badge';
 import {
     Table,
@@ -46,6 +47,16 @@ const paginationSummary = usePaginationSummary(() => props.pagination, showingCo
 function rowNumber(index: number): number {
     return groupedTableRowNumber(props.firstItem, index);
 }
+
+const verificationModalOpen = ref(false);
+const selectedRequestId = ref<number | null>(null);
+
+function openVerificationDetail(requestId: number | undefined) {
+    if (requestId) {
+        selectedRequestId.value = requestId;
+        verificationModalOpen.value = true;
+    }
+}
 </script>
 
 <template>
@@ -71,7 +82,8 @@ function rowNumber(index: number): number {
                                 </Badge>
                             </div>
                             <p v-if="material.has_pending_request" class="text-sm text-amber-600">
-                                Sedang menunggu verifikasi owner
+                                {{ material.pending_request_submitted_by_name }} mengajukan {{ material.pending_request_action_label?.toLowerCase() }} bahan baku ini —
+                                <button type="button" class="underline-offset-2 hover:underline" @click="openVerificationDetail(material.pending_request_id)">lihat</button>
                             </p>
                             <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
                                 <span>
@@ -130,10 +142,8 @@ function rowNumber(index: number): number {
 
         <DataTableEmpty v-else />
 
-        <GroupedTableFooter
-            :summary="paginationSummary"
-            :pagination="pagination"
-            :pagination-links="paginationLinks"
-        />
+        <GroupedTableFooter :summary="paginationSummary" :pagination="pagination" :pagination-links="paginationLinks" />
+
+        <VerificationDetailModal v-model:open="verificationModalOpen" :request-id="selectedRequestId" />
     </div>
 </template>
diff --git a/resources/js/types/product.ts b/resources/js/types/product.ts
index ba4963f..1595f42 100644
--- a/resources/js/types/product.ts
+++ b/resources/js/types/product.ts
@@ -76,6 +76,7 @@ export interface ProductListItem extends Product {
     pending_request_id?: number;
     pending_request_action?: string;
     pending_request_action_label?: string;
+    pending_request_submitted_by_name?: string;
     display_is_active?: boolean;
 }
 
diff --git a/resources/js/types/purchase.ts b/resources/js/types/purchase.ts
index c93474d..6768e82 100644
--- a/resources/js/types/purchase.ts
+++ b/resources/js/types/purchase.ts
@@ -56,6 +56,7 @@ export type PurchaseListItem = {
     pending_request_id?: number;
     pending_request_action?: string;
     pending_request_action_label?: string;
+    pending_request_submitted_by_name?: string;
 };
 
 export type PurchaseCartItem = {
diff --git a/resources/js/types/raw-material.ts b/resources/js/types/raw-material.ts
index 6876389..2c0b773 100644
--- a/resources/js/types/raw-material.ts
+++ b/resources/js/types/raw-material.ts
@@ -33,6 +33,7 @@ export type RawMaterialListItem = {
     pending_request_id?: number;
     pending_request_action?: string;
     pending_request_action_label?: string;
+    pending_request_submitted_by_name?: string;
     display_is_active?: boolean;
 };
 
diff --git a/routes/web.php b/routes/web.php
index fd3773c..c7e7652 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -413,6 +413,9 @@
 
             Route::prefix('owner-verifications')->name('owner_verifications.')
                 ->group(function () {
+                    Route::get('requests/{ownerVerificationRequest}', [OwnerVerificationController::class, 'show'])
+                        ->name('show');
+
                     Route::post('cuttings/{cutting}/approve', [OwnerVerificationController::class, 'approveCutting'])
                         ->middleware('permission:'.Permission::OWNER_VERIFICATIONS_VERIFY->value)
                         ->name('approve');