174 lines
9.2 KiB
PHP
174 lines
9.2 KiB
PHP
<x-app-layout>
|
|
@push('styles')
|
|
<link rel="stylesheet" href="{{ asset('css/tugas.css') }}">
|
|
<style>
|
|
.pug-nav-tabs {
|
|
display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;
|
|
}
|
|
.pug-nav-item {
|
|
padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 700;
|
|
border: 1px solid var(--pug-border); color: var(--pug-t2);
|
|
background: var(--pug-white); cursor: pointer; transition: all .2s; font-family: var(--pug-font);
|
|
display: flex; align-items: center; gap: 8px; text-decoration: none;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
}
|
|
.pug-nav-item i { font-size: 14px; opacity: 0.7; }
|
|
.pug-nav-item:hover { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,122,74,0.1); }
|
|
.pug-nav-item.active { border-color: var(--pug-green); color: var(--pug-green); background: var(--pug-green-l); box-shadow: 0 4px 12px rgba(26,122,74,0.15); }
|
|
.pug-nav-item.active i { opacity: 1; }
|
|
|
|
.progress { height: 8px; border-radius: 4px; background: var(--pug-border); overflow: hidden; margin-top: 6px; }
|
|
.progress-bar { height: 100%; border-radius: 4px; }
|
|
.bg-success { background: var(--pug-green); }
|
|
.bg-warning { background: var(--pug-amber); }
|
|
.bg-danger { background: var(--pug-rose); }
|
|
</style>
|
|
@endpush
|
|
|
|
<div class="pug-wrap">
|
|
<div class="pug-inner">
|
|
|
|
{{-- ── PAGE HEADER ── --}}
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
|
|
<div style="display:flex; align-items:center; gap:15px;">
|
|
<div class="pug-icon-wrap" style="width: 54px; height: 54px; font-size: 22px;">
|
|
<i class="fas fa-users-cog"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="pug-page-title" style="font-size: 24px;">Performa Teknisi</h1>
|
|
<p class="pug-page-sub">Analisis produktivitas dan persentase kehadiran teknisi • {{ date('F Y') }}</p>
|
|
</div>
|
|
</div>
|
|
<a href="{{ route('laporan.teknisi.export', request()->query()) }}" target="_blank" class="pug-btn-primary" style="text-decoration: none; background: linear-gradient(135deg, var(--pug-t1), #334155);">
|
|
<i class="fas fa-print"></i> Cetak Laporan
|
|
</a>
|
|
</div>
|
|
|
|
{{-- ── TAB NAVIGATION ── --}}
|
|
<div class="pug-nav-tabs">
|
|
<a href="{{ route('laporan.index') }}" class="pug-nav-item">
|
|
<i class="fas fa-th-large"></i> Ringkasan
|
|
</a>
|
|
<a href="{{ route('laporan.kasbon') }}" class="pug-nav-item">
|
|
<i class="fas fa-hand-holding-usd"></i> Kasbon
|
|
</a>
|
|
<a href="{{ route('laporan.absensi') }}" class="pug-nav-item">
|
|
<i class="fas fa-calendar-check"></i> Kehadiran
|
|
</a>
|
|
<a href="{{ route('laporan.teknisi') }}" class="pug-nav-item active">
|
|
<i class="fas fa-users"></i> Performa Teknisi
|
|
</a>
|
|
<a href="{{ route('laporan.pekerjaan') }}" class="pug-nav-item">
|
|
<i class="fas fa-tasks"></i> Pekerjaan
|
|
</a>
|
|
<a href="{{ route('laporan.penggajian') }}" class="pug-nav-item">
|
|
<i class="fas fa-money-check-alt"></i> Penggajian
|
|
</a>
|
|
<a href="{{ route('laporan.data_teknisi') }}" class="pug-nav-item">
|
|
<i class="fas fa-id-card"></i> Data Teknisi
|
|
</a>
|
|
</div>
|
|
|
|
{{-- ── TOOLBAR FILTER ── --}}
|
|
<div class="pug-toolbar" style="margin-bottom: 24px;">
|
|
<form method="GET" action="{{ route('laporan.teknisi') }}" class="pug-toolbar-form">
|
|
<div class="pug-toolbar-item" style="flex: 1; min-width: 250px;">
|
|
<label class="pug-field-label">Cari Teknisi</label>
|
|
<div class="pug-input-icon">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" name="search" class="pug-input" placeholder="Cari nama teknisi..." value="{{ request('search') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pug-toolbar-item item-btn d-flex align-items-end gap-2" style="flex: 0 0 auto;">
|
|
<button type="submit" class="pug-btn-primary" style="height: 44px; margin-bottom: 0;">
|
|
<i class="fas fa-search"></i> Cari
|
|
</button>
|
|
@if(request()->has('search') && request('search') != '')
|
|
<a href="{{ route('laporan.teknisi') }}" class="pug-reset-btn" style="height: 44px; text-decoration: none;">
|
|
<i class="fas fa-redo"></i> Reset
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- ── TABLE PANEL ── --}}
|
|
<div class="pug-panel">
|
|
<div class="pug-panel-head">
|
|
<div class="pug-panel-head-left">
|
|
<i class="fas fa-chart-line" style="color:var(--pug-cyan);margin-right:8px;"></i>
|
|
Data Performa Teknisi
|
|
</div>
|
|
<div class="pug-panel-head-right">
|
|
{{ count($data) }} data ditemukan
|
|
</div>
|
|
</div>
|
|
|
|
<div style="overflow-x:auto;">
|
|
<table class="pug-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Teknisi</th>
|
|
<th>Status Akun</th>
|
|
<th style="text-align:center;">Hadir</th>
|
|
<th style="text-align:center;">Izin</th>
|
|
<th style="text-align:center;">Sakit</th>
|
|
<th style="text-align:center;">Alpha</th>
|
|
<th style="width: 200px;">Tingkat Kehadiran</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($data as $item)
|
|
<tr>
|
|
<td>
|
|
<div style="display:flex; align-items:center; gap:12px;">
|
|
<div class="pug-av">{{ strtoupper(substr($item->nama ?? '?', 0, 2)) }}</div>
|
|
<div class="pug-av-name">{{ $item->nama ?? '-' }}</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="pug-badge {{ $item->status == 'aktif' ? 'pug-badge-green' : 'pug-badge-rose' }}">
|
|
<i class="fas {{ $item->status == 'aktif' ? 'fa-check-circle' : 'fa-times-circle' }}"></i> {{ strtoupper($item->status) }}
|
|
</span>
|
|
</td>
|
|
<td style="text-align:center; font-weight:700; color:var(--pug-green);">{{ $item->hadir }}</td>
|
|
<td style="text-align:center; font-weight:600; color:var(--pug-violet);">{{ $item->izin }}</td>
|
|
<td style="text-align:center; font-weight:600; color:var(--pug-amber);">{{ $item->sakit ?? 0 }}</td>
|
|
<td style="text-align:center; font-weight:700; color:var(--pug-rose);">{{ $item->alpha }}</td>
|
|
<td>
|
|
@php
|
|
$persentase = $item->total_absensi > 0 ? round(($item->hadir / $item->total_absensi) * 100, 1) : 0;
|
|
$progClass = 'bg-success';
|
|
if ($persentase < 80 && $persentase >= 50) $progClass = 'bg-warning';
|
|
if ($persentase < 50) $progClass = 'bg-danger';
|
|
@endphp
|
|
<div style="display:flex; justify-content:space-between; font-size:12px; font-weight:700;">
|
|
<span>{{ $persentase }}%</span>
|
|
<span style="color:var(--pug-t3); font-weight:500;">{{ $item->total_absensi }} Hari</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar {{ $progClass }}" style="width: {{ $persentase }}%"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7">
|
|
<div class="pug-empty">
|
|
<div class="pug-empty-icon"><i class="fas fa-inbox"></i></div>
|
|
<div class="pug-empty-title">Tidak ada data teknisi</div>
|
|
<div class="pug-empty-sub">Coba ubah kata kunci pencarian.</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|