added tasks page and functionality

src/pages/Heater.tsx

@@ -371,6 +371,7 @@ export default function Heater() {
           container
           direction="row"
           alignContent="center"
+          justifyContent="space-between"
           alignItems="center">
           <Grid>
             <Box display="flex" alignItems="center">
@@ -426,13 +427,13 @@ export default function Heater() {
                 alignItems="center"
                 spacing={4}>
                 <Grid size={{
-                  xs:6, sm:6, md:3 
-                }} 
-                container>
-                  <Grid container alignItems="center">
+                    xs:6, sm:6, md:3 
+                  }} 
+                  container spacing={0}>
+                  <Grid size={12}>
                     {displayHeaterState()}
                   </Grid>
-                  <Grid container>
+                  <Grid size={12}>
                     <Typography variant="caption">Heater State:</Typography>
                   </Grid>
                 </Grid>

src/pages/Tasks.tsx

@@ -0,0 +1,13 @@
+import { Box } from "@mui/material";
+import TaskViewer from "tasks/TaskViewer";
+import PageContainer from "./PageContainer";
+
+export default function Tasks() {
+  return (
+    <PageContainer>
+      <Box padding={2}>
+        <TaskViewer />
+      </Box>
+    </PageContainer>
+  );
+}