Ticket Management System Administration Portal | Part 3 | Employee Page Code

Employee Page

Overview:

Employee page consists of employee list, new employee, search employee, update employee and delete employee view. update view will be upload soon. 

<div id="employee_panel" 

class="col-md-12 display-none">

<nav id="employee_nav" 

class="nav nav-pills nav-stacked my-3">

<a id="new_employee_nav_link" 

class="nav-link" 

href="#new_employee_panel">New</a>

<a id="search_employee_nav_link" 

class="nav-link" 

href="#search_employee_panel">Search</a>

<a id="update_employee_nav_link" 

class="nav-link" 

href="#update_employee_panel">Update</a>

<a id="delete_employee_nav_link" class="nav-link" href="#delete_employee_panel">Delete</a>

</nav>

<div class="row">

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

<div class="card">

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

<strong id="employee_panel_text"></strong>

</div>

</div>

</div>

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

<div class="card">

<div class="card-body">

<table class="table table-bordered">

<thead class="thead-inverse">

<tr>

<th>EMP ID</th>

<th>Name</th>

<th>Phone No</th>

<th>Status</th>

<th>Email</th></tr></thead>

<tbody>

<tr>

<td scope="row"></td>

<td></td>

<td></td>

<td></td>

<td></td></tr>

</tbody>

</table>

</div>

</div>

</div>

<div id="new_employee_panel" 

class="col-md-12 my-3">

<div class="card">

<div class="card-body">

<div class="row">

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

<div class="form-group">

<label for="my-input">First Name</label>

<input id="my-input" 

class="form-control" 

type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Last Name</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Father Name</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">CNIC</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Phone No</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Status</label>

<input id="my-input" 

class="form-control" 

type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Home Town/Village</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Post Office</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div></div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">District</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<div class="form-group">

<label for="my-input">Email</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">Validation</div>

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

<button class="btn btn-success w-25 float-right">Save</button>

</div>

</div>

</div>

</div>

</div>

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

<div class="card">

<div class="card-body">

<div class="row">

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

<div class="form-group">

<label for="my-input">Enter Employee ID</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

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

Validation

</div>

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

<button class="btn btn-success w-25 float-right">Search</button>

</div>

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

<div class="card p-0">

<div class="card-header p-0 border-0">

<div 

class="alert alert-primary alert-dismissible fade show" role="alert">

<button type="button" 

class="close" 

data-dismiss="alert"

aria-label="Close">

<span aria-hidden="true">&times;</span>

<span class="sr-only">Close</span>

</button>

<strong>Message!</strong> .

</div>

</div>

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

<table class="table table-bordered m-0">

<thead class="thead-inverse">

<tr>

<th class="w-25">ID</th>

<th class="w-25"></th>

<th class="w-25">Name</th>

<th class="w-25"></th>

</tr>

</thead>

<tbody>

<tr>

<td class="w-25">Father Name</td>

<td class="w-25"></td>

<td class="w-25">CNIC</td>

<td class="w-25"></td>

</tr>

<tr>

<td class="w-25">Phone #</td>

<td class="w-25"></td>

<td class="w-25">Job</td>

<td class="w-25"></td>

</tr>

<tr>

<td class="w-25">Address</td>

<td class="w-75" colspan="4"></td>

</tr>

<tr>

<td class="w-25">Email</td>

<td class="w-75" colspan="4"></td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

<div class="card">

<div class="card-body">

update-list

</div>

</div>

</div>

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

<div class="card">

<div class="card-body">

<div class="row">

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

<div class="form-group">

<label for="my-input">Enter Employee ID</label>

<input id="my-input" class="form-control" type="text" name="">

<small class="form-text text-muted">Validation</small>

</div>

</div>

<div class="col-md-6">Validation</div>

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

<button class="btn btn-success w-25 float-right"> Submit </button>

</div>

<div class="col-md-12 mt-3 mb-0">

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

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Output:

Employee View

Employee Collapse View

Employee New View

Employee Search View

Employee Delete View