New Dashboard

Sample layout

by Renan Ribeiro Brando

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"
/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>



<div class="container">
  <div class="left-half">
    <div class="dash-card totals">
      <h1>100</h1>
      <p>Totals</p>
    </div>
    <div class="dash-card executing">
      <h1>15</h1>
      <p>Executing</p>
    </div>

    <div class="dash-card queue">
      <h1>65</h1>
      <p>Queue</p>
    </div>
    <div class="dash-card error">
      <h1>8</h1>
      <p>Errors</p>
    </div>
    <div class="dash-card outofschedule">
      <h1>20</h1>
      <p>Out of Schedule</p>
    </div>
    <div class="dash-table clearfix">
      <table id="example" class="display clearfix">
      </table>

    </div>
  </div>
  <div class="right-half">

    <div class="dash-sidecard">
      <p class="btn-top"><i class="fa fa-gear"></i> Executions</p>

      <div class="sidebox totals clearfix">
        <p><span class="left-value">Scope</span><span class="right-value">30</span></p><br>
        <p><span class="left-value">Executing</span><span class="right-value">10</span></p>
      </div>

      <div class="sidebox executing clearfix">
        <p><span class="left-value">Scope</span><span...

CSS

.container {
  background-color: #fff;
  padding: 10px;
  margin: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.dash-card {
  background: #333;
  color: #fff;
  font-family: "Arial", Times, serif;
  border-radius: 4px;
  display: inline-block;
  margin: 1px;
  position: relative;
  width: 18.75%;
  cursor: pointer;
}

.dash-sidecard {
  padding: 2px;
  font-family: "Arial", Times, serif;
}

.dash-table {
  margin: 10px;
  margin-left: 0px;
  border: 2px solid #AAA;
  border-radius: 4px;
  padding: 10px;
}

.dash-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.dash-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

div.dash-card h1 {
  margin: 1px;
  padding-top: 10px;
  padding-right: 10px;
  text-align: right;
}

div.dash-card p {
  font-size: 12px;
  margin: 1px;
  padding-top: 2px;
  padding-right: 10px;
  text-align: right;
}

.totals {
  background-color: #0E3D59;
}

.executing {
  background-color: #88A61B;
}

.queue {
  background-color: #F29F05;
}

.error {
  background-color: #D92525;
}

.outofschedule {
  background-color: #999999;
}

.sidebox {
  border-radius: 4px;
  color: #fff;
  margin: 3px;
  padding: 4px;
}

.btn-top {
  text-align: center;
  color: #FFF;
}

.left-value {
  float: left;
}

.right-value {
  float: right;
}

.left-half {
  float: left;
  width: 80%;
}

.right-half {
  background-color: #555;
  float: left;
  width: 20%;
  height: 100%;
  border-radius: 4px;
  margin-top: 1px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

JavaScript

$(document).ready(function() {
  var data = {
    "total": 18,
    "light": "red",
    "inspections": [{
      "hierarchy": ["SiteSeeing Console/Gr Fila", "SiteSeeing Console/Grupo A/Gr Result"],
      "name": "01 Alimenta Fila",
      "id": 11,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Gr Fila", "SiteSeeing Console/Grupo A/Gr Result"],
      "name": "02 Executa Tasks - 01",
      "id": 13,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Gr Fila", "SiteSeeing Console/Grupo A/Gr Result"],
      "name": "02 Executa Tasks - 02",
      "id": 14,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Gr Fila"],
      "name": "02 Executa Tasks - 03",
      "id": 15,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Gr Fila"],
      "name": "03 Resultado das Tasks",
      "id": 16,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Santander/Cambio/Euro/Gr Santander", "SiteSeeing Console/Santander/Cambio/Euro/Grupo Pai Prime/Cambio Euro"],
      "name": "Cambio Euro 1",
      "id": 23,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Santander/Cambio/Euro/Gr Santander", "SiteSeeing Console/Santander/Cambio/Euro/Grupo Pai Prime/Cambio Euro"],
      "name": "Cambio Euro 2",
      "id": 24,
      "status": "Unknown"
    }, {
      "hierarchy": ["SiteSeeing Console/Santander/Cambio/Dolar/Gr Santander"],
      "name": "Cambio USD",
      "id": 22,
      "status": "Success"
    }, {
      "hierarchy": ["SiteSeeing Console/Santander/Contratos/Gr Santander", "SiteSeeing Console/Santander/Contratos/Contratos 800"],
      "name": "Contratos ABC",
      "id": 25,
      "status": "Success"
    }, {
      "hierarchy": ["SiteSeeing Console/Santander/Contratos/Gr Santander", "SiteSeeing Console/Santander/Contratos/Contratos 900"],
      "name": "Contratos SBB",
      "id": 28,
      "status": "Success"
    }, {
      "hierarchy":...