✨ Add Not Found page (#595)

src/new-frontend/src/App.tsx

@@ -1,13 +1,15 @@
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+
 import Layout from './pages/Layout';
+import NotFound from './pages/NotFound';
 import Login from './pages/auth/Login';
 import RecoverPassword from './pages/auth/RecoverPassword';
 import Admin from './pages/main/Admin';
 import Dashboard from './pages/main/Dashboard';
 import Items from './pages/main/Items';
 import Profile from './pages/main/Profile';
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 
 // Theme
 const theme = extendTheme({
@@ -48,6 +50,7 @@ function App() {
               <Route path="/items" element={<Items />} />
               <Route path="/admin" element={<Admin />} />
             </Route>
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </ ChakraProvider>
       </Router>

src/new-frontend/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Button, Container, Text } from "@chakra-ui/react";
+
+import { Link } from "react-router-dom";
+
+const NotFound = () => (
+    <>
+        <Container h="100vh"
+            alignItems="stretch"
+            justifyContent="center" textAlign="center" maxW="xs" centerContent>
+            <Text fontSize="8xl" color="ui.main" fontWeight="bold" lineHeight="1" mb={4}>404</Text>
+            <Text fontSize="md">Houston, we have a problem.</Text>
+            <Text fontSize="md">It looks like the page you're looking for doesn't exist.</Text>
+            <Button as={Link} to="/" color="ui.main" borderColor="ui.main" variant="outline" mt={4}>Go back to Home</Button>
+        </Container>
+    </>
+);
+
+export default NotFound;