Skip to content

Commit

Permalink
tables
Browse files Browse the repository at this point in the history
  • Loading branch information
karenl03 committed Apr 28, 2024
1 parent 772d312 commit 92423a2
Show file tree
Hide file tree
Showing 5 changed files with 392 additions and 17 deletions.
106 changes: 89 additions & 17 deletions client/src/HomeDashboard/HomeDashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import {
Typography,
Box,
Expand All @@ -14,34 +14,100 @@ import {
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch } from '../util/redux/hooks';
import { useData } from '../util/api';
import DonationsTable from '../components/tables/DonationsTable';

interface BasicTableProps {
alignment: string;
}

function BasicTable({ alignment }: BasicTableProps) {
let customRows: { label: string; value: string }[] = [];
const donations = useData('donation/all');
const [donationsData, setDonationsData] = useState<any>([]);

useEffect(() => {
const data = donations?.data || [];
const filteredData = data.filter(
(donation: any) => donation.type === alignment,
);
setDonationsData(filteredData);
}, [donations?.data, alignment]);

// calculate summary stats
const totalDonated = donationsData.reduce(
(total: number, donation: any) => total + donation.amount,
0,
);
const sortedDonationsData = [...donationsData].sort(
(a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime(),
);
const lastDate =
sortedDonationsData.length > 0
? new Date(sortedDonationsData[0].date)
: null;
let last = 'N/A';

if (lastDate) {
const currentDate = new Date();
const timeDifference = currentDate.getTime() - lastDate.getTime();
const daysDifference = Math.floor(timeDifference / (1000 * 3600 * 24));

if (daysDifference > 30) {
const day = lastDate.getDate();
const month = lastDate.toLocaleString('default', { month: 'long' });
const year = lastDate.getFullYear();
last = `${month} ${day}, ${year}`;
} else if (daysDifference > 0) {
last = `${daysDifference} days ago`;
} else {
const hoursDifference = Math.floor(timeDifference / (1000 * 3600));
last = `${hoursDifference} hours ago`;
}
}
const ninetyDaysAgo = new Date();
ninetyDaysAgo.setDate(ninetyDaysAgo.getDate() - 90);
const donatedInLast90Days = donationsData.reduce(
(total: number, donation: any) => {
const donationDate = new Date(donation.date);
return donationDate >= ninetyDaysAgo ? total + donation.amount : total;
},
0,
);

if (alignment === 'donation') {
customRows = [
{ label: 'Total Donated', value: '$1350' },
{ label: 'Last Donation', value: '18 Hours Ago' },
{ label: 'Donated in last 90 Days', value: '$42' },
{ label: 'Total Donated', value: `$${totalDonated.toLocaleString()}` },
{ label: 'Last Donation', value: last },
{
label: 'Donated in last 90 Days',
value: `$${donatedInLast90Days.toLocaleString()}`,
},
];
} else if (alignment === 'sponsorship') {
customRows = [
{ label: 'Total Sponsored', value: '$1350' },
{ label: 'Last Sponsorship', value: '18 Hours Ago' },
{ label: 'Sponsored in last 90 Days', value: '$42' },
{ label: 'Total Sponsored', value: `$${totalDonated.toLocaleString()}` },
{ label: 'Last Sponsorship', value: last },
{
label: 'Sponsored in last 90 Days',
value: `$${donatedInLast90Days.toLocaleString()}`,
},
];
} else if (alignment === 'grant') {
customRows = [
{ label: 'Total Granted', value: '$1350' },
{ label: 'Last Grant', value: '18 Hours Ago' },
{ label: 'Granted in last 90 Days', value: '$42' },
{ label: 'Total Granted', value: `$${totalDonated.toLocaleString()}` },
{ label: 'Last Grant', value: last },
{
label: 'Granted in last 90 Days',
value: `$${donatedInLast90Days.toLocaleString()}`,
},
];
}

const numUnacknowledged = donationsData.filter(
(donation: any) => !donation.acknowledged,
).length;

return (
<Box
border="none"
Expand All @@ -63,6 +129,9 @@ function BasicTable({ alignment }: BasicTableProps) {
</TableBody>
</Table>
</TableContainer>
<p style={{ marginTop: '16px' }}>
There are {numUnacknowledged} unacknowledged {alignment}s.
</p>
</Box>
);
}
Expand All @@ -85,7 +154,12 @@ function HomeDashboard() {
}

return (
<Box display="flex" flexDirection="column" alignItems="flex-start">
<Box
display="flex"
flexDirection="column"
alignItems="flex-start"
marginBottom={2}
>
<Box
display="flex"
flexDirection="row"
Expand Down Expand Up @@ -113,13 +187,14 @@ function HomeDashboard() {
background: 'grey',
color: 'white',
marginRight: '16px',
marginTop: '16px',
}}
>
View Report
</Button>
</Box>

<Box marginBottom={2} marginLeft={2}>
<Box marginLeft={2}>
{/* Add a Typography for the title "Summary" */}
<Typography variant="h4" gutterBottom>
Summary
Expand All @@ -129,10 +204,6 @@ function HomeDashboard() {
{/* Render the BasicTable component with the alignment prop */}
<BasicTable alignment={alignment} />

<p style={{ marginTop: '16px', marginLeft: '16px' }}>
There are 3 unacknowledged sponsorships.
</p>

<Button
onClick={() => {
handleClick();
Expand All @@ -142,11 +213,12 @@ function HomeDashboard() {
Send them a message now
</Button>

<Box marginBottom={2} marginLeft={2}>
<Box marginBottom={2} marginLeft={2} marginTop={2}>
<Typography variant="h4" gutterBottom>
{alignment.charAt(0).toUpperCase() + alignment.slice(1)}s
</Typography>
</Box>
<DonationsTable alignment={alignment} />
</Box>
);
}
Expand Down
31 changes: 31 additions & 0 deletions client/src/components/tables/CommunicationsTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import FilteringTable from './FilteringTable';

function CommunicationsTable() {
// // Define the columns
// // <Date>, <# of Recipients>, <Recipient List>, <Added Groups>
// const columns = [
// { id: 'date_created', label: 'Date' },
// { id: 'donor_ids', label: '# of Recipients' },
// { id: 'donor_ids', label: 'Recipient List' },
// { id: 'group_name', label: 'Added Groups' },
// // Add more columns as needed
// ];

// // Generate the rows
// const rows = [];
// const startDate = new Date('2023-01-01');
// const endDate = new Date('2024-12-31');
// for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
// rows.push({
// id: rows.length + 1,
// name: `Name ${rows.length + 1}`,
// date: d.toISOString().split('T')[0], // Format the date as 'yyyy-mm-dd'
// // Add more data as needed
// });
// }

// return <FilteringTable columns={columns} rows={rows} />;
}

export default CommunicationsTable;
53 changes: 53 additions & 0 deletions client/src/components/tables/DonationsTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { useState, useEffect } from 'react';
import { useData } from '../../util/api';
import FilteringTable from './FilteringTable';

interface BasicTableProps {
alignment: string;
}

function DonationsTable({ alignment }: BasicTableProps) {
const donations = useData('donation/all');
const [donationsData, setDonationsData] = useState<any>([]);

useEffect(() => {
const data = donations?.data || [];
const filteredData = data.filter(
(donation: any) => donation.type === alignment,
);
setDonationsData(filteredData);
}, [donations?.data, alignment]);

// columns: <Date>, <Amount>, <Donor>, <Payment Type>, <Purpose>
const columns = [
{ id: 'date', label: 'Date' },
{ id: 'amount', label: 'Amount' },
{ id: 'donor_id', label: 'Donor' },
{ id: 'payment_type', label: 'Payment Type' },
{ id: 'purpose_id', label: 'Purpose' },
];

// const rows = donationsData.map((donation: any) => ({
// date: new Date(donation.date).toISOString().split('T')[0],
// amount: donation.amount,
// donor_id: donation.donor_id,
// payment_type: donation.payment_type,
// purpose_id: donation.purpose_id,
// }));

const rows: any = [];
donationsData.forEach((donation: any, index: number) => {
rows.push({
id: index + 1,
date: new Date(donation.date).toISOString().split('T')[0],
amount: donation.amount,
donor_id: donation.donor_id,
payment_type: donation.payment_type,
purpose_id: donation.purpose_id,
});
});

return <FilteringTable columns={columns} rows={rows} />;
}

export default DonationsTable;
32 changes: 32 additions & 0 deletions client/src/components/tables/DonorsTable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import FilteringTable from './FilteringTable';

function DonorsTable() {
// Define the columns
// <Name>, <Donor Group>, <Recent Donation>, <Last Communication>
// const columns = [
// { id: 'contact_name', label: 'Name' },
// { id: 'donor_group', label: 'Donor Group' },
// { id: 'last_donation_date', label: 'Recent Donation' },
// { id: 'last_communication_date', label: 'Last Communication' },
// // Add more columns as needed
// ];

// // Generate the rows
// const rows = [];
// const startDate = new Date('2023-01-01');
// const endDate = new Date('2024-12-31');
// for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
// rows.push({
// id: rows.length + 1,
// name: `Name ${rows.length + 1}`,
// date: d.toISOString().split('T')[0], // Format the date as 'yyyy-mm-dd'
// // Add more data as needed
// });

// }

// return <FilteringTable columns={columns} rows={rows} />;
}

export default DonorsTable;
Loading

0 comments on commit 92423a2

Please sign in to comment.