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

resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/Components/ui/button";
 import { Link, useForm } from "@inertiajs/react";
 import type { PurchaseOrder } from "@/types/purchase-order";
 import { toast } from "sonner";
+import { Can } from "@/Components/Permission/Can";
 
 export function PurchaseOrderActions({
     order,
@@ -31,26 +32,30 @@ export function PurchaseOrderActions({
                     <Eye className="h-4 w-4" />
                 </Button>
             </Link>
-            <Link href={`/purchase-orders/${order.id}/edit`}>
+            <Can permission="purchase_orders.edit">
+                <Link href={`/purchase-orders/${order.id}/edit`}>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="button-outlined-primary"
+                        title="編輯"
+                    >
+                        <Pencil className="h-4 w-4" />
+                    </Button>
+                </Link>
+            </Can>
+            <Can permission="purchase_orders.delete">
                 <Button
                     variant="outline"
                     size="sm"
-                    className="button-outlined-primary"
-                    title="編輯"
+                    className="button-outlined-error"
+                    title="刪除"
+                    onClick={handleDelete}
+                    disabled={processing}
                 >
-                    <Pencil className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
                 </Button>
-            </Link>
-            <Button
-                variant="outline"
-                size="sm"
-                className="button-outlined-error"
-                title="刪除"
-                onClick={() => onDelete?.(order.id)}
-                disabled={processing}
-            >
-                <Trash2 className="h-4 w-4" />
-            </Button>
+            </Can>
         </div>
     );
 }