Merge branch 'dev' into ryan-kathleen-implement-search-bar-in-announc…

…ements-page

backend/graphql/types/taskType.ts

@@ -51,8 +51,8 @@ const taskType = gql`
     assigneeId: Int
     assignerId: Int
     status: Status
-    startDate: Date
-    endDate: Date
+    startDate: DateTime
+    endDate: DateTime
     recurrenceFrequency: Recurrence_Frequency
     comments: String
   }
@@ -63,8 +63,8 @@ const taskType = gql`
     assigneeId: Int!
     assignerId: Int!
     status: Status!
-    startDate: Date!
-    endDate: Date
+    startDate: DateTime!
+    endDate: DateTime!
     recurrenceFrequency: Recurrence_Frequency
     comments: String
   }
@@ -74,8 +74,8 @@ const taskType = gql`
     getTasksByType(type: TaskType!): [TaskDTO!]
     getTasksByAssigneeId(assigneeId: Int!): [TaskAssignedDTO]
     getTasksByAssignerId(assignerId: Int!): [TaskAssignedDTO]
-    getTasksByStartDate(startDate: Date!): [TaskAssignedDTO]
-    getTasksByEndDate(endDate: Date!): [TaskAssignedDTO]
+    getTasksByStartDate(startDate: DateTime!): [TaskAssignedDTO]
+    getTasksByEndDate(endDate: DateTime!): [TaskAssignedDTO]
     getTasksByStatus(status: Status!): [TaskAssignedDTO]
   }
 

backend/prisma/schema.prisma

@@ -112,8 +112,8 @@ model TaskAssigned {
   assignee            Resident             @relation(fields: [assigneeId], references: [userId], onDelete: Cascade, onUpdate: Cascade)
   assigneeId          Int                  @map("assignee_id")
   status              Status
-  startDate           DateTime             @map("start_date") @db.Date
-  endDate             DateTime?            @map("end_date") @db.Date
+  startDate           DateTime             @map("start_date")
+  endDate             DateTime            @map("end_date")
   recurrenceFrequency RecurrenceFrequency? @map("recurrence_frequency")
   comments            String?
 

backend/services/interfaces/taskService.ts

@@ -29,7 +29,7 @@ export interface InputTaskAssignedDTO {
   assignerId?: number;
   status: Status;
   startDate: Date;
-  endDate?: Date;
+  endDate: Date;
   recurrenceFrequency?: RecurrenceFrequency;
   comments?: string;
 }
@@ -41,7 +41,7 @@ export interface TaskAssignedDTO {
   assigneeId: number;
   status: Status;
   startDate: Date;
-  endDate: Date | null;
+  endDate: Date;
   recurrenceFrequency: RecurrenceFrequency | null;
   comments: string | null;
 }

frontend/package.json

@@ -38,6 +38,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
+    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",

frontend/src/App.tsx

@@ -28,9 +28,9 @@ 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";
 import SchedulePage from "./components/pages/schedule/SchedulePage";
 import ResidentsPage from "./components/pages/residents/ResidentsPage";
 import InsightsPage from "./components/pages/insights/InsightsPage";
@@ -84,23 +84,23 @@ const App = (): React.ReactElement => {
                   path={Routes.HOME_PAGE}
                   element={
                     <PrivateRoute>
-                      <AnnouncementsPage />
+                      <HomePage />
                     </PrivateRoute>
                   }
                 />
                 <Route
-                  path={Routes.TASKS_PAGE}
+                  path={Routes.ANNOUNCEMENTS_PAGE}
                   element={
                     <PrivateRoute>
-                      <TasksPage />
+                      <HomePage />
                     </PrivateRoute>
                   }
                 />
                 <Route
-                  path={Routes.APPROVALS_PAGE}
+                  path={Routes.TASKS_PAGE}
                   element={
                     <PrivateRoute>
-                      <ApprovalsPage />
+                      <TasksPage />
                     </PrivateRoute>
                   }
                 />

frontend/src/components/auth/PrivateRoute.tsx

@@ -10,14 +10,15 @@ const PrivateRoute: React.FC<{ children: React.ReactElement }> = ({
   children,
 }) => {
   const { authenticatedUser } = useContext(AuthContext);
-  return authenticatedUser ? (
+  return ( // after return, add "authenticatedUser ?""
     <Flex>
       <SideBar />
       {children}
     </Flex>
-  ) : (
-    <Navigate to={LOGIN_PAGE} />
-  );
+  // ) : (
+  //   <Navigate to={LOGIN_PAGE} />
+  // );
+  )
 };
 
 export default PrivateRoute;

frontend/src/components/common/CommonTable.tsx

@@ -17,6 +17,8 @@ import {
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import ChevronLeftOutlinedIcon from "@mui/icons-material/ChevronLeftOutlined";
 import ChevronRightOutlinedIcon from "@mui/icons-material/ChevronRightOutlined";
+import KeyboardArrowUpOutlinedIcon from "@mui/icons-material/KeyboardArrowUpOutlined";
+import KeyboardArrowDownOutlinedIcon from "@mui/icons-material/KeyboardArrowDownOutlined";
 
 type TableTypes = string | number | boolean | Date;
 
@@ -34,6 +36,10 @@ type Props = {
   isSelectable?: boolean;
 };
 
+type SortState = {
+  [key: string]: number;
+};
+
 const CommonTable = ({
   columnInfo,
   data,
@@ -44,6 +50,9 @@ const CommonTable = ({
   const [checked, setChecked] = useState(data.map(() => false));
   const [page, setPage] = useState(1);
   const [pageArray, setPageArray] = useState<number[]>([]);
+  const [sortingColumn, setSortingColumn] = useState<SortState>({});
+  const [originalData, setOriginalData] = useState(data);
+  const [sortedData, setSortedData] = useState(data);
 
   useEffect(() => {
     return Math.ceil(data.length / maxResults) >= 5
@@ -56,10 +65,54 @@ const CommonTable = ({
         );
   }, [data, maxResults]);
 
+  useEffect(() => {
+    setOriginalData(data);
+    setSortedData(data);
+  }, [data]);
+
+  // sorting the columns by ascending and descending order based on column indicated
+  const sortColumn = (column: string) => {
+    const newSortingColumn: SortState = {};
+    columnInfo.forEach((col) => {
+      newSortingColumn[col.key] =
+        col.key === column ? sortingColumn[column] : 0;
+    });
+
+    // increment column sorting state
+    sortingColumn[column] = sortingColumn[column]
+      ? sortingColumn[column] + 1
+      : 1;
+
+    // if at the end, go back to 0
+    if (sortingColumn[column] === 3) {
+      setSortingColumn({ ...sortingColumn, [column]: 0 });
+      setSortedData(originalData);
+      return;
+    }
+    setSortingColumn({
+      ...newSortingColumn,
+      [column]: sortingColumn[column],
+    });
+
+    // apply sorting based on which sorting state the column's in
+    const sorted = [...originalData].sort((a, b) => {
+      if (sortingColumn[column] === 1) {
+        return a[column] > b[column] ? 1 : -1;
+      }
+      if (sortingColumn[column] === 2) {
+        return a[column] < b[column] ? 1 : -1;
+      }
+      return 0;
+    });
+    setSortedData(sorted);
+  };
+
+  // constants for pagination UI
   const checkedPage = checked.slice((page - 1) * maxResults, page * maxResults);
   const allChecked = checkedPage.every(Boolean);
   const isIndeterminate = checkedPage.some(Boolean) && !allChecked;
 
+  // pagination functions
   const leftPaginate = () => {
     if (page > 1) setPage(page - 1);
     if (pageArray[0] > 1 && pageArray.length === 5) {
@@ -127,14 +180,46 @@ const CommonTable = ({
                   />
                 </Th>
               ) : null}
-              {columnInfo.map((header, index) => {
-                return <Th key={index}>{header.header}</Th>;
-              })}
+              {columnInfo.map((header, index) => (
+                <Th key={index}>
+                  <Flex alignItems="center">
+                    {header.header}
+                    <Flex
+                      alignItems="center"
+                      flexDirection="column"
+                      paddingLeft="2.5px"
+                    >
+                      <KeyboardArrowUpOutlinedIcon
+                        style={{
+                          height: "0.5em",
+                          cursor: "pointer",
+                          color:
+                            sortingColumn[header.key] === 1 ? "" : "#c4c8d8",
+                        }}
+                        onClick={() => {
+                          sortColumn(header.key);
+                        }}
+                      />
+                      <KeyboardArrowDownOutlinedIcon
+                        style={{
+                          height: "0.5em",
+                          cursor: "pointer",
+                          color:
+                            sortingColumn[header.key] === 2 ? "" : "#c4c8d8",
+                        }}
+                        onClick={() => {
+                          sortColumn(header.key);
+                        }}
+                      />
+                    </Flex>
+                  </Flex>
+                </Th>
+              ))}
               <Th />
             </Tr>
           </Thead>
           <Tbody>
-            {data
+            {sortedData
               .slice((page - 1) * maxResults, page * maxResults)
               .map((row, index) => {
                 return (

frontend/src/components/common/FormField.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  Button,
+  Input,
+  Flex,
+  FormControl,
+  FormLabel,
+  InputRightElement,
+  InputGroup,
+  InputLeftElement,
+} from "@chakra-ui/react";
+
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const FormField = ({
+  label,
+  value,
+  type = "text",
+  onChange,
+  onBlur,
+  submitPressed,
+  required = false,
+  error = false,
+  isPassword = false,
+  showPassword,
+  setShowPassword,
+  leftElement,
+}: {
+  label: string;
+  value: string;
+  type?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  submitPressed: boolean;
+  required?: boolean;
+  error?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+  leftElement?: string;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired={required}>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        {label}
+      </FormLabel>
+      <InputGroup>
+        {leftElement && (
+          <InputLeftElement height="34px" pointerEvents="none" color="black">
+            <Flex>{leftElement}</Flex>
+          </InputLeftElement>
+        )}
+
+        <Input
+          variant="primary"
+          placeholder=""
+          borderColor={
+            error || (submitPressed && !value && required)
+              ? "red.error"
+              : "gray.300"
+          }
+          boxShadow={
+            error || (submitPressed && !value && required)
+              ? "0 0 2px red.error"
+              : "none"
+          }
+          type={
+            isPassword && setShowPassword && !showPassword ? "password" : type
+          }
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        {isPassword && setShowPassword && (
+          <InputRightElement h="34px">
+            <Button
+              onClick={() => setShowPassword(!showPassword)}
+              bg="transparent"
+              _hover={{ bg: "transparent" }}
+            >
+              {!showPassword ? (
+                <VisibilityIcon fontSize="small" />
+              ) : (
+                <VisibilityOffIcon fontSize="small" />
+              )}
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </FormControl>
+  </Flex>
+);
+
+export default FormField;

frontend/src/components/common/ModalContainer.tsx

@@ -25,7 +25,11 @@ const ModalContainer = ({
   children,
 }: Props): React.ReactElement => {
   return (
-    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+    <Modal
+      closeOnOverlayClick={false}
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+    >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>