feat: refactor CuttingItemSubRow to improve material grouping and display logic
This commit is contained in:
Yoga Pangestu
parent
577329365a
commit
b45052dc55
@ -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),
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user