349 lines
14 KiB
PHP
349 lines
14 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('css')
|
|
<!-- DataTables -->
|
|
<link href="{{ URL::asset('plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ URL::asset('plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
.filter-section {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.filter-section .form-group {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
.filter-section label {
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
.filter-section .btn {
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.search-box {
|
|
position: relative;
|
|
margin-left: auto;
|
|
width: 250px;
|
|
}
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 8px 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dt-button {
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
display: inline-flex;
|
|
gap: 1px;
|
|
}
|
|
|
|
</style>
|
|
@endsection
|
|
|
|
@section('breadcrumb')
|
|
<div class="col-sm-6">
|
|
<h4 class="page-title text-left">Rekap Data Presensi</h4>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
|
<li class="breadcrumb-item active">Rekap Data</li>
|
|
</ol>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Filter Section -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div class="filter-section">
|
|
<div class="form-group">
|
|
<label for="month">Bulan</label>
|
|
<input type="month" class="form-control" id="month" value="{{ date('Y-m') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="status">Status</label>
|
|
<select class="form-control" id="status">
|
|
<option value="">Semua Status</option>
|
|
<option value="Hadir">Hadir</option>
|
|
<option value="Sakit">Sakit</option>
|
|
<option value="Izin">Izin</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="filter-btn">
|
|
<i class="fas fa-filter"></i> Filter
|
|
</button>
|
|
</div>
|
|
{{-- --}}
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card bg-primary text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Hadir Hari Ini</h5>
|
|
<h3 class="card-text" id="total-hadir">0</h3>
|
|
<small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-warning text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Sakit Hari Ini</h5>
|
|
<h3 class="card-text" id="total-sakit">0</h3>
|
|
<small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card bg-info text-white">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Izin Hari Ini</h5>
|
|
<h3 class="card-text" id="total-izin">0</h3>
|
|
<small>{{ Carbon\Carbon::now()->format('d M Y') }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Data Table -->
|
|
<div class="table-responsive">
|
|
<table id="rekap-table" class="table table-bordered table-striped dt-responsive nowrap">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Tanggal</th>
|
|
<th>Nama</th>
|
|
<th>Status</th>
|
|
<th>Clock In</th>
|
|
<th>Clock Out</th>
|
|
<th>Keterangan</th>
|
|
<th>Lokasi</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- Required datatable js -->
|
|
<script src="{{ URL::asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
|
|
<!-- Buttons examples -->
|
|
<script src="{{ URL::asset('plugins/datatables/dataTables.buttons.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/jszip.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/pdfmake.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/vfs_fonts.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/buttons.html5.min.js') }}"></script>
|
|
<script src="{{ URL::asset('plugins/datatables/buttons.print.min.js') }}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
let table = $('#rekap-table').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: {
|
|
url: '{{ route("admin.reports.data") }}',
|
|
data: function(d) {
|
|
d.month = $('#month').val();
|
|
d.status = $('#status').val();
|
|
},
|
|
error: function (xhr, error, thrown) {
|
|
console.error('DataTables error:', error);
|
|
console.error('Server response:', xhr.responseText);
|
|
alert('Error loading data. Please check console for details.');
|
|
}
|
|
},
|
|
columns: [
|
|
{
|
|
data: 'DT_RowIndex',
|
|
name: 'DT_RowIndex',
|
|
orderable: false,
|
|
searchable: false
|
|
},
|
|
{
|
|
data: 'tanggal',
|
|
name: 'tanggal',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'nama',
|
|
name: 'nama',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'status',
|
|
name: 'status',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'jam_masuk',
|
|
name: 'jam_masuk',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'jam_keluar',
|
|
name: 'jam_keluar',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'keterangan',
|
|
name: 'keterangan',
|
|
render: function(data) {
|
|
return data || '-';
|
|
}
|
|
},
|
|
{
|
|
data: 'lokasi',
|
|
name: 'lokasi',
|
|
orderable: false,
|
|
searchable: false
|
|
}
|
|
],
|
|
dom: 'Bfrtip',
|
|
buttons: [
|
|
{
|
|
extend: 'excel',
|
|
text: '<i class="fas fa-file-excel"></i> Excel',
|
|
className: 'dt-button buttons-excel',
|
|
title: 'Rekap Data Presensi - ' + $('#month').val(),
|
|
exportOptions: {
|
|
columns: [0,1,2,3,4,5,6]
|
|
}
|
|
},
|
|
{
|
|
extend: 'pdf',
|
|
text: '<i class="fas fa-file-pdf"></i> PDF',
|
|
className: 'dt-button buttons-pdf',
|
|
title: 'Rekap Data Presensi - ' + $('#month').val(),
|
|
exportOptions: {
|
|
columns: [0,1,2,3,4,5,6]
|
|
},
|
|
orientation: 'landscape'
|
|
},
|
|
{
|
|
extend: 'print',
|
|
text: '<i class="fas fa-print"></i> Print',
|
|
className: 'dt-button buttons-print',
|
|
title: 'Rekap Data Presensi - ' + $('#month').val(),
|
|
exportOptions: {
|
|
columns: [0,1,2,3,4,5,6]
|
|
}
|
|
}
|
|
],
|
|
order: [[1, 'desc']],
|
|
pageLength: 10,
|
|
language: {
|
|
processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
|
|
search: "Cari:",
|
|
lengthMenu: "Tampilkan _MENU_ data per halaman",
|
|
zeroRecords: "Data tidak ditemukan",
|
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
|
|
infoFiltered: "(disaring dari _MAX_ total data)",
|
|
paginate: {
|
|
first: "Pertama",
|
|
last: "Terakhir",
|
|
next: "Selanjutnya",
|
|
previous: "Sebelumnya"
|
|
}
|
|
},
|
|
drawCallback: function(settings) {
|
|
console.log('Data received:', settings.json);
|
|
}
|
|
});
|
|
|
|
// Pencarian Manual
|
|
$('#searchInput').on('keyup', function() {
|
|
table.search(this.value).draw();
|
|
});
|
|
|
|
// Filter button click handler
|
|
$('#filter-btn').click(function() {
|
|
table.ajax.reload();
|
|
updateSummary();
|
|
});
|
|
|
|
// Initial summary update
|
|
updateSummary();
|
|
|
|
// Tambahkan fungsi untuk menampilkan lokasi
|
|
window.showLocation = function(lat, lng) {
|
|
// Implementasi untuk menampilkan peta
|
|
// Misalnya menggunakan modal dengan Google Maps
|
|
Swal.fire({
|
|
title: 'Lokasi Presensi',
|
|
html: `
|
|
<div id="map" style="height: 400px;"></div>
|
|
`,
|
|
width: '600px',
|
|
didRender: () => {
|
|
// Inisialisasi Google Maps
|
|
const map = new google.maps.Map(document.getElementById('map'), {
|
|
center: { lat: parseFloat(lat), lng: parseFloat(lng) },
|
|
zoom: 15
|
|
});
|
|
|
|
new google.maps.Marker({
|
|
position: { lat: parseFloat(lat), lng: parseFloat(lng) },
|
|
map: map
|
|
});
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
function updateSummary() {
|
|
$.ajax({
|
|
url: '{{ route("admin.reports.summary") }}',
|
|
data: {
|
|
month: $('#month').val(),
|
|
status: $('#status').val()
|
|
},
|
|
success: function(response) {
|
|
$('#total-hadir').text(response.hadir);
|
|
$('#total-sakit').text(response.sakit);
|
|
$('#total-izin').text(response.izin);
|
|
$('#total-absen').text(response.absen);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!-- Tambahkan Google Maps API di bagian head atau sebelum closing body -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>
|
|
@endsection
|
|
|
|
|
|
|
|
|