@saasicat/ui-vue 0.2.0

package/src/components/plan-version-editor/PlanVersionEditorHeader.vue

@@ -0,0 +1,94 @@
+<template>
+    <header class="pve-bar">
+        <div class="pve-bar-left">
+            <div class="pve-titlechip">
+                <span class="pve-titlechip-kicker">PLAN</span>
+                <span class="pve-chip pve-chip--plan">{{ planKey }}</span>
+            </div>
+            <h2 class="pve-title">
+                {{ editingId ? `Draft v${version} bearbeiten` : `Neue Version v${version}` }}
+            </h2>
+            <span class="pve-chip pve-chip--draft pve-chip--dot">Draft</span>
+            <span class="pve-bar-note">
+                Vorgänger wird beim Publish auf
+                <code class="pve-mono">{{ predecessorValidUntilHint }}</code> superseded
+            </span>
+        </div>
+        <div class="pve-bar-right">
+            <button
+                class="pve-btn"
+                type="button"
+                :disabled="!hasPredecessor"
+                :title="hasPredecessor ? undefined : 'Keine Vorgänger-Version (v1)'"
+                @click="$emit('showDiff')"
+            >
+                <span class="pve-ico" aria-hidden="true">
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                    </svg>
+                </span>
+                <span>Diff vs. Vorgänger</span>
+            </button>
+            <button class="pve-btn" type="button" @click="$emit('cancel')">
+                <span class="pve-ico" style="transform: rotate(180deg)" aria-hidden="true">
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M5 12h14M13 5l7 7-7 7" />
+                    </svg>
+                </span>
+                <span>Zurück</span>
+            </button>
+            <button
+                class="pve-btn pve-btn--primary"
+                type="button"
+                :disabled="!canSave"
+                @click="$emit('save')"
+            >
+                <span>Weiter · Review</span>
+                <span class="pve-ico" aria-hidden="true">
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path d="M5 12h14M13 5l7 7-7 7" />
+                    </svg>
+                </span>
+            </button>
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    planKey: string;
+    editingId: string | null;
+    version: number;
+    predecessorValidUntilHint: string;
+    hasPredecessor: boolean;
+    canSave: boolean;
+}>();
+
+defineEmits<{
+    (e: 'showDiff'): void;
+    (e: 'cancel'): void;
+    (e: 'save'): void;
+}>();
+</script>

package/src/components/plan-version-editor/types.ts

@@ -0,0 +1,96 @@
+export interface DiscoveryFeature {
+    featureKey: string;
+}
+
+export interface DiscoveryQuota {
+    quotaKey: string;
+    label?: string | null;
+    unit?: string | null;
+}
+
+export interface BundleEntry {
+    bundleKey: string;
+    label?: string | null;
+    features: string[];
+}
+
+export interface FeatureMeta {
+    label?: string;
+    /** Bucket in the library pool (e.g. "Core", "Communication"). */
+    group?: string;
+}
+
+export interface PredecessorVersion {
+    version: number;
+    features: string[];
+    quotas: Record<string, number>;
+    monthlyNet: string;
+    yearlyNet: string;
+    /** "Valid from" of the predecessor version — the draft must start strictly after it. */
+    validFrom: string | null;
+}
+
+export interface EditorDiffRow {
+    id: string;
+    section: string;
+    label: string;
+    sub?: string;
+    from?: string;
+    to?: string;
+    bg: string;
+    border: string;
+    color: string;
+    sign: string;
+    tag: string;
+}
+
+export interface DraftForm {
+    version: number;
+    features: string[];
+    quotas: Record<string, number>;
+    monthlyNet: string;
+    yearlyNet: string;
+    changeNote: string;
+    marketed: boolean;
+    validFrom: string | null;
+    validUntil: string | null;
+}
+
+/**
+ * Save payload = DraftForm plus the persisted bundle selection. `bundles`
+ * is derived from the final feature list (all fully-active bundles),
+ * so that the persisted list is invariantly consistent with `features` —
+ * see `PlanVersionRow.bundles`.
+ */
+export interface PlanVersionSavePayload extends DraftForm {
+    bundles: string[];
+}
+
+export type PoolTab = 'features' | 'quotas' | 'bundles';
+export type PoolKind = 'feature' | 'quota' | 'bundle';
+export type PreviewMode = 'desktop' | 'mobile';
+
+export interface PoolTabItem {
+    id: PoolTab;
+    label: string;
+    count: number;
+}
+
+export interface FeatureGroup {
+    key: string;
+    label: string;
+    rows: DiscoveryFeature[];
+}
+
+export interface ChecklistItem {
+    id: string;
+    label: string;
+    ok: boolean;
+}
+
+export interface SelectedQuotaRow {
+    quotaKey: string;
+    label: string;
+    unit: string;
+    sub: string;
+}

package/src/components/wizard-stepper/WizardStepper.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="wz-stepper">
+        <template v-for="(step, i) in steps" :key="i">
+            <div
+                class="wz-step"
+                :class="{
+                    'wz-step--current': i === currentIndex,
+                    'wz-step--done': i < currentIndex,
+                }"
+            >
+                <span class="wz-step-num">
+                    <svg
+                        v-if="i < currentIndex"
+                        width="11"
+                        height="11"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="3.5"
+                        aria-hidden="true"
+                    >
+                        <path d="M5 13l4 4L19 7" />
+                    </svg>
+                    <template v-else>{{ i + 1 }}</template>
+                </span>
+                <span>{{ step.label }}</span>
+            </div>
+            <span v-if="i < steps.length - 1" class="wz-step-sep" aria-hidden="true" />
+        </template>
+        <div v-if="hint" class="wz-stepper-hint">{{ hint }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// WizardStepper — generic step bar for multi-step SuperAdmin
+// wizards (plan creation, bundle creation, …). Purely presentational: the host
+// controls `currentIndex`; the component does not know the flow.
+
+export interface WizardStep {
+    label: string;
+}
+
+defineProps<{
+    steps: WizardStep[];
+    /** 0-based index of the current step. */
+    currentIndex: number;
+    /** Optional hint text, right-aligned (e.g. "Jederzeit als Draft speicherbar"). */
+    hint?: string;
+}>();
+</script>
+
+<style scoped>
+.wz-stepper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 14px 26px;
+    background: var(--sa-bg-surface);
+    border-bottom: 1px solid var(--sa-border);
+}
+.wz-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    border-radius: 999px;
+    font: 500 12.5px var(--sa-font-body);
+    color: var(--sa-muted);
+}
+.wz-step--current {
+    background: var(--sa-heading);
+    color: #fff;
+}
+.wz-step--done {
+    color: var(--sa-positive);
+}
+.wz-step-num {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--sa-border);
+    color: var(--sa-muted-dark);
+    display: grid;
+    place-items: center;
+    font: 700 11px var(--sa-font-body);
+    flex: 0 0 auto;
+}
+.wz-step--current .wz-step-num {
+    background: rgba(255, 255, 255, 0.18);
+    color: #fff;
+}
+.wz-step--done .wz-step-num {
+    background: var(--sa-positive-soft);
+    color: var(--sa-positive);
+}
+.wz-step-sep {
+    width: 14px;
+    height: 1px;
+    background: var(--sa-border);
+    margin: 0 2px;
+}
+.wz-stepper-hint {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--sa-muted);
+}
+</style>

package/src/create-admin-routes.ts

@@ -0,0 +1,68 @@
+// createAdminRoutes — shared route shell for SuperAdmin apps.
+//
+// The structure (public `/login`, fail-closed `/admin-error`, `/admin` layout
+// with `→ dashboard` redirect + `ProjectPageHost` catch-all, `/` and
+// 404 redirect) is identical across all consumers. App-specific are only the
+// layout/error/login components and the concrete child pages — those the app
+// passes through. Replaces the ~25 lines of copied route boilerplate per app.
+
+import type { RouteRecordRaw } from 'vue-router';
+
+import { createProjectPageHostRoute } from './project-page-host.js';
+
+/** Eager or lazy component loader (`() => import(...)`). */
+type RouteComponent = NonNullable<RouteRecordRaw['component']>;
+
+export interface CreateAdminRoutesOptions {
+    /**
+     * Loader for the shared login page. The app passes it through as a
+     * package-path import (resolved by the app bundler):
+     * `() => import('@saasicat/ui-vue/pages-standard/SuperAdminLoginPage.vue')`.
+     */
+    loginPage: RouteComponent;
+    /** Layout component for `/admin` (e.g. `() => import('@/layouts/AdminLayout.vue')`). */
+    adminLayout: RouteComponent;
+    /** Fail-closed error page for `manifestGuard.errorRoute` (`/admin-error`, public). */
+    adminErrorPage: RouteComponent;
+    /**
+     * App-specific pages under `/admin` (without the `→ dashboard` redirect and
+     * the `ProjectPageHost` catch-all — those the factory adds). Exactly the
+     * `children` entries that are duplicated per app today.
+     */
+    children: RouteRecordRaw[];
+    /** Default target of the `/admin` index redirect. Default `/admin/dashboard`. */
+    dashboardPath?: string;
+}
+
+export function createAdminRoutes(options: CreateAdminRoutesOptions): RouteRecordRaw[] {
+    return [
+        {
+            path: '/login',
+            name: 'login',
+            component: options.loginPage,
+            meta: { public: true },
+        },
+        {
+            // `meta.public: true` MUST be set, otherwise the route runs through
+            // the manifest guard again → redirect loop.
+            path: '/admin-error',
+            name: 'admin-error',
+            component: options.adminErrorPage,
+            meta: { public: true },
+        },
+        {
+            path: '/admin',
+            component: options.adminLayout,
+            children: [
+                { path: '', redirect: options.dashboardPath ?? '/admin/dashboard' },
+                ...options.children,
+                // Catch-all for manifest ProjectPages — Vue Router 4 matches
+                // more specific children first; the host only steps in when
+                // no static page matches. MUST come last.
+                createProjectPageHostRoute(),
+            ],
+        },
+        { path: '/', redirect: '/admin' },
+        { path: '/:pathMatch(.*)*', redirect: '/admin' },
+    ];
+}