@saasicat/ui-vue 0.2.0

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="mc-window">
+        <div class="mc-chrome">
+            <span class="mc-chrome-dot" style="background: #ef4444" />
+            <span class="mc-chrome-dot" style="background: #f59e0b" />
+            <span class="mc-chrome-dot" style="background: #10b981" />
+            <div class="mc-chrome-url">{{ previewUrl }}</div>
+        </div>
+        <div class="mc-canvas">
+            <div class="mc-eyebrow">Preise &amp; Pakete</div>
+            <h1 class="mc-hero">Der passende Plan</h1>
+            <p class="mc-sub">
+                Flexibel skalieren, jederzeit upgraden. Kein Setup-Fee, monatlich kündbar.
+            </p>
+
+            <div v-if="visibleRows.length === 0" class="mc-banner mc-banner--info">
+                Kein Plan ist aktuell für den Public-Catalog sichtbar. Aktiviere die Sichtbarkeit im
+                Tab <strong>Marketing-Verwaltung</strong>.
+            </div>
+
+            <div v-else class="mc-grid">
+                <div
+                    v-for="row in visibleRows"
+                    :key="row.plan.id"
+                    class="mc-card"
+                    :class="{ featured: row.m.highlight, 'has-promo': !!promoOf(row) }"
+                >
+                    <div
+                        v-if="promoOf(row)"
+                        class="mc-promo-ribbon"
+                        :style="{ background: promoColorOf(row) }"
+                    >
+                        {{ promoBadgeOf(row) }}
+                    </div>
+                    <span v-else-if="row.m.badge" class="mc-card-badge">{{ row.m.badge }}</span>
+                    <div class="mc-card-key">{{ row.plan.planKey }}</div>
+                    <div class="mc-card-name">
+                        {{ row.m.displayLabel || row.plan.label }}
+                    </div>
+                    <div class="mc-card-desc">
+                        {{ row.m.description || row.plan.description || '—' }}
+                    </div>
+
+                    <div class="mc-card-price">
+                        <template v-if="row.m.priceTag">
+                            <span class="mc-card-price-big" style="font-size: 22px">
+                                {{ row.m.priceTag }}
+                            </span>
+                        </template>
+                        <template v-else-if="!row.liveVersion">
+                            <span class="mc-card-price-big" style="font-size: 22px">
+                                Auf Anfrage
+                            </span>
+                        </template>
+                        <template v-else-if="promoResultOf(row)">
+                            <span class="mc-card-price-big">
+                                {{ formatEuro(promoResultOf(row)?.discounted ?? 0) }}
+                            </span>
+                            <span class="mc-card-price-unit">/ Monat</span>
+                        </template>
+                        <template v-else>
+                            <span class="mc-card-price-big">
+                                {{ formatEuro(monthlyOf(row)) }}
+                            </span>
+                            <span class="mc-card-price-unit">/ Monat</span>
+                        </template>
+                    </div>
+                    <div v-if="promoResultOf(row)" class="mc-card-price-strike">
+                        <s>{{ formatEuro(promoResultOf(row)?.original ?? 0) }}</s>
+                        <span class="mc-price-regular">regulär</span>
+                    </div>
+                    <div
+                        v-else-if="row.liveVersion && yearlyOf(row) > 0 && !row.m.priceTag"
+                        class="mc-card-price-y"
+                    >
+                        oder {{ formatEuro(yearlyOf(row)) }} jährlich
+                    </div>
+
+                    <button type="button" class="mc-card-cta">{{ ctaText(row) }}</button>
+                    <div v-if="showTrialNote(row) && !promoOf(row)" class="mc-card-trialnote">
+                        {{ row.m.trialDays }} Tage kostenlos · keine Kreditkarte nötig
+                    </div>
+                    <div v-if="promoFineprintOf(row)" class="mc-card-fineprint">
+                        {{ promoFineprintOf(row) }}
+                    </div>
+
+                    <div class="mc-card-includes">Top-Features</div>
+                    <ul v-if="row.m.topFeatures.length > 0" class="mc-card-features">
+                        <li v-for="(f, i) in row.m.topFeatures" :key="i">
+                            <span class="mc-tick">
+                                <svg
+                                    width="14"
+                                    height="14"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                >
+                                    <path d="M20 6 9 17l-5-5" />
+                                </svg>
+                            </span>
+                            <span>
+                                {{ topFeatureLabel(f) }}<template v-if="f.strong"> · </template>
+                                <b v-if="f.strong">{{ f.strong }}</b>
+                            </span>
+                        </li>
+                    </ul>
+                    <div v-else class="mc-card-features-empty">Keine Top-Features gepflegt.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {
+    MarketingTopFeature,
+    PromotionResult,
+    PromotionRow,
+} from '@saasicat/types';
+import type { MarketingRow } from './types.js';
+
+defineProps<{
+    visibleRows: MarketingRow[];
+    previewUrl: string;
+    monthlyOf: (row: MarketingRow) => number;
+    yearlyOf: (row: MarketingRow) => number;
+    formatEuro: (value: number) => string;
+    promoOf: (row: MarketingRow) => PromotionRow | null;
+    promoResultOf: (row: MarketingRow) => PromotionResult | null;
+    promoBadgeOf: (row: MarketingRow) => string;
+    promoFineprintOf: (row: MarketingRow) => string;
+    promoColorOf: (row: MarketingRow) => string;
+    ctaText: (row: MarketingRow) => string;
+    showTrialNote: (row: MarketingRow) => boolean;
+    topFeatureLabel: (feature: MarketingTopFeature) => string;
+}>();
+</script>

package/src/pages-standard/marketing-catalog/MarketingCatalogToolbar.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="mc-toolbar">
+        <div class="mc-tabbar">
+            <button
+                type="button"
+                class="mc-tab"
+                :class="{ active: tab === 'preview' }"
+                @click="$emit('update:tab', 'preview')"
+            >
+                Public-Catalog Vorschau
+            </button>
+            <button
+                type="button"
+                class="mc-tab"
+                :class="{ active: tab === 'admin' }"
+                @click="$emit('update:tab', 'admin')"
+            >
+                Marketing-Verwaltung
+            </button>
+            <button
+                type="button"
+                class="mc-tab"
+                :class="{ active: tab === 'promos' }"
+                @click="$emit('update:tab', 'promos')"
+            >
+                Aktionen
+                <span v-if="activePromoCount > 0" class="mc-tab-count">
+                    {{ activePromoCount }}
+                </span>
+            </button>
+        </div>
+        <div class="mc-meta">
+            <span>catalogVersion</span>
+            <code>{{ catalogVersion }}</code>
+            <span>·</span>
+            <span
+                >locale <code>{{ activeLocale }}</code></span
+            >
+            <span>·</span>
+            <span>currency <code>EUR</code></span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { MarketingCatalogTab } from './types.js';
+
+defineProps<{
+    tab: MarketingCatalogTab;
+    activePromoCount: number;
+    catalogVersion: string;
+    activeLocale: string;
+}>();
+
+defineEmits<{
+    (e: 'update:tab', tab: MarketingCatalogTab): void;
+}>();
+</script>

package/src/pages-standard/marketing-catalog/types.ts

@@ -0,0 +1,43 @@
+import type {
+    MarketingProjectionRow,
+    MarketingTopFeature,
+    PlanRow,
+    PlanVersionRow,
+} from '@saasicat/types';
+
+export type MarketingCatalogTab = 'preview' | 'admin' | 'promos';
+
+/** Resolved marketing values — from the projection or plan defaults. */
+export interface ResolvedMarketing {
+    /** Locale-specific plan name; empty = fallback to `plan.label` (DE master data). */
+    displayLabel: string;
+    visible: boolean;
+    highlight: boolean;
+    badge: string;
+    priority: number;
+    description: string;
+    trialEnabled: boolean;
+    trialDays: number;
+    ctaLabel: string | null;
+    topFeatures: MarketingTopFeature[];
+    priceTag: string | null;
+}
+
+export interface MarketingRow {
+    plan: PlanRow;
+    accent: string;
+    /** Version currently selected in the UI (default: today-active). */
+    liveVersion: PlanVersionRow | null;
+    /** All published versions of the plan, sorted by validFrom asc. */
+    publishedVersions: PlanVersionRow[];
+    projection: MarketingProjectionRow | null;
+    m: ResolvedMarketing;
+}
+
+export interface FeatureSuggestion {
+    /** Feature/quota key — persisted on the top feature. */
+    key: string;
+    /** Translated display label (only for the suggestion chip). */
+    label: string;
+    strong: string;
+}

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

@@ -0,0 +1,132 @@
+<template>
+    <div v-if="changes.length === 0" class="sa-pv-diff-card sa-pv-diff-card--noop">
+        <div class="sa-pv-diff-card__noop-icon"><q-icon name="check" size="14px" /></div>
+        <div>
+            <div class="sa-pv-diff-card__name">
+                {{ title }}
+                <span v-if="versionNew" class="sa-pv-diff-card__ver">v{{ versionNew }}</span>
+            </div>
+            <div class="sa-pv-diff-card__sub">Keine Änderungen</div>
+        </div>
+    </div>
+    <div v-else class="sa-pv-diff-card">
+        <header class="sa-pv-diff-card__head">
+            <span
+                class="sa-pv-diff-card__accent"
+                :style="{ background: `${accent}14`, borderColor: `${accent}40` }"
+            >
+                <q-icon name="inventory_2" size="14px" :style="{ color: accent }" />
+            </span>
+            <span class="sa-pv-diff-card__name">{{ title }}</span>
+            <span v-if="versionOld != null && versionNew != null" class="sa-pv-diff-card__ver">
+                v{{ versionOld }} → v{{ versionNew }}
+            </span>
+            <span v-else-if="versionNew != null" class="sa-pv-diff-card__ver"
+                >+ v{{ versionNew }}</span
+            >
+            <span v-else-if="versionOld != null" class="sa-pv-diff-card__ver"
+                >− v{{ versionOld }}</span
+            >
+            <span class="sa-pv-diff-card__count">
+                {{ changes.length }} Änderung{{ changes.length !== 1 ? 'en' : '' }}
+            </span>
+        </header>
+        <div class="sa-pv-diff-card__body">
+            <VersionDiffPreview :changes="changes" :field-labels="fieldLabels" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { VersionChange } from '@saasicat/types';
+import VersionDiffPreview from './VersionDiffPreview.vue';
+
+defineProps<{
+    title: string;
+    versionOld: number | null;
+    versionNew: number | null;
+    accent: string;
+    changes: VersionChange[];
+    fieldLabels?: Record<string, string>;
+}>();
+</script>
+
+<style scoped>
+.sa-pv-diff-card {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 10px;
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+.sa-pv-diff-card--noop {
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    opacity: 0.65;
+}
+.sa-pv-diff-card__noop-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: 7px;
+    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.sa-pv-diff-card__noop-icon :deep(.q-icon) {
+    color: var(--sa-positive, #047857);
+}
+
+.sa-pv-diff-card__head {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: #fafbfc;
+}
+.sa-pv-diff-card__accent {
+    width: 28px;
+    height: 28px;
+    border-radius: 7px;
+    border: 1px solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.sa-pv-diff-card__name {
+    font-weight: 700;
+    font-size: 14px;
+    color: var(--sa-heading, #0f172a);
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+}
+.sa-pv-diff-card__ver {
+    font-family: var(--sa-font-mono, ui-monospace, monospace);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sa-muted, #64748b);
+    background: #f1f5f9;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+.sa-pv-diff-card__sub {
+    font-size: 11.5px;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-diff-card__count {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
+    color: var(--sa-warning, #b45309);
+    padding: 2px 8px;
+    border-radius: 4px;
+    margin-left: auto;
+}
+.sa-pv-diff-card__body {
+    padding: 12px 16px;
+}
+</style>

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

@@ -0,0 +1,293 @@
+<template>
+    <header class="sa-pv-header">
+        <div class="sa-pv-header__row">
+            <div class="sa-pv-header__col">
+                <div class="sa-pv-header__chips">
+                    <span class="sa-pv-header__label">{{ snapshot.label }}</span>
+                    <PlanVersionStatusBadge :status="snapshot.status" />
+                    <template v-if="compareSnapshot">
+                        <q-icon name="compare_arrows" size="16px" class="sa-pv-header__cmp-icon" />
+                        <span class="sa-pv-header__label sa-pv-header__label--cmp">{{
+                            compareSnapshot.label
+                        }}</span>
+                        <button
+                            type="button"
+                            class="sa-pv-header__cmp-btn"
+                            @click="emit('clearCompare')"
+                        >
+                            <q-icon name="close" size="14px" /> Vergleich beenden
+                        </button>
+                    </template>
+                </div>
+                <h1 class="sa-pv-header__title">{{ snapshot.title }}</h1>
+                <p class="sa-pv-header__desc">{{ snapshot.description }}</p>
+
+                <div class="sa-pv-header__meta">
+                    <span
+                        v-if="snapshot.publishedAt"
+                        class="sa-pv-header__meta-item sa-pv-header__meta-item--ok"
+                    >
+                        <q-icon name="rocket_launch" size="14px" />
+                        Publiziert {{ formatDateDe(snapshot.publishedAt) }}
+                    </span>
+                    <span
+                        v-if="snapshot.kind === 'drafts'"
+                        class="sa-pv-header__meta-item sa-pv-header__meta-item--warn"
+                    >
+                        <q-icon name="edit_note" size="14px" />
+                        <strong>{{ snapshot.draftCount }}</strong> offene Drafts
+                    </span>
+                    <span
+                        v-if="snapshot.regressionCount > 0"
+                        class="sa-pv-header__meta-item sa-pv-header__meta-item--bad"
+                    >
+                        <q-icon name="trending_down" size="14px" />
+                        <strong>{{ snapshot.regressionCount }}</strong> Regression{{
+                            snapshot.regressionCount === 1 ? '' : 'en'
+                        }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="sa-pv-header__actions">
+                <button
+                    v-if="canPublish"
+                    type="button"
+                    class="sa-pv-header__publish"
+                    @click="emit('publish')"
+                >
+                    <q-icon name="rocket_launch" size="16px" />
+                    Publish-Flow starten
+                </button>
+            </div>
+        </div>
+
+        <div class="sa-pv-header__view-row">
+            <div
+                class="sa-pv-header__switcher"
+                :class="{ 'sa-pv-header__switcher--disabled': !!compareSnapshot }"
+            >
+                <button
+                    v-for="m in modes"
+                    :key="m.id"
+                    type="button"
+                    class="sa-pv-header__mode-btn"
+                    :class="{ 'sa-pv-header__mode-btn--active': viewMode === m.id }"
+                    @click="emit('viewChange', m.id)"
+                >
+                    <q-icon :name="m.icon" size="14px" />
+                    {{ m.label }}
+                </button>
+            </div>
+            <span v-if="compareSnapshot" class="sa-pv-header__cmp-hint">
+                <q-icon name="compare_arrows" size="13px" />
+                Vergleichsmodus aktiv — andere Ansichten deaktiviert
+            </span>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
+import { formatDateDe } from './format.js';
+import PlanVersionStatusBadge from './PlanVersionStatusBadge.vue';
+import type { PlanVersionViewMode } from './types.js';
+
+const props = withDefaults(
+    defineProps<{
+        snapshot: CatalogSnapshot;
+        viewMode: PlanVersionViewMode;
+        compareSnapshot: CatalogSnapshot | null;
+        modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
+    }>(),
+    {
+        modes: () => [
+            { id: 'list' as const, label: 'Plan-Liste', icon: 'list' },
+            { id: 'matrix' as const, label: 'Feature-Matrix', icon: 'grid_view' },
+            { id: 'audit' as const, label: 'Aktivität', icon: 'history' },
+        ],
+    },
+);
+
+const emit = defineEmits<{
+    (e: 'viewChange', mode: PlanVersionViewMode): void;
+    (e: 'publish'): void;
+    (e: 'clearCompare'): void;
+}>();
+
+const canPublish = computed(
+    () => props.snapshot.kind === 'drafts' && props.snapshot.draftCount > 0,
+);
+</script>
+
+<style scoped>
+.sa-pv-header {
+    padding: 20px 28px 18px;
+    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-bg-surface, #ffffff);
+}
+.sa-pv-header__row {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+}
+.sa-pv-header__col {
+    flex: 1;
+    min-width: 0;
+}
+.sa-pv-header__chips {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+    flex-wrap: wrap;
+}
+.sa-pv-header__label {
+    font-family: var(--sa-font-mono, ui-monospace, monospace);
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--sa-heading, #0f172a);
+    background: #f1f5f9;
+    padding: 3px 10px;
+    border-radius: 6px;
+}
+.sa-pv-header__label--cmp {
+    background: #fef3c7;
+}
+.sa-pv-header__cmp-icon {
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-header__cmp-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--sa-muted, #64748b);
+    font-size: 11px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.sa-pv-header__title {
+    margin: 0;
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-weight: 700;
+    font-size: 22px;
+    color: var(--sa-heading, #0f172a);
+    letter-spacing: -0.01em;
+}
+.sa-pv-header__desc {
+    margin: 6px 0 0;
+    color: var(--sa-muted-dark, #475569);
+    font-size: 13.5px;
+    line-height: 1.55;
+    max-width: 760px;
+}
+
+.sa-pv-header__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 14px;
+    font-size: 12px;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-header__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+.sa-pv-header__meta-item strong {
+    color: var(--sa-body, #1e293b);
+    font-weight: 600;
+}
+.sa-pv-header__meta-item--ok :deep(.q-icon) {
+    color: var(--sa-positive, #047857);
+}
+.sa-pv-header__meta-item--warn :deep(.q-icon) {
+    color: var(--sa-warning, #b45309);
+}
+.sa-pv-header__meta-item--bad :deep(.q-icon) {
+    color: var(--sa-negative, #dc2626);
+}
+.sa-pv-header__meta-item--bad strong {
+    color: var(--sa-negative, #dc2626);
+}
+
+.sa-pv-header__actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.sa-pv-header__publish {
+    background: var(--sa-primary, #3f6bff);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 18px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: 0 1px 3px rgba(63, 107, 255, 0.3);
+}
+
+.sa-pv-header__view-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 18px;
+    flex-wrap: wrap;
+}
+.sa-pv-header__switcher {
+    display: inline-flex;
+    background: #f1f5f9;
+    padding: 3px;
+    border-radius: 9px;
+}
+.sa-pv-header__switcher--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+.sa-pv-header__mode-btn {
+    background: transparent;
+    color: var(--sa-body, #1e293b);
+    border: none;
+    border-radius: 7px;
+    padding: 6px 12px;
+    font-size: 12.5px;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+.sa-pv-header__mode-btn :deep(.q-icon) {
+    color: var(--sa-muted, #64748b);
+}
+.sa-pv-header__mode-btn--active {
+    background: #fff;
+    color: var(--sa-primary, #3f6bff);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
+}
+.sa-pv-header__mode-btn--active :deep(.q-icon) {
+    color: var(--sa-primary, #3f6bff);
+}
+
+.sa-pv-header__cmp-hint {
+    font-size: 11.5px;
+    font-weight: 600;
+    color: var(--sa-warning, #b45309);
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
+    padding: 4px 10px;
+    border-radius: 6px;
+    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
+}
+</style>