tabler/shared/components/cards/Invoices.astro

---
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>