Обновлен стартовый экран

Переписаны запросы для статистики, отчетов
Добавлена интеграция отчета сестры

resources/js/Layouts/Components/AppUserButton.vue

@@ -1,55 +1,92 @@
 <script setup>
-import {useAuthStore} from "../../Stores/auth.js";
-import {NSelect, NFlex, NText} from 'naive-ui'
-import {computed} from "vue";
-import {useForm} from "@inertiajs/vue3";
+import { useAuthStore } from "../../Stores/auth.js"
+import { NFlex, NDropdown, NButton, NIcon, NText, NAvatar, NEl } from 'naive-ui'
+import { TbChevronDown, TbCheck } from 'vue-icons-plus/tb'
+import { computed, h } from "vue"
+import { useForm } from "@inertiajs/vue3"
+import { useThemeVars } from "naive-ui"
 
 const authStore = useAuthStore()
-const userOptions = computed(() => {
-    return authStore.availableRoles?.map(itm => {
-        return {
-            label: itm.name,
-            value: itm.role_id
-        }
-    })
+const themeVars = useThemeVars()
+
+const initials = computed(() => {
+    const parts = (authStore.user?.name ?? '').trim().split(/\s+/)
+    return parts.slice(0, 2).map(p => p[0]?.toUpperCase() ?? '').join('')
 })
 
-const formRole = useForm({
-    role_id: authStore.user.role?.role_id
+// Если активная роль не задана — берём дефолтную из списка
+const effectiveRole = computed(() => {
+    if (authStore.user?.role.role_id) return authStore.user.role
+    return authStore.availableRoles?.find(r => r.is_default) ?? authStore.availableRoles?.[0] ?? null
 })
-const onChangeRole = (roleId) => {
+
+const currentRoleId   = computed(() => effectiveRole.value?.role_id ?? null)
+const currentRoleName = computed(() => effectiveRole.value?.name ?? '')
+const hasMultipleRoles = computed(() => (authStore.availableRoles?.length ?? 0) > 1)
+
+const roleOptions = computed(() =>
+    authStore.availableRoles?.map(r => ({
+        label: r.name,
+        key:   r.role_id,
+        icon:  () => h(NIcon, {
+            size: 14,
+            style: r.role_id === currentRoleId.value ? '' : 'opacity: 0; pointer-events: none;',
+        }, () => h(TbCheck)),
+    })) ?? []
+)
+
+const formRole = useForm({ role_id: null })
+
+const onSelectRole = (roleId) => {
+    if (roleId === currentRoleId.value) return
+    formRole.role_id = roleId
     formRole.post('/user/role/change')
 }
-
-const themeOverride = {
-    border: null,
-    borderHover: null,
-    borderPressed: null,
-    borderFocus: null,
-    paddingMedium: null,
-    rippleColor: null
-}
 </script>
 
 <template>
-    <NFlex align="center" :wrap="false">
-        <div class="min-w-[220px]">
-            <NSelect :options="userOptions"
-                     v-model:value="formRole.role_id"
-                     @update:value="value => onChangeRole(value)"
-            />
-        </div>
-        <div>
-            {{ authStore.user?.name }}
-        </div>
+    <NFlex align="center" :size="12" :wrap="false">
+
+        <!-- Переключатель роли -->
+        <NDropdown
+            v-if="hasMultipleRoles"
+            :options="roleOptions"
+            placement="bottom-end"
+            @select="onSelectRole"
+        >
+            <NButton
+                text
+                size="small"
+                icon-placement="right"
+                :loading="formRole.processing"
+            >
+                {{ currentRoleName }}
+                <template #icon>
+                    <NIcon size="12"><TbChevronDown /></NIcon>
+                </template>
+            </NButton>
+        </NDropdown>
+
+        <NText v-else-if="currentRoleName" style="font-size: 13px;">
+            {{ currentRoleName }}
+        </NText>
+
+        <!-- Разделитель -->
+        <NEl :style="`width: 1px; height: 18px; background: ${themeVars.dividerColor};`" />
+
+        <!-- Аватар + имя -->
+        <NFlex align="center" :size="8" :wrap="false">
+            <NAvatar
+                round :size="28"
+                style="
+                    color: var(--primary-color);
+                    font-size: 11px; font-weight: 700; flex-shrink: 0;
+                "
+            >{{ initials }}</NAvatar>
+            <NText style="white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;">
+                {{ authStore.user?.name }}
+            </NText>
+        </NFlex>
+
     </NFlex>
-<!--    <NDropdown :options="userOptions" placement="bottom-end">-->
-<!--        <NButton :theme-overrides="themeOverride">-->
-<!--            {{ authStore.user?.name }}-->
-<!--        </NButton>-->
-<!--    </NDropdown>-->
 </template>
-
-<style scoped>
-
-</style>