@saasicat/ui-vue 0.2.0

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

@@ -0,0 +1,247 @@
+<template>
+    <div class="sa-qc" :class="{ expanded, warn: !quota.usageProvider }">
+        <div class="sa-qc__head" @click="emit('toggle')">
+            <q-icon
+                :name="quota.usageProvider ? 'inventory_2' : 'error'"
+                :color="quota.usageProvider ? 'primary' : 'negative'"
+                size="20px"
+                class="sa-qc__icon"
+            />
+            <div class="sa-qc__main">
+                <div class="sa-qc__titlerow">
+                    <span class="sa-qc__label">{{ labelValue || quota.quotaKey }}</span>
+                    <code class="sa-qc__key">{{ quota.quotaKey }}</code>
+                    <span class="sa-chip">{{ quota.enforcementMode }}</span>
+                    <span
+                        v-if="quota.successorKey"
+                        class="sa-qc__flag sa-qc__flag--succ"
+                        :title="`ersetzt durch ${quota.successorKey}`"
+                    >
+                        ersetzt durch {{ quota.successorKey }}
+                    </span>
+                    <span
+                        v-if="quota.replaces.length"
+                        class="sa-qc__flag sa-qc__flag--repl"
+                        :title="`ersetzt: ${quota.replaces.join(', ')}`"
+                    >
+                        ersetzt: {{ quota.replaces.join(', ') }}
+                    </span>
+                </div>
+                <div class="sa-qc__sub">
+                    Einheit <code>{{ quota.unit }}</code> · UsageProvider
+                    <code v-if="quota.usageProvider">{{ quota.usageProvider }}</code>
+                    <span v-else class="sa-qc__missing">fehlt</span>
+                </div>
+                <div v-if="!quota.usageProvider" class="sa-qc__warning">
+                    Eine harte Quota ohne UsageProvider ist nicht deploy-fähig (Preflight, SPEC_V2
+                    §6.3).
+                </div>
+            </div>
+
+            <div class="sa-qc__coverage">
+                <span
+                    v-for="lng in targetLocales"
+                    :key="lng"
+                    class="sa-cov-pill"
+                    :class="coverageClass(coverage(lng))"
+                >
+                    <span>{{ localeShort(lng) }}</span>
+                    <span>{{ coveragePct(coverage(lng)) }}%</span>
+                </span>
+            </div>
+
+            <DiscoveryStatusControl
+                :status="quota.discoveryStatus"
+                @set-status="(target) => emit('review', quota.quotaKey, target)"
+            />
+            <q-icon name="chevron_right" class="sa-qc__chev" :class="{ open: expanded }" />
+        </div>
+
+        <div v-if="expanded" class="sa-qc__body">
+            <div v-if="quota.discoveryStatus === 'outdated'" class="sa-qc__banner">
+                <q-icon name="warning" size="16px" />
+                <span>
+                    Die code-abgeleiteten Quota-Fakten (Einheit/Enforcement/Provider) haben sich
+                    seit der letzten Freigabe geändert — bitte prüfen und <b>erneut freigeben</b>.
+                </span>
+            </div>
+            <CatalogEntryTransPanel
+                :entry="transEntry"
+                :fields="['label', 'unit', 'description']"
+                :active-locales="activeLocales"
+                @update:base="onTransBase"
+                @update:locale="
+                    (locale, patch) => emit('quota-locale', quota.quotaKey, locale, patch)
+                "
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import type {
+    CatalogEntryI18nFields,
+    DiscoveryStatus,
+    QuotaCatalogEntryRow,
+    UpdateCatalogEntryBaseData,
+} from '@saasicat/types';
+import CatalogEntryTransPanel from './CatalogEntryTransPanel.vue';
+import DiscoveryStatusControl from './DiscoveryStatusControl.vue';
+import {
+    coverageClass,
+    coveragePct,
+    DISCOVERY_DEFAULT_LOCALE,
+    entryCoverage,
+    localeShort,
+    type TransEntry,
+} from './discovery-ui.js';
+
+// Expandable Quota card (#20 Slice 1, sim `QuotaRow`) — same lifecycle as
+// Features. Body = translations (label/unit/description); `unit` is
+// code-derived and only translatable per target locale.
+
+const props = defineProps<{
+    quota: QuotaCatalogEntryRow;
+    activeLocales: string[];
+    expanded: boolean;
+}>();
+
+const emit = defineEmits<{
+    toggle: [];
+    review: [key: string, target: DiscoveryStatus];
+    'quota-base': [key: string, patch: UpdateCatalogEntryBaseData];
+    'quota-locale': [key: string, locale: string, patch: CatalogEntryI18nFields];
+}>();
+
+// Draft buffer for the header label — the fields themselves are buffered by
+// the CatalogEntryTransPanel; here only so the title follows along while typing.
+const drafts = reactive<{ label?: string }>({});
+const labelValue = computed(() => drafts.label ?? props.quota.label ?? '');
+
+/** Mirror base edits from the translation panel + bubble them up. */
+function onTransBase(patch: { label?: string; description?: string }): void {
+    if (patch.label !== undefined) drafts.label = patch.label;
+    emit('quota-base', props.quota.quotaKey, patch);
+}
+
+const targetLocales = computed(() =>
+    props.activeLocales.filter((l) => l !== DISCOVERY_DEFAULT_LOCALE),
+);
+
+const transEntry = computed<TransEntry>(() => ({
+    key: props.quota.quotaKey,
+    label: labelValue.value,
+    description: props.quota.description,
+    unit: props.quota.unit,
+    i18n: props.quota.i18n ?? {},
+}));
+
+function coverage(locale: string): number {
+    return entryCoverage(transEntry.value, locale, ['label', 'unit', 'description']);
+}
+</script>
+
+<style scoped>
+.sa-qc {
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    background: #fff;
+    overflow: hidden;
+}
+.sa-qc.warn {
+    border-color: #fecaca;
+}
+.sa-qc.expanded {
+    border-color: #c7d2fe;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+.sa-qc__head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    cursor: pointer;
+}
+.sa-qc.warn .sa-qc__head {
+    background: #fef2f2;
+}
+.sa-qc__icon {
+    flex-shrink: 0;
+}
+.sa-qc__main {
+    flex: 1;
+    min-width: 0;
+}
+.sa-qc__titlerow {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.sa-qc__label {
+    font-weight: 600;
+    font-size: 13px;
+    color: #0f172a;
+}
+.sa-qc__key {
+    font-size: 11px;
+}
+.sa-qc__flag {
+    font-size: 10px;
+    font-weight: 700;
+    padding: 1px 6px;
+    border-radius: 5px;
+}
+.sa-qc__flag--succ {
+    background: #fef3c7;
+    color: #92400e;
+}
+.sa-qc__flag--repl {
+    background: #dbeafe;
+    color: #1e40af;
+}
+.sa-qc__sub {
+    font-size: 11px;
+    color: #64748b;
+    margin-top: 2px;
+}
+.sa-qc__missing {
+    color: #b91c1c;
+    font-weight: 700;
+}
+.sa-qc__warning {
+    font-size: 11px;
+    color: #b91c1c;
+    margin-top: 4px;
+}
+.sa-qc__coverage {
+    display: flex;
+    gap: 6px;
+    flex-shrink: 0;
+}
+.sa-qc__chev {
+    color: #94a3b8;
+    transition: transform 0.15s;
+}
+.sa-qc__chev.open {
+    transform: rotate(90deg);
+}
+.sa-qc__body {
+    border-top: 1px solid #f1f5f9;
+    padding: 12px;
+    background: #f8fafc;
+}
+.sa-qc__banner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    border-radius: 8px;
+    padding: 8px 12px;
+    margin-bottom: 10px;
+    background: #fffbeb;
+    border: 1px solid #fde68a;
+    color: #92400e;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+    <div class="sa-stc" @click.stop>
+        <span class="sa-review" :class="`sa-review--${status}`">
+            {{ STATUS_META[status].label }}
+            <q-tooltip>{{ STATUS_META[status].hint }}</q-tooltip>
+        </span>
+        <q-btn
+            dense
+            no-caps
+            size="sm"
+            :unelevated="primary.emphasized"
+            :outline="!primary.emphasized"
+            :color="primary.emphasized ? 'primary' : undefined"
+            :label="primary.label"
+            :loading="busy"
+            @click="emit('set-status', primary.to)"
+        >
+            <q-tooltip>{{ STATUS_META[primary.to].hint }}</q-tooltip>
+        </q-btn>
+        <q-btn v-if="menu.length" dense flat round size="sm" icon="more_horiz">
+            <q-menu auto-close anchor="bottom right" self="top right">
+                <q-list dense>
+                    <q-item
+                        v-for="m in menu"
+                        :key="m.to"
+                        clickable
+                        @click="emit('set-status', m.to)"
+                    >
+                        <q-item-section :class="{ 'sa-stc__danger': m.danger }">
+                            {{ m.label }}
+                        </q-item-section>
+                    </q-item>
+                </q-list>
+            </q-menu>
+        </q-btn>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { DiscoveryStatus } from '@saasicat/types';
+import { primaryReviewAction, reviewMenuActions, STATUS_META } from './discovery-ui.js';
+
+// StatusControl (#20, design sim): status chip + contextual primary action
+// + kebab menu for the remaining lifecycle transitions. Shared by the feature
+// and quota card; the actual PATCH runs via the `set-status` event
+// in the page (reviewFeature/reviewQuota).
+
+const props = defineProps<{
+    status: DiscoveryStatus;
+    /** Review request in progress — disables the primary action. */
+    busy?: boolean;
+}>();
+
+const emit = defineEmits<{
+    'set-status': [target: DiscoveryStatus];
+}>();
+
+const primary = computed(() => primaryReviewAction(props.status));
+const menu = computed(() => reviewMenuActions(props.status));
+</script>
+
+<style scoped>
+.sa-stc {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+.sa-stc__danger {
+    color: #b91c1c;
+}
+</style>

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -0,0 +1,166 @@
+// Shared UI helpers for the discovery page (feature/quota cards, orphans,
+// translation panel, StatusControl). In its own file because
+// `<script setup>` allows no named exports and the cards share the same
+// labels/colors/coverage calculations.
+
+import type {
+    CapabilityCodeStatus,
+    CatalogEntryI18n,
+    DiscoveryStatus,
+} from '@saasicat/types';
+
+/** Translatable fields of a catalog entry. */
+export type I18nField = 'label' | 'description' | 'unit';
+
+/** Normalized entry for the translation panel (feature / quota). */
+export interface TransEntry {
+    key: string;
+    label: string;
+    description: string | null;
+    /** Quotas only — display unit, code-derived (default locale not editable). */
+    unit?: string;
+    i18n: CatalogEntryI18n;
+}
+
+export const DISCOVERY_DEFAULT_LOCALE = 'de';
+
+const LOCALE_NAMES: Record<string, { short: string; full: string }> = {
+    de: { short: 'DE', full: 'Deutsch' },
+    en: { short: 'EN', full: 'English' },
+    tr: { short: 'TR', full: 'Türkçe' },
+    fr: { short: 'FR', full: 'Français' },
+    it: { short: 'IT', full: 'Italiano' },
+    es: { short: 'ES', full: 'Español' },
+    nl: { short: 'NL', full: 'Nederlands' },
+    pl: { short: 'PL', full: 'Polski' },
+};
+
+export function localeShort(locale: string): string {
+    return LOCALE_NAMES[locale]?.short ?? locale.toUpperCase();
+}
+
+export function localeFull(locale: string): string {
+    return LOCALE_NAMES[locale]?.full ?? locale;
+}
+
+export function i18nFieldLabel(f: I18nField): string {
+    return f === 'label' ? 'Label' : f === 'description' ? 'Beschreibung' : 'Einheit';
+}
+
+// ─── Approval lifecycle (#20): status display + state machine ────────────────
+
+export const STATUS_META: Record<DiscoveryStatus, { label: string; hint: string }> = {
+    pending: {
+        label: 'Pending',
+        hint: 'Im Code gefunden, noch nicht freigegeben — steht der Planung nicht zur Verfügung.',
+    },
+    approved: {
+        label: 'Approved',
+        hint: 'Für Pläne, Bundles & Marketing freigegeben.',
+    },
+    outdated: {
+        label: 'Outdated',
+        hint: 'Code hat sich seit der Freigabe geändert — bitte erneut prüfen und freigeben.',
+    },
+    obsolete: {
+        label: 'Obsolete',
+        hint: 'Abgekündigt — nicht mehr verwenden, in neuen Plänen ausblenden.',
+    },
+};
+
+export interface ReviewAction {
+    label: string;
+    to: DiscoveryStatus;
+    /** Primary style (approve/re-approve) vs. ghost (revoke/reactivate). */
+    emphasized: boolean;
+    danger?: boolean;
+}
+
+/** Primary action per status (design sim `StatusControl`, #20). */
+export function primaryReviewAction(status: DiscoveryStatus): ReviewAction {
+    switch (status) {
+        case 'pending':
+            return { label: 'Freigeben', to: 'approved', emphasized: true };
+        case 'approved':
+            return { label: 'Freigabe entziehen', to: 'pending', emphasized: false };
+        case 'outdated':
+            return { label: 'Erneut freigeben', to: 'approved', emphasized: true };
+        case 'obsolete':
+            return { label: 'Reaktivieren', to: 'pending', emphasized: false };
+    }
+}
+
+/** Kebab menu actions per status (design sim `StatusControl`, #20). */
+export function reviewMenuActions(status: DiscoveryStatus): ReviewAction[] {
+    switch (status) {
+        case 'pending':
+            return [
+                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
+            ];
+        case 'approved':
+            return [
+                { label: 'Als veraltet markieren', to: 'outdated', emphasized: false },
+                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
+            ];
+        case 'outdated':
+            return [
+                { label: 'Freigabe entziehen', to: 'pending', emphasized: false },
+                { label: 'Als obsolet markieren', to: 'obsolete', emphasized: false, danger: true },
+            ];
+        case 'obsolete':
+            return [];
+    }
+}
+
+// ─── Capability code status (read-only code facts, #20) ──────────────────────
+
+const CODE_STATUS_LABELS: Record<CapabilityCodeStatus, string> = {
+    active: 'Aktiv',
+    experimental: 'Experimental',
+    deprecated: 'Deprecated',
+    retired: 'Retired',
+};
+
+export function codeStatusLabel(status: CapabilityCodeStatus): string {
+    return CODE_STATUS_LABELS[status] ?? status;
+}
+
+const KIND_COLORS: Record<string, string> = {
+    endpoint: '#2563eb',
+    service: '#7c3aed',
+    job: '#0891b2',
+    event: '#f59e0b',
+};
+
+export function kindStyle(kind: string): Record<string, string> {
+    const c = KIND_COLORS[kind] ?? '#64748b';
+    return { background: `${c}1a`, color: c, borderColor: `${c}33` };
+}
+
+/**
+ * Fraction 0..1 of filled translation fields of an entry in a given locale.
+ * Fields without a default value don't count (except `label` — that's mandatory).
+ */
+export function entryCoverage(entry: TransEntry, locale: string, fields: I18nField[]): number {
+    let total = 0;
+    let filled = 0;
+    for (const f of fields) {
+        const base =
+            f === 'unit'
+                ? (entry.unit ?? '')
+                : ((f === 'label' ? entry.label : entry.description) ?? '');
+        if (f !== 'label' && !base.trim()) continue;
+        total += 1;
+        if ((entry.i18n?.[locale]?.[f] ?? '').trim()) filled += 1;
+    }
+    return total === 0 ? 1 : filled / total;
+}
+
+export function coveragePct(ratio: number): number {
+    return Math.round(ratio * 100);
+}
+
+export function coverageClass(ratio: number): string {
+    const p = coveragePct(ratio);
+    return p === 100 ? 'complete' : p >= 50 ? 'warn' : 'low';
+}

package/src/pages-standard/email-history.types.ts

@@ -0,0 +1,48 @@
+// Types of the shared EmailHistoryPage (platform email history) — deliberately
+// extracted from the `.vue` so consumers can import them as regular TS types
+// (a named type import directly from a `.vue` is not resolved through the
+// `*.vue` module shim, but it is from this `.ts`; re-exported via the package
+// index).
+
+export type EmailHistoryStatus = 'PENDING' | 'SENT' | 'FAILED' | 'BOUNCED';
+
+/** List projection — deliberately without body (loaded only in the detail view). */
+export interface EmailHistoryRow {
+    id: string;
+    fromEmail: string;
+    toEmail: string;
+    subject: string;
+    status: EmailHistoryStatus;
+    sentAt?: string | null;
+    createdAt: string;
+}
+
+/** Complete entry including content, headers, SMTP response and errors. */
+export interface EmailHistoryDetail extends EmailHistoryRow {
+    ccEmail?: string | null;
+    bccEmail?: string | null;
+    bodyHtml?: string | null;
+    bodyText?: string | null;
+    errorMessage?: string | null;
+    smtpResponse?: string | null;
+}
+
+/** Search/filter/pagination input — field names as in the backend (QueryEmailLogDto). */
+export interface EmailHistoryFilter {
+    search?: string;
+    status?: EmailHistoryStatus;
+    from?: string;
+    to?: string;
+    page?: number;
+    limit?: number;
+}
+
+export interface EmailHistoryListResult {
+    rows: EmailHistoryRow[];
+    total: number;
+}
+
+export interface EmailHistoryResendResult {
+    success: boolean;
+    message?: string;
+}