@saasicat/ui-vue 0.5.0 → 0.7.0

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

@@ -2,14 +2,9 @@
     <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-title">{{ panelTitle }}</div>
                 <div class="pc-card-sub">
-                    {{ diffPair ? 'Was sich beim Publish ändert' : 'Kein Vergleich verfügbar' }}
+                    {{ diffPair ? msg.diff.subOnPublish : msg.diff.noComparison }}
                 </div>
             </div>
             <div v-if="diffPair" class="pc-pillrow">
@@ -74,18 +69,32 @@
                 </span>
             </div>
             <div v-if="diffRows.length === 0" class="pc-empty pc-empty--inline">
-                Keine Änderungen erkannt.
+                {{ msg.diff.noChangesDetected }}
             </div>
         </div>
     </section>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { DiffRow, DiffSummary, PlanVersionPair } from './types';
 
-defineProps<{
+const props = defineProps<{
     diffPair: PlanVersionPair | null;
     diff: DiffSummary;
     diffRows: DiffRow[];
 }>();
+
+const msg = useSaMessages('planDetail');
+
+const panelTitle = computed(() => {
+    const pair = props.diffPair;
+    if (!pair) return msg.value.diff.title;
+    return formatMessage(msg.value.diff.titleCompare, {
+        from: pair.from.version,
+        to: pair.to.version,
+    });
+});
 </script>

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

@@ -13,7 +13,7 @@
                     <path d="M5 12h14M13 5l7 7-7 7" />
                 </svg>
             </span>
-            <span>Zurück zur Liste</span>
+            <span>{{ msg.header.backToList }}</span>
         </button>
     </div>
 
@@ -24,7 +24,7 @@
             </div>
             <div class="pc-header-titles">
                 <h2 class="pc-h-title">{{ plan.label }}</h2>
-                <p class="pc-h-sub">{{ plan.description || 'Keine Beschreibung.' }}</p>
+                <p class="pc-h-sub">{{ plan.description || msg.header.noDescription }}</p>
             </div>
         </div>
         <div class="pc-header-right">
@@ -40,7 +40,7 @@
                     <rect x="9" y="9" width="11" height="11" rx="2" />
                     <path d="M5 15V5a2 2 0 012-2h10" />
                 </svg>
-                <span>Plan klonen</span>
+                <span>{{ msg.header.clonePlan }}</span>
             </button>
             <button class="pc-btn" type="button" @click="emit('viewCatalog')">
                 <svg
@@ -54,13 +54,13 @@
                     <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>
+                <span>{{ msg.header.viewInCatalog }}</span>
             </button>
             <button
                 class="pc-btn pc-btn--primary"
                 type="button"
                 :disabled="hasOpenDraft"
-                :title="hasOpenDraft ? 'Es gibt bereits eine offene Draft' : undefined"
+                :title="hasOpenDraft ? msg.header.draftAlreadyOpen : undefined"
                 @click="emit('createDraft')"
             >
                 <svg
@@ -73,7 +73,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Neue Draft-Version</span>
+                <span>{{ msg.header.newDraftVersion }}</span>
             </button>
         </div>
     </div>
@@ -81,6 +81,7 @@
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 defineProps<{
     plan: PlanRow;
@@ -95,4 +96,6 @@ const emit = defineEmits<{
     (e: 'viewCatalog'): void;
     (e: 'createDraft'): void;
 }>();
+
+const msg = useSaMessages('planDetail');
 </script>

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

@@ -2,10 +2,8 @@
     <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 class="pc-card-title">{{ msg.kpis.tenantImpact }}</div>
+                <div class="pc-card-sub">{{ msg.impact.subtitle }}</div>
             </div>
         </div>
         <div class="pc-impact-strip">
@@ -19,7 +17,7 @@
                             background: '#10b981',
                         }"
                     />
-                    <span class="pc-impact-bar-label">{{ tenantImpact.auto }} auto-migrieren</span>
+                    <span class="pc-impact-bar-label">{{ autoLabel }}</span>
                 </div>
                 <div class="pc-impact-bar">
                     <span
@@ -29,9 +27,7 @@
                             background: '#f59e0b',
                         }"
                     />
-                    <span class="pc-impact-bar-label"
-                        >{{ tenantImpact.review }} brauchen Review</span
-                    >
+                    <span class="pc-impact-bar-label">{{ reviewLabel }}</span>
                 </div>
                 <div class="pc-impact-bar">
                     <span
@@ -41,7 +37,7 @@
                             background: '#ef4444',
                         }"
                     />
-                    <span class="pc-impact-bar-label">{{ tenantImpact.conflict }} Konflikt</span>
+                    <span class="pc-impact-bar-label">{{ conflictLabel }}</span>
                 </div>
             </div>
         </div>
@@ -64,13 +60,28 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { ImpactTenant, TenantImpact } from './types';
 
-defineProps<{
+const props = defineProps<{
     tenantImpact: TenantImpact | null;
     tenantImpactTotal: number;
 }>();
 
+const msg = useSaMessages('planDetail');
+
+const autoLabel = computed(() =>
+    formatMessage(msg.value.impact.autoMigrate, { count: props.tenantImpact?.auto ?? 0 }),
+);
+const reviewLabel = computed(() =>
+    formatMessage(msg.value.impact.needReview, { count: props.tenantImpact?.review ?? 0 }),
+);
+const conflictLabel = computed(() =>
+    formatMessage(msg.value.impact.conflict, { count: props.tenantImpact?.conflict ?? 0 }),
+);
+
 function pct(part: number, total: number): string {
     if (total <= 0) return '0%';
     return `${Math.max(2, Math.round((part / total) * 100))}%`;
@@ -86,7 +97,9 @@ function initialsOf(name: string): string {
 }
 
 function impactStateLabel(state: ImpactTenant['state']): string {
-    return state === 'auto' ? 'auto' : state === 'review' ? 'review' : 'Konflikt';
+    if (state === 'auto') return msg.value.impact.stateAuto;
+    if (state === 'review') return msg.value.impact.stateReview;
+    return msg.value.impact.stateConflict;
 }
 
 function impactStateChip(state: ImpactTenant['state']): string {

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

@@ -1,7 +1,7 @@
 <template>
     <div class="pc-kpis">
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Aktive Version</div>
+            <div class="pc-kpi-label">{{ msg.kpis.activeVersion }}</div>
             <div class="pc-kpi-val">
                 <template v-if="liveVersion">
                     v{{ liveVersion.version }}
@@ -9,44 +9,39 @@
                 </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 class="pc-kpi-sub">{{ activeVersionSub }}</div>
         </div>
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Tenant-Impact</div>
+            <div class="pc-kpi-label">{{ msg.kpis.tenantImpact }}</div>
             <div class="pc-kpi-val">{{ tenantImpactTotal }}</div>
-            <div class="pc-kpi-sub">Mandanten auf diesem Plan</div>
+            <div class="pc-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
         </div>
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Versionen</div>
+            <div class="pc-kpi-label">{{ msg.kpis.versions }}</div>
             <div class="pc-kpi-val">{{ versionsCount }}</div>
-            <div class="pc-kpi-sub">
-                {{ publishedCount }} live/superseded · {{ draftCount }} Draft
-            </div>
+            <div class="pc-kpi-sub">{{ versionsSummary }}</div>
         </div>
         <div :class="['pc-kpi', draftVersion ? 'pc-kpi--draft' : '']">
             <div class="pc-kpi-label" :style="draftVersion ? 'color:#b45309' : ''">
-                {{ draftVersion ? 'Offener Draft' : 'Kein Draft' }}
+                {{ draftVersion ? msg.kpis.openDraft : msg.kpis.noDraft }}
             </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' }}
+                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.createNewDraft }}
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
-defineProps<{
+const props = defineProps<{
     liveVersion: PlanVersionRow | null;
     tenantImpactTotal: number;
     versionsCount: number;
@@ -54,4 +49,20 @@ defineProps<{
     draftCount: number;
     draftVersion: PlanVersionRow | null;
 }>();
+
+const msg = useSaMessages('planDetail');
+
+const activeVersionSub = computed(() => {
+    const validFrom = props.liveVersion?.validFrom;
+    return validFrom
+        ? formatMessage(msg.value.kpis.activeSince, { date: validFrom.slice(0, 10) })
+        : msg.value.kpis.noPublishedVersion;
+});
+
+const versionsSummary = computed(() =>
+    formatMessage(msg.value.kpis.versionsSummaryWithDrafts, {
+        published: props.publishedCount,
+        drafts: props.draftCount,
+    }),
+);
 </script>

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

@@ -2,9 +2,9 @@
     <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-title">{{ msg.versions.title }}</div>
                 <div class="pc-card-sub">
-                    Pro Plan max. 1 offene Draft-Version · Publish setzt Vorgänger auf
+                    {{ msg.versions.subtitle }}
                     <code class="pc-mono">supersededAt</code>
                 </div>
             </div>
@@ -24,7 +24,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Draft v{{ nextDraftVersion }}</span>
+                <span>{{ newDraftButtonLabel }}</span>
             </button>
         </div>
 
@@ -36,7 +36,10 @@
                     :class="['pc-vtl-seg', `pc-vtl-${seg.status}`]"
                     :style="{ flex: seg.flex }"
                 >
-                    v{{ seg.version }}<template v-if="seg.status === 'draft'"> · draft</template>
+                    v{{ seg.version
+                    }}<template v-if="seg.status === 'draft'">{{
+                        msg.versions.timelineDraftSuffix
+                    }}</template>
                 </div>
             </div>
             <div class="pc-vtl-axis">
@@ -45,15 +48,19 @@
         </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-version pc-vrow-headlabel">{{ msg.versions.colVersion }}</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel">{{ msg.versions.colValidity }}</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
+                {{ msg.versions.colPricing }}
+            </div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
+                {{ msg.versions.colImpact }}
+            </div>
+            <div class="pc-vrow-note pc-vrow-headlabel">{{ msg.versions.colChangeNoteShort }}</div>
             <div class="pc-vrow-actions" />
         </div>
         <div v-if="versions.length === 0" class="pc-empty">
-            Noch keine Versionen — „Neue Draft-Version" oben rechts.
+            {{ msg.versions.empty }}
         </div>
         <div
             v-for="row in sortedVersions"
@@ -77,9 +84,12 @@
             </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>
+                    {{ formatMoney(row.monthlyNet)
+                    }}<span class="pc-vrow-price-unit">{{ msg.versions.perMonthUnit }}</span>
+                </div>
+                <div class="pc-vrow-sub">
+                    {{ formatMoney(row.yearlyNet) }} {{ msg.versions.perYearUnit }}
                 </div>
-                <div class="pc-vrow-sub">{{ formatMoney(row.yearlyNet) }} / Jahr</div>
             </div>
             <div class="pc-vrow-cell pc-vrow-cell--right">
                 <div
@@ -88,7 +98,7 @@
                 >
                     {{ impactByVersion[row.version] ?? 0 }}
                 </div>
-                <div class="pc-vrow-sub">Mandanten</div>
+                <div class="pc-vrow-sub">{{ msg.versions.tenants }}</div>
             </div>
             <div class="pc-vrow-note" :title="row.changeNote ?? ''">
                 {{ row.changeNote || '—' }}
@@ -110,7 +120,7 @@
                     >
                         <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                     </svg>
-                    <span>Publish</span>
+                    <span>{{ msg.versions.publish }}</span>
                 </button>
                 <button
                     v-if="editabilityOf(row).editable"
@@ -118,8 +128,8 @@
                     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'
+                            ? msg.versions.preActiveTitle
+                            : msg.versions.editDraftTitle
                     "
                     @click="emit('editDraft', row)"
                 >
@@ -133,7 +143,7 @@
                     >
                         <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>
+                    <span>{{ common.edit }}</span>
                 </button>
                 <button
                     v-if="row.publishedAt !== null && row.supersededAt === null && draftVersion"
@@ -152,7 +162,7 @@
                         <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>
+                    <span>{{ msg.versions.viewDiff }}</span>
                 </button>
             </div>
         </div>
@@ -160,10 +170,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { isVersionEditable, type PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { formatCurrency } from '../../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { TimelineSegment } from './types';
 
-defineProps<{
+const props = defineProps<{
     versions: PlanVersionRow[];
     sortedVersions: PlanVersionRow[];
     timelineSegments: TimelineSegment[];
@@ -181,6 +195,14 @@ const emit = defineEmits<{
     (e: 'viewDiff', from: PlanVersionRow, to: PlanVersionRow): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { locale } = useSuperAdminI18n();
+const common = useSaMessages('common');
+
+const newDraftButtonLabel = computed(() =>
+    formatMessage(msg.value.versions.newDraftButton, { version: props.nextDraftVersion }),
+);
+
 function editabilityOf(version: PlanVersionRow): {
     editable: boolean;
     reason: 'draft' | 'pre-active' | null;
@@ -203,8 +225,7 @@ function statusLabel(row: PlanVersionRow): string {
 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('.', ',')} €`;
+    return formatCurrency(num, locale.value);
 }
 
 function updatedLabel(row: PlanVersionRow): string {
@@ -218,9 +239,13 @@ function updatedLabel(row: PlanVersionRow): string {
     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`;
+    if (days <= 0) return msg.value.versions.updatedToday;
+    if (days < 30) return formatMessage(msg.value.versions.updatedDaysAgo, { days });
+    if (days < 365) {
+        return formatMessage(msg.value.versions.updatedMonthsAgo, {
+            months: Math.floor(days / 30),
+        });
+    }
+    return formatMessage(msg.value.versions.updatedYearsAgo, { years: Math.floor(days / 365) });
 }
 </script>

package/src/components/plan-create-dialog/PlanCreateDialog.vue

@@ -8,13 +8,15 @@
         <div class="pcd-modal" role="dialog" aria-labelledby="pcd-title">
             <div class="pcd-head">
                 <div class="pcd-head-text">
-                    <div id="pcd-title" class="pcd-title">Neuen Plan anlegen</div>
-                    <div class="pcd-sub">
-                        Plan-Stamm anlegen. Im nächsten Schritt weist du Features, Quotas und
-                        Bundles zu.
-                    </div>
+                    <div id="pcd-title" class="pcd-title">{{ msg.createDialog.title }}</div>
+                    <div class="pcd-sub">{{ msg.createDialog.subtitle }}</div>
                 </div>
-                <button class="pcd-close" type="button" aria-label="Schließen" @click="onCancel">
+                <button
+                    class="pcd-close"
+                    type="button"
+                    :aria-label="common.close"
+                    @click="onCancel"
+                >
                     <svg
                         width="14"
                         height="14"
@@ -32,41 +34,43 @@
                 <div class="pcd-row pcd-row--2col">
                     <div class="pcd-field">
                         <div class="pcd-field-label">
-                            Plan-Key
+                            {{ msg.createDialog.labelPlanKey }}
                             <span class="pcd-kbd">UNIQUE</span>
                         </div>
                         <input
                             ref="keyInput"
                             class="pcd-input"
                             :class="{ 'pcd-input--error': keyError }"
-                            placeholder="z. B. SCALE"
+                            :placeholder="msg.createDialog.placeholderPlanKey"
                             :value="form.planKey"
                             @input="onPlanKeyInput"
                         />
                         <div v-if="keyError" class="pcd-hint pcd-hint--error">{{ keyError }}</div>
-                        <div v-else class="pcd-hint">
-                            Großbuchstaben + Unterstriche · API-stabil, nicht änderbar nach Publish
-                        </div>
+                        <div v-else class="pcd-hint">{{ msg.createDialog.hintPlanKey }}</div>
                     </div>
                     <div class="pcd-field">
-                        <div class="pcd-field-label">Anzeigename</div>
-                        <input class="pcd-input" placeholder="z. B. Scale" v-model="form.label" />
-                        <div class="pcd-hint">Wie der Plan im Catalog erscheint</div>
+                        <div class="pcd-field-label">{{ msg.createDialog.labelDisplayName }}</div>
+                        <input
+                            class="pcd-input"
+                            :placeholder="msg.createDialog.placeholderDisplayName"
+                            v-model="form.label"
+                        />
+                        <div class="pcd-hint">{{ msg.createDialog.hintDisplayName }}</div>
                     </div>
                 </div>
 
                 <div class="pcd-field">
-                    <div class="pcd-field-label">Beschreibung</div>
+                    <div class="pcd-field-label">{{ common.description }}</div>
                     <textarea
                         class="pcd-input pcd-input--textarea"
                         rows="2"
-                        placeholder="Was bekommt der Kunde mit diesem Plan?"
+                        :placeholder="msg.createDialog.placeholderDescription"
                         v-model="form.description"
                     />
                 </div>
 
                 <div class="pcd-field">
-                    <div class="pcd-field-label">Basis für die erste Version</div>
+                    <div class="pcd-field-label">{{ msg.createDialog.labelBasis }}</div>
                     <div class="pcd-choice-grid">
                         <button
                             v-for="opt in choiceOptions"
@@ -87,7 +91,7 @@
 
             <div class="pcd-foot">
                 <button class="pcd-btn pcd-btn--ghost" type="button" @click="onCancel">
-                    Abbrechen
+                    {{ common.cancel }}
                 </button>
                 <button
                     class="pcd-btn pcd-btn--primary"
@@ -95,7 +99,9 @@
                     :disabled="!canSubmit || submitting"
                     @click="onSubmit"
                 >
-                    <span>{{ submitting ? 'Wird angelegt…' : 'Weiter · Komponenten' }}</span>
+                    <span>{{
+                        submitting ? msg.createDialog.submitting : msg.createDialog.submit
+                    }}</span>
                     <span class="pcd-ico" aria-hidden="true">
                         <svg
                             width="14"
@@ -116,6 +122,8 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 // PlanCreateDialog — step 1 of the "new plan" flow from the plan
 // simulation. Collects the plan master data (key, label, description) plus the
@@ -168,13 +176,16 @@ const emit = defineEmits<{
     (e: 'cancel'): void;
 }>();
 
-const EMPTY_BASIS: TemplateOption = {
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
+const emptyBasis = computed<TemplateOption>(() => ({
     key: 'empty',
-    label: 'Leerer Plan',
+    label: msg.value.createDialog.emptyPlan,
     features: [],
     quotas: {},
     bundles: [],
-};
+}));
 
 const form = reactive({
     planKey: '',
@@ -206,10 +217,10 @@ function onPlanKeyInput(e: Event): void {
 const keyError = computed<string | null>(() => {
     if (!form.planKey) return null;
     if (!/^[A-Z][A-Z0-9_]*$/.test(form.planKey)) {
-        return 'Muss mit Buchstabe beginnen, nur A–Z, 0–9, _.';
+        return msg.value.createDialog.errorKeyFormat;
     }
     if (props.existingPlanKeys.includes(form.planKey)) {
-        return `„${form.planKey}" existiert bereits.`;
+        return formatMessage(msg.value.createDialog.errorKeyExists, { key: form.planKey });
     }
     return null;
 });
@@ -222,12 +233,12 @@ const choiceOptions = computed(() => {
     const options = [
         {
             key: 'empty',
-            title: 'Leerer Plan',
-            subtitle: 'Im Editor alles selbst zusammenstellen',
+            title: msg.value.createDialog.emptyPlan,
+            subtitle: msg.value.createDialog.emptyPlanHint,
         },
         ...props.availableTemplates.map((t) => ({
             key: t.key,
-            title: `Klon von ${t.label}`,
+            title: formatMessage(msg.value.createDialog.cloneOf, { label: t.label }),
             subtitle: countsLabel(t),
         })),
     ];
@@ -235,17 +246,16 @@ const choiceOptions = computed(() => {
 });
 
 function countsLabel(t: TemplateOption): string {
-    const parts = [
-        `${t.features.length} Features`,
-        `${Object.keys(t.quotas).length} Quotas`,
-        `${t.bundles.length} Bundles`,
-    ];
-    return parts.join(' · ');
+    return formatMessage(msg.value.createDialog.counts, {
+        features: t.features.length,
+        quotas: Object.keys(t.quotas).length,
+        bundles: t.bundles.length,
+    });
 }
 
 function selectedTemplate(): TemplateOption {
-    if (form.basis === 'empty') return EMPTY_BASIS;
-    return props.availableTemplates.find((t) => t.key === form.basis) ?? EMPTY_BASIS;
+    if (form.basis === 'empty') return emptyBasis.value;
+    return props.availableTemplates.find((t) => t.key === form.basis) ?? emptyBasis.value;
 }
 
 function onSubmit(): void {