EOS/Views/Home/Index.cshtml
Nidhi Bhargava f0c1ab20e1 code push
2025-09-04 16:25:07 +05:30

776 lines
32 KiB
Plaintext

@{
ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["Title"];
Layout = "~/Views/Shared/_Layout.cshtml";
}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Evolve</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Global stylesheets -->
<style type="text/css">
/*.dasboard-container{width: 1360px; margin:20px auto 0;display: table;font-family: 'Poppins', sans-serif;}*/
.dasboard-container {
margin: 0 auto !important;
width: 1360px;
display: table;
font-family: 'Poppins', sans-serif;
}
.dasboard-container img {
max-width: 100%;
}
.dashboard-left {
width: 28%;
float: left;
}
.dashboard-right {
width: 65%;
float: left;
padding-left: 30px;
}
.block-performance {
margin-bottom: 15px;
}
.block-performance-table {
width: 100%;
border: 1px solid #000;
border-bottom: none;
padding: 0;
margin: 0;
}
.block-performance-table tr th, .block-performance-table tr td {
padding: 5px;
text-align: left;
border-bottom: 1px solid #000;
}
.dashboard-inner-left {
width: 40%;
float: left;
}
.dashboard-inner-right {
width: 56%;
float: left;
padding-left: 30px;
}
.dashboard-left {
background: #f7f6f6ee;
padding: 10px 15px;
}
.dashboard-left h2 {
font-size: 20px;
margin: 6px 0;
}
.block-performance-table tr th {
background: #575757;
color: #fff;
font-size: 12px;
padding: 6px 5px !important;
font-weight: 500;
}
.block-performance-table tr td {
font-size: 13px;
}
.block-performance-table tbody tr {
background: #CED4EA;
}
.block-performance-table tbody tr:nth-of-type(odd) {
background: #E8EBF5;
}
.dashboard-inner-left h2, .breakdown-status h2 {
font-size: 20px;
color: #000;
margin-top: 10px;
}
.dashboard-inner-right h2 {
font-size: 20px;
color: #000;
margin-top: 10px;
}
.block-performance-table tr td:first-child {
border-right: 2px solid #fff;
}
.block-performance-table tr th:first-child {
border-right: 2px solid #fff;
}
.block-performance-table.five-table tr th {
border-right: 2px solid #fff;
padding: 2px 5px !important;
font-size: 13px;
}
.block-performance-table.five-table tr td {
border-right: 2px solid #fff;
padding: 2px 5px;
font-size: 13px;
}
.block-performance-table.five-table tr td:last-child {
border-right: 0;
}
.block-performance-table.five-table tr th:last-child {
border-right: 0;
}
.breakdown-status-block {
width: 14.2%;
margin-right: 15px;
display: inline-block;
}
.breakdown-status-block-1 {
width: 100%;
margin-right: 9px;
display: inline-block;
margin-bottom: 12px;
}
.breakdown-status-block:last-child {
margin-right: 0;
}
.breakdown-status-block-1:last-child {
margin-right: 0;
}
.breakdown-status-block .card {
padding: 4px 8px;
color: #fff;
}
.breakdown-status-block-1 .card {
padding: 8px;
color: #fff;
}
.breakdown-status-block .card h3 {
font-size: 20px;
margin: 4px 0 0;
}
.breakdown-status-block .card span {
font-size: 16px;
}
.breakdown-status-block-1 h3 {
margin: 10px 0 10px;
display: inline-block;
width: 50%;
font-size: 20px;
font-weight: 500;
vertical-align: middle;
}
.breakdown-status-block-1 span {
width: 48%;
display: inline-block;
text-align: right;
vertical-align: middle;
font-size: 16px;
}
.bg-teal {
background-color: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#173b89+0,1b3f8d+6,1c4191+7,234a99+20,204e9c+21,2f63b6+49,2d65b8+50,3169bc+56,306dc0+57,3a7cd0+77,387ed3+78,3f89de+91,408ae3+92,4090e7+98,4491e9+100 */
background: #173b89; /* Old browsers */
background: -moz-linear-gradient(top, #173b89 0%, #1b3f8d 6%, #1c4191 7%, #234a99 20%, #204e9c 21%, #2f63b6 49%, #2d65b8 50%, #3169bc 56%, #306dc0 57%, #3a7cd0 77%, #387ed3 78%, #3f89de 91%, #408ae3 92%, #4090e7 98%, #4491e9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #173b89 0%,#1b3f8d 6%,#1c4191 7%,#234a99 20%,#204e9c 21%,#2f63b6 49%,#2d65b8 50%,#3169bc 56%,#306dc0 57%,#3a7cd0 77%,#387ed3 78%,#3f89de 91%,#408ae3 92%,#4090e7 98%,#4491e9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #173b89 0%,#1b3f8d 6%,#1c4191 7%,#234a99 20%,#204e9c 21%,#2f63b6 49%,#2d65b8 50%,#3169bc 56%,#306dc0 57%,#3a7cd0 77%,#387ed3 78%,#3f89de 91%,#408ae3 92%,#4090e7 98%,#4491e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173b89', endColorstr='#4491e9',GradientType=0 ); /* IE6-9 */
;
}
.bg-assigned {
background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d6363+0,2b6664+6,2a6768+7,276b6a+13,266e6d+14,247674+27,227879+28,1b7f7d+42,1b8183+42,188484+49,168785+50,158986+56,148c8b+57,128e8c+63,10908f+64,109592+70,0e9696+71,0d9998+77,0b9b9b+78,07a19f+85,05a4a0+91,05a5a5+92,02a8a6+98,01abaa+99,01abaa+100 */
background: #2d6363; /* Old browsers */
background: -moz-linear-gradient(top, #2d6363 0%, #2b6664 6%, #2a6768 7%, #276b6a 13%, #266e6d 14%, #247674 27%, #227879 28%, #1b7f7d 42%, #1b8183 42%, #188484 49%, #168785 50%, #158986 56%, #148c8b 57%, #128e8c 63%, #10908f 64%, #109592 70%, #0e9696 71%, #0d9998 77%, #0b9b9b 78%, #07a19f 85%, #05a4a0 91%, #05a5a5 92%, #02a8a6 98%, #01abaa 99%, #01abaa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2d6363 0%,#2b6664 6%,#2a6768 7%,#276b6a 13%,#266e6d 14%,#247674 27%,#227879 28%,#1b7f7d 42%,#1b8183 42%,#188484 49%,#168785 50%,#158986 56%,#148c8b 57%,#128e8c 63%,#10908f 64%,#109592 70%,#0e9696 71%,#0d9998 77%,#0b9b9b 78%,#07a19f 85%,#05a4a0 91%,#05a5a5 92%,#02a8a6 98%,#01abaa 99%,#01abaa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2d6363 0%,#2b6664 6%,#2a6768 7%,#276b6a 13%,#266e6d 14%,#247674 27%,#227879 28%,#1b7f7d 42%,#1b8183 42%,#188484 49%,#168785 50%,#158986 56%,#148c8b 57%,#128e8c 63%,#10908f 64%,#109592 70%,#0e9696 71%,#0d9998 77%,#0b9b9b 78%,#07a19f 85%,#05a4a0 91%,#05a5a5 92%,#02a8a6 98%,#01abaa 99%,#01abaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d6363', endColorstr='#01abaa',GradientType=0 ); /* IE6-9 */
;
}
.bg-progress {
background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9c667+0,f79621+100;Orange+3D+%234 */
background: #f9c667; /* Old browsers */
background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f9c667 0%,#f79621 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */
;
}
.bg-Closed {
background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2aa91a+0,2faa1c+6,33aa1c+7,35ac1e+13,3cab1e+19,3eae1e+27,42ae1c+28,48af1f+34,48b01b+36,4daf1c+41,50b21d+49,55b21c+50,56b31d+56,5ab41e+57,5fb31f+62,60b51c+64,61b61d+70,66b71c+71,6db71c+78,6fb91c+86,74b91e+91,78b91d+92,7abb1f+98,7ebb1f+100 */
background: #2aa91a; /* Old browsers */
background: -moz-linear-gradient(top, #2aa91a 0%, #2faa1c 6%, #33aa1c 7%, #35ac1e 13%, #3cab1e 19%, #3eae1e 27%, #42ae1c 28%, #48af1f 34%, #48b01b 36%, #4daf1c 41%, #50b21d 49%, #55b21c 50%, #56b31d 56%, #5ab41e 57%, #5fb31f 62%, #60b51c 64%, #61b61d 70%, #66b71c 71%, #6db71c 78%, #6fb91c 86%, #74b91e 91%, #78b91d 92%, #7abb1f 98%, #7ebb1f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2aa91a 0%,#2faa1c 6%,#33aa1c 7%,#35ac1e 13%,#3cab1e 19%,#3eae1e 27%,#42ae1c 28%,#48af1f 34%,#48b01b 36%,#4daf1c 41%,#50b21d 49%,#55b21c 50%,#56b31d 56%,#5ab41e 57%,#5fb31f 62%,#60b51c 64%,#61b61d 70%,#66b71c 71%,#6db71c 78%,#6fb91c 86%,#74b91e 91%,#78b91d 92%,#7abb1f 98%,#7ebb1f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2aa91a 0%,#2faa1c 6%,#33aa1c 7%,#35ac1e 13%,#3cab1e 19%,#3eae1e 27%,#42ae1c 28%,#48af1f 34%,#48b01b 36%,#4daf1c 41%,#50b21d 49%,#55b21c 50%,#56b31d 56%,#5ab41e 57%,#5fb31f 62%,#60b51c 64%,#61b61d 70%,#66b71c 71%,#6db71c 78%,#6fb91c 86%,#74b91e 91%,#78b91d 92%,#7abb1f 98%,#7ebb1f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aa91a', endColorstr='#7ebb1f',GradientType=0 ); /* IE6-9 */
;
}
.bg-danger {
background-color: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c8251c+0,ca271e+6,cc2c20+7,d83828+27,db3f29+35,e44c34+55,e75035+57,ea5338+62,ea5535+65,ee5939+69,f15c3b+77,f3613c+78,f4653d+85,f96a42+91,f86b40+93,fe7146+100 */
background: #c8251c; /* Old browsers */
background: -moz-linear-gradient(top, #c8251c 0%, #ca271e 6%, #cc2c20 7%, #d83828 27%, #db3f29 35%, #e44c34 55%, #e75035 57%, #ea5338 62%, #ea5535 65%, #ee5939 69%, #f15c3b 77%, #f3613c 78%, #f4653d 85%, #f96a42 91%, #f86b40 93%, #fe7146 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #c8251c 0%,#ca271e 6%,#cc2c20 7%,#d83828 27%,#db3f29 35%,#e44c34 55%,#e75035 57%,#ea5338 62%,#ea5535 65%,#ee5939 69%,#f15c3b 77%,#f3613c 78%,#f4653d 85%,#f96a42 91%,#f86b40 93%,#fe7146 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #c8251c 0%,#ca271e 6%,#cc2c20 7%,#d83828 27%,#db3f29 35%,#e44c34 55%,#e75035 57%,#ea5338 62%,#ea5535 65%,#ee5939 69%,#f15c3b 77%,#f3613c 78%,#f4653d 85%,#f96a42 91%,#f86b40 93%,#fe7146 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8251c', endColorstr='#fe7146',GradientType=0 ); /* IE6-9 */
;
}
.fs-15 {
font-size: 15px;
}
.hidden {
display: none;
}
.visible {
display: block;
}
.div {
border: 1px solid black;
width: 100px;
}
#sel {
width: 100%;
}
.arrow {
float: right;
}
.datesection span.k-datepicker {
width: 120px !important;
background-color: #E8EBF5 !important;
}
.datesection span {
display: inline-block;
}
.fright.Response_RightPanel span {
color: #555;
}
.dashboard {
overflow-x: auto;
overflow-y: auto;
}
.k-block, .k-header, .k-grid-header, .k-toolbar, .k-grouping-header, .k-pager-wrap, .k-button, .k-draghandle {
/*background:url('Default/over1.png')repeat-x scroll 50% 30% #5C9CCC;*/
color: #000;
/*background-color:#4a8bc2;*/
background-color: #dedede !important; /*navi*/
/*background-color:#1b3f94 !important;*/ /*navi*/
/*background-color:#1b3f94;
background-color:#ee2e22;*/
}
</style>
<!-- /global stylesheets -->
<section class="dasboard-container">
<div class="block-performance">
<table class="block-performance-table five-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Date</th>
<th>Region</th>
<th>Dealer </th>
<th>Vertical</th>
<th>Emission Norms</th>
<th>Product Variant</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:23%;">
<div class="fright Response_RightPanel datesection">
<span>From:</span>
@(Html.Kendo().DatePicker()
.Name("monthpickerFrom")
.Start(CalendarView.Month)
.Depth(CalendarView.Month)
.Format(System.Configuration.ConfigurationManager.AppSettings["dateFormat"])
.Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1))
.Max(DateTime.Now)
.HtmlAttributes(new { style = "width:150px", type = "text" })
.Events(e =>
{
// e.Change("onChangeDateSelection");
})
)
@(Html.Kendo().DatePicker()
.Name("monthpickerTo")
.Start(CalendarView.Month)
.Depth(CalendarView.Month)
.Format(System.Configuration.ConfigurationManager.AppSettings["dateFormat"])
.Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime.Now.Day))
.Max(DateTime.Now)
.HtmlAttributes(new { style = "width:150px", type = "text" })
.Events(e =>
{
// e.Change("onChangeDateSelection");
})
)
</div>
</td>
<td t id="tdRegion">
<select id="ddlRegion" name="Region" multiple="multiple" onchange="onRegionChange();" data-placeholder="-Select-">
</select>
</td>
<td id="tdlDealer">
<select id="ddlDealer" name="Dealer" multiple="multiple" data-placeholder="-Select-">
</select>
</td>
<td>
<select id="ddlVertical" name="ddlVertical" multiple="multiple" data-placeholder="-Select-">
</select>
</td>
<td id="tdEmission">
<select id="ddlEmission" name="ddlEmission" multiple="multiple" data-placeholder="-Select-">
</select>
</td>
<td id="tdProdcutVariant" style="width:12%;">
<select id="ddproductVariant" name="ddproductVariant" onchange="getVehicleModelTaggingfilter();">
<option value="Select" selected>Select</option>
<option value="Diesel">Diesel</option>
<option value="ELECTRIC">ELECTRIC</option>
<option value="CNG">CNG</option>
</select>
</td>
<td>
<input type="submit" class="button_blue CustomeBtn" value="Submit" onclick="showDashboardData()">
</td>
</tr>
</tbody>
</table>
</div>
<div class="dashboard-left" style="">
<div class="block-performance">
<table class="block-performance-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="
">Total Breakdown Tickets</th>
<th id="tdBreakDownTickets">-</th>
</tr>
</thead>
<tbody>
<tr>
<td>Open Tickets</td>
<td id="tdOpenTickets">-</td>
</tr>
<tr>
<td>Open Tickets&gt; 24 Hrs</td>
<td id="tdOpenTicket24hours">-</td>
</tr>
<tr>
<td>Average VAN Reach Time (HH:MM)</td>
<td id="tdAverageVanReachTime">-</td>
</tr>
<tr>
<td>Average Resolution Time (HH:MM)</td>
<td id="tdAverageResolutionTime">-</td>
</tr>
<tr>
<td>C-Sat%</td>
<td id="tdCSat">-</td>
</tr>
</tbody>
</table>
</div>
<div class="block-performance">
<table class="block-performance-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>SLA ( VAN Reach Time)</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Within 1 Hr</td>
<td id="tdSLA1hrs">-</td>
</tr>
<tr>
<td>Within 2 Hr</td>
<td id="tdSLA2hrs">-</td>
</tr>
<tr>
<td>Within 3 Hr</td>
<td id="tdSLA3hrs">-</td>
</tr>
<tr>
<td>&gt;3 Hr</td>
<td id="tdSLAMoreThan3hrs">-</td>
</tr>
</tbody>
</table>
</div>
<div class="block-performance">
<table class="block-performance-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>SLA ( Resolution Time)</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Within 1 Hr</td>
<td id="tdSLARes1hrs">50%</td>
</tr>
<tr>
<td>Within 3 Hr</td>
<td id="tdSLARes3hrs">50%</td>
</tr>
<tr>
<td>Within 5 Hr</td>
<td id="tdSLA5hrs">50%</td>
</tr>
<tr>
<td>Within 7 Hr</td>
<td id="tdSLA7hrs">50%</td>
</tr>
<tr>
<td>Within 10 Hr</td>
<td id="tdSLA10hrs">50%</td>
</tr>
<tr>
<td>Within 12 Hr</td>
<td id="tdSLA12hrs">-</td>
</tr>
<tr>
<td>Within 15 Hr</td>
<td id="tdSLA16hrs">-</td>
</tr>
<tr>
<td>Within 18 Hr</td>
<td id="tdSLA18hrs">-</td>
</tr>
<tr>
<td>&gt;18 Hr</td>
<td id="tdSLAMoreThan18hrs">-</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="dashboard-right">
<div class="breakdown-status">
<h2>Breakdown Ticket by Status: Total <span id="spntotalbreakdown">-</span></h2>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-assigned text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdAssignedTicketCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Assigned</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-teal text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdTripStartCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Trip start</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-progress text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdInprogressTicketCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">In progress</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-teal text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdPreclosureCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Preclosure</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-Closed text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdClosedTicketCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Closed</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block">
<div>
<!-- Members online -->
<div class="card bg-teal text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdopplostTicketCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Opp Lost</span>
</div>
</div>
</div>
</div>
</div>
@*<div class="breakdown-status-block">
<div>
<div class="card bg-danger text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdDeclinedTicketCount">-</h3>
<span class="badge badge-dark badge-pill align-self-center ml-auto">Declined</span>
</div>
</div>
</div>
</div>
</div>*@
</div>
<div class="dasboard-inner-section">
<div class="dashboard-inner-left">
<div class="block-performance">
<h2>Tab Status</h2>
<div>
<div class="breakdown-status-block-1">
<div>
<!-- Members online -->
<div class="card bg-teal text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdActiveCount">-</h3>
<span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">Total Active TABs</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block-1">
<div>
<!-- Members online -->
<div class="card bg-assigned text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdTABsBusyCount">-</h3>
<span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs Busy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="breakdown-status-block-1">
<div>
<!-- Members online -->
<div class="card bg-progress text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdTABFreeCount">-</h3>
<span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs Free</span>
</div>
</div>
</div>
</div>
</div>
<div class="breakdown-status-block-1">
<div>
<!-- Members online -->
<div class="card bg-Closed text-white">
<div class="card-body">
<div class="d-flex">
<h3 class="font-weight-semibold mb-0" id="tdTABsOfflineMorethan7Days">-</h3>
<span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs offline > 7 Days</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-inner-right">
<div class="block-performance">
<h2>Top Dealer- Ticket count</h2>
<table class="block-performance-table five-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Dealer Name</th>
<th>Region</th>
<th width="25%" nowrap="">Ticket Count</th>
</tr>
</thead>
<tbody id="tdealer">
<tr>
<td>Dealer 1</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 2</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 3</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 4</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 5</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 6</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 7</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 8</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 9</td>
<td>North-1</td>
<td>40</td>
</tr>
<tr>
<td>Dealer 10</td>
<td>North-1</td>
<td>40</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="dashboard-graph-section" style="clear: both;">
<div id="barchart_material"></div>
</div>
</div>
</section>
@Scripts.Render("~/bundles/jsDashboard")
@*<link href="~/Content/kendo/kendo.dashboard.min.css" rel="stylesheet" />
<link href="~/Content/css/jquery.alerts.css" rel="stylesheet" />*@
<script src="~/Scripts/jquery.ui.draggable.js"></script>
<script src="~/Scripts/jquery.alerts.js"></script>
<script type="text/javascript" src="~/Scripts/loader.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
@*<script src="@Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cycle.all.js")" type="text/javascript"></script>
<script src="~/Scripts/gradientTransition.js"></script>
<script src="../../Scripts/Home/Dashboard.js"></script>*@
<script type="text/javascript">
var securityToken = '@ViewBag.SecurityToken';
var UtcMinutes = '@ViewBag.UtcMinutes';
var userId = '@ViewBag.Userid';
var userRole = '@ViewBag.UserRole';
var dashboardType = 'all';
//refreshDashboard();
</script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
// google.charts.setOnLoadCallback(drawStuff);
function showSelect(classname) {
document.getElementById('sel').className = classname;
}
</script>
@*<script src="~/Scripts/multiselect-dropdown.js"></script>*@