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

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

<div class="card">
	<div class="card-header">
		<h3 class="card-title">Invoices</h3>
	</div>

	<div class="table-responsive">
		<table class="table card-table table-vcenter text-nowrap">
			<thead>
			<tr>
				<th class="w-1">No.</th>
				<th>Invoice Subject</th>
				<th>Client</th>
				<th>VAT No.</th>
				<th>Created</th>
				<th>Status</th>
				<th>Price</th>
				<th></th>
				<th></th>
			</tr>
			</thead>

			<tbody>
			{% for invoice in site.data.invoices limit: 6 %}
			<tr>
				<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
				<td><a href="invoice.html" class="text-inherit">{{ invoice.name }}</a></td>
				<td>
					{{ invoice.client }}
				</td>
				<td>
					{{ invoice.vat-no }}
				</td>
				<td>
					{{ invoice.date }}
				</td>
				<td>
					<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
				</td>
				<td>{{ invoice.price }}</td>

				<td class="text-right">
					<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
					<div class="dropdown">
						<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
					</div>
				</td>
				<td>
					<a class="icon" href="javascript:void(0)">
						<i class="fe fe-edit"></i>
					</a>
				</td>
			</tr>
			{% endfor %}
			</tbody>
		</table>
	</div>
</div>