Ticket Management System Administration Portal | Part 2 | Dashboard Code

Admin Dashboard

Overview:

Admin Dashboard page tells about total employee, passenger and vehicle are registered in database. its provides brief information about system. 

HTML Code

Following code is used how to build admin dashboard  page.

Code:                                                           

<div id="dashboard_panel" class="col-md-12 display-none">

<div id="dashboard_dropdown" class="card my-3 p-0">

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

<div class="dropleft">

<span id="dashboard_text" class="font-weight-bold"></span>

<button 

class="btn btn-light 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 w-25" 

aria-labelledby="triggerId">

<a id="employee_dropdown" 

class="dropdown-item"

href="#employee_panel">Employee</a>

<a id="user_dropdown" 

class="dropdown-item" 

href="#user_panel">User</a>

<a id="vehicle_dropdown" 

class="dropdown-item" 

href="#vehicle_panel">Vehicle</a>

</div>

</div>

</div>

<div class="card-body">

<div class="row m-1 p-0">

<div id="employee_box"

class="col-md-2 bg-deep-purple-600 m-3 box-shade-1px r-1 p-4">

<span class="text-white">Employee</span><br>

<span class="text-white">Total = 10</span>

</div>

<div id="user_box" 

class="col-md-2 bg-blue-300 m-3 box-shade-1px r-1 p-4">

<span class="text-white">User</span><br>

<span class="text-white">Total = 10</span>

</div>

<div id="vehicle_box" 

class="col-md-2 bg-green-300 m-3 box-shade-1px r-1 p-4">

<span class="text-white">Vehicle</span><br>

<span class="text-white">Total = 10</span>

</div>

</div>

</div>

</div>

</div>

 Output:

Dashboard Example

Dashboard Example