import { useState, useMemo } from "react"; import { ArrowLeft, PackagePlus, AlertTriangle, Shield, Boxes } from "lucide-react"; import { Button } from "@/Components/ui/button"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Head, Link, router } from "@inertiajs/react"; import { Warehouse, WarehouseInventory, SafetyStockSetting, Product } from "@/types/warehouse"; import InventoryToolbar from "@/Components/Warehouse/Inventory/InventoryToolbar"; import InventoryTable from "@/Components/Warehouse/Inventory/InventoryTable"; import { calculateLowStockCount } from "@/utils/inventory"; import { toast } from "sonner"; import { getInventoryBreadcrumbs } from "@/utils/breadcrumb"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/Components/ui/alert-dialog"; import { Can } from "@/Components/Permission/Can"; // 庫存頁面 Props interface Props { warehouse: Warehouse; inventories: WarehouseInventory[]; safetyStockSettings: SafetyStockSetting[]; availableProducts: Product[]; } export default function WarehouseInventoryPage({ warehouse, inventories, safetyStockSettings, availableProducts, }: Props) { const [searchTerm, setSearchTerm] = useState(""); const [typeFilter, setTypeFilter] = useState("all"); const [deleteId, setDeleteId] = useState(null); // 篩選庫存列表 const filteredInventories = useMemo(() => { return inventories.filter((item) => { // 搜尋條件：匹配商品名稱、編號或批號 const matchesSearch = !searchTerm || item.productName.toLowerCase().includes(searchTerm.toLowerCase()) || (item.productCode && item.productCode.toLowerCase().includes(searchTerm.toLowerCase())) || item.batchNumber.toLowerCase().includes(searchTerm.toLowerCase()); // 類型篩選 (需要比對 availableProducts 找到類型) let matchesType = true; if (typeFilter !== "all") { const product = availableProducts.find((p) => p.id === item.productId); matchesType = product?.type === typeFilter; } return matchesSearch && matchesType; }); }, [inventories, searchTerm, typeFilter, availableProducts]); // 計算統計資訊 const lowStockItems = calculateLowStockCount(inventories, warehouse.id, safetyStockSettings); // 導航至流動紀錄頁 const handleView = (inventoryId: string) => { router.visit(route('warehouses.inventory.history', { warehouse: warehouse.id, inventoryId: inventoryId })); }; const confirmDelete = (inventoryId: string) => { setDeleteId(inventoryId); }; const handleDelete = () => { if (!deleteId) return; // 暫存 ID 以免在對話框關閉的瞬間 state 被清空 const idToDelete = deleteId; router.delete(route("warehouses.inventory.destroy", { warehouse: warehouse.id, inventoryId: idToDelete }), { onSuccess: () => { toast.success("庫存記錄已刪除"); setDeleteId(null); }, onError: () => { toast.error("刪除失敗"); // 保持對話框開啟以便重試，或根據需要關閉 } }); }; return (

{/* 頁面標題與導航 */}

庫存管理 - {warehouse.name}

查看並管理此倉庫內的商品庫存數量與批號資訊

{/* 操作按鈕 (位於標題下方) */}

{/* 安全庫存設定按鈕 */} {/* 庫存警告顯示 */} {/* 新增庫存按鈕 */}

{/* 篩選工具列 */}

{/* 庫存表格 */}

!open && setDeleteId(null)}> 確認刪除庫存項目您確定要刪除此筆庫存項目嗎？此操作將會清空該項目的數量並保留刪除紀錄。此動作無法復原。取消 { handleDelete(); }} className="bg-red-600 hover:bg-red-700 text-white" > 確認刪除

); }