207 lines
9.3 KiB
Vue
207 lines
9.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { cuttingStatusBadgeVariant } from '@/constants/cutting-status';
|
|
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
|
|
import type { CuttingListItem } from '@/types/cutting';
|
|
|
|
const props = defineProps<{
|
|
cutting: CuttingListItem;
|
|
}>();
|
|
|
|
interface GroupedMaterials {
|
|
key: number;
|
|
name: string;
|
|
unitLabel?: string;
|
|
items: typeof props.cutting.materials;
|
|
}
|
|
|
|
interface GroupedResults {
|
|
key: number;
|
|
name: string;
|
|
items: typeof props.cutting.results;
|
|
}
|
|
|
|
const groupedMaterials = computed<GroupedMaterials[]>(() => {
|
|
const groups: Record<number, GroupedMaterials> = {};
|
|
|
|
props.cutting.materials.forEach((item) => {
|
|
const key = item.raw_material_id ?? 0;
|
|
const name = item.raw_material_name || 'Bahan Baku Tidak Diketahui';
|
|
|
|
if (!groups[key]) {
|
|
groups[key] = { key, name, unitLabel: item.raw_material_unit_label, items: [] };
|
|
}
|
|
|
|
groups[key].items.push(item);
|
|
});
|
|
|
|
return Object.values(groups);
|
|
});
|
|
|
|
const groupedResults = computed<GroupedResults[]>(() => {
|
|
const groups: Record<number, GroupedResults> = {};
|
|
|
|
props.cutting.results.forEach((item) => {
|
|
const product = item.product_variant?.product;
|
|
const key = product?.id ?? 0;
|
|
const name = product?.name ?? 'Produk Tidak Diketahui';
|
|
|
|
if (!groups[key]) {
|
|
groups[key] = { key, name, items: [] };
|
|
}
|
|
|
|
groups[key].items.push(item);
|
|
});
|
|
|
|
return Object.values(groups);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-background">
|
|
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
|
|
<!-- Header -->
|
|
<div class="mb-8 text-center">
|
|
<h1 class="text-2xl font-bold tracking-tight">Detail Cutting</h1>
|
|
<p class="mt-1 text-muted-foreground">Rincian data proses cutting</p>
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<div class="overflow-hidden rounded-lg border bg-card shadow-sm">
|
|
<!-- Cutting Info Header -->
|
|
<div class="border-b bg-muted/30 p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<h2 class="text-xl font-semibold">Cutting #{{ cutting.id }}</h2>
|
|
<Badge :variant="cuttingStatusBadgeVariant(cutting.status)">
|
|
{{ cutting.status_label }}
|
|
</Badge>
|
|
</div>
|
|
<div class="mt-3 space-y-1 text-sm text-muted-foreground">
|
|
<p>{{ cutting.created_at_formatted }}</p>
|
|
<p>Oleh {{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}</p>
|
|
</div>
|
|
<p v-if="cutting.description" class="mt-3 text-sm">
|
|
{{ cutting.description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Summary -->
|
|
<div class="border-b p-6">
|
|
<h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div class="rounded-lg border p-3">
|
|
<p class="text-xs text-muted-foreground">Total Hasil Cutting</p>
|
|
<p class="mt-1 text-lg font-semibold text-primary">
|
|
{{ cutting.total_result_pieces ?? 0 }} pcs
|
|
</p>
|
|
</div>
|
|
<div v-if="cutting.total_material_usage_summary_formatted" class="rounded-lg border p-3">
|
|
<p class="text-xs text-muted-foreground">Total Pemakaian Bahan</p>
|
|
<p class="mt-1 text-lg font-semibold text-primary">
|
|
{{ cutting.total_material_usage_summary_formatted }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Materials Section -->
|
|
<div v-if="cutting.materials.length" class="border-b p-6">
|
|
<h3 class="mb-3 text-sm font-semibold">Bahan Baku</h3>
|
|
<div class="overflow-hidden rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Varian</TableHead>
|
|
<TableHead>Foto</TableHead>
|
|
<TableHead class="text-right">Pemakaian</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<template v-for="group in groupedMaterials" :key="group.key">
|
|
<TableRow class="bg-muted/20 hover:bg-muted/20">
|
|
<TableCell colspan="3" class="font-semibold">
|
|
{{ group.name }}
|
|
<Badge v-if="group.unitLabel" variant="secondary" class="ml-2 font-normal">
|
|
{{ group.unitLabel }}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-for="material in group.items" :key="material.id">
|
|
<TableCell class="pl-6">
|
|
{{ material.variant }}
|
|
</TableCell>
|
|
<TableCell>
|
|
<MediaThumbnailCell :items="material.images ?? []" :max-visible="1" />
|
|
</TableCell>
|
|
<TableCell class="text-right tabular-nums">
|
|
{{ material.material_usage_formatted }}
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div v-if="cutting.results.length" class="p-6">
|
|
<h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
|
|
<div class="overflow-hidden rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Varian</TableHead>
|
|
<TableHead>Foto</TableHead>
|
|
<TableHead class="text-right">Hasil</TableHead>
|
|
<TableHead class="text-right">Sample</TableHead>
|
|
<TableHead class="text-right">Diluar Sample</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<template v-for="group in groupedResults" :key="group.key">
|
|
<TableRow class="bg-muted/20 hover:bg-muted/20">
|
|
<TableCell colspan="5" class="font-semibold">
|
|
{{ group.name }}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-for="result in group.items" :key="result.id">
|
|
<TableCell class="pl-6">
|
|
{{ result.product_variant?.name }}
|
|
</TableCell>
|
|
<TableCell>
|
|
<MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
|
|
</TableCell>
|
|
<TableCell class="text-right tabular-nums">
|
|
{{ result.cutting_result }} pcs
|
|
</TableCell>
|
|
<TableCell class="text-right tabular-nums">
|
|
{{ result.sample }} pcs
|
|
</TableCell>
|
|
<TableCell class="text-right tabular-nums">
|
|
{{ result.original_outside_sample }} pcs
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-6 text-center text-xs text-muted-foreground">
|
|
<p>Data ini dibagikan dari sistem DST Collection</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|