Ticket Management System Passenger Portal | Part 02 | Dashboard

Client Portal Dashboard

Overview

First of all, you need to create a separate HTML file. Copy code from the master page and paste it into a file. then copy this code and paste it into the mention area.

---

Related Topic

Master Page

 Overview:

Html Code:

<div id = "dashboard_section" class = "col-md-12 display-none p-0" >

<div class = "card" >

<div class = "card-header bg-grey-500" >

<div class = "dropleft" >

<strong id = "dashboard_heading_text" class = "text-white" > </strong>

<button class = "btn bg-grey-500 dropdown float-right" type = "button" id = "triggerId" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >

<i class = "fas fa-ellipsis-v text-gray-400" > </i>

</button>

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

<a id = "reserved_ticket_link" class = "dropdown-item" href = "#" > Reserved Ticket </a>

<a id = "cancel_ticket_link" class = "dropdown-item" href = "#" > Cancel Ticket </a>

<a id = "paid_amount_link" class = "dropdown-item" href = "#" > Paid Amount </a>

<a id = "payable_amount_link" class = "dropdown-item" href = "#" > Payable Amount </a>

<a id = "return_amount_link" class = "dropdown-item" href = "#" > Return Amount </a>

</div>

</div>

</div>

<div class = "card-body" >

<div class = "row" >

<div class = "col-sm-2 p-3 m-3 bg-blue-grey-500 rounded text-white" >  Reserved Ticket </div>

<div class = "col-sm-2 p-3  m-3 bg-brown-500 rounded text-white">  Cancel Ticket </div>

<div class = "col-sm-2 p-3  m-3 bg-cyan-500 rounded text-white" > Paid Amount </div>

<div class = "col-sm-2 p-3  m-3 bg-orange-500 rounded text-white" > Payable Amount </div>

<div class = "col-sm-2 p-3  m-3 bg-teal-500 rounded text-white" >

Return Amount </div>

</div>

<div class = "row" >

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

<div class = "card" >

<div class = "card-body" >

<strong> Reserved Ticket </strong>

</div>

</div>

</div>

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

<div class = "card" >

<div class = "card-body" >

<strong> Cancel Ticket </strong>

</div>

</div>

</div>

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

<div class = "card" >

<div class = "card-body" >

<strong> Paid Amount </strong>

</div>

</div>

</div>

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

<div class = "card" >

<div class = "card-body" >

<strong> Payable Amount </strong>

</div>

</div>

</div>

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

<div class = "card" >

<div class = "card-body" >

<strong> Return Amount </strong>

</div>

</div>

</div>

</div>

</div>

</div>

<div class = "row my-3" >

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

<div class = "card" >

<div class = "card-header bg-grey-500" >

<strong> Notification </strong>

</div>

<div class = "card-body" >

<div class = "alert alert-success" role = "alert" > Content </div>

</div>

</div>

</div>

</div>

</div>

 Output:

Dashboard Collapse View

Dashboard View