feat(portal): customer-admin surface on real data + Stripe billing + session resilience
Access & navigation
- Gate partner-mode strictly to partner staff so admins/end-users never inherit
leftover partner-view state; purge stale session entry on hydrate.
- Role-driven admin entry: useMe.isTenantAdmin, Admin/Personal tiles in the app
launcher, and an /admin route guard in the global middleware (fail closed).
- Drop the duplicate user identity block from the sidebar footer.
Admin pages on real data
- New tenant-scoped, membership-gated endpoints: GET /tenants/:slug/{audit,users,
invoices}; useTenant composable resolves the active workspace + subscription.
- Dashboard: real seats, spend (cycle-normalized + minor-units), plan, renewal,
and recent audit; unbacked sections removed.
- Users & groups: real members; Groups/Invitations/Service accounts shown as
honest "coming soon".
- Subscription & invoices: real plan hero, invoice history, and billing details.
Stripe payment method (Elements + SetupIntent)
- StripeClient: publishable key + getDefaultCard/createSetupIntent/setDefaultCard.
- CustomerBillingController + BillingService methods (ensure-customer on demand).
- Portal: PaymentMethodModal, useStripeJs (CDN load), proxies; hidePostalCode.
Editable billing details & whitelabel branding
- PATCH /tenants/:slug/billing-info (narrow: company/VAT/country/email).
- TenantBranding schema/service + GET/PUT /tenants/:slug/branding: real product
name, accent colour, and per-tenant email-template overrides.
- Branding preview + sidebar workspace mark wired to real name/plan/seats/colour
with YIQ auto-contrast (readableOn util).
Session resilience
- Request offline_access so Authentik issues a refresh token (automaticRefresh).
- Silent refresh + single retry on 401 for writes (useApiFetch, incl. partner
pages) and reads (useMe.fetchMe) — no redirect, no lost input.
- Modal backdrop closes only on press+release on the backdrop (no more
drag-select-to-close).
This commit is contained in:
Ronni Baslund
@@ -1,41 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-screens.jsx `UsersScreen` (lines 625-768)
|
||||
// with FilterChip (770), UserDetailPanel (816), DefList (948), InviteUserModal
|
||||
// (961), plus GroupsTabRich from platform-admin.jsx (1022), InvitationsTab and
|
||||
// ServiceAccountsTab (platform-screens.jsx 1090, 1123).
|
||||
// Users & groups. The Users tab is real — workspace members come from
|
||||
// /api/tenants/:slug/users (platform-api UserDocument). The Groups,
|
||||
// Invitations and Service-accounts tabs have no backend yet (no Group /
|
||||
// Invitation / ServiceAccount schema exists), so they render honest
|
||||
// "coming soon" states rather than fabricated rows.
|
||||
//
|
||||
// User detail panel tabs follow the source order: Profile · Access · Mail ·
|
||||
// Files · Activity · Audit (no Danger zone in the source).
|
||||
// Mutations (invite, suspend, role change, CSV import) still toast-stub: the
|
||||
// user-write endpoints are operator-only today, so a customer admin can't
|
||||
// commit them yet. The data shown is real; the writes are not wired.
|
||||
|
||||
|
||||
import { sampleUsersFlat, groupsFull, sampleAudit } from '~/data/workspace'
|
||||
|
||||
type User = (typeof sampleUsersFlat)[number]
|
||||
import type { TenantUserDoc } from '~/types/workspace'
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const { fetchMe } = useMe()
|
||||
await fetchMe()
|
||||
const { tenant } = useTenant()
|
||||
const slug = computed(() => tenant.value?.slug ?? '')
|
||||
|
||||
const { data: users } = await useFetch<TenantUserDoc[]>(
|
||||
() => `/api/tenants/${slug.value}/users`,
|
||||
{ key: 'admin-users', default: () => [], immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
|
||||
const tab = ref<'users' | 'groups' | 'invitations' | 'service'>('users')
|
||||
const query = ref('')
|
||||
const statusFilter = ref<'all' | 'active' | 'invited' | 'suspended'>('all')
|
||||
const statusFilter = ref<'all' | 'active' | 'suspended'>('all')
|
||||
const selected = ref<Set<string>>(new Set())
|
||||
const openUser = ref<User | null>(null)
|
||||
const userTab = ref<'profile' | 'access' | 'mail' | 'files' | 'activity' | 'audit'>('profile')
|
||||
const openUser = ref<TenantUserDoc | null>(null)
|
||||
const inviteOpen = ref(false)
|
||||
const inviteStep = ref(1)
|
||||
const importOpen = ref(false)
|
||||
|
||||
const userStatus = (u: TenantUserDoc): 'active' | 'suspended' => (u.active === false ? 'suspended' : 'active')
|
||||
const roleLabel = (r: string) => r.charAt(0).toUpperCase() + r.slice(1)
|
||||
|
||||
const filteredUsers = computed(() =>
|
||||
sampleUsersFlat.filter((u) => {
|
||||
if (statusFilter.value !== 'all' && u.status !== statusFilter.value) return false
|
||||
(users.value ?? []).filter((u) => {
|
||||
if (statusFilter.value !== 'all' && userStatus(u) !== statusFilter.value) return false
|
||||
if (query.value && !`${u.name} ${u.email}`.toLowerCase().includes(query.value.toLowerCase())) return false
|
||||
return true
|
||||
}),
|
||||
)
|
||||
|
||||
const invites = computed(() => sampleUsersFlat.filter((u) => u.status === 'invited'))
|
||||
|
||||
const statusTone = (s: string): 'ok' | 'warn' | 'bad' =>
|
||||
s === 'active' ? 'ok' : s === 'invited' ? 'warn' : 'bad'
|
||||
s === 'active' ? 'ok' : s === 'suspended' ? 'bad' : 'warn'
|
||||
|
||||
function lastSeen(iso?: string): string {
|
||||
if (!iso) return 'never'
|
||||
const ms = Date.now() - new Date(iso).getTime()
|
||||
const m = Math.floor(ms / 60_000)
|
||||
if (m < 1) return 'just now'
|
||||
if (m < 60) return `${m} min ago`
|
||||
const h = Math.floor(m / 60)
|
||||
if (h < 24) return `${h} h ago`
|
||||
const d = Math.floor(h / 24)
|
||||
if (d < 30) return `${d} day${d === 1 ? '' : 's'} ago`
|
||||
return new Date(iso).toLocaleDateString('da-DK', { day: '2-digit', month: 'short', year: 'numeric' })
|
||||
}
|
||||
function joinedDate(iso?: string): string {
|
||||
return iso ? new Date(iso).toLocaleDateString('da-DK', { day: '2-digit', month: 'long', year: 'numeric' }) : '—'
|
||||
}
|
||||
|
||||
function toggleSelect(id: string) {
|
||||
const s = new Set(selected.value)
|
||||
@@ -45,26 +70,17 @@ function toggleSelect(id: string) {
|
||||
}
|
||||
function clearSelection() { selected.value = new Set() }
|
||||
|
||||
watch(openUser, (u) => { if (u) userTab.value = 'profile' })
|
||||
|
||||
// Filter chip
|
||||
type ChipOption = { value: string; label: string }
|
||||
const statusOptions: ChipOption[] = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'active', label: 'Active' },
|
||||
{ value: 'invited', label: 'Invited' },
|
||||
{ value: 'suspended', label: 'Suspended' },
|
||||
]
|
||||
|
||||
// Groups tab
|
||||
const openGroup = ref<typeof groupsFull[number] | null>(null)
|
||||
const createGroupOpen = ref(false)
|
||||
|
||||
// Bulk-action modals + confirm
|
||||
const assignGroupOpen = ref(false)
|
||||
const changeRoleOpen = ref(false)
|
||||
const suspendOpen = ref(false)
|
||||
const groupChoice = ref<Set<string>>(new Set())
|
||||
const roleChoice = ref<'member' | 'admin' | 'owner'>('member')
|
||||
|
||||
function sendInvite() {
|
||||
@@ -73,14 +89,6 @@ function sendInvite() {
|
||||
toast.ok('Invitation sent to magnus@dezky.com')
|
||||
}
|
||||
|
||||
function applyBulkGroup() {
|
||||
const n = selected.value.size
|
||||
const gs = [...groupChoice.value].join(', ') || '—'
|
||||
assignGroupOpen.value = false
|
||||
toast.ok(`${n} user${n === 1 ? '' : 's'} added to: ${gs}`)
|
||||
groupChoice.value = new Set()
|
||||
}
|
||||
|
||||
function applyBulkRole() {
|
||||
const n = selected.value.size
|
||||
changeRoleOpen.value = false
|
||||
@@ -99,15 +107,8 @@ function bulkExport() {
|
||||
toast.info(`Exporting ${n} user${n === 1 ? '' : 's'}…`, 'CSV with profile + access columns')
|
||||
}
|
||||
|
||||
function toggleGroup(g: string) {
|
||||
const s = new Set(groupChoice.value)
|
||||
if (s.has(g)) s.delete(g)
|
||||
else s.add(g)
|
||||
groupChoice.value = s
|
||||
}
|
||||
|
||||
// Per-row kebab — open the user detail panel by default.
|
||||
function rowAction(u: User, id: string) {
|
||||
function rowAction(u: TenantUserDoc, id: string) {
|
||||
if (id === 'open') openUser.value = u
|
||||
else if (id === 'reset') toast.info(`Password reset link sent to ${u.email}`)
|
||||
else if (id === 'force') toast.info(`Forcing logout for ${u.name}`)
|
||||
@@ -115,13 +116,6 @@ function rowAction(u: User, id: string) {
|
||||
else if (id === 'delete') toast.bad(`${u.name} deletion scheduled`)
|
||||
}
|
||||
|
||||
function groupAction(g: typeof groupsFull[number], id: string) {
|
||||
if (id === 'open') openGroup.value = g
|
||||
else if (id === 'rename') toast.info(`Rename ${g.name}`)
|
||||
else if (id === 'duplicate') toast.info(`Duplicated ${g.name}`)
|
||||
else if (id === 'delete') toast.bad(`${g.name} deletion scheduled`)
|
||||
}
|
||||
|
||||
const userRowItems = [
|
||||
{ id: 'open', label: 'Open profile', icon: 'external' as const },
|
||||
{ id: 'reset', label: 'Send password reset', icon: 'key' as const },
|
||||
@@ -130,14 +124,6 @@ const userRowItems = [
|
||||
{ id: 'suspend', label: 'Suspend user', icon: 'shield' as const, danger: true },
|
||||
{ id: 'delete', label: 'Delete user', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
const groupRowItems = [
|
||||
{ id: 'open', label: 'Open group', icon: 'external' as const },
|
||||
{ id: 'rename', label: 'Rename', icon: 'brush' as const },
|
||||
{ id: 'duplicate', label: 'Duplicate', icon: 'copy' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete group',icon: 'trash' as const, danger: true },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -167,10 +153,10 @@ const groupRowItems = [
|
||||
<Tabs
|
||||
v-model="tab"
|
||||
:items="[
|
||||
{ value: 'users', label: 'Users', count: sampleUsersFlat.length },
|
||||
{ value: 'groups', label: 'Groups', count: 6 },
|
||||
{ value: 'invitations', label: 'Invitations', count: 2 },
|
||||
{ value: 'service', label: 'Service accounts', count: 3 },
|
||||
{ value: 'users', label: 'Users', count: users.length },
|
||||
{ value: 'groups', label: 'Groups' },
|
||||
{ value: 'invitations', label: 'Invitations' },
|
||||
{ value: 'service', label: 'Service accounts' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
@@ -183,16 +169,13 @@ const groupRowItems = [
|
||||
<input v-model="query" placeholder="Search by name or email…" />
|
||||
</div>
|
||||
<AdminFilterChip label="Status" :options="statusOptions" v-model="statusFilter" />
|
||||
<button class="chip"><Eyebrow>Role:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<button class="chip"><Eyebrow>Group:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<div class="spacer" />
|
||||
<Mono dim>{{ filteredUsers.length }} of {{ sampleUsersFlat.length }}</Mono>
|
||||
<Mono dim>{{ filteredUsers.length }} of {{ users.length }}</Mono>
|
||||
</div>
|
||||
|
||||
<div v-if="selected.size > 0" class="bulk">
|
||||
<Mono style="color: inherit">{{ selected.size }} selected</Mono>
|
||||
<div class="spacer" />
|
||||
<UiButton size="sm" variant="ghost" class="invert" @click="assignGroupOpen = true">Assign group</UiButton>
|
||||
<UiButton size="sm" variant="ghost" class="invert" @click="changeRoleOpen = true">Change role</UiButton>
|
||||
<UiButton size="sm" variant="ghost" class="invert" @click="bulkExport">Export selected</UiButton>
|
||||
<UiButton size="sm" variant="ghost" class="invert" @click="suspendOpen = true">Suspend</UiButton>
|
||||
@@ -204,15 +187,15 @@ const groupRowItems = [
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="check">
|
||||
<input type="checkbox" :checked="selected.size === filteredUsers.length && filteredUsers.length > 0" @change="(e) => (e.target as HTMLInputElement).checked ? (selected = new Set(filteredUsers.map(u => u.id))) : clearSelection()" />
|
||||
<input type="checkbox" :checked="selected.size === filteredUsers.length && filteredUsers.length > 0" @change="(e) => (e.target as HTMLInputElement).checked ? (selected = new Set(filteredUsers.map(u => u._id))) : clearSelection()" />
|
||||
</th>
|
||||
<th>Name</th><th>Role</th><th>Status</th><th>Group</th><th>Last seen</th><th class="right">Storage</th><th />
|
||||
<th>Name</th><th>Role</th><th>Status</th><th>Last seen</th><th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="u in filteredUsers" :key="u.id" @click="openUser = u">
|
||||
<tr v-for="u in filteredUsers" :key="u._id" @click="openUser = u">
|
||||
<td class="check" @click.stop>
|
||||
<input type="checkbox" :checked="selected.has(u.id)" @change="toggleSelect(u.id)" />
|
||||
<input type="checkbox" :checked="selected.has(u._id)" @change="toggleSelect(u._id)" />
|
||||
</td>
|
||||
<td>
|
||||
<div class="name-cell">
|
||||
@@ -223,137 +206,52 @@ const groupRowItems = [
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Badge :tone="u.role === 'Owner' ? 'invert' : 'neutral'">{{ u.role }}</Badge></td>
|
||||
<td><Badge :tone="statusTone(u.status)" dot>{{ u.status }}</Badge></td>
|
||||
<td><span class="group-text">{{ u.group }}</span></td>
|
||||
<td><Mono dim>{{ u.last }}</Mono></td>
|
||||
<td class="right"><Mono>{{ u.storage > 0 ? `${u.storage} GB` : '—' }}</Mono></td>
|
||||
<td><Badge :tone="u.role === 'owner' ? 'invert' : 'neutral'">{{ roleLabel(u.role) }}</Badge></td>
|
||||
<td><Badge :tone="statusTone(userStatus(u))" dot>{{ userStatus(u) }}</Badge></td>
|
||||
<td><Mono dim>{{ lastSeen(u.lastLoginAt) }}</Mono></td>
|
||||
<td class="right" @click.stop>
|
||||
<AdminKebabMenu :items="userRowItems" :icon-size="16" @select="(id) => rowAction(u, id)" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="filteredUsers.length === 0" class="no-hover">
|
||||
<td colspan="6" class="empty-row">
|
||||
<Mono dim>{{ users.length === 0 ? 'No members in this workspace yet.' : 'No users match your filters.' }}</Mono>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
|
||||
<div class="pager">
|
||||
<Mono dim>Showing 1–{{ filteredUsers.length }}</Mono>
|
||||
<div class="pager-btns">
|
||||
<UiButton size="sm" variant="secondary">
|
||||
<template #leading><UiIcon name="chevLeft" :size="12" /></template>
|
||||
Prev
|
||||
</UiButton>
|
||||
<UiButton size="sm" variant="secondary">
|
||||
Next
|
||||
<template #trailing><UiIcon name="chevRight" :size="12" /></template>
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GROUPS TAB (GroupsTabRich) -->
|
||||
<!-- GROUPS TAB — no backend yet -->
|
||||
<div v-else-if="tab === 'groups'" class="content">
|
||||
<div class="toolbar">
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input placeholder="Search groups…" />
|
||||
</div>
|
||||
<button class="chip"><Eyebrow>Sort:</Eyebrow><span>Name</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<div class="spacer" />
|
||||
<Mono dim>{{ groupsFull.length }} groups</Mono>
|
||||
<UiButton variant="primary" @click="createGroupOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New group
|
||||
</UiButton>
|
||||
<div class="empty-card">
|
||||
<UiIcon name="users" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">Group management coming soon</div>
|
||||
<div class="empty-body">Create teams, assign mail aliases and shared resources, and manage memberships in one place. We're wiring this up to your identity provider.</div>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="users-tbl">
|
||||
<thead>
|
||||
<tr><th>Group</th><th>Alias</th><th>Members</th><th>Owner</th><th>Created</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="g in groupsFull" :key="g.id" @click="openGroup = g">
|
||||
<td>
|
||||
<div class="name-cell">
|
||||
<div class="g-icon"><UiIcon name="users" :size="14" /></div>
|
||||
<div>
|
||||
<div class="u-name">{{ g.name }}</div>
|
||||
<Mono dim>{{ g.description }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono>{{ g.alias }}</Mono></td>
|
||||
<td>
|
||||
<div class="member-cell">
|
||||
<UiIcon name="users" :size="12" stroke="var(--text-mute)" />
|
||||
<Mono>{{ g.members }}</Mono>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="name-cell small">
|
||||
<Avatar :name="g.owner" :size="22" />
|
||||
<span>{{ g.owner }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono dim>{{ g.created }}</Mono></td>
|
||||
<td class="right" @click.stop>
|
||||
<AdminKebabMenu :items="groupRowItems" @select="(id) => groupAction(g, id)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- INVITATIONS TAB -->
|
||||
<!-- INVITATIONS TAB — no backend yet -->
|
||||
<div v-else-if="tab === 'invitations'" class="content">
|
||||
<Card :pad="0">
|
||||
<table class="users-tbl">
|
||||
<thead><tr><th>Recipient</th><th>Sent</th><th>Expires</th><th /></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="u in invites" :key="u.id">
|
||||
<td>
|
||||
<div class="name-cell">
|
||||
<Avatar :name="u.name" :size="28" />
|
||||
<div>
|
||||
<div class="u-name">{{ u.name }}</div>
|
||||
<Mono dim>{{ u.email }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono dim>14 May 2026</Mono></td>
|
||||
<td><Mono dim>21 May 2026</Mono></td>
|
||||
<td class="right">
|
||||
<UiButton size="sm" variant="secondary">
|
||||
<template #leading><UiIcon name="copy" :size="13" /></template>
|
||||
Copy link
|
||||
</UiButton>
|
||||
<UiButton size="sm" variant="secondary">
|
||||
<template #leading><UiIcon name="refresh" :size="13" /></template>
|
||||
Resend
|
||||
</UiButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
<div class="empty-card">
|
||||
<UiIcon name="mail" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">Invitations coming soon</div>
|
||||
<div class="empty-body">Track pending invites, copy activation links, and resend or revoke them here once user provisioning is wired to the workspace.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SERVICE ACCOUNTS TAB -->
|
||||
<!-- SERVICE ACCOUNTS TAB — no backend yet -->
|
||||
<div v-else class="content">
|
||||
<div class="empty-card">
|
||||
<UiIcon name="key" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">3 service accounts</div>
|
||||
<div class="empty-body">Service accounts let scripts and integrations authenticate to your workspace. Manage their API tokens here.</div>
|
||||
<UiButton variant="primary">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New service account
|
||||
</UiButton>
|
||||
<div class="empty-title">Service accounts coming soon</div>
|
||||
<div class="empty-body">Service accounts will let scripts and integrations authenticate to your workspace with scoped API tokens.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User detail side panel -->
|
||||
<SidePanel :open="!!openUser" :eyebrow="openUser?.id || ''" :title="openUser?.name || ''" width="lg" @close="openUser = null">
|
||||
<!-- User detail side panel — read-only profile from real data -->
|
||||
<SidePanel :open="!!openUser" :eyebrow="openUser?.email || ''" :title="openUser?.name || ''" width="lg" @close="openUser = null">
|
||||
<div v-if="openUser" class="user-detail">
|
||||
<div class="ud-head">
|
||||
<Avatar :name="openUser.name" :size="56" />
|
||||
@@ -361,138 +259,28 @@ const groupRowItems = [
|
||||
<div class="ud-name">{{ openUser.name }}</div>
|
||||
<Mono dim>{{ openUser.email }}</Mono>
|
||||
<div class="ud-badges">
|
||||
<Badge :tone="statusTone(openUser.status)" dot>{{ openUser.status }}</Badge>
|
||||
<Badge tone="neutral">{{ openUser.role }}</Badge>
|
||||
<Badge tone="neutral">{{ openUser.group }}</Badge>
|
||||
<Badge :tone="statusTone(userStatus(openUser))" dot>{{ userStatus(openUser) }}</Badge>
|
||||
<Badge tone="neutral">{{ roleLabel(openUser.role) }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Tabs
|
||||
v-model="userTab"
|
||||
:items="[
|
||||
{ value: 'profile', label: 'Profile' },
|
||||
{ value: 'access', label: 'Access' },
|
||||
{ value: 'mail', label: 'Mail' },
|
||||
{ value: 'files', label: 'Files' },
|
||||
{ value: 'activity', label: 'Activity' },
|
||||
{ value: 'audit', label: 'Audit' },
|
||||
]"
|
||||
/>
|
||||
<div class="ud-body">
|
||||
<template v-if="userTab === 'profile'">
|
||||
<dl class="def">
|
||||
<div><dt>Full name</dt><dd>{{ openUser.name }}</dd></div>
|
||||
<div><dt>Email</dt><dd>{{ openUser.email }}</dd></div>
|
||||
<div><dt>Role</dt><dd>{{ openUser.role }}</dd></div>
|
||||
<div><dt>Group</dt><dd>{{ openUser.group }}</dd></div>
|
||||
<div><dt>License</dt><dd>Business · seat 11</dd></div>
|
||||
<div><dt>Joined</dt><dd>14 January 2026</dd></div>
|
||||
<div><dt>Locale</dt><dd>da-DK · Europe/Copenhagen</dd></div>
|
||||
<div><dt>Phone</dt><dd>+45 21 47 88 02</dd></div>
|
||||
</dl>
|
||||
</template>
|
||||
|
||||
<template v-else-if="userTab === 'access'">
|
||||
<dl class="def">
|
||||
<div><dt>MFA</dt><dd><Badge tone="ok" dot>enabled · TOTP</Badge></dd></div>
|
||||
<div><dt>SSO sessions</dt><dd>2 active</dd></div>
|
||||
<div><dt>Last sign-in</dt><dd>{{ openUser.last }} · 92.43.118.4 · Copenhagen</dd></div>
|
||||
<div><dt>Recovery codes</dt><dd>8 of 10 unused</dd></div>
|
||||
</dl>
|
||||
<div class="sub-head">Active devices</div>
|
||||
<div v-for="d in [
|
||||
{ d: 'MacBook Pro · macOS 14', w: 'Chrome 132', loc: 'Copenhagen', active: '2 min ago' },
|
||||
{ d: 'iPhone 15 Pro · iOS 18', w: 'dezky Mail', loc: 'Copenhagen', active: '1 h ago' },
|
||||
]" :key="d.d" class="dev-row">
|
||||
<UiIcon name="device" :size="18" stroke="var(--text-mute)" />
|
||||
<div class="dev-meta">
|
||||
<div class="dev-d">{{ d.d }}</div>
|
||||
<Mono dim>{{ d.w }} · {{ d.loc }} · {{ d.active }}</Mono>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost">Revoke</UiButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="userTab === 'mail'">
|
||||
<dl class="def">
|
||||
<div><dt>Primary address</dt><dd>{{ openUser.email }}</dd></div>
|
||||
<div><dt>Quota</dt><dd>12.4 GB of 50 GB · 25%</dd></div>
|
||||
<div><dt>Forwarding</dt><dd>Off</dd></div>
|
||||
<div><dt>Vacation reply</dt><dd>Off</dd></div>
|
||||
</dl>
|
||||
<div class="sub-head">Aliases</div>
|
||||
<div v-for="a in ['anne.b@dezky.com', 'founder@dezky.com']" :key="a" class="alias-row">
|
||||
<Mono>{{ a }}</Mono>
|
||||
<UiButton size="sm" variant="ghost">
|
||||
<template #leading><UiIcon name="trash" :size="12" /></template>
|
||||
Remove
|
||||
</UiButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="userTab === 'files'">
|
||||
<dl class="def">
|
||||
<div><dt>Quota</dt><dd>12.4 GB of 100 GB · 12%</dd></div>
|
||||
<div><dt>Shared by user</dt><dd>14 items</dd></div>
|
||||
<div><dt>Shared with user</dt><dd>23 items</dd></div>
|
||||
</dl>
|
||||
</template>
|
||||
|
||||
<template v-else-if="userTab === 'activity'">
|
||||
<div class="activity-list">
|
||||
<div v-for="a in sampleAudit.slice(0, 6)" :key="a.id" class="activity-row">
|
||||
<Mono dim>{{ a.when }}</Mono>
|
||||
<span class="activity-action">{{ a.action }}</span>
|
||||
<Mono dim>{{ a.ip }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="empty-tab">
|
||||
<UiIcon name="shield" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">No changes recorded yet</div>
|
||||
<div class="empty-body">Edits to this user's settings will appear here.</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="danger">
|
||||
<template #leading><UiIcon name="logout" :size="13" /></template>
|
||||
Force logout
|
||||
</UiButton>
|
||||
<UiButton variant="secondary">Reset password</UiButton>
|
||||
<UiButton variant="primary">Save changes</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
<!-- Group detail side panel -->
|
||||
<SidePanel :open="!!openGroup" eyebrow="Group" :title="openGroup?.name || ''" width="lg" @close="openGroup = null">
|
||||
<div v-if="openGroup" class="user-detail">
|
||||
<div class="ud-head">
|
||||
<div class="g-icon big"><UiIcon name="users" :size="22" /></div>
|
||||
<div class="ud-meta">
|
||||
<div class="ud-name">{{ openGroup.name }}</div>
|
||||
<Mono dim>{{ openGroup.alias }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ud-body">
|
||||
<dl class="def">
|
||||
<div><dt>Members</dt><dd>{{ openGroup.members }}</dd></div>
|
||||
<div><dt>Owner</dt><dd>{{ openGroup.owner }}</dd></div>
|
||||
<div><dt>Created</dt><dd>{{ openGroup.created }}</dd></div>
|
||||
<div><dt>Description</dt><dd>{{ openGroup.description }}</dd></div>
|
||||
<div><dt>Full name</dt><dd>{{ openUser.name }}</dd></div>
|
||||
<div><dt>Email</dt><dd>{{ openUser.email }}</dd></div>
|
||||
<div><dt>Role</dt><dd>{{ roleLabel(openUser.role) }}</dd></div>
|
||||
<div><dt>Status</dt><dd>{{ userStatus(openUser) }}</dd></div>
|
||||
<div><dt>Joined</dt><dd>{{ joinedDate(openUser.createdAt) }}</dd></div>
|
||||
<div><dt>Last sign-in</dt><dd>{{ lastSeen(openUser.lastLoginAt) }}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="danger">
|
||||
<template #leading><UiIcon name="trash" :size="13" /></template>
|
||||
Delete group
|
||||
<UiButton variant="danger" @click="openUser && rowAction(openUser, 'force')">
|
||||
<template #leading><UiIcon name="logout" :size="13" /></template>
|
||||
Force logout
|
||||
</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="primary" @click="openGroup = null">Save changes</UiButton>
|
||||
<UiButton variant="secondary" @click="openUser && rowAction(openUser, 'reset')">Reset password</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
@@ -578,26 +366,6 @@ Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Bulk · assign group -->
|
||||
<Modal :open="assignGroupOpen" :eyebrow="`${selected.size} selected`" title="Add to groups" size="md" @close="assignGroupOpen = false">
|
||||
<div class="form-stack">
|
||||
<Eyebrow>Pick one or more groups</Eyebrow>
|
||||
<div class="check-stack">
|
||||
<label v-for="g in ['Engineering', 'Design', 'Operations', 'Finance', 'Sales', 'Leadership']" :key="g">
|
||||
<input type="checkbox" :checked="groupChoice.has(g)" @change="toggleGroup(g)" />
|
||||
{{ g }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="assignGroupOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" :disabled="groupChoice.size === 0" @click="applyBulkGroup">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Add to groups
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Bulk · change role -->
|
||||
<Modal :open="changeRoleOpen" :eyebrow="`${selected.size} selected`" title="Change role" size="md" @close="changeRoleOpen = false">
|
||||
<div class="form-stack">
|
||||
@@ -632,19 +400,6 @@ Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
>
|
||||
Sign-in will be blocked across mail, files, chat, and meetings. Data is preserved; you can re-enable any time.
|
||||
</ConfirmDialog>
|
||||
|
||||
<!-- Create group modal -->
|
||||
<Modal :open="createGroupOpen" eyebrow="Groups" title="New group" size="md" @close="createGroupOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Group name</Eyebrow><input class="input" placeholder="Engineering" /></label>
|
||||
<label class="field"><Eyebrow>Mail alias</Eyebrow><input class="input" placeholder="eng@dezky.com" /></label>
|
||||
<label class="field"><Eyebrow>Description</Eyebrow><input class="input" placeholder="Product engineering team" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="createGroupOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="createGroupOpen = false; toast.ok('Group created')">Create group</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -665,21 +420,6 @@ Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.chip span { font-weight: 500; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.bulk {
|
||||
@@ -719,26 +459,12 @@ Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
.users-tbl tr:last-child td { border-bottom: none; }
|
||||
.users-tbl .right { text-align: right; }
|
||||
.users-tbl .check { width: 36px; }
|
||||
.users-tbl tr.no-hover { cursor: default; }
|
||||
.users-tbl tr.no-hover:hover { background: transparent; }
|
||||
.empty-row { padding: 40px 16px; text-align: center; }
|
||||
|
||||
.name-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.name-cell.small { gap: 8px; }
|
||||
.u-name { font-weight: 500; font-size: 13px; }
|
||||
.group-text { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
|
||||
.member-cell { display: flex; align-items: center; gap: 6px; }
|
||||
.g-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
.g-icon.big { width: 44px; height: 44px; border-radius: 10px; color: var(--text-dim); border: 1px solid var(--border); }
|
||||
|
||||
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 12px; color: var(--text-mute); }
|
||||
.pager-btns { display: flex; gap: 4px; }
|
||||
|
||||
.empty-card {
|
||||
padding: 60px 24px;
|
||||
@@ -766,40 +492,6 @@ Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
.def dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
|
||||
.def dd { margin: 0; font-size: 13px; color: var(--text); }
|
||||
|
||||
.sub-head { font-size: 13px; font-weight: 600; margin: 24px 0 8px; }
|
||||
.dev-row {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.dev-meta { flex: 1; }
|
||||
.dev-d { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.alias-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.activity-list { font-family: var(--font-mono); font-size: 12px; }
|
||||
.activity-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr auto;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.activity-action { color: var(--text); }
|
||||
|
||||
.empty-tab { text-align: center; padding: 60px 20px; }
|
||||
|
||||
/* Invite modal */
|
||||
.form-stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
Reference in New Issue
Block a user