From 652e0bb2caf558e2973afb40fd7c450581afd13e Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 10 Jul 2024 13:28:23 +0200
Subject: [PATCH 01/14] #377: Data Preview

* Show visualisation of observation data in Charts
---
 openapi/StudyManagerAPI.yaml                  | 152 ++++-
 package-lock.json                             |  17 +
 package.json                                  |   1 +
 src/components/ParticipationDataList.vue      | 597 ++++++++++++++++--
 src/components/TimelineList.vue               |  10 +-
 .../subComponents/DatapointList.vue           |   8 +-
 src/i18n/de.json                              |  31 +
 src/i18n/en.json                              |  31 +
 src/models/Common.ts                          |  12 +
 src/models/ParticipationData.ts               |  48 ++
 src/models/Timeline.ts                        |   6 +-
 src/styles/more-light/theme.pcss              |   1 -
 12 files changed, 833 insertions(+), 81 deletions(-)
 create mode 100644 src/models/Common.ts

diff --git a/openapi/StudyManagerAPI.yaml b/openapi/StudyManagerAPI.yaml
index 2a96a457..96b07046 100644
--- a/openapi/StudyManagerAPI.yaml
+++ b/openapi/StudyManagerAPI.yaml
@@ -1167,13 +1167,13 @@ paths:
           description: bad request
 
   /studies/{studyId}/data:
+    parameters:
+      - $ref: '#/components/parameters/StudyId'
     get:
       tags:
         - data
       description: Get Study Participation Data
       operationId: getParticipationData
-      parameters:
-        - $ref: '#/components/parameters/StudyId'
       responses:
         '200':
           description: Operation successful
@@ -1186,14 +1186,71 @@ paths:
         '404':
           description: not found
 
+  /studies/{studyId}/observations/{observationId}/views:
+    parameters:
+      - $ref: '#/components/parameters/StudyId'
+      - $ref: '#/components/parameters/ObservationId'
+    get:
+      operationId: listObservationViews
+      description: "Get a list of available views"
+      tags:
+        - data
+      responses:
+        200:
+          description: List of available Views
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: '#/components/schemas/ObservationDataView'
+
+  /studies/{studyId}/observations/{observationId}/views/{viewName}:
+    parameters:
+      - $ref: '#/components/parameters/StudyId'
+      - $ref: '#/components/parameters/ObservationId'
+      - name: viewName
+        in: path
+        required: true
+        schema:
+          type: string
+    get:
+      tags:
+        - data
+      description: "Get observation view data"
+      operationId: getObservationViewData
+      parameters:
+        - name: studyGroupId
+          in: query
+          schema:
+            type: integer
+          required: false
+        - name: participantId
+          in: query
+          schema:
+            type: integer
+          required: false
+        - $ref: '#/components/parameters/From'
+        - $ref: '#/components/parameters/To'
+      responses:
+        '200':
+          description: Operation successful
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ObservationDataViewData'
+        '404':
+          description: not found
+
   /studies/{studyId}/datapoints:
+    parameters:
+      - $ref: '#/components/parameters/StudyId'
     get:
       tags:
         - data
       description: Get Data Points
       operationId: getDataPoints
       parameters:
-        - $ref: '#/components/parameters/StudyId'
         - name: observationId
           in: query
           schema:
@@ -1209,7 +1266,6 @@ paths:
           schema:
             type: string
             format: date-time
-            readOnly: true
         - name: size
           in: query
           schema:
@@ -1283,6 +1339,7 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/FrontendConfiguration'
+
   /config/buildInfo:
     get:
       tags:
@@ -1669,6 +1726,52 @@ components:
           type: string
           format: date-time
           readOnly: true
+
+    ObservationDataView:
+      type: object
+      properties:
+        name:
+          type: string
+        label:
+          type: string
+        title:
+          type: string
+        description:
+          type: string
+      required:
+        - name
+
+    ObservationDataViewData:
+      type: object
+      properties:
+        view:
+          $ref: '#/components/schemas/ObservationDataView'
+        chartType:
+          type: string
+          enum:
+            - line
+            - bar
+            - pie
+        labels:
+          type: array
+          items:
+            type: string
+        data:
+          type: array
+          items:
+            $ref: '#/components/schemas/ObservationDataViewDataRow'
+
+    ObservationDataViewDataRow:
+      type: object
+      properties:
+        label:
+          type: string
+        values:
+          type: array
+          items:
+            type: number
+            format: double
+
     DataPoint:
       type: object
       properties:
@@ -1795,6 +1898,28 @@ components:
           type: array
           items:
             $ref: '#/components/schemas/Intervention'
+        participants:
+          type: array
+          items:
+            $ref: '#/components/schemas/ParticipantInfo'
+        integrations:
+          type: array
+          items:
+            $ref: '#/components/schemas/IntegrationInfo'
+
+    ParticipantInfo:
+      type: object
+      properties:
+        studyGroup:
+          type: integer
+
+    IntegrationInfo:
+      type: object
+      properties:
+        name:
+          type: string
+        observationId:
+          $ref: '#/components/schemas/Id'
 
     UserSearchResultList:
       type: object
@@ -1992,6 +2117,7 @@ components:
       required:
         - auth
       readOnly: true
+
     BuildInfo:
       type: object
       properties:
@@ -2058,6 +2184,24 @@ components:
         type: integer
         format: int32
       required: true
+    DateTime:
+      name: dateTime
+      in: query
+      schema:
+        type: string
+        format: date-time
+    From:
+      name: from
+      in: query
+      schema:
+        type: string
+        format: date-time
+    To:
+      name: to
+      in: query
+      schema:
+        type: string
+        format: date-time
 
   securitySchemes:
     OAuth:
diff --git a/package-lock.json b/package-lock.json
index f2a63a5e..7ff0fb25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vuepic/vue-datepicker": "8.6.0",
         "axios": "1.7.1",
+        "chart.js": "^4.4.3",
         "cron-validate": "1.4.5",
         "keycloak-js": "24.0.4",
         "normalize.css": "8.0.1",
@@ -1260,6 +1261,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@lukeed/csprng": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.1.0.tgz",
@@ -4200,6 +4206,17 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
diff --git a/package.json b/package.json
index 76c4f7f3..14787e83 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@vuepic/vue-datepicker": "8.6.0",
     "axios": "1.7.1",
+    "chart.js": "^4.4.3",
     "cron-validate": "1.4.5",
     "keycloak-js": "24.0.4",
     "normalize.css": "8.0.1",
diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index aaa48c2f..f6f740b2 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -6,31 +6,58 @@ Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
   import ConfirmDialog from 'primevue/confirmdialog';
   import DynamicDialog from 'primevue/dynamicdialog';
-  import { useComponentsApi, useDataApi } from '../composable/useApi';
+  import Dropdown, { DropdownChangeEvent } from 'primevue/dropdown';
+  import Accordion from 'primevue/accordion';
+  import AccordionTab from 'primevue/accordiontab';
+  import Chart from 'primevue/chart';
+  import TabView from 'primevue/tabview';
+  import TabPanel from 'primevue/tabpanel';
+  import Calendar from 'primevue/calendar';
+  import Button from 'primevue/button';
+  import {
+    useComponentsApi,
+    useDataApi,
+    useParticipantsApi,
+  } from '../composable/useApi';
   import { useI18n } from 'vue-i18n';
   import { useErrorHandling } from '../composable/useErrorHandling';
-  import { ref, Ref } from 'vue';
+  import { computed, ComputedRef, reactive, ref, Ref, watch } from 'vue';
   import {
+    ChartProperties,
+    ObservationDataViewInfo,
+    ObservationDataViewDataDTO,
+    ObservationDataViewDataRow,
+    ObservationDataViewFilter,
     ParticipationDataGrouping,
     ParticipationDataMapping,
+    ObservationsViewData,
+    ObservationDataViewData,
   } from '../models/ParticipationData';
-  import { AxiosError } from 'axios';
+  import { AxiosError, AxiosResponse } from 'axios';
   import {
     MoreTableColumn,
     MoreTableFieldType,
     MoreTableSortOptions,
   } from '../models/MoreTableModel';
   import MoreTable from '../components/shared/MoreTable.vue';
-  import { ComponentFactory } from '../generated-sources/openapi';
-  import Accordion from 'primevue/accordion';
-  import AccordionTab from 'primevue/accordiontab';
+  import { ComponentFactory, Participant } from '../generated-sources/openapi';
   import { onBeforeRouteLeave } from 'vue-router';
   import DatapointList from './subComponents/DatapointList.vue';
+  import { useStudyStore } from '../stores/studyStore';
+  import { useGlobalStore } from '../stores/globalStore';
+  import { DropdownOption } from '../models/Common';
+  import { useStudyGroupStore } from '../stores/studyGroupStore';
+  import useLoader from '../composable/useLoader';
 
-  const { t } = useI18n();
+  const { t, d } = useI18n();
   const { handleIndividualError } = useErrorHandling();
+  const loader = useLoader();
   const { componentsApi } = useComponentsApi();
+  const { participantsApi } = useParticipantsApi();
   const { dataApi } = useDataApi();
+  const dateFormat = useGlobalStore().getDateFormat;
+  const studyStore = useStudyStore();
+  const studyGroupStore = useStudyGroupStore();
 
   const props = defineProps({
     studyId: {
@@ -44,52 +71,309 @@ Licensed under the Elastic License 2.0. */
     sortOrder: -1,
   };
 
-  let timer: NodeJS.Timeout | number;
+  const filterDateRange = ref();
+  watch(filterDateRange, () => {
+    // Only apply filter if there is a "from" and "to" date value available
+    if (filterDateRange.value?.every((v: Date | null) => v !== null)) {
+      applyFilter();
+    }
+  });
+  const filterStudyGroup = ref();
+  const filterParticipant = ref();
 
-  function loadData(): void {
-    timer ??= setInterval(function () {
-      listParticipationData().then(setObservationGroups);
-    }, 10000);
-    listParticipationData().then(setObservationGroups);
+  const studyGroupOptions: Ref<DropdownOption[]> = ref([
+    {
+      label: t('global.placeholder.entireStudy'),
+      value: undefined,
+    } as DropdownOption,
+  ]);
+
+  studyGroupOptions.value.push(
+    ...studyGroupStore.studyGroups.map(
+      (studyGroup) =>
+        ({
+          label: studyGroup.title,
+          value: studyGroup.studyGroupId?.toString(),
+        }) as DropdownOption,
+    ),
+  );
+
+  let participantsList: Participant[] = [];
+  const participantOptions: Ref<DropdownOption[]> = ref([
+    {
+      label: t('participants.placeholder.allParticipants'),
+      value: undefined,
+    } as DropdownOption,
+  ]);
+
+  let timer: NodeJS.Timeout;
+
+  function onStudyGroupFilterChange(e: DropdownChangeEvent): void {
+    const filteredOptions: DropdownOption[] = [];
+    const filteredParticipants: Participant[] = [];
+
+    filteredOptions.push({
+      label: t('participants.placeholder.allParticipants'),
+      value: undefined,
+    } as DropdownOption);
+
+    if (e.value) {
+      filteredParticipants.push(
+        ...participantsList.filter(
+          (participant) => participant.studyGroupId === parseInt(e.value),
+        ),
+      );
+    } else {
+      filteredParticipants.push(...participantsList);
+    }
+
+    filteredOptions.push(
+      ...filteredParticipants.map(
+        (filteredParticipant) =>
+          ({
+            label: filteredParticipant.alias,
+            value: filteredParticipant.participantId?.toString(),
+          }) as DropdownOption,
+      ),
+    );
+
+    participantOptions.value = filteredOptions;
+    applyFilter();
   }
 
-  onBeforeRouteLeave(() => {
-    clearInterval(timer);
+  function onParticipantFilterChange(e: DropdownChangeEvent): void {
+    filterStudyGroup.value = getStudyGroupIdByParticipantId(parseInt(e.value));
+    applyFilter();
+  }
+
+  function onTabChange(observationId: number, tabIndex: number): void {
+    if (tabIndex === 0) {
+      // "Table" Tab is active (no chart)
+      return;
+    }
+    // -1, because of the "Table" tab, the index is higher than the viewData array
+    const viewDataIdx = tabIndex - 1;
+
+    if (observationsViewData[observationId][viewDataIdx].chartData !== null) {
+      // chart data already available - skip
+      return;
+    }
+
+    fetchObservationViewData(+observationId, viewDataIdx, getViewDataFilters());
+  }
+
+  function clearAllFilters(): void {
+    filterParticipant.value = undefined;
+    filterStudyGroup.value = undefined;
+    filterDateRange.value = undefined;
+    applyFilter();
+  }
+
+  const isAnyFilterActive: ComputedRef<boolean> = computed((): boolean => {
+    return (
+      filterParticipant.value !== undefined ||
+      filterStudyGroup.value !== undefined ||
+      filterDateRange.value !== undefined
+    );
   });
 
-  const groupedParticipantData: Ref<ParticipationDataGrouping> = ref({});
+  function getStudyGroupIdByParticipantId(id: number): string | undefined {
+    const foundParticipant = participantsList.find(
+      (p) => p.participantId === id,
+    );
 
-  async function listParticipationData(): Promise<ParticipationDataMapping[]> {
-    return dataApi
-      .getParticipationData(props.studyId)
-      .then((response) =>
-        response.data.map((item) => {
-          return {
-            participantId: item.participantNamedId?.id,
-            participantAlias: item.participantNamedId?.title || '-',
-            observationId: item.observationNamedId?.id || -1,
-            observationTitle:
-              `${item.observationNamedId?.title} ${getObservationTypeLabel(
-                item.observationType as string,
-              )}` || '-',
-            studyGroupTitle:
-              item.studyGroupNamedId?.title ||
-              t('global.placeholder.entireStudy'),
-            dataReceived: t(
-              `global.labels.${
-                item.dataReceived ? 'dataReceived' : 'noDataReceived'
-              }`,
-            ),
-            lastDataReceived: item.lastDataReceived
-              ? item.lastDataReceived
-              : '-',
-          };
-        }),
-      )
-      .catch((e: AxiosError) => {
-        handleIndividualError(e, 'cannot list participationDataList');
-        return [];
+    return foundParticipant?.studyGroupId?.toString();
+  }
+
+  function getUniqueObservationIds(
+    data: ParticipationDataMapping[],
+  ): Set<number> {
+    const uniqueIds = new Set<number>();
+
+    data.forEach((item) => {
+      uniqueIds.add(item.observationId);
+    });
+
+    return uniqueIds;
+  }
+
+  function applyFilter(): void {
+    for (const observationId in observationsViewData) {
+      for (const viewIdx in observationsViewData[observationId]) {
+        const viewData = observationsViewData[observationId][viewIdx];
+        if (viewData.chartType !== null) {
+          fetchObservationViewData(
+            +observationId,
+            +viewIdx,
+            getViewDataFilters(),
+          );
+        }
+      }
+    }
+  }
+
+  function getViewDataFilters(): ObservationDataViewFilter {
+    return {
+      studyGroupId: filterStudyGroup.value
+        ? +filterStudyGroup.value
+        : undefined,
+      participantId: filterParticipant.value
+        ? +filterParticipant.value
+        : undefined,
+      from: filterDateRange.value ? filterDateRange.value[0] : undefined,
+      to: filterDateRange.value ? filterDateRange.value[1] : undefined,
+    };
+  }
+
+  function convertChartTypeData(
+    observationDataViewData: ObservationDataViewDataDTO,
+  ): ChartProperties | null {
+    if (!observationDataViewData.data?.length) {
+      return null;
+    }
+
+    switch (observationDataViewData.chartType) {
+      case 'pie':
+        return transformToPieChartData(observationDataViewData);
+      case 'line':
+        return transformToLineChartData(observationDataViewData);
+      case 'bar':
+        return transformToBarChartData(observationDataViewData);
+      default:
+        console.log(
+          `Unsupported Chart type: ${observationDataViewData.chartType}`,
+        );
+        return null;
+    }
+  }
+
+  function transformToPieChartData(
+    observationDataViewData: ObservationDataViewDataDTO,
+  ): ChartProperties {
+    return {
+      type: 'pie',
+      data: {
+        labels: observationDataViewData.labels,
+        datasets: [
+          {
+            data: observationDataViewData.data[0].values,
+          },
+        ],
+      },
+      options: getChartOptions(observationDataViewData.view),
+    } as ChartProperties;
+  }
+
+  function transformToLineChartData(
+    observationDataViewData: ObservationDataViewDataDTO,
+  ): ChartProperties {
+    return {
+      type: 'line',
+      data: {
+        labels: formatDateLabels(observationDataViewData.labels),
+        datasets: createDataSet(observationDataViewData.data),
+      },
+      options: getChartOptions(observationDataViewData.view),
+    } as ChartProperties;
+  }
+
+  function transformToBarChartData(
+    observationDataViewData: ObservationDataViewDataDTO,
+  ): ChartProperties {
+    const additionalChartOptions = {
+      scales: {
+        y: {
+          beginAtZero: true,
+          ticks: {
+            precision: 0,
+          },
+        },
+      },
+    };
+
+    return {
+      type: 'bar',
+      data: {
+        labels: translateLabel(observationDataViewData.labels),
+        datasets: createDataSet(observationDataViewData.data),
+      },
+      options: getChartOptions(
+        observationDataViewData.view,
+        additionalChartOptions,
+      ),
+    } as ChartProperties;
+  }
+
+  function getChartOptions(
+    view: ObservationDataViewInfo,
+    additionalOptions?: any,
+  ): any {
+    return {
+      responsive: false,
+      plugins: {
+        title: {
+          display: true,
+          text: t(view.title),
+        },
+        subtitle: {
+          display: true,
+          text: t(view.description),
+        },
+      },
+      ...additionalOptions,
+    };
+  }
+
+  function formatDateLabels(labels: string[]): string[] | null {
+    if (!labels) {
+      return null;
+    }
+    for (let i = 0, len = labels.length; i < len; i++) {
+      labels[i] = d(new Date(labels[i]), 'long');
+    }
+
+    return labels;
+  }
+
+  function translateLabel(labels: string[]): string[] {
+    return labels.map((label) => {
+      if (label.startsWith('i18n.')) {
+        const key = label.substring(5);
+        return t(key);
+      }
+      return label;
+    });
+  }
+
+  function createDataSet(
+    data: ObservationDataViewDataRow[],
+  ): { label: string[]; data: number[] }[] {
+    const obj = groupAndAggregateValues(data);
+    const dataSets = [];
+    for (const [key, values] of Object.entries(obj)) {
+      dataSets.push({
+        label: translateLabel([key]),
+        data: values,
       });
+    }
+
+    return dataSets;
+  }
+
+  function groupAndAggregateValues(data: ObservationDataViewDataRow[]): {
+    [key: string]: number[];
+  } {
+    return data.reduce(
+      (acc, current) => {
+        if (acc[current.label]) {
+          acc[current.label] = acc[current.label].concat(current.values);
+        } else {
+          acc[current.label] = current.values;
+        }
+        return acc;
+      },
+      {} as { [key: string]: number[] },
+    );
   }
 
   let factories: ComponentFactory[];
@@ -145,6 +429,7 @@ Licensed under the Elastic License 2.0. */
     },
   ];
 
+  const groupedParticipantData: Ref<ParticipationDataGrouping> = ref({});
   function setObservationGroups(data: ParticipationDataMapping[]): void {
     groupedParticipantData.value = data.reduce(function (prev, curr) {
       prev[curr.observationId] = prev[curr.observationId] || [];
@@ -153,10 +438,130 @@ Licensed under the Elastic License 2.0. */
     }, Object.create(null));
   }
 
+  async function fetchParticipants(): Promise<void> {
+    participantsList = await participantsApi
+      .listParticipants(props.studyId)
+      .then((response) => {
+        participantOptions.value.push(
+          ...response.data.map(
+            (p) =>
+              ({
+                label: p.alias,
+                value: p.participantId?.toString(),
+              }) as DropdownOption,
+          ),
+        );
+
+        return response.data;
+      })
+      .catch((e: AxiosError) => {
+        handleIndividualError(e, 'cannot list participants');
+        return participantsList;
+      });
+  }
+
+  async function fetchParticipationData(): Promise<ParticipationDataMapping[]> {
+    return dataApi
+      .getParticipationData(props.studyId)
+      .then((response) =>
+        response.data.map((item) => {
+          return {
+            participantId: item.participantNamedId?.id,
+            participantAlias: item.participantNamedId?.title || '-',
+            observationId: item.observationNamedId?.id || -1,
+            observationTitle:
+              `${item.observationNamedId?.title} ${getObservationTypeLabel(
+                item.observationType as string,
+              )}` || '-',
+            studyGroupTitle:
+              item.studyGroupNamedId?.title ||
+              t('global.placeholder.entireStudy'),
+            dataReceived: t(
+              `global.labels.${
+                item.dataReceived ? 'dataReceived' : 'noDataReceived'
+              }`,
+            ),
+            lastDataReceived: item.lastDataReceived
+              ? item.lastDataReceived
+              : '-',
+          };
+        }),
+      )
+      .catch((e: AxiosError) => {
+        handleIndividualError(e, 'cannot list participationDataList');
+        return [];
+      });
+  }
+
+  const observationsViewData: ObservationsViewData = reactive({});
+  function fetchViewsForObservation(data: ParticipationDataMapping[]): void {
+    for (const observationId of getUniqueObservationIds(data)) {
+      dataApi
+        .listObservationViews(props.studyId, observationId)
+        .then((response: AxiosResponse) => {
+          if (response.data?.length > 0) {
+            observationsViewData[observationId] = [];
+            response.data.forEach((view: ObservationDataViewInfo) => {
+              observationsViewData[observationId].push({
+                chartType: null,
+                chartData: null,
+                labels: [],
+                view: view,
+              } as ObservationDataViewData);
+            });
+          }
+        })
+        .catch((e: AxiosError) => {
+          handleIndividualError(e, 'cannot list views for observation');
+        });
+    }
+  }
+
+  function fetchObservationViewData(
+    observationId: number,
+    viewDataIdx: number,
+    filter: ObservationDataViewFilter,
+  ): void {
+    dataApi
+      .getObservationViewData(
+        props.studyId,
+        observationId,
+        observationsViewData[observationId][viewDataIdx].view.name,
+        filter.studyGroupId,
+        filter.participantId,
+        filter.from,
+        filter.to,
+      )
+      .then((rs: AxiosResponse) => {
+        observationsViewData[observationId][viewDataIdx].chartType =
+          rs.data.chartType;
+        observationsViewData[observationId][viewDataIdx].chartData =
+          convertChartTypeData(rs.data);
+      })
+      .catch((e: AxiosError) => {
+        handleIndividualError(e, 'cannot list view data for observation');
+      });
+  }
+
+  function loadData(): void {
+    timer ??= setInterval(function () {
+      fetchParticipationData().then(setObservationGroups);
+    }, 10000);
+    fetchParticipationData().then((data) => {
+      setObservationGroups(data);
+      fetchViewsForObservation(data);
+    });
+    fetchParticipants();
+  }
+
+  onBeforeRouteLeave(() => {
+    clearInterval(timer);
+  });
+
   componentsApi
     .listComponents('observation')
     .then((response: any) => response.data)
-    .then((rsp) => (factories = rsp))
+    .then((rs) => (factories = rs))
     .then(loadData);
 </script>
 
@@ -175,23 +580,95 @@ Licensed under the Elastic License 2.0. */
       >
         {{ $t('data.dataList.title') }}
       </h4>
+
+      <div class="mb-3 flex items-center justify-between gap-5">
+        <div class="flex gap-5">
+          <div>
+            {{ $t('data.labels.dateRange') }}:
+            <Calendar
+              v-model="filterDateRange"
+              :min-date="new Date(studyStore.study.plannedStart as string)"
+              autocomplete="off"
+              selection-mode="range"
+              :manual-input="false"
+              :date-format="dateFormat"
+              :placeholder="`${dateFormat} - ${dateFormat}`"
+            />
+          </div>
+          <div>
+            {{ $t('studyGroup.singular') }}:
+            <Dropdown
+              v-model="filterStudyGroup"
+              :options="studyGroupOptions"
+              option-label="label"
+              option-value="value"
+              :placeholder="$t('studyGroup.placeholder.chooseGroup')"
+              class="ml-1"
+              :disabled="filterParticipant !== undefined"
+              @change="onStudyGroupFilterChange"
+            />
+          </div>
+          <div>
+            {{ $t('participants.singular') }}:
+            <Dropdown
+              v-model="filterParticipant"
+              :options="participantOptions"
+              option-label="label"
+              option-value="value"
+              :placeholder="$t('participants.placeholder.chooseParticipant')"
+              class="ml-1"
+              filter
+              @change="onParticipantFilterChange"
+            />
+          </div>
+        </div>
+        <div>
+          <Button
+            icon="pi pi-filter-slash"
+            :disabled="!isAnyFilterActive"
+            @click="clearAllFilters"
+          />
+        </div>
+      </div>
+
       <Accordion :active-index="0" lazy expand-icon="pi pi-chevron-up">
         <AccordionTab
-          v-for="observationData in groupedParticipantData"
-          :key="observationData[0].observationId"
-          :header="observationData[0].observationTitle as string"
+          v-for="(observationData, observationId) in groupedParticipantData"
+          :key="observationId"
+          :header="observationData[0].observationTitle"
           headerClass="mt-2.5"
         >
-          <MoreTable
-            v-if="observationData.length"
-            row-id="observationId"
-            :columns="studyDataColumns"
-            :rows="observationData"
-            :row-edit-btn="false"
-            :sort-options="sortOptions"
-            :editable="() => false"
-            :empty-message="$t('data.dataList.emptyListMsg')"
-          />
+          <TabView @update:active-index="onTabChange(observationId, $event)">
+            <TabPanel :header="$t('data.labels.latestDataPoints')">
+              <MoreTable
+                v-if="observationData.length"
+                row-id="observationId"
+                :columns="studyDataColumns"
+                :rows="observationData"
+                :row-edit-btn="false"
+                :sort-options="sortOptions"
+                :editable="() => false"
+                :empty-message="$t('data.dataList.emptyListMsg')"
+              />
+            </TabPanel>
+            <TabPanel
+              v-for="(view, idx) in observationsViewData[observationId]"
+              :key="idx"
+              :header="$t(view.view.label)"
+            >
+              <div class="flex min-h-[500px] items-center justify-center">
+                <Chart
+                  v-if="view.chartData"
+                  v-bind="view.chartData"
+                  :height="500"
+                  :width="1000"
+                />
+                <template v-else-if="!loader.isLoading.value">
+                  <h3>{{ $t('data.labels.noDataAvailable') }}</h3>
+                </template>
+              </div>
+            </TabPanel>
+          </TabView>
         </AccordionTab>
       </Accordion>
     </div>
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index ad38b13d..30f77df4 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -33,13 +33,9 @@ Licensed under the Elastic License 2.0. */
   import { useErrorHandling } from '../composable/useErrorHandling';
   import { dateToDateString } from '../utils/dateUtils';
   import TimelineDialog from './dialog/TimelineDialog.vue';
-  import {
-    DropdownOption,
-    GroupOption,
-    EventDetail,
-    EventOptions,
-  } from '../models/Timeline';
+  import { GroupOption, EventDetail, EventOptions } from '../models/Timeline';
   import { useGlobalStore } from '../stores/globalStore';
+  import { DropdownOption } from '../models/Common';
   const dialog = useDialog();
   const dateFormat = useGlobalStore().getDateFormat;
   const { t, locale } = useI18n();
@@ -284,7 +280,7 @@ Licensed under the Elastic License 2.0. */
     const filteredParticipants: Participant[] = [];
 
     filteredOptions.push({
-      label: t('global.placeholder.entireStudy'),
+      label: t('participants.placeholder.allParticipants'),
       value: undefined,
     } as DropdownOption);
 
diff --git a/src/components/subComponents/DatapointList.vue b/src/components/subComponents/DatapointList.vue
index 48fc2add..4b406fa6 100644
--- a/src/components/subComponents/DatapointList.vue
+++ b/src/components/subComponents/DatapointList.vue
@@ -46,13 +46,13 @@ Licensed under the Elastic License 2.0. */
   const participant: Ref<Option> = ref(emptyOption);
   const observation: Ref<Option> = ref(emptyOption);
 
-  let timer: NodeJS.Timeout | number;
+  let timer: NodeJS.Timeout;
 
   function loadData(): void {
-    timer ??= setInterval(function () {
+    timer ??= ((): NodeJS.Timeout => {
       listDataPoints();
-    }, 10000);
-    listDataPoints();
+      return setInterval(listDataPoints, 10000);
+    })();
   }
 
   onBeforeRouteLeave(() => {
diff --git a/src/i18n/de.json b/src/i18n/de.json
index 631d50b1..be3b9970 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -350,6 +350,37 @@
     },
     "placeholder": {
       "chooseSize": "Größe auswählen"
+    },
+    "labels": {
+      "latestDataPoints": "Letzte Datenpunkte",
+      "dateRange": "Datumsbereich",
+      "noDataAvailable": "Keine Daten verfügbar"
+    },
+    "charts": {
+      "simpleQuestion": {
+        "responseDistribution": {
+          "label": "Alle Antworten",
+          "title": "Verteilung der Antworten der Teilnehmer:innen",
+          "description": "Jedes Segment stellt die Häufigkeit einer bestimmten Antwort dar und zeigt, wie viele Teilnehmer:innen die jeweilige Option gewählt haben."
+        },
+        "responseDistributionStudyGroup": {
+          "label": "Antworten per Gruppe",
+          "title": "Verteilung der Antworten der Teilnehmer:innen in den Studiengruppen",
+          "description": "Jede Spalte des Balkendiagramms gibt die Anzahl der Antworten pro Studiengruppe an."
+        },
+        "responseDistributionResponse": {
+          "label": "Gruppierung nach Antwort",
+          "title": "Verteilung der Antworten der Teilnehmer:innen in den Studiengruppen",
+          "description": "Jede Spalte des Balkendiagramms gibt die Anzahl der Antworten pro Studiengruppe an."
+        }
+      },
+      "polarVerity": {
+        "avgHeartRate": {
+          "label": "Herzfrequenz",
+          "title": "Durchschnittliche Herzfrequenz pro Teilnehmer im Zeitverlauf",
+          "description": "Vergleicht die durchschnittliche Herzfrequenz aller Teilnehmer über die Zeit mit einem Zeitintervall von 1 Minute."
+        }
+      }
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6727a83b..53e97057 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -350,6 +350,37 @@
     },
     "placeholder": {
       "chooseSize": "Choose a size"
+    },
+    "labels": {
+      "latestDataPoints": "Latest Data Points",
+      "dateRange": "Date range",
+      "noDataAvailable": "No data available"
+    },
+    "charts": {
+      "simpleQuestion": {
+        "responseDistribution": {
+          "label": "All Responses",
+          "title": "Distribution of Participant Responses",
+          "description": "Each segment represents the frequency of a particular answer and shows how many participants selected the respective option."
+        },
+        "responseDistributionStudyGroup": {
+          "label": "Responses by Group",
+          "title": "Response Distribution Across Study Groups",
+          "description": "Each column in the bar chart represents the number of responses per study group."
+        },
+        "responseDistributionResponse": {
+          "label": "Groups by Response",
+          "title": "Response Distribution Across Study Groups",
+          "description": "Each column in the bar chart represents the number of responses per study group."
+        }
+      },
+      "polarVerity": {
+        "avgHeartRate": {
+          "label": "Heart rate",
+          "title": "Average heart rate per participant over time",
+          "description": "Compares the average heart rate of all participants over time, with a time interval of 1 minute."
+        }
+      }
     }
   },
 
diff --git a/src/models/Common.ts b/src/models/Common.ts
new file mode 100644
index 00000000..f8a7ae22
--- /dev/null
+++ b/src/models/Common.ts
@@ -0,0 +1,12 @@
+/*
+ Copyright LBI-DHP and/or licensed to LBI-DHP under one or more
+ contributor license agreements (LBI-DHP: Ludwig Boltzmann Institute
+ for Digital Health and Prevention -- A research institute of the
+ Ludwig Boltzmann Gesellschaft, Oesterreichische Vereinigung zur
+ Foerderung der wissenschaftlichen Forschung).
+ Licensed under the Elastic License 2.0.
+ */
+export interface DropdownOption {
+  label: string;
+  value: string | undefined;
+}
diff --git a/src/models/ParticipationData.ts b/src/models/ParticipationData.ts
index dc2a75ea..95ff61f0 100644
--- a/src/models/ParticipationData.ts
+++ b/src/models/ParticipationData.ts
@@ -18,3 +18,51 @@ export interface ParticipationDataMapping {
 export interface ParticipationDataGrouping {
   [key: number]: ParticipationDataMapping[];
 }
+
+export interface ObservationDataViewDataDTO {
+  chartType: ChartType;
+  view: ObservationDataViewInfo;
+  labels: string[];
+  data: ObservationDataViewDataRow[];
+}
+
+export interface ObservationDataViewDataRow {
+  label: string;
+  values: number[];
+}
+
+export interface ObservationsViewData {
+  [key: string]: ObservationDataViewData[];
+}
+export interface ObservationDataViewData {
+  chartType: ChartType | null;
+  view: ObservationDataViewInfo;
+  labels: string[];
+  chartData: ChartProperties | null;
+}
+
+export interface ChartProperties {
+  type: string;
+  data: any;
+  options: any;
+}
+
+export enum ChartType {
+  PIE = 'pie',
+  BAR = 'bar',
+  LINE = 'line',
+}
+
+export interface ObservationDataViewInfo {
+  name: string;
+  label: string;
+  title: string;
+  description: string;
+}
+
+export interface ObservationDataViewFilter {
+  studyGroupId?: number;
+  participantId?: number;
+  from?: string;
+  to?: string;
+}
diff --git a/src/models/Timeline.ts b/src/models/Timeline.ts
index b1afb4be..eaefd742 100644
--- a/src/models/Timeline.ts
+++ b/src/models/Timeline.ts
@@ -7,11 +7,7 @@
  Licensed under the Elastic License 2.0.
  */
 import { Event } from 'vue-cal';
-
-export interface DropdownOption {
-  label: string;
-  value: string | undefined;
-}
+import { DropdownOption } from './Common';
 
 export interface GroupOption {
   label: string;
diff --git a/src/styles/more-light/theme.pcss b/src/styles/more-light/theme.pcss
index bb4ff484..5214ee8e 100644
--- a/src/styles/more-light/theme.pcss
+++ b/src/styles/more-light/theme.pcss
@@ -5716,7 +5716,6 @@
 
 .p-skeleton {
   background-color: var(--surface-c);
-  border-radius: var(--border-radius);
 }
 .p-skeleton:after {
   background: linear-gradient(90deg, var(--surface-0--alpha), var(--surface-50--alpha), var(--surface-0--alpha));

From 2d65965782f0ffd5f2e39189cd5d44b658b6fac4 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Fri, 12 Jul 2024 14:55:34 +0200
Subject: [PATCH 02/14] Dependency updates

* Remove unnecessary package
---
 package-lock.json | 1259 ++++++++++++++++++---------------------------
 package.json      |   47 +-
 2 files changed, 518 insertions(+), 788 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7ff0fb25..5fbdf202 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,64 +8,63 @@
       "name": "more-studymanager-frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@vuepic/vue-datepicker": "8.6.0",
-        "axios": "1.7.1",
+        "axios": "1.7.2",
         "chart.js": "^4.4.3",
         "cron-validate": "1.4.5",
-        "keycloak-js": "24.0.4",
+        "keycloak-js": "25.0.1",
         "normalize.css": "8.0.1",
-        "pg": "8.11.5",
+        "pg": "8.12.0",
         "pinia": "2.1.7",
         "primeicons": "5.0.0",
         "primevue": "3.46.0",
         "quill": "^2.0.2",
         "starwars-names": "1.6.0",
-        "vue": "3.4.27",
+        "vue": "3.4.31",
         "vue-cal": "^4.8.1",
         "vue-i18n": "9.13.1",
-        "vue-router": "4.3.2"
+        "vue-router": "4.4.0"
       },
       "devDependencies": {
-        "@babel/core": "7.24.5",
+        "@babel/core": "7.24.8",
         "@headlessui/vue": "1.7.22",
-        "@heroicons/vue": "2.1.3",
+        "@heroicons/vue": "2.1.5",
         "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@openapitools/openapi-generator-cli": "2.13.4",
         "@tailwindcss/aspect-ratio": "0.4.2",
         "@tailwindcss/forms": "0.5.7",
         "@tailwindcss/typography": "0.5.13",
         "@testing-library/vue": "8.1.0",
-        "@types/node": "20.12.12",
+        "@types/node": "20.14.10",
         "@types/starwars-names": "1.6.2",
         "@types/tailwindcss": "3.0.11",
-        "@typescript-eslint/eslint-plugin": "7.10.0",
-        "@typescript-eslint/parser": "7.10.0",
-        "@vitejs/plugin-vue": "5.0.4",
-        "@vitest/coverage-v8": "^1.6.0",
+        "@typescript-eslint/eslint-plugin": "7.16.0",
+        "@typescript-eslint/parser": "7.16.0",
+        "@vitejs/plugin-vue": "5.0.5",
+        "@vitest/coverage-v8": "^2.0.2",
         "@vue/eslint-config-prettier": "9.0.0",
         "@vue/eslint-config-typescript": "13.0.0",
         "autoprefixer": "10.4.19",
         "babel-loader": "9.1.3",
         "eslint": "8.56.0",
         "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-vue": "9.26.0",
+        "eslint-plugin-vue": "9.27.0",
         "jsdom": "^24.1.0",
         "licensee": "10.0.0",
-        "postcss": "8.4.38",
+        "postcss": "8.4.39",
         "postcss-css-variables": "0.19.0",
         "postcss-import": "16.1.0",
         "postcss-nested": "6.0.1",
-        "postcss-nesting": "12.1.4",
+        "postcss-nesting": "12.1.5",
         "postcss-simple-vars": "7.0.1",
-        "prettier": "3.2.5",
-        "prettier-plugin-svelte": "3.2.3",
-        "prettier-plugin-tailwindcss": "0.5.14",
-        "tailwindcss": "3.4.3",
-        "typescript": "5.4.5",
-        "vite": "5.2.11",
-        "vitest": "1.6.0",
+        "prettier": "3.3.2",
+        "prettier-plugin-svelte": "3.2.5",
+        "prettier-plugin-tailwindcss": "0.6.5",
+        "tailwindcss": "3.4.4",
+        "typescript": "5.5.3",
+        "vite": "5.3.3",
+        "vitest": "2.0.2",
         "vue-loader": "17.4.2",
-        "vue-tsc": "2.0.19"
+        "vue-tsc": "2.0.26"
       },
       "engines": {
         "node": "18.18.0",
@@ -111,30 +110,30 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.7.tgz",
-      "integrity": "sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.8.tgz",
+      "integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz",
-      "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.8.tgz",
+      "integrity": "sha512-6AWcmZC/MZCO0yKys4uhg5NlxL0ESF3K6IAaoQ+xSXvPyPyxNWRafP+GDbI88Oh68O7QkJgmEtedWPM9U0pZNg==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.24.5",
-        "@babel/helpers": "^7.24.5",
-        "@babel/parser": "^7.24.5",
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.5",
-        "@babel/types": "^7.24.5",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.24.8",
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-module-transforms": "^7.24.8",
+        "@babel/helpers": "^7.24.8",
+        "@babel/parser": "^7.24.8",
+        "@babel/template": "^7.24.7",
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -150,12 +149,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.7.tgz",
-      "integrity": "sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz",
+      "integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.24.7",
+        "@babel/types": "^7.24.8",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
@@ -165,14 +164,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.7.tgz",
-      "integrity": "sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz",
+      "integrity": "sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.24.7",
-        "@babel/helper-validator-option": "^7.24.7",
-        "browserslist": "^4.22.2",
+        "@babel/compat-data": "^7.24.8",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -231,9 +230,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.7.tgz",
-      "integrity": "sha512-1fuJEwIrp+97rM4RWdO+qrRsZlAeL1lQJoPqtCYWv0NL115XM93hIH4CSRln2w52SqvmY5hqdtauB6QFCDiZNQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.8.tgz",
+      "integrity": "sha512-m4vWKVqvkVAWLXfHCCfff2luJj86U+J0/x+0N3ArG/tP0Fq7zky2dYwMbtPmkc/oulkkbjdL3uWzuoBwQ8R00Q==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.24.7",
@@ -275,9 +274,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz",
-      "integrity": "sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -293,22 +292,22 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.7.tgz",
-      "integrity": "sha512-yy1/KvjhV/ZCL+SM7hBrvnZJ3ZuT9OuZgIJAGpPEToANvc3iM6iDvBnRjtElWibHU6n8/LPR/EjX9EtIEYO3pw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
+      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.7.tgz",
-      "integrity": "sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.8.tgz",
+      "integrity": "sha512-gV2265Nkcz7weJJfvDoAEVzC1e2OTDpkGbEsebse8koXUJUXPsCMi7sRo/+SPMuMZ9MtUPnGwITTnQnU5YjyaQ==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/types": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -330,9 +329,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
-      "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
+      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -366,19 +365,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.7.tgz",
-      "integrity": "sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
+      "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.24.7",
+        "@babel/generator": "^7.24.8",
         "@babel/helper-environment-visitor": "^7.24.7",
         "@babel/helper-function-name": "^7.24.7",
         "@babel/helper-hoist-variables": "^7.24.7",
         "@babel/helper-split-export-declaration": "^7.24.7",
-        "@babel/parser": "^7.24.7",
-        "@babel/types": "^7.24.7",
+        "@babel/parser": "^7.24.8",
+        "@babel/types": "^7.24.8",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -387,12 +386,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz",
-      "integrity": "sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz",
+      "integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.7",
+        "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       },
@@ -413,9 +412,9 @@
       "dev": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
-      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
       "cpu": [
         "ppc64"
       ],
@@ -429,9 +428,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
-      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "cpu": [
         "arm"
       ],
@@ -445,9 +444,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
-      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "cpu": [
         "arm64"
       ],
@@ -461,9 +460,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
-      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "cpu": [
         "x64"
       ],
@@ -477,9 +476,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
-      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "cpu": [
         "arm64"
       ],
@@ -493,9 +492,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
-      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "cpu": [
         "x64"
       ],
@@ -509,9 +508,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
-      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "cpu": [
         "arm64"
       ],
@@ -525,9 +524,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
-      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "cpu": [
         "x64"
       ],
@@ -541,9 +540,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
-      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "cpu": [
         "arm"
       ],
@@ -557,9 +556,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
-      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "cpu": [
         "arm64"
       ],
@@ -573,9 +572,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
-      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "cpu": [
         "ia32"
       ],
@@ -589,9 +588,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
-      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "cpu": [
         "loong64"
       ],
@@ -605,9 +604,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
-      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "cpu": [
         "mips64el"
       ],
@@ -621,9 +620,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
-      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
       "cpu": [
         "ppc64"
       ],
@@ -637,9 +636,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
-      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
         "riscv64"
       ],
@@ -653,9 +652,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
-      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
         "s390x"
       ],
@@ -669,9 +668,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
-      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
         "x64"
       ],
@@ -685,9 +684,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
         "x64"
       ],
@@ -701,9 +700,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
-      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
@@ -717,9 +716,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
-      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
@@ -733,9 +732,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
-      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
@@ -749,9 +748,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
-      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
@@ -765,9 +764,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
-      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
@@ -907,9 +906,9 @@
       }
     },
     "node_modules/@heroicons/vue": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.3.tgz",
-      "integrity": "sha512-CP4ipIwFbV4NEn8ULUCN110wkV0wZq6dsViDL3HwgIh+jn5yQGlRm6QaRN+Mv+o+UsUBbRDei3Je/q0NZHf5Gg==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.5.tgz",
+      "integrity": "sha512-IpqR72sFqFs55kyKfFS7tN+Ww6odFNeH/7UxycIOrlVYfj4WUGAdzQtLBnJspucSeqWFQsKM0g0YrgU655BEfA==",
       "dev": true,
       "peerDependencies": {
         "vue": ">= 3"
@@ -1191,18 +1190,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dev": true,
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2383,12 +2370,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "dev": true
-    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -2640,9 +2621,9 @@
       "integrity": "sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw=="
     },
     "node_modules/@types/node": {
-      "version": "20.12.12",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
-      "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+      "version": "20.14.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
+      "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2661,16 +2642,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.10.0.tgz",
-      "integrity": "sha512-PzCr+a/KAef5ZawX7nbyNwBDtM1HdLIT53aSA2DDlxmxMngZ43O8SIePOeX8H5S+FHXeI6t97mTt/dDdzY4Fyw==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.0.tgz",
+      "integrity": "sha512-py1miT6iQpJcs1BiJjm54AMzeuMPBSPuKPlnT8HlfudbcS5rYeX5jajpLf3mrdRh9dA/Ec2FVUY0ifeVNDIhZw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.10.0",
-        "@typescript-eslint/type-utils": "7.10.0",
-        "@typescript-eslint/utils": "7.10.0",
-        "@typescript-eslint/visitor-keys": "7.10.0",
+        "@typescript-eslint/scope-manager": "7.16.0",
+        "@typescript-eslint/type-utils": "7.16.0",
+        "@typescript-eslint/utils": "7.16.0",
+        "@typescript-eslint/visitor-keys": "7.16.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -2694,15 +2675,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.10.0.tgz",
-      "integrity": "sha512-2EjZMA0LUW5V5tGQiaa2Gys+nKdfrn2xiTIBLR4fxmPmVSvgPcKNW+AE/ln9k0A4zDUti0J/GZXMDupQoI+e1w==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.16.0.tgz",
+      "integrity": "sha512-ar9E+k7CU8rWi2e5ErzQiC93KKEFAXA2Kky0scAlPcxYblLt8+XZuHUZwlyfXILyQa95P6lQg+eZgh/dDs3+Vw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.10.0",
-        "@typescript-eslint/types": "7.10.0",
-        "@typescript-eslint/typescript-estree": "7.10.0",
-        "@typescript-eslint/visitor-keys": "7.10.0",
+        "@typescript-eslint/scope-manager": "7.16.0",
+        "@typescript-eslint/types": "7.16.0",
+        "@typescript-eslint/typescript-estree": "7.16.0",
+        "@typescript-eslint/visitor-keys": "7.16.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2722,13 +2703,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.10.0.tgz",
-      "integrity": "sha512-7L01/K8W/VGl7noe2mgH0K7BE29Sq6KAbVmxurj8GGaPDZXPr8EEQ2seOeAS+mEV9DnzxBQB6ax6qQQ5C6P4xg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.16.0.tgz",
+      "integrity": "sha512-8gVv3kW6n01Q6TrI1cmTZ9YMFi3ucDT7i7aI5lEikk2ebk1AEjrwX8MDTdaX5D7fPXMBLvnsaa0IFTAu+jcfOw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.10.0",
-        "@typescript-eslint/visitor-keys": "7.10.0"
+        "@typescript-eslint/types": "7.16.0",
+        "@typescript-eslint/visitor-keys": "7.16.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2739,13 +2720,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.10.0.tgz",
-      "integrity": "sha512-D7tS4WDkJWrVkuzgm90qYw9RdgBcrWmbbRkrLA4d7Pg3w0ttVGDsvYGV19SH8gPR5L7OtcN5J1hTtyenO9xE9g==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.16.0.tgz",
+      "integrity": "sha512-j0fuUswUjDHfqV/UdW6mLtOQQseORqfdmoBNDFOqs9rvNVR2e+cmu6zJu/Ku4SDuqiJko6YnhwcL8x45r8Oqxg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.10.0",
-        "@typescript-eslint/utils": "7.10.0",
+        "@typescript-eslint/typescript-estree": "7.16.0",
+        "@typescript-eslint/utils": "7.16.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -2766,9 +2747,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.10.0.tgz",
-      "integrity": "sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.16.0.tgz",
+      "integrity": "sha512-fecuH15Y+TzlUutvUl9Cc2XJxqdLr7+93SQIbcZfd4XRGGKoxyljK27b+kxKamjRkU7FYC6RrbSCg0ALcZn/xw==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2779,13 +2760,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.10.0.tgz",
-      "integrity": "sha512-LXFnQJjL9XIcxeVfqmNj60YhatpRLt6UhdlFwAkjNc6jSUlK8zQOl1oktAP8PlWFzPQC1jny/8Bai3/HPuvN5g==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.16.0.tgz",
+      "integrity": "sha512-a5NTvk51ZndFuOLCh5OaJBELYc2O3Zqxfl3Js78VFE1zE46J2AaVuW+rEbVkQznjkmlzWsUI15BG5tQMixzZLw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.10.0",
-        "@typescript-eslint/visitor-keys": "7.10.0",
+        "@typescript-eslint/types": "7.16.0",
+        "@typescript-eslint/visitor-keys": "7.16.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2819,15 +2800,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.10.0.tgz",
-      "integrity": "sha512-olzif1Fuo8R8m/qKkzJqT7qwy16CzPRWBvERS0uvyc+DHd8AKbO4Jb7kpAvVzMmZm8TrHnI7hvjN4I05zow+tg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.16.0.tgz",
+      "integrity": "sha512-PqP4kP3hb4r7Jav+NiRCntlVzhxBNWq6ZQ+zQwII1y/G/1gdIPeYDCKr2+dH6049yJQsWZiHU6RlwvIFBXXGNA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.10.0",
-        "@typescript-eslint/types": "7.10.0",
-        "@typescript-eslint/typescript-estree": "7.10.0"
+        "@typescript-eslint/scope-manager": "7.16.0",
+        "@typescript-eslint/types": "7.16.0",
+        "@typescript-eslint/typescript-estree": "7.16.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2841,12 +2822,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.10.0.tgz",
-      "integrity": "sha512-9ntIVgsi6gg6FIq9xjEO4VQJvwOqA3jaBFQJ/6TK5AvEup2+cECI6Fh7QiBxmfMHXU0V0J4RyPeOU1VDNzl9cg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.0.tgz",
+      "integrity": "sha512-rMo01uPy9C7XxG7AFsxa8zLnWXTF8N3PYclekWSrurvhwiw1eW88mrKiAYe6s53AUY57nTRz8dJsuuXdkAhzCg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.10.0",
+        "@typescript-eslint/types": "7.16.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -2864,9 +2845,9 @@
       "dev": true
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
-      "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
+      "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==",
       "dev": true,
       "engines": {
         "node": "^18.0.0 || >=20.0.0"
@@ -2877,172 +2858,113 @@
       }
     },
     "node_modules/@vitest/coverage-v8": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-1.6.0.tgz",
-      "integrity": "sha512-KvapcbMY/8GYIG0rlwwOKCVNRc0OL20rrhFkg/CHNzncV03TE2XWvO5w9uZYoxNiMEBacAJt3unSOiZ7svePew==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-2.0.2.tgz",
+      "integrity": "sha512-iA8eb4PMid3bMc++gfQSTvYE1QL//fC8pz+rKsTUDBFjdDiy/gH45hvpqyDu5K7FHhvgG0GNNCJzTMMSFKhoxg==",
       "dev": true,
       "dependencies": {
-        "@ampproject/remapping": "^2.2.1",
+        "@ampproject/remapping": "^2.3.0",
         "@bcoe/v8-coverage": "^0.2.3",
-        "debug": "^4.3.4",
+        "debug": "^4.3.5",
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",
-        "istanbul-lib-source-maps": "^5.0.4",
-        "istanbul-reports": "^3.1.6",
-        "magic-string": "^0.30.5",
-        "magicast": "^0.3.3",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.5.0",
-        "strip-literal": "^2.0.0",
-        "test-exclude": "^6.0.0"
+        "istanbul-lib-source-maps": "^5.0.6",
+        "istanbul-reports": "^3.1.7",
+        "magic-string": "^0.30.10",
+        "magicast": "^0.3.4",
+        "std-env": "^3.7.0",
+        "strip-literal": "^2.1.0",
+        "test-exclude": "^7.0.1",
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "1.6.0"
+        "vitest": "2.0.2"
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
-      "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.2.tgz",
+      "integrity": "sha512-nKAvxBYqcDugYZ4nJvnm5OR8eDJdgWjk4XM9owQKUjzW70q0icGV2HVnQOyYsp906xJaBDUXw0+9EHw2T8e0mQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "chai": "^4.3.10"
+        "@vitest/spy": "2.0.2",
+        "@vitest/utils": "2.0.2",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/runner": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
-      "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.2.tgz",
+      "integrity": "sha512-SBCyOXfGVvddRd9r2PwoVR0fonQjh9BMIcBMlSzbcNwFfGr6ZhOhvBzurjvi2F4ryut2HcqiFhNeDVGwru8tLg==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "1.6.0",
-        "p-limit": "^5.0.0",
-        "pathe": "^1.1.1"
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/runner/node_modules/p-limit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-5.0.0.tgz",
-      "integrity": "sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==",
+    "node_modules/@vitest/runner": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.2.tgz",
+      "integrity": "sha512-OCh437Vi8Wdbif1e0OvQcbfM3sW4s2lpmOjAE7qfLrpzJX2M7J1IQlNvEcb/fu6kaIB9n9n35wS0G2Q3en5kHg==",
       "dev": true,
       "dependencies": {
-        "yocto-queue": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@vitest/runner/node_modules/yocto-queue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.20"
+        "@vitest/utils": "2.0.2",
+        "pathe": "^1.1.2"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
-      "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.2.tgz",
+      "integrity": "sha512-Yc2ewhhZhx+0f9cSUdfzPRcsM6PhIb+S43wxE7OG0kTxqgqzo8tHkXFuFlndXeDMp09G3sY/X5OAo/RfYydf1g==",
       "dev": true,
       "dependencies": {
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
-        "pretty-format": "^29.7.0"
+        "@vitest/pretty-format": "2.0.2",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/snapshot/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@vitest/snapshot/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@vitest/snapshot/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
-    },
     "node_modules/@vitest/spy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
-      "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.2.tgz",
+      "integrity": "sha512-MgwJ4AZtCgqyp2d7WcQVE8aNG5vQ9zu9qMPYQHjsld/QVsrvg78beNrXdO4HYkP0lDahCO3P4F27aagIag+SGQ==",
       "dev": true,
       "dependencies": {
-        "tinyspy": "^2.2.0"
+        "tinyspy": "^3.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
-      "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.2.tgz",
+      "integrity": "sha512-pxCY1v7kmOCWYWjzc0zfjGTA3Wmn8PKnlPvSrsA643P1NHl1fOyXj2Q9SaNlrlFE+ivCsxM80Ov3AR82RmHCWQ==",
       "dev": true,
       "dependencies": {
-        "diff-sequences": "^29.6.3",
+        "@vitest/pretty-format": "2.0.2",
         "estree-walker": "^3.0.3",
-        "loupe": "^2.3.7",
-        "pretty-format": "^29.7.0"
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/utils/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/@vitest/utils/node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -3052,88 +2974,63 @@
         "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/@vitest/utils/node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@vitest/utils/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "dev": true
-    },
     "node_modules/@volar/language-core": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.5.tgz",
-      "integrity": "sha512-2htyAuxRrAgETmFeUhT4XLELk3LiEcqoW/B8YUXMF6BrGWLMwIR09MFaZYvrA2UhbdAeSyeQ726HaWSWkexUcQ==",
+      "version": "2.4.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.15.tgz",
+      "integrity": "sha512-mt8z4Fm2WxfQYoQHPcKVjLQV6PgPqyKLbkCVY2cr5RSaamqCHjhKEpsFX66aL4D/7oYguuaUw9Bx03Vt0TpIIA==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.2.5"
+        "@volar/source-map": "2.4.0-alpha.15"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.5.tgz",
-      "integrity": "sha512-wrOEIiZNf4E+PWB0AxyM4tfhkfldPsb3bxg8N6FHrxJH2ohar7aGu48e98bp3pR9HUA7P/pR9VrLmkTrgCCnWQ==",
-      "dev": true,
-      "dependencies": {
-        "muggle-string": "^0.4.0"
-      }
+      "version": "2.4.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.15.tgz",
+      "integrity": "sha512-8Htngw5TmBY4L3ClDqBGyfLhsB8EmoEXUH1xydyEtEoK0O6NX5ur4Jw8jgvscTlwzizyl/wsN1vn0cQXVbbXYg==",
+      "dev": true
     },
     "node_modules/@volar/typescript": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.5.tgz",
-      "integrity": "sha512-eSV/n75+ppfEVugMC/salZsI44nXDPAyL6+iTYCNLtiLHGJsnMv9GwiDMujrvAUj/aLQyqRJgYtXRoxop2clCw==",
+      "version": "2.4.0-alpha.15",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.15.tgz",
+      "integrity": "sha512-U3StRBbDuxV6Woa4hvGS4kz3XcOzrWUKgFdEFN+ba1x3eaYg7+ytau8ul05xgA+UNGLXXsKur7fTUhDFyISk0w==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.2.5",
-        "path-browserify": "^1.0.1"
+        "@volar/language-core": "2.4.0-alpha.15",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
-      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
-      "dev": true,
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
+      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.30",
+        "@vue/shared": "3.4.31",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
-      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
-      "dev": true,
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
+      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-core": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
-      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
-      "dev": true,
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
+      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.30",
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.38",
@@ -3141,13 +3038,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
-      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
-      "dev": true,
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
+      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -3194,16 +3090,17 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.19.tgz",
-      "integrity": "sha512-A9EGOnvb51jOvnCYoRLnMP+CcoPlbZVxI9gZXE/y2GksRWM6j/PrLEIC++pnosWTN08tFpJgxhSS//E9v/Sg+Q==",
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.26.tgz",
+      "integrity": "sha512-/lt6SfQ3O1yDAhPsnLv9iSUgXd1dMHqUm/t3RctfqjuwQf1LnftZ414X3UBn6aXT4MiwXWtbNJ4Z0NZWwDWgJQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~2.2.4",
+        "@volar/language-core": "~2.4.0-alpha.15",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
         "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
@@ -3217,99 +3114,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
-      "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
+      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
       "dependencies": {
-        "@vue/shared": "3.4.27"
+        "@vue/shared": "3.4.31"
       }
     },
-    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
-    },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz",
-      "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
+      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/reactivity": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
-    "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
-    },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz",
-      "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
+      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
       "dependencies": {
-        "@vue/runtime-core": "3.4.27",
-        "@vue/shared": "3.4.27",
+        "@vue/reactivity": "3.4.31",
+        "@vue/runtime-core": "3.4.31",
+        "@vue/shared": "3.4.31",
         "csstype": "^3.1.3"
       }
     },
-    "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
-    },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz",
-      "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
+      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
-        "vue": "3.4.27"
+        "vue": "3.4.31"
       }
     },
-    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
-      "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
-      "dependencies": {
-        "@babel/parser": "^7.24.4",
-        "@vue/shared": "3.4.27",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
-      "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
-      "dependencies": {
-        "@vue/compiler-core": "3.4.27",
-        "@vue/shared": "3.4.27"
-      }
-    },
-    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
-      "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/shared": "3.4.27"
-      }
-    },
-    "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
-    },
     "node_modules/@vue/shared": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
-      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==",
-      "dev": true
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
+      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.4.6",
@@ -3321,20 +3168,6 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
-    "node_modules/@vuepic/vue-datepicker": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.6.0.tgz",
-      "integrity": "sha512-ZnG7xquVf7WyMKXk7JxWOJ5ursig1t8o2AtH9ycetiik+lemV9+HNEx+YOR1xeCUfhupGTgJmyAxCSZHP/Sv/w==",
-      "dependencies": {
-        "date-fns": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      },
-      "peerDependencies": {
-        "vue": ">=3.2.0"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -3550,18 +3383,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-walk": {
-      "version": "8.3.3",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.3.tgz",
-      "integrity": "sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.11.0"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -3791,12 +3612,12 @@
       }
     },
     "node_modules/assertion-error": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
-      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
       "dev": true,
       "engines": {
-        "node": "*"
+        "node": ">=12"
       }
     },
     "node_modules/asynckit": {
@@ -3857,9 +3678,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.1.tgz",
-      "integrity": "sha512-+LV37nQcd1EpFalkXksWNBiA17NZ5m5/WspmHGmZmdx1qBOg/VNq/c4eRJiA9VQQHBOs+N0ZhhdU10h2TyNK7Q==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -4169,21 +3990,19 @@
       ]
     },
     "node_modules/chai": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
-      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
       "dev": true,
       "dependencies": {
-        "assertion-error": "^1.1.0",
-        "check-error": "^1.0.3",
-        "deep-eql": "^4.1.3",
-        "get-func-name": "^2.0.2",
-        "loupe": "^2.3.6",
-        "pathval": "^1.1.1",
-        "type-detect": "^4.0.8"
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
       }
     },
     "node_modules/chalk": {
@@ -4218,15 +4037,12 @@
       }
     },
     "node_modules/check-error": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
-      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
       "dev": true,
-      "dependencies": {
-        "get-func-name": "^2.0.2"
-      },
       "engines": {
-        "node": "*"
+        "node": ">= 16"
       }
     },
     "node_modules/chokidar": {
@@ -4777,15 +4593,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -4816,13 +4623,10 @@
       "dev": true
     },
     "node_modules/deep-eql": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
-      "integrity": "sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
       "dev": true,
-      "dependencies": {
-        "type-detect": "^4.0.0"
-      },
       "engines": {
         "node": ">=6"
       }
@@ -4941,15 +4745,6 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
-    "node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "dev": true,
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -5188,9 +4983,9 @@
       "peer": true
     },
     "node_modules/esbuild": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
-      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -5200,29 +4995,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.20.2",
-        "@esbuild/android-arm": "0.20.2",
-        "@esbuild/android-arm64": "0.20.2",
-        "@esbuild/android-x64": "0.20.2",
-        "@esbuild/darwin-arm64": "0.20.2",
-        "@esbuild/darwin-x64": "0.20.2",
-        "@esbuild/freebsd-arm64": "0.20.2",
-        "@esbuild/freebsd-x64": "0.20.2",
-        "@esbuild/linux-arm": "0.20.2",
-        "@esbuild/linux-arm64": "0.20.2",
-        "@esbuild/linux-ia32": "0.20.2",
-        "@esbuild/linux-loong64": "0.20.2",
-        "@esbuild/linux-mips64el": "0.20.2",
-        "@esbuild/linux-ppc64": "0.20.2",
-        "@esbuild/linux-riscv64": "0.20.2",
-        "@esbuild/linux-s390x": "0.20.2",
-        "@esbuild/linux-x64": "0.20.2",
-        "@esbuild/netbsd-x64": "0.20.2",
-        "@esbuild/openbsd-x64": "0.20.2",
-        "@esbuild/sunos-x64": "0.20.2",
-        "@esbuild/win32-arm64": "0.20.2",
-        "@esbuild/win32-ia32": "0.20.2",
-        "@esbuild/win32-x64": "0.20.2"
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
       }
     },
     "node_modules/escalade": {
@@ -5362,9 +5157,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
-      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+      "version": "9.27.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz",
+      "integrity": "sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -5373,7 +5168,7 @@
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.15",
         "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "vue-eslint-parser": "^9.4.3",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -7086,9 +6881,9 @@
       }
     },
     "node_modules/istanbul-lib-source-maps": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.4.tgz",
-      "integrity": "sha512-wHOoEsNJTVltaJp8eVkm8w+GVkVNHT2YDYo53YdzQEL2gWm1hBX5cGFR9hQJtuGLebidVX7et3+dmDZrmclduw==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.23",
@@ -7458,9 +7253,9 @@
       }
     },
     "node_modules/keycloak-js": {
-      "version": "24.0.4",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-24.0.4.tgz",
-      "integrity": "sha512-eLjG7CzGGgAXh78M76QUJy1R8+QDQvIJXJf6T3bq9VJZ6RXBGZXMsXvII66b83ueYDFa1gi2JojmA31Z23HO0g==",
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-25.0.1.tgz",
+      "integrity": "sha512-ns5sKQ5Iz3UyVGIKq2XBBXNZTlTCg9bzybR+JB2Vn+fDHIo9EGgAY4kzrBWMwbeFuegY+qJwGs05N+W9jgY9tg==",
       "dependencies": {
         "js-sha256": "^0.11.0",
         "jwt-decode": "^4.0.0"
@@ -7550,22 +7345,6 @@
         "node": ">=6.11.5"
       }
     },
-    "node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
-      "dev": true,
-      "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -7713,9 +7492,9 @@
       }
     },
     "node_modules/loupe": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
-      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
       "dev": true,
       "dependencies": {
         "get-func-name": "^2.0.1"
@@ -9388,12 +9167,12 @@
       "dev": true
     },
     "node_modules/pathval": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
-      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
       "dev": true,
       "engines": {
-        "node": "*"
+        "node": ">= 14.16"
       }
     },
     "node_modules/periscopic": {
@@ -9419,9 +9198,9 @@
       }
     },
     "node_modules/pg": {
-      "version": "8.11.5",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.11.5.tgz",
-      "integrity": "sha512-jqgNHSKL5cbDjFlHyYsCXmQDrfIX/3RsNwYqpd4N0Kt8niLuNoRNH+aazv6cOd43gPh9Y4DjQCtb+X0MH0Hvnw==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.12.0.tgz",
+      "integrity": "sha512-A+LHUSnwnxrnL/tZ+OLfqR1SxLN3c/pgDztZ47Rpbsd4jUytsTtwQo/TLPRzPJMp/1pbhYVhH9cuSZLAajNfjQ==",
       "dependencies": {
         "pg-connection-string": "^2.6.4",
         "pg-pool": "^3.6.2",
@@ -9702,9 +9481,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -9721,7 +9500,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -9858,9 +9637,9 @@
       }
     },
     "node_modules/postcss-nesting": {
-      "version": "12.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.4.tgz",
-      "integrity": "sha512-CcHOq94K137E+U4Ommu7pexcpp0Tjm24zl4UcqWs1oSLAr5cLI+jLrqQ5h/bdjhMX6cMbzunyustVNnvrzF8Zg==",
+      "version": "12.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz",
+      "integrity": "sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==",
       "dev": true,
       "funding": [
         {
@@ -9875,7 +9654,7 @@
       "dependencies": {
         "@csstools/selector-resolve-nested": "^1.1.0",
         "@csstools/selector-specificity": "^3.1.1",
-        "postcss-selector-parser": "^6.0.13"
+        "postcss-selector-parser": "^6.1.0"
       },
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -10021,9 +9800,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -10048,9 +9827,9 @@
       }
     },
     "node_modules/prettier-plugin-svelte": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.3.tgz",
-      "integrity": "sha512-wJq8RunyFlWco6U0WJV5wNCM7zpBFakS76UBSbmzMGpncpK98NZABaE+s7n8/APDCEVNHXC5Mpq+MLebQtsRlg==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.5.tgz",
+      "integrity": "sha512-vP/M/Goc8z4iVIvrwXwbrYVjJgA0Hf8PO1G4LBh/ocSt6vUP6sLvyu9F3ABEGr+dbKyxZjEKLkeFsWy/yYl0HQ==",
       "dev": true,
       "peerDependencies": {
         "prettier": "^3.0.0",
@@ -10058,9 +9837,9 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.5.14",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz",
-      "integrity": "sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+      "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
       "dev": true,
       "engines": {
         "node": ">=14.21.3"
@@ -11437,9 +11216,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
-      "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -11650,39 +11429,37 @@
       "peer": true
     },
     "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
+      "integrity": "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==",
       "dev": true,
       "dependencies": {
         "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
+        "glob": "^10.4.1",
+        "minimatch": "^9.0.4"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/test-exclude/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "node": ">=18"
       }
     },
-    "node_modules/test-exclude/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
-      "engines": {
-        "node": "*"
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/text-table": {
@@ -11725,18 +11502,27 @@
       "dev": true
     },
     "node_modules/tinypool": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-0.8.4.tgz",
-      "integrity": "sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.0.tgz",
+      "integrity": "sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
-      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -11993,15 +11779,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/type-fest": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
@@ -12015,9 +11792,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -12193,13 +11970,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz",
-      "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
+      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.20.1",
-        "postcss": "^8.4.38",
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.39",
         "rollup": "^4.13.0"
       },
       "bin": {
@@ -12248,15 +12025,15 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
-      "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.2.tgz",
+      "integrity": "sha512-w4vkSz1Wo+NIQg8pjlEn0jQbcM/0D+xVaYjhw3cvarTanLLBh54oNiRbsT8PNK5GfuST0IlVXjsNRoNlqvY/fw==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
-        "debug": "^4.3.4",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
+        "debug": "^4.3.5",
+        "pathe": "^1.1.2",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0"
       },
       "bin": {
@@ -12270,30 +12047,29 @@
       }
     },
     "node_modules/vitest": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
-      "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
-      "dev": true,
-      "dependencies": {
-        "@vitest/expect": "1.6.0",
-        "@vitest/runner": "1.6.0",
-        "@vitest/snapshot": "1.6.0",
-        "@vitest/spy": "1.6.0",
-        "@vitest/utils": "1.6.0",
-        "acorn-walk": "^8.3.2",
-        "chai": "^4.3.10",
-        "debug": "^4.3.4",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.2.tgz",
+      "integrity": "sha512-WlpZ9neRIjNBIOQwBYfBSr0+of5ZCbxT2TVGKW4Lv0c8+srCFIiRdsP7U009t8mMn821HQ4XKgkx5dVWpyoyLw==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@vitest/expect": "2.0.2",
+        "@vitest/pretty-format": "^2.0.2",
+        "@vitest/runner": "2.0.2",
+        "@vitest/snapshot": "2.0.2",
+        "@vitest/spy": "2.0.2",
+        "@vitest/utils": "2.0.2",
+        "chai": "^5.1.1",
+        "debug": "^4.3.5",
         "execa": "^8.0.1",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.5",
-        "pathe": "^1.1.1",
-        "picocolors": "^1.0.0",
-        "std-env": "^3.5.0",
-        "strip-literal": "^2.0.0",
-        "tinybench": "^2.5.1",
-        "tinypool": "^0.8.3",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.8.0",
+        "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "1.6.0",
+        "vite-node": "2.0.2",
         "why-is-node-running": "^2.2.2"
       },
       "bin": {
@@ -12308,8 +12084,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "1.6.0",
-        "@vitest/ui": "1.6.0",
+        "@vitest/browser": "2.0.2",
+        "@vitest/ui": "2.0.2",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -12334,16 +12110,22 @@
         }
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true
+    },
     "node_modules/vue": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
-      "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
+      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/compiler-sfc": "3.4.27",
-        "@vue/runtime-dom": "3.4.27",
-        "@vue/server-renderer": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-sfc": "3.4.31",
+        "@vue/runtime-dom": "3.4.31",
+        "@vue/server-renderer": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -12519,9 +12301,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
-      "integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
+      "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.1"
       },
@@ -12543,20 +12325,20 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.19.tgz",
-      "integrity": "sha512-JWay5Zt2/871iodGF72cELIbcAoPyhJxq56mPPh+M2K7IwI688FMrFKc/+DvB05wDWEuCPexQJ6L10zSwzzapg==",
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.26.tgz",
+      "integrity": "sha512-tOhuwy2bIXbMhz82ef37qeiaQHMXKQkD6mOF6CCPl3/uYtST3l6fdNyfMxipudrQTxTfXVPlgJdMENBFfC1CfQ==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~2.2.4",
-        "@vue/language-core": "2.0.19",
+        "@volar/typescript": "~2.4.0-alpha.15",
+        "@vue/language-core": "2.0.26",
         "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
       },
       "peerDependencies": {
-        "typescript": "*"
+        "typescript": ">=5.0.0"
       }
     },
     "node_modules/vue-tsc/node_modules/semver": {
@@ -12571,57 +12353,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/vue/node_modules/@vue/compiler-core": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
-      "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
-      "dependencies": {
-        "@babel/parser": "^7.24.4",
-        "@vue/shared": "3.4.27",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/compiler-dom": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
-      "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
-      "dependencies": {
-        "@vue/compiler-core": "3.4.27",
-        "@vue/shared": "3.4.27"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/compiler-sfc": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz",
-      "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==",
-      "dependencies": {
-        "@babel/parser": "^7.24.4",
-        "@vue/compiler-core": "3.4.27",
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/compiler-ssr": "3.4.27",
-        "@vue/shared": "3.4.27",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.10",
-        "postcss": "^8.4.38",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/compiler-ssr": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
-      "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/shared": "3.4.27"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -12908,9 +12639,9 @@
       }
     },
     "node_modules/why-is-node-running": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
       "dependencies": {
         "siginfo": "^2.0.0",
diff --git a/package.json b/package.json
index 14787e83..4d95fbca 100644
--- a/package.json
+++ b/package.json
@@ -23,63 +23,62 @@
     "npm": "9.8.1"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "8.6.0",
-    "axios": "1.7.1",
+    "axios": "1.7.2",
     "chart.js": "^4.4.3",
     "cron-validate": "1.4.5",
-    "keycloak-js": "24.0.4",
+    "keycloak-js": "25.0.1",
     "normalize.css": "8.0.1",
-    "pg": "8.11.5",
+    "pg": "8.12.0",
     "pinia": "2.1.7",
     "primeicons": "5.0.0",
     "primevue": "3.46.0",
     "quill": "^2.0.2",
     "starwars-names": "1.6.0",
-    "vue": "3.4.27",
+    "vue": "3.4.31",
     "vue-cal": "^4.8.1",
     "vue-i18n": "9.13.1",
-    "vue-router": "4.3.2"
+    "vue-router": "4.4.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.5",
+    "@babel/core": "7.24.8",
     "@headlessui/vue": "1.7.22",
-    "@heroicons/vue": "2.1.3",
+    "@heroicons/vue": "2.1.5",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@openapitools/openapi-generator-cli": "2.13.4",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.13",
     "@testing-library/vue": "8.1.0",
-    "@types/node": "20.12.12",
+    "@types/node": "20.14.10",
     "@types/starwars-names": "1.6.2",
     "@types/tailwindcss": "3.0.11",
-    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/parser": "7.10.0",
-    "@vitejs/plugin-vue": "5.0.4",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
+    "@vitejs/plugin-vue": "5.0.5",
+    "@vitest/coverage-v8": "^2.0.2",
     "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "13.0.0",
     "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
     "eslint": "8.56.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-vue": "9.26.0",
+    "eslint-plugin-vue": "9.27.0",
     "jsdom": "^24.1.0",
     "licensee": "10.0.0",
-    "postcss": "8.4.38",
+    "postcss": "8.4.39",
     "postcss-css-variables": "0.19.0",
     "postcss-import": "16.1.0",
     "postcss-nested": "6.0.1",
-    "postcss-nesting": "12.1.4",
+    "postcss-nesting": "12.1.5",
     "postcss-simple-vars": "7.0.1",
-    "prettier": "3.2.5",
-    "prettier-plugin-svelte": "3.2.3",
-    "prettier-plugin-tailwindcss": "0.5.14",
-    "tailwindcss": "3.4.3",
-    "typescript": "5.4.5",
-    "vite": "5.2.11",
-    "vitest": "1.6.0",
+    "prettier": "3.3.2",
+    "prettier-plugin-svelte": "3.2.5",
+    "prettier-plugin-tailwindcss": "0.6.5",
+    "tailwindcss": "3.4.4",
+    "typescript": "5.5.3",
+    "vite": "5.3.3",
+    "vitest": "2.0.2",
     "vue-loader": "17.4.2",
-    "vue-tsc": "2.0.19"
+    "vue-tsc": "2.0.26"
   }
 }

From 015dab9971c4b69eb4ba6493b0eeb5bde13109ca Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Mon, 15 Jul 2024 15:44:02 +0200
Subject: [PATCH 03/14] #377: Change to generic usage of different data types.

* Parse Dates, i18n translation labels, etc. correct.
---
 src/components/ParticipationDataList.vue | 34 +++++++++++-------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index f6f740b2..dd781400 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -253,7 +253,7 @@ Licensed under the Elastic License 2.0. */
     return {
       type: 'pie',
       data: {
-        labels: observationDataViewData.labels,
+        labels: transformLabels(observationDataViewData.labels),
         datasets: [
           {
             data: observationDataViewData.data[0].values,
@@ -270,7 +270,7 @@ Licensed under the Elastic License 2.0. */
     return {
       type: 'line',
       data: {
-        labels: formatDateLabels(observationDataViewData.labels),
+        labels: transformLabels(observationDataViewData.labels),
         datasets: createDataSet(observationDataViewData.data),
       },
       options: getChartOptions(observationDataViewData.view),
@@ -294,7 +294,7 @@ Licensed under the Elastic License 2.0. */
     return {
       type: 'bar',
       data: {
-        labels: translateLabel(observationDataViewData.labels),
+        labels: transformLabels(observationDataViewData.labels),
         datasets: createDataSet(observationDataViewData.data),
       },
       options: getChartOptions(
@@ -324,20 +324,11 @@ Licensed under the Elastic License 2.0. */
     };
   }
 
-  function formatDateLabels(labels: string[]): string[] | null {
-    if (!labels) {
-      return null;
-    }
-    for (let i = 0, len = labels.length; i < len; i++) {
-      labels[i] = d(new Date(labels[i]), 'long');
-    }
-
-    return labels;
-  }
-
-  function translateLabel(labels: string[]): string[] {
-    return labels.map((label) => {
-      if (label.startsWith('i18n.')) {
+  function transformLabels(labels: string[]): string[] | null {
+    return labels?.map((label) => {
+      if (isValidDateTimeFormat(label)) {
+        return d(new Date(label), 'long');
+      } else if (label.startsWith('i18n.')) {
         const key = label.substring(5);
         return t(key);
       }
@@ -345,14 +336,19 @@ Licensed under the Elastic License 2.0. */
     });
   }
 
+  function isValidDateTimeFormat(dateTimeString: string): boolean {
+    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/;
+    return regex.test(dateTimeString);
+  }
+
   function createDataSet(
     data: ObservationDataViewDataRow[],
-  ): { label: string[]; data: number[] }[] {
+  ): { label: string[] | null; data: number[] }[] {
     const obj = groupAndAggregateValues(data);
     const dataSets = [];
     for (const [key, values] of Object.entries(obj)) {
       dataSets.push({
-        label: translateLabel([key]),
+        label: transformLabels([key]),
         data: values,
       });
     }

From 706fbdbc40833ed51320bc3281a298bfbb9a3940 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Tue, 16 Jul 2024 08:08:05 +0200
Subject: [PATCH 04/14] #377: Change regex to work with correct date from BE.

---
 src/components/ParticipationDataList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index dd781400..ce4feadb 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -337,7 +337,7 @@ Licensed under the Elastic License 2.0. */
   }
 
   function isValidDateTimeFormat(dateTimeString: string): boolean {
-    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}Z$/;
+    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}\+\d{4}$/;
     return regex.test(dateTimeString);
   }
 

From 49bab68efc944ed227337e0d0a10d66b2409df6d Mon Sep 17 00:00:00 2001
From: Jakob Frank <jakob.frank@redlink.at>
Date: Tue, 16 Jul 2024 09:08:43 +0200
Subject: [PATCH 05/14] #377: Improve regex to detect date-time labels

---
 src/components/ParticipationDataList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index ce4feadb..73644da6 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -337,7 +337,7 @@ Licensed under the Elastic License 2.0. */
   }
 
   function isValidDateTimeFormat(dateTimeString: string): boolean {
-    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}\+\d{4}$/;
+    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2}(\.\d+)?)?[+-]\d{4}$/;
     return regex.test(dateTimeString);
   }
 

From 017c1d21ced2b26f1d33e447797dffae2ad23a7d Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 17 Jul 2024 13:54:01 +0200
Subject: [PATCH 06/14] #378: Improve data download

* It is now possible to filter the study data download for specific data.
* Add new Tab "Data" and therefore change naming (monitoring vs data).
* Only show filter at ParticipationDataList when data is available.
---
 openapi/StudyManagerAPI.yaml                  | 114 +++++++-
 src/components/ParticipationDataList.vue      |  30 +-
 src/components/StudyList.vue                  |   3 +-
 src/components/TimelineList.vue               |   2 +-
 src/components/shared/MoreTabNav.vue          |   8 +-
 src/components/subComponents/DataDownload.vue | 257 ++++++++++++++++++
 .../subComponents/DatapointList.vue           |  23 +-
 src/i18n/de.json                              |  29 +-
 src/i18n/en.json                              |  27 +-
 src/models/DataDownloadModel.ts               |  20 ++
 src/router/index.ts                           |  31 ++-
 src/stores/studyStore.ts                      |  25 +-
 src/views/Data.vue                            |  14 +-
 src/views/Monitoring.vue                      |  35 +++
 14 files changed, 545 insertions(+), 73 deletions(-)
 create mode 100644 src/components/subComponents/DataDownload.vue
 create mode 100644 src/models/DataDownloadModel.ts
 create mode 100644 src/views/Monitoring.vue

diff --git a/openapi/StudyManagerAPI.yaml b/openapi/StudyManagerAPI.yaml
index 96b07046..7149f1f4 100644
--- a/openapi/StudyManagerAPI.yaml
+++ b/openapi/StudyManagerAPI.yaml
@@ -1095,7 +1095,7 @@ paths:
       operationId: exportStudy
       responses:
         '200':
-          description: foo
+          description: Operation successful
           content:
             application/json:
               schema:
@@ -1110,10 +1110,39 @@ paths:
       tags:
         - importExport
       operationId: generateDownloadToken
-      description: generate a download token that can be used once for download and is valid for 10 minutes
+      description: Generate a download token that can be used once for download and is valid for 10 minutes
+      parameters:
+        - name: studyGroupId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: participantId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: observationId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: from
+          in: query
+          schema:
+            type: string
+            format: date
+        - name: to
+          in: query
+          schema:
+            type: string
+            format: date
       responses:
         '200':
-          description: foo
+          description: Operation successful
           content:
             application/json:
               schema:
@@ -1124,6 +1153,58 @@ paths:
         '404':
           description: study not found
 
+  /studies/{studyId}/export/studydata/{token}:
+    parameters:
+      - $ref: '#/components/parameters/StudyId'
+      - name: token
+        in: path
+        required: true
+        schema:
+          type: string
+    get:
+      tags:
+        - importExport
+      description: Download Study data
+      operationId: exportStudyData
+      parameters:
+        - name: studyGroupId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: participantId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: observationId
+          in: query
+          schema:
+            type: array
+            items:
+              type: integer
+        - name: from
+          in: query
+          schema:
+            type: string
+            format: date
+        - name: to
+          in: query
+          schema:
+            type: string
+            format: date
+      responses:
+        '200':
+          description: Operation successful
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DataExport'
+        '404':
+          description: study not found
+
   /studies/{studyId}/import/participants:
     parameters:
       - $ref: '#/components/parameters/StudyId'
@@ -1157,7 +1238,7 @@ paths:
       operationId: exportParticipants
       responses:
         '200':
-          description: foo
+          description: Operation successful
           content:
             text/csv:
               schema:
@@ -2134,6 +2215,31 @@ components:
       required:
         - version
         - date
+    DataExport:
+      type: array
+      items:
+        type: object
+        properties:
+          datapoint_id:
+            type: string
+          participant_id:
+            type: string
+          study_id:
+            type: string
+          study_group_id:
+            type: string
+            nullable: true
+          observation_id:
+            type: string
+          observation_type:
+            type: string
+          data_type:
+            type: string
+          storage_date:
+            type: string
+          effective_time_frame:
+            type: string
+        additionalProperties: true
 
   parameters:
     StudyId:
diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index 73644da6..5912c52a 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -106,8 +106,6 @@ Licensed under the Elastic License 2.0. */
     } as DropdownOption,
   ]);
 
-  let timer: NodeJS.Timeout;
-
   function onStudyGroupFilterChange(e: DropdownChangeEvent): void {
     const filteredOptions: DropdownOption[] = [];
     const filteredParticipants: Participant[] = [];
@@ -539,10 +537,13 @@ Licensed under the Elastic License 2.0. */
       });
   }
 
+  let timer: NodeJS.Timeout;
+  const refreshTimeInSeconds = 10;
+
   function loadData(): void {
     timer ??= setInterval(function () {
       fetchParticipationData().then(setObservationGroups);
-    }, 10000);
+    }, refreshTimeInSeconds * 1000);
     fetchParticipationData().then((data) => {
       setObservationGroups(data);
       fetchViewsForObservation(data);
@@ -563,24 +564,21 @@ Licensed under the Elastic License 2.0. */
 
 <template>
   <div>
-    <div class="title mb-12">
-      <h3 class="font-bold">{{ $t('data.title') }}</h3>
-      <div>{{ $t('data.description') }}</div>
-    </div>
-    <DatapointList :study-id="studyId" class="mb-14"></DatapointList>
-
+    <DatapointList :study-id="studyId" class="mb-14" />
     <div>
       <h4
         v-if="Object.keys(groupedParticipantData).length"
         class="color-primary mb-4 font-bold"
       >
-        {{ $t('data.dataList.title') }}
+        {{ $t('monitoring.dataList.title') }}
       </h4>
-
-      <div class="mb-3 flex items-center justify-between gap-5">
+      <div
+        v-if="Object.keys(groupedParticipantData).length"
+        class="mb-3 flex items-center justify-between gap-5"
+      >
         <div class="flex gap-5">
           <div>
-            {{ $t('data.labels.dateRange') }}:
+            {{ $t('monitoring.labels.dateRange') }}:
             <Calendar
               v-model="filterDateRange"
               :min-date="new Date(studyStore.study.plannedStart as string)"
@@ -635,7 +633,7 @@ Licensed under the Elastic License 2.0. */
           headerClass="mt-2.5"
         >
           <TabView @update:active-index="onTabChange(observationId, $event)">
-            <TabPanel :header="$t('data.labels.latestDataPoints')">
+            <TabPanel :header="$t('monitoring.labels.latestDataPoints')">
               <MoreTable
                 v-if="observationData.length"
                 row-id="observationId"
@@ -644,7 +642,7 @@ Licensed under the Elastic License 2.0. */
                 :row-edit-btn="false"
                 :sort-options="sortOptions"
                 :editable="() => false"
-                :empty-message="$t('data.dataList.emptyListMsg')"
+                :empty-message="$t('monitoring.dataList.emptyListMsg')"
               />
             </TabPanel>
             <TabPanel
@@ -660,7 +658,7 @@ Licensed under the Elastic License 2.0. */
                   :width="1000"
                 />
                 <template v-else-if="!loader.isLoading.value">
-                  <h3>{{ $t('data.labels.noDataAvailable') }}</h3>
+                  <h3>{{ $t('monitoring.labels.noDataAvailable') }}</h3>
                 </template>
               </div>
             </TabPanel>
diff --git a/src/components/StudyList.vue b/src/components/StudyList.vue
index cbc731e5..9a6f72fd 100644
--- a/src/components/StudyList.vue
+++ b/src/components/StudyList.vue
@@ -27,6 +27,7 @@ Licensed under the Elastic License 2.0. */
   import AlertMsg from './shared/AlertMsg.vue';
   import FileUpload, { FileUploadUploaderEvent } from 'primevue/fileupload';
   import Button from 'primevue/button';
+  import { DownloadData } from '../models/DataDownloadModel';
 
   const studyStore = useStudyStore();
   const router = useRouter();
@@ -271,7 +272,7 @@ Licensed under the Elastic License 2.0. */
   }
 
   function onExportStudyData(studyId: number): void {
-    studyStore.exportStudyData(studyId);
+    studyStore.exportStudyData({ studyId } as DownloadData);
   }
 
   function onExportStudyCalendar(studyId: number): void {
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 30f77df4..0bbe0720 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -476,7 +476,7 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="title w-full">
     <div class="flex flex-row justify-between">
-      <h3 class="mb-1 font-bold">Filter</h3>
+      <h3 class="mb-1 font-bold">{{ $t('global.labels.filter') }}</h3>
       <Button icon="pi pi-filter-slash" @click="clearAllFilters" />
     </div>
     <div class="mb-3 flex gap-5">
diff --git a/src/components/shared/MoreTabNav.vue b/src/components/shared/MoreTabNav.vue
index 12c3826e..b814cd11 100644
--- a/src/components/shared/MoreTabNav.vue
+++ b/src/components/shared/MoreTabNav.vue
@@ -75,11 +75,17 @@ Licensed under the Elastic License 2.0. */
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
+    {
+      title: t('studyNavigation.tabs.monitoring'),
+      name: t('studyNavigation.tabLink.monitoring'),
+      params: { studyId: props.studyId },
+      access: [StudyRole.Admin, StudyRole.Viewer],
+    },
     {
       title: t('studyNavigation.tabs.data'),
       name: t('studyNavigation.tabLink.data'),
       params: { studyId: props.studyId },
-      access: [StudyRole.Viewer, StudyRole.Admin],
+      access: [StudyRole.Admin, StudyRole.Viewer],
     },
   ] as Tab[];
 
diff --git a/src/components/subComponents/DataDownload.vue b/src/components/subComponents/DataDownload.vue
new file mode 100644
index 00000000..8a5ac2a7
--- /dev/null
+++ b/src/components/subComponents/DataDownload.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+  import Calendar from 'primevue/calendar';
+  import Button from 'primevue/button';
+  import { computed, ComputedRef, Ref, ref } from 'vue';
+  import { DropdownOption } from '../../models/Common';
+  import {
+    ComponentFactory,
+    Observation,
+    Participant,
+  } from '../../generated-sources/openapi';
+  import { AxiosError, AxiosResponse } from 'axios';
+  import {
+    useComponentsApi,
+    useObservationsApi,
+    useParticipantsApi,
+  } from '../../composable/useApi';
+  import { useStudyGroupStore } from '../../stores/studyGroupStore';
+  import { useI18n } from 'vue-i18n';
+  import { useErrorHandling } from '../../composable/useErrorHandling';
+  import { useStudyStore } from '../../stores/studyStore';
+  import { useGlobalStore } from '../../stores/globalStore';
+  import MultiSelect from 'primevue/multiselect';
+  import { DownloadDataFilter } from '../../models/DataDownloadModel';
+
+  const { t } = useI18n();
+  const { componentsApi } = useComponentsApi();
+  const { observationsApi } = useObservationsApi();
+  const { handleIndividualError } = useErrorHandling();
+  const dateFormat = useGlobalStore().getDateFormat;
+  const { participantsApi } = useParticipantsApi();
+  const studyGroupStore = useStudyGroupStore();
+  const studyStore = useStudyStore();
+
+  const observationList: Ref<Observation[]> = ref([]);
+  let factories: ComponentFactory[] = await getFactories();
+  const filterDateRange = ref();
+
+  const filterStudyGroup = ref([]);
+  const filterParticipant = ref([]);
+  const filterObservation = ref([]);
+  const observationOptions: ComputedRef<DropdownOption[]> = computed(() => {
+    return observationList.value.map((observation) => {
+      return {
+        label: `${observation.title} (${getObservationName(observation.type as string)})`,
+        value: observation.observationId?.toString() || null,
+      } as DropdownOption;
+    });
+  });
+
+  function getObservationName(type: string): string {
+    return t(factories.find((f) => type === f.componentId)?.title as string);
+  }
+
+  const studyGroupOptions: Ref<DropdownOption[]> = ref([]);
+
+  studyGroupOptions.value.push(
+    ...studyGroupStore.studyGroups.map(
+      (studyGroup) =>
+        ({
+          label: studyGroup.title,
+          value: studyGroup.studyGroupId?.toString(),
+        }) as DropdownOption,
+    ),
+  );
+
+  let participantsList: Participant[] = [];
+  const participantOptions: Ref<DropdownOption[]> = ref([]);
+
+  function clearAllFilters(): void {
+    filterParticipant.value = [];
+    filterObservation.value = [];
+    filterStudyGroup.value = [];
+    filterDateRange.value = undefined;
+  }
+
+  const isAnyFilterActive: ComputedRef<boolean> = computed((): boolean => {
+    return (
+      filterParticipant.value.length > 0 ||
+      filterObservation.value.length > 0 ||
+      filterStudyGroup.value.length > 0 ||
+      filterDateRange.value !== undefined
+    );
+  });
+
+  async function getObservationList(): Promise<void> {
+    await observationsApi
+      .listObservations(studyStore.studyId)
+      .then((response: AxiosResponse) => {
+        observationList.value = response.data;
+      })
+      .catch((e: AxiosError) =>
+        handleIndividualError(e, 'cannot list observations'),
+      );
+  }
+
+  async function fetchParticipants(): Promise<void> {
+    participantsList = await participantsApi
+      .listParticipants(studyStore.studyId)
+      .then((response) => {
+        participantOptions.value.push(
+          ...response.data.map(
+            (p) =>
+              ({
+                label: p.alias,
+                value: p.participantId?.toString(),
+              }) as DropdownOption,
+          ),
+        );
+
+        return response.data;
+      })
+      .catch((e: AxiosError) => {
+        handleIndividualError(e, 'cannot list participants');
+        return participantsList;
+      });
+  }
+
+  function loadData(): void {
+    fetchParticipants();
+    getObservationList();
+  }
+
+  function downloadStudyData(): void {
+    studyStore.exportStudyData({
+      studyId: studyStore.studyId,
+      ...getDownloadFilters(),
+    });
+  }
+
+  function getDownloadFilters(): DownloadDataFilter {
+    return {
+      studyGroupId: filterStudyGroup.value ?? undefined,
+      participantId: filterParticipant.value ?? undefined,
+      observationId: filterObservation.value ?? undefined,
+      from: filterDateRange.value ? filterDateRange.value[0] : undefined,
+      to: filterDateRange.value ? filterDateRange.value[1] : undefined,
+    };
+  }
+
+  const disableStudyGroupFilter: ComputedRef<boolean> = computed(() => {
+    return filterParticipant.value.length > 0;
+  });
+
+  const disableParticipantFilter: ComputedRef<boolean> = computed(() => {
+    return filterStudyGroup.value.length > 0;
+  });
+
+  async function getFactories(): Promise<ComponentFactory[]> {
+    return componentsApi
+      .listComponents('observation')
+      .then((response: any) => response.data);
+  }
+
+  componentsApi
+    .listComponents('observation')
+    .then((response: any) => response.data)
+    .then((rs) => (factories = rs))
+    .then(loadData);
+</script>
+
+<template>
+  <div>
+    <div class="title mb-8">
+      <h3 class="mb-1 font-bold">
+        {{ $t('monitoring.dataDownload.title') }}
+      </h3>
+      <div>
+        {{ $t('monitoring.dataDownload.description') }}
+      </div>
+    </div>
+    <div class="flex justify-between">
+      <h3 class="mb-1 font-bold">{{ $t('global.labels.filter') }}</h3>
+      <Button
+        icon="pi pi-filter-slash"
+        :disabled="!isAnyFilterActive"
+        @click="clearAllFilters"
+      />
+    </div>
+    <div class="mb-3 flex items-center justify-between gap-5">
+      <div class="flex gap-5">
+        <div>
+          {{ $t('monitoring.labels.dateRange') }}:
+          <Calendar
+            v-model="filterDateRange"
+            :min-date="new Date(studyStore.study.plannedStart as string)"
+            autocomplete="off"
+            selection-mode="range"
+            :manual-input="false"
+            :date-format="dateFormat"
+            :placeholder="`${dateFormat} - ${dateFormat}`"
+          />
+        </div>
+        <div>
+          {{ $t('studyGroup.plural') }}:
+          <MultiSelect
+            v-model="filterStudyGroup"
+            :options="studyGroupOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('studyGroup.placeholder.chooseGroup')"
+            class="ml-1"
+            :disabled="disableStudyGroupFilter"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="1"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          />
+        </div>
+        <div>
+          {{ $t('participants.plural') }}:
+          <MultiSelect
+            v-model="filterParticipant"
+            :options="participantOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('participants.placeholder.chooseParticipant')"
+            class="ml-1"
+            filter
+            :disabled="disableParticipantFilter"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="1"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          />
+        </div>
+        <div>
+          {{ $t('observation.plural') }}:
+          <MultiSelect
+            v-model="filterObservation"
+            :options="observationOptions"
+            option-label="label"
+            option-value="value"
+            :placeholder="$t('timeline.labels.chooseType')"
+            class="ml-1"
+            :empty-message="$t('global.labels.noRecords')"
+            :max-selected-labels="0"
+            :selected-items-label="`{0} ${$t(
+              'global.placeholder.optionsSelected',
+            )}`"
+          ></MultiSelect>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-end">
+      <Button
+        icon="pi pi-download"
+        class="mt-8"
+        :label="$t('study.studyList.labels.exportStudyData')"
+        @click="downloadStudyData()"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss"></style>
diff --git a/src/components/subComponents/DatapointList.vue b/src/components/subComponents/DatapointList.vue
index 4b406fa6..a3e9f3e7 100644
--- a/src/components/subComponents/DatapointList.vue
+++ b/src/components/subComponents/DatapointList.vue
@@ -38,7 +38,7 @@ Licensed under the Elastic License 2.0. */
   const participants: Ref<Option[]> = ref([]);
 
   const dataPoints: Ref<DataPoint[]> = ref([]);
-  const size: Ref<number> = ref(10);
+  const size: Ref<number> = ref(3);
   const emptyOption: Option = {
     name: t('global.placeholder.all'),
     value: undefined,
@@ -47,11 +47,12 @@ Licensed under the Elastic License 2.0. */
   const observation: Ref<Option> = ref(emptyOption);
 
   let timer: NodeJS.Timeout;
+  const refreshTimeInSeconds = 10;
 
   function loadData(): void {
     timer ??= ((): NodeJS.Timeout => {
       listDataPoints();
-      return setInterval(listDataPoints, 10000);
+      return setInterval(listDataPoints, refreshTimeInSeconds * 1000);
     })();
   }
 
@@ -117,17 +118,23 @@ Licensed under the Elastic License 2.0. */
 </script>
 
 <template>
-  <div class="title w-full">
-    <h3 class="mb-1 font-bold">
-      {{ $t('data.dataPointsList.lastDatapoints') }}
-    </h3>
+  <div>
+    <div class="title mb-8">
+      <h3 class="mb-1 font-bold">
+        {{ $t('monitoring.dataPointsList.lastDatapoints') }}
+      </h3>
+      <div>
+        {{ $t('monitoring.description', { duration: refreshTimeInSeconds }) }}
+      </div>
+    </div>
+
     <div class="datapoint-selection mb-3 flex gap-5">
       <div>
-        {{ $t('data.dataPointsList.resultSize') }}:
+        {{ $t('monitoring.dataPointsList.resultSize') }}:
         <Dropdown
           v-model="size"
           :options="[1, 3, 10, 100]"
-          :placeholder="$t('data.placeholder.chooseSize')"
+          :placeholder="$t('monitoring.placeholder.chooseSize')"
           class="small ml-1"
           @change="listDataPoints()"
         />
diff --git a/src/i18n/de.json b/src/i18n/de.json
index be3b9970..2100535f 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -36,7 +36,8 @@
       "message": "Nachricht",
       "option": "Option {value}",
       "data": "Daten",
-      "scheduleType": "Zeitplan-Typ"
+      "scheduleType": "Zeitplan-Typ",
+      "filter": "Filter"
     },
     "placeholder": {
       "entireStudy": "Gesamte Studie",
@@ -65,21 +66,23 @@
     },
     "tabs": {
       "overview": "Studie",
-      "data": "Monitoring",
       "participants": "Teilnehmer:innen",
       "observations": "Datenerhebungen",
-      "interventions": "Interventionen",
       "integration": "Integrationen",
-      "timeline": "Kalender"
+      "interventions": "Interventionen",
+      "timeline": "Kalender",
+      "monitoring": "Monitoring",
+      "data": "Daten"
     },
     "tabLink": {
       "overview": "Overview",
-      "data": "Monitoring",
       "participants": "Participants",
       "observations": "Observations",
-      "interventions": "Interventions",
       "integration": "Integrations",
-      "timeline": "Timeline"
+      "interventions": "Interventions",
+      "timeline": "Timeline",
+      "monitoring": "Monitoring",
+      "data": "Data"
     }
   },
 
@@ -337,17 +340,21 @@
     }
   },
 
-  "data": {
+  "monitoring": {
     "title": "Monitoring",
-    "description": "Hier sehen Sie Live-Daten aus Ihrer Studie. Die Daten werden alle 10 Sekunden aktualisiert.",
+    "description": "Hier sehen Sie Live-Daten aus Ihrer Studie. Die Daten werden alle {duration} Sekunden aktualisiert.",
     "dataList": {
       "emptyListMsg": "Zur Zeit gibt es keine Datenaufzeichnungen, die beobachtet werden können.",
-      "title": "Erhaltene Datenpunkte pro Datenerhebung"
+      "title": "Erhobene Daten"
     },
     "dataPointsList": {
       "lastDatapoints": "Letzte Datenpunkte",
       "resultSize": "Anzahl der Datenpunkte"
     },
+    "dataDownload": {
+      "title": "Studiendaten herunterladen",
+      "description": "Hier können die Studiendaten basierend auf diverse Filter heruntergeladen werden."
+    },
     "placeholder": {
       "chooseSize": "Größe auswählen"
     },
@@ -384,6 +391,8 @@
     }
   },
 
+  "data": {},
+
   "participants": {
     "singular": "Teilnehmer",
     "plural": "Teilnehmer",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 53e97057..0c0822ea 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -36,7 +36,8 @@
       "message": "Message",
       "option": "Option {value}",
       "data": "Data",
-      "scheduleType": "Schedule Type"
+      "scheduleType": "Schedule Type",
+      "filter": "Filter"
     },
     "placeholder": {
       "entireStudy": "Entire study",
@@ -65,21 +66,23 @@
     },
     "tabs": {
       "overview": "Study",
-      "data": "Monitoring",
       "participants": "Participants",
       "observations": "Observations",
-      "interventions": "Interventions",
       "integration": "Integrations",
-      "timeline": "Timeline"
+      "interventions": "Interventions",
+      "timeline": "Timeline",
+      "monitoring": "Monitoring",
+      "data": "Data"
     },
     "tabLink": {
       "overview": "Overview",
-      "data": "Monitoring",
       "participants": "Participants",
       "observations": "Observations",
       "interventions": "Interventions",
       "integration": "Integrations",
-      "timeline": "Timeline"
+      "timeline": "Timeline",
+      "monitoring": "Monitoring",
+      "data": "Data"
     }
   },
 
@@ -337,17 +340,21 @@
     }
   },
 
-  "data": {
+  "monitoring": {
     "title": "Monitoring",
-    "description": "You can view the live data of your study here. Data will be updated every 10 seconds.",
+    "description": "You can view the live data of your study here. Data will be updated every {duration} seconds.",
     "dataList": {
       "emptyListMsg": "Currently there are no observations to track.",
-      "title": "Received data points per observation"
+      "title": "Recorded observations"
     },
     "dataPointsList": {
       "lastDatapoints": "Last data points",
       "resultSize": "Size of result"
     },
+    "dataDownload": {
+      "title": "Download study data",
+      "description": "Here you can download the study data based on various filters."
+    },
     "placeholder": {
       "chooseSize": "Choose a size"
     },
@@ -384,6 +391,8 @@
     }
   },
 
+  "data": {},
+
   "participants": {
     "singular": "Participant",
     "plural": "Participants",
diff --git a/src/models/DataDownloadModel.ts b/src/models/DataDownloadModel.ts
new file mode 100644
index 00000000..f8f87437
--- /dev/null
+++ b/src/models/DataDownloadModel.ts
@@ -0,0 +1,20 @@
+/*
+ Copyright LBI-DHP and/or licensed to LBI-DHP under one or more
+ contributor license agreements (LBI-DHP: Ludwig Boltzmann Institute
+ for Digital Health and Prevention -- A research institute of the
+ Ludwig Boltzmann Gesellschaft, Oesterreichische Vereinigung zur
+ Foerderung der wissenschaftlichen Forschung).
+ Licensed under the Elastic License 2.0.
+ */
+
+export interface DownloadData extends DownloadDataFilter {
+  studyId: number;
+}
+
+export interface DownloadDataFilter {
+  studyGroupId?: number[];
+  participantId?: number[];
+  observationId?: number[];
+  from?: string;
+  to?: string;
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index c4027aac..dead194c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,12 +14,13 @@ import NotFound from '../views/NotFound.vue';
 import Interventions from '../views/Interventions.vue';
 import Participants from '../views/Participants.vue';
 import Observations from '../views/Observations.vue';
-import Data from '../views/Data.vue';
+import Monitoring from '../views/Monitoring.vue';
 import StudyOverview from '../views/StudyOverview.vue';
 import { useStudyStore } from '../stores/studyStore';
 import { useStudyGroupStore } from '../stores/studyGroupStore';
 import Integrations from '../views/Integrations.vue';
 import Timeline from '../views/Timeline.vue';
+import Data from '../views/Data.vue';
 
 const studyResolver = async (to: any, from: any, next: any): Promise<void> => {
   const studyStore = useStudyStore();
@@ -61,29 +62,35 @@ const routes = [
         name: 'Observations',
         component: Observations,
       },
+      {
+        path: 'integrations',
+        meta: { title: 'Integrations' },
+        name: 'Integrations',
+        component: Integrations,
+      },
       {
         path: 'interventions',
         meta: { title: 'Interventions' },
         name: 'Interventions',
         component: Interventions,
       },
+      {
+        path: 'timeline',
+        meta: { title: 'Timeline' },
+        name: 'Timeline',
+        component: Timeline,
+      },
       {
         path: 'monitoring',
         meta: { title: 'Monitoring' },
         name: 'Monitoring',
-        component: Data,
+        component: Monitoring,
       },
       {
-        path: 'integrations',
-        meta: { title: 'Integrations' },
-        name: 'Integrations',
-        component: Integrations,
-      },
-      {
-        path: 'timeline',
-        meta: { title: 'Timeline' },
-        name: 'Timeline',
-        component: Timeline,
+        path: 'data',
+        meta: { title: 'Data' },
+        name: 'Data',
+        component: Data,
       },
     ],
   },
diff --git a/src/stores/studyStore.ts b/src/stores/studyStore.ts
index ee9d2de9..61ded260 100644
--- a/src/stores/studyStore.ts
+++ b/src/stores/studyStore.ts
@@ -13,6 +13,7 @@ import { useImportExportApi, useStudiesApi } from '../composable/useApi';
 import { AxiosError, AxiosResponse } from 'axios';
 import { useErrorHandling } from '../composable/useErrorHandling';
 import { useStudyGroupStore } from './studyGroupStore';
+import { DownloadData } from '../models/DataDownloadModel';
 
 export const useStudyStore = defineStore('study', () => {
   const { studiesApi } = useStudiesApi();
@@ -149,13 +150,25 @@ export const useStudyStore = defineStore('study', () => {
       });
   }
 
-  async function exportStudyData(studyId: number): Promise<void> {
+  async function exportStudyData({
+    studyId,
+    studyGroupId,
+    participantId,
+    observationId,
+    from,
+    to,
+  }: DownloadData): Promise<void> {
     await importExportApi
-      .generateDownloadToken(studyId)
-      .then((token) => {
-        window.open(
-          `api/v1/studies/${studyId}/export/studydata/${token.data.token}`,
-        );
+      .generateDownloadToken(
+        studyId,
+        studyGroupId,
+        participantId,
+        observationId,
+        from,
+        to,
+      )
+      .then((rs) => {
+        window.open(rs.headers.location);
       })
       .catch((e: AxiosError) => {
         handleIndividualError(
diff --git a/src/views/Data.vue b/src/views/Data.vue
index e09972e9..f3230af0 100644
--- a/src/views/Data.vue
+++ b/src/views/Data.vue
@@ -4,14 +4,14 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
-  import MoreTabNav from '../components/shared/MoreTabNav.vue';
   import StudyHeader from '../components/shared/StudyHeader.vue';
-  import { StudyRole } from '../generated-sources/openapi';
+  import MoreTabNav from '../components/shared/MoreTabNav.vue';
   import { useStudyStore } from '../stores/studyStore';
-  import ParticipationDataList from '../components/ParticipationDataList.vue';
+  import { StudyRole } from '../generated-sources/openapi';
+  import DataDownload from '../components/subComponents/DataDownload.vue';
 
   const studyStore = useStudyStore();
-  const accessRoles: StudyRole[] = [StudyRole.Viewer, StudyRole.Admin];
+  const accessRoles: StudyRole[] = [StudyRole.Admin, StudyRole.Viewer];
 </script>
 
 <template>
@@ -29,7 +29,11 @@ Licensed under the Elastic License 2.0. */
       "
       class="container rounded-lg bg-white p-10"
     >
-      <ParticipationDataList :study-id="studyStore.studyId" />
+      <Suspense>
+        <DataDownload />
+      </Suspense>
     </div>
   </div>
 </template>
+
+<style scoped lang="postcss"></style>
diff --git a/src/views/Monitoring.vue b/src/views/Monitoring.vue
new file mode 100644
index 00000000..6caeb8ee
--- /dev/null
+++ b/src/views/Monitoring.vue
@@ -0,0 +1,35 @@
+/* Copyright LBI-DHP and/or licensed to LBI-DHP under one or more contributor
+license agreements (LBI-DHP: Ludwig Boltzmann Institute for Digital Health and
+Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
+Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
+Licensed under the Elastic License 2.0. */
+<script setup lang="ts">
+  import MoreTabNav from '../components/shared/MoreTabNav.vue';
+  import StudyHeader from '../components/shared/StudyHeader.vue';
+  import { StudyRole } from '../generated-sources/openapi';
+  import { useStudyStore } from '../stores/studyStore';
+  import ParticipationDataList from '../components/ParticipationDataList.vue';
+
+  const studyStore = useStudyStore();
+  const accessRoles: StudyRole[] = [StudyRole.Admin, StudyRole.Viewer];
+</script>
+
+<template>
+  <div class="monitoring-view container m-auto mt-10">
+    <StudyHeader :study="studyStore.study" />
+    <MoreTabNav
+      :study-id="studyStore.studyId"
+      :study-roles="studyStore.studyUserRoles"
+    />
+    <div
+      v-if="
+        studyStore.studyUserRoles.some((r: StudyRole) =>
+          accessRoles.includes(r),
+        )
+      "
+      class="container rounded-lg bg-white p-10"
+    >
+      <ParticipationDataList :study-id="studyStore.studyId" />
+    </div>
+  </div>
+</template>

From e502954c23c78865f855e3f9c7bbdd7b63cd1e52 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 17 Jul 2024 14:21:05 +0200
Subject: [PATCH 07/14] #378: Add time (23:59) to "to" date, to include the
 last date.

---
 src/components/subComponents/DataDownload.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/subComponents/DataDownload.vue b/src/components/subComponents/DataDownload.vue
index 8a5ac2a7..3d3ec558 100644
--- a/src/components/subComponents/DataDownload.vue
+++ b/src/components/subComponents/DataDownload.vue
@@ -128,13 +128,22 @@
   }
 
   function getDownloadFilters(): DownloadDataFilter {
-    return {
+    const filterValues = {
       studyGroupId: filterStudyGroup.value ?? undefined,
       participantId: filterParticipant.value ?? undefined,
       observationId: filterObservation.value ?? undefined,
-      from: filterDateRange.value ? filterDateRange.value[0] : undefined,
-      to: filterDateRange.value ? filterDateRange.value[1] : undefined,
+      from: undefined,
+      to: undefined,
     };
+
+    if (filterDateRange.value && filterDateRange.value.length > 1) {
+      filterValues.from = filterDateRange.value[0];
+      const toDate = filterDateRange.value[1];
+      toDate.setHours(23, 59);
+      filterValues.to = toDate;
+    }
+
+    return filterValues;
   }
 
   const disableStudyGroupFilter: ComputedRef<boolean> = computed(() => {

From bc95ea2002d60c21254d1fdec5ebed3ffe4ae342 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 17 Jul 2024 14:25:25 +0200
Subject: [PATCH 08/14] #378: Remove translations for tab links, because we do
 not need a locale translation for the route definition.

---
 src/components/StudyList.vue         |  2 +-
 src/components/shared/MoreTabNav.vue | 16 ++++++++--------
 src/i18n/de.json                     | 10 ----------
 src/i18n/en.json                     | 10 ----------
 4 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/components/StudyList.vue b/src/components/StudyList.vue
index 9a6f72fd..a774f750 100644
--- a/src/components/StudyList.vue
+++ b/src/components/StudyList.vue
@@ -196,7 +196,7 @@ Licensed under the Elastic License 2.0. */
 
   function goToStudy(id: string): void {
     router.push({
-      name: t('studyNavigation.tabLink.overview'),
+      name: 'Overview',
       params: { studyId: id },
     });
   }
diff --git a/src/components/shared/MoreTabNav.vue b/src/components/shared/MoreTabNav.vue
index b814cd11..812feff3 100644
--- a/src/components/shared/MoreTabNav.vue
+++ b/src/components/shared/MoreTabNav.vue
@@ -41,49 +41,49 @@ Licensed under the Elastic License 2.0. */
   const tabs: Tab[] = [
     {
       title: t('studyNavigation.tabs.overview'),
-      name: t('studyNavigation.tabLink.overview'),
+      name: 'Overview',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator, StudyRole.Viewer],
     },
     {
       title: t('studyNavigation.tabs.participants'),
-      name: t('studyNavigation.tabLink.participants'),
+      name: 'Participants',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
       title: t('studyNavigation.tabs.observations'),
-      name: t('studyNavigation.tabLink.observations'),
+      name: 'Observations',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
       title: t('studyNavigation.tabs.integration'),
-      name: t('studyNavigation.tabLink.integration'),
+      name: 'Integrations',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
       title: t('studyNavigation.tabs.interventions'),
-      name: t('studyNavigation.tabLink.interventions'),
+      name: 'Interventions',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
       title: t('studyNavigation.tabs.timeline'),
-      name: t('studyNavigation.tabLink.timeline'),
+      name: 'Timeline',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
       title: t('studyNavigation.tabs.monitoring'),
-      name: t('studyNavigation.tabLink.monitoring'),
+      name: 'Monitoring',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Viewer],
     },
     {
       title: t('studyNavigation.tabs.data'),
-      name: t('studyNavigation.tabLink.data'),
+      name: 'Data',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Viewer],
     },
diff --git a/src/i18n/de.json b/src/i18n/de.json
index 2100535f..df4d879a 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -73,16 +73,6 @@
       "timeline": "Kalender",
       "monitoring": "Monitoring",
       "data": "Daten"
-    },
-    "tabLink": {
-      "overview": "Overview",
-      "participants": "Participants",
-      "observations": "Observations",
-      "integration": "Integrations",
-      "interventions": "Interventions",
-      "timeline": "Timeline",
-      "monitoring": "Monitoring",
-      "data": "Data"
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0c0822ea..c6863e3a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -73,16 +73,6 @@
       "timeline": "Timeline",
       "monitoring": "Monitoring",
       "data": "Data"
-    },
-    "tabLink": {
-      "overview": "Overview",
-      "participants": "Participants",
-      "observations": "Observations",
-      "interventions": "Interventions",
-      "integration": "Integrations",
-      "timeline": "Timeline",
-      "monitoring": "Monitoring",
-      "data": "Data"
     }
   },
 

From f56bc4ef12330c478da08d955c1ecf89a731370a Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 17 Jul 2024 14:43:08 +0200
Subject: [PATCH 09/14] #317: Change date to date-time

* Add Seconds (59) to "to" date as well
---
 openapi/StudyManagerAPI.yaml                  | 24 ++++---------------
 src/components/subComponents/DataDownload.vue |  2 +-
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/openapi/StudyManagerAPI.yaml b/openapi/StudyManagerAPI.yaml
index 7149f1f4..71066ec7 100644
--- a/openapi/StudyManagerAPI.yaml
+++ b/openapi/StudyManagerAPI.yaml
@@ -1130,16 +1130,8 @@ paths:
             type: array
             items:
               type: integer
-        - name: from
-          in: query
-          schema:
-            type: string
-            format: date
-        - name: to
-          in: query
-          schema:
-            type: string
-            format: date
+        - $ref: '#/components/parameters/From'
+        - $ref: '#/components/parameters/To'
       responses:
         '200':
           description: Operation successful
@@ -1185,16 +1177,8 @@ paths:
             type: array
             items:
               type: integer
-        - name: from
-          in: query
-          schema:
-            type: string
-            format: date
-        - name: to
-          in: query
-          schema:
-            type: string
-            format: date
+        - $ref: '#/components/parameters/From'
+        - $ref: '#/components/parameters/To'
       responses:
         '200':
           description: Operation successful
diff --git a/src/components/subComponents/DataDownload.vue b/src/components/subComponents/DataDownload.vue
index 3d3ec558..dfe1c6cc 100644
--- a/src/components/subComponents/DataDownload.vue
+++ b/src/components/subComponents/DataDownload.vue
@@ -139,7 +139,7 @@
     if (filterDateRange.value && filterDateRange.value.length > 1) {
       filterValues.from = filterDateRange.value[0];
       const toDate = filterDateRange.value[1];
-      toDate.setHours(23, 59);
+      toDate.setHours(23, 59, 59);
       filterValues.to = toDate;
     }
 

From a78c88d2287cc86fde5e15d90757a06c5f6c0705 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Mon, 22 Jul 2024 08:30:02 +0200
Subject: [PATCH 10/14] #434: Show specific error message in FE via Toast pop
 up.

* If you want to start a study with e.g. an empty lime survey id, a Toast pop up will be shown, that the ID is missing.
* Add global Toast component to show erroneous API response.
* Add html required attribute if property is required (not only a * symbol next to the label).
* Add trim to v-model for String properties, to trim whitespaced on users input.
* Add error translations.
* Replace alter messages with Toast pop ups.
---
 src/App.vue                                   |   6 +
 src/components/TimelineList.vue               |   1 -
 src/components/dialog/ObservationDialog.vue   |  21 ++--
 .../dialog/shared/BooleanPropertyInput.vue    |   7 +-
 .../dialog/shared/IntegerPropertyInput.vue    |   7 +-
 .../shared/ObservationPropertyInput.vue       |   7 +-
 .../dialog/shared/StringListPropertyInput.vue |   8 +-
 .../dialog/shared/StringPropertyInput.vue     |   9 +-
 .../dialog/shared/StringTextPropertyInput.vue |   7 +-
 src/composable/toastService.ts                | 114 ++++++++++++++++++
 src/i18n/de.json                              |  10 ++
 src/i18n/en.json                              |  10 ++
 src/main.ts                                   |   2 +
 src/stores/studyStore.ts                      |   9 +-
 src/styles/more-light/theme.pcss              |   1 -
 src/views/StudyOverview.vue                   |  16 ++-
 16 files changed, 192 insertions(+), 43 deletions(-)
 create mode 100644 src/composable/toastService.ts

diff --git a/src/App.vue b/src/App.vue
index a9257b7d..67deaa38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,15 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
+  import { ref, provide } from 'vue';
+  import Toast from 'primevue/toast';
   import Footer from './components/shared/Footer.vue';
   import Header from './components/shared/Header.vue';
   import { useRouter } from 'vue-router';
+
   const router = useRouter();
+  const toast = ref<Toast | null>(null);
+  provide('toast', toast);
 
   router.beforeEach((to) => {
     document.title = to.meta?.title ? to.meta.title + ' (More)' : 'More';
@@ -18,6 +23,7 @@ Licensed under the Elastic License 2.0. */
   <Header />
   <main class="mb-20 pt-14">
     <router-view />
+    <Toast ref="toast" />
   </main>
   <Footer />
 </template>
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 0bbe0720..2bfab14a 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -430,7 +430,6 @@ Licensed under the Elastic License 2.0. */
         setupObservationAndInterventionFilterOptions(response.data);
       })
       .catch((e: AxiosError) => {
-        console.log(e);
         handleIndividualError(e, 'cannot list studyTimeline');
       });
   }
diff --git a/src/components/dialog/ObservationDialog.vue b/src/components/dialog/ObservationDialog.vue
index 2a34032f..86d432d4 100644
--- a/src/components/dialog/ObservationDialog.vue
+++ b/src/components/dialog/ObservationDialog.vue
@@ -29,9 +29,14 @@ Licensed under the Elastic License 2.0. */
   import AbsoluteScheduler from '../shared/Scheduler.vue';
   import { isObjectEmpty } from '../../utils/commonUtils';
   import { ScheduleType } from '../../models/Scheduler';
+  import { AxiosError } from 'axios';
+  import { useErrorHandling } from '../../composable/useErrorHandling';
+  import { useToastService } from '../../composable/toastService';
 
+  const { handleToastErrors, showErrorToast } = useToastService();
   const dialog = useDialog();
   const { componentsApi } = useComponentsApi();
+  const { handleIndividualError } = useErrorHandling();
   const studyStore = useStudyStore();
   const { t } = useI18n();
 
@@ -65,8 +70,6 @@ Licensed under the Elastic License 2.0. */
 
   const studyGroupId = ref(observation.studyGroupId);
 
-  const jsonError = ref();
-
   function getLabelForChoiceValue(
     value: any,
     values: MoreTableChoice[],
@@ -124,17 +127,14 @@ Licensed under the Elastic License 2.0. */
           if (report.valid) {
             save(parsedProps);
           } else {
-            jsonError.value = (report.errors || [])
-              .concat(report.warnings || [])
-              .map((e) => e.message)
-              .join(', ');
+            handleToastErrors(report);
           }
+        })
+        .catch((e: AxiosError) => {
+          handleIndividualError(e, 'cannot fetch study');
         });
     } catch (e: any) {
-      jsonError.value = t('observation.error.noValidField', {
-        key: e.key,
-        message: e.message,
-      });
+      showErrorToast(t('global.error.general'));
     }
   }
 
@@ -276,7 +276,6 @@ Licensed under the Elastic License 2.0. */
       </div>
       <div v-if="properties.length" class="col-start-0 col-span-8">
         <h5 class="mb-2">{{ $t('global.labels.config') }}</h5>
-        <div v-if="jsonError" class="error mb-3">{{ jsonError }}</div>
         <div class="col-start-0 col-span-8">
           <div v-if="properties">
             <PropertyInputs
diff --git a/src/components/dialog/shared/BooleanPropertyInput.vue b/src/components/dialog/shared/BooleanPropertyInput.vue
index d5752777..33c9d869 100644
--- a/src/components/dialog/shared/BooleanPropertyInput.vue
+++ b/src/components/dialog/shared/BooleanPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h5 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h5>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
         v-model="booleanChecked"
         :label="property.name"
         class="mr-2"
+        :required="property.required"
         :binary="true"
         @change="emit('onBooleanChange', booleanChecked)"
       />
diff --git a/src/components/dialog/shared/IntegerPropertyInput.vue b/src/components/dialog/shared/IntegerPropertyInput.vue
index 4b310e1a..bdda265a 100644
--- a/src/components/dialog/shared/IntegerPropertyInput.vue
+++ b/src/components/dialog/shared/IntegerPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="gap-1">
     <h5 class="font-bold">
-      <label :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h5>
 
     <div v-if="props.property.description" :id="`${property.id}-help`">
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
       :id="property.id"
       v-model="property.value"
       type="number"
+      :required="property.required"
       :max="property.max"
       :min="property.min"
       :disabled="!editable"
diff --git a/src/components/dialog/shared/ObservationPropertyInput.vue b/src/components/dialog/shared/ObservationPropertyInput.vue
index 44719394..fc1c701d 100644
--- a/src/components/dialog/shared/ObservationPropertyInput.vue
+++ b/src/components/dialog/shared/ObservationPropertyInput.vue
@@ -69,9 +69,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <Dropdown
       :id="property.id"
@@ -79,6 +79,7 @@ Licensed under the Elastic License 2.0. */
       :options="observationList"
       option-label="title"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="$t(props.property.description)"
diff --git a/src/components/dialog/shared/StringListPropertyInput.vue b/src/components/dialog/shared/StringListPropertyInput.vue
index 32dc68e4..721d1a92 100644
--- a/src/components/dialog/shared/StringListPropertyInput.vue
+++ b/src/components/dialog/shared/StringListPropertyInput.vue
@@ -40,10 +40,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label
-        >{{ $t(property.name) }}<span v-if="property.required">*</span
-        ><span v-if="property.required">*</span></label
-      >
+      <label>
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div>{{ $t(props.property.description) }}</div>
     <div v-if="editable" class="flex w-full flex-col gap-1">
@@ -54,6 +53,7 @@ Licensed under the Elastic License 2.0. */
         :class="!editable && property.value?.[index - 1] ? 'w-fit' : 'hidden'"
         :value="property.value?.[index - 1]"
         type="text"
+        :required="property.required"
         :disabled="!editable"
         :placeholder="t('global.labels.option', { value: index })"
         style="display: block"
diff --git a/src/components/dialog/shared/StringPropertyInput.vue b/src/components/dialog/shared/StringPropertyInput.vue
index dc32adba..5c53770e 100644
--- a/src/components/dialog/shared/StringPropertyInput.vue
+++ b/src/components/dialog/shared/StringPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -41,9 +41,10 @@ Licensed under the Elastic License 2.0. */
 
     <InputText
       :id="property.id"
-      v-model="property.value"
+      v-model.trim="property.value"
       type="text"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="
diff --git a/src/components/dialog/shared/StringTextPropertyInput.vue b/src/components/dialog/shared/StringTextPropertyInput.vue
index 71eaf2cc..7fafc12a 100644
--- a/src/components/dialog/shared/StringTextPropertyInput.vue
+++ b/src/components/dialog/shared/StringTextPropertyInput.vue
@@ -31,9 +31,9 @@ Licensed under the Elastic License 2.0. */
 <template>
   <div class="flex flex-col gap-1">
     <h6 class="font-bold">
-      <label v-if="property.name" :for="property.id"
-        >{{ $t(property.name) }}<span v-if="property.required">*</span></label
-      >
+      <label v-if="property.name" :for="property.id">
+        {{ $t(property.name) }}<span v-if="property.required">*</span>
+      </label>
     </h6>
     <div v-if="props.property.description" :id="`${property.id}-help`">
       {{ $t(props.property.description) }}
@@ -44,6 +44,7 @@ Licensed under the Elastic License 2.0. */
       v-model="property.value"
       type="text"
       class="w-full"
+      :required="property.required"
       :aria-describedby="`${property.id}-help`"
       :disabled="!editable"
       :placeholder="
diff --git a/src/composable/toastService.ts b/src/composable/toastService.ts
new file mode 100644
index 00000000..00be4507
--- /dev/null
+++ b/src/composable/toastService.ts
@@ -0,0 +1,114 @@
+/*
+ Copyright LBI-DHP and/or licensed to LBI-DHP under one or more
+ contributor license agreements (LBI-DHP: Ludwig Boltzmann Institute
+ for Digital Health and Prevention -- A research institute of the
+ Ludwig Boltzmann Gesellschaft, Oesterreichische Vereinigung zur
+ Foerderung der wissenschaftlichen Forschung).
+ Licensed under the Elastic License 2.0.
+ */
+import { inject, Ref } from 'vue';
+import { ToastServiceMethods } from 'primevue/toastservice';
+import { ToastMessageOptions } from 'primevue/toast';
+import { useI18n } from 'vue-i18n';
+import {
+  ValidationReport,
+  ValidationReportItem,
+} from '../generated-sources/openapi';
+
+/**
+ * This composable is responsible for showing errors from Backend to the Client with a Toast popup.
+ */
+export function useToastService(): any {
+  const toast: Ref<ToastServiceMethods> | undefined =
+    inject<Ref<ToastServiceMethods>>('toast');
+  const { t } = useI18n();
+
+  if (!toast) {
+    throw new Error('ToastService is not provided');
+  }
+
+  const handleToastErrors = (err: any): void => {
+    processConfigurationException(err);
+    processOtherExceptions(err);
+  };
+
+  function processConfigurationException(report: ValidationReport): void {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    report.errors?.forEach((error: ValidationReportItem) => {
+      const errorMessage = error.message
+        ? t(error.message, { value: error.propertyId })
+        : null;
+      if (errorMessage) {
+        errors.push(errorMessage);
+      }
+    });
+
+    report.warnings?.forEach((warning: ValidationReportItem) => {
+      const warningMessage = warning.message
+        ? t(warning.message, { value: warning.propertyId })
+        : null;
+      if (warningMessage) {
+        warnings.push(warningMessage);
+      }
+    });
+
+    if (errors.length) {
+      showErrorToast(errors.join('\n'));
+    }
+
+    if (warnings.length) {
+      showWarningToast(warnings.join('\n'));
+    }
+  }
+
+  function processOtherExceptions(error: any): void {
+    if (error.message) {
+      showErrorToast(error.message);
+    }
+  }
+
+  const showToast = (
+    severity: ToastMessageOptions['severity'],
+    summary: string,
+    detail: string,
+  ): void => {
+    if (toast.value) {
+      toast.value.add({ severity, summary, detail });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  const showErrorToast = (detail: string): void => {
+    if (toast.value) {
+      const severity: ToastMessageOptions['severity'] = 'error';
+      const summary = t('global.error.type.error');
+      const life: ToastMessageOptions['life'] = 5000;
+
+      toast.value.add({ severity, summary, detail, life });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  const showWarningToast = (detail: string): void => {
+    if (toast.value) {
+      const severity: ToastMessageOptions['severity'] = 'warn';
+      const summary = t('global.error.type.warning');
+      const life: ToastMessageOptions['life'] = 5000;
+
+      toast.value.add({ severity, summary, detail, life });
+    } else {
+      console.error('Toast reference is not set');
+    }
+  };
+
+  return {
+    handleToastErrors,
+    showToast,
+    showErrorToast,
+    showWarningToast,
+  };
+}
diff --git a/src/i18n/de.json b/src/i18n/de.json
index df4d879a..d6790e09 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -55,6 +55,16 @@
     },
     "footer": {
       "aboutMore": "Über More"
+    },
+    "error": {
+      "type": {
+        "error": "Fehler",
+        "warning": "Warnung",
+        "info": "Info"
+      },
+      "general": "Ein allgemeiner Fehler ist aufgetreten.",
+      "required": "Erforderlicher Wert '{value}' fehlt.",
+      "immutable": "Der Wert von '{value}' darf nicht geändert werden."
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c6863e3a..7347556e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -55,6 +55,16 @@
     },
     "footer": {
       "aboutMore": "About More"
+    },
+    "error": {
+      "type": {
+        "error": "Error",
+        "warning": "Warning",
+        "info": "Info"
+      },
+      "general": "A General error occurred.",
+      "required": "Required value '{value}' missing.",
+      "immutable": "The value '{value}' is immutable and cannot be changed."
     }
   },
 
diff --git a/src/main.ts b/src/main.ts
index 39586141..67c9a248 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,6 +15,7 @@ import PrimeVue from 'primevue/config';
 import Tooltip from 'primevue/tooltip';
 import ConfirmationService from 'primevue/confirmationservice';
 import DialogService from 'primevue/dialogservice';
+import ToastService from 'primevue/toastservice';
 // Router
 import { Router } from './router';
 import AuthService from './service/AuthService';
@@ -106,6 +107,7 @@ app.use(Router);
 app.use(PrimeVue);
 app.use(ConfirmationService);
 app.use(DialogService);
+app.use(ToastService);
 app.use(pinia);
 
 app.mount('#app');
diff --git a/src/stores/studyStore.ts b/src/stores/studyStore.ts
index 61ded260..5ee4b87f 100644
--- a/src/stores/studyStore.ts
+++ b/src/stores/studyStore.ts
@@ -14,13 +14,14 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { useErrorHandling } from '../composable/useErrorHandling';
 import { useStudyGroupStore } from './studyGroupStore';
 import { DownloadData } from '../models/DataDownloadModel';
+import { useToastService } from '../composable/toastService';
 
 export const useStudyStore = defineStore('study', () => {
   const { studiesApi } = useStudiesApi();
   const { importExportApi } = useImportExportApi();
   const { handleIndividualError } = useErrorHandling();
   const studyGroupStore = useStudyGroupStore();
-
+  const { handleToastErrors } = useToastService();
   // State
   const study: Ref<Study> = ref({});
   const studies: Ref<Study[]> = ref([]);
@@ -58,15 +59,11 @@ export const useStudyStore = defineStore('study', () => {
           study.value.status = status;
         })
         .catch((e: AxiosError) => {
-          alert(
-            `Could not update study status: ${
-              (e.response?.data as any)?.message
-            }`,
-          );
           handleIndividualError(
             e,
             `Could not update study status ${study.value.studyId}`,
           );
+          handleToastErrors(e.response?.data);
         });
     }
   }
diff --git a/src/styles/more-light/theme.pcss b/src/styles/more-light/theme.pcss
index 5214ee8e..3603dcf5 100644
--- a/src/styles/more-light/theme.pcss
+++ b/src/styles/more-light/theme.pcss
@@ -5356,7 +5356,6 @@
 }
 .p-toast .p-toast-message .p-toast-message-content {
   padding: var(--content-padding);
-  border-width: 0 0 0 6px;
 }
 .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
   margin: 0 0 0 var(--content-padding);
diff --git a/src/views/StudyOverview.vue b/src/views/StudyOverview.vue
index b9ed3209..60ae9a51 100644
--- a/src/views/StudyOverview.vue
+++ b/src/views/StudyOverview.vue
@@ -13,17 +13,25 @@ Licensed under the Elastic License 2.0. */
   import { useStudyStore } from '../stores/studyStore';
   import { useStudyGroupStore } from '../stores/studyGroupStore';
   import { StudyStatus } from '../generated-sources/openapi';
+  import { AxiosError } from 'axios';
+  import { useToastService } from '../composable/toastService';
 
+  const { handleToastErrors } = useToastService();
   const route = useRoute();
   const studyStore = useStudyStore();
   const studyGroupStore = useStudyGroupStore();
   const studyId = parseInt(route.params.studyId as string);
 
   async function processUpdatedStudyStatus(status: StudyStatus): Promise<void> {
-    await studyStore.updateStudyStatus(status).then(() => {
-      // To update the start/plannedStart/end Date in the UI immediately
-      studyStore.getStudy(studyId);
-    });
+    await studyStore
+      .updateStudyStatus(status)
+      .then(() => {
+        // To update the start/plannedStart/end Date in the UI immediately
+        studyStore.getStudy(studyId);
+      })
+      .catch((e: AxiosError) => {
+        handleToastErrors(e.response?.data);
+      });
   }
 
   studyStore.getStudy(studyId);

From c8297e19273219886fa691e90c6c3cbebe63e3a9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 29 Jul 2024 05:08:56 +0000
Subject: [PATCH 11/14] Bump the docker group across 1 directory with 2 updates

Bumps the docker group with 2 updates in the / directory: [docker/login-action](https://github.com/docker/login-action) and [docker/build-push-action](https://github.com/docker/build-push-action).


Updates `docker/login-action` from 3.1.0 to 3.3.0
- [Release notes](https://github.com/docker/login-action/releases)
- [Commits](https://github.com/docker/login-action/compare/e92390c5fb421da1463c202d546fed0ec5c39f20...9780b0c442fbb1117ed29e0efdff1e18412f7567)

Updates `docker/build-push-action` from 5.3.0 to 6.5.0
- [Release notes](https://github.com/docker/build-push-action/releases)
- [Commits](https://github.com/docker/build-push-action/compare/2cdde995de11925a030ce8070c3d77a52ffcf1c0...5176d81f87c23d6fc96624dfdbcd9f3830bbe445)

---
updated-dependencies:
- dependency-name: docker/login-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: docker
- dependency-name: docker/build-push-action
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: docker
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/test-build-push.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/test-build-push.yml b/.github/workflows/test-build-push.yml
index 1ad75b1c..9c6110d1 100644
--- a/.github/workflows/test-build-push.yml
+++ b/.github/workflows/test-build-push.yml
@@ -92,7 +92,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Log in to the Container registry
-        uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20
+        uses: docker/login-action@9780b0c442fbb1117ed29e0efdff1e18412f7567
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -113,7 +113,7 @@ jobs:
             # a manually provided tag
             type=raw,value=${{ github.event.inputs.dockerTag }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0
+        uses: docker/build-push-action@5176d81f87c23d6fc96624dfdbcd9f3830bbe445
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}

From 58ce99841f78bd9f8e679a0d1da12be936aed14b Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Mon, 5 Aug 2024 08:51:47 +0200
Subject: [PATCH 12/14] #377 Merge Monitoring & Data into one Tab

* Place data visualization into one tab and change the chart via dropdown.
* If we filter just one day, we need to change the time till end of the day.
* Remove observation name column in last data points table, because we already know at which observation we are looking (accordion).
* Disable filter elsewhere, because it is only possible for visualization.
* Add "Filter" title and description for "recorded observation" tab.
---
 src/components/ParticipationDataList.vue      | 212 +++++++++++++-----
 src/components/dialog/InterventionDialog.vue  |   1 -
 src/components/shared/MoreTabNav.vue          |  10 +-
 src/components/subComponents/DataDownload.vue |   4 +-
 src/i18n/de.json                              |  29 ++-
 src/i18n/en.json                              |  31 ++-
 src/models/ParticipationData.ts               |  10 +-
 src/router/index.ts                           |  17 +-
 src/views/Data.vue                            |  39 ----
 .../{Monitoring.vue => MonitoringData.vue}    |  20 +-
 10 files changed, 236 insertions(+), 137 deletions(-)
 delete mode 100644 src/views/Data.vue
 rename src/views/{Monitoring.vue => MonitoringData.vue} (59%)

diff --git a/src/components/ParticipationDataList.vue b/src/components/ParticipationDataList.vue
index 5912c52a..c4127095 100644
--- a/src/components/ParticipationDataList.vue
+++ b/src/components/ParticipationDataList.vue
@@ -21,7 +21,7 @@ Licensed under the Elastic License 2.0. */
   } from '../composable/useApi';
   import { useI18n } from 'vue-i18n';
   import { useErrorHandling } from '../composable/useErrorHandling';
-  import { computed, ComputedRef, reactive, ref, Ref, watch } from 'vue';
+  import { computed, ComputedRef, ref, Ref, watch } from 'vue';
   import {
     ChartProperties,
     ObservationDataViewInfo,
@@ -42,7 +42,6 @@ Licensed under the Elastic License 2.0. */
   import MoreTable from '../components/shared/MoreTable.vue';
   import { ComponentFactory, Participant } from '../generated-sources/openapi';
   import { onBeforeRouteLeave } from 'vue-router';
-  import DatapointList from './subComponents/DatapointList.vue';
   import { useStudyStore } from '../stores/studyStore';
   import { useGlobalStore } from '../stores/globalStore';
   import { DropdownOption } from '../models/Common';
@@ -144,20 +143,71 @@ Licensed under the Elastic License 2.0. */
     applyFilter();
   }
 
+  const isVisualizationTabActive: Ref<boolean> = ref(false);
+  /**
+   * Initial value is true, because :active-index="0" at the Accordion component,
+   * opens the first accordion by default.
+   */
+  const isAnyAccordionOpen: Ref<boolean> = ref(true);
+
+  const disableVisualizationFilter = computed(() => {
+    return !isVisualizationTabActive.value || !isAnyAccordionOpen.value;
+  });
+
+  function onAccordionIndexChange(index: number | undefined): void {
+    if (index !== undefined && isVisualizationTabActive.value) {
+      // Change from active accordion and visualization tab open to another accordion,
+      // where the first tab (table) is displayed by default
+      isAnyAccordionOpen.value = true;
+      isVisualizationTabActive.value = false;
+    } else {
+      isAnyAccordionOpen.value = index !== undefined;
+    }
+  }
+
   function onTabChange(observationId: number, tabIndex: number): void {
+    // Tabs: Table == 0, Visualization == 1
+    isVisualizationTabActive.value = tabIndex === 1;
+
     if (tabIndex === 0) {
       // "Table" Tab is active (no chart)
       return;
     }
-    // -1, because of the "Table" tab, the index is higher than the viewData array
-    const viewDataIdx = tabIndex - 1;
 
-    if (observationsViewData[observationId][viewDataIdx].chartData !== null) {
+    if (
+      observationsViewData.value[observationId].selectedView &&
+      observationsViewData.value[observationId].data[
+        observationsViewData.value[observationId].selectedView
+      ].chartData !== null
+    ) {
       // chart data already available - skip
       return;
     }
+    if (observationsViewData.value[observationId].selectedView) {
+      fetchObservationViewData(
+        +observationId,
+        observationsViewData.value[observationId].selectedView,
+        getViewDataFilters(),
+      );
+    }
+  }
 
-    fetchObservationViewData(+observationId, viewDataIdx, getViewDataFilters());
+  function onViewOptionChange(
+    e: DropdownChangeEvent,
+    observationId: number,
+  ): void {
+    if (e.value) {
+      if (
+        observationsViewData.value[observationId].selectedView &&
+        observationsViewData.value[observationId].data[
+          observationsViewData.value[observationId].selectedView
+        ].chartData !== null
+      ) {
+        // chart data already available - skip
+        return;
+      }
+      fetchObservationViewData(+observationId, e.value, getViewDataFilters());
+    }
   }
 
   function clearAllFilters(): void {
@@ -196,13 +246,15 @@ Licensed under the Elastic License 2.0. */
   }
 
   function applyFilter(): void {
-    for (const observationId in observationsViewData) {
-      for (const viewIdx in observationsViewData[observationId]) {
-        const viewData = observationsViewData[observationId][viewIdx];
-        if (viewData.chartType !== null) {
+    for (const observationId in observationsViewData.value) {
+      for (const viewName in observationsViewData.value[observationId].data) {
+        if (
+          observationsViewData.value[observationId].data[viewName].chartType !==
+          null
+        ) {
           fetchObservationViewData(
             +observationId,
-            +viewIdx,
+            viewName,
             getViewDataFilters(),
           );
         }
@@ -211,6 +263,15 @@ Licensed under the Elastic License 2.0. */
   }
 
   function getViewDataFilters(): ObservationDataViewFilter {
+    const fromDate = filterDateRange.value
+      ? filterDateRange.value[0]
+      : undefined;
+    const toDate = filterDateRange.value ? filterDateRange.value[1] : undefined;
+
+    if (fromDate && toDate && fromDate.getTime() === toDate.getTime()) {
+      // If we only filter for one day, we need the whole day until the end
+      toDate.setHours(23, 23, 59);
+    }
     return {
       studyGroupId: filterStudyGroup.value
         ? +filterStudyGroup.value
@@ -218,8 +279,8 @@ Licensed under the Elastic License 2.0. */
       participantId: filterParticipant.value
         ? +filterParticipant.value
         : undefined,
-      from: filterDateRange.value ? filterDateRange.value[0] : undefined,
-      to: filterDateRange.value ? filterDateRange.value[1] : undefined,
+      from: fromDate,
+      to: toDate,
     };
   }
 
@@ -400,12 +461,6 @@ Licensed under the Elastic License 2.0. */
       sortable: true,
       filterable: true,
     },
-    {
-      field: 'observationTitle',
-      header: t('observation.singular'),
-      sortable: true,
-      filterable: true,
-    },
     {
       field: 'dataReceived',
       header: t('global.labels.dataReceived'),
@@ -487,22 +542,40 @@ Licensed under the Elastic License 2.0. */
       });
   }
 
-  const observationsViewData: ObservationsViewData = reactive({});
+  const observationsViewData: Ref<ObservationsViewData> = ref({});
   function fetchViewsForObservation(data: ParticipationDataMapping[]): void {
     for (const observationId of getUniqueObservationIds(data)) {
       dataApi
         .listObservationViews(props.studyId, observationId)
         .then((response: AxiosResponse) => {
           if (response.data?.length > 0) {
-            observationsViewData[observationId] = [];
-            response.data.forEach((view: ObservationDataViewInfo) => {
-              observationsViewData[observationId].push({
-                chartType: null,
-                chartData: null,
-                labels: [],
-                view: view,
-              } as ObservationDataViewData);
-            });
+            observationsViewData.value[observationId] = {
+              selectedView: '',
+              viewOptions: [],
+              data: {},
+            };
+            response.data.forEach(
+              (view: ObservationDataViewInfo, index: number) => {
+                observationsViewData.value[observationId].data[view.name] = {
+                  chartType: null,
+                  chartData: null,
+                  labels: [],
+                  view: view,
+                } as ObservationDataViewData;
+                const option: DropdownOption = {
+                  value: view.name,
+                  label: t(view.label),
+                };
+                observationsViewData.value[observationId].viewOptions.push(
+                  option,
+                );
+
+                if (index === 0) {
+                  observationsViewData.value[observationId].selectedView =
+                    view.name;
+                }
+              },
+            );
           }
         })
         .catch((e: AxiosError) => {
@@ -513,23 +586,23 @@ Licensed under the Elastic License 2.0. */
 
   function fetchObservationViewData(
     observationId: number,
-    viewDataIdx: number,
+    viewName: string,
     filter: ObservationDataViewFilter,
   ): void {
     dataApi
       .getObservationViewData(
         props.studyId,
         observationId,
-        observationsViewData[observationId][viewDataIdx].view.name,
+        viewName,
         filter.studyGroupId,
         filter.participantId,
         filter.from,
         filter.to,
       )
       .then((rs: AxiosResponse) => {
-        observationsViewData[observationId][viewDataIdx].chartType =
+        observationsViewData.value[observationId].data[viewName].chartType =
           rs.data.chartType;
-        observationsViewData[observationId][viewDataIdx].chartData =
+        observationsViewData.value[observationId].data[viewName].chartData =
           convertChartTypeData(rs.data);
       })
       .catch((e: AxiosError) => {
@@ -564,18 +637,24 @@ Licensed under the Elastic License 2.0. */
 
 <template>
   <div>
-    <DatapointList :study-id="studyId" class="mb-14" />
-    <div>
-      <h4
-        v-if="Object.keys(groupedParticipantData).length"
-        class="color-primary mb-4 font-bold"
-      >
-        {{ $t('monitoring.dataList.title') }}
-      </h4>
-      <div
-        v-if="Object.keys(groupedParticipantData).length"
-        class="mb-3 flex items-center justify-between gap-5"
-      >
+    <div v-if="Object.keys(groupedParticipantData).length">
+      <div class="title mb-8">
+        <h3 class="mb-1 font-bold">
+          {{ $t('monitoring.dataList.title') }}
+        </h3>
+        <div>
+          {{ $t('monitoring.dataList.description') }}
+        </div>
+      </div>
+      <div class="flex items-center">
+        <h3 class="mb-1 font-bold">{{ $t('global.labels.filter') }}</h3>
+        <span
+          v-tooltip.bottom="$t('monitoring.dataPointsList.filterInfo')"
+          class="pi pi-info-circle color-primary mx-1"
+        ></span>
+      </div>
+
+      <div class="mb-3 flex items-center justify-between gap-5">
         <div class="flex gap-5">
           <div>
             {{ $t('monitoring.labels.dateRange') }}:
@@ -587,6 +666,7 @@ Licensed under the Elastic License 2.0. */
               :manual-input="false"
               :date-format="dateFormat"
               :placeholder="`${dateFormat} - ${dateFormat}`"
+              :disabled="disableVisualizationFilter"
             />
           </div>
           <div>
@@ -598,7 +678,9 @@ Licensed under the Elastic License 2.0. */
               option-value="value"
               :placeholder="$t('studyGroup.placeholder.chooseGroup')"
               class="ml-1"
-              :disabled="filterParticipant !== undefined"
+              :disabled="
+                disableVisualizationFilter || filterParticipant !== undefined
+              "
               @change="onStudyGroupFilterChange"
             />
           </div>
@@ -610,6 +692,7 @@ Licensed under the Elastic License 2.0. */
               option-label="label"
               option-value="value"
               :placeholder="$t('participants.placeholder.chooseParticipant')"
+              :disabled="disableVisualizationFilter"
               class="ml-1"
               filter
               @change="onParticipantFilterChange"
@@ -619,13 +702,18 @@ Licensed under the Elastic License 2.0. */
         <div>
           <Button
             icon="pi pi-filter-slash"
-            :disabled="!isAnyFilterActive"
+            :disabled="disableVisualizationFilter || !isAnyFilterActive"
             @click="clearAllFilters"
           />
         </div>
       </div>
 
-      <Accordion :active-index="0" lazy expand-icon="pi pi-chevron-up">
+      <Accordion
+        :active-index="0"
+        lazy
+        expand-icon="pi pi-chevron-up"
+        @update:active-index="onAccordionIndexChange"
+      >
         <AccordionTab
           v-for="(observationData, observationId) in groupedParticipantData"
           :key="observationId"
@@ -646,14 +734,32 @@ Licensed under the Elastic License 2.0. */
               />
             </TabPanel>
             <TabPanel
-              v-for="(view, idx) in observationsViewData[observationId]"
-              :key="idx"
-              :header="$t(view.view.label)"
+              v-if="observationsViewData[observationId]"
+              :header="$t('monitoring.labels.visualization')"
             >
+              <Dropdown
+                v-model="observationsViewData[observationId].selectedView"
+                :options="observationsViewData[observationId].viewOptions"
+                option-label="label"
+                option-value="value"
+                :placeholder="
+                  $t('global.placeholder.chooseDropdownOptionDefault')
+                "
+                @change="onViewOptionChange($event, observationId)"
+              />
               <div class="flex min-h-[500px] items-center justify-center">
                 <Chart
-                  v-if="view.chartData"
-                  v-bind="view.chartData"
+                  v-if="
+                    observationsViewData[observationId].selectedView &&
+                    observationsViewData[observationId].data[
+                      observationsViewData[observationId].selectedView
+                    ].chartData
+                  "
+                  v-bind="
+                    observationsViewData[observationId].data[
+                      observationsViewData[observationId].selectedView
+                    ].chartData
+                  "
                   :height="500"
                   :width="1000"
                 />
diff --git a/src/components/dialog/InterventionDialog.vue b/src/components/dialog/InterventionDialog.vue
index 5d9aa34b..3d418094 100644
--- a/src/components/dialog/InterventionDialog.vue
+++ b/src/components/dialog/InterventionDialog.vue
@@ -586,7 +586,6 @@ Licensed under the Elastic License 2.0. */
           :disabled="!editable"
           @click="checkErrors()"
         />
-        >
       </div>
     </form>
   </div>
diff --git a/src/components/shared/MoreTabNav.vue b/src/components/shared/MoreTabNav.vue
index 812feff3..1df4629f 100644
--- a/src/components/shared/MoreTabNav.vue
+++ b/src/components/shared/MoreTabNav.vue
@@ -76,14 +76,8 @@ Licensed under the Elastic License 2.0. */
       access: [StudyRole.Admin, StudyRole.Operator],
     },
     {
-      title: t('studyNavigation.tabs.monitoring'),
-      name: 'Monitoring',
-      params: { studyId: props.studyId },
-      access: [StudyRole.Admin, StudyRole.Viewer],
-    },
-    {
-      title: t('studyNavigation.tabs.data'),
-      name: 'Data',
+      title: t('studyNavigation.tabs.monitoringAndData'),
+      name: 'Monitoring & Data',
       params: { studyId: props.studyId },
       access: [StudyRole.Admin, StudyRole.Viewer],
     },
diff --git a/src/components/subComponents/DataDownload.vue b/src/components/subComponents/DataDownload.vue
index dfe1c6cc..461c6384 100644
--- a/src/components/subComponents/DataDownload.vue
+++ b/src/components/subComponents/DataDownload.vue
@@ -171,10 +171,10 @@
   <div>
     <div class="title mb-8">
       <h3 class="mb-1 font-bold">
-        {{ $t('monitoring.dataDownload.title') }}
+        {{ $t('data.dataDownload.title') }}
       </h3>
       <div>
-        {{ $t('monitoring.dataDownload.description') }}
+        {{ $t('data.dataDownload.description') }}
       </div>
     </div>
     <div class="flex justify-between">
diff --git a/src/i18n/de.json b/src/i18n/de.json
index d6790e09..64e94b56 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -81,8 +81,7 @@
       "integration": "Integrationen",
       "interventions": "Interventionen",
       "timeline": "Kalender",
-      "monitoring": "Monitoring",
-      "data": "Daten"
+      "monitoringAndData": "Monitoring & Data"
     }
   },
 
@@ -340,26 +339,33 @@
     }
   },
 
+  "monitoringData": {
+    "tabs": {
+      "lastDataPoints": "Letzte Datenpunkte",
+      "recordedObservation": "Erhobene Daten",
+      "dataDownload": "Studiendaten herunterladen"
+    }
+  },
+
   "monitoring": {
     "title": "Monitoring",
     "description": "Hier sehen Sie Live-Daten aus Ihrer Studie. Die Daten werden alle {duration} Sekunden aktualisiert.",
     "dataList": {
       "emptyListMsg": "Zur Zeit gibt es keine Datenaufzeichnungen, die beobachtet werden können.",
-      "title": "Erhobene Daten"
+      "title": "Erhobene Daten",
+      "description": "Hier werden die zuletzt gesammelten Datenpunkte in tabellarischer Form angezeigt und die gesamten Datenpunkte können in verschiedenen Visualisierungen dargestellt werden."
     },
     "dataPointsList": {
       "lastDatapoints": "Letzte Datenpunkte",
-      "resultSize": "Anzahl der Datenpunkte"
-    },
-    "dataDownload": {
-      "title": "Studiendaten herunterladen",
-      "description": "Hier können die Studiendaten basierend auf diverse Filter heruntergeladen werden."
+      "resultSize": "Anzahl der Datenpunkte",
+      "filterInfo": "Die Filterung ist nur für die Visualisierung möglich."
     },
     "placeholder": {
       "chooseSize": "Größe auswählen"
     },
     "labels": {
       "latestDataPoints": "Letzte Datenpunkte",
+      "visualization": "Visualisierung",
       "dateRange": "Datumsbereich",
       "noDataAvailable": "Keine Daten verfügbar"
     },
@@ -391,7 +397,12 @@
     }
   },
 
-  "data": {},
+  "data": {
+    "dataDownload": {
+      "title": "Studiendaten herunterladen",
+      "description": "Hier können die Studiendaten basierend auf diverse Filter heruntergeladen werden."
+    }
+  },
 
   "participants": {
     "singular": "Teilnehmer",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7347556e..ca889c34 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -81,8 +81,7 @@
       "integration": "Integrations",
       "interventions": "Interventions",
       "timeline": "Timeline",
-      "monitoring": "Monitoring",
-      "data": "Data"
+      "monitoringAndData": "Monitoring & Data"
     }
   },
 
@@ -340,26 +339,33 @@
     }
   },
 
+  "monitoringData": {
+    "tabs": {
+      "lastDataPoints": "Latest Data Points",
+      "recordedObservation": "Recorded Observations",
+      "dataDownload": "Export study data"
+    }
+  },
+
   "monitoring": {
     "title": "Monitoring",
     "description": "You can view the live data of your study here. Data will be updated every {duration} seconds.",
     "dataList": {
       "emptyListMsg": "Currently there are no observations to track.",
-      "title": "Recorded observations"
+      "title": "Recorded observations",
+      "description": "The most recently collected data points are displayed here in tabular form and the entire data points can be displayed in various visualizations."
     },
     "dataPointsList": {
       "lastDatapoints": "Last data points",
-      "resultSize": "Size of result"
-    },
-    "dataDownload": {
-      "title": "Download study data",
-      "description": "Here you can download the study data based on various filters."
+      "resultSize": "Size of result",
+      "filterInfo": "Filtering is only possible for visualization."
     },
     "placeholder": {
       "chooseSize": "Choose a size"
     },
     "labels": {
       "latestDataPoints": "Latest Data Points",
+      "visualization": "Visualization",
       "dateRange": "Date range",
       "noDataAvailable": "No data available"
     },
@@ -391,7 +397,12 @@
     }
   },
 
-  "data": {},
+  "data": {
+    "dataDownload": {
+      "title": "Download study data",
+      "description": "Here you can download the study data based on various filters."
+    }
+  },
 
   "participants": {
     "singular": "Participant",
@@ -962,7 +973,7 @@
       "openScheduler": "Add absolute schedule",
       "editScheduler": "Edit absolute schedule",
       "openRelativeScheduler": "Add relative Schedule",
-      "editRelativeScheduler": "Edit relative Schdule",
+      "editRelativeScheduler": "Edit relative Schedule",
       "removeScheduler": "Remove scheduler",
       "frequency": "Frequency",
       "repetitionEnd": "Repetition ends",
diff --git a/src/models/ParticipationData.ts b/src/models/ParticipationData.ts
index 95ff61f0..73750492 100644
--- a/src/models/ParticipationData.ts
+++ b/src/models/ParticipationData.ts
@@ -6,6 +6,8 @@
  Foerderung der wissenschaftlichen Forschung).
  Licensed under the Elastic License 2.0.
  */
+import { DropdownOption } from './Common';
+
 export interface ParticipationDataMapping {
   participantAlias: string;
   observationId: number;
@@ -32,8 +34,14 @@ export interface ObservationDataViewDataRow {
 }
 
 export interface ObservationsViewData {
-  [key: string]: ObservationDataViewData[];
+  [key: string]: ObservationDataView;
+}
+export interface ObservationDataView {
+  selectedView: string | undefined; //Ref<string>;
+  viewOptions: DropdownOption[];
+  data: { [key: string]: ObservationDataViewData };
 }
+
 export interface ObservationDataViewData {
   chartType: ChartType | null;
   view: ObservationDataViewInfo;
diff --git a/src/router/index.ts b/src/router/index.ts
index dead194c..b7c3e5d1 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,13 +14,12 @@ import NotFound from '../views/NotFound.vue';
 import Interventions from '../views/Interventions.vue';
 import Participants from '../views/Participants.vue';
 import Observations from '../views/Observations.vue';
-import Monitoring from '../views/Monitoring.vue';
+import MonitoringData from '../views/MonitoringData.vue';
 import StudyOverview from '../views/StudyOverview.vue';
 import { useStudyStore } from '../stores/studyStore';
 import { useStudyGroupStore } from '../stores/studyGroupStore';
 import Integrations from '../views/Integrations.vue';
 import Timeline from '../views/Timeline.vue';
-import Data from '../views/Data.vue';
 
 const studyResolver = async (to: any, from: any, next: any): Promise<void> => {
   const studyStore = useStudyStore();
@@ -81,16 +80,10 @@ const routes = [
         component: Timeline,
       },
       {
-        path: 'monitoring',
-        meta: { title: 'Monitoring' },
-        name: 'Monitoring',
-        component: Monitoring,
-      },
-      {
-        path: 'data',
-        meta: { title: 'Data' },
-        name: 'Data',
-        component: Data,
+        path: 'monitoring-data',
+        meta: { title: 'Monitoring & Data' },
+        name: 'Monitoring & Data',
+        component: MonitoringData,
       },
     ],
   },
diff --git a/src/views/Data.vue b/src/views/Data.vue
deleted file mode 100644
index f3230af0..00000000
--- a/src/views/Data.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Copyright LBI-DHP and/or licensed to LBI-DHP under one or more contributor
-license agreements (LBI-DHP: Ludwig Boltzmann Institute for Digital Health and
-Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
-Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
-Licensed under the Elastic License 2.0. */
-<script setup lang="ts">
-  import StudyHeader from '../components/shared/StudyHeader.vue';
-  import MoreTabNav from '../components/shared/MoreTabNav.vue';
-  import { useStudyStore } from '../stores/studyStore';
-  import { StudyRole } from '../generated-sources/openapi';
-  import DataDownload from '../components/subComponents/DataDownload.vue';
-
-  const studyStore = useStudyStore();
-  const accessRoles: StudyRole[] = [StudyRole.Admin, StudyRole.Viewer];
-</script>
-
-<template>
-  <div class="data-view container m-auto mt-10">
-    <StudyHeader :study="studyStore.study" />
-    <MoreTabNav
-      :study-id="studyStore.studyId"
-      :study-roles="studyStore.studyUserRoles"
-    />
-    <div
-      v-if="
-        studyStore.studyUserRoles.some((r: StudyRole) =>
-          accessRoles.includes(r),
-        )
-      "
-      class="container rounded-lg bg-white p-10"
-    >
-      <Suspense>
-        <DataDownload />
-      </Suspense>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="postcss"></style>
diff --git a/src/views/Monitoring.vue b/src/views/MonitoringData.vue
similarity index 59%
rename from src/views/Monitoring.vue
rename to src/views/MonitoringData.vue
index 6caeb8ee..1f906023 100644
--- a/src/views/Monitoring.vue
+++ b/src/views/MonitoringData.vue
@@ -8,6 +8,10 @@ Licensed under the Elastic License 2.0. */
   import StudyHeader from '../components/shared/StudyHeader.vue';
   import { StudyRole } from '../generated-sources/openapi';
   import { useStudyStore } from '../stores/studyStore';
+  import DataDownload from '../components/subComponents/DataDownload.vue';
+  import TabView from 'primevue/tabview';
+  import TabPanel from 'primevue/tabpanel';
+  import DatapointList from '../components/subComponents/DatapointList.vue';
   import ParticipationDataList from '../components/ParticipationDataList.vue';
 
   const studyStore = useStudyStore();
@@ -15,7 +19,7 @@ Licensed under the Elastic License 2.0. */
 </script>
 
 <template>
-  <div class="monitoring-view container m-auto mt-10">
+  <div class="monitoring-data-view container m-auto mt-10">
     <StudyHeader :study="studyStore.study" />
     <MoreTabNav
       :study-id="studyStore.studyId"
@@ -29,7 +33,19 @@ Licensed under the Elastic License 2.0. */
       "
       class="container rounded-lg bg-white p-10"
     >
-      <ParticipationDataList :study-id="studyStore.studyId" />
+      <TabView>
+        <TabPanel :header="$t('monitoringData.tabs.lastDataPoints')">
+          <DatapointList :study-id="studyStore.studyId" class="mb-14" />
+        </TabPanel>
+        <TabPanel :header="$t('monitoringData.tabs.recordedObservation')">
+          <ParticipationDataList :study-id="studyStore.studyId" />
+        </TabPanel>
+        <TabPanel :header="$t('monitoringData.tabs.dataDownload')">
+          <Suspense>
+            <DataDownload />
+          </Suspense>
+        </TabPanel>
+      </TabView>
     </div>
   </div>
 </template>

From 1f9a0d022039c569a711be483acd2b9a37a87a6c Mon Sep 17 00:00:00 2001
From: Jakob Frank <jakob.frank@redlink.at>
Date: Mon, 5 Aug 2024 15:52:23 +0200
Subject: [PATCH 13/14] chore(ci): do not upload the docker build record as
 artifact

---
 .github/workflows/test-build-push.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/test-build-push.yml b/.github/workflows/test-build-push.yml
index 9c6110d1..c879bd41 100644
--- a/.github/workflows/test-build-push.yml
+++ b/.github/workflows/test-build-push.yml
@@ -125,7 +125,7 @@ jobs:
         env:
           VITE_GIT_BRANCH: '${{ github.ref_name }}'
           VITE_GIT_REVISION: '${{ github.sha }}'
-
+          DOCKER_BUILD_RECORD_UPLOAD: 'false'
 
 
   event_file:

From b6ccff3e098cd160506d7e9c570e847227259d02 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Tue, 6 Aug 2024 14:15:36 +0200
Subject: [PATCH 14/14] #434: Add detailed information (observation title) in
 configuration exception where the config is wrong.

* Update StudyManagerAPI yaml to be align with BE yaml.
---
 openapi/StudyManagerAPI.yaml   | 117 +++++++++++++++------------------
 src/composable/toastService.ts |  26 +++++---
 src/i18n/de.json               |   3 +-
 src/i18n/en.json               |   3 +-
 4 files changed, 75 insertions(+), 74 deletions(-)

diff --git a/openapi/StudyManagerAPI.yaml b/openapi/StudyManagerAPI.yaml
index 71066ec7..be8085ce 100644
--- a/openapi/StudyManagerAPI.yaml
+++ b/openapi/StudyManagerAPI.yaml
@@ -11,21 +11,13 @@ servers:
     description: Local Test Server
 paths:
   /components/{componentType}:
+    parameters:
+      - $ref: '#/components/parameters/ComponentType'
     get:
       tags:
         - components
       operationId: listComponents
       description: List component of certain type
-      parameters:
-        - name: componentType
-          in: path
-          schema:
-            type: string
-            enum:
-              - action
-              - trigger
-              - observation
-          required: true
       responses:
         '200':
           description: Components successfully returned
@@ -37,26 +29,18 @@ paths:
                   $ref: '#/components/schemas/ComponentFactory'
 
   /components/{componentType}/{componentId}/validate:
+    parameters:
+      - $ref: '#/components/parameters/ComponentType'
+      - name: componentId
+        in: path
+        schema:
+          type: string
+        required: true
     post:
       tags:
         - components
       description: check if properties are valid for component
       operationId: validateProperties
-      parameters:
-        - name: componentType
-          in: path
-          schema:
-            type: string
-            enum:
-              - action
-              - trigger
-              - observation
-          required: true
-        - name: componentId
-          in: path
-          schema:
-            type: string
-          required: true
       requestBody:
         content:
           application/json:
@@ -73,31 +57,23 @@ paths:
           description: Not found
 
   /components/{componentType}/{componentId}/api/{slug}:
+    parameters:
+      - $ref: '#/components/parameters/ComponentType'
+      - name: componentId
+        in: path
+        schema:
+          type: string
+        required: true
+      - name: slug
+        in: path
+        schema:
+          type: string
+        required: true
     post:
       tags:
         - components
       operationId: accessModuleSpecificEndpoint
       description: access module specific endpoint
-      parameters:
-        - name: componentType
-          in: path
-          schema:
-            type: string
-            enum:
-              - action
-              - trigger
-              - observation
-          required: true
-        - name: componentId
-          in: path
-          schema:
-            type: string
-          required: true
-        - name: slug
-          in: path
-          schema:
-            type: string
-          required: true
       requestBody:
         required: true
         content:
@@ -117,26 +93,18 @@ paths:
           description: Error
 
   /components/{componentType}/{componentId}/web-component.js:
+    parameters:
+      - $ref: '#/components/parameters/ComponentType'
+      - name: componentId
+        in: path
+        schema:
+          type: string
+        required: true
     get:
       tags:
         - components
       operationId: getWebComponentScript
       description: Get web component script
-      parameters:
-        - name: componentType
-          in: path
-          schema:
-            type: string
-            enum:
-              - action
-              - trigger
-              - observation
-          required: true
-        - name: componentId
-          in: path
-          schema:
-            type: string
-          required: true
       responses:
         '200':
           description: Returned script successfully
@@ -253,10 +221,20 @@ paths:
             schema:
               $ref: '#/components/schemas/StatusChange'
       responses:
-        '202':
-          description: Status changed deleted
+        '200':
+          description: Study status changed
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Study'
         '400':
-          description: Bad request
+          description: The requested transition is not allowed
+        '409':
+          description: Could not update status due to configuration error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ValidationReport'
 
   /studies/{studyId}/collaborators:
     parameters:
@@ -1482,6 +1460,8 @@ components:
           type: string
         propertyId:
           type: string
+        componentTitle:
+          type: string
         type:
           type: string
 
@@ -1565,7 +1545,6 @@ components:
         - active
         - paused
         - closed
-      readOnly: true
       default: draft
 
     StudyGroup:
@@ -2226,6 +2205,16 @@ components:
         additionalProperties: true
 
   parameters:
+    ComponentType:
+      name: componentType
+      in: path
+      schema:
+        type: string
+        enum:
+          - action
+          - trigger
+          - observation
+      required: true
     StudyId:
       name: studyId
       in: path
diff --git a/src/composable/toastService.ts b/src/composable/toastService.ts
index 00be4507..193d444b 100644
--- a/src/composable/toastService.ts
+++ b/src/composable/toastService.ts
@@ -37,19 +37,29 @@ export function useToastService(): any {
     const warnings: string[] = [];
 
     report.errors?.forEach((error: ValidationReportItem) => {
-      const errorMessage = error.message
-        ? t(error.message, { value: error.propertyId })
-        : null;
-      if (errorMessage) {
+      let errorMessage = '';
+
+      if (error.message) {
+        if (error.componentTitle) {
+          errorMessage = t('global.error.inComponentTitle', {
+            title: error.componentTitle,
+          });
+        }
+        errorMessage += t(error.message, { value: error.propertyId });
         errors.push(errorMessage);
       }
     });
 
     report.warnings?.forEach((warning: ValidationReportItem) => {
-      const warningMessage = warning.message
-        ? t(warning.message, { value: warning.propertyId })
-        : null;
-      if (warningMessage) {
+      let warningMessage = '';
+
+      if (warning.message) {
+        if (warning.componentTitle) {
+          warningMessage = t('global.error.inComponentTitle', {
+            title: warning.componentTitle,
+          });
+        }
+        warningMessage += t(warning.message, { value: warning.propertyId });
         warnings.push(warningMessage);
       }
     });
diff --git a/src/i18n/de.json b/src/i18n/de.json
index 64e94b56..bb145254 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -64,7 +64,8 @@
       },
       "general": "Ein allgemeiner Fehler ist aufgetreten.",
       "required": "Erforderlicher Wert '{value}' fehlt.",
-      "immutable": "Der Wert von '{value}' darf nicht geändert werden."
+      "immutable": "Der Wert von '{value}' darf nicht geändert werden.",
+      "inComponentTitle": "In Aufzeichnung '{title}': "
     }
   },
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ca889c34..a3a3895f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -64,7 +64,8 @@
       },
       "general": "A General error occurred.",
       "required": "Required value '{value}' missing.",
-      "immutable": "The value '{value}' is immutable and cannot be changed."
+      "immutable": "The value '{value}' is immutable and cannot be changed.",
+      "inComponentTitle": "In Observation '{title}': "
     }
   },