Video-42-Dashboard-Summary (#42)

Author: basir

backend/routers/orderRouter.js

@@ -2,9 +2,34 @@ import express from 'express';
 import expressAsyncHandler from 'express-async-handler';
 import { isAuth, isAdmin } from '../utils';
 import Order from '../models/orderModel';
+import User from '../models/userModel';
 
 const orderRouter = express.Router();
-
+orderRouter.get(
+  '/summary',
+  isAuth,
+  isAdmin,
+  expressAsyncHandler(async (req, res) => {
+    const orders = await Order.aggregate([
+      {
+        $group: {
+          _id: null,
+          numOrders: { $sum: 1 },
+          totalSales: { $sum: '$totalPrice' },
+        },
+      },
+    ]);
+    const users = await User.aggregate([
+      {
+        $group: {
+          _id: null,
+          numUsers: { $sum: 1 },
+        },
+      },
+    ]);
+    res.send({ users, orders });
+  })
+);
 orderRouter.get(
   '/',
   isAuth,
@@ -104,4 +129,5 @@ orderRouter.put(
     }
   })
 );
+
 export default orderRouter;

frontend/src/api.js

@@ -339,3 +339,22 @@ export const deliverOrder = async (orderId) => {
     return { error: err.response ? err.response.data.message : err.message };
   }
 };
+export const getSummary = async () => {
+  try {
+    const { token } = getUserInfo();
+    const response = await axios({
+      url: `${apiUrl}/api/orders/summary`,
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'content-type': 'application/json',
+      },
+    });
+    if (response.statusText !== 'OK') {
+      throw new Error(response.data.message);
+    } else {
+      return response.data;
+    }
+  } catch (err) {
+    return { error: err.response ? err.response.data.message : err.message };
+  }
+};

frontend/src/srceens/DashboardScreen.js

@@ -1,16 +1,37 @@
 import DashboardMenu from '../components/DashboardMenu';
+import { getSummary } from '../api';
 
+let summary = {};
 const DashboardScreen = {
   after_render: () => {},
-  render: () => {
+  render: async () => {
+    summary = await getSummary();
     return `
     <div class="dashboard">
       ${DashboardMenu.render({ selected: 'dashboard' })}
       <div class="dashboard-content">
         <h1>Dashboard</h1>
-        <div>
-          Info and Charts will be added here
-        </div>
+       
+        <ul class="summary-items">
+          <li>
+            <div class="summary-title color1">
+              <span><i class="fa fa-users"></i> Users</span>
+            </div>
+            <div class="summary-body">${summary.users[0].numUsers}</div>
+          </li>
+          <li>
+            <div class="summary-title color2">
+              <span><i class="fa fa-users"></i> Orders</span>
+            </div>
+            <div class="summary-body">${summary.orders[0].numOrders}</div>
+          </li>
+          <li>
+            <div class="summary-title color3">
+              <span><i class="fa fa-users"></i> Sales</span>
+            </div>
+            <div class="summary-body">$${summary.orders[0].totalSales}</div>
+          </li>
+        </ul>
       </div>
     </div>
     `;

frontend/style.css

@@ -416,3 +416,36 @@ td {
 .tr-action {
   width: 10rem;
 }
+.summary-items {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+}
+.summary-items > li {
+  border: 0.1rem #c0c0c0 solid;
+  margin: 2rem;
+  border-radius: 0.5rem;
+  flex: 1 1 20rem;
+}
+.summary-title {
+  background-color: #e0e0e0;
+  font-size: 2rem;
+  padding: 1rem;
+}
+.summary-body {
+  font-size: 4rem;
+  padding: 1rem;
+  text-align: center;
+}
+.summary-title.color1 {
+  background-color: #f0e0e0;
+}
+.summary-title.color2 {
+  background-color: #e0f0e0;
+}
+.summary-title.color3 {
+  background-color: #e0e0f0;
+}