mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
102 lines
3.4 KiB
Plaintext
102 lines
3.4 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import Flag from '@ui/Flag.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import DropdownMenu from '@ui/DropdownMenu.astro'
|
|
import Pagination from '@ui/Pagination.astro'
|
|
import invoices from '@data/invoices.json'
|
|
import countries from '@data/countries.json'
|
|
|
|
const countryNames = Object.fromEntries((countries as { code: string; name: string }[]).map((c) => [c.code, c.name]))
|
|
---
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<CardTitle>Invoices</CardTitle>
|
|
</div>
|
|
<div class="card-body border-bottom py-3">
|
|
<div class="d-flex">
|
|
<div class="text-secondary">
|
|
Show
|
|
<div class="mx-2 d-inline-block">
|
|
<input type="text" class="form-control form-control-sm" value="8" size="3" aria-label="Invoices count" />
|
|
</div>
|
|
entries
|
|
</div>
|
|
|
|
<div class="ms-auto text-secondary">
|
|
Search:
|
|
<div class="ms-2 d-inline-block">
|
|
<input type="text" class="form-control form-control-sm" aria-label="Search invoice" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-selectable card-table table-vcenter text-nowrap datatable">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices" /></th>
|
|
<th class="w-1">No. <Icon name="chevron-up" class="icon-sm icon-thick" /></th>
|
|
<th>Invoice Subject</th>
|
|
<th>Client</th>
|
|
<th>VAT No.</th>
|
|
<th>Created</th>
|
|
<th>Status</th>
|
|
<th>Price</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{
|
|
invoices.slice(0, 8).map((invoice, index) => (
|
|
<tr>
|
|
<td>
|
|
<input class="form-check-input m-0 align-middle table-selectable-check" type="checkbox" aria-label="Select invoice" />
|
|
</td>
|
|
<td>
|
|
<span class="text-secondary">00{index + 1 + 1400}</span>
|
|
</td>
|
|
<td>
|
|
<a href="invoice.html" class="text-reset">
|
|
{invoice.name}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<Flag flag={invoice.country} size="xs" class="me-2" label={countryNames[invoice.country] ?? invoice.country.toUpperCase()} />
|
|
{invoice.client}
|
|
</td>
|
|
<td>{invoice['vat-no']}</td>
|
|
<td>{invoice.date}</td>
|
|
<td>
|
|
<span class={`badge bg-${invoice.status} me-1`} /> {invoice['status-name']}
|
|
</td>
|
|
<td>{invoice.price}</td>
|
|
|
|
<td class="text-end">
|
|
<span class="dropdown">
|
|
<button class="btn dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown">
|
|
Actions
|
|
</button>
|
|
<DropdownMenu right={true} />
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row g-2 justify-content-center justify-content-sm-between">
|
|
<div class="col-auto d-flex align-items-center">
|
|
<p class="m-0 text-secondary">Showing <strong>1 to 8</strong> of <strong>16 entries</strong></p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<Pagination class="m-0 ms-auto" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|