Роли, переделывание отчета, изменение на главной странице

resources/js/Layouts/AppLayout.vue

@@ -34,7 +34,7 @@ const themeOverrides = {
 <!--                    <SideMenu />-->
 <!--                </NLayoutSider>-->
 
-                <NLayout content-class="pl-4">
+                <NLayout>
                     <div>
                         <slot name="header" />
                     </div>

resources/js/Layouts/Components/AppHeader.vue

@@ -3,24 +3,21 @@ import { NFlex, NSpace, NDivider, NButton } from 'naive-ui'
 import ReportSelectDate from "../../Components/ReportSelectDate.vue";
 import AppUserButton from "./AppUserButton.vue";
 import {Link} from "@inertiajs/vue3";
+import AppHeaderRole from "./AppHeaderRole.vue";
 </script>
 
 <template>
     <NFlex justify="space-between" align="center" class="px-4 w-full h-full">
-        <NSpace align="center">
+        <NFlex align="center">
             <NButton :tag="Link" text href="/">
                 Метрика
             </NButton>
-            <NDivider vertical />
-            <ReportSelectDate />
-        </NSpace>
-        <NSpace align="center">
-            <NButton :tag="Link" text href="/">
-                Мои отчеты??
-            </NButton>
-            <NDivider vertical />
+<!--            <NDivider vertical />-->
+<!--            <ReportSelectDate />-->
+        </NFlex>
+        <NFlex align="center">
             <AppUserButton />
-        </NSpace>
+        </NFlex>
     </NFlex>
 </template>
 

resources/js/Layouts/Components/AppHeaderRole.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {computed, onMounted, ref} from "vue";
+import {NSelect} from 'naive-ui'
+
+const roles = ref([])
+
+const onFetchUserRoles = async () => {
+    await axios.get('/api/app/user/roles').then(res => {
+        roles.value = res.data
+    })
+}
+
+const roleOptions = computed(() => {
+    if (roles.value.length > 0) return roles.value.map(itm => ({
+        label: itm.name,
+        value: itm.role_id
+    }))
+})
+
+const value = ref(null)
+
+onMounted(async () => {
+    await onFetchUserRoles()
+})
+</script>
+
+<template>
+    <div>
+        <NSelect v-model:value="value" :options="roleOptions" class="w-50!" />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Layouts/Components/AppUserButton.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useAuthStore} from "../../Stores/auth.js";
-import {NDropdown, NButton} from 'naive-ui'
+import {NDropdown, NButton, NText} from 'naive-ui'
 
 const authStore = useAuthStore()
 const userOptions = [
@@ -20,11 +20,14 @@ const themeOverride = {
 </script>
 
 <template>
-    <NDropdown :options="userOptions" placement="bottom-end">
-        <NButton :theme-overrides="themeOverride">
-            {{ authStore.user?.name }}
-        </NButton>
-    </NDropdown>
+    <NText>
+        {{ authStore.user?.name }}
+    </NText>
+<!--    <NDropdown :options="userOptions" placement="bottom-end">-->
+<!--        <NButton :theme-overrides="themeOverride">-->
+<!--            {{ authStore.user?.name }}-->
+<!--        </NButton>-->
+<!--    </NDropdown>-->
 </template>
 
 <style scoped>