134 lines
7.2 KiB
Vue
134 lines
7.2 KiB
Vue
<script setup lang="ts">
|
|
import { Check, ChevronDown } from '@lucide/vue';
|
|
import { computed, ref } from 'vue';
|
|
import DataTableActions from './data-table-actions.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@/components/ui/collapsible';
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle,
|
|
} from '@/components/ui/empty';
|
|
import type { CuttingListItem } from '@/types/cutting';
|
|
|
|
const props = defineProps<{
|
|
cuttings: CuttingListItem[];
|
|
}>();
|
|
|
|
const open = ref(false);
|
|
|
|
const totalCompleted = computed(() => props.cuttings.length);
|
|
</script>
|
|
|
|
<template>
|
|
<Collapsible v-model:open="open">
|
|
<Card class="!py-0">
|
|
<CollapsibleTrigger
|
|
class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
|
|
<div class="min-w-0 space-y-1">
|
|
<div class="flex items-center gap-2">
|
|
<Check class="size-4 shrink-0 text-green-600 dark:text-green-400" />
|
|
<h3 class="font-semibold leading-tight">
|
|
Cutting Selesai (Menunggu Verifikasi)
|
|
</h3>
|
|
<Badge v-if="totalCompleted > 0" variant="outline" class="border-green-600/30 text-green-600 dark:text-green-400">
|
|
{{ totalCompleted }}
|
|
</Badge>
|
|
</div>
|
|
<p class="text-xs text-muted-foreground">
|
|
Daftar cutting yang telah selesai dikerjakan. Gunakan tombol aksi untuk memverifikasi atau menolak.
|
|
</p>
|
|
</div>
|
|
|
|
<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
|
:class="open ? 'rotate-180' : ''" />
|
|
</CollapsibleTrigger>
|
|
|
|
<CollapsibleContent>
|
|
<CardContent class="pt-0 pb-6">
|
|
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card v-for="cutting in cuttings" :key="cutting.id" class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
|
|
<div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<h4 class="font-medium text-sm truncate">
|
|
Cutting #{{ cutting.id }}
|
|
</h4>
|
|
<span class="text-[10px] text-muted-foreground block truncate">
|
|
{{ cutting.created_at_formatted }}
|
|
</span>
|
|
</div>
|
|
<div class="flex shrink-0 items-center">
|
|
<DataTableActions :cutting="cutting" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 space-y-3 flex-1 text-xs">
|
|
<div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
|
|
<span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<span class="font-medium text-foreground">Bahan Baku:</span>
|
|
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
|
<li v-for="mat in cutting.materials" :key="mat.id">
|
|
{{ mat.raw_material_price?.raw_material?.name }} ({{ mat.raw_material_price?.variant }}) - {{ mat.material_usage_formatted }}
|
|
</li>
|
|
<li v-if="!cutting.materials.length">Belum ada bahan baku</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<span class="font-medium text-foreground">Hasil Produk:</span>
|
|
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
|
<li v-for="res in cutting.results" :key="res.id">
|
|
{{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }}) - {{ res.cutting_result }} pcs
|
|
</li>
|
|
<li v-if="!cutting.results.length">Belum ada hasil produk</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="cutting.results.length" class="space-y-1.5 pt-2 border-t">
|
|
<div class="flex items-center justify-between text-[11px]">
|
|
<span class="text-muted-foreground">Total Hasil Cutting:</span>
|
|
<span class="font-semibold tabular-nums">{{ cutting.total_result_pieces ?? 0 }} pcs</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[11px]">
|
|
<span class="text-muted-foreground">Total Pemakaian Bahan:</span>
|
|
<span class="font-semibold tabular-nums">{{ cutting.total_material_usage ?? 0 }}</span>
|
|
</div>
|
|
<div v-if="cutting.estimated_cost_per_unit_formatted" class="flex items-center justify-between text-[11px]">
|
|
<span class="text-muted-foreground">Harga Modal:</span>
|
|
<span class="font-semibold">{{ cutting.estimated_cost_per_unit_formatted }}/pcs</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-[11px] text-muted-foreground pt-2 border-t flex items-center justify-between">
|
|
<span>Pembuat:</span>
|
|
<span class="font-medium text-foreground">
|
|
{{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Empty v-else class="py-8">
|
|
<EmptyHeader>
|
|
<EmptyTitle>Tidak ada cutting selesai</EmptyTitle>
|
|
<EmptyDescription>
|
|
Semua cutting selesai telah diverifikasi atau belum selesai diproses.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
</CardContent>
|
|
</CollapsibleContent>
|
|
</Card>
|
|
</Collapsible>
|
|
</template>
|