@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/pages-standard/PromoCodesPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-promo-codes">
         <header class="sa-page-head">
             <div>
-                <h1 class="sa-page-head__title">Promo-Codes</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">
@@ -12,7 +12,7 @@
                         unelevated
                         color="primary"
                         icon="add"
-                        :label="createLabel"
+                        :label="resolvedCreateLabel"
                         @click="showCreate = true"
                     />
                 </slot>
@@ -41,7 +41,7 @@
                 v-model="filter.search"
                 outlined
                 dense
-                label="Suche (Code)"
+                :label="msg.list.searchLabel"
                 clearable
                 @update:model-value="reload"
             />
@@ -52,7 +52,7 @@
                 emit-value
                 map-options
                 clearable
-                label="Status"
+                :label="common.status"
                 :options="statusOptions"
                 @update:model-value="reload"
             />
@@ -138,6 +138,9 @@ export function computePlanColors(
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useQuasar } from 'quasar';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { useSuperAdminNotify } from '../quasar/notify.js';
 import PromoCodeCreateDialog from '../components/dialogs/PromoCodeCreateDialog.vue';
 import PromoCodeEditDialog, {
     type PromoCodeEditRow,
@@ -209,12 +212,17 @@ const props = withDefaults(
     }>(),
     {
         statusOptions: () => ['ACTIVE', 'PAUSED', 'EXHAUSTED', 'EXPIRED'],
-        createLabel: 'Promo-Code anlegen',
         planOptions: () => [],
     },
 );
 
+const msg = useSaMessages('promos');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+const resolvedCreateLabel = computed(() => props.createLabel ?? msg.value.createAction);
+
 const q = useQuasar();
+const notify = useSuperAdminNotify();
 const rows = ref<PromoRow[]>([]);
 const loading = ref(false);
 const filter = reactive({ search: '', status: null as string | null });
@@ -265,23 +273,23 @@ const statTiles = computed<
         if (c) counts[c]++;
     }
     return [
-        { id: 'all', label: 'Alle', count: rows.value.length },
+        { id: 'all', label: common.value.all, count: rows.value.length },
         {
             id: 'active',
-            label: 'Aktiv',
+            label: common.value.active,
             count: counts.active,
             tone: 'positive',
-            hint: 'einlösbar',
+            hint: msg.value.list.hintRedeemable,
         },
         {
             id: 'scheduled',
-            label: 'Geplant',
+            label: msg.value.list.tileScheduled,
             count: counts.scheduled,
             tone: 'info',
-            hint: 'startet künftig',
+            hint: msg.value.list.hintStartsLater,
         },
-        { id: 'paused', label: 'Pausiert', count: counts.paused, tone: 'warn' },
-        { id: 'expired', label: 'Abgelaufen', count: counts.expired, tone: 'muted' },
+        { id: 'paused', label: msg.value.list.tilePaused, count: counts.paused, tone: 'warn' },
+        { id: 'expired', label: common.value.expired, count: counts.expired, tone: 'muted' },
     ];
 });
 
@@ -303,36 +311,41 @@ function onStatusTileClick(id: StatusFilter): void {
     }
 }
 
-const baseColumns = [
+const baseColumns = computed(() => [
     {
         name: 'code',
-        label: 'Code',
+        label: msg.value.list.columnCode,
         field: 'code',
         align: 'left' as const,
         sortable: true,
     },
-    { name: 'valueType', label: 'Typ', field: 'valueType', align: 'left' as const },
-    { name: 'value', label: 'Wert', field: 'value', align: 'right' as const },
-    { name: 'status', label: 'Status', field: 'status', align: 'left' as const },
+    {
+        name: 'valueType',
+        label: common.value.type,
+        field: 'valueType',
+        align: 'left' as const,
+    },
+    { name: 'value', label: msg.value.list.columnValue, field: 'value', align: 'right' as const },
+    { name: 'status', label: common.value.status, field: 'status', align: 'left' as const },
     {
         name: 'redemptions',
-        label: 'Einlösungen',
+        label: msg.value.list.columnRedemptions,
         field: (r: PromoRow) => `${r.redemptionsCount} / ${r.maxRedemptions ?? '∞'}`,
         align: 'right' as const,
     },
     {
         name: 'campaign',
-        label: 'Kampagne',
+        label: msg.value.list.columnCampaign,
         field: (r: PromoRow) => r.campaignTag ?? '—',
         align: 'left' as const,
     },
     {
         name: 'validUntil',
-        label: 'Gültig bis',
+        label: msg.value.list.columnValidUntil,
         field: (r: PromoRow) => formatDate(r.validUntil) ?? '—',
         align: 'left' as const,
     },
-];
+]);
 
 // Built-in default actions — APPENDED to the consumer actions, not replacing them.
 const bakedActions = computed<PromoRowAction[]>(() => {
@@ -340,7 +353,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableEdit && props.submitEdit) {
         out.push({
             id: 'edit',
-            label: 'Bearbeiten',
+            label: common.value.edit,
             icon: 'edit',
             color: 'primary',
             handler: (row) => openEdit(row),
@@ -349,7 +362,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableStatusToggle && props.submitEdit) {
         out.push({
             id: 'pause',
-            label: 'Pausieren',
+            label: msg.value.list.actionPause,
             icon: 'pause',
             color: 'warning',
             condition: (row) => row.status === 'ACTIVE',
@@ -357,7 +370,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
         });
         out.push({
             id: 'activate',
-            label: 'Aktivieren',
+            label: msg.value.list.actionActivate,
             icon: 'play_arrow',
             color: 'primary',
             condition: (row) => row.status === 'PAUSED',
@@ -367,7 +380,7 @@ const bakedActions = computed<PromoRowAction[]>(() => {
     if (props.enableDelete && props.submitDelete) {
         out.push({
             id: 'delete',
-            label: 'Löschen',
+            label: common.value.delete,
             icon: 'delete',
             color: 'negative',
             handler: (row) => onDeleteClick(row),
@@ -382,7 +395,7 @@ const mergedActions = computed<readonly PromoRowAction[]>(() => [
 ]);
 
 const effectiveColumns = computed(() => {
-    const cols = [...baseColumns];
+    const cols = [...baseColumns.value];
     if (mergedActions.value.length > 0) {
         cols.push({
             name: 'actions',
@@ -490,14 +503,10 @@ async function onPatch(row: PromoRow, data: PromoCodeUpdatePayload): Promise<voi
     if (!props.submitEdit) return;
     try {
         await props.submitEdit(row.id, data);
-        q.notify({
-            type: 'positive',
-            message: `${row.code} → ${data.status}`,
-            position: 'top',
-        });
+        notify('positive', `${row.code} → ${data.status}`);
         await reload();
     } catch (err) {
-        q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+        notify('negative', errMsg(err));
     }
 }
 
@@ -505,40 +514,28 @@ function onDeleteClick(row: PromoRow): void {
     if (!props.submitDelete) return;
     const submit = props.submitDelete;
     q.dialog({
-        title: `Promo-Code "${row.code}" löschen`,
-        message: 'Soft-Delete via Status=EXPIRED. Bestehende Redemptions bleiben.',
-        cancel: 'Abbrechen',
-        ok: { label: 'Löschen', color: 'negative' },
+        title: formatMessage(msg.value.list.deleteTitle, { code: row.code }),
+        message: msg.value.list.deleteMessage,
+        cancel: common.value.cancel,
+        ok: { label: common.value.delete, color: 'negative' },
     }).onOk(async () => {
         try {
             await submit(row.id);
-            q.notify({
-                type: 'positive',
-                message: `${row.code} gelöscht.`,
-                position: 'top',
-            });
+            notify('positive', formatMessage(msg.value.list.deletedNotice, { code: row.code }));
             await reload();
         } catch (err) {
-            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            notify('negative', errMsg(err));
         }
     });
 }
 
 function onCreated(): void {
-    q.notify({
-        type: 'positive',
-        message: 'Promo-Code angelegt.',
-        position: 'top',
-    });
+    notify('positive', msg.value.list.createdNotice);
     void reload();
 }
 
 function onUpdated(): void {
-    q.notify({
-        type: 'positive',
-        message: 'Promo-Code aktualisiert.',
-        position: 'top',
-    });
+    notify('positive', msg.value.list.updatedNotice);
     void reload();
 }
 
@@ -546,14 +543,14 @@ function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
         (err as Error)?.message ??
-        'Aktion fehlgeschlagen'
+        msg.value.list.actionFailed
     );
 }
 
 function formatDate(iso: string | Date | null | undefined): string | null {
     if (!iso) return null;
     try {
-        return new Date(iso).toLocaleDateString('de-DE', {
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/SubscriptionsPage.vue

@@ -2,7 +2,7 @@
     <div class="sa-subscriptions">
         <header class="sa-subscriptions__head">
             <div>
-                <h1 class="sa-subscriptions__title">Abonnements</h1>
+                <h1 class="sa-subscriptions__title">{{ msg.subscriptions.title }}</h1>
                 <p v-if="subtitle" class="sa-subscriptions__sub">{{ subtitle }}</p>
             </div>
             <slot name="head-actions" />
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: subscriptions (minimal). Apps pass
 // `loadSubscriptions` + optional `columns` through — default columns show
@@ -60,39 +61,43 @@ const props = withDefaults(
     {},
 );
 
+const msg = useSaMessages('tenants');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
 const rows = ref<SubscriptionRow[]>([]);
 const loading = ref(false);
 
-const defaultColumns: Column[] = [
+const defaultColumns = computed<Column[]>(() => [
     {
         name: 'tenant',
-        label: 'Mandant',
+        label: msg.value.tenant,
         field: (r) => r.tenant?.name ?? r.tenant?.slug ?? r.tenantSlug ?? '—',
         align: 'left',
         sortable: true,
     },
     {
         name: 'plan',
-        label: 'Plan',
+        label: msg.value.plan,
         field: (r) => r.plan ?? r.planId ?? '—',
         align: 'left',
     },
     {
         name: 'status',
-        label: 'Status',
+        label: common.value.status,
         field: (r) => r.status ?? '—',
         align: 'left',
     },
     {
         name: 'periodEndsAt',
-        label: 'Endet',
+        label: msg.value.subscriptions.columnEndsAt,
         field: (r) => formatDate(r.periodEndsAt) ?? '∞',
         align: 'left',
     },
-];
+]);
 
 const effectiveColumns = computed<Column[]>(() =>
-    props.columns ? [...props.columns] : defaultColumns,
+    props.columns ? [...props.columns] : defaultColumns.value,
 );
 
 async function reload() {
@@ -112,7 +117,7 @@ onMounted(reload);
 function formatDate(iso: string | null | undefined): string | null {
     if (!iso) return null;
     try {
-        return new Date(iso).toLocaleDateString('de-DE', {
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -20,30 +20,32 @@
                 </div>
             </div>
 
-            <h1 class="sa-login-title">Anmelden</h1>
+            <h1 class="sa-login-title">{{ msg.login.signIn }}</h1>
             <p v-if="subtitle" class="sa-login-subtitle">{{ subtitle }}</p>
 
             <q-form @submit.prevent="handleSubmit" class="sa-login-form">
                 <q-input
                     v-model="form.email"
-                    label="E-Mail"
+                    :label="msg.emailLabel"
                     type="email"
+                    autocomplete="username"
                     outlined
                     dense
                     autofocus
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || 'Bitte gültige E-Mail']"
+                    :rules="[(v: string) => /\S+@\S+\.\S+/.test(v) || msg.invalidEmail]"
                 />
                 <q-input
                     v-model="form.password"
-                    label="Passwort"
+                    :label="msg.passwordLabel"
                     :type="showPw ? 'text' : 'password'"
+                    autocomplete="current-password"
                     outlined
                     dense
                     :disable="loading"
                     class="q-mb-sm"
-                    :rules="[(v: string) => v.length > 0 || 'Passwort ist Pflicht']"
+                    :rules="[(v: string) => v.length > 0 || msg.login.passwordRequired]"
                 >
                     <template #append>
                         <q-icon
@@ -62,7 +64,7 @@
                     unelevated
                     color="primary"
                     icon="login"
-                    label="Anmelden"
+                    :label="msg.login.signIn"
                     :loading="loading"
                     :disable="!canSubmit"
                     class="full-width q-mt-sm"
@@ -71,7 +73,8 @@
             </q-form>
 
             <div v-if="devHint" class="sa-login-hint">
-                Test-Account: <code>{{ devHint.email }}</code> / <code>{{ devHint.password }}</code>
+                {{ msg.login.devHintLabel }} <code>{{ devHint.email }}</code> /
+                <code>{{ devHint.password }}</code>
             </div>
         </div>
 
@@ -86,14 +89,15 @@ import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import type { SetupStatusResponse } from '@saasicat/types';
 
-import { usePublicBoot } from '../use-public-boot.js';
+import { usePublicBoot } from '../vue/use-public-boot.js';
 import {
     useSuperAdminBrand,
     useSuperAdminEndpoints,
     useSuperAdminHttp,
     useSuperAdminLoginAdapter,
-} from '../use-super-admin-context.js';
-import { getJson } from '../http-json.js';
+} from '../vue/use-super-admin-context.js';
+import { getJson } from '../client/http-json.js';
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
 import SuperAdminSetupWizard from './SuperAdminSetupWizard.vue';
 
 interface Props {
@@ -107,6 +111,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const router = useRouter();
+const msg = useSaMessages('shell');
 const brand = useSuperAdminBrand();
 const endpoints = useSuperAdminEndpoints();
 const adapter = useSuperAdminLoginAdapter();
@@ -161,11 +166,9 @@ function describeError(
     result: Extract<Awaited<ReturnType<typeof adapter.login>>, { ok: false }>,
 ): string {
     if (result.message) return result.message;
-    if (result.code === 'BAD_CREDENTIALS') return 'E-Mail oder Passwort falsch.';
-    if (result.code === 'NOT_SUPER_ADMIN') {
-        return 'Dieser Account hat keine SUPER_ADMIN-Rolle. Bitte Tenant-Frontend nutzen.';
-    }
-    return 'Anmeldung fehlgeschlagen.';
+    if (result.code === 'BAD_CREDENTIALS') return msg.value.login.errorBadCredentials;
+    if (result.code === 'NOT_SUPER_ADMIN') return msg.value.login.errorNotSuperAdmin;
+    return msg.value.login.errorFailed;
 }
 
 async function handleSubmit(): Promise<void> {
@@ -182,7 +185,7 @@ async function handleSubmit(): Promise<void> {
     } catch (err) {
         const e = err as { response?: { data?: { message?: string; code?: string } } };
         errorMessage.value =
-            e.response?.data?.message ?? e.response?.data?.code ?? 'Anmeldung fehlgeschlagen.';
+            e.response?.data?.message ?? e.response?.data?.code ?? msg.value.login.errorFailed;
     } finally {
         loading.value = false;
     }