feat(operator): visual-only screens with real-data overview (O.7)

- Overview (pages/index.vue): KPIs from real /tenants /partners /users,
  status meter, recent + needs-follow-up tables. Mock activity stream and
  incident banner overlay come from data/fixtures.ts.
- Operator team: real GET /users filtered to platformAdmin === true,
  with last-seen + tenant counts.
- Users (global): real read with All/Admins/Inactive views and search.
- Infrastructure / Feature flags / Audit: mock fixtures only — wiring to
  real backends (Prometheus, OpenFeature, append-only audit) is tracked
  as follow-ups in OPERATOR-PLAN.md.
- Placeholder pages (support/billing/reports/settings) via OpPlaceholder.
- Shared: Stat, MetricCell, OpPlaceholder components, /api/users proxy,
  PlatformUser type.
- .gitignore: scope the docker volumes data/ rule so apps/*/data/ is
  tracked again (operator carries mock fixtures there).
This commit is contained in:
Ronni Baslund
2026-05-24 08:17:26 +02:00
parent fbbb43e3e2
commit e0ac643e80
18 changed files with 1332 additions and 120 deletions
@@ -0,0 +1,64 @@
<script setup lang="ts">
import type { IconName } from './UiIcon.vue'
defineProps<{
title: string
eyebrow?: string
icon: IconName
body: string
}>()
</script>
<template>
<div class="placeholder">
<PageHeader :eyebrow="eyebrow" :title="title" />
<div class="frame">
<div class="empty">
<div class="icon-tile">
<UiIcon :name="icon" :size="22" />
</div>
<div class="title">{{ title }}</div>
<p>{{ body }}</p>
<Mono dim>// implementation pending — see OPERATOR-PLAN.md follow-ups</Mono>
</div>
</div>
</div>
</template>
<style scoped>
.frame { padding: 32px 40px 64px 40px; }
.empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 64px 32px;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--surface);
text-align: center;
}
.icon-tile {
width: 48px;
height: 48px;
border-radius: 8px;
background: var(--bg);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
}
.title {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
}
p {
color: var(--text-dim);
font-size: 13px;
max-width: 380px;
margin: 0;
}
</style>