375 lines
19 KiB
PHP
375 lines
19 KiB
PHP
@extends('layouts.masterbeta')
|
|
|
|
@section('title', 'CML ERP - Staff Directory')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Staff Card Specific Styling */
|
|
.staff-card {
|
|
background: #fff;
|
|
border: 1px solid #eaedf1;
|
|
border-radius: 12px;
|
|
transition: all 0.2s ease-in-out;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.staff-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 15px rgba(0,0,0,0.05);
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
/* The decorative colored top border */
|
|
.card-top-bar {
|
|
height: 4px;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.dept-engineering { background-color: #5c4df0; }
|
|
.dept-sales { background-color: #10b981; }
|
|
.dept-support { background-color: #f59e0b; }
|
|
|
|
.staff-avatar {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 12px;
|
|
object-fit: cover;
|
|
background-color: #f8f9fc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #5c4df0;
|
|
}
|
|
|
|
.contact-row {
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0;
|
|
border-bottom: 1px solid #f8f9fc;
|
|
}
|
|
.contact-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('breadcrumbs')
|
|
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
|
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
|
<a href="#" class="text-secondary text-decoration-none me-2" style="font-size: 0.95rem;">Core Entities</a>
|
|
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
|
<span class="fw-bold" style="font-size: 0.95rem;">Staff Directory</span>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1">Staff Directory</h4>
|
|
<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">
|
|
<button class="btn btn-outline-secondary d-flex align-items-center" style="border-radius: 8px;">
|
|
<i class="bi bi-diagram-3 me-2"></i> Org Chart
|
|
</button>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-card p-3 mb-4">
|
|
<div class="row g-3">
|
|
<div class="col-md-5">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-transparent border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
|
<input type="text" class="form-control border-start-0 ps-0" placeholder="Search by name, role, or extension...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select">
|
|
<option value="">All Departments</option>
|
|
<option value="engineering">Engineering & IT</option>
|
|
<option value="sales">Sales & Accounts</option>
|
|
<option value="support">Technical Support</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select">
|
|
<option value="active">Active</option>
|
|
<option value="on-leave">On Leave</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button class="btn btn-secondary w-100" style="border-radius: 8px;">Filter</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6">
|
|
<div class="staff-card p-4 h-100">
|
|
<div class="card-top-bar dept-engineering"></div>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="staff-avatar bg-primary bg-opacity-10 me-3">AD</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1 text-dark">Admin Desk</h6>
|
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle px-2 py-1" style="font-size: 0.7rem;">Systems Admin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-buildings me-2"></i>Engineering</span>
|
|
<span class="badge bg-success bg-opacity-10 text-success" style="font-size: 0.65rem;">ACTIVE</span>
|
|
</div>
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-envelope me-2"></i>admin@nexus.io</span>
|
|
<a href="mailto:admin@nexus.io" class="text-secondary hover-primary"><i class="bi bi-box-arrow-up-right" style="font-size: 0.7rem;"></i></a>
|
|
</div>
|
|
<div class="contact-row d-flex align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-telephone me-2"></i>Ext: 1001</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 mt-auto pt-2 border-top">
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold btn-edit-staff"
|
|
data-id="1" data-name="Admin Desk" data-email="admin@nexus.io" data-ext="1001" data-role="Systems Admin" data-dept="engineering" data-status="active">
|
|
<i class="bi bi-pencil me-1"></i> Edit
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold">
|
|
<i class="bi bi-shield-lock me-1"></i> Access
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6">
|
|
<div class="staff-card p-4 h-100">
|
|
<div class="card-top-bar dept-sales"></div>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="staff-avatar bg-success bg-opacity-10 text-success me-3">MO</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1 text-dark">Mansa Olympio</h6>
|
|
<span class="badge bg-success bg-opacity-10 text-success border border-success-subtle px-2 py-1" style="font-size: 0.7rem;">Account Executive</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-buildings me-2"></i>Sales</span>
|
|
<span class="badge bg-success bg-opacity-10 text-success" style="font-size: 0.65rem;">ACTIVE</span>
|
|
</div>
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary text-truncate" style="max-width: 150px;"><i class="bi bi-envelope me-2"></i>m.osei@nexus.io</span>
|
|
<a href="mailto:m.osei@nexus.io" class="text-secondary hover-primary"><i class="bi bi-box-arrow-up-right" style="font-size: 0.7rem;"></i></a>
|
|
</div>
|
|
<div class="contact-row d-flex align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-telephone me-2"></i>Ext: 1045</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 mt-auto pt-2 border-top">
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold btn-edit-staff"
|
|
data-id="2" data-name="Michael Osei" data-email="m.osei@nexus.io" data-ext="1045" data-role="Account Executive" data-dept="sales" data-status="active">
|
|
<i class="bi bi-pencil me-1"></i> Edit
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold">
|
|
<i class="bi bi-shield-lock me-1"></i> Access
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-4 col-md-6">
|
|
<div class="staff-card p-4 h-100">
|
|
<div class="card-top-bar dept-support"></div>
|
|
|
|
<div class="d-flex align-items-center mb-3">
|
|
<img src="https://ui-avatars.com/api/?name=David+Kumwenda&background=f59e0b&color=fff" class="staff-avatar me-3" alt="David Kumwenda">
|
|
<div>
|
|
<h6 class="fw-bold mb-1 text-dark">David Kumwenda</h6>
|
|
<span class="badge bg-warning bg-opacity-10 text-dark border border-warning-subtle px-2 py-1" style="font-size: 0.7rem;">Software Developer</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-buildings me-2"></i>Tech</span>
|
|
<span class="badge bg-secondary bg-opacity-10 text-secondary" style="font-size: 0.65rem;">ON LEAVE</span>
|
|
</div>
|
|
<div class="contact-row d-flex justify-content-between align-items-center">
|
|
<span class="text-secondary text-truncate" style="max-width: 150px;"><i class="bi bi-envelope me-2"></i>s.mensah@nexus.io</span>
|
|
<a href="mailto:s.mensah@nexus.io" class="text-secondary hover-primary"><i class="bi bi-box-arrow-up-right" style="font-size: 0.7rem;"></i></a>
|
|
</div>
|
|
<div class="contact-row d-flex align-items-center">
|
|
<span class="text-secondary"><i class="bi bi-telephone me-2"></i>Ext: 1022</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 mt-auto pt-2 border-top">
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold btn-edit-staff"
|
|
data-id="3" data-name="Sarah Mensah" data-email="s.mensah@nexus.io" data-ext="1022" data-role="VoIP Specialist" data-dept="support" data-status="on-leave">
|
|
<i class="bi bi-pencil me-1"></i> Edit
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-secondary flex-grow-1 fw-semibold">
|
|
<i class="bi bi-shield-lock me-1"></i> Access
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|
|
|
|
@push('modals')
|
|
<div class="modal fade" id="staffModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content" style="border-radius: 12px; border: none;">
|
|
<div class="modal-header bg-light" style="border-radius: 12px 12px 0 0;">
|
|
<h5 class="modal-title fw-bold" id="staffModalTitle">Add New Employee</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form id="staffForm" enctype="multipart/form-data">
|
|
<div class="modal-body p-4">
|
|
<input type="hidden" id="staffId" name="id">
|
|
<input type="hidden" id="staffMethod" name="_method" value="POST">
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-3 text-center border-end pe-4">
|
|
<div class="staff-avatar mx-auto mb-3" style="width: 100px; height: 100px; font-size: 2rem;" id="avatarPreview">
|
|
<i class="bi bi-person text-secondary"></i>
|
|
</div>
|
|
<label for="staffPhoto" class="btn btn-sm btn-outline-secondary w-100">Upload Photo</label>
|
|
<input type="file" id="staffPhoto" name="photo" class="d-none" accept="image/*">
|
|
</div>
|
|
|
|
<div class="col-md-9 ps-4">
|
|
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Identity</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name *</label>
|
|
<input type="text" class="form-control" id="staffName" name="name" required placeholder="Jane Doe">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Job Title *</label>
|
|
<input type="text" class="form-control" id="staffRole" name="role" required placeholder="e.g. Network Engineer">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
|
|
<input type="email" class="form-control" id="staffEmail" name="email" required placeholder="jane@nexus.io">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">PBX Extension</label>
|
|
<input type="text" class="form-control" id="staffExt" name="extension" placeholder="e.g. 1010">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="text-secondary opacity-25">
|
|
|
|
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Organizational Assignment</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Department</label>
|
|
<select class="form-select" id="staffDept" name="department_id">
|
|
<option value="engineering">Engineering & IT</option>
|
|
<option value="sales">Sales & Accounts</option>
|
|
<option value="support">Technical Support</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Status</label>
|
|
<select class="form-select" id="staffStatus" name="status">
|
|
<option value="active">Active</option>
|
|
<option value="on-leave">On Leave</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitStaff">
|
|
Save Employee
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
const staffModal = new bootstrap.Modal(document.getElementById('staffModal'));
|
|
const $form = $('#staffForm');
|
|
|
|
// --- OPEN MODAL FOR CREATE ---
|
|
$('#btnOpenStaffModal').on('click', function() {
|
|
$form[0].reset();
|
|
$('#staffId').val('');
|
|
$('#staffMethod').val('POST');
|
|
$('#staffModalTitle').text('Add New Employee');
|
|
$('#btnSubmitStaff').html('<i class="bi bi-save me-2"></i>Save Employee');
|
|
$('#avatarPreview').html('<i class="bi bi-person text-secondary"></i>');
|
|
staffModal.show();
|
|
});
|
|
|
|
// --- OPEN MODAL FOR EDIT ---
|
|
$('.btn-edit-staff').on('click', function() {
|
|
const data = $(this).data();
|
|
|
|
$form[0].reset();
|
|
$('#staffId').val(data.id);
|
|
$('#staffMethod').val('PUT');
|
|
|
|
$('#staffName').val(data.name);
|
|
$('#staffRole').val(data.role);
|
|
$('#staffEmail').val(data.email);
|
|
$('#staffExt').val(data.ext);
|
|
$('#staffDept').val(data.dept);
|
|
$('#staffStatus').val(data.status);
|
|
|
|
// Show initials in preview for demo purposes
|
|
const initials = data.name.split(' ').map(n => n[0]).join('').substring(0,2);
|
|
$('#avatarPreview').html(initials).addClass('bg-primary bg-opacity-10 text-primary');
|
|
|
|
$('#staffModalTitle').text('Edit Employee: ' + data.name);
|
|
$('#btnSubmitStaff').html('<i class="bi bi-check-circle me-2"></i>Update Employee');
|
|
|
|
staffModal.show();
|
|
});
|
|
|
|
// --- HANDLE FORM SUBMISSION ---
|
|
$form.on('submit', function(e) {
|
|
e.preventDefault();
|
|
const $btn = $('#btnSubmitStaff');
|
|
const originalText = $btn.html();
|
|
|
|
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Saving...');
|
|
$btn.prop('disabled', true);
|
|
|
|
// Use FormData to allow file uploads (profile picture)
|
|
let formData = new FormData(this);
|
|
|
|
// Simulate AJAX Request
|
|
setTimeout(() => {
|
|
console.log('Staff Data Saved');
|
|
$btn.html(originalText).prop('disabled', false);
|
|
staffModal.hide();
|
|
alert('Employee record saved successfully!');
|
|
}, 800);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |