367 lines
16 KiB
TypeScript
367 lines
16 KiB
TypeScript
import { useState } from "react";
|
|
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
DialogDescription,
|
|
} from "@/Components/ui/dialog";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Loader2, Plus, Warehouse as WarehouseIcon } from 'lucide-react';
|
|
import { Card, CardContent } from "@/Components/ui/card";
|
|
import { Button } from "@/Components/ui/button";
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
|
import { Head, router } from "@inertiajs/react";
|
|
import WarehouseDialog from "@/Components/Warehouse/WarehouseDialog";
|
|
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";
|
|
import { getBreadcrumbs } from "@/utils/breadcrumb";
|
|
import { Can } from "@/Components/Permission/Can";
|
|
|
|
interface PageProps {
|
|
warehouses: {
|
|
data: Warehouse[];
|
|
links: any[];
|
|
current_page: number;
|
|
last_page: number;
|
|
total: number;
|
|
};
|
|
totals: {
|
|
available_stock: number;
|
|
available_amount: number;
|
|
book_stock: number;
|
|
book_amount: number;
|
|
abnormal_amount: number;
|
|
};
|
|
transitWarehouses: Array<{
|
|
id: string;
|
|
name: string;
|
|
license_plate?: string;
|
|
driver_name?: string;
|
|
}>;
|
|
filters: {
|
|
search?: string;
|
|
per_page?: string;
|
|
};
|
|
}
|
|
|
|
export default function WarehouseIndex({ warehouses, totals, transitWarehouses, filters }: PageProps) {
|
|
// 篩選狀態
|
|
const [searchTerm, setSearchTerm] = useState(filters.search || "");
|
|
const [perPage, setPerPage] = useState(filters.per_page || '10');
|
|
|
|
// 對話框狀態
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
const [editingWarehouse, setEditingWarehouse] = useState<Warehouse | null>(null);
|
|
|
|
// 調撥單單建立狀態
|
|
const [isTransferCreateOpen, setIsTransferCreateOpen] = useState(false);
|
|
const [sourceWarehouseId, setSourceWarehouseId] = useState("");
|
|
const [targetWarehouseId, setTargetWarehouseId] = useState("");
|
|
const [creating, setCreating] = useState(false);
|
|
|
|
// 搜尋處理
|
|
const handleSearch = (term: string) => {
|
|
setSearchTerm(term);
|
|
router.get(route('warehouses.index'), { search: term, per_page: perPage }, {
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
replace: true,
|
|
});
|
|
};
|
|
|
|
const handlePerPageChange = (value: string) => {
|
|
setPerPage(value);
|
|
router.get(route('warehouses.index'),
|
|
{ ...filters, per_page: value, page: 1 },
|
|
{ preserveState: false, replace: true, preserveScroll: true }
|
|
);
|
|
};
|
|
|
|
// 導航處理
|
|
const handleViewInventory = (warehouseId: string | number) => {
|
|
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 | number) => {
|
|
router.delete(route('warehouses.destroy', id), {
|
|
onSuccess: () => {
|
|
toast.success('倉庫已刪除');
|
|
setEditingWarehouse(null);
|
|
},
|
|
onError: (errors: any) => {
|
|
console.error(errors);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleAddTransferOrder = () => {
|
|
setIsTransferCreateOpen(true);
|
|
};
|
|
|
|
const handleCreateTransferOrder = () => {
|
|
if (!sourceWarehouseId) {
|
|
toast.error("請選擇來源倉庫");
|
|
return;
|
|
}
|
|
if (!targetWarehouseId) {
|
|
toast.error("請選擇目的倉庫");
|
|
return;
|
|
}
|
|
if (sourceWarehouseId === targetWarehouseId) {
|
|
toast.error("來源與目的倉庫不能相同");
|
|
return;
|
|
}
|
|
setCreating(true);
|
|
router.post(route('inventory.transfer.store'), {
|
|
from_warehouse_id: sourceWarehouseId,
|
|
to_warehouse_id: targetWarehouseId
|
|
}, {
|
|
onFinish: () => setCreating(false),
|
|
onSuccess: () => {
|
|
setIsTransferCreateOpen(false);
|
|
setSourceWarehouseId("");
|
|
setTargetWarehouseId("");
|
|
toast.success('調撥單已建立');
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout breadcrumbs={getBreadcrumbs("warehouses")}>
|
|
<Head title="倉庫管理" />
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|
{/* 頁面標題 */}
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
|
<WarehouseIcon className="h-6 w-6 text-primary-main" />
|
|
倉庫管理
|
|
</h1>
|
|
<p className="text-gray-500 mt-1">
|
|
管理倉庫地點、負責人與庫存監控
|
|
</p>
|
|
</div>
|
|
|
|
{/* 統計區塊 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
|
<Card className="shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-gray-500 mb-1">可用庫存總計</span>
|
|
<div className="flex items-baseline gap-2">
|
|
<Can permission="inventory.view_cost">
|
|
<span className="text-3xl font-bold text-primary-main">
|
|
${Number(totals.available_amount || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</span>
|
|
</Can>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="shadow-sm">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-gray-500 mb-1">帳面庫存總計</span>
|
|
<div className="flex items-baseline gap-2">
|
|
<Can permission="inventory.view_cost">
|
|
<span className="text-3xl font-bold text-gray-700">
|
|
${Number(totals.book_amount || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</span>
|
|
</Can>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="shadow-sm border-red-100 bg-red-50/10">
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-red-500 mb-1">過期與瑕疵總計</span>
|
|
<div className="flex items-baseline gap-2">
|
|
<Can permission="inventory.view_cost">
|
|
<span className="text-3xl font-bold text-red-600">
|
|
${Number(totals.abnormal_amount || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</span>
|
|
</Can>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</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">
|
|
<Can permission="inventory_count.create">
|
|
<Button
|
|
onClick={handleAddTransferOrder}
|
|
className="flex-1 md:flex-initial button-outlined-primary"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
新增調撥單
|
|
</Button>
|
|
</Can>
|
|
<Can permission="warehouses.create">
|
|
<Button
|
|
onClick={handleAddWarehouse}
|
|
className="flex-1 md:flex-initial button-filled-primary"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
新增倉庫
|
|
</Button>
|
|
</Can>
|
|
</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.book_stock || 0,
|
|
totalValue: warehouse.book_amount || 0,
|
|
abnormalValue: warehouse.abnormal_amount || 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 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<span>每頁顯示</span>
|
|
<SearchableSelect
|
|
value={perPage}
|
|
onValueChange={handlePerPageChange}
|
|
options={[
|
|
{ label: "10", value: "10" },
|
|
{ label: "20", value: "20" },
|
|
{ label: "50", value: "50" },
|
|
{ label: "100", value: "100" }
|
|
]}
|
|
className="w-[90px] h-8"
|
|
showSearch={false}
|
|
/>
|
|
<span>筆</span>
|
|
</div>
|
|
<span className="text-sm text-gray-500">共 {warehouses.total} 筆紀錄</span>
|
|
</div>
|
|
<Pagination links={warehouses.links} />
|
|
</div>
|
|
|
|
{/* 倉庫對話框 */}
|
|
<WarehouseDialog
|
|
open={isDialogOpen}
|
|
onOpenChange={setIsDialogOpen}
|
|
warehouse={editingWarehouse}
|
|
onSave={handleSaveWarehouse}
|
|
onDelete={handleDeleteWarehouse}
|
|
transitWarehouses={transitWarehouses}
|
|
/>
|
|
|
|
{/* 調撥單建立對話框 */}
|
|
<Dialog open={isTransferCreateOpen} onOpenChange={setIsTransferCreateOpen}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>建立新調撥單</DialogTitle>
|
|
<DialogDescription>
|
|
請選擇來源倉庫與目的倉庫。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="space-y-2">
|
|
<Label>來源倉庫</Label>
|
|
<SearchableSelect
|
|
value={sourceWarehouseId}
|
|
onValueChange={setSourceWarehouseId}
|
|
options={warehouses.data.map((w: any) => ({ label: w.name, value: w.id.toString() }))}
|
|
placeholder="請選擇來源倉庫"
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>目的倉庫</Label>
|
|
<SearchableSelect
|
|
value={targetWarehouseId}
|
|
onValueChange={setTargetWarehouseId}
|
|
options={warehouses.data
|
|
.filter((w: any) => w.id.toString() !== sourceWarehouseId)
|
|
.map((w: any) => ({ label: w.name, value: w.id.toString() }))
|
|
}
|
|
placeholder="請選擇目的倉庫"
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="button" variant="outline" className="button-outlined-primary" onClick={() => setIsTransferCreateOpen(false)}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleCreateTransferOrder} className="button-filled-primary" disabled={creating || !sourceWarehouseId || !targetWarehouseId}>
|
|
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
新增
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|