Page Stubs and Click-Through Flow

resources/js/Components/AppButton.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { computed } from 'vue'
+import { Link } from '@inertiajs/vue3'
+import { ArrowPathIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (value) => ['primary', 'danger', 'ghost'].includes(value),
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+  href: {
+    type: String,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click'])
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const component = computed(() => props.href ? Link : 'button')
+
+const buttonClasses = computed(() => {
+  const classes = [
+    'inline-flex items-center justify-center gap-2',
+    'font-semibold rounded-lg',
+    'transition-all duration-200',
+    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface',
+  ]
+
+  // Size classes
+  if (props.size === 'sm') {
+    classes.push('px-3 py-1.5 text-sm')
+  } else if (props.size === 'md') {
+    classes.push('px-5 py-2.5 text-base')
+  } else if (props.size === 'lg') {
+    classes.push('px-7 py-3 text-lg')
+  }
+
+  // Variant classes
+  if (isDisabled.value) {
+    classes.push('opacity-50 cursor-not-allowed')
+    if (props.variant === 'primary') {
+      classes.push('bg-primary text-gray-900')
+    } else if (props.variant === 'danger') {
+      classes.push('bg-red-500 text-white')
+    } else if (props.variant === 'ghost') {
+      classes.push('bg-transparent text-gray-400')
+    }
+  } else {
+    if (props.variant === 'primary') {
+      classes.push(
+        'bg-primary text-gray-900',
+        'hover:bg-secondary hover:text-white',
+        'focus:ring-primary'
+      )
+    } else if (props.variant === 'danger') {
+      classes.push(
+        'bg-red-500 text-white',
+        'hover:bg-red-600',
+        'focus:ring-red-500'
+      )
+    } else if (props.variant === 'ghost') {
+      classes.push(
+        'bg-transparent text-gray-400',
+        'hover:text-white hover:bg-white/10',
+        'focus:ring-gray-400'
+      )
+    }
+  }
+
+  return classes.join(' ')
+})
+
+const handleClick = (event) => {
+  if (!isDisabled.value) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="component"
+    :href="href"
+    :class="buttonClasses"
+    :disabled="isDisabled"
+    :type="href ? undefined : 'button'"
+    v-bind="$attrs"
+    @click="handleClick"
+  >
+    <ArrowPathIcon v-if="loading" class="h-5 w-5 animate-spin" />
+    <slot />
+  </component>
+</template>

resources/js/Components/AppLogo.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div :class="['font-bold text-primary', $props.class]">
+    Piccadilly
+  </div>
+</template>

resources/js/Components/PageHeader.vue

@@ -0,0 +1,21 @@
+<script setup>
+import AppLogo from '@/Components/AppLogo.vue'
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <header class="sticky top-0 z-50 bg-surface border-b border-gray-700">
+    <div class="px-6 py-4 flex items-center gap-6">
+      <AppLogo class="text-2xl" />
+      <h1 v-if="title" class="text-xl font-semibold text-white">
+        {{ title }}
+      </h1>
+    </div>
+  </header>
+</template>

resources/js/Components/ScoreIndicator.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  score: {
+    type: Number,
+    default: 0,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const scoreData = computed(() => {
+  if (props.score >= 10) {
+    return {
+      color: 'green',
+      bgClass: 'bg-green-500',
+      textClass: 'text-green-500',
+      label: 'GO',
+    }
+  } else if (props.score >= 5) {
+    return {
+      color: 'amber',
+      bgClass: 'bg-amber-500',
+      textClass: 'text-amber-500',
+      label: 'Consult Leadership',
+    }
+  } else if (props.score >= 1) {
+    return {
+      color: 'red',
+      bgClass: 'bg-red-500',
+      textClass: 'text-red-500',
+      label: 'NO GO',
+    }
+  } else {
+    return {
+      color: 'gray',
+      bgClass: 'bg-gray-500',
+      textClass: 'text-gray-400',
+      label: 'No Score',
+    }
+  }
+})
+</script>
+
+<template>
+  <div v-if="visible" class="inline-flex items-center gap-3">
+    <div class="flex items-baseline gap-2">
+      <span class="text-4xl font-bold" :class="scoreData.textClass">
+        {{ score }}
+      </span>
+      <span class="text-sm text-gray-400">points</span>
+    </div>
+    <div
+      :class="[
+        scoreData.bgClass,
+        'px-4 py-2 rounded-lg text-white font-semibold text-sm',
+      ]"
+    >
+      {{ scoreData.label }}
+    </div>
+  </div>
+</template>

resources/js/Layouts/AppLayout.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+import PageHeader from '@/Components/PageHeader.vue'
+
+const page = usePage()
+
+const pageTitle = computed(() => {
+  return page.props?.title || ''
+})
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col">
+    <PageHeader :title="pageTitle" />
+    <main class="flex-1">
+      <slot />
+    </main>
+  </div>
+</template>

resources/js/Pages/Landing.vue

@@ -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>

resources/js/Pages/Screening/Result.vue

@@ -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>

resources/js/Pages/Screening/Show.vue

@@ -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>

resources/js/Pages/Session/Result.vue

@@ -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>

resources/js/Pages/Session/Show.vue

@@ -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>