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,285 @@
|
||||
<script setup lang="ts">
|
||||
// Portal topbar: workspace label, optional org switcher (partner admins), global
|
||||
// search, app launcher, notifications, profile menu.
|
||||
|
||||
import { customers } from '~/data/customers'
|
||||
|
||||
const launcher = useAppLauncher()
|
||||
const drawer = useNotificationDrawer()
|
||||
const partnerMode = usePartnerMode()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Section context is URL-driven (same rule as the sidebar). The org switcher
|
||||
// only appears in the partner section or when acting-as a customer.
|
||||
type Section = 'partner' | 'admin' | 'user'
|
||||
const section = computed<Section>(() => {
|
||||
if (partnerMode.isActive.value) return 'admin'
|
||||
if (route.path.startsWith('/partner')) return 'partner'
|
||||
if (route.path.startsWith('/admin')) return 'admin'
|
||||
return 'user'
|
||||
})
|
||||
const showOrgSwitcher = computed(() =>
|
||||
section.value === 'partner' || partnerMode.isActive.value,
|
||||
)
|
||||
|
||||
const activeCustomer = computed(() =>
|
||||
customers.find((c) => c.id === partnerMode.activeCustomerId.value) || null,
|
||||
)
|
||||
|
||||
const orgSwitcherOpen = ref(false)
|
||||
function pickCustomer(id: string) {
|
||||
orgSwitcherOpen.value = false
|
||||
partnerMode.enter(id)
|
||||
router.push('/admin')
|
||||
}
|
||||
function leaveCustomerMode() {
|
||||
orgSwitcherOpen.value = false
|
||||
partnerMode.exit()
|
||||
router.push('/partner/customers')
|
||||
}
|
||||
|
||||
// Dummy global search — opens AppLauncher for now until real search is wired.
|
||||
const searchValue = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<!-- Org switcher · only in the partner section or when acting as a customer -->
|
||||
<button
|
||||
v-if="showOrgSwitcher"
|
||||
class="orgswitch"
|
||||
@click="orgSwitcherOpen = !orgSwitcherOpen"
|
||||
>
|
||||
<span
|
||||
class="org-chip"
|
||||
:style="{ background: activeCustomer?.brandColor || '#0A0A0A' }"
|
||||
>
|
||||
{{ (activeCustomer?.name || 'NordicMSP').slice(0, 1) }}
|
||||
</span>
|
||||
<span class="org-name">{{ activeCustomer?.name || 'NordicMSP · Partner view' }}</span>
|
||||
<UiIcon name="chevDown" :size="12" />
|
||||
</button>
|
||||
|
||||
<button class="palette" type="button" @click="launcher.show">
|
||||
<UiIcon name="search" :size="13" stroke="var(--text-mute)" />
|
||||
<input
|
||||
v-model="searchValue"
|
||||
type="text"
|
||||
placeholder="Search mail, files, people…"
|
||||
@click.stop
|
||||
@focus.stop
|
||||
/>
|
||||
<span class="kbd">⌘K</span>
|
||||
</button>
|
||||
|
||||
<div class="right">
|
||||
<button class="icon-btn" title="Apps" @click="launcher.toggle">
|
||||
<UiIcon name="waffle" :size="14" />
|
||||
</button>
|
||||
<button class="icon-btn" title="Notifications" @click="drawer.toggle">
|
||||
<UiIcon name="bell" :size="14" />
|
||||
<span v-if="drawer.unreadCount.value > 0" class="icon-btn-dot" />
|
||||
</button>
|
||||
<PortalUserMenu />
|
||||
</div>
|
||||
|
||||
<!-- Org switcher dropdown -->
|
||||
<Teleport to="body">
|
||||
<div v-if="orgSwitcherOpen" class="org-drop-scrim" @click="orgSwitcherOpen = false" />
|
||||
<div v-if="orgSwitcherOpen" class="org-drop">
|
||||
<div class="org-drop-head">
|
||||
<Eyebrow>NordicMSP · {{ customers.length }} customers</Eyebrow>
|
||||
</div>
|
||||
<button class="org-drop-row" :class="{ on: !partnerMode.isActive.value }" @click="leaveCustomerMode">
|
||||
<span class="org-drop-chip" style="background: #0A0A0A">N</span>
|
||||
<div class="org-drop-meta">
|
||||
<div class="org-drop-name">Partner view</div>
|
||||
<Mono dim>portfolio overview</Mono>
|
||||
</div>
|
||||
</button>
|
||||
<div class="org-drop-divider" />
|
||||
<button
|
||||
v-for="c in customers"
|
||||
:key="c.id"
|
||||
class="org-drop-row"
|
||||
:class="{ on: partnerMode.activeCustomerId.value === c.id }"
|
||||
@click="pickCustomer(c.id)"
|
||||
>
|
||||
<span class="org-drop-chip" :style="{ background: c.brandColor }">{{ c.name.slice(0, 1) }}</span>
|
||||
<div class="org-drop-meta">
|
||||
<div class="org-drop-name">{{ c.name }}</div>
|
||||
<Mono dim>{{ c.domain }} · {{ c.plan }}</Mono>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
height: 52px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 16px;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.orgswitch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.orgswitch:hover { background: var(--elevated); }
|
||||
.org-chip {
|
||||
width: 18px; height: 18px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #F4F3EE;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 10px;
|
||||
}
|
||||
.org-name { font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.palette {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 540px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
cursor: text;
|
||||
color: var(--text-mute);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.palette input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
color: var(--text);
|
||||
min-width: 0;
|
||||
}
|
||||
.palette input::placeholder { color: var(--text-mute); }
|
||||
|
||||
.kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
color: var(--text-mute);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-btn:hover { background: var(--elevated); }
|
||||
.icon-btn-dot {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 7px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: var(--bad);
|
||||
border: 1.5px solid var(--bg);
|
||||
}
|
||||
|
||||
.org-drop-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 90;
|
||||
background: transparent;
|
||||
}
|
||||
.org-drop {
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: 232px;
|
||||
z-index: 100;
|
||||
width: 320px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
background: var(--elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
|
||||
padding: 6px;
|
||||
}
|
||||
.org-drop-head { padding: 8px 10px 4px 10px; }
|
||||
.org-drop-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.org-drop-row:hover { background: var(--surface); }
|
||||
.org-drop-row.on { background: var(--surface); border-color: var(--border); }
|
||||
.org-drop-chip {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #F4F3EE;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
.org-drop-meta { min-width: 0; flex: 1; }
|
||||
.org-drop-name { font-weight: 500; }
|
||||
.org-drop-divider { height: 1px; background: var(--border); margin: 6px 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user