Page Stubs and Click-Through Flow

This commit is contained in:
2026-02-03 10:14:00 +01:00
parent 3684d9ef6b
commit e8be239c32
27 changed files with 595 additions and 31 deletions

View File

@@ -1,14 +1,25 @@
<script setup>
import { Head } from '@inertiajs/vue3';
import { Head, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
defineOptions({ layout: AppLayout })
const handleContinue = () => {
router.post('/screening')
}
</script>
<template>
<Head title="Welcome" />
<div class="min-h-screen flex items-center justify-center bg-surface">
<div class="text-center">
<div class="flex items-center justify-center py-16">
<div class="text-center max-w-2xl mx-auto px-4">
<h1 class="text-4xl font-bold text-white mb-4">Go / No Go</h1>
<p class="text-gray-400">Baker Tilly International Questionnaire Application</p>
<p class="text-gray-400 mb-8">Baker Tilly International Questionnaire Application</p>
<AppButton size="lg" @click="handleContinue">
Continue
</AppButton>
</div>
</div>
</template>

View File

@@ -0,0 +1,51 @@
<script setup>
import { Head, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
defineOptions({ layout: AppLayout })
const props = defineProps({
screening: {
type: Object,
required: true,
},
categories: {
type: Array,
required: true,
},
})
const handleStartCategory = (categoryId) => {
router.post('/sessions', {
category_id: categoryId,
screening_id: props.screening.id,
})
}
</script>
<template>
<Head title="Screening Result" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">Screening Result</h1>
<div class="bg-surface/50 rounded-lg p-6 mb-8">
<p class="text-gray-400 text-center mb-4">Your screening result: Passed</p>
</div>
<div class="space-y-4">
<h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
<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"
>
<span class="text-white font-medium">{{ category.name }}</span>
<AppButton size="md" @click="handleStartCategory(category.id)">
Start
</AppButton>
</div>
</div>
</div>
</template>

View File

@@ -0,0 +1,36 @@
<script setup>
import { Head, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
defineOptions({ layout: AppLayout })
const props = defineProps({
screening: {
type: Object,
required: true,
},
})
const handleSubmit = () => {
router.put(`/screening/${props.screening.id}`)
}
</script>
<template>
<Head title="Pre-Screening Questions" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">Pre-Screening Questions</h1>
<div class="bg-surface/50 rounded-lg p-6 mb-8">
<p class="text-gray-400 text-center">10 Yes/No questions will appear here</p>
</div>
<div class="flex justify-end">
<AppButton size="lg" @click="handleSubmit">
Submit
</AppButton>
</div>
</div>
</template>

View File

@@ -0,0 +1,32 @@
<script setup>
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,
},
})
</script>
<template>
<Head title="Session Result" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">Session Result</h1>
<div class="bg-surface/50 rounded-lg p-6 mb-8">
<p class="text-gray-400 text-center">Your result will appear here</p>
</div>
<div class="flex justify-center">
<AppButton size="lg" href="/">
Again
</AppButton>
</div>
</div>
</template>

View File

@@ -0,0 +1,44 @@
<script setup>
import { Head, router } 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,
},
})
const handleComplete = () => {
router.put(`/sessions/${props.session.id}`)
}
</script>
<template>
<Head :title="`${session.category.name} Questionnaire`" />
<div class="max-w-4xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-white mb-6">{{ session.category.name }} Questionnaire</h1>
<div class="space-y-6">
<div class="bg-surface/50 rounded-lg p-6">
<h2 class="text-xl font-semibold text-white mb-4">Basic Info Form</h2>
<p class="text-gray-400">Client and lead firm information will appear here</p>
</div>
<div class="bg-surface/50 rounded-lg p-6">
<h2 class="text-xl font-semibold text-white mb-4">Questions</h2>
<p class="text-gray-400">Category questions will appear here</p>
</div>
</div>
<div class="flex justify-end mt-8">
<AppButton size="lg" @click="handleComplete">
Complete
</AppButton>
</div>
</div>
</template>