feat: enhance CuttingItemSubRow to display total material usage and results by raw material

This commit is contained in:
Yoga Pangestu 2026-08-06 10:57:31 +07:00
parent 659104fa19
commit 3ef948c47f
2 changed files with 47 additions and 13 deletions

View File

@ -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 && (

View File

@ -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>
),
)}
);
},
)}
</>
)}