feat(inventory): 實作過期與瑕疵庫存總計顯示，並強化庫存明細過期提示

resources/js/Pages/Product/Index.tsx

@@ -4,12 +4,11 @@ import { Input } from "@/Components/ui/input";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Plus, Search, Package, X, Upload } from 'lucide-react';
 import ProductTable from "@/Components/Product/ProductTable";
-import ProductDialog from "@/Components/Product/ProductDialog";
 import ProductImportDialog from "@/Components/Product/ProductImportDialog";
 import CategoryManagerDialog from "@/Components/Category/CategoryManagerDialog";
 import UnitManagerDialog, { Unit } from "@/Components/Unit/UnitManagerDialog";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { Head, router, usePage } from "@inertiajs/react";
+import { Head, router, usePage, Link } from "@inertiajs/react";
 import { PageProps as GlobalPageProps } from "@/types/global";
 import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
@@ -70,11 +69,9 @@ export default function ProductManagement({ products, categories, units, filters
   const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
   const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
   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 [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
-  const [editingProduct, setEditingProduct] = useState<Product | null>(null);
 
   // Sync state with props when they change (e.g. navigation)
   useEffect(() => {
@@ -163,15 +160,6 @@ export default function ProductManagement({ products, categories, units, filters
     );
   };
 
-  const handleAddProduct = () => {
-    setEditingProduct(null);
-    setIsDialogOpen(true);
-  };
-
-  const handleEditProduct = (product: Product) => {
-    setEditingProduct(product);
-    setIsDialogOpen(true);
-  };
 
   const handleDeleteProduct = (id: string) => {
     router.delete(route('products.destroy', id), {
@@ -259,10 +247,12 @@ export default function ProductManagement({ products, categories, units, filters
                 </Button>
               </Can>
               <Can permission="products.create">
-                <Button onClick={handleAddProduct} className="flex-1 md:flex-none button-filled-primary">
-                  <Plus className="mr-2 h-4 w-4" />
-                  新增商品
-                </Button>
+                <Link href={route("products.create")}>
+                  <Button className="w-full md:w-auto button-filled-primary">
+                    <Plus className="mr-2 h-4 w-4" />
+                    新增商品
+                  </Button>
+                </Link>
               </Can>
             </div>
           </div>
@@ -271,7 +261,6 @@ export default function ProductManagement({ products, categories, units, filters
         {/* Product Table */}
         <ProductTable
           products={products.data}
-          onEdit={handleEditProduct}
           onDelete={handleDeleteProduct}
           startIndex={products.from}
           sortField={sortField}
@@ -302,13 +291,6 @@ export default function ProductManagement({ products, categories, units, filters
           </div>
         </div>
 
-        <ProductDialog
-          open={isDialogOpen}
-          onOpenChange={setIsDialogOpen}
-          product={editingProduct}
-          categories={categories}
-          units={units}
-        />
 
         <ProductImportDialog
           open={isImportDialogOpen}