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

resources/js/Pages/Vendor/Index.tsx

@@ -8,6 +8,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 export interface Vendor {
     id: number;
@@ -160,10 +161,12 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
                         </div>
 
                         {/* Add Button */}
-                        <Button onClick={handleAddVendor} className="flex-1 md:flex-none button-filled-primary">
-                            <Plus className="mr-2 h-4 w-4" />
-                            新增廠商
-                        </Button>
+                        <Can permission="vendors.create">
+                            <Button onClick={handleAddVendor} className="flex-1 md:flex-none button-filled-primary">
+                                <Plus className="mr-2 h-4 w-4" />
+                                新增廠商
+                            </Button>
+                        </Can>
                     </div>
                 </div>
 

resources/js/Pages/Vendor/Show.tsx

@@ -4,7 +4,7 @@
 
 import { useState } from "react";
 import { Head, Link, router } from "@inertiajs/react";
-import { Phone, Mail, Plus, ArrowLeft } from "lucide-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";
@@ -140,10 +140,15 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                             返回廠商資料管理
                         </Button>
                     </Link>
-                    <h1 className="mb-2">廠商詳細資訊</h1>
-                    <p className="text-gray-600">
-                        查看並管理供應商的詳細資料與供貨商品
-                    </p>
+                    <div className="flex items-center justify-between">
+                        <div>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                                <Contact2 className="h-6 w-6 text-[#01ab83]" />
+                                廠商詳細資訊
+                            </h1>
+                            <p className="text-gray-500 mt-1">查看並管理供應商的詳細資料與供貨商品</p>
+                        </div>
+                    </div>
                 </div>
 
                 {/* 基本資料 */}