@saasicat/ui-vue 0.7.0 → 0.8.0

package/src/pages-standard/plan-versions/PlanVersionsKpi.vue

@@ -1,65 +0,0 @@
-<template>
-    <div class="sa-pv-kpi">
-        <div class="sa-pv-kpi__icon"><q-icon :name="icon" size="18px" /></div>
-        <div>
-            <div class="sa-pv-kpi__label">{{ label }}</div>
-            <div class="sa-pv-kpi__value">
-                {{ value }}
-                <span v-if="sub" class="sa-pv-kpi__sub">{{ sub }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-    label: string;
-    value: number | string;
-    icon: string;
-    sub?: string;
-}>();
-</script>
-
-<style scoped>
-.sa-pv-kpi {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 10px;
-    padding: 12px 14px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-.sa-pv-kpi__icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 9px;
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.sa-pv-kpi__icon :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-kpi__label {
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-}
-.sa-pv-kpi__value {
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 20px;
-    color: var(--sa-heading, #0f172a);
-    line-height: 1.1;
-    margin-top: 2px;
-}
-.sa-pv-kpi__sub {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--sa-muted, #64748b);
-}
-</style>

package/src/pages-standard/plan-versions/PlanVersionsList.vue

@@ -1,315 +0,0 @@
-<template>
-    <div class="sa-pv-list">
-        <div class="sa-pv-list__kpis">
-            <PlanVersionsKpi
-                :label="msg.list.kpiPlans"
-                :value="snapshot.plans.length"
-                icon="inventory_2"
-            />
-            <PlanVersionsKpi
-                :label="msg.list.kpiSelfService"
-                :value="marketedCount"
-                icon="storefront"
-                :sub="totalPlansLabel"
-            />
-            <PlanVersionsKpi
-                :label="msg.list.kpiFeaturesTotal"
-                :value="totalFeatures"
-                icon="extension"
-            />
-        </div>
-
-        <div v-if="missingPlans.length > 0" class="sa-pv-list__missing">
-            <q-icon name="info" size="16px" />
-            <div>
-                <strong>{{ msg.list.missingPlansLabel }}</strong> {{ missingPlans.join(', ') }}
-                {{ msg.list.missingPlansHint }}
-                <template v-if="canEdit">
-                    <button
-                        v-for="planId in missingPlans"
-                        :key="`new-${planId}`"
-                        type="button"
-                        class="sa-pv-list__missing-btn"
-                        @click="emit('createPlanDraft', planId)"
-                    >
-                        {{ createDraftLabel(planId) }}
-                    </button>
-                </template>
-            </div>
-        </div>
-
-        <div class="sa-pv-list__table">
-            <slot name="table-head">
-                <div
-                    class="sa-pv-list__head sa-pv-list__row sa-pv-list__row--default"
-                    :style="rowGridStyle"
-                >
-                    <div>{{ msg.list.colPlan }}</div>
-                    <div class="sa-pv-list__th--num">{{ msg.list.colPriceNet }}</div>
-                    <div
-                        v-for="col in quotaColumns"
-                        :key="`hd-${col.key}`"
-                        class="sa-pv-list__th--num"
-                    >
-                        {{ col.label }}
-                    </div>
-                    <div class="sa-pv-list__th--num">{{ msg.list.colFeatures }}</div>
-                </div>
-            </slot>
-
-            <template v-for="(plan, i) in snapshot.plans" :key="plan.planId">
-                <slot
-                    name="row"
-                    :plan="plan"
-                    :is-open="openId === plan.planId"
-                    :is-last="i === snapshot.plans.length - 1"
-                    :can-edit="canEdit"
-                    :toggle="() => onToggle(plan.planId)"
-                >
-                    <div
-                        class="sa-pv-list__default-row sa-pv-list__row sa-pv-list__row--default"
-                        :style="rowGridStyle"
-                    >
-                        <div class="sa-pv-list__default-name">
-                            <strong>{{ plan.planId }}</strong>
-                            <span class="sa-pv-list__default-version">v{{ plan.version }}</span>
-                            <span v-if="plan.isDraft" class="sa-pv-list__default-chip">{{
-                                msg.status.draft
-                            }}</span>
-                        </div>
-                        <div class="sa-pv-list__th--num">
-                            {{ formatEuro(plan.monthlyNet) }}
-                        </div>
-                        <div
-                            v-for="col in quotaColumns"
-                            :key="`val-${plan.planId}-${col.key}`"
-                            class="sa-pv-list__th--num"
-                        >
-                            {{ formatQuotaValue(plan.quotas[col.key], col) }}
-                        </div>
-                        <div class="sa-pv-list__th--num">{{ plan.features.length }}</div>
-                    </div>
-                </slot>
-            </template>
-        </div>
-
-        <div v-if="snapshot.kind === 'drafts'" class="sa-pv-list__draft-hint">
-            <q-icon name="info" size="18px" />
-            <div>
-                <strong>{{ msg.list.draftHintLabel }}</strong> {{ msg.list.draftHintBefore }}
-                <em>{{ msg.list.draftHintEditButton }}</em> {{ msg.list.draftHintMiddle }}
-                <strong>{{ msg.list.draftHintPublishFlow }}</strong>
-                {{ msg.list.draftHintAfter }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import PlanVersionsKpi from './PlanVersionsKpi.vue';
-import { fmtEuro } from './format.js';
-
-/**
- * Configuration of a quota column (e.g. `users` → "Benutzer"). Optional
- * `fractional: true` → 1 decimal place (storage GB). Optional `unit` →
- * suffix like "GB" after the value. `-1` is rendered as ∞.
- */
-export interface QuotaColumnConfig {
-    key: string;
-    label: string;
-    fractional?: boolean;
-    unit?: string;
-}
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    /**
-     * Optional: all expected plan IDs. When set, the list shows a
-     * warning with "create draft" buttons for missing plans.
-     */
-    expectedPlanIds?: readonly string[];
-    /**
-     * Optional: additional quota columns between "Preis" and "Features".
-     * Example: `[{ key: 'users', label: 'Benutzer' },
-     * { key: 'members', label: 'Mitglieder' }, { key: 'storageGb',
-     * label: 'Speicher (GB)', fractional: true }, { key: 'resources',
-     * label: 'Plätze' }]`. Default: no additional columns
-     * (backwards-compatible).
-     */
-    quotaColumns?: ReadonlyArray<QuotaColumnConfig>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'editPlanDraft', draftId: string): void;
-    (e: 'createPlanDraft', planId: string): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const openId = ref<string | null>(null);
-const canEdit = computed(() => props.snapshot.kind === 'drafts');
-
-const totalPlansLabel = computed(() =>
-    formatMessage(msg.value.list.kpiOfTotal, { count: props.snapshot.plans.length }),
-);
-
-const marketedCount = computed(() => props.snapshot.plans.filter((p) => p.marketed).length);
-const totalFeatures = computed(() => new Set(props.snapshot.plans.flatMap((p) => p.features)).size);
-
-const missingPlans = computed<string[]>(() => {
-    if (!props.expectedPlanIds) return [];
-    const present = new Set(props.snapshot.plans.map((p) => p.planId));
-    return props.expectedPlanIds.filter((id) => !present.has(id));
-});
-
-const quotaColumns = computed<ReadonlyArray<QuotaColumnConfig>>(() => props.quotaColumns ?? []);
-
-const rowGridStyle = computed(() => {
-    if (quotaColumns.value.length === 0) {
-        return { gridTemplateColumns: '1.6fr 1fr 0.6fr' };
-    }
-    // Name (1.6fr), price (1fr), N×quota (0.7fr), features (0.5fr)
-    const quotaCols = Array(quotaColumns.value.length).fill('0.7fr').join(' ');
-    return { gridTemplateColumns: `1.6fr 1fr ${quotaCols} 0.5fr` };
-});
-
-function onToggle(id: string): void {
-    openId.value = openId.value === id ? null : id;
-}
-
-function createDraftLabel(planId: string): string {
-    return formatMessage(msg.value.list.createDraftFor, { planId });
-}
-
-function formatEuro(n: number): string {
-    return fmtEuro(n, locale.value);
-}
-
-function formatQuotaValue(value: number | undefined, col: QuotaColumnConfig): string {
-    if (value === undefined) return '–';
-    if (value === -1) return '∞';
-    const formatted = col.fractional ? value.toFixed(1) : Math.round(value).toString();
-    return col.unit ? `${formatted} ${col.unit}` : formatted;
-}
-</script>
-
-<style scoped>
-.sa-pv-list {
-    padding: 20px 28px;
-}
-.sa-pv-list__kpis {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    margin-bottom: 18px;
-}
-.sa-pv-list__missing {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    border-radius: 10px;
-    padding: 12px 16px;
-    margin-bottom: 14px;
-    font-size: 12.5px;
-    color: #7c2d12;
-}
-.sa-pv-list__missing :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-.sa-pv-list__missing-btn {
-    background: #fff;
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    color: var(--sa-warning, #b45309);
-    border-radius: 6px;
-    padding: 3px 8px;
-    font-size: 11.5px;
-    font-weight: 600;
-    cursor: pointer;
-    margin-left: 6px;
-}
-
-.sa-pv-list__table {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-}
-.sa-pv-list__row {
-    display: grid;
-    align-items: center;
-    gap: 12px;
-}
-.sa-pv-list__row--default {
-    grid-template-columns: 1.6fr 1fr 0.6fr;
-    padding: 10px 14px;
-}
-.sa-pv-list__head {
-    background: #fafbfc;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-}
-.sa-pv-list__th--num {
-    text-align: right;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 13px;
-}
-
-.sa-pv-list__default-row {
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-list__default-row:last-child {
-    border-bottom: none;
-}
-.sa-pv-list__default-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-list__default-version {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-.sa-pv-list__default-chip {
-    font-size: 9.5px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    color: var(--sa-warning, #b45309);
-}
-
-.sa-pv-list__draft-hint {
-    margin-top: 14px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    border-radius: 10px;
-    padding: 12px 16px;
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    font-size: 12.5px;
-    color: #7c2d12;
-    line-height: 1.5;
-}
-.sa-pv-list__draft-hint :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-</style>

package/src/pages-standard/plan-versions/PlanVersionsMatrix.vue

@@ -1,261 +0,0 @@
-<template>
-    <div class="sa-pv-matrix">
-        <div class="sa-pv-matrix__card">
-            <div class="sa-pv-matrix__head" :style="gridStyle">
-                <div class="sa-pv-matrix__th">Feature</div>
-                <div v-for="plan in snapshot.plans" :key="plan.planId" class="sa-pv-matrix__plan">
-                    <div class="sa-pv-matrix__plan-name">{{ plan.planId }}</div>
-                    <div class="sa-pv-matrix__plan-price">
-                        {{ fmtEuro(plan.monthlyNet) }}/Mo · v{{ plan.version }}
-                    </div>
-                </div>
-            </div>
-
-            <template v-for="grp in groupsWithItems" :key="grp.name">
-                <div v-if="grp.name" class="sa-pv-matrix__group">{{ grp.name }}</div>
-                <div
-                    v-for="f in grp.items"
-                    :key="f.key"
-                    class="sa-pv-matrix__row"
-                    :style="gridStyle"
-                >
-                    <div class="sa-pv-matrix__feat-cell">
-                        <div class="sa-pv-matrix__feat-icon">
-                            <q-icon :name="f.icon" size="14px" />
-                        </div>
-                        <div>
-                            <div class="sa-pv-matrix__feat-label">
-                                {{ f.label }}
-                                <span v-if="f.plannedOnly" class="sa-pv-matrix__planned"
-                                    >PLANNED</span
-                                >
-                            </div>
-                            <div class="sa-pv-matrix__feat-key">{{ f.key }}</div>
-                        </div>
-                    </div>
-                    <div
-                        v-for="plan in snapshot.plans"
-                        :key="plan.planId"
-                        class="sa-pv-matrix__cell"
-                        :class="{ 'sa-pv-matrix__cell--off': !plan.features.includes(f.key) }"
-                    >
-                        <span v-if="plan.features.includes(f.key)" class="sa-pv-matrix__check">
-                            <q-icon name="check" size="14px" />
-                        </span>
-                        <span v-else class="sa-pv-matrix__dash" aria-hidden="true" />
-                    </div>
-                </div>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { fmtEuro } from './format.js';
-
-// Generic feature matrix. Apps pass `featureRegistry` for label/icon/
-// plannedOnly hint and optionally `featureGroups` for the UX grouping of
-// the rows (e.g. Core, Billing, Data, …).
-//
-// Without `featureGroups` the matrix renders a single group without a header.
-
-interface FeatureMeta {
-    label?: string;
-    icon?: string;
-    plannedOnly?: boolean;
-}
-
-interface FeatureGroupsConfig {
-    /** Order of the group headers. */
-    order: readonly string[];
-    /** Map featureKey → group name. Unassigned features land in "Sonstige". */
-    byKey: Record<string, string>;
-    /** Default bucket for features without a `byKey` entry. Default: 'Sonstige'. */
-    fallbackGroup?: string;
-}
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    featureRegistry: Record<string, FeatureMeta>;
-    featureGroups?: FeatureGroupsConfig;
-}>();
-
-const gridStyle = computed(() => ({
-    gridTemplateColumns: `minmax(280px, 1.5fr) repeat(${props.snapshot.plans.length}, minmax(110px, 1fr))`,
-}));
-
-interface MatrixFeature {
-    key: string;
-    label: string;
-    icon: string;
-    plannedOnly: boolean;
-}
-
-const groupsWithItems = computed<Array<{ name: string | null; items: MatrixFeature[] }>>(() => {
-    const allItems: MatrixFeature[] = Object.entries(props.featureRegistry).map(([key, meta]) => ({
-        key,
-        label: meta.label ?? key,
-        icon: meta.icon ?? 'extension',
-        plannedOnly: meta.plannedOnly === true,
-    }));
-
-    if (!props.featureGroups) {
-        return allItems.length > 0 ? [{ name: null, items: allItems }] : [];
-    }
-
-    const fallback = props.featureGroups.fallbackGroup ?? 'Sonstige';
-    const byGroup = new Map<string, MatrixFeature[]>();
-    for (const item of allItems) {
-        const group = props.featureGroups.byKey[item.key] ?? fallback;
-        const list = byGroup.get(group) ?? [];
-        list.push(item);
-        byGroup.set(group, list);
-    }
-    const orderWithFallback = [
-        ...props.featureGroups.order,
-        ...(byGroup.has(fallback) && !props.featureGroups.order.includes(fallback)
-            ? [fallback]
-            : []),
-    ];
-    return orderWithFallback.flatMap((g) => {
-        const items = byGroup.get(g);
-        return items && items.length > 0 ? [{ name: g, items }] : [];
-    });
-});
-</script>
-
-<style scoped>
-.sa-pv-matrix {
-    padding: 20px 28px;
-}
-.sa-pv-matrix__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-
-.sa-pv-matrix__head {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    display: grid;
-    background: #fafbfc;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__th {
-    padding: 12px 16px;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-    border-right: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__plan {
-    padding: 12px 14px;
-    text-align: center;
-    border-right: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__plan-name {
-    font-size: 12.5px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-}
-.sa-pv-matrix__plan-price {
-    font-size: 10.5px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 1px;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-}
-
-.sa-pv-matrix__group {
-    padding: 8px 16px;
-    background: var(--sa-border-soft, #f1f5f9);
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-}
-.sa-pv-matrix__row {
-    display: grid;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-
-.sa-pv-matrix__feat-cell {
-    padding: 10px 16px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    border-right: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-matrix__feat-icon {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-.sa-pv-matrix__feat-icon :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-matrix__feat-label {
-    font-size: 12.5px;
-    font-weight: 600;
-    color: var(--sa-heading, #0f172a);
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-matrix__planned {
-    font-size: 9px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    background: #fef3c7;
-    color: #92400e;
-    padding: 1px 5px;
-    border-radius: 3px;
-}
-.sa-pv-matrix__feat-key {
-    font-size: 10.5px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 1px;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-}
-
-.sa-pv-matrix__cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-right: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-matrix__cell--off {
-    background: #fafbfc;
-}
-.sa-pv-matrix__check {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.sa-pv-matrix__check :deep(.q-icon) {
-    color: var(--sa-positive, #047857);
-}
-.sa-pv-matrix__dash {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    border: 1px dashed var(--sa-border, #e2e8f0);
-}
-</style>

package/src/pages-standard/plan-versions/types.ts

@@ -1,33 +0,0 @@
-// Shared types of the plan version views.
-//
-// Phase 2c: ported from a consumer admin;
-// source type generic over the platform version rows.
-
-import type { PlanVersionRow } from '@saasicat/types';
-
-export type PlanVersionViewMode = 'list' | 'matrix' | 'audit';
-
-export type DraftKind = 'plan';
-
-export interface DraftEntry {
-    kind: DraftKind;
-    id: string;
-    label: string;
-    detail: string;
-    source: PlanVersionRow;
-    baseId: string | null;
-    hasChangeNote: boolean;
-}
-
-export interface ValidationCheck {
-    ok: boolean;
-    label: string;
-    detail: string;
-}
-
-export interface PublishResult {
-    id: string;
-    label: string;
-    ok: boolean;
-    error?: string;
-}