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

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')}>
-                        <Button className="button-filled-primary">
-                            <Plus className="h-4 w-4 mr-2" />
-                            新增使用者
-                        </Button>
-                    </Link>
+                    <Can permission="users.create">
+                        <Link href={route('users.create')}>
+                            <Button className="button-filled-primary">
+                                <Plus className="h-4 w-4 mr-2" />
+                                新增使用者
+                            </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"
-                                                    title="編輯"
+                                                    className="button-outlined-error"
+                                                    title="刪除"
+                                                    onClick={() => handleDelete(user.id, user.name)}
                                                 >
-                                                    <Pencil className="h-4 w-4" />
+                                                    <Trash2 className="h-4 w-4" />
                                                 </Button>
-                                            </Link>
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                className="button-outlined-error"
-                                                title="刪除"
-                                                onClick={() => handleDelete(user.id, user.name)}
-                                            >
-                                                <Trash2 className="h-4 w-4" />
-                                            </Button>
+                                            </Can>
                                         </div>
                                     </TableCell>
                                 </TableRow>