d91ec8869e
feat: implement delete confirmation dialog component for better UX refactor: update supplier and role index pages to utilize new form dialog and delete confirm dialog components feat: add reusable form dialog component for creating and editing entities feat: introduce filter popover component for enhanced filtering options in data tables feat: create image preview button component for displaying images with modal preview feat: add page header component for consistent page layout feat: implement row actions component for handling actions on table rows feat: add status badge component for displaying entity statuses feat: create toggle status component for easily toggling entity states feat: implement draft save hook for auto-saving form data feat: add server table hook for managing server-side pagination and filtering feat: create utility functions for formatting dates and numbers feat: add constants for month names and measurement units
117 lines
4.5 KiB
TypeScript
117 lines
4.5 KiB
TypeScript
import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
|
|
import { RowActions } from '@/components/row-actions';
|
|
import { ToggleStatus } from '@/components/toggle-status';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
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 variants = rawMaterial.raw_material_prices ?? [];
|
|
const totalStock = variants.reduce(
|
|
(sum, v) => sum + (Number(v.stock) || 0),
|
|
0,
|
|
);
|
|
const totalValue = variants.reduce(
|
|
(sum, v) => sum + (Number(v.price) || 0) * (Number(v.stock) || 0),
|
|
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 className="truncate font-medium">
|
|
{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">
|
|
{variants.length} 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>
|
|
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
onClick: () => onEdit(rawMaterial),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
onClick: () => onDelete(rawMaterial),
|
|
},
|
|
]}
|
|
wrapperClassName="flex shrink-0 items-center gap-1"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|