@saasicat/ui-vue 0.2.0

package/src/pages-standard/plans-page/PlanBundleOverview.vue

@@ -0,0 +1,147 @@
+<template>
+    <section class="sa-bundles">
+        <div class="sa-bundles__head">
+            <h2 class="sa-bundles__title">Bundles</h2>
+            <span class="sa-bundles__count">{{ bundles.length }}</span>
+        </div>
+
+        <div v-if="bundles.length === 0" class="sa-bundles__empty">
+            Keine Bundles vorhanden.
+        </div>
+
+        <div v-else class="sa-bundles__grid">
+            <q-card v-for="bundle in bundles" :key="bundle.bundleKey" flat bordered class="sa-bundle">
+                <q-card-section class="sa-bundle__header">
+                    <div class="sa-bundle__label">{{ bundle.label ?? bundle.bundleKey }}</div>
+                    <div class="sa-bundle__key">{{ bundle.bundleKey }}</div>
+                </q-card-section>
+                <q-separator />
+                <q-card-section>
+                    <div class="sa-bundle__caption">Enthält</div>
+                    <div class="sa-bundle__chips">
+                        <q-chip
+                            v-for="feature in bundle.features"
+                            :key="feature"
+                            dense
+                            square
+                            size="sm"
+                            class="sa-bundle__chip"
+                        >
+                            {{ featureLabel(feature) }}
+                        </q-chip>
+                        <span v-if="bundle.features.length === 0" class="sa-bundle__muted">—</span>
+                    </div>
+                </q-card-section>
+                <q-card-section class="sa-bundle__compat">
+                    <div class="sa-bundle__caption">Kompatibel mit</div>
+                    <div class="sa-bundle__plans">{{ compatLabel(bundle) }}</div>
+                </q-card-section>
+            </q-card>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { PlanRow } from '@saasicat/types';
+
+interface BundleEntry {
+    bundleKey: string;
+    label?: string | null;
+    features: string[];
+    compatiblePlanKeys?: string[] | null;
+}
+
+const props = defineProps<{
+    bundles: BundleEntry[];
+    plans: PlanRow[];
+    featureRegistry: Record<string, { label?: string; group?: string }>;
+}>();
+
+function featureLabel(featureKey: string): string {
+    return props.featureRegistry[featureKey]?.label ?? featureKey;
+}
+
+function planLabel(planKey: string): string {
+    return props.plans.find((p) => p.planKey === planKey)?.label ?? planKey;
+}
+
+// Empty compatibility list = bundle applies to all plans (cf. PlanMatrix.hasBundle).
+function compatLabel(bundle: BundleEntry): string {
+    const keys = bundle.compatiblePlanKeys ?? [];
+    if (keys.length === 0) return 'Alle Pläne';
+    return keys.map(planLabel).join(', ');
+}
+</script>
+
+<style scoped>
+.sa-bundles {
+    padding: 8px 16px 32px;
+}
+.sa-bundles__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 8px 0 12px;
+}
+.sa-bundles__title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+    color: #0f172a;
+}
+.sa-bundles__count {
+    font-size: 12px;
+    color: #64748b;
+    background: #e2e8f0;
+    border-radius: 999px;
+    padding: 1px 8px;
+}
+.sa-bundles__empty {
+    color: #64748b;
+    font-size: 14px;
+    padding: 8px 0;
+}
+.sa-bundles__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 12px;
+}
+.sa-bundle__header {
+    padding-bottom: 8px;
+}
+.sa-bundle__label {
+    font-weight: 600;
+    color: #0f172a;
+}
+.sa-bundle__key {
+    font-size: 11px;
+    color: #94a3b8;
+    font-family: monospace;
+}
+.sa-bundle__caption {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #94a3b8;
+    margin-bottom: 4px;
+}
+.sa-bundle__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+.sa-bundle__chip {
+    background: #eef2ff;
+    color: #3730a3;
+}
+.sa-bundle__muted {
+    color: #94a3b8;
+}
+.sa-bundle__compat {
+    padding-top: 0;
+}
+.sa-bundle__plans {
+    font-size: 13px;
+    color: #334155;
+}
+</style>

package/src/pages-standard/plans-page/PlanDiscardDraftDialog.vue

@@ -0,0 +1,46 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <q-card style="min-width: 400px">
+            <q-card-section>
+                <div class="text-h6">Draft verwerfen?</div>
+                <div class="text-body2 q-mt-sm">
+                    Draft v{{ target?.draft.version }} von
+                    <code>{{ target?.plan.planKey }}</code> wird unwiderruflich gelöscht. Published
+                    Versions bleiben unverändert.
+                </div>
+            </q-card-section>
+            <q-banner v-if="error" class="bg-warning q-mx-md q-mb-md" rounded>
+                {{ error }}
+            </q-banner>
+            <q-card-actions align="right">
+                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn
+                    color="negative"
+                    label="Verwerfen"
+                    :loading="discarding"
+                    @click="$emit('execute')"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { PlanDiscardTarget } from './types.js';
+
+defineProps<{
+    modelValue: boolean;
+    target: PlanDiscardTarget | null;
+    error: string | null;
+    discarding: boolean;
+}>();
+
+defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'execute'): void;
+}>();
+</script>

package/src/pages-standard/plans-page/PlanPublishDialog.vue

@@ -0,0 +1,106 @@
+<template>
+    <q-dialog
+        :model-value="modelValue"
+        persistent
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <q-card style="min-width: 420px">
+            <q-card-section>
+                <div class="text-h6">Version publishen?</div>
+                <div class="text-body2 q-mt-sm">
+                    Plan <code>{{ selectedPlan?.planKey }}</code
+                    >, Draft v{{ publishTarget?.version }}.
+                </div>
+                <div class="text-caption text-grey-7 q-mt-sm">
+                    Eine ggf. zuvor live Version wird auf <code>supersededAt</code> gesetzt
+                    (Vertragsschutz P1: Bestand-Subscriptions bleiben auf der alten Version bis zum
+                    nächsten Renewal).
+                </div>
+                <q-checkbox
+                    :model-value="forceRegressive"
+                    label="Force-Publish auch bei Regression (Feature entfernt / Quota gesenkt / Preis erhöht)"
+                    class="q-mt-md"
+                    @update:model-value="$emit('update:forceRegressive', Boolean($event))"
+                />
+                <q-checkbox
+                    :model-value="allowZeroPrice"
+                    label="Preis 0,00 bewusst zulassen (kostenloser Sondervertrag)"
+                    class="q-mt-sm"
+                    @update:model-value="$emit('update:allowZeroPrice', Boolean($event))"
+                />
+            </q-card-section>
+            <q-banner v-if="publishError" class="bg-warning q-mx-md q-mb-md" rounded>
+                {{ publishError }}
+            </q-banner>
+            <q-card-section v-if="regressionChanges.length > 0" class="q-pt-none">
+                <div class="text-subtitle2 q-mb-xs">Regressive Änderungen:</div>
+                <ul class="sa-publish-regression">
+                    <li v-for="c in regressionChanges" :key="c.field">
+                        <strong>{{ fieldLabel(c.field) }}:</strong>
+                        <span class="sa-publish-regression__old">
+                            {{ formatChangeValue(c.oldValue) }}
+                        </span>
+                        <q-icon name="arrow_forward" size="14px" class="q-mx-xs" />
+                        <span class="sa-publish-regression__new">
+                            {{ formatChangeValue(c.newValue) }}
+                        </span>
+                    </li>
+                </ul>
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn
+                    color="primary"
+                    label="Publish"
+                    :loading="publishing"
+                    @click="$emit('execute')"
+                />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import type { RegressionChange } from './types.js';
+
+defineProps<{
+    modelValue: boolean;
+    selectedPlan: PlanRow | null;
+    publishTarget: PlanVersionRow | null;
+    forceRegressive: boolean;
+    allowZeroPrice: boolean;
+    publishing: boolean;
+    publishError: string | null;
+    regressionChanges: RegressionChange[];
+    fieldLabel: (field: string) => string;
+    formatChangeValue: (value: unknown) => string;
+}>();
+
+defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'update:forceRegressive', value: boolean): void;
+    (e: 'update:allowZeroPrice', value: boolean): void;
+    (e: 'execute'): void;
+}>();
+</script>
+
+<style scoped>
+.sa-publish-regression {
+    margin: 0;
+    padding-left: 18px;
+    font-size: 13px;
+    color: #334155;
+}
+.sa-publish-regression li {
+    margin: 4px 0;
+}
+.sa-publish-regression__old {
+    color: #94a3b8;
+    text-decoration: line-through;
+}
+.sa-publish-regression__new {
+    color: #b91c1c;
+    font-weight: 600;
+}
+</style>

package/src/pages-standard/plans-page/PlansPageToast.vue

@@ -0,0 +1,69 @@
+<template>
+    <transition name="pl-toast">
+        <div v-if="message" class="sa-plans__toast">
+            <span class="sa-plans__toast-tick" aria-hidden="true">
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                >
+                    <path d="M5 13l4 4L19 7" />
+                </svg>
+            </span>
+            <span>{{ message }}</span>
+        </div>
+    </transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    message: string | null;
+}>();
+</script>
+
+<style scoped>
+.sa-plans__toast {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #0f172a;
+    color: #fff;
+    padding: 12px 18px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font:
+        500 13px 'Inter',
+        system-ui,
+        sans-serif;
+    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
+    z-index: 6000;
+    max-width: 80vw;
+}
+.sa-plans__toast-tick {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #10b981;
+    color: #fff;
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+}
+.pl-toast-enter-active,
+.pl-toast-leave-active {
+    transition:
+        opacity 0.22s ease,
+        transform 0.22s ease;
+}
+.pl-toast-enter-from,
+.pl-toast-leave-to {
+    opacity: 0;
+    transform: translate(-50%, 12px);
+}
+</style>

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

@@ -0,0 +1,18 @@
+import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+
+export interface PlanArchiveTarget {
+    plan: PlanRow;
+    hasLive: boolean;
+}
+
+export interface PlanDiscardTarget {
+    plan: PlanRow;
+    draft: PlanVersionRow;
+}
+
+export interface RegressionChange {
+    field: string;
+    oldValue: unknown;
+    newValue: unknown;
+    direction: 'REGRESSION' | 'IMPROVEMENT' | string;
+}

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

@@ -0,0 +1,41 @@
+// Types of the shared PlatformEmailPage — deliberately extracted from the `.vue` so that
+// consumers can import them as regular TS types. A named type import
+// directly from a `.vue` is not resolved via the `*.vue` module shim (vue-tsc);
+// from this `.ts` it is (re-exported via the package index).
+
+export interface PlatformEmailProvider {
+    id: string;
+    name: string;
+    smtpHost: string;
+    smtpPort: number;
+    smtpUser: string;
+    encryption: string;
+    autoTls?: boolean;
+    fromEmail: string;
+    fromName?: string | null;
+    isDefault: boolean;
+    active: boolean;
+    [extra: string]: unknown;
+}
+
+export interface PlatformEmailWriteInput {
+    name: string;
+    smtpHost: string;
+    smtpPort: number;
+    smtpUser: string;
+    smtpPassword?: string;
+    encryption: string;
+    fromEmail: string;
+    fromName?: string;
+    active?: boolean;
+}
+
+export interface PlatformEmailTestInput {
+    toEmail: string;
+    subject?: string;
+}
+
+export interface PlatformEmailTestResult {
+    success: boolean;
+    message: string;
+}

package/src/pages-standard/sa-theme.css

@@ -0,0 +1,223 @@
+/* SuperAdmin UI theme — CSS variables for the platform pages.
+ *
+ * Consumer apps can override individual
+ * variables via their own `:root` block in the app CSS — like
+ * any CSS var override. Class names follow the `sa-` prefix convention,
+ * i.e. an app CSS can, for example, re-style `.sa-tenants__title` precisely
+ * without touching the platform code.
+ *
+ */
+
+:root {
+    --sa-bg-app: #f1f5f9;
+    --sa-bg-surface: #ffffff;
+    --sa-primary: #3f6bff;
+    --sa-primary-soft: rgba(63, 107, 255, 0.08);
+    --sa-primary-softer: rgba(63, 107, 255, 0.04);
+    --sa-primary-border: rgba(63, 107, 255, 0.18);
+    --sa-positive: #047857;
+    --sa-positive-light: #10b981;
+    --sa-positive-soft: rgba(4, 120, 87, 0.1);
+    --sa-negative: #dc2626;
+    --sa-negative-soft: rgba(220, 38, 38, 0.08);
+    --sa-warning: #b45309;
+    --sa-warning-soft: rgba(245, 158, 11, 0.1);
+    --sa-amber: #f59e0b;
+    --sa-amber-light: #fbbf24;
+    --sa-amber-border: rgba(245, 158, 11, 0.3);
+    --sa-heading: #0f172a;
+    --sa-body: #1e293b;
+    --sa-muted: #64748b;
+    --sa-muted-dark: #475569;
+    --sa-border: #e2e8f0;
+    --sa-border-soft: #f1f5f9;
+    --sa-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+    --sa-font-body: 'Inter', system-ui, sans-serif;
+    --sa-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ * Shared page chrome — header strip, stat pills, toolbar, card.
+ * Pattern from the plan simulation; pages use it instead of creating their own
+ * BEM variants, so the look stays consistent across the entire
+ * SuperAdmin surface.
+ * ───────────────────────────────────────────────────────────── */
+
+.sa-page-head {
+    display: flex;
+    align-items: flex-end;
+    gap: 20px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+}
+.sa-page-head__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--sa-heading);
+}
+.sa-page-head__sub {
+    margin: 3px 0 0;
+    font-size: 12.5px;
+    color: var(--sa-muted);
+}
+.sa-page-head__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* Stat pill strip — clickable filter tiles (see pl-stat in the sim). */
+.sa-stats {
+    display: flex;
+    gap: 8px;
+    margin: 4px 0 16px;
+    flex-wrap: wrap;
+    align-items: stretch;
+}
+.sa-stat {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
+    border-radius: 10px;
+    padding: 10px 14px 9px;
+    cursor: pointer;
+    min-width: 112px;
+    transition:
+        border-color 0.12s,
+        background 0.12s,
+        box-shadow 0.12s;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+}
+.sa-stat:hover {
+    background: #fafbfd;
+    border-color: #cbd5e1;
+}
+.sa-stat--active {
+    border-color: var(--sa-heading);
+    box-shadow:
+        0 0 0 1px var(--sa-heading) inset,
+        0 2px 6px rgba(15, 23, 42, 0.06);
+}
+.sa-stat__num {
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: var(--sa-heading);
+    line-height: 1.05;
+}
+.sa-stat__label {
+    font-size: 11.5px;
+    font-weight: 600;
+    color: var(--sa-muted);
+    margin-top: 2px;
+}
+.sa-stat__hint {
+    font: 500 10px var(--sa-font-mono);
+    letter-spacing: 0.04em;
+    color: #94a3b8;
+    margin-top: 1px;
+}
+/* Color variants — analogous to active-state/warn-state/danger-state in the sim. */
+.sa-stat--positive .sa-stat__num {
+    color: var(--sa-positive);
+}
+.sa-stat--positive.sa-stat--active {
+    border-color: var(--sa-positive-light);
+    box-shadow:
+        0 0 0 1px var(--sa-positive-light) inset,
+        0 2px 6px rgba(16, 185, 129, 0.1);
+}
+.sa-stat--warn .sa-stat__num {
+    color: var(--sa-warning);
+}
+.sa-stat--warn.sa-stat--active {
+    border-color: var(--sa-amber);
+    box-shadow:
+        0 0 0 1px var(--sa-amber) inset,
+        0 2px 6px rgba(245, 158, 11, 0.1);
+}
+.sa-stat--danger .sa-stat__num {
+    color: var(--sa-negative);
+}
+.sa-stat--danger.sa-stat--active {
+    border-color: var(--sa-negative);
+    box-shadow:
+        0 0 0 1px var(--sa-negative) inset,
+        0 2px 6px rgba(239, 68, 68, 0.1);
+}
+.sa-stat--info .sa-stat__num {
+    color: #1d4ed8;
+}
+.sa-stat--info.sa-stat--active {
+    border-color: #3b82f6;
+    box-shadow:
+        0 0 0 1px #3b82f6 inset,
+        0 2px 6px rgba(59, 130, 246, 0.1);
+}
+.sa-stat--muted .sa-stat__num {
+    color: var(--sa-muted-dark);
+}
+.sa-stat--purple .sa-stat__num {
+    color: #6b21a8;
+}
+.sa-stat--purple.sa-stat--active {
+    border-color: #a855f7;
+    box-shadow:
+        0 0 0 1px #a855f7 inset,
+        0 2px 6px rgba(168, 85, 247, 0.1);
+}
+
+/* Toolbar (search + filter buttons + sort). */
+.sa-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 14px;
+    flex-wrap: wrap;
+}
+.sa-toolbar__search {
+    flex: 1;
+    min-width: 220px;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
+    border-radius: 10px;
+    padding: 6px 12px;
+}
+.sa-toolbar__search input {
+    flex: 1;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font: 13px var(--sa-font-body);
+    color: var(--sa-body);
+}
+.sa-toolbar__search input::placeholder {
+    color: #94a3b8;
+}
+
+/* Generic card (cards in dashboard/detail sections). */
+.sa-card {
+    background: var(--sa-bg-surface);
+    border: 1px solid var(--sa-border);
+    border-radius: 12px;
+    padding: 16px 18px;
+}
+.sa-card__title {
+    margin: 0 0 12px;
+    font-family: var(--sa-font-head);
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--sa-heading);
+    letter-spacing: -0.005em;
+}