feat: implement owner verification detail modal with data fetching and display functionality

This commit is contained in:
Yoga Pangestu 2026-06-30 17:42:48 +07:00
parent 67ae00384f
commit 86ee45c1fb
13 changed files with 385 additions and 52 deletions

View File

@ -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(

View File

@ -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));

View File

@ -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,

View File

@ -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,

View File

@ -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') {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;
}

View File

@ -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 = {

View File

@ -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;
};

View File

@ -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');