@saasicat/ui-vue 0.2.0

package/src/components/plan-cockpit/PlanCockpitAuditLog.vue

@@ -0,0 +1,65 @@
+<template>
+    <section v-if="auditRows.length > 0 || loadingAudit" class="pc-card pc-audit-card">
+        <div class="pc-card-head pc-card-head--audit">
+            <div class="pc-card-head-text">
+                <div class="pc-card-title">Audit-Log</div>
+                <div class="pc-card-sub">Letzte Änderungen an diesem Plan</div>
+            </div>
+        </div>
+        <div class="pc-audit">
+            <div v-if="loadingAudit" class="pc-empty pc-empty--inline">Lade Audit-Log…</div>
+            <div v-for="a in auditRows" :key="a.id" class="pc-audit-row">
+                <span :class="['pc-audit-dot', `pc-audit-${auditKind(a.action)}`]" />
+                <span class="pc-audit-when">{{ formatAuditDate(a.createdAt) }}</span>
+                <span class="pc-audit-avatar">{{ auditInitial(a) }}</span>
+                <span class="pc-audit-who">{{ auditWho(a) }}</span>
+                <span class="pc-audit-what">{{ auditLabel(a) }}</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { AuditRow } from './types';
+
+defineProps<{
+    auditRows: AuditRow[];
+    loadingAudit: boolean;
+}>();
+
+function auditKind(action: string): string {
+    const a = action.toLowerCase();
+    if (a.includes('publish')) return 'publish';
+    if (a.includes('create') && a.includes('draft')) return 'draft';
+    if (a.includes('create')) return 'add';
+    if (a.includes('update')) return 'change';
+    if (a.includes('delete')) return 'remove';
+    return 'change';
+}
+
+function auditWho(a: AuditRow): string {
+    if (a.user?.firstName || a.user?.lastName) {
+        return `${a.user.firstName ?? ''} ${a.user.lastName ?? ''}`.trim();
+    }
+    return a.user?.email ?? a.userEmail ?? 'system';
+}
+
+function auditInitial(a: AuditRow): string {
+    const who = auditWho(a);
+    return who[0]?.toUpperCase() ?? '?';
+}
+
+function auditLabel(a: AuditRow): string {
+    return a.action;
+}
+
+function formatAuditDate(iso: string): string {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return iso;
+    const today = new Date();
+    const isToday = d.toDateString() === today.toDateString();
+    const time = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    if (isToday) return `heute · ${time}`;
+    return `${d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' })} · ${time}`;
+}
+</script>

package/src/components/plan-cockpit/PlanCockpitDiffPanel.vue

@@ -0,0 +1,91 @@
+<template>
+    <section class="pc-card">
+        <div class="pc-card-head">
+            <div class="pc-card-head-text">
+                <div class="pc-card-title">
+                    <template v-if="diffPair">
+                        Diff v{{ diffPair.from.version }} → v{{ diffPair.to.version }}
+                    </template>
+                    <template v-else>Diff</template>
+                </div>
+                <div class="pc-card-sub">
+                    {{ diffPair ? 'Was sich beim Publish ändert' : 'Kein Vergleich verfügbar' }}
+                </div>
+            </div>
+            <div v-if="diffPair" class="pc-pillrow">
+                <span class="pc-pill" style="background: #ecfdf5; color: #047857">
+                    +{{ diff.addedFeatures.length }} F
+                </span>
+                <span class="pc-pill" style="background: #fef2f2; color: #b91c1c">
+                    −{{ diff.removedFeatures.length }} F
+                </span>
+                <span class="pc-pill" style="background: #fffbeb; color: #b45309">
+                    {{
+                        diff.changedQuotas.length +
+                        diff.addedQuotas.length +
+                        diff.removedQuotas.length
+                    }}
+                    Q
+                </span>
+            </div>
+        </div>
+        <div class="pc-diff-body">
+            <div
+                v-for="d in diffRows"
+                :key="d.id"
+                class="pc-diff-row"
+                :style="{ background: d.bg, borderColor: d.border }"
+            >
+                <span class="pc-diff-sign" :style="{ background: d.color }">{{ d.sign }}</span>
+                <div class="pc-diff-main">
+                    <div class="pc-diff-headline">
+                        <span class="pc-diff-section" :style="{ color: d.color }">{{
+                            d.section
+                        }}</span>
+                        <span class="pc-diff-label">{{ d.label }}</span>
+                        <code v-if="d.sub" class="pc-mono pc-mono--xs">{{ d.sub }}</code>
+                    </div>
+                    <div v-if="d.from !== undefined" class="pc-diff-change">
+                        <span class="pc-diff-from">{{ d.from }}</span>
+                        <span class="pc-diff-arrow" :style="{ color: d.color }">
+                            <svg
+                                width="12"
+                                height="12"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                            >
+                                <path d="M5 12h14M13 5l7 7-7 7" />
+                            </svg>
+                        </span>
+                        <span class="pc-diff-to">{{ d.to }}</span>
+                    </div>
+                </div>
+                <span
+                    class="pc-chip pc-diff-tag"
+                    :style="{
+                        background: '#fff',
+                        color: d.color,
+                        borderColor: d.border,
+                    }"
+                >
+                    {{ d.tag }}
+                </span>
+            </div>
+            <div v-if="diffRows.length === 0" class="pc-empty pc-empty--inline">
+                Keine Änderungen erkannt.
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { DiffRow, DiffSummary, PlanVersionPair } from './types';
+
+defineProps<{
+    diffPair: PlanVersionPair | null;
+    diff: DiffSummary;
+    diffRows: DiffRow[];
+}>();
+</script>

package/src/components/plan-cockpit/PlanCockpitHeader.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="pc-backbar">
+        <button class="pc-back" type="button" @click="emit('back')">
+            <span class="pc-back-ico" aria-hidden="true">
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M5 12h14M13 5l7 7-7 7" />
+                </svg>
+            </span>
+            <span>Zurück zur Liste</span>
+        </button>
+    </div>
+
+    <div class="pc-header">
+        <div class="pc-header-left">
+            <div class="pc-bigchip" :style="{ background: accentBg, color: accentFg }">
+                {{ plan.planKey }}
+            </div>
+            <div class="pc-header-titles">
+                <h2 class="pc-h-title">{{ plan.label }}</h2>
+                <p class="pc-h-sub">{{ plan.description || 'Keine Beschreibung.' }}</p>
+            </div>
+        </div>
+        <div class="pc-header-right">
+            <button class="pc-btn" type="button" @click="emit('clonePlan')">
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <rect x="9" y="9" width="11" height="11" rx="2" />
+                    <path d="M5 15V5a2 2 0 012-2h10" />
+                </svg>
+                <span>Plan klonen</span>
+            </button>
+            <button class="pc-btn" type="button" @click="emit('viewCatalog')">
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx="12" cy="12" r="3" />
+                </svg>
+                <span>Im Katalog ansehen</span>
+            </button>
+            <button
+                class="pc-btn pc-btn--primary"
+                type="button"
+                :disabled="hasOpenDraft"
+                :title="hasOpenDraft ? 'Es gibt bereits eine offene Draft' : undefined"
+                @click="emit('createDraft')"
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                >
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+                <span>Neue Draft-Version</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { PlanRow } from '@saasicat/types';
+
+defineProps<{
+    plan: PlanRow;
+    accentBg: string;
+    accentFg: string;
+    hasOpenDraft: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'back'): void;
+    (e: 'clonePlan'): void;
+    (e: 'viewCatalog'): void;
+    (e: 'createDraft'): void;
+}>();
+</script>

package/src/components/plan-cockpit/PlanCockpitImpactPanel.vue

@@ -0,0 +1,99 @@
+<template>
+    <section v-if="tenantImpact" class="pc-card">
+        <div class="pc-card-head">
+            <div class="pc-card-head-text">
+                <div class="pc-card-title">Tenant-Impact</div>
+                <div class="pc-card-sub">
+                    Wer ist betroffen, wenn die nächste Version published wird
+                </div>
+            </div>
+        </div>
+        <div class="pc-impact-strip">
+            <div class="pc-impact-num">{{ tenantImpactTotal }}</div>
+            <div class="pc-impact-bars">
+                <div class="pc-impact-bar">
+                    <span
+                        class="pc-impact-bar-fill"
+                        :style="{
+                            width: pct(tenantImpact.auto, tenantImpactTotal),
+                            background: '#10b981',
+                        }"
+                    />
+                    <span class="pc-impact-bar-label">{{ tenantImpact.auto }} auto-migrieren</span>
+                </div>
+                <div class="pc-impact-bar">
+                    <span
+                        class="pc-impact-bar-fill"
+                        :style="{
+                            width: pct(tenantImpact.review, tenantImpactTotal),
+                            background: '#f59e0b',
+                        }"
+                    />
+                    <span class="pc-impact-bar-label"
+                        >{{ tenantImpact.review }} brauchen Review</span
+                    >
+                </div>
+                <div class="pc-impact-bar">
+                    <span
+                        class="pc-impact-bar-fill"
+                        :style="{
+                            width: pct(tenantImpact.conflict, tenantImpactTotal),
+                            background: '#ef4444',
+                        }"
+                    />
+                    <span class="pc-impact-bar-label">{{ tenantImpact.conflict }} Konflikt</span>
+                </div>
+            </div>
+        </div>
+        <div
+            v-if="tenantImpact.examples && tenantImpact.examples.length > 0"
+            class="pc-impact-tenants"
+        >
+            <div v-for="t in tenantImpact.examples" :key="t.name" class="pc-impact-tenant">
+                <div class="pc-impact-avatar">{{ initialsOf(t.name) }}</div>
+                <div class="pc-impact-body">
+                    <div class="pc-impact-name">{{ t.name }}</div>
+                    <div class="pc-impact-sub">{{ t.plan }}</div>
+                </div>
+                <span :class="['pc-chip', impactStateChip(t.state)]">{{
+                    impactStateLabel(t.state)
+                }}</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { ImpactTenant, TenantImpact } from './types';
+
+defineProps<{
+    tenantImpact: TenantImpact | null;
+    tenantImpactTotal: number;
+}>();
+
+function pct(part: number, total: number): string {
+    if (total <= 0) return '0%';
+    return `${Math.max(2, Math.round((part / total) * 100))}%`;
+}
+
+function initialsOf(name: string): string {
+    return name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((s) => s[0]?.toUpperCase() ?? '')
+        .join('');
+}
+
+function impactStateLabel(state: ImpactTenant['state']): string {
+    return state === 'auto' ? 'auto' : state === 'review' ? 'review' : 'Konflikt';
+}
+
+function impactStateChip(state: ImpactTenant['state']): string {
+    return state === 'auto'
+        ? 'pc-chip--live'
+        : state === 'review'
+          ? 'pc-chip--draft'
+          : 'pc-chip--conflict';
+}
+</script>

package/src/components/plan-cockpit/PlanCockpitKpis.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="pc-kpis">
+        <div class="pc-kpi">
+            <div class="pc-kpi-label">Aktive Version</div>
+            <div class="pc-kpi-val">
+                <template v-if="liveVersion">
+                    v{{ liveVersion.version }}
+                    <span class="pc-chip pc-chip--live pc-chip--dot pc-chip--mid">live</span>
+                </template>
+                <template v-else>—</template>
+            </div>
+            <div class="pc-kpi-sub">
+                {{
+                    liveVersion?.validFrom
+                        ? `seit ${liveVersion.validFrom.slice(0, 10)}`
+                        : 'keine veröffentlichte Version'
+                }}
+            </div>
+        </div>
+        <div class="pc-kpi">
+            <div class="pc-kpi-label">Tenant-Impact</div>
+            <div class="pc-kpi-val">{{ tenantImpactTotal }}</div>
+            <div class="pc-kpi-sub">Mandanten auf diesem Plan</div>
+        </div>
+        <div class="pc-kpi">
+            <div class="pc-kpi-label">Versionen</div>
+            <div class="pc-kpi-val">{{ versionsCount }}</div>
+            <div class="pc-kpi-sub">
+                {{ publishedCount }} live/superseded · {{ draftCount }} Draft
+            </div>
+        </div>
+        <div :class="['pc-kpi', draftVersion ? 'pc-kpi--draft' : '']">
+            <div class="pc-kpi-label" :style="draftVersion ? 'color:#b45309' : ''">
+                {{ draftVersion ? 'Offener Draft' : 'Kein Draft' }}
+            </div>
+            <div class="pc-kpi-val">
+                {{ draftVersion ? `v${draftVersion.version}` : '—' }}
+            </div>
+            <div class="pc-kpi-sub" :style="draftVersion ? 'color:#b45309' : ''">
+                {{ draftVersion ? 'Bereit zum Bearbeiten' : 'Neue Draft anlegen' }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { PlanVersionRow } from '@saasicat/types';
+
+defineProps<{
+    liveVersion: PlanVersionRow | null;
+    tenantImpactTotal: number;
+    versionsCount: number;
+    publishedCount: number;
+    draftCount: number;
+    draftVersion: PlanVersionRow | null;
+}>();
+</script>

package/src/components/plan-cockpit/PlanCockpitVersions.vue

@@ -0,0 +1,226 @@
+<template>
+    <section class="pc-card pc-card--left">
+        <div class="pc-card-head">
+            <div class="pc-card-head-text">
+                <div class="pc-card-title">Versionen</div>
+                <div class="pc-card-sub">
+                    Pro Plan max. 1 offene Draft-Version · Publish setzt Vorgänger auf
+                    <code class="pc-mono">supersededAt</code>
+                </div>
+            </div>
+            <button
+                class="pc-btn pc-btn--sm pc-btn--primary"
+                type="button"
+                :disabled="hasOpenDraft"
+                @click="emit('createDraft')"
+            >
+                <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                >
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+                <span>Draft v{{ nextDraftVersion }}</span>
+            </button>
+        </div>
+
+        <div v-if="versions.length > 0" class="pc-vtimeline">
+            <div class="pc-vtl-track">
+                <div
+                    v-for="seg in timelineSegments"
+                    :key="seg.key"
+                    :class="['pc-vtl-seg', `pc-vtl-${seg.status}`]"
+                    :style="{ flex: seg.flex }"
+                >
+                    v{{ seg.version }}<template v-if="seg.status === 'draft'"> · draft</template>
+                </div>
+            </div>
+            <div class="pc-vtl-axis">
+                <span v-for="(label, i) in timelineAxis" :key="i">{{ label }}</span>
+            </div>
+        </div>
+
+        <div class="pc-vrow pc-vrow--head">
+            <div class="pc-vrow-version pc-vrow-headlabel">Version</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel">Gültig</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">Pricing</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">Impact</div>
+            <div class="pc-vrow-note pc-vrow-headlabel">Change-Note</div>
+            <div class="pc-vrow-actions" />
+        </div>
+        <div v-if="versions.length === 0" class="pc-empty">
+            Noch keine Versionen — „Neue Draft-Version" oben rechts.
+        </div>
+        <div
+            v-for="row in sortedVersions"
+            :key="row.id"
+            :class="['pc-vrow', row.publishedAt === null ? 'pc-vrow--active' : '']"
+        >
+            <div class="pc-vrow-version">
+                <span class="pc-vrow-vlabel">v{{ row.version }}</span>
+                <span :class="['pc-chip pc-chip--dot', statusChipClass(row)]">{{
+                    statusLabel(row)
+                }}</span>
+            </div>
+            <div class="pc-vrow-cell">
+                <div class="pc-vrow-validity">
+                    {{ row.validFrom ? row.validFrom.slice(0, 10) : '—' }}
+                    <span class="pc-vrow-arrow">→</span>
+                    <template v-if="row.validUntil">{{ row.validUntil.slice(0, 10) }}</template>
+                    <span v-else class="pc-vrow-inf">∞</span>
+                </div>
+                <div class="pc-vrow-sub">{{ updatedLabel(row) }}</div>
+            </div>
+            <div class="pc-vrow-cell pc-vrow-cell--right">
+                <div class="pc-vrow-price">
+                    {{ formatMoney(row.monthlyNet) }}<span class="pc-vrow-price-unit">/ Mo</span>
+                </div>
+                <div class="pc-vrow-sub">{{ formatMoney(row.yearlyNet) }} / Jahr</div>
+            </div>
+            <div class="pc-vrow-cell pc-vrow-cell--right">
+                <div
+                    class="pc-vrow-impact"
+                    :class="(impactByVersion[row.version] ?? 0) > 0 ? '' : 'pc-vrow-impact--zero'"
+                >
+                    {{ impactByVersion[row.version] ?? 0 }}
+                </div>
+                <div class="pc-vrow-sub">Mandanten</div>
+            </div>
+            <div class="pc-vrow-note" :title="row.changeNote ?? ''">
+                {{ row.changeNote || '—' }}
+            </div>
+            <div class="pc-vrow-actions">
+                <button
+                    v-if="row.publishedAt === null"
+                    class="pc-btn pc-btn--sm pc-btn--primary"
+                    type="button"
+                    @click="emit('publish', row)"
+                >
+                    <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+                    </svg>
+                    <span>Publish</span>
+                </button>
+                <button
+                    v-if="editabilityOf(row).editable"
+                    class="pc-btn pc-btn--sm"
+                    type="button"
+                    :title="
+                        editabilityOf(row).reason === 'pre-active'
+                            ? 'Published, aber noch nicht aktiv — Features, Quotas und Preis können bis zum Aktivierungsdatum noch korrigiert werden'
+                            : 'Draft bearbeiten'
+                    "
+                    @click="emit('editDraft', row)"
+                >
+                    <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M12 20h9M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4 12.5-12.5z" />
+                    </svg>
+                    <span>Bearbeiten</span>
+                </button>
+                <button
+                    v-if="row.publishedAt !== null && row.supersededAt === null && draftVersion"
+                    class="pc-btn pc-btn--sm"
+                    type="button"
+                    @click="emit('viewDiff', draftVersion, row)"
+                >
+                    <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                    </svg>
+                    <span>Diff</span>
+                </button>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import { isVersionEditable, type PlanVersionRow } from '@saasicat/types';
+import type { TimelineSegment } from './types';
+
+defineProps<{
+    versions: PlanVersionRow[];
+    sortedVersions: PlanVersionRow[];
+    timelineSegments: TimelineSegment[];
+    timelineAxis: string[];
+    hasOpenDraft: boolean;
+    nextDraftVersion: number;
+    impactByVersion: Record<number, number>;
+    draftVersion: PlanVersionRow | null;
+}>();
+
+const emit = defineEmits<{
+    (e: 'createDraft'): void;
+    (e: 'publish', version: PlanVersionRow): void;
+    (e: 'editDraft', version: PlanVersionRow): void;
+    (e: 'viewDiff', from: PlanVersionRow, to: PlanVersionRow): void;
+}>();
+
+function editabilityOf(version: PlanVersionRow): {
+    editable: boolean;
+    reason: 'draft' | 'pre-active' | null;
+} {
+    return isVersionEditable(version);
+}
+
+function statusChipClass(row: PlanVersionRow): string {
+    if (row.publishedAt === null) return 'pc-chip--draft';
+    if (row.supersededAt !== null) return 'pc-chip--supersed';
+    return 'pc-chip--live';
+}
+
+function statusLabel(row: PlanVersionRow): string {
+    if (row.publishedAt === null) return 'draft';
+    if (row.supersededAt !== null) return 'superseded';
+    return 'live';
+}
+
+function formatMoney(raw: string | number): string {
+    const num = typeof raw === 'string' ? Number(raw) : raw;
+    if (!Number.isFinite(num)) return String(raw);
+    if (Number.isInteger(num)) return `${num} €`;
+    return `${num.toFixed(2).replace('.', ',')} €`;
+}
+
+function updatedLabel(row: PlanVersionRow): string {
+    const iso =
+        row.publishedAt ??
+        (row as unknown as { updatedAt?: string }).updatedAt ??
+        (row as unknown as { createdAt?: string }).createdAt ??
+        '';
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    const diffMs = Date.now() - d.getTime();
+    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    if (days <= 0) return 'heute';
+    if (days < 30) return `vor ${days} Tagen`;
+    if (days < 365) return `vor ${Math.floor(days / 30)} Monaten`;
+    return `vor ${Math.floor(days / 365)} Jahren`;
+}
+</script>