@saasicat/ui-vue 0.2.0

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

@@ -0,0 +1,215 @@
+<template>
+    <div :class="['bd-features', { 'bd-locked': locked }]">
+        <template v-for="group in groupedFeatures" :key="group.key">
+            <div class="bd-features-group">
+                <div class="bd-features-group-label">{{ group.label }}</div>
+                <div class="bd-features-row">
+                    <button
+                        v-for="f in group.rows"
+                        :key="f.featureKey"
+                        type="button"
+                        class="bd-feature-pill"
+                        :class="{
+                            on: features.includes(f.featureKey),
+                            overlap: overlapKeys.includes(f.featureKey),
+                        }"
+                        :disabled="locked"
+                        :title="pillTitle(f.featureKey)"
+                        @click="onToggle(f.featureKey)"
+                    >
+                        <span class="bd-feature-tick" aria-hidden="true">
+                            <svg
+                                v-if="features.includes(f.featureKey)"
+                                width="11"
+                                height="11"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="3"
+                            >
+                                <path d="M5 13l4 4L19 7" />
+                            </svg>
+                            <svg
+                                v-else
+                                width="11"
+                                height="11"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                            >
+                                <path d="M12 5v14M5 12h14" />
+                            </svg>
+                        </span>
+                        <span class="bd-feature-label">{{ featureLabel(f.featureKey) }}</span>
+                        <span class="bd-feature-key">{{ f.featureKey }}</span>
+                    </button>
+                </div>
+            </div>
+        </template>
+        <div v-if="groupedFeatures.length === 0" class="bd-features-empty">
+            Keine Features im Discovery-Snapshot.
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { DiscoveredFeature } from '@saasicat/types';
+
+// BundleFeaturesEditor — grouped pills for the feature selection of a
+// bundle version (after plan simulation). The source of truth for the
+// library is the discovery snapshot; the `featureRegistry` mapping from
+// the wrapper provides only the label to display + the group bucket
+// (analogous to `PlanVersionEditor`).
+//
+// `locked` = live/superseded version → the pills are disabled
+// (contract protection; UI mirrors the backend rule `isVersionEditable`).
+// `overlapKeys` = features already contained in a compatible plan
+// → are marked as an "overlap" (warn about double billing).
+
+export interface FeatureMeta {
+    /** Display name; fallback = featureKey. */
+    label?: string;
+    /** Library bucket (e.g. "Communication", "Finance"). Default "Allgemein". */
+    group?: string;
+}
+
+const props = defineProps<{
+    /** Library = discovery snapshot features. */
+    availableFeatures: DiscoveredFeature[];
+    /** Currently selected feature keys on the version. */
+    features: string[];
+    /** Switch to read-only (live/superseded). */
+    locked?: boolean;
+    /** Display mapping per feature key. */
+    featureRegistry?: Record<string, FeatureMeta>;
+    /** Features already contained in a selected compatible plan. */
+    overlapKeys?: string[];
+}>();
+
+const emit = defineEmits<{
+    (e: 'toggle', featureKey: string): void;
+}>();
+
+function featureLabel(key: string): string {
+    return props.featureRegistry?.[key]?.label ?? key;
+}
+
+function featureGroup(key: string): string {
+    return props.featureRegistry?.[key]?.group ?? 'Allgemein';
+}
+
+function pillTitle(key: string): string {
+    if (props.locked) return 'Live-Version ist read-only';
+    if (props.overlapKeys?.includes(key)) {
+        return 'Feature ist im kompatiblen Plan bereits enthalten — Doppel-Berechnung';
+    }
+    return props.features.includes(key) ? 'Aus Bundle entfernen' : 'In Bundle aufnehmen';
+}
+
+const overlapKeys = computed(() => props.overlapKeys ?? []);
+
+const groupedFeatures = computed(() => {
+    const byGroup = new Map<string, DiscoveredFeature[]>();
+    for (const f of props.availableFeatures) {
+        const g = featureGroup(f.featureKey);
+        const list = byGroup.get(g) ?? [];
+        list.push(f);
+        byGroup.set(g, list);
+    }
+    return [...byGroup.entries()]
+        .sort(([a], [b]) => a.localeCompare(b, 'de-DE'))
+        .map(([key, rows]) => ({ key, label: key, rows }));
+});
+
+function onToggle(featureKey: string): void {
+    if (props.locked) return;
+    emit('toggle', featureKey);
+}
+</script>
+
+<style scoped>
+.bd-features {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.bd-features.bd-locked {
+    opacity: 0.7;
+}
+.bd-features-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.bd-features-group-label {
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #64748b;
+}
+.bd-features-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.bd-feature-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 12px;
+    color: #0f172a;
+    transition:
+        background 0.12s,
+        border-color 0.12s,
+        color 0.12s;
+}
+.bd-feature-pill:hover:not(:disabled) {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+}
+.bd-feature-pill.on {
+    background: #dbeafe;
+    border-color: #93c5fd;
+    color: #1e40af;
+}
+.bd-feature-pill.overlap {
+    border-color: #fecaca;
+    background: #fef2f2;
+    color: #b91c1c;
+}
+.bd-feature-pill:disabled {
+    cursor: not-allowed;
+}
+.bd-feature-tick {
+    display: inline-flex;
+}
+.bd-feature-key {
+    font:
+        600 10px 'JetBrains Mono',
+        ui-monospace,
+        monospace;
+    color: #94a3b8;
+    margin-left: 4px;
+}
+.bd-feature-pill.on .bd-feature-key {
+    color: #2563eb;
+}
+.bd-feature-pill.overlap .bd-feature-key {
+    color: #b91c1c;
+}
+.bd-features-empty {
+    padding: 12px;
+    color: #94a3b8;
+    font-style: italic;
+    font-size: 12.5px;
+}
+</style>

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

@@ -0,0 +1,316 @@
+<template>
+    <div class="bv-compat">
+        <div class="bv-compat-hint">
+            Pläne, mit denen dieses Bundle als Add-On gebucht werden kann. Features/Quotas, die der
+            Plan bereits enthält, werden als Überschneidung markiert (Doppel-Berechnung).
+        </div>
+        <div class="bv-compat-grid">
+            <button
+                v-for="entry in entries"
+                :key="entry.plan.planKey"
+                type="button"
+                class="bv-compat-card"
+                :class="{
+                    on: selectedKeys.includes(entry.plan.planKey),
+                    warn: showOverlap(entry),
+                }"
+                :disabled="locked"
+                :title="
+                    locked
+                        ? 'Live-Version ist read-only'
+                        : selectedKeys.includes(entry.plan.planKey)
+                          ? 'Plan-Kompatibilität entfernen'
+                          : 'Plan-Kompatibilität setzen'
+                "
+                @click="onToggle(entry.plan.planKey)"
+            >
+                <div class="bv-compat-head">
+                    <span class="bv-compat-mark">{{ entry.plan.planKey.slice(0, 3) }}</span>
+                    <div class="bv-compat-body">
+                        <div class="bv-compat-name">{{ entry.plan.label }}</div>
+                        <div class="bv-compat-key">{{ entry.plan.planKey }}</div>
+                    </div>
+                    <span
+                        v-if="selectedKeys.includes(entry.plan.planKey)"
+                        class="bv-compat-check"
+                        aria-hidden="true"
+                    >
+                        <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="3"
+                        >
+                            <path d="M5 13l4 4L19 7" />
+                        </svg>
+                    </span>
+                </div>
+                <div v-if="showOverlap(entry)" class="bv-compat-overlap">
+                    <div class="bv-compat-overlap-head">⚠ Überschneidung</div>
+                    <div v-if="entry.overlap.features.length > 0" class="bv-compat-overlap-list">
+                        <span class="bv-compat-overlap-kind">Features:</span>
+                        <span
+                            v-for="fk in entry.overlap.features"
+                            :key="fk"
+                            class="bv-compat-overlap-chip"
+                        >
+                            {{ featureLabel(fk) }}
+                        </span>
+                    </div>
+                    <div v-if="entry.overlap.quotas.length > 0" class="bv-compat-overlap-list">
+                        <span class="bv-compat-overlap-kind">Quotas:</span>
+                        <span
+                            v-for="qk in entry.overlap.quotas"
+                            :key="qk"
+                            class="bv-compat-overlap-chip"
+                        >
+                            {{ quotaLabel(qk) }}
+                        </span>
+                    </div>
+                </div>
+            </button>
+            <div v-if="plans.length === 0" class="bv-compat-empty">
+                Keine Pläne vorhanden — der Plan-Stamm muss zuerst angelegt werden.
+            </div>
+        </div>
+        <div v-if="overlapCount > 0" class="bv-compat-summary">
+            <span class="bv-compat-summary-ico">⚠</span>
+            <span>
+                <b>{{ overlapCount }}</b> Plan{{ overlapCount === 1 ? '' : 'e' }} mit Überschneidung
+                — Features/Quotas dieses Bundles sind im Plan bereits enthalten. Vor Publish
+                entweder das Bundle oder den Plan bereinigen.
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { DiscoveredQuota, PlanRow, PlanVersionRow } from '@saasicat/types';
+
+import { findBundlePlanOverlap, type BundlePlanOverlap } from './bundle-version-status';
+
+import type { FeatureMeta } from './BundleFeaturesEditor.vue';
+import type { QuotaMeta } from './catalog-i18n.js';
+
+// BundlePlanCompatPicker — multi-select of the plans this bundle may be
+// booked with as an add-on (plan-bundle visibility, after plan
+// simulation). For each selected plan the feature/quota overlap is
+// computed live and shown as a warning.
+//
+// Note P11.7.4: the selection is currently persisted to
+// `BundleVersionRow.compatibility` (the field exists in the type)
+// — a dedicated `bundle_plans` junction will come in its own
+// phase.
+
+interface CompatEntry {
+    plan: PlanRow;
+    overlap: BundlePlanOverlap;
+}
+
+const props = defineProps<{
+    /** Plan master records from the consumer wrapper. */
+    plans: PlanRow[];
+    /** Live (or latest) PlanVersion per planKey — overlap source. */
+    livePlanVersions?: Record<string, PlanVersionRow | null>;
+    /** Features/quotas of the current BundleVersion (for overlap computation). */
+    bundleFeatures: string[];
+    bundleQuotas: Record<string, number>;
+    /** Currently selected plan keys. */
+    selectedKeys: string[];
+    locked?: boolean;
+    /** For overlap chip labels. */
+    featureRegistry?: Record<string, FeatureMeta>;
+    availableQuotas?: DiscoveredQuota[];
+    /** Quota labels resolved in the display locale (from the quota catalog). */
+    quotaRegistry?: Record<string, QuotaMeta>;
+}>();
+
+const emit = defineEmits<{
+    (e: 'toggle', planKey: string): void;
+}>();
+
+const entries = computed<CompatEntry[]>(() =>
+    props.plans.map((plan) => ({
+        plan,
+        overlap: findBundlePlanOverlap(
+            { features: props.bundleFeatures, quotas: props.bundleQuotas },
+            props.livePlanVersions?.[plan.planKey] ?? null,
+        ),
+    })),
+);
+
+const overlapCount = computed(
+    () =>
+        entries.value.filter((e) => props.selectedKeys.includes(e.plan.planKey) && e.overlap.hasAny)
+            .length,
+);
+
+function showOverlap(entry: CompatEntry): boolean {
+    return props.selectedKeys.includes(entry.plan.planKey) && entry.overlap.hasAny;
+}
+
+function featureLabel(key: string): string {
+    return props.featureRegistry?.[key]?.label ?? key;
+}
+
+function quotaLabel(key: string): string {
+    return (
+        props.quotaRegistry?.[key]?.label ??
+        props.availableQuotas?.find((q) => q.quotaKey === key)?.label ??
+        key
+    );
+}
+
+function onToggle(planKey: string): void {
+    if (props.locked) return;
+    emit('toggle', planKey);
+}
+</script>
+
+<style scoped>
+.bv-compat {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.bv-compat-hint {
+    font-size: 11.5px;
+    color: #64748b;
+    line-height: 1.5;
+}
+.bv-compat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 8px;
+}
+.bv-compat-card {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px 12px;
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: left;
+    font-family: inherit;
+    color: #0f172a;
+    transition:
+        background 0.12s,
+        border-color 0.12s;
+}
+.bv-compat-card:hover:not(:disabled) {
+    background: #f8fafc;
+}
+.bv-compat-card.on {
+    border-color: #2563eb;
+    background: #eff6ff;
+}
+.bv-compat-card.warn {
+    border-color: #fca5a5;
+    background: #fef2f2;
+}
+.bv-compat-card:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+.bv-compat-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.bv-compat-mark {
+    width: 26px;
+    height: 26px;
+    display: grid;
+    place-items: center;
+    background: #e0e7ff;
+    color: #4338ca;
+    border: 1px solid #c7d2fe;
+    border-radius: 6px;
+    font:
+        700 9px 'JetBrains Mono',
+        ui-monospace,
+        monospace;
+    letter-spacing: 0.04em;
+    flex: 0 0 auto;
+}
+.bv-compat-body {
+    flex: 1;
+    min-width: 0;
+}
+.bv-compat-name {
+    font-size: 13px;
+    font-weight: 600;
+}
+.bv-compat-key {
+    font:
+        500 11px 'JetBrains Mono',
+        ui-monospace,
+        monospace;
+    color: #64748b;
+}
+.bv-compat-check {
+    color: #2563eb;
+    display: inline-flex;
+}
+.bv-compat-overlap {
+    padding: 6px 8px;
+    background: #fff;
+    border: 1px dashed #fecaca;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    color: #b91c1c;
+}
+.bv-compat-overlap-head {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.bv-compat-overlap-list {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex-wrap: wrap;
+    font-size: 11.5px;
+}
+.bv-compat-overlap-kind {
+    color: #7f1d1d;
+    font-weight: 600;
+}
+.bv-compat-overlap-chip {
+    padding: 1px 6px;
+    border: 1px solid #fecaca;
+    border-radius: 4px;
+    background: #fff;
+    color: #b91c1c;
+}
+.bv-compat-empty {
+    padding: 12px;
+    color: #94a3b8;
+    font-style: italic;
+    font-size: 12.5px;
+    text-align: center;
+}
+.bv-compat-summary {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 10px 12px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 8px;
+    color: #b91c1c;
+    font-size: 12.5px;
+    line-height: 1.5;
+}
+.bv-compat-summary-ico {
+    font-weight: 700;
+}
+</style>