bug fixes, daily reports, holidays
This commit is contained in:
Kwesi Banson Jnr
@@ -33,9 +33,16 @@
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage employee profiles, department roles, and system access.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
@if(strtolower(Auth::user()->department->name) == 'directors')
|
||||
<button class="btn btn-warning btn-sm fw-bold" data-bs-toggle="modal" data-bs-target="#overrideModal">
|
||||
<i class="bi bi-unlock-fill me-1"></i> Grant Report Override
|
||||
</button>
|
||||
@endif
|
||||
@if(in_array(strtolower(Auth::user()->department->name) , ['directors', 'human resource']))
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenStaffModal">
|
||||
<i class="bi bi-person-plus me-2"></i> Add Employee
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -264,82 +271,141 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- VIEW STAFF PROFILE MODAL -->
|
||||
<div class="modal fade" id="viewStaffModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold" id="viewStaffTitle">Staff Profile Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<!-- Basic Info Header -->
|
||||
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
||||
<div id="viewStaffAvatarContainer" class="me-3">
|
||||
<!-- Dynamic Avatar inserted via JS -->
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark" id="viewStaffName">---</h4>
|
||||
<p class="text-secondary mb-1 small" id="viewStaffDesignation">---</p>
|
||||
<span id="viewStaffStatusBadge" class="badge">---</span>
|
||||
</div>
|
||||
<div class="modal fade" id="viewStaffModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold" id="viewStaffTitle">Staff Profile Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body p-4">
|
||||
<!-- Basic Info Header -->
|
||||
<div class="d-flex align-items-center mb-4 pb-3 border-bottom">
|
||||
<div id="viewStaffAvatarContainer" class="me-3">
|
||||
<!-- Dynamic Avatar inserted via JS -->
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1 text-dark" id="viewStaffName">---</h4>
|
||||
<p class="text-secondary mb-1 small" id="viewStaffDesignation">---</p>
|
||||
<span id="viewStaffStatusBadge" class="badge">---</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">WORK EMAIL</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffEmail">---</div>
|
||||
<!-- Info Grid -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">WORK EMAIL</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffEmail">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">PHONE NUMBER</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffPhone">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">STAFF ID</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffCode">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">PERSONAL EMAIL</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffPersonalEmail">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">LOCATION / COUNTRY</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffLocation">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">ANNUAL LEAVE BALANCE</div>
|
||||
<div class="fw-medium text-dark small"><span id="viewStaffLeaveBalance">0</span> Days</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">PHONE NUMBER</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffPhone">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">STAFF ID</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffCode">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">PERSONAL EMAIL</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffPersonalEmail">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">LOCATION / COUNTRY</div>
|
||||
<div class="fw-medium text-dark small" id="viewStaffLocation">---</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-secondary small fw-semibold">ANNUAL LEAVE BALANCE</div>
|
||||
<div class="fw-medium text-dark small"><span id="viewStaffLeaveBalance">0</span> Days</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Emergency Contacts Table Section -->
|
||||
<h6 class="fw-bold text-dark mb-3"><i class="bi bi-shield-exclamation me-2 text-danger"></i>Emergency Contacts & Dependents</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Full Name</th>
|
||||
<th>Relationship</th>
|
||||
<th>Phone</th>
|
||||
<th>Medical Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="viewStaffDependentsList">
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-secondary py-3">Loading emergency contacts...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Emergency Contacts Table Section -->
|
||||
<h6 class="fw-bold text-dark mb-3"><i class="bi bi-shield-exclamation me-2 text-danger"></i>Emergency Contacts & Dependents</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Full Name</th>
|
||||
<th>Relationship</th>
|
||||
<th>Phone</th>
|
||||
<th>Medical Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="viewStaffDependentsList">
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-secondary py-3">Loading emergency contacts...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@push('modals')
|
||||
|
||||
|
||||
<!-- OVERRIDE MODAL) -->
|
||||
<div class="modal fade" id="overrideModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light border-bottom-0">
|
||||
<h5 class="modal-title fw-bold">Grant Report Override</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="overrideForm">
|
||||
@csrf
|
||||
<div class="modal-body p-4">
|
||||
<div class="alert alert-warning d-flex align-items-center p-3 mb-4" style="font-size: 0.85rem;">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2 fs-5 text-warning"></i>
|
||||
<div>Temporarily unlock the submission window for a staff member to file a past daily report.</div>
|
||||
</div>
|
||||
|
||||
<div id="overrideModalAlert"></div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-secondary fw-semibold small">Staff Member *</label>
|
||||
<select class="form-select select2-staff" id="override_user_id" name="user_id" required style="width: 100%;">
|
||||
<option value=""></option>
|
||||
<!-- Assuming you pass $staffMembers from the controller -->
|
||||
@foreach($allstaffMembers as $staff)
|
||||
<option value="{{ $staff->id }}">{{ $staff->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Locked Report Date *</label>
|
||||
<input type="date" class="form-control" name="report_date" required max="{{ now()->format('Y-m-d') }}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold small">Validity Window</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" name="hours_valid" value="24" min="1" max="72">
|
||||
<span class="input-group-text bg-light text-secondary">Hours</span>
|
||||
</div>
|
||||
<div class="form-text text-muted" style="font-size: 0.75rem;">Time given to submit before locking again.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-light border-top-0">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" id="btnSubmitOverride" class="btn text-white btn-sm fw-bold px-4" style="background-color: #5c4df0;">
|
||||
Grant Access
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
@@ -477,78 +543,157 @@
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
const viewModal = new bootstrap.Modal(document.getElementById('viewStaffModal'));
|
||||
$(document).ready(function() {
|
||||
const viewModal = new bootstrap.Modal(document.getElementById('viewStaffModal'));
|
||||
|
||||
$('.btn-view-staff').on('click', function() {
|
||||
const staffId = $(this).data('id');
|
||||
$('.btn-view-staff').on('click', function() {
|
||||
const staffId = $(this).data('id');
|
||||
|
||||
// Reset fields to loading state
|
||||
$('#viewStaffName').text('Loading...');
|
||||
$('#viewStaffDesignation').text('');
|
||||
$('#viewStaffEmail').text('');
|
||||
$('#viewStaffPhone').text('');
|
||||
$('#viewStaffCode').text('');
|
||||
$('#viewStaffPersonalEmail').text('');
|
||||
$('#viewStaffLocation').text('');
|
||||
$('#viewStaffLeaveBalance').text('');
|
||||
$('#viewStaffDependentsList').html('<tr><td colspan="4" class="text-center text-secondary py-3">Loading...</td></tr>');
|
||||
// Reset fields to loading state
|
||||
$('#viewStaffName').text('Loading...');
|
||||
$('#viewStaffDesignation').text('');
|
||||
$('#viewStaffEmail').text('');
|
||||
$('#viewStaffPhone').text('');
|
||||
$('#viewStaffCode').text('');
|
||||
$('#viewStaffPersonalEmail').text('');
|
||||
$('#viewStaffLocation').text('');
|
||||
$('#viewStaffLeaveBalance').text('');
|
||||
$('#viewStaffDependentsList').html('<tr><td colspan="4" class="text-center text-secondary py-3">Loading...</td></tr>');
|
||||
|
||||
viewModal.show();
|
||||
|
||||
// Fetch staff details via AJAX
|
||||
$.ajax({
|
||||
url: "{{ url('staff') }}/" + staffId + "/details", // Match your route endpoint
|
||||
type: 'GET',
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
let staff = response.staff;
|
||||
|
||||
$('#viewStaffName').text(staff.name);
|
||||
$('#viewStaffDesignation').text(staff.designation || 'Staff Member');
|
||||
$('#viewStaffEmail').text(staff.email || 'N/A');
|
||||
$('#viewStaffPhone').text(staff.phone || 'N/A');
|
||||
$('#viewStaffCode').text(staff.staff_id || 'N/A');
|
||||
$('#viewStaffPersonalEmail').text(staff.personal_email || 'N/A');
|
||||
$('#viewStaffLocation').text(staff.location_country || 'N/A');
|
||||
$('#viewStaffLeaveBalance').text(staff.annual_leave_balance ?? 0);
|
||||
|
||||
// Status Badge
|
||||
let badgeClass = staff.status === 'ACTIVE' ? 'bg-success bg-opacity-10 text-success' : 'bg-warning bg-opacity-10 text-warning';
|
||||
$('#viewStaffStatusBadge').attr('class', `badge ${badgeClass} px-3 py-1`).text(staff.status);
|
||||
|
||||
// Avatar setup
|
||||
if (staff.profile_pic) {
|
||||
$('#viewStaffAvatarContainer').html(`<img src="{{ asset('public/storage') }}/${staff.profile_pic}" class="rounded-circle border" style="width: 70px; height: 70px; object-fit: cover;">`);
|
||||
} else {
|
||||
let initials = staff.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
$('#viewStaffAvatarContainer').html(`<div class="rounded-circle bg-light text-primary fw-bold d-flex align-items-center justify-content-center border" style="width: 70px; height: 70px; font-size: 1.5rem;">${initials}</div>`);
|
||||
}
|
||||
|
||||
// Dependents Table population
|
||||
let dependentsHtml = '';
|
||||
if (response.dependents && response.dependents.length > 0) {
|
||||
response.dependents.forEach(dep => {
|
||||
dependentsHtml += `
|
||||
<tr>
|
||||
<td class="fw-bold">${dep.fullname}</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-dark border">${dep.relationship}</span></td>
|
||||
<td>${dep.phone || 'N/A'}</td>
|
||||
<td class="text-secondary">${dep.medical_details || 'None'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
dependentsHtml = `<tr><td colspan="4" class="text-center text-secondary py-3">No emergency contacts found.</td></tr>`;
|
||||
}
|
||||
$('#viewStaffDependentsList').html(dependentsHtml);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#viewStaffName').text('Error loading profile details.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
viewModal.show();
|
||||
|
||||
// Fetch staff details via AJAX
|
||||
$.ajax({
|
||||
url: "{{ url('staff') }}/" + staffId + "/details", // Match your route endpoint
|
||||
type: 'GET',
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
let staff = response.staff;
|
||||
|
||||
$('#viewStaffName').text(staff.name);
|
||||
$('#viewStaffDesignation').text(staff.designation || 'Staff Member');
|
||||
$('#viewStaffEmail').text(staff.email || 'N/A');
|
||||
$('#viewStaffPhone').text(staff.phone || 'N/A');
|
||||
$('#viewStaffCode').text(staff.staff_id || 'N/A');
|
||||
$('#viewStaffPersonalEmail').text(staff.personal_email || 'N/A');
|
||||
$('#viewStaffLocation').text(staff.location_country || 'N/A');
|
||||
$('#viewStaffLeaveBalance').text(staff.annual_leave_balance ?? 0);
|
||||
|
||||
// Status Badge
|
||||
let badgeClass = staff.status === 'ACTIVE' ? 'bg-success bg-opacity-10 text-success' : 'bg-warning bg-opacity-10 text-warning';
|
||||
$('#viewStaffStatusBadge').attr('class', `badge ${badgeClass} px-3 py-1`).text(staff.status);
|
||||
|
||||
// Avatar setup
|
||||
if (staff.profile_pic) {
|
||||
$('#viewStaffAvatarContainer').html(`<img src="{{ asset('public/storage') }}/${staff.profile_pic}" class="rounded-circle border" style="width: 70px; height: 70px; object-fit: cover;">`);
|
||||
} else {
|
||||
let initials = staff.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
$('#viewStaffAvatarContainer').html(`<div class="rounded-circle bg-light text-primary fw-bold d-flex align-items-center justify-content-center border" style="width: 70px; height: 70px; font-size: 1.5rem;">${initials}</div>`);
|
||||
}
|
||||
|
||||
// Dependents Table population
|
||||
let dependentsHtml = '';
|
||||
if (response.dependents && response.dependents.length > 0) {
|
||||
response.dependents.forEach(dep => {
|
||||
dependentsHtml += `
|
||||
<tr>
|
||||
<td class="fw-bold">${dep.fullname}</td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-dark border">${dep.relationship}</span></td>
|
||||
<td>${dep.phone || 'N/A'}</td>
|
||||
<td class="text-secondary">${dep.medical_details || 'None'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
} else {
|
||||
dependentsHtml = `<tr><td colspan="4" class="text-center text-secondary py-3">No emergency contacts found.</td></tr>`;
|
||||
}
|
||||
$('#viewStaffDependentsList').html(dependentsHtml);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#viewStaffName').text('Error loading profile details.');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// OVERRIDE
|
||||
$(document).ready(function() {
|
||||
|
||||
// Initialize Select2 for the staff dropdown
|
||||
$('.select2-staff').select2({
|
||||
theme: 'bootstrap-5',
|
||||
dropdownParent: $('#overrideModal'),
|
||||
placeholder: 'Search staff member...',
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
$('#overrideForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let $form = $(this);
|
||||
let $submitBtn = $('#btnSubmitOverride');
|
||||
let originalText = $submitBtn.html();
|
||||
let $alertBox = $('#overrideModalAlert');
|
||||
|
||||
$submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Processing...').prop('disabled', true);
|
||||
$alertBox.html('');
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
$form.find('.invalid-feedback').remove();
|
||||
|
||||
$.ajax({
|
||||
url: base_url + '/overrides', // Ensure you mapped this route in web.php to ReportOverrideController@store
|
||||
type: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
if(response.success) {
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-success d-flex align-items-center p-3" role="alert">
|
||||
<i class="bi bi-check-circle-fill me-2 fs-5 text-success"></i>
|
||||
<div style="font-size: 0.85rem;">${response.message}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
setTimeout(() => {
|
||||
$('#overrideModal').modal('hide');
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 422) {
|
||||
let errors = xhr.responseJSON.errors;
|
||||
$.each(errors, function(key, value) {
|
||||
let $input = $form.find('[name="' + key + '"]');
|
||||
if ($input.length) {
|
||||
$input.addClass('is-invalid');
|
||||
$input.parent().append('<div class="invalid-feedback d-block fw-medium" style="font-size: 0.75rem;">' + value[0] + '</div>');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-danger d-flex align-items-center p-3" role="alert">
|
||||
<i class="bi bi-x-circle-fill me-2 fs-5 text-danger"></i>
|
||||
<div style="font-size: 0.85rem;">Server error. Please try again.</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$submitBtn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clean up modal on close
|
||||
$('#overrideModal').on('hidden.bs.modal', function () {
|
||||
$('#overrideForm')[0].reset();
|
||||
$('#override_user_id').val(null).trigger('change');
|
||||
$('#overrideModalAlert').html('');
|
||||
$('#overrideForm').find('.is-invalid').removeClass('is-invalid');
|
||||
$('#overrideForm').find('.invalid-feedback').remove();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user