Initial commit for combined ProjectKP
This commit is contained in:
raditarahman5-cloud
@@ -0,0 +1,334 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- STYLES --}}
|
||||
<style>
|
||||
/* Reset & Base */
|
||||
:root {
|
||||
--bg-main: #f4f7fb;
|
||||
--card-bg: #ffffff;
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-muted: #94a3b8;
|
||||
--text-faint: #cbd5e1;
|
||||
--border-color: #e2e8f0;
|
||||
|
||||
--blue-dark: #0D215C;
|
||||
--blue-mid: #2563eb;
|
||||
--blue-pale: #bfdbfe;
|
||||
--blue-ultra: #eff6ff;
|
||||
|
||||
--green: #10b981;
|
||||
--red: #ef4444;
|
||||
--amber: #f59e0b;
|
||||
}
|
||||
|
||||
.sa-container {
|
||||
padding: 30px;
|
||||
background: var(--bg-main);
|
||||
min-height: calc(100vh - 70px);
|
||||
font-family: 'Outfit', 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.sa-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sa-title-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sa-title-wrap h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -1px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sa-title-wrap h1::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
background: #000;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: var(--blue-mid);
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-back:hover {
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Cards Grid */
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(226,232,240,0.6);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.news-card a:hover .news-title {
|
||||
color: var(--blue-mid);
|
||||
}
|
||||
|
||||
.news-image {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.news-meta svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
margin: 0 0 12px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.status-badge.selesai { background: #ecfdf5; color: #059669; }
|
||||
.status-badge.proses { background: #eff6ff; color: #2563eb; }
|
||||
.status-badge.batal { background: #fef2f2; color: #dc2626; }
|
||||
|
||||
.btn-restore {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--blue-mid);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-restore:hover {
|
||||
background: var(--blue-ultra);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
border: 1px dashed var(--border-color);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sa-container {
|
||||
padding: 15px;
|
||||
}
|
||||
.sa-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
.btn-back {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{{-- ICONS --}}
|
||||
<svg width="0" height="0" style="position:absolute; display:none;">
|
||||
<symbol id="ic-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</symbol>
|
||||
<symbol id="ic-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</symbol>
|
||||
<symbol id="ic-restore" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
||||
<path d="M3 3v5h5"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="sa-container">
|
||||
<div class="sa-header">
|
||||
<div class="sa-title-wrap">
|
||||
<h1>Arsip Laporan</h1>
|
||||
</div>
|
||||
<a href="{{ route('admin.superadmin.dashboard') }}" class="btn-back">← Kembali ke Dashboard</a>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div style="padding:14px 18px; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:12px; color:#047857; font-size:14px; font-weight:600; margin-bottom:24px; display:flex; align-items:center; gap:10px;">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path></svg>
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div style="padding:14px 18px; background:#fef2f2; border:1px solid #fecaca; border-radius:12px; color:#dc2626; font-size:14px; font-weight:600; margin-bottom:24px; display:flex; align-items:center; gap:10px;">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="news-grid">
|
||||
@forelse($activities as $act)
|
||||
@php
|
||||
// Generate a consistent dummy views count based on ID
|
||||
$views = ($act->id * 17) % 1000 + 50;
|
||||
|
||||
// Array of default placeholder images for variety
|
||||
$placeholders = [
|
||||
'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=600&auto=format&fit=crop', // office/planning
|
||||
'https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=600&auto=format&fit=crop', // teamwork
|
||||
'https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=600&auto=format&fit=crop', // meeting
|
||||
'https://images.unsplash.com/photo-1507537297725-24a1c029d3ca?q=80&w=600&auto=format&fit=crop', // paper/desk
|
||||
'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=600&auto=format&fit=crop' // tech/research
|
||||
];
|
||||
$imgSrc = $placeholders[$act->id % count($placeholders)];
|
||||
@endphp
|
||||
<div class="news-card">
|
||||
<a href="{{ route('admin.superadmin.kegiatan.show', $act->id) }}" style="text-decoration: none; color: inherit; display: flex; flex-direction: column; flex-grow: 1;">
|
||||
<img src="{{ $imgSrc }}" alt="Laporan Image" class="news-image" loading="lazy">
|
||||
<div class="news-content" style="padding-bottom: 0; flex-grow: 1;">
|
||||
<div class="news-meta">
|
||||
<div class="meta-item">
|
||||
<svg><use href="#ic-calendar"/></svg>
|
||||
<span>{{ \Carbon\Carbon::parse($act->tanggal)->translatedFormat('d M Y') }}</span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<div class="meta-item">
|
||||
<svg><use href="#ic-eye"/></svg>
|
||||
<span>{{ $views }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="news-title" title="{{ $act->nama_kegiatan }}">{{ $act->nama_kegiatan }}</h3>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="news-content" style="padding-top: 10px; flex-grow: 0;">
|
||||
<div class="news-footer">
|
||||
<span class="status-badge {{ $act->status == 'selesai' ? 'selesai' : ($act->status == 'dibatalkan' ? 'batal' : 'proses') }}">
|
||||
{{ strtoupper(str_replace('_', ' ', $act->status)) }}
|
||||
</span>
|
||||
|
||||
<form action="{{ route('admin.superadmin.kegiatan.archive', $act->id) }}" method="POST" style="margin: 0;">
|
||||
@csrf
|
||||
<button type="submit" class="btn-restore" title="Kembalikan Laporan">
|
||||
<svg width="16" height="16"><use href="#ic-restore"/></svg>
|
||||
Restore
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="empty-state">
|
||||
<svg width="64" height="64" style="color:var(--text-faint); margin-bottom:15px;" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
||||
<h3>Belum ada arsip laporan</h3>
|
||||
<p>Laporan yang diarsipkan akan muncul di sini.</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@if($activities->hasPages())
|
||||
<div style="margin-top:40px; display:flex; justify-content:center;">
|
||||
{{ $activities->links('pagination::bootstrap-4') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
@@ -0,0 +1,222 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
.page-container { padding: 28px 32px; background: #f1f5f9; min-height: 100vh; font-family: 'Figtree', 'Segoe UI', sans-serif; }
|
||||
.header-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
|
||||
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: flex-start; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
|
||||
.form-actions { border-top: 1px solid #f1f5f9; padding-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-container { padding: 16px 12px !important; }
|
||||
.header-flex { flex-direction: column !important; gap: 16px !important; }
|
||||
.main-grid { grid-template-columns: 1fr !important; }
|
||||
.form-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
|
||||
.form-actions { flex-direction: column !important; }
|
||||
.form-actions a, .form-actions button { width: 100% !important; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-container">
|
||||
|
||||
{{-- HEADER --}}
|
||||
<div class="header-flex">
|
||||
<div>
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
style="font-size:12px; color:#64748b; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-bottom:10px; font-weight:600;"
|
||||
onmouseover="this.style.color='#0D215C'" onmouseout="this.style.color='#64748b'">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M19 12H5M12 5l-7 7 7 7"/>
|
||||
</svg>
|
||||
Kembali ke Manajemen Pengguna
|
||||
</a>
|
||||
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.8px; margin:0 0 6px; text-transform:uppercase;">Panel Kendali Sistem</p>
|
||||
<h1 style="font-size:28px; font-weight:800; color:#0f172a; margin:0 0 4px;">Tambah Pengguna</h1>
|
||||
<p style="margin:0; color:#94a3b8; font-size:13px;">Buat akun baru untuk pegawai atau administrator sistem</p>
|
||||
</div>
|
||||
<div style="background:#eef2ff; color:#4338ca; padding:9px 14px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;">
|
||||
<div style="width:8px; height:8px; background:#4338ca; border-radius:50%;"></div>
|
||||
{{ strtoupper(session('user')['role'] ?? 'ADMINISTRATOR') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(session('error'))
|
||||
<div style="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
|
||||
|
||||
<div class="main-grid">
|
||||
|
||||
{{-- FORM CARD --}}
|
||||
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden;">
|
||||
<div style="padding:20px 24px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:32px; height:32px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="16" height="16" fill="none" stroke="#2563eb" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<line x1="19" y1="8" x2="19" y2="14"/>
|
||||
<line x1="22" y1="11" x2="16" y2="11"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="margin:0; font-size:16px; font-weight:700; color:#0f172a;">Data Pengguna Baru</h3>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.superadmin.user.store') }}" method="POST" style="padding:28px 24px;">
|
||||
@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 class="form-grid">
|
||||
{{-- NAMA --}}
|
||||
<div>
|
||||
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
||||
Nama Lengkap <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<input type="text" name="name" value="{{ old('name') }}"
|
||||
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
||||
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
||||
placeholder="Nama lengkap pegawai" required>
|
||||
</div>
|
||||
|
||||
{{-- USERNAME --}}
|
||||
<div>
|
||||
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
||||
Username <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<input type="text" name="username" value="{{ old('username') }}"
|
||||
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
||||
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
||||
placeholder="Username untuk login" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-grid">
|
||||
{{-- PASSWORD --}}
|
||||
<div>
|
||||
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
||||
Kata Sandi <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<div style="position:relative;">
|
||||
<input type="password" name="password" id="password_field"
|
||||
style="width:100%; padding:11px 40px 11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
|
||||
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
|
||||
placeholder="Minimal 6 karakter" required>
|
||||
<button type="button" onclick="togglePassword('password_field', this)"
|
||||
style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; justify-content:center;">
|
||||
<svg class="eye-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg class="eye-off-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ROLE --}}
|
||||
<div>
|
||||
<label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
|
||||
Hak Akses (Role) <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<select name="role"
|
||||
style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#fff;"
|
||||
onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'">
|
||||
<option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Petugas (User)</option>
|
||||
<option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin (KASI)</option>
|
||||
<option value="superadmin" {{ old('role') == 'superadmin' ? 'selected' : '' }}>Super Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
style="padding:10px 20px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:13px; font-weight:700; color:#64748b; text-decoration:none; background:#f8fafc;"
|
||||
onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f8fafc'">
|
||||
Batal
|
||||
</a>
|
||||
<button type="submit"
|
||||
style="padding:10px 24px; background:#0D215C; color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px;"
|
||||
onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<line x1="19" y1="8" x2="19" y2="14"/>
|
||||
<line x1="22" y1="11" x2="16" y2="11"/>
|
||||
</svg>
|
||||
Tambah Pengguna
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- TIPS CARD --}}
|
||||
<div>
|
||||
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; padding:20px; margin-bottom:16px;">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px;">
|
||||
<div style="width:28px; height:28px; background:#f0fdf4; border-radius:8px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="14" height="14" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span style="font-size:14px; font-weight:700; color:#0f172a;">Panduan Pengisian</span>
|
||||
</div>
|
||||
<ul style="margin:0; padding-left:16px; font-size:12px; color:#64748b; line-height:1.9;">
|
||||
<li>Nama sesuai dengan dokumen resmi</li>
|
||||
<li>Username digunakan untuk login</li>
|
||||
|
||||
<li>Kata sandi minimal 6 karakter</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background:#eff6ff; border-radius:16px; border:1px solid #bfdbfe; padding:18px 20px;">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
|
||||
<svg width="16" height="16" fill="#2563eb" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
<span style="font-size:13px; font-weight:700; color:#1d4ed8;">Panduan Role</span>
|
||||
</div>
|
||||
<ul style="margin:0; padding-left:16px; font-size:12px; color:#3b82f6; line-height:1.8;">
|
||||
<li><strong>Petugas</strong>: Input kegiatan harian</li>
|
||||
<li><strong>Admin</strong>: Monitor kegiatan & user</li>
|
||||
<li><strong>Super Admin</strong>: Akses penuh sistem</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
<script>
|
||||
function togglePassword(inputId, buttonElement) {
|
||||
const input = document.getElementById(inputId);
|
||||
const eyeIcon = buttonElement.querySelector('.eye-icon');
|
||||
const eyeOffIcon = buttonElement.querySelector('.eye-off-icon');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
eyeIcon.style.display = 'none';
|
||||
eyeOffIcon.style.display = 'block';
|
||||
buttonElement.style.color = '#2563eb';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
eyeIcon.style.display = 'block';
|
||||
eyeOffIcon.style.display = 'none';
|
||||
buttonElement.style.color = '#94a3b8';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,346 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
.page-container { padding: 28px 32px; background: #f1f5f9; min-height: 100vh; font-family: 'Figtree', 'Segoe UI', sans-serif; }
|
||||
.header-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
|
||||
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: flex-start; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.form-actions { border-top: 1px solid #f1f5f9; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-container { padding: 16px 12px !important; }
|
||||
.header-flex { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
|
||||
.main-grid { grid-template-columns: 1fr !important; }
|
||||
.form-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
|
||||
.form-actions { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; }
|
||||
.form-actions a, .form-actions button { width: 100% !important; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="page-container">
|
||||
|
||||
{{-- HEADER --}}
|
||||
<div class="header-flex">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
||||
<div style="width:24px; height:2px; background:#3b82f6;"></div>
|
||||
<p style="font-size:11px; font-weight:700; color:#3b82f6; letter-spacing:1px; margin:0; text-transform:uppercase;">
|
||||
Panel Kendali Sistem
|
||||
</p>
|
||||
</div>
|
||||
<h1 style="font-size:28px; font-weight:800; color:#0f172a; margin:0 0 4px;">
|
||||
Edit Pengguna
|
||||
</h1>
|
||||
<p style="margin:0; color:#64748b; font-size:13px;">
|
||||
Ubah informasi akun dan hak akses pengguna
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:12px;">
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
style="background:#fff; border:1px solid #e2e8f0; padding:8px 16px; border-radius:999px; font-size:12px; font-weight:600; color:#475569; text-decoration:none; display:flex; align-items:center; gap:6px;">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M19 12H5M12 5l-7 7 7 7"/>
|
||||
</svg>
|
||||
Kembali ke Daftar
|
||||
</a>
|
||||
<div style="background:#fef3c7; color:#b45309; border:1px solid #fde68a; padding:8px 16px; border-radius:999px; font-size:11px; font-weight:800; display:flex; align-items:center; gap:6px; letter-spacing:0.5px;">
|
||||
<svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||
</svg>
|
||||
SUPER ADMIN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(session('success'))
|
||||
<div style="margin-bottom:20px; padding:14px 18px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; color:#15803d; 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"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div style="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
|
||||
@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 class="main-grid">
|
||||
|
||||
{{-- LEFT SIDEBAR --}}
|
||||
<div>
|
||||
{{-- Profile Card --}}
|
||||
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden; margin-bottom:16px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
|
||||
{{-- Gradient Top --}}
|
||||
<div style="background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%); padding:32px 20px; text-align:center; position:relative;">
|
||||
|
||||
@php
|
||||
$initials = strtoupper(substr($user->name, 0, 2));
|
||||
@endphp
|
||||
<div style="width:72px; height:72px; background:rgba(255,255,255,0.2); border:2px solid rgba(255,255,255,0.4); border-radius:20px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; margin:0 auto 16px; box-shadow:0 4px 12px rgba(0,0,0,0.1); backdrop-filter:blur(4px);">
|
||||
{{ $initials }}
|
||||
</div>
|
||||
|
||||
<h2 style="margin:0 0 4px; color:#fff; font-size:18px; font-weight:700;">{{ $user->name }}</h2>
|
||||
<p style="margin:0 0 16px; color:#e0e7ff; font-size:12px;">{{ $user->email ?? $user->username }}</p>
|
||||
|
||||
<div style="display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.2); padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:10px; font-weight:800; letter-spacing:0.5px;">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
{{ strtoupper($user->role) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Stats List --}}
|
||||
<div style="padding:16px;">
|
||||
<div style="display:flex; align-items:center; gap:12px; padding:12px; background:#f8fafc; border-radius:12px; border:1px solid #f1f5f9; margin-bottom:12px;">
|
||||
<div style="color:#64748b;"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
||||
<div>
|
||||
<div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px;">User ID</div>
|
||||
<div style="font-size:13px; font-weight:700; color:#0f172a;">#{{ $user->id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:12px; padding:12px; background:#f8fafc; border-radius:12px; border:1px solid #f1f5f9; margin-bottom:12px;">
|
||||
<div style="color:#10b981;"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
|
||||
<div>
|
||||
<div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px;">Total Aktivitas</div>
|
||||
<div style="font-size:13px; font-weight:700; color:#0f172a;">{{ $user->activities_count ?? 0 }} kegiatan</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:12px; padding:12px; background:#f8fafc; border-radius:12px; border:1px solid #f1f5f9; margin-bottom:12px;">
|
||||
<div style="color:#8b5cf6;"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
||||
<div>
|
||||
<div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px;">Bergabung</div>
|
||||
<div style="font-size:13px; font-weight:700; color:#0f172a;">{{ \Carbon\Carbon::parse($user->created_at)->translatedFormat('d F Y') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; align-items:center; gap:12px; padding:12px; background:#f8fafc; border-radius:12px; border:1px solid #f1f5f9;">
|
||||
<div style="color:#f59e0b;"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
||||
<div>
|
||||
<div style="font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px;">Terakhir Diperbarui</div>
|
||||
<div style="font-size:13px; font-weight:700; color:#0f172a;">{{ \Carbon\Carbon::parse($user->updated_at ?? $user->created_at)->translatedFormat('d F Y') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Warning Box --}}
|
||||
<div style="margin:0 16px 16px; padding:14px; background:#fefce8; border:1px solid #fef08a; border-radius:12px; display:flex; gap:10px; align-items:flex-start;">
|
||||
<div style="color:#b45309; flex-shrink:0;">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size:11px; color:#b45309; line-height:1.5;">
|
||||
Perubahan data akan langsung berpengaruh pada akses sistem pengguna ini.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- FORM MAIN CONTENT --}}
|
||||
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
|
||||
<div style="padding:20px 28px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:12px;">
|
||||
<div style="width:36px; height:36px; background:#eff6ff; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#3b82f6;">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="margin:0 0 4px; font-size:15px; font-weight:700; color:#0f172a;">Formulir Edit Pengguna</h3>
|
||||
<p style="margin:0; font-size:12px; color:#94a3b8;">Perbarui informasi akun pengguna di bawah ini</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.superadmin.user.update', $user->id) }}" method="POST" style="padding:28px;">
|
||||
@csrf
|
||||
|
||||
{{-- INFORMASI DASAR --}}
|
||||
<div style="margin-bottom:28px;">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
|
||||
<div style="width:6px; height:6px; background:#3b82f6; border-radius:50%;"></div>
|
||||
<h4 style="margin:0; font-size:12px; font-weight:800; color:#3b82f6; letter-spacing:1px;">INFORMASI DASAR</h4>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<label style="display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:8px;">
|
||||
Nama Lengkap <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<input type="text" name="name" value="{{ old('name', $user->name) }}"
|
||||
style="width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#f8fafc;"
|
||||
onfocus="this.style.borderColor='#3b82f6'; this.style.background='#fff'"
|
||||
onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc'" required>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:8px;">
|
||||
Username <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<input type="text" name="username" value="{{ old('username', $user->username) }}"
|
||||
style="width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#f8fafc;"
|
||||
onfocus="this.style.borderColor='#3b82f6'; this.style.background='#fff'"
|
||||
onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc'" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{-- ROLE & HAK AKSES --}}
|
||||
<div style="margin-bottom:28px;">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
|
||||
<div style="width:6px; height:6px; background:#3b82f6; border-radius:50%;"></div>
|
||||
<h4 style="margin:0; font-size:12px; font-weight:800; color:#3b82f6; letter-spacing:1px;">ROLE & HAK AKSES</h4>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display:block; font-size:12px; font-weight:600; color:#475569; margin-bottom:8px;">
|
||||
Role Pengguna <span style="color:#ef4444;">*</span>
|
||||
</label>
|
||||
<select name="role"
|
||||
style="width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#f8fafc; appearance:none;"
|
||||
onfocus="this.style.borderColor='#3b82f6'; this.style.background='#fff'"
|
||||
onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc'" required>
|
||||
<option value="superadmin" {{ old('role', $user->role) == 'superadmin' ? 'selected' : '' }}>Super Admin</option>
|
||||
<option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Administrator</option>
|
||||
<option value="user" {{ old('role', $user->role) == 'user' ? 'selected' : '' }}>User</option>
|
||||
</select>
|
||||
<p style="margin:6px 0 0; font-size:11px; color:#94a3b8; display:flex; align-items:center; gap:4px;">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||||
Role menentukan level akses pengguna di dalam sistem
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- GANTI PASSWORD --}}
|
||||
<div style="margin-bottom:32px;">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
|
||||
<div style="width:6px; height:6px; background:#3b82f6; border-radius:50%;"></div>
|
||||
<h4 style="margin:0; font-size:12px; font-weight:800; color:#3b82f6; letter-spacing:1px;">GANTI PASSWORD <span style="font-weight:500; color:#94a3b8; text-transform:none; letter-spacing:0;">(Kosongkan jika tidak ingin mengubah)</span></h4>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:8px;">
|
||||
<label style="font-size:12px; font-weight:600; color:#475569;">
|
||||
Password Baru
|
||||
</label>
|
||||
<span style="background:#f1f5f9; color:#64748b; padding:2px 6px; border-radius:4px; font-size:10px;">Opsional</span>
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<input type="password" name="password" id="edit_password"
|
||||
style="width:100%; padding:10px 40px 10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#f8fafc;"
|
||||
onfocus="this.style.borderColor='#3b82f6'; this.style.background='#fff'"
|
||||
onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc'"
|
||||
placeholder="Min. 8 karakter">
|
||||
<button type="button" onclick="togglePassword('edit_password', this)"
|
||||
style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; justify-content:center;">
|
||||
<svg class="eye-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg class="eye-off-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:6px; margin-bottom:8px;">
|
||||
<label style="font-size:12px; font-weight:600; color:#475569;">
|
||||
Konfirmasi Password
|
||||
</label>
|
||||
<span style="background:#f1f5f9; color:#64748b; padding:2px 6px; border-radius:4px; font-size:10px;">Opsional</span>
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<input type="password" name="password_confirmation" id="edit_password_confirmation"
|
||||
style="width:100%; padding:10px 40px 10px 14px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#f8fafc;"
|
||||
onfocus="this.style.borderColor='#3b82f6'; this.style.background='#fff'"
|
||||
onblur="this.style.borderColor='#e2e8f0'; this.style.background='#f8fafc'"
|
||||
placeholder="Ulangi password baru">
|
||||
<button type="button" onclick="togglePassword('edit_password_confirmation', this)"
|
||||
style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; justify-content:center;">
|
||||
<svg class="eye-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg class="eye-off-icon" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- FOOTER BUTTONS --}}
|
||||
<div class="form-actions">
|
||||
<div style="font-size:12px; color:#64748b; display:flex; align-items:center; gap:6px;">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||||
Field bertanda <span style="color:#ef4444;">*</span> wajib diisi
|
||||
</div>
|
||||
<div style="display:flex; gap:12px;">
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
style="padding:10px 24px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; font-weight:700; color:#475569; text-decoration:none; background:#fff; transition:all .2s;"
|
||||
onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background='#fff'">
|
||||
Batal
|
||||
</a>
|
||||
<button type="submit"
|
||||
style="padding:10px 24px; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; transition:opacity .2s;"
|
||||
onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
||||
<polyline points="7 3 7 8 15 8"/>
|
||||
</svg>
|
||||
Simpan Perubahan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
<script>
|
||||
function togglePassword(inputId, buttonElement) {
|
||||
const input = document.getElementById(inputId);
|
||||
const eyeIcon = buttonElement.querySelector('.eye-icon');
|
||||
const eyeOffIcon = buttonElement.querySelector('.eye-off-icon');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
eyeIcon.style.display = 'none';
|
||||
eyeOffIcon.style.display = 'block';
|
||||
buttonElement.style.color = '#3b82f6';
|
||||
} else {
|
||||
input.type = 'password';
|
||||
eyeIcon.style.display = 'block';
|
||||
eyeOffIcon.style.display = 'none';
|
||||
buttonElement.style.color = '#94a3b8';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,328 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="page-container" style="padding:28px 32px; background:#f1f5f9; min-height:100vh; font-family:'Figtree','Segoe UI',sans-serif;">
|
||||
<style>
|
||||
.hover-card {
|
||||
transition: all .3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 18px 35px rgba(15, 23, 42, .12);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-container { padding: 16px 12px !important; }
|
||||
.header-flex { flex-direction: column !important; gap: 16px !important; }
|
||||
.stats-grid { grid-template-columns: 1fr !important; }
|
||||
.toolbar-flex { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
|
||||
.toolbar-right { flex-direction: column !important; align-items: stretch !important; }
|
||||
.search-input { width: 100% !important; }
|
||||
.btn-tambah { justify-content: center !important; }
|
||||
.header-badges { flex-wrap: wrap; }
|
||||
.table-wrap table { min-width: 800px !important; }
|
||||
}
|
||||
</style>
|
||||
{{-- HEADER --}}
|
||||
<div class="header-flex" style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px;">
|
||||
<div>
|
||||
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.8px; margin:0 0 6px; text-transform:uppercase;">
|
||||
Panel Kendali Sistem
|
||||
</p>
|
||||
<h1 style="font-size:30px; font-weight:800; color:#0f172a; margin:0 0 4px;">
|
||||
Manajemen Pengguna
|
||||
</h1>
|
||||
<p style="margin:0; color:#94a3b8; font-size:13px;">
|
||||
Kelola seluruh akun dan hak akses pengguna sistem
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="header-badges" style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="background:#fff; border:1px solid #e2e8f0; padding:9px 14px; border-radius:10px; font-size:13px; color:#64748b; display:flex; align-items:center; gap:6px;">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
{{ now()->translatedFormat('l, d F Y') }}
|
||||
</div>
|
||||
<div style="background:#eef2ff; color:#4338ca; padding:9px 14px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;">
|
||||
<div style="width:8px; height:8px; background:#4338ca; border-radius:50%;"></div>
|
||||
{{ strtoupper(session('user')['role'] ?? 'ADMINISTRATOR') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- STATISTIC CARDS --}}
|
||||
<div class="stats-grid" style="display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;">
|
||||
|
||||
{{-- Card 1 --}}
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
class="hover-card"
|
||||
style="text-decoration:none; display:block; background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
|
||||
<div style="position:absolute; top:0; left:0; right:0; height:3px; background:#3b82f6;"></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-start;">
|
||||
<div>
|
||||
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
|
||||
Total Pengguna
|
||||
</p>
|
||||
<h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
|
||||
{{ $stats['total'] }}
|
||||
</h2>
|
||||
<p style="font-size:12px; color:#94a3b8; margin:0;">Seluruh akun terdaftar</p>
|
||||
</div>
|
||||
<div style="width:44px; height:44px; background:#eff6ff; border-radius:12px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="20" height="20" fill="none" stroke="#3b82f6" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{{-- Card 2 --}}
|
||||
<a href="{{ route('admin.superadmin.user.index') }}"
|
||||
class="hover-card"
|
||||
style="text-decoration:none; display:block; background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
|
||||
<div style="position:absolute; top:0; left:0; right:0; height:3px; background:#10b981;"></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-start;">
|
||||
<div>
|
||||
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
|
||||
Pengguna Aktif
|
||||
</p>
|
||||
<h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
|
||||
{{ $stats['active'] }}
|
||||
</h2>
|
||||
<p style="font-size:12px; color:#94a3b8; margin:0;">Memiliki aktivitas tercatat</p>
|
||||
</div>
|
||||
<div style="width:44px; height:44px; background:#f0fdf4; border-radius:12px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="20" height="20" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{{-- Card 3 --}}
|
||||
<div class="hover-card" style="background:#fff; border-radius:16px; padding:22px 24px; border:1px solid #e2e8f0; position:relative; overflow:hidden;">
|
||||
<div style="position:absolute; top:0; left:0; right:0; height:3px; background:#8b5cf6;"></div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-start;">
|
||||
<div>
|
||||
<p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.2px; margin:0 0 10px; text-transform:uppercase;">
|
||||
Total Aktivitas
|
||||
</p>
|
||||
<h2 style="font-size:36px; font-weight:800; margin:0 0 4px; color:#0f172a;">
|
||||
{{ $stats['activities'] }}
|
||||
</h2>
|
||||
<p style="font-size:12px; color:#94a3b8; margin:0;">Dari seluruh pengguna</p>
|
||||
</div>
|
||||
<div style="width:44px; height:44px; background:#f5f3ff; border-radius:12px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="20" height="20" fill="none" stroke="#8b5cf6" stroke-width="2" viewBox="0 0 24 24">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- TABLE CARD --}}
|
||||
<div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden;">
|
||||
|
||||
{{-- TABLE TOOLBAR --}}
|
||||
<div class="toolbar-flex" style="padding:18px 24px; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center; gap:12px;">
|
||||
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:32px; height:32px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
|
||||
<svg width="16" height="16" fill="none" stroke="#2563eb" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9" cy="7" r="4" />
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="margin:0; font-size:15px; font-weight:700; color:#0f172a;">Daftar Pengguna Sistem</h3>
|
||||
</div>
|
||||
<span style="background:#eff6ff; color:#2563eb; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700;">
|
||||
Total: {{ $stats['total'] }} Pengguna
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-right" style="display:flex; align-items:center; gap:10px;">
|
||||
{{-- SEARCH --}}
|
||||
<div style="position:relative; flex:1;">
|
||||
<svg style="position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#94a3b8;" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<input type="text" placeholder="Cari nama atau username..." class="search-input"
|
||||
style="padding:9px 12px 9px 32px; border:1px solid #e2e8f0; border-radius:10px; font-size:13px; color:#475569; outline:none; width:220px; background:#f8fafc; box-sizing:border-box;">
|
||||
</div>
|
||||
|
||||
{{-- TAMBAH --}}
|
||||
<a href="{{ route('admin.superadmin.user.create') }}" class="btn-tambah"
|
||||
style="background:#2563eb; color:#fff; text-decoration:none; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; box-sizing:border-box;">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Tambah Pengguna
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- TABLE --}}
|
||||
<div class="table-wrap" style="overflow-x:auto;">
|
||||
<table style="width:100%; border-collapse:collapse; min-width:800px;">
|
||||
<thead>
|
||||
<tr style="background:#f8fafc;">
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px; width:40px;">#</th>
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">PENGGUNA</th>
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">USERNAME</th>
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">ROLE</th>
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">KEGIATAN</th>
|
||||
<th style="padding:13px 16px; text-align:left; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">TERDAFTAR</th>
|
||||
<th style="padding:13px 16px; text-align:center; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.8px;">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($users as $index => $user)
|
||||
<tr style="border-top:1px solid #f1f5f9; transition:background .15s;" onmouseover="this.style.background='#fafbff'" onmouseout="this.style.background='transparent'">
|
||||
|
||||
{{-- NO --}}
|
||||
<td style="padding:16px; color:#94a3b8; font-size:13px; font-weight:600;">
|
||||
{{ $loop->iteration }}
|
||||
</td>
|
||||
|
||||
{{-- USER --}}
|
||||
<td style="padding:16px;">
|
||||
<div style="display:flex; align-items:center; gap:11px;">
|
||||
@php
|
||||
$colors = ['#2563eb','#7c3aed','#059669','#dc2626','#d97706'];
|
||||
$color = $colors[$user->id % count($colors)];
|
||||
$initials = strtoupper(substr($user->name, 0, 2));
|
||||
@endphp
|
||||
<div style="width:38px; height:38px; border-radius:10px; background:{{ $color }}; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0;">
|
||||
{{ $initials }}
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-weight:700; color:#0f172a; font-size:14px;">{{ $user->name }}</div>
|
||||
<div style="font-size:12px; color:#94a3b8;">ID #{{ $user->id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{{-- USERNAME --}}
|
||||
<td style="padding:16px; color:#475569; font-size:13px;">{{ $user->username }}</td>
|
||||
|
||||
{{-- ROLE --}}
|
||||
<td style="padding:16px;">
|
||||
@if($user->role == 'superadmin')
|
||||
<span style="background:#fef9c3; color:#854d0e; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Super Admin</span>
|
||||
@elseif($user->role == 'admin')
|
||||
<span style="background:#dbeafe; color:#1d4ed8; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Administrator</span>
|
||||
@else
|
||||
<span style="background:#dcfce7; color:#15803d; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700;">Petugas</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
{{-- ACTIVITY --}}
|
||||
<td style="padding:16px;">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<span style="font-weight:700; color:#0f172a; font-size:14px;">{{ $user->activities_count }}</span>
|
||||
<div style="height:4px; width:40px; background:#f1f5f9; border-radius:4px; overflow:hidden;">
|
||||
@php $maxAct = max($stats['max_activities'] ?? 1, 1); @endphp
|
||||
<div style="height:100%; background:#3b82f6; border-radius:4px; width:{{ min(($user->activities_count / $maxAct) * 100, 100) }}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{{-- CREATED --}}
|
||||
<td style="padding:16px; color:#64748b; font-size:13px;">
|
||||
{{ $user->created_at->translatedFormat('d M Y') }}
|
||||
</td>
|
||||
|
||||
{{-- ACTION --}}
|
||||
<td style="padding:16px; text-align:center;">
|
||||
<div style="display:flex; justify-content:center; gap:6px;">
|
||||
@php
|
||||
$editRoute = (session('user')['role'] ?? '') === 'superadmin' ? route('admin.superadmin.user.edit', $user->id) : route('admin.users.edit', $user->id);
|
||||
@endphp
|
||||
<a href="{{ $editRoute }}"
|
||||
style="background:#eff6ff; color:#2563eb; padding:7px 14px; border-radius:8px; text-decoration:none; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px;">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
Edit
|
||||
</a>
|
||||
|
||||
@if($user->role !== 'superadmin')
|
||||
<form action="{{ route('admin.superadmin.user.destroy', $user->id) }}" method="POST"
|
||||
onsubmit="return confirm('Yakin ingin menghapus pengguna ini?')" style="margin:0;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit"
|
||||
style="background:#fef2f2; color:#dc2626; padding:7px 14px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px;">
|
||||
<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<polyline points="3 6 5 6 21 6" />
|
||||
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
||||
<path d="M10 11v6" />
|
||||
<path d="M14 11v6" />
|
||||
<path d="M9 6V4h6v2" />
|
||||
</svg>
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" style="padding:48px; text-align:center; color:#94a3b8; font-size:14px;">
|
||||
<div style="display:flex; flex-direction:column; align-items:center; gap:8px;">
|
||||
<svg width="36" height="36" fill="none" stroke="#cbd5e1" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
|
||||
</svg>
|
||||
Belum ada pengguna terdaftar.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- FOOTER / PAGINATION --}}
|
||||
<div style="padding:14px 24px; border-top:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:center;">
|
||||
<p style="font-size:13px; color:#94a3b8; margin:0;">
|
||||
Menampilkan 1–{{ $users->count() }} dari {{ $users->count() }} pengguna
|
||||
</p>
|
||||
|
||||
{{-- Pagination (if using paginate()) --}}
|
||||
@if(method_exists($users, 'links'))
|
||||
<div>{{ $users->links() }}</div>
|
||||
@else
|
||||
<div style="display:flex; gap:4px;">
|
||||
<button style="width:32px; height:32px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:13px; color:#94a3b8; cursor:pointer;"><</button>
|
||||
<button style="width:32px; height:32px; border:1px solid #2563eb; background:#2563eb; border-radius:8px; font-size:13px; color:#fff; font-weight:700; cursor:pointer;">1</button>
|
||||
<button style="width:32px; height:32px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:13px; color:#94a3b8; cursor:pointer;">></button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user