feat: 統一全系統頁面標題樣式、優化側邊欄與實作角色成員查看功能

resources/js/Pages/Product/Index.tsx

@@ -12,6 +12,7 @@ import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 export interface Category {
   id: number;
@@ -217,26 +218,32 @@ export default function ProductManagement({ products, categories, units, filters
               className="w-full md:w-[180px]"
             />
 
-            {/* Add Button */}
+            {/* Action Buttons */}
             <div className="flex gap-2 w-full md:w-auto">
-              <Button
-                variant="outline"
-                onClick={() => setIsCategoryDialogOpen(true)}
-                className="flex-1 md:flex-none button-outlined-primary"
-              >
-                管理分類
-              </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" />
-                新增商品
-              </Button>
+              <Can permission="products.edit">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsCategoryDialogOpen(true)}
+                  className="flex-1 md:flex-none button-outlined-primary"
+                >
+                  管理分類
+                </Button>
+              </Can>
+              <Can permission="products.edit">
+                <Button
+                  variant="outline"
+                  onClick={() => setIsUnitDialogOpen(true)}
+                  className="flex-1 md:flex-none button-outlined-primary"
+                >
+                  管理單位
+                </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>
+              </Can>
             </div>
           </div>
         </div>