portal/app/resources/js/views/admin/AdminImpersonationView.vue

<script setup lang="ts">
/**
 * Админка SaaS → Impersonation: активные и недавно завершённые сессии.
 *
 * 2 секции:
 * - «Активные» (used_at != null AND session_ended_at == null) — каждую можно
 *   завершить кнопкой «Завершить» (POST /api/admin/impersonation/end).
 * - «Последние 20 завершённых» — read-only лог (для аудита).
 *
 * На MVP без auth-middleware (см. routes/web.php). Production: middleware
 * 'auth:saas-admin' + role super_admin.
 */
import * as adminApi from '../../api/admin';
import { extractErrorMessage } from '../../api/client';
import { onMounted, ref } from 'vue';

const active = ref<adminApi.ImpersonationActiveSession[]>([]);
const recent = ref<adminApi.ImpersonationRecentSession[]>([]);
const loadingActive = ref(false);
const loadingRecent = ref(false);
const errorMessage = ref<string | null>(null);
const endingTokenId = ref<number | null>(null);

async function loadActive() {
    loadingActive.value = true;
    try {
        active.value = await adminApi.impersonationActive();
    } catch (err) {
        errorMessage.value = extractErrorMessage(err, 'Не удалось загрузить активные сессии.');
    } finally {
        loadingActive.value = false;
    }
}

async function loadRecent() {
    loadingRecent.value = true;
    try {
        recent.value = await adminApi.impersonationRecent();
    } catch (err) {
        errorMessage.value = extractErrorMessage(err, 'Не удалось загрузить недавние сессии.');
    } finally {
        loadingRecent.value = false;
    }
}

async function endSession(tokenId: number) {
    endingTokenId.value = tokenId;
    try {
        await adminApi.impersonationEnd(tokenId);
        // Перегружаем оба списка — завершённый перейдёт из active в recent.
        await Promise.all([loadActive(), loadRecent()]);
    } catch (err) {
        errorMessage.value = extractErrorMessage(err, 'Не удалось завершить сессию.');
    } finally {
        endingTokenId.value = null;
    }
}

function formatDateTime(iso: string): string {
    return new Date(iso).toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'short' });
}

function formatDuration(s: number | null): string {
    if (s === null) return '—';
    if (s < 60) return `${s} сек`;
    if (s < 3600) return `${Math.floor(s / 60)} мин ${s % 60} сек`;
    return `${Math.floor(s / 3600)} ч ${Math.floor((s % 3600) / 60)} мин`;
}

function expiresIn(iso: string): string {
    const ms = new Date(iso).getTime() - Date.now();
    if (ms <= 0) return 'истёк';
    const min = Math.floor(ms / 60000);
    if (min < 60) return `через ${min} мин`;
    return `через ${Math.floor(min / 60)} ч`;
}

onMounted(() => {
    loadActive();
    loadRecent();
});

defineExpose({ active, recent, loadActive, loadRecent, endSession });
</script>

<template>
    <v-container fluid class="admin-impersonation pa-6">
        <header class="page-head mb-4">
            <div>
                <h1 class="text-h4 page-title">Impersonation</h1>
                <p class="text-body-2 text-medium-emphasis ma-0">Активные сессии «вход как клиент» (Ю-1 / ТЗ §22.7).</p>
            </div>
            <v-btn
                variant="outlined"
                size="small"
                prepend-icon="mdi-refresh"
                :loading="loadingActive"
                data-testid="refresh-btn"
                @click="
                    loadActive();
                    loadRecent();
                "
            >
                Обновить
            </v-btn>
        </header>

        <v-alert
            v-if="errorMessage"
            type="error"
            variant="tonal"
            density="compact"
            class="mb-4"
            data-testid="error-alert"
        >
            {{ errorMessage }}
        </v-alert>

        <!-- ACTIVE -->
        <v-card variant="outlined" class="pa-4 mb-4" data-testid="active-section">
            <h2 class="text-h6 mb-3">Активные ({{ active.length }})</h2>

            <div v-if="loadingActive" class="text-center py-4">
                <v-progress-circular indeterminate color="primary" />
            </div>
            <div
                v-else-if="active.length === 0"
                class="text-medium-emphasis text-center py-4"
                data-testid="active-empty"
            >
                Нет активных impersonation-сессий.
            </div>
            <v-table v-else density="comfortable">
                <thead>
                    <tr>
                        <th>Тенант</th>
                        <th>Admin ID</th>
                        <th>Email клиента</th>
                        <th>Основание</th>
                        <th>Активна с</th>
                        <th>TTL</th>
                        <th class="text-end">Действие</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="s in active" :key="s.token_id" data-testid="active-row">
                        <td>{{ s.tenant_name ?? `#${s.tenant_id}` }}</td>
                        <td class="num">{{ s.requested_by }}</td>
                        <td class="text-caption">{{ s.sent_to_email }}</td>
                        <td class="reason-cell">{{ s.reason }}</td>
                        <td class="num text-medium-emphasis">{{ formatDateTime(s.used_at) }}</td>
                        <td class="num text-medium-emphasis">{{ expiresIn(s.expires_at) }}</td>
                        <td class="text-end">
                            <v-btn
                                size="small"
                                color="error"
                                variant="tonal"
                                prepend-icon="mdi-stop-circle-outline"
                                :loading="endingTokenId === s.token_id"
                                :data-testid="`end-btn-${s.token_id}`"
                                @click="endSession(s.token_id)"
                            >
                                Завершить
                            </v-btn>
                        </td>
                    </tr>
                </tbody>
            </v-table>
        </v-card>

        <!-- RECENT -->
        <v-card variant="outlined" class="pa-4" data-testid="recent-section">
            <h2 class="text-h6 mb-3">Недавно завершённые ({{ recent.length }})</h2>

            <div v-if="loadingRecent" class="text-center py-4">
                <v-progress-circular indeterminate color="primary" />
            </div>
            <div
                v-else-if="recent.length === 0"
                class="text-medium-emphasis text-center py-4"
                data-testid="recent-empty"
            >
                История impersonation-сессий пуста.
            </div>
            <v-table v-else density="comfortable">
                <thead>
                    <tr>
                        <th>Тенант</th>
                        <th>Admin</th>
                        <th>Основание</th>
                        <th>Длилась</th>
                        <th>Завершена</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="s in recent" :key="s.token_id" data-testid="recent-row">
                        <td>{{ s.tenant_name ?? `#${s.tenant_id}` }}</td>
                        <td class="num">{{ s.requested_by }}</td>
                        <td class="reason-cell">{{ s.reason }}</td>
                        <td class="num">{{ formatDuration(s.duration_seconds) }}</td>
                        <td class="num text-medium-emphasis">{{ formatDateTime(s.session_ended_at) }}</td>
                    </tr>
                </tbody>
            </v-table>
        </v-card>
    </v-container>
</template>

<style scoped>
.admin-impersonation {
    max-width: 1440px;
}
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.page-title {
    font-variation-settings: 'opsz' 28;
    letter-spacing: -0.018em;
}
.num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-weight: 500;
}
.reason-cell {
    max-width: 320px;
    white-space: normal;
    line-height: 1.4;
    color: #081319;
    font-size: 13px;
}
</style>