feat(router): add 404 error page route for unmatched paths

Add a NotFoundView component to handle paths that don't match
any existing route, improving user navigation experience.

ui/src/router/index.ts

@@ -3,14 +3,11 @@ import { createRouter, createWebHistory } from "vue-router";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    // {
-    //   path: '/about',
-    //   name: 'about',
-    //   // route level code-splitting
-    //   // this generates a separate chunk (About.[hash].js) for this route
-    //   // which is lazy-loaded when the route is visited.
-    //   component: () => import('../views/AboutView.vue')
-    // }
+    {
+      path: "/:pathMatch(.*)",
+      name: "notFound",
+      component: () => import("@/views/error/NotFoundView.vue")
+    }
   ]
 });
 

ui/src/views/error/NotFoundView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="grid h-screen place-content-center bg-white px-4">
+    <h1 class="uppercase tracking-widest text-gray-500">404 | Not Found</h1>
+  </div>
+</template>