first commit

resources/js/Components/ReportSelectDate.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {NDatePicker} from 'naive-ui'
+import {storeToRefs} from "pinia";
+import {useReportStore} from "../Stores/report.js";
+
+const themeOverride = {
+    peers: {
+        Input: {
+            border: null,
+            color: null,
+            colorFocus: null,
+            borderHover: null,
+            borderFocus: null,
+            boxShadowFocus: null,
+            paddingMedium: ''
+        }
+    }
+}
+
+const reportStore = useReportStore()
+const { timestampCurrentRange } = storeToRefs(reportStore)
+</script>
+
+<template>
+    <NDatePicker :theme-overrides="themeOverride"
+                 v-model:value="timestampCurrentRange"
+                 format="dd.MM.YYYY"
+                 type="daterange"
+                 @update-value="reportStore.getDataOnReportDate"
+    />
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/StartButton.vue

@@ -0,0 +1,56 @@
+<script setup>
+import {NButton, NP, NFlex, NIcon} from "naive-ui";
+import {Link} from "@inertiajs/vue3";
+import {computed, h} from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  href: {
+    type: String,
+    default: '/'
+  },
+  icon: {
+    type: [Object, Function],
+    default: null
+  }
+})
+
+const buttonThemeOverride = {
+  heightLarge: '64px',
+  borderRadiusLarge: '8px'
+}
+
+const pThemeOverride = {
+  pMargin: '',
+  pLineHeight: '1.4'
+}
+
+const hasIcon = computed(() => props.icon !== null)
+</script>
+
+<template>
+  <NButton :tag="Link" :href="href" :theme-overrides="buttonThemeOverride" size="large" block class="justify-start! text-left!">
+    <template v-if="hasIcon" #icon>
+      <component :is="icon" v-if="icon" />
+    </template>
+    <NFlex vertical :size="2" :class="hasIcon ? 'ml-2' : ''">
+      {{ title }}
+      <NP :theme-overrides="pThemeOverride" depth="3">
+        {{ description }}
+      </NP>
+    </NFlex>
+  </NButton>
+</template>
+
+<style scoped>
+:deep(.n-button) {
+  @apply justify-start!;
+}
+</style>