Ticket Management System Employee Portal | Part 2 | Dashboard

Employee Dashboard

Overview:

Employee Portal dashboard contain the brief information of employee. For example how many seat of vehicle, how many seats are available for passengers, how many seats are cancel and earning.

<div id = "dashboard_page" class = "col-md-12 my-3 display-none" >

<div class = "card" >

<div class = "card-body" >

<div class = "row p-0" >

<div class = "col-md-12" >

<div class = "card" >

<div class = "card-header" >

<div class = "dropleft">

<button class = "btn btn-light dropdown float-right" 

type = "button"

id = "triggerId" 

data-toggle = "dropdown" 

aria-haspopup = "true"

aria-expanded = "false" >

<i class = "fa fa-ellipsis-v" aria-hidden = "true" > </i> </button>

<div class = "dropdown-menu" aria-labelledby = "triggerId" >

<a id = "total_seat_panel_show" 

class = "dropdown-item"

href = "#total_seat_panel" > Total Seats </a>

<a id = "available_seat_panel_show" class = "dropdown-item"

href = "#available_seat_panel" > Available Seat </a>

<a id = "cancel_seat_panel_show" class = "dropdown-item"

href = "#cancel_seat_panel" > Cancel Seats </a>

<a id = "total_earning_panel_show" class = "dropdown-item"

href = "#total_earning_panel" > Earning </a>

</div>

</div>

</div>

<div class = "card-body m-0" >

<div class = "row text-white font-weight-bold m-0" >

<div id = "total_seat_progress_bar"

class = "col-sm-2 bg-blue-700 m-3 p-3 rounded" > Seats </div>

<div id = "available_seat_progress_bar" class = "col-sm-2 bg-teal-700 m-3 p-3 rounded" > Avail Seats </div>

<div id = "cancel_seat_progress_bar"

class = "col-sm-2 bg-lime-700 m-3 p-3 rounded" > Cancel Seat </div>

<div id = "total_earning_progress_bar" class = "col-sm-2 bg-amber-700 m-3 p-3 rounded" > Earning </div>

</div>

</div>

<div id = "panel_heading" class = "card-footer" >

 <strong id = "panel_heading_text" > </strong>

</div>

<div id = "panel_container" class = "card-body border" >

<div class = "row" >

<div id = "total_seat_panel" class = "col-md-12 my-3" >

<div class = "card" >

<div class = "card-body" >

<label for = "" class = "text-muted"> Total Seats </label>

<div class = "progress mb-3" >

<div class = "progress-bar bg-primary" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > 100%

</div>

</div>

</div>

</div>

</div>

<div id = "available_seat_panel" class = "col-md-12 my-3" >

<div class = "card" >

<div class = "card-body" >

<label for = "" class = "text-muted"> Total Seats </label>

<div class = "progress mb-3">

<div class = "progress-bar bg-primary" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > 100% </div>

</div>

<label for = "" class = "text-muted"> Available Seats </label>

<div class = "progress mb-3">

<div class = "progress-bar bg-teal-700" role = "progressbar" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" > 10% </div>

</div>

<label for = "" class = "text-muted" > Booked Seats </label>

<div class = "progress mb-3" >

<div class = "progress-bar bg-brown-700"

role = "progressbar" style = "width: 90%" aria-valuenow = "90" aria-valuemin = "0" aria-valuemax = "100" > 90% </div>

</div>

</div>

</div>

</div>

<div id = "cancel_seat_panel" class = "col-md-12 my-3" >

<div class = "card" >

<div class = "card-body" >

<label for = "" class = "text-muted"> Total Seats </label>

<div class = "progress mb-3" >

<div class = "progress-bar bg-primary" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > 100% </div>

</div>

<label for = "" class = "text-muted"> Cancel Seats </label>

<div class = "progress mb-3">

<div class = "progress-bar bg-lime-700" role = "progressbar" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100"> 20% </div>

</div>

</div>

</div>

</div>

<div id = "total_earning_panel" class = "col-md-12 my-3" >

<div class = "card" >

<div class = "card-body" >

<label for = "" class = "text-muted"> Estimated Earning </label>

<div class = "progress mb-3" >

<div class = "progress-bar bg-primary" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > 100% </div>

</div>

<label for = "" class = "text-muted"> Actual Earing </label>

<div class = "progress mb-3">

<div class = "progress-bar bg-teal-700" role = "progressbar" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" > 10% </div>

</div>

<label for = "" class = "text-muted"> Less Than Estimated Earning </label>

<div class = "progress mb-3" >

<div class = "progress-bar bg-red-700" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > 100% </div>

</div>

<label for = "" class = "text-muted"> Greater Than Estimated

Earing </label>

<div class = "progress mb-3">

<div class = "progress-bar bg-green-700" role = "progressbar" style = "width: 10%" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" > 10% </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

 Output:

Employee Dashboard Collapse Example

Employee Dashboard Example