Develop

CoVAR-app/src/app/(pages)/dashboard/components/reportsList.tsx

@@ -18,11 +18,7 @@ const severityColors: { [key: string]: { border: string; background: string } }
 
 const ReportsList: React.FC<ReportsListProps> = ({ reports, selectedSeverity, handleSeverityChange }) => {
     return (
-        <Paper sx={{ maxHeight: '400px', overflowY: 'auto', margin: '16px 0' }}>
-            <Box sx={{ padding: '16px' }}>
-                <Typography variant="h6" gutterBottom>
-                    Filter by Severity
-                </Typography>
+        <Box sx={{ maxHeight: '400px', overflowY: 'auto', margin: '16px 0', width : '100%', overflowX : 'hidden', padding : '10px' }}>
                 <RadioGroup
                     row
                     value={selectedSeverity}
@@ -43,7 +39,7 @@ const ReportsList: React.FC<ReportsListProps> = ({ reports, selectedSeverity, ha
                         label="All"
                     />
                 </RadioGroup>
-            </Box>
+
             {reports.length === 0 ? (
                 <Typography variant="body1" sx={{ padding: '16px', textAlign: 'center' }}>
                     No reports
@@ -68,7 +64,7 @@ const ReportsList: React.FC<ReportsListProps> = ({ reports, selectedSeverity, ha
                     ))}
                 </List>
             )}
-        </Paper>
+        </Box>
     );
 };
 

CoVAR-app/src/app/(pages)/dashboard/components/topVulnerabilities.tsx

@@ -2,16 +2,15 @@
 import React from 'react';
 import { Box, Typography, Paper, List, ListItem, ListItemText } from '@mui/material';
 import { VulnerabilityReport } from '../page';
+import { ResponsiveContainer } from 'recharts';
 
 interface TopVulnerabilitiesProps {
     vulnerabilities: VulnerabilityReport[];
 }
 
 const TopVulnerabilities: React.FC<TopVulnerabilitiesProps> = ({ vulnerabilities }) => {
     return (
-        <Paper>
-            <Box p={2} textAlign="center">
-                <Typography variant="h6">Top Vulnerabilities</Typography>
+        <ResponsiveContainer width="100%" height={400}>
                 <List>
                     {vulnerabilities.map((vulnerability, index) => (
                         <ListItem key={index}>
@@ -22,8 +21,8 @@ const TopVulnerabilities: React.FC<TopVulnerabilitiesProps> = ({ vulnerabilities
                         </ListItem>
                     ))}
                 </List>
-            </Box>
-        </Paper>
+        </ResponsiveContainer>
+
     );
 };
 

CoVAR-app/src/app/(pages)/dashboard/page.tsx

@@ -128,14 +128,20 @@ const Dashboard: React.FC = () => {
                         </Paper>
                     </Grid>
                     <Grid item xs={12} md={6}>
-                            <TopVulnerabilities vulnerabilities={topVulnerabilities} />
+                        <Paper sx={chartContainerStyles}>
+                            <Typography variant="h6">Top Vulnerabilities</Typography>
+                            <TopVulnerabilities vulnerabilities={topVulnerabilities}></TopVulnerabilities>
+                        </Paper>
                     </Grid>
                     <Grid item xs={12} md={6}>
+                        <Paper sx={chartContainerStyles}>
+                            <Typography variant="h6">Filter by Severity</Typography>
                             <ReportsList
                                 reports={filteredReports}
                                 selectedSeverity={selectedSeverity}
                                 handleSeverityChange={handleSeverityChange}
                             />
+                        </Paper>
                     </Grid>
                 </Grid>
             )}

CoVAR-app/src/app/(pages)/evaluate/components/reportPreview.tsx

@@ -22,10 +22,10 @@ const styles = {
 
 
 const ReportCard = ({ report, index }: { report: any[], index: number }) => {
- 
+
   return (
 
-    <Box sx={{ ...mainContentStyles }}>
+    <Box sx={{ ...mainContentStyles, overflow: 'hidden' }}>
       {report.map((item, idx) => (
         <Box key={idx} sx={{ marginTop: '10px' }}>
           <Typography variant="h6" sx={{ ...styles.header }}>
@@ -69,7 +69,7 @@ const ReportPreview = ({ reports, reportIds, client }: { reports: any[][], repor
   if (!reports || reports.length === 0) {
     return <Typography>No reports to display</Typography>;
   }
-  
+
   // const generateReport = async () => {
   //   try {
   //     const token = localStorage.getItem('accessToken');

CoVAR-app/src/app/(pages)/evaluate/conflicts/[name]/page.tsx

@@ -96,7 +96,7 @@ const UserConflicts = () => {
     const [snackbarOpen, setSnackbarOpen] = useState(false);
 
     const fetchUploadIDsForReport = async () => {
-        
+
         try {
             if (name && type === 'client') {
                 const data = await fetchUploadsClient(name);
@@ -189,7 +189,7 @@ const UserConflicts = () => {
         }
 
         setFinalReport(updatedReport);
-        console.log('Final Report:', updatedReport);
+        // console.log('Final Report:', updatedReport);
     };
 
     const handleCloseSnackbar = () => {
@@ -213,18 +213,18 @@ const UserConflicts = () => {
 
     if (loading) {
         return (
-            <Box sx={{ 
+            <Box sx={{
                 ...mainContentStyles,
-                position: 'absolute', 
-                top: '50%', 
-                left: '57%', 
-                transform: 'translate(-50%, -50%)', 
-                display: 'flex', 
-                justifyContent: 'center', 
-                alignItems: 'center', 
+                position: 'absolute',
+                top: '50%',
+                left: '57%',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
                 width: '90%',
-                height: '100%', 
-                
+                height: '100%',
+
             }}>
                 <CircularProgress />
             </Box>

CoVAR-app/src/app/(pages)/evaluate/organization/[organization]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
-import { Box, Typography, Paper, Container, List, ListItem, ListItemText, Button, Grid } from '@mui/material';
-import { usePathname, useRouter } from 'next/navigation'; 
+import { Box, Typography, Paper, Container, List, ListItem, ListItemText, Button, Grid, Snackbar } from '@mui/material';
+import { usePathname, useRouter } from 'next/navigation';
 import { mainContentStyles } from '../../../../../styles/evaluateStyle';
 import FileUpload from '../../components/fileUpload';
 import { handleDownloadFile } from '../../../../../functions/requests';
@@ -31,6 +31,7 @@ const OrganizationEvaluation: React.FC = () => {
   const [uploads, setUploads] = useState<FileUpload[]>([]);
   const [reportIds, setReportIds] = useState<number[]>([]);
   const [reports, setReports] = useState<any[][]>([]);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
 
   useEffect(() => {
     const fetchInitialUploads = async () => {
@@ -41,9 +42,9 @@ const OrganizationEvaluation: React.FC = () => {
           const inReportIds = data.filter((upload: FileUpload) => upload.in_report).map((upload: FileUpload) => upload.upload_id);
           setReportIds(inReportIds);
         }
-      } catch (error:any) {
+      } catch (error: any) {
         //console.error('Error fetching uploads:', error);
-        if(error.response?.status === 403) {
+        if (error.response?.status === 403) {
           redirectToLogin();
         }
       }
@@ -75,9 +76,9 @@ const OrganizationEvaluation: React.FC = () => {
         const inReportIds = data.filter((upload: FileUpload) => upload.in_report).map((upload: FileUpload) => upload.upload_id);
         setReportIds(inReportIds);
       }
-    } catch (error:any) {
+    } catch (error: any) {
       //console.error('Error fetching uploads:', error);
-      if(error.response?.status === 403) {
+      if (error.response?.status === 403) {
         redirectToLogin();
       }
     }
@@ -88,9 +89,9 @@ const OrganizationEvaluation: React.FC = () => {
       await handleRemoveFile(upload_id);
       setUploads(uploads.filter(upload => upload.upload_id !== upload_id));
       setReportIds(reportIds.filter(id => id !== upload_id));
-    } catch (error:any) {
+    } catch (error: any) {
       //console.error('Error removing upload:', error);
-      if(error.response?.status === 403) {
+      if (error.response?.status === 403) {
         redirectToLogin();
       }
     }
@@ -102,15 +103,33 @@ const OrganizationEvaluation: React.FC = () => {
       if (reportIds.includes(upload_id)) {
         setReportIds(reportIds.filter(id => id !== upload_id));
       } else {
-        setReportIds([...reportIds, upload_id]);
+        if (reportIds.length < 2) {
+          setReportIds([...reportIds, upload_id]);
+        } else {
+          setSnackbarOpen(true);
+        }
       }
     } catch (error) {
       console.error('Error updating report status:', error);
     }
   };
-
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
   return (
     <Container maxWidth={false} sx={{ ...mainContentStyles, paddingTop: 8, width: '100vw' }}>
+      <Snackbar
+        sx={{
+          width: '100%',
+          position: 'absolute',
+        }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+        onClose={handleCloseSnackbar}
+        message="Cannot add more than 2 report IDs"
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+      </Snackbar>
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <Paper sx={{ padding: 4, textAlign: 'center', overflowY: 'auto', maxHeight: '80vh' }}>

CoVAR-app/src/app/(pages)/evaluate/user/[username]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
-import { Box, Typography, Paper, Container, List, ListItem, ListItemText, Button, Grid } from '@mui/material';
+import { Box, Typography, Paper, Container, List, ListItem, ListItemText, Button, Grid, Snackbar } from '@mui/material';
 import { usePathname } from 'next/navigation';
 import { mainContentStyles } from '../../../../../styles/evaluateStyle';
 import FileUpload from '../../components/fileUpload';
@@ -31,6 +31,7 @@ const UserEvaluation: React.FC = () => {
   const [uploads, setUploads] = useState<FileUpload[]>([]);
   const [reportIds, setReportIds] = useState<number[]>([]);
   const [reports, setReports] = useState<any[][]>([]);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
 
   useEffect(() => {
     const fetchInitialUploads = async () => {
@@ -102,16 +103,34 @@ const UserEvaluation: React.FC = () => {
       if (reportIds.includes(upload_id)) {
         setReportIds(reportIds.filter(id => id !== upload_id));
       } else {
-        setReportIds([...reportIds, upload_id]);
+        if (reportIds.length < 2) {
+          setReportIds([...reportIds, upload_id]);
+        } else {
+          setSnackbarOpen(true);
+        }
       }
     } catch (error) {
       console.error('Error updating report status:', error);
     }
   };
-
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
   return (
 
     <Container maxWidth={false} sx={{ ...mainContentStyles, paddingTop: 8, width: '100vw' }}>
+      <Snackbar
+        sx={{
+          width: '100%',
+          position: 'absolute',
+        }}
+        open={snackbarOpen}
+        autoHideDuration={1000}
+        onClose={handleCloseSnackbar}
+        message="Cannot add more than 2 report IDs"
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      >
+      </Snackbar>
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <Paper sx={{ padding: 4, textAlign: 'center', overflowY: 'auto', maxHeight: '80vh' }}>

CoVAR-app/src/app/(pages)/organisation/page.tsx

@@ -315,20 +315,20 @@ const Organisation = () => {
                             Create Organisation
                         </Button>
                         {createOrgErrorMessage && (
-                        <Typography
-                            variant="body2"
-                            color="error.main"
-                            sx={{ 
-                                display: 'inline-block',
-                                whiteSpace: 'nowrap',
-                                mb: 4,  
-                                textAlign: "center"
-                            }}
-                        >
-                            {createOrgErrorMessage}
-                        </Typography>
+                        <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', mb: 4 }}>
+                            <Typography
+                                variant="body2"
+                                color="error.main"
+                                sx={{ 
+                                    whiteSpace: 'nowrap',
+                                }}
+                            >
+                                {createOrgErrorMessage}
+                            </Typography>
+                        </Box>
                     )}
 
+
                     </CardContent>
                 </Card>
             </Box>