From f399356aba699ff91cd98d14152f3ac27585b767 Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 10:16:40 +0200
Subject: [PATCH 1/9] refactor dash header and footer into own components

---
 src/components/Dash.vue       | 155 +++-----------------------------
 src/components/DashFooter.vue |  16 ++++
 src/components/DashHeader.vue | 162 ++++++++++++++++++++++++++++++++++
 3 files changed, 191 insertions(+), 142 deletions(-)
 create mode 100644 src/components/DashFooter.vue
 create mode 100644 src/components/DashHeader.vue

diff --git a/src/components/Dash.vue b/src/components/Dash.vue
index f195b972..80cecf7e 100644
--- a/src/components/Dash.vue
+++ b/src/components/Dash.vue
@@ -1,129 +1,11 @@
 <template>
   <div :class="['wrapper', classes]">
-    <header class="main-header">
-	<span class="logo-mini">
-		<a href="/"><img src="/static/img/copilot-logo-white.svg" alt="Logo" class="img-responsive center-block logo"></a>
-	</span>
-      <!-- Header Navbar -->
-      <nav class="navbar navbar-static-top" role="navigation">
-        <!-- Sidebar toggle button-->
-        <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-          <span class="sr-only">Toggle navigation</span>
-        </a>
-        <!-- Navbar Right Menu -->
-        <div class="navbar-custom-menu">
-          <ul class="nav navbar-nav">
-            <!-- Messages-->
-            <li class="dropdown messages-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-envelope-o"></i>
-                <span class="label label-success">{{ userInfo.messages | count }}</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
-                <li v-if="userInfo.messages.length > 0">
-                  <!-- inner menu: contains the messages -->
-                  <ul class="menu">
-                    <li>
-                      <!-- start message -->
-                      <a href="javascript:;">
-                        <!-- Message title and timestamp -->
-                        <h4>
-                          Support Team
-                          <small>
-                            <i class="fa fa-clock-o"></i> 5 mins</small>
-                        </h4>
-                        <!-- The message -->
-                        <p>Why not consider this a test message?</p>
-                      </a>
-                    </li>
-                    <!-- end message -->
-                  </ul>
-                  <!-- /.menu -->
-                </li>
-                <li class="footer" v-if="userInfo.messages.length > 0">
-                  <a href="javascript:;">See All Messages</a>
-                </li>
-              </ul>
-            </li>
-            <!-- /.messages-menu -->
 
-            <!-- Notifications Menu -->
-            <li class="dropdown notifications-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-bell-o"></i>
-                <span class="label label-warning">{{ userInfo.notifications | count }}</span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
-                <li v-if="userInfo.notifications.length > 0">
-                  <!-- Inner Menu: contains the notifications -->
-                  <ul class="menu">
-                    <li>
-                      <!-- start notification -->
-                      <a href="javascript:;">
-                        <i class="fa fa-users text-aqua"></i> 5 new members joined today
-                      </a>
-                    </li>
-                    <!-- end notification -->
-                  </ul>
-                </li>
-                <li class="footer" v-if="userInfo.notifications.length > 0">
-                  <a href="javascript:;">View all</a>
-                </li>
-              </ul>
-            </li>
-
-            <!-- Tasks Menu -->
-            <li class="dropdown tasks-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <i class="fa fa-flag-o"></i>
-                <span class="label label-danger">{{ userInfo.tasks | count }} </span>
-              </a>
-              <ul class="dropdown-menu">
-                <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
-                <li v-if="userInfo.tasks.length > 0">
-                  <!-- Inner menu: contains the tasks -->
-                  <ul class="menu">
-                    <li>
-                      <!-- Task item -->
-                      <a href="javascript:;">
-                        <!-- Task title and progress text -->
-                        <h3>
-                          Design some buttons
-                          <small class="pull-right">20%</small>
-                        </h3>
-                        <!-- The progress bar -->
-                        <div class="progress xs">
-                          <!-- Change the css width attribute to simulate progress -->
-                          <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                            <span class="sr-only">20% Complete</span>
-                          </div>
-                        </div>
-                      </a>
-                    </li>
-                    <!-- end task item -->
-                  </ul>
-                </li>
-                <li class="footer" v-if="userInfo.tasks.length > 0">
-                  <a href="javascript:;">View all tasks</a>
-                </li>
-              </ul>
-            </li>
-
-            <!-- User Account Menu -->
-            <li class="dropdown user user-menu">
-              <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-                <!-- The user image in the navbar-->
-                <img v-bind:src="demo.avatar" class="user-image" alt="User Image">
-                <!-- hidden-xs hides the username on small devices so only the image appears. -->
-                <span class="hidden-xs">{{ demo.displayName }}</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </header>
+    <!-- Horizontal bar at top. Contains messages, notifications, tasks and user menu -->
+    <dash-header :avatar="demo.avatar"
+                 :display-name="demo.displayName"
+                 :roles="demo.roles"></dash-header>
+    
     <!-- Left side column. contains the logo and sidebar -->
     <sidebar :display-name="demo.displayName" :picture-url="demo.avatar" />
 
@@ -147,32 +29,30 @@
       <router-view></router-view>
     </div>
     <!-- /.content-wrapper -->
-
-    <!-- Main Footer -->
-    <footer class="main-footer">
-      <strong>Copyright &copy; {{year}}
-        <a href="javascript:;">CoPilot</a>.</strong> All rights reserved.
-    </footer>
+  
+    <!-- Horizontal bar at bottom. Contains copy right -->
+    <dash-footer></dash-footer>
   </div>
-  <!-- ./wrapper -->
 </template>
 
 <script>
 import faker from 'faker'
-import { mapState } from 'vuex'
 import config from '../config'
+import DashFooter from './DashFooter'
+import DashHeader from './DashHeader'
 import Sidebar from './Sidebar'
 import 'hideseek'
 
 export default {
   name: 'Dash',
   components: {
+    DashFooter,
+    DashHeader,
     Sidebar
   },
   data: function () {
     return {
       // section: 'Dash',
-      year: new Date().getFullYear(),
       classes: {
         fixed_layout: config.fixedLayout,
         hide_logo: config.hideLogoOnMobile
@@ -181,22 +61,13 @@ export default {
     }
   },
   computed: {
-    ...mapState([
-      'userInfo'
-    ]),
     demo () {
       return {
         displayName: faker.name.findName(),
         avatar: faker.image.avatar(),
-        email: faker.internet.email(),
-        randomCard: faker.helpers.createCard()
+        roles: [faker.name.jobTitle(), faker.name.jobTitle()]
       }
     }
-  },
-  methods: {
-    changeloading () {
-      this.$store.commit('TOGGLE_SEARCHING')
-    }
   }
 }
 </script>
diff --git a/src/components/DashFooter.vue b/src/components/DashFooter.vue
new file mode 100644
index 00000000..4f9bee90
--- /dev/null
+++ b/src/components/DashFooter.vue
@@ -0,0 +1,16 @@
+<template>
+  <footer class="main-footer">
+    <strong>Copyright &copy; {{ year }}
+    <a href="javascript:;">CoPilot</a>.</strong> All rights reserved.
+  </footer>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      year: new Date().getFullYear()
+    }
+  }
+}
+</script>
diff --git a/src/components/DashHeader.vue b/src/components/DashHeader.vue
new file mode 100644
index 00000000..962dbc32
--- /dev/null
+++ b/src/components/DashHeader.vue
@@ -0,0 +1,162 @@
+<template>
+  <header class="main-header">
+    <span class="logo-mini">
+      <a href="/"><img src="/static/img/copilot-logo-white.svg" alt="Logo" class="img-responsive center-block logo"></a>
+    </span>
+    <!-- Header Navbar -->
+    <nav class="navbar navbar-static-top" role="navigation">
+      <!-- Sidebar toggle button-->
+      <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+        <span class="sr-only">Toggle navigation</span>
+      </a>
+      <!-- Navbar Right Menu -->
+      <div class="navbar-custom-menu">
+        <ul class="nav navbar-nav">
+          <!-- Messages-->
+          <li class="dropdown messages-menu">
+            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-envelope-o"></i>
+              <span class="label label-success">{{ userInfo.messages | count }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
+              <li v-if="userInfo.messages.length > 0">
+                <!-- inner menu: contains the messages -->
+                <ul class="menu">
+                  <li>
+                    <!-- start message -->
+                    <a href="javascript:;">
+                      <!-- Message title and timestamp -->
+                      <h4>
+                        Support Team
+                        <small>
+                          <i class="fa fa-clock-o"></i> 5 mins</small>
+                      </h4>
+                      <!-- The message -->
+                      <p>Why not consider this a test message?</p>
+                    </a>
+                  </li>
+                  <!-- end message -->
+                </ul>
+                <!-- /.menu -->
+              </li>
+              <li class="footer" v-if="userInfo.messages.length > 0">
+                <a href="javascript:;">See All Messages</a>
+              </li>
+            </ul>
+          </li>
+          <!-- /.messages-menu -->
+
+          <!-- Notifications Menu -->
+          <li class="dropdown notifications-menu">
+            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-bell-o"></i>
+              <span class="label label-warning">{{ userInfo.notifications | count }}</span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
+              <li v-if="userInfo.notifications.length > 0">
+                <!-- Inner Menu: contains the notifications -->
+                <ul class="menu">
+                  <li>
+                    <!-- start notification -->
+                    <a href="javascript:;">
+                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                    </a>
+                  </li>
+                  <!-- end notification -->
+                </ul>
+              </li>
+              <li class="footer" v-if="userInfo.notifications.length > 0">
+                <a href="javascript:;">View all</a>
+              </li>
+            </ul>
+          </li>
+
+          <!-- Tasks Menu -->
+          <li class="dropdown tasks-menu">
+            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+              <i class="fa fa-flag-o"></i>
+              <span class="label label-danger">{{ userInfo.tasks | count }} </span>
+            </a>
+            <ul class="dropdown-menu">
+              <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
+              <li v-if="userInfo.tasks.length > 0">
+                <!-- Inner menu: contains the tasks -->
+                <ul class="menu">
+                  <li>
+                    <!-- Task item -->
+                    <a href="javascript:;">
+                      <!-- Task title and progress text -->
+                      <h3>
+                        Design some buttons
+                        <small class="pull-right">20%</small>
+                      </h3>
+                      <!-- The progress bar -->
+                      <div class="progress xs">
+                        <!-- Change the css width attribute to simulate progress -->
+                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                          <span class="sr-only">20% Complete</span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                  <!-- end task item -->
+                </ul>
+              </li>
+              <li class="footer" v-if="userInfo.tasks.length > 0">
+                <a href="javascript:;">View all tasks</a>
+              </li>
+            </ul>
+          </li>
+
+          <!-- User Account Menu -->
+          <li class="dropdown user user-menu">
+            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+              <!-- The user image in the navbar-->
+              <img :src="avatar" class="user-image" alt="User Image">
+              <!-- hidden-xs hides the username on small devices so only the image appears. -->
+              <span class="hidden-xs">{{ displayName }}</span>
+            </a>
+            <!-- Account Info and Menu -->
+            <ul class="dropdown-menu">
+              <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
+                <p>
+                  <span>{{ displayName }}</span>
+                  <small v-for="role in roles" :key="role">{{ role }}</small>
+                </p>
+              </li>
+              <li class="user-footer">
+                <a href="javascript:;" class="btn btn-default btn-flat btn-block">
+                  <i class="fa fa-sign-out"></i>
+                  <span>Logout</span>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  props: ['avatar', 'displayName', 'roles'],
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
+
+<style <style lang="scss" scoped>
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+  margin-left: 0;
+}
+</style>
+

From fe1e29f3804c13ab0db32f64a56f79dd900b63ab Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 10:37:47 +0200
Subject: [PATCH 2/9] refactor menus into own components and rename demo to
 user

---
 src/components/Dash.vue              |  13 +--
 src/components/DashFooter.vue        |   1 +
 src/components/DashHeader.vue        | 143 ++++-----------------------
 src/components/MessagesMenu.vue      |  47 +++++++++
 src/components/NotificationsMenu.vue |  39 ++++++++
 src/components/Sidebar.vue           |   6 +-
 src/components/TasksMenu.vue         |  50 ++++++++++
 src/components/UserMenu.vue          |  32 ++++++
 8 files changed, 195 insertions(+), 136 deletions(-)
 create mode 100644 src/components/MessagesMenu.vue
 create mode 100644 src/components/NotificationsMenu.vue
 create mode 100644 src/components/TasksMenu.vue
 create mode 100644 src/components/UserMenu.vue

diff --git a/src/components/Dash.vue b/src/components/Dash.vue
index 80cecf7e..61fec054 100644
--- a/src/components/Dash.vue
+++ b/src/components/Dash.vue
@@ -2,13 +2,11 @@
   <div :class="['wrapper', classes]">
 
     <!-- Horizontal bar at top. Contains messages, notifications, tasks and user menu -->
-    <dash-header :avatar="demo.avatar"
-                 :display-name="demo.displayName"
-                 :roles="demo.roles"></dash-header>
+    <dash-header :user="user"></dash-header>
     
     <!-- Left side column. contains the logo and sidebar -->
-    <sidebar :display-name="demo.displayName" :picture-url="demo.avatar" />
-
+    <sidebar :user="user" />
+  
     <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">
       <!-- Content Header (Page header) -->
@@ -56,12 +54,11 @@ export default {
       classes: {
         fixed_layout: config.fixedLayout,
         hide_logo: config.hideLogoOnMobile
-      },
-      error: ''
+      }
     }
   },
   computed: {
-    demo () {
+    user () {
       return {
         displayName: faker.name.findName(),
         avatar: faker.image.avatar(),
diff --git a/src/components/DashFooter.vue b/src/components/DashFooter.vue
index 4f9bee90..cb45f9a1 100644
--- a/src/components/DashFooter.vue
+++ b/src/components/DashFooter.vue
@@ -7,6 +7,7 @@
 
 <script>
 export default {
+  name: 'DashFooter',
   data: function () {
     return {
       year: new Date().getFullYear()
diff --git a/src/components/DashHeader.vue b/src/components/DashHeader.vue
index 962dbc32..163de13e 100644
--- a/src/components/DashHeader.vue
+++ b/src/components/DashHeader.vue
@@ -9,131 +9,14 @@
       <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
         <span class="sr-only">Toggle navigation</span>
       </a>
+
       <!-- Navbar Right Menu -->
       <div class="navbar-custom-menu">
         <ul class="nav navbar-nav">
-          <!-- Messages-->
-          <li class="dropdown messages-menu">
-            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">{{ userInfo.messages | count }}</span>
-            </a>
-            <ul class="dropdown-menu">
-              <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
-              <li v-if="userInfo.messages.length > 0">
-                <!-- inner menu: contains the messages -->
-                <ul class="menu">
-                  <li>
-                    <!-- start message -->
-                    <a href="javascript:;">
-                      <!-- Message title and timestamp -->
-                      <h4>
-                        Support Team
-                        <small>
-                          <i class="fa fa-clock-o"></i> 5 mins</small>
-                      </h4>
-                      <!-- The message -->
-                      <p>Why not consider this a test message?</p>
-                    </a>
-                  </li>
-                  <!-- end message -->
-                </ul>
-                <!-- /.menu -->
-              </li>
-              <li class="footer" v-if="userInfo.messages.length > 0">
-                <a href="javascript:;">See All Messages</a>
-              </li>
-            </ul>
-          </li>
-          <!-- /.messages-menu -->
-
-          <!-- Notifications Menu -->
-          <li class="dropdown notifications-menu">
-            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">{{ userInfo.notifications | count }}</span>
-            </a>
-            <ul class="dropdown-menu">
-              <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
-              <li v-if="userInfo.notifications.length > 0">
-                <!-- Inner Menu: contains the notifications -->
-                <ul class="menu">
-                  <li>
-                    <!-- start notification -->
-                    <a href="javascript:;">
-                      <i class="fa fa-users text-aqua"></i> 5 new members joined today
-                    </a>
-                  </li>
-                  <!-- end notification -->
-                </ul>
-              </li>
-              <li class="footer" v-if="userInfo.notifications.length > 0">
-                <a href="javascript:;">View all</a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Tasks Menu -->
-          <li class="dropdown tasks-menu">
-            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-              <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">{{ userInfo.tasks | count }} </span>
-            </a>
-            <ul class="dropdown-menu">
-              <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
-              <li v-if="userInfo.tasks.length > 0">
-                <!-- Inner menu: contains the tasks -->
-                <ul class="menu">
-                  <li>
-                    <!-- Task item -->
-                    <a href="javascript:;">
-                      <!-- Task title and progress text -->
-                      <h3>
-                        Design some buttons
-                        <small class="pull-right">20%</small>
-                      </h3>
-                      <!-- The progress bar -->
-                      <div class="progress xs">
-                        <!-- Change the css width attribute to simulate progress -->
-                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">20% Complete</span>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <!-- end task item -->
-                </ul>
-              </li>
-              <li class="footer" v-if="userInfo.tasks.length > 0">
-                <a href="javascript:;">View all tasks</a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- User Account Menu -->
-          <li class="dropdown user user-menu">
-            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
-              <!-- The user image in the navbar-->
-              <img :src="avatar" class="user-image" alt="User Image">
-              <!-- hidden-xs hides the username on small devices so only the image appears. -->
-              <span class="hidden-xs">{{ displayName }}</span>
-            </a>
-            <!-- Account Info and Menu -->
-            <ul class="dropdown-menu">
-              <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
-                <p>
-                  <span>{{ displayName }}</span>
-                  <small v-for="role in roles" :key="role">{{ role }}</small>
-                </p>
-              </li>
-              <li class="user-footer">
-                <a href="javascript:;" class="btn btn-default btn-flat btn-block">
-                  <i class="fa fa-sign-out"></i>
-                  <span>Logout</span>
-                </a>
-              </li>
-            </ul>
-          </li>
+          <messages-menu></messages-menu>
+          <notifications-menu></notifications-menu>
+          <tasks-menu></tasks-menu>
+          <user-menu :user="user"></user-menu>
         </ul>
       </div>
     </nav>
@@ -142,9 +25,20 @@
 
 <script>
 import { mapState } from 'vuex'
+import MessagesMenu from './MessagesMenu'
+import NotificationsMenu from './NotificationsMenu'
+import TasksMenu from './TasksMenu'
+import UserMenu from './UserMenu'
 
 export default {
-  props: ['avatar', 'displayName', 'roles'],
+  name: 'DashHeader',
+  components: {
+    MessagesMenu,
+    NotificationsMenu,
+    TasksMenu,
+    UserMenu
+  },
+  props: ['user'],
   computed: {
     ...mapState([
       'userInfo'
@@ -153,10 +47,9 @@ export default {
 }
 </script>
 
-<style <style lang="scss" scoped>
+<style lang="scss" scoped>
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
   margin-left: 0;
 }
 </style>
-
diff --git a/src/components/MessagesMenu.vue b/src/components/MessagesMenu.vue
new file mode 100644
index 00000000..7d0ec56f
--- /dev/null
+++ b/src/components/MessagesMenu.vue
@@ -0,0 +1,47 @@
+<template>
+  <li class="dropdown messages-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-envelope-o"></i>
+      <span class="label label-success">{{ userInfo.messages | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
+      <li v-if="userInfo.messages.length > 0">
+        <!-- inner menu: contains the messages -->
+        <ul class="menu">
+          <li>
+            <!-- start message -->
+            <a href="javascript:;">
+              <!-- Message title and timestamp -->
+              <h4>
+                Support Team
+                <small>
+                  <i class="fa fa-clock-o"></i> 5 mins</small>
+              </h4>
+              <!-- The message -->
+              <p>Why not consider this a test message?</p>
+            </a>
+          </li>
+          <!-- end message -->
+        </ul>
+        <!-- /.menu -->
+      </li>
+      <li class="footer" v-if="userInfo.messages.length > 0">
+        <a href="javascript:;">See All Messages</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'MessagesMenu',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/NotificationsMenu.vue b/src/components/NotificationsMenu.vue
new file mode 100644
index 00000000..36fc0c4a
--- /dev/null
+++ b/src/components/NotificationsMenu.vue
@@ -0,0 +1,39 @@
+<template>
+  <li class="dropdown notifications-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-bell-o"></i>
+      <span class="label label-warning">{{ userInfo.notifications | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
+      <li v-if="userInfo.notifications.length > 0">
+        <!-- Inner Menu: contains the notifications -->
+        <ul class="menu">
+          <li>
+            <!-- start notification -->
+            <a href="javascript:;">
+              <i class="fa fa-users text-aqua"></i> 5 new members joined today
+            </a>
+          </li>
+          <!-- end notification -->
+        </ul>
+      </li>
+      <li class="footer" v-if="userInfo.notifications.length > 0">
+        <a href="javascript:;">View all</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'NotificationsMenu',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 1b7c7a16..d6829475 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,11 +7,11 @@
       <!-- Sidebar user panel (optional) -->
       <div class="user-panel">
         <div class="pull-left image">
-          <img :src="pictureUrl" />
+          <img :src="user.avatar" />
         </div>
         <div class="pull-left info">
           <div>
-            <p class="white">{{ displayName }}</p>
+            <p class="white">{{user.displayName}}</p>
           </div>
           <a href="javascript:;">
             <i class="fa fa-circle text-success"></i> Online
@@ -50,7 +50,7 @@ import SidebarMenu from './SidebarMenu'
 
 export default {
   name: 'Sidebar',
-  props: ['displayName', 'pictureUrl'],
+  props: ['user'],
   components: { SidebarMenu },
   mounted: function() {
     window
diff --git a/src/components/TasksMenu.vue b/src/components/TasksMenu.vue
new file mode 100644
index 00000000..c49564f5
--- /dev/null
+++ b/src/components/TasksMenu.vue
@@ -0,0 +1,50 @@
+<template>
+  <li class="dropdown tasks-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-flag-o"></i>
+      <span class="label label-danger">{{ userInfo.tasks | count }} </span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
+      <li v-if="userInfo.tasks.length > 0">
+        <!-- Inner menu: contains the tasks -->
+        <ul class="menu">
+          <li>
+            <!-- Task item -->
+            <a href="javascript:;">
+              <!-- Task title and progress text -->
+              <h3>
+                Design some buttons
+                <small class="pull-right">20%</small>
+              </h3>
+              <!-- The progress bar -->
+              <div class="progress xs">
+                <!-- Change the css width attribute to simulate progress -->
+                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                  <span class="sr-only">20% Complete</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <!-- end task item -->
+        </ul>
+      </li>
+      <li class="footer" v-if="userInfo.tasks.length > 0">
+        <a href="javascript:;">View all tasks</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'TasksMenu',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
new file mode 100644
index 00000000..8961e72a
--- /dev/null
+++ b/src/components/UserMenu.vue
@@ -0,0 +1,32 @@
+<template>
+  <li class="dropdown user user-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <!-- The user image in the navbar-->
+      <img :src="user.avatar" class="user-image" alt="User Image">
+      <!-- hidden-xs hides the username on small devices so only the image appears. -->
+      <span class="hidden-xs">{{user.displayName}}</span>
+    </a>
+    <!-- Account Info and Menu -->
+    <ul class="dropdown-menu">
+      <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
+        <p>
+          <span>{{user.displayName}}</span>
+          <small v-for="role in user.roles" :key="role">{{role}}</small>
+        </p>
+      </li>
+      <li class="user-footer">
+        <a href="javascript:;" class="btn btn-default btn-flat btn-block">
+          <i class="fa fa-sign-out"></i>
+          <span>Logout</span>
+        </a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UserMenu',
+  props: ['user']
+}
+</script>

From 7594662d2617a13f9c269d67e037649daae97422 Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 11:03:34 +0200
Subject: [PATCH 3/9] move layout components into own directory

---
 src/components/Dash.vue                           | 6 +++---
 src/components/{ => layout}/DashFooter.vue        | 0
 src/components/{ => layout}/DashHeader.vue        | 7 -------
 src/components/{ => layout}/MessagesMenu.vue      | 7 +++++++
 src/components/{ => layout}/NotificationsMenu.vue | 0
 src/components/{ => layout}/Sidebar.vue           | 0
 src/components/{ => layout}/SidebarMenu.vue       | 0
 src/components/{ => layout}/TasksMenu.vue         | 0
 src/components/{ => layout}/UserMenu.vue          | 0
 9 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/{ => layout}/DashFooter.vue (100%)
 rename src/components/{ => layout}/DashHeader.vue (86%)
 rename src/components/{ => layout}/MessagesMenu.vue (86%)
 rename src/components/{ => layout}/NotificationsMenu.vue (100%)
 rename src/components/{ => layout}/Sidebar.vue (100%)
 rename src/components/{ => layout}/SidebarMenu.vue (100%)
 rename src/components/{ => layout}/TasksMenu.vue (100%)
 rename src/components/{ => layout}/UserMenu.vue (100%)

diff --git a/src/components/Dash.vue b/src/components/Dash.vue
index 61fec054..aa775e1c 100644
--- a/src/components/Dash.vue
+++ b/src/components/Dash.vue
@@ -36,9 +36,9 @@
 <script>
 import faker from 'faker'
 import config from '../config'
-import DashFooter from './DashFooter'
-import DashHeader from './DashHeader'
-import Sidebar from './Sidebar'
+import DashFooter from './layout/DashFooter'
+import DashHeader from './layout/DashHeader'
+import Sidebar from './layout/Sidebar'
 import 'hideseek'
 
 export default {
diff --git a/src/components/DashFooter.vue b/src/components/layout/DashFooter.vue
similarity index 100%
rename from src/components/DashFooter.vue
rename to src/components/layout/DashFooter.vue
diff --git a/src/components/DashHeader.vue b/src/components/layout/DashHeader.vue
similarity index 86%
rename from src/components/DashHeader.vue
rename to src/components/layout/DashHeader.vue
index 163de13e..8915bb94 100644
--- a/src/components/DashHeader.vue
+++ b/src/components/layout/DashHeader.vue
@@ -46,10 +46,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
-.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
-  margin-left: 0;
-}
-</style>
diff --git a/src/components/MessagesMenu.vue b/src/components/layout/MessagesMenu.vue
similarity index 86%
rename from src/components/MessagesMenu.vue
rename to src/components/layout/MessagesMenu.vue
index 7d0ec56f..44a02283 100644
--- a/src/components/MessagesMenu.vue
+++ b/src/components/layout/MessagesMenu.vue
@@ -45,3 +45,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+  margin-left: 0;
+}
+</style>
diff --git a/src/components/NotificationsMenu.vue b/src/components/layout/NotificationsMenu.vue
similarity index 100%
rename from src/components/NotificationsMenu.vue
rename to src/components/layout/NotificationsMenu.vue
diff --git a/src/components/Sidebar.vue b/src/components/layout/Sidebar.vue
similarity index 100%
rename from src/components/Sidebar.vue
rename to src/components/layout/Sidebar.vue
diff --git a/src/components/SidebarMenu.vue b/src/components/layout/SidebarMenu.vue
similarity index 100%
rename from src/components/SidebarMenu.vue
rename to src/components/layout/SidebarMenu.vue
diff --git a/src/components/TasksMenu.vue b/src/components/layout/TasksMenu.vue
similarity index 100%
rename from src/components/TasksMenu.vue
rename to src/components/layout/TasksMenu.vue
diff --git a/src/components/UserMenu.vue b/src/components/layout/UserMenu.vue
similarity index 100%
rename from src/components/UserMenu.vue
rename to src/components/layout/UserMenu.vue

From 3a4de62d8b75d76bf38559deec9b83ab1eb1051f Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 11:14:44 +0200
Subject: [PATCH 4/9] extract message item into own component and add real test
 message

---
 src/components/layout/MessageItem.vue  | 28 ++++++++++++++++++++++++++
 src/components/layout/MessagesMenu.vue | 28 +++++++-------------------
 src/store/state.js                     |  9 ++++++++-
 3 files changed, 43 insertions(+), 22 deletions(-)
 create mode 100644 src/components/layout/MessageItem.vue

diff --git a/src/components/layout/MessageItem.vue b/src/components/layout/MessageItem.vue
new file mode 100644
index 00000000..c66a8a7e
--- /dev/null
+++ b/src/components/layout/MessageItem.vue
@@ -0,0 +1,28 @@
+<template>
+  <li>
+    <a href="javascript:;">
+      <h4>
+        <span>{{message.title}}</span>
+        <small>
+          <i class="fa fa-clock-o"></i>
+          <span>{{message.createdAt}}</span>
+        </small>
+      </h4>
+      <p>{{message.body}}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'MessageItem',
+  props: ['message']
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+  margin-left: 0;
+}
+</style>
diff --git a/src/components/layout/MessagesMenu.vue b/src/components/layout/MessagesMenu.vue
index 44a02283..b41c9d6a 100644
--- a/src/components/layout/MessagesMenu.vue
+++ b/src/components/layout/MessagesMenu.vue
@@ -9,20 +9,9 @@
       <li v-if="userInfo.messages.length > 0">
         <!-- inner menu: contains the messages -->
         <ul class="menu">
-          <li>
-            <!-- start message -->
-            <a href="javascript:;">
-              <!-- Message title and timestamp -->
-              <h4>
-                Support Team
-                <small>
-                  <i class="fa fa-clock-o"></i> 5 mins</small>
-              </h4>
-              <!-- The message -->
-              <p>Why not consider this a test message?</p>
-            </a>
-          </li>
-          <!-- end message -->
+          <message-item v-for="message in userInfo.messages"
+              :key="message.id"
+              :message="message"></message-item>
         </ul>
         <!-- /.menu -->
       </li>
@@ -35,9 +24,13 @@
 
 <script>
 import { mapState } from 'vuex'
+import MessageItem from './MessageItem'
 
 export default {
   name: 'MessagesMenu',
+  components: {
+    MessageItem
+  },
   computed: {
     ...mapState([
       'userInfo'
@@ -45,10 +38,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
-.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
-  margin-left: 0;
-}
-</style>
diff --git a/src/store/state.js b/src/store/state.js
index a9f1170f..c6976bbe 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -5,7 +5,14 @@ export default {
   user: null,
   token: null,
   userInfo: {
-    messages: [{1: 'test', 2: 'test'}],
+    messages: [
+      {
+        id: 1,
+        title: 'Support Team',
+        body: 'Why not consider this a test message?',
+        createdAt: '17 min ago'
+      }
+    ],
     notifications: [],
     tasks: []
   }

From 04ab68f9727e7907f63ce16510868686af21c5fe Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 12:00:32 +0200
Subject: [PATCH 5/9] refactor dashboard into widget components

---
 src/components/views/Dashboard.vue        | 181 +++++++++-------------
 src/components/widgets/Alert.vue          |  36 +++++
 src/components/widgets/InfoBox.vue        |  35 +++++
 src/components/widgets/ProcessInfoBox.vue |  50 ++++++
 4 files changed, 191 insertions(+), 111 deletions(-)
 create mode 100644 src/components/widgets/Alert.vue
 create mode 100644 src/components/widgets/InfoBox.vue
 create mode 100644 src/components/widgets/ProcessInfoBox.vue

diff --git a/src/components/views/Dashboard.vue b/src/components/views/Dashboard.vue
index b2b14410..5d21e4e9 100644
--- a/src/components/views/Dashboard.vue
+++ b/src/components/views/Dashboard.vue
@@ -1,67 +1,51 @@
 <template>
   <!-- Main content -->
   <section class="content">
-    <!-- Info boxes -->
+    <!-- GitHub hint -->
     <div class="row">
-      <div class="alert alert-success alert-dismissible">
-        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-        <h4><i class="icon fa fa-check"></i> CoPilot is open source!</h4>
-        Click on icon to check it out on github. <a href="https://github.com/misterGF/CoPilot" target="_blank"><i class="fa fa-github fa-2x"></i></a>
+      <div class="col-xs-12">
+        <alert :dismissible="true"
+               type="success"
+               :iconClasses="['fa', 'fa-check']"
+               title="CoPilot is open source!">
+          <span>Click on icon to check it out on github.</span>
+          <a href="https://github.com/misterGF/CoPilot" target="_blank">
+            <i class="fa fa-github fa-2x"></i>
+          </a>
+        </alert>
       </div>
-      <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
 
-          <div class="info-box-content">
-            <span class="info-box-text">CPU Traffic</span>
-            <span class="info-box-number">90<small>%</small></span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+      <!-- Info boxes -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-aqua"
+                  :icon-classes="['ion', 'ion-ios-gear-outline']"
+                  text="CPU Traffic"
+                  number="90%"></info-box>
       </div>
       <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Likes</span>
-            <span class="info-box-number">41,410</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-red"
+                  :icon-classes="['fa', 'fa-google-plus']"
+                  text="Likes"
+                  number="41,410"></info-box>
       </div>
       <!-- /.col -->
 
       <!-- fix for small devices only -->
       <div class="clearfix visible-sm-block"></div>
-
+      
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Sales</span>
-            <span class="info-box-number">760</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-green"
+                  :icon-classes="['ion', 'ion-ios-cart-outline']"
+                  text="Sales"
+                  number="760"></info-box>
       </div>
       <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box">
-          <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">New Members</span>
-            <span class="info-box-number">2,000</span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
-        <!-- /.info-box -->
+        <info-box color-class="bg-yellow"
+                  :icon-classes="['ion', 'ion-ios-people-outline']"
+                  text="New Members"
+                  number="2,000"></info-box>
       </div>
       <!-- /.col -->
     </div>
@@ -87,7 +71,9 @@
             </div>
           </div>
         </div>
-        <small class="space"><b>Pro Tip</b> Don"t forget to star us on github!</small>
+        <div class="text-center">
+          <small><b>Pro Tip</b> Don't forget to star us on github!</small>
+        </div>
       </div>
     </div>
     <!-- /.row -->
@@ -95,77 +81,41 @@
     <!-- Main row -->
     <div class="row">
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-yellow">
-          <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Inventory</span>
-            <span class="info-box-number">5,200</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 50%"></div>
-            </div>
-                <span class="progress-description">
-                  50% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-yellow"
+                          :icon-classes="['ion', 'ion-ios-pricetag-outline']"
+                          text="Inventory"
+                          number="5,200"
+                          progress="50"
+                          description="50% increase since May"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-green">
-          <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Mentions</span>
-            <span class="info-box-number">92,050</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 20%"></div>
-            </div>
-                <span class="progress-description">
-                  20% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-green"
+                          :icon-classes="['ion', 'ion-ios-heart-outline']"
+                          text="Mentions"
+                          number="92,050"
+                          progress="20"
+                          description="20% increase in 30 days"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-red">
-          <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Downloads</span>
-            <span class="info-box-number">114,381</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 70%"></div>
-            </div>
-                <span class="progress-description">
-                  70% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-red"
+                          :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
+                          text="Downloads"
+                          number="114,381"
+                          progress="70"
+                          description="70% increase since yesterday"></process-info-box>
       </div>
+      <!-- /.col -->
       <div class="col-md-3 col-sm-6 col-xs-12">
-        <div class="info-box bg-aqua">
-          <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
-
-          <div class="info-box-content">
-            <span class="info-box-text">Direct Messages</span>
-            <span class="info-box-number">163,921</span>
-
-            <div class="progress">
-              <div class="progress-bar" style="width: 40%"></div>
-            </div>
-                <span class="progress-description">
-                  40% Increase
-                </span>
-          </div>
-          <!-- /.info-box-content -->
-        </div>
+        <process-info-box color-class="bg-aqua"
+                          :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
+                          text="Direct Messages"
+                          number="163,921"
+                          progress="40"
+                          description="40% increase compared to last year"></process-info-box>
       </div>
+      <!-- /.col -->
     </div>
     <!-- /.row -->
   </section>
@@ -174,8 +124,17 @@
 
 <script>
 import Chart from 'chart.js'
+import Alert from '../widgets/Alert'
+import InfoBox from '../widgets/InfoBox'
+import ProcessInfoBox from '../widgets/ProcessInfoBox'
 
 export default {
+  name: 'Dashboard',
+  components: {
+    Alert,
+    InfoBox,
+    ProcessInfoBox
+  },
   data () {
     return {
       generateRandomNumbers (numbers, max, min) {
diff --git a/src/components/widgets/Alert.vue b/src/components/widgets/Alert.vue
new file mode 100644
index 00000000..64a9f686
--- /dev/null
+++ b/src/components/widgets/Alert.vue
@@ -0,0 +1,36 @@
+<template>
+  <div :class="['alert', 'alert-' + type, {'alert-dismissible': dismissible}]">
+    <button v-if="dismissible" type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <h4>
+      <i :class="['icon', iconClasses]"></i>
+      <span>{{title}}</span>
+    </h4>
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  props: {
+    dismissible: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info'
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/components/widgets/InfoBox.vue b/src/components/widgets/InfoBox.vue
new file mode 100644
index 00000000..0c8c7f29
--- /dev/null
+++ b/src/components/widgets/InfoBox.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="info-box">
+    <span :class="['info-box-icon', colorClass]">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>
diff --git a/src/components/widgets/ProcessInfoBox.vue b/src/components/widgets/ProcessInfoBox.vue
new file mode 100644
index 00000000..342ecf2f
--- /dev/null
+++ b/src/components/widgets/ProcessInfoBox.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="['info-box', colorClass]">
+    <span class="info-box-icon">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+      <div class="progress">
+        <div class="progress-bar" :style="{width: progress + '%'}"></div>
+      </div>
+      <span class="progress-description">{{description}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    progress: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0 && value <= 100
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>

From c75e5ab80045d90bdc57be009531034162334fce Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 14:42:36 +0200
Subject: [PATCH 6/9] fix binding error of progress in dashboard view

---
 src/components/views/Dashboard.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/Dashboard.vue b/src/components/views/Dashboard.vue
index 5d21e4e9..fb5b24ab 100644
--- a/src/components/views/Dashboard.vue
+++ b/src/components/views/Dashboard.vue
@@ -85,7 +85,7 @@
                           :icon-classes="['ion', 'ion-ios-pricetag-outline']"
                           text="Inventory"
                           number="5,200"
-                          progress="50"
+                          :progress="50"
                           description="50% increase since May"></process-info-box>
       </div>
       <!-- /.col -->
@@ -94,7 +94,7 @@
                           :icon-classes="['ion', 'ion-ios-heart-outline']"
                           text="Mentions"
                           number="92,050"
-                          progress="20"
+                          :progress="20"
                           description="20% increase in 30 days"></process-info-box>
       </div>
       <!-- /.col -->
@@ -103,7 +103,7 @@
                           :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
                           text="Downloads"
                           number="114,381"
-                          progress="70"
+                          :progress="70"
                           description="70% increase since yesterday"></process-info-box>
       </div>
       <!-- /.col -->
@@ -112,7 +112,7 @@
                           :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
                           text="Direct Messages"
                           number="163,921"
-                          progress="40"
+                          :progress="40"
                           description="40% increase compared to last year"></process-info-box>
       </div>
       <!-- /.col -->

From b820589dbb162c28fc5bfaf1f62ca64b7726e8c8 Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Sun, 19 Aug 2018 14:43:03 +0200
Subject: [PATCH 7/9] add a nice notifications menu

the menu has a tab for old and a tab for new notifications
---
 src/components/layout/NotificationItem.vue  |  56 ++++++++++
 src/components/layout/NotificationsMenu.vue | 111 +++++++++++++++++---
 src/store/state.js                          |  38 ++++++-
 3 files changed, 190 insertions(+), 15 deletions(-)
 create mode 100644 src/components/layout/NotificationItem.vue

diff --git a/src/components/layout/NotificationItem.vue b/src/components/layout/NotificationItem.vue
new file mode 100644
index 00000000..eeb0e6ac
--- /dev/null
+++ b/src/components/layout/NotificationItem.vue
@@ -0,0 +1,56 @@
+<template>
+  <li class="notification-item">
+    <a href="javascript:;">
+      <h4>
+        <span>{{ notification.title }}</span>
+        <small class="time pull-right">
+          <i class="fa fa-clock-o"></i>
+          <span>{{ notification.createdAt }}</span>
+        </small>
+      </h4>
+      <p>{{ notification.body }}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu {
+  li > a > h4,
+  li > a > p {
+    margin: 0;
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  li > a > h4 {
+    font-size: 15px;
+
+    small {
+      font-size: 10px;
+    }
+  }
+
+  li > a > p {
+    font-size: 12px;
+  }
+
+  li > a > h4 > span {
+    display: inline-block;
+  }
+
+  li > a > h4 > small.time {
+    margin-top: 3px;
+  }
+}
+</style>
diff --git a/src/components/layout/NotificationsMenu.vue b/src/components/layout/NotificationsMenu.vue
index 36fc0c4a..5a2e6ecf 100644
--- a/src/components/layout/NotificationsMenu.vue
+++ b/src/components/layout/NotificationsMenu.vue
@@ -2,24 +2,38 @@
   <li class="dropdown notifications-menu">
     <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-bell-o"></i>
-      <span class="label label-warning">{{ userInfo.notifications | count }}</span>
+      <span class="label label-warning">{{ newNotifications | count }}</span>
     </a>
     <ul class="dropdown-menu">
-      <li class="header">You have {{ userInfo.notifications | count }} notification(s)</li>
-      <li v-if="userInfo.notifications.length > 0">
-        <!-- Inner Menu: contains the notifications -->
-        <ul class="menu">
-          <li>
-            <!-- start notification -->
-            <a href="javascript:;">
-              <i class="fa fa-users text-aqua"></i> 5 new members joined today
-            </a>
+      <li class="header">
+        <div class="row no-margin">
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'new'}" @click="switchTab($event, 'new')">
+              <a href="javascript:;">New</a>
+            </span>
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'old'}" @click="switchTab($event, 'old')">
+              <a href="javascript:;">Old</a>
+            </span>
+        </div>
+      </li>
+      <li>
+        <ul v-if="tab === 'new'" class="menu">
+          <notification-item v-for="notification in newNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!newNotifications.length">
+            <span class="center-block text-center">There are no new notifications</span>
+          </li>
+        </ul>
+        <ul v-if="tab === 'old'" class="menu">
+          <notification-item v-for="notification in oldNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!oldNotifications.length">
+            <span class="center-block text-center">There are no old notifications</span>
           </li>
-          <!-- end notification -->
         </ul>
       </li>
-      <li class="footer" v-if="userInfo.notifications.length > 0">
-        <a href="javascript:;">View all</a>
+      <li v-if="newNotifications.length && tab === 'new'" class="footer">
+        <a href="javascript:;" @click="markAllAsRead">
+          <i class="fa fa-check"></i>
+          <span>Mark all as read</span>
+        </a>
       </li>
     </ul>
   </li>
@@ -27,13 +41,82 @@
 
 <script>
 import { mapState } from 'vuex'
+import NotificationItem from './NotificationItem'
 
 export default {
   name: 'NotificationsMenu',
+  components: {
+    NotificationItem
+  },
+  data() {
+    return {
+      tab: 'new'
+    }
+  },
   computed: {
     ...mapState([
       'userInfo'
-    ])
+    ]),
+    newNotifications() {
+      return this.userInfo.notifications.filter(n => !n.readAt)
+    },
+    oldNotifications() {
+      return this.userInfo.notifications.filter(n => n.readAt)
+    }
+  },
+  methods: {
+    markAllAsRead() {
+      event.stopPropagation()
+
+      this.userInfo.notifications.filter(n => !n.readAt).forEach(function(notification) {
+        notification.readAt = new Date().toUTCString
+      })
+    },
+    switchTab(event, tab) {
+      event.stopPropagation()
+
+      this.tab = tab
+    }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu {
+  width: 400px;
+
+  li.header {
+    padding: 0;
+
+    span.tab-link {
+      padding: 4px;
+      text-align: center;
+      cursor: pointer;
+
+      a {
+        color: #444;
+      }
+    }
+    span.tab-link.active {
+      font-weight: bold;
+      border-bottom: 2px solid #3c8dbc;
+    }
+
+    span:hover.tab-link > a {
+      color: #3c8dbc !important;
+    }
+  }
+
+  li > ul.menu {
+    max-height: 300px;
+
+    li > span {
+      padding: 10px;
+    }
+  }
+
+  li:hover.footer > a {
+    color: #3c8dbc !important;
+  }
+}
+</style>
diff --git a/src/store/state.js b/src/store/state.js
index c6976bbe..317896da 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -13,7 +13,43 @@ export default {
         createdAt: '17 min ago'
       }
     ],
-    notifications: [],
+    notifications: [
+      {
+        id: 1,
+        title: 'Birthday Reminder',
+        body: 'Today is Brians birthday.',
+        createdAt: 'just now',
+        readAt: null
+      },
+      {
+        id: 2,
+        title: 'Bank Holiday in London',
+        body: 'Our office in London has a bank holiday today. Do not expect them to answer the phone.',
+        createdAt: '4 hours ago',
+        readAt: null
+      },
+      {
+        id: 3,
+        title: 'Birthday Reminder',
+        body: 'Today is Christians birthday.',
+        createdAt: '27 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 4,
+        title: 'Birthday Reminder',
+        body: 'Today is Tanjas birthday.',
+        createdAt: '29 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 5,
+        title: 'Sales Bonus received',
+        body: 'You received your monthly sales bonus of 3%. This month you made $2,700 extra!',
+        createdAt: '7 hours ago',
+        readAt: null
+      }
+    ],
     tasks: []
   }
 }

From 5db6754b6338beb790c8981763e95f7b8b77f352 Mon Sep 17 00:00:00 2001
From: Namoshek <marvin-mall@msn.com>
Date: Fri, 31 Aug 2018 22:56:01 +0200
Subject: [PATCH 8/9] convert scss of notification components into css

---
 src/components/layout/MessageItem.vue       |  2 +-
 src/components/layout/NotificationsMenu.vue | 63 +++++++++------------
 2 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/src/components/layout/MessageItem.vue b/src/components/layout/MessageItem.vue
index c66a8a7e..790c7c00 100644
--- a/src/components/layout/MessageItem.vue
+++ b/src/components/layout/MessageItem.vue
@@ -20,7 +20,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
 .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
   margin-left: 0;
diff --git a/src/components/layout/NotificationsMenu.vue b/src/components/layout/NotificationsMenu.vue
index 5a2e6ecf..0f7e80d6 100644
--- a/src/components/layout/NotificationsMenu.vue
+++ b/src/components/layout/NotificationsMenu.vue
@@ -81,42 +81,35 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu {
   width: 400px;
-
-  li.header {
-    padding: 0;
-
-    span.tab-link {
-      padding: 4px;
-      text-align: center;
-      cursor: pointer;
-
-      a {
-        color: #444;
-      }
-    }
-    span.tab-link.active {
-      font-weight: bold;
-      border-bottom: 2px solid #3c8dbc;
-    }
-
-    span:hover.tab-link > a {
-      color: #3c8dbc !important;
-    }
-  }
-
-  li > ul.menu {
-    max-height: 300px;
-
-    li > span {
-      padding: 10px;
-    }
-  }
-
-  li:hover.footer > a {
-    color: #3c8dbc !important;
-  }
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header {
+  padding: 0;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link {
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link a {
+  color: #444;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link.active {
+  font-weight: bold;
+  border-bottom: 2px solid #3c8dbc;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span:hover.tab-link > a {
+  color: #3c8dbc !important;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu {
+  max-height: 300px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu li > span {
+  padding: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li:hover.footer > a {
+  color: #3c8dbc !important;
 }
 </style>

From 985a4ebd8fdbfe79dc94447087e3ded2f966a216 Mon Sep 17 00:00:00 2001
From: Gil Ferreira <Gfgilly@gmail.com>
Date: Thu, 3 Jan 2019 12:30:09 -0500
Subject: [PATCH 9/9] Removed scss from notification item vue as well

---
 src/components/layout/NotificationItem.vue | 48 +++++++++-------------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/layout/NotificationItem.vue b/src/components/layout/NotificationItem.vue
index eeb0e6ac..4546bdd4 100644
--- a/src/components/layout/NotificationItem.vue
+++ b/src/components/layout/NotificationItem.vue
@@ -24,33 +24,25 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu {
-  li > a > h4,
-  li > a > p {
-    margin: 0;
-    white-space: normal;
-    word-break: break-word;
-  }
-
-  li > a > h4 {
-    font-size: 15px;
-
-    small {
-      font-size: 10px;
-    }
-  }
-
-  li > a > p {
-    font-size: 12px;
-  }
-
-  li > a > h4 > span {
-    display: inline-block;
-  }
-
-  li > a > h4 > small.time {
-    margin-top: 3px;
-  }
+<style scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4, .navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  margin: 0;
+  white-space: normal;
+  word-break: break-word;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 {
+  font-size: 15px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 small {
+  font-size: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  font-size: 12px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > span {
+  display: inline-block;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > small.time {
+  margin-top: 3px;
 }
 </style>