star-erp/resources/js/Components/Vendor/EditSupplyProductDialog.tsx

/**
 * 編輯供貨商品對話框
 */

import { useEffect, useState } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
} from "@/Components/ui/dialog";
import type { SupplyProduct } from "@/types/vendor";

interface EditSupplyProductDialogProps {
    open: boolean;
    product: SupplyProduct | null;
    onClose: () => void;
    onSave: (productId: string, lastPrice?: number) => void;
}

export default function EditSupplyProductDialog({
    open,
    product,
    onClose,
    onSave,
}: EditSupplyProductDialogProps) {
    const [lastPrice, setLastPrice] = useState<string>("");

    useEffect(() => {
        if (product) {
            setLastPrice(product.lastPrice?.toString() || "");
        }
    }, [product, open]);

    const handleSave = () => {
        if (!product) return;

        const price = lastPrice ? parseFloat(lastPrice) : undefined;
        onSave(product.productId, price);
        setLastPrice("");
    };

    const handleCancel = () => {
        setLastPrice("");
        onClose();
    };

    if (!product) return null;

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="max-w-xl">
                <DialogHeader>
                    <DialogTitle>編輯供貨商品</DialogTitle>
                    <DialogDescription>修改商品的採購價格資訊。</DialogDescription>
                </DialogHeader>

                <div className="space-y-4">
                    {/* 商品名稱（不可編輯） */}
                    <div>
                        <Label className="text-muted-foreground text-xs">商品名稱</Label>
                        <Input
                            value={product.productName}
                            disabled
                            className="mt-1 bg-muted"
                        />
                    </div>

                    {/* 單位（不可編輯） */}
                    <div>
                        <Label className="text-muted-foreground text-xs">單位</Label>
                        <Input
                            value={product.unit}
                            disabled
                            className="mt-1 bg-muted"
                        />
                    </div>

                    {/* 上次採購價格 */}
                    <div>
                        <Label className="text-muted-foreground text-xs">上次採購單價 / {product.baseUnit || "單位"}</Label>
                        <Input
                            type="number"
                            min="0"
                            step="any"
                            placeholder="輸入價格"
                            value={lastPrice}
                            onChange={(e) => setLastPrice(e.target.value)}
                            className="mt-1"
                        />
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={handleCancel}
                        className="gap-2 button-outlined-primary"
                    >
                        取消
                    </Button>
                    <Button
                        size="sm"
                        onClick={handleSave}
                        className="gap-2 button-filled-primary"
                    >
                        儲存
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}