@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/UsersPage.vue

@@ -2,11 +2,17 @@
     <div class="sa-users">
         <header class="sa-page-head">
             <div>
-                <h1 class="sa-page-head__title">{{ title }}</h1>
+                <h1 class="sa-page-head__title">{{ resolvedTitle }}</h1>
                 <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
             </div>
             <div class="sa-page-head__actions">
-                <q-btn unelevated color="primary" icon="search" label="Suchen" @click="reload" />
+                <q-btn
+                    unelevated
+                    color="primary"
+                    icon="search"
+                    :label="common.search"
+                    @click="reload"
+                />
             </div>
         </header>
 
@@ -31,7 +37,7 @@
                 v-model="filter.q"
                 outlined
                 dense
-                label="E-Mail oder Name"
+                :label="msg.filterQuery"
                 clearable
                 @keyup.enter="reload"
                 @clear="reload"
@@ -40,7 +46,7 @@
                 v-model="filter.tenant"
                 outlined
                 dense
-                label="Tenant-Slug"
+                :label="msg.filterTenant"
                 clearable
                 @keyup.enter="reload"
                 @clear="reload"
@@ -62,12 +68,12 @@
                     <q-td>
                         <q-badge
                             :color="row.isActive ? 'positive' : 'grey'"
-                            :label="row.isActive ? 'aktiv' : 'deaktiviert'"
+                            :label="row.isActive ? msg.statusActive : msg.statusDeactivated"
                         />
                         <q-badge
                             v-if="row.invitationStatus === 'PENDING'"
                             color="amber-7"
-                            label="Pending"
+                            :label="msg.badgePending"
                             class="q-ml-xs"
                         />
                     </q-td>
@@ -108,6 +114,8 @@ import { computed, onMounted, reactive, ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: user search. Data-agnostic.
 //
@@ -166,7 +174,6 @@ const props = withDefaults(
         submitDeactivate?: (id: string, reason: string, mfaCode?: string) => Promise<void>;
     }>(),
     {
-        title: 'Benutzer',
         requireMfaForResetPassword: false,
         requireMfaForDeactivate: false,
     },
@@ -174,6 +181,12 @@ const props = withDefaults(
 
 const q = useQuasar();
 const notify = useSuperAdminNotify();
+const msg = useSaMessages('users');
+const common = useSaMessages('common');
+const shell = useSaMessages('shell');
+const { intlLocale } = useSuperAdminI18n();
+
+const resolvedTitle = computed(() => props.title ?? msg.value.title);
 const rows = ref<UserRow[]>([]);
 const loading = ref(false);
 const filter = reactive({ q: '', tenant: '' });
@@ -256,42 +269,42 @@ const statTiles = computed<
         if (isSuperAdmin(r)) supr++;
     }
     return [
-        { id: 'all', label: 'Alle', count: rows.value.length },
-        { id: 'active', label: 'Aktiv', count: active, tone: 'positive' },
-        { id: 'blocked', label: 'Gesperrt', count: blocked, tone: 'muted' },
-        { id: 'never', label: 'Nie eingeloggt', count: never, tone: 'warn' },
-        { id: 'super', label: 'Super-Admins', count: supr, tone: 'purple' },
+        { id: 'all', label: common.value.all, count: rows.value.length },
+        { id: 'active', label: common.value.active, count: active, tone: 'positive' },
+        { id: 'blocked', label: msg.value.tiles.blocked, count: blocked, tone: 'muted' },
+        { id: 'never', label: msg.value.tiles.neverLoggedIn, count: never, tone: 'warn' },
+        { id: 'super', label: msg.value.tiles.superAdmins, count: supr, tone: 'purple' },
     ];
 });
 
-const baseColumns = [
+const baseColumns = computed(() => [
     {
         name: 'email',
-        label: 'E-Mail',
+        label: msg.value.columns.email,
         field: 'email',
         align: 'left' as const,
         sortable: true,
     },
     {
         name: 'name',
-        label: 'Name',
+        label: common.value.name,
         field: (r: UserRow) => `${r.firstName} ${r.lastName}`,
         align: 'left' as const,
     },
     {
         name: 'tenant',
-        label: 'Tenant',
-        field: (r: UserRow) => r.tenantSlug ?? '— (SuperAdmin)',
+        label: msg.value.columns.tenant,
+        field: (r: UserRow) => r.tenantSlug ?? msg.value.tenantFallback,
         align: 'left' as const,
     },
-    { name: 'role', label: 'Rolle', field: 'role', align: 'left' as const },
-    { name: 'status', label: 'Status', field: 'isActive', align: 'left' as const },
+    { name: 'role', label: msg.value.columns.role, field: 'role', align: 'left' as const },
+    { name: 'status', label: common.value.status, field: 'isActive', align: 'left' as const },
     {
         name: 'lastLogin',
-        label: 'Letzter Login',
+        label: msg.value.columns.lastLogin,
         field: (r: UserRow) =>
             r.lastLoginAt
-                ? new Date(r.lastLoginAt).toLocaleDateString('de-DE', {
+                ? new Date(r.lastLoginAt).toLocaleDateString(intlLocale.value, {
                       day: '2-digit',
                       month: 'short',
                       year: 'numeric',
@@ -299,7 +312,7 @@ const baseColumns = [
                 : '—',
         align: 'left' as const,
     },
-];
+]);
 
 // Built-in default actions — APPENDED to consumer actions, not replaced.
 const bakedActions = computed<UserRowAction[]>(() => {
@@ -307,7 +320,7 @@ const bakedActions = computed<UserRowAction[]>(() => {
     if (props.enableResetPassword && props.submitResetPassword) {
         out.push({
             id: 'reset-password',
-            label: 'Passwort zurücksetzen',
+            label: msg.value.resetPassword.action,
             icon: 'lock_reset',
             color: 'primary',
             handler: (row) => onResetPasswordClick(row),
@@ -316,7 +329,7 @@ const bakedActions = computed<UserRowAction[]>(() => {
     if (props.enableDeactivate && props.submitDeactivate) {
         out.push({
             id: 'deactivate',
-            label: 'Deaktivieren',
+            label: msg.value.deactivate.action,
             icon: 'block',
             color: 'negative',
             condition: (row) => (row as UserRow & { status?: string }).status !== 'suspended',
@@ -332,7 +345,7 @@ const mergedActions = computed<readonly UserRowAction[]>(() => [
 ]);
 
 const effectiveColumns = computed(() => {
-    const cols = [...baseColumns];
+    const cols = [...baseColumns.value];
     if (mergedActions.value.length > 0) {
         cols.push({
             name: 'actions',
@@ -371,7 +384,7 @@ function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
         (err as Error)?.message ??
-        'Aktion fehlgeschlagen'
+        msg.value.errorAction
     );
 }
 
@@ -404,7 +417,7 @@ async function runAction<R>(
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = 'TOTP-Code ungültig oder MFA nicht eingerichtet.';
+                mfaError.value = shell.value.mfa.invalidCode;
                 continue;
             }
             showMfa.value = false;
@@ -418,15 +431,18 @@ function onResetPasswordClick(row: UserRow): void {
     if (!props.submitResetPassword) return;
     const submit = props.submitResetPassword;
     q.dialog({
-        title: `Passwort für "${row.email}" zurücksetzen`,
-        message: 'Grund für Audit (Pflichtfeld):',
+        title: formatMessage(msg.value.resetPassword.dialogTitle, { email: row.email }),
+        message: msg.value.reasonPrompt,
         prompt: { model: '', type: 'text' },
-        cancel: 'Abbrechen',
-        ok: { label: 'Zurücksetzen', color: 'primary' },
+        cancel: common.value.cancel,
+        ok: { label: common.value.reset, color: 'primary' },
     }).onOk(async (reason: string) => {
         if (!reason || reason.trim().length === 0) return;
         await runAction(
-            `Passwort für "${row.email}" zurücksetzen — ${reason.trim()}.`,
+            formatMessage(msg.value.resetPassword.mfaDescription, {
+                email: row.email,
+                reason: reason.trim(),
+            }),
             !!props.requireMfaForResetPassword,
             (code) => submit(row.id, reason, code),
             (data) => {
@@ -435,12 +451,14 @@ function onResetPasswordClick(row: UserRow): void {
                 // void → Notify only.
                 if (data && typeof data === 'object' && 'oneTimePassword' in data) {
                     q.dialog({
-                        title: 'Einmal-Passwort generiert',
-                        message: `Bitte sicher übermitteln: ${data.oneTimePassword}`,
-                        ok: { label: 'Verstanden' },
+                        title: msg.value.resetPassword.otpTitle,
+                        message: formatMessage(msg.value.resetPassword.otpMessage, {
+                            password: data.oneTimePassword,
+                        }),
+                        ok: { label: msg.value.resetPassword.otpAcknowledge },
                     });
                 } else {
-                    notify('positive', 'Passwort-Reset ausgelöst.');
+                    notify('positive', msg.value.resetPassword.success);
                 }
                 void reload();
             },
@@ -452,19 +470,25 @@ function onDeactivateClick(row: UserRow): void {
     if (!props.submitDeactivate) return;
     const submit = props.submitDeactivate;
     q.dialog({
-        title: `User "${row.email}" deaktivieren`,
-        message: 'Grund für Audit (Pflichtfeld):',
+        title: formatMessage(msg.value.deactivate.dialogTitle, { email: row.email }),
+        message: msg.value.reasonPrompt,
         prompt: { model: '', type: 'text' },
-        cancel: 'Abbrechen',
-        ok: { label: 'Deaktivieren', color: 'negative' },
+        cancel: common.value.cancel,
+        ok: { label: msg.value.deactivate.action, color: 'negative' },
     }).onOk(async (reason: string) => {
         if (!reason || reason.trim().length === 0) return;
         await runAction(
-            `User "${row.email}" deaktivieren — ${reason.trim()}.`,
+            formatMessage(msg.value.deactivate.mfaDescription, {
+                email: row.email,
+                reason: reason.trim(),
+            }),
             !!props.requireMfaForDeactivate,
             (code) => submit(row.id, reason, code),
             () => {
-                notify('positive', `${row.email} deaktiviert.`);
+                notify(
+                    'positive',
+                    formatMessage(msg.value.deactivate.success, { email: row.email }),
+                );
                 void reload();
             },
         );

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -19,7 +19,7 @@
                             {{ statusLabel(bundle) }}
                         </span>
                         <span v-if="i18nLocaleCount(bundle) > 0" class="sa-chip sa-chip--info">
-                            {{ i18nLocaleCount(bundle) }} Übersetzung(en)
+                            {{ translationCount(bundle) }}
                         </span>
                     </div>
                     <div class="sa-bd-card__name">{{ bundle.label }}</div>
@@ -38,7 +38,7 @@
         </div>
 
         <div v-if="bundlesTotal > 0 && filteredBundles.length === 0" class="sa-bd-empty-row">
-            Keine Bundles entsprechen der Suche.
+            {{ msg.list.emptyNoMatch }}
         </div>
     </div>
 </template>
@@ -46,9 +46,11 @@
 <script setup lang="ts">
 import type { BundleRow } from '@saasicat/types';
 import {
-    BUNDLE_STATUS_META,
+    bundleStatusMeta,
     type BundleAggregateStatus,
 } from '../../components/bundle-editor/bundle-version-status.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 const props = defineProps<{
     filteredBundles: BundleRow[];
@@ -66,17 +68,27 @@ const emit = defineEmits<{
     toggle: [bundle: BundleRow];
 }>();
 
+const msg = useSaMessages('bundles');
+const { locale } = useSuperAdminI18n();
+
+function statusMetaOf(bundle: BundleRow) {
+    return bundleStatusMeta(props.aggregateStatusOf(bundle), locale.value);
+}
+
 function statusClass(bundle: BundleRow): string {
-    return BUNDLE_STATUS_META[props.aggregateStatusOf(bundle)]?.cls ?? 'draft';
+    return statusMetaOf(bundle).cls;
 }
 
 function statusLabel(bundle: BundleRow): string {
-    const status = props.aggregateStatusOf(bundle);
-    return status === 'retired' ? 'Retired' : (BUNDLE_STATUS_META[status]?.label ?? status);
+    return statusMetaOf(bundle).label;
+}
+
+function statusTooltip(bundle: BundleRow): string {
+    return statusMetaOf(bundle).tooltip;
 }
 
-function statusTooltip(bundle: BundleRow): string | undefined {
-    return BUNDLE_STATUS_META[props.aggregateStatusOf(bundle)]?.tooltip;
+function translationCount(bundle: BundleRow): string {
+    return formatMessage(msg.value.list.translationCount, { count: props.i18nLocaleCount(bundle) });
 }
 </script>
 

package/src/pages-standard/bundles-page/BundleDetailPanel.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="sa-bd-grid">
         <div class="sa-bd-col">
-            <div class="sa-bd-section-label">Stammdaten</div>
+            <div class="sa-bd-section-label">{{ msg.fields.masterData }}</div>
             <div class="sa-bundles__form">
                 <q-input
                     :model-value="editForm.label"
                     outlined
                     dense
-                    label="Label"
+                    :label="msg.fields.label"
                     @update:model-value="(value) => patchEditForm({ label: String(value ?? '') })"
                 />
                 <q-input
@@ -16,7 +16,7 @@
                     dense
                     type="textarea"
                     autogrow
-                    label="Beschreibung"
+                    :label="common.description"
                     @update:model-value="
                         (value) => patchEditForm({ description: String(value ?? '') })
                     "
@@ -25,7 +25,7 @@
                     :model-value="editForm.icon"
                     outlined
                     dense
-                    label="Icon"
+                    :label="common.icon"
                     @update:model-value="(value) => patchEditForm({ icon: String(value ?? '') })"
                 />
                 <q-input
@@ -33,7 +33,7 @@
                     outlined
                     dense
                     type="number"
-                    label="Sortier-Reihenfolge"
+                    :label="common.sortOrder"
                     @update:model-value="
                         (value) => patchEditForm({ sortOrder: Number(value ?? 0) })
                     "
@@ -41,11 +41,11 @@
             </div>
 
             <div class="sa-bd-section-label sa-bd-section-label--mt">
-                <span>Übersetzungen</span>
-                <span class="sa-bd-section-count">{{ translatableLocales.length }} Sprache(n)</span>
+                <span>{{ msg.detail.translations }}</span>
+                <span class="sa-bd-section-count">{{ languageCount }}</span>
             </div>
             <div v-if="translatableLocales.length === 0" class="sa-bd-i18n-hint">
-                Keine weiteren Sprachen aktiv — werden im Marketing-Catalog aktiviert.
+                {{ msg.detail.noTranslatableLocales }}
             </div>
             <div v-for="lng in translatableLocales" :key="lng" class="sa-bd-i18n-block">
                 <div class="sa-bd-i18n-head">
@@ -54,14 +54,14 @@
                         v-if="!i18nDraft[lng]?.label || !i18nDraft[lng]?.description"
                         class="sa-bd-i18n-fallback"
                     >
-                        Fallback aus DE
+                        {{ msg.detail.fallbackFromDe }}
                     </span>
                 </div>
                 <q-input
                     outlined
                     dense
                     :model-value="i18nDraft[lng]?.label || ''"
-                    :placeholder="`Label (Fallback: „${editForm.label}“)`"
+                    :placeholder="labelPlaceholder"
                     @update:model-value="
                         (value) => emit('setI18n', lng, 'label', String(value ?? ''))
                     "
@@ -72,7 +72,7 @@
                     type="textarea"
                     autogrow
                     :model-value="i18nDraft[lng]?.description || ''"
-                    :placeholder="`Beschreibung (Fallback aus DE)`"
+                    :placeholder="msg.detail.descriptionPlaceholder"
                     @update:model-value="
                         (value) => emit('setI18n', lng, 'description', String(value ?? ''))
                     "
@@ -83,7 +83,7 @@
                 class="sa-bd-save"
                 unelevated
                 color="primary"
-                label="Stammdaten & Übersetzungen speichern"
+                :label="msg.detail.save"
                 :loading="editSubmitting"
                 @click="emit('submitEdit')"
             />
@@ -112,10 +112,7 @@
                 @save="(data) => emit('inlineSave', bundle.id, selectedVersion!.id, data)"
                 @discard="emit('discardVersion', bundle.id, selectedVersion!.id)"
             />
-            <div v-else class="sa-bd-empty-row">
-                Noch keine Version. Lege eine neue Version an, um Features, Quotas &amp; Pricing zu
-                kuratieren.
-            </div>
+            <div v-else class="sa-bd-empty-row">{{ msg.detail.noVersion }}</div>
 
             <div class="sa-bd-version-actions">
                 <q-btn
@@ -123,7 +120,7 @@
                     unelevated
                     color="positive"
                     icon="rocket_launch"
-                    label="Diese Version publishen"
+                    :label="msg.detail.publishVersion"
                     @click="emit('publishVersion', selectedVersion)"
                 />
                 <q-btn
@@ -132,7 +129,7 @@
                     dense
                     color="negative"
                     icon="delete"
-                    label="Bundle soft-deleten"
+                    :label="msg.detail.softDelete"
                     @click="emit('deleteBundle', bundle)"
                 />
             </div>
@@ -141,6 +138,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type {
     BundleRow,
     BundleVersionRow,
@@ -154,6 +152,8 @@ import BundleVersionInlineEditor from '../../components/bundle-editor/BundleVers
 import BundleVersionStrip from '../../components/bundle-editor/BundleVersionStrip.vue';
 import type { FeatureMeta } from '../../components/bundle-editor/BundleFeaturesEditor.vue';
 import type { QuotaMeta } from '../../components/bundle-editor/catalog-i18n.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { BundleEditForm } from './types.js';
 
 const props = defineProps<{
@@ -187,6 +187,16 @@ const emit = defineEmits<{
     deleteBundle: [bundle: BundleRow];
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+
+const languageCount = computed(() =>
+    formatMessage(msg.value.detail.languageCount, { count: props.translatableLocales.length }),
+);
+const labelPlaceholder = computed(() =>
+    formatMessage(msg.value.detail.labelPlaceholder, { label: props.editForm.label }),
+);
+
 function patchEditForm(patch: Partial<BundleEditForm>): void {
     emit('update:editForm', { ...props.editForm, ...patch });
 }

package/src/pages-standard/bundles-page/BundlesFilterBar.vue

@@ -5,7 +5,7 @@
             dense
             outlined
             clearable
-            placeholder="Bundle-Key oder Label suchen …"
+            :placeholder="msg.filterBar.searchPlaceholder"
             class="sa-bundles__search"
             @update:model-value="emitQuery"
         >
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import type { BundlesStatusFilter, BundlesStatusFilterOption } from './types.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 defineProps<{
     query: string;
@@ -33,6 +34,8 @@ defineProps<{
     statusFilterOptions: BundlesStatusFilterOption[];
 }>();
 
+const msg = useSaMessages('bundles');
+
 const emit = defineEmits<{
     'update:query': [value: string];
     'update:statusFilter': [value: BundlesStatusFilter];

package/src/pages-standard/bundles-page/BundlesHeader.vue

@@ -1,11 +1,8 @@
 <template>
     <header class="sa-bundles__head">
         <div>
-            <h1 class="sa-bundles__title">Bundles</h1>
-            <p class="sa-bundles__sub">
-                Produktgruppen aus Features &amp; Quotas — verwendet in Plänen. Bundles werden im
-                SuperAdmin kuratiert.
-            </p>
+            <h1 class="sa-bundles__title">{{ msg.header.title }}</h1>
+            <p class="sa-bundles__sub">{{ msg.header.subtitle }}</p>
         </div>
         <div class="sa-bundles__head-actions">
             <q-select
@@ -17,7 +14,7 @@
                 emit-value
                 map-options
                 class="sa-bundles__locale"
-                label="Anzeige-Sprache"
+                :label="msg.header.displayLocale"
                 @update:model-value="(value) => emit('update:displayLocale', String(value))"
             >
                 <template #prepend><q-icon name="translate" size="18px" /></template>
@@ -26,11 +23,11 @@
                 unelevated
                 color="primary"
                 icon="add"
-                label="Neues Bundle"
+                :label="msg.header.newBundle"
                 @click="emit('create')"
             />
             <q-btn flat icon="refresh" :loading="loading" @click="emit('refresh')">
-                <q-tooltip>Liste neu laden</q-tooltip>
+                <q-tooltip>{{ msg.header.reload }}</q-tooltip>
             </q-btn>
         </div>
     </header>
@@ -39,6 +36,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 // The language selector controls which locale feature/quota labels are resolved
 // on the create form and in the detail view (fallback locale → DE → key). The default is the
 // default locale (DE); further options come from the active project locales.
@@ -55,6 +54,8 @@ const emit = defineEmits<{
     'update:displayLocale': [locale: string];
 }>();
 
+const msg = useSaMessages('bundles');
+
 const localeOptions = computed(() =>
     props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
 );

package/src/pages-standard/bundles-page/BundlesKpis.vue

@@ -1,32 +1,35 @@
 <template>
     <div class="sa-bundles__kpis">
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Bundles gesamt</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.total }}</div>
             <div class="sa-bundles__kpi-value">{{ bundlesTotal }}</div>
-            <div class="sa-bundles__kpi-sub">
-                {{ liveCount }} live · {{ scheduledBundlesCount }} mit geplanter Version
-            </div>
+            <div class="sa-bundles__kpi-sub">{{ totalSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Geplante Versionen</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.scheduled }}</div>
             <div class="sa-bundles__kpi-value">{{ totalScheduledVersions }}</div>
-            <div class="sa-bundles__kpi-sub">zukünftig aktiv · noch nicht verkaufbar</div>
+            <div class="sa-bundles__kpi-sub">{{ msg.kpis.scheduledSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Offene Drafts</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.drafts }}</div>
             <div class="sa-bundles__kpi-value">{{ totalDraftVersions }}</div>
-            <div class="sa-bundles__kpi-sub">{{ draftBundlesCount }} Bundle(s) ohne Publish</div>
+            <div class="sa-bundles__kpi-sub">{{ draftsSub }}</div>
         </div>
         <div class="sa-bundles__kpi">
-            <div class="sa-bundles__kpi-label">Mit Übersetzung</div>
+            <div class="sa-bundles__kpi-label">{{ msg.kpis.translated }}</div>
             <div class="sa-bundles__kpi-value">{{ translatedCount }}</div>
-            <div class="sa-bundles__kpi-sub">{{ localesCount }} aktive Sprache(n) im Projekt</div>
+            <div class="sa-bundles__kpi-sub">{{ translatedSub }}</div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
+const props = defineProps<{
     bundlesTotal: number;
     liveCount: number;
     scheduledBundlesCount: number;
@@ -36,4 +39,19 @@ defineProps<{
     translatedCount: number;
     localesCount: number;
 }>();
+
+const msg = useSaMessages('bundles');
+
+const totalSub = computed(() =>
+    formatMessage(msg.value.kpis.totalSub, {
+        live: props.liveCount,
+        scheduled: props.scheduledBundlesCount,
+    }),
+);
+const draftsSub = computed(() =>
+    formatMessage(msg.value.kpis.draftsSub, { count: props.draftBundlesCount }),
+);
+const translatedSub = computed(() =>
+    formatMessage(msg.value.kpis.translatedSub, { count: props.localesCount }),
+);
 </script>