Fixes the configuration file

resources/js/Pages/Screening/Result.vue

@@ -71,7 +71,7 @@ const handleStartCategory = (categoryId) => {
                 <div
                     v-for="category in categories"
                     :key="category.id"
-                    class="bg-surface/50 rounded-lg p-4 flex items-center justify-between hover:bg-surface/70 transition-colors"
+                    class="rounded-lg p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
                 >
                     <span class="text-white font-medium">{{ category.name }}</span>
                     <AppButton size="md" @click="handleStartCategory(category.id)">

resources/js/Pages/Screening/Show.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
@@ -32,6 +32,18 @@ const handleSubmit = () => {
   form.put(`/screening/${props.screening.id}`)
 }
 
+const currentScore = computed(() => {
+  return Object.values(form.answers).reduce((score, value) => {
+    if (value === 'yes') return score + 1
+    if (value === 'unknown') return score + 0.5
+    return score
+  }, 0)
+})
+
+watch(currentScore, (score) => {
+  console.log('Current screening score:', score)
+})
+
 const allAnswered = computed(() => {
   return Object.values(form.answers).every(v => v !== null)
 })
@@ -42,13 +54,13 @@ const allAnswered = computed(() => {
 
     <div class="max-w-4xl mx-auto px-4 py-8">
         <h1 class="text-3xl font-bold text-white mb-2">Pre-Screening Questions</h1>
-        <p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" answer scores 1 point. You need at least 5 points to pass.</p>
+        <p class="text-gray-400 mb-8">Answer all 10 questions to proceed. Each "Yes" scores 1 point, "I don't know" scores half a point. You need at least 5 points to pass.</p>
 
         <div class="space-y-4 mb-8">
             <div
                 v-for="(question, index) in questions"
                 :key="index"
-                class="bg-surface/50 rounded-lg p-5"
+                class="rounded-lg p-5"
                 :data-cy="`screening-answer-${index + 1}`"
             >
                 <div class="flex items-start gap-4">
@@ -60,6 +72,7 @@ const allAnswered = computed(() => {
                             :name="`question-${index + 1}`"
                             :options="[
                                 { value: 'yes', label: 'Yes' },
+                                { value: 'unknown', label: 'I don\'t know' },
                                 { value: 'no', label: 'No' },
                             ]"
                         />

resources/js/Pages/Session/Result.vue

@@ -85,7 +85,7 @@ const resultDisplay = computed(() => {
         </div>
 
         <!-- Session Details -->
-        <div class="bg-surface/50 rounded-lg p-6 mb-8">
+        <div class="rounded-lg p-6 mb-8">
             <h2 class="text-xl font-semibold text-white mb-4">Session Details</h2>
             <dl class="grid grid-cols-2 gap-4 text-sm">
                 <div>

resources/js/Pages/Session/Show.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { computed, reactive, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref, watch, nextTick } from 'vue'
 import { Head, useForm, router } from '@inertiajs/vue3'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
+import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
 import QuestionCard from '@/Components/QuestionCard.vue'
 
 defineOptions({ layout: AppLayout })
@@ -39,6 +40,24 @@ const initializeAnswers = () => {
 }
 initializeAnswers()
 
+const bottomBackButtonRef = ref(null)
+const showStickyBack = ref(false)
+
+let observer = null
+
+onMounted(() => {
+  if (!bottomBackButtonRef.value) return
+  observer = new IntersectionObserver(
+    ([entry]) => { showStickyBack.value = !entry.isIntersecting },
+    { threshold: 0 }
+  )
+  observer.observe(bottomBackButtonRef.value.$el || bottomBackButtonRef.value)
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
 // Validation state
 const validationErrors = ref({})
 const processing = ref(false)
@@ -175,6 +194,27 @@ const completeSession = async () => {
     <Head :title="`${session.category.name} Questionnaire`" />
 
     <div class="max-w-3xl mx-auto px-4 py-10">
+        <Transition
+            enter-active-class="transition-all duration-200 ease-out"
+            enter-from-class="opacity-0 translate-x-4"
+            enter-to-class="opacity-100 translate-x-0"
+            leave-active-class="transition-all duration-150 ease-in"
+            leave-from-class="opacity-100 translate-x-0"
+            leave-to-class="opacity-0 translate-x-4"
+        >
+            <div v-if="showStickyBack" class="fixed top-[88px] right-6 z-40">
+                <AppButton
+                    variant="ghost"
+                    size="lg"
+                    :href="`/screening/${session.screening_id}/result`"
+                    data-cy="sticky-back"
+                >
+                    <ArrowLeftIcon class="h-5 w-5" />
+                    Back
+                </AppButton>
+            </div>
+        </Transition>
+
         <!-- Title area -->
         <div class="mb-10">
             <h1 class="text-2xl font-bold text-white">{{ session.category.name }} Questionnaire</h1>
@@ -183,7 +223,7 @@ const completeSession = async () => {
 
         <div class="space-y-8">
             <!-- User Info Section -->
-            <div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
+            <div class="border border-white/[0.06] rounded-xl p-8">
                 <h2 class="text-lg font-semibold text-white mb-5">Basic Information</h2>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -202,7 +242,7 @@ const completeSession = async () => {
             <div
                 v-for="group in questionGroups"
                 :key="group.id"
-                class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8"
+                class="border border-white/[0.06] rounded-xl p-8"
             >
                 <div class="flex items-center gap-3 mb-1">
                     <div class="w-2 h-2 rounded-full bg-primary/60"></div>
@@ -229,7 +269,7 @@ const completeSession = async () => {
             </div>
 
             <!-- Additional Comments -->
-            <div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
+            <div class="border border-white/[0.06] rounded-xl p-8">
                 <h2 class="text-lg font-semibold text-white mb-5">Additional Comments</h2>
                 <textarea
                     v-model="additionalComments.additional_comments"
@@ -260,7 +300,7 @@ const completeSession = async () => {
             </Transition>
 
             <div class="flex justify-between items-center">
-                <AppButton variant="ghost" size="lg" :href="`/screening/${session.screening_id}/result`" data-cy="back-to-screening">
+                <AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" :href="`/screening/${session.screening_id}/result`" data-cy="back-to-screening">
                     Back
                 </AppButton>