first changes

public/backend/dist/css/alt/adminlte.pages.css

@@ -0,0 +1,960 @@
+/*!
+ *   AdminLTE v3.2.0
+ *     Only Pages
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+.close, .mailbox-attachment-close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+
+.close:hover, .mailbox-attachment-close:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close, button.mailbox-attachment-close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled, a.disabled.mailbox-attachment-close {
+  pointer-events: none;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+  40% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+  60% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  100% {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes shake {
+  0% {
+    -webkit-transform: translate(2px, 1px) rotate(0deg);
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    -webkit-transform: translate(-3px, 0) rotate(3deg);
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    -webkit-transform: translate(0, 2px) rotate(0deg);
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    -webkit-transform: translate(1px, -1px) rotate(1deg);
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    -webkit-transform: translate(-3px, 1px) rotate(0deg);
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    -webkit-transform: translate(2px, 1px) rotate(-2deg);
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    -webkit-transform: translate(-1px, -1px) rotate(4deg);
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    -webkit-transform: translate(2px, 2px) rotate(0deg);
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(1px, -2px) rotate(-1deg);
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: none;
+    transform: none;
+  }
+  15% {
+    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+  30% {
+    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+  45% {
+    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+  60% {
+    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+  75% {
+    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+  100% {
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+.mailbox-messages > .table {
+  margin: 0;
+}
+
+.mailbox-controls {
+  padding: 5px;
+}
+
+.mailbox-controls.with-border {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 10px;
+}
+
+.mailbox-read-info h3 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.mailbox-read-info h5 {
+  margin: 0;
+  padding: 5px 0 0;
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  padding-left: 0;
+  list-style: none;
+}
+
+.mailbox-attachments li {
+  border: 1px solid #eee;
+  float: left;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 200px;
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: 700;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background-color: #f8f9fa;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+}
+
+.mailbox-attachment-size > span {
+  display: inline-block;
+  padding-top: .75rem;
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.mailbox-attachment-icon.has-img {
+  padding: 0;
+}
+
+.mailbox-attachment-icon.has-img > img {
+  height: auto;
+  max-width: 100%;
+}
+
+.lockscreen {
+  background-color: #e9ecef;
+}
+
+.lockscreen .lockscreen-name {
+  font-weight: 600;
+  text-align: center;
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.lockscreen-logo a {
+  color: #495057;
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+.lockscreen-item {
+  border-radius: 4px;
+  background-color: #fff;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+.lockscreen-image {
+  border-radius: 50%;
+  background-color: #fff;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+}
+
+.lockscreen-image > img {
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+}
+
+.lockscreen-credentials {
+  margin-left: 70px;
+}
+
+.lockscreen-credentials .form-control {
+  border: 0;
+}
+
+.lockscreen-credentials .btn {
+  background-color: #fff;
+  border: 0;
+  padding: 0 10px;
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}
+
+.dark-mode .lockscreen-item {
+  background-color: #343a40;
+}
+
+.dark-mode .lockscreen-logo a {
+  color: #fff;
+}
+
+.dark-mode .lockscreen-credentials .btn {
+  background-color: #343a40;
+}
+
+.dark-mode .lockscreen-image {
+  background-color: #6c757d;
+}
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+}
+
+.login-logo a,
+.register-logo a {
+  color: #495057;
+}
+
+.login-page,
+.register-page {
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #e9ecef;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100vh;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+}
+
+@media (max-width: 576px) {
+  .login-box,
+  .register-box {
+    margin-top: .5rem;
+    width: 90%;
+  }
+}
+
+.login-box .card,
+.register-box .card {
+  margin-bottom: 0;
+}
+
+.login-card-body,
+.register-card-body {
+  background-color: #fff;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+}
+
+.login-card-body .input-group .form-control,
+.register-card-body .input-group .form-control {
+  border-right: 0;
+}
+
+.login-card-body .input-group .form-control:focus,
+.register-card-body .input-group .form-control:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
+.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
+.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
+  border-color: #80bdff;
+}
+
+.login-card-body .input-group .form-control.is-valid:focus,
+.register-card-body .input-group .form-control.is-valid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
+.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
+.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
+  border-color: #28a745;
+}
+
+.login-card-body .input-group .form-control.is-invalid:focus,
+.register-card-body .input-group .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
+  border-color: #dc3545;
+}
+
+.login-card-body .input-group .input-group-text,
+.register-card-body .input-group .input-group-text {
+  background-color: transparent;
+  border-bottom-right-radius: 0.25rem;
+  border-left: 0;
+  border-top-right-radius: 0.25rem;
+  color: #777;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}
+
+.dark-mode .login-card-body,
+.dark-mode .register-card-body {
+  background-color: #343a40;
+  border-color: #6c757d;
+  color: #fff;
+}
+
+.dark-mode .login-logo a,
+.dark-mode .register-logo a {
+  color: #fff;
+}
+
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page {
+    width: 100%;
+  }
+}
+
+.error-page > .headline {
+  float: left;
+  font-size: 100px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .headline {
+    float: none;
+    text-align: center;
+  }
+}
+
+.error-page > .error-content {
+  display: block;
+  margin-left: 190px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content {
+    margin-left: 0;
+  }
+}
+
+.error-page > .error-content > h3 {
+  font-size: 25px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content > h3 {
+    text-align: center;
+  }
+}
+
+.invoice {
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}
+
+.dark-mode .invoice {
+  background-color: #343a40;
+}
+
+.profile-user-img {
+  border: 3px solid #adb5bd;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid #adb5bd;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+}
+
+.post:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.post .user-block {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.post .row {
+  width: 100%;
+}
+
+.dark-mode .post {
+  color: #fff;
+  border-color: #6c757d;
+}
+
+.product-image {
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+}
+
+.product-image-thumbs {
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 2rem;
+}
+
+.product-image-thumb {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  border-radius: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 7rem;
+  padding: 0.5rem;
+}
+
+.product-image-thumb img {
+  max-width: 100%;
+  height: auto;
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.product-image-thumb:hover {
+  opacity: .5;
+}
+
+.product-share a {
+  margin-right: .5rem;
+}
+
+.projects td {
+  vertical-align: middle;
+}
+
+.projects .list-inline {
+  margin-bottom: 0;
+}
+
+.projects img.table-avatar,
+.projects .table-avatar img {
+  border-radius: 50%;
+  display: inline;
+  width: 2.5rem;
+}
+
+.projects .project-state {
+  text-align: center;
+}
+
+body.iframe-mode .main-sidebar {
+  display: none;
+}
+
+body.iframe-mode .content-wrapper {
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+body.iframe-mode .main-header,
+body.iframe-mode .main-footer {
+  display: none;
+}
+
+body.iframe-mode-fullscreen {
+  overflow: hidden;
+}
+
+body.iframe-mode-fullscreen.layout-navbar-fixed .wrapper .content-wrapper {
+  margin-top: 0 !important;
+}
+
+.content-wrapper {
+  height: 100%;
+}
+
+.content-wrapper.iframe-mode .btn-iframe-close {
+  color: #dc3545;
+  position: absolute;
+  line-height: 1;
+  right: .125rem;
+  top: .125rem;
+  z-index: 10;
+  visibility: hidden;
+}
+
+.content-wrapper.iframe-mode .btn-iframe-close:hover, .content-wrapper.iframe-mode .btn-iframe-close:focus {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  visibility: visible;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .content-wrapper.iframe-mode .btn-iframe-close {
+    visibility: visible;
+  }
+}
+
+.content-wrapper.iframe-mode .navbar-nav {
+  overflow-y: auto;
+  width: 100%;
+}
+
+.content-wrapper.iframe-mode .navbar-nav .nav-link {
+  white-space: nowrap;
+}
+
+.content-wrapper.iframe-mode .navbar-nav .nav-item {
+  position: relative;
+}
+
+.content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  visibility: visible;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .content-wrapper.iframe-mode .navbar-nav .nav-item:hover .btn-iframe-close, .content-wrapper.iframe-mode .navbar-nav .nav-item:focus .btn-iframe-close {
+    visibility: visible;
+  }
+}
+
+.content-wrapper.iframe-mode .tab-content {
+  position: relative;
+}
+
+.content-wrapper.iframe-mode .tab-pane + .tab-empty {
+  display: none;
+}
+
+.content-wrapper.iframe-mode .tab-empty {
+  width: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.content-wrapper.iframe-mode .tab-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: none;
+  background-color: #f4f6f9;
+}
+
+.content-wrapper.iframe-mode .tab-loading > div {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.content-wrapper.iframe-mode iframe {
+  border: 0;
+  width: 100%;
+  height: 100%;
+  margin-bottom: -8px;
+}
+
+.content-wrapper.iframe-mode iframe .content-wrapper {
+  padding-bottom: 0 !important;
+}
+
+body.iframe-mode-fullscreen .content-wrapper.iframe-mode {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin-left: 0 !important;
+  height: 100%;
+  min-height: 100%;
+  z-index: 1048;
+}
+
+.permanent-btn-iframe-close .btn-iframe-close {
+  -webkit-animation: none !important;
+  animation: none !important;
+  visibility: visible !important;
+  opacity: 1;
+}
+
+.dark-mode .content-wrapper.iframe-mode .tab-loading {
+  background-color: #343a40;
+}
+
+.content-wrapper.kanban {
+  height: 1px;
+}
+
+.content-wrapper.kanban .content {
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.content-wrapper.kanban .content .container,
+.content-wrapper.kanban .content .container-fluid {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.content-wrapper.kanban .content-header + .content {
+  height: calc(100% - ((2 * 15px) + (1.8rem * 1.2)));
+}
+
+.content-wrapper.kanban .card .card-body {
+  padding: .5rem;
+}
+
+.content-wrapper.kanban .card.card-row {
+  width: 340px;
+  display: inline-block;
+  margin: 0 .5rem;
+}
+
+.content-wrapper.kanban .card.card-row:first-child {
+  margin-left: 0;
+}
+
+.content-wrapper.kanban .card.card-row .card-body {
+  height: calc(100% - (12px + (1.8rem * 1.2) + .5rem));
+  overflow-y: auto;
+}
+
+.content-wrapper.kanban .card.card-row .card:last-child {
+  margin-bottom: 0;
+  border-bottom-width: 1px;
+}
+
+.content-wrapper.kanban .card.card-row .card .card-header {
+  padding: .5rem .75rem;
+}
+
+.content-wrapper.kanban .card.card-row .card .card-body {
+  padding: .75rem;
+}
+
+.content-wrapper.kanban .btn-tool.btn-link {
+  text-decoration: underline;
+  padding-left: 0;
+  padding-right: 0;
+}
+/*# sourceMappingURL=adminlte.pages.css.map */

public/backend/dist/js/.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "root": true,
+  "parserOptions": {
+    "ecmaVersion": 5,
+    "sourceType": "script"
+  },
+  "env": {
+    "jquery": true
+  },
+  "extends": [
+    "plugin:unicorn/recommended",
+    "xo",
+    "xo/browser"
+  ],
+  "rules": {
+    "capitalized-comments": "off",
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
+    "indent": [
+      "error",
+      2,
+      {
+        "MemberExpression": "off",
+        "SwitchCase": 1
+      }
+    ],
+    "multiline-ternary": [
+      "error",
+      "always-multiline"
+    ],
+    "no-var": "off",
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "object-shorthand": "off",
+    "prefer-arrow-callback": "off",
+    "semi": [
+      "error",
+      "never"
+    ],
+    "strict": "error",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-for-loop": "off",
+    "unicorn/no-null": "off",
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/prefer-dataset": "off",
+    "unicorn/prefer-includes": "off",
+    "unicorn/prefer-module": "off",
+    "unicorn/prefer-node-append": "off",
+    "unicorn/prefer-query-selector": "off",
+    "unicorn/prefer-spread": "off",
+    "unicorn/prevent-abbreviations": "off"
+  }
+}

public/backend/dist/js/demo.js

@@ -0,0 +1,689 @@
+/**
+ * AdminLTE Demo Menu
+ * ------------------
+ * You should not use this file in production.
+ * This file is for demo purposes only.
+ */
+
+/* eslint-disable camelcase */
+
+(function ($) {
+  'use strict'
+
+  setTimeout(function () {
+    if (window.___browserSync___ === undefined && Number(localStorage.getItem('AdminLTE:Demo:MessageShowed')) < Date.now()) {
+      localStorage.setItem('AdminLTE:Demo:MessageShowed', (Date.now()) + (15 * 60 * 1000))
+      // eslint-disable-next-line no-alert
+      alert('You load AdminLTE\'s "demo.js", \nthis file is only created for testing purposes!')
+    }
+  }, 1000)
+
+  function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1)
+  }
+
+  function createSkinBlock(colors, callback, noneSelected) {
+    var $block = $('<select />', {
+      class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-')
+    })
+
+    if (noneSelected) {
+      var $default = $('<option />', {
+        text: 'None Selected'
+      })
+
+      $block.append($default)
+    }
+
+    colors.forEach(function (color) {
+      var $color = $('<option />', {
+        class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'),
+        text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' '))
+      })
+
+      $block.append($color)
+    })
+    if (callback) {
+      $block.on('change', callback)
+    }
+
+    return $block
+  }
+
+  var $sidebar = $('.control-sidebar')
+  var $container = $('<div />', {
+    class: 'p-3 control-sidebar-content'
+  })
+
+  $sidebar.append($container)
+
+  // Checkboxes
+
+  $container.append(
+    '<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
+  )
+
+  var $dark_mode_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('dark-mode'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('dark-mode')
+    } else {
+      $('body').removeClass('dark-mode')
+    }
+  })
+  var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>')
+  $container.append($dark_mode_container)
+
+  $container.append('<h6>Header Options</h6>')
+  var $header_fixed_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('layout-navbar-fixed'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('layout-navbar-fixed')
+    } else {
+      $('body').removeClass('layout-navbar-fixed')
+    }
+  })
+  var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>')
+  $container.append($header_fixed_container)
+
+  var $dropdown_legacy_offset_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.main-header').hasClass('dropdown-legacy'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('dropdown-legacy')
+    } else {
+      $('.main-header').removeClass('dropdown-legacy')
+    }
+  })
+  var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>')
+  $container.append($dropdown_legacy_offset_container)
+
+  var $no_border_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.main-header').hasClass('border-bottom-0'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('border-bottom-0')
+    } else {
+      $('.main-header').removeClass('border-bottom-0')
+    }
+  })
+  var $no_border_container = $('<div />', { class: 'mb-4' }).append($no_border_checkbox).append('<span>No border</span>')
+  $container.append($no_border_container)
+
+  $container.append('<h6>Sidebar Options</h6>')
+
+  var $sidebar_collapsed_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('sidebar-collapse'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('sidebar-collapse')
+      $(window).trigger('resize')
+    } else {
+      $('body').removeClass('sidebar-collapse')
+      $(window).trigger('resize')
+    }
+  })
+  var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>')
+  $container.append($sidebar_collapsed_container)
+
+  $(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () {
+    $sidebar_collapsed_checkbox.prop('checked', true)
+  })
+  $(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () {
+    $sidebar_collapsed_checkbox.prop('checked', false)
+  })
+
+  var $sidebar_fixed_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('layout-fixed'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('layout-fixed')
+      $(window).trigger('resize')
+    } else {
+      $('body').removeClass('layout-fixed')
+      $(window).trigger('resize')
+    }
+  })
+  var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>')
+  $container.append($sidebar_fixed_container)
+
+  var $sidebar_mini_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('sidebar-mini'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('sidebar-mini')
+    } else {
+      $('body').removeClass('sidebar-mini')
+    }
+  })
+  var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>')
+  $container.append($sidebar_mini_container)
+
+  var $sidebar_mini_md_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('sidebar-mini-md'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('sidebar-mini-md')
+    } else {
+      $('body').removeClass('sidebar-mini-md')
+    }
+  })
+  var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>')
+  $container.append($sidebar_mini_md_container)
+
+  var $sidebar_mini_xs_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('sidebar-mini-xs'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('sidebar-mini-xs')
+    } else {
+      $('body').removeClass('sidebar-mini-xs')
+    }
+  })
+  var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>')
+  $container.append($sidebar_mini_xs_container)
+
+  var $flat_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-flat'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-flat')
+    } else {
+      $('.nav-sidebar').removeClass('nav-flat')
+    }
+  })
+  var $flat_sidebar_container = $('<div />', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('<span>Nav Flat Style</span>')
+  $container.append($flat_sidebar_container)
+
+  var $legacy_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-legacy'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-legacy')
+    } else {
+      $('.nav-sidebar').removeClass('nav-legacy')
+    }
+  })
+  var $legacy_sidebar_container = $('<div />', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('<span>Nav Legacy Style</span>')
+  $container.append($legacy_sidebar_container)
+
+  var $compact_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-compact'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-compact')
+    } else {
+      $('.nav-sidebar').removeClass('nav-compact')
+    }
+  })
+  var $compact_sidebar_container = $('<div />', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('<span>Nav Compact</span>')
+  $container.append($compact_sidebar_container)
+
+  var $child_indent_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-child-indent'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-child-indent')
+    } else {
+      $('.nav-sidebar').removeClass('nav-child-indent')
+    }
+  })
+  var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Nav Child Indent</span>')
+  $container.append($child_indent_sidebar_container)
+
+  var $child_hide_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-collapse-hide-child')
+    } else {
+      $('.nav-sidebar').removeClass('nav-collapse-hide-child')
+    }
+  })
+  var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>')
+  $container.append($child_hide_sidebar_container)
+
+  var $no_expand_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-sidebar').addClass('sidebar-no-expand')
+    } else {
+      $('.main-sidebar').removeClass('sidebar-no-expand')
+    }
+  })
+  var $no_expand_sidebar_container = $('<div />', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>')
+  $container.append($no_expand_sidebar_container)
+
+  $container.append('<h6>Footer Options</h6>')
+  var $footer_fixed_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('layout-footer-fixed'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('layout-footer-fixed')
+    } else {
+      $('body').removeClass('layout-footer-fixed')
+    }
+  })
+  var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>')
+  $container.append($footer_fixed_container)
+
+  $container.append('<h6>Small Text Options</h6>')
+
+  var $text_sm_body_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('text-sm'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('text-sm')
+    } else {
+      $('body').removeClass('text-sm')
+    }
+  })
+  var $text_sm_body_container = $('<div />', { class: 'mb-1' }).append($text_sm_body_checkbox).append('<span>Body</span>')
+  $container.append($text_sm_body_container)
+
+  var $text_sm_header_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.main-header').hasClass('text-sm'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-header').addClass('text-sm')
+    } else {
+      $('.main-header').removeClass('text-sm')
+    }
+  })
+  var $text_sm_header_container = $('<div />', { class: 'mb-1' }).append($text_sm_header_checkbox).append('<span>Navbar</span>')
+  $container.append($text_sm_header_container)
+
+  var $text_sm_brand_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.brand-link').hasClass('text-sm'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.brand-link').addClass('text-sm')
+    } else {
+      $('.brand-link').removeClass('text-sm')
+    }
+  })
+  var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>')
+  $container.append($text_sm_brand_container)
+
+  var $text_sm_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('text-sm'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('text-sm')
+    } else {
+      $('.nav-sidebar').removeClass('text-sm')
+    }
+  })
+  var $text_sm_sidebar_container = $('<div />', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('<span>Sidebar Nav</span>')
+  $container.append($text_sm_sidebar_container)
+
+  var $text_sm_footer_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.main-footer').hasClass('text-sm'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.main-footer').addClass('text-sm')
+    } else {
+      $('.main-footer').removeClass('text-sm')
+    }
+  })
+  var $text_sm_footer_container = $('<div />', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>')
+  $container.append($text_sm_footer_container)
+
+  // Color Arrays
+
+  var navbar_dark_skins = [
+    'navbar-primary',
+    'navbar-secondary',
+    'navbar-info',
+    'navbar-success',
+    'navbar-danger',
+    'navbar-indigo',
+    'navbar-purple',
+    'navbar-pink',
+    'navbar-navy',
+    'navbar-lightblue',
+    'navbar-teal',
+    'navbar-cyan',
+    'navbar-dark',
+    'navbar-gray-dark',
+    'navbar-gray'
+  ]
+
+  var navbar_light_skins = [
+    'navbar-light',
+    'navbar-warning',
+    'navbar-white',
+    'navbar-orange'
+  ]
+
+  var sidebar_colors = [
+    'bg-primary',
+    'bg-warning',
+    'bg-info',
+    'bg-danger',
+    'bg-success',
+    'bg-indigo',
+    'bg-lightblue',
+    'bg-navy',
+    'bg-purple',
+    'bg-fuchsia',
+    'bg-pink',
+    'bg-maroon',
+    'bg-orange',
+    'bg-lime',
+    'bg-teal',
+    'bg-olive'
+  ]
+
+  var accent_colors = [
+    'accent-primary',
+    'accent-warning',
+    'accent-info',
+    'accent-danger',
+    'accent-success',
+    'accent-indigo',
+    'accent-lightblue',
+    'accent-navy',
+    'accent-purple',
+    'accent-fuchsia',
+    'accent-pink',
+    'accent-maroon',
+    'accent-orange',
+    'accent-lime',
+    'accent-teal',
+    'accent-olive'
+  ]
+
+  var sidebar_skins = [
+    'sidebar-dark-primary',
+    'sidebar-dark-warning',
+    'sidebar-dark-info',
+    'sidebar-dark-danger',
+    'sidebar-dark-success',
+    'sidebar-dark-indigo',
+    'sidebar-dark-lightblue',
+    'sidebar-dark-navy',
+    'sidebar-dark-purple',
+    'sidebar-dark-fuchsia',
+    'sidebar-dark-pink',
+    'sidebar-dark-maroon',
+    'sidebar-dark-orange',
+    'sidebar-dark-lime',
+    'sidebar-dark-teal',
+    'sidebar-dark-olive',
+    'sidebar-light-primary',
+    'sidebar-light-warning',
+    'sidebar-light-info',
+    'sidebar-light-danger',
+    'sidebar-light-success',
+    'sidebar-light-indigo',
+    'sidebar-light-lightblue',
+    'sidebar-light-navy',
+    'sidebar-light-purple',
+    'sidebar-light-fuchsia',
+    'sidebar-light-pink',
+    'sidebar-light-maroon',
+    'sidebar-light-orange',
+    'sidebar-light-lime',
+    'sidebar-light-teal',
+    'sidebar-light-olive'
+  ]
+
+  // Navbar Variants
+
+  $container.append('<h6>Navbar Variants</h6>')
+
+  var $navbar_variants = $('<div />', {
+    class: 'd-flex'
+  })
+  var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
+  var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () {
+    var color = $(this).find('option:selected').attr('class')
+    var $main_header = $('.main-header')
+    $main_header.removeClass('navbar-dark').removeClass('navbar-light')
+    navbar_all_colors.forEach(function (color) {
+      $main_header.removeClass(color)
+    })
+
+    $(this).removeClass().addClass('custom-select mb-3 text-light border-0 ')
+
+    if (navbar_dark_skins.indexOf(color) > -1) {
+      $main_header.addClass('navbar-dark')
+      $(this).addClass(color).addClass('text-light')
+    } else {
+      $main_header.addClass('navbar-light')
+      $(this).addClass(color)
+    }
+
+    $main_header.addClass(color)
+  })
+
+  var active_navbar_color = null
+  $('.main-header')[0].classList.forEach(function (className) {
+    if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
+      active_navbar_color = className.replace('navbar-', 'bg-')
+    }
+  })
+
+  $navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true)
+  $navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color)
+
+  $navbar_variants.append($navbar_variants_colors)
+
+  $container.append($navbar_variants)
+
+  // Sidebar Colors
+
+  $container.append('<h6>Accent Color Variants</h6>')
+  var $accent_variants = $('<div />', {
+    class: 'd-flex'
+  })
+  $container.append($accent_variants)
+  $container.append(createSkinBlock(accent_colors, function () {
+    var color = $(this).find('option:selected').attr('class')
+    var $body = $('body')
+    accent_colors.forEach(function (skin) {
+      $body.removeClass(skin)
+    })
+
+    var accent_color_class = color.replace('bg-', 'accent-')
+
+    $body.addClass(accent_color_class)
+  }, true))
+
+  var active_accent_color = null
+  $('body')[0].classList.forEach(function (className) {
+    if (accent_colors.indexOf(className) > -1 && active_accent_color === null) {
+      active_accent_color = className.replace('navbar-', 'bg-')
+    }
+  })
+
+  // $accent_variants.find('option.' + active_accent_color).prop('selected', true)
+  // $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color)
+
+  $container.append('<h6>Dark Sidebar Variants</h6>')
+  var $sidebar_variants_dark = $('<div />', {
+    class: 'd-flex'
+  })
+  $container.append($sidebar_variants_dark)
+  var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () {
+    var color = $(this).find('option:selected').attr('class')
+    var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
+    var $sidebar = $('.main-sidebar')
+    sidebar_skins.forEach(function (skin) {
+      $sidebar.removeClass(skin)
+      $sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light')
+    })
+
+    $(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
+
+    $sidebar_light_variants.find('option').prop('selected', false)
+    $sidebar.addClass(sidebar_class)
+    $('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light')
+  }, true)
+  $container.append($sidebar_dark_variants)
+
+  var active_sidebar_dark_color = null
+  $('.main-sidebar')[0].classList.forEach(function (className) {
+    var color = className.replace('sidebar-dark-', 'bg-')
+    if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
+      active_sidebar_dark_color = color
+    }
+  })
+
+  $sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true)
+  $sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color)
+
+  $container.append('<h6>Light Sidebar Variants</h6>')
+  var $sidebar_variants_light = $('<div />', {
+    class: 'd-flex'
+  })
+  $container.append($sidebar_variants_light)
+  var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () {
+    var color = $(this).find('option:selected').attr('class')
+    var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
+    var $sidebar = $('.main-sidebar')
+    sidebar_skins.forEach(function (skin) {
+      $sidebar.removeClass(skin)
+      $sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light')
+    })
+
+    $(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
+
+    $sidebar_dark_variants.find('option').prop('selected', false)
+    $sidebar.addClass(sidebar_class)
+    $('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark')
+  }, true)
+  $container.append($sidebar_light_variants)
+
+  var active_sidebar_light_color = null
+  $('.main-sidebar')[0].classList.forEach(function (className) {
+    var color = className.replace('sidebar-light-', 'bg-')
+    if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
+      active_sidebar_light_color = color
+    }
+  })
+
+  if (active_sidebar_light_color !== null) {
+    $sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true)
+    $sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color)
+  }
+
+  var logo_skins = navbar_all_colors
+  $container.append('<h6>Brand Logo Variants</h6>')
+  var $logo_variants = $('<div />', {
+    class: 'd-flex'
+  })
+  $container.append($logo_variants)
+  var $clear_btn = $('<a />', {
+    href: '#'
+  }).text('clear').on('click', function (e) {
+    e.preventDefault()
+    var $logo = $('.brand-link')
+    logo_skins.forEach(function (skin) {
+      $logo.removeClass(skin)
+    })
+  })
+
+  var $brand_variants = createSkinBlock(logo_skins, function () {
+    var color = $(this).find('option:selected').attr('class')
+    var $logo = $('.brand-link')
+
+    if (color === 'navbar-light' || color === 'navbar-white') {
+      $logo.addClass('text-black')
+    } else {
+      $logo.removeClass('text-black')
+    }
+
+    logo_skins.forEach(function (skin) {
+      $logo.removeClass(skin)
+    })
+
+    if (color) {
+      $(this).removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '')
+    } else {
+      $(this).removeClass().addClass('custom-select mb-3 border-0')
+    }
+
+    $logo.addClass(color)
+  }, true).append($clear_btn)
+  $container.append($brand_variants)
+
+  var active_brand_color = null
+  $('.brand-link')[0].classList.forEach(function (className) {
+    if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
+      active_brand_color = className.replace('navbar-', 'bg-')
+    }
+  })
+
+  if (active_brand_color) {
+    $brand_variants.find('option.' + active_brand_color).prop('selected', true)
+    $brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color)
+  }
+})(jQuery)

public/backend/dist/js/pages/dashboard.js

@@ -0,0 +1,267 @@
+/*
+ * Author: Abdullah A Almsaeed
+ * Date: 4 Jan 2014
+ * Description:
+ *      This is a demo file used only for the main dashboard (index.html)
+ **/
+
+/* global moment:false, Chart:false, Sparkline:false */
+
+$(function () {
+  'use strict'
+
+  // Make the dashboard widgets sortable Using jquery UI
+  $('.connectedSortable').sortable({
+    placeholder: 'sort-highlight',
+    connectWith: '.connectedSortable',
+    handle: '.card-header, .nav-tabs',
+    forcePlaceholderSize: true,
+    zIndex: 999999
+  })
+  $('.connectedSortable .card-header').css('cursor', 'move')
+
+  // jQuery UI sortable for the todo list
+  $('.todo-list').sortable({
+    placeholder: 'sort-highlight',
+    handle: '.handle',
+    forcePlaceholderSize: true,
+    zIndex: 999999
+  })
+
+  // bootstrap WYSIHTML5 - text editor
+  $('.textarea').summernote()
+
+  $('.daterange').daterangepicker({
+    ranges: {
+      Today: [moment(), moment()],
+      Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+      'This Month': [moment().startOf('month'), moment().endOf('month')],
+      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+    },
+    startDate: moment().subtract(29, 'days'),
+    endDate: moment()
+  }, function (start, end) {
+    // eslint-disable-next-line no-alert
+    alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
+  })
+
+  /* jQueryKnob */
+  $('.knob').knob()
+
+  // jvectormap data
+  var visitorsData = {
+    US: 398, // USA
+    SA: 400, // Saudi Arabia
+    CA: 1000, // Canada
+    DE: 500, // Germany
+    FR: 760, // France
+    CN: 300, // China
+    AU: 700, // Australia
+    BR: 600, // Brazil
+    IN: 800, // India
+    GB: 320, // Great Britain
+    RU: 3000 // Russia
+  }
+  // World map by jvectormap
+  $('#world-map').vectorMap({
+    map: 'usa_en',
+    backgroundColor: 'transparent',
+    regionStyle: {
+      initial: {
+        fill: 'rgba(255, 255, 255, 0.7)',
+        'fill-opacity': 1,
+        stroke: 'rgba(0,0,0,.2)',
+        'stroke-width': 1,
+        'stroke-opacity': 1
+      }
+    },
+    series: {
+      regions: [{
+        values: visitorsData,
+        scale: ['#ffffff', '#0154ad'],
+        normalizeFunction: 'polynomial'
+      }]
+    },
+    onRegionLabelShow: function (e, el, code) {
+      if (typeof visitorsData[code] !== 'undefined') {
+        el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
+      }
+    }
+  })
+
+  // Sparkline charts
+  var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
+  var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
+  var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })
+
+  sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])
+  sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])
+  sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])
+
+  // The Calender
+  $('#calendar').datetimepicker({
+    format: 'L',
+    inline: true
+  })
+
+  // SLIMSCROLL FOR CHAT WIDGET
+  $('#chat-box').overlayScrollbars({
+    height: '250px'
+  })
+
+  /* Chart.js Charts */
+  // Sales chart
+  var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d')
+  // $('#revenue-chart').get(0).getContext('2d');
+
+  var salesChartData = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'Digital Goods',
+        backgroundColor: 'rgba(60,141,188,0.9)',
+        borderColor: 'rgba(60,141,188,0.8)',
+        pointRadius: false,
+        pointColor: '#3b8bba',
+        pointStrokeColor: 'rgba(60,141,188,1)',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(60,141,188,1)',
+        data: [28, 48, 40, 19, 86, 27, 90]
+      },
+      {
+        label: 'Electronics',
+        backgroundColor: 'rgba(210, 214, 222, 1)',
+        borderColor: 'rgba(210, 214, 222, 1)',
+        pointRadius: false,
+        pointColor: 'rgba(210, 214, 222, 1)',
+        pointStrokeColor: '#c1c7d1',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(220,220,220,1)',
+        data: [65, 59, 80, 81, 56, 55, 40]
+      }
+    ]
+  }
+
+  var salesChartOptions = {
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        gridLines: {
+          display: false
+        }
+      }],
+      yAxes: [{
+        gridLines: {
+          display: false
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  // eslint-disable-next-line no-unused-vars
+  var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
+    type: 'line',
+    data: salesChartData,
+    options: salesChartOptions
+  })
+
+  // Donut Chart
+  var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
+  var pieData = {
+    labels: [
+      'Instore Sales',
+      'Download Sales',
+      'Mail-Order Sales'
+    ],
+    datasets: [
+      {
+        data: [30, 12, 20],
+        backgroundColor: ['#f56954', '#00a65a', '#f39c12']
+      }
+    ]
+  }
+  var pieOptions = {
+    legend: {
+      display: false
+    },
+    maintainAspectRatio: false,
+    responsive: true
+  }
+  // Create pie or douhnut chart
+  // You can switch between pie and douhnut using the method below.
+  // eslint-disable-next-line no-unused-vars
+  var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
+    type: 'doughnut',
+    data: pieData,
+    options: pieOptions
+  })
+
+  // Sales graph chart
+  var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d')
+  // $('#revenue-chart').get(0).getContext('2d');
+
+  var salesGraphChartData = {
+    labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
+    datasets: [
+      {
+        label: 'Digital Goods',
+        fill: false,
+        borderWidth: 2,
+        lineTension: 0,
+        spanGaps: true,
+        borderColor: '#efefef',
+        pointRadius: 3,
+        pointHoverRadius: 7,
+        pointColor: '#efefef',
+        pointBackgroundColor: '#efefef',
+        data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
+      }
+    ]
+  }
+
+  var salesGraphChartOptions = {
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        ticks: {
+          fontColor: '#efefef'
+        },
+        gridLines: {
+          display: false,
+          color: '#efefef',
+          drawBorder: false
+        }
+      }],
+      yAxes: [{
+        ticks: {
+          stepSize: 5000,
+          fontColor: '#efefef'
+        },
+        gridLines: {
+          display: true,
+          color: '#efefef',
+          drawBorder: false
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  // eslint-disable-next-line no-unused-vars
+  var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
+    type: 'line',
+    data: salesGraphChartData,
+    options: salesGraphChartOptions
+  })
+})

public/backend/dist/js/pages/dashboard2.js

@@ -0,0 +1,270 @@
+/* global Chart:false */
+
+$(function () {
+  'use strict'
+
+  /* ChartJS
+   * -------
+   * Here we will create a few charts using ChartJS
+   */
+
+  //-----------------------
+  // - MONTHLY SALES CHART -
+  //-----------------------
+
+  // Get context with jQuery - using jQuery's .get() method.
+  var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
+
+  var salesChartData = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [
+      {
+        label: 'Digital Goods',
+        backgroundColor: 'rgba(60,141,188,0.9)',
+        borderColor: 'rgba(60,141,188,0.8)',
+        pointRadius: false,
+        pointColor: '#3b8bba',
+        pointStrokeColor: 'rgba(60,141,188,1)',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(60,141,188,1)',
+        data: [28, 48, 40, 19, 86, 27, 90]
+      },
+      {
+        label: 'Electronics',
+        backgroundColor: 'rgba(210, 214, 222, 1)',
+        borderColor: 'rgba(210, 214, 222, 1)',
+        pointRadius: false,
+        pointColor: 'rgba(210, 214, 222, 1)',
+        pointStrokeColor: '#c1c7d1',
+        pointHighlightFill: '#fff',
+        pointHighlightStroke: 'rgba(220,220,220,1)',
+        data: [65, 59, 80, 81, 56, 55, 40]
+      }
+    ]
+  }
+
+  var salesChartOptions = {
+    maintainAspectRatio: false,
+    responsive: true,
+    legend: {
+      display: false
+    },
+    scales: {
+      xAxes: [{
+        gridLines: {
+          display: false
+        }
+      }],
+      yAxes: [{
+        gridLines: {
+          display: false
+        }
+      }]
+    }
+  }
+
+  // This will get the first returned node in the jQuery collection.
+  // eslint-disable-next-line no-unused-vars
+  var salesChart = new Chart(salesChartCanvas, {
+    type: 'line',
+    data: salesChartData,
+    options: salesChartOptions
+  }
+  )
+
+  //---------------------------
+  // - END MONTHLY SALES CHART -
+  //---------------------------
+
+  //-------------
+  // - PIE CHART -
+  //-------------
+  // Get context with jQuery - using jQuery's .get() method.
+  var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
+  var pieData = {
+    labels: [
+      'Chrome',
+      'IE',
+      'FireFox',
+      'Safari',
+      'Opera',
+      'Navigator'
+    ],
+    datasets: [
+      {
+        data: [700, 500, 400, 600, 300, 100],
+        backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
+      }
+    ]
+  }
+  var pieOptions = {
+    legend: {
+      display: false
+    }
+  }
+  // Create pie or douhnut chart
+  // You can switch between pie and douhnut using the method below.
+  // eslint-disable-next-line no-unused-vars
+  var pieChart = new Chart(pieChartCanvas, {
+    type: 'doughnut',
+    data: pieData,
+    options: pieOptions
+  })
+
+  //-----------------
+  // - END PIE CHART -
+  //-----------------
+
+  /* jVector Maps
+   * ------------
+   * Create a world map with markers
+   */
+  $('#world-map-markers').mapael({
+    map: {
+      name: 'usa_states',
+      zoom: {
+        enabled: true,
+        maxLevel: 10
+      }
+    }
+  })
+
+  // $('#world-map-markers').vectorMap({
+  //   map              : 'world_en',
+  //   normalizeFunction: 'polynomial',
+  //   hoverOpacity     : 0.7,
+  //   hoverColor       : false,
+  //   backgroundColor  : 'transparent',
+  //   regionStyle      : {
+  //     initial      : {
+  //       fill            : 'rgba(210, 214, 222, 1)',
+  //       'fill-opacity'  : 1,
+  //       stroke          : 'none',
+  //       'stroke-width'  : 0,
+  //       'stroke-opacity': 1
+  //     },
+  //     hover        : {
+  //       'fill-opacity': 0.7,
+  //       cursor        : 'pointer'
+  //     },
+  //     selected     : {
+  //       fill: 'yellow'
+  //     },
+  //     selectedHover: {}
+  //   },
+  //   markerStyle      : {
+  //     initial: {
+  //       fill  : '#00a65a',
+  //       stroke: '#111'
+  //     }
+  //   },
+  //   markers          : [
+  //     {
+  //       latLng: [41.90, 12.45],
+  //       name  : 'Vatican City'
+  //     },
+  //     {
+  //       latLng: [43.73, 7.41],
+  //       name  : 'Monaco'
+  //     },
+  //     {
+  //       latLng: [-0.52, 166.93],
+  //       name  : 'Nauru'
+  //     },
+  //     {
+  //       latLng: [-8.51, 179.21],
+  //       name  : 'Tuvalu'
+  //     },
+  //     {
+  //       latLng: [43.93, 12.46],
+  //       name  : 'San Marino'
+  //     },
+  //     {
+  //       latLng: [47.14, 9.52],
+  //       name  : 'Liechtenstein'
+  //     },
+  //     {
+  //       latLng: [7.11, 171.06],
+  //       name  : 'Marshall Islands'
+  //     },
+  //     {
+  //       latLng: [17.3, -62.73],
+  //       name  : 'Saint Kitts and Nevis'
+  //     },
+  //     {
+  //       latLng: [3.2, 73.22],
+  //       name  : 'Maldives'
+  //     },
+  //     {
+  //       latLng: [35.88, 14.5],
+  //       name  : 'Malta'
+  //     },
+  //     {
+  //       latLng: [12.05, -61.75],
+  //       name  : 'Grenada'
+  //     },
+  //     {
+  //       latLng: [13.16, -61.23],
+  //       name  : 'Saint Vincent and the Grenadines'
+  //     },
+  //     {
+  //       latLng: [13.16, -59.55],
+  //       name  : 'Barbados'
+  //     },
+  //     {
+  //       latLng: [17.11, -61.85],
+  //       name  : 'Antigua and Barbuda'
+  //     },
+  //     {
+  //       latLng: [-4.61, 55.45],
+  //       name  : 'Seychelles'
+  //     },
+  //     {
+  //       latLng: [7.35, 134.46],
+  //       name  : 'Palau'
+  //     },
+  //     {
+  //       latLng: [42.5, 1.51],
+  //       name  : 'Andorra'
+  //     },
+  //     {
+  //       latLng: [14.01, -60.98],
+  //       name  : 'Saint Lucia'
+  //     },
+  //     {
+  //       latLng: [6.91, 158.18],
+  //       name  : 'Federated States of Micronesia'
+  //     },
+  //     {
+  //       latLng: [1.3, 103.8],
+  //       name  : 'Singapore'
+  //     },
+  //     {
+  //       latLng: [1.46, 173.03],
+  //       name  : 'Kiribati'
+  //     },
+  //     {
+  //       latLng: [-21.13, -175.2],
+  //       name  : 'Tonga'
+  //     },
+  //     {
+  //       latLng: [15.3, -61.38],
+  //       name  : 'Dominica'
+  //     },
+  //     {
+  //       latLng: [-20.2, 57.5],
+  //       name  : 'Mauritius'
+  //     },
+  //     {
+  //       latLng: [26.02, 50.55],
+  //       name  : 'Bahrain'
+  //     },
+  //     {
+  //       latLng: [0.33, 6.73],
+  //       name  : 'São Tomé and Príncipe'
+  //     }
+  //   ]
+  // })
+})
+
+// lgtm [js/unused-local-variable]

public/backend/dist/js/pages/dashboard3.js

@@ -0,0 +1,147 @@
+/* global Chart:false */
+
+$(function () {
+  'use strict'
+
+  var ticksStyle = {
+    fontColor: '#495057',
+    fontStyle: 'bold'
+  }
+
+  var mode = 'index'
+  var intersect = true
+
+  var $salesChart = $('#sales-chart')
+  // eslint-disable-next-line no-unused-vars
+  var salesChart = new Chart($salesChart, {
+    type: 'bar',
+    data: {
+      labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+      datasets: [
+        {
+          backgroundColor: '#007bff',
+          borderColor: '#007bff',
+          data: [1000, 2000, 3000, 2500, 2700, 2500, 3000]
+        },
+        {
+          backgroundColor: '#ced4da',
+          borderColor: '#ced4da',
+          data: [700, 1700, 2700, 2000, 1800, 1500, 2000]
+        }
+      ]
+    },
+    options: {
+      maintainAspectRatio: false,
+      tooltips: {
+        mode: mode,
+        intersect: intersect
+      },
+      hover: {
+        mode: mode,
+        intersect: intersect
+      },
+      legend: {
+        display: false
+      },
+      scales: {
+        yAxes: [{
+          // display: false,
+          gridLines: {
+            display: true,
+            lineWidth: '4px',
+            color: 'rgba(0, 0, 0, .2)',
+            zeroLineColor: 'transparent'
+          },
+          ticks: $.extend({
+            beginAtZero: true,
+
+            // Include a dollar sign in the ticks
+            callback: function (value) {
+              if (value >= 1000) {
+                value /= 1000
+                value += 'k'
+              }
+
+              return '$' + value
+            }
+          }, ticksStyle)
+        }],
+        xAxes: [{
+          display: true,
+          gridLines: {
+            display: false
+          },
+          ticks: ticksStyle
+        }]
+      }
+    }
+  })
+
+  var $visitorsChart = $('#visitors-chart')
+  // eslint-disable-next-line no-unused-vars
+  var visitorsChart = new Chart($visitorsChart, {
+    data: {
+      labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
+      datasets: [{
+        type: 'line',
+        data: [100, 120, 170, 167, 180, 177, 160],
+        backgroundColor: 'transparent',
+        borderColor: '#007bff',
+        pointBorderColor: '#007bff',
+        pointBackgroundColor: '#007bff',
+        fill: false
+        // pointHoverBackgroundColor: '#007bff',
+        // pointHoverBorderColor    : '#007bff'
+      },
+      {
+        type: 'line',
+        data: [60, 80, 70, 67, 80, 77, 100],
+        backgroundColor: 'tansparent',
+        borderColor: '#ced4da',
+        pointBorderColor: '#ced4da',
+        pointBackgroundColor: '#ced4da',
+        fill: false
+        // pointHoverBackgroundColor: '#ced4da',
+        // pointHoverBorderColor    : '#ced4da'
+      }]
+    },
+    options: {
+      maintainAspectRatio: false,
+      tooltips: {
+        mode: mode,
+        intersect: intersect
+      },
+      hover: {
+        mode: mode,
+        intersect: intersect
+      },
+      legend: {
+        display: false
+      },
+      scales: {
+        yAxes: [{
+          // display: false,
+          gridLines: {
+            display: true,
+            lineWidth: '4px',
+            color: 'rgba(0, 0, 0, .2)',
+            zeroLineColor: 'transparent'
+          },
+          ticks: $.extend({
+            beginAtZero: true,
+            suggestedMax: 200
+          }, ticksStyle)
+        }],
+        xAxes: [{
+          display: true,
+          gridLines: {
+            display: false
+          },
+          ticks: ticksStyle
+        }]
+      }
+    }
+  })
+})
+
+// lgtm [js/unused-local-variable]

public/backend/docs/404.html

@@ -0,0 +1,19 @@
+---
+layout: default
+title: Error 404
+---
+
+  <div class="content-wrapper pt-5">
+    <section class="content">
+      <div class="error-page">
+        <h2 class="headline text-warning">404</h2>
+        <div class="error-content">
+          <h3><i class="fas fa-exclamation-triangle text-warning"></i> Oops! Page not found.</h3>
+          <p>
+            We could not find the page you were looking for.
+            Meanwhile, you may <a href="{% link index.md %}">return to index</a>.
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>

public/backend/docs/Gemfile

@@ -0,0 +1,11 @@
+source 'https://rubygems.org'
+
+group :development, :test do
+  gem 'jekyll', '~> 4.2.1'
+  gem 'jekyll-seo-tag', '~> 2.7.1'
+  gem 'jekyll-sitemap', '~> 1.4.0'
+  gem 'wdm', '~> 0.1.1', :install_if => Gem.win_platform?
+end
+
+
+gem "webrick", "~> 1.7"

public/backend/docs/Gemfile.lock

@@ -0,0 +1,82 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.15.4)
+    ffi (1.15.4-x64-mingw32)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.10)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.7.1)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.1)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.26.1)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc (2.4.0-x64-mingw32)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+    wdm (0.1.1)
+    webrick (1.7.0)
+
+PLATFORMS
+  ruby
+  x64-mingw32
+
+DEPENDENCIES
+  jekyll (~> 4.2.1)
+  jekyll-seo-tag (~> 2.7.1)
+  jekyll-sitemap (~> 1.4.0)
+  wdm (~> 0.1.1)
+  webrick (~> 1.7)
+
+BUNDLED WITH
+   2.3.6

public/backend/docs/_config.yml

@@ -0,0 +1,96 @@
+title: AdminLTE v3.2 Documentation
+version: v3.2
+description: AdminLTE v3.2 Documentation
+
+baseurl: /docs/3.2
+url: https://adminlte.io
+
+plugins:
+  - jekyll-seo-tag
+  - jekyll-sitemap
+
+navigation:
+  - title: Installation
+    url: index.html
+    icon: fas fa-microchip
+  - title: Dependencies & Plugins
+    url: dependencies.html
+    icon: fas fa-handshake
+  - title: Layout
+    url: layout.html
+    icon: fas fa-copy
+  - title: Components
+    icon: fas fa-th
+    url: components
+    subitems:
+      - title: Main Header
+        url: components/main-header.html
+      - title: Main Sidebar
+        url: components/main-sidebar.html
+      - title: Control Sidebar
+        url: components/control-sidebar.html
+      - title: Card
+        url: components/cards.html
+      - title: Small-/ Info-Box
+        url: components/boxes.html
+      - title: Direct Chat
+        url: components/direct-chat.html
+      - title: Timeline
+        url: components/timeline.html
+      - title: Ribbons
+        url: components/ribbons.html
+      - title: Miscellaneous
+        url: components/miscellaneous.html
+      - title: Plugins
+        url: components/plugins.html
+  - title: JavaScript
+    icon: fas fa-code
+    url: javascript
+    subitems:
+      - title: Layout
+        url: javascript/layout.html
+      - title: Push Menu
+        url: javascript/push-menu.html
+      - title: Treeview
+        url: javascript/treeview.html
+      - title: Card Widget
+        url: javascript/card-widget.html
+      - title: CardRefresh
+        url: javascript/card-refresh.html
+      - title: Control Sidebar
+        url: javascript/control-sidebar.html
+      - title: Direct Chat
+        url: javascript/direct-chat.html
+      - title: Todo List
+        url: javascript/todo-list.html
+      - title: Toasts
+        url: javascript/toasts.html
+      - title: Sidebar Search
+        url: javascript/sidebar-search.html
+      - title: Expandable Tables
+        url: javascript/expandable-tables.html
+      - title: IFrame
+        url: javascript/iframe.html
+      - title: Navbar Search
+        url: javascript/navbar-search.html
+  - title: Browser Support
+    url: browser-support.html
+    icon: fab fa-chrome
+  - title: Implementations
+    url: implementations.html
+    icon: fas fa-bookmark
+  - title: Additional Styles
+    url: additional-styles.html
+    icon: fas fa-mortar-pestle
+  - title: Upgrade Guide
+    url: upgrade-guide.html
+    icon: fas fa-hand-point-up
+  - title: Contributing Guide
+    url: how-to-contribute.html
+    icon: fas fa-hands-helping
+  - title: FAQ
+    url: faq.html
+    icon: fas fa-question-circle
+  - title: License
+    url: license.html
+    icon: fas fa-file-contract

public/backend/docs/_includes/foot.html

@@ -0,0 +1,46 @@
+<script src="{{ '/assets/plugins/jquery/jquery.min.js' | prepend: site.baseurl }}"></script>
+<script src="{{ '/assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
+<script src="{{ '/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
+<script src="{{ '/assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>
+<script>
+  var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+  var currentTheme = localStorage.getItem('theme');
+  var mainHeader = document.querySelector('.main-header');
+
+  if (currentTheme) {
+    if (currentTheme === 'dark') {
+      if (!document.body.classList.contains('dark-mode')) {
+        document.body.classList.add("dark-mode");
+      }
+      if (mainHeader.classList.contains('navbar-light')) {
+        mainHeader.classList.add('navbar-dark');
+        mainHeader.classList.remove('navbar-light');
+      }
+      toggleSwitch.checked = true;
+    }
+  }
+
+  function switchTheme(e) {
+    if (e.target.checked) {
+      if (!document.body.classList.contains('dark-mode')) {
+        document.body.classList.add("dark-mode");
+      }
+      if (mainHeader.classList.contains('navbar-light')) {
+        mainHeader.classList.add('navbar-dark');
+        mainHeader.classList.remove('navbar-light');
+      }
+      localStorage.setItem('theme', 'dark');
+    } else {
+      if (document.body.classList.contains('dark-mode')) {
+        document.body.classList.remove("dark-mode");
+      }
+      if (mainHeader.classList.contains('navbar-dark')) {
+        mainHeader.classList.add('navbar-light');
+        mainHeader.classList.remove('navbar-dark');
+      }
+      localStorage.setItem('theme', 'light');
+    }
+  }
+
+  toggleSwitch.addEventListener('change', switchTheme, false);
+</script>

public/backend/docs/_includes/footer.html

@@ -0,0 +1,6 @@
+<footer class="main-footer">
+  <div class="float-right d-none d-sm-inline">
+    {{ site.version }}
+  </div>
+  <strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+</footer>

public/backend/docs/_includes/head.html

@@ -0,0 +1,14 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+  {% seo %}
+
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+  <link rel="stylesheet" href="{{ '/assets/plugins/fontawesome-free/css/all.min.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ '/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ '/assets/css/docs.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ '/assets/css/highlighter.css' | prepend: site.baseurl }}">
+  <link rel="stylesheet" href="{{ '/assets/css/adminlte.min.css' | prepend: site.baseurl }}">
+</head>

public/backend/docs/_includes/navbar.html

@@ -0,0 +1,46 @@
+<nav class="main-header navbar navbar-expand navbar-light">
+  <ul class="navbar-nav">
+    <li class="nav-item">
+      <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+    </li>
+    <li class="nav-item dropdown">
+      <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ site.version }}
+      </a>
+      <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
+        <a class="dropdown-item bg-info disabled" href="#">{{ site.version }}</a>
+        <a class="dropdown-item" href="https://adminlte.io/docs/3.1/">v3.1</a>
+        <a class="dropdown-item" href="https://adminlte.io/docs/3.0/">v3.0</a>
+      </div>
+    </li>
+  </ul>
+
+  <ul class="navbar-nav ml-auto">
+    <!-- <li class="nav-item d-none d-sm-inline-block">
+      <a href="index3.html" class="nav-link">Home</a>
+    </li> -->
+    <li class="nav-item">
+      <div class="theme-switch-wrapper nav-link">
+        <label class="theme-switch" for="checkbox">
+          <input type="checkbox" id="checkbox" />
+          <span class="slider round"></span>
+        </label>
+      </div>
+    </li>
+    <!-- <li class="nav-item">
+      <em class="nav-link">Enable Dark Mode!</em>
+    </li> -->
+  </ul>
+
+  <!-- SEARCH FORM -->
+  <!-- <form class="form-check-inline ml-3">
+    <div class="input-group input-group-sm">
+      <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+      <div class="input-group-append">
+        <button class="btn btn-navbar" type="submit">
+          <i class="fa fa-search"></i>
+        </button>
+      </div>
+    </div>
+  </form> -->
+</nav>

public/backend/docs/_includes/preloader.html

@@ -0,0 +1,3 @@
+<div class="preloader flex-column justify-content-center align-items-center">
+  <img class="animation__shake" src="{{ '/assets/img/AdminLTELogo.png' | prepend: site.baseurl }}" alt="AdminLTELogo" height="60" width="60">
+</div>

public/backend/docs/_includes/sidebar.html

@@ -0,0 +1,61 @@
+<aside class="main-sidebar sidebar-dark-primary elevation-4">
+  <a href="{{ '/index.html' | prepend: site.baseurl }}" class="brand-link logo-switch">
+    <img src="{{ '/assets/img/logo-xs.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
+    <img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
+  </a>
+  <div class="sidebar">
+    <div class="form-inline mt-2">
+      <div class="input-group" data-widget="sidebar-search">
+        <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-sidebar">
+            <i class="fas fa-search fa-fw"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <nav class="mt-2">
+      <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
+       {% for item in site.navigation -%}
+          {%- assign subitem_active = 'false' -%}
+          {%- for subitem in item.subitems -%}
+            {%- assign subitem_url = '/' | append: subitem.url -%}
+            {%- if subitem_url == page.url -%}
+              {%- assign subitem_active = 'true' -%}
+            {%- endif -%}
+          {%- endfor %}
+
+          <li class="nav-item{% if subitem_active == 'true' %} menu-open{% endif %}">
+            {% if item.url == 'index.html' -%}
+              {%- assign item_url = '/' -%}
+            {%- else -%}
+              {%- assign item_url = '/' | append: item.url -%}
+            {%- endif %}
+
+            <a href="{% if item.url %}{{ item.url | prepend: "/" | prepend: site.baseurl }}{% else %}#{% endif %}" class="nav-link{% if item_url == page.url %} active{% endif %}{% if subitem_active == 'true'%} active{% endif %}">
+              <i class="nav-icon {{ item.icon }}"></i>
+              <p>
+                {{ item.title }}
+                {% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
+              </p>
+            </a>
+
+            {% if item.subitems -%}
+              <ul class="nav nav-treeview">
+              {% for subitem in item.subitems -%}
+                {%- assign subitem_url = '/' | append: subitem.url -%}
+                <li class="nav-item">
+                  <a href="{{ subitem.url | prepend: "/" | prepend: site.baseurl }}" class="nav-link{% if subitem_url == page.url %} active{% endif %}">
+                    <i class="far fa-circle nav-icon"></i>
+                    <p>{{ subitem.title }}</p>
+                  </a>
+                </li>
+              {%- endfor %}
+              </ul>
+            {%- endif %}
+          </li>
+       {% endfor %}
+      </ul>
+    </nav>
+  </div>
+</aside>

public/backend/docs/_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
+    <div class="wrapper">
+
+      {%- include preloader.html -%}
+
+      {%- include navbar.html -%}
+      {%- include sidebar.html -%}
+
+      {{ content }}
+
+      {%- include footer.html -%}
+    </div>
+
+    {% include foot.html -%}
+  </body>
+</html>

public/backend/docs/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<div class="content-wrapper px-4 py-2">
+  {% if page.title and page.title != blank %}
+  <div class="content-header">
+    <h1>{{ page.title }}</h1>
+  </div>
+  {% endif %}
+  <div class="content px-2">
+    {{ content }}
+  </div>
+</div>

public/backend/docs/additional-styles.md

@@ -0,0 +1,68 @@
+---
+layout: page
+title: Additional Styles / Custom Skin
+---
+
+If you want to create additional styles like a company specific color for buttons, the background utility or something else you can simply create your own subversion of AdminLTE with the following SCSS template.
+
+In this example we create a custom button class called `.btn-custom-color` with an extra button style and a custom class called `.my-custom-style`.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+
+// Custom Theme Color START
+$custom-color: #00FF00;
+$theme-colors: map-merge((
+    'custom-color': $custom-color,
+), $theme-colors);
+// Custom Theme Color END
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import '~admin-lte/build/scss/variables';
+@import '~admin-lte/build/scss/variables-alt';
+@import '~admin-lte/build/scss/mixins';
+
+@import '~bootstrap/scss/bootstrap';
+
+@import '~admin-lte/build/scss/parts/core';
+@import '~admin-lte/build/scss/parts/components';
+@import '~admin-lte/build/scss/parts/extra-components';
+@import '~admin-lte/build/scss/parts/pages';
+@import '~admin-lte/build/scss/parts/plugins';
+@import '~admin-lte/build/scss/parts/miscellaneous';
+
+// Custom Style START
+.my-custom-style {
+  background-color: $custom-color;
+  padding: .5rem 0;
+}
+// Custom Style END
+```
+{: .max-height-300}
+
+You can also create a skin on top of AdminLTE with the following SCSS template.
+
+In this example we create a custom class called `.btn-custom-color` with a extra button style.
+
+```scss
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import '~admin-lte/build/scss/bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+
+$custom-color: #00FF00;
+
+.btn-custom-color {
+    @include button-variant($custom-color, $custom-color);
+}
+```
+
+
+> ##### Warning!
+> These examples are only raw SCSS templates, you will still need a SCSS -> CSS build script to compile the SCSS to CSS!
+{: .quote-warning}