To highlight a badge with agent's status in dashboard agent cell

style/app.scss

@@ -210,6 +210,7 @@
     background: white;
     vertical-align: top;
     width: 240px;
+    position: relative;
 }
 
 #dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .agent_header {
@@ -229,6 +230,18 @@
     width: 210px;
 }
 
+.agent_header_badge {
+    position: absolute;
+    border: 1px solid #555;
+    display: inline-block;
+    background: white;
+    color: #555;
+    border-radius: 0 5px 0 5px;
+    top: -8px;
+    right: -7px;
+    padding: 2px 8px;
+}
+
 #dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .agent_header .fa {
     margin-right: 5px;
 }
@@ -295,12 +308,22 @@
             width: 100%;
             box-sizing: border-box;
         }
+
+        .agent_header_badge {
+            border-width: 2px;
+            color: white;
+        }
     }
 
     &.ready {
         .row_data.call_time .data_value {
             color: #22A5FF;
         }
+
+        .agent_header_badge {
+            border-color: white;
+            background-color: #22A5FF;
+        }
     }
 
 
@@ -314,6 +337,11 @@
         .row_data.call_time .data_value{
             color: #ff7733;
         }
+
+
+        .agent_header_badge {
+            border-color: #ff7733;
+        }
     }
 
     &.busy {
@@ -326,6 +354,10 @@
         .row_data.call_time .data_value {
             color: #ffbb33;
         }
+
+        .agent_header_badge {
+            border-color: #ffbb33;
+        }
     }
 
     &.wrapup {
@@ -338,6 +370,10 @@
         .row_data.call_time .data_value {
             color: #ffbb33;
         }
+
+        .agent_header_badge {
+            border-color: #ffbb33;
+        }
     }
 
     &.handling {
@@ -350,6 +386,10 @@
         .row_data.call_time .data_value{
             color: #62c462;
         }
+
+        .agent_header_badge {
+            border-color: #62c462;
+        }
     }
 
     &.connecting {
@@ -362,6 +402,10 @@
         .row_data.call_time .data_value{
             color: #3366cc;
         }
+
+        .agent_header_badge {
+            border-color: #3366cc;
+        }
     }
 }
 

views/agents_dashboard.html

@@ -8,7 +8,8 @@
             <div class="agent_wrapper {{status}}" id="{{id}}" data-queues="{{queues}}">
                 <div class="agent_header">
                     <span class="fa fa-user"/>
-                    {{first_name}} {{last_name}} ( {{status}} )
+                    {{first_name}} {{last_name}}
+                    <span class="agent_header_badge">{{status}}</span>
                 </div>
                 <div class="agent_data">
                     <div class="row_data call_time">