From e59c4baea6b6e74a147e934e0e6882251f3dcbfe Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 21 Jun 2026 11:23:39 +0700
Subject: [PATCH] refactor: standardize material usage formatting to two
 decimal places across cutting management components for improved consistency

---
 .../table/CuttingCompletedSection.vue         | 226 +++++++++---------
 .../cuttings/table/CuttingGroupedTable.vue    |   8 +-
 .../table/CuttingInProgressSection.vue        | 204 +++++++---------
 3 files changed, 212 insertions(+), 226 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
index 0dd022b..3437537 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import { Check, ChevronDown } from '@lucide/vue';
-import { computed, ref } from 'vue';
+import { Check } from '@lucide/vue';
+import { computed } 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 CM_PER_YARD = 91.44;
 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;
 
     if (unit === 'yard') {
-        return (totalUsage * CM_PER_YARD).toFixed(4);
+        return (totalUsage * CM_PER_YARD).toFixed(2);
     }
 
     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 {
@@ -46,115 +42,129 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
 
     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<{
     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>
+    <Card class="!py-0">
+        <div class="flex w-full items-center justify-between gap-3 px-6 py-4">
+            <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>
+        </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">{{ 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>
+        <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>
 
-                    <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>
+                    <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 }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
+                                </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>
+
+            <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>
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
index 22f1e44..203046c 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
@@ -148,14 +148,14 @@ function formatTotalMaterialUsage(totalUsage: number | null | undefined, materia
     const unit = materials[0]?.raw_material_price?.raw_material?.unit;
 
     if (unit === 'yard') {
-        return (totalUsage * CM_PER_YARD).toFixed(4);
+        return (totalUsage * CM_PER_YARD).toFixed(2);
     }
 
     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 {
@@ -207,6 +207,8 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
                                 <span>Total Pemakaian Bahan <strong class="text-primary">{{
                                     formatTotalMaterialUsage(cutting.total_material_usage, cutting.materials) }}
                                     {{ getTotalMaterialUsageUnit(cutting.materials) }}</strong></span>
+                                <span>Biaya Bahan <strong class="text-primary">{{
+                                    cutting.total_material_cost_formatted ?? 'Rp 0' }}</strong></span>
                             </div>
                         </div>
                     </div>
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
index 22f3521..5a329f4 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts">
-import { ChevronDown, Scissors } from '@lucide/vue';
-import { computed, ref } from 'vue';
+import { Card } from '@/components/ui/card';
+import type { CuttingListItem } from '@/types/cutting';
 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_METER = 100;
@@ -27,14 +14,14 @@ function formatTotalMaterialUsage(totalUsage: number | null | undefined, materia
     const unit = materials[0]?.raw_material_price?.raw_material?.unit;
 
     if (unit === 'yard') {
-        return (totalUsage * CM_PER_YARD).toFixed(4);
+        return (totalUsage * CM_PER_YARD).toFixed(2);
     }
 
     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 {
@@ -46,115 +33,102 @@ function getTotalMaterialUsageUnit(materials: any[]): string {
 
     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[];
 }>();
 
-const open = ref(false);
-
-const totalInProgress = 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">
-                        <Scissors class="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
-                        <h3 class="font-semibold leading-tight">
-                            Cutting Sedang Proses
-                        </h3>
-                        <Badge v-if="totalInProgress > 0" variant="outline" class="border-amber-600/30 text-amber-600 dark:text-amber-400">
-                            {{ totalInProgress }}
-                        </Badge>
-                    </div>
-                    <p class="text-xs text-muted-foreground">
-                        Daftar cutting yang sedang dalam pengerjaan. Gunakan tombol aksi untuk mengubah, menyelesaikan, atau menghapus.
-                    </p>
+    <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>
 
-                <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
-                    :class="open ? 'rotate-180' : ''" />
-            </CollapsibleTrigger>
+                <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 }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
+                        </li>
+                        <li v-if="!cutting.materials.length">Belum ada bahan baku</li>
+                    </ul>
+                </div>
 
-            <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="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 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 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>
 
-                    <Empty v-else class="py-8">
-                        <EmptyHeader>
-                            <EmptyTitle>Tidak ada cutting proses</EmptyTitle>
-                            <EmptyDescription>
-                                Semua cutting telah selesai atau belum dimulai.
-                            </EmptyDescription>
-                        </EmptyHeader>
-                    </Empty>
-                </CardContent>
-            </CollapsibleContent>
+                <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>
-    </Collapsible>
+    </div>
 </template>