@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/components/plan-detail/PlanAuditLog.vue

@@ -2,12 +2,12 @@
     <section class="pd-panel pd-audit">
         <div class="pd-panel-head">
             <div style="min-width: 0">
-                <h3 class="pd-panel-title">Audit-Log</h3>
-                <div class="pd-panel-sub">Letzte Änderungen an diesem Plan</div>
+                <h3 class="pd-panel-title">{{ msg.auditLog.title }}</h3>
+                <div class="pd-panel-sub">{{ msg.auditLog.subtitle }}</div>
             </div>
         </div>
         <div class="pd-audit-body">
-            <div v-if="loadingAudit" class="pd-diff-empty">Lade Audit-Log…</div>
+            <div v-if="loadingAudit" class="pd-diff-empty">{{ msg.auditLog.loading }}</div>
             <div v-for="a in auditRows" :key="a.id" class="pd-audit-row">
                 <span :class="['pd-audit-dot', `pd-audit-${auditKind(a.action)}`]" />
                 <span class="pd-audit-when">{{ formatAuditDate(a.createdAt) }}</span>
@@ -20,6 +20,8 @@
 </template>
 
 <script setup lang="ts">
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { AuditRow } from './types.js';
 
 defineProps<{
@@ -27,6 +29,9 @@ defineProps<{
     loadingAudit: boolean;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { intlLocale } = useSuperAdminI18n();
+
 function auditKind(action: string): string {
     const a = action.toLowerCase();
     if (a.includes('publish')) return 'publish';
@@ -51,9 +56,9 @@ function formatAuditDate(iso: string): string {
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())) return iso;
     const isToday = d.toDateString() === new Date().toDateString();
-    const time = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    const time = d.toLocaleTimeString(intlLocale.value, { hour: '2-digit', minute: '2-digit' });
     return isToday
-        ? `heute · ${time}`
-        : `${d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' })} · ${time}`;
+        ? formatMessage(msg.value.auditLog.today, { time })
+        : `${d.toLocaleDateString(intlLocale.value, { day: '2-digit', month: 'short' })} · ${time}`;
 }
 </script>

package/src/components/plan-detail/PlanDetail.vue

@@ -77,11 +77,9 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import {
-    isVersionEditable,
-    type PlanRow,
-    type PlanVersionRow,
-} from '@saasicat/types';
+import { isVersionEditable, type PlanRow, type PlanVersionRow } from '@saasicat/types';
+import { formatCurrency } from '../../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import PlanAuditLog from './PlanAuditLog.vue';
 import PlanDetailHeader from './PlanDetailHeader.vue';
 import PlanDetailKpis from './PlanDetailKpis.vue';
@@ -143,6 +141,9 @@ const emit = defineEmits<{
     (e: 'terminate', versionId: string, endsAt: string): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { locale, intlLocale } = useSuperAdminI18n();
+
 // ── Status / Selection ──────────────────────────────────────────────
 function statusOf(v: PlanVersionRow): PlanVersionStatus {
     if (v.publishedAt === null) return 'draft';
@@ -201,7 +202,7 @@ const timelineTicks = computed(() => {
     for (const v of chronological.value) {
         if (v.validFrom) ticks.push(v.validFrom.slice(0, 7));
     }
-    ticks.push('jetzt');
+    ticks.push(msg.value.versions.timelineNow);
     return ticks;
 });
 
@@ -209,9 +210,7 @@ const timelineTicks = computed(() => {
 function formatMoney(raw: string | number): string {
     const num = typeof raw === 'string' ? Number(raw) : raw;
     if (!Number.isFinite(num)) return String(raw);
-    if (num === 0) return '0 €';
-    if (Number.isInteger(num)) return `${num} €`;
-    return `${num.toFixed(2).replace('.', ',')} €`;
+    return formatCurrency(num, locale.value);
 }
 function quotasOf(v: PlanVersionRow): Record<string, number> {
     if (v.quotas && Object.keys(v.quotas).length > 0) return v.quotas;
@@ -290,7 +289,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'af-' + f,
             kind: 'add',
             sign: '+',
-            tag: 'neu',
+            tag: msg.value.diff.tagNew,
             label: featureLabel(f),
             key: f,
         });
@@ -299,7 +298,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'rf-' + f,
             kind: 'rm',
             sign: '−',
-            tag: 'entfernt',
+            tag: msg.value.diff.tagRemoved,
             label: featureLabel(f),
             key: f,
         });
@@ -309,7 +308,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'cq-' + q.key,
             kind: 'mod',
             sign: '~',
-            tag: 'geändert',
+            tag: msg.value.diff.tagChanged,
             label: quotaLabel(q.key),
             key: q.key,
             from: `${q.from} ${u}`.trim(),
@@ -322,7 +321,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'aq-' + q.key,
             kind: 'add',
             sign: '+',
-            tag: 'neu',
+            tag: msg.value.diff.tagNew,
             label: quotaLabel(q.key),
             key: q.key,
             from: '—',
@@ -335,7 +334,7 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'rq-' + q.key,
             kind: 'rm',
             sign: '−',
-            tag: 'entfernt',
+            tag: msg.value.diff.tagRemoved,
             label: quotaLabel(q.key),
             key: q.key,
             from: `${q.value} ${u}`.trim(),
@@ -347,8 +346,8 @@ const diffRows = computed<DiffRow[]>(() => {
             id: 'price',
             kind: 'mod',
             sign: '~',
-            tag: 'geändert',
-            label: 'Preis (Monat / Jahr)',
+            tag: msg.value.diff.tagChanged,
+            label: msg.value.diff.priceLabel,
             key: 'pricing',
             from: `${formatMoney(predecessor.value.monthlyNet)} / ${formatMoney(predecessor.value.yearlyNet)}`,
             to: `${formatMoney(selectedVersion.value.monthlyNet)} / ${formatMoney(selectedVersion.value.yearlyNet)}`,
@@ -375,7 +374,7 @@ function formatDate(iso: string | null | undefined): string {
     if (!iso) return '—';
     const d = new Date(iso);
     if (Number.isNaN(d.getTime())) return iso;
-    return d.toLocaleDateString('de-DE', {
+    return d.toLocaleDateString(intlLocale.value, {
         day: '2-digit',
         month: '2-digit',
         year: 'numeric',
@@ -401,17 +400,16 @@ async function executeTerminate(): Promise<void> {
         const e = err as { status?: number; body?: { code?: string; message?: string } };
         const code = e?.body?.code;
         if (code === 'PLAN_TERMINATE_DATE_NOT_FUTURE') {
-            terminateError.value = 'Das Datum muss in der Zukunft liegen.';
+            terminateError.value = msg.value.terminateDialog.errorDateNotFuture;
         } else if (code === 'PLAN_VERSION_NOT_LIVE') {
-            terminateError.value =
-                'Diese Version ist nicht live (draft oder superseded) und kann nicht terminiert werden.';
+            terminateError.value = msg.value.terminateDialog.errorVersionNotLive;
         } else if (code === 'PLAN_TERMINATE_NOT_IMPLEMENTED') {
-            terminateError.value =
-                'Backend unterstützt Terminate noch nicht — bitte API-Server neu bauen.';
+            terminateError.value = msg.value.terminateDialog.errorNotImplemented;
         } else if (e?.body?.message) {
             terminateError.value = e.body.message;
         } else {
-            terminateError.value = err instanceof Error ? err.message : 'Terminate fehlgeschlagen.';
+            terminateError.value =
+                err instanceof Error ? err.message : msg.value.terminateDialog.errorFailed;
         }
     } finally {
         terminating.value = false;

package/src/components/plan-detail/PlanDetailHeader.vue

@@ -13,7 +13,7 @@
                             @keydown.escape="cancelName"
                             @blur="commitName"
                         />
-                        <span class="pd-title-hint">Draft · Enter speichert · Esc bricht ab</span>
+                        <span class="pd-title-hint">{{ msg.header.nameEditHint }}</span>
                     </template>
                     <template v-else>
                         <h1 class="pd-title">{{ plan.label }}</h1>
@@ -21,8 +21,8 @@
                             v-if="draftVersion"
                             class="pd-title-edit-btn"
                             type="button"
-                            title="Plan-Name im Draft bearbeiten"
-                            aria-label="Plan-Name bearbeiten"
+                            :title="msg.header.editNameTitle"
+                            :aria-label="msg.header.editNameAria"
                             @click="startEditName"
                         >
                             <svg
@@ -40,7 +40,7 @@
                         </button>
                     </template>
                 </div>
-                <div class="pd-desc">{{ plan.description || 'Keine Beschreibung.' }}</div>
+                <div class="pd-desc">{{ plan.description || msg.header.noDescription }}</div>
             </div>
         </div>
         <div class="pd-actions">
@@ -57,13 +57,13 @@
                         <path d="M5 12h14M13 5l7 7-7 7" />
                     </svg>
                 </span>
-                <span>Zurück</span>
+                <span>{{ common.back }}</span>
             </button>
             <button
                 v-if="tenantTotal === 0 && !draftVersion && publishedCount === 0"
                 class="btn danger"
                 type="button"
-                title="Plan löschen (nur ohne Mandanten und ohne published Versionen)"
+                :title="msg.header.deletePlanTitle"
                 @click="$emit('deletePlan')"
             >
                 <svg
@@ -78,7 +78,7 @@
                         d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
                     />
                 </svg>
-                <span>Plan löschen</span>
+                <span>{{ msg.header.deletePlan }}</span>
             </button>
             <button class="btn" type="button" @click="$emit('clonePlan')">
                 <svg
@@ -92,7 +92,7 @@
                     <rect x="9" y="9" width="11" height="11" rx="2" />
                     <path d="M5 15V5a2 2 0 012-2h10" />
                 </svg>
-                <span>Plan klonen</span>
+                <span>{{ msg.header.clonePlan }}</span>
             </button>
             <button
                 v-if="!draftVersion"
@@ -110,7 +110,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Neue Draft-Version</span>
+                <span>{{ msg.header.newDraftVersion }}</span>
             </button>
             <button
                 v-else
@@ -128,15 +128,17 @@
                 >
                     <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                 </svg>
-                <span>Draft v{{ draftVersion.version }} veröffentlichen</span>
+                <span>{{ publishDraftLabel }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 const props = defineProps<{
     plan: PlanRow;
@@ -154,6 +156,13 @@ const emit = defineEmits<{
     (e: 'updatePlan', patch: { label: string }): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const common = useSaMessages('common');
+
+const publishDraftLabel = computed(() =>
+    formatMessage(msg.value.header.publishDraft, { version: props.draftVersion?.version ?? '' }),
+);
+
 const editingName = ref(false);
 const nameDraft = ref(props.plan.label);
 const nameInput = ref<HTMLInputElement | null>(null);

package/src/components/plan-detail/PlanDetailKpis.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="pd-kpis">
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Aktive Version</div>
+            <div class="pd-kpi-label">{{ msg.kpis.activeVersion }}</div>
             <div class="pd-kpi-big">
                 <template v-if="liveVersion">
                     v{{ liveVersion.version }}
@@ -9,49 +9,62 @@
                 </template>
                 <template v-else>—</template>
             </div>
-            <div class="pd-kpi-sub">
-                {{
-                    liveVersion?.validFrom
-                        ? `seit ${liveVersion.validFrom.slice(0, 10)}`
-                        : 'keine veröffentlichte Version'
-                }}
-            </div>
+            <div class="pd-kpi-sub">{{ activeVersionSub }}</div>
         </div>
 
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Tenant-Impact</div>
+            <div class="pd-kpi-label">{{ msg.kpis.tenantImpact }}</div>
             <div class="pd-kpi-big">{{ tenantTotal }}</div>
-            <div class="pd-kpi-sub">Mandanten auf diesem Plan</div>
+            <div class="pd-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
         </div>
 
         <div class="pd-kpi">
-            <div class="pd-kpi-label">Versionen</div>
+            <div class="pd-kpi-label">{{ msg.kpis.versions }}</div>
             <div class="pd-kpi-big">{{ versionCount }}</div>
-            <div class="pd-kpi-sub">
-                {{ publishedCount }} live/superseded{{ draftVersion ? ' · 1 Draft' : '' }}
-            </div>
+            <div class="pd-kpi-sub">{{ versionsSummary }}</div>
         </div>
 
         <div :class="['pd-kpi', draftVersion ? 'draft' : '']">
-            <div class="pd-kpi-label">Offener Draft</div>
+            <div class="pd-kpi-label">{{ msg.kpis.openDraft }}</div>
             <div class="pd-kpi-big" :style="draftVersion ? '' : 'color:#cbd5e1'">
                 {{ draftVersion ? `v${draftVersion.version}` : '—' }}
             </div>
             <div class="pd-kpi-sub">
-                {{ draftVersion ? 'Bereit zum Bearbeiten' : 'Keine Draft-Version offen' }}
+                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.noOpenDraft }}
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
-defineProps<{
+const props = defineProps<{
     liveVersion: PlanVersionRow | null;
     draftVersion: PlanVersionRow | null;
     tenantTotal: number;
     versionCount: number;
     publishedCount: number;
 }>();
+
+const msg = useSaMessages('planDetail');
+
+const activeVersionSub = computed(() => {
+    const validFrom = props.liveVersion?.validFrom;
+    return validFrom
+        ? formatMessage(msg.value.kpis.activeSince, { date: validFrom.slice(0, 10) })
+        : msg.value.kpis.noPublishedVersion;
+});
+
+const versionsSummary = computed(() =>
+    props.draftVersion
+        ? formatMessage(msg.value.kpis.versionsSummaryWithDrafts, {
+              published: props.publishedCount,
+              drafts: 1,
+          })
+        : formatMessage(msg.value.kpis.versionsSummary, { published: props.publishedCount }),
+);
 </script>

package/src/components/plan-detail/PlanTerminateDialog.vue

@@ -7,17 +7,20 @@
         <q-card style="min-width: 420px">
             <q-card-section>
                 <div class="text-h6">
-                    {{ target?.endsAt ? 'Enddatum ändern' : 'Version terminieren' }}
+                    {{
+                        target?.endsAt
+                            ? msg.terminateDialog.titleChangeEndDate
+                            : msg.terminateDialog.titleTerminate
+                    }}
                 </div>
                 <div class="text-body2 q-mt-sm">
-                    Plan <code>{{ plan.planKey }}</code> — v{{ target?.version }} wird am gewählten
-                    Datum auslaufen, <b>ohne</b> durch eine Nachfolge-Version ersetzt zu werden.
-                    Bestand-Subscriptions bleiben gebunden (Vertragsschutz P1); neue Buchungen sind
-                    ab diesem Datum nicht mehr möglich.
+                    {{ msg.terminateDialog.bodyPlanPrefix }} <code>{{ plan.planKey }}</code>
+                    {{ bodyExpiry }} <b>{{ msg.terminateDialog.bodyWithout }}</b>
+                    {{ msg.terminateDialog.bodySuffix }}
                 </div>
                 <q-input
                     :model-value="dateInput"
-                    label="Enddatum (YYYY-MM-DD)"
+                    :label="msg.terminateDialog.dateLabel"
                     type="text"
                     class="q-mt-md"
                     mask="####-##-##"
@@ -43,10 +46,10 @@
                 {{ error }}
             </q-banner>
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn flat :label="common.cancel" @click="$emit('update:modelValue', false)" />
                 <q-btn
                     color="primary"
-                    label="Terminieren"
+                    :label="msg.terminateDialog.submit"
                     :loading="terminating"
                     :disable="!dateInput"
                     @click="$emit('execute')"
@@ -57,9 +60,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     plan: PlanRow;
     target: PlanVersionRow | null;
@@ -68,6 +74,13 @@ defineProps<{
     terminating: boolean;
 }>();
 
+const msg = useSaMessages('planDetail');
+const common = useSaMessages('common');
+
+const bodyExpiry = computed(() =>
+    formatMessage(msg.value.terminateDialog.bodyExpiry, { version: props.target?.version ?? '' }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'update:dateInput', value: string): void;

package/src/components/plan-detail/PlanVersionDiffPanel.vue

@@ -2,22 +2,8 @@
     <section class="pd-panel">
         <div class="pd-panel-head">
             <div style="min-width: 0">
-                <h3 class="pd-panel-title">
-                    <template v-if="predecessor">
-                        Diff v{{ predecessor.version }} → v{{ selectedVersion?.version }}
-                    </template>
-                    <template v-else>Komponenten · v{{ selectedVersion?.version }}</template>
-                </h3>
-                <div class="pd-panel-sub">
-                    <template v-if="predecessor && selectedVersion">
-                        {{
-                            statusOf(selectedVersion) === 'draft'
-                                ? 'Was sich beim Publish ändert'
-                                : `Änderungen v${predecessor.version} → v${selectedVersion.version}`
-                        }}
-                    </template>
-                    <template v-else>Initialversion · kein Vorgänger zum Vergleich</template>
-                </div>
+                <h3 class="pd-panel-title">{{ panelTitle }}</h3>
+                <div class="pd-panel-sub">{{ panelSubtitle }}</div>
             </div>
             <div class="pd-panel-head-right pd-diff-chips">
                 <template v-if="predecessor">
@@ -39,10 +25,10 @@
                     <span class="pd-diff-kind">
                         {{
                             d.kind === 'add'
-                                ? 'Hinzugefügt'
+                                ? msg.diff.kindAdded
                                 : d.kind === 'rm'
-                                  ? 'Entfernt'
-                                  : 'Geändert'
+                                  ? msg.diff.kindRemoved
+                                  : msg.diff.kindChanged
                         }}
                     </span>
                     <span class="pd-diff-label">{{ d.label }}</span>
@@ -56,8 +42,8 @@
                 </div>
             </div>
             <div v-if="diffRows.length === 0" class="pd-diff-empty">
-                <b>Keine Änderungen</b>
-                v{{ selectedVersion?.version }} ist identisch zu v{{ predecessor.version }}.
+                <b>{{ common.noChanges }}</b>
+                {{ emptyText }}
             </div>
         </div>
 
@@ -66,13 +52,17 @@
                 v-if="selectedVersion.features.length === 0 && quotaCount(selectedVersion) === 0"
                 class="pd-diff-empty"
             >
-                <b>Keine Komponenten</b>
-                Diese Version enthält weder Features noch Quotas.
+                <b>{{ msg.diff.noComponentsTitle }}</b>
+                {{ msg.diff.noComponentsText }}
             </div>
             <template v-if="selectedVersion.features.length > 0">
                 <div class="pd-diff-section">
                     <hr />
-                    <span>Features · {{ selectedVersion.features.length }}</span>
+                    <span>{{
+                        formatMessage(msg.diff.sectionFeatures, {
+                            count: selectedVersion.features.length,
+                        })
+                    }}</span>
                     <hr />
                 </div>
                 <div
@@ -90,7 +80,11 @@
             <template v-if="quotaCount(selectedVersion) > 0">
                 <div class="pd-diff-section">
                     <hr />
-                    <span>Quotas · {{ quotaCount(selectedVersion) }}</span>
+                    <span>{{
+                        formatMessage(msg.diff.sectionQuotas, {
+                            count: quotaCount(selectedVersion),
+                        })
+                    }}</span>
                     <hr />
                 </div>
                 <div
@@ -109,7 +103,11 @@
             <template v-if="(selectedVersion.bundles ?? []).length > 0">
                 <div class="pd-diff-section">
                     <hr />
-                    <span>Bundles · {{ (selectedVersion.bundles ?? []).length }}</span>
+                    <span>{{
+                        formatMessage(msg.diff.sectionBundles, {
+                            count: (selectedVersion.bundles ?? []).length,
+                        })
+                    }}</span>
                     <hr />
                 </div>
                 <div
@@ -129,10 +127,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { DiffRow, PlanVersionDiff, StatusOf } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     selectedVersion: PlanVersionRow | null;
     predecessor: PlanVersionRow | null;
     diff: PlanVersionDiff;
@@ -146,4 +147,37 @@ defineProps<{
     quotaUnit: (key: string) => string;
     bundleLabel: (key: string) => string;
 }>();
+
+const msg = useSaMessages('planDetail');
+const common = useSaMessages('common');
+
+const panelTitle = computed(() =>
+    props.predecessor
+        ? formatMessage(msg.value.diff.titleCompare, {
+              from: props.predecessor.version,
+              to: props.selectedVersion?.version ?? '',
+          })
+        : formatMessage(msg.value.diff.titleComponents, {
+              version: props.selectedVersion?.version ?? '',
+          }),
+);
+
+const panelSubtitle = computed(() => {
+    const predecessor = props.predecessor;
+    const selected = props.selectedVersion;
+    if (!predecessor || !selected) return msg.value.diff.subInitialVersion;
+    return props.statusOf(selected) === 'draft'
+        ? msg.value.diff.subOnPublish
+        : formatMessage(msg.value.diff.subChanges, {
+              from: predecessor.version,
+              to: selected.version,
+          });
+});
+
+const emptyText = computed(() =>
+    formatMessage(msg.value.diff.emptyText, {
+        selected: props.selectedVersion?.version ?? '',
+        predecessor: props.predecessor?.version ?? '',
+    }),
+);
 </script>