9637671713
- Updated ProductIndex component to improve category and product filtering with memoization. - Refactored Combobox components for better performance and usability. - Added PurchaseController routes for managing purchases with appropriate permissions. - Created comprehensive tests for purchase management, covering creation, updating, and deletion scenarios. - Ensured proper handling of raw materials and their variants during purchase operations. - Implemented validation for required fields in purchase creation and updates.
196 lines
8.3 KiB
TypeScript
196 lines
8.3 KiB
TypeScript
import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { ImagePreviewModal } from '@/components/image-preview-modal';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip';
|
|
import type { Purchase } from './columns';
|
|
|
|
function formatDateTime(dateString: string): string {
|
|
const date = new Date(dateString);
|
|
|
|
return date.toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
}
|
|
function formatCurrency(amount: number): string {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0,
|
|
}).format(amount);
|
|
}
|
|
|
|
function formatNumber(num: number): string {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
maximumFractionDigits: 4,
|
|
}).format(num);
|
|
}
|
|
|
|
export type PurchaseCardRowParams = {
|
|
purchase: Purchase;
|
|
index: number;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
onEdit: (purchase: Purchase) => void;
|
|
onDelete: (purchase: Purchase) => void;
|
|
};
|
|
|
|
export function PurchaseCardRow({
|
|
purchase,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
onEdit,
|
|
onDelete,
|
|
}: PurchaseCardRowParams) {
|
|
const items = purchase.purchase_items ?? [];
|
|
const variantCount = items.length;
|
|
const rawMaterialName =
|
|
items[0]?.raw_material_price?.raw_material?.name ?? '-';
|
|
const unit =
|
|
items[0]?.raw_material_price?.raw_material?.unit ?? '';
|
|
const totalQty = items.reduce((sum, item) => sum + Number(item.quantity), 0);
|
|
const [photoPreviewOpen, setPhotoPreviewOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Card className="overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<div className="flex items-start gap-3 p-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="mt-0.5 h-6 w-6 shrink-0"
|
|
onClick={onToggleExpand}
|
|
>
|
|
<ChevronDown
|
|
className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
|
|
/>
|
|
</Button>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-xs text-muted-foreground">
|
|
{index}.
|
|
</span>
|
|
<h3 className="truncate font-medium">
|
|
{purchase.supplier?.name ?? '-'}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{rawMaterialName}
|
|
{variantCount > 0 && (
|
|
<span className="ml-1">
|
|
({variantCount} varian)
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
|
|
<span className="inline-flex items-center rounded-md bg-muted px-2 py-1 font-medium text-foreground">
|
|
{formatDateTime(purchase.created_at)}
|
|
</span>
|
|
{purchase.notes && (
|
|
<span className="max-w-[200px] truncate">
|
|
{purchase.notes}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
|
|
<span>
|
|
<span className="text-muted-foreground">Qty: </span>
|
|
{formatNumber(totalQty)} {unit}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">Sub: </span>
|
|
{formatCurrency(purchase.subtotal)}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">Disc: </span>
|
|
{formatCurrency(purchase.discount)}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">Ongkir: </span>
|
|
{formatCurrency(purchase.shipping_cost)}
|
|
</span>
|
|
<span className="font-semibold">
|
|
<span className="text-muted-foreground font-normal">Total: </span>
|
|
{formatCurrency(purchase.total)}
|
|
</span>
|
|
</div>
|
|
|
|
{purchase.photo_url && (
|
|
<div className="mt-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setPhotoPreviewOpen(true)}
|
|
className="block h-16 w-16 overflow-hidden rounded-md border transition-opacity hover:opacity-80"
|
|
>
|
|
<img
|
|
src={purchase.photo_url}
|
|
alt="Foto belanja"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<TooltipProvider>
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onEdit(purchase)}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">Edit</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onDelete(purchase)}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top">
|
|
Hapus
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</TooltipProvider>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{purchase.photo_url && (
|
|
<ImagePreviewModal
|
|
open={photoPreviewOpen}
|
|
onOpenChange={setPhotoPreviewOpen}
|
|
src={purchase.photo_url}
|
|
title="Foto Belanja"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|