From 1f069503b3dc4a79131846f825190da49e21f316 Mon Sep 17 00:00:00 2001
From: kf212132 <kaitlyn.ma.ferguson@gmail.com>
Date: Wed, 29 Apr 2026 18:56:26 -0500
Subject: [PATCH 1/3] fi

---
 app/components/event/Editor.vue               | 105 ++--
 app/components/event/EventImageUpload.vue     | 106 ++++
 app/components/event/Modal.vue                | 158 ++----
 app/pages/events/[id].vue                     | 454 ++++++------------
 app/pages/events/manage.vue                   |   5 +-
 .../api/events/[id]/images/[name].delete.ts   |  53 ++
 server/api/events/[id]/images/[name].get.ts   |  33 +-
 server/api/events/[id]/images/upload.post.ts  |  39 +-
 server/api/events/index.get.ts                |   3 +-
 server/utils/seed.ts                          |   2 +-
 10 files changed, 441 insertions(+), 517 deletions(-)
 create mode 100644 app/components/event/EventImageUpload.vue
 create mode 100644 server/api/events/[id]/images/[name].delete.ts

diff --git a/app/components/event/Editor.vue b/app/components/event/Editor.vue
index 3128815..00a2417 100644
--- a/app/components/event/Editor.vue
+++ b/app/components/event/Editor.vue
@@ -1,30 +1,52 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue"
 
-const props = defineProps({
-  event: {
-    type: Object,
-    default: null
-  }
-})
+const props = defineProps<{
+  event: any
+}>()
 
 const emit = defineEmits(["save", "delete"])
 
-const editedEvent = ref({
-  name: "",
-  date: "",
-  location: "",
-  image: ""
-})
+const editedEvent = ref<any>({})
+const filesToUpload = ref<File[]>([])
+// Build asset list for the uploader from the real event assets
+const eventAssets = ref<{ imageUrl: string; isPreview?: boolean; fileName?: string }[]>([])
 
-// Watch for changes to the event prop and update the form
 watch(() => props.event, (newEvent) => {
   if (newEvent) {
     editedEvent.value = { ...newEvent }
+    // Map existing server assets to uploader format
+    // imageUrl in DB is just the fileName (after the upload fix)
+    eventAssets.value = (newEvent.eventAssets || []).map((a: any) => ({
+      imageUrl: `/api/events/${newEvent.id}/images/${a.imageUrl}`,
+      fileName: a.imageUrl,
+      isPreview: false,
+    }))
   }
 }, { immediate: true })
 
-function saveEvent() {
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
+}
+
+async function saveEvent() {
+  // Upload any pending files first
+  if (filesToUpload.value.length > 0) {
+    for (const file of filesToUpload.value) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        await $fetch(`/api/events/${editedEvent.value.id}/images/upload`, {
+          method: 'POST',
+          body: formData
+        })
+      } catch (err) {
+        console.error(`Failed to upload ${file.name}:`, err)
+      }
+    }
+    filesToUpload.value = []
+  }
+
   emit("save", { ...editedEvent.value })
 }
 
@@ -37,35 +59,52 @@ function deleteEvent() {
   <div class="space-y-4">
     <h3 class="text-xl font-semibold">Edit Event</h3>
 
-    <UFormGroup label="Event Name">
-      <UInput v-model="editedEvent.name" />
+    <UFormGroup label="Event Title">
+      <UInput v-model="editedEvent.title" placeholder="Event title" />
     </UFormGroup>
 
-    <UFormGroup label="Date">
-      <UInput v-model="editedEvent.date" type="date" />
+    <UFormGroup label="Short Description">
+      <UInput v-model="editedEvent.shortDesc" placeholder="Brief description" />
     </UFormGroup>
 
-    <UFormGroup label="Location">
-      <UInput v-model="editedEvent.location" />
+    <UFormGroup label="Full Description">
+      <UTextarea v-model="editedEvent.description" :rows="4" placeholder="Full description" />
     </UFormGroup>
 
-    <UFormGroup label="Image URL">
-      <UInput v-model="editedEvent.image" />
+    <UFormGroup label="Location">
+      <UInput v-model="editedEvent.location.address" placeholder="Location address" />
     </UFormGroup>
 
-    <!-- Preview image if URL provided -->
-    <div v-if="editedEvent.image" class="mt-2">
-      <p class="text-sm text-gray-600 mb-2">Image Preview:</p>
-      <img 
-        :src="editedEvent.image" 
-        alt="Event preview" 
-        class="w-full h-32 object-cover rounded-lg"
-        @error="$event.target.style.display = 'none'"
-      >
+    <div class="grid grid-cols-2 gap-4">
+      <UFormGroup label="Start Date & Time">
+        <UInput v-model="editedEvent.startTime" type="datetime-local" />
+      </UFormGroup>
+      <UFormGroup label="End Date & Time">
+        <UInput v-model="editedEvent.endTime" type="datetime-local" />
+      </UFormGroup>
+    </div>
+
+    <div class="space-y-2">
+      <label class="flex items-center gap-2 cursor-pointer">
+        <UCheckbox v-model="editedEvent.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="editedEvent.allowAttendees" />
+        <span class="text-sm font-medium text-gray-700">Allow Attendees</span>
+      </label>
     </div>
 
+    <UFormGroup label="Event Images">
+      <EventImageUpload
+        :existing-assets="editedEvent.eventAssets"
+        :event-id="editedEvent.id"
+        @files-changed="onFilesChanged"
+      />
+    </UFormGroup>
+
     <div class="flex justify-between pt-2">
-      <UButton color="red" variant="soft" @click="deleteEvent">Delete Event</UButton>
+      <UButton color="brand1" variant="soft" @click="deleteEvent">Delete Event</UButton>
       <UButton color="primary" @click="saveEvent">Save Changes</UButton>
     </div>
   </div>
diff --git a/app/components/event/EventImageUpload.vue b/app/components/event/EventImageUpload.vue
new file mode 100644
index 0000000..9c416f6
--- /dev/null
+++ b/app/components/event/EventImageUpload.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * EventImageUpload
+ *
+ * Wraps Nuxt UI's UFileUpload for use in event forms.
+ * - Handles multiple image selection with drag & drop
+ * - Shows existing server images alongside new uploads
+ * - Supports deleting existing images from the server
+ */
+
+interface ServerAsset {
+  imageUrl: string // just the fileName as stored in DB
+}
+
+const props = defineProps<{
+  // Existing saved assets from the server (pass event.eventAssets)
+  existingAssets?: ServerAsset[]
+  // The event ID, needed to build image URLs and delete from server
+  eventId?: string
+}>()
+
+const emit = defineEmits<{
+  // Emits the raw File[] whenever selection changes, for parent to upload on save
+  (e: 'filesChanged', files: File[]): void
+  // Emits when an existing server image is deleted
+  (e: 'assetDeleted', imageUrl: string): void
+}>()
+
+// Files selected by the user (not yet uploaded)
+const selectedFiles = ref<File[]>([])
+
+// Track which existing assets are still present
+const remainingAssets = ref<ServerAsset[]>([...(props.existingAssets || [])])
+
+watch(() => props.existingAssets, (assets) => {
+  remainingAssets.value = [...(assets || [])]
+}, { deep: true })
+
+function onFilesChanged(files: File[] | null | undefined) {
+  const safeFiles = files ?? []
+  selectedFiles.value = safeFiles
+  emit('filesChanged', safeFiles)
+}
+
+async function deleteExistingAsset(asset: ServerAsset) {
+  if (!props.eventId) return
+
+  try {
+    await $fetch(`/api/events/${props.eventId}/images/${asset.imageUrl}`, {
+      method: 'DELETE'
+    })
+    remainingAssets.value = remainingAssets.value.filter(a => a.imageUrl !== asset.imageUrl)
+    emit('assetDeleted', asset.imageUrl)
+  } catch (err) {
+    console.error('Failed to delete image:', err)
+  }
+}
+
+function getAssetUrl(asset: ServerAsset) {
+  return `/api/events/${props.eventId}/images/${asset.imageUrl}`
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Existing server images -->
+    <div v-if="remainingAssets.length > 0">
+      <p class="text-sm text-gray-500 mb-2">Current Images</p>
+      <div class="grid grid-cols-3 gap-2">
+        <div
+          v-for="asset in remainingAssets"
+          :key="asset.imageUrl"
+          class="relative group aspect-square rounded-lg overflow-hidden bg-gray-100"
+        >
+          <img
+            :src="getAssetUrl(asset)"
+            :alt="asset.imageUrl"
+            class="w-full h-full object-cover"
+          >
+          <button
+            class="absolute top-1 right-1 bg-red-500 text-white p-1 rounded-full shadow"
+            type="button"
+            @click="deleteExistingAsset(asset)"
+          >
+            <UIcon name="i-lucide-trash-2" class="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- UFileUpload for new images -->
+    <UFileUpload
+      v-model="selectedFiles"
+      multiple
+      accept="image/*"
+      variant="area"
+      layout="list"
+      icon="i-lucide-image"
+      label="Drop images here or click to browse"
+      description="PNG, JPG, WEBP, GIF supported"
+      color="brand4"
+      class="w-full min-h-36"
+      @update:model-value="onFilesChanged"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index 8db52bc..e70cb0d 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue"
 
 const emit = defineEmits(["save", "close"])
@@ -13,47 +13,20 @@ const newEvent = ref({
   allowVolunteers: false,
   allowAttendees: false,
   mobileClinicId: null,
-  eventAssets: []
 })
 
-const uploadedFiles = ref([])
-const isSaving = ref(false)
-
-// Store actual File objects for upload
-const filesToUpload = ref([])
+// Assets shown in the uploader (previews before save)
+const eventAssets = ref<{ imageUrl: string; isPreview?: boolean; fileName?: string }[]>([])
+// Raw File objects to upload after event is created
+const filesToUpload = ref<File[]>([])
 
-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 isSaving = ref(false)
 
-function removeImage(index) {
-  newEvent.value.eventAssets.splice(index, 1)
-  filesToUpload.value.splice(index, 1)
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
 }
 
 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
@@ -62,7 +35,7 @@ async function saveEvent() {
   isSaving.value = true
 
   try {
-    // Step 1: Create the event in the database
+    // Step 1: Create the event
     const response = await $fetch('/api/events', {
       method: 'POST',
       body: {
@@ -78,55 +51,37 @@ async function saveEvent() {
       }
     })
 
-    console.log('✅ Event created:', response)
-
-    // Step 2: Upload images if event was created successfully
+    // Step 2: Upload images
     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)
+          console.error(`Failed to upload ${file.name}:`, uploadError)
         }
       }
     }
 
-    // Step 3: Fetch the complete event with images from the server
+    // Step 3: Fetch complete event with images
     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
+
+    // Reset form
     newEvent.value = {
-      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,
     }
-    uploadedFiles.value = []
+    eventAssets.value = []
     filesToUpload.value = []
-    
-    console.log('✅ Event saved successfully and form reset')
-  } catch (error) {
-    console.error('❌ Error creating event:', error)
+
+  } catch (error: any) {
+    console.error('Error creating event:', error)
     alert(`Error creating event: ${error.message || 'Please try again.'}`)
   } finally {
     isSaving.value = false
@@ -146,58 +101,44 @@ function cancel() {
       <label class="block text-sm font-medium text-gray-700 mb-1">
         Event Title <span class="text-red-500">*</span>
       </label>
-      <UFormGroup>
-        <UInput v-model="newEvent.title" placeholder="Enter event title" />
-      </UFormGroup>
+      <UInput v-model="newEvent.title" placeholder="Enter event title" />
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Short Description</label>
-      <UFormGroup>
-        <UInput v-model="newEvent.shortDesc" placeholder="Brief description" />
-      </UFormGroup>
+      <UInput v-model="newEvent.shortDesc" placeholder="Brief description" />
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Full Description</label>
-      <UFormGroup>
-        <UTextarea v-model="newEvent.description" placeholder="Detailed description" :rows="4" />
-      </UFormGroup>
+      <UTextarea v-model="newEvent.description" placeholder="Detailed description" :rows="4" />
     </div>
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
-      <UFormGroup>
-        <UInput v-model="newEvent.location" placeholder="Enter location address" />
-      </UFormGroup>
+      <UInput v-model="newEvent.location" placeholder="Enter location address" />
     </div>
 
-    <div class="grid grid-cols-2 gap-4">
+    >
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">
           Start Date & Time <span class="text-red-500">*</span>
         </label>
-        <UFormGroup>
-          <UInput v-model="newEvent.startTime" type="datetime-local" />
-        </UFormGroup>
+        <UInput v-model="newEvent.startTime" type="datetime-local" />
       </div>
-
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">
           End Date & Time <span class="text-red-500">*</span>
         </label>
-        <UFormGroup>
-          <UInput v-model="newEvent.endTime" type="datetime-local" />
-        </UFormGroup>
+        <UInput v-model="newEvent.endTime" type="datetime-local" />
       </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>
@@ -206,44 +147,9 @@ function cancel() {
 
     <div>
       <label class="block text-sm font-medium text-gray-700 mb-2">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="handleFileChange"
-      >
-    </div>
-
-    <!-- Preview images if uploaded -->
-    <div v-if="newEvent.eventAssets.length > 0" class="mt-2">
-      <p class="text-sm text-gray-600 mb-2">Image Previews:</p>
-      <div class="grid grid-cols-2 gap-2">
-        <div
-          v-for="(asset, index) in newEvent.eventAssets"
-          :key="index"
-          class="relative group"
-        >
-          <img 
-            :src="asset.imageUrl" 
-            alt="Event preview" 
-            class="w-full h-32 object-cover rounded-lg"
-          >
-          <button
-            class="absolute top-1 right-1 bg-red-500 text-white p-1 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>
+      <EventImageUpload
+        @files-changed="onFilesChanged"
+      />
     </div>
 
     <div class="flex justify-end gap-2 pt-4 border-t">
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 6d98cae..2acb609 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,356 +1,203 @@
-<script setup>
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { ref, computed, onMounted } from "vue"
+<script setup lang="ts">
+import 'maplibre-gl/dist/maplibre-gl.css'
+import { ref, computed } from "vue"
 
 const route = useRoute()
+const eventId = route.params.id as string
 
-// Get the ID from the route params
-const eventId = route.params.id
-const { data: event} = await useFetch(`/api/events/${route.params.id}`)
+// Single fetch — no onMounted duplicate
+const { data: event, error, refresh } = await useFetch(`/api/events/${eventId}`)
 
-const loading = ref(true)
-const notFound = ref(false)
+if (error.value) {
+  console.error('Failed to load event:', error.value)
+}
 
 const isEditMode = ref(false)
-const editForm = ref({})
+const editForm = ref<any>({})
 
-//placeholder until we implement auth
-const admin = true;
+// Placeholder until auth is implemented
+const admin = true
 
+// Assets shown in the edit uploader
+const filesToUpload = ref<File[]>([])
 
-// 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 }
-    
-    console.log('✅ Event loaded:', event.value)
-    loading.value = false
-    
-  } catch (error) {
-    console.error('❌ Error fetching event:', error)
-    loading.value = false
-    notFound.value = true
+function enterEditMode() {
+  editForm.value = { 
+    ...event.value,
+    startTime: event.value?.startTime ? formatForInput(event.value.startTime) : '',
+    endTime: event.value?.endTime ? formatForInput(event.value.endTime) : '',
   }
-})
-
-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}`
-})
+  isEditMode.value = true
+}
 
-const style = '/mapstyles.json'
-const center = computed(() => [event.value.location.longitude, event.value.location.latitude])
-const zoom = 15
+function cancelEdit() {
+  isEditMode.value = false
+  filesToUpload.value = []
+}
 
-function toggleEditMode() {
-  if (isEditMode.value) {
-    // Cancel editing - reset form to original event data
-    editForm.value = { ...event.value }
-  }
-  isEditMode.value = !isEditMode.value
+function formatForInput(isoString: string) {
+  // Convert ISO date to datetime-local input format
+  return new Date(isoString).toISOString().slice(0, 16)
 }
 
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
+}
 
 async function saveChanges() {
   try {
-    console.log('💾 Saving changes...')
-    
-    // Update event via API
-    await $fetch(`/api/events/${event.value.id}`, {
+    await $fetch(`/api/events/${eventId}`, {
       method: 'PATCH',
       body: {
         title: editForm.value.title,
         shortDesc: editForm.value.shortDesc,
         description: editForm.value.description,
-        location: editForm.value.location,
+        location: editForm.value.location?.address || 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
+        allowAttendees: editForm.value.allowAttendees,
       }
     })
-    
-    // Update local event data
-    event.value = { ...editForm.value }
-    isEditMode.value = false
-    
-    console.log('✅ Event updated successfully')
-  } catch (error) {
-    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'
-]
-
-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]
-  })
-}
 
-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)
+    // Upload any new images
+    for (const file of filesToUpload.value) {
+      const formData = new FormData()
+      formData.append('file', file)
+      try {
+        await $fetch(`/api/events/${eventId}/images/upload`, {
+          method: 'POST',
+          body: formData
+        })
+      } catch (err) {
+        console.error(`Failed to upload ${file.name}:`, err)
+      }
     }
-  }
-  
-  // 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)
 
-}
+    filesToUpload.value = []
+    isEditMode.value = false
 
-// Helper to get proper image URL
-function getImageUrl(asset) {
-  if (asset.isPreview) {
-    return asset.imageUrl // Base64 preview
+    // Refresh event data
+    await refresh()
+  } catch (error) {
+    console.error('Error updating event:', error)
+    alert('Error updating event. Please try again.')
   }
-  // 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 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 items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
+// Build carousel items from real assets, fall back to placeholders
+const carouselItems = computed(() => {
+  const assets = event.value?.eventAssets || []
+  if (assets.length > 0) {
+    return assets.map((a: any) => `/api/events/${eventId}/images/${a.imageUrl}`)
+  }
+  return [
+    'https://picsum.photos/640/640?random=1',
+    'https://picsum.photos/640/640?random=2',
+    'https://picsum.photos/640/640?random=3',
+  ]
+})
 
-const backNavigate = computed(() => {
-  return admin ? '/events/manage' : '/events'
+const mapStyle = '/mapstyles.json'
+const center = computed(() => {
+  if (!event.value?.location) return [0, 0]
+  return [event.value.location.longitude, event.value.location.latitude]
 })
+const zoom = 15
+
+const backNavigate = computed(() => 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">
+    <!-- Not Found -->
+    <div v-if="error" 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')"
-        >
+        <UButton icon="i-lucide-arrow-left" @click="navigateTo('/events/manage')">
           Back to Events
         </UButton>
       </div>
     </div>
 
     <!-- Event Details -->
-    <div v-else>
-      <!-- Header with Edit Button -->
+    <div v-else-if="event">
+
+      <!-- Sticky Header -->
       <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)"
-          />
-          
+          <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"
+              @click="enterEditMode"
             >
               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>
+              <UButton variant="ghost" color="brand4" @click="cancelEdit">Cancel</UButton>
+              <UButton icon="i-lucide-check" color="brand4" @click="saveChanges">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"
-            
-          />
+        <!-- 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" />
         </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"
-          />
+          <p v-if="!isEditMode" class="text-md text-gray-700 italic">{{ event.shortDesc }}</p>
+          <UInput v-else v-model="editForm.shortDesc" placeholder="Short Description" size="lg" />
         </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">
+        <!-- Carousel (view mode) -->
+        <div v-if="!isEditMode" class="mb-8">
+          <UCarousel
+            v-slot="{ item }"
+            dots
+            :items="carouselItems"
+            class="h-80 max-w-xs mx-auto"
+          >
+            <img :src="item" class="h-80 w-auto rounded-lg mx-auto object-cover">
           </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>
-        
 
-        <!-- Date & Location Card -->
+        <!-- Image management (edit mode) -->
+        <div v-else class="mb-8">
+          <label class="block text-sm font-medium text-gray-700 mb-2">Event Images</label>
+          <EventImageUpload
+            :existing-assets="event.eventAssets"
+            :event-id="eventId"
+            @files-changed="onFilesChanged"
+          />
+        </div>
+
+        <!-- Date & Location -->
         <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">
@@ -358,71 +205,56 @@ const backNavigate = computed(() => {
             </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>
+              <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>
+                  <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>
+                  <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"
-              />
+              <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" />
+
+        <!-- Map (view mode only) -->
+        <div v-if="!isEditMode && event.location" id="map" class="h-60 relative overflow-hidden mb-6">
+          <MapInteractive :style="mapStyle" :center="center" :zoom="zoom" />
         </div>
 
-        <!-- Full Description -->
+        <!-- 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"
-          />
+          <UTextarea v-else v-model="editForm.description" placeholder="Full event description" :rows="6" />
         </div>
 
+        <!-- Mobile Clinic notice -->
         <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>  
+            This event is part of our Mobile Clinic program.
+          </p>
         </div>
 
-        <!-- Event Options -->
+        <!-- Event Settings (edit mode) -->
         <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">
@@ -432,11 +264,8 @@ const backNavigate = computed(() => {
                   <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>
+              <UCheckbox v-model="editForm.allowVolunteers" color="brand4" />
             </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" />
@@ -445,17 +274,12 @@ const backNavigate = computed(() => {
                   <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>
+              <UCheckbox v-model="editForm.allowAttendees" color="brand4" />
             </div>
           </div>
         </div>
 
-        <!-- Action Buttons for Attendees/Volunteers -->
+        <!-- Action Buttons (view mode) -->
         <div v-if="!isEditMode" class="flex gap-4">
           <UButton
             v-if="event.allowVolunteers"
@@ -466,7 +290,6 @@ const backNavigate = computed(() => {
           >
             Sign Up as Volunteer
           </UButton>
-          
           <UButton
             v-if="event.allowAttendees"
             color="brand4"
@@ -481,5 +304,6 @@ const backNavigate = computed(() => {
 
       </div>
     </div>
+
   </div>
 </template>
\ No newline at end of file
diff --git a/app/pages/events/manage.vue b/app/pages/events/manage.vue
index 13cfce6..28d20cc 100644
--- a/app/pages/events/manage.vue
+++ b/app/pages/events/manage.vue
@@ -55,7 +55,8 @@ async function navigateToEvent(eventId) {
 function getEventImage(event) {
   if (event.eventAssets && event.eventAssets.length > 0) {
     const imageUrl = event.eventAssets[0].imageUrl
-    return `/api/events/${event.id}/images/${imageUrl.split('/').pop()}`
+    const encoded = encodeURIComponent(imageUrl)
+    return `/api/events/${event.id}/images/${encoded}`
   }
   return null
 }
@@ -144,7 +145,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/server/api/events/[id]/images/[name].delete.ts b/server/api/events/[id]/images/[name].delete.ts
new file mode 100644
index 0000000..13177fb
--- /dev/null
+++ b/server/api/events/[id]/images/[name].delete.ts
@@ -0,0 +1,53 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const fileName = getRouterParam(event, 'name')
+  const eventId = getRouterParam(event, 'id')
+
+  if (!fileName) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing fileName' })
+  }
+
+  if (!eventId) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing eventId' })
+  }
+
+  // imageUrl stored in DB is just the fileName
+  const imageUrl = decodeURIComponent(fileName)
+
+  // Check the asset exists in DB
+  const asset = await prisma.event_Asset.findUnique({
+    where: {
+      eventId_imageUrl: {
+        eventId,
+        imageUrl,
+      }
+    }
+  })
+
+  if (!asset) {
+    throw createError({ statusCode: 404, statusMessage: 'Image not found' })
+  }
+
+  // Delete from DB
+  await prisma.event_Asset.delete({
+    where: {
+      eventId_imageUrl: {
+        eventId,
+        imageUrl,
+      }
+    }
+  })
+
+  // Delete file from disk
+  const storageRoot = path.resolve(process.cwd(), process.env.IMAGE_STORAGE_PATH || 'public/images')
+  const filePath = path.join(storageRoot, eventId, decodeURIComponent(fileName))
+
+  if (fs.existsSync(filePath)) {
+    fs.unlinkSync(filePath)
+  }
+
+  return { message: 'Image deleted successfully' }
+})
\ No newline at end of file
diff --git a/server/api/events/[id]/images/[name].get.ts b/server/api/events/[id]/images/[name].get.ts
index af6d949..1aa1e2c 100644
--- a/server/api/events/[id]/images/[name].get.ts
+++ b/server/api/events/[id]/images/[name].get.ts
@@ -6,37 +6,34 @@ export default defineEventHandler(async (event) => {
   const eventID = getRouterParam(event, 'id')
 
   if (!fileName) {
-    throw createError({ statusCode: 400, statusMessage: "Missing fileName" })
+    throw createError({ statusCode: 400, statusMessage: 'Missing fileName' })
   }
 
-  if(!eventID) {
-    throw createError({ statusCode: 400, statusMessage: "Missing eventID" })
+  if (!eventID) {
+    throw createError({ statusCode: 400, statusMessage: 'Missing eventID' })
   }
 
-  // Get file path relative to project root
-  const filePath = path.join(
-    process.env.IMAGE_STORAGE_PATH || "public/images", 
-    eventID, 
-    fileName
-  )
+  const storageRoot = path.resolve(process.cwd(), process.env.IMAGE_STORAGE_PATH || 'public/images')
+  const filePath = path.join(storageRoot, eventID, decodeURIComponent(fileName))
+
+  console.log('🖼 Serving image from:', filePath)
+  console.log('📂 File exists:', fs.existsSync(filePath))
 
   if (!fs.existsSync(filePath)) {
-    throw createError({ statusCode: 404, statusMessage: "File not found" })
+    throw createError({ statusCode: 404, statusMessage: 'File not found' })
   }
 
   const fileStream = fs.createReadStream(filePath)
 
-  // Set content type based on file extension
   const ext = path.extname(filePath).toLowerCase()
-
   const mime =
-    ext === ".png" ? "image/png" :
-    ext === ".jpg" || ext === ".jpeg" ? "image/jpeg" :
-    ext === ".gif" ? "image/gif" :
-    ext === ".webp" ? "image/webp" :
-    "application/octet-stream"
+    ext === '.png' ? 'image/png' :
+    ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' :
+    ext === '.gif' ? 'image/gif' :
+    ext === '.webp' ? 'image/webp' :
+    'application/octet-stream'
 
-  setHeader(event, "Content-Type", mime)
+  setHeader(event, 'Content-Type', mime)
 
   return sendStream(event, fileStream)
 })
\ No newline at end of file
diff --git a/server/api/events/[id]/images/upload.post.ts b/server/api/events/[id]/images/upload.post.ts
index 678ab6f..4cac215 100644
--- a/server/api/events/[id]/images/upload.post.ts
+++ b/server/api/events/[id]/images/upload.post.ts
@@ -11,13 +11,13 @@ export default defineEventHandler(async (event) => {
   }
 
   if (!form) {
-    throw createError({ statusCode: 400, statusMessage: "No form data" })
+    throw createError({ statusCode: 400, statusMessage: 'No form data' })
   }
 
-  const file = form.find(i => i.name === "file")
+  const file = form.find(i => i.name === 'file')
 
   if (!file || !file.data) {
-    throw createError({ statusCode: 400, statusMessage: "File missing" })
+    throw createError({ statusCode: 400, statusMessage: 'File missing' })
   }
 
   const foundEvent = await prisma.event.findUnique({
@@ -29,39 +29,36 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 404, message: 'Event not found' })
   }
 
-  // Save file to public/images
-  const dirPath = path.join(process.env.IMAGE_STORAGE_PATH || "public/images", id)
+  const fileName = decodeURIComponent(file.filename || 'upload.png')
+
+  // Use absolute path to ensure files are written to the right place
+  const storageRoot = path.resolve(process.cwd(), process.env.IMAGE_STORAGE_PATH || 'public/images')
+  const dirPath = path.join(storageRoot, id)
+
+  console.log('📁 Writing image to:', dirPath)
 
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, { recursive: true })
   }
 
-  const filePath = path.join(dirPath, decodeURIComponent(file.filename || "failed.png"))
+  const filePath = path.join(dirPath, fileName)
 
   if (fs.existsSync(filePath)) {
     throw createError({ statusCode: 400, message: 'Image already exists.' })
   }
 
   fs.writeFileSync(filePath, file.data)
+  console.log('✅ File written:', filePath)
 
-  const addedImage = await prisma.event.update({
-    where: {
-      id: id,
-    },
+  await prisma.event.update({
+    where: { id },
     data: {
       eventAssets: {
-        create: [{
-          imageUrl: path.join(id, "images", file.filename || "failed.png")
-        }]
+        create: [{ imageUrl: fileName }]
       }
     }
   })
 
-  console.log(addedImage)
-
-  setResponseStatus(event, 201);
-
-  return {
-    message: "Added file to event."
-  }
-})
+  setResponseStatus(event, 201)
+  return { message: 'Added file to event.' }
+})
\ No newline at end of file
diff --git a/server/api/events/index.get.ts b/server/api/events/index.get.ts
index 5c03980..c4ae4a4 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'
diff --git a/server/utils/seed.ts b/server/utils/seed.ts
index 6bfd6f4..d1a9304 100644
--- a/server/utils/seed.ts
+++ b/server/utils/seed.ts
@@ -1,6 +1,6 @@
 import fs  from 'fs';
 import type { Language, Gender, Availability, Ethinicity, ApprovalStatus } from "./generated/prisma/client.ts";
-import { PrismaClient } from './generated/prisma/client.ts';
+import { PrismaClient } from './generated/prisma/client';
 import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
 
 const adapter = new PrismaBetterSqlite3({

From 3bf0820b96dd31ab35bd0729841085680517f3f8 Mon Sep 17 00:00:00 2001
From: kf212132 <kaitlyn.ma.ferguson@gmail.com>
Date: Thu, 30 Apr 2026 15:40:09 -0500
Subject: [PATCH 2/3] event signups

---
 app/components/event/EventRSVPModal.vue |  73 ++++++++++++++
 app/components/event/EventRSVPStats.vue | 104 +++++++++++++++++++
 app/components/event/Tile.vue           |  36 ++++---
 app/pages/events/[id].vue               |  45 ++++++++-
 app/pages/events/index.vue              | 128 +++++++++++++++++-------
 prisma/schema/event.prisma              |  13 +++
 server/api/events/[id]/rsvp.delete.ts   |  32 ++++++
 server/api/events/[id]/rsvp.get.ts      |  32 ++++++
 server/api/events/[id]/rsvp.post.ts     |  46 +++++++++
 9 files changed, 462 insertions(+), 47 deletions(-)
 create mode 100644 app/components/event/EventRSVPModal.vue
 create mode 100644 app/components/event/EventRSVPStats.vue
 create mode 100644 server/api/events/[id]/rsvp.delete.ts
 create mode 100644 server/api/events/[id]/rsvp.get.ts
 create mode 100644 server/api/events/[id]/rsvp.post.ts

diff --git a/app/components/event/EventRSVPModal.vue b/app/components/event/EventRSVPModal.vue
new file mode 100644
index 0000000..5e85806
--- /dev/null
+++ b/app/components/event/EventRSVPModal.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const props = defineProps<{
+  eventId: string
+  isVolunteer: boolean
+}>()
+
+const emit = defineEmits(['success', 'close'])
+
+const name = ref('')
+const email = ref('')
+const isSubmitting = ref(false)
+const error = ref('')
+
+async function submit() {
+  if (!name.value.trim() || !email.value.trim()) {
+    error.value = 'Please fill in all fields'
+    return
+  }
+
+  isSubmitting.value = true
+  error.value = ''
+
+  try {
+    // @ts-ignore
+    await $fetch(`/api/events/${props.eventId}/rsvp`, {
+      method: 'POST',
+      body: {
+        name: name.value,
+        email: email.value,
+        isVolunteer: props.isVolunteer,
+      }
+    })
+    emit('success')
+  } catch (err: any) {
+    error.value = err?.data?.message || 'Something went wrong. Please try again.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-4">
+    <h3 class="text-xl font-semibold text-brand4">
+      {{ isVolunteer ? 'Sign Up as Volunteer' : 'Register to Attend' }}
+    </h3>
+
+    <p class="text-sm text-gray-500">
+      {{ isVolunteer
+        ? 'Fill in your details to volunteer at this event.'
+        : 'Fill in your details to register as an attendee.' }}
+    </p>
+
+    <UFormField label="Full Name">
+      <UInput v-model="name" placeholder="Your name" />
+    </UFormField>
+
+    <UFormField label="Email">
+      <UInput v-model="email" type="email" placeholder="your@email.com" />
+    </UFormField>
+
+    <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
+
+    <div class="flex justify-end gap-2 pt-2 border-t">
+      <UButton variant="ghost" color="brand4" :disabled="isSubmitting" @click="$emit('close')">
+        Cancel
+      </UButton>
+      <UButton color="brand4" :loading="isSubmitting" @click="submit">
+        {{ isVolunteer ? 'Sign Up' : 'Register' }}
+      </UButton>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/event/EventRSVPStats.vue b/app/components/event/EventRSVPStats.vue
new file mode 100644
index 0000000..e58946a
--- /dev/null
+++ b/app/components/event/EventRSVPStats.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+interface GuestRSVP {
+  id: string
+  name: string
+  email: string
+  isVolunteer: boolean
+  createdAt: string
+}
+
+interface RSVPData {
+  volunteerCount: number
+  attendeeCount: number
+  volunteers: GuestRSVP[]
+  attendees: GuestRSVP[]
+}
+
+const props = defineProps<{
+  eventId: string
+  admin: boolean
+}>()
+
+const { data: rsvpData, refresh } = await useFetch<RSVPData>(`/api/events/${props.eventId}/rsvp`)
+
+const showVolunteers = ref(false)
+const showAttendees = ref(false)
+
+defineExpose({ refresh })
+</script>
+
+<template>
+  <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
+    <h2 class="text-xl font-semibold mb-4">Registrations</h2>
+
+    <div class="flex gap-4">
+      <!-- Volunteer count -->
+      <div class="flex-1">
+        <button
+          class="w-full flex items-center justify-between p-4 bg-brand6 rounded-xl"
+          :class="admin ? 'cursor-pointer hover:bg-brand6/80' : 'cursor-default'"
+          type="button"
+          @click="admin && (showVolunteers = !showVolunteers)"
+        >
+          <div class="flex items-center gap-3">
+            <UIcon name="i-lucide-heart-handshake" class="w-5 h-5 text-brand4" />
+            <div class="text-left">
+              <p class="text-2xl font-bold text-brand4">{{ rsvpData?.volunteerCount ?? 0 }}</p>
+              <p class="text-xs text-gray-500">Volunteers</p>
+            </div>
+          </div>
+          <UIcon v-if="admin" :name="showVolunteers ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="w-4 h-4 text-gray-400" />
+        </button>
+
+        <!-- Volunteer list -->
+        <div v-if="admin && showVolunteers" class="mt-2 border border-gray-200 rounded-xl overflow-hidden">
+          <div v-if="rsvpData?.volunteers?.length === 0" class="p-4 text-sm text-gray-500 text-center">
+            No volunteers yet
+          </div>
+          <div
+            v-for="volunteer in rsvpData?.volunteers"
+            :key="volunteer.id"
+            class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
+          >
+            <p class="text-sm font-medium text-gray-900">{{ volunteer.name }}</p>
+            <p class="text-xs text-gray-500">{{ volunteer.email }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Attendee count -->
+      <div class="flex-1">
+        <button
+          class="w-full flex items-center justify-between p-4 bg-brand6 rounded-xl"
+          :class="admin ? 'cursor-pointer hover:bg-brand6/80' : 'cursor-default'"
+          type="button"
+          @click="admin && (showAttendees = !showAttendees)"
+        >
+          <div class="flex items-center gap-3">
+            <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
+            <div class="text-left">
+              <p class="text-2xl font-bold text-brand4">{{ rsvpData?.attendeeCount ?? 0 }}</p>
+              <p class="text-xs text-gray-500">Attendees</p>
+            </div>
+          </div>
+          <UIcon v-if="admin" :name="showAttendees ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="w-4 h-4 text-gray-400" />
+        </button>
+
+        <!-- Attendee list -->
+        <div v-if="admin && showAttendees" class="mt-2 border border-gray-200 rounded-xl overflow-hidden">
+          <div v-if="rsvpData?.attendees?.length === 0" class="p-4 text-sm text-gray-500 text-center">
+            No attendees yet
+          </div>
+          <div
+            v-for="attendee in rsvpData?.attendees"
+            :key="attendee.id"
+            class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
+          >
+            <p class="text-sm font-medium text-gray-900">{{ attendee.name }}</p>
+            <p class="text-xs text-gray-500">{{ attendee.email }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index 576600e..62ab93c 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -1,34 +1,46 @@
 <script setup lang="ts">
-defineEmits(['add'])
+defineEmits(['add', 'click'])
 defineProps<{
   title: string
   subtitle?: string
+  imageUrl?: string
 }>()
 </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"
+           bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm cursor-pointer
+           hover:shadow-md transition-shadow"
+    @click="$emit('click')"
   >
-    <!-- Square avatar -->
-    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"/>
+    <!-- Event image or placeholder -->
+    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60 flex-shrink-0 overflow-hidden">
+      <img
+        v-if="imageUrl"
+        :src="imageUrl"
+        alt="Event image"
+        class="w-full h-full object-cover"
+      >
+      <span v-else class="flex items-center justify-center h-full text-xl">📅</span>
+    </div>
 
     <!-- Text lines -->
-    <div class="flex-1">
-      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
-      {{ title }}
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+        {{ title }}
       </p>
-
-      <p class="text-xs text-gray-500 dark:text-gray-400">
-      {{ subtitle }}
+      <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
+        {{ subtitle }}
       </p>
     </div>
 
     <!-- Plus button -->
     <button
-      class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60
+      class="grid place-items-center rounded-xl h-9 w-9 flex-shrink-0 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')"
+      type="button"
+      @click.stop="$emit('add')"
     >
       <UIcon name="i-heroicons-plus" class="w-5 h-5" />
     </button>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 2acb609..ce14b2b 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -18,6 +18,21 @@ const editForm = ref<any>({})
 // Placeholder until auth is implemented
 const admin = true
 
+// RSVP modal state
+const showRsvpModal = ref(false)
+const rsvpIsVolunteer = ref(false)
+const rsvpStatsRef = ref<any>(null)
+
+function openRsvpModal(isVolunteer: boolean) {
+  rsvpIsVolunteer.value = isVolunteer
+  showRsvpModal.value = true
+}
+
+async function onRsvpSuccess() {
+  showRsvpModal.value = false
+  await rsvpStatsRef.value?.refresh()
+}
+
 // Assets shown in the edit uploader
 const filesToUpload = ref<File[]>([])
 
@@ -279,6 +294,14 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
           </div>
         </div>
 
+        <!-- RSVP Stats (admin only, view mode) -->
+        <EventRSVPStats
+          v-if="admin && !isEditMode"
+          ref="rsvpStatsRef"
+          :event-id="eventId"
+          :admin="admin"
+        />
+
         <!-- Action Buttons (view mode) -->
         <div v-if="!isEditMode" class="flex gap-4">
           <UButton
@@ -287,6 +310,7 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
             size="xl"
             block
             icon="i-lucide-heart-handshake"
+            @click="openRsvpModal(true)"
           >
             Sign Up as Volunteer
           </UButton>
@@ -297,13 +321,32 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
             size="xl"
             block
             icon="i-lucide-ticket"
+            @click="openRsvpModal(false)"
           >
             Register to Attend
           </UButton>
         </div>
 
+        <!-- RSVP Modal -->
+        <Teleport to="body">
+          <div
+            v-if="showRsvpModal"
+            class="fixed inset-0 z-50 flex items-center justify-center p-4"
+            @click.self="showRsvpModal = false"
+          >
+            <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
+              <EventRSVPModal
+                :event-id="eventId"
+                :is-volunteer="rsvpIsVolunteer"
+                @success="onRsvpSuccess"
+                @close="showRsvpModal = false"
+              />
+            </div>
+          </div>
+        </Teleport>
+
       </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 7f1df5f..4813d00 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,50 +1,110 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import type { DateValue } from '@internationalized/date'
-import { CalendarDate, getLocalTimeZone } from '@internationalized/date'
+import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date'
 
 const tz = getLocalTimeZone()
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const selectedDate = ref<any>(today(tz))
 
-const value = ref<DateValue>(new CalendarDate(2022, 2, 3))
+// Load all events from API
+const { data: allEvents } = await useFetch('/api/events')
 
-const eventClick = () => {
-  navigateTo('/events/event1')
-}
+const upcomingEvents = computed(() => {
+  const now = new Date()
+  return (allEvents.value || []).filter(event => new Date(event.endTime) >= now)
+})
+
+// Dates that have events — used to highlight calendar
+const eventDates = computed(() => {
+  return (allEvents.value || []).map(event => {
+    const d = new Date(event.startTime)
+    return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+  })
+})
+
+// Events on the selected calendar date
+const eventsOnSelectedDate = computed(() => {
+  if (!selectedDate.value) return upcomingEvents.value
+  return (allEvents.value || []).filter(event => {
+    const d = new Date(event.startTime)
+    const cal = new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())
+    return cal.compare(selectedDate.value) === 0
+  })
+})
+
+// Show date-filtered events if a date with events is selected, otherwise show all upcoming
+const displayedEvents = computed(() => {
+  if (eventsOnSelectedDate.value.length > 0) return eventsOnSelectedDate.value
+  return upcomingEvents.value
+})
 
 const isDateDisabled = (d: DateValue) =>
   d.toDate(tz) < new Date(new Date().setHours(0, 0, 0, 0))
+
+function getEventImage(event: any) {
+  if (event.eventAssets && event.eventAssets.length > 0) {
+    const imageUrl = event.eventAssets[0].imageUrl
+    const encoded = encodeURIComponent(imageUrl)
+    return `/api/events/${event.id}/images/${encoded}`
+  }
+  return undefined
+}
+
+
+function getEventSubtitle(event: any) {
+  const date = new Date(event.startTime).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  })
+  const location = event.location?.address || ''
+  return [date, location].filter(Boolean).join(' · ')
+}
+
+function goToEvent(id: string) {
+  navigateTo(`/events/${id}`)
+}
 </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>
-        
-
-        <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>
-        <h3 class="text-lg font-semibold text-brand4 mb-4">
-          Upcoming Events
-        </h3>
-        
-
-        <div class="space-y-4">
-          <EventTile :onclick="eventClick"/>
-          <EventTile />
-          <EventTile />
-          <EventTile />
-        </div>
+      <h2 class="text-center text-2xl font-bold text-brand4 dark:text-teal-400 mb-6">
+        Events
+      </h2>
+
+      <UCard class="max-w-4xl mx-auto mb-6">
+        <UCalendar
+          v-model="selectedDate"
+          color="brand7"
+          :is-date-disabled="isDateDisabled"
+          locale="en-US"
+          weekday-format="short"
+          :first-day-of-week="0"
+          class="rounded-2xl"
+        />
+      </UCard>
+
+      <h3 class="text-lg font-semibold text-brand4 mb-4">
+        {{ eventsOnSelectedDate.length > 0 ? 'Events on this day' : 'Upcoming Events' }}
+      </h3>
+
+      <div v-if="displayedEvents.length === 0" class="text-center text-gray-500 py-8">
+        No upcoming events
+      </div>
+
+      <div v-else class="space-y-4">
+        <EventTile
+          v-for="event in displayedEvents"
+          :key="event.id"
+          :title="event.title"
+          :subtitle="getEventSubtitle(event)"
+          :image-url="getEventImage(event)"
+          @click="goToEvent(event.id)"
+          @add="goToEvent(event.id)"
+        />
+      </div>
     </div>
   </div>
-</template>
-
+</template>
\ No newline at end of file
diff --git a/prisma/schema/event.prisma b/prisma/schema/event.prisma
index 018220d..47a47f9 100644
--- a/prisma/schema/event.prisma
+++ b/prisma/schema/event.prisma
@@ -17,6 +17,7 @@ model Event {
   eventAssets     Event_Asset[]
   participants    RSVP[]
   volunteerHours  Volunteer_Hour_Log[]
+  guestRSVPs      GuestRSVP[]
 
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now()) @updatedAt
@@ -45,3 +46,15 @@ model RSVP {
   @@id([userId, eventId])
   @@map("rsvps")
 }
+
+model GuestRSVP {
+  id          String   @id @default(uuid())
+  eventId     String
+  event       Event    @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  name        String
+  email       String
+  isVolunteer Boolean  @default(false)
+  createdAt   DateTime @default(now())
+
+  @@map("guest_rsvps")
+}
diff --git a/server/api/events/[id]/rsvp.delete.ts b/server/api/events/[id]/rsvp.delete.ts
new file mode 100644
index 0000000..3102bc9
--- /dev/null
+++ b/server/api/events/[id]/rsvp.delete.ts
@@ -0,0 +1,32 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  if (!body.email) {
+    throw createError({ statusCode: 400, message: 'Email is required' })
+  }
+
+  const rsvp = await prisma.guestRSVP.findFirst({
+    where: {
+      eventId: id,
+      email: body.email.toLowerCase(),
+      isVolunteer: body.isVolunteer ?? false,
+    }
+  })
+
+  if (!rsvp) {
+    throw createError({ statusCode: 404, message: 'RSVP not found' })
+  }
+
+  await prisma.guestRSVP.delete({
+    where: { id: rsvp.id }
+  })
+
+  return { message: 'RSVP removed successfully' }
+})
\ No newline at end of file
diff --git a/server/api/events/[id]/rsvp.get.ts b/server/api/events/[id]/rsvp.get.ts
new file mode 100644
index 0000000..b9cf34a
--- /dev/null
+++ b/server/api/events/[id]/rsvp.get.ts
@@ -0,0 +1,32 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  const foundEvent = await prisma.event.findUnique({
+    where: { id },
+  })
+
+  if (!foundEvent) {
+    throw createError({ statusCode: 404, message: 'Event not found' })
+  }
+
+  const rsvps = await prisma.guestRSVP.findMany({
+    where: { eventId: id },
+    orderBy: { createdAt: 'asc' }
+  })
+
+  const volunteers = rsvps.filter(r => r.isVolunteer)
+  const attendees = rsvps.filter(r => !r.isVolunteer)
+
+  return {
+    volunteerCount: volunteers.length,
+    attendeeCount: attendees.length,
+    volunteers,
+    attendees,
+  }
+})
\ No newline at end of file
diff --git a/server/api/events/[id]/rsvp.post.ts b/server/api/events/[id]/rsvp.post.ts
new file mode 100644
index 0000000..c8d3f39
--- /dev/null
+++ b/server/api/events/[id]/rsvp.post.ts
@@ -0,0 +1,46 @@
+import prisma from '~~/server/utils/prisma'
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id')
+  const body = await readBody(event)
+
+  if (!id) {
+    throw createError({ statusCode: 400, message: 'Missing event ID' })
+  }
+
+  if (!body.name || !body.email) {
+    throw createError({ statusCode: 400, message: 'Name and email are required' })
+  }
+
+  const foundEvent = await prisma.event.findUnique({
+    where: { id }
+  })
+
+  if (!foundEvent) {
+    throw createError({ statusCode: 404, message: 'Event not found' })
+  }
+
+  const existing = await prisma.guestRSVP.findFirst({
+    where: {
+      eventId: id,
+      email: body.email.toLowerCase(),
+      isVolunteer: body.isVolunteer ?? false,
+    }
+  })
+
+  if (existing) {
+    throw createError({ statusCode: 409, message: 'You are already signed up for this event' })
+  }
+
+  const rsvp = await prisma.guestRSVP.create({
+    data: {
+      eventId: id,
+      name: body.name.trim(),
+      email: body.email.toLowerCase().trim(),
+      isVolunteer: body.isVolunteer ?? false,
+    }
+  })
+
+  setResponseStatus(event, 201)
+  return rsvp
+})
\ No newline at end of file

From e3adb0a2e72f03a650ee5540ede2ab02e0483bd9 Mon Sep 17 00:00:00 2001
From: Vikas Thoutam <vikas.thoutam@gmail.com>
Date: Wed, 13 May 2026 00:07:06 -0500
Subject: [PATCH 3/3] chore: update event image fetching to more consistently
 display images

---
 .../{EventImageUpload.vue => ImageUpload.vue} |  26 +-
 app/components/event/Modal.vue                |  26 +-
 .../{EventRSVPModal.vue => RSVPModal.vue}     |  41 +-
 .../{EventRSVPStats.vue => RSVPStats.vue}     |  80 ++-
 app/components/event/Tile.vue                 |   5 +
 app/pages/events/[id].vue                     |  10 +-
 app/pages/events/index.vue                    |   3 +-
 app/pages/events/manage.vue                   |  30 +-
 app/pages/index.vue                           | 620 +++++++++---------
 .../api/events/[id]/images/[name].delete.ts   |  12 +-
 server/api/events/[id]/index.patch.ts         |   7 +-
 server/api/events/[id]/rsvp.delete.ts         |   6 +-
 server/api/events/[id]/rsvp.get.ts            |   4 +-
 server/api/events/[id]/rsvp.post.ts           |   8 +-
 server/api/volunteer-logs/index.get.ts        |  37 +-
 15 files changed, 493 insertions(+), 422 deletions(-)
 rename app/components/event/{EventImageUpload.vue => ImageUpload.vue} (89%)
 rename app/components/event/{EventRSVPModal.vue => RSVPModal.vue} (71%)
 rename app/components/event/{EventRSVPStats.vue => RSVPStats.vue} (51%)

diff --git a/app/components/event/EventImageUpload.vue b/app/components/event/ImageUpload.vue
similarity index 89%
rename from app/components/event/EventImageUpload.vue
rename to app/components/event/ImageUpload.vue
index 9c416f6..05b1a73 100644
--- a/app/components/event/EventImageUpload.vue
+++ b/app/components/event/ImageUpload.vue
@@ -42,30 +42,33 @@ function onFilesChanged(files: File[] | null | undefined) {
   emit('filesChanged', safeFiles)
 }
 
+function getAssetUrl(asset: ServerAsset) {
+  return `/api/events/${asset.imageUrl}`
+}
+
 async function deleteExistingAsset(asset: ServerAsset) {
   if (!props.eventId) return
 
   try {
-    await $fetch(`/api/events/${props.eventId}/images/${asset.imageUrl}`, {
-      method: 'DELETE'
+    await $fetch(getAssetUrl(asset), {
+      method: 'DELETE',
     })
     remainingAssets.value = remainingAssets.value.filter(a => a.imageUrl !== asset.imageUrl)
     emit('assetDeleted', asset.imageUrl)
-  } catch (err) {
+  }
+  catch (err) {
     console.error('Failed to delete image:', err)
   }
 }
-
-function getAssetUrl(asset: ServerAsset) {
-  return `/api/events/${props.eventId}/images/${asset.imageUrl}`
-}
 </script>
 
 <template>
   <div class="space-y-4">
     <!-- Existing server images -->
     <div v-if="remainingAssets.length > 0">
-      <p class="text-sm text-gray-500 mb-2">Current Images</p>
+      <p class="text-sm text-gray-500 mb-2">
+        Current Images
+      </p>
       <div class="grid grid-cols-3 gap-2">
         <div
           v-for="asset in remainingAssets"
@@ -82,7 +85,10 @@ function getAssetUrl(asset: ServerAsset) {
             type="button"
             @click="deleteExistingAsset(asset)"
           >
-            <UIcon name="i-lucide-trash-2" class="w-3 h-3" />
+            <UIcon
+              name="i-lucide-trash-2"
+              class="w-3 h-3"
+            />
           </button>
         </div>
       </div>
@@ -103,4 +109,4 @@ function getAssetUrl(asset: ServerAsset) {
       @update:model-value="onFilesChanged"
     />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/Modal.vue b/app/components/event/Modal.vue
index ae0a840..5d66dab 100644
--- a/app/components/event/Modal.vue
+++ b/app/components/event/Modal.vue
@@ -17,29 +17,11 @@ const newEvent = ref({
 const isSaving = ref(false)
 
 // Store actual File objects for upload
-const filesToUpload = ref([])
+const filesToUpload = ref([] as File[])
 
-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
-})
+function onFilesChanged(files: File[]) {
+  filesToUpload.value = files
+}
 
 async function saveEvent() {
   // Validate required fields
diff --git a/app/components/event/EventRSVPModal.vue b/app/components/event/RSVPModal.vue
similarity index 71%
rename from app/components/event/EventRSVPModal.vue
rename to app/components/event/RSVPModal.vue
index 5e85806..002fe50 100644
--- a/app/components/event/EventRSVPModal.vue
+++ b/app/components/event/RSVPModal.vue
@@ -28,12 +28,14 @@ async function submit() {
         name: name.value,
         email: email.value,
         isVolunteer: props.isVolunteer,
-      }
+      },
     })
     emit('success')
-  } catch (err: any) {
+  }
+  catch (err: any) {
     error.value = err?.data?.message || 'Something went wrong. Please try again.'
-  } finally {
+  }
+  finally {
     isSubmitting.value = false
   }
 }
@@ -52,22 +54,43 @@ async function submit() {
     </p>
 
     <UFormField label="Full Name">
-      <UInput v-model="name" placeholder="Your name" />
+      <UInput
+        v-model="name"
+        placeholder="Your name"
+      />
     </UFormField>
 
     <UFormField label="Email">
-      <UInput v-model="email" type="email" placeholder="your@email.com" />
+      <UInput
+        v-model="email"
+        type="email"
+        placeholder="your@email.com"
+      />
     </UFormField>
 
-    <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
+    <p
+      v-if="error"
+      class="text-sm text-red-500"
+    >
+      {{ error }}
+    </p>
 
     <div class="flex justify-end gap-2 pt-2 border-t">
-      <UButton variant="ghost" color="brand4" :disabled="isSubmitting" @click="$emit('close')">
+      <UButton
+        variant="ghost"
+        color="brand4"
+        :disabled="isSubmitting"
+        @click="$emit('close')"
+      >
         Cancel
       </UButton>
-      <UButton color="brand4" :loading="isSubmitting" @click="submit">
+      <UButton
+        color="brand4"
+        :loading="isSubmitting"
+        @click="submit"
+      >
         {{ isVolunteer ? 'Sign Up' : 'Register' }}
       </UButton>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/EventRSVPStats.vue b/app/components/event/RSVPStats.vue
similarity index 51%
rename from app/components/event/EventRSVPStats.vue
rename to app/components/event/RSVPStats.vue
index e58946a..0bbbbf8 100644
--- a/app/components/event/EventRSVPStats.vue
+++ b/app/components/event/RSVPStats.vue
@@ -29,7 +29,9 @@ defineExpose({ refresh })
 
 <template>
   <div class="bg-white rounded-2xl shadow-sm p-6 mb-6">
-    <h2 class="text-xl font-semibold mb-4">Registrations</h2>
+    <h2 class="text-xl font-semibold mb-4">
+      Registrations
+    </h2>
 
     <div class="flex gap-4">
       <!-- Volunteer count -->
@@ -41,18 +43,35 @@ defineExpose({ refresh })
           @click="admin && (showVolunteers = !showVolunteers)"
         >
           <div class="flex items-center gap-3">
-            <UIcon name="i-lucide-heart-handshake" class="w-5 h-5 text-brand4" />
+            <UIcon
+              name="i-lucide-heart-handshake"
+              class="w-5 h-5 text-brand4"
+            />
             <div class="text-left">
-              <p class="text-2xl font-bold text-brand4">{{ rsvpData?.volunteerCount ?? 0 }}</p>
-              <p class="text-xs text-gray-500">Volunteers</p>
+              <p class="text-2xl font-bold text-brand4">
+                {{ rsvpData?.volunteerCount ?? 0 }}
+              </p>
+              <p class="text-xs text-gray-500">
+                Volunteers
+              </p>
             </div>
           </div>
-          <UIcon v-if="admin" :name="showVolunteers ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="w-4 h-4 text-gray-400" />
+          <UIcon
+            v-if="admin"
+            :name="showVolunteers ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="w-4 h-4 text-gray-400"
+          />
         </button>
 
         <!-- Volunteer list -->
-        <div v-if="admin && showVolunteers" class="mt-2 border border-gray-200 rounded-xl overflow-hidden">
-          <div v-if="rsvpData?.volunteers?.length === 0" class="p-4 text-sm text-gray-500 text-center">
+        <div
+          v-if="admin && showVolunteers"
+          class="mt-2 border border-gray-200 rounded-xl overflow-hidden"
+        >
+          <div
+            v-if="rsvpData?.volunteers?.length === 0"
+            class="p-4 text-sm text-gray-500 text-center"
+          >
             No volunteers yet
           </div>
           <div
@@ -60,8 +79,12 @@ defineExpose({ refresh })
             :key="volunteer.id"
             class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
           >
-            <p class="text-sm font-medium text-gray-900">{{ volunteer.name }}</p>
-            <p class="text-xs text-gray-500">{{ volunteer.email }}</p>
+            <p class="text-sm font-medium text-gray-900">
+              {{ volunteer.name }}
+            </p>
+            <p class="text-xs text-gray-500">
+              {{ volunteer.email }}
+            </p>
           </div>
         </div>
       </div>
@@ -75,18 +98,35 @@ defineExpose({ refresh })
           @click="admin && (showAttendees = !showAttendees)"
         >
           <div class="flex items-center gap-3">
-            <UIcon name="i-lucide-ticket" class="w-5 h-5 text-brand4" />
+            <UIcon
+              name="i-lucide-ticket"
+              class="w-5 h-5 text-brand4"
+            />
             <div class="text-left">
-              <p class="text-2xl font-bold text-brand4">{{ rsvpData?.attendeeCount ?? 0 }}</p>
-              <p class="text-xs text-gray-500">Attendees</p>
+              <p class="text-2xl font-bold text-brand4">
+                {{ rsvpData?.attendeeCount ?? 0 }}
+              </p>
+              <p class="text-xs text-gray-500">
+                Attendees
+              </p>
             </div>
           </div>
-          <UIcon v-if="admin" :name="showAttendees ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" class="w-4 h-4 text-gray-400" />
+          <UIcon
+            v-if="admin"
+            :name="showAttendees ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="w-4 h-4 text-gray-400"
+          />
         </button>
 
         <!-- Attendee list -->
-        <div v-if="admin && showAttendees" class="mt-2 border border-gray-200 rounded-xl overflow-hidden">
-          <div v-if="rsvpData?.attendees?.length === 0" class="p-4 text-sm text-gray-500 text-center">
+        <div
+          v-if="admin && showAttendees"
+          class="mt-2 border border-gray-200 rounded-xl overflow-hidden"
+        >
+          <div
+            v-if="rsvpData?.attendees?.length === 0"
+            class="p-4 text-sm text-gray-500 text-center"
+          >
             No attendees yet
           </div>
           <div
@@ -94,11 +134,15 @@ defineExpose({ refresh })
             :key="attendee.id"
             class="flex flex-col px-4 py-3 border-b border-gray-100 last:border-0"
           >
-            <p class="text-sm font-medium text-gray-900">{{ attendee.name }}</p>
-            <p class="text-xs text-gray-500">{{ attendee.email }}</p>
+            <p class="text-sm font-medium text-gray-900">
+              {{ attendee.name }}
+            </p>
+            <p class="text-xs text-gray-500">
+              {{ attendee.email }}
+            </p>
           </div>
         </div>
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/event/Tile.vue b/app/components/event/Tile.vue
index eb29e56..eb0b8e7 100644
--- a/app/components/event/Tile.vue
+++ b/app/components/event/Tile.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
   subtitle?: string
   buttonType?: 'plus' | 'arrow'
   eventId?: string
+  imageUrl?: string
 }>()
 
 const iconName = computed(() =>
@@ -12,6 +13,10 @@ const iconName = computed(() =>
     ? 'i-heroicons-arrow-right-20-solid'
     : 'i-heroicons-plus',
 )
+
+function getAssetUrl(imageUrl: string) {
+  return `/api/events/${imageUrl}`
+}
 </script>
 
 <template>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 71e7a96..0eb02c5 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -7,8 +7,11 @@ const eventId = route.params.id as string
 // Single fetch — no onMounted duplicate
 const { data: event, error, refresh } = await useFetch(`/api/events/${eventId}`)
 
+const notFound = ref(false)
+
 if (error.value) {
   console.error('Failed to load event:', error.value)
+  notFound.value = true
 }
 
 const isEditMode = ref(false)
@@ -114,7 +117,7 @@ const formattedDate = computed(() => {
 const carouselItems = computed(() => {
   const assets = event.value?.eventAssets || []
   if (assets.length > 0) {
-    return assets.map((a: any) => `/api/events/${eventId}/images/${a.imageUrl}`)
+    return assets.map((a: any) => `/api/events/${a.imageUrl}`)
   }
   return [
     'https://picsum.photos/640/640?random=1',
@@ -207,7 +210,7 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
               <UButton
                 variant="ghost"
                 color="brand4"
-                @click="toggleEditMode"
+                @click="cancelEdit"
               >
                 Cancel
               </UButton>
@@ -217,7 +220,6 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
                 @click="
                   async () => {
                     await saveChanges();
-                    await uploadNewImages();
                   }
                 "
               >
@@ -370,7 +372,7 @@ const backNavigate = computed(() => admin ? '/events/manage' : '/events')
           class="h-60 relative overflow-hidden justify-center items-center mb-6"
         >
           <MapInteractive
-            :style="style"
+            :style="mapStyle"
             :center="center"
             :zoom="zoom"
           />
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index a22236e..759e85b 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -91,8 +91,7 @@ const isDateDisabled = (d: DateValue) =>
 function getEventImage(event: any) {
   if (event.eventAssets && event.eventAssets.length > 0) {
     const imageUrl = event.eventAssets[0].imageUrl
-    const encoded = encodeURIComponent(imageUrl)
-    return `/api/events/${event.id}/images/${encoded}`
+    return `/api/events/${imageUrl}`
   }
   return undefined
 }
diff --git a/app/pages/events/manage.vue b/app/pages/events/manage.vue
index cf5a70c..52a3f39 100644
--- a/app/pages/events/manage.vue
+++ b/app/pages/events/manage.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup>
+import { ref, onMounted } from 'vue'
+
 const showAddModal = ref(false)
 
 const pastEvents = ref([])
@@ -53,8 +55,7 @@ async function navigateToEvent(eventId) {
 function getEventImage(event) {
   if (event.eventAssets && event.eventAssets.length > 0) {
     const imageUrl = event.eventAssets[0].imageUrl
-    const encoded = encodeURIComponent(imageUrl)
-    return `/api/events/${event.id}/images/${encoded}`
+    return `/api/events/${imageUrl}`
   }
   return null
 }
@@ -171,33 +172,18 @@ function getEventDate(event) {
                 class="flex items-center justify-center h-full text-white text-2xl"
               >📅</span>
             </div>
-
-            <<<<<<< HEAD
-            <div class="flex flex-col text-left pointer-events-none">
+            <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?.address }}
+                {{ event.location.address }}
               </p>
               <p class="text-gray-400 text-xs">
                 {{ getEventDate(event) }}
               </p>
-              =======
-              <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.address }}
-                </p>
-                <p class="text-gray-400 text-xs">
-                  {{ getEventDate(event) }}
-                </p>
-                >>>>>>> spring26
-              </div>
             </div>
           </button>
         </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e79992a..a4a121c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,336 +1,360 @@
 <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}`);
-};
+  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"
-                        @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>
+          <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"
+            class="shrink-0 w-40 rounded-xl shadow-lg overflow-hidden hover:scale-95 transition-all duration-300 cursor-pointer"
+            @click="handleEventClick(event)"
+          >
+            <!-- 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
-                                    >
-                                </div>
-                            </div>
-                        </div>
-                    </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>
-            </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"
+
+                <!-- Location -->
+                <div
+                  class="flex items-start text-gray-600 text-[10px]"
                 >
-                    <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"
+                  <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"
                     />
-                    <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>
+                    <circle
+                      cx="12"
+                      cy="10"
+                      r="3"
+                    />
+                  </svg>
+                  <span class="leading-tight">
+                    {{ event.location.address }}</span>
+                </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"
+            >
+              <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>
-                            </div>
-                        </div>
-                    </a>
-                </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>
+              </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>
+        </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"
                 >
-                    <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>
+                  {{ donation.name }}
+                </p>
+              </div>
             </div>
+          </a>
         </div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/server/api/events/[id]/images/[name].delete.ts b/server/api/events/[id]/images/[name].delete.ts
index 13177fb..144a736 100644
--- a/server/api/events/[id]/images/[name].delete.ts
+++ b/server/api/events/[id]/images/[name].delete.ts
@@ -15,7 +15,7 @@ export default defineEventHandler(async (event) => {
   }
 
   // imageUrl stored in DB is just the fileName
-  const imageUrl = decodeURIComponent(fileName)
+  const imageUrl = path.join(eventId, 'images', fileName)
 
   // Check the asset exists in DB
   const asset = await prisma.event_Asset.findUnique({
@@ -23,8 +23,8 @@ export default defineEventHandler(async (event) => {
       eventId_imageUrl: {
         eventId,
         imageUrl,
-      }
-    }
+      },
+    },
   })
 
   if (!asset) {
@@ -37,8 +37,8 @@ export default defineEventHandler(async (event) => {
       eventId_imageUrl: {
         eventId,
         imageUrl,
-      }
-    }
+      },
+    },
   })
 
   // Delete file from disk
@@ -50,4 +50,4 @@ export default defineEventHandler(async (event) => {
   }
 
   return { message: 'Image deleted successfully' }
-})
\ No newline at end of file
+})
diff --git a/server/api/events/[id]/index.patch.ts b/server/api/events/[id]/index.patch.ts
index 0f0cb53..fbc94f9 100644
--- a/server/api/events/[id]/index.patch.ts
+++ b/server/api/events/[id]/index.patch.ts
@@ -41,6 +41,7 @@ async function geocodeLocation(location: string) {
 export default defineEventHandler(async (event) => {
   const id = getRouterParam(event, 'id')
   const body = await readBody(event)
+  console.log(body)
 
   if (!id) {
     throw createError({ statusCode: 400, message: 'Missing event ID' })
@@ -50,14 +51,14 @@ export default defineEventHandler(async (event) => {
   const locationData
     = (await prisma.location.findUnique({
       where: {
-        address: body.location.address || null,
+        address: body.location || '',
       },
       select: {
         latitude: true,
         longitude: true,
         address: true,
       },
-    })) || (await geocodeLocation(body.location.address))
+    })) || (await geocodeLocation(body.location))
 
   if (!locationData) {
     throw createError({
@@ -113,7 +114,7 @@ export default defineEventHandler(async (event) => {
         location: {
           connectOrCreate: {
             where: {
-              address: body.location.address,
+              address: body.location || '',
             },
             create: locationData!,
           },
diff --git a/server/api/events/[id]/rsvp.delete.ts b/server/api/events/[id]/rsvp.delete.ts
index 3102bc9..125986b 100644
--- a/server/api/events/[id]/rsvp.delete.ts
+++ b/server/api/events/[id]/rsvp.delete.ts
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
       eventId: id,
       email: body.email.toLowerCase(),
       isVolunteer: body.isVolunteer ?? false,
-    }
+    },
   })
 
   if (!rsvp) {
@@ -25,8 +25,8 @@ export default defineEventHandler(async (event) => {
   }
 
   await prisma.guestRSVP.delete({
-    where: { id: rsvp.id }
+    where: { id: rsvp.id },
   })
 
   return { message: 'RSVP removed successfully' }
-})
\ No newline at end of file
+})
diff --git a/server/api/events/[id]/rsvp.get.ts b/server/api/events/[id]/rsvp.get.ts
index b9cf34a..4d01d9c 100644
--- a/server/api/events/[id]/rsvp.get.ts
+++ b/server/api/events/[id]/rsvp.get.ts
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
 
   const rsvps = await prisma.guestRSVP.findMany({
     where: { eventId: id },
-    orderBy: { createdAt: 'asc' }
+    orderBy: { createdAt: 'asc' },
   })
 
   const volunteers = rsvps.filter(r => r.isVolunteer)
@@ -29,4 +29,4 @@ export default defineEventHandler(async (event) => {
     volunteers,
     attendees,
   }
-})
\ No newline at end of file
+})
diff --git a/server/api/events/[id]/rsvp.post.ts b/server/api/events/[id]/rsvp.post.ts
index c8d3f39..5c3d934 100644
--- a/server/api/events/[id]/rsvp.post.ts
+++ b/server/api/events/[id]/rsvp.post.ts
@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
   }
 
   const foundEvent = await prisma.event.findUnique({
-    where: { id }
+    where: { id },
   })
 
   if (!foundEvent) {
@@ -25,7 +25,7 @@ export default defineEventHandler(async (event) => {
       eventId: id,
       email: body.email.toLowerCase(),
       isVolunteer: body.isVolunteer ?? false,
-    }
+    },
   })
 
   if (existing) {
@@ -38,9 +38,9 @@ export default defineEventHandler(async (event) => {
       name: body.name.trim(),
       email: body.email.toLowerCase().trim(),
       isVolunteer: body.isVolunteer ?? false,
-    }
+    },
   })
 
   setResponseStatus(event, 201)
   return rsvp
-})
\ No newline at end of file
+})
diff --git a/server/api/volunteer-logs/index.get.ts b/server/api/volunteer-logs/index.get.ts
index 343937a..6135a9d 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,37 +12,36 @@ 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,
-    })
+    });
   }
-})
+});