新增單位管理以及一些功能修正

resources/js/Pages/Product/Index.tsx

@@ -12,6 +12,7 @@ import { Plus, Search, X } from "lucide-react";
 import ProductTable from "@/Components/Product/ProductTable";
 import ProductDialog from "@/Components/Product/ProductDialog";
 import CategoryManagerDialog from "@/Components/Category/CategoryManagerDialog";
+import UnitManagerDialog, { Unit } from "@/Components/Unit/UnitManagerDialog";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
@@ -31,10 +32,13 @@ export interface Product {
   category?: Category;
   brand?: string;
   specification?: string;
-  base_unit: string;
-  large_unit?: string;
+  base_unit_id: number;
+  baseUnit?: Unit;
+  large_unit_id?: number;
+  largeUnit?: Unit;
   conversion_rate?: number;
-  purchase_unit?: string;
+  purchase_unit_id?: number;
+  purchaseUnit?: Unit;
   created_at: string;
   updated_at: string;
 }
@@ -46,6 +50,7 @@ interface PageProps {
     from: number;
   };
   categories: Category[];
+  units: Unit[];
   filters: {
     search?: string;
     category_id?: string;
@@ -55,7 +60,7 @@ interface PageProps {
   };
 }
 
-export default function ProductManagement({ products, categories, filters }: PageProps) {
+export default function ProductManagement({ products, categories, units, filters }: PageProps) {
   const [searchTerm, setSearchTerm] = useState(filters.search || "");
   const [typeFilter, setTypeFilter] = useState<string>(filters.category_id || "all");
   const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
@@ -63,6 +68,7 @@ export default function ProductManagement({ products, categories, filters }: Pag
   const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isCategoryDialogOpen, setIsCategoryDialogOpen] = useState(false);
+  const [isUnitDialogOpen, setIsUnitDialogOpen] = useState(false);
   const [editingProduct, setEditingProduct] = useState<Product | null>(null);
 
   // Sync state with props when they change (e.g. navigation)
@@ -163,13 +169,11 @@ export default function ProductManagement({ products, categories, filters }: Pag
   };
 
   const handleDeleteProduct = (id: number) => {
-    if (confirm("確定要刪除嗎？")) {
-      router.delete(route('products.destroy', id), {
-        onSuccess: () => {
-          // Toast handled by flash message usually, or add here if needed
-        }
-      });
-    }
+    router.delete(route('products.destroy', id), {
+      onSuccess: () => {
+        // Toast handled by flash message
+      }
+    });
   };
 
   return (
@@ -226,6 +230,13 @@ export default function ProductManagement({ products, categories, filters }: Pag
               >
                 管理分類
               </Button>
+              <Button
+                variant="outline"
+                onClick={() => setIsUnitDialogOpen(true)}
+                className="flex-1 md:flex-none button-outlined-primary"
+              >
+                管理單位
+              </Button>
               <Button onClick={handleAddProduct} className="flex-1 md:flex-none button-filled-primary">
                 <Plus className="mr-2 h-4 w-4" />
                 新增商品
@@ -270,6 +281,7 @@ export default function ProductManagement({ products, categories, filters }: Pag
           onOpenChange={setIsDialogOpen}
           product={editingProduct}
           categories={categories}
+          units={units}
         />
 
         <CategoryManagerDialog
@@ -277,6 +289,12 @@ export default function ProductManagement({ products, categories, filters }: Pag
           onOpenChange={setIsCategoryDialogOpen}
           categories={categories}
         />
+
+        <UnitManagerDialog
+          open={isUnitDialogOpen}
+          onOpenChange={setIsUnitDialogOpen}
+          units={units}
+        />
       </div>
     </AuthenticatedLayout>
   );