Initialize project: set up Quasar framework, configured essential tools (ESLint, Prettier, EditorConfig), integrated Vue Router and Axios, added Leaflet-based map with custom components, and defined project dependencies and configs.

src/pages/TestPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <q-page class="row items-start justify-evenly">
+      <div class="col"></div>
+      <div class="col">
+      <div class="q-pa-md">
+        <q-btn color="purple" @click="showNotif" label="Show Notification" />
+      </div>
+      </div>
+      <div class="col" style="border: 5px pink dashed;" >
+        <q-icon :name="darkStatus" size="100px" @click="toggleDarkLight" />
+      </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import { computed } from 'vue'
+const $q = useQuasar()
+
+const darkStatus = computed(() => $q.dark.isActive ? 'dark_mode' : 'light_mode')
+
+function toggleDarkLight() {
+  $q.dark.toggle()
+}
+
+
+function showNotif() {
+  $q.notify({
+    message: 'This is a notification',
+    color: 'green',
+    position: 'top-right',
+    timeout: 3000,
+    actions: [
+      { label: 'Dismiss', color: 'white', handler: () => { /* Dismiss action */ } }
+    ]
+  })
+}
+</script>
+