portal/app/resources/js/layouts/AdminLayout.vue

<script setup lang="ts">
/**
 * Layout админки SaaS — отдельный sidebar с пометкой ADMIN, 4 nav-пункта,
 * без user-chip как в обычной AppLayout.
 *
 * Источник дизайна: liderra_v8_handoff/concepts/v8_admin.html.
 * Логика: SSO через Yandex 360 + break-glass `super_admin` (по ТЗ §22 / OPEN-И-13).
 *
 * Не входит в этот коммит:
 * - Auth-guard на /admin/* — должен проверять `super_admin` role + 2FA.
 * - Impersonation banner (когда admin вошёл «как клиент» — Ю-1: 15 мин / 5 попыток).
 * - Audit-log записей для всех action'ов admin (по schema v8.7 §10
 *   `saas_admin_audit_log`).
 */
import { useAuthStore } from '../stores/auth';
import { computed } from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';

interface NavItem {
    title: string;
    icon: string;
    to: string;
    count?: number;
}

const navItems: NavItem[] = [
    { title: 'Тенанты', icon: 'mdi-account-group-outline', to: '/admin/tenants', count: 142 },
    { title: 'Биллинг', icon: 'mdi-credit-card-outline', to: '/admin/billing' },
    { title: 'Инциденты', icon: 'mdi-alert-outline', to: '/admin/incidents', count: 3 },
    { title: 'Impersonation', icon: 'mdi-account-switch', to: '/admin/impersonation' },
    { title: 'Система', icon: 'mdi-cog-outline', to: '/admin/system' },
];

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();

const userInitials = computed(() => {
    const u = auth.user;
    if (!u) return 'АО';
    const first = u.first_name?.[0] ?? '';
    const last = u.last_name?.[0] ?? '';
    const initials = (first + last).toUpperCase();
    return initials || u.email.slice(0, 2).toUpperCase();
});

const userShortName = computed(() => {
    const u = auth.user;
    if (!u) return 'Админ Оператор';
    if (u.first_name && u.last_name) {
        return `${u.first_name} ${u.last_name[0]}.`;
    }
    return u.first_name || u.email;
});

async function handleLogout() {
    await auth.logout();
    await router.push('/login');
}

const currentPageTitle = computed(() => {
    return navItems.find((i) => route.path.startsWith(i.to))?.title ?? 'Админка';
});
</script>

<template>
    <v-app>
        <v-navigation-drawer color="secondary" theme="dark" :width="240" class="admin-drawer">
            <div class="brand-block">
                <span class="brand-mark" aria-hidden="true">
                    <svg viewBox="0 0 48 48" width="22" height="22">
                        <path
                            d="M16 14 L16 34 L32 34"
                            stroke="#012019"
                            stroke-width="4.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            fill="none"
                        />
                        <circle cx="32" cy="34" r="3.5" fill="#0F6E56" />
                    </svg>
                </span>
                <span class="brand-text">Лидерра<span class="brand-dot">.</span></span>
            </div>
            <div class="brand-sub">ADMIN</div>

            <v-list nav density="comfortable" class="app-nav">
                <v-list-item
                    v-for="item in navItems"
                    :key="item.to"
                    :to="item.to"
                    :prepend-icon="item.icon"
                    :active="route.path.startsWith(item.to)"
                    rounded="lg"
                    class="nav-item"
                >
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                    <template v-if="item.count !== undefined" #append>
                        <span class="nav-count">{{ item.count }}</span>
                    </template>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app-bar :elevation="0" color="surface" :height="56" class="admin-topbar">
            <div class="crumb">
                <span class="text-medium-emphasis">Админка</span>
                <v-icon size="14" class="mx-1">mdi-chevron-right</v-icon>
                <strong>{{ currentPageTitle }}</strong>
            </div>
            <v-spacer />
            <v-menu offset="8">
                <template #activator="{ props }">
                    <v-btn v-bind="props" variant="text" size="small" class="user-chip" aria-label="Меню админа">
                        <v-avatar size="28" color="error" class="mr-2">
                            <span class="text-caption">{{ userInitials }}</span>
                        </v-avatar>
                        <span class="text-body-2">{{ userShortName }}</span>
                    </v-btn>
                </template>
                <v-list density="compact" min-width="200">
                    <v-list-item v-if="auth.user" :title="auth.user.email" disabled />
                    <v-divider v-if="auth.user" />
                    <v-list-item :to="'/dashboard'" prepend-icon="mdi-arrow-left" title="Выйти из админки" />
                    <v-list-item prepend-icon="mdi-logout" title="Выйти" @click="handleLogout" />
                </v-list>
            </v-menu>
        </v-app-bar>

        <v-main class="admin-main">
            <RouterView />
        </v-main>
    </v-app>
</template>

<style scoped>
.admin-drawer {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 4px;
}
.brand-mark {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.brand-text {
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    letter-spacing: -0.01em;
}
.brand-dot {
    color: #32c8a9;
}

.brand-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #b94837;
    padding: 0 20px 14px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
    font-size: 11px;
    color: #7a8c87;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 7px;
    border-radius: 10px;
}

.admin-topbar {
    border-bottom: 1px solid #d9d5cd !important;
}

.crumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    margin-left: 8px;
}

.user-chip {
    text-transform: none;
}

.admin-main {
    background: #f6f3ec;
}
</style>