From 658acda8280780422bba3f7cbf0a64fc653bf448 Mon Sep 17 00:00:00 2001
From: Ethan Chew <chew_ming_hong_ethan@s2019.ssts.edu.sg>
Date: Tue, 24 Oct 2023 18:55:39 +0800
Subject: [PATCH] fix: update name case

---
 components/admin/common/left-panel.vue       |  19 ++--
 components/admin/event/page.vue              |   5 +-
 components/admin/home/create-event-popup.vue |   2 +-
 components/admin/home/page.vue               |  19 ++--
 components/admin/home/update-event-popup.vue |   2 +-
 components/admin/members/page.vue            |   5 +-
 components/admin/settings/page.vue           |   5 +-
 components/app/events/page.vue               |  17 ++-
 components/app/home/membership-card.vue      |  19 ++--
 components/app/home/news.vue                 |  32 +++---
 components/app/home/page.vue                 |   9 +-
 components/app/profile/page.vue              | 113 +++++++++----------
 components/app/services/event/page.vue       |  76 ++++++-------
 components/app/services/event/scanner.vue    |   9 +-
 components/app/services/page.vue             |  75 ++++++------
 components/common/login-screen.vue           |  30 ++---
 package.json                                 |   1 +
 pages/admin/[...slug].vue                    |   9 +-
 pages/app/[...slug].vue                      |  37 +++---
 pages/guard/[...slug].vue                    |  15 ++-
 pages/pass/[admissionKey].vue                |  83 +++++++-------
 pnpm-lock.yaml                               |   9 ++
 22 files changed, 293 insertions(+), 298 deletions(-)

diff --git a/components/admin/common/left-panel.vue b/components/admin/common/left-panel.vue
index 7bc973c..bc4ac2c 100644
--- a/components/admin/common/left-panel.vue
+++ b/components/admin/common/left-panel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7Icon, f7List, f7ListItem, f7Page, f7Panel } from 'framework7-vue'
 import type { Router } from 'framework7/types'
 
 const props = defineProps<{
@@ -28,15 +27,15 @@ const menuLinks = [
 </script>
 
 <template>
-  <f7Panel left cover>
-    <f7Page>
-      <f7List menu-list strong-ios outline-ios>
-        <f7ListItem v-for="link in menuLinks" :key="link.path" :link="link.path" :selected="selectedPath === link.path" :title="link.title" @click="selectedPath = link.path">
+  <F7Panel left cover>
+    <F7Page>
+      <F7List menu-list strong-ios outline-ios>
+        <F7ListItem v-for="link in menuLinks" :key="link.path" :link="link.path" :selected="selectedPath === link.path" :title="link.title" @click="selectedPath = link.path">
           <template #media>
-            <f7Icon :md="link.icon" />
+            <F7Icon :md="link.icon" />
           </template>
-        </f7ListItem>
-      </f7List>
-    </f7Page>
-  </f7Panel>
+        </F7ListItem>
+      </F7List>
+    </F7Page>
+  </F7Panel>
 </template>
diff --git a/components/admin/event/page.vue b/components/admin/event/page.vue
index d9afcd9..e1c6e95 100644
--- a/components/admin/event/page.vue
+++ b/components/admin/event/page.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <f7Page>
+  <F7Page>
     event
-  </f7Page>
+  </F7Page>
 </template>
diff --git a/components/admin/home/create-event-popup.vue b/components/admin/home/create-event-popup.vue
index 5c59a67..9fd1f0b 100644
--- a/components/admin/home/create-event-popup.vue
+++ b/components/admin/home/create-event-popup.vue
@@ -87,7 +87,7 @@ async function handleSubmit() {
             </UFormGroup>
           </div>
 
-          <UButton v-if="!newEventId" type="submit" color="green" :loading="mutation.isLoading.value">
+          <UButton v-if="!newEventId" type="submit" color="green" :loading="mutation.isPending.value">
             Create Event
           </UButton>
           <p v-if="!inputError">
diff --git a/components/admin/home/page.vue b/components/admin/home/page.vue
index f192faa..2a422ce 100644
--- a/components/admin/home/page.vue
+++ b/components/admin/home/page.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7Link, f7NavLeft, f7NavTitle, f7Navbar, f7Page } from 'framework7-vue'
 import type { Router } from 'framework7/types'
 
 const props = defineProps<{
@@ -16,15 +15,15 @@ const showForbidden = computed(() => {
 </script>
 
 <template>
-  <f7Page>
-    <f7Navbar>
-      <f7NavLeft v-if="!showForbidden">
-        <f7Link panel-open="left" icon-ios="f7:menu" icon-md="material:menu" />
-      </f7NavLeft>
-      <f7NavTitle>
+  <F7Page>
+    <F7Navbar>
+      <F7NavLeft v-if="!showForbidden">
+        <F7Link panel-open="left" icon-ios="f7:menu" icon-md="material:menu" />
+      </F7NavLeft>
+      <F7NavTitle>
         SSTAA Admin
-      </f7NavTitle>
-    </f7Navbar>
+      </F7NavTitle>
+    </F7Navbar>
 
     <LazyAdminHomeForbidden v-if="showForbidden" />
 
@@ -32,5 +31,5 @@ const showForbidden = computed(() => {
       <AdminCommonLeftPanel :route="props.f7route" />
       <AdminHomeEventsTable />
     </template>
-  </f7Page>
+  </F7Page>
 </template>
diff --git a/components/admin/home/update-event-popup.vue b/components/admin/home/update-event-popup.vue
index 224ebc1..5c9642f 100644
--- a/components/admin/home/update-event-popup.vue
+++ b/components/admin/home/update-event-popup.vue
@@ -19,7 +19,7 @@ const state = reactive({
 const changedEvent = ref<Partial<Event>>({})
 
 const mutation = useMutation({
-  mutationFn: (id: string) => $api(`/api/event/${id}`, {
+  mutationFn: (id: string) => $api(`/api/event/${id}` as '/api/event/:id', {
     method: 'PUT',
     body: changedEvent.value,
   }),
diff --git a/components/admin/members/page.vue b/components/admin/members/page.vue
index 945a5c4..00f7943 100644
--- a/components/admin/members/page.vue
+++ b/components/admin/members/page.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <f7Page>
+  <F7Page>
     Imagine a page here
-  </f7Page>
+  </F7Page>
 </template>
diff --git a/components/admin/settings/page.vue b/components/admin/settings/page.vue
index 945a5c4..00f7943 100644
--- a/components/admin/settings/page.vue
+++ b/components/admin/settings/page.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <f7Page>
+  <F7Page>
     Imagine a page here
-  </f7Page>
+  </F7Page>
 </template>
diff --git a/components/app/events/page.vue b/components/app/events/page.vue
index 46f9df0..bf990c6 100644
--- a/components/app/events/page.vue
+++ b/components/app/events/page.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <f7Page>
-    <f7Navbar large transparent :sliding="false">
-      <f7NavTitle sliding>
+  <F7Page>
+    <F7Navbar large transparent :sliding="false">
+      <F7NavTitle sliding>
         Events & Bookings
-      </f7NavTitle>
-      <f7NavTitleLarge>
+      </F7NavTitle>
+      <F7NavTitleLarge>
         Events & Bookings
-      </f7NavTitleLarge>
-    </f7Navbar>
-  </f7Page>
+      </F7NavTitleLarge>
+    </F7Navbar>
+  </F7Page>
 </template>
diff --git a/components/app/home/membership-card.vue b/components/app/home/membership-card.vue
index c8f8b0f..de5223e 100644
--- a/components/app/home/membership-card.vue
+++ b/components/app/home/membership-card.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7Card, f7CardContent, f7CardFooter, f7List, f7SkeletonBlock } from 'framework7-vue'
 import type { User } from '~/shared/types'
 
 const { data: user, isLoading: userIsLoading } = useUser()
@@ -15,12 +14,12 @@ const membershipGradient: Record<Exclude<User['memberType'], null>, string> = {
 
 <template>
   <div>
-    <f7List v-if="userIsLoading" inset class="h-64">
-      <f7SkeletonBlock class="rounded-md" effect="fade" height="100%" />
-    </f7List>
+    <F7List v-if="userIsLoading" inset class="h-64">
+      <F7SkeletonBlock class="rounded-md" effect="fade" height="100%" />
+    </F7List>
 
-    <f7Card v-else-if="user" class="m-0!">
-      <f7CardContent class="h-44 rounded-[16px]" valign="top" :class="membershipGradient[user.memberType!]">
+    <F7Card v-else-if="user" class="m-0!">
+      <F7CardContent class="h-44 rounded-[16px]" valign="top" :class="membershipGradient[user.memberType!]">
         <div class="flex flex-col w-full h-full text-white dark:text-inherit">
           <div class="flex flex-col flex-1">
             <span class="font-bold text-3xl">
@@ -40,14 +39,14 @@ const membershipGradient: Record<Exclude<User['memberType'], null>, string> = {
             </span>
           </div>
         </div>
-      </f7CardContent>
-      <f7CardFooter>
+      </F7CardContent>
+      <F7CardFooter>
         <span>
           <strong>Coming back?</strong>
           <br>
           <span>Tap on this card and present it to the security at the front gate.</span>
         </span>
-      </f7CardFooter>
-    </f7Card>
+      </F7CardFooter>
+    </F7Card>
   </div>
 </template>
diff --git a/components/app/home/news.vue b/components/app/home/news.vue
index 90c0e1d..dba1323 100644
--- a/components/app/home/news.vue
+++ b/components/app/home/news.vue
@@ -1,43 +1,41 @@
 <script setup lang="ts">
-import { f7BlockTitle, f7Button, f7Card, f7CardContent, f7CardFooter, f7CardHeader, f7List, f7SkeletonBlock } from 'framework7-vue'
-
 const { data: news, isLoading: newsIsLoading } = useNewsArticles()
 </script>
 
 <template>
   <div>
-    <f7BlockTitle large>
+    <F7BlockTitle large>
       What's Happening
-    </f7BlockTitle>
+    </F7BlockTitle>
 
     <div class="space-y-3">
-      <f7List v-if="newsIsLoading" inset>
+      <F7List v-if="newsIsLoading" inset>
         <div class="space-y-3">
-          <f7SkeletonBlock v-for="n in 3" :key="n" class="rounded-md" effect="fade" height="10rem" />
+          <F7SkeletonBlock v-for="n in 3" :key="n" class="rounded-md" effect="fade" height="10rem" />
         </div>
-      </f7List>
+      </F7List>
       <template v-else-if="news">
         <span v-if="news.length === 0" class="mt-4 opacity-80">
           Nothing exciting is happening right now.
           <br>
           Check back later!
         </span>
-        <f7Card v-for="article in news" :key="article.id" class="m-0!">
-          <f7CardHeader class="h-44 rounded-[16px]! overflow-hidden bg-center bg-cover relative" valign="bottom" :style="`background-image: url(${article.heroImageUrl})`">
+        <F7Card v-for="article in news" :key="article.id" class="m-0!">
+          <F7CardHeader class="h-44 rounded-[16px]! overflow-hidden bg-center bg-cover relative" valign="bottom" :style="`background-image: url(${article.heroImageUrl})`">
             <div class="absolute inset-0 bg-gradient-to-b from-transparent dark:to-black/70 to-white/70" />
             <span class="z-10 font-semibold">
               {{ article.title }}
             </span>
-          </f7CardHeader>
-          <f7CardContent>
+          </F7CardHeader>
+          <F7CardContent>
             {{ article.description }}
-          </f7CardContent>
-          <f7CardFooter v-if="article.ctaTitle && article.ctaUrl">
-            <f7Button tonal :href="article.ctaUrl" external target="_blank">
+          </F7CardContent>
+          <F7CardFooter v-if="article.ctaTitle && article.ctaUrl">
+            <F7Button tonal :href="article.ctaUrl" external target="_blank">
               {{ article.ctaTitle }}
-            </f7Button>
-          </f7CardFooter>
-        </f7Card>
+            </F7Button>
+          </F7CardFooter>
+        </F7Card>
       </template>
     </div>
   </div>
diff --git a/components/app/home/page.vue b/components/app/home/page.vue
index cd4fe20..2755362 100644
--- a/components/app/home/page.vue
+++ b/components/app/home/page.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { f7List, f7Page } from 'framework7-vue'
 </script>
 
 <template>
-  <f7Page no-navbar>
-    <f7List class="space-y-8">
+  <F7Page no-navbar>
+    <F7List class="space-y-8">
       <div>
         <AppHomeMembershipCard />
       </div>
@@ -12,6 +11,6 @@ import { f7List, f7Page } from 'framework7-vue'
       <div>
         <LazyAppHomeNews />
       </div>
-    </f7List>
-  </f7Page>
+    </F7List>
+  </F7Page>
 </template>
diff --git a/components/app/profile/page.vue b/components/app/profile/page.vue
index 522e03c..1205d0f 100644
--- a/components/app/profile/page.vue
+++ b/components/app/profile/page.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7BlockTitle, f7Link, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavRight, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7Popup, f7View } from 'framework7-vue'
 import dayjs from 'dayjs'
 import { devDependencies } from '~/package.json'
 
@@ -16,89 +15,89 @@ const { mutate: userSignOutMutate } = useUserSignOutMutation()
 </script>
 
 <template>
-  <f7Page>
-    <f7Navbar large transparent :sliding="false">
-      <f7NavTitle sliding>
+  <F7Page>
+    <F7Navbar large transparent :sliding="false">
+      <F7NavTitle sliding>
         Profile
-      </f7NavTitle>
-      <f7NavTitleLarge>
+      </F7NavTitle>
+      <F7NavTitleLarge>
         Profile
-      </f7NavTitleLarge>
-    </f7Navbar>
+      </F7NavTitleLarge>
+    </F7Navbar>
 
-    <f7List v-if="user">
-      <f7ListInput label="Name" type="text" placeholder="Your name" disabled :value="user.name" />
-      <f7ListInput label="Email" type="Email" placeholder="Your email" disabled :value="user.email" />
-      <f7ListInput label="Graduation year" placeholder="Your graduation year" disabled :value="graduationYear" />
-      <f7ListItem>
+    <F7List v-if="user">
+      <F7ListInput label="Name" type="text" placeholder="Your name" disabled :value="user.name" />
+      <F7ListInput label="Email" type="Email" placeholder="Your email" disabled :value="user.email" />
+      <F7ListInput label="Graduation year" placeholder="Your graduation year" disabled :value="graduationYear" />
+      <F7ListItem>
         <span class="opacity-80 text-xs">
           To update this information, contact us at <a href="mailto:app@sstaa.org">app@sstaa.org</a>
         </span>
-      </f7ListItem>
-    </f7List>
+      </F7ListItem>
+    </F7List>
 
-    <f7List inset strong>
-      <f7ListButton color="red" @click="userSignOutMutate()">
+    <F7List inset strong>
+      <F7ListButton color="red" @click="userSignOutMutate()">
         Sign out
-      </f7ListButton>
-      <f7ListButton color="red">
+      </F7ListButton>
+      <F7ListButton color="red">
         Delete and unlink my account
-      </f7ListButton>
-    </f7List>
+      </F7ListButton>
+    </F7List>
 
-    <f7List inset strong>
-      <f7ListButton popup-open="#acknowledgements">
+    <F7List inset strong>
+      <F7ListButton popup-open="#acknowledgements">
         Acknowledgements
-      </f7ListButton>
-    </f7List>
+      </F7ListButton>
+    </F7List>
 
-    <f7List>
-      <f7ListItem class="opacity-80 text-sm">
+    <F7List>
+      <F7ListItem class="opacity-80 text-sm">
         v{{ appConfig.buildInfo.version }}
         <br>
         <br>
         Built on {{ dayjs(appConfig.buildInfo.time).format('DD/MM/YYYY HH:mm') }}
         <br>
         Commit: {{ appConfig.buildInfo.shortCommit }}
-      </f7ListItem>
-    </f7List>
+      </F7ListItem>
+    </F7List>
 
-    <f7Popup id="acknowledgements" push>
-      <f7View>
-        <f7Page>
-          <f7Navbar title="Acknowledgements" large transparent>
-            <f7NavRight>
-              <f7Link popup-close>
+    <F7Popup id="acknowledgements" push>
+      <F7View>
+        <F7Page>
+          <F7Navbar title="Acknowledgements" large transparent>
+            <F7NavRight>
+              <F7Link popup-close>
                 Close
-              </f7Link>
-            </f7NavRight>
-          </f7Navbar>
+              </F7Link>
+            </F7NavRight>
+          </F7Navbar>
 
-          <f7BlockTitle>Open source</f7BlockTitle>
-          <f7List inset strong>
-            <f7ListItem
+          <F7BlockTitle>Open source</F7BlockTitle>
+          <F7List inset strong>
+            <F7ListItem
               target="_blank" link="https://github.com/sstalumniassociation/web" external
               title="View on GitHub"
             />
-          </f7List>
+          </F7List>
 
-          <f7BlockTitle>Development team</f7BlockTitle>
-          <f7List inset strong>
-            <f7ListItem target="_blank" link="https://github.com/qin-guan" external title="Qin Guan" />
-            <f7ListItem target="_blank" link="https://github.com/jiachenyee" external title="Jia Chen" />
-            <f7ListItem target="_blank" link="https://github.com/arashnrim" external title="Arash" />
-            <f7ListItem target="_blank" link="https://github.com/Ethan-Chew" external title="Ethan" />
-          </f7List>
+          <F7BlockTitle>Development team</F7BlockTitle>
+          <F7List inset strong>
+            <F7ListItem target="_blank" link="https://github.com/qin-guan" external title="Qin Guan" />
+            <F7ListItem target="_blank" link="https://github.com/jiachenyee" external title="Jia Chen" />
+            <F7ListItem target="_blank" link="https://github.com/arashnrim" external title="Arash" />
+            <F7ListItem target="_blank" link="https://github.com/Ethan-Chew" external title="Ethan" />
+          </F7List>
 
-          <f7BlockTitle>Packages & libraries</f7BlockTitle>
-          <f7List inset strong>
-            <f7ListItem
+          <F7BlockTitle>Packages & libraries</F7BlockTitle>
+          <F7List inset strong>
+            <F7ListItem
               v-for="dependency in dependencies" :key="dependency" target="_blank"
               :link="`https://npmjs.com/package/${dependency}`" external :title="dependency"
             />
-          </f7List>
-        </f7Page>
-      </f7View>
-    </f7Popup>
-  </f7Page>
+          </F7List>
+        </F7Page>
+      </F7View>
+    </F7Popup>
+  </F7Page>
 </template>
diff --git a/components/app/services/event/page.vue b/components/app/services/event/page.vue
index fb4faeb..dd8e954 100644
--- a/components/app/services/event/page.vue
+++ b/components/app/services/event/page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { f7, f7BlockTitle, f7Button, f7Card, f7Chip, f7Link, f7List, f7ListItem, f7NavRight, f7NavTitle, f7Navbar, f7Page, f7Searchbar, f7SkeletonBlock, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton } from 'framework7-vue'
+import { f7 } from 'framework7-vue'
 
 import type { VirtualList } from 'framework7/types'
 import type { UnwrapRef } from 'vue'
@@ -95,31 +95,31 @@ function renderExternal(_: unknown, data: VirtualList.VirtualListRenderData) {
 </script>
 
 <template>
-  <f7Page>
-    <f7Navbar>
-      <f7NavTitle>SSTAARS</f7NavTitle>
-      <f7NavRight>
-        <f7Link popup-close>
+  <F7Page>
+    <F7Navbar>
+      <F7NavTitle>SSTAARS</F7NavTitle>
+      <F7NavRight>
+        <F7Link popup-close>
           Close
-        </f7Link>
-      </f7NavRight>
-      <f7Subnavbar :inner="false">
-        <f7Searchbar search-container=".virtual-list" search-item="li" search-in=".item-title" />
-      </f7Subnavbar>
-    </f7Navbar>
-
-    <f7List v-if="eventIsLoading || checkedInUsersListPending" inset>
+        </F7Link>
+      </F7NavRight>
+      <F7Subnavbar :inner="false">
+        <F7Searchbar search-container=".virtual-list" search-item="li" search-in=".item-title" />
+      </F7Subnavbar>
+    </F7Navbar>
+
+    <F7List v-if="eventIsLoading || checkedInUsersListPending" inset>
       <div class="space-y-2">
-        <f7SkeletonBlock v-for="n in 2" :key="n" :height="`${n * 100}px`" class="rounded-md" effect="fade" />
+        <F7SkeletonBlock v-for="n in 2" :key="n" :height="`${n * 100}px`" class="rounded-md" effect="fade" />
       </div>
-    </f7List>
+    </F7List>
 
     <template v-else-if="event">
-      <f7BlockTitle large>
+      <F7BlockTitle large>
         {{ event.name }}
-      </f7BlockTitle>
+      </F7BlockTitle>
 
-      <f7Card>
+      <F7Card>
         <template #header>
           <div class="flex justify-between w-full">
             <div>
@@ -130,21 +130,21 @@ function renderExternal(_: unknown, data: VirtualList.VirtualListRenderData) {
             </div>
           </div>
         </template>
-      </f7Card>
+      </F7Card>
 
-      <f7List inset>
-        <f7Button tonal @click="state.scannerOpened = !state.scannerOpened">
+      <F7List inset>
+        <F7Button tonal @click="state.scannerOpened = !state.scannerOpened">
           {{ state.scannerOpened ? 'Close' : 'Open' }} scanner
-        </f7Button>
-      </f7List>
+        </F7Button>
+      </F7List>
 
       <div v-if="state.scannerOpened">
         <AppServicesEventScanner @scan="onScan" />
       </div>
 
-      <f7BlockTitle>Attendees</f7BlockTitle>
+      <F7BlockTitle>Attendees</F7BlockTitle>
 
-      <f7List
+      <F7List
         strong inset virtual-list :virtual-list-params="{
           items: attendees,
           searchAll,
@@ -153,34 +153,34 @@ function renderExternal(_: unknown, data: VirtualList.VirtualListRenderData) {
         }"
       >
         <ul>
-          <f7ListItem
+          <F7ListItem
             v-for="attendee in attendeeVirtualListData.items" :key="attendee.admissionKey" swipeout
             :style="`top: ${attendeeVirtualListData.topPosition}px`" :virtual-list-index="attendee.index"
           >
-            <f7SwipeoutActions right>
-              <f7SwipeoutButton
+            <F7SwipeoutActions right>
+              <F7SwipeoutButton
                 confirm-text="Are you sure?"
                 :color="checkedInUsers[attendee.admissionKey] ? 'red' : 'green'" @click="toggle(attendee.admissionKey)"
               >
                 {{ checkedInUsers[attendee.admissionKey] ? 'Check out' : 'Check in' }}
-              </f7SwipeoutButton>
-            </f7SwipeoutActions>
+              </F7SwipeoutButton>
+            </F7SwipeoutActions>
 
             <template #title>
               {{ attendee.name }}
             </template>
 
             <template #after>
-              <f7Chip v-if="checkedInUsers[attendee.admissionKey]" color="green">
+              <F7Chip v-if="checkedInUsers[attendee.admissionKey]" color="green">
                 {{ formattedDate(checkedInUsers[attendee.admissionKey]) }}
-              </f7Chip>
-              <f7Chip v-else color="red">
+              </F7Chip>
+              <F7Chip v-else color="red">
                 Not checked in
-              </f7Chip>
+              </F7Chip>
             </template>
-          </f7ListItem>
+          </F7ListItem>
         </ul>
-      </f7List>
+      </F7List>
     </template>
-  </f7Page>
+  </F7Page>
 </template>
diff --git a/components/app/services/event/scanner.vue b/components/app/services/event/scanner.vue
index 6ef3184..c9bb88e 100644
--- a/components/app/services/event/scanner.vue
+++ b/components/app/services/event/scanner.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
-import { f7List, f7ListItem } from 'framework7-vue'
 import { Html5Qrcode } from 'html5-qrcode'
 
 const emit = defineEmits(['scan'])
@@ -41,15 +40,15 @@ watchEffect((onCleanup) => {
 
 <template>
   <div>
-    <f7List inset>
-      <f7ListItem v-if="cameras" title="Camera" smart-select :smart-select-params="{ openIn: 'popover' }">
+    <F7List inset>
+      <F7ListItem v-if="cameras" title="Camera" smart-select :smart-select-params="{ openIn: 'popover' }">
         <select v-model="state.selectedCameraId" name="camera">
           <option v-for="{ id, label } in cameras" :key="id" :value="id">
             {{ label }}
           </option>
         </select>
-      </f7ListItem>
-    </f7List>
+      </F7ListItem>
+    </F7List>
 
     <div id="reader" />
   </div>
diff --git a/components/app/services/page.vue b/components/app/services/page.vue
index 27f2a30..827d1cb 100644
--- a/components/app/services/page.vue
+++ b/components/app/services/page.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { FetchError } from 'ofetch'
-import { f7, f7Block, f7BlockTitle, f7Button, f7Icon, f7List, f7ListButton, f7ListInput, f7ListItem, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page, f7PageContent, f7Sheet } from 'framework7-vue'
+import { f7 } from 'framework7-vue'
+import type { EventWithAttendees } from '~/shared/types'
 
 const sstaarsStore = useSstaarsStore()
 
@@ -16,7 +17,7 @@ async function click() {
 
   state.pending = true
   try {
-    const data = await $api(`/api/event/${state.eventId}`)
+    const data: EventWithAttendees = await $api(`/api/event/${state.eventId}`)
     sstaarsStore.value.previousEvents[data.id] = data.name
     state.sheetOpened = false
 
@@ -44,37 +45,37 @@ async function openEvent(id: string) {
 </script>
 
 <template>
-  <f7Page>
-    <f7Navbar large transparent :sliding="false">
-      <f7NavTitle sliding>
+  <F7Page>
+    <F7Navbar large transparent :sliding="false">
+      <F7NavTitle sliding>
         Alumni Services
-      </f7NavTitle>
-      <f7NavTitleLarge>
+      </F7NavTitle>
+      <F7NavTitleLarge>
         Alumni Services
-      </f7NavTitleLarge>
-    </f7Navbar>
+      </F7NavTitleLarge>
+    </F7Navbar>
 
-    <f7List v-if="$growthbook.isOn('sstaars')" strong inset>
-      <f7ListItem class="font-semibold">
+    <F7List v-if="$growthbook.isOn('sstaars')" strong inset>
+      <F7ListItem class="font-semibold">
         SSTAA Registration System (SSTAARS)
-      </f7ListItem>
-      <f7ListItem>
+      </F7ListItem>
+      <F7ListItem>
         Helping out with an SSTAA event? Access the Event Registration System here.
-      </f7ListItem>
-      <f7ListButton link="/halp" class="custom-card" @click="state.sheetOpened = true">
+      </F7ListItem>
+      <F7ListButton link="/halp" class="custom-card" @click="state.sheetOpened = true">
         <span>
           Open
         </span>
-        <f7Icon material="chevron_right" />
-      </f7ListButton>
-    </f7List>
+        <F7Icon material="chevron_right" />
+      </F7ListButton>
+    </F7List>
 
-    <f7Sheet v-model:opened="state.sheetOpened" style="height: auto" swipe-to-close>
-      <f7PageContent>
-        <f7BlockTitle large>
+    <F7Sheet v-model:opened="state.sheetOpened" style="height: auto" swipe-to-close>
+      <F7PageContent>
+        <F7BlockTitle large>
           SSTAARS
-        </f7BlockTitle>
-        <f7Block>
+        </F7BlockTitle>
+        <F7Block>
           <p>
             SSTAARS is intended for volunteers helping with SST Alumni Association Event Registration.
           </p>
@@ -84,30 +85,30 @@ async function openEvent(id: string) {
           <p>
             Please reach out to your SSTAA contact if they did not provide you with an access code.
           </p>
-        </f7Block>
+        </F7Block>
 
-        <f7List>
-          <f7ListInput v-model:value="state.eventId" placeholder="Access code" />
+        <F7List>
+          <F7ListInput v-model:value="state.eventId" placeholder="Access code" />
           <div class="m-4">
-            <f7Button large fill preloader :loading="state.pending" @click="click">
+            <F7Button large fill preloader :loading="state.pending" @click="click">
               Continue
-            </f7Button>
+            </F7Button>
           </div>
-        </f7List>
+        </F7List>
 
-        <f7BlockTitle>
+        <F7BlockTitle>
           My events
-        </f7BlockTitle>
-        <f7List inset strong>
+        </F7BlockTitle>
+        <F7List inset strong>
           <span v-if="Object.keys(sstaarsStore.previousEvents).length === 0" class="opacity-80">
             No previous events.
           </span>
 
-          <f7ListItem v-for="name, id in sstaarsStore.previousEvents" :key="id" :title="name" @click="openEvent(id)" />
-        </f7List>
-      </f7PageContent>
-    </f7Sheet>
-  </f7Page>
+          <F7ListItem v-for="name, id in sstaarsStore.previousEvents" :key="id" :title="name" @click="openEvent(id)" />
+        </F7List>
+      </F7PageContent>
+    </F7Sheet>
+  </F7Page>
 </template>
 
 <style scoped>
diff --git a/components/common/login-screen.vue b/components/common/login-screen.vue
index fe1b911..6cef63b 100644
--- a/components/common/login-screen.vue
+++ b/components/common/login-screen.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { FetchError } from 'ofetch'
 import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth'
-import { f7, f7Button, f7List, f7ListInput, f7LoginScreen, f7LoginScreenTitle, f7Page } from 'framework7-vue'
+import { f7 } from 'framework7-vue'
 import { FirebaseError } from 'firebase/app'
 
 const opened = defineModel<boolean>('opened')
@@ -123,31 +123,31 @@ function handleFirebaseError(err: FirebaseError) {
 </script>
 
 <template>
-  <f7LoginScreen v-model:opened="opened">
-    <f7Page login-screen>
-      <f7LoginScreenTitle>Sign in to SSTAA</f7LoginScreenTitle>
-      <f7List form @submit.prevent="login">
-        <f7ListInput
+  <F7LoginScreen v-model:opened="opened">
+    <F7Page login-screen>
+      <F7LoginScreenTitle>Sign in to SSTAA</F7LoginScreenTitle>
+      <F7List form @submit.prevent="login">
+        <F7ListInput
           v-model:value="state.email" label="Email" type="email" placeholder="Your email address"
           validate required
         />
         <template v-if="state.accountLinked !== null">
-          <f7ListInput
+          <F7ListInput
             v-model:value="state.password" validate label="Password" type="password" placeholder="Your password"
             required
           />
-          <f7ListInput
+          <F7ListInput
             v-if="state.accountLinked === false" v-model:value="state.confirmPassword" validate
             label="Confirm password" type="password" placeholder="Confirm password" required
           />
         </template>
 
-        <f7List inset>
-          <f7Button type="submit" preloader :loading="state.pending" :disabled="state.pending">
+        <F7List inset>
+          <F7Button type="submit" preloader :loading="state.pending" :disabled="state.pending">
             {{ !state.accountLinked ? 'Continue' : 'Login' }}
-          </f7Button>
-        </f7List>
-      </f7List>
-    </f7Page>
-  </f7LoginScreen>
+          </F7Button>
+        </F7List>
+      </F7List>
+    </F7Page>
+  </F7LoginScreen>
 </template>
diff --git a/package.json b/package.json
index 10aea26..d450566 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@tanstack/vue-query": "^5.0.4",
     "@ts-rest/core": "^3.30.4",
     "@ts-rest/vue-query": "^3.30.4",
+    "@types/papaparse": "^5.3.10",
     "@vite-pwa/assets-generator": "^0.0.10",
     "@vite-pwa/nuxt": "^0.1.1",
     "@vueuse/core": "^10.5.0",
diff --git a/pages/admin/[...slug].vue b/pages/admin/[...slug].vue
index cf73394..966aefb 100644
--- a/pages/admin/[...slug].vue
+++ b/pages/admin/[...slug].vue
@@ -8,7 +8,6 @@ import Framework7 from 'framework7/lite-bundle'
 
 // @ts-expect-error Missing types
 import Framework7Vue from 'framework7-vue/bundle'
-import { f7App, f7View } from 'framework7-vue'
 
 import { useIsCurrentUserLoaded } from 'vuefire'
 import { AdminHomePage, AdminMembersPage } from '#components'
@@ -72,8 +71,8 @@ watch([authLoaded, auth], (values) => {
 
 <template>
   <VitePwaManifest />
-  <f7App name="SSTAA" theme="md" dark-mode :routes="appRoutes">
-    <f7View
+  <F7App name="SSTAA" theme="md" dark-mode :routes="appRoutes">
+    <F7View
       main
       class="safe-areas"
       :url="route.path"
@@ -82,6 +81,6 @@ watch([authLoaded, auth], (values) => {
       preload-previous-page
     >
       <CommonLoginScreen v-model:opened="state.showLoginScreen" />
-    </f7View>
-  </f7App>
+    </F7View>
+  </F7App>
 </template>
diff --git a/pages/app/[...slug].vue b/pages/app/[...slug].vue
index 2a80481..4acef26 100644
--- a/pages/app/[...slug].vue
+++ b/pages/app/[...slug].vue
@@ -8,7 +8,6 @@ import Framework7 from 'framework7/lite-bundle'
 
 // @ts-expect-error Missing types
 import Framework7Vue from 'framework7-vue/bundle'
-import { f7App, f7Link, f7Toolbar, f7View, f7Views } from 'framework7-vue'
 
 import { useIsCurrentUserLoaded } from 'vuefire'
 import { AppHomePage, AppServicesEventPage } from '#components'
@@ -79,8 +78,8 @@ watch([authLoaded, auth], (values) => {
 
 <template>
   <VitePwaManifest />
-  <f7App name="SSTAA" theme="md" :dark-mode="dark" :routes="appRoutes">
-    <f7Views
+  <F7App name="SSTAA" theme="md" :dark-mode="dark" :routes="appRoutes">
+    <F7Views
       tabs
       class="safe-areas"
       :url="route.path"
@@ -90,45 +89,45 @@ watch([authLoaded, auth], (values) => {
     >
       <CommonLoginScreen v-model:opened="state.showLoginScreen" />
 
-      <f7Toolbar position="bottom" tabbar icons>
-        <f7Link
+      <F7Toolbar position="bottom" tabbar icons>
+        <F7Link
           tab-link="#home"
           tab-link-active
           text="Home"
           icon-md="material:home"
         />
-        <f7Link
+        <F7Link
           tab-link="#services"
           text="Services"
           icon-md="material:sparkle"
         />
-        <f7Link
+        <F7Link
           tab-link="#events"
           text="Events"
           icon-md="material:events"
         />
-        <f7Link
+        <F7Link
           tab-link="#profile"
           text="Profile"
           icon-md="material:account_circle"
         />
-      </f7Toolbar>
+      </F7Toolbar>
 
-      <f7View id="home" tab tab-active>
+      <F7View id="home" tab tab-active>
         <AppHomePage />
-      </f7View>
+      </F7View>
 
-      <f7View id="services" tab>
+      <F7View id="services" tab>
         <AppServicesPage />
-      </f7View>
+      </F7View>
 
-      <f7View id="events" tab>
+      <F7View id="events" tab>
         <AppEventsPage />
-      </f7View>
+      </F7View>
 
-      <f7View id="profile" tab>
+      <F7View id="profile" tab>
         <AppProfilePage />
-      </f7View>
-    </f7Views>
-  </f7App>
+      </F7View>
+    </F7Views>
+  </F7App>
 </template>
diff --git a/pages/guard/[...slug].vue b/pages/guard/[...slug].vue
index af858d4..8db0c78 100644
--- a/pages/guard/[...slug].vue
+++ b/pages/guard/[...slug].vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7App, f7Navbar, f7Page, f7View } from 'framework7-vue'
 import 'framework7/css/bundle'
 import 'framework7-icons/css/framework7-icons.css'
 import 'material-icons/iconfont/material-icons.css'
@@ -17,8 +16,8 @@ const route = useRoute()
 </script>
 
 <template>
-  <f7App name="SSTAA Guard House Check Point" theme="md" :dark-mode="dark">
-    <f7View
+  <F7App name="SSTAA Guard House Check Point" theme="md" :dark-mode="dark">
+    <F7View
       main
       class="safe-areas"
       :url="route.path"
@@ -26,9 +25,9 @@ const route = useRoute()
       ios-swipe-back
       preload-previous-page
     >
-      <f7Page>
-        <f7Navbar title="SSTAA Guard House Check Point" />
-      </f7Page>
-    </f7View>
-  </f7App>
+      <F7Page>
+        <F7Navbar title="SSTAA Guard House Check Point" />
+      </F7Page>
+    </F7View>
+  </F7App>
 </template>
diff --git a/pages/pass/[admissionKey].vue b/pages/pass/[admissionKey].vue
index f7624a6..137a01f 100644
--- a/pages/pass/[admissionKey].vue
+++ b/pages/pass/[admissionKey].vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { f7AccordionContent, f7App, f7Block, f7BlockTitle, f7Button, f7List, f7ListItem, f7Navbar, f7Page, f7SkeletonBlock, f7View } from 'framework7-vue'
 import 'framework7/css/bundle'
 import 'framework7-icons/css/framework7-icons.css'
 import 'material-icons/iconfont/material-icons.css'
@@ -25,82 +24,82 @@ const qrcode = useQRCode(() => admission.value?.body.admissionKey ?? '', {
 </script>
 
 <template>
-  <f7App theme="md">
-    <f7View>
-      <f7Page>
-        <f7Navbar title="SST Alumni Association Passes" />
+  <F7App theme="md">
+    <F7View>
+      <F7Page>
+        <F7Navbar title="SST Alumni Association Passes" />
 
         <div v-if="admissionIsLoading">
-          <f7List inset class="flex flex-gap-4 flex-col">
-            <f7SkeletonBlock height="100px" class="rounded-md!" />
-            <f7SkeletonBlock height="200px" class="rounded-md!" />
-            <f7SkeletonBlock height="300px" class="rounded-md!" />
-          </f7List>
+          <F7List inset class="flex flex-gap-4 flex-col">
+            <F7SkeletonBlock height="100px" class="rounded-md!" />
+            <F7SkeletonBlock height="200px" class="rounded-md!" />
+            <F7SkeletonBlock height="300px" class="rounded-md!" />
+          </F7List>
         </div>
 
         <div v-else-if="error">
-          <f7Block class="flex flex-col items-start">
-            <f7BlockTitle large>
+          <F7Block class="flex flex-col items-start">
+            <F7BlockTitle large>
               Not found :/
-            </f7BlockTitle>
+            </F7BlockTitle>
             <span class="text-lg">
               Your pass was not found.
               <br>
               That's all we know.
             </span>
-            <f7Button href="/app" external fill class="mt-10!">
+            <F7Button href="/app" external fill class="mt-10!">
               Return to app
-            </f7Button>
-          </f7Block>
+            </F7Button>
+          </F7Block>
         </div>
 
         <div v-else-if="admission">
-          <f7BlockTitle>
+          <F7BlockTitle>
             Pass info
-          </f7BlockTitle>
-          <f7Block strong inset>
+          </F7BlockTitle>
+          <F7Block strong inset>
             <p class="font-semibold">
               Event name
             </p>
             <p>
               {{ admission?.body.event.name }}
             </p>
-          </f7Block>
+          </F7Block>
 
-          <f7BlockTitle>
+          <F7BlockTitle>
             QR code
-          </f7BlockTitle>
-          <f7Block>
+          </F7BlockTitle>
+          <F7Block>
             <div class="w-full flex flex-col items-center">
               <img :src="qrcode" alt="QR Code" class="max-w-[200px]">
               <span>{{ admission?.body.admissionKey }}</span>
             </div>
-          </f7Block>
+          </F7Block>
 
-          <f7BlockTitle>FAQs</f7BlockTitle>
-          <f7List strong outline-ios dividers-ios inset-md accordion-list>
-            <f7ListItem accordion-item title="What do I do with this QR code?">
-              <f7AccordionContent>
-                <f7Block>
+          <F7BlockTitle>FAQs</F7BlockTitle>
+          <F7List strong outline-ios dividers-ios inset-md accordion-list>
+            <F7ListItem accordion-item title="What do I do with this QR code?">
+              <F7AccordionContent>
+                <F7Block>
                   <p>
                     Simply present it to the SSTAA volunteers when entering SST.
                   </p>
-                </f7Block>
-              </f7AccordionContent>
-            </f7ListItem>
+                </F7Block>
+              </F7AccordionContent>
+            </F7ListItem>
 
-            <f7ListItem accordion-item title="Can I reuse this QR code?">
-              <f7AccordionContent>
-                <f7Block>
+            <F7ListItem accordion-item title="Can I reuse this QR code?">
+              <F7AccordionContent>
+                <F7Block>
                   <p>
                     No, each QR code is single use only. Please refrain from leaving the venue after admission.
                   </p>
-                </f7Block>
-              </f7AccordionContent>
-            </f7ListItem>
-          </f7List>
+                </F7Block>
+              </F7AccordionContent>
+            </F7ListItem>
+          </F7List>
         </div>
-      </f7Page>
-    </f7View>
-  </f7App>
+      </F7Page>
+    </F7View>
+  </F7App>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25deeb4..1084e10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ devDependencies:
   '@ts-rest/vue-query':
     specifier: ^3.30.4
     version: 3.30.4(@tanstack/vue-query@5.0.4)(@ts-rest/core@3.30.4)(vue@3.3.4)(zod@3.22.4)
+  '@types/papaparse':
+    specifier: ^5.3.10
+    version: 5.3.10
   '@vite-pwa/assets-generator':
     specifier: ^0.0.10
     version: 0.0.10
@@ -4250,6 +4253,12 @@ packages:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
 
+  /@types/papaparse@5.3.10:
+    resolution: {integrity: sha512-mS1Fta/xJ9EDYmAvpeWzcV9Gr0cOl1ClpW7di9+wSUNDIDO55tBtyXg97O7K+Syrd9rDEmuejM2iqmJIJ1SO5g==}
+    dependencies:
+      '@types/node': 20.6.3
+    dev: true
+
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true