updated schedule page changes

frontend/src/components/pages/schedule/SchedulePage.tsx

@@ -1,4 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { 
+  Flex,
+  Tabs,
+  TabList,
+  Tab,
+  Heading,
+  Box,
+  Text,
+  Button,
+  IconButton,
+  Icon
+ } from "@chakra-ui/react";
+
+import { 
+  ArrowBackIosNew,
+  ArrowForwardIos,
+  Edit,
+  Add,
+  FormatListBulleted,
+  CalendarMonth
+} from '@mui/icons-material';
+
+import {
+  ScheduleType,
+} from "../../../types/ScheduleTypes";
 
 const SchedulePage = (): React.ReactElement => {
   const [rooms, setRooms] = useState<number[]>([]);
@@ -36,9 +61,117 @@ const SchedulePage = (): React.ReactElement => {
   }
 
   return (
-    <div>
-      <h1>Schedule Page</h1>
-    </div>
+    <Flex flexDir="column" flexGrow={1}>
+
+      <Tabs variant="horizontal" h="30px" mb={6}>
+        {formatTabs(rooms)}
+      </Tabs>
+
+      <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
+        <Flex>
+          <Heading size="lg" fontSize="36px" w="14vw" color="purple.main">
+            January 2025 
+            {/* see announcements page for how to determine what text shows */}
+          </Heading>
+
+          <Flex w='200px' flexDir="row" height='100px' ml={5}>
+            <IconButton 
+              _hover={{
+                cursor: "pointer",
+              }}
+              color="purple.main"
+              backgroundColor="grey.50"
+              borderRightRadius='0'
+              aria-label="Previous Week"
+              icon={<ArrowBackIosNew fontSize='small'/>}
+            />
+            <Button alignContent='center' borderRadius='0' color="purple.main" size="md" fontSize="lg">
+              Jan 1 - 7
+            </Button>
+            <IconButton 
+              _hover={{
+                cursor: "pointer",
+              }}
+              color="purple.main"
+              backgroundColor="grey.50"
+              borderLeftRadius='0'
+              aria-label="Previous Week"
+              icon={<ArrowForwardIos fontSize='small'/>}
+            />
+          </Flex>
+
+        </Flex>
+
+        <Flex flexDir="row" height='100px' justifyContent="space-between">
+          <Button
+            variant="success"
+            rightIcon={<Icon as={Edit} color="green.main" />}
+            size="sm"
+            onClick={() => {}}
+            mr={5}
+          >
+            200 M-Bucks
+          </Button>
+
+          <Button
+            variant="error"
+            rightIcon={<Icon as={Edit} color="red.main" />}
+            size="sm"
+            onClick={() => {}}
+          >
+            0 Warnings
+          </Button>
+        </Flex>
+
+      </Flex>
+
+      <Flex justifyContent="space-between" mt={-5} ml={8} mr={10}>
+        <Flex>
+          <Button
+            variant={ active === 'List' ? "primary" : "secondary" }
+            w="7vw"
+            borderRightRadius="0"
+            leftIcon={<Icon as={FormatListBulleted} color="white" />}
+            size="sm"
+            onClick={(event) => {
+              selectOption(event);
+              setScheduleType("LIST");
+            }}
+          >
+            List
+          </Button>
+
+          <Button
+            variant={ active === 'Calendar' ? "primary" : "secondary" }
+            w="7vw"
+            borderLeftRadius="0"
+            leftIcon={<Icon as={CalendarMonth} color="white" />}
+            size="sm"
+            onClick={(event) => {
+              selectOption(event);
+              setScheduleType("CALENDAR");
+            }}
+          >
+            Calendar
+          </Button>
+        </Flex>
+
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => {}}
+        >
+          Update Selected
+        </Button>
+      </Flex>
+
+      <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
+        <Heading>
+          {scheduleData}
+        </Heading>
+      </Flex>
+
+    </Flex>
   );
 };