star-erp/resources/js/Components/Warehouse/Inventory/TransactionTable.tsx

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>
    );
}