admin docs and layout refresh, build 2702261314
This commit is contained in:
@@ -250,112 +250,152 @@ export default function UsersPage() {
|
||||
filteredUsers.length === users.length
|
||||
? `${users.length} users`
|
||||
: `${filteredUsers.length} of ${users.length} users`
|
||||
const usersRail = (
|
||||
<div className="admin-rail-stack">
|
||||
<div className="admin-rail-card users-rail-summary">
|
||||
<div className="user-directory-panel-header">
|
||||
<div>
|
||||
<h2>Directory summary</h2>
|
||||
<p className="lede">A quick view of user access and account state.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="users-summary-grid">
|
||||
<div className="users-summary-card">
|
||||
<div className="users-summary-row">
|
||||
<span className="users-summary-label">Total users</span>
|
||||
<strong className="users-summary-value">{users.length}</strong>
|
||||
</div>
|
||||
<p className="users-summary-meta">{adminCount} admin accounts</p>
|
||||
</div>
|
||||
<div className="users-summary-card">
|
||||
<div className="users-summary-row">
|
||||
<span className="users-summary-label">Auto search</span>
|
||||
<strong className="users-summary-value">{autoSearchEnabledCount}</strong>
|
||||
</div>
|
||||
<p className="users-summary-meta">of {nonAdminUsers.length} non-admin users enabled</p>
|
||||
</div>
|
||||
<div className="users-summary-card">
|
||||
<div className="users-summary-row">
|
||||
<span className="users-summary-label">Blocked</span>
|
||||
<strong className="users-summary-value">{blockedCount}</strong>
|
||||
</div>
|
||||
<p className="users-summary-meta">
|
||||
{blockedCount ? 'Accounts currently blocked' : 'No blocked users'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="users-summary-card">
|
||||
<div className="users-summary-row">
|
||||
<span className="users-summary-label">Expired</span>
|
||||
<strong className="users-summary-value">{expiredCount}</strong>
|
||||
</div>
|
||||
<p className="users-summary-meta">
|
||||
{expiredCount ? 'Accounts with expired access' : 'No expiries'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
title="Users"
|
||||
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>
|
||||
<button type="button" onClick={syncJellyseerrUsers} disabled={jellyseerrSyncBusy}>
|
||||
{jellyseerrSyncBusy ? 'Syncing Jellyseerr users...' : 'Sync Jellyseerr users'}
|
||||
</button>
|
||||
<button type="button" onClick={resyncJellyseerrUsers} disabled={jellyseerrResyncBusy}>
|
||||
{jellyseerrResyncBusy ? 'Resyncing Jellyseerr users...' : 'Resync Jellyseerr users'}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
rail={usersRail}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</div>}
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
<div className="admin-panel users-page-toolbar">
|
||||
<div className="users-page-toolbar-grid">
|
||||
<div className="users-page-toolbar-group">
|
||||
<span className="users-page-toolbar-label">Directory actions</span>
|
||||
<div className="users-page-toolbar-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => bulkUpdateAutoSearch(false)}
|
||||
disabled={bulkAutoSearchBusy}
|
||||
onClick={() => router.push('/admin/invites')}
|
||||
>
|
||||
{bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
|
||||
Invite management
|
||||
</button>
|
||||
<button type="button" onClick={loadUsers}>
|
||||
Reload list
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="users-page-toolbar-group">
|
||||
<span className="users-page-toolbar-label">Jellyseerr sync</span>
|
||||
<div className="users-page-toolbar-actions">
|
||||
<button type="button" onClick={syncJellyseerrUsers} disabled={jellyseerrSyncBusy}>
|
||||
{jellyseerrSyncBusy ? 'Syncing Jellyseerr users...' : 'Sync Jellyseerr users'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={resyncJellyseerrUsers}
|
||||
disabled={jellyseerrResyncBusy}
|
||||
>
|
||||
{jellyseerrResyncBusy ? 'Resyncing Jellyseerr users...' : 'Resync Jellyseerr users'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</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 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>
|
||||
{filteredUsers.length === 0 ? (
|
||||
|
||||
Reference in New Issue
Block a user