Feat: home page card added to schedule page atm

uwblueprint · Aug 9, 2024 · e96caad · e96caad
1 parent 7e08295
commit e96caad
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 2 deletions.
diff --git a/frontend/src/components/pages/home/HomeRoomCard.tsx b/frontend/src/components/pages/home/HomeRoomCard.tsx
@@ -0,0 +1,88 @@
+import React from "react"
+import {
+    Flex,
+    Heading,
+    Text,
+    Box,
+    Circle
+  } from "@chakra-ui/react";
+
+type Props = {
+    room: string | number;
+    residentId: number;
+  };
+
+const RoomCard = ({
+    room,
+    residentId
+}: Props): React.ReactElement => {
+
+    return (
+        <Box
+            p="10px"
+            ml="30px"
+            mr="20px"
+            mt="20px"
+            border="solid"
+            borderRadius="10px"
+            borderColor="gray.300"
+            w="17vw"
+        >
+            {/* <Avatar name="Jane Doe" src="https://bit.ly/2k1H1t6" /> */}
+            <Flex flexDir="column" ml={4} my={4}>
+                <Heading size="sm" color="purple.500">
+                    Room {room} — ID{residentId}
+                </Heading>
+                <Flex flexDir="column" my="5px">
+                    <Flex flexDir="row">
+                        <Circle
+                            size="35px"
+                            border="solid"
+                            borderColor="gray.300"
+                            my={1}
+                        >
+                            <Flex alignItems="center" justifyContent="center" fontSize="sm">
+                                1
+                            </Flex>
+                        </Circle>
+                        <Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
+                            Pending Tasks
+                        </Flex>
+                    </Flex>
+                    <Flex flexDir="row">
+                        <Circle
+                            size="35px"
+                            border="solid"
+                            borderColor="gray.300"
+                            my={1}
+                        >
+                            <Flex alignItems="center" justifyContent="center" fontSize="sm">
+                                2
+                            </Flex>
+                        </Circle>
+                        <Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
+                            Tasks Assigned
+                        </Flex>
+                    </Flex>
+                    <Flex flexDir="row">
+                        <Circle
+                            size="35px"
+                            border="solid"
+                            borderColor="gray.300"
+                            my={1}
+                        >
+                            <Flex alignItems="center" justifyContent="center" fontSize="sm">
+                                2
+                            </Flex>
+                        </Circle>
+                        <Flex alignItems="center" justifyContent="center" fontSize="md" ml={3}>
+                            Active Warnings
+                        </Flex>
+                    </Flex>
+                </Flex>
+            </Flex>
+        </Box>
+    )
+}
+
+export default RoomCard;
diff --git a/frontend/src/components/pages/schedule/SchedulePage.tsx b/frontend/src/components/pages/schedule/SchedulePage.tsx
@@ -1,10 +1,31 @@
 import React from "react";
+import {
+  Flex,
+} 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}
+  />
+)
+
 
 const SchedulePage = (): React.ReactElement => {
   return (
-    <div>
+    <Flex flexDir="column" flexGrow={1} p="20px">
       <h1>Schedule Page</h1>
-    </div>
+      <Flex
+        flexWrap="wrap" 
+        justifyContent="flex-start" 
+      >
+        {renderRoomCards}
+      </Flex>
+    </Flex>
   );
 };