Creation of List-View UI for Schedule Page

frontend/src/components/common/CommonTable.tsx

@@ -257,9 +257,10 @@ const CommonTable = ({
 
       <Box h="50px" position="relative">
         <Box position="absolute" w="250px" h="50px" ml="10px">
-          {`Showing ${(page - 1) * maxResults + 1} to ${page * maxResults} of ${
-            data.length
-          } entries`}
+          {`Showing ${(page - 1) * maxResults + 1} to ${Math.min(
+            page * maxResults,
+            data.length,
+          )} of ${data.length} entries`}
         </Box>
         <Box position="absolute" left="50%" transform="translateX(-50%)">
           <Box

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

@@ -1,12 +1,11 @@
-
 import React, { useEffect, useState } from "react";
 import {
   Flex,
   Tabs,
   TabList,
   Tab,
-  Heading,
   Box,
+  Heading,
   Button,
   IconButton,
   Icon,
@@ -21,7 +20,8 @@ import {
 } from "@mui/icons-material";
 
 import { ScheduleType } from "../../../types/ScheduleTypes";
-import { ScheduleCalendar } from "./ScheduleCalendar";
+import ScheduleListView from "./listView/ScheduleListView";
+import { ScheduleCalendar } from "./calendarView/ScheduleCalendar";
 
 const SchedulePage = (): React.ReactElement => {
   const [rooms, setRooms] = useState<number[]>([]);
@@ -66,9 +66,14 @@ const SchedulePage = (): React.ReactElement => {
         {formatTabs(rooms)}
       </Tabs>
 
-      <Flex justifyContent="space-between" mt={10} ml={8} mr={10}>
+      <Flex justifyContent="space-between" mt={10} ml={8} mr={5}>
         <Flex>
-          <Heading size="lg" fontSize="36px" w="14vw" color="purple.main">
+          <Heading
+            size="lg"
+            fontSize="36px"
+            color="purple.main"
+            whiteSpace="nowrap"
+          >
             January 2025
             {/* see announcements page for how to determine what text shows */}
           </Heading>
@@ -116,23 +121,14 @@ const SchedulePage = (): React.ReactElement => {
           >
             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"
+            w="8em"
             borderRightRadius="0"
             leftIcon={<Icon as={FormatListBulleted} color="white" />}
             size="sm"
@@ -146,7 +142,7 @@ const SchedulePage = (): React.ReactElement => {
 
           <Button
             variant={active === "Calendar" ? "primary" : "secondary"}
-            w="7vw"
+            w="8em"
             borderLeftRadius="0"
             leftIcon={<Icon as={CalendarMonth} color="white" />}
             size="sm"
@@ -163,11 +159,11 @@ const SchedulePage = (): React.ReactElement => {
           Update Selected
         </Button>
       </Flex>
-      <Box mt={8} ml={10} mr={10} padding={40} borderWidth="1px">
+      <Box padding="40px">
         {scheduleType === "CALENDAR" ? (
-          <Heading size="md">TEMP CALENDAR</Heading>
+          <ScheduleCalendar />
         ) : (
-          <Heading size="md">{scheduleData}</Heading>
+          <ScheduleListView />
         )}
       </Box>
     </Flex>

frontend/src/components/pages/schedule/listView/ScheduleListView.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Tabs, TabList, Tab, Text } from "@chakra-ui/react";
+
+import { tasksColumnTypes } from "./columnKeys";
+
+import {
+  scheduleTasksMockData,
+  sundayScheduleTasksMockData,
+  mondayScheduleTasksMockData,
+  tuesdayScheduleTasksMockData,
+  wednesdayScheduleTasksMockData,
+  thursdayScheduleTasksMockData,
+  fridayScheduleTasksMockData,
+  saturdayScheduleTasksMockData,
+} from "../../../../mocks/scheduletasks";
+
+import ScheduleTable, { ColumnInfoTypes, TableData } from "./ScheduleTable";
+
+const ScheduleListView = (): React.ReactElement => {
+  const enum Dates {
+    SUNDAY = "SUNDAY",
+    MONDAY = "MONDAY",
+    TUESDAY = "TUESDAY",
+    WEDNESDAY = "WEDNESDAY",
+    THURSDAY = "THURSDAY",
+    FRIDAY = "FRIDAY",
+    SATURDAY = "SATURDAY",
+  }
+
+  const [taskData, setTaskData] = useState<TableData[]>([]);
+  const [taskDataColumns, setTaskDataColumns] = useState<ColumnInfoTypes[]>([]);
+  const [taskDate, setTaskDate] = useState(Dates.SUNDAY);
+  const [dailyTaskData, setDailyTaskData] = useState<TableData[]>([]);
+
+  useEffect(() => {
+    setTaskDataColumns(tasksColumnTypes);
+    setTaskData(scheduleTasksMockData);
+    if (taskDate === Dates.SUNDAY) {
+      setDailyTaskData(sundayScheduleTasksMockData);
+    } else if (taskDate === Dates.MONDAY) {
+      setDailyTaskData(mondayScheduleTasksMockData);
+    } else if (taskDate === Dates.TUESDAY) {
+      setDailyTaskData(tuesdayScheduleTasksMockData);
+    } else if (taskDate === Dates.WEDNESDAY) {
+      setDailyTaskData(wednesdayScheduleTasksMockData);
+    } else if (taskDate === Dates.THURSDAY) {
+      setDailyTaskData(thursdayScheduleTasksMockData);
+    } else if (taskDate === Dates.FRIDAY) {
+      setDailyTaskData(fridayScheduleTasksMockData);
+    } else if (taskDate === Dates.SATURDAY) {
+      setDailyTaskData(saturdayScheduleTasksMockData);
+    } else {
+      setDailyTaskData(sundayScheduleTasksMockData);
+    }
+  }, [taskDate]);
+
+  return (
+    <>
+      <Flex flexDir="column" flexGrow={1}>
+        <Text as="b" display="block" textAlign="left" mb="10px">
+          Weekly Tasks
+        </Text>
+        <ScheduleTable
+          data={taskData}
+          columnInfo={taskDataColumns}
+          maxResults={8}
+          onEdit={() => {}}
+          isSelectable
+        />
+      </Flex>
+      <Flex flexDir="column" flexGrow={1}>
+        <Text as="b" display="block" textAlign="left" mb="10px">
+          Daily Tasks
+        </Text>
+        <Tabs variant="enclosed-colored" h="30px" mb="10px" isFitted>
+          <TabList>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.SUNDAY);
+              }}
+            >
+              Sunday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.MONDAY);
+              }}
+            >
+              Monday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.TUESDAY);
+              }}
+            >
+              Tuesday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.WEDNESDAY);
+              }}
+            >
+              Wednesday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.THURSDAY);
+              }}
+            >
+              Thursday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.FRIDAY);
+              }}
+            >
+              Friday
+            </Tab>
+            <Tab
+              _selected={{ color: "white", bg: "purple.main" }}
+              borderRadius="8px 8px 0 0"
+              onClick={() => {
+                setTaskDate(Dates.SATURDAY);
+              }}
+            >
+              Saturday
+            </Tab>
+          </TabList>
+        </Tabs>
+        <ScheduleTable
+          data={dailyTaskData}
+          columnInfo={taskDataColumns}
+          maxResults={8}
+          onEdit={() => {}}
+          isSelectable
+        />
+      </Flex>
+    </>
+  );
+};
+
+export default ScheduleListView;