149 lines
6.0 KiB
TypeScript
149 lines
6.0 KiB
TypeScript
import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
|
|
import { RowActions } from '@/components/data-display';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
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 type { Restock, RestockStockType } from './columns';
|
|
|
|
const STOCK_TYPE_CONFIG: Record<
|
|
RestockStockType,
|
|
{ label: string; className: string }
|
|
> = {
|
|
good: {
|
|
label: 'Bagus',
|
|
className: 'bg-green-100 text-green-800 hover:bg-green-100',
|
|
},
|
|
reject: {
|
|
label: 'Reject',
|
|
className: 'bg-red-100 text-red-800 hover:bg-red-100',
|
|
},
|
|
};
|
|
|
|
export type RestockCardRowParams = {
|
|
restock: Restock;
|
|
index: number;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
onEdit: (restock: Restock) => void;
|
|
onDelete: (restock: Restock) => void;
|
|
};
|
|
|
|
export function RestockCardRow({
|
|
restock,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
onEdit,
|
|
onDelete,
|
|
}: RestockCardRowParams) {
|
|
const { can } = useCan();
|
|
const variantCount = restock.items_count ?? 0;
|
|
const totalQty = restock.total_qty ?? 0;
|
|
const productNamesStr = restock.product_names ?? '';
|
|
const productNames = productNamesStr ? productNamesStr.split(', ') : [];
|
|
const stockTypeConfig =
|
|
STOCK_TYPE_CONFIG[restock.stock_type] ?? STOCK_TYPE_CONFIG.good;
|
|
|
|
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">
|
|
{productNames.length > 0
|
|
? productNames.join(', ')
|
|
: '-'}
|
|
</h3>
|
|
<Badge
|
|
variant="secondary"
|
|
className={stockTypeConfig.className}
|
|
>
|
|
{stockTypeConfig.label}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{variantCount > 0 && (
|
|
<span>({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(restock.created_at)}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
Oleh:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{restock.created_by?.user_profile
|
|
?.full_name ?? '-'}
|
|
</span>
|
|
</span>
|
|
{restock.notes && (
|
|
<span className="max-w-[200px] truncate">
|
|
{restock.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)}
|
|
</span>
|
|
<span className="font-semibold">
|
|
<span className="font-normal text-muted-foreground">
|
|
Total:{' '}
|
|
</span>
|
|
{formatCurrency(restock.total)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{(can('restocks.update') || can('restocks.delete')) && (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: can('restocks.update'),
|
|
onClick: () => onEdit(restock),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
show: can('restocks.delete'),
|
|
onClick: () => onDelete(restock),
|
|
},
|
|
]}
|
|
wrapperClassName="flex shrink-0 items-center gap-1"
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|