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).

apps/operator/components/MetricCell.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{ label: string; value: string; tone?: 'ok' | 'warn' | 'bad' }>()
+</script>
+
+<template>
+  <div class="cell">
+    <div class="label">{{ label }}</div>
+    <div class="value" :data-tone="tone">{{ value }}</div>
+  </div>
+</template>
+
+<style scoped>
+.cell { min-width: 0; }
+.label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+}
+.value {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+.value[data-tone='ok']   { color: var(--ok); }
+.value[data-tone='warn'] { color: var(--warn); }
+.value[data-tone='bad']  { color: var(--bad); }
+</style>

apps/operator/components/OpPlaceholder.vue

@@ -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>

apps/operator/components/Stat.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string
+    value: string | number
+    delta?: string
+    deltaTone?: 'up' | 'down'
+    hint?: string
+  }>(),
+  { deltaTone: 'up' },
+)
+</script>
+
+<template>
+  <div class="stat">
+    <Eyebrow>{{ label }}</Eyebrow>
+    <div class="value">{{ value }}</div>
+    <div v-if="delta || hint" class="meta">
+      <span v-if="delta" class="delta" :data-tone="deltaTone">{{ delta }}</span>
+      <Mono v-if="hint" dim>{{ hint }}</Mono>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.value {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 26px;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.delta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.delta[data-tone='up']   { background: rgba(31, 138, 91, 0.12); color: var(--ok); }
+.delta[data-tone='down'] { background: rgba(226, 48, 48, 0.12); color: var(--bad); }
+</style>