From 6fa856e966dc8568bb990fb0bc8c060ad3806560 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Tue, 25 Feb 2025 23:48:06 +0530
Subject: [PATCH 01/15] FEAT: adjust delete speed in RetroBoard and add tooltip
 to mood buttons in RetroMood

---
 client/src/pages/retro/RetroBoard.jsx |  2 +-
 client/src/pages/retro/RetroMood.jsx  | 28 ++++++++++++++-------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/client/src/pages/retro/RetroBoard.jsx b/client/src/pages/retro/RetroBoard.jsx
index 3ceacf5..a32dc43 100755
--- a/client/src/pages/retro/RetroBoard.jsx
+++ b/client/src/pages/retro/RetroBoard.jsx
@@ -97,7 +97,7 @@ export default function RetroBoard() {
                                 ],
                                 autoStart: true,
                                 loop: true,
-                                deleteSpeed: 50,
+                                deleteSpeed: 30,
                             }}
                         />
                     </Typography>
diff --git a/client/src/pages/retro/RetroMood.jsx b/client/src/pages/retro/RetroMood.jsx
index d5eede1..046468a 100755
--- a/client/src/pages/retro/RetroMood.jsx
+++ b/client/src/pages/retro/RetroMood.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@mui/material/Grid2';
-import { Button } from '@mui/material';
+import { Button, Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Badge, { badgeClasses } from '@mui/material/Badge';
 
@@ -42,18 +42,20 @@ export default function RetroMood({ moods, updateMood }) {
         <Grid container spacing={1}>
             {moods.map((data) => (
                 <Grid key={crypto.randomUUID()}>
-                    <Button
-                        variant={data?.emoji === curEmoji ? 'contained' : 'outlined'}
-                        onClick={() => { onMoodUpdate(data?.emoji) }}
-                        style={{ fontSize: '2rem' }}
-                    >
-                        <CartBadge
-                            color="secondary"
-                            overlap="circular"
-                            badgeContent={`${data?.users?.length ?? 0}`}
-                        />
-                        {data?.emoji}
-                    </Button>
+                    <Tooltip title={data?.users?.join(', ')}>
+                        <Button
+                            variant={data?.emoji === curEmoji ? 'contained' : 'outlined'}
+                            onClick={() => { onMoodUpdate(data?.emoji) }}
+                            style={{ fontSize: '2rem' }}
+                        >
+                            <CartBadge
+                                color="secondary"
+                                overlap="circular"
+                                badgeContent={`${data?.users?.length ?? 0}`}
+                            />
+                            {data?.emoji}
+                        </Button>
+                    </Tooltip>
                 </Grid>
             ))}
         </Grid>

From 88273bce95ac3d6778964561fd198f0298c5c750 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Fri, 28 Feb 2025 23:49:18 +0530
Subject: [PATCH 02/15] FEAT: enhance group addition functionality with email
 validation and loading state management

---
 client/src/components/group/GroupAdd.jsx | 45 +++++++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/client/src/components/group/GroupAdd.jsx b/client/src/components/group/GroupAdd.jsx
index 39486e8..a9fb7d4 100644
--- a/client/src/components/group/GroupAdd.jsx
+++ b/client/src/components/group/GroupAdd.jsx
@@ -1,9 +1,45 @@
-import PropTypes from 'prop-types';
 import {
     Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button
 } from '@mui/material';
+import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
+
+import { useAuth } from '../../hooks/useAuth';
+import { useLoading } from '../../hooks/useLoading';
+
+
+export default function GroupAdd({ openAdd, setOpenAdd }) {
+
+    const { http } = useAuth();
+    const { setLoading } = useLoading();
+
+    const handleGroupAdd = async (data) => {
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+        const members = data.members
+            .split(',')
+            .map(email => email.trim().replace(/^["']|["']$/g, ''))
+            .filter(email => emailRegex.test(email));
+
+        if (members.length === 0 || data.members.trim() === "" || members.some(email => email === "")) {
+            toast.info("Invalid email(s) entered. Please check and try again.");
+            return;
+        }
 
-export default function GroupAdd({ openAdd, setOpenAdd, handleAdd }) {
+        try {
+            setLoading(true);
+            const response = await http.post('/group/add', { name: data.name, members });
+            toast.success("Group added successfully!");
+            openAdd(false);
+            if (response.data?.memberNotFound?.length > 0)
+                toast.info(`The following members were not found: ${response.data.memberNotFound.join(', ')}`);
+        } catch (error) {
+            toast.error(error.response?.data?.message || "An error occurred. Please try again later.");
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    };
 
     return (
         <Dialog
@@ -18,7 +54,7 @@ export default function GroupAdd({ openAdd, setOpenAdd, handleAdd }) {
                         event.preventDefault();
                         const formData = new FormData(event.currentTarget);
                         const formJson = Object.fromEntries(formData.entries());
-                        handleAdd(formJson);
+                        handleGroupAdd(formJson);
                     },
                 }
             }}
@@ -59,6 +95,5 @@ export default function GroupAdd({ openAdd, setOpenAdd, handleAdd }) {
 
 GroupAdd.propTypes = {
     openAdd: PropTypes.bool.isRequired,
-    setOpenAdd: PropTypes.func.isRequired,
-    handleAdd: PropTypes.func.isRequired
+    setOpenAdd: PropTypes.func.isRequired
 };

From b027cd24d698cea7c1fc2c505f10aac5ebb9621e Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Sat, 1 Mar 2025 22:41:13 +0530
Subject: [PATCH 03/15] FEAT: remove console logs from socket event handlers in
 useRetroSocket hook

---
 client/src/hooks/useRetroSocket.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/hooks/useRetroSocket.js b/client/src/hooks/useRetroSocket.js
index 132d102..d732514 100755
--- a/client/src/hooks/useRetroSocket.js
+++ b/client/src/hooks/useRetroSocket.js
@@ -60,19 +60,16 @@ export const useRetroSocket = (retroId) => {
 
     // update mood
     const updateMood = (emoji) => {
-        console.log("UPDATING EMOJI", { emoji, email: userData?.email });
         socket?.emit("updateMood", { emoji, email: userData?.email });
     };
 
     // add review
     const addReview = (column, comment) => {
-        console.log("ADDING REVIEW", { column, comment, email: userData?.email });
         socket?.emit("addReview", { column, comment, email: userData?.email });
     };
 
     // update review
     const updateReview = (column, comment, index) => {
-        console.log("UPDATING REVIEW", { column, comment, index, email: userData?.email });
         socket?.emit("updateReview", { column, comment, index, email: userData?.email });
     };
 

From 0ad8dbbaa58a96863a1353057ccf13653abf054e Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Sun, 2 Mar 2025 01:20:06 +0530
Subject: [PATCH 04/15] FEAT: add slide transition to ToastContainer in App
 component

---
 client/src/App.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index ac6fda2..71ee91b 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, Slide } from 'react-toastify';
 
 import Router from "./Router";
 import Loading from './components/Loading';
@@ -17,7 +17,13 @@ export default function App() {
         <Loading />
         <Router />
       </LoadingProvider>
-      <ToastContainer theme="colored" draggable={false} hideProgressBar={true} position="bottom-right" />
+      <ToastContainer
+        theme="colored"
+        draggable={false}
+        transition={Slide}
+        hideProgressBar={true}
+        position="bottom-right"
+      />
     </ErrorBoundary>
   )
 }

From e5a6f6d5ca231b9a729704e11d68c0ed1de244aa Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Sun, 2 Mar 2025 01:20:30 +0530
Subject: [PATCH 05/15] FEAT: enhance PrivateRoutes component to include HTTP
 authorization check and improve loading state handling

---
 client/src/middleware/PrivateRoutes.jsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/src/middleware/PrivateRoutes.jsx b/client/src/middleware/PrivateRoutes.jsx
index dfbf605..6962e9e 100755
--- a/client/src/middleware/PrivateRoutes.jsx
+++ b/client/src/middleware/PrivateRoutes.jsx
@@ -10,14 +10,12 @@ import { useAuth } from '../hooks/useAuth';
 // PrivateRoutes component to protect routes
 export default function PrivateRoutes() {
 
-    const { isAuthLoading, isAuthenticated, logout } = useAuth();
+    const { isAuthLoading, isAuthenticated, http, logout } = useAuth();
 
     useEffect(() => {
-        if (isAuthLoading) return;
-
+        if (isAuthLoading || !http.defaults.headers.common.Authorization) return;
         if (!isAuthenticated) logout();
-
-    }, [isAuthLoading, isAuthenticated, logout]);
+    }, [isAuthLoading, isAuthenticated, http, logout]);
 
     if (!isAuthenticated) {
         return null;
@@ -32,10 +30,16 @@ export default function PrivateRoutes() {
         //     <Footer />
         // </FloatingEmojiProvider>
         <>
-            <Header />
-            <div style={{ marginTop: '9vh', height: '91vh', overflowY: 'auto' }}>
-                <Outlet />
-            </div>
+            {!isAuthLoading && isAuthenticated && http.defaults.headers.common.Authorization ? (
+                <>
+                    <Header />
+                    <div style={{ marginTop: '8vh', height: '92vh', overflowY: 'auto', paddingTop: '5px' }}>
+                        <Outlet />
+                    </div>
+                </>
+            ) :
+                null
+            }
         </>
     );
 };

From 0b47e184ea28a801b2e53b75957d4f68f280e020 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Mon, 3 Mar 2025 23:35:35 +0530
Subject: [PATCH 06/15] FEAT: add Group route to Router component for group
 management

---
 client/src/Router.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/Router.jsx b/client/src/Router.jsx
index 5ade7f9..109d6f8 100755
--- a/client/src/Router.jsx
+++ b/client/src/Router.jsx
@@ -3,12 +3,13 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 
 import Home from './pages/home/Home';
 import Login from './pages/login/Login';
+import Retro from './pages/retro/Retro';
+import Group from './pages/groups/Group';
 import RetroBoard from './pages/retro/RetroBoard';
 import ServerUnavl from './pages/503/ServerUnavl';
 import PageNotFound from './pages/404/PageNotFound';
 import { AuthProvider } from './contexts/AuthContext';
 import PrivateRoutes from './middleware/PrivateRoutes';
-import Retro from './pages/retro/Retro';
 
 
 // Router component to render the application routes
@@ -34,6 +35,7 @@ export default function Router() {
                     <Route path="/" element={<Navigate to="/login" />} />
                     <Route path="/" element={<PrivateRoutes />}>
                         <Route path='/home' element={<Home />} />
+                        <Route path='/group' element={<Group />} />
                         <Route path="/retro" element={<Retro />} />
                         <Route path='/retro/:id' element={<RetroBoard />} />
                     </Route>

From 7e9923382284e531d78a425ffe903b29a321a3a7 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Tue, 4 Mar 2025 02:23:39 +0530
Subject: [PATCH 07/15] FEAT: update Header component to include Group
 navigation and enhance logout functionality

---
 client/src/layout/Header.jsx               | 36 +++++++++++++---------
 server/src/controller/group.controller.mjs |  4 +--
 server/src/routes/group.route.mjs          |  4 +--
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/client/src/layout/Header.jsx b/client/src/layout/Header.jsx
index c7fc24a..7a05d68 100755
--- a/client/src/layout/Header.jsx
+++ b/client/src/layout/Header.jsx
@@ -9,8 +9,10 @@ import AdbIcon from '@mui/icons-material/Adb';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
 import HomeIcon from '@mui/icons-material/Home';
+import GroupIcon from '@mui/icons-material/Group';
+import LogoutIcon from '@mui/icons-material/Logout';
 import ReviewsIcon from '@mui/icons-material/Reviews';
-import DescriptionIcon from '@mui/icons-material/Description';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 import './Header.css';
 import { useAuth } from '../hooks/useAuth';
@@ -26,8 +28,7 @@ export default function Header() {
     const [popUser, setPopUser] = useState(null);
     const [openLogout, setOpenLogout] = useState(false);
 
-    const settings = ['Account', 'Logout'];
-    const isActive = (page) => location.pathname === '/' + page;
+    const isActive = (page) => location.pathname.split('/')[1] === page;
 
     const toggleDrawer = (page) => {
         setOpen(!open);
@@ -42,8 +43,7 @@ export default function Header() {
 
     const handleCloseUserMenu = (setting) => {
         setPopUser(null);
-        if (setting === 'Account') navigate('/account');
-        else if (setting === 'Logout') setOpenLogout(true);
+        if (setting === 'logout') setOpenLogout(true);
     };
 
     return (
@@ -60,11 +60,14 @@ export default function Header() {
                         <MenuItem onClick={() => navigate('/home')} className={isActive('home') ? "active-route" : "non-active-route"}>
                             <HomeIcon />&nbsp;<Typography variant="body1">Home</Typography>
                         </MenuItem>
+                        <MenuItem onClick={() => navigate('/group')} className={isActive('group') ? "active-route" : "non-active-route"}>
+                            <GroupIcon />&nbsp;<Typography variant="body1">Group</Typography>
+                        </MenuItem>
                         <MenuItem onClick={() => navigate('/retro')} className={isActive('retro') ? "active-route" : "non-active-route"}>
                             <ReviewsIcon />&nbsp;<Typography variant="body1">Retro-Board</Typography>
                         </MenuItem>
-                        <MenuItem onClick={() => navigate('/journal')} className={isActive('journal') ? "active-route" : "non-active-route"}>
-                            <DescriptionIcon />&nbsp;<Typography variant="body1">Reports</Typography>
+                        <MenuItem onClick={() => navigate('/account')} className={isActive('account') ? "active-route" : "non-active-route"}>
+                            <AccountCircleIcon />&nbsp;<Typography variant="body1">Account</Typography>
                         </MenuItem>
                     </Box>
 
@@ -84,7 +87,7 @@ export default function Header() {
                     </Typography>
 
                     <Box sx={{ flexGrow: 0 }}>
-                        <Tooltip title="Open settings">
+                        <Tooltip title="User Profile" arrow>
                             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                 <Avatar alt={userData?.name} src={userData?.image} className='profileAvt' />
                             </IconButton>
@@ -105,11 +108,11 @@ export default function Header() {
                             open={Boolean(popUser)}
                             onClose={handleCloseUserMenu}
                         >
-                            {settings.map((setting) => (
-                                <MenuItem key={setting} onClick={() => handleCloseUserMenu(setting)}>
-                                    <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
-                                </MenuItem>
-                            ))}
+                            <MenuItem onClick={() => handleCloseUserMenu("logout")}>
+                                <Typography sx={{ display: 'flex', textAlign: 'center', fontWeight: 600 }}>
+                                    Logout &nbsp; <LogoutIcon color='secondary' />
+                                </Typography>
+                            </MenuItem>
                         </Menu>
                     </Box>
 
@@ -129,11 +132,14 @@ export default function Header() {
                         <MenuItem onClick={() => toggleDrawer('home')} className={isActive('home') ? "pop-active" : "pop-non-active"}>
                             <HomeIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Home</Typography>
                         </MenuItem>
+                        <MenuItem onClick={() => toggleDrawer('group')} className={isActive('group') ? "pop-active" : "pop-non-active"}>
+                            <GroupIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Group</Typography>
+                        </MenuItem>
                         <MenuItem onClick={() => toggleDrawer('retro')} className={isActive('retro') ? "pop-active" : "pop-non-active"}>
                             <ReviewsIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Retro-Board</Typography>
                         </MenuItem>
-                        <MenuItem onClick={() => toggleDrawer('journal')} className={isActive('journal') ? "pop-active" : "pop-non-active"}>
-                            <DescriptionIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Reports</Typography>
+                        <MenuItem onClick={() => toggleDrawer('account')} className={isActive('account') ? "pop-active" : "pop-non-active"}>
+                            <AccountCircleIcon />&nbsp;<Typography variant="body1" fontWeight={800}>Account</Typography>
                         </MenuItem>
                     </Box>
                 </Collapse>
diff --git a/server/src/controller/group.controller.mjs b/server/src/controller/group.controller.mjs
index 569dbc1..5f97b12 100644
--- a/server/src/controller/group.controller.mjs
+++ b/server/src/controller/group.controller.mjs
@@ -66,7 +66,7 @@ const createGroup = async (req, res, next) => {
 
 
 // fetch my groups
-const fetchMyGroups = async (req, res, next) => {
+const fetchGroupRetros = async (req, res, next) => {
     try {
         const groups = await MemberModel.find({ user: req.currentUser })
             .populate("group")
@@ -207,4 +207,4 @@ const deleteGroup = async (req, res, next) => {
 
 
 // exporting functions
-export { createGroup, fetchMyGroups, fetchGroupMembers, addMember, deleteMember, deleteGroup };
+export { createGroup, fetchGroupRetros, fetchGroupMembers, addMember, deleteMember, deleteGroup };
diff --git a/server/src/routes/group.route.mjs b/server/src/routes/group.route.mjs
index fc7c44e..b7e68bb 100644
--- a/server/src/routes/group.route.mjs
+++ b/server/src/routes/group.route.mjs
@@ -1,5 +1,5 @@
 import express from "express";
-import { addMember, createGroup, deleteGroup, deleteMember, fetchGroupMembers, fetchMyGroups } from "../controller/group.controller.mjs";
+import { addMember, createGroup, deleteGroup, deleteMember, fetchGroupMembers, fetchGroupRetros } from "../controller/group.controller.mjs";
 
 
 const groupRoute = express.Router();
@@ -9,7 +9,7 @@ const groupRoute = express.Router();
 groupRoute.post("/add", createGroup);
 
 // fetch my groups route
-groupRoute.get("/fetch", fetchMyGroups);
+groupRoute.get("/fetch", fetchGroupRetros);
 
 // fetch group members route
 groupRoute.get("/fetch/:groupId", fetchGroupMembers);

From cb32ea1daf282a41ee6006b4972151dd21037d95 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:06:13 +0530
Subject: [PATCH 08/15] FEAT: add Group management components including
 GroupAdd dialog and Group display with member fetching

---
 client/src/components/group/GroupView.jsx     | 180 ------------------
 .../group => pages/groups}/Group.css          |  33 ++--
 client/src/pages/groups/Group.jsx             | 132 +++++++++++++
 .../group => pages/groups}/GroupAdd.jsx       |   3 +-
 client/src/pages/groups/GroupMembers.jsx      | 149 +++++++++++++++
 5 files changed, 300 insertions(+), 197 deletions(-)
 delete mode 100644 client/src/components/group/GroupView.jsx
 rename client/src/{components/group => pages/groups}/Group.css (75%)
 mode change 100644 => 100755
 create mode 100644 client/src/pages/groups/Group.jsx
 rename client/src/{components/group => pages/groups}/GroupAdd.jsx (97%)
 create mode 100644 client/src/pages/groups/GroupMembers.jsx

diff --git a/client/src/components/group/GroupView.jsx b/client/src/components/group/GroupView.jsx
deleted file mode 100644
index aa74f71..0000000
--- a/client/src/components/group/GroupView.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import {
-    Dialog, DialogTitle, DialogContent, Button, IconButton, InputAdornment,
-    TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, TextField,
-} from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-
-import "./Group.css";
-import { useAuth } from '../../hooks/useAuth';
-import { useLoading } from '../../hooks/useLoading';
-import { toast } from 'react-toastify';
-import ConfirmPop from '../ConfirmPop';
-
-
-export default function GroupView({ openData, setOpenData, isOwner }) {
-
-    const { http } = useAuth();
-    const { setLoading } = useLoading();
-    const [open, setOpen] = useState(false);
-    const [members, setMembers] = useState([]);
-    const [newMember, setNewMember] = useState('');
-    const [tempLoad, setTempLoad] = useState(false);
-
-    useEffect(() => {
-        if (!http.defaults.headers.common.Authorization) return null;
-        if (!openData?._id) return null;
-
-        fetchMembers();
-    }, [http, openData]);
-
-
-    const fetchMembers = async () => {
-        try {
-            setLoading(true);
-            const response = await http.get('/group/fetch/' + openData?._id);
-            setMembers(response?.data?.members);
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-
-    const addMember = async (email) => {
-        try {
-            setTempLoad(true);
-            const response = await http.post('/group/add-member', { email, groupId: openData?._id });
-            toast.success(response?.data?.message ?? 'Member added successfully');
-            setNewMember('');
-            fetchMembers();
-        } catch (error) {
-            console.error(error);
-            toast.error(error?.response?.data?.message ?? 'Failed to add member');
-        } finally {
-            setTempLoad(false);
-        }
-    };
-
-
-    const deleteMember = async (email) => {
-        try {
-            setLoading(true);
-            await http.delete('/group/delete-member', { data: { groupId: openData?._id, email } });
-            toast.success('Member removed successfully');
-            fetchMembers();
-        } catch (error) {
-            console.error(error);
-            toast.error(error?.response?.data?.message ?? 'Failed to remove member');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-
-    const deleteGroup = async () => {
-        try {
-            setOpen(false);
-            setLoading(true);
-            await http.delete(`/group/delete/${openData?._id}`);
-            toast.success('Group deleted successfully');
-            localStorage.removeItem('group');
-            setOpenData(null);
-        } catch (error) {
-            console.error(error);
-            toast.error(error?.response?.data?.message ?? 'Failed to delete group');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-
-    return (
-        <Dialog
-            fullWidth
-            maxWidth='md'
-            open={openData !== null}
-            onClose={() => setOpenData(null)}
-        >
-            {open && <ConfirmPop open={open} setOpen={setOpen} confirmAction={deleteGroup} />}
-            <DialogTitle className='group-view-title'>
-                <span>Group Details | {openData?.name}</span>
-                <Button variant='contained' color='secondary' onClick={() => setOpenData(null)}>Close</Button>
-            </DialogTitle>
-            <DialogContent>
-                <TableContainer component={Paper}>
-                    <Table size="small">
-                        <TableHead>
-                            <TableRow sx={{ backgroundColor: '#4caf50', color: '#fff' }}>
-                                <TableCell sx={{ width: '3%' }}>#</TableCell>
-                                <TableCell sx={{ width: '30%' }}>Member Name</TableCell>
-                                <TableCell sx={{ width: '40%' }}>Member Email</TableCell>
-                                <TableCell sx={{ width: '20%' }}>Joined On</TableCell>
-                                <TableCell sx={{ width: '20%' }}></TableCell>
-                            </TableRow>
-                        </TableHead>
-                        <TableBody>
-                            {members?.length > 0 && members.map((member, index) => (
-                                <TableRow className="table-row" key={crypto.randomUUID()}>
-                                    <TableCell>{index + 1}</TableCell>
-                                    <TableCell sx={{ color: '#1976d2', fontWeight: 'bold' }}>
-                                        {member?.name}
-                                    </TableCell>
-                                    <TableCell>{member?.email}</TableCell>
-                                    <TableCell>
-                                        {new Date(member?.createdAt).toLocaleString()}
-                                    </TableCell>
-                                    <TableCell>
-                                        <IconButton aria-label="delete" color='error' disabled={!isOwner}
-                                            onClick={() => deleteMember(member?.email)}>
-                                            <DeleteIcon />
-                                        </IconButton>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    </Table>
-                </TableContainer>
-                {isOwner && (
-                    <div className='group-view-items'>
-                        <TextField
-                            required
-                            fullWidth
-                            type="email"
-                            name="member"
-                            variant="outlined"
-                            className='group-view-textfield'
-                            label="Enter Email Address of New Member"
-                            value={newMember}
-                            onChange={(e) => setNewMember(e.target.value)}
-                            slotProps={{
-                                input: {
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <Button variant="contained" color="primary" loadingPosition="start"
-                                                loading={tempLoad} onClick={() => addMember(newMember)}>
-                                                ADD
-                                            </Button>
-                                        </InputAdornment>
-                                    ),
-                                },
-                            }}
-                        />
-                        <Button variant="contained" color="error" onClick={() => setOpen(true)}>
-                            DELETE GROUP
-                        </Button>
-                    </div>
-                )}
-            </DialogContent>
-        </Dialog>
-    )
-}
-
-GroupView.propTypes = {
-    openData: PropTypes.object.isRequired,
-    setOpenData: PropTypes.func.isRequired,
-    isOwner: PropTypes.bool.isRequired,
-};
diff --git a/client/src/components/group/Group.css b/client/src/pages/groups/Group.css
old mode 100644
new mode 100755
similarity index 75%
rename from client/src/components/group/Group.css
rename to client/src/pages/groups/Group.css
index 7dfd4ef..0fb202f
--- a/client/src/components/group/Group.css
+++ b/client/src/pages/groups/Group.css
@@ -1,17 +1,18 @@
-.group-view-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.group-view-items {
-    width: 100%;
-    margin-top: 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .group-view-textfield {
-        width: 80%;
-    }
+.group-description {
+    display: flex;
+    padding: 0 10px;
+    margin-bottom: 10px;
+    justify-content: space-between;
+}
+
+.group-view-items {
+    width: 100%;
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .group-view-textfield {
+        width: 80%;
+    }
 }
\ No newline at end of file
diff --git a/client/src/pages/groups/Group.jsx b/client/src/pages/groups/Group.jsx
new file mode 100644
index 0000000..c6bdd22
--- /dev/null
+++ b/client/src/pages/groups/Group.jsx
@@ -0,0 +1,132 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState, useCallback } from 'react';
+import Grid from '@mui/material/Grid2';
+import {
+    Typography, Container, Divider, Card, Accordion, AccordionSummary, AccordionDetails, Button
+} from '@mui/material';
+import GroupAddIcon from '@mui/icons-material/GroupAdd';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+import './Group.css';
+import GroupAdd from './GroupAdd';
+import GroupMembers from './GroupMembers';
+import { useAuth } from '../../hooks/useAuth';
+import { useLoading } from '../../hooks/useLoading';
+import { useGetRetroData } from '../../hooks/useGetRetroData';
+
+// Retro page component
+export default function Group() {
+    document.title = "Retro | Group";
+
+    const { setLoading } = useLoading();
+    const { http, userData } = useAuth();
+    const { getRetroData } = useGetRetroData();
+
+    const [groups, setGroups] = useState([]);
+    const [members, setMembers] = useState({});
+    const [openAdd, setOpenAdd] = useState(false);
+    const [expanded, setExpanded] = useState(null);
+    const [groupChanged, setGroupChanged] = useState(false);
+
+    // Fetch members when a group is expanded
+    const fetchMembers = useCallback(async (groupId) => {
+        if (!groupId) return;
+
+        setLoading(true);
+        try {
+            const response = await http.get(`/group/fetch/${groupId}`);
+            setMembers((prev) => ({ ...prev, [groupId]: response?.data?.members || [] }));
+        } catch (error) {
+            console.error("Error fetching members:", error);
+        } finally {
+            setLoading(false);
+        }
+    }, [http, setLoading, members]);
+
+
+    useEffect(() => {
+        const localData = JSON.parse(localStorage.getItem('retroData'))?.groups ?? null;
+        if (localData) {
+            setGroups(localData);
+            setExpanded(localData[0]?._id || null);
+        } else {
+            getRetroData().then((data) => {
+                if (data?.groups?.length > 0) {
+                    setGroups(data.groups);
+                    setExpanded(data.groups[0]?._id || null);
+                } else {
+                    setGroups([]);
+                }
+            });
+        }
+        if (groupChanged) setGroupChanged(false);
+    }, [openAdd, groupChanged]);
+
+    useEffect(() => {
+        if (expanded) {
+            fetchMembers(expanded);
+        }
+    }, [expanded]);
+
+    return (
+        <Container maxWidth="lg">
+            {openAdd && <GroupAdd openAdd={openAdd} setOpenAdd={setOpenAdd} />}
+            <Grid container justifyContent="space-between" alignItems="center">
+                <Typography variant="h4" gutterBottom>
+                    Your Groups 📝
+                </Typography>
+
+                <Button variant="contained" color="primary" onClick={() => setOpenAdd(true)}>
+                    <GroupAddIcon /> &nbsp; Create New
+                </Button>
+            </Grid>
+
+            <Divider />
+
+            <Card raised sx={{ mt: 2, px: 6, py: 4, backgroundColor: '#f5f5f5' }}>
+                {groups.length > 0 ? (
+                    groups.map((group) => (
+                        <Accordion
+                            sx={{ mt: 2 }}
+                            key={group._id}
+                            expanded={expanded === group._id}
+                            onChange={() => setExpanded(group._id)}
+                        >
+                            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                                <Grid container justifyContent="space-between" alignItems="center" width='100%'>
+                                    <Typography variant="h6" color="secondary">
+                                        <b>Group Name:</b> {group.name}
+                                    </Typography>
+                                    <Typography variant="h6" color="success" fontWeight={600}>
+                                        [{group?.status}]
+                                    </Typography>
+                                </Grid>
+                            </AccordionSummary>
+                            <AccordionDetails sx={{ mt: -1 }}>
+                                <div className='group-description'>
+                                    <Typography variant="body1">
+                                        <b>Owner:</b> {group?.ownerEmail}
+                                    </Typography>
+                                    <Typography variant="body2" color="textSecondary">
+                                        Created On: <b>{new Date(group?.createdAt).toLocaleString()}</b>
+                                    </Typography>
+                                </div>
+                                <GroupMembers
+                                    groupId={group._id}
+                                    setGroupChanged={setGroupChanged}
+                                    members={members[group._id] || []}
+                                    isOwner={group?.ownerEmail === userData?.email}
+                                    refreshMembers={() => fetchMembers(group._id)}
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    ))
+                ) : (
+                    <Typography variant="h5" align="center" color='warning' sx={{ mt: 1 }}>
+                        No groups available. Create a new one!
+                    </Typography>
+                )}
+            </Card>
+        </Container>
+    );
+};
diff --git a/client/src/components/group/GroupAdd.jsx b/client/src/pages/groups/GroupAdd.jsx
similarity index 97%
rename from client/src/components/group/GroupAdd.jsx
rename to client/src/pages/groups/GroupAdd.jsx
index a9fb7d4..f177b4a 100644
--- a/client/src/components/group/GroupAdd.jsx
+++ b/client/src/pages/groups/GroupAdd.jsx
@@ -29,8 +29,9 @@ export default function GroupAdd({ openAdd, setOpenAdd }) {
         try {
             setLoading(true);
             const response = await http.post('/group/add', { name: data.name, members });
+            localStorage.removeItem('retroData');
             toast.success("Group added successfully!");
-            openAdd(false);
+            setOpenAdd(false);
             if (response.data?.memberNotFound?.length > 0)
                 toast.info(`The following members were not found: ${response.data.memberNotFound.join(', ')}`);
         } catch (error) {
diff --git a/client/src/pages/groups/GroupMembers.jsx b/client/src/pages/groups/GroupMembers.jsx
new file mode 100644
index 0000000..68281fd
--- /dev/null
+++ b/client/src/pages/groups/GroupMembers.jsx
@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@mui/material/Grid2';
+import {
+    Button, IconButton, TableContainer, Paper, Table, TableHead,
+    TableRow, TableCell, TableBody, TextField, Container, InputAdornment
+} from '@mui/material';
+import { toast } from 'react-toastify';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+import { useAuth } from '../../hooks/useAuth';
+import { useLoading } from '../../hooks/useLoading';
+import ConfirmPop from '../../components/ConfirmPop';
+
+export default function GroupMembers({ groupId, setGroupChanged, members, isOwner, refreshMembers }) {
+    const { http } = useAuth();
+    const { setLoading } = useLoading();
+
+    const [open, setOpen] = useState(false);
+    const [newMember, setNewMember] = useState('');
+    const [tempLoad, setTempLoad] = useState(false);
+
+
+    const addMember = async () => {
+        if (!newMember.trim()) return toast.warn('Please enter an email');
+
+        setTempLoad(true);
+        try {
+            const response = await http.post('/group/add-member', { email: newMember, groupId });
+            toast.success(response?.data?.message ?? 'Member added successfully');
+            setNewMember('');
+            refreshMembers();
+        } catch (error) {
+            console.error("Error adding member:", error);
+            toast.error(error?.response?.data?.message ?? 'Failed to add member');
+        } finally {
+            setTempLoad(false);
+        }
+    };
+
+    const deleteMember = async (email) => {
+        setLoading(true);
+        try {
+            await http.delete('/group/delete-member', { data: { groupId, email } });
+            toast.success('Member removed successfully');
+            refreshMembers();
+        } catch (error) {
+            console.error("Error removing member:", error);
+            toast.error(error?.response?.data?.message ?? 'Failed to remove member');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const deleteGroup = async () => {
+        setLoading(true);
+        try {
+            await http.delete(`/group/delete/${groupId}`);
+            toast.success('Group deleted successfully');
+            localStorage.removeItem('retroData');
+            setGroupChanged(true);
+        } catch (error) {
+            console.error("Error deleting group:", error);
+            toast.error(error?.response?.data?.message ?? 'Failed to delete group');
+        } finally {
+            setLoading(false);
+            setOpen(false);
+        }
+    };
+
+    return (
+        <Container>
+            {open && <ConfirmPop open={open} setOpen={setOpen} confirmAction={deleteGroup} />}
+
+            <TableContainer component={Paper}>
+                <Table size="small">
+                    <TableHead>
+                        <TableRow sx={{ backgroundColor: '#4caf50', color: '#fff' }}>
+                            <TableCell>#</TableCell>
+                            <TableCell>Member Name</TableCell>
+                            <TableCell>Member Email</TableCell>
+                            <TableCell>Joined On</TableCell>
+                            {isOwner && <TableCell>Actions</TableCell>}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {members.map((member, index) => (
+                            <TableRow key={member.email}>
+                                <TableCell>{index + 1}</TableCell>
+                                <TableCell>{member.name}</TableCell>
+                                <TableCell>{member.email}</TableCell>
+                                <TableCell>{new Date(member.createdAt).toLocaleString()}</TableCell>
+                                {isOwner && (
+                                    <TableCell>
+                                        <IconButton color='error' onClick={() => deleteMember(member.email)}>
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </TableCell>
+                                )}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+
+            {isOwner && (
+                <Grid className='group-view-items'>
+                    <TextField
+                        required
+                        fullWidth
+                        type="email"
+                        name="member"
+                        variant="outlined"
+                        className='group-view-textfield'
+                        label="Enter Email Address of New Member"
+                        value={newMember}
+                        onChange={(e) => setNewMember(e.target.value)}
+                        slotProps={{
+                            input: {
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <Button variant="contained" color="primary" loadingPosition="start"
+                                            loading={tempLoad} onClick={() => addMember(newMember)}>
+                                            ADD
+                                        </Button>
+                                    </InputAdornment>
+                                ),
+                            },
+                        }}
+                    />
+                    <Button
+                        color="error"
+                        variant="contained"
+                        onClick={() => setOpen(true)}>
+                        <DeleteIcon /> &nbsp; DELETE GROUP
+                    </Button>
+                </Grid>
+            )}
+        </Container>
+    );
+}
+
+GroupMembers.propTypes = {
+    isOwner: PropTypes.bool.isRequired,
+    members: PropTypes.array.isRequired,
+    groupId: PropTypes.string.isRequired,
+    refreshMembers: PropTypes.func.isRequired,
+    setGroupChanged: PropTypes.func.isRequired
+};

From 308714e94630432b34db77a2433b48abc81530f2 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:07:19 +0530
Subject: [PATCH 09/15] FEAT: add RetroAdd component for creating new retros
 and implement useGetRetroData hook for fetching retro data

---
 client/src/hooks/useGetRetroData.js           |  23 ++
 client/src/pages/home/Home.css                |   5 +
 client/src/pages/home/Home.jsx                | 205 +++++++-----------
 .../retro => pages/home}/RetroAdd.jsx         |  32 ++-
 4 files changed, 130 insertions(+), 135 deletions(-)
 create mode 100644 client/src/hooks/useGetRetroData.js
 rename client/src/{components/retro => pages/home}/RetroAdd.jsx (71%)

diff --git a/client/src/hooks/useGetRetroData.js b/client/src/hooks/useGetRetroData.js
new file mode 100644
index 0000000..2b89cc1
--- /dev/null
+++ b/client/src/hooks/useGetRetroData.js
@@ -0,0 +1,23 @@
+import { useAuth } from "./useAuth";
+import { useLoading } from "./useLoading";
+
+export const useGetRetroData = () => {
+    const { http } = useAuth();
+    const { setLoading } = useLoading();
+
+    const getRetroData = async () => {
+        try {
+            setLoading(true);
+            const response = await http.get('/group/fetch');
+            localStorage.setItem('retroData', JSON.stringify(response?.data));
+            return response?.data;
+        } catch (error) {
+            console.error("Error fetching retro:", error);
+            return null;
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return { getRetroData };
+};
diff --git a/client/src/pages/home/Home.css b/client/src/pages/home/Home.css
index 76fdc16..6faa9ab 100644
--- a/client/src/pages/home/Home.css
+++ b/client/src/pages/home/Home.css
@@ -9,6 +9,11 @@
     padding: 10px;
 }
 
+.home-table {
+    max-height: 65vh;
+    overflow-y: auto;
+}
+
 .home-group-header {
     display: flex;
     align-items: center;
diff --git a/client/src/pages/home/Home.jsx b/client/src/pages/home/Home.jsx
index d32bf47..ba05bdc 100755
--- a/client/src/pages/home/Home.jsx
+++ b/client/src/pages/home/Home.jsx
@@ -1,21 +1,20 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Grid from '@mui/material/Grid2';
 import {
-    Button, Card, Container, Divider, Typography, Paper, Table, Tooltip,
-    TableBody, TableCell, TableContainer, TableHead, TableRow, IconButton
+    Button, Card, Container, Divider, Typography, Paper, Table, Tooltip, TableBody, TableCell,
+    TableContainer, TableHead, TableRow, IconButton, Menu, MenuItem
 } from "@mui/material";
-import DeleteIcon from '@mui/icons-material/Delete';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import './Home.css';
+import RetroAdd from './RetroAdd';
 import { useAuth } from '../../hooks/useAuth';
 import { useLoading } from '../../hooks/useLoading';
-import GroupAdd from '../../components/group/GroupAdd';
-import GroupView from '../../components/group/GroupView';
-import RetroAdd from '../../components/retro/RetroAdd';
+import { useGetRetroData } from '../../hooks/useGetRetroData';
 
 
 // Home page component
@@ -25,78 +24,55 @@ export default function Home() {
     const navigate = useNavigate();
     const { setLoading } = useLoading();
     const { http, userData } = useAuth();
-    const [grData, setGRData] = useState(null);
-    const [openRAdd, setOpenRAdd] = useState(null);
-    const [openGAdd, setOpenGAdd] = useState(false);
-    const [openGView, setOpenGView] = useState(null);
+    const { getRetroData } = useGetRetroData();
 
+    const [data, setData] = useState(null);
+    const [openAdd, setOpenAdd] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedRetro, setSelectedRetro] = useState(null);
+
+    const retroOptions = ["Open Retro", "Edit Retro", "Delete Retro"];
 
-    useEffect(() => {
-        if (!http.defaults.headers.common.Authorization) {
-            return;
-        }
 
+    useEffect(() => {
         const localData = JSON.parse(localStorage.getItem('retroData')) ?? null;
         if (localData) {
-            setGRData(localData);
+            setData(localData);
             return;
         }
-
         handleFetchData();
-    }, [http.defaults.headers.common.Authorization]);
+    }, [openAdd]);
 
 
     const handleFetchData = async () => {
-        try {
-            setLoading(true);
-            const response = await http.get('/group/fetch');
-            setGRData(response?.data);
-            localStorage.setItem('retroData', JSON.stringify(response?.data));
-        } catch (error) {
-            console.error(error);
-        } finally {
-            setLoading(false);
-        }
+        getRetroData().then((response) => {
+            setData(response);
+        });
     };
 
+    const handleMenuOpen = (event, retro) => {
+        setAnchorEl(event.currentTarget);
+        setSelectedRetro(retro);
+    };
 
-    const handleGroupAdd = async (data) => {
-        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-
-        const members = data.members
-            .split(',')
-            .map(email => email.trim().replace(/^["']|["']$/g, ''))
-            .filter(email => emailRegex.test(email));
-
-        if (members.length === 0 || data.members.trim() === "" || members.some(email => email === "")) {
-            toast.info("Invalid email(s) entered. Please check and try again.");
-            return;
-        }
-
-        try {
-            setLoading(true);
-            const response = await http.post('/group/add', { name: data.name, members });
-            setOpenGAdd(false);
-            handleFetchData();
-            toast.success("Group added successfully!");
-            if (response.data?.memberNotFound?.length > 0)
-                toast.info(`The following members were not found: ${response.data.memberNotFound.join(', ')}`);
-        } catch (error) {
-            toast.error(error.response?.data?.message || "An error occurred. Please try again later.");
-            console.error(error);
-        } finally {
-            setLoading(false);
+    const handleMenuClose = (option) => {
+        if (option === "Open Retro") {
+            navigate(`/retro/${selectedRetro?._id}`);
+        } else if (option === "Edit Retro") {
+            toast.info("Feature coming soon!");
+        } else if (option === "Delete Retro") {
+            handleDeleteRetro(selectedRetro?._id);
         }
+        setAnchorEl(null);
+        setSelectedRetro(null);
     };
 
-
-    const handleRetroAdd = async (data) => {
+    const handleDeleteRetro = async (retroId) => {
         try {
             setLoading(true);
-            const response = await http.post('/retro/add', data);
-            setOpenRAdd(null);
+            await http.delete(`/retro/delete/${retroId}`);
             handleFetchData();
-            toast.success(response?.data?.message ?? "Retro created successfully!");
+            toast.success("Retro deleted successfully!");
         } catch (error) {
             toast.error(error.response?.data?.message || "An error occurred. Please try again later.");
             console.error(error);
@@ -108,9 +84,7 @@ export default function Home() {
 
     return (
         <Container maxWidth="xl">
-            {openGAdd && <GroupAdd openAdd={openGAdd} setOpenAdd={setOpenGAdd} handleAdd={handleGroupAdd} />}
-            {openRAdd !== null && <RetroAdd openAdd={openRAdd} setOpenAdd={setOpenRAdd} handleAdd={handleRetroAdd} />}
-            {openGView !== null && <GroupView openData={openGView} setOpenData={setOpenGView} isOwner={openGView?.createdBy === userData?.id} />}
+            {openAdd !== null && <RetroAdd openAdd={openAdd} setOpenAdd={setOpenAdd} />}
             <Typography variant="h4" align="center" gutterBottom>
                 <span className="landing-wave" role="img" aria-labelledby="wave">👋</span>&nbsp;
                 Hello {userData ? userData?.name.split(" ")[0] : "Guest"},&nbsp;
@@ -138,92 +112,65 @@ export default function Home() {
                 <Grid size={{ xs: 12, md: 6 }} elevation={6}>
                     <Card variant="outlined" className='home-group'>
                         <div className='home-group-header'>
-                            <Typography variant="h6" align="center" gutterBottom>
-                                Your Groups 🌟
-                            </Typography>
-                            <Button variant="contained" color="success" onClick={() => setOpenGAdd(!openGAdd)}>
-                                + Create New
-                            </Button>
-                        </div>
-
-                        <TableContainer component={Paper}>
-                            <Table size="small">
-                                <TableHead>
-                                    <TableRow sx={{ backgroundColor: '#4caf50', color: '#fff' }}>
-                                        <TableCell sx={{ width: '5%' }}>#</TableCell>
-                                        <TableCell sx={{ width: '33%' }}>Group Name</TableCell>
-                                        <TableCell sx={{ width: '40%' }}>Owner</TableCell>
-                                        <TableCell sx={{ width: '20%' }}>Created On</TableCell>
-                                    </TableRow>
-                                </TableHead>
-                                <TableBody>
-                                    {grData?.groups?.length > 0 && grData?.groups?.map((group, index) => (
-                                        <TableRow className="table-row" key={crypto.randomUUID()} onClick={() => setOpenGView(group)}>
-                                            <TableCell>{index + 1}</TableCell>
-                                            <TableCell sx={{ color: '#1976d2', fontWeight: 'bold' }}>
-                                                {group?.name}
-                                            </TableCell>
-                                            <TableCell>{group?.ownerEmail}</TableCell>
-                                            <TableCell>
-                                                {new Date(group?.createdAt).toLocaleString()}
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-                        </TableContainer>
-                    </Card>
-
-
-                    <Card variant="outlined" className='home-group'>
-                        <div className='home-group-header'>
-                            <Typography variant="h6" align="center" gutterBottom>
+                            <Typography variant="h6" align="center">
                                 Your Retros 📝
                             </Typography>
-                            <Button variant="contained" color="secondary" onClick={() => setOpenRAdd(grData?.groups)}>
+                            <Button variant="contained" color="secondary" onClick={() => setOpenAdd(data?.groups)}>
                                 + Create New
                             </Button>
                         </div>
 
-                        <TableContainer component={Paper}>
+                        <TableContainer component={Paper} className='home-table'>
                             <Table size="small">
                                 <TableHead>
                                     <TableRow sx={{ backgroundColor: '#aa51b9', color: '#fff' }}>
-                                        <TableCell sx={{ width: '3%' }}>#</TableCell>
+                                        <TableCell sx={{ width: '5%' }}>#</TableCell>
                                         <TableCell sx={{ width: '25%' }}>Retro Name</TableCell>
-                                        <TableCell sx={{ width: '25%' }}>Group</TableCell>
-                                        <TableCell sx={{ width: '15%' }}>Status</TableCell>
+                                        <TableCell sx={{ width: '20%' }}>Group</TableCell>
+                                        <TableCell sx={{ width: '10%' }}>Status</TableCell>
                                         <TableCell sx={{ width: '20%' }}>Created On</TableCell>
-                                        <TableCell sx={{ width: '10%' }}>Action</TableCell>
+                                        <TableCell sx={{ width: '10%' }}></TableCell>
                                     </TableRow>
                                 </TableHead>
                                 <TableBody>
-                                    {grData?.retros?.length > 0 && grData?.retros?.map((retro, index) => (
-                                        <TableRow className="table-row" key={crypto.randomUUID()}>
-                                            <TableCell>{index + 1}</TableCell>
-                                            <TableCell sx={{ color: '#1976d2', fontWeight: 'bold' }}
-                                                onClick={() => navigate(`/retro/${retro?._id}`)}>
-                                                {retro?.name}
-                                            </TableCell>
-                                            <TableCell>
-                                                {grData?.groups?.find(group => group._id === retro?.group)?.name}
-                                            </TableCell>
-                                            <TableCell>{retro?.status}</TableCell>
-                                            <TableCell>
-                                                {new Date(retro?.createdAt).toLocaleString()}
-                                            </TableCell>
-                                            <TableCell>
-                                                <IconButton aria-label="delete" color='error' disabled={true}>
-                                                    <Tooltip arrow title="Delete this retro">
-                                                        <DeleteIcon />
+                                    {data?.retros?.slice()
+                                        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+                                        .map((retro, index) => (
+                                            <TableRow key={retro._id} className='table-row'>
+                                                <TableCell>{index + 1}</TableCell>
+                                                <TableCell sx={{ color: '#1976d2', fontWeight: 'bold' }}
+                                                    onClick={() => navigate(`/retro/${retro?._id}`)}>
+                                                    {retro?.name}
+                                                </TableCell>
+                                                <TableCell>
+                                                    {data?.groups?.find(group => group._id === retro?.group)?.name}
+                                                </TableCell>
+                                                <TableCell>
+                                                    <Typography variant="body2" color={retro?.status === "active" ? "success" : "error"}>
+                                                        {retro?.status}
+                                                    </Typography>
+                                                </TableCell>
+                                                <TableCell>{new Date(retro?.createdAt).toLocaleString()}</TableCell>
+                                                <TableCell>
+                                                    <Tooltip title="Options">
+                                                        <IconButton onClick={(e) => handleMenuOpen(e, retro)}>
+                                                            <MoreVertIcon color="secondary" />
+                                                        </IconButton>
                                                     </Tooltip>
-                                                </IconButton>
-                                            </TableCell>
-                                        </TableRow>
-                                    ))}
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
                                 </TableBody>
                             </Table>
                         </TableContainer>
+
+                        <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
+                            {retroOptions.map(option => (
+                                <MenuItem key={option} onClick={() => handleMenuClose(option)}>
+                                    {option}
+                                </MenuItem>
+                            ))}
+                        </Menu>
                     </Card>
                 </Grid>
             </Grid>
diff --git a/client/src/components/retro/RetroAdd.jsx b/client/src/pages/home/RetroAdd.jsx
similarity index 71%
rename from client/src/components/retro/RetroAdd.jsx
rename to client/src/pages/home/RetroAdd.jsx
index ce7cea2..04860ff 100644
--- a/client/src/components/retro/RetroAdd.jsx
+++ b/client/src/pages/home/RetroAdd.jsx
@@ -1,14 +1,36 @@
+import { useState } from 'react';
 import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
 import {
     Dialog, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Button,
     FormControl, InputLabel, Select, MenuItem
 } from '@mui/material';
-import { useState } from 'react';
 
-export default function RetroAdd({ openAdd, setOpenAdd, handleAdd }) {
+import { useAuth } from '../../hooks/useAuth';
+import { useLoading } from '../../hooks/useLoading';
+
 
+export default function RetroAdd({ openAdd, setOpenAdd }) {
+
+    const { http } = useAuth();
+    const { setLoading } = useLoading();
     const [group, setGroup] = useState('');
 
+    const handleRetroAdd = async (data) => {
+        try {
+            setLoading(true);
+            const response = await http.post('/retro/add', data);
+            localStorage.removeItem('retroData');
+            setOpenAdd(null);
+            toast.success(response?.data?.message ?? "Retro created successfully!");
+        } catch (error) {
+            toast.error(error.response?.data?.message || "An error occurred. Please try again later.");
+            console.error(error);
+        } finally {
+            setLoading(false);
+        }
+    }
+
     return (
         <Dialog
             fullWidth
@@ -23,7 +45,7 @@ export default function RetroAdd({ openAdd, setOpenAdd, handleAdd }) {
                         const formData = new FormData(event.currentTarget);
                         const formJson = Object.fromEntries(formData.entries());
                         formJson.groupId = group;
-                        handleAdd(formJson);
+                        handleRetroAdd(formJson);
                     },
                 }
             }}
@@ -49,7 +71,6 @@ export default function RetroAdd({ openAdd, setOpenAdd, handleAdd }) {
                 </FormControl>
                 <TextField
                     required
-                    autoFocus
                     fullWidth
                     name="name"
                     variant="outlined"
@@ -66,6 +87,5 @@ export default function RetroAdd({ openAdd, setOpenAdd, handleAdd }) {
 
 RetroAdd.propTypes = {
     openAdd: PropTypes.array.isRequired,
-    setOpenAdd: PropTypes.func.isRequired,
-    handleAdd: PropTypes.func.isRequired
+    setOpenAdd: PropTypes.func.isRequired
 };

From c628d073794e1c6a100a857c5ad315ebfb1a766b Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:07:44 +0530
Subject: [PATCH 10/15] FEAT: enhance Retro components to support completion
 state and improve user interaction

---
 client/src/pages/retro/Retro.jsx       | 94 +++++++++++++-------------
 client/src/pages/retro/RetroBoard.jsx  | 55 ++++++++++++---
 client/src/pages/retro/RetroMood.jsx   |  9 ++-
 client/src/pages/retro/RetroReview.jsx | 16 ++++-
 4 files changed, 110 insertions(+), 64 deletions(-)

diff --git a/client/src/pages/retro/Retro.jsx b/client/src/pages/retro/Retro.jsx
index 8a5ab5e..97823a1 100644
--- a/client/src/pages/retro/Retro.jsx
+++ b/client/src/pages/retro/Retro.jsx
@@ -1,70 +1,70 @@
 import { useEffect } from 'react';
-import Grid from '@mui/material/Grid2';
 import {
-    Typography, Container, Divider, Card, Accordion, AccordionSummary,
-    AccordionDetails, Button
+    Typography, Container, Divider, Card, Accordion, AccordionSummary, AccordionDetails, Button
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useNavigate } from 'react-router-dom';
 
 import './Retro.css';
 
-
 // Retro page component
 export default function Retro() {
-
     document.title = "Retro | Boards";
+
     const navigate = useNavigate();
-    const locaData = JSON.parse(localStorage.getItem('retroData')) ?? null;
+    const locaData = JSON.parse(localStorage.getItem('retroData') || '{}');
 
     useEffect(() => {
-
-        if (!locaData) return;
-
+        if (!locaData?.retros?.length) return;
     }, [locaData]);
 
-
     return (
-        <Container maxWidth="md">
-            <Grid container >
-                <Typography variant="h4" gutterBottom>
-                    Active Retro-Boards | List
-                </Typography>
-            </Grid>
-
+        <Container maxWidth="lg">
+            <Typography variant="h4" align="center" gutterBottom>
+                Looking for a retro board? 🤔
+            </Typography>
 
             <Divider />
 
-            <Card raised elevation={1} sx={{ mt: 1, p: 1, backgroundColor: 'lightgray' }}>
-                <Typography variant="h5" gutterBottom>
-                    Current ongoing sprints are listed below
-                </Typography>
-                {locaData?.retros?.length > 0 && locaData?.retros?.map((retro) => (
-                    <Accordion expanded key={crypto.randomUUID()}>
-                        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                                <Typography variant='h6' color='secondary'>
-                                    Retro Name: {retro.name}
-                                </Typography>
-                                <Typography variant='h6' color='success' fontWeight={600}>[{retro?.status}]</Typography>
-                            </div>
-                        </AccordionSummary>
-                        <AccordionDetails sx={{ mt: -2 }}>
-                            <Typography variant='substitle-1' color='text.secondary'>
-                                <p>Belongs to Group - &nbsp;
-                                    {locaData?.groups?.find(group => group._id === retro?.group)?.name}
-                                </p>
-                                <p style={{ fontSize: '16px', marginTop: '5px' }}>
-                                    Created On - {new Date(retro?.createdAt).toLocaleString()}
-                                </p>
-                            </Typography>
-                            <Button fullWidth variant="outlined" color="primary" sx={{ mt: 1 }}
-                                onClick={() => navigate(`/retro/${retro._id}`)}>
-                                Open {retro.name}
-                            </Button>
-                        </AccordionDetails>
-                    </Accordion>
-                ))}
+            <Card raised sx={{ mt: 2, px: 6, py: 4, backgroundColor: '#f5f5f5' }}>
+                {locaData?.retros?.length > 0 ? (
+                    locaData?.retros?.slice()
+                        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+                        .map((retro) => (
+                            retro.status !== 'completed' && (
+                                <Accordion expanded key={retro._id} sx={{ mt: 2 }}>
+                                    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '95%' }}>
+                                            <Typography variant="h6" color="secondary">
+                                                <b>Retro Name:</b> {retro.name}
+                                            </Typography>
+                                            <Typography variant="h6" color="success" fontWeight={600}>
+                                                [{retro?.status}]
+                                            </Typography>
+                                        </div>
+                                    </AccordionSummary>
+                                    <AccordionDetails sx={{ mt: -2 }}>
+                                        <Typography variant="body1" color="text.secondary">
+                                            <span>Belongs to Group - &nbsp;
+                                                <b>{locaData?.groups?.find(group => group._id === retro?.group)?.name || 'Unknown'}</b>
+                                            </span><br />
+                                            <span style={{ fontSize: '16px', marginTop: '5px' }}>
+                                                Created On - <b>{new Date(retro?.createdAt).toLocaleString()}</b>
+                                            </span>
+                                        </Typography>
+                                        <Button fullWidth variant="outlined" color="primary" sx={{ mt: 1 }}
+                                            onClick={() => navigate(`/retro/${retro._id}`)}>
+                                            Open {retro.name}
+                                        </Button>
+                                    </AccordionDetails>
+                                </Accordion>
+                            )
+                        ))
+                ) : (
+                    <Typography variant="h5" align="center" color='warning' sx={{ mt: 1 }}>
+                        No Retro-Board available, please create a new one.
+                    </Typography>
+                )}
             </Card>
         </Container>
     );
diff --git a/client/src/pages/retro/RetroBoard.jsx b/client/src/pages/retro/RetroBoard.jsx
index a32dc43..4f7be79 100755
--- a/client/src/pages/retro/RetroBoard.jsx
+++ b/client/src/pages/retro/RetroBoard.jsx
@@ -1,10 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Grid from '@mui/material/Grid2';
+import { toast } from 'react-toastify';
 import Typewriter from "typewriter-effect";
-import { Typography, Container, Divider, Card, Button } from '@mui/material';
-import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+import { Typography, Container, Divider, Card, Button } from '@mui/material';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
 
 import './Retro.css';
 import RetroMood from './RetroMood';
@@ -19,8 +20,9 @@ export default function RetroBoard() {
 
     const navigate = useNavigate();
     const { setLoading } = useLoading();
-    const [rData, setRData] = useState(null);
     const { userData, http } = useAuth();
+    const [rData, setRData] = useState(null);
+    const [isCompleted, setIsCompleted] = useState(false);
 
     document.title = `Retro | ${rData?.retro?.name}`;
     const retroId = window.location.pathname.split('/').pop() ?? null;
@@ -35,6 +37,11 @@ export default function RetroBoard() {
                 setLoading(true);
                 const response = await http.get(`/retro/${retroId}`);
                 setRData(response?.data);
+                if (response?.data?.retro?.status === 'completed') {
+                    setIsCompleted(true);
+                    localStorage.removeItem('retroData');
+                    toast.info('Retro has been completed, you can view the data but cannot edit.');
+                }
             } catch (error) {
                 console.error(error);
                 if (error?.response?.data?.message === 'Invalid Path') {
@@ -48,6 +55,7 @@ export default function RetroBoard() {
             }
         };
         fetchIntialData();
+
     }, [http.defaults.headers.common.Authorization, retroId]);
 
 
@@ -59,6 +67,7 @@ export default function RetroBoard() {
             setLoading(true);
             await http.patch(`/retro/status/${retroId}`);
             toast.success('Retro completed successfully');
+            localStorage.removeItem('retroData');
             setTimeout(() => {
                 navigate('/home', { replace: true });
             }, 100);
@@ -71,6 +80,11 @@ export default function RetroBoard() {
     };
 
 
+    const exportRetroData = () => {
+        toast.info("Feature coming soon!");
+    }
+
+
     return (
         <Container maxWidth="xl">
             <Grid container className="retro-header" spacing={0}>
@@ -111,17 +125,24 @@ export default function RetroBoard() {
                         justifyContent: { xs: "center", md: "flex-end" },
                     }}
                 >
-                    <RetroMood moods={retroData?.moods ?? []} updateMood={updateMood} />
+                    <RetroMood
+                        moods={retroData?.moods ?? []}
+                        isCompleted={isCompleted}
+                        updateMood={updateMood}
+                    />
                 </Grid>
             </Grid>
 
-
             <Divider />
 
-            <Card raised elevation={1} sx={{ mt: 1, p: 1 }}>
+            <Card raised elevation={3} sx={{ mt: 1, p: 1 }}>
+                {isCompleted && <Typography align='center' variant='h6' color='success' sx={{ mb: 1 }}>
+                    {rData?.retro?.name} Retrospective has been completed.
+                </Typography>}
                 <Grid container spacing={1}>
                     <RetroReview
                         title="Start Doing"
+                        isCompleted={isCompleted}
                         data={retroData?.reviews?.startDoing || []}
                         addReview={(text) => addReview('startDoing', text)}
                         updateReview={(text, index) => updateReview('startDoing', text, index)}
@@ -129,6 +150,7 @@ export default function RetroBoard() {
 
                     <RetroReview
                         title="Stop Doing"
+                        isCompleted={isCompleted}
                         data={retroData?.reviews?.stopDoing || []}
                         addReview={(text) => addReview('stopDoing', text)}
                         updateReview={(text, index) => updateReview('stopDoing', text, index)}
@@ -136,6 +158,7 @@ export default function RetroBoard() {
 
                     <RetroReview
                         title="Continue Doing"
+                        isCompleted={isCompleted}
                         data={retroData?.reviews?.continueDoing || []}
                         addReview={(text) => addReview('continueDoing', text)}
                         updateReview={(text, index) => updateReview('continueDoing', text, index)}
@@ -143,15 +166,25 @@ export default function RetroBoard() {
 
                     <RetroReview
                         title="Appreciation"
+                        isCompleted={isCompleted}
                         data={retroData?.reviews?.appreciation || []}
                         addReview={(text) => addReview('appreciation', text)}
                         updateReview={(text, index) => updateReview('appreciation', text, index)}
                     />
                 </Grid>
-                <Button fullWidth variant='contained' color='secondary' sx={{ mt: 2 }}
-                    onClick={() => completeRetro()}>
-                    Complete Retro {rData?.retro?.name}
-                </Button>
+
+                {!isCompleted &&
+                    <Button fullWidth variant='contained' color='success' sx={{ mt: 2, mb: 1 }}
+                        onClick={() => completeRetro()}>
+                        Complete Retro {rData?.retro?.name}
+                    </Button>
+                }
+                {isCompleted &&
+                    <Button fullWidth variant='contained' color='warning' sx={{ mt: 2, mb: 1 }}
+                        onClick={exportRetroData}>
+                        Download Retro Report <CloudDownloadIcon sx={{ ml: 2 }} />
+                    </Button>
+                }
             </Card>
         </Container>
     );
diff --git a/client/src/pages/retro/RetroMood.jsx b/client/src/pages/retro/RetroMood.jsx
index 046468a..161fcad 100755
--- a/client/src/pages/retro/RetroMood.jsx
+++ b/client/src/pages/retro/RetroMood.jsx
@@ -17,12 +17,13 @@ const CartBadge = styled(Badge)`
 
 
 // RetroMood component
-export default function RetroMood({ moods, updateMood }) {
+export default function RetroMood({ moods, isCompleted, updateMood }) {
 
     const { userData } = useAuth();
     const [curEmoji, setCurEmoji] = useState(null);
 
     const onMoodUpdate = (emoji) => {
+        if (isCompleted) return;
         setCurEmoji(emoji);
         updateMood(emoji);
     };
@@ -41,12 +42,13 @@ export default function RetroMood({ moods, updateMood }) {
     return (
         <Grid container spacing={1}>
             {moods.map((data) => (
-                <Grid key={crypto.randomUUID()}>
-                    <Tooltip title={data?.users?.join(', ')}>
+                <Grid key={data?.emoji}>
+                    <Tooltip arrow title={data?.users?.join(', ')}>
                         <Button
                             variant={data?.emoji === curEmoji ? 'contained' : 'outlined'}
                             onClick={() => { onMoodUpdate(data?.emoji) }}
                             style={{ fontSize: '2rem' }}
+                            disabled={isCompleted}
                         >
                             <CartBadge
                                 color="secondary"
@@ -64,5 +66,6 @@ export default function RetroMood({ moods, updateMood }) {
 
 RetroMood.propTypes = {
     moods: PropTypes.array.isRequired,
+    isCompleted: PropTypes.bool.isRequired,
     updateMood: PropTypes.func.isRequired,
 };
diff --git a/client/src/pages/retro/RetroReview.jsx b/client/src/pages/retro/RetroReview.jsx
index 3a379ae..ee1bc6c 100755
--- a/client/src/pages/retro/RetroReview.jsx
+++ b/client/src/pages/retro/RetroReview.jsx
@@ -6,15 +6,19 @@ import {
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import CheckIcon from '@mui/icons-material/Check';
+import { useAuth } from '../../hooks/useAuth';
+import { toast } from 'react-toastify';
 
 
-export default function RetroColumn({ title, data, addReview, updateReview }) {
+export default function RetroColumn({ title, isCompleted, data, addReview, updateReview }) {
 
+    const { userData } = useAuth();
     const [isAddNew, setIsAddNew] = useState(false);
     const [editedValue, setEditedValue] = useState('');
     const [editingIndex, setEditingIndex] = useState(null);
 
     const handleEdit = (index, item) => {
+        if (isCompleted) return;
         setEditedValue(item.comment);
         setEditingIndex(index);
         setIsAddNew(false);
@@ -27,6 +31,7 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
     };
 
     const handleSave = () => {
+        if (isCompleted) return;
         addReview(editedValue);
         setEditingIndex(null);
         setEditedValue('');
@@ -34,6 +39,9 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
     };
 
     const handleUpdate = (item, index) => {
+        if (isCompleted) return;
+        if (item.email !== userData?.email)
+            toast.error('You can only edit your own comments.');
         updateReview(editedValue, index);
         setEditingIndex(null);
         setEditedValue('');
@@ -48,7 +56,7 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
                 </div>
 
                 {data.map((item, index) => (
-                    <CardContent className='retro-comment-cardcontent' key={crypto.randomUUID()}>
+                    <CardContent className='retro-comment-cardcontent' key={item?._id}>
                         {editingIndex === index ? (
                             <div style={{ position: 'relative' }}>
                                 <TextField
@@ -83,7 +91,7 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
                 ))}
 
                 <CardContent className='retro-comment-cardcontent'>
-                    {isAddNew ? (
+                    {isAddNew && !isCompleted ? (
                         <div style={{ position: 'relative' }}>
                             <TextField
                                 rows={4}
@@ -105,6 +113,7 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
                         </div>
                     ) : (
                         <Button fullWidth variant="outlined" size='small'
+                            disabled={isCompleted}
                             onClick={() => {
                                 setIsAddNew(true);
                                 setEditedValue('');
@@ -121,6 +130,7 @@ export default function RetroColumn({ title, data, addReview, updateReview }) {
 
 RetroColumn.propTypes = {
     title: PropTypes.string.isRequired,
+    isCompleted: PropTypes.bool.isRequired,
     data: PropTypes.array.isRequired,
     addReview: PropTypes.func.isRequired,
     updateReview: PropTypes.func.isRequired

From ad3104a6292656753d3f7098ea62c8375ea1a6fd Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:09:03 +0530
Subject: [PATCH 11/15] FEAT: enhance group and retro deletion logic to remove
 associated retros and boards

---
 server/src/controller/group.controller.mjs | 7 +++++++
 server/src/controller/retro.controller.mjs | 7 ++++---
 server/src/models/board.model.mjs          | 5 -----
 server/src/routes/retro.route.mjs          | 1 +
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/server/src/controller/group.controller.mjs b/server/src/controller/group.controller.mjs
index 5f97b12..0532ffc 100644
--- a/server/src/controller/group.controller.mjs
+++ b/server/src/controller/group.controller.mjs
@@ -2,6 +2,7 @@ import UserModel from "../models/user.model.mjs";
 import GroupModel from "../models/group.model.mjs";
 import RetroModel from "../models/retro.model.mjs";
 import MemberModel from "../models/member.model.mjs";
+import RetroBoardModel from "../models/board.model.mjs";
 import { validateFields } from "../utils/validate.mjs";
 
 
@@ -196,7 +197,13 @@ const deleteGroup = async (req, res, next) => {
             return res.status(401).json({ message: "You are not authorized to delete this group" });
         }
 
+        const retros = await RetroModel.find({ group: groupId });
+        for (const retro of retros) {
+            await RetroBoardModel.deleteOne({ retroId: retro._id });
+        }
+
         await MemberModel.deleteMany({ group: groupId });
+        await RetroModel.deleteMany({ group: groupId });
         await GroupModel.deleteOne({ _id: groupId });
 
         return res.status(204).send();
diff --git a/server/src/controller/retro.controller.mjs b/server/src/controller/retro.controller.mjs
index 521546b..d7dfc38 100644
--- a/server/src/controller/retro.controller.mjs
+++ b/server/src/controller/retro.controller.mjs
@@ -1,6 +1,7 @@
 import GroupModel from "../models/group.model.mjs";
 import RetroModel from "../models/retro.model.mjs";
 import MemberModel from "../models/member.model.mjs";
+import RetroBoardModel from "../models/board.model.mjs";
 import { validateFields, santizeId } from "../utils/validate.mjs";
 
 
@@ -70,15 +71,15 @@ const deleteRetro = async (req, res, next) => {
         if (!fieldValidation.isValid)
             return res.status(400).json({ message: fieldValidation.message });
 
-
         const retro = await RetroModel.findById(retroId);
         if (!retro)
             return res.status(404).json({ message: "Retro not found" });
 
         const group = await GroupModel.findById(retro.group);
-        if (group.createdBy.toString() !== req.currentUser)
-            return res.status(401).json({ message: "You are not authorized to delete this retro" });
+        if (group.createdBy.toString() !== req.currentUser.toString())
+            return res.status(403).json({ message: "You are not authorized to delete this retro" });
 
+        await RetroBoardModel.deleteMany({ retroId: retroId });
         await RetroModel.findByIdAndDelete(retroId);
         return res.status(204).send();
     } catch (error) {
diff --git a/server/src/models/board.model.mjs b/server/src/models/board.model.mjs
index afbc069..eadfc81 100644
--- a/server/src/models/board.model.mjs
+++ b/server/src/models/board.model.mjs
@@ -8,11 +8,6 @@ const ReviewSchema = new mongoose.Schema({
 
 
 const RetroBoardModel = new mongoose.Schema({
-    // retroId: {
-    //     type: mongo.Schema.Types.ObjectId,
-    //     ref: 'RetroModel',
-    //     required: true
-    // },
     retroId: {
         type: String,
         required: true,
diff --git a/server/src/routes/retro.route.mjs b/server/src/routes/retro.route.mjs
index eff2f1b..a635d52 100644
--- a/server/src/routes/retro.route.mjs
+++ b/server/src/routes/retro.route.mjs
@@ -17,5 +17,6 @@ retroRoute.delete("/delete/:retroId", deleteRetro);
 // mark as completed route
 retroRoute.patch("/status/:retroId", completeRetro);
 
+
 // exporting the retroRoute
 export default retroRoute;

From 19476a65153be7cfa4ec9e1f9bbadd7a224901d1 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:09:22 +0530
Subject: [PATCH 12/15] FEAT: prevent authenticated users from accessing the
 login page and remove console logs from review and mood update functions

---
 client/src/pages/login/Login.jsx      | 1 +
 server/src/websocket/addReview.mjs    | 1 -
 server/src/websocket/updateMood.mjs   | 1 -
 server/src/websocket/updateReview.mjs | 1 -
 4 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/pages/login/Login.jsx b/client/src/pages/login/Login.jsx
index 698a7e8..883e63c 100755
--- a/client/src/pages/login/Login.jsx
+++ b/client/src/pages/login/Login.jsx
@@ -85,6 +85,7 @@ export default function Login() {
         flow: "auth-code",
     });
 
+    if (isAuthenticated) return null;
 
     return (
         <div className="login-container">
diff --git a/server/src/websocket/addReview.mjs b/server/src/websocket/addReview.mjs
index 240fcec..1aae339 100644
--- a/server/src/websocket/addReview.mjs
+++ b/server/src/websocket/addReview.mjs
@@ -17,6 +17,5 @@ export async function addReview(retroId, data) {
     }
 
     const retroData = await RetroBoardModel.findOne({ retroId });
-    console.log("Add Review:", retroData.reviews);
     return retroData.reviews;
 }
diff --git a/server/src/websocket/updateMood.mjs b/server/src/websocket/updateMood.mjs
index d300560..68e4782 100644
--- a/server/src/websocket/updateMood.mjs
+++ b/server/src/websocket/updateMood.mjs
@@ -44,6 +44,5 @@ export async function updateMood(retroId, data) {
     );
 
     const retroData = await RetroBoardModel.findOne({ retroId });
-    console.log("Updated Emoji:", retroData.moods);
     return retroData.moods;
 }
diff --git a/server/src/websocket/updateReview.mjs b/server/src/websocket/updateReview.mjs
index 7b9109c..1020d16 100644
--- a/server/src/websocket/updateReview.mjs
+++ b/server/src/websocket/updateReview.mjs
@@ -24,6 +24,5 @@ export async function updateReview(retroId, data) {
     }
 
     const postData = await RetroBoardModel.findOne({ retroId });
-    console.log("Updated Review:", postData.reviews);
     return postData.reviews;
 }

From 983711b6c8e32c9d33975c92aece61d4e3a48838 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:27:26 +0530
Subject: [PATCH 13/15] [SONAR]: Sonar Issue's has been fixed.

---
 client/src/middleware/PrivateRoutes.jsx  | 2 +-
 client/src/pages/groups/GroupMembers.jsx | 2 +-
 client/src/pages/retro/Retro.jsx         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/middleware/PrivateRoutes.jsx b/client/src/middleware/PrivateRoutes.jsx
index 6962e9e..bd206be 100755
--- a/client/src/middleware/PrivateRoutes.jsx
+++ b/client/src/middleware/PrivateRoutes.jsx
@@ -13,8 +13,8 @@ export default function PrivateRoutes() {
     const { isAuthLoading, isAuthenticated, http, logout } = useAuth();
 
     useEffect(() => {
-        if (isAuthLoading || !http.defaults.headers.common.Authorization) return;
         if (!isAuthenticated) logout();
+        if (isAuthLoading || !http.defaults.headers.common.Authorization) return;
     }, [isAuthLoading, isAuthenticated, http, logout]);
 
     if (!isAuthenticated) {
diff --git a/client/src/pages/groups/GroupMembers.jsx b/client/src/pages/groups/GroupMembers.jsx
index 68281fd..1e0e04c 100644
--- a/client/src/pages/groups/GroupMembers.jsx
+++ b/client/src/pages/groups/GroupMembers.jsx
@@ -120,7 +120,7 @@ export default function GroupMembers({ groupId, setGroupChanged, members, isOwne
                                 endAdornment: (
                                     <InputAdornment position="end">
                                         <Button variant="contained" color="primary" loadingPosition="start"
-                                            loading={tempLoad} onClick={() => addMember(newMember)}>
+                                            loading={tempLoad} onClick={() => addMember()}>
                                             ADD
                                         </Button>
                                     </InputAdornment>
diff --git a/client/src/pages/retro/Retro.jsx b/client/src/pages/retro/Retro.jsx
index 97823a1..6897157 100644
--- a/client/src/pages/retro/Retro.jsx
+++ b/client/src/pages/retro/Retro.jsx
@@ -45,8 +45,8 @@ export default function Retro() {
                                     </AccordionSummary>
                                     <AccordionDetails sx={{ mt: -2 }}>
                                         <Typography variant="body1" color="text.secondary">
-                                            <span>Belongs to Group - &nbsp;
-                                                <b>{locaData?.groups?.find(group => group._id === retro?.group)?.name || 'Unknown'}</b>
+                                            <span>Belongs to Group -
+                                                <b>&nbsp;{locaData?.groups?.find(group => group._id === retro?.group)?.name || 'Unknown'}</b>
                                             </span><br />
                                             <span style={{ fontSize: '16px', marginTop: '5px' }}>
                                                 Created On - <b>{new Date(retro?.createdAt).toLocaleString()}</b>

From 5a452aff5c20f27466bfdc60d1533191ae9d8017 Mon Sep 17 00:00:00 2001
From: Aman Singh <amankrs212@gmail.com>
Date: Wed, 5 Mar 2025 02:35:52 +0530
Subject: [PATCH 14/15] [SONAR]: issue has been fixed.

---
 client/src/pages/groups/GroupAdd.jsx | 3 ++-
 client/src/pages/retro/Retro.jsx     | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/groups/GroupAdd.jsx b/client/src/pages/groups/GroupAdd.jsx
index f177b4a..59707a0 100644
--- a/client/src/pages/groups/GroupAdd.jsx
+++ b/client/src/pages/groups/GroupAdd.jsx
@@ -14,11 +14,12 @@ export default function GroupAdd({ openAdd, setOpenAdd }) {
     const { setLoading } = useLoading();
 
     const handleGroupAdd = async (data) => {
+        const rRegex = /^["']|["']$/g;
         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
         const members = data.members
             .split(',')
-            .map(email => email.trim().replace(/^["']|["']$/g, ''))
+            .map(email => email.trim().replace(rRegex, '')) // Now correctly removes both leading & trailing quotes
             .filter(email => emailRegex.test(email));
 
         if (members.length === 0 || data.members.trim() === "" || members.some(email => email === "")) {
diff --git a/client/src/pages/retro/Retro.jsx b/client/src/pages/retro/Retro.jsx
index 6897157..7793a62 100644
--- a/client/src/pages/retro/Retro.jsx
+++ b/client/src/pages/retro/Retro.jsx
@@ -45,8 +45,8 @@ export default function Retro() {
                                     </AccordionSummary>
                                     <AccordionDetails sx={{ mt: -2 }}>
                                         <Typography variant="body1" color="text.secondary">
-                                            <span>Belongs to Group -
-                                                <b>&nbsp;{locaData?.groups?.find(group => group._id === retro?.group)?.name || 'Unknown'}</b>
+                                            <span>Belongs to Group -{' '}
+                                                <b>{locaData?.groups?.find(group => group._id === retro?.group)?.name || 'Unknown'}</b>
                                             </span><br />
                                             <span style={{ fontSize: '16px', marginTop: '5px' }}>
                                                 Created On - <b>{new Date(retro?.createdAt).toLocaleString()}</b>

From c416df6e59bd5f241561c0725b0888c414949d99 Mon Sep 17 00:00:00 2001
From: Aman Kumar Singh <amansingh844123@gmail.com>
Date: Wed, 5 Mar 2025 02:39:36 +0530
Subject: [PATCH 15/15] [SONAR]: Update GroupAdd.jsx

---
 client/src/pages/groups/GroupAdd.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/groups/GroupAdd.jsx b/client/src/pages/groups/GroupAdd.jsx
index 59707a0..e4275dc 100644
--- a/client/src/pages/groups/GroupAdd.jsx
+++ b/client/src/pages/groups/GroupAdd.jsx
@@ -14,7 +14,7 @@ export default function GroupAdd({ openAdd, setOpenAdd }) {
     const { setLoading } = useLoading();
 
     const handleGroupAdd = async (data) => {
-        const rRegex = /^["']|["']$/g;
+        const rRegex = /^(?:["'])|(?:["'])$/g;
         const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
         const members = data.members