@saasicat/ui-vue 0.5.0 → 0.7.0

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

@@ -2,9 +2,9 @@
     <section class="pd-panel">
         <div class="pd-panel-head">
             <div style="min-width: 0">
-                <h3 class="pd-panel-title">Versionen</h3>
+                <h3 class="pd-panel-title">{{ msg.versions.title }}</h3>
                 <div class="pd-panel-sub">
-                    Pro Plan max. 1 offene Draft-Version · Publish setzt Vorgänger auf
+                    {{ msg.versions.subtitle }}
                     <code class="pd-code">supersededAt</code>
                 </div>
             </div>
@@ -25,7 +25,7 @@
                     >
                         <path d="M12 5v14M5 12h14" />
                     </svg>
-                    <span>Draft v{{ nextDraftVersion }}</span>
+                    <span>{{ newDraftButtonLabel }}</span>
                 </button>
             </div>
         </div>
@@ -44,7 +44,7 @@
                         <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
                     </svg>
                 </span>
-                Klicke eine Version, um sie zu wählen
+                {{ msg.versions.timelineHint }}
             </div>
             <div class="pd-timeline-bar">
                 <div
@@ -56,10 +56,13 @@
                         v.id === selectedId ? 'is-selected' : '',
                     ]"
                     :style="{ flex: statusOf(v) === 'draft' ? 1.4 : 1 }"
-                    :title="`v${v.version} wählen (${statusOf(v)})`"
+                    :title="timelineSelectTitle(v)"
                     @click="$emit('update:selectedId', v.id)"
                 >
-                    v{{ v.version }}<template v-if="statusOf(v) === 'draft'"> · draft</template>
+                    v{{ v.version
+                    }}<template v-if="statusOf(v) === 'draft'">{{
+                        msg.versions.timelineDraftSuffix
+                    }}</template>
                 </div>
             </div>
             <div class="pd-timeline-ticks">
@@ -69,11 +72,11 @@
 
         <div class="pd-versions-tbl">
             <div class="pd-versions-head">
-                <div>Version</div>
-                <div>Gültig</div>
-                <div>Preis</div>
-                <div>Auswirkung</div>
-                <div>Änderungsnotiz</div>
+                <div>{{ msg.versions.colVersion }}</div>
+                <div>{{ msg.versions.colValidity }}</div>
+                <div>{{ msg.versions.colPrice }}</div>
+                <div>{{ msg.versions.colEffect }}</div>
+                <div>{{ msg.versions.colChangeNote }}</div>
                 <div></div>
             </div>
 
@@ -107,27 +110,23 @@
                             </span>
                             <span v-else class="pd-arrow-inf" style="font-size: 14px">∞</span>
                         </div>
-                        <span class="pd-validity-sub">
-                            {{
-                                statusOf(v) === 'draft'
-                                    ? 'geplant'
-                                    : statusOf(v) === 'live'
-                                      ? 'aktiv'
-                                      : 'historisch'
-                            }}
-                        </span>
+                        <span class="pd-validity-sub">{{ validityLabel(v) }}</span>
                     </div>
                 </div>
                 <div>
                     <div>
-                        <div class="pd-pricing-m">{{ formatMoney(v.monthlyNet) }} / Mo</div>
-                        <div class="pd-pricing-y">{{ formatMoney(v.yearlyNet) }} / Jahr</div>
+                        <div class="pd-pricing-m">
+                            {{ formatMoney(v.monthlyNet) }} {{ msg.versions.perMonthUnit }}
+                        </div>
+                        <div class="pd-pricing-y">
+                            {{ formatMoney(v.yearlyNet) }} {{ msg.versions.perYearUnit }}
+                        </div>
                     </div>
                 </div>
                 <div>
                     <div>
                         <div class="pd-impact-num">{{ impactByVersion[v.version] ?? 0 }}</div>
-                        <div class="pd-impact-sub">Mandanten</div>
+                        <div class="pd-impact-sub">{{ msg.versions.tenants }}</div>
                     </div>
                 </div>
                 <div>
@@ -139,18 +138,15 @@
                     <span
                         v-if="editabilityOf(v).reason === 'pre-active'"
                         class="pd-pre-active-chip"
-                        :title="
-                            'Published, aber noch nicht aktiv — Features, Quotas und ' +
-                            'Preis können bis zum Aktivierungsdatum noch korrigiert werden'
-                        "
+                        :title="msg.versions.preActiveTitle"
                     >
-                        editierbar · noch nicht aktiv
+                        {{ msg.versions.preActiveChip }}
                     </span>
                     <template v-if="statusOf(v) === 'draft'">
                         <button
                             class="btn btn--sm primary"
                             type="button"
-                            title="Draft veröffentlichen"
+                            :title="msg.versions.publishDraftTitle"
                             @click="$emit('publish', v)"
                         >
                             <svg
@@ -171,8 +167,8 @@
                             type="button"
                             :title="
                                 editabilityOf(v).reason === 'pre-active'
-                                    ? 'Future-Version bearbeiten'
-                                    : 'Draft bearbeiten'
+                                    ? msg.versions.editFutureVersionTitle
+                                    : msg.versions.editDraftTitle
                             "
                             @click="$emit('editDraft', v)"
                         >
@@ -194,14 +190,18 @@
                         <span
                             v-if="v.endsAt"
                             class="pd-endsat-badge"
-                            :title="`Endet am ${formatDate(v.endsAt)}`"
+                            :title="endsAtTitle(v.endsAt)"
                         >
-                            Endet {{ formatDate(v.endsAt) }}
+                            {{ endsAtBadge(v.endsAt) }}
                         </span>
                         <button
                             class="btn btn--sm"
                             type="button"
-                            :title="v.endsAt ? 'Enddatum ändern' : 'Version terminieren'"
+                            :title="
+                                v.endsAt
+                                    ? msg.terminateDialog.titleChangeEndDate
+                                    : msg.terminateDialog.titleTerminate
+                            "
                             @click="$emit('openTerminate', v)"
                         >
                             <svg
@@ -217,7 +217,11 @@
                                 <line x1="8" y1="2" x2="8" y2="6" />
                                 <line x1="3" y1="10" x2="21" y2="10" />
                             </svg>
-                            <span>{{ v.endsAt ? 'Enddatum…' : 'Terminieren…' }}</span>
+                            <span>{{
+                                v.endsAt
+                                    ? msg.versions.changeEndDateAction
+                                    : msg.versions.terminateAction
+                            }}</span>
                         </button>
                     </template>
                 </div>
@@ -227,10 +231,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 { EditabilityOf, StatusChipOf, StatusOf } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     chronological: PlanVersionRow[];
     tableRows: PlanVersionRow[];
     selectedId: string | null;
@@ -252,4 +259,32 @@ defineEmits<{
     (e: 'editDraft', version: PlanVersionRow): void;
     (e: 'openTerminate', version: PlanVersionRow): void;
 }>();
+
+const msg = useSaMessages('planDetail');
+
+const newDraftButtonLabel = computed(() =>
+    formatMessage(msg.value.versions.newDraftButton, { version: props.nextDraftVersion }),
+);
+
+function timelineSelectTitle(version: PlanVersionRow): string {
+    return formatMessage(msg.value.versions.timelineSelectTitle, {
+        version: version.version,
+        status: props.statusOf(version),
+    });
+}
+
+function validityLabel(version: PlanVersionRow): string {
+    const status = props.statusOf(version);
+    if (status === 'draft') return msg.value.versions.validityPlanned;
+    if (status === 'live') return msg.value.versions.validityActive;
+    return msg.value.versions.validityHistoric;
+}
+
+function endsAtTitle(endsAt: string): string {
+    return formatMessage(msg.value.versions.endsAtTitle, { date: props.formatDate(endsAt) });
+}
+
+function endsAtBadge(endsAt: string): string {
+    return formatMessage(msg.value.versions.endsAtBadge, { date: props.formatDate(endsAt) });
+}
 </script>

package/src/components/plan-list/PlanList.vue

@@ -3,11 +3,8 @@
         <!-- Page header -->
         <div class="pl-page-head">
             <div>
-                <h2 class="pl-h-title">Alle Pläne</h2>
-                <p class="pl-h-sub">
-                    {{ resolvedPlans.length }} Pläne · {{ liveCount }} live ·
-                    {{ draftCount }} offene Drafts · {{ totalTenants }} Mandanten zugeordnet
-                </p>
+                <h2 class="pl-h-title">{{ msg.list.title }}</h2>
+                <p class="pl-h-sub">{{ summary }}</p>
             </div>
             <div class="pl-head-actions">
                 <button class="pl-btn" type="button" @click="$emit('showMatrix')">
@@ -24,7 +21,7 @@
                         <rect x="3" y="14" width="7" height="7" rx="1" />
                         <rect x="14" y="14" width="7" height="7" rx="1" />
                     </svg>
-                    <span>Matrix-Ansicht</span>
+                    <span>{{ msg.list.matrixView }}</span>
                 </button>
                 <button class="pl-btn pl-btn--primary" type="button" @click="$emit('createPlan')">
                     <svg
@@ -37,7 +34,7 @@
                     >
                         <path d="M12 5v14M5 12h14" />
                     </svg>
-                    <span>Neuer Plan</span>
+                    <span>{{ msg.list.newPlan }}</span>
                 </button>
             </div>
         </div>
@@ -59,28 +56,28 @@
                             <path d="M21 21l-4.35-4.35" />
                         </svg>
                     </span>
-                    <input v-model="search" placeholder="Plan suchen…" />
+                    <input v-model="search" :placeholder="msg.list.searchPlaceholder" />
                     <span class="pl-kbd">⌘ K</span>
                 </div>
                 <div class="pl-toolbar-spacer" />
-                <div class="pl-sortinfo">Sortiert nach: Order</div>
+                <div class="pl-sortinfo">{{ msg.list.sortedBy }}</div>
             </div>
 
             <div class="pl-list">
                 <div class="pl-list-head">
-                    <div>Plan</div>
-                    <div>Status</div>
-                    <div>Version</div>
-                    <div>Preis</div>
-                    <div>Mandanten</div>
+                    <div>{{ msg.list.columnPlan }}</div>
+                    <div>{{ common.status }}</div>
+                    <div>{{ msg.list.columnVersion }}</div>
+                    <div>{{ msg.list.columnPrice }}</div>
+                    <div>{{ msg.list.columnTenants }}</div>
                     <div />
                 </div>
 
                 <div v-if="filteredPlans.length === 0" class="pl-empty">
                     <template v-if="resolvedPlans.length === 0">
-                        Noch keine Pläne — über „Neuer Plan" oben rechts den ersten anlegen.
+                        {{ msg.list.emptyNoPlans }}
                     </template>
-                    <template v-else> Keine Pläne entsprechen der Suche „{{ search }}". </template>
+                    <template v-else>{{ emptyNoMatch }}</template>
                 </div>
 
                 <template v-for="p in filteredPlans" :key="p.plan.id">
@@ -107,7 +104,7 @@
                                         <span
                                             v-if="highlightPlanKey === p.planKey"
                                             class="pl-chip pl-chip--new"
-                                            >NEU</span
+                                            >{{ msg.list.badgeNew }}</span
                                         >
                                     </div>
                                     <div class="pl-plan-desc">{{ p.description || '—' }}</div>
@@ -117,22 +114,24 @@
 
                         <div class="pl-cell pl-cell--status">
                             <template v-if="p.currentLive">
-                                <span class="pl-chip pl-chip--live pl-chip--dot">live</span>
+                                <span class="pl-chip pl-chip--live pl-chip--dot">{{
+                                    msg.list.chipLive
+                                }}</span>
                                 <span
                                     v-if="!p.currentLive.marketed"
                                     class="pl-chip pl-chip--supersed pl-chip--tiny"
-                                    >privat</span
+                                    >{{ msg.list.chipPrivate }}</span
                                 >
                             </template>
                             <template v-else-if="p.primary && p.primary.publishedAt">
                                 <span class="pl-chip pl-chip--scheduled pl-chip--dot">
-                                    ab {{ p.primary.validFrom?.slice(0, 10) }}
+                                    {{ validFromLabel(p.primary.validFrom) }}
                                 </span>
                             </template>
                             <template v-else>
-                                <span class="pl-chip pl-chip--supersed pl-chip--dot"
-                                    >keine live</span
-                                >
+                                <span class="pl-chip pl-chip--supersed pl-chip--dot">{{
+                                    msg.list.chipNoLive
+                                }}</span>
                             </template>
                         </div>
 
@@ -142,11 +141,13 @@
                             </div>
                             <div v-else class="pl-version-num pl-version-num--muted">—</div>
                             <div v-if="p.primary?.validFrom" class="pl-version-sub">
-                                {{ p.currentLive ? 'seit' : 'ab' }}
-                                {{ p.primary.validFrom.slice(0, 10)
-                                }}<template v-if="p.primary.validUntil">
-                                    bis {{ p.primary.validUntil.slice(0, 10) }}</template
-                                >
+                                {{
+                                    validityRange(
+                                        p.currentLive ? msg.list.since : msg.list.from,
+                                        p.primary.validFrom,
+                                        p.primary.validUntil,
+                                    )
+                                }}
                             </div>
                         </div>
 
@@ -160,17 +161,20 @@
                                     Number(p.primary.yearlyNet) === 0
                                 "
                             >
-                                <span class="pl-price-text">Kostenlos</span>
+                                <span class="pl-price-text">{{ msg.list.priceFree }}</span>
                             </template>
                             <template v-else>
                                 <div>
                                     <span class="pl-price-big">{{
                                         formatMoney(p.primary.monthlyNet)
                                     }}</span>
-                                    <span class="pl-price-unit"> / Mo</span>
+                                    <span class="pl-price-unit">{{
+                                        ' ' + msg.list.perMonthShort
+                                    }}</span>
                                 </div>
                                 <div class="pl-price-sub">
-                                    {{ formatMoney(p.primary.yearlyNet) }} / Jahr
+                                    {{ formatMoney(p.primary.yearlyNet) }}
+                                    {{ msg.list.perYearShort }}
                                 </div>
                             </template>
                         </div>
@@ -194,7 +198,7 @@
                                 class="pl-btn pl-btn--sm pl-btn--ghost"
                                 type="button"
                                 disabled
-                                title="Plan hat published Versionen — kann nicht gelöscht werden (Vertragsschutz P1)"
+                                :title="msg.list.actionDeleteBlocked"
                             >
                                 <svg
                                     width="14"
@@ -213,7 +217,7 @@
                                 v-else
                                 class="pl-btn pl-btn--sm pl-btn--ghost pl-btn--danger"
                                 type="button"
-                                title="Plan komplett löschen"
+                                :title="msg.list.actionDeletePlan"
                                 @click="$emit('archivePlan', p.plan, false)"
                             >
                                 <svg
@@ -232,7 +236,7 @@
                             <button
                                 class="pl-btn pl-btn--sm pl-btn--ghost"
                                 type="button"
-                                title="Plan klonen"
+                                :title="msg.list.actionClonePlan"
                                 @click="$emit('clonePlan', p.plan)"
                             >
                                 <svg
@@ -250,7 +254,7 @@
                             <button
                                 class="pl-btn pl-btn--sm pl-btn--ghost"
                                 type="button"
-                                title="Neue Version anlegen"
+                                :title="msg.list.actionNewVersion"
                                 :disabled="!!p.draft"
                                 @click="onNewVersion(p)"
                             >
@@ -270,7 +274,7 @@
                             <button
                                 class="pl-btn pl-btn--sm"
                                 type="button"
-                                title="Plan öffnen"
+                                :title="msg.list.actionOpenPlan"
                                 @click="$emit('openPlan', p.plan)"
                             >
                                 <svg
@@ -304,18 +308,18 @@
                                     <template v-if="sub.publishedAt === null">
                                         <span
                                             class="pl-chip pl-chip--draft pl-chip--dot pl-chip--tiny"
-                                            >Draft</span
+                                            >{{ msg.list.chipDraft }}</span
                                         >
                                     </template>
                                     <template v-else>
                                         <span
                                             class="pl-chip pl-chip--scheduled pl-chip--dot pl-chip--tiny"
-                                            >geplant</span
+                                            >{{ msg.list.chipScheduled }}</span
                                         >
                                     </template>
                                 </div>
                                 <div class="pl-sub-desc">
-                                    {{ sub.changeNote || 'keine Change-Note' }}
+                                    {{ sub.changeNote || msg.list.noChangeNote }}
                                 </div>
                             </div>
                         </div>
@@ -324,22 +328,19 @@
                             <span
                                 v-if="sub.publishedAt === null"
                                 class="pl-chip pl-chip--draft pl-chip--dot pl-chip--tiny"
-                                >Draft</span
+                                >{{ msg.list.chipDraft }}</span
                             >
                             <span
                                 v-else
                                 class="pl-chip pl-chip--scheduled pl-chip--dot pl-chip--tiny"
-                                >ab {{ sub.validFrom?.slice(0, 10) }}</span
+                                >{{ validFromLabel(sub.validFrom) }}</span
                             >
                         </div>
 
                         <div class="pl-cell">
                             <div class="pl-version-num pl-version-num--sub">v{{ sub.version }}</div>
                             <div v-if="sub.validFrom" class="pl-version-sub">
-                                ab {{ sub.validFrom.slice(0, 10)
-                                }}<template v-if="sub.validUntil">
-                                    bis {{ sub.validUntil.slice(0, 10) }}</template
-                                >
+                                {{ validityRange(msg.list.from, sub.validFrom, sub.validUntil) }}
                             </div>
                         </div>
 
@@ -347,23 +348,27 @@
                             <template
                                 v-if="Number(sub.monthlyNet) === 0 && Number(sub.yearlyNet) === 0"
                             >
-                                <span class="pl-price-text">Kostenlos</span>
+                                <span class="pl-price-text">{{ msg.list.priceFree }}</span>
                             </template>
                             <template v-else>
                                 <div>
                                     <span class="pl-price-big">{{
                                         formatMoney(sub.monthlyNet)
                                     }}</span>
-                                    <span class="pl-price-unit"> / Mo</span>
+                                    <span class="pl-price-unit">{{
+                                        ' ' + msg.list.perMonthShort
+                                    }}</span>
                                 </div>
                                 <div class="pl-price-sub">
-                                    {{ formatMoney(sub.yearlyNet) }} / Jahr
+                                    {{ formatMoney(sub.yearlyNet) }} {{ msg.list.perYearShort }}
                                 </div>
                             </template>
                         </div>
 
                         <div class="pl-cell pl-cell--sub-impact">
-                            <span class="pl-version-sub">{{ p.tenantCount }} Mandanten</span>
+                            <span class="pl-version-sub">{{
+                                tenantCountLabel(p.tenantCount)
+                            }}</span>
                         </div>
 
                         <div class="pl-cell pl-cell--actions" @click.stop>
@@ -371,7 +376,7 @@
                                 v-if="sub.publishedAt === null"
                                 class="pl-btn pl-btn--sm pl-btn--ghost pl-btn--danger"
                                 type="button"
-                                :title="`Draft v${sub.version} verwerfen`"
+                                :title="discardDraftTitle(sub.version)"
                                 @click="$emit('discardDraft', p.plan, sub)"
                             >
                                 <svg
@@ -391,7 +396,7 @@
                                 v-if="sub.publishedAt === null"
                                 class="pl-btn pl-btn--sm pl-btn--ghost"
                                 type="button"
-                                title="Draft bearbeiten"
+                                :title="msg.list.actionEditDraft"
                                 @click="$emit('editDraft', p.plan, sub)"
                             >
                                 <svg
@@ -410,7 +415,7 @@
                             <button
                                 class="pl-btn pl-btn--sm"
                                 type="button"
-                                title="Im Cockpit öffnen"
+                                :title="msg.list.actionOpenInCockpit"
                                 @click="$emit('openPlan', p.plan)"
                             >
                                 <svg
@@ -435,6 +440,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { PlanRow, 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';
 
 // PlanList — list view of all plans (default view in PlansPage,
 // corresponds to the ListScreen from the plan simulation). One row per
@@ -468,6 +476,10 @@ const emit = defineEmits<{
     (e: 'showMatrix'): void;
 }>();
 
+const msg = useSaMessages('plans');
+const { locale, intlLocale } = useSuperAdminI18n();
+const common = useSaMessages('common');
+
 const search = ref('');
 
 interface ResolvedPlan {
@@ -594,12 +606,12 @@ const filteredPlans = computed(() => {
     // (SPEC_V2 §4.2.1: only currently-valid + future ones stay visible
     // in the admin listing).
     const base = resolvedPlans.value.filter((p) => !p.allExpired);
-    const q = search.value.trim().toLocaleLowerCase('de-DE');
+    const q = search.value.trim().toLocaleLowerCase(intlLocale.value);
     if (!q) return base;
     return base.filter(
         (p) =>
-            p.planKey.toLocaleLowerCase('de-DE').includes(q) ||
-            p.label.toLocaleLowerCase('de-DE').includes(q),
+            p.planKey.toLocaleLowerCase(intlLocale.value).includes(q) ||
+            p.label.toLocaleLowerCase(intlLocale.value).includes(q),
     );
 });
 
@@ -607,11 +619,41 @@ const liveCount = computed(() => resolvedPlans.value.filter((p) => p.currentLive
 const draftCount = computed(() => resolvedPlans.value.filter((p) => p.draft !== null).length);
 const totalTenants = computed(() => resolvedPlans.value.reduce((sum, p) => sum + p.tenantCount, 0));
 
+const summary = computed(() =>
+    formatMessage(msg.value.list.summary, {
+        plans: resolvedPlans.value.length,
+        live: liveCount.value,
+        drafts: draftCount.value,
+        tenants: totalTenants.value,
+    }),
+);
+
+const emptyNoMatch = computed(() =>
+    formatMessage(msg.value.list.emptyNoMatch, { query: search.value }),
+);
+
+function validFromLabel(validFrom: string | null | undefined): string {
+    return formatMessage(msg.value.list.validFrom, { date: validFrom?.slice(0, 10) ?? '' });
+}
+
+function validityRange(prefix: string, validFrom: string, validUntil: string | null): string {
+    const range = `${prefix} ${validFrom.slice(0, 10)}`;
+    if (!validUntil) return range;
+    return `${range} ${msg.value.list.until} ${validUntil.slice(0, 10)}`;
+}
+
+function tenantCountLabel(count: number): string {
+    return formatMessage(msg.value.list.tenantCount, { count });
+}
+
+function discardDraftTitle(version: number): string {
+    return formatMessage(msg.value.list.actionDiscardDraft, { version });
+}
+
 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 tenantBarWidth(count: number): string {