@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/DashboardPage.vue

@@ -1,21 +1,10 @@
 <template>
-    <div class="sa-dashboard">
-        <header class="sa-page-head sa-dashboard__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">
-                <q-btn
-                    flat
-                    dense
-                    icon="refresh"
-                    :loading="loading"
-                    :aria-label="common.reload"
-                    @click="reload"
-                />
-            </div>
-        </header>
+    <AdminPage class="sa-dashboard">
+        <AdminHero :title="msg.title" :subtitle="subtitle">
+            <template #actions>
+                <AdminRefreshBtn :loading="loading" @refresh="reload" />
+            </template>
+        </AdminHero>
 
         <q-banner v-if="error" class="bg-red-1 text-red-9 q-mb-md" rounded>
             <strong>{{ common.error }}:</strong> {{ error.message }}
@@ -29,33 +18,31 @@
             {{ 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">
-            <section
-                v-for="dist in distributions"
-                :key="dist.id"
-                class="sa-dashboard__card sa-dashboard__row-card"
-            >
-                <header class="sa-dashboard__row-head">
-                    <h2>{{ dist.label }}</h2>
-                    <span v-if="dist.total" class="sa-dashboard__count">{{ dist.total }}</span>
-                </header>
+            <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>
                 <ul class="sa-dashboard__bar-list">
                     <li
                         v-for="entry in dist.entries"
@@ -75,16 +62,14 @@
                         <span class="sa-dashboard__bar-count">{{ entry.value }}</span>
                     </li>
                 </ul>
-            </section>
+            </AdminSection>
         </div>
 
-        <section
+        <AdminSection
             v-if="resolvedShortcuts.length > 0"
-            class="sa-dashboard__card sa-dashboard__shortcuts"
+            :title="msg.shortcutsTitle"
+            class="sa-dashboard__shortcuts"
         >
-            <header class="sa-dashboard__row-head">
-                <h2>{{ msg.shortcutsTitle }}</h2>
-            </header>
             <div class="sa-dashboard__shortcut-grid">
                 <a
                     v-for="s in resolvedShortcuts"
@@ -99,10 +84,10 @@
                     </div>
                 </a>
             </div>
-        </section>
+        </AdminSection>
 
         <slot name="after-kpis" />
-    </div>
+    </AdminPage>
 </template>
 
 <script setup lang="ts">
@@ -114,6 +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.
 //
@@ -339,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 {
@@ -403,83 +399,11 @@ function barWidth(value: number, max?: number): number {
 </script>
 
 <style scoped>
-.sa-dashboard {
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    padding: 20px 28px 28px;
-}
 /* Header look comes from the global .sa-page-head — only a margin tweak here. */
-.sa-dashboard__head {
-    margin-bottom: 4px;
-}
 
-.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;
@@ -494,25 +418,6 @@ function barWidth(value: number, max?: number): number {
     }
 }
 
-.sa-dashboard__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    padding: 16px 18px;
-}
-.sa-dashboard__row-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
-}
-.sa-dashboard__row-head h2 {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-}
 .sa-dashboard__count {
     background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
     color: var(--sa-primary, #3f6bff);
@@ -539,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;
@@ -556,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 {
@@ -572,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;
@@ -589,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;