@saasicat/ui-vue 0.4.0 → 0.6.0

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 '../types.js';
-import { buildRoutes } from '../nav-builder.js';
+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',

package/src/pages-standard/DiscoveryPage.vue

@@ -11,7 +11,7 @@
 
         <q-banner v-if="error" class="sa-discovery__error" rounded>
             <template #avatar><q-icon name="warning" color="negative" /></template>
-            Fehler: {{ error.message }}
+            {{ common.error }}: {{ error.message }}
         </q-banner>
 
         <DiscoveryKpis
@@ -25,8 +25,8 @@
         />
 
         <q-tabs v-model="activeTab" align="left" dense class="sa-discovery__tabs">
-            <q-tab name="features" :label="`Features (${features.length})`" />
-            <q-tab name="quotas" :label="`Quotas (${quotas.length})`" />
+            <q-tab name="features" :label="featuresTabLabel" />
+            <q-tab name="quotas" :label="quotasTabLabel" />
         </q-tabs>
 
         <q-tab-panels v-model="activeTab" animated class="sa-discovery__panels">
@@ -37,7 +37,7 @@
                         dense
                         outlined
                         clearable
-                        placeholder="Feature-Key, Label oder Capability suchen …"
+                        :placeholder="msg.searchPlaceholder"
                         class="sa-discovery__search"
                     >
                         <template #prepend><q-icon name="search" /></template>
@@ -48,7 +48,7 @@
                         outlined
                         emit-value
                         map-options
-                        :options="STATUS_FILTER_OPTIONS"
+                        :options="statusFilterOptions"
                         class="sa-discovery__filter"
                     />
                 </div>
@@ -76,21 +76,20 @@
                     </div>
                 </div>
                 <div v-if="filteredFeatures.length === 0" class="sa-discovery__empty-row">
-                    Keine Features entsprechen den Filtern.
+                    {{ msg.noFeaturesMatchFilters }}
                 </div>
 
                 <div v-if="orphanCaps.length" class="sa-discovery__group">
                     <div class="sa-discovery__group-head">
                         <span class="sa-discovery__group-title sa-discovery__group-title--orphan">
                             <q-icon name="warning" size="14px" />
-                            Capabilities ohne Feature
+                            {{ msg.orphansTitle }}
                         </span>
                         <span class="sa-discovery__group-count">{{ orphanCaps.length }}</span>
                     </div>
                     <p class="sa-discovery__orphan-hint">
-                        Diesen Capabilities fehlt der <code>feature:</code>-Tag im
-                        <code>@ImplementsCapability</code>-Decorator — Feature-Zuordnung im Code
-                        nachziehen, sonst sind sie nicht verkaufbar.
+                        {{ msg.orphanHint.before }} <code>feature:</code>{{ msg.orphanHint.middle }}
+                        <code>@ImplementsCapability</code>{{ msg.orphanHint.after }}
                     </p>
                     <DiscoveryCapList
                         :capabilities="orphanCaps"
@@ -113,7 +112,7 @@
                         @quota-locale="onQuotaLocale"
                     />
                     <div v-if="quotas.length === 0" class="sa-discovery__empty-row">
-                        Keine Quotas im Code deklariert.
+                        {{ msg.noQuotasDeclared }}
                     </div>
                 </div>
             </q-tab-panel>
@@ -140,7 +139,9 @@ import DiscoveryHeader from './discovery-page/DiscoveryHeader.vue';
 import DiscoveryKpis from './discovery-page/DiscoveryKpis.vue';
 import DiscoveryMetaBanner from './discovery-page/DiscoveryMetaBanner.vue';
 import DiscoveryQuotaCard from './discovery-page/DiscoveryQuotaCard.vue';
-import { STATUS_META } from './discovery-page/discovery-ui.js';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { statusLabel } from './discovery-page/discovery-ui.js';
 
 // Platform standard page: Discovery review, feature-centric (#20).
 // Two tabs (Features + Quotas); each entry is an expandable card with
@@ -174,18 +175,31 @@ const props = defineProps<{
 }>();
 
 const activeTab = ref<'features' | 'quotas'>('features');
+
+const featuresTabLabel = computed(() =>
+    formatMessage(msg.value.tabFeatures, { count: props.features.length }),
+);
+const quotasTabLabel = computed(() =>
+    formatMessage(msg.value.tabQuotas, { count: props.quotas.length }),
+);
 const featureQuery = ref('');
 const statusFilter = ref<DiscoveryStatus | 'all'>('all');
 const expandedFeature = ref<string | null>(null);
 const expandedQuota = ref<string | null>(null);
 
-const STATUS_FILTER_OPTIONS: Array<{ label: string; value: DiscoveryStatus | 'all' }> = [
-    { label: 'Alle Status', value: 'all' },
-    ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
-        label: STATUS_META[status].label,
-        value: status,
-    })),
-];
+const msg = useSaMessages('discovery');
+const common = useSaMessages('common');
+const { locale, intlLocale } = useSuperAdminI18n();
+
+const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStatus | 'all' }>>(
+    () => [
+        { label: msg.value.statusFilterAll, value: 'all' },
+        ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
+            label: statusLabel(status, locale.value),
+            value: status,
+        })),
+    ],
+);
 
 const appKey = computed(() => props.snapshot?.app.key ?? '—');
 const appLabel = computed(() => {
@@ -194,9 +208,9 @@ const appLabel = computed(() => {
 });
 const appVersion = computed(() => props.snapshot?.app.version ?? '0.0.0');
 const scanLabel = computed(() => {
-    if (!props.snapshot?.scannedAt) return 'noch nicht gescannt';
+    if (!props.snapshot?.scannedAt) return msg.value.notScannedYet;
     try {
-        return new Date(props.snapshot.scannedAt).toLocaleString('de-DE');
+        return new Date(props.snapshot.scannedAt).toLocaleString(intlLocale.value);
     } catch {
         return props.snapshot.scannedAt;
     }
@@ -277,21 +291,19 @@ const filteredFeatures = computed(() => {
     });
 });
 
-const NO_OWNER_LABEL = 'Ohne Owner';
-
-/** Grouping by primary owner (#14); "Ohne Owner" last. */
+/** Grouping by primary owner (#14); the ownerless group goes last. */
 const featureGroups = computed<Array<{ label: string; features: FeatureCatalogEntryRow[] }>>(() => {
     const groups = new Map<string, FeatureCatalogEntryRow[]>();
     for (const f of filteredFeatures.value) {
-        const owner = ownersByFeature.value.get(f.featureKey)?.[0] ?? NO_OWNER_LABEL;
+        const owner = ownersByFeature.value.get(f.featureKey)?.[0] ?? msg.value.noOwner;
         const list = groups.get(owner);
         if (list) list.push(f);
         else groups.set(owner, [f]);
     }
     return [...groups.entries()]
         .sort((a, b) => {
-            if (a[0] === NO_OWNER_LABEL) return 1;
-            if (b[0] === NO_OWNER_LABEL) return -1;
+            if (a[0] === msg.value.noOwner) return 1;
+            if (b[0] === msg.value.noOwner) return -1;
             return a[0].localeCompare(b[0]);
         })
         .map(([label, features]) => ({ label, features }));
@@ -340,7 +352,7 @@ function persist(p: Promise<unknown>): void {
     p.catch((err) => {
         // Auth renewal/redirect is handled by the HTTP client; here just log
         // so a failed save stays visible.
-        console.error('Catalog-Entry konnte nicht gespeichert werden', err);
+        console.error('Failed to save catalog entry', err);
     });
 }