@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/TenantDetailPage.vue

@@ -1,114 +1,81 @@
 <template>
-    <div class="sa-tenant-detail">
-        <header class="sa-page-head">
-            <div>
-                <q-btn
-                    flat
-                    dense
-                    icon="arrow_back"
-                    :label="labels.back"
-                    :to="backRoute"
-                    class="sa-tenant-detail__back"
-                />
-                <h1 class="sa-page-head__title">{{ data?.name ?? labels.title }}</h1>
-                <p v-if="data" class="sa-page-head__sub">
-                    {{ labels.slug }}: <code>{{ data.slug }}</code>
-                </p>
-            </div>
-            <slot name="header-actions" :data="data" :reload="load" />
-        </header>
-
-        <div class="sa-tenant-detail__body">
-            <div v-if="loading" class="sa-tenant-detail__state">
-                <q-spinner size="32px" /> {{ common.loading }}
-            </div>
-
-            <template v-else-if="data">
+    <AdminPage class="sa-tenant-detail">
+        <AdminHero :title="data?.name ?? labels.title">
+            <template v-if="data" #subtitle>
+                {{ labels.slug }}: <code>{{ data.slug }}</code>
+            </template>
+            <!--
+                Back first, then the tenant-level actions, then whatever the app
+                adds — the same order every other hero uses. Both are plain
+                `.sa-btn` buttons: a hero is where a page's own actions live, and
+                a detail page's "suspend" is exactly that. It used to sit on the
+                master-data section instead, which read as an action on that one
+                card rather than on the tenant.
+            -->
+            <template #actions>
+                <button class="sa-btn" type="button" @click="goBack">
+                    <q-icon name="arrow_back" size="16px" />
+                    <span>{{ labels.back }}</span>
+                </button>
+                <button
+                    v-for="action in manifestActions"
+                    :key="action.def.id"
+                    :class="['sa-btn', toneClass(action.def.actionKey)]"
+                    type="button"
+                    @click="action.onClick"
+                >
+                    <q-icon :name="iconForActionKey(action.def.actionKey)" size="16px" />
+                    <span>{{ action.def.label }}</span>
+                </button>
+                <slot name="header-actions" :data="data" :reload="load" />
+            </template>
+        </AdminHero>
+
+        <AdminBody :loading="loading" :empty="!data">
+            <template v-if="data">
                 <!-- Master data -->
-                <div class="sa-card q-mb-md">
-                    <header class="sa-tenant-detail__card-head">
-                        <div>
-                            <h2 class="sa-card__title">{{ labels.masterData }}</h2>
-                            <p v-if="stammdatenSub" class="sa-tenant-detail__card-sub">
-                                {{ stammdatenSub }}
-                            </p>
-                        </div>
-                        <div class="sa-tenant-detail__card-actions">
-                            <!-- Manifest-driven default actions (Suspend/Reactivate) -->
-                            <q-btn
-                                v-for="action in manifestActions"
-                                :key="action.def.id"
-                                outline
-                                :color="toneColor(action.def.actionKey)"
-                                :icon="iconForActionKey(action.def.actionKey)"
-                                :label="action.def.label"
-                                @click="action.onClick"
-                            />
-                            <slot name="card-actions" :data="data" :reload="load" />
-                        </div>
-                    </header>
+                <AdminSection :title="labels.masterData" :subtitle="stammdatenSub" class="q-mb-md">
+                    <template #actions>
+                        <slot name="card-actions" :data="data" :reload="load" />
+                    </template>
                     <slot name="stammdaten" :data="data">
-                        <div class="sa-tenant-detail__grid">
-                            <KvBlock :label="labels.plan" :value="data.subscription?.plan ?? '—'" />
-                            <KvBlock
-                                :label="labels.status"
-                                :value="data.subscription?.status ?? '—'"
-                            />
-                            <KvBlock
-                                :label="labels.pilot"
-                                :value="data.subscription?.isPilot ? common.yes : common.no"
-                            />
-                            <KvBlock
-                                :label="labels.trialEnd"
-                                :value="formatDate(data.subscription?.trialEndsAt)"
-                            />
-                            <KvBlock
-                                :label="labels.pilotEnd"
-                                :value="formatDate(data.subscription?.pilotEndsAt)"
-                            />
-                            <KvBlock v-if="data.vatId" :label="labels.vatId" :value="data.vatId" />
+                        <TenantMasterData
+                            :data="data"
+                            :labels="labels"
+                            :format-date="formatDateResolved"
+                            :yes="common.yes"
+                            :no="common.no"
+                        >
                             <slot name="extra-stammdaten" :data="data" />
-                        </div>
+                        </TenantMasterData>
                     </slot>
-                </div>
+                </AdminSection>
 
                 <!-- Usage -->
-                <div v-if="verbrauchFields.length > 0" class="sa-card q-mb-md">
-                    <h3 class="sa-card__title">{{ labels.usage }}</h3>
-                    <div class="sa-tenant-detail__grid">
-                        <KvBlock
-                            v-for="(field, i) in verbrauchFields"
-                            :key="field.label + i"
-                            :label="field.label"
-                            :value="resolveVerbrauch(field)"
-                        />
-                    </div>
-                </div>
+                <AdminSection
+                    v-if="verbrauchFields.length > 0"
+                    :title="labels.usage"
+                    class="q-mb-md"
+                >
+                    <TenantUsage :data="data" :fields="verbrauchFields" />
+                </AdminSection>
 
                 <!-- Users -->
-                <div v-if="showUsers && data.users" class="sa-card q-mb-md">
-                    <h3 class="sa-card__title">{{ labels.users }}</h3>
-                    <q-table
-                        flat
-                        :rows="data.users"
-                        :columns="userColumns ?? defaultUserColumns"
-                        row-key="id"
-                        :pagination="{ rowsPerPage: 0 }"
-                        hide-pagination
-                    />
-                </div>
+                <AdminSection v-if="showUsers && data.users" :title="labels.users" class="q-mb-md">
+                    <TenantUsers :users="data.users" :columns="userColumns ?? defaultUserColumns" />
+                </AdminSection>
 
                 <slot name="extra-cards" :data="data" :reload="load" />
             </template>
-        </div>
+        </AdminBody>
 
         <!-- Manifest-driven action flow dialogs -->
         <MfaPromptDialog
-            v-model="mfaState.show"
-            :description="mfaState.description"
-            :error="mfaState.error"
-            @update:model-value="onMfaDialogVisibility"
-            @confirm="onMfaConfirm"
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
         />
         <TenantActionConfirmDialog
             v-model="confirmState.show"
@@ -118,47 +85,31 @@
             @submit="onConfirmSubmit"
             @cancel="onConfirmCancel"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, toRef } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import { useRouter, type RouteLocationRaw } from 'vue-router';
+import type { TenantDetailData, VerbrauchField } from './tenant-detail/types.js';
 import type { QTableColumn } from 'quasar';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import type { AdminManifest, TenantActionDef, TenantDto } from '@saasicat/types';
 import { formatMessage } from '../client/i18n/format.js';
-import KvBlock from '../components/KvBlock.vue';
+import TenantMasterData from './tenant-detail/TenantMasterData.vue';
+import TenantUsage from './tenant-detail/TenantUsage.vue';
+import TenantUsers from './tenant-detail/TenantUsers.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import TenantActionConfirmDialog from '../components/TenantActionConfirmDialog.vue';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import { useTenantActionFlow } from '../vue/use-tenant-action-flow.js';
 
-export interface TenantDetailData {
-    id: string;
-    slug: string;
-    name: string;
-    isActive: boolean;
-    vatId?: string | null;
-    subscription?: {
-        plan?: string | null;
-        status?: string | null;
-        isPilot?: boolean | null;
-        trialEndsAt?: string | null;
-        pilotEndsAt?: string | null;
-    } | null;
-    users?: Array<Record<string, unknown> & { id: string }>;
-    /** Freely selectable usage numbers — the page renders them via `verbrauchFields`. */
-    counts?: Record<string, number | string>;
-}
-
-export interface VerbrauchField {
-    label: string;
-    /** Lookup key in `data.counts`. */
-    key?: string;
-    /** Alternative: custom getter. Takes precedence over `key`. */
-    getter?: (data: TenantDetailData) => string | number;
-}
+export type { TenantDetailData, VerbrauchField } from './tenant-detail/types.js';
 
 const props = withDefaults(
     defineProps<{
@@ -232,55 +183,22 @@ function defaultFormatDate(value: string | null | undefined): string {
     return String(value).slice(0, 10);
 }
 
-function formatDate(value: string | null | undefined): string {
+function formatDateResolved(value: string | null | undefined): string {
     return props.formatDate ? props.formatDate(value) : defaultFormatDate(value);
 }
 
-function resolveVerbrauch(field: VerbrauchField): string {
-    if (!data.value) return '—';
-    if (field.getter) return String(field.getter(data.value));
-    if (field.key) {
-        const v = data.value.counts?.[field.key];
-        return v === undefined || v === null ? '0' : String(v);
-    }
-    return '—';
-}
-
 // ── Manifest-driven Action Flow (Suspend/Reactivate, Default) ──────────
 const manifestRef = toRef(() => props.manifest);
 
-const mfaState = ref<{ show: boolean; description: string; error: string }>({
-    show: false,
-    description: '',
-    error: '',
-});
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const mfa = useMfaPrompt();
 
 function showMfaDialog(def: TenantActionDef, ctx: { row: TenantDto }): Promise<string | null> {
-    return new Promise((resolve) => {
-        mfaState.value = {
-            show: true,
-            description: formatMessage(msg.value.actions.mfaDescription, {
-                action: def.label,
-                tenant: ctx.row.name,
-            }),
-            error: '',
-        };
-        pendingMfaResolve = (code) => {
-            pendingMfaResolve = null;
-            resolve(code);
-        };
-    });
-}
-
-function onMfaConfirm(code: string): void {
-    pendingMfaResolve?.(code);
-    mfaState.value.show = false;
-}
-
-function onMfaDialogVisibility(open: boolean): void {
-    mfaState.value.show = open;
-    if (!open && pendingMfaResolve) pendingMfaResolve(null);
+    return mfa.prompt(
+        formatMessage(msg.value.actions.mfaDescription, {
+            action: def.label,
+            tenant: ctx.row.name,
+        }),
+    );
 }
 
 const confirmState = ref<{
@@ -348,16 +266,29 @@ const manifestActions = computed(() => {
         .map((a) => ({ def: a.def, onClick: () => void a.invoke(row) }));
 });
 
+const router = useRouter();
+
+/**
+ * The hero back button navigates rather than rendering a link.
+ *
+ * `backRoute` is a `RouteLocationRaw`, not an href, so there is no anchor to
+ * build without duplicating the router's resolution — and every other hero in
+ * the package uses a button for the same step.
+ */
+function goBack(): void {
+    void router.push(props.backRoute);
+}
+
 function iconForActionKey(actionKey: string): string {
     if (actionKey.endsWith('.suspend')) return 'block';
     if (actionKey.endsWith('.reactivate')) return 'play_arrow';
     return 'bolt';
 }
 
-function toneColor(actionKey: string): string {
-    if (actionKey.endsWith('.suspend')) return 'negative';
-    if (actionKey.endsWith('.reactivate')) return 'positive';
-    return 'primary';
+function toneClass(actionKey: string): string {
+    if (actionKey.endsWith('.suspend')) return 'sa-btn--danger';
+    if (actionKey.endsWith('.reactivate')) return 'sa-btn--positive';
+    return 'sa-btn--primary';
 }
 
 const defaultUserColumns = computed<QTableColumn[]>(() => [
@@ -392,16 +323,6 @@ const defaultUserColumns = computed<QTableColumn[]>(() => [
 </script>
 
 <style scoped>
-.sa-tenant-detail {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app);
-}
-.sa-tenant-detail__back {
-    margin-bottom: 6px;
-}
-.sa-tenant-detail__body {
-    padding: 12px 28px 28px;
-}
 .sa-tenant-detail__card-head {
     display: flex;
     justify-content: space-between;
@@ -421,18 +342,6 @@ const defaultUserColumns = computed<QTableColumn[]>(() => [
     gap: 8px;
     align-items: center;
 }
-.sa-tenant-detail__grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 12px;
-}
-.sa-tenant-detail__state {
-    padding: 32px 0;
-    color: var(--sa-muted);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
 .sa-tenant-detail__empty {
     color: var(--sa-muted);
     font-size: 13px;