feat(procurement): 統一採購單按鈕樣式與術語更名為「作廢」，並加強權限控管

resources/js/Pages/PurchaseOrder/Create.tsx

@@ -10,7 +10,7 @@ import { Textarea } from "@/Components/ui/textarea";
 import { Alert, AlertDescription } from "@/Components/ui/alert";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { Head, Link, router } from "@inertiajs/react";
+import { Head, Link, router, usePage } from "@inertiajs/react";
 import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
 import type { PurchaseOrder, Supplier } from "@/types/purchase-order";
 import type { Warehouse } from "@/types/requester";
@@ -21,8 +21,9 @@ import {
     getTodayDate,
     formatCurrency,
 } from "@/utils/purchase-order";
-import { STATUS_OPTIONS } from "@/constants/purchase-order";
+import { STATUS_CONFIG, MANUAL_STATUS_OPTIONS } from "@/constants/purchase-order";
 import { toast } from "sonner";
+import { Can } from "@/Components/Permission/Can";
 import { getCreateBreadcrumbs, getEditBreadcrumbs } from "@/utils/breadcrumb";
 
 interface Props {
@@ -36,6 +37,17 @@ export default function CreatePurchaseOrder({
     suppliers,
     warehouses,
 }: Props) {
+    const { auth } = usePage<any>().props;
+    const permissions = auth.user?.permissions || [];
+    const isSuperAdmin = auth.user?.roles?.some((r: any) => r.name === 'super-admin');
+
+    const canApprove = isSuperAdmin || permissions.includes('purchase_orders.approve');
+    const canCreate = isSuperAdmin || permissions.includes('purchase_orders.create');
+    const canEdit = isSuperAdmin || permissions.includes('purchase_orders.edit');
+
+    // 儲存權限判斷
+    const canSave = order ? canEdit : canCreate;
+
     const {
         supplierId,
         expectedDate,
@@ -273,12 +285,26 @@ export default function CreatePurchaseOrder({
                                 {order && (
                                     <div className="space-y-3">
                                         <label className="text-sm font-bold text-gray-700">狀態</label>
-                                        <SearchableSelect
-                                            value={status}
-                                            onValueChange={(v) => setStatus(v as any)}
-                                            options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
-                                            placeholder="選擇狀態"
-                                        />
+                                        <Can permission="purchase_orders.approve">
+                                            <SearchableSelect
+                                                value={status}
+                                                onValueChange={(v) => setStatus(v as any)}
+                                                options={MANUAL_STATUS_OPTIONS}
+                                                placeholder="選擇狀態"
+                                            />
+                                        </Can>
+                                        <div className="!mt-1">
+                                            {!canApprove && (
+                                                <>
+                                                    <div className="px-3 py-2 bg-gray-50 border rounded-md text-sm text-gray-600">
+                                                        {STATUS_CONFIG[status as keyof typeof STATUS_CONFIG]?.label || status}
+                                                    </div>
+                                                    <p className="text-[10px] text-gray-400 mt-1 italic">
+                                                        * 您沒有權限在此修改狀態，請使用詳情頁面的動作按鈕進行操作。
+                                                    </p>
+                                                </>
+                                            )}
+                                        </div>
                                     </div>
                                 )}
                             </div>
@@ -454,9 +480,11 @@ export default function CreatePurchaseOrder({
                         </Button>
                     </Link>
                     <Button
-                        size="lg"
-                        className="bg-primary hover:bg-primary/90 text-white px-12 h-14 rounded-xl shadow-lg shadow-primary/20 text-lg font-bold transition-all hover:scale-[1.02] active:scale-[0.98]"
+                        size="xl"
+                        className="bg-primary hover:bg-primary/90 text-white shadow-primary/20"
                         onClick={handleSave}
+                        disabled={!canSave}
+                        title={!canSave ? "您沒有執行此動作的權限" : ""}
                     >
                         {order ? "更新採購單" : "確認發布採購單"}
                     </Button>