<div class=" content">
<div class=" row">
<div class=" col-12">
<div class=" card card-chart">
<div class=" card-header">
<div class=" row">
<div class=" col-sm-6 text-left">
<h5 class=" card-category">Total Shipments</h5>
<h2 class=" card-title">Performance</h2>
</div>
<div class=" col-sm-6">
<div
class=" btn-group btn-group-toggle float-right"
data-toggle="buttons"
>
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[0];updateOptions();clicked=true;clicked1=false;clicked2=false" [ngClass]="{'active':clicked===true}">
<input checked="checked" name="options" type="radio" />
<span
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
>
Accounts
</span>
<span class=" d-block d-sm-none">
<i class=" tim-icons icon-single-02"> </i>
</span>
</label>
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[1];updateOptions();clicked=false;clicked1=true;clicked2=false" [ngClass]="{'active':clicked1===true}">
<input
class=" d-none d-sm-none"
name="options"
type="radio"
/>
<span
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
>
Purchases
</span>
<span class=" d-block d-sm-none">
<i class=" tim-icons icon-gift-2"> </i>
</span>
</label>
<label class=" btn btn-sm btn-danger btn-simple" (click)="data=datasets[2];updateOptions();clicked=false;clicked1=false;clicked2=true" [ngClass]="{'active':clicked2===true}">
<input class=" d-none" name="options" type="radio" />
<span
class=" d-none d-sm-block d-md-block d-lg-block d-xl-block"
>
Sessions
</span>
<span class=" d-block d-sm-none">
<i class=" tim-icons icon-tap-02"> </i>
</span>
</label>
</div>
</div>
</div>
</div>
<div class=" card-body">
<div class=" chart-area"><canvas id="chartBig1"> </canvas></div>
</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-lg-4">
<div class=" card card-chart">
<div class=" card-header">
<h5 class=" card-category">Total Shipments</h5>
<h3 class=" card-title">
<i class=" tim-icons icon-bell-55 text-danger-states"> </i> 763,215
</h3>
</div>
<div class=" card-body">
<div class=" chart-area"><canvas id="chartLineRed"> </canvas></div>
</div>
</div>
</div>
<div class=" col-lg-4">
<div class=" card card-chart">
<div class=" card-header">
<h5 class=" card-category">Daily Sales</h5>
<h3 class=" card-title">
<i class=" tim-icons icon-delivery-fast text-info"> </i> 3,500€
</h3>
</div>
<div class=" card-body">
<div class=" chart-area"><canvas id="CountryChart"> </canvas></div>
</div>
</div>
</div>
<div class=" col-lg-4">
<div class=" card card-chart">
<div class=" card-header">
<h5 class=" card-category">Completed Tasks</h5>
<h3 class=" card-title">
<i class=" tim-icons icon-send text-success"> </i> 12,100K
</h3>
</div>
<div class=" card-body">
<div class=" chart-area"><canvas id="chartLineGreen"> </canvas></div>
</div>
</div>
</div>
</div>
<div class=" row">
<div class=" col-lg-6 col-md-12">
<div class=" card card-tasks">
<div class=" card-header">
<h6 class=" title d-inline">Tasks(5)</h6>
<p class=" card-category d-inline">today</p>
<div ngbDropdown>
<button
class=" btn btn-link btn-icon"
data-toggle="dropdown"
ngbDropdownToggle
type="button"
>
<i class=" tim-icons icon-settings-gear-63"> </i>
</button>
<div
aria-labelledby="dropdownMenuLink"
class=" dropdown-menu-right"
ngbDropdownMenu
>
<a href="javascript:void(0)" ngbDropdownItem> Action </a>
<a href="javascript:void(0)" ngbDropdownItem> Another action </a>
<a href="javascript:void(0)" ngbDropdownItem> Something else </a>
</div>
</div>
</div>
<div class=" card-body">
<div class=" table-full-width table-responsive">
<table class=" table">
<tbody>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">Update the Documentation</p>
<p class=" text-muted">
Dwuamish Head, Seattle, WA 8:47 AM
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
checked=""
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">GDPR Compliance</p>
<p class=" text-muted">
The GDPR is a regulation that requires businesses to
protect the personal data and privacy of Europe citizens
for transactions that occur within EU member states.
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">Solve the issues</p>
<p class=" text-muted">
Fifty percent of all respondents said they would be more
likely to shop at a company
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">Release v2.0.0</p>
<p class=" text-muted">
Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">Export the processed files</p>
<p class=" text-muted">
The report also shows that consumers will not easily
forgive a company once a breach exposing their personal
data occurs.
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
<tr>
<td>
<div class=" form-check">
<label class=" form-check-label">
<input
class=" form-check-input"
type="checkbox"
value=""
/>
<span class=" form-check-sign">
<span class=" check"> </span>
</span>
</label>
</div>
</td>
<td>
<p class=" title">Arival at export process</p>
<p class=" text-muted">
Capitol Hill, Seattle, WA 12:34 AM
</p>
</td>
<td class=" td-actions text-right">
<button class=" btn btn-link" type="button" placement="left" ngbTooltip="Edit Task" container="body" >
<i class=" tim-icons icon-pencil"> </i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class=" col-lg-6 col-md-12">
<div class=" card">
<div class=" card-header">
<h4 class=" card-title">Simple Table</h4>
</div>
<div class=" card-body">
<div class=" table-responsive">
<table class=" table tablesorter" id="">
<thead class=" text-primary">
<tr>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th class=" text-center">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dakota Rice</td>
<td>Niger</td>
<td>Oud-Turnhout</td>
<td class=" text-center">$36,738</td>
</tr>
<tr>
<td>Minerva Hooper</td>
<td>Curaçao</td>
<td>Sinaai-Waas</td>
<td class=" text-center">$23,789</td>
</tr>
<tr>
<td>Sage Rodriguez</td>
<td>Netherlands</td>
<td>Baileux</td>
<td class=" text-center">$56,142</td>
</tr>
<tr>
<td>Philip Chaney</td>
<td>Korea, South</td>
<td>Overland Park</td>
<td class=" text-center">$38,735</td>
</tr>
<tr>
<td>Doris Greene</td>
<td>Malawi</td>
<td>Feldkirchen in Kärnten</td>
<td class=" text-center">$63,542</td>
</tr>
<tr>
<td>Mason Porter</td>
<td>Chile</td>
<td>Gloucester</td>
<td class=" text-center">$78,615</td>
</tr>
<tr>
<td>Jon Porter</td>
<td>Portugal</td>
<td>Gloucester</td>
<td class=" text-center">$98,615</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>