Skip to content

Commit

Permalink
using inline styling now
Browse files Browse the repository at this point in the history
  • Loading branch information
@nora-zajzon
nora-zajzon committed Sep 24, 2024
1 parent 609f4de commit fd060f4
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 86 deletions.
139 changes: 110 additions & 29 deletions client/src/components/admin/reports/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,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,
Expand Down Expand Up @@ -154,17 +235,17 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
return (
<Box className="table-report-wrap">
{!isLoading ? (
<Box className="admin-table-report">
<Box style={styles.adminTableReport}>
{isFilterButton && (
<Button className="filter-button" onClick={() => handleSetFilterBtn()}>
<Button style={styles.filterButton} onClick={() => handleSetFilterBtn()}>
Set Filter
</Button>
)}

{isDatepicker &&
<Box className="datepicker-section">
<Box className="datepicker-wrap">
<Typography className="datepicker-name">Start</Typography>
<Box>
<Box>
<Typography>Start</Typography>
<DatePicker
placeholderText='Start date range'
selected={startDate}
Expand All @@ -176,8 +257,8 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
/>
</Box>

<Box className="datepicker-wrap">
<Typography className="datepicker-name">End</Typography>
<Box>
<Typography>End</Typography>
<DatePicker
placeholderText='End data range'
selected={endDate}
Expand All @@ -189,43 +270,43 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
/>
</Box>

<Button variant="outlined" onClick={(event) => handleCalculateStatsBtn(event)}>
<Button variant="outlined" style = {styles.filterButton} onClick={(event) => handleCalculateStatsBtn(event)}>
Calculate Stats
</Button>
</Box>
}

<Box className="stats-section">
<Box style={styles.statsSection}>
<Typography variant="body1">
Stats calculated by: {!isFiltered ? 'all time' : `${startTextDate} - ${endTextDate}`}
</Typography>

<Box className="all-events-section">
<Typography variant="h6" className="bold-text">All Events By Event Type</Typography>
<Box>
<Typography variant="h6" style={styles.tableHeader}>All Events By Event Type</Typography>
</Box>
{isStatsByLocation ? (
<Table className="admin-table">
<Table style={styles.adminTable}>
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header}>{header}</TableCell>
<TableCell key={header}style={styles.firstRowCell}>{header}</TableCell>
))}
</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>
<TableCell style={styles.tableCell}>{event.location}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteers}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerHours}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
{totalForAllEvents && (
<TableRow>
<TableCell>Total</TableCell>
<TableCell style={styles.lastRowCell}>Total</TableCell>
{totalForAllEvents.map((total, i) => (
<TableCell key={`${headerGroups[i]}-events-total`}>{total}</TableCell>
<TableCell key={`${headerGroups[i]}-events-total`}style={styles.lastRowCell}>{total}</TableCell>
))}
</TableRow>
)}
Expand All @@ -235,32 +316,32 @@ const LocationTableReport = ({eventTypeStats, hackNightTypeStats, handleFiltered
<Typography>No data for calculation stats</Typography>
)}

<Box className="hacknight-only-section">
<Typography variant="h6" className="bold-text">HackNight Only</Typography>
<Box>
<Typography variant="h6" style={styles.tableHeader}>HackNight Only</Typography>
</Box>
{isStatsByHackNight ? (
<Table className="admin-table">
<Table style={styles.adminTable}>
<TableHead>
<TableRow>
{headerGroups.map((header) => (
<TableCell key={header}>{header}</TableCell>
<TableCell key={header} style={styles.firstRowCell}>{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>
<TableCell style={styles.tableCell}>{event.location}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteers}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerHours}</TableCell>
<TableCell style={styles.tableCell}>{event.totalVolunteerAvgHours}</TableCell>
</TableRow>
))}
{totalForHackNight && (
<TableRow>
<TableCell>Total</TableCell>
<TableCell style={styles.lastRowCell}>Total</TableCell>
{totalForHackNight.map((total, i) => (
<TableCell key={`${headerGroups[i]}-hack-total`}>{total}</TableCell>
<TableCell key={`${headerGroups[i]}-hack-total`} style={styles.lastRowCell}>{total}</TableCell>
))}
</TableRow>
)}
Expand Down
89 changes: 32 additions & 57 deletions client/src/components/admin/reports/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,70 @@
.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: transparent;
background-color: #3d5a6c47;
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 !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;
.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;
}

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




.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;
}

}

0 comments on commit fd060f4

Please sign in to comment.