<!--Include card-loading class on card to show loading indicator -->
<div class="card card-loading data-card mb-48">
<div class="card-content">
<div class="data-card-text">
<h5>In merchant role</h5>
<div class="card-count tertiary">23,882</div>
</div>
<div class="card-body">
<div id="chart" class="chart-area"></div>
</div>
</div>
<div class="card-spinner">
<img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
</div>
</div>
<!--Include table-loading class alongside table-responsive class to show loading indicator -->
<div class="table-responsive table-loading">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Merchant ID</th>
<th scope="col">Reseller key</th>
<th scope="col">Company name</th>
<th scope="col" class="text-center">Transactions</th>
<th scope="col" class="text-center">Sales Vol.</th>
<th scope="col" class="text-center">Returns Vol.</th>
<th scope="col" class="text-center">Ineligible</th>
<th scope="col">Reseller</th>
<th scope="col" class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1123222</td>
<td>1123222</td>
<td><a href="">Bedrock incorporated</a></td>
<td class="text-center">4</td>
<td class="text-center">$56.40</td>
<td class="text-center">$0.00</td>
<td class="text-center">$0.00</td>
<td>Integrity</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-ellipsis"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item danger" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td scope="row">112223</td>
<td>112223</td>
<td><a href="">Bedrock incorporated</a></td>
<td class="text-center">4</td>
<td class="text-center">$56.40</td>
<td class="text-center">$0.00</td>
<td class="text-center">$0.00</td>
<td>Integrity</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-ellipsis"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item danger" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td scope="row">112232</td>
<td>112232</td>
<td><a href="">Bedrock incorporated</a></td>
<td class="text-center">4</td>
<td class="text-center">$56.40</td>
<td class="text-center">$0.00</td>
<td class="text-center">$0.00</td>
<td>Integrity</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-ellipsis"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item danger" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td scope="row">1112344</td>
<td>1112344</td7>
<td><a href="">Bedrock incorporated</a></td>
<td class="text-center">4</td>
<td class="text-center">$56.40</td>
<td class="text-center">$0.00</td>
<td class="text-center">$0.00</td>
<td>Integrity</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-ellipsis"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item danger" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="card-spinner">
<img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
</div>
</div>
</div>
