feat(288): Create 404 page (#314)

* feat(288): Create 404 page

* feat(288): Create 404 page

* feat(288): Create 404 page

* feat(288): Delete screen shot

frontend/src/main.tsx

@@ -18,6 +18,7 @@ import ExtractProcess from "./pages/ExtractProcess.tsx";
 import { SaveTemplate } from "./pages/SaveTemplate.tsx";
 import ReviewTemplate from "./pages/ReviewTemplate.tsx";
 import SubmissionTemplate from "./pages/SubmissionTemplate.tsx";
+import NotFound from "./pages/404Page.tsx";
 
 
 
@@ -54,6 +55,10 @@ const router = createBrowserRouter([
     path: "/extract/submit",
     element: <SubmissionTemplate />,
   },
+  {
+    path: "*",
+    element: <NotFound />
+  }
 ]);
 
 createRoot(document.getElementById("root")!).render(

frontend/src/pages/404Page.scss

@@ -0,0 +1,18 @@
+.error-content { 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 1rem;
+    background-color: #f8f9fa;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    flex-direction: column;
+}
+
+.error-cta {
+    text-align: center;
+    text-wrap: wrap;
+}

frontend/src/pages/404Page.test.tsx

@@ -0,0 +1,47 @@
+// NotFound.test.tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { describe, it, expect, vi } from 'vitest';
+import NotFound from './404Page';
+
+const mockNavigate = vi.fn(); // Create a mock function for navigation  
+// Mock the useNavigate hook from react-router-dom
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual as object,
+    useNavigate: () => mockNavigate,
+  };
+});
+describe('NotFound Component', () => {
+  it('should render the NotFound component', () => {
+    render(
+      <BrowserRouter>
+        <NotFound />
+      </BrowserRouter>
+    );
+
+    // Check if the 404 image is rendered
+    expect(screen.getByTestId('404-image')).toBeInTheDocument();
+
+    // Check if the title and description are rendered
+    expect(screen.getByText("Sorry, this page can’t be found")).toBeInTheDocument();
+    expect(screen.getByText("The page you are looking for doesn’t exist or has been moved.")).toBeInTheDocument();
+
+    // Check if the button is rendered
+    expect(screen.getByRole('button', { name: /Back to Previous Page/i })).toBeInTheDocument();
+  });
+
+
+  it('should navigate back when the back button is clicked', () => {
+    render(
+        <BrowserRouter>
+          <NotFound />
+      </BrowserRouter>
+    );
+
+    fireEvent.click(screen.getByText(/back/i));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/');
+  });
+});

frontend/src/pages/404Page.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import image from '../../public/svgs/404.svg'
+import { AppHeader } from '../components/AppHeader/AppHeader';
+import { Button } from '@trussworks/react-uswds';
+import { useNavigate } from 'react-router-dom';
+
+import './404Page.scss';
+
+const NotFound: React.FC = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="width-full height-full display-flex flex-column">
+        <AppHeader jurisdiction={''} />
+        <div className="error-content">
+          <h1 className='error-cta'>Sorry, this page can’t be found</h1>
+          <img
+              data-testid="404-image"
+              src={image}
+              alt="404"
+            />               
+            <p>The page you are looking for doesn’t exist or has been moved.</p>
+            <Button onClick={() => navigate('/')} type='button'>Back to Previous Page</Button>
+          </div>
+    </div>
+  );
+};
+
+export default NotFound;