Video-32-Admin-Dashboard-UI (#32)

Author: basir

README.md

@@ -268,36 +268,58 @@ JS AMAZONA
     2. create api for getMyOrders
     3. show orders in profile screen
     4. style orders
-32. Admin Products
-    1. create Admin Order menu in header
-    2. create ProductListScreen.js
-    3. show products with edit and delete button
-    4. show create product button
-    5. implement create product backend
-    6. redirect user to edit product screen
-33. Edit Product
+32. Admin Dashboard UI
+    1. Header.js
+    2. if user is admin show Dashboard
+    3. create DashboardScreen
+    4. create DashboardMenu
+    5. Style dashboard
+33. Admin Products UI
     1. create ProductListScreen.js
-    2. load product data from backend
-    3. handle form submit
-    4. save product in backend
-34. Delete Product
+    2. show products with edit and delete button
+    3. show create product button
+34. Create Product
+    1. create product model
+    2. implement create product route
+    3. create product function in api.js
+    4. call create product function in ProductListScreen
+    5. redirect to edit product
+35. Edit Product
+    1. update parseUrlRequest to get action
+    2. create ProductEditScreen.js
+    3. load product data from backend
+    4. handle form submit
+    5. save product in backend
+36. Delete Product
     1. update ProductListScreen.js
     2. handle delete button
     3. rerender after deletion
-35. Admin Orders
+37. Admin Orders
     1. create Admin Order menu in header
     2. create AdminOrder.js
     3. load orders from backend
     4. list them in the screen
     5. show delete and edit button
     6. redirect to order details on edit action
-36. Edit Order
+38. Edit Order
     1. if order is payed show deliver button for admin
     2. handle click on deliver button
     3. set state to delivered
-37. Delete Order
+39. Delete Order
     1. update OrderListScreen.js
     2. handle delete button
     3. rerender after deletion
-38. Publish heroku
+40. Show Summary Report in Dashboard
+    1. create summary section
+    2. style summary
+    3. create summary backend
+    4. create getSummary in api.js
+    5. load data in dashboard screen
+    6. show 3 boxes for Users, Orders and Sales
+41. Show Chart in Dashboard
+    1. import chartist
+    2. add chartist css to index.html
+    3. create linear chart for daily sales
+    4. create pie chart for product categories
+42. Publish heroku
     1. publish steps

frontend/src/components/DashboardMenu.js

@@ -0,0 +1,20 @@
+const DashboardMenu = {
+  render: (props) => {
+    return `
+    <div class="dashboard-menu">
+      <ul>
+        <li class="${props.selected === 'dashboard' ? 'selected' : ''}">
+          <a href="/#/dashboard">Dashboard</a>
+        </li>
+        <li class="${props.selected === 'orders' ? 'selected' : ''}">
+          <a href="/#/orderlist">Orders</a>
+        </li>
+        <li class="${props.selected === 'products' ? 'selected' : ''}">
+          <a href="/#/productlist">Products</a>
+        </li>
+      </ul>
+    </div>
+    `;
+  },
+};
+export default DashboardMenu;

frontend/src/components/Header.js

@@ -2,7 +2,7 @@ import { getUserInfo } from '../localStorage';
 
 const Header = {
   render: () => {
-    const { name } = getUserInfo();
+    const { name, isAdmin } = getUserInfo();
     return ` 
   <div class="brand">
     <a href="/#/">jsamazona</a>
@@ -15,6 +15,7 @@ const Header = {
   }
     
     <a href="/#/cart">Cart</a>
+    ${isAdmin ? `<a href="/#/dashboard">Dashboard</a>` : ''}
   </div>`;
   },
   after_render: () => {},

frontend/src/index.js

@@ -11,6 +11,7 @@ import ShippingScreen from './srceens/ShippingScreen';
 import PaymentScreen from './srceens/PaymentScreen';
 import PlaceOrderScreen from './srceens/PlaceOrderScreen';
 import OrderScreen from './srceens/OrderScreen';
+import DashboardScreen from './srceens/DashboardScreen';
 
 const routes = {
   '/': HomeScreen,
@@ -24,6 +25,7 @@ const routes = {
   '/shipping': ShippingScreen,
   '/payment': PaymentScreen,
   '/placeorder': PlaceOrderScreen,
+  '/dashboard': DashboardScreen,
 };
 const router = async () => {
   showLoading();

frontend/src/srceens/DashboardScreen.js

@@ -0,0 +1,19 @@
+import DashboardMenu from '../components/DashboardMenu';
+
+const DashboardScreen = {
+  after_render: () => {},
+  render: () => {
+    return `
+    <div class="dashboard">
+      ${DashboardMenu.render({ selected: 'dashboard' })}
+      <div class="dashboard-content">
+        <h1>Dashboard</h1>
+        <div>
+          Info and Charts will be added here
+        </div>
+      </div>
+    </div>
+    `;
+  },
+};
+export default DashboardScreen;

frontend/style.css

@@ -91,14 +91,16 @@ header {
 }
 header a {
   color: #ffffff;
-  font-weight: bold;
   text-decoration: none;
+  padding-right: 1rem;
 }
 header a:hover {
   color: #f08040;
 }
 .brand a {
+  font-weight: bold;
   font-size: 3rem;
+  padding-left: 1rem;
 }
 footer {
   background-color: #203040;
@@ -372,3 +374,37 @@ tbody > tr:nth-child(odd) {
 td {
   padding: 0.5rem;
 }
+/* Dashboard */
+.dashboard {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+}
+.dashboard h1 {
+  font-size: 3rem;
+  margin: 1rem 0;
+}
+.dashboard-menu {
+  flex: 1 1 20rem;
+  background-color: #f0f0f0;
+}
+.dashboard-menu ul {
+  padding: 0;
+}
+.dashboard-menu a {
+  display: flex;
+  padding: 1rem;
+  padding-left: 2rem;
+  justify-content: space-between;
+}
+.dashboard-menu a:hover {
+  background-color: #c0c0c0;
+}
+.dashboard-menu li.selected a {
+  background-color: #c0c0c0;
+  color: #f08040;
+}
+.dashboard-content {
+  flex: 4 1 80rem;
+  padding: 1rem;
+}