195 lines
10 KiB
PHP
195 lines
10 KiB
PHP
@extends('layouts.masterbeta')
|
|
|
|
@section('title', 'Click ERP - Leave Management')
|
|
|
|
@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>
|
|
<span class="fw-bold" style="font-size: 0.95rem;">Leave Administration</span>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1">Leave Administration</h4>
|
|
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Review and manage employee time-off requests.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-6">
|
|
<div class="content-card p-4 h-100 border-start border-4 border-0 shadow-sm" style="border-left-color: #f59e0b !important;">
|
|
<div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">PENDING APPROVALS</div>
|
|
<h2 class="fw-bold mb-0 text-dark">{{ $pendingCount }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="content-card p-4 h-100 border-start border-4 border-0 shadow-sm" style="border-left-color: #10b981 !important;">
|
|
<div class="text-secondary fw-bold mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">APPROVED THIS MONTH</div>
|
|
<h2 class="fw-bold mb-0 text-dark">{{ $approvedThisMonth }}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table & Filter -->
|
|
<div class="content-card shadow-sm">
|
|
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
|
<form action="{{ route('leave.index') }}" method="GET">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
|
<input type="text" name="search" value="{{ request('search') }}" class="form-control bg-white border-start-0 ps-0" placeholder="Search by staff name...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select name="status" class="form-select bg-white" onchange="this.form.submit()">
|
|
<option value="">Status: All</option>
|
|
<option value="PENDING" {{ request('status') == 'PENDING' ? 'selected' : '' }}>Pending</option>
|
|
<option value="APPROVED" {{ request('status') == 'APPROVED' ? 'selected' : '' }}>Approved</option>
|
|
<option value="REJECTED" {{ request('status') == 'REJECTED' ? 'selected' : '' }}>Rejected</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn text-white w-100" style="background-color: #5c4df0;">
|
|
<i class="bi bi-funnel me-1"></i> Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-custom table-hover mb-0 align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th>Employee</th>
|
|
<th>Leave Type</th>
|
|
<th>Duration</th>
|
|
<th>Reason</th>
|
|
<th>Status</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($leaveRequests as $request)
|
|
<tr>
|
|
<td>
|
|
<div class="fw-bold text-dark">{{ $request->staff->name ?? 'Unknown Staff' }}</div>
|
|
<div class="text-secondary small">Bal: {{ $request->staff->annual_leave_balance ?? 0 }} Days</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-secondary bg-opacity-10 text-dark border">{{ $request->leave_type }}</span>
|
|
<div class="fw-bold mt-1 text-dark">{{ $request->total_days }} Days</div>
|
|
</td>
|
|
<td class="small text-secondary">
|
|
<div><i class="bi bi-calendar-event me-1"></i> {{ $request->start_date->format('M d, Y') }}</div>
|
|
<div><i class="bi bi-calendar-check me-1"></i> {{ $request->end_date->format('M d, Y') }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="text-truncate small text-secondary" style="max-width: 250px;" title="{{ $request->reason }}">
|
|
{{ $request->reason }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
@if($request->status == 'APPROVED')
|
|
<span class="badge bg-success bg-opacity-10 text-success border border-success-subtle px-2 py-1">Approved</span>
|
|
@elseif($request->status == 'REJECTED')
|
|
<span class="badge bg-danger bg-opacity-10 text-danger border border-danger-subtle px-2 py-1">Rejected</span>
|
|
@else
|
|
<span class="badge bg-warning bg-opacity-10 text-warning border border-warning-subtle px-2 py-1">Pending</span>
|
|
@endif
|
|
|
|
@if($request->admin_remarks)
|
|
<i class="bi bi-chat-text text-secondary ms-1" data-bs-toggle="tooltip" title="Notes: {{ $request->admin_remarks }}"></i>
|
|
@endif
|
|
</td>
|
|
<td class="text-end">
|
|
@if($request->status == 'PENDING')
|
|
<button class="btn btn-sm btn-light text-success border-success border-opacity-25 me-1 btn-action-leave"
|
|
data-id="{{ $request->id }}" data-action="APPROVED" title="Approve">
|
|
<i class="bi bi-check-lg"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-light text-danger border-danger border-opacity-25 btn-action-leave"
|
|
data-id="{{ $request->id }}" data-action="REJECTED" title="Reject">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
@else
|
|
<span class="text-secondary small"><i class="bi bi-lock"></i> Processed</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center py-4 text-secondary">No leave requests found.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-3 border-top">
|
|
{{ $leaveRequests->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
});
|
|
|
|
// Handle Approve / Reject actions
|
|
$('.btn-action-leave').on('click', function() {
|
|
const requestId = $(this).data('id');
|
|
const action = $(this).data('action');
|
|
|
|
const actionText = action === 'APPROVED' ? 'approve' : 'reject';
|
|
const confirmColor = action === 'APPROVED' ? '#10b981' : '#ef4444';
|
|
|
|
Swal.fire({
|
|
title: `Are you sure you want to ${actionText} this request?`,
|
|
input: 'text',
|
|
inputLabel: 'Add a remark (Optional)',
|
|
inputPlaceholder: 'e.g., Have a great vacation! / Insufficient coverage...',
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonColor: confirmColor,
|
|
cancelButtonColor: '#6c757d',
|
|
confirmButtonText: `Yes, ${actionText} it!`,
|
|
showLoaderOnConfirm: true,
|
|
preConfirm: (remark) => {
|
|
return $.ajax({
|
|
url: `{{ url('leave-requests') }}/${requestId}/status`,
|
|
type: 'POST',
|
|
data: {
|
|
_token: '{{ csrf_token() }}',
|
|
_method: 'PUT',
|
|
status: action,
|
|
admin_remarks: remark
|
|
}
|
|
}).catch(error => {
|
|
Swal.showValidationMessage(`Request failed: ${error.responseJSON?.message || 'Server error'}`);
|
|
});
|
|
},
|
|
allowOutsideClick: () => !Swal.isLoading()
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success!',
|
|
text: 'Leave request status updated.',
|
|
confirmButtonColor: '#5c4df0'
|
|
}).then(() => {
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |