Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replaced html with mui in index #1748

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 92 additions & 106 deletions client/src/components/admin/reports/index.jsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -151,23 +152,19 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
}

return (
<div className="table-report-wrap">
<Box className="table-report-wrap">
{!isLoading ? (
<div className="admin-table-report">
{isFilterButton &&
<button
className="filter-button"
type="button"
onClick={() => handleSetFilterBtn()}
>
<Box className="admin-table-report">
{isFilterButton && (
<Button className="filter-button" onClick={() => handleSetFilterBtn()}>
Set Filter
</button>
}
</Button>
)}

{isDatepicker &&
<div className="datepicker-section">
<div className="datepicker-wrap">
<p className="datepicker-name">Start</p>
<Box className="datepicker-section">
<Box className="datepicker-wrap">
<Typography className="datepicker-name">Start</Typography>
<DatePicker
placeholderText='Start date range'
selected={startDate}
Expand All @@ -177,10 +174,10 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
endDate={endDate}
maxDate={endDate}
/>
</div>
</Box>

<div className="datepicker-wrap">
<p className="datepicker-name">End</p>
<Box className="datepicker-wrap">
<Typography className="datepicker-name">End</Typography>
<DatePicker
placeholderText='End data range'
selected={endDate}
Expand All @@ -190,107 +187,96 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
endDate={endDate}
maxDate={new Date()}
/>
</div>
</Box>

<button
className="filter-button calc-button"
type="button"
onClick={(event) => handleCalculateStatsBtn(event)}
>
<Button variant="outlined" onClick={(event) => handleCalculateStatsBtn(event)}>
Calculate Stats
</button>
</div>
</Button>
</Box>
}

<div className="stats-section">
<div className="time-description">
<span>Stats calculated by: </span>
{!isFiltered ? (
<span>all time</span>
) : (
<span>
<span>{startTextDate}</span>
<span> - </span>
<span>{endTextDate}</span>
</span>
)}
</div>
<Box className="stats-section">
<Typography variant="body1">
Stats calculated by: {!isFiltered ? 'all time' : `${startTextDate} - ${endTextDate}`}
</Typography>

<div className="table-header m-t-small">All Events By Event Type</div>
<Box className="all-events-section">
<Typography variant="h6" className="bold-text">All Events By Event Type</Typography>
</Box>
{isStatsByLocation ? (
<table className="admin-table">
<thead>
<tr>
{headerGroups.map(header => (
<th key={header}>{header}</th>
))}
</tr>
</thead>

<tbody>
{dataForAllEventsReport.map((event) => (
<tr key={`events-${event.location}`}>
<td key={`${event.location + event.id}`}>{event.location}</td>
<td key={`v-${event.totalVolunteers + event.id}`}>{event.totalVolunteers}</td>
<td key={`h-${event.totalVolunteerHours + event.id}`}>{event.totalVolunteerHours}</td>
<td key={`ha-${event.totalVolunteerAvgHours + event.id}`}>{event.totalVolunteerAvgHours}</td>
</tr>
))}

{totalForAllEvents &&
<tr>
<td key={`events-total`}>Total</td>
{totalForAllEvents.map((total, i) => (
<td key={`${headerGroups[i]}-events-total`}>{total}</td>
<Table className="admin-table">
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header}>{header}</TableCell>
))}
</tr>
}
</tbody>
</table>
) : (
<div>No data for calculation stats</div>
)}


<div className="table-header">HackNight Only</div>
{isStatsByHackNight ? (
<table className="admin-table">
<thead>
<tr>
{headerGroups.map(header => (
<th key={header}>{header}</th>
</TableRow>
</TableHead>
<TableBody>
{dataForAllEventsReport.map((event) => (
<TableRow key={`events-${event.location}`}>
<TableCell>{event.location}</TableCell>
<TableCell>{event.totalVolunteers}</TableCell>
<TableCell>{event.totalVolunteerHours}</TableCell>
<TableCell>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
</tr>
</thead>

<tbody>
{isStatsByHackNight && dataForHackNightReport.map((event) => (
<tr key={`hack-night-${event.location}`}>
<td key={`${event.location + event.id}`}>{event.location}</td>
<td key={`tv-${event.totalVolunteers + event.id}`}>{event.totalVolunteers}</td>
<td key={`th-${event.totalVolunteerHours + event.id}`}>{event.totalVolunteerHours}</td>
<td key={`ah-${event.totalVolunteerAvgHours + event.id}`}>{event.totalVolunteerAvgHours}</td>
</tr>
))}

{totalForHackNight &&
<tr>
<td key={`hack-night-total`}>Total</td>
{totalForHackNight.map((total, i) => (
<td key={`${headerGroups[i]}-hack-total`}>{total}</td>
))}
</tr>
}
</tbody>
</table>
{totalForAllEvents && (
<TableRow>
<TableCell>Total</TableCell>
{totalForAllEvents.map((total, i) => (
<TableCell key={`${headerGroups[i]}-events-total`}>{total}</TableCell>
))}
</TableRow>
)}
</TableBody>
</Table>
) : (
<div>No data for calculation stats</div>
<Typography>No data for calculation stats</Typography>
)}
</div>
</div>
) : <Loading /> }
</div>

<Box className="hacknight-only-section">
<Typography variant="h6" className="bold-text">HackNight Only</Typography>
</Box>
{isStatsByHackNight ? (
<Table className="admin-table">
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header}>{header}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{dataForHackNightReport.map((event) => (
<TableRow key={`hack-night-${event.location}`}>
<TableCell>{event.location}</TableCell>
<TableCell>{event.totalVolunteers}</TableCell>
<TableCell>{event.totalVolunteerHours}</TableCell>
<TableCell>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
{totalForHackNight && (
<TableRow>
<TableCell>Total</TableCell>
{totalForHackNight.map((total, i) => (
<TableCell key={`${headerGroups[i]}-hack-total`}>{total}</TableCell>
))}
</TableRow>
)}
</TableBody>
</Table>
) : (
<Typography>No data for calculation stats</Typography>
)}
</Box>
</Box>
) : (
<Loading />
)}
</Box>
);
};

export default LocationTableReport;

87 changes: 56 additions & 31 deletions client/src/components/admin/reports/index.scss
Original file line number Diff line number Diff line change
@@ -1,70 +1,95 @@
.admin-table-report{
.admin-table-report {
margin: 10px 0;
font-size: 15px;
text-align: center;

.MuiTableCell-root {
font-size: 15px !important;
}
}

.stats-section{
.stats-section {
margin-top: 10px;
}

.table-header{
.table-header {
font-size: 15px;
font-weight: bold;
background-color: #3d5a6c47;
background-color: transparent;
margin: 20px 0 5px;
padding: 5px;
border-radius: 7px 7px 0 0;
&.m-t-small{
margin-top: 10px;
}
}

.admin-table{
.admin-table {
width: 100%;
margin-top: 10px;
border-collapse: collapse;
th, td{

th, td {
text-align: center;
height: 30px;
}
tr:last-child{
td{

tr:last-child {
td {
color: #3D5A6C;
font-weight: bold;
border-top: 1px solid lightgray;
}
}
}

.filter-button{
color: #3D5A6C;
border: 1px solid lightgray;
border-radius: 20px;
line-height: 1;
padding: 10px 20px;
margin: 0 auto;
transition: .3s ease;
max-width: 120px;
min-width: 120px;
height: auto;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
&.calc-button{
max-width: 150px;
min-width: 150px;
.filter-button {
color: #3D5A6C !important;
border: 1px solid lightgray !important;
border-radius: 20px !important;
line-height: 1 !important;
padding: 10px 20px !important;
margin: 0 auto !important;
transition: 0.3s ease !important;
max-width: 120px !important;
min-width: 120px !important;
height: auto !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 15px !important;

&.calc-button {
max-width: 150px !important;
min-width: 150px !important;
}
&:hover{
background-color: #3d5a6c47;

&:hover {
background-color: #3d5a6c47 !important;
}
}

.dashboard-chart-container img{



.dashboard-chart-container img {
max-width: 90px;
}

.time-description{
.time-description {
font-size: 13px;
text-align: right;
margin-top: 10px;
}

.all-events-section, .hacknight-only-section {
margin-top: 10px;
background-color: #a2aab0;
padding: 10px;
border-radius: 7px;
font-weight: bold;
}

.table-header {
background-color: #f5f5f5;
}

.bold-text {
font-weight: bold !important;
}

Loading