Partial commit - Dashboard component

src/app/dashboard/dashboard.component.html

@@ -1 +1,54 @@
-<p>dashboard works!</p>
+<div class="container">
+	<section class="order-stats">
+		<div class="widget-heading-holder">
+			<header> Dashboard </header>
+		</div>
+
+		<ul>
+			<li>
+				<div class="column">
+					<header> Pending </header>
+					<p> Waiting for confirmation </p>
+				</div>
+
+				<div class="column">
+					<div class="count"> 2 </div> Nos
+				</div>
+
+				<div class="column">
+					<button class="rect-button"> View </button>
+				</div>
+			</li>
+
+			<li>
+				<div class="column">
+					<header> Confirmed </header>
+					<p> To be Packed </p>
+				</div>
+
+				<div class="column">
+					<div class="count"> 5 </div> Nos
+				</div>
+
+				<div class="column">
+					<button class="rect-button"> View </button>
+				</div>
+			</li>
+
+			<li>
+				<div class="column">
+					<header> Ready to Pick </header>
+					<p> Waiting for the Customer </p>
+				</div>
+
+				<div class="column">
+					<div class="count"> 10 </div> Nos
+				</div>
+
+				<div class="column">
+					<button class="rect-button"> View </button>
+				</div>
+			</li>
+		</ul>
+	</section>
+</div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,61 @@
+.container {
+	display: flex;
+	width: 100%;
+	align-items: stretch;
+}
+
+.order-stats {
+	width: 70%;
+
+	ul {
+		list-style: none;
+	}
+
+	li {
+		display: flex;
+		width: 90%;
+		margin: 30px auto;
+		background-color: white;
+		border-radius: 10px;
+		padding: 15px;
+		justify-content: space-between;
+		align-items: center;
+
+		.column {
+			letter-spacing: 0.5px;
+
+			header {
+				font-weight: 500;
+				color: var(--dark-grey);
+				font-size: 16px;
+			}
+
+			p {
+				font-size: 14px;
+				color: var(--grey);
+				margin-top: 10px;
+			}
+
+			&:nth-child(1) {
+				width: 40%;
+			}
+
+			&:nth-child(2) {
+				width: 100px;
+				color: var(--grey);
+				font-size: 14px;
+
+				.count {
+					font-size: 36px;
+					font-weight: 700;
+					color: var(--dark-grey);
+					display: inline-block;
+				}
+			}
+
+			button {
+				width: 100px;
+			}
+		}
+	}
+}

src/app/dashboard/dashboard.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+	selector: 'app-dashboard',
+	templateUrl: './dashboard.component.html',
+	styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+	}
 
 }

src/app/widgets-holder/widgets-holder.component.html

@@ -9,7 +9,7 @@
 </section>
 
 
-<div class="widgets-holder">
+<div class="container">
 	<section class="side-navigation">
 		<section class="user-info">
 			<img>
@@ -39,4 +39,8 @@
 			</li>
 		</ul>
 	</section>
+
+	<section class="widgets">
+		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
+	</section>
 </div>

src/app/widgets-holder/widgets-holder.component.scss

@@ -36,11 +36,11 @@
 	}
 }
 
-.widgets-holder {
+.container {
 	display: flex;
 	align-items: stretch;
 	width: 100%;
-	background-color: #efefef;
+	background-color: #f5f6fa;
 }
 
 .side-navigation {
@@ -146,3 +146,7 @@
 		}
 	}
 }
+
+.widgets {
+	width: 80%;
+}

src/styles.scss

@@ -32,8 +32,21 @@ button {
 	background-color: var(--brand-blue);
 	color: white;
 	border: 0px;
-	height: 50px;
+	height: 40px;
 	font-size: 16px;
 	padding: 0 15px;
 	letter-spacing: 0.5px;
 }
+
+
+.widget-heading-holder {
+	width: 90%;
+	margin: 30px auto 0;
+
+	header {
+		font-size: 20px;
+		color: var(--dark-grey);
+		font-weight: 500;
+		letter-spacing: 0.5px;
+	}
+}