From cffc34f6278a55cc4146c76b52ad0b61163bdfa5 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 22:45:44 +0200
Subject: [PATCH] fix(types): resolve 4 pre-existing vue-tsc errors

- EventMetricCards: type navigateTo's routeName as the literal union
  of the two routes it actually targets (events-id-persons,
  events-id-sections) so the typed router accepts it.
- CreateTimeSlotDialog: type the form ref explicitly so person_type
  is PersonType rather than being inferred as string.
- @layouts/types.ts: relax LayoutConfig.app.title from Lowercase<string>
  to string. The lowercase constraint was a compile-time namespacing
  convention in the Vuexy template with zero runtime effect;
  relaxing it lets the branded "Crewli" title satisfy the type.
---
 apps/app/src/@layouts/types.ts                    |  2 +-
 .../src/components/events/EventMetricCards.vue    |  4 +++-
 .../components/sections/CreateTimeSlotDialog.vue  | 15 ++++++++++++---
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/@layouts/types.ts b/apps/app/src/@layouts/types.ts
index 736fee08..ab1bb0ca 100644
--- a/apps/app/src/@layouts/types.ts
+++ b/apps/app/src/@layouts/types.ts
@@ -4,7 +4,7 @@ import type { AppContentLayoutNav, ContentWidth, FooterType, HorizontalNavType,
 
 export interface LayoutConfig {
   app: {
-    title: Lowercase<string>
+    title: string
     logo: VNode
     contentWidth: typeof ContentWidth[keyof typeof ContentWidth]
     contentLayoutNav: typeof AppContentLayoutNav[keyof typeof AppContentLayoutNav]
diff --git a/apps/app/src/components/events/EventMetricCards.vue b/apps/app/src/components/events/EventMetricCards.vue
index 05dff57d..9ff8e882 100644
--- a/apps/app/src/components/events/EventMetricCards.vue
+++ b/apps/app/src/components/events/EventMetricCards.vue
@@ -13,7 +13,9 @@ const orgIdRef = computed(() => authStore.currentOrganisation?.id ?? '')
 const eventIdRef = computed(() => props.eventId)
 const { data: stats, isLoading, isError, refetch } = useEventStats(orgIdRef, eventIdRef)
 
-function navigateTo(routeName: string) {
+type EventChildRoute = 'events-id-persons' | 'events-id-sections'
+
+function navigateTo(routeName: EventChildRoute) {
   router.push({ name: routeName, params: { id: props.eventId } })
 }
 
diff --git a/apps/app/src/components/sections/CreateTimeSlotDialog.vue b/apps/app/src/components/sections/CreateTimeSlotDialog.vue
index d4b89335..d9f11fea 100644
--- a/apps/app/src/components/sections/CreateTimeSlotDialog.vue
+++ b/apps/app/src/components/sections/CreateTimeSlotDialog.vue
@@ -3,10 +3,19 @@ import { VForm } from 'vuetify/components/VForm'
 import { useCreateTimeSlot, useUpdateTimeSlot } from '@/composables/api/useTimeSlots'
 import { useAuthStore } from '@/stores/useAuthStore'
 import { requiredValidator } from '@core/utils/validators'
-import type { TimeSlot } from '@/types/section'
+import type { PersonType, TimeSlot } from '@/types/section'
 import type { AxiosError } from 'axios'
 import type { ApiErrorResponse } from '@/types/auth'
 
+interface TimeSlotFormState {
+  name: string
+  person_type: PersonType
+  date: string
+  start_time: string
+  end_time: string
+  duration_hours: number | null
+}
+
 const props = defineProps<{
   eventId: string
   timeSlot?: TimeSlot | null
@@ -21,13 +30,13 @@ const eventIdRef = computed(() => props.eventId)
 
 const isEditing = computed(() => !!props.timeSlot)
 
-const form = ref({
+const form = ref<TimeSlotFormState>({
   name: '',
   person_type: 'VOLUNTEER',
   date: '',
   start_time: '',
   end_time: '',
-  duration_hours: null as number | null,
+  duration_hours: null,
 })
 
 const errors = ref<Record<string, string>>({})