What is a Dashboard?

A Dashboard is a user interface that visually tracks, analyzes and provides key performance indicators (KPI), metrics and key data points to monitor business or specific processes. 

What is a Travel Dashboard?

Travel Dashboard is a tool to summarize data trends related to air, car rental, hotel, cruise, and vacation packages. Using Travel Dashboard users can configure settings for different environments related to GDS, User management, Configuring TMCs, Travel Agency setup with policies, Vehicle configuration and can also set Location configuration.

Building a Travel Dashboard

There are many factors that need to be taken into account when deciding which elements to include in a dashboard. Some considerations are more relevant for certain processes, and hence it is quite difficult to give specific guidelines that will be suitable for every contingency on how to build a better Dashboard. However, before setting out to create any kind of dashboard there are certain questions you need to ask to understand the ‘story’ for the dashboard is going to tell, how that story can be told as clearly as possible, and who will be the target audience.

Include only the most important content

Key features of the Travel Dashboard

• User Management
  • Corporate
  • Agency
• Service Configuration
• Rate configuration
• Bookings
• Site Visitors
• Policy Management
• Partner Approval
• Reports

Implementation of Dashboard using Asp.Net MVC

Areas in ASP.NET MVC allows us to separate a Web Application into smaller modules and organize the code. For the dashboard,  every module can be created as a separate area and that gives the flexibility to maintain the module code separately.

Step 1: Right click on the project, click Add and click on Area

Step 2: Enter the Area name and click Add

Step 3: Area gets created and Add Controller to Areas > Dashboard

Step 4: Now that we have Controllers created, right-click on Index action and click Add View

Set the start page in DashboardAreaRegistration.cs

Set the start page in DashboardAreaRegistration.cs

public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Dashboard_default",
"Dashboard/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional },
<font style="background-color: #ffff00">new string[] { "DashboardApplication.Areas.Dashboard.Controllers" }
</font> );

 Similarly add folders for different modules with MVC components Controllers, Views, and Models.

In total we have five Areas , all areas have AreaRegistration.cs that are AgencyUserAreaRegistraion.cs, CorporateUserAreaRegistration.cs, RateConfigurationAreaRegistration.cs, DashboardAreaRegistration.cs and ServiceConfigurationAreaRegistration.cs classes respectively and all are inheriting AreaRegistration class, and also a route defined for the Area. These routes should be registered inside the Application_Start() method of Global.asax file.

A dashboard controller needs to be created to handle all the dashboard activities. Each widget will be treated as an individual child action. This child action is a type of action in the controller, where it can only be called from its parent.

DashboardController.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace AspNetMVCDashboard.Controllers 
{ 
public class DashboardController :Controller 
{ 
// 
// GET: /Dashboard/ 

public ActionResult Index() 
{ 
return View(); 
} 
#region Child-Only 

[ChildActionOnly] 
[OutputCache(Duration = 1, VaryByParam = "None")] 
public ActionResult UsersConfiguration() 
{ 
return View(); 
} 
[ChildActionOnly] 
[OutputCache(Duration = 1, VaryByParam = "None")] 
public ActionResult RecentBookings() 
{ 
return View(); 
} 
[ChildActionOnly] 
[OutputCache(Duration = 1, VaryByParam = "None")] 
public ActionResult ServiceConfiguration() 
{ 
return View(); 
} 
[ChildActionOnly] 
[OutputCache(Duration = 1, VaryByParam = "None")] 
public ActionResult SiteVisitors() 
{ 
return View(); 
} 
#endregion 
} 
}

 SiteVisitors.cshtml

<script type="text/javascript"> 
google.load("visualization", "1", { packages: ["corechart"] }); 
google.setOnLoadCallback(drawVisitorChart); 
function drawVisitorChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Year'); 
data.addColumn('number', 'New Visitors'); 
data.addColumn('number', 'Return Visitors'); 
data.addRows([ 
['2017', 1000, 400], 
['2018', 1170, 460], 
['2019', 860, 580], 
['2020', 1030, 540] 
]); 

var options = { 
title: 'Site Visitors' 
}; 

var chart = new google.visualization.LineChart(document.getElementById('chartVisitors')); 
chart.draw(data, options); 
} 
</script> 
<div class="dashboardItem"> 
<div class="dashboardItemHeader">Site Visitors</div> 
<div class="dashboardItemBody"> 
<div id="chartVisitors" style=""></div> 
</div> 
</div>

 Index.cshtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="<%= Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script> 
<link href="<%= Url.Content("~/Content/site.css") %>" rel="stylesheet" type="text/css" /> 
<link href="<%= Url.Content("~/Content/dashboard.css") %>" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
</head> 
<body> 
<div class="pageHeader"> 
<h1>Dashboard </h1> 
</div> 
<div class="pageBody"> 
<div class="dashboard"> 
<div class="dashboard3Col"> 
<div class="dashboardCol"> 
<% Html.RenderAction("User Configuration", "DashBoard"); %> 
<% Html.RenderAction("Recent Bookings", "DashBoard"); %> 
</div> 
<div class="dashboardCol"> 
<% Html.RenderAction("Rate Configuration", "DashBoard"); %> 
<% Html.RenderAction("Service Configuration", "DashBoard"); %> 
</div> 
<div class="dashboardCol"> 
<% Html.RenderAction("Site Visitors", "DashBoard"); %> 
</div> 
<div class="dashboardFooter"></div> 
</div> 
</div> 
</div> 
</body> 
</html>

 RateConfig.cshtml

@{ 
Layout = "~/Areas/RateConfiguration/RateConfig.cshtml"; 
} 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
<title></title> 
</head> 
<body> 
<div> @Html.ActionLink("Dashboard", "Home")</div>
<div class="dashboardItem"> 
<div class="dashboardItemHeader">Rate Configuration</div> 
<div class="dashboardItemBody"> 
<table class="tbl"> 
<tbody> 
<tr> 
<td>Select Corporate</td> 
<td> 
<select id="SelectCorp"> 
<option>ABC Travels</option> 
<option>Mars Corps</option> 
<option>ALink Travels</option> 
</select> 
</td> 
<td>Rate Type</td> 
<td> 
<select id="SelectRateType"> 
<option>Hourly</option> 
<option>Flat</option> 
<option>Retail</option> 
</select> 
</td> 
</tr> 
</tbody> 
</table> 
<input id="Configure" type="submit" value="SAVE" /> 
</div> 
</div> 
</body> 
</html>

Output:

Conclusion:

In a single click, we can visualize and dissect complex data in a dashboard with the help of dynamic filtering applied across every module. Complete visibility of your travel spends with consolidated data from multiple sources (GDS and partner agencies).

Optimize future travel spend with predictive forecasting and travel trend analysis by easily identifying possible savings through purchasing and booking behaviors. Identify cost savings opportunities pre-ticketing to reduce spend.