@saasicat/ui-vue 0.21.0 → 0.22.0

package/src/pages-standard/PilotsPage.vue

@@ -6,52 +6,46 @@
         >
             <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,
-                    filter === tile.id ? 'sa-stat--active' : null,
-                ]"
-                @click="filter = 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>
-
-        <q-banner v-if="reviewSoon.length" class="bg-amber-2 text-grey-9 q-mb-md" rounded>
-            <template #avatar><q-icon name="event" color="amber-9" /></template>
-            {{ formatMessage(msg.list.reviewSoonBanner, { count: reviewSoon.length }) }}
-        </q-banner>
-
-        <div class="sa-pilots__card">
-            <q-table
-                flat
-                :rows="filteredRows"
-                :columns="effectiveColumns"
-                row-key="id"
-                :pagination="{ rowsPerPage: 0 }"
-                :loading="loading"
-                hide-pagination
-            >
-                <template #body-cell-actions="{ row }">
-                    <q-td>
+        <AdminBody>
+            <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="filter === tile.id"
+                    :action="() => (filter = tile.id)"
+                />
+            </AdminStatistics>
+
+            <q-banner v-if="reviewSoon.length" class="bg-amber-2 text-grey-9 q-mb-md" rounded>
+                <template #avatar><q-icon name="event" color="amber-9" /></template>
+                {{ formatMessage(msg.list.reviewSoonBanner, { count: reviewSoon.length }) }}
+            </q-banner>
+
+            <AdminSection class="sa-pilots__card">
+                <AdminTable
+                    :rows="filteredRows"
+                    :columns="effectiveColumns"
+                    :loading="loading"
+                    storage-key="pilots"
+                >
+                    <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row">
                             <q-btn
                                 v-for="action in visibleActions(row)"
@@ -64,10 +58,10 @@
                                 @click="action.handler(row)"
                             />
                         </slot>
-                    </q-td>
-                </template>
-            </q-table>
-        </div>
+                    </template>
+                </AdminTable>
+            </AdminSection>
+        </AdminBody>
 
         <PilotCreateDialog
             v-if="enableCreate && submitCreate"
@@ -106,14 +100,19 @@
 </template>
 
 <script setup lang="ts">
+import AdminTable from '../components/admin-page/AdminTable.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useMfaPrompt } from '../vue/use-mfa-prompt.js';
 import { useQuasar } from 'quasar';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useSuperAdminNotify } from '../quasar/notify.js';
+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 AdminKpi from '../components/admin-page/AdminKpi.vue';
 import AdminPage from '../components/admin-page/AdminPage.vue';
+import AdminStatistics from '../components/admin-page/AdminStatistics.vue';
 import PilotCreateDialog from '../components/dialogs/PilotCreateDialog.vue';
 import PilotEditDialog from '../components/dialogs/PilotEditDialog.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
@@ -361,14 +360,6 @@ const mergedActions = computed<readonly PilotRowAction[]>(() => [
 
 const effectiveColumns = computed(() => {
     const cols = [...baseColumns.value];
-    if (mergedActions.value.length > 0) {
-        cols.push({
-            name: 'actions',
-            label: '',
-            field: ((r: PilotRow) => r.id) as never,
-            align: 'right' as 'left',
-        });
-    }
     return cols;
 });
 
@@ -547,11 +538,4 @@ function formatDate(iso: string | null | undefined): string | null {
 }
 </script>
 
-<style scoped>
-.sa-pilots__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-</style>
+<style scoped></style>

package/src/pages-standard/PlansPage.vue

@@ -1,21 +1,72 @@
 <template>
     <AdminPage class="sa-plans">
-        <AdminHero :title="msg.list.title">
-            <template v-if="mode === 'list'" #actions>
-                <q-btn
-                    flat
-                    icon="grid_view"
-                    :label="msg.list.matrixView"
-                    @click="mode = 'matrix'"
-                />
-                <q-btn
-                    unelevated
-                    color="primary"
-                    icon="add"
-                    :label="msg.list.newPlan"
-                    @click="openCreate"
+        <AdminHero v-if="!viewOwnsHero" :title="heroTitle" :subtitle="heroSubtitle">
+            <template v-if="mode === 'cockpit' && selectedPlan" #title>
+                <PlanTitleEdit
+                    :plan="selectedPlan"
+                    :editable="detailDraftVersion !== null"
+                    @update-plan="onUpdatePlanFromDetail"
                 />
             </template>
+
+            <template v-if="mode === 'list'" #actions>
+                <button class="sa-btn" type="button" @click="mode = 'matrix'">
+                    <q-icon name="grid_view" size="16px" />
+                    <span>{{ msg.list.matrixView }}</span>
+                </button>
+                <button class="sa-btn sa-btn--primary" type="button" @click="openCreate">
+                    <q-icon name="add" size="16px" />
+                    <span>{{ msg.list.newPlan }}</span>
+                </button>
+            </template>
+            <template v-else-if="mode === 'matrix'" #actions>
+                <button class="sa-btn" type="button" @click="mode = 'list'">
+                    <q-icon name="storefront" size="16px" />
+                    <span>{{ msg.matrix.catalogPreview }}</span>
+                </button>
+                <button class="sa-btn sa-btn--primary" type="button" @click="openCreate">
+                    <q-icon name="add" size="16px" />
+                    <span>{{ msg.matrix.createPlan }}</span>
+                </button>
+            </template>
+            <template v-else-if="mode === 'cockpit' && selectedPlan" #actions>
+                <button class="sa-btn" type="button" @click="onBackToList">
+                    <q-icon name="arrow_back" size="16px" />
+                    <span>{{ common.back }}</span>
+                </button>
+                <button
+                    v-if="detailIsDeletable"
+                    class="sa-btn sa-btn--danger"
+                    type="button"
+                    :title="planDetailMsg.header.deletePlanTitle"
+                    @click="onArchiveSelectedPlan"
+                >
+                    <q-icon name="delete_outline" size="16px" />
+                    <span>{{ planDetailMsg.header.deletePlan }}</span>
+                </button>
+                <button class="sa-btn" type="button" @click="onCloneSelectedPlan">
+                    <q-icon name="content_copy" size="16px" />
+                    <span>{{ planDetailMsg.header.clonePlan }}</span>
+                </button>
+                <button
+                    v-if="!detailDraftVersion"
+                    class="sa-btn sa-btn--primary"
+                    type="button"
+                    @click="openCreateDraft"
+                >
+                    <q-icon name="add" size="16px" />
+                    <span>{{ planDetailMsg.header.newDraftVersion }}</span>
+                </button>
+                <button
+                    v-else
+                    class="sa-btn sa-btn--primary"
+                    type="button"
+                    @click="openPublish(detailDraftVersion)"
+                >
+                    <q-icon name="bolt" size="16px" />
+                    <span>{{ publishDraftLabel }}</span>
+                </button>
+            </template>
         </AdminHero>
 
         <q-banner v-if="error" class="bg-negative text-white q-ma-md" rounded>
@@ -28,22 +79,44 @@
             </template>
         </q-banner>
 
-        <AdminBody :loading="loading && plans.length === 0" :loading-text="msg.page.loading">
+        <AdminBody
+            v-if="!viewOwnsHero"
+            :loading="loading && plans.length === 0"
+            :loading-text="msg.page.loading"
+        >
             <!-- Default: list view (plan simulation) + Bundle overview -->
             <template v-if="mode === 'list'">
-                <PlanList
-                    :plans="plans"
-                    :versions-by-plan-id="versionsByPlanId"
-                    :tenant-counts-by-plan-key="tenantCountsByPlanKey"
-                    :plan-accents="props.planAccents"
-                    :highlight-plan-key="highlightPlanKey"
-                    @open-plan="onOpenPlan"
-                    @clone-plan="onClonePlan"
-                    @new-version="onNewVersionFromList"
-                    @edit-draft="onEditDraftFromList"
-                    @discard-draft="onDiscardDraftFromList"
-                    @archive-plan="onArchivePlanFromList"
-                />
+                <AdminSection>
+                    <AdminStatistics :columns="4">
+                        <AdminKpi :label="msg.list.statPlans" :value="planCounts.plans" />
+                        <AdminKpi
+                            :label="msg.list.statLive"
+                            :value="planCounts.live"
+                            tone="positive"
+                        />
+                        <AdminKpi
+                            :label="msg.list.statDrafts"
+                            :value="planCounts.drafts"
+                            :tone="planCounts.drafts > 0 ? 'warn' : 'neutral'"
+                        />
+                        <AdminKpi :label="msg.list.statTenants" :value="planCounts.tenants" />
+                    </AdminStatistics>
+                </AdminSection>
+                <AdminSection>
+                    <PlanList
+                        :plans="plans"
+                        :versions-by-plan-id="versionsByPlanId"
+                        :tenant-counts-by-plan-key="tenantCountsByPlanKey"
+                        :plan-accents="props.planAccents"
+                        :highlight-plan-key="highlightPlanKey"
+                        @open-plan="onOpenPlan"
+                        @clone-plan="onClonePlan"
+                        @new-version="onNewVersionFromList"
+                        @edit-draft="onEditDraftFromList"
+                        @discard-draft="onDiscardDraftFromList"
+                        @archive-plan="onArchivePlanFromList"
+                    />
+                </AdminSection>
                 <PlanBundleOverview
                     :bundles="availableBundles"
                     :plans="plans"
@@ -52,21 +125,21 @@
             </template>
 
             <!-- V1 matrix: component comparison -->
-            <PlanMatrix
-                v-else-if="mode === 'matrix'"
-                :plans="plans"
-                :versions-by-plan-id="versionsByPlanId"
-                :available-quotas="availableQuotas"
-                :available-bundles="availableBundles"
-                :feature-registry="featureRegistry"
-                :tenant-counts-by-plan-key="tenantCountsByPlanKey"
-                :plan-accents="props.planAccents"
-                :loading="bulkVersionsLoading"
-                @open-plan="onOpenPlan"
-                @create-plan="openCreate"
-                @clone-plan="onClonePlan"
-                @view-catalog="mode = 'list'"
-            />
+            <AdminSection v-else-if="mode === 'matrix'">
+                <PlanMatrix
+                    :plans="plans"
+                    :versions-by-plan-id="versionsByPlanId"
+                    :available-quotas="availableQuotas"
+                    :available-bundles="availableBundles"
+                    :feature-registry="featureRegistry"
+                    :tenant-counts-by-plan-key="tenantCountsByPlanKey"
+                    :plan-accents="props.planAccents"
+                    :loading="bulkVersionsLoading"
+                    @open-plan="onOpenPlan"
+                    @create-plan="openCreate"
+                    @clone-plan="onClonePlan"
+                />
+            </AdminSection>
 
             <!-- Plan detail: drill-in for a single Plan (plan simulation) -->
             <PlanDetail
@@ -80,51 +153,47 @@
                 :audit-rows="auditRows"
                 :loading-audit="loadingAudit"
                 :submit-terminate="onSubmitTerminate"
-                @back="onBackToList"
                 @create-draft="openCreateDraft"
                 @edit-draft="openEditDraft"
                 @publish="openPublish"
-                @clone-plan="onClonePlan(selectedPlan)"
-                @delete-plan="onArchivePlanFromList(selectedPlan, false)"
-                @update-plan="onUpdatePlanFromDetail"
             />
+        </AdminBody>
 
-            <!-- V2 split-view editor as a full-screen view (plan simulation) -->
-            <PlanVersionEditor
-                v-else-if="mode === 'editor' && draftEditing && selectedPlan"
-                :plan-key="selectedPlan.planKey"
-                :editing-id="draftEditing.editingId"
-                :initial-form="draftEditing.initialForm"
-                :saving="draftSaving"
-                :available-features="availableFeatures"
-                :available-quotas="availableQuotas"
-                :available-bundles="availableBundles"
-                :feature-registry="featureRegistry"
-                :plan-display-name="selectedPlan.label"
-                :save-error="draftSaveError"
-                :predecessor-version="editorPredecessor"
-                @save="onEditorNext"
-                @cancel="onCancelEditor"
-            />
+        <!-- V2 split-view editor as a full-screen view (plan simulation) -->
+        <PlanVersionEditor
+            v-if="mode === 'editor' && draftEditing && selectedPlan"
+            :plan-key="selectedPlan.planKey"
+            :editing-id="draftEditing.editingId"
+            :initial-form="draftEditing.initialForm"
+            :saving="draftSaving"
+            :available-features="availableFeatures"
+            :available-quotas="availableQuotas"
+            :available-bundles="availableBundles"
+            :feature-registry="featureRegistry"
+            :plan-display-name="selectedPlan.label"
+            :save-error="draftSaveError"
+            :predecessor-version="editorPredecessor"
+            @save="onEditorNext"
+            @cancel="onCancelEditor"
+        />
 
-            <!-- V3 Review & Publish — wizard step 3 (plan simulation) -->
-            <PlanReview
-                v-else-if="mode === 'review' && reviewDraft && selectedPlan"
-                :plan="selectedPlan"
-                :version="reviewDraft"
-                :predecessor="reviewPredecessor"
-                :available-quotas="availableQuotas"
-                :available-bundles="availableBundles"
-                :feature-registry="featureRegistry"
-                :tenant-impact-count="tenantCountsByPlanKey[selectedPlan.planKey] ?? 0"
-                :saving="draftSaving"
-                :publishing="publishing"
-                :publish-error="reviewError"
-                @back="onReviewBack"
-                @save-and-exit="onReviewSaveExit"
-                @publish="onReviewPublish"
-            />
-        </AdminBody>
+        <!-- V3 Review & Publish — wizard step 3 (plan simulation) -->
+        <PlanReview
+            v-else-if="mode === 'review' && reviewDraft && selectedPlan"
+            :plan="selectedPlan"
+            :version="reviewDraft"
+            :predecessor="reviewPredecessor"
+            :available-quotas="availableQuotas"
+            :available-bundles="availableBundles"
+            :feature-registry="featureRegistry"
+            :tenant-impact-count="tenantCountsByPlanKey[selectedPlan.planKey] ?? 0"
+            :saving="draftSaving"
+            :publishing="publishing"
+            :publish-error="reviewError"
+            @back="onReviewBack"
+            @save-and-exit="onReviewSaveExit"
+            @publish="onReviewPublish"
+        />
 
         <PlansPageToast :message="toastMessage" />
 
@@ -174,8 +243,12 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 import AdminBody from '../components/admin-page/AdminBody.vue';
+import { countPlans, resolvePlans } from '../client/resolve-plans.js';
 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 AdminStatistics from '../components/admin-page/AdminStatistics.vue';
+import AdminKpi from '../components/admin-page/AdminKpi.vue';
 import type {
     FeatureCatalogEntryRow,
     PlanRow,
@@ -196,9 +269,11 @@ import type { HttpClient } from '../client/types.js';
 import type { SaMessages } from '../client/i18n/index.js';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+import { useSuperAdminHttp } from '../vue/use-super-admin-context.js';
 import PlanVersionEditor from '../components/plan-version-editor/PlanVersionEditor.vue';
 import PlanMatrix from '../components/plan-matrix/PlanMatrix.vue';
 import PlanDetail from '../components/plan-detail/PlanDetail.vue';
+import PlanTitleEdit from '../components/plan-detail/PlanTitleEdit.vue';
 import PlanList from '../components/plan-list/PlanList.vue';
 import PlanCreateDialog, {
     type PlanCreateSubmit,
@@ -265,6 +340,64 @@ const props = defineProps<{
 }>();
 
 const msg = useSaMessages('plans');
+// The plan detail's own strings: its header moved into this page's hero.
+const planDetailMsg = useSaMessages('planDetail');
+
+// Fallback for the requests this page issues directly. It resolves to the
+// client the app registered via `createSuperAdminApp({ http })`, or to
+// `defaultHttpClient()` — never to a bare `fetch()`, which would drop the
+// app's Authorization header on exactly these calls.
+const shellHttp = useSuperAdminHttp();
+
+// The same derivation PlanList uses for its rows, so the counts above the list
+// and the list itself cannot drift apart.
+const planCounts = computed(() =>
+    countPlans(
+        resolvePlans({
+            plans: plans.value,
+            versionsByPlanId: versionsByPlanId.value,
+            tenantCountsByPlanKey: tenantCountsByPlanKey.value,
+        }),
+    ),
+);
+
+// The editor and the review render the hero themselves: their actions hang on
+// state that lives in those views — the publish checklist, the force flags, the
+// draft's validity — so the page steps aside rather than lifting all of it up.
+const viewOwnsHero = computed(() => mode.value === 'editor' || mode.value === 'review');
+
+// One page, one heading. Every view here — the list, the matrix, a single plan
+// — is a mode of the same page, so each swaps the hero's title and actions
+// instead of rendering a second header underneath it. The plan detail used to
+// do the latter, which put a competing <h1> on the page.
+const heroTitle = computed(() => {
+    if (mode.value === 'cockpit' && selectedPlan.value) return selectedPlan.value.label;
+    return mode.value === 'matrix' ? msg.value.matrix.title : msg.value.list.title;
+});
+
+const heroSubtitle = computed(() => {
+    if (mode.value !== 'cockpit' || !selectedPlan.value) return msg.value.page.subtitle;
+    return selectedPlan.value.description || planDetailMsg.value.header.noDescription;
+});
+
+const detailDraftVersion = computed(
+    () => versions.value.find((v) => v.publishedAt === null) ?? null,
+);
+
+// Deleting a plan is only offered while nothing depends on it: no tenants, no
+// published version, no open draft.
+const detailIsDeletable = computed(
+    () =>
+        detailDraftVersion.value === null &&
+        versions.value.every((v) => v.publishedAt === null) &&
+        Object.values(impactByVersion.value).every((n) => n === 0),
+);
+
+const publishDraftLabel = computed(() =>
+    formatMessage(planDetailMsg.value.header.publishDraft, {
+        version: detailDraftVersion.value?.version ?? '',
+    }),
+);
 const common = useSaMessages('common');
 
 const composable: UsePlansResult = usePlans({
@@ -329,22 +462,6 @@ const tenantCountsByPlanKey = computed<Record<string, number>>(
     () => props.tenantCountsByPlanKey ?? loadedTenantCounts.value,
 );
 
-function planAccent(planKey: string): string {
-    return props.planAccents?.[planKey] ?? defaultAccent(planKey);
-}
-const DEFAULT_ACCENTS: Record<string, string> = {
-    STARTER: '#64748b',
-    STANDARD: '#2563eb',
-    PRO: '#7c3aed',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f766e',
-    BASIC: '#475569',
-};
-function defaultAccent(planKey: string): string {
-    return DEFAULT_ACCENTS[planKey] ?? '#2563eb';
-}
-
 // ─── Plan master creation (V1 plan simulation step 1) ───
 const createDialogOpen = ref(false);
 const creatingPlan = ref(false);
@@ -432,7 +549,7 @@ async function reloadAllVersions(): Promise<void> {
     if (plans.value.length === 0) return;
     bulkVersionsLoading.value = true;
     try {
-        const http = props.http ?? ((url: string, init?: RequestInit) => fetch(url, init));
+        const http = props.http ?? shellHttp;
         const token = props.getAuthToken?.();
         const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
         const results = await Promise.all(
@@ -553,6 +670,18 @@ async function onEditDraftFromList(plan: PlanRow, draft: PlanVersionRow): Promis
     openEditDraft(draft);
 }
 
+// The hero's detail actions only render while a plan is selected, but a
+// template condition on the surrounding slot does not narrow `selectedPlan`
+// inside a handler expression — a consumer's stricter build rejects it. These
+// carry the guard in code, where the type checker can see it.
+function onCloneSelectedPlan(): void {
+    if (selectedPlan.value) onClonePlan(selectedPlan.value);
+}
+
+function onArchiveSelectedPlan(): void {
+    if (selectedPlan.value) onArchivePlanFromList(selectedPlan.value, false);
+}
+
 function onBackToList(): void {
     mode.value = 'list';
     selectedPlan.value = null;
@@ -569,7 +698,6 @@ async function onUpdatePlanFromDetail(patch: { label: string }): Promise<void> {
         const updated = await update(selectedPlan.value.id, patch);
         selectedPlan.value = updated;
     } catch (err: unknown) {
-        // eslint-disable-next-line no-console
         console.error('[PlansPage] Plan rename failed', err);
     }
 }
@@ -592,7 +720,7 @@ const featureRegistry = computed<Record<string, { label?: string; group?: string
 }));
 
 async function loadEditorSources(): Promise<void> {
-    const http = props.http ?? ((url: string, init?: RequestInit) => fetch(url, init));
+    const http = props.http ?? shellHttp;
     const token = props.getAuthToken?.();
     const headers: Record<string, string> = token ? { Authorization: `Bearer ${token}` } : {};
     try {
@@ -940,7 +1068,6 @@ async function onReviewSaveExit(): Promise<void> {
         draftEditing.value = null;
         mode.value = selectedPlan.value ? 'cockpit' : 'list';
     } catch (err: unknown) {
-        // eslint-disable-next-line no-console
         console.error('[PlansPage] Saving the draft failed', err);
         reviewError.value = describeDraftSaveError(err);
     } finally {
@@ -977,7 +1104,6 @@ async function onReviewPublish(payload: {
         draftEditing.value = null;
         mode.value = 'cockpit';
     } catch (err: unknown) {
-        // eslint-disable-next-line no-console
         console.error('[PlansPage] Publishing failed', err);
         reviewError.value = describePublishError(err);
     } finally {
@@ -1011,7 +1137,6 @@ async function executeArchive(): Promise<void> {
         archiveOpen.value = false;
         flashToast(formatMessage(msg.value.page.toastPlanDeleted, { planKey: plan.planKey }));
     } catch (err: unknown) {
-        // eslint-disable-next-line no-console
         console.error('[PlansPage] Archive/purge failed', err);
         const status = (err as { status?: number })?.status;
         const body = (err as { body?: { code?: string; message?: string } })?.body;
@@ -1078,7 +1203,7 @@ async function executeDiscard(): Promise<void> {
     } catch (err: unknown) {
         // Full error object to the console — in the diagnostic case you can see
         // e.g. CORS preflight errors or the real network stack there.
-        // eslint-disable-next-line no-console
+
         console.error('[PlansPage] Discard failed', err);
 
         const status = (err as { status?: number })?.status;