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

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>