@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/{nav-builder.ts → client/nav-builder.ts}

@@ -9,11 +9,10 @@
 // not required at all). The manifest is Discovery, not security — the server
 // enforces the routes independently.
 
-import type {
-    AdminManifest,
-    StandardPageDef,
-    StandardPageKey,
-} from '@saasicat/types';
+import type { AdminManifest, StandardPageDef, StandardPageKey } from '@saasicat/types';
+
+import { DEFAULT_SA_LOCALE, type SaLocale } from './i18n/locale.js';
+import { navMessages } from './i18n/messages/nav.js';
 
 /**
  * Default routes for the platform standard pages. Consumers may override this
@@ -32,7 +31,6 @@ export const DEFAULT_STANDARD_PAGE_ROUTES: Record<StandardPageKey, string> = {
     pilots: '/admin/pilots',
     discovery: '/admin/discovery',
     bundles: '/admin/bundles',
-    businessTypes: '/admin/business-types',
     marketingCatalog: '/admin/marketing-catalog',
     platformEmail: '/admin/platform-email',
     platformEmailHistory: '/admin/platform-email-history',
@@ -59,13 +57,19 @@ export interface BuildRouteEntry {
 }
 
 export interface NavBuilderOptions {
+    /**
+     * UI locale for the default labels and section names, default `'de'`.
+     * Pass the same locale to `buildSidebar()`'s `sectionOrder` (via
+     * `defaultSectionOrder(locale)`) — section names are compared as strings.
+     */
+    locale?: SaLocale;
     /**
      * Optional: overrides the default routes for certain standard pages.
      * Consumers set this if they want an alternative URL structure.
      */
     standardPageRoutes?: Partial<Record<StandardPageKey, string>>;
     /**
-     * Default labels for standard pages — consumers may localize.
+     * Per-page label overrides layered over the locale defaults.
      */
     standardPageLabels?: Partial<Record<StandardPageKey, string>>;
     /** Default icons for standard pages. */
@@ -82,24 +86,6 @@ export interface NavBuilderOptions {
     availableExtensions?: Set<string>;
 }
 
-const DEFAULT_LABELS: Record<StandardPageKey, string> = {
-    dashboard: 'Dashboard',
-    tenants: 'Mandanten',
-    subscriptions: 'Abonnements',
-    promoCodes: 'Promo-Codes',
-    plans: 'Pläne & Versionen',
-    planVersions: 'Plan-Versionen',
-    audit: 'Audit-Log',
-    users: 'Benutzer',
-    pilots: 'Piloten',
-    discovery: 'Discovery',
-    bundles: 'Bundles',
-    businessTypes: 'Geschäftstypen',
-    marketingCatalog: 'Marketing-Catalog',
-    platformEmail: 'Plattform-E-Mail',
-    platformEmailHistory: 'E-Mail-Verlauf',
-};
-
 const DEFAULT_ICONS: Record<StandardPageKey, string> = {
     dashboard: 'dashboard',
     tenants: 'business',
@@ -112,36 +98,39 @@ const DEFAULT_ICONS: Record<StandardPageKey, string> = {
     pilots: 'flight_takeoff',
     discovery: 'travel_explore',
     bundles: 'inventory_2',
-    businessTypes: 'category',
     marketingCatalog: 'campaign',
     platformEmail: 'mail',
     platformEmailHistory: 'mark_email_read',
 };
 
-const DEFAULT_NAV_SECTIONS: Partial<Record<StandardPageKey, string>> = {
-    dashboard: 'Übersicht',
-    discovery: 'Produktkatalog',
-    businessTypes: 'Produktkatalog',
-    bundles: 'Produktkatalog',
-    plans: 'Produktkatalog',
-    planVersions: 'Produktkatalog',
-    marketingCatalog: 'Produktkatalog',
-    promoCodes: 'Produktkatalog',
-    tenants: 'Kunden',
-    subscriptions: 'Kunden',
-    users: 'Kunden',
-    pilots: 'Kunden',
-    audit: 'System',
-    platformEmail: 'System',
-    platformEmailHistory: 'System',
+type SectionKey = keyof (typeof navMessages)['de']['sections'];
+
+const PAGE_SECTIONS: Partial<Record<StandardPageKey, SectionKey>> = {
+    dashboard: 'overview',
+    discovery: 'catalog',
+    bundles: 'catalog',
+    plans: 'catalog',
+    planVersions: 'catalog',
+    marketingCatalog: 'catalog',
+    promoCodes: 'catalog',
+    tenants: 'customers',
+    subscriptions: 'customers',
+    users: 'customers',
+    pilots: 'customers',
+    audit: 'system',
+    platformEmail: 'system',
+    platformEmailHistory: 'system',
 };
 
-export const DEFAULT_SECTION_ORDER: readonly string[] = [
-    'Übersicht',
-    'Produktkatalog',
-    'Kunden',
-    'System',
-];
+/**
+ * Localized default section names in drawer order (Übersicht → Produktkatalog
+ * → Kunden → System). Pass the result to `buildSidebar()` when building routes
+ * with a non-default locale.
+ */
+export function defaultSectionOrder(locale: SaLocale = DEFAULT_SA_LOCALE): readonly string[] {
+    const sections = navMessages[locale].sections;
+    return [sections.overview, sections.catalog, sections.customers, sections.system];
+}
 
 /**
  * Returns the list of all routes defined by the current manifest —
@@ -159,10 +148,14 @@ export function buildRoutes(
 
     // StandardPages
     const standard = manifest.navigation?.standardPages ?? {};
+    const nav = navMessages[options.locale ?? DEFAULT_SA_LOCALE];
+    const defaultNavSections: Partial<Record<StandardPageKey, string>> = Object.fromEntries(
+        Object.entries(PAGE_SECTIONS).map(([page, section]) => [page, nav.sections[section]]),
+    );
     const overrideRoutes = { ...DEFAULT_STANDARD_PAGE_ROUTES, ...options.standardPageRoutes };
-    const overrideLabels = { ...DEFAULT_LABELS, ...options.standardPageLabels };
+    const overrideLabels = { ...nav.pages, ...options.standardPageLabels };
     const overrideIcons = { ...DEFAULT_ICONS, ...options.standardPageIcons };
-    const overrideNavSection = { ...DEFAULT_NAV_SECTIONS, ...options.standardPageNavSection };
+    const overrideNavSection = { ...defaultNavSections, ...options.standardPageNavSection };
 
     for (const key of Object.keys(standard) as StandardPageKey[]) {
         const def = standard[key] as StandardPageDef | undefined;
@@ -230,7 +223,7 @@ export interface SidebarSection {
  */
 export function buildSidebar(
     routes: BuildRouteEntry[],
-    sectionOrder: readonly string[] = DEFAULT_SECTION_ORDER,
+    sectionOrder: readonly string[] = defaultSectionOrder(),
 ): SidebarSection[] {
     const bySection = new Map<string | null, SidebarItem[]>();
     for (const r of routes) {

package/src/{plan-versions-catalog.ts → client/plan-versions-catalog.ts}

@@ -17,6 +17,10 @@
 
 import type { PlanVersionRow } from '@saasicat/types';
 
+import { formatMessage } from './i18n/format.js';
+import { DEFAULT_SA_LOCALE, SA_INTL_LOCALES, type SaLocale } from './i18n/locale.js';
+import { planVersionsMessages } from './i18n/messages/plan-versions.js';
+
 export type SnapshotKind = 'drafts' | 'active' | 'historical';
 
 export interface CatalogSnapshot<P extends PlanVersionRow = PlanVersionRow> {
@@ -78,6 +82,8 @@ export interface BuildSnapshotsOptions {
      * end up sorted alphabetically at the back.
      */
     planSortOrder?: readonly string[];
+    /** UI locale for the generated snapshot labels/titles/descriptions. */
+    locale?: SaLocale;
 }
 
 // ─── Helpers ─────────────────────────────────────────────────────────────
@@ -168,8 +174,16 @@ function resolvePlan<P extends PlanVersionRow>(source: P, liveBase: P | null): R
 
 // ─── Snapshot constructors ───────────────────────────────────────────────
 
-function dateLabelDe(iso: string): string {
-    return new Date(iso).toLocaleDateString('de-DE', {
+type CatalogMessages = (typeof planVersionsMessages)['de']['catalog'];
+
+function draftsTitle(draftCount: number, msg: CatalogMessages): string {
+    if (draftCount === 0) return msg.draftsTitleEmpty;
+    const template = draftCount === 1 ? msg.draftsTitleOne : msg.draftsTitleMany;
+    return formatMessage(template, { count: draftCount });
+}
+
+function dateLabel(iso: string, locale: SaLocale): string {
+    return new Date(iso).toLocaleDateString(SA_INTL_LOCALES[locale], {
         day: '2-digit',
         month: 'short',
         year: 'numeric',
@@ -179,7 +193,9 @@ function dateLabelDe(iso: string): string {
 function buildDraftsSnapshot<P extends PlanVersionRow>(
     data: RawCatalogData<P>,
     sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+    locale: SaLocale,
 ): CatalogSnapshot<P> {
+    const msg = planVersionsMessages[locale].catalog;
     const planByKey = groupBy(data.planVersions, (r) => r.planId);
 
     const plans: ResolvedPlan<P>[] = [];
@@ -196,15 +212,9 @@ function buildDraftsSnapshot<P extends PlanVersionRow>(
         id: 'drafts',
         kind: 'drafts',
         status: 'DRAFT',
-        label: 'Arbeitsstand',
-        title:
-            draftCount === 0
-                ? 'Keine offenen Drafts'
-                : `${draftCount} offene${draftCount === 1 ? 'r' : ''} Draft${draftCount === 1 ? '' : 's'} bereit für Publish`,
-        description:
-            draftCount === 0
-                ? 'Lege einen Draft an, um Limits, Preise oder Features zu ändern. Drafts sind ohne MFA editierbar und werden erst beim Publish wirksam.'
-                : 'Diese Tabelle zeigt, wie der Catalog nach Publish aller Drafts aussehen würde. Bestehende Mandanten bleiben auf der vorherigen Version, bis sie aktiv migriert werden.',
+        label: msg.draftsLabel,
+        title: draftsTitle(draftCount, msg),
+        description: draftCount === 0 ? msg.draftsDescriptionEmpty : msg.draftsDescription,
         asOf: null,
         createdAt: null,
         publishedAt: null,
@@ -218,7 +228,9 @@ function buildDraftsSnapshot<P extends PlanVersionRow>(
 function buildActiveSnapshot<P extends PlanVersionRow>(
     data: RawCatalogData<P>,
     sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+    locale: SaLocale,
 ): CatalogSnapshot<P> | null {
+    const msg = planVersionsMessages[locale].catalog;
     const planByKey = groupBy(data.planVersions, (r) => r.planId);
 
     const plans: ResolvedPlan<P>[] = [];
@@ -238,10 +250,9 @@ function buildActiveSnapshot<P extends PlanVersionRow>(
         id: 'active',
         kind: 'active',
         status: 'ACTIVE',
-        label: 'Aktuell',
-        title: 'Live-Catalog',
-        description:
-            'Diese Plan-Versionen sind aktuell für neue Onboardings und für Renewals nach Stichtag aktiv.',
+        label: msg.activeLabel,
+        title: msg.activeTitle,
+        description: msg.activeDescription,
         asOf: latestPublished ?? null,
         createdAt: null,
         publishedAt: latestPublished ?? null,
@@ -255,7 +266,9 @@ function buildActiveSnapshot<P extends PlanVersionRow>(
 function buildHistoricalSnapshots<P extends PlanVersionRow>(
     data: RawCatalogData<P>,
     sortPlansFn: (rows: ResolvedPlan<P>[]) => ResolvedPlan<P>[],
+    locale: SaLocale,
 ): CatalogSnapshot<P>[] {
+    const msg = planVersionsMessages[locale].catalog;
     const allPublishedAt = new Set<string>();
     for (const r of data.planVersions) if (r.publishedAt) allPublishedAt.add(r.publishedAt);
     if (allPublishedAt.size === 0) return [];
@@ -293,9 +306,9 @@ function buildHistoricalSnapshots<P extends PlanVersionRow>(
             id: `hist-${ts}`,
             kind: 'historical',
             status: 'ARCHIVED',
-            label: dateLabelDe(ts),
-            title: summarizeEvent(publishedAtThisEvent),
-            description: detailEvent(publishedAtThisEvent),
+            label: dateLabel(ts, locale),
+            title: summarizeEvent(publishedAtThisEvent, msg),
+            description: detailEvent(publishedAtThisEvent, msg),
             asOf: ts,
             createdAt: ts,
             publishedAt: ts,
@@ -308,19 +321,19 @@ function buildHistoricalSnapshots<P extends PlanVersionRow>(
     return out;
 }
 
-function summarizeEvent(rows: PlanVersionRow[]): string {
-    if (rows.length === 0) return 'Publish-Event';
+function summarizeEvent(rows: PlanVersionRow[], msg: CatalogMessages): string {
+    if (rows.length === 0) return msg.publishEvent;
     if (rows.length === 1) {
         const r = rows[0]!;
-        return `${r.planId} v${r.version} publiziert`;
+        return formatMessage(msg.publishEventSingle, { planId: r.planId, version: r.version });
     }
-    return `${rows.length} Versionen publiziert`;
+    return formatMessage(msg.publishEventMultiple, { count: rows.length });
 }
 
-function detailEvent(rows: PlanVersionRow[]): string {
+function detailEvent(rows: PlanVersionRow[], msg: CatalogMessages): string {
     if (rows.length === 0) return '';
     const note = rows[0]?.changeNote ?? '';
-    return note.length > 0 ? note : 'Snapshot rekonstruiert aus per-Entity-Versionen.';
+    return note.length > 0 ? note : msg.reconstructedSnapshot;
 }
 
 // ─── Sorting ─────────────────────────────────────────────────────────────
@@ -348,10 +361,11 @@ export function buildSnapshots<P extends PlanVersionRow>(
     data: RawCatalogData<P>,
     options: BuildSnapshotsOptions = {},
 ): CatalogSnapshot<P>[] {
+    const locale = options.locale ?? DEFAULT_SA_LOCALE;
     const sortPlansFn = sortPlansBy<P>(options.planSortOrder);
-    const drafts = buildDraftsSnapshot(data, sortPlansFn);
-    const active = buildActiveSnapshot(data, sortPlansFn);
-    const historical = buildHistoricalSnapshots(data, sortPlansFn);
+    const drafts = buildDraftsSnapshot(data, sortPlansFn, locale);
+    const active = buildActiveSnapshot(data, sortPlansFn, locale);
+    const historical = buildHistoricalSnapshots(data, sortPlansFn, locale);
 
     const out: CatalogSnapshot<P>[] = [drafts];
     if (active) out.push(active);
@@ -359,9 +373,7 @@ export function buildSnapshots<P extends PlanVersionRow>(
     return out;
 }
 
-export function listOpenDrafts<P extends PlanVersionRow>(
-    data: RawCatalogData<P>,
-): { plans: P[] } {
+export function listOpenDrafts<P extends PlanVersionRow>(data: RawCatalogData<P>): { plans: P[] } {
     return {
         plans: sortByPublishedDesc(data.planVersions).filter((r) => r.publishedAt === null),
     };

package/src/components/BundleVersionPublishDialog.vue

@@ -2,15 +2,17 @@
     <q-dialog v-model="open" persistent>
         <q-card style="min-width: 560px; max-width: 96vw">
             <q-card-section>
-                <div class="text-h6">BundleVersion publishen</div>
+                <div class="text-h6">{{ msg.publishDialog.title }}</div>
                 <p class="text-caption text-grey-7">
-                    Bundle <code>{{ bundleKey }}</code> · v{{ draft.version }}
+                    {{ msg.publishDialog.bundleLabel }} <code>{{ bundleKey }}</code> · v{{
+                        draft.version
+                    }}
                 </p>
             </q-card-section>
 
             <q-card-section v-if="!previewLoaded" class="bvpd__loading">
                 <q-spinner color="primary" size="32px" />
-                <span class="q-ml-sm">Diff zur Vorgänger-Version wird geladen …</span>
+                <span class="q-ml-sm">{{ msg.publishDialog.loadingDiff }}</span>
             </q-card-section>
 
             <q-card-section v-else class="bvpd__body">
@@ -19,7 +21,7 @@
                     <template #avatar>
                         <q-icon name="warning" color="warning" />
                     </template>
-                    <strong>{{ warnings.length }} Strict-Mode-Warnung(en)</strong>
+                    <strong>{{ strictWarningsText }}</strong>
                     <ul class="bvpd__list">
                         <li v-for="(w, i) in warnings" :key="i">
                             <code>{{ w.code }}</code>
@@ -32,14 +34,14 @@
                 </q-banner>
 
                 <div class="bvpd__validity">
-                    <div class="bvpd__label">Gültigkeit</div>
+                    <div class="bvpd__label">{{ common.validity }}</div>
                     <div class="bvpd__validity-grid">
                         <label class="bvpd__field">
-                            <span>Gültig ab</span>
+                            <span>{{ msg.fields.validFrom }}</span>
                             <input v-model="validFromInput" class="bvpd__input" type="date" />
                         </label>
                         <label class="bvpd__field">
-                            <span>Gültig bis</span>
+                            <span>{{ msg.fields.validUntil }}</span>
                             <input v-model="validUntilInput" class="bvpd__input" type="date" />
                         </label>
                     </div>
@@ -47,22 +49,19 @@
                 </div>
 
                 <div>
-                    <q-toggle
-                        v-model="allowZeroPrice"
-                        label="Preis 0,00 bewusst zulassen (kostenloses Bundle)"
-                    />
+                    <q-toggle v-model="allowZeroPrice" :label="msg.publishDialog.allowZeroPrice" />
                     <p class="bvpd__label" style="margin-top: 6px">
-                        Standard: Publish mit explizitem Preis 0,00 wird blockiert (Seed-Schutz).
+                        {{ msg.publishDialog.allowZeroPriceHint }}
                     </p>
                 </div>
 
                 <!-- Diff against the previous version -->
                 <div>
                     <div class="bvpd__label">
-                        Änderungen gegenüber
+                        {{ msg.publishDialog.changesVs }}
                         <span v-if="previousVersion"> v{{ previousVersion }} </span>
                         <span v-else class="text-grey-7">
-                            — keine Vorgänger-Version (Erst-Veröffentlichung)
+                            {{ msg.publishDialog.noPrevious }}
                         </span>
                     </div>
                     <q-banner
@@ -74,7 +73,7 @@
                         <template #avatar>
                             <q-icon name="info" color="grey-7" />
                         </template>
-                        Keine Änderungen — die Versionen sind inhaltlich gleich.
+                        {{ msg.publishDialog.noChanges }}
                     </q-banner>
                     <q-list v-else-if="changes.length > 0" bordered separator>
                         <q-item v-for="(c, i) in changes" :key="i">
@@ -106,14 +105,13 @@
                     <template #avatar>
                         <q-icon name="error" color="negative" />
                     </template>
-                    <strong>Regressive Änderung erkannt.</strong>
-                    Diese Version entfernt Features, senkt Quotas oder erhöht Preise. Vertragsschutz
-                    P3 (SPEC.md §6) verlangt Bestand-Opt-in. Publish erfordert deinen ausdrücklichen
-                    <code>force</code>-Confirm.
+                    <strong>{{ msg.publishDialog.regressionTitle }}</strong>
+                    {{ msg.publishDialog.regressionBody }}
+                    <code>force</code>{{ msg.publishDialog.regressionBodySuffix }}
                     <template #action>
                         <q-toggle
                             v-model="forceRegressive"
-                            label="Trotzdem publishen"
+                            :label="msg.publishDialog.forceRegressive"
                             color="negative"
                         />
                     </template>
@@ -121,11 +119,15 @@
             </q-card-section>
 
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="close" />
+                <q-btn flat :label="common.cancel" @click="close" />
                 <q-btn
                     unelevated
                     :color="isRegression ? 'negative' : 'positive'"
-                    :label="isRegression ? 'Regressiv publishen' : 'Publishen'"
+                    :label="
+                        isRegression
+                            ? msg.publishDialog.confirmRegressive
+                            : msg.publishDialog.confirm
+                    "
                     :loading="submitting"
                     :disable="!canSubmit"
                     @click="submit"
@@ -144,6 +146,9 @@ import type {
     VersionChange,
 } from '@saasicat/types';
 
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+
 // BundleVersionPublishDialog — confirm modal for publishing a draft version.
 // Shows the diff against the previous version (publishedChanges) and blocks
 // regressive versions without a forceRegressive confirm.
@@ -178,6 +183,9 @@ const emit = defineEmits<{
     (e: 'submitted', result: BundleVersionMutationResult): void;
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+
 const open = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),
@@ -194,10 +202,13 @@ const validUntilInput = ref('');
 
 const previousVersion = computed(() => props.previous?.version ?? null);
 const isRegression = computed(() => previewLoaded.value && !nonRegressive.value);
+const strictWarningsText = computed(() =>
+    formatMessage(msg.value.publishDialog.strictWarnings, { count: props.warnings.length }),
+);
 const validityError = computed<string | null>(() => {
-    if (!validFromInput.value) return 'Gültig ab ist Pflicht.';
+    if (!validFromInput.value) return msg.value.validation.validFromRequired;
     if (validUntilInput.value && validUntilInput.value <= validFromInput.value) {
-        return 'Gültig bis muss nach Gültig ab liegen.';
+        return msg.value.validation.validUntilAfterValidFrom;
     }
     return null;
 });

package/src/components/FeatureGate.vue

@@ -35,7 +35,7 @@
 // instead of returning `null`. (Strict mode comes later; currently default = lenient.)
 
 import { computed } from 'vue';
-import { useInjectedEntitlement } from '../entitlement-provider.js';
+import { useInjectedEntitlement } from '../vue/entitlement-provider.js';
 
 interface Props {
     /** A single FeatureKey or several as a logical OR. */