@saasicat/ui-vue 0.2.0

package/src/components/plan-detail/PlanDetailHeader.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="pd-header">
+        <div class="pd-header-left">
+            <span class="pd-tier-chip">{{ plan.planKey }}</span>
+            <div class="pd-header-titles">
+                <div class="pd-title-wrap">
+                    <template v-if="editingName">
+                        <input
+                            ref="nameInput"
+                            v-model="nameDraft"
+                            class="pd-title-input"
+                            @keydown.enter="commitName"
+                            @keydown.escape="cancelName"
+                            @blur="commitName"
+                        />
+                        <span class="pd-title-hint">Draft · Enter speichert · Esc bricht ab</span>
+                    </template>
+                    <template v-else>
+                        <h1 class="pd-title">{{ plan.label }}</h1>
+                        <button
+                            v-if="draftVersion"
+                            class="pd-title-edit-btn"
+                            type="button"
+                            title="Plan-Name im Draft bearbeiten"
+                            aria-label="Plan-Name bearbeiten"
+                            @click="startEditName"
+                        >
+                            <svg
+                                width="14"
+                                height="14"
+                                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>
+                        </button>
+                    </template>
+                </div>
+                <div class="pd-desc">{{ plan.description || 'Keine Beschreibung.' }}</div>
+            </div>
+        </div>
+        <div class="pd-actions">
+            <button class="btn" type="button" @click="$emit('back')">
+                <span class="pd-back-arrow" 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</span>
+            </button>
+            <button
+                v-if="tenantTotal === 0 && !draftVersion && publishedCount === 0"
+                class="btn danger"
+                type="button"
+                title="Plan löschen (nur ohne Mandanten und ohne published Versionen)"
+                @click="$emit('deletePlan')"
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path
+                        d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
+                    />
+                </svg>
+                <span>Plan löschen</span>
+            </button>
+            <button class="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
+                v-if="!draftVersion"
+                class="btn primary"
+                type="button"
+                @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>
+            <button
+                v-else
+                class="btn primary"
+                type="button"
+                @click="$emit('publish', draftVersion)"
+            >
+                <svg
+                    width="14"
+                    height="14"
+                    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>Draft v{{ draftVersion.version }} veröffentlichen</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from 'vue';
+import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+
+const props = defineProps<{
+    plan: PlanRow;
+    draftVersion: PlanVersionRow | null;
+    tenantTotal: number;
+    publishedCount: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'back'): void;
+    (e: 'createDraft'): void;
+    (e: 'publish', version: PlanVersionRow): void;
+    (e: 'clonePlan'): void;
+    (e: 'deletePlan'): void;
+    (e: 'updatePlan', patch: { label: string }): void;
+}>();
+
+const editingName = ref(false);
+const nameDraft = ref(props.plan.label);
+const nameInput = ref<HTMLInputElement | null>(null);
+
+watch(
+    () => props.plan.label,
+    (label) => {
+        if (!editingName.value) nameDraft.value = label;
+    },
+);
+
+function startEditName(): void {
+    nameDraft.value = props.plan.label;
+    editingName.value = true;
+    void nextTick(() => nameInput.value?.focus());
+}
+
+function commitName(): void {
+    if (!editingName.value) return;
+    const next = nameDraft.value.trim();
+    editingName.value = false;
+    if (next && next !== props.plan.label) emit('updatePlan', { label: next });
+}
+
+function cancelName(): void {
+    nameDraft.value = props.plan.label;
+    editingName.value = false;
+}
+</script>

package/src/components/plan-detail/PlanDetailKpis.vue

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

package/src/components/plan-detail/PlanTerminateDialog.vue

@@ -0,0 +1,76 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <q-card style="min-width: 420px">
+            <q-card-section>
+                <div class="text-h6">
+                    {{ target?.endsAt ? 'Enddatum ändern' : 'Version terminieren' }}
+                </div>
+                <div class="text-body2 q-mt-sm">
+                    Plan <code>{{ plan.planKey }}</code> — v{{ target?.version }} wird am gewählten
+                    Datum auslaufen, <b>ohne</b> durch eine Nachfolge-Version ersetzt zu werden.
+                    Bestand-Subscriptions bleiben gebunden (Vertragsschutz P1); neue Buchungen sind
+                    ab diesem Datum nicht mehr möglich.
+                </div>
+                <q-input
+                    :model-value="dateInput"
+                    label="Enddatum (YYYY-MM-DD)"
+                    type="text"
+                    class="q-mt-md"
+                    mask="####-##-##"
+                    placeholder="2026-12-31"
+                    @update:model-value="$emit('update:dateInput', String($event ?? ''))"
+                >
+                    <template #append>
+                        <q-icon name="event" class="cursor-pointer">
+                            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                <q-date
+                                    :model-value="dateInput"
+                                    mask="YYYY-MM-DD"
+                                    @update:model-value="
+                                        $emit('update:dateInput', String($event ?? ''))
+                                    "
+                                />
+                            </q-popup-proxy>
+                        </q-icon>
+                    </template>
+                </q-input>
+            </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="primary"
+                    label="Terminieren"
+                    :loading="terminating"
+                    :disable="!dateInput"
+                    @click="$emit('execute')"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+
+defineProps<{
+    modelValue: boolean;
+    plan: PlanRow;
+    target: PlanVersionRow | null;
+    dateInput: string;
+    error: string | null;
+    terminating: boolean;
+}>();
+
+defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'update:dateInput', value: string): void;
+    (e: 'execute'): void;
+}>();
+</script>

package/src/components/plan-detail/PlanVersionDiffPanel.vue

@@ -0,0 +1,149 @@
+<template>
+    <section class="pd-panel">
+        <div class="pd-panel-head">
+            <div style="min-width: 0">
+                <h3 class="pd-panel-title">
+                    <template v-if="predecessor">
+                        Diff v{{ predecessor.version }} → v{{ selectedVersion?.version }}
+                    </template>
+                    <template v-else>Komponenten · v{{ selectedVersion?.version }}</template>
+                </h3>
+                <div class="pd-panel-sub">
+                    <template v-if="predecessor && selectedVersion">
+                        {{
+                            statusOf(selectedVersion) === 'draft'
+                                ? 'Was sich beim Publish ändert'
+                                : `Änderungen v${predecessor.version} → v${selectedVersion.version}`
+                        }}
+                    </template>
+                    <template v-else>Initialversion · kein Vorgänger zum Vergleich</template>
+                </div>
+            </div>
+            <div class="pd-panel-head-right pd-diff-chips">
+                <template v-if="predecessor">
+                    <span class="pd-diff-chip add">+{{ diff.featuresAdded.length }} F</span>
+                    <span class="pd-diff-chip rm">−{{ diff.featuresRemoved.length }} F</span>
+                    <span class="pd-diff-chip mod">{{ quotaChangeCount }} Q</span>
+                </template>
+                <template v-else-if="selectedVersion">
+                    <span class="pd-diff-chip add">{{ selectedVersion.features.length }} F</span>
+                    <span class="pd-diff-chip mod">{{ quotaCount(selectedVersion) }} Q</span>
+                </template>
+            </div>
+        </div>
+
+        <div v-if="predecessor" class="pd-diff-list">
+            <div v-for="d in diffRows" :key="d.id" :class="['pd-diff-row', d.kind]">
+                <div class="pd-diff-icon">{{ d.sign }}</div>
+                <div class="pd-diff-body">
+                    <span class="pd-diff-kind">
+                        {{
+                            d.kind === 'add'
+                                ? 'Hinzugefügt'
+                                : d.kind === 'rm'
+                                  ? 'Entfernt'
+                                  : 'Geändert'
+                        }}
+                    </span>
+                    <span class="pd-diff-label">{{ d.label }}</span>
+                    <code class="pd-diff-key">{{ d.key }}</code>
+                    <span v-if="d.from !== undefined" class="pd-diff-vals">
+                        <span class="pd-diff-strike">{{ d.from }}</span>
+                        <span class="pd-diff-arrow">→</span>
+                        <span class="pd-diff-new">{{ d.to }}</span>
+                    </span>
+                    <span :class="['pd-diff-tag', d.kind]">{{ d.tag }}</span>
+                </div>
+            </div>
+            <div v-if="diffRows.length === 0" class="pd-diff-empty">
+                <b>Keine Änderungen</b>
+                v{{ selectedVersion?.version }} ist identisch zu v{{ predecessor.version }}.
+            </div>
+        </div>
+
+        <div v-else-if="selectedVersion" class="pd-diff-list">
+            <div
+                v-if="selectedVersion.features.length === 0 && quotaCount(selectedVersion) === 0"
+                class="pd-diff-empty"
+            >
+                <b>Keine Komponenten</b>
+                Diese Version enthält weder Features noch Quotas.
+            </div>
+            <template v-if="selectedVersion.features.length > 0">
+                <div class="pd-diff-section">
+                    <hr />
+                    <span>Features · {{ selectedVersion.features.length }}</span>
+                    <hr />
+                </div>
+                <div
+                    v-for="f in [...selectedVersion.features].sort()"
+                    :key="'cf-' + f"
+                    class="pd-diff-row plain"
+                >
+                    <div class="pd-diff-icon" style="background: #8b5cf6">·</div>
+                    <div class="pd-diff-body">
+                        <span class="pd-diff-label">{{ featureLabel(f) }}</span>
+                        <code class="pd-diff-key">{{ f }}</code>
+                    </div>
+                </div>
+            </template>
+            <template v-if="quotaCount(selectedVersion) > 0">
+                <div class="pd-diff-section">
+                    <hr />
+                    <span>Quotas · {{ quotaCount(selectedVersion) }}</span>
+                    <hr />
+                </div>
+                <div
+                    v-for="[k, val] in Object.entries(quotasOf(selectedVersion)).sort()"
+                    :key="'cq-' + k"
+                    class="pd-diff-row plain"
+                >
+                    <div class="pd-diff-icon" style="background: #0ea5e9">·</div>
+                    <div class="pd-diff-body">
+                        <span class="pd-diff-label">{{ quotaLabel(k) }}</span>
+                        <code class="pd-diff-key">{{ k }}</code>
+                        <span class="pd-diff-tag mod">{{ val }} {{ quotaUnit(k) }}</span>
+                    </div>
+                </div>
+            </template>
+            <template v-if="(selectedVersion.bundles ?? []).length > 0">
+                <div class="pd-diff-section">
+                    <hr />
+                    <span>Bundles · {{ (selectedVersion.bundles ?? []).length }}</span>
+                    <hr />
+                </div>
+                <div
+                    v-for="b in [...(selectedVersion.bundles ?? [])].sort()"
+                    :key="'cb-' + b"
+                    class="pd-diff-row plain"
+                >
+                    <div class="pd-diff-icon" style="background: #f59e0b">·</div>
+                    <div class="pd-diff-body">
+                        <span class="pd-diff-label">{{ bundleLabel(b) }}</span>
+                        <code class="pd-diff-key">{{ b }}</code>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { PlanVersionRow } from '@saasicat/types';
+import type { DiffRow, PlanVersionDiff, StatusOf } from './types.js';
+
+defineProps<{
+    selectedVersion: PlanVersionRow | null;
+    predecessor: PlanVersionRow | null;
+    diff: PlanVersionDiff;
+    diffRows: DiffRow[];
+    quotaChangeCount: number;
+    statusOf: StatusOf;
+    quotaCount: (version: PlanVersionRow) => number;
+    quotasOf: (version: PlanVersionRow) => Record<string, number>;
+    featureLabel: (key: string) => string;
+    quotaLabel: (key: string) => string;
+    quotaUnit: (key: string) => string;
+    bundleLabel: (key: string) => string;
+}>();
+</script>