feat: added the aggregation scores of assigned systems.

src/types.ts

@@ -74,7 +74,7 @@ export type RequestOptions = {
   redirect: 'follow' | 'error' | 'manual'
 }
 export type FismaSystemType = {
-  fismasystemid: string | number
+  fismasystemid: number
   fismauid: string | number
   fismaacronym: string
   fismaname: string
@@ -124,6 +124,11 @@ export type SystemDetailsModalProps = {
   onClose: () => void
   system: FismaSystemType | null
 }
+export type ScoreData = {
+  datacallid: number
+  fismasystemid: number
+  systemscore: number
+}
 
 export type ThemeColor =
   | 'primary'

src/views/FismaTable/FismaTable.tsx

@@ -8,8 +8,7 @@ import TableHead from '@mui/material/TableHead'
 import TablePagination from '@mui/material/TablePagination'
 import TableRow from '@mui/material/TableRow'
 import { FismaSystemType } from '@/types'
-import { useEffect, useState } from 'react'
-import axiosInstance from '@/axiosConfig'
+import { useState } from 'react'
 import { TableSortLabel } from '@mui/material'
 import QuestionnareModal from '../QuestionnareModal/QuestionnareModal'
 import Link from '@mui/material/Link'
@@ -146,9 +145,11 @@ function EnhancedTableHead(props: EnhancedTableProps) {
   )
 }
 
-export default function FismaTable() {
-  const [fismaSystems, setFismaSystems] = useState<FismaSystemType[]>([])
-  const [loading, setLoading] = useState<boolean>(true)
+export default function FismaTable({
+  fismaSystems,
+}: {
+  fismaSystems: FismaSystemType[]
+}) {
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(10)
   const [order, setOrder] = useState<Order>('asc')
@@ -185,28 +186,6 @@ export default function FismaTable() {
     setRowsPerPage(+event.target.value)
     setPage(0)
   }
-
-  useEffect(() => {
-    const fetchFismaSystems = async () => {
-      try {
-        const fismaSystems = await axiosInstance.get('/fismasystems')
-        if (fismaSystems.status !== 200) {
-          throw new Error('Failed to fetch data. Status was not 200')
-        }
-        setFismaSystems(fismaSystems.data.data)
-      } catch (error) {
-        console.log(error)
-      } finally {
-        setLoading(false)
-      }
-    }
-    fetchFismaSystems()
-  }, [])
-
-  if (loading) {
-    return <p>Loading ...</p>
-  }
-
   return (
     <Paper style={{ height: 500, width: '100%', marginBottom: '5vh' }}>
       <TableContainer sx={{ maxHeight: 440 }}>

src/views/Home/Home.tsx

@@ -1,14 +1,74 @@
 import FismaTable from '../FismaTable/FismaTable'
+import StatisticsBlocks from '../StatisticBlocks/StatisticsBlocks'
+import { useState, useEffect, useRef } from 'react'
+import axiosInstance from '@/axiosConfig'
+import { FismaSystemType, ScoreData } from '@/types'
+import CircularProgress from '@mui/material/CircularProgress'
+import { Box } from '@mui/material'
 /**
  * Component that renders the contents of the Home view.
  * @returns {JSX.Element} Component that renders the home contents.
  */
 
 export default function HomePageContainer() {
+  const [loading, setLoading] = useState<boolean>(true)
+  const [fismaSystems, setFismaSystems] = useState<FismaSystemType[]>([])
+  const hasRedirected = useRef(false)
+  const [scores, setScores] = useState<ScoreData[]>([])
+
+  useEffect(() => {
+    const fetchFismaSystems = async () => {
+      try {
+        const fismaSystems = await axiosInstance.get('/fismasystems')
+        if (fismaSystems.status !== 200 && !hasRedirected.current) {
+          hasRedirected.current = true
+          window.location.href = '/login'
+        }
+        setFismaSystems(fismaSystems.data.data)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchFismaSystems()
+  }, [])
+  useEffect(() => {
+    const fetchScores = async () => {
+      try {
+        const scores = await axiosInstance.get('/scores/aggregate')
+        if (scores.status !== 200 && !hasRedirected.current) {
+          hasRedirected.current = true
+          window.location.href = '/login'
+        }
+        setScores(scores.data.data)
+      } catch (error) {
+        console.log(error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchScores()
+  }, [fismaSystems])
+  if (loading) {
+    return (
+      <Box
+        flex={1}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <CircularProgress size={100} />
+      </Box>
+    )
+  }
   return (
     <>
       <div>
-        <FismaTable />
+        <StatisticsBlocks fismaSystems={fismaSystems} scores={scores} />
+        <FismaTable fismaSystems={fismaSystems} />
       </div>
     </>
   )

src/views/QuestionnareModal/QuestionnareModal.tsx

@@ -388,8 +388,15 @@ export default function QuestionnareModal({
               ))}
             </Box>
             {loadingQuestion ? (
-              <Box sx={{ display: 'flex' }}>
-                <CircularProgress />
+              <Box
+                flex={0.7}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <CircularProgress size={80} />
               </Box>
             ) : (
               <Box
@@ -423,7 +430,6 @@ export default function QuestionnareModal({
                 />
                 <Box
                   position="relative"
-                  // bottom="10px"
                   display="flex"
                   width="100%"
                   justifyContent={'space-between'}

src/views/StatisticBlocks/StatisticsBlocks.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react'
+import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
+import { Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { FismaSystemType, ScoreData } from '@/types'
+const StatisticsPaper = styled(Paper)(({ theme }) => ({
+  width: 120,
+  height: 120,
+  padding: theme.spacing(2),
+  ...theme.typography.body2,
+  textAlign: 'center',
+  overflowWrap: 'break-word',
+  elevation: 3,
+}))
+export default function StatisticsBlocks({
+  fismaSystems,
+  scores,
+}: {
+  fismaSystems: FismaSystemType[]
+  scores: ScoreData[]
+}) {
+  const [totalSystems, setTotalSystems] = useState<number>(0)
+  const [avgSystemScore, setAvgSystemScore] = useState<number>(0)
+  const [maxSystemAcronym, setMaxSystemAcronym] = useState<string>('')
+  const [maxSystemScore, setMaxSystemScore] = useState<number>(0)
+  const [minSystemScore, setMinSystemScore] = useState<number>(0)
+  const [minSystemAcronym, setMinSystemAcronym] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(true)
+  useEffect(() => {
+    if (scores.length > 0) {
+      const scoresMap = scores.reduce(
+        (acc, score) => {
+          acc[score.fismasystemid] = score.systemscore
+          return acc
+        },
+        {} as Record<number, number>
+      )
+      let maxScore: number = 0
+      let maxScoreSystem: string = ''
+      let minScore: number = Number.POSITIVE_INFINITY
+      let minScoreSystem: string = ''
+      let totalScores: number = 0
+      for (const system of fismaSystems) {
+        if (scoresMap[system.fismasystemid] > maxScore) {
+          maxScore = scoresMap[system.fismasystemid]
+          maxScoreSystem = system.fismaacronym
+        } else if (scoresMap[system.fismasystemid] < minScore) {
+          minScore = scoresMap[system.fismasystemid]
+          minScoreSystem = system.fismaacronym
+        }
+        if (scoresMap[system.fismasystemid]) {
+          totalScores += scoresMap[system.fismasystemid]
+        }
+      }
+      setTotalSystems(fismaSystems.length)
+      setAvgSystemScore(Number((totalScores / fismaSystems.length).toFixed(2)))
+      setMaxSystemScore(maxScore)
+      setMaxSystemAcronym(maxScoreSystem || '')
+      setMinSystemScore(minScore)
+      setMinSystemAcronym(minScoreSystem || '')
+    }
+    setLoading(false)
+  }, [scores, fismaSystems])
+  if (loading) {
+    return <p>Loading ...</p>
+  }
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-evenly',
+        '& > :not(style)': {
+          m: 1,
+          width: 270,
+          height: 128,
+          borderWidth: 2,
+        },
+      }}
+    >
+      <StatisticsPaper variant="outlined">
+        <Typography variant="h4" sx={{ color: '#004297', fontSize: '56px' }}>
+          {totalSystems}
+        </Typography>
+        <Typography
+          variant="h6"
+          sx={{ fontSize: '16px', overflowWrap: 'break-word' }}
+        >
+          Total Systems
+        </Typography>
+      </StatisticsPaper>
+      <StatisticsPaper variant="outlined">
+        <Typography variant="h4" sx={{ color: '#004297', fontSize: '56px' }}>
+          {avgSystemScore}
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{ fontSize: '16px', overflowWrap: 'break-word' }}
+        >
+          Average System Score
+        </Typography>
+      </StatisticsPaper>
+      <StatisticsPaper variant="outlined">
+        <Typography variant="h4" sx={{ color: '#128172', fontSize: '56px' }}>
+          {maxSystemScore}
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{ fontSize: '16px', overflowWrap: 'break-word' }}
+        >
+          Highest System Score: {maxSystemAcronym}
+        </Typography>
+      </StatisticsPaper>
+      <StatisticsPaper variant="outlined">
+        <Typography variant="h4" sx={{ color: '#960B91', fontSize: '56px' }}>
+          {minSystemScore}
+        </Typography>
+        <Typography variant="body1" sx={{ fontSize: '16px' }}>
+          Lowest System Score: {minSystemAcronym}
+        </Typography>
+      </StatisticsPaper>
+    </Box>
+  )
+}