@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/PromoCodesPage.vue

@@ -1,80 +1,70 @@
 <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
+                    <button
                         v-if="enableCreate"
-                        unelevated
-                        color="primary"
-                        icon="add"
-                        :label="resolvedCreateLabel"
+                        class="sa-btn sa-btn--primary"
+                        type="button"
                         @click="showCreate = true"
-                    />
+                    >
+                        <q-icon name="add" size="16px" />
+                        <span>{{ resolvedCreateLabel }}</span>
+                    </button>
                 </slot>
-            </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="onStatusTileClick(tile.id)"
-            >
-                <span class="sa-stat__num">{{ tile.count }}</span>
-                <span class="sa-stat__label">{{ tile.label }}</span>
-                <span v-if="tile.hint" class="sa-stat__hint">{{ tile.hint }}</span>
-            </button>
-        </div>
-
-        <div class="sa-promo-codes__filter">
-            <q-input
-                v-model="filter.search"
-                outlined
-                dense
-                :label="msg.list.searchLabel"
-                clearable
-                @update:model-value="reload"
-            />
-            <q-select
-                v-model="filter.status"
-                outlined
-                dense
-                emit-value
-                map-options
-                clearable
-                :label="common.status"
-                :options="statusOptions"
-                @update:model-value="reload"
-            />
-        </div>
-
-        <div class="sa-promo-codes__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="statusColor(row.status)" :label="row.status" />
-                    </q-td>
-                </template>
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+            </template>
+        </AdminHero>
+
+        <AdminBody>
+            <AdminSection>
+                <AdminStatistics :label="msg.title">
+                    <AdminKpi
+                        v-for="tile in statTiles"
+                        :key="tile.id"
+                        :label="tile.label"
+                        :value="tile.count"
+                        :sub="tile.hint"
+                        :tone="tile.tone"
+                        :selected="statusFilter === tile.id"
+                        :action="() => onStatusTileClick(tile.id)"
+                    />
+                </AdminStatistics>
+            </AdminSection>
+
+            <AdminSection class="sa-promo-codes__card">
+                <AdminFilters class="q-mb-lg">
+                    <q-input
+                        v-model="filter.search"
+                        outlined
+                        dense
+                        :label="msg.list.searchLabel"
+                        clearable
+                    />
+                    <q-select
+                        v-model="filter.status"
+                        outlined
+                        dense
+                        emit-value
+                        map-options
+                        clearable
+                        :label="common.status"
+                        :options="statusOptions"
+                    />
+                </AdminFilters>
+
+                <AdminTable
+                    :rows="filteredRows"
+                    :columns="effectiveColumns"
+                    :loading="loading"
+                    storage-key="promo-codes"
+                >
+                    <template #body-cell-status="{ row }">
+                        <q-td>
+                            <q-badge :color="statusColor(row.status)" :label="row.status" />
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row" :reload="reload">
                             <q-btn
                                 v-for="action in visibleActions(row)"
@@ -87,10 +77,10 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <PromoCodeCreateDialog
             v-if="enableCreate && submitCreate"
@@ -108,7 +98,7 @@
             :submit="submitEdit"
             @updated="onUpdated"
         />
-    </div>
+    </AdminPage>
 </template>
 
 <script lang="ts">
@@ -116,6 +106,7 @@
 // `<script setup>` (the whole setup section is wrapped in setup()).
 // Pure helpers + constants therefore live here in the regular `<script>` block.
 
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import type { PromoCodePlanOption } from '../components/dialogs/types.js';
 
 const PLAN_COLOR_PALETTE = ['#0ea5e9', '#10b981', '#f59e0b', '#7c3aed', '#dc2626', '#64748b'];
@@ -137,6 +128,13 @@ export function computePlanColors(
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
+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 AdminSection from '../components/admin-page/AdminSection.vue';
+import AdminKpi from '../components/admin-page/AdminKpi.vue';
+import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminStatistics from '../components/admin-page/AdminStatistics.vue';
 import { useQuasar } from 'quasar';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
@@ -253,11 +251,25 @@ function classifyRow(row: PromoRow): Exclude<StatusFilter, 'all'> | null {
     return null;
 }
 
+// The table narrows; the tiles above it deliberately do not — see statTiles.
 const filteredRows = computed(() => {
-    if (statusFilter.value === 'all') return rows.value;
-    return rows.value.filter((r) => classifyRow(r) === statusFilter.value);
+    // `clearable` emits null, not '' — see Quasar's use-field clearValue().
+    const q = (filter.search ?? '').trim().toLowerCase();
+    const status = filter.status?.toUpperCase() ?? null;
+
+    return rows.value.filter((row) => {
+        if (statusFilter.value !== 'all' && classifyRow(row) !== statusFilter.value) return false;
+        if (status && String(row.status ?? '').toUpperCase() !== status) return false;
+        if (!q) return true;
+        return [row.code, row.description, row.campaignTag]
+            .filter((v): v is string => typeof v === 'string')
+            .some((v) => v.toLowerCase().includes(q));
+    });
 });
 
+// Absolute counts over everything the tenant has, deliberately independent of
+// the filter below: these tiles are the status filter, so counting the filtered
+// set would drop every unselected tile to zero the moment one is picked.
 const statTiles = computed<
     Array<{
         id: StatusFilter;
@@ -293,22 +305,8 @@ const statTiles = computed<
     ];
 });
 
-// Tile click: set the filter AND, if a server status match exists, pass it
-// through to the search so `loadPromos` can pre-filter server-side if needed.
 function onStatusTileClick(id: StatusFilter): void {
     statusFilter.value = id;
-    const serverStatus =
-        id === 'active'
-            ? 'ACTIVE'
-            : id === 'paused'
-              ? 'PAUSED'
-              : id === 'expired'
-                ? 'EXPIRED'
-                : null;
-    if (serverStatus !== filter.status) {
-        filter.status = serverStatus;
-        reload();
-    }
 }
 
 const baseColumns = computed(() => [
@@ -396,14 +394,6 @@ const mergedActions = computed<readonly PromoRowAction[]>(() => [
 
 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;
 });
 
@@ -421,10 +411,9 @@ function statusColor(status: string): string {
 async function reload() {
     loading.value = true;
     try {
-        rows.value = await props.loadPromos({
-            search: filter.search || undefined,
-            status: filter.status || undefined,
-        });
+        // Unfiltered on purpose: the tiles count the tenant's full set, and
+        // the table narrows locally, so filtering costs no round trip.
+        rows.value = await props.loadPromos({});
     } catch (err) {
         rows.value = [];
         console.warn('[PromoCodesPage] loadPromos failed:', err);
@@ -561,26 +550,4 @@ 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;
-    margin-bottom: 12px;
-    flex-wrap: wrap;
-}
-.sa-promo-codes__filter > * {
-    flex: 1;
-    min-width: 200px;
-}
-.sa-promo-codes__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>

package/src/pages-standard/SubscriptionsPage.vue

@@ -1,31 +1,31 @@
 <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">
-                <q-table
-                    flat
+        <AdminBody>
+            <AdminSection class="sa-subscriptions__body">
+                <AdminTable
                     :rows="rows"
                     :columns="effectiveColumns"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
                     :loading="loading"
-                    hide-pagination
+                    storage-key="subscriptions"
                 />
-            </div>
-        </div>
-    </div>
+            </AdminSection>
+        </AdminBody>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 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 { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: subscriptions (minimal). Apps pass
@@ -128,37 +128,4 @@ 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);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -24,7 +24,7 @@
             <h1 class="sa-login-title">{{ msg.login.signIn }}</h1>
             <p v-if="subtitle" class="sa-login-subtitle">{{ subtitle }}</p>
 
-            <q-form @submit.prevent="handleSubmit" class="sa-login-form">
+            <q-form class="sa-login-form" @submit.prevent="handleSubmit">
                 <q-input
                     v-model="form.email"
                     :label="msg.emailLabel"
@@ -111,7 +111,7 @@ interface Props {
     subtitle?: string;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const router = useRouter();
 const msg = useSaMessages('shell');
@@ -199,7 +199,7 @@ async function handleSubmit(): Promise<void> {
        on top of the centered card on short viewports. */
     margin-left: auto;
     align-self: flex-start;
-    color: var(--sa-login-tag-color, #475569);
+    color: var(--sa-login-tag-color, var(--sa-muted-dark));
 }
 .sa-login-wrap {
     min-height: 100vh;
@@ -208,7 +208,7 @@ async function handleSubmit(): 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-login-card {
     width: 420px;
@@ -234,7 +234,7 @@ async function handleSubmit(): Promise<void> {
     overflow: hidden;
 }
 .sa-login-logo--text {
-    background: var(--sa-login-logo-bg, linear-gradient(135deg, #475569, #1e293b));
+    background: var(--sa-login-logo-bg, linear-gradient(135deg, var(--sa-muted-dark), #1e293b));
     color: var(--sa-login-logo-color, #fff);
     font-weight: 800;
     font-size: 18px;
@@ -248,12 +248,12 @@ async function handleSubmit(): Promise<void> {
 .sa-login-brand__name {
     font-weight: 800;
     font-size: 16px;
-    color: #0f172a;
+    color: var(--sa-heading);
     line-height: 1.1;
 }
 .sa-login-brand__tag {
     font-size: 12px;
-    color: var(--sa-login-tag-color, #475569);
+    color: var(--sa-login-tag-color, var(--sa-muted-dark));
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
@@ -261,12 +261,12 @@ async function handleSubmit(): Promise<void> {
 .sa-login-title {
     font-size: 22px;
     font-weight: 800;
-    color: #0f172a;
+    color: var(--sa-heading);
     margin: 0 0 6px;
 }
 .sa-login-subtitle {
     font-size: 13px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     margin: 0 0 20px;
     line-height: 1.5;
 }
@@ -290,13 +290,13 @@ async function handleSubmit(): Promise<void> {
 .sa-login-hint {
     margin-top: 18px;
     padding: 10px 12px;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     border-radius: 8px;
     font-size: 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .sa-login-hint code {
-    background: #e2e8f0;
+    background: var(--sa-border);
     padding: 1px 5px;
     border-radius: 4px;
 }

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" />
@@ -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,30 +305,31 @@ 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;
     text-transform: uppercase;
 }
 .sa-setup-title {
+    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;
 }
@@ -353,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;
@@ -372,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;
 }
@@ -401,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;