@saasicat/ui-vue 0.7.0 → 0.8.0

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

@@ -1,309 +0,0 @@
-<template>
-    <header class="sa-pv-header">
-        <div class="sa-pv-header__row">
-            <div class="sa-pv-header__col">
-                <div class="sa-pv-header__chips">
-                    <span class="sa-pv-header__label">{{ snapshot.label }}</span>
-                    <PlanVersionStatusBadge :status="snapshot.status" />
-                    <template v-if="compareSnapshot">
-                        <q-icon name="compare_arrows" size="16px" class="sa-pv-header__cmp-icon" />
-                        <span class="sa-pv-header__label sa-pv-header__label--cmp">{{
-                            compareSnapshot.label
-                        }}</span>
-                        <button
-                            type="button"
-                            class="sa-pv-header__cmp-btn"
-                            @click="emit('clearCompare')"
-                        >
-                            <q-icon name="close" size="14px" /> {{ msg.compareEnd }}
-                        </button>
-                    </template>
-                </div>
-                <h1 class="sa-pv-header__title">{{ snapshot.title }}</h1>
-                <p class="sa-pv-header__desc">{{ snapshot.description }}</p>
-
-                <div class="sa-pv-header__meta">
-                    <span
-                        v-if="snapshot.publishedAt"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--ok"
-                    >
-                        <q-icon name="rocket_launch" size="14px" />
-                        {{ publishedOnLabel }}
-                    </span>
-                    <span
-                        v-if="snapshot.kind === 'drafts'"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--warn"
-                    >
-                        <q-icon name="edit_note" size="14px" />
-                        <strong>{{ snapshot.draftCount }}</strong> {{ msg.header.openDrafts }}
-                    </span>
-                    <span
-                        v-if="snapshot.regressionCount > 0"
-                        class="sa-pv-header__meta-item sa-pv-header__meta-item--bad"
-                    >
-                        <q-icon name="trending_down" size="14px" />
-                        <strong>{{ snapshot.regressionCount }}</strong> {{ regressionLabel }}
-                    </span>
-                </div>
-            </div>
-
-            <div class="sa-pv-header__actions">
-                <button
-                    v-if="canPublish"
-                    type="button"
-                    class="sa-pv-header__publish"
-                    @click="emit('publish')"
-                >
-                    <q-icon name="rocket_launch" size="16px" />
-                    {{ msg.header.startPublishFlow }}
-                </button>
-            </div>
-        </div>
-
-        <div class="sa-pv-header__view-row">
-            <div
-                class="sa-pv-header__switcher"
-                :class="{ 'sa-pv-header__switcher--disabled': !!compareSnapshot }"
-            >
-                <button
-                    v-for="m in resolvedModes"
-                    :key="m.id"
-                    type="button"
-                    class="sa-pv-header__mode-btn"
-                    :class="{ 'sa-pv-header__mode-btn--active': viewMode === m.id }"
-                    @click="emit('viewChange', m.id)"
-                >
-                    <q-icon :name="m.icon" size="14px" />
-                    {{ m.label }}
-                </button>
-            </div>
-            <span v-if="compareSnapshot" class="sa-pv-header__cmp-hint">
-                <q-icon name="compare_arrows" size="13px" />
-                {{ msg.header.compareModeHint }}
-            </span>
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import { computed } 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 { formatDate } from './format.js';
-import PlanVersionStatusBadge from './PlanVersionStatusBadge.vue';
-import type { PlanVersionViewMode } from './types.js';
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    viewMode: PlanVersionViewMode;
-    compareSnapshot: CatalogSnapshot | null;
-    /** Overrides the localized default view switcher. */
-    modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'viewChange', mode: PlanVersionViewMode): void;
-    (e: 'publish'): void;
-    (e: 'clearCompare'): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const canPublish = computed(
-    () => props.snapshot.kind === 'drafts' && props.snapshot.draftCount > 0,
-);
-
-const publishedOnLabel = computed(() =>
-    formatMessage(msg.value.header.publishedOn, {
-        date: formatDate(props.snapshot.publishedAt ?? undefined, locale.value),
-    }),
-);
-
-const regressionLabel = computed(() =>
-    props.snapshot.regressionCount === 1
-        ? msg.value.header.regressionOne
-        : msg.value.header.regressionMany,
-);
-
-const resolvedModes = computed(
-    () =>
-        props.modes ?? [
-            { id: 'list' as const, label: msg.value.header.modeList, icon: 'list' },
-            { id: 'matrix' as const, label: msg.value.header.modeMatrix, icon: 'grid_view' },
-            { id: 'audit' as const, label: msg.value.header.modeAudit, icon: 'history' },
-        ],
-);
-</script>
-
-<style scoped>
-.sa-pv-header {
-    padding: 20px 28px 18px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    background: var(--sa-bg-surface, #ffffff);
-}
-.sa-pv-header__row {
-    display: flex;
-    align-items: flex-start;
-    gap: 20px;
-}
-.sa-pv-header__col {
-    flex: 1;
-    min-width: 0;
-}
-.sa-pv-header__chips {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 6px;
-    flex-wrap: wrap;
-}
-.sa-pv-header__label {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-    background: #f1f5f9;
-    padding: 3px 10px;
-    border-radius: 6px;
-}
-.sa-pv-header__label--cmp {
-    background: #fef3c7;
-}
-.sa-pv-header__cmp-icon {
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__cmp-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--sa-muted, #64748b);
-    font-size: 11px;
-    font-weight: 600;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.sa-pv-header__title {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 22px;
-    color: var(--sa-heading, #0f172a);
-    letter-spacing: -0.01em;
-}
-.sa-pv-header__desc {
-    margin: 6px 0 0;
-    color: var(--sa-muted-dark, #475569);
-    font-size: 13.5px;
-    line-height: 1.55;
-    max-width: 760px;
-}
-
-.sa-pv-header__meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-top: 14px;
-    font-size: 12px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__meta-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-header__meta-item strong {
-    color: var(--sa-body, #1e293b);
-    font-weight: 600;
-}
-.sa-pv-header__meta-item--ok :deep(.q-icon) {
-    color: var(--sa-positive, #047857);
-}
-.sa-pv-header__meta-item--warn :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-.sa-pv-header__meta-item--bad :deep(.q-icon) {
-    color: var(--sa-negative, #dc2626);
-}
-.sa-pv-header__meta-item--bad strong {
-    color: var(--sa-negative, #dc2626);
-}
-
-.sa-pv-header__actions {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-}
-.sa-pv-header__publish {
-    background: var(--sa-primary, #3f6bff);
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 18px;
-    font-size: 13px;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    box-shadow: 0 1px 3px rgba(63, 107, 255, 0.3);
-}
-
-.sa-pv-header__view-row {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 18px;
-    flex-wrap: wrap;
-}
-.sa-pv-header__switcher {
-    display: inline-flex;
-    background: #f1f5f9;
-    padding: 3px;
-    border-radius: 9px;
-}
-.sa-pv-header__switcher--disabled {
-    opacity: 0.5;
-    pointer-events: none;
-}
-.sa-pv-header__mode-btn {
-    background: transparent;
-    color: var(--sa-body, #1e293b);
-    border: none;
-    border-radius: 7px;
-    padding: 6px 12px;
-    font-size: 12.5px;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-}
-.sa-pv-header__mode-btn :deep(.q-icon) {
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-header__mode-btn--active {
-    background: #fff;
-    color: var(--sa-primary, #3f6bff);
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
-}
-.sa-pv-header__mode-btn--active :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-
-.sa-pv-header__cmp-hint {
-    font-size: 11.5px;
-    font-weight: 600;
-    color: var(--sa-warning, #b45309);
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    padding: 4px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-}
-</style>

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

@@ -1,48 +0,0 @@
-<template>
-    <span class="sa-pv-status-badge" :class="`sa-pv-status-badge--${status.toLowerCase()}`">
-        <q-icon :name="cfg.icon" size="12px" />
-        {{ cfg.label }}
-    </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-type Status = 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
-const props = defineProps<{ status: Status }>();
-
-const STATUS_CFG: Record<Status, { label: string; icon: string }> = {
-    DRAFT: { label: 'DRAFT', icon: 'edit_note' },
-    ACTIVE: { label: 'AKTIV', icon: 'check_circle' },
-    ARCHIVED: { label: 'ARCHIV', icon: 'archive' },
-};
-const cfg = computed(() => STATUS_CFG[props.status]);
-</script>
-
-<style scoped>
-.sa-pv-status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 9px;
-    border-radius: 6px;
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-}
-.sa-pv-status-badge--draft {
-    background: #fef3c7;
-    color: #92400e;
-}
-.sa-pv-status-badge--active {
-    background: #d1fae5;
-    color: #065f46;
-}
-.sa-pv-status-badge--archived {
-    background: #f1f5f9;
-    color: #64748b;
-}
-.sa-pv-status-badge :deep(.q-icon) {
-    color: inherit;
-}
-</style>

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

@@ -1,326 +0,0 @@
-<template>
-    <div class="sa-pv-audit">
-        <div class="sa-pv-audit__card">
-            <header class="sa-pv-audit__head">
-                <q-icon name="history" size="18px" class="sa-pv-audit__head-icon" />
-                <h3>{{ msg.audit.title }}</h3>
-                <span class="sa-pv-audit__count">{{ eventCountLabel }}</span>
-                <q-space />
-                <button v-if="!loading" type="button" class="sa-pv-audit__refresh" @click="reload">
-                    <q-icon name="refresh" size="14px" /> {{ common.reload }}
-                </button>
-            </header>
-            <div v-if="loading" class="sa-pv-audit__loading">
-                <q-spinner size="20px" /> {{ msg.audit.loading }}
-            </div>
-            <div v-else-if="events.length === 0" class="sa-pv-audit__empty">
-                {{ msg.audit.empty }}
-            </div>
-            <div v-else class="sa-pv-audit__list">
-                <div
-                    v-for="(e, i) in events"
-                    :key="e.id"
-                    class="sa-pv-audit__item"
-                    :class="{ 'sa-pv-audit__item--last': i === events.length - 1 }"
-                >
-                    <div
-                        class="sa-pv-audit__icon"
-                        :style="{ background: `${meta(e.action).color}14` }"
-                    >
-                        <q-icon
-                            :name="meta(e.action).icon"
-                            size="17px"
-                            :style="{ color: meta(e.action).color }"
-                        />
-                    </div>
-                    <div class="sa-pv-audit__body">
-                        <div class="sa-pv-audit__title-row">
-                            <span class="sa-pv-audit__title">{{ meta(e.action).label }}</span>
-                            <span class="sa-pv-audit__entity">{{ entityLabel(e) }}</span>
-                        </div>
-                        <div class="sa-pv-audit__detail">{{ detail(e) }}</div>
-                        <div class="sa-pv-audit__meta">
-                            <span
-                                ><q-icon name="schedule" size="12px" />
-                                {{ formatTimestamp(e.createdAt, locale) }}</span
-                            >
-                            <span v-if="actorEmail(e)">
-                                <q-icon name="person" size="12px" /> {{ actorEmail(e) }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } 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 { formatTimestamp } from './format.js';
-
-// PlanVersionsAudit — data-agnostic. Consumers pass in a `loadAudit` loader
-// that supplies events; the component filters them to match the current
-// snapshot (drafts/active = everything ≤ 50, historical = ≤ asOf).
-//
-// The action meta map can be extended per app so that additional actions
-// (e.g. app-specific audit keys) get their own icons and labels.
-
-interface AuditRow {
-    id: string;
-    createdAt: string;
-    action: string;
-    entity: string;
-    entityId: string;
-    changes: Record<string, unknown> | null;
-    /** Legacy style: nested user object with email. */
-    user?: { email: string; firstName?: string; lastName?: string } | null;
-    /** Platform style: flat userEmail field. */
-    userEmail?: string | null;
-}
-
-interface ActionMeta {
-    icon: string;
-    color: string;
-    label: string;
-}
-
-const props = withDefaults(
-    defineProps<{
-        snapshot: CatalogSnapshot;
-        loadAudit: () => Promise<AuditRow[]>;
-        actionMeta?: Record<string, ActionMeta>;
-    }>(),
-    {
-        actionMeta: () => ({}),
-    },
-);
-
-const loading = ref(false);
-const events = ref<AuditRow[]>([]);
-
-const msg = useSaMessages('planVersions');
-const common = useSaMessages('common');
-const { locale } = useSuperAdminI18n();
-
-const eventCountLabel = computed(() =>
-    formatMessage(msg.value.audit.eventCount, { count: events.value.length }),
-);
-
-const ACTION_ICONS: Record<string, { icon: string; color: string }> = {
-    PLAN_VERSION_PUBLISH: { icon: 'rocket_launch', color: '#047857' },
-    PLAN_VERSION_DRAFT_CREATE: { icon: 'edit_note', color: '#b45309' },
-    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff' },
-    PLAN_VERSION_DRAFT_DELETE: { icon: 'delete', color: '#dc2626' },
-    PLAN_CATALOG_UPDATE: { icon: 'rocket_launch', color: '#047857' },
-};
-
-const defaultActionMeta = computed<Record<string, ActionMeta>>(() => ({
-    PLAN_VERSION_PUBLISH: {
-        ...ACTION_ICONS.PLAN_VERSION_PUBLISH,
-        label: msg.value.audit.actionPlanPublished,
-    },
-    PLAN_VERSION_DRAFT_CREATE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_CREATE,
-        label: msg.value.audit.actionPlanDraftCreated,
-    },
-    PLAN_VERSION_DRAFT_UPDATE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_UPDATE,
-        label: msg.value.audit.actionPlanDraftUpdated,
-    },
-    PLAN_VERSION_DRAFT_DELETE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_DELETE,
-        label: msg.value.audit.actionPlanDraftDeleted,
-    },
-    PLAN_CATALOG_UPDATE: {
-        ...ACTION_ICONS.PLAN_CATALOG_UPDATE,
-        label: msg.value.audit.actionCatalogPublished,
-    },
-}));
-
-function meta(action: string): ActionMeta {
-    return (
-        props.actionMeta[action] ??
-        defaultActionMeta.value[action] ?? {
-            icon: 'circle',
-            color: '#64748b',
-            label: action,
-        }
-    );
-}
-
-function entityLabel(e: AuditRow): string {
-    const c = (e.changes ?? {}) as {
-        planId?: string;
-        key?: string;
-        featureKey?: string;
-        version?: number;
-    };
-    const versionPart = c.version != null ? ` v${c.version}` : '';
-    if (c.planId) return `${c.planId}${versionPart}`;
-    if (c.key) return `${c.key}${versionPart}`;
-    if (c.featureKey) return `${c.featureKey}${versionPart}`;
-    return e.entity;
-}
-
-function detail(e: AuditRow): string {
-    const c = (e.changes ?? {}) as {
-        changeNote?: string;
-        nonRegressive?: boolean;
-        changes?: unknown;
-    };
-    if (c.changeNote) return c.changeNote;
-    if (c.nonRegressive === false) return msg.value.audit.detailRegression;
-    if (Array.isArray(c.changes)) {
-        return formatMessage(msg.value.audit.detailFieldsChanged, { count: c.changes.length });
-    }
-    return e.action;
-}
-
-function actorEmail(e: AuditRow): string | null {
-    return e.user?.email ?? e.userEmail ?? null;
-}
-
-onMounted(reload);
-watch(() => props.snapshot.id, reload);
-
-async function reload(): Promise<void> {
-    loading.value = true;
-    try {
-        const merged = await props.loadAudit();
-        events.value = filterForSnapshot(merged);
-    } finally {
-        loading.value = false;
-    }
-}
-
-function filterForSnapshot(rows: AuditRow[]): AuditRow[] {
-    if (props.snapshot.kind !== 'historical' || !props.snapshot.asOf) return rows.slice(0, 50);
-    const asOfMs = Date.parse(props.snapshot.asOf);
-    return rows.filter((r) => Date.parse(r.createdAt) <= asOfMs).slice(0, 50);
-}
-</script>
-
-<style scoped>
-.sa-pv-audit {
-    padding: 20px 28px;
-}
-.sa-pv-audit__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-.sa-pv-audit__head {
-    padding: 14px 18px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-audit__head h3 {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-size: 15px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-pv-audit__head-icon {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-audit__count {
-    font-size: 12px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-audit__refresh {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 6px;
-    padding: 4px 10px;
-    font-size: 11.5px;
-    font-weight: 600;
-    color: var(--sa-body, #1e293b);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.sa-pv-audit__loading,
-.sa-pv-audit__empty {
-    padding: 24px;
-    color: var(--sa-muted, #64748b);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.sa-pv-audit__list {
-    padding: 8px 0;
-}
-.sa-pv-audit__item {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    padding: 12px 18px;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-audit__item--last {
-    border-bottom: none;
-}
-
-.sa-pv-audit__icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.sa-pv-audit__body {
-    flex: 1;
-    min-width: 0;
-}
-.sa-pv-audit__title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-audit__title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-pv-audit__entity {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 10.5px;
-    font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
-    padding: 1px 6px;
-    border-radius: 4px;
-}
-.sa-pv-audit__detail {
-    font-size: 12.5px;
-    color: var(--sa-body, #1e293b);
-    margin-top: 3px;
-    line-height: 1.4;
-}
-.sa-pv-audit__meta {
-    font-size: 11px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 4px;
-    display: flex;
-    gap: 10px;
-}
-.sa-pv-audit__meta span {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-</style>