Develop Schedule Page UI Layout

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

@@ -1,30 +1,173 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   Flex,
+  Tabs,
+  TabList,
+  Tab,
+  Heading,
+  Box,
+  Button,
+  IconButton,
+  Icon,
 } from "@chakra-ui/react";
 
-import RoomCard from "../home/HomeRoomCard"
-import { residentsMockData } from "../../../mocks/residents";
-
-const renderRoomCards = residentsMockData.map(resident => 
-  <RoomCard
-    key={resident.residentId}
-    room={resident.roomNumber}
-    residentId={resident.residentId}
-  />
-)
+import {
+  ArrowBackIosNew,
+  ArrowForwardIos,
+  Edit,
+  FormatListBulleted,
+  CalendarMonth,
+} from "@mui/icons-material";
 
+import { ScheduleType } from "../../../types/ScheduleTypes";
 
 const SchedulePage = (): React.ReactElement => {
+  const [rooms, setRooms] = useState<number[]>([]);
+  const [scheduleType, setScheduleType] = useState<ScheduleType>("LIST");
+  const [scheduleData, setScheduleData] = useState<string>("");
+  const [active, setActive] = useState<string>("List");
+
+  useEffect(() => {
+    // TODO: Fetch occupied rooms from API?
+    setRooms([1, 2, 3, 4, 5, 6]);
+  }, []);
+
+  useEffect(() => {
+    if (scheduleType === "LIST") {
+      setScheduleData("List");
+    } else if (scheduleType === "CALENDAR") {
+      setScheduleData("Calendar");
+    }
+  }, [scheduleType]);
+
+  const selectOption = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setActive(e.currentTarget.innerText);
+  };
+
+  const formatTabs = (roomNums: number[]) => {
+    return (
+      <Tabs variant="horizontal" h="30px" mb={6}>
+        <TabList pl={6}>
+          {roomNums.map((room) => (
+            <Tab key={room} width="10%">
+              Room {room}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+    );
+  };
+
   return (
-    <Flex flexDir="column" flexGrow={1} p="20px">
-      <h1>Schedule Page</h1>
-      <Flex
-        flexWrap="wrap" 
-        justifyContent="flex-start" 
-      >
-        {renderRoomCards}
+    <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>
+      <Box mt={8} ml={10} mr={10} padding={40} borderWidth="1px">
+        {scheduleType === "CALENDAR" ? (
+          <Heading size="md">TEMP CALENDAR</Heading>
+        ) : (
+          <Heading size="md">{scheduleData}</Heading>
+        )}
+      </Box>
     </Flex>
   );
 };

frontend/src/components/pages/tasks/TasksPage.tsx

@@ -89,39 +89,39 @@ const TasksPage = (): React.ReactElement => {
   }, [taskType]);
 
   return (
-    <Flex flexDir="column" flexGrow={1}>
-      <Tabs variant="horizontal" h="30px" mb={6}>
-        <TabList pl={6}>
-          <Tab
-            onClick={() => {
-              setTaskType("REQUIRED");
-            }}
-          >
-            Required
-          </Tab>
-          <Tab
-            onClick={() => {
-              setTaskType("OPTIONAL");
-            }}
-          >
-            Optional
-          </Tab>
-          <Tab
-            onClick={() => {
-              setTaskType("CUSTOM");
-            }}
-          >
-            Custom
-          </Tab>
-          <Tab
-            onClick={() => {
-              setTaskType("CHORE");
-            }}
-          >
-            Chores
-          </Tab>
-        </TabList>
-      </Tabs>
+      <Flex flexDir="column" flexGrow={1}>
+        <Tabs variant="horizontal" h="30px" mb={6}>
+          <TabList pl={6}>
+            <Tab
+              onClick={() => {
+                setTaskType("REQUIRED");
+              }}
+            >
+              Required
+            </Tab>
+            <Tab
+              onClick={() => {
+                setTaskType("OPTIONAL");
+              }}
+            >
+              Optional
+            </Tab>
+            <Tab
+              onClick={() => {
+                setTaskType("CUSTOM");
+              }}
+            >
+              Custom
+            </Tab>
+            <Tab
+              onClick={() => {
+                setTaskType("CHORE");
+              }}
+            >
+              Chores
+            </Tab>
+          </TabList>
+        </Tabs>
 
       <Flex flexDir="column" flexGrow={1} p="20px">
         <Flex justifyContent="space-between" p="10px">

frontend/src/theme/buttons.ts

@@ -39,8 +39,28 @@ const del = defineStyle({
   border: "2px solid #C5C8D8",
 });
 
+const success = defineStyle({
+  height: "34px",
+  borderRadius: "8px",
+  padding: "4px 16px",
+  border: "2px solid #0D8312",
+  bg: "green.100",
+  color: "green.main",
+  _hover: { bg: "green.main", color: "green.100" },
+});
+
+const error = defineStyle({
+  height: "34px",
+  borderRadius: "8px",
+  padding: "4px 16px",
+  border: "2px solid #D34C5C",
+  bg: "red.100",
+  color: "red.main",
+  _hover: { bg: "red.main", color: "red.100" },
+});
+
 const buttonTheme = defineStyleConfig({
-  variants: { primary, secondary, cancel, del },
+  variants: { primary, secondary, cancel, del, success, error },
 });
 
 export default buttonTheme;

frontend/src/theme/colors.ts

@@ -3,6 +3,7 @@ const colors = {
   white: "#fff",
   gray: {
     main: "#808080",
+    50: "FBFBFB",
     100: "#F5F6F8",
     200: "#E3E4EA",
     300: "#C5C8D8",
@@ -16,8 +17,12 @@ const colors = {
   },
   red: {
     main: "#D34C5C",
-    error: "#E30000",
+    100: "#FFE6E6",
   },
+  green: {
+    main: "#0D8312",
+    100: "#ECFFED",
+  }
 };
 
 export default colors;

frontend/src/types/RoomTypes.ts

@@ -0,0 +1,5 @@
+export interface Room {
+    author: string;
+    message: string;
+    createdAt: string;
+  }

frontend/src/types/ScheduleTypes.ts

@@ -0,0 +1,15 @@
+export type ScheduleType = "LIST" | "CALENDAR"
+
+export interface Task {
+  title: string;
+  description: string;
+  creditValue: number;
+}
+
+export interface CustomTask extends Task {
+  room: number;
+}
+
+export interface ChoreTask extends Task {
+  location: string;
+}