Not found page

apps/web-tss/package.json

@@ -63,7 +63,6 @@
     "jwt-decode": "^4.0.0",
     "ky": "^1.8.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.539.0",
     "monaco-editor": "^0.52.2",
     "monaco-sql-languages": "^0.15.1",
     "monaco-yaml": "^5.4.0",

apps/web-tss/src/components/features/global/NotFoundCard.tsx

@@ -1,13 +1,34 @@
 import { Link, type NotFoundRouteComponent } from '@tanstack/react-router';
+import { Button } from '@/components/ui/buttons';
+import { Card, CardContent, CardFooter } from '@/components/ui/card/CardBase';
 
+// Displays a full-screen, visually polished 404 not found state
+// inspired by GlobalErrorCard with consistent styling and components.
 export const NotFoundCard: NotFoundRouteComponent = () => {
   return (
-    <div className="m-8 flex flex-col items-start gap-4">
+    <section
-      <h1 className="text-2xl font-semibold">Page not found</h1>
+      className="bg-opacity-90 flex min-h-screen w-screen flex-col items-center justify-center bg-linear-to-br from-gray-50 to-gray-200 p-8 backdrop-blur-xs backdrop-brightness-95 backdrop-filter"
-      <p className="text-gray-600">The page you are looking for does not exist.</p>
+      aria-label="Page not found"
-      <Link to="/" className="text-blue-600 hover:underline">
+    >
-        Go back home
+      <Card className="-mt-10 max-w-100">
-      </Link>
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            <h1 className="text-2xl font-medium">404 - Page not found</h1>
+
+            <h5 className="m-0 text-base font-medium text-gray-600">
+              The page you are looking for doesn’t exist or may have been moved.
+            </h5>
           </div>
+        </CardContent>
+
+        <CardFooter className="w-full pt-0">
+          <Link to="/" className="w-full">
+            <Button variant="black" block size="tall">
+              Take me home
+            </Button>
+          </Link>
+        </CardFooter>
+      </Card>
+    </section>
   );
 };

apps/web-tss/src/routes/index.tsx

@@ -2,7 +2,11 @@ import { createFileRoute } from '@tanstack/react-router';
 import logo from '../logo.svg';
 
 export const Route = createFileRoute('/')({
-  component: App
+  component: App,
+  beforeLoad: async ({ context }) => {
+    const hasUser = context.user;
+    console.log('hasUser', hasUser);
+  },
 });
 
 function App() {

pnpm-lock.yaml

@@ -982,9 +982,6 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
-      lucide-react:
-        specifier: ^0.539.0
-        version: 0.539.0(react@19.1.1)
       monaco-editor:
         specifier: ^0.52.2
         version: 0.52.2
@@ -10608,11 +10605,6 @@ packages:
     resolution: {integrity: sha512-Nv9KddBcQSlQopmBHXSsZVY5xsdlZkdH/Iey0BlcBYggMd4two7cZnKOK9vmy3nY0O5RGH99z1PCeTpPqszUYg==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
-  lucide-react@0.539.0:
-    resolution: {integrity: sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   luxon@3.7.1:
     resolution: {integrity: sha512-RkRWjA926cTvz5rAb1BqyWkKbbjzCGchDUIKMCUvNi17j6f6j8uHGDV82Aqcqtzd+icoYpELmG3ksgGiFNNcNg==}
     engines: {node: '>=12'}
@@ -26464,10 +26456,6 @@ snapshots:
 
   lru.min@1.1.2: {}
 
-  lucide-react@0.539.0(react@19.1.1):
-    dependencies:
-      react: 19.1.1
-
   luxon@3.7.1: {}
 
   lz-string@1.5.0: {}