diff --git a/package.json b/package.json
index 5e9f803e..61d4523f 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,14 @@
     "chart.js": "^2.7.2",
     "core-js": "^2.5.7",
     "css-vars-ponyfill": "^1.9.0",
-    "flag-icon-css": "^3.0.0",
+    "flag-icon-css": "^3.2.0",
     "font-awesome": "^4.7.0",
+    "nestable2": "^1.6.0",
     "perfect-scrollbar": "^1.4.0",
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.17",
     "vue-chartjs": "^3.4.0",
+    "vue-form-wizard": "^0.8.4",
     "vue-perfect-scrollbar": "^0.1.0",
     "vue-router": "^3.0.1"
   },
diff --git a/public/img/ov_logo.png b/public/img/ov_logo.png
new file mode 100644
index 00000000..f20e61e8
Binary files /dev/null and b/public/img/ov_logo.png differ
diff --git a/public/index.html b/public/index.html
index 97c83a62..1959897e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>CoreUI - Vue Open Source Bootstrap Admin Template</title>
+    <link rel="icon" href="http://olsonvisual.com/wp-content/uploads/2017/01/cropped-OVfavicon-32x32.png">
+    <title>Olson Visual - Admin Panel</title>
   </head>
 
   <!-- BODY options, add following classes to body to change options
diff --git a/src/_nav.js b/src/_nav.js
index 00378de3..f69c0503 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -6,268 +6,181 @@ export default {
       icon: 'icon-speedometer',
       badge: {
         variant: 'primary',
-        text: 'NEW'
       }
     },
     {
-      title: true,
-      name: 'Theme',
-      class: '',
-      wrapper: {
-        element: '',
-        attributes: {}
-      }
-    },
-    {
-      name: 'Colors',
-      url: '/theme/colors',
-      icon: 'icon-drop'
-    },
-    {
-      name: 'Typography',
-      url: '/theme/typography',
-      icon: 'icon-pencil'
-    },
-    {
-      title: true,
-      name: 'Components',
-      class: '',
-      wrapper: {
-        element: '',
-        attributes: {}
-      }
-    },
-    {
-      name: 'Base',
-      url: '/base',
-      icon: 'icon-puzzle',
+      name: 'Job Tickets',
+      url: '/tickets/list',
+      icon: 'icon-bell',
       children: [
         {
-          name: 'Breadcrumbs',
-          url: '/base/breadcrumbs',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Cards',
-          url: '/base/cards',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Carousels',
-          url: '/base/carousels',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Collapses',
-          url: '/base/collapses',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Forms',
-          url: '/base/forms',
-          icon: 'icon-puzzle'
+            name: 'Create New',
+            url: '/tickets/create',
+            icon: 'icon-puzzle'
         },
         {
-          name: 'Jumbotrons',
-          url: '/base/jumbotrons',
+          name: 'Open',
+          url: '/tickets/list',
           icon: 'icon-puzzle'
         },
         {
-          name: 'List Groups',
-          url: '/base/list-groups',
+          name: 'Assinged to Me',
+          url: '/tickets/list',
           icon: 'icon-puzzle'
         },
         {
-          name: 'Navs',
-          url: '/base/navs',
+          name: 'Due Today',
+          url: '/tickets/list',
           icon: 'icon-puzzle'
         },
         {
-          name: 'Navbars',
-          url: '/base/navbars',
+          name: 'Ready to Invoice',
+          url: '/tickets/list',
           icon: 'icon-puzzle'
-        },
-        {
-          name: 'Paginations',
-          url: '/base/paginations',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Popovers',
-          url: '/base/popovers',
-          icon: 'icon-puzzle'
-        },
-        {
-          name: 'Progress Bars',
-          url: '/base/progress-bars',
-          icon: 'icon-puzzle'
-        },
+        }]
+    },
+    {
+      name: 'Customers',
+      url: '/customers',
+      icon: 'icon-user'
+    },
+    {
+      name: 'Products',
+      url: '/products',
+      icon: 'icon-bell',
+      children: [
         {
-          name: 'Switches',
-          url: '/base/switches',
+          name: 'Items',
+          url: '/products/create',
           icon: 'icon-puzzle'
         },
         {
-          name: 'Tables',
-          url: '/base/tables',
+          name: 'Attributes',
+          url: '/base/cards',
           icon: 'icon-puzzle'
         },
         {
-          name: 'Tabs',
-          url: '/base/tabs',
+          name: 'Inventory',
+          url: '/base/carousels',
           icon: 'icon-puzzle'
         },
         {
-          name: 'Tooltips',
-          url: '/base/tooltips',
-          icon: 'icon-puzzle'
-        }
-      ]
+          name: 'Vendors',
+          url: '/charts',
+          icon: 'icon-pie-chart'
+        },]
     },
     {
-      name: 'Buttons',
-      url: '/buttons',
-      icon: 'icon-cursor',
-      children: [
-        {
-          name: 'Buttons',
-          url: '/buttons/standard-buttons',
-          icon: 'icon-cursor'
-        },
-        {
-          name: 'Button Dropdowns',
-          url: '/buttons/dropdowns',
-          icon: 'icon-cursor'
-        },
-        {
-          name: 'Button Groups',
-          url: '/buttons/button-groups',
-          icon: 'icon-cursor'
-        },
-        {
-          name: 'Brand Buttons',
-          url: '/buttons/brand-buttons',
-          icon: 'icon-cursor'
-        }
-      ]
+      title: true,
+      name: 'Finance',
+      class: '',
+      wrapper: {
+        element: '',
+        attributes: {}
+      }
     },
     {
-      name: 'Charts',
+      name: 'Invoices',
+      url: '/invoices',
+      icon: 'icon-pie-chart'
+    },{
+      name: 'Estimates',
+      url: '/charts',
+      icon: 'icon-pie-chart'
+    },{
+      name: 'Purchase Orders',
       url: '/charts',
       icon: 'icon-pie-chart'
     },
     {
-      name: 'Icons',
-      url: '/icons',
-      icon: 'icon-star',
+      title: true,
+      name: 'Reports',
+      class: '',
+      wrapper: {
+        element: '',
+        attributes: {}
+      }
+    },
+    {
+      name: 'Finance',
+      url: '#',
+      icon: 'icon-puzzle',
       children: [
         {
-          name: 'CoreUI Icons',
-          url: '/icons/coreui-icons',
-          icon: 'icon-star',
-          badge: {
-            variant: 'info',
-            text: 'NEW'
-          }
-        },
-        {
-          name: 'Flags',
-          url: '/icons/flags',
-          icon: 'icon-star'
-        },
-        {
-          name: 'Font Awesome',
-          url: '/icons/font-awesome',
-          icon: 'icon-star',
-          badge: {
-            variant: 'secondary',
-            text: '4.7'
-          }
+          name: 'Report 1',
+          url: '/base/breadcrumbs',
+          icon: 'icon-puzzle'
         },
         {
-          name: 'Simple Line Icons',
-          url: '/icons/simple-line-icons',
-          icon: 'icon-star'
+          name: 'Report 2',
+          url: '/base/cards',
+          icon: 'icon-puzzle'
         }
       ]
     },
     {
-      name: 'Notifications',
-      url: '/notifications',
-      icon: 'icon-bell',
+      name: 'Sales',
+      url: '#',
+      icon: 'icon-puzzle',
       children: [
         {
-          name: 'Alerts',
-          url: '/notifications/alerts',
-          icon: 'icon-bell'
-        },
-        {
-          name: 'Badges',
-          url: '/notifications/badges',
-          icon: 'icon-bell'
+          name: 'Report 1',
+          url: '/base/breadcrumbs',
+          icon: 'icon-puzzle'
         },
         {
-          name: 'Modals',
-          url: '/notifications/modals',
-          icon: 'icon-bell'
+          name: 'Report 2',
+          url: '/base/cards',
+          icon: 'icon-puzzle'
         }
       ]
     },
     {
-      name: 'Widgets',
-      url: '/widgets',
-      icon: 'icon-calculator',
-      badge: {
-        variant: 'primary',
-        text: 'NEW'
-      }
-    },
-    {
-      divider: true
+      name: 'Backlog',
+      url: '/backlog',
+      icon: 'icon-pie-chart'
     },
     {
+      name: 'Admin',
+      url: '/base',
       title: true,
-      name: 'Extras'
+      icon: 'icon-puzzle'
     },
     {
-      name: 'Pages',
-      url: '/pages',
-      icon: 'icon-star',
+      name: 'User Management',
+      url: '#',
+      icon: 'icon-puzzle',
       children: [
         {
-          name: 'Login',
-          url: '/pages/login',
-          icon: 'icon-star'
-        },
-        {
-          name: 'Register',
-          url: '/pages/register',
-          icon: 'icon-star'
+          name: 'Users',
+          url: '/base/breadcrumbs',
+          icon: 'icon-puzzle'
         },
         {
-          name: 'Error 404',
-          url: '/pages/404',
-          icon: 'icon-star'
+          name: 'Roles',
+          url: '/base/cards',
+          icon: 'icon-puzzle'
         },
         {
-          name: 'Error 500',
-          url: '/pages/500',
-          icon: 'icon-star'
+          name: 'Permissions',
+          url: '/base/carousels',
+          icon: 'icon-puzzle'
         }
+
       ]
     },
     {
-      name: 'Download CoreUI',
+      name: 'Settings',
+      url: '/base/collapses',
+      icon: 'icon-puzzle'
+    }
+    ,
+    {
+      name: 'Media Manager',
       url: 'http://coreui.io/vue/',
       icon: 'icon-cloud-download',
       class: 'mt-auto',
       variant: 'success'
-    },
-    {
-      name: 'Try CoreUI PRO',
-      url: 'http://coreui.io/pro/vue/',
-      icon: 'icon-layers',
-      variant: 'danger'
     }
   ]
 }
diff --git a/src/assets/scss/_custom.scss b/src/assets/scss/_custom.scss
index 15d367af..3ecf7061 100644
--- a/src/assets/scss/_custom.scss
+++ b/src/assets/scss/_custom.scss
@@ -1 +1,1078 @@
-// Here you can add other styles
+// checklist CSS
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+.todo-list>li {
+  border-radius: 2px;
+  padding: 10px;
+  background: #f4f4f4;
+  margin-bottom: 2px;
+  border-left: 2px solid #e6e7e8;
+  color: #444;
+}
+.todo-list>li .label {
+  margin-left: 10px;
+  font-size: 9px;
+}
+.todo-list>li input[type="checkbox"] {
+  margin: 0 10px;
+}
+.todo-list>li .tools {
+  display: none;
+  float: right;
+  color: #dd4b39;
+}
+.todo-list>li:hover .tools{
+  display: block;
+}
+.no-border {
+  border: 0 !important;
+}
+.box-footer {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-top: 1px solid #f4f4f4;
+  padding: 10px;
+  background-color: #fff;
+}
+.box-footer .btn-default {
+  background-color: #f4f4f4;
+  color: #444;
+  border-color: #ddd;
+}
+.box-footer .btn {
+  border-radius: 3px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+
+
+// timeline css
+.message-item {
+  margin-bottom: 25px;
+  margin-left: 40px;
+  position: relative;
+}
+.message-item .message-inner {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 10px;
+  position: relative;
+}
+.message-item .message-inner:before {
+  border-right: 10px solid #ddd;
+  border-style: solid;
+  border-width: 10px;
+  color: rgba(0,0,0,0);
+  content: "";
+  display: block;
+  height: 0;
+  position: absolute;
+  left: -20px;
+  top: 6px;
+  width: 0;
+}
+.message-item .message-inner:after {
+  border-right: 10px solid #fff;
+  border-style: solid;
+  border-width: 10px;
+  color: rgba(0,0,0,0);
+  content: "";
+  display: block;
+  height: 0;
+  position: absolute;
+  left: -18px;
+  top: 6px;
+  width: 0;
+}
+.message-item:before {
+  background: #fff;
+  border-radius: 2px;
+  bottom: -30px;
+  box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  content: "";
+  height: 100%;
+  left: -30px;
+  position: absolute;
+  width: 3px;
+}
+.message-item:after {
+  background: #fff;
+  border: 2px solid #ccc;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+  content: "";
+  height: 15px;
+  left: -36px;
+  position: absolute;
+  top: 10px;
+  width: 15px;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.message-item .message-head {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+}
+.message-item .message-head .avatar {
+  margin-right: 20px;
+}
+.message-item .message-head .user-detail {
+  overflow: hidden;
+}
+.message-item .message-head .user-detail h5 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0;
+}
+.message-item .message-head .post-meta {
+  float: left;
+  padding: 0 15px 0 0;
+}
+.message-item .message-head .post-meta >div {
+  color: #333;
+  font-weight: bold;
+  text-align: right;
+}
+.post-meta > div {
+  color: #777;
+  font-size: 12px;
+  line-height: 22px;
+}
+.message-item .message-head .post-meta >div {
+  color: #333;
+  font-weight: bold;
+  text-align: right;
+}
+.post-meta > div {
+  color: #777;
+  font-size: 12px;
+  line-height: 22px;
+}
+.message-inner img {
+  min-height: 40px;
+  max-height: 40px;
+}
+
+// trello CSS
+
+.app_footer {
+  text-align: center;
+  margin-top: 45px;
+  font-family: "Lato", helvetica, Arial, Sans-serif;
+}
+
+.board {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  padding: 15px;
+  min-width: 1000px;
+  width: 80%;
+  margin: 0 auto;
+  align-content: strech;
+}
+
+.boardColumn {
+  font-family: "Lato", helvetica, Arial, Sans-serif;
+  flex-basis: 300px;
+  flex-grow: 1;
+  margin: 0 5px;
+}
+.boardColumn .boardColumn__header {
+  padding: 5px;
+  margin-bottom: 10px;
+  border-bottom: 5px solid #f5f5f5;
+}
+.boardColumn .boardColumn__title {
+  font-size: 16px;
+  text-transform: capitalize;
+  font-weight: 600;
+  margin: 0;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: normal;
+  margin: 0 5px 0 0;
+  word-wrap: break-word;
+}
+.boardColumn .boardColumn__taskList {
+  background: #f5f5f5;
+  padding: 20px 10px;
+  overflow-y: auto;
+}
+
+.boardColumn.boardColumn--DONE .taskCard {
+  opacity: 0.7;
+}
+.boardColumn.boardColumn--DONE .taskCard .taskCard__title {
+  text-decoration: line-through;
+}
+
+.taskCard {
+  font-family: "Lato", helvetica, Arial, Sans-serif;
+  border: 1px solid #E0E1E2;
+  border-radius: 5px;
+  padding: 15px 15px 10px 15px;
+  background: white;
+  position: relative;
+  margin-bottom: 5px;
+  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.06);
+}
+.taskCard:hover {
+  cursor: pointer;
+}
+.taskCard:after {
+  content: "";
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 5px;
+  width: 4px;
+  background: red;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.taskCard .taskCard__title {
+  margin: 0;
+  color: #333;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+.taskCard .taskCard__epicLink-title {
+  background: #9b59b6;
+  padding: 3px 10px;
+  font-size: 13px;
+  border-radius: 5px;
+  color: white;
+}
+.taskCard .taskCard__footer {
+  display: flex;
+  margin-top: 15px;
+  justify-content: space-between;
+  align-items: center;
+}
+.taskCard .taskCard__type {
+  font-size: 12px;
+  font-weight: bold;
+}
+.taskCard .taskCard__id {
+  font-size: 12px;
+  font-weight: 300;
+  color: #CDCED0;
+  margin-right: 10px;
+  font-variant: small-caps;
+  font-weight: 500;
+}
+.taskCard .taskCard__avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 500px;
+}
+.taskCard .taskCard__id, .taskCard .taskCard__avatar {
+  vertical-align: middle;
+}
+
+.taskCard.taskCard--HIGHEST:after {
+  background: #e74c3c;
+}
+.taskCard.taskCard--HIGHEST .taskCard__type {
+  color: #e74c3c;
+}
+
+.taskCard.taskCard--HIGH:after {
+  background: #e67e22;
+}
+.taskCard.taskCard--HIGH .taskCard__type {
+  color: #e67e22;
+}
+
+.taskCard.taskCard--MEDIUM:after {
+  background: #f1c40f;
+}
+.taskCard.taskCard--MEDIUM .taskCard__type {
+  color: #f1c40f;
+}
+
+.taskCard.taskCard--LOW:after {
+  background: #27ae60;
+}
+.taskCard.taskCard--LOW .taskCard__type {
+  color: #27ae60;
+}
+
+
+//Calendar
+/*!
+ * FullCalendar v1.6.4 Stylesheet
+ * Docs & License: http://arshaw.com/fullcalendar/
+ * (c) 2013 Adam Shaw
+ */
+
+td.fc-today {
+  background:#FFF !important;
+  position: relative;
+
+
+}
+
+.fc-first th{
+  font-family: 'Roboto', sans-serif;
+  background:#20a8d8 !important;
+  color:#FFF;
+  font-size:14px !important;
+  font-weight:500 !important;
+
+}
+.fc-event-inner {
+  font-family: 'Roboto', sans-serif;
+  background: #03a9f3!important;
+  color: #FFF!important;
+  font-size: 12px!important;
+  font-weight: 500!important;
+  padding: 5px 0px!important;
+}
+
+.fc {
+  direction: ltr;
+  text-align: left;
+}
+
+.fc table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html .fc,
+.fc table {
+  font-size: 1em;
+  font-family: "Helvetica Neue",Helvetica;
+
+}
+
+.fc td,
+.fc th {
+  padding: 0;
+  vertical-align: top;
+}
+
+
+
+/* Header
+------------------------------------------------------------------------*/
+
+.fc-header td {
+  white-space: nowrap;
+  padding: 15px 10px 0px;
+}
+
+.fc-header-left {
+  width: 25%;
+  text-align: left;
+}
+
+.fc-header-center {
+  text-align: center;
+}
+
+.fc-header-right {
+  width: 25%;
+  text-align: right;
+}
+
+.fc-header-title {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: -5px;
+}
+
+.fc-header-title h2 {
+  margin-top: 0;
+  white-space: nowrap;
+  font-size: 32px;
+  font-weight: 100;
+  margin-bottom: 10px;
+  font-family: 'Roboto', sans-serif;
+}
+span.fc-button {
+  font-family: 'Roboto', sans-serif;
+  border-color: #20a8d8;
+  color: #20a8d8;
+}
+.fc-state-down, .fc-state-active {
+  background-color: #20a8d8 !important;
+  color: #FFF !important;
+}
+.fc .fc-header-space {
+  padding-left: 10px;
+}
+
+.fc-header .fc-button {
+  margin-bottom: 1em;
+  vertical-align: top;
+}
+
+/* buttons edges butting together */
+
+.fc-header .fc-button {
+  margin-right: -1px;
+}
+
+.fc-header .fc-corner-right,  /* non-theme */
+.fc-header .ui-corner-right { /* theme */
+  margin-right: 0; /* back to normal */
+}
+
+/* button layering (for border precedence) */
+
+.fc-header .fc-state-hover,
+.fc-header .ui-state-hover {
+  z-index: 2;
+}
+
+.fc-header .fc-state-down {
+  z-index: 3;
+}
+
+.fc-header .fc-state-active,
+.fc-header .ui-state-active {
+  z-index: 4;
+}
+
+
+
+/* Content
+------------------------------------------------------------------------*/
+
+.fc-content {
+  clear: both;
+  zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
+}
+
+.fc-view {
+  width: 100%;
+  overflow: hidden;
+}
+
+
+
+/* Cell Styles
+------------------------------------------------------------------------*/
+
+/* <th>, usually */
+.fc-widget-content {  /* <td>, usually */
+  border: 1px solid #e5e5e5;
+}
+.fc-widget-header{
+  border-bottom: 1px solid #EEE;
+}
+.fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
+  /* background: #fcf8e3; */
+}
+
+.fc-state-highlight > div > div.fc-day-number{
+  background-color: #ff3b30;
+  color: #FFFFFF;
+  border-radius: 50%;
+  margin: 4px;
+}
+
+.fc-cell-overlay { /* semi-transparent rectangle while dragging */
+  background: #bce8f1;
+  opacity: .3;
+  filter: alpha(opacity=30); /* for IE */
+}
+
+
+
+/* Buttons
+------------------------------------------------------------------------*/
+
+.fc-button {
+  position: relative;
+  display: inline-block;
+  padding: 0 .6em;
+  overflow: hidden;
+  height: 1.9em;
+  line-height: 1.9em;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.fc-state-default { /* non-theme */
+  border: 1px solid;
+}
+
+.fc-state-default.fc-corner-left { /* non-theme */
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.fc-state-default.fc-corner-right { /* non-theme */
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+/*
+	Our default prev/next buttons use HTML entities like ‹ › « »
+	and we'll try to make them look good cross-browser.
+*/
+
+.fc-text-arrow {
+  margin: 0 .4em;
+  font-size: 2em;
+  line-height: 23px;
+  vertical-align: baseline; /* for IE7 */
+}
+
+.fc-button-prev .fc-text-arrow,
+.fc-button-next .fc-text-arrow { /* for ‹ › */
+  font-weight: bold;
+}
+
+/* icon (for jquery ui) */
+
+.fc-button .fc-icon-wrap {
+  position: relative;
+  float: left;
+  top: 50%;
+}
+
+.fc-button .ui-icon {
+  position: relative;
+  float: left;
+  margin-top: -50%;
+
+  *margin-top: 0;
+  *top: -50%;
+}
+
+
+.fc-state-default {
+  border-color: #ff3b30;
+  color: #ff3b30;
+}
+.fc-button-month.fc-state-default, .fc-button-agendaWeek.fc-state-default, .fc-button-agendaDay.fc-state-default{
+  min-width: 67px;
+  text-align: center;
+  transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+}
+.fc-state-hover,
+.fc-state-down,
+.fc-state-active,
+.fc-state-disabled {
+  color: #333333;
+  background-color: #20a8d8;
+}
+
+.fc-state-hover {
+  color: #ff3b30;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+  -moz-transition: background-position 0.1s linear;
+  -o-transition: background-position 0.1s linear;
+  transition: background-position 0.1s linear;
+}
+
+.fc-state-down,
+.fc-state-active {
+  background-color: #ff3b30;
+  background-image: none;
+  outline: 0;
+  color: #FFFFFF;
+}
+
+.fc-state-disabled {
+  cursor: default;
+  background-image: none;
+  background-color: #bfdce6;
+  filter: alpha(opacity=65);
+  box-shadow: none;
+  border:1px solid #FFE3E3;
+  color: #ff3b30;
+}
+
+
+
+/* Global Event Styles
+------------------------------------------------------------------------*/
+
+.fc-event-container > * {
+  z-index: 8;
+}
+
+.fc-event-container > .ui-draggable-dragging,
+.fc-event-container > .ui-resizable-resizing {
+  z-index: 9;
+}
+
+.fc-event {
+  border: 1px solid #FFF; /* default BORDER color */
+  background-color: #FFF; /* default BACKGROUND color */
+  color: #919191;               /* default TEXT color */
+  font-size: 12px;
+  cursor: default;
+}
+.fc-event.chill{
+  background-color: #f3dcf8;
+}
+.fc-event.info{
+  background-color: #c6ebfe;
+}
+.fc-event.important{
+  background-color: #FFBEBE;
+}
+.fc-event.success{
+  background-color: #BEFFBF;
+}
+.fc-event:hover{
+  opacity: 0.7;
+}
+a.fc-event {
+  text-decoration: none;
+}
+
+a.fc-event,
+.fc-event-draggable {
+  cursor: pointer;
+}
+
+.fc-rtl .fc-event {
+  text-align: right;
+}
+
+.fc-event-inner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  line-height: 15px;
+}
+
+.fc-event-time,
+.fc-event-title {
+  padding: 0 1px;
+}
+
+.fc .ui-resizable-handle {
+  display: block;
+  position: absolute;
+  z-index: 99999;
+  overflow: hidden; /* hacky spaces (IE6/7) */
+  font-size: 300%;  /* */
+  line-height: 50%; /* */
+}
+
+
+
+/* Horizontal Events
+------------------------------------------------------------------------*/
+
+.fc-event-hori {
+  border-width: 1px 0;
+  margin-bottom: 1px;
+}
+
+.fc-ltr .fc-event-hori.fc-event-start,
+.fc-rtl .fc-event-hori.fc-event-end {
+  border-left-width: 1px;
+  /*
+border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+*/
+}
+
+.fc-ltr .fc-event-hori.fc-event-end,
+.fc-rtl .fc-event-hori.fc-event-start {
+  border-right-width: 1px;
+  /*
+border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+*/
+}
+
+/* resizable */
+
+.fc-event-hori .ui-resizable-e {
+  top: 0           !important; /* importants override pre jquery ui 1.7 styles */
+  right: -3px      !important;
+  width: 7px       !important;
+  height: 100%     !important;
+  cursor: e-resize;
+}
+
+.fc-event-hori .ui-resizable-w {
+  top: 0           !important;
+  left: -3px       !important;
+  width: 7px       !important;
+  height: 100%     !important;
+  cursor: w-resize;
+}
+
+.fc-event-hori .ui-resizable-handle {
+  _padding-bottom: 14px; /* IE6 had 0 height */
+}
+
+
+
+/* Reusable Separate-border Table
+------------------------------------------------------------*/
+
+table.fc-border-separate {
+  border-collapse: separate;
+}
+
+.fc-border-separate th,
+.fc-border-separate td {
+  border-width: 1px 0 0 1px;
+}
+
+.fc-border-separate th.fc-last,
+.fc-border-separate td.fc-last {
+  border-right-width: 1px;
+}
+
+
+.fc-border-separate tr.fc-last td {
+
+}
+.fc-border-separate .fc-week .fc-first{
+  border-left: 0;
+}
+.fc-border-separate .fc-week .fc-last{
+  border-right: 0;
+}
+.fc-border-separate tr.fc-last th{
+  border-bottom-width: 1px;
+  border-color: #cdcdcd;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 30px;
+}
+.fc-border-separate tbody tr.fc-first td,
+.fc-border-separate tbody tr.fc-first th {
+  border-top-width: 0;
+}
+
+
+
+/* Month View, Basic Week View, Basic Day View
+------------------------------------------------------------------------*/
+
+.fc-grid th {
+  text-align: center;
+}
+
+.fc .fc-week-number {
+  width: 22px;
+  text-align: center;
+}
+
+.fc .fc-week-number div {
+  padding: 0 2px;
+}
+
+.fc-grid .fc-day-number {
+  float: right;
+  padding: 0 2px;
+}
+
+.fc-grid .fc-other-month .fc-day-number {
+  opacity: 0.3;
+  filter: alpha(opacity=30); /* for IE */
+  /* opacity with small font can sometimes look too faded
+     might want to set the 'color' property instead
+     making day-numbers bold also fixes the problem */
+}
+
+.fc-grid .fc-day-content {
+  clear: both;
+  padding: 2px 2px 1px; /* distance between events and day edges */
+}
+
+/* event styles */
+
+.fc-grid .fc-event-time {
+  font-weight: bold;
+}
+
+/* right-to-left */
+
+.fc-rtl .fc-grid .fc-day-number {
+  float: left;
+}
+
+.fc-rtl .fc-grid .fc-event-time {
+  float: right;
+}
+
+
+
+/* Agenda Week View, Agenda Day View
+------------------------------------------------------------------------*/
+
+.fc-agenda table {
+  border-collapse: separate;
+}
+
+.fc-agenda-days th {
+  text-align: center;
+}
+
+.fc-agenda .fc-agenda-axis {
+  width: 50px;
+  padding: 0 4px;
+  vertical-align: middle;
+  text-align: right;
+  white-space: nowrap;
+  font-weight: normal;
+}
+
+.fc-agenda .fc-week-number {
+  font-weight: bold;
+}
+
+.fc-agenda .fc-day-content {
+  padding: 2px 2px 1px;
+}
+
+/* make axis border take precedence */
+
+.fc-agenda-days .fc-agenda-axis {
+  border-right-width: 1px;
+}
+
+.fc-agenda-days .fc-col0 {
+  border-left-width: 0;
+}
+
+/* all-day area */
+
+.fc-agenda-allday th {
+  border-width: 0 1px;
+}
+
+.fc-agenda-allday .fc-day-content {
+  min-height: 34px; /* TODO: doesnt work well in quirksmode */
+  _height: 34px;
+}
+
+/* divider (between all-day and slots) */
+
+.fc-agenda-divider-inner {
+  height: 2px;
+  overflow: hidden;
+}
+
+.fc-widget-header .fc-agenda-divider-inner {
+  background: #eee;
+}
+
+/* slot rows */
+
+.fc-agenda-slots th {
+  border-width: 1px 1px 0;
+}
+
+.fc-agenda-slots td {
+  border-width: 1px 0 0;
+  background: none;
+}
+
+.fc-agenda-slots td div {
+  height: 20px;
+}
+
+.fc-agenda-slots tr.fc-slot0 th,
+.fc-agenda-slots tr.fc-slot0 td {
+  border-top-width: 0;
+}
+
+.fc-agenda-slots tr.fc-minor th.ui-widget-header {
+  *border-top-style: solid; /* doesn't work with background in IE6/7 */
+}
+
+
+
+/* Vertical Events
+------------------------------------------------------------------------*/
+
+.fc-event-vert {
+  border-width: 0 1px;
+}
+
+.fc-event-vert.fc-event-start {
+  border-top-width: 1px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+
+.fc-event-vert.fc-event-end {
+  border-bottom-width: 1px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.fc-event-vert .fc-event-time {
+  white-space: nowrap;
+  font-size: 10px;
+}
+
+.fc-event-vert .fc-event-inner {
+  position: relative;
+  z-index: 2;
+}
+
+.fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  opacity: .25;
+  filter: alpha(opacity=25);
+}
+
+.fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
+.fc-select-helper .fc-event-bg {
+  display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
+}
+
+/* resizable */
+
+.fc-event-vert .ui-resizable-s {
+  bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
+  width: 100%      !important;
+  height: 8px      !important;
+  overflow: hidden !important;
+  line-height: 8px !important;
+  font-size: 11px  !important;
+  font-family: monospace;
+  text-align: center;
+  cursor: s-resize;
+}
+
+.fc-agenda .ui-resizable-resizing { /* TODO: better selector */
+  _overflow: hidden;
+}
+
+thead tr.fc-first{
+  background-color: #f7f7f7;
+}
+table.fc-header{
+  background-color: #FFFFFF;
+  border-radius: 6px 6px 0 0;
+}
+
+.fc-week .fc-day > div .fc-day-number{
+  font-size: 15px;
+  margin: 2px;
+  min-width: 19px;
+  padding: 6px;
+  text-align: center;
+  width: 30px;
+  height: 30px;
+}
+.fc-sun, .fc-sat{
+  color: #b8b8b8;
+}
+
+.fc-week .fc-day:hover .fc-day-number{
+  background-color: #B8B8B8;
+  border-radius: 50%;
+  color: #FFFFFF;
+  transition: background-color 0.2s;
+}
+.fc-week .fc-day.fc-state-highlight:hover .fc-day-number{
+  background-color:  #ff3b30;
+}
+.fc-button-today{
+  border: 1px solid rgba(255,255,255,.0);
+}
+.fc-view-agendaDay thead tr.fc-first .fc-widget-header{
+  text-align: right;
+  padding-right: 10px;
+}
+
+/*!
+ * FullCalendar v1.6.4 Print Stylesheet
+ * Docs & License: http://arshaw.com/fullcalendar/
+ * (c) 2013 Adam Shaw
+ */
+
+/*
+ * Include this stylesheet on your page to get a more printer-friendly calendar.
+ * When including this stylesheet, use the media='print' attribute of the <link> tag.
+ * Make sure to include this stylesheet IN ADDITION to the regular fullcalendar.css.
+ */
+
+
+/* Events
+-----------------------------------------------------*/
+
+.fc-event {
+  background: #fff !important;
+  color: #000 !important;
+}
+
+/* for vertical events */
+
+.fc-event-bg {
+  display: none !important;
+}
+
+.fc-event .ui-resizable-handle {
+  display: none !important;
+}
+
+
+
+// cart
+
+.table>tbody>tr>td, .table>tfoot>tr>td{
+  vertical-align: middle;
+}
+@media screen and (max-width: 600px) {
+  table#cart tbody td .form-control{
+    width:20%;
+    display: inline !important;
+  }
+  .actions .btn{
+    width:36%;
+    margin:1.5em 0;
+  }
+
+  .actions .btn-info{
+    float:left;
+  }
+  .actions .btn-danger{
+    float:right;
+  }
+
+  table#cart thead { display: none; }
+  table#cart tbody td { display: block; padding: .6rem; min-width:320px;}
+  table#cart tbody tr td:first-child { background: #333; color: #fff; }
+  table#cart tbody td:before {
+    content: attr(data-th); font-weight: bold;
+    display: inline-block; width: 8rem;
+  }
+
+
+
+  table#cart tfoot td{display:block; }
+  table#cart tfoot td .btn{display:block;}
+
+}
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
index 3579dfb0..f27d5621 100644
--- a/src/containers/DefaultContainer.vue
+++ b/src/containers/DefaultContainer.vue
@@ -3,15 +3,12 @@
     <AppHeader fixed>
       <SidebarToggler class="d-lg-none" display="md" mobile />
       <b-link class="navbar-brand" to="#">
-        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
-        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
+        <img class="navbar-brand-full" src="img/ov_logo.png" height="45" alt="CoreUI Logo">
+        <img class="navbar-brand-minimized" src="img/ov_logo.png" height="30" alt="CoreUI Logo">
       </b-link>
       <SidebarToggler class="d-md-down-none" display="lg" />
-      <b-navbar-nav class="d-md-down-none">
-        <b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
-        <b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
-        <b-nav-item class="px-3">Settings</b-nav-item>
-      </b-navbar-nav>
+        <div class="col-lg-6 d-md-down-none">
+        <b-form-input type="text" placeholder="Search.." size="lg" ></b-form-input></div>
       <b-navbar-nav class="ml-auto">
         <b-nav-item class="d-md-down-none">
           <i class="icon-bell"></i>
@@ -50,12 +47,12 @@
     <TheFooter>
       <!--footer-->
       <div>
-        <a href="https://coreui.io">CoreUI</a>
-        <span class="ml-1">&copy; 2018 creativeLabs.</span>
+        <a href="https://Olsonvisual.com">Olsonvisual</a>
+        <span class="ml-1">&copy; 2018.</span>
       </div>
       <div class="ml-auto">
         <span class="mr-1">Powered by</span>
-        <a href="https://coreui.io">CoreUI for Vue</a>
+        <a href="https://Olsonvisual.com">Custom ERP</a>
       </div>
     </TheFooter>
   </div>
diff --git a/src/router/index.js b/src/router/index.js
index 5cfb4e76..16329e28 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,16 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+const TicketList = () => import('@/views/base/TicketList')
+const TicketView = () => import('@/views/tickets/View.vue')
+const TicketCreate = () => import('@/views/tickets/Create.vue')
+
+const InvoiceList = () => import('@/views/base/InvoiceList')
+const CustomerList = () => import('@/views/base/CustomerList')
+const Backlog = () => import('@/views/reports/Backlog')
+const Calendar = () => import('@/views/reports/Calendar')
+const ProductCreate = () => import('@/views/products/Create')
+
+
 
 // Containers
 const DefaultContainer = () => import('@/containers/DefaultContainer')
@@ -18,6 +29,7 @@ const Cards = () => import('@/views/base/Cards')
 const Forms = () => import('@/views/base/Forms')
 const Switches = () => import('@/views/base/Switches')
 const Tables = () => import('@/views/base/Tables')
+
 const Tabs = () => import('@/views/base/Tabs')
 const Breadcrumbs = () => import('@/views/base/Breadcrumbs')
 const Carousels = () => import('@/views/base/Carousels')
@@ -125,10 +137,83 @@ export default new Router({
             },
           ]
         },
+        {
+          path: 'invoices',
+          name: 'Invoices',
+          component: InvoiceList
+
+        },{
+          path: 'customers',
+          name: 'Customers',
+          component: CustomerList
+
+        },
+        {
+          path: 'backlog',
+          name: 'Backlog',
+          component: Backlog
+
+        },
+        {
+          path: 'calendar',
+          name: 'Calendar',
+          component: Calendar
+
+        },
+        {
+          path: 'tickets',
+          redirect: '/tickets/list',
+          name: 'Job Tickets',
+          component: {
+            render (c) { return c('router-view') }
+          },
+          children: [
+            {
+              path: 'list',
+              name: 'Tickets',
+              component: TicketList
+            },
+            {
+              path: 'view',
+              name: 'View',
+              component: TicketView
+            },
+            {
+                path: 'create',
+                name: 'Create',
+                component: TicketCreate
+            }
+          ]
+        },
+        {
+          path: 'products',
+          redirect: '/products/list',
+          name: 'Products',
+          component: {
+            render (c) { return c('router-view') }
+          },
+          children: [
+            {
+              path: 'list',
+              name: 'Tickets',
+              component: TicketList
+            },
+            {
+              path: 'view',
+              name: 'View',
+              component: TicketView
+            },
+            {
+              path: 'create',
+              name: 'Create',
+              component: ProductCreate
+            }
+          ]
+        },
         {
           path: 'base',
           redirect: '/base/cards',
-          name: 'Base',
+          name: 'Job Tickets',
           component: {
             render (c) { return c('router-view') }
           },
@@ -149,9 +234,9 @@ export default new Router({
               component: Switches
             },
             {
-              path: 'tables',
-              name: 'Tables',
-              component: Tables
+              path: 'tickets',
+              name: 'Tickets',
+              component: TicketList
             },
             {
               path: 'tabs',
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c4745c67..99a20edc 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -13,8 +13,8 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
-            <p>Members online</p>
+            <h4 class="mb-0">200</h4>
+            <p>Ready to Invoice</p>
           </b-card-body>
           <card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
         </b-card>
@@ -31,8 +31,8 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
-            <p>Members online</p>
+            <h4 class="mb-0">343</h4>
+            <p>Open Tickets</p>
           </b-card-body>
           <card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
         </b-card>
@@ -49,8 +49,8 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
-            <p>Members online</p>
+            <h4 class="mb-0">232</h4>
+            <p>Due today</p>
           </b-card-body>
           <card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
         </b-card>
@@ -67,8 +67,8 @@
               <b-dropdown-item>Something else here...</b-dropdown-item>
               <b-dropdown-item disabled>Disabled action</b-dropdown-item>
             </b-dropdown>
-            <h4 class="mb-0">9.823</h4>
-            <p>Members online</p>
+            <h4 class="mb-0">3453</h4>
+            <p>Delayed Tickets</p>
           </b-card-body>
           <card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
         </b-card>
@@ -78,8 +78,8 @@
     <b-card>
       <b-row>
         <b-col sm="5">
-          <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-          <div class="small text-muted">November 2017</div>
+          <h4 id="traffic" class="card-title mb-0">Tickets</h4>
+          <div class="small text-muted">September 2018</div>
         </b-col>
         <b-col sm="7" class="d-none d-md-block">
           <b-button type="button" variant="primary" class="float-right"><i class="icon-cloud-download"></i></b-button>
@@ -96,30 +96,16 @@
       <div slot="footer">
         <b-row class="text-center">
           <b-col class="mb-sm-2 mb-0">
-            <div class="text-muted">Visits</div>
-            <strong>29.703 Users (40%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="40"></b-progress>
+            <div class="text-muted">Finished</div>
+            <strong>23740</strong>
+            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="success" :value="80"></b-progress>
           </b-col>
           <b-col class="mb-sm-2 mb-0 d-md-down-none">
-            <div class="text-muted">Unique</div>
-            <strong>24.093 Users (20%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="20"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0">
-            <div class="text-muted">Pageviews</div>
-            <strong>78.706 Views (60%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="warning" :value="60"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0">
-            <div class="text-muted">New Users</div>
-            <strong>22.123 Users (80%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="danger" :value="80"></b-progress>
-          </b-col>
-          <b-col class="mb-sm-2 mb-0 d-md-down-none">
-            <div class="text-muted">Bounce Rate</div>
-            <strong>Average Rate (40.15%)</strong>
-            <b-progress height={} class="progress-xs mt-2" :precision="1" :value="40"></b-progress>
+            <div class="text-muted">Tickets</div>
+            <strong>29,703</strong>
+            <b-progress height={} class="progress-xs mt-2" :precision="1" variant="info" :value="100"></b-progress>
           </b-col>
+
         </b-row>
       </div>
     </b-card>
@@ -127,7 +113,7 @@
       <b-col sm="6" lg="3">
         <div class="brand-card">
           <div class="brand-card-header bg-facebook">
-            <i class="fa fa-facebook"></i>
+            <i class="fa">PrePress</i>
             <div class="chart-wrapper">
               <social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" />
             </div>
@@ -135,11 +121,11 @@
           <div class="brand-card-body">
             <div>
               <div class="text-value">89k</div>
-              <div class="text-uppercase text-muted small">friends</div>
+              <div class="text-uppercase text-muted small">due today</div>
             </div>
             <div>
               <div class="text-value">459</div>
-              <div class="text-uppercase text-muted small">feeds</div>
+              <div class="text-uppercase text-muted small">delayed</div>
             </div>
           </div>
         </div>
@@ -147,7 +133,7 @@
       <b-col sm="6" lg="3">
         <div class="brand-card">
           <div class="brand-card-header bg-twitter">
-            <i class="fa fa-twitter"></i>
+            <i class="fa ">Print</i>
             <div class="chart-wrapper">
               <social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" />
             </div>
@@ -155,11 +141,11 @@
           <div class="brand-card-body">
             <div>
               <div class="text-value">973k</div>
-              <div class="text-uppercase text-muted small">followers</div>
+              <div class="text-uppercase text-muted small">due today</div>
             </div>
             <div>
               <div class="text-value">1.792</div>
-              <div class="text-uppercase text-muted small">tweets</div>
+              <div class="text-uppercase text-muted small">delayed</div>
             </div>
           </div>
           </div>
@@ -167,7 +153,7 @@
       <b-col sm="6" lg="3">
         <div class="brand-card">
           <div class="brand-card-header bg-linkedin">
-            <i class="fa fa-linkedin"></i>
+            <i class="fa ">Mount</i>
             <div class="chart-wrapper">
               <social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" />
             </div>
@@ -175,11 +161,11 @@
           <div class="brand-card-body">
             <div>
               <div class="text-value">500+</div>
-              <div class="text-uppercase text-muted small">contacts</div>
+              <div class="text-uppercase text-muted small">due today</div>
             </div>
             <div>
               <div class="text-value">292</div>
-              <div class="text-uppercase text-muted small">feeds</div>
+              <div class="text-uppercase text-muted small">delayed</div>
             </div>
           </div>
         </div>
@@ -187,7 +173,7 @@
       <b-col sm="6" lg="3">
         <div class="brand-card">
           <div class="brand-card-header bg-google-plus">
-            <i class="fa fa-google-plus"></i>
+            <i class="fa ">Install</i>
             <div class="chart-wrapper">
               <social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" />
             </div>
@@ -195,11 +181,11 @@
           <div class="brand-card-body">
             <div>
               <div class="text-value">894</div>
-              <div class="text-uppercase text-muted small">followers</div>
+              <div class="text-uppercase text-muted small">due today</div>
             </div>
             <div>
               <div class="text-value">92</div>
-              <div class="text-uppercase text-muted small">circles</div>
+              <div class="text-uppercase text-muted small">delayed</div>
             </div>
           </div>
         </div>
@@ -207,14 +193,14 @@
     </b-row>
     <b-row>
       <b-col md="12">
-        <b-card header="Traffic &amp; Sales">
+        <b-card header="Sales">
           <b-row>
             <b-col sm="12" lg="6">
               <b-row>
                 <b-col sm="6">
                   <Callout variant="info">
                     <small class="text-muted">New Clients</small><br>
-                    <strong class="h4">9,123</strong>
+                    <strong class="h4">10</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
                       <!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
                       <callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
@@ -224,7 +210,7 @@
                 <b-col sm="6">
                   <Callout variant="danger">
                     <small class="text-muted">Recurring Clients</small><br>
-                    <strong class="h4">22,643</strong>
+                    <strong class="h4">145</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
                       <callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
                     </div>
@@ -323,8 +309,8 @@
               <b-row>
                 <b-col sm="6">
                   <Callout variant="warning">
-                    <small class="text-muted">Pageviews</small><br>
-                    <strong class="h4">78,623</strong>
+                    <small class="text-muted">New Clients</small><br>
+                    <strong class="h4">$8,623</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
                       <callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
                     </div>
@@ -332,8 +318,8 @@
                 </b-col>
                 <b-col sm="6">
                   <Callout variant="success">
-                    <small class="text-muted">Organic</small><br>
-                    <strong class="h4">49,123</strong>
+                    <small class="text-muted">Recurring Clients</small><br>
+                    <strong class="h4">$49,123</strong>
                     <div class="chart-wrapper" :style="{ top: '-10px'}">
                       <callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
                     </div>
@@ -344,8 +330,8 @@
               <ul class="horizontal-bars type-2">
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="icon-user progress-group-icon"></i>
-                    <span class="title">Male</span>
+                    <i class="fa fa-money progress-group-icon"></i>
+                    <span class="title">New</span>
                     <span class="ml-auto font-weight-bold">43%</span>
                   </div>
                   <div class="progress-group-bars">
@@ -354,8 +340,8 @@
                 </div>
                 <div class="progress-group mb-5">
                   <div class="progress-group-header">
-                    <i class="icon-user-female progress-group-icon"></i>
-                    <span class="title">Female</span>
+                    <i class="fa fa-money progress-group-icon"></i>
+                    <span class="title">Recurring</span>
                     <span class="ml-auto font-weight-bold">37%</span>
                   </div>
                   <div class="progress-group-bars">
@@ -364,9 +350,9 @@
                 </div>
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="icon-globe progress-group-icon"></i>
-                    <span class="title">Organic Search</span>
-                    <span class="ml-auto font-weight-bold">191,235 <span class="text-muted small">(56%)</span></span>
+                    <i class="icon-user progress-group-icon"></i>
+                    <span class="title">Dan</span>
+                    <span class="ml-auto font-weight-bold">$191,235 <span class="text-muted small">(56%)</span></span>
                   </div>
                   <div class="progress-group-bars">
                     <b-progress height={} class="progress-xs" :value="56" variant="success"></b-progress>
@@ -374,9 +360,9 @@
                 </div>
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="icon-social-facebook progress-group-icon"></i>
-                    <span class="title">Facebook</span>
-                    <span class="ml-auto font-weight-bold">51,223 <span class="text-muted small">(15%)</span></span>
+                    <i class="icon-user progress-group-icon"></i>
+                    <span class="title">Rick</span>
+                    <span class="ml-auto font-weight-bold">$51,223 <span class="text-muted small">(15%)</span></span>
                   </div>
                   <div class="progress-group-bars">
                     <b-progress height={} class="progress-xs" :value="15" variant="success"></b-progress>
@@ -384,9 +370,9 @@
                 </div>
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="icon-social-twitter progress-group-icon"></i>
-                    <span class="title">Twitter</span>
-                    <span class="ml-auto font-weight-bold">37,564 <span class="text-muted small">(11%)</span></span>
+                    <i class="icon-user-female progress-group-icon"></i>
+                    <span class="title">Sales 1</span>
+                    <span class="ml-auto font-weight-bold">$37,564 <span class="text-muted small">(11%)</span></span>
                   </div>
                   <div class="progress-group-bars">
                     <b-progress height={} class="progress-xs" :value="11" variant="success"></b-progress>
@@ -394,9 +380,9 @@
                 </div>
                 <div class="progress-group">
                   <div class="progress-group-header">
-                    <i class="icon-social-linkedin progress-group-icon"></i>
-                    <span class="title">LinkedIn</span>
-                    <span class="ml-auto font-weight-bold">27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
+                    <i class="icon-user-female progress-group-icon"></i>
+                    <span class="title">Sales 2</span>
+                    <span class="ml-auto font-weight-bold">$27,319 <span class="text-muted small">&nbsp;(8%)</span></span>
                   </div>
                   <div class="progress-group-bars">
                     <b-progress height={} class="progress-xs" :value="8" variant="success"></b-progress>
@@ -423,18 +409,12 @@
                 </span> | Registered: {{item.value.registered}}
               </div>
             </div>
-            <i slot="country" class="h4 mb-0" :class="flag(item.value.flag)" slot-scope="item" :title="item.value.flag" :id="item.value.flag"></i>
-            <i class="flag-icon flag-icon-pw h1" title="pw" id="pw"></i>
+            <div slot="country"  slot-scope="item"><span>{{item.value.name}}</span></div>
+
             <div slot="usage" slot-scope="item">
-              <div class="clearfix">
-                <div class="float-left">
-                  <strong>{{item.value.value}}%</strong>
-                </div>
-                <div class="float-right">
-                  <small class="text-muted">{{item.value.period}}</small>
-                </div>
+              <div class="float-right">
+                <strong>${{item.value.value}}</strong>
               </div>
-              <b-progress height={} class="progress-xs" v-model="item.value.value" :variant="variant(item.value.value)"></b-progress>
             </div>
             <i slot="payment" slot-scope="item" :class="item.value.icon" style="font-size:24px"></i>
             <div slot="activity" slot-scope="item">
@@ -474,51 +454,44 @@ export default {
     return {
       selected: 'Month',
       tableItems: [
-        {
-          avatar: { url: 'img/avatars/1.jpg', status: 'success' },
-          user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'USA', flag: 'us' },
-          usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
-          payment: { name: 'Mastercard', icon: 'fa fa-cc-mastercard' },
-          activity: '10 sec ago'
-        },
+
         {
           avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
-          user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
-          country: { name: 'Brazil', flag: 'br' },
-          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          user: { name: 'Open Road Films', new: false, registered: 'Jan 1, 2015' },
+          country: { name: 'Los Angeles, CA', flag: 'br' },
+          usage: { value: 2200, period: 'Jun 11, 2015 - Jul 10, 2015' },
           payment: { name: 'Visa', icon: 'fa fa-cc-visa' },
           activity: '5 minutes ago'
         },
         {
           avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
-          user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'India', flag: 'in' },
-          usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          user: { name: 'Pantelion', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'New York, NY', flag: 'in' },
+          usage: { value: 7234, period: 'Jun 11, 2015 - Jul 10, 2015' },
           payment: { name: 'Stripe', icon: 'fa fa-cc-stripe' },
           activity: '1 hour ago'
         },
         {
           avatar: { url: 'img/avatars/4.jpg', status: '' },
-          user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'France', flag: 'fr' },
-          usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          user: { name: 'Warner Bros', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'Chicago, IL', flag: 'fr' },
+          usage: { value: 1298, period: 'Jun 11, 2015 - Jul 10, 2015' },
           payment: { name: 'PayPal', icon: 'fa fa-paypal' },
           activity: 'Last month'
         },
         {
           avatar: { url: 'img/avatars/5.jpg', status: 'success' },
-          user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Spain', flag: 'es' },
-          usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          user: { name: 'Disney', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'San Fransisco, CA', flag: 'es' },
+          usage: { value: 5622, period: 'Jun 11, 2015 - Jul 10, 2015' },
           payment: { name: 'Google Wallet', icon: 'fa fa-google-wallet' },
           activity: 'Last week'
         },
         {
           avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
-          user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
-          country: { name: 'Poland', flag: 'pl' },
-          usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
+          user: { name: 'Marvel', new: true, registered: 'Jan 1, 2015' },
+          country: { name: 'Atlanta, GA', flag: 'pl' },
+          usage: { value: 4233, period: 'Jun 11, 2015 - Jul 10, 2015' },
           payment: { name: 'Amex', icon: 'fa fa-cc-amex' },
           activity: 'Last week'
         }
@@ -529,21 +502,16 @@ export default {
           class: 'text-center'
         },
         user: {
-          label: 'User'
+          label: 'Customer'
         },
         country: {
-          label: 'Country',
+          label: 'Location',
           class: 'text-center'
         },
         usage: {
-          label: 'Usage'
-        },
-        payment: {
-          label: 'Payment method',
-          class: 'text-center'
-        },
-        activity: {
-          label: 'Activity'
+          label: 'Revenue',
+          class: 'text-right'
+
         }
       }
     }
diff --git a/src/views/base/CustomerList.vue b/src/views/base/CustomerList.vue
new file mode 100644
index 00000000..27167d54
--- /dev/null
+++ b/src/views/base/CustomerList.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="animated fadeIn">
+    <b-form-group>
+      <b-input-group>
+        <!-- Attach Left button -->
+        <b-input-group-prepend>
+          <b-button variant="primary">
+            <i class="fa fa-search"></i> Search
+          </b-button>
+        </b-input-group-prepend>
+        <b-form-input type="text" placeholder="Customer name"></b-form-input>
+      </b-input-group>
+    </b-form-group>
+
+    <b-row>
+
+      <b-col lg="12">
+        <c-table striped caption="<i class='fa fa-align-justify'></i> Customers"></c-table>
+      </b-col><!--/.col-->
+    </b-row><!--/.row-->
+
+
+  </div>
+
+</template>
+
+<script>
+  import cTable from './CustomerTable.vue'
+
+  export default {
+    name: 'tables',
+    components: {cTable}
+  }
+</script>
diff --git a/src/views/base/CustomerTable.vue b/src/views/base/CustomerTable.vue
new file mode 100644
index 00000000..265a8e88
--- /dev/null
+++ b/src/views/base/CustomerTable.vue
@@ -0,0 +1,108 @@
+<template>
+    <b-card :header="caption">
+        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm"
+                 :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
+            <template slot="status" slot-scope="data">
+                <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+            </template>
+        </b-table>
+        <nav>
+            <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev"
+                          next-text="Next" hide-goto-end-buttons/>
+        </nav>
+    </b-card>
+</template>
+
+<script>
+  /**
+   * Randomize array element order in-place.
+   * Using Durstenfeld shuffle algorithm.
+   */
+  const shuffleArray = (array) => {
+    for (let i = array.length - 1; i > 0; i--) {
+      let j = Math.floor(Math.random() * (i + 1))
+      let temp = array[i]
+      array[i] = array[j]
+      array[j] = temp
+    }
+    return array
+  }
+
+  export default {
+    name: 'c-table',
+    props: {
+      caption: {
+        type: String,
+        default: 'Table'
+      },
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
+      },
+      fixed: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data: () => {
+      return {
+        items: shuffleArray([
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+          {username: 'Paramount Picture Marketing', category: 'Entertainment',   jobid: '805553',salesperson:'Dan Olson'},
+
+
+        ]),
+        fields: [
+          {key: 'jobid', label: 'Customer#'},
+          {key: 'username', label: 'Client'},
+          {key: 'category', label: 'Category'},
+          {key: 'salesperson', label: 'Sales Person'},
+
+
+        ],
+        currentPage: 1,
+        perPage: 10,
+        totalRows: 0
+      }
+    },
+    methods: {
+      getBadge(status) {
+        return status === 'Active' ? 'success'
+          : status === 'Inactive' ? 'secondary'
+            : status === 'Pending' ? 'warning'
+              : status === 'Banned' ? 'danger' : 'primary'
+      },
+      getRowCount(items) {
+        return items.length
+      }
+    }
+  }
+</script>
diff --git a/src/views/base/InvoiceList.vue b/src/views/base/InvoiceList.vue
new file mode 100644
index 00000000..aa42e90b
--- /dev/null
+++ b/src/views/base/InvoiceList.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="animated fadeIn">
+
+    <b-row>
+
+      <b-col lg="12">
+        <c-table striped caption="<i class='fa fa-align-justify'></i> Invoices"></c-table>
+      </b-col><!--/.col-->
+    </b-row><!--/.row-->
+
+
+  </div>
+
+</template>
+
+<script>
+  import cTable from './InvoiceTable.vue'
+
+  export default {
+    name: 'tables',
+    components: {cTable}
+  }
+</script>
diff --git a/src/views/base/InvoiceTable.vue b/src/views/base/InvoiceTable.vue
new file mode 100644
index 00000000..4a972f9c
--- /dev/null
+++ b/src/views/base/InvoiceTable.vue
@@ -0,0 +1,113 @@
+<template>
+    <b-card :header="caption">
+        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm"
+                 :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
+            <template slot="status" slot-scope="data">
+                <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+            </template>
+        </b-table>
+        <nav>
+            <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev"
+                          next-text="Next" hide-goto-end-buttons/>
+        </nav>
+    </b-card>
+</template>
+
+<script>
+  /**
+   * Randomize array element order in-place.
+   * Using Durstenfeld shuffle algorithm.
+   */
+  const shuffleArray = (array) => {
+    for (let i = array.length - 1; i > 0; i--) {
+      let j = Math.floor(Math.random() * (i + 1))
+      let temp = array[i]
+      array[i] = array[j]
+      array[j] = temp
+    }
+    return array
+  }
+
+  export default {
+    name: 'c-table',
+    props: {
+      caption: {
+        type: String,
+        default: 'Table'
+      },
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
+      },
+      fixed: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data: () => {
+      return {
+        items: shuffleArray([
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+
+        ]),
+        fields: [
+          {key: 'jobid', label: 'Job#'},
+          {key: 'registered', label: 'Date'},
+          {key: 'username', label: 'Client'},
+          {key: 'duedate', label: 'Due Date'},
+          {key: 'description', label: 'Description'},
+          {key: 'status', label: 'Status'},
+
+        ],
+        currentPage: 1,
+        perPage: 10,
+        totalRows: 0
+      }
+    },
+    methods: {
+      getBadge(status) {
+        return status === 'Active' ? 'success'
+          : status === 'Inactive' ? 'secondary'
+            : status === 'Pending' ? 'warning'
+              : status === 'Banned' ? 'danger' : 'primary'
+      },
+      getRowCount(items) {
+        return items.length
+      }
+    }
+  }
+</script>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 83e629c2..70d1defd 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -1,164 +1,165 @@
 <template>
-  <div class="wrapper">
-    <div class="animated fadeIn">
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
-          <div class="card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="text-muted">docs</small>
-            </a>
-          </div>
-        </div>
-        <b-navbar toggleable="md" type="dark" variant="info">
+    <div class="wrapper">
+        <div class="animated fadeIn">
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
+                    <div class="card-header-actions">
+                        <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action"
+                           rel="noreferrer noopener" target="_blank">
+                            <small class="text-muted">docs</small>
+                        </a>
+                    </div>
+                </div>
+                <b-navbar toggleable="md" type="dark" variant="info">
 
-          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
+                    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
 
-          <b-navbar-brand href="#">NavBar</b-navbar-brand>
+                    <b-navbar-brand href="#">NavBar</b-navbar-brand>
 
-          <b-collapse is-nav id="nav_collapse">
+                    <b-collapse is-nav id="nav_collapse">
 
-            <b-navbar-nav>
-              <b-nav-item href="#">Link</b-nav-item>
-              <b-nav-item href="#" disabled>Disabled</b-nav-item>
-            </b-navbar-nav>
+                        <b-navbar-nav>
+                            <b-nav-item href="#">Link</b-nav-item>
+                            <b-nav-item href="#" disabled>Disabled</b-nav-item>
+                        </b-navbar-nav>
 
-            <!-- Right aligned nav items -->
-            <b-navbar-nav class="ml-auto">
+                        <!-- Right aligned nav items -->
+                        <b-navbar-nav class="ml-auto">
 
-              <b-nav-form>
-                <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
-                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-              </b-nav-form>
+                            <b-nav-form>
+                                <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
+                                <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+                            </b-nav-form>
 
-              <b-nav-item-dropdown text="Lang" right>
-                <b-dropdown-item href="#">EN</b-dropdown-item>
-                <b-dropdown-item href="#">ES</b-dropdown-item>
-                <b-dropdown-item href="#">RU</b-dropdown-item>
-                <b-dropdown-item href="#">FA</b-dropdown-item>
-              </b-nav-item-dropdown>
+                            <b-nav-item-dropdown text="Lang" right>
+                                <b-dropdown-item href="#">EN</b-dropdown-item>
+                                <b-dropdown-item href="#">ES</b-dropdown-item>
+                                <b-dropdown-item href="#">RU</b-dropdown-item>
+                                <b-dropdown-item href="#">FA</b-dropdown-item>
+                            </b-nav-item-dropdown>
 
-              <b-nav-item-dropdown right>
-                <!-- Using button-content slot -->
-                <template slot="button-content">
-                  <em>User</em>
-                </template>
-                <b-dropdown-item href="#">Profile</b-dropdown-item>
-                <b-dropdown-item href="#">Signout</b-dropdown-item>
-              </b-nav-item-dropdown>
-            </b-navbar-nav>
+                            <b-nav-item-dropdown right>
+                                <!-- Using button-content slot -->
+                                <template slot="button-content">
+                                    <em>User</em>
+                                </template>
+                                <b-dropdown-item href="#">Profile</b-dropdown-item>
+                                <b-dropdown-item href="#">Signout</b-dropdown-item>
+                            </b-nav-item-dropdown>
+                        </b-navbar-nav>
 
-          </b-collapse>
-        </b-navbar>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>brand</small>
-        </div>
-        <div>
-          <!-- Image and text -->
-          <b-navbar variant="faded" type="light">
-            <b-navbar-brand tag="h1" href="#">
-              <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
-              BootstrapVue
-            </b-navbar-brand>
-          </b-navbar>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>text</small>
-        </div>
-        <div>
-          <b-navbar toggleable type="light" variant="light">
-            <b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
-            <b-navbar-brand>BootstrapVue</b-navbar-brand>
-            <b-collapse is-nav id="nav_text_collapse">
-              <b-navbar-nav>
-                <b-nav-text>Navbar text</b-nav-text>
-              </b-navbar-nav>
-            </b-collapse>
-          </b-navbar>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>dropdown</small>
-        </div>
-        <div>
-          <b-navbar type="dark" variant="primary" toggleable>
-            <b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
-            <b-collapse is-nav id="nav_dropdown_collapse">
-              <b-navbar-nav>
-                <b-nav-item href="#">Home</b-nav-item>
-                <b-nav-item href="#">Link</b-nav-item>
-                <!-- Navbar dropdowns -->
-                <b-nav-item-dropdown text="Lang" right>
-                  <b-dropdown-item href="#">EN</b-dropdown-item>
-                  <b-dropdown-item href="#">ES</b-dropdown-item>
-                  <b-dropdown-item href="#">RU</b-dropdown-item>
-                  <b-dropdown-item href="#">FA</b-dropdown-item>
-                </b-nav-item-dropdown>
-                <b-nav-item-dropdown text="User" right>
-                  <b-dropdown-item href="#">Account</b-dropdown-item>
-                  <b-dropdown-item href="#">Settings</b-dropdown-item>
-                </b-nav-item-dropdown>
-              </b-navbar-nav>
-            </b-collapse>
-          </b-navbar>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>form</small>
-        </div>
-        <div>
-          <b-navbar type="light" variant="light">
-            <b-nav-form>
-              <b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
-              <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
-            </b-nav-form>
-          </b-navbar>
-        </div>
-      </b-card>
-      <b-card
-        header-tag="header"
-        footer-tag="footer">
-        <div slot="header">
-          <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
-          <small>input group</small>
-        </div>
-        <div>
-          <b-navbar type="light" variant="light">
-            <b-nav-form>
-              <b-input-group left="@">
-                <b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
-              </b-input-group>
-            </b-nav-form>
-          </b-navbar>
+                    </b-collapse>
+                </b-navbar>
+            </b-card>
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+                    <small>brand</small>
+                </div>
+                <div>
+                    <!-- Image and text -->
+                    <b-navbar variant="faded" type="light">
+                        <b-navbar-brand tag="h1" href="#">
+                            <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
+                            BootstrapVue
+                        </b-navbar-brand>
+                    </b-navbar>
+                </div>
+            </b-card>
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+                    <small>text</small>
+                </div>
+                <div>
+                    <b-navbar toggleable type="light" variant="light">
+                        <b-navbar-toggle target="nav_text_collapse"></b-navbar-toggle>
+                        <b-navbar-brand>BootstrapVue</b-navbar-brand>
+                        <b-collapse is-nav id="nav_text_collapse">
+                            <b-navbar-nav>
+                                <b-nav-text>Navbar text</b-nav-text>
+                            </b-navbar-nav>
+                        </b-collapse>
+                    </b-navbar>
+                </div>
+            </b-card>
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+                    <small>dropdown</small>
+                </div>
+                <div>
+                    <b-navbar type="dark" variant="primary" toggleable>
+                        <b-navbar-toggle target="nav_dropdown_collapse"></b-navbar-toggle>
+                        <b-collapse is-nav id="nav_dropdown_collapse">
+                            <b-navbar-nav>
+                                <b-nav-item href="#">Home</b-nav-item>
+                                <b-nav-item href="#">Link</b-nav-item>
+                                <!-- Navbar dropdowns -->
+                                <b-nav-item-dropdown text="Lang" right>
+                                    <b-dropdown-item href="#">EN</b-dropdown-item>
+                                    <b-dropdown-item href="#">ES</b-dropdown-item>
+                                    <b-dropdown-item href="#">RU</b-dropdown-item>
+                                    <b-dropdown-item href="#">FA</b-dropdown-item>
+                                </b-nav-item-dropdown>
+                                <b-nav-item-dropdown text="User" right>
+                                    <b-dropdown-item href="#">Account</b-dropdown-item>
+                                    <b-dropdown-item href="#">Settings</b-dropdown-item>
+                                </b-nav-item-dropdown>
+                            </b-navbar-nav>
+                        </b-collapse>
+                    </b-navbar>
+                </div>
+            </b-card>
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+                    <small>form</small>
+                </div>
+                <div>
+                    <b-navbar type="light" variant="light">
+                        <b-nav-form>
+                            <b-form-input class="mr-sm-2" type="text" placeholder="Search"></b-form-input>
+                            <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Search</b-button>
+                        </b-nav-form>
+                    </b-navbar>
+                </div>
+            </b-card>
+            <b-card
+                    header-tag="header"
+                    footer-tag="footer">
+                <div slot="header">
+                    <i class="fa fa-align-justify"></i> <strong> Navbar </strong>
+                    <small>input group</small>
+                </div>
+                <div>
+                    <b-navbar type="light" variant="light">
+                        <b-nav-form>
+                            <b-input-group left="@">
+                                <b-form-input class="mr-sm-2" type="text" placeholder="Username"></b-form-input>
+                            </b-input-group>
+                        </b-nav-form>
+                    </b-navbar>
+                </div>
+            </b-card>
         </div>
-      </b-card>
     </div>
-  </div>
 </template>
 
 <script>
-export default {
-  name: 'navbars'
-}
+    export default {
+        name: 'navbars'
+    }
 </script>
 
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 7980d995..ef83886f 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,109 +1,116 @@
 <template>
-  <b-card :header="caption">
-    <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
-      <template slot="status" slot-scope="data">
-        <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
-      </template>
-    </b-table>
-    <nav>
-      <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
-    </nav>
-  </b-card>
+    <b-card :header="caption">
+        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm"
+                 :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage">
+            <template slot="status" slot-scope="data">
+                <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+            </template>
+            <template slot="jobid" slot-scope="data">
+                <router-link  to="/tickets/view">{{data.item.jobid}}</router-link>
+            </template>
+        </b-table>
+        <nav>
+            <b-pagination :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev"
+                          next-text="Next" hide-goto-end-buttons/>
+        </nav>
+    </b-card>
 </template>
 
 <script>
-/**
+  /**
    * Randomize array element order in-place.
    * Using Durstenfeld shuffle algorithm.
    */
-const shuffleArray = (array) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    let j = Math.floor(Math.random() * (i + 1))
-    let temp = array[i]
-    array[i] = array[j]
-    array[j] = temp
+  const shuffleArray = (array) => {
+    for (let i = array.length - 1; i > 0; i--) {
+      let j = Math.floor(Math.random() * (i + 1))
+      let temp = array[i]
+      array[i] = array[j]
+      array[j] = temp
+    }
+    return array
   }
-  return array
-}
 
-export default {
-  name: 'c-table',
-  props: {
-    caption: {
-      type: String,
-      default: 'Table'
-    },
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    striped: {
-      type: Boolean,
-      default: false
-    },
-    bordered: {
-      type: Boolean,
-      default: false
+  export default {
+    name: 'c-table',
+    props: {
+      caption: {
+        type: String,
+        default: 'Table'
+      },
+      hover: {
+        type: Boolean,
+        default: false
+      },
+      striped: {
+        type: Boolean,
+        default: false
+      },
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      small: {
+        type: Boolean,
+        default: false
+      },
+      fixed: {
+        type: Boolean,
+        default: false
+      }
     },
-    small: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: () => {
-    return {
-      items: shuffleArray([
-        {username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-        {username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-        {username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-        {username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-        {username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-        {username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-        {username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
-      ]),
-      fields: [
-        {key: 'username'},
-        {key: 'registered'},
-        {key: 'role'},
-        {key: 'status'}
-      ],
-      currentPage: 1,
-      perPage: 5,
-      totalRows: 0
-    }
-  },
-  methods: {
-    getBadge (status) {
-      return status === 'Active' ? 'success'
-        : status === 'Inactive' ? 'secondary'
-          : status === 'Pending' ? 'warning'
-            : status === 'Banned' ? 'danger' : 'primary'
+    data: () => {
+      return {
+        items: shuffleArray([
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+          {username: 'Pantelion', registered: '2018/01/01', duedate: '2018/02/01',  jobid: '805553',description:'Overboar @ South Gate', status: 'Costing',},
+
+
+        ]),
+        fields: [
+          {key: 'jobid', label: 'Job#'},
+          {key: 'registered', label: 'Date'},
+          {key: 'username', label: 'Client'},
+          {key: 'duedate', label: 'Due Date'},
+          {key: 'description', label: 'Description'},
+          {key: 'status', label: 'Status'},
+
+        ],
+        currentPage: 1,
+        perPage: 10,
+        totalRows: 0
+      }
     },
-    getRowCount (items) {
-      return items.length
+    methods: {
+      getBadge(status) {
+        return status === 'Active' ? 'success'
+          : status === 'Inactive' ? 'secondary'
+            : status === 'Pending' ? 'warning'
+              : status === 'Banned' ? 'danger' : 'primary'
+      },
+      getRowCount(items) {
+        return items.length
+      }
     }
   }
-}
 </script>
diff --git a/src/views/base/TicketList.vue b/src/views/base/TicketList.vue
new file mode 100644
index 00000000..e95c79fc
--- /dev/null
+++ b/src/views/base/TicketList.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="animated fadeIn">
+
+    <b-form-group>
+      <b-input-group>
+        <!-- Attach Left button -->
+        <b-input-group-prepend>
+          <b-button variant="primary">
+            <i class="fa fa-search"></i> Search
+          </b-button>
+        </b-input-group-prepend>
+        <b-form-input type="text" placeholder="Job# or Customer name"></b-form-input>
+      </b-input-group>
+    </b-form-group>
+
+
+
+    <b-row>
+
+      <b-col lg="12">
+        <c-table striped caption="<i class='fa fa-align-justify'></i> Job Tickets"></c-table>
+      </b-col><!--/.col-->
+    </b-row><!--/.row-->
+
+
+  </div>
+
+</template>
+
+<script>
+  import cTable from './Table.vue'
+
+  export default {
+    name: 'tables',
+    components: {cTable}
+  }
+</script>
diff --git a/src/views/dashboard/CardBarChartExample.vue b/src/views/dashboard/CardBarChartExample.vue
index 6b99888b..6145f83d 100644
--- a/src/views/dashboard/CardBarChartExample.vue
+++ b/src/views/dashboard/CardBarChartExample.vue
@@ -8,7 +8,7 @@ export default {
   mounted () {
     const datasets4 = [
       {
-        label: 'My First dataset',
+        label: 'Tickets',
         backgroundColor: 'rgba(255,255,255,.3)',
         borderColor: 'transparent',
         data: [78, 81, 80, 45, 34, 12, 40, 75, 34, 89, 32, 68, 54, 72, 18, 98]
diff --git a/src/views/dashboard/CardLine1ChartExample.vue b/src/views/dashboard/CardLine1ChartExample.vue
index 3314b923..c699ea7f 100644
--- a/src/views/dashboard/CardLine1ChartExample.vue
+++ b/src/views/dashboard/CardLine1ChartExample.vue
@@ -10,7 +10,7 @@ export default {
     const brandPrimary = getStyle('--primary') || '#20a8d8'
     const datasets1 = [
       {
-        label: 'My First dataset',
+        label: 'Tickets',
         backgroundColor: brandPrimary,
         borderColor: 'rgba(255,255,255,.55)',
         data: [65, 59, 84, 84, 51, 55, 40]
diff --git a/src/views/dashboard/CardLine2ChartExample.vue b/src/views/dashboard/CardLine2ChartExample.vue
index 11718c76..626d4513 100644
--- a/src/views/dashboard/CardLine2ChartExample.vue
+++ b/src/views/dashboard/CardLine2ChartExample.vue
@@ -10,7 +10,7 @@ export default {
     const brandInfo = getStyle('--light-blue') || '#63c2de'
     const datasets2 = [
       {
-        label: 'My First dataset',
+        label: 'Tickets',
         backgroundColor: brandInfo,
         borderColor: 'rgba(255,255,255,.55)',
         data: [1, 18, 9, 17, 34, 22, 11]
diff --git a/src/views/dashboard/CardLine3ChartExample.vue b/src/views/dashboard/CardLine3ChartExample.vue
index 266f7b8b..ffe54dc6 100644
--- a/src/views/dashboard/CardLine3ChartExample.vue
+++ b/src/views/dashboard/CardLine3ChartExample.vue
@@ -8,7 +8,7 @@ export default {
   mounted () {
     const datasets3 = [
       {
-        label: 'My First dataset',
+        label: 'Tickets',
         backgroundColor: 'rgba(255,255,255,.2)',
         borderColor: 'rgba(255,255,255,.55)',
         data: [78, 81, 80, 45, 34, 12, 40]
diff --git a/src/views/dashboard/MainChartExample.vue b/src/views/dashboard/MainChartExample.vue
index 6cc712a2..5aec10b6 100644
--- a/src/views/dashboard/MainChartExample.vue
+++ b/src/views/dashboard/MainChartExample.vue
@@ -43,15 +43,6 @@ export default {
           pointHoverBackgroundColor: '#fff',
           borderWidth: 2,
           data: data2
-        },
-        {
-          label: 'My Third dataset',
-          backgroundColor: 'transparent',
-          borderColor: brandDanger,
-          pointHoverBackgroundColor: '#fff',
-          borderWidth: 1,
-          borderDash: [8, 5],
-          data: data3
         }
       ]
     }, {
diff --git a/src/views/products/Create.vue b/src/views/products/Create.vue
new file mode 100644
index 00000000..4db2b193
--- /dev/null
+++ b/src/views/products/Create.vue
@@ -0,0 +1,132 @@
+<template>
+    <b-card>
+        <b-row>
+            <b-col>
+            <div id="items-hierarchy">
+            <ol class="dd-list">
+                <li class="dd-item" data-id="1">
+                    <div class="dd-handle"><h5>Finishing</h5></div>
+                </li>
+                <li class="dd-item" data-id="4">
+                    <div class="dd-handle">Finished</div>
+                    <ol class="dd-list">
+                        <li class="dd-item" data-id="1">
+                            <div class="dd-handle"><h5>Side Option</h5></div>
+                        </li>
+                        <li class="dd-item" data-id="4">
+                            <div class="dd-handle">Single Sided</div>
+                            <ol class="dd-list">
+                                <li class="dd-item" data-id="1">
+                                    <div class="dd-handle"><h5>Lit Option</h5></div>
+                                </li>
+                                <li class="dd-item" data-id="4">
+                                    <div class="dd-handle">Frontlit</div>
+                                </li>
+                                <li class="dd-item" data-id="5" data-foo="bar">
+                                    <div class="dd-handle">Backlit</div>
+                                </li>
+                            </ol>
+                        </li>
+                        <li class="dd-item" data-id="5" data-foo="bar">
+                            <div class="dd-handle">Double Sided</div>
+                            <ol class="dd-list">
+                                <li class="dd-item" data-id="1">
+                                    <div class="dd-handle"><h5>Lit Option</h5></div>
+                                </li>
+                                <li class="dd-item" data-id="4">
+                                    <div class="dd-handle">Frontlit</div>
+                                </li>
+                            </ol>
+                        </li>
+
+
+                    </ol>
+                </li>
+                <li class="dd-item" data-id="5" data-foo="bar">
+                    <div class="dd-handle">Framed</div>
+                </li>
+                <li class="dd-item" data-id="5" data-foo="bar">
+                    <div class="dd-handle">Structure</div>
+                </li>
+
+            </ol>
+        </div>
+            </b-col>
+            <b-col>
+                <b-card>
+                    <div slot="header">
+                        <strong>Finishing</strong> <small> Update</small>
+                    </div>
+                    <b-row>
+                        <b-col sm="12">
+                            <b-form-group>
+                                <label for="name">Title</label>
+                                <b-form-input type="text" id="name" placeholder="Finishing"></b-form-input>
+                            </b-form-group>
+                        </b-col>
+                    </b-row>
+                    <b-row>
+                        <b-col sm="6">
+                            <b-form-group>
+                                <label for="ccnumber">Select Item Mapping</label>
+                                <b-form-input type="text" id="mapping" placeholder="Item Auto Complete"></b-form-input>
+                            </b-form-group>
+                        </b-col>
+
+                        <b-col sm="6">
+                            <b-form-group>
+                                <label for="ccnumber">Enter Inventory Utilization Formula</label>
+                                <b-form-input type="text" id="formula" placeholder="$qty*$width*$height"></b-form-input>
+                            </b-form-group>
+                        </b-col>
+                    </b-row>
+                    <b-row>
+                        <b-col sm="6">
+                            <b-form-group>
+                                <label for="ccnumber">Select Item Mapping</label>
+                                <b-form-input type="text" id="mapping" placeholder="Item Auto Complete"></b-form-input>
+                            </b-form-group>
+                        </b-col>
+
+                        <b-col sm="6">
+                            <b-form-group>
+                                <label for="ccnumber">Enter Inventory Utilization Formula</label>
+                                <b-form-input type="text" id="formula" placeholder="$qty*$width*$height"></b-form-input>
+                            </b-form-group>
+                        </b-col>
+                    </b-row>
+                    <b-button variant="outline-primary">+</b-button>
+
+                </b-card>
+            </b-col>
+        </b-row>
+    </b-card>
+</template>
+
+<script>
+  import 'nestable2/dist/jquery.nestable.min.css'
+  window.jQuery = require('jquery')
+  require('nestable2')
+
+
+  export default {
+    name: 'products',
+    components: {
+    },
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+
+    },
+
+    mounted: function () {
+      jQuery('#items-hierarchy').nestable({
+            maxDepth: 10000
+      });
+
+    }
+  }
+</script>
diff --git a/src/views/reports/Backlog.vue b/src/views/reports/Backlog.vue
new file mode 100644
index 00000000..209abba3
--- /dev/null
+++ b/src/views/reports/Backlog.vue
@@ -0,0 +1,636 @@
+<template>
+    <div class="row justify-content-center">
+        <b-card header="Kanban Management" class="col-10 p-0">
+            <div slot="header">
+                Kanban Management
+                <router-link to="/calendar"><h5 class="pull-right"><i class="fa fa-calendar"></i></h5>
+                </router-link>
+            </div>
+
+            <b-row>
+                <b-col>
+                    <strong>QUICK FILTERS:</strong>
+                <b-dropdown id="ddown1" variant="primary" text="Department" class="m-2">
+                    <b-dropdown-item>Printing</b-dropdown-item>
+                    <b-dropdown-item>Framing</b-dropdown-item>
+                    <b-dropdown-item>Finishing</b-dropdown-item>
+                </b-dropdown>
+                <b-dropdown id="ddown1" variant="primary" text="Assignee" class="m-2">
+                    <b-dropdown-item>Steve Rogers</b-dropdown-item>
+                    <b-dropdown-item>Peter Parker</b-dropdown-item>
+                    <b-dropdown-item>Bruce Banner</b-dropdown-item>
+                </b-dropdown>
+                <b-dropdown id="ddown1" variant="primary" text="Client" class="m-2">
+                    <b-dropdown-item>Disney</b-dropdown-item>
+                    <b-dropdown-item>Pixar</b-dropdown-item>
+                    <b-dropdown-item>Warner Bros</b-dropdown-item>
+                </b-dropdown>
+                </b-col>
+                <b-col>
+                    <b-row>
+
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button pressed block variant="outline-dark" aria-pressed="true">Due Today</b-button>
+                    </b-col>
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button block variant="outline-dark">Exclude Done</b-button>
+                    </b-col>
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button block variant="outline-dark">Assigned to me</b-button>
+                    </b-col>
+
+                    </b-row>
+                </b-col>
+            </b-row>
+
+
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion1>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 2 Banner and Bus Shelters</strong> [Due in 3 Days]
+                        <span class="badge badge-primary pull-right">Printing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion2>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 1 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion2" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion3>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 3 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion3" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion4>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 4 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion4" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion5>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 5 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion5" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion6>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 6 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion6" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+            <b-card no-body class="mb-1">
+                <b-card-header header-tag="header" class="p-1" role="tab">
+                    <b-btn block href="#" v-b-toggle.accordion7>
+                        <i class="fa fa-bars pull-left"></i>
+                        <strong>Nut Job 7 Banner </strong> [Due Tomorrow]
+                        <span class="badge badge-success pull-right">Finishing</span>
+                    </b-btn>
+                </b-card-header>
+                <b-collapse id="accordion7" visible accordion="my-accordion" role="tabpanel">
+                    <b-card-body>
+                        <div class="board">
+                            <div class="boardColumn boardColumn--TODO">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">To do</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Printing</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div>
+                                                <span class="taskCard__id">REACT-5</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Building</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-6</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--INPROGRESS">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">In Progress</h1></header>
+
+                                <div class="boardColumn__taskList">
+                                    <div class="taskCard taskCard--MEDIUM">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Pre Process</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">MEDIUM</span>
+                                            <div><span class="taskCard__id">REACT-4</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="boardColumn boardColumn--DONE">
+                                <header class="boardColumn__header"><h1 class="boardColumn__title">Done</h1></header>
+
+                                <div class="boardColumn__taskList">
+
+                                    <div class="taskCard taskCard--HIGH">
+                                        <header class="taskCard__header"><h4 class="taskCard__title">Done Job</h4>
+                                            <div class="taskCard__epicLink-wrapper"><span
+                                                    class="taskCard__epicLink-title">React buidings</span></div>
+                                        </header>
+                                        <footer class="taskCard__footer"><span class="taskCard__type">HIGH</span>
+                                            <div><span class="taskCard__id">REACT-3</span>
+                                                <i class="fa fa-user"></i>
+                                            </div>
+                                        </footer>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </b-card-body>
+                </b-collapse>
+            </b-card>
+        </b-card>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'tooltips',
+    data() {
+      return {
+        show: true,
+        disabled: false
+      }
+    },
+    methods: {
+      onOpen() {
+        this.$refs.tooltip.$emit('open')
+      },
+      onClose() {
+        this.$refs.tooltip.$emit('close')
+      },
+      disableByRef() {
+        if (this.disabled) {
+          this.$refs.tooltip2.$emit('enable')
+        } else {
+          this.$refs.tooltip2.$emit('disable')
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/reports/Calendar.vue b/src/views/reports/Calendar.vue
new file mode 100644
index 00000000..5b131e45
--- /dev/null
+++ b/src/views/reports/Calendar.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="row justify-content-center">
+        <b-card header="Calendar" class="col-10 p-0">
+            <div slot="header">
+                Calendar
+                <router-link to="/backlog"><h5 class="pull-right"><i class="fa fa-calendar"></i></h5>
+                </router-link>
+            </div>
+
+            <b-row>
+                <b-col>
+                    <strong>QUICK FILTERS:</strong>
+                <b-dropdown id="ddown1" variant="primary" text="Department" class="m-2">
+                    <b-dropdown-item>Printing</b-dropdown-item>
+                    <b-dropdown-item>Framing</b-dropdown-item>
+                    <b-dropdown-item>Finishing</b-dropdown-item>
+                </b-dropdown>
+                <b-dropdown id="ddown1" variant="primary" text="Assignee" class="m-2">
+                    <b-dropdown-item>Steve Rogers</b-dropdown-item>
+                    <b-dropdown-item>Peter Parker</b-dropdown-item>
+                    <b-dropdown-item>Bruce Banner</b-dropdown-item>
+                </b-dropdown>
+                <b-dropdown id="ddown1" variant="primary" text="Client" class="m-2">
+                    <b-dropdown-item>Disney</b-dropdown-item>
+                    <b-dropdown-item>Pixar</b-dropdown-item>
+                    <b-dropdown-item>Warner Bros</b-dropdown-item>
+                </b-dropdown>
+                </b-col>
+                <b-col>
+                    <b-row>
+
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button pressed block variant="outline-dark" aria-pressed="true">Due Today</b-button>
+                    </b-col>
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button block variant="outline-dark">Exclude Done</b-button>
+                    </b-col>
+                    <b-col cols="4" sm="4" md="2" lg class="mb-3 mb-xl-0">
+                        <b-button block variant="outline-dark">Assigned to me</b-button>
+                    </b-col>
+
+                    </b-row>
+                </b-col>
+            </b-row>
+
+            <div class="row justify-content-center">
+            <div id="calendar" class="fc fc-ltr col-10"><table class="fc-header" style="width:100%"><tbody><tr><td class="fc-header-left"><span class="fc-header-title"><h2>September 2018</h2></span></td><td class="fc-header-center"><span class="fc-button fc-button-agendaDay fc-state-default fc-corner-left" unselectable="on">day</span><span class="fc-button fc-button-agendaWeek fc-state-default" unselectable="on">week</span><span class="fc-button fc-button-month fc-state-default fc-corner-right fc-state-active" unselectable="on">month</span></td><td class="fc-header-right"><span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on"><span class="fc-text-arrow">‹</span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"><span class="fc-text-arrow">›</span></span><span class="fc-header-space"></span><span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-disabled" unselectable="on">today</span></td></tr></tbody></table><div class="fc-content" style="position: relative;"><div class="fc-view fc-view-month fc-grid" style="position:relative" unselectable="on"><div class="fc-event-container" style="position:absolute;z-index:8;top:0;left:0"><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 643px; width: 123px; top: 67px;"><div class="fc-event-inner"><span class="fc-event-title">All Day Event</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end info" style="position: absolute; left: 2px; width: 124px; top: 174px;"><div class="fc-event-inner"><span class="fc-event-time">4p</span><span class="fc-event-title">Repeating Event</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end info" style="position: absolute; left: 2px; width: 124px; top: 280px;"><div class="fc-event-inner"><span class="fc-event-time">4p</span><span class="fc-event-title">Repeating Event</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end important" style="position: absolute; left: 387px; width: 123px; top: 174px;"><div class="fc-event-inner"><span class="fc-event-time">10:30a</span><span class="fc-event-title">Meeting</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end important" style="position: absolute; left: 387px; width: 123px; top: 202px;"><div class="fc-event-inner"><span class="fc-event-time">12p</span><span class="fc-event-title">Lunch</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end" style="position: absolute; left: 515px; width: 123px; top: 174px;"><div class="fc-event-inner"><span class="fc-event-time">7p</span><span class="fc-event-title">Birthday Party</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></div><a href="https://ccp.cloudaccess.net/aff.php?aff=5188" class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end success" style="position: absolute; left: 515px; width: 251px; top: 492px;"><div class="fc-event-inner"><span class="fc-event-title">Click for Google</span></div><div class="ui-resizable-handle ui-resizable-e">&nbsp;&nbsp;&nbsp;</div></a></div><table class="fc-border-separate" style="width:100%" cellspacing="0"><thead><tr class="fc-first fc-last"><th class="fc-day-header fc-mon fc-widget-header fc-first" style="width: 128px;">Mon</th><th class="fc-day-header fc-tue fc-widget-header" style="width: 128px;">Tue</th><th class="fc-day-header fc-wed fc-widget-header" style="width: 128px;">Wed</th><th class="fc-day-header fc-thu fc-widget-header" style="width: 128px;">Thu</th><th class="fc-day-header fc-fri fc-widget-header" style="width: 128px;">Fri</th><th class="fc-day-header fc-sat fc-widget-header" style="width: 128px;">Sat</th><th class="fc-day-header fc-sun fc-widget-header fc-last">Sun</th></tr></thead><tbody><tr class="fc-week fc-first"><td class="fc-day fc-mon fc-widget-content fc-other-month fc-past fc-first" data-date="2018-08-27"><div style="min-height: 106px;"><div class="fc-day-number">27</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-other-month fc-past" data-date="2018-08-28"><div><div class="fc-day-number">28</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-other-month fc-past" data-date="2018-08-29"><div><div class="fc-day-number">29</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-other-month fc-past" data-date="2018-08-30"><div><div class="fc-day-number">30</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-other-month fc-past" data-date="2018-08-31"><div><div class="fc-day-number">31</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-past" data-date="2018-09-01"><div><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-past fc-last" data-date="2018-09-02"><div><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-mon fc-widget-content fc-past fc-first" data-date="2018-09-03"><div style="min-height: 105px;"><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-past" data-date="2018-09-04"><div><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-past" data-date="2018-09-05"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-today fc-state-highlight" data-date="2018-09-06"><div><div class="fc-day-number">6</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2018-09-07"><div><div class="fc-day-number">7</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future" data-date="2018-09-08"><div><div class="fc-day-number">8</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-future fc-last" data-date="2018-09-09"><div><div class="fc-day-number">9</div><div class="fc-day-content"><div style="position: relative; height: 56px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-mon fc-widget-content fc-future fc-first" data-date="2018-09-10"><div style="min-height: 105px;"><div class="fc-day-number">10</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-future" data-date="2018-09-11"><div><div class="fc-day-number">11</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2018-09-12"><div><div class="fc-day-number">12</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2018-09-13"><div><div class="fc-day-number">13</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2018-09-14"><div><div class="fc-day-number">14</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future" data-date="2018-09-15"><div><div class="fc-day-number">15</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-future fc-last" data-date="2018-09-16"><div><div class="fc-day-number">16</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-mon fc-widget-content fc-future fc-first" data-date="2018-09-17"><div style="min-height: 105px;"><div class="fc-day-number">17</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-future" data-date="2018-09-18"><div><div class="fc-day-number">18</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2018-09-19"><div><div class="fc-day-number">19</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2018-09-20"><div><div class="fc-day-number">20</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2018-09-21"><div><div class="fc-day-number">21</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future" data-date="2018-09-22"><div><div class="fc-day-number">22</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-future fc-last" data-date="2018-09-23"><div><div class="fc-day-number">23</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td></tr><tr class="fc-week"><td class="fc-day fc-mon fc-widget-content fc-future fc-first" data-date="2018-09-24"><div style="min-height: 105px;"><div class="fc-day-number">24</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-future" data-date="2018-09-25"><div><div class="fc-day-number">25</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-future" data-date="2018-09-26"><div><div class="fc-day-number">26</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-future" data-date="2018-09-27"><div><div class="fc-day-number">27</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-future" data-date="2018-09-28"><div><div class="fc-day-number">28</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-future" data-date="2018-09-29"><div><div class="fc-day-number">29</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-future fc-last" data-date="2018-09-30"><div><div class="fc-day-number">30</div><div class="fc-day-content"><div style="position: relative; height: 28px;">&nbsp;</div></div></div></td></tr><tr class="fc-week fc-last"><td class="fc-day fc-mon fc-widget-content fc-other-month fc-future fc-first" data-date="2018-10-01"><div style="min-height: 105px;"><div class="fc-day-number">1</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-tue fc-widget-content fc-other-month fc-future" data-date="2018-10-02"><div><div class="fc-day-number">2</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-wed fc-widget-content fc-other-month fc-future" data-date="2018-10-03"><div><div class="fc-day-number">3</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-thu fc-widget-content fc-other-month fc-future" data-date="2018-10-04"><div><div class="fc-day-number">4</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-fri fc-widget-content fc-other-month fc-future" data-date="2018-10-05"><div><div class="fc-day-number">5</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-sat fc-widget-content fc-other-month fc-future" data-date="2018-10-06"><div><div class="fc-day-number">6</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td><td class="fc-day fc-sun fc-widget-content fc-other-month fc-future fc-last" data-date="2018-10-07"><div><div class="fc-day-number">7</div><div class="fc-day-content"><div style="position: relative; height: 0px;">&nbsp;</div></div></div></td></tr></tbody></table></div></div></div>
+            </div>
+        </b-card>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'tooltips',
+    data() {
+      return {
+        show: true,
+        disabled: false
+      }
+    },
+    methods: {
+      onOpen() {
+        this.$refs.tooltip.$emit('open')
+      },
+      onClose() {
+        this.$refs.tooltip.$emit('close')
+      },
+      disableByRef() {
+        if (this.disabled) {
+          this.$refs.tooltip2.$emit('enable')
+        } else {
+          this.$refs.tooltip2.$emit('disable')
+        }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/views/tickets/Create.vue b/src/views/tickets/Create.vue
new file mode 100644
index 00000000..e6cb9a65
--- /dev/null
+++ b/src/views/tickets/Create.vue
@@ -0,0 +1,357 @@
+<template>
+    <b-card>
+    <form-wizard @on-complete="onComplete"
+                 shape="square"
+                 color="#3498db"
+                title=""
+                subtitle="">
+        <tab-content title="Account"
+                     icon="fa fa-user">
+            <b-row>
+                <b-col sm="12">
+                    <b-card>
+                        <b-form-group>
+                            <label for="company">Company</label>
+                            <b-form-input type="text" id="company" placeholder="Enter your company name"></b-form-input>
+                        </b-form-group>
+                        <b-row>
+                            <b-col sm="8">
+                                <b-form-group>
+                                    <label for="vat">Job Title </label>
+                                    <b-form-input type="text" id="vat" placeholder="PL1234567890"></b-form-input>
+                                </b-form-group>
+                            </b-col>
+                            <b-col sm="4">
+                                <b-form-group>
+                                    <label for="postal-code">Category</label>
+                                    <b-form-input type="text" id="po" placeholder="Category"></b-form-input>
+                                </b-form-group>
+                            </b-col>
+                        </b-row>
+                        <b-row>
+                            <b-col sm="8">
+                                <b-form-group>
+                                    <label for="city">Due Date</label>
+                                    <b-form-input type="text" id="duedate" placeholder="Due Date"></b-form-input>
+                                </b-form-group>
+                            </b-col>
+                            <b-col sm="4">
+                                <b-form-group>
+                                    <label for="postal-code">PO#</label>
+                                    <b-form-input type="text" id="po" placeholder="PO"></b-form-input>
+                                </b-form-group>
+                            </b-col>
+                        </b-row>
+                    </b-card>
+                </b-col>
+            </b-row>
+        </tab-content>
+        <tab-content title="Item"
+                     icon="fa fa-cart-plus">
+            <b-card>
+
+            <b-row>
+                <b-col sm="6">
+                    <b-form-group>
+                        <h6>Size</h6>
+                        <b-row>
+                        <b-col sm="4">
+                            <b-form-input type="text" placeholder="width"></b-form-input>
+                        </b-col>
+                        <b-col sm="4">
+                            <b-form-input type="text" placeholder="height"></b-form-input>
+                        </b-col>
+                        </b-row>
+                    </b-form-group>
+                </b-col>
+                <b-col sm="6">
+                    <b-form-group>
+                        <b-row>
+                            <b-col sm="4">
+                                <h6>Quantity</h6>
+                                <b-form-input type="text" id="po" placeholder="qty"></b-form-input>                            </b-col>
+                            <b-col sm="4">
+                                <h6>Cost</h6>
+                                <b-form-input type="text" placeholder="cost"></b-form-input>
+                            </b-col>
+                        </b-row>
+
+                    </b-form-group>
+                </b-col>
+            </b-row>
+            <h6 class="border-bottom pb-2 mt-3">Select Product</h6>
+            <b-row>
+                <b-col cols="6" sm="4" md="3" lg="2">
+                    <div class="text-center" @click="setProduct('Banner')">
+                    <i class="fa fa-circle fa-2x "
+                       :class="{'text-primary': (product === 'Banner'), 'text-secondary': (product !== 'Banner')}"
+                       ></i><br>Banner
+                    </div>
+                </b-col>
+                <b-col cols="6" sm="4" md="3" lg="2">
+                    <div class="text-center" @click="setProduct('Rigid')">
+                      <i class="fa fa-circle fa-2x "
+                         :class="{'text-primary': (product === 'Rigid'), 'text-secondary': (product !== 'Rigid')}"
+                         ></i><br>Rigid
+                    </div>
+                </b-col>
+                <b-col cols="6" sm="4" md="3" lg="2">
+                    <div class="text-center" @click="setProduct('Textile')">
+                      <i class="fa fa-circle fa-2x "
+                         :class="{'text-primary': (product === 'Textile'), 'text-secondary': (product !== 'Textile')}"
+                         ></i><br>Textile
+                    </div>
+                </b-col>
+                <b-col cols="6" sm="4" md="3" lg="2">
+                    <div class="text-center" @click="setProduct('Unmounted')">
+                      <i class="fa fa-circle fa-2x "
+                         :class="{'text-primary': (product === 'Unmounted'), 'text-secondary': (product !== 'Unmounted')}"
+                         ></i><br>Unmounted
+                    </div>
+                </b-col>
+
+            </b-row>
+<div v-if="product !== ''">
+                <h6 class="border-bottom pb-2 mt-3">Finishing</h6>
+                <b-row>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center" @click="setFinishing('Finished')">
+                            <i
+                              class="fa fa-circle fa-2x"
+                              :class="{'text-primary': (finishing === 'Finished'), 'text-secondary': (finishing !== 'Finished')}"
+                            ></i><br>Finished
+                        </div>
+                    </b-col>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center"  @click="setFinishing('Framed')">
+                            <i class="fa fa-circle fa-2x"
+                               :class="{'text-primary': (finishing === 'Framed'), 'text-secondary': (finishing !== 'Framed')}"
+                            ></i><br>Framed
+                        </div>
+                    </b-col>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center"  @click="setFinishing('Structure')">
+                            <i class="fa fa-circle fa-2x"
+                               :class="{'text-primary': (finishing === 'Structure'), 'text-secondary': (finishing !== 'Structure')}"
+                            ></i><br>Structure
+                        </div>
+                    </b-col>
+
+                </b-row>
+</div>
+              <div  v-if="finishing !== ''">
+                <h6 class="border-bottom pb-2 mt-3">Sides</h6>
+                <b-row>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center"  @click="setSides('Single Sided')">
+                            <i class="fa fa-circle fa-2x "
+                               :class="{'text-primary': (sides === 'Single Sided'), 'text-secondary': (sides !== 'Single Sided')}"></i><br>Single Sided
+                        </div>
+                    </b-col>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center" @click="setSides('Double Sided')">
+                            <i class="fa fa-circle fa-2x "
+                               :class="{'text-primary': (sides === 'Double Sided'), 'text-secondary': (sides !== 'Double Sided')}"
+                            ></i><br>Double Sided
+                        </div>
+                    </b-col>
+
+                </b-row>
+              </div>
+              <div  v-if="sides !== ''">
+
+                <h6 class="border-bottom pb-2 mt-3">Lite</h6>
+                <b-row>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center"  @click="setLight('Frontlit')">
+                            <i class="fa fa-circle fa-2x "
+                               :class="{'text-primary': (light === 'Frontlit'), 'text-secondary': (light !== 'Frontlit')}"
+                            ></i><br>Frontlit
+                        </div>
+                    </b-col>
+                    <b-col cols="6" sm="4" md="3" lg="2">
+                        <div class="text-center"  @click="setLight('Backlit')">
+                            <i class="fa fa-circle fa-2x"
+                               :class="{'text-primary': (light === 'Backlit'), 'text-secondary': (light !== 'Backlit')}"
+                            ></i><br>Backlit
+                        </div>
+                    </b-col>
+
+                </b-row>
+              </div>
+
+            </b-card>
+
+          <b-card header="Notes & Attachment">
+
+            <b-row>
+              <b-col sm="6">
+                  <textarea class="form-control" rows="3"></textarea>
+              </b-col>
+
+              <b-col sm="6">
+                <div class="custom-file">
+                  <input type="file" class="custom-file-input" id="customFile">
+                  <label class="custom-file-label" for="customFile">Choose file</label>
+                </div>
+              </b-col>
+            </b-row>
+
+
+          </b-card>
+
+        </tab-content>
+        <tab-content title="Review Items"
+                     icon="fa fa-cart-arrow-down">
+          <table id="cart" class="table table-hover table-condensed">
+            <thead>
+            <tr>
+              <th style="width:50%">Product</th>
+              <th style="width:10%">Price</th>
+              <th style="width:8%">Quantity</th>
+              <th style="width:22%" class="text-right">Subtotal</th>
+              <th style="width:10%"></th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td data-th="Product">
+                <div class="row">
+                  <div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
+                  <div class="col-sm-10">
+                    <h4 class="nomargin">Banner 1</h4>
+                    <p>
+                      <strong>Size:</strong> 100x120<br/>
+                      <strong>Finishing:</strong> Framed<br/>
+                      <strong>Sides:</strong> Single Sided<br/>
+                      <strong>Lit:</strong> Frontlit<br/>
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td data-th="Price">$1.99</td>
+              <td data-th="Quantity">
+                <input type="number" class="form-control text-center" value="1">
+              </td>
+              <td data-th="Subtotal" class="text-right">$1.99</td>
+              <td class="actions" data-th="">
+                <button class="btn btn-info btn-sm"><i class="fa fa-copy" title="Clone item"></i></button>
+                <button class="btn btn-info btn-sm"><i class="fa fa-edit"></i></button>
+                <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="3" class="hidden-xs"></td>
+              <td class="hidden-xs text-right"><strong>Total $1.99</strong></td>
+              <td></td>
+            </tr>
+            </tbody>
+
+
+          </table>
+        </tab-content>
+        <tab-content title="Other Information"
+                     icon="fa fa-info">
+            <b-row>
+                <b-col sm="6">
+                    <b-card header="Shipping Information">
+                        <textarea class="form-control" rows="3"></textarea>
+                    </b-card>
+                </b-col>
+
+                <b-col sm="6">
+                    <b-card header="Installation">
+                        <textarea class="form-control" rows="3"></textarea>
+                    </b-card>
+                </b-col>
+            </b-row>
+          <b-card header="Notes & Attachment">
+
+            <b-row>
+              <b-col sm="6">
+                <textarea class="form-control" rows="3"></textarea>
+              </b-col>
+
+              <b-col sm="6">
+                <div class="custom-file">
+                  <input type="file" class="custom-file-input" id="customFile">
+                  <label class="custom-file-label" for="customFile">Choose file</label>
+                </div>
+              </b-col>
+            </b-row>
+
+
+          </b-card>
+        </tab-content>
+        <tab-content title="Confirmation"
+                     icon="fa fa-check">
+
+          <h4>Job ticket #1234 is successfully created! It's due on Feb 15th 2019. </h4>
+
+
+        </tab-content>
+
+
+
+    </form-wizard>
+    </b-card>
+
+
+
+
+</template>
+
+<script>
+  import {FormWizard, TabContent} from 'vue-form-wizard'
+  import 'vue-form-wizard/dist/vue-form-wizard.min.css'
+  import 'nestable2/dist/jquery.nestable.min.css'
+  //component code
+
+
+  export default {
+    name: 'forms',
+    components: {
+      FormWizard,
+      TabContent
+    },
+    data () {
+      return {
+        selected: [], // Must be an array reference!
+        show: true,
+        product: '',
+        finishing: '',
+        sides: '',
+        light: ''
+      }
+    },
+    methods: {
+      setProduct (value) {
+        this.product = value
+        this.finishing = ''
+        this.sides = ''
+        this.light = ''
+        // do nothing
+      },
+      setFinishing (value) {
+        this.finishing = value;
+        this.sides = ''
+        this.light = ''
+        // do nothing
+      },
+      setSides (value) {
+        this.sides = value
+        this.light = ''
+        // do nothing
+      },
+      setLight (value) {
+        this.light = value
+        // do nothing
+      }
+    },
+
+    mounted: function () {
+
+
+    }
+  }
+</script>
diff --git a/src/views/tickets/View.vue b/src/views/tickets/View.vue
new file mode 100644
index 00000000..2d2afa44
--- /dev/null
+++ b/src/views/tickets/View.vue
@@ -0,0 +1,803 @@
+<template>
+  <div class="animated fadeIn">
+    <b-row>
+      <b-col xs="12">
+          <b-tabs v-model="tabIndex[0]">
+            <b-tab active>
+              <template slot="title">
+                <i class="icon-docs"></i> {{tabs[0]}}
+              </template>
+              <b-row>
+                <b-col sm="6" md="6">
+                <b-card header="WB Exhibitor Service - ML">
+                  <strong>Contact : Warner Bros</strong><br />
+                  Michael Lynch <br />
+                  3903 W Oliver Ave, Rm 2434 <br />
+                  Burbank CA 91522
+                </b-card>
+              </b-col>
+                <b-col sm="6" md="6" >
+                  <b-card header="Status">
+                    <b-row>
+                      <b-col sm="6" md="6">
+                        <h1 class="text-primary">Finishing</h1>
+                        <h3>Banner</h3>
+                      </b-col>
+                      <b-col class="border-left" sm="6" md="6" >
+                          <b-row class="pb-1 pl-2">
+                            <h4>Order Date:</h4>
+                            <span class="p-1">Aug 15th 2018</span>
+
+                          </b-row>
+                          <b-row class="border-top pt-3 pl-2">
+                            <h4>Ship Date:</h4>
+                            <span class="p-1">Sep 08th 2018</span>
+                          </b-row>
+                      </b-col>
+                    </b-row>
+                  </b-card>
+                </b-col>
+
+              </b-row>
+              <b-tabs>
+                <b-tab title="Item info" active>
+                  <b-row>
+                    <b-col md="2">
+                      <img src="https://via.placeholder.com/200x200" class="rounded">
+                    </b-col>
+                    <b-col md="10">
+                      <table class="table">
+                        <tbody>
+                        <tr>
+                          <td><strong>Product:</strong> Banner </td>
+                        </tr>
+                        <tr>
+                          <td><strong>Size:</strong> 23x12 </td>
+                        </tr>
+                        <tr>
+                          <td><strong>Media:</strong> Samba Opaque</td>
+
+                        </tr>
+                        <tr>
+
+                          <td><strong>Finishing:</strong> Trim Banner</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Frame:</strong> Xys</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Wood:</strong> Abc </td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Display Option:</strong> Placeholder</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Sides:</strong> Single Sides</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Notes:</strong> This is item note</td>
+                        </tr>
+
+                        </tbody>
+                      </table>
+                    </b-col>
+                  </b-row>
+
+                </b-tab>
+                <b-tab title="Check list" >
+                  <div class="row">
+                    <div class="col-md-12">
+
+                        <div class="box-body">
+                          <ul class="todo-list ui-sortable">
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">Prpress</span>
+                              <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">Design</span>
+                              <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">Finishing</span>
+                              <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">Mounting</span>
+                              <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">File Processsing</span>
+                              <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                            <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                              <input type="checkbox" value="" name="">
+                              <span class="text">Installation</span>
+                              <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+                              <div class="tools">
+                                <i class="fa fa-edit"></i>
+                                <i class="fa fa-trash-o"></i>
+                              </div>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="box-footer clearfix no-border">
+                          <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+                        </div>
+                    </div>
+
+
+                  </div>
+                </b-tab>
+                <b-tab>
+                  <template slot="title">
+                    <i class="icon-layers"></i>Attachments
+                  </template>
+
+                  <table class="table table-responsive-sm">
+                    <thead>
+                    <tr>
+                      <th>Type</th>
+                      <th>Date </th>
+                      <th>File</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                      <td><span class="badge badge-primary">PDF</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Spider Man Poster.pdf</a> </td>
+
+                    </tr>
+                    <tr>
+                      <td><span class="badge badge-primary">PDF</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Spider Man Poster.jpg</a> </td>
+                    </tr>
+                    <tr>
+                      <td><span class="badge badge-primary">JPG</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Hulk Smash Poster.jpg</a> </td>
+                    </tr>
+
+                    </tbody>
+                  </table>
+                  <div class="custom-file">
+                    <input type="file" class="custom-file-input" id="customFile">
+                    <label class="custom-file-label" for="customFile">Choose file</label>
+                  </div>
+                </b-tab>
+
+              </b-tabs>
+              <b-tabs class="mt-4">
+                <b-tab title="Item info" active>
+                  <b-row>
+                    <b-col md="2">
+                      <img src="https://via.placeholder.com/200x200" class="rounded">
+                    </b-col>
+                    <b-col md="10">
+                      <table class="table">
+                        <tbody>
+                        <tr>
+                          <td><strong>Product:</strong> Banner </td>
+                        </tr>
+                        <tr>
+                          <td><strong>Size:</strong> 23x12 </td>
+                        </tr>
+                        <tr>
+                          <td><strong>Media:</strong> Samba Opaque</td>
+
+                        </tr>
+                        <tr>
+
+                          <td><strong>Finishing:</strong> Trim Banner</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Frame:</strong> Xys</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Wood:</strong> Abc </td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Display Option:</strong> Placeholder</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Sides:</strong> Single Sides</td>
+                        </tr>
+                        <tr>
+
+                          <td><strong>Notes:</strong> This is item note</td>
+                        </tr>
+
+                        </tbody>
+                      </table>
+                    </b-col>
+                  </b-row>
+
+                </b-tab>
+                <b-tab title="Check list" >
+                  <div class="row">
+                    <div class="col-md-12">
+
+                      <div class="box-body">
+                        <ul class="todo-list ui-sortable">
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">Prpress</span>
+                            <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">Design</span>
+                            <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">Finishing</span>
+                            <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">Mounting</span>
+                            <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">File Processsing</span>
+                            <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                          <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                            <input type="checkbox" value="" name="">
+                            <span class="text">Installation</span>
+                            <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+                            <div class="tools">
+                              <i class="fa fa-edit"></i>
+                              <i class="fa fa-trash-o"></i>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                      <div class="box-footer clearfix no-border">
+                        <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+                      </div>
+                    </div>
+
+
+                  </div>
+                </b-tab>
+                <b-tab>
+                  <template slot="title">
+                    <i class="icon-layers"></i>Attachments
+                  </template>
+
+                  <table class="table table-responsive-sm">
+                    <thead>
+                    <tr>
+                      <th>Type</th>
+                      <th>Date </th>
+                      <th>File</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                      <td><span class="badge badge-primary">PDF</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Spider Man Poster.pdf</a> </td>
+
+                    </tr>
+                    <tr>
+                      <td><span class="badge badge-primary">PDF</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Spider Man Poster.jpg</a> </td>
+                    </tr>
+                    <tr>
+                      <td><span class="badge badge-primary">JPG</span></td>
+                      <td>2012/01/01</td>
+                      <td><a href="#">Hulk Smash Poster.jpg</a> </td>
+                    </tr>
+
+                    </tbody>
+                  </table>
+                  <div class="custom-file">
+                    <input type="file" class="custom-file-input" id="customFile">
+                    <label class="custom-file-label" for="customFile">Choose file</label>
+                  </div>
+                </b-tab>
+
+              </b-tabs>
+              <b-row class="mt-4">
+                <b-col md="12">
+                <b-card header="Checklist">
+
+                <div class="col-md-12">
+
+                    <div class="box-body">
+                      <ul class="todo-list ui-sortable">
+                        <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+
+            </span>
+                          <input type="checkbox" value="" name="">
+                          <span class="text">Install on top of empire state</span>
+                          <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+                          <div class="tools">
+                            <i class="fa fa-edit"></i>
+                            <i class="fa fa-trash-o"></i>
+                          </div>
+                        </li>
+                        <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                          <input type="checkbox" value="" name="">
+                          <span class="text">Ship to mars</span>
+                          <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+                          <div class="tools">
+                            <i class="fa fa-edit"></i>
+                            <i class="fa fa-trash-o"></i>
+                          </div>
+                        </li>
+                        <li>
+            <span class="handle ui-sortable-handle">
+              <i class="fa fa-ellipsis-v"></i>
+              <i class="fa fa-ellipsis-v"></i>
+            </span>
+                          <input type="checkbox" value="" name="">
+                          <span class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</span>
+                          <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+                          <div class="tools">
+                            <i class="fa fa-edit"></i>
+                            <i class="fa fa-trash-o"></i>
+                          </div>
+                        </li>
+
+
+
+                      </ul>
+                    </div>
+                    <div class="box-footer clearfix no-border">
+                      <input class="col-sm-11">
+                      <button type="button" class="btn btn-default pull-right"><i class="fa fa-plus"></i> Add item</button>
+                    </div>
+                  </div>
+                </b-card></b-col>
+              </b-row>
+              <b-row>
+                <b-col sm="6" md="6">
+                  <b-card header="Shipping Information">
+                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                  </b-card>
+                </b-col>
+                <b-col sm="6" md="6" >
+                  <b-card header="Installation">
+                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                  </b-card>
+                </b-col>
+
+              </b-row>
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-layers"></i> {{tabs[1]}}
+              </template>
+              <b-row class="pb-2">
+              <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+                <b-button block variant="primary">Create Invoice</b-button>
+              </b-col>
+              <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+                <b-button block variant="secondary">Create Estimate</b-button>
+              </b-col>
+              <b-col cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
+                <b-button block variant="success">Create Purchase Order</b-button>
+              </b-col></b-row>
+
+              <table class="table table-responsive-sm">
+                <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>Date </th>
+                  <th>ID</th>
+                  <th>Created by</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                  <td><span class="badge badge-primary">Invoice</span></td>
+                  <td>2012/01/01</td>
+                  <td><a href="#">234</a> </td>
+                  <td>
+                    John Smith
+                  </td>
+                </tr>
+                <tr>
+                  <td><span class="badge badge-primary">Invoice</span></td>
+                  <td>2012/02/01</td>
+                  <td><a href="#">234</a</td>
+                  <td>
+                    John Snow
+                  </td>
+                </tr>
+                <tr>
+                  <td><span class="badge badge-secondary">Estimates</span></td>
+                  <td>2012/02/01</td>
+                  <td><a href="#">234</a</td>
+                  <td>
+                    Peter Parker
+                  </td>
+                </tr>
+                <tr>
+                  <td><span class="badge badge-success">Purchase order</span></td>
+                  <td>2012/03/01</td>
+                  <td><a href="#">234</a</td>
+                  <td>
+                    Tony Stark
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </b-tab>
+            <b-tab>
+              <template slot="title">
+                <i class="icon-layers"></i> {{tabs[2]}}
+              </template>
+              <div class="container">
+                <div class="row">
+                  <h2>Time Line</h2>
+                </div>
+                <div class="qa-message-list" id="wallmessages">
+                  <div class="message-item" id="m16">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">Oleg Kolesnichenko</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Jan 21</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko">Oleg Kolesnichenko</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Yo!
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m9">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=amiya"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">amiya</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Nov 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=amiya">amiya</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Nice theme . Excellent one .
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m7">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=russell"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">russell</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 25, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=russell">russell</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Nullam porta leo vitae ipsum feugiat viverra. In sed placerat mi. Nullam euismod, quam in euismod rhoncus, tellus velit posuere tortor, non cursus nunc velit et lacus.
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m6">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=juggornot"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">juggornot</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=juggornot">juggornot</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Integer vitae arcu vitae ligula Cras vestibulum suscipit odio ac dapibus. In hac habitasse platea dictumst. Cras pulvinar erat et nunc fringilla, quis molestie
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m5">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=one_eyed"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">one_eyed</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=one_eyed">one_eyed</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Nulla dui ante, pulvinar ac auctor vitae, sollicitudin et tortor. Cras vestibulum suscipit odio ac dapibus. In hac habitasse platea dictumst. Cras pulvinar erat et nunc fringilla, quis molestie diam pulvinar.
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m4">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=muboy"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">muboy</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=muboy">muboy</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum iaculis mi, non dapibus nulla eleifend sed. Etiam ac commodo leo. <br>
+                        Donec non sem id tellus mattis convallis. Morbi dapibus nulla ac dui lacinia,
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m3">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=monu"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">monu</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=monu">monu</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Suspendisse varius mi consectetur nulla volutpat, nec fermentum turpis vehicula. Curabitur dapibus odio mauris, vitae accumsan sapien auctor non. Duis tempus ante id nulla vestibulum mattis.
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m2">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=Fynn"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">Fynn</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=Fynn">Fynn</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Nunc ante neque, feugiat at dictum ut, dignissim sed sapien. Pellentesque congue eu nisl sit amet cursus. Integer dapibus adipiscing metus ac vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      </div>
+                    </div></div>
+
+                  <div class="message-item" id="m1">
+                    <div class="message-inner">
+                      <div class="message-head clearfix">
+                        <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=admin"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div>
+                        <div class="user-detail">
+                          <h5 class="handle">admin</h5>
+                          <div class="post-meta">
+                            <div class="asker-meta">
+                              <span class="qa-message-what"></span>
+                              <span class="qa-message-when">
+												<span class="qa-message-when-data">Oct 24, 2013</span>
+											</span>
+                              <span class="qa-message-who">
+												<span class="qa-message-who-pad">by </span>
+												<span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=admin">admin</a></span>
+											</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="qa-message-content">
+                        Nunc ante neque, feugiat at dictum ut, dignissim sed sapien. Pellentesque congue eu nisl sit amet cursus. Integer dapibus adipiscing metus ac vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum iaculis mi, non dapibus nulla eleifend sed. Etiam ac commodo leo. Donec non sem id tellus mattis convallis. Morbi dapibus nulla ac dui lacinia,
+                      </div>
+                    </div></div>
+
+                </div>
+              </div>
+            </b-tab>
+          </b-tabs>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'tabs',
+    data () {
+      return {
+        tabIndex: [0, 0],
+        tabs: [
+          'Dolby Orlando Event [802272]',
+          'Related Records',
+          'TimeLine']
+      }
+    }
+  }
+</script>