Update homepage to use filters.

frontend/app/routes/all-tasks.tsx

@@ -0,0 +1,47 @@
+import type { Route } from './+types/all-tasks'
+import { Box, Typography, Container } from '@mui/material'
+import { TaskList } from '~/components/TaskList'
+import type { Task } from '~/types/task'
+
+export function meta(_: Route.MetaArgs) {
+  return [
+    { title: "Captain's Log - All Tasks" },
+    { name: 'description', content: 'Complete Task List' },
+  ]
+}
+
+export async function loader(): Promise<{ tasks: Task[] }> {
+  try {
+    // Fetch all tasks from the backend API during SSR
+    const apiUrl = process.env.API_URL || 'http://localhost:3000'
+    const response = await fetch(`${apiUrl}/api/tasks`, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+
+    if (!response.ok) {
+      console.error('Failed to fetch tasks:', response.statusText)
+      return { tasks: [] }
+    }
+
+    const tasks = await response.json()
+    return { tasks }
+  } catch (error) {
+    console.error('Error fetching tasks during SSR:', error)
+    return { tasks: [] }
+  }
+}
+
+export default function AllTasks({ loaderData }: Route.ComponentProps) {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{ py: 4 }}>
+        <Typography variant="h1" component="h1" gutterBottom>
+          All Tasks
+        </Typography>
+        <TaskList initialTasks={loaderData.tasks} />
+      </Box>
+    </Container>
+  )
+}

frontend/app/routes/home.test.tsx

@@ -12,7 +12,7 @@ describe('Home component', () => {
       </MemoryRouter>
     )
     expect(
-      screen.getByRole('heading', { level: 1, name: /Tasks/i })
+      screen.getByRole('heading', { level: 1, name: /Dashboard/i })
     ).toBeInTheDocument()
 
     // TaskList component should be rendered with empty state

frontend/app/routes/home.tsx

@@ -5,7 +5,7 @@ import type { Task } from '~/types/task'
 
 export function meta(_: Route.MetaArgs) {
   return [
-    { title: "Captain's Log - Tasks" },
+    { title: "Captain's Log - Dashboard" },
     { name: 'description', content: 'Task Dashboard' },
   ]
 }
@@ -14,7 +14,7 @@ export async function loader(): Promise<{ tasks: Task[] }> {
   try {
     // Fetch tasks from the backend API during SSR
     const apiUrl = process.env.API_URL || 'http://localhost:3000'
-    const response = await fetch(`${apiUrl}/api/tasks`, {
+    const response = await fetch(`${apiUrl}/api/tasks?status=todo`, {
       headers: {
         'Content-Type': 'application/json',
       },
@@ -38,7 +38,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
     <Container maxWidth="lg">
       <Box sx={{ py: 4 }}>
         <Typography variant="h1" component="h1" gutterBottom>
-          Tasks
+          Dashboard
         </Typography>
         <TaskList initialTasks={loaderData.tasks} />
       </Box>