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 { 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),
|
||||||
|
|||||||
@ -8,124 +8,238 @@ 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;
|
|
||||||
}
|
|
||||||
>,
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const hasSingle = singles.length > 0;
|
||||||
|
const hasCombo = comboItems.length > 0;
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4 overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
{Object.entries(groupedMaterials).map(([key, group]) => (
|
<Table>
|
||||||
<div key={key} className="space-y-2">
|
<TableHeader>
|
||||||
{group.combination && (
|
<TableRow>
|
||||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
<TableHead className="w-[50px] text-center">
|
||||||
<span className="inline-flex items-center rounded-md bg-muted px-2 py-1 font-medium text-foreground">
|
No
|
||||||
Kombinasi
|
</TableHead>
|
||||||
</span>
|
<TableHead className="w-[60px]">Foto</TableHead>
|
||||||
{group.combination.material_result !== null && (
|
<TableHead>Varian</TableHead>
|
||||||
<span>
|
<TableHead className="text-right">
|
||||||
Hasil: {formatNumber(group.combination.material_result)}
|
Pemakaian
|
||||||
</span>
|
</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>
|
{hasCombo && (
|
||||||
<TableHeader>
|
<>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableHead className="w-[50px] text-center">
|
<TableCell
|
||||||
No
|
colSpan={5}
|
||||||
</TableHead>
|
className="text-center font-bold bg-muted/50"
|
||||||
<TableHead className="w-[60px]">Foto</TableHead>
|
>
|
||||||
<TableHead>Bahan Baku</TableHead>
|
Kombinasi
|
||||||
<TableHead>Varian</TableHead>
|
</TableCell>
|
||||||
<TableHead className="text-right">Pemakaian</TableHead>
|
|
||||||
<TableHead className="text-right">Hasil</TableHead>
|
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHeader>
|
{Object.entries(comboGroups).map(
|
||||||
<TableBody>
|
([comboId, materials]) => {
|
||||||
{group.materials.length === 0 ? (
|
counter++;
|
||||||
<TableRow>
|
const combo = combinations.find(
|
||||||
<TableCell
|
(c) => c.id === Number(comboId),
|
||||||
colSpan={6}
|
);
|
||||||
className="text-center text-muted-foreground"
|
|
||||||
>
|
return (
|
||||||
Tidak ada item.
|
<Fragment key={comboId}>
|
||||||
</TableCell>
|
<TableRow>
|
||||||
</TableRow>
|
<TableCell className="text-center font-medium">
|
||||||
) : (
|
{counter}
|
||||||
group.materials.map((item, index) => (
|
</TableCell>
|
||||||
<TableRow key={item.id}>
|
<TableCell
|
||||||
<TableCell className="text-center">
|
colSpan={4}
|
||||||
{index + 1}
|
className="font-medium text-muted-foreground bg-muted/20"
|
||||||
</TableCell>
|
>
|
||||||
<TableCell>
|
Kombinasi{' '}
|
||||||
{item.raw_material_price?.photo_url ? (
|
{counter}
|
||||||
<ImagePreviewButton
|
{combo?.material_result !==
|
||||||
srcs={[
|
null &&
|
||||||
item.raw_material_price
|
combo?.material_result !==
|
||||||
.photo_url,
|
undefined && (
|
||||||
]}
|
<span className="ml-2">
|
||||||
title={
|
(Hasil:{' '}
|
||||||
item.raw_material_price.variant
|
{formatNumber(
|
||||||
}
|
combo.material_result,
|
||||||
/>
|
)}
|
||||||
) : (
|
)
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
|
</span>
|
||||||
N/A
|
)}
|
||||||
</div>
|
</TableCell>
|
||||||
)}
|
</TableRow>
|
||||||
</TableCell>
|
{materials.map((item) => (
|
||||||
<TableCell>
|
<TableRow key={item.id}>
|
||||||
{item.raw_material_price?.raw_material?.name ?? '-'}
|
<TableCell></TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
{item
|
||||||
{item.raw_material_price?.variant ?? '-'}
|
.raw_material_price
|
||||||
</TableCell>
|
?.photo_url ? (
|
||||||
<TableCell className="text-right">
|
<ImagePreviewButton
|
||||||
{formatNumber(item.material_usage)}
|
srcs={[
|
||||||
</TableCell>
|
item
|
||||||
<TableCell className="text-right">
|
.raw_material_price
|
||||||
{group.combination
|
.photo_url,
|
||||||
? '-'
|
]}
|
||||||
: (item.material_result !== null
|
title={
|
||||||
? formatNumber(item.material_result)
|
item
|
||||||
: '-')}
|
.raw_material_price
|
||||||
</TableCell>
|
.variant
|
||||||
</TableRow>
|
}
|
||||||
))
|
/>
|
||||||
|
) : (
|
||||||
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user