@saasicat/ui-vue 0.4.0 → 0.6.0

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 {

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

@@ -2,12 +2,12 @@
     <section class="pd-panel pd-audit">
         <div class="pd-panel-head">
             <div style="min-width: 0">
-                <h3 class="pd-panel-title">Audit-Log</h3>
-                <div class="pd-panel-sub">Letzte Änderungen an diesem Plan</div>
+                <h3 class="pd-panel-title">{{ msg.auditLog.title }}</h3>
+                <div class="pd-panel-sub">{{ msg.auditLog.subtitle }}</div>
             </div>
         </div>
         <div class="pd-audit-body">
-            <div v-if="loadingAudit" class="pd-diff-empty">Lade Audit-Log…</div>
+            <div v-if="loadingAudit" class="pd-diff-empty">{{ msg.auditLog.loading }}</div>
             <div v-for="a in auditRows" :key="a.id" class="pd-audit-row">
                 <span :class="['pd-audit-dot', `pd-audit-${auditKind(a.action)}`]" />
                 <span class="pd-audit-when">{{ formatAuditDate(a.createdAt) }}</span>
@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { AuditRow } from './types.js';
 
 defineProps<{
@@ -27,6 +29,9 @@ defineProps<{
     loadingAudit: boolean;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { intlLocale } = useSuperAdminI18n();
+
 function auditKind(action: string): string {
     const a = action.toLowerCase();
     if (a.includes('publish')) return 'publish';
@@ -51,9 +56,9 @@ function formatAuditDate(iso: string): string {
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())) return iso;
     const isToday = d.toDateString() === new Date().toDateString();
-    const time = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    const time = d.toLocaleTimeString(intlLocale.value, { hour: '2-digit', minute: '2-digit' });
     return isToday
-        ? `heute · ${time}`
-        : `${d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' })} · ${time}`;
+        ? formatMessage(msg.value.auditLog.today, { time })
+        : `${d.toLocaleDateString(intlLocale.value, { day: '2-digit', month: 'short' })} · ${time}`;
 }
 </script>

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

@@ -77,11 +77,9 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import {
-    isVersionEditable,
-    type PlanRow,
-    type PlanVersionRow,
-} from '@saasicat/types';
+import { isVersionEditable, type PlanRow, type PlanVersionRow } from '@saasicat/types';
+import { formatCurrency } from '../../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import PlanAuditLog from './PlanAuditLog.vue';
 import PlanDetailHeader from './PlanDetailHeader.vue';
 import PlanDetailKpis from './PlanDetailKpis.vue';
@@ -143,6 +141,9 @@ const emit = defineEmits<{
     (e: 'terminate', versionId: string, endsAt: string): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { locale, intlLocale } = useSuperAdminI18n();
+
 // ── Status / Selection ──────────────────────────────────────────────
 function statusOf(v: PlanVersionRow): PlanVersionStatus {
     if (v.publishedAt === null) return 'draft';
@@ -201,7 +202,7 @@ const timelineTicks = computed(() => {
     for (const v of chronological.value) {
         if (v.validFrom) ticks.push(v.validFrom.slice(0, 7));
     }
-    ticks.push('jetzt');
+    ticks.push(msg.value.versions.timelineNow);
     return ticks;
 });
 
@@ -209,9 +210,7 @@ const timelineTicks = computed(() => {
 function formatMoney(raw: string | number): string {
     const num = typeof raw === 'string' ? Number(raw) : raw;
     if (!Number.isFinite(num)) return String(raw);
-    if (num === 0) return '0 €';
-    if (Number.isInteger(num)) return `${num} €`;
-    return `${num.toFixed(2).replace('.', ',')} €`;
+    return formatCurrency(num, locale.value);
 }
 function quotasOf(v: PlanVersionRow): Record<string, number> {
     if (v.quotas && Object.keys(v.quotas).length > 0) return v.quotas;
@@ -290,7 +289,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'af-' + f,
             kind: 'add',
             sign: '+',
-            tag: 'neu',
+            tag: msg.value.diff.tagNew,
             label: featureLabel(f),
             key: f,
         });
@@ -299,7 +298,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'rf-' + f,
             kind: 'rm',
             sign: '−',
-            tag: 'entfernt',
+            tag: msg.value.diff.tagRemoved,
             label: featureLabel(f),
             key: f,
         });
@@ -309,7 +308,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'cq-' + q.key,
             kind: 'mod',
             sign: '~',
-            tag: 'geändert',
+            tag: msg.value.diff.tagChanged,
             label: quotaLabel(q.key),
             key: q.key,
             from: `${q.from} ${u}`.trim(),
@@ -322,7 +321,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'aq-' + q.key,
             kind: 'add',
             sign: '+',
-            tag: 'neu',
+            tag: msg.value.diff.tagNew,
             label: quotaLabel(q.key),
             key: q.key,
             from: '—',
@@ -335,7 +334,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'rq-' + q.key,
             kind: 'rm',
             sign: '−',
-            tag: 'entfernt',
+            tag: msg.value.diff.tagRemoved,
             label: quotaLabel(q.key),
             key: q.key,
             from: `${q.value} ${u}`.trim(),
@@ -347,8 +346,8 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'price',
             kind: 'mod',
             sign: '~',
-            tag: 'geändert',
-            label: 'Preis (Monat / Jahr)',
+            tag: msg.value.diff.tagChanged,
+            label: msg.value.diff.priceLabel,
             key: 'pricing',
             from: `${formatMoney(predecessor.value.monthlyNet)} / ${formatMoney(predecessor.value.yearlyNet)}`,
             to: `${formatMoney(selectedVersion.value.monthlyNet)} / ${formatMoney(selectedVersion.value.yearlyNet)}`,
@@ -375,7 +374,7 @@ function formatDate(iso: string | null | undefined): string {
     if (!iso) return '—';
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())) return iso;
-    return d.toLocaleDateString('de-DE', {
+    return d.toLocaleDateString(intlLocale.value, {
         day: '2-digit',
         month: '2-digit',
         year: 'numeric',
@@ -401,17 +400,16 @@ async function executeTerminate(): Promise<void> {
         const e = err as { status?: number; body?: { code?: string; message?: string } };
         const code = e?.body?.code;
         if (code === 'PLAN_TERMINATE_DATE_NOT_FUTURE') {
-            terminateError.value = 'Das Datum muss in der Zukunft liegen.';
+            terminateError.value = msg.value.terminateDialog.errorDateNotFuture;
         } else if (code === 'PLAN_VERSION_NOT_LIVE') {
-            terminateError.value =
-                'Diese Version ist nicht live (draft oder superseded) und kann nicht terminiert werden.';
+            terminateError.value = msg.value.terminateDialog.errorVersionNotLive;
         } else if (code === 'PLAN_TERMINATE_NOT_IMPLEMENTED') {
-            terminateError.value =
-                'Backend unterstützt Terminate noch nicht — bitte API-Server neu bauen.';
+            terminateError.value = msg.value.terminateDialog.errorNotImplemented;
         } else if (e?.body?.message) {
             terminateError.value = e.body.message;
         } else {
-            terminateError.value = err instanceof Error ? err.message : 'Terminate fehlgeschlagen.';
+            terminateError.value =
+                err instanceof Error ? err.message : msg.value.terminateDialog.errorFailed;
         }
     } finally {
         terminating.value = false;

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

@@ -13,7 +13,7 @@
                             @keydown.escape="cancelName"
                             @blur="commitName"
                         />
-                        <span class="pd-title-hint">Draft · Enter speichert · Esc bricht ab</span>
+                        <span class="pd-title-hint">{{ msg.header.nameEditHint }}</span>
                     </template>
                     <template v-else>
                         <h1 class="pd-title">{{ plan.label }}</h1>
@@ -21,8 +21,8 @@
                             v-if="draftVersion"
                             class="pd-title-edit-btn"
                             type="button"
-                            title="Plan-Name im Draft bearbeiten"
-                            aria-label="Plan-Name bearbeiten"
+                            :title="msg.header.editNameTitle"
+                            :aria-label="msg.header.editNameAria"
                             @click="startEditName"
                         >
                             <svg
@@ -40,7 +40,7 @@
                         </button>
                     </template>
                 </div>
-                <div class="pd-desc">{{ plan.description || 'Keine Beschreibung.' }}</div>
+                <div class="pd-desc">{{ plan.description || msg.header.noDescription }}</div>
             </div>
         </div>
         <div class="pd-actions">
@@ -57,13 +57,13 @@
                         <path d="M5 12h14M13 5l7 7-7 7" />
                     </svg>
                 </span>
-                <span>Zurück</span>
+                <span>{{ common.back }}</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)"
+                :title="msg.header.deletePlanTitle"
                 @click="$emit('deletePlan')"
             >
                 <svg
@@ -78,7 +78,7 @@
                         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>
+                <span>{{ msg.header.deletePlan }}</span>
             </button>
             <button class="btn" type="button" @click="$emit('clonePlan')">
                 <svg
@@ -92,7 +92,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
                 v-if="!draftVersion"
@@ -110,7 +110,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Neue Draft-Version</span>
+                <span>{{ msg.header.newDraftVersion }}</span>
             </button>
             <button
                 v-else
@@ -128,15 +128,17 @@
                 >
                     <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                 </svg>
-                <span>Draft v{{ draftVersion.version }} veröffentlichen</span>
+                <span>{{ publishDraftLabel }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 const props = defineProps<{
     plan: PlanRow;
@@ -154,6 +156,13 @@ const emit = defineEmits<{
     (e: 'updatePlan', patch: { label: string }): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const common = useSaMessages('common');
+
+const publishDraftLabel = computed(() =>
+    formatMessage(msg.value.header.publishDraft, { version: props.draftVersion?.version ?? '' }),
+);
+
 const editingName = ref(false);
 const nameDraft = ref(props.plan.label);
 const nameInput = ref<HTMLInputElement | null>(null);

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

@@ -1,7 +1,7 @@
 <template>
     <div class="pd-kpis">
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Aktive Version</div>
+            <div class="pd-kpi-label">{{ msg.kpis.activeVersion }}</div>
             <div class="pd-kpi-big">
                 <template v-if="liveVersion">
                     v{{ liveVersion.version }}
@@ -9,49 +9,62 @@
                 </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 class="pd-kpi-sub">{{ activeVersionSub }}</div>
         </div>
 
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Tenant-Impact</div>
+            <div class="pd-kpi-label">{{ msg.kpis.tenantImpact }}</div>
             <div class="pd-kpi-big">{{ tenantTotal }}</div>
-            <div class="pd-kpi-sub">Mandanten auf diesem Plan</div>
+            <div class="pd-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
         </div>
 
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Versionen</div>
+            <div class="pd-kpi-label">{{ msg.kpis.versions }}</div>
             <div class="pd-kpi-big">{{ versionCount }}</div>
-            <div class="pd-kpi-sub">
-                {{ publishedCount }} live/superseded{{ draftVersion ? ' · 1 Draft' : '' }}
-            </div>
+            <div class="pd-kpi-sub">{{ versionsSummary }}</div>
         </div>
 
         <div :class="['pd-kpi', draftVersion ? 'draft' : '']">
-            <div class="pd-kpi-label">Offener Draft</div>
+            <div class="pd-kpi-label">{{ msg.kpis.openDraft }}</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' }}
+                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.noOpenDraft }}
             </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;
     draftVersion: PlanVersionRow | null;
     tenantTotal: number;
     versionCount: number;
     publishedCount: number;
 }>();
+
+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(() =>
+    props.draftVersion
+        ? formatMessage(msg.value.kpis.versionsSummaryWithDrafts, {
+              published: props.publishedCount,
+              drafts: 1,
+          })
+        : formatMessage(msg.value.kpis.versionsSummary, { published: props.publishedCount }),
+);
 </script>

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

@@ -7,17 +7,20 @@
         <q-card style="min-width: 420px">
             <q-card-section>
                 <div class="text-h6">
-                    {{ target?.endsAt ? 'Enddatum ändern' : 'Version terminieren' }}
+                    {{
+                        target?.endsAt
+                            ? msg.terminateDialog.titleChangeEndDate
+                            : msg.terminateDialog.titleTerminate
+                    }}
                 </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.
+                    {{ msg.terminateDialog.bodyPlanPrefix }} <code>{{ plan.planKey }}</code>
+                    {{ bodyExpiry }} <b>{{ msg.terminateDialog.bodyWithout }}</b>
+                    {{ msg.terminateDialog.bodySuffix }}
                 </div>
                 <q-input
                     :model-value="dateInput"
-                    label="Enddatum (YYYY-MM-DD)"
+                    :label="msg.terminateDialog.dateLabel"
                     type="text"
                     class="q-mt-md"
                     mask="####-##-##"
@@ -43,10 +46,10 @@
                 {{ error }}
             </q-banner>
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn flat :label="common.cancel" @click="$emit('update:modelValue', false)" />
                 <q-btn
                     color="primary"
-                    label="Terminieren"
+                    :label="msg.terminateDialog.submit"
                     :loading="terminating"
                     :disable="!dateInput"
                     @click="$emit('execute')"
@@ -57,9 +60,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     plan: PlanRow;
     target: PlanVersionRow | null;
@@ -68,6 +74,13 @@ defineProps<{
     terminating: boolean;
 }>();
 
+const msg = useSaMessages('planDetail');
+const common = useSaMessages('common');
+
+const bodyExpiry = computed(() =>
+    formatMessage(msg.value.terminateDialog.bodyExpiry, { version: props.target?.version ?? '' }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'update:dateInput', value: string): void;