@saasicat/ui-vue 0.2.0

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

@@ -0,0 +1,300 @@
+<template>
+    <aside class="sa-pv-timeline">
+        <div class="sa-pv-timeline__head">
+            <div class="sa-pv-timeline__row">
+                <div class="sa-pv-timeline__title">{{ title ?? 'Plan-Catalog' }}</div>
+            </div>
+            <div class="sa-pv-timeline__count">{{ snapshots.length }} Snapshots</div>
+        </div>
+
+        <div class="sa-pv-timeline__list">
+            <div v-for="(s, i) in snapshots" :key="s.id" class="sa-pv-timeline__item">
+                <span
+                    v-if="i < snapshots.length - 1"
+                    class="sa-pv-timeline__line"
+                    aria-hidden="true"
+                />
+                <button
+                    type="button"
+                    class="sa-pv-timeline__btn"
+                    :class="{ 'sa-pv-timeline__btn--selected': selectedId === s.id }"
+                    @click="emit('select', s.id)"
+                    @contextmenu.prevent="emit('setCompare', s.id)"
+                >
+                    <span
+                        class="sa-pv-timeline__node"
+                        :class="`sa-pv-timeline__node--${s.status.toLowerCase()}`"
+                    >
+                        <q-icon v-if="s.kind === 'active'" name="check" size="13px" />
+                        <q-icon v-else-if="s.kind === 'drafts'" name="edit_note" size="12px" />
+                        <span v-else class="sa-pv-timeline__node-dot" />
+                    </span>
+                    <span class="sa-pv-timeline__main">
+                        <span class="sa-pv-timeline__top">
+                            <span class="sa-pv-timeline__label">{{ s.label }}</span>
+                            <span
+                                class="sa-pv-timeline__status"
+                                :class="`sa-pv-timeline__status--${s.status.toLowerCase()}`"
+                            >
+                                {{ statusLabel(s.status) }}
+                            </span>
+                            <span v-if="compareId === s.id" class="sa-pv-timeline__vs">VS</span>
+                        </span>
+                        <span class="sa-pv-timeline__h2">{{ s.title }}</span>
+                        <span class="sa-pv-timeline__meta">
+                            <q-icon
+                                :name="s.kind === 'drafts' ? 'edit_note' : 'schedule'"
+                                size="11px"
+                            />
+                            <span>{{ metaText(s) }}</span>
+                        </span>
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <div class="sa-pv-timeline__foot">
+            <div class="sa-pv-timeline__hint">
+                <q-icon name="info" size="13px" />
+                <span>Rechtsklick auf Snapshot → vergleichen</span>
+            </div>
+            <button
+                v-if="compareId"
+                type="button"
+                class="sa-pv-timeline__clear-btn"
+                @click="emit('clearCompare')"
+            >
+                Vergleich beenden
+            </button>
+        </div>
+    </aside>
+</template>
+
+<script setup lang="ts">
+import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
+import { formatRelativeDe } from './format.js';
+
+defineProps<{
+    snapshots: CatalogSnapshot[];
+    selectedId: string;
+    compareId: string | null;
+    title?: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', id: string): void;
+    (e: 'setCompare', id: string): void;
+    (e: 'clearCompare'): void;
+}>();
+
+function statusLabel(status: CatalogSnapshot['status']): string {
+    if (status === 'DRAFT') return 'DRAFT';
+    if (status === 'ACTIVE') return 'AKTIV';
+    return 'ARCHIV';
+}
+
+function metaText(s: CatalogSnapshot): string {
+    if (s.kind === 'drafts') {
+        return s.draftCount === 0 ? 'keine offenen Drafts' : `${s.draftCount} offen`;
+    }
+    if (s.publishedAt) return formatRelativeDe(s.publishedAt);
+    return 'unbekannt';
+}
+</script>
+
+<style scoped>
+.sa-pv-timeline {
+    width: 280px;
+    flex-shrink: 0;
+    background: var(--sa-bg-surface, #ffffff);
+    border-right: 1px solid var(--sa-border, #e2e8f0);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.sa-pv-timeline__head {
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    background: #fafbfc;
+}
+.sa-pv-timeline__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.sa-pv-timeline__title {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--sa-muted, #64748b);
+    text-transform: uppercase;
+}
+.sa-pv-timeline__count {
+    margin-top: 2px;
+    font-size: 11px;
+    color: var(--sa-muted, #64748b);
+}
+
+.sa-pv-timeline__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 4px;
+}
+.sa-pv-timeline__item {
+    position: relative;
+}
+.sa-pv-timeline__line {
+    position: absolute;
+    left: 22px;
+    top: 36px;
+    bottom: -6px;
+    width: 2px;
+    background: var(--sa-border, #e2e8f0);
+    z-index: 0;
+}
+.sa-pv-timeline__btn {
+    position: relative;
+    z-index: 1;
+    width: calc(100% - 8px);
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+    margin: 2px 4px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.12s;
+    font-family: inherit;
+    color: inherit;
+}
+.sa-pv-timeline__btn:hover:not(.sa-pv-timeline__btn--selected) {
+    background: var(--sa-border-soft, #f1f5f9);
+}
+.sa-pv-timeline__btn--selected {
+    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
+    border-color: var(--sa-primary-border, rgba(63, 107, 255, 0.18));
+}
+
+.sa-pv-timeline__node {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 2px solid;
+}
+.sa-pv-timeline__node--draft {
+    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
+    border-color: var(--sa-warning, #b45309);
+    color: var(--sa-warning, #b45309);
+}
+.sa-pv-timeline__node--active {
+    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
+    border-color: var(--sa-positive, #047857);
+    color: var(--sa-positive, #047857);
+}
+.sa-pv-timeline__node--archived {
+    background: #f1f5f9;
+    border-color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-timeline__node-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.sa-pv-timeline__main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+.sa-pv-timeline__top {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 2px;
+}
+.sa-pv-timeline__label {
+    font-family: var(--sa-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--sa-heading, #0f172a);
+}
+.sa-pv-timeline__status {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+.sa-pv-timeline__status--draft {
+    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
+    color: var(--sa-warning, #b45309);
+}
+.sa-pv-timeline__status--active {
+    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
+    color: var(--sa-positive, #047857);
+}
+.sa-pv-timeline__status--archived {
+    background: #f1f5f9;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-timeline__vs {
+    font-size: 9.5px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    background: #fef3c7;
+    color: #92400e;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+.sa-pv-timeline__h2 {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--sa-body, #1e293b);
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sa-pv-timeline__meta {
+    font-size: 11px;
+    color: var(--sa-muted, #64748b);
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.sa-pv-timeline__foot {
+    padding: 10px 14px;
+    border-top: 1px solid var(--sa-border, #e2e8f0);
+    background: #fafbfc;
+    font-size: 11px;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-timeline__hint {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.sa-pv-timeline__clear-btn {
+    margin-top: 6px;
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 6px;
+    padding: 4px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sa-body, #1e293b);
+    cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+    <div v-if="!changes || changes.length === 0" class="sa-pv-diff-preview__empty">
+        Keine Änderungen gegenüber der Vorgängerversion.
+    </div>
+    <div v-else class="sa-pv-diff-preview__list">
+        <div
+            v-for="(c, idx) in changes"
+            :key="idx"
+            class="sa-pv-diff-preview__row"
+            :class="rowClass(c.direction)"
+        >
+            <div class="sa-pv-diff-preview__direction">
+                <q-icon :name="iconFor(c.direction)" size="16px" />
+                <span>{{ labelFor(c.direction) }}</span>
+            </div>
+            <div class="sa-pv-diff-preview__field">{{ humanFieldLabel(c.field) }}</div>
+            <div class="sa-pv-diff-preview__values">
+                <span v-if="c.field !== 'features.added'" class="old">{{
+                    formatValue(c.oldValue)
+                }}</span>
+                <q-icon
+                    v-if="c.field !== 'features.added' && c.field !== 'features.removed'"
+                    name="arrow_forward"
+                    size="14px"
+                />
+                <span v-if="c.field !== 'features.removed'" class="new">{{
+                    formatValue(c.newValue)
+                }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VersionChange } from '@saasicat/types';
+
+const props = defineProps<{
+    changes?: VersionChange[] | null;
+    /**
+     * Optional: field labels (e.g. `{ maxUsers: 'Max. Benutzer' }`).
+     * Apps map their own Quota fields here; the default covers the generic
+     * platform fields.
+     */
+    fieldLabels?: Record<string, string>;
+}>();
+
+const DEFAULT_FIELD_LABELS: Record<string, string> = {
+    'features.added': 'Hinzugefügte Features',
+    'features.removed': 'Entfernte Features',
+    maxUsers: 'Max. Benutzer',
+    maxStorageGb: 'Speicher (GB)',
+    monthlyNet: 'Preis monatlich (netto)',
+    yearlyNet: 'Preis jährlich (netto)',
+    unitSize: 'Einheitsgröße',
+};
+
+const mergedFieldLabels = computed(() => ({
+    ...DEFAULT_FIELD_LABELS,
+    ...(props.fieldLabels ?? {}),
+}));
+
+function iconFor(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'trending_up';
+    if (direction === 'REGRESSION') return 'trending_down';
+    return 'remove';
+}
+
+function labelFor(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'Verbesserung';
+    if (direction === 'REGRESSION') return 'Verschlechterung';
+    return 'Neutral';
+}
+
+function rowClass(direction: VersionChange['direction']): string {
+    if (direction === 'IMPROVEMENT') return 'sa-pv-diff-preview__row--improvement';
+    if (direction === 'REGRESSION') return 'sa-pv-diff-preview__row--regression';
+    return 'sa-pv-diff-preview__row--neutral';
+}
+
+function humanFieldLabel(field: string): string {
+    return mergedFieldLabels.value[field] ?? field;
+}
+
+function formatValue(value: unknown): string {
+    if (value === null || value === undefined) return '–';
+    if (Array.isArray(value)) {
+        if (value.length === 0) return '–';
+        return value.join(', ');
+    }
+    if (typeof value === 'string' && /^\d+\.\d{2}$/.test(value)) {
+        return `${value} €`;
+    }
+    return String(value);
+}
+</script>
+
+<style scoped>
+.sa-pv-diff-preview__empty {
+    color: #64748b;
+    font-style: italic;
+    padding: 12px;
+    background: #f8fafc;
+    border-radius: 8px;
+    border: 1px dashed #cbd5e1;
+}
+.sa-pv-diff-preview__list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.sa-pv-diff-preview__row {
+    display: grid;
+    grid-template-columns: 160px 200px 1fr;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 1px solid;
+    font-size: 13px;
+    align-items: center;
+}
+.sa-pv-diff-preview__row--improvement {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    color: #166534;
+}
+.sa-pv-diff-preview__row--regression {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #991b1b;
+}
+.sa-pv-diff-preview__row--neutral {
+    background: #f8fafc;
+    border-color: #e2e8f0;
+    color: #475569;
+}
+.sa-pv-diff-preview__direction {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.sa-pv-diff-preview__field {
+    color: #0f172a;
+    font-weight: 500;
+}
+.sa-pv-diff-preview__values {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.sa-pv-diff-preview__values .old {
+    color: #94a3b8;
+    text-decoration: line-through;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 12px;
+}
+.sa-pv-diff-preview__values .new {
+    color: inherit;
+    font-weight: 600;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 12px;
+}
+</style>

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

@@ -0,0 +1,53 @@
+// Formatting helpers for the plan-versions views.
+//
+// Phase 2c: Ported from a consumer admin.
+// The time reference point for `formatRelativeDe` 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).
+
+export function fmtEuro(n: number): string {
+    if (n === 0) return 'individuell';
+    return n.toFixed(2).replace('.', ',') + ' €';
+}
+
+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 formatRelativeDe(iso: string | undefined, now: Date = new Date()): string {
+    if (!iso) return '—';
+    const d = new Date(iso);
+    const diffMs = now.getTime() - d.getTime();
+    const days = Math.floor(diffMs / 86_400_000);
+    if (days === 0) return 'heute';
+    if (days === 1) return 'gestern';
+    if (days < 7) return `vor ${days} Tagen`;
+    if (days < 30) {
+        const w = Math.floor(days / 7);
+        return `vor ${w} Woche${w > 1 ? 'n' : ''}`;
+    }
+    if (days < 365) return `vor ${Math.floor(days / 30)} Monaten`;
+    const y = Math.floor(days / 365);
+    return `vor ${y} Jahr${y > 1 ? 'en' : ''}`;
+}
+
+export function formatDateDe(iso: string | undefined): string {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+
+export function formatTsDe(iso: string): string {
+    return new Date(iso).toLocaleString('de-DE', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}

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

@@ -0,0 +1,33 @@
+// Shared types of the plan version views.
+//
+// Phase 2c: ported from a consumer admin;
+// source type generic over the platform version rows.
+
+import type { PlanVersionRow } from '@saasicat/types';
+
+export type PlanVersionViewMode = 'list' | 'matrix' | 'audit';
+
+export type DraftKind = 'plan';
+
+export interface DraftEntry {
+    kind: DraftKind;
+    id: string;
+    label: string;
+    detail: string;
+    source: PlanVersionRow;
+    baseId: string | null;
+    hasChangeNote: boolean;
+}
+
+export interface ValidationCheck {
+    ok: boolean;
+    label: string;
+    detail: string;
+}
+
+export interface PublishResult {
+    id: string;
+    label: string;
+    ok: boolean;
+    error?: string;
+}

package/src/pages-standard/plans-page/PlanArchiveDialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <q-card style="min-width: 440px">
+            <q-card-section>
+                <div class="text-h6">Plan komplett löschen?</div>
+                <div class="text-body2 q-mt-sm">
+                    Plan <code>{{ target?.plan.planKey }}</code> wird
+                    <b>unwiderruflich aus der DB entfernt</b>. Da der Plan keine published Version
+                    hat, sind keine Subscriptions betroffen.
+                </div>
+                <div class="text-caption text-grey-7 q-mt-sm">
+                    Vertragsschutz P1: Pläne mit jemals veröffentlichten Versionen können nicht
+                    gelöscht werden — das Backend würde 422 antworten.
+                </div>
+            </q-card-section>
+            <q-banner v-if="error" class="bg-warning q-mx-md q-mb-md" rounded>
+                {{ error }}
+            </q-banner>
+            <q-card-actions align="right">
+                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn
+                    color="negative"
+                    label="Löschen"
+                    :loading="archiving"
+                    @click="$emit('execute')"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { PlanArchiveTarget } from './types.js';
+
+defineProps<{
+    modelValue: boolean;
+    target: PlanArchiveTarget | null;
+    error: string | null;
+    archiving: boolean;
+}>();
+
+defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'execute'): void;
+}>();
+</script>