Ronni Baslund
e0ac643e80
- 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).
46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<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>
|