@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/components/plan-cockpit/PlanCockpitAuditLog.vue

@@ -1,72 +0,0 @@
-<template>
-    <section v-if="auditRows.length > 0 || loadingAudit" class="pc-card pc-audit-card">
-        <div class="pc-card-head pc-card-head--audit">
-            <div class="pc-card-head-text">
-                <div class="pc-card-title">{{ msg.auditLog.title }}</div>
-                <div class="pc-card-sub">{{ msg.auditLog.subtitle }}</div>
-            </div>
-        </div>
-        <div class="pc-audit">
-            <div v-if="loadingAudit" class="pc-empty pc-empty--inline">
-                {{ msg.auditLog.loading }}
-            </div>
-            <div v-for="a in auditRows" :key="a.id" class="pc-audit-row">
-                <span :class="['pc-audit-dot', `pc-audit-${auditKind(a.action)}`]" />
-                <span class="pc-audit-when">{{ formatAuditDate(a.createdAt) }}</span>
-                <span class="pc-audit-avatar">{{ auditInitial(a) }}</span>
-                <span class="pc-audit-who">{{ auditWho(a) }}</span>
-                <span class="pc-audit-what">{{ auditLabel(a) }}</span>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script setup lang="ts">
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import type { AuditRow } from './types';
-
-defineProps<{
-    auditRows: AuditRow[];
-    loadingAudit: boolean;
-}>();
-
-const msg = useSaMessages('planDetail');
-const { intlLocale } = useSuperAdminI18n();
-
-function auditKind(action: string): string {
-    const a = action.toLowerCase();
-    if (a.includes('publish')) return 'publish';
-    if (a.includes('create') && a.includes('draft')) return 'draft';
-    if (a.includes('create')) return 'add';
-    if (a.includes('update')) return 'change';
-    if (a.includes('delete')) return 'remove';
-    return 'change';
-}
-
-function auditWho(a: AuditRow): string {
-    if (a.user?.firstName || a.user?.lastName) {
-        return `${a.user.firstName ?? ''} ${a.user.lastName ?? ''}`.trim();
-    }
-    return a.user?.email ?? a.userEmail ?? 'system';
-}
-
-function auditInitial(a: AuditRow): string {
-    const who = auditWho(a);
-    return who[0]?.toUpperCase() ?? '?';
-}
-
-function auditLabel(a: AuditRow): string {
-    return a.action;
-}
-
-function formatAuditDate(iso: string): string {
-    const d = new Date(iso);
-    if (Number.isNaN(d.getTime())) return iso;
-    const today = new Date();
-    const isToday = d.toDateString() === today.toDateString();
-    const time = d.toLocaleTimeString(intlLocale.value, { hour: '2-digit', minute: '2-digit' });
-    if (isToday) return formatMessage(msg.value.auditLog.today, { time });
-    return `${d.toLocaleDateString(intlLocale.value, { day: '2-digit', month: 'short' })} · ${time}`;
-}
-</script>

package/src/components/plan-cockpit/PlanCockpitDiffPanel.vue

@@ -1,100 +0,0 @@
-<template>
-    <section class="pc-card">
-        <div class="pc-card-head">
-            <div class="pc-card-head-text">
-                <div class="pc-card-title">{{ panelTitle }}</div>
-                <div class="pc-card-sub">
-                    {{ diffPair ? msg.diff.subOnPublish : msg.diff.noComparison }}
-                </div>
-            </div>
-            <div v-if="diffPair" class="pc-pillrow">
-                <span class="pc-pill" style="background: #ecfdf5; color: #047857">
-                    +{{ diff.addedFeatures.length }} F
-                </span>
-                <span class="pc-pill" style="background: #fef2f2; color: #b91c1c">
-                    −{{ diff.removedFeatures.length }} F
-                </span>
-                <span class="pc-pill" style="background: #fffbeb; color: #b45309">
-                    {{
-                        diff.changedQuotas.length +
-                        diff.addedQuotas.length +
-                        diff.removedQuotas.length
-                    }}
-                    Q
-                </span>
-            </div>
-        </div>
-        <div class="pc-diff-body">
-            <div
-                v-for="d in diffRows"
-                :key="d.id"
-                class="pc-diff-row"
-                :style="{ background: d.bg, borderColor: d.border }"
-            >
-                <span class="pc-diff-sign" :style="{ background: d.color }">{{ d.sign }}</span>
-                <div class="pc-diff-main">
-                    <div class="pc-diff-headline">
-                        <span class="pc-diff-section" :style="{ color: d.color }">{{
-                            d.section
-                        }}</span>
-                        <span class="pc-diff-label">{{ d.label }}</span>
-                        <code v-if="d.sub" class="pc-mono pc-mono--xs">{{ d.sub }}</code>
-                    </div>
-                    <div v-if="d.from !== undefined" class="pc-diff-change">
-                        <span class="pc-diff-from">{{ d.from }}</span>
-                        <span class="pc-diff-arrow" :style="{ color: d.color }">
-                            <svg
-                                width="12"
-                                height="12"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                            >
-                                <path d="M5 12h14M13 5l7 7-7 7" />
-                            </svg>
-                        </span>
-                        <span class="pc-diff-to">{{ d.to }}</span>
-                    </div>
-                </div>
-                <span
-                    class="pc-chip pc-diff-tag"
-                    :style="{
-                        background: '#fff',
-                        color: d.color,
-                        borderColor: d.border,
-                    }"
-                >
-                    {{ d.tag }}
-                </span>
-            </div>
-            <div v-if="diffRows.length === 0" class="pc-empty pc-empty--inline">
-                {{ msg.diff.noChangesDetected }}
-            </div>
-        </div>
-    </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-import type { DiffRow, DiffSummary, PlanVersionPair } from './types';
-
-const props = defineProps<{
-    diffPair: PlanVersionPair | null;
-    diff: DiffSummary;
-    diffRows: DiffRow[];
-}>();
-
-const msg = useSaMessages('planDetail');
-
-const panelTitle = computed(() => {
-    const pair = props.diffPair;
-    if (!pair) return msg.value.diff.title;
-    return formatMessage(msg.value.diff.titleCompare, {
-        from: pair.from.version,
-        to: pair.to.version,
-    });
-});
-</script>

package/src/components/plan-cockpit/PlanCockpitHeader.vue

@@ -1,101 +0,0 @@
-<template>
-    <div class="pc-backbar">
-        <button class="pc-back" type="button" @click="emit('back')">
-            <span class="pc-back-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>
-            <span>{{ msg.header.backToList }}</span>
-        </button>
-    </div>
-
-    <div class="pc-header">
-        <div class="pc-header-left">
-            <div class="pc-bigchip" :style="{ background: accentBg, color: accentFg }">
-                {{ plan.planKey }}
-            </div>
-            <div class="pc-header-titles">
-                <h2 class="pc-h-title">{{ plan.label }}</h2>
-                <p class="pc-h-sub">{{ plan.description || msg.header.noDescription }}</p>
-            </div>
-        </div>
-        <div class="pc-header-right">
-            <button class="pc-btn" type="button" @click="emit('clonePlan')">
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                >
-                    <rect x="9" y="9" width="11" height="11" rx="2" />
-                    <path d="M5 15V5a2 2 0 012-2h10" />
-                </svg>
-                <span>{{ msg.header.clonePlan }}</span>
-            </button>
-            <button class="pc-btn" type="button" @click="emit('viewCatalog')">
-                <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>{{ msg.header.viewInCatalog }}</span>
-            </button>
-            <button
-                class="pc-btn pc-btn--primary"
-                type="button"
-                :disabled="hasOpenDraft"
-                :title="hasOpenDraft ? msg.header.draftAlreadyOpen : undefined"
-                @click="emit('createDraft')"
-            >
-                <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2.5"
-                >
-                    <path d="M12 5v14M5 12h14" />
-                </svg>
-                <span>{{ msg.header.newDraftVersion }}</span>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { PlanRow } from '@saasicat/types';
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-defineProps<{
-    plan: PlanRow;
-    accentBg: string;
-    accentFg: string;
-    hasOpenDraft: boolean;
-}>();
-
-const emit = defineEmits<{
-    (e: 'back'): void;
-    (e: 'clonePlan'): void;
-    (e: 'viewCatalog'): void;
-    (e: 'createDraft'): void;
-}>();
-
-const msg = useSaMessages('planDetail');
-</script>

package/src/components/plan-cockpit/PlanCockpitImpactPanel.vue

@@ -1,112 +0,0 @@
-<template>
-    <section v-if="tenantImpact" class="pc-card">
-        <div class="pc-card-head">
-            <div class="pc-card-head-text">
-                <div class="pc-card-title">{{ msg.kpis.tenantImpact }}</div>
-                <div class="pc-card-sub">{{ msg.impact.subtitle }}</div>
-            </div>
-        </div>
-        <div class="pc-impact-strip">
-            <div class="pc-impact-num">{{ tenantImpactTotal }}</div>
-            <div class="pc-impact-bars">
-                <div class="pc-impact-bar">
-                    <span
-                        class="pc-impact-bar-fill"
-                        :style="{
-                            width: pct(tenantImpact.auto, tenantImpactTotal),
-                            background: '#10b981',
-                        }"
-                    />
-                    <span class="pc-impact-bar-label">{{ autoLabel }}</span>
-                </div>
-                <div class="pc-impact-bar">
-                    <span
-                        class="pc-impact-bar-fill"
-                        :style="{
-                            width: pct(tenantImpact.review, tenantImpactTotal),
-                            background: '#f59e0b',
-                        }"
-                    />
-                    <span class="pc-impact-bar-label">{{ reviewLabel }}</span>
-                </div>
-                <div class="pc-impact-bar">
-                    <span
-                        class="pc-impact-bar-fill"
-                        :style="{
-                            width: pct(tenantImpact.conflict, tenantImpactTotal),
-                            background: '#ef4444',
-                        }"
-                    />
-                    <span class="pc-impact-bar-label">{{ conflictLabel }}</span>
-                </div>
-            </div>
-        </div>
-        <div
-            v-if="tenantImpact.examples && tenantImpact.examples.length > 0"
-            class="pc-impact-tenants"
-        >
-            <div v-for="t in tenantImpact.examples" :key="t.name" class="pc-impact-tenant">
-                <div class="pc-impact-avatar">{{ initialsOf(t.name) }}</div>
-                <div class="pc-impact-body">
-                    <div class="pc-impact-name">{{ t.name }}</div>
-                    <div class="pc-impact-sub">{{ t.plan }}</div>
-                </div>
-                <span :class="['pc-chip', impactStateChip(t.state)]">{{
-                    impactStateLabel(t.state)
-                }}</span>
-            </div>
-        </div>
-    </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-import type { ImpactTenant, TenantImpact } from './types';
-
-const props = defineProps<{
-    tenantImpact: TenantImpact | null;
-    tenantImpactTotal: number;
-}>();
-
-const msg = useSaMessages('planDetail');
-
-const autoLabel = computed(() =>
-    formatMessage(msg.value.impact.autoMigrate, { count: props.tenantImpact?.auto ?? 0 }),
-);
-const reviewLabel = computed(() =>
-    formatMessage(msg.value.impact.needReview, { count: props.tenantImpact?.review ?? 0 }),
-);
-const conflictLabel = computed(() =>
-    formatMessage(msg.value.impact.conflict, { count: props.tenantImpact?.conflict ?? 0 }),
-);
-
-function pct(part: number, total: number): string {
-    if (total <= 0) return '0%';
-    return `${Math.max(2, Math.round((part / total) * 100))}%`;
-}
-
-function initialsOf(name: string): string {
-    return name
-        .split(/\s+/)
-        .filter(Boolean)
-        .slice(0, 2)
-        .map((s) => s[0]?.toUpperCase() ?? '')
-        .join('');
-}
-
-function impactStateLabel(state: ImpactTenant['state']): string {
-    if (state === 'auto') return msg.value.impact.stateAuto;
-    if (state === 'review') return msg.value.impact.stateReview;
-    return msg.value.impact.stateConflict;
-}
-
-function impactStateChip(state: ImpactTenant['state']): string {
-    return state === 'auto'
-        ? 'pc-chip--live'
-        : state === 'review'
-          ? 'pc-chip--draft'
-          : 'pc-chip--conflict';
-}
-</script>

package/src/components/plan-cockpit/PlanCockpitKpis.vue

@@ -1,68 +0,0 @@
-<template>
-    <div class="pc-kpis">
-        <div class="pc-kpi">
-            <div class="pc-kpi-label">{{ msg.kpis.activeVersion }}</div>
-            <div class="pc-kpi-val">
-                <template v-if="liveVersion">
-                    v{{ liveVersion.version }}
-                    <span class="pc-chip pc-chip--live pc-chip--dot pc-chip--mid">live</span>
-                </template>
-                <template v-else>—</template>
-            </div>
-            <div class="pc-kpi-sub">{{ activeVersionSub }}</div>
-        </div>
-        <div class="pc-kpi">
-            <div class="pc-kpi-label">{{ msg.kpis.tenantImpact }}</div>
-            <div class="pc-kpi-val">{{ tenantImpactTotal }}</div>
-            <div class="pc-kpi-sub">{{ msg.kpis.tenantsOnPlan }}</div>
-        </div>
-        <div class="pc-kpi">
-            <div class="pc-kpi-label">{{ msg.kpis.versions }}</div>
-            <div class="pc-kpi-val">{{ versionsCount }}</div>
-            <div class="pc-kpi-sub">{{ versionsSummary }}</div>
-        </div>
-        <div :class="['pc-kpi', draftVersion ? 'pc-kpi--draft' : '']">
-            <div class="pc-kpi-label" :style="draftVersion ? 'color:#b45309' : ''">
-                {{ draftVersion ? msg.kpis.openDraft : msg.kpis.noDraft }}
-            </div>
-            <div class="pc-kpi-val">
-                {{ draftVersion ? `v${draftVersion.version}` : '—' }}
-            </div>
-            <div class="pc-kpi-sub" :style="draftVersion ? 'color:#b45309' : ''">
-                {{ draftVersion ? msg.kpis.readyToEdit : msg.kpis.createNewDraft }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { PlanVersionRow } from '@saasicat/types';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
-
-const props = defineProps<{
-    liveVersion: PlanVersionRow | null;
-    tenantImpactTotal: number;
-    versionsCount: number;
-    publishedCount: number;
-    draftCount: number;
-    draftVersion: PlanVersionRow | null;
-}>();
-
-const msg = useSaMessages('planDetail');
-
-const activeVersionSub = computed(() => {
-    const validFrom = props.liveVersion?.validFrom;
-    return validFrom
-        ? formatMessage(msg.value.kpis.activeSince, { date: validFrom.slice(0, 10) })
-        : msg.value.kpis.noPublishedVersion;
-});
-
-const versionsSummary = computed(() =>
-    formatMessage(msg.value.kpis.versionsSummaryWithDrafts, {
-        published: props.publishedCount,
-        drafts: props.draftCount,
-    }),
-);
-</script>