dashboard summay layout complete

src/app/dashboard/dashboard.component.html

@@ -50,7 +50,7 @@
       <div class="shadow"></div>
     </div>
     <hr>
-    <h2> Recent Transactions<kendo-icon [name]="'clip'"> </kendo-icon></h2>
+    <h2><kendo-icon [name]="'clip'"> </kendo-icon> &nbsp; Recent Transactions </h2>
     <div class="row">
       <div class="col-sm-12">
         <kendo-grid [data]="gridData">
@@ -77,7 +77,32 @@
       <div class="shadow"></div>
     </div>
     <hr>
-    <h2> Pending Payments<kendo-icon [name]="'clip'"> </kendo-icon></h2>
+    <h2> <kendo-icon [name]="'sum'"> </kendo-icon> &nbsp; Pending Payments</h2>
 
+    <div class="row">
+      <div class="col-sm-12">
+        <kendo-grid [data]="gridData">
+          <kendo-grid-column field="ProductID" title="ID" width="40">
+          </kendo-grid-column>
+          <kendo-grid-column field="ProductName" title="Name" width="250">
+          </kendo-grid-column>
+          <kendo-grid-column field="Category.CategoryName" title="Category">
+          </kendo-grid-column>
+          <kendo-grid-column field="UnitPrice" title="Price" width="80">
+          </kendo-grid-column>
+          <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+          </kendo-grid-column>
+          <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      </div>
+    </div>
+  
+    <div class="h-divider">
+      <div class="shadow"></div>
+    </div>    
   </div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -11,12 +11,22 @@
 .container.inner {
     width: 99%;
     min-height: calc(100vh - 48px);
-    background-color:chartreuse;
+    /* background-color:chartreuse; */
 }
 
+
+$link-color: #f52e62;
+$text-color: #3f517e;
+$hr-color:   rgba(0,0,0,0.35);
+$hr-text-color: #453986;
+
+$letter-spacing: .32em;
+
+$background-color: #fff;
+
 div.divider {
     font-family: "Share Tech Mono", monospace;
-    color: #fff;
+    color: $text-color;
     font-size: 2vh;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
     
@@ -118,14 +128,7 @@ div.divider {
 
   /* end of horizontal dividor */
 
-  $link-color: #f52e62;
-  $text-color: #3f517e;
-  $hr-color:   rgba(0,0,0,0.35);
-  $hr-text-color: #453986;
-  
-  $letter-spacing: .32em;
-  
-  $background-color: #fff;
+
   hr {
     display: block;
     margin: 10px 0 -15px;

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

@@ -12,12 +12,12 @@
 .container.inner {
   width: 99%;
   min-height: calc(100vh - 48px);
-  background-color: chartreuse;
+  /* background-color:chartreuse; */
 }
 
 div.divider {
   font-family: "Share Tech Mono", monospace;
-  color: #fff;
+  color: #3f517e;
   font-size: 2vh;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
   display: flex;