Skip to content

Commit

Permalink
Changes to table styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alec-Watson
Alec-Watson committed Sep 29, 2024
1 parent 3ef41c7 commit 9eeb257
Showing 1 changed file with 61 additions and 45 deletions.
106 changes: 61 additions & 45 deletions CoVAR-app/src/app/(pages)/reports/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
'use client';
import React, { useEffect, useState } from 'react';
import { CircularProgress, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography, Button } from '@mui/material';
import { populateReportsTable, fetchExecReport, fetchTechReport } from '@/functions/requests'; // Assume fetchTechReport is a new function in your requests file
import { populateReportsTable, fetchExecReport, fetchTechReport } from '@/functions/requests';
import DownloadIcon from '@mui/icons-material/Download';
import { mainContentStyles } from '@/styles/evaluateStyle';
import {headingBoxStyles} from '../../../styles/organisationStyle';
import { useTheme } from '@mui/material/styles'; // Import useTheme

type Report = {
report_id: string;
created_at: string;
Expand All @@ -14,14 +15,15 @@ type Report = {
};

const ReportsPage = () => {
const [reports, setReports] = useState<Report[]>([]); // State to store reports data
const [loading, setLoading] = useState<boolean>(true); // State to handle loading
const [reports, setReports] = useState<Report[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const theme = useTheme();

useEffect(() => {
const fetchReports = async () => {
try {
const response = await populateReportsTable();
console.log('API Response.data:', response.reports); // Add this line to log the API response
console.log('API Response.data:', response.reports);
if (response.reports) {
setReports(response.reports);
}
Expand Down Expand Up @@ -56,23 +58,17 @@ const ReportsPage = () => {

const handleFetchExecReport = async (reportId: string) => {
try {
const blob = await fetchExecReport(reportId); // Fetch the PDF blob for executive report
const blob = await fetchExecReport(reportId);

// Create a URL for the blob
const url = window.URL.createObjectURL(new Blob([blob]));

// Create a link element
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `executive_report_${reportId}.pdf`); // Set the file name
link.setAttribute('download', `executive_report_${reportId}.pdf`);

// Append the link to the document body
document.body.appendChild(link);

// Programmatically click the link to trigger the download
link.click();

// Clean up by removing the link and revoking the object URL
link.parentNode?.removeChild(link);
window.URL.revokeObjectURL(url);

Expand All @@ -83,23 +79,17 @@ const ReportsPage = () => {

const handleFetchTechReport = async (reportId: string) => {
try {
const blob = await fetchTechReport(reportId); // Fetch the PDF blob for technical report
const blob = await fetchTechReport(reportId);

// Create a URL for the blob
const url = window.URL.createObjectURL(new Blob([blob]));

// Create a link element
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `technical_report_${reportId}.pdf`); // Set the file name
link.setAttribute('download', `technical_report_${reportId}.pdf`);

// Append the link to the document body
document.body.appendChild(link);

// Programmatically click the link to trigger the download
link.click();

// Clean up by removing the link and revoking the object URL
link.parentNode?.removeChild(link);
window.URL.revokeObjectURL(url);

Expand All @@ -108,48 +98,75 @@ const ReportsPage = () => {
}
};

// Determine header background color based on light/dark mode
const tableHeaderBackground = theme.palette.mode === 'light' ? '#b0b0b0' : theme.palette.background.paper;

return (
<Box sx={{ ...mainContentStyles, padding: 3, width: '100%' }}>
<Typography variant="h4" sx={{ marginBottom: 2, color: 'text.primary' }}>
Reports
</Typography>
<TableContainer component={Paper} sx={{ ...mainContentStyles, border: '1px solid #ccc', maxHeight: '80vh', overflowY: 'auto' }}>
<Table stickyHeader>
<TableHead sx={{ backgroundColor: '#52796F' }}>
<TableRow>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Report ID</TableCell>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Date Created</TableCell>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Critical Count</TableCell>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Medium Count</TableCell>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Low Count</TableCell>
<TableCell sx={{ color: 'text.primary', fontWeight: 'bold' }}>Actions</TableCell>
<TableHead sx={{ backgroundColor: tableHeaderBackground }}> {/* Darker shade for light mode */}
<TableRow sx={{ backgroundColor: tableHeaderBackground }}>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'text.primary', fontWeight: 'bold' }}>Report ID</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'text.primary', fontWeight: 'bold' }}>Date Created</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'error.main', fontWeight: 'bold' }}>Critical Count</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'orange', fontWeight: 'bold' }}>Medium Count</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'success.main' , fontWeight: 'bold' }}>Low Count</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'text.primary', fontWeight: 'bold' }}>Technical Report</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: 'text.primary', fontWeight: 'bold' }}>Executive Report</TableCell>
</TableRow>
</TableHead>
<TableBody>
{reports.map((report) => (
<TableRow key={report.report_id}>
<TableCell>{report.report_id}</TableCell>
<TableCell>{new Date(report.created_at).toLocaleString()}</TableCell>
<TableCell>{report.criticalCount}</TableCell>
<TableCell>{report.mediumCount}</TableCell>
<TableCell>{report.lowCount}</TableCell>
<TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground}}>{report.report_id}</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground}}>{new Date(report.created_at).toLocaleString()}</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground, color: report.criticalCount > 0 ? 'error.main' : 'inherit' }}>
{report.criticalCount}
</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground,color: report.mediumCount > 0 ? 'orange' : 'inherit' }}>
{report.mediumCount}
</TableCell>
<TableCell sx={{ backgroundColor: tableHeaderBackground, color: report.lowCount > 0 ? 'success.main' : 'inherit' }}>
{report.lowCount}
</TableCell>

<TableCell sx={{ backgroundColor: tableHeaderBackground}}>
<Button
variant="contained"
color="primary"
onClick={() => handleFetchExecReport(report.report_id)}
startIcon={<DownloadIcon />} // Icon for Executive Report
color="secondary"
onClick={() => handleFetchTechReport(report.report_id)}
startIcon={<DownloadIcon />}
sx={{
color: '#fff',
fontWeight: 'bold',
'&:hover': {
backgroundColor: '#01579b',
},
}}
>
Download Executive Report
Download
</Button>
</TableCell>

<TableCell sx={{ backgroundColor: tableHeaderBackground}}>
<Button
variant="contained"
color="secondary"
onClick={() => handleFetchTechReport(report.report_id)}
startIcon={<DownloadIcon />} // Icon for Technical Report
sx={{ marginLeft: 2 }}
color="primary"
onClick={() => handleFetchExecReport(report.report_id)}
startIcon={<DownloadIcon />}
sx={{
color: '#fff',
fontWeight: 'bold',
'&:hover': {
backgroundColor: '#01579b',
},
}}
>
Download Technical Report
Download
</Button>
</TableCell>
</TableRow>
Expand All @@ -159,7 +176,6 @@ const ReportsPage = () => {
</TableContainer>
</Box>
);

};

export default ReportsPage;

0 comments on commit 9eeb257

Please sign in to comment.