Skip to content

Commit

Permalink
reports page format
Browse files Browse the repository at this point in the history
  • Loading branch information
Su Yeon Lee authored and Su Yeon Lee committed Jul 1, 2024
1 parent 480844b commit 07401e5
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 79 deletions.
4 changes: 2 additions & 2 deletions client/src/NewDonation/NewDonationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,8 +286,8 @@ function NewDonationPage() {
};

return (
<Grid container sx={{ m: 3 }} spacing={2}>
<Grid item xs={12}>
<Grid container sx={{ m: 4}} spacing={2} direction="column">
<Grid item xs={12} sx={{ mb: 3 }}>
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
Register New Donation
</Typography>
Expand Down
155 changes: 80 additions & 75 deletions client/src/Reports/ReportsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,8 +217,15 @@ function ReportsPage() {
const generateReport = () => {
setErrorMessage(false);
const now = dayjs();
const lastFiscalYrReportData = getReportForDateRange(dayjs().startOf('year').subtract(1, 'year'), dayjs().startOf('year'));
const lastCalYrReportData = getReportForDateRange(dayjs().startOf('year').subtract(1, 'year'), dayjs().endOf('year').subtract(1, 'year'));
let fiscalYrStart;
const julyFirstCurrentYear = dayjs().month(6).date(1);
if (now.isBefore(julyFirstCurrentYear)) {
fiscalYrStart = julyFirstCurrentYear.subtract(1, 'year');
} else {
fiscalYrStart = julyFirstCurrentYear;
}
const lastCalYrReportData = getReportForDateRange(dayjs().startOf('year'), dayjs().endOf('year'));
const lastFiscalYrReportData = getReportForDateRange(fiscalYrStart, now);
const last90DaysReportData = getReportForDateRange(now.subtract(90, 'days'), now);
const last30DaysReportData = getReportForDateRange(now.subtract(30, 'days'), now);
const allReportData = getReportForDateRange(dayjs('1960-01-01'), now);
Expand Down Expand Up @@ -299,90 +306,88 @@ function ReportsPage() {

return (
<div>
<Grid container sx={{ m: 3 }} spacing={2}>
<Grid item xs={8}>
<Grid sx={{ m: 4 }} spacing={2}>
<Grid>
<Typography variant="h4" gutterBottom>
Report on {dayjs(report?.date_generated).format('MM/DD/YYYY')}
</Typography>
</Grid>
<Grid item xs={2}>
<Button
variant="contained"
color="primary"
onClick={handleConfirmationModalOpen}
>
Download / Share
</Button>
</Grid>
<Grid item xs={2}>
<Button
variant="contained"
color="inherit"
onClick={handlePastReportsModalOpen}
>
View Past Reports
</Button>
</Grid>
<Grid container direction="row" spacing={2}>
<Grid item>
<Button
variant="contained"
color="inherit"
onClick={handleLoadRecentReport}
>
View Recent Report
</Button>
</Grid>
{!viewingPastReport && (
<Grid container direction="row" spacing={2} alignItems="center" justifyContent="space-between">
<Grid item>
<Button
variant="contained"
color="primary"
onClick={() => generateReport()}
>
Generate New Report
</Button>
<Box display="flex" gap={2}>
{viewingPastReport && (
<Button
variant="contained"
color="inherit"
onClick={handleLoadRecentReport}
>
View Recent Report
</Button>
)}
{!viewingPastReport && (
<Button
variant="contained"
color="primary"
onClick={() => generateReport()}
>
Generate New Report
</Button>
)}
</Box>
</Grid>
)}
</Grid>
<Grid item>
<Box display="flex" gap={2}>
<Button
variant="contained"
color="primary"
onClick={handleConfirmationModalOpen}
>
Download / Share
</Button>
<Button
variant="contained"
color="inherit"
onClick={handlePastReportsModalOpen}
>
View Past Reports
</Button>
</Box>
</Grid>
</Grid>
{errorMessage && (
<Typography sx={{ color: 'red', ml: 2 }} variant="body2">
Error generating the report, please retry.
</Typography>
)}
<Grid item xs={12} sx={{ mb: 2 }}>
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleTimeInterval}
aria-label="time interval"
size="large"
>
<ToggleButton value="last_all" aria-label="allTime">
All Time
</ToggleButton>
<ToggleButton value="last_fiscal" aria-label="lastFiscalYr">
Last Fiscal Yr
</ToggleButton>
<ToggleButton value="last_calendar" aria-label="lastCalYr">
Last Cal Yr
</ToggleButton>
<ToggleButton value="last_90" aria-label="last90Days">
Last 90 Days
</ToggleButton>
<ToggleButton value="last_30" aria-label="last30Days">
Last 30 Days
</ToggleButton>
</ToggleButtonGroup>
</Grid>

<BasicTable alignment={alignment} report={report} prevReport={prevReport} />
<Grid sx={{ mt: 2, mb: 2 }}>
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleTimeInterval}
aria-label="time interval"
size="large"
>
<ToggleButton value="last_all" aria-label="allTime">
All Time
</ToggleButton>
<ToggleButton value="last_fiscal" aria-label="lastFiscalYr">
Fiscal Yr
</ToggleButton>
<ToggleButton value="last_calendar" aria-label="lastCalYr">
Cal Yr
</ToggleButton>
<ToggleButton value="last_90" aria-label="last90Days">
Last 90 Days
</ToggleButton>
<ToggleButton value="last_30" aria-label="last30Days">
Last 30 Days
</ToggleButton>
</ToggleButtonGroup>
</Grid>

{/* <Grid item xs={12}>
</Grid> */}
<BasicTable alignment={alignment} report={report} prevReport={prevReport} />

<Grid item xs={12}>
<Grid>
<Stack direction="row" spacing={2}>
<Box>
<Typography variant="h6" align="center">
Expand All @@ -398,7 +403,7 @@ function ReportsPage() {
],
},
]}
width={400}
width={300}
height={200}
/>
</Box>
Expand All @@ -413,7 +418,7 @@ function ReportsPage() {
data: [2, 5.5, 2, 8.5, 1.5, 5],
},
]}
width={500}
width={300}
height={300}
/>
</Box>
Expand Down
3 changes: 1 addition & 2 deletions client/src/components/AddEditGroupsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ const updateGroupDonorsAPI = (selectedGroup: Group, donorIds: string[]) => {
};

export default function AddEditGroupsModal({ open, onClose }: any) {
// const [open, setOpen] = React.useState(false);
const [groups, setGroups] = useState<Group[]>([]);
const [selectedGroup, setSelectedGroup] = useState<Group | null>(null);
const [selectedDonors, setSelectedDonors] = useState<Donor[]>([]);
Expand Down Expand Up @@ -106,6 +105,7 @@ export default function AddEditGroupsModal({ open, onClose }: any) {
useEffect(() => {
const data = group?.data || [];
setGroups(data);
console.log(data);
}, [group]);

const handleAddDonor = () => {
Expand All @@ -126,7 +126,6 @@ export default function AddEditGroupsModal({ open, onClose }: any) {

const handleSubmit = () => {
if (selectedGroup) {
// console.log(selectedGroup);
const donorIds = selectedDonors.map((donor) => donor._id);

updateGroupDonorsAPI(selectedGroup, donorIds) // update group
Expand Down

0 comments on commit 07401e5

Please sign in to comment.