finishes 13 and 14
This commit is contained in:
56
resources/js/Pages/ErrorPage.vue
Normal file
56
resources/js/Pages/ErrorPage.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import AppButton from '@/Components/AppButton.vue'
|
||||
import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
|
||||
|
||||
defineOptions({ layout: AppLayout })
|
||||
|
||||
const props = defineProps({
|
||||
status: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const errorMessages = {
|
||||
403: {
|
||||
title: 'Forbidden',
|
||||
description: 'You do not have permission to access this page.',
|
||||
},
|
||||
404: {
|
||||
title: 'Page Not Found',
|
||||
description: 'The page you are looking for could not be found.',
|
||||
},
|
||||
500: {
|
||||
title: 'Server Error',
|
||||
description: 'Something went wrong on our end. Please try again later.',
|
||||
},
|
||||
503: {
|
||||
title: 'Service Unavailable',
|
||||
description: 'We are currently performing maintenance. Please check back soon.',
|
||||
},
|
||||
}
|
||||
|
||||
const error = computed(() => errorMessages[props.status] ?? {
|
||||
title: 'Error',
|
||||
description: 'An unexpected error occurred.',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="error.title" />
|
||||
|
||||
<div class="flex items-center justify-center py-16">
|
||||
<div class="text-center max-w-md mx-auto px-4">
|
||||
<ExclamationTriangleIcon class="h-16 w-16 text-primary mx-auto mb-6" />
|
||||
<p class="text-6xl font-bold text-primary mb-4">{{ status }}</p>
|
||||
<h1 class="text-2xl font-bold text-white mb-2">{{ error.title }}</h1>
|
||||
<p class="text-gray-400 mb-8">{{ error.description }}</p>
|
||||
<AppButton size="lg" href="/">
|
||||
Back to Home
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,7 +24,7 @@ const handleContinue = () => {
|
||||
You will first complete a short pre-screening questionnaire, followed by a detailed category-specific checklist
|
||||
to determine whether to pursue (Go), decline (No Go), or escalate (Consult Leadership) an opportunity.
|
||||
</p>
|
||||
<AppButton size="lg" @click="handleContinue">
|
||||
<AppButton size="lg" @click="handleContinue" data-cy="start-screening">
|
||||
Continue
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
@@ -45,10 +45,10 @@ const handleStartCategory = (categoryId) => {
|
||||
<!-- Score Display -->
|
||||
<div class="rounded-lg p-6 mb-8" :class="passed ? 'bg-green-500/10 border border-green-500/30' : 'bg-red-500/10 border border-red-500/30'">
|
||||
<div class="text-center">
|
||||
<p class="text-5xl font-bold mb-2" :class="passed ? 'text-green-500' : 'text-red-500'">
|
||||
<p class="text-5xl font-bold mb-2" :class="passed ? 'text-green-500' : 'text-red-500'" data-cy="screening-score">
|
||||
{{ score }} / {{ totalQuestions }}
|
||||
</p>
|
||||
<p class="text-xl font-semibold" :class="passed ? 'text-green-400' : 'text-red-400'">
|
||||
<p class="text-xl font-semibold" :class="passed ? 'text-green-400' : 'text-red-400'" :data-cy="passed ? 'result-passed' : 'result-failed'">
|
||||
{{ passed ? 'Passed' : 'No Go' }}
|
||||
</p>
|
||||
<p class="text-gray-400 mt-2">
|
||||
@@ -65,7 +65,7 @@ const handleStartCategory = (categoryId) => {
|
||||
</div>
|
||||
|
||||
<!-- Passed: Show category picker -->
|
||||
<div v-else>
|
||||
<div v-else data-cy="category-select">
|
||||
<h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
|
||||
@@ -48,6 +48,7 @@ const allAnswered = computed(() => {
|
||||
v-for="(question, index) in questions"
|
||||
:key="index"
|
||||
class="bg-surface/50 rounded-lg p-5"
|
||||
:data-cy="`screening-answer-${index + 1}`"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="text-gray-400 font-mono text-sm mt-1 shrink-0">{{ index + 1 }}.</span>
|
||||
@@ -61,6 +62,7 @@ const allAnswered = computed(() => {
|
||||
value="yes"
|
||||
v-model="form.answers[index + 1]"
|
||||
class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
|
||||
data-cy="yes"
|
||||
/>
|
||||
<span class="text-white">Yes</span>
|
||||
</label>
|
||||
@@ -71,6 +73,7 @@ const allAnswered = computed(() => {
|
||||
value="no"
|
||||
v-model="form.answers[index + 1]"
|
||||
class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
|
||||
data-cy="no"
|
||||
/>
|
||||
<span class="text-white">No</span>
|
||||
</label>
|
||||
@@ -84,7 +87,7 @@ const allAnswered = computed(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing">
|
||||
<AppButton size="lg" @click="handleSubmit" :loading="form.processing" :disabled="!allAnswered || form.processing" data-cy="submit-screening">
|
||||
Submit
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
@@ -63,12 +63,13 @@ const resultDisplay = computed(() => {
|
||||
<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">
|
||||
<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>
|
||||
@@ -107,7 +108,7 @@ const resultDisplay = computed(() => {
|
||||
|
||||
<!-- Again button -->
|
||||
<div class="flex justify-center">
|
||||
<AppButton size="lg" href="/">
|
||||
<AppButton size="lg" href="/" data-cy="start-new">
|
||||
Again
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
@@ -157,7 +157,7 @@ const hasScoredAnswers = computed(() => {
|
||||
|
||||
<!-- Complete button - now enabled -->
|
||||
<div class="flex justify-end mt-8">
|
||||
<AppButton size="lg" @click="completeSession">
|
||||
<AppButton size="lg" @click="completeSession" data-cy="complete-session">
|
||||
Complete
|
||||
</AppButton>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user