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

app/Http/Controllers/Admin/RoleController.php

@@ -17,6 +17,7 @@ class RoleController extends Controller
     public function index()
     {
         $roles = Role::withCount('users', 'permissions')
+            ->with('users:id,name,username')
             ->orderBy('id')
             ->get();
 
@@ -44,11 +45,15 @@ class RoleController extends Controller
     {
         $validated = $request->validate([
             'name' => ['required', 'string', 'max:255', 'unique:roles,name'],
+            'display_name' => ['required', 'string', 'max:255'],
             'permissions' => ['array'],
             'permissions.*' => ['exists:permissions,name']
         ]);
 
-        $role = Role::create(['name' => $validated['name']]);
+        $role = Role::create([
+            'name' => $validated['name'],
+            'display_name' => $validated['display_name']
+        ]);
         
         if (!empty($validated['permissions'])) {
             $role->syncPermissions($validated['permissions']);
@@ -92,11 +97,15 @@ class RoleController extends Controller
 
         $validated = $request->validate([
             'name' => ['required', 'string', 'max:255', Rule::unique('roles', 'name')->ignore($role->id)],
+            'display_name' => ['required', 'string', 'max:255'],
             'permissions' => ['array'],
             'permissions.*' => ['exists:permissions,name']
         ]);
 
-        $role->update(['name' => $validated['name']]);
+        $role->update([
+            'name' => $validated['name'],
+            'display_name' => $validated['display_name']
+        ]);
         
         if (isset($validated['permissions'])) {
             $role->syncPermissions($validated['permissions']);
@@ -134,9 +143,14 @@ class RoleController extends Controller
         $grouped = [];
 
         foreach ($allPermissions as $permission) {
-            // 假設命名格式為 group.action (例如 products.create)
             $parts = explode('.', $permission->name);
             $group = $parts[0];
+            $action = $parts[1] ?? '';
+
+            // 特定權限遷移邏輯
+            if ($permission->name === 'inventory.transfer') {
+                $group = 'warehouses'; // 調撥功能移至倉庫管理下
+            }
 
             if (!isset($grouped[$group])) {
                 $grouped[$group] = [];
@@ -145,22 +159,34 @@ class RoleController extends Controller
             $grouped[$group][] = $permission;
         }
 
-        // 翻譯群組名稱 (可選，優化顯示)
+        // 依照側邊欄順序定義
-        $groupNames = [
+        $groupDefinitions = [
             'products' => '商品資料管理',
-            'vendors' => '廠商資料管理',
-            'purchase_orders' => '採購單管理',
             'warehouses' => '倉庫管理',
             'inventory' => '庫存管理',
+            'vendors' => '廠商資料管理',
+            'purchase_orders' => '採購單管理',
             'users' => '使用者管理',
-            'roles' => '角色權限管理',
+            'roles' => '角色與權限',
         ];
 
         $result = [];
+        foreach ($groupDefinitions as $key => $displayName) {
+            if (isset($grouped[$key])) {
+                $result[] = [
+                    'key' => $key,
+                    'name' => $displayName,
+                    'permissions' => $grouped[$key]
+                ];
+                unset($grouped[$key]); // 從待處理中移除
+            }
+        }
+
+        // 處理剩餘未定義在 groupDefinitions 中的群組 (安全機制)
         foreach ($grouped as $key => $permissions) {
             $result[] = [
                 'key' => $key,
-                'name' => $groupNames[$key] ?? ucfirst($key),
+                'name' => ucfirst($key),
                 'permissions' => $permissions
             ];
         }

app/Http/Controllers/Admin/UserController.php

@@ -31,7 +31,7 @@ class UserController extends Controller
      */
     public function create()
     {
-        $roles = Role::pluck('name', 'id');
+        $roles = Role::pluck('display_name', 'name');
 
         return Inertia::render('Admin/User/Create', [
             'roles' => $roles
@@ -71,7 +71,7 @@ class UserController extends Controller
     public function edit(string $id)
     {
         $user = User::with('roles')->findOrFail($id);
-        $roles = Role::get(['id', 'name']); 
+        $roles = Role::get(['id', 'name', 'display_name']); 
 
         return Inertia::render('Admin/User/Edit', [
             'user' => $user,

bootstrap/app.php

@@ -3,6 +3,9 @@
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Symfony\Component\HttpKernel\Exception\HttpException;
+use Spatie\Permission\Exceptions\UnauthorizedException;
+use Inertia\Inertia;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
@@ -14,7 +17,25 @@ return Application::configure(basePath: dirname(__DIR__))
         $middleware->web(append: [
             \App\Http\Middleware\HandleInertiaRequests::class,
         ]);
+
+        // 註冊 Spatie Permission 中間件別名
+        $middleware->alias([
+            'permission' => \Spatie\Permission\Middleware\PermissionMiddleware::class,
+            'role' => \Spatie\Permission\Middleware\RoleMiddleware::class,
+            'role_or_permission' => \Spatie\Permission\Middleware\RoleOrPermissionMiddleware::class,
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
-        //
+        // 處理 Spatie Permission 的 UnauthorizedException
+        $exceptions->render(function (UnauthorizedException $e) {
+            return Inertia::render('Error/403')->toResponse(request())->setStatusCode(403);
+        });
+
+        // 處理一般的 403 HttpException
+        $exceptions->render(function (HttpException $e) {
+            if ($e->getStatusCode() === 403) {
+                return Inertia::render('Error/403')->toResponse(request())->setStatusCode(403);
+            }
+        });
     })->create();
+

database/migrations/2026_01_13_160117_add_display_name_to_roles_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('roles', function (Blueprint $table) {
+            $table->string('display_name')->nullable()->after('name');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('roles', function (Blueprint $table) {
+            $table->dropColumn('display_name');
+        });
+    }
+};

database/migrations/2026_01_13_160741_add_inventory_delete_permission.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        \Spatie\Permission\Models\Permission::create(['name' => 'inventory.delete', 'guard_name' => 'web']);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        \Spatie\Permission\Models\Permission::where('name', 'inventory.delete')->delete();
+    }
+};

database/migrations/2026_01_13_162407_add_safety_stock_permissions.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        \Spatie\Permission\Models\Permission::create(['name' => 'inventory.safety_stock', 'guard_name' => 'web']);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        \Spatie\Permission\Models\Permission::where('name', 'inventory.safety_stock')->delete();
+    }
+};

resources/js/Components/Product/ProductTable.tsx

@@ -20,8 +20,8 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/Components/ui/alert-dialog";
+import { Can } from "@/Components/Permission/Can";
 import type { Product } from "@/Pages/Product/Index";
-// import BarcodeViewDialog from "@/Components/Product/BarcodeViewDialog";
 
 interface ProductTableProps {
   products: Product[];
@@ -147,38 +147,42 @@ export default function ProductTable({
                         <Eye className="h-4 w-4" />
                       </Button>
                       */}
-                      <Button
+                      <Can permission="products.edit">
-                        variant="outline"
+                        <Button
-                        size="sm"
+                          variant="outline"
-                        onClick={() => onEdit(product)}
+                          size="sm"
-                        className="button-outlined-primary"
+                          onClick={() => onEdit(product)}
-                      >
+                          className="button-outlined-primary"
-                        <Pencil className="h-4 w-4" />
+                        >
-                      </Button>
+                          <Pencil className="h-4 w-4" />
-                      <AlertDialog>
+                        </Button>
-                        <AlertDialogTrigger asChild>
+                      </Can>
-                          <Button variant="outline" size="sm" className="button-outlined-error">
+                      <Can permission="products.delete">
-                            <Trash2 className="h-4 w-4" />
+                        <AlertDialog>
-                          </Button>
+                          <AlertDialogTrigger asChild>
-                        </AlertDialogTrigger>
+                            <Button variant="outline" size="sm" className="button-outlined-error">
-                        <AlertDialogContent>
+                              <Trash2 className="h-4 w-4" />
-                          <AlertDialogHeader>
+                            </Button>
-                            <AlertDialogTitle>確認刪除</AlertDialogTitle>
+                          </AlertDialogTrigger>
-                            <AlertDialogDescription>
+                          <AlertDialogContent>
-                              確定要刪除「{product.name}」嗎？此操作無法復原。
+                            <AlertDialogHeader>
-                            </AlertDialogDescription>
+                              <AlertDialogTitle>確認刪除</AlertDialogTitle>
-                          </AlertDialogHeader>
+                              <AlertDialogDescription>
-                          <AlertDialogFooter>
+                                確定要刪除「{product.name}」嗎？此操作無法復原。
-                            <AlertDialogCancel>取消</AlertDialogCancel>
+                              </AlertDialogDescription>
-                            <AlertDialogAction
+                            </AlertDialogHeader>
-                              onClick={() => onDelete(product.id)}
+                            <AlertDialogFooter>
-                              className="bg-red-600 hover:bg-red-700"
+                              <AlertDialogCancel>取消</AlertDialogCancel>
-                            >
+                              <AlertDialogAction
-                              刪除
+                                onClick={() => onDelete(product.id)}
-                            </AlertDialogAction>
+                                className="bg-red-600 hover:bg-red-700"
-                          </AlertDialogFooter>
+                              >
-                        </AlertDialogContent>
+                                刪除
-                      </AlertDialog>
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </Can>
                     </div>
                   </TableCell>
                 </TableRow>

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"
+                    className="button-outlined-error"
-                    title="編輯"
+                    title="刪除"
+                    onClick={handleDelete}
+                    disabled={processing}
                 >
-                    <Pencil className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
                 </Button>
-            </Link>
+            </Can>
-            <Button
-                variant="outline"
-                size="sm"
-                className="button-outlined-error"
-                title="刪除"
-                onClick={() => onDelete?.(order.id)}
-                disabled={processing}
-            >
-                <Trash2 className="h-4 w-4" />
-            </Button>
         </div>
     );
 }

resources/js/Components/Vendor/VendorTable.tsx

@@ -19,6 +19,7 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from "@/Components/ui/alert-dialog";
+import { Can } from "@/Components/Permission/Can";
 import type { Vendor } from "@/Pages/Vendor/Index";
 
 interface VendorTableProps {
@@ -122,38 +123,42 @@ export default function VendorTable({
                                         >
                                             <Eye className="h-4 w-4" />
                                         </Button>
-                                        <Button
+                                        <Can permission="vendors.edit">
-                                            variant="outline"
+                                            <Button
-                                            size="sm"
+                                                variant="outline"
-                                            onClick={() => onEdit(vendor)}
+                                                size="sm"
-                                            className="button-outlined-primary"
+                                                onClick={() => onEdit(vendor)}
-                                        >
+                                                className="button-outlined-primary"
-                                            <Pencil className="h-4 w-4" />
+                                            >
-                                        </Button>
+                                                <Pencil className="h-4 w-4" />
-                                        <AlertDialog>
+                                            </Button>
-                                            <AlertDialogTrigger asChild>
+                                        </Can>
-                                                <Button variant="outline" size="sm" className="button-outlined-error">
+                                        <Can permission="vendors.delete">
-                                                    <Trash2 className="h-4 w-4" />
+                                            <AlertDialog>
-                                                </Button>
+                                                <AlertDialogTrigger asChild>
-                                            </AlertDialogTrigger>
+                                                    <Button variant="outline" size="sm" className="button-outlined-error">
-                                            <AlertDialogContent>
+                                                        <Trash2 className="h-4 w-4" />
-                                                <AlertDialogHeader>
+                                                    </Button>
-                                                    <AlertDialogTitle>確認刪除</AlertDialogTitle>
+                                                </AlertDialogTrigger>
-                                                    <AlertDialogDescription>
+                                                <AlertDialogContent>
-                                                        確定要刪除廠商「{vendor.name}」嗎？此操作無法復原。
+                                                    <AlertDialogHeader>
-                                                    </AlertDialogDescription>
+                                                        <AlertDialogTitle>確認刪除</AlertDialogTitle>
-                                                </AlertDialogHeader>
+                                                        <AlertDialogDescription>
-                                                <AlertDialogFooter>
+                                                            確定要刪除廠商「{vendor.name}」嗎？此操作無法復原。
-                                                    <AlertDialogCancel>取消</AlertDialogCancel>
+                                                        </AlertDialogDescription>
-                                                    <AlertDialogAction
+                                                    </AlertDialogHeader>
-                                                        onClick={() => onDelete(vendor.id)}
+                                                    <AlertDialogFooter>
-                                                        className="bg-red-600 hover:bg-red-700"
+                                                        <AlertDialogCancel>取消</AlertDialogCancel>
-                                                    >
+                                                        <AlertDialogAction
-                                                        刪除
+                                                            onClick={() => onDelete(vendor.id)}
-                                                    </AlertDialogAction>
+                                                            className="bg-red-600 hover:bg-red-700"
-                                                </AlertDialogFooter>
+                                                        >
-                                            </AlertDialogContent>
+                                                            刪除
-                                        </AlertDialog>
+                                                        </AlertDialogAction>
+                                                    </AlertDialogFooter>
+                                                </AlertDialogContent>
+                                            </AlertDialog>
+                                        </Can>
                                     </div>
                                 </TableCell>
                             </TableRow>

resources/js/Components/Warehouse/Inventory/InventoryTable.tsx

@@ -27,6 +27,7 @@ import { Badge } from "@/Components/ui/badge";
 import { WarehouseInventory } from "@/types/warehouse";
 import { getSafetyStockStatus } from "@/utils/inventory";
 import { formatDate } from "@/utils/format";
+import { Can } from "@/Components/Permission/Can";
 
 interface InventoryTableProps {
     inventories: WarehouseInventory[];
@@ -280,15 +281,17 @@ export default function InventoryTable({
                                     >
                                         <Eye className="h-4 w-4" />
                                     </Button>
-                                    <Button
+                                    <Can permission="inventory.delete">
-                                        variant="outline"
+                                        <Button
-                                        size="sm"
+                                            variant="outline"
-                                        onClick={() => onDelete(item.id)}
+                                            size="sm"
-                                        title="刪除"
+                                            onClick={() => onDelete(item.id)}
-                                        className="button-outlined-error"
+                                            title="刪除"
-                                    >
+                                            className="button-outlined-error"
-                                        <Trash2 className="h-4 w-4" />
+                                        >
-                                    </Button>
+                                            <Trash2 className="h-4 w-4" />
+                                        </Button>
+                                    </Can>
                                 </div>
                             </TableCell>
                         </TableRow>

resources/js/Components/Warehouse/SafetyStock/SafetyStockList.tsx

@@ -15,6 +15,7 @@ import { Button } from "@/Components/ui/button";
 import { Badge } from "@/Components/ui/badge";
 import { SafetyStockSetting, WarehouseInventory } from "@/types/warehouse";
 import { calculateProductTotalStock, getSafetyStockStatus } from "@/utils/inventory";
+import { Can } from "@/Components/Permission/Can";
 
 interface SafetyStockListProps {
     settings: SafetyStockSetting[];
@@ -125,22 +126,24 @@ export default function SafetyStockList({
                                 </TableCell>
                                 <TableCell className="text-right">
                                     <div className="flex justify-end gap-2">
-                                        <Button
+                                        <Can permission="inventory.safety_stock">
-                                            variant="outline"
+                                            <Button
-                                            size="sm"
+                                                variant="outline"
-                                            onClick={() => onEdit(setting)}
+                                                size="sm"
-                                            className="button-outlined-primary"
+                                                onClick={() => onEdit(setting)}
-                                        >
+                                                className="button-outlined-primary"
-                                            <Pencil className="h-4 w-4" />
+                                            >
-                                        </Button>
+                                                <Pencil className="h-4 w-4" />
-                                        <Button
+                                            </Button>
-                                            variant="outline"
+                                            <Button
-                                            size="sm"
+                                                variant="outline"
-                                            onClick={() => onDelete(setting.id)}
+                                                size="sm"
-                                            className="button-outlined-error"
+                                                onClick={() => onDelete(setting.id)}
-                                        >
+                                                className="button-outlined-error"
-                                            <Trash2 className="h-4 w-4" />
+                                            >
-                                        </Button>
+                                                <Trash2 className="h-4 w-4" />
+                                            </Button>
+                                        </Can>
                                     </div>
                                 </TableCell>
                             </TableRow>

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -11,7 +11,6 @@ import {
     Warehouse,
     Truck,
     Contact2,
-    FileText,
     LogOut,
     User,
     ChevronDown,
@@ -20,7 +19,7 @@ import {
     Users
 } from "lucide-react";
 import { toast, Toaster } from "sonner";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Link, usePage } from "@inertiajs/react";
 import { cn } from "@/lib/utils";
 import BreadcrumbNav, { BreadcrumbItemType } from "@/Components/shared/BreadcrumbNav";
@@ -32,6 +31,8 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/Components/ui/dropdown-menu";
+import { usePermission } from "@/hooks/usePermission";
+import ApplicationLogo from "@/Components/ApplicationLogo";
 
 interface MenuItem {
     id: string;
@@ -39,6 +40,7 @@ interface MenuItem {
     icon?: React.ReactNode;
     route?: string;
     children?: MenuItem[];
+    permission?: string | string[];  // 所需權限（單一或多個，滿足任一即可）
 }
 
 export default function AuthenticatedLayout({
@@ -51,6 +53,7 @@ export default function AuthenticatedLayout({
     const { url, props } = usePage();
     // @ts-ignore
     const user = props.auth?.user || { name: 'Guest', username: 'guest' };
+    const { can, canAny } = usePermission();
     const [isCollapsed, setIsCollapsed] = useState(() => {
         if (typeof window !== "undefined") {
             return localStorage.getItem("sidebar-collapsed") === "true";
@@ -59,29 +62,34 @@ export default function AuthenticatedLayout({
     });
     const [isMobileOpen, setIsMobileOpen] = useState(false);
 
-    const menuItems: MenuItem[] = [
+    // 完整的菜單定義（含權限配置）
+    const allMenuItems: MenuItem[] = [
         {
             id: "dashboard",
             label: "儀表板",
             icon: <LayoutDashboard className="h-5 w-5" />,
             route: "/",
+            // 儀表板無需特定權限，所有登入使用者皆可存取
         },
         {
             id: "inventory-management",
             label: "商品與庫存管理",
             icon: <Boxes className="h-5 w-5" />,
+            permission: ["products.view", "warehouses.view"],  // 滿足任一即可看到此群組
             children: [
                 {
                     id: "product-management",
                     label: "商品資料管理",
                     icon: <Package className="h-4 w-4" />,
                     route: "/products",
+                    permission: "products.view",
                 },
                 {
                     id: "warehouse-management",
                     label: "倉庫管理",
                     icon: <Warehouse className="h-4 w-4" />,
                     route: "/warehouses",
+                    permission: "warehouses.view",
                 },
             ],
         },
@@ -89,12 +97,14 @@ export default function AuthenticatedLayout({
             id: "vendor-management",
             label: "廠商管理",
             icon: <Truck className="h-5 w-5" />,
+            permission: "vendors.view",
             children: [
                 {
                     id: "vendor-list",
                     label: "廠商資料管理",
                     icon: <Contact2 className="h-4 w-4" />,
                     route: "/vendors",
+                    permission: "vendors.view",
                 },
             ],
         },
@@ -102,12 +112,14 @@ export default function AuthenticatedLayout({
             id: "purchase-management",
             label: "採購管理",
             icon: <ShoppingCart className="h-5 w-5" />,
+            permission: "purchase_orders.view",
             children: [
                 {
                     id: "purchase-order-list",
-                    label: "管理採購單",
+                    label: "採購單管理",
-                    icon: <FileText className="h-4 w-4" />,
+                    icon: <ShoppingCart className="h-4 w-4" />,
                     route: "/purchase-orders",
+                    permission: "purchase_orders.view",
                 },
             ],
         },
@@ -115,23 +127,53 @@ export default function AuthenticatedLayout({
             id: "system-management",
             label: "系統管理",
             icon: <Settings className="h-5 w-5" />,
+            permission: ["users.view", "roles.view"],
             children: [
                 {
                     id: "user-management",
                     label: "使用者管理",
                     icon: <Users className="h-4 w-4" />,
                     route: "/admin/users",
+                    permission: "users.view",
                 },
                 {
                     id: "role-management",
                     label: "角色與權限",
                     icon: <Shield className="h-4 w-4" />,
                     route: "/admin/roles",
+                    permission: "roles.view",
                 },
             ],
         },
     ];
 
+    // 檢查單一項目是否有權限
+    const hasPermissionForItem = (item: MenuItem): boolean => {
+        if (!item.permission) return true;  // 無指定權限則預設有權限
+        if (Array.isArray(item.permission)) {
+            return canAny(item.permission);
+        }
+        return can(item.permission);
+    };
+
+    // 過濾菜單：移除無權限的項目，若父層所有子項目都無權限則隱藏父層
+    const menuItems = useMemo(() => {
+        return allMenuItems
+            .map((item) => {
+                // 如果有子項目，先過濾子項目
+                if (item.children && item.children.length > 0) {
+                    const filteredChildren = item.children.filter(hasPermissionForItem);
+                    // 若所有子項目都無權限，則隱藏整個群組
+                    if (filteredChildren.length === 0) return null;
+                    return { ...item, children: filteredChildren };
+                }
+                // 無子項目的單一選單，直接檢查權限
+                if (!hasPermissionForItem(item)) return null;
+                return item;
+            })
+            .filter((item): item is MenuItem => item !== null);
+    }, [can, canAny]);
+
     // 初始化狀態：優先讀取 localStorage
     const [expandedItems, setExpandedItems] = useState<string[]>(() => {
         try {
@@ -296,7 +338,7 @@ export default function AuthenticatedLayout({
                         {isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
                     </button>
                     <Link href="/" className="flex items-center gap-2">
-                        <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
+                        <ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
                         <span className="font-bold text-slate-900">小小冰室 ERP</span>
                     </Link>
                 </div>
@@ -342,12 +384,14 @@ export default function AuthenticatedLayout({
                 <div className="hidden h-16 items-center justify-between px-6 border-b border-slate-100">
                     {!isCollapsed && (
                         <Link href="/" className="flex items-center gap-2 group">
-                            <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg group-hover:scale-110 transition-transform">K</div>
+                            <ApplicationLogo className="w-8 h-8 rounded-lg object-contain group-hover:scale-110 transition-transform" />
                             <span className="font-extrabold text-[#01ab83] text-lg tracking-tight">小小冰室 ERP</span>
                         </Link>
                     )}
                     {isCollapsed && (
-                        <Link href="/" className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg mx-auto">K</Link>
+                        <Link href="/" className="w-8 h-8 mx-auto">
+                            <ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
+                        </Link>
                     )}
                 </div>
 
@@ -389,7 +433,7 @@ export default function AuthenticatedLayout({
             )}>
                 <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
                     <Link href="/" className="flex items-center gap-2">
-                        <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
+                        <ApplicationLogo className="w-8 h-8 rounded-lg object-contain" />
                         <span className="font-extrabold text-[#01ab83] text-lg">小小冰室 ERP</span>
                     </Link>
                     <button onClick={() => setIsMobileOpen(false)} className="p-2 text-slate-400">

resources/js/Pages/Admin/Role/Create.tsx

@@ -25,6 +25,7 @@ interface Props {
 export default function RoleCreate({ groupedPermissions }: Props) {
     const { data, setData, post, processing, errors } = useForm({
         name: '',
+        display_name: '',
         permissions: [] as string[],
     });
 
@@ -70,8 +71,9 @@ export default function RoleCreate({ groupedPermissions }: Props) {
             'edit': '編輯',
             'delete': '刪除',
             'publish': '發布',
-            'adjust': '調整',
+            'adjust': '新增 / 調整',
             'transfer': '調撥',
+            'safety_stock': '安全庫存設定',
         };
 
         return map[action] || action;
@@ -87,29 +89,34 @@ export default function RoleCreate({ groupedPermissions }: Props) {
         >
             <Head title="建立角色" />
 
-            <div className="p-8 max-w-7xl mx-auto">
+            <div className="container mx-auto p-6 max-w-7xl">
-                <form onSubmit={handleSubmit} className="space-y-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
-                    {/* Header */}
+                    {/* Header Area */}
-                    <div className="flex items-center justify-between">
+                    <div>
-                        <div>
+                        <Link href={route('roles.index')}>
-                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                            <Button
-                                <Shield className="h-6 w-6 text-[#01ab83]" />
+                                variant="outline"
-                                建立新角色
+                                type="button"
-                            </h1>
+                                className="gap-2 button-outlined-primary mb-2"
-                            <p className="text-gray-500 mt-1">
+                            >
-                                設定角色名稱並分配對應的操作權限
+                                <ArrowLeft className="h-4 w-4" />
-                            </p>
+                                返回角色與權限
-                        </div>
+                            </Button>
-                        <div className="flex items-center gap-3">
+                        </Link>
-                            <Link href={route('roles.index')}>
+
-                                <Button variant="outline" type="button">
+                        <div className="flex items-center justify-between">
-                                    <ArrowLeft className="h-4 w-4 mr-2" />
+                            <div>
-                                    取消
+                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                                </Button>
+                                    <Shield className="h-6 w-6 text-[#01ab83]" />
-                            </Link>
+                                    建立新角色
+                                </h1>
+                                <p className="text-gray-500 mt-1">
+                                    設定角色名稱並分配對應的操作權限
+                                </p>
+                            </div>
                             <Button
                                 type="submit"
-                                className="bg-[#01ab83] hover:bg-[#019a76]"
+                                className="button-filled-primary"
                                 disabled={processing}
                             >
                                 <Check className="h-4 w-4 mr-2" />
@@ -120,9 +127,25 @@ export default function RoleCreate({ groupedPermissions }: Props) {
 
                     {/* Role Name */}
                     <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-                        <div className="max-w-md space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div className="space-y-2">
-                                <Label htmlFor="name">角色名稱 (英文代號)</Label>
+                                <Label htmlFor="display_name">顯示名稱 (中文/自定義)</Label>
+                                <Input
+                                    id="display_name"
+                                    placeholder="例如：行政管理員"
+                                    value={data.display_name}
+                                    onChange={e => setData('display_name', e.target.value)}
+                                />
+                                {errors.display_name && (
+                                    <p className="text-sm text-red-500">{errors.display_name}</p>
+                                )}
+                                <p className="text-xs text-gray-500">
+                                    這是在介面上看到的名稱。
+                                </p>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="name">英文代號 (系統識別用)</Label>
                                 <Input
                                     id="name"
                                     placeholder="e.g. sales-manager"

resources/js/Pages/Admin/Role/Edit.tsx

@@ -21,6 +21,7 @@ interface GroupedPermission {
 interface Role {
     id: number;
     name: string;
+    display_name: string;
 }
 
 interface Props {
@@ -32,6 +33,7 @@ interface Props {
 export default function RoleEdit({ role, groupedPermissions, currentPermissions }: Props) {
     const { data, setData, put, processing, errors } = useForm({
         name: role.name,
+        display_name: role.display_name || '',
         permissions: currentPermissions,
     });
 
@@ -76,8 +78,9 @@ export default function RoleEdit({ role, groupedPermissions, currentPermissions
             'edit': '編輯',
             'delete': '刪除',
             'publish': '發布',
-            'adjust': '調整',
+            'adjust': '新增 / 調整',
             'transfer': '調撥',
+            'safety_stock': '安全庫存設定',
         };
 
         return map[action] || action;
@@ -93,29 +96,34 @@ export default function RoleEdit({ role, groupedPermissions, currentPermissions
         >
             <Head title={`編輯角色 - ${role.name}`} />
 
-            <div className="p-8 max-w-7xl mx-auto">
+            <div className="container mx-auto p-6 max-w-7xl">
-                <form onSubmit={handleSubmit} className="space-y-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
-                    {/* Header */}
+                    {/* Header Area */}
-                    <div className="flex items-center justify-between">
+                    <div>
-                        <div>
+                        <Link href={route('roles.index')}>
-                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                            <Button
-                                <Shield className="h-6 w-6 text-[#01ab83]" />
+                                variant="outline"
-                                編輯角色
+                                type="button"
-                            </h1>
+                                className="gap-2 button-outlined-primary mb-2"
-                            <p className="text-gray-500 mt-1">
+                            >
-                                修改角色資料與權限設定
+                                <ArrowLeft className="h-4 w-4" />
-                            </p>
+                                返回角色與權限
-                        </div>
+                            </Button>
-                        <div className="flex items-center gap-3">
+                        </Link>
-                            <Link href={route('roles.index')}>
+
-                                <Button variant="outline" type="button">
+                        <div className="flex items-center justify-between">
-                                    <ArrowLeft className="h-4 w-4 mr-2" />
+                            <div>
-                                    取消
+                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                                </Button>
+                                    <Shield className="h-6 w-6 text-[#01ab83]" />
-                            </Link>
+                                    編輯角色
+                                </h1>
+                                <p className="text-gray-500 mt-1">
+                                    修改角色資料與權限設定
+                                </p>
+                            </div>
                             <Button
                                 type="submit"
-                                className="bg-[#01ab83] hover:bg-[#019a76]"
+                                className="button-filled-primary"
                                 disabled={processing}
                             >
                                 <Check className="h-4 w-4 mr-2" />
@@ -126,15 +134,31 @@ export default function RoleEdit({ role, groupedPermissions, currentPermissions
 
                     {/* Role Name */}
                     <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
-                        <div className="max-w-md space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div className="space-y-2">
-                                <Label htmlFor="name">角色名稱 (英文代號)</Label>
+                                <Label htmlFor="display_name">顯示名稱 (中文/自定義)</Label>
+                                <Input
+                                    id="display_name"
+                                    placeholder="例如：行政管理員"
+                                    value={data.display_name}
+                                    onChange={e => setData('display_name', e.target.value)}
+                                />
+                                {errors.display_name && (
+                                    <p className="text-sm text-red-500">{errors.display_name}</p>
+                                )}
+                                <p className="text-xs text-gray-500">
+                                    這是在介面上看到的名稱。
+                                </p>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="name">英文代號 (系統識別用)</Label>
                                 <Input
                                     id="name"
                                     value={data.name}
                                     onChange={e => setData('name', e.target.value)}
                                     className="font-mono bg-gray-50"
-                                    disabled={role.name === 'super-admin'} // Should be handled by controller redirect, but extra safety
+                                    disabled={role.name === 'super-admin'}
                                 />
                                 {errors.name && (
                                     <p className="text-sm text-red-500">{errors.name}</p>

resources/js/Pages/Admin/Role/Index.tsx

@@ -1,5 +1,6 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head, Link, router } from '@inertiajs/react';
+import { cn } from "@/lib/utils";
 import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
 import { Button } from '@/Components/ui/button';
 import {
@@ -12,13 +13,30 @@ import {
 } from "@/Components/ui/table";
 import { format } from 'date-fns';
 import { toast } from 'sonner';
+import { Can } from '@/Components/Permission/Can';
+import { useState } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/Components/ui/dialog";
+
+interface User {
+    id: number;
+    name: string;
+    username: string;
+}
 
 interface Role {
     id: number;
     name: string;
+    display_name: string;
     users_count: number;
     permissions_count: number;
     created_at: string;
+    users?: User[];
 }
 
 interface Props {
@@ -26,6 +44,8 @@ interface Props {
 }
 
 export default function RoleIndex({ roles }: Props) {
+    const [selectedRole, setSelectedRole] = useState<Role | null>(null);
+
     const handleDelete = (id: number, name: string) => {
         if (confirm(`確定要刪除角色「${name}」嗎？此操作無法復原。`)) {
             router.delete(route('roles.destroy', id), {
@@ -34,17 +54,6 @@ export default function RoleIndex({ roles }: Props) {
         }
     };
 
-    const translateRoleName = (name: string) => {
-        const map: Record<string, string> = {
-            'super-admin': '超級管理員',
-            'admin': '管理員',
-            'warehouse-manager': '倉庫主管',
-            'purchaser': '採購人員',
-            'viewer': '檢視者',
-        };
-        return map[name] || name;
-    }
-
     return (
         <AuthenticatedLayout
             breadcrumbs={[
@@ -65,12 +74,14 @@ export default function RoleIndex({ roles }: Props) {
                             設定系統角色與功能存取權限
                         </p>
                     </div>
-                    <Link href={route('roles.create')}>
+                    <Can permission="roles.create">
-                        <Button className="button-filled-primary">
+                        <Link href={route('roles.create')}>
-                            <Plus className="h-4 w-4 mr-2" />
+                            <Button className="button-filled-primary">
-                            新增角色
+                                <Plus className="h-4 w-4 mr-2" />
-                        </Button>
+                                新增角色
-                    </Link>
+                            </Button>
+                        </Link>
+                    </Can>
                 </div>
 
                 <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
@@ -94,7 +105,7 @@ export default function RoleIndex({ roles }: Props) {
                                     </TableCell>
                                     <TableCell className="font-medium">
                                         <div className="flex items-center gap-2">
-                                            {translateRoleName(role.name)}
+                                            {role.display_name}
                                         </div>
                                     </TableCell>
                                     <TableCell className="text-gray-500 font-mono text-xs">
@@ -106,10 +117,19 @@ export default function RoleIndex({ roles }: Props) {
                                         </span>
                                     </TableCell>
                                     <TableCell className="text-center">
-                                        <div className="flex items-center justify-center gap-1 text-gray-600">
+                                        <button
-                                            <Users className="h-3 w-3" />
+                                            onClick={() => role.users_count > 0 && setSelectedRole(role)}
+                                            className={cn(
+                                                "flex items-center justify-center gap-1 w-full h-full py-2 rounded-md transition-colors",
+                                                role.users_count > 0
+                                                    ? "text-[#01ab83] hover:bg-[#01ab83]/10 font-bold"
+                                                    : "text-gray-400 cursor-default"
+                                            )}
+                                            title={role.users_count > 0 ? "點擊查看成員名單" : ""}
+                                        >
+                                            <Users className="h-3.5 w-3.5" />
                                             {role.users_count}
-                                        </div>
+                                        </button>
                                     </TableCell>
                                     <TableCell className="text-left text-gray-500 text-sm">
                                         {format(new Date(role.created_at), 'yyyy/MM/dd')}
@@ -117,26 +137,30 @@ export default function RoleIndex({ roles }: Props) {
                                     <TableCell className="text-center">
                                         {role.name !== 'super-admin' && (
                                             <div className="flex items-center justify-center gap-2">
-                                                <Link href={route('roles.edit', role.id)}>
+                                                <Can permission="roles.edit">
+                                                    <Link href={route('roles.edit', role.id)}>
+                                                        <Button
+                                                            variant="outline"
+                                                            size="sm"
+                                                            className="button-outlined-primary"
+                                                            title="編輯"
+                                                        >
+                                                            <Pencil className="h-4 w-4" />
+                                                        </Button>
+                                                    </Link>
+                                                </Can>
+                                                <Can permission="roles.delete">
                                                     <Button
                                                         variant="outline"
                                                         size="sm"
-                                                        className="button-outlined-primary"
+                                                        className="button-outlined-error"
-                                                        title="編輯"
+                                                        title="刪除"
+                                                        disabled={role.users_count > 0}
+                                                        onClick={() => handleDelete(role.id, role.display_name)}
                                                     >
-                                                        <Pencil className="h-4 w-4" />
+                                                        <Trash2 className="h-4 w-4" />
                                                     </Button>
-                                                </Link>
+                                                </Can>
-                                                <Button
-                                                    variant="outline"
-                                                    size="sm"
-                                                    className="button-outlined-error"
-                                                    title="刪除"
-                                                    disabled={role.users_count > 0}
-                                                    onClick={() => handleDelete(role.id, translateRoleName(role.name))}
-                                                >
-                                                    <Trash2 className="h-4 w-4" />
-                                                </Button>
                                             </div>
                                         )}
                                     </TableCell>
@@ -146,6 +170,54 @@ export default function RoleIndex({ roles }: Props) {
                     </Table>
                 </div>
             </div>
+
+            {/* 成員名單對話框 */}
+            <Dialog open={!!selectedRole} onOpenChange={(open) => !open && setSelectedRole(null)}>
+                <DialogContent className="sm:max-w-md">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <Users className="h-5 w-5 text-[#01ab83]" />
+                            {selectedRole?.display_name} - 成員名單
+                        </DialogTitle>
+                        <DialogDescription>
+                            目前共有 {selectedRole?.users_count} 位使用者具備此角色權限
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="max-h-[60vh] overflow-y-auto pr-2">
+                        {selectedRole?.users && selectedRole.users.length > 0 ? (
+                            <div className="space-y-3">
+                                {selectedRole.users.map((user) => (
+                                    <div
+                                        key={user.id}
+                                        className="flex items-center justify-between p-3 rounded-lg border border-gray-100 bg-gray-50/50"
+                                    >
+                                        <div className="flex items-center gap-3">
+                                            <div className="h-8 w-8 rounded-full bg-white border border-gray-200 flex items-center justify-center text-xs font-bold text-gray-500 shadow-sm">
+                                                {user.name.charAt(0)}
+                                            </div>
+                                            <div>
+                                                <p className="text-sm font-semibold text-gray-900">{user.name}</p>
+                                                <p className="text-xs text-gray-500 font-mono italic">@{user.username}</p>
+                                            </div>
+                                        </div>
+                                        <Link
+                                            href={route('users.edit', user.id)}
+                                            className="text-xs text-[#01ab83] hover:underline font-medium"
+                                        >
+                                            查看帳號
+                                        </Link>
+                                    </div>
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="text-center py-8 text-gray-500 italic">
+                                暫無成員
+                            </div>
+                        )}
+                    </div>
+                </DialogContent>
+            </Dialog>
         </AuthenticatedLayout>
     );
 }

resources/js/Pages/Admin/User/Create.tsx

@@ -8,7 +8,7 @@ import { Checkbox } from '@/Components/ui/checkbox';
 import { FormEvent } from 'react';
 
 interface Props {
-    roles: Record<string, string>; // ID -> Name map from pluck
+    roles: Record<string, string>; // Name (ID) -> DisplayName map from pluck
 }
 
 export default function UserCreate({ roles }: Props) {
@@ -34,16 +34,6 @@ export default function UserCreate({ roles }: Props) {
         }
     };
 
-    const translateRoleName = (name: string) => {
-        const map: Record<string, string> = {
-            'super-admin': '超級管理員',
-            'admin': '管理員',
-            'warehouse-manager': '倉庫主管',
-            'purchaser': '採購人員',
-            'viewer': '檢視者',
-        };
-        return map[name] || name;
-    }
 
     return (
         <AuthenticatedLayout
@@ -55,29 +45,34 @@ export default function UserCreate({ roles }: Props) {
         >
             <Head title="新增使用者" />
 
-            <div className="p-8 max-w-4xl mx-auto">
+            <div className="container mx-auto p-6 max-w-7xl">
-                <form onSubmit={handleSubmit} className="space-y-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
-                    {/* Header */}
+                    {/* Header Area */}
-                    <div className="flex items-center justify-between">
+                    <div>
-                        <div>
+                        <Link href={route('users.index')}>
-                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                            <Button
-                                <Users className="h-6 w-6 text-[#01ab83]" />
+                                variant="outline"
-                                新增使用者
+                                type="button"
-                            </h1>
+                                className="gap-2 button-outlined-primary mb-2"
-                            <p className="text-gray-500 mt-1">
+                            >
-                                建立新帳號並設定初始密碼與角色
+                                <ArrowLeft className="h-4 w-4" />
-                            </p>
+                                返回使用者管理
-                        </div>
+                            </Button>
-                        <div className="flex items-center gap-3">
+                        </Link>
-                            <Link href={route('users.index')}>
+
-                                <Button variant="outline" type="button">
+                        <div className="flex items-center justify-between">
-                                    <ArrowLeft className="h-4 w-4 mr-2" />
+                            <div>
-                                    取消
+                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                                </Button>
+                                    <Users className="h-6 w-6 text-[#01ab83]" />
-                            </Link>
+                                    新增使用者
+                                </h1>
+                                <p className="text-gray-500 mt-1">
+                                    建立新帳號並設定初始密碼與角色
+                                </p>
+                            </div>
                             <Button
                                 type="submit"
-                                className="bg-[#01ab83] hover:bg-[#019a76]"
+                                className="button-filled-primary"
                                 disabled={processing}
                             >
                                 <Check className="h-4 w-4 mr-2" />
@@ -170,22 +165,22 @@ export default function UserCreate({ roles }: Props) {
                             <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full">
                                 <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
                                 <div className="space-y-4">
-                                    {Object.entries(roles).map(([id, name]) => (
+                                    {Object.entries(roles).map(([roleName, displayName]) => (
-                                        <div key={id} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
+                                        <div key={roleName} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
                                             <Checkbox
-                                                id={`role-${id}`}
+                                                id={`role-${roleName}`}
-                                                checked={data.roles.includes(name)}
+                                                checked={data.roles.includes(roleName)}
-                                                onCheckedChange={() => toggleRole(name)}
+                                                onCheckedChange={() => toggleRole(roleName)}
                                             />
                                             <div className="grid gap-1.5 leading-none">
                                                 <label
-                                                    htmlFor={`role-${id}`}
+                                                    htmlFor={`role-${roleName}`}
                                                     className="text-sm font-medium leading-none cursor-pointer"
                                                 >
-                                                    {translateRoleName(name)}
+                                                    {displayName}
                                                 </label>
                                                 <p className="text-xs text-gray-500 font-mono">
-                                                    {name}
+                                                    {roleName}
                                                 </p>
                                             </div>
                                         </div>

resources/js/Pages/Admin/User/Edit.tsx

@@ -10,6 +10,7 @@ import { FormEvent } from 'react';
 interface Role {
     id: number;
     name: string;
+    display_name: string;
 }
 
 interface UserData {
@@ -48,16 +49,6 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
         }
     };
 
-    const translateRoleName = (name: string) => {
-        const map: Record<string, string> = {
-            'super-admin': '超級管理員',
-            'admin': '管理員',
-            'warehouse-manager': '倉庫主管',
-            'purchaser': '採購人員',
-            'viewer': '檢視者',
-        };
-        return map[name] || name;
-    }
 
     return (
         <AuthenticatedLayout
@@ -69,29 +60,34 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
         >
             <Head title={`編輯使用者 - ${user.name}`} />
 
-            <div className="p-8 max-w-4xl mx-auto">
+            <div className="container mx-auto p-6 max-w-7xl">
-                <form onSubmit={handleSubmit} className="space-y-8">
+                <form onSubmit={handleSubmit} className="space-y-6">
-                    {/* Header */}
+                    {/* Header Area */}
-                    <div className="flex items-center justify-between">
+                    <div>
-                        <div>
+                        <Link href={route('users.index')}>
-                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
+                            <Button
-                                <Users className="h-6 w-6 text-[#01ab83]" />
+                                variant="outline"
-                                編輯使用者
+                                type="button"
-                            </h1>
+                                className="gap-2 button-outlined-primary mb-2"
-                            <p className="text-gray-500 mt-1">
+                            >
-                                修改使用者資料、重設密碼或變更角色
+                                <ArrowLeft className="h-4 w-4" />
-                            </p>
+                                返回使用者管理
-                        </div>
+                            </Button>
-                        <div className="flex items-center gap-3">
+                        </Link>
-                            <Link href={route('users.index')}>
+
-                                <Button variant="outline" type="button">
+                        <div className="flex items-center justify-between">
-                                    <ArrowLeft className="h-4 w-4 mr-2" />
+                            <div>
-                                    取消
+                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                                </Button>
+                                    <Users className="h-6 w-6 text-[#01ab83]" />
-                            </Link>
+                                    編輯使用者
+                                </h1>
+                                <p className="text-gray-500 mt-1">
+                                    修改使用者資料、重設密碼或變更角色
+                                </p>
+                            </div>
                             <Button
                                 type="submit"
-                                className="bg-[#01ab83] hover:bg-[#019a76]"
+                                className="button-filled-primary"
                                 disabled={processing}
                             >
                                 <Check className="h-4 w-4 mr-2" />
@@ -203,7 +199,7 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
                                                     htmlFor={`role-${role.id}`}
                                                     className="text-sm font-medium leading-none cursor-pointer"
                                                 >
-                                                    {translateRoleName(role.name)}
+                                                    {role.display_name}
                                                 </label>
                                                 <p className="text-xs text-gray-500 font-mono">
                                                     {role.name}

resources/js/Pages/Admin/User/Index.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/Components/ui/table";
 import { format } from 'date-fns';
 import { toast } from 'sonner';
+import { Can } from '@/Components/Permission/Can';
 
 interface Role {
     id: number;
@@ -88,12 +89,14 @@ export default function UserIndex({ users }: Props) {
                             管理系統使用者帳號與角色分配
                         </p>
                     </div>
-                    <Link href={route('users.create')}>
+                    <Can permission="users.create">
-                        <Button className="button-filled-primary">
+                        <Link href={route('users.create')}>
-                            <Plus className="h-4 w-4 mr-2" />
+                            <Button className="button-filled-primary">
-                            新增使用者
+                                <Plus className="h-4 w-4 mr-2" />
-                        </Button>
+                                新增使用者
-                    </Link>
+                            </Button>
+                        </Link>
+                    </Can>
                 </div>
 
                 <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
@@ -151,25 +154,29 @@ export default function UserIndex({ users }: Props) {
                                     </TableCell>
                                     <TableCell className="text-center">
                                         <div className="flex items-center justify-center gap-2">
-                                            <Link href={route('users.edit', user.id)}>
+                                            <Can permission="users.edit">
+                                                <Link href={route('users.edit', user.id)}>
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="button-outlined-primary"
+                                                        title="編輯"
+                                                    >
+                                                        <Pencil className="h-4 w-4" />
+                                                    </Button>
+                                                </Link>
+                                            </Can>
+                                            <Can permission="users.delete">
                                                 <Button
                                                     variant="outline"
                                                     size="sm"
-                                                    className="button-outlined-primary"
+                                                    className="button-outlined-error"
-                                                    title="編輯"
+                                                    title="刪除"
+                                                    onClick={() => handleDelete(user.id, user.name)}
                                                 >
-                                                    <Pencil className="h-4 w-4" />
+                                                    <Trash2 className="h-4 w-4" />
                                                 </Button>
-                                            </Link>
+                                            </Can>
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                className="button-outlined-error"
-                                                title="刪除"
-                                                onClick={() => handleDelete(user.id, user.name)}
-                                            >
-                                                <Trash2 className="h-4 w-4" />
-                                            </Button>
                                         </div>
                                     </TableCell>
                                 </TableRow>

resources/js/Pages/Dashboard.tsx

@@ -79,8 +79,11 @@ export default function Dashboard({ stats }: Props) {
 
             <div className="p-8 max-w-7xl mx-auto">
                 <div className="mb-8">
-                    <h1 className="text-3xl font-bold text-grey-0 mb-2">系統總覽</h1>
+                    <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                    <p className="text-grey-2">歡迎回來，這是您的小小冰室 ERP 營運數據概況。</p>
+                        <TrendingUp className="h-6 w-6 text-[#01ab83]" />
+                        系統總覽
+                    </h1>
+                    <p className="text-gray-500 mt-1">歡迎回來，這是您的小小冰室 ERP 營運數據概況。</p>
                 </div>
 
                 {/* 主要數據卡片 */}

resources/js/Pages/Error/403.tsx

@@ -0,0 +1,36 @@
+import { Link } from "@inertiajs/react";
+import { ShieldAlert, Home } from "lucide-react";
+
+export default function Error403() {
+    return (
+        <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-6">
+            <div className="max-w-md w-full text-center">
+                {/* 圖示 */}
+                <div className="mb-6 flex justify-center">
+                    <div className="w-24 h-24 bg-red-100 rounded-full flex items-center justify-center">
+                        <ShieldAlert className="w-12 h-12 text-red-500" />
+                    </div>
+                </div>
+
+                {/* 標題 */}
+                <h1 className="text-3xl font-bold text-slate-900 mb-2">
+                    無此權限
+                </h1>
+
+                {/* 說明 */}
+                <p className="text-slate-600 mb-8">
+                    您沒有存取此頁面的權限，請洽系統管理員。
+                </p>
+
+                {/* 返回按鈕 */}
+                <Link
+                    href="/"
+                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary-main text-white rounded-lg hover:bg-primary-dark transition-colors"
+                >
+                    <Home className="w-5 h-5" />
+                    返回首頁
+                </Link>
+            </div>
+        </div>
+    );
+}

resources/js/Pages/Product/Index.tsx

@@ -12,6 +12,7 @@ import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 export interface Category {
   id: number;
@@ -217,26 +218,32 @@ export default function ProductManagement({ products, categories, units, filters
               className="w-full md:w-[180px]"
             />
 
-            {/* Add Button */}
+            {/* Action Buttons */}
             <div className="flex gap-2 w-full md:w-auto">
-              <Button
+              <Can permission="products.edit">
-                variant="outline"
+                <Button
-                onClick={() => setIsCategoryDialogOpen(true)}
+                  variant="outline"
-                className="flex-1 md:flex-none button-outlined-primary"
+                  onClick={() => setIsCategoryDialogOpen(true)}
-              >
+                  className="flex-1 md:flex-none button-outlined-primary"
-                管理分類
+                >
-              </Button>
+                  管理分類
-              <Button
+                </Button>
-                variant="outline"
+              </Can>
-                onClick={() => setIsUnitDialogOpen(true)}
+              <Can permission="products.edit">
-                className="flex-1 md:flex-none button-outlined-primary"
+                <Button
-              >
+                  variant="outline"
-                管理單位
+                  onClick={() => setIsUnitDialogOpen(true)}
-              </Button>
+                  className="flex-1 md:flex-none button-outlined-primary"
-              <Button onClick={handleAddProduct} className="flex-1 md:flex-none button-filled-primary">
+                >
-                <Plus className="mr-2 h-4 w-4" />
+                  管理單位
-                新增商品
+                </Button>
-              </Button>
+              </Can>
+              <Can permission="products.create">
+                <Button onClick={handleAddProduct} className="flex-1 md:flex-none button-filled-primary">
+                  <Plus className="mr-2 h-4 w-4" />
+                  新增商品
+                </Button>
+              </Can>
             </div>
           </div>
         </div>

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>
+                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                        <p className="text-gray-600">
+                            <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
+                        <Can permission="purchase_orders.create">
-                            onClick={handleNavigateToCreateOrder}
+                            <Button
-                            className="gap-2 button-filled-primary"
+                                onClick={handleNavigateToCreateOrder}
-                        >
+                                className="gap-2 button-filled-primary"
-                            <Plus className="h-4 w-4" />
+                            >
-                            建立採購單
+                                <Plus className="h-4 w-4" />
-                        </Button>
+                                建立採購單
+                            </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>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600">單號：{order.poNumber}</p>
+                                <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`}>

resources/js/Pages/Vendor/Index.tsx

@@ -8,6 +8,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 export interface Vendor {
     id: number;
@@ -160,10 +161,12 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
                         </div>
 
                         {/* Add Button */}
-                        <Button onClick={handleAddVendor} className="flex-1 md:flex-none button-filled-primary">
+                        <Can permission="vendors.create">
-                            <Plus className="mr-2 h-4 w-4" />
+                            <Button onClick={handleAddVendor} className="flex-1 md:flex-none button-filled-primary">
-                            新增廠商
+                                <Plus className="mr-2 h-4 w-4" />
-                        </Button>
+                                新增廠商
+                            </Button>
+                        </Can>
                     </div>
                 </div>
 

resources/js/Pages/Vendor/Show.tsx

@@ -4,7 +4,7 @@
 
 import { useState } from "react";
 import { Head, Link, router } from "@inertiajs/react";
-import { Phone, Mail, Plus, ArrowLeft } from "lucide-react";
+import { Phone, Mail, Plus, ArrowLeft, Contact2 } from "lucide-react";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Label } from "@/Components/ui/label";
 import { Button } from "@/Components/ui/button";
@@ -140,10 +140,15 @@ export default function VendorShow({ vendor, products }: ShowProps) {
                             返回廠商資料管理
                         </Button>
                     </Link>
-                    <h1 className="mb-2">廠商詳細資訊</h1>
+                    <div className="flex items-center justify-between">
-                    <p className="text-gray-600">
+                        <div>
-                        查看並管理供應商的詳細資料與供貨商品
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                    </p>
+                                <Contact2 className="h-6 w-6 text-[#01ab83]" />
+                                廠商詳細資訊
+                            </h1>
+                            <p className="text-gray-500 mt-1">查看並管理供應商的詳細資料與供貨商品</p>
+                        </div>
+                    </div>
                 </div>
 
                 {/* 基本資料 */}

resources/js/Pages/Warehouse/AddInventory.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState } from "react";
-import { Plus, Trash2, Calendar, ArrowLeft, Save } from "lucide-react";
+import { Plus, Trash2, Calendar, ArrowLeft, Save, Boxes } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
@@ -183,8 +183,11 @@ export default function AddInventoryPage({ warehouse, products }: Props) {
 
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">新增庫存（手動入庫）</h1>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600 font-medium">
+                                <Boxes className="h-6 w-6 text-[#01ab83]" />
+                                新增庫存（手動入庫）
+                            </h1>
+                            <p className="text-gray-500 mt-1">
                                 為 <span className="font-semibold text-gray-900">{warehouse.name}</span> 新增庫存記錄
                             </p>
                         </div>

resources/js/Pages/Warehouse/EditInventory.tsx

@@ -5,7 +5,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
-import { ArrowLeft, Save, Trash2 } from "lucide-react";
+import { ArrowLeft, Save, Trash2, Boxes } from "lucide-react";
 import { Warehouse, WarehouseInventory } from "@/types/warehouse";
 import { toast } from "sonner";
 import {
@@ -88,20 +88,13 @@ export default function EditInventory({ warehouse, inventory, transactions = []
                         </Button>
                     </Link >
 
-                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
-                        <span>商品與庫存管理</span>
-                        <span>/</span>
-                        <span>倉庫管理</span>
-                        <span>/</span>
-                        <span>庫存管理</span>
-                        <span>/</span>
-                        <span className="text-gray-900">編輯庫存品項</span>
-                    </div>
-
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">編輯庫存品項</h1>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600">
+                                <Boxes className="h-6 w-6 text-[#01ab83]" />
+                                編輯庫存品項
+                            </h1>
+                            <p className="text-gray-500 mt-1">
                                 倉庫：<span className="font-medium text-gray-900">{warehouse.name}</span>
                             </p>
                         </div>

resources/js/Pages/Warehouse/Index.tsx

@@ -12,6 +12,7 @@ import { Warehouse } from "@/types/warehouse";
 import Pagination from "@/Components/shared/Pagination";
 import { toast } from "sonner";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
 
 interface PageProps {
     warehouses: {
@@ -133,20 +134,24 @@ export default function WarehouseIndex({ warehouses, filters }: PageProps) {
 
                         {/* 操作按鈕 */}
                         <div className="flex gap-2 w-full md:w-auto">
-                            <Button
+                            <Can permission="inventory.transfer">
-                                onClick={handleAddTransferOrder}
+                                <Button
-                                className="flex-1 md:flex-initial button-outlined-primary"
+                                    onClick={handleAddTransferOrder}
-                            >
+                                    className="flex-1 md:flex-initial button-outlined-primary"
-                                <Plus className="mr-2 h-4 w-4" />
+                                >
-                                新增撥補單
+                                    <Plus className="mr-2 h-4 w-4" />
-                            </Button>
+                                    新增撥補單
-                            <Button
+                                </Button>
-                                onClick={handleAddWarehouse}
+                            </Can>
-                                className="flex-1 md:flex-initial button-filled-primary"
+                            <Can permission="warehouses.create">
-                            >
+                                <Button
-                                <Plus className="mr-2 h-4 w-4" />
+                                    onClick={handleAddWarehouse}
-                                新增倉庫
+                                    className="flex-1 md:flex-initial button-filled-primary"
-                            </Button>
+                                >
+                                    <Plus className="mr-2 h-4 w-4" />
+                                    新增倉庫
+                                </Button>
+                            </Can>
                         </div>
                     </div>
                 </div>

resources/js/Pages/Warehouse/Inventory.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo } from "react";
-import { ArrowLeft, PackagePlus, AlertTriangle, Shield } from "lucide-react";
+import { ArrowLeft, PackagePlus, AlertTriangle, Shield, Boxes } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, router } from "@inertiajs/react";
@@ -19,6 +19,7 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from "@/Components/ui/alert-dialog";
+import { Can } from "@/Components/Permission/Can";
 
 // 庫存頁面 Props
 interface Props {
@@ -107,8 +108,11 @@ export default function WarehouseInventoryPage({
 
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">庫存管理 - {warehouse.name}</h1>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600 font-medium">查看並管理此倉庫內的商品庫存數量與批號資訊</p>
+                                <Boxes className="h-6 w-6 text-[#01ab83]" />
+                                庫存管理 - {warehouse.name}
+                            </h1>
+                            <p className="text-gray-500 mt-1">查看並管理此倉庫內的商品庫存數量與批號資訊</p>
                         </div>
                     </div>
                 </div>
@@ -116,15 +120,17 @@ export default function WarehouseInventoryPage({
                 {/* 操作按鈕 (位於標題下方) */}
                 <div className="flex items-center gap-3 mb-6">
                     {/* 安全庫存設定按鈕 */}
-                    <Link href={route('warehouses.safety-stock.index', warehouse.id)}>
+                    <Can permission="inventory.safety_stock">
-                        <Button
+                        <Link href={route('warehouses.safety-stock.index', warehouse.id)}>
-                            variant="outline"
+                            <Button
-                            className="button-outlined-primary"
+                                variant="outline"
-                        >
+                                className="button-outlined-primary"
-                            <Shield className="mr-2 h-4 w-4" />
+                            >
-                            安全庫存設定
+                                <Shield className="mr-2 h-4 w-4" />
-                        </Button>
+                                安全庫存設定
-                    </Link>
+                            </Button>
+                        </Link>
+                    </Can>
 
                     {/* 庫存警告顯示 */}
                     <Button
@@ -139,14 +145,16 @@ export default function WarehouseInventoryPage({
                     </Button>
 
                     {/* 新增庫存按鈕 */}
-                    <Link href={route('warehouses.inventory.create', warehouse.id)}>
+                    <Can permission="inventory.adjust">
-                        <Button
+                        <Link href={route('warehouses.inventory.create', warehouse.id)}>
-                            className="button-filled-primary"
+                            <Button
-                        >
+                                className="button-filled-primary"
-                            <PackagePlus className="mr-2 h-4 w-4" />
+                            >
-                            新增庫存
+                                <PackagePlus className="mr-2 h-4 w-4" />
-                        </Button>
+                                新增庫存
-                    </Link>
+                            </Button>
+                        </Link>
+                    </Can>
                 </div>
 
                 {/* 篩選工具列 */}

resources/js/Pages/Warehouse/InventoryHistory.tsx

@@ -1,7 +1,7 @@
 import { Head, Link } from "@inertiajs/react";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Button } from "@/Components/ui/button";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, History } from "lucide-react";
 import { Warehouse } from "@/types/warehouse";
 import TransactionTable, { Transaction } from "@/Components/Warehouse/Inventory/TransactionTable";
 import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
@@ -21,7 +21,7 @@ export default function InventoryHistory({ warehouse, inventory, transactions }:
     return (
         <AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name, "庫存變動紀錄")}>
             <Head title={`庫存異動紀錄 - ${inventory.productName}`} />
-            <div className="container mx-auto p-6 max-w-4xl">
+            <div className="container mx-auto p-6 max-w-7xl">
                 {/* Header */}
                 <div className="mb-6">
                     <Link href={`/warehouses/${warehouse.id}/inventory`}>
@@ -34,18 +34,13 @@ export default function InventoryHistory({ warehouse, inventory, transactions }:
                         </Button>
                     </Link>
 
-                    <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
-                        <span>倉庫管理</span>
-                        <span>/</span>
-                        <span>庫存管理</span>
-                        <span>/</span>
-                        <span className="text-gray-900">庫存異動紀錄</span>
-                    </div>
-
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">庫存異動紀錄</h1>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600">
+                                <History className="h-6 w-6 text-[#01ab83]" />
+                                庫存異動紀錄
+                            </h1>
+                            <p className="text-gray-500 mt-1">
                                 商品：<span className="font-medium text-gray-900">{inventory.productName}</span>
                                 {inventory.productCode && <span className="text-gray-500 ml-2">({inventory.productCode})</span>}
                             </p>

resources/js/Pages/Warehouse/SafetyStockSettings.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useState, useEffect } from "react";
-import { ArrowLeft, Plus } from "lucide-react";
+import { ArrowLeft, Plus, Shield } from "lucide-react";
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, Link, router } from "@inertiajs/react";
@@ -14,6 +14,17 @@ import AddSafetyStockDialog from "@/Components/Warehouse/SafetyStock/AddSafetySt
 import EditSafetyStockDialog from "@/Components/Warehouse/SafetyStock/EditSafetyStockDialog";
 import { toast } from "sonner";
 import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";
+import { Can } from "@/Components/Permission/Can";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/Components/ui/alert-dialog";
 
 interface Props {
     warehouse: Warehouse;
@@ -31,6 +42,7 @@ export default function SafetyStockPage({
     const [settings, setSettings] = useState<SafetyStockSetting[]>(initialSettings);
     const [showAddDialog, setShowAddDialog] = useState(false);
     const [editingSetting, setEditingSetting] = useState<SafetyStockSetting | null>(null);
+    const [deleteId, setDeleteId] = useState<string | null>(null);
 
 
     // 當 Props 更新時同步本地 State
@@ -71,10 +83,16 @@ export default function SafetyStockPage({
         });
     };
 
-    const handleDelete = (id: string) => {
+    const handleDelete = () => {
-        router.delete(route('warehouses.safety-stock.destroy', [warehouse.id, id]), {
+        if (!deleteId) return;
+
+        router.delete(route('warehouses.safety-stock.destroy', [warehouse.id, deleteId]), {
             onSuccess: () => {
+                setDeleteId(null);
                 toast.success("已刪除安全庫存設定");
+            },
+            onError: () => {
+                toast.error("刪除失敗");
             }
         });
     };
@@ -101,18 +119,23 @@ export default function SafetyStockPage({
 
                     <div className="flex items-center justify-between">
                         <div>
-                            <h1 className="mb-2">安全庫存設定 - {warehouse.name}</h1>
+                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
-                            <p className="text-gray-600 font-medium">
+                                <Shield className="h-6 w-6 text-[#01ab83]" />
+                                安全庫存設定 - {warehouse.name}
+                            </h1>
+                            <p className="text-gray-500 mt-1">
                                 設定商品的安全庫存量，當庫存低於安全值時將發出警告
                             </p>
                         </div>
-                        <Button
+                        <Can permission="inventory.safety_stock">
-                            onClick={() => setShowAddDialog(true)}
+                            <Button
-                            className="button-filled-primary"
+                                onClick={() => setShowAddDialog(true)}
-                        >
+                                className="button-filled-primary"
-                            <Plus className="mr-2 h-4 w-4" />
+                            >
-                            新增安全庫存
+                                <Plus className="mr-2 h-4 w-4" />
-                        </Button>
+                                新增安全庫存
+                            </Button>
+                        </Can>
                     </div>
                 </div>
 
@@ -121,7 +144,7 @@ export default function SafetyStockPage({
                     settings={settings}
                     inventories={inventories}
                     onEdit={setEditingSetting}
-                    onDelete={handleDelete}
+                    onDelete={setDeleteId}
                 />
 
                 {/* 新增對話框 */}
@@ -143,6 +166,27 @@ export default function SafetyStockPage({
                         onSave={handleEdit}
                     />
                 )}
+
+                {/* 刪除確認對話框 */}
+                <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+                    <AlertDialogContent>
+                        <AlertDialogHeader>
+                            <AlertDialogTitle>確認刪除安全庫存設定</AlertDialogTitle>
+                            <AlertDialogDescription>
+                                您確定要刪除此項商品的安全庫存設定嗎？刪除後系統將不再針對此商品發出庫存不足警告。此動作無法復原。
+                            </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                            <AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
+                            <AlertDialogAction
+                                onClick={handleDelete}
+                                className="bg-red-600 hover:bg-red-700 text-white"
+                            >
+                                確認刪除
+                            </AlertDialogAction>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
             </div>
         </AuthenticatedLayout>
     );

routes/web.php

@@ -22,75 +22,126 @@ Route::post('/login', [LoginController::class, 'store']);
 Route::post('/logout', [LoginController::class, 'destroy'])->name('logout');
 
 Route::middleware('auth')->group(function () {
+    // 儀表板 - 所有登入使用者皆可存取
     Route::get('/', [DashboardController::class, 'index'])->name('dashboard');
 
-    // 類別管理 (用於商品對話框)
+    // 類別管理 (用於商品對話框) - 需要商品權限
-    Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');
+    Route::middleware('permission:products.view')->group(function () {
-    Route::post('/categories', [CategoryController::class, 'store'])->name('categories.store');
+        Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');
-    Route::put('/categories/{category}', [CategoryController::class, 'update'])->name('categories.update');
+        Route::post('/categories', [CategoryController::class, 'store'])->middleware('permission:products.create')->name('categories.store');
-    Route::delete('/categories/{category}', [CategoryController::class, 'destroy'])->name('categories.destroy');
+        Route::put('/categories/{category}', [CategoryController::class, 'update'])->middleware('permission:products.edit')->name('categories.update');
+        Route::delete('/categories/{category}', [CategoryController::class, 'destroy'])->middleware('permission:products.delete')->name('categories.destroy');
+    });
 
-    // 單位管理
+    // 單位管理 - 需要商品權限
-    Route::post('/units', [UnitController::class, 'store'])->name('units.store');
+    Route::middleware('permission:products.create|products.edit')->group(function () {
-    Route::put('/units/{unit}', [UnitController::class, 'update'])->name('units.update');
+        Route::post('/units', [UnitController::class, 'store'])->name('units.store');
-    Route::delete('/units/{unit}', [UnitController::class, 'destroy'])->name('units.destroy');
+        Route::put('/units/{unit}', [UnitController::class, 'update'])->name('units.update');
+        Route::delete('/units/{unit}', [UnitController::class, 'destroy'])->name('units.destroy');
+    });
 
     // 商品管理
-    Route::get('/products', [ProductController::class, 'index'])->name('products.index');
+    Route::middleware('permission:products.view')->group(function () {
-    Route::post('/products', [ProductController::class, 'store'])->name('products.store');
+        Route::get('/products', [ProductController::class, 'index'])->name('products.index');
-    Route::put('/products/{product}', [ProductController::class, 'update'])->name('products.update');
+        Route::post('/products', [ProductController::class, 'store'])->middleware('permission:products.create')->name('products.store');
-    Route::delete('/products/{product}', [ProductController::class, 'destroy'])->name('products.destroy');
+        Route::put('/products/{product}', [ProductController::class, 'update'])->middleware('permission:products.edit')->name('products.update');
+        Route::delete('/products/{product}', [ProductController::class, 'destroy'])->middleware('permission:products.delete')->name('products.destroy');
+    });
 
     // 廠商管理
-    Route::get('/vendors', [VendorController::class, 'index'])->name('vendors.index');
+    Route::middleware('permission:vendors.view')->group(function () {
-    Route::get('/vendors/{vendor}', [VendorController::class, 'show'])->name('vendors.show');
+        Route::get('/vendors', [VendorController::class, 'index'])->name('vendors.index');
-    Route::post('/vendors', [VendorController::class, 'store'])->name('vendors.store');
+        Route::get('/vendors/{vendor}', [VendorController::class, 'show'])->name('vendors.show');
-    Route::put('/vendors/{vendor}', [VendorController::class, 'update'])->name('vendors.update');
+        Route::post('/vendors', [VendorController::class, 'store'])->middleware('permission:vendors.create')->name('vendors.store');
-    Route::delete('/vendors/{vendor}', [VendorController::class, 'destroy'])->name('vendors.destroy');
+        Route::put('/vendors/{vendor}', [VendorController::class, 'update'])->middleware('permission:vendors.edit')->name('vendors.update');
+        Route::delete('/vendors/{vendor}', [VendorController::class, 'destroy'])->middleware('permission:vendors.delete')->name('vendors.destroy');
 
-    // 供貨商品相關路由
+        // 供貨商品相關路由
-    Route::post('/vendors/{vendor}/products', [VendorProductController::class, 'store'])->name('vendors.products.store');
+        Route::post('/vendors/{vendor}/products', [VendorProductController::class, 'store'])->middleware('permission:vendors.edit')->name('vendors.products.store');
-    Route::put('/vendors/{vendor}/products/{product}', [VendorProductController::class, 'update'])->name('vendors.products.update');
+        Route::put('/vendors/{vendor}/products/{product}', [VendorProductController::class, 'update'])->middleware('permission:vendors.edit')->name('vendors.products.update');
-    Route::delete('/vendors/{vendor}/products/{product}', [VendorProductController::class, 'destroy'])->name('vendors.products.destroy');
+        Route::delete('/vendors/{vendor}/products/{product}', [VendorProductController::class, 'destroy'])->middleware('permission:vendors.edit')->name('vendors.products.destroy');
+    });
 
     // 倉庫管理
-    Route::get('/warehouses', [WarehouseController::class, 'index'])->name('warehouses.index');
+    Route::middleware('permission:warehouses.view')->group(function () {
-    Route::post('/warehouses', [WarehouseController::class, 'store'])->name('warehouses.store');
+        Route::get('/warehouses', [WarehouseController::class, 'index'])->name('warehouses.index');
-    Route::put('/warehouses/{warehouse}', [WarehouseController::class, 'update'])->name('warehouses.update');
+        Route::post('/warehouses', [WarehouseController::class, 'store'])->middleware('permission:warehouses.create')->name('warehouses.store');
-    Route::delete('/warehouses/{warehouse}', [WarehouseController::class, 'destroy'])->name('warehouses.destroy');
+        Route::put('/warehouses/{warehouse}', [WarehouseController::class, 'update'])->middleware('permission:warehouses.edit')->name('warehouses.update');
+        Route::delete('/warehouses/{warehouse}', [WarehouseController::class, 'destroy'])->middleware('permission:warehouses.delete')->name('warehouses.destroy');
 
-    // 倉庫庫存管理
+        // 倉庫庫存管理 - 需要庫存權限
-    Route::get('/warehouses/{warehouse}/inventory', [InventoryController::class, 'index'])->name('warehouses.inventory.index');
+        Route::middleware('permission:inventory.view')->group(function () {
-    Route::get('/warehouses/{warehouse}/inventory/create', [InventoryController::class, 'create'])->name('warehouses.inventory.create');
+            Route::get('/warehouses/{warehouse}/inventory', [InventoryController::class, 'index'])->name('warehouses.inventory.index');
-    Route::post('/warehouses/{warehouse}/inventory', [InventoryController::class, 'store'])->name('warehouses.inventory.store');
+            Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/history', [InventoryController::class, 'history'])->name('warehouses.inventory.history');
-    Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/edit', [InventoryController::class, 'edit'])->name('warehouses.inventory.edit');
-    Route::put('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'update'])->name('warehouses.inventory.update');
-    Route::delete('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'destroy'])->name('warehouses.inventory.destroy');
-    Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/history', [InventoryController::class, 'history'])->name('warehouses.inventory.history');
             
-    // 安全庫存設定
+            Route::middleware('permission:inventory.adjust')->group(function () {
-    Route::get('/warehouses/{warehouse}/safety-stock', [SafetyStockController::class, 'index'])->name('warehouses.safety-stock.index');
+                Route::get('/warehouses/{warehouse}/inventory/create', [InventoryController::class, 'create'])->name('warehouses.inventory.create');
-    Route::post('/warehouses/{warehouse}/safety-stock', [SafetyStockController::class, 'store'])->name('warehouses.safety-stock.store');
+                Route::post('/warehouses/{warehouse}/inventory', [InventoryController::class, 'store'])->name('warehouses.inventory.store');
-    Route::put('/warehouses/{warehouse}/safety-stock/{inventory}', [SafetyStockController::class, 'update'])->name('warehouses.safety-stock.update');
+                Route::get('/warehouses/{warehouse}/inventory/{inventoryId}/edit', [InventoryController::class, 'edit'])->name('warehouses.inventory.edit');
-    Route::delete('/warehouses/{warehouse}/safety-stock/{inventory}', [SafetyStockController::class, 'destroy'])->name('warehouses.safety-stock.destroy');
+                Route::put('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'update'])->name('warehouses.inventory.update');
+                Route::delete('/warehouses/{warehouse}/inventory/{inventoryId}', [InventoryController::class, 'destroy'])->name('warehouses.inventory.destroy');
+            });
+        });
+
+        // 安全庫存設定
+        Route::middleware('permission:inventory.view')->group(function () {
+            Route::get('/warehouses/{warehouse}/safety-stock', [SafetyStockController::class, 'index'])->name('warehouses.safety-stock.index');
+            Route::middleware('permission:inventory.safety_stock')->group(function () {
+                Route::post('/warehouses/{warehouse}/safety-stock', [SafetyStockController::class, 'store'])->name('warehouses.safety-stock.store');
+                Route::put('/warehouses/{warehouse}/safety-stock/{inventory}', [SafetyStockController::class, 'update'])->name('warehouses.safety-stock.update');
+                Route::delete('/warehouses/{warehouse}/safety-stock/{inventory}', [SafetyStockController::class, 'destroy'])->name('warehouses.safety-stock.destroy');
+            });
+        });
+    });
 
     // 採購單管理
-    Route::get('/purchase-orders', [PurchaseOrderController::class, 'index'])->name('purchase-orders.index');
+    Route::middleware('permission:purchase_orders.view')->group(function () {
-    Route::get('/purchase-orders/create', [PurchaseOrderController::class, 'create'])->name('purchase-orders.create');
+        Route::get('/purchase-orders', [PurchaseOrderController::class, 'index'])->name('purchase-orders.index');
-    Route::post('/purchase-orders', [PurchaseOrderController::class, 'store'])->name('purchase-orders.store');
+        
-    Route::get('/purchase-orders/{id}', [PurchaseOrderController::class, 'show'])->name('purchase-orders.show');
+        Route::middleware('permission:purchase_orders.create')->group(function () {
-    Route::get('/purchase-orders/{id}/edit', [PurchaseOrderController::class, 'edit'])->name('purchase-orders.edit');
+            Route::get('/purchase-orders/create', [PurchaseOrderController::class, 'create'])->name('purchase-orders.create');
-    Route::put('/purchase-orders/{id}', [PurchaseOrderController::class, 'update'])->name('purchase-orders.update');
+            Route::post('/purchase-orders', [PurchaseOrderController::class, 'store'])->name('purchase-orders.store');
-    Route::delete('/purchase-orders/{id}', [PurchaseOrderController::class, 'destroy'])->name('purchase-orders.destroy');
+        });
+
+        Route::get('/purchase-orders/{id}', [PurchaseOrderController::class, 'show'])->name('purchase-orders.show');
+        
+        Route::get('/purchase-orders/{id}/edit', [PurchaseOrderController::class, 'edit'])->middleware('permission:purchase_orders.edit')->name('purchase-orders.edit');
+        Route::put('/purchase-orders/{id}', [PurchaseOrderController::class, 'update'])->middleware('permission:purchase_orders.edit')->name('purchase-orders.update');
+        Route::delete('/purchase-orders/{id}', [PurchaseOrderController::class, 'destroy'])->middleware('permission:purchase_orders.delete')->name('purchase-orders.destroy');
+    });
 
     // 撥補單 (在庫存調撥時使用)
-    Route::post('/transfer-orders', [TransferOrderController::class, 'store'])->name('transfer-orders.store');
+    Route::middleware('permission:inventory.transfer')->group(function () {
-    Route::get('/api/warehouses/{warehouse}/inventories', [TransferOrderController::class, 'getWarehouseInventories'])->name('api.warehouses.inventories');
+        Route::post('/transfer-orders', [TransferOrderController::class, 'store'])->name('transfer-orders.store');
+    });
+    Route::get('/api/warehouses/{warehouse}/inventories', [TransferOrderController::class, 'getWarehouseInventories'])
+        ->middleware('permission:inventory.view')
+        ->name('api.warehouses.inventories');
 
     // 系統管理
     Route::prefix('admin')->group(function () {
-        Route::resource('roles', RoleController::class);
+        Route::middleware('permission:roles.view')->group(function () {
-        Route::resource('users', UserController::class);
+            Route::get('/roles', [RoleController::class, 'index'])->name('roles.index');
+            Route::middleware('permission:roles.create')->group(function () {
+                Route::get('/roles/create', [RoleController::class, 'create'])->name('roles.create');
+                Route::post('/roles', [RoleController::class, 'store'])->name('roles.store');
+            });
+            Route::get('/roles/{role}/edit', [RoleController::class, 'edit'])->middleware('permission:roles.edit')->name('roles.edit');
+            Route::put('/roles/{role}', [RoleController::class, 'update'])->middleware('permission:roles.edit')->name('roles.update');
+            Route::delete('/roles/{role}', [RoleController::class, 'destroy'])->middleware('permission:roles.delete')->name('roles.destroy');
+        });
+        
+        Route::middleware('permission:users.view')->group(function () {
+            Route::get('/users', [UserController::class, 'index'])->name('users.index');
+            Route::middleware('permission:users.create')->group(function () {
+                Route::get('/users/create', [UserController::class, 'create'])->name('users.create');
+                Route::post('/users', [UserController::class, 'store'])->name('users.store');
+            });
+            Route::get('/users/{user}/edit', [UserController::class, 'edit'])->middleware('permission:users.edit')->name('users.edit');
+            Route::put('/users/{user}', [UserController::class, 'update'])->middleware('permission:users.edit')->name('users.update');
+            Route::delete('/users/{user}', [UserController::class, 'destroy'])->middleware('permission:users.delete')->name('users.destroy');
+        });
     });
 
 }); // End of auth middleware group
+