Donation info page

client/src/App.tsx

@@ -26,6 +26,7 @@ import DonorProfilePage from './donorProfile/DonorProfilePage';
 import ReportsPage from './Reports/ReportsPage';
 import HomeDashboardPage from './HomeDashboard/HomeDashboard';
 import NewDonationPage from './NewDonation/NewDonationPage';
+import DonationInfoPage from './DonationInfo/DonationInfoPage';
 
 function App() {
   return (
@@ -66,6 +67,7 @@ function App() {
                   <Route element={<ProtectedRoutesWrapper />}>
                     <Route path="/home" element={<HomePage />} />
                   </Route>
+                  <Route path="/donationInfo" element={<DonationInfoPage />} />
                   <Route element={<AdminRoutesWrapper />}>
                     <Route path="/users" element={<AdminDashboardPage />} />
                   </Route>

client/src/DonationInfo/DonationInfoPage.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Typography,
+  Box,
+  Button,
+  TableContainer,
+  Paper,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { useData } from '../util/api';
+import { useAppDispatch } from '../util/redux/hooks';
+import axios from 'axios';
+
+function BasicTable({ customRows }: { customRows: { label: string; value: string }[] }) {
+  return (
+    <Box border="none" borderRadius={4} p={2} sx={{ width: 'min(500px, 100%)' }}>
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 300 }} aria-label="simple table">
+          <TableBody>
+            {customRows.map((row) => (
+              <TableRow key={row.label}>
+                <TableCell component="th" scope="row">
+                  {row.label}
+                </TableCell>
+                <TableCell align="right">{row.value}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+}
+
+function DonationInfoPage() {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const [donationData, setDonationData] = useState<any>([]);
+  const [customRows, setCustomRows] = useState<{ label: string; value: string }[]>([]);
+  const [donorName, setDonorName] = useState('');
+  const [purpose, setPurpose] = useState('');
+
+  // Fetch donation data from API
+  const donationID = "65daa89e6c34e8adb9f2d2c7";
+  const donation = useData(`donation/${donationID}`);
+
+  useEffect(() => {
+    const fetchDonorAndPurpose = async () => {
+      if (donation?.data) {
+        setDonationData(donation.data);
+        if (donation.data.donor_id) {
+          try {
+            const res = await axios.get(`http://localhost:4000/api/donor/${donation.data.donor_id}`);
+            setDonorName(res.data.contact_name);
+          } catch (error) {
+            console.error('Failed to fetch donor name:', error);
+          }
+        }
+
+        if (donation.data.purpose_id) {
+          try {
+            const res = await axios.get(`http://localhost:4000/api/purpose/${donation.data.purpose_id}`);
+            setPurpose(res.data.name);
+          } catch (error) {
+            console.error('Failed to fetch donor name:', error);
+          }
+        }
+      }
+    };
+
+    fetchDonorAndPurpose();
+  }, [donation?.data]);
+
+  function formatDateString(dateString: string): string{
+    if (dateString) {const date = new Date(dateString);
+      const formattedDate = date.toISOString().slice(0, 10);
+      return formattedDate;
+    }
+    return "";
+  }
+
+
+  function setTableWithDonation() {
+    if (donationData) {
+        const updatedCustomRows = [
+            { label: 'Donation Amount', value: `$ ${donationData.amount}` || 'N/A' },
+            { label: 'Date Donated', value: formatDateString(donationData.date) || 'N/A' },
+            { label: 'Donor', value: donorName || 'N/A' },
+            { label: 'Payment Information', value: donationData.payment_type || 'N/A' },
+            { label: 'Campaign Category', value: purpose || 'N/A' },
+            { label: 'Acknowledged?', value: donationData.acknowledged ? 'Yes' : 'No' },
+        ];
+        setCustomRows(updatedCustomRows);
+    }
+  }
+
+  useEffect(() => {
+    setTableWithDonation();
+  }, [donationData, donorName, purpose]);
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="flex-start">
+      <Box display="flex" flexDirection="row" alignItems="center" marginBottom={2} marginLeft={2}>
+        <Typography variant="h5" gutterBottom>
+          Donation Information
+        </Typography>
+      </Box>
+
+      {/* Render the BasicTable component with the updated customRows data */}
+      <BasicTable customRows={customRows} />
+
+      {!donationData.acknowledged && (
+        <>
+          <p style={{ marginTop: '16px', marginLeft: '16px' }}>
+            This donation has not been acknowledged.
+          </p>
+        </>
+      )}
+      <Button
+        onClick={() => navigate('/home')}
+            style={{ marginLeft: '16px', background: 'blue', color: 'white' }}
+        >
+          Send them a message now ->
+      </Button>
+    </Box>
+  );
+}
+
+export default DonationInfoPage;

server/src/controllers/donor.controller.ts

@@ -91,7 +91,6 @@ const createDonorController = async (
 
 const getDonorByIdController = async (
   req: express.Request,
-
   res: express.Response,
   next: express.NextFunction,
 ) => {

server/src/models/donor.model.ts

@@ -29,11 +29,23 @@ const DonorSchema = new mongoose.Schema({
     type: Date,
     required: true,
   },
+  last_communication_date: {
+    type: Date,
+    required: false,
+  },
   type: {
     type: String,
     required: true,
   },
-  comments: {
+  org_address: {
+    type: String,
+    required: false,
+  },
+  org_email: {
+    type: String,
+    required: false,
+  },
+  org_name: {
     type: String,
     required: false,
   },
@@ -48,8 +60,12 @@ interface IDonor extends mongoose.Document {
   donor_group: string;
   registered_date: Date;
   last_donation_date: Date;
+  last_communication_date: string;
   type: string;
   comments: string;
+  org_address: string;
+  org_email: string;
+  org_name: string;
 }
 
 const Donor = mongoose.model<IDonor>('Donor', DonorSchema);

server/src/routes/donation.route.ts

@@ -18,7 +18,7 @@ router.get('/type/:type', isAuthenticated, getAllDonationsOfType);
 
 router.get('/:id', getDonation);
 
-router.get('/donor/:donorId', isAuthenticated, getDonationsByDonorId);
+router.get('/donor/:id', isAuthenticated, getDonationsByDonorId);
 
 // router.post('/new', isAuthenticated, createNewDonation);
 // For testing:

server/src/routes/donor.route.ts

@@ -12,10 +12,10 @@ const router = express.Router();
 
 router.get('/all', getAllDonorsController);
 
-router.get('/:type', isAuthenticated, getAllDonorsOfType);
-
 router.get('/:id', isAuthenticated, getDonorByIdController);
 
+router.get('/:type', isAuthenticated, getAllDonorsOfType);
+
 // router.post('/create', isAuthenticated, createDonorController);
 // For testing:
 router.post('/create', createDonorController);