feat: add materials count and enhance purchase item display in purchase management

This commit is contained in:
Yoga Pangestu 2026-08-19 18:46:21 +07:00
parent 631330d3b4
commit cd944403bd
4 changed files with 109 additions and 40 deletions

View File

@ -27,6 +27,7 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
{ {
$itemCountQuery = '(SELECT COUNT(*) FROM purchase_items WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL)'; $itemCountQuery = '(SELECT COUNT(*) FROM purchase_items WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL)';
$totalQtyQuery = '(SELECT IFNULL(SUM(quantity), 0) FROM purchase_items WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL)'; $totalQtyQuery = '(SELECT IFNULL(SUM(quantity), 0) FROM purchase_items WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL)';
$materialsCountQuery = '(SELECT COUNT(DISTINCT raw_materials.id) FROM purchase_items JOIN raw_material_prices ON raw_material_prices.id = purchase_items.raw_material_price_id JOIN raw_materials ON raw_materials.id = raw_material_prices.raw_material_id WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL)';
$materialNameQuery = '(SELECT raw_materials.name FROM purchase_items JOIN raw_material_prices ON raw_material_prices.id = purchase_items.raw_material_price_id JOIN raw_materials ON raw_materials.id = raw_material_prices.raw_material_id WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL LIMIT 1)'; $materialNameQuery = '(SELECT raw_materials.name FROM purchase_items JOIN raw_material_prices ON raw_material_prices.id = purchase_items.raw_material_price_id JOIN raw_materials ON raw_materials.id = raw_material_prices.raw_material_id WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL LIMIT 1)';
$unitQuery = '(SELECT raw_materials.unit FROM purchase_items JOIN raw_material_prices ON raw_material_prices.id = purchase_items.raw_material_price_id JOIN raw_materials ON raw_materials.id = raw_material_prices.raw_material_id WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL LIMIT 1)'; $unitQuery = '(SELECT raw_materials.unit FROM purchase_items JOIN raw_material_prices ON raw_material_prices.id = purchase_items.raw_material_price_id JOIN raw_materials ON raw_materials.id = raw_material_prices.raw_material_id WHERE purchase_items.purchase_id = purchases.id AND purchase_items.deleted_at IS NULL LIMIT 1)';
@ -39,6 +40,7 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
]) ])
->selectRaw("{$itemCountQuery} as variants_count") ->selectRaw("{$itemCountQuery} as variants_count")
->selectRaw("{$totalQtyQuery} as total_qty") ->selectRaw("{$totalQtyQuery} as total_qty")
->selectRaw("{$materialsCountQuery} as materials_count")
->selectRaw("{$materialNameQuery} as material_name") ->selectRaw("{$materialNameQuery} as material_name")
->selectRaw("{$unitQuery} as unit") ->selectRaw("{$unitQuery} as unit")
->when($highlight, fn ($q) => $q->where('id', $highlight)) ->when($highlight, fn ($q) => $q->where('id', $highlight))

View File

@ -20,6 +20,7 @@ export type Purchase = {
photo_conversion_urls: string[]; photo_conversion_urls: string[];
created_at: string; created_at: string;
variants_count: number; variants_count: number;
materials_count: number;
total_qty: number; total_qty: number;
material_name: string | null; material_name: string | null;
unit: string | null; unit: string | null;

View File

@ -28,6 +28,7 @@ export function PurchaseCardRow({
const { can } = useCan(); const { can } = useCan();
const variantCount = purchase.variants_count ?? 0; const variantCount = purchase.variants_count ?? 0;
const totalQty = purchase.total_qty ?? 0; const totalQty = purchase.total_qty ?? 0;
const materialsCount = purchase.materials_count ?? 0;
const rawMaterialName = purchase.material_name ?? '-'; const rawMaterialName = purchase.material_name ?? '-';
const unit = purchase.unit ?? ''; const unit = purchase.unit ?? '';
@ -58,7 +59,11 @@ export function PurchaseCardRow({
</div> </div>
<div className="mt-1 text-xs text-muted-foreground"> <div className="mt-1 text-xs text-muted-foreground">
{rawMaterialName} {materialsCount > 1 ? (
<span>{materialsCount} bahan baku</span>
) : (
<span>{rawMaterialName}</span>
)}
{variantCount > 0 && ( {variantCount > 0 && (
<span className="ml-1"> <span className="ml-1">
({variantCount} varian) ({variantCount} varian)

View File

@ -9,6 +9,7 @@ import {
} from '@/components/ui/table'; } from '@/components/ui/table';
import { formatNumber } from '@/lib/format'; import { formatNumber } from '@/lib/format';
import { formatCurrency } from '@/lib/utils'; import { formatCurrency } from '@/lib/utils';
import { Fragment } from 'react';
import type { Purchase, PurchaseItemDetail } from './columns'; import type { Purchase, PurchaseItemDetail } from './columns';
export function PurchaseItemSubRow({ export function PurchaseItemSubRow({
@ -20,10 +21,31 @@ export function PurchaseItemSubRow({
items: PurchaseItemDetail[]; items: PurchaseItemDetail[];
isLoading: boolean; isLoading: boolean;
}) { }) {
const unit = purchase.unit ?? ''; const items = loadedItems ?? [];
const groupedByMaterial = items.reduce(
(acc, item) => {
const materialName = item.raw_material_price?.raw_material?.name ?? '-';
const unit = item.raw_material_price?.raw_material?.unit ?? '';
if (!acc[materialName]) {
acc[materialName] = { unit, items: [] };
}
acc[materialName].items.push(item);
return acc;
},
{} as Record<string, { unit: string; items: PurchaseItemDetail[] }>,
);
const materialEntries = Object.entries(groupedByMaterial);
const isMultiMaterial = materialEntries.length > 1;
let counter = 0;
return ( return (
<div className="space-y-4 overflow-x-auto"> <div className="overflow-x-auto rounded-md border">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@ -47,7 +69,7 @@ export function PurchaseItemSubRow({
Memuat item... Memuat item...
</TableCell> </TableCell>
</TableRow> </TableRow>
) : loadedItems.length === 0 ? ( ) : items.length === 0 ? (
<TableRow> <TableRow>
<TableCell <TableCell
colSpan={6} colSpan={6}
@ -57,42 +79,81 @@ export function PurchaseItemSubRow({
</TableCell> </TableCell>
</TableRow> </TableRow>
) : ( ) : (
loadedItems.map((item, index) => ( <>
<TableRow key={item.id}> {materialEntries.map(([materialName, group]) => {
<TableCell className="text-center"> const totalQty = group.items.reduce(
{index + 1} (sum, item) => sum + item.quantity,
</TableCell> 0,
<TableCell> );
{item.raw_material_price?.photo_url ? ( const totalSubtotal = group.items.reduce(
<ImagePreviewButton (sum, item) => sum + item.subtotal,
srcs={[ 0,
item.raw_material_price.photo_conversion_url ?? item.raw_material_price.photo_url, );
]}
modalSrc={item.raw_material_price.photo_url} return (
title={ <Fragment key={materialName}>
item.raw_material_price.variant {isMultiMaterial && (
} <TableRow>
/> <TableCell
) : ( colSpan={4}
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground"> className="text-center font-medium text-muted-foreground bg-muted/20"
N/A >
</div> {materialName}
)} </TableCell>
</TableCell> <TableCell className="text-center font-medium text-muted-foreground bg-muted/20">
<TableCell> {formatNumber(totalQty)}{' '}
{item.raw_material_price?.variant ?? '-'} {group.unit}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
{formatCurrency(item.unit_price)} {formatCurrency(totalSubtotal)}
</TableCell> </TableCell>
<TableCell className="text-center"> </TableRow>
{formatNumber(item.quantity)} {unit} )}
</TableCell> {group.items.map((item) => {
<TableCell className="text-right font-medium"> counter++;
{formatCurrency(item.subtotal)}
</TableCell> return (
</TableRow> <TableRow key={item.id}>
)) <TableCell className="text-center">
{counter}
</TableCell>
<TableCell>
{item.raw_material_price?.photo_url ? (
<ImagePreviewButton
srcs={[
item.raw_material_price.photo_conversion_url ?? item.raw_material_price.photo_url,
]}
modalSrc={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">
{formatCurrency(item.unit_price)}
</TableCell>
<TableCell className="text-center">
{formatNumber(item.quantity)}{' '}
{group.unit}
</TableCell>
<TableCell className="text-right font-medium">
{formatCurrency(item.subtotal)}
</TableCell>
</TableRow>
);
})}
</Fragment>
);
})}
</>
)} )}
</TableBody> </TableBody>
</Table> </Table>