228 lines
15 KiB
PHP
228 lines
15 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Tukar Shift')
|
|
|
|
@section('content')
|
|
<div class="space-y-6">
|
|
|
|
<x-page-header title="Riwayat Tukar Shift" subtitle="Daftar log eksekusi penukaran jadwal kerja antar pegawai.">
|
|
<div class="flex gap-2">
|
|
<x-back-button href="{{ route('jadwal.index') }}" />
|
|
<a href="{{ route('tukar-shift.create') }}"
|
|
class="px-5 py-2.5 bg-primary text-white text-sm font-semibold justify-center rounded-xl hover:bg-primary/90 transition shadow-lg flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Buat Tukar Shift
|
|
</a>
|
|
</div>
|
|
</x-page-header>
|
|
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<x-table>
|
|
<x-slot:header>
|
|
<tr>
|
|
<th scope="col" class="px-6 py-4 text-left font-semibold text-slate-600">Terjadi Pada</th>
|
|
<th scope="col" class="px-6 py-4 text-left font-semibold text-slate-600">Pegawai 1</th>
|
|
<th scope="col" class="px-6 py-4 text-left font-semibold text-slate-600">Pegawai 2</th>
|
|
<th scope="col" class="px-6 py-4 text-left font-semibold text-slate-600">Keterangan</th>
|
|
<th scope="col" class="px-6 py-4 text-left font-semibold text-slate-600">Dieksekusi Oleh</th>
|
|
<th scope="col" class="px-6 py-4 text-right font-semibold text-slate-600">Aksi</th>
|
|
</tr>
|
|
</x-slot>
|
|
@forelse($riwayat as $log)
|
|
<tr class="hover:bg-slate-50 transition border-b border-slate-100 last:border-0">
|
|
<td class="px-6 py-4 align-middle">
|
|
<span class="text-slate-800 font-medium whitespace-nowrap">
|
|
{{ $log->created_at->translatedFormat('d F Y, H:i') }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 align-middle">
|
|
<div class="font-medium text-slate-800">{{ optional($log->user1)->nama_lengkap }}</div>
|
|
<div class="text-xs text-slate-500">{{ optional($log->jadwal1)->tanggal }}</div>
|
|
@if(optional($log->jadwal1)->shift)
|
|
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-600 mt-1">
|
|
{{ $log->jadwal1->shift->nama_shift }}
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 align-middle">
|
|
<div class="font-medium text-slate-800">{{ optional($log->user2)->nama_lengkap }}</div>
|
|
<div class="text-xs text-slate-500">{{ optional($log->jadwal2)->tanggal }}</div>
|
|
@if(optional($log->jadwal2)->shift)
|
|
<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-fuchsia-50 text-fuchsia-600 mt-1">
|
|
{{ $log->jadwal2->shift->nama_shift }}
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 align-middle">
|
|
<span class="text-slate-600 line-clamp-2">{{ $log->keterangan ?? '-' }}</span>
|
|
</td>
|
|
<td class="px-6 py-4 align-middle">
|
|
<span
|
|
class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-50 text-blue-600 border border-blue-200">
|
|
{{ optional($log->execAdmin)->nama_lengkap }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 align-middle text-right">
|
|
@php
|
|
$detailData = [
|
|
'tanggal_eksekusi' => $log->created_at->translatedFormat('d F Y, H:i'),
|
|
'admin' => optional($log->execAdmin)->nama_lengkap,
|
|
'keterangan' => $log->keterangan ?? '-',
|
|
'user1' => optional($log->user1)->nama_lengkap,
|
|
'user1_nik' => optional($log->user1)->nik ?? '-',
|
|
'tanggal1' => optional($log->jadwal1)->tanggal ? \Carbon\Carbon::parse($log->jadwal1->tanggal)->translatedFormat('d F Y') : '-',
|
|
'shift1' => optional(optional($log->jadwal1)->shift)->nama_shift ?? '-',
|
|
'jam1' => optional(optional($log->jadwal1)->shift)->jam_mulai ? substr(optional($log->jadwal1)->shift->jam_mulai, 0, 5) . ' - ' . substr(optional($log->jadwal1)->shift->jam_selesai, 0, 5) : '-',
|
|
'user2' => optional($log->user2)->nama_lengkap,
|
|
'user2_nik' => optional($log->user2)->nik ?? '-',
|
|
'tanggal2' => optional($log->jadwal2)->tanggal ? \Carbon\Carbon::parse($log->jadwal2->tanggal)->translatedFormat('d F Y') : '-',
|
|
'shift2' => optional(optional($log->jadwal2)->shift)->nama_shift ?? '-',
|
|
'jam2' => optional(optional($log->jadwal2)->shift)->jam_mulai ? substr(optional($log->jadwal2)->shift->jam_mulai, 0, 5) . ' - ' . substr(optional($log->jadwal2)->shift->jam_selesai, 0, 5) : '-',
|
|
];
|
|
@endphp
|
|
<x-button type="button" variant="secondary" onclick="openDetailModal(this)" data-log="{{ json_encode($detailData) }}" class="px-3 py-1.5 text-xs inline-flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
|
|
Detail
|
|
</x-button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-12 text-center text-slate-500">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<svg class="w-12 h-12 text-slate-300 mb-3" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="text-slate-600 font-medium">Belum ada riwayat tukar shift.</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
</div>
|
|
</div>
|
|
|
|
<x-modal name="detail-tukar-shift" title="Detail Tukar Shift">
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-start pb-4 border-b border-slate-100">
|
|
<div>
|
|
<p class="text-xs text-slate-500 mb-1">Dieksekusi Oleh</p>
|
|
<p class="font-bold text-slate-800 text-sm" id="detail-admin"></p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xs text-slate-500 mb-1">Tanggal Eksekusi</p>
|
|
<p class="font-medium text-slate-800 bg-slate-50 border border-slate-100 px-2 py-1 rounded inline-block text-sm" id="detail-tgl-eksekusi"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 relative">
|
|
|
|
<div class="hidden md:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white border border-slate-200 rounded-full items-center justify-center text-slate-400 z-10 shadow-sm">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
|
|
<p class="text-xs font-bold text-blue-800 uppercase tracking-wider mb-3">Pegawai 1</p>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-sm">
|
|
<span id="detail-avatar-1"></span>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-slate-800 text-sm" id="detail-user1"></p>
|
|
<p class="text-xs text-slate-500 font-mono" id="detail-nik1"></p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2 bg-white rounded-lg p-3 border border-blue-50">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Tanggal</span>
|
|
<span class="text-xs font-semibold text-slate-800" id="detail-tanggal1"></span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Shift</span>
|
|
<span class="text-xs font-bold bg-blue-50 text-blue-700 border border-blue-100 px-2 py-0.5 rounded" id="detail-shift1"></span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Jam Kerja</span>
|
|
<span class="text-xs font-mono text-slate-600" id="detail-jam1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-fuchsia-50 border border-fuchsia-100 rounded-xl p-4">
|
|
<p class="text-xs font-bold text-fuchsia-800 uppercase tracking-wider mb-3">Pegawai 2</p>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-fuchsia-100 text-fuchsia-600 flex items-center justify-center font-bold text-sm">
|
|
<span id="detail-avatar-2"></span>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-slate-800 text-sm" id="detail-user2"></p>
|
|
<p class="text-xs text-slate-500 font-mono" id="detail-nik2"></p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2 bg-white rounded-lg p-3 border border-fuchsia-50">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Tanggal</span>
|
|
<span class="text-xs font-semibold text-slate-800" id="detail-tanggal2"></span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Shift</span>
|
|
<span class="text-xs font-bold bg-fuchsia-50 text-fuchsia-700 border border-fuchsia-100 px-2 py-0.5 rounded" id="detail-shift2"></span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs text-slate-500">Jam Kerja</span>
|
|
<span class="text-xs font-mono text-slate-600" id="detail-jam2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate-700 mb-2">Keterangan / Alasan</p>
|
|
<div class="bg-slate-50 border border-slate-200 rounded-lg p-3 text-sm text-slate-700" id="detail-keterangan">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4 border-t border-slate-100 mt-2">
|
|
<x-button type="button" variant="secondary" x-data @click="$dispatch('close-modal', 'detail-tukar-shift')">Tutup</x-button>
|
|
</div>
|
|
</div>
|
|
</x-modal>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script>
|
|
function openDetailModal(buttonElement) {
|
|
try {
|
|
const dataStr = buttonElement.getAttribute('data-log');
|
|
const data = JSON.parse(dataStr);
|
|
|
|
document.getElementById('detail-admin').textContent = data.admin || '-';
|
|
document.getElementById('detail-tgl-eksekusi').textContent = data.tanggal_eksekusi || '-';
|
|
document.getElementById('detail-keterangan').textContent = data.keterangan || '-';
|
|
|
|
document.getElementById('detail-user1').textContent = data.user1 || '-';
|
|
document.getElementById('detail-nik1').textContent = data.user1_nik || '-';
|
|
document.getElementById('detail-avatar-1').textContent = data.user1 ? data.user1.substring(0, 2).toUpperCase() : '??';
|
|
document.getElementById('detail-tanggal1').textContent = data.tanggal1 || '-';
|
|
document.getElementById('detail-shift1').textContent = data.shift1 || '-';
|
|
document.getElementById('detail-jam1').textContent = data.jam1 || '-';
|
|
|
|
document.getElementById('detail-user2').textContent = data.user2 || '-';
|
|
document.getElementById('detail-nik2').textContent = data.user2_nik || '-';
|
|
document.getElementById('detail-avatar-2').textContent = data.user2 ? data.user2.substring(0, 2).toUpperCase() : '??';
|
|
document.getElementById('detail-tanggal2').textContent = data.tanggal2 || '-';
|
|
document.getElementById('detail-shift2').textContent = data.shift2 || '-';
|
|
document.getElementById('detail-jam2').textContent = data.jam2 || '-';
|
|
|
|
window.dispatchEvent(new CustomEvent('open-modal', { detail: 'detail-tukar-shift' }));
|
|
} catch (e) {
|
|
console.error('Error parsing detail data:', e);
|
|
}
|
|
}
|
|
</script>
|
|
@endsection
|