expressCart/views/dashboard.hbs

78 lines
3.5 KiB
Handlebars

{{> partials/menu}}
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="col-sm-12">
<h2>Dashboard</h2>
</div>
<div class="row">
<div class="col-6 bottom-pad-30">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Orders placed</h5>
<h6 class="card-subtitle mb-2 text-muted">Total number of orders placed</h6>
<h4 class="card-text text-danger">
{{dashboardData.ordersCount}}
</h4>
</div>
</div>
</div>
<div class="col-6 bottom-pad-30">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Order total value</h5>
<h6 class="card-subtitle mb-2 text-muted">Total value of orders placed</h6>
<h4 class="card-text text-danger">
{{currencySymbol config.currencySymbol}}{{formatAmount dashboardData.ordersAmount}}
</h4>
</div>
</div>
</div>
<div class="col-6 bottom-pad-30">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Products for sale</h5>
<h6 class="card-subtitle mb-2 text-muted">Number of products for sale</h6>
<h4 class="card-text text-danger">
{{dashboardData.productsCount}}
</h4>
</div>
</div>
</div>
<div class="col-6 bottom-pad-30">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Total products sold</h5>
<h6 class="card-subtitle mb-2 text-muted">Number of products sold</h6>
<h4 class="card-text text-danger">
{{dashboardData.productsSold}}
</h4>
</div>
</div>
</div>
<div class="col-12 bottom-pad-30">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Top products sold</h5>
<ul class="list-unstyled">
{{#if dashboardData.topProducts}}
{{#each dashboardData.topProducts}}
<li class="media my-4 align-middle">
{{#if this.productImage}}
<img src="{{this.productImage}}" class="col-2 mr-3 img-fluid" alt="image {{this.productTitle}}">
{{else}}
<img src="/images/placeholder.png" class="col-2 mr-3 img-fluid" alt="mage {{this.productTitle}}">
{{/if}}
<div class="media-body">
<h5 class="mt-3 mb-1">{{this.title}}</h5>
<h4 class="mt-4">Sold: <span class="text-danger">{{this.count}}</span></h4>
</div>
</li>
{{/each}}
{{else}}
<h5 class="mt-3 mb-1 text-danger">Nothing to see yet. Do some orders.</h5>
{{/if}}
</ul>
</div>
</div>
</div>
</div>
</main>