dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor CuttingItemSubRow to improve material grouping and display logic

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-06 10:14:49 +07:00
parent 577329365a
commit b45052dc55
2 changed files with 223 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/pages/admin/manage/cutting/cutting-card.tsx
View File

@ -28,7 +28,15 @@ export function CuttingCardRow({
const { can } = useCan(); const { can } = useCan();
const items = cutting.cutting_materials ?? []; const items = cutting.cutting_materials ?? [];
const result = cutting.cutting_results?.[0]; 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 productName = result?.product_name ?? '-';
const totalUsage = items.reduce( const totalUsage = items.reduce(
(sum, item) => sum + Number(item.material_usage), (sum, item) => sum + Number(item.material_usage),

238
resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
View File

@ -8,55 +8,41 @@ import {
TableRow, TableRow,
} from '@/components/ui/table'; } from '@/components/ui/table';
import { formatNumber } from '@/lib/format'; import { formatNumber } from '@/lib/format';
import { Fragment } from 'react';
import type { Cutting } from './columns'; import type { Cutting } from './columns';
export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) { export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
const items = cutting.cutting_materials ?? []; const items = cutting.cutting_materials ?? [];
const combinations = cutting.cutting_material_combinations ?? []; 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) => { (acc, item) => {
const key = item.combination_id ?? `single-${item.id}`; const name =
item.raw_material_price?.raw_material?.name ?? 'BING';
if (!acc[key]) { if (!acc[name]) acc[name] = [];
acc[key] = { acc[name].push(item);
combination: item.combination_id
? (combinations.find((c) => c.id === item.combination_id) ?? null)
: null,
materials: [],
};
}
acc[key].materials.push(item);
return acc; return acc;
}, },
{} as Record< {} as Record<string, typeof singles>,
string,
{
combination: { id: number; material_result: number | null } | null;
materials: typeof items;
}
>,
); );
return ( const hasSingle = singles.length > 0;
<div className="space-y-4 overflow-x-auto"> const hasCombo = comboItems.length > 0;
{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>
)}
let counter = 0;
return (
<div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@ -64,37 +50,55 @@ export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
No No
</TableHead> </TableHead>
<TableHead className="w-[60px]">Foto</TableHead> <TableHead className="w-[60px]">Foto</TableHead>
<TableHead>Bahan Baku</TableHead>
<TableHead>Varian</TableHead> <TableHead>Varian</TableHead>
<TableHead className="text-right">Pemakaian</TableHead> <TableHead className="text-right">
Pemakaian
</TableHead>
<TableHead className="text-right">Hasil</TableHead> <TableHead className="text-right">Hasil</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{group.materials.length === 0 ? ( {hasSingle && (
<>
<TableRow> <TableRow>
<TableCell <TableCell
colSpan={6} colSpan={5}
className="text-center text-muted-foreground" className="text-center font-bold bg-muted/50"
> >
Tidak ada item. Single
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( {Object.entries(singleByRawMaterial).map(
group.materials.map((item, index) => ( ([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}> <TableRow key={item.id}>
<TableCell className="text-center"> <TableCell className="text-center">
{index + 1} {counter}
</TableCell> </TableCell>
<TableCell> <TableCell>
{item.raw_material_price?.photo_url ? ( {item.raw_material_price
?.photo_url ? (
<ImagePreviewButton <ImagePreviewButton
srcs={[ srcs={[
item.raw_material_price item
.raw_material_price
.photo_url, .photo_url,
]} ]}
title={ title={
item.raw_material_price.variant item
.raw_material_price
.variant
} }
/> />
) : ( ) : (
@ -104,28 +108,138 @@ export function CuttingItemSubRow({ cutting }: { cutting: Cutting }) {
)} )}
</TableCell> </TableCell>
<TableCell> <TableCell>
{item.raw_material_price?.raw_material?.name ?? '-'} {item.raw_material_price
</TableCell> ?.variant ?? '-'}
<TableCell>
{item.raw_material_price?.variant ?? '-'}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{formatNumber(item.material_usage)} {formatNumber(
item.material_usage,
)}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
{group.combination {item.material_result !==
? '-' null
: (item.material_result !== null ? formatNumber(
? formatNumber(item.material_result) item.material_result,
: '-')} )
: '-'}
</TableCell>
</TableRow>
);
})}
</Fragment>
),
)}
</>
)}
{hasCombo && (
<>
<TableRow>
<TableCell
colSpan={5}
className="text-center font-bold bg-muted/50"
>
Kombinasi
</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>
);
},
)}
</>
)}
{items.length === 0 && (
<TableRow>
<TableCell
colSpan={5}
className="text-center text-muted-foreground"
>
Tidak ada bahan baku.
</TableCell> </TableCell>
</TableRow> </TableRow>
))
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
))}
</div>
); );
} }