Add back missing files

src/components/pages/ModuleDashboard/index.tsx

+import React, { useEffect, useState } from "react";
+import Dandruff from "components/molecules/Dandruff";
+import { useParams } from "react-router-dom";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+import { faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
+import PageButtonGroup from "components/molecules/PageButtonGroup";
+
+import { request } from "../../../utils/api";
+import { api, methods } from "../../../constants/routes";
+
+import TutorCard from "components/atoms/TutorCard";
+import tutorImage1 from "assets/images/tutor-1.png";
+import tutorImage2 from "assets/images/tutor-2.png";
+
+import Col from "react-bootstrap/Col";
+import TutorCardGroup from "components/molecules/TutorCardGroup";
+
+const ModuleDashboard: React.FC = () => {
+  let { id } = useParams();
+  let moduleCode = id.startsWith("CO") ? id.slice(2) : id;
+  const initialButtons = [
+    {
+      title: "College Website",
+      icon: faGlobe,
+      url: `https://www.imperial.ac.uk/computing/current-students/courses/${moduleCode}/`,
+    },
+  ];
+  let [buttons, setButtons] = useState(initialButtons);
+
+  useEffect(() => {
+    const onSuccess = (data: { json: () => Promise<any> }) => {
+      let newButtons: any[] = [];
+
+      data.json().then((json) => {
+        for (const key in json) {
+          let resource = json[key];
+          if (resource.type !== "link") continue;
+
+          newButtons.push({
+            title: resource.title,
+            icon: faLink,
+            url: resource.path,
+          });
+        }
+        setButtons((b) => b.concat(newButtons));
+      });
+    };
+    request(
+      api.MATERIALS_RESOURCES,
+      methods.GET,
+      onSuccess,
+      () => {
+        console.log("fail");
+      },
+      {
+        year: "2021",
+        course: moduleCode,
+      }
+    );
+  }, [moduleCode]);
+
+  let leaderCards = leaders.map(({ name, email, address, image }) => {
+    return (
+      <Col>
+        <TutorCard
+          key={email}
+          name={name}
+          email={email}
+          address={address}
+          image={image}
+        />
+      </Col>
+    );
+  });
+
+  return (
+    <>
+      <Dandruff heading={generateHeading(id)} />
+
+      <h4 className={classNames(styles.moduleSectionHeader)}>Module Aims</h4>
+      <p style={{ paddingTop: "0.75rem" }}>
+        In this module you will have the opportunity to:
+        <ul>
+          <li>
+            Learn about language and semantics of propositional and first-order
+            logic
+          </li>
+          <li>
+            Explore the user of logic for modelling rigorously human reasoning
+          </li>
+          <li>
+            Apply various semantic methods for proving validity of arguments and
+            logical equivalences
+          </li>
+          <li>
+            Study natural deduction and resolution for constructing correct
+            proofs
+          </li>
+          <li>Investigate soundness and completeness of natural deduction</li>
+          <li>Apply first-order logic to program specification</li>
+        </ul>
+      </p>
+
+      <h4 className={classNames(styles.moduleSectionHeader)}>Links</h4>
+      <PageButtonGroup buttons={buttons} style={{ marginTop: "1.25rem" }} />
+
+      <div className={classNames(styles.moduleSectionHeader)}>
+        <TutorCardGroup title="Module Leaders" tutors={leaders} />
+      </div>
+    </>
+  );
+};
+
+function generateHeading(id: string) {
+  let modules = [
+    {
+      title: "Introduction to Logic",
+      code: "CO140",
+    },
+    {
+      title: "Discrete Mathematics",
+      code: "CO142",
+    },
+    {
+      title: "Introduction to Computer Systems",
+      code: "CO112",
+    },
+    {
+      title: "Mathematical Methods",
+      code: "CO145",
+    },
+    {
+      title: "Java",
+      code: "CO120.2",
+    },
+    {
+      title: "Graphs and Algorithms",
+      code: "CO150",
+    },
+    {
+      title: "Introduction to Computer Architecture",
+      code: "CO113",
+    },
+    {
+      title: "Reasoning About Programs",
+      code: "CO141",
+    },
+    {
+      title: "Introduction to Databases",
+      code: "CO130",
+    },
+  ];
+  let heading = id;
+  for (let i in modules) {
+    if (modules[i].code === id) {
+      heading = modules[i].title;
+      break;
+    }
+  }
+  return heading;
+}
+
+export default ModuleDashboard;
+
+const leaders: {
+  name: string;
+  email: string;
+  address: string;
+  image: string;
+}[] = [
+  {
+    name: "Dr. Zahid Barr",
+    email: "zahid.barr@imperial.ac.uk",
+    address: "373, Huxley Building",
+    image: tutorImage1,
+  },
+  {
+    name: "Dr. Rosalind Baker",
+    email: "rosalind.baker@imperial.ac.uk",
+    address: "590, Huxley Building",
+    image: tutorImage2,
+  },
+];

src/components/pages/ModuleDashboard/style.module.scss

+@import "assets/scss/custom";
+
+.moduleSectionHeader {
+  margin-top: 1.875rem;
+}
+
+.moduleParagraph {
+  margin-top: 1rem;
+}
+
+@media (max-width: 62rem) {
+}
+
+@media (min-width: 62rem) {
+}

src/components/pages/ModuleOverview/index.tsx

+import React, { useEffect, useState } from "react";
+import Dandruff from "components/molecules/Dandruff";
+import { useParams } from "react-router-dom";
+import styles from "./style.module.scss";
+import classNames from "classnames";
+
+import { request } from "../../../utils/api";
+import { api, methods } from "../../../constants/routes";
+
+import ProgressBar from "react-bootstrap/ProgressBar";
+import Accordion from "react-bootstrap/Accordion";
+import Card from "react-bootstrap/Card";
+import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
+
+const ModuleOverview: React.FC = () => {
+  let { id } = useParams();
+  let moduleCode = id.startsWith("CO") ? id.slice(2) : id;
+
+  return (
+    <>
+			<MyBreadcrumbs />
+
+      <ProgressBar
+				now={50}
+				className={styles.progress}
+      /> 
+      <Accordion
+        defaultActiveKey="0"
+        style={{ marginTop: "1.25rem", borderRadius: ".5rem" }}
+        className={styles.progressAccordion}
+      >
+        {[...Array(9)].map((e, i) => (
+          <Card className={styles.weekCard}>
+            <Accordion.Toggle
+              className={styles.weekCardHeader}
+              as={Card.Header}
+              eventKey={`${i}`}
+            >
+              Week {i + 1}
+            </Accordion.Toggle>
+            <Accordion.Collapse eventKey={`${i}`}>
+              <Card.Body className={styles.weekCardBody}>
+                Hello! I'm the body of week {i + 1}
+              </Card.Body>
+            </Accordion.Collapse>
+          </Card>
+        ))}
+      </Accordion>
+    </>
+  );
+};
+
+export default ModuleOverview;

src/components/pages/ModuleOverview/style.module.scss

+@import "assets/scss/custom";
+
+.moduleSectionHeader {
+  margin-top: 1.875rem;
+}
+
+.moduleParagraph {
+  margin-top: 1rem;
+}
+
+.progress {
+  background-color: $gray-100;
+  margin-top: 1.25rem;
+  border-radius: 0.5rem;
+  height: 0.75rem;
+}
+
+:global(.progress-bar) {
+  background-color: $teal-500;
+  border-radius: 0.5rem;
+}
+
+.progressAccordion {
+  border-radius: 0.5rem;
+}
+
+.weekCard {
+  background: $white;
+  border-width: 0rem;
+  margin-bottom: 0.5rem;
+  transition: 0.2s transform;
+  border-radius: 0.5rem !important;
+}
+
+.weekCardHeader {
+  background: $gray-100;
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
+  border-radius: 0.5rem !important;
+  font-size: 1.125rem;
+  margin-bottom: 0px !important;
+  padding: 0.5rem 0.75rem;
+  border-width: 0px;
+}
+
+.weekCardHeader:hover {
+  background: $gray-200;
+}
+
+.weekCardBody {
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 62rem) {
+}
+
+@media (min-width: 62rem) {
+}