first commit
This commit is contained in:
192
resources/js/Pages/Warehouse/Index.tsx
Normal file
192
resources/js/Pages/Warehouse/Index.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router } from "@inertiajs/react";
|
||||
import WarehouseDialog from "@/Components/Warehouse/WarehouseDialog";
|
||||
import TransferOrderDialog from "@/Components/Warehouse/TransferOrderDialog";
|
||||
import SearchToolbar from "@/Components/shared/SearchToolbar";
|
||||
import WarehouseCard from "@/Components/Warehouse/WarehouseCard";
|
||||
import WarehouseEmptyState from "@/Components/Warehouse/WarehouseEmptyState";
|
||||
import { Warehouse } from "@/types/warehouse";
|
||||
import Pagination from "@/Components/shared/Pagination";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface PageProps {
|
||||
warehouses: {
|
||||
data: Warehouse[];
|
||||
links: any[];
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
total: number;
|
||||
};
|
||||
filters: {
|
||||
search?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function WarehouseIndex({ warehouses, filters }: PageProps) {
|
||||
// 篩選狀態
|
||||
const [searchTerm, setSearchTerm] = useState(filters.search || "");
|
||||
|
||||
// 對話框狀態
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [editingWarehouse, setEditingWarehouse] = useState<Warehouse | null>(null);
|
||||
const [transferOrderDialogOpen, setTransferOrderDialogOpen] = useState(false);
|
||||
|
||||
// 暫時的 Mock Inventories，直到後端 API 實作
|
||||
|
||||
|
||||
// 搜尋處理
|
||||
const handleSearch = (term: string) => {
|
||||
setSearchTerm(term);
|
||||
router.get(route('warehouses.index'), { search: term }, {
|
||||
preserveState: true,
|
||||
preserveScroll: true,
|
||||
replace: true,
|
||||
});
|
||||
};
|
||||
|
||||
// 導航處理
|
||||
const handleViewInventory = (warehouseId: string) => {
|
||||
router.get(`/warehouses/${warehouseId}/inventory`);
|
||||
};
|
||||
|
||||
// 倉庫操作處理函式
|
||||
const handleAddWarehouse = () => {
|
||||
setEditingWarehouse(null);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleEditWarehouse = (warehouse: Warehouse) => {
|
||||
setEditingWarehouse(warehouse);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// 接收 Dialog 回傳的資料並呼叫後端
|
||||
const handleSaveWarehouse = (data: Partial<Warehouse>) => {
|
||||
if (editingWarehouse) {
|
||||
router.put(route('warehouses.update', editingWarehouse.id), data, {
|
||||
onSuccess: () => setIsDialogOpen(false),
|
||||
});
|
||||
} else {
|
||||
router.post(route('warehouses.store'), data, {
|
||||
onSuccess: () => setIsDialogOpen(false),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteWarehouse = (id: string) => {
|
||||
if (confirm("確定要停用此倉庫嗎？\n注意：刪除倉庫將連帶刪除所有庫存與紀錄！")) {
|
||||
router.delete(route('warehouses.destroy', id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddTransferOrder = () => {
|
||||
setTransferOrderDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSaveTransferOrder = (data: any) => {
|
||||
router.post(route('transfer-orders.store'), data, {
|
||||
onSuccess: () => {
|
||||
toast.success('撥補單已建立且庫存已轉移');
|
||||
setTransferOrderDialogOpen(false);
|
||||
},
|
||||
onError: (errors) => {
|
||||
toast.error('建立撥補單失敗');
|
||||
console.error(errors);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthenticatedLayout>
|
||||
<Head title="倉庫管理" />
|
||||
<div className="container mx-auto p-6 max-w-7xl">
|
||||
{/* 頁面標題 */}
|
||||
<div className="mb-6">
|
||||
<h1 className="mb-2">倉庫管理</h1>
|
||||
<p className="text-gray-600 font-medium mb-4">管理倉庫資訊與庫存配置</p>
|
||||
</div>
|
||||
|
||||
{/* 工具列 */}
|
||||
<div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
|
||||
<div className="flex flex-col sm:flex-row gap-4 flex-1 w-full">
|
||||
{/* 搜尋框 */}
|
||||
<SearchToolbar
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
placeholder="搜尋倉庫名稱..."
|
||||
className="flex-1 w-full md:max-w-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 操作按鈕 */}
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Button
|
||||
onClick={handleAddTransferOrder}
|
||||
className="flex-1 md:flex-initial button-outlined-primary"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
新增撥補單
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleAddWarehouse}
|
||||
className="flex-1 md:flex-initial button-filled-primary"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
新增倉庫
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 倉庫卡片列表 */}
|
||||
{warehouses.data.length === 0 ? (
|
||||
<WarehouseEmptyState />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{warehouses.data.map((warehouse) => (
|
||||
<WarehouseCard
|
||||
key={warehouse.id}
|
||||
warehouse={warehouse}
|
||||
stats={{
|
||||
totalQuantity: warehouse.total_quantity || 0,
|
||||
lowStockCount: warehouse.low_stock_count || 0,
|
||||
replenishmentNeeded: warehouse.low_stock_count || 0
|
||||
}}
|
||||
hasWarning={(warehouse.low_stock_count || 0) > 0}
|
||||
onViewInventory={() => handleViewInventory(warehouse.id)}
|
||||
onEdit={handleEditWarehouse}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分頁 */}
|
||||
<div className="mt-6">
|
||||
<Pagination links={warehouses.links} />
|
||||
</div>
|
||||
|
||||
{/* 倉庫對話框 */}
|
||||
<WarehouseDialog
|
||||
open={isDialogOpen}
|
||||
onOpenChange={setIsDialogOpen}
|
||||
warehouse={editingWarehouse}
|
||||
onSave={handleSaveWarehouse}
|
||||
onDelete={handleDeleteWarehouse}
|
||||
/>
|
||||
|
||||
{/* 撥補單對話框 */}
|
||||
<TransferOrderDialog
|
||||
open={transferOrderDialogOpen}
|
||||
onOpenChange={setTransferOrderDialogOpen}
|
||||
order={null}
|
||||
onSave={handleSaveTransferOrder}
|
||||
warehouses={warehouses.data}
|
||||
/>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user