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

resources/js/Pages/PurchaseOrder/Index.tsx

@@ -14,6 +14,7 @@ import type { PurchaseOrder } from "@/types/purchase-order";
 import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 interface Props {
     orders: {
@@ -101,13 +102,15 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
                         </p>
                     </div>
                     <div className="flex gap-2">
-                        <Button
-                            onClick={handleNavigateToCreateOrder}
-                            className="gap-2 button-filled-primary"
-                        >
-                            <Plus className="h-4 w-4" />
-                            建立採購單
-                        </Button>
+                        <Can permission="purchase_orders.create">
+                            <Button
+                                onClick={handleNavigateToCreateOrder}
+                                className="gap-2 button-filled-primary"
+                            >
+                                <Plus className="h-4 w-4" />
+                                建立採購單
+                            </Button>
+                        </Can>
                     </div>
                 </div>