From 3ef948c47f55dfc6981e7f19fb573729c1b2de3d Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 6 Aug 2026 10:57:31 +0700
Subject: [PATCH] feat: enhance CuttingItemSubRow to display total material
 usage and results by raw material

---
 .../admin/manage/cutting/cutting-card.tsx     | 10 +++-
 .../admin/manage/cutting/cutting-sub-row.tsx  | 50 ++++++++++++++-----
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/resources/js/pages/admin/manage/cutting/cutting-card.tsx b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
index 11c0241..4e8172b 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-card.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
@@ -1,4 +1,3 @@
-import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
 import { ImagePreviewButton } from '@/components/image-preview-button';
 import { RowActions } from '@/components/row-actions';
 import { Button } from '@/components/ui/button';
@@ -6,6 +5,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/hooks/use-can';
 import { formatDateTime, formatNumber } from '@/lib/format';
 import { formatCurrency } from '@/lib/utils';
+import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
 import type { Cutting } from './columns';
 
 export type CuttingCardRowParams = {
@@ -118,6 +118,14 @@ export function CuttingCardRow({
                                         {formatCurrency(cutting.cost_per_unit)}
                                     </span>
                                 )}
+                                {cutting.total_material_cost && (
+                                    <span className="font-semibold">
+                                        <span className="font-normal text-muted-foreground">
+                                            Biaya Keseluruhan:{' '}
+                                        </span>
+                                        {formatCurrency(cutting.total_material_cost)}
+                                    </span>
+                                )}
                             </div>
 
                             {cutting.photo_url && (
diff --git a/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx b/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
index f64cd63..e77ac58 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
@@ -69,16 +69,41 @@ export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
                                 </TableCell>
                             </TableRow>
                             {Object.entries(singleByRawMaterial).map(
-                                ([rawMaterialName, groupItems]) => (
-                                    <Fragment key={rawMaterialName}>
-                                        <TableRow>
-                                            <TableCell
-                                                colSpan={5}
-                                                className="text-center font-medium text-muted-foreground bg-muted/20"
-                                            >
-                                                {rawMaterialName}
-                                            </TableCell>
-                                        </TableRow>
+                                ([rawMaterialName, groupItems]) => {
+                                    const totalPemakaian = groupItems.reduce(
+                                        (sum, item) =>
+                                            sum + Number(item.material_usage),
+                                        0,
+                                    );
+                                    const totalHasil = groupItems.reduce(
+                                        (sum, item) =>
+                                            sum +
+                                            (item.material_result !== null
+                                                ? Number(item.material_result)
+                                                : 0),
+                                        0,
+                                    );
+
+                                    return (
+                                        <Fragment key={rawMaterialName}>
+                                            <TableRow>
+                                                <TableCell
+                                                    colSpan={3}
+                                                    className="text-center font-medium text-muted-foreground bg-muted/20"
+                                                >
+                                                    {rawMaterialName}
+                                                </TableCell>
+                                                <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
+                                                    {formatNumber(
+                                                        totalPemakaian,
+                                                    )}
+                                                </TableCell>
+                                                <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
+                                                    {formatNumber(
+                                                        totalHasil,
+                                                    )}
+                                                </TableCell>
+                                            </TableRow>
                                         {groupItems.map((item) => {
                                             counter++;
                                             return (
@@ -128,8 +153,9 @@ export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
                                             );
                                         })}
                                     </Fragment>
-                                ),
-                            )}
+                                );
+                            },
+                        )}
                         </>
                     )}