diff --git a/client/src/components/admin/reports/index.jsx b/client/src/components/admin/reports/index.jsx index 3e0baeea5..7c1242f54 100644 --- a/client/src/components/admin/reports/index.jsx +++ b/client/src/components/admin/reports/index.jsx @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import Loading from '../donutChartLoading'; import DatePicker from 'react-datepicker'; +import { Box, Button, Table, TableHead, TableRow, TableCell, TableBody, Typography } from '@mui/material'; import 'react-datepicker/dist/react-datepicker.css'; import '../../../common/datepicker/index.scss'; import './index.scss'; @@ -26,6 +27,87 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered const [startTextDate, setStartTextDate] = useState(new Date().toLocaleDateString("en-US")); const [endTextDate, setEndTextDate] = useState(new Date().toLocaleDateString("en-US")); + const styles = { + adminTableReport: { + margin: '10px 0', + fontSize: '15px', + textAlign: 'center', + }, + statsSection: { + marginTop: '10px', + textAlign: 'right' + }, + tableHeader: { + fontSize: '15px', + fontWeight: 'bold', + backgroundColor: '#3d5a6c47', + margin: '20px 0 5px', + padding: '5px', + borderRadius: '7px 7px 0 0', + textAlign: 'center' + }, + adminTable: { + width: '100%', + marginTop: '10px', + borderCollapse: 'collapse', + border: 'none', + }, + tableCell: { + textAlign: 'center', + height: '30px', + border: 'none', + }, + lastRowCell: { + color: '#3D5A6C', + fontWeight: 'bold', + borderTop: '1px solid lightgray', + borderBottom: 'none', + textAlign: 'center', + height: '30px', + + }, + firstRowCell: { + color: '#3D5A6C', + fontWeight: 'bold', + borderBottom: 'none', + textAlign: 'center', + height: '30px', + + }, + filterButton: { + color: '#3D5A6C', + border: '1px solid lightgray', + borderRadius: '20px', + lineHeight: '1', + padding: '10px 20px', + margin: '0 auto', + transition: '.3s ease', + maxWidth: '120px', + minWidth: '120px', + height: 'auto', + fontFamily: "'Open Sans', sans-serif", + fontSize: '15px', + }, + calcButton: { + maxWidth: '150px', + minWidth: '150px', + }, + chartImage: { + maxWidth: '90px', + }, + timeDescription: { + fontSize: '13px', + textAlign: 'right', + marginTop: '10px', + }, + boldText: { + fontWeight: 'bold', + fontSize: '18px', + color: '#3D5A6C', + }, + + }; + prepareDataForReport( eventTypeStats, eventTypes, @@ -151,23 +233,19 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered } return ( -
Start
+End
+{header} | - ))} -||||||||
---|---|---|---|---|---|---|---|---|
{event.location} | -{event.totalVolunteers} | -{event.totalVolunteerHours} | -{event.totalVolunteerAvgHours} | -|||||
Total | - {totalForAllEvents.map((total, i) => ( -{total} | +
{header} | + + +|||
---|---|---|---|
{event.location} | -{event.totalVolunteers} | -{event.totalVolunteerHours} | -{event.totalVolunteerAvgHours} | -
Total | - {totalForHackNight.map((total, i) => ( -{total} | - ))} -