Initial commit for combined ProjectKP
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
.page-container { padding: 40px 20px; background: #f4f7fb; min-height: calc(100vh - 70px); font-family: 'Outfit', 'Segoe UI', sans-serif; display: flex; flex-direction: column; align-items: center; }
|
||||
.form-card { background: #fff; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); width: 100%; max-width: 600px; padding: 35px 40px; box-sizing: border-box; }
|
||||
.date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 35px; }
|
||||
.page-title { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.5px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-container { padding: 20px 15px !important; }
|
||||
.form-card { padding: 25px 20px !important; border-radius: 16px !important; }
|
||||
.date-grid { grid-template-columns: 1fr !important; gap: 15px !important; margin-bottom: 25px !important; }
|
||||
.page-title { font-size: 24px !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-container">
|
||||
|
||||
{{-- HEADER --}}
|
||||
<div style="text-align:center; margin-bottom:30px;">
|
||||
<h1 class="page-title">Buat Penugasan Baru</h1>
|
||||
<p style="margin:0; color:#64748b; font-size:15px; font-weight:500;">Berikan instruksi tugas kepada pegawai lapangan</p>
|
||||
</div>
|
||||
|
||||
@if(session('error'))
|
||||
<div style="width:100%; max-width:600px; margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px; color:#be123c; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- FORM CARD --}}
|
||||
<div class="form-card">
|
||||
<form action="{{ route('admin.superadmin.kegiatan.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
@if ($errors->any())
|
||||
<div style="margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px;">
|
||||
<p style="font-weight:700; color:#be123c; margin:0 0 8px; font-size:13px;">Terdapat kesalahan input:</p>
|
||||
<ul style="margin:0; padding-left:18px; color:#be123c; font-size:13px;">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="margin-bottom:24px;">
|
||||
<label style="display:block; font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase;">
|
||||
Nomor Surat
|
||||
</label>
|
||||
<input type="text" name="nomor_surat" value="{{ old('nomor_surat') }}"
|
||||
style="width:100%; padding:14px 16px; background:#f8fafc; border:2px solid transparent; border-radius:12px; font-size:15px; color:#0f172a; outline:none; box-sizing:border-box; transition:all 0.2s; font-family:inherit; font-weight:500;"
|
||||
onfocus="this.style.borderColor='#e0e7ff'; this.style.background='#fff'" onblur="this.style.borderColor='transparent'; this.style.background='#f8fafc'"
|
||||
placeholder="Contoh: 001/ST/V/2026" required>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:24px;">
|
||||
<label style="display:block; font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase;">
|
||||
Nama Kegiatan
|
||||
</label>
|
||||
<input type="text" name="kegiatan" value="{{ old('kegiatan') }}"
|
||||
style="width:100%; padding:14px 16px; background:#f8fafc; border:2px solid transparent; border-radius:12px; font-size:15px; color:#0f172a; outline:none; box-sizing:border-box; transition:all 0.2s; font-family:inherit; font-weight:500;"
|
||||
onfocus="this.style.borderColor='#e0e7ff'; this.style.background='#fff'" onblur="this.style.borderColor='transparent'; this.style.background='#f8fafc'"
|
||||
placeholder="Contoh: Monitoring Jaringan Dishub" required>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:24px;">
|
||||
<label style="display:block; font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase;">
|
||||
Pilih Petugas (Multiple)
|
||||
</label>
|
||||
<select name="pegawai_ids[]" multiple required
|
||||
style="width:100%; padding:14px 16px; background:#f8fafc; border:2px solid transparent; border-radius:12px; font-size:14px; color:#334155; outline:none; box-sizing:border-box; transition:all 0.2s; font-family:inherit; font-weight:500; height:140px; line-height:1.5;"
|
||||
onfocus="this.style.borderColor='#e0e7ff'; this.style.background='#fff'" onblur="this.style.borderColor='transparent'; this.style.background='#f8fafc'">
|
||||
@foreach($users as $user)
|
||||
<option value="{{ $user['id'] }}" style="padding:6px 0; border-bottom:1px solid #f1f5f9;">
|
||||
{{ $user['name'] }} - {{ $user['jabatan'] ?? 'Pegawai' }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<p style="font-size:11px; color:#94a3b8; margin-top:8px; font-weight:500;">* Tahan Ctrl/Cmd untuk memilih lebih dari 1 orang</p>
|
||||
</div>
|
||||
|
||||
<div class="date-grid">
|
||||
<div>
|
||||
<label style="display:block; font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase;">
|
||||
Tanggal Mulai
|
||||
</label>
|
||||
<input type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai') }}"
|
||||
style="width:100%; padding:14px 16px; background:#f8fafc; border:2px solid transparent; border-radius:12px; font-size:14px; color:#334155; outline:none; box-sizing:border-box; transition:all 0.2s; font-family:inherit; font-weight:500; color-scheme:light;"
|
||||
onfocus="this.style.borderColor='#e0e7ff'; this.style.background='#fff'" onblur="this.style.borderColor='transparent'; this.style.background='#f8fafc'" required>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block; font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1.5px; margin-bottom:8px; text-transform:uppercase;">
|
||||
Tanggal Selesai
|
||||
</label>
|
||||
<input type="date" name="tanggal_selesai" value="{{ old('tanggal_selesai') }}"
|
||||
style="width:100%; padding:14px 16px; background:#f8fafc; border:2px solid transparent; border-radius:12px; font-size:14px; color:#334155; outline:none; box-sizing:border-box; transition:all 0.2s; font-family:inherit; font-weight:500; color-scheme:light;"
|
||||
onfocus="this.style.borderColor='#e0e7ff'; this.style.background='#fff'" onblur="this.style.borderColor='transparent'; this.style.background='#f8fafc'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
style="width:100%; padding:16px; background:#0D215C; color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; transition:all 0.2s;"
|
||||
onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 20px rgba(13,33,92,0.2)'"
|
||||
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
|
||||
Konfirmasi & Kirim Tugas
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- KEMBALI LINK --}}
|
||||
<div style="margin-top:30px;">
|
||||
<a href="{{ route('admin.superadmin.dashboard') }}"
|
||||
style="font-size:13px; font-weight:700; color:#64748b; letter-spacing:1px; text-decoration:none; text-transform:uppercase; transition:color 0.2s;"
|
||||
onmouseover="this.style.color='#0D215C'" onmouseout="this.style.color='#64748b'">
|
||||
Kembali Ke Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,202 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.page-container { padding: 40px 20px; background: #f4f7fb; min-height: calc(100vh - 70px); font-family: 'Outfit', 'Segoe UI', sans-serif; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
|
||||
.detail-card { background: #fff; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); width: 100%; max-width: 700px; overflow: hidden; box-sizing: border-box; }
|
||||
.card-header { padding: 30px 40px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: flex-start; }
|
||||
.info-grid { padding: 30px 40px; display: flex; gap: 30px; border-top: 1px solid #f1f5f9; }
|
||||
.section-padding { padding: 30px 40px; }
|
||||
.action-card { margin-top: 20px; background: white; padding: 24px 30px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.02); width: 100%; max-width: 700px; box-sizing: border-box; }
|
||||
.action-flex { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||
.revision-form { display: flex; gap: 10px; flex: 1; min-width: 300px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-container { padding: 20px 15px !important; }
|
||||
.detail-card { border-radius: 16px !important; }
|
||||
.card-header { flex-direction: column !important; gap: 20px !important; padding: 20px 20px !important; }
|
||||
.card-header > div:last-child { text-align: left !important; }
|
||||
.info-grid { flex-direction: column !important; gap: 20px !important; padding: 20px 20px !important; }
|
||||
.section-padding { padding: 20px 20px !important; }
|
||||
.action-card { padding: 20px !important; }
|
||||
.revision-form { flex-direction: column !important; min-width: 100% !important; }
|
||||
.revision-form button { width: 100% !important; }
|
||||
}
|
||||
</style>
|
||||
<div class="page-container">
|
||||
|
||||
{{-- HEADER --}}
|
||||
<div style="text-align:center; margin-bottom:30px;">
|
||||
<h1 style="font-size:28px; font-weight:800; color:#0f172a; margin:0 0 8px; letter-spacing:-0.5px;">Detail Penugasan</h1>
|
||||
<p style="margin:0; color:#64748b; font-size:15px; font-weight:500;">Tinjauan lengkap tentang kegiatan dan petugas yang ditugaskan</p>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div style="width:100%; max-width:700px; margin-bottom:20px; padding:14px 18px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:12px; color:#047857; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- DETAIL CARD --}}
|
||||
<div class="detail-card">
|
||||
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<span style="display:inline-block; padding:6px 12px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px;
|
||||
{{ $activity->status == 'selesai' ? 'background:#ecfdf5; color:#059669;' :
|
||||
($activity->status == 'dibatalkan' ? 'background:#fef2f2; color:#dc2626;' : 'background:#eff6ff; color:#2563eb;') }}">
|
||||
{{ str_replace('_', ' ', $activity->status) }}
|
||||
</span>
|
||||
<h2 style="margin:0 0 5px; font-size:22px; font-weight:800; color:#0f172a;">{{ $activity->nama_kegiatan }}</h2>
|
||||
<div style="color:#64748b; font-size:13px; font-weight:500;">Nomor Surat: {{ $activity->nomor_surat ?? '-' }}</div>
|
||||
</div>
|
||||
<div style="text-align:right;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px;">Tanggal Mulai</div>
|
||||
<div style="font-size:15px; font-weight:700; color:#0f172a; margin-bottom:10px;">{{ \Carbon\Carbon::parse($activity->tanggal)->translatedFormat('d F Y') }}</div>
|
||||
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:4px;">Tenggat Waktu</div>
|
||||
<div style="font-size:15px; font-weight:700; color:#0f172a;">
|
||||
@if($activity->tanggal_selesai)
|
||||
@php
|
||||
$isOverdue = \Carbon\Carbon::parse($activity->tanggal_selesai)->isPast() && $activity->status !== 'selesai' && $activity->status !== 'telah_ditinjau';
|
||||
@endphp
|
||||
<span style="{{ $isOverdue ? 'color:#dc2626; font-weight:800;' : '' }}">
|
||||
{{ \Carbon\Carbon::parse($activity->tanggal_selesai)->translatedFormat('d F Y') }}
|
||||
@if($isOverdue) <span style="font-size:11px; color:#ef4444; margin-left:4px;">(Terlambat)</span> @endif
|
||||
</span>
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-padding" style="background:#f8fafc;">
|
||||
<h3 style="font-size:13px; font-weight:800; color:#64748b; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 16px;">Ditugaskan Kepada</h3>
|
||||
|
||||
<div style="display:flex; flex-direction:column; gap:12px;">
|
||||
@forelse($activity->petugas ?? [] as $petugas)
|
||||
<div style="display:flex; align-items:center; gap:15px; background:#fff; padding:12px 16px; border-radius:12px; border:1px solid #e2e8f0;">
|
||||
<div style="width:40px; height:40px; border-radius:50%; background:#e0e7ff; color:#3730a3; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;">
|
||||
{{ strtoupper(substr($petugas['name'], 0, 2)) }}
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:700; color:#0f172a; margin-bottom:2px;">{{ $petugas['name'] }}</div>
|
||||
<div style="font-size:12px; color:#64748b; font-weight:500;">{{ $petugas['jabatan'] ?? 'Petugas Lapangan' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div style="font-size:13px; color:#94a3b8; font-style:italic;">Belum ada petugas yang ditetapkan.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;">Lokasi Tugas</div>
|
||||
<div style="font-size:14px; font-weight:600; color:#0f172a;">{{ $activity->lokasi ?? '-' }}</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;">Deskripsi Tugas</div>
|
||||
<div style="font-size:14px; font-weight:500; color:#334155;">{{ $activity->deskripsi ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!empty($activity->status_note))
|
||||
<div class="section-padding" style="background:#eff6ff; border-top:1px solid #bfdbfe;">
|
||||
<div style="font-size:11px; font-weight:800; color:#2563eb; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px;">Catatan Status Terakhir</div>
|
||||
<div style="font-size:14px; font-weight:500; color:#1e3a8a; line-height:1.6;">{{ $activity->status_note }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- TIMELINE PROGRESS MONITORING --}}
|
||||
<div class="section-padding" style="background:#ffffff; border-top:1px solid #f1f5f9;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px;">Log Monitoring Progress</div>
|
||||
|
||||
@if(isset($activity->progress) && count($activity->progress) > 0)
|
||||
<div style="position:relative; border-left:2px solid #e0e7ff; margin-left:10px; padding-left:20px; display:flex; flex-direction:column; gap:24px;">
|
||||
@foreach($activity->progress as $prog)
|
||||
<div style="position:relative;">
|
||||
<div style="position:absolute; left:-27px; top:4px; width:12px; height:12px; background:#6366f1; border-radius:50%; border:2px solid #fff;"></div>
|
||||
<div style="font-size:12px; color:#64748b; margin-bottom:4px;">
|
||||
{{ \Carbon\Carbon::parse($prog['created_at'])->format('d M Y, H:i') }} •
|
||||
<span style="font-weight:700; color:#6366f1;">{{ $prog['user']['name'] ?? 'Pegawai' }}</span>
|
||||
</div>
|
||||
<div style="font-size:14px; color:#334155; background:#f8fafc; border:1px solid #f1f5f9; padding:12px 16px; border-radius:10px;">
|
||||
{{ $prog['note'] }}
|
||||
@if(!empty($prog['attachment']))
|
||||
<div style="margin-top:10px; padding-top:10px; border-top:1px solid #e2e8f0;">
|
||||
<a href="http://127.0.0.1:8000/{{ $prog['attachment'] }}" target="_blank"
|
||||
style="display:inline-block; font-size:12px; font-weight:600; color:#4f46e5; text-decoration:none; background:#e0e7ff; padding:4px 10px; border-radius:6px; border:1px solid #c7d2fe;">
|
||||
📎 Lihat Lampiran Bukti
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div style="font-size:13px; color:#64748b; background:#f8fafc; padding:20px; border-radius:10px; text-align:center; border:1px dashed #cbd5e1;">
|
||||
Belum ada log progress yang dicatat untuk kegiatan ini.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="info-grid">
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;">Dibuat Oleh</div>
|
||||
<div style="font-size:14px; font-weight:600; color:#0f172a;">{{ $activity->user->name ?? 'System' }}</div>
|
||||
</div>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:11px; font-weight:800; color:#94a3b8; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;">Pembaruan Terakhir</div>
|
||||
<div style="font-size:14px; font-weight:600; color:#0f172a;">{{ $activity->updated_at->diffForHumans() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- TINDAKAN REVIEW (SUPERADMIN) --}}
|
||||
@if($activity->status == 'selesai')
|
||||
<div class="action-card">
|
||||
<h4 style="margin-top:0; margin-bottom:16px; font-size:16px; color:#1e293b;">Tindakan Review (Verifikasi)</h4>
|
||||
|
||||
<div class="action-flex">
|
||||
{{-- Setujui (Telah Ditinjau) --}}
|
||||
<form action="{{ route('admin.superadmin.kegiatan.approve', $activity->id) }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" onclick="return confirm('Setujui laporan ini?')"
|
||||
style="background:#16a34a; color:white; border:none; padding:10px 20px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; transition:0.2s;"
|
||||
onmouseover="this.style.background='#15803d'" onmouseout="this.style.background='#16a34a'">
|
||||
✓ Setujui (Telah Ditinjau)
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{-- Minta Revisi --}}
|
||||
<form action="{{ route('admin.superadmin.kegiatan.revision', $activity->id) }}" method="POST" class="revision-form">
|
||||
@csrf
|
||||
<input type="text" name="status_note" required placeholder="Catatan Revisi (misal: Mohon perbaiki foto)"
|
||||
style="flex:1; padding:10px 16px; border:1px solid #cbd5e1; border-radius:10px; font-size:14px; outline:none;"
|
||||
onfocus="this.style.borderColor='#3b82f6'" onblur="this.style.borderColor='#cbd5e1'">
|
||||
<button type="submit" onclick="return confirm('Kembalikan laporan ini ke pegawai untuk direvisi?')"
|
||||
style="background:#f59e0b; color:white; border:none; padding:10px 20px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; transition:0.2s; white-space:nowrap;"
|
||||
onmouseover="this.style.background='#d97706'" onmouseout="this.style.background='#f59e0b'">
|
||||
⟲ Minta Revisi
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- KEMBALI LINK --}}
|
||||
<div style="margin-top:30px;">
|
||||
<a href="{{ route('admin.superadmin.dashboard') }}"
|
||||
style="font-size:13px; font-weight:700; color:#64748b; letter-spacing:1px; text-decoration:none; text-transform:uppercase; transition:color 0.2s;"
|
||||
onmouseover="this.style.color='#0D215C'" onmouseout="this.style.color='#64748b'">
|
||||
Kembali Ke Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user