97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
/**
|
||
* 編輯安全庫存對話框
|
||
*/
|
||
|
||
import { useState, useEffect } from "react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
} from "@/Components/ui/dialog";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { Label } from "@/Components/ui/label";
|
||
import { SafetyStockSetting } from "@/types/warehouse";
|
||
|
||
interface EditSafetyStockDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
setting: SafetyStockSetting;
|
||
onSave: (updatedSetting: SafetyStockSetting) => void;
|
||
}
|
||
|
||
export default function EditSafetyStockDialog({
|
||
open,
|
||
onOpenChange,
|
||
setting,
|
||
onSave,
|
||
}: EditSafetyStockDialogProps) {
|
||
const [safetyStock, setSafetyStock] = useState<number>(setting.safetyStock);
|
||
|
||
useEffect(() => {
|
||
setSafetyStock(setting.safetyStock);
|
||
}, [setting]);
|
||
|
||
const handleSave = () => {
|
||
onSave({
|
||
...setting,
|
||
safetyStock,
|
||
updatedAt: new Date().toISOString(),
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle>編輯安全庫存</DialogTitle>
|
||
<DialogDescription>
|
||
修改 <span className="font-semibold text-gray-900">{setting.productName}</span> 在此倉庫的安全庫存警戒量。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="grid gap-4 py-4">
|
||
<div className="flex flex-col gap-2">
|
||
<Label htmlFor="edit-safety" className="text-sm font-medium">
|
||
庫存警示數量 ({setting.unit || '個'})
|
||
</Label>
|
||
<Input
|
||
id="edit-safety"
|
||
type="number"
|
||
min="0"
|
||
step="1"
|
||
value={safetyStock}
|
||
onChange={(e) => setSafetyStock(parseFloat(e.target.value) || 0)}
|
||
className="button-outlined-primary"
|
||
autoFocus
|
||
/>
|
||
<p className="text-xs text-gray-500">
|
||
當此商品在此倉庫的庫存餘額低於此數值時，系統將顯示警告標記。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
onClick={() => onOpenChange(false)}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
onClick={handleSave}
|
||
className="button-filled-primary"
|
||
>
|
||
儲存變更
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|