SIPDAM/samooapk/resources/views/Admin/Laporan/pekerjaan.blade.php

221 lines
12 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; }
</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-tasks"></i>
</div>
<div>
<h1 class="pug-page-title" style="font-size: 24px;">Laporan Pekerjaan</h1>
<p class="pug-page-sub">Daftar penugasan dan status pengerjaan teknisi {{ date('F Y') }}</p>
</div>
</div>
<a href="{{ route('laporan.pekerjaan.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">
<i class="fas fa-users"></i> Performa Teknisi
</a>
<a href="{{ route('laporan.pekerjaan') }}" class="pug-nav-item active">
<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>
{{-- ── STATS ── --}}
<div class="pug-stats" style="grid-template-columns: repeat(4, 1fr);">
<div class="pug-stat pug-stat-total">
<div class="pug-stat-icon"><i class="fas fa-clipboard-list"></i></div>
<div class="pug-stat-label">TOTAL PENUGASAN</div>
<div class="pug-stat-val">{{ $statsPekerjaan['total'] ?? 0 }}</div>
<div class="pug-page-sub">Seluruh penugasan</div>
</div>
<div class="pug-stat pug-stat-selesai">
<div class="pug-stat-icon"><i class="fas fa-check-circle"></i></div>
<div class="pug-stat-label">SELESAI</div>
<div class="pug-stat-val">{{ $statsPekerjaan['selesai'] ?? 0 }}</div>
<div class="pug-page-sub">Pekerjaan tuntas</div>
</div>
<div class="pug-stat pug-stat-proses">
<div class="pug-stat-icon" style="background: var(--pug-violet-l); color: var(--pug-violet);"><i class="fas fa-spinner"></i></div>
<div class="pug-stat-label">DALAM PROSES</div>
<div class="pug-stat-val" style="color: var(--pug-violet);">{{ $statsPekerjaan['proses'] ?? 0 }}</div>
<div class="pug-page-sub">Sedang dikerjakan</div>
</div>
<div class="pug-stat pug-stat-belum">
<div class="pug-stat-icon" style="background: var(--pug-amber-l); color: var(--pug-amber);"><i class="fas fa-clock"></i></div>
<div class="pug-stat-label">PENDING</div>
<div class="pug-stat-val" style="color: var(--pug-amber);">{{ $statsPekerjaan['pending'] ?? 0 }}</div>
<div class="pug-page-sub">Menunggu dikerjakan</div>
</div>
</div>
{{-- ── TOOLBAR FILTER ── --}}
<div class="pug-toolbar" style="margin-bottom: 24px;">
<form method="GET" action="{{ route('laporan.pekerjaan') }}" class="pug-toolbar-form">
<div class="pug-toolbar-item" style="flex: 2; min-width: 250px;">
<label class="pug-field-label">Tanggal</label>
<div class="pug-input-icon">
<i class="fas fa-calendar-alt"></i>
<input type="date" name="tanggal" class="pug-input" value="{{ request('tanggal') }}">
</div>
</div>
<div class="pug-toolbar-item" style="flex: 1; min-width: 150px;">
<label class="pug-field-label">Status Pekerjaan</label>
<select name="status" class="pug-input">
<option value="">Semua Status</option>
<option value="selesai" {{ request('status') == 'selesai' ? 'selected' : '' }}>Selesai</option>
<option value="proses" {{ request('status') == 'proses' ? 'selected' : '' }}>Proses</option>
<option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
</select>
</div>
<div class="pug-toolbar-item" style="flex: 1; min-width: 180px;">
<label class="pug-field-label">Teknisi</label>
<div class="pug-input-icon">
<i class="fas fa-user-tie"></i>
<select name="id_teknisi" class="pug-input">
<option value="">Semua Teknisi</option>
@foreach($teknisis as $t)
<option value="{{ $t->id_teknisi }}" {{ request('id_teknisi') == $t->id_teknisi ? 'selected' : '' }}>{{ $t->nama }}</option>
@endforeach
</select>
</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-filter"></i> Filter
</button>
@if(request()->hasAny(['tanggal', 'status', 'id_teknisi']))
<a href="{{ route('laporan.pekerjaan') }}" 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-list-ul" style="color:var(--pug-green);margin-right:8px;"></i>
Data Laporan Pekerjaan
</div>
<div class="pug-panel-head-right">
{{ $data->total() }} data ditemukan
</div>
</div>
<div style="overflow-x:auto;">
<table class="pug-table">
<thead>
<tr>
<th>Pekerjaan</th>
<th>Teknisi</th>
<th>Lokasi</th>
<th>Status</th>
<th>Tgl Selesai</th>
</tr>
</thead>
<tbody>
@forelse($data as $item)
<tr>
<td>
<div>
<div class="pug-av-name">{{ $item->jenis_pekerjaan ?? '-' }}</div>
<div class="pug-av-sub">#{{ $item->id_penugasan }}</div>
</div>
</td>
<td>
<div style="display:flex; align-items:center; gap:12px;">
<div class="pug-av">{{ strtoupper(substr($item->nama_teknisi ?? '?', 0, 2)) }}</div>
<div class="pug-av-name">{{ $item->nama_teknisi ?? '-' }}</div>
</div>
</td>
<td>
<div style="font-size: 12px; color: var(--pug-t2);"><i class="fas fa-map-marker-alt" style="color: var(--pug-rose); margin-right: 4px;"></i> {{ $item->catatan_admin ?? '-' }}</div>
</td>
<td>
@php
$sp = strtolower($item->status_pekerjaan ?? 'pending');
$bcp = 'pug-badge-muted'; $icp = 'fa-clock';
if($sp == 'selesai') { $bcp = 'pug-badge-green'; $icp = 'fa-check-circle'; }
if($sp == 'proses' || $sp == 'dalam_proses') { $bcp = 'pug-badge-violet'; $icp = 'fa-spinner'; }
@endphp
<span class="pug-badge {{ $bcp }}">
<i class="fas {{ $icp }}"></i> {{ strtoupper(str_replace('_', ' ', $item->status_pekerjaan ?? '-')) }}
</span>
</td>
<td><div class="pug-date">{{ $item->tanggal_diselesaikan ? \Carbon\Carbon::parse($item->tanggal_diselesaikan)->format('d M Y') : '-' }}</div></td>
</tr>
@empty
<tr>
<td colspan="5">
<div class="pug-empty">
<div class="pug-empty-icon"><i class="fas fa-inbox"></i></div>
<div class="pug-empty-title">Tidak ada data pekerjaan</div>
<div class="pug-empty-sub">Ubah filter pencarian untuk melihat data lain.</div>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
@if($data->hasPages())
<div class="pug-pag">
{{ $data->links() }}
</div>
@endif
</div>
</div>
</div>
</x-app-layout>