Add statistics page with time code summary (#6)

* Add statistics page with time code summary

package.json

@@ -12,6 +12,7 @@
     "react-intl": "^2.9.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "terra-badge": "^3.39.0",
     "terra-base": "^5.36.0",
     "terra-button": "^3.43.0",
     "terra-card": "^3.32.0",

src/App.js

@@ -4,6 +4,7 @@ import "./App.css";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import clock from "./pages/clock/clock.js";
 import profile from "./pages/profile/profile.js";
+import statistics from "./pages/statistics/statistics.js";
 
 function App() {
   return (
@@ -19,10 +20,14 @@ function App() {
                 <li>
                   <a href="/profile">Profile</a>
                 </li>
+                <li>
+                  <a href="/statistics">Statistics</a>
+                </li>
               </ul>
             </nav>
             <Route path="/" exact component={clock} />
             <Route path="/profile" exact component={profile} />
+            <Route path="/statistics" exact component={statistics} />
           </main>
         </Router>
       </div>

src/components/TimeCodeStatSummary/TimeCodeStatSummary.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import Card from "terra-card";
+import Heading from "terra-heading";
+import TimeCodeProject from "../ViewTimeCodes/TimeCodeProject";
+import "../../styles/ViewTimeCodes.css";
+
+const TimeCodeStatSummary = () => {
+  return (
+    <Card variant="default" style={{ maxWidth: "40vw", margin: "auto" }}>
+      <div className="my-time-codes-container">
+        <Heading level={1} size="large" weight={700}>
+          This Week's Time Code Summary
+        </Heading>
+        <TimeCodeProject
+          timeCode="19378847"
+          projectTitle="Fancy Project"
+          tag="In-Progress"
+          timeSpent="4.5 hours"
+        />
+        <TimeCodeProject
+          timeCode="39572956"
+          projectTitle="Classified"
+          tag="Not Started"
+          timeSpent="8 hours"
+        />
+        <TimeCodeProject
+          timeCode="82659301"
+          projectTitle="DevOps Magic"
+          tag="In-Progress"
+          timeSpent="6.35 hours"
+        />
+        <TimeCodeProject
+          timeCode="92847634"
+          projectTitle="Wow a project"
+          tag="Completed"
+          timeSpent="17 hours"
+        />
+      </div>
+    </Card>
+  );
+};
+
+export default TimeCodeStatSummary;

src/components/ViewTimeCodes/TimeCodeProject.js

@@ -1,12 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Select from "terra-form-select";
+import Badge from "terra-badge";
 
 const TimeCodeProject = (props) => {
-  return (
-    <div className="time-code-project">
-      <p>{props.timeCode}</p>
-      <p>{props.projectTitle}</p>
+  let currentIntent = "info";
+  if (props.tag === "Completed") {
+    currentIntent = "positive";
+  }
+
+  function CurrentStatus() {
+    return !props.timeSpent ? (
       <Select
         variant="default"
         defaultValue={props.tag}
@@ -17,6 +21,17 @@ const TimeCodeProject = (props) => {
         <Select.Option value="inProgress" display="In Progress" />
         <Select.Option value="completed" display="Completed" />
       </Select>
+    ) : (
+      <Badge text={props.tag} intent={currentIntent} size="medium" />
+    );
+  }
+
+  return (
+    <div className="time-code-project">
+      <p>{props.projectTitle}</p>
+      <CurrentStatus />
+      <p>{props.timeCode}</p>
+      <p>{props.timeSpent}</p>
     </div>
   );
 };

src/pages/statistics/statistics.js

@@ -0,0 +1,12 @@
+import React from "react";
+import TimeCodeStatSummary from "../../components/TimeCodeStatSummary/TimeCodeStatSummary.js";
+
+const statistics = () => {
+  return (
+    <div>
+      <TimeCodeStatSummary />
+    </div>
+  );
+};
+
+export default statistics;