<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/supervisor/SupervisorDashboard.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import StatsWidget from '@/components/dashboard/StatsWidget.vue';
import NotificationsWidget from '@/components/dashboard/NotificationsWidget.vue';
import RevenueStreamWidget from '@/components/dashboard/RevenueStreamWidget.vue';
</script>

<template>
    <div
        class="sticky mx-3 md:mx-4 mt-4 mb-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5"
        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
    >
        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
            <div class="absolute rounded-full blur-[70px] w-72 h-72 -top-16 -right-20 bg-purple-400/10" />
            <div class="absolute rounded-full blur-[70px] w-80 h-80 top-10 -left-24 bg-indigo-400/10" />
        </div>
        <div class="relative z-10 flex items-center justify-between gap-3 flex-wrap">
            <div class="flex items-center gap-3 flex-1 min-w-0">
                <div class="grid place-items-center w-10 h-10 rounded-md shrink-0 bg-purple-500/10 text-purple-600 dark:text-purple-400">
                    <i class="pi pi-eye text-lg" />
                </div>
                <div class="min-w-0">
                    <div class="text-[1rem] font-bold tracking-tight text-[var(--text-color)]">Área do Supervisor</div>
                    <div class="text-[0.78rem] text-[var(--text-color-secondary)] mt-0.5">Supervisione sessões, evolução dos pacientes e indicadores da clínica.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-8">
        <StatsWidget />

        <div class="col-span-12 xl:col-span-6">
            <RevenueStreamWidget />
        </div>
        <div class="col-span-12 xl:col-span-6">
            <NotificationsWidget />
        </div>
    </div>
</template>
