@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/components/VersionDiffPreview.vue

@@ -1,16 +1,21 @@
 <template>
-    <div v-if="!changes || changes.length === 0" class="diff-empty">
-        Keine Änderungen gegenüber der Vorgängerversion.
+    <div v-if="!changes || changes.length === 0" class="sa-diff-preview__empty">
+        {{ msg.diffPreview.empty }}
     </div>
-    <div v-else class="diff-list">
-        <div v-for="(c, idx) in changes" :key="idx" class="diff-row" :class="rowClass(c.direction)">
-            <div class="diff-direction">
+    <div v-else class="sa-diff-preview__list">
+        <div
+            v-for="(c, idx) in changes"
+            :key="idx"
+            class="sa-diff-preview__row"
+            :class="rowClass(c.direction)"
+        >
+            <div class="sa-diff-preview__direction">
                 <q-icon :name="iconFor(c.direction)" size="16px" />
                 <span>{{ labelFor(c.direction) }}</span>
             </div>
-            <div class="diff-field">{{ humanFieldLabel(c.field) }}</div>
-            <div class="diff-values">
-                <span class="old" v-if="c.field !== 'features.added'">{{
+            <div class="sa-diff-preview__field">{{ humanFieldLabel(c.field) }}</div>
+            <div class="sa-diff-preview__values">
+                <span v-if="c.field !== 'features.added'" class="old">{{
                     formatValue(c.oldValue)
                 }}</span>
                 <q-icon
@@ -18,7 +23,7 @@
                     name="arrow_forward"
                     size="14px"
                 />
-                <span class="new" v-if="c.field !== 'features.removed'">{{
+                <span v-if="c.field !== 'features.removed'" class="new">{{
                     formatValue(c.newValue)
                 }}</span>
             </div>
@@ -27,27 +32,43 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
+import { formatCurrency } from '../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
-// Platform default field labels (plan-catalog quotas + pricing).
-// Consumer apps can add or override app-specific labels
-// (e.g. maxVehicles or maxMembers) via the `fieldLabels` prop.
-const PLATFORM_FIELD_LABELS: Readonly<Record<string, string>> = Object.freeze({
-    'features.added': 'Hinzugefügte Features',
-    'features.removed': 'Entfernte Features',
-    maxUsers: 'Max. Benutzer',
-    maxStorageGb: 'Speicher (GB)',
-    monthlyNet: 'Preis monatlich (netto)',
-    yearlyNet: 'Preis jährlich (netto)',
-    unitSize: 'Einheitsgröße',
-});
+// Renders a plan-version diff as one row per changed field. Used by the
+// plan-versions page and available to consumer apps through the
+// `./components/*` subpath export.
 
 const props = defineProps<{
     changes?: VersionChange[] | null;
-    /** App-specific field labels; merged with the platform defaults. */
+    /**
+     * Optional: field labels (e.g. `{ maxUsers: 'Max. Benutzer' }`).
+     * Apps map their own quota fields here; the default covers the generic
+     * platform fields.
+     */
     fieldLabels?: Record<string, string>;
 }>();
 
+const msg = useSaMessages('planVersions');
+const { locale } = useSuperAdminI18n();
+
+const defaultFieldLabels = computed<Record<string, string>>(() => ({
+    'features.added': msg.value.diffFields.featuresAdded,
+    'features.removed': msg.value.diffFields.featuresRemoved,
+    maxUsers: msg.value.diffFields.maxUsers,
+    maxStorageGb: msg.value.diffFields.maxStorageGb,
+    monthlyNet: msg.value.diffFields.monthlyNet,
+    yearlyNet: msg.value.diffFields.yearlyNet,
+    unitSize: msg.value.diffFields.unitSize,
+}));
+
+const mergedFieldLabels = computed(() => ({
+    ...defaultFieldLabels.value,
+    ...(props.fieldLabels ?? {}),
+}));
+
 function iconFor(direction: VersionChange['direction']): string {
     if (direction === 'IMPROVEMENT') return 'trending_up';
     if (direction === 'REGRESSION') return 'trending_down';
@@ -55,36 +76,39 @@ function iconFor(direction: VersionChange['direction']): string {
 }
 
 function labelFor(direction: VersionChange['direction']): string {
-    if (direction === 'IMPROVEMENT') return 'Verbesserung';
-    if (direction === 'REGRESSION') return 'Verschlechterung';
-    return 'Neutral';
+    if (direction === 'IMPROVEMENT') return msg.value.diffPreview.improvement;
+    if (direction === 'REGRESSION') return msg.value.diffPreview.regression;
+    return msg.value.diffPreview.neutral;
 }
 
 function rowClass(direction: VersionChange['direction']): string {
-    if (direction === 'IMPROVEMENT') return 'diff-row--improvement';
-    if (direction === 'REGRESSION') return 'diff-row--regression';
-    return 'diff-row--neutral';
+    if (direction === 'IMPROVEMENT') return 'sa-diff-preview__row--improvement';
+    if (direction === 'REGRESSION') return 'sa-diff-preview__row--regression';
+    return 'sa-diff-preview__row--neutral';
 }
 
 function humanFieldLabel(field: string): string {
-    return props.fieldLabels?.[field] ?? PLATFORM_FIELD_LABELS[field] ?? field;
+    return mergedFieldLabels.value[field] ?? field;
 }
 
+/** Decimal strings the API sends for money fields (`"29.90"`). */
+const MONEY_STRING = /^\d+\.\d{2}$/;
+
 function formatValue(value: unknown): string {
     if (value === null || value === undefined) return '–';
     if (Array.isArray(value)) {
         if (value.length === 0) return '–';
         return value.join(', ');
     }
-    if (typeof value === 'string' && /^\d+\.\d{2}$/.test(value)) {
-        return `${value} €`;
+    if (typeof value === 'string' && MONEY_STRING.test(value)) {
+        return formatCurrency(value, locale.value);
     }
     return String(value);
 }
 </script>
 
 <style scoped>
-.diff-empty {
+.sa-diff-preview__empty {
     color: #64748b;
     font-style: italic;
     padding: 12px;
@@ -92,12 +116,12 @@ function formatValue(value: unknown): string {
     border-radius: 8px;
     border: 1px dashed #cbd5e1;
 }
-.diff-list {
+.sa-diff-preview__list {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }
-.diff-row {
+.sa-diff-preview__row {
     display: grid;
     grid-template-columns: 160px 200px 1fr;
     gap: 12px;
@@ -107,22 +131,22 @@ function formatValue(value: unknown): string {
     font-size: 13px;
     align-items: center;
 }
-.diff-row--improvement {
+.sa-diff-preview__row--improvement {
     background: #f0fdf4;
     border-color: #bbf7d0;
     color: #166534;
 }
-.diff-row--regression {
+.sa-diff-preview__row--regression {
     background: #fef2f2;
     border-color: #fecaca;
     color: #991b1b;
 }
-.diff-row--neutral {
+.sa-diff-preview__row--neutral {
     background: #f8fafc;
     border-color: #e2e8f0;
     color: #475569;
 }
-.diff-direction {
+.sa-diff-preview__direction {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -131,20 +155,25 @@ function formatValue(value: unknown): string {
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
-.diff-field {
+.sa-diff-preview__field {
     color: #0f172a;
     font-weight: 500;
 }
-.diff-values {
+.sa-diff-preview__values {
     display: flex;
     align-items: center;
     gap: 8px;
 }
-.diff-values .old {
+.sa-diff-preview__values .old {
+    color: #94a3b8;
     text-decoration: line-through;
-    opacity: 0.7;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 12px;
 }
-.diff-values .new {
+.sa-diff-preview__values .new {
+    color: inherit;
     font-weight: 600;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 12px;
 }
 </style>

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

@@ -2,13 +2,10 @@
     <section class="bcp">
         <div class="bcp-head">
             <div>
-                <div class="bcp-title">Neues Bundle anlegen</div>
-                <div class="bcp-sub">
-                    Features &amp; Quotas zu einem Add-On bündeln — bepreist und kompatibel mit
-                    ausgewählten Plänen.
-                </div>
+                <div class="bcp-title">{{ msg.create.title }}</div>
+                <div class="bcp-sub">{{ msg.create.subtitle }}</div>
             </div>
-            <button class="bcp-close" type="button" aria-label="Schließen" @click="close">
+            <button class="bcp-close" type="button" :aria-label="common.close" @click="close">
                 <svg
                     width="14"
                     height="14"
@@ -28,26 +25,24 @@
                 <div class="bcp-section-head">
                     <span class="bcp-section-num">1</span>
                     <div>
-                        <div class="bcp-section-title">Stammdaten</div>
-                        <div class="bcp-section-sub">Sichtbarer Name + technischer Key.</div>
+                        <div class="bcp-section-title">{{ msg.fields.masterData }}</div>
+                        <div class="bcp-section-sub">{{ msg.create.masterDataHint }}</div>
                     </div>
                 </div>
                 <div class="bcp-grid">
                     <label class="bcp-field bcp-col-2">
-                        <span class="bcp-field-label">Label</span>
+                        <span class="bcp-field-label">{{ msg.fields.label }}</span>
                         <input
                             ref="labelInput"
                             v-model="form.label"
                             class="bcp-input"
-                            placeholder="z. B. Communication Pro"
+                            :placeholder="msg.create.labelPlaceholder"
                         />
                     </label>
                     <label class="bcp-field bcp-col-2">
                         <span class="bcp-field-label">
-                            Bundle-Key
-                            <span class="bcp-field-hint">
-                                API-stabil · wird aus dem Label erzeugt
-                            </span>
+                            {{ msg.create.bundleKey }}
+                            <span class="bcp-field-hint">{{ msg.create.bundleKeyHint }}</span>
                         </span>
                         <input
                             v-model="form.bundleKey"
@@ -60,12 +55,12 @@
                         </span>
                     </label>
                     <label class="bcp-field bcp-col-2">
-                        <span class="bcp-field-label">Beschreibung</span>
+                        <span class="bcp-field-label">{{ common.description }}</span>
                         <textarea
                             v-model="form.description"
                             rows="2"
                             class="bcp-input bcp-textarea"
-                            placeholder="z. B. Kampagnen, WhatsApp und Korrespondenz für aktive Vereine."
+                            :placeholder="msg.create.descriptionPlaceholder"
                         />
                     </label>
                 </div>
@@ -76,15 +71,13 @@
                 <div class="bcp-section-head">
                     <span class="bcp-section-num">2</span>
                     <div>
-                        <div class="bcp-section-title">v1 · Pricing &amp; Gültigkeit</div>
-                        <div class="bcp-section-sub">
-                            Monats- &amp; Jahrespreis sowie Datum, ab dem das Bundle verkaufbar wird.
-                        </div>
+                        <div class="bcp-section-title">{{ msg.create.sectionPricing }}</div>
+                        <div class="bcp-section-sub">{{ msg.create.pricingHint }}</div>
                     </div>
                 </div>
                 <div class="bcp-grid">
                     <label class="bcp-field">
-                        <span class="bcp-field-label">Monatspreis</span>
+                        <span class="bcp-field-label">{{ msg.fields.monthlyPrice }}</span>
                         <div class="bcp-input-grp">
                             <input
                                 v-model="form.monthlyNet"
@@ -93,11 +86,11 @@
                                 class="bcp-input"
                                 placeholder="9.90"
                             />
-                            <span class="bcp-input-unit">€/Mo</span>
+                            <span class="bcp-input-unit">{{ msg.fields.perMonthUnit }}</span>
                         </div>
                     </label>
                     <label class="bcp-field">
-                        <span class="bcp-field-label">Jahrespreis</span>
+                        <span class="bcp-field-label">{{ msg.fields.yearlyPrice }}</span>
                         <div class="bcp-input-grp">
                             <input
                                 v-model="form.yearlyNet"
@@ -106,23 +99,13 @@
                                 class="bcp-input"
                                 placeholder="99.00"
                             />
-                            <span class="bcp-input-unit">€/Jahr</span>
+                            <span class="bcp-input-unit">{{ msg.fields.perYearUnit }}</span>
                         </div>
                     </label>
                     <label class="bcp-field bcp-col-2">
-                        <span class="bcp-field-label">Gültig ab</span>
+                        <span class="bcp-field-label">{{ msg.fields.validFrom }}</span>
                         <input v-model="form.validFrom" type="date" class="bcp-input" />
-                        <span class="bcp-field-hint">
-                            <template v-if="form.validFrom && form.validFrom <= todayIso">
-                                ✓ Bundle ist nach Anlage sofort live und verkaufbar.
-                            </template>
-                            <template v-else-if="form.validFrom">
-                                ⏳ Geplant — wird ab {{ formatDateDE(form.validFrom) }} verkaufbar.
-                            </template>
-                            <template v-else>
-                                Pflicht beim Publish — kann auch nach Anlage gesetzt werden.
-                            </template>
-                        </span>
+                        <span class="bcp-field-hint">{{ validFromHint }}</span>
                     </label>
                 </div>
             </section>
@@ -132,11 +115,8 @@
                 <div class="bcp-section-head">
                     <span class="bcp-section-num">3</span>
                     <div>
-                        <div class="bcp-section-title">Kompatibel mit Plänen</div>
-                        <div class="bcp-section-sub">
-                            Mit welchen Plänen darf dieses Bundle als Add-On gebucht werden?
-                            Überschneidungen werden direkt markiert.
-                        </div>
+                        <div class="bcp-section-title">{{ msg.fields.planCompat }}</div>
+                        <div class="bcp-section-sub">{{ msg.create.planCompatHint }}</div>
                     </div>
                 </div>
                 <BundlePlanCompatPicker
@@ -157,10 +137,8 @@
                 <div class="bcp-section-head">
                     <span class="bcp-section-num">4</span>
                     <div>
-                        <div class="bcp-section-title">Features im Bundle</div>
-                        <div class="bcp-section-sub">
-                            {{ form.features.length }} von {{ availableFeatures.length }} ausgewählt
-                        </div>
+                        <div class="bcp-section-title">{{ msg.create.sectionFeatures }}</div>
+                        <div class="bcp-section-sub">{{ featureSelectionText }}</div>
                     </div>
                 </div>
                 <BundleFeaturesEditor
@@ -178,12 +156,12 @@
                     <span class="bcp-section-num">5</span>
                     <div>
                         <div class="bcp-section-title">
-                            Quotas
-                            <span class="bcp-field-hint" style="margin-left: 6px">optional</span>
-                        </div>
-                        <div class="bcp-section-sub">
-                            Quotas, die das Bundle on top des Plans setzt.
+                            {{ msg.fields.quotas }}
+                            <span class="bcp-field-hint" style="margin-left: 6px">
+                                {{ msg.create.quotasOptional }}
+                            </span>
                         </div>
+                        <div class="bcp-section-sub">{{ msg.create.quotasHint }}</div>
                     </div>
                 </div>
                 <BundleQuotasEditor
@@ -201,10 +179,7 @@
 
         <div class="bcp-foot">
             <span v-if="overlapPlansCount > 0" class="bcp-foot-hint bcp-foot-hint--warn">
-                ⚠ Überschneidung mit {{ overlapPlansCount }} Plan{{
-                    overlapPlansCount === 1 ? '' : 'en'
-                }}
-                — bitte prüfen
+                {{ overlapWarningText }}
             </span>
             <span v-else-if="form.features.length > 0" class="bcp-foot-hint">
                 <svg
@@ -218,25 +193,33 @@
                     <path d="M5 13l4 4L19 7" />
                 </svg>
                 <span>
-                    <b>{{ form.features.length }}</b> Feature{{
-                        form.features.length === 1 ? '' : 's'
+                    <b>{{ form.features.length }}</b>
+                    {{
+                        form.features.length === 1
+                            ? msg.create.summaryFeatureOne
+                            : msg.create.summaryFeatureMany
                     }}
                     <template v-if="quotaCount > 0">
-                        · <b>{{ quotaCount }}</b> Quota{{ quotaCount === 1 ? '' : 's' }}
+                        · <b>{{ quotaCount }}</b>
+                        {{
+                            quotaCount === 1
+                                ? msg.create.summaryQuotaOne
+                                : msg.create.summaryQuotaMany
+                        }}
                     </template>
                     <template v-if="form.planIds.length > 0">
-                        · <b>{{ form.planIds.length }}</b> Plan-Kompat.
+                        · <b>{{ form.planIds.length }}</b> {{ msg.create.summaryPlanCompat }}
                     </template>
                 </span>
             </span>
-            <button class="bcp-btn" type="button" @click="close">Abbrechen</button>
+            <button class="bcp-btn" type="button" @click="close">{{ common.cancel }}</button>
             <button
                 class="bcp-btn bcp-btn--primary"
                 type="button"
                 :disabled="!canSubmit || submitting"
                 @click="submit"
             >
-                {{ submitting ? 'Lege an …' : 'Bundle anlegen' }}
+                {{ submitting ? msg.create.submitting : msg.create.submit }}
             </button>
         </div>
     </section>
@@ -259,7 +242,9 @@ import BundleFeaturesEditor, { type FeatureMeta } from './BundleFeaturesEditor.v
 import BundlePlanCompatPicker from './BundlePlanCompatPicker.vue';
 import BundleQuotasEditor from './BundleQuotasEditor.vue';
 import type { QuotaMeta } from './catalog-i18n.js';
-import { findBundlePlanOverlap, formatDateDE } from './bundle-version-status';
+import { findBundlePlanOverlap, formatDate } from './bundle-version-status';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 // BundleCreatePanel — expandable inline panel for creating a new
 // bundle (root + v1 draft) at the top of the bundle list. Uses the same
@@ -306,8 +291,20 @@ const emit = defineEmits<{
     (e: 'created', bundle: BundleRow): void;
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+const { locale } = useSuperAdminI18n();
+
 const todayIso = computed(() => new Date().toISOString().slice(0, 10));
 
+const validFromHint = computed(() => {
+    if (!form.validFrom) return msg.value.create.validFromHint;
+    if (form.validFrom <= todayIso.value) return msg.value.create.validFromImmediate;
+    return formatMessage(msg.value.create.validFromScheduled, {
+        date: formatDate(form.validFrom, locale.value),
+    });
+});
+
 const BUNDLE_KEY_PATTERN = /^[A-Z][A-Z0-9_]*$/;
 const PRICE_RE = /^\d+(\.\d{1,2})?$/;
 
@@ -362,14 +359,21 @@ function onBundleKeyInput(event: Event): void {
 const bundleKeyError = computed<string | null>(() => {
     if (!form.bundleKey) return null;
     if (!BUNDLE_KEY_PATTERN.test(form.bundleKey)) {
-        return 'Nur A-Z, 0-9, Underscore; muss mit Buchstabe beginnen.';
+        return msg.value.create.errorKeyFormat;
     }
     if (props.existingBundleKeys.includes(form.bundleKey)) {
-        return 'Dieser Bundle-Key existiert bereits.';
+        return msg.value.create.errorKeyExists;
     }
     return null;
 });
 
+const featureSelectionText = computed(() =>
+    formatMessage(msg.value.create.selectedOfTotal, {
+        selected: form.features.length,
+        total: props.availableFeatures.length,
+    }),
+);
+
 const canSubmit = computed(() => {
     if (!form.label.trim()) return false;
     if (!form.bundleKey) return false;
@@ -409,6 +413,15 @@ const overlapPlansCount = computed(
         ).length,
 );
 
+const overlapWarningText = computed(() =>
+    formatMessage(
+        overlapPlansCount.value === 1
+            ? msg.value.create.overlapWarningOne
+            : msg.value.create.overlapWarningMany,
+        { count: overlapPlansCount.value },
+    ),
+);
+
 const quotaCount = computed(() => Object.keys(form.quotas).length);
 
 // ── Event handlers ────────────────────────────────────────

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

@@ -48,7 +48,7 @@
             </div>
         </template>
         <div v-if="groupedFeatures.length === 0" class="bd-features-empty">
-            Keine Features im Discovery-Snapshot.
+            {{ msg.featuresEditor.empty }}
         </div>
     </div>
 </template>
@@ -56,6 +56,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { DiscoveredFeature } from '@saasicat/types';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 // BundleFeaturesEditor — grouped pills for the feature selection of a
 // bundle version (after plan simulation). The source of truth for the
@@ -88,6 +89,10 @@ const props = defineProps<{
     overlapKeys?: string[];
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
 const emit = defineEmits<{
     (e: 'toggle', featureKey: string): void;
 }>();
@@ -97,15 +102,17 @@ function featureLabel(key: string): string {
 }
 
 function featureGroup(key: string): string {
-    return props.featureRegistry?.[key]?.group ?? 'Allgemein';
+    return props.featureRegistry?.[key]?.group ?? common.value.general;
 }
 
 function pillTitle(key: string): string {
-    if (props.locked) return 'Live-Version ist read-only';
+    if (props.locked) return msg.value.compatPicker.lockedTooltip;
     if (props.overlapKeys?.includes(key)) {
-        return 'Feature ist im kompatiblen Plan bereits enthalten — Doppel-Berechnung';
+        return msg.value.featuresEditor.overlapTooltip;
     }
-    return props.features.includes(key) ? 'Aus Bundle entfernen' : 'In Bundle aufnehmen';
+    return props.features.includes(key)
+        ? msg.value.featuresEditor.removeTooltip
+        : msg.value.featuresEditor.addTooltip;
 }
 
 const overlapKeys = computed(() => props.overlapKeys ?? []);
@@ -119,7 +126,7 @@ const groupedFeatures = computed(() => {
         byGroup.set(g, list);
     }
     return [...byGroup.entries()]
-        .sort(([a], [b]) => a.localeCompare(b, 'de-DE'))
+        .sort(([a], [b]) => a.localeCompare(b, intlLocale.value))
         .map(([key, rows]) => ({ key, label: key, rows }));
 });
 

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

@@ -1,9 +1,6 @@
 <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-hint">{{ msg.compatPicker.hint }}</div>
         <div class="bv-compat-grid">
             <button
                 v-for="entry in entries"
@@ -17,10 +14,10 @@
                 :disabled="locked"
                 :title="
                     locked
-                        ? 'Live-Version ist read-only'
+                        ? msg.compatPicker.lockedTooltip
                         : selectedKeys.includes(entry.plan.planKey)
-                          ? 'Plan-Kompatibilität entfernen'
-                          : 'Plan-Kompatibilität setzen'
+                          ? msg.compatPicker.removeTooltip
+                          : msg.compatPicker.addTooltip
                 "
                 @click="onToggle(entry.plan.planKey)"
             >
@@ -48,9 +45,11 @@
                     </span>
                 </div>
                 <div v-if="showOverlap(entry)" class="bv-compat-overlap">
-                    <div class="bv-compat-overlap-head">⚠ Überschneidung</div>
+                    <div class="bv-compat-overlap-head">{{ msg.compatPicker.overlapHead }}</div>
                     <div v-if="entry.overlap.features.length > 0" class="bv-compat-overlap-list">
-                        <span class="bv-compat-overlap-kind">Features:</span>
+                        <span class="bv-compat-overlap-kind">
+                            {{ msg.compatPicker.overlapFeatures }}
+                        </span>
                         <span
                             v-for="fk in entry.overlap.features"
                             :key="fk"
@@ -60,7 +59,9 @@
                         </span>
                     </div>
                     <div v-if="entry.overlap.quotas.length > 0" class="bv-compat-overlap-list">
-                        <span class="bv-compat-overlap-kind">Quotas:</span>
+                        <span class="bv-compat-overlap-kind">
+                            {{ msg.compatPicker.overlapQuotas }}
+                        </span>
                         <span
                             v-for="qk in entry.overlap.quotas"
                             :key="qk"
@@ -72,15 +73,16 @@
                 </div>
             </button>
             <div v-if="plans.length === 0" class="bv-compat-empty">
-                Keine Pläne vorhanden — der Plan-Stamm muss zuerst angelegt werden.
+                {{ msg.compatPicker.empty }}
             </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.
+                <b>{{ overlapCount }}</b>
+                {{
+                    overlapCount === 1 ? msg.compatPicker.summaryOne : msg.compatPicker.summaryMany
+                }}
             </span>
         </div>
     </div>
@@ -94,6 +96,7 @@ import { findBundlePlanOverlap, type BundlePlanOverlap } from './bundle-version-
 
 import type { FeatureMeta } from './BundleFeaturesEditor.vue';
 import type { QuotaMeta } from './catalog-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 // BundlePlanCompatPicker — multi-select of the plans this bundle may be
 // booked with as an add-on (plan-bundle visibility, after plan
@@ -132,6 +135,8 @@ const emit = defineEmits<{
     (e: 'toggle', planKey: string): void;
 }>();
 
+const msg = useSaMessages('bundles');
+
 const entries = computed<CompatEntry[]>(() =>
     props.plans.map((plan) => ({
         plan,