From 5c3fa5ba3df292891c45baadd9268455cb9ef30a Mon Sep 17 00:00:00 2001
From: Sonny May <sonnymaywi@gmail.com>
Date: Thu, 29 Oct 2026 14:36:50 +0000
Subject: [PATCH] feat: add a Page not found route instead of a blank page for
 unknown URLs

Unknown paths rendered an empty <main>; show a message with a link back
to the dashboard.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0171zWzkYt3BiZ5QDwfpVoTV
---
 frontend/src/App.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e07ee98..0dad3d8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,10 +1,22 @@
-import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import { BrowserRouter, Routes, Route, NavLink, Link } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
 import Customers from "./pages/Customers";
 import Devices from "./pages/Devices";
 import Tickets from "./pages/Tickets";
 import RMAs from "./pages/RMAs";
 
+function NotFound() {
+  return (
+    <div className="max-w-md">
+      <h2 className="text-2xl font-bold mb-2">Page not found</h2>
+      <p className="text-gray-600 mb-4">That page does not exist.</p>
+      <Link to="/" className="text-blue-700 underline">
+        Back to the dashboard
+      </Link>
+    </div>
+  );
+}
+
 export default function App() {
   const navigation = [
     { to: "/", label: "Dashboard" },
@@ -47,6 +59,7 @@ export default function App() {
             <Route path="/customers" element={<Customers />} />
             <Route path="/devices" element={<Devices />} />
             <Route path="/rmas" element={<RMAs />} />
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </main>
       </div>