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
77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
// Banner shown at top of viewport when a partner admin is acting inside a
|
|
// specific customer org. Distinct color (indigo — partner mode is normal
|
|
// operating mode, not danger). Persistent until partner exits.
|
|
|
|
import { customers } from '~/data/customers'
|
|
|
|
const partnerMode = usePartnerMode()
|
|
const router = useRouter()
|
|
|
|
const activeCustomer = computed(() =>
|
|
customers.find((c) => c.id === partnerMode.activeCustomerId.value) || null,
|
|
)
|
|
|
|
onMounted(() => partnerMode.hydrate())
|
|
|
|
function exit() {
|
|
partnerMode.exit()
|
|
router.push('/partner/customers')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="partnerMode.isActive.value && activeCustomer" class="banner">
|
|
<span class="dot" />
|
|
<div class="meta">
|
|
<Mono>Partner view</Mono>
|
|
<span class="text">managing <strong>{{ activeCustomer.name }}</strong> · actions are attributed to NordicMSP in the customer's audit log</span>
|
|
</div>
|
|
<button class="exit" @click="exit">
|
|
<UiIcon name="logout" :size="12" />
|
|
<span>Exit partner view</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: linear-gradient(to right, rgba(63, 107, 255, 0.18), rgba(63, 107, 255, 0.08));
|
|
border-bottom: 1px solid rgba(63, 107, 255, 0.36);
|
|
padding: 8px 16px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #4D8BE8;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 0 0 4px rgba(77, 139, 232, 0.18);
|
|
}
|
|
|
|
.meta { flex: 1; display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
|
|
.text { color: var(--text-dim); }
|
|
.text strong { color: var(--text); font-weight: 600; }
|
|
|
|
.exit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 10px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.exit:hover { background: var(--surface); }
|
|
</style>
|