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>