429 lines
14 KiB
PHP
429 lines
14 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('content')
|
||
<style>
|
||
:root {
|
||
--primary: #16A34A;
|
||
--primary-dark: #15803D;
|
||
--primary-soft: #F0FDF4;
|
||
--danger: #DC2626;
|
||
--danger-soft: #FEF2F2;
|
||
--warning: #D97706;
|
||
--warning-soft: #FFFBEB;
|
||
--border: #E5E7EB;
|
||
--surface: #F9FAFB;
|
||
--card-bg: #FFFFFF;
|
||
--text-main: #111827;
|
||
--text-sub: #6B7280;
|
||
--muted: #9CA3AF;
|
||
}
|
||
|
||
.kelola-page {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
padding: 1.5rem 1rem 3rem;
|
||
}
|
||
|
||
/* ── Header ── */
|
||
.kelola-header {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.kelola-header h4 {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: var(--text-main);
|
||
margin: 0 0 .2rem;
|
||
}
|
||
.kelola-header .sub {
|
||
font-size: .78rem;
|
||
color: var(--text-sub);
|
||
}
|
||
|
||
/* ── Alerts ── */
|
||
.alert-ok {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: .65rem;
|
||
background: var(--primary-soft);
|
||
border: 1px solid #BBF7D0;
|
||
border-left: 4px solid var(--primary);
|
||
border-radius: 10px;
|
||
padding: .8rem 1rem;
|
||
margin-bottom: 1.25rem;
|
||
font-size: .875rem;
|
||
color: #166534;
|
||
}
|
||
.alert-err {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: .65rem;
|
||
background: var(--danger-soft);
|
||
border: 1px solid #FECACA;
|
||
border-left: 4px solid var(--danger);
|
||
border-radius: 10px;
|
||
padding: .8rem 1rem;
|
||
margin-bottom: 1.25rem;
|
||
font-size: .875rem;
|
||
color: #991B1B;
|
||
}
|
||
|
||
/* ── Form card ── */
|
||
.form-card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.form-card-header {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: .85rem 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
}
|
||
.form-card-header .title {
|
||
font-size: .875rem;
|
||
font-weight: 700;
|
||
color: var(--text-main);
|
||
}
|
||
.form-card-body { padding: 1.25rem; }
|
||
|
||
.field-group { margin-bottom: 1rem; }
|
||
.field-group label {
|
||
display: block;
|
||
font-size: .78rem;
|
||
font-weight: 600;
|
||
color: var(--text-sub);
|
||
margin-bottom: .35rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
.field-group input {
|
||
width: 100%;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: .6rem .85rem;
|
||
font-size: .875rem;
|
||
color: var(--text-main);
|
||
outline: none;
|
||
transition: border-color .15s, box-shadow .15s;
|
||
background: var(--card-bg);
|
||
box-sizing: border-box;
|
||
font-family: inherit;
|
||
}
|
||
.field-group input:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(22,163,74,.1);
|
||
}
|
||
|
||
.info-box {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: .6rem;
|
||
background: #EFF6FF;
|
||
border: 1px solid #BFDBFE;
|
||
border-radius: 8px;
|
||
padding: .75rem .9rem;
|
||
font-size: .8rem;
|
||
color: #1E40AF;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
|
||
.btn-submit {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
padding: .55rem 1.2rem;
|
||
border-radius: 9px;
|
||
border: none;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: .875rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
}
|
||
.btn-submit:hover { background: var(--primary-dark); }
|
||
|
||
/* ── Section title ── */
|
||
.section-title {
|
||
font-size: .8rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .07em;
|
||
color: var(--text-sub);
|
||
margin-bottom: .75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
}
|
||
.section-title::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
/* ── DESKTOP TABLE ── */
|
||
.table-card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
}
|
||
.table-card table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: .875rem;
|
||
}
|
||
.table-card thead th {
|
||
background: var(--surface);
|
||
color: var(--text-sub);
|
||
font-size: .7rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .06em;
|
||
padding: .75rem 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
white-space: nowrap;
|
||
}
|
||
.table-card tbody tr {
|
||
border-bottom: 1px solid var(--border);
|
||
transition: background .12s;
|
||
}
|
||
.table-card tbody tr:last-child { border-bottom: none; }
|
||
.table-card tbody tr:hover { background: var(--surface); }
|
||
.table-card tbody td {
|
||
padding: .85rem 1rem;
|
||
color: var(--text-main);
|
||
vertical-align: middle;
|
||
}
|
||
.nama-col { font-weight: 600; }
|
||
.username-col { font-family: monospace; font-size: .82rem; color: var(--text-sub); }
|
||
.email-col { font-size: .82rem; color: var(--text-sub); }
|
||
|
||
/* ── Badges ── */
|
||
.badge-aktif {
|
||
display: inline-flex; align-items: center; gap: .25rem;
|
||
padding: .22rem .65rem; border-radius: 999px;
|
||
font-size: .7rem; font-weight: 600;
|
||
background: var(--primary-soft); color: var(--primary);
|
||
border: 1px solid #BBF7D0;
|
||
}
|
||
.badge-nonaktif {
|
||
display: inline-flex; align-items: center; gap: .25rem;
|
||
padding: .22rem .65rem; border-radius: 999px;
|
||
font-size: .7rem; font-weight: 600;
|
||
background: var(--surface); color: var(--muted);
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
/* ── Nonaktifkan button ── */
|
||
.btn-nonaktif {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .35rem;
|
||
padding: .35rem .75rem;
|
||
border-radius: 8px;
|
||
border: 1.5px solid #FDE68A;
|
||
background: var(--warning-soft);
|
||
color: var(--warning);
|
||
font-size: .76rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background .15s;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-nonaktif:hover { background: #FEF3C7; }
|
||
|
||
/* ── Empty state ── */
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 2.5rem 1rem;
|
||
color: var(--text-sub);
|
||
}
|
||
.empty-state .icon { font-size: 2.2rem; margin-bottom: .6rem; }
|
||
.empty-state p { margin: 0; font-size: .88rem; }
|
||
|
||
/* ── MOBILE CARDS ── */
|
||
.bendahara-card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 1rem;
|
||
margin-bottom: .75rem;
|
||
}
|
||
.bendahara-card .card-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: .5rem;
|
||
margin-bottom: .5rem;
|
||
}
|
||
.bendahara-card .card-nama { font-weight: 700; font-size: .95rem; color: var(--text-main); }
|
||
.bendahara-card .card-user { font-size: .75rem; color: var(--text-sub); font-family: monospace; margin-top: .1rem; }
|
||
.bendahara-card .card-email { font-size: .75rem; color: var(--text-sub); margin-bottom: .75rem; }
|
||
.bendahara-card .card-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
|
||
|
||
/* ── Responsive ── */
|
||
.show-mobile { display: none; }
|
||
.show-desktop { display: block; }
|
||
|
||
@media (max-width: 640px) {
|
||
.show-mobile { display: block; }
|
||
.show-desktop { display: none; }
|
||
.kelola-header h4 { font-size: 1rem; }
|
||
.form-card-body { padding: 1rem; }
|
||
}
|
||
</style>
|
||
|
||
<div class="kelola-page">
|
||
|
||
{{-- Header --}}
|
||
<div class="kelola-header">
|
||
<h4>Kelola Bendahara</h4>
|
||
<div class="sub">Buat dan kelola akun bendahara RT</div>
|
||
</div>
|
||
|
||
{{-- Alerts --}}
|
||
@if(session('success'))
|
||
<div class="alert-ok">✅ {{ session('success') }}</div>
|
||
@endif
|
||
|
||
@if($errors->has('bendahara'))
|
||
<div class="alert-err">⚠️ {{ $errors->first('bendahara') }}</div>
|
||
@endif
|
||
|
||
{{-- ── Form tambah bendahara ── --}}
|
||
@if(!$bendaharaAktif)
|
||
<div class="form-card">
|
||
<div class="form-card-header">
|
||
<span>➕</span>
|
||
<span class="title">Buat Akun Bendahara Baru</span>
|
||
</div>
|
||
<div class="form-card-body">
|
||
<form action="{{ route('rt.bendahara.store') }}" method="POST">
|
||
@csrf
|
||
<div class="field-group">
|
||
<label>Nama Lengkap</label>
|
||
<input type="text" name="name" required placeholder="Contoh: Budi Santoso" value="{{ old('name') }}">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Username</label>
|
||
<input type="text" name="username" required placeholder="Contoh: bendahara_rt01" value="{{ old('username') }}">
|
||
</div>
|
||
<div class="field-group">
|
||
<label>Email</label>
|
||
<input type="email" name="email" required placeholder="Contoh: bendahara@email.com" value="{{ old('email') }}">
|
||
</div>
|
||
<div class="info-box">
|
||
ℹ️ Password default: <strong style="margin-left:.3rem">12345678</strong>. Bendahara wajib menggantinya saat login pertama kali.
|
||
</div>
|
||
<button type="submit" class="btn-submit">✓ Buat Akun Bendahara</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="section-title">Riwayat Akun Bendahara</div>
|
||
|
||
@php $empty = $bendaharas->isEmpty(); @endphp
|
||
|
||
{{-- ── DESKTOP TABLE ── --}}
|
||
<div class="show-desktop">
|
||
<div class="table-card">
|
||
@if($empty)
|
||
<div class="empty-state">
|
||
<div class="icon">👤</div>
|
||
<p>Belum ada akun bendahara.</p>
|
||
</div>
|
||
@else
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Nama</th>
|
||
<th>Username</th>
|
||
<th>Email</th>
|
||
<th>Status</th>
|
||
<th>Aksi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($bendaharas as $b)
|
||
<tr>
|
||
<td class="nama-col">{{ $b->name }}</td>
|
||
<td class="username-col">{{ $b->username }}</td>
|
||
<td class="email-col">{{ $b->email }}</td>
|
||
<td>
|
||
@if($b->status_akun === 'aktif')
|
||
<span class="badge-aktif">● Aktif</span>
|
||
@else
|
||
<span class="badge-nonaktif">○ Nonaktif</span>
|
||
@endif
|
||
</td>
|
||
<td>
|
||
@if($b->status_akun === 'aktif')
|
||
<form action="{{ route('rt.bendahara.nonaktifkan', $b->id) }}" method="POST"
|
||
onsubmit="return confirm('Nonaktifkan bendahara ini?')">
|
||
@csrf @method('PATCH')
|
||
<button type="submit" class="btn-nonaktif">⊘ Nonaktifkan</button>
|
||
</form>
|
||
@else
|
||
<span style="color:var(--muted);font-size:.8rem">—</span>
|
||
@endif
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ── MOBILE CARDS ── --}}
|
||
<div class="show-mobile">
|
||
@if($empty)
|
||
<div class="table-card">
|
||
<div class="empty-state">
|
||
<div class="icon">👤</div>
|
||
<p>Belum ada akun bendahara.</p>
|
||
</div>
|
||
</div>
|
||
@else
|
||
@foreach($bendaharas as $b)
|
||
<div class="bendahara-card">
|
||
<div class="card-top">
|
||
<div>
|
||
<div class="card-nama">{{ $b->name }}</div>
|
||
<div class="card-user">{{ $b->username }}</div>
|
||
</div>
|
||
@if($b->status_akun === 'aktif')
|
||
<span class="badge-aktif">● Aktif</span>
|
||
@else
|
||
<span class="badge-nonaktif">○ Nonaktif</span>
|
||
@endif
|
||
</div>
|
||
<div class="card-email">✉ {{ $b->email }}</div>
|
||
<div class="card-foot">
|
||
@if($b->status_akun === 'aktif')
|
||
<form action="{{ route('rt.bendahara.nonaktifkan', $b->id) }}" method="POST"
|
||
onsubmit="return confirm('Nonaktifkan bendahara ini?')" style="flex:1">
|
||
@csrf @method('PATCH')
|
||
<button type="submit" class="btn-nonaktif" style="width:100%;justify-content:center">
|
||
⊘ Nonaktifkan
|
||
</button>
|
||
</form>
|
||
@else
|
||
<span style="color:var(--muted);font-size:.8rem">Tidak ada aksi</span>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
@endif
|
||
</div>
|
||
|
||
</div>
|
||
@endsection
|