first commit

resources/js/Components/Warehouse/SafetyStock/EditSafetyStockDialog.tsx

@@ -0,0 +1,96 @@
+/**
+ * 編輯安全庫存對話框
+ */
+
+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>
+    );
+}