@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/pages-standard/PlansPage.vue

@@ -1,5 +1,74 @@
 <template>
-    <q-page class="sa-plans">
+    <AdminPage class="sa-plans">
+        <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>
             <template #avatar>
                 <q-icon name="error" />
@@ -10,29 +79,44 @@
             </template>
         </q-banner>
 
-        <div v-if="loading && plans.length === 0" class="sa-plans__loading">
-            <q-spinner size="32px" />
-            <span>{{ msg.page.loading }}</span>
-        </div>
-
-        <template v-else>
+        <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"
-                    @create-plan="openCreate"
-                    @clone-plan="onClonePlan"
-                    @new-version="onNewVersionFromList"
-                    @edit-draft="onEditDraftFromList"
-                    @discard-draft="onDiscardDraftFromList"
-                    @archive-plan="onArchivePlanFromList"
-                    @show-matrix="mode = 'matrix'"
-                />
+                <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"
@@ -41,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
@@ -69,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"
-            />
-
-            <!-- 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"
             />
+        </AdminBody>
+
+        <!-- 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"
-            />
-        </template>
+        <!-- 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" />
 
@@ -157,11 +237,18 @@
             :format-change-value="formatChangeValue"
             @execute="executePublish"
         />
-    </q-page>
+    </AdminPage>
 </template>
 
 <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,
@@ -182,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,
@@ -251,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({
@@ -315,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);
@@ -418,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(
@@ -539,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;
@@ -555,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);
     }
 }
@@ -578,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 {
@@ -926,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 {
@@ -963,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 {
@@ -997,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;
@@ -1064,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;
@@ -1238,17 +1377,6 @@ onMounted(async () => {
 
 <style scoped>
 .sa-plans {
-    min-height: calc(100vh - 56px);
-    background: #f6f7f9;
     position: relative;
 }
-.sa-plans__loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 48px;
-    color: #64748b;
-    font-size: 14px;
-}
 </style>