Dashboard UI

src/app/app.module.ts

@@ -1,7 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+// Importing Routes
 import { AppRoutingModule } from './app-routing.module';
+
+// Importing Components
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { WidgetsHolderComponent } from './widgets-holder/widgets-holder.component';

src/app/dashboard/dashboard.component.html

@@ -53,4 +53,123 @@
 			</li>
 		</ul>
 	</section>
+
+	<ul class="pending-orders">
+		<div class="heading">
+			<header> Pending Orders: </header>
+			<a> View All </a>
+		</div>
+		<li>
+			<div class="info">
+				<label> Order ID: 34343 </label>
+			</div>
+			<div class="name-holder">
+				<div class="name"> Mc Chicken Regular Meals  </div>
+				<div class="info">
+					<label> Quantity </label>
+					<span> 2 </span>
+				</div>
+			</div>
+
+			<div class="info">
+				<label> Pickup Time </label>
+				<span> Today at 10:30 AM </span>
+			</div>
+
+			<div class="info">
+				<label> Parcel </label>
+				<span> No </span>
+			</div>
+
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button> Reject </button>
+			</div>
+		</li>
+
+		<li>
+			<div class="info">
+				<label> Order ID: 34343 </label>
+			</div>
+			<div class="name-holder">
+				<div class="name"> Mc Chicken Regular Meals  </div>
+				<div class="info">
+					<label> Quantity </label>
+					<span> 2 </span>
+				</div>
+			</div>
+
+			<div class="info">
+				<label> Pickup Time </label>
+				<span> Today at 10:30 AM </span>
+			</div>
+
+			<div class="info">
+				<label> Parcel </label>
+				<span> No </span>
+			</div>
+
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button> Reject </button>
+			</div>
+		</li>
+
+		<li>
+			<div class="info">
+				<label> Order ID: 34343 </label>
+			</div>
+			<div class="name-holder">
+				<div class="name"> Mc Chicken Regular Meals  </div>
+				<div class="info">
+					<label> Quantity </label>
+					<span> 2 </span>
+				</div>
+			</div>
+
+			<div class="info">
+				<label> Pickup Time </label>
+				<span> Today at 10:30 AM </span>
+			</div>
+
+			<div class="info">
+				<label> Parcel </label>
+				<span> No </span>
+			</div>
+
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button> Reject </button>
+			</div>
+		</li>
+
+
+		<li>
+			<div class="info">
+				<label> Order ID: 34343 </label>
+			</div>
+			<div class="name-holder">
+				<div class="name"> Mc Chicken Regular Meals  </div>
+				<div class="info">
+					<label> Quantity </label>
+					<span> 2 </span>
+				</div>
+			</div>
+
+			<div class="info">
+				<label> Pickup Time </label>
+				<span> Today at 10:30 AM </span>
+			</div>
+
+			<div class="info">
+				<label> Parcel </label>
+				<span> No </span>
+			</div>
+
+			<div class="action-buttons">
+				<button> Confirm </button>
+				<button> Reject </button>
+			</div>
+		</li>
+	</ul>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -1,6 +1,7 @@
 .container {
 	display: flex;
 	width: 100%;
+	height: 100%;
 	align-items: stretch;
 }
 
@@ -59,3 +60,111 @@
 		}
 	}
 }
+
+.pending-orders {
+	width: 30%;
+	background-color: white;
+	padding: 30px 30px;
+	list-style: none;
+	height: calc(100vh - 70px);
+	overflow: auto;
+
+	&:hover {
+		&::-webkit-scrollbar {
+		  display: block;
+		}
+	}
+
+	&::-webkit-scrollbar {
+		width: 8px;
+		display: none;
+	}
+
+		/* Track */
+	&::-webkit-scrollbar-track {
+		background-color: white;
+	}
+	/* Handle */
+	&::-webkit-scrollbar-thumb {
+		background-color: rgba(black, 0.2);
+	}
+	/* Handle on hover */
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(black, 0.5);
+	}
+
+
+	.heading {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: center;
+
+
+		header {
+			font-size: 16px;
+			letter-spacing: 1px;
+			font-weight: 500;
+		}
+
+		a {
+			color: var(--brand-blue);
+			text-decoration: underline;
+			font-size: 14px;
+		}
+	}
+
+	li {
+		padding: 10px 0;
+		margin: 20px 0;
+		border-top: 1px solid #cecece;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		margin: 15px 0;
+		font-weight: 500;
+
+		label {
+			font-size: 13px;
+			color: var(--grey);
+		}
+
+		span {
+			font-size: 13px;
+		}
+	}
+
+	.name-holder {
+		border-bottom: 1px solid #efefef;
+
+		.name {
+			font-size: 16px;
+			font-weight: 500;
+			color: var(--dark-grey);
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		width: 100%;
+
+		button {
+			padding: 0 20px;
+			border-radius: 20px;
+			background-color: #cecece;
+			color: white;
+			font-size: 13px;
+			letter-spacing: 1px;
+			height: 25px;
+			border: 0px;
+
+			&:first-child {
+				background-color: var(--brand-blue);
+				margin-right: 10px;
+			}
+		}
+	}
+}