@saasicat/ui-vue 0.19.0 → 0.21.0

package/src/pages-standard/TenantDetailPage.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="sa-tenant-detail">
-        <header class="sa-page-head">
-            <div>
+    <AdminPage class="sa-tenant-detail">
+        <AdminHero :title="data?.name ?? labels.title">
+            <template #before-title>
                 <q-btn
                     flat
                     dense
@@ -10,105 +10,78 @@
                     :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">
+            </template>
+            <template v-if="data" #subtitle>
+                {{ labels.slug }}: <code>{{ data.slug }}</code>
+            </template>
+            <template #actions>
+                <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="sa-card q-mb-md"
+                >
+                    <template #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" />
+                    </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="formatDate"
+                            :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="sa-card 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="sa-card 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 +91,31 @@
             @submit="onConfirmSubmit"
             @cancel="onConfirmCancel"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, toRef } from 'vue';
+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 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<{
@@ -236,51 +193,18 @@ function formatDate(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<{
@@ -392,16 +316,9 @@ 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 +338,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;

package/src/pages-standard/TenantsPage.vue

@@ -1,11 +1,6 @@
 <template>
-    <div class="sa-tenants">
-        <header class="sa-tenants__head">
-            <div>
-                <h1 class="sa-tenants__title">{{ msg.list.title }}</h1>
-                <p v-if="subtitle" class="sa-tenants__sub">{{ subtitle }}</p>
-            </div>
-        </header>
+    <AdminPage class="sa-tenants">
+        <AdminHero :title="msg.list.title" :subtitle="subtitle" />
 
         <div class="sa-tenants__filter">
             <div class="sa-tenants__search">
@@ -162,11 +157,13 @@
                 @cancel="manifestFlow.onConfirmCancel"
             />
         </template>
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import type { AdminManifest, TenantActionDef, TenantDto, TenantListFilter } from '@saasicat/types';
 import type { HttpClient } from '../client/types.js';
 import { formatMessage } from '../client/i18n/format.js';
@@ -518,30 +515,8 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
 </script>
 
 <style scoped>
-.sa-tenants {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-tenants__head {
-    padding: 20px 28px 8px;
-}
-.sa-tenants__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-    letter-spacing: -0.01em;
-}
-.sa-tenants__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-    line-height: 1.5;
-}
-
 .sa-tenants__filter {
-    padding: 12px 28px;
+    padding: 0 0 12px;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
@@ -587,7 +562,7 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
 }
 
 .sa-tenants__card {
-    margin: 0 28px 28px;
+    margin: 0 0 16px;
     background: #fff;
     border: 1px solid var(--sa-border, #e2e8f0);
     border-radius: 12px;
@@ -737,7 +712,7 @@ td {
 }
 
 .sa-tenants__foot {
-    padding: 0 28px 28px;
+    padding: 0;
     text-align: right;
     font-size: 12px;
     color: var(--sa-muted, #64748b);

package/src/pages-standard/UsersPage.vue

@@ -1,11 +1,7 @@
 <template>
-    <div class="sa-users">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ resolvedTitle }}</h1>
-                <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-users">
+        <AdminHero :title="resolvedTitle" :subtitle="subtitle">
+            <template #actions>
                 <q-btn
                     unelevated
                     color="primary"
@@ -13,8 +9,8 @@
                     :label="common.search"
                     @click="reload"
                 />
-            </div>
-        </header>
+            </template>
+        </AdminHero>
 
         <div class="sa-stats">
             <button
@@ -99,20 +95,23 @@
 
         <MfaPromptDialog
             v-if="needsMfaDialog"
-            :model-value="showMfa"
-            :description="mfaDescription"
-            :error="mfaError"
+            :model-value="mfa.show.value"
+            :description="mfa.description.value"
+            :error="mfa.error.value"
             :setup-hint="mfaSetupHint"
-            @update:model-value="onMfaDialogVisibility"
-            @confirm="onMfaConfirm"
+            @update:model-value="mfa.onVisibility"
+            @confirm="mfa.onConfirm"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
 import { useSuperAdminNotify } from '../quasar/notify.js';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
@@ -191,40 +190,13 @@ const rows = ref<UserRow[]>([]);
 const loading = ref(false);
 const filter = reactive({ q: '', tenant: '' });
 
-// MFA dialog state for per-flow MFA (reset/deactivate). Promise-resolver
-// pattern analogous to PilotsPage: the action handler calls `promptMfa` and
-// waits for `onMfaConfirm` (or cancellation via `update:modelValue=false`).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+// Per-flow MFA for reset/deactivate: the action handler awaits `mfa.prompt`,
+// which resolves with the code or with null when the user closes the dialog.
+const mfa = useMfaPrompt();
 const needsMfaDialog = computed(
     () => props.requireMfaForResetPassword || props.requireMfaForDeactivate,
 );
 
-function promptMfa(description: string): Promise<string | null> {
-    return new Promise((resolve) => {
-        mfaDescription.value = description;
-        mfaError.value = '';
-        showMfa.value = true;
-        pendingMfaResolve = (code) => {
-            pendingMfaResolve = null;
-            resolve(code);
-        };
-    });
-}
-
-function onMfaConfirm(code: string): void {
-    pendingMfaResolve?.(code);
-}
-
-function onMfaDialogVisibility(open: boolean): void {
-    showMfa.value = open;
-    if (!open && pendingMfaResolve) {
-        pendingMfaResolve(null);
-    }
-}
-
 // Stat-pill filter (analogous to plan simulation users.jsx):
 //   all | active | blocked | never-logged-in | super-admin.
 type StatusFilter = 'all' | 'active' | 'blocked' | 'never' | 'super';
@@ -407,20 +379,20 @@ async function runAction<R>(
         return;
     }
     while (true) {
-        const code = await promptMfa(actionLabel);
+        const code = await mfa.prompt(actionLabel);
         if (code === null) return;
         try {
             const result = await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             onSuccess(result);
             return;
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = shell.value.mfa.invalidCode;
+                mfa.error.value = shell.value.mfa.invalidCode;
                 continue;
             }
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('negative', errMsg(err));
             return;
         }
@@ -497,11 +469,6 @@ function onDeactivateClick(row: UserRow): void {
 </script>
 
 <style scoped>
-.sa-users {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 .sa-users__filter {
     display: flex;
     gap: 10px;

package/src/pages-standard/bundles-page/BundlesToolbar.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="sa-bundles__toolbar">
+        <q-select
+            v-if="locales.length > 1"
+            :model-value="displayLocale"
+            :options="localeOptions"
+            outlined
+            dense
+            emit-value
+            map-options
+            class="sa-bundles__locale"
+            :label="msg.header.displayLocale"
+            @update:model-value="(value) => emit('update:displayLocale', String(value))"
+        >
+            <template #prepend><q-icon name="translate" size="18px" /></template>
+        </q-select>
+        <q-btn
+            unelevated
+            color="primary"
+            icon="add"
+            :label="msg.header.newBundle"
+            @click="emit('create')"
+        />
+        <q-btn flat icon="refresh" :loading="loading" @click="emit('refresh')">
+            <q-tooltip>{{ msg.header.reload }}</q-tooltip>
+        </q-btn>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
+// The language selector controls which locale feature/quota labels are resolved
+// on the create form and in the detail view (fallback locale → DE → key). The default is the
+// default locale (DE); further options come from the active project locales.
+
+const props = defineProps<{
+    loading: boolean;
+    displayLocale: string;
+    locales: string[];
+}>();
+
+const emit = defineEmits<{
+    create: [];
+    refresh: [];
+    'update:displayLocale': [locale: string];
+}>();
+
+const msg = useSaMessages('bundles');
+
+const localeOptions = computed(() =>
+    props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
+);
+</script>
+
+<style scoped>
+.sa-bundles__toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.sa-bundles__locale {
+    min-width: 150px;
+}
+</style>