From ac556a768a946db7aeccc6e8a2a9c605dc150139 Mon Sep 17 00:00:00 2001
From: Cindy Li <cindy.hongjia.li16@gmail.com>
Date: Wed, 24 Jul 2024 20:12:35 -0400
Subject: [PATCH 1/3] create homepage ui layout

---
 frontend/src/App.tsx                          |  9 +++++
 frontend/src/components/common/SideBar.tsx    |  2 +-
 .../src/components/pages/home/HomePage.tsx    | 39 +++++++++++++++++++
 .../src/components/pages/home/RoomGrid.tsx    | 30 ++++++++++++++
 frontend/src/constants/Routes.ts              |  4 +-
 5 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/pages/home/HomePage.tsx
 create mode 100644 frontend/src/components/pages/home/RoomGrid.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4e361f4d..7d2a3cd0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,6 +28,7 @@ import PrivateRoute from "./components/auth/PrivateRoute";
 import LoginPage from "./components/auth/LoginPage";
 import SignupPage from "./components/auth/SignupPage";
 import ResetPasswordPage from "./components/auth/ResetPasswordPage";
+import HomePage from "./components/pages/home/HomePage";
 import AnnouncementsPage from "./components/pages/announcements/AnnouncementsPage";
 import TasksPage from "./components/pages/tasks/TasksPage";
 import ApprovalsPage from "./components/pages/approvals/ApprovalsPage";
@@ -82,6 +83,14 @@ const App = (): React.ReactElement => {
                 />
                 <Route
                   path={Routes.HOME_PAGE}
+                  element={
+                    <PrivateRoute>
+                      <HomePage />
+                    </PrivateRoute>
+                  }
+                />
+                <Route
+                  path={Routes.ANNOUNCEMENTS_PAGE}
                   element={
                     <PrivateRoute>
                       <AnnouncementsPage />
diff --git a/frontend/src/components/common/SideBar.tsx b/frontend/src/components/common/SideBar.tsx
index 5f91076a..246d1b56 100644
--- a/frontend/src/components/common/SideBar.tsx
+++ b/frontend/src/components/common/SideBar.tsx
@@ -74,7 +74,7 @@ const SideBar: React.FC = () => {
   const pages = [
     { label: "Home", route: Routes.HOME_PAGE }, // NEED NEW HOME PAGE
     { label: "Schedule", route: Routes.SCHEDULE_PAGE },
-    { label: "Announcements", route: Routes.HOME_PAGE }, // NEED NEW NAME
+    { label: "Announcements", route: Routes.ANNOUNCEMENTS_PAGE }, // NEED NEW NAME
     { label: "Approvals", route: Routes.APPROVALS_PAGE },
     { label: "Participants", route: Routes.RESIDENTS_PAGE }, // RESIDENTS/PARTICIPANTS
     { label: "Task List", route: Routes.TASKS_PAGE },
diff --git a/frontend/src/components/pages/home/HomePage.tsx b/frontend/src/components/pages/home/HomePage.tsx
new file mode 100644
index 00000000..ee08baed
--- /dev/null
+++ b/frontend/src/components/pages/home/HomePage.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Box, Grid, Text } from "@chakra-ui/react";
+import { Rectangle } from "@mui/icons-material";
+
+import RoomGrid from "./RoomGrid";
+
+const rooms = [
+    { id: 1, name: 'Room 1', info: 'Info about Room 1' },
+    { id: 2, name: 'Room 2', info: 'Info about Room 2' },
+    { id: 3, name: 'Room 3', info: 'Info about Room 3' },
+    { id: 4, name: 'Room 4', info: 'Info about Room 4' },
+    { id: 5, name: 'Room 5', info: 'Info about Room 5' },
+    { id: 6, name: 'Room 6', info: 'Info about Room 6' },
+    { id: 7, name: 'Room 7', info: 'Info about Room 7' },
+    { id: 8, name: 'Room 8', info: 'Info about Room 8' },
+    { id: 9, name: 'Room 9', info: 'Info about Room 9' },
+    { id: 10, name: 'Room 10', info: 'Info about Room 10' },
+  ];
+  
+const HomePage = (): React.ReactElement => {
+return (
+    <Flex flexDir="column" alignItems="center" flexGrow={1}>
+        <Box w="100%" h="13%" borderWidth={2} bg="purple.50" />
+        <Flex flexDir="column" w="66%" flexGrow={1} position="absolute" top="2%">
+            <Text fontSize="2xl" fontWeight="bold" textAlign="left" alignItems="center" paddingY="15px">
+                Marillac Place Overview
+            </Text>
+            {/* <Flex w="67%" h="100%" borderWidth={2}>
+                hello
+            </Flex> */}
+            <RoomGrid />
+            <Flex w="100%" h="288px" borderWidth={2} marginTop="36px" />
+        </Flex>
+
+    </Flex>
+);
+};
+
+export default HomePage;
diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx
new file mode 100644
index 00000000..c912496a
--- /dev/null
+++ b/frontend/src/components/pages/home/RoomGrid.tsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Box, Text } from '@chakra-ui/react';
+
+const rooms = [
+  { id: 1, name: 'Room 1', info: 'Info about Room 1' },
+  { id: 2, name: 'Room 2', info: 'Info about Room 2' },
+  { id: 3, name: 'Room 3', info: 'Info about Room 3' },
+  { id: 4, name: 'Room 4', info: 'Info about Room 4' },
+  { id: 5, name: 'Room 5', info: 'Info about Room 5' },
+  { id: 6, name: 'Room 6', info: 'Info about Room 6' },
+  { id: 7, name: 'Room 7', info: 'Info about Room 7' },
+  { id: 8, name: 'Room 8', info: 'Info about Room 8' },
+  { id: 9, name: 'Room 9', info: 'Info about Room 9' },
+  { id: 10, name: 'Room 10', info: 'Info about Room 10' },
+];
+
+function RoomGrid() {
+  return (
+    <Grid templateColumns="repeat(4, 1fr)" gap={2}>
+      {rooms.map((room) => (
+        <Box key={room.id} p={4} borderWidth="2px" borderColor="grey.300" borderRadius="5px" w="238px" h="170px" bg="white">
+          <Text fontWeight="bold">{room.name}</Text>
+          <Text>{room.info}</Text>
+        </Box>
+      ))}
+    </Grid>
+  );
+}
+
+export default RoomGrid;
\ No newline at end of file
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
index 7b1fd83f..018a31a0 100644
--- a/frontend/src/constants/Routes.ts
+++ b/frontend/src/constants/Routes.ts
@@ -1,4 +1,6 @@
-export const HOME_PAGE = "/";
+export const HOME_PAGE = "/home";
+
+export const ANNOUNCEMENTS_PAGE = "/announcements";
 
 export const LOGIN_PAGE = "/login";
 

From 4e6480ba8826cd8ea5d8b6868615abb4804c9847 Mon Sep 17 00:00:00 2001
From: Cindy Li <cindy.hongjia.li16@gmail.com>
Date: Wed, 24 Jul 2024 20:56:10 -0400
Subject: [PATCH 2/3] fix dimensions

---
 frontend/src/components/pages/home/HomePage.tsx | 17 ++---------------
 frontend/src/components/pages/home/RoomGrid.tsx |  2 +-
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/pages/home/HomePage.tsx b/frontend/src/components/pages/home/HomePage.tsx
index ee08baed..71feea93 100644
--- a/frontend/src/components/pages/home/HomePage.tsx
+++ b/frontend/src/components/pages/home/HomePage.tsx
@@ -3,26 +3,13 @@ import { Flex, Box, Grid, Text } from "@chakra-ui/react";
 import { Rectangle } from "@mui/icons-material";
 
 import RoomGrid from "./RoomGrid";
-
-const rooms = [
-    { id: 1, name: 'Room 1', info: 'Info about Room 1' },
-    { id: 2, name: 'Room 2', info: 'Info about Room 2' },
-    { id: 3, name: 'Room 3', info: 'Info about Room 3' },
-    { id: 4, name: 'Room 4', info: 'Info about Room 4' },
-    { id: 5, name: 'Room 5', info: 'Info about Room 5' },
-    { id: 6, name: 'Room 6', info: 'Info about Room 6' },
-    { id: 7, name: 'Room 7', info: 'Info about Room 7' },
-    { id: 8, name: 'Room 8', info: 'Info about Room 8' },
-    { id: 9, name: 'Room 9', info: 'Info about Room 9' },
-    { id: 10, name: 'Room 10', info: 'Info about Room 10' },
-  ];
   
 const HomePage = (): React.ReactElement => {
 return (
     <Flex flexDir="column" alignItems="center" flexGrow={1}>
         <Box w="100%" h="13%" borderWidth={2} bg="purple.50" />
-        <Flex flexDir="column" w="66%" flexGrow={1} position="absolute" top="2%">
-            <Text fontSize="2xl" fontWeight="bold" textAlign="left" alignItems="center" paddingY="15px">
+        <Flex flexDir="column" w="65%" flexGrow={1} position="absolute" top="2%">
+            <Text fontSize="2xl" fontWeight="bold" textAlign="left" alignItems="center" paddingY="12px">
                 Marillac Place Overview
             </Text>
             {/* <Flex w="67%" h="100%" borderWidth={2}>
diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx
index c912496a..642e0220 100644
--- a/frontend/src/components/pages/home/RoomGrid.tsx
+++ b/frontend/src/components/pages/home/RoomGrid.tsx
@@ -18,7 +18,7 @@ function RoomGrid() {
   return (
     <Grid templateColumns="repeat(4, 1fr)" gap={2}>
       {rooms.map((room) => (
-        <Box key={room.id} p={4} borderWidth="2px" borderColor="grey.300" borderRadius="5px" w="238px" h="170px" bg="white">
+        <Box key={room.id} p={4} borderWidth="2px" borderColor="grey.300" borderRadius="5px" w="100%" h="100%" bg="white">
           <Text fontWeight="bold">{room.name}</Text>
           <Text>{room.info}</Text>
         </Box>

From 564e39a17f68bdb27a212abf894b7281b539a763 Mon Sep 17 00:00:00 2001
From: Jesse Huang <87463074+jeessh@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:32:53 -0400
Subject: [PATCH 3/3] fixed linting

---
 .../src/components/pages/home/RoomGrid.tsx    | 35 ++++++++++++-------
 frontend/src/constants/Routes.ts              |  2 --
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/pages/home/RoomGrid.tsx b/frontend/src/components/pages/home/RoomGrid.tsx
index 642e0220..70e2485c 100644
--- a/frontend/src/components/pages/home/RoomGrid.tsx
+++ b/frontend/src/components/pages/home/RoomGrid.tsx
@@ -1,24 +1,33 @@
 import React, { useEffect, useState } from "react";
-import { Grid, Box, Text } from '@chakra-ui/react';
+import { Grid, Box, Text } from "@chakra-ui/react";
 
 const rooms = [
-  { id: 1, name: 'Room 1', info: 'Info about Room 1' },
-  { id: 2, name: 'Room 2', info: 'Info about Room 2' },
-  { id: 3, name: 'Room 3', info: 'Info about Room 3' },
-  { id: 4, name: 'Room 4', info: 'Info about Room 4' },
-  { id: 5, name: 'Room 5', info: 'Info about Room 5' },
-  { id: 6, name: 'Room 6', info: 'Info about Room 6' },
-  { id: 7, name: 'Room 7', info: 'Info about Room 7' },
-  { id: 8, name: 'Room 8', info: 'Info about Room 8' },
-  { id: 9, name: 'Room 9', info: 'Info about Room 9' },
-  { id: 10, name: 'Room 10', info: 'Info about Room 10' },
+  { id: 1, name: "Room 1", info: "Info about Room 1" },
+  { id: 2, name: "Room 2", info: "Info about Room 2" },
+  { id: 3, name: "Room 3", info: "Info about Room 3" },
+  { id: 4, name: "Room 4", info: "Info about Room 4" },
+  { id: 5, name: "Room 5", info: "Info about Room 5" },
+  { id: 6, name: "Room 6", info: "Info about Room 6" },
+  { id: 7, name: "Room 7", info: "Info about Room 7" },
+  { id: 8, name: "Room 8", info: "Info about Room 8" },
+  { id: 9, name: "Room 9", info: "Info about Room 9" },
+  { id: 10, name: "Room 10", info: "Info about Room 10" },
 ];
 
 function RoomGrid() {
   return (
     <Grid templateColumns="repeat(4, 1fr)" gap={2}>
       {rooms.map((room) => (
-        <Box key={room.id} p={4} borderWidth="2px" borderColor="grey.300" borderRadius="5px" w="100%" h="100%" bg="white">
+        <Box
+          key={room.id}
+          p={4}
+          borderWidth="2px"
+          borderColor="grey.300"
+          borderRadius="5px"
+          w="100%"
+          h="100%"
+          bg="white"
+        >
           <Text fontWeight="bold">{room.name}</Text>
           <Text>{room.info}</Text>
         </Box>
@@ -27,4 +36,4 @@ function RoomGrid() {
   );
 }
 
-export default RoomGrid;
\ No newline at end of file
+export default RoomGrid;
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
index 5f72a038..ad382062 100644
--- a/frontend/src/constants/Routes.ts
+++ b/frontend/src/constants/Routes.ts
@@ -2,8 +2,6 @@ export const HOME_PAGE = "/home";
 
 export const ANNOUNCEMENTS_PAGE = "/announcements";
 
-export const ANNOUNCEMENTS_PAGE = "/announcements";
-
 export const LOGIN_PAGE = "/login";
 
 export const SIGNUP_PAGE = "/signup";