@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/pages-standard/PlatformEmailPage.vue

@@ -2,40 +2,40 @@
     <AdminPage class="sa-pemail">
         <AdminHero :title="resolvedTitle" :subtitle="msg.provider.subtitle">
             <template #actions>
-                <q-btn
+                <button
                     v-if="rows.length === 0"
-                    unelevated
-                    color="primary"
-                    icon="add"
-                    :label="msg.sender"
+                    class="sa-btn sa-btn--primary"
+                    type="button"
                     @click="openCreate"
-                />
-                <q-btn flat icon="refresh" :label="common.reload" @click="reload" />
+                >
+                    <q-icon name="add" size="16px" />
+                    <span>{{ msg.sender }}</span>
+                </button>
+                <AdminRefreshBtn :loading="loading" @refresh="reload" />
             </template>
         </AdminHero>
 
-        <div class="sa-pemail__card">
-            <q-table
-                flat
-                :rows="rows"
-                :columns="columns"
-                row-key="id"
-                :loading="loading"
-                :pagination="{ rowsPerPage: 0 }"
-                hide-pagination
-            >
-                <template #body-cell-active="{ row }">
-                    <q-td>
-                        <q-badge
-                            :color="row.active ? 'positive' : 'grey'"
-                            :label="
-                                row.active ? msg.provider.statusActive : msg.provider.statusInactive
-                            "
-                        />
-                    </q-td>
-                </template>
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+        <AdminBody>
+            <AdminSection class="sa-pemail__card">
+                <AdminTable
+                    :rows="rows"
+                    :columns="columns"
+                    :loading="loading"
+                    storage-key="platform-email"
+                >
+                    <template #body-cell-active="{ row }">
+                        <q-td>
+                            <q-badge
+                                :color="row.active ? 'positive' : 'grey'"
+                                :label="
+                                    row.active
+                                        ? msg.provider.statusActive
+                                        : msg.provider.statusInactive
+                                "
+                            />
+                        </q-td>
+                    </template>
+                    <template #row-actions="{ row }">
                         <q-btn
                             flat
                             dense
@@ -60,10 +60,10 @@
                             :title="common.delete"
                             @click="onDelete(row)"
                         />
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <q-dialog v-model="showForm">
             <q-card class="sa-pemail__dialog">
@@ -192,10 +192,14 @@
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, reactive, ref } from 'vue';
 import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
+import AdminRefreshBtn from '../components/admin-page/AdminRefreshBtn.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 { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
@@ -264,7 +268,6 @@ const columns = computed(() => [
         align: 'left' as const,
     },
     { name: 'active', label: common.value.status, field: 'active', align: 'left' as const },
-    { name: 'actions', label: '', field: 'id' as never, align: 'right' as 'left' },
 ]);
 
 const showForm = ref(false);
@@ -457,12 +460,6 @@ async function onTest(): Promise<void> {
 </script>
 
 <style scoped>
-.sa-pemail__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
 .sa-pemail__dialog {
     min-width: 420px;
 }

package/src/pages-standard/PromoCodeDetailPage.vue

@@ -22,14 +22,15 @@
                 <template v-else>—</template>
             </template>
             <template #actions>
-                <q-btn
+                <button
                     v-if="editSubmit && data"
-                    color="primary"
-                    unelevated
-                    icon="edit"
-                    :label="labels.edit"
+                    class="sa-btn sa-btn--primary"
+                    type="button"
                     @click="openEdit"
-                />
+                >
+                    <q-icon name="edit" size="16px" />
+                    <span>{{ labels.edit }}</span>
+                </button>
                 <slot name="header-actions" />
             </template>
         </AdminHero>
@@ -41,13 +42,13 @@
             :empty-text="labels.empty"
         >
             <template v-if="data">
-                <AdminSection :title="labels.config" class="sa-card sa-promo-detail__section">
+                <AdminSection :title="labels.config">
                     <slot name="config" :promo="data.promo">
                         <pre class="sa-promo-detail__kv">{{ resolveFormatPromo(data.promo) }}</pre>
                     </slot>
                 </AdminSection>
 
-                <AdminSection :title="labels.stats" class="sa-card sa-promo-detail__section">
+                <AdminSection :title="labels.stats">
                     <slot name="stats" :stats="data.stats">
                         <pre class="sa-promo-detail__kv">{{
                             JSON.stringify(data.stats, null, 2)
@@ -55,18 +56,12 @@
                     </slot>
                 </AdminSection>
 
-                <AdminSection
-                    :title="`${labels.redemptions} (${data.redemptions.length})`"
-                    class="sa-card sa-promo-detail__section"
-                >
+                <AdminSection :title="`${labels.redemptions} (${data.redemptions.length})`">
                     <slot name="redemptions" :redemptions="data.redemptions">
-                        <q-table
-                            flat
-                            :rows="data.redemptions"
+                        <AdminTable
+                            :rows="redemptionRows"
                             :columns="redemptionsColumns ?? defaultColumns"
-                            row-key="id"
-                            :pagination="{ rowsPerPage: 0 }"
-                            hide-pagination
+                            storage-key="promo-code-redemptions"
                         />
                     </slot>
                 </AdminSection>
@@ -87,6 +82,7 @@
 </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';
@@ -281,6 +277,8 @@ const defaultColumns = computed<QTableColumn[]>(() => [
         align: 'left',
     },
 ]);
+
+const redemptionRows = computed(() => data.value?.redemptions ?? []);
 </script>
 
 <style scoped>
@@ -298,18 +296,6 @@ const defaultColumns = computed<QTableColumn[]>(() => [
     flex-direction: column;
     gap: 14px;
 }
-.sa-promo-detail__section {
-    padding: 16px 18px;
-}
-.sa-promo-detail__section-head {
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted);
-    text-transform: uppercase;
-    margin-bottom: 10px;
-    font-family: var(--sa-font-head);
-}
 .sa-promo-detail__kv {
     background: #fafbfc;
     border: 1px solid var(--sa-border);

package/src/pages-standard/PromoCodesPage.vue

@@ -3,74 +3,68 @@
         <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>
             </template>
         </AdminHero>
 
-        <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>
+        <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)"
@@ -83,10 +77,10 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <PromoCodeCreateDialog
             v-if="enableCreate && submitCreate"
@@ -112,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'];
@@ -133,8 +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';
@@ -251,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;
@@ -291,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(() => [
@@ -394,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;
 });
 
@@ -419,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);
@@ -559,21 +550,4 @@ function formatDate(iso: string | Date | null | undefined): string | null {
 }
 </script>
 
-<style scoped>
-.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

@@ -6,25 +6,25 @@
             </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>
+            </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';
 
@@ -128,11 +128,4 @@ function formatDate(iso: string | null | undefined): string | null {
 }
 </script>
 
-<style scoped>
-.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;
 }