refactor: enhance StockPendingApprovalSection to include pricing information and improve layout for better clarity in stock results

This commit is contained in:
Yoga Pangestu 2026-07-05 17:03:28 +07:00
parent a40d0533bd
commit e4e17e32ec
2 changed files with 34 additions and 5 deletions

View File

@ -127,7 +127,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
</TableRow>
</TableHeader>
<TableBody>
<template v-for="group in getGroupedMaterials(cutting.materials)" :key="group.rawMaterialId">
<template v-for="group in getGroupedMaterials(cutting.materials)"
:key="group.rawMaterialId">
<TableRow class="bg-muted/20 hover:bg-muted/20">
<TableCell colspan="3" class="font-semibold text-foreground">
<template v-if="group.isCombination">
@ -143,7 +144,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
</template>
<template v-else>
{{ group.rawMaterialName }}
<Badge v-if="group.unitLabel" variant="secondary" class="ml-2 font-normal">
<Badge v-if="group.unitLabel" variant="secondary"
class="ml-2 font-normal">
{{ group.unitLabel }}
</Badge>
</template>
@ -157,7 +159,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
<MediaThumbnailCell :items="material.images ?? []" :max-visible="1" />
</TableCell>
<TableCell class="tabular-nums">
<template v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
<template
v-if="!group.isCombination && material.material_result !== null && material.material_result !== undefined">
{{ material.material_result }} pcs
</template>
<template v-else>
@ -182,11 +185,12 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
<TableHead>Hasil</TableHead>
<TableHead>Bagus</TableHead>
<TableHead>Reject</TableHead>
<TableHead>Harga</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
<TableCell colspan="5" class="text-muted-foreground">
<TableCell colspan="6" class="text-muted-foreground">
Belum ada hasil verifikasi
</TableCell>
</TableRow>
@ -195,7 +199,8 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
{{ result.product_variant?.product?.name }} ({{ result.product_variant?.name }})
</TableCell>
<TableCell>
<MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
<MediaThumbnailCell :items="result.product_variant?.images ?? []"
:max-visible="1" />
</TableCell>
<TableCell class="tabular-nums">
{{ result.cutting_result }} pcs
@ -206,6 +211,22 @@ function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
<TableCell class="tabular-nums">
{{ result.original_outside_sample }} pcs
</TableCell>
<TableCell>
<div v-if="cutting.result_prices?.filter(p => p.product_variant_id === result.product_variant?.id).length"
class="space-y-0.5 text-xs">
<div v-for="price in cutting.result_prices.filter(p => p.product_variant_id === result.product_variant?.id)"
:key="price.id"
class="flex items-center justify-between gap-3">
<span class="text-muted-foreground">
{{ price.type_label }}
</span>
<span class="font-medium tabular-nums">
{{ price.price_formatted }}
</span>
</div>
</div>
<span v-else class="text-xs text-muted-foreground">-</span>
</TableCell>
</TableRow>
</TableBody>
</Table>

View File

@ -45,6 +45,14 @@ export type CuttingResultPriceItem = {
cost_per_unit: number;
cost_per_unit_formatted: string;
type_label: string;
product_variant?: {
id: number;
name: string;
product?: {
id: number;
name: string;
};
};
};
export type CuttingResultListItem = {