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>