From 624bb7e1247227cfdf66c8fa28ff21c34e6b0d1e Mon Sep 17 00:00:00 2001
From: Pascal Syma <p.syma@appfarms.com>
Date: Fri, 1 Aug 2025 22:15:30 +0200
Subject: [PATCH] Add quest page

---
 app/lang/de.json                              |  82 +++++++-
 app/lang/en.json                              |  82 +++++++-
 app/layouts/default.vue                       |  43 ++++-
 app/middleware/updateTitle.global.ts          |   6 +
 .../hunt/[huntSlug]/[questSlug]/index.vue     | 176 +++++++++++++++++-
 app/pages/hunt/[huntSlug]/index.vue           |   6 +
 app/stores/title.ts                           |   8 +
 bun.lock                                      |  14 +-
 nuxt.config.ts                                |   6 +-
 package.json                                  |   2 +
 server/api/quest/[questId]/index.get.ts       |  87 +++++++++
 shared/types/enums.ts                         |   0
 12 files changed, 497 insertions(+), 15 deletions(-)
 create mode 100644 app/middleware/updateTitle.global.ts
 create mode 100644 app/stores/title.ts
 create mode 100644 server/api/quest/[questId]/index.get.ts
 create mode 100644 shared/types/enums.ts

diff --git a/app/lang/de.json b/app/lang/de.json
index 46ad6b0..59396c1 100644
--- a/app/lang/de.json
+++ b/app/lang/de.json
@@ -11,6 +11,86 @@
   "layouts": {
     "title": "{title} {'|'} PicHunt",
     "default_tile": "PicHunt",
-    "switch_lang": "Sprache ändern zu {locale}"
+    "switch_lang": "Sprache ändern zu {locale}",
+    "refresh": "Aktualisieren"
+  },
+  "vuestic": {
+    "search": "Search",
+    "noOptions": "Items not found",
+    "ok": "OK",
+    "cancel": "Cancel",
+    "uploadFile": "Upload file",
+    "undo": "Undo",
+    "dropzone": "Drop files here to upload",
+    "fileDeleted": "File deleted",
+    "closeAlert": "close alert",
+    "backToTop": "back to top",
+    "toggleDropdown": "toggle dropdown",
+    "carousel": "carousel",
+    "goPreviousSlide": "go previous slide",
+    "goNextSlide": "go next slide",
+    "goSlide": "go slide {index}",
+    "slideOf": "slide {index} of {length}",
+    "close": "close",
+    "openColorPicker": "open color picker",
+    "colorSelection": "color selection",
+    "colorName": "color {color}",
+    "decreaseCounter": "decrease counter",
+    "increaseCounter": "increase counter",
+    "selectAllRows": "select all rows",
+    "sortColumnBy": "sort column by {name}",
+    "selectRowByIndex": "select row {index}",
+    "resetDate": "reset date",
+    "nextPeriod": "next period",
+    "switchView": "switch view",
+    "previousPeriod": "previous period",
+    "removeFile": "remove file",
+    "reset": "reset",
+    "pagination": "pagination",
+    "goToTheFirstPage": "go to the first page",
+    "goToPreviousPage": "go to the previous page",
+    "goToSpecificPage": "go to the {page} page",
+    "goToSpecificPageInput": "enter the page number to go",
+    "goNextPage": "go next page",
+    "goLastPage": "go last page",
+    "currentRating": "current rating {value} of {max}",
+    "voteRating": "vote rating {value} of {max}",
+    "optionsFilter": "options filter",
+    "splitPanels": "split panels",
+    "movePaginationLeft": "move pagination left",
+    "movePaginationRight": "move pagination right",
+    "resetTime": "reset time",
+    "closeToast": "close toast",
+    "selectedOption": "Selected option",
+    "noSelectedOption": "Option is not selected",
+    "breadcrumbs": "breadcrumbs",
+    "counterValue": "counter value",
+    "selectedDate": "selected date",
+    "selectedTime": "selected time",
+    "progressState": "progress state",
+    "color": "color",
+    "next": "Next",
+    "back": "Previous",
+    "finish": "Finish",
+    "step": "step",
+    "progress": "progress",
+    "loading": "Loading",
+    "sliderValue": "Current slider value is {value}",
+    "sliderDot": "Slider dot",
+    "sliderMaxDot": "Maximum slider value",
+    "sliderMinDot": "Minimum slider value",
+    "switch": "Switch",
+    "inputField": "Input field",
+    "fileTypeIncorrect": "File type is incorrect",
+    "select": "Select an option"
+  },
+  "enums": {
+    "text_type": {
+      "TEXT": "Freitext",
+      "WORD": "Ein Wort",
+      "NUMBER": "Zahl",
+      "INTEGER": "Ganzzahl"
+
+    }
   }
 }
diff --git a/app/lang/en.json b/app/lang/en.json
index 7e3ac7b..ce978ec 100644
--- a/app/lang/en.json
+++ b/app/lang/en.json
@@ -11,6 +11,86 @@
   "layouts": {
     "title": "{title} {'|'} PicHunt",
     "default_tile": "PicHunt",
-    "switch_lang": "Switch locale to {locale}"
+    "switch_lang": "Switch locale to {locale}",
+    "refresh": "Refresh"
+  },
+  "vuestic": {
+    "search": "Search",
+    "noOptions": "Items not found",
+    "ok": "OK",
+    "cancel": "Cancel",
+    "uploadFile": "Upload file",
+    "undo": "Undo",
+    "dropzone": "Drop files here to upload",
+    "fileDeleted": "File deleted",
+    "closeAlert": "close alert",
+    "backToTop": "back to top",
+    "toggleDropdown": "toggle dropdown",
+    "carousel": "carousel",
+    "goPreviousSlide": "go previous slide",
+    "goNextSlide": "go next slide",
+    "goSlide": "go slide {index}",
+    "slideOf": "slide {index} of {length}",
+    "close": "close",
+    "openColorPicker": "open color picker",
+    "colorSelection": "color selection",
+    "colorName": "color {color}",
+    "decreaseCounter": "decrease counter",
+    "increaseCounter": "increase counter",
+    "selectAllRows": "select all rows",
+    "sortColumnBy": "sort column by {name}",
+    "selectRowByIndex": "select row {index}",
+    "resetDate": "reset date",
+    "nextPeriod": "next period",
+    "switchView": "switch view",
+    "previousPeriod": "previous period",
+    "removeFile": "remove file",
+    "reset": "reset",
+    "pagination": "pagination",
+    "goToTheFirstPage": "go to the first page",
+    "goToPreviousPage": "go to the previous page",
+    "goToSpecificPage": "go to the {page} page",
+    "goToSpecificPageInput": "enter the page number to go",
+    "goNextPage": "go next page",
+    "goLastPage": "go last page",
+    "currentRating": "current rating {value} of {max}",
+    "voteRating": "vote rating {value} of {max}",
+    "optionsFilter": "options filter",
+    "splitPanels": "split panels",
+    "movePaginationLeft": "move pagination left",
+    "movePaginationRight": "move pagination right",
+    "resetTime": "reset time",
+    "closeToast": "close toast",
+    "selectedOption": "Selected option",
+    "noSelectedOption": "Option is not selected",
+    "breadcrumbs": "breadcrumbs",
+    "counterValue": "counter value",
+    "selectedDate": "selected date",
+    "selectedTime": "selected time",
+    "progressState": "progress state",
+    "color": "color",
+    "next": "Next",
+    "back": "Previous",
+    "finish": "Finish",
+    "step": "step",
+    "progress": "progress",
+    "loading": "Loading",
+    "sliderValue": "Current slider value is {value}",
+    "sliderDot": "Slider dot",
+    "sliderMaxDot": "Maximum slider value",
+    "sliderMinDot": "Minimum slider value",
+    "switch": "Switch",
+    "inputField": "Input field",
+    "fileTypeIncorrect": "File type is incorrect",
+    "select": "Select an option"
+  },
+  "enums": {
+    "text_type": {
+      "TEXT": "Free text",
+      "WORD": "One Word",
+      "NUMBER": "Number",
+      "INTEGER": "Whole number"
+
+    }
   }
 }
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4378aca..a40cc32 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const { loggedIn, clear } = useUserSession();
 
 const route = useRoute();
 const breakpoints = useBreakpoint();
+const titleStore = useTitleStore();
 
 const isSidebarVisible = ref(breakpoints.mdUp);
 
 watchEffect(() => {
   isSidebarVisible.value = breakpoints.smUp;
 });
+
+const slugs = computed(() => checkSlug(route.params));
 </script>
 
 <template>
@@ -31,7 +36,9 @@ watchEffect(() => {
             @click="isSidebarVisible = !isSidebarVisible"
           />
         </template>
-        <template #center>{{ $t('layouts.default_tile') }}</template>
+        <template #center>
+          {{ titleStore.title || $t('layouts.default_tile') }}</template
+        >
       </VaNavbar>
     </template>
 
@@ -46,6 +53,40 @@ watchEffect(() => {
             <VaSidebarItemTitle>Home</VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
+        <VaSidebarItem
+          v-if="slugs?.huntSlug"
+          :to="$localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
+          :active="
+            $localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path
+          "
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="camera_indoor" />
+            <VaSidebarItemTitle>{{
+              slugs.huntSlug.name || 'Hunt'
+            }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem
+          v-if="slugs?.huntSlug && slugs?.questSlug"
+          :to="
+            $localePath(
+              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
+            )
+          "
+          :active="
+            $localePath(
+              `/hunt/${sluggy(slugs.huntSlug)}/${sluggy(slugs.questSlug)}`
+            ) === route.path
+          "
+        >
+          <VaSidebarItemContent>
+            <VaIcon name="question_mark" />
+            <VaSidebarItemTitle>{{
+              slugs.questSlug.name || 'Quest'
+            }}</VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
         <VaSpacer />
         <VaSidebarItem v-if="loggedIn" @click="clear">
           <VaSidebarItemContent>
diff --git a/app/middleware/updateTitle.global.ts b/app/middleware/updateTitle.global.ts
new file mode 100644
index 0000000..4adc9cd
--- /dev/null
+++ b/app/middleware/updateTitle.global.ts
@@ -0,0 +1,6 @@
+import { useTitleStore } from '~/stores/title';
+
+export default defineNuxtRouteMiddleware(() => {
+  const titleStore = useTitleStore();
+  titleStore.title = undefined;
+});
diff --git a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
index 5db3792..6fd2d0e 100644
--- a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
@@ -1,24 +1,186 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { huntSlug, questSlug } = app.$slugData;
-console.log(app.$slugData);
-const { t } = useI18n();
 
+const { t, locale } = useI18n();
+
+const titleStore = useTitleStore();
+
+const { data, pending, refresh } = await useFetch(
+  `/api/quest/${questSlug?.id}`
+);
+
+titleStore.title = data.value?.title;
 useHead({
   title: t('layouts.title', {
     title:
-      [questSlug?.name, huntSlug?.name]
+      [
+        data.value?.title || questSlug?.name,
+        data.value?.hunt?.name || huntSlug?.name
+      ]
         .filter((s) => s && s?.length > 0)
         .join(' | ') || t('layouts.default_tile')
   })
 });
+
+const answer = ref(data.value?.answer?.text);
+
+const textType = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  INTEGER: 'number',
+  WORD: 'text'
+};
+
+const newImage = ref<File>();
+
+const uploading = ref(false);
+async function submit() {
+  uploading.value = true;
+
+  // TODO: add upload logic
+  await refresh();
+
+  uploading.value = false;
+  answer.value = data.value?.answer?.text;
+  newImage.value = undefined;
+}
+
+const createImageURL = (file: File) => URL.createObjectURL(file);
 </script>
 
 <template>
-  <h1>{{ huntSlug!.name }} - {{ questSlug!.name }}</h1>
-  <VaButton :to="$localePath(`/hunt/${sluggy(huntSlug!)}`)"
-    >Back to Hunt</VaButton
-  >
+  <div v-if="data">
+    <h1>
+      {{ data.hunt.name || huntSlug!.name }} -
+      {{ data.title || questSlug!.name }}
+    </h1>
+    <VaButton
+      icon="arrow_back"
+      :to="$localePath(`/hunt/${sluggy(data.hunt || huntSlug!)}`)"
+      >Back to Hunt</VaButton
+    >
+    <VaButton
+      @click="refresh"
+      icon="refresh"
+      :loading="pending"
+      color="success"
+      >{{ $t('layouts.refresh') }}</VaButton
+    >
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <VaCard
+        :stripe="data.answer !== null"
+        :stripe-color="
+          data.answer?.score && data.answer?.score > 0 ? 'success' : 'primary'
+        "
+      >
+        <VaCardTitle><QuestTags :quest="data" /></VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-4">
+            <p class="text-lg">{{ data.description }}</p>
+            <p v-if="data.question" class="text-xl font-bold">
+              {{ data.textRequired ? '❓' : '❔' }}: {{ data.question }}
+            </p>
+            <p v-if="data.question">
+              🖋: {{ $t(`enums.text_type.${data.textType}`) }}
+            </p>
+            <p v-if="data.extraText">
+              <span class="uppercase">Extra points:</span> {{ data.extraText }}
+            </p>
+          </div>
+        </VaCardContent>
+      </VaCard>
+      <VaCard color="info" v-if="data.answer?.review">
+        <VaCardTitle>Review</VaCardTitle>
+        <VaCardContent>
+          <p v-if="data.answer.score" class="mb-2">
+            <VaChip color="success"
+              >Answer type: {{ data.answer.score }}</VaChip
+            >
+            <span v-if="data.answer.reviewer" class="text-sm">
+              by {{ data.answer.reviewer.name }}</span
+            >
+          </p>
+          <p>{{ data.answer.review }}</p>
+        </VaCardContent>
+      </VaCard>
+      <VaCard color="primary">
+        <VaCardTitle>Submission</VaCardTitle>
+        <VaCardContent>
+          <div class="flex flex-col gap-4">
+            <VaInput
+              :label="data.question"
+              :disabled="uploading"
+              v-if="data.question"
+              color="onPrimary"
+              placeholder="Your answer"
+              :required-mark="data.textRequired"
+              v-model="answer"
+              :clearable="!!data.answer?.text"
+              :clear-value="data.answer?.text || ''"
+              clearable-icon="replay"
+              :type="textType[data.textType]"
+              :messages="[
+                $t(`enums.text_type.${data.textType}`),
+                data.textRequired ? 'Required Answer' : undefined
+              ]"
+            >
+              <template v-if="data.textUnit" #appendInner>
+                <span>{{ data.textUnit }}</span>
+              </template>
+            </VaInput>
+
+            <VaImage
+              v-if="newImage"
+              :src="createImageURL(newImage)"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            />
+            <VaImage
+              v-else-if="data.answer?.picture"
+              :src="data.answer?.picture"
+              class="max-h-60 w-full"
+              fit="contain"
+              lazy
+            >
+              <template #loader> <VaProgressCircle indeterminate /> </template
+            ></VaImage>
+            <VaFileUpload
+              v-model="newImage"
+              :disabled="uploading"
+              color="onPrimary"
+              type="single"
+              file-types="jpg,png,jpeg"
+            />
+            <p v-if="data.answer?.updatedAt">
+              Last update:
+              {{
+                $d(
+                  data.answer.updatedAt,
+                  {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  },
+                  locale
+                )
+              }}
+              by {{ data.answer.member.name }}
+            </p>
+            <VaButton
+              :disabled="!(newImage || data.answer?.text !== answer)"
+              color="onPrimary"
+              :loading="uploading"
+              @click="submit"
+              >Update</VaButton
+            >
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/app/pages/hunt/[huntSlug]/index.vue b/app/pages/hunt/[huntSlug]/index.vue
index fef31b9..29a794b 100644
--- a/app/pages/hunt/[huntSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTitleStore } from '~/stores/title';
+
 const app = useNuxtApp();
 const { user } = useUserSession();
 const localePath = useLocalePath();
@@ -6,6 +8,8 @@ const { t } = useI18n();
 
 const { name, id } = app.$slugData.huntSlug!;
 
+const titleStore = useTitleStore();
+
 const { data, pending } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
@@ -15,6 +19,8 @@ useHead({
     title: data.value?.name || name
   })
 });
+
+titleStore.title = data.value?.name;
 </script>
 
 <template>
diff --git a/app/stores/title.ts b/app/stores/title.ts
new file mode 100644
index 0000000..d4d39af
--- /dev/null
+++ b/app/stores/title.ts
@@ -0,0 +1,8 @@
+export const useTitleStore = defineStore('title', () => {
+  const title = ref<string | undefined>();
+
+  return { title };
+});
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useTitleStore, import.meta.hot));
+}
diff --git a/bun.lock b/bun.lock
index dba994c..b7fdbbd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@nuxtjs/i18n": "^10.0.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@pinia/nuxt": "0.11.2",
         "@prisma/client": "^6.13.0",
         "@vuestic/nuxt": "^1.0.21",
         "@vuestic/tailwind": "^0.1.5",
@@ -13,6 +14,7 @@
         "h3-zod": "^0.5.3",
         "nuxt": "^4.0.1",
         "nuxt-auth-utils": "^0.5.22",
+        "pinia": "^3.0.3",
         "slugify": "^1.6.6",
         "vue": "^3.5.18",
         "vue-router": "^4.5.1",
@@ -408,6 +410,8 @@
 
     "@phc/format": ["@phc/format@1.0.0", "", {}, "sha512-m7X9U6BG2+J+R1lSOdCiITLLrxm+cWlNI3HUFA92oLO77ObGNzaKdh8pMLqdZcshtkKuV84olNNXDfMc4FezBQ=="],
 
+    "@pinia/nuxt": ["@pinia/nuxt@0.11.2", "", { "dependencies": { "@nuxt/kit": "^3.9.0" }, "peerDependencies": { "pinia": "^3.0.3" } }, "sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg=="],
+
     "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
@@ -574,7 +578,7 @@
 
     "@vue/compiler-vue2": ["@vue/compiler-vue2@2.7.16", "", { "dependencies": { "de-indent": "^1.0.2", "he": "^1.2.0" } }, "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A=="],
 
-    "@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+    "@vue/devtools-api": ["@vue/devtools-api@7.7.7", "", { "dependencies": { "@vue/devtools-kit": "^7.7.7" } }, "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg=="],
 
     "@vue/devtools-core": ["@vue/devtools-core@7.7.7", "", { "dependencies": { "@vue/devtools-kit": "^7.7.7", "@vue/devtools-shared": "^7.7.7", "mitt": "^3.0.1", "nanoid": "^5.1.0", "pathe": "^2.0.3", "vite-hot-client": "^2.0.4" }, "peerDependencies": { "vue": "^3.0.0" } }, "sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ=="],
 
@@ -1470,6 +1474,8 @@
 
     "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
 
+    "pinia": ["pinia@3.0.3", "", { "dependencies": { "@vue/devtools-api": "^7.7.2" }, "peerDependencies": { "typescript": ">=4.4.4", "vue": "^2.7.0 || ^3.5.11" }, "optionalPeers": ["typescript"] }, "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA=="],
+
     "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
 
     "pkg-types": ["pkg-types@2.2.0", "", { "dependencies": { "confbox": "^0.2.2", "exsolve": "^1.0.7", "pathe": "^2.0.3" } }, "sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ=="],
@@ -2194,6 +2200,10 @@
 
     "vite-plugin-checker/npm-run-path": ["npm-run-path@6.0.0", "", { "dependencies": { "path-key": "^4.0.0", "unicorn-magic": "^0.3.0" } }, "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA=="],
 
+    "vue-i18n/@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+
+    "vue-router/@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+
     "winston/is-stream": ["is-stream@2.0.1", "", {}, "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="],
 
     "winston/readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
@@ -2216,6 +2226,8 @@
 
     "@intlify/vue-i18n-extensions/vue-i18n/@intlify/core-base": ["@intlify/core-base@10.0.8", "", { "dependencies": { "@intlify/message-compiler": "10.0.8", "@intlify/shared": "10.0.8" } }, "sha512-FoHslNWSoHjdUBLy35bpm9PV/0LVI/DSv9L6Km6J2ad8r/mm0VaGg06C40FqlE8u2ADcGUM60lyoU7Myo4WNZQ=="],
 
+    "@intlify/vue-i18n-extensions/vue-i18n/@vue/devtools-api": ["@vue/devtools-api@6.6.4", "", {}, "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="],
+
     "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
 
     "@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 99f8b26..39fd40b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,11 +8,9 @@ export default defineNuxtConfig({
     'nuxt-auth-utils',
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
-    '@vuestic/nuxt'
+    '@vuestic/nuxt',
+    '@pinia/nuxt'
   ],
-  prisma: {
-    generateClient: false
-  },
   i18n: {
     locales: [
       {
diff --git a/package.json b/package.json
index 35b41c2..2007444 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/i18n": "^10.0.3",
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@pinia/nuxt": "0.11.2",
     "@prisma/client": "^6.13.0",
     "@vuestic/nuxt": "^1.0.21",
     "@vuestic/tailwind": "^0.1.5",
@@ -21,6 +22,7 @@
     "h3-zod": "^0.5.3",
     "nuxt": "^4.0.1",
     "nuxt-auth-utils": "^0.5.22",
+    "pinia": "^3.0.3",
     "slugify": "^1.6.6",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
diff --git a/server/api/quest/[questId]/index.get.ts b/server/api/quest/[questId]/index.get.ts
new file mode 100644
index 0000000..76bc164
--- /dev/null
+++ b/server/api/quest/[questId]/index.get.ts
@@ -0,0 +1,87 @@
+import { useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const { questId } = await useValidatedParams(
+    event,
+    z.object({
+      questId: zh.numAsString
+    })
+  );
+
+  const user = await getUserSession(event);
+  const userId = user.user?.id || 0;
+
+  const _quest = await prisma.huntQuest.findUnique({
+    where: {
+      id: questId
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      question: true,
+      optional: true,
+      pictureRequired: true,
+      textRequired: true,
+      textType: true,
+      textUnit: true,
+      points: true,
+      extraPoints: true,
+      extraText: true,
+      hunt: {
+        select: {
+          id: true,
+          name: true
+        }
+      },
+      answers: {
+        select: {
+          id: true,
+          text: true,
+          picture: true,
+          score: true,
+          review: true,
+          member: {
+            select: {
+              name: true
+            }
+          },
+          reviewer: {
+            select: {
+              name: true
+            }
+          },
+          createdAt: true,
+          updatedAt: true
+        },
+        where: {
+          team: {
+            OR: [
+              {
+                ownerId: userId
+              },
+              {
+                members: {
+                  some: {
+                    memberId: userId
+                  }
+                }
+              }
+            ]
+          }
+        }
+      }
+    }
+  });
+
+  if (!_quest) {
+    throw createError({ status: 404, statusText: 'Not found!' });
+  }
+
+  const { answers, ...quest } = _quest;
+
+  const answer = answers.length > 0 ? answers[0] : null;
+
+  return { answer, ...quest };
+});
diff --git a/shared/types/enums.ts b/shared/types/enums.ts
new file mode 100644
index 0000000..e69de29