Ronni Baslund
7720e4be83
Migrate the partner-mode customer switcher, in-customer banner, sidebar tile and the team invite/teammate panels off the data/customers fixture onto the real /api/partner/tenants list (shared key, gated to partner-staff so the global shell doesn't 403 for other users). Active customer resolves by tenant _id (the key the customers page already passes to partnerMode.enter); partner-identity labels now use the real partner name from useMe. Removes the now-unused customers + CustomerOrg-list fixture export and the dead setCustomer helper. Verified in UI: switcher + enter/exit show real Baslund Test / Baslund Research ApS.
86 lines
2.4 KiB
Vue
86 lines
2.4 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 type { PartnerTenantDoc } from '~/types/partner'
|
|
|
|
const partnerMode = usePartnerMode()
|
|
const router = useRouter()
|
|
const { partner, isPartnerStaff } = useMe()
|
|
|
|
// Real tenant list (shared key; gated to partner-staff so the layout-level
|
|
// banner doesn't 403 the partner endpoint for other users).
|
|
const { data: tenants } = useFetch<PartnerTenantDoc[]>('/api/partner/tenants', {
|
|
key: 'partner-tenants',
|
|
default: () => [],
|
|
immediate: isPartnerStaff.value,
|
|
})
|
|
|
|
const activeCustomer = computed(() =>
|
|
(tenants.value ?? []).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 {{ partner?.name ?? 'your partner org' }} 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>
|