refactor: standardize material usage formatting to two decimal places across cutting management components for improved consistency
This commit is contained in:
Yoga Pangestu
parent
175e0dc5af
commit
e59c4baea6
@ -1,20 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Check, ChevronDown } from '@lucide/vue';
|
import { Check } from '@lucide/vue';
|
||||||
import { computed, ref } from 'vue';
|
import { computed } from 'vue';
|
||||||
import DataTableActions from './data-table-actions.vue';
|
import DataTableActions from './data-table-actions.vue';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import {
|
|
||||||
Collapsible,
|
|
||||||
CollapsibleContent,
|
|
||||||
CollapsibleTrigger,
|
|
||||||
} from '@/components/ui/collapsible';
|
|
||||||
import {
|
import {
|
||||||
Empty,
|
Empty,
|
||||||
EmptyDescription,
|
EmptyDescription,
|
||||||
EmptyHeader,
|
EmptyHeader,
|
||||||
EmptyTitle,
|
EmptyTitle,
|
||||||
} from '@/components/ui/empty';
|
} from '@/components/ui/empty';
|
||||||
|
import type { CuttingListItem } from '@/types/cutting';
|
||||||
|
|
||||||
const CM_PER_YARD = 91.44;
|
const CM_PER_YARD = 91.44;
|
||||||
const CM_PER_METER = 100;
|
const CM_PER_METER = 100;
|
||||||
@ -27,14 +23,14 @@ function formatTotalMaterialUsage(totalUsage: number | null | undefined, materia
|
|||||||
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
if (unit === 'yard') {
|
if (unit === 'yard') {
|
||||||
return (totalUsage * CM_PER_YARD).toFixed(4);
|
return (totalUsage * CM_PER_YARD).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (unit === 'meter') {
|
if (unit === 'meter') {
|
||||||
return (totalUsage * CM_PER_METER).toFixed(4);
|
return (totalUsage * CM_PER_METER).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
return totalUsage.toFixed(4);
|
return totalUsage.toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTotalMaterialUsageUnit(materials: any[]): string {
|
function getTotalMaterialUsageUnit(materials: any[]): string {
|
||||||
@ -46,115 +42,129 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
|
|||||||
|
|
||||||
return materials[0]?.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
return materials[0]?.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
||||||
}
|
}
|
||||||
import type { CuttingListItem } from '@/types/cutting';
|
|
||||||
|
function formatMaterialUsage(mat: any): string {
|
||||||
|
const usage = mat.material_usage ?? 0;
|
||||||
|
const unit = mat.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
|
if (unit === 'yard') {
|
||||||
|
return (usage * CM_PER_YARD).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unit === 'meter') {
|
||||||
|
return (usage * CM_PER_METER).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return usage.toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMaterialUnit(mat: any): string {
|
||||||
|
const unit = mat.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
|
if (unit === 'yard' || unit === 'meter') {
|
||||||
|
return 'cm';
|
||||||
|
}
|
||||||
|
|
||||||
|
return mat.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
cuttings: CuttingListItem[];
|
cuttings: CuttingListItem[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const open = ref(false);
|
|
||||||
|
|
||||||
const totalCompleted = computed(() => props.cuttings.length);
|
const totalCompleted = computed(() => props.cuttings.length);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Collapsible v-model:open="open">
|
<Card class="!py-0">
|
||||||
<Card class="!py-0">
|
<div class="flex w-full items-center justify-between gap-3 px-6 py-4">
|
||||||
<CollapsibleTrigger
|
<div class="min-w-0 space-y-1">
|
||||||
class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
|
<div class="flex items-center gap-2">
|
||||||
<div class="min-w-0 space-y-1">
|
<Check class="size-4 shrink-0 text-green-600 dark:text-green-400" />
|
||||||
<div class="flex items-center gap-2">
|
<h3 class="font-semibold leading-tight">
|
||||||
<Check class="size-4 shrink-0 text-green-600 dark:text-green-400" />
|
Cutting Selesai (Menunggu Verifikasi)
|
||||||
<h3 class="font-semibold leading-tight">
|
</h3>
|
||||||
Cutting Selesai (Menunggu Verifikasi)
|
<Badge v-if="totalCompleted > 0" variant="outline" class="border-green-600/30 text-green-600 dark:text-green-400">
|
||||||
</h3>
|
{{ totalCompleted }}
|
||||||
<Badge v-if="totalCompleted > 0" variant="outline" class="border-green-600/30 text-green-600 dark:text-green-400">
|
</Badge>
|
||||||
{{ 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>
|
</div>
|
||||||
|
<p class="text-xs text-muted-foreground">
|
||||||
|
Daftar cutting yang telah selesai dikerjakan. Gunakan tombol aksi untuk memverifikasi atau menolak.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
<CardContent class="pt-0 pb-6">
|
||||||
:class="open ? 'rotate-180' : ''" />
|
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
</CollapsibleTrigger>
|
<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">
|
||||||
<CollapsibleContent>
|
<div class="min-w-0">
|
||||||
<CardContent class="pt-0 pb-6">
|
<h4 class="font-medium text-sm truncate">
|
||||||
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
Cutting #{{ cutting.id }}
|
||||||
<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">
|
</h4>
|
||||||
<div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
|
<span class="text-[10px] text-muted-foreground block truncate">
|
||||||
<div class="min-w-0">
|
{{ cutting.created_at_formatted }}
|
||||||
<h4 class="font-medium text-sm truncate">
|
</span>
|
||||||
Cutting #{{ cutting.id }}
|
</div>
|
||||||
</h4>
|
<div class="flex shrink-0 items-center">
|
||||||
<span class="text-[10px] text-muted-foreground block truncate">
|
<DataTableActions :cutting="cutting" />
|
||||||
{{ cutting.created_at_formatted }}
|
</div>
|
||||||
</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">{{ formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }} {{ getTotalMaterialUsageUnit(cutting.materials) }}</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>
|
</div>
|
||||||
|
|
||||||
<Empty v-else class="py-8">
|
<div class="p-4 space-y-3 flex-1 text-xs">
|
||||||
<EmptyHeader>
|
<div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
|
||||||
<EmptyTitle>Tidak ada cutting selesai</EmptyTitle>
|
<span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
|
||||||
<EmptyDescription>
|
</div>
|
||||||
Semua cutting selesai telah diverifikasi atau belum selesai diproses.
|
|
||||||
</EmptyDescription>
|
<div class="space-y-1">
|
||||||
</EmptyHeader>
|
<span class="font-medium text-foreground">Bahan Baku:</span>
|
||||||
</Empty>
|
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
||||||
</CardContent>
|
<li v-for="mat in cutting.materials" :key="mat.id">
|
||||||
</CollapsibleContent>
|
{{ mat.raw_material_price?.raw_material?.name }} ({{ mat.raw_material_price?.variant }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
|
||||||
</Card>
|
</li>
|
||||||
</Collapsible>
|
<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">{{ formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }} {{ getTotalMaterialUsageUnit(cutting.materials) }}</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>
|
||||||
|
</Card>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -148,14 +148,14 @@ function formatTotalMaterialUsage(totalUsage: number | null | undefined, materia
|
|||||||
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
if (unit === 'yard') {
|
if (unit === 'yard') {
|
||||||
return (totalUsage * CM_PER_YARD).toFixed(4);
|
return (totalUsage * CM_PER_YARD).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (unit === 'meter') {
|
if (unit === 'meter') {
|
||||||
return (totalUsage * CM_PER_METER).toFixed(4);
|
return (totalUsage * CM_PER_METER).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
return totalUsage.toFixed(4);
|
return totalUsage.toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTotalMaterialUsageUnit(materials: any[]): string {
|
function getTotalMaterialUsageUnit(materials: any[]): string {
|
||||||
@ -207,6 +207,8 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
|
|||||||
<span>Total Pemakaian Bahan <strong class="text-primary">{{
|
<span>Total Pemakaian Bahan <strong class="text-primary">{{
|
||||||
formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }}
|
formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }}
|
||||||
{{ getTotalMaterialUsageUnit(cutting.materials) }}</strong></span>
|
{{ getTotalMaterialUsageUnit(cutting.materials) }}</strong></span>
|
||||||
|
<span>Biaya Bahan <strong class="text-primary">{{
|
||||||
|
cutting.total_material_cost_formatted ?? 'Rp 0' }}</strong></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,20 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronDown, Scissors } from '@lucide/vue';
|
import { Card } from '@/components/ui/card';
|
||||||
import { computed, ref } from 'vue';
|
import type { CuttingListItem } from '@/types/cutting';
|
||||||
import DataTableActions from './data-table-actions.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';
|
|
||||||
|
|
||||||
const CM_PER_YARD = 91.44;
|
const CM_PER_YARD = 91.44;
|
||||||
const CM_PER_METER = 100;
|
const CM_PER_METER = 100;
|
||||||
@ -27,14 +14,14 @@ function formatTotalMaterialUsage(totalUsage: number | null | undefined, materia
|
|||||||
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
const unit = materials[0]?.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
if (unit === 'yard') {
|
if (unit === 'yard') {
|
||||||
return (totalUsage * CM_PER_YARD).toFixed(4);
|
return (totalUsage * CM_PER_YARD).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (unit === 'meter') {
|
if (unit === 'meter') {
|
||||||
return (totalUsage * CM_PER_METER).toFixed(4);
|
return (totalUsage * CM_PER_METER).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
return totalUsage.toFixed(4);
|
return totalUsage.toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTotalMaterialUsageUnit(materials: any[]): string {
|
function getTotalMaterialUsageUnit(materials: any[]): string {
|
||||||
@ -46,115 +33,102 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
|
|||||||
|
|
||||||
return materials[0]?.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
return materials[0]?.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
||||||
}
|
}
|
||||||
import type { CuttingListItem } from '@/types/cutting';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
function formatMaterialUsage(mat: any): string {
|
||||||
|
const usage = mat.material_usage ?? 0;
|
||||||
|
const unit = mat.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
|
if (unit === 'yard') {
|
||||||
|
return (usage * CM_PER_YARD).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unit === 'meter') {
|
||||||
|
return (usage * CM_PER_METER).toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return usage.toFixed(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMaterialUnit(mat: any): string {
|
||||||
|
const unit = mat.raw_material_price?.raw_material?.unit;
|
||||||
|
|
||||||
|
if (unit === 'yard' || unit === 'meter') {
|
||||||
|
return 'cm';
|
||||||
|
}
|
||||||
|
|
||||||
|
return mat.raw_material_price?.raw_material?.unit_abbreviation ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
cuttings: CuttingListItem[];
|
cuttings: CuttingListItem[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const open = ref(false);
|
|
||||||
|
|
||||||
const totalInProgress = computed(() => props.cuttings.length);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Collapsible v-model:open="open">
|
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<Card class="!py-0">
|
<Card v-for="cutting in cuttings" :key="cutting.id"
|
||||||
<CollapsibleTrigger
|
class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
|
||||||
class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
|
<div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
|
||||||
<div class="min-w-0 space-y-1">
|
<div class="min-w-0">
|
||||||
<div class="flex items-center gap-2">
|
<h4 class="font-medium text-sm truncate">
|
||||||
<Scissors class="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
|
Cutting #{{ cutting.id }}
|
||||||
<h3 class="font-semibold leading-tight">
|
</h4>
|
||||||
Cutting Sedang Proses
|
<span class="text-[10px] text-muted-foreground block truncate">
|
||||||
</h3>
|
{{ cutting.created_at_formatted }}
|
||||||
<Badge v-if="totalInProgress > 0" variant="outline" class="border-amber-600/30 text-amber-600 dark:text-amber-400">
|
</span>
|
||||||
{{ totalInProgress }}
|
</div>
|
||||||
</Badge>
|
<div class="flex shrink-0 items-center">
|
||||||
</div>
|
<DataTableActions :cutting="cutting" />
|
||||||
<p class="text-xs text-muted-foreground">
|
</div>
|
||||||
Daftar cutting yang sedang dalam pengerjaan. Gunakan tombol aksi untuk mengubah, menyelesaikan, atau menghapus.
|
</div>
|
||||||
</p>
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
<div class="space-y-1">
|
||||||
:class="open ? 'rotate-180' : ''" />
|
<span class="font-medium text-foreground">Bahan Baku:</span>
|
||||||
</CollapsibleTrigger>
|
<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 }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
|
||||||
|
</li>
|
||||||
|
<li v-if="!cutting.materials.length">Belum ada bahan baku</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<CollapsibleContent>
|
<div class="space-y-1">
|
||||||
<CardContent class="pt-0 pb-6">
|
<span class="font-medium text-foreground">Hasil Produk:</span>
|
||||||
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
||||||
<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">
|
<li v-for="res in cutting.results" :key="res.id">
|
||||||
<div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
|
{{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }}) -
|
||||||
<div class="min-w-0">
|
{{ res.cutting_result }} pcs
|
||||||
<h4 class="font-medium text-sm truncate">
|
</li>
|
||||||
Cutting #{{ cutting.id }}
|
<li v-if="!cutting.results.length">Belum ada hasil produk</li>
|
||||||
</h4>
|
</ul>
|
||||||
<span class="text-[10px] text-muted-foreground block truncate">
|
</div>
|
||||||
{{ 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.results.length" class="space-y-1.5 pt-2 border-t">
|
||||||
<div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
|
<div class="flex items-center justify-between text-[11px]">
|
||||||
<span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
|
<span class="text-muted-foreground">Total Hasil Cutting:</span>
|
||||||
</div>
|
<span class="font-semibold tabular-nums">{{ cutting.total_result_pieces ?? 0 }}
|
||||||
|
pcs</span>
|
||||||
<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">{{ formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }} {{ getTotalMaterialUsageUnit(cutting.materials) }}</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>
|
</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">{{ formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }} {{ getTotalMaterialUsageUnit(cutting.materials) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Empty v-else class="py-8">
|
<div class="text-[11px] text-muted-foreground pt-2 border-t flex items-center justify-between">
|
||||||
<EmptyHeader>
|
<span>Pembuat:</span>
|
||||||
<EmptyTitle>Tidak ada cutting proses</EmptyTitle>
|
<span class="font-medium text-foreground">
|
||||||
<EmptyDescription>
|
{{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}
|
||||||
Semua cutting telah selesai atau belum dimulai.
|
</span>
|
||||||
</EmptyDescription>
|
</div>
|
||||||
</EmptyHeader>
|
</div>
|
||||||
</Empty>
|
|
||||||
</CardContent>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</Card>
|
</Card>
|
||||||
</Collapsible>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user