From 099ea5b236d14167d762a7fbef48979a00b47c3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Tue, 27 Aug 2024 00:08:29 +0200
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9E=95=20Add=20types=20for=20FTUE=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/definitions.ts                   | 18 ++++----
 frontend/src/stores/ftue-store.ts             | 46 +++++++++----------
 .../src/views/FirstTimeUserExperienceView.vue | 33 ++++++-------
 3 files changed, 48 insertions(+), 49 deletions(-)

diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 67623574..0f34918c 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -243,17 +243,15 @@ export enum TableDataButtonType {
 /**
  * First Time User Experience Steps
  * Step amounts are 10-based to allow us flexibility in adding steps later.
- * @enum
- * @readonly
  */
-export const ftueStep = {
-  setupProfile: 10,
+export enum FtueStep {
+  SetupProfile = 10,
   // Right now we only support Google calendars during ftue
-  googlePermissions: 20,
-  connectCalendars: 30,
-  setupSchedule: 40,
-  connectVideoConferencing: 50,
-  finish: 100,
+  GooglePermissions = 20,
+  ConnectCalendars = 30,
+  SetupSchedule = 40,
+  ConnectVideoConferencing = 50,
+  Finish = 100,
 };
 
 /**
@@ -318,7 +316,7 @@ export default {
   defaultSlotDuration,
   EventLocationType,
   ExternalConnectionProviders,
-  ftueStep,
+  FtueStep,
   InviteStatus,
   locationTypes,
   loginRedirectKey,
diff --git a/frontend/src/stores/ftue-store.ts b/frontend/src/stores/ftue-store.ts
index b606e6f5..49f20ac3 100644
--- a/frontend/src/stores/ftue-store.ts
+++ b/frontend/src/stores/ftue-store.ts
@@ -1,12 +1,12 @@
 import { defineStore } from 'pinia';
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed } from 'vue';
 import { useLocalStorage } from '@vueuse/core';
-import { ftueStep } from '@/definitions';
+import { FtueStep } from '@/definitions';
 import { Fetch } from '@/models';
 
 const initialObject = {
   // First step
-  step: ftueStep.setupProfile,
+  step: FtueStep.SetupProfile,
 };
 
 // eslint-disable-next-line import/prefer-default-export
@@ -20,40 +20,40 @@ export const useFTUEStore = defineStore('FTUE', () => {
   /**
    * State information for navigating the First Time User Experience
    * @type {{
-   *   previous: null|ftueStep,
-   *   next: null|ftueStep,
+   *   previous: null|FtueStep,
+   *   next: null|FtueStep,
    *   title: string,
    * }}
    */
   const stepList = {
-    [ftueStep.setupProfile]: {
+    [FtueStep.SetupProfile]: {
       previous: null,
-      next: ftueStep.googlePermissions,
+      next: FtueStep.GooglePermissions,
       title: 'ftue.steps.setupProfile',
     },
-    [ftueStep.googlePermissions]: {
-      previous: ftueStep.setupProfile,
-      next: ftueStep.connectCalendars,
+    [FtueStep.GooglePermissions]: {
+      previous: FtueStep.SetupProfile,
+      next: FtueStep.ConnectCalendars,
       title: 'ftue.steps.googlePermissions',
     },
-    [ftueStep.connectCalendars]: {
-      previous: ftueStep.googlePermissions,
-      next: ftueStep.setupSchedule,
+    [FtueStep.ConnectCalendars]: {
+      previous: FtueStep.GooglePermissions,
+      next: FtueStep.SetupSchedule,
       title: 'ftue.steps.connectCalendars',
     },
-    [ftueStep.setupSchedule]: {
-      previous: ftueStep.connectCalendars,
-      next: ftueStep.connectVideoConferencing,
+    [FtueStep.SetupSchedule]: {
+      previous: FtueStep.ConnectCalendars,
+      next: FtueStep.ConnectVideoConferencing,
       title: 'ftue.steps.setupSchedule',
     },
-    [ftueStep.connectVideoConferencing]: {
-      previous: ftueStep.setupSchedule,
-      next: ftueStep.finish,
+    [FtueStep.ConnectVideoConferencing]: {
+      previous: FtueStep.SetupSchedule,
+      next: FtueStep.Finish,
       title: 'ftue.steps.connectVideo',
     },
-    [ftueStep.finish]: {
-      previous: ftueStep.connectVideoConferencing,
-      next: ftueStep.finish,
+    [FtueStep.Finish]: {
+      previous: FtueStep.ConnectVideoConferencing,
+      next: FtueStep.Finish,
       title: 'ftue.steps.finish',
     },
   };
@@ -89,7 +89,7 @@ export const useFTUEStore = defineStore('FTUE', () => {
 
   const currentStep = computed(() => data.value.step);
   const $reset = () => {
-    data.value.step = ftueStep.setupProfile;
+    data.value.step = FtueStep.SetupProfile;
     clearMessages();
   };
 
diff --git a/frontend/src/views/FirstTimeUserExperienceView.vue b/frontend/src/views/FirstTimeUserExperienceView.vue
index e6d0d790..224d6db9 100644
--- a/frontend/src/views/FirstTimeUserExperienceView.vue
+++ b/frontend/src/views/FirstTimeUserExperienceView.vue
@@ -1,9 +1,13 @@
-<script setup>
-
+<script setup lang="ts">
 import { useFTUEStore } from '@/stores/ftue-store';
 import { storeToRefs } from 'pinia';
-import { ColorSchemes, ftueStep } from '@/definitions';
 import { onMounted, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from '@/stores/user-store';
+import { useRouter } from 'vue-router';
+import { ColorSchemes, FtueStep } from '@/definitions';
+import { refreshKey } from '@/keys';
+import { getPreferredTheme } from '@/utils';
 import WordMark from '@/elements/WordMark.vue';
 import GooglePermissions from '@/components/FTUE/GooglePermissions.vue';
 import SetupProfile from '@/components/FTUE/SetupProfile.vue';
@@ -13,10 +17,6 @@ import ConnectVideo from '@/components/FTUE/ConnectVideo.vue';
 import Finish from '@/components/FTUE/Finish.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from '@/stores/user-store';
-import { useRouter } from 'vue-router';
-import { getPreferredTheme } from '@/utils';
 
 const router = useRouter();
 const user = useUserStore();
@@ -26,7 +26,7 @@ const {
 } = storeToRefs(ftueStore);
 
 const { t } = useI18n();
-const refresh = inject('refresh');
+const refresh = inject(refreshKey);
 
 onMounted(async () => {
   await refresh();
@@ -43,14 +43,14 @@ onMounted(async () => {
   // Force light-mode
   document.documentElement.classList.remove('dark');
 });
-
 </script>
+
 <template>
   <div class="page-ftue overlay" role="dialog" tabindex="-1" aria-labelledby="ftue-title" aria-modal="true">
     <div class="modal">
       <div class="relative flex size-full w-full flex-col items-center gap-4">
         <div class="modal-header">
-          <word-mark v-if="currentStep === ftueStep.setupProfile || currentStep === ftueStep.finish"/>
+          <word-mark v-if="currentStep === FtueStep.SetupProfile || currentStep === FtueStep.Finish"/>
           <h2 id="ftue-title">
             {{ t(stepTitle) }}
           </h2>
@@ -66,12 +66,12 @@ onMounted(async () => {
           <div class="pls-keep-height" v-else/>
         </div>
         <div class="modal-body flex w-full flex-col items-center justify-center">
-          <setup-profile v-if="currentStep === ftueStep.setupProfile"/>
-          <google-permissions v-else-if="currentStep === ftueStep.googlePermissions"/>
-          <connect-calendars v-else-if="currentStep === ftueStep.connectCalendars"/>
-          <setup-schedule v-else-if="currentStep === ftueStep.setupSchedule"/>
-          <connect-video v-else-if="currentStep === ftueStep.connectVideoConferencing"/>
-          <finish v-else-if="currentStep === ftueStep.finish"/>
+          <setup-profile v-if="currentStep === FtueStep.SetupProfile"/>
+          <google-permissions v-else-if="currentStep === FtueStep.GooglePermissions"/>
+          <connect-calendars v-else-if="currentStep === FtueStep.ConnectCalendars"/>
+          <setup-schedule v-else-if="currentStep === FtueStep.SetupSchedule"/>
+          <connect-video v-else-if="currentStep === FtueStep.ConnectVideoConferencing"/>
+          <finish v-else-if="currentStep === FtueStep.Finish"/>
           <div class="error-page" v-else>
             <span>🤔</span>
             <h2>{{ t('ftue.errorHeading') }}</h2>
@@ -87,6 +87,7 @@ onMounted(async () => {
     </div>
   </div>
 </template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 

From 0137369fff7661150ae4f5de32571ee269cdc68f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Tue, 27 Aug 2024 11:12:34 +0200
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9E=95=20Add=20types=20for=20FTUE=20comp?=
 =?UTF-8?q?onents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CalendarQalendar.vue  | 16 ++---
 .../src/components/FTUE/ConnectCalendars.vue  | 23 ++++---
 frontend/src/components/FTUE/ConnectVideo.vue | 28 +++++----
 frontend/src/components/FTUE/Finish.vue       | 15 ++---
 .../src/components/FTUE/GooglePermissions.vue | 13 ++--
 frontend/src/components/FTUE/SetupProfile.vue | 32 +++++-----
 .../src/components/FTUE/SetupSchedule.vue     | 61 ++++++++++---------
 frontend/src/definitions.ts                   | 40 +++---------
 frontend/src/elements/BubbleSelect.vue        |  8 +--
 frontend/src/models.ts                        | 20 +++++-
 frontend/src/stores/ftue-store.ts             | 15 ++---
 frontend/tsconfig.json                        |  2 +-
 12 files changed, 133 insertions(+), 140 deletions(-)

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 15c22a12..3395ed9d 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -7,7 +7,7 @@ import 'qalendar/dist/style.css';
 import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
   ColorSchemes,
-  dateFormatStrings,
+  DateFormatStrings,
   defaultSlotDuration,
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
@@ -208,11 +208,11 @@ const calendarEvents = computed(() => {
       colorScheme: processCalendarColorScheme(event.calendar_title, event.calendar_color),
       time: {
         start: event.all_day
-          ? start.format(dateFormatStrings.qalendarFullDay)
-          : start.format(dateFormatStrings.qalendar),
+          ? start.format(DateFormatStrings.QalendarFullDay)
+          : start.format(DateFormatStrings.Qalendar),
         end: event.all_day
-          ? end.subtract(1, 'minute').format(dateFormatStrings.qalendarFullDay)
-          : end.format(dateFormatStrings.qalendar),
+          ? end.subtract(1, 'minute').format(DateFormatStrings.QalendarFullDay)
+          : end.format(DateFormatStrings.Qalendar),
       },
       description: event.description,
       customData: {
@@ -240,7 +240,7 @@ const calendarEvents = computed(() => {
     const end = start.add(slot.duration, 'minutes');
 
     return {
-      id: appointment.id ?? start.format(dateFormatStrings.qalendar),
+      id: appointment.id ?? start.format(DateFormatStrings.Qalendar),
       title: !isBookingRoute.value
         ? appointment.title
         : `${start.format(displayFormat)} - ${end.format(displayFormat)}`,
@@ -249,8 +249,8 @@ const calendarEvents = computed(() => {
         appointment?.calendar_color ?? 'rgb(20, 184, 166)',
       ),
       time: {
-        start: start.format(dateFormatStrings.qalendar),
-        end: end.format(dateFormatStrings.qalendar),
+        start: start.format(DateFormatStrings.Qalendar),
+        end: end.format(DateFormatStrings.Qalendar),
       },
       description: appointment.details,
       with: slot.attendee ? [slot.attendee].map((attendee) => `${attendee.name} <${attendee.email}>`).join(', ') : '',
diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue
index 8bbc3100..d194db11 100644
--- a/frontend/src/components/FTUE/ConnectCalendars.vue
+++ b/frontend/src/components/FTUE/ConnectCalendars.vue
@@ -24,29 +24,31 @@
       :aria-label="continueTitle"
       v-if="hasNextStep"
       @click="onSubmit()"
-      :tooltip="!selected ? t('ftue.oneCalendarRequired') : null"
-      :disabled="isLoading || !selected"
+      :tooltip="!selectedCount ? t('ftue.oneCalendarRequired') : null"
+      :disabled="isLoading || !selectedCount"
     >
       {{ t('label.continue') }}
     </primary-button>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import {
   onMounted, inject, ref, computed, watch,
 } from 'vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import { useFTUEStore } from '@/stores/ftue-store';
-import { useCalendarStore } from '@/stores/calendar-store.ts';
+import { useCalendarStore } from '@/stores/calendar-store';
 import { storeToRefs } from 'pinia';
+import { callKey } from '@/keys';
+import { CalendarItem } from '@/models';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import SyncCard from '@/tbpro/elements/SyncCard.vue';
 
 const { t } = useI18n();
 
-const call = inject('call');
+const call = inject(callKey);
 
 const isLoading = ref(false);
 
@@ -58,11 +60,11 @@ const {
 const { previousStep, nextStep } = ftueStore;
 
 const calendarStore = useCalendarStore();
-const calendars = ref([]);
-const selected = computed(() => calendars.value.filter((item) => item.checked).length);
-const continueTitle = computed(() => (selected.value ? t('label.continue') : t('ftue.oneCalendarRequired')));
+const calendars = ref<CalendarItem[]>([]);
+const selectedCount = computed(() => calendars.value.filter((item) => item.checked).length);
+const continueTitle = computed(() => (selectedCount.value ? t('label.continue') : t('ftue.oneCalendarRequired')));
 
-watch(selected, (val) => {
+watch(selectedCount, (val) => {
   if (val === 0) {
     warningMessage.value = t('ftue.oneCalendarRequired');
   } else {
@@ -97,6 +99,7 @@ const onSubmit = async () => {
 };
 
 </script>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/components/FTUE/ConnectVideo.vue b/frontend/src/components/FTUE/ConnectVideo.vue
index ddf7c747..90d8ed78 100644
--- a/frontend/src/components/FTUE/ConnectVideo.vue
+++ b/frontend/src/components/FTUE/ConnectVideo.vue
@@ -1,18 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import {
-  onMounted, inject, ref,
-} from 'vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import { onMounted, inject, ref } from 'vue';
 import { useFTUEStore } from '@/stores/ftue-store';
+import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 import { storeToRefs } from 'pinia';
+import { callKey } from '@/keys';
+import { AuthUrl, AuthUrlResponse, BooleanResponse, Exception, ExceptionDetail } from '@/models';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import TextInput from '@/tbpro/elements/TextInput.vue';
-import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 
 const { t } = useI18n();
 
-const call = inject('call');
+const call = inject(callKey);
 const isLoading = ref(false);
 
 const ftueStore = useFTUEStore();
@@ -23,7 +23,7 @@ const { previousStep, nextStep } = ftueStore;
 
 const externalConnectionStore = useExternalConnectionsStore();
 const customMeetingLink = ref('');
-const customMeetingLinkRef = ref();
+const customMeetingLinkRef = ref<typeof TextInput>();
 
 const initFlowKey = 'tba/startedMeetingConnect';
 
@@ -36,10 +36,10 @@ onMounted(async () => {
   localStorage?.removeItem(initFlowKey);
 
   if (isBackFromConnectFlow) {
-    const { data, error } = await call('zoom/ftue-status').get().json();
+    const { data, error }: BooleanResponse = await call('zoom/ftue-status').get().json();
     // Did they hit back?
     if (error?.value) {
-      errorMessage.value = data.value?.detail?.message;
+      errorMessage.value = ((data.value as Exception)?.detail as ExceptionDetail)?.message;
       return;
     }
 
@@ -64,14 +64,15 @@ const connectZoom = async () => {
     return;
   }
 
-  localStorage?.setItem(initFlowKey, true);
+  localStorage?.setItem(initFlowKey, 'true');
   isLoading.value = true;
-  const { data } = await call('zoom/auth').get().json();
+  const { data }: AuthUrlResponse = await call('zoom/auth').get().json();
   // Ship them to the auth link
-  window.location.href = data.value.url;
+  window.location.href = (data.value as AuthUrl).url;
 };
 
 </script>
+
 <template>
   <div class="content">
     <div class="cards">
@@ -121,6 +122,7 @@ const connectZoom = async () => {
     </primary-button>
   </div>
 </template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/components/FTUE/Finish.vue b/frontend/src/components/FTUE/Finish.vue
index acb0126a..2cdb353c 100644
--- a/frontend/src/components/FTUE/Finish.vue
+++ b/frontend/src/components/FTUE/Finish.vue
@@ -1,16 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import {
-  onMounted, inject, ref,
-} from 'vue';
+import { onMounted, inject, ref } from 'vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useScheduleStore } from '@/stores/schedule-store';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import { useUserStore } from '@/stores/user-store';
+import { callKey } from '@/keys';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import LinkButton from '@/tbpro/elements/LinkButton.vue';
 
 const { t } = useI18n();
-const call = inject('call');
+const call = inject(callKey);
 
 const scheduleStore = useScheduleStore();
 const userStore = useUserStore();
@@ -42,7 +41,7 @@ const onSubmit = async () => {
 
   await nextStep(call);
   // Yeet them to calendar!
-  window.location = '/calendar';
+  window.location.href = '/calendar';
 };
 
 const copyLink = async () => {
@@ -62,6 +61,7 @@ const copyLink = async () => {
   }, 4000);
 };
 </script>
+
 <template>
   <div class="content">
     <img src="@/assets/svg/ftue-finish.svg" :alt="t('ftue.finishAltText')"/>
@@ -86,6 +86,7 @@ const copyLink = async () => {
     </primary-button>
   </div>
 </template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/components/FTUE/GooglePermissions.vue b/frontend/src/components/FTUE/GooglePermissions.vue
index 1df4223c..cdfe41f5 100644
--- a/frontend/src/components/FTUE/GooglePermissions.vue
+++ b/frontend/src/components/FTUE/GooglePermissions.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import {
-  onMounted, inject, ref,
-} from 'vue';
-import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import { onMounted, inject, ref } from 'vue';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useUserStore } from '@/stores/user-store';
@@ -12,6 +9,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 import { callKey } from '@/keys';
 import { ExternalConnectionProviders } from '@/definitions';
+import { BooleanResponse, Exception, ExceptionDetail } from '@/models';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -47,7 +46,7 @@ onMounted(async () => {
         await externalConnectionStore.disconnect(call, ExternalConnectionProviders.Google);
       }
     } else {
-      errorMessage.value = route.query.error;
+      errorMessage.value = route.query.error as string;
     }
     await router.replace(route.path);
   }
@@ -55,10 +54,10 @@ onMounted(async () => {
   if (localStorage?.getItem(initFlowKey)) {
     localStorage?.removeItem(initFlowKey);
 
-    const { data, error } = await call('google/ftue-status').get().json();
+    const { data, error }: BooleanResponse = await call('google/ftue-status').get().json();
     // Did they hit back?
     if (error?.value) {
-      errorMessage.value = data.value?.detail?.message;
+      errorMessage.value = ((data.value as Exception)?.detail as ExceptionDetail)?.message;
       return;
     }
 
diff --git a/frontend/src/components/FTUE/SetupProfile.vue b/frontend/src/components/FTUE/SetupProfile.vue
index 1ccb75a8..4cdece9b 100644
--- a/frontend/src/components/FTUE/SetupProfile.vue
+++ b/frontend/src/components/FTUE/SetupProfile.vue
@@ -1,36 +1,30 @@
-<script setup>
-
-import TextInput from '@/tbpro/elements/TextInput.vue';
-import SelectInput from '@/tbpro/elements/SelectInput.vue';
-import {
-  inject, ref,
-} from 'vue';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+<script setup lang="ts">
+import { inject, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useUserStore } from '@/stores/user-store';
 import { useI18n } from 'vue-i18n';
-import { dayjsKey } from '@/keys';
+import { dayjsKey, callKey } from '@/keys';
+import TextInput from '@/tbpro/elements/TextInput.vue';
+import SelectInput from '@/tbpro/elements/SelectInput.vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 
 const { t } = useI18n();
 const dj = inject(dayjsKey);
-const call = inject('call');
+const call = inject(callKey);
 const ftueStore = useFTUEStore();
-const {
-  hasNextStep,
-} = storeToRefs(ftueStore);
+const { hasNextStep } = storeToRefs(ftueStore);
 const { nextStep } = ftueStore;
 const user = useUserStore();
 
-const timezoneOptions = Intl.supportedValuesOf('timeZone').map((timezone) => ({
+// @ts-ignore
+// See https://github.com/microsoft/TypeScript/issues/49231
+const timezoneOptions = Intl.supportedValuesOf('timeZone').map((timezone: string) => ({
   label: timezone.replaceAll('_', ' '),
   value: timezone,
 }));
 
-/**
- * @type {Ref<HTMLFormElement>}
- */
-const formRef = ref();
+const formRef = ref<HTMLFormElement>();
 const fullName = ref(user.data?.name ?? '');
 const username = ref(user.data?.username ?? '');
 const timezone = ref(user.data.timezone ?? dj.tz.guess());
@@ -59,6 +53,7 @@ const onSubmit = async () => {
 };
 
 </script>
+
 <template>
   <div class="content">
     <form ref="formRef" autocomplete="off" autofocus @submit.prevent @keyup.enter="onSubmit">
@@ -85,6 +80,7 @@ const onSubmit = async () => {
     </primary-button>
   </div>
 </template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
index 8314d4a9..0a1a6a1d 100644
--- a/frontend/src/components/FTUE/SetupSchedule.vue
+++ b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -10,8 +10,12 @@
         <bubble-select class="bubbleSelect" :options="scheduleDayOptions" v-model="schedule.days" />
       </div>
       <div class="column">
-        <select-input name="calendar" v-model="schedule.calendar" :options="calendarOptions" required>{{ t('label.selectCalendar') }}</select-input>
-        <select-input name="duration" v-model="schedule.duration" :options="durationOptions" required>{{ t('label.slotLength') }}</select-input>
+        <select-input name="calendar" v-model="schedule.calendar" :options="calendarOptions" required>
+          {{ t('label.selectCalendar') }}
+        </select-input>
+        <select-input name="duration" v-model="schedule.duration" :options="durationOptions" required>
+          {{ t('label.slotLength') }}
+        </select-input>
         <div class="scheduleInfo">{{
             t('text.recipientsCanScheduleBetween', {
               duration: duration,
@@ -30,7 +34,8 @@
       v-if="hasPreviousStep"
       :disabled="isLoading"
       @click="previousStep()"
-    >{{ t('label.back') }}
+    >
+      {{ t('label.back') }}
     </secondary-button>
     <primary-button
       class="btn-continue"
@@ -38,34 +43,33 @@
       v-if="hasNextStep"
       @click="onSubmit()"
       :disabled="isLoading"
-    >{{ t('label.continue') }}
+    >
+      {{ t('label.continue') }}
     </primary-button>
   </div>
 </template>
-<script setup>
 
+<script setup lang="ts">
+import { computed, inject, onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { DateFormatStrings, defaultSlotDuration } from '@/definitions';
+import { useI18n } from 'vue-i18n';
+import { useFTUEStore } from '@/stores/ftue-store';
+import { useUserStore } from '@/stores/user-store';
+import { useCalendarStore } from '@/stores/calendar-store';
+import { useScheduleStore } from '@/stores/schedule-store';
+import { dayjsKey, callKey, isoWeekdaysKey } from '@/keys';
+import { Error, SelectOption } from '@/models';
 import TextInput from '@/tbpro/elements/TextInput.vue';
 import SelectInput from '@/tbpro/elements/SelectInput.vue';
-import {
-  computed,
-  inject, onMounted, ref,
-} from 'vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-import { storeToRefs } from 'pinia';
-import { useFTUEStore } from '@/stores/ftue-store';
-import { useUserStore } from '@/stores/user-store.ts';
 import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
-import { dateFormatStrings, defaultSlotDuration } from '@/definitions';
-import { useI18n } from 'vue-i18n';
-import { useCalendarStore } from '@/stores/calendar-store.ts';
 import BubbleSelect from '@/elements/BubbleSelect.vue';
-import { useScheduleStore } from '@/stores/schedule-store.ts';
-import { dayjsKey } from '@/keys';
 
 const { t } = useI18n();
 const dj = inject(dayjsKey);
-const call = inject('call');
-const isoWeekdays = inject('isoWeekdays');
+const call = inject(callKey);
+const isoWeekdays = inject(isoWeekdaysKey);
 
 const ftueStore = useFTUEStore();
 const {
@@ -80,22 +84,20 @@ const { connectedCalendars } = storeToRefs(calendarStore);
 const { schedules } = storeToRefs(scheduleStore);
 const { timeToBackendTime, timeToFrontendTime } = scheduleStore;
 
-const calendarOptions = computed(() => connectedCalendars.value.map((calendar) => ({
+const calendarOptions = computed<SelectOption[]>(() => connectedCalendars.value.map((calendar) => ({
   label: calendar.title,
   value: calendar.id,
 })));
-const durationOptions = [15, 30, 45, 60, 75, 90].map((min) => ({
+const durationOptions: SelectOption[] = [15, 30, 45, 60, 75, 90].map((min) => ({
   label: `${min} min`,
   value: min,
 }));
-const scheduleDayOptions = isoWeekdays.map((day) => ({
+const scheduleDayOptions: SelectOption[] = isoWeekdays.map((day) => ({
   label: day.min[0],
   value: day.iso,
 }));
-/**
- * @type {Ref<HTMLFormElement>}
- */
-const formRef = ref();
+
+const formRef = ref<HTMLFormElement>();
 
 const schedule = ref({
   name: `${user.data.name}'s Availability`,
@@ -130,7 +132,7 @@ const onSubmit = async () => {
     weekdays: schedule.value.days,
     earliest_booking: 1440,
     farthest_booking: 20160,
-    start_date: dj().format(dateFormatStrings.qalendarFullDay),
+    start_date: dj().format(DateFormatStrings.QalendarFullDay),
     details: schedule.value?.details ?? '',
   };
 
@@ -138,8 +140,8 @@ const onSubmit = async () => {
     ? await scheduleStore.updateSchedule(call, schedules.value[0].id, scheduleData)
     : await scheduleStore.createSchedule(call, scheduleData);
 
-  if (data?.error) {
-    errorMessage.value = data?.message;
+  if ((data as Error)?.error) {
+    errorMessage.value = (data as Error)?.message;
     isLoading.value = false;
     return;
   }
@@ -175,6 +177,7 @@ onMounted(async () => {
 });
 
 </script>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 0f34918c..f5995df8 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -1,14 +1,3 @@
-/**
- * @deprecated Use DateFormatStrings enum instead
- */
-export const dateFormatStrings = {
-  // Qalendar specific formats (These have to be in this format for qalendar to understand them)
-  qalendar: 'YYYY-MM-DD HH:mm',
-  qalendarFullDay: 'YYYY-MM-DD',
-  // Time display formats
-  display12Hour: 'hh:mma',
-  display24Hour: 'HH:mm',
-};
 /**
  * Available date format strings
  */
@@ -36,14 +25,6 @@ export enum SubscriberLevels {
   Admin = 99,
 }
 
-/**
- * @deprecated use EventLocationType
- */
-export const locationTypes = {
-  inPerson: 1,
-  online: 2,
-};
-
 /**
  * Schedule creation state
  */
@@ -178,14 +159,6 @@ export enum ExternalConnectionProviders {
   Zoom = 3,
 }
 
-/**
- * @deprecated Use MeetingLinkProviderType instead
- */
-export const meetingLinkProviderType = {
-  none: 'none',
-  zoom: 'zoom',
-  google_meet: 'google_meet',
-};
 /**
  * Meeting provider types (matches the backends version)
  */
@@ -255,7 +228,7 @@ export enum FtueStep {
 };
 
 /**
- *
+ * @deprecated
  * @enum
  * @readonly
  */
@@ -266,6 +239,13 @@ export const tooltipPosition = {
   left: 'pos-left',
   right: 'pos-right',
 };
+export enum TooltipPosition {
+  None = 'pos-none',
+  Top = 'pos-top',
+  Bottom = 'pos-bottom',
+  Left = 'pos-left',
+  Right = 'pos-right',
+};
 
 /**
  * This should match the enum in routes/waiting_list.py
@@ -311,16 +291,13 @@ export default {
   CalendarManagementType,
   CalendarProviders,
   ColorSchemes,
-  dateFormatStrings,
   DateFormatStrings,
   defaultSlotDuration,
   EventLocationType,
   ExternalConnectionProviders,
   FtueStep,
   InviteStatus,
-  locationTypes,
   loginRedirectKey,
-  meetingLinkProviderType,
   MetricEvents,
   ModalStates,
   ScheduleCreationState,
@@ -329,5 +306,6 @@ export default {
   TableDataButtonType,
   TableDataType,
   tooltipPosition,
+  TooltipPosition,
   WaitingListAction,
 };
diff --git a/frontend/src/elements/BubbleSelect.vue b/frontend/src/elements/BubbleSelect.vue
index 36139367..9cdc8b5c 100644
--- a/frontend/src/elements/BubbleSelect.vue
+++ b/frontend/src/elements/BubbleSelect.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { IsoWeekdayOption } from "@/models";
+import { SelectOption } from "@/models";
 
 // component properties
 interface Props {
-  options: IsoWeekdayOption[];
+  options: SelectOption[];
 };
 defineProps<Props>();
 
-const model = defineModel<string[]>({ default: [] });
+const model = defineModel<number[]>({ default: [] });
 
 /**
  * Adds or removes the option value from the model.
  * There's probably a better way to do this lol!
  * @param option
  */
-const toggleBubble = (option: IsoWeekdayOption) => {
+const toggleBubble = (option: SelectOption) => {
   // Detect what our current state is
   const val = model.value.indexOf(option.value);
 
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index d267e9b2..5712ad6e 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -4,6 +4,7 @@ import {
   InviteStatus,
   WaitingListAction,
   EventLocationType,
+  FtueStep,
   CalendarProviders,
   TableDataButtonType,
   TableDataType,
@@ -155,6 +156,12 @@ export type Calendar = {
   user?: string;
 };
 
+export type CalendarItem = {
+  key: number;
+  label: string;
+  checked: boolean;
+};
+
 export type ExternalConnection = {
   owner_id: number;
   name: string;
@@ -265,6 +272,7 @@ export type Signature = {
   url: string;
 };
 
+// Types for authentication and error handling
 export type Error = {
   error: boolean|string|null;
   message?: string;
@@ -339,6 +347,14 @@ export type TableFilter = {
   fn: (value: string, list: TableDataRow[]) => TableDataRow[];
 };
 
+
+// First Time User Experience State
+export type FtueState = {
+  previous: FtueStep;
+  next: FtueStep;
+  title: string;
+};
+
 // Utility types
 export type Time<T> = {
   start: T;
@@ -347,9 +363,9 @@ export type Time<T> = {
 export type TimeNumeric = Time<number>;
 export type TimeFormatted = Time<string>;
 
-export type IsoWeekdayOption = {
+export type SelectOption = {
   label: string;
-  value: string;
+  value: number;
 };
 
 export type Coloring = {
diff --git a/frontend/src/stores/ftue-store.ts b/frontend/src/stores/ftue-store.ts
index 49f20ac3..0872632f 100644
--- a/frontend/src/stores/ftue-store.ts
+++ b/frontend/src/stores/ftue-store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useLocalStorage } from '@vueuse/core';
 import { FtueStep } from '@/definitions';
-import { Fetch } from '@/models';
+import { Fetch, FtueState } from '@/models';
 
 const initialObject = {
   // First step
@@ -13,19 +13,14 @@ const initialObject = {
 export const useFTUEStore = defineStore('FTUE', () => {
   // State
   const data = useLocalStorage('tba/ftue', structuredClone(initialObject));
-  const infoMessage = ref(null);
-  const errorMessage = ref(null);
-  const warningMessage = ref(null);
+  const infoMessage = ref<string>(null);
+  const errorMessage = ref<string>(null);
+  const warningMessage = ref<string>(null);
 
   /**
    * State information for navigating the First Time User Experience
-   * @type {{
-   *   previous: null|FtueStep,
-   *   next: null|FtueStep,
-   *   title: string,
-   * }}
    */
-  const stepList = {
+  const stepList: Record<FtueStep, FtueState> = {
     [FtueStep.SetupProfile]: {
       previous: null,
       next: FtueStep.GooglePermissions,
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 2604e0ba..a7580723 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -7,7 +7,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
-    "target": "es2017",
+    "target": "es2021",
     "sourceMap": true,
     "outDir": "./dist",
     "baseUrl": "./",

From 01fffbddc106d17820f03d3ca26a207fff4e7a1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Tue, 27 Aug 2024 23:11:12 +0200
Subject: [PATCH 3/8] =?UTF-8?q?=E2=9E=95=20Add=20types=20for=20tbpro=20ico?=
 =?UTF-8?q?ns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/tbpro/icons/NoticeCriticalIcon.vue | 2 +-
 frontend/src/tbpro/icons/NoticeInfoIcon.vue     | 2 +-
 frontend/src/tbpro/icons/NoticeSuccessIcon.vue  | 2 +-
 frontend/src/tbpro/icons/NoticeWarningIcon.vue  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/tbpro/icons/NoticeCriticalIcon.vue b/frontend/src/tbpro/icons/NoticeCriticalIcon.vue
index a3f304c4..31ee2a36 100644
--- a/frontend/src/tbpro/icons/NoticeCriticalIcon.vue
+++ b/frontend/src/tbpro/icons/NoticeCriticalIcon.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
diff --git a/frontend/src/tbpro/icons/NoticeInfoIcon.vue b/frontend/src/tbpro/icons/NoticeInfoIcon.vue
index 9bd9769c..5e98db42 100644
--- a/frontend/src/tbpro/icons/NoticeInfoIcon.vue
+++ b/frontend/src/tbpro/icons/NoticeInfoIcon.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
diff --git a/frontend/src/tbpro/icons/NoticeSuccessIcon.vue b/frontend/src/tbpro/icons/NoticeSuccessIcon.vue
index 88074fd6..963eb542 100644
--- a/frontend/src/tbpro/icons/NoticeSuccessIcon.vue
+++ b/frontend/src/tbpro/icons/NoticeSuccessIcon.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
diff --git a/frontend/src/tbpro/icons/NoticeWarningIcon.vue b/frontend/src/tbpro/icons/NoticeWarningIcon.vue
index 5abfd0e8..366ca6c5 100644
--- a/frontend/src/tbpro/icons/NoticeWarningIcon.vue
+++ b/frontend/src/tbpro/icons/NoticeWarningIcon.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();

From ca8b32c3c5b1fb836a4747ae0b37aa78c186e576 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 28 Aug 2024 09:04:25 +0200
Subject: [PATCH 4/8] =?UTF-8?q?=E2=9E=95=20Add=20types=20for=20tbpro=20ele?=
 =?UTF-8?q?ments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/definitions.ts                   | 14 +-----
 frontend/src/tbpro/elements/BaseButton.vue    | 39 +++++++--------
 frontend/src/tbpro/elements/LinkButton.vue    |  7 +--
 frontend/src/tbpro/elements/NoticeBar.vue     | 16 +++---
 frontend/src/tbpro/elements/PrimaryButton.vue |  7 +--
 .../src/tbpro/elements/SecondaryButton.vue    |  7 +--
 frontend/src/tbpro/elements/SelectInput.vue   | 33 +++++++------
 frontend/src/tbpro/elements/SyncCard.vue      | 20 +++++---
 frontend/src/tbpro/elements/TextInput.vue     | 49 +++++++++----------
 frontend/src/tbpro/elements/ToolTip.vue       | 20 ++++----
 10 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index f5995df8..7f40d284 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -227,18 +227,6 @@ export enum FtueStep {
   Finish = 100,
 };
 
-/**
- * @deprecated
- * @enum
- * @readonly
- */
-export const tooltipPosition = {
-  none: 'pos-none',
-  top: 'pos-top',
-  bottom: 'pos-bottom',
-  left: 'pos-left',
-  right: 'pos-right',
-};
 export enum TooltipPosition {
   None = 'pos-none',
   Top = 'pos-top',
@@ -298,6 +286,7 @@ export default {
   FtueStep,
   InviteStatus,
   loginRedirectKey,
+  MeetingLinkProviderType,
   MetricEvents,
   ModalStates,
   ScheduleCreationState,
@@ -305,7 +294,6 @@ export default {
   SubscriberLevels,
   TableDataButtonType,
   TableDataType,
-  tooltipPosition,
   TooltipPosition,
   WaitingListAction,
 };
diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
index fbab158f..ed5a2dc4 100644
--- a/frontend/src/tbpro/elements/BaseButton.vue
+++ b/frontend/src/tbpro/elements/BaseButton.vue
@@ -1,26 +1,22 @@
-<script setup>
-import { tooltipPosition } from '@/definitions';
+<script setup lang="ts">
+import { TooltipPosition } from '@/definitions';
 import ToolTip from '@/tbpro/elements/ToolTip.vue';
 
-defineProps({
-  type: {
-    type: String,
-    default: 'secondary',
-  },
-  size: {
-    type: String,
-    default: 'regular',
-  },
-  tooltip: {
-    type: String,
-    default: '',
-  },
-  forceTooltip: {
-    type: Boolean,
-    default: false,
-  },
-});
+// component properties
+interface Props {
+  type: string;
+  size: string;
+  tooltip: string;
+  forceTooltip: boolean;
+};
+withDefaults(defineProps<Props>(), {
+  type: 'secondary',
+  size: 'regular',
+  tooltip: '',
+  forceTooltip: false,
+})
 </script>
+
 <template>
   <button :class="{[type]: type, 'small': size === 'small'}" type="button">
     <span class="icon" v-if="$slots?.icon">
@@ -33,13 +29,14 @@ defineProps({
       v-if="tooltip"
       class="tooltip"
       :class="{'display-tooltip': forceTooltip}"
-      :position="tooltipPosition.bottom"
+      :position="TooltipPosition.Bottom"
       @click.prevent
     >
       {{ tooltip }}
     </tool-tip>
   </button>
 </template>
+
 <style scoped>
 .tooltip {
   transform: translate(0, -100%);
diff --git a/frontend/src/tbpro/elements/LinkButton.vue b/frontend/src/tbpro/elements/LinkButton.vue
index a406ae20..a33d6d1d 100644
--- a/frontend/src/tbpro/elements/LinkButton.vue
+++ b/frontend/src/tbpro/elements/LinkButton.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import BaseButton from '@/tbpro/elements/BaseButton.vue';
+</script>
+
 <template>
   <base-button type="link">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -5,6 +9,3 @@
     </template>
   </base-button>
 </template>
-<script setup>
-import BaseButton from '@/tbpro/elements/BaseButton.vue';
-</script>
diff --git a/frontend/src/tbpro/elements/NoticeBar.vue b/frontend/src/tbpro/elements/NoticeBar.vue
index b4cbd812..f9da177d 100644
--- a/frontend/src/tbpro/elements/NoticeBar.vue
+++ b/frontend/src/tbpro/elements/NoticeBar.vue
@@ -1,16 +1,16 @@
-<script setup>
-
+<script setup lang="ts">
 import NoticeInfoIcon from '@/tbpro/icons/NoticeInfoIcon.vue';
 import NoticeSuccessIcon from '@/tbpro/icons/NoticeSuccessIcon.vue';
 import NoticeWarningIcon from '@/tbpro/icons/NoticeWarningIcon.vue';
 import NoticeCriticalIcon from '@/tbpro/icons/NoticeCriticalIcon.vue';
 
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'info',
-  },
-});
+// component properties
+interface Props {
+  type: string;
+};
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+})
 
 const isInfo = props.type === 'info';
 const isSuccess = props.type === 'success;';
diff --git a/frontend/src/tbpro/elements/PrimaryButton.vue b/frontend/src/tbpro/elements/PrimaryButton.vue
index 1a6682c6..d415d2d3 100644
--- a/frontend/src/tbpro/elements/PrimaryButton.vue
+++ b/frontend/src/tbpro/elements/PrimaryButton.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import BaseButton from '@/tbpro/elements/BaseButton.vue';
+</script>
+
 <template>
   <base-button type="primary">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -5,6 +9,3 @@
     </template>
   </base-button>
 </template>
-<script setup>
-import BaseButton from '@/tbpro/elements/BaseButton.vue';
-</script>
diff --git a/frontend/src/tbpro/elements/SecondaryButton.vue b/frontend/src/tbpro/elements/SecondaryButton.vue
index 184f7b70..fc27ffa0 100644
--- a/frontend/src/tbpro/elements/SecondaryButton.vue
+++ b/frontend/src/tbpro/elements/SecondaryButton.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import BaseButton from '@/tbpro/elements/BaseButton.vue';
+</script>
+
 <template>
   <base-button type="secondary">
     <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -5,6 +9,3 @@
     </template>
   </base-button>
 </template>
-<script setup>
-import BaseButton from '@/tbpro/elements/BaseButton.vue';
-</script>
diff --git a/frontend/src/tbpro/elements/SelectInput.vue b/frontend/src/tbpro/elements/SelectInput.vue
index c75cc628..f2757d8a 100644
--- a/frontend/src/tbpro/elements/SelectInput.vue
+++ b/frontend/src/tbpro/elements/SelectInput.vue
@@ -1,24 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
+import { HTMLInputElementEvent, SelectOption } from '@/models';
+
+// component properties
+interface Props {
+  name: string;
+  options: SelectOption[];
+  required: boolean;
+  disabled: boolean;
+};
+withDefaults(defineProps<Props>(), {
+  required: false,
+  disabled: false,
+})
 
-defineProps({
-  name: String,
-  options: Object,
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
 defineEmits(['submit']);
-const model = defineModel();
+const model = defineModel<number|string>();
 const isInvalid = ref(false);
 const validationMessage = ref('');
 
-const onInvalid = (evt) => {
+const onInvalid = (evt: HTMLInputElementEvent) => {
   isInvalid.value = true;
   validationMessage.value = evt.target.validationMessage;
 };
@@ -28,7 +29,7 @@ const onInvalid = (evt) => {
   <label class="wrapper" :for="name">
     <span class="label">
       <slot/>
-      <span v-if="required && model.length === 0" class="required">*</span>
+      <span v-if="required && (model === null || model === '')" class="required">*</span>
     </span>
     <select
       class="w-full rounded-md"
diff --git a/frontend/src/tbpro/elements/SyncCard.vue b/frontend/src/tbpro/elements/SyncCard.vue
index 984b1f0e..581dcbde 100644
--- a/frontend/src/tbpro/elements/SyncCard.vue
+++ b/frontend/src/tbpro/elements/SyncCard.vue
@@ -10,7 +10,9 @@
           {{ t('ftue.itemsSelected', {'count': selected}) }}
         </div>
       </div>
-      <primary-button class="select-all" size="small" @click="selectAll" :title="t('ftue.selectAllCalendars')">{{ t('ftue.selectAll') }}</primary-button>
+      <primary-button class="select-all" size="small" @click="selectAll" :title="t('ftue.selectAllCalendars')">
+        {{ t('ftue.selectAll') }}
+      </primary-button>
     </div>
     <ul class="rows">
       <li class="row" v-for="(item, index) in model" :key="item.key">
@@ -22,13 +24,15 @@
     </ul>
   </div>
 </template>
-<script setup>
+
+<script setup lang="ts">
 import { computed } from 'vue';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import { useI18n } from 'vue-i18n';
+import { CalendarItem } from '@/models';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 
 const { t } = useI18n();
-const model = defineModel();
+const model = defineModel<CalendarItem[]>();
 
 const selected = computed(() => model.value.filter((item) => item.checked).length);
 const selectAll = () => {
@@ -38,9 +42,11 @@ const selectAll = () => {
   }));
 };
 
-defineProps({
-  title: String,
-});
+// component properties
+interface Props {
+  title: string;
+};
+defineProps<Props>();
 </script>
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index 547e0136..41369916 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/frontend/src/tbpro/elements/TextInput.vue
@@ -1,7 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
+import { HTMLInputElementEvent } from '@/models';
 
-const inputRef = ref(null);
+const inputRef = ref<HTMLInputElement>(null);
 /**
  * Forwards focus intent to the text input element.
  * Unlike HTMLElement.focus() this does not take any parameters.
@@ -13,38 +14,32 @@ const focus = () => {
   inputRef.value.focus();
 };
 
-defineProps({
-  name: String,
-  type: {
-    type: String,
-    default: 'text',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
+// component properties
+interface Props {
+  name: string;
+  type: string;
+  placeholder: string;
+  required: boolean;
+  disabled: boolean;
+};
+withDefaults(defineProps<Props>(), {
+  text: 'test',
+  placeholder: '',
+  required: false,
+  disabled: false,
+})
+
 defineEmits(['submit']);
-defineExpose({
-  focus,
-});
-const model = defineModel();
+defineExpose({ focus });
+
+const model = defineModel<string>();
 const isInvalid = ref(false);
 const validationMessage = ref('');
 
-const onInvalid = (evt) => {
+const onInvalid = (evt: HTMLInputElementEvent) => {
   isInvalid.value = true;
   validationMessage.value = evt.target.validationMessage;
 };
-
 </script>
 
 <template>
diff --git a/frontend/src/tbpro/elements/ToolTip.vue b/frontend/src/tbpro/elements/ToolTip.vue
index 6a9e347a..ba4cb03f 100644
--- a/frontend/src/tbpro/elements/ToolTip.vue
+++ b/frontend/src/tbpro/elements/ToolTip.vue
@@ -13,17 +13,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // component properties
-import { tooltipPosition } from '@/definitions';
+import { TooltipPosition } from '@/definitions';
 
-defineProps({
-  alt: String, // Tooltip text
-  position: {
-    type: tooltipPosition,
-    default: tooltipPosition.bottom,
-  },
-});
+// component properties
+interface Props {
+  alt: string;
+  position: TooltipPosition;
+};
+withDefaults(defineProps<Props>(), {
+  alt: '',
+  position: TooltipPosition.Bottom,
+})
 </script>
 
 <style scoped>

From 59b98e6d0d25e86daad3d7bcf7f576d423a9a185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 28 Aug 2024 09:28:27 +0200
Subject: [PATCH 5/8] =?UTF-8?q?=F0=9F=94=A8=20Fix=20several=20type=20error?=
 =?UTF-8?q?s=20across=20the=20code=20base?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataTable.vue             |  2 +-
 frontend/src/components/SettingsCalendar.vue      | 10 +++++-----
 frontend/src/tbpro/elements/TextInput.vue         |  1 +
 frontend/src/views/admin/WaitingListPanelView.vue | 15 +++++++++------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 79bcde2c..5ad0f197 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -44,7 +44,7 @@
               </span>
               <span v-else-if="fieldData.type === TableDataType.Code" class="flex items-center gap-4">
                 <code>{{ fieldData.value }}</code>
-                <text-button :uid="fieldKey" class="btn-copy" :copy="String(fieldData.value)" :title="t('label.copy')" />
+                <text-button :uid="fieldKey as string" class="btn-copy" :copy="String(fieldData.value)" :title="t('label.copy')" />
               </span>
               <span v-else-if="fieldData.type === TableDataType.Bool">
                 <span v-if="fieldData.value">Yes</span>
diff --git a/frontend/src/components/SettingsCalendar.vue b/frontend/src/components/SettingsCalendar.vue
index 8cc84e66..471e859e 100644
--- a/frontend/src/components/SettingsCalendar.vue
+++ b/frontend/src/components/SettingsCalendar.vue
@@ -111,14 +111,14 @@ const disconnectCalendar = async (id: number) => {
   sendMetrics(MetricEvents.DisconnectCalendar, { provider: calendarStore.calendarById(id)?.provider });
 };
 const syncCalendars = async () => {
-loading.value = true;
+  loading.value = true;
 
-  const oldCount = calendarStore.calendars.value.length;
+  const oldCount = calendarStore.calendars.length;
 
   await calendarStore.syncCalendars(call);
   await refreshData();
 
-  const newCount = calendarStore.calendars.value.length;
+  const newCount = calendarStore.calendars.length;
 
   sendMetrics(MetricEvents.DisconnectCalendar, { oldCount, newCount });
 };
@@ -153,7 +153,7 @@ const deleteCalendarConfirm = async () => {
 const saveCalendar = async () => {
   loading.value = true;
 
-  if (inputMode.value === inputModes.add) {
+  if (inputMode.value === InputModes.Add) {
     sendMetrics(MetricEvents.AddCalendar, { provider: calendarInput.data.provider });
   }
 
@@ -175,7 +175,7 @@ const saveCalendar = async () => {
   }
 
   // edit existing calendar connection
-  if (inputMode.value === inputModes.edit) {
+  if (inputMode.value === InputModes.Edit) {
     await call(`cal/${calendarInput.id}`).put(calendarInput.data);
     sendMetrics(MetricEvents.EditCalendar, { provider: calendarInput.data.provider });
   }
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index 41369916..f69c1928 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/frontend/src/tbpro/elements/TextInput.vue
@@ -23,6 +23,7 @@ interface Props {
   disabled: boolean;
 };
 withDefaults(defineProps<Props>(), {
+  type: 'text',
   text: 'test',
   placeholder: '',
   required: false,
diff --git a/frontend/src/views/admin/WaitingListPanelView.vue b/frontend/src/views/admin/WaitingListPanelView.vue
index 976dce61..3324befd 100644
--- a/frontend/src/views/admin/WaitingListPanelView.vue
+++ b/frontend/src/views/admin/WaitingListPanelView.vue
@@ -1,26 +1,29 @@
 <script setup lang="ts">
 import {
-  computed, inject, onMounted, Ref, ref,
+  computed, inject, onMounted, ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { AlertSchemes, TableDataType } from '@/definitions';
 import { useRouter } from 'vue-router';
 import {
   WaitingListEntry,
+  WaitingListInvite,
   WaitingListResponse,
   BooleanResponse,
   TableDataRow,
   TableDataColumn,
   TableFilter,
-  WaitingListInviteResponse
+  WaitingListInviteResponse,
+  Exception,
+  ExceptionDetail
 } from "@/models";
 import { dayjsKey, callKey } from "@/keys";
+import { IconSend } from "@tabler/icons-vue";
 import DataTable from '@/components/DataTable.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import AdminNav from '@/elements/admin/AdminNav.vue';
 import PrimaryButton from "@/elements/PrimaryButton.vue";
-import {IconSend} from "@tabler/icons-vue";
 
 const router = useRouter();
 const { t } = useI18n();
@@ -201,14 +204,14 @@ const sendInvites = async () => {
   const { data, error } = response;
 
   if (error.value) {
-    pageError.value = data?.value?.detail?.message ?? t('error.somethingWentWrong');
+    pageError.value = ((data?.value as Exception)?.detail as ExceptionDetail)?.message ?? t('error.somethingWentWrong');
     loading.value = false;
     return;
   }
 
-  const { accepted, errors } = data.value;
+  const { accepted, errors } = data.value as WaitingListInvite;
 
-  pageNotification.value = t('label.sentCountInvitesSuccessfully', {count: accepted.length})
+  pageNotification.value = t('label.sentCountInvitesSuccessfully', { count: accepted.length })
 
   if (errors.length) {
     pageError.value = errors.join('\n');

From 958ebb2b11374cd94c837b1ec0e473600d861aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 29 Aug 2024 10:44:54 +0200
Subject: [PATCH 6/8] =?UTF-8?q?=F0=9F=94=A8=20Fix=20optional=20props=20typ?=
 =?UTF-8?q?e=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/bookingView/BookingViewSlotSelection.vue  | 2 +-
 frontend/src/tbpro/elements/BaseButton.vue               | 8 ++++----
 frontend/src/tbpro/elements/NoticeBar.vue                | 2 +-
 frontend/src/tbpro/elements/SelectInput.vue              | 4 ++--
 frontend/src/tbpro/elements/SyncCard.vue                 | 2 +-
 frontend/src/tbpro/elements/TextInput.vue                | 9 ++++-----
 frontend/src/tbpro/elements/ToolTip.vue                  | 4 ++--
 7 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/bookingView/BookingViewSlotSelection.vue b/frontend/src/components/bookingView/BookingViewSlotSelection.vue
index 5fc7d60a..e2a75e27 100644
--- a/frontend/src/components/bookingView/BookingViewSlotSelection.vue
+++ b/frontend/src/components/bookingView/BookingViewSlotSelection.vue
@@ -33,7 +33,7 @@ const selectEvent = (day: String) => {
   // set event selected
   for (let i = 0; i < appointment.value.slots.length; i += 1) {
     const slot: Slot = appointment.value.slots[i];
-    if (slot.start.format(DateFormatStrings.Qalendar) === day) {
+    if (dj(slot.start).format(DateFormatStrings.Qalendar) === day) {
       slot.selected = true;
       const e = { ...appointment.value, ...slot };
       delete e.slots;
diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
index ed5a2dc4..95f5c0c3 100644
--- a/frontend/src/tbpro/elements/BaseButton.vue
+++ b/frontend/src/tbpro/elements/BaseButton.vue
@@ -4,10 +4,10 @@ import ToolTip from '@/tbpro/elements/ToolTip.vue';
 
 // component properties
 interface Props {
-  type: string;
-  size: string;
-  tooltip: string;
-  forceTooltip: boolean;
+  type?: string;
+  size?: string;
+  tooltip?: string;
+  forceTooltip?: boolean;
 };
 withDefaults(defineProps<Props>(), {
   type: 'secondary',
diff --git a/frontend/src/tbpro/elements/NoticeBar.vue b/frontend/src/tbpro/elements/NoticeBar.vue
index f9da177d..de7c1e5e 100644
--- a/frontend/src/tbpro/elements/NoticeBar.vue
+++ b/frontend/src/tbpro/elements/NoticeBar.vue
@@ -6,7 +6,7 @@ import NoticeCriticalIcon from '@/tbpro/icons/NoticeCriticalIcon.vue';
 
 // component properties
 interface Props {
-  type: string;
+  type?: string;
 };
 const props = withDefaults(defineProps<Props>(), {
   type: 'info',
diff --git a/frontend/src/tbpro/elements/SelectInput.vue b/frontend/src/tbpro/elements/SelectInput.vue
index f2757d8a..0c84056b 100644
--- a/frontend/src/tbpro/elements/SelectInput.vue
+++ b/frontend/src/tbpro/elements/SelectInput.vue
@@ -6,8 +6,8 @@ import { HTMLInputElementEvent, SelectOption } from '@/models';
 interface Props {
   name: string;
   options: SelectOption[];
-  required: boolean;
-  disabled: boolean;
+  required?: boolean;
+  disabled?: boolean;
 };
 withDefaults(defineProps<Props>(), {
   required: false,
diff --git a/frontend/src/tbpro/elements/SyncCard.vue b/frontend/src/tbpro/elements/SyncCard.vue
index 581dcbde..3e6e19e6 100644
--- a/frontend/src/tbpro/elements/SyncCard.vue
+++ b/frontend/src/tbpro/elements/SyncCard.vue
@@ -48,6 +48,7 @@ interface Props {
 };
 defineProps<Props>();
 </script>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
@@ -138,7 +139,6 @@ input {
   .select-all {
     position: relative;
     margin-right: 0.25rem;
-    top: 2.25rem;
   }
 }
 </style>
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index f69c1928..64618cd7 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/frontend/src/tbpro/elements/TextInput.vue
@@ -17,14 +17,13 @@ const focus = () => {
 // component properties
 interface Props {
   name: string;
-  type: string;
-  placeholder: string;
-  required: boolean;
-  disabled: boolean;
+  type?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
 };
 withDefaults(defineProps<Props>(), {
   type: 'text',
-  text: 'test',
   placeholder: '',
   required: false,
   disabled: false,
diff --git a/frontend/src/tbpro/elements/ToolTip.vue b/frontend/src/tbpro/elements/ToolTip.vue
index ba4cb03f..00cb3629 100644
--- a/frontend/src/tbpro/elements/ToolTip.vue
+++ b/frontend/src/tbpro/elements/ToolTip.vue
@@ -19,8 +19,8 @@ import { TooltipPosition } from '@/definitions';
 
 // component properties
 interface Props {
-  alt: string;
-  position: TooltipPosition;
+  alt?: string;
+  position?: TooltipPosition;
 };
 withDefaults(defineProps<Props>(), {
   alt: '',

From 7cae2b3907e120a13f0d9373426731052295169c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 29 Aug 2024 10:47:20 +0200
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=94=A8=20Fix=20section=20order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DataTable.vue         | 206 +++++++++---------
 .../src/components/FTUE/ConnectCalendars.vue  |  68 +++---
 .../src/components/FTUE/SetupSchedule.vue     | 102 ++++-----
 frontend/src/tbpro/elements/SyncCard.vue      |  48 ++--
 frontend/src/tbpro/elements/ToolTip.vue       |  30 +--
 5 files changed, 227 insertions(+), 227 deletions(-)

diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 5ad0f197..85252ce9 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -1,106 +1,3 @@
-<template>
-  <div class="flex flex-col items-center justify-center gap-4">
-    <div class="flex w-full flex-col items-center justify-between gap-4 md:flex-row md:gap-0">
-      <div>
-        <span class="font-bold">{{ totalDataLength }}</span> {{ dataName }}
-      </div>
-      <div v-for="filter in filters" :key="filter.name">
-        <label class="flex items-center gap-4 whitespace-nowrap">
-        {{ filter.name }} {{ t('label.filter') }}:
-        <select class="rounded-md" @change="(evt) => onColumnFilter(evt, filter)">
-          <option :value="option.key" v-for="option in filter.options" :key="option.key">
-            {{ option.name }}
-          </option>
-        </select>
-        </label>
-      </div>
-      <list-pagination
-        :list-length="totalDataLength"
-        :page-size="pageSize"
-        @update="updatePage"
-      />
-    </div>
-    <div class="data-table overflow-x-auto">
-      <table>
-        <thead>
-          <tr>
-            <th v-if="allowMultiSelect">
-              <input :checked="paginatedDataList.every((row) => selectedRows.includes(row))" @change="(evt) => onPageSelect(evt, paginatedDataList)" id="select-page-input" class="mr-2" type="checkbox"/>
-              <label class="select-none cursor-pointer" for="select-page-input">
-              Select Page
-              </label>
-            </th>
-            <th v-for="column in columns" :key="column.key">{{ column.name }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(datum, i) in paginatedDataList" :key="datum[dataKey] as unknown as string">
-            <td v-if="allowMultiSelect">
-              <input :checked="selectedRows.includes(datum)" type="checkbox" @change="(evt) => onFieldSelect(evt, datum)" />
-            </td>
-            <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey" :class="`column-${fieldKey}`">
-              <span v-if="fieldData.type === TableDataType.Text">
-                {{ fieldData.value }}
-              </span>
-              <span v-else-if="fieldData.type === TableDataType.Code" class="flex items-center gap-4">
-                <code>{{ fieldData.value }}</code>
-                <text-button :uid="fieldKey as string" class="btn-copy" :copy="String(fieldData.value)" :title="t('label.copy')" />
-              </span>
-              <span v-else-if="fieldData.type === TableDataType.Bool">
-                <span v-if="fieldData.value">Yes</span>
-                <span v-else>No</span>
-              </span>
-              <span v-else-if="fieldData.type === TableDataType.Link">
-                <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
-              </span>
-              <span v-else-if="fieldData.type === TableDataType.Button">
-                <primary-button
-                  v-if="fieldData.buttonType === TableDataButtonType.Primary"
-                  :disabled="fieldData.disabled"
-                  @click="emit('fieldClick', fieldKey, datum)"
-                >
-                  {{ fieldData.value }}
-                </primary-button>
-                <secondary-button
-                  v-else-if="fieldData.buttonType === TableDataButtonType.Secondary"
-                  :disabled="fieldData.disabled"
-                  @click="emit('fieldClick', fieldKey, datum)"
-                >
-                  {{ fieldData.value }}
-                </secondary-button>
-                <caution-button
-                  v-else-if="fieldData.buttonType === TableDataButtonType.Caution"
-                  :disabled="fieldData.disabled"
-                  @click="emit('fieldClick', fieldKey, datum)"
-                >
-                  {{ fieldData.value }}
-                </caution-button>
-              </span>
-            </td>
-          </tr>
-          <tr v-if="loading">
-            <td :colspan="columnSpan">
-              <div class="flex w-full justify-center">
-              <loading-spinner/>
-              </div>
-            </td>
-          </tr>
-          <tr v-else-if="paginatedDataList.length === 0">
-            <td :colspan="columnSpan">{{ t('error.dataSourceIsEmpty', {name: dataName}) }}</td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th :colspan="columnSpan">
-              <slot name="footer"></slot>
-            </th>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 /**
  * Data Table
@@ -222,3 +119,106 @@ const onColumnFilter = (evt: Event, filter: TableFilter) => {
 };
 
 </script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4">
+    <div class="flex w-full flex-col items-center justify-between gap-4 md:flex-row md:gap-0">
+      <div>
+        <span class="font-bold">{{ totalDataLength }}</span> {{ dataName }}
+      </div>
+      <div v-for="filter in filters" :key="filter.name">
+        <label class="flex items-center gap-4 whitespace-nowrap">
+        {{ filter.name }} {{ t('label.filter') }}:
+        <select class="rounded-md" @change="(evt) => onColumnFilter(evt, filter)">
+          <option :value="option.key" v-for="option in filter.options" :key="option.key">
+            {{ option.name }}
+          </option>
+        </select>
+        </label>
+      </div>
+      <list-pagination
+        :list-length="totalDataLength"
+        :page-size="pageSize"
+        @update="updatePage"
+      />
+    </div>
+    <div class="data-table overflow-x-auto">
+      <table>
+        <thead>
+          <tr>
+            <th v-if="allowMultiSelect">
+              <input :checked="paginatedDataList.every((row) => selectedRows.includes(row))" @change="(evt) => onPageSelect(evt, paginatedDataList)" id="select-page-input" class="mr-2" type="checkbox"/>
+              <label class="select-none cursor-pointer" for="select-page-input">
+              Select Page
+              </label>
+            </th>
+            <th v-for="column in columns" :key="column.key">{{ column.name }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(datum, i) in paginatedDataList" :key="datum[dataKey] as unknown as string">
+            <td v-if="allowMultiSelect">
+              <input :checked="selectedRows.includes(datum)" type="checkbox" @change="(evt) => onFieldSelect(evt, datum)" />
+            </td>
+            <td v-for="(fieldData, fieldKey) in datum" :key="fieldKey" :class="`column-${fieldKey}`">
+              <span v-if="fieldData.type === TableDataType.Text">
+                {{ fieldData.value }}
+              </span>
+              <span v-else-if="fieldData.type === TableDataType.Code" class="flex items-center gap-4">
+                <code>{{ fieldData.value }}</code>
+                <text-button :uid="fieldKey as string" class="btn-copy" :copy="String(fieldData.value)" :title="t('label.copy')" />
+              </span>
+              <span v-else-if="fieldData.type === TableDataType.Bool">
+                <span v-if="fieldData.value">Yes</span>
+                <span v-else>No</span>
+              </span>
+              <span v-else-if="fieldData.type === TableDataType.Link">
+                <a :href="fieldData.link" target="_blank">{{ fieldData.value }}</a>
+              </span>
+              <span v-else-if="fieldData.type === TableDataType.Button">
+                <primary-button
+                  v-if="fieldData.buttonType === TableDataButtonType.Primary"
+                  :disabled="fieldData.disabled"
+                  @click="emit('fieldClick', fieldKey, datum)"
+                >
+                  {{ fieldData.value }}
+                </primary-button>
+                <secondary-button
+                  v-else-if="fieldData.buttonType === TableDataButtonType.Secondary"
+                  :disabled="fieldData.disabled"
+                  @click="emit('fieldClick', fieldKey, datum)"
+                >
+                  {{ fieldData.value }}
+                </secondary-button>
+                <caution-button
+                  v-else-if="fieldData.buttonType === TableDataButtonType.Caution"
+                  :disabled="fieldData.disabled"
+                  @click="emit('fieldClick', fieldKey, datum)"
+                >
+                  {{ fieldData.value }}
+                </caution-button>
+              </span>
+            </td>
+          </tr>
+          <tr v-if="loading">
+            <td :colspan="columnSpan">
+              <div class="flex w-full justify-center">
+              <loading-spinner/>
+              </div>
+            </td>
+          </tr>
+          <tr v-else-if="paginatedDataList.length === 0">
+            <td :colspan="columnSpan">{{ t('error.dataSourceIsEmpty', {name: dataName}) }}</td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <th :colspan="columnSpan">
+              <slot name="footer"></slot>
+            </th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue
index d194db11..290a0546 100644
--- a/frontend/src/components/FTUE/ConnectCalendars.vue
+++ b/frontend/src/components/FTUE/ConnectCalendars.vue
@@ -1,37 +1,3 @@
-<template>
-  <div class="content">
-    <form class="form" autocomplete="off" autofocus @submit.prevent @keyup.enter="onSubmit">
-      <sync-card class="sync-card" v-model="calendars" :title="t('label.calendar', 2)">
-        <template v-slot:icon>
-        <span class="icon-calendar">
-          <img src="@/assets/svg/icons/calendar.svg" :alt="t('ftue.calendarIcon')" :title="t('ftue.calendarIcon')"/>
-        </span>
-        </template>
-      </sync-card>
-    </form>
-  </div>
-  <div class="buttons">
-    <secondary-button
-      class="btn-back"
-      :title="t('label.back')"
-      v-if="hasPreviousStep"
-      :disabled="isLoading"
-      @click="previousStep()"
-    >{{ t('label.back') }}
-    </secondary-button>
-    <primary-button
-      class="btn-continue"
-      :aria-label="continueTitle"
-      v-if="hasNextStep"
-      @click="onSubmit()"
-      :tooltip="!selectedCount ? t('ftue.oneCalendarRequired') : null"
-      :disabled="isLoading || !selectedCount"
-    >
-      {{ t('label.continue') }}
-    </primary-button>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import {
@@ -100,6 +66,40 @@ const onSubmit = async () => {
 
 </script>
 
+<template>
+  <div class="content">
+    <form class="form" autocomplete="off" autofocus @submit.prevent @keyup.enter="onSubmit">
+      <sync-card class="sync-card" v-model="calendars" :title="t('label.calendar', 2)">
+        <template v-slot:icon>
+        <span class="icon-calendar">
+          <img src="@/assets/svg/icons/calendar.svg" :alt="t('ftue.calendarIcon')" :title="t('ftue.calendarIcon')"/>
+        </span>
+        </template>
+      </sync-card>
+    </form>
+  </div>
+  <div class="buttons">
+    <secondary-button
+      class="btn-back"
+      :title="t('label.back')"
+      v-if="hasPreviousStep"
+      :disabled="isLoading"
+      @click="previousStep()"
+    >{{ t('label.back') }}
+    </secondary-button>
+    <primary-button
+      class="btn-continue"
+      :aria-label="continueTitle"
+      v-if="hasNextStep"
+      @click="onSubmit()"
+      :tooltip="!selectedCount ? t('ftue.oneCalendarRequired') : null"
+      :disabled="isLoading || !selectedCount"
+    >
+      {{ t('label.continue') }}
+    </primary-button>
+  </div>
+</template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
index 0a1a6a1d..6f958186 100644
--- a/frontend/src/components/FTUE/SetupSchedule.vue
+++ b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -1,54 +1,3 @@
-<template>
-  <div class="content">
-    <form ref="formRef" autocomplete="off" autofocus @submit.prevent @keyup.enter="onSubmit">
-      <div class="column">
-        <text-input name="scheduleName" v-model="schedule.name" required>{{ t('ftue.scheduleName') }}</text-input>
-        <div class="pair">
-        <text-input type="time" name="startTime" v-model="schedule.startTime" required>{{ t('label.startTime') }}</text-input>
-        <text-input type="time" name="endTime" v-model="schedule.endTime" required>{{ t('label.endTime') }}</text-input>
-        </div>
-        <bubble-select class="bubbleSelect" :options="scheduleDayOptions" v-model="schedule.days" />
-      </div>
-      <div class="column">
-        <select-input name="calendar" v-model="schedule.calendar" :options="calendarOptions" required>
-          {{ t('label.selectCalendar') }}
-        </select-input>
-        <select-input name="duration" v-model="schedule.duration" :options="durationOptions" required>
-          {{ t('label.slotLength') }}
-        </select-input>
-        <div class="scheduleInfo">{{
-            t('text.recipientsCanScheduleBetween', {
-              duration: duration,
-              earliest: '24 hours',
-              farthest: '2 weeks',
-            })
-          }}
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="buttons">
-    <secondary-button
-      class="btn-back"
-      :title="t('label.back')"
-      v-if="hasPreviousStep"
-      :disabled="isLoading"
-      @click="previousStep()"
-    >
-      {{ t('label.back') }}
-    </secondary-button>
-    <primary-button
-      class="btn-continue"
-      :title="t('label.continue')"
-      v-if="hasNextStep"
-      @click="onSubmit()"
-      :disabled="isLoading"
-    >
-      {{ t('label.continue') }}
-    </primary-button>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, inject, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
@@ -178,6 +127,57 @@ onMounted(async () => {
 
 </script>
 
+<template>
+  <div class="content">
+    <form ref="formRef" autocomplete="off" autofocus @submit.prevent @keyup.enter="onSubmit">
+      <div class="column">
+        <text-input name="scheduleName" v-model="schedule.name" required>{{ t('ftue.scheduleName') }}</text-input>
+        <div class="pair">
+        <text-input type="time" name="startTime" v-model="schedule.startTime" required>{{ t('label.startTime') }}</text-input>
+        <text-input type="time" name="endTime" v-model="schedule.endTime" required>{{ t('label.endTime') }}</text-input>
+        </div>
+        <bubble-select class="bubbleSelect" :options="scheduleDayOptions" v-model="schedule.days" />
+      </div>
+      <div class="column">
+        <select-input name="calendar" v-model="schedule.calendar" :options="calendarOptions" required>
+          {{ t('label.selectCalendar') }}
+        </select-input>
+        <select-input name="duration" v-model="schedule.duration" :options="durationOptions" required>
+          {{ t('label.slotLength') }}
+        </select-input>
+        <div class="scheduleInfo">{{
+            t('text.recipientsCanScheduleBetween', {
+              duration: duration,
+              earliest: '24 hours',
+              farthest: '2 weeks',
+            })
+          }}
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="buttons">
+    <secondary-button
+      class="btn-back"
+      :title="t('label.back')"
+      v-if="hasPreviousStep"
+      :disabled="isLoading"
+      @click="previousStep()"
+    >
+      {{ t('label.back') }}
+    </secondary-button>
+    <primary-button
+      class="btn-continue"
+      :title="t('label.continue')"
+      v-if="hasNextStep"
+      @click="onSubmit()"
+      :disabled="isLoading"
+    >
+      {{ t('label.continue') }}
+    </primary-button>
+  </div>
+</template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/tbpro/elements/SyncCard.vue b/frontend/src/tbpro/elements/SyncCard.vue
index 3e6e19e6..6e758c02 100644
--- a/frontend/src/tbpro/elements/SyncCard.vue
+++ b/frontend/src/tbpro/elements/SyncCard.vue
@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CalendarItem } from '@/models';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+
+const { t } = useI18n();
+const model = defineModel<CalendarItem[]>();
+
+const selected = computed(() => model.value.filter((item) => item.checked).length);
+const selectAll = () => {
+  model.value = model.value.map((item) => ({
+    ...item,
+    checked: true,
+  }));
+};
+
+// component properties
+interface Props {
+  title: string;
+};
+defineProps<Props>();
+</script>
+
 <template>
   <div class="wrapper">
     <div class="header">
@@ -25,30 +49,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { CalendarItem } from '@/models';
-import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
-
-const { t } = useI18n();
-const model = defineModel<CalendarItem[]>();
-
-const selected = computed(() => model.value.filter((item) => item.checked).length);
-const selectAll = () => {
-  model.value = model.value.map((item) => ({
-    ...item,
-    checked: true,
-  }));
-};
-
-// component properties
-interface Props {
-  title: string;
-};
-defineProps<Props>();
-</script>
-
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 
diff --git a/frontend/src/tbpro/elements/ToolTip.vue b/frontend/src/tbpro/elements/ToolTip.vue
index 00cb3629..cbcdd277 100644
--- a/frontend/src/tbpro/elements/ToolTip.vue
+++ b/frontend/src/tbpro/elements/ToolTip.vue
@@ -1,18 +1,3 @@
-<template>
-  <div class="tooltip" :aria-label="alt">
-    <div class="tooltip-container">
-      <div class="tooltip-body">
-        <slot></slot>
-      </div>
-      <svg class="beak" :class="position" width="28" height="6" viewBox="0 0 28 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g>
-          <path d="M15.4142 4.58579C14.6332 5.36683 13.3668 5.36683 12.5858 4.58579L8 0L20 0L15.4142 4.58579Z" fill="currentColor"/>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 // component properties
 import { TooltipPosition } from '@/definitions';
@@ -28,6 +13,21 @@ withDefaults(defineProps<Props>(), {
 })
 </script>
 
+<template>
+  <div class="tooltip" :aria-label="alt">
+    <div class="tooltip-container">
+      <div class="tooltip-body">
+        <slot></slot>
+      </div>
+      <svg class="beak" :class="position" width="28" height="6" viewBox="0 0 28 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path d="M15.4142 4.58579C14.6332 5.36683 13.3668 5.36683 12.5858 4.58579L8 0L20 0L15.4142 4.58579Z" fill="currentColor"/>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 .tooltip {
   position: absolute;

From d3b3acf4a4801af90c7e7b644034ffabde90ddd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Fri, 30 Aug 2024 14:03:02 +0200
Subject: [PATCH 8/8] =?UTF-8?q?=E2=9E=95=20Refactor=20constants=20and=20ad?=
 =?UTF-8?q?d=20durations=20constant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CalendarQalendar.vue      |  6 +++---
 frontend/src/components/FTUE/SetupSchedule.vue    |  6 +++---
 frontend/src/components/ScheduleCreation.vue      |  7 ++++---
 frontend/src/definitions.ts                       | 15 +++++++++++----
 frontend/src/views/PostLoginView.vue              |  6 +++---
 .../src/views/errors/NotAuthenticatedView.vue     |  4 ++--
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index 3395ed9d..3a5d7177 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -8,7 +8,7 @@ import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
   ColorSchemes,
   DateFormatStrings,
-  defaultSlotDuration,
+  DEFAULT_SLOT_DURATION,
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
@@ -76,7 +76,7 @@ const emit = defineEmits(['daySelected', 'eventSelected', 'dateChange']);
 const timeSlotDuration = computed(() => {
   // Duration on slots are fixed, so grab the first one.
   // This is the same data on schedule.slot_duration, but we never actually pull that info down to the frontend.
-  const duration = fixedDuration.value ?? defaultSlotDuration;
+  const duration = fixedDuration.value ?? DEFAULT_SLOT_DURATION;
   if (duration <= 15) {
     return qalendarSlotDurations['15'];
   }
@@ -92,7 +92,7 @@ const timeSlotDuration = computed(() => {
  * @type {ComputedRef<number>}
  */
 const timeSlotHeight = computed(() => {
-  const duration = fixedDuration.value ?? defaultSlotDuration;
+  const duration = fixedDuration.value ?? DEFAULT_SLOT_DURATION;
   if (duration >= 15) {
     return 40;
   }
diff --git a/frontend/src/components/FTUE/SetupSchedule.vue b/frontend/src/components/FTUE/SetupSchedule.vue
index 6f958186..a84c84d9 100644
--- a/frontend/src/components/FTUE/SetupSchedule.vue
+++ b/frontend/src/components/FTUE/SetupSchedule.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { DateFormatStrings, defaultSlotDuration } from '@/definitions';
+import { DateFormatStrings, DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS } from '@/definitions';
 import { useI18n } from 'vue-i18n';
 import { useFTUEStore } from '@/stores/ftue-store';
 import { useUserStore } from '@/stores/user-store';
@@ -37,7 +37,7 @@ const calendarOptions = computed<SelectOption[]>(() => connectedCalendars.value.
   label: calendar.title,
   value: calendar.id,
 })));
-const durationOptions: SelectOption[] = [15, 30, 45, 60, 75, 90].map((min) => ({
+const durationOptions: SelectOption[] = SLOT_DURATION_OPTIONS.map((min) => ({
   label: `${min} min`,
   value: min,
 }));
@@ -53,7 +53,7 @@ const schedule = ref({
   calendar: 0,
   startTime: '09:00',
   endTime: '17:00',
-  duration: defaultSlotDuration,
+  duration: DEFAULT_SLOT_DURATION,
   days: [1, 2, 3, 4, 5],
   details: '',
 });
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index 63ff0d5e..3912ba26 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
-  DateFormatStrings, defaultSlotDuration, EventLocationType, MeetingLinkProviderType, ScheduleCreationState,
+  DEFAULT_SLOT_DURATION, SLOT_DURATION_OPTIONS,
+  DateFormatStrings, EventLocationType, MeetingLinkProviderType, ScheduleCreationState,
 } from '@/definitions';
 import { Calendar, Schedule, Slot, ScheduleAppointment, Error } from "@/models";
 import {
@@ -91,7 +92,7 @@ const defaultSchedule: Schedule = {
   earliest_booking: 1440,
   farthest_booking: 20160,
   weekdays: [1, 2, 3, 4, 5],
-  slot_duration: defaultSlotDuration,
+  slot_duration: DEFAULT_SLOT_DURATION,
   meeting_link_provider: MeetingLinkProviderType.None,
   booking_confirmation: true,
 };
@@ -192,7 +193,7 @@ const farthestOptions = {};
 });
 
 const durationOptions = {};
-[15, 30, 45, 60, 75, 90].forEach((duration) => {
+SLOT_DURATION_OPTIONS.forEach((duration) => {
   durationOptions[duration] = t('units.minutes', { value: duration });
 });
 
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 7f40d284..1f2d92c6 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -10,10 +10,16 @@ export enum DateFormatStrings {
   Display24Hour = 'HH:mm',
 }
 
+/**
+ * Defined durations in minutes for scheduled time slots
+ */
+export const SLOT_DURATION_OPTIONS = [15, 30, 45, 60, 75, 90];
+
 /**
  * The amount of time in minutes a schedule's slot duration will default to
+ * Must be a value from SLOT_DURATION_OPTIONS
  */
-export const defaultSlotDuration = 30;
+export const DEFAULT_SLOT_DURATION = 30;
 
 /**
  * Appointment subscriber levels
@@ -191,7 +197,7 @@ export enum AlertSchemes {
 /**
  * Used as the session storage key for the location the user wanted to go to before logging in.
  */
-export const loginRedirectKey = 'loginRedirect';
+export const LOGIN_REDIRECT_KEY = 'loginRedirect';
 
 /**
  * Data types for table row items
@@ -280,17 +286,18 @@ export default {
   CalendarProviders,
   ColorSchemes,
   DateFormatStrings,
-  defaultSlotDuration,
+  DEFAULT_SLOT_DURATION,
   EventLocationType,
   ExternalConnectionProviders,
   FtueStep,
   InviteStatus,
-  loginRedirectKey,
+  LOGIN_REDIRECT_KEY,
   MeetingLinkProviderType,
   MetricEvents,
   ModalStates,
   ScheduleCreationState,
   SettingsSections,
+  SLOT_DURATION_OPTIONS,
   SubscriberLevels,
   TableDataButtonType,
   TableDataType,
diff --git a/frontend/src/views/PostLoginView.vue b/frontend/src/views/PostLoginView.vue
index ad166236..cad07b70 100644
--- a/frontend/src/views/PostLoginView.vue
+++ b/frontend/src/views/PostLoginView.vue
@@ -2,7 +2,7 @@
 import { inject, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
-import { loginRedirectKey } from '@/definitions';
+import { LOGIN_REDIRECT_KEY } from '@/definitions';
 import { callKey } from '@/keys';
 
 const route = useRoute();
@@ -18,8 +18,8 @@ const isFxaAuth = computed(() => import.meta.env?.VITE_AUTH_SCHEME === 'fxa');
 
 onMounted(async () => {
   // Retrieve and remove temp login redirect location
-  const redirectTo = window.sessionStorage?.getItem(loginRedirectKey);
-  window.sessionStorage?.removeItem(loginRedirectKey);
+  const redirectTo = window.sessionStorage?.getItem(LOGIN_REDIRECT_KEY);
+  window.sessionStorage?.removeItem(LOGIN_REDIRECT_KEY);
   // Remove any ftue steps on new login
   window.localStorage?.removeItem('tba/ftue');
 
diff --git a/frontend/src/views/errors/NotAuthenticatedView.vue b/frontend/src/views/errors/NotAuthenticatedView.vue
index 6a8a8e1e..c8ed2976 100644
--- a/frontend/src/views/errors/NotAuthenticatedView.vue
+++ b/frontend/src/views/errors/NotAuthenticatedView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import { loginRedirectKey } from '@/definitions';
+import { LOGIN_REDIRECT_KEY } from '@/definitions';
 import ArtInvalidLink from '@/elements/arts/ArtInvalidLink.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 
@@ -11,7 +11,7 @@ const router = useRouter();
 
 const goToLogin = () => {
   // Save their intended destination!
-  window.sessionStorage?.setItem(loginRedirectKey, route.fullPath);
+  window.sessionStorage?.setItem(LOGIN_REDIRECT_KEY, route.fullPath);
   router.push('/login');
 };