@saasicat/ui-vue 0.6.0 → 0.8.0

package/src/pages-standard/plan-versions/format.ts

@@ -1,13 +1,7 @@
-// Formatting helpers for the plan-versions views.
-//
-// Phase 2c: Ported from a consumer admin.
-// The time reference point for `formatRelative` is the moment of the call,
-// not a hard-coded demo date (the ported template had `2026-05-04` —
-// the platform must work in production).
+// Formatting helper retained for the reusable catalog-history timeline.
 
-import { formatCurrency } from '../../client/i18n/currency.js';
 import { formatMessage } from '../../client/i18n/format.js';
-import { DEFAULT_SA_LOCALE, SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
+import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
 import { planVersionsMessages } from '../../client/i18n/messages/plan-versions.js';
 
 const EMPTY_VALUE = '—';
@@ -16,17 +10,6 @@ function texts(locale: SaLocale) {
     return planVersionsMessages[locale].format;
 }
 
-export function fmtEuro(n: number, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    if (n === 0) return texts(locale).priceIndividual;
-    return formatCurrency(n, locale);
-}
-
-export function fmtStorage(gb: number): string {
-    if (gb === 0) return '500 MB';
-    if (gb >= 1000 && gb % 1000 === 0) return `${gb / 1000} TB`;
-    return `${gb} GB`;
-}
-
 export function formatRelative(
     iso: string | undefined,
     locale: SaLocale = DEFAULT_SA_LOCALE,
@@ -48,22 +31,3 @@ export function formatRelative(
     const y = Math.floor(days / 365);
     return formatMessage(y > 1 ? msg.yearsAgoMany : msg.yearsAgoOne, { count: y });
 }
-
-export function formatDate(iso: string | undefined, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    if (!iso) return EMPTY_VALUE;
-    return new Date(iso).toLocaleDateString(SA_INTL_LOCALES[locale], {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
-    });
-}
-
-export function formatTimestamp(iso: string, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return new Date(iso).toLocaleString(SA_INTL_LOCALES[locale], {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    });
-}

package/src/client/plan-versions-catalog.ts

@@ -1,380 +0,0 @@
-// 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';
-
-import { formatMessage } from './i18n/format.js';
-import { DEFAULT_SA_LOCALE, SA_INTL_LOCALES, type SaLocale } from './i18n/locale.js';
-import { planVersionsMessages } from './i18n/messages/plan-versions.js';
-
-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[];
-    /** UI locale for the generated snapshot labels/titles/descriptions. */
-    locale?: SaLocale;
-}
-
-// ─── 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 ───────────────────────────────────────────────
-
-type CatalogMessages = (typeof planVersionsMessages)['de']['catalog'];
-
-function draftsTitle(draftCount: number, msg: CatalogMessages): string {
-    if (draftCount === 0) return msg.draftsTitleEmpty;
-    const template = draftCount === 1 ? msg.draftsTitleOne : msg.draftsTitleMany;
-    return formatMessage(template, { count: draftCount });
-}
-
-function dateLabel(iso: string, locale: SaLocale): string {
-    return new Date(iso).toLocaleDateString(SA_INTL_LOCALES[locale], {
-        day: '2-digit',
-        month: 'short',
-        year: 'numeric',
-    });
-}
-
-function buildDraftsSnapshot<P extends PlanVersionRow>(
-    data: RawCatalogData<P>,
-    sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
-    locale: SaLocale,
-): CatalogSnapshot<P> {
-    const msg = planVersionsMessages[locale].catalog;
-    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: msg.draftsLabel,
-        title: draftsTitle(draftCount, msg),
-        description: draftCount === 0 ? msg.draftsDescriptionEmpty : msg.draftsDescription,
-        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>[],
-    locale: SaLocale,
-): CatalogSnapshot<P> | null {
-    const msg = planVersionsMessages[locale].catalog;
-    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: msg.activeLabel,
-        title: msg.activeTitle,
-        description: msg.activeDescription,
-        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>[],
-    locale: SaLocale,
-): CatalogSnapshot<P>[] {
-    const msg = planVersionsMessages[locale].catalog;
-    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: dateLabel(ts, locale),
-            title: summarizeEvent(publishedAtThisEvent, msg),
-            description: detailEvent(publishedAtThisEvent, msg),
-            asOf: ts,
-            createdAt: ts,
-            publishedAt: ts,
-            authorEmail: author,
-            plans: sortPlansFn(plans),
-            draftCount: 0,
-            regressionCount,
-        });
-    }
-    return out;
-}
-
-function summarizeEvent(rows: PlanVersionRow[], msg: CatalogMessages): string {
-    if (rows.length === 0) return msg.publishEvent;
-    if (rows.length === 1) {
-        const r = rows[0]!;
-        return formatMessage(msg.publishEventSingle, { planId: r.planId, version: r.version });
-    }
-    return formatMessage(msg.publishEventMultiple, { count: rows.length });
-}
-
-function detailEvent(rows: PlanVersionRow[], msg: CatalogMessages): string {
-    if (rows.length === 0) return '';
-    const note = rows[0]?.changeNote ?? '';
-    return note.length > 0 ? note : msg.reconstructedSnapshot;
-}
-
-// ─── 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 locale = options.locale ?? DEFAULT_SA_LOCALE;
-    const sortPlansFn = sortPlansBy<P>(options.planSortOrder);
-    const drafts = buildDraftsSnapshot(data, sortPlansFn, locale);
-    const active = buildActiveSnapshot(data, sortPlansFn, locale);
-    const historical = buildHistoricalSnapshots(data, sortPlansFn, locale);
-
-    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/pages-standard/PlanVersionsPage.vue

@@ -1,220 +0,0 @@
-<template>
-    <div class="sa-pv">
-        <div v-if="loading" class="sa-pv__loading">
-            <q-spinner size="32px" /> {{ msg.page.loadingCatalog }}
-        </div>
-
-        <template v-else>
-            <PlanVersionsTimeline
-                :snapshots="snapshots"
-                :selected-id="selectedId"
-                :compare-id="compareId"
-                @select="onSelect"
-                @set-compare="onSetCompare"
-                @clear-compare="compareId = null"
-            />
-
-            <main class="sa-pv__main">
-                <PlanVersionHeader
-                    v-if="selected"
-                    :snapshot="selected"
-                    :view-mode="viewMode"
-                    :compare-snapshot="compare"
-                    @view-change="viewMode = $event"
-                    @publish="emit('publish')"
-                    @clear-compare="compareId = null"
-                />
-
-                <div class="sa-pv__body">
-                    <template v-if="selected">
-                        <PlanVersionsDiff
-                            v-if="compare"
-                            :from="compare"
-                            :to="selected"
-                            :plan-accents="planAccents"
-                            :field-labels="diffFieldLabels"
-                        />
-                        <template v-else-if="viewMode === 'list'">
-                            <slot name="list" :snapshot="selected">
-                                <PlanVersionsList
-                                    :snapshot="selected"
-                                    :expected-plan-ids="expectedPlanIds"
-                                    :quota-columns="quotaColumns"
-                                    @edit-plan-draft="emit('editPlanDraft', $event)"
-                                    @create-plan-draft="emit('createPlanDraft', $event)"
-                                />
-                            </slot>
-                        </template>
-                        <template v-else-if="viewMode === 'matrix'">
-                            <slot name="matrix" :snapshot="selected">
-                                <PlanVersionsMatrix
-                                    :snapshot="selected"
-                                    :feature-registry="featureRegistry ?? {}"
-                                    :feature-groups="featureGroups"
-                                />
-                            </slot>
-                        </template>
-                        <template v-else>
-                            <slot name="audit" :snapshot="selected">
-                                <PlanVersionsAudit
-                                    v-if="loadAudit"
-                                    :snapshot="selected"
-                                    :load-audit="loadAudit"
-                                    :action-meta="auditActionMeta"
-                                />
-                                <div v-else class="sa-pv__no-audit">
-                                    {{ msg.page.noAuditLoader }}
-                                </div>
-                            </slot>
-                        </template>
-                    </template>
-                </div>
-            </main>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import type { CatalogSnapshot, RawCatalogData } from '../client/plan-versions-catalog.js';
-import { buildSnapshots } from '../client/plan-versions-catalog.js';
-import PlanVersionsTimeline from './plan-versions/PlanVersionsTimeline.vue';
-import PlanVersionHeader from './plan-versions/PlanVersionHeader.vue';
-import PlanVersionsList, { type QuotaColumnConfig } from './plan-versions/PlanVersionsList.vue';
-import PlanVersionsMatrix from './plan-versions/PlanVersionsMatrix.vue';
-import PlanVersionsAudit from './plan-versions/PlanVersionsAudit.vue';
-import PlanVersionsDiff from './plan-versions/PlanVersionsDiff.vue';
-import type { PlanVersionViewMode } from './plan-versions/types.js';
-import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
-
-// Platform standard page: plan versions.
-//
-// Composes the plan-versions subcomponents into the complete page. Consumers
-// pass `data` (RawCatalogData) through and receive events for the app-
-// specific edit/create flows (DraftDialog/PublishModal are intentionally
-// not part of the platform — they hang off the app feature catalog).
-//
-// Slot API for richer app-specific renderings:
-//   - `#list`: replaces the default PlanVersionsList (e.g. with feature
-//             grouping per plan + additional quota columns).
-//   - `#matrix`, `#audit`: analogous.
-
-interface FeatureGroupsConfig {
-    order: readonly string[];
-    byKey: Record<string, string>;
-    fallbackGroup?: string;
-}
-
-interface AuditRow {
-    id: string;
-    createdAt: string;
-    action: string;
-    entity: string;
-    entityId: string;
-    changes: Record<string, unknown> | null;
-    user?: { email: string; firstName?: string; lastName?: string } | null;
-    userEmail?: string | null;
-}
-
-const props = withDefaults(
-    defineProps<{
-        data: RawCatalogData;
-        loading?: boolean;
-        /** Plan IDs in display order (e.g. BASIC,STANDARD,PROFESSIONAL,…). */
-        planSortOrder?: readonly string[];
-        /** Expected plan IDs for the "missing packages" warning. */
-        expectedPlanIds?: readonly string[];
-        /** Accent color per plan ID (for diff cards). */
-        planAccents?: Record<string, string>;
-        /** Feature metadata (label/icon/plannedOnly) for the matrix. */
-        featureRegistry?: Record<string, { label?: string; icon?: string; plannedOnly?: boolean }>;
-        /** UX grouping of the features in the matrix. */
-        featureGroups?: FeatureGroupsConfig;
-        /** Audit loader (optional; without it disables the audit view). */
-        loadAudit?: () => Promise<AuditRow[]>;
-        /** App-specific audit action meta map. */
-        auditActionMeta?: Record<string, { icon: string; color: string; label: string }>;
-        /** Field label overrides for the diff display. */
-        diffFieldLabels?: Record<string, string>;
-        /**
-         * Optional quota columns in the list view (e.g.
-         * users/members/storage/seats). Passed through to
-         * PlanVersionsList. Default: none — old display (only package/price/features).
-         */
-        quotaColumns?: ReadonlyArray<QuotaColumnConfig>;
-    }>(),
-    {
-        loading: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: 'publish'): void;
-    (e: 'editPlanDraft', draftId: string): void;
-    (e: 'createPlanDraft', planId: string): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const selectedId = ref<string>('drafts');
-const compareId = ref<string | null>(null);
-const viewMode = ref<PlanVersionViewMode>('list');
-
-const snapshots = computed<CatalogSnapshot[]>(() =>
-    buildSnapshots(props.data, { planSortOrder: props.planSortOrder, locale: locale.value }),
-);
-
-const selected = computed<CatalogSnapshot | null>(
-    () => snapshots.value.find((s) => s.id === selectedId.value) ?? null,
-);
-const compare = computed<CatalogSnapshot | null>(() =>
-    compareId.value ? (snapshots.value.find((s) => s.id === compareId.value) ?? null) : null,
-);
-
-watch(snapshots, (snaps) => {
-    if (!snaps.find((s) => s.id === selectedId.value)) {
-        selectedId.value = snaps[0]?.id ?? 'drafts';
-    }
-});
-
-function onSelect(id: string): void {
-    selectedId.value = id;
-}
-
-function onSetCompare(id: string): void {
-    if (id !== selectedId.value) compareId.value = id;
-}
-</script>
-
-<style scoped>
-.sa-pv {
-    display: flex;
-    min-height: calc(100vh - 56px);
-    background: var(--sa-bg-app, #f1f5f9);
-    min-width: 0;
-}
-.sa-pv__main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    overflow: hidden;
-}
-.sa-pv__body {
-    flex: 1;
-    overflow-y: auto;
-}
-.sa-pv__loading {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 32px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv__no-audit {
-    padding: 32px;
-    color: var(--sa-muted, #64748b);
-    font-style: italic;
-}
-</style>