423 lines
20 KiB
TypeScript
423 lines
20 KiB
TypeScript
|
/**
|
|||
|
|
* 新增庫存頁面（手動入庫）
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { Plus, Trash2, Calendar, ArrowLeft, Save } from "lucide-react";
|
|||
|
|
import { Button } from "@/Components/ui/button";
|
|||
|
|
import { Input } from "@/Components/ui/input";
|
|||
|
|
import { Label } from "@/Components/ui/label";
|
|||
|
|
import { Textarea } from "@/Components/ui/textarea";
|
|||
|
|
import {
|
|||
|
|
Select,
|
|||
|
|
SelectContent,
|
|||
|
|
SelectItem,
|
|||
|
|
SelectTrigger,
|
|||
|
|
SelectValue,
|
|||
|
|
} from "@/Components/ui/select";
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from "@/Components/ui/table";
|
|||
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
|||
|
|
import { Head, Link, router } from "@inertiajs/react";
|
|||
|
|
import { Warehouse, InboundItem, InboundReason } from "@/types/warehouse";
|
|||
|
|
import { getCurrentDateTime } from "@/utils/format";
|
|||
|
|
import { toast } from "sonner";
|
|||
|
|
|
|||
|
|
interface Product {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
unit: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
warehouse: Warehouse;
|
|||
|
|
products: Product[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const INBOUND_REASONS: InboundReason[] = [
|
|||
|
|
"期初建檔",
|
|||
|
|
"盤點調整",
|
|||
|
|
"實際入庫未走採購流程",
|
|||
|
|
"生產加工成品入庫",
|
|||
|
|
"其他",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function AddInventoryPage({ warehouse, products }: Props) {
|
|||
|
|
const [inboundDate, setInboundDate] = useState(getCurrentDateTime());
|
|||
|
|
const [reason, setReason] = useState<InboundReason>("期初建檔");
|
|||
|
|
const [notes, setNotes] = useState("");
|
|||
|
|
const [items, setItems] = useState<InboundItem[]>([]);
|
|||
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|||
|
|
|
|||
|
|
// 新增明細行
|
|||
|
|
const handleAddItem = () => {
|
|||
|
|
const defaultProduct = products.length > 0 ? products[0] : { id: "", name: "", unit: "kg" };
|
|||
|
|
const newItem: InboundItem = {
|
|||
|
|
tempId: `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|||
|
|
productId: defaultProduct.id,
|
|||
|
|
productName: defaultProduct.name,
|
|||
|
|
quantity: 0,
|
|||
|
|
unit: defaultProduct.unit,
|
|||
|
|
};
|
|||
|
|
setItems([...items, newItem]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 刪除明細行
|
|||
|
|
const handleRemoveItem = (tempId: string) => {
|
|||
|
|
setItems(items.filter((item) => item.tempId !== tempId));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 更新明細行
|
|||
|
|
const handleUpdateItem = (tempId: string, updates: Partial<InboundItem>) => {
|
|||
|
|
setItems(
|
|||
|
|
items.map((item) =>
|
|||
|
|
item.tempId === tempId ? { ...item, ...updates } : item
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 處理商品變更
|
|||
|
|
const handleProductChange = (tempId: string, productId: string) => {
|
|||
|
|
const product = products.find((p) => p.id === productId);
|
|||
|
|
if (product) {
|
|||
|
|
handleUpdateItem(tempId, {
|
|||
|
|
productId,
|
|||
|
|
productName: product.name,
|
|||
|
|
unit: product.unit,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 驗證表單
|
|||
|
|
const validateForm = (): boolean => {
|
|||
|
|
const newErrors: Record<string, string> = {};
|
|||
|
|
|
|||
|
|
if (!reason) {
|
|||
|
|
newErrors.reason = "請選擇入庫原因";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (reason === "其他" && !notes.trim()) {
|
|||
|
|
newErrors.notes = "原因為「其他」時，備註為必填";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (items.length === 0) {
|
|||
|
|
newErrors.items = "請至少新增一筆庫存明細";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
items.forEach((item, index) => {
|
|||
|
|
if (!item.productId) {
|
|||
|
|
newErrors[`item-${index}-product`] = "請選擇商品";
|
|||
|
|
}
|
|||
|
|
if (item.quantity <= 0) {
|
|||
|
|
newErrors[`item-${index}-quantity`] = "數量必須大於 0";
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
return Object.keys(newErrors).length === 0;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 處理儲存
|
|||
|
|
const handleSave = () => {
|
|||
|
|
if (!validateForm()) {
|
|||
|
|
toast.error("請檢查表單內容");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
router.post(`/warehouses/${warehouse.id}/inventory`, {
|
|||
|
|
inboundDate,
|
|||
|
|
reason,
|
|||
|
|
notes,
|
|||
|
|
items: items.map(item => ({
|
|||
|
|
productId: item.productId,
|
|||
|
|
quantity: item.quantity
|
|||
|
|
}))
|
|||
|
|
}, {
|
|||
|
|
onSuccess: () => {
|
|||
|
|
toast.success("庫存記錄已儲存");
|
|||
|
|
router.get(`/warehouses/${warehouse.id}/inventory`);
|
|||
|
|
},
|
|||
|
|
onError: (err) => {
|
|||
|
|
toast.error("儲存失敗，請檢查輸入內容");
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<AuthenticatedLayout>
|
|||
|
|
<Head title={`新增庫存 - ${warehouse.name}`} />
|
|||
|
|
<div className="container mx-auto p-6 max-w-7xl">
|
|||
|
|
{/* 頁面標題與導航 - 已於先前任務優化 */}
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<Link href={`/warehouses/${warehouse.id}/inventory`}>
|
|||
|
|
<Button
|
|||
|
|
variant="outline"
|
|||
|
|
className="gap-2 button-outlined-primary"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="h-4 w-4" />
|
|||
|
|
返回庫存管理
|
|||
|
|
</Button>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="mb-2">新增庫存（手動入庫）</h1>
|
|||
|
|
<p className="text-gray-600 font-medium">
|
|||
|
|
為 <span className="font-semibold text-gray-900">{warehouse.name}</span> 新增庫存記錄
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
onClick={handleSave}
|
|||
|
|
className="button-filled-primary"
|
|||
|
|
>
|
|||
|
|
<Save className="mr-2 h-4 w-4" />
|
|||
|
|
儲存
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 表單內容 */}
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* 基本資訊區塊 */}
|
|||
|
|
<div className="bg-white rounded-lg shadow-sm border p-6 space-y-4">
|
|||
|
|
<h3 className="font-semibold text-lg border-b pb-2">基本資訊</h3>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|||
|
|
{/* 倉庫 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label className="text-gray-700">倉庫</Label>
|
|||
|
|
<Input
|
|||
|
|
value={warehouse.name}
|
|||
|
|
disabled
|
|||
|
|
className="bg-gray-50 border-gray-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 入庫日期 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="inbound-date" className="text-gray-700">
|
|||
|
|
入庫日期 <span className="text-red-500">*</span>
|
|||
|
|
</Label>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Input
|
|||
|
|
id="inbound-date"
|
|||
|
|
type="datetime-local"
|
|||
|
|
value={inboundDate}
|
|||
|
|
onChange={(e) => setInboundDate(e.target.value)}
|
|||
|
|
className="border-gray-300 pr-10"
|
|||
|
|
/>
|
|||
|
|
<Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 入庫原因 */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="reason" className="text-gray-700">
|
|||
|
|
入庫原因 <span className="text-red-500">*</span>
|
|||
|
|
</Label>
|
|||
|
|
<Select value={reason} onValueChange={(value) => setReason(value as InboundReason)}>
|
|||
|
|
<SelectTrigger id="reason" className="border-gray-300">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{INBOUND_REASONS.map((r) => (
|
|||
|
|
<SelectItem key={r} value={r}>
|
|||
|
|
{r}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
{errors.reason && (
|
|||
|
|
<p className="text-sm text-red-500">{errors.reason}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 備註 */}
|
|||
|
|
<div className="space-y-2 md:col-span-2">
|
|||
|
|
<Label htmlFor="notes" className="text-gray-700">
|
|||
|
|
備註 {reason === "其他" && <span className="text-red-500">*</span>}
|
|||
|
|
</Label>
|
|||
|
|
<Textarea
|
|||
|
|
id="notes"
|
|||
|
|
value={notes}
|
|||
|
|
onChange={(e) => setNotes(e.target.value)}
|
|||
|
|
placeholder="請輸入備註說明..."
|
|||
|
|
className="border-gray-300 resize-none min-h-[100px]"
|
|||
|
|
/>
|
|||
|
|
{errors.notes && (
|
|||
|
|
<p className="text-sm text-red-500">{errors.notes}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 庫存明細區塊 */}
|
|||
|
|
<div className="bg-white rounded-lg shadow-sm border p-6 space-y-4">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-semibold text-lg">庫存明細</h3>
|
|||
|
|
<p className="text-sm text-gray-500">
|
|||
|
|
請新增要入庫的商品明細
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleAddItem}
|
|||
|
|
variant="outline"
|
|||
|
|
className="button-outlined-primary"
|
|||
|
|
>
|
|||
|
|
<Plus className="mr-2 h-4 w-4" />
|
|||
|
|
新增明細
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{errors.items && (
|
|||
|
|
<p className="text-sm text-red-500">{errors.items}</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{items.length > 0 ? (
|
|||
|
|
<div className="border rounded-lg overflow-hidden">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow className="bg-gray-50/50">
|
|||
|
|
<TableHead className="w-[280px]">
|
|||
|
|
商品 <span className="text-red-500">*</span>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[120px]">
|
|||
|
|
數量 <span className="text-red-500">*</span>
|
|||
|
|
</TableHead>
|
|||
|
|
<TableHead className="w-[100px]">單位</TableHead>
|
|||
|
|
{/* <TableHead className="w-[180px]">效期</TableHead>
|
|||
|
|
<TableHead className="w-[220px]">進貨編號</TableHead> */}
|
|||
|
|
<TableHead className="w-[60px]"></TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{items.map((item, index) => (
|
|||
|
|
<TableRow key={item.tempId}>
|
|||
|
|
{/* 商品 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Select
|
|||
|
|
value={item.productId}
|
|||
|
|
onValueChange={(value) =>
|
|||
|
|
handleProductChange(item.tempId, value)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="border-gray-300">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{products.map((product) => (
|
|||
|
|
<SelectItem key={product.id} value={product.id}>
|
|||
|
|
{product.name}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
{errors[`item-${index}-product`] && (
|
|||
|
|
<p className="text-xs text-red-500 mt-1">
|
|||
|
|
{errors[`item-${index}-product`]}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 數量 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min="1"
|
|||
|
|
value={item.quantity || ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleUpdateItem(item.tempId, {
|
|||
|
|
quantity: parseInt(e.target.value) || 0,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="border-gray-300"
|
|||
|
|
/>
|
|||
|
|
{errors[`item-${index}-quantity`] && (
|
|||
|
|
<p className="text-xs text-red-500 mt-1">
|
|||
|
|
{errors[`item-${index}-quantity`]}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 單位 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Input
|
|||
|
|
value={item.unit}
|
|||
|
|
disabled
|
|||
|
|
className="bg-gray-50 border-gray-200"
|
|||
|
|
/>
|
|||
|
|
</TableCell>
|
|||
|
|
|
|||
|
|
{/* 效期 */}
|
|||
|
|
{/* <TableCell>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Input
|
|||
|
|
type="date"
|
|||
|
|
value={item.expiryDate}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleUpdateItem(item.tempId, {
|
|||
|
|
expiryDate: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="border-gray-300"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</TableCell> */}
|
|||
|
|
|
|||
|
|
{/* 批號 */}
|
|||
|
|
{/* <TableCell>
|
|||
|
|
<Input
|
|||
|
|
value={item.batchNumber}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
handleBatchNumberChange(item.tempId, e.target.value)
|
|||
|
|
}
|
|||
|
|
className="border-gray-300"
|
|||
|
|
placeholder="系統自動生成"
|
|||
|
|
/>
|
|||
|
|
{errors[`item-${index}-batch`] && (
|
|||
|
|
<p className="text-xs text-red-500 mt-1">
|
|||
|
|
{errors[`item-${index}-batch`]}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</TableCell> */}
|
|||
|
|
|
|||
|
|
{/* 刪除按鈕 */}
|
|||
|
|
<TableCell>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
variant="ghost"
|
|||
|
|
size="icon"
|
|||
|
|
onClick={() => handleRemoveItem(item.tempId)}
|
|||
|
|
className="hover:bg-red-50 hover:text-red-600 h-8 w-8"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="border border-dashed rounded-lg p-12 text-center text-gray-500 bg-gray-50/30">
|
|||
|
|
<p className="text-base font-medium">尚無明細</p>
|
|||
|
|
<p className="text-sm mt-1">請點擊右上方「新增明細」按鈕加入商品</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</AuthenticatedLayout>
|
|||
|
|
);
|
|||
|
|
}
|