Add clients detail page

client/package-lock.json

@@ -4581,6 +4581,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

client/package.json

@@ -19,6 +19,7 @@
     "express": "^4.17.1",
     "express-react-views": "^0.11.0",
     "jsonwebtoken": "^8.5.1",
+    "moment": "^2.29.1",
     "nodemon": "^2.0.6",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

client/routes/clients.js

@@ -30,12 +30,12 @@ router.get("/new", async (req, res) => {
 router.get("/:id", async (req, res) => {
   const client = await axios.get(basePath + "/clients/" + req.params.id, {
     headers: { Authorization: "Bearer " + req.cookies.token },
-  });
+  }).then(res => res.data);
 
   if (res.status === 404) {
     res.render("404");
   } else {
-    res.send(client.data);
+    res.render("clients/Detail", {user: req.user, client });
   }
 });
 

client/views/clients/Detail.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Layout from "../layouts/Main";
+import moment from "moment";
+
+export default function Detail({ client, user }) {
+  console.table(client);
+  const timelineComponent = client.events
+    .reverse()
+    .slice(0, 2)
+    .map((event) => {
+      return (
+        <div className="col-sm-5">
+          <div className="card">
+            <div className="card-body">
+              <h5 className="card-title">{event.eventType}</h5>
+              <h6 class="card-subtitle mb-2 text-muted">
+                {moment(event.createdAt).fromNow()}
+              </h6>
+              <p className="card-text">{event.value}</p>
+            </div>
+          </div>
+        </div>
+      );
+    });
+
+  return (
+    <Layout user={user}>
+      <h4 className="display-4">
+        {client.name}{" "}
+        <span class="badge badge-pill badge-dark">{client.status}</span>
+      </h4>
+
+      <h4 className="lead text-muted">{client.email}</h4>
+      <div className="row mt-4">
+        {timelineComponent}
+        <div className="col-sm-2 d-flex align-items-center">
+          <a className="btn btn-light" href={`/clients/${client.id}/timeline`}>
+            View Full Timeline
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+}