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'; interface Role { id: number; name: string; } interface User { id: number; name: string; email: string; username: string | null; created_at: string; roles: Role[]; } interface Pagination { current_page: number; last_page: number; per_page: number; total: number; links: { url: string | null; label: string; active: boolean; }[]; } interface Props { users: { data: User[]; meta?: Pagination; // Standard Laravel Pagination resource structure, but if simple paginate() it's direct properties } & Pagination; // paginate() returns object with data and meta properties mixed } export default function UserIndex({ users }: Props) { const handleDelete = (id: number, name: string) => { if (confirm(`確定要刪除使用者「${name}」嗎？此操作無法復原。`)) { router.delete(route('users.destroy', id), { onSuccess: () => toast.success('使用者已刪除'), onError: () => toast.error('刪除失敗，請檢查權限'), }); } }; const translateRoleName = (name: string) => { const map: Record = { 'super-admin': '超級管理員', 'admin': '管理員', 'warehouse-manager': '倉庫主管', 'purchaser': '採購人員', 'viewer': '檢視者', }; return map[name] || name; } return (

使用者管理

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

使用者 角色 加入時間 操作 {users.data.map((user) => (
{user.name.charAt(0).toUpperCase()}

{user.name}

{user.email}
{user.roles.length > 0 ? ( user.roles.map(role => ( {role.name === 'super-admin' && } {translateRoleName(role.name)} )) ) : ( 未分配角色 )}
{format(new Date(user.created_at), 'yyyy/MM/dd')}
))}
{/* Pagination - Simple implementation */} {users.links && users.links.length > 3 && (
{/* Mobile pagination */}

顯示第 {users.current_page} 頁

)}
); } // Helper for conditional class names if not imported function cn(...classes: (string | undefined | null | false)[]) { return classes.filter(Boolean).join(' '); }