@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/plan-versions/PlanVersionHeader.vue

@@ -15,7 +15,7 @@
                             class="sa-pv-header__cmp-btn"
                             @click="emit('clearCompare')"
                         >
-                            <q-icon name="close" size="14px" /> Vergleich beenden
+                            <q-icon name="close" size="14px" /> {{ msg.compareEnd }}
                         </button>
                     </template>
                 </div>
@@ -28,23 +28,21 @@
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--ok"
                     >
                         <q-icon name="rocket_launch" size="14px" />
-                        Publiziert {{ formatDateDe(snapshot.publishedAt) }}
+                        {{ publishedOnLabel }}
                     </span>
                     <span
                         v-if="snapshot.kind === 'drafts'"
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--warn"
                     >
                         <q-icon name="edit_note" size="14px" />
-                        <strong>{{ snapshot.draftCount }}</strong> offene Drafts
+                        <strong>{{ snapshot.draftCount }}</strong> {{ msg.header.openDrafts }}
                     </span>
                     <span
                         v-if="snapshot.regressionCount > 0"
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--bad"
                     >
                         <q-icon name="trending_down" size="14px" />
-                        <strong>{{ snapshot.regressionCount }}</strong> Regression{{
-                            snapshot.regressionCount === 1 ? '' : 'en'
-                        }}
+                        <strong>{{ snapshot.regressionCount }}</strong> {{ regressionLabel }}
                     </span>
                 </div>
             </div>
@@ -57,7 +55,7 @@
                     @click="emit('publish')"
                 >
                     <q-icon name="rocket_launch" size="16px" />
-                    Publish-Flow starten
+                    {{ msg.header.startPublishFlow }}
                 </button>
             </div>
         </div>
@@ -68,7 +66,7 @@
                 :class="{ 'sa-pv-header__switcher--disabled': !!compareSnapshot }"
             >
                 <button
-                    v-for="m in modes"
+                    v-for="m in resolvedModes"
                     :key="m.id"
                     type="button"
                     class="sa-pv-header__mode-btn"
@@ -81,7 +79,7 @@
             </div>
             <span v-if="compareSnapshot" class="sa-pv-header__cmp-hint">
                 <q-icon name="compare_arrows" size="13px" />
-                Vergleichsmodus aktiv — andere Ansichten deaktiviert
+                {{ msg.header.compareModeHint }}
             </span>
         </div>
     </header>
@@ -90,25 +88,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatDateDe } from './format.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { formatDate } from './format.js';
 import PlanVersionStatusBadge from './PlanVersionStatusBadge.vue';
 import type { PlanVersionViewMode } from './types.js';
 
-const props = withDefaults(
-    defineProps<{
-        snapshot: CatalogSnapshot;
-        viewMode: PlanVersionViewMode;
-        compareSnapshot: CatalogSnapshot | null;
-        modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
-    }>(),
-    {
-        modes: () => [
-            { id: 'list' as const, label: 'Plan-Liste', icon: 'list' },
-            { id: 'matrix' as const, label: 'Feature-Matrix', icon: 'grid_view' },
-            { id: 'audit' as const, label: 'Aktivität', icon: 'history' },
-        ],
-    },
-);
+const props = defineProps<{
+    snapshot: CatalogSnapshot;
+    viewMode: PlanVersionViewMode;
+    compareSnapshot: CatalogSnapshot | null;
+    /** Overrides the localized default view switcher. */
+    modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
+}>();
 
 const emit = defineEmits<{
     (e: 'viewChange', mode: PlanVersionViewMode): void;
@@ -116,9 +108,33 @@ const emit = defineEmits<{
     (e: 'clearCompare'): void;
 }>();
 
+const msg = useSaMessages('planVersions');
+const { locale } = useSuperAdminI18n();
+
 const canPublish = computed(
     () => props.snapshot.kind === 'drafts' && props.snapshot.draftCount > 0,
 );
+
+const publishedOnLabel = computed(() =>
+    formatMessage(msg.value.header.publishedOn, {
+        date: formatDate(props.snapshot.publishedAt ?? undefined, locale.value),
+    }),
+);
+
+const regressionLabel = computed(() =>
+    props.snapshot.regressionCount === 1
+        ? msg.value.header.regressionOne
+        : msg.value.header.regressionMany,
+);
+
+const resolvedModes = computed(
+    () =>
+        props.modes ?? [
+            { id: 'list' as const, label: msg.value.header.modeList, icon: 'list' },
+            { id: 'matrix' as const, label: msg.value.header.modeMatrix, icon: 'grid_view' },
+            { id: 'audit' as const, label: msg.value.header.modeAudit, icon: 'history' },
+        ],
+);
 </script>
 
 <style scoped>

package/src/pages-standard/plan-versions/PlanVersionsAudit.vue

@@ -3,18 +3,18 @@
         <div class="sa-pv-audit__card">
             <header class="sa-pv-audit__head">
                 <q-icon name="history" size="18px" class="sa-pv-audit__head-icon" />
-                <h3>Aktivität</h3>
-                <span class="sa-pv-audit__count">{{ events.length }} Events</span>
+                <h3>{{ msg.audit.title }}</h3>
+                <span class="sa-pv-audit__count">{{ eventCountLabel }}</span>
                 <q-space />
                 <button v-if="!loading" type="button" class="sa-pv-audit__refresh" @click="reload">
-                    <q-icon name="refresh" size="14px" /> Neu laden
+                    <q-icon name="refresh" size="14px" /> {{ common.reload }}
                 </button>
             </header>
             <div v-if="loading" class="sa-pv-audit__loading">
-                <q-spinner size="20px" /> Audit-Trail wird geladen…
+                <q-spinner size="20px" /> {{ msg.audit.loading }}
             </div>
             <div v-else-if="events.length === 0" class="sa-pv-audit__empty">
-                Keine Plan-/Add-on-Events im Audit-Log gefunden.
+                {{ msg.audit.empty }}
             </div>
             <div v-else class="sa-pv-audit__list">
                 <div
@@ -42,7 +42,7 @@
                         <div class="sa-pv-audit__meta">
                             <span
                                 ><q-icon name="schedule" size="12px" />
-                                {{ formatTsDe(e.createdAt) }}</span
+                                {{ formatTimestamp(e.createdAt, locale) }}</span
                             >
                             <span v-if="actorEmail(e)">
                                 <q-icon name="person" size="12px" /> {{ actorEmail(e) }}
@@ -56,9 +56,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatTsDe } from './format.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { formatTimestamp } from './format.js';
 
 // PlanVersionsAudit — data-agnostic. Consumers pass in a `loadAudit` loader
 // that supplies events; the component filters them to match the current
@@ -100,34 +102,49 @@ const props = withDefaults(
 const loading = ref(false);
 const events = ref<AuditRow[]>([]);
 
-const DEFAULT_ACTION_META: Record<string, ActionMeta> = {
+const msg = useSaMessages('planVersions');
+const common = useSaMessages('common');
+const { locale } = useSuperAdminI18n();
+
+const eventCountLabel = computed(() =>
+    formatMessage(msg.value.audit.eventCount, { count: events.value.length }),
+);
+
+const ACTION_ICONS: Record<string, { icon: string; color: string }> = {
+    PLAN_VERSION_PUBLISH: { icon: 'rocket_launch', color: '#047857' },
+    PLAN_VERSION_DRAFT_CREATE: { icon: 'edit_note', color: '#b45309' },
+    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff' },
+    PLAN_VERSION_DRAFT_DELETE: { icon: 'delete', color: '#dc2626' },
+    PLAN_CATALOG_UPDATE: { icon: 'rocket_launch', color: '#047857' },
+};
+
+const defaultActionMeta = computed<Record<string, ActionMeta>>(() => ({
     PLAN_VERSION_PUBLISH: {
-        icon: 'rocket_launch',
-        color: '#047857',
-        label: 'Plan publiziert',
+        ...ACTION_ICONS.PLAN_VERSION_PUBLISH,
+        label: msg.value.audit.actionPlanPublished,
     },
     PLAN_VERSION_DRAFT_CREATE: {
-        icon: 'edit_note',
-        color: '#b45309',
-        label: 'Plan-Draft angelegt',
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_CREATE,
+        label: msg.value.audit.actionPlanDraftCreated,
+    },
+    PLAN_VERSION_DRAFT_UPDATE: {
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_UPDATE,
+        label: msg.value.audit.actionPlanDraftUpdated,
     },
-    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff', label: 'Plan-Draft geändert' },
     PLAN_VERSION_DRAFT_DELETE: {
-        icon: 'delete',
-        color: '#dc2626',
-        label: 'Plan-Draft gelöscht',
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_DELETE,
+        label: msg.value.audit.actionPlanDraftDeleted,
     },
     PLAN_CATALOG_UPDATE: {
-        icon: 'rocket_launch',
-        color: '#047857',
-        label: 'Catalog publiziert',
+        ...ACTION_ICONS.PLAN_CATALOG_UPDATE,
+        label: msg.value.audit.actionCatalogPublished,
     },
-};
+}));
 
 function meta(action: string): ActionMeta {
     return (
         props.actionMeta[action] ??
-        DEFAULT_ACTION_META[action] ?? {
+        defaultActionMeta.value[action] ?? {
             icon: 'circle',
             color: '#64748b',
             label: action,
@@ -156,8 +173,10 @@ function detail(e: AuditRow): string {
         changes?: unknown;
     };
     if (c.changeNote) return c.changeNote;
-    if (c.nonRegressive === false) return 'Mit mindestens einer Verschlechterung publiziert.';
-    if (Array.isArray(c.changes)) return `${c.changes.length} Felder geändert.`;
+    if (c.nonRegressive === false) return msg.value.audit.detailRegression;
+    if (Array.isArray(c.changes)) {
+        return formatMessage(msg.value.audit.detailFieldsChanged, { count: c.changes.length });
+    }
     return e.action;
 }
 

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -5,7 +5,7 @@
                 <q-icon name="compare_arrows" size="22px" color="white" />
             </div>
             <div>
-                <div class="sa-pv-diff__legend">Vergleich</div>
+                <div class="sa-pv-diff__legend">{{ msg.diff.legend }}</div>
                 <div class="sa-pv-diff__title">
                     {{ from.label }} <span class="sa-pv-diff__sep">→</span> {{ to.label }}
                 </div>
@@ -13,13 +13,13 @@
             <div class="sa-pv-diff__spacer" />
             <div class="sa-pv-diff__stats">
                 <div class="sa-pv-diff__stat">
-                    <div class="sa-pv-diff__stat-label">Pakete geändert</div>
+                    <div class="sa-pv-diff__stat-label">{{ msg.diff.plansChanged }}</div>
                     <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--warn">
                         {{ planChangedCount }}
                     </div>
                 </div>
                 <div v-if="regressionCount > 0" class="sa-pv-diff__stat">
-                    <div class="sa-pv-diff__stat-label">Regressionen</div>
+                    <div class="sa-pv-diff__stat-label">{{ msg.diff.regressions }}</div>
                     <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--bad">
                         {{ regressionCount }}
                     </div>
@@ -27,7 +27,7 @@
             </div>
         </div>
 
-        <h2 class="sa-pv-diff__section">Pakete</h2>
+        <h2 class="sa-pv-diff__section">{{ msg.diff.sectionPlans }}</h2>
         <PlanDiffCard
             v-for="d in planDiffs"
             :key="d.id"
@@ -38,7 +38,6 @@
             :changes="d.changes"
             :field-labels="fieldLabels"
         />
-
     </div>
 </template>
 
@@ -46,6 +45,7 @@
 import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
 import type { CatalogSnapshot, ResolvedPlan } from '../../client/plan-versions-catalog.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import PlanDiffCard from './PlanDiffCard.vue';
 
 interface SnapshotEntityDiff {
@@ -64,6 +64,8 @@ const props = defineProps<{
     fieldLabels?: Record<string, string>;
 }>();
 
+const msg = useSaMessages('planVersions');
+
 function planAccent(planId: string): string {
     return props.planAccents?.[planId] ?? '#3f6bff';
 }

package/src/pages-standard/plan-versions/PlanVersionsList.vue

@@ -1,21 +1,29 @@
 <template>
     <div class="sa-pv-list">
         <div class="sa-pv-list__kpis">
-            <PlanVersionsKpi label="Pakete" :value="snapshot.plans.length" icon="inventory_2" />
             <PlanVersionsKpi
-                label="Self-Service"
+                :label="msg.list.kpiPlans"
+                :value="snapshot.plans.length"
+                icon="inventory_2"
+            />
+            <PlanVersionsKpi
+                :label="msg.list.kpiSelfService"
                 :value="marketedCount"
                 icon="storefront"
-                :sub="`von ${snapshot.plans.length}`"
+                :sub="totalPlansLabel"
+            />
+            <PlanVersionsKpi
+                :label="msg.list.kpiFeaturesTotal"
+                :value="totalFeatures"
+                icon="extension"
             />
-            <PlanVersionsKpi label="Features gesamt" :value="totalFeatures" icon="extension" />
         </div>
 
         <div v-if="missingPlans.length > 0" class="sa-pv-list__missing">
             <q-icon name="info" size="16px" />
             <div>
-                <strong>Fehlende Pakete:</strong> {{ missingPlans.join(', ') }} — keine Live-Version
-                in diesem Snapshot.
+                <strong>{{ msg.list.missingPlansLabel }}</strong> {{ missingPlans.join(', ') }}
+                {{ msg.list.missingPlansHint }}
                 <template v-if="canEdit">
                     <button
                         v-for="planId in missingPlans"
@@ -24,7 +32,7 @@
                         class="sa-pv-list__missing-btn"
                         @click="emit('createPlanDraft', planId)"
                     >
-                        Draft für {{ planId }}
+                        {{ createDraftLabel(planId) }}
                     </button>
                 </template>
             </div>
@@ -36,8 +44,8 @@
                     class="sa-pv-list__head sa-pv-list__row sa-pv-list__row--default"
                     :style="rowGridStyle"
                 >
-                    <div>Paket</div>
-                    <div class="sa-pv-list__th--num">Preis (netto)</div>
+                    <div>{{ msg.list.colPlan }}</div>
+                    <div class="sa-pv-list__th--num">{{ msg.list.colPriceNet }}</div>
                     <div
                         v-for="col in quotaColumns"
                         :key="`hd-${col.key}`"
@@ -45,7 +53,7 @@
                     >
                         {{ col.label }}
                     </div>
-                    <div class="sa-pv-list__th--num">Features</div>
+                    <div class="sa-pv-list__th--num">{{ msg.list.colFeatures }}</div>
                 </div>
             </slot>
 
@@ -65,7 +73,9 @@
                         <div class="sa-pv-list__default-name">
                             <strong>{{ plan.planId }}</strong>
                             <span class="sa-pv-list__default-version">v{{ plan.version }}</span>
-                            <span v-if="plan.isDraft" class="sa-pv-list__default-chip">DRAFT</span>
+                            <span v-if="plan.isDraft" class="sa-pv-list__default-chip">{{
+                                msg.status.draft
+                            }}</span>
                         </div>
                         <div class="sa-pv-list__th--num">
                             {{ formatEuro(plan.monthlyNet) }}
@@ -86,10 +96,10 @@
         <div v-if="snapshot.kind === 'drafts'" class="sa-pv-list__draft-hint">
             <q-icon name="info" size="18px" />
             <div>
-                <strong>Arbeitsstand:</strong> Drafts oben in der Liste. Limits, Preise und Features
-                per Klick auf <em>„Bearbeiten"</em> ändern (ohne MFA). Erst
-                <strong>Publish-Flow</strong> (Validate → Diff-Review → MFA → Apply) macht sie für
-                künftige Renewals wirksam.
+                <strong>{{ msg.list.draftHintLabel }}</strong> {{ msg.list.draftHintBefore }}
+                <em>{{ msg.list.draftHintEditButton }}</em> {{ msg.list.draftHintMiddle }}
+                <strong>{{ msg.list.draftHintPublishFlow }}</strong>
+                {{ msg.list.draftHintAfter }}
             </div>
         </div>
     </div>
@@ -98,6 +108,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import PlanVersionsKpi from './PlanVersionsKpi.vue';
 import { fmtEuro } from './format.js';
 
@@ -136,9 +148,16 @@ const emit = defineEmits<{
     (e: 'createPlanDraft', planId: string): void;
 }>();
 
+const msg = useSaMessages('planVersions');
+const { locale } = useSuperAdminI18n();
+
 const openId = ref<string | null>(null);
 const canEdit = computed(() => props.snapshot.kind === 'drafts');
 
+const totalPlansLabel = computed(() =>
+    formatMessage(msg.value.list.kpiOfTotal, { count: props.snapshot.plans.length }),
+);
+
 const marketedCount = computed(() => props.snapshot.plans.filter((p) => p.marketed).length);
 const totalFeatures = computed(() => new Set(props.snapshot.plans.flatMap((p) => p.features)).size);
 
@@ -163,8 +182,12 @@ function onToggle(id: string): void {
     openId.value = openId.value === id ? null : id;
 }
 
+function createDraftLabel(planId: string): string {
+    return formatMessage(msg.value.list.createDraftFor, { planId });
+}
+
 function formatEuro(n: number): string {
-    return fmtEuro(n);
+    return fmtEuro(n, locale.value);
 }
 
 function formatQuotaValue(value: number | undefined, col: QuotaColumnConfig): string {

package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue

@@ -2,9 +2,9 @@
     <aside class="sa-pv-timeline">
         <div class="sa-pv-timeline__head">
             <div class="sa-pv-timeline__row">
-                <div class="sa-pv-timeline__title">{{ title ?? 'Plan-Catalog' }}</div>
+                <div class="sa-pv-timeline__title">{{ title ?? msg.timeline.title }}</div>
             </div>
-            <div class="sa-pv-timeline__count">{{ snapshots.length }} Snapshots</div>
+            <div class="sa-pv-timeline__count">{{ snapshotCountLabel }}</div>
         </div>
 
         <div class="sa-pv-timeline__list">
@@ -56,7 +56,7 @@
         <div class="sa-pv-timeline__foot">
             <div class="sa-pv-timeline__hint">
                 <q-icon name="info" size="13px" />
-                <span>Rechtsklick auf Snapshot → vergleichen</span>
+                <span>{{ msg.timeline.compareHint }}</span>
             </div>
             <button
                 v-if="compareId"
@@ -64,17 +64,20 @@
                 class="sa-pv-timeline__clear-btn"
                 @click="emit('clearCompare')"
             >
-                Vergleich beenden
+                {{ msg.compareEnd }}
             </button>
         </div>
     </aside>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatRelativeDe } from './format.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { formatRelative } from './format.js';
 
-defineProps<{
+const props = defineProps<{
     snapshots: CatalogSnapshot[];
     selectedId: string;
     compareId: string | null;
@@ -87,18 +90,27 @@ const emit = defineEmits<{
     (e: 'clearCompare'): void;
 }>();
 
+const msg = useSaMessages('planVersions');
+const { locale } = useSuperAdminI18n();
+
+const snapshotCountLabel = computed(() =>
+    formatMessage(msg.value.timeline.snapshotCount, { count: props.snapshots.length }),
+);
+
 function statusLabel(status: CatalogSnapshot['status']): string {
-    if (status === 'DRAFT') return 'DRAFT';
-    if (status === 'ACTIVE') return 'AKTIV';
-    return 'ARCHIV';
+    if (status === 'DRAFT') return msg.value.status.draft;
+    if (status === 'ACTIVE') return msg.value.status.active;
+    return msg.value.status.archived;
 }
 
 function metaText(s: CatalogSnapshot): string {
     if (s.kind === 'drafts') {
-        return s.draftCount === 0 ? 'keine offenen Drafts' : `${s.draftCount} offen`;
+        return s.draftCount === 0
+            ? msg.value.timeline.noOpenDrafts
+            : formatMessage(msg.value.timeline.openCount, { count: s.draftCount });
     }
-    if (s.publishedAt) return formatRelativeDe(s.publishedAt);
-    return 'unbekannt';
+    if (s.publishedAt) return formatRelative(s.publishedAt, locale.value);
+    return msg.value.timeline.unknown;
 }
 </script>
 

package/src/pages-standard/plan-versions/format.ts

@@ -1,13 +1,24 @@
 // Formatting helpers for the plan-versions views.
 //
 // Phase 2c: Ported from a consumer admin.
-// The time reference point for `formatRelativeDe` is the moment of the call,
+// The time reference point for `formatRelative` is the moment of the call,
 // not a hard-coded demo date (the ported template had `2026-05-04` —
 // the platform must work in production).
 
-export function fmtEuro(n: number): string {
-    if (n === 0) return 'individuell';
-    return n.toFixed(2).replace('.', ',') + ' €';
+import { formatCurrency } from '../../client/i18n/currency.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { DEFAULT_SA_LOCALE, SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
+import { planVersionsMessages } from '../../client/i18n/messages/plan-versions.js';
+
+const EMPTY_VALUE = '—';
+
+function texts(locale: SaLocale) {
+    return planVersionsMessages[locale].format;
+}
+
+export function fmtEuro(n: number, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    if (n === 0) return texts(locale).priceIndividual;
+    return formatCurrency(n, locale);
 }
 
 export function fmtStorage(gb: number): string {
@@ -16,34 +27,39 @@ export function fmtStorage(gb: number): string {
     return `${gb} GB`;
 }
 
-export function formatRelativeDe(iso: string | undefined, now: Date = new Date()): string {
-    if (!iso) return '—';
+export function formatRelative(
+    iso: string | undefined,
+    locale: SaLocale = DEFAULT_SA_LOCALE,
+    now: Date = new Date(),
+): string {
+    if (!iso) return EMPTY_VALUE;
+    const msg = texts(locale);
     const d = new Date(iso);
     const diffMs = now.getTime() - d.getTime();
     const days = Math.floor(diffMs / 86_400_000);
-    if (days === 0) return 'heute';
-    if (days === 1) return 'gestern';
-    if (days < 7) return `vor ${days} Tagen`;
+    if (days === 0) return msg.today;
+    if (days === 1) return msg.yesterday;
+    if (days < 7) return formatMessage(msg.daysAgo, { count: days });
     if (days < 30) {
         const w = Math.floor(days / 7);
-        return `vor ${w} Woche${w > 1 ? 'n' : ''}`;
+        return formatMessage(w > 1 ? msg.weeksAgoMany : msg.weeksAgoOne, { count: w });
     }
-    if (days < 365) return `vor ${Math.floor(days / 30)} Monaten`;
+    if (days < 365) return formatMessage(msg.monthsAgo, { count: Math.floor(days / 30) });
     const y = Math.floor(days / 365);
-    return `vor ${y} Jahr${y > 1 ? 'en' : ''}`;
+    return formatMessage(y > 1 ? msg.yearsAgoMany : msg.yearsAgoOne, { count: y });
 }
 
-export function formatDateDe(iso: string | undefined): string {
-    if (!iso) return '—';
-    return new Date(iso).toLocaleDateString('de-DE', {
+export function formatDate(iso: string | undefined, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    if (!iso) return EMPTY_VALUE;
+    return new Date(iso).toLocaleDateString(SA_INTL_LOCALES[locale], {
         day: '2-digit',
         month: 'short',
         year: 'numeric',
     });
 }
 
-export function formatTsDe(iso: string): string {
-    return new Date(iso).toLocaleString('de-DE', {
+export function formatTimestamp(iso: string, locale: SaLocale = DEFAULT_SA_LOCALE): string {
+    return new Date(iso).toLocaleString(SA_INTL_LOCALES[locale], {
         day: '2-digit',
         month: 'short',
         year: 'numeric',

package/src/pages-standard/plans-page/PlanArchiveDialog.vue

@@ -6,25 +6,25 @@
     >
         <q-card style="min-width: 440px">
             <q-card-section>
-                <div class="text-h6">Plan komplett löschen?</div>
+                <div class="text-h6">{{ msg.archiveDialog.title }}</div>
                 <div class="text-body2 q-mt-sm">
-                    Plan <code>{{ target?.plan.planKey }}</code> wird
-                    <b>unwiderruflich aus der DB entfernt</b>. Da der Plan keine published Version
-                    hat, sind keine Subscriptions betroffen.
+                    {{ msg.archiveDialog.bodyLead }} <code>{{ target?.plan.planKey }}</code>
+                    {{ msg.archiveDialog.bodyVerb }}
+                    <b>{{ msg.archiveDialog.bodyEmphasis }}</b
+                    >{{ msg.archiveDialog.bodyTail }}
                 </div>
                 <div class="text-caption text-grey-7 q-mt-sm">
-                    Vertragsschutz P1: Pläne mit jemals veröffentlichten Versionen können nicht
-                    gelöscht werden — das Backend würde 422 antworten.
+                    {{ msg.archiveDialog.contractProtectionNote }}
                 </div>
             </q-card-section>
             <q-banner v-if="error" class="bg-warning q-mx-md q-mb-md" rounded>
                 {{ error }}
             </q-banner>
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn flat :label="common.cancel" @click="$emit('update:modelValue', false)" />
                 <q-btn
                     color="negative"
-                    label="Löschen"
+                    :label="common.delete"
                     :loading="archiving"
                     @click="$emit('execute')"
                 />
@@ -34,8 +34,12 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PlanArchiveTarget } from './types.js';
 
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
 defineProps<{
     modelValue: boolean;
     target: PlanArchiveTarget | null;