#377 Competencies page should display previous reflections table

webapp/src/components/App.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import React, { useContext } from 'react';
 
-import CompetenciesPage from './CompetenciesPage';
+import CompetenciesView from './CompetenciesView';
 import DocPage from './DocPage';
 import Footer from './Footer';
 import MeetingPage from './MeetingPage';
@@ -10,6 +10,7 @@ import Navbar from './Navbar';
 import ReflectionsPage from './ReflectionsPage';
 import RequireAuth from './RequireAuth';
 import SessionContext from './SessionContext';
+import CompetenciesPage from './CompetenciesPage';
 
 const App = () => {
   const { isAuthenticated } = useContext(SessionContext);
@@ -42,6 +43,23 @@ const App = () => {
               </RequireAuth>
             }
           />
+          <Route
+            path="/reflections/competencies"
+            element={
+              <RequireAuth>
+                <CompetenciesView />
+              </RequireAuth>
+            }
+          />
+          {/* Placeholder for Categories route */}
+          {/* <Route
+            path="/questionnaires/categories"
+            element={
+              <RequireAuth>
+                <CategoriesPage />
+              </RequireAuth>
+            }
+          /> */}
           <Route
             path="/meetings/:id"
             element={

webapp/src/components/CompetenciesCategoriesTable.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@mui/material';
+import CompetenciesDetailTable from './CompetenciesDetailTable';
+import useApiData from '../helpers/useApiData';
+import { CompetenciesByCategory } from '../types/api';
+
+const CompetenciesCategoriesTable = () => {
+  const { data, isLoading, error } = useApiData<CompetenciesByCategory[]>({
+    deps: [],
+    path: `/competencies/categories`,
+    sendCredentials: true,
+  });
+  if (error) {
+    return <p>There was an error loading the competencies.</p>;
+  }
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table">
+        <TableHead>
+          <TableRow
+            sx={{
+              '& > *': {
+                fontWeight: 'bold !important',
+                textTransform: 'uppercase',
+              },
+            }}
+          >
+            <TableCell sx={{ width: '5%' }} />
+            <TableCell sx={{ width: '25%' }}>Category</TableCell>
+            <TableCell align="left">Summary</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {!isLoading &&
+            data.map(({ id, label, description, competencies }) => (
+              <CompetenciesDetailTable
+                key={id}
+                catgoryLabel={label}
+                categoryDescription={description}
+                competencies={competencies}
+              />
+            ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default CompetenciesCategoriesTable;

webapp/src/components/CompetenciesDetailTable.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  Box,
+  Collapse,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Rating,
+  Tooltip,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
+import CircleIcon from '@mui/icons-material/Circle';
+import { Competency, Reflection } from '../types/api';
+import useApiData from '../helpers/useApiData';
+import { formatDate } from '../helpers/dateTime';
+
+export interface IBackgroundColor {
+  [key: string]: string;
+}
+export const categoryBackgroundColor: IBackgroundColor = {
+  Functional: '#CAE2FA',
+  Strategic: '#ffe59a',
+  Operational: '#b6d7a8',
+  Behavioural: '#b4a7d5',
+  Organizational: '#F7B8D7',
+};
+
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
+    color: '#42a5f5',
+  },
+});
+
+interface IRatingValue {
+  [key: string]: number;
+}
+const ratingValue: IRatingValue = {
+  Aware: 1,
+  Novice: 2,
+  Intermediate: 3,
+  Advanced: 4,
+  Expert: 5,
+};
+
+interface DetailTableProps {
+  catgoryLabel: string;
+  categoryDescription: string;
+  competencies: Competency[];
+}
+
+const CompetenciesDetailTable = ({
+  catgoryLabel,
+  categoryDescription,
+  competencies,
+}: DetailTableProps) => {
+  const [open, setOpen] = React.useState(false);
+
+  const { data: reflections } = useApiData<Reflection[]>({
+    deps: [],
+    path: '/reflections',
+    sendCredentials: true,
+  });
+
+  return (
+    <>
+      <TableRow
+        sx={{
+          '& > *': { borderBottom: 'unset' },
+          backgroundColor: categoryBackgroundColor[catgoryLabel],
+        }}
+      >
+        <TableCell>
+          <IconButton
+            aria-label="expand row"
+            size="small"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+          </IconButton>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {catgoryLabel}
+        </TableCell>
+        <TableCell>{categoryDescription}</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ margin: 1 }}>
+              <Table size="small">
+                <TableHead>
+                  <TableRow
+                    sx={{
+                      '& > *': {
+                        fontWeight: 'bold !important',
+                        textTransform: 'uppercase',
+                      },
+                    }}
+                  >
+                    <TableCell component="th" scope="row" sx={{ width: '20%' }}>
+                      Name
+                    </TableCell>
+                    <TableCell>Definition</TableCell>
+                    {reflections &&
+                      reflections
+                        .filter(reflection =>
+                          reflection.responses.find(response =>
+                            competencies.find(
+                              competency =>
+                                competency.label ===
+                                response.option.prompt.label
+                            )
+                          )
+                        )
+                        .map(reflection => {
+                          const reflectionCreatedAtDate = formatDate(
+                            reflection.created_at
+                          );
+                          return (
+                            <TableCell key={reflection.id} align="center">
+                              {reflectionCreatedAtDate}
+                            </TableCell>
+                          );
+                        })}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {reflections &&
+                    competencies.map(competency => (
+                      <TableRow key={competency.id}>
+                        <TableCell>{competency.label}</TableCell>
+                        <TableCell>{competency.description}</TableCell>
+                        {reflections
+                          .filter(reflection =>
+                            reflection.responses.find(response =>
+                              competencies.find(
+                                competency =>
+                                  competency.label ===
+                                  response.option.prompt.label
+                              )
+                            )
+                          )
+                          .map(reflection => {
+                            const response = reflection.responses.find(
+                              response =>
+                                response.option.prompt.label ===
+                                competency.label
+                            );
+                            if (response) {
+                              return (
+                                <Tooltip
+                                  key={response.id}
+                                  title={response.option.label}
+                                  placement="top"
+                                  arrow
+                                >
+                                  <TableCell align="center">
+                                    <StyledRating
+                                      value={ratingValue[response.option.label]}
+                                      readOnly
+                                      icon={<CircleIcon />}
+                                      emptyIcon={<CircleOutlinedIcon />}
+                                    />
+                                  </TableCell>
+                                </Tooltip>
+                              );
+                            } else {
+                              return (
+                                <TableCell key={reflection.id}></TableCell>
+                              );
+                            }
+                          })}
+                      </TableRow>
+                    ))}
+                </TableBody>
+              </Table>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </>
+  );
+};
+
+export default CompetenciesDetailTable;

webapp/src/components/CompetenciesView.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Container, Grid, Button } from '@mui/material';
+
+import CompetenciesCategoriesTable from './CompetenciesCategoriesTable';
+
+const CompetenciesView = () => {
+  return (
+    <Container fixed>
+      <h1>Competencies</h1>
+      <Grid container justifyContent="center">
+        <Grid item xs={12}>
+          <Box textAlign="center">
+            <Button variant="contained" sx={{ my: 5 }}>
+              Take Assessment
+            </Button>
+          </Box>
+          <Box>
+            {/* The placeholder for the card with the rating instruction */}
+          </Box>
+          <Box>
+            <CompetenciesCategoriesTable />
+          </Box>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default CompetenciesView;

webapp/src/types/api.d.ts

@@ -28,6 +28,13 @@ export interface Prompt extends Entity {
   query_text: string;
 }
 
+export interface CompetenciesByCategory extends Entity {
+  label: string;
+  description: string;
+  image_url: string;
+  competencies: Competency[];
+}
+
 export interface Option extends Entity {
   label: string;
   prompt: Prompt;