From 2ab14b128acef0c6d064b66e0b00bdf85f74c354 Mon Sep 17 00:00:00 2001
From: Andreas <mail@devmount.de>
Date: Fri, 26 Jul 2024 10:51:19 +0200
Subject: [PATCH] Components elements TypeScript (#577)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ➕ Add types to elements components

* 🔨 Fix optional type properties

* 🔨 Fix data table count and bg coloring

* ➕ Add types to InviteCodePanelView

* 👕 Refactor enum members to PascalCase

* ➕ Add types to SubscriberPanelView

* ➕ Add types to WaitingListPanelView

* 🔨 Fix type order and default argument
---
 frontend/src/App.vue                          |   6 +-
 frontend/src/assets/styles/main.css           |  11 +-
 frontend/src/components/CalendarMiniMonth.vue |   6 +-
 frontend/src/components/CalendarQalendar.vue  |   3 +-
 frontend/src/components/DataTable.vue         |   2 +-
 frontend/src/composables/dayjs.ts             |  10 +-
 frontend/src/definitions.ts                   |  35 ++--
 frontend/src/elements/AlertBox.vue            |  66 ++++----
 frontend/src/elements/AppointmentGridItem.vue |  66 ++++----
 frontend/src/elements/AppointmentListItem.vue |  40 +++--
 frontend/src/elements/BubbleSelect.vue        |  23 ++-
 frontend/src/elements/CautionButton.vue       |  28 ++--
 frontend/src/elements/DropDown.vue            |  18 +-
 frontend/src/elements/EventPopup.vue          |  80 ++++-----
 .../src/elements/GoogleCalendarButton.vue     |  15 +-
 frontend/src/elements/ListPagination.vue      |  64 +++----
 frontend/src/elements/NavBarItem.vue          |  19 ++-
 frontend/src/elements/PrimaryButton.vue       |  59 +++----
 frontend/src/elements/SecondaryButton.vue     |  59 +++----
 frontend/src/elements/SiteNotification.vue    |  20 ++-
 frontend/src/elements/SnackishBar.vue         |  22 +--
 frontend/src/elements/SwitchToggle.vue        |  69 ++++----
 frontend/src/elements/TextButton.vue          |  63 +++----
 frontend/src/elements/TextInput.vue           |  38 ++---
 frontend/src/elements/ToolTip.vue             |  15 +-
 frontend/src/elements/UserAvatar.vue          |  14 +-
 .../src/elements/calendar/CalendarEvent.vue   |   6 +-
 .../calendar/CalendarEventPlaceholder.vue     |   8 +-
 .../calendar/CalendarEventPreview.vue         |   6 +-
 .../elements/calendar/CalendarEventRemote.vue |   6 +-
 .../calendar/CalendarEventScheduled.vue       |   6 +-
 .../calendar/CalendarMiniMonthDay.vue         |  18 +-
 frontend/src/elements/home/InfoBox.vue        |   2 +-
 frontend/src/keys.ts                          |  16 +-
 frontend/src/models.ts                        |  63 +++++--
 frontend/src/views/AppointmentsView.vue       |  14 +-
 frontend/src/views/CalendarView.vue           |  34 ++--
 frontend/src/views/ContactView.vue            |  21 +--
 .../src/views/admin/InviteCodePanelView.vue   | 158 +++++++++---------
 .../src/views/admin/SubscriberPanelView.vue   | 146 ++++++++--------
 .../src/views/admin/WaitingListPanelView.vue  |  31 ++--
 41 files changed, 742 insertions(+), 644 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 46732d36f..a4050ac6e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -47,7 +47,7 @@ import { useAppointmentStore } from '@/stores/appointment-store';
 import { useScheduleStore } from '@/stores/schedule-store';
 import RouteNotFoundView from '@/views/errors/RouteNotFoundView.vue';
 import NotAuthenticatedView from '@/views/errors/NotAuthenticatedView.vue';
-import { callKey } from '@/keys';
+import { callKey, refreshKey } from '@/keys';
 
 // component constants
 const currentUser = useUserStore(); // data: { username, email, name, level, timezone, id }
@@ -164,6 +164,8 @@ const getDbData = async () => {
   }
 };
 
-// provide refresh functions for components
+// Deprecated - Please use refreshKey, as it's typed!
 provide('refresh', getDbData);
+// provide refresh functions for components
+provide(refreshKey, getDbData);
 </script>
diff --git a/frontend/src/assets/styles/main.css b/frontend/src/assets/styles/main.css
index 1a4449b73..20509aa9b 100644
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -149,18 +149,18 @@
 
 /* custom data table with wrapper */
 .data-table {
-  @apply rounded-xl w-full border py-2 border-gray-100 bg-white text-sm shadow-sm dark:border-gray-500 dark:bg-gray-700 mb-4 ml-auto mr-0;
+  @apply rounded-xl w-full border py-2 border-gray-200 bg-gray-100 text-sm shadow-sm dark:border-gray-500 dark:bg-gray-700 mb-4 ml-auto mr-0;
 
   table {
-    @apply w-full table-auto border-collapse bg-white text-sm shadow-sm dark:bg-gray-600;
+    @apply w-full table-auto border-collapse text-sm;
   }
 
   thead, tfoot {
-    @apply border-gray-200 bg-gray-100 dark:border-gray-500 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
+    @apply text-gray-600 dark:text-gray-300;
   }
 
   th {
-    @apply px-4 text-left font-semibold border-gray-200 dark:border-gray-500;
+    @apply px-4 text-left font-semibold;
   }
   thead th {
     @apply pb-4 pt-2;
@@ -171,6 +171,9 @@
   td {
     @apply border-y border-gray-200 p-4 dark:border-gray-500;
   }
+  tbody td {
+    @apply bg-white dark:bg-gray-700;
+  }
 }
 
 /* Force First Time User Experience to be different from the rest of the site */
diff --git a/frontend/src/components/CalendarMiniMonth.vue b/frontend/src/components/CalendarMiniMonth.vue
index e93c73706..77832c3f2 100644
--- a/frontend/src/components/CalendarMiniMonth.vue
+++ b/frontend/src/components/CalendarMiniMonth.vue
@@ -53,7 +53,6 @@ import {
   IconChevronLeft,
   IconChevronRight,
 } from '@tabler/icons-vue';
-import { appointmentState } from '@/definitions';
 import { dayjsKey } from "@/keys";
 
 // component constants
@@ -121,10 +120,7 @@ const eventsByDate = (d) => {
     return props.placeholder
       ? events.value[key].filter((e) => dj(e.start).isAfter(dj()))
       : events.value[key].filter(
-        (e) => (dj(e.start).add(e.duration, 'minutes').isAfter(dj()) && e.status === appointmentState.pending)
-            || (e.attendee && e.status === appointmentState.pending)
-            || e.remote
-            || e.preview,
+        (e) => (dj(e.start).add(e.duration, 'minutes').isAfter(dj())) || e.remote || e.preview,
       );
   }
   return [];
diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
index a4f7e402f..260f2be49 100644
--- a/frontend/src/components/CalendarQalendar.vue
+++ b/frontend/src/components/CalendarQalendar.vue
@@ -6,7 +6,6 @@ import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
 import CalendarEvent from '@/elements/calendar/CalendarEvent.vue';
 import {
-  appointmentState,
   bookingStatus,
   ColorSchemes,
   dateFormatStrings,
@@ -202,7 +201,7 @@ const calendarEvents = computed(() => {
       customData: {
         attendee: null,
         slot_status: null,
-        booking_status: appointmentState.booked,
+        booking_status: bookingStatus.booked,
         calendar_title: event.calendar_title,
         calendar_color: event.calendar_color,
         duration: event.duration,
diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue
index 392470db8..b7495de66 100644
--- a/frontend/src/components/DataTable.vue
+++ b/frontend/src/components/DataTable.vue
@@ -2,7 +2,7 @@
   <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">{{ paginatedDataList.length }}</span> {{ dataName }}
+        <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">
diff --git a/frontend/src/composables/dayjs.ts b/frontend/src/composables/dayjs.ts
index dc748b0db..bed7cccc5 100644
--- a/frontend/src/composables/dayjs.ts
+++ b/frontend/src/composables/dayjs.ts
@@ -13,7 +13,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import weekday from 'dayjs/plugin/weekday';
 import 'dayjs/locale/de';
-import { dayjsKey } from '@/keys';
+import { dayjsKey, durationHumanizedKey } from '@/keys';
 
 export type IsoWeekday = {
   iso: number,
@@ -42,10 +42,10 @@ export default function useDayJS(app: App<Element>, locale: string) {
   app.provide(dayjsKey, dayjs);
   app.provide('tzGuess', dayjs.tz.guess());
 
-  const hDuration = (m: number): string => ((m < 60)
-    ? dayjs.duration(m, 'minutes').humanize()
-    : dayjs.duration(m / 60, 'hours').humanize());
-  app.provide('hDuration', hDuration);
+  const durationHumanized = (minutes: number): string => ((minutes < 60)
+    ? dayjs.duration(minutes, 'minutes').humanize()
+    : dayjs.duration(minutes / 60, 'hours').humanize());
+  app.provide(durationHumanizedKey, durationHumanized);
 
   // locale aware first day of week
   const firstDayOfWeek = dayjs.localeData().firstDayOfWeek();
diff --git a/frontend/src/definitions.ts b/frontend/src/definitions.ts
index 39f113be6..798ba3f2a 100644
--- a/frontend/src/definitions.ts
+++ b/frontend/src/definitions.ts
@@ -87,18 +87,6 @@ export const bookingCalendarViews = {
   invalid: 12,
 };
 
-/**
- * Available appointment states
- * @enum
- * @readonly
- */
-// available appointment views - This doesn't align with anything anymore!
-export const appointmentState = {
-  booked: 1,
-  pending: 2,
-  past: 3,
-};
-
 /**
  * Booking status for slots. This mirrors models.BookingStatus on the backend
  * @enum
@@ -110,9 +98,19 @@ export const bookingStatus = {
   booked: 3,
 };
 
+/**
+ * Status to indicate if an invite code ist still valid or no longer valid
+ */
+export enum InviteStatus {
+  Active = 1,
+  Revoked = 2,
+};
+
 // available appointment views
 export const appointmentViews = {
-  ...appointmentState,
+  booked: 1,
+  pending: 2,
+  past: 3,
   all: 4,
 };
 
@@ -215,11 +213,11 @@ export const modalStates = {
  * @enum
  * @readonly
  */
-export const alertSchemes = {
-  error: 1, // Alert indicates something's gone wrong
-  warning: 2, // Alert indicates something important
-  success: 3, // Alert indicates something's gone right
-  info: 4, // Alert indicates some neutral information
+export enum AlertSchemes {
+  Error = 1, // Alert indicates something's gone wrong
+  Warning = 2, // Alert indicates something important
+  Success = 3, // Alert indicates something's gone right
+  Info = 4, // Alert indicates some neutral information
 };
 
 /**
@@ -305,7 +303,6 @@ export const waitingListAction = {
 
 export default {
   subscriberLevels,
-  appointmentState,
   appointmentViews,
   bookingCalendarViews,
   calendarViews,
diff --git a/frontend/src/elements/AlertBox.vue b/frontend/src/elements/AlertBox.vue
index 1967b65b6..7d4ee0c3d 100644
--- a/frontend/src/elements/AlertBox.vue
+++ b/frontend/src/elements/AlertBox.vue
@@ -1,22 +1,45 @@
+<script setup lang="ts">
+import { IconX } from '@tabler/icons-vue';
+import { AlertSchemes } from '@/definitions';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  title?: string; // flag showing this event as busy and non-selectable
+  canClose?: boolean; // flag for making this alert closable
+  scheme?: AlertSchemes; // flag, are we in month view?
+};
+withDefaults(defineProps<Props>(), {
+  canClose: true,
+  scheme: AlertSchemes.Error,
+})
+
+const emit = defineEmits(['close']);
+
+</script>
+
 <template>
 <div
   class="flex items-center p-2 leading-none text-white shadow-md shadow-black/30 dark:shadow-lg lg:inline-flex lg:rounded-xl"
   role="alert"
   :class="{
-    'bg-rose-600 dark:bg-rose-900': scheme === alertSchemes.error,
-    'bg-orange-400 dark:bg-orange-700': scheme === alertSchemes.warning,
-    'bg-green-400 dark:bg-green-700': scheme === alertSchemes.success,
-    'bg-teal-400 dark:bg-teal-700': scheme === alertSchemes.info,
+    'bg-rose-600 dark:bg-rose-900': scheme === AlertSchemes.Error,
+    'bg-orange-400 dark:bg-orange-700': scheme === AlertSchemes.Warning,
+    'bg-green-400 dark:bg-green-700': scheme === AlertSchemes.Success,
+    'bg-teal-400 dark:bg-teal-700': scheme === AlertSchemes.Info,
   }"
 >
-  <span class="mr-3 flex rounded-full px-2 py-1 text-center text-xs font-bold uppercase"
+  <span
+    v-if="title"
+    class="mr-3 flex rounded-full px-2 py-1 text-center text-xs font-bold uppercase"
     :class="{
-      'bg-rose-500 dark:bg-rose-800': scheme === alertSchemes.error,
-      'bg-orange-500 dark:bg-orange-800': scheme === alertSchemes.warning,
-      'bg-green-500 dark:bg-green-800': scheme === alertSchemes.success,
-      'bg-teal-500 dark:bg-teal-800': scheme === alertSchemes.info,
+      'bg-rose-500 dark:bg-rose-800': scheme === AlertSchemes.Error,
+      'bg-orange-500 dark:bg-orange-800': scheme === AlertSchemes.Warning,
+      'bg-green-500 dark:bg-green-800': scheme === AlertSchemes.Success,
+      'bg-teal-500 dark:bg-teal-800': scheme === AlertSchemes.Info,
     }"
-        v-if="title"
   >
     {{ title }}
   </span>
@@ -28,26 +51,3 @@
   </span>
 </div>
 </template>
-
-<script setup>
-import { IconX } from '@tabler/icons-vue';
-import { alertSchemes } from '@/definitions';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-defineProps({
-  title: String,
-  canClose: {
-    type: Boolean,
-    default: true,
-  },
-  scheme: {
-    type: Number,
-    default: alertSchemes.error,
-  },
-});
-
-const emit = defineEmits(['close']);
-
-</script>
diff --git a/frontend/src/elements/AppointmentGridItem.vue b/frontend/src/elements/AppointmentGridItem.vue
index 216683655..2feaa9cb9 100644
--- a/frontend/src/elements/AppointmentGridItem.vue
+++ b/frontend/src/elements/AppointmentGridItem.vue
@@ -1,3 +1,36 @@
+<script setup lang="ts">
+import { bookingStatus } from '@/definitions';
+import { inject, computed } from 'vue';
+import { keyByValue, timeFormat } from '@/utils';
+import { useI18n } from 'vue-i18n';
+import { Appointment } from '@/models';
+
+// icons
+import {
+  IconBulb,
+  IconCalendar,
+  IconClock,
+} from '@tabler/icons-vue';
+import { dayjsKey, paintBackgroundKey } from "@/keys";
+
+// component constants
+const { t } = useI18n();
+const paintBackground = inject(paintBackgroundKey);
+const dj = inject(dayjsKey);
+
+// component properties
+interface Props {
+  appointment: Appointment; // appointment to show details for
+};
+const props = defineProps<Props>();
+
+// true if an appointment from the past was given
+const isPast = computed(() => props.appointment.slots[0].start < dj());
+
+// true if a pending appointment was given
+const isPending = computed(() => props.appointment.slots[0].booking_status === bookingStatus.requested);
+</script>
+
 <template>
   <div
     class="rounded border-l-8 border-sky-400"
@@ -7,7 +40,7 @@
     }"
     :style="{ borderColor: appointment.calendar_color }"
     @mouseover="el => !isPast ? paintBackground(el, appointment.calendar_color, '22') : null"
-    @mouseout="el => !isPast ? paintBackground(el, appointment.calendar_color, _, true) : null"
+    @mouseout="el => !isPast ? paintBackground(el, appointment.calendar_color, undefined, true) : null"
   >
     <div
       class="flex h-full flex-col gap-1 rounded-r border-y-2 border-r-2 border-solid border-sky-400 px-4 py-3"
@@ -33,34 +66,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { appointmentState, bookingStatus } from '@/definitions';
-import { inject, computed } from 'vue';
-import { keyByValue, timeFormat } from '@/utils';
-import { useI18n } from 'vue-i18n';
-
-// icons
-import {
-  IconBulb,
-  IconCalendar,
-  IconClock,
-} from '@tabler/icons-vue';
-import { dayjsKey } from "@/keys";
-
-// component constants
-const { t } = useI18n();
-const paintBackground = inject('paintBackground');
-const dj = inject(dayjsKey);
-
-// component properties
-const props = defineProps({
-  appointment: Object, // appointment to show details for
-});
-
-// true if an appointment from the past was given
-const isPast = computed(() => props.appointment.status === appointmentState.past);
-
-// true if a pending appointment was given
-const isPending = computed(() => props.appointment.status === appointmentState.pending);
-</script>
diff --git a/frontend/src/elements/AppointmentListItem.vue b/frontend/src/elements/AppointmentListItem.vue
index b88dfe697..68eb8685d 100644
--- a/frontend/src/elements/AppointmentListItem.vue
+++ b/frontend/src/elements/AppointmentListItem.vue
@@ -1,3 +1,24 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { durationHumanizedKey } from '@/keys';
+import { Appointment } from '@/models';
+
+// icons
+import { IconDotsVertical } from '@tabler/icons-vue';
+
+// component constants
+const durationHumanized = inject(durationHumanizedKey);
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  appointment: Appointment; // appointment to show details for
+};
+defineProps<Props>();
+
+</script>
+
 <template>
   <div class="flex items-stretch gap-2">
     <div class="w-1.5 shrink-0 rounded-lg" :style="{ backgroundColor: appointment.calendar_color }"></div>
@@ -6,7 +27,7 @@
         <div class="overflow-x-hidden">
           <div class="truncate">{{ appointment.title }}</div>
           <div class="text-sm">
-            <span v-if="appointment.duration">{{ hDuration(appointment.duration) }}</span>
+            <span v-if="appointment.duration">{{ durationHumanized(appointment.duration) }}</span>
           </div>
         </div>
         <icon-dots-vertical class="size-6 shrink-0 fill-gray-400 stroke-gray-400 stroke-2" />
@@ -22,20 +43,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { inject } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-// icons
-import { IconDotsVertical } from '@tabler/icons-vue';
-
-// component constants
-const hDuration = inject('hDuration');
-const { t } = useI18n();
-
-// component properties
-defineProps({
-  appointment: Object, // appointment to show details for
-});
-</script>
diff --git a/frontend/src/elements/BubbleSelect.vue b/frontend/src/elements/BubbleSelect.vue
index edb9fcb05..361393673 100644
--- a/frontend/src/elements/BubbleSelect.vue
+++ b/frontend/src/elements/BubbleSelect.vue
@@ -1,15 +1,20 @@
-<script setup>
-defineProps({
-  options: Array,
-});
-const model = defineModel({ default: [] });
+<script setup lang="ts">
+import { IsoWeekdayOption } from "@/models";
+
+// component properties
+interface Props {
+  options: IsoWeekdayOption[];
+};
+defineProps<Props>();
+
+const model = defineModel<string[]>({ 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) => {
+const toggleBubble = (option: IsoWeekdayOption) => {
   // Detect what our current state is
   const val = model.value.indexOf(option.value);
 
@@ -32,7 +37,11 @@ const toggleBubble = (option) => {
 <template>
   <ul>
     <li v-for="option in options" :key="option.value">
-      <button :class="{'selected': model.indexOf(option.value) > -1}" type="button" @click="() => toggleBubble(option)">
+      <button
+        :class="{'selected': model.indexOf(option.value) > -1}"
+        type="button"
+        @click="() => toggleBubble(option)"
+      >
         {{ option.label }}
       </button>
     </li>
diff --git a/frontend/src/elements/CautionButton.vue b/frontend/src/elements/CautionButton.vue
index b411a59f4..9baa01346 100644
--- a/frontend/src/elements/CautionButton.vue
+++ b/frontend/src/elements/CautionButton.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+// icons
+import { IconCheck, IconCopy } from '@tabler/icons-vue';
+
+// component properties
+interface Props {
+  label?: string; // button text
+  icon?: 'copy'|'check'; // optional icon displayed before label
+  waiting?: boolean; // if true, spinning animation is shown instead of label
+};
+defineProps<Props>();
+</script>
+
 <template>
   <button
     class="
@@ -23,18 +36,3 @@
     </template>
   </button>
 </template>
-
-<script setup>
-// icons
-import {
-  IconCheck,
-  IconCopy,
-} from '@tabler/icons-vue';
-
-// component properties
-defineProps({
-  label: String, // button text
-  icon: String, // optional icon displayed before label
-  waiting: Boolean, // if true, spinning animation is shown instead of label
-});
-</script>
diff --git a/frontend/src/elements/DropDown.vue b/frontend/src/elements/DropDown.vue
index 3e6a23621..8aaa68b0c 100644
--- a/frontend/src/elements/DropDown.vue
+++ b/frontend/src/elements/DropDown.vue
@@ -1,3 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+
+const open = ref(false);
+const toggle = () => { open.value = !open.value; };
+const close = () => { open.value = false; };
+</script>
+
 <template>
   <div class="relative" v-on-click-outside="close">
     <div class="cursor-pointer select-none" @click="toggle">
@@ -10,12 +19,3 @@
     </transition>
   </div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-import { vOnClickOutside } from '@vueuse/components';
-
-const open = ref(false);
-const toggle = () => { open.value = !open.value; };
-const close = () => { open.value = false; };
-</script>
diff --git a/frontend/src/elements/EventPopup.vue b/frontend/src/elements/EventPopup.vue
index 656b1b7ba..2949e7b0e 100644
--- a/frontend/src/elements/EventPopup.vue
+++ b/frontend/src/elements/EventPopup.vue
@@ -1,41 +1,8 @@
-<template>
-  <div
-    class="absolute z-30 -translate-y-1/2 rounded-md bg-white p-3 shadow-lg transition-all dark:bg-gray-800"
-    :class="{
-      '-translate-x-full': position === 'left',
-      '-translate-x-1/2': position === 'top'
-    }"
-  >
-    <div
-      class="absolute size-3 rotate-45 bg-white dark:bg-gray-800"
-      :class="{
-        '-left-1.5 top-1/2 -translate-y-1/2': !position || position === 'right',
-        '-right-1.5 top-1/2 -translate-y-1/2': position === 'left',
-        '-bottom-1.5 left-1/2 -translate-x-1/2': position === 'top',
-      }"
-    ></div>
-    <div class="flex flex-col gap-2 text-gray-700 dark:text-gray-200">
-      <div class="max-w-sm truncate text-lg font-semibold text-teal-500">{{ event?.title }}</div>
-      <div class="flex items-center gap-1.5 text-xs">
-        <icon-clock class="size-4 fill-transparent stroke-teal-500 stroke-2" />
-        {{ eventDateTime }}
-      </div>
-      <div class="flex items-center gap-1.5 text-xs">
-        <icon-calendar class="size-4 fill-transparent stroke-teal-500 stroke-2" />
-        {{ event?.customData?.calendar_title }}
-      </div>
-      <div v-if="event?.customData?.attendee" class="flex items-center gap-1.5 text-xs">
-        <icon-users class="size-4 fill-transparent stroke-teal-500 stroke-2" />
-        {{ t('label.guest' , { 'count': 1 }) }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { inject, computed, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { timeFormat } from '@/utils';
+import { CalendarEvent } from '@/models';
 
 // icons
 import {
@@ -50,10 +17,11 @@ const { t } = useI18n();
 const dj = inject(dayjsKey);
 
 // component properties
-const props = defineProps({
-  event: Object, // event to show details in popup for
-  position: String, // currently supported: right, left, top
-});
+interface Props {
+  event?: CalendarEvent, // event to show details in popup for
+  position?: string, // Popup position relative to the trigger element
+};
+const props = defineProps<Props>();
 
 const { event } = toRefs(props);
 
@@ -76,3 +44,37 @@ const eventDateTime = computed(
   },
 );
 </script>
+
+<template>
+  <div
+    class="absolute z-30 -translate-y-1/2 rounded-md bg-white p-3 shadow-lg transition-all dark:bg-gray-800"
+    :class="{
+      '-translate-x-full': position === 'left',
+      '-translate-x-1/2': position === 'top'
+    }"
+  >
+    <div
+      class="absolute size-3 rotate-45 bg-white dark:bg-gray-800"
+      :class="{
+        '-left-1.5 top-1/2 -translate-y-1/2': !position || position === 'right',
+        '-right-1.5 top-1/2 -translate-y-1/2': position === 'left',
+        '-bottom-1.5 left-1/2 -translate-x-1/2': position === 'top',
+      }"
+    ></div>
+    <div class="flex flex-col gap-2 text-gray-700 dark:text-gray-200">
+      <div class="max-w-sm truncate text-lg font-semibold text-teal-500">{{ event?.title }}</div>
+      <div class="flex items-center gap-1.5 text-xs">
+        <icon-clock class="size-4 fill-transparent stroke-teal-500 stroke-2" />
+        {{ eventDateTime }}
+      </div>
+      <div class="flex items-center gap-1.5 text-xs">
+        <icon-calendar class="size-4 fill-transparent stroke-teal-500 stroke-2" />
+        {{ event?.customData?.calendar_title }}
+      </div>
+      <div v-if="event?.customData?.attendee" class="flex items-center gap-1.5 text-xs">
+        <icon-users class="size-4 fill-transparent stroke-teal-500 stroke-2" />
+        {{ t('label.guest' , { 'count': 1 }) }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/elements/GoogleCalendarButton.vue b/frontend/src/elements/GoogleCalendarButton.vue
index b0089465d..2191f9252 100644
--- a/frontend/src/elements/GoogleCalendarButton.vue
+++ b/frontend/src/elements/GoogleCalendarButton.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+// component properties
+interface Props {
+  label?: string; // button text
+};
+defineProps<Props>();
+</script>
+
 <template>
   <button
     class="
@@ -25,10 +33,3 @@
     </template>
   </button>
 </template>
-
-<script setup>
-// component properties
-defineProps({
-  label: String, // button text
-});
-</script>
diff --git a/frontend/src/elements/ListPagination.vue b/frontend/src/elements/ListPagination.vue
index 907610f7a..48774d2b5 100644
--- a/frontend/src/elements/ListPagination.vue
+++ b/frontend/src/elements/ListPagination.vue
@@ -1,40 +1,16 @@
-<template>
-  <nav class="flex flex-nowrap items-center gap-2">
-    <button @click="prev" :disabled="isFirstPage" class="btn-back" :class="{ 'text-gray-500': isFirstPage }">
-      <icon-chevron-left class="stroke-1.5 size-5" />
-    </button>
-    <div
-      v-for="(p, i) in pageCount" :key="i"
-      v-show="showPageItem(p)"
-    >
-      <div v-show="showFirstEllipsis(p)">&hellip;</div>
-      <button
-        class="btn-jump cursor-pointer px-2 py-1"
-        :class="{ 'text-gray-500': (p-1) === currentPage }"
-        v-show="showPageItemLink(p)"
-        @click="goto(p-1)"
-      >
-        {{ p }}
-      </button>
-      <div v-show="showLastEllipsis(p)">&hellip;</div>
-    </div>
-    <button @click="next" :disabled="isLastPage" class="btn-forward" :class="{ 'text-gray-500': isLastPage }">
-      <icon-chevron-right class="stroke-1.5 size-5" />
-    </button>
-  </nav>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue';
 
 // icons
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-vue';
 
 // component properties and emits
-const props = defineProps({
-  listLength: Number, // number of total items in the displayed list
-  pageSize: Number, // number of items per page
-});
+interface Props {
+  listLength: number; // number of total items in the displayed list
+  pageSize: number; // number of items per page
+};
+const props = defineProps<Props>();
+
 const emit = defineEmits(['update']);
 
 const currentPage = ref(0); // index of active page
@@ -72,3 +48,29 @@ const showFirstEllipsis = (p) => pageCount.value >= 6 && currentPage.value > 2 &
 const showPageItemLink = (p) => pageCount.value < 6 || p === 1 || isVisibleInnerPage(p);
 const showLastEllipsis = (p) => pageCount.value >= 6 && currentPage.value < pageCount.value - 3 && p === pageCount.value - 1;
 </script>
+
+<template>
+  <nav class="flex flex-nowrap items-center gap-2">
+    <button @click="prev" :disabled="isFirstPage" class="btn-back" :class="{ 'text-gray-500': isFirstPage }">
+      <icon-chevron-left class="stroke-1.5 size-5" />
+    </button>
+    <div
+      v-for="(p, i) in pageCount" :key="i"
+      v-show="showPageItem(p)"
+    >
+      <div v-show="showFirstEllipsis(p)">&hellip;</div>
+      <button
+        class="btn-jump cursor-pointer px-2 py-1"
+        :class="{ 'text-gray-500': (p-1) === currentPage }"
+        v-show="showPageItemLink(p)"
+        @click="goto(p-1)"
+      >
+        {{ p }}
+      </button>
+      <div v-show="showLastEllipsis(p)">&hellip;</div>
+    </div>
+    <button @click="next" :disabled="isLastPage" class="btn-forward" :class="{ 'text-gray-500': isLastPage }">
+      <icon-chevron-right class="stroke-1.5 size-5" />
+    </button>
+  </nav>
+</template>
diff --git a/frontend/src/elements/NavBarItem.vue b/frontend/src/elements/NavBarItem.vue
index 12e25264f..8ff7845c9 100644
--- a/frontend/src/elements/NavBarItem.vue
+++ b/frontend/src/elements/NavBarItem.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+// component properties
+interface Props {
+  active: boolean; // indicator for currently active item
+  label: string; // item text label
+  linkName: string; // name of the route link target
+};
+defineProps<Props>();
+</script>
+
 <template>
   <div
     class="group relative flex text-base font-medium"
@@ -15,12 +25,3 @@
     ></div>
   </div>
 </template>
-
-<script setup>
-// component properties
-defineProps({
-  active: Boolean, // indicator for currently active item
-  label: String, // item text label
-  linkName: String, // name of the route link target
-});
-</script>
diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
index ec950cfc8..b8ae7c18a 100644
--- a/frontend/src/elements/PrimaryButton.vue
+++ b/frontend/src/elements/PrimaryButton.vue
@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ToolTip from '@/elements/ToolTip.vue';
+
+// icons
+import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  label?: string; // button text
+  copy?: string; // text to copy to clipboard
+  waiting?: boolean; // if true, spinning animation is shown instead of label
+};
+const props = defineProps<Props>();
+
+// state for copy click
+const copied = ref(false);
+
+// copy text to clipboard
+const copyToClipboard = async () => {
+  await navigator.clipboard.writeText(props.copy);
+  copied.value = true;
+  setTimeout(() => { copied.value = false; }, 4000);
+};
+</script>
+
 <template>
   <button
     class="
@@ -32,32 +62,3 @@
     </transition>
   </button>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import ToolTip from '@/elements/ToolTip';
-
-// icons
-import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-
-// component properties
-const props = defineProps({
-  label: String, // button text
-  copy: String, // text to copy to clipboard
-  waiting: Boolean, // if true, spinning animation is shown instead of label
-});
-
-// state for copy click
-const copied = ref(false);
-
-// copy text to clipboard
-const copyToClipboard = async () => {
-  await navigator.clipboard.writeText(props.copy);
-  copied.value = true;
-  setTimeout(() => { copied.value = false; }, 4000);
-};
-</script>
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index 7d4febb80..389cb8c41 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ToolTip from '@/elements/ToolTip.vue';
+
+// icons
+import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  label?: string; // button text
+  copy?: string; // text to copy to clipboard
+  waiting?: boolean; // if true, spinning animation is shown instead of label
+};
+const props = defineProps<Props>();
+
+// state for copy click
+const copied = ref(false);
+
+// copy text to clipboard
+const copyToClipboard = async () => {
+  await navigator.clipboard.writeText(props.copy);
+  copied.value = true;
+  setTimeout(() => { copied.value = false; }, 4000);
+};
+</script>
+
 <template>
   <button
     class="
@@ -32,32 +62,3 @@
     </transition>
   </button>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import ToolTip from '@/elements/ToolTip';
-
-// icons
-import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-
-// component properties
-const props = defineProps({
-  label: String, // button text
-  copy: String, // text to copy to clipboard
-  waiting: Boolean, // if true, spinning animation is shown instead of label
-});
-
-// state for copy click
-const copied = ref(false);
-
-// copy text to clipboard
-const copyToClipboard = async () => {
-  await navigator.clipboard.writeText(props.copy);
-  copied.value = true;
-  setTimeout(() => { copied.value = false; }, 4000);
-};
-</script>
diff --git a/frontend/src/elements/SiteNotification.vue b/frontend/src/elements/SiteNotification.vue
index 29d1aef7a..38e7d85a4 100644
--- a/frontend/src/elements/SiteNotification.vue
+++ b/frontend/src/elements/SiteNotification.vue
@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { IconChevronRight } from '@tabler/icons-vue';
+
+// component properties
+interface Props {
+  title: string,
+  actionUrl: string,
+};
+defineProps<Props>();
+</script>
+
 <template>
   <a :href="actionUrl">
     <div
@@ -14,12 +25,3 @@
     </div>
   </a>
 </template>
-
-<script setup>
-import { IconChevronRight } from '@tabler/icons-vue';
-
-defineProps({
-  title: String,
-  actionUrl: String,
-});
-</script>
diff --git a/frontend/src/elements/SnackishBar.vue b/frontend/src/elements/SnackishBar.vue
index 460ec0709..3a1eb74ff 100644
--- a/frontend/src/elements/SnackishBar.vue
+++ b/frontend/src/elements/SnackishBar.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { IconInfoCircle } from '@tabler/icons-vue';
+
+// component properties
+interface Props {
+  showIcon?: boolean;
+};
+withDefaults(defineProps<Props>(), {
+  showIcon: false,
+})
+</script>
+
 <template>
   <div class="h-28 w-full rounded-xl bg-neutral-600 text-white dark:bg-gray-800 dark:text-gray-100">
     <div class="m-auto flex h-full w-8/12 flex-row items-center justify-center gap-2 text-wrap text-center text-xs leading-4 tracking-wider">
@@ -8,13 +20,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { IconInfoCircle } from '@tabler/icons-vue';
-
-defineProps({
-  showIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
diff --git a/frontend/src/elements/SwitchToggle.vue b/frontend/src/elements/SwitchToggle.vue
index c3431285b..718f1afba 100644
--- a/frontend/src/elements/SwitchToggle.vue
+++ b/frontend/src/elements/SwitchToggle.vue
@@ -1,3 +1,38 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// icons
+import { IconCircleDotFilled } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component emits
+const emit = defineEmits(['changed']);
+
+// component properties
+interface Props {
+  active: boolean; // initial toggle state
+  disabled?: boolean; // flag for making toggle non changable
+  label?: string; // input label
+  noLegend?: boolean; // hide "on" and "off" labels
+};
+const props = defineProps<Props>();
+
+// current state
+const state = ref(false);
+onMounted(() => {
+  state.value = props.active;
+});
+const toggleState = () => {
+  if (!props.disabled) {
+    state.value = !state.value;
+    emit('changed', state.value);
+  }
+};
+</script>
+
 <template>
   <div
     class="relative flex items-center justify-between"
@@ -27,37 +62,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-// icons
-import { IconCircleDotFilled } from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-
-// component emits
-const emit = defineEmits(['changed']);
-
-// component properties
-const props = defineProps({
-  active: Boolean, // initial toggle state
-  disabled: Boolean, // flag for making toggle non changable
-  label: String, // input label
-  noLegend: Boolean, // hide "on" and "off" labels
-});
-
-// current state
-const state = ref(false);
-onMounted(() => {
-  state.value = props.active;
-});
-const toggleState = () => {
-  if (!props.disabled) {
-    state.value = !state.value;
-    emit('changed', state.value);
-  }
-};
-</script>
diff --git a/frontend/src/elements/TextButton.vue b/frontend/src/elements/TextButton.vue
index fff136489..d25900e3e 100644
--- a/frontend/src/elements/TextButton.vue
+++ b/frontend/src/elements/TextButton.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ToolTip from '@/elements/ToolTip.vue';
+
+// icons
+import { IconCopy, IconClipboardCheck } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  label?: string; // button text
+  tooltip?: string, // optional tooltip
+  copy?: string; // text to copy to clipboard
+};
+const props = defineProps<Props>();
+
+// state for copy click
+const copied = ref(false);
+const hover = ref(false);
+
+// copy text to clipboard
+const copyToClipboard = async () => {
+  await navigator.clipboard.writeText(props.copy);
+  copied.value = true;
+  setTimeout(() => { copied.value = false; }, 4000);
+};
+</script>
+
 <template>
   <button
     class="
@@ -23,38 +54,8 @@
     <transition>
       <tool-tip v-show="copied" :content="t('info.copiedToClipboard')" />
     </transition>
-    <transition>
+    <transition v-if="tooltip">
       <tool-tip class="w-24" v-show="hover && tooltip && !copied" :content="tooltip" />
     </transition>
   </button>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import ToolTip from '@/elements/ToolTip';
-
-// icons
-import { IconCopy, IconClipboardCheck } from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-
-// component properties
-const props = defineProps({
-  label: String, // button text
-  tooltip: String, // optional tooltip
-  copy: String, // text to copy to clipboard
-});
-
-// state for copy click
-const copied = ref(false);
-const hover = ref(false);
-
-// copy text to clipboard
-const copyToClipboard = async () => {
-  await navigator.clipboard.writeText(props.copy);
-  copied.value = true;
-  setTimeout(() => { copied.value = false; }, 4000);
-};
-</script>
diff --git a/frontend/src/elements/TextInput.vue b/frontend/src/elements/TextInput.vue
index a8ff0d08d..f798181e9 100644
--- a/frontend/src/elements/TextInput.vue
+++ b/frontend/src/elements/TextInput.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// component properties
+const props = defineProps({
+  placeholder: String, // Textarea placeholder text
+  maxlength: Number, // text to copy to clipboard
+});
+
+// component models
+const details = defineModel<string>();
+
+// handle textarea char limit
+const charCount = computed(() => details.value.length);
+const limitIsClose = computed(() => charCount.value >= props.maxlength * 0.92);
+const limitIsReached = computed(() => charCount.value >= props.maxlength);
+
+</script>
+
 <template>
   <div class="relative">
     <textarea
@@ -18,22 +37,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
-
-// component properties
-const props = defineProps({
-  placeholder: String, // Textarea placeholder text
-  maxlength: Number, // text to copy to clipboard
-});
-
-// component models
-const details = defineModel();
-
-// handle textarea char limit
-const charCount = computed(() => details.value.length);
-const limitIsClose = computed(() => charCount.value >= props.maxlength * 0.92);
-const limitIsReached = computed(() => charCount.value >= props.maxlength);
-
-</script>
diff --git a/frontend/src/elements/ToolTip.vue b/frontend/src/elements/ToolTip.vue
index a290e3959..41c0929af 100644
--- a/frontend/src/elements/ToolTip.vue
+++ b/frontend/src/elements/ToolTip.vue
@@ -1,3 +1,11 @@
+<script setup lang="ts">
+// component properties
+interface Props {
+  content: string; // Tooltip text
+};
+defineProps<Props>();
+</script>
+
 <template>
   <div
     class="
@@ -11,10 +19,3 @@
     </svg>
   </div>
 </template>
-
-<script setup>
-// component properties
-defineProps({
-  content: String, // Tooltip text
-});
-</script>
diff --git a/frontend/src/elements/UserAvatar.vue b/frontend/src/elements/UserAvatar.vue
index b016e2c53..3a3e6ab70 100644
--- a/frontend/src/elements/UserAvatar.vue
+++ b/frontend/src/elements/UserAvatar.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { initials } from '@/utils';
+import { useUserStore } from '@/stores/user-store';
+
+const user = useUserStore();
+</script>
+
 <template>
 <div
   class="flex-center mr-4 size-12 self-center rounded-full bg-white text-lg font-normal text-white"
@@ -11,10 +18,3 @@
   </span>
 </div>
 </template>
-
-<script setup>
-import { initials } from '@/utils';
-import { useUserStore } from '@/stores/user-store';
-
-const user = useUserStore();
-</script>
diff --git a/frontend/src/elements/calendar/CalendarEvent.vue b/frontend/src/elements/calendar/CalendarEvent.vue
index 1cd4cf25b..278b60c8b 100644
--- a/frontend/src/elements/calendar/CalendarEvent.vue
+++ b/frontend/src/elements/calendar/CalendarEvent.vue
@@ -7,7 +7,7 @@ import CalendarEventPreview from '@/elements/calendar/CalendarEventPreview.vue';
 import CalendarEventRemote from '@/elements/calendar/CalendarEventRemote.vue';
 import CalendarEventScheduled from '@/elements/calendar/CalendarEventScheduled.vue';
 import EventPopup from '@/elements/EventPopup.vue';
-import { CalendarEvent } from "@/models";
+import { CalendarEvent, EventPopup as EventPopupType } from "@/models";
 import { dayjsKey } from "@/keys";
 
 const dj = inject(dayjsKey);
@@ -37,7 +37,7 @@ const isBusy = computed(() => eventData.slot_status === bookingStatus.booked);
 const emit = defineEmits(['eventSelected']);
 
 // event details
-const popup = ref({ ...initialEventPopupData });
+const popup = ref<EventPopupType>({ ...initialEventPopupData });
 const resetPopup = () => {
   popup.value = { ...initialEventPopupData };
 };
@@ -104,7 +104,7 @@ const formattedTimeRange = (eventObj: CalendarEvent) => {
         display: popup.display,
         top: popup.top,
         left: popup.left,
-        right: popup.right,
+        right: popup.right ?? 'initial',
       }"
       :event="popup.event"
       :position="popupPosition"
diff --git a/frontend/src/elements/calendar/CalendarEventPlaceholder.vue b/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
index 3094f23c7..ced7c15b8 100644
--- a/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
+++ b/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
@@ -5,10 +5,10 @@ const { t } = useI18n();
 
 // component properties
 interface Props {
-  isBusy: boolean, // flag showing this event as busy and non-selectable
-  isSelected: boolean, // flag showing if the event is currently selected by user
-  isMonthView: boolean, // flag, are we in month view?
-  label: string, // event title
+  isBusy: boolean; // flag showing this event as busy and non-selectable
+  isSelected: boolean; // flag showing if the event is currently selected by user
+  isMonthView: boolean; // flag, are we in month view?
+  label: string; // event title
 };
 defineProps<Props>();
 
diff --git a/frontend/src/elements/calendar/CalendarEventPreview.vue b/frontend/src/elements/calendar/CalendarEventPreview.vue
index f74094d19..4a8530b0e 100644
--- a/frontend/src/elements/calendar/CalendarEventPreview.vue
+++ b/frontend/src/elements/calendar/CalendarEventPreview.vue
@@ -4,9 +4,9 @@ import { CustomEventData } from "@/models";
 
 // component properties
 interface Props {
-  isMonthView: boolean, // flag, are we in month view?
-  eventData: CustomEventData, // the event data to show
-  label: string, // event title
+  isMonthView: boolean; // flag, are we in month view?
+  eventData: CustomEventData; // the event data to show
+  label: string; // event title
 };
 defineProps<Props>();
 
diff --git a/frontend/src/elements/calendar/CalendarEventRemote.vue b/frontend/src/elements/calendar/CalendarEventRemote.vue
index 72d06912d..8f5593d3f 100644
--- a/frontend/src/elements/calendar/CalendarEventRemote.vue
+++ b/frontend/src/elements/calendar/CalendarEventRemote.vue
@@ -5,9 +5,9 @@ import { CustomEventData } from "@/models";
 
 // component properties
 interface Props {
-  isMonthView: boolean, // flag, are we in month view?
-  eventData: CustomEventData, // the event data to show
-  label: string, // event title
+  isMonthView: boolean; // flag, are we in month view?
+  eventData: CustomEventData; // the event data to show
+  label: string; // event title
 };
 const props = defineProps<Props>();
 
diff --git a/frontend/src/elements/calendar/CalendarEventScheduled.vue b/frontend/src/elements/calendar/CalendarEventScheduled.vue
index a15da1735..e570474eb 100644
--- a/frontend/src/elements/calendar/CalendarEventScheduled.vue
+++ b/frontend/src/elements/calendar/CalendarEventScheduled.vue
@@ -4,9 +4,9 @@ import { CustomEventData } from "@/models";
 
 // component properties
 interface Props {
-  isMonthView: boolean, // flag, are we in month view?
-  eventData: CustomEventData, // the event data to show
-  label: string, // event title
+  isMonthView: boolean; // flag, are we in month view?
+  eventData: CustomEventData; // the event data to show
+  label: string; // event title
 };
 defineProps<Props>();
 </script>
diff --git a/frontend/src/elements/calendar/CalendarMiniMonthDay.vue b/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
index 379e22c33..1a39050f1 100644
--- a/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
+++ b/frontend/src/elements/calendar/CalendarMiniMonthDay.vue
@@ -6,15 +6,15 @@ const dj = inject(dayjsKey);
 
 // component properties
 interface Props {
-  day: string, // number of day in its month
-  isActive: boolean, // flag showing if the day belongs to active month
-  isSelected: boolean, // flag showing if the day is currently selected by user
-  isToday: boolean, // flag showing if the day is today
-  placeholder: boolean, // flag formating events as placeholder
-  hasEvents: boolean, // if true show event indicator
-  showDetails: boolean, // flag enabling event popups with details
-  popupPosition?: string, // currently supported: right, left, top
-  disabled?: boolean, // flag making this day non-selectable and inactive
+  day: string; // number of day in its month
+  isActive: boolean; // flag showing if the day belongs to active month
+  isSelected: boolean; // flag showing if the day is currently selected by user
+  isToday: boolean; // flag showing if the day is today
+  placeholder: boolean; // flag formating events as placeholder
+  hasEvents: boolean; // if true show event indicator
+  showDetails: boolean; // flag enabling event popups with details
+  popupPosition?: string; // currently supported: right, left, top
+  disabled?: boolean; // flag making this day non-selectable and inactive
 };
 defineProps<Props>();
 
diff --git a/frontend/src/elements/home/InfoBox.vue b/frontend/src/elements/home/InfoBox.vue
index 2cab50361..9c119f552 100644
--- a/frontend/src/elements/home/InfoBox.vue
+++ b/frontend/src/elements/home/InfoBox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  title: string,
+  title: string;
 };
 defineProps<Props>();
 </script>
diff --git a/frontend/src/keys.ts b/frontend/src/keys.ts
index c3cafdd6a..7d0856edb 100644
--- a/frontend/src/keys.ts
+++ b/frontend/src/keys.ts
@@ -1,6 +1,6 @@
 import { ConfigType, Dayjs, DayjsTimezone } from 'dayjs';
 import { InjectionKey } from 'vue';
-import { Fetch } from '@/models';
+import { Fetch, Refresh } from '@/models';
 
 /**
  * These are typed Symbols for use with inject/provide in VueJS
@@ -10,6 +10,18 @@ import { Fetch } from '@/models';
 type DayjsType = ((_?:ConfigType) => Dayjs) & {
   tz: DayjsTimezone
 };
-
 export const dayjsKey = Symbol('dayjs') as InjectionKey<DayjsType>;
+
+// Provides configured fetch call to our backend API
 export const callKey = Symbol('call') as InjectionKey<Fetch>;
+
+// Provides a freresh data function
+export const refreshKey = Symbol('refresh') as InjectionKey<Refresh>;
+
+// Provides functionality to paint background of event objects
+type PaintBackgroundType = (element: Event, hexColor: string, hexTransparency?: string, reset?: boolean) => string;
+export const paintBackgroundKey = Symbol('paintBackground') as InjectionKey<PaintBackgroundType>;
+
+// Provides duration data in human friendly form
+type DurationHumanizedType = (minutes: number) => string;
+export const durationHumanizedKey = Symbol('durationHumanizedKey') as InjectionKey<DurationHumanizedType>;
diff --git a/frontend/src/models.ts b/frontend/src/models.ts
index 0480fd84f..dfcf7b584 100644
--- a/frontend/src/models.ts
+++ b/frontend/src/models.ts
@@ -1,12 +1,13 @@
 import { Dayjs } from 'dayjs';
 import { UseFetchReturn } from '@vueuse/core';
+import { InviteStatus } from './definitions';
 
 export type Attendee = {
   id: number;
   email: string;
   name: string;
   timezone: string;
-}
+};
 
 export type Slot = {
   id: number;
@@ -22,7 +23,7 @@ export type Slot = {
   subscriber_id: number;
   time_updated: string;
   attendee: Attendee;
-}
+};
 
 export type Appointment = {
   id: number;
@@ -52,7 +53,7 @@ export type Appointment = {
 export type CustomEventData = {
   attendee?: Attendee;
   slot_status: number; // TODO: definitions.bookingStatus
-  booking_status: number; // TODO: definitions.appointmentState
+  booking_status: number; // TODO: definitions.bookingStatus 
   calendar_title: string;
   calendar_color: string;
   duration: number;
@@ -74,7 +75,7 @@ export type CalendarEvent = {
 };
 
 export type EventPopup = {
-  event: CalendarEvent;
+  event?: CalendarEvent;
   display: string;
   top: string|number;
   left: string|number;
@@ -133,6 +134,14 @@ export type Schedule = {
   booking_confirmation: boolean;
 };
 
+export type Invite = {
+  subscriber_id?: number;
+  code: string;
+  status: InviteStatus;
+  time_created: string;
+  time_updated: string;
+};
+
 export type User = {
   email: string;
   preferredEmail: string;
@@ -145,9 +154,10 @@ export type User = {
   accessToken: string;
   scheduleLinks: string[];
   isSetup: boolean,
-}
+};
 
 export type Subscriber = {
+  id?: number;
   username: string;
   name: string;
   email: string;
@@ -157,20 +167,45 @@ export type Subscriber = {
   avatar_url: string;
   is_setup: boolean;
   schedule_links: string[];
+  secondary_email?: string;
+  invite?: Invite;
+  time_created?: string;
+  time_deleted?: string;
+}
+
+export type WaitingListEntry = {
+  id: number;
+  email: string;
+  email_verified: boolean;
+  invite_id?: number;
+  invite?: Invite;
+  time_created?: string;
+  time_updated?: string;
 }
 
 export type Signature = {
   url: string;
-}
+};
 
 export type Error = { error: boolean|string|null };
+export type ExceptionDetail = {
+  id?: string;
+  message?: string;
+  status?: number;
+}
+export type Exception = {
+  status_code?: number;
+  detail?: { msg: string }[]|ExceptionDetail;
+  headers?: any[];
+};
 export type Token = {
   access_token: string;
   token_type: string;
-}
+};
 
 // Types and aliases used for our custom createFetch API calls and return types
 export type Fetch = (url: string) => UseFetchReturn<any> & PromiseLike<UseFetchReturn<any>>;
+export type Refresh = () => Promise<void>;
 export type BooleanResponse = UseFetchReturn<boolean>;
 export type SignatureResponse = UseFetchReturn<Signature>;
 export type SubscriberResponse = UseFetchReturn<Subscriber>;
@@ -178,22 +213,30 @@ export type TokenResponse = UseFetchReturn<Token>;
 export type AppointmentListResponse = UseFetchReturn<Appointment[]>;
 export type CalendarListResponse = UseFetchReturn<Calendar[]>;
 export type ScheduleListResponse = UseFetchReturn<Schedule[]>;
+export type InviteListResponse = UseFetchReturn<Invite[]|Exception>;
+export type WaitingListResponse = UseFetchReturn<WaitingListEntry[]|Exception>;
+export type SubscriberListResponse = UseFetchReturn<Subscriber[]|Exception>;
 export type ExternalConnectionCollectionResponse = UseFetchReturn<ExternalConnectionCollection>;
 
 // Utility types
 export type Time<T> = {
   start: T;
   end: T;
-}
+};
 export type TimeNumeric = Time<number>;
 export type TimeFormatted = Time<string>;
 
+export type IsoWeekdayOption = {
+  label: string;
+  value: string;
+};
+
 export type Coloring = {
   border?: string;
   background?: string;
-}
+};
 
 export type HTMLElementEvent = Event & {
   target: HTMLElement;
   currentTarget: HTMLElement;
-}
+};
diff --git a/frontend/src/views/AppointmentsView.vue b/frontend/src/views/AppointmentsView.vue
index 98f16cf0e..72b751205 100644
--- a/frontend/src/views/AppointmentsView.vue
+++ b/frontend/src/views/AppointmentsView.vue
@@ -207,10 +207,10 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { vOnClickOutside } from '@vueuse/components';
-import AppointmentGridItem from '@/elements/AppointmentGridItem';
-import AppointmentModal from '@/components/AppointmentModal';
-import CalendarMiniMonth from '@/components/CalendarMiniMonth';
-import TabBar from '@/components/TabBar';
+import AppointmentGridItem from '@/elements/AppointmentGridItem.vue';
+import AppointmentModal from '@/components/AppointmentModal.vue';
+import CalendarMiniMonth from '@/components/CalendarMiniMonth.vue';
+import TabBar from '@/components/TabBar.vue';
 
 // icons
 import {
@@ -222,7 +222,7 @@ import {
 } from '@tabler/icons-vue';
 import { useAppointmentStore } from '@/stores/appointment-store';
 import { storeToRefs } from 'pinia';
-import { dayjsKey } from "@/keys";
+import { dayjsKey, paintBackgroundKey } from "@/keys";
 
 // component constants
 const { t } = useI18n();
@@ -396,12 +396,12 @@ onMounted(async () => {
 });
 
 // paint elements background or reset it to transparent
-const paintBackground = (element, hexColor, hexTransparency, reset = false) => {
+const paintBackground = (element, hexColor, hexTransparency = 'ff', reset = false) => {
   if (hexColor) {
     element.currentTarget.style.backgroundColor = reset
       ? 'transparent'
       : hexColor + hexTransparency;
   }
 };
-provide('paintBackground', paintBackground);
+provide(paintBackgroundKey, paintBackground);
 </script>
diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
index 40224005f..7b23df381 100644
--- a/frontend/src/views/CalendarView.vue
+++ b/frontend/src/views/CalendarView.vue
@@ -2,7 +2,7 @@
   <div class="m-8 mt-0 flex w-full flex-col justify-center lg:flex-row">
     <alert-box
       title="Calendar Setup"
-      :scheme="alertSchemes.warning"
+      :scheme="AlertSchemes.Warning"
       v-if="connectedCalendars.length === 0 && !hideUntilRefreshed"
     >
       <i18n-t keypath="error.noConnectedCalendars" tag="label" for="error.noConnectedCalendars">
@@ -12,8 +12,7 @@
   </div>
   <!-- page content -->
   <div
-    class="mt-8 flex flex-col-reverse items-stretch justify-between gap-4 md:flex-row lg:gap-8"
-    :class="{ 'lg:mt-10': tabActive === calendarViews.month }"
+    class="mt-8 flex flex-col-reverse items-stretch justify-between gap-4 md:flex-row lg:gap-8 lg:mt-10"
   >
     <!-- main section: big calendar showing active month, week or day -->
     <calendar-qalendar
@@ -32,7 +31,7 @@
           :nav="true"
           :events="calendarEvents"
           @prev="dateNav('month', false)"
-          @next="dateNav('month')"
+          @next="dateNav('month', true)"
           @day-selected="selectDate"
         />
         <!-- appointments and events list -->
@@ -69,43 +68,41 @@
   </div>
 </template>
 
-<script setup>
-import { calendarViews, alertSchemes } from '@/definitions';
+<script setup lang="ts">
+import { AlertSchemes } from '@/definitions';
 import {
   ref, inject, computed, onMounted,
 } from 'vue';
+import { ManipulateType } from 'dayjs';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import AppointmentListItem from '@/elements/AppointmentListItem';
-import CalendarMiniMonth from '@/components/CalendarMiniMonth';
+import AppointmentListItem from '@/elements/AppointmentListItem.vue';
 import AlertBox from '@/elements/AlertBox.vue';
+import CalendarMiniMonth from '@/components/CalendarMiniMonth.vue';
+import CalendarQalendar from '@/components/CalendarQalendar.vue';
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';
 import { storeToRefs } from 'pinia';
-import CalendarQalendar from '@/components/CalendarQalendar.vue';
-import { dayjsKey } from "@/keys";
+import { dayjsKey, callKey, refreshKey } from "@/keys";
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const dj = inject(dayjsKey);
-const call = inject('call');
-const refresh = inject('refresh');
+const call = inject(callKey);
+const refresh = inject(refreshKey);
 
 const appointmentStore = useAppointmentStore();
 const calendarStore = useCalendarStore();
 const { connectedCalendars } = storeToRefs(calendarStore);
 
 // current selected date, if not in route: defaults to now
-const activeDate = ref(route.params.date ? dj(route.params.date) : dj());
+const activeDate = ref(route.params.date ? dj(route.params.date as string) : dj());
 const activeDateRange = computed(() => ({
   start: activeDate.value.startOf('month'),
   end: activeDate.value.endOf('month'),
 }));
 
-// active menu item for tab navigation of calendar views
-const tabActive = calendarViews.month;
-
 // get remote calendar data for current year
 const calendarEvents = ref([]);
 
@@ -157,10 +154,7 @@ const selectDate = async (d) => {
 };
 
 // date navigation
-const dateNav = (unit = 'auto', forward = true) => {
-  if (unit === 'auto') {
-    unit = Object.keys(calendarViews).find((key) => calendarViews[key] === tabActive.value);
-  }
+const dateNav = (unit: ManipulateType = 'month', forward = true) => {
   if (forward) {
     selectDate(activeDate.value.add(1, unit));
   } else {
diff --git a/frontend/src/views/ContactView.vue b/frontend/src/views/ContactView.vue
index 5ddfa89c4..701184bbb 100644
--- a/frontend/src/views/ContactView.vue
+++ b/frontend/src/views/ContactView.vue
@@ -4,18 +4,18 @@
     <div class="text-4xl font-light">{{ t('heading.contactRequest') }}</div>
     <div class="w-full max-w-lg">{{ t('text.contactRequestForm') }}</div>
     <alert-box
-      v-if="sendingState === alertSchemes.success"
+      v-if="sendingState === AlertSchemes.Success"
       :title="t('label.success')"
       @close="sendingState = 0"
-      :scheme="alertSchemes.success"
+      :scheme="AlertSchemes.Success"
     >
       {{ t('info.messageWasSent') }}
     </alert-box>
     <alert-box
-      v-if="sendingState === alertSchemes.error"
+      v-if="sendingState === AlertSchemes.Error"
       :title="t('label.error')"
       @close="sendingState = 0"
-      :scheme="alertSchemes.error"
+      :scheme="AlertSchemes.Error"
     >
       {{ t('info.messageWasNotSent') }}
     </alert-box>
@@ -44,12 +44,13 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { inject, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
-import { alertSchemes } from '@/definitions';
-import PrimaryButton from '@/elements/PrimaryButton';
+import { AlertSchemes } from '@/definitions';
+import { callKey } from '@/keys';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import TextInput from '@/elements/TextInput.vue';
 
@@ -59,7 +60,7 @@ import { IconSend } from '@tabler/icons-vue';
 // component constants
 const user = useUserStore();
 const { t } = useI18n();
-const call = inject('call');
+const call = inject(callKey);
 
 // form data
 const form = ref(null);
@@ -81,10 +82,10 @@ const send = async () => {
   }
   const { error, data } = await call('support').post({ topic: topic.value, details: details.value }).json();
   if (!error.value && data.value) {
-    sendingState.value = alertSchemes.success;
+    sendingState.value = AlertSchemes.Success;
     resetForm();
   } else {
-    sendingState.value = alertSchemes.error;
+    sendingState.value = AlertSchemes.Error;
   }
 };
 </script>
diff --git a/frontend/src/views/admin/InviteCodePanelView.vue b/frontend/src/views/admin/InviteCodePanelView.vue
index 09054fa41..d042eb5b1 100644
--- a/frontend/src/views/admin/InviteCodePanelView.vue
+++ b/frontend/src/views/admin/InviteCodePanelView.vue
@@ -1,84 +1,27 @@
-<template>
-  <div class="flex w-full justify-center">
-    <alert-box
-      @close="pageNotification = ''"
-      v-if="pageNotification"
-      :scheme="alertSchemes.success"
-    >
-      {{ pageNotification }}
-    </alert-box>
-    <alert-box
-      @close="pageError = ''"
-      v-if="pageError"
-    >
-      {{ pageError }}
-    </alert-box>
-  </div>
-  <admin-nav/>
-  <div v-if="displayPage">
-    <data-table
-      data-name="Invite Codes"
-      :allow-multi-select="false"
-      :data-list="filteredInvites"
-      :columns="columns"
-      :filters="filters"
-      :loading="loading"
-      @field-click="(_key, field) => revokeInvite(field.code.value)"
-    >
-      <template v-slot:footer>
-        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
-          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
-            <span>{{ t('label.amountOfCodes') }}</span>
-            <input
-              class="mx-4 w-60 rounded-md text-sm"
-              type="number"
-              v-model="generateCodeAmount"
-              :disabled="loading"
-              enterkeyhint="done"
-              @keyup.enter="generateInvites"
-            />
-          </label>
-          <primary-button
-            class="btn-generate"
-            :disabled="loading"
-            @click="generateInvites"
-            :title="t('label.generate')"
-          >
-            <icon-send/>
-            {{ t('label.generate') }}
-          </primary-button>
-        </div>
-      </template>
-
-    </data-table>
-  </div>
-  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
-    <loading-spinner/>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
-import DataTable from '@/components/DataTable.vue';
+import { AlertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
 import { useRouter } from 'vue-router';
+import { IconSend } from '@tabler/icons-vue';
+import { Invite, InviteListResponse, BooleanResponse, Exception } from "@/models";
+import { InviteStatus } from "@/definitions";
+import { dayjsKey, callKey } from "@/keys";
+import DataTable from '@/components/DataTable.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
-import { IconSend } from '@tabler/icons-vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import AdminNav from '@/elements/admin/AdminNav.vue';
-import { dayjsKey } from "@/keys";
 
 const router = useRouter();
 const { t } = useI18n();
 
-const call = inject('call');
+const call = inject(callKey);
 const dj = inject(dayjsKey);
 
-const invites = ref([]);
+const invites = ref<Invite[]>([]);
 const displayPage = ref(false);
 const generateCodeAmount = ref(null);
 const loading = ref(true);
@@ -92,7 +35,7 @@ const filteredInvites = computed(() => invites.value.map((invite) => ({
   },
   status: {
     type: tableDataType.text,
-    value: invite.status === 1 ? 'Available' : 'Revoked',
+    value: invite.status === InviteStatus.Active ? 'Available' : 'Revoked',
   },
   subscriber_id: {
     type: tableDataType.text,
@@ -110,7 +53,7 @@ const filteredInvites = computed(() => invites.value.map((invite) => ({
     type: tableDataType.button,
     buttonType: tableDataButtonType.secondary,
     value: 'Revoke',
-    disabled: invite.subscriber_id || invite.status === 2,
+    disabled: invite.subscriber_id || invite.status === InviteStatus.Revoked,
   },
 })));
 const columns = [
@@ -162,6 +105,7 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
+     * TODO: Add types when DataTable.vue is typed
      * @param selectedKey
      * @param mutableDataList
      * @returns {*}
@@ -195,13 +139,20 @@ const filters = [
     },
   },
 ];
+
+/**
+ * Retrieve list of all existing invites
+ */
 const getInvites = async () => {
-  const response = await call('invite/').get().json();
+  const response: InviteListResponse = await call('invite/').get().json();
   const { data } = response;
 
-  invites.value = data.value;
+  invites.value = data.value as Invite[];
 };
 
+/**
+ * Update list of all existing invites
+ */
 const refresh = async () => {
   loading.value = true;
   await getInvites();
@@ -210,15 +161,14 @@ const refresh = async () => {
 
 /**
  * Disables an unused invite
- * @param code
- * @returns {Promise<void>}
+ * @param code Invitation identifier
  */
-const revokeInvite = async (code) => {
+const revokeInvite = async (code: string) => {
   if (!code) {
     return;
   }
 
-  const response = await call(`invite/revoke/${code}`).put().json();
+  const response: BooleanResponse = await call(`invite/revoke/${code}`).put().json();
   const { data } = response;
 
   if (data.value) {
@@ -231,19 +181,19 @@ const generateInvites = async () => {
   pageError.value = '';
   pageNotification.value = '';
 
-  const response = await call(`invite/generate/${generateCodeAmount.value}`).post().json();
+  const response: InviteListResponse = await call(`invite/generate/${generateCodeAmount.value}`).post().json();
 
   const { data, error } = response;
 
   if (error.value) {
-    const errorObj = data.value?.detail;
+    const errorObj = (data.value as Exception)?.detail;
 
     if (!errorObj) {
       pageError.value = t('error.somethingWentWrong');
     } else if (errorObj instanceof Array) {
       pageError.value = errorObj.map((err) => err.msg).join('\n');
     } else {
-      pageError.value = data.value?.detail?.message;
+      pageError.value = errorObj?.message;
     }
   } else {
     pageNotification.value = t('info.invitationGenerated');
@@ -255,7 +205,7 @@ const generateInvites = async () => {
 };
 
 const amIAdmin = async () => {
-  const response = await call('permission-check').post().json();
+  const response: BooleanResponse = await call('permission-check').post().json();
   const { error } = response;
 
   return !error.value;
@@ -272,3 +222,55 @@ onMounted(async () => {
 });
 
 </script>
+
+<template>
+  <div class="flex w-full justify-center">
+    <alert-box v-if="pageNotification" @close="pageNotification = ''" :scheme="AlertSchemes.Success">
+      {{ pageNotification }}
+    </alert-box>
+    <alert-box v-if="pageError" @close="pageError = ''">
+      {{ pageError }}
+    </alert-box>
+  </div>
+  <admin-nav/>
+  <div v-if="displayPage">
+    <data-table
+      data-name="Invite Codes"
+      :allow-multi-select="false"
+      :data-list="filteredInvites"
+      :columns="columns"
+      :filters="filters"
+      :loading="loading"
+      @field-click="(_key, field) => revokeInvite(field.code.value)"
+    >
+      <template v-slot:footer>
+        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
+          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
+            <span>{{ t('label.amountOfCodes') }}</span>
+            <input
+              class="mx-4 w-60 rounded-md text-sm"
+              type="number"
+              v-model="generateCodeAmount"
+              :disabled="loading"
+              enterkeyhint="done"
+              @keyup.enter="generateInvites"
+            />
+          </label>
+          <primary-button
+            class="btn-generate"
+            :disabled="loading"
+            @click="generateInvites"
+            :title="t('label.generate')"
+          >
+            <icon-send/>
+            {{ t('label.generate') }}
+          </primary-button>
+        </div>
+      </template>
+
+    </data-table>
+  </div>
+  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
+    <loading-spinner/>
+  </div>
+</template>
diff --git a/frontend/src/views/admin/SubscriberPanelView.vue b/frontend/src/views/admin/SubscriberPanelView.vue
index dc019608e..76acf2e5c 100644
--- a/frontend/src/views/admin/SubscriberPanelView.vue
+++ b/frontend/src/views/admin/SubscriberPanelView.vue
@@ -1,60 +1,5 @@
-<template>
-  <div class="flex w-full justify-center">
-    <alert-box
-      @close="pageNotification = ''"
-      v-if="pageNotification"
-      :scheme="alertSchemes.success"
-    >
-      {{ pageNotification }}
-    </alert-box>
-    <alert-box
-      @close="pageError = ''"
-      v-if="pageError"
-    >
-      {{ pageError }}
-    </alert-box>
-  </div>
-  <admin-nav/>
-  <div v-if="displayPage">
-    <data-table
-      data-name="Subscribers"
-      :allow-multi-select="false"
-      :data-list="filteredSubscribers"
-      :columns="columns"
-      :filters="filters"
-      :loading="loading"
-      @field-click="(_key, field) => toggleSubscriberState(field.email.value, field.timeDeleted.value === '')"
-    >
-      <template v-slot:footer>
-        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
-          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
-            <span>{{ t('label.enterEmailToInvite') }}</span>
-            <input
-              class="mx-4 w-60 rounded-md text-sm"
-              type="email"
-              placeholder="e.g. test@example.org"
-              v-model="inviteEmail"
-              :disabled="loading"
-              enterkeyhint="send"
-              @keyup.enter="sendInvite"
-            />
-          </label>
-          <primary-button class="btn-send" :disabled="loading" @click="sendInvite" :title="t('label.send')">
-            <icon-send />
-            {{ t('label.send') }}
-          </primary-button>
-        </div>
-      </template>
-
-    </data-table>
-  </div>
-  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
-    <loading-spinner/>
-  </div>
-</template>
-
-<script setup>
-import { alertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
+<script setup lang="ts">
+import { AlertSchemes, tableDataButtonType, tableDataType } from '@/definitions';
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
@@ -62,22 +7,23 @@ import { IconSend } from '@tabler/icons-vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
+import { Subscriber, SubscriberListResponse, BooleanResponse, Exception } from "@/models";
+import { dayjsKey, callKey } from "@/keys";
 import AdminNav from '@/elements/admin/AdminNav.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import DataTable from '@/components/DataTable.vue';
 import LoadingSpinner from '@/elements/LoadingSpinner.vue';
 import PrimaryButton from '@/elements/PrimaryButton.vue';
-import { dayjsKey } from "@/keys";
 
 const user = useUserStore();
 
 const router = useRouter();
 const { t } = useI18n();
 
-const call = inject('call');
+const call = inject(callKey);
 const dj = inject(dayjsKey);
 
-const subscribers = ref([]);
+const subscribers = ref<Subscriber[]>([]);
 const displayPage = ref(false);
 const inviteEmail = ref('');
 const loading = ref(true);
@@ -173,6 +119,7 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
+     * TODO: Add types when DataTable.vue is typed
      * @param selectedKey
      * @param mutableDataList
      * @returns {*}
@@ -185,13 +132,20 @@ const filters = [
     },
   },
 ];
+
+/**
+ * Retrieve list of all existing subscribers
+ */
 const getSubscribers = async () => {
-  const response = await call('subscriber/').get().json();
+  const response: SubscriberListResponse = await call('subscriber/').get().json();
   const { data } = response;
 
-  subscribers.value = data.value;
+  subscribers.value = data.value as Subscriber[];
 };
 
+/**
+ * Update list of all existing subscribers
+ */
 const refresh = async () => {
   loading.value = true;
   await getSubscribers();
@@ -201,15 +155,15 @@ const refresh = async () => {
 /**
  * Disables a subscriber
  * @param email
- * @returns {Promise<void>}
+ * @param currentState True if currently enabled (= not deleted)
  */
-const toggleSubscriberState = async (email, currentState) => {
+const toggleSubscriberState = async (email: string, currentState: boolean) => {
   if (!email) {
     return;
   }
 
   const action = currentState ? 'disable' : 'enable';
-  const response = await call(`subscriber/${action}/${email}`).put().json();
+  const response: BooleanResponse = await call(`subscriber/${action}/${email}`).put().json();
   const { data } = response;
 
   if (data.value) {
@@ -217,6 +171,9 @@ const toggleSubscriberState = async (email, currentState) => {
   }
 };
 
+/**
+ * Update list of all existing subscribers
+ */
 const sendInvite = async () => {
   loading.value = true;
   pageError.value = '';
@@ -229,7 +186,7 @@ const sendInvite = async () => {
   const { data, error } = response;
 
   if (error.value) {
-    const errorObj = data.value?.detail;
+    const errorObj = (data.value as Exception)?.detail;
 
     if (!errorObj) {
       pageError.value = t('error.somethingWentWrong');
@@ -248,7 +205,7 @@ const sendInvite = async () => {
 };
 
 const amIAdmin = async () => {
-  const response = await call('permission-check').post().json();
+  const response: BooleanResponse = await call('permission-check').post().json();
   const { error } = response;
 
   return !error.value;
@@ -265,3 +222,58 @@ onMounted(async () => {
 });
 
 </script>
+
+<template>
+  <div class="flex w-full justify-center">
+    <alert-box
+      @close="pageNotification = ''"
+      v-if="pageNotification"
+      :scheme="AlertSchemes.Success"
+    >
+      {{ pageNotification }}
+    </alert-box>
+    <alert-box
+      @close="pageError = ''"
+      v-if="pageError"
+    >
+      {{ pageError }}
+    </alert-box>
+  </div>
+  <admin-nav/>
+  <div v-if="displayPage">
+    <data-table
+      data-name="Subscribers"
+      :allow-multi-select="false"
+      :data-list="filteredSubscribers"
+      :columns="columns"
+      :filters="filters"
+      :loading="loading"
+      @field-click="(_key, field) => toggleSubscriberState(field.email.value, field.timeDeleted.value === '')"
+    >
+      <template v-slot:footer>
+        <div class="flex w-1/3 flex-col gap-4 text-center md:w-full md:flex-row md:text-left">
+          <label class="flex flex-col gap-4 md:flex-row md:items-center md:gap-0">
+            <span>{{ t('label.enterEmailToInvite') }}</span>
+            <input
+              class="mx-4 w-60 rounded-md text-sm"
+              type="email"
+              placeholder="e.g. test@example.org"
+              v-model="inviteEmail"
+              :disabled="loading"
+              enterkeyhint="send"
+              @keyup.enter="sendInvite"
+            />
+          </label>
+          <primary-button class="btn-send" :disabled="loading" @click="sendInvite" :title="t('label.send')">
+            <icon-send />
+            {{ t('label.send') }}
+          </primary-button>
+        </div>
+      </template>
+
+    </data-table>
+  </div>
+  <div v-else class="flex size-full min-h-[75vh] items-center justify-center">
+    <loading-spinner/>
+  </div>
+</template>
diff --git a/frontend/src/views/admin/WaitingListPanelView.vue b/frontend/src/views/admin/WaitingListPanelView.vue
index 7ced1974a..df14c1520 100644
--- a/frontend/src/views/admin/WaitingListPanelView.vue
+++ b/frontend/src/views/admin/WaitingListPanelView.vue
@@ -1,23 +1,24 @@
-<script setup>
+<script setup lang="ts">
 import {
   computed, inject, onMounted, ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { alertSchemes, tableDataType } from '@/definitions';
-import DataTable from '@/components/DataTable.vue';
+import { AlertSchemes, tableDataType } from '@/definitions';
 import { useRouter } from 'vue-router';
+import { WaitingListEntry, WaitingListResponse, BooleanResponse, Exception } from "@/models";
+import { dayjsKey, callKey } from "@/keys";
+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 { dayjsKey } from "@/keys";
 
 const router = useRouter();
 const { t } = useI18n();
 
-const call = inject('call');
+const call = inject(callKey);
 const dj = inject(dayjsKey);
 
-const waitingListUsers = ref([]);
+const waitingListUsers = ref<WaitingListEntry[]>([]);
 const displayPage = ref(false);
 const loading = ref(true);
 const pageError = ref('');
@@ -94,6 +95,7 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
+     * TODO: Add types when DataTable.vue is typed
      * @param selectedKey
      * @param mutableDataList
      * @returns {*}
@@ -130,6 +132,7 @@ const filters = [
     ],
     /**
      * Callback function, filter the list by selectedKey and return it back to the table
+     * TODO: Add types when DataTable.vue is typed
      * @param selectedKey
      * @param mutableDataList
      * @returns {*}
@@ -149,13 +152,20 @@ const filters = [
     },
   },
 ];
+
+/**
+ * Retrieve waiting list entries
+ */
 const getInvites = async () => {
-  const response = await call('waiting-list/').get().json();
+  const response: WaitingListResponse = await call('waiting-list/').get().json();
   const { data } = response;
 
-  waitingListUsers.value = data.value;
+  waitingListUsers.value = data.value as WaitingListEntry[];
 };
 
+/**
+ * Update list of all existing waiting list entries
+ */
 const refresh = async () => {
   loading.value = true;
   await getInvites();
@@ -163,7 +173,7 @@ const refresh = async () => {
 };
 
 const amIAdmin = async () => {
-  const response = await call('permission-check').post().json();
+  const response: BooleanResponse = await call('permission-check').post().json();
   const { error } = response;
 
   return !error.value;
@@ -186,7 +196,7 @@ onMounted(async () => {
     <alert-box
       @close="pageNotification = ''"
       v-if="pageNotification"
-      :scheme="alertSchemes.success"
+      :scheme="AlertSchemes.Success"
     >
       {{ pageNotification }}
     </alert-box>
@@ -213,4 +223,3 @@ onMounted(async () => {
     <loading-spinner/>
   </div>
 </template>
-