From 5b90bd392a99a8bc9e1c0720d961ce2b49e4a3bd Mon Sep 17 00:00:00 2001
From: Shreya <spejavar10@gmail.com>
Date: Thu, 9 Apr 2026 15:46:58 -0500
Subject: [PATCH 1/7] feat: mobile clinic locator works for upcoming events,
 and mobile clinic can be toggled on event edit

---
 app/components/event/Tile.vue         | 18 ++++++---
 app/pages/events/[id].vue             | 31 +++++++++++----
 app/pages/events/index.vue            | 37 ++++++++++++++---
 app/pages/events/manage.vue           |  2 +-
 app/pages/mobileClinic.vue            | 57 ++++++++++++++-------------
 server/api/events/[id]/index.patch.ts | 22 ++++++++++-
 server/api/events/index.get.ts        |  3 +-
 7 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index 576600e..cde4c24 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 defineEmits(['add'])
-defineProps<{
-  title: string
+const props = defineProps<{
+  title?: string
   subtitle?: string
+  buttonType?: 'plus' | 'arrow'
+  eventId?: string
 }>()
+
+const iconName = computed(
+  () => props.buttonType === 'arrow' ? 'i-heroicons-arrow-right-20-solid' : 'i-heroicons-plus'
+)
 </script>
 <template>
   <div
@@ -24,13 +32,13 @@ defineProps<{
       </p>
     </div>
 
-    <!-- Plus button -->
+    <!-- Action button -->
     <button
       class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60
              hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
-      @click="$emit('add')"
+      @click="$emit('add', props.eventId)"
     >
-      <UIcon name="i-heroicons-plus" class="w-5 h-5" />
+      <UIcon :name="iconName" class="w-5 h-5" />
     </button>
   </div>
 </template>
\ No newline at end of file
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 2a2d7e7..1b1e25b 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -12,7 +12,7 @@ const loading = ref(true)
 const notFound = ref(false)
 
 const isEditMode = ref(false)
-const editForm = ref({})
+const editForm = ref({ mobileClinic: false })
 
 //placeholder until we implement auth
 const admin = true;
@@ -26,7 +26,7 @@ onMounted(async () => {
     // Fetch event from your backend API
     event.value = await $fetch(`/api/events/${eventId}`)
     
-    editForm.value = { ...event.value }
+    editForm.value = { ...event.value, mobileClinic: Boolean(event.value?.mobileClinicId) }
     
     console.log('✅ Event loaded:', event.value)
     loading.value = false
@@ -71,7 +71,7 @@ const zoom = 15
 function toggleEditMode() {
   if (isEditMode.value) {
     // Cancel editing - reset form to original event data
-    editForm.value = { ...event.value }
+    editForm.value = { ...event.value, mobileClinic: Boolean(event.value?.mobileClinicId) }
   }
   isEditMode.value = !isEditMode.value
 }
@@ -82,7 +82,7 @@ async function saveChanges() {
     console.log('💾 Saving changes...')
     
     // Update event via API
-    await $fetch(`/api/events/${event.value.id}`, {
+    const updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
       method: 'PATCH',
       body: {
         title: editForm.value.title,
@@ -92,7 +92,8 @@ async function saveChanges() {
         startTime: new Date(editForm.value.startTime).toISOString(),
         endTime: new Date(editForm.value.endTime).toISOString(),
         allowVolunteers: editForm.value.allowVolunteers,
-        allowAttendees: editForm.value.allowAttendees
+        allowAttendees: editForm.value.allowAttendees,
+        mobileClinic: editForm.value.mobileClinic
       }
     })
     
@@ -439,7 +440,7 @@ const backNavigate = computed(() => {
                 <UIcon name="i-lucide-users" class="w-5 h-5 text-brand4" />
                 <div>
                   <p class="font-medium text-gray-900">Volunteer Sign-ups</p>
-                  <p class="text-sm text-gray-500">Allow people to volunteer for this event</p>
+                  <p class="text-sm text-gray-500">Allow people to volunteer for this event?</p>
                 </div>
               </div>
               <label class="flex items-center gap-2 cursor-pointer">
@@ -452,7 +453,7 @@ const backNavigate = computed(() => {
                 <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
                 <div>
                   <p class="font-medium text-gray-900">Attendee Registration</p>
-                  <p class="text-sm text-gray-500">Allow people to register as attendees</p>
+                  <p class="text-sm text-gray-500">Allow people to register as attendees?</p>
                 </div>
               </div>
               <label v-if="isEditMode" class="flex items-center gap-2 cursor-pointer">
@@ -462,6 +463,22 @@ const backNavigate = computed(() => {
                 <UCheckbox :model-value="event.allowAttendees" color="brand4" disabled />
               </label>
             </div>
+
+            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
+              <div class="flex items-center gap-3">
+                <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
+                <div>
+                  <p class="font-medium text-gray-900">Mobile Clinic</p>
+                  <p class="text-sm text-gray-500">Will this event have a mobile clinic?</p>
+                </div>
+              </div>
+              <label v-if="isEditMode" class="flex items-center gap-2 cursor-pointer">
+                <UCheckbox v-model="editForm.mobileClinic" color="brand4" />
+              </label>
+              <label v-else class="flex items-center gap-2">
+                <UCheckbox :model-value="Boolean(event.mobileClinicId)" color="brand4" disabled />
+              </label>
+            </div>
           </div>
         </div>
 
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index e244347..6bf183c 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -7,8 +7,9 @@ const tz = getLocalTimeZone()
 
 const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
 
-const eventClick = () => {
-  navigateTo('/events/event1')
+const eventClick = (id?: string) => {
+  if (!id) return
+  navigateTo(`/events/${id}`)
 }
 
 const isDateDisabled = (d: DateValue) =>
@@ -39,10 +40,34 @@ const isDateDisabled = (d: DateValue) =>
         
 
         <div class="space-y-4">
-          <EventTile :onclick="eventClick"/>
-          <EventTile />
-          <EventTile />
-          <EventTile />
+          <EventTile
+            title="Community Health Fair"
+            subtitle="Tap to view details"
+            buttonType="arrow"
+            eventId="event1"
+            @add="eventClick"
+          />
+          <EventTile
+            title="Support Workshop"
+            subtitle="Tap to view details"
+            buttonType="arrow"
+            eventId="event2"
+            @add="eventClick"
+          />
+          <EventTile
+            title="Family Clinic"
+            subtitle="Tap to view details"
+            buttonType="arrow"
+            eventId="event3"
+            @add="eventClick"
+          />
+          <EventTile
+            title="Wellness Check"
+            subtitle="Tap to view details"
+            buttonType="arrow"
+            eventId="event4"
+            @add="eventClick"
+          />
         </div>
     </div>
   </div>
diff --git a/app/pages/events/manage.vue b/app/pages/events/manage.vue
index 13cfce6..596cde9 100644
--- a/app/pages/events/manage.vue
+++ b/app/pages/events/manage.vue
@@ -144,7 +144,7 @@ function getEventDate(event) {
 
             <div class="flex flex-col text-left pointer-events-none">
               <p class="text-gray-800 font-semibold">{{ event.title }}</p>
-              <p class="text-gray-500 text-sm">{{ event.location }}</p>
+              <p class="text-gray-500 text-sm">{{ event.location.address }}</p>
               <p class="text-gray-400 text-xs">{{ getEventDate(event) }}</p>
             </div>
           </button>
diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index d8b397b..1c9df33 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -17,22 +17,26 @@
           :snap-points="snapPoints"
             >
           <template #content>
-            <EventTile
-v-if ="pastEvents.length === 0"
-              class="w-11/12 mx-auto my-4 cursor-pointer"
-              title="No past events"
-              subtitle="Check back later for updates!"
-              
-            />
-            <EventTile
-v-for="event in pastEvents"
-              v-else
-              :key="event.id"
-              class="w-11/12 mx-auto my-4 cursor-pointer"
-              :title="event.title"
-              :subtitle="new Date(event.startTime).toLocaleString()"
-              @click="() => mapAdjust(event)"
-            />
+            <div class="max-h-[55vh] overflow-y-auto space-y-2 px-2 pb-4">
+              <EventTile
+                v-if="upcomingEvents.length === 0"
+                class="w-11/12 mx-auto my-4 cursor-pointer"
+                title="No upcoming events"
+                subtitle="Check back later for updates!"
+              />
+              <EventTile
+                v-for="event in upcomingEvents"
+                v-else
+                :key="event.id"
+                class="w-11/12 mx-auto my-4 cursor-pointer"
+                :title="event.title"
+                :subtitle="new Date(event.startTime).toLocaleString()"
+                @click="() => {
+                  console.log('📍 Adjusting map to location:', event.location.address)
+                  mapAdjust(event.location)
+                }"
+              />
+            </div>
           </template>
         </UDrawer>
       </div>
@@ -52,6 +56,7 @@ const snapPoints = ["230", "340", "450"]
 const pastEvents = ref([])
 const upcomingEvents = ref([])
 
+
 // Load all events from API on mount
 onMounted(async () => {
   console.log('✅ Page mounted - Loading events from API')
@@ -65,17 +70,13 @@ async function loadEvents() {
     
     const now = new Date()
     
-    pastEvents.value = allEvents.filter(event => {
-      const endTime = new Date(event.endTime)
-      return endTime < now
-    })
-    
-    upcomingEvents.value = allEvents.filter(event => {
+    const mobileClinicEvents = allEvents.filter(event => event.mobileClinicId !== null)
+
+    upcomingEvents.value = mobileClinicEvents.filter(event => {
       const endTime = new Date(event.endTime)
       return endTime >= now
     })
     
-    console.log('📅 Past events:', pastEvents.value.length)
     console.log('📅 Upcoming events:', upcomingEvents.value.length)
     
   } catch (error) {
@@ -83,12 +84,12 @@ async function loadEvents() {
   }
 }
 
-
-async function mapAdjust() {
-
-  const lng = -96.749788
-  const lat = 32.985141
+async function mapAdjust(location) {
+  
+  const lng = location.longitude
+  const lat = location.latitude
   
+  console.log(`📍 Adjusting map to event location: [${lng}, ${lat}]`)
   center.value = [lng, lat]
   zoom.value = 17
 }
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index a6d7a52..a1108ac 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -83,6 +83,23 @@ export default defineEventHandler(async (event) => {
       throw createError({ statusCode: 404, message: 'Event not found' })
     }
 
+    const mobileClinicUpdate: Record<string, any> = {}
+    if (typeof body.mobileClinic === 'boolean') {
+      if (body.mobileClinic) {
+        if (!foundEvent.mobileClinicId) {
+          mobileClinicUpdate.mobileClinic = {
+            create: {}
+          }
+        }
+      } else {
+        if (foundEvent.mobileClinicId) {
+          mobileClinicUpdate.mobileClinic = {
+            disconnect: true
+          }
+        }
+      }
+    }
+
     // Update the event
     const updatedEvent = await prisma.event.update({
       where: { id },
@@ -96,10 +113,11 @@ export default defineEventHandler(async (event) => {
             create: locationData!
           }
         },
-       
+        ...mobileClinicUpdate
       },
       include: {
-        eventAssets: true
+        eventAssets: true,
+        location: true
       }
     })
 
diff --git a/server/api/events/index.get.ts b/server/api/events/index.get.ts
index 5c03980..3b2393a 100644
--- a/server/api/events/index.get.ts
+++ b/server/api/events/index.get.ts
@@ -6,7 +6,8 @@ export default defineEventHandler(async (_event) => {
       include: {
         eventAssets: true,
         volunteerHours: true,
-        participants: true
+        participants: true,
+        location :true
       },
       orderBy: {
         startTime: 'asc'

From 09031d4ad4c93acd4d456ea74618b67848c2c976 Mon Sep 17 00:00:00 2001
From: Shreya <spejavar10@gmail.com>
Date: Thu, 9 Apr 2026 16:30:23 -0500
Subject: [PATCH 2/7] fix: changed event tile button

---
 app/pages/mobileClinic.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index 1c9df33..a525166 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -31,6 +31,9 @@
                 class="w-11/12 mx-auto my-4 cursor-pointer"
                 :title="event.title"
                 :subtitle="new Date(event.startTime).toLocaleString()"
+                button-type="arrow"
+                :eventId="event.id"
+                @add="eventClick"
                 @click="() => {
                   console.log('📍 Adjusting map to location:', event.location.address)
                   mapAdjust(event.location)
@@ -63,6 +66,11 @@ onMounted(async () => {
   await loadEvents()
 })
 
+const eventClick = (id) => {
+  if (!id) return
+  navigateTo(`/events/${id}`)
+}
+
 async function loadEvents() {
   try {
     const allEvents = await $fetch('/api/events')
@@ -94,4 +102,5 @@ async function mapAdjust(location) {
   zoom.value = 17
 }
 
+
 </script>
\ No newline at end of file

From 48d9efac6a67687d4acecbed34e3526b4d8e8109 Mon Sep 17 00:00:00 2001
From: Shreya <spejavar10@gmail.com>
Date: Thu, 30 Apr 2026 15:22:16 -0500
Subject: [PATCH 3/7] feat: Add schedule to mobile clinic -> display on
 frontend still needs to be fixed

---
 app/pages/mobileClinic.vue               | 62 ++++++++++++++++------
 prisma/schema/mobileClinic.prisma        |  3 +-
 prisma/seed/schedule.json                | 15 ++++++
 server/api/mobile-clinic/schedule.get.ts | 66 ++++++++++++++++++++++++
 server/utils/prisma.ts                   | 19 ++++++-
 server/utils/seed.ts                     | 55 ++++++++++++++++++++
 6 files changed, 203 insertions(+), 17 deletions(-)
 create mode 100644 prisma/seed/schedule.json
 create mode 100644 server/api/mobile-clinic/schedule.get.ts

diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index a525166..a3240d2 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -32,12 +32,9 @@
                 :title="event.title"
                 :subtitle="new Date(event.startTime).toLocaleString()"
                 button-type="arrow"
-                :eventId="event.id"
+                :eventId="event.eventId"
                 @add="eventClick"
-                @click="() => {
-                  console.log('📍 Adjusting map to location:', event.location.address)
-                  mapAdjust(event.location)
-                }"
+                @click="handleTileClick(event)"
               />
             </div>
           </template>
@@ -56,14 +53,14 @@ const zoom = ref(15)
 // Pixel values
 const snapPoints = ["230", "340", "450"]
 
-const pastEvents = ref([])
 const upcomingEvents = ref([])
 
 
-// Load all events from API on mount
+// Load both events and mobile clinic schedule on mount
 onMounted(async () => {
-  console.log('✅ Page mounted - Loading events from API')
+  console.log('✅ Page mounted - Loading events and mobile clinic schedule')
   await loadEvents()
+  await loadMobileClinicSchedule()
 })
 
 const eventClick = (id) => {
@@ -71,6 +68,39 @@ const eventClick = (id) => {
   navigateTo(`/events/${id}`)
 }
 
+const handleTileClick = (event) => {
+  if (!event?.location) return
+  mapAdjust(event.location)
+}
+
+const setUpcomingItems = (items) => {
+  upcomingEvents.value = items
+    .map((item) => ({
+      ...item,
+      subtitle: item.subtitle ?? new Date(item.startTime).toLocaleString(),
+    }))
+    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+}
+
+async function loadMobileClinicSchedule() {
+  try {
+    const schedule = await $fetch('/api/mobile-clinic/schedule')
+    console.log('✅ Loaded mobile clinic schedule:', schedule)
+
+    const scheduleItems = schedule.map((item) => ({
+      ...item,
+      title: `Mobile Clinic at ${item.location.address}`,
+      eventId: null,
+    }))
+
+    setUpcomingItems([...upcomingEvents.value, ...scheduleItems])
+    console.log('📅 Combined schedule items:', scheduleItems.length)
+  } catch (error) {
+    console.error('❌ Error loading mobile clinic schedule:', error)
+  }
+}
+
+
 async function loadEvents() {
   try {
     const allEvents = await $fetch('/api/events')
@@ -78,14 +108,16 @@ async function loadEvents() {
     
     const now = new Date()
     
-    const mobileClinicEvents = allEvents.filter(event => event.mobileClinicId !== null)
+    const eventItems = allEvents
+      .filter((event) => event.mobileClinicId !== null)
+      .filter((event) => new Date(event.endTime) >= now)
+      .map((event) => ({
+        ...event,
+        eventId: event.id,
+      }))
 
-    upcomingEvents.value = mobileClinicEvents.filter(event => {
-      const endTime = new Date(event.endTime)
-      return endTime >= now
-    })
-    
-    console.log('📅 Upcoming events:', upcomingEvents.value.length)
+    setUpcomingItems([...upcomingEvents.value, ...eventItems])
+    console.log('📅 Upcoming events:', eventItems.length)
     
   } catch (error) {
     console.error('❌ Error loading events:', error)
diff --git a/prisma/schema/mobileClinic.prisma b/prisma/schema/mobileClinic.prisma
index 98753db..275248c 100644
--- a/prisma/schema/mobileClinic.prisma
+++ b/prisma/schema/mobileClinic.prisma
@@ -14,7 +14,8 @@ model Mobile_Clinic_Schedule {
   mobileClinicId String
   location        Location @relation(fields: [locationId], references: [id])
   locationId      String
-  datetime       DateTime
+  startTime      DateTime @unique
+  endTime        DateTime @unique
 
   @@map("schedule")
 }
diff --git a/prisma/seed/schedule.json b/prisma/seed/schedule.json
new file mode 100644
index 0000000..cac5b6b
--- /dev/null
+++ b/prisma/seed/schedule.json
@@ -0,0 +1,15 @@
+[
+    {
+        "mobileClinic": {
+            "id": "mobile_clinic_1"
+        },
+        "location":{
+            "longitude": -97.302784,
+            "latitude": 32.707596,
+            "address": "3001 S Riverside Dr, Fort Worth, TX 76119"
+        },
+        "startTime": "2026-07-01T14:00:00.000Z",
+        "endTime": "2026-07-01T22:00:00.000Z"
+    }
+
+]
\ No newline at end of file
diff --git a/server/api/mobile-clinic/schedule.get.ts b/server/api/mobile-clinic/schedule.get.ts
new file mode 100644
index 0000000..13d7f38
--- /dev/null
+++ b/server/api/mobile-clinic/schedule.get.ts
@@ -0,0 +1,66 @@
+import prisma from '~~/server/utils/prisma'
+
+const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
+const MAX_OCCURRENCES = 8
+const LOOKAHEAD_WEEKS = 8
+
+const addWeeks = (date: Date, weeks: number) =>
+  new Date(date.getTime() + weeks * MS_PER_WEEK)
+
+export default defineEventHandler(async () => {
+  try {
+    const scheduleEntries = await prisma.mobile_Clinic_Schedule.findMany({
+      include: {
+        location: true,
+      },
+      orderBy: {
+        startTime: 'asc',
+      },
+    })
+
+    const now = new Date()
+    const windowEnd = addWeeks(now, LOOKAHEAD_WEEKS)
+
+    const occurrences = scheduleEntries.flatMap((entry) => {
+      const originStart = new Date(entry.startTime)
+      const originEnd = new Date(entry.endTime)
+      const occurrencesForEntry: Array<any> = []
+      let startTime = new Date(originStart)
+      let endTime = new Date(originEnd)
+
+      if (endTime < now) {
+        const weeksAhead = Math.ceil((now.getTime() - endTime.getTime()) / MS_PER_WEEK)
+        startTime = addWeeks(startTime, weeksAhead)
+        endTime = addWeeks(endTime, weeksAhead)
+      }
+
+      let count = 0
+      while (count < MAX_OCCURRENCES && startTime < windowEnd) {
+        if (endTime >= now) {
+          occurrencesForEntry.push({
+            id: `${entry.id}-${count}`,
+            scheduleId: entry.id,
+            startTime: startTime.toISOString(),
+            endTime: endTime.toISOString(),
+            location: entry.location,
+          })
+          count += 1
+        }
+
+        startTime = addWeeks(startTime, 1)
+        endTime = addWeeks(endTime, 1)
+      }
+
+      return occurrencesForEntry
+    })
+
+    
+    return occurrences.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+  } catch (error) {
+    console.error('Failed to fetch mobile clinic schedule', error)
+    throw createError({
+      statusCode: 500,
+      message: 'Failed to fetch mobile clinic schedule',
+    })
+  }
+})
diff --git a/server/utils/prisma.ts b/server/utils/prisma.ts
index 8b10f84..501ff62 100644
--- a/server/utils/prisma.ts
+++ b/server/utils/prisma.ts
@@ -1,9 +1,26 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
 import { PrismaClient } from './generated/prisma/client'
 import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
 
+const normalizeDatabaseUrl = (url?: string) => {
+  if (!url) return url
+  if (!url.startsWith('file:')) return url
+
+  const sqlitePath = url.slice(5)
+  if (path.isAbsolute(sqlitePath)) return url
+
+  const moduleDir = path.dirname(fileURLToPath(import.meta.url))
+  const projectRoot = import.meta.url.includes(`${path.sep}.output${path.sep}`)
+    ? path.resolve(moduleDir, '..', '..', '..', '..')
+    : process.cwd()
+
+  return `file:${path.resolve(projectRoot, sqlitePath)}`
+}
+
 const prismaClientSingleton = () => {
   const adapter = new PrismaBetterSqlite3({
-    url: process.env.DATABASE_URL
+    url: normalizeDatabaseUrl(process.env.DATABASE_URL)
   })
   return new PrismaClient({ adapter })
 }
diff --git a/server/utils/seed.ts b/server/utils/seed.ts
index e8ebb31..530bee3 100644
--- a/server/utils/seed.ts
+++ b/server/utils/seed.ts
@@ -58,6 +58,19 @@ type RawVolunteer = {
   }[]
 }
 
+type RawSchedule ={
+  mobileClinic: {
+    id: string
+  },
+  location: {
+    longitude: number,
+    latitude: number,
+    address: string
+  },
+  startTime: string,
+  endTime: string
+}
+
 // type RawNotification = {
 //   id: string,
 //   title: string,
@@ -201,6 +214,48 @@ async function main() {
     console.log(volunteerResult)
   }
 
+  //seed mobile clinic schedule
+  console.log("Seeding mobile clinic schedule...")
+  const rawSchedules: RawSchedule[] = JSON.parse(fs.readFileSync('prisma/seed/schedule.json').toString());
+  const schedules = rawSchedules.map((schedule) => {
+    return {
+      ...schedule,
+      startTime: new Date(schedule.startTime),
+      endTime: new Date(schedule.endTime),
+      location: {
+        connectOrCreate:{
+          where: {
+            address: schedule.location.address
+          },
+          create: {
+            longitude: schedule.location.longitude,
+            latitude: schedule.location.latitude,
+            address: schedule.location.address
+          }
+        }
+      },
+      mobileClinic: {
+        connectOrCreate: {
+          where: {
+            id: schedule.mobileClinic.id
+          },
+          create: {
+            id: schedule.mobileClinic.id
+          }
+        }
+      }
+    }
+  })
+  for(const schedule of schedules) {
+    const scheduleResult = await prisma.mobile_Clinic_Schedule.upsert({
+      where: { startTime: schedule.startTime },
+      update: {},
+      create: schedule
+    })
+    console.log(scheduleResult)
+  }
+
+
   // Seed six notifications - UNFINISHED
   // const rawNotifications: RawNotification[] = JSON.parse(fs.readFileSync('prisma/seed/notifications.json').toString());
   // // Convert each notification into an upsertable format

From 8dfe884ee829ee69e31d5a8d4b9f3a3c5d53a1d3 Mon Sep 17 00:00:00 2001
From: Shreya <spejavar10@gmail.com>
Date: Thu, 30 Apr 2026 15:30:12 -0500
Subject: [PATCH 4/7] fix: weekly shcedule generation and map interaction for
 mobile clinic events is working

---
 app/pages/mobileClinic.vue               | 2 +-
 prisma/seed/schedule.json                | 4 ++--
 server/api/mobile-clinic/schedule.get.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index a3240d2..124abc5 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -89,7 +89,7 @@ async function loadMobileClinicSchedule() {
 
     const scheduleItems = schedule.map((item) => ({
       ...item,
-      title: `Mobile Clinic at ${item.location.address}`,
+      title: `Mobile Clinic`,
       eventId: null,
     }))
 
diff --git a/prisma/seed/schedule.json b/prisma/seed/schedule.json
index cac5b6b..feb2d08 100644
--- a/prisma/seed/schedule.json
+++ b/prisma/seed/schedule.json
@@ -8,8 +8,8 @@
             "latitude": 32.707596,
             "address": "3001 S Riverside Dr, Fort Worth, TX 76119"
         },
-        "startTime": "2026-07-01T14:00:00.000Z",
-        "endTime": "2026-07-01T22:00:00.000Z"
+        "startTime": "2026-05-01T14:00:00.000Z",
+        "endTime": "2026-05-01T22:00:00.000Z"
     }
 
 ]
\ No newline at end of file
diff --git a/server/api/mobile-clinic/schedule.get.ts b/server/api/mobile-clinic/schedule.get.ts
index 13d7f38..be2816d 100644
--- a/server/api/mobile-clinic/schedule.get.ts
+++ b/server/api/mobile-clinic/schedule.get.ts
@@ -2,7 +2,7 @@ import prisma from '~~/server/utils/prisma'
 
 const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
 const MAX_OCCURRENCES = 8
-const LOOKAHEAD_WEEKS = 8
+const LOOKAHEAD_WEEKS = 4
 
 const addWeeks = (date: Date, weeks: number) =>
   new Date(date.getTime() + weeks * MS_PER_WEEK)
@@ -54,7 +54,7 @@ export default defineEventHandler(async () => {
       return occurrencesForEntry
     })
 
-    
+    console.log(`Generated ${occurrences.length} mobile clinic occurrences from ${scheduleEntries.length} schedule entries`)
     return occurrences.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
   } catch (error) {
     console.error('Failed to fetch mobile clinic schedule', error)

From 94a747ebb647c19532125497dfddb03c9c2ffa89 Mon Sep 17 00:00:00 2001
From: Vikas Thoutam <vikas.thoutam@gmail.com>
Date: Mon, 11 May 2026 21:46:25 -0500
Subject: [PATCH 5/7] chore: linting

---
 app/components/event/Modal.vue           |    2 +-
 app/pages/admin/volunteer-logs/index.vue |  359 +++++---
 app/pages/events/[id].vue                | 1030 ++++++++++++----------
 app/pages/events/index.vue               |   16 +-
 app/pages/mobileClinic.vue               |    2 +-
 package.json                             |    2 +-
 pnpm-lock.yaml                           |  251 +++---
 server/api/events/[id]/index.patch.ts    |    1 +
 server/api/mobile-clinic/schedule.get.ts |   73 +-
 server/api/volunteer-logs/index.get.ts   |   41 +-
 10 files changed, 1016 insertions(+), 761 deletions(-)

diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index 0cd88d2..a0360c5 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -212,7 +212,7 @@ function cancel() {
         :multiple = "true"
         accept = "image/*"
         :auto = "false"
-        :customUpload = "true"
+        :custom-upload = "true"
         @select = "handleFileChange($event.files)"
         @remove = "removeImage($event.index)"
         >
diff --git a/app/pages/admin/volunteer-logs/index.vue b/app/pages/admin/volunteer-logs/index.vue
index 6b64035..42d64d8 100644
--- a/app/pages/admin/volunteer-logs/index.vue
+++ b/app/pages/admin/volunteer-logs/index.vue
@@ -1,142 +1,142 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-const activeTab = ref('PENDING')
-
+const activeTab = ref("PENDING");
 
 const tabs = [
-    { id: 'PENDING', label: 'Pending' },
-    { id: 'APPROVED', label: 'Approved' },
-    { id: 'REJECTED', label: 'Rejected' }
-]
-
+    { id: "PENDING", label: "Pending" },
+    { id: "APPROVED", label: "Approved" },
+    { id: "REJECTED", label: "Rejected" },
+];
 
-type LogStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
-type ActionType = 'approve' | 'reject'
+type LogStatus = "PENDING" | "APPROVED" | "REJECTED";
+type ActionType = "approve" | "reject";
 
 interface VolunteerLog {
-    id: string
-    name: string
-    event: string
-    date: string
-    hours: number
-    status: LogStatus
-    comment?: string
+    id: string;
+    name: string;
+    event: string;
+    date: string;
+    hours: number;
+    status: LogStatus;
+    comment?: string;
 }
 
-// fetch from database 
-const logs = ref<VolunteerLog[]>([])
-const loading = ref(false)
-const error = ref<string | null>(null)
+// fetch from database
+const logs = ref<VolunteerLog[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
 
 const fetchlogs = async () => {
-    loading.value = true
-    error.value = null
+    loading.value = true;
+    error.value = null;
     try {
-        const data = await $fetch<{ logs: VolunteerLog[] }>('/api/volunteer-logs')
-        console.log('API response:', data)
-        logs.value = data?.logs ?? []
+        const data = await $fetch<{ logs: VolunteerLog[] }>(
+            "/api/volunteer-logs",
+        );
+        console.log("API response:", data);
+        logs.value = data?.logs ?? [];
     } catch (err) {
-        console.error('Failed to fetch logs:', err)
-        error.value = 'Failed to load volunteer logs'
+        console.error("Failed to fetch logs:", err);
+        error.value = "Failed to load volunteer logs";
     } finally {
-        loading.value = false 
+        loading.value = false;
     }
-}
-
-await fetchlogs()
+};
 
+await fetchlogs();
 
 function setStatus(id: string, status: LogStatus) {
-  const log = logs.value.find((l) => l.id === id)
-  if (log) log.status = status
+    const log = logs.value.find((l) => l.id === id);
+    if (log) log.status = status;
 }
 
-const filteredLogs = computed(() => 
-    logs.value.filter(log => log.status === activeTab.value)
-)
+const filteredLogs = computed(() =>
+    logs.value.filter((log) => log.status === activeTab.value),
+);
 
 const accordionItems = computed(() =>
-  filteredLogs.value.map((log) => ({
-    id: log.id,
-    label: log.name,
-    event: log.event,
-    date: log.date,
-    hours: log.hours,
-    status: log.status,
-    comment: log.comment ?? ''
-  }))
-)
-
-
+    filteredLogs.value.map((log) => ({
+        id: log.id,
+        label: log.name,
+        event: log.event,
+        date: log.date,
+        hours: log.hours,
+        status: log.status,
+        comment: log.comment ?? "",
+    })),
+);
 
 // local UI state for inline reject
 // unified action state
-const actioningId = ref<string | null>(null)
-const actionType = ref<ActionType | null>(null)
-const commentDraft = ref<Record<string, string>>({})
+const actioningId = ref<string | null>(null);
+const actionType = ref<ActionType | null>(null);
+const commentDraft = ref<Record<string, string>>({});
 
 function startAction(id: string, type: ActionType) {
-  actioningId.value = id
-  actionType.value = type
-  const log = logs.value.find((l: VolunteerLog) => l.id === id)
-  commentDraft.value[id] = log?.comment ?? ''
+    actioningId.value = id;
+    actionType.value = type;
+    const log = logs.value.find((l: VolunteerLog) => l.id === id);
+    commentDraft.value[id] = log?.comment ?? "";
 }
 
 function cancelAction() {
-  actioningId.value = null
-  actionType.value = null
+    actioningId.value = null;
+    actionType.value = null;
 }
 
 function confirmAction(id: string) {
-  if (!actionType.value) return
-
-  const log = logs.value.find((l: VolunteerLog) => l.id === id)
-  if (!log) return
-
-  // comment is optional for approve, required for reject
-  if (actionType.value === 'reject') {
-    const reason = (commentDraft.value[id] ?? '').trim()
-    if (!reason) return
-    log.comment = reason
-  } else {
-    log.comment = (commentDraft.value[id] ?? '').trim() || undefined
-  }
+    if (!actionType.value) return;
+
+    const log = logs.value.find((l: VolunteerLog) => l.id === id);
+    if (!log) return;
+
+    // comment is optional for approve, required for reject
+    if (actionType.value === "reject") {
+        const reason = (commentDraft.value[id] ?? "").trim();
+        if (!reason) return;
+        log.comment = reason;
+    } else {
+        log.comment = (commentDraft.value[id] ?? "").trim() || undefined;
+    }
 
-  setStatus(id, actionType.value === 'approve' ? 'APPROVED' : 'REJECTED')
-  actioningId.value = null
-  actionType.value = null
+    setStatus(id, actionType.value === "approve" ? "APPROVED" : "REJECTED");
+    actioningId.value = null;
+    actionType.value = null;
 }
-
 </script>
 
-
 <template>
-    <div class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20">
-
+    <div
+        class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20"
+    >
         <!-- page content -->
-         <div class="px-6 pt-20">
+        <div class="px-6 pt-20">
             <h1 class="text-3xl font-bold">
                 Volunteer Log <span class="text-teal-600">Approvals</span>
             </h1>
 
             <!-- tabs-->
-             <div class="flex gap-3 mt-6">
+            <div class="flex gap-3 mt-6">
                 <button
                     v-for="tab in tabs"
                     :key="tab.id"
                     class="px-4 py-2 rounded-full border"
-                    :class="activeTab === tab.id
-                        ? 'bg-teal-600 text-white border-teal-600'
-                        : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'"
-                    @click="activeTab =tab.id"
-                        >
-                    {{  tab.label }}
+                    :class="
+                        activeTab === tab.id
+                            ? 'bg-teal-600 text-white border-teal-600'
+                            : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'
+                    "
+                    @click="activeTab = tab.id"
+                >
+                    {{ tab.label }}
                 </button>
-             </div>
-            <USeparator class="mt-8"/>
+            </div>
+            <USeparator class="mt-8" />
             <!-- Loading -->
             <div v-if="loading" class="flex justify-center items-center h-40">
-                <UIcon name="i-heroicons-arrow-path" class="w-6 h-6 animate-spin text-teal-600" />
+                <UIcon
+                    name="i-heroicons-arrow-path"
+                    class="w-6 h-6 animate-spin text-teal-600"
+                />
             </div>
 
             <!-- Error -->
@@ -145,11 +145,14 @@ function confirmAction(id: string) {
             </div>
 
             <!-- Empty -->
-            <div v-else-if="accordionItems.length === 0" class="mt-8 text-gray-400 text-sm text-center">
+            <div
+                v-else-if="accordionItems.length === 0"
+                class="mt-8 text-gray-400 text-sm text-center"
+            >
                 No {{ activeTab.toLowerCase() }} logs found.
             </div>
-             <!-- logs -->
-             <div v-else class="mt-8">
+            <!-- logs -->
+            <div v-else class="mt-8">
                 <UAccordion
                     type="multiple"
                     class="bg-slate-50 w-full"
@@ -158,78 +161,131 @@ function confirmAction(id: string) {
                         item: 'border-none mt-4',
                         header: 'px-0',
                         trigger: 'block w-full text-left p-0',
-                        trailingIcon: 'hidden pointer-events-none'
+                        trailingIcon: 'hidden pointer-events-none',
                     }"
-                    >
+                >
                     <!-- Header (matches inbox pattern) -->
                     <template #default="{ item, open }">
                         <div class="bg-white rounded-xl p-5">
-                            <div class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full">
+                            <div
+                                class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full"
+                            >
                                 <div class="min-w-0">
-                                <h2 class="text-lg font-semibold truncate">{{ item.label }}</h2>
-                                <p class="text-sm text-gray-500 flex gap-3">
-                                    <span class="truncate">{{ item.event }}</span>
-                                    <span class="whitespace-nowrap">{{ item.date }}</span>
-                                </p>
+                                    <h2 class="text-lg font-semibold truncate">
+                                        {{ item.label }}
+                                    </h2>
+                                    <p class="text-sm text-gray-500 flex gap-3">
+                                        <span class="truncate">{{
+                                            item.event
+                                        }}</span>
+                                        <span class="whitespace-nowrap">{{
+                                            item.date
+                                        }}</span>
+                                    </p>
                                 </div>
 
-                                <p class="text-xl font-bold text-teal-600 whitespace-nowrap">
-                                {{ item.hours }} hrs
+                                <p
+                                    class="text-xl font-bold text-teal-600 whitespace-nowrap"
+                                >
+                                    {{ item.hours }} hrs
                                 </p>
 
                                 <span
-                                class="text-gray-400 transition-transform duration-200"
-                                :class="open ? 'rotate-180' : ''"
+                                    class="text-gray-400 transition-transform duration-200"
+                                    :class="open ? 'rotate-180' : ''"
                                 >
-                                ▾
+                                    ▾
                                 </span>
                             </div>
                         </div>
-                        </template>
-                            <!-- Expanded content -->
-                            <template #content="{ item }">
-                                <div class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1 ">
-                                <div class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2">
-                                    <p><span class="font-medium">Event:</span> {{ item.event }}</p>
-                                    <p><span class="font-medium">Date:</span> {{ item.date }}</p>
-                                    <p><span class="font-medium">Hours:</span> {{ item.hours }}</p>
-                                    <p><span class="font-medium">Status:</span> {{ item.status }}</p>
-                                    <p v-if="item.comment"><span class="font-medium">Comment:</span> {{ item.comment }}</p>
-                                </div>
+                    </template>
+                    <!-- Expanded content -->
+                    <template #content="{ item }">
+                        <div
+                            class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1"
+                        >
+                            <div
+                                class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2"
+                            >
+                                <p>
+                                    <span class="font-medium">Event:</span>
+                                    {{ item.event }}
+                                </p>
+                                <p>
+                                    <span class="font-medium">Date:</span>
+                                    {{ item.date }}
+                                </p>
+                                <p>
+                                    <span class="font-medium">Hours:</span>
+                                    {{ item.hours }}
+                                </p>
+                                <p>
+                                    <span class="font-medium">Status:</span>
+                                    {{ item.status }}
+                                </p>
+                                <p v-if="item.comment">
+                                    <span class="font-medium">Comment:</span>
+                                    {{ item.comment }}
+                                </p>
+                            </div>
 
-                                <div v-if="item.status === 'PENDING'" class="space-y-3">
-                                    <!-- Normal buttons -->
-                                    <div v-if="actioningId !== item.id" class="flex gap-2">
-                                        <button
+                            <div
+                                v-if="item.status === 'PENDING'"
+                                class="space-y-3"
+                            >
+                                <!-- Normal buttons -->
+                                <div
+                                    v-if="actioningId !== item.id"
+                                    class="flex gap-2"
+                                >
+                                    <button
                                         class="px-4 py-2 rounded-full bg-teal-600 text-white hover:bg-teal-700"
-                                        @click.stop="startAction(item.id, 'approve')"
-                                        >
+                                        @click.stop="
+                                            startAction(item.id, 'approve')
+                                        "
+                                    >
                                         Approve
-                                        </button>
+                                    </button>
 
-                                        <button
+                                    <button
                                         class="px-4 py-2 rounded-full bg-rose-600 text-white hover:bg-rose-700"
-                                        @click.stop="startAction(item.id, 'reject')"
-                                        >
+                                        @click.stop="
+                                            startAction(item.id, 'reject')
+                                        "
+                                    >
                                         Reject
-                                        </button>
-                                    </div>
-                                    <!-- Inline reject reason (only for this log) -->
-                                    <div v-else class="mt-3 space-y-2">
-                                        <label class="text-sm font-medium text-gray-700">
-                                        {{ actionType === 'reject' ? 'Rejection reason' : 'Comment (optional)' }}
-                                        <span v-if="actionType === 'reject'" class="text-rose-600">*</span>
-                                        </label>
+                                    </button>
+                                </div>
+                                <!-- Inline reject reason (only for this log) -->
+                                <div v-else class="mt-3 space-y-2">
+                                    <label
+                                        class="text-sm font-medium text-gray-700"
+                                    >
+                                        {{
+                                            actionType === "reject"
+                                                ? "Rejection reason"
+                                                : "Comment (optional)"
+                                        }}
+                                        <span
+                                            v-if="actionType === 'reject'"
+                                            class="text-rose-600"
+                                            >*</span
+                                        >
+                                    </label>
 
-                                        <textarea
+                                    <textarea
                                         v-model="commentDraft[item.id]"
                                         rows="3"
                                         class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
-                                        :class="actionType === 'reject' ? 'focus:ring-rose-300' : 'focus:ring-teal-300'"
+                                        :class="
+                                            actionType === 'reject'
+                                                ? 'focus:ring-rose-300'
+                                                : 'focus:ring-teal-300'
+                                        "
                                         @click.stop
-                                        />
+                                    />
 
-                                        <div class="flex gap-2">
+                                    <div class="flex gap-2">
                                         <button
                                             class="px-4 py-2 rounded-lg border"
                                             @click.stop="cancelAction"
@@ -239,19 +295,32 @@ function confirmAction(id: string) {
 
                                         <button
                                             class="px-4 py-2 rounded-lg bg-rose-600 text-white disabled:opacity-50"
-                                            :class="actionType === 'reject' ? 'bg-rose-600' : 'bg-teal-600'"
-                                            :disabled="actionType === 'reject' && !(commentDraft[item.id] || '').trim()"
+                                            :class="
+                                                actionType === 'reject'
+                                                    ? 'bg-rose-600'
+                                                    : 'bg-teal-600'
+                                            "
+                                            :disabled="
+                                                actionType === 'reject' &&
+                                                !(
+                                                    commentDraft[item.id] || ''
+                                                ).trim()
+                                            "
                                             @click.stop="confirmAction(item.id)"
                                         >
-                                            {{ actionType === 'reject' ? 'Confirm Reject' : 'Confirm Approve' }}
+                                            {{
+                                                actionType === "reject"
+                                                    ? "Confirm Reject"
+                                                    : "Confirm Approve"
+                                            }}
                                         </button>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </template>
+                        </div>
+                    </template>
                 </UAccordion>
             </div>
-         </div>
+        </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 1b1e25b..8fd1b44 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,512 +1,656 @@
 <script setup>
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { ref, computed, onMounted } from "vue"
+import "maplibre-gl/dist/maplibre-gl.css";
+import { ref, computed, onMounted } from "vue";
 
-const route = useRoute()
+const route = useRoute();
 
 // Get the ID from the route params
-const eventId = route.params.id
-const { data: event} = await useFetch(`/api/events/${route.params.id}`)
+const eventId = route.params.id;
+const { data: event } = await useFetch(`/api/events/${route.params.id}`);
 
-const loading = ref(true)
-const notFound = ref(false)
+const loading = ref(true);
+const notFound = ref(false);
 
-const isEditMode = ref(false)
-const editForm = ref({ mobileClinic: false })
+const isEditMode = ref(false);
+const editForm = ref({ mobileClinic: false });
 
 //placeholder until we implement auth
 const admin = true;
 
-
 // Fetch event data from API on mount
 onMounted(async () => {
-  try {
-    console.log('📡 Loading event with ID:', eventId)
-    
-    // Fetch event from your backend API
-    event.value = await $fetch(`/api/events/${eventId}`)
-    
-    editForm.value = { ...event.value, mobileClinic: Boolean(event.value?.mobileClinicId) }
-    
-    console.log('✅ Event loaded:', event.value)
-    loading.value = false
-    
-  } catch (error) {
-    console.error('❌ Error fetching event:', error)
-    loading.value = false
-    notFound.value = true
-  }
-})
+    try {
+        console.log("📡 Loading event with ID:", eventId);
+
+        // Fetch event from your backend API
+        event.value = await $fetch(`/api/events/${eventId}`);
+
+        editForm.value = {
+            ...event.value,
+            mobileClinic: Boolean(event.value?.mobileClinicId),
+        };
+
+        console.log("✅ Event loaded:", event.value);
+        loading.value = false;
+    } catch (error) {
+        console.error("❌ Error fetching event:", error);
+        loading.value = false;
+        notFound.value = true;
+    }
+});
 
 const formattedDate = computed(() => {
-  if (!event.value) return ''
-  
-  const start = new Date(event.value.startTime)
-  const end = new Date(event.value.endTime)
-  
-  const dateStr = start.toLocaleDateString('en-US', { 
-    weekday: 'long', 
-    year: 'numeric', 
-    month: 'long', 
-    day: 'numeric' 
-  })
-  
-  const startTime = start.toLocaleTimeString('en-US', { 
-    hour: 'numeric', 
-    minute: '2-digit' 
-  })
-  
-  const endTime = end.toLocaleTimeString('en-US', { 
-    hour: 'numeric', 
-    minute: '2-digit' 
-  })
-  
-  return `${dateStr} • ${startTime} - ${endTime}`
-})
-
-const style = '/mapstyles.json'
-const center = computed(() => [event.value.location.longitude, event.value.location.latitude])
-const zoom = 15
+    if (!event.value) return "";
+
+    const start = new Date(event.value.startTime);
+    const end = new Date(event.value.endTime);
+
+    const dateStr = start.toLocaleDateString("en-US", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+    });
+
+    const startTime = start.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+    });
+
+    const endTime = end.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+    });
+
+    return `${dateStr} • ${startTime} - ${endTime}`;
+});
+
+const style = "/mapstyles.json";
+const center = computed(() => [
+    event.value.location.longitude,
+    event.value.location.latitude,
+]);
+const zoom = 15;
 
 function toggleEditMode() {
-  if (isEditMode.value) {
-    // Cancel editing - reset form to original event data
-    editForm.value = { ...event.value, mobileClinic: Boolean(event.value?.mobileClinicId) }
-  }
-  isEditMode.value = !isEditMode.value
+    if (isEditMode.value) {
+        // Cancel editing - reset form to original event data
+        editForm.value = {
+            ...event.value,
+            mobileClinic: Boolean(event.value?.mobileClinicId),
+        };
+    }
+    isEditMode.value = !isEditMode.value;
 }
 
-
 async function saveChanges() {
-  try {
-    console.log('💾 Saving changes...')
-    
-    // Update event via API
-    const updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
-      method: 'PATCH',
-      body: {
-        title: editForm.value.title,
-        shortDesc: editForm.value.shortDesc,
-        description: editForm.value.description,
-        location: editForm.value.location,
-        startTime: new Date(editForm.value.startTime).toISOString(),
-        endTime: new Date(editForm.value.endTime).toISOString(),
-        allowVolunteers: editForm.value.allowVolunteers,
-        allowAttendees: editForm.value.allowAttendees,
-        mobileClinic: editForm.value.mobileClinic
-      }
-    })
-    
-    // Update local event data
-    event.value = { ...editForm.value }
-
-    //update map center if location changed
-    if (editForm.value.location.address !== event.value.location.address) {
-      center.value = [editForm.value.location.longitude, editForm.value.location.latitude]
-    }
-    
-    isEditMode.value = false
-    
-    console.log('✅ Event updated successfully')
-  } catch (error) {
-    if(error.status === 500){
-      alert('Failed to geocode the provided location. Please check the address and try again.')
-      return
+    try {
+        console.log("💾 Saving changes...");
+
+        // Update event via API
+        const _updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
+            method: "PATCH",
+            body: {
+                title: editForm.value.title,
+                shortDesc: editForm.value.shortDesc,
+                description: editForm.value.description,
+                location: editForm.value.location,
+                startTime: new Date(editForm.value.startTime).toISOString(),
+                endTime: new Date(editForm.value.endTime).toISOString(),
+                allowVolunteers: editForm.value.allowVolunteers,
+                allowAttendees: editForm.value.allowAttendees,
+                mobileClinic: editForm.value.mobileClinic,
+            },
+        });
+
+        // Update local event data
+        event.value = { ...editForm.value };
+
+        //update map center if location changed
+        if (editForm.value.location.address !== event.value.location.address) {
+            center.value = [
+                editForm.value.location.longitude,
+                editForm.value.location.latitude,
+            ];
+        }
+
+        isEditMode.value = false;
+
+        console.log("✅ Event updated successfully");
+    } catch (error) {
+        if (error.status === 500) {
+            alert(
+                "Failed to geocode the provided location. Please check the address and try again.",
+            );
+            return;
+        }
+        console.error("❌ Error updating event:", error);
+        alert("Error updating event. Please try again.");
     }
-    console.error('❌ Error updating event:', error)
-    alert('Error updating event. Please try again.')
-  }
 }
 
 const placeholders = [
-  'https://picsum.photos/640/640?random=1',
-  'https://picsum.photos/640/640?random=2',
-  'https://picsum.photos/640/640?random=3',
-  'https://picsum.photos/640/640?random=4',
-  'https://picsum.photos/640/640?random=5',
-  'https://picsum.photos/640/640?random=6'
-]
+    "https://picsum.photos/640/640?random=1",
+    "https://picsum.photos/640/640?random=2",
+    "https://picsum.photos/640/640?random=3",
+    "https://picsum.photos/640/640?random=4",
+    "https://picsum.photos/640/640?random=5",
+    "https://picsum.photos/640/640?random=6",
+];
 
-const filesToUpload = ref([])
+const filesToUpload = ref([]);
 
 function handleImageUpload(event) {
-  const files = event.target?.files || event
-  
-  if (!files || files.length === 0) return
-  
-  // Store actual File objects for upload
-  filesToUpload.value = [...filesToUpload.value, ...Array.from(files)]
-  
-  // Create preview URLs
-  const imagePromises = Array.from(files).map(file => {
-    return new Promise((resolve) => {
-      const reader = new FileReader()
-      reader.onload = (e) => resolve({ 
-        imageUrl: e.target.result,
-        fileName: file.name,
-        isPreview: true 
-      })
-      reader.readAsDataURL(file)
-    })
-  })
-  
-  Promise.all(imagePromises).then(images => {
-    editForm.value.eventAssets = [...(editForm.value.eventAssets || []), ...images]
-  })
+    const files = event.target?.files || event;
+
+    if (!files || files.length === 0) return;
+
+    // Store actual File objects for upload
+    filesToUpload.value = [...filesToUpload.value, ...Array.from(files)];
+
+    // Create preview URLs
+    const imagePromises = Array.from(files).map((file) => {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (e) =>
+                resolve({
+                    imageUrl: e.target.result,
+                    fileName: file.name,
+                    isPreview: true,
+                });
+            reader.readAsDataURL(file);
+        });
+    });
+
+    Promise.all(imagePromises).then((images) => {
+        editForm.value.eventAssets = [
+            ...(editForm.value.eventAssets || []),
+            ...images,
+        ];
+    });
 }
 
 async function uploadNewImages() {
-  if (filesToUpload.value.length === 0) return
-  
-  console.log(`📤 Uploading ${filesToUpload.value.length} new images...`)
-  
-  for (const file of filesToUpload.value) {
-    const formData = new FormData()
-    formData.append('file', file)
-    
-    try {
-      await $fetch(`/api/events/${event.value.id}/images/upload`, {
-        method: 'POST',
-        body: formData
-      })
-      console.log(`✅ Uploaded: ${file.name}`)
-    } catch (uploadError) {
-      console.error(`❌ Failed to upload ${file.name}:`, uploadError)
+    if (filesToUpload.value.length === 0) return;
+
+    console.log(`📤 Uploading ${filesToUpload.value.length} new images...`);
+
+    for (const file of filesToUpload.value) {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+            await $fetch(`/api/events/${event.value.id}/images/upload`, {
+                method: "POST",
+                body: formData,
+            });
+            console.log(`✅ Uploaded: ${file.name}`);
+        } catch (uploadError) {
+            console.error(`❌ Failed to upload ${file.name}:`, uploadError);
+        }
     }
-  }
-  
-  // Clear the upload queue
-  filesToUpload.value = []
-  
-  // Reload event to get updated image URLs
-  const updatedEvent = await $fetch(`/api/events/${event.value.id}`)
-  event.value = updatedEvent
-  editForm.value = { ...updatedEvent }
+
+    // Clear the upload queue
+    filesToUpload.value = [];
+
+    // Reload event to get updated image URLs
+    const updatedEvent = await $fetch(`/api/events/${event.value.id}`);
+    event.value = updatedEvent;
+    editForm.value = { ...updatedEvent };
 }
 
 function removeImage(index) {
-  // const asset = editForm.value.eventAssets[index]
-  
-  // If it's a preview (not yet uploaded), just remove from array
-  editForm.value.eventAssets.splice(index, 1)
-  filesToUpload.value.splice(index, 1)
+    // const asset = editForm.value.eventAssets[index]
 
+    // If it's a preview (not yet uploaded), just remove from array
+    editForm.value.eventAssets.splice(index, 1);
+    filesToUpload.value.splice(index, 1);
 }
 
 // Helper to get proper image URL
 function getImageUrl(asset) {
-  if (asset.isPreview) {
-    return asset.imageUrl // Base64 preview
-  }
-  // Use your backend image endpoint
-  return `/api/events/${event.value.id}/images/${asset.imageUrl.split('/').pop()}`
+    if (asset.isPreview) {
+        return asset.imageUrl; // Base64 preview
+    }
+    // Use your backend image endpoint
+    return `/api/events/${event.value.id}/images/${asset.imageUrl.split("/").pop()}`;
 }
 
-const fetchedItems = event.value?.eventAssets.map((asset) => "/api/events/" + asset.imageUrl)
+const fetchedItems = event.value?.eventAssets.map(
+    (asset) => "/api/events/" + asset.imageUrl,
+);
 
-const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
+const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders;
 
 const backNavigate = computed(() => {
-  return admin ? '/events/manage' : '/events'
-})
+    return admin ? "/events/manage" : "/events";
+});
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50 pb-24">
-    <!-- Loading State -->
-    <div v-if="loading" class="flex items-center justify-center min-h-screen">
-      <div class="text-center">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"/>
-        <p class="text-gray-600">Loading event...</p>
-      </div>
-    </div>
-
-    <!-- Not Found State -->
-    <div v-else-if="notFound" class="flex items-center justify-center min-h-screen">
-      <div class="text-center">
-        <UIcon name="i-lucide-calendar-x" class="w-16 h-16 text-gray-400 mx-auto mb-4" />
-        <h2 class="text-2xl font-bold text-gray-900 mb-2">Event Not Found</h2>
-        <p class="text-gray-600 mb-4">The event you're looking for doesn't exist.</p>
-        <UButton 
-          icon="i-lucide-arrow-left"
-          @click="navigateTo('/eventManagement')"
+    <div class="min-h-screen bg-gray-50 pb-24">
+        <!-- Loading State -->
+        <div
+            v-if="loading"
+            class="flex items-center justify-center min-h-screen"
         >
-          Back to Events
-        </UButton>
-      </div>
-    </div>
-
-    <!-- Event Details -->
-    <div v-else>
-      <!-- Header with Edit Button -->
-      <div class="bg-white shadow-sm sticky top-0 z-10 mt-16">
-        <div class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
-          <UButton
-            icon="i-lucide-arrow-left"
-            variant="ghost"
-            class="text-brand4"
-            @click="navigateTo(backNavigate)"
-          />
-          
-          <div v-if="admin" class="flex gap-2">
-            <UButton
-              v-if="!isEditMode"
-              icon="i-lucide-pencil"
-              color="brand4"
-              variant="soft"
-              @click="toggleEditMode"
-            >
-              Edit Event
-            </UButton>
-            
-            <template v-else>
-              <UButton
-                variant="ghost"
-                color="brand4"
-                @click="toggleEditMode"
-              >
-                Cancel
-              </UButton>
-              <UButton
-                icon="i-lucide-check"
-                color="brand4"
-                @click="async () => { await saveChanges(); await uploadNewImages(); }"
-              >
-                Save Changes
-              </UButton>
-            </template>
-          </div>
-        </div>
-      </div>
-
-      <div class="max-w-4xl mx-auto px-4 py-8">
-        
-        
-        <!-- Event Title -->
-        <div class="mb-6">
-          <h1  v-if="!isEditMode"  class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center">{{ event.title }}</h1>
-
-          <UInput
-            v-else
-            v-model="editForm.title"
-            size="xl"
-            placeholder="Event Title"
-            class="text-4xl font-bold"
-            
-          />
-        </div>
-
-        <!-- Short Description -->
-        <div v-if="event.shortDesc || isEditMode" class="bg-brand6 rounded-2xl p-3 mb-6">
-          <p v-if="!isEditMode" class="text-md text-gray-700 italic">
-            {{ event.shortDesc }}
-          </p>
-          <UInput
-            v-else
-            v-model="editForm.shortDesc"
-            class="w-full"
-            placeholder="Short Description"
-            size="lg"
-          />
+            <div class="text-center">
+                <div
+                    class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"
+                />
+                <p class="text-gray-600">Loading event...</p>
+            </div>
         </div>
 
-        <!-- Event Images Carousel -->
-        <div class="mb-8">
-          <UCarousel v-if="!isEditMode" v-slot="{ item }" dots :items="items" class="h-80 max-w-xs mx-auto">
-          <img :src="item" class="h-80 w-auto rounded-lg mx-auto">
-          </UCarousel>
-          
-          <!-- Edit Mode Images -->
-          <div v-else class="space-y-4">
-            <div v-if="editForm.eventAssets && editForm.eventAssets.length > 0" class="grid grid-cols-2 gap-4">
-              <div 
-                v-for="(asset, index) in editForm.eventAssets"
-                :key="index"
-                class="relative h-48 rounded-xl overflow-hidden group"
-              >
-                <img 
-                  :src="getImageUrl(asset)" 
-                  alt="Event image"
-                  class="w-full h-full object-cover"
-                >
-                <button
-                  class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
-                  type="button"
-                  @click="removeImage(index)"
+        <!-- Not Found State -->
+        <div
+            v-else-if="notFound"
+            class="flex items-center justify-center min-h-screen"
+        >
+            <div class="text-center">
+                <UIcon
+                    name="i-lucide-calendar-x"
+                    class="w-16 h-16 text-gray-400 mx-auto mb-4"
+                />
+                <h2 class="text-2xl font-bold text-gray-900 mb-2">
+                    Event Not Found
+                </h2>
+                <p class="text-gray-600 mb-4">
+                    The event you're looking for doesn't exist.
+                </p>
+                <UButton
+                    icon="i-lucide-arrow-left"
+                    @click="navigateTo('/eventManagement')"
                 >
-                  <UIcon name="i-lucide-x" class="w-4 h-4" />
-                </button>
-              </div>
+                    Back to Events
+                </UButton>
             </div>
-            
-            <div>
-              <label class="block text-sm font-medium text-gray-700 mb-2">
-                Add Event Images
-              </label>
-              <input
-                type="file"
-                multiple
-                accept="image/*"
-                class="block w-full text-sm text-gray-500
-                  file:mr-4 file:py-2 file:px-4
-                  file:rounded-full file:border-0
-                  file:text-sm file:font-semibold
-                  file:bg-primary-50 file:text-brand4
-                  hover:file:bg-primary-100
-                  cursor-pointer"
-                  @change="handleImageUpload"
-              >
-            </div>
-          </div>
         </div>
-        
 
-        <!-- Date & Location Card -->
-        <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-          <div class="flex items-start gap-4 mb-4">
-            <div class="bg-brand6 p-3 rounded-xl">
-              <UIcon name="i-lucide-calendar" class="w-6 h-6 text-brand4" />
+        <!-- Event Details -->
+        <div v-else>
+            <!-- Header with Edit Button -->
+            <div class="bg-white shadow-sm sticky top-0 z-10 mt-16">
+                <div
+                    class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"
+                >
+                    <UButton
+                        icon="i-lucide-arrow-left"
+                        variant="ghost"
+                        class="text-brand4"
+                        @click="navigateTo(backNavigate)"
+                    />
+
+                    <div v-if="admin" class="flex gap-2">
+                        <UButton
+                            v-if="!isEditMode"
+                            icon="i-lucide-pencil"
+                            color="brand4"
+                            variant="soft"
+                            @click="toggleEditMode"
+                        >
+                            Edit Event
+                        </UButton>
+
+                        <template v-else>
+                            <UButton
+                                variant="ghost"
+                                color="brand4"
+                                @click="toggleEditMode"
+                            >
+                                Cancel
+                            </UButton>
+                            <UButton
+                                icon="i-lucide-check"
+                                color="brand4"
+                                @click="
+                                    async () => {
+                                        await saveChanges();
+                                        await uploadNewImages();
+                                    }
+                                "
+                            >
+                                Save Changes
+                            </UButton>
+                        </template>
+                    </div>
+                </div>
             </div>
-            <div class="flex-1">
-              <p class="text-sm text-gray-500 mb-1">Date & Time</p>
-              <p v-if="!isEditMode" class="text-gray-900 font-medium">
-                {{ formattedDate }}
-              </p>
-              <div v-else class="grid grid-rows-2 gap-2">
-                <div>
-                  <label class="text-xs text-gray-500">Start </label>
-                  <UInput v-model="editForm.startTime" type="datetime-local" />
+
+            <div class="max-w-4xl mx-auto px-4 py-8">
+                <!-- Event Title -->
+                <div class="mb-6">
+                    <h1
+                        v-if="!isEditMode"
+                        class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center"
+                    >
+                        {{ event.title }}
+                    </h1>
+
+                    <UInput
+                        v-else
+                        v-model="editForm.title"
+                        size="xl"
+                        placeholder="Event Title"
+                        class="text-4xl font-bold"
+                    />
                 </div>
-                <div>
-                  <label class="text-xs text-gray-500">End </label>
-                  <UInput v-model="editForm.endTime" type="datetime-local" />
+
+                <!-- Short Description -->
+                <div
+                    v-if="event.shortDesc || isEditMode"
+                    class="bg-brand6 rounded-2xl p-3 mb-6"
+                >
+                    <p v-if="!isEditMode" class="text-md text-gray-700 italic">
+                        {{ event.shortDesc }}
+                    </p>
+                    <UInput
+                        v-else
+                        v-model="editForm.shortDesc"
+                        class="w-full"
+                        placeholder="Short Description"
+                        size="lg"
+                    />
                 </div>
-              </div>
-            </div>
-          </div>
 
-          
+                <!-- Event Images Carousel -->
+                <div class="mb-8">
+                    <UCarousel
+                        v-if="!isEditMode"
+                        v-slot="{ item }"
+                        dots
+                        :items="items"
+                        class="h-80 max-w-xs mx-auto"
+                    >
+                        <img
+                            :src="item"
+                            class="h-80 w-auto rounded-lg mx-auto"
+                        >
+                    </UCarousel>
+
+                    <!-- Edit Mode Images -->
+                    <div v-else class="space-y-4">
+                        <div
+                            v-if="
+                                editForm.eventAssets &&
+                                editForm.eventAssets.length > 0
+                            "
+                            class="grid grid-cols-2 gap-4"
+                        >
+                            <div
+                                v-for="(asset, index) in editForm.eventAssets"
+                                :key="index"
+                                class="relative h-48 rounded-xl overflow-hidden group"
+                            >
+                                <img
+                                    :src="getImageUrl(asset)"
+                                    alt="Event image"
+                                    class="w-full h-full object-cover"
+                                >
+                                <button
+                                    class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                                    type="button"
+                                    @click="removeImage(index)"
+                                >
+                                    <UIcon name="i-lucide-x" class="w-4 h-4" />
+                                </button>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label
+                                class="block text-sm font-medium text-gray-700 mb-2"
+                            >
+                                Add Event Images
+                            </label>
+                            <input
+                                type="file"
+                                multiple
+                                accept="image/*"
+                                class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-brand4 hover:file:bg-primary-100 cursor-pointer"
+                                @change="handleImageUpload"
+                            >
+                        </div>
+                    </div>
+                </div>
 
-          <div class="flex items-start gap-4">
-            <div class="bg-brand6 p-3 rounded-xl">
-              <UIcon name="i-lucide-map-pin" class="w-6 h-6 text-brand4" />
-            </div>
-            <div class="flex-1">
-              <p class="text-sm text-gray-500 mb-1">Location</p>
-              <p v-if="!isEditMode" class="text-gray-900 font-medium">
-                {{ event.location.address }}
-              </p>
-              <UInput
-                v-else
-                v-model="editForm.location.address"
-                placeholder="Event Location"
-              />
-            </div>
-          </div>
-        </div>
-        
-        <div v-if="!isEditMode" id="map" class="h-60 relative overflow-hidden justify-center items-center mb-6">
-          <MapInteractive :style="style" :center="center" :zoom="zoom" />
-        </div>
+                <!-- Date & Location Card -->
+                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+                    <div class="flex items-start gap-4 mb-4">
+                        <div class="bg-brand6 p-3 rounded-xl">
+                            <UIcon
+                                name="i-lucide-calendar"
+                                class="w-6 h-6 text-brand4"
+                            />
+                        </div>
+                        <div class="flex-1">
+                            <p class="text-sm text-gray-500 mb-1">
+                                Date & Time
+                            </p>
+                            <p
+                                v-if="!isEditMode"
+                                class="text-gray-900 font-medium"
+                            >
+                                {{ formattedDate }}
+                            </p>
+                            <div v-else class="grid grid-rows-2 gap-2">
+                                <div>
+                                    <label class="text-xs text-gray-500"
+                                        >Start
+                                    </label>
+                                    <UInput
+                                        v-model="editForm.startTime"
+                                        type="datetime-local"
+                                    />
+                                </div>
+                                <div>
+                                    <label class="text-xs text-gray-500"
+                                        >End
+                                    </label>
+                                    <UInput
+                                        v-model="editForm.endTime"
+                                        type="datetime-local"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-start gap-4">
+                        <div class="bg-brand6 p-3 rounded-xl">
+                            <UIcon
+                                name="i-lucide-map-pin"
+                                class="w-6 h-6 text-brand4"
+                            />
+                        </div>
+                        <div class="flex-1">
+                            <p class="text-sm text-gray-500 mb-1">Location</p>
+                            <p
+                                v-if="!isEditMode"
+                                class="text-gray-900 font-medium"
+                            >
+                                {{ event.location.address }}
+                            </p>
+                            <UInput
+                                v-else
+                                v-model="editForm.location.address"
+                                placeholder="Event Location"
+                            />
+                        </div>
+                    </div>
+                </div>
 
-        <!-- Full Description -->
-        <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-          <h2 class="text-2xl font-semibold mb-4">About This Event</h2>
-          <p v-if="!isEditMode" class="text-gray-700 leading-relaxed whitespace-pre-line">
-            {{ event.description }}
-          </p>
-          <UTextarea
-            v-else
-            v-model="editForm.description"
-            class="w-full"
-            placeholder="Full event description"
-            :rows="6"
-          />
-        </div>
+                <div
+                    v-if="!isEditMode"
+                    id="map"
+                    class="h-60 relative overflow-hidden justify-center items-center mb-6"
+                >
+                    <MapInteractive
+                        :style="style"
+                        :center="center"
+                        :zoom="zoom"
+                    />
+                </div>
 
-        <div v-if="event.mobileClinicId" class="mt-4 mb-4">
-          <p class="text-gray-600 font-poppins">
-            This event is part of our Mobile Clinic program. Please visit the clinic for health services and support.
-          </p>  
-        </div>
+                <!-- Full Description -->
+                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+                    <h2 class="text-2xl font-semibold mb-4">
+                        About This Event
+                    </h2>
+                    <p
+                        v-if="!isEditMode"
+                        class="text-gray-700 leading-relaxed whitespace-pre-line"
+                    >
+                        {{ event.description }}
+                    </p>
+                    <UTextarea
+                        v-else
+                        v-model="editForm.description"
+                        class="w-full"
+                        placeholder="Full event description"
+                        :rows="6"
+                    />
+                </div>
 
-        <!-- Event Options -->
-        <div v-if="admin && isEditMode" class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-          <h2 class="text-2xl font-semibold mb-4">Event Settings</h2>
-          
-          <div class="space-y-4">
-            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
-              <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-users" class="w-5 h-5 text-brand4" />
-                <div>
-                  <p class="font-medium text-gray-900">Volunteer Sign-ups</p>
-                  <p class="text-sm text-gray-500">Allow people to volunteer for this event?</p>
+                <div v-if="event.mobileClinicId" class="mt-4 mb-4">
+                    <p class="text-gray-600 font-poppins">
+                        This event is part of our Mobile Clinic program. Please
+                        visit the clinic for health services and support.
+                    </p>
                 </div>
-              </div>
-              <label class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="editForm.allowVolunteers" color="brand4" />
-              </label>
-            </div>
 
-            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
-              <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
-                <div>
-                  <p class="font-medium text-gray-900">Attendee Registration</p>
-                  <p class="text-sm text-gray-500">Allow people to register as attendees?</p>
+                <!-- Event Options -->
+                <div
+                    v-if="admin && isEditMode"
+                    class="bg-white rounded-2xl shadow-sm p-6 mb-6"
+                >
+                    <h2 class="text-2xl font-semibold mb-4">Event Settings</h2>
+
+                    <div class="space-y-4">
+                        <div
+                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+                        >
+                            <div class="flex items-center gap-3">
+                                <UIcon
+                                    name="i-lucide-users"
+                                    class="w-5 h-5 text-brand4"
+                                />
+                                <div>
+                                    <p class="font-medium text-gray-900">
+                                        Volunteer Sign-ups
+                                    </p>
+                                    <p class="text-sm text-gray-500">
+                                        Allow people to volunteer for this
+                                        event?
+                                    </p>
+                                </div>
+                            </div>
+                            <label
+                                class="flex items-center gap-2 cursor-pointer"
+                            >
+                                <UCheckbox
+                                    v-model="editForm.allowVolunteers"
+                                    color="brand4"
+                                />
+                            </label>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+                        >
+                            <div class="flex items-center gap-3">
+                                <UIcon
+                                    name="i-lucide-ticket"
+                                    class="w-5 h-5 text-brand4"
+                                />
+                                <div>
+                                    <p class="font-medium text-gray-900">
+                                        Attendee Registration
+                                    </p>
+                                    <p class="text-sm text-gray-500">
+                                        Allow people to register as attendees?
+                                    </p>
+                                </div>
+                            </div>
+                            <label
+                                v-if="isEditMode"
+                                class="flex items-center gap-2 cursor-pointer"
+                            >
+                                <UCheckbox
+                                    v-model="editForm.allowAttendees"
+                                    color="brand4"
+                                />
+                            </label>
+                            <label v-else class="flex items-center gap-2">
+                                <UCheckbox
+                                    :model-value="event.allowAttendees"
+                                    color="brand4"
+                                    disabled
+                                />
+                            </label>
+                        </div>
+
+                        <div
+                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+                        >
+                            <div class="flex items-center gap-3">
+                                <UIcon
+                                    name="i-lucide-ticket"
+                                    class="w-5 h-5 text-brand4"
+                                />
+                                <div>
+                                    <p class="font-medium text-gray-900">
+                                        Mobile Clinic
+                                    </p>
+                                    <p class="text-sm text-gray-500">
+                                        Will this event have a mobile clinic?
+                                    </p>
+                                </div>
+                            </div>
+                            <label
+                                v-if="isEditMode"
+                                class="flex items-center gap-2 cursor-pointer"
+                            >
+                                <UCheckbox
+                                    v-model="editForm.mobileClinic"
+                                    color="brand4"
+                                />
+                            </label>
+                            <label v-else class="flex items-center gap-2">
+                                <UCheckbox
+                                    :model-value="Boolean(event.mobileClinicId)"
+                                    color="brand4"
+                                    disabled
+                                />
+                            </label>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <label v-if="isEditMode" class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="editForm.allowAttendees" color="brand4" />
-              </label>
-              <label v-else class="flex items-center gap-2">
-                <UCheckbox :model-value="event.allowAttendees" color="brand4" disabled />
-              </label>
-            </div>
 
-            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
-              <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
-                <div>
-                  <p class="font-medium text-gray-900">Mobile Clinic</p>
-                  <p class="text-sm text-gray-500">Will this event have a mobile clinic?</p>
+                <!-- Action Buttons for Attendees/Volunteers -->
+                <div v-if="!isEditMode" class="flex gap-4">
+                    <UButton
+                        v-if="event.allowVolunteers"
+                        color="brand4"
+                        size="xl"
+                        block
+                        icon="i-lucide-heart-handshake"
+                    >
+                        Sign Up as Volunteer
+                    </UButton>
+
+                    <UButton
+                        v-if="event.allowAttendees"
+                        color="brand4"
+                        variant="outline"
+                        size="xl"
+                        block
+                        icon="i-lucide-ticket"
+                    >
+                        Register to Attend
+                    </UButton>
                 </div>
-              </div>
-              <label v-if="isEditMode" class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="editForm.mobileClinic" color="brand4" />
-              </label>
-              <label v-else class="flex items-center gap-2">
-                <UCheckbox :model-value="Boolean(event.mobileClinicId)" color="brand4" disabled />
-              </label>
             </div>
-          </div>
         </div>
-
-        <!-- Action Buttons for Attendees/Volunteers -->
-        <div v-if="!isEditMode" class="flex gap-4">
-          <UButton
-            v-if="event.allowVolunteers"
-            color="brand4"
-            size="xl"
-            block
-            icon="i-lucide-heart-handshake"
-          >
-            Sign Up as Volunteer
-          </UButton>
-          
-          <UButton
-            v-if="event.allowAttendees"
-            color="brand4"
-            variant="outline"
-            size="xl"
-            block
-            icon="i-lucide-ticket"
-          >
-            Register to Attend
-          </UButton>
-        </div>
-
-      </div>
     </div>
-  </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index b9104ca..96979ca 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -43,29 +43,29 @@ const isDateDisabled = (d: DateValue) =>
           <EventTile
             title="Community Health Fair"
             subtitle="Tap to view details"
-            buttonType="arrow"
-            eventId="event1"
+            button-type="arrow"
+            event-id="event1"
             @add="eventClick"
           />
           <EventTile
             title="Support Workshop"
             subtitle="Tap to view details"
-            buttonType="arrow"
-            eventId="event2"
+            button-type="arrow"
+            event-id="event2"
             @add="eventClick"
           />
           <EventTile
             title="Family Clinic"
             subtitle="Tap to view details"
-            buttonType="arrow"
-            eventId="event3"
+            button-type="arrow"
+            event-id="event3"
             @add="eventClick"
           />
           <EventTile
             title="Wellness Check"
             subtitle="Tap to view details"
-            buttonType="arrow"
-            eventId="event4"
+            button-type="arrow"
+            event-id="event4"
             @add="eventClick"
           />
         </div>
diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index 45448c6..3600a68 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -32,7 +32,7 @@
                 :title="event.title"
                 :subtitle="new Date(event.startTime).toLocaleString()"
                 button-type="arrow"
-                :eventId="event.eventId"
+                :event-id="event.eventId"
                 @add="eventClick"
                 @click="handleTileClick(event)"
               />
diff --git a/package.json b/package.json
index 054f68a..719a8f1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
-    "@nuxt/eslint": "^1.9.0",
+    "@nuxt/eslint": "^1.15.0",
     "@types/node": "^24.3.1",
     "@types/parse-path": "^7.1.0",
     "autoprefixer": "^10.4.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 86358a5..e6634f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,8 +58,8 @@ importers:
         specifier: ^1.2.3
         version: 1.2.3
       '@nuxt/eslint':
-        specifier: ^1.9.0
-        version: 1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+        specifier: ^1.15.0
+        version: 1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
       '@types/node':
         specifier: ^24.3.1
         version: 24.12.0
@@ -346,15 +346,9 @@ packages:
   '@chevrotain/utils@10.5.0':
     resolution: {integrity: sha512-hBzuU5+JjB2cqNZyszkDHZgOSrUUT8V3dhgRl8Q9Gp6dAj/H5+KILGjbhDpc3Iy9qmqlm/akuOI2ut9VUtzJxQ==}
 
-  '@clack/core@0.5.0':
-    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}
-
   '@clack/core@1.1.0':
     resolution: {integrity: sha512-SVcm4Dqm2ukn64/8Gub2wnlA5nS2iWJyCkdNHcvNHPIeBTGojpdJ+9cZKwLfmqy7irD4N5qLteSilJlE0WLAtA==}
 
-  '@clack/prompts@0.11.0':
-    resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
-
   '@clack/prompts@1.1.0':
     resolution: {integrity: sha512-pkqbPGtohJAvm4Dphs2M8xE29ggupihHdy1x84HNojZuMtFsHiUlRvqD24tM2+XmI+61LlfNceM3Wr7U5QES5g==}
 
@@ -391,9 +385,9 @@ packages:
   '@emnapi/wasi-threads@1.2.0':
     resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
 
-  '@es-joy/jsdoccomment@0.78.0':
-    resolution: {integrity: sha512-rQkU5u8hNAq2NVRzHnIUUvR6arbO0b6AOlvpTNS48CkiKSn/xtNfOzBK23JE4SiW89DgvU7GtxLVgV4Vn2HBAw==}
-    engines: {node: '>=20.11.0'}
+  '@es-joy/jsdoccomment@0.86.0':
+    resolution: {integrity: sha512-ukZmRQ81WiTpDWO6D/cTBM7XbrNtutHKvAVnZN/8pldAwLoJArGOvkNyxPTBGsPjsoaQBJxlH+tE2TNA/92Qgw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
   '@es-joy/resolve.exports@1.2.0':
     resolution: {integrity: sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==}
@@ -744,6 +738,10 @@ packages:
     resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/config-helpers@0.5.5':
+    resolution: {integrity: sha512-eIJYKTCECbP/nsKaaruF6LW967mtbQbsw4JTtSVkUQc9MneSkbrgPJAbKl9nWr0ZeowV8BfsarBmPpBzGelA2w==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/config-inspector@1.5.0':
     resolution: {integrity: sha512-YK/VdQ+pibx5pcCI2GPZVO6vFemf/pkB662HuFtc5AA4WLQ9upb3fAoZSjOAYoDJx58qGTDp6xq9ldd/vluNxQ==}
     hasBin: true
@@ -758,6 +756,10 @@ packages:
     resolution: {integrity: sha512-QUPblTtE51/7/Zhfv8BDwO0qkkzQL7P/aWWbqcf4xWLEYn1oKjdO0gglQBB4GAsu7u6wjijbCmzsUTy6mnk6oQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@eslint/eslintrc@3.3.5':
     resolution: {integrity: sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -985,6 +987,11 @@ packages:
     peerDependencies:
       vite: '>=6.0'
 
+  '@nuxt/devtools-kit@3.2.4':
+    resolution: {integrity: sha512-Yxy2Xgmq5hf3dQy983V0xh0OJV2mYwRZz9eVIGc3EaribdFGPDNGMMbYqX9qCty3Pbxn/bCF3J0UyPaNlHVayQ==}
+    peerDependencies:
+      vite: '>=6.0'
+
   '@nuxt/devtools-wizard@3.1.0':
     resolution: {integrity: sha512-XYYWnG6SAvALCdXbM+xklqv7sEiVZbKgGparv8jFE5Tt6l8sg80Eb+vM40+Xpdu2KE3VlFKj4F4oFwDXMvAkgA==}
     hasBin: true
@@ -999,24 +1006,24 @@ packages:
       '@vitejs/devtools':
         optional: true
 
-  '@nuxt/eslint-config@1.10.0':
-    resolution: {integrity: sha512-6Ry+sV5FaTBg3a0l+4gcxuz0IsQG5dSF6OxHNDlDx2yTygMOxeCn6vdc2Cz/e4LtYGvwZIlhH9wVlnWnD3+G+Q==}
+  '@nuxt/eslint-config@1.15.2':
+    resolution: {integrity: sha512-vS6mWB87tYjB8h3TxG/QziaZ6CGJpEOBd7N/j+64/tjNipUJzNgKwDzyGoOifNqyDDnlvgi6T3m9XpeYm4qRaA==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
       eslint-plugin-format: '*'
     peerDependenciesMeta:
       eslint-plugin-format:
         optional: true
 
-  '@nuxt/eslint-plugin@1.10.0':
-    resolution: {integrity: sha512-KL8eCdYGuEIVlts/B+MLgL7FCpaPt2HU6m3XBsUdl+LXPI7/eCMSLlFDmDmfz+PuMx0PCGo7ayyDN6cid12Rlw==}
+  '@nuxt/eslint-plugin@1.15.2':
+    resolution: {integrity: sha512-LZ4gEcPP5GjzAkb6Kk04a4v0vvkTLOpmnEvdDatnkSlxtQLUSwX8v11vcDGXL92ZQ98dFoC1Q1IA6Tz3jdFIig==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
 
-  '@nuxt/eslint@1.10.0':
-    resolution: {integrity: sha512-cuq7jRdhVtnqrU5vcy+jW8u/2A7BHwczPkrr/5XIRB10WOA1NLC9Jo+ts4NlWbCdLy/+9jCHcOV0U94pn9SQUw==}
+  '@nuxt/eslint@1.15.2':
+    resolution: {integrity: sha512-LwDavQoLl+y0sIDqWEYbOnM6FOmXVIYSEjuvkO1hgAqhb0CvG3hgTnfE1qkf1jOAZp3CZGP+6rxRAJ0dxhueIQ==}
     peerDependencies:
-      eslint: ^9.0.0
+      eslint: ^9.0.0 || ^10.0.0
       eslint-webpack-plugin: ^4.1.0
       vite-plugin-eslint2: ^5.0.0
     peerDependenciesMeta:
@@ -2104,6 +2111,10 @@ packages:
     resolution: {integrity: sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.59.2':
+    resolution: {integrity: sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.57.0':
     resolution: {integrity: sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2826,14 +2837,14 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  comment-parser@1.4.1:
-    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
-    engines: {node: '>= 12.0.0'}
-
   comment-parser@1.4.5:
     resolution: {integrity: sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==}
     engines: {node: '>= 12.0.0'}
 
+  comment-parser@1.4.6:
+    resolution: {integrity: sha512-ObxuY6vnbWTN6Od72xfwN9DbzC7Y2vv8u1Soi9ahRKL37gb6y1qk6/dgjs+3JWuXJHWvsg3BXIwzd/rkmAwavg==}
+    engines: {node: '>= 12.0.0'}
+
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
@@ -3203,8 +3214,8 @@ packages:
     peerDependencies:
       eslint: ^9.5.0 || ^10.0.0
 
-  eslint-flat-config-utils@2.1.4:
-    resolution: {integrity: sha512-bEnmU5gqzS+4O+id9vrbP43vByjF+8KOs+QuuV4OlqAuXmnRW2zfI/Rza1fQvdihQ5h4DUo0NqFAiViD4mSrzQ==}
+  eslint-flat-config-utils@3.2.0:
+    resolution: {integrity: sha512-PHgo1X5uqIorJONLVD9BIaOSdoYFD3z/AeJljdqDPlWVRpeCYkDbK9k0AXoYVqqNJr6FEYIEr5Rm2TSktLQcHw==}
 
   eslint-import-context@0.1.9:
     resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
@@ -3220,15 +3231,11 @@ packages:
     peerDependencies:
       eslint: '*'
 
-  eslint-plugin-import-lite@0.3.1:
-    resolution: {integrity: sha512-9+EByHZatvWFn/lRsUja5pwah0U5lhOA6SXqTI/iIzoIJHMgmsHUHEaTlLzKU/ukyCRwKEU5E92aUURPgVWq0A==}
+  eslint-plugin-import-lite@0.5.2:
+    resolution: {integrity: sha512-XvfdWOC5dSLEI9krIPRlNmKSI2ViIE9pVylzfV9fCq0ZpDaNeUk6o0wZv0OzN83QdadgXp1NsY0qjLINxwYCsw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=9.0.0'
-      typescript: '>=4.5'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
 
   eslint-plugin-import-x@4.16.2:
     resolution: {integrity: sha512-rM9K8UBHcWKpzQzStn1YRN2T5NvdeIfSVoKu/lKF41znQXHAUcBbYXe5wd6GNjZjTrP7viQ49n1D83x/2gYgIw==}
@@ -3243,20 +3250,20 @@ packages:
       eslint-import-resolver-node:
         optional: true
 
-  eslint-plugin-jsdoc@61.7.1:
-    resolution: {integrity: sha512-36DpldF95MlTX//n3/naULFVt8d1cV4jmSkx7ZKrE9ikkKHAgMLesuWp1SmwpVwAs5ndIM6abKd6PeOYZUgdWg==}
-    engines: {node: '>=20.11.0'}
+  eslint-plugin-jsdoc@62.9.0:
+    resolution: {integrity: sha512-PY7/X4jrVgoIDncUmITlUqK546Ltmx/Pd4Hdsu4CvSjryQZJI2mEV4vrdMufyTetMiZ5taNSqvK//BTgVUlNkA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
 
-  eslint-plugin-regexp@2.10.0:
-    resolution: {integrity: sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==}
-    engines: {node: ^18 || >=20}
+  eslint-plugin-regexp@3.1.0:
+    resolution: {integrity: sha512-qGXIC3DIKZHcK1H9A9+Byz9gmndY6TTSRkSMTZpNXdyCw2ObSehRgccJv35n9AdUakEjQp5VFNLas6BMXizCZg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     peerDependencies:
-      eslint: '>=8.44.0'
+      eslint: '>=9.38.0'
 
-  eslint-plugin-unicorn@62.0.0:
-    resolution: {integrity: sha512-HIlIkGLkvf29YEiS/ImuDZQbP12gWyx5i3C6XrRxMvVdqMroCI9qoVYCoIl17ChN+U89pn9sVwLxhIWj5nEc7g==}
+  eslint-plugin-unicorn@63.0.0:
+    resolution: {integrity: sha512-Iqecl9118uQEXYh7adylgEmGfkn5es3/mlQTLLkd4pXkIk9CTGrAbeUux+YljSa2ohXCBmQQ0+Ej1kZaFgcfkA==}
     engines: {node: ^20.10.0 || >=21.0.0}
     peerDependencies:
       eslint: '>=9.38.0'
@@ -3557,6 +3564,10 @@ packages:
     resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
+  globals@17.6.0:
+    resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
+    engines: {node: '>=18'}
+
   globby@15.0.0:
     resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
     engines: {node: '>=20'}
@@ -3779,14 +3790,14 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsdoc-type-pratt-parser@4.8.0:
-    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
-    engines: {node: '>=12.0.0'}
-
   jsdoc-type-pratt-parser@7.0.0:
     resolution: {integrity: sha512-c7YbokssPOSHmqTbSAmTtnVgAVa/7lumWNYqomgd5KOMyPrRve2anx6lonfOsXEQacqF9FKVUj7bLg4vRSvdYA==}
     engines: {node: '>=20.0.0'}
 
+  jsdoc-type-pratt-parser@7.2.0:
+    resolution: {integrity: sha512-dh140MMgjyg3JhJZY/+iEzW+NO5xR2gpbDFKHqotCmexElVntw7GjWjt511+C/Ef02RU5TKYrJo/Xlzk+OLaTw==}
+    engines: {node: '>=20.0.0'}
+
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -6021,21 +6032,10 @@ snapshots:
 
   '@chevrotain/utils@10.5.0': {}
 
-  '@clack/core@0.5.0':
-    dependencies:
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
   '@clack/core@1.1.0':
     dependencies:
       sisteransi: 1.0.5
 
-  '@clack/prompts@0.11.0':
-    dependencies:
-      '@clack/core': 0.5.0
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
   '@clack/prompts@1.1.0':
     dependencies:
       '@clack/core': 1.1.0
@@ -6081,13 +6081,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@es-joy/jsdoccomment@0.78.0':
+  '@es-joy/jsdoccomment@0.86.0':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.57.0
-      comment-parser: 1.4.1
+      '@typescript-eslint/types': 8.59.2
+      comment-parser: 1.4.6
       esquery: 1.7.0
-      jsdoc-type-pratt-parser: 7.0.0
+      jsdoc-type-pratt-parser: 7.2.0
 
   '@es-joy/resolve.exports@1.2.0': {}
 
@@ -6277,6 +6277,10 @@ snapshots:
     dependencies:
       '@eslint/core': 0.17.0
 
+  '@eslint/config-helpers@0.5.5':
+    dependencies:
+      '@eslint/core': 1.2.1
+
   '@eslint/config-inspector@1.5.0(eslint@9.39.4(jiti@2.6.1))':
     dependencies:
       ansis: 4.2.0
@@ -6300,6 +6304,10 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/eslintrc@3.3.5':
     dependencies:
       ajv: 6.14.0
@@ -6613,6 +6621,14 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/devtools-kit@3.2.4(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@nuxt/kit': 4.4.2(magicast@0.5.2)
+      execa: 8.0.1
+      vite: 7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/devtools-wizard@3.1.0':
     dependencies:
       consola: 3.4.2
@@ -6665,27 +6681,27 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-config@1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@antfu/install-pkg': 1.1.0
-      '@clack/prompts': 0.11.0
+      '@clack/prompts': 1.1.0
       '@eslint/js': 9.39.4
-      '@nuxt/eslint-plugin': 1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/eslint-plugin': 1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@stylistic/eslint-plugin': 5.10.0(eslint@9.39.4(jiti@2.6.1))
       '@typescript-eslint/eslint-plugin': 8.57.0(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
       eslint-config-flat-gitignore: 2.2.1(eslint@9.39.4(jiti@2.6.1))
-      eslint-flat-config-utils: 2.1.4
+      eslint-flat-config-utils: 3.2.0
       eslint-merge-processors: 2.0.0(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-import-lite: 0.3.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-import-lite: 0.5.2(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-import-x: 4.16.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-jsdoc: 61.7.1(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.4(jiti@2.6.1))
-      eslint-plugin-unicorn: 62.0.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-jsdoc: 62.9.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-regexp: 3.1.0(eslint@9.39.4(jiti@2.6.1))
+      eslint-plugin-unicorn: 63.0.0(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-vue: 10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.6.1)))(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@9.39.4(jiti@2.6.1)))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))
-      globals: 16.5.0
+      globals: 17.6.0
       local-pkg: 1.1.2
       pathe: 2.0.3
       vue-eslint-parser: 10.4.0(eslint@9.39.4(jiti@2.6.1))
@@ -6696,7 +6712,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.57.0
       '@typescript-eslint/utils': 8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -6705,16 +6721,16 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint@1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
+  '@nuxt/eslint@1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(magicast@0.5.2)(typescript@5.9.3)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@eslint/config-inspector': 1.5.0(eslint@9.39.4(jiti@2.6.1))
-      '@nuxt/devtools-kit': 3.1.0(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
-      '@nuxt/eslint-config': 1.10.0(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
-      '@nuxt/eslint-plugin': 1.10.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/devtools-kit': 3.2.4(magicast@0.5.2)(vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      '@nuxt/eslint-config': 1.15.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.30)(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
+      '@nuxt/eslint-plugin': 1.15.2(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
-      chokidar: 4.0.3
+      chokidar: 5.0.0
       eslint: 9.39.4(jiti@2.6.1)
-      eslint-flat-config-utils: 2.1.4
+      eslint-flat-config-utils: 3.2.0
       eslint-typegen: 2.3.1(eslint@9.39.4(jiti@2.6.1))
       find-up: 8.0.0
       get-port-please: 3.2.0
@@ -7309,7 +7325,7 @@ snapshots:
   '@parcel/watcher-wasm@2.5.6':
     dependencies:
       is-glob: 4.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@parcel/watcher-win32-arm64@2.5.6':
     optional: true
@@ -7325,7 +7341,7 @@ snapshots:
       detect-libc: 2.1.2
       is-glob: 4.0.3
       node-addon-api: 7.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       '@parcel/watcher-android-arm64': 2.5.6
       '@parcel/watcher-darwin-arm64': 2.5.6
@@ -7455,10 +7471,10 @@ snapshots:
       '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
       commondir: 1.0.1
       estree-walker: 2.0.2
-      fdir: 6.5.0(picomatch@4.0.3)
+      fdir: 6.5.0(picomatch@4.0.4)
       is-reference: 1.2.1
       magic-string: 0.30.21
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.59.0
 
@@ -7505,7 +7521,7 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     optionalDependencies:
       rollup: 4.59.0
 
@@ -7602,7 +7618,7 @@ snapshots:
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
       estraverse: 5.3.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   '@swc/helpers@0.5.19':
     dependencies:
@@ -7864,6 +7880,8 @@ snapshots:
 
   '@typescript-eslint/types@8.57.0': {}
 
+  '@typescript-eslint/types@8.59.2': {}
+
   '@typescript-eslint/typescript-estree@8.57.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.57.0(typescript@5.9.3)
@@ -7964,15 +7982,15 @@ snapshots:
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.3
       '@rollup/pluginutils': 5.3.0(rollup@4.59.0)
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
       glob: 10.5.0
       graceful-fs: 4.2.11
       node-gyp-build: 4.8.4
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       resolve-from: 5.0.0
     transitivePeerDependencies:
       - encoding
@@ -8195,9 +8213,9 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  acorn-import-attributes@1.9.5(acorn@8.15.0):
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
@@ -8583,10 +8601,10 @@ snapshots:
 
   commander@2.20.3: {}
 
-  comment-parser@1.4.1: {}
-
   comment-parser@1.4.5: {}
 
+  comment-parser@1.4.6: {}
+
   commondir@1.0.1: {}
 
   compatx@0.2.0: {}
@@ -8949,8 +8967,9 @@ snapshots:
       '@eslint/compat': 2.0.3(eslint@9.39.4(jiti@2.6.1))
       eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-flat-config-utils@2.1.4:
+  eslint-flat-config-utils@3.2.0:
     dependencies:
+      '@eslint/config-helpers': 0.5.5
       pathe: 2.0.3
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
@@ -8964,11 +8983,9 @@ snapshots:
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
 
-  eslint-plugin-import-lite@0.3.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-import-lite@0.5.2(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       eslint: 9.39.4(jiti@2.6.1)
-    optionalDependencies:
-      typescript: 5.9.3
 
   eslint-plugin-import-x@4.16.2(@typescript-eslint/utils@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
@@ -8988,12 +9005,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@61.7.1(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-jsdoc@62.9.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@es-joy/jsdoccomment': 0.78.0
+      '@es-joy/jsdoccomment': 0.86.0
       '@es-joy/resolve.exports': 1.2.0
       are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
+      comment-parser: 1.4.6
       debug: 4.4.3
       escape-string-regexp: 4.0.0
       eslint: 9.39.4(jiti@2.6.1)
@@ -9008,28 +9025,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-regexp@3.1.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.5
       eslint: 9.39.4(jiti@2.6.1)
-      jsdoc-type-pratt-parser: 4.8.0
+      jsdoc-type-pratt-parser: 7.0.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-unicorn@62.0.0(eslint@9.39.4(jiti@2.6.1)):
+  eslint-plugin-unicorn@63.0.0(eslint@9.39.4(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
-      '@eslint/plugin-kit': 0.4.1
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       change-case: 5.4.4
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
       eslint: 9.39.4(jiti@2.6.1)
-      esquery: 1.7.0
       find-up-simple: 1.0.1
       globals: 16.5.0
       indent-string: 5.0.0
@@ -9043,7 +9058,7 @@ snapshots:
 
   eslint-plugin-vue@10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.6.1)))(@typescript-eslint/parser@8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@9.39.4(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.4(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1))
       eslint: 9.39.4(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
@@ -9215,6 +9230,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -9358,6 +9377,8 @@ snapshots:
 
   globals@16.5.0: {}
 
+  globals@17.6.0: {}
+
   globby@15.0.0:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
@@ -9560,10 +9581,10 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdoc-type-pratt-parser@4.8.0: {}
-
   jsdoc-type-pratt-parser@7.0.0: {}
 
+  jsdoc-type-pratt-parser@7.2.0: {}
+
   jsesc@3.1.0: {}
 
   json-buffer@3.0.1: {}
@@ -10829,7 +10850,7 @@ snapshots:
   rollup-plugin-visualizer@6.0.11(rollup@4.59.0):
     dependencies:
       open: 8.4.2
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
@@ -11162,7 +11183,7 @@ snapshots:
   terser@5.46.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.15.0
+      acorn: 8.16.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -11284,7 +11305,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.1
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       pkg-types: 2.3.0
       scule: 1.3.0
       strip-literal: 3.1.0
@@ -11307,7 +11328,7 @@ snapshots:
   unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.3
+      picomatch: 4.0.4
 
   unplugin-vue-components@30.0.0(@babel/parser@7.29.0)(@nuxt/kit@4.4.2(magicast@0.5.2))(vue@3.5.30(typescript@5.9.3)):
     dependencies:
@@ -11361,7 +11382,7 @@ snapshots:
   unplugin@3.0.0:
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       webpack-virtual-modules: 0.6.2
 
   unrs-resolver@1.11.1:
@@ -11488,7 +11509,7 @@ snapshots:
       chokidar: 4.0.3
       npm-run-path: 6.0.0
       picocolors: 1.1.1
-      picomatch: 4.0.3
+      picomatch: 4.0.4
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
       vite: 7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -11528,8 +11549,8 @@ snapshots:
   vite@7.2.2(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
       postcss: 8.5.8
       rollup: 4.59.0
       tinyglobby: 0.2.15
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index 1f5402a..c025b35 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -85,6 +85,7 @@ export default defineEventHandler(async (event) => {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const mobileClinicUpdate: Record<string, any> = {};
+
     if (typeof body.mobileClinic === "boolean") {
       if (body.mobileClinic) {
         if (!foundEvent.mobileClinicId) {
diff --git a/server/api/mobile-clinic/schedule.get.ts b/server/api/mobile-clinic/schedule.get.ts
index be2816d..095053d 100644
--- a/server/api/mobile-clinic/schedule.get.ts
+++ b/server/api/mobile-clinic/schedule.get.ts
@@ -1,11 +1,11 @@
-import prisma from '~~/server/utils/prisma'
+import prisma from "~~/server/utils/prisma";
 
-const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
-const MAX_OCCURRENCES = 8
-const LOOKAHEAD_WEEKS = 4
+const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
+const MAX_OCCURRENCES = 8;
+const LOOKAHEAD_WEEKS = 4;
 
 const addWeeks = (date: Date, weeks: number) =>
-  new Date(date.getTime() + weeks * MS_PER_WEEK)
+  new Date(date.getTime() + weeks * MS_PER_WEEK);
 
 export default defineEventHandler(async () => {
   try {
@@ -14,27 +14,35 @@ export default defineEventHandler(async () => {
         location: true,
       },
       orderBy: {
-        startTime: 'asc',
+        startTime: "asc",
       },
-    })
+    });
 
-    const now = new Date()
-    const windowEnd = addWeeks(now, LOOKAHEAD_WEEKS)
+    const now = new Date();
+    const windowEnd = addWeeks(now, LOOKAHEAD_WEEKS);
 
     const occurrences = scheduleEntries.flatMap((entry) => {
-      const originStart = new Date(entry.startTime)
-      const originEnd = new Date(entry.endTime)
-      const occurrencesForEntry: Array<any> = []
-      let startTime = new Date(originStart)
-      let endTime = new Date(originEnd)
+      const originStart = new Date(entry.startTime);
+      const originEnd = new Date(entry.endTime);
+      const occurrencesForEntry: Array<{
+        id: string;
+        scheduleId: string;
+        startTime: string;
+        endTime: string;
+        location: { latitude: number; longitude: number; address: string };
+      }> = [];
+      let startTime = new Date(originStart);
+      let endTime = new Date(originEnd);
 
       if (endTime < now) {
-        const weeksAhead = Math.ceil((now.getTime() - endTime.getTime()) / MS_PER_WEEK)
-        startTime = addWeeks(startTime, weeksAhead)
-        endTime = addWeeks(endTime, weeksAhead)
+        const weeksAhead = Math.ceil(
+          (now.getTime() - endTime.getTime()) / MS_PER_WEEK,
+        );
+        startTime = addWeeks(startTime, weeksAhead);
+        endTime = addWeeks(endTime, weeksAhead);
       }
 
-      let count = 0
+      let count = 0;
       while (count < MAX_OCCURRENCES && startTime < windowEnd) {
         if (endTime >= now) {
           occurrencesForEntry.push({
@@ -43,24 +51,29 @@ export default defineEventHandler(async () => {
             startTime: startTime.toISOString(),
             endTime: endTime.toISOString(),
             location: entry.location,
-          })
-          count += 1
+          });
+          count += 1;
         }
 
-        startTime = addWeeks(startTime, 1)
-        endTime = addWeeks(endTime, 1)
+        startTime = addWeeks(startTime, 1);
+        endTime = addWeeks(endTime, 1);
       }
 
-      return occurrencesForEntry
-    })
+      return occurrencesForEntry;
+    });
 
-    console.log(`Generated ${occurrences.length} mobile clinic occurrences from ${scheduleEntries.length} schedule entries`)
-    return occurrences.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
+    console.log(
+      `Generated ${occurrences.length} mobile clinic occurrences from ${scheduleEntries.length} schedule entries`,
+    );
+    return occurrences.sort(
+      (a, b) =>
+        new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
+    );
   } catch (error) {
-    console.error('Failed to fetch mobile clinic schedule', error)
+    console.error("Failed to fetch mobile clinic schedule", error);
     throw createError({
       statusCode: 500,
-      message: 'Failed to fetch mobile clinic schedule',
-    })
+      message: "Failed to fetch mobile clinic schedule",
+    });
   }
-})
+});
diff --git a/server/api/volunteer-logs/index.get.ts b/server/api/volunteer-logs/index.get.ts
index 60b8965..6135a9d 100644
--- a/server/api/volunteer-logs/index.get.ts
+++ b/server/api/volunteer-logs/index.get.ts
@@ -1,40 +1,47 @@
 import prisma from "~~/server/utils/prisma";
 
-export default eventHandler(async (event) => {
+export default eventHandler(async () => {
   try {
     const logs = await prisma.volunteer_Hour_Log.findMany({
       include: {
         volunteer: {
           include: {
-            user: true
-          }
+            user: true,
+          },
         },
-        event: true
+        event: true,
       },
       orderBy: {
-        createdAt: "desc"
-      }
-    })
+        createdAt: "desc",
+      },
+    });
 
-    const formattedLogs = logs.map(log => ({
+    const formattedLogs = logs.map((log) => ({
       id: String(log.id),
-      name: log.volunteer.user?.name ?? log.volunteer.user?.contactEmail ?? 'Unknown',
+      name:
+        log.volunteer.user?.name ??
+        log.volunteer.user?.contactEmail ??
+        "Unknown",
       event: log.event.title,
-      date: log.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
+      date: log.date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }),
       hours: log.hours,
       status: log.approvalStatus,
-      comment: log.comment ?? ''
-    }))
+      comment: log.comment ?? "",
+    }));
 
     return {
       success: true,
-      logs: formattedLogs
-    }
+      logs: formattedLogs,
+    };
   } catch (error) {
     throw createError({
       statusCode: 500,
       statusMessage: "Failed to fetch volunteer logs",
-      cause: error
-    })
+      cause: error,
+    });
   }
-})
\ No newline at end of file
+});

From 02908d7d7f00827a0a535c024cce27ec91580f53 Mon Sep 17 00:00:00 2001
From: Vikas Thoutam <vikas.thoutam@gmail.com>
Date: Mon, 11 May 2026 22:16:10 -0500
Subject: [PATCH 6/7] chore: clean commits

---
 app/components/event/Modal.vue    | 438 ++++++++++++++++--------------
 app/pages/mobileClinic.vue        | 220 +++++++--------
 prisma/schema/location.prisma     |  17 +-
 prisma/schema/mobileClinic.prisma |  20 +-
 4 files changed, 354 insertions(+), 341 deletions(-)

diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index a0360c5..fb1737b 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -1,233 +1,257 @@
 <script setup>
-import { ref } from "vue"
-import FileUpload from 'primevue/fileupload'
+import { ref, watch } from "vue";
 
-const emit = defineEmits(["save", "close"])
+const emit = defineEmits(["save", "close"]);
 
 const newEvent = ref({
-  title: "",
-  shortDesc: "",
-  description: "",
-  location: "",
-  startTime: "",
-  endTime: "",
-  allowVolunteers: false,
-  allowAttendees: false,
-  mobileClinicId: null,
-  eventAssets: []
-})
-
-const uploadedFiles = ref([])
-const isSaving = ref(false)
+    title: "",
+    shortDesc: "",
+    description: "",
+    location: "",
+    startTime: "",
+    endTime: "",
+    allowVolunteers: false,
+    allowAttendees: false,
+    mobileClinicId: null,
+    eventAssets: [],
+});
+
+const isSaving = ref(false);
 
 // Store actual File objects for upload
-const filesToUpload = ref([])
-
-function handleFileChange(event) {
-  const files = event.target?.files || event
-  
-  if (!files || files.length === 0) return
-  
-  // Store actual File objects for later upload
-  filesToUpload.value = [...filesToUpload.value, ...Array.from(files)]
-  
-  // Convert files to base64 for preview only
-  const imagePromises = Array.from(files).map(file => {
-    return new Promise((resolve) => {
-      const reader = new FileReader()
-      reader.onload = (e) => resolve({ 
-        imageUrl: e.target.result,
-        fileName: file.name
-      })
-      reader.readAsDataURL(file)
-    })
-  })
-  
-  Promise.all(imagePromises).then(images => {
-    newEvent.value.eventAssets = [...newEvent.value.eventAssets, ...images]
-  })
-}
+const filesToUpload = ref([]);
 
-function removeImage(index) {
-  newEvent.value.eventAssets.splice(index, 1)
-  filesToUpload.value.splice(index, 1)
-}
+watch(filesToUpload, async (newFiles) => {
+    if (!newFiles || newFiles.length === 0) {
+        newEvent.value.eventAssets = [];
+        return;
+    }
+    const previews = await Promise.all(
+        Array.from(newFiles).map(
+            (file) =>
+                new Promise((resolve) => {
+                    const reader = new FileReader();
+                    reader.onload = (e) =>
+                        resolve({
+                            imageUrl: e.target.result,
+                            fileName: file.name,
+                        });
+                    reader.readAsDataURL(file);
+                }),
+        ),
+    );
+    newEvent.value.eventAssets = previews;
+});
 
 async function saveEvent() {
-  // Validate required fields
-  if (!newEvent.value.title || !newEvent.value.startTime || !newEvent.value.endTime) {
-    alert('Please fill in all required fields (Title, Start Time, End Time)')
-    return
-  }
-
-  isSaving.value = true
-
-  try {
-    // Step 1: Create the event in the database
-    const response = await $fetch('/api/events', {
-      method: 'POST',
-      body: {
-        title: newEvent.value.title,
-        shortDesc: newEvent.value.shortDesc,
-        description: newEvent.value.description,
-        location: newEvent.value.location,
-        startTime: new Date(newEvent.value.startTime).toISOString(),
-        endTime: new Date(newEvent.value.endTime).toISOString(),
-        allowVolunteers: newEvent.value.allowVolunteers,
-        allowAttendees: newEvent.value.allowAttendees,
-        mobileClinicId: newEvent.value.mobileClinicId
-      }
-    })
-
-    console.log('✅ Event created:', response)
-
-    // Step 2: Upload images if event was created successfully
-    if (response.id && filesToUpload.value.length > 0) {
-      console.log(`📤 Uploading ${filesToUpload.value.length} images...`)
-      
-      for (const file of filesToUpload.value) {
-        const formData = new FormData()
-        formData.append('file', file)
-        
-        try {
-          await $fetch(`/api/events/${response.id}/images/upload`, {
-            method: 'POST',
-            body: formData
-          })
-          console.log(`✅ Uploaded: ${file.name}`)
-        } catch (uploadError) {
-          console.error(`❌ Failed to upload ${file.name}:`, uploadError)
-        }
-      }
+    // Validate required fields
+    if (
+        !newEvent.value.title ||
+        !newEvent.value.startTime ||
+        !newEvent.value.endTime
+    ) {
+        alert(
+            "Please fill in all required fields (Title, Start Time, End Time)",
+        );
+        return;
     }
 
-    // Step 3: Fetch the complete event with images from the server
-    const completeEvent = await $fetch(`/api/events/${response.id}`)
-    
-    console.log('✅ Complete event fetched:', completeEvent)
-
-    // Step 4: Emit the complete event to parent
-    emit("save", completeEvent)
-    
-    // Step 5: Reset form
-    newEvent.value = {
-      title: "",
-      shortDesc: "",
-      description: "",
-      location: "",
-      startTime: "",
-      endTime: "",
-      allowVolunteers: false,
-      allowAttendees: false,
-      mobileClinicId: null,
-      eventAssets: []
+    isSaving.value = true;
+
+    try {
+        // Step 1: Create the event in the database
+        const response = await $fetch("/api/events", {
+            method: "POST",
+            body: {
+                title: newEvent.value.title,
+                shortDesc: newEvent.value.shortDesc,
+                description: newEvent.value.description,
+                location: newEvent.value.location,
+                startTime: new Date(newEvent.value.startTime).toISOString(),
+                endTime: new Date(newEvent.value.endTime).toISOString(),
+                allowVolunteers: newEvent.value.allowVolunteers,
+                allowAttendees: newEvent.value.allowAttendees,
+                mobileClinicId: newEvent.value.mobileClinicId,
+            },
+        });
+
+        console.log("✅ Event created:", response);
+
+        // Step 2: Upload images if event was created successfully
+        if (response.id && filesToUpload.value.length > 0) {
+            console.log(`📤 Uploading ${filesToUpload.value.length} images...`);
+
+            for (const file of filesToUpload.value) {
+                const formData = new FormData();
+                formData.append("file", file);
+
+                try {
+                    await $fetch(`/api/events/${response.id}/images/upload`, {
+                        method: "POST",
+                        body: formData,
+                    });
+                    console.log(`✅ Uploaded: ${file.name}`);
+                } catch (uploadError) {
+                    console.error(
+                        `❌ Failed to upload ${file.name}:`,
+                        uploadError,
+                    );
+                }
+            }
+        }
+
+        // Step 3: Fetch the complete event with images from the server
+        const completeEvent = await $fetch(`/api/events/${response.id}`);
+
+        console.log("✅ Complete event fetched:", completeEvent);
+
+        // Step 4: Emit the complete event to parent
+        emit("save", completeEvent);
+
+        // Step 5: Reset form
+        newEvent.value = {
+            title: "",
+            shortDesc: "",
+            description: "",
+            location: "",
+            startTime: "",
+            endTime: "",
+            allowVolunteers: false,
+            allowAttendees: false,
+            mobileClinicId: null,
+            eventAssets: [],
+        };
+        filesToUpload.value = [];
+
+        console.log("✅ Event saved successfully and form reset");
+    } catch (error) {
+        console.error("❌ Error creating event:", error);
+        alert(`Error creating event: ${error.message || "Please try again."}`);
+    } finally {
+        isSaving.value = false;
     }
-    uploadedFiles.value = []
-    filesToUpload.value = []
-    
-    console.log('✅ Event saved successfully and form reset')
-  } catch (error) {
-    console.error('❌ Error creating event:', error)
-    alert(`Error creating event: ${error.message || 'Please try again.'}`)
-  } finally {
-    isSaving.value = false
-  }
 }
 
 function cancel() {
-  emit("close")
+    emit("close");
 }
 </script>
 
 <template>
-  <div class="space-y-4 p-6 max-h-[80vh] overflow-y-auto">
-    <h3 class="text-xl font-semibold mb-4">Add New Event</h3>
-
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">
-        Event Title <span class="text-red-500">*</span>
-      </label>
-      <UFormField>
-        <UInput v-model="newEvent.title" placeholder="Enter event title" />
-      </UFormField>
-    </div>
+    <div class="space-y-4 p-6 max-h-[80vh] overflow-y-auto">
+        <h3 class="text-xl font-semibold mb-4">Add New Event</h3>
 
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
-      <UFormField>
-        <UInput v-model="newEvent.shortDesc" placeholder="Brief description" />
-      </UFormField>
-    </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+                Event Title <span class="text-red-500">*</span>
+            </label>
+            <UFormField>
+                <UInput
+                    v-model="newEvent.title"
+                    placeholder="Enter event title"
+                />
+            </UFormField>
+        </div>
 
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
-      <UFormField>
-        <UTextarea v-model="newEvent.description" placeholder="Detailed description" :rows="4" />
-      </UFormField>
-    </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1"
+                >Short Description</label
+            >
+            <UFormField>
+                <UInput
+                    v-model="newEvent.shortDesc"
+                    placeholder="Brief description"
+                />
+            </UFormField>
+        </div>
 
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
-      <UFormField>
-        <UInput v-model="newEvent.location" placeholder="Enter location address" />
-      </UFormField>
-    </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1"
+                >Full Description</label
+            >
+            <UFormField>
+                <UTextarea
+                    v-model="newEvent.description"
+                    placeholder="Detailed description"
+                    :rows="4"
+                />
+            </UFormField>
+        </div>
 
-    <div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
-          Start Date & Time <span class="text-red-500">*</span>
-        </label>
-        <UFormField>
-          <UInput v-model="newEvent.startTime" type="datetime-local" />
-        </UFormField>
-      </div>
-
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">
-          End Date & Time <span class="text-red-500">*</span>
-        </label>
-        <UFormField>
-          <UInput v-model="newEvent.endTime" type="datetime-local" />
-        </UFormField>
-      </div>
-    </div>
-    
-    <div class="space-y-2">
-      <label class="flex items-center gap-2 cursor-pointer">
-        <UCheckbox v-model="newEvent.allowVolunteers" />
-        <span class="text-sm font-medium text-gray-700">Allow Volunteers</span>
-      </label>
-
-      <label class="flex items-center gap-2 cursor-pointer">
-        <UCheckbox v-model="newEvent.allowAttendees" />
-        <span class="text-sm font-medium text-gray-700">Allow Attendees to Register</span>
-      </label>
-    </div>
+        <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1"
+                >Location</label
+            >
+            <UFormField>
+                <UInput
+                    v-model="newEvent.location"
+                    placeholder="Enter location address"
+                />
+            </UFormField>
+        </div>
 
-    <div>
-      <UFormField label="Event Images">
-        <FileUpload 
-        mode = "advanced"
-        :multiple = "true"
-        accept = "image/*"
-        :auto = "false"
-        :custom-upload = "true"
-        @select = "handleFileChange($event.files)"
-        @remove = "removeImage($event.index)"
-        >
-          <template #empty>
-            <span>Drag and drop files to here to upload.</span>
-          </template>
-        </FileUpload>
-      </UFormField>
-    </div>
+        <div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    Start Date & Time <span class="text-red-500">*</span>
+                </label>
+                <UFormField>
+                    <UInput
+                        v-model="newEvent.startTime"
+                        type="datetime-local"
+                    />
+                </UFormField>
+            </div>
+
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-1">
+                    End Date & Time <span class="text-red-500">*</span>
+                </label>
+                <UFormField>
+                    <UInput v-model="newEvent.endTime" type="datetime-local" />
+                </UFormField>
+            </div>
+        </div>
+
+        <div class="space-y-2">
+            <label class="flex items-center gap-2 cursor-pointer">
+                <UCheckbox v-model="newEvent.allowVolunteers" />
+                <span class="text-sm font-medium text-gray-700"
+                    >Allow Volunteers</span
+                >
+            </label>
+
+            <label class="flex items-center gap-2 cursor-pointer">
+                <UCheckbox v-model="newEvent.allowAttendees" />
+                <span class="text-sm font-medium text-gray-700"
+                    >Allow Attendees to Register</span
+                >
+            </label>
+        </div>
+
+        <div>
+            <UFormField label="Event Images">
+                <UFileUpload
+                    v-model="filesToUpload"
+                    multiple
+                    accept="image/*"
+                    placeholder="Upload images"
+                />
+            </UFormField>
+        </div>
 
-    <div class="flex justify-end gap-2 pt-4 border-t">
-      <UButton variant="ghost" color="brand4" :disabled="isSaving" @click="cancel">Cancel</UButton>
-      <UButton color="brand4" :loading="isSaving" @click="saveEvent">
-        {{ isSaving ? 'Creating...' : 'Create Event' }}
-      </UButton>
+        <div class="flex justify-end gap-2 pt-4 border-t">
+            <UButton
+                variant="ghost"
+                color="brand4"
+                :disabled="isSaving"
+                @click="cancel"
+            >
+                Cancel
+            </UButton>
+            <UButton color="brand4" :loading="isSaving" @click="saveEvent">
+                {{ isSaving ? "Creating..." : "Create Event" }}
+            </UButton>
+        </div>
     </div>
-  </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index 3600a68..5c6e731 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -1,139 +1,141 @@
 <template>
     <!-- Map Section -->
     <div id="mapbox" class="pt-12 pb-12 h-full w-full">
-      <div id="map" class="h-full w-full relative overflow-hidden">
-        <MapInteractive :style="style" :center="center" :zoom="zoom" />
-        <UDrawer
-          class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
-          :default-open="true"
-          :handle-only="true"
-          :dismissible="false"
-          :overlay="false"
-          :swipe-to-close="true"
-          :close-on-escape="false"
-          :close-on-click-outside="false"
-          :modal="false"
-          portal="#map"
-          :snap-points="snapPoints"
+        <div id="map" class="h-full w-full relative overflow-hidden">
+            <MapInteractive :style="style" :center="center" :zoom="zoom" />
+            <UDrawer
+                class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
+                :default-open="true"
+                :handle-only="true"
+                :dismissible="false"
+                :overlay="false"
+                :swipe-to-close="true"
+                :close-on-escape="false"
+                :close-on-click-outside="false"
+                :modal="false"
+                portal="#map"
+                :snap-points="snapPoints"
             >
-          <template #content>
-            <div class="max-h-[55vh] overflow-y-auto space-y-2 px-2 pb-4">
-              <EventTile
-                v-if="upcomingEvents.length === 0"
-                class="w-11/12 mx-auto my-4 cursor-pointer"
-                title="No upcoming events"
-                subtitle="Check back later for updates!"
-              />
-              <EventTile
-                v-for="event in upcomingEvents"
-                v-else
-                :key="event.id"
-                class="w-11/12 mx-auto my-4 cursor-pointer"
-                :title="event.title"
-                :subtitle="new Date(event.startTime).toLocaleString()"
-                button-type="arrow"
-                :event-id="event.eventId"
-                @add="eventClick"
-                @click="handleTileClick(event)"
-              />
-            </div>
-          </template>
-        </UDrawer>
-      </div>
+                <template #content>
+                    <div
+                        class="max-h-[55vh] overflow-y-auto space-y-2 px-2 pb-4"
+                    >
+                        <EventTile
+                            v-if="upcomingEvents.length === 0"
+                            class="w-11/12 mx-auto my-4 cursor-pointer"
+                            title="No upcoming events"
+                            subtitle="Check back later for updates!"
+                        />
+                        <EventTile
+                            v-for="event in upcomingEvents"
+                            v-else
+                            :key="event.id"
+                            class="w-11/12 mx-auto my-4 cursor-pointer"
+                            :title="event.title"
+                            :subtitle="
+                                new Date(event.startTime).toLocaleString()
+                            "
+                            button-type="arrow"
+                            :event-id="event.eventId"
+                            @add="eventClick"
+                            @click="handleTileClick(event)"
+                        />
+                    </div>
+                </template>
+            </UDrawer>
+        </div>
     </div>
 </template>
 
 <script setup>
+import "maplibre-gl/dist/maplibre-gl.css";
 
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-const style = '/mapstyles.json'
-const center = ref([-96.77049780046936, 32.772891246510596])
-const zoom = ref(15)
+const style = "/mapstyles.json";
+const center = ref([-96.77049780046936, 32.772891246510596]);
+const zoom = ref(15);
 
 // Pixel values
-const snapPoints = ["230", "340", "450"]
-
-const upcomingEvents = ref([])
+const snapPoints = ["230", "340", "450"];
 
+const upcomingEvents = ref([]);
 
 // Load both events and mobile clinic schedule on mount
 onMounted(async () => {
-  console.log('✅ Page mounted - Loading events and mobile clinic schedule')
-  await loadEvents()
-  await loadMobileClinicSchedule()
-})
+    console.log("✅ Page mounted - Loading events and mobile clinic schedule");
+    await loadEvents();
+    await loadMobileClinicSchedule();
+});
 
 const eventClick = (id) => {
-  if (!id) return
-  navigateTo(`/events/${id}`)
-}
+    if (!id) return;
+    navigateTo(`/events/${id}`);
+};
 
 const handleTileClick = (event) => {
-  if (!event?.location) return
-  mapAdjust(event.location)
-}
+    if (!event?.location) return;
+    mapAdjust(event.location);
+};
 
 const setUpcomingItems = (items) => {
-  upcomingEvents.value = items
-    .map((item) => ({
-      ...item,
-      subtitle: item.subtitle ?? new Date(item.startTime).toLocaleString(),
-    }))
-    .sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime())
-}
+    upcomingEvents.value = items
+        .map((item) => ({
+            ...item,
+            subtitle:
+                item.subtitle ?? new Date(item.startTime).toLocaleString(),
+        }))
+        .sort(
+            (a, b) =>
+                new Date(a.startTime).getTime() -
+                new Date(b.startTime).getTime(),
+        );
+};
 
 async function loadMobileClinicSchedule() {
-  try {
-    const schedule = await $fetch('/api/mobile-clinic/schedule')
-    console.log('✅ Loaded mobile clinic schedule:', schedule)
-
-    const scheduleItems = schedule.map((item) => ({
-      ...item,
-      title: `Mobile Clinic`,
-      eventId: null,
-    }))
-
-    setUpcomingItems([...upcomingEvents.value, ...scheduleItems])
-    console.log('📅 Combined schedule items:', scheduleItems.length)
-  } catch (error) {
-    console.error('❌ Error loading mobile clinic schedule:', error)
-  }
+    try {
+        const schedule = await $fetch("/api/mobile-clinic/schedule");
+        console.log("✅ Loaded mobile clinic schedule:", schedule);
+
+        const scheduleItems = schedule.map((item) => ({
+            ...item,
+            title: `Mobile Clinic`,
+            eventId: null,
+        }));
+
+        setUpcomingItems([...upcomingEvents.value, ...scheduleItems]);
+        console.log("📅 Combined schedule items:", scheduleItems.length);
+    } catch (error) {
+        console.error("❌ Error loading mobile clinic schedule:", error);
+    }
 }
 
-
 async function loadEvents() {
-  try {
-    const allEvents = await $fetch('/api/events')
-    console.log('✅ Loaded events from API:', allEvents)
-    
-    const now = new Date()
-    
-    const eventItems = allEvents
-      .filter((event) => event.mobileClinicId !== null)
-      .filter((event) => new Date(event.endTime) >= now)
-      .map((event) => ({
-        ...event,
-        eventId: event.id,
-      }))
-
-    setUpcomingItems([...upcomingEvents.value, ...eventItems])
-    console.log('📅 Upcoming events:', eventItems.length)
-    
-  } catch (error) {
-    console.error('❌ Error loading events:', error)
-  }
+    try {
+        const allEvents = await $fetch("/api/events");
+        console.log("✅ Loaded events from API:", allEvents);
+
+        const now = new Date();
+
+        const eventItems = allEvents
+            .filter((event) => event.mobileClinicId !== null)
+            .filter((event) => new Date(event.endTime) >= now)
+            .map((event) => ({
+                ...event,
+                eventId: event.id,
+            }));
+
+        setUpcomingItems([...upcomingEvents.value, ...eventItems]);
+        console.log("📅 Upcoming events:", eventItems.length);
+    } catch (error) {
+        console.error("❌ Error loading events:", error);
+    }
 }
 
 async function mapAdjust(location) {
-  
-  const lng = location.longitude
-  const lat = location.latitude
-  
-  console.log(`📍 Adjusting map to event location: [${lng}, ${lat}]`)
-  center.value = [lng, lat]
-  zoom.value = 17
-}
+    const lng = location.longitude;
+    const lat = location.latitude;
 
-
-</script>
\ No newline at end of file
+    console.log(`📍 Adjusting map to event location: [${lng}, ${lat}]`);
+    center.value = [lng, lat];
+    zoom.value = 17;
+}
+</script>
diff --git a/prisma/schema/location.prisma b/prisma/schema/location.prisma
index 78d3437..431b194 100644
--- a/prisma/schema/location.prisma
+++ b/prisma/schema/location.prisma
@@ -1,9 +1,8 @@
-model Location{
-    id        String   @id @default(uuid())
-    address   String   @unique
-    latitude  Float
-    longitude Float
-    events    Event[]
-    mobileClinicSchedule Mobile_Clinic_Schedule[]
-    mobileClinicTimeline Mobile_Clinic_Timeline[]
-}
\ No newline at end of file
+model Location {
+  id                   String                   @id @default(uuid())
+  address              String                   @unique
+  latitude             Float
+  longitude            Float
+  events               Event[]
+  mobileClinicSchedule Mobile_Clinic_Schedule[]
+}
diff --git a/prisma/schema/mobileClinic.prisma b/prisma/schema/mobileClinic.prisma
index 275248c..3dc5d05 100644
--- a/prisma/schema/mobileClinic.prisma
+++ b/prisma/schema/mobileClinic.prisma
@@ -2,7 +2,6 @@ model MobileClinic {
   id String @id @default(uuid())
 
   schedule Mobile_Clinic_Schedule[]
-  timeline Mobile_Clinic_Timeline[]
   event    Event[]
 
   @@map("mobileClinic")
@@ -12,21 +11,10 @@ model Mobile_Clinic_Schedule {
   id             Int          @id @default(autoincrement())
   mobileClinic   MobileClinic @relation(fields: [mobileClinicId], references: [id])
   mobileClinicId String
-  location        Location @relation(fields: [locationId], references: [id])
-  locationId      String
-  startTime      DateTime @unique
-  endTime        DateTime @unique
+  location       Location     @relation(fields: [locationId], references: [id])
+  locationId     String
+  startTime      DateTime     @unique
+  endTime        DateTime     @unique
 
   @@map("schedule")
 }
-
-model Mobile_Clinic_Timeline {
-  id             Int          @id @default(autoincrement())
-  mobile_clinic  MobileClinic @relation(fields: [mobileClinicId], references: [id])
-  mobileClinicId String
-  location        Location @relation(fields: [locationId], references: [id])
-  locationId      String
-  datetime       DateTime
-
-  @@map("timeline")
-}

From b2eecd19d21dfe8ffc93ca5830770c6c67d37acd Mon Sep 17 00:00:00 2001
From: Vikas Thoutam <vikas.thoutam@gmail.com>
Date: Mon, 11 May 2026 22:43:00 -0500
Subject: [PATCH 7/7] chore: linting + event click

---
 app/components/event/Modal.vue           |  432 ++++----
 app/components/event/Tile.vue            |   71 +-
 app/pages/admin/volunteer-logs/index.vue |  564 ++++++-----
 app/pages/events/[id].vue                | 1180 +++++++++++-----------
 app/pages/events/index.vue               |  294 +++---
 app/pages/index.vue                      |  619 ++++++------
 app/pages/mobileClinic.vue               |  223 ++--
 nuxt.config.ts                           |    1 -
 server/api/events/[id]/index.patch.ts    |   81 +-
 server/api/mobile-clinic/schedule.get.ts |   73 +-
 server/api/volunteer-logs/index.get.ts   |   37 +-
 server/utils/prisma.ts                   |   20 +-
 server/utils/seed.ts                     |  210 ++--
 13 files changed, 1936 insertions(+), 1869 deletions(-)

diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index fb1737b..415f2ff 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -1,257 +1,259 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch } from 'vue'
 
-const emit = defineEmits(["save", "close"]);
+const emit = defineEmits(['save', 'close'])
 
 const newEvent = ref({
-    title: "",
-    shortDesc: "",
-    description: "",
-    location: "",
-    startTime: "",
-    endTime: "",
-    allowVolunteers: false,
-    allowAttendees: false,
-    mobileClinicId: null,
-    eventAssets: [],
-});
+  title: '',
+  shortDesc: '',
+  description: '',
+  location: '',
+  startTime: '',
+  endTime: '',
+  allowVolunteers: false,
+  allowAttendees: false,
+  mobileClinicId: null,
+  eventAssets: [],
+})
 
-const isSaving = ref(false);
+const isSaving = ref(false)
 
 // Store actual File objects for upload
-const filesToUpload = ref([]);
+const filesToUpload = ref([])
 
 watch(filesToUpload, async (newFiles) => {
-    if (!newFiles || newFiles.length === 0) {
-        newEvent.value.eventAssets = [];
-        return;
-    }
-    const previews = await Promise.all(
-        Array.from(newFiles).map(
-            (file) =>
-                new Promise((resolve) => {
-                    const reader = new FileReader();
-                    reader.onload = (e) =>
-                        resolve({
-                            imageUrl: e.target.result,
-                            fileName: file.name,
-                        });
-                    reader.readAsDataURL(file);
-                }),
-        ),
-    );
-    newEvent.value.eventAssets = previews;
-});
+  if (!newFiles || newFiles.length === 0) {
+    newEvent.value.eventAssets = []
+    return
+  }
+  const previews = await Promise.all(
+    Array.from(newFiles).map(
+      file =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = e =>
+            resolve({
+              imageUrl: e.target.result,
+              fileName: file.name,
+            })
+          reader.readAsDataURL(file)
+        }),
+    ),
+  )
+  newEvent.value.eventAssets = previews
+})
 
 async function saveEvent() {
-    // Validate required fields
-    if (
-        !newEvent.value.title ||
-        !newEvent.value.startTime ||
-        !newEvent.value.endTime
-    ) {
-        alert(
-            "Please fill in all required fields (Title, Start Time, End Time)",
-        );
-        return;
-    }
+  // Validate required fields
+  if (
+    !newEvent.value.title
+    || !newEvent.value.startTime
+    || !newEvent.value.endTime
+  ) {
+    alert(
+      'Please fill in all required fields (Title, Start Time, End Time)',
+    )
+    return
+  }
 
-    isSaving.value = true;
+  isSaving.value = true
 
-    try {
-        // Step 1: Create the event in the database
-        const response = await $fetch("/api/events", {
-            method: "POST",
-            body: {
-                title: newEvent.value.title,
-                shortDesc: newEvent.value.shortDesc,
-                description: newEvent.value.description,
-                location: newEvent.value.location,
-                startTime: new Date(newEvent.value.startTime).toISOString(),
-                endTime: new Date(newEvent.value.endTime).toISOString(),
-                allowVolunteers: newEvent.value.allowVolunteers,
-                allowAttendees: newEvent.value.allowAttendees,
-                mobileClinicId: newEvent.value.mobileClinicId,
-            },
-        });
+  try {
+    // Step 1: Create the event in the database
+    const response = await $fetch('/api/events', {
+      method: 'POST',
+      body: {
+        title: newEvent.value.title,
+        shortDesc: newEvent.value.shortDesc,
+        description: newEvent.value.description,
+        location: newEvent.value.location,
+        startTime: new Date(newEvent.value.startTime).toISOString(),
+        endTime: new Date(newEvent.value.endTime).toISOString(),
+        allowVolunteers: newEvent.value.allowVolunteers,
+        allowAttendees: newEvent.value.allowAttendees,
+        mobileClinicId: newEvent.value.mobileClinicId,
+      },
+    })
 
-        console.log("✅ Event created:", response);
+    console.log('✅ Event created:', response)
 
-        // Step 2: Upload images if event was created successfully
-        if (response.id && filesToUpload.value.length > 0) {
-            console.log(`📤 Uploading ${filesToUpload.value.length} images...`);
+    // Step 2: Upload images if event was created successfully
+    if (response.id && filesToUpload.value.length > 0) {
+      console.log(`📤 Uploading ${filesToUpload.value.length} images...`)
 
-            for (const file of filesToUpload.value) {
-                const formData = new FormData();
-                formData.append("file", file);
+      for (const file of filesToUpload.value) {
+        const formData = new FormData()
+        formData.append('file', file)
 
-                try {
-                    await $fetch(`/api/events/${response.id}/images/upload`, {
-                        method: "POST",
-                        body: formData,
-                    });
-                    console.log(`✅ Uploaded: ${file.name}`);
-                } catch (uploadError) {
-                    console.error(
-                        `❌ Failed to upload ${file.name}:`,
-                        uploadError,
-                    );
-                }
-            }
+        try {
+          await $fetch(`/api/events/${response.id}/images/upload`, {
+            method: 'POST',
+            body: formData,
+          })
+          console.log(`✅ Uploaded: ${file.name}`)
         }
+        catch (uploadError) {
+          console.error(
+            `❌ Failed to upload ${file.name}:`,
+            uploadError,
+          )
+        }
+      }
+    }
 
-        // Step 3: Fetch the complete event with images from the server
-        const completeEvent = await $fetch(`/api/events/${response.id}`);
-
-        console.log("✅ Complete event fetched:", completeEvent);
+    // Step 3: Fetch the complete event with images from the server
+    const completeEvent = await $fetch(`/api/events/${response.id}`)
 
-        // Step 4: Emit the complete event to parent
-        emit("save", completeEvent);
+    console.log('✅ Complete event fetched:', completeEvent)
 
-        // Step 5: Reset form
-        newEvent.value = {
-            title: "",
-            shortDesc: "",
-            description: "",
-            location: "",
-            startTime: "",
-            endTime: "",
-            allowVolunteers: false,
-            allowAttendees: false,
-            mobileClinicId: null,
-            eventAssets: [],
-        };
-        filesToUpload.value = [];
+    // Step 4: Emit the complete event to parent
+    emit('save', completeEvent)
 
-        console.log("✅ Event saved successfully and form reset");
-    } catch (error) {
-        console.error("❌ Error creating event:", error);
-        alert(`Error creating event: ${error.message || "Please try again."}`);
-    } finally {
-        isSaving.value = false;
+    // Step 5: Reset form
+    newEvent.value = {
+      title: '',
+      shortDesc: '',
+      description: '',
+      location: '',
+      startTime: '',
+      endTime: '',
+      allowVolunteers: false,
+      allowAttendees: false,
+      mobileClinicId: null,
+      eventAssets: [],
     }
+    filesToUpload.value = []
+
+    console.log('✅ Event saved successfully and form reset')
+  }
+  catch (error) {
+    console.error('❌ Error creating event:', error)
+    alert(`Error creating event: ${error.message || 'Please try again.'}`)
+  }
+  finally {
+    isSaving.value = false
+  }
 }
 
 function cancel() {
-    emit("close");
+  emit('close')
 }
 </script>
 
 <template>
-    <div class="space-y-4 p-6 max-h-[80vh] overflow-y-auto">
-        <h3 class="text-xl font-semibold mb-4">Add New Event</h3>
+  <div class="space-y-4 p-6 max-h-[80vh] overflow-y-auto">
+    <h3 class="text-xl font-semibold mb-4">
+      Add New Event
+    </h3>
 
-        <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1">
-                Event Title <span class="text-red-500">*</span>
-            </label>
-            <UFormField>
-                <UInput
-                    v-model="newEvent.title"
-                    placeholder="Enter event title"
-                />
-            </UFormField>
-        </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">
+        Event Title <span class="text-red-500">*</span>
+      </label>
+      <UFormField>
+        <UInput
+          v-model="newEvent.title"
+          placeholder="Enter event title"
+        />
+      </UFormField>
+    </div>
 
-        <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
-                >Short Description</label
-            >
-            <UFormField>
-                <UInput
-                    v-model="newEvent.shortDesc"
-                    placeholder="Brief description"
-                />
-            </UFormField>
-        </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
+      <UFormField>
+        <UInput
+          v-model="newEvent.shortDesc"
+          placeholder="Brief description"
+        />
+      </UFormField>
+    </div>
 
-        <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
-                >Full Description</label
-            >
-            <UFormField>
-                <UTextarea
-                    v-model="newEvent.description"
-                    placeholder="Detailed description"
-                    :rows="4"
-                />
-            </UFormField>
-        </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
+      <UFormField>
+        <UTextarea
+          v-model="newEvent.description"
+          placeholder="Detailed description"
+          :rows="4"
+        />
+      </UFormField>
+    </div>
 
-        <div>
-            <label class="block text-sm font-medium text-gray-700 mb-1"
-                >Location</label
-            >
-            <UFormField>
-                <UInput
-                    v-model="newEvent.location"
-                    placeholder="Enter location address"
-                />
-            </UFormField>
-        </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
+      <UFormField>
+        <UInput
+          v-model="newEvent.location"
+          placeholder="Enter location address"
+        />
+      </UFormField>
+    </div>
 
-        <div>
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">
-                    Start Date & Time <span class="text-red-500">*</span>
-                </label>
-                <UFormField>
-                    <UInput
-                        v-model="newEvent.startTime"
-                        type="datetime-local"
-                    />
-                </UFormField>
-            </div>
+    <div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">
+          Start Date & Time <span class="text-red-500">*</span>
+        </label>
+        <UFormField>
+          <UInput
+            v-model="newEvent.startTime"
+            type="datetime-local"
+          />
+        </UFormField>
+      </div>
 
-            <div>
-                <label class="block text-sm font-medium text-gray-700 mb-1">
-                    End Date & Time <span class="text-red-500">*</span>
-                </label>
-                <UFormField>
-                    <UInput v-model="newEvent.endTime" type="datetime-local" />
-                </UFormField>
-            </div>
-        </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">
+          End Date & Time <span class="text-red-500">*</span>
+        </label>
+        <UFormField>
+          <UInput
+            v-model="newEvent.endTime"
+            type="datetime-local"
+          />
+        </UFormField>
+      </div>
+    </div>
 
-        <div class="space-y-2">
-            <label class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="newEvent.allowVolunteers" />
-                <span class="text-sm font-medium text-gray-700"
-                    >Allow Volunteers</span
-                >
-            </label>
+    <div class="space-y-2">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <UCheckbox v-model="newEvent.allowVolunteers" />
+        <span class="text-sm font-medium text-gray-700">Allow Volunteers</span>
+      </label>
 
-            <label class="flex items-center gap-2 cursor-pointer">
-                <UCheckbox v-model="newEvent.allowAttendees" />
-                <span class="text-sm font-medium text-gray-700"
-                    >Allow Attendees to Register</span
-                >
-            </label>
-        </div>
+      <label class="flex items-center gap-2 cursor-pointer">
+        <UCheckbox v-model="newEvent.allowAttendees" />
+        <span class="text-sm font-medium text-gray-700">Allow Attendees to Register</span>
+      </label>
+    </div>
 
-        <div>
-            <UFormField label="Event Images">
-                <UFileUpload
-                    v-model="filesToUpload"
-                    multiple
-                    accept="image/*"
-                    placeholder="Upload images"
-                />
-            </UFormField>
-        </div>
+    <div>
+      <UFormField label="Event Images">
+        <UFileUpload
+          v-model="filesToUpload"
+          multiple
+          accept="image/*"
+          placeholder="Upload images"
+        />
+      </UFormField>
+    </div>
 
-        <div class="flex justify-end gap-2 pt-4 border-t">
-            <UButton
-                variant="ghost"
-                color="brand4"
-                :disabled="isSaving"
-                @click="cancel"
-            >
-                Cancel
-            </UButton>
-            <UButton color="brand4" :loading="isSaving" @click="saveEvent">
-                {{ isSaving ? "Creating..." : "Create Event" }}
-            </UButton>
-        </div>
+    <div class="flex justify-end gap-2 pt-4 border-t">
+      <UButton
+        variant="ghost"
+        color="brand4"
+        :disabled="isSaving"
+        @click="cancel"
+      >
+        Cancel
+      </UButton>
+      <UButton
+        color="brand4"
+        :loading="isSaving"
+        @click="saveEvent"
+      >
+        {{ isSaving ? "Creating..." : "Create Event" }}
+      </UButton>
     </div>
+  </div>
 </template>
diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index bde147c..f271ab4 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -1,47 +1,50 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'
 
-defineEmits(["add"]);
+defineEmits(['add'])
 const props = defineProps<{
-    title?: string;
-    subtitle?: string;
-    buttonType?: "plus" | "arrow";
-    eventId?: string;
-}>();
+  title?: string
+  subtitle?: string
+  buttonType?: 'plus' | 'arrow'
+  eventId?: string
+}>()
 
 const iconName = computed(() =>
-    props.buttonType === "arrow"
-        ? "i-heroicons-arrow-right-20-solid"
-        : "i-heroicons-plus",
-);
+  props.buttonType === 'arrow'
+    ? 'i-heroicons-arrow-right-20-solid'
+    : 'i-heroicons-plus',
+)
 </script>
 
 <template>
+  <div
+    class="flex items-center gap-4 rounded-[22px] border border-gray-800/70 dark:border-gray-700/60 bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm"
+  >
+    <!-- Square avatar -->
     <div
-        class="flex items-center gap-4 rounded-[22px] border border-gray-800/70 dark:border-gray-700/60 bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm"
-    >
-        <!-- Square avatar -->
-        <div
-            class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"
-        />
-
-        <!-- Text lines -->
-        <div class="flex-1">
-            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                {{ title }}
-            </p>
+      class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"
+    />
 
-            <p class="text-xs text-gray-500 dark:text-gray-400">
-                {{ subtitle }}
-            </p>
-        </div>
+    <!-- Text lines -->
+    <div class="flex-1">
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
+        {{ title }}
+      </p>
 
-        <!-- Action button -->
-        <button
-            class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60 hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
-            @click="$emit('add', props.eventId)"
-        >
-            <UIcon :name="iconName" class="w-5 h-5" />
-        </button>
+      <p class="text-xs text-gray-500 dark:text-gray-400">
+        {{ subtitle }}
+      </p>
     </div>
+
+    <!-- Action button -->
+    <button
+      class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60 hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
+      @click="$emit('add', props.eventId)"
+    >
+      <UIcon
+        :name="iconName"
+        class="w-5 h-5"
+      />
+    </button>
+  </div>
 </template>
diff --git a/app/pages/admin/volunteer-logs/index.vue b/app/pages/admin/volunteer-logs/index.vue
index 452af50..16a1587 100644
--- a/app/pages/admin/volunteer-logs/index.vue
+++ b/app/pages/admin/volunteer-logs/index.vue
@@ -1,326 +1,340 @@
 <script setup lang="ts">
-const activeTab = ref("PENDING");
+const activeTab = ref('PENDING')
 
 const tabs = [
-    { id: "PENDING", label: "Pending" },
-    { id: "APPROVED", label: "Approved" },
-    { id: "REJECTED", label: "Rejected" },
-];
+  { id: 'PENDING', label: 'Pending' },
+  { id: 'APPROVED', label: 'Approved' },
+  { id: 'REJECTED', label: 'Rejected' },
+]
 
-type LogStatus = "PENDING" | "APPROVED" | "REJECTED";
-type ActionType = "approve" | "reject";
+type LogStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
+type ActionType = 'approve' | 'reject'
 
 interface VolunteerLog {
-    id: string;
-    name: string;
-    event: string;
-    date: string;
-    hours: number;
-    status: LogStatus;
-    comment?: string;
+  id: string
+  name: string
+  event: string
+  date: string
+  hours: number
+  status: LogStatus
+  comment?: string
 }
 
 // fetch from database
-const logs = ref<VolunteerLog[]>([]);
-const loading = ref(false);
-const error = ref<string | null>(null);
+const logs = ref<VolunteerLog[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
 
 const fetchlogs = async () => {
-    loading.value = true;
-    error.value = null;
-    try {
-        const data = await $fetch<{ logs: VolunteerLog[] }>(
-            "/api/volunteer-logs",
-        );
-        console.log("API response:", data);
-        logs.value = data?.logs ?? [];
-    } catch (err) {
-        console.error("Failed to fetch logs:", err);
-        error.value = "Failed to load volunteer logs";
-    } finally {
-        loading.value = false;
-    }
-};
+  loading.value = true
+  error.value = null
+  try {
+    const data = await $fetch<{ logs: VolunteerLog[] }>(
+      '/api/volunteer-logs',
+    )
+    console.log('API response:', data)
+    logs.value = data?.logs ?? []
+  }
+  catch (err) {
+    console.error('Failed to fetch logs:', err)
+    error.value = 'Failed to load volunteer logs'
+  }
+  finally {
+    loading.value = false
+  }
+}
 
-await fetchlogs();
+await fetchlogs()
 
 function setStatus(id: string, status: LogStatus) {
-    const log = logs.value.find((l) => l.id === id);
-    if (log) log.status = status;
+  const log = logs.value.find(l => l.id === id)
+  if (log) log.status = status
 }
 
 const filteredLogs = computed(() =>
-    logs.value.filter((log) => log.status === activeTab.value),
-);
+  logs.value.filter(log => log.status === activeTab.value),
+)
 
 const accordionItems = computed(() =>
-    filteredLogs.value.map((log) => ({
-        id: log.id,
-        label: log.name,
-        event: log.event,
-        date: log.date,
-        hours: log.hours,
-        status: log.status,
-        comment: log.comment ?? "",
-    })),
-);
+  filteredLogs.value.map(log => ({
+    id: log.id,
+    label: log.name,
+    event: log.event,
+    date: log.date,
+    hours: log.hours,
+    status: log.status,
+    comment: log.comment ?? '',
+  })),
+)
 
 // local UI state for inline reject
 // unified action state
-const actioningId = ref<string | null>(null);
-const actionType = ref<ActionType | null>(null);
-const commentDraft = ref<Record<string, string>>({});
+const actioningId = ref<string | null>(null)
+const actionType = ref<ActionType | null>(null)
+const commentDraft = ref<Record<string, string>>({})
 
 function startAction(id: string, type: ActionType) {
-    actioningId.value = id;
-    actionType.value = type;
-    const log = logs.value.find((l: VolunteerLog) => l.id === id);
-    commentDraft.value[id] = log?.comment ?? "";
+  actioningId.value = id
+  actionType.value = type
+  const log = logs.value.find((l: VolunteerLog) => l.id === id)
+  commentDraft.value[id] = log?.comment ?? ''
 }
 
 function cancelAction() {
-    actioningId.value = null;
-    actionType.value = null;
+  actioningId.value = null
+  actionType.value = null
 }
 
 function confirmAction(id: string) {
-    if (!actionType.value) return;
+  if (!actionType.value) return
 
-    const log = logs.value.find((l: VolunteerLog) => l.id === id);
-    if (!log) return;
+  const log = logs.value.find((l: VolunteerLog) => l.id === id)
+  if (!log) return
 
-    // comment is optional for approve, required for reject
-    if (actionType.value === "reject") {
-        const reason = (commentDraft.value[id] ?? "").trim();
-        if (!reason) return;
-        log.comment = reason;
-    } else {
-        log.comment = (commentDraft.value[id] ?? "").trim() || undefined;
-    }
+  // comment is optional for approve, required for reject
+  if (actionType.value === 'reject') {
+    const reason = (commentDraft.value[id] ?? '').trim()
+    if (!reason) return
+    log.comment = reason
+  }
+  else {
+    log.comment = (commentDraft.value[id] ?? '').trim() || undefined
+  }
 
-    setStatus(id, actionType.value === "approve" ? "APPROVED" : "REJECTED");
-    actioningId.value = null;
-    actionType.value = null;
+  setStatus(id, actionType.value === 'approve' ? 'APPROVED' : 'REJECTED')
+  actioningId.value = null
+  actionType.value = null
 }
 </script>
 
 <template>
-    <div
-        class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20"
-    >
-        <!-- page content -->
-        <div class="px-6 pt-20">
-            <h1 class="text-3xl font-bold">
-                Volunteer Log <span class="text-teal-600">Approvals</span>
-            </h1>
+  <div
+    class="flex flex-col w-screen min-h-screen bg-slate-50 items-stretch pb-20"
+  >
+    <!-- page content -->
+    <div class="px-6 pt-20">
+      <h1 class="text-3xl font-bold">
+        Volunteer Log <span class="text-teal-600">Approvals</span>
+      </h1>
 
-            <!-- tabs -->
-            <div class="flex gap-3 mt-6">
-                <button
-                    v-for="tab in tabs"
-                    :key="tab.id"
-                    class="px-4 py-2 rounded-full border"
-                    :class="
-                        activeTab === tab.id
-                            ? 'bg-teal-600 text-white border-teal-600'
-                            : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'
-                    "
-                    @click="activeTab = tab.id"
+      <!-- tabs -->
+      <div class="flex gap-3 mt-6">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="px-4 py-2 rounded-full border"
+          :class="
+            activeTab === tab.id
+              ? 'bg-teal-600 text-white border-teal-600'
+              : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-100'
+          "
+          @click="activeTab = tab.id"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+      <USeparator class="mt-8" />
+      <!-- Loading -->
+      <div
+        v-if="loading"
+        class="flex justify-center items-center h-40"
+      >
+        <UIcon
+          name="i-heroicons-arrow-path"
+          class="w-6 h-6 animate-spin text-teal-600"
+        />
+      </div>
+
+      <!-- Error -->
+      <div
+        v-else-if="error"
+        class="mt-8 text-red-500 text-sm"
+      >
+        {{ error }}
+      </div>
+
+      <!-- Empty -->
+      <div
+        v-else-if="accordionItems.length === 0"
+        class="mt-8 text-gray-400 text-sm text-center"
+      >
+        No {{ activeTab.toLowerCase() }} logs found.
+      </div>
+      <!-- logs -->
+      <div
+        v-else
+        class="mt-8"
+      >
+        <UAccordion
+          type="multiple"
+          class="bg-slate-50 w-full"
+          :items="accordionItems"
+          :ui="{
+            item: 'border-none mt-4',
+            header: 'px-0',
+            trigger: 'block w-full text-left p-0',
+            trailingIcon: 'hidden pointer-events-none',
+          }"
+        >
+          <!-- Header (matches inbox pattern) -->
+          <template #default="{ item, open }">
+            <div class="bg-white rounded-xl p-5">
+              <div
+                class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full"
+              >
+                <div class="min-w-0">
+                  <h2 class="text-lg font-semibold truncate">
+                    {{ item.label }}
+                  </h2>
+                  <p class="text-sm text-gray-500 flex gap-3">
+                    <span class="truncate">{{
+                      item.event
+                    }}</span>
+                    <span class="whitespace-nowrap">{{
+                      item.date
+                    }}</span>
+                  </p>
+                </div>
+
+                <p
+                  class="text-xl font-bold text-teal-600 whitespace-nowrap"
                 >
-                    {{ tab.label }}
-                </button>
-            </div>
-            <USeparator class="mt-8" />
-            <!-- Loading -->
-            <div v-if="loading" class="flex justify-center items-center h-40">
-                <UIcon
-                    name="i-heroicons-arrow-path"
-                    class="w-6 h-6 animate-spin text-teal-600"
-                />
-            </div>
+                  {{ item.hours }} hrs
+                </p>
 
-            <!-- Error -->
-            <div v-else-if="error" class="mt-8 text-red-500 text-sm">
-                {{ error }}
+                <span
+                  class="text-gray-400 transition-transform duration-200"
+                  :class="open ? 'rotate-180' : ''"
+                >
+                  ▾
+                </span>
+              </div>
             </div>
-
-            <!-- Empty -->
+          </template>
+          <!-- Expanded content -->
+          <template #content="{ item }">
             <div
-                v-else-if="accordionItems.length === 0"
-                class="mt-8 text-gray-400 text-sm text-center"
+              class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1"
             >
-                No {{ activeTab.toLowerCase() }} logs found.
-            </div>
-            <!-- logs -->
-            <div v-else class="mt-8">
-                <UAccordion
-                    type="multiple"
-                    class="bg-slate-50 w-full"
-                    :items="accordionItems"
-                    :ui="{
-                        item: 'border-none mt-4',
-                        header: 'px-0',
-                        trigger: 'block w-full text-left p-0',
-                        trailingIcon: 'hidden pointer-events-none',
-                    }"
-                >
-                    <!-- Header (matches inbox pattern) -->
-                    <template #default="{ item, open }">
-                        <div class="bg-white rounded-xl p-5">
-                            <div
-                                class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-4 w-full"
-                            >
-                                <div class="min-w-0">
-                                    <h2 class="text-lg font-semibold truncate">
-                                        {{ item.label }}
-                                    </h2>
-                                    <p class="text-sm text-gray-500 flex gap-3">
-                                        <span class="truncate">{{
-                                            item.event
-                                        }}</span>
-                                        <span class="whitespace-nowrap">{{
-                                            item.date
-                                        }}</span>
-                                    </p>
-                                </div>
-
-                                <p
-                                    class="text-xl font-bold text-teal-600 whitespace-nowrap"
-                                >
-                                    {{ item.hours }} hrs
-                                </p>
+              <div
+                class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2"
+              >
+                <p>
+                  <span class="font-medium">Event:</span>
+                  {{ item.event }}
+                </p>
+                <p>
+                  <span class="font-medium">Date:</span>
+                  {{ item.date }}
+                </p>
+                <p>
+                  <span class="font-medium">Hours:</span>
+                  {{ item.hours }}
+                </p>
+                <p>
+                  <span class="font-medium">Status:</span>
+                  {{ item.status }}
+                </p>
+                <p v-if="item.comment">
+                  <span class="font-medium">Comment:</span>
+                  {{ item.comment }}
+                </p>
+              </div>
 
-                                <span
-                                    class="text-gray-400 transition-transform duration-200"
-                                    :class="open ? 'rotate-180' : ''"
-                                >
-                                    ▾
-                                </span>
-                            </div>
-                        </div>
-                    </template>
-                    <!-- Expanded content -->
-                    <template #content="{ item }">
-                        <div
-                            class="bg-white rounded-xl shadow-sm px-5 pb-5 mt-1"
-                        >
-                            <div
-                                class="rounded-lg bg-white p-4 text-sm text-gray-700 space-y-2"
-                            >
-                                <p>
-                                    <span class="font-medium">Event:</span>
-                                    {{ item.event }}
-                                </p>
-                                <p>
-                                    <span class="font-medium">Date:</span>
-                                    {{ item.date }}
-                                </p>
-                                <p>
-                                    <span class="font-medium">Hours:</span>
-                                    {{ item.hours }}
-                                </p>
-                                <p>
-                                    <span class="font-medium">Status:</span>
-                                    {{ item.status }}
-                                </p>
-                                <p v-if="item.comment">
-                                    <span class="font-medium">Comment:</span>
-                                    {{ item.comment }}
-                                </p>
-                            </div>
-
-                            <div
-                                v-if="item.status === 'PENDING'"
-                                class="space-y-3"
-                            >
-                                <!-- Normal buttons -->
-                                <div
-                                    v-if="actioningId !== item.id"
-                                    class="flex gap-2"
-                                >
-                                    <button
-                                        class="px-4 py-2 rounded-full bg-teal-600 text-white hover:bg-teal-700"
-                                        @click.stop="
-                                            startAction(item.id, 'approve')
-                                        "
-                                    >
-                                        Approve
-                                    </button>
+              <div
+                v-if="item.status === 'PENDING'"
+                class="space-y-3"
+              >
+                <!-- Normal buttons -->
+                <div
+                  v-if="actioningId !== item.id"
+                  class="flex gap-2"
+                >
+                  <button
+                    class="px-4 py-2 rounded-full bg-teal-600 text-white hover:bg-teal-700"
+                    @click.stop="
+                      startAction(item.id, 'approve')
+                    "
+                  >
+                    Approve
+                  </button>
 
-                                    <button
-                                        class="px-4 py-2 rounded-full bg-rose-600 text-white hover:bg-rose-700"
-                                        @click.stop="
-                                            startAction(item.id, 'reject')
-                                        "
-                                    >
-                                        Reject
-                                    </button>
-                                </div>
-                                <!-- Inline reject reason (only for this log) -->
-                                <div v-else class="mt-3 space-y-2">
-                                    <label
-                                        class="text-sm font-medium text-gray-700"
-                                    >
-                                        {{
-                                            actionType === "reject"
-                                                ? "Rejection reason"
-                                                : "Comment (optional)"
-                                        }}
-                                        <span
-                                            v-if="actionType === 'reject'"
-                                            class="text-rose-600"
-                                            >*</span
-                                        >
-                                    </label>
+                  <button
+                    class="px-4 py-2 rounded-full bg-rose-600 text-white hover:bg-rose-700"
+                    @click.stop="
+                      startAction(item.id, 'reject')
+                    "
+                  >
+                    Reject
+                  </button>
+                </div>
+                <!-- Inline reject reason (only for this log) -->
+                <div
+                  v-else
+                  class="mt-3 space-y-2"
+                >
+                  <label
+                    class="text-sm font-medium text-gray-700"
+                  >
+                    {{
+                      actionType === "reject"
+                        ? "Rejection reason"
+                        : "Comment (optional)"
+                    }}
+                    <span
+                      v-if="actionType === 'reject'"
+                      class="text-rose-600"
+                    >*</span>
+                  </label>
 
-                                    <textarea
-                                        v-model="commentDraft[item.id]"
-                                        rows="3"
-                                        class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
-                                        :class="
-                                            actionType === 'reject'
-                                                ? 'focus:ring-rose-300'
-                                                : 'focus:ring-teal-300'
-                                        "
-                                        @click.stop
-                                    />
+                  <textarea
+                    v-model="commentDraft[item.id]"
+                    rows="3"
+                    class="w-full rounded-lg border border-gray-300 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-rose-300"
+                    :class="
+                      actionType === 'reject'
+                        ? 'focus:ring-rose-300'
+                        : 'focus:ring-teal-300'
+                    "
+                    @click.stop
+                  />
 
-                                    <div class="flex gap-2">
-                                        <button
-                                            class="px-4 py-2 rounded-lg border"
-                                            @click.stop="cancelAction"
-                                        >
-                                            Cancel
-                                        </button>
+                  <div class="flex gap-2">
+                    <button
+                      class="px-4 py-2 rounded-lg border"
+                      @click.stop="cancelAction"
+                    >
+                      Cancel
+                    </button>
 
-                                        <button
-                                            class="px-4 py-2 rounded-lg bg-rose-600 text-white disabled:opacity-50"
-                                            :class="
-                                                actionType === 'reject'
-                                                    ? 'bg-rose-600'
-                                                    : 'bg-teal-600'
-                                            "
-                                            :disabled="
-                                                actionType === 'reject' &&
-                                                !(
-                                                    commentDraft[item.id] || ''
-                                                ).trim()
-                                            "
-                                            @click.stop="confirmAction(item.id)"
-                                        >
-                                            {{
-                                                actionType === "reject"
-                                                    ? "Confirm Reject"
-                                                    : "Confirm Approve"
-                                            }}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </UAccordion>
+                    <button
+                      class="px-4 py-2 rounded-lg bg-rose-600 text-white disabled:opacity-50"
+                      :class="
+                        actionType === 'reject'
+                          ? 'bg-rose-600'
+                          : 'bg-teal-600'
+                      "
+                      :disabled="
+                        actionType === 'reject'
+                          && !(
+                            commentDraft[item.id] || ''
+                          ).trim()
+                      "
+                      @click.stop="confirmAction(item.id)"
+                    >
+                      {{
+                        actionType === "reject"
+                          ? "Confirm Reject"
+                          : "Confirm Approve"
+                      }}
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
-        </div>
+          </template>
+        </UAccordion>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 8fd1b44..e8e2cdb 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,656 +1,690 @@
 <script setup>
-import "maplibre-gl/dist/maplibre-gl.css";
-import { ref, computed, onMounted } from "vue";
+import 'maplibre-gl/dist/maplibre-gl.css'
+import { ref, computed, onMounted } from 'vue'
 
-const route = useRoute();
+const route = useRoute()
 
 // Get the ID from the route params
-const eventId = route.params.id;
-const { data: event } = await useFetch(`/api/events/${route.params.id}`);
+const eventId = route.params.id
+const { data: event } = await useFetch(`/api/events/${route.params.id}`)
 
-const loading = ref(true);
-const notFound = ref(false);
+const loading = ref(true)
+const notFound = ref(false)
 
-const isEditMode = ref(false);
-const editForm = ref({ mobileClinic: false });
+const isEditMode = ref(false)
+const editForm = ref({ mobileClinic: false })
 
-//placeholder until we implement auth
-const admin = true;
+// placeholder until we implement auth
+const admin = true
 
 // Fetch event data from API on mount
 onMounted(async () => {
-    try {
-        console.log("📡 Loading event with ID:", eventId);
-
-        // Fetch event from your backend API
-        event.value = await $fetch(`/api/events/${eventId}`);
-
-        editForm.value = {
-            ...event.value,
-            mobileClinic: Boolean(event.value?.mobileClinicId),
-        };
-
-        console.log("✅ Event loaded:", event.value);
-        loading.value = false;
-    } catch (error) {
-        console.error("❌ Error fetching event:", error);
-        loading.value = false;
-        notFound.value = true;
+  try {
+    console.log('📡 Loading event with ID:', eventId)
+
+    // Fetch event from your backend API
+    event.value = await $fetch(`/api/events/${eventId}`)
+
+    editForm.value = {
+      ...event.value,
+      mobileClinic: Boolean(event.value?.mobileClinicId),
     }
-});
+
+    console.log('✅ Event loaded:', event.value)
+    loading.value = false
+  }
+  catch (error) {
+    console.error('❌ Error fetching event:', error)
+    loading.value = false
+    notFound.value = true
+  }
+})
 
 const formattedDate = computed(() => {
-    if (!event.value) return "";
+  if (!event.value) return ''
 
-    const start = new Date(event.value.startTime);
-    const end = new Date(event.value.endTime);
+  const start = new Date(event.value.startTime)
+  const end = new Date(event.value.endTime)
 
-    const dateStr = start.toLocaleDateString("en-US", {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-    });
+  const dateStr = start.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
 
-    const startTime = start.toLocaleTimeString("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-    });
+  const startTime = start.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  })
 
-    const endTime = end.toLocaleTimeString("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-    });
+  const endTime = end.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  })
 
-    return `${dateStr} • ${startTime} - ${endTime}`;
-});
+  return `${dateStr} • ${startTime} - ${endTime}`
+})
 
-const style = "/mapstyles.json";
+const style = '/mapstyles.json'
 const center = computed(() => [
-    event.value.location.longitude,
-    event.value.location.latitude,
-]);
-const zoom = 15;
+  event.value.location.longitude,
+  event.value.location.latitude,
+])
+const zoom = 15
 
 function toggleEditMode() {
-    if (isEditMode.value) {
-        // Cancel editing - reset form to original event data
-        editForm.value = {
-            ...event.value,
-            mobileClinic: Boolean(event.value?.mobileClinicId),
-        };
+  if (isEditMode.value) {
+    // Cancel editing - reset form to original event data
+    editForm.value = {
+      ...event.value,
+      mobileClinic: Boolean(event.value?.mobileClinicId),
     }
-    isEditMode.value = !isEditMode.value;
+  }
+  isEditMode.value = !isEditMode.value
 }
 
 async function saveChanges() {
-    try {
-        console.log("💾 Saving changes...");
-
-        // Update event via API
-        const _updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
-            method: "PATCH",
-            body: {
-                title: editForm.value.title,
-                shortDesc: editForm.value.shortDesc,
-                description: editForm.value.description,
-                location: editForm.value.location,
-                startTime: new Date(editForm.value.startTime).toISOString(),
-                endTime: new Date(editForm.value.endTime).toISOString(),
-                allowVolunteers: editForm.value.allowVolunteers,
-                allowAttendees: editForm.value.allowAttendees,
-                mobileClinic: editForm.value.mobileClinic,
-            },
-        });
-
-        // Update local event data
-        event.value = { ...editForm.value };
-
-        //update map center if location changed
-        if (editForm.value.location.address !== event.value.location.address) {
-            center.value = [
-                editForm.value.location.longitude,
-                editForm.value.location.latitude,
-            ];
-        }
-
-        isEditMode.value = false;
-
-        console.log("✅ Event updated successfully");
-    } catch (error) {
-        if (error.status === 500) {
-            alert(
-                "Failed to geocode the provided location. Please check the address and try again.",
-            );
-            return;
-        }
-        console.error("❌ Error updating event:", error);
-        alert("Error updating event. Please try again.");
+  try {
+    console.log('💾 Saving changes...')
+
+    // Update event via API
+    const _updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
+      method: 'PATCH',
+      body: {
+        title: editForm.value.title,
+        shortDesc: editForm.value.shortDesc,
+        description: editForm.value.description,
+        location: editForm.value.location,
+        startTime: new Date(editForm.value.startTime).toISOString(),
+        endTime: new Date(editForm.value.endTime).toISOString(),
+        allowVolunteers: editForm.value.allowVolunteers,
+        allowAttendees: editForm.value.allowAttendees,
+        mobileClinic: editForm.value.mobileClinic,
+      },
+    })
+
+    // Update local event data
+    event.value = { ...editForm.value }
+
+    // update map center if location changed
+    if (editForm.value.location.address !== event.value.location.address) {
+      center.value = [
+        editForm.value.location.longitude,
+        editForm.value.location.latitude,
+      ]
     }
+
+    isEditMode.value = false
+
+    console.log('✅ Event updated successfully')
+  }
+  catch (error) {
+    if (error.status === 500) {
+      alert(
+        'Failed to geocode the provided location. Please check the address and try again.',
+      )
+      return
+    }
+    console.error('❌ Error updating event:', error)
+    alert('Error updating event. Please try again.')
+  }
 }
 
 const placeholders = [
-    "https://picsum.photos/640/640?random=1",
-    "https://picsum.photos/640/640?random=2",
-    "https://picsum.photos/640/640?random=3",
-    "https://picsum.photos/640/640?random=4",
-    "https://picsum.photos/640/640?random=5",
-    "https://picsum.photos/640/640?random=6",
-];
+  'https://picsum.photos/640/640?random=1',
+  'https://picsum.photos/640/640?random=2',
+  'https://picsum.photos/640/640?random=3',
+  'https://picsum.photos/640/640?random=4',
+  'https://picsum.photos/640/640?random=5',
+  'https://picsum.photos/640/640?random=6',
+]
 
-const filesToUpload = ref([]);
+const filesToUpload = ref([])
 
 function handleImageUpload(event) {
-    const files = event.target?.files || event;
-
-    if (!files || files.length === 0) return;
-
-    // Store actual File objects for upload
-    filesToUpload.value = [...filesToUpload.value, ...Array.from(files)];
-
-    // Create preview URLs
-    const imagePromises = Array.from(files).map((file) => {
-        return new Promise((resolve) => {
-            const reader = new FileReader();
-            reader.onload = (e) =>
-                resolve({
-                    imageUrl: e.target.result,
-                    fileName: file.name,
-                    isPreview: true,
-                });
-            reader.readAsDataURL(file);
-        });
-    });
-
-    Promise.all(imagePromises).then((images) => {
-        editForm.value.eventAssets = [
-            ...(editForm.value.eventAssets || []),
-            ...images,
-        ];
-    });
+  const files = event.target?.files || event
+
+  if (!files || files.length === 0) return
+
+  // Store actual File objects for upload
+  filesToUpload.value = [...filesToUpload.value, ...Array.from(files)]
+
+  // Create preview URLs
+  const imagePromises = Array.from(files).map((file) => {
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onload = e =>
+        resolve({
+          imageUrl: e.target.result,
+          fileName: file.name,
+          isPreview: true,
+        })
+      reader.readAsDataURL(file)
+    })
+  })
+
+  Promise.all(imagePromises).then((images) => {
+    editForm.value.eventAssets = [
+      ...(editForm.value.eventAssets || []),
+      ...images,
+    ]
+  })
 }
 
 async function uploadNewImages() {
-    if (filesToUpload.value.length === 0) return;
-
-    console.log(`📤 Uploading ${filesToUpload.value.length} new images...`);
-
-    for (const file of filesToUpload.value) {
-        const formData = new FormData();
-        formData.append("file", file);
-
-        try {
-            await $fetch(`/api/events/${event.value.id}/images/upload`, {
-                method: "POST",
-                body: formData,
-            });
-            console.log(`✅ Uploaded: ${file.name}`);
-        } catch (uploadError) {
-            console.error(`❌ Failed to upload ${file.name}:`, uploadError);
-        }
+  if (filesToUpload.value.length === 0) return
+
+  console.log(`📤 Uploading ${filesToUpload.value.length} new images...`)
+
+  for (const file of filesToUpload.value) {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    try {
+      await $fetch(`/api/events/${event.value.id}/images/upload`, {
+        method: 'POST',
+        body: formData,
+      })
+      console.log(`✅ Uploaded: ${file.name}`)
     }
+    catch (uploadError) {
+      console.error(`❌ Failed to upload ${file.name}:`, uploadError)
+    }
+  }
 
-    // Clear the upload queue
-    filesToUpload.value = [];
+  // Clear the upload queue
+  filesToUpload.value = []
 
-    // Reload event to get updated image URLs
-    const updatedEvent = await $fetch(`/api/events/${event.value.id}`);
-    event.value = updatedEvent;
-    editForm.value = { ...updatedEvent };
+  // Reload event to get updated image URLs
+  const updatedEvent = await $fetch(`/api/events/${event.value.id}`)
+  event.value = updatedEvent
+  editForm.value = { ...updatedEvent }
 }
 
 function removeImage(index) {
-    // const asset = editForm.value.eventAssets[index]
+  // const asset = editForm.value.eventAssets[index]
 
-    // If it's a preview (not yet uploaded), just remove from array
-    editForm.value.eventAssets.splice(index, 1);
-    filesToUpload.value.splice(index, 1);
+  // If it's a preview (not yet uploaded), just remove from array
+  editForm.value.eventAssets.splice(index, 1)
+  filesToUpload.value.splice(index, 1)
 }
 
 // Helper to get proper image URL
 function getImageUrl(asset) {
-    if (asset.isPreview) {
-        return asset.imageUrl; // Base64 preview
-    }
-    // Use your backend image endpoint
-    return `/api/events/${event.value.id}/images/${asset.imageUrl.split("/").pop()}`;
+  if (asset.isPreview) {
+    return asset.imageUrl // Base64 preview
+  }
+  // Use your backend image endpoint
+  return `/api/events/${event.value.id}/images/${asset.imageUrl.split('/').pop()}`
 }
 
 const fetchedItems = event.value?.eventAssets.map(
-    (asset) => "/api/events/" + asset.imageUrl,
-);
+  asset => '/api/events/' + asset.imageUrl,
+)
 
-const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders;
+const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
 
 const backNavigate = computed(() => {
-    return admin ? "/events/manage" : "/events";
-});
+  return admin ? '/events/manage' : '/events'
+})
 </script>
 
 <template>
-    <div class="min-h-screen bg-gray-50 pb-24">
-        <!-- Loading State -->
+  <div class="min-h-screen bg-gray-50 pb-24">
+    <!-- Loading State -->
+    <div
+      v-if="loading"
+      class="flex items-center justify-center min-h-screen"
+    >
+      <div class="text-center">
         <div
-            v-if="loading"
-            class="flex items-center justify-center min-h-screen"
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"
+        />
+        <p class="text-gray-600">
+          Loading event...
+        </p>
+      </div>
+    </div>
+
+    <!-- Not Found State -->
+    <div
+      v-else-if="notFound"
+      class="flex items-center justify-center min-h-screen"
+    >
+      <div class="text-center">
+        <UIcon
+          name="i-lucide-calendar-x"
+          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+        />
+        <h2 class="text-2xl font-bold text-gray-900 mb-2">
+          Event Not Found
+        </h2>
+        <p class="text-gray-600 mb-4">
+          The event you're looking for doesn't exist.
+        </p>
+        <UButton
+          icon="i-lucide-arrow-left"
+          @click="navigateTo('/eventManagement')"
         >
-            <div class="text-center">
-                <div
-                    class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"
-                />
-                <p class="text-gray-600">Loading event...</p>
-            </div>
+          Back to Events
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Event Details -->
+    <div v-else>
+      <!-- Header with Edit Button -->
+      <div class="bg-white shadow-sm sticky top-0 z-10 mt-16">
+        <div
+          class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"
+        >
+          <UButton
+            icon="i-lucide-arrow-left"
+            variant="ghost"
+            class="text-brand4"
+            @click="navigateTo(backNavigate)"
+          />
+
+          <div
+            v-if="admin"
+            class="flex gap-2"
+          >
+            <UButton
+              v-if="!isEditMode"
+              icon="i-lucide-pencil"
+              color="brand4"
+              variant="soft"
+              @click="toggleEditMode"
+            >
+              Edit Event
+            </UButton>
+
+            <template v-else>
+              <UButton
+                variant="ghost"
+                color="brand4"
+                @click="toggleEditMode"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                icon="i-lucide-check"
+                color="brand4"
+                @click="
+                  async () => {
+                    await saveChanges();
+                    await uploadNewImages();
+                  }
+                "
+              >
+                Save Changes
+              </UButton>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div class="max-w-4xl mx-auto px-4 py-8">
+        <!-- Event Title -->
+        <div class="mb-6">
+          <h1
+            v-if="!isEditMode"
+            class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center"
+          >
+            {{ event.title }}
+          </h1>
+
+          <UInput
+            v-else
+            v-model="editForm.title"
+            size="xl"
+            placeholder="Event Title"
+            class="text-4xl font-bold"
+          />
         </div>
 
-        <!-- Not Found State -->
+        <!-- Short Description -->
         <div
-            v-else-if="notFound"
-            class="flex items-center justify-center min-h-screen"
+          v-if="event.shortDesc || isEditMode"
+          class="bg-brand6 rounded-2xl p-3 mb-6"
         >
-            <div class="text-center">
-                <UIcon
-                    name="i-lucide-calendar-x"
-                    class="w-16 h-16 text-gray-400 mx-auto mb-4"
-                />
-                <h2 class="text-2xl font-bold text-gray-900 mb-2">
-                    Event Not Found
-                </h2>
-                <p class="text-gray-600 mb-4">
-                    The event you're looking for doesn't exist.
-                </p>
-                <UButton
-                    icon="i-lucide-arrow-left"
-                    @click="navigateTo('/eventManagement')"
-                >
-                    Back to Events
-                </UButton>
-            </div>
+          <p
+            v-if="!isEditMode"
+            class="text-md text-gray-700 italic"
+          >
+            {{ event.shortDesc }}
+          </p>
+          <UInput
+            v-else
+            v-model="editForm.shortDesc"
+            class="w-full"
+            placeholder="Short Description"
+            size="lg"
+          />
         </div>
 
-        <!-- Event Details -->
-        <div v-else>
-            <!-- Header with Edit Button -->
-            <div class="bg-white shadow-sm sticky top-0 z-10 mt-16">
-                <div
-                    class="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between"
+        <!-- Event Images Carousel -->
+        <div class="mb-8">
+          <UCarousel
+            v-if="!isEditMode"
+            v-slot="{ item }"
+            dots
+            :items="items"
+            class="h-80 max-w-xs mx-auto"
+          >
+            <img
+              :src="item"
+              class="h-80 w-auto rounded-lg mx-auto"
+            >
+          </UCarousel>
+
+          <!-- Edit Mode Images -->
+          <div
+            v-else
+            class="space-y-4"
+          >
+            <div
+              v-if="
+                editForm.eventAssets
+                  && editForm.eventAssets.length > 0
+              "
+              class="grid grid-cols-2 gap-4"
+            >
+              <div
+                v-for="(asset, index) in editForm.eventAssets"
+                :key="index"
+                class="relative h-48 rounded-xl overflow-hidden group"
+              >
+                <img
+                  :src="getImageUrl(asset)"
+                  alt="Event image"
+                  class="w-full h-full object-cover"
                 >
-                    <UButton
-                        icon="i-lucide-arrow-left"
-                        variant="ghost"
-                        class="text-brand4"
-                        @click="navigateTo(backNavigate)"
-                    />
-
-                    <div v-if="admin" class="flex gap-2">
-                        <UButton
-                            v-if="!isEditMode"
-                            icon="i-lucide-pencil"
-                            color="brand4"
-                            variant="soft"
-                            @click="toggleEditMode"
-                        >
-                            Edit Event
-                        </UButton>
-
-                        <template v-else>
-                            <UButton
-                                variant="ghost"
-                                color="brand4"
-                                @click="toggleEditMode"
-                            >
-                                Cancel
-                            </UButton>
-                            <UButton
-                                icon="i-lucide-check"
-                                color="brand4"
-                                @click="
-                                    async () => {
-                                        await saveChanges();
-                                        await uploadNewImages();
-                                    }
-                                "
-                            >
-                                Save Changes
-                            </UButton>
-                        </template>
-                    </div>
-                </div>
+                <button
+                  class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+                  type="button"
+                  @click="removeImage(index)"
+                >
+                  <UIcon
+                    name="i-lucide-x"
+                    class="w-4 h-4"
+                  />
+                </button>
+              </div>
             </div>
 
-            <div class="max-w-4xl mx-auto px-4 py-8">
-                <!-- Event Title -->
-                <div class="mb-6">
-                    <h1
-                        v-if="!isEditMode"
-                        class="text-3xl font-hornbill font-bold mb-2 text-brand4 text-center"
-                    >
-                        {{ event.title }}
-                    </h1>
-
-                    <UInput
-                        v-else
-                        v-model="editForm.title"
-                        size="xl"
-                        placeholder="Event Title"
-                        class="text-4xl font-bold"
-                    />
-                </div>
+            <div>
+              <label
+                class="block text-sm font-medium text-gray-700 mb-2"
+              >
+                Add Event Images
+              </label>
+              <input
+                type="file"
+                multiple
+                accept="image/*"
+                class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-brand4 hover:file:bg-primary-100 cursor-pointer"
+                @change="handleImageUpload"
+              >
+            </div>
+          </div>
+        </div>
 
-                <!-- Short Description -->
-                <div
-                    v-if="event.shortDesc || isEditMode"
-                    class="bg-brand6 rounded-2xl p-3 mb-6"
-                >
-                    <p v-if="!isEditMode" class="text-md text-gray-700 italic">
-                        {{ event.shortDesc }}
-                    </p>
-                    <UInput
-                        v-else
-                        v-model="editForm.shortDesc"
-                        class="w-full"
-                        placeholder="Short Description"
-                        size="lg"
-                    />
+        <!-- Date & Location Card -->
+        <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+          <div class="flex items-start gap-4 mb-4">
+            <div class="bg-brand6 p-3 rounded-xl">
+              <UIcon
+                name="i-lucide-calendar"
+                class="w-6 h-6 text-brand4"
+              />
+            </div>
+            <div class="flex-1">
+              <p class="text-sm text-gray-500 mb-1">
+                Date & Time
+              </p>
+              <p
+                v-if="!isEditMode"
+                class="text-gray-900 font-medium"
+              >
+                {{ formattedDate }}
+              </p>
+              <div
+                v-else
+                class="grid grid-rows-2 gap-2"
+              >
+                <div>
+                  <label class="text-xs text-gray-500">Start
+                  </label>
+                  <UInput
+                    v-model="editForm.startTime"
+                    type="datetime-local"
+                  />
                 </div>
-
-                <!-- Event Images Carousel -->
-                <div class="mb-8">
-                    <UCarousel
-                        v-if="!isEditMode"
-                        v-slot="{ item }"
-                        dots
-                        :items="items"
-                        class="h-80 max-w-xs mx-auto"
-                    >
-                        <img
-                            :src="item"
-                            class="h-80 w-auto rounded-lg mx-auto"
-                        >
-                    </UCarousel>
-
-                    <!-- Edit Mode Images -->
-                    <div v-else class="space-y-4">
-                        <div
-                            v-if="
-                                editForm.eventAssets &&
-                                editForm.eventAssets.length > 0
-                            "
-                            class="grid grid-cols-2 gap-4"
-                        >
-                            <div
-                                v-for="(asset, index) in editForm.eventAssets"
-                                :key="index"
-                                class="relative h-48 rounded-xl overflow-hidden group"
-                            >
-                                <img
-                                    :src="getImageUrl(asset)"
-                                    alt="Event image"
-                                    class="w-full h-full object-cover"
-                                >
-                                <button
-                                    class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
-                                    type="button"
-                                    @click="removeImage(index)"
-                                >
-                                    <UIcon name="i-lucide-x" class="w-4 h-4" />
-                                </button>
-                            </div>
-                        </div>
-
-                        <div>
-                            <label
-                                class="block text-sm font-medium text-gray-700 mb-2"
-                            >
-                                Add Event Images
-                            </label>
-                            <input
-                                type="file"
-                                multiple
-                                accept="image/*"
-                                class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-brand4 hover:file:bg-primary-100 cursor-pointer"
-                                @change="handleImageUpload"
-                            >
-                        </div>
-                    </div>
+                <div>
+                  <label class="text-xs text-gray-500">End
+                  </label>
+                  <UInput
+                    v-model="editForm.endTime"
+                    type="datetime-local"
+                  />
                 </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex items-start gap-4">
+            <div class="bg-brand6 p-3 rounded-xl">
+              <UIcon
+                name="i-lucide-map-pin"
+                class="w-6 h-6 text-brand4"
+              />
+            </div>
+            <div class="flex-1">
+              <p class="text-sm text-gray-500 mb-1">
+                Location
+              </p>
+              <p
+                v-if="!isEditMode"
+                class="text-gray-900 font-medium"
+              >
+                {{ event.location.address }}
+              </p>
+              <UInput
+                v-else
+                v-model="editForm.location.address"
+                placeholder="Event Location"
+              />
+            </div>
+          </div>
+        </div>
 
-                <!-- Date & Location Card -->
-                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-                    <div class="flex items-start gap-4 mb-4">
-                        <div class="bg-brand6 p-3 rounded-xl">
-                            <UIcon
-                                name="i-lucide-calendar"
-                                class="w-6 h-6 text-brand4"
-                            />
-                        </div>
-                        <div class="flex-1">
-                            <p class="text-sm text-gray-500 mb-1">
-                                Date & Time
-                            </p>
-                            <p
-                                v-if="!isEditMode"
-                                class="text-gray-900 font-medium"
-                            >
-                                {{ formattedDate }}
-                            </p>
-                            <div v-else class="grid grid-rows-2 gap-2">
-                                <div>
-                                    <label class="text-xs text-gray-500"
-                                        >Start
-                                    </label>
-                                    <UInput
-                                        v-model="editForm.startTime"
-                                        type="datetime-local"
-                                    />
-                                </div>
-                                <div>
-                                    <label class="text-xs text-gray-500"
-                                        >End
-                                    </label>
-                                    <UInput
-                                        v-model="editForm.endTime"
-                                        type="datetime-local"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex items-start gap-4">
-                        <div class="bg-brand6 p-3 rounded-xl">
-                            <UIcon
-                                name="i-lucide-map-pin"
-                                class="w-6 h-6 text-brand4"
-                            />
-                        </div>
-                        <div class="flex-1">
-                            <p class="text-sm text-gray-500 mb-1">Location</p>
-                            <p
-                                v-if="!isEditMode"
-                                class="text-gray-900 font-medium"
-                            >
-                                {{ event.location.address }}
-                            </p>
-                            <UInput
-                                v-else
-                                v-model="editForm.location.address"
-                                placeholder="Event Location"
-                            />
-                        </div>
-                    </div>
-                </div>
+        <div
+          v-if="!isEditMode"
+          id="map"
+          class="h-60 relative overflow-hidden justify-center items-center mb-6"
+        >
+          <MapInteractive
+            :style="style"
+            :center="center"
+            :zoom="zoom"
+          />
+        </div>
 
-                <div
-                    v-if="!isEditMode"
-                    id="map"
-                    class="h-60 relative overflow-hidden justify-center items-center mb-6"
-                >
-                    <MapInteractive
-                        :style="style"
-                        :center="center"
-                        :zoom="zoom"
-                    />
-                </div>
+        <!-- Full Description -->
+        <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+          <h2 class="text-2xl font-semibold mb-4">
+            About This Event
+          </h2>
+          <p
+            v-if="!isEditMode"
+            class="text-gray-700 leading-relaxed whitespace-pre-line"
+          >
+            {{ event.description }}
+          </p>
+          <UTextarea
+            v-else
+            v-model="editForm.description"
+            class="w-full"
+            placeholder="Full event description"
+            :rows="6"
+          />
+        </div>
 
-                <!-- Full Description -->
-                <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-                    <h2 class="text-2xl font-semibold mb-4">
-                        About This Event
-                    </h2>
-                    <p
-                        v-if="!isEditMode"
-                        class="text-gray-700 leading-relaxed whitespace-pre-line"
-                    >
-                        {{ event.description }}
-                    </p>
-                    <UTextarea
-                        v-else
-                        v-model="editForm.description"
-                        class="w-full"
-                        placeholder="Full event description"
-                        :rows="6"
-                    />
-                </div>
+        <div
+          v-if="event.mobileClinicId"
+          class="mt-4 mb-4"
+        >
+          <p class="text-gray-600 font-poppins">
+            This event is part of our Mobile Clinic program. Please
+            visit the clinic for health services and support.
+          </p>
+        </div>
 
-                <div v-if="event.mobileClinicId" class="mt-4 mb-4">
-                    <p class="text-gray-600 font-poppins">
-                        This event is part of our Mobile Clinic program. Please
-                        visit the clinic for health services and support.
-                    </p>
+        <!-- Event Options -->
+        <div
+          v-if="admin && isEditMode"
+          class="bg-white rounded-2xl shadow-sm p-6 mb-6"
+        >
+          <h2 class="text-2xl font-semibold mb-4">
+            Event Settings
+          </h2>
+
+          <div class="space-y-4">
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
+              <div class="flex items-center gap-3">
+                <UIcon
+                  name="i-lucide-users"
+                  class="w-5 h-5 text-brand4"
+                />
+                <div>
+                  <p class="font-medium text-gray-900">
+                    Volunteer Sign-ups
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Allow people to volunteer for this
+                    event?
+                  </p>
                 </div>
+              </div>
+              <label
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.allowVolunteers"
+                  color="brand4"
+                />
+              </label>
+            </div>
 
-                <!-- Event Options -->
-                <div
-                    v-if="admin && isEditMode"
-                    class="bg-white rounded-2xl shadow-sm p-6 mb-6"
-                >
-                    <h2 class="text-2xl font-semibold mb-4">Event Settings</h2>
-
-                    <div class="space-y-4">
-                        <div
-                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
-                        >
-                            <div class="flex items-center gap-3">
-                                <UIcon
-                                    name="i-lucide-users"
-                                    class="w-5 h-5 text-brand4"
-                                />
-                                <div>
-                                    <p class="font-medium text-gray-900">
-                                        Volunteer Sign-ups
-                                    </p>
-                                    <p class="text-sm text-gray-500">
-                                        Allow people to volunteer for this
-                                        event?
-                                    </p>
-                                </div>
-                            </div>
-                            <label
-                                class="flex items-center gap-2 cursor-pointer"
-                            >
-                                <UCheckbox
-                                    v-model="editForm.allowVolunteers"
-                                    color="brand4"
-                                />
-                            </label>
-                        </div>
-
-                        <div
-                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
-                        >
-                            <div class="flex items-center gap-3">
-                                <UIcon
-                                    name="i-lucide-ticket"
-                                    class="w-5 h-5 text-brand4"
-                                />
-                                <div>
-                                    <p class="font-medium text-gray-900">
-                                        Attendee Registration
-                                    </p>
-                                    <p class="text-sm text-gray-500">
-                                        Allow people to register as attendees?
-                                    </p>
-                                </div>
-                            </div>
-                            <label
-                                v-if="isEditMode"
-                                class="flex items-center gap-2 cursor-pointer"
-                            >
-                                <UCheckbox
-                                    v-model="editForm.allowAttendees"
-                                    color="brand4"
-                                />
-                            </label>
-                            <label v-else class="flex items-center gap-2">
-                                <UCheckbox
-                                    :model-value="event.allowAttendees"
-                                    color="brand4"
-                                    disabled
-                                />
-                            </label>
-                        </div>
-
-                        <div
-                            class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
-                        >
-                            <div class="flex items-center gap-3">
-                                <UIcon
-                                    name="i-lucide-ticket"
-                                    class="w-5 h-5 text-brand4"
-                                />
-                                <div>
-                                    <p class="font-medium text-gray-900">
-                                        Mobile Clinic
-                                    </p>
-                                    <p class="text-sm text-gray-500">
-                                        Will this event have a mobile clinic?
-                                    </p>
-                                </div>
-                            </div>
-                            <label
-                                v-if="isEditMode"
-                                class="flex items-center gap-2 cursor-pointer"
-                            >
-                                <UCheckbox
-                                    v-model="editForm.mobileClinic"
-                                    color="brand4"
-                                />
-                            </label>
-                            <label v-else class="flex items-center gap-2">
-                                <UCheckbox
-                                    :model-value="Boolean(event.mobileClinicId)"
-                                    color="brand4"
-                                    disabled
-                                />
-                            </label>
-                        </div>
-                    </div>
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
+              <div class="flex items-center gap-3">
+                <UIcon
+                  name="i-lucide-ticket"
+                  class="w-5 h-5 text-brand4"
+                />
+                <div>
+                  <p class="font-medium text-gray-900">
+                    Attendee Registration
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Allow people to register as attendees?
+                  </p>
                 </div>
+              </div>
+              <label
+                v-if="isEditMode"
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.allowAttendees"
+                  color="brand4"
+                />
+              </label>
+              <label
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UCheckbox
+                  :model-value="event.allowAttendees"
+                  color="brand4"
+                  disabled
+                />
+              </label>
+            </div>
 
-                <!-- Action Buttons for Attendees/Volunteers -->
-                <div v-if="!isEditMode" class="flex gap-4">
-                    <UButton
-                        v-if="event.allowVolunteers"
-                        color="brand4"
-                        size="xl"
-                        block
-                        icon="i-lucide-heart-handshake"
-                    >
-                        Sign Up as Volunteer
-                    </UButton>
-
-                    <UButton
-                        v-if="event.allowAttendees"
-                        color="brand4"
-                        variant="outline"
-                        size="xl"
-                        block
-                        icon="i-lucide-ticket"
-                    >
-                        Register to Attend
-                    </UButton>
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
+              <div class="flex items-center gap-3">
+                <UIcon
+                  name="i-lucide-ticket"
+                  class="w-5 h-5 text-brand4"
+                />
+                <div>
+                  <p class="font-medium text-gray-900">
+                    Mobile Clinic
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Will this event have a mobile clinic?
+                  </p>
                 </div>
+              </div>
+              <label
+                v-if="isEditMode"
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.mobileClinic"
+                  color="brand4"
+                />
+              </label>
+              <label
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UCheckbox
+                  :model-value="Boolean(event.mobileClinicId)"
+                  color="brand4"
+                  disabled
+                />
+              </label>
             </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons for Attendees/Volunteers -->
+        <div
+          v-if="!isEditMode"
+          class="flex gap-4"
+        >
+          <UButton
+            v-if="event.allowVolunteers"
+            color="brand4"
+            size="xl"
+            block
+            icon="i-lucide-heart-handshake"
+          >
+            Sign Up as Volunteer
+          </UButton>
+
+          <UButton
+            v-if="event.allowAttendees"
+            color="brand4"
+            variant="outline"
+            size="xl"
+            block
+            icon="i-lucide-ticket"
+          >
+            Register to Attend
+          </UButton>
         </div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index aa64d54..42debbd 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,164 +1,182 @@
 <script setup lang="ts">
-import type { DateValue } from "@internationalized/date";
-import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
+import type { DateValue } from '@internationalized/date'
+import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
 
-const tz = getLocalTimeZone();
+const tz = getLocalTimeZone()
 
-const value = ref<DateValue>(new CalendarDate(2022, 2, 3));
+const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
 
 async function navigateToEvent(eventId) {
-    console.log("Navigating to event:", eventId);
-    await navigateTo(`/events/${eventId}`);
+  console.log('Navigating to event:', eventId)
+  await navigateTo(`/events/${eventId}`)
 }
 
 type Event = {
-    id: string;
-    title: string;
-    startTime: string;
-    location: {
-        id: string;
-        address: string;
-        latitude: number;
-        longitude: number;
-    };
-    eventAssets: {
-        id: string;
-        imageUrl: string;
-    }[];
-};
+  id: string
+  title: string
+  startTime: string
+  location: {
+    id: string
+    address: string
+    latitude: number
+    longitude: number
+  }
+  eventAssets: {
+    id: string
+    imageUrl: string
+  }[]
+}
 
-const { data: eventsData } = await useFetch<Event[]>("/api/events", {
-    default: () => [],
-});
+const { data: eventsData } = await useFetch<Event[]>('/api/events', {
+  default: () => [],
+})
 
 const imageAPI = (url: string | undefined) => {
-    return url ? `/api/events/${url}` : undefined;
-};
+  return url ? `/api/events/${url}` : undefined
+}
 
 const events = computed(() =>
-    (eventsData.value || [])
-        .filter((e) => new Date(e.startTime).getTime() >= Date.now())
-        .sort(
-            (a, b) =>
-                new Date(a.startTime).getTime() -
-                new Date(b.startTime).getTime(),
-        )
-        .slice(0, 6)
-        .map((e) => ({
-            id: e.id,
-            title: e.title,
-            date: new Date(e.startTime).toLocaleDateString("en-US", {
-                month: "short",
-                day: "2-digit",
-                year: "numeric",
-            }),
-            location: e.location,
-            image:
-                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? "/images/image1.jpeg",
-        })),
-);
+  (eventsData.value || [])
+    .filter(e => new Date(e.startTime).getTime() >= Date.now())
+    .sort(
+      (a, b) =>
+        new Date(a.startTime).getTime()
+          - new Date(b.startTime).getTime(),
+    )
+    .slice(0, 6)
+    .map(e => ({
+      id: e.id,
+      title: e.title,
+      date: new Date(e.startTime).toLocaleDateString('en-US', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric',
+      }),
+      location: e.location,
+      image:
+                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? '/images/image1.jpeg',
+    })),
+)
 
 const isDateDisabled = (d: DateValue) =>
-    d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0));
+  d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
 </script>
 
 <template>
-    <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
-        <div class="w-full h-full mt-12 mb-12 px-4 py-12 overflow-y-auto">
-            <h2
-                class="text-center text-2xl font-bold text-brand4 dark:text-teal-400"
-            >
-                Events
-            </h2>
+  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+    <div class="w-full h-full mt-12 mb-12 px-4 py-12 overflow-y-auto">
+      <h2
+        class="text-center text-2xl font-bold text-brand4 dark:text-teal-400"
+      >
+        Events
+      </h2>
 
-            <UCard class="max-w-4xl mx-auto mb-4">
-                <UCalendar
-                    :v-model="value"
-                    color="brand7"
-                    :is-date-disabled="isDateDisabled"
-                    locale="en-US"
-                    weekday-format="short"
-                    :first-day-of-week="0"
-                    class="rounded-2xl"
-                />
-            </UCard>
-            <!-- Upcoming Events -->
-            <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
-                <h3 class="text-2xl font-semibold text-brand4 mb-4">
-                    UPCOMING EVENTS
-                </h3>
-                <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-                    <div
-                        v-for="event in events"
-                        :key="event.id"
-                        class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-                        @click.stop="navigateToEvent(event.id)"
-                    >
-                        <!-- Event Image Placeholder -->
-                        <div class="h-35 relative overflow-hidden">
-                            <img
-                                :src="event.image"
-                                class="w-full h-full object-cover"
-                            />
-                        </div>
+      <UCard class="max-w-4xl mx-auto mb-4">
+        <UCalendar
+          :v-model="value"
+          color="brand7"
+          :is-date-disabled="isDateDisabled"
+          locale="en-US"
+          weekday-format="short"
+          :first-day-of-week="0"
+          class="rounded-2xl"
+        />
+      </UCard>
+      <!-- Upcoming Events -->
+      <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
+        <h3 class="text-2xl font-semibold text-brand4 mb-4">
+          UPCOMING EVENTS
+        </h3>
+        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+          <div
+            v-for="event in events"
+            :key="event.id"
+            class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+            @click.stop="navigateToEvent(event.id)"
+          >
+            <!-- Event Image Placeholder -->
+            <div class="h-35 relative overflow-hidden">
+              <img
+                :src="event.image"
+                class="w-full h-full object-cover"
+              >
+            </div>
 
-                        <!-- Event Content -->
-                        <div class="p-2">
-                            <h4
-                                class="text-sm font_semibold text-brand4 mb-1.5"
-                            >
-                                {{ event.title }}
-                            </h4>
-                            <div class="space-y-2">
-                                <!-- Date -->
-                                <div
-                                    class="flex items-center text-gray-600 text-[12px]"
-                                >
-                                    <svg
-                                        class="w-4 h-4 mr-2 text-teal-600"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <rect
-                                            x="3"
-                                            y="4"
-                                            width="18"
-                                            height="18"
-                                            rx="2"
-                                            ry="2"
-                                        />
-                                        <line x1="16" y1="2" x2="16" y2="6" />
-                                        <line x1="8" y1="2" x2="8" y2="6" />
-                                        <line x1="3" y1="10" x2="21" y2="10" />
-                                    </svg>
-                                    <span>{{ event.date }}</span>
-                                </div>
+            <!-- Event Content -->
+            <div class="p-2">
+              <h4
+                class="text-sm font_semibold text-brand4 mb-1.5"
+              >
+                {{ event.title }}
+              </h4>
+              <div class="space-y-2">
+                <!-- Date -->
+                <div
+                  class="flex items-center text-gray-600 text-[12px]"
+                >
+                  <svg
+                    class="w-4 h-4 mr-2 text-teal-600"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      x="3"
+                      y="4"
+                      width="18"
+                      height="18"
+                      rx="2"
+                      ry="2"
+                    />
+                    <line
+                      x1="16"
+                      y1="2"
+                      x2="16"
+                      y2="6"
+                    />
+                    <line
+                      x1="8"
+                      y1="2"
+                      x2="8"
+                      y2="6"
+                    />
+                    <line
+                      x1="3"
+                      y1="10"
+                      x2="21"
+                      y2="10"
+                    />
+                  </svg>
+                  <span>{{ event.date }}</span>
+                </div>
 
-                                <!-- Location -->
-                                <div
-                                    class="flex items-start text-gray-600 text-[10px]"
-                                >
-                                    <svg
-                                        class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path
-                                            d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
-                                        />
-                                        <circle cx="12" cy="10" r="3" />
-                                    </svg>
-                                    <span class="leading-tight">
-                                        {{ event.location.address }}</span
-                                    >
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <!-- Location -->
+                <div
+                  class="flex items-start text-gray-600 text-[10px]"
+                >
+                  <svg
+                    class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
+                    />
+                    <circle
+                      cx="12"
+                      cy="10"
+                      r="3"
+                    />
+                  </svg>
+                  <span class="leading-tight">
+                    {{ event.location.address }}</span>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index fb3ae86..e79992a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,355 +1,336 @@
 <script setup lang="ts">
-import 'vue3-carousel/dist/carousel.css'
-import { Carousel, Slide, Pagination } from 'vue3-carousel'
+import "vue3-carousel/dist/carousel.css";
+import { Carousel, Slide, Pagination } from "vue3-carousel";
 
 const {
-  data: donations,
-  pending: donationsPending,
-  error: donationsError,
+    data: donations,
+    pending: donationsPending,
+    error: donationsError,
 } = await useFetch<
-  {
-    id: string
-    name: string
-    link: string
-    startDate: string
-    endDate: string
-    imageUrl: string
-  }[]
->('/api/admin/donations')
+    {
+        id: string;
+        name: string;
+        link: string;
+        startDate: string;
+        endDate: string;
+        imageUrl: string;
+    }[]
+>("/api/admin/donations");
 
 const carouselConfig = {
-  itemsToShow: 1,
-  wrapAround: true,
-  mouseDrag: true,
-  touchDrag: true,
-  autoplay: 6000,
-}
+    itemsToShow: 1,
+    wrapAround: true,
+    mouseDrag: true,
+    touchDrag: true,
+    autoplay: 6000,
+};
 
 type Event = {
-  id: string
-  title: string
-  startTime: string
-  location: {
-    id: string
-    address: string
-    latitude: number
-    longitude: number
-  }
-  eventAssets: {
-    id: string
-    imageUrl: string
-  }[]
-}
+    id: string;
+    title: string;
+    startTime: string;
+    location: {
+        id: string;
+        address: string;
+        latitude: number;
+        longitude: number;
+    };
+    eventAssets: {
+        id: string;
+        imageUrl: string;
+    }[];
+};
 
-const { data: eventsData } = await useFetch<Event[]>('/api/events', {
-  default: () => [],
-})
+const { data: eventsData } = await useFetch<Event[]>("/api/events", {
+    default: () => [],
+});
 
 const slides = ref([
-  { id: 1, src: '/images/image1.jpeg', alt: 'Slide 1' },
-  { id: 2, src: '/images/image1.jpeg', alt: 'Slide 2' },
-  { id: 3, src: '/images/image1.jpeg', alt: 'Slide 3' },
-  { id: 4, src: '/images/image1.jpeg', alt: 'Slide 4' },
-])
+    { id: 1, src: "/images/image1.jpeg", alt: "Slide 1" },
+    { id: 2, src: "/images/image1.jpeg", alt: "Slide 2" },
+    { id: 3, src: "/images/image1.jpeg", alt: "Slide 3" },
+    { id: 4, src: "/images/image1.jpeg", alt: "Slide 4" },
+]);
 
 const handleSignUp = () => {
-  navigateTo('/auth/sign-up')
-}
+    navigateTo("/auth/sign-up");
+};
 
 const services = ref([
-  {
-    id: 1,
-    name: 'Prenatal Care',
-    image: '/images/image1.jpeg',
-    href: 'https://www.abidewomen.org/prenatalcare',
-  },
-  {
-    id: 2,
-    name: 'Postpatrum Care',
-    image: '/images/image1.jpeg',
-    href: 'https://www.abidewomen.org/postpartumcare',
-  },
-  {
-    id: 3,
-    name: 'Childbirth Education',
-    image: '/images/image1.jpeg',
-    href: 'https://www.abidewomen.org/childbirthed',
-  },
-  {
-    id: 4,
-    name: 'Mobile Clinic',
-    image: '/images/image1.jpeg',
-    href: 'https://www.abidewomen.org/mobile-clinic',
-  },
-])
+    {
+        id: 1,
+        name: "Prenatal Care",
+        image: "/images/image1.jpeg",
+        href: "https://www.abidewomen.org/prenatalcare",
+    },
+    {
+        id: 2,
+        name: "Postpatrum Care",
+        image: "/images/image1.jpeg",
+        href: "https://www.abidewomen.org/postpartumcare",
+    },
+    {
+        id: 3,
+        name: "Childbirth Education",
+        image: "/images/image1.jpeg",
+        href: "https://www.abidewomen.org/childbirthed",
+    },
+    {
+        id: 4,
+        name: "Mobile Clinic",
+        image: "/images/image1.jpeg",
+        href: "https://www.abidewomen.org/mobile-clinic",
+    },
+]);
 
 const imageAPI = (url: string | undefined) => {
-  return url ? `/api/events/${url}` : undefined
-}
+    return url ? `/api/events/${url}` : undefined;
+};
 
 const events = computed(() =>
-  (eventsData.value || [])
-    .filter(e => new Date(e.startTime).getTime() >= Date.now())
-    .sort(
-      (a, b) =>
-        new Date(a.startTime).getTime()
-          - new Date(b.startTime).getTime(),
-    )
-    .slice(0, 6)
-    .map(e => ({
-      id: e.id,
-      title: e.title,
-      date: new Date(e.startTime).toLocaleDateString('en-US', {
-        month: 'short',
-        day: '2-digit',
-        year: 'numeric',
-      }),
-      location: e.location,
-      image:
-                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? '/images/image1.jpeg',
-    })),
-)
+    (eventsData.value || [])
+        .filter((e) => new Date(e.startTime).getTime() >= Date.now())
+        .sort(
+            (a, b) =>
+                new Date(a.startTime).getTime() -
+                new Date(b.startTime).getTime(),
+        )
+        .slice(0, 6)
+        .map((e) => ({
+            id: e.id,
+            title: e.title,
+            date: new Date(e.startTime).toLocaleDateString("en-US", {
+                month: "short",
+                day: "2-digit",
+                year: "numeric",
+            }),
+            location: e.location,
+            image:
+                imageAPI(e.eventAssets?.[0]?.imageUrl) ?? "/images/image1.jpeg",
+        })),
+);
+
+const handleEventClick = (event: Event) => {
+    navigateTo(`/events/${event.id}`);
+};
 </script>
 
 <template>
-  <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
-    <div class="flex-1 mt-12 mb-12 pt-4 w-full h-full overflow-y-auto">
-      <!-- Hero / Carousel Section -->
-      <div class="w-full max-h-[600px] overflow-y-auto">
-        <Carousel
-          v-bind="carouselConfig"
-          class="flex-1 max-h-full overflow-y-auto rounded-3xl"
-        >
-          <Slide
-            v-for="slide in slides"
-            :key="slide.id"
-            class="max-h-full px-4 overflow-y-hidden rounded-3xl"
-          >
-            <img
-              :src="slide.src"
-              :alt="slide.alt"
-              class="max-h-full object-cover rounded-3xl px-1"
-            >
-          </Slide>
-
-          <template #addons>
-            <!-- <Navigation /> -->
-            <Pagination />
-          </template>
-        </Carousel>
-      </div>
+    <div class="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+        <div class="flex-1 mt-12 mb-12 pt-4 w-full h-full overflow-y-auto">
+            <!-- Hero / Carousel Section -->
+            <div class="w-full max-h-[600px] overflow-y-auto">
+                <Carousel
+                    v-bind="carouselConfig"
+                    class="flex-1 max-h-full overflow-y-auto rounded-3xl"
+                >
+                    <Slide
+                        v-for="slide in slides"
+                        :key="slide.id"
+                        class="max-h-full px-4 overflow-y-hidden rounded-3xl"
+                    >
+                        <img
+                            :src="slide.src"
+                            :alt="slide.alt"
+                            class="max-h-full object-cover rounded-3xl px-1"
+                        />
+                    </Slide>
 
-      <!-- Upcoming Events -->
-      <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
-        <h3 class="text-2xl font-semibold text-brand4 mb-4">
-          UPCOMING EVENTS
-        </h3>
-        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-          <div
-            v-for="event in events"
-            :key="event.id"
-            class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-          >
-            <!-- Event Image Placeholder -->
-            <div class="h-35 relative overflow-hidden">
-              <img
-                :src="event.image"
-                class="w-full h-full object-cover"
-              >
+                    <template #addons>
+                        <!-- <Navigation /> -->
+                        <Pagination />
+                    </template>
+                </Carousel>
             </div>
 
-            <!-- Event Content -->
-            <div class="p-2">
-              <h4
-                class="text-sm font_semibold text-brand4 mb-1.5"
-              >
-                {{ event.title }}
-              </h4>
-              <div class="space-y-2">
-                <!-- Date -->
-                <div
-                  class="flex items-center text-gray-600 text-[12px]"
-                >
-                  <svg
-                    class="w-4 h-4 mr-2 text-teal-600"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <rect
-                      x="3"
-                      y="4"
-                      width="18"
-                      height="18"
-                      rx="2"
-                      ry="2"
-                    />
-                    <line
-                      x1="16"
-                      y1="2"
-                      x2="16"
-                      y2="6"
-                    />
-                    <line
-                      x1="8"
-                      y1="2"
-                      x2="8"
-                      y2="6"
-                    />
-                    <line
-                      x1="3"
-                      y1="10"
-                      x2="21"
-                      y2="10"
-                    />
-                  </svg>
-                  <span>{{ event.date }}</span>
-                </div>
+            <!-- Upcoming Events -->
+            <div class="px-2 pb-4 pl-4 pt-4 w-full relative">
+                <h3 class="text-2xl font-semibold text-brand4 mb-4">
+                    UPCOMING EVENTS
+                </h3>
+                <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+                    <div
+                        v-for="event in events"
+                        :key="event.id"
+                        @click="handleEventClick(event)"
+                        class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+                    >
+                        <!-- Event Image Placeholder -->
+                        <div class="h-35 relative overflow-hidden">
+                            <img
+                                :src="event.image"
+                                class="w-full h-full object-cover"
+                            />
+                        </div>
 
-                <!-- Location -->
-                <div
-                  class="flex items-start text-gray-600 text-[10px]"
-                >
-                  <svg
-                    class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
-                    />
-                    <circle
-                      cx="12"
-                      cy="10"
-                      r="3"
-                    />
-                  </svg>
-                  <span class="leading-tight">
-                    {{ event.location.address }}</span>
+                        <!-- Event Content -->
+                        <div class="p-2">
+                            <h4
+                                class="text-sm font_semibold text-brand4 mb-1.5"
+                            >
+                                {{ event.title }}
+                            </h4>
+                            <div class="space-y-2">
+                                <!-- Date -->
+                                <div
+                                    class="flex items-center text-gray-600 text-[12px]"
+                                >
+                                    <svg
+                                        class="w-4 h-4 mr-2 text-teal-600"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <rect
+                                            x="3"
+                                            y="4"
+                                            width="18"
+                                            height="18"
+                                            rx="2"
+                                            ry="2"
+                                        />
+                                        <line x1="16" y1="2" x2="16" y2="6" />
+                                        <line x1="8" y1="2" x2="8" y2="6" />
+                                        <line x1="3" y1="10" x2="21" y2="10" />
+                                    </svg>
+                                    <span>{{ event.date }}</span>
+                                </div>
+
+                                <!-- Location -->
+                                <div
+                                    class="flex items-start text-gray-600 text-[10px]"
+                                >
+                                    <svg
+                                        class="w-3 h-3 mr-2 ml-0.5 mt-0.5 text-teal-600 shrink-0"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
+                                        />
+                                        <circle cx="12" cy="10" r="3" />
+                                    </svg>
+                                    <span class="leading-tight">
+                                        {{ event.location.address }}</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <!-- Volunteer Sign Up -->
-      <div
-        class="bg-rose-800 text-center py-4 px-4 relative overflow-hidden items-center justify-center min-h-[100px]"
-      >
-        <p class="text-white font-bold text-lg mb-1">
-          Become A Volunteer
-        </p>
-        <!-- Sign up Button -->
-        <button
-          class="group relative bg-white text-rose-700 font-bold px-7 py-2 mb-1 rounded-full shadow-lg hover:shadow-2xl transition-transform hover:scale-105 active:scale-100 duration-300 overflow-hidden"
-          @click="handleSignUp"
-        >
-          <span
-            class="absolute inset-0 z-0 opacity-0 scale-95 rounded-full group-hover:opacity-100 group-hover:scale-100 transition-transform duration-300 bg-rose"
-          />
-          <span
-            class="relative z-10 flex items-center justify-center gap-1 text-lg"
-          >
-            <span>Sign Up</span>
-            <svg
-              class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="3"
+            <!-- Volunteer Sign Up -->
+            <div
+                class="bg-rose-800 text-center py-4 px-4 relative overflow-hidden items-center justify-center min-h-[100px]"
             >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M13 7l5 5m0 0l-5 5m5-5H5"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-
-      <!-- Services -->
-      <div class="px-2 pb-4 pt-4 pl-4">
-        <h3 class="text-2xl font-semibold text-brand4 mb-4">
-          SERVICES
-        </h3>
-        <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
-          <a
-            v-for="service in services"
-            :key="service.id"
-            :href="service.href"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-          >
-            <div class="h-35 relative overflow-hidden">
-              <img
-                :src="service.image"
-                :alt="service.name"
-                class="w-full h-full object-cover transition-transform duration-300"
-              >
-              <div
-                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
-              >
-                <p
-                  class="text-white text-sm font-semibold truncate"
-                >
-                  {{ service.name }}
+                <p class="text-white font-bold text-lg mb-1">
+                    Become A Volunteer
                 </p>
-              </div>
+                <!-- Sign up Button -->
+                <button
+                    class="group relative bg-white text-rose-700 font-bold px-7 py-2 mb-1 rounded-full shadow-lg hover:shadow-2xl transition-transform hover:scale-105 active:scale-100 duration-300 overflow-hidden"
+                    @click="handleSignUp"
+                >
+                    <span
+                        class="absolute inset-0 z-0 opacity-0 scale-95 rounded-full group-hover:opacity-100 group-hover:scale-100 transition-transform duration-300 bg-rose"
+                    />
+                    <span
+                        class="relative z-10 flex items-center justify-center gap-1 text-lg"
+                    >
+                        <span>Sign Up</span>
+                        <svg
+                            class="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            stroke-width="3"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M13 7l5 5m0 0l-5 5m5-5H5"
+                            />
+                        </svg>
+                    </span>
+                </button>
             </div>
-          </a>
-        </div>
-      </div>
-      <!-- Donations -->
-      <div class="px-2 pb-4 pt-4 pl-4">
-        <h3 class="text-2xl font-semibold text-brand4 mb-4">
-          DONATIONS
-        </h3>
-        <div
-          v-if="donationsPending"
-          class="text-gray-400 text-sm"
-        >
-          Loading...
-        </div>
-        <div
-          v-else-if="donationsError"
-          class="text-red-500 text-sm"
-        >
-          Failed to load donations.
-        </div>
-        <div
-          v-else
-          class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide"
-        >
-          <a
-            v-for="donation in donations"
-            :key="donation.id"
-            :href="donation.link"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
-          >
-            <div class="h-35 relative overflow-hidden">
-              <img
-                :src="`/api/admin/donations/${donation.id}/image`"
-                :alt="donation.name"
-                class="w-full h-full object-cover transition-transform duration-300"
-              >
-              <div
-                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
-              >
-                <p
-                  class="text-white text-sm font-semibold truncate"
+
+            <!-- Services -->
+            <div class="px-2 pb-4 pt-4 pl-4">
+                <h3 class="text-2xl font-semibold text-brand4 mb-4">
+                    SERVICES
+                </h3>
+                <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide">
+                    <a
+                        v-for="service in services"
+                        :key="service.id"
+                        :href="service.href"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+                    >
+                        <div class="h-35 relative overflow-hidden">
+                            <img
+                                :src="service.image"
+                                :alt="service.name"
+                                class="w-full h-full object-cover transition-transform duration-300"
+                            />
+                            <div
+                                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
+                            >
+                                <p
+                                    class="text-white text-sm font-semibold truncate"
+                                >
+                                    {{ service.name }}
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <!-- Donations -->
+            <div class="px-2 pb-4 pt-4 pl-4">
+                <h3 class="text-2xl font-semibold text-brand4 mb-4">
+                    DONATIONS
+                </h3>
+                <div v-if="donationsPending" class="text-gray-400 text-sm">
+                    Loading...
+                </div>
+                <div v-else-if="donationsError" class="text-red-500 text-sm">
+                    Failed to load donations.
+                </div>
+                <div
+                    v-else
+                    class="flex gap-3 overflow-x-auto pb-2 scrollbar-hide"
                 >
-                  {{ donation.name }}
-                </p>
-              </div>
+                    <a
+                        v-for="donation in donations"
+                        :key="donation.id"
+                        :href="donation.link"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="shrink-0 w-[190px] rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+                    >
+                        <div class="h-35 relative overflow-hidden">
+                            <img
+                                :src="`/api/admin/donations/${donation.id}/image`"
+                                :alt="donation.name"
+                                class="w-full h-full object-cover transition-transform duration-300"
+                            />
+                            <div
+                                class="absolute inset-x-0 bottom-0 w-full bg-linear-to-t from-black/60 to-transparent p-2"
+                            >
+                                <p
+                                    class="text-white text-sm font-semibold truncate"
+                                >
+                                    {{ donation.name }}
+                                </p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
             </div>
-          </a>
         </div>
-      </div>
     </div>
-  </div>
 </template>
diff --git a/app/pages/mobileClinic.vue b/app/pages/mobileClinic.vue
index c1a91f0..6c72473 100644
--- a/app/pages/mobileClinic.vue
+++ b/app/pages/mobileClinic.vue
@@ -1,49 +1,58 @@
 <template>
-    <!-- Map Section -->
-    <div id="mapbox" class="pt-12 pb-12 h-full w-full">
-        <div id="map" class="h-full w-full relative overflow-hidden">
-            <MapInteractive :style="style" :center="center" :zoom="zoom" />
-            <UDrawer
-                class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
-                :default-open="true"
-                :handle-only="true"
-                :dismissible="false"
-                :overlay="false"
-                :swipe-to-close="true"
-                :close-on-escape="false"
-                :close-on-click-outside="false"
-                :modal="false"
-                portal="#map"
-                :snap-points="snapPoints"
-            >
-                <template #content>
-                    <div
-                        class="max-h-[55vh] overflow-y-auto space-y-2 px-2 pb-4"
-                    >
-                        <EventTile
-                            v-if="upcomingEvents.length === 0"
-                            class="w-11/12 mx-auto my-4 cursor-pointer"
-                            title="No upcoming events"
-                            subtitle="Check back later for updates!"
-                        />
-                        <EventTile
-                            v-for="event in upcomingEvents"
-                            v-else
-                            :key="event.id"
-                            class="w-11/12 mx-auto my-4 cursor-pointer"
-                            :title="event.title"
-                            :subtitle="
-                                new Date(event.startTime).toLocaleString()
-                            "
-                            button-type="arrow"
-                            :event-id="event.eventId"
-                            @add="eventClick"
-                            @click="handleTileClick(event)"
-                        />
-                    </div>
-                </template>
-            </UDrawer>
-        </div>
+  <!-- Map Section -->
+  <div
+    id="mapbox"
+    class="pt-12 pb-12 h-full w-full"
+  >
+    <div
+      id="map"
+      class="h-full w-full relative overflow-hidden"
+    >
+      <MapInteractive
+        :style="style"
+        :center="center"
+        :zoom="zoom"
+      />
+      <UDrawer
+        class="absolute bottom-4 w-11/12 left-1/2 -translate-x-1/2"
+        :default-open="true"
+        :handle-only="true"
+        :dismissible="false"
+        :overlay="false"
+        :swipe-to-close="true"
+        :close-on-escape="false"
+        :close-on-click-outside="false"
+        :modal="false"
+        portal="#map"
+        :snap-points="snapPoints"
+      >
+        <template #content>
+          <div
+            class="max-h-[55vh] overflow-y-auto space-y-2 px-2 pb-4"
+          >
+            <EventTile
+              v-if="upcomingEvents.length === 0"
+              class="w-11/12 mx-auto my-4 cursor-pointer"
+              title="No upcoming events"
+              subtitle="Check back later for updates!"
+            />
+            <EventTile
+              v-for="event in upcomingEvents"
+              v-else
+              :key="event.id"
+              class="w-11/12 mx-auto my-4 cursor-pointer"
+              :title="event.title"
+              :subtitle="
+                new Date(event.startTime).toLocaleString()
+              "
+              button-type="arrow"
+              :event-id="event.eventId"
+              @add="eventClick"
+              @click="handleTileClick(event)"
+            />
+          </div>
+        </template>
+      </UDrawer>
     </div>
   </div>
 </template>
@@ -58,85 +67,87 @@ const zoom = ref(15)
 // Pixel values
 const snapPoints = ['230', '340', '450']
 
-const upcomingEvents = ref([]);
+const upcomingEvents = ref([])
 
 // Load both events and mobile clinic schedule on mount
 onMounted(async () => {
-    console.log("✅ Page mounted - Loading events and mobile clinic schedule");
-    await loadEvents();
-    await loadMobileClinicSchedule();
-});
+  console.log('✅ Page mounted - Loading events and mobile clinic schedule')
+  await loadEvents()
+  await loadMobileClinicSchedule()
+})
 
 const eventClick = (id) => {
-    if (!id) return;
-    navigateTo(`/events/${id}`);
-};
+  if (!id) return
+  navigateTo(`/events/${id}`)
+}
 
 const handleTileClick = (event) => {
-    if (!event?.location) return;
-    mapAdjust(event.location);
-};
+  if (!event?.location) return
+  mapAdjust(event.location)
+}
 
 const setUpcomingItems = (items) => {
-    upcomingEvents.value = items
-        .map((item) => ({
-            ...item,
-            subtitle:
+  upcomingEvents.value = items
+    .map(item => ({
+      ...item,
+      subtitle:
                 item.subtitle ?? new Date(item.startTime).toLocaleString(),
-        }))
-        .sort(
-            (a, b) =>
-                new Date(a.startTime).getTime() -
-                new Date(b.startTime).getTime(),
-        );
-};
+    }))
+    .sort(
+      (a, b) =>
+        new Date(a.startTime).getTime()
+          - new Date(b.startTime).getTime(),
+    )
+}
 
 async function loadMobileClinicSchedule() {
-    try {
-        const schedule = await $fetch("/api/mobile-clinic/schedule");
-        console.log("✅ Loaded mobile clinic schedule:", schedule);
-
-        const scheduleItems = schedule.map((item) => ({
-            ...item,
-            title: `Mobile Clinic`,
-            eventId: null,
-        }));
-
-        setUpcomingItems([...upcomingEvents.value, ...scheduleItems]);
-        console.log("📅 Combined schedule items:", scheduleItems.length);
-    } catch (error) {
-        console.error("❌ Error loading mobile clinic schedule:", error);
-    }
+  try {
+    const schedule = await $fetch('/api/mobile-clinic/schedule')
+    console.log('✅ Loaded mobile clinic schedule:', schedule)
+
+    const scheduleItems = schedule.map(item => ({
+      ...item,
+      title: `Mobile Clinic`,
+      eventId: null,
+    }))
+
+    setUpcomingItems([...upcomingEvents.value, ...scheduleItems])
+    console.log('📅 Combined schedule items:', scheduleItems.length)
+  }
+  catch (error) {
+    console.error('❌ Error loading mobile clinic schedule:', error)
+  }
 }
 
 async function loadEvents() {
-    try {
-        const allEvents = await $fetch("/api/events");
-        console.log("✅ Loaded events from API:", allEvents);
-
-        const now = new Date();
-
-        const eventItems = allEvents
-            .filter((event) => event.mobileClinicId !== null)
-            .filter((event) => new Date(event.endTime) >= now)
-            .map((event) => ({
-                ...event,
-                eventId: event.id,
-            }));
-
-        setUpcomingItems([...upcomingEvents.value, ...eventItems]);
-        console.log("📅 Upcoming events:", eventItems.length);
-    } catch (error) {
-        console.error("❌ Error loading events:", error);
-    }
+  try {
+    const allEvents = await $fetch('/api/events')
+    console.log('✅ Loaded events from API:', allEvents)
+
+    const now = new Date()
+
+    const eventItems = allEvents
+      .filter(event => event.mobileClinicId !== null)
+      .filter(event => new Date(event.endTime) >= now)
+      .map(event => ({
+        ...event,
+        eventId: event.id,
+      }))
+
+    setUpcomingItems([...upcomingEvents.value, ...eventItems])
+    console.log('📅 Upcoming events:', eventItems.length)
+  }
+  catch (error) {
+    console.error('❌ Error loading events:', error)
+  }
 }
 
 async function mapAdjust(location) {
-    const lng = location.longitude;
-    const lat = location.latitude;
+  const lng = location.longitude
+  const lat = location.latitude
 
-    console.log(`📍 Adjusting map to event location: [${lng}, ${lat}]`);
-    center.value = [lng, lat];
-    zoom.value = 17;
+  console.log(`📍 Adjusting map to event location: [${lng}, ${lat}]`)
+  center.value = [lng, lat]
+  zoom.value = 17
 }
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4dbafbe..09221f3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,7 +31,6 @@ export default defineNuxtConfig({
     },
   },
   eslint: {
-    checker: true,
     config: {
       stylistic: true,
     },
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index 980dac7..0f0cb53 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -1,4 +1,4 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
 // Geocode location using Nominatim
 async function geocodeLocation(location: string) {
@@ -7,47 +7,48 @@ async function geocodeLocation(location: string) {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`,
       {
         headers: {
-          "User-Agent": "Abide-Connect/1.0",
+          'User-Agent': 'Abide-Connect/1.0',
         },
       },
-    );
+    )
 
     if (!response.ok) {
-      console.warn(`Nominatim API error: ${response.status}`);
-      return null;
+      console.warn(`Nominatim API error: ${response.status}`)
+      return null
     }
 
-    const results = await response.json();
+    const results = await response.json()
 
     if (results.length === 0) {
-      console.warn(`No geocoding results found for: ${location}`);
-      return null;
+      console.warn(`No geocoding results found for: ${location}`)
+      return null
     }
 
-    const topResult = results[0];
+    const topResult = results[0]
 
     return {
       latitude: parseFloat(topResult.lat),
       longitude: parseFloat(topResult.lon),
       address: location,
-    };
-  } catch (error) {
-    console.error("❌ Geocoding error:", error);
-    return null;
+    }
+  }
+  catch (error) {
+    console.error('❌ Geocoding error:', error)
+    return null
   }
 }
 
 export default defineEventHandler(async (event) => {
-  const id = getRouterParam(event, "id");
-  const body = await readBody(event);
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
 
   if (!id) {
-    throw createError({ statusCode: 400, message: "Missing event ID" });
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
   }
 
   // check if location has already been fetched
-  const locationData =
-    (await prisma.location.findUnique({
+  const locationData
+    = (await prisma.location.findUnique({
       where: {
         address: body.location.address || null,
       },
@@ -56,49 +57,50 @@ export default defineEventHandler(async (event) => {
         longitude: true,
         address: true,
       },
-    })) || (await geocodeLocation(body.location.address));
+    })) || (await geocodeLocation(body.location.address))
 
   if (!locationData) {
     throw createError({
       statusCode: 500,
-      message: "Failed to retrieve or create location data",
-    });
+      message: 'Failed to retrieve or create location data',
+    })
   }
 
-  console.log("📍 Location data from DB:", locationData);
+  console.log('📍 Location data from DB:', locationData)
 
   if (!locationData) {
     throw createError({
       statusCode: 400,
-      message: "Invalid location provided and geocoding failed",
-    });
+      message: 'Invalid location provided and geocoding failed',
+    })
   }
 
   try {
     // Check if event exists
     const foundEvent = await prisma.event.findUnique({
       where: { id },
-    });
+    })
 
     if (!foundEvent) {
-      throw createError({ statusCode: 404, message: "Event not found" });
+      throw createError({ statusCode: 404, message: 'Event not found' })
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const mobileClinicUpdate: Record<string, any> = {};
+    const mobileClinicUpdate: Record<string, any> = {}
 
-    if (typeof body.mobileClinic === "boolean") {
+    if (typeof body.mobileClinic === 'boolean') {
       if (body.mobileClinic) {
         if (!foundEvent.mobileClinicId) {
           mobileClinicUpdate.mobileClinic = {
             create: {},
-          };
+          }
         }
-      } else {
+      }
+      else {
         if (foundEvent.mobileClinicId) {
           mobileClinicUpdate.mobileClinic = {
             disconnect: true,
-          };
+          }
         }
       }
     }
@@ -122,15 +124,16 @@ export default defineEventHandler(async (event) => {
         eventAssets: true,
         location: true,
       },
-    });
+    })
 
-    console.log("✅ Event updated:", updatedEvent);
-    return updatedEvent;
-  } catch (error) {
-    console.error("❌ Error updating event:", error);
+    console.log('✅ Event updated:', updatedEvent)
+    return updatedEvent
+  }
+  catch (error) {
+    console.error('❌ Error updating event:', error)
     throw createError({
       statusCode: 500,
-      message: "Failed to update event",
-    });
+      message: 'Failed to update event',
+    })
   }
-});
+})
diff --git a/server/api/mobile-clinic/schedule.get.ts b/server/api/mobile-clinic/schedule.get.ts
index 095053d..bb2de3c 100644
--- a/server/api/mobile-clinic/schedule.get.ts
+++ b/server/api/mobile-clinic/schedule.get.ts
@@ -1,11 +1,11 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
-const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
-const MAX_OCCURRENCES = 8;
-const LOOKAHEAD_WEEKS = 4;
+const MS_PER_WEEK = 7 * 24 * 60 * 60 * 1000
+const MAX_OCCURRENCES = 8
+const LOOKAHEAD_WEEKS = 4
 
 const addWeeks = (date: Date, weeks: number) =>
-  new Date(date.getTime() + weeks * MS_PER_WEEK);
+  new Date(date.getTime() + weeks * MS_PER_WEEK)
 
 export default defineEventHandler(async () => {
   try {
@@ -14,35 +14,35 @@ export default defineEventHandler(async () => {
         location: true,
       },
       orderBy: {
-        startTime: "asc",
+        startTime: 'asc',
       },
-    });
+    })
 
-    const now = new Date();
-    const windowEnd = addWeeks(now, LOOKAHEAD_WEEKS);
+    const now = new Date()
+    const windowEnd = addWeeks(now, LOOKAHEAD_WEEKS)
 
     const occurrences = scheduleEntries.flatMap((entry) => {
-      const originStart = new Date(entry.startTime);
-      const originEnd = new Date(entry.endTime);
+      const originStart = new Date(entry.startTime)
+      const originEnd = new Date(entry.endTime)
       const occurrencesForEntry: Array<{
-        id: string;
-        scheduleId: string;
-        startTime: string;
-        endTime: string;
-        location: { latitude: number; longitude: number; address: string };
-      }> = [];
-      let startTime = new Date(originStart);
-      let endTime = new Date(originEnd);
+        id: string
+        scheduleId: string
+        startTime: string
+        endTime: string
+        location: { latitude: number, longitude: number, address: string }
+      }> = []
+      let startTime = new Date(originStart)
+      let endTime = new Date(originEnd)
 
       if (endTime < now) {
         const weeksAhead = Math.ceil(
           (now.getTime() - endTime.getTime()) / MS_PER_WEEK,
-        );
-        startTime = addWeeks(startTime, weeksAhead);
-        endTime = addWeeks(endTime, weeksAhead);
+        )
+        startTime = addWeeks(startTime, weeksAhead)
+        endTime = addWeeks(endTime, weeksAhead)
       }
 
-      let count = 0;
+      let count = 0
       while (count < MAX_OCCURRENCES && startTime < windowEnd) {
         if (endTime >= now) {
           occurrencesForEntry.push({
@@ -51,29 +51,30 @@ export default defineEventHandler(async () => {
             startTime: startTime.toISOString(),
             endTime: endTime.toISOString(),
             location: entry.location,
-          });
-          count += 1;
+          })
+          count += 1
         }
 
-        startTime = addWeeks(startTime, 1);
-        endTime = addWeeks(endTime, 1);
+        startTime = addWeeks(startTime, 1)
+        endTime = addWeeks(endTime, 1)
       }
 
-      return occurrencesForEntry;
-    });
+      return occurrencesForEntry
+    })
 
     console.log(
       `Generated ${occurrences.length} mobile clinic occurrences from ${scheduleEntries.length} schedule entries`,
-    );
+    )
     return occurrences.sort(
       (a, b) =>
         new Date(a.startTime).getTime() - new Date(b.startTime).getTime(),
-    );
-  } catch (error) {
-    console.error("Failed to fetch mobile clinic schedule", error);
+    )
+  }
+  catch (error) {
+    console.error('Failed to fetch mobile clinic schedule', error)
     throw createError({
       statusCode: 500,
-      message: "Failed to fetch mobile clinic schedule",
-    });
+      message: 'Failed to fetch mobile clinic schedule',
+    })
   }
-});
+})
diff --git a/server/api/volunteer-logs/index.get.ts b/server/api/volunteer-logs/index.get.ts
index 6135a9d..343937a 100644
--- a/server/api/volunteer-logs/index.get.ts
+++ b/server/api/volunteer-logs/index.get.ts
@@ -1,4 +1,4 @@
-import prisma from "~~/server/utils/prisma";
+import prisma from '~~/server/utils/prisma'
 
 export default eventHandler(async () => {
   try {
@@ -12,36 +12,37 @@ export default eventHandler(async () => {
         event: true,
       },
       orderBy: {
-        createdAt: "desc",
+        createdAt: 'desc',
       },
-    });
+    })
 
-    const formattedLogs = logs.map((log) => ({
+    const formattedLogs = logs.map(log => ({
       id: String(log.id),
       name:
-        log.volunteer.user?.name ??
-        log.volunteer.user?.contactEmail ??
-        "Unknown",
+        log.volunteer.user?.name
+        ?? log.volunteer.user?.contactEmail
+        ?? 'Unknown',
       event: log.event.title,
-      date: log.date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
+      date: log.date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
       }),
       hours: log.hours,
       status: log.approvalStatus,
-      comment: log.comment ?? "",
-    }));
+      comment: log.comment ?? '',
+    }))
 
     return {
       success: true,
       logs: formattedLogs,
-    };
-  } catch (error) {
+    }
+  }
+  catch (error) {
     throw createError({
       statusCode: 500,
-      statusMessage: "Failed to fetch volunteer logs",
+      statusMessage: 'Failed to fetch volunteer logs',
       cause: error,
-    });
+    })
   }
-});
+})
diff --git a/server/utils/prisma.ts b/server/utils/prisma.ts
index 6363f05..024df43 100644
--- a/server/utils/prisma.ts
+++ b/server/utils/prisma.ts
@@ -1,19 +1,19 @@
-import { PrismaClient } from "./generated/prisma/client";
-import { PrismaBetterSqlite3 } from "@prisma/adapter-better-sqlite3";
+import { PrismaClient } from './generated/prisma/client'
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'
 
 const prismaClientSingleton = () => {
   const adapter = new PrismaBetterSqlite3({
     url: process.env.DATABASE_URL,
-  });
-  return new PrismaClient({ adapter });
-};
+  })
+  return new PrismaClient({ adapter })
+}
 
 declare const globalThis: {
-  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
-} & typeof global;
+  prismaGlobal: ReturnType<typeof prismaClientSingleton>
+} & typeof global
 
-const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()
 
-export default prisma;
+export default prisma
 
-if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;
+if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma
diff --git a/server/utils/seed.ts b/server/utils/seed.ts
index d2fa26c..e2de371 100644
--- a/server/utils/seed.ts
+++ b/server/utils/seed.ts
@@ -1,94 +1,94 @@
-import fs from "fs";
+import fs from 'fs'
 import type {
   Language,
   Gender,
   Availability,
   Ethinicity,
   ApprovalStatus,
-} from "./generated/prisma/client.ts";
-import { PrismaClient } from "./generated/prisma/client.ts";
-import { PrismaBetterSqlite3 } from "@prisma/adapter-better-sqlite3";
+} from './generated/prisma/client.ts'
+import { PrismaClient } from './generated/prisma/client.ts'
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3'
 
 const adapter = new PrismaBetterSqlite3({
   url: process.env.DATABASE_URL,
-});
-const prisma = new PrismaClient({ adapter });
+})
+const prisma = new PrismaClient({ adapter })
 
 type RawEvent = {
-  id: string;
-  title: string;
-  shortDesc: string;
-  description: string;
-  startTime: string;
-  endTime: string;
+  id: string
+  title: string
+  shortDesc: string
+  description: string
+  startTime: string
+  endTime: string
   location: {
-    longitude: number;
-    latitude: number;
-    address: string;
-  };
-  allowVolunteers: boolean;
-  allowAttendees: boolean;
-  eventAssets: string[];
-};
+    longitude: number
+    latitude: number
+    address: string
+  }
+  allowVolunteers: boolean
+  allowAttendees: boolean
+  eventAssets: string[]
+}
 
 type RawUser = {
-  name: string;
-  contactEmail: string;
-  phone: string;
+  name: string
+  contactEmail: string
+  phone: string
   RSVPs: {
-    isVolunteer?: boolean;
-    id: string;
-  }[];
-};
+    isVolunteer?: boolean
+    id: string
+  }[]
+}
 
 type RawVolunteer = {
-  id: string;
+  id: string
   user: {
-    contactEmail: string;
-  };
-  email: string;
-  languages: string[];
-  gender: string;
-  ethinicity: string;
-  profileURL: string;
-  availabilities: string[];
-  certifications: string[];
+    contactEmail: string
+  }
+  email: string
+  languages: string[]
+  gender: string
+  ethinicity: string
+  profileURL: string
+  availabilities: string[]
+  certifications: string[]
   hourLogs: {
     event: {
-      id: string;
-    };
-    date: string;
-    hours: number;
-    approvalStatus: string;
-    comment?: string;
-  }[];
-};
+      id: string
+    }
+    date: string
+    hours: number
+    approvalStatus: string
+    comment?: string
+  }[]
+}
 
 type RawSchedule = {
   mobileClinic: {
-    id: string;
-  };
+    id: string
+  }
   location: {
-    longitude: number;
-    latitude: number;
-    address: string;
-  };
-  startTime: string;
-  endTime: string;
-};
+    longitude: number
+    latitude: number
+    address: string
+  }
+  startTime: string
+  endTime: string
+}
 
 type RawNotification = {
-  id: string;
-  title: string;
-  content: string;
-};
+  id: string
+  title: string
+  content: string
+}
 
 async function main() {
   // Seed 5 events (3 future, 2 past) + images
-  console.log("Seeding events...");
+  console.log('Seeding events...')
   const rawEvents: RawEvent[] = JSON.parse(
-    fs.readFileSync("prisma/seed/events.json").toString(),
-  );
+    fs.readFileSync('prisma/seed/events.json').toString(),
+  )
   // Convert each event into an upsertable format
   const events = rawEvents.map((event) => {
     return {
@@ -99,7 +99,7 @@ async function main() {
         create: event.eventAssets.map((imageUrl) => {
           return {
             imageUrl: imageUrl,
-          };
+          }
         }),
       },
       location: {
@@ -114,23 +114,23 @@ async function main() {
           },
         },
       },
-    };
-  });
+    }
+  })
   // Upsert each event
   for (const event of events) {
     const eventResult = await prisma.event.upsert({
       where: { id: event.id },
       update: {},
       create: event,
-    });
-    console.log(eventResult);
+    })
+    console.log(eventResult)
   }
 
   // Seed two users + attended events + languages
-  console.log("Seeding users...");
+  console.log('Seeding users...')
   const rawUsers: RawUser[] = JSON.parse(
-    fs.readFileSync("prisma/seed/users.json").toString(),
-  );
+    fs.readFileSync('prisma/seed/users.json').toString(),
+  )
   // Convert each user into an upsertable format
   const users = rawUsers.map((user) => {
     return {
@@ -144,26 +144,26 @@ async function main() {
                 id: event.id,
               },
             },
-          };
+          }
         }),
       },
-    };
-  });
+    }
+  })
   // Upsert each user
   for (const user of users) {
     const userResult = await prisma.user.upsert({
       where: { contactEmail: user.contactEmail },
       update: {},
       create: user,
-    });
-    console.log(userResult);
+    })
+    console.log(userResult)
   }
 
   // Seed one volunteer (ENSURE that each volunteer is linked to an existing user by email)
-  console.log("Seeding volunteers...");
+  console.log('Seeding volunteers...')
   const rawVolunteers: RawVolunteer[] = JSON.parse(
-    fs.readFileSync("prisma/seed/volunteers.json").toString(),
-  );
+    fs.readFileSync('prisma/seed/volunteers.json').toString(),
+  )
   // Convert each volunteer into an upsertable format
   const volunteers = rawVolunteers.map((volunteer) => {
     return {
@@ -174,14 +174,14 @@ async function main() {
         create: volunteer.languages.map((lang) => {
           return {
             language: lang as Language,
-          };
+          }
         }),
       },
       availabilities: {
         create: volunteer.availabilities.map((avail) => {
           return {
             availability: avail as Availability,
-          };
+          }
         }),
       },
       hourLogs: {
@@ -197,14 +197,14 @@ async function main() {
                 id: log.event.id,
               },
             },
-          };
+          }
         }),
       },
       certifications: {
         create: volunteer.certifications.map((cert) => {
           return {
             certification: cert,
-          };
+          }
         }),
       },
       user: {
@@ -212,23 +212,23 @@ async function main() {
           contactEmail: volunteer.user.contactEmail,
         },
       },
-    };
-  });
+    }
+  })
   // Upsert each volunteer
   for (const volunteer of volunteers) {
     const volunteerResult = await prisma.volunteer.upsert({
       where: { id: volunteer.id },
       update: {},
       create: volunteer,
-    });
-    console.log(volunteerResult);
+    })
+    console.log(volunteerResult)
   }
 
-  //seed mobile clinic schedule
-  console.log("Seeding mobile clinic schedule...");
+  // seed mobile clinic schedule
+  console.log('Seeding mobile clinic schedule...')
   const rawSchedules: RawSchedule[] = JSON.parse(
-    fs.readFileSync("prisma/seed/schedule.json").toString(),
-  );
+    fs.readFileSync('prisma/seed/schedule.json').toString(),
+  )
   const schedules = rawSchedules.map((schedule) => {
     return {
       ...schedule,
@@ -256,23 +256,23 @@ async function main() {
           },
         },
       },
-    };
-  });
+    }
+  })
   for (const schedule of schedules) {
     const scheduleResult = await prisma.mobile_Clinic_Schedule.upsert({
       where: { startTime: schedule.startTime },
       update: {},
       create: schedule,
-    });
-    console.log(scheduleResult);
+    })
+    console.log(scheduleResult)
   }
 
   // Seed six notifications - UNFINISHED
-  console.log("Seeding notifications...");
+  console.log('Seeding notifications...')
   const rawNotifications: RawNotification[] = JSON.parse(
-    fs.readFileSync("prisma/seed/notifications.json").toString(),
-  );
-  const allUsers = await prisma.user.findMany();
+    fs.readFileSync('prisma/seed/notifications.json').toString(),
+  )
+  const allUsers = await prisma.user.findMany()
   for (const notification of rawNotifications) {
     const notificationResult = await prisma.notification.upsert({
       where: { id: notification.id },
@@ -282,7 +282,7 @@ async function main() {
         title: notification.title,
         content: notification.content,
       },
-    });
+    })
     // Link to all users
     for (const user of allUsers) {
       await prisma.user_Notification.upsert({
@@ -297,18 +297,18 @@ async function main() {
           userId: user.id,
           notificationId: notificationResult.id,
         },
-      });
+      })
     }
-    console.log(notificationResult);
+    console.log(notificationResult)
   }
 }
 
 main()
   .then(async () => {
-    await prisma.$disconnect();
+    await prisma.$disconnect()
   })
   .catch(async (e) => {
-    console.error(e);
-    await prisma.$disconnect();
-    process.exit(1);
-  });
+    console.error(e)
+    await prisma.$disconnect()
+    process.exit(1)
+  })