@saasicat/ui-vue 0.2.0

package/src/components/bundle-editor/BundleVersionStrip.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="bv-vstrip">
+        <div class="bv-vstrip-label">Versionen</div>
+        <div class="bv-vstrip-tabs">
+            <button
+                v-for="v in sortedVersions"
+                :key="v.id"
+                type="button"
+                class="bv-vtab"
+                :class="[`bv-vtab-${statusOf(v)}`, { 'bv-vtab-current': v.id === modelValue }]"
+                :title="BUNDLE_STATUS_META[statusOf(v)].tooltip"
+                @click="$emit('update:modelValue', v.id)"
+            >
+                <span class="bv-vtab-name">v{{ v.version }}</span>
+                <span :class="['bv-vtab-status', statusOf(v)]">
+                    {{ BUNDLE_STATUS_META[statusOf(v)].label }}
+                </span>
+                <span class="bv-vtab-dates">
+                    {{ formatDateDE(v.validFrom) }}
+                    <template v-if="v.validUntil"> – {{ formatDateDE(v.validUntil) }}</template>
+                    <template v-else> – offen</template>
+                </span>
+                <span class="bv-vtab-price">
+                    {{ v.monthlyNet ?? '—' }}<template v-if="v.monthlyNet"> €</template> / Mo
+                </span>
+            </button>
+            <button
+                type="button"
+                class="bv-vtab bv-vtab-new"
+                :disabled="!canAddVersion"
+                :title="
+                    canAddVersion
+                        ? 'Neue, zukünftige Version anlegen'
+                        : 'Bundle hat bereits eine Draft-Version — erst publishen oder verwerfen'
+                "
+                @click="$emit('addVersion')"
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+                <span>Neue Version</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { BundleVersionRow } from '@saasicat/types';
+
+import {
+    BUNDLE_STATUS_META,
+    bundleVersionStatus,
+    bundleVersionsSorted,
+    formatDateDE,
+} from './bundle-version-status';
+
+// BundleVersionStrip — tab bar across all versions of a bundle, modeled on
+// the plan simulation (saasadminui/project/bundles.jsx → BundleVersionStrip).
+// Shows per tab: version number, status chip, validity span,
+// monthly price. "New version" button on the far right; disabled when a
+// draft already exists (single-draft constraint of the BundleRepository).
+
+const props = defineProps<{
+    /** All versions of the bundle (all lifecycle statuses). */
+    versions: BundleVersionRow[];
+    /** ID of the currently selected version. */
+    modelValue: string | null;
+    /** Optional: reference point in time for the status check (tests). */
+    now?: Date;
+}>();
+
+defineEmits<{
+    (e: 'update:modelValue', versionId: string): void;
+    (e: 'addVersion'): void;
+}>();
+
+const sortedVersions = computed(() => bundleVersionsSorted(props.versions));
+
+const canAddVersion = computed(() => !props.versions.some((v) => v.publishedAt === null));
+
+function statusOf(v: BundleVersionRow) {
+    return bundleVersionStatus(v, props.now);
+}
+</script>
+
+<style scoped>
+.bv-vstrip {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 14px 16px;
+    background: #fbfbfd;
+    border: 1px solid var(--bv-border, #e5e7eb);
+    border-radius: 10px;
+}
+.bv-vstrip-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #64748b;
+}
+.bv-vstrip-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.bv-vtab {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+    column-gap: 8px;
+    row-gap: 2px;
+    align-items: center;
+    padding: 8px 12px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: inherit;
+    color: #0f172a;
+    text-align: left;
+    transition:
+        border-color 0.12s,
+        box-shadow 0.12s,
+        background 0.12s;
+}
+.bv-vtab:hover {
+    background: #f8fafc;
+}
+.bv-vtab-current {
+    border-color: #2563eb;
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+}
+.bv-vtab-name {
+    font:
+        700 13px 'JetBrains Mono',
+        ui-monospace,
+        monospace;
+    letter-spacing: 0.02em;
+}
+.bv-vtab-status {
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 1px 6px;
+    border-radius: 4px;
+    justify-self: end;
+}
+.bv-vtab-status.live {
+    background: #d1fae5;
+    color: #065f46;
+}
+.bv-vtab-status.scheduled {
+    background: #fef3c7;
+    color: #92400e;
+}
+.bv-vtab-status.superseded {
+    background: #e2e8f0;
+    color: #475569;
+}
+.bv-vtab-status.draft {
+    background: #dbeafe;
+    color: #1e40af;
+}
+.bv-vtab-dates {
+    grid-column: 1 / -1;
+    font-size: 11px;
+    color: #64748b;
+}
+.bv-vtab-price {
+    grid-column: 1 / -1;
+    font-size: 11.5px;
+    color: #475569;
+    font-weight: 600;
+}
+
+.bv-vtab-new {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background: #fff;
+    border: 1px dashed #cbd5e1;
+    color: #2563eb;
+    font-size: 12.5px;
+    font-weight: 600;
+}
+.bv-vtab-new:hover:not(:disabled) {
+    background: #eff6ff;
+    border-color: #93c5fd;
+}
+.bv-vtab-new:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+</style>

package/src/components/bundle-editor/bundle-version-status.ts

@@ -0,0 +1,164 @@
+// Pure helper functions for the bundle-version UI — analogous to the
+// plan simulation (saasadminui/project/bundles.jsx). The logic knows only
+// the wire format (`BundleVersionRow`, `PlanVersionRow`), no DOM, no
+// API calls — so it can be consumed 1:1 by the inline editor + strip +
+// status banner + compat picker and called purely in tests.
+
+import type { BundleVersionRow, PlanVersionRow } from '@saasicat/types';
+
+/** UI lifecycle status of a single BundleVersion. */
+export type BundleVersionUiStatus = 'draft' | 'live' | 'scheduled' | 'superseded';
+
+/** Top-level status of a bundle stem across all versions. */
+export type BundleAggregateStatus = BundleVersionUiStatus | 'retired';
+
+/**
+ * Status of a BundleVersion at a given date. Mapping:
+ *   - draft     : publishedAt === null
+ *   - superseded: supersededAt !== null  OR  validUntil < today
+ *   - scheduled : published, validFrom > today, supersededAt === null
+ *   - live      : otherwise (published, validFrom ≤ today ≤ validUntil)
+ *
+ * When `validFrom` is null (legacy version without lifecycle backfill),
+ * the version is interpreted as "live" — this is the pragmatic
+ * transitional behavior until the backfill migration.
+ */
+export function bundleVersionStatus(
+    v: BundleVersionRow,
+    now: Date = new Date(),
+): BundleVersionUiStatus {
+    if (v.publishedAt === null) return 'draft';
+    if (v.supersededAt !== null) return 'superseded';
+    if (v.validUntil) {
+        const until = new Date(v.validUntil);
+        if (!Number.isNaN(until.getTime()) && until.getTime() < now.getTime()) {
+            return 'superseded';
+        }
+    }
+    if (v.validFrom) {
+        const from = new Date(v.validFrom);
+        if (!Number.isNaN(from.getTime()) && from.getTime() > now.getTime()) {
+            return 'scheduled';
+        }
+    }
+    return 'live';
+}
+
+/** UI metadata for a status (label, CSS class, tooltip). */
+export interface BundleStatusMeta {
+    label: string;
+    cls: 'draft' | 'live' | 'scheduled' | 'supersed';
+    tooltip: string;
+}
+
+export const BUNDLE_STATUS_META: Record<BundleAggregateStatus, BundleStatusMeta> = {
+    draft: {
+        label: 'Draft',
+        cls: 'draft',
+        tooltip: 'Noch nicht veröffentlicht — frei editierbar',
+    },
+    live: {
+        label: 'Live',
+        cls: 'live',
+        tooltip: 'Aktive Version · verkaufbar · read-only (laufende Verträge)',
+    },
+    scheduled: {
+        label: 'Geplant',
+        cls: 'scheduled',
+        tooltip: 'Zukünftig aktiv · noch nicht verkaufbar · frei editierbar',
+    },
+    superseded: {
+        label: 'Abgelöst',
+        cls: 'supersed',
+        tooltip: 'Durch neue Version ersetzt · Bestand bleibt',
+    },
+    retired: {
+        label: 'Retired',
+        cls: 'supersed',
+        tooltip: 'Bundle-Stamm wurde soft-deleted',
+    },
+};
+
+/**
+ * Sorts the versions of a bundle line ascending by
+ * `validFrom` (drafts without validFrom go to the end).
+ */
+export function bundleVersionsSorted(versions: BundleVersionRow[]): BundleVersionRow[] {
+    return [...versions].sort((a, b) => {
+        const av = a.validFrom ?? '';
+        const bv = b.validFrom ?? '';
+        if (av === bv) return a.version - b.version;
+        if (!av) return 1;
+        if (!bv) return -1;
+        return av.localeCompare(bv);
+    });
+}
+
+/**
+ * Currently active (live) bundle version or `null`.
+ * Unlike `bundleVersionStatus`, this refers to the whole bundle
+ * stem — used in the card header for the "Live · v3" display.
+ */
+export function bundleActiveVersionAt(
+    versions: BundleVersionRow[],
+    now: Date = new Date(),
+): BundleVersionRow | null {
+    return versions.find((v) => bundleVersionStatus(v, now) === 'live') ?? null;
+}
+
+export function bundleAggregateStatus(
+    versions: BundleVersionRow[],
+    deletedAt: string | null,
+    now: Date = new Date(),
+): BundleAggregateStatus {
+    if (deletedAt) return 'retired';
+    let hasLive = false;
+    let hasScheduled = false;
+    let hasSuperseded = false;
+    let hasDraft = false;
+    for (const v of versions) {
+        const status = bundleVersionStatus(v, now);
+        if (status === 'live') hasLive = true;
+        else if (status === 'scheduled') hasScheduled = true;
+        else if (status === 'superseded') hasSuperseded = true;
+        else if (status === 'draft') hasDraft = true;
+    }
+    if (hasLive) return 'live';
+    if (hasScheduled) return 'scheduled';
+    if (hasDraft) return 'draft';
+    if (hasSuperseded) return 'superseded';
+    return 'draft';
+}
+
+/**
+ * Overlap between a BundleVersion and a PlanVersion:
+ * features + quotas that the plan already contains. Double counting
+ * → warning in the editor (the bundle would count features multiple
+ * times in the combined plan).
+ */
+export interface BundlePlanOverlap {
+    features: string[];
+    quotas: string[];
+    hasAny: boolean;
+}
+
+export function findBundlePlanOverlap(
+    bundle: { features: string[]; quotas?: Record<string, number> },
+    plan: PlanVersionRow | null | undefined,
+): BundlePlanOverlap {
+    if (!plan) return { features: [], quotas: [], hasAny: false };
+    const planFeatures = new Set(plan.features);
+    const planQuotas = new Set(Object.keys(plan.quotas ?? {}));
+    const features = bundle.features.filter((f) => planFeatures.has(f));
+    const quotas = Object.keys(bundle.quotas ?? {}).filter((q) => planQuotas.has(q));
+    return { features, quotas, hasAny: features.length > 0 || quotas.length > 0 };
+}
+
+/** ISO `YYYY-MM-DD` → `DD.MM.YYYY` for UI display; null/empty → '—'. */
+export function formatDateDE(iso: string | null | undefined): string {
+    if (!iso) return '—';
+    const day = iso.slice(0, 10);
+    const [y, m, d] = day.split('-');
+    if (!y || !m || !d) return iso;
+    return `${d}.${m}.${y}`;
+}

package/src/components/bundle-editor/catalog-i18n.ts

@@ -0,0 +1,85 @@
+// catalog-i18n — pure resolvers that derive the labels/units to display for a
+// chosen display locale from the catalog entries (feature/quota catalog incl.
+// `i18n`). The single source of truth for translations remains the Discovery
+// translation tab (`FeatureCatalogEntryRow.i18n` /
+// `QuotaCatalogEntryRow.i18n`); here we only project.
+//
+// Resolution chain per entry: `i18n[locale]` → default-locale field (DE) →
+// (in the editor) Discovery fallback or the bare key. By convention the
+// default locale is NOT held in `i18n`, so for DE the base field applies
+// directly.
+
+import type {
+    CatalogEntryI18n,
+    FeatureCatalogEntryRow,
+    QuotaCatalogEntryRow,
+} from '@saasicat/types';
+
+export const CATALOG_DEFAULT_LOCALE = 'de';
+
+/** Display mapping per feature key (compatible with `FeatureMeta`). */
+export interface FeatureRegistryEntry {
+    label?: string;
+    group?: string;
+    core?: boolean;
+}
+
+/** Display mapping per quota key. */
+export interface QuotaMeta {
+    label?: string;
+    unit?: string;
+}
+
+function localized(
+    i18n: CatalogEntryI18n | undefined,
+    locale: string,
+    field: 'label' | 'unit',
+): string | undefined {
+    if (locale === CATALOG_DEFAULT_LOCALE) return undefined;
+    const value = i18n?.[locale]?.[field];
+    return value && value.trim().length > 0 ? value : undefined;
+}
+
+function resolveLabel(
+    baseLabel: string | null | undefined,
+    i18n: CatalogEntryI18n | undefined,
+    locale: string,
+): string | undefined {
+    return localized(i18n, locale, 'label') ?? (baseLabel || undefined);
+}
+
+/**
+ * Builds the `featureRegistry` for the bundle editors from the feature catalog
+ * entries. Keys without a resolvable label are omitted — the editor then falls
+ * back to the feature key.
+ */
+export function buildFeatureRegistry(
+    featureCatalog: FeatureCatalogEntryRow[],
+    locale: string,
+): Record<string, FeatureRegistryEntry> {
+    const registry: Record<string, FeatureRegistryEntry> = {};
+    for (const feature of featureCatalog) {
+        const label = resolveLabel(feature.label, feature.i18n, locale);
+        if (label) registry[feature.featureKey] = { label, core: feature.core };
+    }
+    return registry;
+}
+
+/**
+ * Builds the `quotaRegistry` for the bundle editors from the quota catalog
+ * entries. Label and unit are resolved independently; if a translation is
+ * missing, the editor falls back to the Discovery value or the quota key.
+ */
+export function buildQuotaRegistry(
+    quotaCatalog: QuotaCatalogEntryRow[],
+    locale: string,
+): Record<string, QuotaMeta> {
+    const registry: Record<string, QuotaMeta> = {};
+    for (const quota of quotaCatalog) {
+        registry[quota.quotaKey] = {
+            label: resolveLabel(quota.label, quota.i18n, locale),
+            unit: localized(quota.i18n, locale, 'unit') ?? (quota.unit || undefined),
+        };
+    }
+    return registry;
+}