import { useState } from "react"; import { Head, Link, useForm } from "@inertiajs/react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Button } from "@/Components/ui/button"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { ArrowLeft, Save, Trash2, Boxes } from "lucide-react"; import { Warehouse, WarehouseInventory } from "@/types/warehouse"; import { toast } from "sonner"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/Components/ui/alert-dialog"; import TransactionTable, { Transaction } from "@/Components/Warehouse/Inventory/TransactionTable"; import { getShowBreadcrumbs } from "@/utils/breadcrumb"; interface Props { warehouse: Warehouse; inventory: WarehouseInventory; transactions: Transaction[]; } export default function EditInventory({ warehouse, inventory, transactions = [] }: Props) { const { data, setData, put, delete: destroy, processing, errors } = useForm({ quantity: inventory.quantity, batchNumber: inventory.batchNumber || "", expiryDate: inventory.expiryDate || "", lastInboundDate: inventory.lastInboundDate || "", lastOutboundDate: inventory.lastOutboundDate || "", // 為了記錄異動原因，還是需要傳這兩個欄位，雖然 UI 上原本的 EditPage 沒有原因輸入框 // 但為了符合我們後端的交易紀錄邏輯，我們可能需要預設一個，或者偷加一個欄位？ // 原 source code 沒有原因欄位。 // 我們可以預設 reason 為 "手動編輯更新" reason: "編輯頁面手動更新", }); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const handleSave = () => { if (data.quantity < 0) { toast.error("庫存數量不可為負數"); return; } put(route("warehouses.inventory.update", { warehouse: warehouse.id, inventory: inventory.id }), { onSuccess: () => { toast.success("庫存資料已更新"); }, onError: () => { toast.error("更新失敗，請檢查欄位"); } }); }; const handleDelete = () => { destroy(route("warehouses.inventory.destroy", { warehouse: warehouse.id, inventory: inventory.id }), { onSuccess: () => { toast.success("庫存品項已刪除"); setShowDeleteDialog(false); }, onError: () => { toast.error("刪除失敗"); } }); }; return (
{/* 頁面標題與麵包屑 */}

編輯庫存品項

倉庫：{warehouse.name} {inventory.batchNumber && ( 批號：{inventory.batchNumber} )}

{/* 表單內容 */} < div className="bg-white rounded-lg shadow-sm border p-6 mb-6" >
{/* 商品基本資訊 */}

商品基本資訊

商品名稱無法修改

setData("batchNumber", e.target.value)} placeholder="例：FL20251101" className="border-gray-300" // 目前後端可能尚未支援儲存，但依需求顯示 />
{/* 庫存數量 */}

庫存數量

setData("quantity", parseFloat(e.target.value) || 0) } placeholder="0" className={`border-gray-300 ${errors.quantity ? "border-red-500" : ""}`} /> {errors.quantity &&

{errors.quantity}

}

批號層級的庫存數量，安全庫存請至「安全庫存設定」頁面進行商品層級設定

{/* 日期資訊 */}

日期資訊

setData("expiryDate", e.target.value)} className="border-gray-300" />
setData("lastInboundDate", e.target.value) } className="border-gray-300" />
setData("lastOutboundDate", e.target.value) } className="border-gray-300" />
{/* 庫存異動紀錄 */} < div className="bg-white rounded-lg shadow-sm border p-6" >

庫存異動紀錄

{/* 刪除確認對話框 */} < AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog} > 確認刪除庫存品項 您確定要刪除「{inventory.productName}」的此筆庫存嗎？此操作無法復原。 取消 確認刪除 ); }