117 lines
4.7 KiB
TypeScript
117 lines
4.7 KiB
TypeScript
import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
|
|
import { RowActions } from '@/components/data-display';
|
|
import { ToggleStatus } from '@/components/data-display';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { useCan } from '@/hooks/use-can';
|
|
import { formatNumber } from '@/lib/format';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import type { RawMaterial } from './columns';
|
|
|
|
export type RawMaterialCardRowParams = {
|
|
rawMaterial: RawMaterial;
|
|
index: number;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
onEdit: (rawMaterial: RawMaterial) => void;
|
|
onDelete: (rawMaterial: RawMaterial) => void;
|
|
toggleStatusUrl: (id: number) => string;
|
|
};
|
|
|
|
export function RawMaterialCardRow({
|
|
rawMaterial,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
onEdit,
|
|
onDelete,
|
|
toggleStatusUrl,
|
|
}: RawMaterialCardRowParams) {
|
|
const { can } = useCan();
|
|
const variantCount = rawMaterial.variants_count ?? 0;
|
|
const totalStock = rawMaterial.total_stock ?? 0;
|
|
const totalValue = rawMaterial.total_value ?? 0;
|
|
|
|
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>
|
|
{rawMaterial.name}
|
|
</h3>
|
|
</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">
|
|
{variantCount} varian
|
|
</span>
|
|
<span>
|
|
Total Stok:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{formatNumber(totalStock)}
|
|
</span>
|
|
</span>
|
|
<span>
|
|
Total Nilai:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{formatCurrency(totalValue)}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-2">
|
|
<ToggleStatus
|
|
url={toggleStatusUrl(rawMaterial.id)}
|
|
checked={rawMaterial.is_active}
|
|
label={
|
|
rawMaterial.is_active
|
|
? 'Aktif'
|
|
: 'Non Aktif'
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{(can('raw_materials.update') || can('raw_materials.delete')) && (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: can('raw_materials.update'),
|
|
onClick: () => onEdit(rawMaterial),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
show: can('raw_materials.delete'),
|
|
onClick: () => onDelete(rawMaterial),
|
|
},
|
|
]}
|
|
wrapperClassName="flex shrink-0 items-center gap-1"
|
|
/>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|