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
+212
-238
@@ -1,76 +1,130 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-screens.jsx `BillingScreen` (lines 1134-1257)
|
||||
// with UpdatePaymentMethodModal (1262), EditBillingDetailsModal (1357) and
|
||||
// AddSeatsModal (1415). Hero plan card on a 1.4fr/1fr split with the payment
|
||||
// + business sub-cards on the right.
|
||||
// Subscription & invoices. Real data: the plan hero (plan, seats, spend,
|
||||
// renewal), billing details (tenant.billingInfo) and the invoice history
|
||||
// (/api/tenants/:slug/invoices) all come from platform-api.
|
||||
//
|
||||
// No real source yet → shown as "coming soon": the stored payment method
|
||||
// (Stripe doesn't expose it to platform-api). Plan-change, pause and add-seats
|
||||
// still toast-stub their mutations — subscription writes are operator-only, so
|
||||
// a customer admin can't commit them yet. Figures shown are the real numbers.
|
||||
|
||||
import type { InvoiceDoc, PaymentMethodCard, TenantUserDoc } from '~/types/workspace'
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
|
||||
const paymentOpen = ref(false)
|
||||
const { fetchMe } = useMe()
|
||||
await fetchMe()
|
||||
const { tenant, subscription, planLabel, currency, seatLimit, perSeatMonthly, monthlySpend, renewsAt } = useTenant()
|
||||
const slug = computed(() => tenant.value?.slug ?? '')
|
||||
|
||||
const { data: users } = await useFetch<TenantUserDoc[]>(
|
||||
() => `/api/tenants/${slug.value}/users`,
|
||||
{ key: 'billing-users', default: () => [], immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
const { data: invoices } = await useFetch<InvoiceDoc[]>(
|
||||
() => `/api/tenants/${slug.value}/invoices`,
|
||||
{ key: 'billing-invoices', default: () => [], immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
const { data: paymentMethod } = await useFetch<PaymentMethodCard | null>(
|
||||
() => `/api/tenants/${slug.value}/payment-method`,
|
||||
{ key: 'billing-pm', default: () => null, immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
|
||||
const pmOpen = ref(false)
|
||||
function onCardSaved(card: PaymentMethodCard | null) {
|
||||
paymentMethod.value = card
|
||||
toast.ok('Payment method updated')
|
||||
}
|
||||
|
||||
// ── Edit billing details ─────────────────────────────────────────────────
|
||||
const detailsOpen = ref(false)
|
||||
const savingDetails = ref(false)
|
||||
const det = reactive({ companyName: '', vatId: '', country: '', contactEmail: '' })
|
||||
function openDetails() {
|
||||
const b = billingInfo.value
|
||||
det.companyName = b.companyName ?? ''
|
||||
det.vatId = b.vatId ?? ''
|
||||
det.country = b.country ?? ''
|
||||
det.contactEmail = b.contactEmail ?? ''
|
||||
detailsOpen.value = true
|
||||
}
|
||||
async function saveDetails() {
|
||||
savingDetails.value = true
|
||||
try {
|
||||
await request(`/api/tenants/${slug.value}/billing-info`, { method: 'PATCH', body: { ...det } })
|
||||
await fetchMe(true) // refresh cached /me so the displayed billingInfo updates
|
||||
detailsOpen.value = false
|
||||
toast.ok('Billing details saved')
|
||||
} catch (e: unknown) {
|
||||
const msg = (e as { data?: { message?: string } })?.data?.message
|
||||
toast.bad('Could not save billing details', Array.isArray(msg) ? msg.join(', ') : msg)
|
||||
} finally {
|
||||
savingDetails.value = false
|
||||
}
|
||||
}
|
||||
function pmExpiry(c: PaymentMethodCard): string {
|
||||
return `${String(c.expMonth).padStart(2, '0')}/${c.expYear}`
|
||||
}
|
||||
|
||||
const seatsUsed = computed(() => (users.value ?? []).filter((u) => u.active !== false).length)
|
||||
const billingInfo = computed(() => tenant.value?.billingInfo ?? {})
|
||||
|
||||
const moneyFmt = computed(
|
||||
() => new Intl.NumberFormat('da-DK', { style: 'currency', currency: currency.value, maximumFractionDigits: 0 }),
|
||||
)
|
||||
function fmtDate(d: Date | null, opts: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'short', year: 'numeric' }): string {
|
||||
return d ? d.toLocaleDateString('da-DK', opts) : '—'
|
||||
}
|
||||
const cycleLabel = computed(() => {
|
||||
const c = subscription.value?.cycle
|
||||
return c === 'quarterly' ? 'quarterly' : c === 'yearly' ? 'yearly' : 'monthly'
|
||||
})
|
||||
|
||||
// Invoice amounts carry their own currency and are in minor units.
|
||||
function fmtMinor(minor: number, cur: string): string {
|
||||
return new Intl.NumberFormat('da-DK', { style: 'currency', currency: cur, maximumFractionDigits: 0 }).format(
|
||||
Math.round(minor / 100),
|
||||
)
|
||||
}
|
||||
function invDate(inv: InvoiceDoc): string {
|
||||
const iso = inv.periodStart ?? inv.createdAt
|
||||
return iso ? new Date(iso).toLocaleDateString('da-DK', { day: '2-digit', month: 'short', year: 'numeric' }) : '—'
|
||||
}
|
||||
const invStatusTone = (s: string): 'ok' | 'warn' | 'bad' | 'neutral' =>
|
||||
s === 'paid' ? 'ok' : s === 'past_due' || s === 'uncollectible' ? 'bad' : s === 'void' ? 'neutral' : 'warn'
|
||||
|
||||
// ── Action modals (mutations not wired — stubs) ──────────────────────────
|
||||
const seatsOpen = ref(false)
|
||||
const pauseOpen = ref(false)
|
||||
const planOpen = ref(false)
|
||||
|
||||
// AddSeats math
|
||||
const used = 11
|
||||
const current = 25
|
||||
const pricePerSeat = 78
|
||||
const daysUntilRenewal = 96
|
||||
// Add-seats math, fed by the real subscription. perSeatMonthly is already
|
||||
// cycle-normalized + in major units.
|
||||
const extra = ref(5)
|
||||
const totalSeats = computed(() => current + extra.value)
|
||||
const monthly = computed(() => extra.value * pricePerSeat)
|
||||
const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 30)))
|
||||
|
||||
// UpdatePaymentMethod modal state
|
||||
type Method = 'card' | 'invoice' | 'sepa'
|
||||
const method = ref<Method>('card')
|
||||
const card = reactive({ number: '', name: 'Anne Baslund', exp: '', cvc: '', country: 'DK', zip: '1620' })
|
||||
|
||||
// Edit billing details state
|
||||
const det = reactive({
|
||||
company: 'Baslund ApS',
|
||||
cvr: '42 18 09 33',
|
||||
contact: 'Anne Baslund',
|
||||
email: 'billing@dezky.com',
|
||||
addr1: 'Vesterbrogade 14',
|
||||
addr2: '',
|
||||
zip: '1620',
|
||||
city: 'København V',
|
||||
country: 'DK',
|
||||
vat: 'DK 42 18 09 33',
|
||||
currency: 'DKK',
|
||||
const pricePerSeat = computed(() => perSeatMonthly.value)
|
||||
const daysUntilRenewal = computed(() => {
|
||||
if (!renewsAt.value) return 30
|
||||
return Math.max(0, Math.round((renewsAt.value.getTime() - Date.now()) / 86_400_000))
|
||||
})
|
||||
|
||||
const invoices = [
|
||||
{ id: 'INV-2026-005', date: '01 May 2026', amount: '1.940,00 DKK', status: 'Paid' },
|
||||
{ id: 'INV-2026-004', date: '01 Apr 2026', amount: '1.940,00 DKK', status: 'Paid' },
|
||||
{ id: 'INV-2026-003', date: '01 Mar 2026', amount: '1.560,00 DKK', status: 'Paid' },
|
||||
{ id: 'INV-2026-002', date: '01 Feb 2026', amount: '1.560,00 DKK', status: 'Paid' },
|
||||
{ id: 'INV-2026-001', date: '01 Jan 2026', amount: '1.560,00 DKK', status: 'Paid' },
|
||||
]
|
||||
|
||||
const payMethods = [
|
||||
{ v: 'card' as const, l: 'Card', d: 'Visa · MC · Amex' },
|
||||
{ v: 'invoice' as const, l: 'Invoice (EAN)', d: 'Net 14 · DK B2B' },
|
||||
{ v: 'sepa' as const, l: 'SEPA · MobilePay', d: 'Direct debit · DK' },
|
||||
]
|
||||
|
||||
const totalSeats = computed(() => seatLimit.value + extra.value)
|
||||
const monthly = computed(() => extra.value * pricePerSeat.value)
|
||||
const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal.value / 30)))
|
||||
function quickSet(n: number) { extra.value = n }
|
||||
|
||||
function exportInvoices(format: 'OIOUBL' | 'CSV') {
|
||||
toast.info(`Exporting invoices as ${format}…`, format === 'OIOUBL' ? 'B2B · Nemhandel' : 'comma-separated · UTF-8')
|
||||
}
|
||||
function downloadInvoice(id: string) {
|
||||
toast.info('Downloading invoice…', id)
|
||||
}
|
||||
function viewInvoice(id: string) {
|
||||
toast.info('Opening invoice', id)
|
||||
function openInvoice(inv: InvoiceDoc) {
|
||||
if (inv.pdfUrl || inv.hostedInvoiceUrl) {
|
||||
window.open(inv.pdfUrl ?? inv.hostedInvoiceUrl, '_blank', 'noopener')
|
||||
} else {
|
||||
toast.info('Invoice document not available yet', inv.number ?? '')
|
||||
}
|
||||
}
|
||||
function confirmPause() {
|
||||
pauseOpen.value = false
|
||||
toast.ok('Subscription paused', 'Resumes automatically on 28 Aug 2026')
|
||||
toast.ok('Subscription paused', renewsAt.value ? `Resumes on ${fmtDate(renewsAt.value)}` : undefined)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -80,14 +134,7 @@ function confirmPause() {
|
||||
eyebrow="Billing"
|
||||
title="Subscription & invoices"
|
||||
subtitle="Manage your plan, payment method, and tax-compliant invoices."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" @click="toast.info('Bundling invoice ZIP…')">
|
||||
<template #leading><UiIcon name="download" :size="14" /></template>
|
||||
Download all (.zip)
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div class="top-row">
|
||||
@@ -97,15 +144,15 @@ function confirmPause() {
|
||||
<div class="hero-head">
|
||||
<div>
|
||||
<div class="kicker">// current plan</div>
|
||||
<div class="hero-title">Business</div>
|
||||
<div class="hero-sub">25 seats · invoiced monthly</div>
|
||||
<div class="hero-title">{{ planLabel }}</div>
|
||||
<div class="hero-sub">{{ seatLimit }} seats · invoiced {{ cycleLabel }}</div>
|
||||
</div>
|
||||
<Badge tone="accent">Renews 28 Aug 2026</Badge>
|
||||
<Badge tone="accent">{{ renewsAt ? `Renews ${fmtDate(renewsAt)}` : (subscription?.status ?? '—') }}</Badge>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div><div class="hero-label">Seats used</div><div class="hero-num">11 / 25</div></div>
|
||||
<div><div class="hero-label">This month</div><div class="hero-num">1.940 DKK</div></div>
|
||||
<div><div class="hero-label">Next invoice</div><div class="hero-num">01 Jun</div></div>
|
||||
<div><div class="hero-label">Seats used</div><div class="hero-num">{{ seatsUsed }} / {{ seatLimit }}</div></div>
|
||||
<div><div class="hero-label">Per month</div><div class="hero-num">{{ moneyFmt.format(monthlySpend) }}</div></div>
|
||||
<div><div class="hero-label">Next invoice</div><div class="hero-num">{{ fmtDate(renewsAt, { day: '2-digit', month: 'short' }) }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
@@ -116,36 +163,40 @@ function confirmPause() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Payment + business details -->
|
||||
<!-- Payment (coming soon) + business details (real) -->
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<Eyebrow>Payment</Eyebrow>
|
||||
<div class="card-title">Payment method</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost" @click="paymentOpen = true">Update</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="pmOpen = true">{{ paymentMethod ? 'Update' : 'Add card' }}</UiButton>
|
||||
</div>
|
||||
<div class="visa-row">
|
||||
<div class="visa">VISA</div>
|
||||
<div class="visa-meta">
|
||||
<div class="visa-num">•••• •••• •••• 4242</div>
|
||||
<div class="visa-sub">Expires 11/2028 · Anne Baslund</div>
|
||||
<div v-if="paymentMethod" class="pm-row">
|
||||
<div class="pm-chip">{{ paymentMethod.brand.toUpperCase() }}</div>
|
||||
<div class="pm-meta">
|
||||
<div class="pm-num">•••• •••• •••• {{ paymentMethod.last4 }}</div>
|
||||
<div class="pm-sub">Expires {{ pmExpiry(paymentMethod) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="soon-box">
|
||||
<UiIcon name="card" :size="16" stroke="var(--text-mute)" />
|
||||
<div>No card on file. Add one to pay invoices automatically — handled securely by Stripe.</div>
|
||||
</div>
|
||||
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<Eyebrow>Business</Eyebrow>
|
||||
<div class="card-title">Billing details</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost" @click="detailsOpen = true">Edit</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="openDetails">Edit</UiButton>
|
||||
</div>
|
||||
<dl class="def">
|
||||
<div><dt>Company</dt><dd>Baslund ApS</dd></div>
|
||||
<div><dt>CVR</dt><dd>42 18 09 33</dd></div>
|
||||
<div><dt>Address</dt><dd>Vesterbrogade 14, 1620 København V</dd></div>
|
||||
<div><dt>VAT</dt><dd>DK 42 18 09 33</dd></div>
|
||||
<div><dt>Currency</dt><dd>DKK · EUR available</dd></div>
|
||||
<div><dt>Company</dt><dd>{{ billingInfo.companyName || tenant?.name || '—' }}</dd></div>
|
||||
<div><dt>VAT</dt><dd>{{ billingInfo.vatId || '—' }}</dd></div>
|
||||
<div><dt>Country</dt><dd>{{ billingInfo.country || '—' }}</dd></div>
|
||||
<div><dt>Invoice email</dt><dd>{{ billingInfo.contactEmail || '—' }}</dd></div>
|
||||
<div><dt>Currency</dt><dd>{{ currency }}</dd></div>
|
||||
</dl>
|
||||
</Card>
|
||||
</div>
|
||||
@@ -158,8 +209,8 @@ function confirmPause() {
|
||||
<div class="card-title">Invoices</div>
|
||||
</div>
|
||||
<div class="invoices-actions">
|
||||
<UiButton size="sm" variant="secondary" @click="exportInvoices('OIOUBL')">OIOUBL (B2B)</UiButton>
|
||||
<UiButton size="sm" variant="secondary" @click="exportInvoices('CSV')">CSV</UiButton>
|
||||
<UiButton size="sm" variant="secondary" :disabled="invoices.length === 0" @click="exportInvoices('OIOUBL')">OIOUBL (B2B)</UiButton>
|
||||
<UiButton size="sm" variant="secondary" :disabled="invoices.length === 0" @click="exportInvoices('CSV')">CSV</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
<table class="inv-table">
|
||||
@@ -169,14 +220,18 @@ function confirmPause() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="inv in invoices" :key="inv.id">
|
||||
<td><Mono>{{ inv.id }}</Mono></td>
|
||||
<td>{{ inv.date }}</td>
|
||||
<td><span class="amount">{{ inv.amount }}</span></td>
|
||||
<td><Badge tone="ok" dot>{{ inv.status.toLowerCase() }}</Badge></td>
|
||||
<tr v-for="inv in invoices" :key="inv._id">
|
||||
<td><Mono>{{ inv.number || inv._id.slice(-8) }}</Mono></td>
|
||||
<td>{{ invDate(inv) }}</td>
|
||||
<td><span class="amount">{{ fmtMinor(inv.amountDue, inv.currency) }}</span></td>
|
||||
<td><Badge :tone="invStatusTone(inv.status)" dot>{{ inv.status }}</Badge></td>
|
||||
<td class="right">
|
||||
<UiButton size="sm" variant="ghost" @click="downloadInvoice(inv.id)"><template #leading><UiIcon name="download" :size="13" /></template>PDF</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="viewInvoice(inv.id)"><template #leading><UiIcon name="external" :size="13" /></template>View</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="openInvoice(inv)"><template #leading><UiIcon name="external" :size="13" /></template>View</UiButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="invoices.length === 0" class="no-hover">
|
||||
<td colspan="5" class="empty-row">
|
||||
<Mono dim>No invoices yet. They'll appear here after your first billing cycle.</Mono>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -184,103 +239,6 @@ function confirmPause() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Update payment method modal -->
|
||||
<Modal :open="paymentOpen" eyebrow="Billing · payment method" title="Update payment method" size="md" @close="paymentOpen = false">
|
||||
<div class="pay">
|
||||
<div>
|
||||
<Eyebrow>Pay by</Eyebrow>
|
||||
<div class="pay-options">
|
||||
<button v-for="o in payMethods" :key="o.v" :class="{ active: method === o.v }" @click="method = o.v">
|
||||
<div class="po-label">{{ o.l }}</div>
|
||||
<Mono dim>{{ o.d }}</Mono>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="method === 'card'">
|
||||
<label class="field"><Eyebrow>Card number</Eyebrow>
|
||||
<div class="input-row">
|
||||
<UiIcon name="card" :size="15" stroke="var(--text-mute)" />
|
||||
<input v-model="card.number" placeholder="4242 4242 4242 4242" />
|
||||
<Mono dim>VISA · MC · AMEX</Mono>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>Name on card</Eyebrow><input class="input" v-model="card.name" /></label>
|
||||
<div class="grid-2">
|
||||
<label class="field"><Eyebrow>Expiry</Eyebrow><input class="input" v-model="card.exp" placeholder="MM / YY" /></label>
|
||||
<label class="field"><Eyebrow>CVC</Eyebrow><input class="input" v-model="card.cvc" placeholder="3 digits" /></label>
|
||||
</div>
|
||||
<div class="grid-14-1">
|
||||
<label class="field"><Eyebrow>Country</Eyebrow><CountrySelect v-model="card.country" /></label>
|
||||
<label class="field"><Eyebrow>Postal code</Eyebrow><input class="input" v-model="card.zip" /></label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="method === 'invoice'">
|
||||
<label class="field"><Eyebrow>EAN number</Eyebrow><input class="input" placeholder="5790000000000" /></label>
|
||||
<label class="field"><Eyebrow>Purchase order reference (optional)</Eyebrow><input class="input" placeholder="Internal PO # to include on invoice" /></label>
|
||||
<div class="note">
|
||||
<Mono dim>// OIOUBL · Nemhandel</Mono>
|
||||
<div class="note-body">Invoices are delivered to your EAN via the Nemhandel network. Payment terms are <b>net 14 days</b> from invoice date. The first invoice arrives on the next billing cycle.</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<label class="field"><Eyebrow>IBAN</Eyebrow><input class="input" placeholder="DK00 0000 0000 0000 00" /></label>
|
||||
<label class="field"><Eyebrow>Account holder name</Eyebrow><input class="input" value="Baslund ApS" /></label>
|
||||
<label class="check"><input type="checkbox" checked /> I authorise Dezky to debit this account by SEPA Direct Debit</label>
|
||||
</template>
|
||||
|
||||
<div class="trust">
|
||||
<UiIcon name="shield" :size="14" stroke="var(--ok)" />
|
||||
<div>Payment details are tokenised by our processor. Dezky never sees raw card numbers, IBANs, or CVC codes. PCI DSS Level 1.</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="paymentOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="paymentOpen = false; toast.ok('Payment method saved')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save payment method
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Edit billing details modal -->
|
||||
<Modal :open="detailsOpen" eyebrow="Billing · business details" title="Edit billing details" size="lg" @close="detailsOpen = false">
|
||||
<div class="details">
|
||||
<div class="grid-co">
|
||||
<label class="field"><Eyebrow>Company name</Eyebrow><input class="input" v-model="det.company" /></label>
|
||||
<label class="field"><Eyebrow>CVR / org. number</Eyebrow><input class="input" v-model="det.cvr" /></label>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<label class="field"><Eyebrow>Billing contact</Eyebrow><input class="input" v-model="det.contact" /></label>
|
||||
<label class="field"><Eyebrow>Invoice email</Eyebrow><input class="input" v-model="det.email" /></label>
|
||||
</div>
|
||||
<label class="field"><Eyebrow>Address line 1</Eyebrow><input class="input" v-model="det.addr1" /></label>
|
||||
<label class="field"><Eyebrow>Address line 2 (optional)</Eyebrow><input class="input" v-model="det.addr2" placeholder="Floor, suite, c/o…" /></label>
|
||||
<div class="grid-zip">
|
||||
<label class="field"><Eyebrow>Postal code</Eyebrow><input class="input" v-model="det.zip" /></label>
|
||||
<label class="field"><Eyebrow>City</Eyebrow><input class="input" v-model="det.city" /></label>
|
||||
<label class="field"><Eyebrow>Country</Eyebrow><CountrySelect v-model="det.country" /></label>
|
||||
</div>
|
||||
<div class="grid-co">
|
||||
<label class="field"><Eyebrow>VAT number</Eyebrow><input class="input" v-model="det.vat" /></label>
|
||||
<label class="field"><Eyebrow>Currency</Eyebrow><input class="input" v-model="det.currency" /></label>
|
||||
</div>
|
||||
<div class="note">
|
||||
<Mono dim>// VAT</Mono>
|
||||
<div class="note-body">For Danish customers, the CVR + VAT must match. Reverse-charge applies for EU B2B customers outside Denmark (we won't charge VAT, you self-account).</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="detailsOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="detailsOpen = false; toast.ok('Billing details saved')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save details
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Pause subscription confirmation -->
|
||||
<ConfirmDialog
|
||||
:open="pauseOpen"
|
||||
@@ -291,7 +249,7 @@ function confirmPause() {
|
||||
@close="pauseOpen = false"
|
||||
@confirm="confirmPause"
|
||||
>
|
||||
Members keep access until the end of the current billing cycle (28 Aug 2026), after
|
||||
Members keep access until the end of the current billing cycle{{ renewsAt ? ` (${fmtDate(renewsAt)})` : '' }}, after
|
||||
which sign-ins are blocked and data is held in cold storage. You can resume any time
|
||||
to restore full access.
|
||||
</ConfirmDialog>
|
||||
@@ -302,12 +260,11 @@ function confirmPause() {
|
||||
<div class="lead">Pick a new tier. We'll prorate the difference and apply it on your next invoice.</div>
|
||||
<div class="plan-options">
|
||||
<button v-for="p in [
|
||||
{ id: 'basic', name: 'Basic', price: '49 DKK / seat / mo', d: 'Mail · Drev · 50 GB', current: false },
|
||||
{ id: 'business', name: 'Business · current', price: '78 DKK / seat / mo', d: 'Everything in Basic + Møder + Chat · 200 GB', current: true },
|
||||
{ id: 'enterprise', name: 'Enterprise', price: 'from 140 DKK / seat / mo', d: 'SSO contracts · audit log retention · 1 TB', current: false },
|
||||
{ id: 'mvp', name: 'Starter', d: 'Mail · Drev · 50 GB', current: planLabel === 'Starter' },
|
||||
{ id: 'pro', name: 'Business', d: 'Everything in Starter + Møder + Chat · 200 GB', current: planLabel === 'Business' },
|
||||
{ id: 'enterprise', name: 'Enterprise', d: 'SSO contracts · audit log retention · 1 TB', current: planLabel === 'Enterprise' },
|
||||
]" :key="p.id" :class="['plan-card', { active: p.current }]">
|
||||
<div class="plan-name">{{ p.name }}</div>
|
||||
<Mono dim>{{ p.price }}</Mono>
|
||||
<div class="plan-name">{{ p.name }}{{ p.current ? ' · current' : '' }}</div>
|
||||
<div class="plan-d">{{ p.d }}</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -325,8 +282,8 @@ function confirmPause() {
|
||||
<Modal :open="seatsOpen" eyebrow="Billing · seats" title="Add seats" size="md" @close="seatsOpen = false">
|
||||
<div class="seats">
|
||||
<div class="seats-3col">
|
||||
<div><Eyebrow>Active users</Eyebrow><div class="big">{{ used }}</div></div>
|
||||
<div><Eyebrow>Current seats</Eyebrow><div class="big">{{ current }}</div></div>
|
||||
<div><Eyebrow>Active users</Eyebrow><div class="big">{{ seatsUsed }}</div></div>
|
||||
<div><Eyebrow>Current seats</Eyebrow><div class="big">{{ seatLimit }}</div></div>
|
||||
<div><Eyebrow>After change</Eyebrow><div class="big ok">{{ totalSeats }}</div></div>
|
||||
</div>
|
||||
|
||||
@@ -344,25 +301,49 @@ function confirmPause() {
|
||||
|
||||
<div class="bill-box">
|
||||
<Eyebrow>What you'll pay</Eyebrow>
|
||||
<div class="bb-row"><span>{{ extra }} new seat{{ extra === 1 ? '' : 's' }} × {{ pricePerSeat }} DKK / month</span><Mono>{{ monthly.toLocaleString('da-DK') }} DKK / mo</Mono></div>
|
||||
<div class="bb-row sep"><span class="dim">Prorated for current cycle ({{ daysUntilRenewal }} days until renewal)</span><Mono dim>{{ prorated.toLocaleString('da-DK') }} DKK</Mono></div>
|
||||
<div class="bb-row total"><span>Charged today</span><span class="hero-amount">{{ prorated.toLocaleString('da-DK') }} DKK</span></div>
|
||||
<div class="bb-row"><span class="dim">Next invoice on 01 Jun 2026</span><Mono dim>{{ (1940 + monthly).toLocaleString('da-DK') }} DKK</Mono></div>
|
||||
<div class="bb-row"><span>{{ extra }} new seat{{ extra === 1 ? '' : 's' }} × {{ moneyFmt.format(pricePerSeat) }} / month</span><Mono>{{ moneyFmt.format(monthly) }} / mo</Mono></div>
|
||||
<div class="bb-row sep"><span class="dim">Prorated for current cycle ({{ daysUntilRenewal }} days until renewal)</span><Mono dim>{{ moneyFmt.format(prorated) }}</Mono></div>
|
||||
<div class="bb-row total"><span>Charged today</span><span class="hero-amount">{{ moneyFmt.format(prorated) }}</span></div>
|
||||
<div class="bb-row"><span class="dim"><template v-if="renewsAt">Next invoice on {{ fmtDate(renewsAt) }}</template><template v-else>Next invoice</template></span><Mono dim>{{ moneyFmt.format(monthlySpend + monthly) }}</Mono></div>
|
||||
</div>
|
||||
|
||||
<div class="trust">
|
||||
<UiIcon name="card" :size="14" stroke="var(--text-mute)" />
|
||||
<div>Charged to <Mono>Visa •••• 4242</Mono>. Seats are added instantly — invitations can be sent right away.</div>
|
||||
<div>Seats are added instantly — invitations can be sent right away.</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="seatsOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="seatsOpen = false; toast.ok(`${extra} seats added · charged ${prorated.toLocaleString('da-DK')} DKK`)">
|
||||
<UiButton variant="primary" @click="seatsOpen = false; toast.ok(`${extra} seats added · charged ${moneyFmt.format(prorated)}`)">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add {{ extra }} seat{{ extra === 1 ? '' : 's' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Update payment method (Stripe Elements) -->
|
||||
<PaymentMethodModal :open="pmOpen" :slug="slug" @close="pmOpen = false" @saved="onCardSaved" />
|
||||
|
||||
<!-- Edit billing details -->
|
||||
<Modal :open="detailsOpen" eyebrow="Billing · business details" title="Edit billing details" size="md" @close="detailsOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Company name</Eyebrow><input class="input" v-model="det.companyName" placeholder="Baslund ApS" /></label>
|
||||
<label class="field"><Eyebrow>VAT / CVR number</Eyebrow><input class="input" v-model="det.vatId" placeholder="DK12345678" /></label>
|
||||
<label class="field"><Eyebrow>Country</Eyebrow><CountrySelect v-model="det.country" placeholder="Select country" /></label>
|
||||
<label class="field"><Eyebrow>Invoice email</Eyebrow><input class="input" v-model="det.contactEmail" placeholder="billing@company.com" /></label>
|
||||
<div class="note">
|
||||
<Mono dim>// VAT</Mono>
|
||||
<div class="note-body">For Danish customers the CVR + VAT must match. EU B2B customers outside Denmark are reverse-charged (we won't add VAT; you self-account).</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="detailsOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" :disabled="savingDetails" @click="saveDetails">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
{{ savingDetails ? 'Saving…' : 'Save details' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -404,7 +385,21 @@ function confirmPause() {
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.visa-row {
|
||||
.soon-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border: 1px dashed var(--border-hi, var(--border));
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -413,9 +408,10 @@ function confirmPause() {
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.visa {
|
||||
width: 40px;
|
||||
.pm-chip {
|
||||
height: 28px;
|
||||
min-width: 44px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
@@ -427,9 +423,9 @@ function confirmPause() {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.visa-meta { flex: 1; }
|
||||
.visa-num { font-family: var(--font-mono); font-size: 13px; }
|
||||
.visa-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
|
||||
.pm-meta { flex: 1; }
|
||||
.pm-num { font-family: var(--font-mono); font-size: 13px; }
|
||||
.pm-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
|
||||
|
||||
.def { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 12px; column-gap: 16px; }
|
||||
.def > div { display: contents; }
|
||||
@@ -460,39 +456,9 @@ function confirmPause() {
|
||||
.inv-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
|
||||
.inv-table tr:last-child td { border-bottom: none; }
|
||||
.inv-table .right { text-align: right; display: flex; gap: 6px; justify-content: flex-end; }
|
||||
.inv-table tr.no-hover td { cursor: default; }
|
||||
.amount { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
|
||||
|
||||
/* Modal forms */
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.input { height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; }
|
||||
.input:focus { border-color: var(--text); }
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-row input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-mono); font-size: 13px; color: var(--text); letter-spacing: 0.05em; }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.grid-14-1 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
|
||||
.grid-co { display: grid; grid-template-columns: 1fr 200px; gap: 12px; }
|
||||
.grid-zip { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 12px; }
|
||||
|
||||
.pay { display: flex; flex-direction: column; gap: 16px; }
|
||||
.pay-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
|
||||
.pay-options button { padding: 12px; border-radius: 6px; text-align: left; font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); }
|
||||
.pay-options button.active { border-color: var(--text); background: var(--bg); }
|
||||
.po-label { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.details { display: flex; flex-direction: column; gap: 14px; }
|
||||
.note { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); line-height: 1.55; }
|
||||
.note-body { margin-top: 6px; }
|
||||
|
||||
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
|
||||
.empty-row { text-align: center; padding: 40px 16px; }
|
||||
|
||||
.trust {
|
||||
padding: 12px;
|
||||
@@ -566,4 +532,12 @@ function confirmPause() {
|
||||
.plan-card.active { border-color: var(--text); background: var(--bg); }
|
||||
.plan-name { font-size: 14px; font-weight: 500; }
|
||||
.plan-d { font-size: 12px; color: var(--text-mute); margin-top: 6px; }
|
||||
|
||||
/* Edit billing details modal */
|
||||
.form-stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.input { height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; }
|
||||
.input:focus { border-color: var(--text); }
|
||||
.note { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); line-height: 1.55; }
|
||||
.note-body { margin-top: 6px; }
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-screens.jsx `BrandingScreen` (lines 1542-1668)
|
||||
// with BrandingPreview (1669), UploadAssetModal (1733), EditEmailTemplatePanel
|
||||
// (1903), PublishBrandingModal (2031) and ResetBrandingModal (2148). Two-column
|
||||
// layout — controls on the left (420px), live preview on the right.
|
||||
// Customer whitelabel branding. Real data: product name + accent colour (on the
|
||||
// Tenant doc) and email-template overrides (TenantBranding), saved together via
|
||||
// PUT /api/tenants/:slug/branding. No backend yet for logo upload or custom-
|
||||
// domain verification, so those show honest "coming soon" states.
|
||||
//
|
||||
// Edit model: name/colour + the open template editor mutate LOCAL state; the
|
||||
// header "Save changes" persists everything in one PUT. The per-template
|
||||
// "Apply" just commits that template into local overrides.
|
||||
|
||||
import type { TenantBrandingView } from '~/types/workspace'
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
const { fetchMe } = useMe()
|
||||
await fetchMe()
|
||||
const { tenant } = useTenant()
|
||||
const slug = computed(() => tenant.value?.slug ?? '')
|
||||
|
||||
const color = ref('#D4FF3A')
|
||||
const name = ref('Acme Workspace')
|
||||
const DEFAULT_COLOR = '#D4FF3A'
|
||||
const colorPalette = ['#D4FF3A', '#3F6BFF', '#FF6B4A', '#5B8C5A', '#9B59B6']
|
||||
|
||||
const uploadAsset = ref<typeof ASSETS[number] | null>(null)
|
||||
const uploaded = ref(false)
|
||||
const dragOver = ref(false)
|
||||
const { data: branding } = await useFetch<TenantBrandingView>(
|
||||
() => `/api/tenants/${slug.value}/branding`,
|
||||
{ key: 'admin-branding', default: () => ({ name: '', emailTemplates: [] }), immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
|
||||
const editTemplate = ref<typeof TEMPLATES[number] | null>(null)
|
||||
const subject = ref('')
|
||||
const body = ref('')
|
||||
const testSent = ref(false)
|
||||
function sendTest() {
|
||||
testSent.value = true
|
||||
setTimeout(() => (testSent.value = false), 2500)
|
||||
// Local editable state, seeded from the fetched branding.
|
||||
const name = ref('')
|
||||
const color = ref(DEFAULT_COLOR)
|
||||
const overrides = reactive<Record<string, { subject: string; body: string }>>({})
|
||||
function seed() {
|
||||
const b = branding.value
|
||||
name.value = b?.name ?? ''
|
||||
color.value = b?.brandColor || DEFAULT_COLOR
|
||||
for (const k of Object.keys(overrides)) delete overrides[k]
|
||||
for (const t of b?.emailTemplates ?? []) overrides[t.key] = { subject: t.subject, body: t.body }
|
||||
}
|
||||
seed()
|
||||
watch(branding, seed)
|
||||
|
||||
const publishOpen = ref(false)
|
||||
const publishState = ref<'confirm' | 'publishing' | 'done'>('confirm')
|
||||
const resetOpen = ref(false)
|
||||
const primaryDomain = computed(() => branding.value?.primaryDomain ?? '')
|
||||
|
||||
const ASSETS = [
|
||||
{ id: 'full', l: 'Full logo', d: 'horizontal · 4:1 · png/svg', ratio: '4:1', formats: 'png · svg', maxKb: 400, current: false, currentName: '', currentSize: '' },
|
||||
{ id: 'mark', l: 'Square mark', d: '1:1 · transparent · png/svg', ratio: '1:1', formats: 'png · svg', maxKb: 200, current: true, currentName: 'acme-mark.svg', currentSize: '12 KB' },
|
||||
{ id: 'favicon', l: 'Favicon', d: '32×32 · ico/png', ratio: '1:1', formats: 'ico · png', maxKb: 50, current: true, currentName: 'favicon.ico', currentSize: '4 KB' },
|
||||
] as const
|
||||
// Auto-contrast foreground for surfaces painted in the accent colour, so the
|
||||
// preview stays legible whether the accent is bright or dark.
|
||||
const accentFg = computed(() => readableOn(color.value))
|
||||
const accentBtnText = computed(() => readableOn(accentFg.value))
|
||||
|
||||
// Canonical template defaults. Overrides (saved per tenant) win over these.
|
||||
const TEMPLATES = [
|
||||
{ id: 'invitation', name: 'User invitation', subject: 'You’ve been invited to {{workspace.name}}', desc: 'sent when an admin invites a new user', edited: '3 days ago' },
|
||||
{ id: 'reset', name: 'Password reset', subject: 'Reset your {{workspace.name}} password', desc: 'sent on forgot-password requests', edited: 'default' },
|
||||
{ id: 'digest', name: 'Notification digest', subject: 'Your weekly summary from {{workspace.name}}', desc: 'sent weekly to users opted-in for digests', edited: '2 weeks ago' },
|
||||
{ id: 'trial', name: 'Trial expiring', subject: 'Your trial ends in {{trial.days_left}} days', desc: 'sent 7 / 3 / 1 days before trial expiry', edited: 'default' },
|
||||
{ id: 'invitation', name: 'User invitation', subject: 'You’ve been invited to {{workspace.name}}', desc: 'sent when an admin invites a new user' },
|
||||
{ id: 'reset', name: 'Password reset', subject: 'Reset your {{workspace.name}} password', desc: 'sent on forgot-password requests' },
|
||||
{ id: 'digest', name: 'Notification digest', subject: 'Your weekly summary from {{workspace.name}}', desc: 'sent weekly to users opted-in for digests' },
|
||||
{ id: 'trial', name: 'Trial expiring', subject: 'Your trial ends in {{trial.days_left}} days', desc: 'sent 7 / 3 / 1 days before trial expiry' },
|
||||
] as const
|
||||
|
||||
const TEMPLATE_BODIES: Record<string, string> = {
|
||||
invitation: `Hi {{user.first_name}},
|
||||
|
||||
{{inviter.name}} has invited you to join {{workspace.name}} on dezky.
|
||||
{{inviter.name}} has invited you to join {{workspace.name}}.
|
||||
|
||||
Click below to set up your account — the link expires in 7 days.
|
||||
|
||||
@@ -92,42 +106,51 @@ const TEMPLATE_MERGE_TAGS: Record<string, string[]> = {
|
||||
trial: ['user.first_name', 'workspace.name', 'trial.days_left', 'stats.users', 'stats.gb', 'billing.url'],
|
||||
}
|
||||
|
||||
const colorPalette = ['#D4FF3A', '#3F6BFF', '#FF6B4A', '#5B8C5A', '#9B59B6']
|
||||
function isEdited(id: string): boolean {
|
||||
return !!overrides[id]
|
||||
}
|
||||
|
||||
// ── Template editor (side panel) ─────────────────────────────────────────
|
||||
const editTemplate = ref<typeof TEMPLATES[number] | null>(null)
|
||||
const subject = ref('')
|
||||
const body = ref('')
|
||||
const testSent = ref(false)
|
||||
|
||||
function openTemplate(t: typeof TEMPLATES[number]) {
|
||||
editTemplate.value = t
|
||||
subject.value = t.subject
|
||||
body.value = TEMPLATE_BODIES[t.id] || ''
|
||||
subject.value = overrides[t.id]?.subject ?? t.subject
|
||||
body.value = overrides[t.id]?.body ?? (TEMPLATE_BODIES[t.id] || '')
|
||||
testSent.value = false
|
||||
}
|
||||
|
||||
function insertTag(tag: string) {
|
||||
body.value += `{{${tag}}}`
|
||||
}
|
||||
|
||||
// Reset the currently-open template's subject + body to the canonical default.
|
||||
function resetTemplate() {
|
||||
if (!editTemplate.value) return
|
||||
subject.value = editTemplate.value.subject
|
||||
body.value = TEMPLATE_BODIES[editTemplate.value.id] || ''
|
||||
toast.info('Template reset to default')
|
||||
}
|
||||
|
||||
// Wrap a merge-tag name in mustaches via JS so the template doesn't have to
|
||||
// nest `{{ ... }}` inside `{{ ... }}` (which Vue's parser scans positionally
|
||||
// and breaks on).
|
||||
// Wrap a merge-tag name in mustaches via JS so the template never nests
|
||||
// `{{ ... }}` inside `{{ ... }}` (Vue's parser scans positionally and breaks).
|
||||
function wrapTag(tag: string) {
|
||||
return '{' + '{' + tag + '}' + '}'
|
||||
}
|
||||
|
||||
function startPublish() {
|
||||
publishState.value = 'publishing'
|
||||
setTimeout(() => { publishState.value = 'done' }, 1800)
|
||||
function insertTag(tag: string) {
|
||||
body.value += wrapTag(tag)
|
||||
}
|
||||
|
||||
function openPublish() {
|
||||
publishOpen.value = true
|
||||
publishState.value = 'confirm'
|
||||
// Commit the open template into local overrides (header Save persists).
|
||||
function applyTemplate() {
|
||||
if (!editTemplate.value) return
|
||||
overrides[editTemplate.value.id] = { subject: subject.value, body: body.value }
|
||||
editTemplate.value = null
|
||||
}
|
||||
|
||||
// Drop the override → revert to the canonical default (persisted on Save).
|
||||
function resetTemplate() {
|
||||
if (!editTemplate.value) return
|
||||
delete overrides[editTemplate.value.id]
|
||||
subject.value = editTemplate.value.subject
|
||||
body.value = TEMPLATE_BODIES[editTemplate.value.id] || ''
|
||||
toast.info('Reverted to default', 'Save changes to apply')
|
||||
}
|
||||
|
||||
function sendTest() {
|
||||
testSent.value = true
|
||||
setTimeout(() => (testSent.value = false), 2500)
|
||||
}
|
||||
|
||||
const renderedSubject = computed(() =>
|
||||
@@ -139,13 +162,13 @@ const renderedSubject = computed(() =>
|
||||
const renderedBody = computed(() =>
|
||||
body.value
|
||||
.replace(/\{\{workspace\.name\}\}/g, name.value)
|
||||
.replace(/\{\{workspace\.url\}\}/g, 'workspace.acme.dk')
|
||||
.replace(/\{\{workspace\.url\}\}/g, primaryDomain.value || 'your-workspace')
|
||||
.replace(/\{\{user\.first_name\}\}/g, 'Anne')
|
||||
.replace(/\{\{user\.email\}\}/g, 'anne@acme.dk')
|
||||
.replace(/\{\{user\.email\}\}/g, 'anne@example.com')
|
||||
.replace(/\{\{inviter\.name\}\}/g, 'Mikkel Nørgaard')
|
||||
.replace(/\{\{invite\.url\}\}/g, 'workspace.acme.dk/accept/x9k2a')
|
||||
.replace(/\{\{reset\.url\}\}/g, 'workspace.acme.dk/reset/p2b7c')
|
||||
.replace(/\{\{billing\.url\}\}/g, 'workspace.acme.dk/billing')
|
||||
.replace(/\{\{invite\.url\}\}/g, `${primaryDomain.value || 'your-workspace'}/accept/x9k2a`)
|
||||
.replace(/\{\{reset\.url\}\}/g, `${primaryDomain.value || 'your-workspace'}/reset/p2b7c`)
|
||||
.replace(/\{\{billing\.url\}\}/g, `${primaryDomain.value || 'your-workspace'}/billing`)
|
||||
.replace(/\{\{trial\.days_left\}\}/g, '3')
|
||||
.replace(/\{\{stats\.messages\}\}/g, '1.840')
|
||||
.replace(/\{\{stats\.files\}\}/g, '24')
|
||||
@@ -153,6 +176,31 @@ const renderedBody = computed(() =>
|
||||
.replace(/\{\{stats\.users\}\}/g, '8')
|
||||
.replace(/\{\{stats\.gb\}\}/g, '14'),
|
||||
)
|
||||
|
||||
// ── Save ─────────────────────────────────────────────────────────────────
|
||||
const saving = ref(false)
|
||||
async function save() {
|
||||
if (!slug.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = {
|
||||
name: name.value,
|
||||
brandColor: color.value,
|
||||
emailTemplates: Object.entries(overrides).map(([key, v]) => ({ key, subject: v.subject, body: v.body })),
|
||||
}
|
||||
branding.value = await request<TenantBrandingView>(`/api/tenants/${slug.value}/branding`, {
|
||||
method: 'PUT',
|
||||
body: payload,
|
||||
})
|
||||
await fetchMe(true) // name lives on the tenant → refresh dashboard/sidebar identity
|
||||
toast.ok('Branding saved')
|
||||
} catch (e: unknown) {
|
||||
const msg = (e as { data?: { message?: string | string[] } })?.data?.message
|
||||
toast.bad('Could not save branding', Array.isArray(msg) ? msg.join(', ') : msg)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -160,11 +208,13 @@ const renderedBody = computed(() =>
|
||||
<PageHeader
|
||||
eyebrow="Whitelabel"
|
||||
title="Branding"
|
||||
subtitle="Replace the dezky shell with your own logo, color, and product name. Changes propagate everywhere."
|
||||
subtitle="Give your workspace its own name, accent colour, and email copy."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="ghost" @click="resetOpen = true">Reset</UiButton>
|
||||
<UiButton variant="primary" @click="openPublish">Publish</UiButton>
|
||||
<UiButton variant="primary" :disabled="saving || !slug" @click="save">
|
||||
<template #leading><UiIcon name="check" :size="14" /></template>
|
||||
{{ saving ? 'Saving…' : 'Save changes' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
@@ -175,9 +225,11 @@ const renderedBody = computed(() =>
|
||||
<div class="card-head"><Eyebrow>Identity</Eyebrow><div class="card-title">Product identity</div></div>
|
||||
<label class="field"><Eyebrow>Product name (shown to users)</Eyebrow><input class="input" v-model="name" /></label>
|
||||
<label class="field"><Eyebrow>Custom domain</Eyebrow>
|
||||
<div class="input-row">
|
||||
<input value="workspace.acme.dk" readonly />
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<div v-if="primaryDomain" class="input-row">
|
||||
<input :value="primaryDomain" readonly />
|
||||
</div>
|
||||
<div v-else class="soon-inline">
|
||||
<Mono dim>Custom domains coming soon</Mono>
|
||||
</div>
|
||||
</label>
|
||||
</Card>
|
||||
@@ -199,32 +251,22 @@ const renderedBody = computed(() =>
|
||||
|
||||
<Card>
|
||||
<div class="card-head"><Eyebrow>Assets</Eyebrow><div class="card-title">Logo upload</div></div>
|
||||
<div class="assets">
|
||||
<div v-for="a in ASSETS" :key="a.id" class="asset" :class="{ has: a.current }">
|
||||
<div class="asset-icon" :style="{ color: a.current ? 'var(--ok)' : 'var(--text-mute)' }">
|
||||
<UiIcon :name="a.current ? 'check' : 'upload'" :size="16" :stroke-width="a.current ? 2.5 : 2" />
|
||||
</div>
|
||||
<div class="asset-meta">
|
||||
<div class="asset-l">{{ a.l }}</div>
|
||||
<Mono dim>{{ a.current ? `${a.currentName} · ${a.currentSize}` : a.d }}</Mono>
|
||||
</div>
|
||||
<UiButton size="sm" :variant="a.current ? 'ghost' : 'secondary'" @click="uploadAsset = a as any; uploaded = false">
|
||||
{{ a.current ? 'Replace' : 'Upload' }}
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="soon-box">
|
||||
<UiIcon name="upload" :size="16" stroke="var(--text-mute)" />
|
||||
<div>Logo, square mark and favicon upload is coming soon. For now your accent colour and product name drive the workspace look.</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head"><Eyebrow>Templates</Eyebrow><div class="card-title">Email templates</div></div>
|
||||
<div class="templates">
|
||||
<button v-for="t in TEMPLATES" :key="t.id" class="tmpl-row" @click="openTemplate(t as any)">
|
||||
<button v-for="t in TEMPLATES" :key="t.id" class="tmpl-row" @click="openTemplate(t)">
|
||||
<div class="tmpl-meta">
|
||||
<div class="tmpl-name-row">
|
||||
<span class="tmpl-name">{{ t.name }}</span>
|
||||
<Badge :tone="t.edited === 'default' ? 'neutral' : 'info'">{{ t.edited === 'default' ? 'default' : 'edited' }}</Badge>
|
||||
<Badge :tone="isEdited(t.id) ? 'info' : 'neutral'">{{ isEdited(t.id) ? 'edited' : 'default' }}</Badge>
|
||||
</div>
|
||||
<Mono dim>edited {{ t.edited }}</Mono>
|
||||
<Mono dim>{{ t.desc }}</Mono>
|
||||
</div>
|
||||
<UiIcon name="chevRight" :size="14" stroke="var(--text-mute)" />
|
||||
</button>
|
||||
@@ -236,18 +278,18 @@ const renderedBody = computed(() =>
|
||||
<div class="preview-col">
|
||||
<div class="preview-head">
|
||||
<Eyebrow>Live preview</Eyebrow>
|
||||
<Mono dim>workspace.acme.dk</Mono>
|
||||
<Mono dim>{{ primaryDomain || slug }}</Mono>
|
||||
</div>
|
||||
<div class="preview-frame">
|
||||
<div class="frame-topbar">
|
||||
<div class="frame-mark" :style="{ background: color }">{{ name[0]?.toLowerCase() || 'a' }}</div>
|
||||
<div class="frame-mark" :style="{ background: color, color: accentFg }">{{ name[0]?.toLowerCase() || 'a' }}</div>
|
||||
<div class="frame-brand">{{ name.toLowerCase() }}</div>
|
||||
<div class="frame-spacer" />
|
||||
<div class="frame-user">anne@acme.dk</div>
|
||||
<div class="frame-user">{{ primaryDomain ? `you@${primaryDomain}` : 'your team' }}</div>
|
||||
</div>
|
||||
<div class="frame-hero">
|
||||
<div class="frame-eyebrow">Dashboard</div>
|
||||
<div class="frame-title">Good morning, Anne.</div>
|
||||
<div class="frame-title">Good morning.</div>
|
||||
<div class="frame-tiles">
|
||||
<div v-for="n in ['Mail', 'Drev', 'Møder', 'Chat']" :key="n" class="frame-tile">
|
||||
<div class="frame-tile-icon">{{ n[0] }}</div>
|
||||
@@ -256,10 +298,10 @@ const renderedBody = computed(() =>
|
||||
</div>
|
||||
<div class="frame-cta" :style="{ background: color }">
|
||||
<div>
|
||||
<div class="frame-cta-title">Welcome to {{ name }}.</div>
|
||||
<div class="frame-cta-sub">Your team's workspace is ready.</div>
|
||||
<div class="frame-cta-title" :style="{ color: accentFg }">Welcome to {{ name || 'your workspace' }}.</div>
|
||||
<div class="frame-cta-sub" :style="{ color: accentFg, opacity: 0.75 }">Your team's workspace is ready.</div>
|
||||
</div>
|
||||
<button class="frame-cta-btn">Get started</button>
|
||||
<button class="frame-cta-btn" :style="{ background: accentFg, color: accentBtnText }">Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame-foot">
|
||||
@@ -270,86 +312,6 @@ const renderedBody = computed(() =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload asset modal -->
|
||||
<Modal :open="!!uploadAsset" :eyebrow="uploadAsset ? `Branding · ${uploadAsset.l.toLowerCase()}` : ''" :title="uploadAsset ? `Upload ${uploadAsset.l.toLowerCase()}` : ''" size="md" @close="uploadAsset = null">
|
||||
<div v-if="uploadAsset" class="upload">
|
||||
<button v-if="!uploaded" class="dropzone" :class="{ over: dragOver }"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave="dragOver = false"
|
||||
@drop.prevent="dragOver = false; uploaded = true"
|
||||
@click="uploaded = true">
|
||||
<UiIcon name="upload" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="drop-text">
|
||||
<div class="drop-title">Drop {{ uploadAsset.l.toLowerCase() }} here, or click to browse</div>
|
||||
<Mono dim>{{ uploadAsset.formats }} · {{ uploadAsset.ratio }} ratio · up to {{ uploadAsset.maxKb }} KB</Mono>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<template v-if="uploaded">
|
||||
<div class="upload-preview">
|
||||
<div class="upload-mark" :style="{ width: uploadAsset.id === 'full' ? '96px' : '56px' }">
|
||||
{{ uploadAsset.id === 'full' ? 'acme' : 'a' }}
|
||||
</div>
|
||||
<div class="upload-meta">
|
||||
<div class="upload-name">{{ uploadAsset.id === 'favicon' ? 'favicon-new.png' : uploadAsset.id === 'mark' ? 'acme-mark-v2.svg' : 'acme-logo.svg' }}</div>
|
||||
<Mono dim>{{ uploadAsset.id === 'favicon' ? '6 KB' : uploadAsset.id === 'mark' ? '14 KB' : '38 KB' }} · {{ uploadAsset.id === 'favicon' ? '32×32' : uploadAsset.id === 'mark' ? '512×512' : '1200×300' }} · clean alpha</Mono>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost" @click="uploaded = false">Replace</UiButton>
|
||||
</div>
|
||||
<Eyebrow>Looks good</Eyebrow>
|
||||
<div class="check-list">
|
||||
<div class="check-row">
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<Mono dim>Format</Mono>
|
||||
<span>{{ uploadAsset.formats.split(' · ')[0] }} ✓</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<Mono dim>Dimensions</Mono>
|
||||
<span>{{ uploadAsset.id === 'favicon' ? '32×32 ✓' : uploadAsset.ratio + ' ✓' }}</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<Mono dim>Size</Mono>
|
||||
<span>{{ uploadAsset.id === 'favicon' ? '6 KB' : uploadAsset.id === 'mark' ? '14 KB' : '38 KB' }} (under {{ uploadAsset.maxKb }} KB)</span>
|
||||
</div>
|
||||
<div class="check-row">
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<Mono dim>Transparency</Mono>
|
||||
<span>{{ uploadAsset.id === 'favicon' ? 'opaque background OK' : 'transparent background ✓' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ld-preview">
|
||||
<Eyebrow>Preview · on light + dark</Eyebrow>
|
||||
<div class="ld-grid">
|
||||
<div class="ld-light">
|
||||
<div class="ld-mark dark" :style="{ width: uploadAsset.id === 'full' ? '80px' : '32px' }">{{ uploadAsset.id === 'full' ? 'acme' : 'a' }}</div>
|
||||
</div>
|
||||
<div class="ld-dark">
|
||||
<div class="ld-mark light" :style="{ width: uploadAsset.id === 'full' ? '80px' : '32px' }">{{ uploadAsset.id === 'full' ? 'acme' : 'a' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="req-box">
|
||||
<Mono dim>// requirements</Mono>
|
||||
<div class="req-body">
|
||||
<template v-if="uploadAsset.id === 'full'">Used in the top navigation bar, login screen, and email headers. Roughly 200×50 displayed — supply at 2× minimum.</template>
|
||||
<template v-else-if="uploadAsset.id === 'mark'">Used as the app icon, favicon fallback, and any compact context (PWA install, notifications). Must read at 24×24.</template>
|
||||
<template v-else>Browser tab icon and bookmark badge. 32×32 is the standard size — modern browsers use the same file at 16×16.</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="uploadAsset = null">Cancel</UiButton>
|
||||
<UiButton variant="primary" :disabled="!uploaded" @click="uploadAsset = null">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
{{ uploaded ? 'Use this asset' : 'Select a file to continue' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Edit email template side panel -->
|
||||
<SidePanel :open="!!editTemplate" :eyebrow="'Email template'" :title="editTemplate?.name || ''" width="lg" @close="editTemplate = null">
|
||||
<div v-if="editTemplate" class="tmpl-edit">
|
||||
@@ -372,12 +334,12 @@ const renderedBody = computed(() =>
|
||||
<div class="email-head">
|
||||
<div class="from-row">
|
||||
<div class="from-mark" :style="{ background: '#0A0A0A', color }">{{ name[0]?.toLowerCase() || 'a' }}</div>
|
||||
<Mono dim>From: {{ name.toLowerCase().replace(/\s+/g, '-') }}@dezky.com</Mono>
|
||||
<Mono dim>From: {{ (name || 'workspace').toLowerCase().replace(/\s+/g, '-') }}</Mono>
|
||||
</div>
|
||||
<div class="email-subj">{{ renderedSubject }}</div>
|
||||
</div>
|
||||
<div class="email-body">{{ renderedBody }}</div>
|
||||
<div class="email-foot" :style="{ background: color }">{{ name }} · workspace.acme.dk</div>
|
||||
<div class="email-foot" :style="{ background: color, color: accentFg }">{{ name || 'Your workspace' }}{{ primaryDomain ? ` · ${primaryDomain}` : '' }}</div>
|
||||
</div>
|
||||
<Mono dim style="text-align: center; display: block;">preview substitutes sample data · real send uses recipient's data</Mono>
|
||||
</div>
|
||||
@@ -390,123 +352,14 @@ const renderedBody = computed(() =>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="secondary" @click="sendTest">
|
||||
<template #leading><UiIcon name="mail" :size="13" /></template>
|
||||
{{ testSent ? 'Sent to anne@dezky.com ✓' : 'Send test to me' }}
|
||||
{{ testSent ? 'Test queued ✓' : 'Send test to me' }}
|
||||
</UiButton>
|
||||
<UiButton variant="primary" @click="editTemplate = null">
|
||||
<UiButton variant="primary" @click="applyTemplate">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save template
|
||||
Apply
|
||||
</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
<!-- Publish modal -->
|
||||
<Modal :open="publishOpen" eyebrow="Branding · publish" :title="publishState === 'done' ? 'Branding published' : 'Publish branding changes?'" size="md" @close="publishState !== 'publishing' ? (publishOpen = false) : null">
|
||||
<template v-if="publishState === 'confirm'">
|
||||
<div class="publish-intro">These changes will replace dezky's branding for everyone in your workspace within ~30 seconds.</div>
|
||||
<Eyebrow>Will go live</Eyebrow>
|
||||
<div class="publish-summary">
|
||||
<div class="ps-row"><Mono dim>Product name</Mono><span>{{ name }}</span></div>
|
||||
<div class="ps-row">
|
||||
<Mono dim>Primary color</Mono>
|
||||
<span class="color-line">
|
||||
<span class="color-chip" :style="{ background: color }" />
|
||||
<Mono>{{ color }}</Mono>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ps-row">
|
||||
<Mono dim>Custom domain</Mono>
|
||||
<Mono>workspace.acme.dk</Mono>
|
||||
<Badge tone="ok" dot>verified</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Eyebrow>Propagates to</Eyebrow>
|
||||
<div class="prop-grid">
|
||||
<div v-for="[k, t] in [
|
||||
['Web app · workspace shell', '~10s'],
|
||||
['Login + auth pages', '~10s'],
|
||||
['Outbound email templates', '~30s'],
|
||||
['Mobile app · next session', 'on next launch'],
|
||||
['Status page', '~30s'],
|
||||
['PDF invoices', 'next billing cycle'],
|
||||
]" :key="k" class="prop-cell">
|
||||
<UiIcon name="check" :size="11" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<span>{{ k }}</span>
|
||||
<Mono dim>{{ t }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<div class="publish-warn">
|
||||
<UiIcon name="shield" :size="14" stroke="var(--warn)" />
|
||||
<div>Users may need to hard-refresh to see the new branding immediately. You can revert with one click for the next 7 days.</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="publishState === 'publishing'">
|
||||
<div class="publishing">
|
||||
<div class="spinner" />
|
||||
<div class="publish-title">Publishing across services…</div>
|
||||
<Mono dim>web shell · auth · mail templates · CDN</Mono>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="done-head">
|
||||
<div class="done-badge" :style="{ background: color }">
|
||||
<UiIcon name="check" :size="20" :stroke-width="2.5" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="publish-title">{{ name }} branding is live</div>
|
||||
<Mono dim>5 services updated · 1 queued for next cycle</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<div class="done-list">
|
||||
<dl class="def">
|
||||
<div><dt>Web app + auth</dt><dd>live · 8 seconds</dd></div>
|
||||
<div><dt>Email templates</dt><dd>live · 18 seconds</dd></div>
|
||||
<div><dt>Mobile · status · CDN</dt><dd>queued · ~30s</dd></div>
|
||||
<div><dt>PDF invoices</dt><dd>starts 01 Jun 2026</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<template v-if="publishState === 'confirm'">
|
||||
<UiButton variant="ghost" @click="publishOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="startPublish">
|
||||
<template #leading><UiIcon name="external" :size="13" /></template>
|
||||
Publish now
|
||||
</UiButton>
|
||||
</template>
|
||||
<template v-else-if="publishState === 'publishing'">
|
||||
<UiButton variant="ghost" disabled>Publishing…</UiButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<UiButton variant="primary" @click="publishOpen = false">Done</UiButton>
|
||||
</template>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Reset branding modal -->
|
||||
<Modal :open="resetOpen" eyebrow="Destructive · reverts to defaults" title="Reset branding to dezky defaults?" size="sm" @close="resetOpen = false">
|
||||
<div class="reset-box bad">
|
||||
<UiIcon name="shield" :size="16" stroke="var(--bad)" />
|
||||
<div>Reverts product name, colors, logos, and email templates to dezky defaults. Your custom domain stays connected. Edits made today are kept for 7 days and can be restored from your audit log.</div>
|
||||
</div>
|
||||
<div class="reset-list">
|
||||
<dl class="def">
|
||||
<div><dt>Product name</dt><dd>Acme Workspace → dezky</dd></div>
|
||||
<div><dt>Primary color</dt><dd>#D4FF3A → #D4FF3A (default)</dd></div>
|
||||
<div><dt>Full logo</dt><dd>will be removed</dd></div>
|
||||
<div><dt>Square mark</dt><dd>will be removed</dd></div>
|
||||
<div><dt>Favicon</dt><dd>will be removed</dd></div>
|
||||
<div><dt>Email templates</dt><dd>2 edited templates → defaults</dd></div>
|
||||
<div><dt>Custom domain</dt><dd>workspace.acme.dk · kept</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="resetOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="danger" @click="resetOpen = false">
|
||||
<template #leading><UiIcon name="refresh" :size="13" /></template>
|
||||
Reset everything
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -534,24 +387,24 @@ const renderedBody = computed(() =>
|
||||
}
|
||||
.input-row input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
|
||||
.color-preview { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
|
||||
.soon-inline { padding: 8px 0; }
|
||||
|
||||
.soon-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border: 1px dashed var(--border-hi, var(--border));
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.swatches { display: flex; gap: 10px; margin-bottom: 14px; }
|
||||
.swatches button { width: 38px; height: 38px; border-radius: 6px; cursor: pointer; }
|
||||
|
||||
.assets { display: flex; flex-direction: column; gap: 10px; }
|
||||
.asset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.asset.has { background: var(--surface); border-style: solid; }
|
||||
.asset-icon { width: 40px; height: 40px; border-radius: 6px; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
|
||||
.asset-meta { flex: 1; min-width: 0; }
|
||||
.asset-l { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.templates { display: flex; flex-direction: column; }
|
||||
.tmpl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); background: transparent; border-left: none; border-right: none; border-top: none; text-align: left; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; }
|
||||
.tmpl-row:last-child { border-bottom: none; }
|
||||
@@ -618,70 +471,6 @@ const renderedBody = computed(() =>
|
||||
.frame-cta-btn { height: 32px; padding: 0 14px; border-radius: 5px; border: none; background: #0A0A0A; color: #F4F3EE; font-weight: 600; font-size: 12px; cursor: pointer; }
|
||||
.frame-foot { padding: 12px 32px; border-top: 1px solid #E6E4DC; background: #F4F3EE; font-size: 11px; color: #5A5A55; font-family: var(--font-mono); display: flex; justify-content: space-between; }
|
||||
|
||||
/* Upload modal */
|
||||
.upload { display: flex; flex-direction: column; gap: 14px; }
|
||||
.dropzone {
|
||||
padding: 48px 24px;
|
||||
background: var(--bg);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.dropzone.over { background: var(--surface); border-color: var(--text); }
|
||||
.drop-text { text-align: center; }
|
||||
.drop-title { font-size: 14px; font-weight: 500; color: var(--text); }
|
||||
.upload-preview {
|
||||
padding: 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.upload-mark {
|
||||
height: 56px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.upload-meta { flex: 1; min-width: 0; }
|
||||
.upload-name { font-size: 13px; font-weight: 500; }
|
||||
.check-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 12px; }
|
||||
.check-row > :first-of-type { flex-shrink: 0; }
|
||||
.ld-preview { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
|
||||
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
|
||||
.ld-light, .ld-dark { border-radius: 6px; padding: 18px; display: flex; align-items: center; justify-content: center; }
|
||||
.ld-light { background: #FAFAF7; }
|
||||
.ld-dark { background: #0A0A0A; }
|
||||
.ld-mark {
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ld-mark.dark { background: #0A0A0A; color: #F4F3EE; }
|
||||
.ld-mark.light { background: #F4F3EE; color: #0A0A0A; }
|
||||
.req-box { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 12px; color: var(--text-mute); line-height: 1.55; }
|
||||
.req-body { margin-top: 6px; }
|
||||
|
||||
/* Email template editor */
|
||||
.tmpl-edit { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; height: 100%; }
|
||||
.tmpl-col { padding: 24px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
|
||||
@@ -740,49 +529,4 @@ const renderedBody = computed(() =>
|
||||
.email-subj { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-top: 10px; color: #0A0A0A; }
|
||||
.email-body { padding: 20px; font-size: 13px; line-height: 1.65; color: #3A3A35; white-space: pre-wrap; flex: 1; overflow-y: auto; }
|
||||
.email-foot { padding: 14px 20px; border-top: 1px solid #E6E4DC; color: #0A0A0A; font-size: 11px; font-family: var(--font-mono); text-align: center; }
|
||||
|
||||
/* Publish modal */
|
||||
.publish-intro { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-bottom: 14px; }
|
||||
.publish-summary { padding: 14px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; margin-top: 8px; margin-bottom: 14px; }
|
||||
.ps-row { display: flex; align-items: center; gap: 12px; }
|
||||
.ps-row > :first-child { width: 100px; }
|
||||
.color-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
|
||||
.color-chip { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
|
||||
.prop-grid { padding: 14px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; margin-top: 8px; margin-bottom: 14px; }
|
||||
.prop-cell { display: flex; align-items: center; gap: 8px; }
|
||||
.prop-cell span:first-of-type { flex: 1; }
|
||||
.publish-warn { padding: 12px; background: rgba(232, 154, 31, 0.06); border-radius: 6px; border: 1px solid rgba(232, 154, 31, 0.2); font-size: 12px; color: var(--text-dim); line-height: 1.55; display: flex; gap: 10px; }
|
||||
.publishing { padding: 32px 0; text-align: center; }
|
||||
.spinner {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 18px auto;
|
||||
border-radius: 999px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg) } }
|
||||
.publish-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
|
||||
.done-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
|
||||
.done-badge {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
color: #0A0A0A;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.done-list { padding: 14px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
|
||||
.def { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 12px; column-gap: 16px; }
|
||||
.def > div { display: contents; }
|
||||
.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); }
|
||||
|
||||
/* Reset modal */
|
||||
.reset-box { padding: 14px; border-radius: 6px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
|
||||
.reset-box.bad { background: rgba(226, 48, 48, 0.06); border: 1px solid rgba(226, 48, 48, 0.2); }
|
||||
.reset-box > div { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
|
||||
.reset-list { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); }
|
||||
</style>
|
||||
|
||||
+101
-110
@@ -1,61 +1,77 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-screens.jsx `AdminDashboard` (lines 447-605).
|
||||
// Keep spacing tokens (24px 40px 64px 40px content, 16 gaps), the 4-column
|
||||
// stat strip in a single Card with per-column borders, the two-up
|
||||
// 1.4fr / 1fr blocks (License + Recent admin events; Issues + Quick actions),
|
||||
// the source's exact issue rows, audit slice, and quick-action buttons.
|
||||
|
||||
// Customer-admin dashboard. Layout descends from project/platform-screens.jsx
|
||||
// `AdminDashboard`, but the data is real: workspace identity, seats, spend,
|
||||
// plan and recent admin events all come from /api/me + /api/tenants/:slug/*.
|
||||
//
|
||||
// Sections without a real backend source yet (storage usage, mail-flow health,
|
||||
// "open issues" like DMARC/failed-login heuristics) were removed rather than
|
||||
// faked — they return when their backends (OCIS metrics, Stalwart metrics, a
|
||||
// domain-health checker) exist.
|
||||
|
||||
import type { IconName } from '~/components/UiIcon.vue'
|
||||
import { sampleAudit } from '~/data/workspace'
|
||||
import type { AuditEventDoc, TenantUserDoc } from '~/types/workspace'
|
||||
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
const { fetchMe } = useMe()
|
||||
await fetchMe()
|
||||
const { tenant, subscription, planLabel, currency, seatLimit, perSeatMonthly, monthlySpend, primaryDomain, renewsAt } = useTenant()
|
||||
const slug = computed(() => tenant.value?.slug ?? '')
|
||||
|
||||
// Workspace users (seat usage) + recent audit, both tenant-scoped. Gated on a
|
||||
// resolved slug so we don't fire against /api/tenants//... before /me lands.
|
||||
const { data: users } = await useFetch<TenantUserDoc[]>(
|
||||
() => `/api/tenants/${slug.value}/users`,
|
||||
{ key: 'admin-dash-users', default: () => [], immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
const { data: auditRaw } = await useFetch<AuditEventDoc[]>(
|
||||
() => `/api/tenants/${slug.value}/audit?limit=6`,
|
||||
{ key: 'admin-dash-audit', default: () => [], immediate: !!slug.value, watch: [slug] },
|
||||
)
|
||||
|
||||
const seatsUsed = computed(() => (users.value ?? []).filter((u) => u.active !== false).length)
|
||||
const seatsAvailable = computed(() => Math.max(0, seatLimit.value - seatsUsed.value))
|
||||
const seatPct = computed(() =>
|
||||
seatLimit.value ? Math.min(100, Math.round((seatsUsed.value / seatLimit.value) * 100)) : 0,
|
||||
)
|
||||
|
||||
const moneyFmt = computed(
|
||||
() => new Intl.NumberFormat('da-DK', { style: 'currency', currency: currency.value, maximumFractionDigits: 0 }),
|
||||
)
|
||||
function fmtDate(d: Date | null): string {
|
||||
return d ? d.toLocaleDateString('da-DK', { day: '2-digit', month: 'long', year: 'numeric' }) : '—'
|
||||
}
|
||||
const statusLabel = computed(() => {
|
||||
const s = tenant.value?.status ?? 'pending'
|
||||
return s.charAt(0).toUpperCase() + s.slice(1)
|
||||
})
|
||||
|
||||
const stats = computed<Array<{ label: string; value: string; hint: string }>>(() => [
|
||||
{ label: 'Seats used', value: `${seatsUsed.value} / ${seatLimit.value}`, hint: `${seatsAvailable.value} available` },
|
||||
{ label: 'Monthly spend', value: moneyFmt.value.format(monthlySpend.value), hint: renewsAt.value ? `renews ${fmtDate(renewsAt.value)}` : '' },
|
||||
{ label: 'Plan', value: planLabel.value, hint: subscription.value?.cycle ?? '' },
|
||||
{ label: 'Status', value: statusLabel.value, hint: `${tenant.value?.domains?.length ?? 0} domain${(tenant.value?.domains?.length ?? 0) === 1 ? '' : 's'}` },
|
||||
])
|
||||
|
||||
// Map raw audit events onto the row shape the activity list renders. Tone is
|
||||
// derived from outcome (failed actions read red); everything else is neutral.
|
||||
const recent = computed(() =>
|
||||
(auditRaw.value ?? []).map((e) => ({
|
||||
id: e._id,
|
||||
when: new Date(e.at).toLocaleTimeString('da-DK', { hour: '2-digit', minute: '2-digit' }),
|
||||
actor: e.actorType === 'system' ? 'system' : e.actorEmail ?? '—',
|
||||
action: e.action,
|
||||
target: e.resourceName ?? e.resourceId ?? '',
|
||||
tone: e.outcome === 'failure' ? 'bad' : 'info',
|
||||
})),
|
||||
)
|
||||
|
||||
const inviteOpen = ref(false)
|
||||
const inviteStep = ref(1)
|
||||
const seatsOpen = ref(false)
|
||||
const seatsExtra = ref(5)
|
||||
|
||||
const stats: Array<{
|
||||
label: string
|
||||
value: string
|
||||
delta?: string
|
||||
deltaTone?: 'up' | 'down'
|
||||
hint: string
|
||||
}> = [
|
||||
{ label: 'Seats used', value: '11 / 25', delta: '+2 this week', deltaTone: 'up', hint: '' },
|
||||
{ label: 'Storage', value: '1.4 TB', delta: '64% of 2.2 TB', hint: '' },
|
||||
{ label: 'Mail flow', value: 'Healthy', hint: '99.98% · last 7d' },
|
||||
{ label: 'Monthly spend', value: '1.940 DKK', hint: 'next invoice 01 Jun' },
|
||||
]
|
||||
|
||||
const recent = sampleAudit.slice(0, 6)
|
||||
|
||||
const issues = [
|
||||
{
|
||||
tone: 'warn' as const,
|
||||
title: 'DMARC record missing on baslund.dk',
|
||||
body: 'Mail from this domain may fail Gmail / Outlook spam checks.',
|
||||
action: 'Fix record',
|
||||
onAction: () => router.push('/admin/domains'),
|
||||
},
|
||||
{
|
||||
tone: 'bad' as const,
|
||||
title: 'Failed login attempts from 203.0.113.4',
|
||||
body: '3 attempts on oliver@dezky.com in the last hour. Consider IP blocklist.',
|
||||
action: 'Review',
|
||||
onAction: () => router.push('/admin/security'),
|
||||
},
|
||||
{
|
||||
tone: 'info' as const,
|
||||
title: '2 invitations pending',
|
||||
body: 'Magnus Eriksen and Emma Skov haven’t accepted yet.',
|
||||
action: 'Resend',
|
||||
onAction: () => toast.ok('Invitation resent to Magnus and Emma'),
|
||||
},
|
||||
]
|
||||
|
||||
const quickActions: { icon: IconName; label: string; onClick: () => void }[] = [
|
||||
{ icon: 'users', label: 'Invite user', onClick: () => { inviteOpen.value = true } },
|
||||
{ icon: 'globe', label: 'Verify domain', onClick: () => router.push('/admin/domains') },
|
||||
@@ -71,16 +87,24 @@ function sendInvite() {
|
||||
toast.ok('Invitation sent to magnus@dezky.com')
|
||||
}
|
||||
|
||||
const pricePerSeat = 78
|
||||
const daysUntilRenewal = 96
|
||||
const monthly = computed(() => seatsExtra.value * pricePerSeat)
|
||||
const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 30)))
|
||||
// Add-seats modal math, fed by the real subscription. The seat-change mutation
|
||||
// itself isn't wired yet (subscription PATCH is operator-only), so confirming
|
||||
// still toasts — but the figures shown are the customer's real numbers.
|
||||
// perSeatMonthly is already cycle-normalized + in major units.
|
||||
const pricePerSeat = computed(() => perSeatMonthly.value)
|
||||
const daysUntilRenewal = computed(() => {
|
||||
if (!renewsAt.value) return 30
|
||||
const ms = renewsAt.value.getTime() - Date.now()
|
||||
return Math.max(0, Math.round(ms / 86_400_000))
|
||||
})
|
||||
const monthly = computed(() => seatsExtra.value * pricePerSeat.value)
|
||||
const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal.value / 30)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Acme Workspace · dezky.com"
|
||||
:eyebrow="tenant ? `${tenant.name}${primaryDomain ? ` · ${primaryDomain}` : ''}` : 'Workspace'"
|
||||
title="Dashboard"
|
||||
subtitle="Health, activity, and quick actions across your workspace."
|
||||
>
|
||||
@@ -104,8 +128,6 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
<Stat
|
||||
:label="s.label"
|
||||
:value="s.value"
|
||||
:delta="s.delta"
|
||||
:delta-tone="s.deltaTone"
|
||||
:hint="s.hint"
|
||||
/>
|
||||
</div>
|
||||
@@ -118,17 +140,19 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Plan</Eyebrow>
|
||||
<div class="card-title">Business · 25 seats</div>
|
||||
<div class="card-sub">Renewing 28 August 2026 · 1.940 DKK / month</div>
|
||||
<div class="card-title">{{ planLabel }} · {{ seatLimit }} seats</div>
|
||||
<div class="card-sub">
|
||||
<template v-if="renewsAt">Renewing {{ fmtDate(renewsAt) }} · </template>{{ moneyFmt.format(monthlySpend) }} / month
|
||||
</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="secondary" @click="router.push('/admin/billing')">Manage plan</UiButton>
|
||||
</div>
|
||||
|
||||
<div class="progress-block">
|
||||
<div class="progress-bar"><span style="width: 44%" /></div>
|
||||
<div class="progress-bar"><span :style="{ width: `${seatPct}%` }" /></div>
|
||||
<div class="progress-legend">
|
||||
<span>11 active</span>
|
||||
<span>14 available</span>
|
||||
<span>{{ seatsUsed }} active</span>
|
||||
<span>{{ seatsAvailable }} available</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,31 +184,15 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
</div>
|
||||
<Mono dim>{{ a.when }}</Mono>
|
||||
</div>
|
||||
<div v-if="recent.length === 0" class="audit-empty">
|
||||
<Mono dim>No recent activity yet.</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Open issues + Quick actions -->
|
||||
<div class="row two-col-11">
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Health</Eyebrow>
|
||||
<div class="card-title">Open issues</div>
|
||||
</div>
|
||||
<Badge tone="warn">2 to review</Badge>
|
||||
</div>
|
||||
<div class="issues">
|
||||
<div v-for="it in issues" :key="it.title" class="issue" :data-tone="it.tone">
|
||||
<div class="issue-body">
|
||||
<div class="issue-title">{{ it.title }}</div>
|
||||
<div class="issue-sub">{{ it.body }}</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="secondary" @click="it.onAction()">{{ it.action }}</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Quick actions -->
|
||||
<div class="row">
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
@@ -192,7 +200,7 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
<div class="card-title">Common tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-grid">
|
||||
<div class="qa-grid qa-grid-wide">
|
||||
<button v-for="a in quickActions" :key="a.label" class="qa" @click="a.onClick">
|
||||
<UiIcon :name="a.icon" :size="15" stroke="var(--text-mute)" />
|
||||
{{ a.label }}
|
||||
@@ -262,9 +270,9 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
<Modal :open="seatsOpen" title="Add seats" eyebrow="Billing · seats" size="md" @close="seatsOpen = false">
|
||||
<div class="seats">
|
||||
<div class="seats-grid">
|
||||
<div class="seats-cell"><Eyebrow>Active users</Eyebrow><div class="seats-big">11</div></div>
|
||||
<div class="seats-cell"><Eyebrow>Current seats</Eyebrow><div class="seats-big">25</div></div>
|
||||
<div class="seats-cell"><Eyebrow>After change</Eyebrow><div class="seats-big ok">{{ 25 + seatsExtra }}</div></div>
|
||||
<div class="seats-cell"><Eyebrow>Active users</Eyebrow><div class="seats-big">{{ seatsUsed }}</div></div>
|
||||
<div class="seats-cell"><Eyebrow>Current seats</Eyebrow><div class="seats-big">{{ seatLimit }}</div></div>
|
||||
<div class="seats-cell"><Eyebrow>After change</Eyebrow><div class="seats-big ok">{{ seatLimit + seatsExtra }}</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow>How many seats to add</Eyebrow>
|
||||
@@ -279,19 +287,19 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
</div>
|
||||
<div class="charge-summary">
|
||||
<Eyebrow>What you'll pay</Eyebrow>
|
||||
<div class="charge-row"><span>{{ seatsExtra }} new seat{{ seatsExtra === 1 ? '' : 's' }} × {{ pricePerSeat }} DKK / month</span><Mono>{{ monthly.toLocaleString('da-DK') }} DKK / mo</Mono></div>
|
||||
<div class="charge-row sep"><span class="muted">Prorated for current cycle ({{ daysUntilRenewal }} days until renewal)</span><Mono dim>{{ prorated.toLocaleString('da-DK') }} DKK</Mono></div>
|
||||
<div class="charge-row total"><span>Charged today</span><span class="big">{{ prorated.toLocaleString('da-DK') }} DKK</span></div>
|
||||
<div class="charge-row"><span class="muted">Next invoice on 01 Jun 2026</span><Mono dim>{{ (1940 + monthly).toLocaleString('da-DK') }} DKK</Mono></div>
|
||||
<div class="charge-row"><span>{{ seatsExtra }} new seat{{ seatsExtra === 1 ? '' : 's' }} × {{ moneyFmt.format(pricePerSeat) }} / month</span><Mono>{{ moneyFmt.format(monthly) }} / mo</Mono></div>
|
||||
<div class="charge-row sep"><span class="muted">Prorated for current cycle ({{ daysUntilRenewal }} days until renewal)</span><Mono dim>{{ moneyFmt.format(prorated) }}</Mono></div>
|
||||
<div class="charge-row total"><span>Charged today</span><span class="big">{{ moneyFmt.format(prorated) }}</span></div>
|
||||
<div class="charge-row"><span class="muted"><template v-if="renewsAt">Next invoice on {{ fmtDate(renewsAt) }}</template><template v-else>Next invoice</template></span><Mono dim>{{ moneyFmt.format(monthlySpend + monthly) }}</Mono></div>
|
||||
</div>
|
||||
<div class="info-strip">
|
||||
<UiIcon name="card" :size="14" stroke="var(--text-mute)" />
|
||||
<span>Charged to <Mono>Visa •••• 4242</Mono>. Seats are added instantly — invitations can be sent right away.</span>
|
||||
<span>Seats are added instantly — invitations can be sent right away.</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="seatsOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="() => { seatsOpen = false; toast.ok(`${seatsExtra} seats added · charged ${prorated.toLocaleString('da-DK')} DKK`) }">
|
||||
<UiButton variant="primary" @click="() => { seatsOpen = false; toast.ok(`${seatsExtra} seats added · charged ${moneyFmt.format(prorated)}`) }">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add {{ seatsExtra }} seat{{ seatsExtra === 1 ? '' : 's' }}
|
||||
</UiButton>
|
||||
@@ -304,7 +312,6 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
.content { padding: 24px 40px 64px 40px; }
|
||||
.row { display: grid; gap: 16px; margin-top: 16px; }
|
||||
.two-col-14 { grid-template-columns: 1.4fr 1fr; }
|
||||
.two-col-11 { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.strip { margin-bottom: 16px; }
|
||||
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
|
||||
@@ -370,28 +377,12 @@ const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal / 3
|
||||
.audit-content { flex: 1; min-width: 0; }
|
||||
.audit-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
|
||||
.audit-actor { font-weight: 500; }
|
||||
.audit-empty { padding: 24px 16px; text-align: center; }
|
||||
|
||||
/* Issues — strict bg with left tone border */
|
||||
.issues { display: flex; flex-direction: column; gap: 10px; }
|
||||
.issue {
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-left: 2px solid var(--border);
|
||||
}
|
||||
.issue[data-tone='ok'] { border-left-color: var(--ok); }
|
||||
.issue[data-tone='warn'] { border-left-color: var(--warn); }
|
||||
.issue[data-tone='bad'] { border-left-color: var(--bad); }
|
||||
.issue[data-tone='info'] { border-left-color: var(--info); }
|
||||
.issue-body { flex: 1; min-width: 0; }
|
||||
.issue-title { font-size: 13px; font-weight: 500; }
|
||||
.issue-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
|
||||
|
||||
/* Quick actions — 2-col grid of "tiles" */
|
||||
/* Quick actions — grid of "tiles" */
|
||||
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
/* Full-width card → 3 columns so the six actions sit in two tidy rows. */
|
||||
.qa-grid-wide { grid-template-columns: repeat(3, 1fr); }
|
||||
.qa {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -11,6 +11,7 @@ import type { EmailTemplate } from '~/components/partner/EmailTemplateEditor.vue
|
||||
import type { BrandIdentity } from '~/components/partner/EditIdentityModal.vue'
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
|
||||
const identityOpen = ref(false)
|
||||
const editing = ref<EmailTemplate | null>(null)
|
||||
@@ -74,7 +75,7 @@ watch(branding, syncBranding)
|
||||
|
||||
async function putBranding(): Promise<boolean> {
|
||||
try {
|
||||
await $fetch('/api/partner/branding', {
|
||||
await request('/api/partner/branding', {
|
||||
method: 'PUT',
|
||||
body: {
|
||||
identity: identity.value,
|
||||
|
||||
@@ -9,6 +9,7 @@ import type { CustomerOrg, CustomerStatus, PartnerTenantDoc } from '~/types/part
|
||||
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
const { request } = useApiFetch()
|
||||
const partnerMode = usePartnerMode()
|
||||
|
||||
const view = ref<'table' | 'cards'>('table')
|
||||
@@ -181,7 +182,7 @@ async function saveEdit() {
|
||||
}
|
||||
savingEdit.value = true
|
||||
try {
|
||||
await $fetch(`/api/partner/tenants/${editCustomer.value.slug}`, {
|
||||
await request(`/api/partner/tenants/${editCustomer.value.slug}`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
name: editForm.name,
|
||||
@@ -204,7 +205,7 @@ async function saveEdit() {
|
||||
async function toggleSuspend(c: CustomerRow) {
|
||||
const action = c.status === 'suspended' ? 'resume' : 'suspend'
|
||||
try {
|
||||
await $fetch(`/api/partner/tenants/${c.slug}/${action}`, { method: 'POST' })
|
||||
await request(`/api/partner/tenants/${c.slug}/${action}`, { method: 'POST' })
|
||||
toast.ok(action === 'suspend' ? 'Suspended' : 'Resumed', c.name)
|
||||
editCustomer.value = null
|
||||
await refreshAll()
|
||||
|
||||
@@ -12,6 +12,7 @@ import type { CustomerOrg, CustomerStatus } from '~/types/partner'
|
||||
import type { TaskContext } from '~/components/partner/CustomerTaskPanel.vue'
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
|
||||
// Decorative MRR sparkline shape only — historical MRR isn't stored yet (a
|
||||
// daily-snapshot job lands later; see useMrrTrendline). The live numbers
|
||||
@@ -262,7 +263,7 @@ async function deleteReport() {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await $fetch(`/api/partner/reports/saved/${r.id}`, { method: 'DELETE' })
|
||||
await request(`/api/partner/reports/saved/${r.id}`, { method: 'DELETE' })
|
||||
toast.bad('Report deleted', r.name)
|
||||
confirmDeleteId.value = null
|
||||
await Promise.all([refreshSaved(), refreshNuxtData('partner-reports-saved')])
|
||||
@@ -284,7 +285,7 @@ async function onCreated(payload: {
|
||||
format: string
|
||||
}) {
|
||||
try {
|
||||
await $fetch('/api/partner/reports/saved', {
|
||||
await request('/api/partner/reports/saved', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
name: payload.name,
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
|
||||
const tab = ref<'agreement' | 'contact' | 'tax' | 'notifications'>('agreement')
|
||||
const tabs = [
|
||||
@@ -93,7 +94,7 @@ watch(settings, syncContact)
|
||||
async function saveContact() {
|
||||
savingContact.value = true
|
||||
try {
|
||||
await $fetch('/api/partner/settings', { method: 'PATCH', body: { profile: { ...contact } } })
|
||||
await request('/api/partner/settings', { method: 'PATCH', body: { profile: { ...contact } } })
|
||||
toast.ok('Saved', 'Contact info updated')
|
||||
await Promise.all([refresh(), refreshNuxtData('partner-settings')])
|
||||
} catch (e: unknown) {
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
import type { TeamMember } from '~/components/partner/TeammatePanel.vue'
|
||||
|
||||
const toast = useToast()
|
||||
const { request } = useApiFetch()
|
||||
|
||||
const inviteOpen = ref(false)
|
||||
const openMember = ref<TeamMember | null>(null)
|
||||
@@ -72,7 +73,7 @@ function accessLabel(m: TeamMember) {
|
||||
|
||||
async function onSent(payload: { name: string; email: string; role: string }) {
|
||||
try {
|
||||
await $fetch('/api/partner/users', {
|
||||
await request('/api/partner/users', {
|
||||
method: 'POST',
|
||||
body: { name: payload.name, email: payload.email },
|
||||
})
|
||||
@@ -86,7 +87,7 @@ async function onSent(payload: { name: string; email: string; role: string }) {
|
||||
|
||||
async function removeMember(m: TeamMember) {
|
||||
try {
|
||||
await $fetch(`/api/partner/users/${m.id}`, { method: 'DELETE' })
|
||||
await request(`/api/partner/users/${m.id}`, { method: 'DELETE' })
|
||||
toast.ok('Removed', `${m.name} removed from the team`)
|
||||
openMember.value = null
|
||||
await Promise.all([refresh(), refreshNuxtData('partner-users')])
|
||||
|
||||
Reference in New Issue
Block a user