@saasicat/ui-vue 0.2.0

package/src/plan-versions-catalog.ts

@@ -0,0 +1,368 @@
+// Catalog snapshot builder — projects PlanVersion rows onto synthetic
+// catalog snapshots that the plan-versions UI renders.
+//
+// The backend knows no catalog snapshots; we derive them from the real
+// `publishedAt` / `supersededAt` events. Three snapshot kinds:
+//
+//   - `drafts`     : Hypothetical "after publishing all open drafts" state
+//   - `active`     : Currently live (publishedAt set, supersededAt null)
+//   - `historical` : One snapshot per publish event, before `active`
+//
+// Plan IDs are sorted alphabetically; consumers may enforce a preferred
+// order via `planSortOrder` (e.g.
+// BASIC < STANDARD < PROFESSIONAL < BUSINESS < ENTERPRISE).
+//
+// Phase 2b: ported from a consumer admin,
+// app-specific fields kept open via generics.
+
+import type { PlanVersionRow } from '@saasicat/types';
+
+export type SnapshotKind = 'drafts' | 'active' | 'historical';
+
+export interface CatalogSnapshot<P extends PlanVersionRow = PlanVersionRow> {
+    id: string;
+    kind: SnapshotKind;
+    status: 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
+    label: string;
+    title: string;
+    description: string;
+
+    asOf: string | null;
+    createdAt: string | null;
+    publishedAt: string | null;
+    authorEmail: string | null;
+
+    plans: ResolvedPlan<P>[];
+
+    /** Number of open drafts for the `drafts` snapshot, otherwise 0. */
+    draftCount: number;
+    /** Number of entities in this snapshot whose publication flagged at least
+     *  one regression (`nonRegressive === false`). */
+    regressionCount: number;
+}
+
+export interface ResolvedPlan<P extends PlanVersionRow = PlanVersionRow> {
+    /** Which PlanVersionRow was selected to represent this slot. */
+    source: P;
+    /** Live predecessor (only set when `source` is a DRAFT; otherwise null). */
+    liveBase: P | null;
+    isDraft: boolean;
+    planId: string;
+    features: string[];
+    /** Quota map (from `source.quotas` or legacy fields; empty if none). */
+    quotas: Record<string, number>;
+    monthlyNet: number;
+    yearlyNet: number;
+    marketed: boolean;
+    version: number;
+
+    // Legacy quota mirrors for UI components that have not yet switched to
+    // `quotas[key]`. Mirrored from `quotas['users'] / 'vehicles' / 'storageGb'`;
+    // for apps without these quotas they stay undefined.
+    /** @deprecated Read from `quotas['users']`. */
+    maxUsers?: number;
+    /** @deprecated Legacy field; read from `quotas['vehicles']`. */
+    maxVehicles?: number;
+    /** @deprecated Read from `quotas['storageGb']`. */
+    maxStorageGb?: number;
+}
+
+export interface RawCatalogData<P extends PlanVersionRow = PlanVersionRow> {
+    planVersions: P[];
+}
+
+export interface BuildSnapshotsOptions {
+    /**
+     * App-specific plan order, e.g. `['BASIC', 'STANDARD',
+     * 'PROFESSIONAL', 'BUSINESS', 'ENTERPRISE']`. Plan IDs outside the list
+     * end up sorted alphabetically at the back.
+     */
+    planSortOrder?: readonly string[];
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────
+
+const dec = (s: string): number => Number(s);
+
+function extractQuotas(p: PlanVersionRow): Record<string, number> {
+    if (p.quotas && Object.keys(p.quotas).length > 0) {
+        return { ...p.quotas };
+    }
+    // Legacy fallback: collect the flat fields.
+    const out: Record<string, number> = {};
+    if (typeof p.maxUsers === 'number') out.users = p.maxUsers;
+    if (typeof p.maxVehicles === 'number') out.vehicles = p.maxVehicles;
+    if (typeof p.maxStorageGb === 'number') out.storageGb = p.maxStorageGb;
+    return out;
+}
+
+const sortByPublishedDesc = <T extends { publishedAt: string | null; version: number }>(
+    rows: T[],
+): T[] =>
+    [...rows].sort((a, b) => {
+        const at = a.publishedAt ? Date.parse(a.publishedAt) : Number.POSITIVE_INFINITY;
+        const bt = b.publishedAt ? Date.parse(b.publishedAt) : Number.POSITIVE_INFINITY;
+        if (at !== bt) return bt - at;
+        return b.version - a.version;
+    });
+
+/**
+ * Finds the live version valid for an entity slot at the point in time `asOf`.
+ * A version was live when `publishedAt <= asOf` and (`supersededAt == null`
+ * or `supersededAt > asOf`) held.
+ */
+function findLiveAt<
+    T extends { publishedAt: string | null; supersededAt: string | null; version: number },
+>(rows: T[], asOfMs: number): T | null {
+    const candidates = rows.filter((r) => {
+        if (r.publishedAt === null) return false;
+        if (Date.parse(r.publishedAt) > asOfMs) return false;
+        if (r.supersededAt !== null && Date.parse(r.supersededAt) <= asOfMs) return false;
+        return true;
+    });
+    if (candidates.length === 0) return null;
+    return [...candidates].sort((a, b) => b.version - a.version)[0] ?? null;
+}
+
+function findCurrentLive<T extends { publishedAt: string | null; supersededAt: string | null }>(
+    rows: T[],
+): T | null {
+    return rows.find((r) => r.publishedAt !== null && r.supersededAt === null) ?? null;
+}
+
+function findDraft<T extends { publishedAt: string | null }>(rows: T[]): T | null {
+    return rows.find((r) => r.publishedAt === null) ?? null;
+}
+
+function groupBy<T, K extends string>(rows: T[], keyOf: (r: T) => K): Map<K, T[]> {
+    const out = new Map<K, T[]>();
+    for (const r of rows) {
+        const k = keyOf(r);
+        const list = out.get(k) ?? [];
+        list.push(r);
+        out.set(k, list);
+    }
+    return out;
+}
+
+// ─── Resolver ────────────────────────────────────────────────────────────
+
+function resolvePlan<P extends PlanVersionRow>(source: P, liveBase: P | null): ResolvedPlan<P> {
+    const quotas = extractQuotas(source);
+    return {
+        source,
+        liveBase,
+        isDraft: source.publishedAt === null,
+        planId: source.planId,
+        features: source.features,
+        quotas,
+        monthlyNet: dec(source.monthlyNet),
+        yearlyNet: dec(source.yearlyNet),
+        marketed: source.marketed,
+        version: source.version,
+        maxUsers: quotas.users,
+        maxVehicles: quotas.vehicles,
+        maxStorageGb: quotas.storageGb,
+    };
+}
+
+// ─── Snapshot constructors ───────────────────────────────────────────────
+
+function dateLabelDe(iso: string): string {
+    return new Date(iso).toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+
+function buildDraftsSnapshot<P extends PlanVersionRow>(
+    data: RawCatalogData<P>,
+    sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+): CatalogSnapshot<P> {
+    const planByKey = groupBy(data.planVersions, (r) => r.planId);
+
+    const plans: ResolvedPlan<P>[] = [];
+    for (const [, rows] of planByKey) {
+        const draft = findDraft(rows);
+        const live = findCurrentLive(rows);
+        if (draft) plans.push(resolvePlan(draft, live));
+        else if (live) plans.push(resolvePlan(live, null));
+    }
+
+    const draftCount = plans.filter((p) => p.isDraft).length;
+
+    return {
+        id: 'drafts',
+        kind: 'drafts',
+        status: 'DRAFT',
+        label: 'Arbeitsstand',
+        title:
+            draftCount === 0
+                ? 'Keine offenen Drafts'
+                : `${draftCount} offene${draftCount === 1 ? 'r' : ''} Draft${draftCount === 1 ? '' : 's'} bereit für Publish`,
+        description:
+            draftCount === 0
+                ? 'Lege einen Draft an, um Limits, Preise oder Features zu ändern. Drafts sind ohne MFA editierbar und werden erst beim Publish wirksam.'
+                : 'Diese Tabelle zeigt, wie der Catalog nach Publish aller Drafts aussehen würde. Bestehende Mandanten bleiben auf der vorherigen Version, bis sie aktiv migriert werden.',
+        asOf: null,
+        createdAt: null,
+        publishedAt: null,
+        authorEmail: null,
+        plans: sortPlansFn(plans),
+        draftCount,
+        regressionCount: 0,
+    };
+}
+
+function buildActiveSnapshot<P extends PlanVersionRow>(
+    data: RawCatalogData<P>,
+    sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+): CatalogSnapshot<P> | null {
+    const planByKey = groupBy(data.planVersions, (r) => r.planId);
+
+    const plans: ResolvedPlan<P>[] = [];
+    for (const [, rows] of planByKey) {
+        const live = findCurrentLive(rows);
+        if (live) plans.push(resolvePlan(live, null));
+    }
+    if (plans.length === 0) return null;
+
+    const publishedDates = plans
+        .map((p) => p.source.publishedAt)
+        .filter((t): t is string => t !== null)
+        .sort();
+    const latestPublished = publishedDates[publishedDates.length - 1];
+
+    return {
+        id: 'active',
+        kind: 'active',
+        status: 'ACTIVE',
+        label: 'Aktuell',
+        title: 'Live-Catalog',
+        description:
+            'Diese Plan-Versionen sind aktuell für neue Onboardings und für Renewals nach Stichtag aktiv.',
+        asOf: latestPublished ?? null,
+        createdAt: null,
+        publishedAt: latestPublished ?? null,
+        authorEmail: null,
+        plans: sortPlansFn(plans),
+        draftCount: 0,
+        regressionCount: 0,
+    };
+}
+
+function buildHistoricalSnapshots<P extends PlanVersionRow>(
+    data: RawCatalogData<P>,
+    sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+): CatalogSnapshot<P>[] {
+    const allPublishedAt = new Set<string>();
+    for (const r of data.planVersions) if (r.publishedAt) allPublishedAt.add(r.publishedAt);
+    if (allPublishedAt.size === 0) return [];
+
+    const planByKey = groupBy(data.planVersions, (r) => r.planId);
+
+    // The active snapshot overlaps with the last publish event. We take the
+    // latest one in `active`, and map only the events *before* it here.
+    const liveTimestamps = new Set<string>();
+    for (const rows of planByKey.values()) {
+        const live = findCurrentLive(rows);
+        if (live?.publishedAt) liveTimestamps.add(live.publishedAt);
+    }
+    const liveSorted = [...liveTimestamps].sort();
+    const latestLive = liveSorted[liveSorted.length - 1];
+
+    const sortedDesc = [...allPublishedAt].sort((a, b) => Date.parse(b) - Date.parse(a));
+
+    const out: CatalogSnapshot<P>[] = [];
+    for (const ts of sortedDesc) {
+        if (latestLive && Date.parse(ts) >= Date.parse(latestLive)) continue;
+        const tMs = Date.parse(ts) + 1; // *after* the event
+        const plans: ResolvedPlan<P>[] = [];
+        for (const [, rows] of planByKey) {
+            const live = findLiveAt(rows, tMs);
+            if (live) plans.push(resolvePlan(live, null));
+        }
+        if (plans.length === 0) continue;
+
+        const publishedAtThisEvent: P[] = data.planVersions.filter((r) => r.publishedAt === ts);
+        const regressionCount = publishedAtThisEvent.filter((r) => !r.nonRegressive).length;
+        const author = publishedAtThisEvent[0]?.publishedByUserId ?? null;
+
+        out.push({
+            id: `hist-${ts}`,
+            kind: 'historical',
+            status: 'ARCHIVED',
+            label: dateLabelDe(ts),
+            title: summarizeEvent(publishedAtThisEvent),
+            description: detailEvent(publishedAtThisEvent),
+            asOf: ts,
+            createdAt: ts,
+            publishedAt: ts,
+            authorEmail: author,
+            plans: sortPlansFn(plans),
+            draftCount: 0,
+            regressionCount,
+        });
+    }
+    return out;
+}
+
+function summarizeEvent(rows: PlanVersionRow[]): string {
+    if (rows.length === 0) return 'Publish-Event';
+    if (rows.length === 1) {
+        const r = rows[0]!;
+        return `${r.planId} v${r.version} publiziert`;
+    }
+    return `${rows.length} Versionen publiziert`;
+}
+
+function detailEvent(rows: PlanVersionRow[]): string {
+    if (rows.length === 0) return '';
+    const note = rows[0]?.changeNote ?? '';
+    return note.length > 0 ? note : 'Snapshot rekonstruiert aus per-Entity-Versionen.';
+}
+
+// ─── Sorting ─────────────────────────────────────────────────────────────
+
+function sortPlansBy<P extends PlanVersionRow>(
+    order: readonly string[] | undefined,
+): (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[] {
+    if (!order || order.length === 0) {
+        return (rows) => [...rows].sort((a, b) => a.planId.localeCompare(b.planId));
+    }
+    const idx: Record<string, number> = {};
+    for (let i = 0; i < order.length; i++) idx[order[i]!] = i;
+    return (rows) =>
+        [...rows].sort((a, b) => {
+            const ai = idx[a.planId] ?? Number.POSITIVE_INFINITY;
+            const bi = idx[b.planId] ?? Number.POSITIVE_INFINITY;
+            if (ai !== bi) return ai - bi;
+            return a.planId.localeCompare(b.planId);
+        });
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────
+
+export function buildSnapshots<P extends PlanVersionRow>(
+    data: RawCatalogData<P>,
+    options: BuildSnapshotsOptions = {},
+): CatalogSnapshot<P>[] {
+    const sortPlansFn = sortPlansBy<P>(options.planSortOrder);
+    const drafts = buildDraftsSnapshot(data, sortPlansFn);
+    const active = buildActiveSnapshot(data, sortPlansFn);
+    const historical = buildHistoricalSnapshots(data, sortPlansFn);
+
+    const out: CatalogSnapshot<P>[] = [drafts];
+    if (active) out.push(active);
+    out.push(...historical);
+    return out;
+}
+
+export function listOpenDrafts<P extends PlanVersionRow>(
+    data: RawCatalogData<P>,
+): { plans: P[] } {
+    return {
+        plans: sortByPublishedDesc(data.planVersions).filter((r) => r.publishedAt === null),
+    };
+}

package/src/platform-loaders.ts

@@ -0,0 +1,68 @@
+// createPlatformLoaders — factory that builds `BootLoader` + `ManifestLoader`
+// from the same `SuperAdminEndpoints` shape that `createSuperAdminApp()` also
+// consumes. This keeps the endpoint configuration (`apiBase`,
+// `publicBootEndpoint`, `manifestEndpoint`) in exactly one place per app:
+// a single constant that `main.ts` passes to `createSuperAdminApp()` and that
+// the loader wiring from this helper consumes.
+
+import { BootLoader } from './boot-loader.js';
+import { ManifestLoader } from './manifest-loader.js';
+import type { SuperAdminEndpoints } from './create-super-admin-app.js';
+import type { HttpClient, KvStore } from './types.js';
+
+export interface CreatePlatformLoadersOptions {
+    /**
+     * Same endpoint configuration as for `createSuperAdminApp()`.
+     * `publicBootEndpoint` / `manifestEndpoint` are derived from `apiBase`
+     * when not set explicitly.
+     */
+    endpoints: SuperAdminEndpoints;
+    /** HTTP adapter. App-specific, because auth-header / base-URL conventions vary. */
+    http: HttpClient;
+    /** Storage for the `ManifestLoader` ETag cache. Defaults to `defaultKvStore()`. */
+    storage?: KvStore;
+    /**
+     * Storage key prefix — consumers with multiple apps under one domain
+     * set this to e.g. `'ma:'` or `'da:'` so the caches stay separate.
+     * Only forwarded to the `ManifestLoader`.
+     */
+    storageKeyPrefix?: string;
+    /** Auth-token provider for `Authorization: Bearer …` (ManifestLoader only). */
+    getAuthToken?: () => string | null;
+}
+
+export interface PlatformLoaders {
+    bootLoader: BootLoader;
+    manifestLoader: ManifestLoader;
+}
+
+function resolveEndpoints(endpoints: SuperAdminEndpoints): Required<SuperAdminEndpoints> {
+    return {
+        apiBase: endpoints.apiBase,
+        publicBootEndpoint: endpoints.publicBootEndpoint ?? `${endpoints.apiBase}/boot`,
+        manifestEndpoint: endpoints.manifestEndpoint ?? `${endpoints.apiBase}/manifest`,
+    };
+}
+
+/**
+ * Builds `BootLoader` + `ManifestLoader` from a single endpoint constant.
+ * Apps use the same constant for `createSuperAdminApp({ endpoints })`.
+ */
+export function createPlatformLoaders(options: CreatePlatformLoadersOptions): PlatformLoaders {
+    const resolved = resolveEndpoints(options.endpoints);
+
+    const bootLoader = new BootLoader({
+        endpoint: resolved.publicBootEndpoint,
+        http: options.http,
+    });
+
+    const manifestLoader = new ManifestLoader({
+        endpoint: resolved.manifestEndpoint,
+        http: options.http,
+        storage: options.storage,
+        storageKeyPrefix: options.storageKeyPrefix,
+        getAuthToken: options.getAuthToken,
+    });
+
+    return { bootLoader, manifestLoader };
+}

package/src/project-page-host.ts

@@ -0,0 +1,108 @@
+// ProjectPageHost — universal host for manifest `projectPages`. Apps
+// register a catch-all child route under their `/admin` layout; the
+// host finds the ProjectPage in the manifest matching the current URL, resolves
+// `componentKey` against the `extensions:` map (via
+// `useSuperAdminExtensions()`) and renders the component.
+//
+// This means consumers don't have to additionally duplicate project pages
+// statically in the router — manifest + extensions: map are the single source of truth.
+
+import { computed, defineAsyncComponent, defineComponent, h, inject, type Component } from 'vue';
+import { useRoute, type RouteRecordRaw } from 'vue-router';
+import type { AdminManifest, ProjectPageDef } from '@saasicat/types';
+import {
+    SUPER_ADMIN_EXTENSIONS_KEY,
+    SUPER_ADMIN_MANIFEST_KEY,
+    type ExtensionsMap,
+} from './create-super-admin-app.js';
+
+// `defineAsyncComponent` gets its own wrapper component per loader
+// function — without a cache, re-renders would recreate the same component
+// and trigger the async resolve every time.
+const asyncComponentCache = new WeakMap<ExtensionsMap, Map<string, Component>>();
+
+function resolveAsync(extensions: ExtensionsMap, key: string): Component | null {
+    let bucket = asyncComponentCache.get(extensions);
+    if (!bucket) {
+        bucket = new Map();
+        asyncComponentCache.set(extensions, bucket);
+    }
+    const cached = bucket.get(key);
+    if (cached) return cached;
+    const loader = extensions[key];
+    if (!loader) return null;
+    const cmp = defineAsyncComponent(loader);
+    bucket.set(key, cmp);
+    return cmp;
+}
+
+export const ProjectPageHost = defineComponent({
+    name: 'ProjectPageHost',
+    setup() {
+        const route = useRoute();
+        const extensions = inject(SUPER_ADMIN_EXTENSIONS_KEY, {} as ExtensionsMap);
+        const manifestAccessor = inject(SUPER_ADMIN_MANIFEST_KEY, null);
+
+        const matchingPage = computed<ProjectPageDef | null>(() => {
+            const manifest: AdminManifest | null = manifestAccessor ? manifestAccessor() : null;
+            if (!manifest) return null;
+            const pages = manifest.navigation?.projectPages ?? [];
+            return pages.find((p) => p.route === route.path) ?? null;
+        });
+
+        const resolvedComponent = computed<Component | null>(() => {
+            const page = matchingPage.value;
+            if (!page) return null;
+            return resolveAsync(extensions, page.componentKey);
+        });
+
+        return () => {
+            const page = matchingPage.value;
+            const cmp = resolvedComponent.value;
+            if (page && cmp) return h(cmp);
+            return h('div', { class: 'sa-project-page-host__missing', role: 'alert' }, [
+                h('h2', 'Seite nicht verfügbar'),
+                h(
+                    'p',
+                    page
+                        ? `componentKey "${page.componentKey}" ist nicht in der extensions:-Map registriert. Apps müssen die Komponente in createSuperAdminApp({ extensions }) eintragen.`
+                        : `Keine Manifest-Definition für ${route.path}. Entweder fehlt die ProjectPage im Manifest, oder die Capability ist nicht aktiv.`,
+                ),
+            ]);
+        };
+    },
+});
+
+/**
+ * Returns a Vue Router child route that is registered as a catch-all under
+ * the app's `/admin` layout. Children defined statically in the app router
+ * (e.g. `/admin/dashboard`) win, because
+ * Vue Router 4 matches specific routes before wildcard children.
+ *
+ * Example (simplified):
+ *
+ *     {
+ *         path: '/admin',
+ *         component: AdminLayout,
+ *         children: [
+ *             { path: '', redirect: '/admin/dashboard' },
+ *             { path: 'dashboard', component: DashboardPage },
+ *             // ...more static children
+ *             createProjectPageHostRoute(),
+ *         ],
+ *     }
+ */
+export function createProjectPageHostRoute(options?: {
+    /**
+     * Path pattern of the catch-all route. Default `:projectPagePath(.+)`, so
+     * that `/admin` and `/admin/` are not swallowed by the ProjectPageHost,
+     * but the dashboard redirect child can take effect.
+     */
+    path?: string;
+}): RouteRecordRaw {
+    return {
+        path: options?.path ?? ':projectPagePath(.+)',
+        component: ProjectPageHost,
+        meta: { isProjectPageHost: true },
+    };
+}