add new feature report page

src/components/DateDaySelect.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="q-gutter-sm">
+  <div
+    class="q-ma-sm q-gutter-sm"
+    :style="{ height: props.height + 'px', width: props.width + 'px' }"
+  >
     <h6 class="text-center text-bold q-ma-md text-primary">{{ props.title }}</h6>
     <div class="row">
       <q-checkbox
@@ -14,30 +17,30 @@
     </div>
     <div class="row">
       <q-date v-model="dateRange" range flat />
-      <div>
-        <q-badge color="secondary"> Total dates selected: {{ filteredDates.length }} </q-badge>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { date } from 'quasar';
 import { i18n } from 'src/boot/lang';
 
 const props = defineProps({
   title: String,
+  height: { type: Number, default: 400 },
+  width: { type: Number, default: 300 },
 });
 
 const startDate = new Date();
 
-// Initial range (format: YYYY/MM/DD)
-const dateRange = ref();
+// Initial range (format: YYYY-MM-DD)
+const dateRange = ref<string | { to: string; from: string }>('');
 const selectedWeekdays = ref([0, 3]); // Default to weekdays
 
+const emit = defineEmits(['update:dates']);
 onMounted(() => {
-  dateRange.value = date.formatDate(startDate, 'YYYY/MM/DD');
+  dateRange.value = date.formatDate(startDate, 'YYYY-MM-DD');
 });
 
 const weekdayOptions = [
@@ -51,13 +54,14 @@ const weekdayOptions = [
 ];
 
 // The Logic: Calculate all specific dates within the range that match weekdays
-const filteredDates = computed(() => {
+watch(dateRange, () => {
   if (!dateRange.value) {
     return [];
   } else if (typeof dateRange.value === 'string') {
     const current = new Date(dateRange.value);
     if (current !== undefined && selectedWeekdays.value.includes(current.getDay())) {
-      return [date.formatDate(current, 'YYYY/MM/DD')];
+      emit('update:dates', [date.formatDate(current, 'YYYY-MM-DD')]);
+      return [date.formatDate(current, 'YYYY-MM-DD')];
     }
     return [];
   }
@@ -69,10 +73,12 @@ const filteredDates = computed(() => {
 
   while (current <= end) {
     if (selectedWeekdays.value.includes(current.getDay())) {
-      result.push(date.formatDate(current, 'YYYY/MM/DD'));
+      result.push(date.formatDate(current, 'YYYY-MM-DD'));
     }
     current = date.addToDate(current, { days: 1 });
   }
+
+  emit('update:dates', result);
   return result;
 });
 </script>

src/components/ReportStat.vue

@@ -0,0 +1,53 @@
+<template>
+  <q-card class="col-auto">
+    <div class="row q-col-gutter-xs">
+      <div v-for="opt in props.amounts" :key="opt.name">
+        <q-card class="q-ma-xs" flat bordered>
+          <q-item dense>
+            <q-item-section>
+              <q-item-label class="text-bold text-primary text-center">
+                {{ opt.name }}
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-separator />
+
+          <q-card-section>
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('events') }}</span>
+              <q-badge color="black" outline class="text-bold">{{ opt.events }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('minimal') }}</span>
+              <q-badge color="secondary" outline class="text-bold">{{ opt.minimal }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('average') }}</span>
+              <q-badge color="secondary" outline class="text-bold">{{ opt.average }}</q-badge>
+            </div>
+
+            <div class="column justify-between items-center q-mb-xs">
+              <span class="text-bold text-grey-7 text-caption">{{ $t('maximal') }}</span>
+              <q-badge color="primary" outline class="text-bold">{{ opt.maximal }}</q-badge>
+            </div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import type { Amount } from 'src/vueLib/models/report';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  amounts: {
+    type: Object as PropType<Amount[]>,
+    required: true,
+  },
+});
+</script>