refactor: standardize material usage formatting to two decimal places across cutting management components for improved consistency

resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue

@@ -1,20 +1,16 @@
 <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 { 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,22 +42,42 @@ 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
+        <div class="flex w-full items-center justify-between gap-3 px-6 py-4">
-                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" />
@@ -76,12 +92,8 @@ const totalCompleted = computed(() => props.cuttings.length);
                     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">
@@ -108,7 +120,7 @@ const totalCompleted = computed(() => props.cuttings.length);
                             <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 }}
+                                    {{ 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>
@@ -154,7 +166,5 @@ const totalCompleted = computed(() => props.cuttings.length);
                 </EmptyHeader>
             </Empty>
         </CardContent>
-            </CollapsibleContent>
     </Card>
-    </Collapsible>
 </template>

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>

resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue

@@ -1,20 +1,7 @@
 <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 { 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,45 +33,42 @@ 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>
-
-                <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">
+        <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">
@@ -108,7 +92,8 @@ const totalInProgress = computed(() => props.cuttings.length);
                     <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 }}
+                            {{ 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>
@@ -118,7 +103,8 @@ const totalInProgress = computed(() => props.cuttings.length);
                     <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
+                            {{ 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>
@@ -127,7 +113,8 @@ const totalInProgress = computed(() => props.cuttings.length);
                 <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>
+                        <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>
@@ -144,17 +131,4 @@ const totalInProgress = computed(() => props.cuttings.length);
             </div>
         </Card>
     </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>
-        </Card>
-    </Collapsible>
 </template>