From e9b3b37e0d33aa60cff787331ca954b708f0755e Mon Sep 17 00:00:00 2001
From: hermes <hermes@srvr.nu>
Date: Thu, 30 Jul 2026 18:33:36 +0000
Subject: [PATCH] W3: add TodayView, Welcome wizard, CostDisplay,
 InterviewPrepModal; update router and App nav

---
 apps/web/src/App.vue                          |  34 ++-
 apps/web/src/components/CostDisplay.vue       |  55 ++++
 .../web/src/components/InterviewPrepModal.vue | 121 ++++++++
 apps/web/src/router/index.ts                  |  12 +-
 apps/web/src/views/TodayView.vue              | 122 ++++++++
 apps/web/src/views/Welcome.vue                | 281 ++++++++++++++++++
 6 files changed, 623 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/CostDisplay.vue
 create mode 100644 apps/web/src/components/InterviewPrepModal.vue
 create mode 100644 apps/web/src/views/TodayView.vue
 create mode 100644 apps/web/src/views/Welcome.vue

diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 628f7a3..51ccfb0 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,6 +1,37 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { onMounted, ref, watch } from 'vue'
+import { RouterLink, RouterView, useRouter } from 'vue-router'
 import ToastHost from './components/ToastHost.vue'
+import * as api from '@/api'
+import type { Profile } from '@/types'
+
+const router = useRouter()
+const profile = ref<Profile | null>(null)
+const profileChecked = ref(false)
+
+async function checkProfile() {
+  try {
+    profile.value = await api.getProfile()
+  } catch {
+    // API not available, let normal routing proceed
+  } finally {
+    profileChecked.value = true
+  }
+}
+
+onMounted(() => {
+  checkProfile()
+})
+
+// Redirect to /welcome when profile.full_name is empty (onboarding wizard)
+watch(profileChecked, (ready) => {
+  if (ready && profile.value && !profile.value.full_name) {
+    const currentRoute = router.currentRoute.value
+    if (currentRoute.name !== 'welcome') {
+      router.push('/welcome')
+    }
+  }
+})
 </script>
 
 <template>
@@ -9,6 +40,7 @@ import ToastHost from './components/ToastHost.vue'
       <div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-6">
         <span class="text-lg font-bold text-indigo-700">Jobhunt</span>
         <nav class="flex gap-4 text-sm">
+          <RouterLink to="/today" class="text-gray-600 hover:text-indigo-700">Today</RouterLink>
           <RouterLink to="/cv" class="text-gray-600 hover:text-indigo-700">CV</RouterLink>
           <RouterLink to="/research" class="text-gray-600 hover:text-indigo-700">Research</RouterLink>
           <RouterLink to="/applications" class="text-gray-600 hover:text-indigo-700">Applications</RouterLink>
diff --git a/apps/web/src/components/CostDisplay.vue b/apps/web/src/components/CostDisplay.vue
new file mode 100644
index 0000000..e30ec5a
--- /dev/null
+++ b/apps/web/src/components/CostDisplay.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import * as api from '@/api'
+import type { TaskRun } from '@/types'
+
+const tasks = ref<TaskRun[]>([])
+const loading = ref(true)
+const error = ref(false)
+
+const totalTokensIn = computed(() =>
+  tasks.value.reduce((sum, t) => sum + (t.tokens_in ?? 0), 0)
+)
+const totalTokensOut = computed(() =>
+  tasks.value.reduce((sum, t) => sum + (t.tokens_out ?? 0), 0)
+)
+const totalCost = computed(() =>
+  tasks.value.reduce((sum, t) => sum + (t.cost ?? 0), 0)
+)
+const hasCost = computed(() => tasks.value.some((t) => t.cost != null))
+
+async function loadTasks() {
+  try {
+    tasks.value = await api.getTelemetryTasks()
+  } catch {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadTasks)
+</script>
+
+<template>
+  <div class="bg-white rounded-lg border border-gray-200 p-4">
+    <h3 class="font-semibold text-sm text-gray-700 mb-2">LLM Cost Summary</h3>
+    <div v-if="loading" class="text-gray-400 text-sm">Loading...</div>
+    <div v-else-if="error" class="text-red-600 text-sm">Failed to load cost data.</div>
+    <div v-else class="space-y-1 text-sm">
+      <div class="flex justify-between">
+        <span class="text-gray-600">Tokens in:</span>
+        <span class="font-medium">{{ totalTokensIn.toLocaleString() }}</span>
+      </div>
+      <div class="flex justify-between">
+        <span class="text-gray-600">Tokens out:</span>
+        <span class="font-medium">{{ totalTokensOut.toLocaleString() }}</span>
+      </div>
+      <div v-if="hasCost" class="flex justify-between border-t border-gray-100 pt-1">
+        <span class="text-gray-600">Total cost:</span>
+        <span class="font-medium">{{ totalCost.toFixed(4) }}</span>
+      </div>
+      <div class="text-xs text-gray-400 mt-1">{{ tasks.length }} task runs</div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/web/src/components/InterviewPrepModal.vue b/apps/web/src/components/InterviewPrepModal.vue
new file mode 100644
index 0000000..25c5e38
--- /dev/null
+++ b/apps/web/src/components/InterviewPrepModal.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useToastStore } from '@/stores/toast'
+import * as api from '@/api'
+import { HttpError } from '@/api'
+import type { InterviewPrepResponse } from '@/types'
+
+const props = defineProps<{
+  applicationId: string
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const toast = useToastStore()
+const loading = ref(false)
+const saving = ref(false)
+const prepContent = ref('')
+const artifactId = ref<string | null>(null)
+
+async function generatePrep() {
+  loading.value = true
+  prepContent.value = ''
+  artifactId.value = null
+  try {
+    const res: InterviewPrepResponse = await api.interviewPrep(props.applicationId)
+    prepContent.value = res.content
+    artifactId.value = res.artifact_id
+    toast.push('Interview prep generated', 'success')
+  } catch (err) {
+    let msg = 'Failed to generate interview prep'
+    if (err instanceof HttpError) {
+      const body = err.body as { error?: { message?: string } } | null
+      msg = body?.error?.message ?? msg
+    }
+    toast.push(msg, 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function savePrep() {
+  if (!prepContent.value.trim()) return
+  saving.value = true
+  try {
+    const res: InterviewPrepResponse = await api.interviewPrep(props.applicationId)
+    artifactId.value = res.artifact_id
+    toast.push('Interview prep saved as new version', 'success')
+  } catch {
+    toast.push('Failed to save interview prep', 'error')
+  } finally {
+    saving.value = false
+  }
+}
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    @click.self="close"
+  >
+    <div class="bg-white rounded-lg shadow-xl max-w-3xl w-full mx-4 max-h-[80vh] flex flex-col">
+      <!-- Header -->
+      <div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+        <h2 class="font-semibold text-lg">Interview Prep</h2>
+        <button @click="close" class="text-gray-400 hover:text-gray-700 text-xl leading-none">&times;</button>
+      </div>
+
+      <!-- Body -->
+      <div class="flex-1 overflow-y-auto p-4 space-y-4">
+        <div v-if="!prepContent && !loading" class="text-center py-8">
+          <p class="text-gray-500 mb-4">
+            Generate likely interview questions with suggested answers based on your profile and the job posting.
+          </p>
+          <button
+            @click="generatePrep"
+            class="bg-indigo-600 text-white px-4 py-2 rounded text-sm"
+          >
+            Generate Interview Prep
+          </button>
+        </div>
+
+        <div v-if="loading" class="text-gray-500 text-center py-8">Generating interview prep...</div>
+
+        <div v-if="prepContent && !loading" class="space-y-3">
+          <textarea
+            v-model="prepContent"
+            rows="18"
+            class="w-full border rounded px-3 py-2 text-sm font-mono"
+            placeholder="Interview prep content..."
+          ></textarea>
+          <div class="flex gap-3">
+            <button
+              @click="savePrep"
+              :disabled="saving"
+              class="bg-green-600 text-white px-4 py-2 rounded text-sm disabled:opacity-50"
+            >
+              {{ saving ? 'Saving...' : 'Save as New Version' }}
+            </button>
+            <button
+              @click="generatePrep"
+              class="text-sm text-indigo-600 hover:underline"
+            >
+              Regenerate
+            </button>
+          </div>
+          <div v-if="artifactId" class="text-xs text-gray-400">
+            Artifact ID: <code>{{ artifactId.slice(0, 8) }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
index 2405ae6..5ed2340 100644
--- a/apps/web/src/router/index.ts
+++ b/apps/web/src/router/index.ts
@@ -2,7 +2,17 @@ import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 
 const routes: RouteRecordRaw[] = [
-  { path: '/', redirect: '/cv' },
+  { path: '/', redirect: '/today' },
+  {
+    path: '/welcome',
+    name: 'welcome',
+    component: () => import('@/views/Welcome.vue')
+  },
+  {
+    path: '/today',
+    name: 'today',
+    component: () => import('@/views/TodayView.vue')
+  },
   {
     path: '/cv',
     name: 'cv',
diff --git a/apps/web/src/views/TodayView.vue b/apps/web/src/views/TodayView.vue
new file mode 100644
index 0000000..dc4308e
--- /dev/null
+++ b/apps/web/src/views/TodayView.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToastStore } from '@/stores/toast'
+import * as api from '@/api'
+import CostDisplay from '@/components/CostDisplay.vue'
+import type { TodayResponse } from '@/types'
+
+const toast = useToastStore()
+const router = useRouter()
+
+const today = ref<TodayResponse | null>(null)
+const loading = ref(true)
+
+const nudgeIds = computed(() => new Set(today.value?.nudges.map((n) => n.application_id) ?? []))
+
+async function loadToday() {
+  try {
+    today.value = await api.getToday()
+  } catch {
+    toast.push('Failed to load today digest', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+function goToApplication(id: string) {
+  router.push(`/applications/${id}`)
+}
+
+function copyNudge(suggestion: string) {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(suggestion).then(
+      () => toast.push('Follow-up draft copied to clipboard', 'success'),
+      () => toast.push('Copy failed', 'error')
+    )
+  } else {
+    toast.push('Clipboard not available', 'error')
+  }
+}
+
+onMounted(loadToday)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <h1 class="text-2xl font-bold">Today</h1>
+
+    <div v-if="loading" class="text-gray-500">Loading...</div>
+
+    <template v-if="!loading && today">
+      <!-- Pending approvals banner -->
+      <div v-if="today.pending_approvals > 0" class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+        <span class="font-medium text-yellow-800">
+          {{ today.pending_approvals }} pending approval{{ today.pending_approvals > 1 ? 's' : '' }} waiting for you.
+        </span>
+      </div>
+
+      <!-- Digest cards -->
+      <section>
+        <h2 class="font-semibold text-lg mb-3">Top Matches Today</h2>
+        <div v-if="today.digest.length === 0" class="text-gray-400 text-sm">No postings in your digest yet.</div>
+        <div v-else class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          <div
+            v-for="item in today.digest"
+            :key="item.application_id"
+            class="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow"
+            @click="goToApplication(item.application_id)"
+          >
+            <div class="font-medium">{{ item.title }}</div>
+            <div class="text-sm text-gray-600">{{ item.company }}</div>
+            <div class="mt-2 flex items-center gap-2">
+              <span class="text-xs bg-green-100 text-green-800 rounded px-2 py-0.5 font-medium">
+                Score: {{ item.score }}
+              </span>
+              <span
+                v-if="nudgeIds.has(item.application_id)"
+                class="inline-block w-2 h-2 rounded-full bg-orange-500"
+                title="Follow-up nudge pending"
+              ></span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Nudge cards -->
+      <section>
+        <h2 class="font-semibold text-lg mb-3">Follow-up Nudges</h2>
+        <div v-if="today.nudges.length === 0" class="text-gray-400 text-sm">No nudges. You are up to date.</div>
+        <div v-else class="space-y-3">
+          <div
+            v-for="nudge in today.nudges"
+            :key="nudge.application_id"
+            class="bg-orange-50 border border-orange-200 rounded-lg p-4"
+          >
+            <div class="flex items-center justify-between">
+              <span class="font-medium text-orange-900">
+                Sent {{ nudge.days_since_sent }} days ago
+              </span>
+              <button
+                class="text-sm text-indigo-600 hover:underline"
+                @click="goToApplication(nudge.application_id)"
+              >
+                Open application
+              </button>
+            </div>
+            <p class="text-sm text-gray-700 mt-2">{{ nudge.suggestion }}</p>
+            <button
+              class="mt-2 text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700"
+              @click="copyNudge(nudge.suggestion)"
+            >
+              Copy follow-up draft
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <!-- Cost display -->
+      <CostDisplay />
+    </template>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/web/src/views/Welcome.vue b/apps/web/src/views/Welcome.vue
new file mode 100644
index 0000000..d80409b
--- /dev/null
+++ b/apps/web/src/views/Welcome.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToastStore } from '@/stores/toast'
+import * as api from '@/api'
+import { HttpError } from '@/api'
+import type { CvDraft, PostingsFetchResponse } from '@/types'
+
+const toast = useToastStore()
+const router = useRouter()
+
+const step = ref(0)
+const steps = ['Welcome', 'Import CV', 'Fetch Postings', 'Done']
+const stepTitle = computed(() => steps[step.value])
+
+// Step 1: Import CV
+const selectedFile = ref<File | null>(null)
+const importing = ref(false)
+const drafts = ref<CvDraft[]>([])
+const importError = ref('')
+
+// Step 2: Fetch Postings
+const fetchQuery = ref('')
+const fetchRegion = ref('')
+const fetching = ref(false)
+const fetchResult = ref<PostingsFetchResponse | null>(null)
+
+function onFileChange(e: Event) {
+  const target = e.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    selectedFile.value = target.files[0]
+    importError.value = ''
+  }
+}
+
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const result = reader.result as string
+      const base64 = result.split(',')[1] ?? ''
+      resolve(base64)
+    }
+    reader.onerror = () => reject(new Error('Failed to read file'))
+    reader.readAsDataURL(file)
+  })
+}
+
+async function doImport() {
+  if (!selectedFile.value) {
+    importError.value = 'Please select a file first.'
+    return
+  }
+  importing.value = true
+  importError.value = ''
+  try {
+    const base64 = await fileToBase64(selectedFile.value)
+    const res = await api.importCv(selectedFile.value.name, base64)
+    drafts.value = res.drafts
+    if (drafts.value.length === 0) {
+      importError.value = 'No sections were extracted from this file.'
+    }
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const body = err.body as { error?: { message?: string } } | null
+      importError.value = body?.error?.message ?? 'Import failed'
+    } else {
+      importError.value = 'Import failed'
+    }
+  } finally {
+    importing.value = false
+  }
+}
+
+async function confirmDrafts() {
+  importing.value = true
+  try {
+    await api.confirmCvImport(drafts.value)
+    toast.push('CV sections saved', 'success')
+    step.value = 2
+  } catch (err) {
+    let msg = 'Failed to save CV sections'
+    if (err instanceof HttpError) {
+      const body = err.body as { error?: { message?: string } } | null
+      msg = body?.error?.message ?? msg
+    }
+    toast.push(msg, 'error')
+  } finally {
+    importing.value = false
+  }
+}
+
+function skipImport() {
+  step.value = 2
+}
+
+async function doFetch() {
+  if (!fetchQuery.value.trim()) {
+    toast.push('Enter a search query', 'error')
+    return
+  }
+  fetching.value = true
+  fetchResult.value = null
+  try {
+    fetchResult.value = await api.fetchPostings(fetchQuery.value.trim(), fetchRegion.value.trim() || undefined)
+    toast.push(`Fetched ${fetchResult.value.new} new postings`, 'success')
+  } catch (err) {
+    let msg = 'Fetch failed'
+    if (err instanceof HttpError) {
+      const body = err.body as { error?: { message?: string } } | null
+      msg = body?.error?.message ?? msg
+    }
+    toast.push(msg, 'error')
+  } finally {
+    fetching.value = false
+  }
+}
+
+function finish() {
+  router.push('/today')
+}
+
+function next() {
+  if (step.value < steps.length - 1) step.value++
+}
+
+function prev() {
+  if (step.value > 0) step.value--
+}
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto space-y-6">
+    <h1 class="text-2xl font-bold">Welcome to Jobhunt</h1>
+
+    <!-- Step indicator -->
+    <div class="flex items-center gap-2 text-sm">
+      <span
+        v-for="(s, i) in steps"
+        :key="s"
+        :class="[
+          'px-3 py-1 rounded-full',
+          i === step ? 'bg-indigo-600 text-white' : i < step ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500'
+        ]"
+      >
+        {{ i + 1 }}. {{ s }}
+      </span>
+    </div>
+
+    <!-- Step 0: Welcome -->
+    <div v-if="step === 0" class="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
+      <p class="text-gray-700">
+        Jobhunt helps you discover jobs, score them against your profile, draft application material, and prepare for interviews.
+        You stay in control: nothing is sent without your explicit approval.
+      </p>
+      <p class="text-gray-700">
+        Let's set up your profile in a few quick steps. You can skip any step and come back later.
+      </p>
+      <button @click="next" class="bg-indigo-600 text-white px-4 py-2 rounded text-sm">
+        Get Started
+      </button>
+    </div>
+
+    <!-- Step 1: Import CV -->
+    <div v-if="step === 1" class="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
+      <h2 class="font-semibold text-lg">Import Your CV</h2>
+      <p class="text-sm text-gray-600">
+        Upload a PDF, DOCX, or plain text file. We will extract sections for you to review and confirm.
+      </p>
+      <input
+        type="file"
+        accept=".pdf,.docx,.txt"
+        @change="onFileChange"
+        class="block text-sm text-gray-700"
+      />
+      <div v-if="importError" class="text-red-600 text-sm">{{ importError }}</div>
+
+      <button
+        v-if="drafts.length === 0"
+        @click="doImport"
+        :disabled="importing || !selectedFile"
+        class="bg-indigo-600 text-white px-4 py-2 rounded text-sm disabled:opacity-50"
+      >
+        {{ importing ? 'Importing...' : 'Extract Sections' }}
+      </button>
+
+      <!-- Drafts review -->
+      <div v-if="drafts.length > 0" class="space-y-3">
+        <h3 class="font-medium text-sm">Review extracted sections ({{ drafts.length }})</h3>
+        <div
+          v-for="(draft, i) in drafts"
+          :key="i"
+          class="border border-gray-200 rounded p-3 text-sm"
+        >
+          <div class="font-medium">{{ draft.title }} ({{ draft.kind }})</div>
+          <div class="text-gray-500">{{ draft.org }}{{ draft.location ? ' - ' + draft.location : '' }}</div>
+          <ul v-if="draft.bullets.length" class="list-disc ml-5 text-gray-600 mt-1">
+            <li v-for="(b, bi) in draft.bullets" :key="bi">{{ b }}</li>
+          </ul>
+          <div v-if="draft.tags.length" class="flex flex-wrap gap-1 mt-1">
+            <span v-for="t in draft.tags" :key="t" class="text-xs bg-gray-100 rounded px-2 py-0.5">{{ t }}</span>
+          </div>
+        </div>
+        <div class="flex gap-3">
+          <button
+            @click="confirmDrafts"
+            :disabled="importing"
+            class="bg-green-600 text-white px-4 py-2 rounded text-sm disabled:opacity-50"
+          >
+            {{ importing ? 'Saving...' : 'Confirm & Save Sections' }}
+          </button>
+          <button @click="skipImport" class="text-sm text-gray-500 hover:underline">
+            Skip for now
+          </button>
+        </div>
+      </div>
+
+      <button v-if="drafts.length === 0" @click="skipImport" class="text-sm text-gray-500 hover:underline block">
+        Skip for now
+      </button>
+    </div>
+
+    <!-- Step 2: Fetch Postings -->
+    <div v-if="step === 2" class="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
+      <h2 class="font-semibold text-lg">Fetch Job Postings</h2>
+      <p class="text-sm text-gray-600">
+        Search for job postings from the Arbetsformedlingen connector. New postings will be added to your applications.
+      </p>
+      <div class="space-y-2">
+        <label class="block">
+          <span class="text-sm text-gray-600">Search query</span>
+          <input
+            v-model="fetchQuery"
+            placeholder="e.g. python developer"
+            class="w-full border rounded px-2 py-1 mt-1"
+            @keyup.enter="doFetch"
+          />
+        </label>
+        <label class="block">
+          <span class="text-sm text-gray-600">Region (optional)</span>
+          <input
+            v-model="fetchRegion"
+            placeholder="e.g. Skane lan"
+            class="w-full border rounded px-2 py-1 mt-1"
+            @keyup.enter="doFetch"
+          />
+        </label>
+      </div>
+      <button
+        @click="doFetch"
+        :disabled="fetching"
+        class="bg-indigo-600 text-white px-4 py-2 rounded text-sm disabled:opacity-50"
+      >
+        {{ fetching ? 'Fetching...' : 'Fetch Postings' }}
+      </button>
+      <div v-if="fetchResult" class="text-sm">
+        <span class="text-green-700 font-medium">{{ fetchResult.new }} new</span>
+        postings found, <span class="text-gray-500">{{ fetchResult.dupes }} duplicates</span> skipped.
+      </div>
+      <button @click="next" class="text-sm text-indigo-600 hover:underline block">
+        Continue
+      </button>
+    </div>
+
+    <!-- Step 3: Done -->
+    <div v-if="step === 3" class="bg-white rounded-lg border border-gray-200 p-6 space-y-4">
+      <h2 class="font-semibold text-lg">You are all set!</h2>
+      <p class="text-gray-700">
+        Your profile is ready. Head to the Today page to see your daily digest, nudges, and pending approvals.
+      </p>
+      <button @click="finish" class="bg-indigo-600 text-white px-4 py-2 rounded text-sm">
+        Go to Today
+      </button>
+    </div>
+
+    <!-- Navigation -->
+    <div v-if="step > 0 && step < 3" class="flex gap-3">
+      <button @click="prev" class="text-sm text-gray-500 hover:underline">Back</button>
+    </div>
+  </div>
+</template>
\ No newline at end of file