Merge pull request #103 from uwblueprint/daniel/room-card

Feat: home page card added to schedule page atm
uwblueprint · Sep 26, 2024 · 4233b15 · 4233b15
2 parents 5db2c10 + 744e1b0
commit 4233b15
Show file tree

Hide file tree

Showing 2 changed files with 100 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,77 @@
+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"
+    >
+      <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>
   );
 };