%section.content .container-fluid .block-header %h2 DASHBOARD / Widgets .row.clearfix .col-lg-3.col-md-3.col-sm-6.col-xs-12 .info-box.bg-pink.hover-expand-effect .icon %i.material-icons playlist_add_check .content .text NEW TASKS .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "15", "data-to" => "125"} .col-lg-3.col-md-3.col-sm-6.col-xs-12 .info-box.bg-cyan.hover-expand-effect .icon %i.material-icons help .content .text NEW TICKETS .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "257"} .col-lg-3.col-md-3.col-sm-6.col-xs-12 .info-box.bg-light-green.hover-expand-effect .icon %i.material-icons forum .content .text NEW COMMENTS .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "243"} .col-lg-3.col-md-3.col-sm-6.col-xs-12 .info-box.bg-orange.hover-expand-effect .icon %i.material-icons person_add .content .text NEW VISITORS .number.count-to{"data-fresh-interval" => "20", "data-from" => "0", "data-speed" => "1000", "data-to" => "1225"} / #END# Widgets / CPU Usage .row.clearfix .col-xs-12.col-sm-12.col-md-12.col-lg-12 .card .header .row.clearfix .col-xs-12.col-sm-6 %h2 CPU USAGE (%) .col-xs-12.col-sm-6.align-right .switch.panel-switch-btn %span.m-r-10.font-12 REAL TIME %label OFF %input#realtime{:checked => "checked", :type => "checkbox"}/ = succeed "ON" do %span.lever.switch-col-cyan %ul.header-dropdown.m-r--5 %li.dropdown %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"} %i.material-icons more_vert %ul.dropdown-menu.pull-right %li %a{:href => "javascript:void(0);"} Action %li %a{:href => "javascript:void(0);"} Another action %li %a{:href => "javascript:void(0);"} Something else here .body #real_time_chart.dashboard-flot-chart / #END# CPU Usage .row.clearfix / Visitors .col-xs-12.col-sm-12.col-md-4.col-lg-4 .card .body.bg-pink .sparkline{"data-fill-color" => "rgba(0, 188, 212, 0)", "data-height" => "92px", "data-highlight-line-color" => "#fff", "data-highlight-spot-color" => "rgb(233, 30, 99)", "data-line-color" => "rgba(255,255,255,0.7)", "data-line-width" => "2", "data-max-spot-color" => "rgb(255,255,255)", "data-min-spot-color" => "rgb(255,255,255)", "data-offset" => "90", "data-spot-color" => "rgb(255,255,255)", "data-spot-radius" => "4", "data-type" => "line", "data-width" => "100%"} 12,10,9,6,5,6,10,5,7,5,12,13,7,12,11 %ul.dashboard-stat-list %li TODAY %span.pull-right %b 1 200 %small USERS %li YESTERDAY %span.pull-right %b 3 872 %small USERS %li LAST WEEK %span.pull-right %b 26 582 %small USERS / #END# Visitors / Latest Social Trends .col-xs-12.col-sm-12.col-md-4.col-lg-4 .card .body.bg-cyan .m-b--35.font-bold LATEST SOCIAL TRENDS %ul.dashboard-stat-list %li \#socialtrends %span.pull-right %i.material-icons trending_up %li \#materialdesign %span.pull-right %i.material-icons trending_up %li #adminbsb %li #freeadmintemplate %li #bootstraptemplate %li \#freehtmltemplate %span.pull-right %i.material-icons trending_up / #END# Latest Social Trends / Answered Tickets .col-xs-12.col-sm-12.col-md-4.col-lg-4 .card .body.bg-teal .font-bold.m-b--35 ANSWERED TICKETS %ul.dashboard-stat-list %li TODAY %span.pull-right %b 12 %small TICKETS %li YESTERDAY %span.pull-right %b 15 %small TICKETS %li LAST WEEK %span.pull-right %b 90 %small TICKETS %li LAST MONTH %span.pull-right %b 342 %small TICKETS %li LAST YEAR %span.pull-right %b 4 225 %small TICKETS %li ALL %span.pull-right %b 8 752 %small TICKETS / #END# Answered Tickets .row.clearfix / Task Info .col-xs-12.col-sm-12.col-md-8.col-lg-8 .card .header %h2 TASK INFOS %ul.header-dropdown.m-r--5 %li.dropdown %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"} %i.material-icons more_vert %ul.dropdown-menu.pull-right %li %a{:href => "javascript:void(0);"} Action %li %a{:href => "javascript:void(0);"} Another action %li %a{:href => "javascript:void(0);"} Something else here .body .table-responsive %table.table.table-hover.dashboard-task-infos %thead %tr %th # %th Task %th Status %th Manager %th Progress %tbody %tr %td 1 %td Task A %td %span.label.bg-green Doing %td John Doe %td .progress .progress-bar.bg-green{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "62", :role => "progressbar", :style => "width: 62%"} %tr %td 2 %td Task B %td %span.label.bg-blue To Do %td John Doe %td .progress .progress-bar.bg-blue{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "40", :role => "progressbar", :style => "width: 40%"} %tr %td 3 %td Task C %td %span.label.bg-light-blue On Hold %td John Doe %td .progress .progress-bar.bg-light-blue{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "72", :role => "progressbar", :style => "width: 72%"} %tr %td 4 %td Task D %td %span.label.bg-orange Wait Approvel %td John Doe %td .progress .progress-bar.bg-orange{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "95", :role => "progressbar", :style => "width: 95%"} %tr %td 5 %td Task E %td %span.label.bg-red Suspended %td John Doe %td .progress .progress-bar.bg-red{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "87", :role => "progressbar", :style => "width: 87%"} / #END# Task Info / Browser Usage .col-xs-12.col-sm-12.col-md-4.col-lg-4 .card .header %h2 BROWSER USAGE %ul.header-dropdown.m-r--5 %li.dropdown %a.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "javascript:void(0);", :role => "button"} %i.material-icons more_vert %ul.dropdown-menu.pull-right %li %a{:href => "javascript:void(0);"} Action %li %a{:href => "javascript:void(0);"} Another action %li %a{:href => "javascript:void(0);"} Something else here .body #donut_chart.dashboard-donut-chart / #END# Browser Usage