Ronni Baslund
0bd4e5498e
- 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
765 lines
27 KiB
Vue
765 lines
27 KiB
Vue
<script setup lang="ts">
|
||
// Partner reports. Strict port of PartnerReportsScreen
|
||
// (platform-partner-depth.jsx lines 22-318 + 559-852). Four tabs:
|
||
// • Customer health · Stats + per-customer health table (Escalate / Check in)
|
||
// • Revenue · Stats + MRR sparkline + By plan + Top customers
|
||
// • Churn · Stats + cohort retention heatmap + exit reasons
|
||
// • Custom reports · Saved reports table + create modal
|
||
|
||
|
||
|
||
import { customers, partnerMrrSparkline } from '~/data/customers'
|
||
import type { CustomerOrg } from '~/data/customers'
|
||
import type { TaskContext } from '~/components/partner/CustomerTaskPanel.vue'
|
||
|
||
const toast = useToast()
|
||
|
||
const tab = ref<'health' | 'revenue' | 'churn' | 'custom'>('health')
|
||
const period = ref<'30d' | '90d' | '12mo' | 'ytd'>('90d')
|
||
|
||
const tabs = [
|
||
{ value: 'health', label: 'Customer health' },
|
||
{ value: 'revenue', label: 'Revenue' },
|
||
{ value: 'churn', label: 'Churn' },
|
||
{ value: 'custom', label: 'Custom reports', count: 3 },
|
||
]
|
||
|
||
const periodOpts = [
|
||
{ value: '30d', label: '30 days' },
|
||
{ value: '90d', label: '90 days' },
|
||
{ value: '12mo', label: '12 months' },
|
||
{ value: 'ytd', label: 'Year-to-date' },
|
||
] as const
|
||
|
||
const exportOpen = ref(false)
|
||
const newReportOpen = ref(false)
|
||
|
||
// HEALTH ─────────────────────────────────────────────────────────────────────
|
||
// Health scoring exactly mirrors platform-partner-depth.jsx:73-80.
|
||
const scored = computed(() => customers.map((c) => {
|
||
let score = 100
|
||
if (c.status === 'past_due') score -= 50
|
||
else if (c.status === 'attention') score -= 30
|
||
else if (c.status === 'trial') score -= 10
|
||
if (c.seats.used / c.seats.total > 0.85) score -= 10
|
||
return { ...c, score }
|
||
}))
|
||
|
||
const cohort = computed(() => ({
|
||
healthy: scored.value.filter((c) => c.score >= 75).length,
|
||
watch: scored.value.filter((c) => c.score >= 50 && c.score < 75).length,
|
||
risk: scored.value.filter((c) => c.score < 50).length,
|
||
}))
|
||
|
||
function healthColor(h: number) {
|
||
if (h >= 75) return 'var(--ok)'
|
||
if (h >= 50) return 'var(--warn)'
|
||
return 'var(--bad)'
|
||
}
|
||
|
||
const taskCtx = ref<TaskContext | null>(null)
|
||
function openTask(c: CustomerOrg & { score: number }, mode: 'escalate' | 'checkin') {
|
||
taskCtx.value = { customer: c, score: c.score, mode }
|
||
}
|
||
|
||
// Deterministic mini trend sparkline (30 points) for the per-customer row.
|
||
function miniTrend(seed: number) {
|
||
return Array.from({ length: 30 }, (_, i) => 60 + Math.sin((i + seed) / 4) * 12 + ((i * seed) % 5))
|
||
}
|
||
|
||
// REVENUE ────────────────────────────────────────────────────────────────────
|
||
const totalMrr = computed(() => customers.reduce((s, c) => s + c.mrrDkk, 0))
|
||
|
||
// Top 5 by MRR
|
||
const topByMrr = computed(() => [...customers].sort((a, b) => b.mrrDkk - a.mrrDkk).slice(0, 5))
|
||
|
||
// By-plan revenue mix · platform-partner-depth.jsx:176-180
|
||
const revenueMix = [
|
||
{ n: 'Enterprise', v: 42900, p: 77, c: 'var(--text)' },
|
||
{ n: 'Business', v: 11340, p: 20, c: 'var(--info)' },
|
||
{ n: 'Starter', v: 1510, p: 3, c: 'var(--text-mute)' },
|
||
]
|
||
|
||
// CHURN cohort heatmap · platform-partner-depth.jsx:237-243
|
||
const cohorts: Array<[string, number, Array<number | '—'>]> = [
|
||
['Nov 2024', 1, [100, 100, 100, 100, 100, 100]],
|
||
['Aug 2025', 1, [100, 100, 100, 100, 100, '—']],
|
||
['Sep 2025', 1, [100, 100, 100, 100, 100, '—']],
|
||
['Feb 2026', 3, [100, 100, 100, '—', '—', '—']],
|
||
['Mar 2026', 2, [100, 100, '—', '—', '—', '—']],
|
||
['May 2026', 1, [100, '—', '—', '—', '—', '—']],
|
||
]
|
||
const cohortHeaders = ['M+0', 'M+1', 'M+2', 'M+3', 'M+6', 'M+12']
|
||
|
||
// CUSTOM REPORTS · platform-partner-depth.jsx:280-283
|
||
const savedReports = ref([
|
||
{ id: 'r1', name: 'Quarterly board · Q1 2026', owner: 'Anne Baslund', schedule: 'Quarterly · 1st', last: '03 Apr 2026', recipients: 4, format: 'PDF' },
|
||
{ id: 'r2', name: 'Customer Health · weekly digest', owner: 'Anne Baslund', schedule: 'Mondays 09:00 CET', last: '13 May 2026', recipients: 2, format: 'PDF' },
|
||
{ id: 'r3', name: 'Margin breakdown by partner cut', owner: 'Mikkel Nørgaard', schedule: 'On-demand', last: '08 May 2026', recipients: 1, format: 'CSV' },
|
||
])
|
||
|
||
const running = ref<string | null>(null)
|
||
const reportMenuFor = ref<string | null>(null)
|
||
const reportMenuPos = ref<{ top: number; right: number }>({ top: 0, right: 0 })
|
||
const confirmDeleteId = ref<string | null>(null)
|
||
|
||
function runReport(id: string) {
|
||
running.value = id
|
||
const r = savedReports.value.find((x) => x.id === id)
|
||
setTimeout(() => { running.value = null }, 1800)
|
||
if (r) toast.info(`Running ${r.name}`, 'You will be emailed when ready')
|
||
}
|
||
|
||
function openReportMenu(rId: string, e: MouseEvent) {
|
||
e.stopPropagation()
|
||
const btn = (e.currentTarget as HTMLElement).getBoundingClientRect()
|
||
reportMenuPos.value = { top: btn.bottom + 4, right: window.innerWidth - btn.right }
|
||
reportMenuFor.value = reportMenuFor.value === rId ? null : rId
|
||
}
|
||
|
||
function reportActions(r: typeof savedReports.value[number]) {
|
||
return [
|
||
{ i: 'external', l: 'Run again', fn: () => runReport(r.id) },
|
||
{ i: 'download', l: `Download last (${r.format})`, fn: () => toast.ok('Downloading', `${r.name}.${r.format.toLowerCase()}`) },
|
||
{ i: 'mail', l: 'Send to recipients now', fn: () => toast.info('Sending', `${r.recipients} recipients`) },
|
||
{ i: 'copy', l: 'Copy shareable link', fn: () => toast.ok('Link copied') },
|
||
{ sep: true },
|
||
{ i: 'brush', l: 'Edit report…', fn: () => toast.info('Editing', r.name) },
|
||
{ i: 'copy', l: 'Duplicate', fn: () => toast.ok('Duplicated', r.name) },
|
||
{ i: 'calendar', l: r.schedule === 'On-demand' ? 'Add schedule…' : 'Pause schedule', fn: () => toast.info('Schedule', r.schedule) },
|
||
{ sep: true },
|
||
{ i: 'trash', l: 'Delete report', danger: true, fn: () => { confirmDeleteId.value = r.id } },
|
||
] as Array<{ i?: string; l?: string; danger?: boolean; sep?: boolean; fn?: () => void }>
|
||
}
|
||
|
||
const confirmDeleteReport = computed(() => savedReports.value.find((r) => r.id === confirmDeleteId.value))
|
||
|
||
function deleteReport() {
|
||
const r = savedReports.value.find((x) => x.id === confirmDeleteId.value)
|
||
if (r) {
|
||
savedReports.value = savedReports.value.filter((x) => x.id !== confirmDeleteId.value)
|
||
toast.bad('Report deleted', r.name)
|
||
}
|
||
confirmDeleteId.value = null
|
||
}
|
||
|
||
function closeMenu() { reportMenuFor.value = null }
|
||
|
||
onMounted(() => {
|
||
const onScroll = () => closeMenu()
|
||
document.addEventListener('click', closeMenu)
|
||
window.addEventListener('scroll', onScroll, true)
|
||
window.addEventListener('resize', onScroll)
|
||
onBeforeUnmount(() => {
|
||
document.removeEventListener('click', closeMenu)
|
||
window.removeEventListener('scroll', onScroll, true)
|
||
window.removeEventListener('resize', onScroll)
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<PageHeader
|
||
eyebrow="Analytics"
|
||
title="Partner reports"
|
||
subtitle="Health, revenue, churn, and custom rollups across your customer portfolio."
|
||
>
|
||
<template #actions>
|
||
<UiButton variant="secondary" @click="exportOpen = true">
|
||
<template #leading><UiIcon name="download" :size="14" /></template>
|
||
Export PDF
|
||
</UiButton>
|
||
<UiButton variant="primary" @click="newReportOpen = true">
|
||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||
New report
|
||
</UiButton>
|
||
</template>
|
||
</PageHeader>
|
||
|
||
<div class="tabs-bar">
|
||
<Tabs v-model="tab" :items="tabs" class="tabs-stretch" />
|
||
<div class="period-chip">
|
||
<span class="seg-label">Period</span>
|
||
<select v-model="period">
|
||
<option v-for="o in periodOpts" :key="o.value" :value="o.value">{{ o.label }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HEALTH -->
|
||
<div v-if="tab === 'health'" class="content">
|
||
<div class="stat-strip">
|
||
<Card>
|
||
<Stat label="Healthy" :value="cohort.healthy" :delta="`${Math.round(cohort.healthy / scored.length * 100)}% of portfolio`" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="Watch" :value="cohort.watch" delta="2 customers · check in" delta-tone="up" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="At risk" :value="cohort.risk" delta="1 customer · escalate" delta-tone="down" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="NPS · est" value="58" delta="+6 from last period" delta-tone="up" hint="based on 12 responses" />
|
||
</Card>
|
||
</div>
|
||
|
||
<Card :pad="0">
|
||
<div class="card-head">
|
||
<div>
|
||
<Eyebrow>Per customer</Eyebrow>
|
||
<div class="card-title">Health scores</div>
|
||
</div>
|
||
</div>
|
||
<table class="dtable">
|
||
<thead>
|
||
<tr>
|
||
<th>Customer</th>
|
||
<th>Plan</th>
|
||
<th>Health</th>
|
||
<th>Seat usage</th>
|
||
<th class="num">MRR</th>
|
||
<th>Trend · 90d</th>
|
||
<th class="action-col" />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(c, i) in scored" :key="c.id">
|
||
<td>
|
||
<div class="cust-cell">
|
||
<div class="cust-swatch" :style="{ background: c.brandColor }" />
|
||
<div>
|
||
<div class="cust-name">{{ c.name }}</div>
|
||
<Mono dim>{{ c.domain }}</Mono>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<Badge :tone="c.plan === 'enterprise' ? 'invert' : 'neutral'">{{ c.planLabel }}</Badge>
|
||
</td>
|
||
<td>
|
||
<div class="health-cell">
|
||
<div class="hbar">
|
||
<div class="hfill" :style="{ width: c.score + '%', background: healthColor(c.score) }" />
|
||
</div>
|
||
<Mono>{{ c.score }}</Mono>
|
||
</div>
|
||
</td>
|
||
<td><Mono dim>{{ c.seats.used }}/{{ c.seats.total }} · {{ Math.round(c.seats.used/c.seats.total*100) }}%</Mono></td>
|
||
<td class="num"><Mono>{{ c.mrrDkk > 0 ? c.mrrDkk.toLocaleString('da-DK') + ' DKK' : '—' }}</Mono></td>
|
||
<td>
|
||
<PartnerSparkline :values="miniTrend(i + 1)" :width="80" :height="22" stroke="var(--text)" fill="transparent" :show-dot="false" />
|
||
</td>
|
||
<td class="action-col">
|
||
<UiButton v-if="c.score < 50" size="sm" variant="primary" @click="openTask(c, 'escalate')">Escalate</UiButton>
|
||
<UiButton v-else-if="c.score < 75" size="sm" variant="secondary" @click="openTask(c, 'checkin')">Check in</UiButton>
|
||
<Mono v-else dim>—</Mono>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
</div>
|
||
|
||
<!-- REVENUE -->
|
||
<div v-if="tab === 'revenue'" class="content">
|
||
<div class="stat-strip">
|
||
<Card>
|
||
<Stat label="MRR · current" value="55.750 DKK" delta="+18.2%" delta-tone="up" hint="vs. 90d ago" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="Partner margin" value="11.150 DKK" delta="+19.0%" delta-tone="up" hint="20% of MRR" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="ARR · projected" value="669.000 DKK" delta="+24% YoY" delta-tone="up" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="ARPU" value="6.969 DKK" hint="per customer / mo" />
|
||
</Card>
|
||
</div>
|
||
|
||
<Card :pad="0">
|
||
<div class="card-head">
|
||
<div>
|
||
<Eyebrow>MRR · last 90 days</Eyebrow>
|
||
<div class="card-title">Trend</div>
|
||
</div>
|
||
</div>
|
||
<div class="big-chart">
|
||
<PartnerSparkline :values="partnerMrrSparkline" :width="1080" :height="160" stroke="var(--text)" fill="var(--row-hover)" />
|
||
<div class="chart-foot">
|
||
<span>Feb 14 · 38.180 DKK</span>
|
||
<span>May 14 · 55.750 DKK</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<div class="grid-2">
|
||
<Card>
|
||
<Eyebrow>By plan</Eyebrow>
|
||
<div class="card-title">Revenue mix</div>
|
||
<div class="plan-mix">
|
||
<div v-for="p in revenueMix" :key="p.n" class="mix-row">
|
||
<div class="mix-head">
|
||
<span class="mix-name">{{ p.n }}</span>
|
||
<Mono>{{ p.v.toLocaleString('da-DK') }} DKK · {{ p.p }}%</Mono>
|
||
</div>
|
||
<div class="mix-bar"><div class="mix-fill" :style="{ width: p.p + '%', background: p.c }" /></div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
<Card>
|
||
<Eyebrow>Top customers</Eyebrow>
|
||
<div class="card-title">By MRR</div>
|
||
<div class="top-list">
|
||
<div v-for="c in topByMrr" :key="c.id" class="top-row">
|
||
<div class="top-swatch" :style="{ background: c.brandColor }" />
|
||
<span class="top-name">{{ c.name }}</span>
|
||
<Mono>{{ c.mrrDkk.toLocaleString('da-DK') }} DKK</Mono>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CHURN -->
|
||
<div v-if="tab === 'churn'" class="content">
|
||
<div class="stat-strip">
|
||
<Card>
|
||
<Stat label="Gross churn · 90d" value="0%" delta="0 customers" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="Net churn · MRR" value="−2.1%" delta="contracted from upgrades" delta-tone="up" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="At-risk MRR" value="2.940 DKK" hint="1 customer · past-due" delta-tone="down" />
|
||
</Card>
|
||
<Card>
|
||
<Stat label="Avg tenure" value="14 mo" delta="trending up" delta-tone="up" />
|
||
</Card>
|
||
</div>
|
||
|
||
<Card :pad="0">
|
||
<div class="card-head">
|
||
<div>
|
||
<Eyebrow>Cohort retention</Eyebrow>
|
||
<div class="card-title">Customers by signup month</div>
|
||
</div>
|
||
</div>
|
||
<div class="cohort-wrap">
|
||
<table class="cohort">
|
||
<thead>
|
||
<tr>
|
||
<th>Cohort</th>
|
||
<th>Size</th>
|
||
<th v-for="h in cohortHeaders" :key="h">{{ h }}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(c, i) in cohorts" :key="i">
|
||
<td><Mono>{{ c[0] }}</Mono></td>
|
||
<td class="cohort-size"><Mono>{{ c[1] }}</Mono></td>
|
||
<td v-for="(v, j) in c[2]" :key="j" class="cell">
|
||
<Mono v-if="v === '—'" dim>—</Mono>
|
||
<span
|
||
v-else
|
||
class="heat"
|
||
:style="{
|
||
background: (v as number) >= 100 ? 'rgba(31,138,91,0.16)' : (v as number) >= 80 ? 'rgba(232,154,31,0.16)' : 'rgba(226,48,48,0.16)',
|
||
color: (v as number) >= 100 ? 'var(--ok)' : (v as number) >= 80 ? 'var(--warn)' : 'var(--bad)',
|
||
}"
|
||
>{{ v }}%</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Card>
|
||
|
||
<Card>
|
||
<Eyebrow>Why customers leave</Eyebrow>
|
||
<div class="card-title">Top exit reasons (last 12 months)</div>
|
||
<p class="exit-empty">
|
||
No churn yet. When customers do leave, exit reasons will surface here automatically (from cancel/pause flow inputs).
|
||
</p>
|
||
</Card>
|
||
</div>
|
||
|
||
<!-- CUSTOM REPORTS -->
|
||
<div v-if="tab === 'custom'" class="content">
|
||
<div class="custom-head">
|
||
<p class="custom-blurb">
|
||
Build a report once, schedule or run on demand. We'll email a PDF to the recipients you specify.
|
||
</p>
|
||
<UiButton variant="primary" @click="newReportOpen = true">
|
||
<template #leading><UiIcon name="plus" :size="14" /></template>
|
||
New custom report
|
||
</UiButton>
|
||
</div>
|
||
|
||
<Card :pad="0">
|
||
<table class="dtable">
|
||
<thead>
|
||
<tr>
|
||
<th>Report</th>
|
||
<th>Schedule</th>
|
||
<th>Owner</th>
|
||
<th>Last run</th>
|
||
<th class="action-col" />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="r in savedReports" :key="r.id">
|
||
<td><span class="cust-name">{{ r.name }}</span></td>
|
||
<td><Mono>{{ r.schedule }}</Mono></td>
|
||
<td>
|
||
<div class="owner-cell">
|
||
<Avatar :name="r.owner" :size="20" />
|
||
<span>{{ r.owner }}</span>
|
||
</div>
|
||
</td>
|
||
<td><Mono dim>{{ r.last }}</Mono></td>
|
||
<td class="action-col" @click.stop>
|
||
<div class="actions-row">
|
||
<UiButton size="sm" variant="ghost" @click="runReport(r.id)">
|
||
<template #leading>
|
||
<UiIcon :name="running === r.id ? 'refresh' : 'external'" :size="13" />
|
||
</template>
|
||
{{ running === r.id ? 'Running…' : 'Run' }}
|
||
</UiButton>
|
||
<button class="kebab" @click="openReportMenu(r.id, $event)">
|
||
<UiIcon name="more" :size="13" />
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</Card>
|
||
</div>
|
||
|
||
<!-- Portaled custom report row actions menu -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="reportMenuFor"
|
||
class="menu"
|
||
:style="{ top: reportMenuPos.top + 'px', right: reportMenuPos.right + 'px' }"
|
||
@click.stop
|
||
>
|
||
<template v-for="(it, i) in reportActions(savedReports.find(r => r.id === reportMenuFor)!)" :key="i">
|
||
<div v-if="it.sep" class="menu-sep" />
|
||
<button
|
||
v-else
|
||
class="menu-item"
|
||
:class="{ danger: it.danger }"
|
||
@click="(it.fn?.(), closeMenu())"
|
||
>
|
||
<UiIcon :name="(it.i as any)" :size="14" />
|
||
<span>{{ it.l }}</span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- Confirm delete report modal -->
|
||
<Modal
|
||
:open="!!confirmDeleteId"
|
||
eyebrow="Permanent action"
|
||
title="Delete this report?"
|
||
size="sm"
|
||
@close="confirmDeleteId = null"
|
||
>
|
||
<template v-if="confirmDeleteReport">
|
||
<div class="danger-callout">
|
||
<UiIcon name="trash" :size="16" />
|
||
<p>
|
||
The report configuration and its schedule will be deleted. Past PDFs already delivered to recipients are unaffected.
|
||
</p>
|
||
</div>
|
||
<div class="del-summary">
|
||
<dl class="def">
|
||
<div><dt>Report</dt><dd>{{ confirmDeleteReport.name }}</dd></div>
|
||
<div><dt>Schedule</dt><dd>{{ confirmDeleteReport.schedule }}</dd></div>
|
||
<div><dt>Recipients</dt><dd>{{ confirmDeleteReport.recipients }} addresses</dd></div>
|
||
<div><dt>Last run</dt><dd>{{ confirmDeleteReport.last }}</dd></div>
|
||
</dl>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<UiButton variant="ghost" @click="confirmDeleteId = null">Cancel</UiButton>
|
||
<UiButton variant="danger" @click="deleteReport">
|
||
<template #leading><UiIcon name="trash" :size="14" /></template>
|
||
Delete report
|
||
</UiButton>
|
||
</template>
|
||
</Modal>
|
||
|
||
<PartnerCustomerTaskPanel
|
||
:task="taskCtx"
|
||
@close="taskCtx = null"
|
||
@save="(t) => toast.ok(t.mode === 'escalate' ? 'Escalation created' : 'Check-in scheduled', t.customer.name)"
|
||
/>
|
||
<PartnerNewCustomReportModal
|
||
:open="newReportOpen"
|
||
@close="newReportOpen = false"
|
||
@created="(n) => toast.ok('Report created', n)"
|
||
/>
|
||
|
||
<!-- Export PDF Modal -->
|
||
<Modal
|
||
:open="exportOpen"
|
||
eyebrow="Partner reports · export"
|
||
title="Export reports to PDF"
|
||
size="md"
|
||
@close="exportOpen = false"
|
||
>
|
||
<p class="export-blurb">Select which tabs to include in the PDF, the period, cover style, and how you want it delivered.</p>
|
||
<div class="export-meta">
|
||
<Mono dim>// pdf preview · 3 sections · estimated 11 pages · NordicMSP cover + footer</Mono>
|
||
</div>
|
||
<template #footer>
|
||
<UiButton variant="ghost" @click="exportOpen = false">Cancel</UiButton>
|
||
<UiButton variant="primary" @click="exportOpen = false; toast.ok('PDF queued', 'You will be emailed when ready')">
|
||
<template #leading><UiIcon name="download" :size="14" /></template>
|
||
Download PDF
|
||
</UiButton>
|
||
</template>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tabs-bar {
|
||
padding: 0 40px;
|
||
margin-top: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
.tabs-stretch { flex: 1; }
|
||
.period-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 0 10px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
.period-chip .seg-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--text-mute);
|
||
}
|
||
.period-chip select {
|
||
border: none;
|
||
background: transparent;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
padding: 8px 4px;
|
||
cursor: pointer;
|
||
}
|
||
.period-chip select:focus { outline: none; }
|
||
|
||
.content { padding: 20px 40px 64px; display: flex; flex-direction: column; gap: 16px; }
|
||
|
||
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
|
||
.card-head {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.card-title {
|
||
font-family: var(--font-display);
|
||
font-weight: 600;
|
||
font-size: 17px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.big-chart { padding: 20px; }
|
||
.big-chart :deep(svg) { width: 100%; height: 160px; }
|
||
.chart-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 12px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--text-mute);
|
||
}
|
||
|
||
.dtable { width: 100%; border-collapse: collapse; }
|
||
.dtable th {
|
||
text-align: left;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--text-mute);
|
||
font-weight: 500;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.dtable th.num { text-align: right; }
|
||
.dtable th.action-col, .dtable td.action-col { width: 160px; text-align: right; }
|
||
.dtable td {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
font-size: 13px;
|
||
vertical-align: middle;
|
||
}
|
||
.dtable td.num { text-align: right; }
|
||
.dtable tbody tr:hover { background: var(--row-hover); }
|
||
|
||
.cust-cell { display: flex; align-items: center; gap: 12px; }
|
||
.cust-swatch { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; }
|
||
.cust-name { font-size: 13px; font-weight: 500; }
|
||
|
||
.owner-cell { display: flex; align-items: center; gap: 8px; }
|
||
.owner-cell span { font-size: 12px; }
|
||
|
||
.health-cell { display: inline-flex; align-items: center; gap: 10px; }
|
||
.hbar {
|
||
width: 90px;
|
||
height: 5px;
|
||
background: var(--border);
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
}
|
||
.hfill { height: 100%; }
|
||
|
||
/* Revenue · plan mix */
|
||
.plan-mix { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
|
||
.mix-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
|
||
.mix-name { font-weight: 500; }
|
||
.mix-bar { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
|
||
.mix-fill { height: 100%; }
|
||
|
||
.top-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
|
||
.top-row {
|
||
display: grid;
|
||
grid-template-columns: 20px 1fr 110px;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
.top-swatch { width: 14px; height: 14px; border-radius: 3px; }
|
||
.top-name { font-size: 13px; font-weight: 500; }
|
||
|
||
/* Cohort heatmap */
|
||
.cohort-wrap { overflow-x: auto; }
|
||
.cohort { width: 100%; border-collapse: collapse; min-width: 600px; }
|
||
.cohort th {
|
||
padding: 10px 16px;
|
||
text-align: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-mute);
|
||
font-weight: 500;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.cohort th:first-child { text-align: left; padding-left: 20px; }
|
||
.cohort td { padding: 10px 16px; text-align: center; border-bottom: 1px solid var(--border); }
|
||
.cohort td:first-child { text-align: left; padding-left: 20px; }
|
||
.cohort-size { font-family: var(--font-mono); font-size: 12px; }
|
||
.cohort .cell { padding: 6px; }
|
||
.heat {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 38px;
|
||
height: 22px;
|
||
border-radius: 4px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.exit-empty { font-size: 13px; color: var(--text-mute); line-height: 1.6; margin: 8px 0 0; }
|
||
|
||
/* Custom reports */
|
||
.custom-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 0; }
|
||
.custom-blurb { font-size: 13px; color: var(--text-mute); margin: 0; max-width: 540px; line-height: 1.5; }
|
||
.actions-row { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
|
||
.kebab {
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-mute);
|
||
padding: 4px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.kebab:hover { background: var(--row-hover); color: var(--text); }
|
||
|
||
/* Confirm delete + Export modals */
|
||
.danger-callout {
|
||
padding: 14px;
|
||
background: rgba(226, 48, 48, 0.06);
|
||
border: 1px solid rgba(226, 48, 48, 0.22);
|
||
border-radius: 6px;
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.danger-callout :deep(svg) { color: var(--bad); margin-top: 2px; flex-shrink: 0; }
|
||
.danger-callout p { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0; }
|
||
.del-summary {
|
||
padding: 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
.def { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
|
||
.def div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; font-size: 13px; }
|
||
.def dt { color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; }
|
||
.def dd { margin: 0; }
|
||
|
||
.export-blurb { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.55; }
|
||
.export-meta {
|
||
padding: 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* Portaled menu */
|
||
.menu {
|
||
position: fixed;
|
||
min-width: 240px;
|
||
padding: 4px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
|
||
z-index: 100;
|
||
}
|
||
.menu .menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border-radius: 5px;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
text-align: left;
|
||
color: var(--text);
|
||
}
|
||
.menu .menu-item:hover { background: var(--row-hover); }
|
||
.menu .menu-item.danger { color: var(--bad); }
|
||
.menu .menu-item svg { color: var(--text-mute); flex-shrink: 0; }
|
||
.menu .menu-item.danger svg { color: var(--bad); }
|
||
.menu .menu-item span { flex: 1; }
|
||
.menu .menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
|
||
</style>
|