Built Detail, SideNav, NavItem, Result, Question components. Amended …

…Dashboard. Added route for detailed view. Built dummy data. Added home link to header.

frontend/src/App.tsx

@@ -39,6 +39,7 @@ import { Layout, RouteGuard } from 'components';
 import './styles.scss';
 import { Authenticator } from '@aws-amplify/ui-react';
 import { RSCDashboard } from 'components/ReadySetCyber/RSCDashboard';
+import { RSCDetail } from 'components/ReadySetCyber/RSCDetail';
 
 API.configure({
   endpoints: [
@@ -210,11 +211,18 @@ const App: React.FC = () => (
                     permissions={['regionalAdmin']}
                   />
                   <RouteGuard
+                    exact
                     path="/readysetcyber"
                     component={RSCDashboard}
                     permissions={['standard', 'globalView', 'regionalAdmin']}
                     unauth={RSCDashboard}
                   />
+                  <RouteGuard
+                    path="/readysetcyber/result/:id"
+                    component={RSCDetail}
+                    permissions={['standard', 'globalView', 'regionalAdmin']}
+                    unauth={RSCDetail}
+                  />
                 </Switch>
               </Layout>
             </SearchProvider>

frontend/src/components/Layout.tsx

@@ -49,7 +49,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
           countdown={60} // 60 second timer for user inactivity timeout
         />
         <GovBanner />
-        {pathname !== '/readysetcyber' ? (
+        {!pathname.includes('/readysetcyber') ? (
           <>
             <Header />
             {pathname === '/inventory' ? (

frontend/src/components/ReadySetCyber/RSCDashboard.tsx

@@ -1,10 +1,55 @@
 import React from 'react';
-import { Card } from '@mui/material';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { RSCSideNav } from './RSCSideNav';
+import { RSCResult } from './RSCResult';
+
+import { dummyResults } from './dummyData';
+
+const results = dummyResults;
 
 export const RSCDashboard: React.FC = () => {
   return (
-    <Card>
-      <h1>Ready Set Cyber Dashboard</h1>
-    </Card>
+    <Box sx={{ flexGrow: 1, padding: 2 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          <RSCSideNav />
+        </Grid>
+        <Grid item xs={8}>
+          <Box sx={{ flexGrow: 1, padding: 2, backgroundColor: 'white' }}>
+            <Stack>
+              <h2>Assessment Results</h2>
+              <Divider />
+              <h3>Thank you for completing the ReadySetCyber questionnaire!</h3>
+              <p>
+                Below, you’ll find a summary of all completed ReadySetCyber
+                questionnaires. Selecting a result will allow you to review
+                areas where you can improve your organization’s cybersecurity
+                posture, along with recommended resources to help address those
+                areas. To take further action, contact your regional CISA
+                Cybersecurity Advisor (CSA) for personalized support. You can
+                also explore Crossfeed, CISA’s Attack Surface Management
+                platform, for free vulnerability scanning services to kickstart
+                or enhance your cybersecurity measures.
+              </p>
+              {results.map((result) => (
+                <Stack key={result.id} spacing={2}>
+                  <RSCResult
+                    id={result.id}
+                    type={result.type}
+                    date={result.date}
+                    categories={result.categories}
+                    questions={result.questions}
+                  />
+                  <Divider />
+                </Stack>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
   );
 };

frontend/src/components/ReadySetCyber/RSCDetail.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import { RSCSideNav } from './RSCSideNav';
+import { RSCQuestion } from './RSCQuestion';
+import { dummyResults } from './dummyData';
+import { Typography } from '@mui/material';
+
+export const RSCDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const { questions } = dummyResults.find(
+    (result) => result.id === parseInt(id)
+  ) || { questions: [] };
+  return (
+    <Box sx={{ flexGrow: 1, padding: 2 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          <h2>Ready Set Cyber Side Nav</h2>
+          <RSCSideNav />
+        </Grid>
+        <Grid item xs={8}>
+          <Box sx={{ flexGrow: 1, padding: 2, backgroundColor: 'white' }}>
+            <Stack>
+              <Stack
+                direction="row"
+                justifyContent={'space-between'}
+                alignItems="center"
+                padding={2}
+              >
+                <Typography variant="h5" component="div">
+                  Summary and Resources
+                </Typography>
+                <Button variant="contained" color="success">
+                  Download PDF
+                </Button>
+              </Stack>
+              <Divider />
+              <h3>Thank you for completing the ReadySetCyber questionnaire!</h3>
+              <p>
+                Below, you’ll find a full summary of your completed
+                ReadySetCyber questionnaire. Please note the areas where you can
+                improve your organization’s cybersecurity posture, along with
+                the recommended resources to help you address these areas. To
+                take further action, contact your regional CISA Cybersecurity
+                Advisor (CSA) for personalized support. You can also explore
+                Crossfeed, CISA’s Attack Surface Management platform, for free
+                vulnerability scanning services to kickstart or enhance your
+                cybersecurity measures.
+              </p>
+              {questions.map((question) => (
+                <RSCQuestion key={question.id} question={question} />
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

frontend/src/components/ReadySetCyber/RSCHeader.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 import { AppBar } from '@mui/material';
 import { Toolbar } from '@mui/material';
 import { Typography } from '@mui/material';
+import { useHistory } from 'react-router-dom';
 
 export const RSCHeader: React.FC = () => {
+  const history = useHistory();
+  const handleClick = () => {
+    history.push('/readysetcyber');
+  };
   return (
     <AppBar position="static">
       <Toolbar>
-        <Typography variant="h6">Ready Set Cyber</Typography>
+        <Typography variant="h6" onClick={handleClick}>
+          Ready Set Cyber
+        </Typography>
       </Toolbar>
     </AppBar>
   );
 };
-// Path: frontend/src/components/ReadySetCyber/ReadySetCyber.tsx

frontend/src/components/ReadySetCyber/RSCNavItem.tsx

@@ -0,0 +1,15 @@
+import { Divider, ListItem } from '@mui/material';
+import React from 'react';
+
+interface Props {
+  name: string;
+}
+export const RSCNavItem: React.FC<Props> = (props) => {
+  const { name } = props;
+  return (
+    <>
+      <ListItem>{name}</ListItem>
+      <Divider component="li" />
+    </>
+  );
+};

frontend/src/components/ReadySetCyber/RSCQuestion.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+
+interface Props {
+  question: {
+    id: number;
+    title: string;
+    answers: {
+      id: number;
+      name: string;
+      selected: boolean;
+    }[];
+  };
+}
+
+export const RSCQuestion: React.FC<Props> = (props) => {
+  const question = props.question;
+  const answers = props.question.answers;
+  return (
+    <div>
+      <Box sx={{ width: '100%', bgcolor: 'grey', padding: 2 }}>
+        <Typography variant="h6" gutterBottom component="div">
+          Question {question.id}
+        </Typography>
+        <Typography variant="h6" gutterBottom component="div">
+          {question.title}
+        </Typography>
+        <Stack direction="row" spacing={2} padding={2}>
+          {answers.map((answer) => (
+            <Button key={answer.id} variant="contained" color="primary">
+              {answer.name}{' '}
+            </Button>
+          ))}
+        </Stack>
+        <Box sx={{ width: '100%', bgcolor: 'background.paper', padding: 2 }}>
+          <h3>Recommended Resources</h3>
+          <h4>Resource Type</h4>
+          <h5>Resource Title</h5>
+          <p>Resource Description</p>
+        </Box>
+      </Box>
+    </div>
+  );
+};

frontend/src/components/ReadySetCyber/RSCResult.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import { Typography } from '@mui/material';
+import { useHistory } from 'react-router-dom';
+
+interface Props {
+  id: number;
+  type: string;
+  date: string;
+  categories: {
+    id: number;
+    name: string;
+  }[];
+  questions: {
+    id: number;
+    title: string;
+    answers: {
+      id: number;
+      name: string;
+      selected: boolean;
+    }[];
+  }[];
+}
+
+export const RSCResult: React.FC<Props> = (props) => {
+  const { id, type, date } = props;
+  const history = useHistory();
+  const handleClick = () => {
+    history.push(`/readysetcyber/result/${id}`);
+  };
+  return (
+    <Card onClick={handleClick}>
+      <Box sx={{ width: '100%', bgcolor: 'background.paper', p: 2 }}>
+        <Stack
+          direction="row"
+          justifyContent={'space-between'}
+          alignItems="center"
+        >
+          <Typography variant="h5" component="div">
+            {type}
+          </Typography>
+          <Typography variant="h5">{date}</Typography>
+        </Stack>
+      </Box>
+    </Card>
+  );
+};

frontend/src/components/ReadySetCyber/RSCSideNav.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Divider from '@mui/material/Divider';
+import { RSCNavItem } from './RSCNavItem';
+import { dummyResults } from './dummyData';
+
+export const RSCSideNav: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  const categories =
+    dummyResults.find((result) => result.id === parseInt(id))?.categories || [];
+
+  return (
+    <div>
+      <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+        <List>
+          <ListItem>Welcome User</ListItem>
+          <Divider component="li" />
+          {categories.map((category) => (
+            <RSCNavItem key={category.id} name={category.name} />
+          ))}
+          <ListItem>Take Questionnaire Again</ListItem>
+          <Divider component="li" />
+          <ListItem>Logout</ListItem>
+        </List>
+      </Box>
+    </div>
+  );
+};