vendor-app/src/app/orders/orders.component.html

<div class="widget-heading-holder">
	<header> Order List </header>
	<div class="filter-container">
		<div class="selector-container">
			<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>

		<div class="search-input">
			<input type="text" placeholder="Quick Search">
			<button> <i class="icon ion-md-search"></i> </button>
		</div>
	</div>
</div>

<table class="order-table">
	<tr class="heading-row">
		<th> Order ID </th>
		<th> Order Time </th>
		<th> Items </th>
		<th> Quantity </th>
		<th> Amount </th>
		<th> Payment Status </th>
	</tr>

	<tr>
		<td> 545455 </td>
		<td> 2 Min Ago </td>
		<td>
			<div> 8PC Hot &amp; Crispy </div>
			<div> KFC 4 + 4 </div>
		</td>
		<td>
			<div> 1 </div>
			<div> 4 </div>
		</td>
		<td>
			<div> &#x20B9; 750 </div>
			<div> &#x20B9; 250 </div>
		</td>
		<td> Paid Online </td>
		<td>
			<div class="action-buttons">
				<button class="round-button"> Confirm </button>
				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
			</div>
		</td>
	</tr>

	<tr>
		<td> 545455 </td>
		<td> 10 Min Ago </td>
		<td>
			<div> KFC 4 + 4 </div>
		</td>
		<td>
			<div> 1 </div>
		</td>
		<td>
			<div> &#x20B9; 750 </div>
		</td>
		<td> Paid Online </td>
		<td>
			<div class="status success"> Completed </div>
		</td>
	</tr>

	<tr class="cancelled">
		<td> 545455 </td>
		<td> 0 Min Ago </td>
		<td>
			<div> KFC 4 + 4 </div>
		</td>
		<td>
			<div> 1 </div>
		</td>
		<td>
			<div> &#x20B9; 750 </div>
		</td>
		<td> Paid Online </td>
		<td>
			<div class="status failed"> Cancelled </div>
		</td>
	</tr>

	<tr>
		<td> 545455 </td>
		<td> 1 Min Ago </td>
		<td>
			<div> KFC Bucket </div>
		</td>
		<td>
			<div> 1 </div>
		</td>
		<td>
			<div> &#x20B9; 250 </div>
		</td>
		<td> COD </td>
		<td>
			<div class="action-buttons">
				<button class="round-button"> Confirm </button>
				<button class="round-button" (click)="showRejectionPopup = true"> Reject </button>
			</div>
		</td>
	</tr>
</table>

<ul class="order-list">
	<li class="card">
		<div class="header">
			<span> Order ID : 29320 </span>
			<span> Order Time: 2 Mins ago </span>
		</div>
		<table>
			<tr>
				<td>
					<div> KFC Bucket </div>
				</td>
				<td>
					<div> Qty: 1 </div>
				</td>
				<td>
					<div> &#x20B9; 250 </div>
				</td>
			</tr>
		</table>
		<div class="order-status-holder">
			<div class="status">
				Paid online
			</div>
			<div class="action-buttons">
				<button> Confirm </button>
				<button (click)="showRejectionPopup = true"> Reject </button>
			</div>
		</div>
	</li>

	<li class="card">
		<div class="header">
			<span> Order ID : 29320 </span>
			<span> Order Time: 2 Mins ago </span>
		</div>
		<table>
			<tr>
				<td>
					<div> KFC Bucket </div>
				</td>
				<td>
					<div> Qty: 1 </div>
				</td>
				<td>
					<div> &#x20B9; 250 </div>
				</td>
			</tr>
		</table>
		<div class="order-status-holder">
			<div class="status">
				Paid online
			</div>
			<div class="action-buttons">
				<button> Confirm </button>
				<button (click)="showRejectionPopup = true"> Reject </button>
			</div>
		</div>
	</li>

	<li class="card">
		<div class="header">
			<span> Order ID : 29320 </span>
			<span> Order Time: 2 Mins ago </span>
		</div>
		<table>
			<tr>
				<td>
					<div> KFC Bucket </div>
				</td>
				<td>
					<div> Qty: 1 </div>
				</td>
				<td>
					<div> &#x20B9; 250 </div>
				</td>
			</tr>
		</table>
		<div class="order-status-holder">
			<div class="status">
				Paid online
			</div>
			<div class="action-buttons">
				<button> Confirm </button>
				<button (click)="showRejectionPopup = true"> Reject </button>
			</div>
		</div>
	</li>
</ul>

<section class="popup" [ngClass]="{'active' : showRejectionPopup }">
	<div class="popup-box">
		<header> Reason to Reject the Order </header>
		<select>
			<option selected> Item not available </option>
			<option> The customer was impatient </option>
			<option> Other </option>
		</select>

		<div class="action-buttons">
			<button class="rect-button" (click)="showRejectionPopup = false"> Reject </button>
			<button class="rect-button" (click)="showRejectionPopup = false"> Cancel </button>
		</div>
	</div>
</section>