Skip to content

Commit

Permalink
table done
Browse files Browse the repository at this point in the history
  • Loading branch information
Su Yeon Lee authored and Su Yeon Lee committed Jun 27, 2024
1 parent 97008cf commit 480844b
Showing 1 changed file with 132 additions and 45 deletions.
177 changes: 132 additions & 45 deletions client/src/Reports/ReportsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,43 +49,45 @@ function createData(
interface BasicTableProps {
alignment: string;
report: IReports | undefined;
prevReport: IReports | undefined;
}

function BasicTable({ alignment, report }: BasicTableProps) {
let customRows: { title: string; value: string, hasChange: boolean, changeValue: string, changeSymbol: boolean }[] = [];
if (report) {
let data;
const getDifference = (newValue: number | null, oldValue: number | null) => {
if (newValue === null || oldValue === null) {
return { changeValue: 'N/A', changeSymbol: false };
}
const difference = newValue - oldValue;
return {
changeValue: `${difference >= 0 ? '+' : ''}${difference.toFixed(2)}`,
changeSymbol: difference >= 0,
};
};

function BasicTable({ alignment, report, prevReport }: BasicTableProps) {
const getReportData = (report: IReports | undefined, alignment: string) => {
if (!report || report === undefined) return null;
switch (alignment) {
case 'last_all':
data = report.last_all;
break;
return report.last_all;
case 'last_fiscal':
data = report.last_fiscal;
break;
return report.last_fiscal;
case 'last_calendar':
data = report.last_calendar;
break;
return report.last_calendar;
case 'last_90':
data = report.last_90;
break;
return report.last_90;
case 'last_30':
data = report.last_30;
break;
return report.last_30;
default:
data = report.last_all;
return report.last_all;
}
};

if (data) {
customRows = [
createData('Total Donated', `$${data.total_donated}`, false, '', false),
createData('Total Donations', `${data.total_donations}`, false, '', false),
createData('Average Donation', `$${data.average_donations.toFixed(2)}`, false, '', false),
createData('Average Donations Per Person', `$${data.average_donations_per_person.toFixed(2)}`, false, '', false),
createData('Top Donator', `${data.top_donator.donor_name}`, false, '', false),
createData('Largest Donation', `$${data.largest_donation.amount} (${data.largest_donation.donor_name})`, false, '', false),
];
} else {
customRows = [
const data = getReportData(report, alignment);
const prevData = getReportData(prevReport, alignment);

const createRows = (data, prevData) => {
if (!data) {
return [
createData('Total Donated', 'No report data', false, '', false),
createData('Total Donations', 'No report data', false, '', false),
createData('Average Donation', 'No report data', false, '', false),
Expand All @@ -94,16 +96,30 @@ function BasicTable({ alignment, report }: BasicTableProps) {
createData('Largest Donation', 'No report data', false, '', false),
];
}
} else {
customRows = [
createData('Total Donated', 'No report data', false, '', false),
createData('Total Donations', 'No report data', false, '', false),
createData('Average Donation', 'No report data', false, '', false),
createData('Average Donations Per Person', 'No report data', false, '', false),
createData('Top Donator', 'No report data', false, '', false),
createData('Largest Donation', 'No report data', false, '', false),

if (!prevData) {
return [
createData('Total Donated', `$${data.total_donated}`, false, '', false),
createData('Total Donations', `${data.total_donations}`, false, '', false),
createData('Average Donation', `$${data.average_donations?.toFixed(2)}`, false, '', false),
createData('Average Donations Per Person', `$${data.average_donations_per_person?.toFixed(2)}`, false, '', false),
createData('Top Donator', `${data.top_donator?.donor_name}`, false, '', false),
createData('Largest Donation', `$${data.largest_donation?.amount} (${data.largest_donation?.donor_name})`, false, '', false),
];
}

return [
createData('Total Donated', `$${data.total_donated}`, true, getDifference(data.total_donated, prevData.total_donated).changeValue, getDifference(data.total_donated, prevData.total_donated).changeSymbol),
createData('Total Donations', `${data.total_donations}`, true, getDifference(data.total_donations, prevData.total_donations).changeValue, getDifference(data.total_donations, prevData.total_donations).changeSymbol),
createData('Average Donation', `$${data.average_donations?.toFixed(2)}`, true, getDifference(data.average_donations, prevData.average_donations).changeValue, getDifference(data.average_donations, prevData.average_donations).changeSymbol),
createData('Average Donations Per Person', `$${data.average_donations_per_person?.toFixed(2)}`, true, getDifference(data.average_donations_per_person, prevData.average_donations_per_person).changeValue, getDifference(data.average_donations_per_person, prevData.average_donations_per_person).changeSymbol),
createData('Top Donator', `${data.top_donator?.donor_name}`, true, getDifference(data.top_donator?.amount, prevData.top_donator?.amount).changeValue, getDifference(data.top_donator?.amount, prevData.top_donator?.amount).changeSymbol),
createData('Largest Donation', `$${data.largest_donation?.amount} (${data.largest_donation?.donor_name})`, true, getDifference(data.largest_donation?.amount, prevData.largest_donation?.amount).changeValue, getDifference(data.largest_donation?.amount, prevData.largest_donation?.amount).changeSymbol),
];
}
};

const customRows = createRows(data, prevData);

return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="report table">
Expand Down Expand Up @@ -160,15 +176,19 @@ function ReportsPage() {
} = useDonationStatistics();

const [alignment, setAlignment] = useState('last_all');
const [report, setReport] = useState<IReports>();
const [report, setReport] = useState<IReports | undefined>();
const [prevReport, setPrevReport] = useState<IReports | undefined>(undefined);
const [allReports, setAllReports] = useState<IReports[]>([]);
const [errorMessage, setErrorMessage] = useState(false);
const [viewingPastReport, setViewingPastReport] = useState(false);
const [confirmationModalOpen, setConfirmationModalOpen] = React.useState(false);
const handleConfirmationModalOpen = () => setConfirmationModalOpen(true);
const handleConfirmationModalClose = () => setConfirmationModalOpen(false);
const [pastReportsModalOpen, setPastReportsModalOpen] = React.useState(false);
const handlePastReportsModalOpen = () => setPastReportsModalOpen(true);
const handlePastReportsModalClose = () => setPastReportsModalOpen(false);
const handleViewingPastReportsOpen = () => setViewingPastReport(true);
const handleViewingPastReportsClose = () => setViewingPastReport(false);
const reports = useData('reports/all');

useEffect(() => {
Expand All @@ -187,7 +207,9 @@ function ReportsPage() {
if (allReports && allReports.length > 0) {
const sortedReports = allReports.sort((a, b) => new Date(b.date_generated).getTime() - new Date(a.date_generated).getTime());
const mostRecentReport = sortedReports[0];
const secondMostRecentReport = sortedReports[1] || null;
setReport(mostRecentReport);
setPrevReport(secondMostRecentReport);
}
}, [allReports]);

Expand All @@ -213,7 +235,9 @@ function ReportsPage() {
postData('reports/create', newReportData)
.then((response) => {
console.log(response);
setPrevReport(report);
setReport(response.data);
setAllReports(prevAllReports => [...prevAllReports, response.data]);
})
.catch((error) => {
console.log(error);
Expand All @@ -224,11 +248,60 @@ function ReportsPage() {
}
};

const handleViewReport = (report: IReports) => {
setReport(report);
setPrevReport(allReports.find(r => new Date(r.date_generated).getTime() < new Date(report.date_generated).getTime()) || undefined);
handlePastReportsModalClose();
handleViewingPastReportsOpen();
};

const handleLoadRecentReport = () => {
const sortedReports = allReports.sort((a, b) => new Date(b.date_generated).getTime() - new Date(a.date_generated).getTime());
const mostRecentReport = sortedReports[0];
const secondMostRecentReport = sortedReports[1] || null;
setReport(mostRecentReport);
setPrevReport(secondMostRecentReport);
handleViewingPastReportsClose();
};

const renderPastReports = () => {
if (allReports.length === 0) {
return (
<Typography sx={{ mt: 2 }}>No past reports available.</Typography>
);
}

return (
<TableContainer component={Paper} sx={{ maxHeight: 300 }}>
<Table stickyHeader aria-label="past reports table">
<TableBody>
{allReports.map((report, index) => (
<TableRow key={report._id}>
<TableCell>{index + 1}</TableCell>
<TableCell>{dayjs(report.date_generated).format('MM/DD/YYYY')}</TableCell>
<TableCell>
<Button
variant="contained"
color="primary"
onClick={() => handleViewReport(report)}
>
View Report
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};


return (
<div>
<Grid container sx={{ m: 3 }} spacing={2}>
<Grid item xs={8}>
<Typography variant="h2" sx={{ fontWeight: 'bold' }}>
<Typography variant="h4" gutterBottom>
Report on {dayjs(report?.date_generated).format('MM/DD/YYYY')}
</Typography>
</Grid>
Expand All @@ -250,21 +323,34 @@ function ReportsPage() {
View Past Reports
</Button>
</Grid>
<Grid item xs={12}>
<Grid container direction="row" spacing={2}>
<Grid item>
<Button
variant="contained"
color="primary"
onClick={() => generateReport()}
color="inherit"
onClick={handleLoadRecentReport}
>
Generate New Report
View Recent Report
</Button>
</Grid>
{!viewingPastReport && (
<Grid item>
<Button
variant="contained"
color="primary"
onClick={() => generateReport()}
>
Generate New Report
</Button>
</Grid>
)}
</Grid>
{errorMessage && (
<Typography sx={{ color: 'red', ml: 2 }} variant="body2">
Error generating the report, please retry.
</Typography>
)}
<Grid item xs={12}>
<Grid item xs={12} sx={{ mb: 2 }}>
<ToggleButtonGroup
value={alignment}
exclusive
Expand All @@ -290,7 +376,7 @@ function ReportsPage() {
</ToggleButtonGroup>
</Grid>

<BasicTable alignment={alignment} report={report} />
<BasicTable alignment={alignment} report={report} prevReport={prevReport} />

{/* <Grid item xs={12}>
Expand Down Expand Up @@ -375,12 +461,13 @@ function ReportsPage() {
open={pastReportsModalOpen}
onClose={handlePastReportsModalClose}
aria-labelledby="Past Reports Modal"
aria-describedby="View Past Reports Report"
aria-describedby="View Past Reports"
>
<Box sx={style}>
<Box sx={{ ...style, width: '80%', maxHeight: '80vh', overflow: 'auto' }}>
<Typography variant="h6" component="h2">
Past Reports
</Typography>
{renderPastReports()}
<Button onClick={handlePastReportsModalClose}>Close</Button>
</Box>
</Modal>
Expand Down

0 comments on commit 480844b

Please sign in to comment.