109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { Head } from '@inertiajs/vue3'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import AppButton from '@/Components/AppButton.vue'
|
|
|
|
defineOptions({ layout: AppLayout })
|
|
|
|
const props = defineProps({
|
|
session: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
score: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
result: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
categoryName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const resultDisplay = computed(() => {
|
|
switch (props.result) {
|
|
case 'go':
|
|
return {
|
|
label: 'GO',
|
|
description: 'Pursue this opportunity.',
|
|
bgClass: 'bg-green-500/10 border-green-500/30',
|
|
textClass: 'text-green-500',
|
|
badgeClass: 'bg-green-500',
|
|
}
|
|
case 'consult_leadership':
|
|
return {
|
|
label: 'Consult Leadership',
|
|
description: 'Speak to SL or SSL leadership before proceeding.',
|
|
bgClass: 'bg-amber-500/10 border-amber-500/30',
|
|
textClass: 'text-amber-500',
|
|
badgeClass: 'bg-amber-500',
|
|
}
|
|
case 'no_go':
|
|
default:
|
|
return {
|
|
label: 'NO GO',
|
|
description: 'Do not pursue this opportunity.',
|
|
bgClass: 'bg-red-500/10 border-red-500/30',
|
|
textClass: 'text-red-500',
|
|
badgeClass: 'bg-red-500',
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${categoryName} - Result`" />
|
|
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold text-white mb-6">{{ categoryName }} — Result</h1>
|
|
|
|
<!-- Result Card -->
|
|
<div class="rounded-lg p-8 mb-8 border" :class="resultDisplay.bgClass" data-cy="session-result">
|
|
<div class="text-center">
|
|
<div class="mb-4">
|
|
<span
|
|
class="inline-block px-6 py-3 rounded-lg text-white text-2xl font-bold"
|
|
:class="resultDisplay.badgeClass"
|
|
:data-cy="'result-' + result"
|
|
>
|
|
{{ resultDisplay.label }}
|
|
</span>
|
|
</div>
|
|
<p class="text-5xl font-bold mb-2" :class="resultDisplay.textClass">
|
|
{{ score }} points
|
|
</p>
|
|
<p class="text-gray-400 text-lg mt-4">
|
|
{{ resultDisplay.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Session Details -->
|
|
<div class="bg-surface/50 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>
|
|
<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>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- Again button -->
|
|
<div class="flex justify-center">
|
|
<AppButton size="lg" href="/" data-cy="start-new">
|
|
Again
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</template>
|