249 lines
10 KiB
PHP
249 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Laporan Kinerja Pegawai</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #ffffff;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.card {
|
|
border: none;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.table-responsive {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bg-primary-soft {
|
|
background-color: #e7f1ff;
|
|
}
|
|
|
|
.table th, .table td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.card-title i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Dashboard Report</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('home') }}">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('orders.index') }}">Order</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('salary.index') }}">Salary</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('report.index') }}">Report</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<form action="{{ route('logout') }}" method="POST" class="d-flex mt-1">
|
|
@csrf
|
|
<button type="submit" class="btn btn-sm btn-danger">Logout</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
{{-- Filter Bulan --}}
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary-soft">
|
|
<h4 class="card-title mb-0"><i class="fas fa-filter mr-2"></i> Filter Bulan</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="{{ route('report.index') }}" method="GET" class="mb-0">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="month">Pilih Bulan:</label>
|
|
<select name="month" id="month" class="form-control">
|
|
@for ($m = 1; $m <= 12; $m++)
|
|
<option value="{{ $m }}" {{ request('month', now()->month) == $m ? 'selected' : '' }}>
|
|
{{ \Carbon\Carbon::create(null, $m, 1)->translatedFormat('F') }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="year">Pilih Tahun:</label>
|
|
<select name="year" id="year" class="form-control">
|
|
@for ($y = now()->year; $y >= 2023; $y--)
|
|
<option value="{{ $y }}" {{ request('year', now()->year) == $y ? 'selected' : '' }}>
|
|
{{ $y }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary w-100">Filter</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Grafik --}}
|
|
<div class="row mt-4">
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0">Grafik Pesanan Pegawai</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-column justify-content-center">
|
|
<canvas id="ordersChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100 d-flex flex-column">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0">Grafik Presensi Pegawai</h5>
|
|
</div>
|
|
<div class="card-body d-flex flex-column justify-content-center">
|
|
<canvas id="presencesChart"></canvas>
|
|
<a href="{{ route('presensi.index') }}" class="btn btn-outline-primary mt-3 w-100">
|
|
Calendar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tabel Penilaian --}}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">Penilaian Kinerja Kurir</h5>
|
|
</div>
|
|
<div class="card-body table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Kurir</th>
|
|
<th>Target Harian</th>
|
|
<th>On Time</th>
|
|
<th>Predikat</th>
|
|
<th>Aksi</th>
|
|
<!-- Tambahkan kolom aksi -->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($penilaian as $index => $item)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td>{{ $item['nama_kurir'] }}</td>
|
|
<td>{{ $item['target_harian'] }}</td>
|
|
<td>{{ $item['ontime'] }}</td>
|
|
<td>{{ $item['predikat'] }}</td>
|
|
<td>
|
|
<a href="{{ route('report.cetak', ['id' => $item['id'], 'month' => $month, 'year' => $year]) }}"
|
|
class="btn btn-sm btn-primary" target="_blank">
|
|
Cetak
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
<a href="{{ route('report.cetak.semua', ['month' => $month, 'year' => $year]) }}" target="_blank">
|
|
<button class="btn btn-primary">Cetak Tabel</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let kurirNames = @json($kurirNames);
|
|
let totalOrders = @json($totalOrdersData);
|
|
let totalDaysWorked = @json($totalDaysWorkedData);
|
|
let totalPresences = @json($totalPresencesData);
|
|
let ontimePresences = @json($ontimePresencesData);
|
|
|
|
// Orders Chart
|
|
new Chart(document.getElementById('ordersChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: kurirNames,
|
|
datasets: [{
|
|
label: 'Total Pesanan',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
data: totalOrders
|
|
}, {
|
|
label: 'Total Hari Kerja',
|
|
backgroundColor: 'rgba(255, 99, 132, 0.5)',
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
borderWidth: 1,
|
|
data: totalDaysWorked
|
|
}]
|
|
}
|
|
});
|
|
|
|
// Presence Chart
|
|
new Chart(document.getElementById('presencesChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: kurirNames,
|
|
datasets: [{
|
|
label: 'Total Presensi',
|
|
backgroundColor: 'rgba(75, 192, 192, 0.5)',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1,
|
|
data: totalPresences
|
|
}, {
|
|
label: 'On Time',
|
|
backgroundColor: 'rgba(255, 205, 86, 0.5)',
|
|
borderColor: 'rgba(255, 205, 86, 1)',
|
|
borderWidth: 1,
|
|
data: ontimePresences
|
|
}]
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
|
|
</html>
|