import React, { useState } from 'react' import { Head, router, usePage } from '@inertiajs/react' import AdminLayout from '../../../Layouts/AdminLayout' const ROLE_BADGE = { user: 'bg-slate-500/20 text-slate-300', creator: 'bg-sky-500/20 text-sky-300', moderator: 'bg-violet-500/20 text-violet-300', editorial: 'bg-teal-500/20 text-teal-300', manager: 'bg-amber-500/20 text-amber-300', admin: 'bg-rose-500/20 text-rose-300', } function RoleBadge({ role }) { return ( {role} ) } function RoleDropdown({ user, roles, currentUserIsAdmin }) { const [open, setOpen] = useState(false) const [pending, setPending] = useState(false) const handleSelect = (newRole) => { if (newRole === user.role) { setOpen(false); return } setPending(true) router.patch(`/admin/users/${user.id}/role`, { role: newRole }, { preserveScroll: true, onFinish: () => { setPending(false); setOpen(false) }, }) } const availableRoles = currentUserIsAdmin ? roles : roles.filter((r) => r.value !== 'admin') return (
{open && ( <>
setOpen(false)} />
{availableRoles.map((r) => ( ))}
)}
) } export default function UsersIndex({ users, filters, roles }) { const { props } = usePage() const currentUserIsAdmin = Boolean(props.auth?.user?.is_admin) const flash = props.flash ?? {} const handleSearch = (e) => { e.preventDefault() const search = e.target.elements.search.value router.get('/moderation/users', { search, role: filters.role }, { preserveState: true }) } const handleRoleFilter = (role) => { router.get('/moderation/users', { search: filters.search, role }, { preserveState: true }) } return ( {/* Flash messages */} {flash.success && (
{flash.success}
)} {flash.error && (
{flash.error}
)} {/* Search + filter bar */}
{/* Role filter chips */}
{[{ value: 'all', label: 'All' }, ...roles].map((r) => ( ))}
{/* Users table */}
{users.data.length === 0 && ( )} {users.data.map((user) => ( ))}
User Email Role Joined Actions
No users found.
{user.name?.[0] ?? '?'}

{user.name}

{user.username &&

@{user.username}

}
{user.email} {new Date(user.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
{/* Pagination */} {users.last_page > 1 && (

Showing {users.from}–{users.to} of {users.total} users

{users.links.map((link, i) => ( link.url ? (
)}
) }