From b846219b9d376f63192693481f04808f1efd3151 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 14 Aug 2026 21:50:40 +0700
Subject: [PATCH] feat: refactor CuttingShow component layout for improved
 readability and structure

---
 .../js/pages/admin/manage/cutting/show.tsx    | 40 ++++---------------
 1 file changed, 7 insertions(+), 33 deletions(-)

diff --git a/resources/js/pages/admin/manage/cutting/show.tsx b/resources/js/pages/admin/manage/cutting/show.tsx
index 1a3df9d..b0dbd9e 100644
--- a/resources/js/pages/admin/manage/cutting/show.tsx
+++ b/resources/js/pages/admin/manage/cutting/show.tsx
@@ -1,5 +1,3 @@
-import { Head, Link } from '@inertiajs/react';
-import { ArrowLeft } from 'lucide-react';
 import { ImagePreviewButton } from '@/components/dialogs';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -13,6 +11,8 @@ import {
 } from '@/components/ui/table';
 import { formatNumber } from '@/lib/format';
 import { index as cuttingIndex } from '@/routes/admin/manage/cuttings';
+import { Head, Link } from '@inertiajs/react';
+import { ArrowLeft } from 'lucide-react';
 import type { Cutting } from './columns';
 import { CuttingItemSubRow } from './cutting-sub-row';
 
@@ -126,37 +126,11 @@ export default function CuttingShow({ cutting }: Props) {
                             <h3 className="mb-3 text-sm font-semibold">Bahan Baku</h3>
 
                             <div className="pb-2">
-                                <div className="grid gap-4 sm:grid-cols-2">
-                                    <div className="rounded-lg border p-3">
-                                        <p className="text-xs text-muted-foreground">Total Pemakaian</p>
-                                        <p className="mt-1 text-lg font-semibold text-primary">
-                                            {formatNumber(totalUsage)}
-                                        </p>
-                                    </div>
-                                    {result?.cutting_result && (
-                                        <div className="rounded-lg border p-3">
-                                            <p className="text-xs text-muted-foreground">Total Hasil Cutting</p>
-                                            <p className="mt-1 text-lg font-semibold text-primary">
-                                                {formatNumber(result.cutting_result)} pcs
-                                            </p>
-                                        </div>
-                                    )}
-                                    {cutting.formatted_cost_per_unit && (
-                                        <div className="rounded-lg border p-3">
-                                            <p className="text-xs text-muted-foreground">Biaya Per Produk</p>
-                                            <p className="mt-1 text-lg font-semibold text-primary">
-                                                {cutting.formatted_cost_per_unit}
-                                            </p>
-                                        </div>
-                                    )}
-                                    {cutting.formatted_total_material_cost && (
-                                        <div className="rounded-lg border p-3">
-                                            <p className="text-xs text-muted-foreground">Total Biaya Bahan</p>
-                                            <p className="mt-1 text-lg font-semibold text-primary">
-                                                {cutting.formatted_total_material_cost}
-                                            </p>
-                                        </div>
-                                    )}
+                                <div className="rounded-lg border p-3">
+                                    <p className="text-xs text-muted-foreground">Total Pemakaian</p>
+                                    <p className="mt-1 text-lg font-semibold text-primary">
+                                        {formatNumber(totalUsage)}
+                                    </p>
                                 </div>
                             </div>