added document vault and bug fixes on profile and staff members controllers

This commit is contained in:
Kwesi Banson Jnr
2026-08-20 19:08:31 +00:00
parent 81d26dc138
commit cc129bccac
7 changed files with 456 additions and 261 deletions

View File

@@ -128,7 +128,12 @@
</div>
<div class="d-flex gap-2 mt-auto pt-2 border-top">
<button class="btn btn-sm btn-light text-primary flex-grow-1 fw-semibold btn-edit-staff"
<button class="btn btn-sm btn-light text-success flex-grow-1 btn-view-staff"
data-id="{{ $staff->id }}"
title="View Profile Details">
<i class="bi bi-eye"></i> View
</button>
<button class="btn btn-sm btn-light text-primary me-1 fw-semibold btn-edit-staff"
data-id="{{ $staff->id }}"
data-name="{{ $staff->name }}"
data-email="{{ $staff->email }}"
@@ -141,6 +146,7 @@
<i class="bi bi-pencil me-1"></i> Edit
</button>
{{--
<form action="{{ route('staff.destroy', $staff->id) }}" method="POST" class="flex-grow-1 m-0">
@csrf
@method('DELETE')
@@ -148,6 +154,7 @@
<i class="bi bi-trash me-1"></i> Delete
</button>
</form>
--}}
</div>
</div>
</div>
@@ -256,6 +263,83 @@
</div>
</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>
<!-- 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>
<!-- 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>
</div>
@endpush
@push('scripts')
@@ -392,5 +476,79 @@
});
});
});
$(document).ready(function() {
const viewModal = new bootstrap.Modal(document.getElementById('viewStaffModal'));
$('.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>');
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.');
}
});
});
});
</script>
@endpush