first commit

resources/js/Layouts/AppLayout.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {NLayout, NLayoutSider, NConfigProvider, NLayoutHeader, ruRU, dateRuRU, darkTheme} from "naive-ui";
+import SideMenu from "./Components/SideMenu.vue";
+import AppHeader from "./Components/AppHeader.vue";
+
+const themeOverrides = {
+    Modal: {
+        peers: {
+            Dialog: {
+                borderRadius: '8px'
+            },
+            Card: {
+                borderRadius: '8px'
+            },
+        }
+    }
+}
+</script>
+
+<template>
+    <NConfigProvider :theme="darkTheme" :theme-overrides="themeOverrides" :locale="ruRU" :date-locale="dateRuRU">
+        <NLayout position="absolute">
+
+            <NLayoutHeader style="height: 48px;" bordered>
+                <AppHeader />
+            </NLayoutHeader>
+
+            <NLayout has-sider position="absolute" class="top-12!" content-class="relative" :native-scrollbar="false">
+<!--                <NLayoutSider-->
+<!--                    :native-scrollbar="false"-->
+<!--                    width="290"-->
+<!--                    class="h-[100vh-48px]!"-->
+<!--                >-->
+<!--                    <SideMenu />-->
+<!--                </NLayoutSider>-->
+
+                <NLayout content-class="pl-4">
+                    <div>
+                        <slot name="header" />
+                    </div>
+                    <slot />
+                </NLayout>
+            </NLayout>
+
+        </NLayout>
+    </NConfigProvider>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Layouts/Components/AppHeader.vue

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

resources/js/Layouts/Components/AppUserButton.vue

@@ -0,0 +1,32 @@
+<script setup>
+import {useAuthStore} from "../../Stores/auth.js";
+import {NDropdown, NButton} from 'naive-ui'
+
+const authStore = useAuthStore()
+const userOptions = [
+    {
+        label: 'Выход',
+        key: 'exit',
+    },
+]
+const themeOverride = {
+    border: null,
+    borderHover: null,
+    borderPressed: null,
+    borderFocus: null,
+    paddingMedium: null,
+    rippleColor: null
+}
+</script>
+
+<template>
+    <NDropdown :options="userOptions" placement="bottom-end">
+        <NButton :theme-overrides="themeOverride">
+            {{ authStore.user?.name }}
+        </NButton>
+    </NDropdown>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Layouts/Components/SideMenu.vue

@@ -0,0 +1,17 @@
+<script setup>
+import {NDatePicker} from 'naive-ui'
+const onUpdateDateQuery = (value) => {
+    axios.get(`/api/metric-forms/1/report-by-date?sent_at=${value}`)
+        .then(res => {
+            console.log(res)
+        })
+}
+</script>
+
+<template>
+    <NDatePicker panel type="date" @update-value="onUpdateDateQuery" />
+</template>
+
+<style scoped>
+
+</style>