584 lines
19 KiB
PHP
584 lines
19 KiB
PHP
@extends('layouts.app')
|
|
|
|
@push('head')
|
|
<style>
|
|
.cuti-shell {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
padding: 40px 40px 34px;
|
|
border-radius: 30px;
|
|
background: linear-gradient(150deg, rgba(12, 24, 52, 0.95), rgba(7, 15, 36, 0.88));
|
|
border: 1px solid rgba(148, 163, 184, 0.22);
|
|
box-shadow: 0 34px 64px rgba(3, 7, 18, 0.56);
|
|
overflow: hidden;
|
|
}
|
|
.cuti-shell::before,
|
|
.cuti-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
.cuti-shell::before {
|
|
background:
|
|
radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.28), transparent 56%),
|
|
radial-gradient(circle at 82% -6%, rgba(14, 165, 233, 0.34), transparent 60%);
|
|
opacity: 0.84;
|
|
}
|
|
.cuti-shell::after {
|
|
background: linear-gradient(150deg, transparent 40%, rgba(129, 140, 248, 0.16));
|
|
opacity: 0.7;
|
|
}
|
|
.cuti-shell > * { position: relative; z-index: 1; }
|
|
|
|
.cuti-hero {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cuti-hero__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
max-width: 560px;
|
|
}
|
|
.cuti-hero__tagline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(129, 140, 248, 0.2);
|
|
border: 1px solid rgba(129, 140, 248, 0.4);
|
|
color: #e0e7ff;
|
|
font-size: 12px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
.cuti-hero__info h2 {
|
|
margin: 0;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: #f8fafc;
|
|
}
|
|
.cuti-hero__info p {
|
|
margin: 0;
|
|
color: rgba(226, 232, 240, 0.78);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
.cuti-hero__meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
min-width: 240px;
|
|
}
|
|
.cuti-hero__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
border-radius: 14px;
|
|
background: rgba(37, 99, 235, 0.18);
|
|
border: 1px solid rgba(37, 99, 235, 0.38);
|
|
color: #bfdbfe;
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
.cuti-hero__meta-text {
|
|
color: rgba(148, 163, 184, 0.82);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cuti-alert {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 14px 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid transparent;
|
|
background: rgba(15, 23, 42, 0.72);
|
|
font-size: 13px;
|
|
}
|
|
.cuti-alert--success { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); color: #bbf7d0; }
|
|
.cuti-alert--error { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.4); color: #fecaca; }
|
|
.cuti-alert__title {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
.cuti-alert__list {
|
|
margin: 0 0 0 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.cuti-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
}
|
|
.cuti-form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 18px 24px;
|
|
align-items: stretch;
|
|
}
|
|
.cuti-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.cuti-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #dbeafe;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.cuti-input,
|
|
.cuti-select,
|
|
.cuti-textarea {
|
|
background: rgba(2, 6, 23, 0.92);
|
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
|
border-radius: 14px;
|
|
padding: 11px 14px;
|
|
color: #e2e8f0;
|
|
font-size: 14px;
|
|
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
|
box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
|
|
}
|
|
.cuti-textarea {
|
|
resize: vertical;
|
|
min-height: 96px;
|
|
line-height: 1.55;
|
|
}
|
|
.cuti-input::placeholder,
|
|
.cuti-textarea::placeholder {
|
|
color: rgba(148, 163, 184, 0.68);
|
|
}
|
|
.cuti-input:focus,
|
|
.cuti-select:focus,
|
|
.cuti-textarea:focus {
|
|
outline: none;
|
|
border-color: rgba(56, 189, 248, 0.6);
|
|
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
|
|
background: rgba(2, 6, 23, 0.96);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.cuti-form-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.cuti-tip {
|
|
color: rgba(148, 163, 184, 0.84);
|
|
font-size: 12px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.cuti-submit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
|
color: #f8fafc;
|
|
border: none;
|
|
padding: 12px 28px;
|
|
border-radius: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
box-shadow: 0 22px 36px rgba(37, 99, 235, 0.34);
|
|
cursor: pointer;
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.cuti-submit:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 26px 42px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
.cuti-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.cuti-summary__card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 18px 20px;
|
|
border-radius: 18px;
|
|
background: rgba(8, 16, 36, 0.8);
|
|
border: 1px solid rgba(129, 140, 248, 0.3);
|
|
box-shadow: 0 18px 30px rgba(4, 12, 28, 0.4);
|
|
overflow: hidden;
|
|
}
|
|
.cuti-summary__card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 80% 18%, rgba(59, 130, 246, 0.2), transparent 52%);
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
}
|
|
.cuti-summary__card > * { position: relative; z-index: 1; }
|
|
.cuti-summary__label {
|
|
font-size: 12px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: rgba(203, 213, 225, 0.72);
|
|
font-weight: 600;
|
|
}
|
|
.cuti-summary__value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #f8fafc;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.cuti-summary__meta {
|
|
font-size: 12px;
|
|
color: rgba(148, 163, 184, 0.78);
|
|
}
|
|
|
|
.cuti-history-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.cuti-history-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.cuti-history-head h3 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: #f8fafc;
|
|
}
|
|
.cuti-history-head p {
|
|
margin: 0;
|
|
color: rgba(148, 163, 184, 0.76);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.cuti-table-shell {
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(148, 163, 184, 0.22);
|
|
background: rgba(7, 15, 32, 0.84);
|
|
box-shadow: 0 24px 44px rgba(4, 10, 26, 0.5);
|
|
overflow: hidden;
|
|
}
|
|
.cuti-table-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.cuti-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 10px;
|
|
min-width: 820px;
|
|
}
|
|
.cuti-table thead th {
|
|
background: rgba(10, 20, 44, 0.9);
|
|
color: #e2e8f0;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 14px 18px;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
|
}
|
|
.cuti-table tbody tr {
|
|
background: rgba(9, 18, 38, 0.86);
|
|
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
border-radius: 16px;
|
|
box-shadow: 0 18px 34px rgba(7, 16, 32, 0.3);
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
|
}
|
|
.cuti-table tbody tr:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 24px 40px rgba(14, 65, 120, 0.32);
|
|
border-color: rgba(96, 165, 250, 0.32);
|
|
}
|
|
.cuti-table tbody td {
|
|
padding: 14px 18px;
|
|
color: #f1f5f9;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.cuti-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
border: 1px solid transparent;
|
|
width: fit-content;
|
|
}
|
|
.cuti-status--pending { background: rgba(251, 191, 36, 0.18); color: #facc15; border-color: rgba(251, 191, 36, 0.36); }
|
|
.cuti-status--rejected { background: rgba(248, 113, 113, 0.18); color: #fecaca; border-color: rgba(248, 113, 113, 0.38); }
|
|
.cuti-status--approved { background: rgba(34, 197, 94, 0.18); color: #86efac; border-color: rgba(34, 197, 94, 0.32); }
|
|
|
|
.cuti-empty {
|
|
padding: 18px;
|
|
text-align: center;
|
|
color: rgba(148, 163, 184, 0.78);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.cuti-shell {
|
|
padding: 34px 28px;
|
|
}
|
|
.cuti-table {
|
|
min-width: 720px;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.cuti-shell {
|
|
padding: 28px 24px;
|
|
border-radius: 26px;
|
|
}
|
|
.cuti-hero__meta {
|
|
align-items: flex-start;
|
|
}
|
|
.cuti-form-actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.cuti-submit {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
.cuti-table {
|
|
border-spacing: 0;
|
|
min-width: 0;
|
|
}
|
|
.cuti-table thead {
|
|
display: none;
|
|
}
|
|
.cuti-table tbody {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
.cuti-table tbody tr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
}
|
|
.cuti-table tbody td {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
}
|
|
.cuti-table tbody td::before {
|
|
content: attr(data-label);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: rgba(148, 163, 184, 0.72);
|
|
}
|
|
.cuti-table tbody td:first-child { padding-top: 0; }
|
|
.cuti-table tbody td:last-child { padding-bottom: 0; }
|
|
}
|
|
@media (max-width: 580px) {
|
|
.cuti-shell {
|
|
padding: 24px 18px;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
@php
|
|
$summaryCollection = ($list ?? collect());
|
|
$summaryTotal = $summaryCollection->count();
|
|
$summaryMenunggu = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'menunggu')->count();
|
|
$summaryDisetujui = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'disetujui')->count();
|
|
$summaryDitolak = $summaryCollection->filter(fn ($row) => strtolower($row->status) === 'ditolak')->count();
|
|
$lastUpdated = now()->timezone(config('app.timezone'));
|
|
@endphp
|
|
|
|
<div class="cuti-shell">
|
|
<div class="cuti-hero">
|
|
<div class="cuti-hero__info">
|
|
<span class="cuti-hero__tagline">Manajemen Cuti</span>
|
|
<h2>Pengajuan Cuti</h2>
|
|
<p>Ajukan cuti dengan cepat dan pantau status persetujuan kapan saja tanpa meninggalkan dashboard ini.</p>
|
|
</div>
|
|
<div class="cuti-hero__meta">
|
|
<span class="cuti-hero__chip">Menunggu persetujuan: {{ number_format($summaryMenunggu) }}</span>
|
|
<span class="cuti-hero__meta-text">Total pengajuan: {{ number_format($summaryTotal) }}</span>
|
|
<span class="cuti-hero__meta-text">Terakhir diperbarui {{ $lastUpdated->format('d M Y H:i') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="cuti-alert cuti-alert--success">
|
|
<p class="cuti-alert__title">Berhasil</p>
|
|
<span>{{ session('success') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="cuti-alert cuti-alert--error">
|
|
<p class="cuti-alert__title">Pengajuan gagal</p>
|
|
<span>{{ session('error') }}</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="cuti-alert cuti-alert--error">
|
|
<p class="cuti-alert__title">Periksa kembali input</p>
|
|
<ul class="cuti-alert__list">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('cuti.store') }}" class="cuti-form">
|
|
@csrf
|
|
<div class="cuti-form-grid">
|
|
<div class="cuti-field">
|
|
<label for="tanggal_mulai" class="cuti-label">Tanggal Mulai</label>
|
|
<input type="date" id="tanggal_mulai" name="tanggal_mulai" class="cuti-input" value="{{ old('tanggal_mulai', date('Y-m-d')) }}" required>
|
|
</div>
|
|
<div class="cuti-field">
|
|
<label for="tanggal_selesai" class="cuti-label">Tanggal Selesai</label>
|
|
<input type="date" id="tanggal_selesai" name="tanggal_selesai" class="cuti-input" value="{{ old('tanggal_selesai', date('Y-m-d')) }}" required>
|
|
</div>
|
|
<div class="cuti-field">
|
|
<label for="jenis" class="cuti-label">Jenis Cuti</label>
|
|
<select id="jenis" name="jenis" class="cuti-select" required>
|
|
@php $jenisList = ['Tahunan','Sakit','Izin','Melahirkan','Penting Lainnya']; @endphp
|
|
<option value="" disabled {{ old('jenis') ? '' : 'selected' }}>Pilih jenis cuti</option>
|
|
@foreach($jenisList as $j)
|
|
<option value="{{ $j }}" {{ old('jenis')===$j?'selected':'' }}>{{ $j }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="cuti-field" style="grid-column:1 / -1;">
|
|
<label for="alasan" class="cuti-label">Alasan</label>
|
|
<textarea id="alasan" name="alasan" rows="3" class="cuti-textarea" placeholder="Jelaskan alasan cuti" required>{{ old('alasan') }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cuti-form-actions">
|
|
<span class="cuti-tip">Pastikan tanggal dan alasan sudah tepat sebelum mengirimkan pengajuan.</span>
|
|
<button type="submit" class="cuti-submit">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="18" height="18">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5" />
|
|
</svg>
|
|
Ajukan Cuti
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="cuti-summary">
|
|
<div class="cuti-summary__card">
|
|
<span class="cuti-summary__label">Total Pengajuan</span>
|
|
<span class="cuti-summary__value">{{ number_format($summaryTotal) }}</span>
|
|
<span class="cuti-summary__meta">Keseluruhan permintaan cuti</span>
|
|
</div>
|
|
<div class="cuti-summary__card">
|
|
<span class="cuti-summary__label">Menunggu</span>
|
|
<span class="cuti-summary__value">{{ number_format($summaryMenunggu) }}</span>
|
|
<span class="cuti-summary__meta">Belum ada keputusan</span>
|
|
</div>
|
|
<div class="cuti-summary__card">
|
|
<span class="cuti-summary__label">Disetujui</span>
|
|
<span class="cuti-summary__value">{{ number_format($summaryDisetujui) }}</span>
|
|
<span class="cuti-summary__meta">Telah dikonfirmasi</span>
|
|
</div>
|
|
<div class="cuti-summary__card">
|
|
<span class="cuti-summary__label">Ditolak</span>
|
|
<span class="cuti-summary__value">{{ number_format($summaryDitolak) }}</span>
|
|
<span class="cuti-summary__meta">Perlu tinjauan ulang</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cuti-history-section">
|
|
<div class="cuti-history-head">
|
|
<h3>Riwayat Pengajuan Saya</h3>
|
|
<p>Pantau status terbaru dan detail pengajuan cuti Anda.</p>
|
|
</div>
|
|
|
|
<div class="cuti-table-shell">
|
|
<div class="cuti-table-scroll">
|
|
<table class="cuti-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Tanggal</th>
|
|
<th>Durasi</th>
|
|
<th>Jenis</th>
|
|
<th>Alasan</th>
|
|
<th>Status</th>
|
|
<th>Diajukan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse(($list ?? collect()) as $row)
|
|
@php
|
|
$mulai = \Carbon\Carbon::parse($row->tanggal_mulai);
|
|
$selesai = \Carbon\Carbon::parse($row->tanggal_selesai);
|
|
$durasi = $mulai->diffInDays($selesai) + 1;
|
|
$statusLower = strtolower($row->status ?? '');
|
|
$statusModifier = match($statusLower) {
|
|
'menunggu', 'pending' => 'pending',
|
|
'disetujui', 'approved' => 'approved',
|
|
'ditolak', 'rejected' => 'rejected',
|
|
default => 'pending',
|
|
};
|
|
$statusClass = 'cuti-status cuti-status--' . $statusModifier;
|
|
$statusLabel = ucfirst($row->status ?? 'Menunggu');
|
|
@endphp
|
|
<tr>
|
|
<td data-label="Tanggal">{{ $mulai->format('d/m/Y') }} - {{ $selesai->format('d/m/Y') }}</td>
|
|
<td data-label="Durasi">{{ $durasi }} hari</td>
|
|
<td data-label="Jenis">{{ $row->jenis }}</td>
|
|
<td data-label="Alasan">{{ $row->alasan }}</td>
|
|
<td data-label="Status">
|
|
<span class="{{ $statusClass }}">{{ $statusLabel }}</span>
|
|
</td>
|
|
<td data-label="Diajukan">{{ \Carbon\Carbon::parse($row->created_at)->format('d/m/Y H:i') }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="cuti-empty">Belum ada pengajuan.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|