import { useState } from 'react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Users, Plus, Pencil, Trash2, Mail, Shield } from 'lucide-react'; import { Button } from '@/Components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { format } from 'date-fns'; import { toast } from 'sonner'; import { Can } from '@/Components/Permission/Can'; import { cn } from "@/lib/utils"; import Pagination from "@/Components/shared/Pagination"; import { SearchableSelect } from "@/Components/ui/searchable-select"; interface Role { id: number; name: string; display_name: string; } interface User { id: number; name: string; email: string; username: string | null; created_at: string; roles: Role[]; } interface PaginationLinks { url: string | null; label: string; active: boolean; } interface Props { users: { data: User[]; from: number; links: PaginationLinks[]; }; filters: { per_page?: string; }; } export default function UserIndex({ users, filters }: Props) { const [perPage, setPerPage] = useState(filters.per_page || "10"); const handleDelete = (id: number, name: string) => { if (confirm(`確定要刪除使用者「${name}」嗎？此操作無法復原。`)) { router.delete(route('users.destroy', id), { onSuccess: () => toast.success('使用者已刪除'), onError: () => toast.error('刪除失敗，請檢查權限'), }); } }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route('users.index'), { per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; return (

使用者管理

管理系統使用者帳號與角色分配

# 使用者 角色 加入時間 操作 {users.data.map((user, index) => ( {users.from + index}

{user.name}

{user.email}
{user.roles.length > 0 ? ( user.roles.map(role => (
{role.name === 'super-admin' && } {role.display_name}
{role.name}
)) ) : ( 未分配角色 )}
{format(new Date(user.created_at), 'yyyy/MM/dd')}
))}
{/* 分頁元件 - 統一樣式 */}
每頁顯示 筆
); }