From 52b0183c20bb85f4f58c7adb7a5b6f8d50bde08c Mon Sep 17 00:00:00 2001
From: Cheryl Chen <cherylchen@dhcp-v005-204.mobile.uci.edu>
Date: Thu, 7 Mar 2024 11:16:39 -0800
Subject: [PATCH 1/3] added pending/all accounts table with admin/student tabs
 functionality

---
 src/App.jsx                                   |  9 +++
 src/components/Accounts/Accounts.jsx          | 33 +++++++++
 src/components/Accounts/ApprovedAccounts.jsx  | 67 +++++++++++++++++
 .../Accounts/DeleteAccountModal.jsx           | 46 ++++++++++++
 src/components/Accounts/PendingAccounts.jsx   | 74 +++++++++++++++++++
 5 files changed, 229 insertions(+)
 create mode 100644 src/components/Accounts/Accounts.jsx
 create mode 100644 src/components/Accounts/ApprovedAccounts.jsx
 create mode 100644 src/components/Accounts/DeleteAccountModal.jsx
 create mode 100644 src/components/Accounts/PendingAccounts.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 7f6839b..70c1293 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,6 +16,7 @@ import Playground from './pages/Playground/Playground';
 import Planner from './pages/Planner/Planner';
 import Navbar from './components/Navbar/Navbar';
 import NotificationSandbox from './pages/NotificationSandbox/NotificationSandbox';
+import Accounts from './components/Accounts/Accounts';
 import { AuthContextProvider, useAuthContext } from './common/AuthContext';
 
 const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
@@ -93,6 +94,14 @@ const App = () => {
                   />
                 } />
             </Route>
+            <Route exact path='/accounts' element={
+                <ProtectedRoute
+                  Component={Accounts}
+                  redirectPath="/login"
+                  roles={[ADMIN_ROLE]}
+                />
+              } >  
+            </Route>
           </Routes>
         </Router>
         </AuthContextProvider>
diff --git a/src/components/Accounts/Accounts.jsx b/src/components/Accounts/Accounts.jsx
new file mode 100644
index 0000000..d682971
--- /dev/null
+++ b/src/components/Accounts/Accounts.jsx
@@ -0,0 +1,33 @@
+import PendingAccounts from "./PendingAccounts";
+import ApprovedAccounts from "./ApprovedAccounts";
+import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react'
+
+const Accounts = () => {
+    return (
+        <Box>
+            <Tabs>
+                <TabList>
+                    <Tab>Admins</Tab>
+                    <Tab>Students</Tab>
+                </TabList>
+
+                <TabPanels>
+                    <TabPanel>
+                        <Heading>Pending Accounts</Heading>
+                        <PendingAccounts accountType="admin" />
+                        <Heading>Accounts</Heading>
+                        <ApprovedAccounts accountType="admin" />
+                    </TabPanel>
+                    <TabPanel>
+                        <Heading>Pending Accounts</Heading>
+                        <PendingAccounts accountType="student" />
+                        <Heading>Accounts</Heading>
+                        <ApprovedAccounts accountType="student" />
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </Box>
+    );
+}
+
+export default Accounts;
\ No newline at end of file
diff --git a/src/components/Accounts/ApprovedAccounts.jsx b/src/components/Accounts/ApprovedAccounts.jsx
new file mode 100644
index 0000000..927c1b4
--- /dev/null
+++ b/src/components/Accounts/ApprovedAccounts.jsx
@@ -0,0 +1,67 @@
+import { NPOBackend } from '../../utils/auth_utils.js';
+import { useEffect, useState } from 'react';
+import { Box, Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button, Checkbox, useDisclosure } from '@chakra-ui/react'
+import { CloseIcon } from '@chakra-ui/icons'
+import DeleteAccountModal from './DeleteAccountModal.jsx';
+import PropTypes from 'prop-types';
+
+const ApprovedAccounts = ( {accountType} ) => {
+    const [approvedAccounts, setApprovedAccounts] = useState([]);
+    const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
+    const [deleteItemId, setDeleteItemId] = useState("");
+
+    useEffect(() => {
+        const renderTable = async () => {
+            const { data } = await NPOBackend.get('/users/approved-accounts');
+            setApprovedAccounts(data);
+        };
+        renderTable();
+    }, [approvedAccounts])
+
+    const handleDeleteClick = id => {
+        setDeleteItemId(id);
+        onDeleteOpen();
+    }
+
+    return (
+        <Box>
+            <TableContainer>
+                <Table variant='simple'>
+                    <Thead>
+                        <Tr>
+                            <Th width="5%"><Checkbox isDisabled /></Th>
+                            <Th>Name</Th>
+                            <Th>Email</Th>
+                            <Th>Deactivate</Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                    {
+                        approvedAccounts.map((account, i) => (
+                            accountType === account.type ? (
+                                <Tr key={i}>
+                                    <Td><Checkbox></Checkbox></Td>
+                                    <Td>{account.firstName} {account.lastName}</Td>
+                                    <Td>{account.email}</Td>
+                                    <Td>
+                                        <Button onClick={() => { handleDeleteClick(account.id) }} size='sm' variant='outline'><CloseIcon w={3} h={3} color='gray'/></Button>
+                                    </Td>
+                                </Tr>
+                            ) : (
+                                <></>
+                            )
+                        ))
+                    }
+                    </Tbody>
+                </Table>
+            </TableContainer>
+            <DeleteAccountModal isOpen={isDeleteOpen} onClose={onDeleteClose} deleteItemId={deleteItemId} />
+        </Box>
+    )
+}
+
+ApprovedAccounts.propTypes = {
+    accountType: PropTypes.string.isRequired,
+};
+
+export default ApprovedAccounts;
\ No newline at end of file
diff --git a/src/components/Accounts/DeleteAccountModal.jsx b/src/components/Accounts/DeleteAccountModal.jsx
new file mode 100644
index 0000000..040ef34
--- /dev/null
+++ b/src/components/Accounts/DeleteAccountModal.jsx
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
+  ModalCloseButton,
+  ModalFooter,
+} from '@chakra-ui/react';
+import { NPOBackend } from '../../utils/auth_utils.js';
+
+const DeleteAccountModal = ({ isOpen, onClose, deleteItemId}) => {
+  const handleConfirmDelete = async idToDelete => {
+    try {
+      await NPOBackend.delete(`/users/${idToDelete}`);
+      onClose();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Deactivate Account(s)?</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>Are you sure? You cannot undo this action afterwards.</ModalBody>
+        <ModalFooter gap='3'>
+        <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={() => handleConfirmDelete(deleteItemId)} colorScheme='red'>Delete</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+DeleteAccountModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  deleteItemId: PropTypes.string.isRequired,
+};
+
+export default DeleteAccountModal;
diff --git a/src/components/Accounts/PendingAccounts.jsx b/src/components/Accounts/PendingAccounts.jsx
new file mode 100644
index 0000000..bd775ae
--- /dev/null
+++ b/src/components/Accounts/PendingAccounts.jsx
@@ -0,0 +1,74 @@
+import { NPOBackend } from '../../utils/auth_utils.js';
+import { useEffect, useState } from 'react';
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button } from '@chakra-ui/react'
+import { Checkbox } from '@chakra-ui/react'
+import PropTypes from 'prop-types';
+
+const PendingAccounts = ( {accountType} ) => {
+    const [pendingAccounts, setPendingAccounts] = useState([]);
+
+    useEffect(() => {
+        const renderTable = async () => {
+            const { data } = await NPOBackend.get('/users/pending-accounts');
+            setPendingAccounts(data);
+        };
+        renderTable();
+    }, [pendingAccounts])
+
+    const handleApproveUser = async (id) => {
+        try {
+            await NPOBackend.put(`/users/approve/${id}`);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    const handleDeleteUser = async (id) => {
+        try {
+            await NPOBackend.delete(`/users/${id}`);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    return (
+        <TableContainer>
+            <Table variant='simple'>
+                <Thead>
+                    <Tr>
+                        <Th width="5%"><Checkbox isDisabled /></Th>
+                        <Th>Name</Th>
+                        <Th>Email</Th>
+                        <Th>Action</Th>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                {
+                    pendingAccounts.map((account, i) => (
+                         accountType === account.type ? (
+                                <Tr key={i}>
+                                    <Td><Checkbox></Checkbox></Td>
+                                    <Td>{account.firstName} {account.lastName}</Td>
+                                    <Td>{account.email}</Td>
+                                    <Td>
+                                        <Button onClick={() => { handleApproveUser(account.id) }} mr={3} colorScheme='blue'>Accept</Button>
+                                        <Button onClick={() => { handleDeleteUser(account.id) }}>Decline</Button>
+                                    </Td>
+                                </Tr>
+                            ) : (
+                                <></>
+                            )
+                        )
+                    )
+                }
+                </Tbody>
+            </Table>
+        </TableContainer>
+    )
+}
+
+PendingAccounts.propTypes = {
+    accountType: PropTypes.string.isRequired,
+};
+
+export default PendingAccounts;
\ No newline at end of file

From 6281b78ffc2b007d49f6c2cb8daba32d050488ec Mon Sep 17 00:00:00 2001
From: Cheryl Chen <cherylchen@dhcp-v005-204.mobile.uci.edu>
Date: Thu, 7 Mar 2024 11:21:07 -0800
Subject: [PATCH 2/3] move accounts pages to pages directory

---
 src/{components => pages}/Accounts/Accounts.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/{components => pages}/Accounts/Accounts.jsx (87%)

diff --git a/src/components/Accounts/Accounts.jsx b/src/pages/Accounts/Accounts.jsx
similarity index 87%
rename from src/components/Accounts/Accounts.jsx
rename to src/pages/Accounts/Accounts.jsx
index d682971..6b65ef8 100644
--- a/src/components/Accounts/Accounts.jsx
+++ b/src/pages/Accounts/Accounts.jsx
@@ -1,5 +1,5 @@
-import PendingAccounts from "./PendingAccounts";
-import ApprovedAccounts from "./ApprovedAccounts";
+import PendingAccounts from "../../components/Accounts/PendingAccounts";
+import ApprovedAccounts from "../../components/Accounts/ApprovedAccounts";
 import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react'
 
 const Accounts = () => {

From dcb5a70ce800807ddff245b25716c81496866329 Mon Sep 17 00:00:00 2001
From: Cheryl Chen <cherylchen@dhcp-v100-167.mobile.uci.edu>
Date: Thu, 7 Mar 2024 13:22:22 -0800
Subject: [PATCH 3/3] fixed minor import bug and added accounts page to navbar

---
 src/App.jsx                      | 17 ++++++++---------
 src/components/Navbar/Navbar.jsx |  1 +
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 70c1293..5ec7bfe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -16,7 +16,7 @@ import Playground from './pages/Playground/Playground';
 import Planner from './pages/Planner/Planner';
 import Navbar from './components/Navbar/Navbar';
 import NotificationSandbox from './pages/NotificationSandbox/NotificationSandbox';
-import Accounts from './components/Accounts/Accounts';
+import Accounts from './pages/Accounts/Accounts';
 import { AuthContextProvider, useAuthContext } from './common/AuthContext';
 
 const { ADMIN_ROLE, USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
@@ -93,14 +93,13 @@ const App = () => {
                     roles={[ADMIN_ROLE]}
                   />
                 } />
-            </Route>
-            <Route exact path='/accounts' element={
-                <ProtectedRoute
-                  Component={Accounts}
-                  redirectPath="/login"
-                  roles={[ADMIN_ROLE]}
-                />
-              } >  
+                <Route exact path='/accounts' element={
+                  <ProtectedRoute
+                    Component={Accounts}
+                    redirectPath="/login"
+                    roles={[ADMIN_ROLE]}
+                  />
+                } />  
             </Route>
           </Routes>
         </Router>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 7f8a998..3fe162f 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -51,6 +51,7 @@ const Navbar = ({ hasLoaded, isAdmin }) => {
             <Image src="../../../aiss-logo.png" marginRight={'48px'}></Image>
             {makeNavTabs('Schedule', '/publishedSchedule')}
             {makeNavTabs('Catalog', '/catalog')}
+            {makeNavTabs('Accounts', '/accounts')}
           </Flex>
         </HStack>
         <Flex alignSelf={'right'} marginLeft={'auto'}>