refactor: minor bug fixes and refactors

src/App.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'App'
 }
 </script>
 

src/containers/TheContainer.vue

@@ -23,7 +23,7 @@ import TheHeader from './TheHeader'
 import TheFooter from './TheFooter'
 
 export default {
-  name: 'full',
+  name: 'TheContainer',
   components: {
     TheSidebar,
     TheHeader,

src/containers/TheFooter.vue

@@ -2,7 +2,7 @@
   <CFooter>
     <div>
       <a href="https://coreui.io">CoreUI</a>
-      <span class="ml-1">&copy; 2018 creativeLabs.</span>
+      <span class="ml-1">&copy; 2019 creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>

src/containers/_nav.js

@@ -447,6 +447,7 @@ export default [
           href: 'http://coreui.io/vue/',
           icon: 'cui-cloud-download',
           addLinkClasses: 'c-nav-link-success',
+          target: '_blank'
         },
         attrs: {
           class: 'mt-auto',
@@ -461,6 +462,7 @@ export default [
           href: 'http://coreui.io/pro/vue/',
           icon: 'cui-layers',
           addLinkClasses: 'c-nav-link-danger',
+          target: '_blank'
         }
       }
     ]

src/router/index.js

@@ -10,7 +10,7 @@ const Dashboard = () => import('@/views/Dashboard')
 const Colors = () => import('@/views/theme/Colors')
 const Typography = () => import('@/views/theme/Typography')
 
-const Charts = () => import('@/views/Charts')
+const Charts = () => import('@/views/charts/Charts')
 const Widgets = () => import('@/views/widgets/Widgets')
 
 // Views - Components

src/views/base/Breadcrumbs.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col>
       <CCard>
@@ -25,13 +23,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'breadcrumbs',
+  name: 'Breadcrumbs',
   data () {
     return {
       items: [

src/views/base/Cards.vue

@@ -263,7 +263,7 @@
 <script>
 
 export default {
-  name: 'cards',
+  name: 'Cards',
   data: function () {
     return {
       show: true,

src/views/base/Carousels.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <CRow>
     <CCol md="12" lg="7">
       <CCard>
@@ -42,11 +41,10 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
 </template>
 
 <script>
 export default {
-  name: 'carousels'
+  name: 'Carousels'
 }
 </script>

src/views/base/Collapses.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -37,13 +35,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'collapses',
+  name: 'Collapses',
   data () {
     return {
       showCollapse: true,

src/views/base/Forms.vue

@@ -852,7 +852,7 @@
 
 <script>
 export default {
-  name: 'forms',
+  name: 'Forms',
   data () {
     return {
       selected: [], // Must be an array reference!

src/views/base/Jumbotrons.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol>
@@ -79,11 +78,10 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'jumbotrons'
+  name: 'Jumbotrons'
 }
 </script>

src/views/base/ListGroups.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol md="6">
@@ -271,11 +270,10 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'list-groups'
+  name: 'ListGroups'
 }
 </script>

src/views/base/Navbars.vue

@@ -1,35 +1,5 @@
 <template>
-  <div class="wrapper">
   <div>
-      <!-- <CCard>
-        <CNavbar toggleable="md" light variant="light">
-          <CNavbarToggle class="hehe" @click="test2 = !test2"/>
-          <CLink class="navbar-brand">NavBar</CLink>
-          <CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
-            <CNavbarNav pills class="navbar-nav">
-              <CNavItem>
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe1
-              </CNavItem>
-              <CNavItem class="nav-item">
-                hehehe2
-              </CNavItem>
-              <DefaultHeaderDropdownAccnt/>
-            </CNavbarNav>
-            <CNavbarNav class="ml-auto">
-              <CDropdown right class="nav-item " toggle-classes="nav-link">
-                <CDropdownItem><i class="cui-file" /> Projects
-                  <CBadge variant="primary">32</CBadge>
-                </CDropdownItem>
-                <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
-                <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
-              </CDropdown>
-            </CNavbarNav>
-          </CCollapse>
-        </CNavbar>
-      </CCard> -->
     <CCard>
       <CCardHeader>
         <i class="fa fa-align-justify"></i>
@@ -198,15 +168,10 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 <script>
-import DefaultHeaderDropdownAccnt from '../../containers/DefaultHeaderDropdownAccnt'
 export default {
-  name: 'navbars',
+  name: 'Navbars',
-  components: {
-    DefaultHeaderDropdownAccnt
-  },
   data () {
     return {
       show: false,

src/views/base/Navs.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -156,12 +155,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'navs',
+  name: 'Navs',
   data () {
     return {
       item: 2

src/views/base/Paginations.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -80,12 +79,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'paginations',
+  name: 'Paginations',
   data () {
     return {
       currentPage: 3,

src/views/base/Popovers.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -90,12 +89,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'popovers',
+  name: 'Popovers',
   data () {
     return {
       placements: [

src/views/base/ProgressBars.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -203,12 +202,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'progress-bars',
+  name: 'ProgressBars',
   data () {
     return {
       counter: 73,
@@ -235,8 +233,6 @@ export default {
   methods: {
     clicked () {
       this.counter = Math.random() * this.max
-      // console.log('Change progress to ' +
-      //     Math.round(this.counter * 100) / 100)
     }
   },
   mounted () {

src/views/base/Switches.vue

@@ -526,7 +526,7 @@
 
 <script>
 export default {
-  name: 'switches',
+  name: 'Switches',
   data () {
     return {
       variants: [
@@ -538,9 +538,21 @@ export default {
         { key: 'size_prop', label: 'Size prop' }
       ],
       items: [
-        {size: 'Large', example: {shape: '3d', variant: 'primary', size: 'lg', checked: true}, size_prop: 'Add following prop <code>size="lg"</code>'},
+        {
-        {size: 'Normal', example: {shape: '3d', variant: 'primary', size: '', checked: true}, size_prop: '-'},
+          size: 'Large', 
-        {size: 'Small', example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, size_prop: 'Add following prop <code>size="sm"</code>'}
+          example: { shape: '3d', variant: 'primary', size: 'lg', checked: true }, 
+          size_prop: 'Add following prop <code>size="lg"</code>'
+        },
+        {
+          size: 'Normal', 
+          example: { shape: '3d', variant: 'primary', size: '', checked: true }, 
+          size_prop: '-'
+        },
+        {
+          size: 'Small', 
+          example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, 
+          size_prop: 'Add following prop <code>size="sm"</code>'
+        }
       ],
       checker: 'yes',
       radio: 'primary',
@@ -551,8 +563,7 @@ export default {
       labelTxt: {
         labelOn: 'yes',
         labelOff: 'no'
-      },
+      }
-
     }
   }
 }

src/views/base/Table.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: 'TableWrapper',
+  name: 'Table',
   props: {
     items: Array,
     fields: {
@@ -49,7 +49,7 @@ export default {
         : status === 'Inactive' ? 'secondary'
           : status === 'Pending' ? 'warning'
             : status === 'Banned' ? 'danger' : 'primary'
-    },
+    }
   }
 }
 </script>

src/views/base/Tables.vue

@@ -137,10 +137,7 @@
         />
       </CCol>
     </CRow>
-
-
   </div>
-
 </template>
 
 <script>
@@ -154,42 +151,40 @@ const fields = [
   { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
 ]
 const items = [
-  {number:11.1, username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
+  { username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
-  {number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
+  { username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
-  {number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
+  { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  {number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
+  { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  {number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
+  { username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  {number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
+  { username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  {number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
+  { username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  {number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
+  { username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
-  {number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
+  { username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-  {number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
+  { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
 ]
 
 export default {
-  name: 'tables',
+  name: 'Tables',
   components: { CTableWrapper },
   data () {
     return {
-      items: items,
+      items,
-      fields: fields,
+      fields,
-      page: 1,
-      pages: null,
       details: [],
     }
   },

src/views/base/Tabs.vue

@@ -116,7 +116,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <!-- <CCol xs="12" lg="6">
+      <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
             Tabs with icons
@@ -156,7 +156,7 @@
             </CTabs>
           </CCardBody>
         </CCard>
-      </CCol> -->
+      </CCol>
       <CCol xs="12" lg="6">
         <CCard>
           <CCardHeader>
@@ -204,7 +204,7 @@
 
 <script>
 export default {
-  name: 'tabs',
+  name: 'Tabs',
   data () {
     return {
       tabs: [

src/views/base/Tooltips.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CCard>
       <CCardHeader>
@@ -84,12 +83,11 @@
       </CCardBody>
     </CCard>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'tooltips',
+  name: 'Tooltips',
   data () {
     return {
       placements: [

src/views/buttons/BrandButtons.vue

@@ -1,5 +1,4 @@
 <template>
-  <div>
   <CRow>
     <CCol col="12">
       <CCard>
@@ -18,9 +17,7 @@
         </CCardHeader>
         <CCardBody>
           <small>Usage </small>
-            <code>
+          <code>{{ $options.usage }}</code>
-              &lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
-            </code>
           <hr/>
           <h6>
             Size Small
@@ -76,9 +73,7 @@
         </CCardHeader>
         <CCardBody>
           <small>Usage </small>
-              <code>
+            <code>{{ $options.iconsOnlyUsage }}</code>
-                {{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
-              </code>
           <hr/>
           <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
@@ -128,7 +123,10 @@
           <strong>Brand Button </strong> <small>Text only</small>
         </CCardHeader>
         <CCardBody>
-            <small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
+          <small>Usage </small> 
+          <code>
+            {{ $options.textOnlyUsage }}
+          </code>
           <hr/>
           <h6>Size Small <small>Add <code>size="sm"</code></small></h6>
           <p>
@@ -172,12 +170,14 @@
       </CCard>
     </CCol>
   </CRow>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'brand-buttons',
+  name: 'BrandButtons',
+  usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
+  iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
+  textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
   brands: [
     'facebook',
     'twitter',

src/views/buttons/ButtonGroups.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12">
       <CCard>
@@ -203,19 +201,9 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 <script>
 export default {
-  name: 'button-groups',
+  name: 'ButtonGroups',
-  data () {
-    return {
-      myToggle: false,
-      myToggle2: false,
-      itemsCount: 33
-
-    }
-  }
 }
 </script>

src/views/buttons/Dropdowns.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="wrapper">
   <div>
     <CRow>
       <CCol col="12" md="6">
@@ -355,7 +354,6 @@
       </CCol>
     </CRow>
   </div>
-  </div>
 </template>
 
 <script>

src/views/buttons/StandardButtons.vue

@@ -696,15 +696,9 @@
 
 <script>
 export default {
-  name: 'standard-buttons',
+  name: 'StandardButtons',
   data () {
     return { togglePress: false }
   }
 }
 </script>
-
-<style scoped>
-  .btn.disabled {
-    cursor: auto;
-  }
-</style>

src/views/charts/Charts.vue

@@ -47,7 +47,7 @@
   </div>
 </template>
 <script>
-import * as Charts from './charts/index.js'
+import * as Charts from './index.js'
 
 export default {
   name: 'Charts',

src/views/icons/Flags.vue

@@ -33,9 +33,11 @@
 <script>
 import { iconSet } from '@coreui/icons/flags'
 export default {
-  name: 'flags',
+  name: 'Flags',
   iconSet,
   computed: {
+    // Avoid duplication caused by displaying 1x1 and 4x3 formats
+    // (adding Q to name makes icon quadratic)
     displayedFlags () {
       return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
     }

src/views/notifications/Alerts.vue

@@ -1,6 +1,4 @@
 <template>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -178,13 +176,11 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'alerts',
+  name: 'Alerts',
   data () {
     return {
       dismissSecs: 10,

src/views/notifications/Badges.vue

@@ -1,6 +1,4 @@
 <template functional>
-  <div class="wrapper">
-    <div>
   <CRow>
     <CCol col="12" md="6">
       <CCard>
@@ -84,12 +82,10 @@
       </CCard>
     </CCol>
   </CRow>
-    </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: 'badges'
+  name: 'Badges'
 }
 </script>

src/views/notifications/Modals.vue

@@ -176,7 +176,7 @@
 
 <script>
 export default {
-  name: 'modals',
+  name: 'Modals',
   data () {
     return {
       myModal: false,

src/views/theme/ColorTheme.vue

@@ -15,10 +15,7 @@ export default {
   name: 'ColorTheme',
   components: { ColorView },
   props: {
-    color: {
+    color: String,
-      type: String,
-      default: 'bg-secondary'
-    }
   }
 }
 </script>

src/views/theme/Colors.vue

@@ -37,32 +37,13 @@
         </CRow>
       </CCardBody>
     </CCard>
-    <CCard >
-      <CCardHeader>
-        <i class="cui-drop"></i> Additional colors
-      </CCardHeader>
-      <CCardBody>
-        <CRow>
-          <ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
-          <ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
-          <ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
-          <ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
-          <ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
-          <ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
-          <ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
-          <ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
-          <ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
-          <ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
-        </CRow>
-      </CCardBody>
-    </CCard>
   </div>
 </template>
 
 <script>
 import ColorTheme from './ColorTheme'
 export default {
-  name: 'colors',
+  name: 'Colors',
   components: { ColorTheme }
 }
 </script>

src/views/theme/Typography.vue

@@ -215,6 +215,6 @@
 
 <script>
 export default {
-  name: 'typography'
+  name: 'Typography'
 }
 </script>

src/views/users/UsersData.js

@@ -1,5 +1,4 @@
 const usersData = [
-  // {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
   {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
   {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
   {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},