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>