@saasicat/ui-vue 0.2.0

package/src/pages-standard/bundles-page/BundleDetailPanel.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="sa-bd-grid">
+        <div class="sa-bd-col">
+            <div class="sa-bd-section-label">Stammdaten</div>
+            <div class="sa-bundles__form">
+                <q-input
+                    :model-value="editForm.label"
+                    outlined
+                    dense
+                    label="Label"
+                    @update:model-value="(value) => patchEditForm({ label: String(value ?? '') })"
+                />
+                <q-input
+                    :model-value="editForm.description"
+                    outlined
+                    dense
+                    type="textarea"
+                    autogrow
+                    label="Beschreibung"
+                    @update:model-value="
+                        (value) => patchEditForm({ description: String(value ?? '') })
+                    "
+                />
+                <q-input
+                    :model-value="editForm.icon"
+                    outlined
+                    dense
+                    label="Icon"
+                    @update:model-value="(value) => patchEditForm({ icon: String(value ?? '') })"
+                />
+                <q-input
+                    :model-value="editForm.sortOrder"
+                    outlined
+                    dense
+                    type="number"
+                    label="Sortier-Reihenfolge"
+                    @update:model-value="
+                        (value) => patchEditForm({ sortOrder: Number(value ?? 0) })
+                    "
+                />
+            </div>
+
+            <div class="sa-bd-section-label sa-bd-section-label--mt">
+                <span>Übersetzungen</span>
+                <span class="sa-bd-section-count">{{ translatableLocales.length }} Sprache(n)</span>
+            </div>
+            <div v-if="translatableLocales.length === 0" class="sa-bd-i18n-hint">
+                Keine weiteren Sprachen aktiv — werden im Marketing-Catalog aktiviert.
+            </div>
+            <div v-for="lng in translatableLocales" :key="lng" class="sa-bd-i18n-block">
+                <div class="sa-bd-i18n-head">
+                    <span class="sa-bd-i18n-code">{{ lng.toUpperCase() }}</span>
+                    <span
+                        v-if="!i18nDraft[lng]?.label || !i18nDraft[lng]?.description"
+                        class="sa-bd-i18n-fallback"
+                    >
+                        Fallback aus DE
+                    </span>
+                </div>
+                <q-input
+                    outlined
+                    dense
+                    :model-value="i18nDraft[lng]?.label || ''"
+                    :placeholder="`Label (Fallback: „${editForm.label}“)`"
+                    @update:model-value="
+                        (value) => emit('setI18n', lng, 'label', String(value ?? ''))
+                    "
+                />
+                <q-input
+                    outlined
+                    dense
+                    type="textarea"
+                    autogrow
+                    :model-value="i18nDraft[lng]?.description || ''"
+                    :placeholder="`Beschreibung (Fallback aus DE)`"
+                    @update:model-value="
+                        (value) => emit('setI18n', lng, 'description', String(value ?? ''))
+                    "
+                />
+            </div>
+
+            <q-btn
+                class="sa-bd-save"
+                unelevated
+                color="primary"
+                label="Stammdaten & Übersetzungen speichern"
+                :loading="editSubmitting"
+                @click="emit('submitEdit')"
+            />
+        </div>
+
+        <div class="sa-bd-col sa-bd-col--versions">
+            <BundleVersionStrip
+                :versions="detailVersions"
+                :model-value="selectedVersionId"
+                @update:model-value="(id) => emit('selectVersion', bundle.id, id)"
+                @add-version="emit('addVersion', bundle.id)"
+            />
+
+            <BundleVersionInlineEditor
+                v-if="selectedVersion"
+                :key="selectedVersion.id"
+                :version="selectedVersion"
+                :available-features="availableFeatures"
+                :available-quotas="availableQuotas"
+                :plans="plans"
+                :live-plan-versions="livePlanVersions"
+                :feature-registry="featureRegistry"
+                :quota-registry="quotaRegistry"
+                :saving="inlineEditorSaving"
+                :save-error="inlineEditorError"
+                @save="(data) => emit('inlineSave', bundle.id, selectedVersion!.id, data)"
+                @discard="emit('discardVersion', bundle.id, selectedVersion!.id)"
+            />
+            <div v-else class="sa-bd-empty-row">
+                Noch keine Version. Lege eine neue Version an, um Features, Quotas &amp; Pricing zu
+                kuratieren.
+            </div>
+
+            <div class="sa-bd-version-actions">
+                <q-btn
+                    v-if="selectedVersion && selectedVersion.publishedAt === null"
+                    unelevated
+                    color="positive"
+                    icon="rocket_launch"
+                    label="Diese Version publishen"
+                    @click="emit('publishVersion', selectedVersion)"
+                />
+                <q-btn
+                    class="sa-bd-delete"
+                    flat
+                    dense
+                    color="negative"
+                    icon="delete"
+                    label="Bundle soft-deleten"
+                    @click="emit('deleteBundle', bundle)"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {
+    BundleRow,
+    BundleVersionRow,
+    CatalogEntryI18n,
+    DiscoverySnapshot,
+    PlanRow,
+    PlanVersionRow,
+    UpdateBundleVersionDraftData,
+} from '@saasicat/types';
+import BundleVersionInlineEditor from '../../components/bundle-editor/BundleVersionInlineEditor.vue';
+import BundleVersionStrip from '../../components/bundle-editor/BundleVersionStrip.vue';
+import type { FeatureMeta } from '../../components/bundle-editor/BundleFeaturesEditor.vue';
+import type { QuotaMeta } from '../../components/bundle-editor/catalog-i18n.js';
+import type { BundleEditForm } from './types.js';
+
+const props = defineProps<{
+    bundle: BundleRow;
+    editForm: BundleEditForm;
+    i18nDraft: CatalogEntryI18n;
+    translatableLocales: string[];
+    editSubmitting: boolean;
+    detailVersions: BundleVersionRow[];
+    selectedVersionId: string | null;
+    selectedVersion: BundleVersionRow | null;
+    availableFeatures: DiscoverySnapshot['features'];
+    availableQuotas: DiscoverySnapshot['quotas'];
+    plans: PlanRow[];
+    livePlanVersions: Record<string, PlanVersionRow | null>;
+    featureRegistry: Record<string, FeatureMeta>;
+    quotaRegistry: Record<string, QuotaMeta>;
+    inlineEditorSaving: boolean;
+    inlineEditorError: string | null;
+}>();
+
+const emit = defineEmits<{
+    'update:editForm': [value: BundleEditForm];
+    setI18n: [locale: string, field: 'label' | 'description', value: string];
+    submitEdit: [];
+    selectVersion: [bundleId: string, versionId: string];
+    addVersion: [bundleId: string];
+    inlineSave: [bundleId: string, versionId: string, data: UpdateBundleVersionDraftData];
+    discardVersion: [bundleId: string, versionId: string];
+    publishVersion: [version: BundleVersionRow];
+    deleteBundle: [bundle: BundleRow];
+}>();
+
+function patchEditForm(patch: Partial<BundleEditForm>): void {
+    emit('update:editForm', { ...props.editForm, ...patch });
+}
+</script>

package/src/pages-standard/bundles-page/BundlesFilterBar.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="sa-bundles__filter-row">
+        <q-input
+            :model-value="query"
+            dense
+            outlined
+            clearable
+            placeholder="Bundle-Key oder Label suchen …"
+            class="sa-bundles__search"
+            @update:model-value="emitQuery"
+        >
+            <template #prepend><q-icon name="search" /></template>
+        </q-input>
+        <q-select
+            :model-value="statusFilter"
+            dense
+            outlined
+            :options="statusFilterOptions"
+            emit-value
+            map-options
+            class="sa-bundles__status-filter"
+            @update:model-value="emitStatusFilter"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BundlesStatusFilter, BundlesStatusFilterOption } from './types.js';
+
+defineProps<{
+    query: string;
+    statusFilter: BundlesStatusFilter;
+    statusFilterOptions: BundlesStatusFilterOption[];
+}>();
+
+const emit = defineEmits<{
+    'update:query': [value: string];
+    'update:statusFilter': [value: BundlesStatusFilter];
+}>();
+
+function emitQuery(value: string | number | null): void {
+    emit('update:query', String(value ?? ''));
+}
+
+function emitStatusFilter(value: unknown): void {
+    emit('update:statusFilter', (value ?? 'all') as BundlesStatusFilter);
+}
+</script>

package/src/pages-standard/bundles-page/BundlesHeader.vue

@@ -0,0 +1,67 @@
+<template>
+    <header class="sa-bundles__head">
+        <div>
+            <h1 class="sa-bundles__title">Bundles</h1>
+            <p class="sa-bundles__sub">
+                Produktgruppen aus Features &amp; Quotas — verwendet in Plänen. Bundles werden im
+                SuperAdmin kuratiert.
+            </p>
+        </div>
+        <div class="sa-bundles__head-actions">
+            <q-select
+                v-if="locales.length > 1"
+                :model-value="displayLocale"
+                :options="localeOptions"
+                outlined
+                dense
+                emit-value
+                map-options
+                class="sa-bundles__locale"
+                label="Anzeige-Sprache"
+                @update:model-value="(value) => emit('update:displayLocale', String(value))"
+            >
+                <template #prepend><q-icon name="translate" size="18px" /></template>
+            </q-select>
+            <q-btn
+                unelevated
+                color="primary"
+                icon="add"
+                label="Neues Bundle"
+                @click="emit('create')"
+            />
+            <q-btn flat icon="refresh" :loading="loading" @click="emit('refresh')">
+                <q-tooltip>Liste neu laden</q-tooltip>
+            </q-btn>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// The language selector controls which locale feature/quota labels are resolved
+// on the create form and in the detail view (fallback locale → DE → key). The default is the
+// default locale (DE); further options come from the active project locales.
+
+const props = defineProps<{
+    loading: boolean;
+    displayLocale: string;
+    locales: string[];
+}>();
+
+const emit = defineEmits<{
+    create: [];
+    refresh: [];
+    'update:displayLocale': [locale: string];
+}>();
+
+const localeOptions = computed(() =>
+    props.locales.map((locale) => ({ label: locale.toUpperCase(), value: locale })),
+);
+</script>
+
+<style scoped>
+.sa-bundles__locale {
+    min-width: 150px;
+}
+</style>

package/src/pages-standard/bundles-page/BundlesKpis.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="sa-bundles__kpis">
+        <div class="sa-bundles__kpi">
+            <div class="sa-bundles__kpi-label">Bundles gesamt</div>
+            <div class="sa-bundles__kpi-value">{{ bundlesTotal }}</div>
+            <div class="sa-bundles__kpi-sub">
+                {{ liveCount }} live · {{ scheduledBundlesCount }} mit geplanter Version
+            </div>
+        </div>
+        <div class="sa-bundles__kpi">
+            <div class="sa-bundles__kpi-label">Geplante Versionen</div>
+            <div class="sa-bundles__kpi-value">{{ totalScheduledVersions }}</div>
+            <div class="sa-bundles__kpi-sub">zukünftig aktiv · noch nicht verkaufbar</div>
+        </div>
+        <div class="sa-bundles__kpi">
+            <div class="sa-bundles__kpi-label">Offene Drafts</div>
+            <div class="sa-bundles__kpi-value">{{ totalDraftVersions }}</div>
+            <div class="sa-bundles__kpi-sub">{{ draftBundlesCount }} Bundle(s) ohne Publish</div>
+        </div>
+        <div class="sa-bundles__kpi">
+            <div class="sa-bundles__kpi-label">Mit Übersetzung</div>
+            <div class="sa-bundles__kpi-value">{{ translatedCount }}</div>
+            <div class="sa-bundles__kpi-sub">{{ localesCount }} aktive Sprache(n) im Projekt</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    bundlesTotal: number;
+    liveCount: number;
+    scheduledBundlesCount: number;
+    totalScheduledVersions: number;
+    totalDraftVersions: number;
+    draftBundlesCount: number;
+    translatedCount: number;
+    localesCount: number;
+}>();
+</script>

package/src/pages-standard/bundles-page/types.ts

@@ -0,0 +1,15 @@
+import type { BundleAggregateStatus } from '../../components/bundle-editor/bundle-version-status.js';
+
+export type BundlesStatusFilter = 'all' | BundleAggregateStatus;
+
+export interface BundlesStatusFilterOption {
+    label: string;
+    value: BundlesStatusFilter;
+}
+
+export interface BundleEditForm {
+    label: string;
+    description: string;
+    icon: string;
+    sortOrder: number;
+}

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="sa-trans">
+        <!-- Default locale: editable source -->
+        <div class="sa-trans-lang sa-trans-lang--source">
+            <div class="sa-trans-lang__head">
+                <span class="sa-trans-lang__code">{{ defaultLocale.toUpperCase() }}</span>
+                <span class="sa-trans-lang__name">{{ localeFull(defaultLocale) }}</span>
+                <span class="sa-trans-lang__badge">Source</span>
+            </div>
+            <div class="sa-trans-fields">
+                <div v-for="f in fields" :key="f" class="sa-trans-field">
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f) }}</label>
+                    <q-input
+                        v-if="f !== 'unit'"
+                        dense
+                        outlined
+                        :type="f === 'description' ? 'textarea' : 'text'"
+                        :autogrow="f === 'description'"
+                        :model-value="baseValue(f)"
+                        @update:model-value="(v) => onBase(f, String(v ?? ''))"
+                    />
+                    <div v-else class="sa-trans-locked">
+                        {{ entry.unit || '—' }}
+                        <span class="sa-trans-locked__hint">aus Code</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Target languages -->
+        <div v-for="lng in targetLocales" :key="lng" class="sa-trans-lang">
+            <div class="sa-trans-lang__head">
+                <span class="sa-trans-lang__code">{{ localeShort(lng) }}</span>
+                <span class="sa-trans-lang__name">{{ localeFull(lng) }}</span>
+                <q-btn
+                    flat
+                    dense
+                    no-caps
+                    size="sm"
+                    icon="content_copy"
+                    label="Aus DE"
+                    class="sa-trans-lang__copy"
+                    @click="copyFromDefault(lng)"
+                >
+                    <q-tooltip>Leere Felder aus der Default-Locale übernehmen</q-tooltip>
+                </q-btn>
+            </div>
+            <div class="sa-trans-fields">
+                <div v-for="f in fields" :key="f" class="sa-trans-field">
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f) }}</label>
+                    <q-input
+                        dense
+                        outlined
+                        :type="f === 'description' ? 'textarea' : 'text'"
+                        :autogrow="f === 'description'"
+                        :model-value="localeValue(lng, f)"
+                        :placeholder="baseValue(f) ? `Fallback: „${baseValue(f)}“` : '—'"
+                        @update:model-value="(v) => onLocale(lng, f, String(v ?? ''))"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div v-if="targetLocales.length === 0" class="sa-trans__empty">
+            Keine weiteren Sprachen aktiv — Sprachen werden im Marketing-Catalog aktiviert.
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import type { CatalogEntryI18nFields } from '@saasicat/types';
+import {
+    DISCOVERY_DEFAULT_LOCALE,
+    i18nFieldLabel,
+    localeFull,
+    localeShort,
+    type I18nField,
+    type TransEntry,
+} from './discovery-ui.js';
+
+// Translation block of a single catalog entry (feature / quota) —
+// embedded in the collapsible card (#20, Sim `TransPanel`). Default-
+// locale fields are editable (source of truth), target languages carry
+// overrides; empty fields fall back to the default locale in the consumer.
+
+const props = withDefaults(
+    defineProps<{
+        entry: TransEntry;
+        /** Fields to translate; order = display order. */
+        fields: I18nField[];
+        /** All active locales incl. default. */
+        activeLocales: string[];
+        defaultLocale?: string;
+    }>(),
+    { defaultLocale: DISCOVERY_DEFAULT_LOCALE },
+);
+
+const emit = defineEmits<{
+    /** Default-locale base field changed (`label`/`description`). */
+    'update:base': [patch: { label?: string; description?: string }];
+    /** Target-locale override changed. */
+    'update:locale': [locale: string, patch: CatalogEntryI18nFields];
+}>();
+
+const targetLocales = computed(() => props.activeLocales.filter((l) => l !== props.defaultLocale));
+
+// Local input buffer: once a field has been edited, the draft wins over
+// the prop value. Persistence is debounced — without this buffer, a late-
+// returning PATCH response would reset the field to a stale state and
+// swallow the most recently typed characters.
+const drafts = reactive<Record<string, string>>({});
+
+function baseValue(f: I18nField): string {
+    if (f === 'unit') return props.entry.unit ?? '';
+    const dk = `b|${f}`;
+    if (dk in drafts) return drafts[dk];
+    return (f === 'label' ? props.entry.label : props.entry.description) ?? '';
+}
+
+function localeValue(locale: string, f: I18nField): string {
+    const dk = `l|${locale}|${f}`;
+    if (dk in drafts) return drafts[dk];
+    return props.entry.i18n?.[locale]?.[f] ?? '';
+}
+
+function onBase(f: I18nField, value: string): void {
+    if (f === 'unit') return;
+    drafts[`b|${f}`] = value;
+    emit('update:base', { [f]: value });
+}
+
+function onLocale(locale: string, f: I18nField, value: string): void {
+    drafts[`l|${locale}|${f}`] = value;
+    emit('update:locale', locale, { [f]: value });
+}
+
+/** Fills empty target fields from the default locale. */
+function copyFromDefault(locale: string): void {
+    const patch: CatalogEntryI18nFields = {};
+    for (const f of props.fields) {
+        if (!localeValue(locale, f).trim()) {
+            const base = baseValue(f).trim();
+            if (base) patch[f] = base;
+        }
+    }
+    if (Object.keys(patch).length === 0) return;
+    for (const [f, value] of Object.entries(patch)) {
+        drafts[`l|${locale}|${f}`] = value ?? '';
+    }
+    emit('update:locale', locale, patch);
+}
+</script>
+
+<style scoped>
+.sa-trans {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 12px;
+}
+.sa-trans-lang {
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    background: #fff;
+    padding: 10px 12px;
+}
+.sa-trans-lang--source {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+}
+.sa-trans-lang__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.sa-trans-lang__code {
+    font-size: 10px;
+    font-weight: 700;
+    background: #0f172a;
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 5px;
+}
+.sa-trans-lang__name {
+    font-size: 12px;
+    font-weight: 600;
+    color: #334155;
+    flex: 1;
+}
+.sa-trans-lang__badge {
+    font-size: 9px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #475569;
+    background: #e2e8f0;
+    padding: 2px 6px;
+    border-radius: 5px;
+}
+.sa-trans-lang__copy {
+    color: #475569;
+}
+.sa-trans-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.sa-trans-field {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.sa-trans-field__cap {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    color: #94a3b8;
+}
+.sa-trans-locked {
+    font-size: 13px;
+    color: #334155;
+    background: #f1f5f9;
+    border: 1px dashed #cbd5e1;
+    border-radius: 6px;
+    padding: 6px 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.sa-trans-locked__hint {
+    font-size: 10px;
+    color: #94a3b8;
+    text-transform: uppercase;
+}
+.sa-trans__empty {
+    grid-column: 1 / -1;
+    padding: 16px;
+    text-align: center;
+    font-size: 12px;
+    color: #94a3b8;
+    border: 1px dashed #cbd5e1;
+    border-radius: 10px;
+}
+</style>