@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/TenantDetailPage.vue

@@ -6,13 +6,13 @@
                     flat
                     dense
                     icon="arrow_back"
-                    :label="backLabel"
+                    :label="labels.back"
                     :to="backRoute"
                     class="sa-tenant-detail__back"
                 />
-                <h1 class="sa-page-head__title">{{ data?.name ?? titleLabel }}</h1>
+                <h1 class="sa-page-head__title">{{ data?.name ?? labels.title }}</h1>
                 <p v-if="data" class="sa-page-head__sub">
-                    {{ slugLabel }}: <code>{{ data.slug }}</code>
+                    {{ labels.slug }}: <code>{{ data.slug }}</code>
                 </p>
             </div>
             <slot name="header-actions" :data="data" :reload="load" />
@@ -20,7 +20,7 @@
 
         <div class="sa-tenant-detail__body">
             <div v-if="loading" class="sa-tenant-detail__state">
-                <q-spinner size="32px" /> wird geladen…
+                <q-spinner size="32px" /> {{ common.loading }}
             </div>
 
             <template v-else-if="data">
@@ -28,7 +28,7 @@
                 <div class="sa-card q-mb-md">
                     <header class="sa-tenant-detail__card-head">
                         <div>
-                            <h2 class="sa-card__title">{{ stammdatenLabel }}</h2>
+                            <h2 class="sa-card__title">{{ labels.masterData }}</h2>
                             <p v-if="stammdatenSub" class="sa-tenant-detail__card-sub">
                                 {{ stammdatenSub }}
                             </p>
@@ -49,24 +49,24 @@
                     </header>
                     <slot name="stammdaten" :data="data">
                         <div class="sa-tenant-detail__grid">
-                            <KvBlock :label="planLabel" :value="data.subscription?.plan ?? '—'" />
+                            <KvBlock :label="labels.plan" :value="data.subscription?.plan ?? '—'" />
                             <KvBlock
-                                :label="statusLabel"
+                                :label="labels.status"
                                 :value="data.subscription?.status ?? '—'"
                             />
                             <KvBlock
-                                :label="pilotLabel"
-                                :value="data.subscription?.isPilot ? 'ja' : 'nein'"
+                                :label="labels.pilot"
+                                :value="data.subscription?.isPilot ? common.yes : common.no"
                             />
                             <KvBlock
-                                :label="trialEndLabel"
+                                :label="labels.trialEnd"
                                 :value="formatDate(data.subscription?.trialEndsAt)"
                             />
                             <KvBlock
-                                :label="pilotEndLabel"
+                                :label="labels.pilotEnd"
                                 :value="formatDate(data.subscription?.pilotEndsAt)"
                             />
-                            <KvBlock v-if="data.vatId" :label="vatIdLabel" :value="data.vatId" />
+                            <KvBlock v-if="data.vatId" :label="labels.vatId" :value="data.vatId" />
                             <slot name="extra-stammdaten" :data="data" />
                         </div>
                     </slot>
@@ -74,7 +74,7 @@
 
                 <!-- Usage -->
                 <div v-if="verbrauchFields.length > 0" class="sa-card q-mb-md">
-                    <h3 class="sa-card__title">{{ verbrauchLabel }}</h3>
+                    <h3 class="sa-card__title">{{ labels.usage }}</h3>
                     <div class="sa-tenant-detail__grid">
                         <KvBlock
                             v-for="(field, i) in verbrauchFields"
@@ -87,11 +87,11 @@
 
                 <!-- Users -->
                 <div v-if="showUsers && data.users" class="sa-card q-mb-md">
-                    <h3 class="sa-card__title">{{ usersLabel }}</h3>
+                    <h3 class="sa-card__title">{{ labels.users }}</h3>
                     <q-table
                         flat
                         :rows="data.users"
-                        :columns="userColumns ?? DEFAULT_USER_COLUMNS"
+                        :columns="userColumns ?? defaultUserColumns"
                         row-key="id"
                         :pagination="{ rowsPerPage: 0 }"
                         hide-pagination
@@ -127,9 +127,11 @@ import type { RouteLocationRaw } from 'vue-router';
 import type { QTableColumn } from 'quasar';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import type { AdminManifest, TenantActionDef, TenantDto } from '@saasicat/types';
+import { formatMessage } from '../client/i18n/format.js';
 import KvBlock from '../components/KvBlock.vue';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import TenantActionConfirmDialog from '../components/TenantActionConfirmDialog.vue';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import { useTenantActionFlow } from '../vue/use-tenant-action-flow.js';
 
 export interface TenantDetailData {
@@ -185,21 +187,29 @@ const props = withDefaults(
     {
         verbrauchFields: () => [],
         showUsers: true,
-        backLabel: 'Mandanten-Liste',
-        titleLabel: 'Mandant',
-        slugLabel: 'Slug',
-        stammdatenLabel: 'Stammdaten',
-        planLabel: 'Plan',
-        statusLabel: 'Status',
-        pilotLabel: 'Pilot',
-        trialEndLabel: 'Trial-Ende',
-        pilotEndLabel: 'Pilot-Ende',
-        vatIdLabel: 'USt-IdNr.',
-        verbrauchLabel: 'Verbrauch',
-        usersLabel: 'User',
     },
 );
 
+const msg = useSaMessages('tenants');
+const common = useSaMessages('common');
+
+// Every label stays overridable via props — only the German literals moved
+// into the catalog.
+const labels = computed(() => ({
+    back: props.backLabel ?? msg.value.detail.backToList,
+    title: props.titleLabel ?? msg.value.tenant,
+    slug: props.slugLabel ?? msg.value.detail.slug,
+    masterData: props.stammdatenLabel ?? msg.value.detail.masterData,
+    plan: props.planLabel ?? msg.value.plan,
+    status: props.statusLabel ?? common.value.status,
+    pilot: props.pilotLabel ?? msg.value.detail.pilot,
+    trialEnd: props.trialEndLabel ?? msg.value.detail.trialEnd,
+    pilotEnd: props.pilotEndLabel ?? msg.value.detail.pilotEnd,
+    vatId: props.vatIdLabel ?? msg.value.detail.vatId,
+    usage: props.verbrauchLabel ?? msg.value.detail.usage,
+    users: props.usersLabel ?? msg.value.detail.users,
+}));
+
 const notify = useSuperAdminNotify();
 const data = ref<TenantDetailData | null>(null);
 const loading = ref(false);
@@ -250,7 +260,10 @@ function showMfaDialog(def: TenantActionDef, ctx: { row: TenantDto }): Promise<s
     return new Promise((resolve) => {
         mfaState.value = {
             show: true,
-            description: `${def.label} — Tenant „${ctx.row.name}". TOTP-Code aus Authenticator eingeben.`,
+            description: formatMessage(msg.value.actions.mfaDescription, {
+                action: def.label,
+                tenant: ctx.row.name,
+            }),
             error: '',
         };
         pendingMfaResolve = (code) => {
@@ -347,34 +360,35 @@ function toneColor(actionKey: string): string {
     return 'primary';
 }
 
-const DEFAULT_USER_COLUMNS: QTableColumn[] = [
-    { name: 'email', label: 'E-Mail', field: 'email', align: 'left' },
+const defaultUserColumns = computed<QTableColumn[]>(() => [
+    { name: 'email', label: msg.value.detail.userEmail, field: 'email', align: 'left' },
     {
         name: 'name',
-        label: 'Name',
+        label: common.value.name,
         field: (r: unknown) => {
             const row = r as Record<string, unknown>;
             return `${row.firstName ?? ''} ${row.lastName ?? ''}`.trim();
         },
         align: 'left',
     },
-    { name: 'role', label: 'Rolle', field: 'role', align: 'left' },
+    { name: 'role', label: msg.value.detail.userRole, field: 'role', align: 'left' },
     {
         name: 'status',
-        label: 'Status',
-        field: (r: unknown) => ((r as Record<string, unknown>).isActive ? 'aktiv' : 'deaktiviert'),
+        label: common.value.status,
+        field: (r: unknown) =>
+            (r as Record<string, unknown>).isActive ? common.value.active : common.value.inactive,
         align: 'left',
     },
     {
         name: 'lastLogin',
-        label: 'Letzter Login',
+        label: msg.value.detail.userLastLogin,
         field: (r: unknown) => {
             const v = (r as Record<string, unknown>).lastLoginAt;
             return v ? String(v).slice(0, 10) : '—';
         },
         align: 'left',
     },
-];
+]);
 </script>
 
 <style scoped>

package/src/pages-standard/TenantsPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-tenants">
         <header class="sa-tenants__head">
             <div>
-                <h1 class="sa-tenants__title">Mandanten</h1>
+                <h1 class="sa-tenants__title">{{ msg.list.title }}</h1>
                 <p v-if="subtitle" class="sa-tenants__sub">{{ subtitle }}</p>
             </div>
         </header>
@@ -12,7 +12,7 @@
                 <q-icon name="search" size="15px" />
                 <input
                     v-model="searchInput"
-                    placeholder="Slug oder Name …"
+                    :placeholder="msg.list.searchPlaceholder"
                     @input="reloadDebounced"
                 />
                 <button v-if="searchInput" class="sa-tenants__clear" @click="onClearSearch">
@@ -20,8 +20,8 @@
                 </button>
             </div>
             <select v-model="statusFilter" class="sa-tenants__select" @change="applyFilter">
-                <option :value="null">Alle Aktiv-Status</option>
-                <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">
+                <option :value="null">{{ msg.list.allStatuses }}</option>
+                <option v-for="opt in resolvedStatusOptions" :key="opt.value" :value="opt.value">
                     {{ opt.label }}
                 </option>
             </select>
@@ -31,14 +31,14 @@
                 class="sa-tenants__select"
                 @change="applyFilter"
             >
-                <option :value="null">{{ planFilterLabel }}</option>
+                <option :value="null">{{ resolvedPlanFilterLabel }}</option>
                 <option v-for="p in planOptions" :key="p" :value="p">{{ p }}</option>
             </select>
             <slot name="filters-extra" />
         </div>
 
         <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 class="sa-tenants__card">
@@ -46,11 +46,13 @@
                 <table>
                     <thead>
                         <tr>
-                            <th>Mandant</th>
-                            <th v-if="showPlanColumn">{{ planColumnLabel }}</th>
-                            <th>Status</th>
-                            <th v-if="usageFields.length > 0" class="num">Verbrauch</th>
-                            <th class="num">Angelegt</th>
+                            <th>{{ msg.tenant }}</th>
+                            <th v-if="showPlanColumn">{{ resolvedPlanColumnLabel }}</th>
+                            <th>{{ common.status }}</th>
+                            <th v-if="usageFields.length > 0" class="num">
+                                {{ msg.list.columnUsage }}
+                            </th>
+                            <th class="num">{{ msg.list.columnCreatedAt }}</th>
                             <th v-if="hasActions" class="num"></th>
                         </tr>
                     </thead>
@@ -100,7 +102,7 @@
                                 </div>
                             </td>
                             <td class="num sa-tenants__mono">
-                                {{ formatDateDe(usageStr(row, 'createdAt')) }}
+                                {{ formatCreatedAt(row) }}
                             </td>
                             <td v-if="hasActions" class="num sa-tenants__actions">
                                 <slot name="row-actions" :row="row" :actions="visibleActions(row)">
@@ -127,17 +129,16 @@
                 </table>
                 <div v-if="items.length === 0 && !loading" class="sa-tenants__empty">
                     <q-icon name="search_off" size="32px" />
-                    <div>Keine Mandanten mit diesen Filtern.</div>
+                    <div>{{ msg.list.empty }}</div>
                 </div>
                 <div v-if="loading" class="sa-tenants__loading">
-                    <q-spinner size="20px" /> wird geladen…
+                    <q-spinner size="20px" /> {{ common.loading }}
                 </div>
             </div>
         </div>
 
         <footer class="sa-tenants__foot">
-            {{ total }} Mandanten · Seite {{ page }} /
-            {{ Math.max(1, Math.ceil(total / pageSize)) }}
+            {{ paginationLabel }}
         </footer>
 
         <!-- Manifest-Driven Action Flow: only mounted when the `manifest` prop
@@ -166,13 +167,10 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import type {
-    AdminManifest,
-    TenantActionDef,
-    TenantDto,
-    TenantListFilter,
-} from '@saasicat/types';
+import type { AdminManifest, TenantActionDef, TenantDto, TenantListFilter } from '@saasicat/types';
 import type { HttpClient } from '../client/types.js';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useTenants } from '../vue/use-tenants.js';
 import {
     usePlatformTenantActions,
@@ -181,12 +179,7 @@ import {
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import TenantActionConfirmDialog from '../components/TenantActionConfirmDialog.vue';
 import StatusPill, { type PillTone } from './tenants/StatusPill.vue';
-import {
-    DEFAULT_PLAN_ACCENTS,
-    formatDateDe,
-    planAccent,
-    tenantInitials,
-} from './tenants/format.js';
+import { DEFAULT_PLAN_ACCENTS, formatDate, planAccent, tenantInitials } from './tenants/format.js';
 
 // Platform standard page: tenant list.
 //
@@ -196,7 +189,7 @@ import {
 //
 // App-specific bits via props:
 //   - `subtitle`             : header subtitle
-//   - `statusOptions`        : filter dropdown values (default: Aktiv/Suspendiert)
+//   - `statusOptions`        : filter dropdown values (default: active/suspended)
 //   - `planOptions`          : filter dropdown values for plan; omitted = hides dropdown
 //   - `planAccents`          : plan id → accent color (avatar + plan dot)
 //   - `planLabelField`       : field for the plan display (e.g. "plan" or "bundleKey")
@@ -331,12 +324,6 @@ const props = withDefaults(
     }>(),
     {
         pageSize: 25,
-        statusOptions: () => [
-            { value: 'ACTIVE', label: 'Aktiv' },
-            { value: 'INACTIVE', label: 'Suspendiert' },
-        ],
-        planFilterLabel: 'Alle Pläne',
-        planColumnLabel: 'Plan',
         showPlanColumn: true,
         planLabelField: 'plan',
         planAccents: () => DEFAULT_PLAN_ACCENTS,
@@ -345,6 +332,20 @@ const props = withDefaults(
     },
 );
 
+const msg = useSaMessages('tenants');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
+const resolvedStatusOptions = computed<ReadonlyArray<{ value: string; label: string }>>(
+    () =>
+        props.statusOptions ?? [
+            { value: 'ACTIVE', label: common.value.active },
+            { value: 'INACTIVE', label: msg.value.list.suspended },
+        ],
+);
+const resolvedPlanFilterLabel = computed(() => props.planFilterLabel ?? msg.value.list.allPlans);
+const resolvedPlanColumnLabel = computed(() => props.planColumnLabel ?? msg.value.plan);
+
 const filter = ref<TenantListFilter>({});
 const searchInput = ref('');
 const statusFilter = ref<string | null>(null);
@@ -360,6 +361,14 @@ const { items, page, total, loading, error, goToPage, setPageSize } = list;
 
 setPageSize(props.pageSize);
 
+const paginationLabel = computed(() =>
+    formatMessage(msg.value.list.pagination, {
+        total: total.value,
+        page: page.value,
+        pages: Math.max(1, Math.ceil(total.value / props.pageSize)),
+    }),
+);
+
 let searchTimer: ReturnType<typeof setTimeout> | null = null;
 function reloadDebounced(): void {
     if (searchTimer) clearTimeout(searchTimer);
@@ -427,7 +436,7 @@ if (manifestFlow && typeof window !== 'undefined') {
             if (orphans.length > 0) {
                 // eslint-disable-next-line no-console
                 console.warn(
-                    '[PlatformTenantsPage] Manifest-Actions ohne Handler in createSuperAdminApp({ actions }):',
+                    '[PlatformTenantsPage] Manifest actions without a handler in createSuperAdminApp({ actions }):',
                     orphans,
                 );
             }
@@ -449,8 +458,8 @@ const combinedActions = computed<TenantRowAction[]>(() => {
             if (typeof window !== 'undefined') {
                 // eslint-disable-next-line no-console
                 console.warn(
-                    `[PlatformTenantsPage] Custom-Action "${a.id}" (actionKey="${a.actionKey}") ` +
-                        `kollidiert mit Manifest-Action — Manifest gewinnt.`,
+                    `[PlatformTenantsPage] Custom action "${a.id}" (actionKey="${a.actionKey}") ` +
+                        `collides with a manifest action — the manifest wins.`,
                 );
             }
             return false;
@@ -488,14 +497,18 @@ function usageStr(row: TenantRow, key: string): string | undefined {
     return typeof v === 'string' ? v : undefined;
 }
 
+function formatCreatedAt(row: TenantRow): string {
+    return formatDate(usageStr(row, 'createdAt'), intlLocale.value);
+}
+
 function resolvedPills(row: TenantRow): StatusPillDef[] {
     if (props.pillsForRow) return props.pillsForRow(row);
-    // Default: only Aktiv/Suspendiert.
+    // Default: only active/suspended.
     const isActive = (row as TenantDto).isActive;
     return [
         isActive
-            ? { label: 'Aktiv', icon: 'check_circle', tone: 'positive' }
-            : { label: 'Suspendiert', icon: 'block', tone: 'negative' },
+            ? { label: common.value.active, icon: 'check_circle', tone: 'positive' }
+            : { label: msg.value.list.suspended, icon: 'block', tone: 'negative' },
     ];
 }