%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/sidebar %>
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<!-- Breadcrumb starts-->
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title"><%= (employee.firstName !== null ? employee.firstName : '') + ' ' + ' ' + (employee.lastName !== null ? employee.lastName : '') %></h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<li class="breadcrumb-item"><a href="/employee/all">Employees</a>
</li>
<li class="breadcrumb-item active">Employee Details
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<%- format_messages(messages) %>
<section id="dom">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<!-- <h4 class="card-title">DOM / jQuery events</h4> -->
<a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li>
<span class="dropdown">
<button id="" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary btn-sm dropdown-toggle dropdown-menu-right"><i class="icon icon-pencil"></i></button>
<span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
<!-- <a data-toggle="modal" data-target="#editEmployeeDetail" class="dropdown-item"><i class="icon icon-pencil"></i>Edit Personal Detail</a> -->
<a data-toggle="modal" data-target="#editJobDetail" class="dropdown-item"><i class="icon icon-pencil"></i>Edit Job Detail</a>
<a data-toggle="modal" data-target="#editSalaryDetail" class="dropdown-item"><i class="icon icon-pencil"></i>Edit Salary Detail</a>
</span>
</span>
</li>
<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
</ul>
</div>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<div class="card-content">
<div class="card-body">
<ul class="nav nav-tabs nav-top-border no-hover-bg">
<li class="nav-item ">
<a class="nav-link active" id="base-tabPersonal" data-toggle="tab" aria-controls="tabPersonal" href="#tabPersonal" aria-expanded="true">Personal Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="base-tabJob" data-toggle="tab" aria-controls="tabJob" href="#tabJob" aria-expanded="false">Job Details</a>
</li>
<li class="nav-item">
<a class="nav-link " id="base-tabSalary" data-toggle="tab" aria-controls="tabSalary" href="#tabSalary" aria-expanded="false">Salary Details</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<div class="tab-content px-1 pt-1">
<div role="tabpanel" class="tab-pane active" id="tabPersonal" aria-expanded="true" aria-labelledby="base-tabPersonal">
<div class="row" style="justify-content: center;">
<div class="col-12">
<div class="text-center">
<div class="card-body">
<img src="/assets/images/users/<%= employee.image %>" style="min-width: 150px; max-width: 150px; min-height: 150px; background-color: #999;" class="rounded-circle height-150" alt="Card image">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card box-shadow-1">
<div class="text-center">
<div class="card-body">
<h4 class="card-title"><%= (employee.firstName !== null ? employee.firstName : '') + ' ' + (employee.middleName !== null ? employee.middleName : '') + ' ' + (employee.lastName !== null ? employee.lastName : '') %></h4>
<% if(employee.grade){%>
<h6 class="card-subtitle text-muted"><%= employee.grade.title %></h6>
<% }else { %>
<h6 class="card-subtitle text-muted">No grade</h6>
<% } %>
<% if(employee.branch){%>
<h5 class="card-text">Branch: <%= employee.branch.name %></h5>
<% }else { %>
<h5 class="card-text">No branch</h5>
<% } %>
<h5 class="card-text">Email: <%= employee.email %></h5>
<h5 class="card-text">Phone: <%= employee.phone %></h5>
<h5 class="card-text" style="text-transform: capitalize;">Gender: <%= employee.gender %></h5>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="text-center ">
<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook col-12">
<span class="la la-facebook"></span>
</a>
<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter">
<span class="la la-twitter"></span>
</a>
<a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin">
<span class="la la-linkedin font-medium-4"></span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tabJob" aria-labelledby="base-tabJob">
<div class="row">
<% if(employee.employeeJob){ %>
<table class="table">
<tbody>
<tr>
<td>
<label for="gender">Job Category</label><br/>
<strong> <%= employee.employeeJob.jobTitle.category.title %></strong>
</td>
<td>
<label for="gender">Job Title</label><br/>
<strong> <%= employee.employeeJob.jobTitle.title %></strong>
</td>
<td>
<label for="gender">Employment Status</label><br/>
<strong> <%= employee.employeeJob.employmentStatus.title %></strong>
</td>
</tr>
<tr>
<td>
<label for="gender">Work Shift</label><br/>
<strong> <%= employee.employeeJob.workShift.title %></strong>
</td>
<td>
<label for="dob">Date of Employment</label><br/>
<strong> <%= moment(employee.employeeJob.dateOfEmployment).format("MMM Do YYYY") %></strong>
</td>
<td>
<label for="dob">Permanent on</label><br/>
<strong> <%= moment(employee.employeeJob.dateOfPermanency).format("MMM Do YYYY") %></strong>
</td>
</tr>
<tr>
<td>
<label for="dob">Contract Starts</label><br/>
<strong> <%= employee.employeeJob.contractStarts ? moment(employee.employeeJob.contractStarts).format("MMM Do YYYY") : "--" %></strong>
</td>
<td>
<label for="dob">Contract Ends</label><br/>
<strong> <%= employee.employeeJob.contractEnds ? moment(employee.employeeJob.contractEnds).format("MMM Do YYYY") : "--" %></strong>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<% } else { %>
No Job Record
<% } %>
</div>
</div>
<div class="tab-pane " id="tabSalary" aria-labelledby="base-tabSalary">
<% if(employee.salary){ %>
<div class="row">
<div class="col-md-4">
<label for="gender">Pay Grade</label><br/>
<strong><%= employee.salary.payGrade.title %></strong>
</div>
<div class="col-md-4">
<label for="dob">Currency</label><br/>
<strong> NGN - Nigeria <%= /*employee.salary.payGrade.currency */%></strong>
</div>
<div class="col-md-4">
<label for="dob">Annual Payment</label><br/>
<strong> <%= numeral(employee.salary.annualPayment).format('0,0.00') %></strong>
</div>
<!-- <input type="hidden" name="salaryComponents" id="components" class="form-control"> -->
<div class="col-12"><br> <p></p>Salary Component</div>
<% type = "Earning" %>
<div class="col-md-6" >
<table class="table">
<thead>
<th> Earning</th>
<th> Amount/Percentage</th>
<!-- <th> </th> -->
</thead>
<tbody >
<% employee.salary.components.forEach( component => { %>
<% if(type != component.component.type){ %>
<% type = component.component.type %>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table" >
<thead>
<th> <%= component.component.type %></th>
<th> Amount/Percentage</th>
<!-- <th></th> -->
</thead>
<tbody >
<% } %>
<tr>
<td ><%= component.component.title %></td>
<td >
<%= component.component.valueType %>
<br/><strong>
<% if(component.component.valueType == "Amount"){ %>
<%= numeral(component.value).format('0,0.00') %>
<% } else { %>
<%= component.value %>
<% } %>
</strong>
</td>
<!-- <td> </td> -->
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
<% } else { %>
No Job Record
<% } %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DOM - jQuery events table -->
</div>
</div>
</div>
<input type="hidden" name="_csrf" value="<%= _csrfToken %>" id="_csrf">
<div class="modal fade text-left" id="editSalaryDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel35"> Edit Employee's Salary </h3>
</div>
<div class="modal-body">
<form action="/hr/jobs/employee/salary-edit" method="POST" enctype="multipart/form-data" id="form">
<input type="hidden" name="_csrf" readonly value="<%= _csrfToken %>" >
<input type="hidden" name="salaryId" readonly value="<%= employee.salary ? employee.salary.id : null %>" >
<input type="hidden" name="userId" readonly value="<%= employee.id %>" >
<div class="row">
<div class="col-md-4">
<label for="gender">Pay Grade</label>
<select class="custom-select" name="payGradeId" id="payGradeId" >
<option >Select Pay Grade</option>
<% payGrades.forEach( grade =>{ %>
<option data-grade="<%= JSON.stringify(grade) %>" value="<%= grade.id %>" id="grade<%= grade.id %>" <% if(employee.salary){ if(grade.id == employee.salary.payGrade.id ){ %> selected <% } }%> ><%= grade.title %> </option>
<% }) %>
</select>
</div>
<div class="row col-md-8 col-sm-12 col-lg-8">
<div class="col-md-4">
<label for="dob">Currency</label>
<div name="currency" id="currency" class=""><%= employee.salary ? "NGN - Nigeria" : "--" %></div>
<input type="hidden" name="currencyId" value="1" class="">
</div>
<div class="col-md-4">
<label for="dob">Minimum Salary</label>
<div name="minSalary" id="minSalary" ><%= employee.salary ? employee.salary.payGrade.minSalary : "--" %></div>
</div>
<div class="col-md-4">
<label for="dob">Maximum Salary</label>
<div name="maxSalary" id="maxSalary" ><%= employee.salary ? employee.salary.payGrade.maxSalary : "--" %></div>
</div>
</div>
<input type="hidden" name="salaryComponents" id="components" class="form-control">
<div class="col-12"><br> <p></p>Salary Component</div>
<% type = "Earning" %>
<div class="col-md-6" >
<table class="table">
<thead>
<th> Earning</th>
<th> Amount/Percentage</th>
<th> </th>
</thead>
<tbody >
<% salaryComponents.forEach( (component, index) => { %>
<% if(type != component.type){ %>
<% type = component.type %>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table" >
<thead>
<th> <%= component.type %></th>
<th> Amount/Percentage</th>
</thead>
<tbody >
<% } %>
<tr>
<td ><%= component.title %></td>
<td >
<%= component.valueType %>
<input type="number" id="components<%= component.id %>" class="form-control components" value="<%= employee.salary.components[index] ? employee.salary.components[index].value : '' %>" oninput="calculateSalary()" min="0.00">
</td>
<td> </td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-12 text-center text-md-left">
</div>
<div class="col-md-5 col-sm-12">
<p class="lead">Total </p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Total Earning</td>
<td class="text-right"><span class="_currencyLabel"></span><span id="totalEarning">0.00</span></td>
</tr>
<tr>
<td>Total Deduction</td>
<td class="text-right"><span class="_currencyLabel"></span><span id="totalDeduction">0.00</span></td>
</tr>
<tr>
<td>Annual Payment</td>
<td class=" text-right"><span class="_currencyLabel"></span><span id="annualPayment">0.00</span></td>
</tr>
<tr class="bg-grey bg-lighten-4">
<td class="text-bold-800">Monthly Payment</td>
<td class="text-bold-800 text-right pink"><span class="_currencyLabel"></span><span class="balanceDue" id="monthlyPayment">0.00</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="display: flex; justify-content: center;">
<button class="btn btn-success btn-min-width mr-1 mb-1" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade text-left" id="editJobDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#1E9FF2;">
<h3 class="modal-title" id="myModalLabel3"> Edit Employee Salary </h3>
</div>
<div class="modal-body">
<form action="/hr/jobs/employee/job-edit" method="POST" enctype="multipart/form-data">
<input type="hidden" name="_csrf" readonly value="<%= _csrfToken %>" >
<input type="hidden" name="jobId" readonly value="<%= employee.employeeJob ? employee.employeeJob.id : null %>" >
<input type="hidden" name="userId" readonly value="<%= employee.id %>" >
<div class="row">
<div class="col-md-4">
<label for="gender">Job Category</label>
<select class="custom-select" name="jobCategoryId" id="jobCategoryId" required >
<option >Select Job Category</option>
<% categories.forEach( category =>{ %>
<option value="<%= category.id %>" <% if(employee.employeeJob){ if(category.id == employee.employeeJob.jobTitle.category.id){ %> selected <% } } %>)><%= category.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="gender">Job Title</label>
<select class="custom-select" name="jobTitleId" id="jobTitleId" required>
</select>
</div>
<div class="col-md-4">
<label for="gender">Employment Status</label>
<select class="custom-select" name="employmentStatusId" id="employmentStatusId" >
<% employmentStatuses.forEach( status =>{ %>
<option value="<%= status.id %>"><%= status.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="gender">Work Shift</label>
<select class="custom-select" name="workShiftId" id="workShiftId" >
<% workShifts.forEach( shift =>{ %>
<option value="<%= shift.id %>"><%= shift.title %> </option>
<% }) %>
</select>
</div>
<div class="col-md-4">
<label for="dob">Date of Employment</label>
<input type="date" class="form-control " name="dateOfEmployment" id="doEmployment" placeholder="Date of Employment">
</div>
<div class="col-md-4">
<label for="dob">Permanent on</label>
<input type="date" class="form-control " name="dateOfPermanency" id="dateOfPermanency" placeholder="Date of Permanency">
</div>
<div class="col-md-4">
<label for="dob">Contract Starts</label>
<input type="date" class="form-control " name="contractStarts" id="contractStart" placeholder="Contract Effective Date">
</div>
<div class="col-md-4">
<label for="dob">Contract Ends</label>
<input type="date" class="form-control " name="contractEnds" id="contractEnd" placeholder="Contract End Date">
</div>
</div>
<div style="display: flex; justify-content: center;">
<button class="btn btn-success btn-min-width mr-1 mb-1" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../partials/footer %>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script>
var salaryComponents ;
$('table.employees').DataTable();
$(document).ready(function() {
// var jobCategoryId = $("#jobCategoryId").val();
$("#jobCategoryId").trigger('change');
$('#spinnerContainer').addClass('show');
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/get-salaryComponents", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>" }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
salaryComponents = response.salaryComponents;
// $("#jobTitleId").append("<option >Select Job Title</option>");
// jobTitles.forEach(job => {
// $("#jobTitleId").append(`<option value="${job.id}">${job.title}</option>`);
// });
}
else{
// toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
calculateSalary();
});
///same script exist in employee/view
$("#jobCategoryId").on('change', (event)=>{
$('#spinnerContainer').addClass('show');
$("#jobTitleId").html('');
var jobCategoryId = $("#jobCategoryId").val();
$.ajax({
type: "POST", // Post / Get method
url: "/hr/jobs/get-jobTitles", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: {_csrf: "<%= _csrfToken %>", jobCategoryId }, //Form variables
success: function (response) {
$('#spinnerContainer').removeClass('show');
response = JSON.parse(response);
// console.log(response.jobTitles)
if(response.status == "success"){
var jobTitles = response.jobTitles;
$("#jobTitleId").append("<option >Select Job Title</option>");
jobTitles.forEach(job => {
$("#jobTitleId").append(`<option value="${job.id}">${job.title}</option>`);
});
}
else{
toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
}
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
})
$("#payGradeId").on('change', (event)=>{
// $('#spinnerContainer').addClass('show');
// $("#jobTitleId").html('');
var payGradeId = $("#payGradeId").val();
if(isNaN(payGradeId)){
$("#currency").html("--");
$("#minSalary").html('--');
$("#maxSalary").html("--");
}
else{
payGrade = $(`#grade${payGradeId}`).data('grade');
$("#currency").html("NGN - Nigeria");
$("#minSalary").html(payGrade.minSalary);
$("#maxSalary").html(payGrade.maxSalary);
}
})
$("#form").on('submit', event =>{
var components = []
$('.components').each( (index, component) =>{
components.push($(component).val());
// console.log(component)
})
$("#components").val(JSON.stringify(components));
// console.log($("#components").val())
// event.preventDefault();
})
function calculateSalary(){
var earnings = 0, deduction = 0, annualPayment = 0, monthlySalary = 0;
var basicSalary = parseFloat($(`#components${salaryComponents[0].id}`).val())
if(isNaN(basicSalary)){
console.log(basicSalary, "NAN")
return;
}
salaryComponents.forEach((component, index)=>{
var componentValue = parseFloat($(`#components${component.id}`).val());
if(!isNaN(componentValue)){ // console.log(componentValue);
if(component.type == "Earning"){
if(component.valueType == "Amount"){
earnings += componentValue;
}
else{
//its percentage
earnings += (componentValue * basicSalary)/100;
}
}
else{
//its deduction
if(component.valueType == "Amount"){
deduction += componentValue;
}
else{
//its percentage
deduction += (componentValue * basicSalary)/100;
}
}
}
})
annualPayment = parseFloat(earnings - deduction);
monthlySalary = parseFloat(annualPayment / 12)
// console.log(monthlySalary,annualPayment,earnings,deduction);
$("#annualPayment").html(numeral(annualPayment).format('0,0.000'))
$("#monthlyPayment").html(numeral(monthlySalary).format('0,0.000'))
$("#totalEarning").html(numeral(earnings).format('0,0.000'))
$("#totalDeduction").html(numeral(deduction).format('0,0.000'))
}
///script in employee/view ends here
</script>
Zerion Mini Shell 1.0