05707aad7d
- Implemented StokOpnameEdit component for editing stock opname entries. - Created StokOpnameIndex component for listing and managing stock opnames. - Added StokOpnameCardRow and StokOpnameItemSubRow components for displaying stock opname details. - Introduced routes for stok opname CRUD operations and actions (submit, verify, reject, cancel). - Integrated UI components for better user interaction and data presentation.
189 lines
8.9 KiB
TypeScript
189 lines
8.9 KiB
TypeScript
import { ClipboardCheck, ChevronDown, Pencil, Send, Trash2, XCircle } 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 type { StokOpname, StokOpnameStatus } from './columns';
|
|
|
|
const STATUS_CONFIG: Record<StokOpnameStatus, { label: string; className: string }> = {
|
|
draft: { label: 'Draft', className: 'bg-gray-100 text-gray-800 hover:bg-gray-100' },
|
|
in_progress: { label: 'Diajukan', className: 'bg-blue-100 text-blue-800 hover:bg-blue-100' },
|
|
completed: { label: 'Selesai', className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100' },
|
|
verified: { label: 'Terverifikasi', className: 'bg-green-100 text-green-800 hover:bg-green-100' },
|
|
cancelled: { label: 'Dibatalkan', className: 'bg-red-100 text-red-800 hover:bg-red-100' },
|
|
};
|
|
|
|
export type StokOpnameCardRowParams = {
|
|
stokOpname: StokOpname;
|
|
index: number;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
onEdit: (stokOpname: StokOpname) => void;
|
|
onDelete: (stokOpname: StokOpname) => void;
|
|
onSubmit: (stokOpname: StokOpname) => void;
|
|
onVerify: (stokOpname: StokOpname) => void;
|
|
onReject: (stokOpname: StokOpname) => void;
|
|
onCancel: (stokOpname: StokOpname) => void;
|
|
};
|
|
|
|
export function StokOpnameCardRow({
|
|
stokOpname,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
onEdit,
|
|
onDelete,
|
|
onSubmit,
|
|
onVerify,
|
|
onReject,
|
|
onCancel,
|
|
}: StokOpnameCardRowParams) {
|
|
const { can } = useCan();
|
|
const variantCount = stokOpname.items_count ?? 0;
|
|
const totalDifference = stokOpname.total_difference ?? 0;
|
|
const productNamesStr = stokOpname.product_names ?? '';
|
|
const productNames = productNamesStr ? productNamesStr.split(', ') : [];
|
|
const statusConfig = STATUS_CONFIG[stokOpname.status] ?? STATUS_CONFIG.draft;
|
|
|
|
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>
|
|
{productNames.length > 0
|
|
? productNames.join(', ')
|
|
: '-'}
|
|
</h3>
|
|
<Badge
|
|
variant="secondary"
|
|
className={statusConfig.className}
|
|
>
|
|
{statusConfig.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(stokOpname.opname_date)}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
Oleh:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{stokOpname.created_by?.user_profile
|
|
?.full_name ?? '-'}
|
|
</span>
|
|
</span>
|
|
{stokOpname.notes && (
|
|
<span className="max-w-[200px] truncate">
|
|
{stokOpname.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">
|
|
Total Selisih:{' '}
|
|
</span>
|
|
<span className={totalDifference > 0 ? 'text-green-600 font-medium' : totalDifference < 0 ? 'text-red-600 font-medium' : ''}>
|
|
{totalDifference > 0 ? '+' : ''}{formatNumber(totalDifference)}
|
|
</span>
|
|
</span>
|
|
{stokOpname.verified_by && (
|
|
<span className="text-muted-foreground">
|
|
Diverifikasi oleh:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{stokOpname.verified_by?.user_profile
|
|
?.full_name ?? '-'}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
{can('stok_opnames.update') && stokOpname.status === 'draft' && (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: true,
|
|
onClick: () => onEdit(stokOpname),
|
|
},
|
|
{
|
|
label: 'Submit',
|
|
icon: <Send className="h-4 w-4" />,
|
|
show: can('stok_opnames.submit'),
|
|
onClick: () => onSubmit(stokOpname),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: <Trash2 className="h-4 w-4 text-destructive" />,
|
|
show: can('stok_opnames.delete'),
|
|
onClick: () => onDelete(stokOpname),
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
{can('stok_opnames.submit') && stokOpname.status === 'in_progress' && (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Batal',
|
|
icon: <XCircle className="h-4 w-4 text-destructive" />,
|
|
show: true,
|
|
onClick: () => onCancel(stokOpname),
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
{can('stok_opnames.verify') && stokOpname.status === 'in_progress' && (
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Verifikasi',
|
|
icon: <ClipboardCheck className="h-4 w-4" />,
|
|
show: true,
|
|
onClick: () => onVerify(stokOpname),
|
|
},
|
|
{
|
|
label: 'Tolak',
|
|
icon: <XCircle className="h-4 w-4 text-destructive" />,
|
|
show: true,
|
|
onClick: () => onReject(stokOpname),
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|