Build 2602261536: refine invite layouts and tighten UI
This commit is contained in:
@@ -472,13 +472,6 @@ export default function AdminInviteManagementPage() {
|
||||
<AdminShell
|
||||
title="Invite management"
|
||||
subtitle="Manage invite links, reusable profiles, and blanket invite-related defaults."
|
||||
actions={
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={loadData} disabled={loading}>
|
||||
{loading ? 'Loading…' : 'Reload'}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
@@ -556,6 +549,9 @@ export default function AdminInviteManagementPage() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="admin-inline-actions invite-admin-tab-actions">
|
||||
<button type="button" className="ghost-button" onClick={loadData} disabled={loading}>
|
||||
{loading ? 'Loading…' : 'Reload'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
@@ -685,102 +681,8 @@ export default function AdminInviteManagementPage() {
|
||||
)}
|
||||
|
||||
{activeTab === 'profiles' && (
|
||||
<div className="admin-split-grid">
|
||||
<div className="admin-panel">
|
||||
<h2>{profileEditingId == null ? 'Create profile' : 'Edit profile'}</h2>
|
||||
<p className="lede">
|
||||
Profiles define defaults applied when a user signs up using an invite.
|
||||
</p>
|
||||
<form onSubmit={saveProfile} className="admin-form compact-form">
|
||||
<label>
|
||||
Profile name
|
||||
<input
|
||||
value={profileForm.name}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, name: e.target.value }))
|
||||
}
|
||||
placeholder="Standard users"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<textarea
|
||||
rows={3}
|
||||
value={profileForm.description}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, description: e.target.value }))
|
||||
}
|
||||
placeholder="Default invite settings for normal users"
|
||||
/>
|
||||
</label>
|
||||
<div className="admin-fields-grid">
|
||||
<label>
|
||||
Role
|
||||
<select
|
||||
value={profileForm.role}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
role: e.target.value as 'user' | 'admin',
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Account expiry (days)
|
||||
<input
|
||||
value={profileForm.account_expires_days}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
account_expires_days: e.target.value,
|
||||
}))
|
||||
}
|
||||
inputMode="numeric"
|
||||
placeholder="Blank = no expiry"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={profileForm.auto_search_enabled}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
auto_search_enabled: e.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
Allow auto search/download by default
|
||||
</label>
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={profileForm.is_active}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, is_active: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
Profile is active
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="submit" disabled={profileSaving}>
|
||||
{profileSaving ? 'Saving…' : profileEditingId == null ? 'Create profile' : 'Save profile'}
|
||||
</button>
|
||||
{profileEditingId != null && (
|
||||
<button type="button" className="ghost-button" onClick={resetProfileEditor}>
|
||||
Cancel edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="admin-panel">
|
||||
<div className="invite-admin-stack">
|
||||
<div className="admin-panel invite-admin-list-panel">
|
||||
<h2>Profiles</h2>
|
||||
<p className="lede">Assign these to invites or apply them to all users using the blanket controls above.</p>
|
||||
{loading ? (
|
||||
@@ -827,12 +729,187 @@ export default function AdminInviteManagementPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="admin-panel invite-admin-form-panel">
|
||||
<h2>{profileEditingId == null ? 'Create profile' : 'Edit profile'}</h2>
|
||||
<p className="lede">
|
||||
Profiles define defaults applied when a user signs up using an invite.
|
||||
</p>
|
||||
<form onSubmit={saveProfile} className="admin-form compact-form invite-form-layout profile-form-layout">
|
||||
<div className="invite-form-row">
|
||||
<div className="invite-form-row-label">
|
||||
<span>Identity</span>
|
||||
<small>Name and description used to identify the reusable profile.</small>
|
||||
</div>
|
||||
<div className="invite-form-row-control">
|
||||
<label>
|
||||
<span>Profile name</span>
|
||||
<input
|
||||
value={profileForm.name}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, name: e.target.value }))
|
||||
}
|
||||
placeholder="Standard users"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="invite-form-row">
|
||||
<div className="invite-form-row-label">
|
||||
<span>Description</span>
|
||||
<small>Optional note to explain when this profile should be used.</small>
|
||||
</div>
|
||||
<div className="invite-form-row-control">
|
||||
<textarea
|
||||
rows={3}
|
||||
value={profileForm.description}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, description: e.target.value }))
|
||||
}
|
||||
placeholder="Default invite settings for normal users"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="invite-form-row">
|
||||
<div className="invite-form-row-label">
|
||||
<span>Defaults</span>
|
||||
<small>Base role and optional account expiry applied from this profile.</small>
|
||||
</div>
|
||||
<div className="invite-form-row-control invite-form-row-grid">
|
||||
<label>
|
||||
<span>Role</span>
|
||||
<select
|
||||
value={profileForm.role}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
role: e.target.value as 'user' | 'admin',
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Account expiry (days)</span>
|
||||
<input
|
||||
value={profileForm.account_expires_days}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
account_expires_days: e.target.value,
|
||||
}))
|
||||
}
|
||||
inputMode="numeric"
|
||||
placeholder="Blank = no expiry"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="invite-form-row">
|
||||
<div className="invite-form-row-label">
|
||||
<span>Status</span>
|
||||
<small>Default auto-download behavior and whether the profile is active.</small>
|
||||
</div>
|
||||
<div className="invite-form-row-control invite-form-row-control--stacked">
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={profileForm.auto_search_enabled}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({
|
||||
...current,
|
||||
auto_search_enabled: e.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
Allow auto search/download by default
|
||||
</label>
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={profileForm.is_active}
|
||||
onChange={(e) =>
|
||||
setProfileForm((current) => ({ ...current, is_active: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
Profile is active
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="submit" disabled={profileSaving}>
|
||||
{profileSaving ? 'Saving…' : profileEditingId == null ? 'Create profile' : 'Save profile'}
|
||||
</button>
|
||||
{profileEditingId != null && (
|
||||
<button type="button" className="ghost-button" onClick={resetProfileEditor}>
|
||||
Cancel edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'invites' && (
|
||||
<div className="admin-split-grid">
|
||||
<div className="admin-panel">
|
||||
<div className="invite-admin-stack">
|
||||
<div className="admin-panel invite-admin-list-panel">
|
||||
<h2>Invite links</h2>
|
||||
<p className="lede">Copy and share invite links. Profiles can be applied per invite.</p>
|
||||
{loading ? (
|
||||
<div className="status-banner">Loading invites…</div>
|
||||
) : invites.length === 0 ? (
|
||||
<div className="status-banner">No invites created yet.</div>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
{invites.map((invite) => (
|
||||
<div key={invite.id} className="admin-list-item">
|
||||
<div className="admin-list-item-main">
|
||||
<div className="admin-list-item-title-row">
|
||||
<code className="invite-code">{invite.code}</code>
|
||||
<span className={`small-pill ${invite.is_usable ? '' : 'is-muted'}`}>
|
||||
{invite.is_usable ? 'Usable' : 'Unavailable'}
|
||||
</span>
|
||||
{invite.profile?.name && <span className="small-pill">{invite.profile.name}</span>}
|
||||
</div>
|
||||
{invite.label && <p className="admin-list-item-text">{invite.label}</p>}
|
||||
{invite.description && (
|
||||
<p className="admin-list-item-text admin-list-item-text--muted">
|
||||
{invite.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="admin-meta-row">
|
||||
<span>
|
||||
Uses: {invite.use_count}
|
||||
{typeof invite.max_uses === 'number' ? ` / ${invite.max_uses}` : ''}
|
||||
</span>
|
||||
<span>Remaining: {invite.remaining_uses ?? 'Unlimited'}</span>
|
||||
<span>Expires: {formatDate(invite.expires_at)}</span>
|
||||
<span>Created: {formatDate(invite.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" className="ghost-button" onClick={() => copyInviteLink(invite)}>
|
||||
Copy link
|
||||
</button>
|
||||
<button type="button" className="ghost-button" onClick={() => editInvite(invite)}>
|
||||
Edit
|
||||
</button>
|
||||
<button type="button" onClick={() => deleteInvite(invite)}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="admin-panel invite-admin-form-panel">
|
||||
<h2>{inviteEditingId == null ? 'Create invite' : 'Edit invite'}</h2>
|
||||
<p className="lede">
|
||||
Link an invite to a profile to apply account defaults at sign-up.
|
||||
@@ -985,57 +1062,6 @@ export default function AdminInviteManagementPage() {
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="admin-panel">
|
||||
<h2>Invite links</h2>
|
||||
<p className="lede">Copy and share invite links. Profiles can be applied per invite.</p>
|
||||
{loading ? (
|
||||
<div className="status-banner">Loading invites…</div>
|
||||
) : invites.length === 0 ? (
|
||||
<div className="status-banner">No invites created yet.</div>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
{invites.map((invite) => (
|
||||
<div key={invite.id} className="admin-list-item">
|
||||
<div className="admin-list-item-main">
|
||||
<div className="admin-list-item-title-row">
|
||||
<code className="invite-code">{invite.code}</code>
|
||||
<span className={`small-pill ${invite.is_usable ? '' : 'is-muted'}`}>
|
||||
{invite.is_usable ? 'Usable' : 'Unavailable'}
|
||||
</span>
|
||||
{invite.profile?.name && <span className="small-pill">{invite.profile.name}</span>}
|
||||
</div>
|
||||
{invite.label && <p className="admin-list-item-text">{invite.label}</p>}
|
||||
{invite.description && (
|
||||
<p className="admin-list-item-text admin-list-item-text--muted">
|
||||
{invite.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="admin-meta-row">
|
||||
<span>
|
||||
Uses: {invite.use_count}
|
||||
{typeof invite.max_uses === 'number' ? ` / ${invite.max_uses}` : ''}
|
||||
</span>
|
||||
<span>Remaining: {invite.remaining_uses ?? 'Unlimited'}</span>
|
||||
<span>Expires: {formatDate(invite.expires_at)}</span>
|
||||
<span>Created: {formatDate(invite.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" className="ghost-button" onClick={() => copyInviteLink(invite)}>
|
||||
Copy link
|
||||
</button>
|
||||
<button type="button" className="ghost-button" onClick={() => editInvite(invite)}>
|
||||
Edit
|
||||
</button>
|
||||
<button type="button" onClick={() => deleteInvite(invite)}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -4530,11 +4530,10 @@ button:hover:not(:disabled) {
|
||||
}
|
||||
|
||||
.invite-admin-tabbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -4543,6 +4542,31 @@ button:hover:not(:disabled) {
|
||||
}
|
||||
|
||||
.invite-admin-tab-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.invite-admin-stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.invite-admin-list-panel,
|
||||
.invite-admin-form-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile-form-layout .invite-form-row-control > label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.profile-form-layout .invite-form-row-control > label > span {
|
||||
color: #9ea7b6;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.profile-form-layout .admin-inline-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -4692,3 +4716,44 @@ button:hover:not(:disabled) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enterprise UI tightening pass */
|
||||
.admin-panel,
|
||||
.user-detail-panel,
|
||||
.user-directory-search-panel,
|
||||
.user-directory-bulk-panel,
|
||||
.user-directory-table,
|
||||
.invite-admin-summary-panel,
|
||||
.invite-admin-summary-row,
|
||||
.invite-form-row,
|
||||
.admin-list-item,
|
||||
.status-banner,
|
||||
.error-banner,
|
||||
.admin-segmented {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.admin-segmented button,
|
||||
.small-pill,
|
||||
.user-bulk-summary span,
|
||||
.admin-inline-actions button,
|
||||
.ghost-button,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.signed-in-dropdown,
|
||||
.modal-card,
|
||||
.card,
|
||||
.admin-card,
|
||||
.summary-card {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.avatar-button,
|
||||
.theme-toggle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user