Invoices - Done
HTML
<h2>Invoices</h2>
<div class="subheading">
View and Manage Your Invoices
</div>
<form name="Invoices" method="get" aria-label="Invoices">
<div class="table-outline">
<div class="table-scroll-container">
<table class="table">
<thead class="table-head">
<tr class="table-header-row">
<!-- Checkbox Column -->
<th class="table-checkbox-column">
<label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
<input type="checkbox" name="" data-name="" style="opacity:0; position:absolute; z-index:-1">
</label>
</th>
<!-- Invoice Column -->
<th>
<div class="table-cell-content">
<div class="table-heading">Invoice</div>
<div class="table-sort-button w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>.cls-1 { fill: none; }</style>
</defs>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
<rect id="Transparent_Rectangle" data-name="Transparent Rectangle" class="cls-1"></rect>
</svg>
</div>
</div>
</th>
<!-- Invoice Month Column -->
<th>
<div class="table-cell-content">
<div class="table-heading">Invoice Month</div>
<div class="table-sort-button w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>.cls-1 { fill: none; }</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</svg>
</div>
</div>
</th>
<!-- Status Column -->
<th class="table-heading-status">
<div class="table-cell-content grow">
<div class="table-heading">Status</div>
<div class="table-sort-button w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>.cls-1 { fill: none; }</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</svg>
</div>
</div>
</th>
<!-- PO Number Column -->
<th>
<div class="table-cell-content">
<div class="table-heading">PO Number</div>
<div class="table-sort-button w-embed">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<defs>
<style>.cls-1 { fill: none; }</style>
</defs>
<title>chevron--sort</title>
<polygon points="16 28 9 21 10.41 19.59 16 25.17 21.59 19.59 23 21 16 28"></polygon>
<polygon points="16 4 23 11 21.59 12.41 16 6.83 10.41 12.41 9 11 16 4"></polygon>
<rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1"></rect>
</svg>
</div>
</div>
</th>
<!-- Action Column -->
<th class="action-column">
<div class="table-header-icon-container">
<div data-delay="0" data-hover="false" class="table-menu-container w-dropdown">
<div
class="table-menu-button w-dropdown-toggle"
id="w-dropdown-toggle-8"
aria-controls="w-dropdown-list-8"
aria-haspopup="menu"
aria-expanded="false"
role="button"
tabindex="0"
>
<div class="table-header-button">
<div class="table-button-icon w-embed">
<svg
version="1.1"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="32px"
height="32px"
viewBox="0 0 32 32"
>
<circle cx="16" cy="8" r="2"></circle>
<circle cx="16" cy="16" r="2"></circle>
<circle cx="16" cy="24" r="2"></circle>
</svg>
</div>
</div>
</div>
<nav
class="table-menu w-dropdown-list"
id="w-dropdown-list-8"
aria-labelledby="w-dropdown-toggle-8"
>
<button class="table-menu-item w-inline-block" aria-label="Export to CSV">
<span class="table-menu-item-icon w-embed">
<!-- Export Icon SVG -->
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18"></polygon>
<path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
</svg>
</span>
<span>Export to CSV</span>
</button>
</nav>
</div>
</div>
</th>
</tr>
<!-- Filter Row -->
<tr class="table-filter-row">
<!-- Checkbox Filter Column (Empty) -->
<th class="table-checkbox-column"> </th>
<!-- Invoice Filter -->
<th>
<div class="table-filter-cell-content">
<input
class="input-filter w-input"
maxlength="256"
name="Filter-Col1"
data-name="Filter-Col1"
placeholder="Filter"
type="text"
id="Filter-Col"
>
</div>
</th>
<!-- Invoice Month Filter -->
<th>
<div class="table-filter-cell-content">
<div class="date-filter">
<input
class="input-filter date-picker w-input"
maxlength="256"
name="Invoice-Month"
data-name="Invoice-Month"
placeholder="Filter"
type="text"
id="Invoice-Month"
data-datepicker="daterange"
>
<div id="dateFilterButton" class="date-filter-icon-container">
<div class="date-filter-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
width="32"
height="32"
viewBox="0 0 32 32"
>
<path d="M26,4H22V2H20V4H12V2H10V4H6A2.0025,2.0025,0,0,0,4,6V26a2.0025,2.0025,0,0,0,2,2H26a2.0025,2.0025,0,0,0,2-2V6A2.0025,2.0025,0,0,0,26,4ZM6,6h4V8h2V6h8V8h2V6h4l0,4H6Zm0,6h5v6H6ZM19,26H13V20h6Zm0-8H13V12h6Zm2,8V20h5l.0012,6Z"></path>
</svg>
</div>
</div>
</div>
</div>
</th>
<!-- Status Filter -->
<th>
<div class="table-filter-cell-content">
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div
class="dropdown-closed table-filter w-dropdown-toggle"
id="w-dropdown-toggle-9"
aria-controls="w-dropdown-list-9"
aria-haspopup="menu"
aria-expanded="false"
role="button"
tabindex="0"
>
<div class="filter-dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text-content placeholder">Filter</div>
</div>
<nav
class="dropdown-open w-dropdown-list"
id="w-dropdown-list-9"
aria-labelledby="w-dropdown-toggle-9"
>
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">Canada</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">United States</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">United Kingdom</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">Italy</div>
</a>
<!-- Additional Long Options for Testing -->
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">This is a really long one to test with.</div>
</a>
<!-- Repeat as Needed -->
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">This is a really long one to test with.</div>
</a>
<!-- Add more as needed -->
</div>
</nav>
</div>
</div>
</th>
<!-- PO Number Filter -->
<th>
<div class="table-filter-cell-content">
<input
class="input-filter w-input"
maxlength="256"
name="Filter-Col1"
data-name="Filter-Col1"
placeholder="Filter"
type="text"
id="Filter-Col"
>
</div>
</th>
<!-- Action Filter Column (Empty) -->
<th> </th>
</tr>
</thead>
<tbody class="table-body">
<!-- First Table Row -->
<tr class="table-row">
<!-- Checkbox Column -->
<td class="table-checkbox-column">
<label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
<input type="checkbox" name="" data-name="" style="opacity:0; position:absolute; z-index:-1">
</label>
</td>
<!-- Invoice Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">EA-12465546546</div>
</div>
</div>
</td>
<!-- Invoice Month Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">November 2024</div>
</div>
</div>
</td>
<!-- Status Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data danger">Payment Due</div>
<button type="button" class="button small w-inline-block" data-wait="Loading">
<span class="button-icon w-embed">
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
<path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6Zm0,2v3H4V8ZM4,24V13H28V24Z" transform="translate(0 0)"></path>
<rect x="6" y="20" width="10" height="2"></rect>
</svg>
</span>
<span>Update Card</span>
</button>
</div>
</div>
</td>
<!-- PO Number Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">123456</div>
</div>
</div>
</td>
<!-- Action Cell -->
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-tippy-content="Download PDF" class="table-row-action-button">
<div class="table-row-action-button-icon w-embed">
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20"></polygon>
<polygon points="22 16 24 16 24 10 29 10 29 8 24 8 24 4 30 4 30 2 22 2 22 16"></polygon>
<path d="M16,2H12V16h4a4,4,0,0,0,4-4V6A4,4,0,0,0,16,2Zm2,10a2,2,0,0,1-2,2H14V4h2a2,2,0,0,1,2,2Z"></path>
<path d="M8,2H2V16H4V11H8a2,2,0,0,0,2-2V4A2,2,0,0,0,8,2ZM8,9H4V4H8Z"></path>
</svg>
</div>
</div>
</div>
</td>
</tr>
<!-- Second Table Row (Last Row) -->
<tr class="table-row last-row">
<!-- Checkbox Column -->
<td class="table-checkbox-column">
<label class="w-checkbox table-checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom table-checkbox"></div>
<input type="checkbox" name="" data-name="" style="opacity:0; position:absolute; z-index:-1">
</label>
</td>
<!-- Invoice Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data overflow">EA-12465546546</div>
</div>
</div>
</td>
<!-- Invoice Month Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data">December 2024</div>
</div>
</div>
</td>
<!-- Status Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left overflow">
<div class="table-data success">Paid</div>
</div>
</div>
</td>
<!-- PO Number Cell -->
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data disabled">n/a</div>
</div>
</div>
</td>
<!-- Action Cell -->
<td class="table-cell">
<div class="table-row-action-button-container">
<div data-tippy-content="Download PDF" class="table-row-action-button">
<div class="table-row-action-button-icon w-embed">
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20"></polygon>
<polygon points="22 16 24 16 24 10 29 10 29 8 24 8 24 4 30 4 30 2 22 2 22 16"></polygon>
<path d="M16,2H12V16h4a4,4,0,0,0,4-4V6A4,4,0,0,0,16,2Zm2,10a2,2,0,0,1-2,2H14V4h2a2,2,0,0,1,2,2Z"></path>
<path d="M8,2H2V16H4V11H8a2,2,0,0,0,2-2V4A2,2,0,0,0,8,2ZM8,9H4V4H8Z"></path>
</svg>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination Controls -->
<div class="table-pagination">
<div class="pagination-left">
<div class="items-per-page-container">
<div>Items per page:</div>
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div
class="dropdown-closed table-filter w-dropdown-toggle"
id="w-dropdown-toggle-10"
aria-controls="w-dropdown-list-10"
aria-haspopup="menu"
aria-expanded="false"
role="button"
tabindex="0"
>
<div class="filter-dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text-content">10</div>
</div>
<nav
class="dropdown-open top-left w-dropdown-list"
id="w-dropdown-list-10"
aria-labelledby="w-dropdown-toggle-10"
>
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">10</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">25</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">50</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">100</div>
</a>
</div>
</nav>
</div>
<div class="paginaton-total-items">
<div>1–10 of 103 items<br></div>
</div>
</div>
</div>
<div class="pagination-right">
<div class="pagination-pages-dropdown">
<div data-hover="false" data-delay="0" class="dropdown w-dropdown">
<div
class="dropdown-closed table-filter w-dropdown-toggle"
id="w-dropdown-toggle-11"
aria-controls="w-dropdown-list-11"
aria-haspopup="menu"
aria-expanded="false"
role="button"
tabindex="0"
>
<div class="filter-dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text-content">1</div>
</div>
<nav
class="dropdown-open top-right w-dropdown-list"
id="w-dropdown-list-11"
aria-labelledby="w-dropdown-toggle-11"
>
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">1</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">2</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">3</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" tabindex="0">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<div class="dropdown-option-text">3</div>
</a>
</div>
</nav>
</div>
<div>of 11 pages</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed">
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
xml:space="preserve"
>
<polygon points="20,24 10,16 20,8 "></polygon>
</svg>
</div>
</div>
<div class="pagination-button">
<div class="pagination-icon w-embed">
<svg
version="1.1"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="32px"
height="32px"
viewBox="0 0 32 32"
xml:space="preserve"
>
<polygon points="12,8 22,16 12,24 "></polygon>
</svg>
</div>
</div>
</div>
</div>
</div>
</form>