From 3d23d507ec1aa9e77012a1e32a4b35ad31bc986a Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Thu, 13 Jun 2024 20:15:43 +0000
Subject: [PATCH 1/6] table component

---
 frontend/src/components/DataTable.jsx | 145 ++++++++++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 frontend/src/components/DataTable.jsx

diff --git a/frontend/src/components/DataTable.jsx b/frontend/src/components/DataTable.jsx
new file mode 100644
index 0000000000..251d8bf132
--- /dev/null
+++ b/frontend/src/components/DataTable.jsx
@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import DataTable from "react-data-table-component";
+import ReactPaginate from "react-paginate";
+import { InputGroup, Form, Button, Container, Row, Col } from "react-bootstrap";
+import axios from "axios";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const columns = [
+  { name: "ID", selector: (row) => row.id, sortable: true },
+  { name: "Name", selector: (row) => row.name, sortable: true },
+  { name: "Age", selector: (row) => row.age, sortable: true },
+];
+
+const customStyles = {
+  rows: {
+    style: {
+      border: "none !important",
+      borderRadius: "5px",
+    },
+  },
+};
+
+const conditionalRowStyles = [
+  {
+    when: (row) => row.id % 2 === 0,
+    style: {
+      backgroundColor: "#ffffff", // Light gray color
+    },
+  },
+  {
+    when: (row) => row.id % 2 !== 0,
+    style: {
+      backgroundColor: "#f2f2f2", // White color
+    },
+  },
+];
+
+const MyDataTable = () => {
+  const [data, setData] = useState([]);
+  const [totalRows, setTotalRows] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(0); // page is zero-based in react-paginate
+  const [perPage, setPerPage] = useState(10);
+  const [goToPage, setGoToPage] = useState("");
+
+  const fetchData = async (currentPage, perPage) => {
+    setLoading(true);
+    try {
+      // 模拟从服务器获取数据
+      const response = {
+        data: {
+          data: Array.from({ length: perPage }, (_, i) => ({
+            id: currentPage * perPage + i + 1,
+            name: `John Doe ${currentPage * perPage + i + 1}`,
+            age: Math.floor(Math.random() * 100),
+          })),
+          total: 85, // 假设总共有85条数据
+        },
+      };
+      setData(response.data.data);
+      setTotalRows(response.data.total);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData(page, perPage);
+  }, [page, perPage]);
+
+  const handlePageChange = ({ selected }) => {
+    setPage(selected);
+  };
+
+  const handleGoToPageChange = (event) => {
+    setGoToPage(event.target.value);
+  };
+
+  const handleGoToPageSubmit = () => {
+    const pageNumber = Number(goToPage) - 1; // react-paginate is zero-based
+    if (
+      !isNaN(pageNumber) &&
+      pageNumber >= 0 &&
+      pageNumber < Math.ceil(totalRows / perPage)
+    ) {
+      setPage(pageNumber);
+    }
+  };
+
+  return (
+    <Container>
+      <DataTable
+        title="Server-Side Pagination"
+        columns={columns}
+        data={data}
+        progressPending={loading}
+        customStyles={customStyles}
+        conditionalRowStyles={conditionalRowStyles}
+      />
+      <Row className="mt-3">
+        <Col>
+          <ReactPaginate
+            previousLabel={"<"}
+            nextLabel={">"}
+            breakLabel={"..."}
+            breakClassName={"page-item"}
+            breakLinkClassName={"page-link"}
+            pageCount={Math.ceil(totalRows / perPage)}
+            marginPagesDisplayed={2}
+            pageRangeDisplayed={5}
+            onPageChange={handlePageChange}
+            containerClassName={"pagination"}
+            pageClassName={"page-item"}
+            pageLinkClassName={"page-link"}
+            previousClassName={"page-item"}
+            previousLinkClassName={"page-link"}
+            nextClassName={"page-item"}
+            nextLinkClassName={"page-link"}
+            activeClassName={"active"}
+            forcePage={page}
+          />
+        </Col>
+        <Col className="text-right">
+          <InputGroup style={{ width: "150px" }} className="ml-auto">
+            <InputGroup.Text>Go to</InputGroup.Text>
+            <Form.Control
+              type="number"
+              value={goToPage}
+              onChange={handleGoToPageChange}
+              min="1"
+              max={Math.ceil(totalRows / perPage)}
+            />
+            <Button variant="primary" onClick={handleGoToPageSubmit}>
+              Go
+            </Button>
+          </InputGroup>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default MyDataTable;

From b73bbb1afd0e00072f12cd2798a1d9c7719bc731 Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Fri, 14 Jun 2024 20:51:25 +0000
Subject: [PATCH 2/6] pagination

---
 frontend/src/components/DataTable.jsx | 47 ++++++++++++++++++++-------
 frontend/src/css/dataTable.css        | 15 +++++++++
 2 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/css/dataTable.css

diff --git a/frontend/src/components/DataTable.jsx b/frontend/src/components/DataTable.jsx
index 251d8bf132..c434b28c12 100644
--- a/frontend/src/components/DataTable.jsx
+++ b/frontend/src/components/DataTable.jsx
@@ -4,6 +4,7 @@ import ReactPaginate from "react-paginate";
 import { InputGroup, Form, Button, Container, Row, Col } from "react-bootstrap";
 import axios from "axios";
 import "bootstrap/dist/css/bootstrap.min.css";
+import "../css/dataTable.css";
 
 const columns = [
   { name: "ID", selector: (row) => row.id, sortable: true },
@@ -46,7 +47,6 @@ const MyDataTable = () => {
   const fetchData = async (currentPage, perPage) => {
     setLoading(true);
     try {
-      // 模拟从服务器获取数据
       const response = {
         data: {
           data: Array.from({ length: perPage }, (_, i) => ({
@@ -54,7 +54,7 @@ const MyDataTable = () => {
             name: `John Doe ${currentPage * perPage + i + 1}`,
             age: Math.floor(Math.random() * 100),
           })),
-          total: 85, // 假设总共有85条数据
+          total: 85,
         },
       };
       setData(response.data.data);
@@ -89,6 +89,13 @@ const MyDataTable = () => {
     }
   };
 
+  const handlePerPageChange = (event) => {
+    const newPerPage = Number(event.target.value);
+    if (!isNaN(newPerPage) && newPerPage > 0) {
+      setPerPage(newPerPage);
+    }
+  };
+
   return (
     <Container>
       <DataTable
@@ -99,8 +106,28 @@ const MyDataTable = () => {
         customStyles={customStyles}
         conditionalRowStyles={conditionalRowStyles}
       />
-      <Row className="mt-3">
-        <Col>
+      <Row className="mt-3 d-flex justify-content-center align-items-center">
+        <Col
+          xs={12}
+          className="d-flex justify-content-center align-items-center flex-nowrap"
+        >
+          <div className="me-3">
+            <span>Total Items: {totalRows}</span>
+          </div>
+          <InputGroup className="me-3" style={{ width: "150px" }}>
+            <InputGroup.Text>Per page</InputGroup.Text>
+            <Form.Control
+              as="select"
+              value={perPage}
+              onChange={handlePerPageChange}
+            >
+              <option value={10}>10</option>
+              <option value={20}>20</option>
+              <option value={30}>30</option>
+              <option value={40}>40</option>
+              <option value={50}>50</option>
+            </Form.Control>
+          </InputGroup>
           <ReactPaginate
             previousLabel={"<"}
             nextLabel={">"}
@@ -118,21 +145,17 @@ const MyDataTable = () => {
             previousLinkClassName={"page-link"}
             nextClassName={"page-item"}
             nextLinkClassName={"page-link"}
-            activeClassName={"active"}
+            activeClassName={"active-page"}
             forcePage={page}
           />
-        </Col>
-        <Col className="text-right">
-          <InputGroup style={{ width: "150px" }} className="ml-auto">
+          <InputGroup className="ms-3" style={{ width: "150px" }}>
             <InputGroup.Text>Go to</InputGroup.Text>
             <Form.Control
-              type="number"
+              type="text"
               value={goToPage}
               onChange={handleGoToPageChange}
-              min="1"
-              max={Math.ceil(totalRows / perPage)}
             />
-            <Button variant="primary" onClick={handleGoToPageSubmit}>
+            <Button className="go-button" onClick={handleGoToPageSubmit}>
               Go
             </Button>
           </InputGroup>
diff --git a/frontend/src/css/dataTable.css b/frontend/src/css/dataTable.css
new file mode 100644
index 0000000000..ccfb72a02b
--- /dev/null
+++ b/frontend/src/css/dataTable.css
@@ -0,0 +1,15 @@
+.pagination .active-page a {
+    background-color: #007DA3 ;
+    border-color: #007DA3 ;
+    color: white ;
+}
+
+.go-button {
+    background-color: #007DA3;
+    border-color: #007DA3;
+    color: white;
+}
+
+.pagination {
+    margin-bottom: 0;
+}
\ No newline at end of file

From 069cb4d4e42cc28062342b28a25c9789234fb06a Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Mon, 17 Jun 2024 22:57:34 +0000
Subject: [PATCH 3/6] add filter

---
 frontend/src/components/DataTable.jsx | 61 ++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/DataTable.jsx b/frontend/src/components/DataTable.jsx
index c434b28c12..5c5b28f3ed 100644
--- a/frontend/src/components/DataTable.jsx
+++ b/frontend/src/components/DataTable.jsx
@@ -6,6 +6,16 @@ import axios from "axios";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../css/dataTable.css";
 
+const wrappedColumns = useMemo(
+  () =>
+    columnNames.map((col) => ({
+      name: col.charAt(0).toUpperCase() + col.slice(1), // Capitalize the column header
+      selector: (row) => row[col], // Accessor function for the column data
+      sortable: true, // Make the column sortable
+    })),
+  [columnNames],
+);
+
 const columns = [
   { name: "ID", selector: (row) => row.id, sortable: true },
   { name: "Name", selector: (row) => row.name, sortable: true },
@@ -36,13 +46,24 @@ const conditionalRowStyles = [
   },
 ];
 
-const MyDataTable = () => {
+const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
   const [data, setData] = useState([]);
   const [totalRows, setTotalRows] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(0); // page is zero-based in react-paginate
+  const [page, setPage] = useState(0);
   const [perPage, setPerPage] = useState(10);
   const [goToPage, setGoToPage] = useState("");
+  const [filterText, setFilterText] = useState("");
+
+  const wrappedColumns = useMemo(
+    () =>
+      columnNames.map((col) => ({
+        name: col.charAt(0).toUpperCase() + col.slice(1),
+        selector: (row) => row[col],
+        sortable: true,
+      })),
+    [columnNames],
+  );
 
   const fetchData = async (currentPage, perPage) => {
     setLoading(true);
@@ -79,7 +100,7 @@ const MyDataTable = () => {
   };
 
   const handleGoToPageSubmit = () => {
-    const pageNumber = Number(goToPage) - 1; // react-paginate is zero-based
+    const pageNumber = Number(goToPage) - 1;
     if (
       !isNaN(pageNumber) &&
       pageNumber >= 0 &&
@@ -96,15 +117,45 @@ const MyDataTable = () => {
     }
   };
 
+  const handleFilterChange = (event) => {
+    setFilterText(event.target.value);
+  };
+
+  const clearFilterResult = (event) => {
+    setFilterText("");
+  };
+
+  const filteredData = data.filter((item) =>
+    Object.values(item).some(
+      (value) =>
+        value &&
+        value.toString().toLowerCase().includes(filterText.toLowerCase()),
+    ),
+  );
+
   return (
     <Container>
+      <InputGroup className="mb-3" style={{ width: "300px" }}>
+        <Form.Control
+          type="text"
+          placeholder="Filter by Text"
+          value={filterText}
+          onChange={handleFilterChange}
+        />
+        <Button className="go-button">Filter</Button>
+        <Button variant="outline-secondary" onClick={clearFilterResult}>
+          Clear
+        </Button>
+      </InputGroup>
       <DataTable
         title="Server-Side Pagination"
         columns={columns}
-        data={data}
+        data={filteredData}
         progressPending={loading}
         customStyles={customStyles}
         conditionalRowStyles={conditionalRowStyles}
+        selectableRows
+        selectableRowsHighlight
       />
       <Row className="mt-3 d-flex justify-content-center align-items-center">
         <Col
@@ -136,7 +187,7 @@ const MyDataTable = () => {
             breakLinkClassName={"page-link"}
             pageCount={Math.ceil(totalRows / perPage)}
             marginPagesDisplayed={2}
-            pageRangeDisplayed={5}
+            pageRangeDisplayed={2}
             onPageChange={handlePageChange}
             containerClassName={"pagination"}
             pageClassName={"page-item"}

From 877897b498fe6e74c950d3742334c406a2590519 Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Tue, 18 Jun 2024 17:52:38 +0000
Subject: [PATCH 4/6] page,perPage and goToPage

---
 frontend/src/About.jsx                | 99 +++++++++++++++++++++++----
 frontend/src/components/DataTable.jsx | 95 +++++++++----------------
 2 files changed, 120 insertions(+), 74 deletions(-)

diff --git a/frontend/src/About.jsx b/frontend/src/About.jsx
index d1c0f327a0..ebd99c4e9b 100644
--- a/frontend/src/About.jsx
+++ b/frontend/src/About.jsx
@@ -1,17 +1,90 @@
-
-import React from 'react';
-import { Alert } from 'react-bootstrap';
-
+import React, { useEffect, useState } from "react";
+import { Alert } from "react-bootstrap";
+import DataTable from "./components/DataTable";
 
 export default function About() {
-    
-    return (
-        <div>
-        <h1>About</h1>
-        <Alert>
-            This is a simple page about wildbook.
-        </Alert>        
+  const columnNames = ["age", "name", "location"];
+
+  const [page, setPage] = useState(0);
+  const [perPage, setPerPage] = useState(10);
+  useEffect(() => {
+    console.log("Page: ", page);
+    console.log("PerPage: ", perPage);
+  }, [page, perPage]);
+  const data = [
+    {
+      age: 232,
+      name: "John Doe",
+      location: "New York",
+    },
+    {
+      age: 25,
+      name: "Jane Doe",
+      location: "Los Angeles",
+    },
+    {
+      age: 27,
+      name: "John Smith",
+      location: "Chicago",
+    },
+    {
+      age: 232,
+      name: "John Doe",
+      location: "New York",
+    },
+    {
+      age: 25,
+      name: "Jane Doe",
+      location: "Los Angeles",
+    },
+    {
+      age: 27,
+      name: "John Smith",
+      location: "Chicago",
+    },
+    {
+      age: 232,
+      name: "John Doe",
+      location: "New York",
+    },
+    {
+      age: 25,
+      name: "Jane Doe",
+      location: "Los Angeles",
+    },
+    {
+      age: 27,
+      name: "John Smith",
+      location: "Chicago",
+    },
+    {
+      age: 232,
+      name: "John Doe",
+      location: "New York",
+    },
+  ];
 
-        </div>
-    );
+  return (
+    <div
+      style={{
+        padding: "100px",
+      }}
+    >
+      <h1>About</h1>
+      <Alert>This is a simple page about wildbook.</Alert>
+      <DataTable
+        columnNames={columnNames}
+        tableData={data}
+        totalItems={85}
+        page={page}
+        perPage={perPage}
+        onPageChange={setPage}
+        onPerPageChange={setPerPage}
+        loading={false}
+        onSelectedRowsChange={(selectedRows) => {
+          console.log("Selected Rows: ", selectedRows);
+        }}
+      />
+    </div>
+  );
 }
diff --git a/frontend/src/components/DataTable.jsx b/frontend/src/components/DataTable.jsx
index 5c5b28f3ed..275d7ec56c 100644
--- a/frontend/src/components/DataTable.jsx
+++ b/frontend/src/components/DataTable.jsx
@@ -1,21 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import DataTable from "react-data-table-component";
 import ReactPaginate from "react-paginate";
 import { InputGroup, Form, Button, Container, Row, Col } from "react-bootstrap";
-import axios from "axios";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../css/dataTable.css";
 
-const wrappedColumns = useMemo(
-  () =>
-    columnNames.map((col) => ({
-      name: col.charAt(0).toUpperCase() + col.slice(1), // Capitalize the column header
-      selector: (row) => row[col], // Accessor function for the column data
-      sortable: true, // Make the column sortable
-    })),
-  [columnNames],
-);
-
 const columns = [
   { name: "ID", selector: (row) => row.id, sortable: true },
   { name: "Name", selector: (row) => row.name, sortable: true },
@@ -33,66 +22,50 @@ const customStyles = {
 
 const conditionalRowStyles = [
   {
-    when: (row) => row.id % 2 === 0,
+    when: (row) => row.tableID % 2 === 0,
     style: {
       backgroundColor: "#ffffff", // Light gray color
     },
   },
   {
-    when: (row) => row.id % 2 !== 0,
+    when: (row) => row.tableID % 2 !== 0,
     style: {
       backgroundColor: "#f2f2f2", // White color
     },
   },
 ];
 
-const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
+const MyDataTable = ({
+  columnNames = [],
+  totalItems = 0,
+  tableData = [],
+  page,
+  perPage,
+  onPageChange,
+  onPerPageChange,
+  onSelectedRowsChange = () => {},
+}) => {
   const [data, setData] = useState([]);
-  const [totalRows, setTotalRows] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(0);
-  const [perPage, setPerPage] = useState(10);
-  const [goToPage, setGoToPage] = useState("");
   const [filterText, setFilterText] = useState("");
+  const [goToPage, setGoToPage] = useState("");
+  const perPageOptions = [10, 20, 30, 40, 45];
 
   const wrappedColumns = useMemo(
     () =>
       columnNames.map((col) => ({
-        name: col.charAt(0).toUpperCase() + col.slice(1),
-        selector: (row) => row[col],
-        sortable: true,
+        name: col.charAt(0).toUpperCase() + col.slice(1), // Capitalize the column header
+        selector: (row) => row[col], // Accessor function for the column data
+        sortable: true, // Make the column sortable
       })),
     [columnNames],
   );
 
-  const fetchData = async (currentPage, perPage) => {
-    setLoading(true);
-    try {
-      const response = {
-        data: {
-          data: Array.from({ length: perPage }, (_, i) => ({
-            id: currentPage * perPage + i + 1,
-            name: `John Doe ${currentPage * perPage + i + 1}`,
-            age: Math.floor(Math.random() * 100),
-          })),
-          total: 85,
-        },
-      };
-      setData(response.data.data);
-      setTotalRows(response.data.total);
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   useEffect(() => {
-    fetchData(page, perPage);
-  }, [page, perPage]);
+    setData(tableData.map((row, index) => ({ tableID: index, ...row })));
+  }, [tableData]);
 
   const handlePageChange = ({ selected }) => {
-    setPage(selected);
+    onPageChange(selected);
   };
 
   const handleGoToPageChange = (event) => {
@@ -104,16 +77,16 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
     if (
       !isNaN(pageNumber) &&
       pageNumber >= 0 &&
-      pageNumber < Math.ceil(totalRows / perPage)
+      pageNumber < Math.ceil(totalItems / perPage)
     ) {
-      setPage(pageNumber);
+      onPageChange(pageNumber);
     }
   };
 
   const handlePerPageChange = (event) => {
     const newPerPage = Number(event.target.value);
     if (!isNaN(newPerPage) && newPerPage > 0) {
-      setPerPage(newPerPage);
+      onPerPageChange(newPerPage);
     }
   };
 
@@ -121,7 +94,7 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
     setFilterText(event.target.value);
   };
 
-  const clearFilterResult = (event) => {
+  const clearFilterResult = () => {
     setFilterText("");
   };
 
@@ -149,12 +122,12 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
       </InputGroup>
       <DataTable
         title="Server-Side Pagination"
-        columns={columns}
+        columns={wrappedColumns}
         data={filteredData}
-        progressPending={loading}
         customStyles={customStyles}
         conditionalRowStyles={conditionalRowStyles}
         selectableRows
+        onSelectedRowsChange={onSelectedRowsChange}
         selectableRowsHighlight
       />
       <Row className="mt-3 d-flex justify-content-center align-items-center">
@@ -163,7 +136,7 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
           className="d-flex justify-content-center align-items-center flex-nowrap"
         >
           <div className="me-3">
-            <span>Total Items: {totalRows}</span>
+            <span>Total Items: {totalItems}</span>
           </div>
           <InputGroup className="me-3" style={{ width: "150px" }}>
             <InputGroup.Text>Per page</InputGroup.Text>
@@ -172,11 +145,11 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
               value={perPage}
               onChange={handlePerPageChange}
             >
-              <option value={10}>10</option>
-              <option value={20}>20</option>
-              <option value={30}>30</option>
-              <option value={40}>40</option>
-              <option value={50}>50</option>
+              {perPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
             </Form.Control>
           </InputGroup>
           <ReactPaginate
@@ -185,7 +158,7 @@ const MyDataTable = ({ columnNames, tableData, onSelectedRowsChange }) => {
             breakLabel={"..."}
             breakClassName={"page-item"}
             breakLinkClassName={"page-link"}
-            pageCount={Math.ceil(totalRows / perPage)}
+            pageCount={Math.ceil(totalItems / perPage)}
             marginPagesDisplayed={2}
             pageRangeDisplayed={2}
             onPageChange={handlePageChange}

From e8c481afa36f07ef7994dc09eb1e23356807c197 Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Tue, 18 Jun 2024 17:57:25 +0000
Subject: [PATCH 5/6] table and pagination libraries

---
 frontend/package-lock.json | 126 ++++++++++++++++++++++++-------------
 frontend/package.json      |   2 +
 2 files changed, 86 insertions(+), 42 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a0dfff1d24..57ec1e3357 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,8 +20,10 @@
         "postcss-cli": "^11.0.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.1",
+        "react-data-table-component": "^7.6.2",
         "react-dom": "^18.2.0",
         "react-intl": "^6.6.2",
+        "react-paginate": "^8.2.0",
         "react-router-bootstrap": "^0.26.2",
         "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
@@ -48,6 +50,7 @@
         "css-loader": "^6.10.0",
         "date-fns": "^3.6.0",
         "html-webpack-plugin": "^5.6.0",
+        "husky": "^9.0.11",
         "react-app-rewired": "^2.2.1",
         "react-bootstrap-icons": "^1.11.3",
         "react-query": "^3.39.3",
@@ -2359,7 +2362,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
       "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
-      "dev": true,
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -2367,14 +2369,12 @@
     "node_modules/@emotion/memoize": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "dev": true
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==",
-      "dev": true
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -4828,8 +4828,7 @@
     "node_modules/@types/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==",
-      "dev": true
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
     },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
@@ -6411,7 +6410,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
       "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6983,7 +6981,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
       "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7182,7 +7179,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
       "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "dev": true,
       "dependencies": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
@@ -10053,6 +10049,21 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -15951,6 +15962,23 @@
         "react": ">=16.8.6"
       }
     },
+    "node_modules/react-data-table-component": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.6.2.tgz",
+      "integrity": "sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.3",
+        "styled-components": ">= 5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "styled-components": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -16121,6 +16149,17 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "dependencies": {
+        "prop-types": "^15"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -17114,8 +17153,7 @@
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -17666,7 +17704,6 @@
       "version": "6.1.8",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
       "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
-      "dev": true,
       "dependencies": {
         "@emotion/is-prop-valid": "1.2.1",
         "@emotion/unitless": "0.8.0",
@@ -17693,14 +17730,12 @@
     "node_modules/styled-components/node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-      "dev": true
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/styled-components/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
       "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -17727,8 +17762,7 @@
     "node_modules/styled-components/node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-      "dev": true
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/stylehacks": {
       "version": "5.1.1",
@@ -17748,8 +17782,7 @@
     "node_modules/stylis": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
-      "dev": true
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
     },
     "node_modules/sucrase": {
       "version": "3.35.0",
@@ -21394,7 +21427,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
       "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
-      "dev": true,
       "requires": {
         "@emotion/memoize": "^0.8.1"
       }
@@ -21402,14 +21434,12 @@
     "@emotion/memoize": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "dev": true
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "@emotion/unitless": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==",
-      "dev": true
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
     },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -23257,8 +23287,7 @@
     "@types/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==",
-      "dev": true
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
     },
     "@types/testing-library__jest-dom": {
       "version": "5.14.9",
@@ -24399,8 +24428,7 @@
     "camelize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "dev": true
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
     },
     "caniuse-api": {
       "version": "3.0.0",
@@ -24813,8 +24841,7 @@
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "dev": true
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
     },
     "css-declaration-sorter": {
       "version": "6.4.1",
@@ -24927,7 +24954,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
       "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "dev": true,
       "requires": {
         "camelize": "^1.0.0",
         "css-color-keywords": "^1.0.0",
@@ -27009,6 +27035,12 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
+    "husky": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -31053,6 +31085,14 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-data-table-component": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.6.2.tgz",
+      "integrity": "sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==",
+      "requires": {
+        "deepmerge": "^4.3.1"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -31180,6 +31220,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-paginate": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz",
+      "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==",
+      "requires": {
+        "prop-types": "^15"
+      }
+    },
     "react-query": {
       "version": "3.39.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
@@ -31888,8 +31936,7 @@
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "dev": true
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
     },
     "shebang-command": {
       "version": "2.0.0",
@@ -32304,7 +32351,6 @@
       "version": "6.1.8",
       "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
       "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
-      "dev": true,
       "requires": {
         "@emotion/is-prop-valid": "1.2.1",
         "@emotion/unitless": "0.8.0",
@@ -32320,14 +32366,12 @@
         "csstype": {
           "version": "3.1.2",
           "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
-          "dev": true
+          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
         },
         "postcss": {
           "version": "8.4.31",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
           "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-          "dev": true,
           "requires": {
             "nanoid": "^3.3.6",
             "picocolors": "^1.0.0",
@@ -32337,8 +32381,7 @@
         "tslib": {
           "version": "2.5.0",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-          "dev": true
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
         }
       }
     },
@@ -32354,8 +32397,7 @@
     "stylis": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
-      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
-      "dev": true
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
     },
     "sucrase": {
       "version": "3.35.0",
diff --git a/frontend/package.json b/frontend/package.json
index 8d9a6f15fe..69c77ac2d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,8 +15,10 @@
     "postcss-cli": "^11.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
+    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.2",
+    "react-paginate": "^8.2.0",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",

From 8bf63c7f54adb357b0f4220b5c0e654de612324a Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Tue, 18 Jun 2024 18:14:36 +0000
Subject: [PATCH 6/6] fix typo

---
 frontend/src/FrontDesk.jsx             | 6 +++---
 frontend/src/UnAuthenticatedSwitch.jsx | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/FrontDesk.jsx b/frontend/src/FrontDesk.jsx
index af60b64efb..55cad1a5cb 100644
--- a/frontend/src/FrontDesk.jsx
+++ b/frontend/src/FrontDesk.jsx
@@ -8,7 +8,7 @@ import getCollaborationNotifications from "./models/notifications/getCollaborati
 import NotFound from "./pages/errorPages/NotFound";
 import ServerError from "./pages/errorPages/ServerError";
 import LoadingScreen from "./components/LoadingScreen";
-import GoogleTagMnager from "./GoogleTagManager";
+import GoogleTagManager from "./GoogleTagManager";
 
 export default function FrontDesk() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -72,7 +72,7 @@ export default function FrontDesk() {
           getAllNotifications,
         }}
       >
-        <GoogleTagMnager />
+        <GoogleTagManager />
         <AuthenticatedSwitch
           showAlert={showAlert}
           setShowAlert={setShowAlert}
@@ -84,7 +84,7 @@ export default function FrontDesk() {
   if (!isLoggedIn) {
     return (
       <>
-        <GoogleTagMnager />
+        <GoogleTagManager />
         <UnauthenticatedSwitch
           showAlert={showAlert}
           setShowAlert={setShowAlert}
diff --git a/frontend/src/UnAuthenticatedSwitch.jsx b/frontend/src/UnAuthenticatedSwitch.jsx
index c7584b8928..d2081c9f2a 100644
--- a/frontend/src/UnAuthenticatedSwitch.jsx
+++ b/frontend/src/UnAuthenticatedSwitch.jsx
@@ -11,6 +11,7 @@ import Forbidden from "./pages/errorPages/Forbidden";
 import Unauthorized from "./pages/errorPages/Unauthorized";
 import ServerError from "./pages/errorPages/ServerError";
 import BadRequest from "./pages/errorPages/BadRequest";
+import About from "./About";
 
 export default function UnAuthenticatedSwitch({ showAlert, setShowAlert }) {
   console.log("UnAuthenticatedSwitch", showAlert);
@@ -36,7 +37,7 @@ export default function UnAuthenticatedSwitch({ showAlert, setShowAlert }) {
         }}
       >
         <Routes>
-          {/* <Route path="/about" element={<Login />} /> */}
+          {/* <Route path="/about" element={<About />} /> */}
           <Route path="/home" element={<Unauthorized />} />
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<Login />} />