Partial commit

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { IFilterOption } from '../models/filter-option';
 
 @Component({
 	selector: 'app-dashboard',
@@ -6,10 +7,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
-	filterOptions: Array<{
-		name: string,
-		id: string
-	}>
+	filterOptions: Array<IFilterOption>;
 
 	constructor() { }
 
@@ -20,7 +18,7 @@ export class DashboardComponent implements OnInit {
 		}, {
 			name: 'Today',
 			id: 'today'
-		}]
+		}];
 	}
 
 }

src/app/models/filter-option.ts

@@ -0,0 +1,4 @@
+export type IFilterOption = {
+	name: string,
+	id: string
+};

src/app/orders/orders.component.html

@@ -1 +1,13 @@
-<p>orders works!</p>
+<div class="widget-heading-holder">
+	<header> Dashboard </header>
+	<app-custom-selector header="Status" [options]="statusOptions" width="200"
+	[defaultOptionId]="statusOptions[0].id"></app-custom-selector>
+
+	<app-custom-selector header="Date" [options]="dateOptions" width="200"
+	[defaultOptionId]="dateOptions[0].id"></app-custom-selector>
+
+	<div class="search-input">
+		<input type="text" placeholder="Quick Search">
+		<button> <i class="icon ion-md-search"></i> </button>
+	</div>
+</div>

src/app/orders/orders.component.scss

@@ -0,0 +1,32 @@
+.search-input {
+	display: flex;
+	width: 300px;
+	border-radius: 20px;
+	background-color: white;
+	color: var(--brand-blue);
+	align-items: center;
+	justify-content: space-between;
+
+	input {
+		border: 0;
+		font-size: 12px;
+		padding-left: 10px;
+		font-weight: 500;
+		color: var(--dark-grey);
+		flex-grow: 1;
+
+		&::placeholder {
+			color: var(--grey);
+		}
+	}
+
+	button {
+		border-radius: 50%;
+		width: 30px;
+		height: 30px;
+		color: var(--brand-blue);
+		font-size: 20px;
+		border: 1px solid var(--brand-blue);
+		background-color: white;
+	}
+}

src/app/orders/orders.component.ts

@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { IFilterOption } from '../models/filter-option';
 
 @Component({
-  selector: 'app-orders',
-  templateUrl: './orders.component.html',
-  styleUrls: ['./orders.component.scss']
+	selector: 'app-orders',
+	templateUrl: './orders.component.html',
+	styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
+	statusOptions: Array<IFilterOption>;
+	dateOptions: Array<IFilterOption>;
 
-  constructor() { }
 
-  ngOnInit() {
-  }
+	constructor() { }
+
+	ngOnInit() {
+		this.statusOptions = [{
+			name: 'All',
+			id: 'all'
+		}];
+
+		this.dateOptions = [{
+			name: 'Today',
+			id: 'today'
+		}];
+	}
 
 }

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

@@ -42,5 +42,6 @@
 
 	<section class="widgets">
 		<app-dashboard *ngIf="selected_nav === 'dashboard'"></app-dashboard>
+		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
 	</section>
 </div>

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

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'dashboard';
+	selected_nav: string = 'orders';
 
 	constructor() { }