@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -15,7 +15,7 @@
             </q-banner>
 
             <!-- Step 1: create SuperAdmin -->
-            <q-form v-if="step === 'form'" @submit.prevent="submitCreate" class="sa-setup-form">
+            <q-form v-if="step === 'form'" class="sa-setup-form" @submit.prevent="submitCreate">
                 <p class="sa-setup-hint">
                     {{ msg.setup.tokenHintBefore }}
                     <code>SETUP_TOKEN</code>
@@ -104,7 +104,7 @@
                     <code class="sa-setup-uri__value">{{ result.otpauthUri }}</code>
                 </details>
 
-                <q-form @submit.prevent="submitConfirm" class="sa-setup-form q-mt-md">
+                <q-form class="sa-setup-form q-mt-md" @submit.prevent="submitConfirm">
                     <q-input
                         v-model="mfaCode"
                         :label="msg.setup.codeLabel"
@@ -216,9 +216,12 @@ async function postJson<T>(path: string, body: unknown): Promise<T> {
         return await httpPostJson<T>(http, `${endpoints.apiBase}${path}`, body);
     } catch (err) {
         if (err instanceof HttpJsonError) {
+            // The message is translated for the user; `cause` keeps the status
+            // and the machine-readable code reachable for anything upstream.
             throw new Error(
                 (err.code && errorByCode.value[err.code]) ||
                     formatMessage(msg.value.setup.errorHttp, { status: err.status }),
+                { cause: err },
             );
         }
         throw err;
@@ -274,7 +277,7 @@ async function submitConfirm(): Promise<void> {
     align-items: center;
     justify-content: center;
     padding: 24px;
-    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
+    background: linear-gradient(180deg, var(--sa-heading) 0%, #1e293b 100%);
 }
 .sa-setup-card {
     width: 460px;
@@ -293,7 +296,7 @@ async function submitConfirm(): Promise<void> {
 .sa-setup-locale {
     margin-left: auto;
     align-self: flex-start;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-setup-badge {
     width: 44px;
@@ -302,7 +305,7 @@ async function submitConfirm(): Promise<void> {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, #475569, #1e293b);
+    background: linear-gradient(135deg, var(--sa-muted-dark), #1e293b);
     color: #fff;
     font-weight: 800;
     font-size: 18px;
@@ -312,21 +315,21 @@ async function submitConfirm(): Promise<void> {
     margin: 0;
     font-weight: 800;
     font-size: 18px;
-    color: #0f172a;
+    color: var(--sa-heading);
     line-height: 1.1;
 }
 .sa-setup-sub {
     font-size: 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-setup-hint {
     font-size: 13px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     line-height: 1.5;
     margin: 0 0 16px;
 }
 .sa-setup-hint code {
-    background: #e2e8f0;
+    background: var(--sa-border);
     padding: 1px 5px;
     border-radius: 4px;
 }
@@ -354,17 +357,17 @@ async function submitConfirm(): Promise<void> {
     margin-bottom: 12px;
 }
 .sa-setup-qr img {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 8px;
     background: #fff;
 }
 .sa-setup-qr__hint {
     font-size: 12px;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .sa-setup-secret {
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border-radius: 8px;
     padding: 10px 12px;
     margin-bottom: 10px;
@@ -373,27 +376,27 @@ async function submitConfirm(): Promise<void> {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: #64748b;
+    color: var(--sa-muted);
     margin-bottom: 4px;
 }
 .sa-setup-secret__value {
     font-size: 15px;
     font-weight: 700;
-    color: #0f172a;
+    color: var(--sa-heading);
     word-break: break-all;
     letter-spacing: 0.04em;
 }
 .sa-setup-uri {
     margin: 4px 0 4px;
     font-size: 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-setup-uri__value {
     display: block;
     margin-top: 6px;
     word-break: break-all;
     color: #334155;
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
     padding: 6px 8px;
     border-radius: 6px;
 }
@@ -402,7 +405,7 @@ async function submitConfirm(): Promise<void> {
     width: 100%;
     background: none;
     border: none;
-    color: #64748b;
+    color: var(--sa-muted);
     font-size: 12px;
     cursor: pointer;
     text-decoration: underline;

package/src/pages-standard/TenantDetailPage.vue

@@ -1,20 +1,32 @@
 <template>
     <AdminPage class="sa-tenant-detail">
         <AdminHero :title="data?.name ?? labels.title">
-            <template #before-title>
-                <q-btn
-                    flat
-                    dense
-                    icon="arrow_back"
-                    :label="labels.back"
-                    :to="backRoute"
-                    class="sa-tenant-detail__back"
-                />
-            </template>
             <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>
@@ -22,29 +34,15 @@
         <AdminBody :loading="loading" :empty="!data">
             <template v-if="data">
                 <!-- Master data -->
-                <AdminSection
-                    :title="labels.masterData"
-                    :subtitle="stammdatenSub"
-                    class="sa-card q-mb-md"
-                >
+                <AdminSection :title="labels.masterData" :subtitle="stammdatenSub" class="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">
                         <TenantMasterData
                             :data="data"
                             :labels="labels"
-                            :format-date="formatDate"
+                            :format-date="formatDateResolved"
                             :yes="common.yes"
                             :no="common.no"
                         >
@@ -57,17 +55,13 @@
                 <AdminSection
                     v-if="verbrauchFields.length > 0"
                     :title="labels.usage"
-                    class="sa-card q-mb-md"
+                    class="q-mb-md"
                 >
                     <TenantUsage :data="data" :fields="verbrauchFields" />
                 </AdminSection>
 
                 <!-- Users -->
-                <AdminSection
-                    v-if="showUsers && data.users"
-                    :title="labels.users"
-                    class="sa-card q-mb-md"
-                >
+                <AdminSection v-if="showUsers && data.users" :title="labels.users" class="q-mb-md">
                     <TenantUsers :users="data.users" :columns="userColumns ?? defaultUserColumns" />
                 </AdminSection>
 
@@ -101,7 +95,7 @@ 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 { 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';
@@ -189,7 +183,7 @@ 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);
 }
 
@@ -272,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[]>(() => [
@@ -316,9 +323,6 @@ const defaultUserColumns = computed<QTableColumn[]>(() => [
 </script>
 
 <style scoped>
-.sa-tenant-detail__back {
-    margin-bottom: 6px;
-}
 .sa-tenant-detail__card-head {
     display: flex;
     justify-content: space-between;