tabler-ui/src/_includes/cards/tasks.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-header">
		<h2 class="card-title">Tasks activity</h2>
		<div class="card-options text-muted">
			<select class="custom-select custom-select-sm ml-2" name="" id="">
				<option>This week</option>
				<option>Last week</option>
			</select>
		</div>
	</div>
	<div class="card-body">
		<div id="chart-tasks" style="height: 15rem"></div>
	</div>
	<div class="card-tabs card-tabs-bottom">
		<a href="javascript:void(0)" class="card-tabs-item text-center active">
			<h3 class="mb-1">120</h3>
			<div class="text-muted-dark">Tasks completed</div>
		</a>
		<a href="javascript:void(0)" class="card-tabs-item text-center">
			<h3 class="mb-1">25</h3>
			<div class="text-muted-dark">Hours logged</div>
		</a>
		<a href="javascript:void(0)" class="card-tabs-item text-center">
			<h3 class="mb-1">2</h3>
			<div class="text-muted-dark">Invoices sent</div>
		</a>
		<a href="javascript:void(0)" class="card-tabs-item text-center">
			<h3 class="mb-1">2</h3>
			<div class="text-muted-dark">Files uploaded</div>
		</a>
	</div>
</div>

{% include js-charts.html id="chart-tasks" data="tasks" %}