@saasicat/ui-vue 0.2.0

package/src/pages-standard/plan-versions/PlanVersionStatusBadge.vue

@@ -0,0 +1,48 @@
+<template>
+    <span class="sa-pv-status-badge" :class="`sa-pv-status-badge--${status.toLowerCase()}`">
+        <q-icon :name="cfg.icon" size="12px" />
+        {{ cfg.label }}
+    </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+type Status = 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
+const props = defineProps<{ status: Status }>();
+
+const STATUS_CFG: Record<Status, { label: string; icon: string }> = {
+    DRAFT: { label: 'DRAFT', icon: 'edit_note' },
+    ACTIVE: { label: 'AKTIV', icon: 'check_circle' },
+    ARCHIVED: { label: 'ARCHIV', icon: 'archive' },
+};
+const cfg = computed(() => STATUS_CFG[props.status]);
+</script>
+
+<style scoped>
+.sa-pv-status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 9px;
+    border-radius: 6px;
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+}
+.sa-pv-status-badge--draft {
+    background: #fef3c7;
+    color: #92400e;
+}
+.sa-pv-status-badge--active {
+    background: #d1fae5;
+    color: #065f46;
+}
+.sa-pv-status-badge--archived {
+    background: #f1f5f9;
+    color: #64748b;
+}
+.sa-pv-status-badge :deep(.q-icon) {
+    color: inherit;
+}
+</style>

package/src/pages-standard/plan-versions/PlanVersionsAudit.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="sa-pv-audit">
+        <div class="sa-pv-audit__card">
+            <header class="sa-pv-audit__head">
+                <q-icon name="history" size="18px" class="sa-pv-audit__head-icon" />
+                <h3>Aktivität</h3>
+                <span class="sa-pv-audit__count">{{ events.length }} Events</span>
+                <q-space />
+                <button v-if="!loading" type="button" class="sa-pv-audit__refresh" @click="reload">
+                    <q-icon name="refresh" size="14px" /> Neu laden
+                </button>
+            </header>
+            <div v-if="loading" class="sa-pv-audit__loading">
+                <q-spinner size="20px" /> Audit-Trail wird geladen…
+            </div>
+            <div v-else-if="events.length === 0" class="sa-pv-audit__empty">
+                Keine Plan-/Add-on-Events im Audit-Log gefunden.
+            </div>
+            <div v-else class="sa-pv-audit__list">
+                <div
+                    v-for="(e, i) in events"
+                    :key="e.id"
+                    class="sa-pv-audit__item"
+                    :class="{ 'sa-pv-audit__item--last': i === events.length - 1 }"
+                >
+                    <div
+                        class="sa-pv-audit__icon"
+                        :style="{ background: `${meta(e.action).color}14` }"
+                    >
+                        <q-icon
+                            :name="meta(e.action).icon"
+                            size="17px"
+                            :style="{ color: meta(e.action).color }"
+                        />
+                    </div>
+                    <div class="sa-pv-audit__body">
+                        <div class="sa-pv-audit__title-row">
+                            <span class="sa-pv-audit__title">{{ meta(e.action).label }}</span>
+                            <span class="sa-pv-audit__entity">{{ entityLabel(e) }}</span>
+                        </div>
+                        <div class="sa-pv-audit__detail">{{ detail(e) }}</div>
+                        <div class="sa-pv-audit__meta">
+                            <span
+                                ><q-icon name="schedule" size="12px" />
+                                {{ formatTsDe(e.createdAt) }}</span
+                            >
+                            <span v-if="actorEmail(e)">
+                                <q-icon name="person" size="12px" /> {{ actorEmail(e) }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
+import { formatTsDe } from './format.js';
+
+// PlanVersionsAudit — data-agnostic. Consumers pass in a `loadAudit` loader
+// that supplies events; the component filters them to match the current
+// snapshot (drafts/active = everything ≤ 50, historical = ≤ asOf).
+//
+// The action meta map can be extended per app so that additional actions
+// (e.g. app-specific audit keys) get their own icons and labels.
+
+interface AuditRow {
+    id: string;
+    createdAt: string;
+    action: string;
+    entity: string;
+    entityId: string;
+    changes: Record<string, unknown> | null;
+    /** Legacy style: nested user object with email. */
+    user?: { email: string; firstName?: string; lastName?: string } | null;
+    /** Platform style: flat userEmail field. */
+    userEmail?: string | null;
+}
+
+interface ActionMeta {
+    icon: string;
+    color: string;
+    label: string;
+}
+
+const props = withDefaults(
+    defineProps<{
+        snapshot: CatalogSnapshot;
+        loadAudit: () => Promise<AuditRow[]>;
+        actionMeta?: Record<string, ActionMeta>;
+    }>(),
+    {
+        actionMeta: () => ({}),
+    },
+);
+
+const loading = ref(false);
+const events = ref<AuditRow[]>([]);
+
+const DEFAULT_ACTION_META: Record<string, ActionMeta> = {
+    PLAN_VERSION_PUBLISH: {
+        icon: 'rocket_launch',
+        color: '#047857',
+        label: 'Plan publiziert',
+    },
+    PLAN_VERSION_DRAFT_CREATE: {
+        icon: 'edit_note',
+        color: '#b45309',
+        label: 'Plan-Draft angelegt',
+    },
+    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff', label: 'Plan-Draft geändert' },
+    PLAN_VERSION_DRAFT_DELETE: {
+        icon: 'delete',
+        color: '#dc2626',
+        label: 'Plan-Draft gelöscht',
+    },
+    PLAN_CATALOG_UPDATE: {
+        icon: 'rocket_launch',
+        color: '#047857',
+        label: 'Catalog publiziert',
+    },
+};
+
+function meta(action: string): ActionMeta {
+    return (
+        props.actionMeta[action] ??
+        DEFAULT_ACTION_META[action] ?? {
+            icon: 'circle',
+            color: '#64748b',
+            label: action,
+        }
+    );
+}
+
+function entityLabel(e: AuditRow): string {
+    const c = (e.changes ?? {}) as {
+        planId?: string;
+        key?: string;
+        featureKey?: string;
+        version?: number;
+    };
+    const versionPart = c.version != null ? ` v${c.version}` : '';
+    if (c.planId) return `${c.planId}${versionPart}`;
+    if (c.key) return `${c.key}${versionPart}`;
+    if (c.featureKey) return `${c.featureKey}${versionPart}`;
+    return e.entity;
+}
+
+function detail(e: AuditRow): string {
+    const c = (e.changes ?? {}) as {
+        changeNote?: string;
+        nonRegressive?: boolean;
+        changes?: unknown;
+    };
+    if (c.changeNote) return c.changeNote;
+    if (c.nonRegressive === false) return 'Mit mindestens einer Verschlechterung publiziert.';
+    if (Array.isArray(c.changes)) return `${c.changes.length} Felder geändert.`;
+    return e.action;
+}
+
+function actorEmail(e: AuditRow): string | null {
+    return e.user?.email ?? e.userEmail ?? null;
+}
+
+onMounted(reload);
+watch(() => props.snapshot.id, reload);
+
+async function reload(): Promise<void> {
+    loading.value = true;
+    try {
+        const merged = await props.loadAudit();
+        events.value = filterForSnapshot(merged);
+    } finally {
+        loading.value = false;
+    }
+}
+
+function filterForSnapshot(rows: AuditRow[]): AuditRow[] {
+    if (props.snapshot.kind !== 'historical' || !props.snapshot.asOf) return rows.slice(0, 50);
+    const asOfMs = Date.parse(props.snapshot.asOf);
+    return rows.filter((r) => Date.parse(r.createdAt) <= asOfMs).slice(0, 50);
+}
+</script>
+
+<style scoped>
+.sa-pv-audit {
+    padding: 20px 28px;
+}
+.sa-pv-audit__card {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 12px;
+    overflow: hidden;
+}
+.sa-pv-audit__head {
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.sa-pv-audit__head h3 {
+    margin: 0;
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--sa-heading, #0f172a);
+}
+.sa-pv-audit__head-icon {
+    color: var(--sa-primary, #3f6bff);
+}
+.sa-pv-audit__count {
+    font-size: 12px;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-audit__refresh {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 11.5px;
+    font-weight: 600;
+    color: var(--sa-body, #1e293b);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.sa-pv-audit__loading,
+.sa-pv-audit__empty {
+    padding: 24px;
+    color: var(--sa-muted, #64748b);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.sa-pv-audit__list {
+    padding: 8px 0;
+}
+.sa-pv-audit__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 12px 18px;
+    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
+}
+.sa-pv-audit__item--last {
+    border-bottom: none;
+}
+
+.sa-pv-audit__icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.sa-pv-audit__body {
+    flex: 1;
+    min-width: 0;
+}
+.sa-pv-audit__title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.sa-pv-audit__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--sa-heading, #0f172a);
+}
+.sa-pv-audit__entity {
+    font-family: var(--sa-font-mono, ui-monospace, monospace);
+    font-size: 10.5px;
+    font-weight: 600;
+    color: var(--sa-muted, #64748b);
+    background: #f1f5f9;
+    padding: 1px 6px;
+    border-radius: 4px;
+}
+.sa-pv-audit__detail {
+    font-size: 12.5px;
+    color: var(--sa-body, #1e293b);
+    margin-top: 3px;
+    line-height: 1.4;
+}
+.sa-pv-audit__meta {
+    font-size: 11px;
+    color: var(--sa-muted, #64748b);
+    margin-top: 4px;
+    display: flex;
+    gap: 10px;
+}
+.sa-pv-audit__meta span {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+</style>

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -0,0 +1,269 @@
+<template>
+    <div class="sa-pv-diff">
+        <div class="sa-pv-diff__overview">
+            <div class="sa-pv-diff__hero">
+                <q-icon name="compare_arrows" size="22px" color="white" />
+            </div>
+            <div>
+                <div class="sa-pv-diff__legend">Vergleich</div>
+                <div class="sa-pv-diff__title">
+                    {{ from.label }} <span class="sa-pv-diff__sep">→</span> {{ to.label }}
+                </div>
+            </div>
+            <div class="sa-pv-diff__spacer" />
+            <div class="sa-pv-diff__stats">
+                <div class="sa-pv-diff__stat">
+                    <div class="sa-pv-diff__stat-label">Pakete geändert</div>
+                    <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--warn">
+                        {{ planChangedCount }}
+                    </div>
+                </div>
+                <div v-if="regressionCount > 0" class="sa-pv-diff__stat">
+                    <div class="sa-pv-diff__stat-label">Regressionen</div>
+                    <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--bad">
+                        {{ regressionCount }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <h2 class="sa-pv-diff__section">Pakete</h2>
+        <PlanDiffCard
+            v-for="d in planDiffs"
+            :key="d.id"
+            :title="d.id"
+            :version-old="d.versionOld"
+            :version-new="d.versionNew"
+            :accent="planAccent(d.id)"
+            :changes="d.changes"
+            :field-labels="fieldLabels"
+        />
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VersionChange } from '@saasicat/types';
+import type { CatalogSnapshot, ResolvedPlan } from '../../plan-versions-catalog.js';
+import PlanDiffCard from './PlanDiffCard.vue';
+
+interface SnapshotEntityDiff {
+    id: string;
+    versionOld: number | null;
+    versionNew: number | null;
+    changes: VersionChange[];
+}
+
+const props = defineProps<{
+    from: CatalogSnapshot;
+    to: CatalogSnapshot;
+    /** Accent color per plan ID (for the diff card icons). */
+    planAccents?: Record<string, string>;
+    /** Field label overrides (e.g. `{ maxVehicles: 'Max. Fahrzeuge' }`). */
+    fieldLabels?: Record<string, string>;
+}>();
+
+function planAccent(planId: string): string {
+    return props.planAccents?.[planId] ?? '#3f6bff';
+}
+
+const planDiffs = computed<SnapshotEntityDiff[]>(() => {
+    const out: SnapshotEntityDiff[] = [];
+    const ids = uniqueIds(
+        props.from.plans.map((p) => p.planId),
+        props.to.plans.map((p) => p.planId),
+    );
+    for (const id of ids) {
+        const a = props.from.plans.find((p) => p.planId === id) ?? null;
+        const b = props.to.plans.find((p) => p.planId === id) ?? null;
+        out.push({
+            id,
+            versionOld: a?.version ?? null,
+            versionNew: b?.version ?? null,
+            changes: diffPlan(a, b),
+        });
+    }
+    return out;
+});
+
+const planChangedCount = computed(() => planDiffs.value.filter((d) => d.changes.length > 0).length);
+const regressionCount = computed(() =>
+    planDiffs.value.reduce(
+        (sum, d) => sum + d.changes.filter((c) => c.direction === 'REGRESSION').length,
+        0,
+    ),
+);
+
+function uniqueIds(a: string[], b: string[]): string[] {
+    return Array.from(new Set([...a, ...b]));
+}
+
+function diffPlan(a: ResolvedPlan | null, b: ResolvedPlan | null): VersionChange[] {
+    if (!a && b)
+        return [
+            { field: 'plan.added', oldValue: null, newValue: b.planId, direction: 'IMPROVEMENT' },
+        ];
+    if (a && !b)
+        return [
+            { field: 'plan.removed', oldValue: a.planId, newValue: null, direction: 'REGRESSION' },
+        ];
+    if (!a || !b) return [];
+    const out: VersionChange[] = [];
+    pushFeatures(out, a.features, b.features);
+    // Quotas: compare all known keys from both snapshots.
+    const quotaKeys = new Set<string>([...Object.keys(a.quotas), ...Object.keys(b.quotas)]);
+    for (const key of quotaKeys) {
+        pushNumber(out, `quotas.${key}`, a.quotas[key] ?? 0, b.quotas[key] ?? 0, 'higher');
+    }
+    pushDecimal(out, 'monthlyNet', a.monthlyNet, b.monthlyNet, 'lower');
+    pushDecimal(out, 'yearlyNet', a.yearlyNet, b.yearlyNet, 'lower');
+    return out;
+}
+
+function pushFeatures(
+    out: VersionChange[],
+    oldF: readonly string[],
+    newF: readonly string[],
+): void {
+    const oldSet = new Set(oldF);
+    const newSet = new Set(newF);
+    const removed = oldF.filter((f) => !newSet.has(f));
+    const added = newF.filter((f) => !oldSet.has(f));
+    if (removed.length > 0) {
+        out.push({
+            field: 'features.removed',
+            oldValue: removed,
+            newValue: [],
+            direction: 'REGRESSION',
+        });
+    }
+    if (added.length > 0) {
+        out.push({
+            field: 'features.added',
+            oldValue: [],
+            newValue: added,
+            direction: 'IMPROVEMENT',
+        });
+    }
+}
+
+function pushNumber(
+    out: VersionChange[],
+    field: string,
+    oldV: number,
+    newV: number,
+    polarity: 'higher' | 'lower',
+): void {
+    if (oldV === newV) return;
+    out.push({
+        field,
+        oldValue: oldV,
+        newValue: newV,
+        direction: directionFor(newV - oldV, polarity),
+    });
+}
+
+function pushDecimal(
+    out: VersionChange[],
+    field: string,
+    oldV: number,
+    newV: number,
+    polarity: 'higher' | 'lower',
+): void {
+    if (oldV === newV) return;
+    out.push({
+        field,
+        oldValue: oldV.toFixed(2),
+        newValue: newV.toFixed(2),
+        direction: directionFor(newV - oldV, polarity),
+    });
+}
+
+function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChange['direction'] {
+    if (delta === 0) return 'NEUTRAL';
+    const positive = delta > 0;
+    if (polarity === 'higher') return positive ? 'IMPROVEMENT' : 'REGRESSION';
+    return positive ? 'REGRESSION' : 'IMPROVEMENT';
+}
+</script>
+
+<style scoped>
+.sa-pv-diff {
+    padding: 20px 28px;
+}
+.sa-pv-diff__overview {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 12px;
+    padding: 16px 20px;
+    margin-bottom: 18px;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+}
+.sa-pv-diff__hero {
+    width: 44px;
+    height: 44px;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #f59e0b, #d97706);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.sa-pv-diff__legend {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--sa-muted, #64748b);
+    text-transform: uppercase;
+}
+.sa-pv-diff__title {
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--sa-heading, #0f172a);
+}
+.sa-pv-diff__sep {
+    color: var(--sa-muted, #64748b);
+    font-weight: 500;
+}
+.sa-pv-diff__spacer {
+    flex: 1;
+}
+.sa-pv-diff__stats {
+    display: flex;
+    gap: 14px;
+}
+.sa-pv-diff__stat {
+    text-align: right;
+}
+.sa-pv-diff__stat-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--sa-muted, #64748b);
+    text-transform: uppercase;
+}
+.sa-pv-diff__stat-value {
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-weight: 700;
+    font-size: 22px;
+}
+.sa-pv-diff__stat-value--warn {
+    color: var(--sa-warning, #b45309);
+}
+.sa-pv-diff__stat-value--bad {
+    color: var(--sa-negative, #dc2626);
+}
+
+.sa-pv-diff__section {
+    margin: 22px 0 10px;
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--sa-muted, #64748b);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+</style>

package/src/pages-standard/plan-versions/PlanVersionsKpi.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="sa-pv-kpi">
+        <div class="sa-pv-kpi__icon"><q-icon :name="icon" size="18px" /></div>
+        <div>
+            <div class="sa-pv-kpi__label">{{ label }}</div>
+            <div class="sa-pv-kpi__value">
+                {{ value }}
+                <span v-if="sub" class="sa-pv-kpi__sub">{{ sub }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    label: string;
+    value: number | string;
+    icon: string;
+    sub?: string;
+}>();
+</script>
+
+<style scoped>
+.sa-pv-kpi {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 10px;
+    padding: 12px 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.sa-pv-kpi__icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.sa-pv-kpi__icon :deep(.q-icon) {
+    color: var(--sa-primary, #3f6bff);
+}
+.sa-pv-kpi__label {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--sa-muted, #64748b);
+    text-transform: uppercase;
+}
+.sa-pv-kpi__value {
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-weight: 700;
+    font-size: 20px;
+    color: var(--sa-heading, #0f172a);
+    line-height: 1.1;
+    margin-top: 2px;
+}
+.sa-pv-kpi__sub {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--sa-muted, #64748b);
+}
+</style>