85 lines
3.9 KiB
TypeScript
85 lines
3.9 KiB
TypeScript
|
||
|
||
export interface Transaction {
|
||
id: string;
|
||
type: string;
|
||
quantity: number;
|
||
balanceAfter: number;
|
||
reason: string | null;
|
||
userName: string;
|
||
actualTime: string;
|
||
batchNumber?: string; // 商品層級查詢時顯示批號
|
||
slot?: string; // 貨道資訊
|
||
}
|
||
|
||
interface TransactionTableProps {
|
||
transactions: Transaction[];
|
||
showBatchNumber?: boolean; // 是否顯示批號欄位
|
||
}
|
||
|
||
export default function TransactionTable({ transactions, showBatchNumber = false }: TransactionTableProps) {
|
||
if (transactions.length === 0) {
|
||
return (
|
||
<div className="text-center py-8 text-gray-500">
|
||
暫無異動紀錄
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 自動偵測是否需要顯示批號（如果任一筆記錄有 batchNumber）
|
||
const shouldShowBatchNumber = showBatchNumber || transactions.some(tx => tx.batchNumber);
|
||
// 自動偵測是否需要顯示貨道（如果任一筆記錄有 slot）
|
||
const shouldShowSlot = transactions.some(tx => tx.slot);
|
||
|
||
return (
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm text-left">
|
||
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
|
||
<tr>
|
||
<th className="px-4 py-3 w-[50px]">#</th>
|
||
<th className="px-4 py-3">時間</th>
|
||
{shouldShowBatchNumber && <th className="px-4 py-3">批號</th>}
|
||
<th className="px-4 py-3">類型</th>
|
||
<th className="px-4 py-3 text-right">變動數量</th>
|
||
<th className="px-4 py-3 text-right">結餘</th>
|
||
{shouldShowSlot && <th className="px-4 py-3">儲位</th>}
|
||
<th className="px-4 py-3">經手人</th>
|
||
<th className="px-4 py-3">原因/備註</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{transactions.map((tx, index) => (
|
||
<tr key={tx.id} className="border-b hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-center text-gray-500 font-medium">{index + 1}</td>
|
||
<td className="px-4 py-3 whitespace-nowrap">{tx.actualTime}</td>
|
||
{shouldShowBatchNumber && (
|
||
<td className="px-4 py-3 font-mono text-sm text-gray-600">{tx.batchNumber || '-'}</td>
|
||
)}
|
||
<td className="px-4 py-3">
|
||
<span className={`px-2 py-1 rounded-full text-xs ${tx.quantity > 0
|
||
? 'bg-green-100 text-green-800'
|
||
: tx.quantity < 0
|
||
? 'bg-red-100 text-red-800'
|
||
: 'bg-gray-100 text-gray-800'
|
||
}`}>
|
||
{tx.type}
|
||
</span>
|
||
</td>
|
||
<td className={`px-4 py-3 text-right font-medium ${tx.quantity > 0 ? 'text-green-600' : tx.quantity < 0 ? 'text-red-600' : ''
|
||
}`}>
|
||
{tx.quantity > 0 ? '+' : ''}{tx.quantity}
|
||
</td>
|
||
<td className="px-4 py-3 text-right">{tx.balanceAfter}</td>
|
||
{shouldShowSlot && (
|
||
<td className="px-4 py-3 font-medium text-primary-main">{tx.slot || '-'}</td>
|
||
)}
|
||
<td className="px-4 py-3">{tx.userName}</td>
|
||
<td className="px-4 py-3 text-gray-500">{tx.reason || '-'}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|