@saasicat/ui-vue 0.2.0

package/src/pages-standard/tenants/StatusPill.vue

@@ -0,0 +1,62 @@
+<template>
+    <span class="sa-pill" :class="`sa-pill--${tone}`">
+        <q-icon v-if="icon" :name="icon" size="11px" />
+        {{ label }}
+    </span>
+</template>
+
+<script setup lang="ts">
+// Generic status pill for tenant status, pilot marker,
+// suspended marker etc. Apps pass `label`/`icon`/`tone` through and
+// combine several pills side by side for composite status
+// displays (e.g. "Aktiv + PILOT" or "Trial + SUSPENDIERT").
+
+export type PillTone = 'positive' | 'warning' | 'negative' | 'muted' | 'primary' | 'accent';
+
+defineProps<{
+    label: string;
+    icon?: string;
+    tone: PillTone;
+}>();
+</script>
+
+<style scoped>
+.sa-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10.5px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    padding: 3px 8px;
+    border-radius: 5px;
+    white-space: nowrap;
+}
+.sa-sa-pill :deep(.q-icon) {
+    color: inherit;
+}
+.sa-pill--positive {
+    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
+    color: var(--sa-positive, #047857);
+}
+.sa-pill--warning {
+    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
+    color: var(--sa-warning, #b45309);
+}
+.sa-pill--negative {
+    background: var(--sa-negative-soft, rgba(220, 38, 38, 0.08));
+    color: var(--sa-negative, #dc2626);
+}
+.sa-pill--muted {
+    background: #f1f5f9;
+    color: var(--sa-muted, #64748b);
+}
+.sa-pill--primary {
+    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
+    color: var(--sa-primary, #3f6bff);
+}
+.sa-pill--accent {
+    background: rgba(245, 158, 11, 0.16);
+    color: #b45309;
+}
+</style>

package/src/pages-standard/tenants/format.ts

@@ -0,0 +1,38 @@
+// Formatting helpers for the tenants page.
+//
+// Shared between TenantsPage.vue and subcomponents (Avatar, Pill).
+// Apps with their own plan accents pass them through via the `planAccents` prop;
+// the default map covers the standard plan IDs (BASIC..ENTERPRISE).
+
+export const DEFAULT_PLAN_ACCENTS: Record<string, string> = {
+    BASIC: '#94a3b8',
+    STANDARD: '#3f6bff',
+    PROFESSIONAL: '#7c3aed',
+    BUSINESS: '#0ea5e9',
+    ENTERPRISE: '#0f172a',
+};
+
+export function tenantInitials(name: string | null | undefined): string {
+    if (!name) return '?';
+    return name
+        .replace(/[^A-Za-zÄÖÜäöü]/g, '')
+        .slice(0, 2)
+        .toUpperCase();
+}
+
+export function planAccent(
+    planId: string | null | undefined,
+    accents: Record<string, string> = DEFAULT_PLAN_ACCENTS,
+): string {
+    if (!planId) return '#94a3b8';
+    return accents[planId] ?? '#3f6bff';
+}
+
+export function formatDateDe(iso: string | null | undefined): string {
+    if (!iso) return '—';
+    return new Date(iso).toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+    });
+}

package/src/pages-tenant/LimitsRow.vue

@@ -0,0 +1,67 @@
+<template>
+    <tr class="sp-limits-row" :class="{ 'sp-limits-row--exceeded': row.exceeded }">
+        <td class="sp-limits-row__label">{{ label }}</td>
+        <td class="sp-limits-row__used">{{ formatValue(row.used) }}</td>
+        <td class="sp-limits-row__current">{{ formatMax(row.currentMax) }}</td>
+        <td class="sp-limits-row__target">
+            <span
+                :class="row.exceeded ? 'sp-limits-row__target--bad' : 'sp-limits-row__target--ok'"
+            >
+                {{ formatMax(row.targetMax) }}
+            </span>
+        </td>
+    </tr>
+</template>
+
+<script setup lang="ts">
+// LimitsRow — one row in the limits comparison table of the plan change
+// wizard (usage / current limit / target limit, exceeded highlighted in
+// color). Rendered by the PlanChangeWizard for each quotaKey from
+// `preview.limitsCheck`.
+
+interface Props {
+    label: string;
+    row: {
+        used: number;
+        currentMax: number;
+        targetMax: number;
+        exceeded: boolean;
+    };
+    fractional?: boolean;
+}
+
+const props = defineProps<Props>();
+
+function formatValue(n: number): string {
+    return props.fractional ? n.toFixed(1) : Math.round(n).toString();
+}
+
+function formatMax(n: number): string {
+    if (n === -1) return '∞';
+    return formatValue(n);
+}
+</script>
+
+<style scoped>
+.sp-limits-row {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.sp-limits-row td {
+    padding: 8px 12px;
+    font-variant-numeric: tabular-nums;
+}
+.sp-limits-row__label {
+    font-weight: 500;
+}
+.sp-limits-row__target--ok {
+    color: var(--q-positive, #21ba45);
+    font-weight: 600;
+}
+.sp-limits-row__target--bad {
+    color: var(--q-negative, #c10015);
+    font-weight: 600;
+}
+.sp-limits-row--exceeded {
+    background: rgba(193, 0, 21, 0.05);
+}
+</style>