Adds the whole disclaimer feature

resources/js/Pages/Session/Result.vue

@@ -24,6 +24,25 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  durationSeconds: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const formattedDuration = computed(() => {
+  const total = props.durationSeconds
+  const hours = Math.floor(total / 3600)
+  const minutes = Math.floor((total % 3600) / 60)
+  const seconds = total % 60
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds}s`
+  }
+  return `${seconds}s`
 })
 
 const resultDisplay = computed(() => {
@@ -87,14 +106,22 @@ const resultDisplay = computed(() => {
         <!-- Session Details -->
         <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">
+            <dl class="grid grid-cols-3 gap-4 text-sm">
                 <div>
                     <dt class="text-gray-400">Category</dt>
                     <dd class="text-white font-medium">{{ categoryName }}</dd>
                 </div>
-                <div>
-                    <dt class="text-gray-400">Completed</dt>
-                    <dd class="text-white font-medium">{{ new Date(session.completed_at).toLocaleDateString() }}</dd>
+                <div class="flex justify-center">
+                    <div>
+                        <dt class="text-gray-400">Completed</dt>
+                        <dd class="text-white font-medium">{{ new Date(session.completed_at).toLocaleDateString() }}</dd>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <div>
+                        <dt class="text-gray-400">Duration</dt>
+                        <dd class="text-white font-medium">{{ formattedDuration }}</dd>
+                    </div>
                 </div>
             </dl>
         </div>

resources/js/Pages/Session/Show.vue

@@ -76,6 +76,7 @@ const saveAnswer = (questionId) => {
     }, {
       preserveScroll: true,
       preserveState: true,
+      showProgress: false,
       only: ['answers'],
       onStart: () => { processing.value = true },
       onFinish: () => { processing.value = false },
@@ -100,6 +101,7 @@ const saveComments = () => {
     additionalComments.put(`/sessions/${props.session.id}`, {
       preserveScroll: true,
       preserveState: true,
+      showProgress: false,
     })
   }, 1000)
 }
@@ -223,7 +225,7 @@ const completeSession = async () => {
 
         <div class="space-y-8">
             <!-- User Info Section -->
-            <div class="border border-white/[0.06] rounded-xl p-8">
+            <div class="bg-white/[0.03] 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">
@@ -242,7 +244,7 @@ const completeSession = async () => {
             <div
                 v-for="group in questionGroups"
                 :key="group.id"
-                class="border border-white/[0.06] rounded-xl p-8"
+                class="bg-white/[0.03] 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>
@@ -269,7 +271,7 @@ const completeSession = async () => {
             </div>
 
             <!-- Additional Comments -->
-            <div class="border border-white/[0.06] rounded-xl p-8">
+            <div class="bg-white/[0.03] 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"
@@ -301,6 +303,7 @@ const completeSession = async () => {
 
             <div class="flex justify-between items-center">
                 <AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" :href="`/screening/${session.screening_id}/result`" data-cy="back-to-screening">
+                    <ArrowLeftIcon class="h-5 w-5" />
                     Back
                 </AppButton>