4ac83c8e78
- Integrated permission checks using `can` function in payroll period management to control visibility of adjustment, pay, and cancel actions. - Updated employee management to conditionally render edit, reset password, and delete actions based on permissions. - Enhanced leave request management with permission checks for approve, reject, edit, and delete actions. - Implemented permission checks in cutting management for edit and delete actions. - Added permission checks for purchase management actions including create, edit, and delete. - Integrated permission checks in restock management for create, edit, and delete actions. - Updated transaction management to conditionally render create, edit, and delete actions based on permissions. - Enhanced category management with permission checks for edit and delete actions. - Integrated permission checks in customer management for edit and delete actions. - Updated product management to conditionally render create, edit, and delete actions based on permissions. - Enhanced raw material management with permission checks for edit and delete actions. - Integrated permission checks in supplier management for edit and delete actions. - Updated role management to conditionally render edit and delete actions based on permissions.
200 lines
8.7 KiB
TypeScript
200 lines
8.7 KiB
TypeScript
import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
|
|
import { RowActions } from '@/components/row-actions';
|
|
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 { Transaction } from './columns';
|
|
|
|
const STATUS_BADGE_CLASSES: Record<string, string> = {
|
|
pending: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
|
|
processing: 'bg-blue-100 text-blue-800 hover:bg-blue-100',
|
|
completed: 'bg-green-100 text-green-800 hover:bg-green-100',
|
|
cancelled: 'bg-red-100 text-red-800 hover:bg-red-100',
|
|
refunded: 'bg-purple-100 text-purple-800 hover:bg-purple-100',
|
|
};
|
|
|
|
export type TransactionCardRowParams = {
|
|
transaction: Transaction;
|
|
index: number;
|
|
isExpanded: boolean;
|
|
onToggleExpand: () => void;
|
|
onEdit: (transaction: Transaction) => void;
|
|
onDelete: (transaction: Transaction) => void;
|
|
};
|
|
|
|
export function TransactionCardRow({
|
|
transaction,
|
|
index,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
onEdit,
|
|
onDelete,
|
|
}: TransactionCardRowParams) {
|
|
const { can } = useCan();
|
|
const items = transaction.order_items ?? [];
|
|
const variantCount = items.length;
|
|
const productNames = [
|
|
...new Set(
|
|
items
|
|
.map((item) => item.product_variant?.product?.name)
|
|
.filter(Boolean),
|
|
),
|
|
];
|
|
const totalQty = items.reduce(
|
|
(sum, item) => sum + Number(item.quantity),
|
|
0,
|
|
);
|
|
const statusBadgeClass =
|
|
STATUS_BADGE_CLASSES[transaction.status] ?? STATUS_BADGE_CLASSES.pending;
|
|
|
|
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">
|
|
{transaction.order_number}
|
|
</h3>
|
|
<Badge
|
|
variant="secondary"
|
|
className={statusBadgeClass}
|
|
>
|
|
{transaction.status_label}
|
|
</Badge>
|
|
<Badge variant="outline">
|
|
{transaction.payment_type_label}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{productNames.length > 0 && (
|
|
<span>{productNames.join(', ')}</span>
|
|
)}
|
|
{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(transaction.created_at)}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
Oleh:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{transaction.created_by?.user_profile
|
|
?.full_name ?? '-'}
|
|
</span>
|
|
</span>
|
|
{transaction.customer && (
|
|
<span className="text-muted-foreground">
|
|
Pelanggan:{' '}
|
|
<span className="font-medium text-foreground">
|
|
{transaction.customer.name}
|
|
</span>
|
|
</span>
|
|
)}
|
|
{transaction.notes && (
|
|
<span className="max-w-[200px] truncate">
|
|
{transaction.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>
|
|
<span className="text-muted-foreground">
|
|
Channel:{' '}
|
|
</span>
|
|
{transaction.channel_label}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">
|
|
Harga:{' '}
|
|
</span>
|
|
{transaction.price_type_label}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">
|
|
Sub:{' '}
|
|
</span>
|
|
{formatCurrency(transaction.subtotal)}
|
|
</span>
|
|
{transaction.discount > 0 && (
|
|
<span>
|
|
<span className="text-muted-foreground">
|
|
Diskon:{' '}
|
|
</span>
|
|
{formatCurrency(transaction.discount)}
|
|
</span>
|
|
)}
|
|
<span className="font-semibold">
|
|
<span className="font-normal text-muted-foreground">
|
|
Total:{' '}
|
|
</span>
|
|
{formatCurrency(transaction.total_amount)}
|
|
</span>
|
|
<span className={transaction.profit >= 0 ? 'text-green-600' : 'text-red-600'}>
|
|
<span className="font-normal text-muted-foreground">
|
|
Laba:{' '}
|
|
</span>
|
|
{formatCurrency(transaction.profit)}
|
|
</span>
|
|
<span>
|
|
<span className="text-muted-foreground">
|
|
HPP:{' '}
|
|
</span>
|
|
{formatCurrency(transaction.cogs)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<RowActions
|
|
actions={[
|
|
{
|
|
label: 'Edit',
|
|
icon: <Pencil className="h-4 w-4" />,
|
|
show: can('orders.update'),
|
|
onClick: () => onEdit(transaction),
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
icon: (
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
),
|
|
show: can('orders.delete'),
|
|
onClick: () => onDelete(transaction),
|
|
},
|
|
]}
|
|
wrapperClassName="flex shrink-0 items-center gap-1"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|