up

frontend/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/auth/Login.vue'
 import Setup from '../views/auth/Setup.vue'
 import Dashboard from '../views/Dashboard.vue'
+import NotFound from '../views/NotFound.vue'
 
 const routes = [
   { path: '/login', component: Login, meta: { title: 'Login' } },
@@ -14,6 +15,12 @@ const routes = [
   {
     path: '/',
     redirect: '/dashboard'
+  },
+  {
+     path: '/:pathMatch(.*)*',
+     name: 'NotFound',
+     component: NotFound,
+     meta: { title: 'Page Not Found', requiresAuth: false }
   }
 ]
 

frontend/src/views/NotFound.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+    <div class="text-center max-w-md">
+      <div class="mb-8">
+        <div class="w-32 h-32 mx-auto bg-primary-100 rounded-full flex items-center justify-center">
+          <svg class="w-16 h-16 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+      </div>
+      <h1 class="text-6xl font-bold text-gray-900 mb-4">404</h1>
+      <p class="text-xl text-gray-600 mb-8">Oops! Page not found</p>
+      <p class="text-gray-500 mb-8">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <router-link
+          to="/dashboard"
+          class="px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
+          Go to Dashboard
+        </router-link>
+        <router-link
+          to="/login"
+          class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          Sign In
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed
+</script>