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

<div class="container">
	<section class="order-stats">
		<div class="widget-heading-holder">
			<header> Dashboard </header>
		</div>

		<ul>
			<li>
				<div class="column-holder">
					<div class="column">
						<header> Pending </header>
						<p> Waiting for confirmation </p>
					</div>

					<div class="column">
						<div class="count"> {{ getFilteredOrders('pending').length }} </div> Nos
					</div>
				</div>

				<div class="column">
					<button class="rect-button" [routerLink]="['/shop-details/orders/pending']"> View </button>
				</div>
			</li>

			<li>
				<div class="column-holder">
					<div class="column">
						<header> Accepted </header>
						<p> To be Cooked / Packed </p>
					</div>

					<div class="column">
						<div class="count"> {{ getFilteredOrders('confirmed').length }} </div> Nos
					</div>
				</div>

				<div class="column">
					<button class="rect-button" [routerLink]="['/shop-details/orders/confirmed']"> View </button>
				</div>
			</li>

			<li>
				<div class="column-holder">
					<div class="column">
						<header> Delivered </header>
						<p> Waiting for the Customer / Delivered </p>
					</div>

					<div class="column">
						<div class="count"> {{ getFilteredOrders('delivered').length }} </div> Nos
					</div>
				</div>

				<div class="column">
					<button class="rect-button" [routerLink]="['/shop-details/orders/delivered']"> View </button>
				</div>
			</li>
		</ul>
	</section>

	<ul class="pending-orders" *ngIf="getFilteredOrders('pending').length > 0">
		<div class="heading">
			<header> Pending Orders: </header>
			<a [routerLink]="['/shop-details/orders/pending']"> View All </a>
		</div>
		<li *ngFor="let order of getFilteredOrders('pending')">
			<div class="info">
				<label> Order ID: {{ order.orders_id }} </label>
			</div>

            <div *ngFor="let item of order.orderedlist">
                <div class="name-holder">
                    <div class="name"> {{ item.menuitems.menu_item_name }}  </div>
                    <div class="info">
                        <label> Quantity </label>
                        <span> {{ item.quantity }} </span>
                    </div>
                </div>

                <div class="info">
                    <label> Pickup Time </label>
                    <span> {{ getFormattedDate(item.pickup_time, 'DD MMM @ hh:mm a') }} </span>
                </div>

                <div class="info">
                    <label> Parcel </label>
                    <span *ngIf="!item.take_away"> No </span>
                    <span *ngIf="item.take_away"> Yes </span>
                </div>
            </div>


			<div class="action-buttons">
				<button class="round-button" (click)="order.orderstatus.orderstatus_id = 1; updateOrder(order)"> Confirm </button>
				<button class="round-button" (click)="order.orderstatus.orderstatus_id = 4; updateOrder(order)"> Reject </button>
			</div>
		</li>
	</ul>
</div>