@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/pages-standard/BundlesPage.vue

@@ -13,115 +13,123 @@
             </template>
         </AdminHero>
 
-        <q-banner v-if="error" class="sa-bundles__error" rounded>
-            <template #avatar><q-icon name="warning" color="negative" /></template>
-            {{ loadErrorText }}
-        </q-banner>
-
-        <BundlesKpis
-            :bundles-total="bundles.length"
-            :live-count="liveCount"
-            :scheduled-bundles-count="scheduledBundlesCount"
-            :total-scheduled-versions="totalScheduledVersions"
-            :total-draft-versions="totalDraftVersions"
-            :draft-bundles-count="draftBundlesCount"
-            :translated-count="translatedCount"
-            :locales-count="locales.length"
-        />
-
-        <BundlesFilterBar
-            v-model:query="query"
-            v-model:status-filter="statusFilter"
-            :status-filter-options="statusFilterOptions"
-        />
-
-        <!-- Inline creation (collapsible panel, replaces the former dialog modal) -->
-        <BundleCreatePanel
-            v-if="createOpen"
-            :project-key="projectKey"
-            :available-features="snapshot?.features ?? []"
-            :available-quotas="snapshot?.quotas ?? []"
-            :plans="plans"
-            :live-plan-versions="livePlanVersions"
-            :feature-registry="featureRegistryResolved"
-            :quota-registry="quotaRegistryResolved"
-            :existing-bundle-keys="existingBundleKeys"
-            :create="create"
-            :create-draft="createDraft"
-            @cancel="createOpen = false"
-            @created="onWizardCreated"
-        />
+        <AdminBody>
+            <q-banner v-if="error" class="sa-bundles__error" rounded>
+                <template #avatar><q-icon name="warning" color="negative" /></template>
+                {{ loadErrorText }}
+            </q-banner>
+
+            <AdminSection>
+                <BundlesKpis
+                    :bundles-total="bundles.length"
+                    :live-count="liveCount"
+                    :scheduled-bundles-count="scheduledBundlesCount"
+                    :total-scheduled-versions="totalScheduledVersions"
+                    :total-draft-versions="totalDraftVersions"
+                    :draft-bundles-count="draftBundlesCount"
+                    :translated-count="translatedCount"
+                    :locales-count="locales.length"
+                />
+            </AdminSection>
+
+            <AdminSection class="sa-bundles__filter">
+                <BundlesFilterBar
+                    v-model:query="query"
+                    v-model:status-filter="statusFilter"
+                    class="q-mb-md"
+                    :status-filter-options="statusFilterOptions"
+                />
 
-        <q-banner
-            v-if="bundles.length === 0 && !loading && !error"
-            class="sa-bundles__empty"
-            rounded
-        >
-            <template #avatar><q-icon name="info" color="info" /></template>
-            {{ msg.page.emptyBefore }} <strong>{{ msg.header.newBundle }}</strong>
-            {{ msg.page.emptyAfter }}
-        </q-banner>
-
-        <BundleAccordionList
-            :filtered-bundles="filteredBundles"
-            :bundles-total="bundles.length"
-            :open-key="openKey"
-            :aggregate-status-of="aggregateStatusOf"
-            :i18n-locale-count="i18nLocaleCount"
-            @toggle="toggle"
-        >
-            <template #detail="{ bundle }">
-                <BundleDetailPanel
-                    :bundle="bundle"
-                    v-model:edit-form="editForm"
-                    :i18n-draft="i18nDraft"
-                    :translatable-locales="translatableLocales"
-                    :edit-submitting="editSubmitting"
-                    :detail-versions="detailVersions"
-                    :selected-version-id="selectedVersionIdByBundle[bundle.id] ?? null"
-                    :selected-version="selectedVersion"
+                <!-- Inline creation (collapsible panel, replaces the former dialog modal) -->
+                <BundleCreatePanel
+                    v-if="createOpen"
+                    class="q-mb-sm"
+                    :project-key="projectKey"
                     :available-features="snapshot?.features ?? []"
                     :available-quotas="snapshot?.quotas ?? []"
                     :plans="plans"
                     :live-plan-versions="livePlanVersions"
                     :feature-registry="featureRegistryResolved"
                     :quota-registry="quotaRegistryResolved"
-                    :inline-editor-saving="inlineEditorSaving"
-                    :inline-editor-error="inlineEditorError"
-                    @set-i18n="setI18n"
-                    @submit-edit="submitEdit"
-                    @select-version="onSelectVersion"
-                    @add-version="onAddVersion"
-                    @inline-save="onInlineSave"
-                    @discard-version="onDiscardVersion"
-                    @publish-version="openPublish"
-                    @delete-bundle="confirmDelete"
+                    :existing-bundle-keys="existingBundleKeys"
+                    :create="create"
+                    :create-draft="createDraft"
+                    @cancel="createOpen = false"
+                    @created="onWizardCreated"
                 />
-            </template>
-        </BundleAccordionList>
-
-        <!-- Strict mode warnings after the last mutation -->
-        <q-banner
-            v-if="lastWarnings.length > 0"
-            class="sa-bundles__warnings-banner"
-            inline-actions
-            rounded
-        >
-            <template #avatar><q-icon name="warning" color="warning" /></template>
-            <strong>{{ strictWarningsText }}</strong>
-            <ul class="sa-bundles__warnings-list">
-                <li v-for="(w, i) in lastWarnings" :key="i">
-                    <code>{{ w.code }}</code>
-                    <template v-if="w.value">
-                        · <code>{{ w.value }}</code></template
-                    >
-                    — {{ w.message }}
-                </li>
-            </ul>
-            <template #action>
-                <q-btn flat dense :label="common.close" @click="lastWarnings = []" />
-            </template>
-        </q-banner>
+
+                <q-banner
+                    v-if="bundles.length === 0 && !loading && !error"
+                    class="sa-bundles__empty"
+                    rounded
+                >
+                    <template #avatar><q-icon name="info" color="info" /></template>
+                    {{ msg.page.emptyBefore }} <strong>{{ msg.header.newBundle }}</strong>
+                    {{ msg.page.emptyAfter }}
+                </q-banner>
+
+                <BundleAccordionList
+                    :filtered-bundles="filteredBundles"
+                    :bundles-total="bundles.length"
+                    :open-key="openKey"
+                    :aggregate-status-of="aggregateStatusOf"
+                    :i18n-locale-count="i18nLocaleCount"
+                    @toggle="toggle"
+                >
+                    <template #detail="{ bundle }">
+                        <BundleDetailPanel
+                            v-model:edit-form="editForm"
+                            :bundle="bundle"
+                            :i18n-draft="i18nDraft"
+                            :translatable-locales="translatableLocales"
+                            :edit-submitting="editSubmitting"
+                            :detail-versions="detailVersions"
+                            :selected-version-id="selectedVersionIdByBundle[bundle.id] ?? null"
+                            :selected-version="selectedVersion"
+                            :available-features="snapshot?.features ?? []"
+                            :available-quotas="snapshot?.quotas ?? []"
+                            :plans="plans"
+                            :live-plan-versions="livePlanVersions"
+                            :feature-registry="featureRegistryResolved"
+                            :quota-registry="quotaRegistryResolved"
+                            :inline-editor-saving="inlineEditorSaving"
+                            :inline-editor-error="inlineEditorError"
+                            @set-i18n="setI18n"
+                            @submit-edit="submitEdit"
+                            @select-version="onSelectVersion"
+                            @add-version="onAddVersion"
+                            @inline-save="onInlineSave"
+                            @discard-version="onDiscardVersion"
+                            @publish-version="openPublish"
+                            @delete-bundle="confirmDelete"
+                        />
+                    </template>
+                </BundleAccordionList>
+            </AdminSection>
+
+            <!-- Strict mode warnings after the last mutation -->
+            <q-banner
+                v-if="lastWarnings.length > 0"
+                class="sa-bundles__warnings-banner"
+                inline-actions
+                rounded
+            >
+                <template #avatar><q-icon name="warning" color="warning" /></template>
+                <strong>{{ strictWarningsText }}</strong>
+                <ul class="sa-bundles__warnings-list">
+                    <li v-for="(w, i) in lastWarnings" :key="i">
+                        <code>{{ w.code }}</code>
+                        <template v-if="w.value">
+                            · <code>{{ w.value }}</code></template
+                        >
+                        — {{ w.message }}
+                    </li>
+                </ul>
+                <template #action>
+                    <q-btn flat dense :label="common.close" @click="lastWarnings = []" />
+                </template>
+            </q-banner>
+        </AdminBody>
 
         <!-- Publish confirmation modal -->
         <BundleVersionPublishDialog
@@ -178,7 +186,9 @@ import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import BundleAccordionList from './bundles-page/BundleAccordionList.vue';
 import BundleDetailPanel from './bundles-page/BundleDetailPanel.vue';
 import BundlesFilterBar from './bundles-page/BundlesFilterBar.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 BundlesToolbar from './bundles-page/BundlesToolbar.vue';
 import BundlesKpis from './bundles-page/BundlesKpis.vue';
@@ -188,7 +198,7 @@ import type {
     BundlesStatusFilterOption,
 } from './bundles-page/types.js';
 
-// Platform standard page: Bundles (SPEC_V2 §6.4, §11.1 M6 Pack 2c +
+// Platform standard page: Bundles (§11.1 M6 Pack 2c +
 // Pack 2d inline editor after plan simulation). Dumb component —
 // the consumer wrapper supplies the composable results + plan-root
 // list + live PlanVersion index as props.
@@ -659,32 +669,6 @@ const classifyDiff = computed(() => props.classifyDiff);
 .sa-bundles__empty {
     border-left: 4px solid #31ccec;
 }
-.sa-bundles__kpis {
-    display: grid;
-    /* Responsive: as many KPIs as fit (up to 4), then 3 → 2 → 1. */
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 10px;
-}
-.sa-bundles__kpi {
-    background: #fff;
-    border: 1px solid #e2e8f0;
-    border-radius: 10px;
-    padding: 12px 14px;
-}
-.sa-bundles__kpi-label {
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: #64748b;
-}
-.sa-bundles__kpi-value {
-    font-size: 26px;
-    font-weight: 700;
-}
-.sa-bundles__kpi-sub {
-    font-size: 11px;
-    color: #94a3b8;
-}
 .sa-bundles__filter-row {
     display: flex;
     align-items: center;
@@ -705,7 +689,7 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-card {
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     overflow: hidden;
 }
@@ -723,8 +707,8 @@ const classifyDiff = computed(() => props.classifyDiff);
     width: 34px;
     height: 34px;
     border-radius: 8px;
-    background: #eff6ff;
-    color: #1d4ed8;
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -751,19 +735,19 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-card__desc {
     font-size: 12px;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .sa-bd-card__chev {
     transition: transform 0.15s;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-bd-card__chev.open {
     transform: rotate(90deg);
 }
 .sa-bd-card__body {
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid var(--sa-border);
     padding: 14px;
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .sa-bd-grid {
     display: grid;
@@ -794,7 +778,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     display: flex;
     justify-content: space-between;
 }
@@ -802,7 +786,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     margin-top: 10px;
 }
 .sa-bd-section-count {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-weight: 600;
 }
 .sa-bundles__form {
@@ -812,14 +796,14 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-i18n-hint {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-bd-i18n-block {
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding: 8px;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     background: #fff;
 }
@@ -831,7 +815,7 @@ const classifyDiff = computed(() => props.classifyDiff);
 .sa-bd-i18n-code {
     font-size: 10px;
     font-weight: 700;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     padding: 2px 7px;
     border-radius: 5px;
 }
@@ -852,7 +836,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     gap: 10px;
     align-items: flex-start;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 10px;
 }
@@ -867,7 +851,7 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-version__sub {
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
     margin: 2px 0;
 }
 .sa-bd-version__feats {
@@ -877,7 +861,7 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-feat-chip {
     font-size: 10px;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     padding: 2px 6px;
     border-radius: 5px;
 }
@@ -888,7 +872,7 @@ const classifyDiff = computed(() => props.classifyDiff);
 .sa-bd-empty-row {
     padding: 20px;
     text-align: center;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-size: 12px;
     border: 1px dashed #cbd5e1;
     border-radius: 8px;

package/src/pages-standard/DashboardPage.vue

@@ -2,14 +2,7 @@
     <AdminPage class="sa-dashboard">
         <AdminHero :title="msg.title" :subtitle="subtitle">
             <template #actions>
-                <q-btn
-                    flat
-                    dense
-                    icon="refresh"
-                    :loading="loading"
-                    :aria-label="common.reload"
-                    @click="reload"
-                />
+                <AdminRefreshBtn :loading="loading" @refresh="reload" />
             </template>
         </AdminHero>
 
@@ -25,30 +18,28 @@
             {{ msg.emptyKpiCards }}
         </div>
 
-        <div v-else class="sa-dashboard__strip">
-            <article v-for="card in cards" :key="card.id" class="sa-kpi" :data-card-id="card.id">
-                <div class="sa-kpi__icon" v-if="card.displayHint?.icon">
-                    <q-icon :name="card.displayHint.icon" size="20px" />
-                </div>
-                <div class="sa-kpi__body">
-                    <div class="sa-kpi__label">{{ card.label }}</div>
-                    <div class="sa-kpi__value">
+        <AdminSection v-else>
+            <AdminStatistics :label="msg.title">
+                <AdminKpi
+                    v-for="card in cards"
+                    :key="card.id"
+                    :data-card-id="card.id"
+                    :label="card.label"
+                    :sub="card.sub"
+                    :icon="card.displayHint?.icon"
+                    layout="inline"
+                >
+                    <template #value>
                         <q-spinner v-if="card.loading" size="18px" />
-                        <span v-else-if="card.error" class="sa-kpi__error">—</span>
-                        <span v-else>{{ formatValue(card) }}</span>
-                    </div>
-                    <div v-if="card.sub" class="sa-kpi__sub">{{ card.sub }}</div>
-                </div>
-            </article>
-        </div>
+                        <template v-else-if="card.error">—</template>
+                        <template v-else>{{ formatValue(card) }}</template>
+                    </template>
+                </AdminKpi>
+            </AdminStatistics>
+        </AdminSection>
 
         <div v-if="distributions && distributions.length > 0" class="sa-dashboard__rows">
-            <AdminSection
-                v-for="dist in distributions"
-                :key="dist.id"
-                :title="dist.label"
-                class="sa-card sa-dashboard__row-card"
-            >
+            <AdminSection v-for="dist in distributions" :key="dist.id" :title="dist.label">
                 <template v-if="dist.total" #actions>
                     <span class="sa-dashboard__count">{{ dist.total }}</span>
                 </template>
@@ -77,7 +68,7 @@
         <AdminSection
             v-if="resolvedShortcuts.length > 0"
             :title="msg.shortcutsTitle"
-            class="sa-card sa-dashboard__shortcuts"
+            class="sa-dashboard__shortcuts"
         >
             <div class="sa-dashboard__shortcut-grid">
                 <a
@@ -108,9 +99,12 @@ import { formatMessage } from '../client/i18n/format.js';
 import { SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminHttp } from '../vue/use-super-admin-context.js';
+import AdminRefreshBtn from '../components/admin-page/AdminRefreshBtn.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';
 
 // Platform standard page: Dashboard.
 //
@@ -336,17 +330,22 @@ function defaultFormat(card: KpiCardDef, body: unknown): KpiFormatted {
     };
 }
 
-async function callHttp(url: string): Promise<{ status: number; json: () => Promise<unknown> }> {
+// Every KPI request goes through an `HttpClient`. `useSuperAdminHttp()` always
+// resolves — to the client the app registered, or to `defaultHttpClient()` —
+// so there is no path on which a card could reach the network without the
+// app's auth. A bare `fetch()` here used to silently drop it.
+//
+// The token rides along as a header regardless of which client transports it,
+// the same way `useApiList` and the other standard pages do it. The two are
+// orthogonal, and a page that mounted with the documented `getAuthToken` but
+// no `http` of its own would otherwise send every KPI request unauthenticated
+// and render an error in all of its cards.
+function callHttp(url: string): Promise<{ status: number; json: () => Promise<unknown> }> {
     const http = props.http ?? shellHttp;
-    if (http) return http(url, { method: 'GET' });
     const headers: Record<string, string> = {};
     const token = props.getAuthToken?.();
     if (token) headers.Authorization = `Bearer ${token}`;
-    const resp = await fetch(url, { method: 'GET', headers });
-    return {
-        status: resp.status,
-        json: () => resp.json(),
-    };
+    return http(url, { method: 'GET', headers });
 }
 
 function extractValue(body: Record<string, unknown>): string | number | null {
@@ -401,73 +400,10 @@ function barWidth(value: number, max?: number): number {
 
 <style scoped>
 /* Header look comes from the global .sa-page-head — only a margin tweak here. */
-.sa-dashboard__strip {
-    display: grid;
-    /* Responsive: 4 cards while there is space, then automatically 3 → 2 → 1. */
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 12px;
-    margin-bottom: 14px;
-}
 
-.sa-kpi {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    padding: 14px 16px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    transition:
-        border-color 0.12s,
-        box-shadow 0.12s;
-}
-.sa-kpi:hover {
-    border-color: #94a3b8;
-    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
-}
-.sa-kpi__icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 9px;
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 .sa-kpi__icon :deep(.q-icon) {
     color: var(--sa-primary, #3f6bff);
 }
-.sa-kpi__body {
-    flex: 1;
-    min-width: 0;
-}
-.sa-kpi__label {
-    font-size: 11.5px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-}
-.sa-kpi__value {
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 28px;
-    color: var(--sa-heading, #0f172a);
-    line-height: 1;
-    letter-spacing: -0.02em;
-    margin-top: 4px;
-    min-height: 30px;
-    display: flex;
-    align-items: center;
-}
-.sa-kpi__sub {
-    font-size: 11.5px;
-    color: #94a3b8;
-    margin-top: 4px;
-}
-.sa-kpi__error {
-    color: var(--sa-negative, #dc2626);
-}
 
 .sa-dashboard__rows {
     display: grid;
@@ -508,10 +444,10 @@ function barWidth(value: number, max?: number): number {
 }
 .sa-dashboard__bar-name {
     font-weight: 600;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 .sa-dashboard__bar-track {
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     height: 8px;
     border-radius: 999px;
     overflow: hidden;
@@ -525,7 +461,7 @@ function barWidth(value: number, max?: number): number {
 .sa-dashboard__bar-count {
     font-variant-numeric: tabular-nums;
     text-align: right;
-    color: var(--sa-muted-dark, #475569);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
 }
 
 .sa-dashboard__shortcuts {
@@ -541,7 +477,7 @@ function barWidth(value: number, max?: number): number {
     gap: 12px;
     align-items: flex-start;
     padding: 12px 14px;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 10px;
     text-decoration: none;
     color: inherit;
@@ -558,19 +494,19 @@ function barWidth(value: number, max?: number): number {
 }
 .sa-dashboard__shortcut-title {
     font-weight: 700;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
     font-family: var(--sa-font-head, system-ui, sans-serif);
 }
 .sa-dashboard__shortcut-sub {
     font-size: 12px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 2px;
 }
 
 .sa-dashboard__loading,
 .sa-dashboard__empty {
     padding: 32px 28px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     display: flex;
     align-items: center;
     gap: 12px;