<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$('#example').DataTable({
ajax: '/app/site/hosting/scriptlet.nl?script=1431&deploy=1',
paging: 100,
ordering: true,
info: true,
order: [[0, 'desc']],
stateSave: true,
// scrollX: true,
// scrollY: '50vh',
// scrollCollapse: true,
columns: [
{
data: 'DATE',
},
{
data: 'ZERO_COGS',
},
{
data: 'ZERO_COGS_ITEMS',
},
]
});
$('#example1').DataTable({
ajax: '/app/site/hosting/scriptlet.nl?script=1429&deploy=1',
paging: 100,
ordering: true,
info: true,
order: [[0, 'desc']],
stateSave: true,
// scrollX: true,
// scrollY: '50vh',
// scrollCollapse: true,
columns: [
{
data: 'DATE',
},
{
data: 'NEGATIVE_LOCATION_COUNT',
},
{
data: 'NUMBER_OF_NEGATIVE_SKU_LOCATION',
},
{
data: 'NUMBER_OF_ZERO_COGS',
},
]
});
});
</script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">DAILY</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">WEEKLY</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<h3><p style="text-align: center;">BRANDED KPI INDICATORS-DAILY</p></h3>
<table id="example1" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>DATE</th>
<th>NEGATIVE_LOCATION_COUNT</th>
<th>NUMBER_OF_NEGATIVE_SKU_LOCATION</th>
<th>NUMBER_OF_ZERO_COGS</th>
</tr>
</thead>
</table>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<h3><p style="text-align: center;">BRANDED KPI INDICATORS-WEEKLY</p></h3>
<table id="example" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>DATE</th>
<th>ZERO_COGS</th>
<th>ZERO_COGS_ITEMS</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- <h3><p style="text-align: center;">BRANDED KPI INDICATORS-WEEKLY</p></h3> -->
<!-- <table id="example" class="table table-striped table-hover" style="width:100%">
<thead>
<tr><th>INDICATOR</th>
<th>DATE</th>
<th>ZERO_COGS</th>
<th>ZERO_COGS_ITEMS</th>
</tr>
</thead>
<tbody>
<tr><td>Negative Location Count</td></tr>
<tr><td>Number Of Negative SKU Location</td></tr>
<tr><td>Number of Zero COGS</td></tr>
</tbody>
</table> -->
</body>
</html>