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

resources/js/Pages/PurchaseOrder/Create.tsx

@@ -2,7 +2,7 @@
  * 建立/編輯採購單頁面
  */
 
-import { ArrowLeft, Plus, Info } from "lucide-react";
+import { ArrowLeft, Plus, Info, ShoppingCart } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Textarea } from "@/Components/ui/textarea";
@@ -173,8 +173,11 @@ export default function CreatePurchaseOrder({
                     </Link>
 
                     <div className="mb-6">
-                        <h1 className="mb-2">{order ? "編輯採購單" : "建立採購單"}</h1>
-                        <p className="text-gray-600">
+                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                            <ShoppingCart className="h-6 w-6 text-[#01ab83]" />
+                            {order ? "編輯採購單" : "建立採購單"}
+                        </h1>
+                        <p className="text-gray-500 mt-1">
                             {order ? `修改採購單 ${order.poNumber} 的詳細資訊` : "填寫新採購單的資訊以開始流程"}
                         </p>
                     </div>

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>
 

resources/js/Pages/PurchaseOrder/Show.tsx

@@ -2,7 +2,7 @@
  * 查看採購單詳情頁面
  */
 
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ShoppingCart } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link } from "@inertiajs/react";
@@ -37,8 +37,11 @@ export default function ViewPurchaseOrderPage({ order }: Props) {
 
                     <div className="flex items-center justify-between mb-6">
                         <div>
-                            <h1 className="mb-2">查看採購單</h1>
-                            <p className="text-gray-600">單號：{order.poNumber}</p>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                                <ShoppingCart className="h-6 w-6 text-[#01ab83]" />
+                                查看採購單
+                            </h1>
+                            <p className="text-gray-500 mt-1">單號：{order.poNumber}</p>
                         </div>
                         <div className="flex items-center gap-3">
                             <Link href={`/purchase-orders/${order.id}/edit`}>