Merge branch 'task27' into modal2_backend

client/package.json

@@ -39,6 +39,7 @@
     "@mui/material": "^5.5.3",
     "@mui/system": "^5.5.2",
     "@mui/x-date-pickers": "^6.19.6",
+    "@mui/x-date-pickers-pro": "^7.1.1",
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.1.2",
     "dayjs": "^1.11.10",

client/src/AdminDashboard/AdminDashboardPage.tsx

@@ -14,8 +14,10 @@ function AdminDashboardPage() {
       <Grid item>
         <Typography variant="h2">Welcome to the Admin Dashboard</Typography>
       </Grid>
-      <Grid item container width="60vw" justifyContent="flex-end">
-        <InviteUserButton />
+      <Grid item container width="60vw" justifyContent="flex-end" spacing={2}>
+        <Grid item>
+          <InviteUserButton />
+        </Grid>
       </Grid>
       <Grid item>
         <div style={{ height: '60vh', width: '60vw' }}>

client/src/AdminDashboard/UserTable.tsx

@@ -58,11 +58,13 @@ function UserTable() {
 
   // Upon getting the list of users for the database, set the state of the userList to contain all users except for logged in user
   useEffect(() => {
-    setUserList(
-      users?.data.filter(
-        (entry: IUser) => entry && entry.email && entry.email !== self.email,
-      ),
-    );
+    if (users && users.data) {
+      setUserList(
+        users?.data.filter(
+          (entry: IUser) => entry && entry.email && entry.email !== self.email,
+        ),
+      );
+    }
   }, [users, self]);
 
   // update state of userlist to remove a user from  the frontend representation of the data

client/src/App.tsx

@@ -128,4 +128,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

client/src/Communications/CommunicationsPage.tsx

@@ -1,15 +1,6 @@
-/* eslint-disable consistent-return */
-/* eslint-disable react-hooks/rules-of-hooks */
-/* eslint-disable no-console */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-empty */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable no-alert */
-/* eslint-disable import/no-unresolved */
 import React, { useEffect, useState } from 'react';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import SearchDonorsButton from '../components/buttons/SearchDonorsButton';
 import axios from 'axios';
 import {
   Typography,
@@ -32,6 +23,7 @@ import {
 import AddEditGroupsModal from '../components/AddEditGroupsModal';
 import IDonor from '../util/types/donor';
 import IGroup from '../util/types/group';
+import IDonation from '../util/types/donation';
 import { useData } from '../util/api';
 
 const BACKENDURL = process.env.PUBLIC_URL
@@ -48,7 +40,6 @@ const modalStyle = {
   overflow: 'auto',
   width: 600, // Adjust width as needed
   bgcolor: 'background.paper',
-  border: '2px solid #000',
   boxShadow: 24,
   p: 4,
 };
@@ -134,6 +125,12 @@ type RowItem = {
   contact_email: string;
 };
 
+interface DonorInfo {
+  email: string
+  name: string;
+  _id: string;
+}
+
 function CommunicationsPage() {
   const [unackDonoModalOpen, setUnackDonoModalOpen] = React.useState(false);
   const [editGroupModalOpen, setEditGroupModalOpen] = React.useState(false);
@@ -142,35 +139,27 @@ function CommunicationsPage() {
   );
   const [groupSearchValue, setGroupSearchValue] = useState(null);
   const [rows, setRows] = useState<RowItem[]>([]);
+
   const [donors, setDonors] = useState<IDonor[]>([]);
   const [groups, setGroups] = useState<IGroup[]>([]);
+  const [donations, setDonations] = useState<IDonation[]>([]);
 
-  // Fetch data using custom hook
   const allDonors: any | null = useData('donor/all');
+  const allDonations: any | null = useData('donation/all');
   const allGroups: any | null = useData('group/all');
 
 
   const handleUnackDonoModalOpen = async () => {
     try {
       console.log('opened');
-      const allDonationsResponse = await axios.get(
-        `${BACKENDURL}/api/donation/all`,
-      );
-      if (!allDonationsResponse) {
-        return;
-      }
-      const allDonations = allDonationsResponse.data;
-      console.log('here');
-      console.log(allDonations);
-      const temp = allDonations.filter(
-        (donation: any) => !donation.acknowledged,
+      const temp = donations.filter(
+        (donation: IDonation) => !donation.acknowledged,
       );
       const tempWithDonorInfo = await Promise.all(
         temp.map(async (donation: any) => {
           const donorInfoResponse = await axios.get(
             `${BACKENDURL}/api/donor/id/${donation.donor_id}`,
           );
-          console.log(donorInfoResponse);
           if (!donorInfoResponse) {
             return;
           }
@@ -179,6 +168,7 @@ function CommunicationsPage() {
             ...donation,
             donorName: donorInfo.contact_name,
             donorEmail: donorInfo.contact_email,
+            donorId: donorInfo._id,
           };
         }),
       );
@@ -188,6 +178,7 @@ function CommunicationsPage() {
     }
     setUnackDonoModalOpen(true);
   };
+
   const handleUnackDonoModalClose = () => setUnackDonoModalOpen(false);
 
   const handleGroupModalOpen = () => {
@@ -204,6 +195,12 @@ function CommunicationsPage() {
     }
   }, [allDonors]);
 
+  useEffect(() => {
+    if (allDonations?.data) {
+      setDonations(allDonations.data);
+    }
+  }, [allDonations]);
+
   useEffect(() => {
     if (allGroups?.data) {
       setGroups(allGroups.data);
@@ -220,7 +217,6 @@ function CommunicationsPage() {
     value: { name: string; id: string | { $oid: string } } | null,
   ) => {
     if (value) {
-      // setRows([]);
       const selectedPerson = donors.find(
         (person) => extractId(person._id) === value.id,
       );
@@ -281,8 +277,7 @@ function CommunicationsPage() {
   ) => {
     if (value) {
       setRows([]);
-      addGroupItem(value); // Add members of the selected group to the table
-      // Clear the Autocomplete input after adding the group members
+      addGroupItem(value); 
       setGroupSearchValue(null);
     }
   };
@@ -295,6 +290,43 @@ function CommunicationsPage() {
     setRows((prevRows) => prevRows.filter((row) => row.id !== idToRemove));
   };
 
+  function formatDateString(dateString: string): string {
+    if (dateString) {
+      const date = new Date(dateString);
+      const formattedDate = date.toISOString().slice(0, 10);
+      return formattedDate;
+    }
+    return '';
+  }
+
+  function handleAddUnackDonation(selectedName: string, selectedEmail: string, selectedId: string) {
+    if (selectedId) {
+      const selectedPerson = donors.find(
+        (person) => extractId(person._id) === selectedId,
+      );
+      if (selectedPerson) {
+        const existingRow = rows.find(
+          (row) => row.id === extractId(selectedPerson._id),
+        );
+        if (existingRow) {
+          return;
+        }
+        const newItem: RowItem = {
+          id: extractId(selectedPerson._id),
+          contact_name: selectedPerson.contact_name,
+          contact_email: selectedPerson.contact_email,
+        };
+        setRows((prevRows: RowItem[]) => [...prevRows, newItem]);
+      }
+    }
+  }
+  const handleFilteredDonors = (filteredDonors: DonorInfo[]) => {
+    console.log('Received filtered donors:', filteredDonors);
+    filteredDonors.forEach((donor: DonorInfo) => {
+      handleAddUnackDonation(donor.name, donor.email, donor._id);
+    })
+  };
+
   return (
     <Box paddingTop={2} paddingLeft={4} marginBottom={2}>
       <Box>
@@ -351,17 +383,7 @@ function CommunicationsPage() {
           Email Unacknowledged Donations
         </Button>
 
-        <Button
-          variant="contained"
-          color="primary"
-          size="large"
-          endIcon={<ArrowForwardIcon />}
-          fullWidth
-          sx={{ marginBottom: '10px' }}
-          style={{ justifyContent: 'flex-start' }}
-        >
-          Search All Donors & Sponsors
-        </Button>
+        <SearchDonorsButton onConfirm={handleFilteredDonors} />
         <Button
           variant="contained"
           color="inherit"
@@ -471,22 +493,34 @@ function CommunicationsPage() {
         aria-describedby="Email Unacknowledged Donations Modal"
       >
         <Box sx={modalStyle}>
-          <Typography variant="h6" component="h2">
-            Email Unacknowledged Donations
+          <Typography variant="h6" component="h6">
+            Contact Unacknowledged Donations
           </Typography>
           {unacknowledgedDonations.map((donation) => (
-            <Box key={donation._id} sx={{ border: 1, p: 2, my: 1 }}>
-              <Typography variant="body1">
-                Donation ID: {donation._id}
-              </Typography>
+            <Box key={donation._id} 
+              sx={{
+                p: 2,
+                my: 1,
+                borderRadius: 2,
+                boxShadow: 3,
+              }}>
               <Typography variant="body1">Amount: {donation.amount}</Typography>
-              <Typography variant="body1">Date: {donation.date}</Typography>
+              <Typography variant="body1">Date: {formatDateString(donation.date) || 'N/A'}</Typography>
               <Typography variant="body1">
                 Donor Name: {donation.donorName}
               </Typography>
               <Typography variant="body1">
                 Donor Email: {donation.donorEmail}
               </Typography>
+              <Button
+                variant="contained"
+                color="primary"
+                size="medium"
+                style={{ marginTop: '10px' }} 
+                onClick={() => handleAddUnackDonation(donation.donorName, donation.donorEmail, donation.donorId)}
+              >
+                Select
+              </Button >
             </Box>
           ))}
           <Button onClick={handleUnackDonoModalClose}>Close</Button>

client/src/assets/theme.ts

@@ -2,9 +2,9 @@
  * A file for defining the global MUI theme used in the project.
  */
 import { createTheme } from '@mui/material/styles';
+import 'typeface-hk-grotesk';
 import { color, fontFamily, fontSize, fontStyle } from '@mui/system';
 import COLORS from './colors';
-import 'typeface-hk-grotesk';
 
 // https://github.com/hack4impact/chapter-website-template/blob/main/public/style.css
 const theme = createTheme({