Cleaned Admin Dashboard

2026-04-06 00:32:12 +02:00 · 2019-08-05 07:21:23 +01:00
parent 86831caa17
commit 59468febba
177 changed files with 108487 additions and 1 deletions
--- a/admin-dashboard/.babelrc
+++ b/admin-dashboard/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["loadable-components/babel"]
+}
--- a/admin-dashboard/.gitignore
+++ b/admin-dashboard/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/admin-dashboard/README.md
+++ b/admin-dashboard/README.md
@@ -1 +1,2 @@
-# Admin Dashboard
+# fyipe-admin-dashboard
+
--- a/admin-dashboard/index.js
+++ b/admin-dashboard/index.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, 'build')));
+
+app.get('/*', function(req, res) {
+  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+app.listen(3000);
--- a/admin-dashboard/package-lock.json
+++ b/admin-dashboard/package-lock.json
--- a/admin-dashboard/package.json
+++ b/admin-dashboard/package.json
@@ -0,0 +1,116 @@
+{
+  "name": "fyipe-admin-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@trendmicro/react-dropdown": "^1.3.0",
+    "axios": "^0.18.0",
+    "browserslist": "^4.6.1",
+    "card-validator": "^6.2.0",
+    "chart.js": "^2.7.2",
+    "clipboard": "^2.0.1",
+    "cloudboost": "^6.6.6",
+    "components": "^0.1.0",
+    "connected-react-router": "^4.5.0",
+    "express": "^4.16.4",
+    "faker": "^4.1.0",
+    "file-saver": "^2.0.1",
+    "font-awesome": "^4.7.0",
+    "fuzzy-match-utils": "^1.3.0",
+    "history": "^4.7.2",
+    "humanize-duration": "^3.15.3",
+    "imrc-datetime-picker": "^2.1.1",
+    "jest": "^24.7.1",
+    "js-uuid": "0.0.6",
+    "jshint": "^2.9.6",
+    "loadable": "^1.0.0",
+    "loadable-components": "^2.2.3",
+    "loaders.css": "^0.1.2",
+    "lodash": "^4.17.5",
+    "material-ui": "^0.20.0",
+    "mixpanel-browser": "^2.22.3",
+    "mockdate": "^2.0.2",
+    "moment": "^2.22.2",
+    "moment-jalaali": "^0.8.3",
+    "moment-range": "^4.0.1",
+    "prop-types": "^15.6.1",
+    "puppeteer": "^1.17.0",
+    "query-string": "^5.1.1",
+    "react": "^16.5.2",
+    "react-click-outside": "github:tj/react-click-outside",
+    "react-daterange-picker": "^2.0.1",
+    "react-dom": "^16.5.2",
+    "react-frontload": "^1.0.3",
+    "react-ga": "^2.5.3",
+    "react-hover-observer": "^2.1.0",
+    "react-loadable": "^5.5.0",
+    "react-loaders": "^3.0.1",
+    "react-mixpanel": "0.0.11",
+    "react-moment-proptypes": "^1.6.0",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.2.2",
+    "react-router-redux": "^4.0.8",
+    "react-scripts": "^3.0.1",
+    "react-select-fyipe": "^2.1.8",
+    "react-stripe-elements": "^1.7.0",
+    "react-widgets": "^4.4.9",
+    "react-with-direction": "^1.3.0",
+    "recharts": "^1.3.0",
+    "redux": "^3.7.2",
+    "redux-axios-middleware": "^4.0.0",
+    "redux-form": "^7.3.0",
+    "redux-thunk": "^2.2.0",
+    "sane-email-validation": "^1.1.0",
+    "should": "^13.2.3",
+    "to-pascal-case": "^1.0.0",
+    "universal-cookie": "^4.0.0",
+    "valid-url": "^1.0.9"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "dev": "PORT=3100 react-scripts start",
+    "build": "react-scripts build",
+    "jest": "jest src/test/puppeteer/index.test.js",
+    "test": "npm run lint",
+    "start": "node index.js",
+    "audit": "npm-audit-ci-wrapper --threshold=high"
+  },
+  "devDependencies": {
+    "axios-mock-adapter": "^1.15.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "8.0.5",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "cross-env": "^5.2.0",
+    "eslint": "5.16.0",
+    "jest-localstorage-mock": "^2.2.0",
+    "npm-audit-ci-wrapper": "^2.2.1",
+    "react-test-renderer": "^16.5.2",
+    "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.3",
+    "webpack": "^4.29.6"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.js",
+      "!src/**/*.stories.js",
+      "!src/store.js",
+      "!src/config.js",
+      "!src/routes.js",
+      "!src/setupTests.js"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/admin-dashboard/public/assets/css/Selector.css
+++ b/admin-dashboard/public/assets/css/Selector.css
@@ -0,0 +1,10 @@
+#login .selector {
+    font-size: 18px;
+    padding: 10px 12px;
+    width: 100%;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
+    border: 1px solid #ddd;
+    background-color: #fff;
+    box-sizing: border-box;
+    height: 45px;
+}
--- a/admin-dashboard/public/assets/css/blockchart.css
+++ b/admin-dashboard/public/assets/css/blockchart.css
@@ -0,0 +1,201 @@
+/******* Row containing Bar Chart *******/
+
+/******* Simple Bar Chart *******/
+div.block-chart-main{
+  position: relative;
+  height: 75px;
+  margin-top:-15px;
+  margin-left:10px;
+}
+.db-Trend-colInformation{
+  margin-right: 8px;
+}
+div.block-chart {
+  position: relative;
+  height: 75px;
+  float: right;
+  overflow: hidden;
+  width: 101%; /* IE overflow fix */
+}
+
+  div.block-chart div.bar {
+    float: left;
+    position: relative;
+    height: 100%;
+    width: 6px;
+    cursor: pointer;
+    /* Border instead of margin so we get the hover behavior we want */
+    border-left: 1px solid #fff;
+    border-right: 1px solid #fff;
+    /* DEFAULT IS GREEN */
+    background: rgb(0, 128, 168);
+  }
+
+    div.block-chart div.bar:hover {
+      opacity: 1.0;
+    }
+
+    div.block-chart div.bar.empty {
+      float: left;
+      position: relative;
+      height: 100%;
+      width: 6px;
+  
+      cursor: pointer;
+  
+      /* Border instead of margin so we get the hover behavior we want */
+      border-left: 1px solid #fff;
+      border-right: 1px solid #fff;
+  
+      opacity: 0.6;
+  
+      /* DEFAULT IS GREEN */
+      background: rgb(0, 128, 168);
+    }
+
+    div.block-chart div.bar.empty:hover {
+      opacity: 1.0;
+    }
+
+    div.block-chart div.bar.mid {
+      background: #FFDE24;
+    }
+
+    div.block-chart div.bar.down {
+      background: #FA6D46;
+    }
+
+    div.block-chart div.bar:first-child {
+      border-left: 0;
+    }
+    div.block-chart div.bar:last-child {
+      border-right: 0;
+    }
+
+******* Tipsy Tooltips ******/
+
+.tipsy { 
+  font-size: 12px; 
+  position: absolute; 
+  padding: 5px; 
+  z-index: 100000; 
+}
+  .tipsy-inner { 
+    background-color: #32325d; 
+    color: #FFF; 
+    max-width: 200px; 
+    padding: 5px 12px 5px 12px; 
+    line-height: 19px; 
+    text-align: center; 
+  }
+
+/* Rounded corners */
+.tipsy-inner { 
+  border-radius: 3px; 
+  -moz-border-radius: 3px; 
+  -webkit-border-radius: 3px; 
+}
+
+/* Uncomment for shadow */
+/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
+
+.tipsy-arrow { 
+  position: absolute; 
+  width: 0; 
+  height: 0; 
+  line-height: 0; 
+  border: 5px dashed #32325d; 
+}
+
+/* Rules to colour arrows */
+.tipsy-arrow-n { 
+  border-bottom-color: #32325d; 
+}
+.tipsy-arrow-s { 
+  border-top-color: #32325d; 
+}
+.tipsy-arrow-e { 
+  border-left-color: #32325d; 
+}
+.tipsy-arrow-w { 
+  border-right-color: #32325d; 
+}
+
+.tipsy-n .tipsy-arrow { 
+  top: 0px; 
+  left: 50%; 
+  margin-left: -5px; 
+  border-bottom-style: solid; 
+  border-top: none; 
+  border-left-color: transparent; 
+  border-right-color: transparent; 
+}
+.tipsy-nw .tipsy-arrow { 
+  top: 0; 
+  left: 10px; 
+  border-bottom-style: solid; 
+  border-top: none; 
+  border-left-color: transparent; 
+  border-right-color: transparent;
+}
+.tipsy-ne .tipsy-arrow { 
+  top: 0; right: 10px; 
+  border-bottom-style: solid; 
+  border-top: none;  
+  border-left-color: transparent; 
+  border-right-color: transparent;
+}
+.tipsy-s .tipsy-arrow { 
+  bottom: 0; 
+  left: 50%; 
+  margin-left: -5px; 
+  border-top-style: solid; 
+  border-bottom: none;  
+  border-left-color: transparent; 
+  border-right-color: transparent; 
+}
+.tipsy-sw .tipsy-arrow { 
+  bottom: 0; left: 10px; 
+  border-top-style: solid; 
+  border-bottom: none;  
+  border-left-color: transparent; 
+  border-right-color: transparent; 
+}
+.tipsy-se .tipsy-arrow { 
+  bottom: 0; 
+  right: 10px; 
+  border-top-style: solid; 
+  border-bottom: none; 
+  border-left-color: transparent; 
+  border-right-color: transparent; 
+}
+.tipsy-e .tipsy-arrow { 
+  right: 0; 
+  top: 50%; 
+  margin-top: -5px; 
+  border-left-style: solid; 
+  border-right: none; 
+  border-top-color: transparent; 
+  border-bottom-color: transparent; 
+}
+.tipsy-w .tipsy-arrow { 
+  left: 0; 
+  top: 50%; 
+  margin-top: -5px; 
+  border-right-style: solid; 
+  border-left: none; 
+  border-top-color: transparent; 
+  border-bottom-color: transparent; 
+}
+
+@media only screen and (max-width: 1180px) {
+   div.block-chart div.bar {
+      width: 5px;
+    }
+    div.block-chart div.bar.empty {
+      width: 5px;
+    }
+    .chart-font{
+      font-size: 90%;
+    }
+}
--- a/admin-dashboard/public/assets/css/dashboard.css
+++ b/admin-dashboard/public/assets/css/dashboard.css
--- a/admin-dashboard/public/assets/css/loader.css
+++ b/admin-dashboard/public/assets/css/loader.css
--- a/admin-dashboard/public/assets/css/newdashboard.css
+++ b/admin-dashboard/public/assets/css/newdashboard.css
--- a/admin-dashboard/public/assets/css/newdashobard2.css
+++ b/admin-dashboard/public/assets/css/newdashobard2.css
--- a/admin-dashboard/public/assets/css/reactwidgets.css
+++ b/admin-dashboard/public/assets/css/reactwidgets.css
@@ -0,0 +1,974 @@
+.rw-btn,
+.rw-input-reset,
+.rw-input,
+.rw-dropdown-list-autofill,
+.rw-filter-input {
+    color: inherit;
+    padding: 0;
+    margin: 0;
+    border: none;
+    box-shadow: none;
+    background: none;
+    background-image: none;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation
+}
+
+.rw-btn::-moz-focus-inner {
+    padding: 0;
+    border: 0
+}
+
+select.rw-input {
+    text-transform: none
+}
+
+html input[type="button"].rw-input {
+    -webkit-appearance: button;
+    cursor: pointer
+}
+
+textarea.rw-input {
+    overflow: auto;
+    resize: vertical
+}
+
+button[disabled].rw-input,
+fieldset[disabled] .rw-input,
+html input[disabled].rw-input {
+    cursor: not-allowed
+}
+
+button.rw-input::-moz-focus-inner,
+input.rw-input::-moz-focus-inner {
+    border: 0;
+    padding: 0
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box;
+    padding: 0
+}
+
+@font-face {
+    font-family: 'RwWidgets';
+    font-weight: normal;
+    font-style: normal;
+    src: url('../fonts/rw-widgets.eot?v=4.1.0');
+    src: url('../fonts/rw-widgets.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/rw-widgets.woff?v=4.1.0') format('woff'), url('../fonts/rw-widgets.ttf?v=4.1.0') format('truetype'), url('../fonts/rw-widgets.svg?v=4.1.0#fontawesomeregular') format('svg')
+}
+
+.rw-i {
+    display: inline-block;
+    color: inherit;
+    font-family: RwWidgets;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased
+}
+
+.rw-i-caret-down:before {
+    content: '\e803'
+}
+
+.rw-i-caret-up:before {
+    content: '\e800'
+}
+
+.rw-i-chevron-left:before {
+    content: '\f104'
+}
+
+.rw-i-chevron-right:before {
+    content: '\f105'
+}
+
+.rw-i-clock-o:before {
+    content: '\e805'
+}
+
+.rw-i-calendar:before {
+    content: '\e804'
+}
+
+.rw-i-search:before {
+    content: '\e801'
+}
+
+.rw-btn {
+    position: relative;
+    color: #333;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    cursor: pointer;
+    outline: none
+}
+
+.rw-state-readonly .rw-btn,
+.rw-state-disabled .rw-btn {
+    cursor: not-allowed
+}
+
+.rw-btn-select {
+    opacity: .75;
+    filter: alpha(opacity=75);
+    transition: opacity 150ms ease-in
+}
+
+.rw-btn-select:hover,
+.rw-state-focus .rw-btn-select,
+:hover>.rw-btn-select {
+    opacity: 1;
+    filter: alpha(opacity=100)
+}
+
+.rw-btn-primary {
+    width: 100%;
+    white-space: normal;
+    line-height: 2em
+}
+
+.rw-btn-primary:hover {
+    background-color: #e6e6e6
+}
+
+.rw-btn-select[disabled],
+.rw-btn-primary[disabled],
+fieldset[disabled] .rw-btn-select,
+fieldset[disabled] .rw-btn-primary {
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: .65;
+    filter: alpha(opacity=65);
+    pointer-events: none
+}
+
+.rw-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0
+}
+
+.rw-widget {
+    background-clip: border-box;
+    border: none;
+    color: #333;
+    font-size: 1em;
+    font-family: inherit;
+    outline: none;
+    position: relative
+}
+
+.rw-widget,
+.rw-widget * {
+    box-sizing: border-box
+}
+
+.rw-widget:before,
+.rw-widget *:before,
+.rw-widget:after,
+.rw-widget *:after {
+    box-sizing: border-box
+}
+
+.rw-widget>.rw-widget-container {
+    width: 100%;
+    margin: 0
+}
+
+.rw-widget-container {
+    background-color: #fff;
+    border: #ccc 1px solid;
+    border-radius: 4px
+}
+
+.rw-widget-container.rw-state-focus,
+.rw-state-focus>.rw-widget-container,
+.rw-widget-container.rw-state-focus:hover,
+.rw-state-focus>.rw-widget-container:hover {
+    background-color: #fff;
+    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6)
+}
+
+.rw-widget-container.rw-state-readonly,
+.rw-state-readonly>.rw-widget-container {
+    cursor: not-allowed
+}
+
+.rw-widget-container.rw-state-disabled,
+.rw-state-disabled>.rw-widget-container,
+fieldset[disabled] .rw-widget-container,
+.rw-widget-container.rw-state-disabled:hover,
+.rw-state-disabled>.rw-widget-container:hover,
+fieldset[disabled] .rw-widget-container:hover,
+.rw-widget-container.rw-state-disabled:active,
+.rw-state-disabled>.rw-widget-container:active,
+fieldset[disabled] .rw-widget-container:active {
+    box-shadow: none;
+    cursor: not-allowed
+}
+
+.rw-widget-picker {
+    position: relative;
+    overflow: hidden;
+    border-collapse: separate;
+    display: inline-table;
+    height: 2.429em
+}
+
+.rw-widget-picker>* {
+    position: relative;
+    border: none;
+    outline: none;
+    width: 100%;
+    height: 100%;
+    display: table-cell
+}
+
+.rw-widget-picker>.rw-select {
+    width: 1%;
+    white-space: nowrap
+}
+
+.rw-open>.rw-widget-picker {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0
+}
+
+.rw-open-up>.rw-widget-picker {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0
+}
+
+fieldset[disabled] .rw-widget-picker,
+.rw-state-disabled>.rw-widget-picker {
+    background-color: #eee
+}
+
+.rw-select {
+    cursor: pointer
+}
+
+.rw-select>* {
+    width: 1.9em;
+    height: 100%
+}
+
+.rw-state-readonly .rw-select,
+.rw-state-disabled .rw-select {
+    cursor: not-allowed
+}
+
+.rw-select-bordered {
+    cursor: pointer;
+    border: none;
+    border-left: #ccc 1px solid
+}
+
+.rw-select-bordered:hover,
+.rw-select-bordered:active {
+    background-color: #e6e6e6
+}
+
+.rw-select-bordered:active {
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+}
+
+.rw-state-disabled .rw-select-bordered,
+.rw-state-readonly .rw-select-bordered,
+fieldset[disabled] .rw-select-bordered,
+.rw-state-disabled .rw-select-bordered:hover,
+.rw-state-readonly .rw-select-bordered:hover,
+fieldset[disabled] .rw-select-bordered:hover,
+.rw-state-disabled .rw-select-bordered:active,
+.rw-state-readonly .rw-select-bordered:active,
+fieldset[disabled] .rw-select-bordered:active {
+    cursor: not-allowed;
+    background-color: inherit;
+    background-image: none;
+    box-shadow: none
+}
+
+.rw-rtl .rw-select-bordered {
+    border-right: #ccc 1px solid;
+    border-left: none
+}
+
+.rw-rtl {
+    direction: rtl
+}
+
+.rw-input-reset,
+.rw-input,
+.rw-dropdown-list-autofill,
+.rw-filter-input {
+    outline: 0
+}
+
+.rw-input-reset::-moz-placeholder {
+    color: #999;
+    opacity: 1
+}
+
+.rw-input-reset:-ms-input-placeholder {
+    color: #999
+}
+
+.rw-input-reset::-webkit-input-placeholder {
+    color: #999
+}
+
+.rw-input,
+.rw-dropdown-list-autofill,
+.rw-filter-input {
+    color: #555;
+    padding: 0 .857em;
+    background-color: #fff
+}
+
+.rw-input[type='text']::-ms-clear {
+    display: none
+}
+
+.rw-input[disabled],
+fieldset[disabled] .rw-input {
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 1;
+    background-color: #eee;
+    border-color: #ccc
+}
+
+.rw-input[readonly] {
+    cursor: not-allowed
+}
+
+.rw-i.rw-loading {
+    display: block;
+    background: url('../img/loading.gif') no-repeat center;
+    min-width: 16px;
+    width: 1.9em;
+    height: 16px
+}
+
+.rw-i.rw-loading:before {
+    content: ''
+}
+
+.rw-placeholder {
+    color: #999
+}
+
+.rw-detect-autofill:-webkit-autofill {
+    animation-name: react-widgets-autofill-start;
+    transition: background-color 50000s ease-in-out 0s
+}
+
+.rw-detect-autofill:not(:-webkit-autofill) {
+    animation-name: react-widgets-autofill-cancel
+}
+
+.rw-webkit-autofill .rw-widget-container,
+.rw-input:-webkit-autofill {
+    background-color: #faffbd !important;
+    background-image: none !important;
+    color: #000 !important
+}
+
+.rw-widget-input,
+.rw-filter-input {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
+}
+
+.rw-widget-input.rw-state-focus {
+    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6), inset 0 1px 1px rgba(0, 0, 0, 0.075)
+}
+
+.rw-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 1em;
+    outline: 0;
+    overflow: auto;
+    max-height: 200px
+}
+
+.rw-list-option {
+    -ms-user-select: none;
+    user-select: none;
+    color: #333;
+    cursor: pointer;
+    border: 1px solid transparent
+}
+
+.rw-list-option.rw-state-focus,
+.rw-list-option.rw-state-focus:hover {
+    background-color: transparent;
+    color: #333
+}
+
+.rw-list-option:hover,
+.rw-list-option:hover.rw-state-focus {
+    background-color: #e6e6e6;
+    border-color: #e6e6e6;
+    color: #333
+}
+
+.rw-list-option.rw-state-selected,
+.rw-list-option.rw-state-selected:hover {
+    background-color: #337ab7;
+    border-color: #337ab7;
+    color: white
+}
+
+fieldset[disabled] .rw-list-option,
+.rw-list-option.rw-state-disabled,
+.rw-list-option.rw-state-readonly {
+    box-shadow: none;
+    cursor: not-allowed;
+    color: #999;
+    filter: alpha(opacity=7);
+    opacity: .7
+}
+
+fieldset[disabled] .rw-list-option:hover,
+.rw-list-option.rw-state-disabled:hover,
+.rw-list-option.rw-state-readonly:hover {
+    background: none;
+    border-color: transparent
+}
+
+.rw-list-empty,
+.rw-list-option,
+.rw-list-optgroup {
+    padding: .143em .75em;
+    outline: 0
+}
+
+.rw-list-optgroup {
+    font-weight: bold;
+    padding-top: 7px
+}
+
+.rw-list-option-create {
+    border-top: 1px #ccc solid
+}
+
+.rw-dropdown-list-autofill {
+    padding: 0
+}
+
+.rw-dropdown-list-input {
+    background-color: transparent;
+    vertical-align: middle;
+    padding-right: 0;
+    max-width: 1px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden
+}
+
+.rw-rtl .rw-dropdown-list-input {
+    padding-right: .857em;
+    padding-left: 0
+}
+
+.rw-filter-input {
+    position: relative;
+    margin: 4px;
+    padding-right: 0
+}
+
+.rw-filter-input .rw-rtl {
+    padding-right: .857em;
+    padding-left: 0
+}
+
+.rw-filter-input .rw-select,
+.rw-filter-input .rw-btn {
+    opacity: .75;
+    filter: alpha(opacity=75);
+    cursor: text
+}
+
+.rw-filter-input>.rw-select,
+.rw-filter-input>.rw-select:active,
+.rw-filter-input>.rw-select:hover {
+    background: none;
+    cursor: initial;
+    box-shadow: none
+}
+
+.rw-number-picker .rw-btn {
+    cursor: pointer;
+    height: calc(1.2145em - 1px);
+    margin-top: -1px\9;
+    height: 1.2145em\9;
+    line-height: 1.2145em;
+    line-height: calc(1.2145em - 1px);
+    display: block;
+    border: none
+}
+
+.rw-number-picker .rw-btn:hover,
+.rw-number-picker .rw-btn:active {
+    background-color: #e6e6e6
+}
+
+.rw-number-picker .rw-btn:active {
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
+}
+
+.rw-state-disabled .rw-number-picker .rw-btn,
+.rw-state-readonly .rw-number-picker .rw-btn,
+fieldset[disabled] .rw-number-picker .rw-btn,
+.rw-state-disabled .rw-number-picker .rw-btn:hover,
+.rw-state-readonly .rw-number-picker .rw-btn:hover,
+fieldset[disabled] .rw-number-picker .rw-btn:hover,
+.rw-state-disabled .rw-number-picker .rw-btn:active,
+.rw-state-readonly .rw-number-picker .rw-btn:active,
+fieldset[disabled] .rw-number-picker .rw-btn:active {
+    cursor: not-allowed;
+    background-color: inherit;
+    background-image: none;
+    box-shadow: none
+}
+
+.rw-number-picker .rw-select {
+    vertical-align: middle
+}
+
+.rw-number-picker .rw-select,
+.rw-number-picker .rw-select:hover,
+.rw-number-picker .rw-select:active {
+    box-shadow: none
+}
+
+.rw-calendar-popup {
+    right: auto;
+    min-width: 0;
+    width: 18em
+}
+
+.rw-calendar {
+    border-radius: 4px;
+    background-color: #fff;
+    border: #ccc 1px solid;
+    overflow: hidden
+}
+
+.rw-calendar.rw-popup {
+    border-color: #ccc
+}
+
+.rw-calendar-now {
+    font-weight: bold
+}
+
+.rw-calendar-btn-left,
+.rw-calendar-btn-right {
+    width: 12.5%
+}
+
+.rw-calendar-btn-view {
+    width: 75%
+}
+
+.rw-calendar-footer {
+    border-top: 1px solid #ccc
+}
+
+.rw-calendar-grid {
+    outline: none;
+    height: 14.28571429em;
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+    background-color: #fff
+}
+
+.rw-head-cell {
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    padding: .25em
+}
+
+.rw-cell {
+    color: #333;
+    border-radius: 4px;
+    cursor: pointer;
+    line-height: normal;
+    text-align: center;
+    border: 1px solid transparent;
+    padding: .25em
+}
+
+.rw-cell:hover {
+    background-color: #e6e6e6;
+    border-color: #e6e6e6;
+    color: #333
+}
+
+.rw-cell.rw-state-focus,
+.rw-cell.rw-state-focus:hover {
+    background-color: transparent;
+    color: #333
+}
+
+.rw-cell.rw-state-selected,
+.rw-cell.rw-state-selected:hover {
+    background-color: #337ab7;
+    border-color: #337ab7;
+    color: white
+}
+
+.rw-cell.rw-state-disabled {
+    color: #999;
+    filter: alpha(opacity=7);
+    opacity: .7
+}
+
+.rw-cell.rw-state-disabled:hover {
+    background: none;
+    border-color: transparent
+}
+
+.rw-calendar-month .rw-cell {
+    text-align: center
+}
+
+.rw-cell-off-range {
+    color: #999
+}
+
+.rw-calendar-transition-group {
+    position: relative
+}
+
+.rw-calendar-transition {
+    transition: transform 300ms;
+    overflow: hidden
+}
+
+.rw-calendar-transition-top {
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%)
+}
+
+.rw-calendar-transition-bottom {
+    -ms-transform: translateY(100%);
+    transform: translateY(100%)
+}
+
+.rw-calendar-transition-right {
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%)
+}
+
+.rw-calendar-transition-left {
+    -ms-transform: translateX(100%);
+    transform: translateX(100%)
+}
+
+.rw-calendar-transition-entering.rw-calendar-transition-top,
+.rw-calendar-transition-entered.rw-calendar-transition-top,
+.rw-calendar-transition-entering.rw-calendar-transition-bottom,
+.rw-calendar-transition-entered.rw-calendar-transition-bottom {
+    -ms-transform: translateY(0);
+    transform: translateY(0)
+}
+
+.rw-calendar-transition-entering.rw-calendar-transition-right,
+.rw-calendar-transition-entered.rw-calendar-transition-right,
+.rw-calendar-transition-entering.rw-calendar-transition-left,
+.rw-calendar-transition-entered.rw-calendar-transition-left {
+    -ms-transform: translateX(0);
+    transform: translateX(0)
+}
+
+.rw-calendar-transition-exiting.rw-calendar-transition-top {
+    -ms-transform: translateY(100%);
+    transform: translateY(100%)
+}
+
+.rw-calendar-transition-exiting.rw-calendar-transition-bottom {
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%)
+}
+
+.rw-calendar-transition-exiting.rw-calendar-transition-right {
+    -ms-transform: translateX(100%);
+    transform: translateX(100%)
+}
+
+.rw-calendar-transition-exiting.rw-calendar-transition-left {
+    -ms-transform: translateX(-100%);
+    transform: translateX(-100%)
+}
+
+.rw-select-list {
+    overflow: auto;
+    position: relative
+}
+
+.rw-select-list .rw-list {
+    max-height: none;
+    font-size: 1em
+}
+
+.rw-select-list-label {
+    display: block;
+    position: relative;
+    font-weight: normal;
+    cursor: inherit;
+    padding-left: 20px;
+    margin: 0
+}
+
+.rw-rtl .rw-select-list-label {
+    padding-left: 0;
+    padding-right: 20px
+}
+
+input.rw-select-list-input {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    top: 0.1em /9;
+    margin: 0;
+    line-height: normal;
+    cursor: inherit
+}
+
+.rw-rtl input.rw-select-list-input {
+    left: auto;
+    right: 0
+}
+
+.rw-loading-mask {
+    content: '';
+    background: url("../img/loader-big.gif") no-repeat center;
+    position: absolute;
+    background-color: #fff;
+    border-radius: 4px;
+    opacity: .7;
+    filter: alpha(opacity=70);
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%
+}
+
+.rw-multiselect {
+    cursor: text
+}
+
+.rw-multiselect .rw-input-reset {
+    height: calc(2.429em - 2px);
+    margin-top: -2px\9;
+    height: 2.429em\9;
+    border-width: 0;
+    width: auto;
+    max-width: 100%;
+    padding: 0 .857em
+}
+
+.rw-multiselect .rw-select,
+.rw-multiselect .rw-select:hover,
+.rw-multiselect .rw-select:active {
+    box-shadow: none;
+    background: none
+}
+
+.rw-multiselect-taglist {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: inline-block;
+    vertical-align: 0;
+    outline: none
+}
+
+.rw-multiselect-tag {
+    display: inline-table;
+    color: white;
+    font-weight: 500;
+    padding: 0 .35em 0 .35em;
+    margin-left: calc(0.279335em - 1px);
+    margin-top: .279335em;
+    margin-top: calc(0.279335em - 1px);
+    margin-bottom: calc(0.279335em + 2px);
+    height: 1.87033em;
+    border-radius: 4px;
+    background-color: #2598bc;
+    cursor: default;
+    vertical-align: top;
+    text-align: center;
+    overflow: hidden;
+    max-width: 100%
+}
+
+.rw-multiselect-tag>* {
+    display: table-cell;
+    vertical-align: middle;
+    height: 100%
+}
+
+.rw-rtl .rw-multiselect-tag {
+    margin-left: 0;
+    margin-right: calc(0.279335em - 1px);
+    padding: 0 .35em 0 .35em
+}
+
+.rw-multiselect-tag.rw-state-focus,
+.rw-multiselect-tag.rw-state-focus:hover {
+    background-color: transparent;
+    color: #333
+}
+
+.rw-multiselect-tag.rw-state-readonly,
+.rw-multiselect-tag.rw-state-disabled,
+.rw-state-readonly .rw-multiselect-tag,
+.rw-state-disabled .rw-multiselect-tag,
+fieldset[disabled] .rw-multiselect-tag {
+    cursor: not-allowed
+}
+
+.rw-multiselect-tag.rw-state-disabled,
+.rw-state-disabled .rw-multiselect-tag,
+fieldset[disabled] .rw-multiselect-tag {
+    opacity: .65;
+    filter: alpha(opacity=65)
+}
+
+fieldset[disabled] .rw-multiselect-tag {
+    box-shadow: none;
+    cursor: not-allowed
+}
+
+.rw-multiselect-tag-btn {
+    color: inherit;
+    margin-left: .25em
+}
+
+.rw-rtl .rw-multiselect-tag-btn {
+    margin-left: 0;
+    margin-right: .25em
+}
+
+.rw-autocomplete .rw-select {
+    position: absolute;
+    display: block;
+    width: auto;
+    top: 0;
+    bottom: 0;
+    right: 0
+}
+
+.rw-popup-container {
+    position: absolute;
+    z-index: 1005;
+    top: 100%;
+    left: -6px;
+    right: -6px
+}
+
+.rw-popup-container.rw-dropup {
+    top: auto;
+    bottom: 100%
+}
+
+.rw-state-focus .rw-popup-container {
+    z-index: 1006
+}
+
+.rw-popup-transition {
+    width: 100%;
+    margin-bottom: 6px;
+    padding: 0 6px
+}
+
+.rw-dropup>.rw-popup-transition {
+    margin-bottom: 0;
+    margin-top: 6px
+}
+
+.rw-popup {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2);
+    border: #ccc 1px solid;
+    background: #fff
+}
+
+.rw-dropup .rw-popup {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2)
+}
+
+.rw-popup-transition {
+    transition: transform 200ms
+}
+
+.rw-popup-transition-entering {
+    overflow: hidden
+}
+
+.rw-popup-transition-entering .rw-popup-transition {
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+    transition-timing-function: ease-out
+}
+
+.rw-popup-transition-exiting .rw-popup-transition {
+    transition-timing-function: ease-in
+}
+
+.rw-popup-transition-exiting,
+.rw-popup-transition-exited {
+    overflow: hidden
+}
+
+.rw-popup-transition-exiting .rw-popup-transition,
+.rw-popup-transition-exited .rw-popup-transition {
+    -ms-transform: translateY(-100%);
+    transform: translateY(-100%)
+}
+
+.rw-popup-transition-exiting.rw-dropup .rw-popup-transition,
+.rw-popup-transition-exited.rw-dropup .rw-popup-transition {
+    -ms-transform: translateY(100%);
+    transform: translateY(100%)
+}
+
+.rw-popup-transition-exited {
+    display: none
+}
+
+.rw-state-disabled {
+    box-shadow: none;
+    cursor: not-allowed
+}
--- a/admin-dashboard/public/assets/css/sail.css
+++ b/admin-dashboard/public/assets/css/sail.css
--- a/admin-dashboard/public/assets/css/tutorial.css
+++ b/admin-dashboard/public/assets/css/tutorial.css
@@ -0,0 +1,207 @@
+.Tutorial-one {
+    padding: 10px;
+    background-image: url('../img/tutorials/1.png');
+}
+
+.Info-icon {
+    padding: 10px;
+    height: 50px;
+    width: 50px;
+    background-image: url('../img/tutorials/info.png');
+}
+
+.Tutorial-image--box {
+    height: 220px;
+    width: 520px;
+    padding: 10px;
+}
+
+.tut-Hide--check{
+    display: none;
+}
+
+#slider {
+    height: 35vw;
+    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+}
+
+#slider label {
+    margin: auto;
+    width: 60%;
+    height: 100%;
+    border-radius: 4px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    cursor: pointer;
+    transition: transform 0.4s ease; 
+}
+
+#s1:checked ~ #slide4,
+#s2:checked ~ #slide5,
+#s3:checked ~ #slide1,
+#s4:checked ~ #slide2,
+#s5:checked ~ #slide3 {
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
+    transform: translate3d(-30%, 0, -200px);
+}
+
+#s1:checked~#slide5,
+#s2:checked~#slide1,
+#s3:checked~#slide2,
+#s4:checked~#slide3,
+#s5:checked~#slide4 {
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
+    transform: translate3d(-15%, 0, -100px);
+}
+
+#s1:checked~#slide1,
+#s2:checked~#slide2,
+#s3:checked~#slide3,
+#s4:checked~#slide4,
+#s5:checked~#slide5 {
+    box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
+    transform: translate3d(0, 0, 0);
+}
+
+#s1:checked~#slide2,
+#s2:checked~#slide3,
+#s3:checked~#slide4,
+#s4:checked~#slide5,
+#s5:checked~#slide1 {
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
+    transform: translate3d(15%, 0, -100px);
+}
+
+#s1:checked~#slide3,
+#s2:checked~#slide4,
+#s3:checked~#slide5,
+#s4:checked~#slide1,
+#s5:checked~#slide2 {
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
+    transform: translate3d(30%, 0, -200px);
+}
+
+#slide1 {
+    background: #00BCD4;
+}
+
+#slide2 {
+    background: #4CAF50;
+}
+
+#slide3 {
+    background: #CDDC39;
+}
+
+#slide4 {
+    background: #FFC107;
+}
+
+#slide5 {
+    background: #FF5722
+}
+
+.tut-Icon--alarm {
+    content: url('../img/tutorials/alarm.png');
+}
+
+.tut-Icon--bell {
+    
+    content: url('../img/tutorials/bell.png');
+}
+
+.tut-Icon--sol {
+    content: url('../img/tutorials/bulb.png');
+}
+
+.tut-Icon--info {
+    content: url('../img/tutorials/info.png');
+}
+
+.tut-Monitor--ack {
+    margin: 5px;
+    object-fit: fill;
+    object-position: center;
+    content: url('../img/tutorials/ack_rsv.png');
+}
+
+.tut-Monitor--metrics {
+    margin: 5px;
+    object-fit: fill;
+    object-position: center;
+    content: url('../img/tutorials/metrics.png');
+}
+
+.tut-Monitor--range {
+    margin: 5px;
+    object-fit: fill;
+    object-position: center;
+    content: url('../img/tutorials/range.png');
+}
+
+.tut-Monitor--incident {
+    margin: 5px;
+    object-fit: fill;
+    object-position: center;
+    content: url('../img/tutorials/incidents.png');
+}
+
+.tut-Monitor--monitor {
+    margin: 5px;
+    object-fit: fill;
+    object-position: center;
+    content: url('../img/tutorials/monitor.png');
+}
+
+.bs-Button--icon--right.bs-Button--eye:after,
+.bs-Button--eye:before {
+  padding-top: 2px;
+  size: 7px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
+}
+
+.bs-Button--icon--right.bs-Button--eye:active:after,
+.bs-Button--icon--right.bs-Button--eye:focus:hover:after,
+.bs-Button--icon--right.bs-Button--eye:hover:after,
+.bs-Button--eye:active:before,
+.bs-Button--eye:focus:hover:before,
+.bs-Button--eye:hover:before {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
+}
+
+.bs-Button--blue.bs-Button--eye:before,
+.bs-Button--blue.bs-Button--eye:hover:before,
+.bs-Button--icon--right.bs-Button--blue.bs-Button--eye:after,
+.bs-Button--icon--right.bs-Button--blue.bs-Button--eye:hover:after,
+.bs-Button--icon--right.bs-Button--eye.bs-Button--blue.bs-is-disabled:after,
+.bs-Button--icon--right.bs-Button--eye.bs-Button--blue:disabled:after,
+.bs-Button--eye.bs-Button--blue.bs-is-disabled:before,
+.bs-Button--eye.bs-Button--blue:disabled:before {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
+}
+.bs-Button--icon--right.bs-Button--link.bs-Button--eye:after,
+.bs-Button--link.bs-Button--eye:before {
+  height: 10px;
+  width: 15px;
+  height: 15px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA20lEQVQ4T+3SP0tCURgH4MchCITCVcIhaGoRRPADuPQJkiAo55YGJ50cHAUXNzFaCpzc/QKBg3NjRHOBTi1x4SAi1+4FHRw8cJbz53l5f7wZO16ZHXsO4PaJps0wG0otkkr+B57hHlWcBugHEwzwFYdvAuu4RQdzvITP1zhBC08YrqNx4DNm6OIIr/gOu4Ab/KKBS9ytonFgDVfo4w29AEftHuMRFTxgjFESGN2fo41PRFApfJoihzya+EjT8uqbMoq4CIfvIY4Ijl1pxyZpWpb3BzB1VBsf7n+Gf+YPHxVDqgqmAAAAAElFTkSuQmCC');
+}
+.bs-Button--icon--right.bs-Button--link.bs-Button--eye:active:after,
+.bs-Button--icon--right.bs-Button--link.bs-Button--eye:hover:after,
+.bs-Button--link.bs-Button--eye:active:before,
+.bs-Button--link.bs-Button--eye:hover:before {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2V0dGluZ3MtLWhvdmVyPC90aXRsZT48cGF0aCBkPSJNMTQuNDI2IDkuMjk4Yy0uMTY0IDAtMS4xNDcgMC0xLjU1Ny0uNDk2IDAtLjA4My0uMDgyLS4wODMtLjA4Mi0uMTY2LS4wODItLjU3OC42NTYtMS4zMjIuNzM4LTEuNDA1LjE2NC0uMTY1LjE2NC0uNDEzLjA4Mi0uNDk1LS4wODItLjA4My0uNDEtLjQxNC0uNDkyLS41NzktLjA4Mi0uMTY1LS4zMjgtLjA4My0uNDkyLjA4My0uMTY0LjE2NS0uODIuODI2LTEuMzkzLjc0My0uMDgyIDAtLjA4Mi0uMDgyLS4xNjQtLjA4Mi0uNDkyLS4zMy0uNDkyLTEuMzIyLS40OTItMS40ODggMC0uMjQ4LS4wODItLjQxMy0uMjQ2LS40MTNoLS44MmMtLjE2NCAwLS4yNDYuMTY1LS4yNDYuNDEzIDAgLjE2NiAwIDEuMTU3LS40OTIgMS41Ny0uMDgxIDAtLjA4MS4wODMtLjE2My4wODMtLjU3NCAwLTEuMjMtLjY2MS0xLjM5NC0uODI2LS4xNjQtLjE2Ni0uNDEtLjE2Ni0uNDkyLS4wODMtLjA4Mi4xNjUtLjQxLjQ5Ni0uNTczLjU3OS0uMDgyLjA4Mi0uMDgyLjMzLjA4Mi40OTUuMTYzLjE2Ni44Mi44MjcuNzM3IDEuNDA1IDAgLjA4My0uMDgyLjA4My0uMDgyLjE2Ni0uMzI4LjQ5Ni0xLjMxMS40OTYtMS40NzUuNDk2LS4yNDYgMC0uNDEuMDgyLS40MS4yNDd2Ljc0NGMwIC4xNjYuMTY0LjMzLjQxLjMzLjE2NCAwIDEuMTQ3IDAgMS41NTcuNDk3IDAgLjA4Mi4wODIuMDgyLjA4Mi4xNjUuMDgyLjU3OS0uNjU2IDEuMzIyLS43MzggMS40MDUtLjE2My4xNjUtLjE2My40MTMtLjA4MS40OTYuMDgxLjA4Mi40MS40MTMuNDkxLjU3OC4wODIuMDgzLjMyOC4wODMuNDkyLS4wODIuMTY0LS4xNjYuODItLjgyNyAxLjM5NC0uNzQ0LjA4MiAwIC4wODIuMDgzLjE2My4wODMuNDkyLjQxMy40OTIgMS4zMjIuNDkyIDEuNTcgMCAuMTY1LjE2NC40MTMuMzI4LjQxM2guNzM4Yy4xNjQgMCAuMzI4LS4xNjUuMzI4LS40MTMgMC0uMTY2IDAtMS4xNTcuNDkyLTEuNTcuMDgyIDAgLjA4Mi0uMDgzLjE2My0uMDgzLjU3NC0uMDgzIDEuMzEyLjY2MSAxLjM5NC43NDQuMTY0LjE2NS40MS4xNjUuNDkyLjA4MmwuNTczLS41NzhjLjA4Mi0uMDgzLjA4Mi0uMzMtLjA4MS0uNDk2LS4xNjQtLjE2NS0uODItLjgyNi0uNzM4LTEuNDA1IDAtLjA4My4wODItLjA4My4wODItLjE2NS40MS0uNDk2IDEuMzExLS40OTYgMS41NTctLjQ5Ni4xNjQgMCAuNDEtLjE2NS40MS0uMzN2LS43NDVhLjc0MS43NDEgMCAwIDAtLjU3NC0uMjQ3ek0xMCAxMi4wMzNjLTEuMDkgMC0yLS45MTctMi0yLjAxNkM4IDguOTE3IDguOTEgOCAxMCA4YzEuMDkgMCAyIC45MTcgMiAyLjAxNyAwIDEuMS0uOTEgMi4wMTYtMiAyLjAxNnoiIGZpbGw9IiMzMjMyNUQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
+}
+.bs-Button--icon--right.bs-Button--eye.bs-is-disabled:after,
+.bs-Button--icon--right.bs-Button--eye:disabled:after,
+.bs-Button--link.bs-Button--icon--right.bs-Button--eye.bs-is-disabled:after,
+.bs-Button--link.bs-Button--icon--right.bs-Button--eye:disabled:after,
+.bs-Button--link.bs-Button--eye.bs-is-disabled:before,
+.bs-Button--link.bs-Button--eye:disabled:before,
+.bs-Button--eye.bs-is-disabled:before,
+.bs-Button--eye:disabled:before {
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2V0dGluZ3MtLWRpc2FibGVkPC90aXRsZT48cGF0aCBkPSJNMTQuNDI2IDkuMjk4Yy0uMTY0IDAtMS4xNDcgMC0xLjU1Ny0uNDk2IDAtLjA4My0uMDgyLS4wODMtLjA4Mi0uMTY2LS4wODItLjU3OC42NTYtMS4zMjIuNzM4LTEuNDA1LjE2NC0uMTY1LjE2NC0uNDEzLjA4Mi0uNDk1LS4wODItLjA4My0uNDEtLjQxNC0uNDkyLS41NzktLjA4Mi0uMTY1LS4zMjgtLjA4My0uNDkyLjA4My0uMTY0LjE2NS0uODIuODI2LTEuMzkzLjc0My0uMDgyIDAtLjA4Mi0uMDgyLS4xNjQtLjA4Mi0uNDkyLS4zMy0uNDkyLTEuMzIyLS40OTItMS40ODggMC0uMjQ4LS4wODItLjQxMy0uMjQ2LS40MTNoLS44MmMtLjE2NCAwLS4yNDYuMTY1LS4yNDYuNDEzIDAgLjE2NiAwIDEuMTU3LS40OTIgMS41Ny0uMDgxIDAtLjA4MS4wODMtLjE2My4wODMtLjU3NCAwLTEuMjMtLjY2MS0xLjM5NC0uODI2LS4xNjQtLjE2Ni0uNDEtLjE2Ni0uNDkyLS4wODMtLjA4Mi4xNjUtLjQxLjQ5Ni0uNTczLjU3OS0uMDgyLjA4Mi0uMDgyLjMzLjA4Mi40OTUuMTYzLjE2Ni44Mi44MjcuNzM3IDEuNDA1IDAgLjA4My0uMDgyLjA4My0uMDgyLjE2Ni0uMzI4LjQ5Ni0xLjMxMS40OTYtMS40NzUuNDk2LS4yNDYgMC0uNDEuMDgyLS40MS4yNDd2Ljc0NGMwIC4xNjYuMTY0LjMzLjQxLjMzLjE2NCAwIDEuMTQ3IDAgMS41NTcuNDk3IDAgLjA4Mi4wODIuMDgyLjA4Mi4xNjUuMDgyLjU3OS0uNjU2IDEuMzIyLS43MzggMS40MDUtLjE2My4xNjUtLjE2My40MTMtLjA4MS40OTYuMDgxLjA4Mi40MS40MTMuNDkxLjU3OC4wODIuMDgzLjMyOC4wODMuNDkyLS4wODIuMTY0LS4xNjYuODItLjgyNyAxLjM5NC0uNzQ0LjA4MiAwIC4wODIuMDgzLjE2My4wODMuNDkyLjQxMy40OTIgMS4zMjIuNDkyIDEuNTcgMCAuMTY1LjE2NC40MTMuMzI4LjQxM2guNzM4Yy4xNjQgMCAuMzI4LS4xNjUuMzI4LS40MTMgMC0uMTY2IDAtMS4xNTcuNDkyLTEuNTcuMDgyIDAgLjA4Mi0uMDgzLjE2My0uMDgzLjU3NC0uMDgzIDEuMzEyLjY2MSAxLjM5NC43NDQuMTY0LjE2NS40MS4xNjUuNDkyLjA4MmwuNTczLS41NzhjLjA4Mi0uMDgzLjA4Mi0uMzMtLjA4MS0uNDk2LS4xNjQtLjE2NS0uODItLjgyNi0uNzM4LTEuNDA1IDAtLjA4My4wODItLjA4My4wODItLjE2NS40MS0uNDk2IDEuMzExLS40OTYgMS41NTctLjQ5Ni4xNjQgMCAuNDEtLjE2NS40MS0uMzN2LS43NDVhLjc0MS43NDEgMCAwIDAtLjU3NC0uMjQ3ek0xMCAxMi4wMzNjLTEuMDkgMC0yLS45MTctMi0yLjAxNkM4IDguOTE3IDguOTEgOCAxMCA4YzEuMDkgMCAyIC45MTcgMiAyLjAxNyAwIDEuMS0uOTEgMi4wMTYtMiAyLjAxNnoiIGZpbGw9IiM4ODk4QUEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==');
+}
--- a/admin-dashboard/public/assets/fonts/camphor/font1.woff2
+++ b/admin-dashboard/public/assets/fonts/camphor/font1.woff2
--- a/admin-dashboard/public/assets/fonts/camphor/font2.woff2
+++ b/admin-dashboard/public/assets/fonts/camphor/font2.woff2
--- a/admin-dashboard/public/assets/fonts/camphor/font3.woff2
+++ b/admin-dashboard/public/assets/fonts/camphor/font3.woff2
--- a/admin-dashboard/public/assets/fonts/camphor/font4.woff2
+++ b/admin-dashboard/public/assets/fonts/camphor/font4.woff2
--- a/admin-dashboard/public/assets/fonts/rw-widgets.eot
+++ b/admin-dashboard/public/assets/fonts/rw-widgets.eot
--- a/admin-dashboard/public/assets/fonts/rw-widgets.svg
+++ b/admin-dashboard/public/assets/fonts/rw-widgets.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
+<defs>
+<font id="rw-widgets" horiz-adv-x="1000" >
+<font-face font-family="rw-widgets" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="up-dir" unicode="&#xe800;" d="M571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25 11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="search" unicode="&#xe801;" d="M643 386q0 103-73 176t-177 74-177-74-73-176 73-177 177-73 177 73 73 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 153-31 125-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="down-dir" unicode="&#xe803;" d="M571 457q0-14-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 11-11 25t11 25 25 11h500q14 0 25-11t10-25z" horiz-adv-x="571.4" />
+
+<glyph glyph-name="calendar" unicode="&#xe804;" d="M71-79h161v161h-161v-161z m197 0h178v161h-178v-161z m-197 197h161v178h-161v-178z m197 0h178v178h-178v-178z m-197 214h161v161h-161v-161z m411-411h179v161h-179v-161z m-214 411h178v161h-178v-161z m428-411h161v161h-161v-161z m-214 197h179v178h-179v-178z m-196 482v161q0 7-6 12t-12 6h-36q-7 0-12-6t-6-12v-161q0-7 6-13t12-5h36q7 0 12 5t6 13z m410-482h161v178h-161v-178z m-214 214h179v161h-179v-161z m214 0h161v161h-161v-161z m18 268v161q0 7-5 12t-13 6h-35q-7 0-13-6t-5-12v-161q0-7 5-13t13-5h35q8 0 13 5t5 13z m215 36v-715q0-29-22-50t-50-21h-786q-29 0-50 21t-21 50v715q0 29 21 50t50 21h72v54q0 37 26 63t63 26h36q37 0 63-26t26-63v-54h214v54q0 37 27 63t63 26h35q37 0 64-26t26-63v-54h71q29 0 50-21t22-50z" horiz-adv-x="928.6" />
+
+<glyph glyph-name="clock" unicode="&#xe805;" d="M500 546v-250q0-7-5-12t-13-5h-178q-8 0-13 5t-5 12v36q0 8 5 13t13 5h125v196q0 8 5 13t12 5h36q8 0 13-5t5-13z m232-196q0 83-41 152t-110 111-152 41-153-41-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152z m125 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="angle-left" unicode="&#xf104;" d="M350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-right" unicode="&#xf105;" d="M332 314q0-7-5-12l-261-261q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l261-260q5-5 5-13z" horiz-adv-x="357.1" />
+</font>
+</defs>
+</svg>
--- a/admin-dashboard/public/assets/fonts/rw-widgets.ttf
+++ b/admin-dashboard/public/assets/fonts/rw-widgets.ttf
--- a/admin-dashboard/public/assets/fonts/rw-widgets.woff
+++ b/admin-dashboard/public/assets/fonts/rw-widgets.woff
--- a/admin-dashboard/public/assets/fonts/rw-widgets.woff2
+++ b/admin-dashboard/public/assets/fonts/rw-widgets.woff2
--- a/admin-dashboard/public/assets/img/acknowledge.svg
+++ b/admin-dashboard/public/assets/img/acknowledge.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M40.495,17.329l-16,18   C24.101,35.772,23.552,36,22.999,36c-0.439,0-0.88-0.144-1.249-0.438l-10-8c-0.862-0.689-1.002-1.948-0.312-2.811   c0.689-0.863,1.949-1.003,2.811-0.313l8.517,6.813l14.739-16.581c0.732-0.826,1.998-0.9,2.823-0.166   C41.154,15.239,41.229,16.503,40.495,17.329z" data-original="#000000" class="active-path" data-old_color="#FFE000" fill="#FFEF00"/>
+</g></g> </svg>
--- a/admin-dashboard/public/assets/img/black-svg-full.svg
+++ b/admin-dashboard/public/assets/img/black-svg-full.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="566.38" height="275.072" viewBox="0 0 566.38 275.07" enable-background="new 0 0 566.38 275.07" xml:space="preserve">
+	<rect x="0" y="3.05176e-005" fill="#FFFFFF" fill-opacity="0" stroke-width="0.2" stroke-linejoin="round" width="566.38" height="275.072"/>
+	<g>
+		<path fill="#32325D" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 219.416,91.5147C 217.198,90.5867 214.668,90.1228 211.826,90.1228C 203.852,90.1228 199.865,94.4217 199.865,103.019L 199.865,112.393L 216.632,112.393L 216.632,124.919L 199.93,124.919L 199.93,181.986L 184.619,181.986L 184.619,124.919L 172.093,124.919L 172.093,112.393L 184.619,112.393L 184.619,101.171C 184.619,93.878 187.044,88.1256 191.894,83.9138C 196.744,79.7019 202.808,77.596 210.086,77.596C 214.015,77.596 217.125,78.0092 219.416,78.8356L 219.416,91.5147 Z "/>
+		<path fill="#32325D" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 291.097,112.393L 259.324,193.252C 252.669,208.011 243.339,215.391 231.334,215.391C 227.97,215.391 225.158,215.101 222.896,214.521L 222.896,201.472C 225.448,202.4 227.76,202.864 229.833,202.864C 235.85,202.864 240.345,199.856 243.317,193.839L 248.102,181.986L 220.112,112.393L 237.576,112.393L 254.539,163.065C 254.728,163.703 255.148,165.385 255.8,168.111L 256.148,168.111C 256.38,167.067 256.794,165.429 257.388,163.196L 275.2,112.393L 291.097,112.393 Z "/>
+		<rect x="300.84" y="112.393" fill="#32325D" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" width="15.3105" height="69.5934"/>
+		<path fill="#32325D" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 352.622,171.46L 352.34,171.46L 352.34,213.999L 337.029,213.999L 337.029,112.393L 352.34,112.393L 352.34,124.811L 352.622,124.811C 358.103,115.604 366.121,111.001 376.676,111.001C 385.665,111.001 392.671,114.093 397.695,120.276C 402.719,126.46 405.231,134.764 405.231,145.189C 405.231,156.744 402.396,165.998 396.727,172.95C 391.058,179.902 383.316,183.378 373.5,183.378C 364.468,183.378 357.508,179.405 352.622,171.46 Z M 352.209,144.253L 352.209,152.8C 352.209,157.831 353.844,162.098 357.113,165.599C 360.383,169.1 364.54,170.851 369.586,170.851C 375.487,170.851 380.119,168.597 383.483,164.088C 386.846,159.579 388.528,153.286 388.528,145.21C 388.528,138.425 386.962,133.115 383.831,129.28C 380.699,125.445 376.451,123.528 371.086,123.528C 365.417,123.528 360.854,125.503 357.396,129.454C 353.938,133.405 352.209,138.338 352.209,144.253 Z "/>
+		<path fill="#32325D" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 481.784,151.365L 433.068,151.365C 433.257,157.599 435.294,162.406 439.179,165.784C 443.065,169.162 448.408,170.851 455.207,170.851C 462.834,170.851 469.837,168.531 476.216,163.892L 476.216,177.136C 469.663,181.297 461.007,183.378 450.249,183.378C 439.679,183.378 431.39,180.239 425.38,173.961C 419.37,167.683 416.366,158.846 416.366,147.45C 416.366,136.692 419.671,127.928 426.283,121.157C 432.894,114.386 441.108,111.001 450.923,111.001C 460.739,111.001 468.336,114.035 473.715,120.102C 479.094,126.17 481.784,134.59 481.784,145.363L 481.784,151.365 Z M 465.081,140.23C 465.038,134.953 463.711,130.849 461.101,127.921C 458.491,124.992 454.888,123.528 450.292,123.528C 445.783,123.528 441.967,125.068 438.842,128.149C 435.718,131.23 433.793,135.257 433.068,140.23L 465.081,140.23 Z "/>
+	</g>
+	<path fill="#6CDB56" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 138.368,85.8314L 152.867,85.8314C 155.076,85.8314 156.867,87.6222 156.867,89.8314L 156.867,177.826C 156.867,180.036 155.076,181.826 152.867,181.826L 138.368,181.826C 136.159,181.826 134.368,180.036 134.368,177.826L 134.368,89.8314C 134.368,87.6222 136.159,85.8314 138.368,85.8314 Z "/>
+	<path fill="#6CDB56" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 106.62,86.581L 121.119,86.581C 123.328,86.581 125.119,88.3719 125.119,90.581L 125.119,178.576C 125.119,180.785 123.328,182.576 121.119,182.576L 106.62,182.576C 104.411,182.576 102.62,180.785 102.62,178.576L 102.62,90.581C 102.62,88.3719 104.411,86.581 106.62,86.581 Z "/>
+	<path fill="#6CDB56" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 74.1223,86.0808L 88.6212,86.0808C 90.8303,86.0808 92.6212,87.8717 92.6212,90.0808L 92.6212,178.076C 92.6212,180.285 90.8303,182.076 88.6212,182.076L 74.1223,182.076C 71.9131,182.076 70.1223,180.285 70.1223,178.076L 70.1223,90.0808C 70.1223,87.8717 71.9131,86.0808 74.1223,86.0808 Z "/>
+</svg>
--- a/admin-dashboard/public/assets/img/closebutton.svg
+++ b/admin-dashboard/public/assets/img/closebutton.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve" width="512px" height="512px" class=""><g><g id="Close">
+	<path d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312   c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312   l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937   c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z" data-original="#000000" class="active-path" data-old_color="#6b7c93" fill="#6b7c93"/>
+</g></g> </svg>
--- a/admin-dashboard/public/assets/img/icons/acceptance.svg
+++ b/admin-dashboard/public/assets/img/icons/acceptance.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
+<g>
+	<g id="Check">
+		<g>
+			<path d="M306,0C137.012,0,0,137.012,0,306s137.012,306,306,306s306-137.012,306-306S474.988,0,306,0z M306,554.625
+				C168.912,554.625,57.375,443.088,57.375,306S168.912,57.375,306,57.375S554.625,168.912,554.625,306S443.088,554.625,306,554.625
+				z M431.46,210.604c-7.707-0.325-15.529,2.276-21.42,8.186L277.312,351.498l-75.353-75.333c-5.891-5.91-13.712-8.492-21.42-8.186
+				c-6.942,0.287-13.847,2.869-19.144,8.186c-5.298,5.298-7.899,12.202-8.186,19.144c-0.325,7.708,2.276,15.53,8.186,21.42
+				l95.625,95.625c5.604,5.604,12.948,8.396,20.292,8.396s14.688-2.792,20.292-8.396l153-153c5.909-5.91,8.491-13.712,8.186-21.42
+				c-0.287-6.942-2.869-13.846-8.186-19.144C445.287,213.473,438.402,210.872,431.46,210.604z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/icons/edit.svg
+++ b/admin-dashboard/public/assets/img/icons/edit.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 55.25 55.25" style="enable-background:new 0 0 55.25 55.25;" xml:space="preserve">
+<path d="M52.618,2.631c-3.51-3.508-9.219-3.508-12.729,0L3.827,38.693C3.81,38.71,3.8,38.731,3.785,38.749
+	c-0.021,0.024-0.039,0.05-0.058,0.076c-0.053,0.074-0.094,0.153-0.125,0.239c-0.009,0.026-0.022,0.049-0.029,0.075
+	c-0.003,0.01-0.009,0.02-0.012,0.03l-3.535,14.85c-0.016,0.067-0.02,0.135-0.022,0.202C0.004,54.234,0,54.246,0,54.259
+	c0.001,0.114,0.026,0.225,0.065,0.332c0.009,0.025,0.019,0.047,0.03,0.071c0.049,0.107,0.11,0.21,0.196,0.296
+	c0.095,0.095,0.207,0.168,0.328,0.218c0.121,0.05,0.25,0.075,0.379,0.075c0.077,0,0.155-0.009,0.231-0.027l14.85-3.535
+	c0.027-0.006,0.051-0.021,0.077-0.03c0.034-0.011,0.066-0.024,0.099-0.039c0.072-0.033,0.139-0.074,0.201-0.123
+	c0.024-0.019,0.049-0.033,0.072-0.054c0.008-0.008,0.018-0.012,0.026-0.02l36.063-36.063C56.127,11.85,56.127,6.14,52.618,2.631z
+	 M51.204,4.045c2.488,2.489,2.7,6.397,0.65,9.137l-9.787-9.787C44.808,1.345,48.716,1.557,51.204,4.045z M46.254,18.895l-9.9-9.9
+	l1.414-1.414l9.9,9.9L46.254,18.895z M4.961,50.288c-0.391-0.391-1.023-0.391-1.414,0L2.79,51.045l2.554-10.728l4.422-0.491
+	l-0.569,5.122c-0.004,0.038,0.01,0.073,0.01,0.11c0,0.038-0.014,0.072-0.01,0.11c0.004,0.033,0.021,0.06,0.028,0.092
+	c0.012,0.058,0.029,0.111,0.05,0.165c0.026,0.065,0.057,0.124,0.095,0.181c0.031,0.046,0.062,0.087,0.1,0.127
+	c0.048,0.051,0.1,0.094,0.157,0.134c0.045,0.031,0.088,0.06,0.138,0.084C9.831,45.982,9.9,46,9.972,46.017
+	c0.038,0.009,0.069,0.03,0.108,0.035c0.036,0.004,0.072,0.006,0.109,0.006c0,0,0.001,0,0.001,0c0,0,0.001,0,0.001,0h0.001
+	c0,0,0.001,0,0.001,0c0.036,0,0.073-0.002,0.109-0.006l5.122-0.569l-0.491,4.422L4.204,52.459l0.757-0.757
+	C5.351,51.312,5.351,50.679,4.961,50.288z M17.511,44.809L39.889,22.43c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0
+	L16.097,43.395l-4.773,0.53l0.53-4.773l22.38-22.378c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L10.44,37.738
+	l-3.183,0.354L34.94,10.409l9.9,9.9L17.157,47.992L17.511,44.809z M49.082,16.067l-9.9-9.9l1.415-1.415l9.9,9.9L49.082,16.067z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/icons/recycle-bin.svg
+++ b/admin-dashboard/public/assets/img/icons/recycle-bin.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="56.061px" height="56.062px" viewBox="0 0 56.061 56.062" style="enable-background:new 0 0 56.061 56.062;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M40.149,12.335H15.914c-2.02,0-3.661,1.653-3.661,3.694l1.653,36.37c0,2.021,1.644,3.662,3.662,3.662h20.926
+			c2.021,0,3.662-1.632,3.662-3.63l1.653-36.436C43.811,13.979,42.166,12.335,40.149,12.335z M38.492,52.447l-20.971-0.078
+			l-1.654-36.372c0-0.024,0.021-0.046,0.047-0.046l24.28,0.014L38.492,52.447z"/>
+		<path d="M28.05,50.393c1.069,0,1.94-0.87,1.94-1.939V22.23c0-1.068-0.869-1.938-1.94-1.938c-1.068,0-1.938,0.87-1.938,1.938
+			v26.223C26.113,49.522,26.981,50.393,28.05,50.393z"/>
+		<path d="M35.069,50.392h0.02c1.059,0,1.93-0.859,1.941-1.918l0.299-26.22c0.006-0.519-0.189-1.007-0.553-1.378
+			c-0.364-0.371-0.846-0.578-1.387-0.584c-1.06,0-1.929,0.859-1.939,1.917l-0.301,26.22C33.139,49.499,33.998,50.38,35.069,50.392z"
+			/>
+		<path d="M20.972,50.392h0.02c1.07-0.013,1.931-0.894,1.918-1.963l-0.299-26.22c-0.012-1.058-0.883-1.917-1.961-1.917
+			c-0.52,0.006-1.004,0.213-1.367,0.584c-0.362,0.371-0.557,0.859-0.551,1.378l0.299,26.22
+			C19.042,49.532,19.914,50.392,20.972,50.392z"/>
+		<path d="M14.707,10.91l27.086-1.562c0.468-0.026,0.896-0.233,1.209-0.585c0.312-0.35,0.47-0.8,0.438-1.266
+			c-0.053-0.929-0.819-1.653-1.75-1.653L14.604,7.406c-0.467,0.026-0.896,0.233-1.207,0.585c-0.312,0.35-0.471,0.8-0.44,1.267
+			C13.006,10.184,13.776,10.91,14.707,10.91z M14.707,10.396C14.707,10.396,14.707,10.397,14.707,10.396v0.014V10.396z"/>
+		<path d="M23.854,6.294l0.104-0.003c0.481-0.027,0.926-0.241,1.245-0.603c0.322-0.36,0.484-0.824,0.455-1.307l0.021-0.49
+			l4.833-0.232l0.025,0.44c0.057,0.956,0.848,1.704,1.803,1.704L32.446,5.8c0.482-0.028,0.926-0.242,1.246-0.603
+			c0.322-0.36,0.481-0.825,0.455-1.308l-0.025-0.439c-0.115-2.007-1.848-3.553-3.865-3.445L25.47,0.281
+			c-2.017,0.115-3.562,1.852-3.443,3.866l0.025,0.441C22.106,5.546,22.897,6.294,23.854,6.294z M23.854,5.783L23.854,5.783v0.013
+			V5.783z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/information.svg
+++ b/admin-dashboard/public/assets/img/information.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M256,0C114.613,0,0,114.617,0,256c0,141.391,114.613,256,256,256s256-114.609,256-256C512,114.617,397.387,0,256,0z
+	 M256,128c17.674,0,32,14.328,32,32c0,17.68-14.326,32-32,32s-32-14.32-32-32C224,142.328,238.326,128,256,128z M304,384h-96
+	c-8.836,0-16-7.156-16-16c0-8.836,7.164-16,16-16h16v-96h-16c-8.836,0-16-7.156-16-16c0-8.836,7.164-16,16-16h64
+	c8.836,0,16,7.164,16,16v112h16c8.836,0,16,7.164,16,16C320,376.844,312.836,384,304,384z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/minus.svg
+++ b/admin-dashboard/public/assets/img/minus.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<rect y="20" width="42" height="2"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/monitoraddremove.svg
+++ b/admin-dashboard/public/assets/img/monitoraddremove.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><path d="M256,0C114.613,0,0,114.617,0,256c0,141.391,114.613,256,256,256s256-114.609,256-256C512,114.617,397.387,0,256,0z   M256,128c17.674,0,32,14.328,32,32c0,17.68-14.326,32-32,32s-32-14.32-32-32C224,142.328,238.326,128,256,128z M304,384h-96  c-8.836,0-16-7.156-16-16c0-8.836,7.164-16,16-16h16v-96h-16c-8.836,0-16-7.156-16-16c0-8.836,7.164-16,16-16h64  c8.836,0,16,7.164,16,16v112h16c8.836,0,16,7.164,16,16C320,376.844,312.836,384,304,384z" data-original="#000000" class="active-path" data-old_color="#14aad9" fill="#14aad9"/></g> </svg>
--- a/admin-dashboard/public/assets/img/more.svg
+++ b/admin-dashboard/public/assets/img/more.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="408px" height="408px" viewBox="0 0 408 408" style="enable-background:new 0 0 408 408;" xml:space="preserve">
+<g>
+	<g id="more-horiz">
+		<path d="M51,153c-28.05,0-51,22.95-51,51s22.95,51,51,51s51-22.95,51-51S79.05,153,51,153z M357,153c-28.05,0-51,22.95-51,51
+			s22.95,51,51,51s51-22.95,51-51S385.05,153,357,153z M204,153c-28.05,0-51,22.95-51,51s22.95,51,51,51s51-22.95,51-51
+			S232.05,153,204,153z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/plus.svg
+++ b/admin-dashboard/public/assets/img/plus.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<polygon points="42,20 22,20 22,0 20,0 20,20 0,20 0,22 20,22 20,42 22,42 22,22 42,22 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/resolve.svg
+++ b/admin-dashboard/public/assets/img/resolve.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M40.495,17.329l-16,18   C24.101,35.772,23.552,36,22.999,36c-0.439,0-0.88-0.144-1.249-0.438l-10-8c-0.862-0.689-1.002-1.948-0.312-2.811   c0.689-0.863,1.949-1.003,2.811-0.313l8.517,6.813l14.739-16.581c0.732-0.826,1.998-0.9,2.823-0.166   C41.154,15.239,41.229,16.503,40.495,17.329z" data-original="#000000" class="active-path" data-old_color="#00FF33" fill="#00FF2B"/>
+</g></g> </svg>
--- a/admin-dashboard/public/assets/img/show-more-button.svg
+++ b/admin-dashboard/public/assets/img/show-more-button.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="459px" height="459px" viewBox="0 0 459 459" style="enable-background:new 0 0 459 459;" xml:space="preserve">
+<g>
+	<g id="unfold-more">
+		<path d="M229.5,71.4l81.6,81.6l35.7-35.7L229.5,0L112.2,117.3l35.7,35.7L229.5,71.4z M229.5,387.6L147.9,306l-35.7,35.7L229.5,459
+			l117.3-117.3L311.1,306L229.5,387.6z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/success.svg
+++ b/admin-dashboard/public/assets/img/success.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<circle style="fill:#25AE88;" cx="25" cy="25" r="25"/>
+<polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
+	38,15 22,33 12,25 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/img/tutorials/1.png
+++ b/admin-dashboard/public/assets/img/tutorials/1.png
--- a/admin-dashboard/public/assets/img/tutorials/ack_rsv.png
+++ b/admin-dashboard/public/assets/img/tutorials/ack_rsv.png
--- a/admin-dashboard/public/assets/img/tutorials/alarm.png
+++ b/admin-dashboard/public/assets/img/tutorials/alarm.png
--- a/admin-dashboard/public/assets/img/tutorials/bell.png
+++ b/admin-dashboard/public/assets/img/tutorials/bell.png
--- a/admin-dashboard/public/assets/img/tutorials/bulb.png
+++ b/admin-dashboard/public/assets/img/tutorials/bulb.png
--- a/admin-dashboard/public/assets/img/tutorials/incidents.png
+++ b/admin-dashboard/public/assets/img/tutorials/incidents.png
--- a/admin-dashboard/public/assets/img/tutorials/info.png
+++ b/admin-dashboard/public/assets/img/tutorials/info.png
--- a/admin-dashboard/public/assets/img/tutorials/metrics.png
+++ b/admin-dashboard/public/assets/img/tutorials/metrics.png
--- a/admin-dashboard/public/assets/img/tutorials/monitor.png
+++ b/admin-dashboard/public/assets/img/tutorials/monitor.png
--- a/admin-dashboard/public/assets/img/tutorials/monitors.png
+++ b/admin-dashboard/public/assets/img/tutorials/monitors.png
--- a/admin-dashboard/public/assets/img/tutorials/range.png
+++ b/admin-dashboard/public/assets/img/tutorials/range.png
--- a/admin-dashboard/public/assets/img/warning.svg
+++ b/admin-dashboard/public/assets/img/warning.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<circle style="fill:#EFCE4A;" cx="25" cy="25" r="25"/>
+<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="25" y1="10" x2="25" y2="32"/>
+<line style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="25" y1="37" x2="25" y2="39"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/admin-dashboard/public/assets/js/landing.base.js
+++ b/admin-dashboard/public/assets/js/landing.base.js
@@ -0,0 +1,9 @@
+$(document).ready(function() {
+  setTimeout(()=>{
+      $('div.bar').tipsy({
+        gravity: 'se',
+        html: true,
+        offset: 1
+      });
+    },1000);
+});
--- a/admin-dashboard/public/favicon.ico
+++ b/admin-dashboard/public/favicon.ico
--- a/admin-dashboard/public/index.html
+++ b/admin-dashboard/public/index.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="theme-color" content="#000000">
+        <meta name="slack-app-id" content="ACVBMTPJQ">
+
+        <link rel="manifest" href="/manifest.json">
+        <link rel="shortcut icon" href="/favicon.ico">
+
+        <title>Fyipe Dashboard</title>
+
+        <link rel="stylesheet" href="/assets/css/dashboard.css">
+        <link rel="stylesheet" href="/assets/css/newdashboard.css">
+        <link rel="stylesheet" href="/assets/css/sail.css">
+        <link rel="shortcut icon" href="/favicon.ico">
+        <link rel="stylesheet" href="/assets/css/loader.css">
+        <link rel="stylesheet" href="/assets/css/blockchart.css">
+        <link rel="stylesheet" href="/assets/css/Selector.css">
+        <link rel="stylesheet" href="/assets/css/tutorial.css">
+        <link rel="stylesheet" href="/assets/css/reactwidgets.css">
+
+
+        <!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
+        <link rel="preload" href="/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
+        <link rel="preload" href="/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
+        <link rel="preload" href="/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
+        <link rel="preload" href="/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.min.js" type="text/javascript"></script>
+        <script src="https://js.stripe.com/v3/"></script>
+        <style type="text/css">
+            /* Camphor */
+
+            @font-face {
+            font-family: 'Camphor';
+            font-weight: 300;
+            src: url('/assets/fonts/camphor/font1.woff2') format('woff2'),
+            url('/assets/fonts/camphor/font1.woff') format('woff');
+            }
+
+            @font-face {
+            font-family: 'Camphor';
+            font-weight: 500;
+            src: url('/assets/fonts/camphor/font2.woff2') format('woff2'),
+            url('/assets/fonts/camphor/font2.woff') format('woff');
+            }
+
+            @font-face {
+            font-family: 'Camphor';
+            font-weight: 600;
+            src: url('/assets/fonts/camphor/font3.woff2') format('woff2'),
+            url('/assets/fonts/camphor/font3.woff') format('woff');
+            }
+
+            @font-face {
+            font-family: 'Camphor';
+            font-weight: 400;
+            src: url('/assets/fonts/camphor/font4.woff2') format('woff2'),
+            url('/assets/fonts/camphor/font4.woff') format('woff');
+            }
+        </style>
+        <!-- Google Tag Manager -->
+            <script>(function (w, d, s, l, i) {
+                w[l] = w[l] || []; w[l].push({
+                    'gtm.start':
+                        new Date().getTime(), event: 'gtm.js'
+                }); var f = d.getElementsByTagName(s)[0],
+                    j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+                        'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+                })(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
+            <!-- End Google Tag Manager -->
+    </head>
+    <body>
+        <div id="root" class="db-DashboardRoot"></div>
+        <script>
+            !function () {
+            if ('PerformanceLongTaskTiming' in window) {
+                var g = window.__tti = { e: [] };
+                g.o = new PerformanceObserver(function (l) { g.e = g.e.concat(l.getEntries()) });
+                g.o.observe({ entryTypes: ['longtask'] })
+            }
+            }();
+        </script>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH" height="0" width="0"
+                style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+    </body>
+</html>
--- a/admin-dashboard/public/manifest.json
+++ b/admin-dashboard/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Fyipe",
+  "name": "Fyipe Dashboard",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/admin-dashboard/src/App.js
+++ b/admin-dashboard/src/App.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Router, Route, Redirect, Switch } from 'react-router-dom';
+import { history, isServer } from './store';
+import { connect } from 'react-redux';
+import { allRoutes } from './routes';
+import NotFound from './components/404';
+import './components/Dashboard';
+import BackboneModals from './containers/BackboneModals';
+import Socket from './components/basic/Socket';
+import ReactGA from 'react-ga';
+import { User, ACCOUNTS_URL, DOMAIN_URL, ADMIN_DASHBOARD_URL } from './config';
+import Cookies from 'universal-cookie';
+import 'font-awesome/css/font-awesome.min.css';
+
+if (!isServer) {
+	history.listen(location => {
+		ReactGA.set({ page: location.pathname });
+		ReactGA.pageview(location.pathname);
+	});
+}
+
+var cookies = new Cookies();
+
+var userData = cookies.get('admin-data');
+if (userData !== undefined){
+	User.setUserId(userData.id);
+	User.setAccessToken(userData.tokens.jwtAccessToken);
+	User.setEmail(userData.email);
+	User.setName(userData.name);
+}
+cookies.remove('admin-data', {domain: DOMAIN_URL });
+
+if (!User.isLoggedIn()){
+	window.location = `${ACCOUNTS_URL}?redirectTo=${ADMIN_DASHBOARD_URL}`;
+}
+
+const App = () => (
+	<div style={{ height: '100%' }}>
+		<Socket />
+		<Router history={history}>
+			<Switch>
+			{allRoutes.filter(route => route.visible).map((route, index) => {
+					return  (
+						<Route
+							exact={route.exact}
+							path={route.path}
+							key={index}
+							component={(route.component)}
+						/>
+					)
+				})}
+				<Route
+					path={'/:404_path'}
+					key={'404'}
+					component={NotFound}
+				/>
+				<Redirect to="/" />
+			</Switch>
+		</Router>
+		<BackboneModals />
+	</div>
+);
+
+App.displayName = 'App'
+
+function mapStateToProps(state) {
+	return state.login;
+}
+
+export default connect(mapStateToProps)(App);
--- a/admin-dashboard/src/actions/feedback.js
+++ b/admin-dashboard/src/actions/feedback.js
@@ -0,0 +1,72 @@
+import {
+	postApi
+} from '../api';
+import * as types from '../constants/feedback'
+import errors from '../errors'
+
+export const openFeedbackModal = function () {
+	return {
+		type: types.OPEN_FEEDBACK_MODAL
+	};
+}
+export const closeFeedbackModal = function () {
+	return {
+		type: types.CLOSE_FEEDBACK_MODAL
+	};
+}
+
+// Create a new project
+
+export function createFeedbackRequest() {
+	return {
+		type: types.CREATE_FEEDBACK_REQUEST
+	};
+}
+
+export function createFeedbackError(error) {
+	return {
+		type: types.CREATE_FEEDBACK_FAILED,
+		payload: error
+	};
+}
+
+export function createFeedbackSuccess(project) {
+	return {
+		type: types.CREATE_FEEDBACK_SUCCESS,
+		payload: project
+	};
+}
+
+export const resetCreateFeedback = () => {
+	return {
+		type: types.CREATE_FEEDBACK_RESET,
+	};
+};
+
+// Calls the API to register a user.
+export function createFeedback(projectId,values) {
+	return function (dispatch) {
+
+		var promise = postApi(`feedback/${projectId}`, values);
+
+		dispatch(createFeedbackRequest());
+
+		return promise.then(function (feedback) {
+			dispatch(createFeedbackSuccess(feedback));
+			return feedback;
+		}, function (error) {
+			if (error && error.response && error.response.data)
+				error = error.response.data;
+			if (error && error.data) {
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(createFeedbackError(errors(error)));
+		});
+	};
+}
--- a/admin-dashboard/src/actions/logout.js
+++ b/admin-dashboard/src/actions/logout.js
@@ -0,0 +1,31 @@
+import * as types from '../constants/logout'
+// Three possible states for our logout process as well.
+// Since we are using JWTs, we just need to remove the token
+// from localStorage. These actions are more useful if we
+// were calling the API to log the user out
+
+export function requestLogout() {
+  return {
+    type: types.LOGOUT_REQUEST,
+    isFetching: true,
+    isAuthenticated: true
+  }
+}
+
+export function receiveLogout() {
+  return {
+    type: types.LOGOUT_SUCCESS,
+    isFetching: false,
+    isAuthenticated: false
+  }
+}
+
+// Logs the user out
+export function logoutUser() {
+  return dispatch => {
+    dispatch(requestLogout())
+    localStorage.removeItem('id_token')
+    localStorage.removeItem('access_token')
+    dispatch(receiveLogout())
+  }
+}
--- a/admin-dashboard/src/actions/modal.js
+++ b/admin-dashboard/src/actions/modal.js
@@ -0,0 +1,16 @@
+import * as types from '../constants/modal'
+
+export const openModal = function(obj) {
+  return {
+    type: types.OPEN_MODAL,
+    payload: obj
+  };
+}
+export const closeModal = function(obj) {
+  return {
+    type: types.CLOSE_MODAL,
+    payload: obj
+  };
+}
+
+
--- a/admin-dashboard/src/actions/notification.js
+++ b/admin-dashboard/src/actions/notification.js
@@ -0,0 +1,103 @@
+import {
+	getApi,putApi
+} from '../api';
+import * as types from '../constants/notification'
+import errors from '../errors'
+
+import { User } from '../config';
+
+export const openNotificationMenu = function() {
+  return {
+    type: types.OPEN_NOTIFICATION_MENU
+  };
+}
+export const closeNotificationMenu = function(error) {
+  return {
+    type: types.CLOSE_NOTIFICATION_MENU,
+    payload : error
+  };
+}
+
+// Create a new project
+export function fetchNotificationsRequest() {
+	return {
+		type: types.FETCH_NOTIFICATIONS_REQUEST
+	};
+}
+
+export function fetchNotificationsError(error) {
+	return {
+		type: types.FETCH_NOTIFICATIONS_FAILED,
+		payload: error
+	};
+}
+
+export function fetchNotificationsSuccess(notifications) {
+	return {
+		type: types.FETCH_NOTIFICATIONS_SUCCESS,
+		payload: notifications
+	};
+}
+
+export const fetchNotificationsReset = () => {
+	return {
+		type: types.FETCH_NOTIFICATIONS_RESET,
+	};
+};
+
+export function notificationReadSuccess(notificationId) {
+	return {
+		type: types.NOTIFICATION_READ_SUCCESS,
+		payload: notificationId
+	};
+}
+
+// Calls the API to get all notifications.
+export function fetchNotifications(projectId) {
+	return function(dispatch){
+
+		var promise = getApi(`notification/${projectId}`);
+
+		dispatch(fetchNotificationsRequest());
+
+		return promise.then(function(notifications){
+			dispatch(fetchNotificationsSuccess(notifications.data));
+		}, function(error){
+			if(error && error.response && error.response.data)
+				error = error.response.data;
+			if(error && error.data){
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(fetchNotificationsError(errors(error)));
+		});
+	};
+}
+
+export function markAsRead(projectId,notificationId) {
+	return function(dispatch){
+		var userId = User.getUserId();
+		var promise = putApi(`notification/${projectId}/${notificationId}/read`);
+		return promise.then(function(notifications){
+			dispatch(notificationReadSuccess({notificationId : notifications.data,userId}));
+		}, function(error){
+			if(error && error.response && error.response.data)
+				error = error.response.data;
+			if(error && error.data){
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(fetchNotificationsError(errors(error)));
+		});
+	};
+}
--- a/admin-dashboard/src/actions/page.js
+++ b/admin-dashboard/src/actions/page.js
@@ -0,0 +1,12 @@
+import * as types from '../constants/page'
+
+export const pageLoadRequest = function() {
+  return {
+    type: types.PAGE_LOAD_REQUEST
+  };
+}
+export const pageLoadSuccess = function() {
+  return {
+    type: types.PAGE_LOAD_SUCCESS
+  };
+}
--- a/admin-dashboard/src/actions/profile.js
+++ b/admin-dashboard/src/actions/profile.js
@@ -0,0 +1,205 @@
+import { getApi ,putApi} from '../api';
+import * as types from '../constants/profile';
+import FormData from 'form-data';
+import errors from '../errors'
+
+//Update profile setting
+
+export function updateProfileSettingRequest() {
+	return {
+		type: types.UPDATE_PROFILE_SETTING_REQUEST
+	};
+}
+
+export function updateProfileSettingSuccess(profileSetting) {
+
+	return {
+		type: types.UPDATE_PROFILE_SETTING_SUCCESS,
+		payload: profileSetting
+	};
+}
+
+export function updateProfileSettingError(error) {
+	return {
+		type: types.UPDATE_PROFILE_SETTING_FAILURE,
+		payload: error
+	};
+}
+
+// Calls the API to update setting.
+
+export function updateProfileSetting(values) {
+
+	return function (dispatch) {
+		let data = new FormData();
+		if (values.profilePic && values.profilePic[0]) {
+			data.append('profilePic', values.profilePic[0], values.profilePic[0].name);
+		}
+
+		data.append('name', values.name);
+		data.append('email', values.email);
+		data.append('companyPhoneNumber', values.companyPhoneNumber);
+		data.append('timezone', values.timezone);
+
+		var promise = putApi('user/profile', data);
+		dispatch(updateProfileSettingRequest());
+		promise.then(function (response) {
+			var profileSettings = response.data;
+			dispatch(updateProfileSettingSuccess(profileSettings));
+
+		}, function (error) {
+
+			if (error && error.response && error.response.data)
+				error = error.response.data;
+			if (error && error.data) {
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(updateProfileSettingError(errors(error)));
+		});
+
+		return promise;
+	};
+}
+
+//Update change password setting.
+
+export function updateChangePasswordSettingRequest() {
+	return {
+		type: types.UPDATE_CHANGE_PASSWORD_SETTING_REQUEST,
+
+	};
+}
+
+export function updateChangePasswordSettingSuccess() {
+
+	return {
+		type: types.UPDATE_CHANGE_PASSWORD_SETTING_SUCCESS,
+	};
+}
+
+export function updateChangePasswordSettingError(error) {
+	return {
+		type: types.UPDATE_CHANGE_PASSWORD_SETTING_FAILURE,
+		payload: error
+	};
+}
+
+// Calls the API to update change password setting.
+export function updateChangePasswordSetting(data) {
+
+	return function (dispatch) {
+
+		var promise = putApi('user/changePassword', data);
+		dispatch(updateChangePasswordSettingRequest());
+
+		promise.then(function () {
+
+			dispatch(updateChangePasswordSettingSuccess());
+		}, function (error) {
+
+			if (error && error.response && error.response.data)
+				error = error.response.data;
+			if (error && error.data) {
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(updateChangePasswordSettingError(errors(error)));
+		});
+		return promise;
+	};
+}
+
+
+
+export function showProfileMenu() {
+
+	return {
+		type: types.SHOW_PROFILE_MENU,
+	};
+}
+
+export function hideProfileMenu(error) {
+	return {
+		type: types.HIDE_PROFILE_MENU,
+		payload: error
+	};
+}
+
+
+// Get Previous User Settings.
+
+export function userSettingsRequest() {
+	return {
+		type: types.USER_SETTINGS_REQUEST,
+	};
+}
+
+export function userSettingsSuccess(settings) {
+
+	return {
+		type: types.USER_SETTINGS_SUCCESS,
+		payload: settings
+	};
+}
+
+export function userSettingsError(error) {
+	return {
+		type: types.USER_SETTINGS_FAILURE,
+		payload: error
+	};
+}
+
+// Calls the API to update on cal alert setting.
+export function userSettings() {
+
+	return function (dispatch) {
+
+		var promise = getApi('user/profile');
+		dispatch(userSettingsRequest());
+
+		promise.then(function (response) {
+			var settings = response.data;
+			dispatch(userSettingsSuccess(settings));
+		}, function (error) {
+			if (error && error.response && error.response.data)
+				error = error.response.data;
+			if (error && error.data) {
+				error = error.data;
+			}
+			if(error && error.message){
+				error = error.message;
+			}
+			else{
+				error = 'Network Error';
+			}
+			dispatch(userSettingsError(errors(error)));
+		});
+
+		return promise;
+	};
+}
+
+export function logFile(file) {
+
+	return function (dispatch) {
+		dispatch({type: 'LOG_FILE', payload: file});
+	};
+}
+
+export function resetFile() {
+
+	return function (dispatch) {
+		dispatch({type: 'RESET_FILE'});
+	};
+}
--- a/admin-dashboard/src/actions/socket.js
+++ b/admin-dashboard/src/actions/socket.js
@@ -0,0 +1,9 @@
+
+export function addnotifications(notification) {
+    return function (dispatch) {
+            dispatch({
+                type: 'ADD_NOTIFICATION_BY_SOCKET',
+                payload: notification
+            });
+    };
+}
--- a/admin-dashboard/src/api.js
+++ b/admin-dashboard/src/api.js
@@ -0,0 +1,135 @@
+import axios from 'axios';
+import {
+    API_URL
+} from './config';
+import {
+    User
+} from './config';
+import { history } from './store';
+var baseURL = API_URL;
+
+var Q = require('q');
+
+var headers = {
+    'Access-Control-Allow-Origin': '*',
+    'Accept': 'application/json',
+    'Content-Type': 'application/json;charset=UTF-8'
+};
+
+
+
+export function postApi(url, data) {
+    if (User.isLoggedIn())
+        headers['Authorization'] = 'Basic ' + User.getAccessToken()
+    var deffered = Q.defer();
+
+    axios({
+        method: 'POST',
+        url: `${baseURL}/${url}`,
+        headers,
+        data
+    })
+        .then(function (response) {
+            deffered.resolve(response);
+        })
+        .catch(function (error) {
+            if (error && error.response && error.response.status === 401) {
+                User.clear();
+                history.push('/login');
+            }
+            if (error && error.response && error.response.data)
+                error = error.response.data;
+            if (error && error.data) {
+                error = error.data;
+            }
+            deffered.reject(error);
+        });
+    return deffered.promise;
+}
+
+export function getApi(url) {
+    if (User.isLoggedIn())
+        headers['Authorization'] = 'Basic ' + User.getAccessToken()
+    var deffered = Q.defer();
+    axios({
+        method: 'GET',
+        url: `${baseURL}/${url}`,
+        headers
+    })
+        .then(function (response) {
+            deffered.resolve(response);
+        })
+        .catch(function (error) {
+            if (error && error.response && error.response.status === 401) {
+                User.clear();
+                history.push('/login');
+            }
+            if (error && error.response && error.response.data)
+                error = error.response.data;
+            if (error && error.data) {
+                error = error.data;
+            }
+            deffered.reject(error);
+        });
+
+    return deffered.promise;
+}
+
+
+export function putApi(url, data) {
+    if (User.isLoggedIn())
+        headers['Authorization'] = 'Basic ' + User.getAccessToken()
+    var deffered = Q.defer();
+    axios({
+        method: 'PUT',
+        url: `${baseURL}/${url}`,
+        headers,
+        data
+    })
+        .then(function (response) {
+            deffered.resolve(response);
+        })
+        .catch(function (error) {
+            if (error && error.response && error.response.status === 401) {
+                User.clear();
+                history.push('/login');
+            }
+            if (error && error.response && error.response.data)
+                error = error.response.data;
+            if (error && error.data) {
+                error = error.data;
+            }
+            deffered.reject(error);
+        });
+
+    return deffered.promise;
+}
+
+export function deleteApi(url, data) {
+    if (User.isLoggedIn())
+        headers['Authorization'] = 'Basic ' + User.getAccessToken()
+    var deffered = Q.defer();
+    axios({
+        method: 'DELETE',
+        url: `${baseURL}/${url}`,
+        headers,
+        data
+    })
+        .then(function (response) {
+            deffered.resolve(response);
+        })
+        .catch(function (error) {
+            if (error && error.response && error.response.status === 401) {
+                User.clear();
+                history.push('/login');
+            }
+            if (error && error.response && error.response.data)
+                error = error.response.data;
+            if (error && error.data) {
+                error = error.data;
+            }
+            deffered.reject(error);
+        });
+
+    return deffered.promise;
+}
--- a/admin-dashboard/src/components/404.js
+++ b/admin-dashboard/src/components/404.js
@@ -0,0 +1,35 @@
+import React, { Component, Fragment } from 'react';
+
+class NotFound extends Component {
+
+    render() {
+
+        return (
+            <Fragment>
+
+                <div className="db-World-root" >
+
+                    <div className="db-World-wrapper Box-root Flex-flex Flex-direction--column">
+
+
+                        <div>
+
+                            <div id="app-loading" style={{ 'position': 'fixed', 'top': '0', 'bottom': '0', 'left': '0', 'right': '0', 'zIndex': '1', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center', 'fontSize': '20px', 'flexDirection': 'column' }}>
+                                <div>The page you requested does not exist.</div>
+                               
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                </div>
+            </Fragment>
+        )
+    }
+}
+
+NotFound.displayName = 'NotFound'
+
+
+export default NotFound;
--- a/admin-dashboard/src/components/Clipboard.js
+++ b/admin-dashboard/src/components/Clipboard.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import Clipboard from 'clipboard';
+import PropTypes from 'prop-types';
+
+class ClipboardWrap extends React.Component {
+    componentDidMount () {
+        const button = this.button
+        const input = this.input
+    
+        this.clipboard = new Clipboard(
+          button, {
+            target: () => input
+          }
+        )
+    }
+      
+    componentWillUnmount() {
+        this.clipboard.destroy()
+    }
+    
+    render () {
+        const { value } = this.props;
+
+        return (
+            <div>
+                <input
+                    ref={(element) => { this.input = element }}
+                    type={'text'}
+                    value={value}
+                    className="bs-TextInput"
+                    style={{ width: 360, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+                    readOnly
+                />
+                <button
+                    ref={(element) => { this.button = element }}
+                    className="bs-Button bs-Button--blue"
+                    style={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+                >Copy
+                </button>
+            </div>
+        )
+    }
+}
+
+ClipboardWrap.displayName = 'ClipboardWrap';
+
+ClipboardWrap.propTypes = {
+  value: PropTypes.string
+}
+
+export default ClipboardWrap
--- a/admin-dashboard/src/components/ContextModal.js
+++ b/admin-dashboard/src/components/ContextModal.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+ export default function (CM){
+    return (props) => (
+        <div className="bs-BIM">
+            <div
+                className="ContextualLayer-layer--topleft ContextualLayer-layer--anytop ContextualLayer-layer--anyleft ContextualLayer-context--topleft ContextualLayer-context--anytop ContextualLayer-context--anyleft ContextualLayer-container ContextualLayer--pointerEvents"
+            >
+                <CM {...props} />
+            </div>
+        </div>
+    ).displayName = 'ContextModal'
+}
+
--- a/admin-dashboard/src/components/Dashboard.js
+++ b/admin-dashboard/src/components/Dashboard.js
@@ -0,0 +1,120 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types'
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import SideNav from './nav/SideNav';
+import TopNav from './nav/TopNav';
+import { withRouter } from 'react-router';
+import ShouldRender from './basic/ShouldRender';
+import ProfileMenu from './profile/ProfileMenu'; 
+import ClickOutside from 'react-click-outside';
+import { hideProfileMenu } from '../actions/profile';
+import NotificationMenu from './notification/NotificationMenu';
+import { closeNotificationMenu } from '../actions/notification';
+
+export class DashboardApp extends Component {
+    constructor(props){
+        super(props);
+    }
+
+    componentDidMount() {
+        this.props.ready && this.props.ready();
+    }
+
+    showProjectForm = () => {
+        this.props.showForm();
+        if(window.location.href.indexOf('localhost') <= -1){
+            this.context.mixpanel.track('Project Form Opened');
+        }
+    }
+
+    hideProfileMenu = () => {
+        this.props.hideProfileMenu();
+        if(window.location.href.indexOf('localhost') <= -1){
+            this.context.mixpanel.track('Profile Menu Closed');
+        }
+    }
+    closeNotificationMenu = () => {
+        this.props.closeNotificationMenu();
+        if(window.location.href.indexOf('localhost') <= -1){
+            this.context.mixpanel.track('Notification Menu Closed');
+        }
+    }
+
+    handleKeyBoard = (e) => {
+		switch(e.key){
+			case 'Escape':
+            this.props.closeNotificationMenu();
+            this.props.hideProfileMenu();
+			return true;
+			default:
+			return false;
+		}
+    }
+    
+    render() {
+        const { location, project, children } = this.props
+
+        return (
+            <Fragment>
+
+                <ClickOutside onClickOutside={this.hideProfileMenu}>
+                    <ProfileMenu visible={this.props.profile.menuVisible} />
+                </ClickOutside>
+                <ClickOutside onClickOutside={this.closeNotificationMenu}>
+                    <NotificationMenu visible={this.props.notification.notificationsVisible} />
+                </ClickOutside>
+
+                <div onKeyDown={this.handleKeyBoard} className="db-World-root" >
+
+                    <div className="db-World-wrapper Box-root Flex-flex Flex-direction--column">
+
+                        <SideNav />
+
+                        <div className="db-World-mainPane Box-root Padding-right--20" >
+
+                            {children}
+
+                        </div>
+
+
+
+                    </div>
+                </div>
+
+            </Fragment>
+        )
+    }
+}
+
+DashboardApp.displayName = 'DashboardApp'
+
+DashboardApp.propTypes = {
+    profile: PropTypes.object.isRequired,
+    notification: PropTypes.object.isRequired,
+    match: PropTypes.object,
+    hideProfileMenu: PropTypes.func,
+    closeNotificationMenu: PropTypes.func,
+    showForm: PropTypes.func,
+    location: PropTypes.object.isRequired,
+    children: PropTypes.any,
+    ready: PropTypes.func
+}
+
+let mapStateToProps = state => ({
+    profile: state.profileSettings,
+    notification: state.notifications
+})
+
+let mapDispatchToProps = dispatch => (
+    bindActionCreators({
+        hideProfileMenu,
+        closeNotificationMenu
+    }, dispatch)
+)
+
+DashboardApp.contextTypes = {
+    mixpanel: PropTypes.object.isRequired
+};
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(DashboardApp));
--- a/admin-dashboard/src/components/DataPathHoC.js
+++ b/admin-dashboard/src/components/DataPathHoC.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function DataPathHoC(WrappedComponent, data) {
+	return class extends React.Component {
+		static displayName = 'HocCom';
+		render() {
+			// Wraps the input component in a container, without mutating it. Good!
+			return <WrappedComponent {...this.props} webhook={data} data={data} />;
+		}
+	}
+}
+DataPathHoC.displayName = 'DataPathHoC';
+
+export default DataPathHoC
--- a/admin-dashboard/src/components/FeedbackModal.js
+++ b/admin-dashboard/src/components/FeedbackModal.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Component } from 'react';
+import { createFeedback, closeFeedbackModal } from '../actions/feedback';
+import { reduxForm, Field } from 'redux-form';
+import { RenderTextArea } from './basic/RenderTextArea';
+import { reset } from 'redux-form';
+import PropTypes from 'prop-types';
+
+export class FeedbackModal extends Component {
+
+	submitForm = (values) => {
+		const { reset } = this.props;
+
+		if (values.feedback) {
+
+			this.props.createFeedback(this.props.currentProject._id,values).then(function () {
+
+			}, function () {
+			});
+			if (window.location.href.indexOf('localhost') <= -1) {
+				this.context.mixpanel.track('Feedback Values', values);
+			}
+			this.props.closeFeedbackModal();
+
+			reset();
+		}
+	}
+
+	render() {
+
+		const { handleSubmit } = this.props;
+
+		return this.props.feedback.feedbackModalVisble ?
+
+			(<div  className="db-FeedbackModal" style={{ position: 'absolute', right: '40px', top: '20px', zIndex: '999' }}>
+				<div className="db-FeedbackModal-background" />
+				<div className="db-FeedbackModal-content">
+					<div className="db-FeedbackModal-contentInner">
+						<div className="db-FeedbackModal-icon" />
+						<div className="db-FeedbackForm">
+							<form onSubmit={handleSubmit(this.submitForm)}>
+								<span>
+									<div className="db-FeedbackForm-step db-FeedbackForm-step--form" >
+										<Field component={RenderTextArea}
+											className="db-FeedbackForm-textarea"
+											placeholder="Feedback about this page?"
+											defaultValue={''}
+											name="feedback"
+											style={{ height: '100px' }}
+										/>
+										<span />
+										<div className="db-FeedbackForm-actions">
+											<button
+												className="bs-Button bs-DeprecatedButton db-FeedbackForm-cancel"
+												type="button"
+												onClick={() => this.props.closeFeedbackModal()}
+											>
+												<span>Cancel</span>
+											</button>
+											<button
+												className="bs-Button bs-DeprecatedButton db-FeedbackForm-submit bs-Button--blue"
+												id='feedback-button'
+												type="submit"
+											>
+												<span>Send feedback</span>
+											</button>
+										</div>
+									</div>
+								</span>
+							</form>
+						</div>
+					</div>
+				</div>
+			</div>
+			) : null;
+	}
+}
+
+FeedbackModal.displayName = 'FeedbackModal'
+
+let FeedbackModalForm = reduxForm({
+	form: 'FeedbackModal', // a unique identifier for this form
+})(FeedbackModal);
+
+const mapStateToProps = state => ({
+	feedback: state.feedback,
+	currentProject : state.project.currentProject,
+});
+
+const mapDispatchToProps = dispatch => (
+	bindActionCreators({ createFeedback, closeFeedbackModal, reset }, dispatch)
+);
+
+FeedbackModal.contextTypes = {
+	mixpanel: PropTypes.object.isRequired
+};
+
+FeedbackModal.propTypes = {
+	createFeedback: PropTypes.func.isRequired,
+	closeFeedbackModal: PropTypes.func.isRequired,
+	reset: PropTypes.func.isRequired,
+	feedback: PropTypes.object.isRequired,
+	handleSubmit: PropTypes.func.isRequired,
+	currentProject: PropTypes.object
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FeedbackModalForm);
+
--- a/admin-dashboard/src/components/Modal.js
+++ b/admin-dashboard/src/components/Modal.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+
+const composableComponent = (ComposedComponent) => {
+    class Modal extends Component {
+        constructor(props){
+            super(props);
+            this.props = props;
+            this.onClose = this.onClose.bind(this);
+            this.onConfirm = this.onConfirm.bind(this);
+        }
+        onClose =(value)=> {
+            if (this.props.item.onClose) {
+                this.props.item.onClose(value);
+                this.props.onClose(this.props.item);
+            } else {
+                this.props.onClose(this.props.item);
+            }
+        }
+        onConfirm = (value)=> {
+            var _this = this;
+            if (this.props.item.onConfirm) {
+                this.props.item.onConfirm(value)
+                .then(() => _this.props.onClose(_this.props.item),
+                ()=> {})
+            } else {
+                this.props.onClose(this.props.item)
+            }
+        }
+        render() {
+            const { zIndex } = this.props;
+            const { extraClasses } = this.props.item;
+
+            const mainClass = `${extraClasses || ''} modal-dialog-view`;
+            const modalContainerStyle = {overflowX: 'auto', overflowY: 'scroll', display: 'block', top: '0px'};
+            return (
+                <div
+                    className={mainClass}
+                    style={{
+                        zIndex: (zIndex + 1) * 10000
+                    }}
+                >
+                    <div
+                        className="modal_overlay"
+                        style={{
+                            top: 0,
+                            opacity: 1,
+                            transform: 'none',
+                            display: 'block',
+                            pointerEvents: 'auto'
+                        }}
+                    >
+
+                        <div className="modal_container" style={modalContainerStyle}>
+                            <ComposedComponent closeThisDialog={this.onClose} confirmThisDialog={this.onConfirm} />
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+    }
+    Modal.propTypes = {
+        onConfirm: PropTypes.func,
+        item: PropTypes.object.isRequired,
+        onClose:PropTypes.func.isRequired,
+        extraClasses: PropTypes.string,
+        zIndex: PropTypes.number.isRequired
+    }
+
+    Modal.displayName = 'Modal'
+
+    return Modal;
+}
+
+
+export default composableComponent;
--- a/admin-dashboard/src/components/Modalize.js
+++ b/admin-dashboard/src/components/Modalize.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux';
+
+/**
+ * @function Modalize
+ * @param {React.Props} props Props comprise an object with 3 JSX values for `HEADER`, `CONTENT` & `FOOTER`
+ * @returns {JSX.Element} A modal and a child component.
+*/
+export function Modalize({ HEADER, CONTENT, FOOTER }) {
+    
+    return HEADER && CONTENT && FOOTER ? (
+
+        <div className="ModalLayer-wash Box-root Flex-flex Flex-alignItems--flexStart Flex-justifyContent--center">
+
+            <div className="ModalLayer-contents" tabIndex="-1" style={{marginTop: 105}}>
+
+                <div className="bs-BIM">
+
+                    <form>
+                        <div className="bs-Modal bs-Modal--medium">
+
+                            <div className="bs-Modal-header">
+                                <div className="bs-Modal-header-copy">
+                                    {HEADER}
+                                </div>
+                                <div className="bs-Modal-messages"></div>
+                            </div>
+
+                            <div className="bs-Modal-content">
+                                {CONTENT}
+                            </div>
+
+                            <div className="bs-Modal-footer">
+                                {FOOTER}
+                            </div>
+
+                        </div>
+                    </form> 
+
+                </div>
+
+            </div>
+
+        </div>
+        
+    )   :   null;
+}
+
+const mapStateToProps = state => ({
+    HEADER: state.modal.header,
+    CONTENT: state.modal.content,
+    FOOTER: state.modal.footer
+})
+
+Modalize.propTypes = {
+    HEADER: PropTypes.string.isRequired,
+    CONTENT: PropTypes.string.isRequired,
+    FOOTER: PropTypes.string.isRequired
+}
+
+Modalize.displayName = 'Modalize'
+
+export default connect(mapStateToProps)(Modalize);
--- a/admin-dashboard/src/components/NotRequiredAuth.js
+++ b/admin-dashboard/src/components/NotRequiredAuth.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { User } from '../config';
+import { history } from '../store';
+
+export default function (ComposedComponent) {
+  class NotAuthentication extends Component {
+    constructor(props) {
+      super(props);
+      this.props = props;
+
+      this.isAuthenticated = User.isLoggedIn();
+    }
+
+    componentDidMount() {
+      if (this.isAuthenticated) {
+        history.push('/project/project/monitoring');
+      }
+    }
+
+    componentDidUpdate() {
+      if (this.isAuthenticated) {
+        history.push('/project/project/monitoring');
+      }
+    }
+
+    render() {
+      return <ComposedComponent {...this.props} />;
+    }
+  }
+
+  function mapStateToProps(state_Ignored) {
+    return {};
+  }
+
+  NotAuthentication.displayName = 'NotAuthentication'
+
+  return connect(mapStateToProps)(NotAuthentication);
+}
--- a/admin-dashboard/src/components/OutsideCLick.js
+++ b/admin-dashboard/src/components/OutsideCLick.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+/**
+ * Component that alerts if you click outside of it
+ */
+
+export default (ComposedComponent, extras) => {
+    class OutsideCkick extends Component {
+        constructor(props) {
+            super(props);
+    
+            this.setWrapperRef = this.setWrapperRef.bind(this);
+            this.handleClickOutside = this.handleClickOutside.bind(this);
+        }
+    
+        componentDidMount() {
+            document.addEventListener('mousedown', this.handleClickOutside);
+        }
+    
+        componentWillUnmount() {
+            document.removeEventListener('mousedown', this.handleClickOutside);
+        }
+    
+        /**
+         * Set the wrapper ref
+         */
+        setWrapperRef(node) {
+            this.wrapperRef = node;
+        }
+    
+        /**
+         * Alert if clicked on outside of element
+         */
+        handleClickOutside =(event)=> {
+            if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+                extras.closeModal();
+            }
+        }
+    
+        render(){
+           return <div ref={this.setWrapperRef}> <ComposedComponent {...this.props} /> </div>
+        }
+    }
+
+    OutsideCkick.displayName = 'PublicPage'
+    
+    return OutsideCkick
+}
+
--- a/admin-dashboard/src/components/PublicPage.js
+++ b/admin-dashboard/src/components/PublicPage.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Route, Redirect, Switch } from 'react-router-dom';
+import routes from '../routes';
+
+const { allRoutes } = routes;
+
+const PublicPage = () => (
+	<Switch>
+		{allRoutes
+			.filter(route => route.isPublic)
+			.map((route, index) => (
+				<Route
+					component={route.component}
+					exact={route.exact}
+					path={route.path}
+					key={index}
+				/>
+			))}
+			<Redirect to='/login' />
+	</Switch>
+);
+
+PublicPage.displayName = 'PublicPage'
+
+export default PublicPage;
--- a/admin-dashboard/src/components/RequiredAuth.js
+++ b/admin-dashboard/src/components/RequiredAuth.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { User } from '../config';
+import { history } from '../store';
+
+export default function (ComposedComponent) {
+  class Authentication extends Component {
+
+    constructor(props){
+      super(props);
+      this.props = props;
+
+      this.isAuthenticated = User.isLoggedIn();
+    }
+
+    componentDidMount() {
+      if (!this.isAuthenticated) {
+        history.push('/login', { continue: this.props.location.pathname });
+      }
+    }
+
+    componentDidUpdate() {
+      if (!this.isAuthenticated) { 
+        history.push('/login', { continue: this.props.location.pathname });
+      }
+    }
+
+    PropTypes = {
+      router: PropTypes.object
+    }
+
+    render() {
+      return <ComposedComponent {...this.props} />;
+    }
+  }
+
+  Authentication.propTypes = {
+    location: PropTypes.object
+  }
+
+  Authentication.displayName = 'RequireAuth'
+
+  function mapStateToProps(state_Ignored) {
+    return {};
+  }
+
+  function mapDispatchToProps (dispatch_Ignored) {
+  return {};
+}
+
+  return connect(mapStateToProps, mapDispatchToProps)(Authentication);
+}
--- a/admin-dashboard/src/components/TimezoneSelect.js
+++ b/admin-dashboard/src/components/TimezoneSelect.js
--- a/admin-dashboard/src/components/basic/BeforeLoad.js
+++ b/admin-dashboard/src/components/basic/BeforeLoad.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { User, getQueryVar } from '../../config'
+
+class BeforeLoad extends React.Component {
+    constructor(props) {
+        super(props);
+        const isAuthenticated = User.isLoggedIn();
+        const initialUrl = sessionStorage.getItem('initialUrl');
+        this.isAuthenticated = isAuthenticated;
+        const redirectTo = getQueryVar('redirectTo', initialUrl);
+        let counter = getQueryVar('counter',initialUrl) || 0;
+        if (redirectTo) this.redirect = redirectTo;
+        if (isAuthenticated) {
+            if (redirectTo) {
+                sessionStorage.removeItem('initialUrl');
+                const accessToken = User.getAccessToken();
+                window.location = `${redirectTo}?accessToken=${accessToken}&counter=${parseInt(counter, 10 )+1}`
+            }
+        }
+    }
+    render() {
+        if (this.isAuthenticated && this.redirect) {
+            return (
+                <div id="app-loading" style={{ 'position': 'fixed', 'top': '0', 'bottom': '0', 'left': '0', 'right': '0', 'backgroundColor': '#e6ebf1', 'zIndex': '999', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' }}>
+                    <div>Redirecting please wait...</div>
+                </div>
+            )
+        }
+        return this.props.children;
+    }
+}
+
+BeforeLoad.displayName = 'BeforeLoad'
+
+BeforeLoad.contextTypes = {
+    mixpanel: PropTypes.object.isRequired
+};
+
+BeforeLoad.propTypes = {
+    children: PropTypes.any
+}
+
+export default BeforeLoad;
--- a/admin-dashboard/src/components/basic/CompanySizeList.js
+++ b/admin-dashboard/src/components/basic/CompanySizeList.js
@@ -0,0 +1,7 @@
+export const companySize = [
+    { name: '1-10', code: '1-10' },
+    { name: '11-50', code: '11-50' },
+    { name: '51-200', code: '51-200' },
+    { name: '200-1000', code: '200-1000' },
+    { name: '1000+', code: '1000+' }
+];
--- a/admin-dashboard/src/components/basic/CompanySizeSelector.js
+++ b/admin-dashboard/src/components/basic/CompanySizeSelector.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { companySize } from './CompanySizeList';
+
+let errorStyle = {
+  color: 'red',
+  topMargin: '5px'
+}
+
+const CompanySizeSelector = ({ input, id, meta: { touched, error } }) => (
+  <span>
+    <select {...input} className="selector" id={id}>
+      <option value="">Select Company Size...</option>
+      {companySize.map(val => (
+        <option value={val.name} key={val.code}>
+          {val.name}
+        </option>
+      ))}
+    </select>
+    {touched && error && <span style={errorStyle}>{error}</span>}
+  </span>
+)
+
+CompanySizeSelector.displayName = 'CompanySizeSelector'
+
+CompanySizeSelector.propTypes = {
+  meta: PropTypes.object.isRequired,
+  input: PropTypes.object.isRequired,
+  id: PropTypes.string
+}
+
+export default CompanySizeSelector
--- a/admin-dashboard/src/components/basic/CountryList.js
+++ b/admin-dashboard/src/components/basic/CountryList.js
@@ -0,0 +1,245 @@
+export const countries = [
+    { name: 'Afghanistan', code: 'AF' },
+    { name: 'Åland Islands', code: 'AX' },
+    { name: 'Albania', code: 'AL' },
+    { name: 'Algeria', code: 'DZ' },
+    { name: 'American Samoa', code: 'AS' },
+    { name: 'AndorrA', code: 'AD' },
+    { name: 'Angola', code: 'AO' },
+    { name: 'Anguilla', code: 'AI' },
+    { name: 'Antarctica', code: 'AQ' },
+    { name: 'Antigua and Barbuda', code: 'AG' },
+    { name: 'Argentina', code: 'AR' },
+    { name: 'Armenia', code: 'AM' },
+    { name: 'Aruba', code: 'AW' },
+    { name: 'Australia', code: 'AU' },
+    { name: 'Austria', code: 'AT' },
+    { name: 'Azerbaijan', code: 'AZ' },
+    { name: 'Bahamas', code: 'BS' },
+    { name: 'Bahrain', code: 'BH' },
+    { name: 'Bangladesh', code: 'BD' },
+    { name: 'Barbados', code: 'BB' },
+    { name: 'Belarus', code: 'BY' },
+    { name: 'Belgium', code: 'BE' },
+    { name: 'Belize', code: 'BZ' },
+    { name: 'Benin', code: 'BJ' },
+    { name: 'Bermuda', code: 'BM' },
+    { name: 'Bhutan', code: 'BT' },
+    { name: 'Bolivia', code: 'BO' },
+    { name: 'Bosnia and Herzegovina', code: 'BA' },
+    { name: 'Botswana', code: 'BW' },
+    { name: 'Bouvet Island', code: 'BV' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'British Indian Ocean Territory', code: 'IO' },
+    { name: 'Brunei Darussalam', code: 'BN' },
+    { name: 'Bulgaria', code: 'BG' },
+    { name: 'Burkina Faso', code: 'BF' },
+    { name: 'Burundi', code: 'BI' },
+    { name: 'Cambodia', code: 'KH' },
+    { name: 'Cameroon', code: 'CM' },
+    { name: 'Canada', code: 'CA' },
+    { name: 'Cape Verde', code: 'CV' },
+    { name: 'Cayman Islands', code: 'KY' },
+    { name: 'Central African Republic', code: 'CF' },
+    { name: 'Chad', code: 'TD' },
+    { name: 'Chile', code: 'CL' },
+    { name: 'China', code: 'CN' },
+    { name: 'Christmas Island', code: 'CX' },
+    { name: 'Cocos (Keeling) Islands', code: 'CC' },
+    { name: 'Colombia', code: 'CO' },
+    { name: 'Comoros', code: 'KM' },
+    { name: 'Congo', code: 'CG' },
+    { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+    { name: 'Cook Islands', code: 'CK' },
+    { name: 'Costa Rica', code: 'CR' },
+    { name: 'Cote d\'Ivoire', code: 'CI' },
+    { name: 'Croatia', code: 'HR' },
+    { name: 'Cuba', code: 'CU' },
+    { name: 'Cyprus', code: 'CY' },
+    { name: 'Czech Republic', code: 'CZ' },
+    { name: 'Denmark', code: 'DK' },
+    { name: 'Djibouti', code: 'DJ' },
+    { name: 'Dominica', code: 'DM' },
+    { name: 'Dominican Republic', code: 'DO' },
+    { name: 'Ecuador', code: 'EC' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'El Salvador', code: 'SV' },
+    { name: 'Equatorial Guinea', code: 'GQ' },
+    { name: 'Eritrea', code: 'ER' },
+    { name: 'Estonia', code: 'EE' },
+    { name: 'Ethiopia', code: 'ET' },
+    { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+    { name: 'Faroe Islands', code: 'FO' },
+    { name: 'Fiji', code: 'FJ' },
+    { name: 'Finland', code: 'FI' },
+    { name: 'France', code: 'FR' },
+    { name: 'French Guiana', code: 'GF' },
+    { name: 'French Polynesia', code: 'PF' },
+    { name: 'French Southern Territories', code: 'TF' },
+    { name: 'Gabon', code: 'GA' },
+    { name: 'Gambia', code: 'GM' },
+    { name: 'Georgia', code: 'GE' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'Ghana', code: 'GH' },
+    { name: 'Gibraltar', code: 'GI' },
+    { name: 'Greece', code: 'GR' },
+    { name: 'Greenland', code: 'GL' },
+    { name: 'Grenada', code: 'GD' },
+    { name: 'Guadeloupe', code: 'GP' },
+    { name: 'Guam', code: 'GU' },
+    { name: 'Guatemala', code: 'GT' },
+    { name: 'Guernsey', code: 'GG' },
+    { name: 'Guinea', code: 'GN' },
+    { name: 'Guinea-Bissau', code: 'GW' },
+    { name: 'Guyana', code: 'GY' },
+    { name: 'Haiti', code: 'HT' },
+    { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+    { name: 'Holy See (Vatican City State)', code: 'VA' },
+    { name: 'Honduras', code: 'HN' },
+    { name: 'Hong Kong', code: 'HK' },
+    { name: 'Hungary', code: 'HU' },
+    { name: 'Iceland', code: 'IS' },
+    { name: 'India', code: 'IN' },
+    { name: 'Indonesia', code: 'ID' },
+    { name: 'Iran, Islamic Republic Of', code: 'IR' },
+    { name: 'Iraq', code: 'IQ' },
+    { name: 'Ireland', code: 'IE' },
+    { name: 'Isle of Man', code: 'IM' },
+    { name: 'Israel', code: 'IL' },
+    { name: 'Italy', code: 'IT' },
+    { name: 'Jamaica', code: 'JM' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Jersey', code: 'JE' },
+    { name: 'Jordan', code: 'JO' },
+    { name: 'Kazakhstan', code: 'KZ' },
+    { name: 'Kenya', code: 'KE' },
+    { name: 'Kiribati', code: 'KI' },
+    { name: 'Korea, Democratic People\'s Republic of', code: 'KP' },
+    { name: 'Korea, Republic of', code: 'KR' },
+    { name: 'Kuwait', code: 'KW' },
+    { name: 'Kyrgyzstan', code: 'KG' },
+    { name: 'Lao People\'s Democratic Republic', code: 'LA' },
+    { name: 'Latvia', code: 'LV' },
+    { name: 'Lebanon', code: 'LB' },
+    { name: 'Lesotho', code: 'LS' },
+    { name: 'Liberia', code: 'LR' },
+    { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+    { name: 'Liechtenstein', code: 'LI' },
+    { name: 'Lithuania', code: 'LT' },
+    { name: 'Luxembourg', code: 'LU' },
+    { name: 'Macao', code: 'MO' },
+    { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+    { name: 'Madagascar', code: 'MG' },
+    { name: 'Malawi', code: 'MW' },
+    { name: 'Malaysia', code: 'MY' },
+    { name: 'Maldives', code: 'MV' },
+    { name: 'Mali', code: 'ML' },
+    { name: 'Malta', code: 'MT' },
+    { name: 'Marshall Islands', code: 'MH' },
+    { name: 'Martinique', code: 'MQ' },
+    { name: 'Mauritania', code: 'MR' },
+    { name: 'Mauritius', code: 'MU' },
+    { name: 'Mayotte', code: 'YT' },
+    { name: 'Mexico', code: 'MX' },
+    { name: 'Micronesia, Federated States of', code: 'FM' },
+    { name: 'Moldova, Republic of', code: 'MD' },
+    { name: 'Monaco', code: 'MC' },
+    { name: 'Mongolia', code: 'MN' },
+    { name: 'Montserrat', code: 'MS' },
+    { name: 'Morocco', code: 'MA' },
+    { name: 'Mozambique', code: 'MZ' },
+    { name: 'Myanmar', code: 'MM' },
+    { name: 'Namibia', code: 'NA' },
+    { name: 'Nauru', code: 'NR' },
+    { name: 'Nepal', code: 'NP' },
+    { name: 'Netherlands', code: 'NL' },
+    { name: 'Netherlands Antilles', code: 'AN' },
+    { name: 'New Caledonia', code: 'NC' },
+    { name: 'New Zealand', code: 'NZ' },
+    { name: 'Nicaragua', code: 'NI' },
+    { name: 'Niger', code: 'NE' },
+    { name: 'Nigeria', code: 'NG' },
+    { name: 'Niue', code: 'NU' },
+    { name: 'Norfolk Island', code: 'NF' },
+    { name: 'Northern Mariana Islands', code: 'MP' },
+    { name: 'Norway', code: 'NO' },
+    { name: 'Oman', code: 'OM' },
+    { name: 'Pakistan', code: 'PK' },
+    { name: 'Palau', code: 'PW' },
+    { name: 'Palestinian Territory, Occupied', code: 'PS' },
+    { name: 'Panama', code: 'PA' },
+    { name: 'Papua New Guinea', code: 'PG' },
+    { name: 'Paraguay', code: 'PY' },
+    { name: 'Peru', code: 'PE' },
+    { name: 'Philippines', code: 'PH' },
+    { name: 'Pitcairn', code: 'PN' },
+    { name: 'Poland', code: 'PL' },
+    { name: 'Portugal', code: 'PT' },
+    { name: 'Puerto Rico', code: 'PR' },
+    { name: 'Qatar', code: 'QA' },
+    { name: 'Reunion', code: 'RE' },
+    { name: 'Romania', code: 'RO' },
+    { name: 'Russian Federation', code: 'RU' },
+    { name: 'RWANDA', code: 'RW' },
+    { name: 'Saint Helena', code: 'SH' },
+    { name: 'Saint Kitts and Nevis', code: 'KN' },
+    { name: 'Saint Lucia', code: 'LC' },
+    { name: 'Saint Pierre and Miquelon', code: 'PM' },
+    { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+    { name: 'Samoa', code: 'WS' },
+    { name: 'San Marino', code: 'SM' },
+    { name: 'Sao Tome and Principe', code: 'ST' },
+    { name: 'Saudi Arabia', code: 'SA' },
+    { name: 'Senegal', code: 'SN' },
+    { name: 'Serbia and Montenegro', code: 'CS' },
+    { name: 'Seychelles', code: 'SC' },
+    { name: 'Sierra Leone', code: 'SL' },
+    { name: 'Singapore', code: 'SG' },
+    { name: 'Slovakia', code: 'SK' },
+    { name: 'Slovenia', code: 'SI' },
+    { name: 'Solomon Islands', code: 'SB' },
+    { name: 'Somalia', code: 'SO' },
+    { name: 'South Africa', code: 'ZA' },
+    { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'Sri Lanka', code: 'LK' },
+    { name: 'Sudan', code: 'SD' },
+    { name: 'Suriname', code: 'SR' },
+    { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+    { name: 'Swaziland', code: 'SZ' },
+    { name: 'Sweden', code: 'SE' },
+    { name: 'Switzerland', code: 'CH' },
+    { name: 'Syrian Arab Republic', code: 'SY' },
+    { name: 'Taiwan, Province of China', code: 'TW' },
+    { name: 'Tajikistan', code: 'TJ' },
+    { name: 'Tanzania, United Republic of', code: 'TZ' },
+    { name: 'Thailand', code: 'TH' },
+    { name: 'Timor-Leste', code: 'TL' },
+    { name: 'Togo', code: 'TG' },
+    { name: 'Tokelau', code: 'TK' },
+    { name: 'Tonga', code: 'TO' },
+    { name: 'Trinidad and Tobago', code: 'TT' },
+    { name: 'Tunisia', code: 'TN' },
+    { name: 'Turkey', code: 'TR' },
+    { name: 'Turkmenistan', code: 'TM' },
+    { name: 'Turks and Caicos Islands', code: 'TC' },
+    { name: 'Tuvalu', code: 'TV' },
+    { name: 'Uganda', code: 'UG' },
+    { name: 'Ukraine', code: 'UA' },
+    { name: 'United Arab Emirates', code: 'AE' },
+    { name: 'United Kingdom', code: 'GB' },
+    { name: 'United States', code: 'US' },
+    { name: 'United States Minor Outlying Islands', code: 'UM' },
+    { name: 'Uruguay', code: 'UY' },
+    { name: 'Uzbekistan', code: 'UZ' },
+    { name: 'Vanuatu', code: 'VU' },
+    { name: 'Venezuela', code: 'VE' },
+    { name: 'Viet Nam', code: 'VN' },
+    { name: 'Virgin Islands, British', code: 'VG' },
+    { name: 'Virgin Islands, U.S.', code: 'VI' },
+    { name: 'Wallis and Futuna', code: 'WF' },
+    { name: 'Western Sahara', code: 'EH' },
+    { name: 'Yemen', code: 'YE' },
+    { name: 'Zambia', code: 'ZM' },
+    { name: 'Zimbabwe', code: 'ZW' }
+];
--- a/admin-dashboard/src/components/basic/CountrySelector.js
+++ b/admin-dashboard/src/components/basic/CountrySelector.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { countries } from './CountryList';
+
+let errorStyle = {
+  color:'red',
+  topMargin:'5px'
+}
+
+const CountrySelector =  ({ input, meta: { touched, error } }) => (
+    <span>
+      <select {...input} className="selector" id="country">
+        <option value="">Select Country...</option>
+        {countries.map(val => (
+          <option value={val.name} key={val.code}>
+            {val.name}
+          </option>
+        ))}
+      </select>
+      {touched && error && <span style={errorStyle}>{error}</span>}
+    </span>
+  )
+
+  CountrySelector.displayName = 'CountrySelector'
+
+  CountrySelector.propTypes = {
+    meta: PropTypes.object.isRequired,
+    input: PropTypes.object.isRequired
+  }
+
+  export default CountrySelector
--- a/admin-dashboard/src/components/basic/EmailTitleList.js
+++ b/admin-dashboard/src/components/basic/EmailTitleList.js
@@ -0,0 +1,7 @@
+export const emailTemplateTitles = {
+    'Subscriber Incident' : 'Subscriber Incident Email Template',
+}
+
+export const emailTemplateDescriptions = {
+    'Subscriber Incident' : 'This email is sent to a subscriber when an incident is created.',
+}
--- a/admin-dashboard/src/components/basic/ErrorBoundary.js
+++ b/admin-dashboard/src/components/basic/ErrorBoundary.js
@@ -0,0 +1,46 @@
+import React, { Component} from 'react';
+import PropTypes from 'prop-types';
+
+class ErrorBoundary extends Component{
+    constructor(props) {
+      super(props);
+      this.state = { hasError: false };
+    }
+  
+    componentDidCatch(error, info) {
+      // Display fallback UI
+      this.setState({ hasError: true });
+      // You can also log the error to an error reporting service
+      try{
+        if(window.location.href.indexOf('localhost') <= -1){
+        this.context.mixpanel.track('An Error has occurred',{error,info});
+        }
+      }catch(error){
+        return error
+      }
+    }
+  
+    render() {
+        
+      if(this.state.hasError) {
+        return(
+        <div id="app-loading" style={{ 'position': 'fixed', 'top': '0', 'bottom': '0', 'left': '0', 'right': '0', 'backgroundColor': '#e6ebf1', 'zIndex': '999', 'display': 'flex', 'justifyContent': 'center', 'alignItems': 'center' }}>
+            <div>An unexpected error has occured. Please reload the page to continue</div>
+      </div>
+      )
+      }
+      return this.props.children;
+    }
+  }
+
+  ErrorBoundary.displayName = 'ErrorBoundary'
+
+  ErrorBoundary.contextTypes = {
+    mixpanel: PropTypes.object.isRequired
+};
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.any
+}
+
+  export default ErrorBoundary;
--- a/admin-dashboard/src/components/basic/IsAdmin.js
+++ b/admin-dashboard/src/components/basic/IsAdmin.js
@@ -0,0 +1,18 @@
+
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsAdmin (currentProject) {
+    var userId = User.getUserId();
+    return (
+        [null, undefined].every(i => i !== userId) && 
+        [null, undefined].every(i => i !== currentProject) &&
+        [null, undefined].every(i => i !== currentProject.users) &&
+        currentProject.users.length > 0 &&
+        currentProject.users.some(user => user.userId === userId
+            && (user.role === 'Administrator' || user.role === 'Administrator'))
+    );
+}
--- a/admin-dashboard/src/components/basic/IsAdminSubProject.js
+++ b/admin-dashboard/src/components/basic/IsAdminSubProject.js
@@ -0,0 +1,18 @@
+
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsAdminSubProject (subProject) {
+    var userId = User.getUserId();
+    return (
+        [null, undefined].every(i => i !== userId) && 
+        [null, undefined].every(i => i !== subProject) &&
+        [null, undefined].every(i => i !== subProject.users) &&
+        subProject.users.length > 0 &&
+        subProject.users.some(user => user.userId === userId
+            && (user.role === 'Administrator' || user.role === 'Administrator'))
+    );
+}
--- a/admin-dashboard/src/components/basic/IsMember.js
+++ b/admin-dashboard/src/components/basic/IsMember.js
@@ -0,0 +1,21 @@
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function(currentProject) {
+  
+    var userId = User.getUserId();
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId
+            && (user.role !== 'Administrator' ||  user.role !== 'Owner')).length > 0
+    ) {
+        return true;
+    }
+
+    return false;
+}
--- a/admin-dashboard/src/components/basic/IsMemberSubProject.js
+++ b/admin-dashboard/src/components/basic/IsMemberSubProject.js
@@ -0,0 +1,21 @@
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the subproject is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsMemberSubProject (subProject) {
+  
+    var userId = User.getUserId();
+    if (
+        userId && subProject &&
+        subProject.users &&
+        subProject.users.length > 0 &&
+        subProject.users.filter(user => user.userId === userId
+            && (user.role !== 'Administrator' ||  user.role !== 'Owner' || user.role !== 'Viewer')).length > 0
+    ) {
+        return true;
+    }
+
+    return false; 
+}
--- a/admin-dashboard/src/components/basic/IsOwner.js
+++ b/admin-dashboard/src/components/basic/IsOwner.js
@@ -0,0 +1,17 @@
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsOwner (currentProject) {
+    var userId = User.getUserId();
+    return (
+        [null, undefined].every(i => i !== userId) && 
+        [null, undefined].every(i => i !== currentProject) &&
+        [null, undefined].every(i => i !== currentProject.users) &&
+        currentProject.users.length > 0 &&
+        currentProject.users.some(user => user.userId === userId
+            && user.role === 'Owner')
+    );
+}
--- a/admin-dashboard/src/components/basic/IsOwnerSubProject.js
+++ b/admin-dashboard/src/components/basic/IsOwnerSubProject.js
@@ -0,0 +1,17 @@
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the subproject is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsOwnerSubProject (subProject) {
+    var userId = User.getUserId();
+    return (
+        [null, undefined].every(i => i !== userId) && 
+        [null, undefined].every(i => i !== subProject) &&
+        [null, undefined].every(i => i !== subProject.users) &&
+        subProject.users.length > 0 &&
+        subProject.users.some(user => user.userId === userId
+            && user.role === 'Owner')
+    );
+}
--- a/admin-dashboard/src/components/basic/IsUserInSubProject.js
+++ b/admin-dashboard/src/components/basic/IsUserInSubProject.js
@@ -0,0 +1,17 @@
+
+import { User } from '../../config';
+
+// Description: Checks if the current user in the subProject.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export default function IsUserInSubProject (subProject) {
+    var userId = User.getUserId();
+    return (
+        [null, undefined].every(i => i !== userId) && 
+        [null, undefined].every(i => i !== subProject) &&
+        [null, undefined].every(i => i !== subProject.users) &&
+        subProject.users.length > 0 &&
+        subProject.users.some(user => user.userId === userId)
+    );
+}
--- a/admin-dashboard/src/components/basic/Loader.js
+++ b/admin-dashboard/src/components/basic/Loader.js
@@ -0,0 +1,85 @@
+
+import React from 'react';
+
+let loaderStyle = {
+    backgroundColor: '#96d8ff'
+}
+
+export const FlatLoader = () => (<div className="ball-pulse"><div style={loaderStyle}></div><div style={loaderStyle}></div><div style={loaderStyle}></div></div>);
+
+FlatLoader.displayName = 'FlatLoader'
+
+export const FormLoader = () => (<div className="ball-beat"><div style={{ height: '8px', width: '8px' }}></div><div style={{ height: '8px', width: '8px' }}></div><div style={{ height: '8px', width: '8px' }}></div></div>);
+
+FormLoader.displayName = 'FormLoader'
+
+export const ListLoader = () => (<div className="ball-beat" style={{ textAlign: 'center', marginTop: '20px' }}><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div></div>);
+
+ListLoader.displayName = 'ListLoader'
+
+export const TeamListLoader = () => (<div className="ball-beat" style={{ textAlign: 'center',width:'95px'}}><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div><div style={{ height: '8px', width: '8px', backgroundColor: '#32325d' }}></div></div>);
+
+TeamListLoader.displayName = 'TeamListLoader'
+
+export const Spinner = () => (
+    <div className="Spinner bs-SpinnerLegacy Spinner--color--white Box-root Flex-inlineFlex Flex-alignItems--center Flex-justifyContent--center">
+        <svg
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            className="Spinner-svg"
+        >
+            <ellipse
+                cx={12}
+                cy={12}
+                rx={10}
+                ry={10}
+                className="Spinner-ellipse"
+            />
+        </svg>
+    </div>
+)
+
+Spinner.displayName = 'Spinner'
+
+export const LoadingState = () => (
+	<div className="Box-root Margin-bottom--12">
+		<div className="bs-ContentSection Card-root Card-shadow--medium">
+			<div className="Box-root">
+				<div className="ContentState Box-root">
+					<div className="Box-root Padding-horizontal--20 Padding-vertical--48">
+						<div className="Box-root Flex-flex Flex-alignItems--center Flex-direction--column Flex-justifyContent--flexStart">
+							<div className="Box-root Margin-bottom--12">
+								<div className="Box-root">
+									<div className="Spinner bs-SpinnerLegacy Spinner--size--large Box-root Flex-flex Flex-alignItems--center Flex-justifyContent--center">
+										<svg
+											viewBox="0 0 24 24"
+											xmlns="http://www.w3.org/2000/svg"
+											className="Spinner-svg"
+										>
+											<ellipse
+												cx={12}
+												cy={12}
+												rx={10}
+												ry={10}
+												className="Spinner-ellipse"
+											/>
+										</svg>
+									</div>
+								</div>
+							</div>
+							<div className="Box-root">
+								<div className="Box-root">
+									<span className="ContentState-title Text-align--center Text-color--secondary Text-display--block Text-fontSize--14 Text-fontWeight--regular Text-lineHeight--20 Text-typeface--base Text-wrap--wrap">
+										<span>Loading</span>
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+);
+
+LoadingState.displayName = 'LoadingState'
--- a/admin-dashboard/src/components/basic/RenderEscalation.js
+++ b/admin-dashboard/src/components/basic/RenderEscalation.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { FieldArray } from 'redux-form';
+import { Field } from 'redux-form';
+import ShouldRender from '../basic/ShouldRender';
+import { RenderNames } from './RenderNames';
+import { RenderField } from './RenderField';
+
+
+const RenderEscalation = ({ fields, meta: { error, submitFailed }, subProjectId }) => {
+ 
+    return (
+        <ul>
+            {
+                fields.map((policy, i) => {
+                    return (
+                        <li key={i} style={{ margin: '5px 0px' }}>
+                            <div className="Card-root" style={{ backgroundColor: i === 0 ? '#f6f9fc' : '#ffffff' }}>
+                                <div className="Box-root">
+                                    <div className="bs-ContentSection-content Box-root Box-divider--surface-bottom-1 Flex-flex Flex-alignItems--center Flex-justifyContent--spaceBetween Padding-horizontal--20 Padding-vertical--16">
+                                        <div className="Box-root">
+                                            <span className="Text-color--inherit Text-display--inline Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap">
+                                                <span>Escalation Policy {i + 1}</span>
+                                            </span>
+                                            <p>
+                                                <span>
+
+                                                </span>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="bs-ContentSection-content Box-root Box-background--offset Box-divider--surface-bottom-1 Padding-horizontal--8 Padding-vertical--2" style={{ backgroundColor: '#f6f9fc' }}>
+                                        <div>
+                                            <div className="bs-Fieldset-wrapper Box-root Margin-bottom--2">
+                                                <fieldset className="bs-Fieldset">
+                                                    <div className="bs-Fieldset-row">
+                                                        <label className="bs-Fieldset-label">Call Frequency</label>
+                                                        <div className="bs-Fieldset-fields">
+                                                            <Field
+                                                                className="db-BusinessSettings-input TextInput bs-TextInput"
+                                                                type="text"
+                                                                name={`${policy}.callFrequency`}
+                                                                component={RenderField}
+                                                                style={{ width: '320px' }}
+                                                                defaultValue="10"
+                                                                subProjectId={subProjectId}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="bs-Fieldset-rows">
+
+                                                        <FieldArray
+                                                            name={`${policy}.teamMember`}
+                                                            component={RenderNames}
+                                                            subProjectId={subProjectId}
+                                                        />
+                                                    </div>
+                                                </fieldset>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <ShouldRender if={fields.length > 1}>
+                                        <div className="bs-ContentSection-footer bs-ContentSection-content Box-root Flex-flex Flex-alignItems--center Flex-justifyContent--spaceBetween Padding-horizontal--20 Padding-vertical--12" style={{ backgroundColor: '#f6f9fc' }}>
+
+                                            <div>
+                                                <button
+                                                    className="bs-Button bs-DeprecatedButton"
+                                                    onClick={() => fields.remove(i)}
+                                                    type="button"
+                                                >
+                                                    Remove Policy
+                                            </button>
+                                            </div>
+                                        </div>
+                                    </ShouldRender>
+                                </div>
+                            </div>
+                        </li>
+                    )
+                })
+            }
+
+            <li>
+
+                <div className="bs-Fieldset-row" style={{ padding: '0px 15px' }}>
+                    <div className="bs-Fieldset-fields">
+                        <div className="Box-root Flex-flex Flex-alignItems--center">
+                            <div>
+                                <ShouldRender if={fields.length < 10}>
+                                    <button
+                                        type="button"
+                                        className="bs-Button bs-FileUploadButton bs-Button--icon bs-Button--new"
+                                        onClick={() => fields.push({ callFrequency: '10',teamMember: [{ member: '', email: true, sms: true, call: true, timezone: '', startTime: '', endTime: '' }] })}
+                                    >
+                                        Add Policy
+                                    </button>
+                                    <ShouldRender if={submitFailed && error}>
+                                        <span>{error}</span>
+                                    </ShouldRender>
+                                </ShouldRender>
+                            </div>
+                        </div>
+                        <p className="bs-Fieldset-explanation">
+                            <span>
+                                You can add Escalation Policy here.
+                            </span>
+                        </p>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    )
+}
+
+RenderEscalation.displayName = 'RenderEscalation'
+
+RenderEscalation.propTypes = {
+    subProjectId: PropTypes.string.isRequired,
+    meta: PropTypes.object.isRequired,
+    fields: PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.object
+    ]).isRequired,
+    // touched:PropTypes.bool,
+    // error:PropTypes.string,
+}
+
+export { RenderEscalation }
--- a/admin-dashboard/src/components/basic/RenderField.js
+++ b/admin-dashboard/src/components/basic/RenderField.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+
+const RenderField = ({ input, placeholder, type, meta, className, id, disabled, initialValue, style }) => (
+
+    <span>
+        <span>
+            <input
+                {...input}
+                type={type}
+                placeholder={placeholder}
+                className={className}
+                id={id}
+                disabled={disabled || false}
+                defaultValue={initialValue}
+                style={style || {}}
+            />
+        </span>
+        <br/>
+        {meta.error &&
+            meta.touched &&
+            <div className="Box-root Flex-flex Flex-alignItems--stretch Flex-direction--row Flex-justifyContent--flexStart" style={{marginTop:'5px'}}>
+                <div className="Box-root Margin-right--8" style={{marginTop:'2px'}}>
+                    <div className="Icon Icon--info Icon--color--red Icon--size--14 Box-root Flex-flex">
+                    </div>
+                </div>
+                <div className="Box-root">
+                    <span style={{ color: 'red' }}>
+                        {meta.error}
+                    </span>
+                </div>
+            </div>}
+    </span>
+)
+
+RenderField.displayName = 'RenderField'
+
+RenderField.propTypes = {
+    initialValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.bool,
+    ]),
+    input: PropTypes.object.isRequired,
+    placeholder: PropTypes.string,
+    type: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    id: PropTypes.string,
+    meta: PropTypes.object.isRequired,
+    rows: PropTypes.string,
+    disabled: PropTypes.bool,
+    style: PropTypes.object
+}
+
+export {RenderField}
+
+
+
--- a/admin-dashboard/src/components/basic/RenderHeaders.js
+++ b/admin-dashboard/src/components/basic/RenderHeaders.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import { Field } from 'redux-form';
+import {RenderField} from './RenderField';
+import { ValidateField } from '../../config';
+
+const flexStyle = {
+    display: 'inline-block',
+    padding: '10px 20px'
+}
+
+const RenderHeaders = ({ fields }) => {
+    if (!fields || !fields.length) {
+        fields.push({ key: '', value: '' })
+    }
+    return (
+        <ul>
+            {
+                fields.map((val, i) => {
+                    return (
+                        <li key={i}>
+                            <div className="bs-Fieldset-row" style={Object.assign({},flexStyle,{marginLeft:'10px'})}>
+                                <label className="bs-Fieldset-label" style={{padding: '6px'}}>Key</label>
+                                <div className="bs-Fieldset-fields" style={{width:'340px'}}>
+                                    <Field
+                                        className="db-BusinessSettings-input TextInput bs-TextInput"
+                                        type="text"
+                                        name={`${val}.key`}
+                                        component={RenderField}
+                                        placeholder="KEY"
+                                        style={{width:'340px'}}
+                                        validate={ValidateField.required}
+                                    />
+                                </div>
+                            </div>
+                            <div className="bs-Fieldset-row" style={flexStyle}>
+                                <label className="bs-Fieldset-label" style={{padding: '6px'}}>Value</label>
+                                <div className="bs-Fieldset-fields" style={{width:'350px'}}>
+                                    <Field
+                                        className="db-BusinessSettings-input TextInput bs-TextInput"
+                                        type="text"
+                                        name={`${val}.value`}
+                                        component={RenderField}
+                                        placeholder="VALUE"
+                                        style={{width:'340px'}}
+                                        validate={ValidateField.required}
+                                    />
+                                </div>
+                            </div>
+                            <div className="bs-Fieldset-row" style={Object.assign({},flexStyle,{marginLeft:'35px'})}>
+                                <label className="bs-Fieldset-label"></label>
+                                <div className="bs-Fieldset-fields">
+                                    <div className="Box-root Flex-flex Flex-alignItems--center">
+                                        <button
+                                            className="bs-Button bs-DeprecatedButton"
+                                            type="button"
+                                            onClick={() => fields.remove(i)}
+                                        >
+                                            Remove
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    )
+                })
+            }
+        </ul>
+    )
+}
+
+RenderHeaders.displayName = 'RenderHeaders'
+
+RenderHeaders.propTypes = {
+    fields: PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.object
+    ]).isRequired
+}
+
+export { RenderHeaders }
--- a/admin-dashboard/src/components/basic/RenderIfAdmin.js
+++ b/admin-dashboard/src/components/basic/RenderIfAdmin.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export function RenderIfAdmin(props) {
+    const {currentProject, children} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId
+            && (user.role === 'Administrator' || user.role === 'Owner')).length > 0
+    ) {
+        renderItems = children
+    }
+
+    return renderItems;
+}
+
+function mapStateToProps(state) {
+    return {
+        currentProject: state.project.currentProject
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfAdmin);
--- a/admin-dashboard/src/components/basic/RenderIfMember.js
+++ b/admin-dashboard/src/components/basic/RenderIfMember.js
@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is member.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+function RenderIfMember(props) {
+    const {currentProject, children} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId
+            && (user.role !== 'Administrator' && user.role !== 'Owner' && user.role !== 'Viewer')).length > 0
+    ) {
+        renderItems = children
+    }
+
+    return renderItems;
+}
+
+function mapStateToProps(state) {
+    return {
+        currentProject: state.project.currentProject
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfMember);
--- a/admin-dashboard/src/components/basic/RenderIfOwner.js
+++ b/admin-dashboard/src/components/basic/RenderIfOwner.js
@@ -0,0 +1,30 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export function RenderIfOwner(props) {
+    const {currentProject, children} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId && user.role === 'Owner').length > 0
+    ) {
+        renderItems = children
+    }
+
+    return renderItems;
+}
+
+function mapStateToProps(state) {
+    return {
+        currentProject: state.project.currentProject
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfOwner);
--- a/admin-dashboard/src/components/basic/RenderIfSubProjectAdmin.js
+++ b/admin-dashboard/src/components/basic/RenderIfSubProjectAdmin.js
@@ -0,0 +1,51 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export function RenderIfSubProjectAdmin(props) {
+    const {children, currentProject, subProjects, subProjectId} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId
+            && (user.role === 'Administrator' || user.role === 'Owner')).length > 0
+    ) {
+        renderItems = children
+    }else{
+        if(subProjects){
+            subProjects.forEach((subProject)=>{
+                if(subProjectId){
+                    if (subProject._id === subProjectId && subProject.users.filter(user => user.userId === userId && (user.role === 'Administrator' || user.role === 'Owner')).length > 0){
+                        renderItems = children
+                    }
+                }else{
+                    if (
+                        userId && subProject &&
+                        subProject.users &&
+                        subProject.users.length > 0 &&
+                        subProject.users.filter(user => user.userId === userId
+                            && (user.role === 'Administrator' || user.role === 'Owner')).length > 0
+                    ) {
+                        renderItems = children
+                    }
+                }
+            });
+        }
+    }
+    return renderItems;
+}
+
+function mapStateToProps(state) {
+    return {
+        subProjects: state.subProject.subProjects.subProjects,
+        currentProject: state.project.currentProject,
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfSubProjectAdmin);
--- a/admin-dashboard/src/components/basic/RenderIfSubProjectMember.js
+++ b/admin-dashboard/src/components/basic/RenderIfSubProjectMember.js
@@ -0,0 +1,46 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is member.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+function RenderIfSubProjectMember(props) {
+    const {currentProject, subProjects, children} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId
+            && (user.role !== 'Administrator' && user.role !== 'Owner' && user.role !== 'Viewer')).length > 0
+    ) {
+        renderItems = children
+    }else{
+        if(subProjects){
+            subProjects.forEach((subProject)=>{
+                if (
+                    userId && subProject &&
+                    subProject.users &&
+                    subProject.users.length > 0 &&
+                    subProject.users.filter(user => user.userId === userId
+                        && (user.role !== 'Administrator' && user.role !== 'Owner' && user.role !== 'Viewer')).length > 0
+                ) {
+                    renderItems = children
+                }
+            })
+        }
+    }
+    return renderItems;
+
+}
+
+function mapStateToProps(state) {
+    return {
+        subProjects: state.subProject.subProjects.subProjects,
+        currentProject: state.project.currentProject,
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfSubProjectMember);
--- a/admin-dashboard/src/components/basic/RenderIfSubProjectOwner.js
+++ b/admin-dashboard/src/components/basic/RenderIfSubProjectOwner.js
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import { User } from '../../config';
+
+// Description: Will render the component is the current user in the project is admin.
+// Params
+// params 1: props
+// returns JSX.Element or NULL
+export function RenderIfSubProjectOwner(props) {
+    const {currentProject, subProjects, children} = props;
+    var userId = User.getUserId();
+    var renderItems = null;
+    if (
+        userId && currentProject &&
+        currentProject.users &&
+        currentProject.users.length > 0 &&
+        currentProject.users.filter(user => user.userId === userId && user.role === 'Owner').length > 0
+    ) {
+        renderItems = children
+    }else{
+        if(subProjects){
+            subProjects.forEach((subProject)=>{
+                if (
+                    userId && subProject &&
+                    subProject.users &&
+                    subProject.users.length > 0 &&
+                    subProject.users.filter(user => user.userId === userId && user.role === 'Owner').length > 0
+                ) {
+                    renderItems = children
+                }
+            })
+        }
+    }
+
+    return renderItems;
+}
+
+function mapStateToProps(state) {
+    return {
+        subProjects: state.subProject.subProjects.subProjects,
+        currentProject: state.project.currentProject,
+    };
+}
+
+export default connect(mapStateToProps)(RenderIfSubProjectOwner);
--- a/Show More
+++ b/Show More