diff --git a/.gitignore b/.gitignore
index f4f46a5..274d3f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,3 +44,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+projects/common/node_modules/
diff --git a/package-lock.json b/package-lock.json
index 635c68b..5741082 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -462,6 +462,26 @@
         "tslib": "^1.9.0"
       }
     },
+    "@aspnet/signalr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@aspnet/signalr/-/signalr-1.1.4.tgz",
+      "integrity": "sha512-Jp9nPc8hmmhbG9OKiHe2fOKskBHfg+3Y9foSKHxjgGtyI743hXjGFv3uFlUg503K9f8Ilu63gQt3fDkLICBRyg==",
+      "requires": {
+        "eventsource": "^1.0.7",
+        "request": "^2.88.0",
+        "ws": "^6.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/@babel/code-frame/-/code-frame-7.0.0.tgz",
@@ -1009,7 +1029,6 @@
       "version": "6.9.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/ajv/-/ajv-6.9.1.tgz",
       "integrity": "sha512-XDN92U311aINL77ieWHmqCcNlwjoP5cHXDxIxbf2MaPYuCXOHS7gHH8jktxeK5omgd52XbSTX6a4Piwd1pQmzA==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1233,7 +1252,6 @@
       "version": "0.2.4",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/asn1/-/asn1-0.2.4.tgz",
       "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -1279,8 +1297,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -1312,14 +1329,12 @@
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/async-limiter/-/async-limiter-1.0.0.tgz",
-      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
-      "dev": true
+      "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
     },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -1344,14 +1359,12 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
       "version": "1.8.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/aws4/-/aws4-1.8.0.tgz",
-      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
-      "dev": true
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
     "babel-code-frame": {
       "version": "6.26.0",
@@ -1577,7 +1590,6 @@
       "version": "1.0.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -1685,6 +1697,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/boxen/-/boxen-1.3.0.tgz",
@@ -2055,8 +2072,7 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
     "chalk": {
       "version": "2.4.2",
@@ -2309,7 +2325,6 @@
       "version": "1.0.8",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -2525,8 +2540,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -2696,7 +2710,6 @@
       "version": "1.14.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -2854,8 +2867,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "delegates": {
       "version": "1.0.0",
@@ -3012,7 +3024,6 @@
       "version": "0.1.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -3288,7 +3299,6 @@
       "version": "1.0.7",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/eventsource/-/eventsource-1.0.7.tgz",
       "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==",
-      "dev": true,
       "requires": {
         "original": "^1.0.0"
       }
@@ -3429,8 +3439,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -3532,20 +3541,17 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -3721,14 +3727,12 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/form-data/-/form-data-2.3.3.tgz",
       "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -4432,7 +4436,6 @@
       "version": "0.1.7",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -4566,14 +4569,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
       "version": "5.1.3",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/har-validator/-/har-validator-5.1.3.tgz",
       "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
       "requires": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -4797,7 +4798,6 @@
       "version": "1.2.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/http-signature/-/http-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -5412,8 +5412,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-utf8": {
       "version": "0.2.1",
@@ -5463,8 +5462,7 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
     "istanbul-api": {
       "version": "2.1.6",
@@ -5784,8 +5782,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jsesc": {
       "version": "1.3.0",
@@ -5802,20 +5799,17 @@
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
       "version": "3.3.3",
@@ -5851,7 +5845,6 @@
       "version": "1.4.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/jsprim/-/jsprim-1.4.1.tgz",
       "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -6499,14 +6492,12 @@
     "mime-db": {
       "version": "1.40.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/mime-db/-/mime-db-1.40.0.tgz",
-      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-      "dev": true
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA=="
     },
     "mime-types": {
       "version": "2.1.24",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/mime-types/-/mime-types-2.1.24.tgz",
       "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-      "dev": true,
       "requires": {
         "mime-db": "1.40.0"
       }
@@ -7156,8 +7147,7 @@
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -7313,7 +7303,6 @@
       "version": "1.0.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/original/-/original-1.0.2.tgz",
       "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
-      "dev": true,
       "requires": {
         "url-parse": "^1.4.3"
       }
@@ -7715,8 +7704,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "pify": {
       "version": "3.0.0",
@@ -8050,8 +8038,7 @@
     "psl": {
       "version": "1.1.33",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/psl/-/psl-1.1.33.tgz",
-      "integrity": "sha512-LTDP2uSrsc7XCb5lO7A8BI1qYxRe/8EqlRvMeEl6rsnYAqDOl8xHR+8lSAIVfrNaSAlTPTNOCgNjWcoUL3AZsw==",
-      "dev": true
+      "integrity": "sha512-LTDP2uSrsc7XCb5lO7A8BI1qYxRe/8EqlRvMeEl6rsnYAqDOl8xHR+8lSAIVfrNaSAlTPTNOCgNjWcoUL3AZsw=="
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -8091,8 +8078,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.4.1",
@@ -8109,8 +8095,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
     "querystring": {
       "version": "0.2.0",
@@ -8127,8 +8112,7 @@
     "querystringify": {
       "version": "2.1.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/querystringify/-/querystringify-2.1.1.tgz",
-      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
-      "dev": true
+      "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
     },
     "randombytes": {
       "version": "2.1.0",
@@ -8432,7 +8416,6 @@
       "version": "2.88.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/request/-/request-2.88.0.tgz",
       "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -8471,8 +8454,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resolve": {
       "version": "1.11.1",
@@ -8650,8 +8632,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -8665,8 +8646,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass-graph": {
       "version": "2.2.4",
@@ -9515,7 +9495,6 @@
       "version": "1.16.1",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/sshpk/-/sshpk-1.16.1.tgz",
       "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -9802,6 +9781,11 @@
         "inherits": "2"
       }
     },
+    "tassign": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tassign/-/tassign-1.0.0.tgz",
+      "integrity": "sha1-p2j5h1oPzMFfA9aLSsAgYEFeR50="
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/term-size/-/term-size-1.2.0.tgz",
@@ -10165,7 +10149,6 @@
       "version": "2.4.3",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/tough-cookie/-/tough-cookie-2.4.3.tgz",
       "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
-      "dev": true,
       "requires": {
         "psl": "^1.1.24",
         "punycode": "^1.4.1"
@@ -10174,8 +10157,7 @@
         "punycode": {
           "version": "1.4.1",
           "resolved": "https://repository.akkerweb.nl/repository/npm-group/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
         }
       }
     },
@@ -10277,7 +10259,6 @@
       "version": "0.6.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -10285,8 +10266,7 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "type-is": {
       "version": "1.6.18",
@@ -10459,7 +10439,6 @@
       "version": "4.2.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/uri-js/-/uri-js-4.2.2.tgz",
       "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -10492,7 +10471,6 @@
       "version": "1.4.7",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/url-parse/-/url-parse-1.4.7.tgz",
       "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
-      "dev": true,
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -10555,8 +10533,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-      "dev": true
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -10587,7 +10564,6 @@
       "version": "1.10.0",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/verror/-/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
diff --git a/package.json b/package.json
index 4893576..ce7b768 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,13 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "@aspnet/signalr": "^1.1.4",
     "@farmmaps/common": "file:dist/common",
+    "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
     "material": "file:dist/material",
     "rxjs": "~6.3.3",
+    "tassign": "^1.0.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
   },
diff --git a/projects/common/ng-package.json b/projects/common/ng-package.json
index 1cb4d65..713d998 100644
--- a/projects/common/ng-package.json
+++ b/projects/common/ng-package.json
@@ -3,5 +3,8 @@
   "dest": "../../dist/common",
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "whitelistedNonPeerDependencies": [
+    "."
+  ]
 }
\ No newline at end of file
diff --git a/projects/common/package-lock.json b/projects/common/package-lock.json
index bd9c5da..ff87861 100644
--- a/projects/common/package-lock.json
+++ b/projects/common/package-lock.json
@@ -1,5 +1,61 @@
 {
   "name": "@farmmaps/common",
   "version": "0.0.1",
-  "lockfileVersion": 1
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@angular/common": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.0.tgz",
+      "integrity": "sha512-5HNGT+XsY+7sQcNoFRqhbUfVdnBAtXaupmMbBclnQHTon9y9Ijp0ocYi7zxx39feo6xYF5HhBMnDPkFgtAnsYQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/core": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.2.0.tgz",
+      "integrity": "sha512-tlCDDM9IknXvVLk1sg0lzCO4OREM54i1bFtTpl5kPtugK6l4kYCOH78UzDPHnOzzI3LGLj8Hb2NiObVa9c4fdg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.2.1.tgz",
+      "integrity": "sha512-7etP9X9jKIkbuDzU3ngI2jQhHQDZxIu0ErvlkHb7u7YH9akIOLVkXvz2mTMvcFABWZhze64UjFuEgR46b6WGSw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@ngrx/effects": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-7.2.0.tgz",
+      "integrity": "sha512-vymKSoubYlUWGbiclPK0N/LwB409sB9atjSTQRy2EisZfFtQ2tCDqmk4JGgDy/gV9SqZWrwPSy1xXsLqYnyN3g=="
+    },
+    "@ngrx/store": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-7.2.0.tgz",
+      "integrity": "sha512-E9c0cDot0HeE0mXyeqw18SwmJ2+eKnA5mMMfwvoskpMInCYGI2pq1i6/lCVQ2wrEHSH+KvObK4PQbepcA9vP+w=="
+    },
+    "angular-oauth2-oidc": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
+      "integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
+      "requires": {
+        "jsrsasign": "^8.0.12",
+        "tslib": "^1.9.0"
+      }
+    },
+    "jsrsasign": {
+      "version": "8.0.12",
+      "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
+      "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
+    },
+    "tslib": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+    }
+  }
 }
diff --git a/projects/common/package.json b/projects/common/package.json
index b31cd18..acc1daf 100644
--- a/projects/common/package.json
+++ b/projects/common/package.json
@@ -1,8 +1,19 @@
 {
   "name": "@farmmaps/common",
   "version": "0.0.1",
+  "dependencies": {
+    "angular-oauth2-oidc": "^5.0.2"
+  },
   "peerDependencies": {
+    "@ng-bootstrap/ng-bootstrap": "^4.2.1",
     "@angular/common": "^7.2.0",
-    "@angular/core": "^7.2.0"
+    "@angular/core": "^7.2.0",
+    "@angular/forms": "^7.2.0",
+    "@ngrx/effects": "^7.2",
+    "@ngrx/router-store": "^7.2",
+    "@ngrx/store": "^7.2",
+    "tassign": "^1.0.0",
+    "bootstrap": "^4.3.1",
+    "@aspnet/signalr": "^1.1.4"
   }
 }
diff --git a/projects/common/src/lib/_theme.scss b/projects/common/src/lib/_theme.scss
new file mode 100644
index 0000000..ac853f9
--- /dev/null
+++ b/projects/common/src/lib/_theme.scss
@@ -0,0 +1,2 @@
+//$theme-colors: ( "primary": #a7ce39, "secondary": #ffc800 );
+//$theme-colors: ( "primary": #a7ce39);
\ No newline at end of file
diff --git a/projects/common/src/lib/actions/app-common.actions.ts b/projects/common/src/lib/actions/app-common.actions.ts
new file mode 100644
index 0000000..0f5a3b3
--- /dev/null
+++ b/projects/common/src/lib/actions/app-common.actions.ts
@@ -0,0 +1,214 @@
+import { Action } from '@ngrx/store';
+
+import { IItemTypes } from '../models/item.types';
+import { IListItem } from '../models/list.item';
+import { IUser } from '../models/user';
+
+export const INITUSER = '[AppCommon] InitUser';
+export const INITUSERSUCCESS = '[AppCommon] InitUserSuccess';
+
+export const INITROOT = '[Explorer] InitRoot';
+export const INITROOTSUCCESS = '[Explorer] InitRootSuccess';
+
+export const OPENMODAL = '[AppCommon] OpenModal';
+export const CLOSEMODAL = '[AppCommon] CloseModal';
+export const LOGIN = '[AppCommon] Login';
+export const INITIALIZED = '[AppCommon] Initialized';
+export const ESCAPE = '[AppCommon] Escape';
+
+export const LOADITEMTYPES = '[AppCommon] LoadItemTypes';
+export const LOADITEMTYPESSUCCESS = '[AppCommon] LoadItemTypesSuccess';
+
+export const ITEMCHANGEDEVENT = '[AppCommon] ItemChangedEvent';
+export const ITEMADDEDEVENT = '[AppCommon] ItemAddedEvent';
+
+export const TASKSTARTEVENT = '[AppCommon] TaskStartEvent';
+export const TASKENDEVENT = '[AppCommon] TaskEndEvent';
+export const TASKERRORTEVENT = '[AppCommon] TaskErrorEvent';
+
+export const DELETEITEMS = '[AppCommon] DeleteItems';
+export const DELETEITEMSSUCCESS = '[AppCommon] DeleteItemsSuccess';
+
+export const STARTROUTELOADING = '[AppCommon] StartRouteLoading';
+export const ENDROUTELOADING = '[AppCommon] EndRouteLoading';
+
+export const FULLSCREEN = '[AppCommon] FullScreen';
+export const SHOWNAVBAR = '[AppCommon] ShowNavBar';
+
+export const EDITITEM = "[AppCommon] EditItem";
+
+export const VIEWITEM = "[AppCommon] ViewItem";
+
+export const FAIL = '[AppCommon] Fail';
+
+export class InitUser implements Action {
+  readonly type = INITUSER;
+
+  constructor() { }
+}
+
+export class InitUserSuccess implements Action {
+  readonly type = INITUSERSUCCESS;
+
+  constructor(public user:IUser ) { }
+}
+
+export class InitRoot implements Action {
+  readonly type = INITROOT;
+
+  constructor() { }
+}
+
+export class InitRootSuccess implements Action {
+  readonly type = INITROOTSUCCESS;
+
+  constructor(public items:IListItem[]) { }
+}
+
+export class OpenModal implements Action {
+  readonly type = OPENMODAL;
+
+  constructor(public modalName: string) { }
+}
+
+export class CloseModal implements Action {
+  readonly type = CLOSEMODAL;
+
+  constructor() { }
+}
+
+export class StartRouteLoading implements Action {
+  readonly type = STARTROUTELOADING;
+
+  constructor() { }
+}
+
+export class EndRouteLoading implements Action {
+  readonly type = ENDROUTELOADING;
+
+  constructor() { }
+}
+
+export class Login implements Action {
+  readonly type = LOGIN;
+
+  constructor(public url: string) { }
+}
+
+export class Initialized implements Action {
+  readonly type = INITIALIZED;
+
+  constructor() { }
+}
+
+export class Escape implements Action {
+  readonly type = ESCAPE;
+
+  constructor(public escapeKey:boolean, public click:boolean) { }
+}
+
+export class LoadItemTypes implements Action {
+  readonly type = LOADITEMTYPES;
+
+  constructor() { }
+}
+
+export class LoadItemTypesSuccess implements Action {
+  readonly type = LOADITEMTYPESSUCCESS;
+
+  constructor(public itemTypes: IItemTypes) { }
+}
+
+export class Fail implements Action {
+  readonly type = FAIL;
+
+  constructor(public payload: string) { }
+}
+
+export class ItemChangedEvent implements Action {
+  readonly type = ITEMCHANGEDEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
+export class ItemAddedEvent implements Action {
+  readonly type = ITEMADDEDEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
+export class TaskStartEvent implements Action {
+  readonly type = TASKSTARTEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
+export class TaskEndEvent implements Action {
+  readonly type = TASKENDEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
+export class TaskErrorEvent implements Action {
+  readonly type = TASKERRORTEVENT;
+
+  constructor(public itemCode: string, public attributes: any) { }
+}
+
+export class DeleteItems implements Action {
+  readonly type = DELETEITEMS;
+
+  constructor(public itemCodes: string[]) { }
+}
+
+export class DeleteItemsSuccess implements Action {
+  readonly type = DELETEITEMSSUCCESS;
+
+  constructor(public deletedItemCodes: string[]) { }
+}
+
+export class EditItem implements Action {
+  readonly type = EDITITEM;
+
+  constructor(public item: IListItem) { }
+}
+
+export class ViewItem implements Action {
+  readonly type = VIEWITEM;
+
+  constructor(public item: IListItem) { }
+}
+
+export class FullScreen implements Action {
+  readonly type = FULLSCREEN;
+
+  constructor() { }
+}
+
+export class ShowNavBar implements Action {
+  readonly type = SHOWNAVBAR;
+
+  constructor() { }
+}
+
+export type Actions = OpenModal
+  | InitRoot
+  | InitRootSuccess
+  | CloseModal
+  | Login
+  | Initialized
+  | ItemChangedEvent
+  | Escape
+  | LoadItemTypes
+  | LoadItemTypesSuccess
+  | DeleteItems
+  | DeleteItemsSuccess
+  | Fail
+  | EditItem
+  | ViewItem
+  | FullScreen
+  | ShowNavBar
+  | StartRouteLoading
+  | EndRouteLoading
+  | InitUser
+  | InitUserSuccess;
diff --git a/projects/common/src/lib/common-routing.module.ts b/projects/common/src/lib/common-routing.module.ts
new file mode 100644
index 0000000..733adac
--- /dev/null
+++ b/projects/common/src/lib/common-routing.module.ts
@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
+import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
+import {FullScreenGuard} from './services/full-screen-guard.service';
+import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
+import {NotFoundComponent} from './components/not-found/not-found.component';
+
+
+const routes = [
+  {
+    path: 'cb',
+    component: AuthCallbackComponent,
+    canActivate: [AuthCallbackGuard],
+  },
+  {
+    path: 'loggedout',
+    component: SessionClearedComponent,
+    canActivate: [FullScreenGuard],
+  },
+  {
+    path: '**', component: NotFoundComponent,
+    data: {
+      title: '404 - Not found',
+      meta: [{name: 'description', content: '404 - Error'}],
+      links: [],
+      // links: [
+      //  { rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
+      //  { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
+      //]
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppCommonRoutingModule {
+}
diff --git a/projects/common/src/lib/common.component.spec.ts b/projects/common/src/lib/common.component.spec.ts
deleted file mode 100644
index 77aac14..0000000
--- a/projects/common/src/lib/common.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CommonComponent } from './common.component';
-
-describe('CommonComponent', () => {
-  let component: CommonComponent;
-  let fixture: ComponentFixture<CommonComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CommonComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CommonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/common/src/lib/common.component.ts b/projects/common/src/lib/common.component.ts
deleted file mode 100644
index 6281079..0000000
--- a/projects/common/src/lib/common.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-common',
-  template: `
-    <p>
-      common works!
-    </p>
-  `,
-  styles: []
-})
-export class CommonComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/projects/common/src/lib/common.module.ts b/projects/common/src/lib/common.module.ts
index 5d270ea..6ebcad4 100644
--- a/projects/common/src/lib/common.module.ts
+++ b/projects/common/src/lib/common.module.ts
@@ -1,10 +1,102 @@
-import { NgModule } from '@angular/core';
-import { CommonComponent } from './common.component';
+// angular modules
+import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+
+// external modules
+import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
+import { StoreModule,Store } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+
+// routing module
+import { AppCommonRoutingModule } from './common-routing.module';
+
+import { MODULE_NAME }  from './module-name';
+import * as appCommonReducers from './reducers/app-common.reducer';
+import * as appCommonEffects from './effects/app-common.effects';
+
+//components
+import { FolderService } from './services/folder.service';
+import { TimespanService} from './services/timespan.service';
+import { ItemService} from './services/item.service';
+import { EventService } from './services/event.service';
+import { TypeaheadService } from './services/typeahead.service';
+import { UserService } from './services/user.service';
+import { AppConfig } from './shared/app.config';
+import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
+import { appConfigFactory } from "./shared/app.config.factory";
+import { AuthGuard } from './services/auth-guard.service';
+import { NavBarGuard } from './services/nav-bar-guard.service';
+import { FullScreenGuard } from './services/full-screen-guard.service';
+import { SafePipe } from './shared/safe.pipe';
+import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
+import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
+import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
+import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { SidePanelComponent } from './components/side-panel/side-panel.component';
+import { TimespanComponent } from './components/timespan/timespan.component';
+import { TagInputComponent } from './components/tag-input/tag-input.component';
 
 @NgModule({
-  declarations: [CommonComponent],
   imports: [
+    CommonModule,
+    HttpClientModule,
+    AppCommonRoutingModule,
+    StoreModule.forFeature(MODULE_NAME, appCommonReducers.reducer ),
+    EffectsModule.forFeature([appCommonEffects.AppCommonEffects]),
+    OAuthModule.forRoot(),
+    NgbModule,
+    FormsModule
   ],
-  exports: [CommonComponent]
+  providers: [
+    DatePipe
+  ],
+  declarations: [
+    AuthCallbackComponent,
+    SidePanelComponent,
+    SafePipe,
+    NotFoundComponent,
+    ResumableFileUploadComponent,
+    TimespanComponent,
+    TagInputComponent,
+    SessionClearedComponent
+  ],
+  exports: [NgbModule, ResumableFileUploadComponent, SidePanelComponent, CommonModule, HttpClientModule, SafePipe, TimespanComponent, TagInputComponent ]
 })
-export class CommonModule { }
+export class AppCommonModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: AppCommonModule,
+      providers: [
+        AppConfig,
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appConfigFactory,
+          deps: [Injector, AppConfig, OAuthService],
+          multi: true
+        },       
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: AccessTokenInterceptor,
+          multi: true
+        },
+        ResumableFileUploadService,
+        EventService,
+        FolderService,
+        UserService,
+        ItemService,
+        TypeaheadService,
+        AuthCallbackGuard,
+        AuthGuard,
+        NavBarGuard,
+        FullScreenGuard,
+        TimespanService
+      ]
+    };
+  }
+}
diff --git a/projects/common/src/lib/common.service.spec.ts b/projects/common/src/lib/common.service.spec.ts
deleted file mode 100644
index e2b7548..0000000
--- a/projects/common/src/lib/common.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { CommonService } from './common.service';
-
-describe('CommonService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: CommonService = TestBed.get(CommonService);
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/projects/common/src/lib/common.service.ts b/projects/common/src/lib/common.service.ts
deleted file mode 100644
index 343dc86..0000000
--- a/projects/common/src/lib/common.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CommonService {
-
-  constructor() { }
-}
diff --git a/projects/common/src/lib/components/auth-callback/auth-callback.component.ts b/projects/common/src/lib/components/auth-callback/auth-callback.component.ts
new file mode 100644
index 0000000..df8ef29
--- /dev/null
+++ b/projects/common/src/lib/components/auth-callback/auth-callback.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+    selector: 'auth-callback',
+    template:'<div></div>'
+})
+export class AuthCallbackComponent {
+
+  constructor() {
+  }
+}
diff --git a/projects/common/src/lib/components/auth-callback/auth-callback.guard.ts b/projects/common/src/lib/components/auth-callback/auth-callback.guard.ts
new file mode 100644
index 0000000..80e5002
--- /dev/null
+++ b/projects/common/src/lib/components/auth-callback/auth-callback.guard.ts
@@ -0,0 +1,15 @@
+import { Router, CanActivate } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import {  } from '@angular/router';
+
+@Injectable()
+export class AuthCallbackGuard implements CanActivate {
+
+  constructor(private router$: Router,private oauthService$:OAuthService) {}
+
+  canActivate() {
+    this.router$.navigateByUrl(this.oauthService$.state);
+    return false;
+  }
+}
diff --git a/projects/common/src/lib/components/not-found/not-found.component.html b/projects/common/src/lib/components/not-found/not-found.component.html
new file mode 100644
index 0000000..75d48f6
--- /dev/null
+++ b/projects/common/src/lib/components/not-found/not-found.component.html
@@ -0,0 +1,5 @@
+<div class="wrapper">
+  <header class="header  header--large">
+    <h1 class="title">This page doesn't exist</h1>    
+  </header>  
+</div>
diff --git a/projects/common/src/lib/components/not-found/not-found.component.ts b/projects/common/src/lib/components/not-found/not-found.component.ts
new file mode 100644
index 0000000..0ebd7e9
--- /dev/null
+++ b/projects/common/src/lib/components/not-found/not-found.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'not-found',
+    templateUrl: './not-found.component.html'
+    // styleUrls: ['./not-found.component.css']
+})
+export class NotFoundComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+}
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.html b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.html
new file mode 100644
index 0000000..278221c
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.html
@@ -0,0 +1,22 @@
+<div class="resumable-file-upload closed" [ngClass]="{'closed': uploadService.isClosed }">
+  <div>
+    <div class="card">
+      <div class="card-header  p-3 bg-primary text-white">
+        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress}}</span> %)</span>
+        <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
+        <span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
+      </div>
+      <div [ngClass]="{'minimized': uploadService.isMinimized }">
+        <div class="card-block p-3">
+          <ul class="list-unstyled">
+            <li *ngFor="let file of uploadService.files" class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
+              <div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fa fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fa fa-check"></span></div>
+              <div class="progress-container"><div class="progress-bar" [style.width]="file.progress"></div></div>
+              <div class="errormessage">{{file.errorMessage}}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.scss b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.scss
new file mode 100644
index 0000000..db06cd5
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.scss
@@ -0,0 +1,104 @@
+@import "../../theme.scss";
+
+/* Import Bootstrap & Fonts */
+
+@import "~bootstrap/scss/bootstrap.scss";
+
+div.resumable-file-upload {
+  position: fixed;
+  right: 0px;
+  bottom: 0px;
+  width: 300px;
+  max-height: 250px;
+  /*z-index:2000 !important;*/
+}
+
+div.minimized {
+    height: 0px;
+}
+
+div.closed {
+    height: 0px;
+}
+
+div.card {
+    margin-bottom: 0px;
+}
+
+div.card-block {
+    max-height: calc(250px - 41px);
+    overflow-y: auto;
+}
+
+div.minimized div.card-block {
+    height: 0px;
+}
+
+div.card-header span.fa {
+    padding-left: 5px;
+}
+
+.upload-file {
+    padding-top: 3px;
+}
+
+    .upload-file .progress-container {
+        height: 3px;
+        width: 100%;
+        margin-top:4px;
+    }
+
+        .upload-file .progress-container .progress-bar {
+            display: block;
+            background-color: color("green");
+            width: 0%;
+            height: 100%;
+        }
+
+    .upload-file.done .progress-container .progress-bar {
+        display: none;
+    }
+
+    .upload-file > div > span.file-name {
+        display: inline-block;
+        width: calc(100% - 20px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+.upload-file.busy > div > span.fa-times {
+  color: theme-color("danger");
+  width: 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+  .upload-file.done > div > span.fa-times {
+    display: none;
+  }
+
+  .upload-file.done > div > span.fa-check {
+    color: color("green");
+    width: 20px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .upload-file > div.errormessage {
+    color: theme-color("danger");
+    display: none;
+  }
+
+  .upload-file.error > div.errormessage {
+    display: block;
+  }
+
+  .upload-file.busy > div > span.fa-check {
+    display: none;
+  }
+
+.resumable-file-upload ul {
+  padding:0px;
+}
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts
new file mode 100644
index 0000000..8f6c561
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts
@@ -0,0 +1,66 @@
+import { Component, Input, ElementRef, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { ResumableFileUploadService, File } from './resumable-file-upload.service';
+import { Subscription } from 'rxjs';
+
+
+@Component({
+    selector: 'resumable-file-upload',
+    templateUrl: './resumable-file-upload.component.html',
+    styleUrls: ['./resumable-file-upload.component.scss']
+})
+
+export class ResumableFileUploadComponent implements OnInit, OnDestroy {
+
+  private browseFileElement$: ElementRef;
+
+  @Input('browseFileElement')
+  get browseFileElement(): ElementRef {
+    return this.browseFileElement$;
+  }
+
+  set browseFileElement(element: ElementRef) {
+    this.uploadService.assignFileBrowse(element);
+    this.browseFileElement$ = element;
+  }
+
+  @Input('browseDirectoryElement')
+  set browseDirectoryElement(element: ElementRef) {
+    this.uploadService.assignDirectoryBrowse(element);
+  }
+
+  @Input('fileDropElement')
+  set fileDropElement(element: ElementRef) {
+    this.uploadService.assignDrop(element);
+  }
+
+  @Input('parentCode')
+  set parentCode(parentCode: string) {
+    if (parentCode && parentCode != "null" && parentCode != "")
+      this.uploadService.parentCode = parentCode;
+    else
+      this.uploadService.parentCode = null;
+  }           
+
+    constructor(private cd: ChangeDetectorRef, public uploadService: ResumableFileUploadService) {
+    }
+
+    private refreshSub: Subscription;
+
+    ngOnInit() {
+      this.refreshSub = this.uploadService.refresh.subscribe((e: any) => {
+        this.cd.markForCheck();
+      });  
+    }
+
+    ngOnDestroy() {
+      if(this.refreshSub) this.refreshSub.unsubscribe();
+    }
+
+    //this.cd.markForCheck();
+    @HostListener('window:beforeunload')
+    windowBeforeUnload = function () {
+        if (this.uploadService.isUploading) {
+            return false;
+        }
+    }        
+}
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts
new file mode 100644
index 0000000..156e830
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts
@@ -0,0 +1,196 @@
+import { Injectable, ElementRef } from '@angular/core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { Subject ,  of } from 'rxjs';
+import { HttpClient, HttpParams } from "@angular/common/http";
+
+
+declare var require; // avoid missing property error on require
+
+@Injectable()
+export class ResumableFileUploadService {
+  private resumable: any;
+  private dropElement: ElementRef;
+  private fileBrowseElement: ElementRef;
+  private directoryBrowseElement: ElementRef;
+  public files: Array<File> = new Array<File>();
+  public isUploading = false;
+  public totalProgress = "0";
+  public isClosed = true;
+  public isMinimized = false;
+  public parentCode: string;
+  public refresh: Subject<any> = new Subject<any>();
+
+  constructor(private httpClient: HttpClient,private oauthService: OAuthService) {
+    this.init();
+  }
+
+  init = function () {
+    this.ref
+    require.ensure([], require => {
+      let Resumable = require('./resumable.js');
+      var other = this;
+      this.resumable = new Resumable(
+        {
+          target: '/api/v1/file/chunk',
+          query: function (file, chunk) {
+            var options = {};
+            if (file.parentCode) options["parentCode"] = file.parentCode;
+            if (chunk.tested) {
+              if (file.file.geoRefJson) options["geoRefJson"] = file.file.geoRefJson;
+              if (file.file.attributes) options["attributes"] = file.file.attributes;
+            }                         
+            return options;
+          },
+          headers: function (file) {
+            return { Authorization: "Bearer " + other.oauthService.getAccessToken() }
+          },
+          generateUniqueIdentifier: function (file, event) {
+            var params = new HttpParams()
+              .set("name", file.fileName || file.name)
+              .set("size", file.size);
+
+            return other.httpClient.post("/api/v1/file",params).toPromise().then(res => res.code);
+          },
+          chunkNumberParameterName: 'chunkNumber',
+          chunkSizeParameterName: 'chunkSize',
+          currentChunkSizeParameterName: 'currentChunkSize',
+          totalSizeParameterName: 'size',
+          typeParameterName: 'type',
+          identifierParameterName: 'code',
+          fileNameParameterName: 'name',
+          relativePathParameterName: 'relativePath',
+          totalChunksParameterName: 'totalChunks'
+        }
+      ) as any;
+
+      var other = this;
+
+      this.resumable.on('catchAll', function (event) {
+        other.isUploading = other.resumable.isUploading();
+        other.totalProgress = (other.resumable.progress() * 100).toFixed(0);
+        other.refresh.next({});
+      });
+
+      this.resumable.on('filesAdded', function (files) {
+        files.forEach(function (file) {
+          file.parentCode = other.parentCode;
+          other.files.push(new File(file));
+        });
+        other.isClosed = false;
+        other.resumable.upload();
+      });
+
+      this.resumable.on('fileSuccess', function (file) {
+        var index = other.getIndex(file);
+        if (index >= 0) {
+          other.files[index].success = true;
+        }
+      });
+
+      this.resumable.on('error', function (message,file) {
+        var index = other.getIndex(file);
+        if (index >= 0) {
+          other.files[index].error = true;
+          other.files[index].errorMessage = message;
+        }
+      });
+
+      this.resumable.on('fileProgress', function (file) {
+        var index = other.getIndex(file);
+        if (index >= 0) {
+          other.files[index].progress = (file.progress() * 100) + '%';
+        }
+      });
+
+      if (this.dropElement) this.resumable.assignDrop(this.dropElement);
+      if (this.fileBrowseElement) this.resumable.assignBrowse(this.fileBrowseElement);
+      if (this.directoryBrowseElement) this.resumable.assignBrowse(this.directoryBrowseElement, true);
+    });
+  }
+
+  addFiles = (files: any[], event: any, geoRefJson?: string, attributes?: any) => {
+    for (let f of files) {
+      if (geoRefJson) f.geoRefJson = geoRefJson;
+      if (attributes) f.attributes = JSON.stringify(attributes);
+    }
+    this.resumable.addFiles(files, event);
+  }
+
+  assignDrop = function (element: ElementRef) {
+    if (this.resumable) {
+      this.resumable.assignDrop(element);
+    }
+    this.dropElement = element;
+  }
+
+  assignFileBrowse = function (element: ElementRef) {
+    if (this.resumable) {
+      this.resumable.assignBrowse(element);
+    }
+    this.fileBrowseElement = element;
+  }
+
+  assignDirectoryBrowse = function (element: ElementRef) {
+    if (this.resumable) {
+      this.resumable.assignBrowse(element, true);
+    }
+    this.directoryBrowseElement = element;
+  }
+
+  getIndex = function (file) {
+    for (var i = 0; i < this.files.length; i++) {
+      if (this.files[i].identifier == file.uniqueIdentifier)
+        return i;
+    }
+    return -1;
+  }
+
+  toggleMinimize = function () {
+    this.isMinimized = !this.isMinimized;
+  };
+
+  cancelFile = function (file) {
+    file.file.cancel();
+    var index = this.files.indexOf(file, 0);
+    if (index > -1) {
+      this.files.splice(index, 1);
+    }
+  };
+
+  doClose = function () {
+    this.resumable.cancel();
+    this.files = new Array<File>();
+    this.isClosed = true;
+  }
+
+  close = function () {
+    let close = true;
+    if (this.isUploading) {
+      close = false;
+    }
+    if (close) {
+      this.doClose();
+    }
+  }
+}
+
+export class File {
+  private file: any;
+  public fileName: string;
+  public progress: string;
+  public identifier: string;
+  public success: boolean;
+  public error: boolean;
+  public errorMessage: string;
+
+
+  constructor(file: any) {
+    this.file = file;
+    this.fileName = file.fileName;
+    this.progress = (file.progress() * 100) + '%';
+    this.identifier = file.uniqueIdentifier;
+    this.success = false;
+    this.error = false;
+    this.errorMessage = "";
+  }
+}
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable.d.ts b/projects/common/src/lib/components/resumable-file-upload/resumable.d.ts
new file mode 100644
index 0000000..6d6965d
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable.d.ts
@@ -0,0 +1,370 @@
+// Type definitions for Resumable.js
+// Project: https://github.com/23/resumable.js
+// Definitions by: Bazyli Brzóska <https://invent.life/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare module Resumable  {
+  export interface ConfigurationHash {
+    /**
+     * The target URL for the multipart POST request. This can be a string or a function that allows you you to construct and return a value, based on supplied params. (Default: /)
+     **/
+    target?: string;
+    /**
+     * The size in bytes of each uploaded chunk of data. The last uploaded chunk will be at least this size and up to two the size, see Issue #51 for details and reasons. (Default: 1*1024*1024)
+     **/
+    chunkSize?: number;
+    /**
+     * Force all chunks to be less or equal than chunkSize. Otherwise, the last chunk will be greater than or equal to chunkSize. (Default: false)
+     **/
+    forceChunkSize?: boolean;
+    /**
+     * Number of simultaneous uploads (Default: 3)
+     **/
+    simultaneousUploads?: number;
+    /**
+     * The name of the multipart POST parameter to use for the file chunk (Default: file)
+     **/
+    fileParameterName?: string;
+    /**
+     * The name of the chunk index (base-1) in the current upload POST parameter to use for the file chunk (Default: resumableChunkNumber)
+     */
+    chunkNumberParameterName?: string;
+    /**
+     * The name of the total number of chunks POST parameter to use for the file chunk (Default: resumableTotalChunks)
+     */
+    totalChunksParameterName?: string;
+    /**
+     * The name of the general chunk size POST parameter to use for the file chunk (Default: resumableChunkSize)
+     */
+    chunkSizeParameterName?: string;
+    /**
+     * The name of the total file size number POST parameter to use for the file chunk (Default: resumableTotalSize)
+     */
+    totalSizeParameterName?: string;
+    /**
+     * The name of the unique identifier POST parameter to use for the file chunk (Default: resumableIdentifier)
+     */
+    identifierParameterName?: string;
+    /**
+     * The name of the original file name POST parameter to use for the file chunk (Default: resumableFilename)
+     */
+    fileNameParameterName?: string;
+    /**
+     * The name of the file's relative path POST parameter to use for the file chunk (Default: resumableRelativePath)
+     */
+    relativePathParameterName?: string;
+    /**
+     * The name of the current chunk size POST parameter to use for the file chunk (Default: resumableCurrentChunkSize)
+     */
+    currentChunkSizeParameterName?: string;
+    /**
+     * The name of the file type POST parameter to use for the file chunk (Default: resumableType)
+     */
+    typeParameterName?: string;
+    /**
+     * Extra parameters to include in the multipart POST with data. This can be an object or a function. If a function, it will be passed a ResumableFile and a ResumableChunk object (Default: {})
+     **/
+    query?: Object;
+    /**
+     * Method for chunk test request. (Default: 'GET')
+     **/
+    testMethod?: 'GET'|'POST'|'OPTIONS'|'PUT'|'DELETE';
+    /**
+     * Method for chunk upload request. (Default: 'POST')
+     **/
+    uploadMethod?: 'GET'|'POST'|'OPTIONS'|'PUT'|'DELETE';
+    /**
+     * Extra prefix added before the name of each parameter included in the multipart POST or in the test GET. (Default: '')
+     **/
+    parameterNamespace?: string;
+    /**
+     * Extra headers to include in the multipart POST with data. This can be an object or a function that allows you to construct and return a value, based on supplied file (Default: {})
+     **/
+    headers?: Object | ((file) => Object);
+    /**
+     * Method to use when POSTing chunks to the server (multipart or octet) (Default: multipart)
+     **/
+    method?: 'multipart' | 'octet';
+    /**
+     * Prioritize first and last chunks of all files. This can be handy if you can determine if a file is valid for your service from only the first or last chunk. For example, photo or video meta data is usually located in the first part of a file, making it easy to test support from only the first chunk. (Default: false)
+     **/
+    prioritizeFirstAndLastChunk?: boolean;
+    /**
+     * Make a GET request to the server for each chunks to see if it already exists. If implemented on the server-side, this will allow for upload resumes even after a browser crash or even a computer restart. (Default: true)
+     **/
+    testChunks?: boolean;
+    /**
+     * Optional function to process each chunk before testing & sending. Function is passed the chunk as parameter, and should call the preprocessFinished method on the chunk when finished. (Default: null)
+     **/
+    preprocess?: (chunk:ResumableChunk) => ResumableChunk;
+    /**
+     * Override the function that generates unique identifiers for each file. (Default: null)
+     **/
+    generateUniqueIdentifier?: () => string;
+    /**
+     * Indicates how many files can be uploaded in a single session. Valid values are any positive integer and undefined for no limit. (Default: undefined)
+     **/
+    maxFiles?: number;
+    /**
+     * A function which displays the please upload n file(s) at a time message. (Default: displays an alert box with the message Please n one file(s) at a time.)
+     **/
+    maxFilesErrorCallback?: (files, errorCount) => void;
+    /**
+     * The minimum allowed file size. (Default: undefined)
+     **/
+    minFileSize?: boolean;
+    /**
+     * A function which displays an error a selected file is smaller than allowed. (Default: displays an alert for every bad file.)
+     **/
+    minFileSizeErrorCallback?:(file, errorCount) => void;
+    /**
+     * The maximum allowed file size. (Default: undefined)
+     **/
+    maxFileSize?: boolean;
+    /**
+     * A function which displays an error a selected file is larger than allowed. (Default: displays an alert for every bad file.)
+     **/
+    maxFileSizeErrorCallback?: (file, errorCount) => void;
+    /**
+     * The file types allowed to upload. An empty array allow any file type. (Default: [])
+     **/
+    fileType?: Array<string>;
+    /**
+     * A function which displays an error a selected file has type not allowed. (Default: displays an alert for every bad file.)
+     **/
+    fileTypeErrorCallback?: (file, errorCount) => void;
+    /**
+     * The maximum number of retries for a chunk before the upload is failed. Valid values are any positive integer and undefined for no limit. (Default: undefined)
+     **/
+    maxChunkRetries?: number;
+    /**
+     * The number of milliseconds to wait before retrying a chunk on a non-permanent error. Valid values are any positive integer and undefined for immediate retry. (Default: undefined)
+     **/
+    chunkRetryInterval?: number;
+    /**
+     * Standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true. (Default: false)
+     **/
+    withCredentials?: boolean;
+    /**
+     * setChunkTypeFromFile` Set chunk content-type from original file.type. (Default: false, if false default Content-Type: application/octet-stream)
+     **/
+    setChunkTypeFromFile?: boolean;
+  }
+  
+  export class Resumable {
+    constructor(options:ConfigurationHash);
+    
+    /**
+     * A boolean value indicator whether or not Resumable.js is supported by the current browser.
+     **/
+    support: boolean;
+    /**
+     * A hash object of the configuration of the Resumable.js instance.
+     **/
+    opts: ConfigurationHash;
+    /**
+     * An array of ResumableFile file objects added by the user (see full docs for this object type below).
+     **/
+    files: Array<ResumableFile>;
+    
+    events: Array<any>;
+    version: number;
+    
+    /**
+     * Assign a browse action to one or more DOM nodes. Pass in true to allow directories to be selected (Chrome only).
+     **/
+    assignBrowse(domNode: Element, isDirectory: boolean): void;
+    assignBrowse(domNodes: Array<Element>, isDirectory: boolean): void;
+    /**
+     * Assign one or more DOM nodes as a drop target.
+     **/
+    assignDrop(domNode: Element): void;
+    assignDrop(domNodes: Array<Element>): void;
+    unAssignDrop(domNode: Element): void;
+    unAssignDrop(domNodes: Array<Element>): void;
+    /**
+     * Start or resume uploading.
+     **/
+    upload(): void;
+    uploadNextChunk(): void;
+    /**
+     * Pause uploading.
+     **/
+    pause(): void;
+    /**
+     * Cancel upload of all ResumableFile objects and remove them from the list.
+     **/
+    cancel(): void;
+    fire(): void;
+    /**
+     * Returns a float between 0 and 1 indicating the current upload progress of all files.
+     **/
+    progress(): number;
+    /**
+     * Returns a boolean indicating whether or not the instance is currently uploading anything.
+     **/
+    isUploading(): boolean;
+    /**
+     * Add a HTML5 File object to the list of files.
+     **/
+    addFile(file: File): void;
+    /**
+     * Add an Array of HTML5 File objects to the list of files.
+     **/
+    addFiles(files: Array<File>): void;
+    /**
+     * Cancel upload of a specific ResumableFile object on the list from the list.
+     **/
+    removeFile(file: ResumableFile): void;
+    /**
+     * Look up a ResumableFile object by its unique identifier.
+     **/
+    getFromUniqueIdentifier(uniqueIdentifier: string): void;
+    /**
+     * Returns the total size of the upload in bytes.
+     **/
+    getSize(): void;
+    getOpt(o: string): any;
+    
+    // Events
+    /**
+     * Listen for event from Resumable.js (see below)
+     **/
+    on(event: string, callback: Function): void;
+    /**
+     *  A specific file was completed.
+     **/
+    on(event: 'fileSuccess', callback: (file: ResumableFile) => void); void;
+    /**
+     *  Uploading progressed for a specific file.
+     **/
+    on(event: 'fileProgress', callback: (file: ResumableFile) => void): void;
+    /**
+     *  A new file was added. Optionally, you can use the browser event object from when the file was added.
+     **/
+    on(event: 'fileAdded', callback: (file: ResumableFile, event: DragEvent) => void): void;
+    /**
+     *  New files were added.
+     **/
+    on(event: 'filesAdded', callback: (files: Array<ResumableFile>) => void): void;
+    /**
+     *  Something went wrong during upload of a specific file, uploading is being retried.
+     **/
+    on(event: 'fileRetry', callback: (file: ResumableFile) => void): void;
+    /**
+     *  An error occurred during upload of a specific file.
+     **/
+    on(event: 'fileError', callback: (file: ResumableFile, message: string) => void): void;
+    /**
+     *  Upload has been started on the Resumable object.
+     **/
+    on(event: 'uploadStart', callback: () => void): void;
+    /**
+     *  Uploading completed.
+     **/
+    on(event: 'complete', callback: () => void): void;
+    /**
+     *  Uploading progress.
+     **/
+    on(event: 'progress', callback: () => void): void;
+    /**
+     *  An error, including fileError, occurred.
+     **/
+    on(event: 'error', callback: (message: string, file: ResumableFile) => void): void;
+    /**
+     *  Uploading was paused.
+     **/
+    on(event: 'pause', callback: () => void): void;
+    /**
+     *  Triggers before the items are cancelled allowing to do any processing on uploading files.
+     **/
+    on(event: 'beforeCancel', callback: () => void): void;
+    /**
+     *  Uploading was canceled.
+     **/
+    on(event: 'cancel', callback: () => void): void;
+    /**
+     *  Started preparing file for upload
+     **/
+    on(event: 'chunkingStart', callback: (file: ResumableFile) => void): void;
+    /**
+     *  Show progress in file preparation
+     **/
+    on(event: 'chunkingProgress', callback: (file: ResumableFile, ratio) => void): void;
+    /**
+     *  File is ready for upload
+     **/
+    on(event: 'chunkingComplete', callback: (file: ResumableFile) => void): void;
+    /**
+     * Listen to all the events listed above with the same callback function.
+     **/
+    on(event: 'catchAll', callback: () => void);
+  }
+
+  export interface ResumableFile {
+    /**
+     * A back-reference to the parent Resumable object.
+     **/
+    resumableObj: Resumable;
+    /**
+     * The correlating HTML5 File object.
+     **/
+    file: File;
+    /**
+     * The name of the file.
+     **/
+    fileName: string;
+    /**
+     * The relative path to the file (defaults to file name if relative path doesn't exist)
+     **/
+    relativePath: string;
+    /**
+     * Size in bytes of the file.
+     **/
+    size: number;
+    /**
+     * A unique identifier assigned to this file object. This value is included in uploads to the server for reference, but can also be used in CSS classes etc when building your upload UI.
+     **/
+    uniqueIdentifier: string;
+    /**
+     * An array of ResumableChunk items. You shouldn't need to dig into these.
+     **/
+    chunks: Array<ResumableChunk>;
+
+
+    /**
+     * Returns a float between 0 and 1 indicating the current upload progress of the file. If relative is true, the value is returned relative to all files in the Resumable.js instance.
+     **/
+    progress: (relative: boolean) => number;
+    /**
+     * Abort uploading the file.
+     **/
+    abort: () => void;
+    /**
+     * Abort uploading the file and delete it from the list of files to upload.
+     **/
+    cancel: () => void;
+    /**
+     * Retry uploading the file.
+     **/
+    retry: () => void;
+    /**
+     * Rebuild the state of a ResumableFile object, including reassigning chunks and XMLHttpRequest instances.
+     **/
+    bootstrap: () => void;
+    /**
+     * Returns a boolean indicating whether file chunks is uploading.
+     **/
+    isUploading: () => boolean;
+    /**
+     * Returns a boolean indicating whether the file has completed uploading and received a server response.
+     **/
+    isComplete: () => boolean;
+  }
+  
+  class ResumableChunk {}
+}
+
+declare module 'resumablejs' {
+  export = Resumable.Resumable;
+}
diff --git a/projects/common/src/lib/components/resumable-file-upload/resumable.js b/projects/common/src/lib/components/resumable-file-upload/resumable.js
new file mode 100644
index 0000000..649e6a2
--- /dev/null
+++ b/projects/common/src/lib/components/resumable-file-upload/resumable.js
@@ -0,0 +1,1084 @@
+/*
+* MIT Licensed
+* http://www.23developer.com/opensource
+* http://github.com/23/resumable.js
+* Steffen Tiedemann Christensen, steffen@23company.com
+*/
+
+(function(){
+"use strict";
+
+  var Resumable = function(opts){
+    if ( !(this instanceof Resumable) ) {
+      return new Resumable(opts);
+    }
+    this.version = 1.0;
+    // SUPPORTED BY BROWSER?
+    // Check if these features are support by the browser:
+    // - File object type
+    // - Blob object type
+    // - FileList object type
+    // - slicing files
+    this.support = (
+                   (typeof(File)!=='undefined')
+                   &&
+                   (typeof(Blob)!=='undefined')
+                   &&
+                   (typeof(FileList)!=='undefined')
+                   &&
+                   (!!Blob.prototype.webkitSlice||!!Blob.prototype.mozSlice||!!Blob.prototype.slice||false)
+                   );
+    if(!this.support) return(false);
+
+
+    // PROPERTIES
+    var $ = this;
+    $.files = [];
+    $.defaults = {
+      chunkSize:1*1024*1024,
+      forceChunkSize:false,
+      simultaneousUploads:3,
+      fileParameterName:'file',
+      chunkNumberParameterName: 'resumableChunkNumber',
+      chunkSizeParameterName: 'resumableChunkSize',
+      currentChunkSizeParameterName: 'resumableCurrentChunkSize',
+      totalSizeParameterName: 'resumableTotalSize',
+      typeParameterName: 'resumableType',
+      identifierParameterName: 'resumableIdentifier',
+      fileNameParameterName: 'resumableFilename',
+      relativePathParameterName: 'resumableRelativePath',
+      totalChunksParameterName: 'resumableTotalChunks',
+      throttleProgressCallbacks: 0.5,
+      query:{},
+      headers:{},
+      preprocess:null,
+      method:'multipart',
+      uploadMethod: 'POST',
+      testMethod: 'GET',
+      prioritizeFirstAndLastChunk:false,
+      target:'/',
+      testTarget: null,
+      parameterNamespace:'',
+      testChunks:true,
+      generateUniqueIdentifier:null,
+      getTarget:null,
+      maxChunkRetries:100,
+      chunkRetryInterval:undefined,
+      permanentErrors:[400, 404, 415, 500, 501],
+      maxFiles:undefined,
+      withCredentials:false,
+      xhrTimeout:0,
+      clearInput:true,
+      chunkFormat:'blob',
+      setChunkTypeFromFile:false,
+      maxFilesErrorCallback:function (files, errorCount) {
+        var maxFiles = $.getOpt('maxFiles');
+        alert('Please upload no more than ' + maxFiles + ' file' + (maxFiles === 1 ? '' : 's') + ' at a time.');
+      },
+      minFileSize:1,
+      minFileSizeErrorCallback:function(file, errorCount) {
+        alert(file.fileName||file.name +' is too small, please upload files larger than ' + $h.formatSize($.getOpt('minFileSize')) + '.');
+      },
+      maxFileSize:undefined,
+      maxFileSizeErrorCallback:function(file, errorCount) {
+        alert(file.fileName||file.name +' is too large, please upload files less than ' + $h.formatSize($.getOpt('maxFileSize')) + '.');
+      },
+      fileType: [],
+      fileTypeErrorCallback: function(file, errorCount) {
+        alert(file.fileName||file.name +' has type not allowed, please upload files of type ' + $.getOpt('fileType') + '.');
+      }
+    };
+    $.opts = opts||{};
+    $.getOpt = function(o) {
+      var $opt = this;
+      // Get multiple option if passed an array
+      if(o instanceof Array) {
+        var options = {};
+        $h.each(o, function(option){
+          options[option] = $opt.getOpt(option);
+        });
+        return options;
+      }
+      // Otherwise, just return a simple option
+      if ($opt instanceof ResumableChunk) {
+        if (typeof $opt.opts[o] !== 'undefined') { return $opt.opts[o]; }
+        else { $opt = $opt.fileObj; }
+      }
+      if ($opt instanceof ResumableFile) {
+        if (typeof $opt.opts[o] !== 'undefined') { return $opt.opts[o]; }
+        else { $opt = $opt.resumableObj; }
+      }
+      if ($opt instanceof Resumable) {
+        if (typeof $opt.opts[o] !== 'undefined') { return $opt.opts[o]; }
+        else { return $opt.defaults[o]; }
+      }
+    };
+
+    // EVENTS
+    // catchAll(event, ...)
+    // fileSuccess(file), fileProgress(file), fileAdded(file, event), filesAdded(files, filesSkipped), fileRetry(file),
+    // fileError(file, message), complete(), progress(), error(message, file), pause()
+    $.events = [];
+    $.on = function(event,callback){
+      $.events.push(event.toLowerCase(), callback);
+    };
+    $.fire = function(){
+      // `arguments` is an object, not array, in FF, so:
+      var args = [];
+      for (var i=0; i<arguments.length; i++) args.push(arguments[i]);
+      // Find event listeners, and support pseudo-event `catchAll`
+      var event = args[0].toLowerCase();
+      for (var i=0; i<=$.events.length; i+=2) {
+        if($.events[i]==event) $.events[i+1].apply($,args.slice(1));
+        if($.events[i]=='catchall') $.events[i+1].apply(null,args);
+      }
+      if(event=='fileerror') $.fire('error', args[2], args[1]);
+      if(event=='fileprogress') $.fire('progress');
+    };
+
+
+    // INTERNAL HELPER METHODS (handy, but ultimately not part of uploading)
+    var $h = {
+      stopEvent: function(e){
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      each: function(o,callback){
+        if(typeof(o.length)!=='undefined') {
+          for (var i=0; i<o.length; i++) {
+            // Array or FileList
+            if(callback(o[i])===false) return;
+          }
+        } else {
+          for (i in o) {
+            // Object
+            if(callback(i,o[i])===false) return;
+          }
+        }
+      },
+      generateUniqueIdentifier:function(file, event){
+        var custom = $.getOpt('generateUniqueIdentifier');
+        if(typeof custom === 'function') {
+          return custom(file, event);
+        }
+        var relativePath = file.webkitRelativePath||file.fileName||file.name; // Some confusion in different versions of Firefox
+        var size = file.size;
+        return(size + '-' + relativePath.replace(/[^0-9a-zA-Z_-]/img, ''));
+      },
+      contains:function(array,test) {
+        var result = false;
+
+        $h.each(array, function(value) {
+          if (value == test) {
+            result = true;
+            return false;
+          }
+          return true;
+        });
+
+        return result;
+      },
+      formatSize:function(size){
+        if(size<1024) {
+          return size + ' bytes';
+        } else if(size<1024*1024) {
+          return (size/1024.0).toFixed(0) + ' KB';
+        } else if(size<1024*1024*1024) {
+          return (size/1024.0/1024.0).toFixed(1) + ' MB';
+        } else {
+          return (size/1024.0/1024.0/1024.0).toFixed(1) + ' GB';
+        }
+      },
+      getTarget:function(request, params){
+        var target = $.getOpt('target');
+
+        if (request === 'test' && $.getOpt('testTarget')) {
+          target = $.getOpt('testTarget') === '/' ? $.getOpt('target') : $.getOpt('testTarget');
+        }
+
+        if (typeof target === 'function') {
+          return target(params);
+        }
+
+        var separator = target.indexOf('?') < 0 ? '?' : '&';
+        var joinedParams = params.join('&');
+
+        return target + separator + joinedParams;
+      }
+    };
+
+    var onDrop = function(event){
+      $h.stopEvent(event);
+
+      //handle dropped things as items if we can (this lets us deal with folders nicer in some cases)
+      if (event.dataTransfer && event.dataTransfer.items) {
+        loadFiles(event.dataTransfer.items, event);
+      }
+      //else handle them as files
+      else if (event.dataTransfer && event.dataTransfer.files) {
+        loadFiles(event.dataTransfer.files, event);
+      }
+    };
+    var preventDefault = function(e) {
+      e.preventDefault();
+    };
+
+    /**
+     * processes a single upload item (file or directory)
+     * @param {Object} item item to upload, may be file or directory entry
+     * @param {string} path current file path
+     * @param {File[]} items list of files to append new items to
+     * @param {Function} cb callback invoked when item is processed
+     */
+    function processItem(item, path, items, cb) {
+      var entry;
+      if(item.isFile){
+        // file provided
+        return item.file(function(file){
+          file.relativePath = path + file.name;
+          items.push(file);
+          cb();
+        });
+      }else if(item.isDirectory){
+        // item is already a directory entry, just assign
+        entry = item;
+      }else if(item instanceof File) {
+        items.push(item);
+      }
+      if('function' === typeof item.webkitGetAsEntry){
+        // get entry from file object
+        entry = item.webkitGetAsEntry();
+      }
+      if(entry && entry.isDirectory){
+        // directory provided, process it
+        return processDirectory(entry, path + entry.name + '/', items, cb);
+      }
+      if('function' === typeof item.getAsFile){
+        // item represents a File object, convert it
+        item = item.getAsFile();
+        if(item instanceof File) {
+          item.relativePath = path + item.name;
+          items.push(item);
+        }
+      }
+      cb(); // indicate processing is done
+    }
+
+
+    /**
+     * cps-style list iteration.
+     * invokes all functions in list and waits for their callback to be
+     * triggered.
+     * @param  {Function[]}   items list of functions expecting callback parameter
+     * @param  {Function} cb    callback to trigger after the last callback has been invoked
+     */
+    function processCallbacks(items, cb){
+      if(!items || items.length === 0){
+        // empty or no list, invoke callback
+        return cb();
+      }
+      // invoke current function, pass the next part as continuation
+      items[0](function(){
+        processCallbacks(items.slice(1), cb);
+      });
+    }
+
+    /**
+     * recursively traverse directory and collect files to upload
+     * @param  {Object}   directory directory to process
+     * @param  {string}   path      current path
+     * @param  {File[]}   items     target list of items
+     * @param  {Function} cb        callback invoked after traversing directory
+     */
+    function processDirectory (directory, path, items, cb) {
+      var dirReader = directory.createReader();
+      dirReader.readEntries(function(entries){
+        if(!entries.length){
+          // empty directory, skip
+          return cb();
+        }
+        // process all conversion callbacks, finally invoke own one
+        processCallbacks(
+          entries.map(function(entry){
+            // bind all properties except for callback
+            return processItem.bind(null, entry, path, items);
+          }),
+          cb
+        );
+      });
+    }
+
+    /**
+     * process items to extract files to be uploaded
+     * @param  {File[]} items items to process
+     * @param  {Event} event event that led to upload
+     */
+    function loadFiles(items, event) {
+      if(!items.length){
+        return; // nothing to do
+      }
+      $.fire('beforeAdd');
+      var files = [];
+      processCallbacks(
+          Array.prototype.map.call(items, function(item){
+            // bind all properties except for callback
+            return processItem.bind(null, item, "", files);
+          }),
+          function(){
+            if(files.length){
+              // at least one file found
+              appendFilesFromFileList(files, event);
+            }
+          }
+      );
+    };
+
+    var appendFilesFromFileList = function(fileList, event){
+      // check for uploading too many files
+      var errorCount = 0;
+      var o = $.getOpt(['maxFiles', 'minFileSize', 'maxFileSize', 'maxFilesErrorCallback', 'minFileSizeErrorCallback', 'maxFileSizeErrorCallback', 'fileType', 'fileTypeErrorCallback']);
+      if (typeof(o.maxFiles)!=='undefined' && o.maxFiles<(fileList.length+$.files.length)) {
+        // if single-file upload, file is already added, and trying to add 1 new file, simply replace the already-added file
+        if (o.maxFiles===1 && $.files.length===1 && fileList.length===1) {
+          $.removeFile($.files[0]);
+        } else {
+          o.maxFilesErrorCallback(fileList, errorCount++);
+          return false;
+        }
+      }
+      var files = [], filesSkipped = [], remaining = fileList.length;
+      var decreaseReamining = function(){
+        if(!--remaining){
+          // all files processed, trigger event
+          if(!files.length && !filesSkipped.length){
+            // no succeeded files, just skip
+            return;
+          }
+          window.setTimeout(function(){
+            $.fire('filesAdded', files, filesSkipped);
+          },0);
+        }
+      };
+      $h.each(fileList, function(file){
+        var fileName = file.name;
+        if(o.fileType.length > 0){
+          var fileTypeFound = false;
+          for(var index in o.fileType){
+            var extension = '.' + o.fileType[index];
+			if(fileName.toLowerCase().indexOf(extension.toLowerCase(), fileName.length - extension.length) !== -1){
+              fileTypeFound = true;
+              break;
+            }
+          }
+          if (!fileTypeFound) {
+            o.fileTypeErrorCallback(file, errorCount++);
+            return false;
+          }
+        }
+
+        if (typeof(o.minFileSize)!=='undefined' && file.size<o.minFileSize) {
+          o.minFileSizeErrorCallback(file, errorCount++);
+          return false;
+        }
+        if (typeof(o.maxFileSize)!=='undefined' && file.size>o.maxFileSize) {
+          o.maxFileSizeErrorCallback(file, errorCount++);
+          return false;
+        }
+
+        function addFile(uniqueIdentifier){
+          if (!$.getFromUniqueIdentifier(uniqueIdentifier)) {(function(){
+            file.uniqueIdentifier = uniqueIdentifier;
+            var f = new ResumableFile($, file, uniqueIdentifier);
+            $.files.push(f);
+            files.push(f);
+            f.container = (typeof event != 'undefined' ? event.srcElement : null);
+            window.setTimeout(function(){
+              $.fire('fileAdded', f, event)
+            },0);
+          })()} else {
+            filesSkipped.push(file);
+          };
+          decreaseReamining();
+        }
+        // directories have size == 0
+        var uniqueIdentifier = $h.generateUniqueIdentifier(file, event);
+        if(uniqueIdentifier && typeof uniqueIdentifier.then === 'function'){
+          // Promise or Promise-like object provided as unique identifier
+          uniqueIdentifier
+          .then(
+            function(uniqueIdentifier){
+              // unique identifier generation succeeded
+              addFile(uniqueIdentifier);
+            },
+           function(){
+              // unique identifier generation failed
+              // skip further processing, only decrease file count
+              decreaseReamining();
+            }
+          );
+        }else{
+          // non-Promise provided as unique identifier, process synchronously
+          addFile(uniqueIdentifier);
+        }
+      });
+    };
+
+    // INTERNAL OBJECT TYPES
+    function ResumableFile(resumableObj, file, uniqueIdentifier){
+      var $ = this;
+      $.opts = {};
+      $.getOpt = resumableObj.getOpt;
+      $._prevProgress = 0;
+      $.resumableObj = resumableObj;
+      $.file = file;
+      $.fileName = file.fileName||file.name; // Some confusion in different versions of Firefox
+      $.size = file.size;
+      $.relativePath = file.relativePath || file.webkitRelativePath || $.fileName;
+      $.uniqueIdentifier = uniqueIdentifier;
+      $._pause = false;
+      $.container = '';
+      var _error = uniqueIdentifier !== undefined;
+
+      // Callback when something happens within the chunk
+      var chunkEvent = function(event, message){
+        // event can be 'progress', 'success', 'error' or 'retry'
+        switch(event){
+        case 'progress':
+          $.resumableObj.fire('fileProgress', $, message);
+          break;
+        case 'error':
+          $.abort();
+          _error = true;
+          $.chunks = [];
+          $.resumableObj.fire('fileError', $, message);
+          break;
+        case 'success':
+          if(_error) return;
+          $.resumableObj.fire('fileProgress', $); // it's at least progress
+          if($.isComplete()) {
+            $.resumableObj.fire('fileSuccess', $, message);
+          }
+          break;
+        case 'retry':
+          $.resumableObj.fire('fileRetry', $);
+          break;
+        }
+      };
+
+      // Main code to set up a file object with chunks,
+      // packaged to be able to handle retries if needed.
+      $.chunks = [];
+      $.abort = function(){
+        // Stop current uploads
+        var abortCount = 0;
+        $h.each($.chunks, function(c){
+          if(c.status()=='uploading') {
+            c.abort();
+            abortCount++;
+          }
+        });
+        if(abortCount>0) $.resumableObj.fire('fileProgress', $);
+      };
+      $.cancel = function(){
+        // Reset this file to be void
+        var _chunks = $.chunks;
+        $.chunks = [];
+        // Stop current uploads
+        $h.each(_chunks, function(c){
+          if(c.status()=='uploading')  {
+            c.abort();
+            $.resumableObj.uploadNextChunk();
+          }
+        });
+        $.resumableObj.removeFile($);
+        $.resumableObj.fire('fileProgress', $);
+      };
+      $.retry = function(){
+        $.bootstrap();
+        var firedRetry = false;
+        $.resumableObj.on('chunkingComplete', function(){
+          if(!firedRetry) $.resumableObj.upload();
+          firedRetry = true;
+        });
+      };
+      $.bootstrap = function(){
+        $.abort();
+        _error = false;
+        // Rebuild stack of chunks from file
+        $.chunks = [];
+        $._prevProgress = 0;
+        var round = $.getOpt('forceChunkSize') ? Math.ceil : Math.floor;
+        var maxOffset = Math.max(round($.file.size/$.getOpt('chunkSize')),1);
+        for (var offset=0; offset<maxOffset; offset++) {(function(offset){
+            window.setTimeout(function(){
+                $.chunks.push(new ResumableChunk($.resumableObj, $, offset, chunkEvent));
+                $.resumableObj.fire('chunkingProgress',$,offset/maxOffset);
+            },0);
+        })(offset)}
+        window.setTimeout(function(){
+            $.resumableObj.fire('chunkingComplete',$);
+        },0);
+      };
+      $.progress = function(){
+        if(_error) return(1);
+        // Sum up progress across everything
+        var ret = 0;
+        var error = false;
+        $h.each($.chunks, function(c){
+          if(c.status()=='error') error = true;
+          ret += c.progress(true); // get chunk progress relative to entire file
+        });
+        ret = (error ? 1 : (ret>0.99999 ? 1 : ret));
+        ret = Math.max($._prevProgress, ret); // We don't want to lose percentages when an upload is paused
+        $._prevProgress = ret;
+        return(ret);
+      };
+      $.isUploading = function(){
+        var uploading = false;
+        $h.each($.chunks, function(chunk){
+          if(chunk.status()=='uploading') {
+            uploading = true;
+            return(false);
+          }
+        });
+        return(uploading);
+      };
+      $.isComplete = function(){
+        var outstanding = false;
+        $h.each($.chunks, function(chunk){
+          var status = chunk.status();
+          if(status=='pending' || status=='uploading' || chunk.preprocessState === 1) {
+            outstanding = true;
+            return(false);
+          }
+        });
+        return(!outstanding);
+      };
+      $.pause = function(pause){
+          if(typeof(pause)==='undefined'){
+              $._pause = ($._pause ? false : true);
+          }else{
+              $._pause = pause;
+          }
+      };
+      $.isPaused = function() {
+        return $._pause;
+      };
+
+
+      // Bootstrap and return
+      $.resumableObj.fire('chunkingStart', $);
+      $.bootstrap();
+      return(this);
+    }
+
+
+    function ResumableChunk(resumableObj, fileObj, offset, callback){
+      var $ = this;
+      $.opts = {};
+      $.getOpt = resumableObj.getOpt;
+      $.resumableObj = resumableObj;
+      $.fileObj = fileObj;
+      $.fileObjSize = fileObj.size;
+      $.fileObjType = fileObj.file.type;
+      $.offset = offset;
+      $.callback = callback;
+      $.lastProgressCallback = (new Date);
+      $.tested = false;
+      $.retries = 0;
+      $.pendingRetry = false;
+      $.preprocessState = 0; // 0 = unprocessed, 1 = processing, 2 = finished
+
+      // Computed properties
+      var chunkSize = $.getOpt('chunkSize');
+      $.loaded = 0;
+      $.startByte = $.offset*chunkSize;
+      $.endByte = Math.min($.fileObjSize, ($.offset+1)*chunkSize);
+      if ($.fileObjSize-$.endByte < chunkSize && !$.getOpt('forceChunkSize')) {
+        // The last chunk will be bigger than the chunk size, but less than 2*chunkSize
+        $.endByte = $.fileObjSize;
+      }
+      $.xhr = null;
+
+      // test() makes a GET request without any data to see if the chunk has already been uploaded in a previous session
+      $.test = function(){
+        // Set up request and listen for event
+        $.xhr = new XMLHttpRequest();
+
+        var testHandler = function(e){
+          $.tested = true;
+          var status = $.status();
+          if(status=='success') {
+            $.callback(status, $.message());
+            $.resumableObj.uploadNextChunk();
+          } else {
+            $.send();
+          }
+        };
+        $.xhr.addEventListener('load', testHandler, false);
+        $.xhr.addEventListener('error', testHandler, false);
+        $.xhr.addEventListener('timeout', testHandler, false);
+
+        // Add data from the query options
+        var params = [];
+        var parameterNamespace = $.getOpt('parameterNamespace');
+        var customQuery = $.getOpt('query');
+        if(typeof customQuery == 'function') customQuery = customQuery($.fileObj, $);
+        $h.each(customQuery, function(k,v){
+          params.push([encodeURIComponent(parameterNamespace+k), encodeURIComponent(v)].join('='));
+        });
+        // Add extra data to identify chunk
+        params = params.concat(
+          [
+            // define key/value pairs for additional parameters
+            ['chunkNumberParameterName', $.offset + 1],
+            ['chunkSizeParameterName', $.getOpt('chunkSize')],
+            ['currentChunkSizeParameterName', $.endByte - $.startByte],
+            ['totalSizeParameterName', $.fileObjSize],
+            ['typeParameterName', $.fileObjType],
+            ['identifierParameterName', $.fileObj.uniqueIdentifier],
+            ['fileNameParameterName', $.fileObj.fileName],
+            ['relativePathParameterName', $.fileObj.relativePath],
+            ['totalChunksParameterName', $.fileObj.chunks.length]
+          ].filter(function(pair){
+            // include items that resolve to truthy values
+            // i.e. exclude false, null, undefined and empty strings
+            return $.getOpt(pair[0]);
+          })
+          .map(function(pair){
+            // map each key/value pair to its final form
+            return [
+              parameterNamespace + $.getOpt(pair[0]),
+              encodeURIComponent(pair[1])
+            ].join('=');
+          })
+        );
+        // Append the relevant chunk and send it
+        $.xhr.open($.getOpt('testMethod'), $h.getTarget('test', params));
+        $.xhr.timeout = $.getOpt('xhrTimeout');
+        $.xhr.withCredentials = $.getOpt('withCredentials');
+        // Add data from header options
+        var customHeaders = $.getOpt('headers');
+        if(typeof customHeaders === 'function') {
+          customHeaders = customHeaders($.fileObj, $);
+        }
+        $h.each(customHeaders, function(k,v) {
+          $.xhr.setRequestHeader(k, v);
+        });
+        $.xhr.send(null);
+      };
+
+      $.preprocessFinished = function(){
+        $.preprocessState = 2;
+        $.send();
+      };
+
+      // send() uploads the actual data in a POST call
+      $.send = function(){
+        var preprocess = $.getOpt('preprocess');
+        if(typeof preprocess === 'function') {
+          switch($.preprocessState) {
+          case 0: $.preprocessState = 1; preprocess($); return;
+          case 1: return;
+          case 2: break;
+          }
+        }
+        if($.getOpt('testChunks') && !$.tested) {
+          $.test();
+          return;
+        }
+
+        // Set up request and listen for event
+        $.xhr = new XMLHttpRequest();
+
+        // Progress
+        $.xhr.upload.addEventListener('progress', function(e){
+          if( (new Date) - $.lastProgressCallback > $.getOpt('throttleProgressCallbacks') * 1000 ) {
+            $.callback('progress');
+            $.lastProgressCallback = (new Date);
+          }
+          $.loaded=e.loaded||0;
+        }, false);
+        $.loaded = 0;
+        $.pendingRetry = false;
+        $.callback('progress');
+
+        // Done (either done, failed or retry)
+        var doneHandler = function(e){
+          var status = $.status();
+          if(status=='success'||status=='error') {
+            $.callback(status, $.message());
+            $.resumableObj.uploadNextChunk();
+          } else {
+            $.callback('retry', $.message());
+            $.abort();
+            $.retries++;
+            var retryInterval = $.getOpt('chunkRetryInterval');
+            if(retryInterval !== undefined) {
+              $.pendingRetry = true;
+              setTimeout($.send, retryInterval);
+            } else {
+              $.send();
+            }
+          }
+        };
+        $.xhr.addEventListener('load', doneHandler, false);
+        $.xhr.addEventListener('error', doneHandler, false);
+        $.xhr.addEventListener('timeout', doneHandler, false);
+
+        // Set up the basic query data from Resumable
+        var query = [
+          ['chunkNumberParameterName', $.offset + 1],
+          ['chunkSizeParameterName', $.getOpt('chunkSize')],
+          ['currentChunkSizeParameterName', $.endByte - $.startByte],
+          ['totalSizeParameterName', $.fileObjSize],
+          ['typeParameterName', $.fileObjType],
+          ['identifierParameterName', $.fileObj.uniqueIdentifier],
+          ['fileNameParameterName', $.fileObj.fileName],
+          ['relativePathParameterName', $.fileObj.relativePath],
+          ['totalChunksParameterName', $.fileObj.chunks.length],
+        ].filter(function(pair){
+          // include items that resolve to truthy values
+          // i.e. exclude false, null, undefined and empty strings
+          return $.getOpt(pair[0]);
+        })
+        .reduce(function(query, pair){
+          // assign query key/value
+          query[$.getOpt(pair[0])] = pair[1];
+          return query;
+        }, {});
+        // Mix in custom data
+        var customQuery = $.getOpt('query');
+        if(typeof customQuery == 'function') customQuery = customQuery($.fileObj, $);
+        $h.each(customQuery, function(k,v){
+          query[k] = v;
+        });
+
+        var func = ($.fileObj.file.slice ? 'slice' : ($.fileObj.file.mozSlice ? 'mozSlice' : ($.fileObj.file.webkitSlice ? 'webkitSlice' : 'slice')));
+        var bytes = $.fileObj.file[func]($.startByte, $.endByte, $.getOpt('setChunkTypeFromFile') ? $.fileObj.file.type : "");
+        var data = null;
+        var params = [];
+
+        var parameterNamespace = $.getOpt('parameterNamespace');
+                if ($.getOpt('method') === 'octet') {
+                    // Add data from the query options
+                    data = bytes;
+                    $h.each(query, function (k, v) {
+                        params.push([encodeURIComponent(parameterNamespace + k), encodeURIComponent(v)].join('='));
+                    });
+                } else {
+                    // Add data from the query options
+                    data = new FormData();
+                    $h.each(query, function (k, v) {
+                        data.append(parameterNamespace + k, v);
+                        params.push([encodeURIComponent(parameterNamespace + k), encodeURIComponent(v)].join('='));
+                    });
+                    if ($.getOpt('chunkFormat') == 'blob') {
+                        data.append(parameterNamespace + $.getOpt('fileParameterName'), bytes, $.fileObj.fileName);
+                    }
+                    else if ($.getOpt('chunkFormat') == 'base64') {
+                        var fr = new FileReader();
+                        fr.onload = function (e) {
+                            data.append(parameterNamespace + $.getOpt('fileParameterName'), fr.result);
+                            $.xhr.send(data);
+                        }
+                        fr.readAsDataURL(bytes);
+                    }
+                }
+
+        var target = $h.getTarget('upload', params);
+        var method = $.getOpt('uploadMethod');
+
+        $.xhr.open(method, target);
+        if ($.getOpt('method') === 'octet') {
+          $.xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+        }
+        $.xhr.timeout = $.getOpt('xhrTimeout');
+        $.xhr.withCredentials = $.getOpt('withCredentials');
+        // Add data from header options
+        var customHeaders = $.getOpt('headers');
+        if(typeof customHeaders === 'function') {
+          customHeaders = customHeaders($.fileObj, $);
+        }
+
+        $h.each(customHeaders, function(k,v) {
+          $.xhr.setRequestHeader(k, v);
+        });
+
+                if ($.getOpt('chunkFormat') == 'blob') {
+                    $.xhr.send(data);
+                }
+      };
+      $.abort = function(){
+        // Abort and reset
+        if($.xhr) $.xhr.abort();
+        $.xhr = null;
+      };
+      $.status = function(){
+        // Returns: 'pending', 'uploading', 'success', 'error'
+        if($.pendingRetry) {
+          // if pending retry then that's effectively the same as actively uploading,
+          // there might just be a slight delay before the retry starts
+          return('uploading');
+        } else if(!$.xhr) {
+          return('pending');
+        } else if($.xhr.readyState<4) {
+          // Status is really 'OPENED', 'HEADERS_RECEIVED' or 'LOADING' - meaning that stuff is happening
+          return('uploading');
+        } else {
+          if($.xhr.status == 200 || $.xhr.status == 201) {
+            // HTTP 200, 201 (created)
+            return('success');
+          } else if($h.contains($.getOpt('permanentErrors'), $.xhr.status) || $.retries >= $.getOpt('maxChunkRetries')) {
+            // HTTP 415/500/501, permanent error
+            return('error');
+          } else {
+            // this should never happen, but we'll reset and queue a retry
+            // a likely case for this would be 503 service unavailable
+            $.abort();
+            return('pending');
+          }
+        }
+      };
+      $.message = function(){
+        return($.xhr ? $.xhr.responseText : '');
+      };
+      $.progress = function(relative){
+        if(typeof(relative)==='undefined') relative = false;
+        var factor = (relative ? ($.endByte-$.startByte)/$.fileObjSize : 1);
+        if($.pendingRetry) return(0);
+        if(!$.xhr || !$.xhr.status) factor*=.95;
+        var s = $.status();
+        switch(s){
+        case 'success':
+        case 'error':
+          return(1*factor);
+        case 'pending':
+          return(0*factor);
+        default:
+          return($.loaded/($.endByte-$.startByte)*factor);
+        }
+      };
+      return(this);
+    }
+
+    // QUEUE
+    $.uploadNextChunk = function(){
+      var found = false;
+
+      // In some cases (such as videos) it's really handy to upload the first
+      // and last chunk of a file quickly; this let's the server check the file's
+      // metadata and determine if there's even a point in continuing.
+      if ($.getOpt('prioritizeFirstAndLastChunk')) {
+        $h.each($.files, function(file){
+          if(file.chunks.length && file.chunks[0].status()=='pending' && file.chunks[0].preprocessState === 0) {
+            file.chunks[0].send();
+            found = true;
+            return(false);
+          }
+          if(file.chunks.length>1 && file.chunks[file.chunks.length-1].status()=='pending' && file.chunks[file.chunks.length-1].preprocessState === 0) {
+            file.chunks[file.chunks.length-1].send();
+            found = true;
+            return(false);
+          }
+        });
+        if(found) return(true);
+      }
+
+      // Now, simply look for the next, best thing to upload
+      $h.each($.files, function(file){
+        if(file.isPaused()===false){
+         $h.each(file.chunks, function(chunk){
+           if(chunk.status()=='pending' && chunk.preprocessState === 0) {
+             chunk.send();
+             found = true;
+             return(false);
+           }
+          });
+        }
+        if(found) return(false);
+      });
+      if(found) return(true);
+
+      // The are no more outstanding chunks to upload, check is everything is done
+      var outstanding = false;
+      $h.each($.files, function(file){
+        if(!file.isComplete()) {
+          outstanding = true;
+          return(false);
+        }
+      });
+      if(!outstanding) {
+        // All chunks have been uploaded, complete
+        $.fire('complete');
+      }
+      return(false);
+    };
+
+
+    // PUBLIC METHODS FOR RESUMABLE.JS
+    $.assignBrowse = function(domNodes, isDirectory){
+      if(typeof(domNodes.length)=='undefined') domNodes = [domNodes];
+
+      $h.each(domNodes, function(domNode) {
+        var input;
+        if(domNode.tagName==='INPUT' && domNode.type==='file'){
+          input = domNode;
+        } else {
+          input = document.createElement('input');
+          input.setAttribute('type', 'file');
+          input.style.display = 'none';
+          domNode.addEventListener('click', function(){
+            input.style.opacity = 0;
+            input.style.display='block';
+            input.focus();
+            input.click();
+            input.style.display='none';
+          }, false);
+          domNode.appendChild(input);
+        }
+        var maxFiles = $.getOpt('maxFiles');
+        if (typeof(maxFiles)==='undefined'||maxFiles!=1){
+          input.setAttribute('multiple', 'multiple');
+        } else {
+          input.removeAttribute('multiple');
+        }
+        if(isDirectory){
+          input.setAttribute('webkitdirectory', 'webkitdirectory');
+        } else {
+          input.removeAttribute('webkitdirectory');
+        }
+        var fileTypes = $.getOpt('fileType');
+        if (typeof (fileTypes) !== 'undefined' && fileTypes.length >= 1) {
+          input.setAttribute('accept', fileTypes.map(function (e) { return '.' + e }).join(','));
+        }
+        else {
+          input.removeAttribute('accept');
+        }
+        // When new files are added, simply append them to the overall list
+        input.addEventListener('change', function(e){
+          appendFilesFromFileList(e.target.files,e);
+          var clearInput = $.getOpt('clearInput');
+          if (clearInput) {
+            e.target.value = '';
+          }
+        }, false);
+      });
+    };
+    $.assignDrop = function(domNodes){
+      if(typeof(domNodes.length)=='undefined') domNodes = [domNodes];
+
+      $h.each(domNodes, function(domNode) {
+        domNode.addEventListener('dragover', preventDefault, false);
+        domNode.addEventListener('dragenter', preventDefault, false);
+        domNode.addEventListener('drop', onDrop, false);
+      });
+    };
+    $.unAssignDrop = function(domNodes) {
+      if (typeof(domNodes.length) == 'undefined') domNodes = [domNodes];
+
+      $h.each(domNodes, function(domNode) {
+        domNode.removeEventListener('dragover', preventDefault);
+        domNode.removeEventListener('dragenter', preventDefault);
+        domNode.removeEventListener('drop', onDrop);
+      });
+    };
+    $.isUploading = function(){
+      var uploading = false;
+      $h.each($.files, function(file){
+        if (file.isUploading()) {
+          uploading = true;
+          return(false);
+        }
+      });
+      return(uploading);
+    };
+    $.upload = function(){
+      // Make sure we don't start too many uploads at once
+      if($.isUploading()) return;
+      // Kick off the queue
+      $.fire('uploadStart');
+      for (var num=1; num<=$.getOpt('simultaneousUploads'); num++) {
+        $.uploadNextChunk();
+      }
+    };
+    $.pause = function(){
+      // Resume all chunks currently being uploaded
+      $h.each($.files, function(file){
+        file.abort();
+      });
+      $.fire('pause');
+    };
+    $.cancel = function(){
+      $.fire('beforeCancel');
+      for(var i = $.files.length - 1; i >= 0; i--) {
+        $.files[i].cancel();
+      }
+      $.fire('cancel');
+    };
+    $.progress = function(){
+      var totalDone = 0;
+      var totalSize = 0;
+      // Resume all chunks currently being uploaded
+      $h.each($.files, function(file){
+        totalDone += file.progress()*file.size;
+        totalSize += file.size;
+      });
+      return(totalSize>0 ? totalDone/totalSize : 0);
+    };
+    $.addFile = function(file, event){
+      appendFilesFromFileList([file], event);
+    };
+    $.addFiles = function(files, event){
+      appendFilesFromFileList(files, event);
+    };
+    $.removeFile = function(file){
+      for(var i = $.files.length - 1; i >= 0; i--) {
+        if($.files[i] === file) {
+          $.files.splice(i, 1);
+        }
+      }
+    };
+    $.getFromUniqueIdentifier = function(uniqueIdentifier){
+      var ret = false;
+      $h.each($.files, function(f){
+        if(f.uniqueIdentifier==uniqueIdentifier) ret = f;
+      });
+      return(ret);
+    };
+    $.getSize = function(){
+      var totalSize = 0;
+      $h.each($.files, function(file){
+        totalSize += file.size;
+      });
+      return(totalSize);
+    };
+    $.handleDropEvent = function (e) {
+      onDrop(e);
+    };
+    $.handleChangeEvent = function (e) {
+      appendFilesFromFileList(e.target.files, e);
+      e.target.value = '';
+    };
+    $.updateQuery = function(query){
+        $.opts.query = query;
+    };
+
+    return(this);
+  };
+
+
+  // Node.js-style export for Node and Component
+  if (typeof module != 'undefined') {
+    module.exports = Resumable;
+  } else if (typeof define === "function" && define.amd) {
+    // AMD/requirejs: Define the module
+    define(function(){
+      return Resumable;
+    });
+  } else {
+    // Browser: Expose to window
+    window.Resumable = Resumable;
+  }
+
+})();
diff --git a/projects/common/src/lib/components/session-cleared/session-cleared.component.html b/projects/common/src/lib/components/session-cleared/session-cleared.component.html
new file mode 100644
index 0000000..16640d8
--- /dev/null
+++ b/projects/common/src/lib/components/session-cleared/session-cleared.component.html
@@ -0,0 +1,8 @@
+<div class="session-cleared">
+  <div class="card">
+    <div class="card-body">
+      <p class="card-text" i18n>You have been logged out</p>
+      <button class="btn btn-primary" (click)="handleLoginClick()" i18n>Login again</button>
+    </div>
+  </div>
+</div>
diff --git a/projects/common/src/lib/components/session-cleared/session-cleared.component.scss b/projects/common/src/lib/components/session-cleared/session-cleared.component.scss
new file mode 100644
index 0000000..246c0a0
--- /dev/null
+++ b/projects/common/src/lib/components/session-cleared/session-cleared.component.scss
@@ -0,0 +1,6 @@
+.session-cleared {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+}
diff --git a/projects/common/src/lib/components/session-cleared/session-cleared.component.ts b/projects/common/src/lib/components/session-cleared/session-cleared.component.ts
new file mode 100644
index 0000000..ed0cef5
--- /dev/null
+++ b/projects/common/src/lib/components/session-cleared/session-cleared.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Store } from '@ngrx/store';
+import * as appCommonReducers from '../../reducers/app-common.reducer';
+import * as appCommonActions from '../../actions/app-common.actions';
+
+
+
+@Component({
+  selector: 'session-cleared',
+  templateUrl: 'session-cleared.component.html',
+  styleUrls: ['session-cleared.component.scss']
+})
+
+
+export class SessionClearedComponent  {
+  
+  constructor(private route: ActivatedRoute, private store: Store<appCommonReducers.State>) {
+  }
+
+  handleLoginClick() {
+    this.store.dispatch(new appCommonActions.Login(this.route.snapshot.queryParamMap.get('redirectTo')));
+  }
+}
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.html b/projects/common/src/lib/components/side-panel/side-panel.component.html
new file mode 100644
index 0000000..54bddec
--- /dev/null
+++ b/projects/common/src/lib/components/side-panel/side-panel.component.html
@@ -0,0 +1,10 @@
+<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed}">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+  </div>
+  <div class="content">
+    <ng-content>
+
+    </ng-content>
+  </div>
+</div>
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.scss b/projects/common/src/lib/components/side-panel/side-panel.component.scss
new file mode 100644
index 0000000..697e599
--- /dev/null
+++ b/projects/common/src/lib/components/side-panel/side-panel.component.scss
@@ -0,0 +1,42 @@
+.side-panel {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 22rem;
+  left: 0px;
+  transition: left 0.3s;
+  background-color: white;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.side-panel.collapsed {
+  left:-22rem;
+}
+
+.arrow {
+  position: absolute;
+  top: 1rem;
+  left: 100%;  
+  background-color: inherit;
+  cursor:pointer;
+}
+
+.arrow i {
+  transition: transform 0.3s;
+}
+
+.collapsed .arrow i {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.side-panel.hidden {
+  left: -24rem;
+}
+
+.content {
+  height:100%;
+  width:100%;
+  overflow:hidden;
+  overflow-y:auto;
+}
diff --git a/projects/common/src/lib/components/side-panel/side-panel.component.ts b/projects/common/src/lib/components/side-panel/side-panel.component.ts
new file mode 100644
index 0000000..358abfd
--- /dev/null
+++ b/projects/common/src/lib/components/side-panel/side-panel.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'side-panel',
+  templateUrl: 'side-panel.component.html',
+  styleUrls: ['side-panel.component.scss']
+})
+
+
+export class SidePanelComponent  {
+  @Input() public visible: boolean;
+  @Input() public collapsed: boolean;
+  @Input() public collapsable: boolean;
+
+  constructor() {
+    this.collapsable = false;
+  }
+
+  handleToggleClick(event) {
+    if (this.collapsable) {
+      this.collapsed = !this.collapsed;
+    }
+  }
+}
diff --git a/projects/common/src/lib/components/tag-input/tag-input.component.html b/projects/common/src/lib/components/tag-input/tag-input.component.html
new file mode 100644
index 0000000..f5a7795
--- /dev/null
+++ b/projects/common/src/lib/components/tag-input/tag-input.component.html
@@ -0,0 +1,3 @@
+<div class="tags">
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fa fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
+</div>
diff --git a/projects/common/src/lib/components/tag-input/tag-input.component.scss b/projects/common/src/lib/components/tag-input/tag-input.component.scss
new file mode 100644
index 0000000..e95384b
--- /dev/null
+++ b/projects/common/src/lib/components/tag-input/tag-input.component.scss
@@ -0,0 +1,16 @@
+.tag {
+  display:inline-block;
+  padding:0.5rem;
+  margin-bottom:0.5rem;
+  margin-top:0.5rem;
+  margin-right:1rem;
+}
+
+:host(tag-input) {
+  height: auto ;
+}
+
+input {
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
diff --git a/projects/common/src/lib/components/tag-input/tag-input.component.ts b/projects/common/src/lib/components/tag-input/tag-input.component.ts
new file mode 100644
index 0000000..6042764
--- /dev/null
+++ b/projects/common/src/lib/components/tag-input/tag-input.component.ts
@@ -0,0 +1,104 @@
+import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
+import { Observable,of } from 'rxjs';
+import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
+import { TypeaheadService } from '../../services/typeahead.service';
+
+@Component({
+  selector: 'tag-input',
+  templateUrl: 'tag-input.component.html',
+  styleUrls: ['tag-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagInputComponent),
+      multi: true
+    }
+  ]
+})
+
+export class TagInputComponent implements ControlValueAccessor  {
+  @Input() tags: string[]
+  @ViewChild('taginput') tagInputElement: ElementRef;
+  public tag: string;
+  searching = false;
+  searchFailed = false;
+
+  constructor(private typeaheadService: TypeaheadService) {
+  }
+
+  tagExists(tag) {
+    if (tag.length == 0) return true;
+    for (let t of this.tags) {
+      if (t.toLowerCase() == tag.toLowerCase()) return true;
+    }
+    return false;
+  }
+
+  handleDeleteTag(tag) {
+    let tags = [];
+    for (let t of this.tags) {
+      if (t != tag) tags.push(t);
+    }
+    this.tags = tags;
+    this.propagateChange(tags);
+  }
+
+  handleAddTag(event) {
+    if (!this.tagExists(this.tag)) {
+      this.tags.push(this.tag);
+      this.propagateChange(this.tags);
+    }
+    this.tag = "";
+    this.tagInputElement.nativeElement.focus();
+  }
+
+  handleCheckAddTag(event: KeyboardEvent) {
+    if (event.keyCode == 188) {
+      let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
+      if (!this.tagExists(tag)) {
+        this.tags.push(tag);
+        this.propagateChange(this.tags);
+      }
+      this.tag = "";
+    }
+  }
+
+  handleSelect(event) {
+    if (!this.tagExists(event.item)) {
+      this.tags.push(event.item);
+      this.propagateChange(this.tags);
+    }
+    event.preventDefault();
+    this.tag = "";
+  }
+
+  propagateChange = (_: any) => { };
+
+  registerOnChange(fn) {
+    this.propagateChange = fn;
+  }
+
+  findTag = (text$: Observable<string>) =>
+  text$.pipe(
+        debounceTime(200),
+        distinctUntilChanged(), 
+        tap(() => this.searching = true),
+        switchMap(term => term.length < 1 ? of([]) :
+           this.typeaheadService.getTagTypeaheadItems(term).pipe(
+            tap(() => this.searchFailed = false),
+            catchError(() => {
+                this.searchFailed = true;
+                return of([]);
+            }))
+         ),
+         tap(() => this.searching = false)
+  );
+
+  writeValue(value: any) {
+    this.tags = value;
+    this.tag = "";
+  }
+
+  registerOnTouched() { }
+}
diff --git a/projects/common/src/lib/components/timespan/timespan.component.css b/projects/common/src/lib/components/timespan/timespan.component.css
new file mode 100644
index 0000000..9166a14
--- /dev/null
+++ b/projects/common/src/lib/components/timespan/timespan.component.css
@@ -0,0 +1,77 @@
+.timespan {
+    width:100%;
+    position: relative;
+    user-select: none;   
+}
+
+.collapsed {
+    height:0;
+    overflow: hidden;    
+}
+
+.timeline {
+    position: relative;
+    height: 6rem;
+    width: 100%;
+    margin-top: 0.5rem;
+    overflow: hidden;
+}
+
+.timeline canvas {
+   top:0;
+   left:0;
+   width:100%;
+   height:100%;
+}
+
+.control-container {
+    position: absolute;
+    top:0px;
+    width:100%;
+    overflow: hidden;
+    font-size: 0;
+    white-space: nowrap;
+    pointer-events: none;   
+}
+
+.leftGrip,.rightGrip,.range {
+    pointer-events: all;
+    display: inline-block; 
+    height:100%;
+    /* float: left; */
+    font-size: 9pt;
+    text-align: center;
+    vertical-align: top;
+    overflow: hidden;
+}
+
+.range {
+    /* height:100%; */
+}
+
+.leftGrip,.rightGrip {
+    width:15px;
+    background-color: rgb(204, 200, 200);
+    border:1px solid black;  
+}
+
+.rightGrip {
+    cursor: e-resize;
+}
+
+.leftGrip {
+    left: -100px;
+    cursor:w-resize;
+}
+
+.range {    
+    /* background: linear-gradient( rgba(0, 140, 255, 0.856),transparent); */
+    background-color:rgba(0, 140, 255, 0.856);
+    cursor: move;
+}
+
+.popover-anchor {
+    position:absolute;
+    top:2rem;
+    font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/projects/common/src/lib/components/timespan/timespan.component.html b/projects/common/src/lib/components/timespan/timespan.component.html
new file mode 100644
index 0000000..babee09
--- /dev/null
+++ b/projects/common/src/lib/components/timespan/timespan.component.html
@@ -0,0 +1,34 @@
+<div class="timespan p-1" (window:resize)="handleResize($event)">
+   <div (click)="handleClick()">{{caption}}</div>
+   <ng-template #popoverContent let-caption="popoverCaption">{{caption}}</ng-template>
+   <div class="popover-anchor" [style.left.px] = "startPopoverLeft" [ngbPopover]="popoverContent" #popoverStart="ngbPopover">&nbsp;</div>
+   <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
+   <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
+     <!-- <div class="clearfix">
+        <select class="form-control float-right" [value]="unitScale">
+            <option value="0">Millisecond</option>
+            <option value="1">Second</option>
+            <option value="2">Minute</option>
+            <option value="3">Hour</option>
+            <option value="4">Day</option>
+            <option value="5">Week</option>
+            <option value="6">Month</option>
+            <option value="6">Quarter</option>
+            <option value="8">Year</option>
+          </select>      
+     </div> -->
+     <div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp($event)" (window:touchend)="handleMouseUp($event)" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
+        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
+        </canvas>
+        <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
+            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
+            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
+        </div>
+     </div>
+     <!-- <div>
+         <div class="btn btn-primary" (click)="handleZoomIn()">+</div>
+         <div class="btn btn-primary" (click)="handleZoomOut()">-</div>
+     </div> -->
+   </div>
+</div>
diff --git a/projects/common/src/lib/components/timespan/timespan.component.ts b/projects/common/src/lib/components/timespan/timespan.component.ts
new file mode 100644
index 0000000..e3aea90
--- /dev/null
+++ b/projects/common/src/lib/components/timespan/timespan.component.ts
@@ -0,0 +1,583 @@
+import { Component, OnInit,Input,ViewChild,ElementRef,OnChanges,AfterViewInit,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+
+export interface TimeSpan {
+  startDate:Date;
+  endDate:Date;
+}
+
+@Component({
+  selector: 'timespan',
+  templateUrl: './timespan.component.html',
+  styleUrls: ['./timespan.component.css']
+})
+export class TimespanComponent implements OnInit, OnChanges {
+
+  scale:number = 1000 * 60 * 60 ; // milliseconds / pixel ( 1 hour )
+  unitScales:number[] = [1,1000,1000*60,1000*60*60,1000*60*60*24,1000*60*60*24*7,1000*60*60*24*31,1000*60*60*24*31*3,1000*60*60*24*365.25];
+  units:string[] = [ 'millisecond','second','minute','hour','day','week','month','quarter','year'];
+  quarters:string[] = ['KW1','KW2','KW3','KW4'];
+  unitScale:number = 3;
+  viewMinDate:Date;
+  viewMaxDate:Date;
+  extentMinDate:Date;
+  extentMaxDate:Date;
+  cursorDate:Date;
+  leftGripMove:boolean = false;
+  rightGripMove:boolean = false;
+  rangeGripMove:boolean = false;
+  viewPan:boolean = false;
+  downX:number = -1;
+  mouseX: number = -1;
+  mouseY: number = -1;
+  elementWidth:number;
+  elementHeight:number;
+  lastOffsetInPixels:number=0;
+  @ViewChild('timeLine') canvasRef;
+  @ViewChild('popoverStart') public popoverStart:NgbPopover;
+  @ViewChild('popoverEnd') public popoverEnd:NgbPopover;
+  @Input() collapsed: boolean = true;
+  @Input() startDate: Date = new Date(2018,1,3);
+  @Input() endDate: Date = new Date(2018,1,5);
+  @Input() unit:string;
+  @Input() color:string = '#000000';
+  @Input() background:string = '#ffffff';
+  @Input() hoverColor:string ='#ffffff';
+  @Input() hoverBackground:string ='#0000ff';
+  @Input() lineColor:string='#000000';
+  @Input() lineWidth:number=1;
+  @Input() padding:number = 4;
+  @Output() change:EventEmitter<TimeSpan> = new EventEmitter();
+  public caption:string = "2016/2017";
+  public marginLeft:number = 100;
+  public startPopoverLeft:number=110;
+  public endPopoverLeft:number=120;
+  public rangeWidth:number =75;
+  public startCaption={};
+  public endCaption={};
+  private ratio:number=1;
+  private initialized:boolean=false;
+  private ctx:CanvasRenderingContext2D;
+  public posibleUnits:number[] = [];
+  public height:number = 0;
+  public lineHeight:number = 0;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef,private datePipe: DatePipe) { }
+
+  setCanvasSize() {
+    let canvas = this.canvasRef.nativeElement;
+    this.elementWidth = canvas.offsetWidth;
+    this.elementHeight = canvas.offsetHeight;
+    canvas.height = this.elementHeight * this.ratio;
+    canvas.width = this.elementWidth * this.ratio;
+  }
+
+  getPosibleUnits(scale:number):number[] {
+    let posibleUnits = [];
+    for(let u of [3,4,6,8]) {
+      if((this.unitScale <=u) )
+        posibleUnits.push(u);
+    }
+    return posibleUnits;
+  }
+
+  getLineHeight():number {
+    return (parseInt(this.ctx.font.match(/\d+/)[0], 10)/ this.ratio) + (2*this.padding) ;
+  }
+
+  getHeight():number {
+   
+     return (this.posibleUnits.length * this.getLineHeight());
+  }
+
+  ngOnInit() {        
+    this.ratio = 2;
+    this.unitScale = this.getUnitScale(this.unit);
+    let canvas:HTMLCanvasElement = this.canvasRef.nativeElement;
+    this.ctx = canvas.getContext('2d');
+    this.elementWidth = canvas.offsetWidth;
+    this.elementHeight = canvas.offsetHeight;
+    this.ctx.font=`normal ${this.ratio*10}pt Sans-serif`;
+    this.startDate = new Date(this.startDate.getTime() + this.getUnitDateOffset(this.startDate,this.unitScale,0));
+    this.endDate = new Date(this.endDate.getTime() + this.getUnitDateOffset(this.endDate,this.unitScale,1));
+    this.change.emit({startDate:this.startDate,endDate:this.endDate});
+    let rangeInMilliseconds = this.endDate.getTime() - this.startDate.getTime();
+    this.scale = this.getFitScale(rangeInMilliseconds,this.elementWidth);
+    this.posibleUnits=this.getPosibleUnits(this.scale);
+    this.height=this.getHeight();
+    this.lineHeight= this.getLineHeight();
+    this.setCanvasSize();    
+    let center = (this.startDate.getTime()+this.endDate.getTime())/2;
+    this.viewMinDate = new Date(center - (this.elementWidth/2* this.scale));
+    this.viewMaxDate = new Date(center + (this.elementWidth/2* this.scale));    
+    this.updateStyle(this.startDate,this.endDate);
+    this.startCaption={popoverCaption:this.getStartCaption(this.startDate,this.unitScale,true)};
+    this.endCaption={popoverCaption:this.getEndCaption(this.endDate,this.unitScale,true)};  
+    this.redraw();
+    this.initialized=true;
+  }
+
+  getStartEndCaption(date:Date,otherDate:Date,unitScale:number,suffix:boolean = false,extended:boolean=true):string {    
+    let showSuffix = false;
+    otherDate=new Date(otherDate.getTime()-1); // fix year edge case
+    if(unitScale == 3) { 
+      let format="HH:00";
+      if(extended) {
+        if(suffix || date.getFullYear() != otherDate.getFullYear()) 
+          format="d MMM yyyy:HH:00";
+        else if(date.getMonth() !== otherDate.getMonth()) 
+          format="d MMM HH:00";
+      }
+      return this.datePipe.transform(date,format);       
+    
+    }
+    if(unitScale == 4) { 
+      let format="d";
+      if(extended) {
+        if(suffix || date.getFullYear() != otherDate.getFullYear()) 
+        format="d MMM yyyy";
+      else if(date.getMonth() !== otherDate.getMonth()) 
+        format="d MMM"     
+      }
+      return this.datePipe.transform(date,format);       
+    
+    }
+    if(unitScale == 6) {
+      let format = "MMM";
+      if(extended) {
+        if(suffix || date.getFullYear() != otherDate.getFullYear())
+        format="MMM yyyy";
+      }
+      return  this.datePipe.transform(date,format);
+    }
+    if(unitScale == 7) {
+      let q = Math.trunc(date.getMonth() /3 );
+      return  this.quarters[q]; 
+    }
+    if(unitScale == 8) {
+      return  this.datePipe.transform(date,"yyyy");
+    }
+    return "";
+  }
+
+  getStartCaption(startDate:Date,unitScale:number,suffix:boolean=false,extended:boolean=true):string {
+    return this.getStartEndCaption(new Date(startDate.getTime() + (this.unitScales[unitScale]/2)), this.endDate,unitScale,suffix,extended);
+  }
+
+  getEndCaption(endDate:Date,unitScale:number,suffix:boolean=true):string {
+    return this.getStartEndCaption(new Date(endDate.getTime() - (this.unitScales[unitScale]/2)),this.startDate, unitScale,suffix);
+  }
+
+  getCaption(startDate:Date,endDate:Date,unitScale:number):string {
+    let startCaption=this.getStartCaption(startDate,unitScale);
+    let endCaption=this.getEndCaption(endDate,unitScale);
+    if((endDate.getTime() - startDate.getTime()) < (1.5*this.unitScales[this.unitScale]))
+      return endCaption;
+    return `${startCaption}-${endCaption}`;
+  }
+
+  public updatePopoverText(popover:NgbPopover, text:string): void {
+    const isOpen = popover.isOpen();
+    if (isOpen) {
+      popover.close();      
+      popover.open({popoverCaption:text});
+    }
+  }  
+
+  getFitScale(rangeInMilliSeconds:number,elementWidth:number):number {
+      let width = elementWidth*0.33;
+      return rangeInMilliSeconds/width;
+  }
+
+  getUnitScale(unit:string):number {
+    if(!unit) return 3; // hour
+    for(var _i=0;_i<this.units.length;_i++) {
+      if(this.units[_i]==unit.toLowerCase()) return _i;
+    }
+    throw new Error(`Invalid unit : {{unit}} `);
+  } 
+
+  getUnitDateOffset(date:Date, unitScale:number,tick:number):number {
+    var offsetDate:Date;
+    if(unitScale==0) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes(),date.getSeconds(),date.getMilliseconds()+ tick);
+    if(unitScale==1) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes(),date.getSeconds() + tick,0);
+    if(unitScale==2) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes() + tick,0,0);
+    if(unitScale==3) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours()+ tick ,0,0,0);
+    if(unitScale==4) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() + tick ,0,0,0,0);
+    if(unitScale==6) 
+      offsetDate = new Date(date.getFullYear(),date.getMonth()+tick,1,0,0,0,0);
+    if(unitScale==7)  {      
+      var month = (tick * 3);
+      offsetDate = new Date(date.getFullYear(),month,1,0,0,0,0);
+    }      
+    if(unitScale==8) 
+      offsetDate = new Date(date.getFullYear()+tick,0,1,0,0,0,0);
+    return offsetDate.getTime()-date.getTime();
+  }
+
+  getUnitTextWidth(unitScale:number):number {
+    switch(unitScale) {
+      case 3:return this.ctx.measureText("88:88").width/this.ratio;
+      case 4:return this.ctx.measureText("88").width/this.ratio;
+      case 5:return this.ctx.measureText("WWW").width/this.ratio;
+      case 6:return this.ctx.measureText("WW").width/this.ratio;
+      case 7:return this.ctx.measureText("WW").width/this.ratio;
+      case 8:return this.ctx.measureText("8888").width/this.ratio;
+      default: return this.ctx.measureText("WW").width/this.ratio;
+    }
+  }
+
+  getNextTick(viewStartDate:Date, tick:number,step:number,unitScale:number):number {    
+    let unitTextWidth = this.getUnitTextWidth(unitScale);
+    let dateOffset =this.getUnitDateOffset(viewStartDate,unitScale,tick);
+    let date = new Date(viewStartDate.getTime() + dateOffset);
+    let nextTick=tick+step+Math.trunc(step/2);
+    let nextDateOffset =this.getUnitDateOffset(viewStartDate,unitScale,nextTick);
+    let nextDate = new Date(viewStartDate.getTime() + nextDateOffset);    
+    let n=1;
+    switch(unitScale) {
+       case 4:n=nextDate.getDate()-1;break;
+       case 6:n=nextDate.getMonth();break;
+       case 8:n=nextDate.getFullYear();break;
+       default: n = 1;break;
+    }
+    let a = Math.trunc(n / step)*step;
+    nextTick=nextTick-n+a;     
+    if(nextTick<=tick) return tick+step;
+    return nextTick;
+  }
+
+  getSteps(unitScale:number):number[] {
+    if(unitScale==4) 
+      return [1,14];
+    if(unitScale==6) 
+      return [1,3,6];
+    return [1,2,3,4,5];
+  }
+
+  drawUnits(yOffset:number,width:number,viewStartDate:Date,unitScale:number):number {    
+    let oneUnit = (this.getUnitDateOffset(viewStartDate,unitScale,1)- this.getUnitDateOffset(viewStartDate,unitScale,0)) / this.scale;   
+    this.ctx.font=`normal ${this.ratio*10}pt Sans-serif`;
+    let lineHeight = this.getLineHeight();
+    let dateOffset = this.getUnitDateOffset(viewStartDate,unitScale,0);
+    let pixelOffset =  (dateOffset / this.scale);
+    let caption = this.getStartCaption(new Date(viewStartDate.getTime()+dateOffset),unitScale,false,false);
+    let unitTextWidth=this.getUnitTextWidth(unitScale);
+    this.ctx.beginPath();
+    this.ctx.strokeStyle=this.lineColor;  
+    let steps=this.getSteps(unitScale);
+    let s=0;
+    let step=steps[s];
+    let steppedOneUnit=oneUnit*step;
+    while(unitTextWidth > (steppedOneUnit-(2*this.padding)) && s < steps.length -1) {
+      step=steps[++s];
+      steppedOneUnit=oneUnit*step;
+    }   
+    if(steppedOneUnit - (2*this.padding) < unitTextWidth) return yOffset;  
+    this.ctx.moveTo(0,yOffset*this.ratio);
+    this.ctx.lineTo(width*this.ratio,yOffset*this.ratio);
+    this.ctx.stroke();
+    var x:number = pixelOffset;
+    var nextDateOffset = this.getUnitDateOffset(viewStartDate,unitScale,1);
+    var nextX:number = (nextDateOffset / this.scale);
+    var n=0;
+    while(x < width) {
+      this.ctx.fillStyle=this.color;
+      //mouseover
+      if(this.mouseX> x && this.mouseX <nextX && this.mouseY > yOffset && this.mouseY <( yOffset + lineHeight) && !this.leftGripMove && !this.rightGripMove && !this.rangeGripMove&& !this.viewPan) {
+        this.ctx.fillStyle=this.hoverBackground;
+        this.ctx.fillRect((x+0.5)*this.ratio,(yOffset+0.5)*this.ratio,(nextX-x)*this.ratio,lineHeight*this.ratio);
+        this.ctx.fillStyle=this.hoverColor;
+      }
+
+      this.ctx.moveTo((x+0.5)*this.ratio,(yOffset+0.5)*this.ratio);
+      this.ctx.lineTo((x+0.5)*this.ratio,(yOffset+lineHeight+0.5)*this.ratio);
+      this.ctx.stroke();
+     
+      if(unitTextWidth < steppedOneUnit - (2*this.padding) && x > 0) {
+        this.ctx.fillText(caption,(x+this.padding)*this.ratio,(yOffset+lineHeight-this.padding)*this.ratio);
+      } else if((unitTextWidth < (steppedOneUnit - (2*this.padding) +pixelOffset)) && (unitTextWidth < (steppedOneUnit-(2*this.padding)))) {
+        this.ctx.fillText(caption, (this.padding*this.ratio),(yOffset+lineHeight-this.padding)*this.ratio);
+      } else if(x < 0 && (unitTextWidth <steppedOneUnit - (2*this.padding))) {
+        this.ctx.fillText(caption, ((x+steppedOneUnit-this.padding-unitTextWidth) *this.ratio),(yOffset+ lineHeight-this.padding)*this.ratio);
+      }
+      n=this.getNextTick(viewStartDate,n,step,unitScale);
+      dateOffset = this.getUnitDateOffset(viewStartDate,unitScale,n);
+      nextDateOffset = this.getUnitDateOffset(viewStartDate,unitScale,this.getNextTick(viewStartDate,n,step,unitScale));
+      nextX = (nextDateOffset / this.scale);
+      pixelOffset =  (dateOffset / this.scale);
+      caption= this.getStartCaption(new Date(viewStartDate.getTime()+dateOffset),unitScale,false,false);
+      x=pixelOffset;
+    }
+    return lineHeight;
+  }
+
+  redraw() {   
+    let yOffset=0;
+    let canvas = this.canvasRef.nativeElement;
+    let height = canvas.offsetHeight;
+    let width = canvas.offsetWidth;
+    this.ctx.lineWidth = this.lineWidth;// *this.ratio;
+    this.ctx.clearRect(0,0,width *this.ratio,height*this.ratio);
+    for(let unit of this.posibleUnits) {
+      if(this.unitScale <=unit) yOffset+=this.drawUnits(yOffset,width,this.viewMinDate,unit);
+    }    
+  }  
+
+  handleClick() {
+    this.collapsed = !this.collapsed;
+  }  
+
+  updateStyle(startDate:Date,endDate:Date) {
+    let rangeInMilliseconds = endDate.getTime() - startDate.getTime();
+    let range = rangeInMilliseconds / this.scale;
+    let left = (startDate.getTime() - this.viewMinDate.getTime()) / this.scale;
+    this.startPopoverLeft=(left-10);
+    this.endPopoverLeft=(left+range+10);
+    this.marginLeft = (left - 15);
+    this.rangeWidth = range;
+    this.updatePopoverText(this.popoverStart,this.getStartCaption(startDate,this.unitScale,true));
+    this.updatePopoverText(this.popoverEnd,this.getEndCaption(endDate,this.unitScale,true));
+    this.caption=this.getCaption(startDate,endDate,this.unitScale);
+  }
+
+  snapToUnit(date:Date,unitScale:number):Date {
+    var d = new Date(date.getTime() + (this.unitScales[this.unitScale]/2));
+    var offsetInMilliseconds =this.getUnitDateOffset(d,this.unitScale,0)
+    return new Date(d.getTime()+offsetInMilliseconds);
+  }
+
+  getEndDate(offsetInPixels:number):Date {
+    let oneUnit = this.unitScales[this.unitScale];
+    let offsetInMilliseconds = offsetInPixels * this.scale;   
+    if(this.leftGripMove) {
+      if(this.startDate.getTime() + offsetInMilliseconds > this.endDate.getTime() - oneUnit) {
+        return this.snapToUnit(new Date(this.startDate.getTime() + offsetInMilliseconds + oneUnit),this.unitScale);
+      } 
+    } else if(this.rightGripMove || this.rangeGripMove) {
+      return this.snapToUnit(new Date(this.endDate.getTime() + offsetInMilliseconds),this.unitScale);
+    } 
+    return this.endDate;
+  }
+
+  getStartDate(offsetInPixels:number):Date {
+    let oneUnit = this.unitScales[this.unitScale];
+    let offsetInMilliseconds = offsetInPixels * this.scale;
+    if(this.leftGripMove || this.rangeGripMove) {
+      return this.snapToUnit(new Date(this.startDate.getTime() + offsetInMilliseconds),this.unitScale);     
+    } else if(this.rightGripMove) {
+      if(this.endDate.getTime() + offsetInMilliseconds < this.startDate.getTime() + oneUnit) {
+        return this.snapToUnit(new Date(this.endDate.getTime() + offsetInMilliseconds - oneUnit),this.unitScale);
+      } 
+    } 
+    return this.startDate;
+  }
+
+  updateControl(event:MouseEvent|TouchEvent) {
+    let offsetInPixels = this.getClientX(event) - this.downX;
+     if(this.leftGripMove || this.rightGripMove || this.rangeGripMove) {      
+       let startDate = this.getStartDate(offsetInPixels);
+       let endDate = this.getEndDate(offsetInPixels);
+       this.updateStyle(startDate,endDate)
+       this.changeDetectorRef.detectChanges();
+     }  else if(this.viewPan) {
+        let offsetInMilliseconds = offsetInPixels*this.scale;
+        this.viewMinDate = new Date(this.viewMinDate.getTime()-offsetInMilliseconds);
+        this.viewMaxDate = new Date(this.viewMaxDate.getTime()-offsetInMilliseconds);
+        this.updateStyle(this.startDate,this.endDate);
+        this.redraw();
+        this.changeDetectorRef.detectChanges();
+        this.downX=this.getClientX(event);
+     }
+     this.lastOffsetInPixels=offsetInPixels
+  }
+
+  isMouseEvent(arg: any): arg is MouseEvent {
+    return arg.clientX !== undefined;
+  }
+
+  getClientX(event:MouseEvent|TouchEvent) {
+    if(this.isMouseEvent(event)) {
+      return (event as MouseEvent).clientX;
+    } else {
+      return (event as TouchEvent).touches[0].clientX;
+    }
+  }
+
+  handleRightGripMouseDown(event:MouseEvent) {
+    this.rightGripMove=true;
+    this.downX = this.getClientX(event);
+    this.popoverEnd.open(this.endCaption);
+    event.preventDefault();
+  }
+
+  handleRightGripMouseEnter(event:MouseEvent) {
+    this.mouseX=-1;
+    this.mouseY=-1;
+    this.redraw();    
+    if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove)  this.popoverEnd.open(this.endCaption);
+  }
+
+  handleRightGripMouseLeave(event:MouseEvent) {
+    if(!this.rightGripMove) this.popoverEnd.close();
+  }
+
+  handleLeftGripMouseDown(event:MouseEvent|TouchEvent) {
+    this.leftGripMove=true;
+    this.downX = this.getClientX(event);
+    this.popoverStart.open(this.startCaption);
+    event.preventDefault();
+  }
+
+  handleLeftGripMouseEnter(event:MouseEvent|TouchEvent) {
+    this.mouseX=-1;
+    this.mouseY=-1;
+    this.redraw();
+    if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove) this.popoverStart.open(this.startCaption);
+  }
+
+  handleLeftGripMouseLeave(event:MouseEvent) {
+    if(!this.leftGripMove) this.popoverStart.close();
+  }
+
+  handleRangeGripMouseEnter(event:MouseEvent) {
+    this.mouseX=-1;
+    this.mouseY=-1;
+    this.redraw();    
+  }
+
+  handleRangeGripMouseDown(event:MouseEvent|TouchEvent) {
+    this.rangeGripMove=true;
+    this.downX = this.getClientX(event);
+    event.preventDefault();
+  }
+ 
+  handleViewPanMouseDown(event:MouseEvent|TouchEvent) {
+    this.viewPan=true;
+    this.downX =this.getClientX(event);
+    event.preventDefault();
+  }
+
+  handleMouseUp(event:MouseEvent|TouchEvent) {
+    //this.updateControl(event);
+    this.startDate = this.getStartDate(this.lastOffsetInPixels);
+    this.endDate = this.getEndDate(this.lastOffsetInPixels);
+    this.popoverStart.close();
+    this.popoverEnd.close();
+    this.startCaption={popoverCaption:this.getStartCaption(this.startDate,this.unitScale,true)};
+    this.endCaption={popoverCaption:this.getEndCaption(this.endDate,this.unitScale,true)};
+    if(this.leftGripMove || this.rightGripMove || this.rangeGripMove) {
+      this.change.emit({ startDate:this.startDate,endDate:this.endDate});    
+    }
+    this.rightGripMove=false;
+    this.leftGripMove=false;
+    this.rangeGripMove=false;
+    this.viewPan = false;   
+    this.lastOffsetInPixels=0;
+  }
+
+  handleMouseMove(event:MouseEvent) {   
+    this.mouseX = -1;
+    this.mouseY = -1;
+    if(!this.leftGripMove && ! this.rightGripMove && !this.rangeGripMove && !this.viewPan) {           
+      return;  
+    } else {
+     this.updateControl(event);         
+    }
+  }
+
+  handleCanvasMouseMove(event:MouseEvent) {
+    this.mouseX = event.offsetX;
+    this.mouseY = event.offsetY;
+    this.redraw();
+  }
+
+  handleCanvasMouseLeave(event:MouseEvent) {
+    this.mouseX = -1;
+    this.mouseY = -1;
+    this.redraw();
+  }
+
+  canZoom(currentScale:number, direction:number):boolean {
+    let nextScale=currentScale;
+    if(direction<0 ) {
+      return true;
+    } else {
+      nextScale*=1.1;
+      let canZoom=false;
+      let oneUnit = (this.getUnitDateOffset(this.viewMinDate,8,1)- this.getUnitDateOffset(this.viewMinDate,8,0)) / nextScale;   
+      let unitTextWidth=this.getUnitTextWidth(8);
+      let steps=this.getSteps(8);
+      let s=0;
+      let step=steps[s];
+      let steppedOneUnit=oneUnit*step;
+      while(unitTextWidth > (steppedOneUnit-(2*this.padding)) && s < steps.length -1) {
+        step=steps[++s];
+        steppedOneUnit=oneUnit*step;
+      }   
+      return unitTextWidth < (steppedOneUnit-(2*this.padding)) && s < steps.length;
+    }
+  }
+
+  handleMouseWheel(event:WheelEvent) {
+    if(!this.canZoom(this.scale,event.deltaY)) return;
+    let oldOffsetInMilliseconds = event.clientX * this.scale;
+    if(event.deltaY>=0) 
+      this.scale*=1.1;
+    else
+      this.scale/=1.1;
+    this.posibleUnits=this.getPosibleUnits(this.scale);
+    this.height=this.getHeight();
+    this.changeDetectorRef.detectChanges();
+    this.setCanvasSize();
+    let newOffsetInMilliseconds = event.clientX * this.scale;
+    let offsetInMilliseconds = newOffsetInMilliseconds-oldOffsetInMilliseconds;
+    this.viewMinDate = new Date(this.viewMinDate.getTime()-offsetInMilliseconds);
+    this.viewMaxDate = new Date(this.viewMaxDate.getTime()-offsetInMilliseconds);
+    this.updateStyle(this.startDate,this.endDate);
+    this.redraw();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  handleZoomOut() {
+    if(!this.canZoom(this.scale,1)) return;
+    this.scale*=1.1;
+    this.posibleUnits=this.getPosibleUnits(this.scale);
+    this.height=this.getHeight();
+    this.setCanvasSize();
+    this.redraw();
+    this.updateStyle(this.startDate,this.endDate);
+  }
+
+  handleZoomIn() {
+    if(!this.canZoom(this.scale,-1)) return;
+    this.scale/=1.1;
+    this.posibleUnits=this.getPosibleUnits(this.scale);
+    this.height=this.getHeight();
+    this.setCanvasSize();
+    this.redraw();  
+    this.updateStyle(this.startDate,this.endDate);
+  }
+
+  handleResize(event:any) {
+    if(this.initialized) {
+      this.setCanvasSize();
+      this.updateStyle(this.startDate,this.endDate);
+      this.redraw();
+    }   
+  }
+
+  ngOnChanges (changes: SimpleChanges) {
+    if(this.initialized) {
+      this.setCanvasSize();
+      this.updateStyle(this.startDate,this.endDate);
+      this.redraw();
+    }   
+  }
+}
diff --git a/projects/common/src/lib/effects/app-common.effects.ts b/projects/common/src/lib/effects/app-common.effects.ts
new file mode 100644
index 0000000..6c6091e
--- /dev/null
+++ b/projects/common/src/lib/effects/app-common.effects.ts
@@ -0,0 +1,121 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { Store, Action } from '@ngrx/store';
+import { Effect, Actions,ofType } from '@ngrx/effects';
+import { Observable ,  defer ,  of } from 'rxjs';
+import { withLatestFrom,mergeMap,switchMap,map,catchError} from 'rxjs/operators';
+import * as appCommonActions from '../actions/app-common.actions';
+import * as appCommonReducers from '../reducers/app-common.reducer';
+import { ItemService } from '../services/item.service';
+import { FolderService } from '../services/folder.service';
+import { UserService } from '../services/user.service';
+import { IItemTypes } from '../models/item.types';
+import { IListItem } from '../models/list.item';
+import { IUser } from '../models/user';
+
+@Injectable()
+export class AppCommonEffects {
+
+  @Effect({ dispatch: false })
+  login$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.LOGIN),
+    withLatestFrom(this.store$.select(appCommonReducers.selectGetInitialized)),
+    mergeMap(([action, initialized]) => {
+      var a = (action as appCommonActions.Login);
+      this.oauthService$.initImplicitFlow(a.url);
+      return [];
+    }));
+
+  @Effect()
+  loadItemTypes$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.LOADITEMTYPES),
+    switchMap((action) => {
+      return this.itemService$.getItemTypes().pipe(
+        map((itemTypes: IItemTypes) => new appCommonActions.LoadItemTypesSuccess(itemTypes)),
+        catchError(error => of(new appCommonActions.Fail(error))))
+      }
+  ));
+
+  @Effect()
+  initUser$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.INITUSER),
+    switchMap(() => {
+      return this.userService$.getCurrentUser().pipe(
+        map((user: IUser) => new appCommonActions.InitUserSuccess(user)),
+        catchError(error => of(new appCommonActions.Fail(error))))
+    }
+  ));
+
+  @Effect()
+  initUserSuccess$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.INITUSERSUCCESS),
+    switchMap(() => {
+      return of(new appCommonActions.InitRoot());
+    }
+    ));
+
+  @Effect()
+  initRoot$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.INITROOT),
+    switchMap(() => {
+      return this.folderService$.getMyRoots().pipe(
+        map((folders: IListItem[]) => new appCommonActions.InitRootSuccess(folders)),
+        catchError(error => of(new appCommonActions.Fail(error))))
+    }
+    ));
+
+  @Effect()
+  deleteItems$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.DELETEITEMS),
+    switchMap((action:appCommonActions.DeleteItems) => {
+      return this.itemService$.deleteItems(action.itemCodes).pipe(
+        map((deletedItemCodes: string[]) => new appCommonActions.DeleteItemsSuccess(deletedItemCodes)),
+        catchError(error => of(new appCommonActions.Fail(error))))
+    }
+  ));
+
+  @Effect()
+  editItem$: Observable<Action> = this.actions$.pipe(
+      ofType(appCommonActions.EDITITEM),
+      withLatestFrom(this.store$.select(appCommonReducers.selectGetItemTypes)),
+      switchMap(([action, itemtypes]) => {
+        var a = action as appCommonActions.EditItem;
+        var itemType = itemtypes[a.item.itemType];
+        var editor = itemType.editor ? itemType.editor : "property";
+      this.router$.navigate(['/editor',editor,'item', a.item.code])
+      return [];
+    }
+  ));
+
+  @Effect()
+  viewItem$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.VIEWITEM),
+    withLatestFrom(this.store$.select(appCommonReducers.selectGetItemTypes)),
+    switchMap(([action, itemtypes]) => {
+      var a = action as appCommonActions.EditItem;
+      var itemType = itemtypes[a.item.itemType];
+      var viewer = itemType.viewer;
+      if (viewer !== 'trijntje') {
+        this.router$.navigate(['/viewer', viewer, 'item', a.item.code]);
+      }
+      else {
+        this.router$.navigate(['/app', viewer, 'item', a.item.code]);
+      }
+      return [];
+    }
+    ));
+
+  @Effect({ dispatch: false })
+  fail$: Observable<Action> = this.actions$.pipe(
+    ofType(appCommonActions.FAIL),
+    map((action) => {
+      let failAction = action as appCommonActions.Fail;
+      console.log(failAction.payload)
+      return null;
+    }));
+
+  constructor(private actions$: Actions, private store$: Store<appCommonReducers.State>, private oauthService$: OAuthService, private itemService$: ItemService, private folderService$:FolderService, private userService$: UserService, private router$: Router) {
+    store$.dispatch(new appCommonActions.LoadItemTypes());
+  }
+}
diff --git a/projects/common/src/lib/index.ts b/projects/common/src/lib/index.ts
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/projects/common/src/lib/index.ts
@@ -0,0 +1 @@
+
diff --git a/projects/common/src/lib/models/event.message.ts b/projects/common/src/lib/models/event.message.ts
new file mode 100644
index 0000000..ce61261
--- /dev/null
+++ b/projects/common/src/lib/models/event.message.ts
@@ -0,0 +1,6 @@
+export interface IEventMessage {
+  eventType: string;
+  parentCode: string;
+  itemCode: string;
+  attributes: any;   
+}
diff --git a/projects/common/src/lib/models/item.ts b/projects/common/src/lib/models/item.ts
new file mode 100644
index 0000000..7998051
--- /dev/null
+++ b/projects/common/src/lib/models/item.ts
@@ -0,0 +1,27 @@
+import { IListItem } from './list.item';
+
+export interface IItem extends IListItem {
+    parentCode?: string;
+    geometry?: any;
+    tags:string[],
+    data?:any
+}
+
+export class Item implements IItem {
+  public code?:string;
+  public parentCode?:string;
+  public tags:string[];
+  public geometry?:any;
+  public url?: string;
+  public name?: string;
+  public created?: Date;
+  public updated?: Date;
+  public dataDate?: Date;
+  public itemType?: string;
+  public size?: number;
+  public state?: number;
+  public data?:any;
+
+  constructor() {  
+  }
+}
diff --git a/projects/common/src/lib/models/item.type.ts b/projects/common/src/lib/models/item.type.ts
new file mode 100644
index 0000000..53b4c69
--- /dev/null
+++ b/projects/common/src/lib/models/item.type.ts
@@ -0,0 +1,8 @@
+export interface IItemType {
+  icon?: string;
+  viewer?: string;
+  editor?: string;
+  isFolder?: boolean;
+  iconColor?: string;
+  mapIcon?: string;
+}
diff --git a/projects/common/src/lib/models/item.types.ts b/projects/common/src/lib/models/item.types.ts
new file mode 100644
index 0000000..594a985
--- /dev/null
+++ b/projects/common/src/lib/models/item.types.ts
@@ -0,0 +1,5 @@
+import { IItemType } from './item.type';
+
+export interface IItemTypes{
+  [id: string]: IItemType;
+};
diff --git a/projects/common/src/lib/models/itemTask.ts b/projects/common/src/lib/models/itemTask.ts
new file mode 100644
index 0000000..a95a260
--- /dev/null
+++ b/projects/common/src/lib/models/itemTask.ts
@@ -0,0 +1,15 @@
+
+export interface IItemTask  {
+  code?: string;
+  taskType?: string;
+  attributes?:any
+}
+
+export class ItemTask implements IItemTask {
+  public code?:string;
+  public taskType?: string;
+  public attributes?: any;
+
+  constructor() {  
+  }
+}
diff --git a/projects/common/src/lib/models/list.item.ts b/projects/common/src/lib/models/list.item.ts
new file mode 100644
index 0000000..d7f1176
--- /dev/null
+++ b/projects/common/src/lib/models/list.item.ts
@@ -0,0 +1,12 @@
+export interface IListItem {
+    url?: string;
+    code?: string;
+    name?: string;
+    created?: Date;
+    updated?: Date;
+    dataDate?: Date;
+    itemType?: string;
+    size?: number;
+    state?: number;
+    thumbnail?: boolean;
+}
diff --git a/projects/common/src/lib/models/typeahead.item.ts b/projects/common/src/lib/models/typeahead.item.ts
new file mode 100644
index 0000000..63e0a1f
--- /dev/null
+++ b/projects/common/src/lib/models/typeahead.item.ts
@@ -0,0 +1,4 @@
+export interface ITypeaheadItem {
+  name: string;
+  type: string;
+}
diff --git a/projects/common/src/lib/models/user.ts b/projects/common/src/lib/models/user.ts
new file mode 100644
index 0000000..80e6efe
--- /dev/null
+++ b/projects/common/src/lib/models/user.ts
@@ -0,0 +1,5 @@
+export interface IUser {
+  code?: string;
+  name?: string;
+  email?: string;
+}
diff --git a/projects/common/src/lib/module-name.ts b/projects/common/src/lib/module-name.ts
new file mode 100644
index 0000000..48e6151
--- /dev/null
+++ b/projects/common/src/lib/module-name.ts
@@ -0,0 +1 @@
+export const MODULE_NAME = "FarmMapsCommon";
diff --git a/projects/common/src/lib/reducers/app-common.reducer.ts b/projects/common/src/lib/reducers/app-common.reducer.ts
new file mode 100644
index 0000000..3605534
--- /dev/null
+++ b/projects/common/src/lib/reducers/app-common.reducer.ts
@@ -0,0 +1,65 @@
+import { tassign } from 'tassign';
+import { IItemTypes} from '../models/item.types';
+import { IListItem } from '../models/list.item';
+import { IUser } from '../models/user';
+import * as appCommonActions from '../actions/app-common.actions';
+import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
+
+import { MODULE_NAME } from '../module-name';
+
+export interface State {
+  openedModalName: string,
+  initialized: boolean,
+  rootItems: IListItem[],
+  itemTypes: IItemTypes,
+  user:IUser
+}
+
+export const initialState: State = {
+  openedModalName: null,
+  initialized: false,
+  rootItems: [],
+  itemTypes: {},
+  user:null
+}
+
+export function reducer(state = initialState, action: appCommonActions.Actions ): State {
+  switch (action.type) {
+    case appCommonActions.INITUSERSUCCESS: {
+      let a = action as appCommonActions.InitUserSuccess;
+      return tassign(state, { user: a.user });
+    }
+    case appCommonActions.INITROOTSUCCESS: {
+      let a = action as appCommonActions.InitRootSuccess;
+      return tassign(state, { rootItems:a.items});
+    }
+    case appCommonActions.OPENMODAL: {
+      return tassign(state, { openedModalName: action.modalName });
+    }      
+    case appCommonActions.CLOSEMODAL: {
+      return tassign(state, { openedModalName: null });
+    }
+    case appCommonActions.INITIALIZED: {
+      return tassign(state, { initialized: true });
+    }
+    case appCommonActions.LOADITEMTYPESSUCCESS: {
+      let a = action as appCommonActions.LoadItemTypesSuccess;
+      return tassign(state, { itemTypes: a.itemTypes });
+    }
+    default: {
+      return state;
+    }
+  }
+}
+
+export const getOpenedModalName = (state: State) => state.openedModalName;
+export const getInitialized = (state: State) => state.initialized;
+export const getItemTypes = (state: State) => state.itemTypes;
+export const getRootItems = (state: State) => state.rootItems;
+
+export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
+
+export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName);
+export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
+export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
+export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
diff --git a/projects/common/src/lib/services/auth-guard.service.ts b/projects/common/src/lib/services/auth-guard.service.ts
new file mode 100644
index 0000000..5c75284
--- /dev/null
+++ b/projects/common/src/lib/services/auth-guard.service.ts
@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate, Router, CanLoad, Route, CanActivateChild ,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+
+import { Store } from '@ngrx/store';
+import { OAuthService } from 'angular-oauth2-oidc';
+
+
+import * as appCommonReducer from '../reducers/app-common.reducer'
+import * as appCommonActions from '../actions/app-common.actions';
+
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanLoad, CanActivateChild  { 
+ 
+  private loginDispatched = false;
+  private initialized = false;
+  constructor(private oauthService: OAuthService, private router: Router, private store: Store<appCommonReducer.State> ) { }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    let url: string = state.url;
+
+    return this.checkLogin(url);
+  }
+
+  canLoad(route: Route): boolean {
+    return this.checkLogin(route.path);
+  }
+
+  checkLogin(url: string): boolean {
+    if (!this.oauthService.hasValidAccessToken()) {
+      if (!this.loginDispatched) {
+        this.oauthService.silentRefresh().then(info => {
+          this.router.navigateByUrl(url);
+        }).catch(error => {
+          this.loginDispatched = true;
+          this.store.dispatch(new appCommonActions.Login(url));
+        })
+      }     
+      return false;
+    } else {
+      if (!this.initialized) {
+        this.initialized = true;
+        this.store.dispatch(new appCommonActions.InitUser());
+      }
+      return true;
+    }
+  }
+}
diff --git a/projects/common/src/lib/services/date-adapter.service.ts b/projects/common/src/lib/services/date-adapter.service.ts
new file mode 100644
index 0000000..a942580
--- /dev/null
+++ b/projects/common/src/lib/services/date-adapter.service.ts
@@ -0,0 +1,14 @@
+import { Component, Injectable } from '@angular/core';
+import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+
+@Injectable()
+export class NgbDateNativeAdapter extends NgbDateAdapter<Date> {
+
+  fromModel(date: Date): NgbDateStruct {
+    return (date && date.getFullYear) ? {year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()} : null;
+  }
+
+  toModel(date: NgbDateStruct): Date {
+    return date ? new Date(Date.UTC(date.year, date.month - 1, date.day)) : null;
+  }
+}
diff --git a/projects/common/src/lib/services/event.service.ts b/projects/common/src/lib/services/event.service.ts
new file mode 100644
index 0000000..882214b
--- /dev/null
+++ b/projects/common/src/lib/services/event.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { IEventMessage } from '../models/event.message';
+import { Subject } from 'rxjs';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { HubConnection, HubConnectionBuilder, LogLevel } from '@aspnet/signalr';
+import { AppConfig } from "../shared/app.config";
+
+
+@Injectable()
+export class EventService {
+
+    public event:Subject <IEventMessage> = new Subject<IEventMessage>();
+  private _connection: HubConnection = null;
+  private _apiEndPoint: string;
+    
+  constructor(private oauthService: OAuthService, private appConfig: AppConfig) {
+    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
+    this._connection = new HubConnectionBuilder().withUrl(`${this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
+    this._connection.start().then(() => {
+      var accessToken = oauthService.getAccessToken();
+      if (accessToken) {
+        this._connection.send('authenticate', oauthService.getAccessToken());
+      }
+    });
+    this._connection.on('event', eventMessage => {
+      this.event.next(eventMessage);
+    });
+  }
+} 
diff --git a/projects/common/src/lib/services/folder.service.ts b/projects/common/src/lib/services/folder.service.ts
new file mode 100644
index 0000000..26139d0
--- /dev/null
+++ b/projects/common/src/lib/services/folder.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { Observable ,  Observer } from 'rxjs';
+import {map} from 'rxjs/operators';
+import { IListItem } from '../models/list.item';
+import { IItem } from '../models/item';
+import { HttpClient } from "@angular/common/http";
+import { AppConfig } from "../shared/app.config";
+
+@Injectable()
+export class FolderService {
+    private _apiEndPoint: string;
+
+    constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+      this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  }
+
+  parseDates(item: any): IListItem {
+    item.created = new Date(Date.parse(item.created));
+    item.updated = new Date(Date.parse(item.updated));
+    item.dataDate = new Date(Date.parse(item.dataDate));
+    return item;
+  }
+
+    getFolder(code: string): Observable<IListItem> {
+      return this.httpClient.get<IListItem>(`${this._apiEndPoint}/api/v1/folders/${code}`).pipe(map(i => this.parseDates(i)));            
+    }
+
+    getMyRoots(): Observable<IListItem[]> {
+      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/my_roots`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    }    
+
+    getFolderParents(code: string): Observable<IListItem[]> {
+      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/parents`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    }
+
+    getChildFolders(code: string): Observable<IListItem[]> {
+      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/listfolders`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    }
+
+    getItems(code: string,skip:number, take:number): Observable<IListItem[]> {
+      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/list?skip=${skip}&take=${take}`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    }
+
+    moveItem(itemCode: string, newParentCode: string): Observable<IListItem> {
+        const body = { itemCode: itemCode,newParentCode: newParentCode };
+      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/items/move`, body).pipe(map(i => this.parseDates(i)));
+    }
+
+    createFolder(folder: IItem): Observable<IListItem> {
+      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/folders/`, folder).pipe(map(i => this.parseDates(i)));
+    }
+}
diff --git a/projects/common/src/lib/services/full-screen-guard.service.ts b/projects/common/src/lib/services/full-screen-guard.service.ts
new file mode 100644
index 0000000..59e9e1d
--- /dev/null
+++ b/projects/common/src/lib/services/full-screen-guard.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { CanLoad, Route, CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+
+import { Store } from '@ngrx/store';
+
+import * as appCommonReducer from '../reducers/app-common.reducer'
+import * as appCommonActions from '../actions/app-common.actions';
+
+
+@Injectable()
+export class FullScreenGuard implements CanActivate { 
+ 
+  private loginDispatched = false;
+  constructor(private store: Store<appCommonReducer.State> ) { }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    this.store.dispatch(new appCommonActions.FullScreen());
+    return true;
+  } 
+}
diff --git a/projects/common/src/lib/services/item.service.ts b/projects/common/src/lib/services/item.service.ts
new file mode 100644
index 0000000..af72fe3
--- /dev/null
+++ b/projects/common/src/lib/services/item.service.ts
@@ -0,0 +1,119 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { IItemType } from '../models/item.type';
+import { IItem } from '../models/item';
+import { IItemTask } from '../models/itemTask';
+import { HttpClient, HttpParams } from "@angular/common/http";
+import { AppConfig } from "../shared/app.config";
+
+@Injectable()
+export class ItemService {
+  private _apiEndPoint: string;
+
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
+  }
+
+  parseDates(item: any): IItem {
+    item.created = new Date(Date.parse(item.created));
+    item.updated = new Date(Date.parse(item.updated));
+    item.dataDate = new Date(Date.parse(item.dataDate));
+    return item;
+  }
+
+  getItemTypes(): Observable<{ [id: string]: IItemType }> {
+    return this.httpClient.get<{ [id: string]: IItemType }>(`${this._apiEndPoint}/api/v1/itemtypes/`);
+  }
+
+  getFeatures(extent: number[], crs: string, searchText?: string, searchTags?:string,startDate?:Date,endDate?:Date): Observable<any> {
+    var params = new HttpParams();
+    params = params.append("bbox", extent.join(","));
+    params = params.append("crs", crs);
+    if (searchText) params = params.append("q", searchText);
+    if (searchTags) params = params.append("t", searchTags);
+    if (startDate) params = params.append("sd", startDate.toISOString());
+    if (endDate) params = params.append("ed", endDate.toISOString());
+    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/features/`, {params:params});
+  }
+
+  getFeature(code:string, crs: string): Observable<any> {
+    var params = new HttpParams();
+    params = params.append("crs", crs);
+    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/feature/`, { params: params });
+  }
+
+  getItem(code: string): Observable<IItem> {
+    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
+  }
+
+  getItemByCodeAndType(code: string, itemType: string): Observable<IItem> {
+    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}/${itemType}`);
+  }
+
+  getItemList(itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
+    var params = new HttpParams();
+    params = params.append("it", itemType);
+    if(dataFilter != null){
+      params = params.append("df", JSON.stringify(dataFilter));
+    }
+    params = params.append("lvl", itemType);
+    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
+  }
+
+  getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
+    var params = new HttpParams();
+    params = params.append("it", itemType);
+    if (dataFilter != null) {
+      params = params.append("df", JSON.stringify(dataFilter));
+    }
+    params = params.append("lvl", level.toString());
+    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+  }
+
+  getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
+    var params = new HttpParams();
+    params = params.append("it", itemType);
+    params = params.append("bbox", extent.join(","));
+    params = params.append("crs", crs);
+    if (dataFilter != null) {
+      params = params.append("df", JSON.stringify(dataFilter));
+    }
+    params = params.append("lvl", level.toString());
+    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+  }
+
+  getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
+    var params = new HttpParams();
+    params = params.append("bbox", extent.join(","));
+    params = params.append("crs", crs);
+    if(layerIndex!=null)
+      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
+    else
+      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features`, { params: params });
+  }
+
+  putItem(item:IItem): Observable<IItem> {
+    return this.httpClient.put<IItem>(`${this._apiEndPoint}/api/v1/items/${item.code}`,item);
+  }
+
+  deleteItems(itemCodes:string[]): Observable<any> {
+    return this.httpClient.post<any>(`${this._apiEndPoint}/api/v1/items/delete`, itemCodes);
+  }
+
+  getTemporalLast(code: string): Observable<any> {
+    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/last`);
+  }
+
+  getTemporal(code: string, startDate?: Date, endDate?: Date): Observable<any> {
+    var params = new HttpParams();
+    if (startDate) params = params.append("sd", startDate.toISOString());
+    if (endDate) params = params.append("ed", endDate.toISOString());
+    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/`, { params: params });
+  }
+
+  postItemTask(item: IItem, task: IItemTask): Observable<IItemTask> {
+    return this.httpClient.post<IItemTask>(`${this._apiEndPoint}/api/v1/items/${item.code}/tasks`, task);
+  }
+}
+
diff --git a/projects/common/src/lib/services/nav-bar-guard.service.ts b/projects/common/src/lib/services/nav-bar-guard.service.ts
new file mode 100644
index 0000000..93142af
--- /dev/null
+++ b/projects/common/src/lib/services/nav-bar-guard.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { CanLoad, Route, CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+import { Store } from '@ngrx/store';
+
+import * as appCommonReducer from '../reducers/app-common.reducer'
+import * as appCommonActions from '../actions/app-common.actions';
+
+
+@Injectable()
+export class NavBarGuard implements CanActivate {
+
+  private loginDispatched = false;
+  constructor(private store: Store<appCommonReducer.State>) { }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    this.store.dispatch(new appCommonActions.ShowNavBar());
+    return true;
+  }
+}
diff --git a/projects/common/src/lib/services/timespan.service.ts b/projects/common/src/lib/services/timespan.service.ts
new file mode 100644
index 0000000..cb623b0
--- /dev/null
+++ b/projects/common/src/lib/services/timespan.service.ts
@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Observable ,  Observer } from 'rxjs';
+import { ITypeaheadItem } from '../models/typeahead.item';
+
+@Injectable()
+export class TimespanService {
+  constructor(private datePipe: DatePipe) {
+  }
+  unitScales: number[] = [1, 1000, 1000 * 60, 1000 * 60 * 60, 1000 * 60 * 60 * 24, 1000 * 60 * 60 * 24 * 7, 1000 * 60 * 60 * 24 * 31, 1000 * 60 * 60 * 24 * 31 * 3, 1000 * 60 * 60 * 24 * 365.25];
+  units: string[] = ['millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'];
+  quarters: string[] = ['KW1', 'KW2', 'KW3', 'KW4'];
+
+  getStartEndCaption(date: Date, otherDate: Date, unitScale: number, suffix: boolean = false, extended: boolean = true): string {
+    let showSuffix = false;
+    otherDate = new Date(otherDate.getTime() - 1); // fix year edge case
+    if (unitScale == 3) {
+      let format = "HH:00";
+      if (extended) {
+        if (suffix || date.getFullYear() != otherDate.getFullYear())
+          format = "d MMM yyyy:HH:00";
+        else if (date.getMonth() !== otherDate.getMonth())
+          format = "d MMM HH:00";
+      }
+      return this.datePipe.transform(date, format);
+
+    }
+    if (unitScale == 4) {
+      let format = "d";
+      if (extended) {
+        if (suffix || date.getFullYear() != otherDate.getFullYear())
+          format = "d MMM yyyy";
+        else if (date.getMonth() !== otherDate.getMonth())
+          format = "d MMM"
+      }
+      return this.datePipe.transform(date, format);
+
+    }
+    if (unitScale == 6) {
+      let format = "MMM";
+      if (extended) {
+        if (suffix || date.getFullYear() != otherDate.getFullYear())
+          format = "MMM yyyy";
+      }
+      return this.datePipe.transform(date, format);
+    }
+    if (unitScale == 7) {
+      let q = Math.trunc(date.getMonth() / 3);
+      return this.quarters[q];
+    }
+    if (unitScale == 8) {
+      return this.datePipe.transform(date, "yyyy");
+    }
+    return "";
+  }
+
+  getStartCaption(startDate: Date, endDate: Date, unitScale: number, suffix: boolean = false, extended: boolean = true): string {
+    return this.getStartEndCaption(new Date(startDate.getTime() + (this.unitScales[unitScale] / 2)), endDate, unitScale, suffix, extended);
+  }
+
+  getEndCaption(startDate: Date,endDate: Date, unitScale: number, suffix: boolean = true): string {
+    return this.getStartEndCaption(new Date(endDate.getTime() - (this.unitScales[unitScale] / 2)), startDate, unitScale, suffix);
+  }
+
+  getCaption(startDate: Date, endDate: Date, unitScale: number): string {
+    let startCaption = this.getStartCaption(startDate, endDate, unitScale);
+    let endCaption = this.getEndCaption(startDate,endDate, unitScale);
+    if ((endDate.getTime() - startDate.getTime()) < (1.5 * this.unitScales[unitScale]))
+      return endCaption;
+    return `${startCaption}-${endCaption}`;
+  }
+ 
+}
diff --git a/projects/common/src/lib/services/typeahead.service.ts b/projects/common/src/lib/services/typeahead.service.ts
new file mode 100644
index 0000000..180fb5f
--- /dev/null
+++ b/projects/common/src/lib/services/typeahead.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable ,  Observer } from 'rxjs';
+import { ITypeaheadItem } from '../models/typeahead.item';
+import { HttpClient, HttpParams  } from "@angular/common/http";
+import { AppConfig } from "../shared/app.config";
+
+@Injectable()
+export class TypeaheadService {
+  private _apiEndPoint: string;
+
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
+  }
+
+  getSearchTypeaheadItems(searchText:string,skip:number = 0,take:number = 10): Observable<ITypeaheadItem[]> {
+    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/search/?q=${searchText}&skip=${skip}&take=${take}`);
+  }
+
+  getTagTypeaheadItems(searchText: string, skip: number = 0, take: number = 10): Observable<ITypeaheadItem[]> {
+    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
+  }  
+}
diff --git a/projects/common/src/lib/services/user.service.ts b/projects/common/src/lib/services/user.service.ts
new file mode 100644
index 0000000..9c5daa4
--- /dev/null
+++ b/projects/common/src/lib/services/user.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IUser } from '../models/user';
+import { HttpClient } from "@angular/common/http";
+import { AppConfig } from "../shared/app.config";
+
+@Injectable()
+export class UserService {
+  private _apiEndPoint: string;
+
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+    this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  }
+
+  getCurrentUser(): Observable<IUser> {
+    return this.httpClient.get<IUser>(`${this._apiEndPoint}/api/v1/currentuser`);
+  }
+}
diff --git a/projects/common/src/lib/shared/accesstoken.interceptor.ts b/projects/common/src/lib/shared/accesstoken.interceptor.ts
new file mode 100644
index 0000000..357aabf
--- /dev/null
+++ b/projects/common/src/lib/shared/accesstoken.interceptor.ts
@@ -0,0 +1,47 @@
+import { Injectable, Injector, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common'
+import { AppConfig } from "./app.config";
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class AccessTokenInterceptor implements HttpInterceptor {
+  private oauthService: OAuthService = null;
+  private audience: string[] = [];
+  private base: string;
+
+  constructor(private injector: Injector, private appConfig: AppConfig, @Inject(DOCUMENT) private document: any) {   
+    this.base = document.location.href;
+  }
+
+  hasAudience(url: string): boolean {
+    let u = new URL(url,this.base);
+    for (let audience of this.audience) {
+      if (u.href.startsWith(audience)) return true;
+    }
+    return false;
+  }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (this.oauthService && this.hasAudience(request.url)) {
+      request = request.clone({
+        setHeaders: {
+          Authorization: `Bearer ${this.oauthService.getAccessToken()}`
+        }
+        // Please uncomment the next line if you need to connect to the backend running in Docker.
+        //, url: `http://localhost:8082${request.url}`
+      });
+    } else {
+      this.oauthService = this.injector.get(OAuthService, null);
+      if(this.oauthService && this.oauthService.issuer) this.audience = (this.appConfig.getConfig("audience") as string).split(",");
+    }
+    return next.handle(request);
+  }
+}
+
diff --git a/projects/common/src/lib/shared/app.config.factory.ts b/projects/common/src/lib/shared/app.config.factory.ts
new file mode 100644
index 0000000..de21fe6
--- /dev/null
+++ b/projects/common/src/lib/shared/app.config.factory.ts
@@ -0,0 +1,61 @@
+import { Injector } from '@angular/core';
+import { Router,UrlSerializer } from '@angular/router';
+import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent  } from 'angular-oauth2-oidc';
+import { AppConfig } from "./app.config";
+
+function getAuthConfig(appConfig: AppConfig): AuthConfig {
+  let authConfig: AuthConfig = new AuthConfig();
+  authConfig.issuer = appConfig.getConfig("issuer");
+  authConfig.redirectUri = window.location.origin + "/cb";
+  authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
+  authConfig.clientId = appConfig.getConfig("clientId");
+  authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
+  authConfig.scope = "openid profile email";
+  authConfig.oidc = true;
+  authConfig.disableAtHashCheck = true;
+  authConfig.requireHttps = appConfig.getConfig("requireHttps");
+  return authConfig;
+}
+
+export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService): () => Promise<any> {
+  return (): Promise<any> => {
+    return appConfig.load().then(() => {     
+      oauthService.events.subscribe((event) => {
+        console.log(event.type);
+        if (event.type == 'token_error' || event.type == 'silent_refresh_timeout') {
+          let e = event as OAuthErrorEvent;
+          let p = e.params as any;
+          if (event.type == 'silent_refresh_timeout' || (p.error && p.error == 'login_required')) {
+            let router = injector.get(Router);
+            console.log("Session expired");
+            router.navigate(['loggedout'], { queryParams: { redirectTo: router.url } });
+          }          
+        }
+      });
+      oauthService.configure(getAuthConfig(appConfig));
+      oauthService.tokenValidationHandler = new JwksValidationHandler();
+      oauthService.tokenValidationHandler.validateAtHash = function () {
+        return new Promise<boolean>((res) => { res(true); })
+      };
+      oauthService.setupAutomaticSilentRefresh();
+      let router = injector.get(Router);
+      var urlTree = router.parseUrl(window.location.href);
+      var urlPath = window.location.pathname;
+      oauthService.loadDiscoveryDocument().then(() => {
+        oauthService.tryLogin({
+          onTokenReceived: (info) => {
+            urlPath = info.state;
+          }
+        }).then(() => {
+          let router = injector.get(Router);
+          if (!oauthService.hasValidAccessToken()) {
+            oauthService.initImplicitFlow(urlPath);
+          } else {
+            router.navigateByUrl(urlPath);
+          }
+        });       
+      })
+    });
+  }
+}
+
diff --git a/projects/common/src/lib/shared/app.config.ts b/projects/common/src/lib/shared/app.config.ts
new file mode 100644
index 0000000..d966676
--- /dev/null
+++ b/projects/common/src/lib/shared/app.config.ts
@@ -0,0 +1,33 @@
+import {Inject, Injectable} from '@angular/core';
+import {HttpClient, HttpXhrBackend} from '@angular/common/http';
+import {Observable} from 'rxjs';
+
+@Injectable()
+export class AppConfig {
+
+  private config: Object = null;
+  private httpClient: HttpClient;
+
+  constructor(xhrBackend: HttpXhrBackend) {
+    this.httpClient = new HttpClient(xhrBackend);
+    this.config = null;
+  }
+
+  public getConfig(key: any) {
+    if (!this.config.hasOwnProperty(key)) {
+      console.log(`Config key ${key} not set`);
+    }
+    return this.config[key];
+  }
+
+
+  public load(): Promise<any> {
+    return this.httpClient.get('/configuration.json')
+      .toPromise()
+      .then(data => {
+        this.config = data;
+        //return data;
+      })
+      .catch(error => this.config = null);
+  };
+}
diff --git a/projects/common/src/lib/shared/safe.pipe.ts b/projects/common/src/lib/shared/safe.pipe.ts
new file mode 100644
index 0000000..3b9b5e4
--- /dev/null
+++ b/projects/common/src/lib/shared/safe.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) { }
+  transform(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+}
diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts
index 6128eb2..e0a02cb 100644
--- a/projects/common/src/public-api.ts
+++ b/projects/common/src/public-api.ts
@@ -2,6 +2,4 @@
  * Public API Surface of common
  */
 
-export * from './lib/common.service';
-export * from './lib/common.component';
 export * from './lib/common.module';
diff --git a/projects/common/tsconfig.lib.json b/projects/common/tsconfig.lib.json
index 3fe337f..de024ef 100644
--- a/projects/common/tsconfig.lib.json
+++ b/projects/common/tsconfig.lib.json
@@ -15,7 +15,14 @@
     "lib": [
       "dom",
       "es2018"
-    ]
+    ],
+    "paths": {
+      "@angular/*": [
+   
+      "node_modules/@angular/*"
+   
+      ]
+    }
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
@@ -28,5 +35,5 @@
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
-  ]
+  ]  
 }