@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/components/plan-cockpit/PlanCockpitAuditLog.vue

@@ -2,12 +2,14 @@
     <section v-if="auditRows.length > 0 || loadingAudit" class="pc-card pc-audit-card">
         <div class="pc-card-head pc-card-head--audit">
             <div class="pc-card-head-text">
-                <div class="pc-card-title">Audit-Log</div>
-                <div class="pc-card-sub">Letzte Änderungen an diesem Plan</div>
+                <div class="pc-card-title">{{ msg.auditLog.title }}</div>
+                <div class="pc-card-sub">{{ msg.auditLog.subtitle }}</div>
             </div>
         </div>
         <div class="pc-audit">
-            <div v-if="loadingAudit" class="pc-empty pc-empty--inline">Lade Audit-Log…</div>
+            <div v-if="loadingAudit" class="pc-empty pc-empty--inline">
+                {{ msg.auditLog.loading }}
+            </div>
             <div v-for="a in auditRows" :key="a.id" class="pc-audit-row">
                 <span :class="['pc-audit-dot', `pc-audit-${auditKind(a.action)}`]" />
                 <span class="pc-audit-when">{{ formatAuditDate(a.createdAt) }}</span>
@@ -20,6 +22,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';
 
 defineProps<{
@@ -27,6 +31,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';
@@ -58,8 +65,8 @@ function formatAuditDate(iso: string): string {
     if (Number.isNaN(d.getTime())) return iso;
     const today = new Date();
     const isToday = d.toDateString() === today.toDateString();
-    const time = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
-    if (isToday) return `heute · ${time}`;
-    return `${d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' })} · ${time}`;
+    const time = d.toLocaleTimeString(intlLocale.value, { hour: '2-digit', minute: '2-digit' });
+    if (isToday) return formatMessage(msg.value.auditLog.today, { time });
+    return `${d.toLocaleDateString(intlLocale.value, { day: '2-digit', month: 'short' })} · ${time}`;
 }
 </script>

package/src/components/plan-cockpit/PlanCockpitDiffPanel.vue

@@ -2,14 +2,9 @@
     <section class="pc-card">
         <div class="pc-card-head">
             <div class="pc-card-head-text">
-                <div class="pc-card-title">
-                    <template v-if="diffPair">
-                        Diff v{{ diffPair.from.version }} → v{{ diffPair.to.version }}
-                    </template>
-                    <template v-else>Diff</template>
-                </div>
+                <div class="pc-card-title">{{ panelTitle }}</div>
                 <div class="pc-card-sub">
-                    {{ diffPair ? 'Was sich beim Publish ändert' : 'Kein Vergleich verfügbar' }}
+                    {{ diffPair ? msg.diff.subOnPublish : msg.diff.noComparison }}
                 </div>
             </div>
             <div v-if="diffPair" class="pc-pillrow">
@@ -74,18 +69,32 @@
                 </span>
             </div>
             <div v-if="diffRows.length === 0" class="pc-empty pc-empty--inline">
-                Keine Änderungen erkannt.
+                {{ msg.diff.noChangesDetected }}
             </div>
         </div>
     </section>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { DiffRow, DiffSummary, PlanVersionPair } from './types';
 
-defineProps<{
+const props = defineProps<{
     diffPair: PlanVersionPair | null;
     diff: DiffSummary;
     diffRows: DiffRow[];
 }>();
+
+const msg = useSaMessages('planDetail');
+
+const panelTitle = computed(() => {
+    const pair = props.diffPair;
+    if (!pair) return msg.value.diff.title;
+    return formatMessage(msg.value.diff.titleCompare, {
+        from: pair.from.version,
+        to: pair.to.version,
+    });
+});
 </script>

package/src/components/plan-cockpit/PlanCockpitHeader.vue

@@ -13,7 +13,7 @@
                     <path d="M5 12h14M13 5l7 7-7 7" />
                 </svg>
             </span>
-            <span>Zurück zur Liste</span>
+            <span>{{ msg.header.backToList }}</span>
         </button>
     </div>
 
@@ -24,7 +24,7 @@
             </div>
             <div class="pc-header-titles">
                 <h2 class="pc-h-title">{{ plan.label }}</h2>
-                <p class="pc-h-sub">{{ plan.description || 'Keine Beschreibung.' }}</p>
+                <p class="pc-h-sub">{{ plan.description || msg.header.noDescription }}</p>
             </div>
         </div>
         <div class="pc-header-right">
@@ -40,7 +40,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 class="pc-btn" type="button" @click="emit('viewCatalog')">
                 <svg
@@ -54,13 +54,13 @@
                     <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                     <circle cx="12" cy="12" r="3" />
                 </svg>
-                <span>Im Katalog ansehen</span>
+                <span>{{ msg.header.viewInCatalog }}</span>
             </button>
             <button
                 class="pc-btn pc-btn--primary"
                 type="button"
                 :disabled="hasOpenDraft"
-                :title="hasOpenDraft ? 'Es gibt bereits eine offene Draft' : undefined"
+                :title="hasOpenDraft ? msg.header.draftAlreadyOpen : undefined"
                 @click="emit('createDraft')"
             >
                 <svg
@@ -73,7 +73,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Neue Draft-Version</span>
+                <span>{{ msg.header.newDraftVersion }}</span>
             </button>
         </div>
     </div>
@@ -81,6 +81,7 @@
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 defineProps<{
     plan: PlanRow;
@@ -95,4 +96,6 @@ const emit = defineEmits<{
     (e: 'viewCatalog'): void;
     (e: 'createDraft'): void;
 }>();
+
+const msg = useSaMessages('planDetail');
 </script>

package/src/components/plan-cockpit/PlanCockpitImpactPanel.vue

@@ -2,10 +2,8 @@
     <section v-if="tenantImpact" class="pc-card">
         <div class="pc-card-head">
             <div class="pc-card-head-text">
-                <div class="pc-card-title">Tenant-Impact</div>
-                <div class="pc-card-sub">
-                    Wer ist betroffen, wenn die nächste Version published wird
-                </div>
+                <div class="pc-card-title">{{ msg.kpis.tenantImpact }}</div>
+                <div class="pc-card-sub">{{ msg.impact.subtitle }}</div>
             </div>
         </div>
         <div class="pc-impact-strip">
@@ -19,7 +17,7 @@
                             background: '#10b981',
                         }"
                     />
-                    <span class="pc-impact-bar-label">{{ tenantImpact.auto }} auto-migrieren</span>
+                    <span class="pc-impact-bar-label">{{ autoLabel }}</span>
                 </div>
                 <div class="pc-impact-bar">
                     <span
@@ -29,9 +27,7 @@
                             background: '#f59e0b',
                         }"
                     />
-                    <span class="pc-impact-bar-label"
-                        >{{ tenantImpact.review }} brauchen Review</span
-                    >
+                    <span class="pc-impact-bar-label">{{ reviewLabel }}</span>
                 </div>
                 <div class="pc-impact-bar">
                     <span
@@ -41,7 +37,7 @@
                             background: '#ef4444',
                         }"
                     />
-                    <span class="pc-impact-bar-label">{{ tenantImpact.conflict }} Konflikt</span>
+                    <span class="pc-impact-bar-label">{{ conflictLabel }}</span>
                 </div>
             </div>
         </div>
@@ -64,13 +60,28 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { ImpactTenant, TenantImpact } from './types';
 
-defineProps<{
+const props = defineProps<{
     tenantImpact: TenantImpact | null;
     tenantImpactTotal: number;
 }>();
 
+const msg = useSaMessages('planDetail');
+
+const autoLabel = computed(() =>
+    formatMessage(msg.value.impact.autoMigrate, { count: props.tenantImpact?.auto ?? 0 }),
+);
+const reviewLabel = computed(() =>
+    formatMessage(msg.value.impact.needReview, { count: props.tenantImpact?.review ?? 0 }),
+);
+const conflictLabel = computed(() =>
+    formatMessage(msg.value.impact.conflict, { count: props.tenantImpact?.conflict ?? 0 }),
+);
+
 function pct(part: number, total: number): string {
     if (total <= 0) return '0%';
     return `${Math.max(2, Math.round((part / total) * 100))}%`;
@@ -86,7 +97,9 @@ function initialsOf(name: string): string {
 }
 
 function impactStateLabel(state: ImpactTenant['state']): string {
-    return state === 'auto' ? 'auto' : state === 'review' ? 'review' : 'Konflikt';
+    if (state === 'auto') return msg.value.impact.stateAuto;
+    if (state === 'review') return msg.value.impact.stateReview;
+    return msg.value.impact.stateConflict;
 }
 
 function impactStateChip(state: ImpactTenant['state']): string {

package/src/components/plan-cockpit/PlanCockpitKpis.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="pc-kpis">
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Aktive Version</div>
+            <div class="pc-kpi-label">{{ msg.kpis.activeVersion }}</div>
             <div class="pc-kpi-val">
                 <template v-if="liveVersion">
                     v{{ liveVersion.version }}
@@ -9,44 +9,39 @@
                 </template>
                 <template v-else>—</template>
             </div>
-            <div class="pc-kpi-sub">
-                {{
-                    liveVersion?.validFrom
-                        ? `seit ${liveVersion.validFrom.slice(0, 10)}`
-                        : 'keine veröffentlichte Version'
-                }}
-            </div>
+            <div class="pc-kpi-sub">{{ activeVersionSub }}</div>
         </div>
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Tenant-Impact</div>
+            <div class="pc-kpi-label">{{ msg.kpis.tenantImpact }}</div>
             <div class="pc-kpi-val">{{ tenantImpactTotal }}</div>
-            <div class="pc-kpi-sub">Mandanten auf diesem Plan</div>
+            <div class="pc-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
         </div>
         <div class="pc-kpi">
-            <div class="pc-kpi-label">Versionen</div>
+            <div class="pc-kpi-label">{{ msg.kpis.versions }}</div>
             <div class="pc-kpi-val">{{ versionsCount }}</div>
-            <div class="pc-kpi-sub">
-                {{ publishedCount }} live/superseded · {{ draftCount }} Draft
-            </div>
+            <div class="pc-kpi-sub">{{ versionsSummary }}</div>
         </div>
         <div :class="['pc-kpi', draftVersion ? 'pc-kpi--draft' : '']">
             <div class="pc-kpi-label" :style="draftVersion ? 'color:#b45309' : ''">
-                {{ draftVersion ? 'Offener Draft' : 'Kein Draft' }}
+                {{ draftVersion ? msg.kpis.openDraft : msg.kpis.noDraft }}
             </div>
             <div class="pc-kpi-val">
                 {{ draftVersion ? `v${draftVersion.version}` : '—' }}
             </div>
             <div class="pc-kpi-sub" :style="draftVersion ? 'color:#b45309' : ''">
-                {{ draftVersion ? 'Bereit zum Bearbeiten' : 'Neue Draft anlegen' }}
+                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.createNewDraft }}
             </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;
     tenantImpactTotal: number;
     versionsCount: number;
@@ -54,4 +49,20 @@ defineProps<{
     draftCount: number;
     draftVersion: PlanVersionRow | null;
 }>();
+
+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(() =>
+    formatMessage(msg.value.kpis.versionsSummaryWithDrafts, {
+        published: props.publishedCount,
+        drafts: props.draftCount,
+    }),
+);
 </script>

package/src/components/plan-cockpit/PlanCockpitVersions.vue

@@ -2,9 +2,9 @@
     <section class="pc-card pc-card--left">
         <div class="pc-card-head">
             <div class="pc-card-head-text">
-                <div class="pc-card-title">Versionen</div>
+                <div class="pc-card-title">{{ msg.versions.title }}</div>
                 <div class="pc-card-sub">
-                    Pro Plan max. 1 offene Draft-Version · Publish setzt Vorgänger auf
+                    {{ msg.versions.subtitle }}
                     <code class="pc-mono">supersededAt</code>
                 </div>
             </div>
@@ -24,7 +24,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Draft v{{ nextDraftVersion }}</span>
+                <span>{{ newDraftButtonLabel }}</span>
             </button>
         </div>
 
@@ -36,7 +36,10 @@
                     :class="['pc-vtl-seg', `pc-vtl-${seg.status}`]"
                     :style="{ flex: seg.flex }"
                 >
-                    v{{ seg.version }}<template v-if="seg.status === 'draft'"> · draft</template>
+                    v{{ seg.version
+                    }}<template v-if="seg.status === 'draft'">{{
+                        msg.versions.timelineDraftSuffix
+                    }}</template>
                 </div>
             </div>
             <div class="pc-vtl-axis">
@@ -45,15 +48,19 @@
         </div>
 
         <div class="pc-vrow pc-vrow--head">
-            <div class="pc-vrow-version pc-vrow-headlabel">Version</div>
-            <div class="pc-vrow-cell pc-vrow-headlabel">Gültig</div>
-            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">Pricing</div>
-            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">Impact</div>
-            <div class="pc-vrow-note pc-vrow-headlabel">Change-Note</div>
+            <div class="pc-vrow-version pc-vrow-headlabel">{{ msg.versions.colVersion }}</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel">{{ msg.versions.colValidity }}</div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
+                {{ msg.versions.colPricing }}
+            </div>
+            <div class="pc-vrow-cell pc-vrow-headlabel pc-vrow-cell--right">
+                {{ msg.versions.colImpact }}
+            </div>
+            <div class="pc-vrow-note pc-vrow-headlabel">{{ msg.versions.colChangeNoteShort }}</div>
             <div class="pc-vrow-actions" />
         </div>
         <div v-if="versions.length === 0" class="pc-empty">
-            Noch keine Versionen — „Neue Draft-Version" oben rechts.
+            {{ msg.versions.empty }}
         </div>
         <div
             v-for="row in sortedVersions"
@@ -77,9 +84,12 @@
             </div>
             <div class="pc-vrow-cell pc-vrow-cell--right">
                 <div class="pc-vrow-price">
-                    {{ formatMoney(row.monthlyNet) }}<span class="pc-vrow-price-unit">/ Mo</span>
+                    {{ formatMoney(row.monthlyNet)
+                    }}<span class="pc-vrow-price-unit">{{ msg.versions.perMonthUnit }}</span>
+                </div>
+                <div class="pc-vrow-sub">
+                    {{ formatMoney(row.yearlyNet) }} {{ msg.versions.perYearUnit }}
                 </div>
-                <div class="pc-vrow-sub">{{ formatMoney(row.yearlyNet) }} / Jahr</div>
             </div>
             <div class="pc-vrow-cell pc-vrow-cell--right">
                 <div
@@ -88,7 +98,7 @@
                 >
                     {{ impactByVersion[row.version] ?? 0 }}
                 </div>
-                <div class="pc-vrow-sub">Mandanten</div>
+                <div class="pc-vrow-sub">{{ msg.versions.tenants }}</div>
             </div>
             <div class="pc-vrow-note" :title="row.changeNote ?? ''">
                 {{ row.changeNote || '—' }}
@@ -110,7 +120,7 @@
                     >
                         <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                     </svg>
-                    <span>Publish</span>
+                    <span>{{ msg.versions.publish }}</span>
                 </button>
                 <button
                     v-if="editabilityOf(row).editable"
@@ -118,8 +128,8 @@
                     type="button"
                     :title="
                         editabilityOf(row).reason === 'pre-active'
-                            ? 'Published, aber noch nicht aktiv — Features, Quotas und Preis können bis zum Aktivierungsdatum noch korrigiert werden'
-                            : 'Draft bearbeiten'
+                            ? msg.versions.preActiveTitle
+                            : msg.versions.editDraftTitle
                     "
                     @click="emit('editDraft', row)"
                 >
@@ -133,7 +143,7 @@
                     >
                         <path d="M12 20h9M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4 12.5-12.5z" />
                     </svg>
-                    <span>Bearbeiten</span>
+                    <span>{{ common.edit }}</span>
                 </button>
                 <button
                     v-if="row.publishedAt !== null && row.supersededAt === null && draftVersion"
@@ -152,7 +162,7 @@
                         <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                         <circle cx="12" cy="12" r="3" />
                     </svg>
-                    <span>Diff</span>
+                    <span>{{ msg.versions.viewDiff }}</span>
                 </button>
             </div>
         </div>
@@ -160,10 +170,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { isVersionEditable, type PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { formatCurrency } from '../../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { TimelineSegment } from './types';
 
-defineProps<{
+const props = defineProps<{
     versions: PlanVersionRow[];
     sortedVersions: PlanVersionRow[];
     timelineSegments: TimelineSegment[];
@@ -181,6 +195,14 @@ const emit = defineEmits<{
     (e: 'viewDiff', from: PlanVersionRow, to: PlanVersionRow): void;
 }>();
 
+const msg = useSaMessages('planDetail');
+const { locale } = useSuperAdminI18n();
+const common = useSaMessages('common');
+
+const newDraftButtonLabel = computed(() =>
+    formatMessage(msg.value.versions.newDraftButton, { version: props.nextDraftVersion }),
+);
+
 function editabilityOf(version: PlanVersionRow): {
     editable: boolean;
     reason: 'draft' | 'pre-active' | null;
@@ -203,8 +225,7 @@ function statusLabel(row: PlanVersionRow): string {
 function formatMoney(raw: string | number): string {
     const num = typeof raw === 'string' ? Number(raw) : raw;
     if (!Number.isFinite(num)) return String(raw);
-    if (Number.isInteger(num)) return `${num} €`;
-    return `${num.toFixed(2).replace('.', ',')} €`;
+    return formatCurrency(num, locale.value);
 }
 
 function updatedLabel(row: PlanVersionRow): string {
@@ -218,9 +239,13 @@ function updatedLabel(row: PlanVersionRow): string {
     if (Number.isNaN(d.getTime())) return '';
     const diffMs = Date.now() - d.getTime();
     const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-    if (days <= 0) return 'heute';
-    if (days < 30) return `vor ${days} Tagen`;
-    if (days < 365) return `vor ${Math.floor(days / 30)} Monaten`;
-    return `vor ${Math.floor(days / 365)} Jahren`;
+    if (days <= 0) return msg.value.versions.updatedToday;
+    if (days < 30) return formatMessage(msg.value.versions.updatedDaysAgo, { days });
+    if (days < 365) {
+        return formatMessage(msg.value.versions.updatedMonthsAgo, {
+            months: Math.floor(days / 30),
+        });
+    }
+    return formatMessage(msg.value.versions.updatedYearsAgo, { years: Math.floor(days / 365) });
 }
 </script>