@saasicat/ui-vue 0.2.0

package/src/pages-standard/UsersPage.vue

@@ -0,0 +1,504 @@
+<template>
+    <div class="sa-users">
+        <header class="sa-page-head">
+            <div>
+                <h1 class="sa-page-head__title">{{ title }}</h1>
+                <p v-if="subtitle" class="sa-page-head__sub">{{ subtitle }}</p>
+            </div>
+            <div class="sa-page-head__actions">
+                <q-btn unelevated color="primary" icon="search" label="Suchen" @click="reload" />
+            </div>
+        </header>
+
+        <div class="sa-stats">
+            <button
+                v-for="tile in statTiles"
+                :key="tile.id"
+                class="sa-stat"
+                :class="[
+                    tile.tone ? `sa-stat--${tile.tone}` : null,
+                    statusFilter === tile.id ? 'sa-stat--active' : null,
+                ]"
+                @click="statusFilter = tile.id"
+            >
+                <span class="sa-stat__num">{{ tile.count }}</span>
+                <span class="sa-stat__label">{{ tile.label }}</span>
+            </button>
+        </div>
+
+        <div class="sa-users__filter">
+            <q-input
+                v-model="filter.q"
+                outlined
+                dense
+                label="E-Mail oder Name"
+                clearable
+                @keyup.enter="reload"
+                @clear="reload"
+            />
+            <q-input
+                v-model="filter.tenant"
+                outlined
+                dense
+                label="Tenant-Slug"
+                clearable
+                @keyup.enter="reload"
+                @clear="reload"
+            />
+            <slot name="filters-extra" />
+        </div>
+
+        <div class="sa-users__card">
+            <q-table
+                flat
+                :rows="filteredRows"
+                :columns="effectiveColumns"
+                row-key="id"
+                :pagination="{ rowsPerPage: 0 }"
+                :loading="loading"
+                hide-pagination
+            >
+                <template #body-cell-status="{ row }">
+                    <q-td>
+                        <q-badge
+                            :color="row.isActive ? 'positive' : 'grey'"
+                            :label="row.isActive ? 'aktiv' : 'deaktiviert'"
+                        />
+                        <q-badge
+                            v-if="row.invitationStatus === 'PENDING'"
+                            color="amber-7"
+                            label="Pending"
+                            class="q-ml-xs"
+                        />
+                    </q-td>
+                </template>
+                <template #body-cell-actions="{ row }">
+                    <q-td>
+                        <slot name="row-actions" :row="row">
+                            <q-btn
+                                v-for="action in visibleActions(row)"
+                                :key="action.id"
+                                flat
+                                dense
+                                :icon="action.icon"
+                                :title="action.label"
+                                :color="action.color ?? 'grey-7'"
+                                @click="action.handler(row)"
+                            />
+                        </slot>
+                    </q-td>
+                </template>
+            </q-table>
+        </div>
+
+        <MfaPromptDialog
+            v-if="needsMfaDialog"
+            :model-value="showMfa"
+            :description="mfaDescription"
+            :error="mfaError"
+            :setup-hint="mfaSetupHint"
+            @update:model-value="onMfaDialogVisibility"
+            @confirm="onMfaConfirm"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useQuasar } from 'quasar';
+import MfaPromptDialog from '../components/MfaPromptDialog.vue';
+
+// Platform standard page: user search. Data-agnostic.
+//
+// Optional baked-in flows: enableResetPassword/Deactivate + submit* callbacks.
+// Default actions are APPENDED to consumer actions.
+
+export interface UserRow {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    role: string;
+    isActive: boolean;
+    invitationStatus?: string;
+    tenantSlug?: string | null;
+    lastLoginAt?: string | null;
+    [extra: string]: unknown;
+}
+
+export interface UserListFilter {
+    q?: string;
+    tenant?: string;
+    [extra: string]: unknown;
+}
+
+export interface UserRowAction {
+    id: string;
+    label: string;
+    icon: string;
+    color?: string;
+    condition?: (row: UserRow) => boolean;
+    handler: (row: UserRow) => void;
+}
+
+const props = withDefaults(
+    defineProps<{
+        loadUsers: (filter: UserListFilter) => Promise<UserRow[]>;
+        title?: string;
+        subtitle?: string;
+        actions?: readonly UserRowAction[];
+        enableResetPassword?: boolean;
+        enableDeactivate?: boolean;
+        /** Per-flow MFA for reset password — shows MfaPromptDialog after the reason prompt. */
+        requireMfaForResetPassword?: boolean;
+        /** Per-flow MFA for deactivate — shows MfaPromptDialog after the reason prompt. */
+        requireMfaForDeactivate?: boolean;
+        mfaSetupHint?: string;
+        // Return value: either `{oneTimePassword}` (shows OTP dialog)
+        // or `void` (Notify only). The page decides based on the return
+        // whether the OTP dialog is shown.
+        submitResetPassword?: (
+            id: string,
+            reason: string,
+            mfaCode?: string,
+        ) => Promise<{ oneTimePassword: string } | void>;
+        submitDeactivate?: (id: string, reason: string, mfaCode?: string) => Promise<void>;
+    }>(),
+    {
+        title: 'Benutzer',
+        requireMfaForResetPassword: false,
+        requireMfaForDeactivate: false,
+    },
+);
+
+const q = useQuasar();
+const rows = ref<UserRow[]>([]);
+const loading = ref(false);
+const filter = reactive({ q: '', tenant: '' });
+
+// MFA dialog state for per-flow MFA (reset/deactivate). Promise-resolver
+// pattern analogous to PilotsPage: the action handler calls `promptMfa` and
+// waits for `onMfaConfirm` (or cancellation via `update:modelValue=false`).
+const showMfa = ref(false);
+const mfaError = ref('');
+const mfaDescription = ref('');
+let pendingMfaResolve: ((code: string | null) => void) | null = null;
+const needsMfaDialog = computed(
+    () => props.requireMfaForResetPassword || props.requireMfaForDeactivate,
+);
+
+function promptMfa(description: string): Promise<string | null> {
+    return new Promise((resolve) => {
+        mfaDescription.value = description;
+        mfaError.value = '';
+        showMfa.value = true;
+        pendingMfaResolve = (code) => {
+            pendingMfaResolve = null;
+            resolve(code);
+        };
+    });
+}
+
+function onMfaConfirm(code: string): void {
+    pendingMfaResolve?.(code);
+}
+
+function onMfaDialogVisibility(open: boolean): void {
+    showMfa.value = open;
+    if (!open && pendingMfaResolve) {
+        pendingMfaResolve(null);
+    }
+}
+
+// Stat-pill filter (analogous to plan simulation users.jsx):
+//   all | active | blocked | never-logged-in | super-admin.
+type StatusFilter = 'all' | 'active' | 'blocked' | 'never' | 'super';
+const statusFilter = ref<StatusFilter>('all');
+
+function isSuperAdmin(row: UserRow): boolean {
+    return (
+        row.role === 'SUPER_ADMIN' ||
+        row.role === 'PLATFORM_ADMIN' ||
+        String(row.role).toLowerCase().includes('super')
+    );
+}
+
+const filteredRows = computed(() => {
+    const f = statusFilter.value;
+    if (f === 'all') return rows.value;
+    return rows.value.filter((r) => {
+        if (f === 'active') return r.isActive;
+        if (f === 'blocked') return !r.isActive;
+        if (f === 'never') return !r.lastLoginAt;
+        if (f === 'super') return isSuperAdmin(r);
+        return true;
+    });
+});
+
+const statTiles = computed<
+    Array<{
+        id: StatusFilter;
+        label: string;
+        count: number;
+        tone?: 'positive' | 'warn' | 'muted' | 'purple';
+    }>
+>(() => {
+    let active = 0;
+    let blocked = 0;
+    let never = 0;
+    let supr = 0;
+    for (const r of rows.value) {
+        if (r.isActive) active++;
+        else blocked++;
+        if (!r.lastLoginAt) never++;
+        if (isSuperAdmin(r)) supr++;
+    }
+    return [
+        { id: 'all', label: 'Alle', count: rows.value.length },
+        { id: 'active', label: 'Aktiv', count: active, tone: 'positive' },
+        { id: 'blocked', label: 'Gesperrt', count: blocked, tone: 'muted' },
+        { id: 'never', label: 'Nie eingeloggt', count: never, tone: 'warn' },
+        { id: 'super', label: 'Super-Admins', count: supr, tone: 'purple' },
+    ];
+});
+
+const baseColumns = [
+    {
+        name: 'email',
+        label: 'E-Mail',
+        field: 'email',
+        align: 'left' as const,
+        sortable: true,
+    },
+    {
+        name: 'name',
+        label: 'Name',
+        field: (r: UserRow) => `${r.firstName} ${r.lastName}`,
+        align: 'left' as const,
+    },
+    {
+        name: 'tenant',
+        label: 'Tenant',
+        field: (r: UserRow) => r.tenantSlug ?? '— (SuperAdmin)',
+        align: 'left' as const,
+    },
+    { name: 'role', label: 'Rolle', field: 'role', align: 'left' as const },
+    { name: 'status', label: 'Status', field: 'isActive', align: 'left' as const },
+    {
+        name: 'lastLogin',
+        label: 'Letzter Login',
+        field: (r: UserRow) =>
+            r.lastLoginAt
+                ? new Date(r.lastLoginAt).toLocaleDateString('de-DE', {
+                      day: '2-digit',
+                      month: 'short',
+                      year: 'numeric',
+                  })
+                : '—',
+        align: 'left' as const,
+    },
+];
+
+// Built-in default actions — APPENDED to consumer actions, not replaced.
+const bakedActions = computed<UserRowAction[]>(() => {
+    const out: UserRowAction[] = [];
+    if (props.enableResetPassword && props.submitResetPassword) {
+        out.push({
+            id: 'reset-password',
+            label: 'Passwort zurücksetzen',
+            icon: 'lock_reset',
+            color: 'primary',
+            handler: (row) => onResetPasswordClick(row),
+        });
+    }
+    if (props.enableDeactivate && props.submitDeactivate) {
+        out.push({
+            id: 'deactivate',
+            label: 'Deaktivieren',
+            icon: 'block',
+            color: 'negative',
+            condition: (row) => (row as UserRow & { status?: string }).status !== 'suspended',
+            handler: (row) => onDeactivateClick(row),
+        });
+    }
+    return out;
+});
+
+const mergedActions = computed<readonly UserRowAction[]>(() => [
+    ...(props.actions ?? []),
+    ...bakedActions.value,
+]);
+
+const effectiveColumns = computed(() => {
+    const cols = [...baseColumns];
+    if (mergedActions.value.length > 0) {
+        cols.push({
+            name: 'actions',
+            label: '',
+            field: 'id' as never,
+            align: 'right' as 'left',
+        });
+    }
+    return cols;
+});
+
+function visibleActions(row: UserRow): UserRowAction[] {
+    return mergedActions.value.filter((a) => !a.condition || a.condition(row));
+}
+
+async function reload() {
+    loading.value = true;
+    try {
+        rows.value = await props.loadUsers({
+            q: filter.q || undefined,
+            tenant: filter.tenant || undefined,
+        });
+    } catch (err) {
+        rows.value = [];
+        console.warn('[UsersPage] loadUsers failed:', err);
+    } finally {
+        loading.value = false;
+    }
+}
+
+onMounted(reload);
+
+defineExpose({ reload });
+
+function errMsg(err: unknown): string {
+    return (
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+        (err as Error)?.message ??
+        'Aktion fehlgeschlagen'
+    );
+}
+
+// MFA loop analogous to PilotsPage: on 401 the dialog stays open.
+// `invoke` must accept the code (empty when requireMfa=false) and deliver
+// the `oneTimePassword` result optionally returned by the server.
+async function runAction<R>(
+    actionLabel: string,
+    requireMfa: boolean,
+    invoke: (code: string) => Promise<R>,
+    onSuccess: (result: R) => void,
+): Promise<void> {
+    if (!requireMfa) {
+        try {
+            const result = await invoke('');
+            onSuccess(result);
+        } catch (err) {
+            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+        }
+        return;
+    }
+    while (true) {
+        const code = await promptMfa(actionLabel);
+        if (code === null) return;
+        try {
+            const result = await invoke(code);
+            showMfa.value = false;
+            onSuccess(result);
+            return;
+        } catch (err) {
+            const status = (err as { response?: { status?: number } })?.response?.status;
+            if (status === 401) {
+                mfaError.value = 'TOTP-Code ungültig oder MFA nicht eingerichtet.';
+                continue;
+            }
+            showMfa.value = false;
+            q.notify({ type: 'negative', message: errMsg(err), position: 'top' });
+            return;
+        }
+    }
+}
+
+function onResetPasswordClick(row: UserRow): void {
+    if (!props.submitResetPassword) return;
+    const submit = props.submitResetPassword;
+    q.dialog({
+        title: `Passwort für "${row.email}" zurücksetzen`,
+        message: 'Grund für Audit (Pflichtfeld):',
+        prompt: { model: '', type: 'text' },
+        cancel: 'Abbrechen',
+        ok: { label: 'Zurücksetzen', color: 'primary' },
+    }).onOk(async (reason: string) => {
+        if (!reason || reason.trim().length === 0) return;
+        await runAction(
+            `Passwort für "${row.email}" zurücksetzen — ${reason.trim()}.`,
+            !!props.requireMfaForResetPassword,
+            (code) => submit(row.id, reason, code),
+            (data) => {
+                // The server can optionally return `oneTimePassword` — then
+                // show the OTP dialog. Backends without OTP return
+                // void → Notify only.
+                if (data && typeof data === 'object' && 'oneTimePassword' in data) {
+                    q.dialog({
+                        title: 'Einmal-Passwort generiert',
+                        message: `Bitte sicher übermitteln: ${data.oneTimePassword}`,
+                        ok: { label: 'Verstanden' },
+                    });
+                } else {
+                    q.notify({
+                        type: 'positive',
+                        message: 'Passwort-Reset ausgelöst.',
+                        position: 'top',
+                    });
+                }
+                void reload();
+            },
+        );
+    });
+}
+
+function onDeactivateClick(row: UserRow): void {
+    if (!props.submitDeactivate) return;
+    const submit = props.submitDeactivate;
+    q.dialog({
+        title: `User "${row.email}" deaktivieren`,
+        message: 'Grund für Audit (Pflichtfeld):',
+        prompt: { model: '', type: 'text' },
+        cancel: 'Abbrechen',
+        ok: { label: 'Deaktivieren', color: 'negative' },
+    }).onOk(async (reason: string) => {
+        if (!reason || reason.trim().length === 0) return;
+        await runAction(
+            `User "${row.email}" deaktivieren — ${reason.trim()}.`,
+            !!props.requireMfaForDeactivate,
+            (code) => submit(row.id, reason, code),
+            () => {
+                q.notify({
+                    type: 'positive',
+                    message: `${row.email} deaktiviert.`,
+                    position: 'top',
+                });
+                void reload();
+            },
+        );
+    });
+}
+</script>
+
+<style scoped>
+.sa-users {
+    min-height: calc(100vh - 56px);
+    background: var(--sa-bg-app, #f1f5f9);
+    padding: 20px 28px 28px;
+}
+.sa-users__filter {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 12px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.sa-users__filter > * {
+    flex: 1;
+    min-width: 200px;
+}
+.sa-users__card {
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 12px;
+    overflow: hidden;
+}
+</style>

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="sa-bundles__list">
+        <div
+            v-for="bundle in filteredBundles"
+            :key="bundle.id"
+            class="sa-bd-card"
+            :class="{ open: openKey === bundle.id }"
+        >
+            <div class="sa-bd-card__head" @click="emit('toggle', bundle)">
+                <div class="sa-bd-card__mark"><q-icon name="inventory_2" size="18px" /></div>
+                <div class="sa-bd-card__titlewrap">
+                    <div class="sa-bd-card__titlerow">
+                        <span class="sa-bd-card__key">{{ bundle.bundleKey }}</span>
+                        <span
+                            class="sa-chip"
+                            :class="`sa-chip--${statusClass(bundle)}`"
+                            :title="statusTooltip(bundle)"
+                        >
+                            {{ statusLabel(bundle) }}
+                        </span>
+                        <span v-if="i18nLocaleCount(bundle) > 0" class="sa-chip sa-chip--info">
+                            {{ i18nLocaleCount(bundle) }} Übersetzung(en)
+                        </span>
+                    </div>
+                    <div class="sa-bd-card__name">{{ bundle.label }}</div>
+                    <div class="sa-bd-card__desc">{{ bundle.description || '—' }}</div>
+                </div>
+                <q-icon
+                    name="chevron_right"
+                    class="sa-bd-card__chev"
+                    :class="{ open: openKey === bundle.id }"
+                />
+            </div>
+
+            <div v-if="openKey === bundle.id" class="sa-bd-card__body">
+                <slot name="detail" :bundle="bundle" />
+            </div>
+        </div>
+
+        <div v-if="bundlesTotal > 0 && filteredBundles.length === 0" class="sa-bd-empty-row">
+            Keine Bundles entsprechen der Suche.
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BundleRow } from '@saasicat/types';
+import {
+    BUNDLE_STATUS_META,
+    type BundleAggregateStatus,
+} from '../../components/bundle-editor/bundle-version-status.js';
+
+const props = defineProps<{
+    filteredBundles: BundleRow[];
+    bundlesTotal: number;
+    openKey: string | null;
+    aggregateStatusOf: (bundle: BundleRow) => BundleAggregateStatus;
+    i18nLocaleCount: (bundle: BundleRow) => number;
+}>();
+
+defineSlots<{
+    detail(props: { bundle: BundleRow }): unknown;
+}>();
+
+const emit = defineEmits<{
+    toggle: [bundle: BundleRow];
+}>();
+
+function statusClass(bundle: BundleRow): string {
+    return BUNDLE_STATUS_META[props.aggregateStatusOf(bundle)]?.cls ?? 'draft';
+}
+
+function statusLabel(bundle: BundleRow): string {
+    const status = props.aggregateStatusOf(bundle);
+    return status === 'retired' ? 'Retired' : (BUNDLE_STATUS_META[status]?.label ?? status);
+}
+
+function statusTooltip(bundle: BundleRow): string | undefined {
+    return BUNDLE_STATUS_META[props.aggregateStatusOf(bundle)]?.tooltip;
+}
+</script>
+
+<style scoped>
+/* Status chips co-located with the markup (analogous to PlanList .pl-chip*).
+   Deliberately scoped: the identically named global .sa-chip rule in
+   DiscoveryPage.vue would otherwise override .sa-chip--live (same specificity,
+   later source order) and render the "Live" tag grey instead of green. */
+.sa-chip {
+    font-size: 10px;
+    font-weight: 600;
+    padding: 2px 7px;
+    border-radius: 6px;
+    background: #f1f5f9;
+    color: #475569;
+}
+.sa-chip--info {
+    background: #eff6ff;
+    color: #1d4ed8;
+}
+.sa-chip--live {
+    background: #dcfce7;
+    color: #166534;
+}
+.sa-chip--draft {
+    background: #fef3c7;
+    color: #92400e;
+}
+.sa-chip--supersed {
+    background: #e2e8f0;
+    color: #64748b;
+}
+.sa-chip--scheduled {
+    background: #fef3c7;
+    color: #92400e;
+}
+</style>