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.

Sign up for GitHub

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

Jump to bottom

replaced html with mui in index #1748

Closed
wants to merge 5 commits into from
Closed

replaced html with mui in index #1748

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c76798f
replaced html with mui
nora-zajzon Sep 17, 2024
5617e41
Added User access level change code
ntrehan Sep 23, 2024
96ae0b3
Removed .github/workflows/New-issue-create-card.yml from the project
Sep 19, 2024
609f4de
Create CODE_OF_CONDUCT.md
JackHaeg Aug 26, 2024
fd060f4
using inline styling now
nora-zajzon Sep 24, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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