feat: Mobile clinic locator

app/components/event/Modal.vue

@@ -27,19 +27,32 @@ watch(filesToUpload, async (newFiles) => {
     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)
-    })),
+    Array.from(newFiles).map(
+      file =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = e =>
+            resolve({
+              imageUrl: e.target.result,
+              fileName: file.name,
+            })
+          reader.readAsDataURL(file)
+        }),
+    ),
   )
   newEvent.value.eventAssets = previews
 })
 
 async function saveEvent() {
   // Validate required fields
-  if (!newEvent.value.title || !newEvent.value.startTime || !newEvent.value.endTime) {
-    alert('Please fill in all required fields (Title, Start Time, End Time)')
+  if (
+    !newEvent.value.title
+    || !newEvent.value.startTime
+    || !newEvent.value.endTime
+  ) {
+    alert(
+      'Please fill in all required fields (Title, Start Time, End Time)',
+    )
     return
   }
 
@@ -80,7 +93,10 @@ async function saveEvent() {
           console.log(`✅ Uploaded: ${file.name}`)
         }
         catch (uploadError) {
-          console.error(`❌ Failed to upload ${file.name}:`, uploadError)
+          console.error(
+            `❌ Failed to upload ${file.name}:`,
+            uploadError,
+          )
         }
       }
     }
@@ -236,7 +252,7 @@ function cancel() {
         :loading="isSaving"
         @click="saveEvent"
       >
-        {{ isSaving ? 'Creating...' : 'Create Event' }}
+        {{ isSaving ? "Creating..." : "Create Event" }}
       </UButton>
     </div>
   </div>

app/components/event/Tile.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 defineEmits(['add'])
-defineProps<{
-  title: string
+const props = defineProps<{
+  title?: string
   subtitle?: string
+  buttonType?: 'plus' | 'arrow'
+  eventId?: string
 }>()
+
+const iconName = computed(() =>
+  props.buttonType === 'arrow'
+    ? 'i-heroicons-arrow-right-20-solid'
+    : 'i-heroicons-plus',
+)
 </script>
 
 <template>
   <div
-    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"
+    class="flex items-center gap-4 rounded-[22px] border border-gray-800/70 dark:border-gray-700/60 bg-white/70 dark:bg-gray-900/60 backdrop-blur px-4 py-3 shadow-sm"
   >
     <!-- Square avatar -->
-    <div class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60" />
+    <div
+      class="h-12 w-12 rounded-2xl bg-gray-300/70 dark:bg-gray-600/60 border border-gray-800/60"
+    />
 
     <!-- Text lines -->
     <div class="flex-1">
@@ -25,14 +36,13 @@ defineProps<{
       </p>
     </div>
 
-    <!-- Plus button -->
+    <!-- Action button -->
     <button
-      class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60
-             hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
-      @click="$emit('add')"
+      class="grid place-items-center rounded-xl h-9 w-9 border border-gray-800/70 dark:border-gray-700/60 hover:bg-gray-100/70 dark:hover:bg-gray-800/70 transition"
+      @click="$emit('add', props.eventId)"
     >
       <UIcon
-        name="i-heroicons-plus"
+        :name="iconName"
         class="w-5 h-5"
       />
     </button>

app/pages/events/[id].vue

@@ -3,7 +3,6 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 import { ref, computed, onMounted } from 'vue'
 
 const route = useRoute()
-const router1 = useRouter()
 
 // Get the ID from the route params
 const eventId = route.params.id
@@ -13,7 +12,7 @@ const loading = ref(true)
 const notFound = ref(false)
 
 const isEditMode = ref(false)
-const editForm = ref({})
+const editForm = ref({ mobileClinic: false })
 
 // placeholder until we implement auth
 const admin = true
@@ -26,7 +25,10 @@ onMounted(async () => {
     // Fetch event from your backend API
     event.value = await $fetch(`/api/events/${eventId}`)
 
-    editForm.value = { ...event.value }
+    editForm.value = {
+      ...event.value,
+      mobileClinic: Boolean(event.value?.mobileClinicId),
+    }
 
     console.log('✅ Event loaded:', event.value)
     loading.value = false
@@ -74,7 +76,10 @@ const zoom = 15
 function toggleEditMode() {
   if (isEditMode.value) {
     // Cancel editing - reset form to original event data
-    editForm.value = { ...event.value }
+    editForm.value = {
+      ...event.value,
+      mobileClinic: Boolean(event.value?.mobileClinicId),
+    }
   }
   isEditMode.value = !isEditMode.value
 }
@@ -84,7 +89,7 @@ async function saveChanges() {
     console.log('💾 Saving changes...')
 
     // Update event via API
-    await $fetch(`/api/events/${event.value.id}`, {
+    const _updatedEvent = await $fetch(`/api/events/${event.value.id}`, {
       method: 'PATCH',
       body: {
         title: editForm.value.title,
@@ -95,6 +100,7 @@ async function saveChanges() {
         endTime: new Date(editForm.value.endTime).toISOString(),
         allowVolunteers: editForm.value.allowVolunteers,
         allowAttendees: editForm.value.allowAttendees,
+        mobileClinic: editForm.value.mobileClinic,
       },
     })
 
@@ -219,9 +225,9 @@ const fetchedItems = event.value?.eventAssets.map(
 
 const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
 
-// const backNavigate = computed(() => {
-//     return admin ? "/events/manage" : "/events";
-// });
+const backNavigate = computed(() => {
+  return admin ? '/events/manage' : '/events'
+})
 </script>
 
 <template>
@@ -277,7 +283,7 @@ const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
             icon="i-lucide-arrow-left"
             variant="ghost"
             class="text-brand4"
-            @click="router1.back()"
+            @click="navigateTo(backNavigate)"
           />
 
           <div
@@ -559,7 +565,8 @@ const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
                     Volunteer Sign-ups
                   </p>
                   <p class="text-sm text-gray-500">
-                    Allow people to volunteer for this event
+                    Allow people to volunteer for this
+                    event?
                   </p>
                 </div>
               </div>
@@ -586,7 +593,7 @@ const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
                     Attendee Registration
                   </p>
                   <p class="text-sm text-gray-500">
-                    Allow people to register as attendees
+                    Allow people to register as attendees?
                   </p>
                 </div>
               </div>
@@ -610,6 +617,44 @@ const items = (fetchedItems?.length || 0) > 0 ? fetchedItems : placeholders
                 />
               </label>
             </div>
+
+            <div
+              class="flex items-center justify-between p-4 bg-gray-50 rounded-xl"
+            >
+              <div class="flex items-center gap-3">
+                <UIcon
+                  name="i-lucide-ticket"
+                  class="w-5 h-5 text-brand4"
+                />
+                <div>
+                  <p class="font-medium text-gray-900">
+                    Mobile Clinic
+                  </p>
+                  <p class="text-sm text-gray-500">
+                    Will this event have a mobile clinic?
+                  </p>
+                </div>
+              </div>
+              <label
+                v-if="isEditMode"
+                class="flex items-center gap-2 cursor-pointer"
+              >
+                <UCheckbox
+                  v-model="editForm.mobileClinic"
+                  color="brand4"
+                />
+              </label>
+              <label
+                v-else
+                class="flex items-center gap-2"
+              >
+                <UCheckbox
+                  :model-value="Boolean(event.mobileClinicId)"
+                  color="brand4"
+                  disabled
+                />
+              </label>
+            </div>
           </div>
         </div>