diff --git a/.changeset/thin-donkeys-drop.md b/.changeset/thin-donkeys-drop.md
new file mode 100644
index 00000000..f9827e19
--- /dev/null
+++ b/.changeset/thin-donkeys-drop.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Resolve ESLint issues
diff --git a/.github/workflows/on-commit.yml b/.github/workflows/on-commit.yml
index a86ae929..42c736a9 100644
--- a/.github/workflows/on-commit.yml
+++ b/.github/workflows/on-commit.yml
@@ -23,7 +23,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Apply all pending migrations to the database
diff --git a/.github/workflows/on-release.yml b/.github/workflows/on-release.yml
index e23d029d..6ba94f51 100644
--- a/.github/workflows/on-release.yml
+++ b/.github/workflows/on-release.yml
@@ -31,7 +31,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Apply all pending migrations to the database
diff --git a/.travis.yml b/.travis.yml
index 8ea19569..29dda265 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,13 +6,13 @@ dist: jammy
 cache:
   npm: false
   directories:
-    - "~/.pnpm-store"
-    
+    - ~/.pnpm-store
+
 before_install:
   - corepack enable
   - corepack prepare pnpm@latest-9 --activate
   - pnpm config set store-dir ~/.pnpm-store
-  
+
 install:
   - pnpm install
 
diff --git a/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue b/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
index 14cc4dcb..b7391d3c 100644
--- a/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
+++ b/components/custom/CAS/ClassroomReservation/NewClassroomReservation.vue
@@ -15,12 +15,15 @@ import type { AllClubs } from '~/types/api/user/all_clubs'
 
 const { toast } = useToast()
 
-const { data } = await useAsyncData<ClassroomData[]>('classroomStatuses', () => {
-  return $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
-})
+const { data } = await useAsyncData<ClassroomData[]>(
+  'classroomStatuses',
+  () => {
+    return $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
+      headers: useRequestHeaders(),
+      method: 'GET',
+    })
+  },
+)
 
 if (!data.value) {
   toast({
@@ -29,7 +32,7 @@ if (!data.value) {
   })
 }
 else {
-  data.value = data.value.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
+  data.value = data.value.sort((a: any, b: any) => (a.name < b.name ? -1 : 1))
 }
 
 const { data: clubs } = await useAsyncData<AllClubs>('clubs', () => {
@@ -141,7 +144,9 @@ async function handleSubmit(e: any) {
           <FormItem>
             <FormLabel>预约时间</FormLabel>
             <FormControl>
-              <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-1 justify-start">
+              <div
+                class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-1 justify-start"
+              >
                 <!-- This ToggleGroup should be implemented in a better way but anyway it works -->
                 <ToggleGroup :key="reloadKey" type="multiple" variant="outline">
                   <div class="text-muted-foreground text-sm text-center w-7">
@@ -168,7 +173,11 @@ async function handleSubmit(e: any) {
                     <SelectValue placeholder="选择时段" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem v-for="period in enums.periods.values" :key="period" :value="period">
+                    <SelectItem
+                      v-for="period in enums.periods.values"
+                      :key="period"
+                      :value="period"
+                    >
                       {{ enums.periods.map[period] }}
                     </SelectItem>
                   </SelectContent>
@@ -200,7 +209,10 @@ async function handleSubmit(e: any) {
                         </span>
                       </span>
                       <span v-if="classroom.size" class="text-gray-400">
-                        可容纳<span class="inline-block w-5 text-center">{{ classroom.size }}</span>人
+                        可容纳<span class="inline-block w-5 text-center">{{
+                          classroom.size
+                        }}</span>
+                        人
                       </span>
                     </SelectItem>
                   </SelectGroup>
@@ -217,28 +229,36 @@ async function handleSubmit(e: any) {
                   <SelectValue placeholder="选择你的社团" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectGroup v-if="clubs?.president && clubs?.president.length">
-                    <SelectItem v-for="club in clubs?.president" :key="club.id" :value="club.id">
+                  <SelectGroup
+                    v-if="clubs?.president && clubs?.president.length"
+                  >
+                    <SelectItem
+                      v-for="club in clubs?.president"
+                      :key="club.id"
+                      :value="club.id"
+                    >
                       {{ club.name.zh }}
-                      <span class="inline-block text-gray-500">
-                        社长
-                      </span>
+                      <span class="inline-block text-gray-500"> 社长 </span>
                     </SelectItem>
                   </SelectGroup>
                   <SelectGroup v-if="clubs?.vice && clubs?.vice.length">
-                    <SelectItem v-for="club in clubs?.vice" :key="club.id" :value="club.id">
+                    <SelectItem
+                      v-for="club in clubs?.vice"
+                      :key="club.id"
+                      :value="club.id"
+                    >
                       {{ club.name.zh }}
-                      <span class="inline-block text-gray-500">
-                        副社
-                      </span>
+                      <span class="inline-block text-gray-500"> 副社 </span>
                     </SelectItem>
                   </SelectGroup>
                   <SelectGroup v-if="clubs?.member && clubs?.member.length">
-                    <SelectItem v-for="club in clubs?.member" :key="club.id" :value="club.id">
+                    <SelectItem
+                      v-for="club in clubs?.member"
+                      :key="club.id"
+                      :value="club.id"
+                    >
                       {{ club.name.zh }}
-                      <span class="inline-block text-gray-500">
-                        成员
-                      </span>
+                      <span class="inline-block text-gray-500"> 成员 </span>
                     </SelectItem>
                   </SelectGroup>
                 </SelectContent>
@@ -250,11 +270,15 @@ async function handleSubmit(e: any) {
           <FormItem>
             <FormLabel>备注</FormLabel>
             <FormControl>
-              <Textarea v-model="formData.note" type="text" placeholder="备注" class="resize-none" rows="3" />
+              <Textarea
+                v-model="formData.note"
+                type="text"
+                placeholder="备注"
+                class="resize-none"
+                rows="3"
+              />
             </FormControl>
-            <FormDescription>
-              非必填
-            </FormDescription>
+            <FormDescription> 非必填 </FormDescription>
             <FormMessage />
           </FormItem>
         </FormField>
diff --git a/components/custom/CAS/Record/NewActivityRecord.vue b/components/custom/CAS/Record/NewActivityRecord.vue
index 1f29c350..4e6c511d 100644
--- a/components/custom/CAS/Record/NewActivityRecord.vue
+++ b/components/custom/CAS/Record/NewActivityRecord.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Multiselect } from '@/components/ui/multiselect'
 import {
   NumberField,
@@ -9,7 +15,13 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/components/ui/number-field'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -32,15 +44,17 @@ definePageMeta({
 
 const isLoading = ref(false)
 
-const formSchema = toTypedSchema(z.object({
-  club: z.string(),
-  date: z.date(),
-  text: z.string().min(10).max(300),
-  members: z.array(z.string().uuid()),
-  cTime: z.number().min(0).max(5),
-  aTime: z.number().min(0).max(5),
-  sTime: z.number().min(0).max(5),
-}))
+const formSchema = toTypedSchema(
+  z.object({
+    club: z.string(),
+    date: z.date(),
+    text: z.string().min(10).max(300),
+    members: z.array(z.string().uuid()),
+    cTime: z.number().min(0).max(5),
+    aTime: z.number().min(0).max(5),
+    sTime: z.number().min(0).max(5),
+  }),
+)
 
 const { data } = await useAsyncData<AllClubs>('allClubs', () => {
   return $fetch('/api/user/all_clubs?includeMemberships=true', {
@@ -101,13 +115,20 @@ const onSubmit = handleSubmit(async (values) => {
           <FormItem>
             <FormLabel>社团</FormLabel>
 
-            <Select v-bind="componentField" @update:model-value="selectedClub = $event">
+            <Select
+              v-bind="componentField"
+              @update:model-value="selectedClub = $event"
+            >
               <FormControl>
                 <SelectTrigger
-                  :class="cn(
-                    'w-full ps-3 text-start font-normal hover:bg-muted',
-                    !value && 'text-muted-foreground',
-                  )" variant="outline" :disabled="isLoading"
+                  :class="
+                    cn(
+                      'w-full ps-3 text-start font-normal hover:bg-muted',
+                      !value && 'text-muted-foreground',
+                    )
+                  "
+                  variant="outline"
+                  :disabled="isLoading"
                 >
                   <SelectValue placeholder="选择您需要记录的社团..." />
                 </SelectTrigger>
@@ -116,7 +137,8 @@ const onSubmit = handleSubmit(async (values) => {
                 <SelectGroup v-if="data">
                   <SelectItem
                     v-for="club in [...data.vice, ...data.president]"
-                    :key="club.id" :value="String(club.id)"
+                    :key="club.id"
+                    :value="String(club.id)"
                   >
                     {{ club.name.zh }}
                   </SelectItem>
@@ -134,14 +156,22 @@ const onSubmit = handleSubmit(async (values) => {
               <PopoverTrigger as-child>
                 <FormControl>
                   <Button
-                    :class="cn(
-                      'w-full ps-3 text-start font-normal',
-                      !value && 'text-muted-foreground',
-                    )" variant="outline"
+                    :class="
+                      cn(
+                        'w-full ps-3 text-start font-normal',
+                        !value && 'text-muted-foreground',
+                      )
+                    "
+                    variant="outline"
                     :disabled="isLoading"
                   >
-                    <span>{{ value ? $dayjs(value).format("LL") : "选择日期..." }}</span>
-                    <Icon class="ms-auto opacity-50" name="material-symbols:calendar-today-outline" />
+                    <span>{{
+                      value ? $dayjs(value).format("LL") : "选择日期..."
+                    }}</span>
+                    <Icon
+                      class="ms-auto opacity-50"
+                      name="material-symbols:calendar-today-outline"
+                    />
                   </Button>
                 </FormControl>
               </PopoverTrigger>
@@ -154,9 +184,14 @@ const onSubmit = handleSubmit(async (values) => {
         </FormField>
 
         <div class="flex space-x-2 w-full">
-          <FormField v-for="(slot, index) in ['cTime', 'aTime', 'sTime']" :key="index" v-slot="{ value }" :name="slot">
+          <FormField
+            v-for="(slot, index) in ['cTime', 'aTime', 'sTime']"
+            :key="index"
+            v-slot="{ value }"
+            :name="slot"
+          >
             <FormItem>
-              <FormLabel>{{ ['C', 'A', 'S'][index] }}时间</FormLabel>
+              <FormLabel>{{ ["C", "A", "S"][index] }}时间</FormLabel>
               <NumberField
                 class="gap-2 w-max"
                 :min="0"
@@ -209,14 +244,14 @@ const onSubmit = handleSubmit(async (values) => {
             <FormControl>
               <Multiselect
                 v-if="data"
-                :options="((
-                  [...data.president, ...data.vice].find(
-                    (club) => club.id === Number(selectedClub),
-                  )
-                )?.memberships)?.map((membership) => ({
-                  label: membership.name,
-                  value: membership.id,
-                })) ?? []"
+                :options="
+                  [...data.president, ...data.vice]
+                    .find((club) => club.id === Number(selectedClub))
+                    ?.memberships?.map((membership) => ({
+                      label: membership.name,
+                      value: membership.id,
+                    })) ?? []
+                "
                 placeholder="Select options"
                 variant="inverted"
                 v-bind="componentField"
@@ -229,7 +264,11 @@ const onSubmit = handleSubmit(async (values) => {
         </FormField>
 
         <Button :disabled="isLoading" type="submit">
-          <Icon v-if="isLoading" class="mr-2" name="svg-spinners:180-ring-with-bg" />
+          <Icon
+            v-if="isLoading"
+            class="mr-2"
+            name="svg-spinners:180-ring-with-bg"
+          />
           提交
         </Button>
       </form>
diff --git a/components/custom/club-card.vue b/components/custom/club-card.vue
index aeed7ccd..a742270e 100644
--- a/components/custom/club-card.vue
+++ b/components/custom/club-card.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import type { Club } from '~/types/clubs'
+import Badge from '@/components/ui/badge/Badge.vue'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { cn } from '@/lib/utils'
-import Badge from '@/components/ui/badge/Badge.vue'
 import sanitizeHtml from 'sanitize-html'
+import type { Club } from '~/types/clubs'
 
 const props = defineProps({
   club: {
diff --git a/data/forms/forms.yaml b/data/forms/forms.yaml
index a8586625..232b03ed 100644
--- a/data/forms/forms.yaml
+++ b/data/forms/forms.yaml
@@ -1,7 +1,7 @@
 ---
 20240930_0001:
-  title: "社团注册表"
-  description: "提交社团注册表，如有多个社团可反复在此提交。"
-  url: "https://wzvkx0jz.nocodb.com/#/nc/form/4b639cfb-a057-414f-b778-016c02309f32?embed"
-  start_date: "2024-09-30"
-  end_date: "2024-10-30"
+  title: 社团注册表
+  description: 提交社团注册表，如有多个社团可反复在此提交。
+  url: 'https://wzvkx0jz.nocodb.com/#/nc/form/4b639cfb-a057-414f-b778-016c02309f32?embed'
+  start_date: 2024-09-30
+  end_date: 2024-10-30
diff --git a/db/migrations/migration_lock.toml b/db/migrations/migration_lock.toml
index fbffa92c..99e4f200 100644
--- a/db/migrations/migration_lock.toml
+++ b/db/migrations/migration_lock.toml
@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (i.e. Git)
-provider = "postgresql"
\ No newline at end of file
+provider = "postgresql"
diff --git a/layouts/sign-in-or-out.vue b/layouts/sign-in-or-out.vue
index 7de91beb..3b7217d0 100644
--- a/layouts/sign-in-or-out.vue
+++ b/layouts/sign-in-or-out.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFavicon, usePreferredDark } from '@vueuse/core'
 import IconLogo from '@/assets/logo.svg'
+import { useFavicon, usePreferredDark } from '@vueuse/core'
 
 const isDark = usePreferredDark()
 const favicon = computed(() => isDark.value ? '/favicon-dark.ico' : '/favicon.ico')
diff --git a/lib/utils.ts b/lib/utils.ts
index e01ec758..b0b480f2 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,9 +1,9 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 import type { Updater } from '@tanstack/vue-table'
 import type { Ref } from 'vue'
 
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
diff --git a/pages/cas/clubs/[id].vue b/pages/cas/clubs/[id].vue
index 38583f88..161ac6c4 100644
--- a/pages/cas/clubs/[id].vue
+++ b/pages/cas/clubs/[id].vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useRoute } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import sanitizeHtml from 'sanitize-html'
+import { useRoute } from 'vue-router'
 import type { Club, Clubs } from '~/types/clubs'
 
 const { data } = await useFetch<Clubs>('/api/club/all_details')
diff --git a/pages/cas/rating.vue b/pages/cas/rating.vue
index b871281c..ac2f0f30 100644
--- a/pages/cas/rating.vue
+++ b/pages/cas/rating.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { cn } from '~/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { useToast } from '@/components/ui/toast/use-toast'
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '~/lib/utils'
 
 const { toast } = useToast()
 
diff --git a/pages/forms/[id].vue b/pages/forms/[id].vue
index cc651bc2..e15de080 100644
--- a/pages/forms/[id].vue
+++ b/pages/forms/[id].vue
@@ -30,7 +30,9 @@ if (!data.value) {
   })
 }
 
-const form = data.value!.find(form => form.id === useRoute().params.id)
+const form = data.value!.find(
+  form => form.id === String(useRoute().params.id),
+)
 </script>
 
 <template>
@@ -42,11 +44,14 @@ const form = data.value!.find(form => form.id === useRoute().params.id)
   </div>
   <div v-if="form" class="rounded">
     <ClientOnly>
-      <iframe :height="height - 110" width="100%" class="rounded" :src="`${form.url}&userid=${clerk.user.id}`" />
+      <iframe
+        :height="height - 110"
+        width="100%"
+        class="rounded"
+        :src="`${form.url}&userid=${clerk.user.id}`"
+      />
     </ClientOnly>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/pages/manage/manage.vue b/pages/manage/manage.vue
index fb963ce3..c325e097 100644
--- a/pages/manage/manage.vue
+++ b/pages/manage/manage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import Toaster from '@/components/ui/toast/Toaster.vue'
+import { useToast } from '@/components/ui/toast/use-toast'
 import { LoaderCircle } from 'lucide-vue-next'
 import { onMounted } from 'vue'
 import { enums } from '~/components/custom/enum2str'
-import { useToast } from '@/components/ui/toast/use-toast'
-import Toaster from '@/components/ui/toast/Toaster.vue'
 
 definePageMeta({
   middleware: ['auth'],
@@ -33,7 +33,7 @@ async function load() {
       content = response.data
     }
   }
-  catch (error) {
+  catch {
     status.value = Statuses.ERROR
   }
 }
@@ -47,7 +47,7 @@ const alertContent = {
 }
 const managePending = ref(false)
 
-function confirmManage(id: number, action: string, currentStatus = '') {
+function confirmManage(id: number, action: string, _currentStatus = '') {
   alertContent.message = `将对 预约#${id} 执行以下操作: `
   if (action === 'DELETE') {
     alertContent.message += '撤销'
@@ -60,7 +60,7 @@ function confirmManage(id: number, action: string, currentStatus = '') {
 async function manage() {
   managePending.value = true
   try {
-    const data = await $fetch('/api/reservation/manage', {
+    const _data = await $fetch('/api/reservation/manage', {
       query: {
         id: alertContent.id,
         action: alertContent.action,
@@ -89,7 +89,9 @@ onMounted(async () => {
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>{{ alertContent.title }}</AlertDialogTitle>
-        <AlertDialogDescription>{{ alertContent.message }}</AlertDialogDescription>
+        <AlertDialogDescription>
+          {{ alertContent.message }}
+        </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel :disabled="managePending">
@@ -138,7 +140,7 @@ onMounted(async () => {
         <TableCell>{{ enums.periods.map[record.period] }}</TableCell>
         <TableCell>{{ record.classroom.name }}</TableCell>
         <TableCell>
-          {{ record.note ? '' : '–' }}
+          {{ record.note ? "" : "–" }}
           <HoverCard v-if="record.note">
             <HoverCardTrigger>
               <Button variant="link" class="text-blue-500">
@@ -152,7 +154,11 @@ onMounted(async () => {
         </TableCell>
         <TableCell class="text-left">
           <div v-if="true" class="text-red-500">
-            <Button variant="link" class="p-0 text-red-500" @click="confirmManage(record.id, 'DELETE')">
+            <Button
+              variant="link"
+              class="p-0 text-red-500"
+              @click="confirmManage(Number(record.id), 'DELETE')"
+            >
               撤销
             </Button>
           </div>
@@ -160,10 +166,11 @@ onMounted(async () => {
       </TableRow>
     </TableBody>
   </Table>
-  <div v-if="status === Statuses.READY && !content.length" class="w-1/3 my-2 mx-auto text-center">
-    <Alert>
-      暂无记录
-    </Alert>
+  <div
+    v-if="status === Statuses.READY && !content.length"
+    class="w-1/3 my-2 mx-auto text-center"
+  >
+    <Alert> 暂无记录 </Alert>
   </div>
   <div v-if="status === Statuses.ERROR" class="w-1/3 my-2 mx-auto text-center">
     <Alert variant="destructive">
diff --git a/pages/manage/statuses.vue b/pages/manage/statuses.vue
index fd2c1c01..2c2dbe73 100644
--- a/pages/manage/statuses.vue
+++ b/pages/manage/statuses.vue
@@ -19,19 +19,24 @@ const dayjs = useDayjs()
 const utc8Time = dayjs().tz('Asia/Shanghai')
 
 const selectedDay = ref(enums.days.values[utc8Time.day()])
-const selectedPeriod = ref(time2period(utc8Time.hour() * 100 + utc8Time.minute(), selectedDay.value))
+const selectedPeriod = ref(
+  time2period(utc8Time.hour() * 100 + utc8Time.minute(), selectedDay.value),
+)
 
 let dataLoaded = false
 
-const { data, refresh } = await useAsyncData<ClassroomData[]>('classroomStatuses', () => {
-  return $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
-    headers: useRequestHeaders(),
-    method: 'GET',
-  })
-})
+const { data, _refresh } = await useAsyncData<ClassroomData[]>(
+  'classroomStatuses',
+  () => {
+    return $fetch<ClassroomData[]>(`/api/reservation/classroomId`, {
+      headers: useRequestHeaders(),
+      method: 'GET',
+    })
+  },
+)
 
 if (data.value) {
-  data.value = data.value.sort((a: any, b: any) => a.name < b.name ? -1 : 1)
+  data.value = data.value.sort((a: any, b: any) => (a.name < b.name ? -1 : 1))
   dataLoaded = true
 }
 else {
@@ -43,7 +48,10 @@ else {
 
 function status(reservationRecords: ReservationRecord[]) {
   for (const record of reservationRecords) {
-    if (record.day === selectedDay.value && record.period === selectedPeriod.value) {
+    if (
+      record.day === selectedDay.value
+      && record.period === selectedPeriod.value
+    ) {
       return record.club.name.zh
     }
   }
@@ -68,9 +76,15 @@ function status(reservationRecords: ReservationRecord[]) {
         <SelectValue placeholder="选择时段" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem v-for="period in enums.periods.values" v-if="1" :key="period" :value="period">
-          {{ enums.periods.map[period] }}
-        </SelectItem>
+        <template v-if="1">
+          <SelectItem
+            v-for="period in enums.periods.values"
+            :key="period"
+            :value="period"
+          >
+            {{ enums.periods.map[period] }}
+          </SelectItem>
+        </template>
       </SelectContent>
     </Select>
   </div>
@@ -85,18 +99,32 @@ function status(reservationRecords: ReservationRecord[]) {
       </div>
     </div>
   </div>
-  <div v-if="dataLoaded" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2">
-    <div v-for="classroom in data" :key="classroom.id" class="w-full rounded-lg border">
+  <div
+    v-if="dataLoaded"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2"
+  >
+    <div
+      v-for="classroom in data"
+      :key="String(classroom.id)"
+      class="w-full rounded-lg border"
+    >
       <div
-        class="rounded-t-lg w-full px-4 py-2 text-xs" :class="{
+        class="rounded-t-lg w-full px-4 py-2 text-xs"
+        :class="{
           'bg-red-800/[.2]': !!status(classroom.ReservationRecord),
           'bg-green-800/[.2]': !status(classroom.ReservationRecord),
         }"
       >
-        {{ status(classroom.ReservationRecord) ? `${status(classroom.ReservationRecord)} 使用中` : '空闲' }}
+        {{
+          status(classroom.ReservationRecord)
+            ? `${status(classroom.ReservationRecord)} 使用中`
+            : "空闲"
+        }}
       </div>
       <div class="rounded-b-lg w-full px-4 py-2">
-        <div class="text-2xl font-bold flex flex-row flex-wrap items-center gap-2">
+        <div
+          class="text-2xl font-bold flex flex-row flex-wrap items-center gap-2"
+        >
           <span class="inline-block">
             {{ classroom.name }}
           </span>
@@ -109,6 +137,6 @@ function status(reservationRecords: ReservationRecord[]) {
         </div>
       </div>
     </div>
+    <Toaster />
   </div>
-  <Toaster />
 </template>
diff --git a/pages/sign-in.vue b/pages/sign-in.vue
index 5bb00ce7..91127f3e 100644
--- a/pages/sign-in.vue
+++ b/pages/sign-in.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { SignIn } from 'vue-clerk'
-import { usePreferredDark } from '@vueuse/core'
 import { dark } from '@clerk/themes'
+import { usePreferredDark } from '@vueuse/core'
+import { SignIn } from 'vue-clerk'
 
 const isDark = usePreferredDark()
 
diff --git a/server/api/bind/confirm.post.ts b/server/api/bind/confirm.post.ts
index f8e803bb..7267ef64 100644
--- a/server/api/bind/confirm.post.ts
+++ b/server/api/bind/confirm.post.ts
@@ -1,7 +1,7 @@
-import { z } from 'zod'
+import { clerkClient } from '@clerk/clerk-sdk-node'
 import { PrismaClient } from '@prisma/client'
 
-import { clerkClient } from '@clerk/clerk-sdk-node'
+import { z } from 'zod'
 
 const prisma = new PrismaClient()
 
diff --git a/server/api/bind/index.post.ts b/server/api/bind/index.post.ts
index 78a66e98..dde1980a 100644
--- a/server/api/bind/index.post.ts
+++ b/server/api/bind/index.post.ts
@@ -1,5 +1,5 @@
-import { z } from 'zod'
 import { v4 as uuidv4 } from 'uuid'
+import { z } from 'zod'
 
 interface TsimsLoginResult {
   status: string
diff --git a/server/api/bind/init.get.ts b/server/api/bind/init.get.ts
index 504df2bb..f5b3301a 100644
--- a/server/api/bind/init.get.ts
+++ b/server/api/bind/init.get.ts
@@ -1,5 +1,5 @@
-import { v4 as uuidv4 } from 'uuid'
 import type { FetchContext } from 'ofetch'
+import { v4 as uuidv4 } from 'uuid'
 
 export default defineEventHandler(async (event) => {
   const { auth } = event.context
diff --git a/server/api/reservation/classroomId.get.ts b/server/api/reservation/classroomId.get.ts
index a53b8ac3..6db0cd8f 100644
--- a/server/api/reservation/classroomId.get.ts
+++ b/server/api/reservation/classroomId.get.ts
@@ -16,5 +16,5 @@ export default eventHandler(async (event) => {
         },
       },
     },
-  });
+  })
 })
diff --git a/server/api/reservation/manage.get.ts b/server/api/reservation/manage.get.ts
index e2b21c8c..8249d591 100644
--- a/server/api/reservation/manage.get.ts
+++ b/server/api/reservation/manage.get.ts
@@ -18,6 +18,8 @@ export default eventHandler(async (event) => {
     })
   }
 
+  const id = String(query.id) // Convert id to string
+
   if (query.admin === 'true') {
     if (0 /* TODO: admin key validation failed */) {
       throw createError({
@@ -25,15 +27,17 @@ export default eventHandler(async (event) => {
         message: '管理员认证失败',
       })
     }
-    else { // admin validation success
+    else {
+      // admin validation success
       if (query.action === 'DELETE') {
-        if (query.id === -1)
+        if (id === '-1')
           return
-        return await prisma.reservationRecord.delete({
-          where: {
-            id: Number(query.id),
-          },
-        })
+        return await prisma.reservationRecord
+          .delete({
+            where: {
+              id: Number(id),
+            },
+          })
           .then(() => {
             return 'SUCCESS'
           })
@@ -45,7 +49,8 @@ export default eventHandler(async (event) => {
           })
       }
       else if (query.action === 'DELALL') {
-        return await prisma.reservationRecord.deleteMany({})
+        return await prisma.reservationRecord
+          .deleteMany({})
           .then(() => {
             return 'SUCCESS'
           })
@@ -70,7 +75,7 @@ export default eventHandler(async (event) => {
         user: true,
       },
       where: {
-        id: query.id,
+        id: Number(id),
       },
     })
     if (!currentReservation) {
@@ -86,13 +91,14 @@ export default eventHandler(async (event) => {
       })
     }
     else if (query.action === 'DELETE') {
-      if (query.id === -1)
+      if (id === '-1')
         return
-      return await prisma.reservationRecord.delete({
-        where: {
-          id: query.id,
-        },
-      })
+      return await prisma.reservationRecord
+        .delete({
+          where: {
+            id: Number(id),
+          },
+        })
         .then(() => {
           return 'SUCCESS'
         })
diff --git a/server/api/reservation/new.post.ts b/server/api/reservation/new.post.ts
index 200ae213..d739f03d 100644
--- a/server/api/reservation/new.post.ts
+++ b/server/api/reservation/new.post.ts
@@ -57,7 +57,8 @@ export default eventHandler(async (event) => {
               }
             }
             return null
-          }).filter((record: any) => record !== null),
+          })
+          .filter((record: any) => record !== null),
       })
       return {
         status: 'SUCCESS',
diff --git a/utils/update-classroom-data.ts b/utils/update-classroom-data.ts
index 68c9e1b9..22807e19 100644
--- a/utils/update-classroom-data.ts
+++ b/utils/update-classroom-data.ts
@@ -3,28 +3,35 @@ import data from '~/data/classroom/classroom.json'
 
 const prisma = new PrismaClient()
 
-const runSequence: any = []
+async function updateClassroomData() {
+  const runSequence: any = []
 
-data.forEach((e) => {
-  runSequence.push(
-    prisma.classroomData.upsert({
-      where: {
-        name: e.name,
-      },
-      update: {
-        name: e.name,
-        alias: e.alias,
-        size: e.size,
-      },
-      create: {
-        name: e.name,
-        alias: e.alias,
-        size: e.size,
-      },
-    }),
-  )
-})
+  data.forEach((e) => {
+    runSequence.push(
+      prisma.classroomData.upsert({
+        where: {
+          name: e.name,
+        },
+        update: {
+          name: e.name,
+          alias: e.alias,
+          size: e.size,
+        },
+        create: {
+          name: e.name,
+          alias: e.alias,
+          size: e.size,
+        },
+      }),
+    )
+  })
+
+  // eslint-disable-next-line no-console
+  console.log(`start transaction with length ${runSequence.length}`)
+  await prisma.$transaction(runSequence)
+}
 
-// eslint-disable-next-line no-console
-console.log(`start transaction with length ${runSequence.length}`)
-await prisma.$transaction(runSequence)
+updateClassroomData().catch((e) => {
+  console.error(e)
+  prisma.$disconnect()
+})