From b45052dc558ed22a5e41dcf16f6bb4633793e689 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 6 Aug 2026 10:14:49 +0700
Subject: [PATCH] feat: refactor CuttingItemSubRow to improve material grouping
 and display logic

---
 .../admin/manage/cutting/cutting-card.tsx     |  10 +-
 .../admin/manage/cutting/cutting-sub-row.tsx  | 314 ++++++++++++------
 2 files changed, 223 insertions(+), 101 deletions(-)

diff --git a/resources/js/pages/admin/manage/cutting/cutting-card.tsx b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
index f496aea..c9da019 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-card.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
@@ -28,7 +28,15 @@ export function CuttingCardRow({
     const { can } = useCan();
     const items = cutting.cutting_materials ?? [];
     const result = cutting.cutting_results?.[0];
-    const materialCount = items.length;
+    const singleCount = items.filter(
+        (item) => item.combination_id === null,
+    ).length;
+    const comboCount = new Set(
+        items
+            .filter((item) => item.combination_id !== null)
+            .map((item) => item.combination_id),
+    ).size;
+    const materialCount = singleCount + comboCount;
     const productName = result?.product_name ?? '-';
     const totalUsage = items.reduce(
         (sum, item) => sum + Number(item.material_usage),
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 11d3f71..f64cd63 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
@@ -8,124 +8,238 @@ import {
     TableRow,
 } from '@/components/ui/table';
 import { formatNumber } from '@/lib/format';
+import { Fragment } from 'react';
 import type { Cutting } from './columns';
 
 export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
     const items = cutting.cutting_materials ?? [];
     const combinations = cutting.cutting_material_combinations ?? [];
 
-    const groupedMaterials = items.reduce(
+    const singles = items.filter((item) => item.combination_id === null);
+    const comboItems = items.filter((item) => item.combination_id !== null);
+
+    const comboGroups: Record<number, typeof items> = {};
+    comboItems.forEach((item) => {
+        const comboId = item.combination_id!;
+        if (!comboGroups[comboId]) comboGroups[comboId] = [];
+        comboGroups[comboId].push(item);
+    });
+
+    const singleByRawMaterial = singles.reduce(
         (acc, item) => {
-            const key = item.combination_id ?? `single-${item.id}`;
-
-            if (!acc[key]) {
-                acc[key] = {
-                    combination: item.combination_id
-                        ? (combinations.find((c) => c.id === item.combination_id) ?? null)
-                        : null,
-                    materials: [],
-                };
-            }
-
-            acc[key].materials.push(item);
-
+            const name =
+                item.raw_material_price?.raw_material?.name ?? 'BING';
+            if (!acc[name]) acc[name] = [];
+            acc[name].push(item);
             return acc;
         },
-        {} as Record<
-            string,
-            {
-                combination: { id: number; material_result: number | null } | null;
-                materials: typeof items;
-            }
-        >,
+        {} as Record<string, typeof singles>,
     );
 
+    const hasSingle = singles.length > 0;
+    const hasCombo = comboItems.length > 0;
+
+    let counter = 0;
+
     return (
-        <div className="space-y-4 overflow-x-auto">
-            {Object.entries(groupedMaterials).map(([key, group]) => (
-                <div key={key} className="space-y-2">
-                    {group.combination && (
-                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                            <span className="inline-flex items-center rounded-md bg-muted px-2 py-1 font-medium text-foreground">
-                                Kombinasi
-                            </span>
-                            {group.combination.material_result !== null && (
-                                <span>
-                                    Hasil: {formatNumber(group.combination.material_result)}
-                                </span>
+        <div className="overflow-x-auto">
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[50px] text-center">
+                            No
+                        </TableHead>
+                        <TableHead className="w-[60px]">Foto</TableHead>
+                        <TableHead>Varian</TableHead>
+                        <TableHead className="text-right">
+                            Pemakaian
+                        </TableHead>
+                        <TableHead className="text-right">Hasil</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {hasSingle && (
+                        <>
+                            <TableRow>
+                                <TableCell
+                                    colSpan={5}
+                                    className="text-center font-bold bg-muted/50"
+                                >
+                                    Single
+                                </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>
+                                        {groupItems.map((item) => {
+                                            counter++;
+                                            return (
+                                                <TableRow key={item.id}>
+                                                    <TableCell className="text-center">
+                                                        {counter}
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        {item.raw_material_price
+                                                            ?.photo_url ? (
+                                                            <ImagePreviewButton
+                                                                srcs={[
+                                                                    item
+                                                                        .raw_material_price
+                                                                        .photo_url,
+                                                                ]}
+                                                                title={
+                                                                    item
+                                                                        .raw_material_price
+                                                                        .variant
+                                                                }
+                                                            />
+                                                        ) : (
+                                                            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
+                                                                N/A
+                                                            </div>
+                                                        )}
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        {item.raw_material_price
+                                                            ?.variant ?? '-'}
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        {formatNumber(
+                                                            item.material_usage,
+                                                        )}
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        {item.material_result !==
+                                                            null
+                                                            ? formatNumber(
+                                                                item.material_result,
+                                                            )
+                                                            : '-'}
+                                                    </TableCell>
+                                                </TableRow>
+                                            );
+                                        })}
+                                    </Fragment>
+                                ),
                             )}
-                        </div>
+                        </>
                     )}
 
-                    <Table>
-                        <TableHeader>
+                    {hasCombo && (
+                        <>
                             <TableRow>
-                                <TableHead className="w-[50px] text-center">
-                                    No
-                                </TableHead>
-                                <TableHead className="w-[60px]">Foto</TableHead>
-                                <TableHead>Bahan Baku</TableHead>
-                                <TableHead>Varian</TableHead>
-                                <TableHead className="text-right">Pemakaian</TableHead>
-                                <TableHead className="text-right">Hasil</TableHead>
+                                <TableCell
+                                    colSpan={5}
+                                    className="text-center font-bold bg-muted/50"
+                                >
+                                    Kombinasi
+                                </TableCell>
                             </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                            {group.materials.length === 0 ? (
-                                <TableRow>
-                                    <TableCell
-                                        colSpan={6}
-                                        className="text-center text-muted-foreground"
-                                    >
-                                        Tidak ada item.
-                                    </TableCell>
-                                </TableRow>
-                            ) : (
-                                group.materials.map((item, index) => (
-                                    <TableRow key={item.id}>
-                                        <TableCell className="text-center">
-                                            {index + 1}
-                                        </TableCell>
-                                        <TableCell>
-                                            {item.raw_material_price?.photo_url ? (
-                                                <ImagePreviewButton
-                                                    srcs={[
-                                                        item.raw_material_price
-                                                            .photo_url,
-                                                    ]}
-                                                    title={
-                                                        item.raw_material_price.variant
-                                                    }
-                                                />
-                                            ) : (
-                                                <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
-                                                    N/A
-                                                </div>
-                                            )}
-                                        </TableCell>
-                                        <TableCell>
-                                            {item.raw_material_price?.raw_material?.name ?? '-'}
-                                        </TableCell>
-                                        <TableCell>
-                                            {item.raw_material_price?.variant ?? '-'}
-                                        </TableCell>
-                                        <TableCell className="text-right">
-                                            {formatNumber(item.material_usage)}
-                                        </TableCell>
-                                        <TableCell className="text-right">
-                                            {group.combination
-                                                ? '-'
-                                                : (item.material_result !== null
-                                                    ? formatNumber(item.material_result)
-                                                    : '-')}
-                                        </TableCell>
-                                    </TableRow>
-                                ))
+                            {Object.entries(comboGroups).map(
+                                ([comboId, materials]) => {
+                                    counter++;
+                                    const combo = combinations.find(
+                                        (c) => c.id === Number(comboId),
+                                    );
+
+                                    return (
+                                        <Fragment key={comboId}>
+                                            <TableRow>
+                                                <TableCell className="text-center font-medium">
+                                                    {counter}
+                                                </TableCell>
+                                                <TableCell
+                                                    colSpan={4}
+                                                    className="font-medium text-muted-foreground bg-muted/20"
+                                                >
+                                                    Kombinasi{' '}
+                                                    {counter}
+                                                    {combo?.material_result !==
+                                                        null &&
+                                                        combo?.material_result !==
+                                                        undefined && (
+                                                            <span className="ml-2">
+                                                                (Hasil:{' '}
+                                                                {formatNumber(
+                                                                    combo.material_result,
+                                                                )}
+                                                                )
+                                                            </span>
+                                                        )}
+                                                </TableCell>
+                                            </TableRow>
+                                            {materials.map((item) => (
+                                                <TableRow key={item.id}>
+                                                    <TableCell></TableCell>
+                                                    <TableCell>
+                                                        {item
+                                                            .raw_material_price
+                                                            ?.photo_url ? (
+                                                            <ImagePreviewButton
+                                                                srcs={[
+                                                                    item
+                                                                        .raw_material_price
+                                                                        .photo_url,
+                                                                ]}
+                                                                title={
+                                                                    item
+                                                                        .raw_material_price
+                                                                        .variant
+                                                                }
+                                                            />
+                                                        ) : (
+                                                            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
+                                                                N/A
+                                                            </div>
+                                                        )}
+                                                    </TableCell>
+                                                    <TableCell>
+                                                        {item
+                                                            .raw_material_price
+                                                            ?.raw_material
+                                                            ?.name ?? '-'}{' '}
+                                                        -{' '}
+                                                        {item
+                                                            .raw_material_price
+                                                            ?.variant ?? '-'}
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        {formatNumber(
+                                                            item.material_usage,
+                                                        )}
+                                                    </TableCell>
+                                                    <TableCell className="text-right">
+                                                        -
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))}
+                                        </Fragment>
+                                    );
+                                },
                             )}
-                        </TableBody>
-                    </Table>
-                </div>
-            ))}
+                        </>
+                    )}
+
+                    {items.length === 0 && (
+                        <TableRow>
+                            <TableCell
+                                colSpan={5}
+                                className="text-center text-muted-foreground"
+                            >
+                                Tidak ada bahan baku.
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
         </div>
     );
 }