@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/AdminLayout.vue

@@ -2,7 +2,7 @@
     <q-layout view="lHh Lpr lFf">
         <div v-if="isProduction" class="sa-admin-banner sa-admin-banner--prod">
             <q-icon name="warning" size="14px" />
-            <strong>PRODUCTION</strong> — Aktionen wirken sich sofort auf alle Mandanten aus.
+            <strong>PRODUCTION</strong> — {{ msg.header.productionWarning }}
         </div>
 
         <q-header elevated class="sa-admin-header">
@@ -10,11 +10,11 @@
                 <q-btn flat dense round icon="menu" @click="leftDrawerOpen = !leftDrawerOpen" />
                 <q-toolbar-title class="text-weight-bold">
                     {{ currentPageTitle }}
-                    <div class="sa-admin-header__sub">SuperAdmin · Plattform-Verwaltung</div>
+                    <div class="sa-admin-header__sub">{{ msg.header.subtitle }}</div>
                 </q-toolbar-title>
                 <q-space />
                 <slot name="header-actions" />
-                <q-badge class="sa-admin-badge q-mr-sm">SUPER ADMIN</q-badge>
+                <q-badge class="sa-admin-badge q-mr-sm">{{ msg.header.roleBadge }}</q-badge>
                 <div class="sa-admin-user">
                     <q-avatar size="32px" class="sa-admin-user__avatar">
                         {{ initials }}
@@ -24,7 +24,7 @@
                         <div class="text-caption sa-admin-user__email">{{ userEmail }}</div>
                     </div>
                     <q-btn flat round dense icon="logout" size="sm" @click="emit('logout')">
-                        <q-tooltip>Abmelden</q-tooltip>
+                        <q-tooltip>{{ msg.header.logout }}</q-tooltip>
                     </q-btn>
                 </div>
             </q-toolbar>
@@ -39,10 +39,12 @@
         >
             <div class="sa-admin-drawer__stack">
                 <div class="sa-admin-drawer__brand">
-                    <div class="sa-admin-drawer__logo">{{ brandLogoText }}</div>
+                    <div class="sa-admin-drawer__logo">{{ brand.logoText }}</div>
                     <div>
-                        <div class="sa-admin-drawer__brand-name">{{ brandName }}</div>
-                        <div class="sa-admin-drawer__brand-tag">{{ brandTag }} v{{ adminUiVersion }}</div>
+                        <div class="sa-admin-drawer__brand-name">{{ brand.name }}</div>
+                        <div class="sa-admin-drawer__brand-tag">
+                            {{ brand.tag }} v{{ adminUiVersion }}
+                        </div>
                     </div>
                 </div>
 
@@ -75,7 +77,7 @@
                             target="_blank"
                             rel="noopener"
                         >
-                            <q-icon name="menu_book" size="14px" /> Doku öffnen
+                            <q-icon name="menu_book" size="14px" /> {{ msg.drawer.docs }}
                         </a>
                     </slot>
                 </div>
@@ -91,10 +93,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { AdminManifest, StandardPageKey } from '@saasicat/types';
-import { buildRoutes, buildSidebar, DEFAULT_SECTION_ORDER } from '../client/nav-builder.js';
+import { buildRoutes, buildSidebar, defaultSectionOrder } from '../client/nav-builder.js';
+import { SUPER_ADMIN_BRAND_KEY, SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { ADMIN_UI_VERSION } from '../client/version.js';
 
 // SuperAdmin layout — universal platform shell for all consumer apps.
@@ -131,8 +135,13 @@ export interface SidebarItem {
 
 const props = withDefaults(
     defineProps<{
-        brandLogoText: string;
-        brandName: string;
+        /**
+         * Branding. Optional — when the layout is mounted as a route component
+         * inside `createSuperAdminApp({ brand })`, these default to the
+         * provided brand and only need passing to override it.
+         */
+        brandLogoText?: string;
+        brandName?: string;
         brandTag?: string;
         manifest?: AdminManifest | null;
         staticNavFallback?: readonly SidebarItem[];
@@ -164,13 +173,11 @@ const props = withDefaults(
         adminPathPrefix?: string;
     }>(),
     {
-        brandTag: 'SuperAdmin',
         staticNavFallback: () => [],
         localItems: () => [],
         localItemsSection: null,
         adminPathPrefix: '/admin',
         isProduction: false,
-        sectionOrder: () => DEFAULT_SECTION_ORDER,
     },
 );
 
@@ -179,6 +186,23 @@ const emit = defineEmits<{
 }>();
 
 const route = useRoute();
+const msg = useSaMessages('shell');
+const { locale } = useSuperAdminI18n();
+// Provided by createSuperAdminApp(); null when the layout is mounted
+// stand-alone. Grouped into one object so the names cannot shadow the
+// same-named props inside the template.
+const injectedBrand = inject(SUPER_ADMIN_BRAND_KEY, null);
+// Same idea for the manifest: createSuperAdminApp({ manifestGuard: {
+// getManifest } }) provides an accessor, so pages mounted straight as route
+// components do not have to be wrapped just to thread the prop through.
+const injectedManifest = inject(SUPER_ADMIN_MANIFEST_KEY, null);
+const activeManifest = computed(() => props.manifest ?? injectedManifest?.() ?? null);
+const brand = computed(() => ({
+    logoText: props.brandLogoText ?? injectedBrand?.logoText ?? '',
+    name: props.brandName ?? injectedBrand?.name ?? '',
+    tag: props.brandTag ?? injectedBrand?.tag ?? 'SuperAdmin',
+}));
+
 const leftDrawerOpen = ref(false);
 
 const adminUiVersion = ADMIN_UI_VERSION;
@@ -195,18 +219,19 @@ interface NavSection {
 }
 
 const navSections = computed<NavSection[]>(() => {
-    const m = props.manifest;
+    const m = activeManifest.value;
     if (!m) {
         // Pre-manifest: static fallback + local items as one unnamed
         // section, so that the UI has no flicker before manifest load.
         return [{ title: null, items: [...props.staticNavFallback, ...props.localItems] }];
     }
     const routes = buildRoutes(m, {
+        locale: locale.value,
         standardPageRoutes: props.standardPageRoutes,
         standardPageNavSection: props.standardPageNavSection,
         availableExtensions: props.availableExtensions,
     });
-    const sections = buildSidebar(routes, props.sectionOrder);
+    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(locale.value));
     const result: NavSection[] = sections.map((s) => ({
         title: s.section,
         items: s.items.map((item) => ({
@@ -241,7 +266,7 @@ const currentPageTitle = computed(() => {
     }
     // Default: sidebar item label that matches the active route.
     const item = resolvedNav.value.find((i) => i.to === route.path);
-    return item?.label ?? `${props.brandName} SuperAdmin`;
+    return item?.label ?? `${brand.value.name} SuperAdmin`;
 });
 </script>
 

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -3,21 +3,16 @@
         <q-card class="sa-manifest-error__card">
             <q-card-section class="sa-manifest-error__head">
                 <q-icon name="cloud_off" size="32px" color="negative" />
-                <h1 class="sa-manifest-error__title">Admin-Manifest nicht erreichbar</h1>
+                <h1 class="sa-manifest-error__title">{{ msg.manifestError.title }}</h1>
             </q-card-section>
             <q-card-section>
-                <p class="sa-manifest-error__lead">
-                    Das Plattform-Manifest konnte nicht geladen werden. Ohne Manifest sind Sidebar,
-                    Capabilities und Action-Buttons nicht zuverlässig — die UI würde sonst falsche
-                    oder unerreichbare Buttons rendern. Der Router hat dich deshalb hierher
-                    geschickt (fail-closed).
-                </p>
+                <p class="sa-manifest-error__lead">{{ msg.manifestError.lead }}</p>
                 <p v-if="errorMessage" class="sa-manifest-error__detail">
-                    <strong>Detail:</strong> {{ errorMessage }}
+                    <strong>{{ msg.manifestError.detailLabel }}</strong> {{ errorMessage }}
                 </p>
                 <div class="sa-manifest-error__actions">
-                    <q-btn unelevated color="primary" label="Erneut laden" @click="onRetry" />
-                    <q-btn flat label="Logout" @click="onLogout" />
+                    <q-btn unelevated color="primary" :label="common.reload" @click="onRetry" />
+                    <q-btn flat :label="msg.header.logout" @click="onLogout" />
                 </div>
             </q-card-section>
         </q-card>
@@ -25,11 +20,16 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+
 // Platform standard error page for `manifestGuard.errorRoute`.
 // Consumers pass `onRetry`/`onLogout` in as callbacks and decide
 // themselves what happens (e.g. manifestStore.clearCache() + ensureLoaded,
 // authStore.logout, router.replace).
 
+const msg = useSaMessages('shell');
+const common = useSaMessages('common');
+
 defineProps<{
     errorMessage?: string | null;
     onRetry: () => Promise<void> | void;

package/src/pages-standard/AuditPage.vue

@@ -2,18 +2,51 @@
     <div class="sa-audit">
         <header class="sa-audit__head">
             <div>
-                <h1 class="sa-audit__title">Audit-Trail</h1>
-                <p class="sa-audit__sub">{{ rows.length }} Einträge · plattformweit.</p>
+                <h1 class="sa-audit__title">{{ msg.title }}</h1>
+                <p class="sa-audit__sub">
+                    {{ formatMessage(msg.subtitle, { count: rows.length }) }}
+                </p>
             </div>
-            <q-btn unelevated color="primary" icon="refresh" label="Filtern" @click="reload" />
+            <q-btn
+                unelevated
+                color="primary"
+                icon="refresh"
+                :label="msg.filterButton"
+                @click="reload"
+            />
         </header>
 
         <div class="sa-audit__body">
             <div class="sa-audit__filter">
-                <q-input v-model="filter.actor" outlined dense label="Actor (E-Mail)" clearable />
-                <q-input v-model="filter.action" outlined dense label="Action" clearable />
-                <q-input v-model="filter.entity" outlined dense label="Entity" clearable />
-                <q-input v-model="filter.since" outlined dense type="date" label="Seit" clearable />
+                <q-input
+                    v-model="filter.actor"
+                    outlined
+                    dense
+                    :label="msg.filters.actor"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.action"
+                    outlined
+                    dense
+                    :label="msg.filters.action"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.entity"
+                    outlined
+                    dense
+                    :label="msg.filters.entity"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.since"
+                    outlined
+                    dense
+                    type="date"
+                    :label="msg.filters.since"
+                    clearable
+                />
             </div>
 
             <div class="sa-audit__card">
@@ -29,7 +62,7 @@
                     <template #body-cell-changes="{ row }">
                         <q-td>
                             <q-btn flat dense icon="code" color="primary" @click="openDetail(row)">
-                                <q-tooltip>Details</q-tooltip>
+                                <q-tooltip>{{ common.details }}</q-tooltip>
                             </q-btn>
                         </q-td>
                     </template>
@@ -42,7 +75,7 @@
                 <q-card-section>
                     <div class="text-h6">{{ detail?.action }} · {{ detail?.entity }}</div>
                     <div class="text-caption text-grey-7">
-                        {{ detail ? formatTs(detail.createdAt) : '' }} · Actor:
+                        {{ detail ? formatTs(detail.createdAt) : '' }} · {{ msg.detailActorPrefix }}
                         {{ detail ? actorEmail(detail) : '—' }}
                     </div>
                 </q-card-section>
@@ -52,7 +85,7 @@
                     }}</pre>
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn v-close-popup flat label="Schließen" />
+                    <q-btn v-close-popup flat :label="common.close" />
                 </q-card-actions>
             </q-card>
         </q-dialog>
@@ -60,7 +93,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: audit trail. Data-agnostic — the app passes
 // `loadAudit({ actor, action, entity, since, limit })` through.
@@ -89,36 +124,40 @@ const props = defineProps<{
     pageSize?: number;
 }>();
 
+const msg = useSaMessages('audit');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
 const rows = ref<AuditRow[]>([]);
 const loading = ref(false);
 const filter = reactive({ actor: '', action: '', entity: '', since: '' });
 const detailOpen = ref(false);
 const detail = ref<AuditRow | null>(null);
 
-const columns = [
+const columns = computed(() => [
     {
         name: 'createdAt',
-        label: 'Zeit',
+        label: msg.value.columns.time,
         field: (r: AuditRow) => formatTs(r.createdAt),
         align: 'left' as const,
         sortable: true,
     },
     {
         name: 'actor',
-        label: 'Actor',
+        label: msg.value.columns.actor,
         field: actorEmail,
         align: 'left' as const,
     },
-    { name: 'action', label: 'Action', field: 'action', align: 'left' as const },
-    { name: 'entity', label: 'Entity', field: 'entity', align: 'left' as const },
+    { name: 'action', label: msg.value.columns.action, field: 'action', align: 'left' as const },
+    { name: 'entity', label: msg.value.columns.entity, field: 'entity', align: 'left' as const },
     {
         name: 'entityId',
-        label: 'ID',
+        label: msg.value.columns.id,
         field: (r: AuditRow) => r.entityId.slice(0, 8),
         align: 'left' as const,
     },
     { name: 'changes', label: '', field: 'id', align: 'right' as const },
-];
+]);
 
 async function reload() {
     loading.value = true;
@@ -153,7 +192,7 @@ function actorEmail(r: AuditRow): string {
 function formatTs(iso: string | null | undefined): string {
     if (!iso) return '—';
     try {
-        return new Date(iso).toLocaleString('de-DE', {
+        return new Date(iso).toLocaleString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/BundlesPage.vue

@@ -11,7 +11,7 @@
 
         <q-banner v-if="error" class="sa-bundles__error" rounded>
             <template #avatar><q-icon name="warning" color="negative" /></template>
-            Fehler beim Laden: {{ error.message }}
+            {{ loadErrorText }}
         </q-banner>
 
         <BundlesKpis
@@ -54,8 +54,8 @@
             rounded
         >
             <template #avatar><q-icon name="info" color="info" /></template>
-            Noch keine Bundles angelegt. Über <strong>Neues Bundle</strong> einen Bundle-Stamm
-            anlegen, dann Features &amp; Quotas in einer Draft-Version kuratieren.
+            {{ msg.page.emptyBefore }} <strong>{{ msg.header.newBundle }}</strong>
+            {{ msg.page.emptyAfter }}
         </q-banner>
 
         <BundleAccordionList
@@ -104,7 +104,7 @@
             rounded
         >
             <template #avatar><q-icon name="warning" color="warning" /></template>
-            <strong>{{ lastWarnings.length }} Strict-Mode-Warnung(en) bei letzter Operation</strong>
+            <strong>{{ strictWarningsText }}</strong>
             <ul class="sa-bundles__warnings-list">
                 <li v-for="(w, i) in lastWarnings" :key="i">
                     <code>{{ w.code }}</code>
@@ -115,7 +115,7 @@
                 </li>
             </ul>
             <template #action>
-                <q-btn flat dense label="Schließen" @click="lastWarnings = []" />
+                <q-btn flat dense :label="common.close" @click="lastWarnings = []" />
             </template>
         </q-banner>
 
@@ -169,6 +169,8 @@ import {
     bundleVersionsSorted,
     type BundleAggregateStatus,
 } from '../components/bundle-editor/bundle-version-status';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import BundleAccordionList from './bundles-page/BundleAccordionList.vue';
 import BundleDetailPanel from './bundles-page/BundleDetailPanel.vue';
 import BundlesFilterBar from './bundles-page/BundlesFilterBar.vue';
@@ -263,6 +265,9 @@ const props = withDefaults(
     },
 );
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+
 const locales = computed(() => props.activeLocales ?? [DEFAULT_LOCALE]);
 const translatableLocales = computed(() => locales.value.filter((l) => l !== DEFAULT_LOCALE));
 
@@ -350,14 +355,14 @@ const createOpen = ref(false);
 /** For the bundle-key conflict check in the wizard. */
 const existingBundleKeys = computed(() => props.bundles.map((b) => b.bundleKey));
 
-const statusFilterOptions: BundlesStatusFilterOption[] = [
-    { label: 'Alle Status', value: 'all' as const },
-    { label: 'Nur Live', value: 'live' as const },
-    { label: 'Mit geplanter Version', value: 'scheduled' as const },
-    { label: 'Drafts', value: 'draft' as const },
-    { label: 'Abgelöste', value: 'superseded' as const },
-    { label: 'Retired', value: 'retired' as const },
-];
+const statusFilterOptions = computed<BundlesStatusFilterOption[]>(() => [
+    { label: msg.value.filter.all, value: 'all' },
+    { label: msg.value.filter.live, value: 'live' },
+    { label: msg.value.filter.scheduled, value: 'scheduled' },
+    { label: msg.value.filter.draft, value: 'draft' },
+    { label: msg.value.filter.superseded, value: 'superseded' },
+    { label: msg.value.filter.retired, value: 'retired' },
+]);
 
 function openCreatePanel(): void {
     createOpen.value = true;
@@ -446,8 +451,7 @@ async function submitEdit(): Promise<void> {
 
 async function confirmDelete(bundle: BundleRow): Promise<void> {
     const ok = window.confirm(
-        `Bundle '${bundle.bundleKey}' wirklich soft-deleten? Bestand bleibt durch ` +
-            `published BundleVersions geschützt.`,
+        formatMessage(msg.value.page.confirmSoftDelete, { bundleKey: bundle.bundleKey }),
     );
     if (!ok) return;
     await props.softDelete(bundle.id);
@@ -466,6 +470,13 @@ watch(
 // ─── Strict mode warnings ───
 const lastWarnings = ref<StrictModeWarning[]>([]);
 
+const loadErrorText = computed(() =>
+    formatMessage(msg.value.page.loadError, { message: props.error?.message ?? '' }),
+);
+const strictWarningsText = computed(() =>
+    formatMessage(msg.value.page.strictWarnings, { count: lastWarnings.value.length }),
+);
+
 // ─── Inline editor (selected version per bundle) ───
 const selectedVersionIdByBundle = ref<Record<string, string | null>>({});
 const inlineEditorSaving = ref(false);
@@ -565,10 +576,10 @@ async function onInlineSave(
 async function onDiscardVersion(bundleId: string, versionId: string): Promise<void> {
     if (!props.discardDraft) {
         inlineEditorError.value =
-            'Discard ist im Wrapper nicht verdrahtet — bitte `discardDraft`-Prop ergänzen.';
+            'Discard is not wired up in the wrapper — add the `discardDraft` prop.';
         return;
     }
-    const ok = window.confirm('Diese Draft-Version verwerfen? Der Inhalt geht verloren.');
+    const ok = window.confirm(msg.value.page.confirmDiscardVersion);
     if (!ok) return;
     inlineEditorSaving.value = true;
     inlineEditorError.value = null;
@@ -614,7 +625,7 @@ async function onPublishSubmit(opts: {
     validUntil?: string | null;
 }): Promise<BundleVersionMutationResult> {
     if (!publishDraft.value) {
-        throw new Error('BundlesPage: publish submit ohne Draft-Kontext');
+        throw new Error('BundlesPage: publish submit without draft context');
     }
     return props.publish(publishDraft.value.id, opts);
 }

package/src/pages-standard/DashboardPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-dashboard">
         <header class="sa-page-head sa-dashboard__head">
             <div>
-                <h1 class="sa-page-head__title">Dashboard</h1>
+                <h1 class="sa-page-head__title">{{ msg.title }}</h1>
                 <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
             </div>
             <div class="sa-page-head__actions">
@@ -11,22 +11,22 @@
                     dense
                     icon="refresh"
                     :loading="loading"
-                    aria-label="Neu laden"
+                    :aria-label="common.reload"
                     @click="reload"
                 />
             </div>
         </header>
 
         <q-banner v-if="error" class="bg-red-1 text-red-9 q-mb-md" rounded>
-            <strong>Fehler:</strong> {{ error.message }}
+            <strong>{{ common.error }}:</strong> {{ error.message }}
         </q-banner>
 
         <div v-if="loading && !cards.length" class="sa-dashboard__loading">
-            <q-spinner size="32px" /> Daten werden geladen…
+            <q-spinner size="32px" /> {{ common.loadingData }}
         </div>
 
         <div v-else-if="!cards.length" class="sa-dashboard__empty">
-            Keine KPI-Cards im Manifest deklariert.
+            {{ msg.emptyKpiCards }}
         </div>
 
         <div v-else class="sa-dashboard__strip">
@@ -83,7 +83,7 @@
             class="sa-dashboard__card sa-dashboard__shortcuts"
         >
             <header class="sa-dashboard__row-head">
-                <h2>Shortcuts</h2>
+                <h2>{{ msg.shortcutsTitle }}</h2>
             </header>
             <div class="sa-dashboard__shortcut-grid">
                 <a
@@ -106,10 +106,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue';
 import type { AdminManifest, KpiCardDef } from '@saasicat/types';
 import type { HttpClient } from '../client/types.js';
 import { buildRoutes } from '../client/nav-builder.js';
+import { formatMessage } from '../client/i18n/format.js';
+import { SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { useSuperAdminHttp } from '../vue/use-super-admin-context.js';
 
 // Platform standard page: Dashboard.
 //
@@ -204,7 +208,18 @@ interface KpiCardState {
     value: string | number | null;
 }
 
-const manifestRef = ref<AdminManifest | null>(props.manifest ?? null);
+const msg = useSaMessages('dashboard');
+const common = useSaMessages('common');
+const { locale, intlLocale } = useSuperAdminI18n();
+
+// Provided by createSuperAdminApp({ manifestGuard: { getManifest } }) — lets
+// the page work as a plain route component without a wrapper.
+const injectedManifest = inject(SUPER_ADMIN_MANIFEST_KEY, null);
+// The KPI endpoints need the app's auth. Without this the page would fall back
+// to a bare fetch() and every card would render as an em dash.
+const shellHttp = useSuperAdminHttp();
+
+const manifestRef = ref<AdminManifest | null>(props.manifest ?? injectedManifest?.() ?? null);
 const cards = reactive<KpiCardState[]>([]);
 const loading = ref(false);
 const error = ref<Error | null>(null);
@@ -238,7 +253,7 @@ const resolvedShortcuts = computed<ShortcutDef[]>(() => {
     } else if (!manifestRef.value) {
         list = [];
     } else {
-        const routes = buildRoutes(manifestRef.value);
+        const routes = buildRoutes(manifestRef.value, { locale: locale.value });
         list = routes.map((r) => ({
             id: r.id,
             label: r.label,
@@ -325,9 +340,8 @@ function defaultFormat(card: KpiCardDef, body: unknown): KpiFormatted {
 }
 
 async function callHttp(url: string): Promise<{ status: number; json: () => Promise<unknown> }> {
-    if (props.http) {
-        return props.http(url, { method: 'GET' });
-    }
+    const http = props.http ?? shellHttp;
+    if (http) return http(url, { method: 'GET' });
     const headers: Record<string, string> = {};
     const token = props.getAuthToken?.();
     if (token) headers.Authorization = `Bearer ${token}`;
@@ -354,7 +368,7 @@ function extractSub(
     }
     if (hintType === 'value+delta' && typeof body.delta === 'number') {
         const sign = body.delta > 0 ? '+' : '';
-        return `${sign}${body.delta} ggü. Vorperiode`;
+        return formatMessage(msg.value.deltaVsPreviousPeriod, { delta: `${sign}${body.delta}` });
     }
     if (typeof body.sub === 'string') return body.sub;
     return undefined;
@@ -363,14 +377,14 @@ function extractSub(
 function formatValue(card: KpiCardState): string {
     const v = card.value;
     if (v === null || v === undefined || v === '') return '—';
-    if (typeof v === 'number') return v.toLocaleString('de-DE');
+    if (typeof v === 'number') return v.toLocaleString(intlLocale.value);
     if (typeof v === 'string') return v;
     return String(v);
 }
 
 function formatTimestamp(iso: string): string {
     try {
-        return new Date(iso).toLocaleString('de-DE', {
+        return new Date(iso).toLocaleString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',