From e30e5dbf080e18bec67b774d80aaa65e8363e8cd Mon Sep 17 00:00:00 2001
From: Ashish Huddar <ashish.hudar@gmail.com>
Date: Sun, 5 Apr 2026 20:40:39 +0530
Subject: [PATCH] feat(web): add global not-found.tsx for 404 handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/web/src/app/not-found.test.tsx | 33 +++++++++++++++++++++++++
 packages/web/src/app/not-found.tsx      | 27 ++++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/web/src/app/not-found.test.tsx
 create mode 100644 packages/web/src/app/not-found.tsx

diff --git a/packages/web/src/app/not-found.test.tsx b/packages/web/src/app/not-found.test.tsx
new file mode 100644
index 000000000..c370cae0a
--- /dev/null
+++ b/packages/web/src/app/not-found.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+
+vi.mock("next/link", () => ({
+  default: ({
+    children,
+    ...props
+  }: React.PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>) => (
+    <a {...props}>{children}</a>
+  ),
+}));
+
+import NotFound from "./not-found";
+
+describe("NotFound (global)", () => {
+  it("renders the page-not-found message", () => {
+    render(<NotFound />);
+    expect(screen.getByText("Page not found")).toBeInTheDocument();
+  });
+
+  it("renders a link back to the dashboard", () => {
+    render(<NotFound />);
+    const link = screen.getByText("← Back to dashboard");
+    expect(link).toBeInTheDocument();
+    expect(link.closest("a")).toHaveAttribute("href", "/");
+  });
+
+  it("renders the not-found icon", () => {
+    const { container } = render(<NotFound />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+});
diff --git a/packages/web/src/app/not-found.tsx b/packages/web/src/app/not-found.tsx
new file mode 100644
index 000000000..868beb5f0
--- /dev/null
+++ b/packages/web/src/app/not-found.tsx
@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-[var(--color-bg-base)]">
+      <svg
+        className="h-8 w-8 text-[var(--color-border-strong)]"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        viewBox="0 0 24 24"
+      >
+        <rect x="2" y="4" width="20" height="16" rx="2" />
+        <path d="M6 9l4 3-4 3M13 15h5" />
+      </svg>
+      <p className="text-[13px] text-[var(--color-text-muted)]">
+        Page not found
+      </p>
+      <Link
+        href="/"
+        className="text-[12px] text-[var(--color-accent)] hover:underline"
+      >
+        ← Back to dashboard
+      </Link>
+    </div>
+  );
+}