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,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>
|
||||
Reference in New Issue
Block a user