@saasicat/ui-vue 0.4.0 → 0.6.0

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>
@@ -97,7 +107,9 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
+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/PlanVersionsMatrix.vue

@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
+import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
 import { fmtEuro } from './format.js';
 
 // Generic feature matrix. Apps pass `featureRegistry` for label/icon/

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 type { CatalogSnapshot } from '../../plan-versions-catalog.js';
-import { formatRelativeDe } from './format.js';
+import { computed } 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 { 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;

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

@@ -1,23 +1,29 @@
 <template>
     <section class="sa-bundles">
         <div class="sa-bundles__head">
-            <h2 class="sa-bundles__title">Bundles</h2>
+            <h2 class="sa-bundles__title">{{ msg.bundleOverview.title }}</h2>
             <span class="sa-bundles__count">{{ bundles.length }}</span>
         </div>
 
         <div v-if="bundles.length === 0" class="sa-bundles__empty">
-            Keine Bundles vorhanden.
+            {{ msg.bundleOverview.empty }}
         </div>
 
         <div v-else class="sa-bundles__grid">
-            <q-card v-for="bundle in bundles" :key="bundle.bundleKey" flat bordered class="sa-bundle">
+            <q-card
+                v-for="bundle in bundles"
+                :key="bundle.bundleKey"
+                flat
+                bordered
+                class="sa-bundle"
+            >
                 <q-card-section class="sa-bundle__header">
                     <div class="sa-bundle__label">{{ bundle.label ?? bundle.bundleKey }}</div>
                     <div class="sa-bundle__key">{{ bundle.bundleKey }}</div>
                 </q-card-section>
                 <q-separator />
                 <q-card-section>
-                    <div class="sa-bundle__caption">Enthält</div>
+                    <div class="sa-bundle__caption">{{ msg.bundleOverview.contains }}</div>
                     <div class="sa-bundle__chips">
                         <q-chip
                             v-for="feature in bundle.features"
@@ -33,7 +39,7 @@
                     </div>
                 </q-card-section>
                 <q-card-section class="sa-bundle__compat">
-                    <div class="sa-bundle__caption">Kompatibel mit</div>
+                    <div class="sa-bundle__caption">{{ msg.bundleOverview.compatibleWith }}</div>
                     <div class="sa-bundle__plans">{{ compatLabel(bundle) }}</div>
                 </q-card-section>
             </q-card>
@@ -43,6 +49,7 @@
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 interface BundleEntry {
     bundleKey: string;
@@ -57,6 +64,8 @@ const props = defineProps<{
     featureRegistry: Record<string, { label?: string; group?: string }>;
 }>();
 
+const msg = useSaMessages('plans');
+
 function featureLabel(featureKey: string): string {
     return props.featureRegistry[featureKey]?.label ?? featureKey;
 }
@@ -68,7 +77,7 @@ function planLabel(planKey: string): string {
 // Empty compatibility list = bundle applies to all plans (cf. PlanMatrix.hasBundle).
 function compatLabel(bundle: BundleEntry): string {
     const keys = bundle.compatiblePlanKeys ?? [];
-    if (keys.length === 0) return 'Alle Pläne';
+    if (keys.length === 0) return msg.value.bundleOverview.allPlans;
     return keys.map(planLabel).join(', ');
 }
 </script>

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

@@ -6,21 +6,20 @@
     >
         <q-card style="min-width: 400px">
             <q-card-section>
-                <div class="text-h6">Draft verwerfen?</div>
+                <div class="text-h6">{{ msg.discardDialog.title }}</div>
                 <div class="text-body2 q-mt-sm">
-                    Draft v{{ target?.draft.version }} von
-                    <code>{{ target?.plan.planKey }}</code> wird unwiderruflich gelöscht. Published
-                    Versions bleiben unverändert.
+                    {{ bodyLead }}
+                    <code>{{ target?.plan.planKey }}</code> {{ msg.discardDialog.bodyTail }}
                 </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="Verwerfen"
+                    :label="common.discard"
                     :loading="discarding"
                     @click="$emit('execute')"
                 />
@@ -30,15 +29,27 @@
 </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 { PlanDiscardTarget } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     target: PlanDiscardTarget | null;
     error: string | null;
     discarding: boolean;
 }>();
 
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
+const bodyLead = computed(() =>
+    formatMessage(msg.value.discardDialog.bodyLead, {
+        version: props.target?.draft.version ?? '',
+    }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'execute'): void;

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

@@ -6,25 +6,24 @@
     >
         <q-card style="min-width: 420px">
             <q-card-section>
-                <div class="text-h6">Version publishen?</div>
+                <div class="text-h6">{{ msg.publishDialog.title }}</div>
                 <div class="text-body2 q-mt-sm">
-                    Plan <code>{{ selectedPlan?.planKey }}</code
-                    >, Draft v{{ publishTarget?.version }}.
+                    {{ msg.publishDialog.bodyLead }} <code>{{ selectedPlan?.planKey }}</code
+                    >{{ bodyTail }}
                 </div>
                 <div class="text-caption text-grey-7 q-mt-sm">
-                    Eine ggf. zuvor live Version wird auf <code>supersededAt</code> gesetzt
-                    (Vertragsschutz P1: Bestand-Subscriptions bleiben auf der alten Version bis zum
-                    nächsten Renewal).
+                    {{ msg.publishDialog.supersededNoteLead }} <code>supersededAt</code>
+                    {{ msg.publishDialog.supersededNoteTail }}
                 </div>
                 <q-checkbox
                     :model-value="forceRegressive"
-                    label="Force-Publish auch bei Regression (Feature entfernt / Quota gesenkt / Preis erhöht)"
+                    :label="msg.publishDialog.forceRegressive"
                     class="q-mt-md"
                     @update:model-value="$emit('update:forceRegressive', Boolean($event))"
                 />
                 <q-checkbox
                     :model-value="allowZeroPrice"
-                    label="Preis 0,00 bewusst zulassen (kostenloser Sondervertrag)"
+                    :label="msg.publishDialog.allowZeroPrice"
                     class="q-mt-sm"
                     @update:model-value="$emit('update:allowZeroPrice', Boolean($event))"
                 />
@@ -33,7 +32,7 @@
                 {{ publishError }}
             </q-banner>
             <q-card-section v-if="regressionChanges.length > 0" class="q-pt-none">
-                <div class="text-subtitle2 q-mb-xs">Regressive Änderungen:</div>
+                <div class="text-subtitle2 q-mb-xs">{{ msg.publishDialog.regressiveChanges }}</div>
                 <ul class="sa-publish-regression">
                     <li v-for="c in regressionChanges" :key="c.field">
                         <strong>{{ fieldLabel(c.field) }}:</strong>
@@ -48,10 +47,10 @@
                 </ul>
             </q-card-section>
             <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="Publish"
+                    :label="msg.publishDialog.confirm"
                     :loading="publishing"
                     @click="$emit('execute')"
                 />
@@ -61,10 +60,13 @@
 </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';
 import type { RegressionChange } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     selectedPlan: PlanRow | null;
     publishTarget: PlanVersionRow | null;
@@ -77,6 +79,15 @@ defineProps<{
     formatChangeValue: (value: unknown) => string;
 }>();
 
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
+const bodyTail = computed(() =>
+    formatMessage(msg.value.publishDialog.bodyTail, {
+        version: props.publishTarget?.version ?? '',
+    }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'update:forceRegressive', value: boolean): void;

package/src/pages-standard/tenants/format.ts

@@ -28,9 +28,10 @@ export function planAccent(
     return accents[planId] ?? '#3f6bff';
 }
 
-export function formatDateDe(iso: string | null | undefined): string {
+/** `locale` is a BCP-47 tag — pages pass `intlLocale.value` of the active UI locale. */
+export function formatDate(iso: string | null | undefined, locale: string): string {
     if (!iso) return '—';
-    return new Date(iso).toLocaleDateString('de-DE', {
+    return new Date(iso).toLocaleDateString(locale, {
         day: '2-digit',
         month: 'short',
         year: 'numeric',