feat: 完成權限管理系統、統一頁面標題樣式與表格對齊規範

resources/js/Pages/PurchaseOrder/Index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useCallback } from "react";
-import { Plus } from "lucide-react";
+import { Plus, Search, X, ShoppingCart } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
@@ -92,16 +92,23 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
             <div className="container mx-auto p-6 max-w-7xl">
                 <div className="flex items-center justify-between mb-6">
                     <div>
-                        <h1 className="mb-2">管理採購單</h1>
-                        <p className="text-gray-600">追蹤並管理所有倉庫的採購申請與進度</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">
+                            建立與管理採購訂單，追蹤入庫狀態
+                        </p>
+                    </div>
+                    <div className="flex gap-2">
+                        <Button
+                            onClick={handleNavigateToCreateOrder}
+                            className="gap-2 button-filled-primary"
+                        >
+                            <Plus className="h-4 w-4" />
+                            建立採購單
+                        </Button>
                     </div>
-                    <Button
-                        onClick={handleNavigateToCreateOrder}
-                        className="gap-2 button-filled-primary"
-                    >
-                        <Plus className="h-4 w-4" />
-                        建立採購單
-                    </Button>
                 </div>
 
                 <div className="mb-6">