added bootstrap and using navbar, and added timeline into dashboard

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               {
                 "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
               },

package-lock.json

@@ -2045,6 +2045,22 @@
         }
       }
     },
+    "@progress/kendo-angular-indicators": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-indicators/-/kendo-angular-indicators-0.2.0.tgz",
+      "integrity": "sha512-FLLDG2jcRQWAnMCxz3EiAo/Rzy/YNRJWjgg8gU7jFc+7hpEnORwOjOuUyLaPsqpWDyCQvQWIDV0r6+IN4NyN/w==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-inputs": {
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-inputs/-/kendo-angular-inputs-6.7.2.tgz",
@@ -2102,6 +2118,22 @@
         }
       }
     },
+    "@progress/kendo-angular-layout": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-layout/-/kendo-angular-layout-5.0.4.tgz",
+      "integrity": "sha512-K/4ytlwnIxCEekHLqsrXdYJoXI05Qn89EJ5W8GnfrSnJ0FEvODE+g4RAdPP2Hp6cSfjRaGCrITrK0ZTWs1u0Kg==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-menu": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-menu/-/kendo-angular-menu-2.0.4.tgz",
@@ -2118,6 +2150,22 @@
         }
       }
     },
+    "@progress/kendo-angular-navigation": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-navigation/-/kendo-angular-navigation-0.2.0.tgz",
+      "integrity": "sha512-MetE+o+F+1nluS5CSohAK3M4hXkUAH+X+08+RqvrD4Aie88+qBy1xWR+ChdXlhGz5NeH7lAxvuXmzOXJmR4JAw==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-pdf-export": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-pdf-export/-/kendo-angular-pdf-export-2.0.4.tgz",
@@ -2152,6 +2200,22 @@
         }
       }
     },
+    "@progress/kendo-angular-progressbar": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-progressbar/-/kendo-angular-progressbar-0.2.4.tgz",
+      "integrity": "sha512-GN74p8f65fn5KoMU69oRA4rQdOIskMadtjtFq/WsenNrbXs6dO5REdC3EYGXOwB6toAWuikNliVsFGznvEQeqA==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-common": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.1.tgz",
@@ -3229,6 +3293,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
+      "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -31,16 +31,21 @@
     "@progress/kendo-angular-excel-export": "^3.0.0",
     "@progress/kendo-angular-grid": "^4.8.0",
     "@progress/kendo-angular-icons": "^0.2.1",
+    "@progress/kendo-angular-indicators": "^0.2.0",
     "@progress/kendo-angular-inputs": "^6.0.0",
     "@progress/kendo-angular-intl": "^2.0.0",
     "@progress/kendo-angular-l10n": "^2.0.0",
+    "@progress/kendo-angular-layout": "^5.0.4",
     "@progress/kendo-angular-menu": "^2.0.4",
+    "@progress/kendo-angular-navigation": "^0.2.0",
     "@progress/kendo-angular-pdf-export": "^2.0.0",
     "@progress/kendo-angular-popup": "^3.0.0",
+    "@progress/kendo-angular-progressbar": "^0.2.3",
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-svg-icons": "^0.0.3",
     "@progress/kendo-theme-default": "latest",
+    "bootstrap": "^3.4.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/app.component.html

@@ -1,13 +1,28 @@
+<kendo-appbar [position]="'top'" [positionMode]="'sticky'">
+  <kendo-appbar-section>
+    <kendo-menu [items]="items" (select)="onSelect($event)"> 
+      <ng-template kendoMenuItemTemplate let-item="item">
+        <fa-icon  *ngIf="menuItemHasFontawesome(item)"  [icon]="item.fa"></fa-icon> &nbsp;
+        {{ item.text }} 
+      </ng-template>
+    </kendo-menu>
+  </kendo-appbar-section>
+  <kendo-appbar-spacer></kendo-appbar-spacer>
+  <kendo-appbar-section class="actions">
+      <kendo-badge-container>
+          <button class="k-button k-button-clear">
+              <kendo-icon [name]="'bell'"></kendo-icon>
+          </button>
+          <kendo-badge [shape]="'dot'" [themeColor]="'warning'" [size]="'small'" [position]="'inside'"></kendo-badge>
+      </kendo-badge-container>
+      <span class="k-appbar-separator"></span>
+  </kendo-appbar-section>
+
+  <kendo-appbar-section>
+      <kendo-avatar [imageSrc]="kendokaAvatar" [shape]="'circle'" [width]="'26px'" [height]="'26px'"></kendo-avatar>
+  </kendo-appbar-section>
+</kendo-appbar>
 
-<div class=topMenuBar >
-  <!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'" style="color:yellow;float:left;"></kendo-icon> -->
-  <kendo-menu [items]="items" (select)="onSelect($event)"> 
-    <ng-template kendoMenuItemTemplate let-item="item">
-      <fa-icon  *ngIf="menuItemHasFontawesome(item)"  [icon]="item.fa"></fa-icon> &nbsp;
-      {{ item.text }} 
-    </ng-template>
-  </kendo-menu>
-</div>
 <app-loan-edit #loanEditComponent></app-loan-edit>
 <router-outlet></router-outlet>
 

src/app/app.component.ts

@@ -13,6 +13,7 @@ export class AppComponent {
 
   title = 'broker';
   public items: any[] = mainMenuItems;
+  kendokaAvatar = "./assets/img/avatar.png"
   @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
 
   
@@ -30,7 +31,7 @@ export class AppComponent {
       this.menuService.itemClicked.emit(item);
       //console.log("emit on select : " + item.text);
       if ( item.popup ==  "loanEdit"){
-        this.loanEdit.somedata = "changed";
+        this.loanEdit.somedata = "" + Math.random() + "changed";
         this.loanEdit.open('dialog');
       }
     }

src/app/app.module.ts

@@ -20,6 +20,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CanvasComponent } from './canvas/canvas.component';
 import { MenuService } from './service/menu.service';
 import { LoanEditComponent } from './loan-edit/loan-edit.component';
+import { NavigationModule } from '@progress/kendo-angular-navigation';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+
+
+
 
 
 
@@ -43,7 +49,10 @@ import { LoanEditComponent } from './loan-edit/loan-edit.component';
     GridModule,
     InputsModule,
     IconsModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    NavigationModule,
+    LayoutModule,
+    IndicatorsModule
   ],
   providers: [MenuService],
   bootstrap: [AppComponent]

src/app/canvas/canvas.component.html

@@ -45,5 +45,3 @@
 
 <hr>
 
-  <hr> 
-  <div class="col-xs-6">some text</div><div class="col-xs-6">some other text</div>

src/app/dashboard/dashboard.component.html

@@ -8,3 +8,152 @@
   </div>
   <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
 
+  <!-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
+  <!------ Include the above in your HEAD tag ---------->
+  
+  <div class="container">
+          <div class="row">
+          <div class="col-md-12">
+            <div class="page-header">
+              <h1>Horizontal timeline</h1>
+            </div>
+            <div style="display:inline-block;width:100%;overflow-y:auto;">
+            <ul class="timeline timeline-horizontal">
+              <li class="timeline-item">
+                <div class="timeline-badge primary"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 1</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge success"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 2</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis faiz elementum girarzis, nisi eros gostis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge info"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 3</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipisci. Mé faiz elementum girarzis, nisi eros gostis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge danger"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 4</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge warning"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 5</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 6</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis.</p>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="page-header">
+              <h1>Timeline</h1>
+            </div>
+            <ul class="timeline">
+              <li class="timeline-item">
+                <div class="timeline-badge"><i class="glyphicon glyphicon-off"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 1</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 2</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros gostis.</p>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 3</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+                    
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item">
+                <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
+                <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">Mussum ipsum cacilds 4</h4>
+                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,171 @@
+/* Timeline */
+.timeline,
+.timeline-horizontal {
+  list-style: none;
+  padding: 20px;
+  position: relative;
+}
+.timeline:before {
+  top: 40px;
+  bottom: 0;
+  position: absolute;
+  content: " ";
+  width: 3px;
+  background-color: #eeeeee;
+  left: 50%;
+  margin-left: -1.5px;
+}
+.timeline .timeline-item {
+  margin-bottom: 20px;
+  position: relative;
+}
+.timeline .timeline-item:before,
+.timeline .timeline-item:after {
+  content: "";
+  display: table;
+}
+.timeline .timeline-item:after {
+  clear: both;
+}
+.timeline .timeline-item .timeline-badge {
+  color: #fff;
+  width: 54px;
+  height: 54px;
+  line-height: 52px;
+  font-size: 22px;
+  text-align: center;
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  margin-left: -25px;
+  background-color: #7c7c7c;
+  border: 3px solid #ffffff;
+  z-index: 100;
+  border-top-right-radius: 50%;
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.timeline .timeline-item .timeline-badge i,
+.timeline .timeline-item .timeline-badge .fa,
+.timeline .timeline-item .timeline-badge .glyphicon {
+  top: 2px;
+  left: 0px;
+}
+.timeline .timeline-item .timeline-badge.primary {
+  background-color: #1f9eba;
+}
+.timeline .timeline-item .timeline-badge.info {
+  background-color: #5bc0de;
+}
+.timeline .timeline-item .timeline-badge.success {
+  background-color: #59ba1f;
+}
+.timeline .timeline-item .timeline-badge.warning {
+  background-color: #d1bd10;
+}
+.timeline .timeline-item .timeline-badge.danger {
+  background-color: #ba1f1f;
+}
+.timeline .timeline-item .timeline-panel {
+  position: relative;
+  width: 46%;
+  float: left;
+  right: 16px;
+  border: 1px solid #c0c0c0;
+  background: #ffffff;
+  border-radius: 2px;
+  padding: 20px;
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+}
+.timeline .timeline-item .timeline-panel:before {
+  position: absolute;
+  top: 26px;
+  right: -16px;
+  display: inline-block;
+  border-top: 16px solid transparent;
+  border-left: 16px solid #c0c0c0;
+  border-right: 0 solid #c0c0c0;
+  border-bottom: 16px solid transparent;
+  content: " ";
+}
+.timeline .timeline-item .timeline-panel .timeline-title {
+  margin-top: 0;
+  color: inherit;
+}
+.timeline .timeline-item .timeline-panel .timeline-body > p,
+.timeline .timeline-item .timeline-panel .timeline-body > ul {
+  margin-bottom: 0;
+}
+.timeline .timeline-item .timeline-panel .timeline-body > p + p {
+  margin-top: 5px;
+}
+.timeline .timeline-item:last-child:nth-child(even) {
+  float: right;
+}
+.timeline .timeline-item:nth-child(even) .timeline-panel {
+  float: right;
+  left: 16px;
+}
+.timeline .timeline-item:nth-child(even) .timeline-panel:before {
+  border-left-width: 0;
+  border-right-width: 14px;
+  left: -14px;
+  right: auto;
+}
+.timeline-horizontal {
+  list-style: none;
+  position: relative;
+  padding: 20px 0px 20px 0px;
+  display: inline-block;
+}
+.timeline-horizontal:before {
+  height: 3px;
+  top: auto;
+  bottom: 26px;
+  left: 56px;
+  right: 0;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.timeline-horizontal .timeline-item {
+  display: table-cell;
+  height: 280px;
+  width: 20%;
+  min-width: 320px;
+  float: none !important;
+  padding-left: 0px;
+  padding-right: 20px;
+  margin: 0 auto;
+  vertical-align: bottom;
+}
+.timeline-horizontal .timeline-item .timeline-panel {
+  top: auto;
+  bottom: 64px;
+  display: inline-block;
+  float: none !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100%;
+  margin-bottom: 20px;
+}
+.timeline-horizontal .timeline-item .timeline-panel:before {
+  top: auto;
+  bottom: -16px;
+  left: 28px !important;
+  right: auto;
+  border-right: 16px solid transparent !important;
+  border-top: 16px solid #c0c0c0 !important;
+  border-bottom: 0 solid #c0c0c0 !important;
+  border-left: 16px solid transparent !important;
+}
+.timeline-horizontal .timeline-item:before,
+.timeline-horizontal .timeline-item:after {
+  display: none;
+}
+.timeline-horizontal .timeline-item .timeline-badge {
+  top: auto;
+  bottom: 0px;
+  left: 43px;
+}

src/app/dashboard/dist/dashboard.component.css

@@ -0,0 +1,197 @@
+/* Timeline */
+.timeline,
+.timeline-horizontal {
+  list-style: none;
+  padding: 20px;
+  position: relative;
+}
+
+.timeline:before {
+  top: 40px;
+  bottom: 0;
+  position: absolute;
+  content: " ";
+  width: 3px;
+  background-color: #eeeeee;
+  left: 50%;
+  margin-left: -1.5px;
+}
+
+.timeline .timeline-item {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.timeline .timeline-item:before,
+.timeline .timeline-item:after {
+  content: "";
+  display: table;
+}
+
+.timeline .timeline-item:after {
+  clear: both;
+}
+
+.timeline .timeline-item .timeline-badge {
+  color: #fff;
+  width: 54px;
+  height: 54px;
+  line-height: 52px;
+  font-size: 22px;
+  text-align: center;
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  margin-left: -25px;
+  background-color: #7c7c7c;
+  border: 3px solid #ffffff;
+  z-index: 100;
+  border-top-right-radius: 50%;
+  border-top-left-radius: 50%;
+  border-bottom-right-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.timeline .timeline-item .timeline-badge i,
+.timeline .timeline-item .timeline-badge .fa,
+.timeline .timeline-item .timeline-badge .glyphicon {
+  top: 2px;
+  left: 0px;
+}
+
+.timeline .timeline-item .timeline-badge.primary {
+  background-color: #1f9eba;
+}
+
+.timeline .timeline-item .timeline-badge.info {
+  background-color: #5bc0de;
+}
+
+.timeline .timeline-item .timeline-badge.success {
+  background-color: #59ba1f;
+}
+
+.timeline .timeline-item .timeline-badge.warning {
+  background-color: #d1bd10;
+}
+
+.timeline .timeline-item .timeline-badge.danger {
+  background-color: #ba1f1f;
+}
+
+.timeline .timeline-item .timeline-panel {
+  position: relative;
+  width: 46%;
+  float: left;
+  right: 16px;
+  border: 1px solid #c0c0c0;
+  background: #ffffff;
+  border-radius: 2px;
+  padding: 20px;
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+}
+
+.timeline .timeline-item .timeline-panel:before {
+  position: absolute;
+  top: 26px;
+  right: -16px;
+  display: inline-block;
+  border-top: 16px solid transparent;
+  border-left: 16px solid #c0c0c0;
+  border-right: 0 solid #c0c0c0;
+  border-bottom: 16px solid transparent;
+  content: " ";
+}
+
+.timeline .timeline-item .timeline-panel .timeline-title {
+  margin-top: 0;
+  color: inherit;
+}
+
+.timeline .timeline-item .timeline-panel .timeline-body > p,
+.timeline .timeline-item .timeline-panel .timeline-body > ul {
+  margin-bottom: 0;
+}
+
+.timeline .timeline-item .timeline-panel .timeline-body > p + p {
+  margin-top: 5px;
+}
+
+.timeline .timeline-item:last-child:nth-child(even) {
+  float: right;
+}
+
+.timeline .timeline-item:nth-child(even) .timeline-panel {
+  float: right;
+  left: 16px;
+}
+
+.timeline .timeline-item:nth-child(even) .timeline-panel:before {
+  border-left-width: 0;
+  border-right-width: 14px;
+  left: -14px;
+  right: auto;
+}
+
+.timeline-horizontal {
+  list-style: none;
+  position: relative;
+  padding: 20px 0px 20px 0px;
+  display: inline-block;
+}
+
+.timeline-horizontal:before {
+  height: 3px;
+  top: auto;
+  bottom: 26px;
+  left: 56px;
+  right: 0;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.timeline-horizontal .timeline-item {
+  display: table-cell;
+  height: 280px;
+  width: 20%;
+  min-width: 320px;
+  float: none !important;
+  padding-left: 0px;
+  padding-right: 20px;
+  margin: 0 auto;
+  vertical-align: bottom;
+}
+
+.timeline-horizontal .timeline-item .timeline-panel {
+  top: auto;
+  bottom: 64px;
+  display: inline-block;
+  float: none !important;
+  left: 0 !important;
+  right: 0 !important;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.timeline-horizontal .timeline-item .timeline-panel:before {
+  top: auto;
+  bottom: -16px;
+  left: 28px !important;
+  right: auto;
+  border-right: 16px solid transparent !important;
+  border-top: 16px solid #c0c0c0 !important;
+  border-bottom: 0 solid #c0c0c0 !important;
+  border-left: 16px solid transparent !important;
+}
+
+.timeline-horizontal .timeline-item:before,
+.timeline-horizontal .timeline-item:after {
+  display: none;
+}
+
+.timeline-horizontal .timeline-item .timeline-badge {
+  top: auto;
+  bottom: 0px;
+  left: 43px;
+}