feat: 整合門市領料日誌、API 文件存取、修改庫存與併發編號問題、供應商商品內聯編輯及日誌 UI 優化

resources/js/Pages/Vendor/Show.tsx

@@ -1,29 +1,14 @@
-/**
- * 廠商詳細資訊頁面
- */
-
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Head, Link, router } from "@inertiajs/react";
 import { Phone, Mail, Plus, ArrowLeft, Contact2 } from "lucide-react";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Label } from "@/Components/ui/label";
 import { Button } from "@/Components/ui/button";
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from "@/Components/ui/alert-dialog";
 import SupplyProductList from "@/Components/Vendor/SupplyProductList";
-import AddSupplyProductDialog from "@/Components/Vendor/AddSupplyProductDialog";
-import EditSupplyProductDialog from "@/Components/Vendor/EditSupplyProductDialog";
 import type { Vendor } from "@/Pages/Vendor/Index";
 import type { SupplyProduct } from "@/types/vendor";
 import { getShowBreadcrumbs } from "@/utils/breadcrumb";
+import { toast } from "sonner";
 
 interface Pivot {
     last_price: number | null;
@@ -33,12 +18,11 @@ interface VendorProduct {
     id: number;
     name: string;
     unit?: string;
-    // Relations might be camelCase or snake_case depending on serialization settings
     baseUnit?: { name: string };
     base_unit?: { name: string };
     largeUnit?: { name: string };
     large_unit?: { name: string };
-    purchaseUnit?: string; // Note: if it's a relation it might be an object, but original code treated it as string
+    purchaseUnit?: string;
     purchase_unit?: string;
     conversion_rate?: number;
     pivot: Pivot;
@@ -53,78 +37,102 @@ interface ShowProps {
     products: any[];
 }
 
-export default function VendorShow({ vendor, products }: ShowProps) {
-    const [showAddDialog, setShowAddDialog] = useState(false);
-    const [showEditDialog, setShowEditDialog] = useState(false);
-    const [showRemoveDialog, setShowRemoveDialog] = useState(false);
-    const [selectedProduct, setSelectedProduct] = useState<SupplyProduct | null>(null);
+export default function VendorShow({ vendor, products: allProducts }: ShowProps) {
+    const [items, setItems] = useState<SupplyProduct[]>([]);
 
-    // 轉換後端資料格式為前端組件需要的格式
-    const supplyProducts: SupplyProduct[] = vendor.products.map(p => {
-        // Laravel load('relationName') usually results in camelCase key in JSON if method is camelCase
-        const baseUnitName = p.baseUnit?.name || p.base_unit?.name;
-        const largeUnitName = p.largeUnit?.name || p.large_unit?.name;
+    // 初始化資料
+    useEffect(() => {
+        const initialItems: SupplyProduct[] = vendor.products.map(p => {
+            const baseUnitName = p.baseUnit?.name || p.base_unit?.name;
+            const largeUnitName = p.largeUnit?.name || p.large_unit?.name;
 
-        // Check purchase unit - seemingly originally a field string, but if relation, check if object
-        // Assuming purchase_unit is a string field on product table here based on original code usage?
-        // Wait, original code usage: p.purchase_unit || ...
-        // In Product model: purchase_unit_id exists, purchaseUnit is relation.
-        // If p.purchase_unit was working before, it might be an attribute (accessors).
-        // Let's stick to safe access.
-
-        return {
-            id: String(p.id),
-            productId: String(p.id),
-            productName: p.name,
-            unit: p.purchase_unit || baseUnitName || "個",
-            baseUnit: baseUnitName,
-            largeUnit: largeUnitName,
-            conversionRate: p.conversion_rate,
-            lastPrice: p.pivot.last_price || undefined,
-        };
-    });
-
-    const handleAddProduct = (productId: string, lastPrice?: number) => {
-        router.post(route('vendors.products.store', vendor.id), {
-            product_id: productId,
-            last_price: lastPrice,
-        }, {
-            onSuccess: () => setShowAddDialog(false),
+            return {
+                id: String(p.id) + "_" + Math.random().toString(36).substr(2, 9), // 加上隨機碼以確保 key 唯一
+                productId: String(p.id),
+                productName: p.name,
+                unit: p.purchase_unit || baseUnitName || "個",
+                baseUnit: baseUnitName,
+                largeUnit: largeUnitName,
+                conversionRate: p.conversion_rate,
+                lastPrice: p.pivot.last_price || undefined,
+            };
         });
+        setItems(initialItems);
+    }, [vendor.products]);
+
+    const handleAddItem = () => {
+        const newItem: SupplyProduct = {
+            id: "new_" + Math.random().toString(36).substr(2, 9),
+            productId: "",
+            productName: "",
+            unit: "個",
+            lastPrice: undefined,
+        };
+        setItems([...items, newItem]);
     };
 
-    const handleEditProduct = (product: SupplyProduct) => {
-        setSelectedProduct(product);
-        setShowEditDialog(true);
+    const handleRemoveItem = (index: number) => {
+        const newItems = [...items];
+        newItems.splice(index, 1);
+        setItems(newItems);
     };
 
-    const handleUpdateProduct = (productId: string, lastPrice?: number) => {
-        router.put(route('vendors.products.update', [vendor.id, productId]), {
-            last_price: lastPrice,
+    const handleItemChange = (index: number, field: keyof SupplyProduct, value: any) => {
+        const newItems = [...items];
+        const item = { ...newItems[index] };
+
+        if (field === "productId") {
+            const product = allProducts.find(p => String(p.id) === String(value));
+            if (product) {
+                item.productId = String(product.id);
+                item.productName = product.name;
+                item.baseUnit = product.baseUnit?.name || product.base_unit?.name || product.base_unit || "個";
+                item.largeUnit = product.largeUnit?.name || product.large_unit?.name;
+                item.conversionRate = product.conversion_rate;
+                item.unit = item.baseUnit || "個";
+            } else {
+                item.productId = value;
+                item.productName = "";
+            }
+        } else {
+            (item as any)[field] = value;
+        }
+
+        newItems[index] = item;
+        setItems(newItems);
+    };
+
+    const handleSaveAll = () => {
+        // 過濾掉沒有選擇商品的項目
+        const validItems = items.filter(item => item.productId !== "");
+
+        if (validItems.length === 0 && items.length > 0) {
+            toast.error("請至少選擇一個有效的商品，或移除空白列");
+            return;
+        }
+
+        // 檢查重複商品
+        const productIds = validItems.map(i => i.productId);
+        if (new Set(productIds).size !== productIds.length) {
+            toast.error("供貨清單中有重複的商品，請檢查");
+            return;
+        }
+
+        router.put(route('vendors.products.sync', vendor.id), {
+            products: validItems.map(item => ({
+                product_id: item.productId,
+                last_price: item.lastPrice,
+            }))
         }, {
             onSuccess: () => {
-                setShowEditDialog(false);
-                setSelectedProduct(null);
+                toast.success("供貨商品已更新");
+            },
+            onError: () => {
+                toast.error("更新失敗，請檢查欄位格式");
             }
         });
     };
 
-    const handleRemoveProduct = (product: SupplyProduct) => {
-        setSelectedProduct(product);
-        setShowRemoveDialog(true);
-    };
-
-    const handleConfirmRemove = () => {
-        if (selectedProduct) {
-            router.delete(route('vendors.products.destroy', [vendor.id, selectedProduct.productId]), {
-                onSuccess: () => {
-                    setShowRemoveDialog(false);
-                    setSelectedProduct(null);
-                }
-            });
-        }
-    };
-
     return (
         <AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("vendors", `廠商詳情 (${vendor.name})`)}>
             <Head title={`廠商詳情 - ${vendor.name}`} />
@@ -164,11 +172,11 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                         </div>
                         <div>
                             <Label className="text-muted-foreground text-xs">廠商簡稱</Label>
-                            <p className="mt-1 font-medium">{vendor.short_name || "-"}</p>
+                            <p className="mt-1 font-medium">{vendor.shortName || "-"}</p>
                         </div>
                         <div>
                             <Label className="text-muted-foreground text-xs">統一編號</Label>
-                            <p className="mt-1">{vendor.tax_id || "-"}</p>
+                            <p className="mt-1">{vendor.taxId || "-"}</p>
                         </div>
                         <div>
                             <Label className="text-muted-foreground text-xs">負責人</Label>
@@ -187,7 +195,7 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div>
                             <Label className="text-muted-foreground text-xs">聯絡人</Label>
-                            <p className="mt-1">{vendor.contact_name || "-"}</p>
+                            <p className="mt-1">{vendor.contactName || "-"}</p>
                         </div>
                         <div>
                             <Label className="text-muted-foreground text-xs">聯絡電話</Label>
@@ -212,9 +220,9 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                 {/* 供貨商品列表 */}
                 <div className="bg-white rounded-lg border border-border p-6 shadow-sm">
                     <div className="flex items-center justify-between mb-4">
-                        <h3>供貨商品</h3>
+                        <h3 className="font-bold">供貨商品</h3>
                         <Button
-                            onClick={() => setShowAddDialog(true)}
+                            onClick={handleAddItem}
                             className="gap-2 button-filled-primary"
                             size="sm"
                         >
@@ -222,57 +230,30 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                             新增供貨商品
                         </Button>
                     </div>
+
                     <SupplyProductList
-                        products={supplyProducts}
-                        onEdit={handleEditProduct}
-                        onRemove={handleRemoveProduct}
+                        items={items}
+                        allProducts={allProducts}
+                        onRemoveItem={handleRemoveItem}
+                        onItemChange={handleItemChange}
                     />
                 </div>
 
-                {/* 新增供貨商品對話框 */}
-                <AddSupplyProductDialog
-                    open={showAddDialog}
-                    products={products}
-                    existingSupplyProducts={supplyProducts}
-                    onClose={() => setShowAddDialog(false)}
-                    onAdd={handleAddProduct}
-                />
-
-                {/* 編輯供貨商品對話框 */}
-                <EditSupplyProductDialog
-                    open={showEditDialog}
-                    product={selectedProduct}
-                    onClose={() => {
-                        setShowEditDialog(false);
-                        setSelectedProduct(null);
-                    }}
-                    onSave={handleUpdateProduct}
-                />
-
-                {/* 取消供貨確認對話框 */}
-                <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
-                    <AlertDialogContent>
-                        <AlertDialogHeader>
-                            <AlertDialogTitle>確認取消供貨</AlertDialogTitle>
-                            <AlertDialogDescription>
-                                確定要將「{selectedProduct?.productName}」從供貨列表中移除嗎？此操作無法撤銷。
-                            </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                            <AlertDialogCancel
-                                className="gap-2 button-outlined-primary"
-                            >
-                                取消
-                            </AlertDialogCancel>
-                            <AlertDialogAction
-                                className="gap-2 button-filled-error"
-                                onClick={handleConfirmRemove}
-                            >
-                                確認移除
-                            </AlertDialogAction>
-                        </AlertDialogFooter>
-                    </AlertDialogContent>
-                </AlertDialog>
+                {/* 底部按鈕 - 移至容器外 */}
+                <div className="mt-6 flex items-center justify-end gap-4 py-6 border-t border-gray-100">
+                    <Link href="/vendors">
+                        <Button variant="ghost" className="h-11 px-6 text-gray-500 hover:text-gray-700">
+                            取消
+                        </Button>
+                    </Link>
+                    <Button
+                        onClick={handleSaveAll}
+                        className="bg-primary hover:bg-primary/90 text-white shadow-primary/20 h-11 px-8 text-lg font-bold rounded-xl"
+                        size="lg"
+                    >
+                        更新供貨商品
+                    </Button>
+                </div>
             </div>
         </AuthenticatedLayout>
     );