@saasicat/ui-vue 0.18.1 → 0.21.0

package/src/pages-standard/PilotsPage.vue

@@ -1,13 +1,10 @@
 <template>
-    <div class="sa-pilots">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
-                <p class="sa-page-head__sub">
-                    {{ formatMessage(msg.subtitleCount, { count: rows.length }) }}
-                </p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-pilots">
+        <AdminHero
+            :title="msg.title"
+            :subtitle="formatMessage(msg.subtitleCount, { count: rows.length })"
+        >
+            <template #actions>
                 <slot name="head-actions">
                     <q-btn
                         v-if="enableCreate"
@@ -18,8 +15,8 @@
                         @click="showCreate = true"
                     />
                 </slot>
-            </div>
-        </header>
+            </template>
+        </AdminHero>
 
         <div class="sa-stats">
             <button
@@ -98,22 +95,25 @@
 
         <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, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminNotify } from '../quasar/notify.js';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import PilotCreateDialog from '../components/dialogs/PilotCreateDialog.vue';
 import PilotEditDialog from '../components/dialogs/PilotEditDialog.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
@@ -219,38 +219,11 @@ const showEdit = ref(false);
 const editRow = ref<PilotRow | null>(null);
 const bakedPlanOptions = ref<PilotPlanOption[]>([]);
 
-// MFA dialog state for per-flow MFA (extend/revoke). Promise-resolver pattern
-// analogous to use-platform-tenant-actions.ts: `onExtendClick`/`onRevokeClick`
-// calls `runWithMfa(...)`, which opens the dialog 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 extend/revoke: `runWithMfa` awaits `mfa.prompt`, which
+// resolves with the code or with null when the user closes the dialog.
+const mfa = useMfaPrompt();
 const needsMfaDialog = computed(() => props.requireMfaForExtend || props.requireMfaForRevoke);
 
-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);
-    }
-}
 // Consumers can set `createPlanOptions` instead of `loadPlanOptions`
 // (e.g. apps with a hard-coded plan list).
 const effectiveCreatePlanOptions = computed<readonly (string | PilotPlanOption)[]>(() => {
@@ -498,21 +471,21 @@ async function runAction(
     // MFA loop: as long as the server returns 401, keep the dialog open and
     // wait again for a code. Cancelling (resolver === null) ends it.
     while (true) {
-        const code = await promptMfa(actionLabel);
+        const code = await mfa.prompt(actionLabel);
         if (code === null) return;
         try {
             await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('positive', successMessage);
             await reload();
             return;
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = msg.value.mfa.invalidOrNotSetUp;
+                mfa.error.value = msg.value.mfa.invalidOrNotSetUp;
                 continue;
             }
-            showMfa.value = false;
+            mfa.show.value = false;
             notify('negative', errMsg(err));
             return;
         }
@@ -575,11 +548,6 @@ function formatDate(iso: string | null | undefined): string | null {
 </script>
 
 <style scoped>
-.sa-pilots {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 .sa-pilots__card {
     background: #fff;
     border: 1px solid var(--sa-border, #e2e8f0);

package/src/pages-standard/PlansPage.vue

@@ -1,5 +1,23 @@
 <template>
-    <q-page class="sa-plans">
+    <AdminPage class="sa-plans">
+        <AdminHero :title="msg.list.title">
+            <template v-if="mode === 'list'" #actions>
+                <q-btn
+                    flat
+                    icon="grid_view"
+                    :label="msg.list.matrixView"
+                    @click="mode = 'matrix'"
+                />
+                <q-btn
+                    unelevated
+                    color="primary"
+                    icon="add"
+                    :label="msg.list.newPlan"
+                    @click="openCreate"
+                />
+            </template>
+        </AdminHero>
+
         <q-banner v-if="error" class="bg-negative text-white q-ma-md" rounded>
             <template #avatar>
                 <q-icon name="error" />
@@ -10,12 +28,7 @@
             </template>
         </q-banner>
 
-        <div v-if="loading && plans.length === 0" class="sa-plans__loading">
-            <q-spinner size="32px" />
-            <span>{{ msg.page.loading }}</span>
-        </div>
-
-        <template v-else>
+        <AdminBody :loading="loading && plans.length === 0" :loading-text="msg.page.loading">
             <!-- Default: list view (plan simulation) + Bundle overview -->
             <template v-if="mode === 'list'">
                 <PlanList
@@ -25,13 +38,11 @@
                     :plan-accents="props.planAccents"
                     :highlight-plan-key="highlightPlanKey"
                     @open-plan="onOpenPlan"
-                    @create-plan="openCreate"
                     @clone-plan="onClonePlan"
                     @new-version="onNewVersionFromList"
                     @edit-draft="onEditDraftFromList"
                     @discard-draft="onDiscardDraftFromList"
                     @archive-plan="onArchivePlanFromList"
-                    @show-matrix="mode = 'matrix'"
                 />
                 <PlanBundleOverview
                     :bundles="availableBundles"
@@ -113,7 +124,7 @@
                 @save-and-exit="onReviewSaveExit"
                 @publish="onReviewPublish"
             />
-        </template>
+        </AdminBody>
 
         <PlansPageToast :message="toastMessage" />
 
@@ -157,11 +168,14 @@
             :format-change-value="formatChangeValue"
             @execute="executePublish"
         />
-    </q-page>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import type {
     FeatureCatalogEntryRow,
     PlanRow,
@@ -1238,17 +1252,6 @@ onMounted(async () => {
 
 <style scoped>
 .sa-plans {
-    min-height: calc(100vh - 56px);
-    background: #f6f7f9;
     position: relative;
 }
-.sa-plans__loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 48px;
-    color: #64748b;
-    font-size: 14px;
-}
 </style>

package/src/pages-standard/PlatformEmailPage.vue

@@ -1,11 +1,7 @@
 <template>
-    <div class="sa-pemail">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ resolvedTitle }}</h1>
-                <p class="sa-page-head__sub">{{ msg.provider.subtitle }}</p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-pemail">
+        <AdminHero :title="resolvedTitle" :subtitle="msg.provider.subtitle">
+            <template #actions>
                 <q-btn
                     v-if="rows.length === 0"
                     unelevated
@@ -15,8 +11,8 @@
                     @click="openCreate"
                 />
                 <q-btn flat icon="refresh" :label="common.reload" @click="reload" />
-            </div>
-        </header>
+            </template>
+        </AdminHero>
 
         <div class="sa-pemail__card">
             <q-table
@@ -185,19 +181,22 @@
 
         <MfaPromptDialog
             v-if="requireMfaForWrite"
-            :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, reactive, ref } from 'vue';
+import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import { formatMessage } from '../client/i18n/format.js';
@@ -279,10 +278,7 @@ const testResult = ref<PlatformEmailTestResult | null>(null);
 const testing = ref(false);
 
 // MFA loop analogous to UsersPage (promise-resolver pattern).
-const showMfa = ref(false);
-const mfaError = ref('');
-const mfaDescription = ref('');
-let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const mfa = useMfaPrompt();
 
 function emptyForm(): PlatformEmailWriteInput {
     return {
@@ -298,29 +294,6 @@ function emptyForm(): PlatformEmailWriteInput {
     };
 }
 
-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);
-    }
-}
-
 function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
@@ -381,19 +354,19 @@ async function runWrite(
         }
     }
     for (;;) {
-        const code = await promptMfa(label);
+        const code = await mfa.prompt(label);
         if (code === null) return false;
         try {
             await invoke(code);
-            showMfa.value = false;
+            mfa.show.value = false;
             return true;
         } 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 false;
         }
@@ -484,11 +457,6 @@ async function onTest(): Promise<void> {
 </script>
 
 <style scoped>
-.sa-pemail {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 .sa-pemail__card {
     background: #fff;
     border: 1px solid var(--sa-border, #e2e8f0);

package/src/pages-standard/PromoCodeDetailPage.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="sa-promo-detail">
-        <header class="sa-page-head">
-            <div>
+    <AdminPage class="sa-promo-detail">
+        <AdminHero :title="data?.promo.code ?? labels.promoCode">
+            <template #before-title>
                 <q-btn
                     flat
                     dense
@@ -10,19 +10,18 @@
                     :to="backRoute"
                     class="sa-promo-detail__back"
                 />
-                <h1 class="sa-page-head__title">{{ data?.promo.code ?? labels.promoCode }}</h1>
-                <p class="sa-page-head__sub">
-                    <template v-if="data">
-                        {{ data.promo.valueType }} · {{ data.promo.value }} ·
-                        <q-badge
-                            :color="resolveStatusColor(String(data.promo.status))"
-                            :label="String(data.promo.status)"
-                        />
-                    </template>
-                    <template v-else>—</template>
-                </p>
-            </div>
-            <div class="sa-promo-detail__head-actions">
+            </template>
+            <template #subtitle>
+                <template v-if="data">
+                    {{ data.promo.valueType }} · {{ data.promo.value }} ·
+                    <q-badge
+                        :color="resolveStatusColor(String(data.promo.status))"
+                        :label="String(data.promo.status)"
+                    />
+                </template>
+                <template v-else>—</template>
+            </template>
+            <template #actions>
                 <q-btn
                     v-if="editSubmit && data"
                     color="primary"
@@ -32,36 +31,34 @@
                     @click="openEdit"
                 />
                 <slot name="header-actions" />
-            </div>
-        </header>
-
-        <div class="sa-promo-detail__body">
-            <div v-if="loading" class="sa-promo-detail__state">
-                <q-spinner size="32px" /> {{ msg.detail.loading }}
-            </div>
-            <div v-else-if="!data" class="sa-promo-detail__state">{{ labels.empty }}</div>
+            </template>
+        </AdminHero>
 
-            <template v-else>
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ labels.config }}</div>
+        <AdminBody
+            :loading="loading"
+            :empty="!data"
+            :loading-text="msg.detail.loading"
+            :empty-text="labels.empty"
+        >
+            <template v-if="data">
+                <AdminSection :title="labels.config" class="sa-card sa-promo-detail__section">
                     <slot name="config" :promo="data.promo">
                         <pre class="sa-promo-detail__kv">{{ resolveFormatPromo(data.promo) }}</pre>
                     </slot>
-                </div>
+                </AdminSection>
 
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">{{ labels.stats }}</div>
+                <AdminSection :title="labels.stats" class="sa-card sa-promo-detail__section">
                     <slot name="stats" :stats="data.stats">
                         <pre class="sa-promo-detail__kv">{{
                             JSON.stringify(data.stats, null, 2)
                         }}</pre>
                     </slot>
-                </div>
+                </AdminSection>
 
-                <div class="sa-card sa-promo-detail__section">
-                    <div class="sa-promo-detail__section-head">
-                        {{ labels.redemptions }} ({{ data.redemptions.length }})
-                    </div>
+                <AdminSection
+                    :title="`${labels.redemptions} (${data.redemptions.length})`"
+                    class="sa-card sa-promo-detail__section"
+                >
                     <slot name="redemptions" :redemptions="data.redemptions">
                         <q-table
                             flat
@@ -72,11 +69,11 @@
                             hide-pagination
                         />
                     </slot>
-                </div>
+                </AdminSection>
 
                 <slot name="extra-sections" :data="data" />
             </template>
-        </div>
+        </AdminBody>
 
         <PromoCodeEditDialog
             v-if="editSubmit"
@@ -86,11 +83,15 @@
             :submit="editSubmit"
             @updated="onEditUpdated"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import AdminBody from '../components/admin-page/AdminBody.vue';
+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 { QTableColumn } from 'quasar';
 import PromoCodeEditDialog, {
@@ -283,10 +284,6 @@ const defaultColumns = computed<QTableColumn[]>(() => [
 </script>
 
 <style scoped>
-.sa-promo-detail {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app);
-}
 .sa-promo-detail__back {
     margin-bottom: 6px;
 }
@@ -297,7 +294,6 @@ const defaultColumns = computed<QTableColumn[]>(() => [
     margin-left: auto;
 }
 .sa-promo-detail__body {
-    padding: 12px 28px 28px;
     display: flex;
     flex-direction: column;
     gap: 14px;
@@ -324,11 +320,4 @@ const defaultColumns = computed<QTableColumn[]>(() => [
     overflow-x: auto;
     font-family: var(--sa-font-mono);
 }
-.sa-promo-detail__state {
-    padding: 24px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    color: var(--sa-muted);
-}
 </style>

package/src/pages-standard/PromoCodesPage.vue

@@ -1,11 +1,7 @@
 <template>
-    <div class="sa-promo-codes">
-        <header class="sa-page-head">
-            <div>
-                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
-                <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
-            </div>
-            <div class="sa-page-head__actions">
+    <AdminPage class="sa-promo-codes">
+        <AdminHero :title="msg.title" :subtitle="subtitle">
+            <template #actions>
                 <slot name="head-actions">
                     <q-btn
                         v-if="enableCreate"
@@ -16,8 +12,8 @@
                         @click="showCreate = true"
                     />
                 </slot>
-            </div>
-        </header>
+            </template>
+        </AdminHero>
 
         <div class="sa-stats">
             <button
@@ -108,7 +104,7 @@
             :submit="submitEdit"
             @updated="onUpdated"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script lang="ts">
@@ -137,6 +133,8 @@ export function computePlanColors(
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { useQuasar } from 'quasar';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
@@ -562,11 +560,6 @@ function formatDate(iso: string | Date | null | undefined): string | null {
 </script>
 
 <style scoped>
-.sa-promo-codes {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 .sa-promo-codes__filter {
     display: flex;
     gap: 10px;

package/src/pages-standard/SubscriptionsPage.vue

@@ -1,12 +1,10 @@
 <template>
-    <div class="sa-subscriptions">
-        <header class="sa-subscriptions__head">
-            <div>
-                <h1 class="sa-subscriptions__title">{{ msg.subscriptions.title }}</h1>
-                <p v-if="subtitle" class="sa-subscriptions__sub">{{ subtitle }}</p>
-            </div>
-            <slot name="head-actions" />
-        </header>
+    <AdminPage class="sa-subscriptions">
+        <AdminHero :title="msg.subscriptions.title" :subtitle="subtitle">
+            <template #actions>
+                <slot name="head-actions" />
+            </template>
+        </AdminHero>
 
         <div class="sa-subscriptions__body">
             <div class="sa-subscriptions__card">
@@ -21,11 +19,13 @@
                 />
             </div>
         </div>
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: subscriptions (minimal). Apps pass
@@ -129,32 +129,6 @@ function formatDate(iso: string | null | undefined): string | null {
 </script>
 
 <style scoped>
-.sa-subscriptions {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-}
-.sa-subscriptions__head {
-    padding: 20px 28px 8px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-.sa-subscriptions__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-subscriptions__sub {
-    margin: 4px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-}
-.sa-subscriptions__body {
-    padding: 12px 28px 28px;
-}
 .sa-subscriptions__card {
     background: #fff;
     border: 1px solid var(--sa-border, #e2e8f0);

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -4,7 +4,7 @@
             <div class="sa-setup-head">
                 <div class="sa-setup-badge">{{ iconText }}</div>
                 <div>
-                    <div class="sa-setup-title">{{ msg.setup.title }}</div>
+                    <h1 class="sa-setup-title">{{ msg.setup.title }}</h1>
                     <div class="sa-setup-sub">{{ subtitleText }}</div>
                 </div>
                 <LocaleSwitcher class="sa-setup-locale" />
@@ -309,6 +309,7 @@ async function submitConfirm(): Promise<void> {
     text-transform: uppercase;
 }
 .sa-setup-title {
+    margin: 0;
     font-weight: 800;
     font-size: 18px;
     color: #0f172a;