first commit

resources/js/Components/Warehouse/Inventory/TransactionTable.tsx

@@ -0,0 +1,68 @@
+
+
+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>
+    );
+}