@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/UsersPage.vue

@@ -1,85 +1,66 @@
 <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">
-                <q-btn
-                    unelevated
-                    color="primary"
-                    icon="search"
-                    :label="common.search"
-                    @click="reload"
-                />
-            </div>
-        </header>
-
-        <div class="sa-stats">
-            <button
-                v-for="tile in statTiles"
-                :key="tile.id"
-                class="sa-stat"
-                :class="[
-                    tile.tone ? `sa-stat--${tile.tone}` : null,
-                    statusFilter === tile.id ? 'sa-stat--active' : null,
-                ]"
-                @click="statusFilter = tile.id"
-            >
-                <span class="sa-stat__num">{{ tile.count }}</span>
-                <span class="sa-stat__label">{{ tile.label }}</span>
-            </button>
-        </div>
-
-        <div class="sa-users__filter">
-            <q-input
-                v-model="filter.q"
-                outlined
-                dense
-                :label="msg.filterQuery"
-                clearable
-                @keyup.enter="reload"
-                @clear="reload"
-            />
-            <q-input
-                v-model="filter.tenant"
-                outlined
-                dense
-                :label="msg.filterTenant"
-                clearable
-                @keyup.enter="reload"
-                @clear="reload"
-            />
-            <slot name="filters-extra" />
-        </div>
-
-        <div class="sa-users__card">
-            <q-table
-                flat
-                :rows="filteredRows"
-                :columns="effectiveColumns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
-                :loading="loading"
-                hide-pagination
-            >
-                <template #body-cell-status="{ row }">
-                    <q-td>
-                        <q-badge
-                            :color="row.isActive ? 'positive' : 'grey'"
-                            :label="row.isActive ? msg.statusActive : msg.statusDeactivated"
-                        />
-                        <q-badge
-                            v-if="row.invitationStatus === 'PENDING'"
-                            color="amber-7"
-                            :label="msg.badgePending"
-                            class="q-ml-xs"
-                        />
-                    </q-td>
-                </template>
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+    <AdminPage class="sa-users">
+        <AdminHero :title="resolvedTitle" :subtitle="subtitle" />
+
+        <AdminBody>
+            <AdminSection>
+                <AdminStatistics :label="resolvedTitle">
+                    <AdminKpi
+                        v-for="tile in statTiles"
+                        :key="tile.id"
+                        :label="tile.label"
+                        :value="tile.count"
+                        :tone="tile.tone"
+                        :selected="statusFilter === tile.id"
+                        :action="() => (statusFilter = tile.id)"
+                    />
+                </AdminStatistics>
+            </AdminSection>
+
+            <AdminSection :title="common.results" class="sa-users__card">
+                <AdminFilters class="q-mb-lg">
+                    <q-input
+                        v-model="filter.q"
+                        outlined
+                        dense
+                        :label="msg.filterQuery"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <q-input
+                        v-model="filter.tenant"
+                        outlined
+                        dense
+                        :label="msg.filterTenant"
+                        clearable
+                        debounce="250"
+                        @update:model-value="reload"
+                    />
+                    <slot name="filters-extra" />
+                </AdminFilters>
+
+                <AdminTable
+                    :rows="filteredRows"
+                    :columns="effectiveColumns"
+                    :loading="loading"
+                    storage-key="users"
+                >
+                    <template #body-cell-status="{ row }">
+                        <q-td>
+                            <q-badge
+                                :color="row.isActive ? 'positive' : 'grey'"
+                                :label="row.isActive ? msg.statusActive : msg.statusDeactivated"
+                            />
+                            <q-badge
+                                v-if="row.invitationStatus === 'PENDING'"
+                                color="amber-7"
+                                :label="msg.badgePending"
+                                class="q-ml-xs"
+                            />
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row">
                             <q-btn
                                 v-for="action in visibleActions(row)"
@@ -92,27 +73,36 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <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 AdminTable from '../components/admin-page/AdminTable.vue';
 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 AdminBody from '../components/admin-page/AdminBody.vue';
+import AdminFilters from '../components/admin-page/AdminFilters.vue';
+import AdminHero from '../components/admin-page/AdminHero.vue';
+import AdminKpi from '../components/admin-page/AdminKpi.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminStatistics from '../components/admin-page/AdminStatistics.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 +181,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';
@@ -346,14 +309,6 @@ const mergedActions = computed<readonly UserRowAction[]>(() => [
 
 const effectiveColumns = computed(() => {
     const cols = [...baseColumns.value];
-    if (mergedActions.value.length > 0) {
-        cols.push({
-            name: 'actions',
-            label: '',
-            field: 'id' as never,
-            align: 'right' as 'left',
-        });
-    }
     return cols;
 });
 
@@ -407,20 +362,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;
         }
@@ -496,27 +451,4 @@ 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;
-    margin-bottom: 12px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-.sa-users__filter > * {
-    flex: 1;
-    min-width: 200px;
-}
-.sa-users__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>

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

@@ -12,13 +12,16 @@
                     <div class="sa-bd-card__titlerow">
                         <span class="sa-bd-card__key">{{ bundle.bundleKey }}</span>
                         <span
-                            class="sa-chip"
-                            :class="`sa-chip--${statusClass(bundle)}`"
+                            class="sa-bundle-chip"
+                            :class="`sa-bundle-chip--${statusClass(bundle)}`"
                             :title="statusTooltip(bundle)"
                         >
                             {{ statusLabel(bundle) }}
                         </span>
-                        <span v-if="i18nLocaleCount(bundle) > 0" class="sa-chip sa-chip--info">
+                        <span
+                            v-if="i18nLocaleCount(bundle) > 0"
+                            class="sa-bundle-chip sa-bundle-chip--info"
+                        >
                             {{ translationCount(bundle) }}
                         </span>
                     </div>
@@ -93,34 +96,34 @@ function translationCount(bundle: BundleRow): string {
 
 <style scoped>
 /* Status chips co-located with the markup (analogous to PlanList .pl-chip*).
-   Deliberately scoped: the identically named global .sa-chip rule in
-   DiscoveryPage.vue would otherwise override .sa-chip--live (same specificity,
+   Deliberately scoped: the identically named global .sa-bundle-chip rule in
+   DiscoveryPage.vue would otherwise override .sa-bundle-chip--live (same specificity,
    later source order) and render the "Live" tag grey instead of green. */
-.sa-chip {
+.sa-bundle-chip {
     font-size: 10px;
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 6px;
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
 }
-.sa-chip--info {
-    background: #eff6ff;
-    color: #1d4ed8;
+.sa-bundle-chip--info {
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
 }
-.sa-chip--live {
+.sa-bundle-chip--live {
     background: #dcfce7;
     color: #166534;
 }
-.sa-chip--draft {
+.sa-bundle-chip--draft {
     background: #fef3c7;
     color: #92400e;
 }
-.sa-chip--supersed {
-    background: #e2e8f0;
-    color: #64748b;
+.sa-bundle-chip--supersed {
+    background: var(--sa-border);
+    color: var(--sa-muted);
 }
-.sa-chip--scheduled {
+.sa-bundle-chip--scheduled {
     background: #fef3c7;
     color: #92400e;
 }

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

@@ -1,31 +1,22 @@
 <template>
-    <div class="sa-bundles__kpis">
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.total }}</div>
-            <div class="sa-bundles__kpi-value">{{ bundlesTotal }}</div>
-            <div class="sa-bundles__kpi-sub">{{ totalSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.scheduled }}</div>
-            <div class="sa-bundles__kpi-value">{{ totalScheduledVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ msg.kpis.scheduledSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.drafts }}</div>
-            <div class="sa-bundles__kpi-value">{{ totalDraftVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ draftsSub }}</div>
-        </div>
-        <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">{{ msg.kpis.translated }}</div>
-            <div class="sa-bundles__kpi-value">{{ translatedCount }}</div>
-            <div class="sa-bundles__kpi-sub">{{ translatedSub }}</div>
-        </div>
-    </div>
+    <AdminStatistics :columns="4">
+        <AdminKpi :label="msg.kpis.total" :value="bundlesTotal" :sub="totalSub" />
+        <AdminKpi
+            :label="msg.kpis.scheduled"
+            :value="totalScheduledVersions"
+            :sub="msg.kpis.scheduledSub"
+        />
+        <AdminKpi :label="msg.kpis.drafts" :value="totalDraftVersions" :sub="draftsSub" />
+        <AdminKpi :label="msg.kpis.translated" :value="translatedCount" :sub="translatedSub" />
+    </AdminStatistics>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import AdminKpi from '../../components/admin-page/AdminKpi.vue';
+import AdminStatistics from '../../components/admin-page/AdminStatistics.vue';
+
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 

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

@@ -0,0 +1,63 @@
+<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>
+        <button class="sa-btn sa-btn--primary" type="button" @click="emit('create')">
+            <q-icon name="add" size="16px" />
+            <span>{{ msg.header.newBundle }}</span>
+        </button>
+        <AdminRefreshBtn :loading="loading" @refresh="emit('refresh')" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import AdminRefreshBtn from '../../components/admin-page/AdminRefreshBtn.vue';
+
+// 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>

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -171,13 +171,13 @@ function copyFromDefault(locale: string): void {
     gap: 12px;
 }
 .sa-trans-lang {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     background: #fff;
     padding: 10px 12px;
 }
 .sa-trans-lang--source {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
     border-color: #cbd5e1;
 }
 .sa-trans-lang__head {
@@ -189,7 +189,7 @@ function copyFromDefault(locale: string): void {
 .sa-trans-lang__code {
     font-size: 10px;
     font-weight: 700;
-    background: #0f172a;
+    background: var(--sa-heading);
     color: #fff;
     padding: 2px 6px;
     border-radius: 5px;
@@ -205,13 +205,13 @@ function copyFromDefault(locale: string): void {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #475569;
-    background: #e2e8f0;
+    color: var(--sa-muted-dark);
+    background: var(--sa-border);
     padding: 2px 6px;
     border-radius: 5px;
 }
 .sa-trans-lang__copy {
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-trans-fields {
     display: flex;
@@ -228,12 +228,12 @@ function copyFromDefault(locale: string): void {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-trans-locked {
     font-size: 13px;
     color: #334155;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border: 1px dashed #cbd5e1;
     border-radius: 6px;
     padding: 6px 10px;
@@ -243,7 +243,7 @@ function copyFromDefault(locale: string): void {
 }
 .sa-trans-locked__hint {
     font-size: 10px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     text-transform: uppercase;
 }
 .sa-trans__empty {
@@ -251,7 +251,7 @@ function copyFromDefault(locale: string): void {
     padding: 16px;
     text-align: center;
     font-size: 12px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     border: 1px dashed #cbd5e1;
     border-radius: 10px;
 }

package/src/pages-standard/discovery-page/DiscoveryCapList.vue

@@ -91,7 +91,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 10px;
     align-items: flex-start;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 8px 10px;
 }
@@ -142,8 +142,8 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     color: #b91c1c;
 }
 .sa-caps-row__flag--gone {
-    background: #e2e8f0;
-    color: #64748b;
+    background: var(--sa-border);
+    color: var(--sa-muted);
 }
 .sa-caps-row.gone {
     opacity: 0.6;
@@ -153,7 +153,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 12px;
     flex-wrap: wrap;
     font-size: 11px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     margin-top: 1px;
 }
 .sa-caps-row__meta code {
@@ -165,7 +165,7 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     gap: 6px;
     font-size: 11px;
     color: #b45309;
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border: 1px dashed #fde68a;
     border-radius: 8px;
     padding: 10px 12px;