4c7d8d4af7
Refactored AdminInvitesPage, AdminUserDetailsPage, AdminRolesPage, and AdminAppsPage to use the new pure Hono SSR JSX stateless components. Fixed missing import definitions in AdminRolesPage. Moved task file to complete state. Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>
353 lines
14 KiB
Plaintext
353 lines
14 KiB
Plaintext
|
|
{/* Desktop Ledger Table (≥ 768px) */}
|
|
<div class="card desktop-only" style="display: none;">
|
|
<div class="table-container">
|
|
<table id="invitesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Invite Code</th>
|
|
<th>Target App / Scope</th>
|
|
<th>Role</th>
|
|
<th>Capacity & Usage</th>
|
|
<th>Status</th>
|
|
<th>Expires</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{invites.length === 0
|
|
? (
|
|
<tr>
|
|
<td
|
|
colSpan={7}
|
|
style="text-align: center; color: var(--text-muted); padding: 2rem;"
|
|
>
|
|
No active or historical invite tokens found.
|
|
</td>
|
|
</tr>
|
|
)
|
|
: (
|
|
invites.map((inv) => {
|
|
const usesCount = inv.uses_count || 0;
|
|
const maxUses = inv.max_uses;
|
|
const isUnlimited = maxUses === null;
|
|
const isExhausted = !isUnlimited && usesCount >= maxUses;
|
|
const isExpired = new Date(inv.expires_at) < new Date();
|
|
const isActive = !isExhausted && !isExpired;
|
|
|
|
return (
|
|
<tr
|
|
key={inv.id}
|
|
class="invite-row"
|
|
data-search={`${inv.code} ${
|
|
inv.app_name || ""
|
|
} ${inv.role}`.toLowerCase()}
|
|
>
|
|
<td>
|
|
<code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
|
|
{inv.code}
|
|
</code>
|
|
</td>
|
|
<td>
|
|
{inv.app_name
|
|
? (
|
|
<strong style="color: var(--text-primary);">
|
|
{inv.app_name}
|
|
</strong>
|
|
)
|
|
: inv.role === "admin"
|
|
? <span class="badge badge-info">Global Admin</span>
|
|
: (
|
|
<span class="badge badge-secondary">
|
|
General (Open)
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-info">{inv.role}</span>
|
|
</td>
|
|
<td>
|
|
<div style="min-width: 110px;">
|
|
{isUnlimited
|
|
? (
|
|
<span style="font-size: 0.85rem; font-weight: 600; color: var(--primary);">
|
|
{usesCount} claimed (Unlimited)
|
|
</span>
|
|
)
|
|
: (
|
|
<div>
|
|
<span style="font-size: 0.85rem; font-weight: 600; color: var(--text-primary);">
|
|
{usesCount} / {maxUses} used
|
|
</span>
|
|
<div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
|
|
<div
|
|
style={`background: ${
|
|
isExhausted
|
|
? "var(--text-muted)"
|
|
: "var(--success)"
|
|
}; height: 100%; width: ${
|
|
Math.min(
|
|
100,
|
|
(usesCount / maxUses) * 100,
|
|
)
|
|
}%;`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{isExhausted && (
|
|
<span class="badge badge-secondary">Exhausted</span>
|
|
)}
|
|
{isExpired && !isExhausted && (
|
|
<span class="badge badge-danger">Expired</span>
|
|
)}
|
|
{isActive && (
|
|
<span class="badge badge-success">Active</span>
|
|
)}
|
|
</td>
|
|
<td style="font-size: 0.85rem; color: var(--text-secondary);">
|
|
{new Date(inv.expires_at).toLocaleDateString()}
|
|
</td>
|
|
<td>
|
|
<div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-primary"
|
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
onclick={`copyInviteLink('${inv.code}')`}
|
|
>
|
|
Copy Link
|
|
</button>
|
|
)}
|
|
{usesCount > 0 && (
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Claimed ({usesCount})
|
|
</button>
|
|
)}
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-danger"
|
|
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
|
onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Revoke
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Adaptive Cards View (< 768px) */}
|
|
<div
|
|
id="invitesMobileDeck"
|
|
class="mobile-only"
|
|
style="display: flex; flex-direction: column; gap: 0.75rem;"
|
|
>
|
|
{invites.map((inv) => {
|
|
const usesCount = inv.uses_count || 0;
|
|
const maxUses = inv.max_uses;
|
|
const isUnlimited = maxUses === null;
|
|
const isExhausted = !isUnlimited && usesCount >= maxUses;
|
|
const isExpired = new Date(inv.expires_at) < new Date();
|
|
const isActive = !isExhausted && !isExpired;
|
|
|
|
return (
|
|
<div
|
|
class="card invite-card"
|
|
key={inv.id}
|
|
data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
|
|
.toLowerCase()}
|
|
style="margin-bottom: 0; padding: 1rem;"
|
|
>
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
|
|
<div>
|
|
<code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; font-size: 1rem; color: var(--primary);">
|
|
{inv.code}
|
|
</code>
|
|
<div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">
|
|
{inv.app_name || "Global / Open"} • Role:{" "}
|
|
<strong>{inv.role}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
{isExhausted && (
|
|
<span class="badge badge-secondary">Exhausted</span>
|
|
)}
|
|
{isExpired && !isExhausted && (
|
|
<span class="badge badge-danger">Expired</span>
|
|
)}
|
|
{isActive && <span class="badge badge-success">Active</span>}
|
|
</div>
|
|
|
|
<div style="margin-bottom: 0.75rem;">
|
|
<div style="font-size: 0.8rem; color: var(--text-secondary); display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
|
|
<span>
|
|
Capacity:{" "}
|
|
{isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
|
|
</span>
|
|
<span>
|
|
Expires: {new Date(inv.expires_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
{!isUnlimited && (
|
|
<div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; overflow: hidden;">
|
|
<div
|
|
style={`background: ${
|
|
isExhausted ? "var(--text-muted)" : "var(--success)"
|
|
}; height: 100%; width: ${
|
|
Math.min(100, (usesCount / maxUses) * 100)
|
|
}%;`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-primary"
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
|
|
onclick={`copyInviteLink('${inv.code}')`}
|
|
>
|
|
Copy Link
|
|
</button>
|
|
)}
|
|
{usesCount > 0 && (
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
|
|
onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Claimed ({usesCount})
|
|
</button>
|
|
)}
|
|
{isActive && (
|
|
<button
|
|
type="button"
|
|
class="btn-danger"
|
|
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
|
|
onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
|
|
>
|
|
Revoke
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Redemptions Modal */}
|
|
<div
|
|
id="redemptions-modal"
|
|
style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
|
|
>
|
|
<div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
|
|
Users Claimed:{" "}
|
|
<code id="modal-invite-code" style="color: var(--primary);">
|
|
</code>
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onclick="closeRedemptionsModal()"
|
|
style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
id="modal-redemptions-content"
|
|
style="max-height: 350px; overflow-y: auto;"
|
|
>
|
|
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
|
Loading claimed users...
|
|
</p>
|
|
</div>
|
|
|
|
<div style="text-align: right; margin-top: 1rem;">
|
|
<button
|
|
type="button"
|
|
class="btn-outline"
|
|
onclick="closeRedemptionsModal()"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
{`
|
|
@media (min-width: 768px) {
|
|
.desktop-only { display: block !important; }
|
|
.mobile-only { display: none !important; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.desktop-only { display: none !important; }
|
|
.mobile-only { display: flex !important; }
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
const ROLES_CATALOG = ${JSON.stringify(allRoles)};
|
|
|
|
function updateInviteRoleOptions() {
|
|
const appSelect = document.getElementById('inviteAppId');
|
|
const roleSelect = document.getElementById('inviteRole');
|
|
if (!appSelect || !roleSelect) return;
|
|
|
|
const appId = appSelect.value;
|
|
roleSelect.innerHTML = '';
|
|
|
|
const available = ROLES_CATALOG.filter(r => !r.app_id || r.app_id === appId);
|
|
if (available.length === 0) {
|
|
const opt = document.createElement('option');
|
|
opt.value = 'user';
|
|
opt.textContent = 'user';
|
|
roleSelect.appendChild(opt);
|
|
return;
|
|
}
|
|
|
|
available.forEach(r => {
|
|
const opt = document.createElement('option');
|
|
opt.value = r.name;
|
|
opt.textContent = r.name + (r.app_id ? ' (App Custom)' : ' (Global)');
|
|
roleSelect.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
if (document.getElementById('inviteAppId')) {
|
|
updateInviteRoleOptions();
|
|
}
|
|
|
|
function showNotice(msg, isError) {
|
|
const banner = document.getElementById('status-banner');
|
|
banner.textContent = msg;
|
|
banner.style.display = 'block';
|
|
banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';
|