dezky/apps/operator/pages/index.vue

<script setup lang="ts">
// O.4 deliverable: real shell wrapping the placeholder dashboard. The smoke
// test from O.3 stays so we can keep verifying the audience chain after
// every restart. Real Overview content lands in O.7.

const { user } = useOidcAuth()
const smokeResult = ref<string | null>(null)
const smokeBusy = ref(false)

async function createTestPartner() {
  smokeBusy.value = true
  smokeResult.value = null
  try {
    const res = await $fetch('/api/operator-smoke-test', { method: 'POST' })
    smokeResult.value = `200 ${JSON.stringify(res).slice(0, 200)}`
  } catch (err: unknown) {
    const e = err as { data?: { message?: string; data?: { message?: string } }; statusCode?: number }
    const code = e.statusCode ?? '?'
    const msg = e.data?.data?.message ?? e.data?.message ?? String(err)
    smokeResult.value = `${code} ${msg}`
  } finally {
    smokeBusy.value = false
  }
}
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Overview"
      :title="`Hi, ${user?.userInfo?.name || user?.userName || 'operator'}.`"
      subtitle="O.4 scaffolding · sidebar + topbar + design tokens wired up. Real dashboard tiles, metrics and incident panel land in O.7."
    >
      <template #actions>
        <UiButton variant="secondary">
          <template #leading><UiIcon name="external" :size="13" /></template>
          Docs
        </UiButton>
        <UiButton variant="primary">
          <template #leading><UiIcon name="plus" :size="13" /></template>
          New tenant
        </UiButton>
      </template>
    </PageHeader>

    <div class="stage">
      <Card>
        <div class="row">
          <div>
            <h2>Smoke test · POST /partners</h2>
            <p>
              Forwards your access token to platform-api. Operator-scoped tokens succeed
              (200 first time, 409 thereafter). Customer-portal tokens return 403.
            </p>
          </div>
          <UiButton variant="primary" :disabled="smokeBusy" @click="createTestPartner">
            {{ smokeBusy ? 'Calling…' : 'Create partner' }}
          </UiButton>
        </div>
        <pre v-if="smokeResult" class="result">{{ smokeResult }}</pre>
      </Card>

      <Card>
        <h2 class="cap">Session</h2>
        <div class="meta">
          <div class="kv"><Eyebrow>subject</Eyebrow><Mono>{{ user?.userName }}</Mono></div>
          <div class="kv"><Eyebrow>email</Eyebrow><Mono>{{ user?.userInfo?.email }}</Mono></div>
          <div class="kv">
            <Eyebrow>groups</Eyebrow>
            <span class="groups">
              <Badge
                v-for="g in (user?.userInfo as { groups?: string[] } | undefined)?.groups || []"
                :key="g"
                :tone="g === 'dezky-platform-admins' ? 'accent' : 'neutral'"
              >{{ g }}</Badge>
            </span>
          </div>
          <div class="kv"><Eyebrow>token aud</Eyebrow><Badge tone="invert">dezky-operator</Badge></div>
        </div>
      </Card>
    </div>
  </div>
</template>

<style scoped>
.stage {
  padding: 24px 40px 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
}

.row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}

p {
  margin: 0;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.55;
  max-width: 560px;
}

.result {
  margin: 16px 0 0 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-all;
}

.cap {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
}

.meta { display: flex; flex-direction: column; gap: 12px; }
.kv { display: flex; align-items: center; gap: 16px; }
.kv :first-child { width: 110px; flex-shrink: 0; }
.groups { display: flex; gap: 6px; flex-wrap: wrap; }
</style>