import { useState } from 'react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, Link, router } from '@inertiajs/react'; import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown } 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; sort_by?: string; sort_order?: 'asc' | 'desc'; }; } 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'), { ...filters, per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; const handleSort = (field: string) => { let newSortBy: string | undefined = field; let newSortOrder: 'asc' | 'desc' | undefined = 'asc'; if (filters.sort_by === field) { if (filters.sort_order === 'asc') { newSortOrder = 'desc'; } else { newSortBy = undefined; newSortOrder = undefined; } } router.get( route('users.index'), { ...filters, sort_by: newSortBy, sort_order: newSortOrder }, { preserveState: true, replace: true } ); }; const SortIcon = ({ field }: { field: string }) => { if (filters.sort_by !== field) { return ; } if (filters.sort_order === "asc") { return ; } return ; }; 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}

)) ) : ( 未分配角色 )}

{format(new Date(user.created_at), 'yyyy/MM/dd')}

))}

{/* 分頁元件 - 統一樣式 */}

每頁顯示筆

); }