@saasicat/ui-vue 0.4.0 → 0.6.0

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,27 +167,19 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import type {
-    AdminManifest,
-    TenantActionDef,
-    TenantDto,
-    TenantListFilter,
-} from '@saasicat/types';
-import type { HttpClient } from '../types.js';
-import { useTenants } from '../use-tenants.js';
+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,
     type PlatformTenantActionTone,
-} from '../use-platform-tenant-actions.js';
+} from '../vue/use-platform-tenant-actions.js';
 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' },
     ];
 }
 

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>
@@ -106,7 +112,10 @@
 <script setup lang="ts">
 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.
 //
@@ -165,13 +174,19 @@ const props = withDefaults(
         submitDeactivate?: (id: string, reason: string, mfaCode?: string) => Promise<void>;
     }>(),
     {
-        title: 'Benutzer',
         requireMfaForResetPassword: false,
         requireMfaForDeactivate: false,
     },
 );
 
 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: '' });
@@ -254,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',
@@ -297,7 +312,7 @@ const baseColumns = [
                 : '—',
         align: 'left' as const,
     },
-];
+]);
 
 // Built-in default actions — APPENDED to consumer actions, not replaced.
 const bakedActions = computed<UserRowAction[]>(() => {
@@ -305,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),
@@ -314,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',
@@ -330,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',
@@ -369,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
     );
 }
 
@@ -387,7 +402,7 @@ async function runAction<R>(
             const result = await invoke('');
             onSuccess(result);
         } catch (err) {
-            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            notify('negative', errMsg(err));
         }
         return;
     }
@@ -402,11 +417,11 @@ 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;
-            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            notify('negative', errMsg(err));
             return;
         }
     }
@@ -416,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) => {
@@ -433,16 +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 {
-                    q.notify({
-                        type: 'positive',
-                        message: 'Passwort-Reset ausgelöst.',
-                        position: 'top',
-                    });
+                    notify('positive', msg.value.resetPassword.success);
                 }
                 void reload();
             },
@@ -454,23 +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),
             () => {
-                q.notify({
-                    type: 'positive',
-                    message: `${row.email} deaktiviert.`,
-                    position: 'top',
-                });
+                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>