Add task creation form. (#9)

Reviewed-on: #9
Co-authored-by: Drew Galbraith <drew@tiramisu.one>
Co-committed-by: Drew Galbraith <drew@tiramisu.one>

frontend/app/routes/home.test.tsx

@@ -1,14 +1,20 @@
 import { render, screen } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
+import { MemoryRouter } from 'react-router'
 import Home from './home'
 
 describe('Home component', () => {
   it('should render task management interface', () => {
     const mockLoaderData = { tasks: [] }
-    render(<Home loaderData={mockLoaderData} />)
+    render(
+      <MemoryRouter>
+        <Home loaderData={mockLoaderData} />
+      </MemoryRouter>
+    )
     expect(
       screen.getByRole('heading', { level: 1, name: /Tasks/i })
     ).toBeInTheDocument()
+
     // TaskList component should be rendered with empty state
     expect(screen.getByText(/No tasks found/i)).toBeInTheDocument()
   })

frontend/app/routes/task.new.tsx

@@ -0,0 +1,20 @@
+import type { Route } from './+types/task.new'
+import { Container, Box } from '@mui/material'
+import { TaskForm } from '~/components/TaskForm'
+
+export function meta(_: Route.MetaArgs) {
+  return [
+    { title: "Captain's Log - New Task" },
+    { name: 'description', content: 'Create a new task' },
+  ]
+}
+
+export default function NewTask() {
+  return (
+    <Container maxWidth="md">
+      <Box sx={{ py: 4 }}>
+        <TaskForm />
+      </Box>
+    </Container>
+  )
+}