69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
|
|
|
|
export interface Transaction {
|
|
id: string;
|
|
type: string;
|
|
quantity: number;
|
|
balanceAfter: number;
|
|
reason: string | null;
|
|
userName: string;
|
|
actualTime: string;
|
|
}
|
|
|
|
interface TransactionTableProps {
|
|
transactions: Transaction[];
|
|
}
|
|
|
|
export default function TransactionTable({ transactions }: TransactionTableProps) {
|
|
if (transactions.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-gray-500">
|
|
暫無異動紀錄
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
);
|
|
}
|