feat: portal redesign, pricing catalog, partner-staff invites
- portal: new admin/ and partner/ surfaces with full component library (AppLauncher, Avatar, Badge, Card, Modal, Tabs, etc.), composables, layouts, partner-routing middleware, and supporting server APIs - pricing: Price schema/module with operator CRUD, pricing.vue catalog UI, Subscription extended with cycle/currency/perSeatAmount/seats snapshots for stable MRR aggregation - partner staff: User.partnerId, invite-partner-user DTO and flow, /partners/:slug/users endpoints, InvitePartnerUserModal, shared dezky-partner-staff Authentik group - /me: partner-aware endpoint returning user + partner context so portal can route between end-user and partner-admin surfaces - tenant: seats field for portfolio displays and future MRR calculations - operator: pricing page, signed-out page, useMe/useToast composables, ToastStack
This commit is contained in:
Ronni Baslund
@@ -0,0 +1,569 @@
|
||||
<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.
|
||||
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const paymentOpen = ref(false)
|
||||
const detailsOpen = ref(false)
|
||||
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
|
||||
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 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' },
|
||||
]
|
||||
|
||||
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 confirmPause() {
|
||||
pauseOpen.value = false
|
||||
toast.ok('Subscription paused', 'Resumes automatically on 28 Aug 2026')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
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">
|
||||
<!-- Hero plan card -->
|
||||
<Card :pad="0">
|
||||
<div class="hero">
|
||||
<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>
|
||||
<Badge tone="accent">Renews 28 Aug 2026</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>
|
||||
<div class="hero-actions">
|
||||
<UiButton variant="primary" @click="planOpen = true">Change plan</UiButton>
|
||||
<UiButton variant="secondary" @click="seatsOpen = true">Add seats</UiButton>
|
||||
<div class="spacer" />
|
||||
<UiButton variant="ghost" @click="pauseOpen = true">Pause subscription</UiButton>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Payment + business details -->
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</dl>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Invoices table -->
|
||||
<Card :pad="0">
|
||||
<div class="invoices-head">
|
||||
<div>
|
||||
<Eyebrow>History</Eyebrow>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<table class="inv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Invoice</th><th>Date</th><th>Amount</th><th>Status</th><th></th>
|
||||
</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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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"
|
||||
eyebrow="Billing · subscription"
|
||||
title="Pause subscription?"
|
||||
confirm-label="Pause subscription"
|
||||
tone="danger"
|
||||
@close="pauseOpen = false"
|
||||
@confirm="confirmPause"
|
||||
>
|
||||
Members keep access until the end of the current billing cycle (28 Aug 2026), after
|
||||
which sign-ins are blocked and data is held in cold storage. You can resume any time
|
||||
to restore full access.
|
||||
</ConfirmDialog>
|
||||
|
||||
<!-- Plan-change flow stub -->
|
||||
<Modal :open="planOpen" eyebrow="Billing · plan" title="Change plan" size="md" @close="planOpen = false">
|
||||
<div class="plan-stack">
|
||||
<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' },
|
||||
{ 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' },
|
||||
]" :key="p.id" :class="['plan-card', { active: p.current }]">
|
||||
<div class="plan-name">{{ p.name }}</div>
|
||||
<Mono dim>{{ p.price }}</Mono>
|
||||
<div class="plan-d">{{ p.d }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="planOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="planOpen = false; toast.ok('Plan change scheduled', 'Takes effect on next invoice')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Schedule change
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Add seats modal -->
|
||||
<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>After change</Eyebrow><div class="big ok">{{ totalSeats }}</div></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Eyebrow>How many seats to add</Eyebrow>
|
||||
<div class="stepper">
|
||||
<button class="step-btn" @click="extra = Math.max(1, extra - 1)"><span class="minus" /></button>
|
||||
<input type="number" :value="extra" @input="(e) => (extra = Math.max(1, Math.min(500, parseInt((e.target as HTMLInputElement).value || '0') || 1)))" />
|
||||
<button class="step-btn" @click="extra = Math.min(500, extra + 1)"><UiIcon name="plus" :size="14" /></button>
|
||||
</div>
|
||||
<div class="presets">
|
||||
<button v-for="n in [5, 10, 25, 50]" :key="n" :class="{ active: extra === n }" @click="quickSet(n)">+{{ n }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</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`)">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add {{ extra }} seat{{ extra === 1 ? '' : 's' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.content { padding: 24px 40px 64px 40px; max-width: 1200px; }
|
||||
.top-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
|
||||
|
||||
/* Hero plan card */
|
||||
.hero { padding: 28px; background: var(--text); color: var(--bg); border-radius: 8px 8px 0 0; }
|
||||
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; }
|
||||
.kicker { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; }
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.hero-sub { font-size: 13px; opacity: 0.6; margin-top: 4px; }
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin-top: 28px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.hero-label { font-family: var(--font-mono); font-size: 10px; opacity: 0.5; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.hero-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin-top: 6px; }
|
||||
.hero-actions { padding: 24px; display: flex; gap: 8px; align-items: center; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
/* Payment + business sub-cards inside one Card */
|
||||
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
||||
.card-head + .card-head { margin-top: 16px; }
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.visa-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.visa {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
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; }
|
||||
|
||||
.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); }
|
||||
|
||||
/* Invoices table */
|
||||
.invoices-head {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.invoices-actions { display: flex; gap: 8px; }
|
||||
.inv-table { width: 100%; border-collapse: collapse; }
|
||||
.inv-table th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
.trust {
|
||||
padding: 12px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* Add seats */
|
||||
.seats { display: flex; flex-direction: column; gap: 18px; }
|
||||
.seats-3col {
|
||||
padding: 16px;
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.seats-3col > div { padding: 0 12px; border-right: 1px solid var(--border); }
|
||||
.seats-3col > div:first-child { padding-left: 0; }
|
||||
.seats-3col > div:last-child { padding-right: 0; border-right: none; }
|
||||
.big { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-top: 4px; }
|
||||
.big.ok { color: var(--ok); }
|
||||
.stepper { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
|
||||
.step-btn { width: 36px; height: 36px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.step-btn .minus { width: 12px; height: 2px; background: var(--text); display: block; }
|
||||
.stepper input {
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
outline: none;
|
||||
}
|
||||
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.presets button { padding: 4px 10px; border-radius: 4px; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; }
|
||||
.presets button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
|
||||
.bill-box { padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
|
||||
.bb-row { display: flex; justify-content: space-between; font-size: 13px; align-items: baseline; }
|
||||
.bb-row.sep { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||||
.bb-row.total { font-weight: 600; }
|
||||
.bb-row .dim { color: var(--text-mute); }
|
||||
.hero-amount { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
|
||||
|
||||
/* Plan-change modal */
|
||||
.plan-stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.lead { font-size: 13px; color: var(--text-mute); line-height: 1.55; }
|
||||
.plan-options { display: flex; flex-direction: column; gap: 8px; }
|
||||
.plan-card {
|
||||
padding: 14px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.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; }
|
||||
</style>
|
||||
@@ -0,0 +1,784 @@
|
||||
<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.
|
||||
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const color = ref('#D4FF3A')
|
||||
const name = ref('Acme Workspace')
|
||||
|
||||
const uploadAsset = ref<typeof ASSETS[number] | null>(null)
|
||||
const uploaded = ref(false)
|
||||
const dragOver = ref(false)
|
||||
|
||||
const editTemplate = ref<typeof TEMPLATES[number] | null>(null)
|
||||
const subject = ref('')
|
||||
const body = ref('')
|
||||
const testSent = ref(false)
|
||||
|
||||
const publishOpen = ref(false)
|
||||
const publishState = ref<'confirm' | 'publishing' | 'done'>('confirm')
|
||||
const resetOpen = ref(false)
|
||||
|
||||
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
|
||||
|
||||
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' },
|
||||
] as const
|
||||
|
||||
const TEMPLATE_BODIES: Record<string, string> = {
|
||||
invitation: `Hi {{user.first_name}},
|
||||
|
||||
{{inviter.name}} has invited you to join {{workspace.name}} on dezky.
|
||||
|
||||
Click below to set up your account — the link expires in 7 days.
|
||||
|
||||
→ {{invite.url}}
|
||||
|
||||
If you have any questions, reply to this email and we'll help out.
|
||||
|
||||
— The {{workspace.name}} team`,
|
||||
reset: `Hi {{user.first_name}},
|
||||
|
||||
Someone (hopefully you) asked to reset your {{workspace.name}} password.
|
||||
|
||||
Click the link below within the next 60 minutes to choose a new one:
|
||||
|
||||
→ {{reset.url}}
|
||||
|
||||
If you didn't request this, you can safely ignore this email.
|
||||
|
||||
— {{workspace.name}} security`,
|
||||
digest: `Hi {{user.first_name}},
|
||||
|
||||
Here's what happened in {{workspace.name}} this week:
|
||||
|
||||
· {{stats.messages}} new messages across your channels
|
||||
· {{stats.files}} files shared
|
||||
· {{stats.meetings}} meetings recorded
|
||||
|
||||
→ Open dashboard: {{workspace.url}}
|
||||
|
||||
Manage how often you receive these from your profile.`,
|
||||
trial: `Hi {{user.first_name}},
|
||||
|
||||
Your {{workspace.name}} trial ends in {{trial.days_left}} days.
|
||||
|
||||
You've added {{stats.users}} users and uploaded {{stats.gb}} GB of files. To keep everything running smoothly, upgrade to Business or Enterprise.
|
||||
|
||||
→ Choose a plan: {{billing.url}}
|
||||
|
||||
— {{workspace.name}}`,
|
||||
}
|
||||
|
||||
const TEMPLATE_MERGE_TAGS: Record<string, string[]> = {
|
||||
invitation: ['user.first_name', 'user.email', 'inviter.name', 'workspace.name', 'invite.url', 'invite.expires_at'],
|
||||
reset: ['user.first_name', 'workspace.name', 'reset.url', 'reset.expires_at', 'security.ip'],
|
||||
digest: ['user.first_name', 'workspace.name', 'workspace.url', 'stats.messages', 'stats.files', 'stats.meetings'],
|
||||
trial: ['user.first_name', 'workspace.name', 'trial.days_left', 'stats.users', 'stats.gb', 'billing.url'],
|
||||
}
|
||||
|
||||
const colorPalette = ['#D4FF3A', '#3F6BFF', '#FF6B4A', '#5B8C5A', '#9B59B6']
|
||||
|
||||
function openTemplate(t: typeof TEMPLATES[number]) {
|
||||
editTemplate.value = t
|
||||
subject.value = t.subject
|
||||
body.value = 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).
|
||||
function wrapTag(tag: string) {
|
||||
return '{' + '{' + tag + '}' + '}'
|
||||
}
|
||||
|
||||
function startPublish() {
|
||||
publishState.value = 'publishing'
|
||||
setTimeout(() => { publishState.value = 'done' }, 1800)
|
||||
}
|
||||
|
||||
function openPublish() {
|
||||
publishOpen.value = true
|
||||
publishState.value = 'confirm'
|
||||
}
|
||||
|
||||
const renderedSubject = computed(() =>
|
||||
subject.value
|
||||
.replace(/\{\{workspace\.name\}\}/g, name.value)
|
||||
.replace(/\{\{user\.first_name\}\}/g, 'Anne')
|
||||
.replace(/\{\{trial\.days_left\}\}/g, '3'),
|
||||
)
|
||||
const renderedBody = computed(() =>
|
||||
body.value
|
||||
.replace(/\{\{workspace\.name\}\}/g, name.value)
|
||||
.replace(/\{\{workspace\.url\}\}/g, 'workspace.acme.dk')
|
||||
.replace(/\{\{user\.first_name\}\}/g, 'Anne')
|
||||
.replace(/\{\{user\.email\}\}/g, 'anne@acme.dk')
|
||||
.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(/\{\{trial\.days_left\}\}/g, '3')
|
||||
.replace(/\{\{stats\.messages\}\}/g, '1.840')
|
||||
.replace(/\{\{stats\.files\}\}/g, '24')
|
||||
.replace(/\{\{stats\.meetings\}\}/g, '6')
|
||||
.replace(/\{\{stats\.users\}\}/g, '8')
|
||||
.replace(/\{\{stats\.gb\}\}/g, '14'),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Whitelabel"
|
||||
title="Branding"
|
||||
subtitle="Replace the dezky shell with your own logo, color, and product name. Changes propagate everywhere."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="ghost" @click="resetOpen = true">Reset</UiButton>
|
||||
<UiButton variant="primary" @click="openPublish">Publish</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="content">
|
||||
<!-- Controls -->
|
||||
<div class="controls">
|
||||
<Card>
|
||||
<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>
|
||||
</label>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Color</Eyebrow>
|
||||
<div class="card-title">Primary accent</div>
|
||||
<div class="card-sub">Propagates to buttons, links, focus rings, and active states.</div>
|
||||
</div>
|
||||
<div class="swatches">
|
||||
<button v-for="c in colorPalette" :key="c" :style="{ background: c, borderColor: color === c ? 'var(--text)' : 'var(--border)', borderWidth: color === c ? '2px' : '1px' }" @click="color = c" />
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<input v-model="color" />
|
||||
<div class="color-preview" :style="{ background: color }" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
</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)">
|
||||
<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>
|
||||
</div>
|
||||
<Mono dim>edited {{ t.edited }}</Mono>
|
||||
</div>
|
||||
<UiIcon name="chevRight" :size="14" stroke="var(--text-mute)" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="preview-col">
|
||||
<div class="preview-head">
|
||||
<Eyebrow>Live preview</Eyebrow>
|
||||
<Mono dim>workspace.acme.dk</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-brand">{{ name.toLowerCase() }}</div>
|
||||
<div class="frame-spacer" />
|
||||
<div class="frame-user">anne@acme.dk</div>
|
||||
</div>
|
||||
<div class="frame-hero">
|
||||
<div class="frame-eyebrow">Dashboard</div>
|
||||
<div class="frame-title">Good morning, Anne.</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>
|
||||
<div class="frame-tile-name">{{ n }}</div>
|
||||
</div>
|
||||
</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>
|
||||
<button class="frame-cta-btn">Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame-foot">
|
||||
<span>powered by dezky</span>
|
||||
<span>v1.0 · light</span>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="tmpl-col">
|
||||
<label class="field"><Eyebrow>Subject</Eyebrow><input class="input" v-model="subject" /></label>
|
||||
<div>
|
||||
<Eyebrow>Body</Eyebrow>
|
||||
<textarea v-model="body" class="body-area" />
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow>Merge tags · click to insert</Eyebrow>
|
||||
<div class="merge-tags">
|
||||
<button v-for="tag in (TEMPLATE_MERGE_TAGS[editTemplate.id] || [])" :key="tag" @click="insertTag(tag)">{{ wrapTag(tag) }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tmpl-prev">
|
||||
<Eyebrow>Preview</Eyebrow>
|
||||
<div class="email-frame">
|
||||
<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>
|
||||
</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>
|
||||
<Mono dim style="text-align: center; display: block;">preview substitutes sample data · real send uses recipient's data</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="resetTemplate">
|
||||
<template #leading><UiIcon name="refresh" :size="13" /></template>
|
||||
Reset to default
|
||||
</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="secondary" @click="testSent = true; setTimeout(() => testSent = false, 2500)">
|
||||
<template #leading><UiIcon name="mail" :size="13" /></template>
|
||||
{{ testSent ? 'Sent to anne@dezky.com ✓' : 'Send test to me' }}
|
||||
</UiButton>
|
||||
<UiButton variant="primary" @click="editTemplate = null">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save template
|
||||
</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>
|
||||
|
||||
<style scoped>
|
||||
.content { padding: 24px 40px 64px 40px; display: grid; grid-template-columns: 420px 1fr; gap: 24px; }
|
||||
.controls { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.card-head { margin-bottom: 14px; }
|
||||
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||||
.field:last-child { margin-bottom: 0; }
|
||||
.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;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.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; }
|
||||
.tmpl-meta { flex: 1; min-width: 0; }
|
||||
.tmpl-name-row { display: flex; align-items: center; gap: 8px; }
|
||||
.tmpl-name { font-weight: 500; }
|
||||
|
||||
.preview-col { min-width: 0; }
|
||||
.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.preview-frame {
|
||||
background: #FAFAF7;
|
||||
color: #0A0A0A;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.frame-topbar {
|
||||
height: 52px;
|
||||
background: #0A0A0A;
|
||||
color: #F4F3EE;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 16px;
|
||||
}
|
||||
.frame-mark {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #0A0A0A;
|
||||
}
|
||||
.frame-brand { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
|
||||
.frame-spacer { flex: 1; }
|
||||
.frame-user { font-size: 11px; font-family: var(--font-mono); opacity: 0.6; }
|
||||
.frame-hero { padding: 36px 32px 24px 32px; }
|
||||
.frame-eyebrow { font-family: var(--font-mono); font-size: 10px; color: #5A5A55; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.frame-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
|
||||
.frame-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
|
||||
.frame-tile { background: #fff; border: 1px solid #E6E4DC; border-radius: 6px; padding: 14px; }
|
||||
.frame-tile-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
background: #0A0A0A;
|
||||
color: #F4F3EE;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
.frame-tile-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-top: 12px; }
|
||||
.frame-cta { margin-top: 24px; padding: 18px 20px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.frame-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #0A0A0A; }
|
||||
.frame-cta-sub { font-size: 12px; color: rgba(10, 10, 10, 0.7); margin-top: 4px; }
|
||||
.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; }
|
||||
.tmpl-prev { padding: 24px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
|
||||
.body-area {
|
||||
width: 100%;
|
||||
min-height: 320px;
|
||||
padding: 14px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.merge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.merge-tags button {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.email-frame {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #E6E4DC;
|
||||
color: #0A0A0A;
|
||||
font-family: 'Inter', sans-serif;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.email-head { padding: 16px 20px; border-bottom: 1px solid #E6E4DC; background: #FAFAF7; }
|
||||
.from-row { display: flex; align-items: center; gap: 8px; }
|
||||
.from-mark {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
.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>
|
||||
@@ -0,0 +1,403 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-collab.jsx `ChatScreen` (lines 261-435).
|
||||
// 3 tabs: Workspaces / Channels / Retention, mirroring the source's data and
|
||||
// per-tab structure.
|
||||
|
||||
|
||||
import { chatWorkspaces, chatChannels } from '~/data/workspace'
|
||||
|
||||
const tab = ref<'workspaces' | 'channels' | 'retention'>('workspaces')
|
||||
const newWsOpen = ref(false)
|
||||
const openWs = ref<typeof chatWorkspaces[number] | null>(null)
|
||||
const newExportOpen = ref(false)
|
||||
const addOverrideOpen = ref(false)
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
// Per-workspace and per-channel kebab actions — mirror source intent.
|
||||
function wsAction(ws: typeof chatWorkspaces[number], id: string) {
|
||||
if (id === 'manage') openWs.value = ws
|
||||
else if (id === 'open') toast.info(`Opening ${ws.url}`)
|
||||
else if (id === 'invite') toast.info(`Invite link copied for ${ws.name}`)
|
||||
else if (id === 'archive') toast.warn(`${ws.name} archived`)
|
||||
}
|
||||
const wsItems = [
|
||||
{ id: 'manage', label: 'Manage workspace', icon: 'brush' as const },
|
||||
{ id: 'open', label: 'Open in browser', icon: 'external' as const },
|
||||
{ id: 'invite', label: 'Copy invite link', icon: 'copy' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'archive', label: 'Archive workspace', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function channelAction(name: string, id: string) {
|
||||
if (id === 'open') toast.info(`Opening #${name}`)
|
||||
else if (id === 'rename') toast.info(`Rename #${name}`)
|
||||
else if (id === 'archive') toast.warn(`#${name} archived`)
|
||||
else if (id === 'delete') toast.bad(`#${name} deleted`)
|
||||
}
|
||||
const channelItems = [
|
||||
{ id: 'open', label: 'Open channel', icon: 'external' as const },
|
||||
{ id: 'rename', label: 'Rename', icon: 'brush' as const },
|
||||
{ id: 'archive', label: 'Archive', icon: 'folder' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete channel', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function removeOverride(name: string) {
|
||||
toast.info(`${name} override removed`)
|
||||
}
|
||||
|
||||
const retention = ref<'30d' | '365d' | '3year' | 'forever'>('365d')
|
||||
const retentionOptions = [
|
||||
{ v: '30d' as const, label: '30 days', d: 'Short retention. Casual workspaces or strict privacy posture.' },
|
||||
{ v: '365d' as const, label: '365 days · recommended', d: 'Useful for most teams. Channel history is searchable for a year.' },
|
||||
{ v: '3year' as const, label: '3 years · Danish bookkeeping', d: 'Compliant with Danish accounting retention requirements.' },
|
||||
{ v: 'forever' as const, label: 'Forever', d: 'No automatic deletion. Required for some legal/regulated industries.' },
|
||||
]
|
||||
|
||||
const overrides = [
|
||||
{ name: '#incidents', t: 'invert', r: 'forever', reason: 'Post-mortem evidence' },
|
||||
{ name: '#dezky-roadmap', t: 'info', r: '3 years', reason: 'Product decisions log' },
|
||||
{ name: '#random', t: 'neutral', r: '90 days', reason: 'Reduce noise' },
|
||||
] as const
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Chat · Zulip"
|
||||
title="Chat settings"
|
||||
subtitle="Zulip workspaces, public channel visibility, and message retention policies."
|
||||
/>
|
||||
<div class="tab-wrap">
|
||||
<Tabs
|
||||
v-model="tab"
|
||||
:items="[
|
||||
{ value: 'workspaces', label: 'Workspaces', count: chatWorkspaces.length },
|
||||
{ value: 'channels', label: 'Channels', count: chatChannels.length },
|
||||
{ value: 'retention', label: 'Retention' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<template v-if="tab === 'workspaces'">
|
||||
<div class="row">
|
||||
<div class="lead">Workspaces let you separate communication scopes (e.g. company-wide vs. engineering-only). Members and channels are workspace-scoped.</div>
|
||||
<UiButton variant="primary" @click="newWsOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New workspace
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="ws-grid">
|
||||
<Card v-for="w in chatWorkspaces" :key="w.id">
|
||||
<div class="ws-head">
|
||||
<div class="ws-title">
|
||||
<div class="ws-mark"><UiIcon name="chat" :size="18" /></div>
|
||||
<div>
|
||||
<div class="ws-name">
|
||||
<span>{{ w.name }}</span>
|
||||
<Badge v-if="w.primary" tone="invert">primary</Badge>
|
||||
</div>
|
||||
<Mono dim>{{ w.url }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<Badge tone="ok" dot>{{ w.status }}</Badge>
|
||||
</div>
|
||||
<div class="ws-stats">
|
||||
<div><Eyebrow>Members</Eyebrow><div class="ws-num">{{ w.members }}</div></div>
|
||||
<div><Eyebrow>Channels</Eyebrow><div class="ws-num">{{ w.channels }}</div></div>
|
||||
<div><Eyebrow>30d msgs</Eyebrow><div class="ws-num">{{ w.messages30d.toLocaleString('da-DK') }}</div></div>
|
||||
</div>
|
||||
<div class="ws-actions">
|
||||
<UiButton size="sm" variant="secondary" @click="toast.info(`Opening ${w.url}`)">
|
||||
<template #leading><UiIcon name="external" :size="13" /></template>
|
||||
Open
|
||||
</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="openWs = w">Manage</UiButton>
|
||||
<div class="spacer" />
|
||||
<AdminKebabMenu :items="wsItems" @select="(id) => wsAction(w, id)" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab === 'channels'">
|
||||
<div class="ch-toolbar">
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input placeholder="Search channels…" />
|
||||
</div>
|
||||
<button class="chip"><Eyebrow>Type:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<button class="chip"><Eyebrow>Workspace:</Eyebrow><span>All</span><UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<div class="spacer" />
|
||||
<Mono dim>{{ chatChannels.length }} channels</Mono>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Channel</th><th>Topic</th><th>Type</th><th>Members</th><th class="right">30d msgs</th><th>Owner</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="c in chatChannels" :key="c.name">
|
||||
<td>
|
||||
<span class="ch-name" :class="{ priv: c.type === 'private' }">{{ c.type === 'private' ? '🔒' : '#' }} {{ c.name }}</span>
|
||||
</td>
|
||||
<td class="topic">{{ c.topic }}</td>
|
||||
<td><Badge :tone="c.type === 'public' ? 'ok' : 'warn'">{{ c.type }}</Badge></td>
|
||||
<td><Mono>{{ c.members }}</Mono></td>
|
||||
<td class="right"><Mono>{{ c.messages30d.toLocaleString('da-DK') }}</Mono></td>
|
||||
<td>
|
||||
<div class="owner-cell">
|
||||
<Avatar :name="c.owner" :size="18" />
|
||||
<span>{{ c.owner }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="right"><AdminKebabMenu :items="channelItems" @select="(id) => channelAction(c.name, id)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="retention">
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Retention</Eyebrow>
|
||||
<div class="card-title">Message retention</div>
|
||||
<div class="card-sub">Applied org-wide. Compliance overrides user-level deletion.</div>
|
||||
</div>
|
||||
<div class="radio-big">
|
||||
<label v-for="o in retentionOptions" :key="o.v" :class="{ active: retention === o.v }">
|
||||
<span class="radio-dot"><span v-if="retention === o.v" /></span>
|
||||
<input type="radio" :value="o.v" v-model="retention" />
|
||||
<div>
|
||||
<div class="radio-label">{{ o.label }}</div>
|
||||
<div class="radio-d">{{ o.d }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Per-channel</Eyebrow>
|
||||
<div class="card-title">Channel-level overrides</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost" @click="addOverrideOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add override
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0" surface="bg" style="margin-top: 12px">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Channel</th><th>Retention</th><th>Reason</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="o in overrides" :key="o.name">
|
||||
<td><Mono style="font-weight: 500">{{ o.name }}</Mono></td>
|
||||
<td><Badge :tone="o.t as any" dot>{{ o.r }}</Badge></td>
|
||||
<td class="topic">{{ o.reason }}</td>
|
||||
<td class="right"><UiButton size="sm" variant="ghost" @click="removeOverride(o.name)"><UiIcon name="x" :size="12" /></UiButton></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Export & e-discovery</Eyebrow>
|
||||
<div class="card-title">Message export</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="secondary" @click="newExportOpen = true">New export</UiButton>
|
||||
</div>
|
||||
<div class="muted">Generate a signed ZIP of selected channels and date ranges for legal review or GDPR fulfillment. Available on Business and Enterprise plans.</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<Modal :open="newWsOpen" eyebrow="Chat · workspaces" title="New workspace" size="md" @close="newWsOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Name</Eyebrow><input class="input" placeholder="engineering" /></label>
|
||||
<label class="field"><Eyebrow>URL</Eyebrow><input class="input" placeholder="eng.chat.dezky.com" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="newWsOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="newWsOpen = false">Create workspace</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Per-channel retention override -->
|
||||
<Modal :open="addOverrideOpen" eyebrow="Chat · retention" title="Channel retention override" size="md" @close="addOverrideOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Channel</Eyebrow><input class="input" placeholder="#incidents" /></label>
|
||||
<label class="field"><Eyebrow>Retention</Eyebrow>
|
||||
<select class="input">
|
||||
<option>30 days</option><option>90 days</option><option>365 days</option><option>3 years</option><option>Forever</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>Reason (audit)</Eyebrow><input class="input" placeholder="Post-mortem evidence" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="addOverrideOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="addOverrideOpen = false; toast.ok('Override added')">Add override</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- New e-discovery export -->
|
||||
<Modal :open="newExportOpen" eyebrow="Chat · export" title="New message export" size="md" @close="newExportOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Channels</Eyebrow><input class="input" placeholder="#engineering, #incidents" /></label>
|
||||
<label class="field"><Eyebrow>From</Eyebrow><input class="input" placeholder="2026-01-01" /></label>
|
||||
<label class="field"><Eyebrow>To</Eyebrow><input class="input" placeholder="2026-12-31" /></label>
|
||||
<label class="field"><Eyebrow>Format</Eyebrow>
|
||||
<select class="input"><option>Signed ZIP · JSONL</option><option>Signed ZIP · HTML</option></select>
|
||||
</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="newExportOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="newExportOpen = false; toast.info('Export queued · you will be emailed when ready')">Create export</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<SidePanel :open="!!openWs" eyebrow="Workspace" :title="openWs?.name || ''" width="lg" @close="openWs = null">
|
||||
<div v-if="openWs" class="manage">
|
||||
<div class="ws-head">
|
||||
<div class="ws-title">
|
||||
<div class="ws-mark big"><UiIcon name="chat" :size="22" /></div>
|
||||
<div>
|
||||
<div class="ws-name big">{{ openWs.name }}</div>
|
||||
<Mono dim>{{ openWs.url }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<Badge tone="ok" dot>{{ openWs.status }}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="openWs = null">Close</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="primary" @click="openWs = null">Save changes</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 20px 40px 64px 40px; }
|
||||
|
||||
.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.lead { font-size: 13px; color: var(--text-mute); max-width: 540px; line-height: 1.5; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.ws-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.ws-title { display: flex; align-items: center; gap: 12px; }
|
||||
.ws-mark {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ws-mark.big { width: 48px; height: 48px; border-radius: 10px; }
|
||||
.ws-name { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
|
||||
.ws-name.big { font-size: 22px; }
|
||||
.ws-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.ws-num {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
margin-top: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ws-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
|
||||
|
||||
.ch-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.input-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
width: 280px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
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; }
|
||||
|
||||
.tbl { width: 100%; border-collapse: collapse; }
|
||||
.tbl th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
|
||||
.tbl tr:last-child td { border-bottom: none; }
|
||||
.tbl .right { text-align: right; }
|
||||
.topic { font-size: 12px; color: var(--text-mute); }
|
||||
.ch-name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
|
||||
.ch-name.priv { color: var(--text-dim); }
|
||||
.owner-cell { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
|
||||
.retention { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
|
||||
.card-head { margin-bottom: 14px; }
|
||||
.card-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
.muted { font-size: 13px; color: var(--text-mute); line-height: 1.6; }
|
||||
|
||||
.radio-big { display: flex; flex-direction: column; gap: 8px; }
|
||||
.radio-big label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
|
||||
.radio-big label.active { border-color: var(--text); background: var(--bg); }
|
||||
.radio-big input { display: none; }
|
||||
.radio-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
|
||||
.radio-big label.active .radio-dot { border-color: var(--text); }
|
||||
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
|
||||
.radio-label { font-size: 14px; font-weight: 500; }
|
||||
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.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; }
|
||||
|
||||
.manage { padding-bottom: 24px; }
|
||||
</style>
|
||||
@@ -0,0 +1,319 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-app.jsx `DomainsScreen` (lines 440-585) +
|
||||
// `DomainCard` (502) + `DomainRecordDetail` (586). Each domain card shows
|
||||
// monospace name, status badge, "X records to fix" hint, Re-check button,
|
||||
// and a 4-record grid (MX/SPF/DKIM/DMARC) clickable to expand inline detail.
|
||||
|
||||
|
||||
import { sampleDomainsFlat } from '~/data/workspace'
|
||||
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
|
||||
type Tone = 'ok' | 'warn' | 'bad'
|
||||
type RecordKey = 'mx' | 'spf' | 'dkim' | 'dmarc'
|
||||
|
||||
// DNS_FIX (platform-app.jsx line 459) — copy strings, record values, per-status headlines.
|
||||
const DNS_FIX: Record<RecordKey, {
|
||||
label: string
|
||||
purpose: string
|
||||
record: { type: string; host: string; value: string; priority?: number; ttl: number }
|
||||
states: Record<Tone, { headline: string; body: string }>
|
||||
}> = {
|
||||
mx: {
|
||||
label: 'MX · mail exchange',
|
||||
purpose: 'Routes inbound mail for this domain to dezky.',
|
||||
record: { type: 'MX', host: '@', value: 'mx.dezky.com', priority: 10, ttl: 3600 },
|
||||
states: {
|
||||
ok: { headline: 'Mail routing healthy', body: 'Inbound mail flows to dezky correctly. Verified 4 minutes ago.' },
|
||||
warn: { headline: 'Lower-priority MX detected', body: 'A secondary MX outside of dezky was found. This is allowed for failover but make sure it forwards back to mx.dezky.com.' },
|
||||
bad: { headline: 'No MX record found', body: 'Mail to this domain will not reach dezky. Add the record below at your DNS provider.' },
|
||||
},
|
||||
},
|
||||
spf: {
|
||||
label: 'SPF · sender policy',
|
||||
purpose: 'Tells receiving servers which IPs are allowed to send for this domain.',
|
||||
record: { type: 'TXT', host: '@', value: 'v=spf1 include:_spf.dezky.com -all', ttl: 3600 },
|
||||
states: {
|
||||
ok: { headline: 'SPF aligned', body: 'Your SPF record correctly authorises dezky as a sender. Verified 4 minutes ago.' },
|
||||
warn: { headline: 'SPF includes dezky but ends with ~all (softfail)', body: 'Receiving mail servers may still accept spoofed mail. Change the trailing mechanism to -all (hardfail) for stronger protection.' },
|
||||
bad: { headline: 'No SPF record', body: 'Mail sent from this domain via dezky will fail Gmail/Outlook authentication.' },
|
||||
},
|
||||
},
|
||||
dkim: {
|
||||
label: 'DKIM · message signing',
|
||||
purpose: 'Cryptographic signature proving the message was not altered in transit.',
|
||||
record: { type: 'CNAME', host: 'dezky._domainkey', value: 'dkim.dezky.com', ttl: 3600 },
|
||||
states: {
|
||||
ok: { headline: 'DKIM signing live', body: 'Outbound mail is signed with selector dezky. Verified 4 minutes ago.' },
|
||||
warn: { headline: 'DKIM CNAME points somewhere else', body: 'A DKIM record exists but does not delegate to dezky. Replace it with the CNAME below.' },
|
||||
bad: { headline: 'No DKIM record', body: 'Outbound mail will be signed but receiving servers cannot verify the signature.' },
|
||||
},
|
||||
},
|
||||
dmarc: {
|
||||
label: 'DMARC · policy enforcement',
|
||||
purpose: 'Tells receiving servers what to do with mail that fails SPF or DKIM.',
|
||||
record: { type: 'TXT', host: '_dmarc', value: 'v=DMARC1; p=quarantine; rua=mailto:dmarc@dezky.com; pct=100; adkim=s; aspf=s', ttl: 3600 },
|
||||
states: {
|
||||
ok: { headline: 'DMARC at quarantine', body: 'Spoofed mail will be sent to spam at Gmail/Outlook. Aggregate reports flowing.' },
|
||||
warn: { headline: 'DMARC at p=none', body: 'You’re collecting reports but not enforcing. Raise to quarantine once your SPF/DKIM look stable for a week.' },
|
||||
bad: { headline: 'No DMARC record', body: 'Anyone can spoof this domain. Mail from this domain may fail Gmail / Outlook spam checks.' },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const expanded = reactive<Record<string, RecordKey | null>>({})
|
||||
const copied = ref<string | null>(null)
|
||||
function toggle(domain: string, key: RecordKey) {
|
||||
expanded[domain] = expanded[domain] === key ? null : key
|
||||
}
|
||||
function copyValue(text: string) {
|
||||
if (typeof navigator !== 'undefined' && navigator.clipboard) navigator.clipboard.writeText(text)
|
||||
copied.value = text
|
||||
setTimeout(() => { if (copied.value === text) copied.value = null }, 1400)
|
||||
toast.ok('Copied to clipboard')
|
||||
}
|
||||
|
||||
function issuesFor(d: typeof sampleDomainsFlat[number]) {
|
||||
return (['mx', 'spf', 'dkim', 'dmarc'] as const).filter((k) => d[k] !== 'ok')
|
||||
}
|
||||
|
||||
function statusIcon(tone: Tone): 'check' | 'shield' | 'x' {
|
||||
return tone === 'ok' ? 'check' : tone === 'warn' ? 'shield' : 'x'
|
||||
}
|
||||
|
||||
function recordTint(tone: Tone) {
|
||||
return tone === 'bad' ? 'rgba(226,48,48,0.12)'
|
||||
: tone === 'warn' ? 'rgba(232,154,31,0.12)'
|
||||
: 'rgba(91,140,90,0.12)'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Identity"
|
||||
title="Domains"
|
||||
subtitle="Your verified domains for mail, SSO, and user provisioning."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="primary" @click="router.push('/admin/domains/add')">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
Add domain
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="content">
|
||||
<Card v-for="d in sampleDomainsFlat" :key="d.domain">
|
||||
<div class="head">
|
||||
<UiIcon name="globe" :size="20" stroke="var(--text-mute)" />
|
||||
<div class="title">
|
||||
<div class="domain-name">{{ d.domain }}</div>
|
||||
<div class="domain-sub">
|
||||
{{ d.users }} mailboxes
|
||||
<template v-if="issuesFor(d).length">
|
||||
· <span class="warn">{{ issuesFor(d).length }} record{{ issuesFor(d).length === 1 ? '' : 's' }} to fix</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<UiButton v-if="issuesFor(d).length" size="sm" variant="secondary" @click.stop="toast.ok('Re-checking ' + d.domain)">
|
||||
<template #leading><UiIcon name="refresh" :size="12" /></template>
|
||||
Re-check now
|
||||
</UiButton>
|
||||
<Badge :tone="d.status === 'ok' ? 'ok' : 'warn'" dot>{{ d.status === 'ok' ? 'verified' : 'attention' }}</Badge>
|
||||
</div>
|
||||
|
||||
<div class="records">
|
||||
<button
|
||||
v-for="k in (['mx', 'spf', 'dkim', 'dmarc'] as RecordKey[])"
|
||||
:key="k"
|
||||
class="rec"
|
||||
:class="{ active: expanded[d.domain] === k }"
|
||||
@click="toggle(d.domain, k)"
|
||||
>
|
||||
<Mono>{{ k.toUpperCase() }}</Mono>
|
||||
<div class="rec-right">
|
||||
<Badge :tone="d[k]" dot>{{ d[k] }}</Badge>
|
||||
<UiIcon :name="expanded[d.domain] === k ? 'chevDown' : 'chevRight'" :size="11" stroke="var(--text-mute)" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="expanded[d.domain]" class="detail" :data-tone="d[expanded[d.domain]!]">
|
||||
<div class="detail-head">
|
||||
<div class="detail-icon" :style="{ background: recordTint(d[expanded[d.domain]!] as Tone), color: `var(--${d[expanded[d.domain]!]})` }">
|
||||
<UiIcon :name="statusIcon(d[expanded[d.domain]!] as Tone)" :size="14" :stroke-width="d[expanded[d.domain]!] === 'ok' ? 2.5 : 2" />
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-title">
|
||||
{{ DNS_FIX[expanded[d.domain]!].states[d[expanded[d.domain]!] as Tone].headline }}
|
||||
<Mono dim>{{ DNS_FIX[expanded[d.domain]!].label }}</Mono>
|
||||
</div>
|
||||
<div class="detail-text">{{ DNS_FIX[expanded[d.domain]!].states[d[expanded[d.domain]!] as Tone].body }}</div>
|
||||
<Mono dim style="display: block; margin-top: 10px">{{ DNS_FIX[expanded[d.domain]!].purpose }}</Mono>
|
||||
</div>
|
||||
<button class="detail-close" @click="expanded[d.domain] = null"><UiIcon name="x" :size="14" /></button>
|
||||
</div>
|
||||
|
||||
<template v-if="d[expanded[d.domain]!] !== 'ok'">
|
||||
<div class="rec-action">
|
||||
<Eyebrow>Add this record at your DNS provider</Eyebrow>
|
||||
<div class="rec-grid">
|
||||
<div class="rec-grid-label">Type</div>
|
||||
<div class="rec-grid-val">{{ DNS_FIX[expanded[d.domain]!].record.type }}</div>
|
||||
<div class="rec-grid-ttl">TTL {{ DNS_FIX[expanded[d.domain]!].record.ttl }}</div>
|
||||
|
||||
<div class="rec-grid-label sep">Host</div>
|
||||
<div class="rec-grid-span sep">
|
||||
<span>{{ DNS_FIX[expanded[d.domain]!].record.host }} <span class="muted">· resolves to {{ DNS_FIX[expanded[d.domain]!].record.host === '@' ? d.domain : `${DNS_FIX[expanded[d.domain]!].record.host}.${d.domain}` }}</span></span>
|
||||
<button class="copy" @click="copyValue(DNS_FIX[expanded[d.domain]!].record.host)"><UiIcon name="copy" :size="12" /></button>
|
||||
</div>
|
||||
|
||||
<div class="rec-grid-label sep">Value</div>
|
||||
<div class="rec-grid-span sep">
|
||||
<span class="break">{{ DNS_FIX[expanded[d.domain]!].record.value }}</span>
|
||||
<button class="copy" @click="copyValue(DNS_FIX[expanded[d.domain]!].record.value)"><UiIcon name="copy" :size="12" /></button>
|
||||
</div>
|
||||
|
||||
<template v-if="DNS_FIX[expanded[d.domain]!].record.priority !== undefined">
|
||||
<div class="rec-grid-label sep">Priority</div>
|
||||
<div class="rec-grid-span sep">{{ DNS_FIX[expanded[d.domain]!].record.priority }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="rec-actions-row">
|
||||
<UiButton size="sm" variant="primary" @click="copyValue(DNS_FIX[expanded[d.domain]!].record.value)">
|
||||
<template #leading><UiIcon name="copy" :size="13" /></template>
|
||||
{{ copied === DNS_FIX[expanded[d.domain]!].record.value ? 'Copied · paste at your DNS provider' : 'Copy record value' }}
|
||||
</UiButton>
|
||||
<UiButton size="sm" variant="secondary" @click="toast.info('Opening DNS provider guide…')">
|
||||
<template #leading><UiIcon name="external" :size="13" /></template>
|
||||
Open DNS guide
|
||||
</UiButton>
|
||||
<UiButton size="sm" variant="ghost" @click="toast.ok('Re-checking record')">
|
||||
<template #leading><UiIcon name="refresh" :size="13" /></template>
|
||||
Re-check this record
|
||||
</UiButton>
|
||||
<div class="spacer" />
|
||||
<Mono dim>changes can take up to 24h to propagate</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="currently-set">
|
||||
<Eyebrow>Currently set</Eyebrow>
|
||||
<div class="set-value">{{ DNS_FIX[expanded[d.domain]!].record.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.content { padding: 24px 40px 64px 40px; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.head { display: flex; align-items: center; gap: 16px; }
|
||||
.title { flex: 1; min-width: 0; }
|
||||
.domain-name { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
|
||||
.domain-sub { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
|
||||
.warn { color: var(--warn); }
|
||||
|
||||
.records {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.rec {
|
||||
padding: 10px 12px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
transition: background 120ms, border-color 120ms;
|
||||
}
|
||||
.rec:hover { background: var(--surface); }
|
||||
.rec.active { background: var(--surface); border-color: var(--text); }
|
||||
.rec-right { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
.detail {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--border);
|
||||
}
|
||||
.detail[data-tone='ok'] { border-left-color: var(--ok); }
|
||||
.detail[data-tone='warn'] { border-left-color: var(--warn); }
|
||||
.detail[data-tone='bad'] { border-left-color: var(--bad); }
|
||||
.detail-head { display: flex; align-items: flex-start; gap: 12px; }
|
||||
.detail-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.detail-body { flex: 1; }
|
||||
.detail-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
.detail-text { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.55; }
|
||||
.detail-close { background: transparent; border: none; padding: 4px; border-radius: 4px; color: var(--text-mute); cursor: pointer; }
|
||||
|
||||
.rec-action { margin-top: 16px; }
|
||||
.rec-grid {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: 70px 1fr 80px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.rec-grid-label { padding: 10px 12px; color: var(--text-mute); border-right: 1px solid var(--border); }
|
||||
.rec-grid-label.sep { border-top: 1px solid var(--border); }
|
||||
.rec-grid-val { padding: 10px 12px; border-right: 1px solid var(--border); }
|
||||
.rec-grid-ttl { padding: 10px 12px; color: var(--text-mute); }
|
||||
.rec-grid-span {
|
||||
padding: 10px 12px;
|
||||
grid-column: 2 / 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.rec-grid-span.sep { border-top: 1px solid var(--border); }
|
||||
.break { word-break: break-all; }
|
||||
.muted { color: var(--text-mute); }
|
||||
.copy { background: transparent; border: none; padding: 4px; border-radius: 4px; color: var(--text-mute); cursor: pointer; }
|
||||
.copy:hover { background: var(--bg); }
|
||||
|
||||
.rec-actions-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.currently-set { margin-top: 12px; padding: 12px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }
|
||||
.set-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); word-break: break-all; margin-top: 4px; }
|
||||
</style>
|
||||
@@ -0,0 +1,430 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of platform-flows.jsx `DomainSetupWizard` (lines 134-176) +
|
||||
// step components 178-369. 6-step full-page route: Domain · Verify · Mail ·
|
||||
// DKIM · DMARC · Done. Same step rail at the top, same DNS record rows and
|
||||
// per-step copy.
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const step = ref(1)
|
||||
const domain = ref('lyngby-biler.dk')
|
||||
const policy = ref<'none' | 'quarantine' | 'reject'>('quarantine')
|
||||
const steps = ['Domain', 'Verify', 'Mail', 'DKIM', 'DMARC', 'Done']
|
||||
|
||||
const dmarcValue = computed(() => `v=DMARC1; p=${policy.value}; rua=mailto:dmarc@${domain.value}; pct=100; adkim=s; aspf=s`)
|
||||
|
||||
const policyOptions = [
|
||||
{ v: 'none' as const, l: 'none · monitor only', d: 'Reports failures but never blocks. Use only for the first 2 weeks while you confirm legitimate mail flows.' },
|
||||
{ v: 'quarantine' as const, l: 'quarantine · recommended', d: 'Suspicious mail goes to spam. Catches almost all spoofing without breaking legitimate edge cases.' },
|
||||
{ v: 'reject' as const, l: 'reject · strictest', d: "Suspicious mail is bounced. Use after you've been at quarantine for 30+ days with no surprises." },
|
||||
]
|
||||
|
||||
function cancel() {
|
||||
router.push('/admin/domains')
|
||||
}
|
||||
function done() {
|
||||
router.push('/admin/domains')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wizard">
|
||||
<div class="flow-head">
|
||||
<div class="row top">
|
||||
<div class="left">
|
||||
<button v-if="step > 1 && step < 6" class="back" @click="step--">
|
||||
<UiIcon name="chevLeft" :size="12" /> back
|
||||
</button>
|
||||
<Eyebrow>Add domain</Eyebrow>
|
||||
</div>
|
||||
<button class="cancel" @click="cancel">
|
||||
<UiIcon name="x" :size="14" /> cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="row title-row">
|
||||
<h1>{{ step < 6 ? 'Verify and configure your domain' : `${domain} is ready` }}</h1>
|
||||
<Mono dim>Step {{ step }} of 6</Mono>
|
||||
</div>
|
||||
<div class="rail">
|
||||
<div v-for="(s, i) in steps" :key="s" class="rail-cell">
|
||||
<div
|
||||
class="bar"
|
||||
:class="i + 1 < step ? 'done' : i + 1 === step ? 'active' : 'todo'"
|
||||
/>
|
||||
<div class="rail-label">
|
||||
<Mono dim>0{{ i + 1 }}</Mono>
|
||||
<span :class="i + 1 === step ? 'is-active' : i + 1 < step ? 'is-done' : 'is-todo'">{{ s }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<!-- Step 1: Domain -->
|
||||
<div v-if="step === 1" class="step1">
|
||||
<p class="lead">
|
||||
Enter the domain you'll use for mail and identity. You'll need to add a few DNS records to prove you own it and route mail correctly.
|
||||
</p>
|
||||
<label class="field">
|
||||
<Eyebrow>Domain</Eyebrow>
|
||||
<div class="input-wrap">
|
||||
<UiIcon name="globe" :size="14" stroke="var(--text-mute)" />
|
||||
<input v-model="domain" placeholder="acme.dk" />
|
||||
</div>
|
||||
</label>
|
||||
<div class="info-box">
|
||||
<Eyebrow>Need to know</Eyebrow>
|
||||
<div class="info-body">
|
||||
• DNS changes typically propagate in 5–30 minutes<br />
|
||||
• You'll need access to your domain's DNS provider (Cloudflare, GoDaddy, etc.)<br />
|
||||
• For Danish .dk domains, you'll work with <Mono>DK-Hostmaster</Mono> or your registrar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Verify -->
|
||||
<div v-else-if="step === 2" class="step2">
|
||||
<p class="lead">
|
||||
Add this TXT record to <Mono>{{ domain }}</Mono>. We check every 30 seconds until it appears.
|
||||
</p>
|
||||
<div class="dns-rows">
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">_dezky-verify.{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky-verify=8a3f9c2e-4b7d-4e1a-9c8f-2d6e1a3b5c7e</div></div>
|
||||
<div class="dns-right">
|
||||
<Badge tone="warn" dot>pending</Badge>
|
||||
<button class="copy-btn"><UiIcon name="copy" :size="11" stroke="var(--text-mute)" /> COPY</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner warn">
|
||||
<UiIcon name="refresh" :size="14" stroke="var(--warn)" />
|
||||
<div class="banner-body">
|
||||
<div class="banner-title">Last check · 14:42:08 · still waiting</div>
|
||||
<div class="banner-text">
|
||||
We saw <Mono>NS · ns1.gratisdns.dk</Mono> but no TXT record at <Mono>_dezky-verify.{{ domain }}</Mono> yet. Add the record above and click verify, or wait — we'll check every 30 seconds.
|
||||
</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="primary">Verify now</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Mail -->
|
||||
<div v-else-if="step === 3" class="step3">
|
||||
<p class="lead">
|
||||
Add these records so mail to <Mono>@{{ domain }}</Mono> reaches dezky and outgoing mail is trusted.
|
||||
</p>
|
||||
<Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">MX · inbound</Eyebrow>
|
||||
<div class="dns-rows">
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">MX</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">10 inbound.mx.dezky.com</div></div>
|
||||
<div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
|
||||
</div>
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">MX</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">20 inbound-backup.mx.dezky.com</div></div>
|
||||
<div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
|
||||
</div>
|
||||
</div>
|
||||
<Eyebrow style="display: block; margin-top: 24px; margin-bottom: 10px">SPF · sender policy</Eyebrow>
|
||||
<div class="dns-rows">
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">v=spf1 include:_spf.dezky.com -all</div></div>
|
||||
<div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner ok">
|
||||
<UiIcon name="check" :size="14" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<div class="banner-body">
|
||||
<div class="banner-title">Mail routing verified</div>
|
||||
<div class="banner-text">All MX and SPF records resolve correctly. Test by sending mail to <Mono>postmaster@{{ domain }}</Mono>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: DKIM -->
|
||||
<div v-else-if="step === 4" class="step4">
|
||||
<p class="lead">
|
||||
DKIM signs every outgoing email so Gmail and Outlook trust it. Two records, then we'll rotate the keys for you automatically every 90 days.
|
||||
</p>
|
||||
<Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">DKIM · selector 1</Eyebrow>
|
||||
<div class="dns-rows">
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">CNAME</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">dezky1._domainkey.{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky1.dkim.dezky.com</div></div>
|
||||
<div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
|
||||
</div>
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">CNAME</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">dezky2._domainkey.{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">dezky2.dkim.dezky.com</div></div>
|
||||
<div class="dns-right"><Badge tone="ok" dot>verified</Badge></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner ok">
|
||||
<UiIcon name="check" :size="14" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<div class="banner-body">
|
||||
<div class="banner-title">DKIM is signing</div>
|
||||
<div class="banner-text">Selectors verified · key rotation enabled · next rotation 14 Aug 2026.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5: DMARC -->
|
||||
<div v-else-if="step === 5" class="step5">
|
||||
<p class="lead">
|
||||
DMARC tells receiving servers what to do with email that fails authentication. We strongly recommend at least <Mono>quarantine</Mono>.
|
||||
</p>
|
||||
<Eyebrow style="display: block; margin-top: 20px; margin-bottom: 10px">Choose policy</Eyebrow>
|
||||
<div class="policy-list">
|
||||
<label v-for="p in policyOptions" :key="p.v" :class="{ active: policy === p.v }">
|
||||
<span class="radio-dot"><span v-if="policy === p.v" /></span>
|
||||
<input type="radio" :value="p.v" v-model="policy" />
|
||||
<div>
|
||||
<div class="policy-label">{{ p.l }}</div>
|
||||
<div class="policy-d">{{ p.d }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<Eyebrow style="display: block; margin-top: 24px; margin-bottom: 10px">Add this record</Eyebrow>
|
||||
<div class="dns-rows">
|
||||
<div class="dns-row">
|
||||
<div><Mono dim>TYPE</Mono><div class="dns-val">TXT</div></div>
|
||||
<div><Mono dim>HOST</Mono><div class="dns-val">_dmarc.{{ domain }}</div></div>
|
||||
<div><Mono dim>VALUE</Mono><div class="dns-val dim">{{ dmarcValue }}</div></div>
|
||||
<div class="dns-right"><button class="copy-btn"><UiIcon name="copy" :size="11" stroke="var(--text-mute)" /> COPY</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 6: Done -->
|
||||
<div v-else class="step6">
|
||||
<div class="check-badge">
|
||||
<UiIcon name="check" :size="36" :stroke-width="2.5" />
|
||||
</div>
|
||||
<h2>{{ domain }} is connected.</h2>
|
||||
<p class="lead-center">
|
||||
Mail is routing. DKIM is signing. DMARC is enforcing. You can now invite users on this domain and they'll receive working email immediately.
|
||||
</p>
|
||||
<div class="summary-grid">
|
||||
<div v-for="k in ['MX', 'SPF', 'DKIM', 'DMARC']" :key="k" class="summary-cell">
|
||||
<Badge tone="ok" dot>verified</Badge>
|
||||
<Mono>{{ k }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<template v-if="step < 6">
|
||||
<UiButton variant="ghost" @click="cancel">Save and exit</UiButton>
|
||||
<div class="spacer" />
|
||||
<UiButton v-if="step === 5" variant="secondary" @click="step = 6">Skip DMARC for now</UiButton>
|
||||
<UiButton variant="primary" @click="step++">
|
||||
<template v-if="step === 5" #leading><UiIcon name="check" :size="13" /></template>
|
||||
{{ step === 1 ? 'Continue' : step === 5 ? 'Add DMARC & finish' : 'Verified · continue' }}
|
||||
<template v-if="step < 5" #trailing><UiIcon name="arrowRight" :size="13" /></template>
|
||||
</UiButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="spacer" />
|
||||
<UiButton variant="secondary" @click="done">
|
||||
<template #leading><UiIcon name="users" :size="13" /></template>
|
||||
Invite users on this domain
|
||||
</UiButton>
|
||||
<UiButton variant="primary" @click="done">Back to domains</UiButton>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wizard { display: flex; flex-direction: column; min-height: 100%; }
|
||||
|
||||
.flow-head { border-bottom: 1px solid var(--border); }
|
||||
.row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||||
.row.top { padding: 14px 32px; }
|
||||
.row.title-row { padding: 0 32px 18px 32px; align-items: flex-end; }
|
||||
.left { display: flex; align-items: center; gap: 14px; }
|
||||
.back, .cancel {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-mute);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.cancel { padding: 6px; font-family: inherit; }
|
||||
.row.title-row h1 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.rail { padding: 0 32px 18px 32px; display: flex; gap: 6px; }
|
||||
.rail-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; }
|
||||
.bar { height: 3px; border-radius: 2px; }
|
||||
.bar.done { background: var(--text); }
|
||||
.bar.active { background: var(--accent); }
|
||||
.bar.todo { background: var(--border); }
|
||||
.rail-label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.is-active { font-weight: 600; color: var(--text); }
|
||||
.is-done { color: var(--text); }
|
||||
.is-todo { color: var(--text-mute); }
|
||||
|
||||
.body { flex: 1; padding: 24px 32px; max-width: 920px; margin: 0 auto; width: 100%; }
|
||||
.lead { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-top: 0; }
|
||||
.lead-center { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 500px; margin-inline: auto; }
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-wrap input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
|
||||
|
||||
.info-box {
|
||||
margin-top: 18px;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
max-width: 520px;
|
||||
}
|
||||
.info-body { margin-top: 10px; font-size: 13px; color: var(--text-dim); line-height: 1.65; }
|
||||
|
||||
.dns-rows { display: flex; flex-direction: column; gap: 8px; }
|
||||
.dns-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 220px 1fr 90px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.dns-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-top: 2px; }
|
||||
.dns-val.dim { color: var(--text-dim); font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.dns-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
|
||||
.copy-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 16px;
|
||||
padding: 14px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.banner.warn { background: rgba(232, 154, 31, 0.06); border: 1px solid rgba(232, 154, 31, 0.24); border-left: 3px solid var(--warn); }
|
||||
.banner.ok { background: rgba(31, 138, 91, 0.06); border: 1px solid rgba(31, 138, 91, 0.24); border-left: 3px solid var(--ok); }
|
||||
.banner-body { flex: 1; font-size: 13px; }
|
||||
.banner-title { font-weight: 600; }
|
||||
.banner-text { color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
|
||||
|
||||
.policy-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.policy-list label {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.policy-list label.active { background: var(--bg); border-color: var(--text); }
|
||||
.policy-list input { display: none; }
|
||||
.radio-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid var(--border-hi, var(--border));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.policy-list label.active .radio-dot { border-color: var(--text); }
|
||||
.radio-dot span { width: 7px; height: 7px; border-radius: 999px; background: var(--text); }
|
||||
.policy-label { font-size: 13px; font-weight: 600; }
|
||||
.policy-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; line-height: 1.5; }
|
||||
|
||||
.step6 { max-width: 680px; text-align: center; padding: 60px 0; margin: 0 auto; }
|
||||
.check-badge {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.step6 h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 36px;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.summary-grid {
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin-top: 36px;
|
||||
padding: 16px 24px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.summary-cell { display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 14px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--surface);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
.spacer { flex: 1; }
|
||||
</style>
|
||||
@@ -0,0 +1,461 @@
|
||||
<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.
|
||||
|
||||
|
||||
import type { IconName } from '~/components/UiIcon.vue'
|
||||
import { sampleAudit } from '~/data/workspace'
|
||||
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
const inviteOpen = ref(false)
|
||||
const inviteStep = ref(1)
|
||||
const seatsOpen = ref(false)
|
||||
const seatsExtra = ref(5)
|
||||
|
||||
const stats = [
|
||||
{ label: 'Seats used', value: '11 / 25', delta: '+2 this week', deltaTone: 'up' as const, 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' },
|
||||
] as const
|
||||
|
||||
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') },
|
||||
{ icon: 'card', label: 'Upgrade plan', onClick: () => router.push('/admin/billing') },
|
||||
{ icon: 'shield', label: 'Enforce MFA', onClick: () => router.push('/admin/security') },
|
||||
{ icon: 'brush', label: 'Edit branding', onClick: () => router.push('/admin/branding') },
|
||||
{ icon: 'download', label: 'Export audit log', onClick: () => toast.ok('Audit log export queued · we’ll email you when ready') },
|
||||
]
|
||||
|
||||
function sendInvite() {
|
||||
inviteOpen.value = false
|
||||
inviteStep.value = 1
|
||||
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)))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Acme Workspace · dezky.com"
|
||||
title="Dashboard"
|
||||
subtitle="Health, activity, and quick actions across your workspace."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" @click="inviteOpen = true">
|
||||
<template #leading><UiIcon name="users" :size="14" /></template>
|
||||
Invite user
|
||||
</UiButton>
|
||||
<UiButton variant="primary" @click="router.push('/admin/domains')">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
Add domain
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="content">
|
||||
<!-- Stat strip — single Card pad=0 with 4-col grid + inner right borders -->
|
||||
<Card :pad="0" class="strip">
|
||||
<div class="strip-grid">
|
||||
<div v-for="(s, i) in stats" :key="s.label" class="strip-cell" :class="{ noborder: i === stats.length - 1 }">
|
||||
<Stat
|
||||
:label="s.label"
|
||||
:value="s.value"
|
||||
:delta="s.delta"
|
||||
:delta-tone="s.deltaTone"
|
||||
:hint="s.hint"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- License usage + Recent admin events -->
|
||||
<div class="row two-col-14">
|
||||
<Card>
|
||||
<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>
|
||||
<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-legend">
|
||||
<span>11 active</span>
|
||||
<span>14 available</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seats-cta">
|
||||
<div class="seats-cta-text">
|
||||
Approaching limit? You can add seats in single increments — billed prorated.
|
||||
</div>
|
||||
<UiButton size="sm" variant="dark" @click="seatsOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add seats
|
||||
</UiButton>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card :pad="0">
|
||||
<div class="card-block-head">
|
||||
<Eyebrow>Activity</Eyebrow>
|
||||
<div class="card-title">Recent admin events</div>
|
||||
</div>
|
||||
<div class="audit-list">
|
||||
<div v-for="a in recent" :key="a.id" class="audit-row">
|
||||
<StatusDot :color="`var(--${a.tone})`" :size="7" :glow="false" />
|
||||
<div class="audit-content">
|
||||
<div class="audit-line">
|
||||
<span class="audit-actor">{{ a.actor }}</span>
|
||||
<Mono dim>{{ a.action }}</Mono>
|
||||
</div>
|
||||
<Mono dim>{{ a.target }}</Mono>
|
||||
</div>
|
||||
<Mono dim>{{ a.when }}</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>
|
||||
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Quick actions</Eyebrow>
|
||||
<div class="card-title">Common tasks</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-grid">
|
||||
<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 }}
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invite user · 3-step modal (stubbed: step 1 fields only, but with stepper text) -->
|
||||
<Modal :open="inviteOpen" :title="'Invite user'" :eyebrow="`Step ${inviteStep} of 3`" size="md" @close="inviteOpen = false; inviteStep = 1">
|
||||
<div v-if="inviteStep === 1" class="form-stack">
|
||||
<label class="field"><Eyebrow>Full name</Eyebrow><input class="input" value="Magnus Eriksen" /></label>
|
||||
<label class="field"><Eyebrow>Email</Eyebrow><input class="input" value="magnus@dezky.com" /></label>
|
||||
<label class="field"><Eyebrow>Role</Eyebrow>
|
||||
<div class="radio-row">
|
||||
<button class="active">Member</button><button>Admin</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>License tier</Eyebrow>
|
||||
<div class="radio-row">
|
||||
<button>Basic</button><button class="active">Business</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="inviteStep === 2" class="form-stack">
|
||||
<div>
|
||||
<Eyebrow>Group memberships</Eyebrow>
|
||||
<div class="check-stack">
|
||||
<label v-for="(g, i) in ['Engineering', 'Design', 'Operations', 'Finance', 'Sales']" :key="g">
|
||||
<input type="checkbox" :checked="i === 0" /> {{ g }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow>Apps</Eyebrow>
|
||||
<div class="check-stack">
|
||||
<label v-for="a in ['Mail', 'Drev', 'Møder', 'Chat']" :key="a">
|
||||
<input type="checkbox" checked /> {{ a }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="review-box">
|
||||
<dl class="def">
|
||||
<div><dt>Name</dt><dd>Magnus Eriksen</dd></div>
|
||||
<div><dt>Email</dt><dd>magnus@dezky.com</dd></div>
|
||||
<div><dt>Role</dt><dd>Member · Business</dd></div>
|
||||
<div><dt>Groups</dt><dd>Engineering</dd></div>
|
||||
<div><dt>Apps</dt><dd>Mail · Drev · Møder · Chat</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="muted">
|
||||
We'll provision the account across Authentik, Stalwart, OCIS, Jitsi and Zulip, then email Magnus an activation link valid for 7 days.
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="inviteOpen = false; inviteStep = 1">Cancel</UiButton>
|
||||
<UiButton v-if="inviteStep > 1" variant="secondary" @click="inviteStep--">Back</UiButton>
|
||||
<UiButton v-if="inviteStep < 3" variant="primary" @click="inviteStep++">Continue</UiButton>
|
||||
<UiButton v-else variant="primary" @click="sendInvite">Send invitation</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Add seats — strict port of AddSeatsModal -->
|
||||
<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>
|
||||
<div>
|
||||
<Eyebrow>How many seats to add</Eyebrow>
|
||||
<div class="stepper-row">
|
||||
<button class="step-btn" @click="seatsExtra = Math.max(1, seatsExtra - 1)">−</button>
|
||||
<input type="number" :value="seatsExtra" @input="(e) => (seatsExtra = Math.max(1, Math.min(500, parseInt((e.target as HTMLInputElement).value || '0') || 1)))" class="step-num" />
|
||||
<button class="step-btn" @click="seatsExtra = Math.min(500, seatsExtra + 1)">+</button>
|
||||
</div>
|
||||
<div class="quick-amounts">
|
||||
<button v-for="n in [5, 10, 25, 50]" :key="n" :class="{ active: seatsExtra === n }" @click="seatsExtra = n">+{{ n }}</button>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</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`) }">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
Add {{ seatsExtra }} seat{{ seatsExtra === 1 ? '' : 's' }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.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); }
|
||||
.strip-cell { padding: 24px; border-right: 1px solid var(--border); }
|
||||
.strip-cell.noborder { border-right: none; }
|
||||
|
||||
.card-head {
|
||||
padding: 20px 24px 16px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.card-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.card-block-head { padding: 20px 24px 12px 24px; }
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
/* License progress */
|
||||
.progress-block { margin-bottom: 16px; }
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: var(--bg);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar span { display: block; height: 100%; background: var(--text); }
|
||||
.progress-legend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
/* Add-seats CTA box (dashed) */
|
||||
.seats-cta {
|
||||
padding: 16px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
border: 1px dashed var(--border-hi, var(--border));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.seats-cta-text { font-size: 13px; color: var(--text-dim); }
|
||||
|
||||
/* Audit list */
|
||||
.audit-list { padding: 0 8px 8px 8px; }
|
||||
.audit-row {
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.audit-content { flex: 1; min-width: 0; }
|
||||
.audit-line { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
|
||||
.audit-actor { font-weight: 500; }
|
||||
|
||||
/* 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" */
|
||||
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
.qa {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 14px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
.qa:hover { background: var(--elevated, var(--row-hover, var(--surface))); }
|
||||
|
||||
/* Invite modal helpers */
|
||||
.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); }
|
||||
.radio-row { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; padding: 2px; width: fit-content; }
|
||||
.radio-row button { padding: 6px 14px; border: none; border-radius: 4px; background: transparent; color: var(--text); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; }
|
||||
.radio-row button.active { background: var(--text); color: var(--bg); }
|
||||
.check-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; }
|
||||
.check-stack label { display: flex; align-items: center; gap: 8px; }
|
||||
.review-box { padding: 16px; background: var(--bg); border-radius: 6px; margin-bottom: 16px; }
|
||||
.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); }
|
||||
.muted { font-size: 12px; color: var(--text-mute); line-height: 1.55; }
|
||||
|
||||
/* Add seats modal */
|
||||
.seats { display: flex; flex-direction: column; gap: 18px; }
|
||||
.seats-grid {
|
||||
padding: 16px;
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
.seats-cell { padding: 0 12px; border-right: 1px solid var(--border); }
|
||||
.seats-cell:first-child { padding-left: 0; }
|
||||
.seats-cell:last-child { border-right: none; padding-right: 0; }
|
||||
.seats-big { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-top: 4px; }
|
||||
.seats-big.ok { color: var(--ok); }
|
||||
.stepper-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
|
||||
.step-btn { width: 36px; height: 36px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-family: inherit; font-size: 16px; color: var(--text); }
|
||||
.step-num { flex: 1; height: 56px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--text); text-align: center; outline: none; }
|
||||
.quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.quick-amounts button { padding: 4px 10px; border-radius: 4px; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; }
|
||||
.quick-amounts button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
|
||||
.charge-summary { padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
|
||||
.charge-row { display: flex; justify-content: space-between; font-size: 13px; align-items: baseline; }
|
||||
.charge-row.sep { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||||
.charge-row.total { font-weight: 600; }
|
||||
.charge-row .big { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
|
||||
.charge-row .muted { color: var(--text-mute); font-weight: 400; }
|
||||
.info-strip { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--text-dim); line-height: 1.55; }
|
||||
</style>
|
||||
@@ -0,0 +1,506 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-collab.jsx `IntegrationsScreen` (lines
|
||||
// 440-575) with IntegrationTile (589) and IntegrationDetail (622).
|
||||
// 4 tabs: Marketplace · Connected · Webhooks · API tokens.
|
||||
|
||||
|
||||
import { integrations, integrationCategories, type Integration } from '~/data/workspace'
|
||||
|
||||
const tab = ref<'marketplace' | 'connected' | 'webhooks' | 'api'>('marketplace')
|
||||
const cat = ref<typeof integrationCategories[number]>('All')
|
||||
const open = ref<Integration | null>(null)
|
||||
const buildCustomOpen = ref(false)
|
||||
const newWebhookOpen = ref(false)
|
||||
const newTokenOpen = ref(false)
|
||||
const disconnectOpen = ref(false)
|
||||
const revokeToken = ref<{ name: string; suffix: string } | null>(null)
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
function connectedAction(i: Integration, id: string) {
|
||||
if (id === 'configure') open.value = i
|
||||
else if (id === 'logs') toast.info(`Logs for ${i.name}`)
|
||||
else if (id === 'sync') toast.info(`Syncing ${i.name} now`)
|
||||
else if (id === 'disconnect') { open.value = i; disconnectOpen.value = true }
|
||||
}
|
||||
const connectedItems = [
|
||||
{ id: 'configure', label: 'Configure', icon: 'brush' as const },
|
||||
{ id: 'logs', label: 'View logs', icon: 'file' as const },
|
||||
{ id: 'sync', label: 'Sync now', icon: 'refresh' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'disconnect', label: 'Disconnect', icon: 'plug' as const, danger: true },
|
||||
]
|
||||
|
||||
function confirmDisconnect() {
|
||||
const name = open.value?.name
|
||||
disconnectOpen.value = false
|
||||
open.value = null
|
||||
toast.warn(`${name} disconnected`)
|
||||
}
|
||||
function confirmRevoke() {
|
||||
const name = revokeToken.value?.name
|
||||
revokeToken.value = null
|
||||
toast.bad(`${name} revoked`)
|
||||
}
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (tab.value === 'connected') return integrations.filter((i) => i.connected)
|
||||
if (cat.value === 'All') return integrations
|
||||
return integrations.filter((i) => i.cat === cat.value)
|
||||
})
|
||||
|
||||
const connectedCount = computed(() => integrations.filter((i) => i.connected).length)
|
||||
|
||||
const apiTokens = [
|
||||
{ name: 'CI deploy token', prefix: 'dz_live_', suffix: 'a91f', scope: 'users:read · billing:read', created: '14 Feb 2026', lastUsed: '2 min ago' },
|
||||
{ name: 'Monitoring scrape', prefix: 'dz_live_', suffix: '88ce', scope: 'metrics:read', created: '02 Mar 2026', lastUsed: '14 sec ago' },
|
||||
{ name: 'Old migration · revoke', prefix: 'dz_live_', suffix: '441b', scope: 'admin:*', created: '11 Jan 2026', lastUsed: '24 d ago' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Marketplace"
|
||||
title="Integrations"
|
||||
subtitle="Connect dezky to the tools your team already uses."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" @click="buildCustomOpen = true">
|
||||
<template #leading><UiIcon name="plug" :size="14" /></template>
|
||||
Build custom · API
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="tab-wrap">
|
||||
<Tabs
|
||||
v-model="tab"
|
||||
:items="[
|
||||
{ value: 'marketplace', label: 'Marketplace', count: integrations.length },
|
||||
{ value: 'connected', label: 'Connected', count: connectedCount },
|
||||
{ value: 'webhooks', label: 'Webhooks' },
|
||||
{ value: 'api', label: 'API tokens' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Marketplace -->
|
||||
<div v-if="tab === 'marketplace'" class="content">
|
||||
<div class="cat-row">
|
||||
<button
|
||||
v-for="c in integrationCategories"
|
||||
:key="c"
|
||||
class="pill"
|
||||
:class="{ active: cat === c }"
|
||||
@click="cat = c"
|
||||
>
|
||||
{{ c }}
|
||||
<span v-if="c === 'Accounting'" class="dk-flag" :class="{ active: cat === c }">DK</span>
|
||||
</button>
|
||||
<div class="spacer" />
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input placeholder="Search integrations…" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile-grid">
|
||||
<button v-for="i in filtered" :key="i.id" class="tile" @click="open = i">
|
||||
<div class="tile-head">
|
||||
<div class="i-icon" :style="{ background: i.color, color: i.accent }">{{ i.icon }}</div>
|
||||
<Badge v-if="i.connected" tone="ok" dot>connected</Badge>
|
||||
<Badge v-else-if="i.danish" tone="info">DK</Badge>
|
||||
</div>
|
||||
<div class="tile-body">
|
||||
<div class="tile-name-row">
|
||||
<span class="tile-name">{{ i.name }}</span>
|
||||
<Mono dim>· {{ i.cat }}</Mono>
|
||||
</div>
|
||||
<div class="tile-desc">{{ i.desc }}</div>
|
||||
</div>
|
||||
<div class="tile-foot">
|
||||
<Mono dim>{{ i.kind }}</Mono>
|
||||
<span v-if="i.connected" class="users">{{ i.users }} users</span>
|
||||
<span v-else class="connect">Connect</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connected -->
|
||||
<div v-else-if="tab === 'connected'" class="content">
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Integration</th><th>Type</th><th>Users</th><th>Status</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in filtered" :key="i.id">
|
||||
<td>
|
||||
<div class="conn-cell">
|
||||
<div class="i-icon small" :style="{ background: i.color, color: i.accent }">{{ i.icon }}</div>
|
||||
<div>
|
||||
<div class="conn-name">{{ i.name }}</div>
|
||||
<Mono dim>{{ i.cat }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono>{{ i.kind }}</Mono></td>
|
||||
<td><Mono>{{ i.users || 0 }}</Mono></td>
|
||||
<td><Badge tone="ok" dot>connected</Badge></td>
|
||||
<td class="right">
|
||||
<UiButton size="sm" variant="ghost" @click="open = i">Configure</UiButton>
|
||||
<AdminKebabMenu :items="connectedItems" :icon-size="13" @select="(id) => connectedAction(i, id)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Webhooks -->
|
||||
<div v-else-if="tab === 'webhooks'" class="content">
|
||||
<div class="empty-card">
|
||||
<UiIcon name="plug" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">No webhooks yet</div>
|
||||
<div class="empty-body">Webhooks let external services react to events in dezky (user.created, file.shared, billing.charged, etc.).</div>
|
||||
<UiButton variant="primary" @click="newWebhookOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New webhook
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- API tokens -->
|
||||
<div v-else class="content api">
|
||||
<div class="row">
|
||||
<div class="lead">API tokens authenticate scripts and external services to your workspace. Treat them like passwords.</div>
|
||||
<UiButton variant="primary" @click="newTokenOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
Generate token
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Token</th><th>Scope</th><th>Created</th><th>Last used</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="t in apiTokens" :key="t.name">
|
||||
<td>
|
||||
<div class="tok-name">{{ t.name }}</div>
|
||||
<Mono dim>{{ t.prefix }}····{{ t.suffix }}</Mono>
|
||||
</td>
|
||||
<td><Mono dim>{{ t.scope }}</Mono></td>
|
||||
<td><Mono dim>{{ t.created }}</Mono></td>
|
||||
<td><Mono dim>{{ t.lastUsed }}</Mono></td>
|
||||
<td class="right">
|
||||
<UiButton size="sm" variant="danger" @click="revokeToken = { name: t.name, suffix: t.suffix }">
|
||||
<template #leading><UiIcon name="trash" :size="13" /></template>
|
||||
Revoke
|
||||
</UiButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Detail side panel -->
|
||||
<SidePanel :open="!!open" :eyebrow="open?.cat || ''" :title="open?.name || ''" width="lg" @close="open = null">
|
||||
<div v-if="open" class="detail">
|
||||
<div class="detail-head">
|
||||
<div class="i-icon big" :style="{ background: open.color, color: open.accent }">{{ open.icon }}</div>
|
||||
<div class="detail-meta">
|
||||
<div class="detail-name">{{ open.name }}</div>
|
||||
<Mono dim>{{ open.cat }} · {{ open.kind }}</Mono>
|
||||
<div style="margin-top: 8px">
|
||||
<Badge v-if="open.connected" tone="ok" dot>connected · {{ open.users }} users</Badge>
|
||||
<Badge v-else tone="neutral">not connected</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-desc">{{ open.desc }}</div>
|
||||
|
||||
<template v-if="!open.connected">
|
||||
<Eyebrow>What this integration does</Eyebrow>
|
||||
<div class="bullets">
|
||||
<div v-for="b in [
|
||||
`Provisions users from dezky into ${open.name} on invite`,
|
||||
`Single sign-on via Authentik · removes ${open.name} passwords`,
|
||||
`Group sync · dezky groups become ${open.name} teams`,
|
||||
'Audit trail · sign-ins logged in your global audit log',
|
||||
]" :key="b" class="bullet">
|
||||
<UiIcon name="check" :size="12" stroke="var(--ok)" :stroke-width="2.5" />
|
||||
<span>{{ b }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<Eyebrow>Configuration</Eyebrow>
|
||||
<div class="cfg">
|
||||
<div class="cfg-row">
|
||||
<Mono dim>SSO endpoint</Mono>
|
||||
<Mono>https://sso.dezky.com/{{ open.id }}</Mono>
|
||||
</div>
|
||||
<div class="cfg-row">
|
||||
<Mono dim>Last sign-in</Mono>
|
||||
<span>2 minutes ago · anne@dezky.com</span>
|
||||
</div>
|
||||
<div class="cfg-row">
|
||||
<Mono dim>Last sync</Mono>
|
||||
<span>5 minutes ago · 11 users</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer>
|
||||
<template v-if="open?.connected">
|
||||
<UiButton variant="danger" @click="disconnectOpen = true">
|
||||
<template #leading><UiIcon name="plug" :size="13" /></template>
|
||||
Disconnect
|
||||
</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="secondary" @click="toast.info(`Logs for ${open?.name}`)">View logs</UiButton>
|
||||
<UiButton variant="primary" @click="open = null; toast.ok('Settings saved')">Save changes</UiButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<UiButton variant="ghost" @click="open = null">Cancel</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="primary" @click="toast.ok(`${open?.name} connected`); open = null">
|
||||
<template #leading><UiIcon name="plug" :size="13" /></template>
|
||||
Connect {{ open?.name }}
|
||||
</UiButton>
|
||||
</template>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
<!-- Build custom API modal stub -->
|
||||
<Modal :open="buildCustomOpen" eyebrow="Integrations · custom" title="Build a custom integration" size="md" @close="buildCustomOpen = false">
|
||||
<div class="form-stack">
|
||||
<div class="lead">
|
||||
Use dezky's REST API + webhooks to wire any system into your workspace. Token-scoped,
|
||||
rate-limited, and audit-logged.
|
||||
</div>
|
||||
<label class="field"><Eyebrow>Integration name</Eyebrow><input class="input" placeholder="Acme finance bridge" /></label>
|
||||
<label class="field"><Eyebrow>Description</Eyebrow><input class="input" placeholder="Posts invoice events to /accounts" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="buildCustomOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="buildCustomOpen = false; tab = 'api'; toast.info('Generate a token to start')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Continue
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- New webhook modal -->
|
||||
<Modal :open="newWebhookOpen" eyebrow="Integrations · webhooks" title="New webhook" size="md" @close="newWebhookOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Endpoint URL</Eyebrow><input class="input" placeholder="https://example.com/dezky" /></label>
|
||||
<label class="field"><Eyebrow>Events</Eyebrow><input class="input" placeholder="user.created, file.shared" /></label>
|
||||
<label class="field"><Eyebrow>Signing secret</Eyebrow><input class="input" value="auto-generated · copy after save" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="newWebhookOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="newWebhookOpen = false; toast.ok('Webhook created')">Create webhook</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- New API token modal -->
|
||||
<Modal :open="newTokenOpen" eyebrow="Integrations · API tokens" title="New API token" size="md" @close="newTokenOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Token name</Eyebrow><input class="input" placeholder="CI deploy token" /></label>
|
||||
<label class="field"><Eyebrow>Scopes</Eyebrow><input class="input" placeholder="users:read · billing:read" /></label>
|
||||
<label class="field"><Eyebrow>Expires</Eyebrow>
|
||||
<select class="input"><option>30 days</option><option>90 days</option><option>1 year</option><option>Never</option></select>
|
||||
</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="newTokenOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="newTokenOpen = false; toast.ok('Token created — copy now, it will not be shown again')">
|
||||
<template #leading><UiIcon name="key" :size="13" /></template>
|
||||
Generate token
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Confirm disconnect -->
|
||||
<ConfirmDialog
|
||||
:open="disconnectOpen"
|
||||
eyebrow="Integration"
|
||||
:title="`Disconnect ${open?.name || ''}?`"
|
||||
confirm-label="Disconnect"
|
||||
tone="danger"
|
||||
@close="disconnectOpen = false"
|
||||
@confirm="confirmDisconnect"
|
||||
>
|
||||
Existing user sessions in {{ open?.name }} will keep working until they expire, but new
|
||||
sign-ins and provisioning will stop immediately.
|
||||
</ConfirmDialog>
|
||||
|
||||
<!-- Confirm revoke API token -->
|
||||
<ConfirmDialog
|
||||
:open="!!revokeToken"
|
||||
eyebrow="API token"
|
||||
:title="`Revoke ${revokeToken?.name || ''}?`"
|
||||
confirm-label="Revoke token"
|
||||
tone="danger"
|
||||
@close="revokeToken = null"
|
||||
@confirm="confirmRevoke"
|
||||
>
|
||||
Any script using <Mono>dz_live_····{{ revokeToken?.suffix }}</Mono> will fail
|
||||
authentication immediately. This cannot be undone.
|
||||
</ConfirmDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 20px 40px 64px 40px; }
|
||||
|
||||
.cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
|
||||
.pill {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.pill.active { background: var(--text); color: var(--bg); border-color: var(--text); }
|
||||
.dk-flag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
background: var(--bg);
|
||||
color: var(--text-mute);
|
||||
border-radius: 2px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.dk-flag.active { background: var(--accent); color: var(--accent-fg); }
|
||||
.spacer { flex: 1; }
|
||||
.input-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
width: 240px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--text); }
|
||||
|
||||
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
|
||||
.tile {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
min-height: 168px;
|
||||
transition: border-color 120ms;
|
||||
}
|
||||
.tile:hover { border-color: var(--text); }
|
||||
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
||||
.tile-body { flex: 1; }
|
||||
.tile-name-row { display: flex; align-items: center; gap: 6px; }
|
||||
.tile-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; }
|
||||
.tile-desc { font-size: 12px; color: var(--text-mute); margin-top: 6px; line-height: 1.5; }
|
||||
.tile-foot { display: flex; align-items: center; justify-content: space-between; }
|
||||
.users { font-size: 12px; color: var(--text-dim); }
|
||||
.connect {
|
||||
font-size: 12px;
|
||||
color: var(--accent-fg);
|
||||
background: var(--accent);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.i-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.i-icon.small { width: 32px; height: 32px; font-size: 16px; }
|
||||
.i-icon.big { width: 56px; height: 56px; font-size: 28px; }
|
||||
|
||||
.tbl { width: 100%; border-collapse: collapse; }
|
||||
.tbl th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
|
||||
.tbl tr:last-child td { border-bottom: none; }
|
||||
.tbl .right { text-align: right; display: flex; gap: 4px; justify-content: flex-end; }
|
||||
tr td.right { display: table-cell; text-align: right; }
|
||||
|
||||
.conn-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.conn-name { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.empty-card {
|
||||
padding: 60px 24px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.empty-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
|
||||
.empty-body { font-size: 13px; color: var(--text-mute); max-width: 420px; line-height: 1.5; }
|
||||
|
||||
.content.api { max-width: 900px; }
|
||||
.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.lead { font-size: 13px; color: var(--text-mute); max-width: 540px; line-height: 1.5; }
|
||||
.tok-name { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.detail { padding-bottom: 24px; }
|
||||
.detail-head { display: flex; align-items: center; gap: 14px; }
|
||||
.detail-meta { flex: 1; }
|
||||
.detail-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
|
||||
.detail-desc { margin-top: 16px; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
|
||||
|
||||
.bullets { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
|
||||
.bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
|
||||
.cfg { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
|
||||
.cfg-row { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
|
||||
|
||||
/* Modal form helpers */
|
||||
.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); }
|
||||
</style>
|
||||
@@ -0,0 +1,559 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-admin.jsx `MailSettingsScreen` (lines 76-305).
|
||||
// 5 tabs: Aliases / Forwarding / Filters · anti-spam / Distribution lists /
|
||||
// Compliance · retention. Each uses the source's data and copy verbatim.
|
||||
|
||||
|
||||
import {
|
||||
orgAliases,
|
||||
forwardingRules,
|
||||
antiSpamFilters,
|
||||
distributionLists,
|
||||
} from '~/data/workspace'
|
||||
|
||||
const tab = ref<'aliases' | 'forwarding' | 'filters' | 'lists' | 'compliance'>('aliases')
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const addAliasOpen = ref(false)
|
||||
const ruleOpen = ref(false)
|
||||
const filterOpen = ref(false)
|
||||
const listOpen = ref(false)
|
||||
const holdOpen = ref(false)
|
||||
const openList = ref<typeof distributionLists[number] | null>(null)
|
||||
const deleteListOpen = ref(false)
|
||||
|
||||
// Track each forwarding rule's enabled flag locally so the toggle visually flips.
|
||||
const ruleEnabled = reactive<Record<string, boolean>>(
|
||||
Object.fromEntries(forwardingRules.map((r) => [r.name, r.enabled])),
|
||||
)
|
||||
const filterEnabled = reactive<Record<string, boolean>>(
|
||||
Object.fromEntries(antiSpamFilters.map((f) => [f.name, f.enabled])),
|
||||
)
|
||||
|
||||
async function copyAlias(alias: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(alias)
|
||||
toast.ok('Alias copied', alias)
|
||||
} catch {
|
||||
toast.warn('Copy failed', 'Select and copy manually')
|
||||
}
|
||||
}
|
||||
|
||||
function aliasAction(alias: string, id: string) {
|
||||
if (id === 'edit') addAliasOpen.value = true
|
||||
else if (id === 'copy') copyAlias(alias)
|
||||
else if (id === 'disable') toast.info(`${alias} disabled`)
|
||||
else if (id === 'delete') toast.bad(`${alias} deleted`)
|
||||
}
|
||||
|
||||
const aliasItems = [
|
||||
{ id: 'edit', label: 'Edit alias', icon: 'brush' as const },
|
||||
{ id: 'copy', label: 'Copy address', icon: 'copy' as const },
|
||||
{ id: 'disable', label: 'Disable alias', icon: 'x' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete alias', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function ruleAction(name: string, id: string) {
|
||||
if (id === 'edit') ruleOpen.value = true
|
||||
else if (id === 'run') toast.info(`Running "${name}" once`)
|
||||
else if (id === 'duplicate') toast.ok(`"${name}" duplicated`)
|
||||
else if (id === 'delete') toast.bad(`"${name}" deleted`)
|
||||
}
|
||||
const ruleItems = [
|
||||
{ id: 'edit', label: 'Edit rule', icon: 'brush' as const },
|
||||
{ id: 'run', label: 'Run once now', icon: 'refresh' as const },
|
||||
{ id: 'duplicate', label: 'Duplicate', icon: 'copy' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete rule', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function filterAction(name: string, id: string) {
|
||||
if (id === 'edit') filterOpen.value = true
|
||||
else if (id === 'duplicate') toast.ok(`"${name}" duplicated`)
|
||||
else if (id === 'delete') toast.bad(`"${name}" deleted`)
|
||||
}
|
||||
const filterItems = [
|
||||
{ id: 'edit', label: 'Edit filter', icon: 'brush' as const },
|
||||
{ id: 'duplicate', label: 'Duplicate', icon: 'copy' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete filter', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function confirmDeleteList() {
|
||||
deleteListOpen.value = false
|
||||
const name = openList.value?.name
|
||||
openList.value = null
|
||||
toast.bad(`${name} deleted`)
|
||||
}
|
||||
|
||||
const retention = ref<'30d' | '1year' | '3year' | 'unlimited'>('3year')
|
||||
const retentionOptions = [
|
||||
{ v: '30d' as const, label: '30 days', d: 'Standard retention. Anything older is permanently deleted.' },
|
||||
{ v: '1year' as const, label: '1 year', d: 'Mid-term. Suitable for most non-regulated businesses.' },
|
||||
{ v: '3year' as const, label: '3 years · recommended', d: 'Danish bookkeeping retention compliant (5-year option also available).' },
|
||||
{ v: 'unlimited' as const, label: 'Unlimited', d: 'Required for regulated industries (legal, healthcare, public sector).' },
|
||||
]
|
||||
|
||||
const tabs = [
|
||||
{ value: 'aliases', label: 'Aliases', count: orgAliases.length },
|
||||
{ value: 'forwarding', label: 'Forwarding', count: forwardingRules.length },
|
||||
{ value: 'filters', label: 'Filters · anti-spam', count: antiSpamFilters.length },
|
||||
{ value: 'lists', label: 'Distribution lists', count: distributionLists.length },
|
||||
{ value: 'compliance', label: 'Compliance · retention' },
|
||||
]
|
||||
|
||||
function toneFor(action: string): 'bad' | 'warn' | 'info' {
|
||||
return action === 'reject' ? 'bad' : action === 'quarantine' ? 'warn' : 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Workspace"
|
||||
title="Mail settings"
|
||||
subtitle="Organization-level aliases, forwarding, content filters, and compliance policies."
|
||||
/>
|
||||
<div class="tab-wrap">
|
||||
<Tabs v-model="tab" :items="tabs" />
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- ALIASES -->
|
||||
<template v-if="tab === 'aliases'">
|
||||
<div class="row">
|
||||
<div class="lead">Aliases route mail to existing users or distribution lists. They count against your domain, not your seats.</div>
|
||||
<UiButton variant="primary" @click="addAliasOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
Add alias
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead><tr><th>Alias</th><th></th><th>Destination</th><th>State</th><th>Created</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="r in orgAliases" :key="r.alias">
|
||||
<td><Mono style="font-weight: 500">{{ r.alias }}</Mono></td>
|
||||
<td><UiIcon name="arrowRight" :size="12" stroke="var(--text-mute)" /></td>
|
||||
<td>{{ r.dest }}</td>
|
||||
<td><Badge :tone="r.active ? 'ok' : 'neutral'" dot>{{ r.active ? 'active' : 'paused' }}</Badge></td>
|
||||
<td><Mono dim>{{ r.created }}</Mono></td>
|
||||
<td class="right">
|
||||
<UiButton size="sm" variant="ghost" @click="copyAlias(r.alias)"><UiIcon name="copy" :size="13" /></UiButton>
|
||||
<AdminKebabMenu :items="aliasItems" :icon-size="13" @select="(id) => aliasAction(r.alias, id)" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<!-- FORWARDING -->
|
||||
<template v-else-if="tab === 'forwarding'">
|
||||
<div class="row">
|
||||
<div class="lead">Conditional rules applied to all incoming mail. Useful for routing customer inquiries or auto-escalating.</div>
|
||||
<UiButton variant="primary" @click="ruleOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New rule
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="rules">
|
||||
<Card v-for="r in forwardingRules" :key="r.name" :pad="16">
|
||||
<div class="rule-row">
|
||||
<button class="toggle" :class="{ on: ruleEnabled[r.name] }" @click="ruleEnabled[r.name] = !ruleEnabled[r.name]"><span /></button>
|
||||
<div class="rule-meta">
|
||||
<div class="rule-name">{{ r.name }}</div>
|
||||
<div class="rule-line">
|
||||
<Mono dim>WHEN</Mono>
|
||||
<span class="rule-match">{{ r.match }}</span>
|
||||
<UiIcon name="arrowRight" :size="11" stroke="var(--text-mute)" />
|
||||
<Mono dim>FORWARD TO</Mono>
|
||||
<Mono>{{ r.fwd }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="ghost" @click="ruleOpen = true">Edit</UiButton>
|
||||
<AdminKebabMenu :items="ruleItems" @select="(id) => ruleAction(r.name, id)" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- FILTERS -->
|
||||
<template v-else-if="tab === 'filters'">
|
||||
<div class="row">
|
||||
<div class="lead">Org-wide content filters apply <i>before</i> user-level rules. Stalwart's spam engine handles the rest automatically.</div>
|
||||
<UiButton variant="primary" @click="filterOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New filter
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead><tr><th>Filter</th><th>Match</th><th>Action</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="f in antiSpamFilters" :key="f.name">
|
||||
<td>
|
||||
<div class="filter-name">
|
||||
<button class="toggle" :class="{ on: filterEnabled[f.name] }" @click="filterEnabled[f.name] = !filterEnabled[f.name]"><span /></button>
|
||||
<span>{{ f.name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono dim>{{ f.match }}</Mono></td>
|
||||
<td><Badge :tone="toneFor(f.action)">{{ f.action }}</Badge></td>
|
||||
<td class="right"><AdminKebabMenu :items="filterItems" @select="(id) => filterAction(f.name, id)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
<div class="builtin">
|
||||
<UiIcon name="shield" :size="16" stroke="var(--ok)" />
|
||||
<div>
|
||||
<div class="builtin-title">Built-in spam protection · enabled</div>
|
||||
<div class="builtin-sub">
|
||||
Stalwart's reputation engine and Bayesian filter block ~94% of spam at the edge. <Mono>last 7d: 12,840 blocked · 18 quarantined · 0 false positives reported</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- LISTS -->
|
||||
<template v-else-if="tab === 'lists'">
|
||||
<div class="row">
|
||||
<div class="lead">Distribution lists send mail to many recipients via a single alias. Members can be internal users, groups, or external addresses.</div>
|
||||
<UiButton variant="primary" @click="listOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New list
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="lists">
|
||||
<Card v-for="l in distributionLists" :key="l.alias">
|
||||
<div class="list-head">
|
||||
<div>
|
||||
<div class="list-title">
|
||||
<UiIcon name="users" :size="16" stroke="var(--text-mute)" />
|
||||
<span class="list-name">{{ l.name }}</span>
|
||||
<Badge v-if="l.external" tone="warn">external members</Badge>
|
||||
</div>
|
||||
<Mono dim style="display: block; margin-top: 4px">{{ l.alias }}</Mono>
|
||||
</div>
|
||||
<Badge :tone="l.moderation === 'open' ? 'ok' : 'neutral'">{{ l.moderation }}</Badge>
|
||||
</div>
|
||||
<div class="list-row">
|
||||
<div>
|
||||
<Eyebrow>Members</Eyebrow>
|
||||
<div class="list-num">{{ l.members }}</div>
|
||||
</div>
|
||||
<div class="list-owner">
|
||||
<Eyebrow>Owner</Eyebrow>
|
||||
<div>{{ l.owner }}</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="secondary" @click="openList = l">Manage</UiButton>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- COMPLIANCE -->
|
||||
<template v-else>
|
||||
<div class="compliance">
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Retention</Eyebrow>
|
||||
<div class="card-title">Mail retention policy</div>
|
||||
<div class="card-sub">Applied org-wide. Compliance requirements override user-level deletion.</div>
|
||||
</div>
|
||||
<div class="radio-big">
|
||||
<label v-for="o in retentionOptions" :key="o.v" :class="{ active: retention === o.v }">
|
||||
<span class="radio-dot"><span v-if="retention === o.v" /></span>
|
||||
<input type="radio" :value="o.v" v-model="retention" />
|
||||
<div>
|
||||
<div class="radio-label">{{ o.label }}</div>
|
||||
<div class="radio-d">{{ o.d }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Journaling</Eyebrow>
|
||||
<div class="card-title">Mail journaling</div>
|
||||
<div class="card-sub">Copy every inbound and outbound mail to a journal mailbox for e-discovery.</div>
|
||||
</div>
|
||||
<button class="toggle"><span /></button>
|
||||
</div>
|
||||
<div class="muted">
|
||||
When enabled, journals are written to <Mono>journal@dezky.com</Mono>. Storage usage counts against your plan. Available on Business and Enterprise plans.
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head card-head-inline">
|
||||
<div>
|
||||
<Eyebrow>Legal hold</Eyebrow>
|
||||
<div class="card-title">Legal hold cases</div>
|
||||
</div>
|
||||
<UiButton size="sm" variant="secondary" @click="holdOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="13" /></template>
|
||||
New hold
|
||||
</UiButton>
|
||||
</div>
|
||||
<div class="empty">
|
||||
<UiIcon name="shield" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="empty-title">No active holds</div>
|
||||
<div class="empty-body">When legal review is needed, place a hold on specific users or date ranges to prevent deletion.</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add alias modal (stub) -->
|
||||
<Modal :open="addAliasOpen" eyebrow="Mail · aliases" title="Add alias" size="md" @close="addAliasOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Alias address</Eyebrow>
|
||||
<div class="alias-row">
|
||||
<input class="input" value="marketing" placeholder="prefix" />
|
||||
<span class="at">@</span>
|
||||
<select class="input"><option>dezky.com</option><option>baslund.dk</option></select>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>Route to user</Eyebrow><input class="input" value="frederik@dezky.com" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="addAliasOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="addAliasOpen = false">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Create alias
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Forwarding rule modal -->
|
||||
<Modal :open="ruleOpen" eyebrow="Mail · forwarding" title="New forwarding rule" size="md" @close="ruleOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Rule name</Eyebrow><input class="input" placeholder="Out-of-hours to on-call" /></label>
|
||||
<label class="field"><Eyebrow>When</Eyebrow><input class="input" placeholder="subject: …" /></label>
|
||||
<label class="field"><Eyebrow>Forward to</Eyebrow><input class="input" placeholder="oncall@dezky.com" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="ruleOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="ruleOpen = false">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save rule
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- New filter modal -->
|
||||
<Modal :open="filterOpen" eyebrow="Mail · filters" title="New content filter" size="md" @close="filterOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Filter name</Eyebrow><input class="input" placeholder="Block executable attachments" /></label>
|
||||
<label class="field"><Eyebrow>Match expression</Eyebrow><input class="input" placeholder="attachment ext in (.exe, .scr, .bat)" /></label>
|
||||
<label class="field"><Eyebrow>Action</Eyebrow>
|
||||
<select class="input"><option>reject</option><option>quarantine</option><option>add tag</option></select>
|
||||
</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="filterOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="filterOpen = false">Create filter</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- New list modal -->
|
||||
<Modal :open="listOpen" eyebrow="Mail · lists" title="New distribution list" size="md" @close="listOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>List name</Eyebrow><input class="input" placeholder="Engineering" /></label>
|
||||
<label class="field"><Eyebrow>Alias</Eyebrow><input class="input" placeholder="eng@dezky.com" /></label>
|
||||
<label class="field"><Eyebrow>Owner</Eyebrow><input class="input" value="Anne Baslund" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="listOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="listOpen = false">Create list</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Manage list side panel -->
|
||||
<SidePanel :open="!!openList" eyebrow="Distribution list" :title="openList?.name || ''" width="lg" @close="openList = null">
|
||||
<div v-if="openList" class="manage">
|
||||
<div class="manage-head">
|
||||
<div class="manage-icon"><UiIcon name="users" :size="20" /></div>
|
||||
<div class="manage-meta">
|
||||
<div class="manage-name">{{ openList.name }}</div>
|
||||
<Mono dim>{{ openList.alias }}</Mono>
|
||||
</div>
|
||||
<Badge :tone="openList.moderation === 'open' ? 'ok' : 'neutral'">{{ openList.moderation }}</Badge>
|
||||
</div>
|
||||
<div class="manage-stats">
|
||||
<div><Eyebrow>Members</Eyebrow><div class="ms-v">{{ openList.members }}</div></div>
|
||||
<div><Eyebrow>Owner</Eyebrow><div class="ms-v">{{ openList.owner }}</div></div>
|
||||
<div><Eyebrow>Posts this week</Eyebrow><div class="ms-v">{{ openList.members > 8 ? '142' : openList.members > 2 ? '38' : '6' }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="danger" @click="deleteListOpen = true">
|
||||
<template #leading><UiIcon name="trash" :size="13" /></template>
|
||||
Delete list
|
||||
</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="secondary" @click="openList = null">Discard</UiButton>
|
||||
<UiButton variant="primary" @click="openList = null; toast.ok('List saved')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Save changes
|
||||
</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
<!-- Confirm delete list -->
|
||||
<ConfirmDialog
|
||||
:open="deleteListOpen"
|
||||
eyebrow="Distribution list"
|
||||
:title="`Delete ${openList?.name || ''}?`"
|
||||
confirm-label="Delete list"
|
||||
tone="danger"
|
||||
@close="deleteListOpen = false"
|
||||
@confirm="confirmDeleteList"
|
||||
>
|
||||
Mail sent to this list will start bouncing immediately. Existing replies in members' inboxes are unaffected.
|
||||
</ConfirmDialog>
|
||||
|
||||
<!-- Legal hold modal -->
|
||||
<Modal :open="holdOpen" eyebrow="Compliance · legal hold" title="Place legal hold" size="md" @close="holdOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Case name</Eyebrow><input class="input" placeholder="Case 2026-Q3-DPA-001" /></label>
|
||||
<label class="field"><Eyebrow>Scope · users</Eyebrow><input class="input" placeholder="anne@, mikkel@, frederik@" /></label>
|
||||
<label class="field"><Eyebrow>Date range</Eyebrow><input class="input" placeholder="2026-01-01 → 2026-12-31" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="holdOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="holdOpen = false">Place hold</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 20px 40px 64px 40px; }
|
||||
|
||||
.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.lead { font-size: 13px; color: var(--text-mute); max-width: 540px; line-height: 1.5; }
|
||||
|
||||
.tbl { width: 100%; border-collapse: collapse; }
|
||||
.tbl th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
|
||||
.tbl tr:last-child td { border-bottom: none; }
|
||||
.tbl .right { text-align: right; }
|
||||
|
||||
.rules { display: flex; flex-direction: column; gap: 10px; }
|
||||
.rule-row { display: flex; align-items: center; gap: 14px; }
|
||||
.rule-meta { flex: 1; }
|
||||
.rule-name { font-size: 14px; font-weight: 500; }
|
||||
.rule-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
|
||||
.rule-match { font-family: var(--font-mono); color: var(--text-dim); }
|
||||
|
||||
.toggle {
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
border: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle span {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg);
|
||||
transition: left 120ms;
|
||||
}
|
||||
.toggle.on { background: var(--text); }
|
||||
.toggle.on span { left: 16px; background: var(--accent); }
|
||||
|
||||
.filter-name { display: flex; align-items: center; gap: 10px; }
|
||||
.builtin {
|
||||
margin-top: 16px;
|
||||
padding: 14px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.builtin-title { font-size: 13px; font-weight: 600; }
|
||||
.builtin-sub { color: var(--text-mute); margin-top: 4px; font-size: 13px; }
|
||||
|
||||
.lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.list-title { display: flex; align-items: center; gap: 8px; }
|
||||
.list-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
|
||||
.list-row { display: flex; gap: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); align-items: flex-end; }
|
||||
.list-num { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin-top: 4px; }
|
||||
.list-owner { flex: 1; font-size: 13px; }
|
||||
|
||||
.compliance { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
|
||||
.card-head { margin-bottom: 12px; }
|
||||
.card-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
|
||||
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
.muted { font-size: 13px; color: var(--text-mute); line-height: 1.6; }
|
||||
.radio-big { display: flex; flex-direction: column; gap: 8px; }
|
||||
.radio-big label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
|
||||
.radio-big label.active { border-color: var(--text); background: var(--bg); }
|
||||
.radio-big input { display: none; }
|
||||
.radio-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
|
||||
.radio-big label.active .radio-dot { border-color: var(--text); }
|
||||
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
|
||||
.radio-label { font-size: 14px; font-weight: 500; }
|
||||
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.empty { padding: 36px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.empty-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
|
||||
.empty-body { font-size: 13px; color: var(--text-mute); max-width: 420px; line-height: 1.5; }
|
||||
|
||||
/* Modal forms */
|
||||
.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); }
|
||||
.alias-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
|
||||
.at { font-family: var(--font-mono); color: var(--text-mute); }
|
||||
|
||||
.manage { padding-bottom: 24px; }
|
||||
.manage-head { display: flex; align-items: center; gap: 14px; }
|
||||
.manage-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.manage-meta { flex: 1; min-width: 0; }
|
||||
.manage-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
|
||||
.manage-stats { display: flex; gap: 24px; margin-top: 16px; }
|
||||
.ms-v { font-size: 13px; margin-top: 4px; font-weight: 500; }
|
||||
</style>
|
||||
@@ -0,0 +1,380 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-collab.jsx `MeetingsScreen` (lines 71-260)
|
||||
// with Rooms / Recordings / Settings tabs and source's sample data.
|
||||
|
||||
|
||||
import { meetingRooms, meetingRecordings } from '~/data/workspace'
|
||||
|
||||
const tab = ref<'rooms' | 'recordings' | 'settings'>('rooms')
|
||||
const newRoomOpen = ref(false)
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
function roomAction(name: string, alias: string, id: string) {
|
||||
if (id === 'start') toast.info(`Joining ${name}…`)
|
||||
else if (id === 'copy') {
|
||||
navigator.clipboard?.writeText(`meet.dezky.com/${alias}`).catch(() => {})
|
||||
toast.ok('Room link copied', `meet.dezky.com/${alias}`)
|
||||
}
|
||||
else if (id === 'edit') toast.info(`Edit ${name}`)
|
||||
else if (id === 'history') toast.info(`Meeting history for ${name}`)
|
||||
else if (id === 'delete') toast.bad(`${name} deleted`)
|
||||
}
|
||||
const roomItems = [
|
||||
{ id: 'start', label: 'Start meeting', icon: 'video' as const },
|
||||
{ id: 'copy', label: 'Copy room link', icon: 'copy' as const },
|
||||
{ id: 'edit', label: 'Edit room…', icon: 'brush' as const },
|
||||
{ id: 'history', label: 'Meeting history', icon: 'file' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'delete', label: 'Delete room', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
function recAction(title: string, id: string) {
|
||||
if (id === 'play') toast.info(`Playing "${title}"`)
|
||||
else if (id === 'download') toast.info(`Downloading "${title}"`)
|
||||
else if (id === 'share') toast.ok('Share link copied')
|
||||
else if (id === 'transcript') toast.info('Opening transcript')
|
||||
else if (id === 'hold') toast.warn(`Legal hold placed on "${title}"`)
|
||||
else if (id === 'delete') toast.bad(`"${title}" deleted`)
|
||||
}
|
||||
const recItems = [
|
||||
{ id: 'play', label: 'Play', icon: 'video' as const },
|
||||
{ id: 'download', label: 'Download MP4', icon: 'download' as const },
|
||||
{ id: 'share', label: 'Copy share link', icon: 'copy' as const },
|
||||
{ id: 'transcript', label: 'Open transcript', icon: 'file' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'hold', label: 'Place legal hold', icon: 'shield' as const },
|
||||
{ id: 'delete', label: 'Delete recording', icon: 'trash' as const, danger: true },
|
||||
]
|
||||
|
||||
const totalSize = computed(() =>
|
||||
meetingRecordings.reduce((s, r) => s + parseInt(r.size), 0),
|
||||
)
|
||||
|
||||
const defaults: Array<{ l: string; v: boolean; d: string }> = [
|
||||
{ l: 'Require lobby', v: true, d: 'Participants wait until host admits them.' },
|
||||
{ l: 'End-to-end encryption', v: true, d: 'Available 1:1 and small group rooms.' },
|
||||
{ l: 'Allow guest links', v: true, d: 'External participants can join via link.' },
|
||||
{ l: 'Recording on by default', v: false, d: 'Override per room when needed.' },
|
||||
{ l: 'Transcription', v: true, d: 'Auto-generate transcripts in Danish + English.' },
|
||||
]
|
||||
|
||||
const recordingPolicy = ref<'off' | 'auto' | 'manual'>('auto')
|
||||
const recordingOptions = [
|
||||
{ v: 'off' as const, label: 'Disable recording org-wide', d: 'Hosts cannot record. Useful for regulated environments.' },
|
||||
{ v: 'auto' as const, label: 'Allow · keep in Drev · 365 d', d: 'Recordings auto-save to /Recordings folder. Auto-delete after 365 days unless on legal hold.' },
|
||||
{ v: 'manual' as const, label: 'Allow · host downloads only', d: 'Recordings are not stored on the platform. Host gets a download link valid for 24h.' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Møder · Jitsi"
|
||||
title="Meeting settings"
|
||||
subtitle="Persistent rooms, recordings, and default meeting policy for your workspace."
|
||||
/>
|
||||
<div class="tab-wrap">
|
||||
<Tabs
|
||||
v-model="tab"
|
||||
:items="[
|
||||
{ value: 'rooms', label: 'Rooms', count: meetingRooms.length },
|
||||
{ value: 'recordings', label: 'Recordings', count: meetingRecordings.length },
|
||||
{ value: 'settings', label: 'Settings' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<template v-if="tab === 'rooms'">
|
||||
<div class="row">
|
||||
<div class="lead">Persistent rooms keep a stable URL — meeting recordings and chat history stay tied to the room.</div>
|
||||
<UiButton variant="primary" @click="newRoomOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
New room
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Room</th><th>Type</th><th>Schedule</th><th>Owner</th><th>Recording</th><th class="right">Members</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in meetingRooms" :key="r.id">
|
||||
<td>
|
||||
<div class="room-cell">
|
||||
<div class="room-icon"><UiIcon name="video" :size="14" /></div>
|
||||
<div>
|
||||
<div class="room-name">
|
||||
<span>{{ r.name }}</span>
|
||||
<UiIcon v-if="r.protected" name="shield" :size="11" stroke="var(--text-mute)" />
|
||||
</div>
|
||||
<Mono dim>meet.dezky.com/{{ r.alias }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Badge :tone="r.type === 'recurring' ? 'info' : 'neutral'">{{ r.type }}</Badge></td>
|
||||
<td class="meta">{{ r.when }}</td>
|
||||
<td>
|
||||
<div class="owner-cell">
|
||||
<Avatar :name="r.owner" :size="20" />
|
||||
<span>{{ r.owner }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><Badge :tone="r.recording === 'auto' ? 'ok' : r.recording === 'off' ? 'neutral' : 'warn'">{{ r.recording }}</Badge></td>
|
||||
<td class="right"><Mono>{{ r.members }}</Mono></td>
|
||||
<td class="right"><AdminKebabMenu :items="roomItems" @select="(id) => roomAction(r.name, r.alias, id)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<template v-else-if="tab === 'recordings'">
|
||||
<div class="rec-toolbar">
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input placeholder="Search by title, host, room…" />
|
||||
</div>
|
||||
<button class="chip"><Eyebrow>Retention:</Eyebrow> <span>All</span> <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<button class="chip"><Eyebrow>Host:</Eyebrow> <span>Anyone</span> <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<div class="spacer" />
|
||||
<Mono dim>{{ meetingRecordings.length }} recordings · {{ totalSize }} MB</Mono>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="tbl">
|
||||
<thead>
|
||||
<tr><th>Recording</th><th>Recorded</th><th>Host</th><th>Views</th><th>Retention</th><th /></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in meetingRecordings" :key="r.id">
|
||||
<td>
|
||||
<div class="rec-cell">
|
||||
<div class="rec-thumb"><UiIcon name="video" :size="13" /></div>
|
||||
<div>
|
||||
<div class="rec-title">{{ r.title }}</div>
|
||||
<Mono dim>{{ r.dur }} · {{ r.size }}</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono dim>{{ r.date }}</Mono></td>
|
||||
<td>
|
||||
<div class="owner-cell">
|
||||
<Avatar :name="r.host" :size="20" />
|
||||
<span>{{ r.host }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono>{{ r.views }}</Mono></td>
|
||||
<td><Badge :tone="r.retention === 'forever' ? 'invert' : r.retention === '365 d' ? 'info' : 'neutral'" dot>{{ r.retention }}{{ r.legal ? ' · hold' : '' }}</Badge></td>
|
||||
<td class="right"><AdminKebabMenu :items="recItems" @select="(id) => recAction(r.title, id)" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="settings">
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Defaults</Eyebrow>
|
||||
<div class="card-title">New room defaults</div>
|
||||
<div class="card-sub">What every new room inherits unless the creator overrides.</div>
|
||||
</div>
|
||||
<div class="defaults">
|
||||
<div v-for="r in defaults" :key="r.l" class="def-row">
|
||||
<button class="toggle" :class="{ on: r.v }"><span /></button>
|
||||
<div class="def-meta">
|
||||
<div class="def-label">{{ r.l }}</div>
|
||||
<div class="def-d">{{ r.d }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Recording policy</Eyebrow>
|
||||
<div class="card-title">Where recordings live</div>
|
||||
</div>
|
||||
<div class="radio-big">
|
||||
<label v-for="o in recordingOptions" :key="o.v" :class="{ active: recordingPolicy === o.v }">
|
||||
<span class="radio-dot"><span v-if="recordingPolicy === o.v" /></span>
|
||||
<input type="radio" :value="o.v" v-model="recordingPolicy" />
|
||||
<div>
|
||||
<div class="radio-label">{{ o.label }}</div>
|
||||
<div class="radio-d">{{ o.d }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Limits</Eyebrow>
|
||||
<div class="card-title">Capacity & quality</div>
|
||||
</div>
|
||||
<div class="limits">
|
||||
<div v-for="[k, v] in [
|
||||
['Max participants per room', '50'],
|
||||
['Default video resolution', '720p · adaptive'],
|
||||
['Recording resolution', '1080p'],
|
||||
]" :key="k">
|
||||
<Eyebrow>{{ k }}</Eyebrow>
|
||||
<div class="limit-v">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<Modal :open="newRoomOpen" eyebrow="Meetings · rooms" title="New room" size="md" @close="newRoomOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Name</Eyebrow><input class="input" placeholder="Engineering standup" /></label>
|
||||
<label class="field"><Eyebrow>Alias</Eyebrow><input class="input" placeholder="eng-standup" /></label>
|
||||
<label class="field"><Eyebrow>Owner</Eyebrow><input class="input" value="Anne Baslund" /></label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="newRoomOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="newRoomOpen = false">Create room</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 20px 40px 64px 40px; }
|
||||
|
||||
.row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.lead { font-size: 13px; color: var(--text-mute); max-width: 540px; line-height: 1.5; }
|
||||
|
||||
.tbl { width: 100%; border-collapse: collapse; }
|
||||
.tbl th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
|
||||
.tbl tr:last-child td { border-bottom: none; }
|
||||
.tbl .right { text-align: right; }
|
||||
.meta { font-size: 12px; }
|
||||
|
||||
.room-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.room-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.room-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
|
||||
.owner-cell { display: flex; align-items: center; gap: 8px; font-size: 12px; }
|
||||
|
||||
.rec-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.input-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
width: 320px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
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; }
|
||||
|
||||
.rec-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.rec-thumb {
|
||||
width: 64px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rec-title { font-size: 13px; font-weight: 500; }
|
||||
|
||||
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
|
||||
.card-head { margin-bottom: 14px; }
|
||||
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.defaults { display: flex; flex-direction: column; gap: 14px; }
|
||||
.def-row { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
|
||||
.def-row:last-child { padding-bottom: 0; border-bottom: none; }
|
||||
.def-meta { flex: 1; }
|
||||
.def-label { font-size: 13px; font-weight: 500; }
|
||||
.def-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.toggle {
|
||||
width: 32px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
border: none;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle span {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg);
|
||||
transition: left 120ms;
|
||||
}
|
||||
.toggle.on { background: var(--text); }
|
||||
.toggle.on span { left: 16px; background: var(--accent); }
|
||||
|
||||
.radio-big { display: flex; flex-direction: column; gap: 8px; }
|
||||
.radio-big label { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
|
||||
.radio-big label.active { border-color: var(--text); background: var(--bg); }
|
||||
.radio-big input { display: none; }
|
||||
.radio-dot { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
|
||||
.radio-big label.active .radio-dot { border-color: var(--text); }
|
||||
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
|
||||
.radio-label { font-size: 14px; font-weight: 500; }
|
||||
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.limit-v { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-top: 6px; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.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; }
|
||||
</style>
|
||||
@@ -0,0 +1,400 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-screens.jsx `SecurityScreen` (lines 2187-2310)
|
||||
// and RadioBig (line 2311). Two tabs: Security · Audit log. Same cards, same
|
||||
// copy, same SSO apps, same audit-log column structure with sample rows.
|
||||
|
||||
|
||||
import { sampleAudit } from '~/data/workspace'
|
||||
|
||||
const tab = ref<'security' | 'audit'>('security')
|
||||
const mfa = ref<'all' | 'admins' | 'optional'>('admins')
|
||||
|
||||
const toast = useToast()
|
||||
const addCountryOpen = ref(false)
|
||||
const newAllowCountry = ref('')
|
||||
|
||||
function ssoAction(name: string, id: string) {
|
||||
if (id === 'configure') toast.info(`Configure ${name}`)
|
||||
else if (id === 'test') toast.info(`Sending test sign-in to ${name}`)
|
||||
else if (id === 'rotate') toast.info(`Rotating certificate for ${name}`)
|
||||
else if (id === 'disconnect') toast.warn(`${name} disconnected`)
|
||||
}
|
||||
const ssoItems = [
|
||||
{ id: 'configure', label: 'Configure', icon: 'brush' as const },
|
||||
{ id: 'test', label: 'Send test sign-in', icon: 'key' as const },
|
||||
{ id: 'rotate', label: 'Rotate certificate', icon: 'refresh' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ id: 'disconnect', label: 'Disconnect', icon: 'plug' as const, danger: true },
|
||||
]
|
||||
|
||||
function removeCountry(c: string) {
|
||||
toast.info(`${c} removed from allow-list`)
|
||||
}
|
||||
|
||||
const ssoApps = [
|
||||
{ n: 'Notion', p: 'SAML', s: 'ok' as const },
|
||||
{ n: 'Figma', p: 'SAML', s: 'ok' as const },
|
||||
{ n: 'Linear', p: 'OIDC', s: 'ok' as const },
|
||||
{ n: 'GitHub', p: 'OIDC', s: 'warn' as const },
|
||||
]
|
||||
|
||||
const mfaOptions = [
|
||||
{ v: 'all' as const, label: 'Required for everyone', d: 'All members must enroll TOTP or WebAuthn at next sign-in.' },
|
||||
{ v: 'admins' as const, label: 'Required for admins only', d: 'Members may opt in. Admins are forced to enroll.' },
|
||||
{ v: 'optional' as const, label: 'Optional', d: 'No enforcement. Not recommended for compliance work.' },
|
||||
]
|
||||
|
||||
const countries = ['Denmark', 'Sweden', 'Norway', 'Germany', 'Netherlands']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Compliance"
|
||||
title="Security & audit"
|
||||
subtitle="Policies, identity controls, and a tamper-evident log of every administrative action."
|
||||
/>
|
||||
|
||||
<div class="tab-wrap">
|
||||
<Tabs
|
||||
v-model="tab"
|
||||
:items="[
|
||||
{ value: 'security', label: 'Security' },
|
||||
{ value: 'audit', label: 'Audit log', count: 4218 },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="tab === 'security'" class="content security">
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Identity</Eyebrow>
|
||||
<div class="card-title">Multi-factor authentication</div>
|
||||
</div>
|
||||
<div class="radio-big">
|
||||
<label v-for="o in mfaOptions" :key="o.v" :class="{ active: mfa === o.v }">
|
||||
<span class="radio-dot"><span v-if="mfa === o.v" /></span>
|
||||
<input type="radio" :value="o.v" v-model="mfa" />
|
||||
<div>
|
||||
<div class="radio-label">{{ o.label }}</div>
|
||||
<div class="radio-d">{{ o.d }}</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Sessions</Eyebrow>
|
||||
<div class="card-title">Session policy</div>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<label class="field"><Eyebrow>Idle timeout</Eyebrow>
|
||||
<div class="input-faux">
|
||||
<input value="30 minutes" />
|
||||
<UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>Absolute timeout</Eyebrow>
|
||||
<div class="input-faux">
|
||||
<input value="24 hours" />
|
||||
<UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Network</Eyebrow>
|
||||
<div class="card-title">Geo-fencing & allow-lists</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<Eyebrow>Allowed countries</Eyebrow>
|
||||
<div class="chip-row">
|
||||
<Badge v-for="c in countries" :key="c" tone="neutral">
|
||||
{{ c }}
|
||||
<button class="badge-x" @click="removeCountry(c)" aria-label="Remove country">
|
||||
<UiIcon name="x" :size="10" />
|
||||
</button>
|
||||
</Badge>
|
||||
<UiButton size="sm" variant="ghost" @click="addCountryOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="12" /></template>
|
||||
Add country
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>SSO</Eyebrow>
|
||||
<div class="card-title">dezky as identity provider</div>
|
||||
</div>
|
||||
<div class="sso-intro">
|
||||
Connect external applications via OIDC or SAML. dezky's Authentik instance is the source of truth for identity.
|
||||
</div>
|
||||
<div class="sso-list">
|
||||
<div v-for="a in ssoApps" :key="a.n" class="sso-row">
|
||||
<div class="sso-icon">{{ a.n[0] }}</div>
|
||||
<div class="sso-meta">
|
||||
<div class="sso-name">{{ a.n }}</div>
|
||||
<Mono dim>{{ a.p }} · provisioned</Mono>
|
||||
</div>
|
||||
<Badge :tone="a.s" dot>{{ a.s === 'ok' ? 'connected' : 'cert expiring' }}</Badge>
|
||||
<AdminKebabMenu :items="ssoItems" @select="(id) => ssoAction(a.n, id)" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div v-else class="content audit">
|
||||
<div class="toolbar">
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<input placeholder="action.type, actor, target…" />
|
||||
</div>
|
||||
<button class="chip"><Eyebrow>Actor:</Eyebrow> <span>All</span> <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<button class="chip"><Eyebrow>Action:</Eyebrow> <span>All</span> <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<button class="chip"><Eyebrow>Last:</Eyebrow> <span>7 days</span> <UiIcon name="chevDown" :size="12" stroke="var(--text-mute)" /></button>
|
||||
<div class="spacer" />
|
||||
<UiButton variant="secondary" @click="toast.info('Exporting audit log…', 'CSV · last 7 days · ~4,218 events')">
|
||||
<template #leading><UiIcon name="download" :size="14" /></template>
|
||||
Export CSV
|
||||
</UiButton>
|
||||
</div>
|
||||
<Card :pad="0">
|
||||
<table class="audit-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Actor</th>
|
||||
<th>Action</th>
|
||||
<th>Target</th>
|
||||
<th>IP</th>
|
||||
<th class="right" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="a in sampleAudit" :key="a.id">
|
||||
<td><Mono>{{ a.when }}</Mono></td>
|
||||
<td>
|
||||
<div class="actor-cell">
|
||||
<Avatar v-if="a.actor !== 'system'" :name="a.actor" :size="22" />
|
||||
<div v-else class="sys">sys</div>
|
||||
<span>{{ a.actor }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><Mono>{{ a.action }}</Mono></td>
|
||||
<td class="target">{{ a.target }}</td>
|
||||
<td><Mono dim>{{ a.ip }}</Mono></td>
|
||||
<td class="right"><Badge :tone="a.tone" dot>{{ a.tone }}</Badge></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Card>
|
||||
<div class="retention">
|
||||
<Mono dim>// retention · 365 days · tamper-evident · last verified 14:32:01 today</Mono>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add country modal -->
|
||||
<Modal :open="addCountryOpen" eyebrow="Security · geo-fencing" title="Add country to allow-list" size="sm" @close="addCountryOpen = false">
|
||||
<div class="form-stack">
|
||||
<label class="field"><Eyebrow>Country</Eyebrow>
|
||||
<CountrySelect v-model="newAllowCountry" placeholder="Search countries" />
|
||||
</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="addCountryOpen = false">Cancel</UiButton>
|
||||
<UiButton
|
||||
variant="primary"
|
||||
:disabled="!newAllowCountry"
|
||||
@click="addCountryOpen = false; toast.ok(`Country ${newAllowCountry} added`); newAllowCountry = ''"
|
||||
>
|
||||
Add
|
||||
</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 24px 40px 64px 40px; }
|
||||
.content.security { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
|
||||
|
||||
.card-head { margin-bottom: 16px; }
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* RadioBig */
|
||||
.radio-big { display: flex; flex-direction: column; gap: 8px; }
|
||||
.radio-big label {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-big label.active { border-color: var(--text); background: var(--bg); }
|
||||
.radio-big input { display: none; }
|
||||
.radio-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid var(--border-hi, var(--border));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.radio-big label.active .radio-dot { border-color: var(--text); }
|
||||
.radio-dot span { width: 8px; height: 8px; border-radius: 999px; background: var(--text); }
|
||||
.radio-label { font-size: 14px; font-weight: 500; }
|
||||
.radio-d { font-size: 12px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.input-faux {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-faux input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
|
||||
|
||||
.sso-intro { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
|
||||
.sso-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.sso-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.sso-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sso-meta { flex: 1; }
|
||||
.sso-name { font-size: 13px; font-weight: 500; }
|
||||
|
||||
/* Audit toolbar + table */
|
||||
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
|
||||
.input-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
width: 360px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
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; }
|
||||
|
||||
.audit-table { width: 100%; border-collapse: collapse; }
|
||||
.audit-table thead th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.audit-table tbody td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.audit-table tbody tr:last-child td { border-bottom: none; }
|
||||
.audit-table .right { text-align: right; }
|
||||
.target { color: var(--text-dim); }
|
||||
.actor-cell { display: flex; align-items: center; gap: 8px; }
|
||||
.sys {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 5px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.retention { margin-top: 12px; font-size: 12px; color: var(--text-mute); }
|
||||
|
||||
.badge-x {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin-left: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
.badge-x:hover { color: var(--bad); }
|
||||
|
||||
/* Add country 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); }
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
// Strict port of project/platform-app.jsx `StorageScreen` (lines 970-1020).
|
||||
// Two-card 1.4fr/1fr layout: aggregate + top users on the left, type breakdown
|
||||
// on the right. No tabs in the source — just two cards.
|
||||
|
||||
|
||||
import { sampleUsersFlat } from '~/data/workspace'
|
||||
|
||||
const topUsers = computed(() =>
|
||||
[...sampleUsersFlat].slice(0, 5).sort((a, b) => b.storage - a.storage),
|
||||
)
|
||||
|
||||
const typeBreakdown: Array<[string, number, string]> = [
|
||||
['Documents', 42, 'var(--text)'],
|
||||
['Images', 24, 'var(--info)'],
|
||||
['Video', 18, 'var(--warn)'],
|
||||
['Archives', 9, 'var(--ok)'],
|
||||
['Other', 7, 'var(--text-mute)'],
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Drev"
|
||||
title="Storage"
|
||||
subtitle="Aggregate file storage across your workspace, by user and type."
|
||||
/>
|
||||
<div class="content">
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>Aggregate</Eyebrow>
|
||||
<div class="card-title">1.4 TB used</div>
|
||||
<div class="card-sub">64% of 2.2 TB allocated · Business plan</div>
|
||||
</div>
|
||||
<div class="progress" style="height: 10px;">
|
||||
<span style="width: 64%" />
|
||||
</div>
|
||||
<div class="progress-legend">
|
||||
<span>1.4 TB used</span>
|
||||
<span>820 GB free</span>
|
||||
</div>
|
||||
|
||||
<div class="top-block">
|
||||
<Eyebrow>Top users</Eyebrow>
|
||||
<div class="top-list">
|
||||
<div v-for="u in topUsers" :key="u.id" class="top-row">
|
||||
<div class="user-cell">
|
||||
<Avatar :name="u.name" :size="22" />
|
||||
<span>{{ u.name }}</span>
|
||||
</div>
|
||||
<div class="progress thin"><span :style="{ width: Math.min(100, (u.storage / 50) * 100) + '%' }" /></div>
|
||||
<Mono>{{ u.storage }} GB</Mono>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="card-head">
|
||||
<Eyebrow>By type</Eyebrow>
|
||||
<div class="card-title">What's taking space</div>
|
||||
</div>
|
||||
<div class="types">
|
||||
<div v-for="[n, p, c] in typeBreakdown" :key="n">
|
||||
<div class="type-head">
|
||||
<span>{{ n }}</span>
|
||||
<span class="pct">{{ p }}%</span>
|
||||
</div>
|
||||
<div class="progress thinner"><span :style="{ width: p + '%', background: c }" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.content { padding: 24px 40px 64px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; max-width: 1200px; }
|
||||
|
||||
.card-head { margin-bottom: 16px; }
|
||||
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; }
|
||||
.card-sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
|
||||
|
||||
.progress { background: var(--bg); border-radius: 999px; overflow: hidden; }
|
||||
.progress.thin { height: 6px; }
|
||||
.progress.thinner { height: 5px; }
|
||||
.progress span { display: block; height: 100%; background: var(--text); }
|
||||
|
||||
.progress-legend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-mute);
|
||||
}
|
||||
|
||||
.top-block { margin-top: 32px; }
|
||||
.top-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
|
||||
.top-row { display: grid; grid-template-columns: 180px 1fr 60px; gap: 12px; align-items: center; }
|
||||
.user-cell { display: flex; align-items: center; gap: 8px; font-size: 12px; }
|
||||
.top-row > .mono, .top-row :deep(.mono) { font-family: var(--font-mono); font-size: 11px; text-align: right; }
|
||||
|
||||
.types { display: flex; flex-direction: column; gap: 12px; }
|
||||
.type-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
|
||||
.pct { font-family: var(--font-mono); color: var(--text-mute); }
|
||||
</style>
|
||||
@@ -0,0 +1,856 @@
|
||||
<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).
|
||||
//
|
||||
// User detail panel tabs follow the source order: Profile · Access · Mail ·
|
||||
// Files · Activity · Audit (no Danger zone in the source).
|
||||
|
||||
|
||||
import { sampleUsersFlat, groupsFull, sampleAudit } from '~/data/workspace'
|
||||
|
||||
type User = (typeof sampleUsersFlat)[number]
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const tab = ref<'users' | 'groups' | 'invitations' | 'service'>('users')
|
||||
const query = ref('')
|
||||
const statusFilter = ref<'all' | 'active' | 'invited' | '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 inviteOpen = ref(false)
|
||||
const inviteStep = ref(1)
|
||||
const importOpen = ref(false)
|
||||
|
||||
const filteredUsers = computed(() =>
|
||||
sampleUsersFlat.filter((u) => {
|
||||
if (statusFilter.value !== 'all' && u.status !== 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'
|
||||
|
||||
function toggleSelect(id: string) {
|
||||
const s = new Set(selected.value)
|
||||
if (s.has(id)) s.delete(id)
|
||||
else s.add(id)
|
||||
selected.value = s
|
||||
}
|
||||
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() {
|
||||
inviteOpen.value = false
|
||||
inviteStep.value = 1
|
||||
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
|
||||
toast.ok(`${n} user${n === 1 ? '' : 's'} set to ${roleChoice.value}`)
|
||||
}
|
||||
|
||||
function applyBulkSuspend() {
|
||||
const n = selected.value.size
|
||||
suspendOpen.value = false
|
||||
toast.warn(`${n} user${n === 1 ? '' : 's'} suspended`, 'Sign-in blocked · data preserved')
|
||||
selected.value = new Set()
|
||||
}
|
||||
|
||||
function bulkExport() {
|
||||
const n = selected.value.size
|
||||
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) {
|
||||
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}`)
|
||||
else if (id === 'suspend') toast.warn(`${u.name} suspended`)
|
||||
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 },
|
||||
{ id: 'force', label: 'Force logout', icon: 'logout' as const },
|
||||
{ id: 'sep1', separator: true },
|
||||
{ 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>
|
||||
<div>
|
||||
<PageHeader
|
||||
eyebrow="Identity"
|
||||
title="Users & groups"
|
||||
subtitle="Manage workspace members, their access, and group assignments."
|
||||
>
|
||||
<template #actions>
|
||||
<UiButton variant="secondary" @click="importOpen = true">
|
||||
<template #leading><UiIcon name="upload" :size="14" /></template>
|
||||
Import CSV
|
||||
</UiButton>
|
||||
<UiButton variant="secondary">
|
||||
<template #leading><UiIcon name="download" :size="14" /></template>
|
||||
Export
|
||||
</UiButton>
|
||||
<UiButton variant="primary" @click="inviteOpen = true">
|
||||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||||
Invite user
|
||||
</UiButton>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="tab-wrap">
|
||||
<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 },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- USERS TAB -->
|
||||
<div v-if="tab === 'users'" class="content">
|
||||
<div class="toolbar">
|
||||
<div class="input-search">
|
||||
<UiIcon name="search" :size="14" stroke="var(--text-mute)" />
|
||||
<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>
|
||||
</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>
|
||||
<UiButton size="sm" variant="ghost" class="invert" @click="clearSelection">Clear</UiButton>
|
||||
</div>
|
||||
|
||||
<Card :pad="0">
|
||||
<table class="users-tbl">
|
||||
<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()" />
|
||||
</th>
|
||||
<th>Name</th><th>Role</th><th>Status</th><th>Group</th><th>Last seen</th><th class="right">Storage</th><th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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)" />
|
||||
</td>
|
||||
<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><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 class="right" @click.stop>
|
||||
<AdminKebabMenu :items="userRowItems" :icon-size="16" @select="(id) => rowAction(u, id)" />
|
||||
</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) -->
|
||||
<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>
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
<!-- SERVICE ACCOUNTS TAB -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- User detail side panel -->
|
||||
<SidePanel :open="!!openUser" :eyebrow="openUser?.id || ''" :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" />
|
||||
<div class="ud-meta">
|
||||
<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>
|
||||
</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>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="danger">
|
||||
<template #leading><UiIcon name="trash" :size="13" /></template>
|
||||
Delete group
|
||||
</UiButton>
|
||||
<div style="flex: 1" />
|
||||
<UiButton variant="primary" @click="openGroup = null">Save changes</UiButton>
|
||||
</template>
|
||||
</SidePanel>
|
||||
|
||||
<!-- Invite user modal (3 steps) -->
|
||||
<Modal :open="inviteOpen" :title="'Invite user'" :eyebrow="`Step ${inviteStep} of 3`" size="md" @close="inviteOpen = false; inviteStep = 1">
|
||||
<div v-if="inviteStep === 1" class="form-stack">
|
||||
<label class="field"><Eyebrow>Full name</Eyebrow><input class="input" value="Magnus Eriksen" /></label>
|
||||
<label class="field"><Eyebrow>Email</Eyebrow><input class="input" value="magnus@dezky.com" /></label>
|
||||
<label class="field"><Eyebrow>Role</Eyebrow>
|
||||
<div class="radio-row">
|
||||
<button class="active">Member</button><button>Admin</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field"><Eyebrow>License tier</Eyebrow>
|
||||
<div class="radio-row">
|
||||
<button>Basic</button><button class="active">Business</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else-if="inviteStep === 2" class="form-stack">
|
||||
<div>
|
||||
<Eyebrow>Group memberships</Eyebrow>
|
||||
<div class="check-stack">
|
||||
<label v-for="(g, i) in ['Engineering', 'Design', 'Operations', 'Finance', 'Sales']" :key="g">
|
||||
<input type="checkbox" :checked="i === 0" /> {{ g }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Eyebrow>Apps</Eyebrow>
|
||||
<div class="check-stack">
|
||||
<label v-for="a in ['Mail', 'Drev', 'Møder', 'Chat']" :key="a">
|
||||
<input type="checkbox" checked /> {{ a }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="review-box">
|
||||
<dl class="def">
|
||||
<div><dt>Name</dt><dd>Magnus Eriksen</dd></div>
|
||||
<div><dt>Email</dt><dd>magnus@dezky.com</dd></div>
|
||||
<div><dt>Role</dt><dd>Member · Business</dd></div>
|
||||
<div><dt>Groups</dt><dd>Engineering</dd></div>
|
||||
<div><dt>Apps</dt><dd>Mail · Drev · Møder · Chat</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="muted">
|
||||
We'll provision the account across Authentik, Stalwart, OCIS, Jitsi and Zulip, then email Magnus an activation link valid for 7 days.
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="inviteOpen = false; inviteStep = 1">Cancel</UiButton>
|
||||
<UiButton v-if="inviteStep > 1" variant="secondary" @click="inviteStep--">Back</UiButton>
|
||||
<UiButton v-if="inviteStep < 3" variant="primary" @click="inviteStep++">Continue</UiButton>
|
||||
<UiButton v-else variant="primary" @click="sendInvite">Send invitation</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Bulk import modal -->
|
||||
<Modal :open="importOpen" eyebrow="Users · bulk import" title="Import users from CSV" size="md" @close="importOpen = false">
|
||||
<div class="import">
|
||||
<div class="upload-stage">
|
||||
<UiIcon name="upload" :size="28" stroke="var(--text-mute)" />
|
||||
<div class="upload-text">
|
||||
<div>Drop a CSV here, or click to browse</div>
|
||||
<Mono dim>columns: name, email, role, group, license</Mono>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<Mono dim>// example</Mono>
|
||||
<pre class="csv-sample">name,email,role,group,license
|
||||
Anne Hansen,anne@baslund.dk,owner,Leadership,business
|
||||
Mikkel Sørensen,mikkel@baslund.dk,admin,Engineering,business</pre>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="importOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="importOpen = false; toast.ok('22 users imported · 2 skipped')">
|
||||
<template #leading><UiIcon name="check" :size="13" /></template>
|
||||
Import users
|
||||
</UiButton>
|
||||
</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">
|
||||
<Eyebrow>New role</Eyebrow>
|
||||
<label v-for="r in ['member', 'admin', 'owner'] as const" :key="r" class="role-row" :class="{ active: roleChoice === r }">
|
||||
<input type="radio" :value="r" v-model="roleChoice" />
|
||||
<div>
|
||||
<div class="role-name">{{ r[0].toUpperCase() + r.slice(1) }}</div>
|
||||
<Mono dim>
|
||||
{{ r === 'member' ? 'Standard access to apps' :
|
||||
r === 'admin' ? 'Manage users, billing, and settings' :
|
||||
'Full control — including billing and ownership' }}
|
||||
</Mono>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<template #footer>
|
||||
<UiButton variant="ghost" @click="changeRoleOpen = false">Cancel</UiButton>
|
||||
<UiButton variant="primary" @click="applyBulkRole">Update role</UiButton>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- Bulk · suspend -->
|
||||
<ConfirmDialog
|
||||
:open="suspendOpen"
|
||||
:eyebrow="`${selected.size} selected`"
|
||||
:title="`Suspend ${selected.size} user${selected.size === 1 ? '' : 's'}?`"
|
||||
confirm-label="Suspend"
|
||||
tone="danger"
|
||||
@close="suspendOpen = false"
|
||||
@confirm="applyBulkSuspend"
|
||||
>
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.tab-wrap { padding: 16px 40px 0 40px; }
|
||||
.content { padding: 16px 40px 64px 40px; }
|
||||
|
||||
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.input-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
width: 320px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 12px;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.bulk .invert :deep(button) { color: var(--bg) !important; }
|
||||
.bulk :deep([data-variant='ghost']) { color: var(--bg); }
|
||||
.bulk :deep([data-variant='ghost']:hover) { background: rgba(255, 255, 255, 0.06); }
|
||||
|
||||
.users-tbl { width: 100%; border-collapse: collapse; }
|
||||
.users-tbl th {
|
||||
text-align: left;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-mute);
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
.users-tbl td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.users-tbl tr { cursor: pointer; }
|
||||
.users-tbl tr:hover { background: var(--surface); }
|
||||
.users-tbl tr:last-child td { border-bottom: none; }
|
||||
.users-tbl .right { text-align: right; }
|
||||
.users-tbl .check { width: 36px; }
|
||||
|
||||
.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;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.empty-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
|
||||
.empty-body { font-size: 13px; color: var(--text-mute); max-width: 420px; line-height: 1.5; }
|
||||
|
||||
/* User detail */
|
||||
.user-detail { padding-bottom: 24px; margin: -22px -24px; }
|
||||
.ud-head { padding: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; }
|
||||
.ud-meta { flex: 1; }
|
||||
.ud-name { font-size: 17px; font-weight: 600; font-family: var(--font-display); }
|
||||
.ud-badges { display: flex; gap: 6px; margin-top: 8px; }
|
||||
.ud-body { padding: 24px; }
|
||||
.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); }
|
||||
|
||||
.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; }
|
||||
.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); }
|
||||
.radio-row { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; padding: 2px; width: fit-content; }
|
||||
.radio-row button { padding: 6px 14px; border: none; border-radius: 4px; background: transparent; color: var(--text); font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; }
|
||||
.radio-row button.active { background: var(--text); color: var(--bg); }
|
||||
.check-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; }
|
||||
.check-stack label { display: flex; align-items: center; gap: 8px; }
|
||||
.review-box { padding: 16px; background: var(--bg); border-radius: 6px; margin-bottom: 16px; }
|
||||
.muted { font-size: 12px; color: var(--text-mute); line-height: 1.55; }
|
||||
|
||||
.import { display: flex; flex-direction: column; gap: 14px; }
|
||||
.upload-stage {
|
||||
padding: 32px 24px;
|
||||
background: var(--bg);
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload-text { text-align: center; font-size: 13px; }
|
||||
.info-box {
|
||||
padding: 12px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.csv-sample {
|
||||
margin: 8px 0 0 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Bulk · role picker */
|
||||
.role-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.role-row.active { border-color: var(--text); background: var(--bg); }
|
||||
.role-name { font-size: 13px; font-weight: 500; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user