Build 2602261442: tidy users and invite layouts
This commit is contained in:
@@ -344,114 +344,128 @@ export default function UserDetailPage() {
|
||||
{!user ? (
|
||||
<div className="status-banner">No user data found.</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="user-detail-card">
|
||||
<div className="user-detail-layout">
|
||||
<div className="user-detail-identity">
|
||||
<div className="user-detail-page-grid">
|
||||
<div className="user-detail-main-column">
|
||||
<div className="admin-panel user-detail-panel">
|
||||
<div className="user-detail-panel-header">
|
||||
<div className="user-detail-title-row">
|
||||
<strong className="user-detail-name">{user.username}</strong>
|
||||
<span className={`user-grid-pill ${user.is_blocked ? 'is-blocked' : ''}`}>
|
||||
{user.is_blocked ? 'Blocked' : 'Active'}
|
||||
</span>
|
||||
<span className={`user-grid-pill ${user.is_expired ? 'is-blocked' : ''}`}>
|
||||
{user.is_expired ? 'Expired' : user.expires_at ? 'Expiry set' : 'No expiry'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-detail-meta-pills">
|
||||
<span className="user-detail-chip">
|
||||
Jellyseerr ID: {user.jellyseerr_user_id ?? user.id ?? 'Unknown'}
|
||||
</span>
|
||||
<span className="user-detail-chip">Role: {user.role}</span>
|
||||
<span className="user-detail-chip">Login type: {user.auth_provider || 'local'}</span>
|
||||
<span className="user-detail-chip">Profile: {user.profile_id ?? 'None'}</span>
|
||||
<span className={`user-detail-chip ${user.is_expired ? 'is-blocked' : ''}`}>
|
||||
Expiry: {user.expires_at ? formatDateTime(user.expires_at) : 'Never'}
|
||||
</span>
|
||||
<span className="user-detail-chip">Last login: {formatDateTime(user.last_login_at)}</span>
|
||||
<p className="lede">
|
||||
User identity, access state, and request history for this account.
|
||||
</p>
|
||||
</div>
|
||||
<div className="user-detail-meta-grid">
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Jellyseerr ID</span>
|
||||
<strong>{user.jellyseerr_user_id ?? user.id ?? 'Unknown'}</strong>
|
||||
</div>
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Role</span>
|
||||
<strong>{user.role}</strong>
|
||||
</div>
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Login type</span>
|
||||
<strong>{user.auth_provider || 'local'}</strong>
|
||||
</div>
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Assigned profile</span>
|
||||
<strong>{user.profile_id ?? 'None'}</strong>
|
||||
</div>
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Last login</span>
|
||||
<strong>{formatDateTime(user.last_login_at)}</strong>
|
||||
</div>
|
||||
<div className="user-detail-meta-item">
|
||||
<span className="label">Account expiry</span>
|
||||
<strong>{user.expires_at ? formatDateTime(user.expires_at) : 'Never'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-detail-controls">
|
||||
<div className="user-detail-controls-title">User controls</div>
|
||||
<div className="user-detail-actions">
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={user.role === 'admin'}
|
||||
onChange={(event) => updateUserRole(event.target.checked ? 'admin' : 'user')}
|
||||
/>
|
||||
<span>Make admin</span>
|
||||
</label>
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Boolean(user.auto_search_enabled ?? true)}
|
||||
disabled={user.role === 'admin'}
|
||||
onChange={(event) => updateAutoSearchEnabled(event.target.checked)}
|
||||
/>
|
||||
<span>Allow auto search/download</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => toggleUserBlock(!user.is_blocked)}
|
||||
>
|
||||
{user.is_blocked ? 'Allow access' : 'Block access'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="admin-panel user-detail-panel">
|
||||
<div className="user-detail-panel-header">
|
||||
<h2>Request statistics</h2>
|
||||
<p className="lede">Snapshot of request states and recent activity for this user.</p>
|
||||
</div>
|
||||
<div className="user-detail-grid">
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Total</span>
|
||||
<span className="value">{stats?.total ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-actions user-detail-actions--stacked">
|
||||
<label className="admin-select">
|
||||
<span>Assigned profile</span>
|
||||
<select
|
||||
value={profileSelection}
|
||||
onChange={(event) => setProfileSelection(event.target.value)}
|
||||
disabled={savingProfile}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{profiles.map((profile) => (
|
||||
<option key={profile.id} value={profile.id}>
|
||||
{profile.name}{profile.is_active === false ? ' (disabled)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={() => void applyProfileToUser()} disabled={savingProfile}>
|
||||
{savingProfile ? 'Applying...' : 'Apply profile defaults'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => {
|
||||
setProfileSelection('')
|
||||
void applyProfileToUser('')
|
||||
}}
|
||||
disabled={savingProfile}
|
||||
>
|
||||
Clear profile
|
||||
</button>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Ready</span>
|
||||
<span className="value">{stats?.ready ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-actions user-detail-actions--stacked">
|
||||
<label>
|
||||
<span className="user-bulk-label">Account expiry</span>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={expiryInput}
|
||||
onChange={(event) => setExpiryInput(event.target.value)}
|
||||
disabled={savingExpiry}
|
||||
/>
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={saveUserExpiry} disabled={savingExpiry}>
|
||||
{savingExpiry ? 'Saving...' : 'Save expiry'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={clearUserExpiry}
|
||||
disabled={savingExpiry}
|
||||
>
|
||||
Clear expiry
|
||||
</button>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Pending</span>
|
||||
<span className="value">{stats?.pending ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Approved</span>
|
||||
<span className="value">{stats?.approved ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Working</span>
|
||||
<span className="value">{stats?.working ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Partial</span>
|
||||
<span className="value">{stats?.partial ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Declined</span>
|
||||
<span className="value">{stats?.declined ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">In progress</span>
|
||||
<span className="value">{stats?.in_progress ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat user-detail-stat--wide">
|
||||
<span className="label">Last request</span>
|
||||
<span className="value">{formatDateTime(stats?.last_request_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="user-detail-side-column">
|
||||
<div className="admin-panel user-detail-panel">
|
||||
<div className="user-detail-panel-header">
|
||||
<h2>Access controls</h2>
|
||||
<p className="lede">Role, login access, and auto-download behavior.</p>
|
||||
</div>
|
||||
<div className="user-detail-control-stack">
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={user.role === 'admin'}
|
||||
onChange={(event) => updateUserRole(event.target.checked ? 'admin' : 'user')}
|
||||
/>
|
||||
<span>Make admin</span>
|
||||
</label>
|
||||
<label className="toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Boolean(user.auto_search_enabled ?? true)}
|
||||
disabled={user.role === 'admin'}
|
||||
onChange={(event) => updateAutoSearchEnabled(event.target.checked)}
|
||||
/>
|
||||
<span>Allow auto search/download</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => toggleUserBlock(!user.is_blocked)}
|
||||
>
|
||||
{user.is_blocked ? 'Allow access' : 'Block access'}
|
||||
</button>
|
||||
{user.role === 'admin' && (
|
||||
<div className="user-detail-helper">
|
||||
Admins always have auto search/download access.
|
||||
@@ -459,46 +473,80 @@ export default function UserDetailPage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-detail-grid">
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Total</span>
|
||||
<span className="value">{stats?.total ?? 0}</span>
|
||||
|
||||
<div className="admin-panel user-detail-panel">
|
||||
<div className="user-detail-panel-header">
|
||||
<h2>Profile defaults</h2>
|
||||
<p className="lede">Assign or clear an invite profile for this user.</p>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Ready</span>
|
||||
<span className="value">{stats?.ready ?? 0}</span>
|
||||
<div className="user-detail-actions user-detail-actions--stacked">
|
||||
<label className="admin-select">
|
||||
<span>Assigned profile</span>
|
||||
<select
|
||||
value={profileSelection}
|
||||
onChange={(event) => setProfileSelection(event.target.value)}
|
||||
disabled={savingProfile}
|
||||
>
|
||||
<option value="">None</option>
|
||||
{profiles.map((profile) => (
|
||||
<option key={profile.id} value={profile.id}>
|
||||
{profile.name}
|
||||
{profile.is_active === false ? ' (disabled)' : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={() => void applyProfileToUser()} disabled={savingProfile}>
|
||||
{savingProfile ? 'Applying...' : 'Apply profile defaults'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => {
|
||||
setProfileSelection('')
|
||||
void applyProfileToUser('')
|
||||
}}
|
||||
disabled={savingProfile}
|
||||
>
|
||||
Clear profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Pending</span>
|
||||
<span className="value">{stats?.pending ?? 0}</span>
|
||||
</div>
|
||||
|
||||
<div className="admin-panel user-detail-panel">
|
||||
<div className="user-detail-panel-header">
|
||||
<h2>Account expiry</h2>
|
||||
<p className="lede">Set a specific expiry date/time for this user account.</p>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Approved</span>
|
||||
<span className="value">{stats?.approved ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Working</span>
|
||||
<span className="value">{stats?.working ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Partial</span>
|
||||
<span className="value">{stats?.partial ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">Declined</span>
|
||||
<span className="value">{stats?.declined ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat">
|
||||
<span className="label">In progress</span>
|
||||
<span className="value">{stats?.in_progress ?? 0}</span>
|
||||
</div>
|
||||
<div className="user-detail-stat user-detail-stat--wide">
|
||||
<span className="label">Last request</span>
|
||||
<span className="value">{formatDateTime(stats?.last_request_at)}</span>
|
||||
<div className="user-detail-actions user-detail-actions--stacked">
|
||||
<label>
|
||||
<span className="user-bulk-label">Account expiry</span>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={expiryInput}
|
||||
onChange={(event) => setExpiryInput(event.target.value)}
|
||||
disabled={savingExpiry}
|
||||
/>
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={saveUserExpiry} disabled={savingExpiry}>
|
||||
{savingExpiry ? 'Saving...' : 'Save expiry'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={clearUserExpiry}
|
||||
disabled={savingExpiry}
|
||||
>
|
||||
Clear expiry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</AdminShell>
|
||||
|
||||
@@ -82,6 +82,7 @@ export default function UsersPage() {
|
||||
const [users, setUsers] = useState<AdminUser[]>([])
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [query, setQuery] = useState('')
|
||||
const [jellyseerrSyncStatus, setJellyseerrSyncStatus] = useState<string | null>(null)
|
||||
const [jellyseerrSyncBusy, setJellyseerrSyncBusy] = useState(false)
|
||||
const [jellyseerrResyncBusy, setJellyseerrResyncBusy] = useState(false)
|
||||
@@ -135,44 +136,6 @@ export default function UsersPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const toggleUserBlock = async (username: string, blocked: boolean) => {
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/admin/users/${encodeURIComponent(username)}/${blocked ? 'block' : 'unblock'}`,
|
||||
{ method: 'POST' }
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error('Update failed')
|
||||
}
|
||||
await loadUsers()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not update user access.')
|
||||
}
|
||||
}
|
||||
|
||||
const updateUserRole = async (username: string, role: string) => {
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(
|
||||
`${baseUrl}/admin/users/${encodeURIComponent(username)}/role`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ role }),
|
||||
}
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error('Update failed')
|
||||
}
|
||||
await loadUsers()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not update user role.')
|
||||
}
|
||||
}
|
||||
|
||||
const syncJellyseerrUsers = async () => {
|
||||
setJellyseerrSyncStatus(null)
|
||||
setJellyseerrSyncBusy(true)
|
||||
@@ -268,13 +231,35 @@ export default function UsersPage() {
|
||||
|
||||
const nonAdminUsers = users.filter((user) => user.role !== 'admin')
|
||||
const autoSearchEnabledCount = nonAdminUsers.filter((user) => user.autoSearchEnabled !== false).length
|
||||
const blockedCount = users.filter((user) => user.isBlocked).length
|
||||
const expiredCount = users.filter((user) => user.isExpired).length
|
||||
const adminCount = users.filter((user) => user.role === 'admin').length
|
||||
const normalizedQuery = query.trim().toLowerCase()
|
||||
const filteredUsers = normalizedQuery
|
||||
? users.filter((user) => {
|
||||
const fields = [
|
||||
user.username,
|
||||
user.role,
|
||||
user.authProvider || '',
|
||||
user.profileId != null ? String(user.profileId) : '',
|
||||
]
|
||||
return fields.some((field) => field.toLowerCase().includes(normalizedQuery))
|
||||
})
|
||||
: users
|
||||
const filteredCountLabel =
|
||||
filteredUsers.length === users.length
|
||||
? `${users.length} users`
|
||||
: `${filteredUsers.length} of ${users.length} users`
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
title="Users"
|
||||
subtitle="Manage who can use Magent."
|
||||
subtitle="Directory, access status, and request activity."
|
||||
actions={
|
||||
<>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" className="ghost-button" onClick={() => router.push('/admin/invites')}>
|
||||
Invite management
|
||||
</button>
|
||||
<button type="button" onClick={loadUsers}>
|
||||
Reload list
|
||||
</button>
|
||||
@@ -284,93 +269,156 @@ export default function UsersPage() {
|
||||
<button type="button" onClick={resyncJellyseerrUsers} disabled={jellyseerrResyncBusy}>
|
||||
{jellyseerrResyncBusy ? 'Resyncing Jellyseerr users...' : 'Resync Jellyseerr users'}
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</div>}
|
||||
<div className="user-bulk-toolbar">
|
||||
<div className="user-bulk-summary">
|
||||
<strong>Auto search/download</strong>
|
||||
<span>
|
||||
{autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled
|
||||
</span>
|
||||
<div className="admin-summary-grid user-summary-grid">
|
||||
<div className="admin-summary-tile">
|
||||
<span className="label">Total users</span>
|
||||
<strong>{users.length}</strong>
|
||||
<small>{adminCount} admin</small>
|
||||
</div>
|
||||
<div className="user-bulk-actions">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulkUpdateAutoSearch(true)}
|
||||
disabled={bulkAutoSearchBusy}
|
||||
>
|
||||
{bulkAutoSearchBusy ? 'Working...' : 'Enable for all users'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => bulkUpdateAutoSearch(false)}
|
||||
disabled={bulkAutoSearchBusy}
|
||||
>
|
||||
{bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
|
||||
</button>
|
||||
<div className="admin-summary-tile">
|
||||
<span className="label">Auto search</span>
|
||||
<strong>{autoSearchEnabledCount}</strong>
|
||||
<small>of {nonAdminUsers.length} non-admin users</small>
|
||||
</div>
|
||||
<div className="admin-summary-tile">
|
||||
<span className="label">Blocked</span>
|
||||
<strong>{blockedCount}</strong>
|
||||
<small>{blockedCount ? 'Needs review' : 'No blocked users'}</small>
|
||||
</div>
|
||||
<div className="admin-summary-tile">
|
||||
<span className="label">Expired</span>
|
||||
<strong>{expiredCount}</strong>
|
||||
<small>{expiredCount ? 'Access expired' : 'No expiries'}</small>
|
||||
</div>
|
||||
</div>
|
||||
{users.length === 0 ? (
|
||||
|
||||
<div className="user-directory-control-grid">
|
||||
<div className="admin-panel user-directory-search-panel">
|
||||
<div className="user-directory-panel-header">
|
||||
<div>
|
||||
<h2>Directory search</h2>
|
||||
<p className="lede">
|
||||
Filter by username, role, login provider, or assigned profile.
|
||||
</p>
|
||||
</div>
|
||||
<span className="small-pill">{filteredCountLabel}</span>
|
||||
</div>
|
||||
<div className="user-directory-toolbar">
|
||||
<div className="user-directory-search">
|
||||
<label>
|
||||
<span className="user-bulk-label">Search users</span>
|
||||
<input
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search username, login type, role, profile…"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-panel user-directory-bulk-panel">
|
||||
<div className="user-directory-panel-header">
|
||||
<div>
|
||||
<h2>Bulk controls</h2>
|
||||
<p className="lede">
|
||||
Auto search/download can be enabled or disabled for all non-admin users.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-bulk-toolbar">
|
||||
<div className="user-bulk-summary">
|
||||
<strong>Auto search/download</strong>
|
||||
<span>
|
||||
{autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-bulk-actions">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => bulkUpdateAutoSearch(true)}
|
||||
disabled={bulkAutoSearchBusy}
|
||||
>
|
||||
{bulkAutoSearchBusy ? 'Working...' : 'Enable for all users'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => bulkUpdateAutoSearch(false)}
|
||||
disabled={bulkAutoSearchBusy}
|
||||
>
|
||||
{bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{filteredUsers.length === 0 ? (
|
||||
<div className="status-banner">No users found yet.</div>
|
||||
) : (
|
||||
<div className="user-grid">
|
||||
{users.map((user) => (
|
||||
<div className="user-directory-list">
|
||||
<div className="user-directory-header">
|
||||
<span>User</span>
|
||||
<span>Access</span>
|
||||
<span>Requests</span>
|
||||
<span>Activity</span>
|
||||
</div>
|
||||
{filteredUsers.map((user) => (
|
||||
<Link
|
||||
key={user.username}
|
||||
className="user-grid-card"
|
||||
className="user-directory-row"
|
||||
href={`/users/${user.id}`}
|
||||
>
|
||||
<div className="user-grid-header">
|
||||
<div>
|
||||
<div className="user-directory-cell user-directory-cell--identity">
|
||||
<div className="user-directory-title-row">
|
||||
<strong>{user.username}</strong>
|
||||
<span className="user-grid-meta">{user.role}</span>
|
||||
</div>
|
||||
<span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
|
||||
{user.isBlocked ? 'Blocked' : 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-grid-subpills">
|
||||
<span className={`user-grid-pill ${user.autoSearchEnabled === false ? 'is-disabled' : ''}`}>
|
||||
Auto search {user.autoSearchEnabled === false ? 'Off' : 'On'}
|
||||
</span>
|
||||
<span className={`user-grid-pill ${user.isExpired ? 'is-blocked' : ''}`}>
|
||||
{user.expiresAt
|
||||
? `Expiry ${user.isExpired ? 'expired' : formatExpiry(user.expiresAt)}`
|
||||
: 'Expiry Never'}
|
||||
</span>
|
||||
<span className="user-grid-pill">
|
||||
Profile {user.profileId ?? 'None'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-grid-stats">
|
||||
<div>
|
||||
<span className="label">Total</span>
|
||||
<span className="value">{user.stats?.total ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Ready</span>
|
||||
<span className="value">{user.stats?.ready ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">Pending</span>
|
||||
<span className="value">{user.stats?.pending ?? 0}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="label">In progress</span>
|
||||
<span className="value">{user.stats?.in_progress ?? 0}</span>
|
||||
<div className="user-directory-subtext">
|
||||
Login: {user.authProvider || 'local'} • Profile: {user.profileId ?? 'None'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-grid-footer">
|
||||
<span className="meta">Login: {user.authProvider || 'local'}</span>
|
||||
<span className="meta">Last login: {formatLastLogin(user.lastLoginAt)}</span>
|
||||
<span className="meta">
|
||||
<div className="user-directory-cell">
|
||||
<div className="user-directory-pill-row">
|
||||
<span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
|
||||
{user.isBlocked ? 'Blocked' : 'Active'}
|
||||
</span>
|
||||
<span
|
||||
className={`user-grid-pill ${user.autoSearchEnabled === false ? 'is-disabled' : ''}`}
|
||||
>
|
||||
Auto {user.autoSearchEnabled === false ? 'Off' : 'On'}
|
||||
</span>
|
||||
<span className={`user-grid-pill ${user.isExpired ? 'is-blocked' : ''}`}>
|
||||
{user.expiresAt ? (user.isExpired ? 'Expired' : 'Expiry set') : 'No expiry'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="user-directory-subtext">
|
||||
{user.expiresAt ? `Expires: ${formatExpiry(user.expiresAt)}` : 'No account expiry'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-directory-cell">
|
||||
<div className="user-directory-stats-inline">
|
||||
<span><strong>{user.stats?.total ?? 0}</strong> total</span>
|
||||
<span><strong>{user.stats?.ready ?? 0}</strong> ready</span>
|
||||
<span><strong>{user.stats?.pending ?? 0}</strong> pending</span>
|
||||
<span><strong>{user.stats?.in_progress ?? 0}</strong> in progress</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-directory-cell">
|
||||
<div className="user-directory-subtext">
|
||||
Last login: {formatLastLogin(user.lastLoginAt)}
|
||||
</div>
|
||||
<div className="user-directory-subtext">
|
||||
Last request: {formatLastRequest(user.stats?.last_request_at)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="user-directory-row-chevron" aria-hidden="true">
|
||||
Open
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user