Heading 5, 16px, Light, Line Height 22px
Heading 3, 22px, Light, Line Height 30px
Heading 1, 30px, Light
Heading 2, 26px, Medium
Heading 4, 18px, Medium, Line Height 30px
<button type="button" class="unduit-btn unduit-btn-m-w unduit-default-btn">Default button</button> <button type="button" class="unduit-btn unduit-btn-m-w unduit-primary-btn">Primary button</button> <button type="button" class="unduit-btn unduit-btn-m-w hover-btn">Hover button</button> <button type="button" class="unduit-btn unduit-btn-m-w unduit-btn-link">Default Link</button>
<button type="button" class="unduit-btn unduit-btn-m-w unduit-default-btn">Default button</button> <button type="button" class="unduit-btn unduit-btn-m-w unduit-primary-btn">Primary button</button> <h3 class="doc-heading border-btm block-btn-title">Block Buttons</h3> <button type="button" class="unduit-btn unduit-block-btn unduit-default-btn">Block button</button>
<div class="fa-icon">
<ul class="ui-faicon-list">
<li><i class="fab fa-500px"></i><span class="icon-name">500px</span></li>
<li><i class="fab fa-accessible-icon"></i><span class="icon-name">accessible-icon</span></li>
<li><i class="fab fa-accusoft"></i><span class="icon-name">accusoft</span></li>
<li><i class="fab fa-acquisitions-incorporated"></i><span class="icon-name">acquisitions-incorporated</span></li>
<li><i class="fas fa-ad"></i><span class="icon-name">ad</span></li>
<li><i class="fas fa-address-book"></i><span class="icon-name">address-book</span></li>
<li><i class="fas fa-address-card"></i><span class="icon-name">address-card</span></li>
<li><i class="far fa-address-card"></i><span class="icon-name">address-card</span></li>
<li><i class="fas fa-adjust"></i><span class="icon-name">adjust</span></li>
<li><i class="fab fa-adn"></i><span class="icon-name">adn</span></li>
<li><i class="fab fa-adversal"></i><span class="icon-name">adversal</span></li>
<li><i class="fab fa-affiliatetheme"></i><span class="icon-name">affiliatetheme</span></li>
<li><i class="fas fa-air-freshener"></i><span class="icon-name">air-freshener</span></li>
<li><i class="fab fa-algolia"></i><span class="icon-name">algolia</span></li>
<li><i class="fas fa-align-center"></i><span class="icon-name">align-center</span></li>
<li><i class="fas fa-align-justify"></i><span class="icon-name">align-justify</span></li>
<li><i class="fas fa-align-left"></i><span class="icon-name">align-left</span></li>
<li><i class="fas fa-align-right"></i><span class="icon-name">align-right</span></li>
<li><i class="fab fa-alipay"></i><span class="icon-name">alipay</span></li>
<li><i class="fas fa-allergies"></i><span class="icon-name">allergies</span></li>
<li><i class="fab fa-amazon"></i><span class="icon-name">amazon</span></li>
<li><i class="fab fa-amazon-pay"></i><span class="icon-name">amazon-pay</span></li>
<li><i class="fas fa-ambulance"></i><span class="icon-name">ambulance</span></li>
<li><i class="fas fa-american-sign-language-interpreting"></i><span class="icon-name">american-sign-language-interpreting</span></li>
<li><i class="fab fa-amilia"></i><span class="icon-name">amilia</span></li>
<li><i class="fas fa-anchor"></i><span class="icon-name">anchor</span></li>
<li><i class="fab fa-android"></i><span class="icon-name">android</span></li>
<li><i class="fab fa-angellist"></i><span class="icon-name">angellist</span></li>
<li><i class="fas fa-angle-double-down"></i></i><span class="icon-name">angle-double-down</span></li>
<li><i class="fas fa-angle-double-left"></i><span class="icon-name">angle-double-left</span></li>
<li><i class="fas fa-angle-double-right"></i><span class="icon-name">angle-double-right</span></li>
<li><i class="fas fa-angle-double-up"></i><span class="icon-name">angle-double-up</span></li>
<li><i class="fas fa-angle-down"></i><span class="icon-name">angle-down</span></li>
<li><i class="fas fa-angle-left"></i><span class="icon-name">angle-left</span></li>
<li><i class="fas fa-angle-right"></i><span class="icon-name">angle-right</span></li>
<li><i class="fas fa-angle-up"></i><span class="icon-name">angle-up</span></li>
<li><i class="fas fa-angry"></i><span class="icon-name">angry</span></li>
<li><i class="far fa-angry"></i><span class="icon-name">angry</span></li>
<li><i class="fab fa-angrycreative"></i><span class="icon-name">angrycreative</span></li>
<li><i class="fab fa-angular"></i><span class="icon-name">angular</span></li>
<li><i class="fas fa-ankh"></i><span class="icon-name">ankh</span></li>
<li><i class="fab fa-app-store"></i><span class="icon-name">app-store</span></li>
<li><i class="fab fa-app-store-ios"></i><span class="icon-name">app-store-ios</span></li>
<li><i class="fab fa-apper"></i><span class="icon-name">apper</span></li>
<li><i class="fab fa-apple"></i><span class="icon-name">apple</span></li>
<li><i class="fas fa-apple-alt"></i><span class="icon-name">apple-alt</span></li>
<li><i class="fab fa-apple-pay"></i><span class="icon-name">apple-pay</span></li>
<li><i class="fas fa-archive"></i><span class="icon-name">archive</span></li>
<li><i class="fas fa-archway"></i><span class="icon-name">archway</span></li>
<li><i class="fas fa-arrow-alt-circle-down"></i><span class="icon-name">arrow-alt-circle-down</span></li>
<li><i class="far fa-arrow-alt-circle-down"></i><span class="icon-name">arrow-alt-circle-down</span></li>
<li><i class="fas fa-arrow-alt-circle-left"></i><span class="icon-name">arrow-alt-circle-left</span></li>
<li><i class="far fa-arrow-alt-circle-left"></i><span class="icon-name">arrow-alt-circle-left</span></li>
<li><i class="fas fa-arrow-alt-circle-right"></i><span class="icon-name">arrow-alt-circle-left</span></li>
<li><i class="far fa-arrow-alt-circle-right"></i><span class="icon-name">arrow-alt-circle-left</span></li>
<li><i class="fas fa-arrow-alt-circle-up"></i><span class="icon-name">arrow-alt-circle-up</span></li>
<li><i class="far fa-arrow-alt-circle-up"></i><span class="icon-name">arrow-alt-circle-up</span></li>
<li><i class="fas fa-arrow-down"></i><span class="icon-name">arrow-down</span></li>
<li><i class="fas fa-arrow-left"></i><span class="icon-name">arrow-left</span></li>
<li><i class="fas fa-arrow-right"></i><span class="icon-name">arrow-right</span></li>
<li><i class="fas fa-arrow-up"></i><span class="icon-name">arrow-up</span></li>
<li><i class="fas fa-arrows-alt"></i><span class="icon-name">arrows-alt</span></li>
<li><i class="fas fa-arrows-alt-h"></i><span class="icon-name">arrows-alt-h</span></li>
<li><i class="fas fa-arrows-alt-v"></i><span class="icon-name">arrows-alt-v</span></li>
<li><i class="fab fa-artstation"></i><span class="icon-name">artstation</span></li>
<li><i class="fas fa-assistive-listening-systems"></i><span class="icon-name">assistive-listening-systems</span></li>
<li><i class="fas fa-asterisk"></i><span class="icon-name">asterisk</span></li>
<li><i class="fab fa-asymmetrik"></i><span class="icon-name">asymmetrik</span></li>
<li><i class="fas fa-at"></i><span class="icon-name">at</span></li>
<li><i class="fas fa-atlas"></i><span class="icon-name">atlas</span></li>
<li><i class="fas fa-atom"></i><span class="icon-name">atom</span></li>
</ul>
</div>
<form>
<div class="form-group ui-form-group">
<label>Email address</label>
<input type="email" class="form-control" id="email">
</div>
</form>
<form>
<div class="form-group ui-form-group">
<label>Telephone</label>
<input type="email" class="form-control" id="tel">
</div>
</form>
<form>
<div class="form-group ui-form-group">
<label>Email</label>
<input type="email" class="form-control" id="email">
</div>
</form>
<form>
<div class="form-group ui-form-group">
<label>Selection Field</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</form>
<form>
<div class="form-group ui-form-group">
<div class="radio-inline">
<div><label>Select One</label></div>
<div class="radio-btn-wrap">
<label class="radio-btn-label">
<input type="radio" class="radio-btn" name="optionsRadios" id="optionsRadios1" value="option1" checked>Value 1
<span class="checkround"></span>
</label>
<label class="radio-btn-label">
<input type="radio" class="radio-btn" name="optionsRadios" id="optionsRadios2" value="option2">Value 2
<span class="checkround"></span>
</label>
</div>
</div>
</div>
</form>
<form>
<div class="form-group ui-form-group">
<div class="radio-inline">
<div><label>Select Multiple</label></div>
<div class="checkbox-wrap">
<label class="cstm-check">Value 1
<input type="checkbox" checked="checked">
<span class="checkmark-checkbox"></span>
</label>
<label class="cstm-check">Value 2
<input type="checkbox">
<span class="checkmark-checkbox"></span>
</label>
<label class="cstm-check">Value 3
<input type="checkbox">
<span class="checkmark-checkbox"></span>
</label>
<label class="cstm-check">Value 4
<input type="checkbox">
<span class="checkmark-checkbox"></span>
</label>
</div>
</div>
</div>
</form>
<html>
<head>
<style>
.myChart {
width: 100%;
height: 225px !important;
}
</style>
<script src="https://www.unduit.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart1" class="myChart"></div>
<script>
zingchart.THEME = "classic";
var initState = null; // Used later to store the chart state before changing the data
var bgColors = ["#1976d2", "#424242", "#388e3c", "#ffa000", "#7b1fa2", "#c2185b"]; // ie, chrome, ff, safari, opera, unknown
var myConfig = {
"globals": {
"font-family": "Helvetica"
},
"type": "bar",
"background-color": "white",
"scale-y": {
"line-color": "none",
"tick": {
"line-color": "none"
},
"tooltip": {
"visible": false
},
"guide": {
"line-style": "solid"
},
"item": {
"color": "#606060"
},
visible: false
},
"scale-x": {
"values": [
"Orders Pending", "Orders Received", "Boxes Shipped", "Devices Received", "Repairs In Progress", "Its on the way", "Request Review", "Orders Cancelled"],
"cursor":"pointer",
"line-color": "#FFFFFF",
"line-width": 1,
"tick": {
"line-width": 1,
"line-color": "#C0D0E0",
"visible": false
},
"guide": {
"visible": false
},
"items-overlap": true,
"item": {
"color": "#606060",
"font-angle": - 0.6,
"offset-x": "25px",
"font-size": "9px",
flat:false
},
},
"plot": {
"value-box": {
"text": "%v",
"font-size": 20,
"color": "#606060"
},
"bar-max-width": "90%",
"tooltip": {
"visible": false
},
"animation": {
"effect": "7"
},
"rules": [{
"rule": "%i==0",
"background-color": "#01B396"
}, {
"rule": "%i==1",
"background-color": "#1C84C6"
}, {
"rule": "%i==2",
"background-color": "#23C6C8"
}, {
"rule": "%i==3",
"background-color": "#F8AC59"
}, {
"rule": "%i==4",
"background-color": "#ED5565"
}, {
"rule": "%i==5",
"background-color": "#939AC4"
}, {
"rule": "%i==6",
"background-color": "#017E6B"
}, {
"rule": "%i==7",
"background-color": "#01A0A0"
}]
},
"series": [{
"values": [270, 0, 10, 0, 0, 39, 282, 126]
}]
};
zingchart.render({
id: 'myChart1',
data: myConfig,
height: "100%",
width: "100%"
});
</script>
<body>
</html>
<html>
<head>
<style>
.device-portfolio-table .part-1{
width: 65%;
}
.device-portfolio-table tr td {
vertical-align: top;
}
</style>
<script src="https://www.unduit.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>
<script src="https://admin.unduit.com/assets_new/vendors/Chart.js/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.unduit.com/assets/theme/unduitwireless/css/bootstrap.min.css">
<link rel="shortcut icon" href="https://www.unduit.com/favicon.ico" type="image/x-icon">
</head>
<body>
<table class="device-portfolio-table">
<tbody>
<tr>
<td class="part-1">
<table class="device-portfolio-table-1">
<thead>
<tr>
<th>Device</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
<i class ="fa fa-square r" style="color:#BDC3C7;" ></i>iPhone 6
</p>
</td>
<td>46.91%</td>
</tr>
<tr>
<td>
<p>
<i class="fa fa-square r" style="color:#9B59B6;" ></i>iPhone 6+
</p>
</td>
<td>17.51%</td>
</tr>
<tr>
<td>
<p>
<i class="fa fa-square r" style="color:#E74C3C;" ></i>iPhone 5/5c/5s
</p>
</td>
<td>12.38%</td>
</tr>
<tr>
<td>
<p>
<i class="fa fa-square r" style="color:#26B99A;" ></i>iPhone 6s
</p>
</td>
<td>11.89%</td>
</tr>
<tr>
<td>
<p>
<i class="fa fa-square r" style="color:#3498DB;" ></i>iPhone 7
</p>
</td>
<td>11.32%</td>
</tr>
</tbody>
</table>
</td>
<td class="part-2">
<table class="device-portfolio-table-2">
<tbody>
<tr>
<th>Top 5<th>
</tr>
<tr>
<td class="p0">
<canvas class="canvasDoughnut" height="145" width="140" style="width: 140px; height: 145px;">
</canvas>
<td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
var device_progress_data = [{"count_no":"576","device":"iPhone 6"},{"count_no":"215","device":"iPhone 6+"},{"count_no":"152","device":"iPhone 5\/5c\/5s"},{"count_no":"146","device":"iPhone 6s"},{"count_no":"139","device":"iPhone 7"}];
var device_tooltip = [];
var arr_01 = [];
var tot = 0.00;
var arr_02 = [];
for (var i = 0; i < device_progress_data.length; i++) {
arr_01.push(device_progress_data[i].device);
device_tooltip.push((device_progress_data[i].device).substring(0, 10) + ((device_progress_data[i].device).length > 10 ? "." : ""));
tot += parseFloat(device_progress_data[i].count_no);
}
for (var j = 0; j < device_progress_data.length; j++) {
arr_02.push(((parseFloat(device_progress_data[j].count_no) / parseFloat(tot)) * 100).toFixed(2));
}
if ($('.canvasDoughnut').length) {
var chart_doughnut_settings = {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: device_tooltip,
datasets: [{
data: arr_02,
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 50,
tooltipFontSize: 5,
percentageInnerCutout: 30,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 0
}
}
}
}
$('.canvasDoughnut').each(function () {
var chart_element = $(this);
var chart_doughnut = new Chart(chart_element, chart_doughnut_settings);
});
}
</script>
</body>
</html>
442
Total Orders Placed100.00%
2893
Total Devices 100.00%
$7,196
Total Amount Spent100.00%
<html>
<head>
<style>
#flot-dashboard-chart{
width: 100% !important;
height: 260px !important;
}
</style>
<script src="https://www.unduit.com/assets/theme/corporate_new/common/js/jquery.min.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.tooltip.min.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.spline.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.resize.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.pie.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.symbol.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.time.js"></script>
<script src="https://admin.unduit.com/assets_new/build/js/jquery.flot.axislabels.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.unduit.com/assets/theme/unduitwireless/css/bootstrap.min.css">
<link rel="shortcut icon" href="https://www.unduit.com/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="row" >
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="flot-chart-content" id="flot-dashboard-chart" > </div>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 bg-white">
<div class="col-md-12 col-sm-12 col-xs-12 top_graph">
<div>
<p class="amount_graph" id="show_total_order">442<p>
<p class="detail_c">Total Orders Placed <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
<div>
<div class="progress progress_sm" style="width: 100%;">
<div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 top_graph">
<div>
<p class="amount_graph" id="show_total_order">2893<p>
<p class="detail_c">Total Devices <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
<div>
<div class="progress progress_sm" style="width: 100%;">
<div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 top_graph">
<div>
<p class="amount_graph" id="show_total_order">$7,196<p>
<p class="detail_c">Total Amount Spent <span class="pull-right" id="show_total_order_per">100.00% <i id="chevor_ord" class="fa fa-level-up icon-style"> </i></span> </p>
<div>
<div class="progress progress_sm" style="width: 100%;">
<div class="progress-bar bg-green" role="progressbar" id="show_total_order_progress" data-transitiongoal="100" aria-valuenow="99" style="width: 100%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var an_order = [[1530421200000,"0"],[1533099600000,"44"],[1535778000000,"35"],[1538370000000,"67"],[1541048400000,"31"],[1543644000000,"22"],[1546322400000,"0"],[1549000800000,"78"],[1551420000000,"53"],[1554094800000,"30"],[1556686800000,"78"],[1559365200000,"4"]];
var an_device = [[1530421200000,"0"],[1533099600000,61],[1535778000000,52],[1538370000000,2281],[1541048400000,66],[1543644000000,90],[1546322400000,"0"],[1549000800000,126],[1551420000000,79],[1554094800000,45],[1556686800000,86],[1559365200000,7]];
var mx_order = 78;
var mx_device = 2281;
max_val_device = mx_device;
max_val_order = mx_order;
var bar_width = 24 * 60 * 60 * 10000;
x_axiss = [1, "month"];
x_axis_label = "(Month)";
var time_formatee = '%b %y';
// this is code for ticksize
var ticksize_device = Math.floor(max_val_device / 10);
var ticksize_order = Math.floor(max_val_order / 10);
if (ticksize_device == 0){
ticksize_device = 1;
}
if (ticksize_order == 0){
ticksize_order = 1;
}
var outer_array_final2 = an_order;
var outer_array_final1 = an_device;
var data2 = outer_array_final2;
var data3 = outer_array_final1;
var y1 = {
label: "Orders",
data: data2,
color: "#1ab394",
tickSize: 1,
bars: {
show: true,
align: "center",
barWidth: bar_width,
lineWidth: 0
}
};
var y2 = {
label: "Devices",
data: data3,
yaxis: 2,
color: "#1C84C6",
tickSize: 1,
lines: {
lineWidth: 1,
show: true,
fill: true,
fillColor: {
colors: [{
opacity: 0.2
}, {
opacity: 0.4
}]
}
},
splines: {
show: false,
tension: 0.6,
lineWidth: 1,
fill: 0.1},
}
var dataset = [
y1, y2
];
var options = {
xaxis: {
mode: "time",
tickSize: x_axiss,
tickLength: 0,
//axisLabel: x_axis_label,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 10,
color: "#d5d5d5",
timezone:"browser",
timeformat: time_formatee
},
yaxes: [{
mode: "number",
position: "left",
color: "#d5d5d5",
axisLabel: "(No. of Orders)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Arial',
axisLabelPadding: 3,
tickSize:ticksize_order,
min:0,
tickFormatter: function (v, axis) {
return parseInt(v);
}
}, {
mode: "number",
position: "right",
clolor: "#d5d5d5",
axisLabel: "(No. of Devices)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: ' Arial',
axisLabelPadding: 3,
tickSize:ticksize_device,
min:0,
tickFormatter: function (v, axis) {
return parseInt(v);
}
}
],
legend: {
noColumns: 1,
labelBoxBorderColor: "#000000", position: "nw"
},
grid: {
hoverable: true,
borderWidth: 0
},
tooltip: {
show: true,
content: "%x: %s (%y)"
},
series: {
autoMarkings: {
enabled: true,
showMinMax: true,
color: "#fff0df"
}
}
};
$.plot($("#flot-dashboard-chart"), dataset, options);
});
</script>
</body>
</html>
<div class="row">
<div class="col-md-4">
<div class="widget-col widget-green-bg">
<div class="title-wrap">
<h3 class="widget-col-title">Revenue <i class="far fa-eye"></i><span></span></h3>
<div class="col-btn">
<button type="button" class="unduit-btn btn-light">Annual</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-col widget-yellow-bg">
<div class="title-wrap">
<h3 class="widget-col-title">User Activity <span>disabled</span></h3>
<div class="col-btn">
<button type="button" class="unduit-btn btn-light">Today</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget-col widget-blue-bg">
<div class="title-wrap">
<h3 class="widget-col-title">Corporate Orders <span>211</span></h3>
<div class="col-btn">
<button type="button" class="unduit-btn btn-light">Annual</button>
</div>
</div>
<div class="total-order">Total Corporate orders</div>
<div class="order-value text-right">100.00%</div>
</div>
</div>
</div>
| Order ID | Status | Order Date | Requester | Employee | View |
|---|---|---|---|---|---|
| #15615354971111 | Order Received | 26 June 2019 | James - Nee Doe | James - Nee Doe | |
| #15615285941110 | Repair In Progress | 26 June 2019 | Christal Larios | Christal Larios | |
| #15615276261106 | It's on the way | 26 June 2019 | Julianna Blocker | Julianna Blocker | |
| #15615270031105 | Completed | 26 June 2019 | Malvina Hack | Malvina Hack | |
| #15602381711072 | Box Shipped | 11 June 2019 | Estrella Husted | Estrella Husted | |
| #15595530171061 | Order Received | 3 June 2019 | Faustino Agar | Faustino Agar |
<table class="table bulk_action no-footer mb0 xtable-repair-orders btn-2-badge">
<thead>
<tr role="row" class="header_row">
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending"> Order ID</th>
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending">Status</th>
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending">Order Date</th>
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">Requester</th>
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">Employee</th>
<th class="sorting" tabindex="0" aria-controls="datatable-checkbox" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending">View</th>
</tr>
</thead>
<tbody id="rep_ord">
<tr role="row">
<td><a href="#">#15615354971111</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-info">Order Received</span></td>
<td>26 June 2019</td>
<td>James - Nee Doe</td>
<td>James - Nee Doe</td>
<td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
<tr role="row">
<td><a href="#">#15615285941110</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-warning">Repair In Progress</span></td>
<td>26 June 2019</td>
<td>Christal Larios</td>
<td>Christal Larios</td>
<td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
<tr role="row">
<td><a href="#">#15615276261106</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-warning">It's on the way</span></td>
<td>26 June 2019</td>
<td>Julianna Blocker</td>
<td>Julianna Blocker</td>
<td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
<tr role="row">
<td><a href="#">#15615270031105</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-success">Completed</span></td>
<td>26 June 2019</td>
<td>Malvina Hack</td>
<td>Malvina Hack</td>
<td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
<tr role="row">
<td><a href="#">#15602381711072</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-primary">Box Shipped</span></td>
<td>11 June 2019</td>
<td>Estrella Husted</td>
<td>Estrella Husted</td>
<td class="text-center"><a href="javascript:void(0)"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
<tr role="row">
<td><a href="#">#15595530171061</a></td>
<td><span style="cursor: default" class="btn btn-xs btn-info">Order Received</span></td>
<td>3 June 2019</td>
<td>Faustino Agar</td>
<td>Faustino Agar</td>
<td class="text-center"><a href="#"><i class="fa fa-eye icon-style"></i></a></td>
</tr>
</tbody>
</table>