@plusscommunities/pluss-maintenance-web 1.0.23 → 1.0.27-beta.0

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-fontawesome'), require('@plusscommunities/pluss-core-web'), require('js-cookie'), require('react-bootstrap'), require('react-router'), require('react-router-dom'), require('@babel/runtime/helpers/toConsumableArray'), require('react-textarea-autosize')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', '@babel/runtime/regenerator', 'react', 'react-redux', 'lodash', 'moment', 'react-fontawesome', '@plusscommunities/pluss-core-web', 'js-cookie', 'react-bootstrap', 'react-router', 'react-router-dom', '@babel/runtime/helpers/toConsumableArray', 'react-textarea-autosize'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-maintenance-web'] = {}, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global._regeneratorRuntime, global.React, global.reactRedux, global._, global.moment, global.FontAwesome, global.PlussCore, global.Cookies, global.reactBootstrap, global.reactRouter, global.reactRouterDom, global._toConsumableArray, global.Textarea));
-}(this, (function (exports, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, _regeneratorRuntime, React, reactRedux, _, moment, FontAwesome, PlussCore, Cookies, reactBootstrap, reactRouter, reactRouterDom, _toConsumableArray, Textarea) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('react-router'), require('lodash'), require('moment'), require('react-fontawesome'), require('@plusscommunities/pluss-core-web'), require('js-cookie'), require('react-bootstrap'), require('react-router-dom'), require('@babel/runtime/helpers/toConsumableArray'), require('react-textarea-autosize')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', '@babel/runtime/regenerator', 'react', 'react-redux', 'react-router', 'lodash', 'moment', 'react-fontawesome', '@plusscommunities/pluss-core-web', 'js-cookie', 'react-bootstrap', 'react-router-dom', '@babel/runtime/helpers/toConsumableArray', 'react-textarea-autosize'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-maintenance-web'] = {}, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global._regeneratorRuntime, global.React, global.reactRedux, global.reactRouter, global._, global.moment, global.FontAwesome, global.PlussCore, global.Cookies, global.reactBootstrap, global.reactRouterDom, global._toConsumableArray, global.Textarea));
+}(this, (function (exports, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, _regeneratorRuntime, React, reactRedux, reactRouter, _, moment, FontAwesome, PlussCore, Cookies, reactBootstrap, reactRouterDom, _toConsumableArray, Textarea) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -301,13 +301,14 @@
   var Helper$3 = PlussCore__namespace.Helper,
       Session$5 = PlussCore__namespace.Session;
   var reactionActions = {
-    addComment: function addComment(entityId, entityType, entityName, site, comment, image) {
+    addComment: function addComment(entityId, entityType, entityName, site, comment, image, parentId) {
       var data = {
         entityId: entityId,
         entityType: entityType,
         entityName: entityName,
         site: site,
-        comment: comment
+        comment: comment,
+        parentId: parentId
       };
 
       if (!___default['default'].isEmpty(image)) {
@@ -448,8 +449,7 @@
   function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var Session$4 = PlussCore__namespace.Session,
-      Components$4 = PlussCore__namespace.Components;
+  var Session$4 = PlussCore__namespace.Session;
 
   var JobList = /*#__PURE__*/function (_Component) {
     _inherits__default['default'](JobList, _Component);
@@ -557,10 +557,6 @@
         };
       }());
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenJobTypes", function () {
-        _this.props.history.push('/requestTypes');
-      });
-
       _this.state = {
         showCompleted: false,
         sortColumn: 'createdUnix',
@@ -700,27 +696,6 @@
           }
         }, "Example might be; Fix my light bulb, hand rail is broken, or please send flowers to Mum."));
       }
-    }, {
-      key: "renderButtons",
-      value: function renderButtons() {
-        if (!Session$4.validateAccess(this.props.auth.site, 'maintenanceTypes', this.props.auth)) return null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "flex-reverse"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$4.Button, {
-          inline: true,
-          buttonType: "primaryAction",
-          onClick: this.onOpenJobTypes,
-          isActive: true
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "flex flex-row flex-center"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$4.SVGIcon, {
-          colour: '#fff',
-          icon: "maintenance2",
-          height: "17px"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginLeft-10"
-        }, "Request Types"))));
-      }
     }, {
       key: "renderContent",
       value: function renderContent() {
@@ -792,7 +767,9 @@
           style: {
             minWidth: '100%'
           }
-        }, this.renderButtons(), this.renderContent());
+        }, this.renderContent(), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "hub_tidioPadding"
+        }));
       }
     }]);
 
@@ -816,1308 +793,1235 @@
   function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var Components$3 = PlussCore__namespace.Components,
-      Session$3 = PlussCore__namespace.Session;
+  var Session$3 = PlussCore__namespace.Session,
+      Components$3 = PlussCore__namespace.Components,
+      Helper$2 = PlussCore__namespace.Helper;
 
-  var RequestsHub = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](RequestsHub, _Component);
+  var JobTypes = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](JobTypes, _Component);
 
-    var _super = _createSuper$9(RequestsHub);
+    var _super = _createSuper$9(JobTypes);
 
-    function RequestsHub(props) {
+    function JobTypes(props) {
       var _this;
 
-      _classCallCheck__default['default'](this, RequestsHub);
+      _classCallCheck__default['default'](this, JobTypes);
 
       _this = _super.call(this, props);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setData", function () {
-        var allList = [];
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+        var res;
+        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return maintenanceActions.getJobTypes(_this.props.auth.site);
 
-        _this.state.allList.forEach(function (ev) {
-          if (ev != null && !ev.Deleted) allList.push(ev);
-        });
+              case 3:
+                res = _context.sent;
+                if (res.data != null) _this.props.jobTypesLoaded(res.data);
+                _context.next = 10;
+                break;
 
-        var upcoming = ___default['default'].filter(allList, function (ev) {
-          if (!ev) return false;
-          if (ev.status && ev.status === 'Completed') return false;
-          return true;
-        });
+              case 7:
+                _context.prev = 7;
+                _context.t0 = _context["catch"](0);
+                console.error('getJobTypes', _context.t0);
 
-        var completed = ___default['default'].filter(allList, function (ev) {
-          if (!ev) return false;
-          if (ev.status && ev.status === 'Completed') return true;
-          return false;
-        }); // console.log('setData', upcoming, completed);
+              case 10:
+                _context.prev = 10;
+
+                _this.setState({
+                  loading: false
+                });
 
+                return _context.finish(10);
 
-        _this.setState({
-          allList: allList,
-          upcoming: upcoming,
-          completed: completed
-        });
+              case 13:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 7, 10, 13]]);
+      })));
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "sortByCol", function (col) {
+        if (_this.state.sortColumn === col) {
+          _this.setState({
+            sortDesc: !_this.state.sortDesc
+          });
+        } else {
+          _this.setState({
+            sortColumn: col,
+            sortDesc: false
+          });
+        }
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getData", function () {
-        var auth = _this.props.auth;
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "validateEmail", function () {
+        var jobTypeEmail = _this.state.jobTypeEmail;
+        return !___default['default'].isEmpty(jobTypeEmail) && Helper$2.isEmail(jobTypeEmail);
+      });
 
-        _this.setState({
-          loadingAll: true
-        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
-          var res;
-          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "isJobTypeValid", function () {
+        var _this$state = _this.state,
+            jobTypeName = _this$state.jobTypeName,
+            jobTypeDescription = _this$state.jobTypeDescription;
+        if (___default['default'].isEmpty(jobTypeName)) return false;
+        if (!_this.validateEmail()) return false;
+        if (___default['default'].isEmpty(jobTypeDescription)) return false;
+        return true;
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onRemoveJobType", /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2(ev) {
+          var index, newJobTypes;
+          return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
             while (1) {
-              switch (_context.prev = _context.next) {
+              switch (_context2.prev = _context2.next) {
                 case 0:
-                  _context.prev = 0;
-                  _context.next = 3;
-                  return maintenanceActions.getJobs(auth.site);
+                  if (window.confirm("Are you sure you want to delete ".concat(ev.typeName, "?"))) {
+                    _context2.next = 2;
+                    break;
+                  }
 
-                case 3:
-                  res = _context.sent;
+                  return _context2.abrupt("return");
 
-                  // console.log('getData', res.data);
-                  _this.setState({
-                    loadingAll: false
+                case 2:
+                  _context2.prev = 2;
+                  _context2.next = 5;
+                  return maintenanceActions.deleteJobType(_this.props.auth.site, ev.id);
+
+                case 5:
+                  index = ___default['default'].findIndex(_this.state.jobList, function (job) {
+                    return job != null && job.id === ev.id;
                   });
 
-                  if (res.data != null && !___default['default'].isEmpty(res.data) && res.data[0].site === auth.site) {
-                    _this.props.jobsLoaded(res.data);
+                  if (index > -1) {
+                    newJobTypes = _toConsumableArray__default['default'](_this.state.jobList);
+                    newJobTypes[index].Deleted = true;
+
+                    _this.props.jobTypesLoaded(newJobTypes);
                   }
 
-                  _context.next = 12;
+                  _context2.next = 13;
                   break;
 
-                case 8:
-                  _context.prev = 8;
-                  _context.t0 = _context["catch"](0);
-                  console.error('getData', _context.t0);
-
-                  _this.setState({
-                    loadingAll: false
-                  });
+                case 9:
+                  _context2.prev = 9;
+                  _context2.t0 = _context2["catch"](2);
+                  console.error('onRemoveJobType', _context2.t0);
+                  alert('Something went wrong with the request. Please try again.');
 
-                case 12:
+                case 13:
                 case "end":
-                  return _context.stop();
+                  return _context2.stop();
               }
             }
-          }, _callee, null, [[0, 8]]);
-        })));
-      });
+          }, _callee2, null, [[2, 9]]);
+        }));
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onAddNew", function () {
-        var auth = _this.props.auth;
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }());
 
-        if (Session$3.validateAccess(auth.site, 'maintenanceTracking', auth)) {
-          _this.props.history.push("/requestsHub/job");
-        }
-      });
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onShowJobType", function () {
+        var job = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "canAddNew", function (isClass) {
-        var auth = _this.props.auth;
-        if (Session$3.validateAccess(auth.site, 'maintenanceTracking', auth)) return isClass ? '' : true;
-        return isClass ? ' hub-sideContent-topButton--hide' : false;
+        _this.setState({
+          showJobType: true,
+          jobTypeId: job ? job.id : null,
+          jobTypeName: job ? job.typeName : '',
+          jobTypeEmail: job ? job.email : '',
+          jobTypeDescription: job ? job.description : '',
+          jobTypeLevel: job ? job.level : 1
+        });
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getSideBarSectionColour", function (id) {
-        return _this.state.selectedSection === id ? {
-          backgroundColor: '#fff'
-        } : {};
-      });
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHideJobType", function () {
+        if (_this.state.submitting) return;
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderStats", function (stat, loading) {
-        return loading ? /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          style: styles$4.spinner,
-          name: "spinner fa-pulse fa-fw"
-        }) : stat;
+        _this.setState({
+          showWarnings: false,
+          showJobType: false,
+          jobTypeId: null,
+          jobTypeName: '',
+          jobTypeEmail: '',
+          jobTypeDescription: '',
+          jobTypeLevel: 1
+        });
       });
 
-      _this.state = {
-        selectedSection: 'upcoming',
-        location: '',
-        loadingAll: false,
-        loadingSubmissions: false,
-        submissionEntries: [],
-        allList: [],
-        completed: [],
-        upcoming: [],
-        now: moment__default['default'].utc(),
-        onlyFuture: true,
-        search: ''
-      };
-      return _this;
-    }
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandleChange", function (event) {
+        var stateChange = {};
+        stateChange[event.target.getAttribute('id')] = event.target.value;
 
-    _createClass__default['default'](RequestsHub, [{
-      key: "UNSAFE_componentWillMount",
-      value: function UNSAFE_componentWillMount() {
-        this.updateProps(this.props);
-      }
-    }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.getData();
-      }
-    }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        if (!___default['default'].isEqual(this.props.jobs, nextProps.jobs)) this.updateProps(nextProps);
-      }
-    }, {
-      key: "updateProps",
-      value: function updateProps(props) {
-        this.setState({
-          allList: props.jobs
-        }, this.setData);
-      }
-    }, {
-      key: "renderLeftBar",
-      value: function renderLeftBar() {
-        var _this2 = this;
+        _this.setState(stateChange);
+      });
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-sideContent"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-sideContent-topButton"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            paddingLeft: 15,
-            width: '100%'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fontMedium fontSize-32 text-dark",
-          style: styles$4.sideBarTitleSection
-        }, "Maintenance requests"), /*#__PURE__*/React__default['default'].createElement("div", {
-          onClick: function onClick() {
-            _this2.setState({
-              selectedSection: 'completed'
-            });
-          },
-          className: "sideBarSection",
-          style: this.getSideBarSectionColour('completed')
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fontMedium fontSize-36 text-dark",
-          style: {
-            lineHeight: '50px'
-          }
-        }, this.renderStats(this.state.completed.length, this.state.loadingAll)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fontRegular fontSize-16 text-light lineHeight-22"
-        }, "Complete")), /*#__PURE__*/React__default['default'].createElement("div", {
-          onClick: function onClick() {
-            _this2.setState({
-              selectedSection: 'upcoming'
-            });
-          },
-          className: "sideBarSection",
-          style: this.getSideBarSectionColour('upcoming')
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fontMedium fontSize-36 text-dark",
-          style: {
-            lineHeight: '50px'
-          }
-        }, this.renderStats(this.state.upcoming.length, this.state.loadingAll)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "fontRegular fontSize-16 text-light lineHeight-22"
-        }, "Incomplete"))));
-      }
-    }, {
-      key: "renderRight",
-      value: function renderRight() {
-        return /*#__PURE__*/React__default['default'].createElement(JobList$1, {
-          source: this.state.selectedSection === 'completed' ? this.state.completed : this.state.upcoming
-        });
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-wrapperContainer"
-        }, this.renderLeftBar(), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-headerContentWrapper"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$3.AddButton, {
-          onClick: this.onAddNew,
-          text: "NEW REQUEST"
-        })), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-contentWrapper"
-        }, this.renderRight())));
-      }
-    }]);
-
-    return RequestsHub;
-  }(React.Component);
-
-  var styles$4 = {
-    sideBarTitleSection: {
-      lineHeight: '40px',
-      marginTop: 30,
-      marginBottom: 30,
-      paddingLeft: 24,
-      paddingRight: 24
-    },
-    sideBarSection: {
-      weight: '100%',
-      minWidth: 200,
-      padding: 32,
-      paddingLeft: 24,
-      cursor: 'pointer',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center'
-    },
-    spinner: {
-      fontSize: 32,
-      color: FeatureConfig.env.colourBrandingOff
-    }
-  };
-
-  var mapStateToProps$3 = function mapStateToProps(state) {
-    var jobs = state.maintenance.jobs;
-    var auth = state.auth;
-    return {
-      jobs: jobs,
-      auth: auth
-    };
-  };
-
-  var RequestsHub$1 = reactRedux.connect(mapStateToProps$3, {
-    jobsLoaded: jobsLoaded
-  })(RequestsHub);
-
-  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-  function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSave", function () {
+        var site = _this.props.auth.site;
+        var _this$state2 = _this.state,
+            submitting = _this$state2.submitting,
+            jobTypeId = _this$state2.jobTypeId,
+            jobTypeName = _this$state2.jobTypeName,
+            jobTypeEmail = _this$state2.jobTypeEmail,
+            jobTypeDescription = _this$state2.jobTypeDescription,
+            jobTypeLevel = _this$state2.jobTypeLevel;
+        if (submitting) return;
 
-  function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var Apis = PlussCore__namespace.Apis,
-      Helper$2 = PlussCore__namespace.Helper,
-      Session$2 = PlussCore__namespace.Session,
-      Colours = PlussCore__namespace.Colours,
-      Components$2 = PlussCore__namespace.Components;
+        if (!_this.isJobTypeValid()) {
+          _this.setState({
+            showWarnings: true
+          });
 
-  var Job = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](Job, _Component);
+          return;
+        }
 
-    var _super = _createSuper$8(Job);
+        _this.setState({
+          submitting: true
+        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
+          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  _context3.prev = 0;
 
-    function Job(props) {
-      var _this;
+                  if (!jobTypeId) {
+                    _context3.next = 6;
+                    break;
+                  }
 
-      _classCallCheck__default['default'](this, Job);
+                  _context3.next = 4;
+                  return maintenanceActions.editJobType(site, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
 
-      _this = _super.call(this, props);
+                case 4:
+                  _context3.next = 8;
+                  break;
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJob", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
-        var res;
-        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+                case 6:
+                  _context3.next = 8;
+                  return maintenanceActions.addJobType(site, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
 
-              case 3:
-                res = _context.sent;
+                case 8:
+                  _this.props.jobTypesUpdate(site);
 
-                _this.setState({
-                  updating: false
-                });
+                  _this.setState({
+                    submitting: false
+                  }, _this.onHideJobType);
 
-                res.data.location = res.data.site;
+                  _context3.next = 17;
+                  break;
 
-                _this.setJob(res.data);
+                case 12:
+                  _context3.prev = 12;
+                  _context3.t0 = _context3["catch"](0);
+                  console.error('onSave', _context3.t0);
 
-                _context.next = 12;
-                break;
+                  _this.setState({
+                    submitting: false
+                  });
 
-              case 9:
-                _context.prev = 9;
-                _context.t0 = _context["catch"](0);
-                console.error('getJob', _context.t0);
+                  alert('Something went wrong with the request. Please try again.');
 
-              case 12:
-              case "end":
-                return _context.stop();
+                case 17:
+                case "end":
+                  return _context3.stop();
+              }
             }
-          }
-        }, _callee, null, [[0, 9]]);
-      })));
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setJob", function (job) {
-        job.typeIcon = job.type === 'General' ? 'wrench' : 'tree';
-        job.typeColour = job.type === 'General' ? '#666' : 'green';
-
-        if (___default['default'].isEmpty(job.lastActivity)) {
-          job.lastActivity = '-- --';
-          job.noActivity = true;
-        }
-
-        if (___default['default'].isEmpty(job.status)) {
-          job.status = 'Unassigned';
-          job.notStatus = true;
-        }
-
-        if (___default['default'].isEmpty(job.audience)) {
-          job.audience = [{
-            displayName: 'Unassigned',
-            isEmpty: true
-          }];
-        }
-
-        var needToMarkSeen = false;
+          }, _callee3, null, [[0, 12]]);
+        })));
+      });
 
-        if (!job.seen) {
-          job.seen = true;
-          needToMarkSeen = true;
-        }
+      _this.state = {
+        jobList: [],
+        showCompleted: false,
+        sortColumn: 'name',
+        sortDesc: false,
+        loading: true,
+        showJobType: false,
+        jobTypeId: null,
+        jobTypeName: '',
+        jobTypeEmail: '',
+        jobTypeDescription: '',
+        jobTypeLevel: 1,
+        showWarnings: false,
+        submitting: false
+      };
+      return _this;
+    }
 
-        _this.setState({
-          job: job
-        }, function () {
-          if (needToMarkSeen) _this.markSeen();
+    _createClass__default['default'](JobTypes, [{
+      key: "componentWillMount",
+      value: function componentWillMount() {
+        this.updateProps(this.props);
+        Session$3.checkLoggedIn(this, this.props.auth);
+      }
+    }, {
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.getJobTypes();
+      }
+    }, {
+      key: "componentWillReceiveProps",
+      value: function componentWillReceiveProps(nextProps) {
+        this.updateProps(nextProps);
+      }
+    }, {
+      key: "updateProps",
+      value: function updateProps(props) {
+        this.setState({
+          jobList: props.jobtypes
         });
+      }
+    }, {
+      key: "renderList",
+      value: function renderList() {
+        var _this2 = this;
 
-        _this.props.jobsLoaded([job]);
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "editJob", function () {});
+        var source = ___default['default'].sortBy(this.state.jobList, this.state.sortColumn);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "isReadyToSaveNote", function () {
-        var _this$state = _this.state,
-            noteAttachments = _this$state.noteAttachments,
-            noteInput = _this$state.noteInput;
-        if (___default['default'].some(noteAttachments, function (n) {
-          return n.Uploading;
-        })) return false;
-        return !___default['default'].isEmpty(noteInput) || !___default['default'].isEmpty(noteAttachments);
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenAddNote", function () {
-        _this.setState({
-          addNoteOpen: true,
-          editingNote: null
-        });
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCloseAddNote", function () {
-        var newState = {
-          addNoteOpen: false,
-          editingNote: null
-        };
-
-        if (!!_this.state.editingNote) {
-          newState.noteInput = '';
-          newState.noteAttachments = [];
-        }
-
-        _this.setState(newState);
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenNoteMenu", function (index) {
-        if (_this.state.noteMenuOpen === index) {
-          _this.setState({
-            noteMenuOpen: null
-          });
-        } else {
-          _this.setState({
-            noteMenuOpen: index
-          });
-        }
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandlePDFFileChange", function (event) {
-        var file = event.target.files[0];
-        if (!file || _this.state.uploadingNoteAttachment) return;
-
-        var noteAttachments = _toConsumableArray__default['default'](_this.state.noteAttachments);
-
-        var newAttachment = {
-          Uploading: true,
-          Title: file.name
-        };
-        noteAttachments.push(newAttachment);
-
-        _this.setState({
-          noteAttachments: noteAttachments
+        if (this.state.sortDesc) source.reverse();
+        source = ___default['default'].filter(source, function (ev) {
+          if (!ev) return false;
+          if (ev.Deleted) return false;
+          return true;
         });
+        return source.map(function (ev, index) {
+          if (ev != null) {
+            return /*#__PURE__*/React__default['default'].createElement("tr", {
+              key: index
+            }, /*#__PURE__*/React__default['default'].createElement("td", {
+              className: "table-TitleColumn"
+            }, /*#__PURE__*/React__default['default'].createElement("a", {
+              onClick: function onClick() {
+                return _this2.onShowJobType(ev);
+              }
+            }, ev.typeName)), /*#__PURE__*/React__default['default'].createElement("td", null, ev.description), /*#__PURE__*/React__default['default'].createElement("td", null, ev.email), /*#__PURE__*/React__default['default'].createElement("td", {
+              className: "table-options"
+            }, /*#__PURE__*/React__default['default'].createElement("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              }
+            }, Session$3.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React__default['default'].createElement("a", {
+              onClick: function onClick() {
+                return _this2.onShowJobType(ev);
+              }
+            }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+              style: {
+                fontSize: 20,
+                padding: 5,
+                marginLeft: 12,
+                cursor: 'pointer'
+              },
+              name: "pencil"
+            })), Session$3.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React__default['default'].createElement("a", {
+              onClick: function onClick() {
+                return _this2.onRemoveJobType(ev);
+              }
+            }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+              style: {
+                fontSize: 20,
+                padding: 5,
+                marginLeft: 8,
+                cursor: 'pointer'
+              },
+              name: "minus-circle"
+            })))));
+          }
 
-        Apis.fileActions.uploadMediaAsync(file, file.name).then(function (fileRes) {
-          newAttachment.Source = fileRes;
-          newAttachment.Uploading = false;
-
-          _this.setState({
-            noteAttachments: _toConsumableArray__default['default'](_this.state.noteAttachments)
-          });
-        }).catch(function (uploadErrorRes) {
-          console.log(uploadErrorRes);
-          newAttachment.Uploading = false;
-
-          _this.setState({
-            noteAttachments: _toConsumableArray__default['default'](_this.state.noteAttachments)
-          });
+          return null;
         });
-        event.target.value = '';
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onRemoveAttachment", function (a) {
-        var index = _this.state.noteAttachments.indexOf(a);
+      }
+    }, {
+      key: "renderView",
+      value: function renderView() {
+        var _this3 = this;
 
-        if (index > -1) {
-          var newAttachments = _toConsumableArray__default['default'](_this.state.noteAttachments);
+        return /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
+          className: "plussTable",
+          striped: true,
+          bordered: true,
+          condensed: true,
+          hover: true,
+          style: {
+            minWidth: '100%'
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+          style: {
+            cursor: 'pointer'
+          },
+          onClick: function onClick() {
+            return _this3.sortByCol('name');
+          }
+        }, "Request type"), /*#__PURE__*/React__default['default'].createElement("th", {
+          style: {
+            cursor: 'pointer'
+          },
+          onClick: function onClick() {
+            return _this3.sortByCol('name');
+          }
+        }, "Type Description"), /*#__PURE__*/React__default['default'].createElement("th", {
+          style: {
+            cursor: 'pointer'
+          },
+          onClick: function onClick() {
+            return _this3.sortByCol('email');
+          }
+        }, "Email"), /*#__PURE__*/React__default['default'].createElement("th", {
+          style: {
+            width: 70
+          }
+        }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.renderList()));
+      }
+    }, {
+      key: "renderEmpty",
+      value: function renderEmpty() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: 32
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "emptyState"
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-32",
+          style: {
+            maxWidth: 500,
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "fontRegular fontSize-13"
+        }, "Please add the many categories of request types that exist in your village which work alongside the Maintenance area.")), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-8 fontRegular fontSize-13",
+          style: {
+            maxWidth: 500,
+            textAlign: 'center'
+          }
+        }, "Examples might be; OH&S, Electrical, General. Remember to add a description too."));
+      }
+    }, {
+      key: "renderContent",
+      value: function renderContent() {
+        if (___default['default'].isEmpty(this.state.jobList)) return this.renderEmpty();
+        return this.renderView();
+      }
+    }, {
+      key: "renderJobTypes",
+      value: function renderJobTypes() {
+        var _this4 = this;
 
-          newAttachments.splice(index, 1);
+        var _this$state3 = this.state,
+            jobList = _this$state3.jobList,
+            loading = _this$state3.loading;
 
-          _this.setState({
-            noteAttachments: newAttachments
-          });
+        if (jobList.length === 0 && loading) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            style: {
+              minWidth: '100%'
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "padding-60 paddingVertical-40",
+            style: {
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+            style: {
+              fontSize: 30,
+              color: FeatureConfig.env.colourBrandingOff
+            },
+            name: "spinner fa-pulse fa-fw"
+          })));
         }
-      });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onConfirmAddNote", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
-        var res;
-        return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                if (_this.isReadyToSaveNote()) {
-                  _context2.next = 2;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 2:
-                _context2.prev = 2;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            minWidth: '100%'
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginBottom-32"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.AddButton, {
+          onClick: function onClick() {
+            return _this4.onShowJobType();
+          },
+          text: "NEW REQUEST TYPE"
+        })), this.renderContent());
+      }
+    }, {
+      key: "renderNewUserTypePopup",
+      value: function renderNewUserTypePopup() {
+        var _this5 = this;
 
-                _this.setState({
-                  submittingNote: true
-                });
+        var _this$state4 = this.state,
+            submitting = _this$state4.submitting,
+            showJobType = _this$state4.showJobType,
+            jobTypeId = _this$state4.jobTypeId,
+            showWarnings = _this$state4.showWarnings,
+            jobTypeName = _this$state4.jobTypeName,
+            jobTypeEmail = _this$state4.jobTypeEmail,
+            jobTypeDescription = _this$state4.jobTypeDescription;
+        if (!showJobType) return null;
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.Popup, {
+          maxWidth: 800,
+          hasPadding: true,
+          buttons: [{
+            type: 'primaryAction',
+            onClick: this.onSave,
+            isActive: !submitting && this.isJobTypeValid(),
+            text: submitting ? 'Saving...' : 'Save',
+            className: 'popupButton'
+          }, {
+            type: 'outlinedAction',
+            onClick: this.onHideJobType,
+            isActive: !submitting,
+            text: 'Cancel',
+            className: 'popupButton'
+          }],
+          onClose: this.onHideJobType,
+          title: jobTypeId ? 'Edit Request Type' : 'Create New Request Type'
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
+          id: "jobTypeName",
+          type: "text",
+          label: "Request type title",
+          placeholder: "Request type title",
+          value: jobTypeName,
+          onChange: this.onHandleChange,
+          isRequired: true,
+          isValid: function isValid() {
+            return !___default['default'].isEmpty(jobTypeName);
+          },
+          showError: function showError() {
+            return showWarnings && ___default['default'].isEmpty(jobTypeName);
+          },
+          alwaysShowLabel: true
+        }), /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
+          id: "jobTypeEmail",
+          type: "text",
+          label: "Email",
+          placeholder: "Request email",
+          help: "This is the email address that'll receive service requests of this type",
+          value: jobTypeEmail,
+          onChange: this.onHandleChange,
+          isRequired: true,
+          isValid: this.validateEmail,
+          showError: function showError() {
+            return showWarnings && !_this5.validateEmail();
+          },
+          alwaysShowLabel: true
+        }), /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
+          id: "jobTypeDescription",
+          type: "text",
+          label: "Description",
+          placeholder: "Add a description. ",
+          help: "This description will be visible to the people to help them select the correct request type.",
+          value: jobTypeDescription,
+          onChange: this.onHandleChange,
+          isRequired: true,
+          isValid: function isValid() {
+            return !___default['default'].isEmpty(jobTypeDescription);
+          },
+          showError: function showError() {
+            return showWarnings && ___default['default'].isEmpty(jobTypeDescription);
+          },
+          alwaysShowLabel: true
+        }));
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            minWidth: '100%'
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderJobTypes()), this.renderNewUserTypePopup(), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "hub_tidioPadding"
+        }));
+      }
+    }]);
 
-                _context2.next = 6;
-                return _this.state.editingNote ? maintenanceActions.editNote(_this.state.jobId, _this.state.editingNote, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
-                  return {
-                    Title: a.Title,
-                    Source: a.Source
-                  };
-                })) : maintenanceActions.addNote(_this.state.jobId, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
-                  return {
-                    Title: a.Title,
-                    Source: a.Source
-                  };
-                }));
+    return JobTypes;
+  }(React.Component);
 
-              case 6:
-                res = _context2.sent;
+  var mapStateToProps$3 = function mapStateToProps(state) {
+    var jobtypes = state.maintenance.jobtypes;
+    var auth = state.auth;
+    return {
+      jobtypes: jobtypes,
+      auth: auth
+    };
+  };
 
-                _this.setState({
-                  job: res.data.job,
-                  submittingNote: false,
-                  addNoteOpen: false,
-                  noteInput: '',
-                  noteAttachments: [],
-                  editingNote: null
-                }, function () {
-                  _this.props.jobsLoaded([_this.state.job]);
-                });
+  var JobTypes$1 = reactRedux.connect(mapStateToProps$3, {
+    jobTypesLoaded: jobTypesLoaded,
+    jobTypesUpdate: jobTypesUpdate
+  })(reactRouter.withRouter(JobTypes));
 
-                _context2.next = 13;
-                break;
+  function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
-              case 10:
-                _context2.prev = 10;
-                _context2.t0 = _context2["catch"](2);
-                console.error('onConfirmAddNote', _context2.t0);
+  function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  var Components$2 = PlussCore__namespace.Components,
+      Session$2 = PlussCore__namespace.Session;
 
-              case 13:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, null, [[2, 10]]);
-      })));
+  var RequestsHub = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](RequestsHub, _Component);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDeleteNote", function (n) {
-        if (!window.confirm('Are you sure you want to delete that note?')) {
-          _this.setState({
-            noteMenuOpen: null
-          });
+    var _super = _createSuper$8(RequestsHub);
 
-          return;
-        }
+    function RequestsHub(props) {
+      var _this;
 
-        maintenanceActions.deleteNote(_this.state.jobId, n.Id);
+      _classCallCheck__default['default'](this, RequestsHub);
 
-        var newNotes = ___default['default'].filter(_this.state.job.Notes, function (note) {
-          return note.Id !== n.Id;
-        });
+      _this = _super.call(this, props);
 
-        var newJob = _objectSpread$3({}, _this.state.job);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setData", function () {
+        var allList = [];
 
-        newJob.Notes = newNotes;
+        _this.state.allList.forEach(function (ev) {
+          if (ev != null && !ev.Deleted) allList.push(ev);
+        });
 
-        _this.setState({
-          job: newJob,
-          noteMenuOpen: null
+        var upcoming = ___default['default'].filter(allList, function (ev) {
+          if (!ev) return false;
+          if (ev.status && ev.status === 'Completed') return false;
+          return true;
         });
-      });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenEditNote", function (n) {
+        var completed = ___default['default'].filter(allList, function (ev) {
+          if (!ev) return false;
+          if (ev.status && ev.status === 'Completed') return true;
+          return false;
+        }); // console.log('setData', upcoming, completed);
+
+
         _this.setState({
-          noteAttachments: n.Attachments || [],
-          noteInput: n.Note || '',
-          addNoteOpen: true,
-          editingNote: n.Id,
-          noteMenuOpen: null
+          allList: allList,
+          upcoming: upcoming,
+          completed: completed
         });
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "markSeen", function () {
-        var job = _this.state.job;
-        var auth = _this.props.auth; // Must have maintenance permission and not the requester
-
-        if (!Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return;
-        if (auth.user.Id === job.userID) return;
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getData", function () {
+        var auth = _this.props.auth;
 
         _this.setState({
-          updating: true
-        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
-          var update;
-          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+          loadingAll: true
+        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+          var res;
+          return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
             while (1) {
-              switch (_context3.prev = _context3.next) {
+              switch (_context.prev = _context.next) {
                 case 0:
-                  _context3.prev = 0;
-                  update = {
-                    id: job.id,
-                    seen: true,
-                    status: job.status || 'Unassigned'
-                  };
-                  _context3.next = 4;
-                  return maintenanceActions.editJob(update, auth.site);
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return maintenanceActions.getJobs(auth.site);
 
-                case 4:
-                  _context3.next = 11;
+                case 3:
+                  res = _context.sent;
+
+                  // console.log('getData', res.data);
+                  _this.setState({
+                    loadingAll: false
+                  });
+
+                  if (res.data != null && !___default['default'].isEmpty(res.data) && res.data[0].site === auth.site) {
+                    _this.props.jobsLoaded(res.data);
+                  }
+
+                  _context.next = 12;
                   break;
 
-                case 6:
-                  _context3.prev = 6;
-                  _context3.t0 = _context3["catch"](0);
+                case 8:
+                  _context.prev = 8;
+                  _context.t0 = _context["catch"](0);
+                  console.error('getData', _context.t0);
 
                   _this.setState({
-                    updating: false
+                    loadingAll: false
                   });
 
-                  console.log('markSeen error', _context3.t0);
-                  alert('Something went wrong with the request. Please try again.');
-
-                case 11:
+                case 12:
                 case "end":
-                  return _context3.stop();
+                  return _context.stop();
               }
             }
-          }, _callee3, null, [[0, 6]]);
+          }, _callee, null, [[0, 8]]);
         })));
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getComments", function () {
-        reactionActions.getComments(_this.state.jobId, 'maintenancerequest', 0).then(function (res) {
-          _this.setState({
-            comments: res.data
-          });
-        });
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onAddNew", function () {
+        var auth = _this.props.auth;
+
+        if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) {
+          _this.props.history.push("/requestsHub/job");
+        }
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onAddComment", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
-        var _this$state2, commentInput, jobId, job, comments, res;
-
-        return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                _this$state2 = _this.state, commentInput = _this$state2.commentInput, jobId = _this$state2.jobId, job = _this$state2.job, comments = _this$state2.comments;
-                _context4.prev = 1;
-
-                _this.setState({
-                  commentInput: ''
-                });
-
-                _context4.next = 5;
-                return reactionActions.addComment(jobId, 'maintenancerequest', job.title, job.site, commentInput);
-
-              case 5:
-                res = _context4.sent;
-
-                _this.setState({
-                  comments: [].concat(_toConsumableArray__default['default'](comments), [res.data])
-                });
-
-                _context4.next = 12;
-                break;
-
-              case 9:
-                _context4.prev = 9;
-                _context4.t0 = _context4["catch"](1);
-                console.error('onAddComment', _context4.t0);
-
-              case 12:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4, null, [[1, 9]]);
-      })));
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandleChange", function (event) {
-        var stateChange = {};
-        stateChange[event.target.getAttribute('id')] = event.target.value;
-
-        _this.setState(stateChange);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "canAddNew", function (isClass) {
+        var auth = _this.props.auth;
+        if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return isClass ? '' : true;
+        return isClass ? ' hub-sideContent-topButton--hide' : false;
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStatusChanger", function () {
-        _this.setState({
-          statusChangerOpen: !_this.state.statusChangerOpen
-        });
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getSideBarSectionColour", function (id) {
+        return _this.state.selectedSection === id ? {
+          backgroundColor: '#fff'
+        } : {};
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectStatus", /*#__PURE__*/function () {
-        var _ref5 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee5(status) {
-          var res;
-          return _regeneratorRuntime__default['default'].wrap(function _callee5$(_context5) {
-            while (1) {
-              switch (_context5.prev = _context5.next) {
-                case 0:
-                  _this.setState({
-                    job: _objectSpread$3(_objectSpread$3({}, _this.state.job), {}, {
-                      status: status
-                    }),
-                    statusChangerOpen: false
-                  });
-
-                  _context5.prev = 1;
-                  _context5.next = 4;
-                  return maintenanceActions.editJobStatus(_this.state.job.id, status);
-
-                case 4:
-                  res = _context5.sent;
-
-                  _this.setState({
-                    job: res.data.job
-                  }, function () {
-                    _this.props.jobsLoaded([_this.state.job]);
-                  });
-
-                  _context5.next = 11;
-                  break;
-
-                case 8:
-                  _context5.prev = 8;
-                  _context5.t0 = _context5["catch"](1);
-                  console.error('onSelectStatus', _context5.t0);
-
-                case 11:
-                case "end":
-                  return _context5.stop();
-              }
-            }
-          }, _callee5, null, [[1, 8]]);
-        }));
-
-        return function (_x) {
-          return _ref5.apply(this, arguments);
-        };
-      }());
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "renderStats", function (stat, loading) {
+        return loading ? /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          style: styles$4.spinner,
+          name: "spinner fa-pulse fa-fw"
+        }) : stat;
+      });
 
       _this.state = {
-        jobId: Helper$2.safeReadParams(props, 'jobId') ? props.match.params.jobId : null,
-        job: null,
-        showingSelector: false,
-        updating: false,
-        comments: [],
-        commentInput: '',
-        loadingComments: false,
-        statusChangerOpen: false,
-        addNoteOpen: false,
-        noteAttachments: [],
-        noteInput: ''
+        selectedSection: 'all',
+        location: '',
+        loadingAll: false,
+        loadingSubmissions: false,
+        submissionEntries: [],
+        allList: [],
+        completed: [],
+        upcoming: [],
+        now: moment__default['default'].utc(),
+        onlyFuture: true,
+        search: ''
       };
       return _this;
     }
 
-    _createClass__default['default'](Job, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        Session$2.checkLoggedIn(this, this.props.auth);
+    _createClass__default['default'](RequestsHub, [{
+      key: "UNSAFE_componentWillMount",
+      value: function UNSAFE_componentWillMount() {
+        this.updateProps(this.props);
       }
     }, {
       key: "componentDidMount",
       value: function componentDidMount() {
-        if (this.state.jobId) {
-          this.getJob();
-          this.getComments();
-        }
+        this.getData();
       }
     }, {
-      key: "renderStatusLabel",
-      value: function renderStatusLabel() {
-        if (!this.state.job.status) return null;
-        var auth = this.props.auth;
-
-        if (Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "statusLabel pointer",
-            onClick: this.onToggleStatusChanger,
-            style: {
-              backgroundColor: StatusTypes[this.state.job.status].color
-            }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "statusLabel_text"
-          }, StatusTypes[this.state.job.status].text), this.renderStatusChanger());
-        }
-
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "statusLabel",
-          style: {
-            backgroundColor: StatusTypes[this.state.job.status].color
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "statusLabel_text"
-        }, StatusTypes[this.state.job.status].text));
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
+        if (!___default['default'].isEqual(this.props.jobs, nextProps.jobs)) this.updateProps(nextProps);
       }
     }, {
-      key: "renderNotesButton",
-      value: function renderNotesButton() {
-        var auth = this.props.auth;
-        if (!Session$2.validateAccess(auth.site, 'maintenanceTracking', auth)) return null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "statusLabel pointer",
-          onClick: this.onOpenAddNote,
-          style: {
-            backgroundColor: FeatureConfig.env.colourBrandingMain,
-            marginLeft: 8
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "statusLabel_text"
-        }, "Add Note"));
+      key: "updateProps",
+      value: function updateProps(props) {
+        this.setState({
+          allList: props.jobs
+        }, this.setData);
       }
     }, {
-      key: "renderStatusChanger",
-      value: function renderStatusChanger() {
+      key: "renderLeftBar",
+      value: function renderLeftBar() {
         var _this2 = this;
 
-        if (!this.state.statusChangerOpen) return null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "statusChanger statusChanger-maintenance"
-        }, Object.keys(StatusTypes).map(function (statusKey) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            key: statusKey,
-            className: "statusLabel",
+        var sectionItems = [];
+
+        if (this.canAddNew()) {
+          sectionItems.push({
+            type: 'newButton',
+            text: 'New Request',
+            onClick: this.onAddNew
+          });
+        }
+
+        sectionItems.push({
+          type: 'navItem',
+          text: 'View Requests',
+          icon: 'eye',
+          isFontAwesome: true,
+          selected: this.state.selectedSection === 'all',
+          onClick: function onClick() {
+            _this2.setState({
+              selectedSection: 'all'
+            });
+          }
+        });
+
+        if (Session$2.validateAccess(this.props.auth.site, 'maintenanceTypes', this.props.auth)) {
+          sectionItems.push({
+            type: 'navItem',
+            text: 'Request Types',
+            // icon: 'maintenance2',
+            // isSVG: true,
+            selected: this.state.selectedSection === 'requestTypes',
             onClick: function onClick() {
-              return _this2.onSelectStatus(statusKey);
-            },
-            style: {
-              backgroundColor: StatusTypes[statusKey].color
+              _this2.setState({
+                selectedSection: 'requestTypes'
+              });
             }
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
-            className: "statusLabel_text"
-          }, StatusTypes[statusKey].text));
-        }));
+          });
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.HubSidebar, {
+          sections: [{
+            title: 'Requests',
+            items: sectionItems
+          }]
+        });
       }
     }, {
-      key: "renderComment",
-      value: function renderComment(c) {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          key: c.Id,
-          className: "comment"
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "comment_text"
-        }, Helper$2.toParagraphed(c.Comment)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "comment_bottom"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.ProfilePic, {
-          className: "comment_profilePic",
-          size: 25,
-          image: c.User.profilePic
-        }), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "comment_name"
-        }, c.User.displayName), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "comment_time"
-        }, moment__default['default'].utc(c.Timestamp).local().format('D MMM YYYY • h:mma'))));
+      key: "renderRight",
+      value: function renderRight() {
+        if (this.state.selectedSection === 'requestTypes') {
+          return /*#__PURE__*/React__default['default'].createElement(JobTypes$1, null);
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(JobList$1, {
+          source: this.state.allList
+        });
       }
     }, {
-      key: "renderCommentSection",
-      value: function renderCommentSection() {
-        var _this3 = this;
-
-        if (this.state.loadingComments) return null;
+      key: "render",
+      value: function render() {
         return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-60 paddingLeft-20"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "newTopBar paddingLeft-40"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "formTitleSmall",
-          className: "marginBottom-16"
-        }, "Comments"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "commentSection"
-        }, this.state.comments.map(function (c) {
-          return _this3.renderComment(c);
-        })), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "commentReply"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "commentReply_button".concat(!___default['default'].isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''),
-          onClick: this.onAddComment
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          className: "commentReply_icon",
-          name: "paper-plane-o"
-        })), /*#__PURE__*/React__default['default'].createElement(Textarea__default['default'], {
-          id: "commentInput",
-          placeholder: "Reply here...",
-          type: "text",
-          className: "commentReply_input",
-          value: this.state.commentInput,
-          onChange: function onChange(e) {
-            return _this3.onHandleChange(e);
-          }
-        }))));
-      }
-    }, {
-      key: "renderInner",
-      value: function renderInner() {
-        if (this.state.job == null) return null;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            paddingBottom: 40
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-60 paddingVertical-40 bottomDivideBorder relative"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "formTitleLarge",
-          className: "marginBottom-24"
-        }, this.state.job.title || 'Request'), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Request date"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, moment__default['default'].utc(this.state.job.createdTime).local().format('D MMM YY'))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Type"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.type)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Location"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.room)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Description ", this.state.job.image ? '- (image supplied)' : ''), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.description))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "formTitleSmall",
-          className: "marginBottom-16"
-        }, "Contact Details"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Name"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.userName)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Contact number"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, ___default['default'].isEmpty(this.state.job.phone) ? 'No phone provided' : this.state.job.phone)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "Should person be home?"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.isHome ? 'Yes' : 'No')), this.state.job.isHome && this.state.job.homeText && /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-16"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fieldLabel'
-        }, "When"), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: 'fontRegular fontSize-16 text-dark marginTop-5'
-        }, this.state.job.homeText))), (this.state.job.image || this.state.job.images) && /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "formTitleSmall",
-          className: "marginBottom-16"
-        }, "Image"), /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            marginTop: 16,
-            height: 180,
-            width: 260,
-            borderRadius: 4,
-            border: '1px solid #aaa',
-            backgroundColor: '#ddd',
-            backgroundImage: "url(".concat(this.state.job.thumbnail, ")"),
-            backgroundPosition: 'center'
-          }
-        })), this.renderCommentSection());
+          className: "hub-wrapperContainer"
+        }, this.renderLeftBar(), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "hub-headerContentWrapper"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Header, null), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "hub-contentWrapper"
+        }, this.renderRight())));
       }
-    }, {
-      key: "renderHistoryEntry",
-      value: function renderHistoryEntry(e, i) {
-        var job = this.state.job;
-        var entryToUse = e || {
-          timestamp: job.createdTime,
-          status: 'Unassigned',
-          user: {
-            displayName: job.userName,
-            id: job.userID,
-            profilePic: job.userProfilePic
+    }]);
+
+    return RequestsHub;
+  }(React.Component);
+
+  var styles$4 = {
+    sideBarTitleSection: {
+      lineHeight: '40px',
+      marginTop: 30,
+      marginBottom: 30,
+      paddingLeft: 24,
+      paddingRight: 24
+    },
+    sideBarSection: {
+      weight: '100%',
+      minWidth: 200,
+      padding: 32,
+      paddingLeft: 24,
+      cursor: 'pointer',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center'
+    },
+    spinner: {
+      fontSize: 32,
+      color: FeatureConfig.env.colourBrandingOff
+    }
+  };
+
+  var mapStateToProps$2 = function mapStateToProps(state) {
+    var jobs = state.maintenance.jobs;
+    var auth = state.auth;
+    return {
+      jobs: jobs,
+      auth: auth
+    };
+  };
+
+  var RequestsHub$1 = reactRedux.connect(mapStateToProps$2, {
+    jobsLoaded: jobsLoaded
+  })(reactRouter.withRouter(RequestsHub));
+
+  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+  function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+
+  function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+  var Apis = PlussCore__namespace.Apis,
+      Helper$1 = PlussCore__namespace.Helper,
+      Session$1 = PlussCore__namespace.Session,
+      Colours = PlussCore__namespace.Colours,
+      Components$1 = PlussCore__namespace.Components;
+
+  var Job = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](Job, _Component);
+
+    var _super = _createSuper$7(Job);
+
+    function Job(props) {
+      var _this;
+
+      _classCallCheck__default['default'](this, Job);
+
+      _this = _super.call(this, props);
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJob", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+        var res;
+        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+
+              case 3:
+                res = _context.sent;
+
+                _this.setState({
+                  updating: false
+                });
+
+                res.data.location = res.data.site;
+
+                _this.setJob(res.data);
+
+                _context.next = 12;
+                break;
+
+              case 9:
+                _context.prev = 9;
+                _context.t0 = _context["catch"](0);
+                console.error('getJob', _context.t0);
+
+              case 12:
+              case "end":
+                return _context.stop();
+            }
           }
+        }, _callee, null, [[0, 9]]);
+      })));
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setJob", function (job) {
+        job.typeIcon = job.type === 'General' ? 'wrench' : 'tree';
+        job.typeColour = job.type === 'General' ? '#666' : 'green';
+
+        if (___default['default'].isEmpty(job.lastActivity)) {
+          job.lastActivity = '-- --';
+          job.noActivity = true;
+        }
+
+        if (___default['default'].isEmpty(job.status)) {
+          job.status = 'Unassigned';
+          job.notStatus = true;
+        }
+
+        if (___default['default'].isEmpty(job.audience)) {
+          job.audience = [{
+            displayName: 'Unassigned',
+            isEmpty: true
+          }];
+        }
+
+        var needToMarkSeen = false;
+
+        if (!job.seen) {
+          job.seen = true;
+          needToMarkSeen = true;
+        }
+
+        _this.setState({
+          job: job
+        }, function () {
+          if (needToMarkSeen) _this.markSeen();
+        });
+
+        _this.props.jobsLoaded([job]);
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "editJob", function () {});
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "isReadyToSaveNote", function () {
+        var _this$state = _this.state,
+            noteAttachments = _this$state.noteAttachments,
+            noteInput = _this$state.noteInput;
+        if (___default['default'].some(noteAttachments, function (n) {
+          return n.Uploading;
+        })) return false;
+        return !___default['default'].isEmpty(noteInput) || !___default['default'].isEmpty(noteAttachments);
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenAddNote", function () {
+        _this.setState({
+          addNoteOpen: true,
+          editingNote: null
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCloseAddNote", function () {
+        var newState = {
+          addNoteOpen: false,
+          editingNote: null
         };
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "ticketHistoryEntry",
-          key: i
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "ticketHistoryEntry_timestamp"
-        }, moment__default['default'].utc(entryToUse.timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "statusLabel statusLabel-large statusLabel-full",
-          style: {
-            backgroundColor: StatusTypes[entryToUse.status].color
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "statusLabel_text"
-        }, e ? "Marked as ".concat(StatusTypes[entryToUse.status].text) : 'Job opened')));
-      }
-    }, {
-      key: "renderNote",
-      value: function renderNote(note, index) {
-        var _this4 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "ticketHistoryEntry",
-          key: index
-        }, /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "ticketHistoryEntry_timestamp"
-        }, moment__default['default'].utc(note.Timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "statusLabel statusLabel-large statusLabel-full",
-          style: {
-            backgroundColor: '#6e79c5'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "statusLabel_text"
-        }, "Staff Notes")), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "maintenanceNote"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "maintenanceNote_top"
-        }, this.props.auth && this.props.auth.user && this.props.auth.user.Id === note.User.id && /*#__PURE__*/React__default['default'].createElement(Components$2.SVGIcon, {
-          colour: Colours.COLOUR_DUSK_LIGHT,
-          icon: "more15",
-          className: "maintenanceNote_moreIcon",
-          onClick: function onClick() {
-            return _this4.onOpenNoteMenu(index);
-          }
-        }), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "maintenanceNote_name"
-        }, note.User.displayName), this.state.noteMenuOpen === index && /*#__PURE__*/React__default['default'].createElement(Components$2.MoreMenu, {
-          options: [{
-            key: 'edit',
-            text: 'Edit',
-            onPress: function onPress() {
-              return _this4.onOpenEditNote(note);
-            }
-          }, {
-            key: 'delete',
-            text: 'Delete',
-            onPress: function onPress() {
-              return _this4.onDeleteNote(note);
-            }
-          }]
-        })), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "maintenanceNote_text"
-        }, Helper$2.toParagraphed(note.Note)), note.Attachments.map(function (a, i) {
-          return _this4.renderAttachment(a, i);
-        })));
-      }
-    }, {
-      key: "renderOverview",
-      value: function renderOverview() {
-        var _this5 = this;
+        if (!!_this.state.editingNote) {
+          newState.noteInput = '';
+          newState.noteAttachments = [];
+        }
+
+        _this.setState(newState);
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenNoteMenu", function (index) {
+        if (_this.state.noteMenuOpen === index) {
+          _this.setState({
+            noteMenuOpen: null
+          });
+        } else {
+          _this.setState({
+            noteMenuOpen: index
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandlePDFFileChange", function (event) {
+        var file = event.target.files[0];
+        if (!file || _this.state.uploadingNoteAttachment) return;
+
+        var noteAttachments = _toConsumableArray__default['default'](_this.state.noteAttachments);
+
+        var newAttachment = {
+          Uploading: true,
+          Title: file.name
+        };
+        noteAttachments.push(newAttachment);
+
+        _this.setState({
+          noteAttachments: noteAttachments
+        });
+
+        Apis.fileActions.uploadMediaAsync(file, file.name).then(function (fileRes) {
+          newAttachment.Source = fileRes;
+          newAttachment.Uploading = false;
+
+          _this.setState({
+            noteAttachments: _toConsumableArray__default['default'](_this.state.noteAttachments)
+          });
+        }).catch(function (uploadErrorRes) {
+          console.log(uploadErrorRes);
+          newAttachment.Uploading = false;
+
+          _this.setState({
+            noteAttachments: _toConsumableArray__default['default'](_this.state.noteAttachments)
+          });
+        });
+        event.target.value = '';
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onRemoveAttachment", function (a) {
+        var index = _this.state.noteAttachments.indexOf(a);
+
+        if (index > -1) {
+          var newAttachments = _toConsumableArray__default['default'](_this.state.noteAttachments);
+
+          newAttachments.splice(index, 1);
+
+          _this.setState({
+            noteAttachments: newAttachments
+          });
+        }
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onConfirmAddNote", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+        var res;
+        return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (_this.isReadyToSaveNote()) {
+                  _context2.next = 2;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 2:
+                _context2.prev = 2;
+
+                _this.setState({
+                  submittingNote: true
+                });
+
+                _context2.next = 6;
+                return _this.state.editingNote ? maintenanceActions.editNote(_this.state.jobId, _this.state.editingNote, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
+                  return {
+                    Title: a.Title,
+                    Source: a.Source
+                  };
+                })) : maintenanceActions.addNote(_this.state.jobId, _this.state.noteInput, _this.state.noteAttachments.map(function (a) {
+                  return {
+                    Title: a.Title,
+                    Source: a.Source
+                  };
+                }));
 
-        var job = this.state.job;
-        if (!job || !job.history) return null;
+              case 6:
+                res = _context2.sent;
 
-        var source = ___default['default'].sortBy([].concat(_toConsumableArray__default['default'](job.history.map(function (e) {
-          return _objectSpread$3(_objectSpread$3({}, e), {}, {
-            EntryType: 'status'
-          });
-        })), _toConsumableArray__default['default']((job.Notes || []).map(function (e) {
-          return _objectSpread$3(_objectSpread$3({}, e), {}, {
-            timestamp: e.Timestamp,
-            EntryType: 'note'
-          });
-        }))), 'timestamp');
+                _this.setState({
+                  job: res.data.job,
+                  submittingNote: false,
+                  addNoteOpen: false,
+                  noteInput: '',
+                  noteAttachments: [],
+                  editingNote: null
+                }, function () {
+                  _this.props.jobsLoaded([_this.state.job]);
+                });
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-32 paddingVertical-40 bottomDivideBorder relative"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "newTopBar clearfix flex flex-reverse"
-        }, this.renderNotesButton(), this.renderStatusLabel(), /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "formTitleSmall",
-          className: "flex-1"
-        }, "Status History")), this.renderHistoryEntry(null, -1), ___default['default'].map(source, function (e, i) {
-          switch (e.EntryType) {
-            case 'status':
-              return _this5.renderHistoryEntry(e, i);
+                _context2.next = 13;
+                break;
 
-            case 'note':
-              return _this5.renderNote(e, i);
-          }
-        }));
-      }
-    }, {
-      key: "renderButtons",
-      value: function renderButtons() {
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
-          inline: true,
-          buttonType: "tertiary",
-          onClick: function onClick() {
-            window.history.back();
-          },
-          isActive: true,
-          style: {
-            marginRight: 16
+              case 10:
+                _context2.prev = 10;
+                _context2.t0 = _context2["catch"](2);
+                console.error('onConfirmAddNote', _context2.t0);
+
+              case 13:
+              case "end":
+                return _context2.stop();
+            }
           }
-        }, "Back"), Session$2.validateAccess(this.props.auth.site, 'maintenanceTracking', this.props.auth) && !___default['default'].isEmpty(this.state.job) && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
-          to: "/requestsHub/job/".concat(this.state.jobId)
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
-          inline: true,
-          style: {
-            marginRight: 25
-          },
-          buttonType: "outlined",
-          isActive: true,
-          onClick: this.editJob
-        }, "Edit Details")));
-      }
-    }, {
-      key: "renderAttachment",
-      value: function renderAttachment(attachment, index, onRemove) {
-        if (!attachment) return null;
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.Attachment, {
-          key: index,
-          uploading: attachment.Uploading,
-          source: attachment.Source,
-          title: attachment.Title,
-          onRemove: onRemove ? function () {
-            return onRemove(attachment);
-          } : undefined
-        });
-      }
-    }, {
-      key: "renderAddNotePopup",
-      value: function renderAddNotePopup() {
-        var _this6 = this;
+        }, _callee2, null, [[2, 10]]);
+      })));
 
-        if (!this.state.addNoteOpen) return null;
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDeleteNote", function (n) {
+        if (!window.confirm('Are you sure you want to delete that note?')) {
+          _this.setState({
+            noteMenuOpen: null
+          });
 
-        if (this.state.submittingNote) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
-            title: "Saving Note",
-            maxWidth: 600,
-            hasPadding: true
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "flex flex-center-row"
-          }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-            className: "spinner",
-            name: "spinner fa-pulse fa-fw"
-          })));
+          return;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
-          title: "".concat(this.state.editingNote ? 'Edit' : 'Add', " Note"),
-          onClose: this.onCloseAddNote,
-          maxWidth: 600,
-          hasPadding: true,
-          buttons: [{
-            type: 'primary',
-            onClick: this.onConfirmAddNote,
-            isActive: this.isReadyToSaveNote(),
-            text: 'Save'
-          }, {
-            type: 'tertiary',
-            onClick: this.onCloseAddNote,
-            isActive: true,
-            text: 'Cancel'
-          }]
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
-          id: "noteInput",
-          type: "textarea",
-          componentClass: "textarea",
-          value: this.state.noteInput,
-          placeholder: "Enter note",
-          onChange: function onChange(e) {
-            return _this6.onHandleChange(e);
-          },
-          inputStyle: {
-            width: 400
-          }
-        }), /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
-          type: "h5"
-        }, "Attachments"), this.state.noteAttachments.map(function (a, i) {
-          return _this6.renderAttachment(a, i, _this6.onRemoveAttachment);
-        }), /*#__PURE__*/React__default['default'].createElement("input", {
-          ref: function ref(input) {
-            return _this6.attachmentInput = input;
-          },
-          id: "attachmentInput",
-          type: "file",
-          className: "fileInput",
-          onChange: function onChange(e) {
-            return _this6.onHandlePDFFileChange(e);
-          },
-          accept: "application/pdf"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "iconTextButton",
-          onClick: function onClick() {
-            _this6.attachmentInput.click();
-          }
-        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-          className: "iconTextButton_icon",
-          name: "paperclip"
-        }), /*#__PURE__*/React__default['default'].createElement("p", {
-          className: "iconTextButton_text"
-        }, "Add Attachment")));
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPage, null, this.renderAddNotePopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageContents, null, /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageSection, {
-          className: "pageSectionWrapper--newPopup"
-        }, this.renderInner()), /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageSection, {
-          className: "pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth"
-        }, this.renderOverview())), /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageBottomButtons, null, this.renderButtons()));
-      }
-    }]);
-
-    return Job;
-  }(React.Component);
+        maintenanceActions.deleteNote(_this.state.jobId, n.Id);
 
-  var mapStateToProps$2 = function mapStateToProps(state) {
-    var auth = state.auth;
-    return {
-      auth: auth
-    };
-  };
+        var newNotes = ___default['default'].filter(_this.state.job.Notes, function (note) {
+          return note.Id !== n.Id;
+        });
 
-  var Job$1 = reactRedux.connect(mapStateToProps$2, {
-    jobsLoaded: jobsLoaded
-  })(reactRouter.withRouter(Job));
+        var newJob = _objectSpread$3({}, _this.state.job);
 
-  function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+        newJob.Notes = newNotes;
 
-  function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var Actions = PlussCore__namespace.Actions,
-      Components$1 = PlussCore__namespace.Components,
-      Helper$1 = PlussCore__namespace.Helper,
-      Session$1 = PlussCore__namespace.Session;
+        _this.setState({
+          job: newJob,
+          noteMenuOpen: null
+        });
+      });
 
-  var AddJob = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](AddJob, _Component);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onOpenEditNote", function (n) {
+        _this.setState({
+          noteAttachments: n.Attachments || [],
+          noteInput: n.Note || '',
+          addNoteOpen: true,
+          editingNote: n.Id,
+          noteMenuOpen: null
+        });
+      });
 
-    var _super = _createSuper$7(AddJob);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "markSeen", function () {
+        var job = _this.state.job;
+        var auth = _this.props.auth; // Must have maintenance permission and not the requester
 
-    function AddJob(props) {
-      var _this;
+        if (!Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) return;
+        if (auth.user.Id === job.userID) return;
 
-      _classCallCheck__default['default'](this, AddJob);
+        _this.setState({
+          updating: true
+        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
+          var update;
+          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  _context3.prev = 0;
+                  update = {
+                    id: job.id,
+                    seen: true,
+                    status: job.status || 'Unassigned'
+                  };
+                  _context3.next = 4;
+                  return maintenanceActions.editJob(update, auth.site);
 
-      _this = _super.call(this, props);
+                case 4:
+                  _context3.next = 11;
+                  break;
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJob", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
-        var res;
-        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                _context.next = 3;
-                return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
+                case 6:
+                  _context3.prev = 6;
+                  _context3.t0 = _context3["catch"](0);
 
-              case 3:
-                res = _context.sent;
-                res.data.location = res.data.site;
+                  _this.setState({
+                    updating: false
+                  });
 
-                _this.setState(res.data);
+                  console.log('markSeen error', _context3.t0);
+                  alert('Something went wrong with the request. Please try again.');
 
-                _context.next = 11;
-                break;
+                case 11:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3, null, [[0, 6]]);
+        })));
+      });
 
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](0);
-                console.error('getJob', _context.t0);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getComments", function () {
+        reactionActions.getComments(_this.state.jobId, 'maintenancerequest', 0).then(function (res) {
+          _this.setState({
+            comments: res.data
+          });
+        });
+      });
 
-              case 11:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 8]]);
-      })));
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onAddComment", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
+        var _this$state2, commentInput, jobId, job, comments, res;
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
-        var res;
-        return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
-                _context2.prev = 0;
-                _context2.next = 3;
-                return maintenanceActions.getJobTypes(_this.props.auth.site);
-
-              case 3:
-                res = _context2.sent;
+                _this$state2 = _this.state, commentInput = _this$state2.commentInput, jobId = _this$state2.jobId, job = _this$state2.job, comments = _this$state2.comments;
+                _context4.prev = 1;
 
                 _this.setState({
-                  types: res.data
+                  commentInput: ''
                 });
 
-                _this.getDefaultJob();
+                _context4.next = 5;
+                return reactionActions.addComment(jobId, 'maintenancerequest', job.title, job.site, commentInput);
 
-                _context2.next = 11;
+              case 5:
+                res = _context4.sent;
+
+                _this.setState({
+                  comments: [].concat(_toConsumableArray__default['default'](comments), [res.data])
+                });
+
+                _context4.next = 12;
                 break;
 
-              case 8:
-                _context2.prev = 8;
-                _context2.t0 = _context2["catch"](0);
-                console.error('getJobTypes', _context2.t0);
+              case 9:
+                _context4.prev = 9;
+                _context4.t0 = _context4["catch"](1);
+                console.error('onAddComment', _context4.t0);
 
-              case 11:
+              case 12:
               case "end":
-                return _context2.stop();
+                return _context4.stop();
             }
           }
-        }, _callee2, null, [[0, 8]]);
+        }, _callee4, null, [[1, 9]]);
       })));
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getDefaultJob", function () {
-        if (_this.state.types.length !== 0 && _this.state.jobId == null) {
-          _this.setState({
-            type: _this.state.types[0].typeName
-          });
-        }
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectType", function (key, e) {
-        _this.setState({
-          type: key
-        });
-      });
-
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHandleChange", function (event) {
         var stateChange = {};
         stateChange[event.target.getAttribute('id')] = event.target.value;
@@ -2125,348 +2029,534 @@
         _this.setState(stateChange);
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSave", function () {
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onToggleStatusChanger", function () {
         _this.setState({
-          showWarnings: false
+          statusChangerOpen: !_this.state.statusChangerOpen
         });
+      });
 
-        if (!_this.validateForm()) {
-          _this.setState({
-            showWarnings: true
-          });
-
-          return;
-        }
-
-        if (_this.state.updating) return;
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectStatus", /*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee5(status) {
+          var res;
+          return _regeneratorRuntime__default['default'].wrap(function _callee5$(_context5) {
+            while (1) {
+              switch (_context5.prev = _context5.next) {
+                case 0:
+                  _this.setState({
+                    job: _objectSpread$3(_objectSpread$3({}, _this.state.job), {}, {
+                      status: status
+                    }),
+                    statusChangerOpen: false
+                  });
 
-        _this.setState({
-          updating: true
-        });
+                  _context5.prev = 1;
+                  _context5.next = 4;
+                  return maintenanceActions.editJobStatus(_this.state.job.id, status);
 
-        var job = {
-          id: _this.state.id,
-          userID: _this.state.userID,
-          userName: _this.state.userName,
-          room: _this.state.room,
-          phone: _this.state.phone,
-          location: _this.state.location,
-          title: _this.state.title,
-          description: _this.state.description,
-          isHome: _this.state.isHome,
-          homeText: _this.state.homeText,
-          type: _this.state.type,
-          date: null,
-          image: _this.state.image
-        };
+                case 4:
+                  res = _context5.sent;
 
-        if (_this.state.id != null) {
-          maintenanceActions.editJob(job, _this.props.auth.site).then(function (res) {
-            _this.setState({
-              success: true,
-              updating: false
-            });
+                  _this.setState({
+                    job: res.data.job
+                  }, function () {
+                    _this.props.jobsLoaded([_this.state.job]);
+                  });
 
-            _this.props.jobsLoaded([job]);
-          }).catch(function (res) {
-            _this.setState({
-              updating: false
-            });
+                  _context5.next = 11;
+                  break;
 
-            alert('Something went wrong with the request. Please try again.');
-          });
-        } else {
-          // Create New Job
-          job.userID = 'undefined';
-          maintenanceActions.createJob(job).then(function (res) {
-            _this.setState({
-              success: true,
-              updating: false
-            });
+                case 8:
+                  _context5.prev = 8;
+                  _context5.t0 = _context5["catch"](1);
+                  console.error('onSelectStatus', _context5.t0);
 
-            _this.props.jobsUpdate(_this.props.auth.site);
-          }).catch(function (res) {
-            _this.setState({
-              updating: false
-            });
+                case 11:
+                case "end":
+                  return _context5.stop();
+              }
+            }
+          }, _callee5, null, [[1, 8]]);
+        }));
 
-            alert('Something went wrong with the request. Please try again.');
-          });
-        }
-      });
+        return function (_x) {
+          return _ref5.apply(this, arguments);
+        };
+      }());
 
       _this.state = {
-        jobId: Helper$1.safeReadParams(_this.props, 'jobId') ? _this.props.match.params.jobId : null,
+        jobId: Helper$1.safeReadParams(props, 'jobId') ? props.match.params.jobId : null,
         job: null,
         showingSelector: false,
         updating: false,
-        connected: false,
-        types: [],
-        id: null,
-        userID: '',
-        userName: '',
-        room: '',
-        phone: '',
-        location: _this.props.auth.site,
-        title: '',
-        description: '',
-        isHome: false,
-        homeText: '',
-        type: 'General',
-        image: null,
-        thumbnail: null,
-        showWarnings: false,
-        success: false
+        comments: [],
+        commentInput: '',
+        loadingComments: false,
+        statusChangerOpen: false,
+        addNoteOpen: false,
+        noteAttachments: [],
+        noteInput: ''
       };
       return _this;
     }
 
-    _createClass__default['default'](AddJob, [{
-      key: "UNSAFE_componentWillMount",
-      value: function UNSAFE_componentWillMount() {
+    _createClass__default['default'](Job, [{
+      key: "UNSAFE_componentWillReceiveProps",
+      value: function UNSAFE_componentWillReceiveProps(nextProps) {
         Session$1.checkLoggedIn(this, this.props.auth);
       }
     }, {
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        this.getJobTypes();
-        if (this.state.jobId) this.getJob();
-        this.props.addRecentlyCreated('maintenance');
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        if (this.state.jobId) {
+          this.getJob();
+          this.getComments();
+        }
+      }
+    }, {
+      key: "renderStatusLabel",
+      value: function renderStatusLabel() {
+        if (!this.state.job.status) return null;
+        var auth = this.props.auth;
+
+        if (Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "statusLabel pointer",
+            onClick: this.onToggleStatusChanger,
+            style: {
+              backgroundColor: StatusTypes[this.state.job.status].color
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "statusLabel_text"
+          }, StatusTypes[this.state.job.status].text), this.renderStatusChanger());
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "statusLabel",
+          style: {
+            backgroundColor: StatusTypes[this.state.job.status].color
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "statusLabel_text"
+        }, StatusTypes[this.state.job.status].text));
+      }
+    }, {
+      key: "renderNotesButton",
+      value: function renderNotesButton() {
+        var auth = this.props.auth;
+        if (!Session$1.validateAccess(auth.site, 'maintenanceTracking', auth)) return null;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "statusLabel pointer",
+          onClick: this.onOpenAddNote,
+          style: {
+            backgroundColor: FeatureConfig.env.colourBrandingMain,
+            marginLeft: 8
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "statusLabel_text"
+        }, "Add Note"));
       }
     }, {
-      key: "renderTypeOptions",
-      value: function renderTypeOptions() {
+      key: "renderStatusChanger",
+      value: function renderStatusChanger() {
         var _this2 = this;
 
-        var source = this.state.types;
-        return source.map(function (ev) {
-          if (ev != null) {
-            return /*#__PURE__*/React__default['default'].createElement(reactBootstrap.MenuItem, {
-              key: ev.typeName,
-              eventKey: ev.typeName,
-              active: _this2.state.type === ev.typeName
-            }, ev.typeName);
-          }
+        if (!this.state.statusChangerOpen) return null;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "statusChanger statusChanger-maintenance"
+        }, Object.keys(StatusTypes).map(function (statusKey) {
+          return /*#__PURE__*/React__default['default'].createElement("div", {
+            key: statusKey,
+            className: "statusLabel",
+            onClick: function onClick() {
+              return _this2.onSelectStatus(statusKey);
+            },
+            style: {
+              backgroundColor: StatusTypes[statusKey].color
+            }
+          }, /*#__PURE__*/React__default['default'].createElement("span", {
+            className: "statusLabel_text"
+          }, StatusTypes[statusKey].text));
+        }));
+      }
+    }, {
+      key: "renderComment",
+      value: function renderComment(c) {
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: c.Id,
+          className: "comment"
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "comment_text"
+        }, Helper$1.toParagraphed(c.Comment)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "comment_bottom"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ProfilePic, {
+          className: "comment_profilePic",
+          size: 25,
+          image: c.User.profilePic
+        }), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "comment_name"
+        }, c.User.displayName), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "comment_time"
+        }, moment__default['default'].utc(c.Timestamp).local().format('D MMM YYYY • h:mma'))));
+      }
+    }, {
+      key: "renderCommentSection",
+      value: function renderCommentSection() {
+        var _this3 = this;
 
-          return null;
-        });
+        if (this.state.loadingComments) return null;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-60 paddingLeft-20"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "newTopBar paddingLeft-40"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "formTitleSmall",
+          className: "marginBottom-16"
+        }, "Comments"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "commentSection"
+        }, this.state.comments.map(function (c) {
+          return _this3.renderComment(c);
+        })), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "commentReply"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "commentReply_button".concat(!___default['default'].isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''),
+          onClick: this.onAddComment
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          className: "commentReply_icon",
+          name: "paper-plane-o"
+        })), /*#__PURE__*/React__default['default'].createElement(Textarea__default['default'], {
+          id: "commentInput",
+          placeholder: "Reply here...",
+          type: "text",
+          className: "commentReply_input",
+          value: this.state.commentInput,
+          onChange: function onChange(e) {
+            return _this3.onHandleChange(e);
+          }
+        }))));
       }
     }, {
-      key: "renderSuccess",
-      value: function renderSuccess() {
-        if (!this.state.success) return null;
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.SuccessPopup, {
-          text: "Maintenance request has been ".concat(this.state.id != null ? 'edited' : 'added'),
-          buttons: [{
-            type: 'outlined',
-            onClick: function onClick() {
-              window.history.back();
-            },
-            text: "Back to Maintenance"
+      key: "renderInner",
+      value: function renderInner() {
+        if (this.state.job == null) return null;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            paddingBottom: 40
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-60 paddingVertical-40 bottomDivideBorder relative"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "formTitleLarge",
+          className: "marginBottom-24"
+        }, this.state.job.title || 'Request'), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Request date"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, moment__default['default'].utc(this.state.job.createdTime).local().format('D MMM YY'))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Type"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.type)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Location"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.room)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Description ", this.state.job.image ? '- (image supplied)' : ''), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.description))), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-60 paddingVertical-40 bottomDivideBorder"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "formTitleSmall",
+          className: "marginBottom-16"
+        }, "Contact Details"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Name"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.userName)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Contact number"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, ___default['default'].isEmpty(this.state.job.phone) ? 'No phone provided' : this.state.job.phone)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "Should person be home?"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.isHome ? 'Yes' : 'No')), this.state.job.isHome && this.state.job.homeText && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "marginTop-16"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fieldLabel'
+        }, "When"), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: 'fontRegular fontSize-16 text-dark marginTop-5'
+        }, this.state.job.homeText))), (this.state.job.image || this.state.job.images) && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-60 paddingVertical-40 bottomDivideBorder"
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "formTitleSmall",
+          className: "marginBottom-16"
+        }, "Image"), /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            marginTop: 16,
+            height: 180,
+            width: 260,
+            borderRadius: 4,
+            border: '1px solid #aaa',
+            backgroundColor: '#ddd',
+            backgroundImage: "url(".concat(this.state.job.thumbnail, ")"),
+            backgroundPosition: 'center'
+          }
+        })), this.renderCommentSection());
+      }
+    }, {
+      key: "renderHistoryEntry",
+      value: function renderHistoryEntry(e, i) {
+        var job = this.state.job;
+        var entryToUse = e || {
+          timestamp: job.createdTime,
+          status: 'Unassigned',
+          user: {
+            displayName: job.userName,
+            id: job.userID,
+            profilePic: job.userProfilePic
+          }
+        };
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "ticketHistoryEntry",
+          key: i
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "ticketHistoryEntry_timestamp"
+        }, moment__default['default'].utc(entryToUse.timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "statusLabel statusLabel-large statusLabel-full",
+          style: {
+            backgroundColor: StatusTypes[entryToUse.status].color
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "statusLabel_text"
+        }, e ? "Marked as ".concat(StatusTypes[entryToUse.status].text) : 'Job opened')));
+      }
+    }, {
+      key: "renderNote",
+      value: function renderNote(note, index) {
+        var _this4 = this;
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "ticketHistoryEntry",
+          key: index
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "ticketHistoryEntry_timestamp"
+        }, moment__default['default'].utc(note.Timestamp).local().format('D MMM YYYY h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "statusLabel statusLabel-large statusLabel-full",
+          style: {
+            backgroundColor: '#6e79c5'
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "statusLabel_text"
+        }, "Staff Notes")), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "maintenanceNote"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "maintenanceNote_top"
+        }, this.props.auth && this.props.auth.user && this.props.auth.user.Id === note.User.id && /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+          colour: Colours.COLOUR_DUSK_LIGHT,
+          icon: "more15",
+          className: "maintenanceNote_moreIcon",
+          onClick: function onClick() {
+            return _this4.onOpenNoteMenu(index);
+          }
+        }), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "maintenanceNote_name"
+        }, note.User.displayName), this.state.noteMenuOpen === index && /*#__PURE__*/React__default['default'].createElement(Components$1.MoreMenu, {
+          options: [{
+            key: 'edit',
+            text: 'Edit',
+            onPress: function onPress() {
+              return _this4.onOpenEditNote(note);
+            }
+          }, {
+            key: 'delete',
+            text: 'Delete',
+            onPress: function onPress() {
+              return _this4.onDeleteNote(note);
+            }
           }]
-        });
-      }
-    }, {
-      key: "validateForm",
-      value: function validateForm() {
-        if (___default['default'].isEmpty(this.state.userName)) return false;
-        if (___default['default'].isEmpty(this.state.room)) return false;
-        if (___default['default'].isEmpty(this.state.title)) return false;
-        if (this.state.isHome && ___default['default'].isEmpty(this.state.homeText)) return false;
-        return true;
+        })), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "maintenanceNote_text"
+        }, Helper$1.toParagraphed(note.Note)), note.Attachments.map(function (a, i) {
+          return _this4.renderAttachment(a, i);
+        })));
       }
     }, {
-      key: "renderSubmit",
-      value: function renderSubmit() {
-        var _this3 = this;
+      key: "renderOverview",
+      value: function renderOverview() {
+        var _this5 = this;
 
-        if (this.state.updating) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
-            buttonType: "secondary"
-          }, "Saving...");
-        }
+        var job = this.state.job;
+        if (!job || !job.history) return null;
+
+        var source = ___default['default'].sortBy([].concat(_toConsumableArray__default['default'](job.history.map(function (e) {
+          return _objectSpread$3(_objectSpread$3({}, e), {}, {
+            EntryType: 'status'
+          });
+        })), _toConsumableArray__default['default']((job.Notes || []).map(function (e) {
+          return _objectSpread$3(_objectSpread$3({}, e), {}, {
+            timestamp: e.Timestamp,
+            EntryType: 'note'
+          });
+        }))), 'timestamp');
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-32 paddingVertical-40 bottomDivideBorder relative"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "newTopBar clearfix flex flex-reverse"
+        }, this.renderNotesButton(), this.renderStatusLabel(), /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "formTitleSmall",
+          className: "flex-1"
+        }, "Status History")), this.renderHistoryEntry(null, -1), ___default['default'].map(source, function (e, i) {
+          switch (e.EntryType) {
+            case 'status':
+              return _this5.renderHistoryEntry(e, i);
 
+            case 'note':
+              return _this5.renderNote(e, i);
+          }
+        }));
+      }
+    }, {
+      key: "renderButtons",
+      value: function renderButtons() {
         return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
           inline: true,
           buttonType: "tertiary",
           onClick: function onClick() {
-            return _this3.props.history.push('/requestsHub');
+            window.history.back();
           },
           isActive: true,
           style: {
             marginRight: 16
           }
-        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
+        }, "Back"), Session$1.validateAccess(this.props.auth.site, 'maintenanceTracking', this.props.auth) && !___default['default'].isEmpty(this.state.job) && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
+          to: "/requestsHub/job/".concat(this.state.jobId)
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Button, {
           inline: true,
-          buttonType: "primary",
-          onClick: this.onSave,
-          isActive: this.validateForm()
-        }, "Save"));
+          style: {
+            marginRight: 25
+          },
+          buttonType: "outlined",
+          isActive: true,
+          onClick: this.editJob
+        }, "Edit Details")));
       }
     }, {
-      key: "renderMain",
-      value: function renderMain() {
-        var _this4 = this;
+      key: "renderAttachment",
+      value: function renderAttachment(attachment, index, onRemove) {
+        if (!attachment) return null;
+        return /*#__PURE__*/React__default['default'].createElement(Components$1.Attachment, {
+          key: index,
+          uploading: attachment.Uploading,
+          source: attachment.Source,
+          title: attachment.Title,
+          onRemove: onRemove ? function () {
+            return onRemove(attachment);
+          } : undefined
+        });
+      }
+    }, {
+      key: "renderAddNotePopup",
+      value: function renderAddNotePopup() {
+        var _this6 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            marginBottom: 15
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
-          type: "formTitleLarge",
-          className: "marginBottom-24"
-        }, this.state.infoId == null ? 'New' : 'Edit', " Request"), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          id: "userName",
-          type: "text",
-          label: "Name",
-          placeholder: "Insert name here",
-          value: this.state.userName,
-          onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          isRequired: true,
-          alwaysShowLabel: true,
-          isValid: function isValid() {
-            return !___default['default'].isEmpty(_this4.state.userName);
-          },
-          showError: function showError() {
-            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.userName);
-          }
-        }), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          id: "room",
-          type: "text",
-          label: "Location",
-          placeholder: "Insert address here",
-          value: this.state.room,
-          onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          isRequired: true,
-          alwaysShowLabel: true,
-          isValid: function isValid() {
-            return !___default['default'].isEmpty(_this4.state.room);
-          },
-          showError: function showError() {
-            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.room);
-          }
-        }), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          id: "phone",
-          type: "text",
-          label: "Contact number",
-          placeholder: "04XX XXX XXX",
-          value: this.state.phone // showError={this.state.showWarnings && !this.validateImage()}
-          ,
-          onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          alwaysShowLabel: true
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            marginBottom: 15
-          }
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
-          type: "formLabel"
-        }, "Job Type"), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.DropdownButton, {
-          style: {
-            minWidth: 80
-          },
-          bsStyle: "default",
-          title: this.state.type,
-          id: "typeSelect",
-          onSelect: this.onSelectType
-        }, this.renderTypeOptions())), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          id: "title",
-          label: "Title for the work required",
-          type: "textarea",
-          placeholder: "Title for the work required",
-          value: this.state.title,
-          onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          inputStyle: {
-            height: 80
-          },
-          isRequired: true,
-          isValid: function isValid() {
-            return !___default['default'].isEmpty(_this4.state.title);
-          },
-          showError: function showError() {
-            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.title);
-          },
-          alwaysShowLabel: true
-        }), /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          id: "description",
-          label: "Description of work required",
-          type: "textarea",
-          placeholder: "Description of work required",
-          value: this.state.description,
-          onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          inputStyle: {
-            height: 80
-          },
-          alwaysShowLabel: true
-        }), /*#__PURE__*/React__default['default'].createElement(Components$1.RadioButton, {
-          label: "Person must be home during work?",
-          isActive: this.state.isHome,
-          options: [{
-            Label: 'No',
-            Value: false,
-            onChange: function onChange() {
-              return _this4.setState({
-                isHome: false
-              });
-            }
+        if (!this.state.addNoteOpen) return null;
+
+        if (this.state.submittingNote) {
+          return /*#__PURE__*/React__default['default'].createElement(Components$1.Popup, {
+            title: "Saving Note",
+            maxWidth: 600,
+            hasPadding: true
+          }, /*#__PURE__*/React__default['default'].createElement("div", {
+            className: "flex flex-center-row"
+          }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+            className: "spinner",
+            name: "spinner fa-pulse fa-fw"
+          })));
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement(Components$1.Popup, {
+          title: "".concat(this.state.editingNote ? 'Edit' : 'Add', " Note"),
+          onClose: this.onCloseAddNote,
+          maxWidth: 600,
+          hasPadding: true,
+          buttons: [{
+            type: 'primary',
+            onClick: this.onConfirmAddNote,
+            isActive: this.isReadyToSaveNote(),
+            text: 'Save'
           }, {
-            Label: 'Yes',
-            Value: true,
-            onChange: function onChange() {
-              return _this4.setState({
-                isHome: true
-              });
-            }
+            type: 'tertiary',
+            onClick: this.onCloseAddNote,
+            isActive: true,
+            text: 'Cancel'
           }]
-        }), this.state.isHome && /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
-          style: {
-            marginTop: 16
-          },
-          label: "Description of person's available times",
-          id: "homeText",
+        }, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
+          id: "noteInput",
           type: "textarea",
-          placeholder: "Description of person's available times",
-          value: this.state.homeText,
+          componentClass: "textarea",
+          value: this.state.noteInput,
+          placeholder: "Enter note",
           onChange: function onChange(e) {
-            return _this4.onHandleChange(e);
-          },
-          inputStyle: {
-            height: 80
+            return _this6.onHandleChange(e);
           },
-          isRequired: true,
-          isValid: function isValid() {
-            return !___default['default'].isEmpty(_this4.state.homeText);
+          inputStyle: {
+            width: 400
+          }
+        }), /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          type: "h5"
+        }, "Attachments"), this.state.noteAttachments.map(function (a, i) {
+          return _this6.renderAttachment(a, i, _this6.onRemoveAttachment);
+        }), /*#__PURE__*/React__default['default'].createElement("input", {
+          ref: function ref(input) {
+            return _this6.attachmentInput = input;
           },
-          showError: function showError() {
-            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.homeText);
+          id: "attachmentInput",
+          type: "file",
+          className: "fileInput",
+          onChange: function onChange(e) {
+            return _this6.onHandlePDFFileChange(e);
           },
-          alwaysShowLabel: true
-        })));
+          accept: "application/pdf"
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "iconTextButton",
+          onClick: function onClick() {
+            _this6.attachmentInput.click();
+          }
+        }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
+          className: "iconTextButton_icon",
+          name: "paperclip"
+        }), /*#__PURE__*/React__default['default'].createElement("p", {
+          className: "iconTextButton_text"
+        }, "Add Attachment")));
       }
     }, {
       key: "render",
       value: function render() {
-        var success = this.state.success;
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageContents, {
-          noBottomButtons: success
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageSection, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, null, this.renderAddNotePopup(), /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageContents, null, /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageSection, {
           className: "pageSectionWrapper--newPopup"
-        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageBottomButtons, null, this.renderSubmit()));
+        }, this.renderInner()), /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageSection, {
+          className: "pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth"
+        }, this.renderOverview())), /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPageBottomButtons, null, this.renderButtons()));
       }
     }]);
 
-    return AddJob;
+    return Job;
   }(React.Component);
 
   var mapStateToProps$1 = function mapStateToProps(state) {
@@ -2476,32 +2566,31 @@
     };
   };
 
-  var AddJob$1 = reactRedux.connect(mapStateToProps$1, {
-    jobsUpdate: jobsUpdate,
-    jobsLoaded: jobsLoaded,
-    addRecentlyCreated: Actions.addRecentlyCreated
-  })(reactRouter.withRouter(AddJob));
+  var Job$1 = reactRedux.connect(mapStateToProps$1, {
+    jobsLoaded: jobsLoaded
+  })(reactRouter.withRouter(Job));
 
   function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-  var Session = PlussCore__namespace.Session,
+  var Actions = PlussCore__namespace.Actions,
       Components = PlussCore__namespace.Components,
-      Helper = PlussCore__namespace.Helper;
+      Helper = PlussCore__namespace.Helper,
+      Session = PlussCore__namespace.Session;
 
-  var JobTypes = /*#__PURE__*/function (_Component) {
-    _inherits__default['default'](JobTypes, _Component);
+  var AddJob = /*#__PURE__*/function (_Component) {
+    _inherits__default['default'](AddJob, _Component);
 
-    var _super = _createSuper$6(JobTypes);
+    var _super = _createSuper$6(AddJob);
 
-    function JobTypes(props) {
+    function AddJob(props) {
       var _this;
 
-      _classCallCheck__default['default'](this, JobTypes);
+      _classCallCheck__default['default'](this, AddJob);
 
       _this = _super.call(this, props);
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJob", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
         var res;
         return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
           while (1) {
@@ -2509,141 +2598,76 @@
               case 0:
                 _context.prev = 0;
                 _context.next = 3;
-                return maintenanceActions.getJobTypes(_this.props.auth.site);
+                return maintenanceActions.getJob(_this.props.auth.site, _this.state.jobId);
 
               case 3:
                 res = _context.sent;
-                if (res.data != null) _this.props.jobTypesLoaded(res.data);
-                _context.next = 10;
-                break;
-
-              case 7:
-                _context.prev = 7;
-                _context.t0 = _context["catch"](0);
-                console.error('getJobTypes', _context.t0);
+                res.data.location = res.data.site;
 
-              case 10:
-                _context.prev = 10;
+                _this.setState(res.data);
 
-                _this.setState({
-                  loading: false
-                });
+                _context.next = 11;
+                break;
 
-                return _context.finish(10);
+              case 8:
+                _context.prev = 8;
+                _context.t0 = _context["catch"](0);
+                console.error('getJob', _context.t0);
 
-              case 13:
+              case 11:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 7, 10, 13]]);
+        }, _callee, null, [[0, 8]]);
       })));
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "sortByCol", function (col) {
-        if (_this.state.sortColumn === col) {
-          _this.setState({
-            sortDesc: !_this.state.sortDesc
-          });
-        } else {
-          _this.setState({
-            sortColumn: col,
-            sortDesc: false
-          });
-        }
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "validateEmail", function () {
-        var jobTypeEmail = _this.state.jobTypeEmail;
-        return !___default['default'].isEmpty(jobTypeEmail) && Helper.isEmail(jobTypeEmail);
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "isJobTypeValid", function () {
-        var _this$state = _this.state,
-            jobTypeName = _this$state.jobTypeName,
-            jobTypeDescription = _this$state.jobTypeDescription;
-        if (___default['default'].isEmpty(jobTypeName)) return false;
-        if (!_this.validateEmail()) return false;
-        if (___default['default'].isEmpty(jobTypeDescription)) return false;
-        return true;
-      });
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onRemoveJobType", /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2(ev) {
-          var index, newJobTypes;
-          return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
-            while (1) {
-              switch (_context2.prev = _context2.next) {
-                case 0:
-                  if (window.confirm("Are you sure you want to delete ".concat(ev.typeName, "?"))) {
-                    _context2.next = 2;
-                    break;
-                  }
-
-                  return _context2.abrupt("return");
-
-                case 2:
-                  _context2.prev = 2;
-                  _context2.next = 5;
-                  return maintenanceActions.deleteJobType(_this.props.auth.site, ev.id);
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getJobTypes", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+        var res;
+        return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                _context2.next = 3;
+                return maintenanceActions.getJobTypes(_this.props.auth.site);
 
-                case 5:
-                  index = ___default['default'].findIndex(_this.state.jobList, function (job) {
-                    return job != null && job.id === ev.id;
-                  });
+              case 3:
+                res = _context2.sent;
 
-                  if (index > -1) {
-                    newJobTypes = _toConsumableArray__default['default'](_this.state.jobList);
-                    newJobTypes[index].Deleted = true;
+                _this.setState({
+                  types: res.data
+                });
 
-                    _this.props.jobTypesLoaded(newJobTypes);
-                  }
+                _this.getDefaultJob();
 
-                  _context2.next = 13;
-                  break;
+                _context2.next = 11;
+                break;
 
-                case 9:
-                  _context2.prev = 9;
-                  _context2.t0 = _context2["catch"](2);
-                  console.error('onRemoveJobType', _context2.t0);
-                  alert('Something went wrong with the request. Please try again.');
+              case 8:
+                _context2.prev = 8;
+                _context2.t0 = _context2["catch"](0);
+                console.error('getJobTypes', _context2.t0);
 
-                case 13:
-                case "end":
-                  return _context2.stop();
-              }
+              case 11:
+              case "end":
+                return _context2.stop();
             }
-          }, _callee2, null, [[2, 9]]);
-        }));
-
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }());
-
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onShowJobType", function () {
-        var job = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+          }
+        }, _callee2, null, [[0, 8]]);
+      })));
 
-        _this.setState({
-          showJobType: true,
-          jobTypeId: job ? job.id : null,
-          jobTypeName: job ? job.typeName : '',
-          jobTypeEmail: job ? job.email : '',
-          jobTypeDescription: job ? job.description : '',
-          jobTypeLevel: job ? job.level : 1
-        });
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getDefaultJob", function () {
+        if (_this.state.types.length !== 0 && _this.state.jobId == null) {
+          _this.setState({
+            type: _this.state.types[0].typeName
+          });
+        }
       });
 
-      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onHideJobType", function () {
-        if (_this.state.submitting) return;
-
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSelectType", function (key, e) {
         _this.setState({
-          showWarnings: false,
-          showJobType: false,
-          jobTypeId: null,
-          jobTypeName: '',
-          jobTypeEmail: '',
-          jobTypeDescription: '',
-          jobTypeLevel: 1
+          type: key
         });
       });
 
@@ -2655,17 +2679,11 @@
       });
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onSave", function () {
-        var site = _this.props.auth.site;
-        var _this$state2 = _this.state,
-            submitting = _this$state2.submitting,
-            jobTypeId = _this$state2.jobTypeId,
-            jobTypeName = _this$state2.jobTypeName,
-            jobTypeEmail = _this$state2.jobTypeEmail,
-            jobTypeDescription = _this$state2.jobTypeDescription,
-            jobTypeLevel = _this$state2.jobTypeLevel;
-        if (submitting) return;
+        _this.setState({
+          showWarnings: false
+        });
 
-        if (!_this.isJobTypeValid()) {
+        if (!_this.validateForm()) {
           _this.setState({
             showWarnings: true
           });
@@ -2673,391 +2691,349 @@
           return;
         }
 
-        _this.setState({
-          submitting: true
-        }, /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
-          return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
-            while (1) {
-              switch (_context3.prev = _context3.next) {
-                case 0:
-                  _context3.prev = 0;
-
-                  if (!jobTypeId) {
-                    _context3.next = 6;
-                    break;
-                  }
-
-                  _context3.next = 4;
-                  return maintenanceActions.editJobType(site, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
-
-                case 4:
-                  _context3.next = 8;
-                  break;
-
-                case 6:
-                  _context3.next = 8;
-                  return maintenanceActions.addJobType(site, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel);
+        if (_this.state.updating) return;
 
-                case 8:
-                  _this.props.jobTypesUpdate(site);
+        _this.setState({
+          updating: true
+        });
 
-                  _this.setState({
-                    submitting: false
-                  }, _this.onHideJobType);
+        var job = {
+          id: _this.state.id,
+          userID: _this.state.userID,
+          userName: _this.state.userName,
+          room: _this.state.room,
+          phone: _this.state.phone,
+          location: _this.state.location,
+          title: _this.state.title,
+          description: _this.state.description,
+          isHome: _this.state.isHome,
+          homeText: _this.state.homeText,
+          type: _this.state.type,
+          date: null,
+          image: _this.state.image
+        };
 
-                  _context3.next = 17;
-                  break;
+        if (_this.state.id != null) {
+          maintenanceActions.editJob(job, _this.props.auth.site).then(function (res) {
+            _this.setState({
+              success: true,
+              updating: false
+            });
 
-                case 12:
-                  _context3.prev = 12;
-                  _context3.t0 = _context3["catch"](0);
-                  console.error('onSave', _context3.t0);
+            _this.props.jobsLoaded([job]);
+          }).catch(function (res) {
+            _this.setState({
+              updating: false
+            });
 
-                  _this.setState({
-                    submitting: false
-                  });
+            alert('Something went wrong with the request. Please try again.');
+          });
+        } else {
+          // Create New Job
+          job.userID = 'undefined';
+          maintenanceActions.createJob(job).then(function (res) {
+            _this.setState({
+              success: true,
+              updating: false
+            });
 
-                  alert('Something went wrong with the request. Please try again.');
+            _this.props.jobsUpdate(_this.props.auth.site);
+          }).catch(function (res) {
+            _this.setState({
+              updating: false
+            });
 
-                case 17:
-                case "end":
-                  return _context3.stop();
-              }
-            }
-          }, _callee3, null, [[0, 12]]);
-        })));
+            alert('Something went wrong with the request. Please try again.');
+          });
+        }
       });
 
       _this.state = {
-        jobList: [],
-        showCompleted: false,
-        sortColumn: 'name',
-        sortDesc: false,
-        loading: true,
-        showJobType: false,
-        jobTypeId: null,
-        jobTypeName: '',
-        jobTypeEmail: '',
-        jobTypeDescription: '',
-        jobTypeLevel: 1,
+        jobId: Helper.safeReadParams(_this.props, 'jobId') ? _this.props.match.params.jobId : null,
+        job: null,
+        showingSelector: false,
+        updating: false,
+        connected: false,
+        types: [],
+        id: null,
+        userID: '',
+        userName: '',
+        room: '',
+        phone: '',
+        location: _this.props.auth.site,
+        title: '',
+        description: '',
+        isHome: false,
+        homeText: '',
+        type: 'General',
+        image: null,
+        thumbnail: null,
         showWarnings: false,
-        submitting: false
+        success: false
       };
       return _this;
     }
 
-    _createClass__default['default'](JobTypes, [{
-      key: "componentWillMount",
-      value: function componentWillMount() {
-        this.updateProps(this.props);
+    _createClass__default['default'](AddJob, [{
+      key: "UNSAFE_componentWillMount",
+      value: function UNSAFE_componentWillMount() {
         Session.checkLoggedIn(this, this.props.auth);
       }
     }, {
       key: "componentDidMount",
       value: function componentDidMount() {
         this.getJobTypes();
+        if (this.state.jobId) this.getJob();
+        this.props.addRecentlyCreated('maintenance');
       }
     }, {
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
-        this.updateProps(nextProps);
-      }
-    }, {
-      key: "updateProps",
-      value: function updateProps(props) {
-        this.setState({
-          jobList: props.jobtypes
-        });
-      }
-    }, {
-      key: "renderList",
-      value: function renderList() {
+      key: "renderTypeOptions",
+      value: function renderTypeOptions() {
         var _this2 = this;
 
-        var source = ___default['default'].sortBy(this.state.jobList, this.state.sortColumn);
-
-        if (this.state.sortDesc) source.reverse();
-        source = ___default['default'].filter(source, function (ev) {
-          if (!ev) return false;
-          if (ev.Deleted) return false;
-          return true;
-        });
-        return source.map(function (ev, index) {
+        var source = this.state.types;
+        return source.map(function (ev) {
           if (ev != null) {
-            return /*#__PURE__*/React__default['default'].createElement("tr", {
-              key: index
-            }, /*#__PURE__*/React__default['default'].createElement("td", {
-              className: "table-TitleColumn"
-            }, /*#__PURE__*/React__default['default'].createElement("a", {
-              onClick: function onClick() {
-                return _this2.onShowJobType(ev);
-              }
-            }, ev.typeName)), /*#__PURE__*/React__default['default'].createElement("td", null, ev.description), /*#__PURE__*/React__default['default'].createElement("td", null, ev.email), /*#__PURE__*/React__default['default'].createElement("td", {
-              className: "table-options"
-            }, /*#__PURE__*/React__default['default'].createElement("div", {
-              style: {
-                display: 'flex',
-                alignItems: 'center'
-              }
-            }, Session.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React__default['default'].createElement("a", {
-              onClick: function onClick() {
-                return _this2.onShowJobType(ev);
-              }
-            }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-              style: {
-                fontSize: 20,
-                padding: 5,
-                marginLeft: 12,
-                cursor: 'pointer'
-              },
-              name: "pencil"
-            })), Session.validateAccess(_this2.props.auth.site, 'maintenanceTypes', _this2.props.auth) && /*#__PURE__*/React__default['default'].createElement("a", {
-              onClick: function onClick() {
-                return _this2.onRemoveJobType(ev);
-              }
-            }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-              style: {
-                fontSize: 20,
-                padding: 5,
-                marginLeft: 8,
-                cursor: 'pointer'
-              },
-              name: "minus-circle"
-            })))));
+            return /*#__PURE__*/React__default['default'].createElement(reactBootstrap.MenuItem, {
+              key: ev.typeName,
+              eventKey: ev.typeName,
+              active: _this2.state.type === ev.typeName
+            }, ev.typeName);
           }
 
           return null;
         });
       }
     }, {
-      key: "renderView",
-      value: function renderView() {
-        var _this3 = this;
-
-        return /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
-          className: "plussTable",
-          striped: true,
-          bordered: true,
-          condensed: true,
-          hover: true,
-          style: {
-            minWidth: '100%'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("thead", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this3.sortByCol('name');
-          }
-        }, "Request type"), /*#__PURE__*/React__default['default'].createElement("th", {
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this3.sortByCol('name');
-          }
-        }, "Type Description"), /*#__PURE__*/React__default['default'].createElement("th", {
-          style: {
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return _this3.sortByCol('email');
-          }
-        }, "Email"), /*#__PURE__*/React__default['default'].createElement("th", {
-          style: {
-            width: 70
-          }
-        }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, this.renderList()));
-      }
-    }, {
-      key: "renderEmpty",
-      value: function renderEmpty() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginTop: 32
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "emptyState"
-        }), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-32",
-          style: {
-            maxWidth: 500,
-            textAlign: 'center'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "fontRegular fontSize-13"
-        }, "Please add the many categories of request types that exist in your village which work alongside the Maintenance area.")), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "marginTop-8 fontRegular fontSize-13",
-          style: {
-            maxWidth: 500,
-            textAlign: 'center'
-          }
-        }, "Examples might be; OH&S, Electrical, General. Remember to add a description too."));
+      key: "renderSuccess",
+      value: function renderSuccess() {
+        if (!this.state.success) return null;
+        return /*#__PURE__*/React__default['default'].createElement(Components.SuccessPopup, {
+          text: "Maintenance request has been ".concat(this.state.id != null ? 'edited' : 'added'),
+          buttons: [{
+            type: 'outlined',
+            onClick: function onClick() {
+              window.history.back();
+            },
+            text: "Back to Maintenance"
+          }]
+        });
       }
-    }, {
-      key: "renderContent",
-      value: function renderContent() {
-        if (___default['default'].isEmpty(this.state.jobList)) return this.renderEmpty();
-        return this.renderView();
+    }, {
+      key: "validateForm",
+      value: function validateForm() {
+        if (___default['default'].isEmpty(this.state.userName)) return false;
+        if (___default['default'].isEmpty(this.state.room)) return false;
+        if (___default['default'].isEmpty(this.state.title)) return false;
+        if (this.state.isHome && ___default['default'].isEmpty(this.state.homeText)) return false;
+        return true;
       }
     }, {
-      key: "renderJobTypes",
-      value: function renderJobTypes() {
-        var _this4 = this;
-
-        var _this$state3 = this.state,
-            jobList = _this$state3.jobList,
-            loading = _this$state3.loading;
+      key: "renderSubmit",
+      value: function renderSubmit() {
+        var _this3 = this;
 
-        if (jobList.length === 0 && loading) {
-          return /*#__PURE__*/React__default['default'].createElement("div", {
-            style: {
-              minWidth: '100%'
-            }
-          }, /*#__PURE__*/React__default['default'].createElement("div", {
-            className: "padding-60 paddingVertical-40",
-            style: {
-              textAlign: 'center'
-            }
-          }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
-            style: {
-              fontSize: 30,
-              color: FeatureConfig.env.colourBrandingOff
-            },
-            name: "spinner fa-pulse fa-fw"
-          })));
+        if (this.state.updating) {
+          return /*#__PURE__*/React__default['default'].createElement(Components.Button, {
+            buttonType: "secondary"
+          }, "Saving...");
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          style: {
-            minWidth: '100%'
-          }
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "flex flex-row flex-center flex-between marginBottom-32"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.PageTitle, null, "Request Types"), /*#__PURE__*/React__default['default'].createElement(Components.AddButton, {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components.Button, {
+          inline: true,
+          buttonType: "tertiary",
           onClick: function onClick() {
-            return _this4.onShowJobType();
+            return _this3.props.history.push('/requestsHub');
           },
-          text: "NEW REQUEST TYPE"
-        })), this.renderContent());
+          isActive: true,
+          style: {
+            marginRight: 16
+          }
+        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components.Button, {
+          inline: true,
+          buttonType: "primary",
+          onClick: this.onSave,
+          isActive: this.validateForm()
+        }, "Save"));
       }
     }, {
-      key: "renderNewUserTypePopup",
-      value: function renderNewUserTypePopup() {
-        var _this5 = this;
+      key: "renderMain",
+      value: function renderMain() {
+        var _this4 = this;
 
-        var _this$state4 = this.state,
-            submitting = _this$state4.submitting,
-            showJobType = _this$state4.showJobType,
-            jobTypeId = _this$state4.jobTypeId,
-            showWarnings = _this$state4.showWarnings,
-            jobTypeName = _this$state4.jobTypeName,
-            jobTypeEmail = _this$state4.jobTypeEmail,
-            jobTypeDescription = _this$state4.jobTypeDescription;
-        if (!showJobType) return null;
-        return /*#__PURE__*/React__default['default'].createElement(Components.Popup, {
-          maxWidth: 800,
-          hasPadding: true,
-          buttons: [{
-            type: 'primaryAction',
-            onClick: this.onSave,
-            isActive: !submitting && this.isJobTypeValid(),
-            text: submitting ? 'Saving...' : 'Save',
-            className: 'popupButton'
-          }, {
-            type: 'outlinedAction',
-            onClick: this.onHideJobType,
-            isActive: !submitting,
-            text: 'Cancel',
-            className: 'popupButton'
-          }],
-          onClose: this.onHideJobType,
-          title: jobTypeId ? 'Edit Request Type' : 'Create New Request Type'
-        }, /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
-          id: "jobTypeName",
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            marginBottom: 15
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "padding-60 paddingVertical-40 bottomDivideBorder"
+        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+          type: "formTitleLarge",
+          className: "marginBottom-24"
+        }, this.state.infoId == null ? 'New' : 'Edit', " Request"), /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+          id: "userName",
           type: "text",
-          label: "Request type title",
-          placeholder: "Request type title",
-          value: jobTypeName,
-          onChange: this.onHandleChange,
+          label: "Name",
+          placeholder: "Insert name here",
+          value: this.state.userName,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
+          },
           isRequired: true,
+          alwaysShowLabel: true,
           isValid: function isValid() {
-            return !___default['default'].isEmpty(jobTypeName);
+            return !___default['default'].isEmpty(_this4.state.userName);
           },
           showError: function showError() {
-            return showWarnings && ___default['default'].isEmpty(jobTypeName);
+            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.userName);
+          }
+        }), /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+          id: "room",
+          type: "text",
+          label: "Location",
+          placeholder: "Insert address here",
+          value: this.state.room,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
           },
-          alwaysShowLabel: true
+          isRequired: true,
+          alwaysShowLabel: true,
+          isValid: function isValid() {
+            return !___default['default'].isEmpty(_this4.state.room);
+          },
+          showError: function showError() {
+            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.room);
+          }
         }), /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
-          id: "jobTypeEmail",
+          id: "phone",
           type: "text",
-          label: "Email",
-          placeholder: "Request email",
-          help: "This is the email address that'll receive service requests of this type",
-          value: jobTypeEmail,
-          onChange: this.onHandleChange,
+          label: "Contact number",
+          placeholder: "04XX XXX XXX",
+          value: this.state.phone // showError={this.state.showWarnings && !this.validateImage()}
+          ,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
+          },
+          alwaysShowLabel: true
+        }), /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            marginBottom: 15
+          }
+        }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
+          type: "formLabel"
+        }, "Job Type"), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.DropdownButton, {
+          style: {
+            minWidth: 80
+          },
+          bsStyle: "default",
+          title: this.state.type,
+          id: "typeSelect",
+          onSelect: this.onSelectType
+        }, this.renderTypeOptions())), /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+          id: "title",
+          label: "Title for the work required",
+          type: "textarea",
+          placeholder: "Title for the work required",
+          value: this.state.title,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
+          },
+          inputStyle: {
+            height: 80
+          },
           isRequired: true,
-          isValid: this.validateEmail,
+          isValid: function isValid() {
+            return !___default['default'].isEmpty(_this4.state.title);
+          },
           showError: function showError() {
-            return showWarnings && !_this5.validateEmail();
+            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.title);
           },
           alwaysShowLabel: true
         }), /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
-          id: "jobTypeDescription",
-          type: "text",
-          label: "Description",
-          placeholder: "Add a description. ",
-          help: "This description will be visible to the people to help them select the correct request type.",
-          value: jobTypeDescription,
-          onChange: this.onHandleChange,
+          id: "description",
+          label: "Description of work required",
+          type: "textarea",
+          placeholder: "Description of work required",
+          value: this.state.description,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
+          },
+          inputStyle: {
+            height: 80
+          },
+          alwaysShowLabel: true
+        }), /*#__PURE__*/React__default['default'].createElement(Components.RadioButton, {
+          label: "Person must be home during work?",
+          isActive: this.state.isHome,
+          options: [{
+            Label: 'No',
+            Value: false,
+            onChange: function onChange() {
+              return _this4.setState({
+                isHome: false
+              });
+            }
+          }, {
+            Label: 'Yes',
+            Value: true,
+            onChange: function onChange() {
+              return _this4.setState({
+                isHome: true
+              });
+            }
+          }]
+        }), this.state.isHome && /*#__PURE__*/React__default['default'].createElement(Components.GenericInput, {
+          style: {
+            marginTop: 16
+          },
+          label: "Description of person's available times",
+          id: "homeText",
+          type: "textarea",
+          placeholder: "Description of person's available times",
+          value: this.state.homeText,
+          onChange: function onChange(e) {
+            return _this4.onHandleChange(e);
+          },
+          inputStyle: {
+            height: 80
+          },
           isRequired: true,
           isValid: function isValid() {
-            return !___default['default'].isEmpty(jobTypeDescription);
+            return !___default['default'].isEmpty(_this4.state.homeText);
           },
           showError: function showError() {
-            return showWarnings && ___default['default'].isEmpty(jobTypeDescription);
+            return _this4.state.showWarnings && ___default['default'].isEmpty(_this4.state.homeText);
           },
           alwaysShowLabel: true
-        }));
+        })));
       }
     }, {
       key: "render",
       value: function render() {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-wrapperContainer"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-headerContentWrapper"
-        }, /*#__PURE__*/React__default['default'].createElement(Components.Header, null), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "hub-contentWrapper",
-          style: {
-            position: 'relative'
-          }
-        }, this.renderJobTypes()), this.renderNewUserTypePopup()));
+        var success = this.state.success;
+        return /*#__PURE__*/React__default['default'].createElement(Components.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components.OverlayPageContents, {
+          noBottomButtons: success
+        }, /*#__PURE__*/React__default['default'].createElement(Components.OverlayPageSection, {
+          className: "pageSectionWrapper--newPopup"
+        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components.OverlayPageBottomButtons, null, this.renderSubmit()));
       }
     }]);
 
-    return JobTypes;
+    return AddJob;
   }(React.Component);
 
   var mapStateToProps = function mapStateToProps(state) {
-    var jobtypes = state.maintenance.jobtypes;
     var auth = state.auth;
     return {
-      jobtypes: jobtypes,
       auth: auth
     };
   };
 
-  var JobTypes$1 = reactRedux.connect(mapStateToProps, {
-    jobTypesLoaded: jobTypesLoaded,
-    jobTypesUpdate: jobTypesUpdate
-  })(reactRouter.withRouter(JobTypes));
+  var AddJob$1 = reactRedux.connect(mapStateToProps, {
+    jobsUpdate: jobsUpdate,
+    jobsLoaded: jobsLoaded,
+    addRecentlyCreated: Actions.addRecentlyCreated
+  })(reactRouter.withRouter(AddJob));
 
   function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -3452,8 +3428,7 @@
   var Screens = {
     RequestsHub: RequestsHub$1,
     Job: Job$1,
-    AddJob: AddJob$1,
-    JobTypes: JobTypes$1
+    AddJob: AddJob$1
   };
 
   exports.ActivityText = ActivityText;