E41220778
/
TIF_NGANJUK_E41220778
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed: bugs typography and flow edit profile

This commit is contained in:
zhadaarsita 2026-02-26 01:41:31 +07:00
parent d51df1583e
commit 9683e685c7
16 changed files with 573 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/Http/Controllers/ProfileController.php
View File

@ -55,15 +55,16 @@ public function edit(Request $request): View
*/ */
public function update(Request $request): RedirectResponse public function update(Request $request): RedirectResponse
{ {
// Validasi input
$request->validate([ $request->validate([
'name' => ['required', 'string', 'max:255'], 'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users,email,'.Auth::id()], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users,email,'.Auth::id()],
'nomor_hp' => ['nullable', 'string', 'max:15'], 'no_hp' => ['nullable', 'string', 'max:15'],
]); ]);
$user = $request->user(); $user = $request->user();
$user->fill($request->all()); $user->name = $request->name;
$user->email = $request->email;
$user->no_hp = $request->no_hp;
if ($user->isDirty('email')) { if ($user->isDirty('email')) {
$user->email_verified_at = null; $user->email_verified_at = null;

2
app/Models/User.php
View File

@ -24,7 +24,7 @@ class User extends Authenticatable
'role', 'role',
'nisn', 'nisn',
'nip', 'nip',
'nomor_hp', 'no_hp',
'kelas', 'kelas',
'nomor_induk' 'nomor_induk'
]; ];

146
resources/views/admin/buku/create.blade.php
View File

@ -12,40 +12,63 @@
<div class="col-md-11"> <div class="col-md-11">
<div class="card border-0 shadow-sm"> <div class="card border-0 shadow-sm">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="card-body"> <form action="#" method="POST" id="formTambahBuku">
{{-- TAMBAHKAN ID PADA FORM --}} <div class="row">
<form action="#" method="POST" id="formTambahBuku"> <div class="col-md-8">
<div class="row"> {{-- JUDUL --}}
<div class="col-md-8"> <div class="mb-3">
<div class="mb-3"> <label for="judul" class="form-label">Judul Buku</label>
<label for="judul" class="form-label">Judul Buku</label> <input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku" required>
<input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku" required> </div>
{{-- PENULIS --}}
<div class="mb-3">
<label for="penulis" class="form-label">Penulis</label>
<input type="text" class="form-control" id="penulis" placeholder="Masukkan nama penulis" required>
</div>
<div class="row">
{{-- KATEGORI --}}
<div class="col-md-3 mb-3">
<label for="kategori" class="form-label">Kategori</label>
<input type="text" class="form-control" id="kategori" placeholder="Contoh: Fiksi" required>
</div> </div>
<div class="mb-3">
<label for="penulis" class="form-label">Penulis</label> {{-- TAHUN TERBIT (SOLUSI DROPDOWN / SELECT) --}}
<input type="text" class="form-control" id="penulis" placeholder="Masukkan nama penulis" required> <div class="col-md-3 mb-3">
</div> <label for="tahun" class="form-label">Tahun Terbit</label>
<div class="row"> <div class="input-group">
<div class="col-md-3 mb-3"> <span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar-event"></i></span>
<label for="kategori" class="form-label">Kategori</label> <select class="form-select border-start-0 ps-0" id="tahun" required>
<input type="text" class="form-control" id="kategori" placeholder="Contoh: Fiksi" required> <option value="" selected disabled>Pilih Tahun</option>
</div> @php
<div class="col-md-3 mb-3"> $tahunSekarang = date('Y');
<label for="tahun" class="form-label">Tahun Terbit</label> $tahunMulai = 1900;
<input type="number" class="form-control" id="tahun" min="1000" max="2099" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 2024" required> @endphp
</div> @for ($i = $tahunSekarang; $i >= $tahunMulai; $i--)
<div class="col-md-3 mb-3"> <option value="{{ $i }}">{{ $i }}</option>
<label for="kode_buku" class="form-label">Kode Buku</label> @endfor
<input type="text" class="form-control" id="kode_buku" placeholder="Contoh: 330" required> </select>
</div>
<div class="col-md-3 mb-3">
<label for="stok_buku" class="form-label">Stok Buku</label>
<input type="number" class="form-control" id="stok_buku" min="0" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 15" required>
</div> </div>
</div> </div>
<div class="mb-3">
<label class="form-label">Tipe Akses</label> {{-- KODE BUKU --}}
<div class="col-md-3 mb-3">
<label for="kode_buku" class="form-label">Kode Buku</label>
<input type="text" class="form-control" id="kode_buku" placeholder="Contoh: 330" required>
</div>
{{-- STOK BUKU --}}
<div class="col-md-3 mb-3">
<label for="stok_buku" class="form-label">Stok Buku</label>
<input type="number" class="form-control" id="stok_buku" min="0" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 15" required>
</div>
</div>
{{-- TIPE AKSES --}}
<div class="mb-3">
<label class="form-label">Tipe Akses</label>
<div class="d-flex gap-3">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="tipe_offline" checked> <input class="form-check-input" type="checkbox" id="tipe_offline" checked>
<label class="form-check-label" for="tipe_offline">Peminjaman Offline</label> <label class="form-check-label" for="tipe_offline">Peminjaman Offline</label>
@ -56,23 +79,29 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> </div>
<div class="mb-3">
<label for="cover" class="form-label">Cover Buku</label> {{-- UPLOAD FILE --}}
<input type="file" class="form-control" id="cover"> <div class="col-md-4">
</div> <div class="mb-3">
<div class="mb-3"> <label for="cover" class="form-label">Cover Buku</label>
<label for="file_pdf" class="form-label">File PDF (untuk buku online)</label> <input type="file" class="form-control" id="cover">
<input type="file" class="form-control" id="file_pdf"> <div class="form-text small">Format: JPG, PNG. Maks: 2MB</div>
</div> </div>
<div class="mb-3">
<label for="file_pdf" class="form-label">File PDF (untuk buku online)</label>
<input type="file" class="form-control" id="file_pdf">
<div class="form-text small">Format: PDF. Maks: 10MB</div>
</div> </div>
</div> </div>
<hr> </div>
<div class="d-flex justify-content-end"> <hr class="my-4">
<button type="submit" class="btn btn-primary">Simpan Buku</button> <div class="d-flex justify-content-end">
</div> <button type="submit" class="btn btn-primary px-4 fw-bold">
</form> <i class="bi bi-save me-2"></i>Simpan Buku
</div> </button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -80,23 +109,16 @@
@push('scripts') @push('scripts')
<script> <script>
document.getElementById('formTambahBuku').addEventListener('submit', function(e) { document.addEventListener('DOMContentLoaded', function() {
e.preventDefault(); // LOGIC SIMPAN
document.getElementById('formTambahBuku').addEventListener('submit', function(e) {
modernSwal.fire({ e.preventDefault();
title: 'Menyimpan...', modernSwal.fire({
timer: 800, title: 'Menyimpan...', timer: 1500, didOpen: () => Swal.showLoading()
didOpen: () => Swal.showLoading() }).then(() => {
}).then(() => { Toast.fire({ icon: 'success', title: 'Berhasil', text: 'Buku baru berhasil ditambahkan.' });
Toast.fire({ setTimeout(() => { window.location.href = "{{ route('admin.buku.index') }}"; }, 1500);
icon: 'success',
title: 'Berhasil',
text: 'Buku baru berhasil ditambahkan.'
}); });
setTimeout(() => {
window.location.href = "{{ route('admin.buku.index') }}";
}, 1500);
}); });
}); });
</script> </script>

465
resources/views/admin/buku/index.blade.php
View File

@ -9,82 +9,91 @@
</a> </a>
</div> </div>
<div class="card-body"> <div class="card-body">
{{-- NAV TABS --}}
<ul class="nav nav-tabs" id="bukuTab" role="tablist"> <ul class="nav nav-tabs" id="bukuTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="offline-tab" data-bs-toggle="tab" data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span id="countOffline">{{ $bukuOffline->count() }}</span>)</button> <button class="nav-link active" id="offline-tab" data-bs-toggle="tab"
data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span
id="countOffline">{{ $bukuOffline->count() }}</span>)</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane" type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count() }}</span>)</button> <button class="nav-link" id="online-tab" data-bs-toggle="tab" data-bs-target="#online-tab-pane"
type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count()
}}</span>)</button>
</li> </li>
{{-- TAB BARU KHUSUS ARSIP --}}
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link text-warning" id="arsip-tab" data-bs-toggle="tab" data-bs-target="#arsip-tab-pane" type="button" role="tab"><i class="bi bi-archive-fill me-1"></i>Diarsipkan (<span id="countArsip">0</span>)</button> <button class="nav-link text-warning" id="arsip-tab" data-bs-toggle="tab"
data-bs-target="#arsip-tab-pane" type="button" role="tab">
<i class="bi bi-archive-fill me-1"></i>Diarsipkan (<span id="countArsip">0</span>)
</button>
</li> </li>
</ul> </ul>
<div class="tab-content" id="bukuTabContent"> <div class="tab-content" id="bukuTabContent">
{{-- TAB UNTUK BUKU OFFLINE --}}
{{-- BUKU OFFLINE --}}
<div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel"> <div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
<div class="table-responsive mt-3"> <div class="table-responsive mt-3">
<table class="table table-hover align-middle" id="tableOffline"> <table class="table table-hover align-middle" id="tableOffline">
<thead> <thead class="table-light">
<tr> <tr>
<th>No</th> <th>No</th>
<th>Cover</th> <th>Cover</th>
<th>Judul</th> <th>Judul</th>
<th>Kode Buku</th> <th>Kode Buku</th>
<th>Penulis</th> <th>Penulis</th>
<th>Stok</th> <th>Stok</th>
<th>Status</th> <th>Status</th>
<th class="text-center">Aksi</th> <th class="text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse($bukuOffline as $buku) @forelse($bukuOffline as $buku)
<tr data-tipe="offline"> <tr data-tipe="offline" data-id="{{ $buku['id'] }}">
<td class="row-number">{{ $loop->iteration }}</td> <td class="row-number">{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td> <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40"
<td class="fw-bold">{{ $buku['judul'] }}</td> class="rounded shadow-sm"></td>
<td>{{ $buku['kode_buku'] }}</td> <td class="fw-bold">{{ $buku['judul'] }}</td>
<td>{{ $buku['penulis'] }}</td> <td>{{ $buku['kode_buku'] }}</td>
<td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td> <td>{{ $buku['penulis'] }}</td>
<td> <td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td>
@if ($buku['status'] == 'Tersedia') <td>
<span class="badge bg-success-subtle text-success-emphasis">Tersedia</span> @if ($buku['status'] == 'Tersedia')
@else <span class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
<span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span> @else
@endif <span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
</td> @endif
<td> </td>
<div class="d-flex justify-content-center gap-2 aksi-buttons"> <td class="text-center">
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" <div class="d-flex justify-content-center gap-2">
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}" <button class="btn btn-sm btn-outline-secondary btn-detail"
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}" data-bs-toggle="modal" data-bs-target="#detailBukuModal"
data-kode_buku="{{ $buku['kode_buku'] }}" data-penulis="{{ $buku['penulis'] }}" data-buku='@json($buku)'>
data-kategori="{{ $buku['kategori'] }}" data-tahun="{{ $buku['tahun'] }}" <i class="bi bi-eye-fill"></i> Detail
data-status="{{ $buku['status'] }}"> </button>
<i class="bi bi-eye-fill"></i> Detail <button class="btn btn-sm btn-outline-warning btn-arsipkan"
</button> data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
<button class="btn btn-sm btn-outline-warning btn-arsipkan" <i class="bi bi-archive-fill"></i> Arsip
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku"> </button>
<i class="bi bi-archive-fill"></i> Arsip </div>
</button> </td>
</div> </tr>
</td>
</tr>
@empty @empty
<tr class="empty-row"><td colspan="8" class="text-center py-4">Tidak ada data buku offline.</td></tr> <tr class="empty-row">
<td colspan="8" class="text-center py-4 text-muted">Tidak ada data buku offline.
</td>
</tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{{-- TAB UNTUK BUKU ONLINE --}} {{-- BUKU ONLINE --}}
<div class="tab-pane fade" id="online-tab-pane" role="tabpanel"> <div class="tab-pane fade" id="online-tab-pane" role="tabpanel">
<div class="table-responsive mt-3"> <div class="table-responsive mt-3">
<table class="table table-hover align-middle" id="tableOnline"> <table class="table table-hover align-middle" id="tableOnline">
<thead> <thead class="table-light">
<tr> <tr>
<th>No</th> <th>No</th>
<th>Cover</th> <th>Cover</th>
@ -96,52 +105,58 @@
</thead> </thead>
<tbody> <tbody>
@forelse($bukuOnline as $buku) @forelse($bukuOnline as $buku)
<tr data-tipe="online"> <tr data-tipe="online" data-id="{{ $buku['id'] }}">
<td class="row-number">{{ $loop->iteration }}</td> <td class="row-number">{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td> <td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40"
<td class="fw-bold">{{ $buku['judul'] }}</td> class="rounded shadow-sm"></td>
<td>{{ $buku['penulis'] }}</td> <td class="fw-bold">{{ $buku['judul'] }}</td>
<td><span class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span></td> <td>{{ $buku['penulis'] }}</td>
<td> <td><span class="badge bg-info-subtle text-info-emphasis">PDF Available</span></td>
<div class="d-flex justify-content-center gap-2 aksi-buttons"> <td class="text-center">
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" <div class="d-flex justify-content-center gap-2">
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}" <button class="btn btn-sm btn-outline-secondary btn-detail"
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}" data-bs-toggle="modal" data-bs-target="#detailBukuModal"
data-penulis="{{ $buku['penulis'] }}" data-kategori="{{ $buku['kategori'] }}" data-buku='@json($buku)'>
data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online"> <i class="bi bi-eye-fill"></i> Detail
<i class="bi bi-eye-fill"></i> Detail </button>
</button> <button class="btn btn-sm btn-outline-warning btn-arsipkan"
<button class="btn btn-sm btn-outline-warning btn-arsipkan" data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku"> <i class="bi bi-archive-fill"></i> Arsip
<i class="bi bi-archive-fill"></i> Arsip </button>
</button> </div>
</div> </td>
</td> </tr>
</tr>
@empty @empty
<tr class="empty-row"><td colspan="6" class="text-center py-4">Tidak ada data buku online.</td></tr> <tr class="empty-row">
<td colspan="6" class="text-center py-4 text-muted">Tidak ada data buku online.</td>
</tr>
@endforelse @endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{{-- TAB UNTUK ARSIP --}} {{-- ARSIP --}}
<div class="tab-pane fade" id="arsip-tab-pane" role="tabpanel"> <div class="tab-pane fade" id="arsip-tab-pane" role="tabpanel">
<div class="table-responsive mt-3"> <div class="table-responsive mt-3">
<table class="table table-hover align-middle" id="tableArsip"> <table class="table table-hover align-middle" id="tableArsip">
<thead> <thead class="table-light">
<tr> <tr>
<th>No</th> <th>No</th>
<th>Cover</th> <th>Cover</th>
<th>Judul</th> <th>Judul</th>
<th>Penulis</th> <th>Penulis</th>
<th>Tipe</th> <th>Tipe Asal</th>
<th class="text-center">Aksi</th> <th class="text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="empty-row-arsip"><td colspan="6" class="text-center py-4 text-muted"><i class="bi bi-inbox fs-4 d-block mb-2"></i>Belum ada buku yang diarsipkan.</td></tr> <tr class="empty-row-arsip">
<td colspan="6" class="text-center py-5 text-muted">
<i class="bi bi-inbox fs-1 d-block mb-2 text-secondary opacity-50"></i>
Belum ada buku yang diarsipkan.
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -154,174 +169,200 @@
{{-- MODAL DETAIL BUKU --}} {{-- MODAL DETAIL BUKU --}}
<div class="modal fade" id="detailBukuModal" tabindex="-1"> <div class="modal fade" id="detailBukuModal" tabindex="-1">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content border-0 shadow">
<div class="modal-header"> <div class="modal-header border-0">
<h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5> <h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
<div class="col-md-4 text-center mb-4 mb-md-0"> <div class="col-md-4 text-center mb-3">
<img src="" id="modalCover" class="img-fluid rounded shadow mx-auto d-block" style="max-height: 250px; object-fit: cover;" alt="Cover Buku"> <img src="" id="modalCover" class="img-fluid rounded shadow"
style="max-height: 250px; object-fit: cover;">
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<h3 id="modalJudulContent" class="fw-bold text-dark"></h3> <h3 id="modalJudulContent" class="fw-bold text-dark mb-1"></h3>
<p class="text-muted mb-4" id="modalPenulis"></p> <p class="text-muted mb-3" id="modalPenulis"></p>
<table class="table table-sm table-borderless">
<tr><th width="120px" class="text-black">Kategori</th><td id="modalKategori" class="fw-semibold"></td></tr> <div class="bg-light p-3 rounded-3">
<tr id="rowKodeBuku"><th class="text-black">Kode Buku</th><td id="modalKode_buku" class="fw-semibold"></td></tr> <table class="table table-sm table-borderless mb-0">
<tr><th class="text-black">Tahun Terbit</th><td id="modalTahun" class="fw-semibold"></td></tr> <tr>
<tr><th class="text-black">Status</th><td><span id="modalStatus" class="badge"></span></td></tr> <td class="text-secondary" width="130">Kategori</td>
</table> <td id="modalKategori" class="fw-bold"></td>
</tr>
<tr id="rowKodeBuku">
<td class="text-secondary">Kode Buku</td>
<td id="modalKode" class="fw-bold font-monospace"></td>
</tr>
<tr>
<td class="text-secondary">Tahun Terbit</td>
<td id="modalTahun" class="fw-bold"></td>
</tr>
<tr>
<td class="text-secondary">Stok</td>
<td id="modalStok" class="fw-bold"></td>
</tr>
<tr>
<td class="text-secondary">Status</td>
<td><span id="modalStatus" class="badge"></span></td>
</tr>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer bg-light"> <div class="modal-footer border-0 bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button> <button type="button" class="btn btn-secondary rounded-pill px-4"
<a href="#" id="modalEditButton" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit Buku</a> data-bs-dismiss="modal">Tutup</button>
<a href="#" id="modalEditButton" class="btn btn-primary rounded-pill px-4">
<i class="bi bi-pencil-square me-2"></i>Edit Buku
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@push('scripts') @push('scripts')
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// LOGIC UNTUK MODAL DETAIL
const detailBukuModal = document.getElementById('detailBukuModal'); function updateTableNumbers() {
if (detailBukuModal) { ['#tableOffline', '#tableOnline', '#tableArsip'].forEach(tableId => {
detailBukuModal.addEventListener('show.bs.modal', event => { let count = 0;
const button = event.relatedTarget; $(tableId + ' tbody tr').not('[class^="empty-row"]').each(function(index) {
const id = button.getAttribute('data-id');
const cover = button.getAttribute('data-cover');
const judul = button.getAttribute('data-judul');
const kode_buku = button.getAttribute('data-kode_buku');
const penulis = button.getAttribute('data-penulis');
const kategori = button.getAttribute('data-kategori');
const tahun = button.getAttribute('data-tahun');
const status = button.getAttribute('data-status');
const editUrl = `{{ url('admin/buku') }}/${id}/edit`;
const modalJudul = detailBukuModal.querySelector('#modalJudul');
const modalCover = detailBukuModal.querySelector('#modalCover');
const modalKode_buku = detailBukuModal.querySelector('#modalKode_buku');
const modalJudulContent = detailBukuModal.querySelector('#modalJudulContent');
const modalPenulis = detailBukuModal.querySelector('#modalPenulis');
const modalKategori = detailBukuModal.querySelector('#modalKategori');
const modalTahun = detailBukuModal.querySelector('#modalTahun');
const modalStatus = detailBukuModal.querySelector('#modalStatus');
const modalEditButton = detailBukuModal.querySelector('#modalEditButton');
const rowKodeBuku = detailBukuModal.querySelector('#rowKodeBuku');
modalJudul.textContent = judul;
modalCover.src = cover;
modalJudulContent.textContent = judul;
modalPenulis.textContent = `oleh ${penulis}`;
modalKategori.textContent = `: ${kategori}`;
modalTahun.textContent = `: ${tahun}`;
modalStatus.textContent = status;
modalEditButton.href = editUrl;
if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
rowKodeBuku.style.display = '';
modalKode_buku.textContent = `: ${kode_buku}`;
} else {
rowKodeBuku.style.display = 'none';
}
if (status === 'Tersedia' || status === 'Dapat Dibaca Online') {
modalStatus.className = 'badge bg-success-subtle text-success-emphasis';
} else {
modalStatus.className = 'badge bg-warning-subtle text-warning-emphasis';
}
});
}
function updateTableNumbers() {
let countOffline = 0;
$('#tableOffline tbody tr').not('.empty-row').each(function(index) {
$(this).find('.row-number').text(index + 1); $(this).find('.row-number').text(index + 1);
countOffline++; count++;
}); });
$('#countOffline').text(countOffline);
let countOnline = 0; if (tableId === '#tableOffline') $('#countOffline').text(count);
$('#tableOnline tbody tr').not('.empty-row').each(function(index) { if (tableId === '#tableOnline') $('#countOnline').text(count);
$(this).find('.row-number').text(index + 1); if (tableId === '#tableArsip') {
countOnline++; $('#countArsip').text(count);
}); if(count === 0) $('.empty-row-arsip').show(); else $('.empty-row-arsip').hide();
$('#countOnline').text(countOnline);
let countArsip = 0;
$('#tableArsip tbody tr').not('.empty-row-arsip').each(function(index) {
$(this).find('.row-number').text(index + 1);
countArsip++;
});
$('#countArsip').text(countArsip);
if(countArsip === 0) {
$('.empty-row-arsip').show();
} else {
$('.empty-row-arsip').hide();
} }
});
}
// LOGIC MODAL DETAIL
$('#detailBukuModal').on('show.bs.modal', function(event) {
const button = $(event.relatedTarget);
const buku = button.data('buku');
$('#modalCover').attr('src', "{{ asset('') }}" + buku.cover);
$('#modalJudulContent').text(buku.judul);
$('#modalPenulis').text('Penulis: ' + buku.penulis);
$('#modalKategori').text(buku.kategori);
$('#modalTahun').text(buku.tahun);
$('#modalStok').text(buku.stok ? buku.stok + ' Buku' : '-');
if (buku.kode_buku) {
$('#rowKodeBuku').show();
$('#modalKode').text(buku.kode_buku);
} else {
$('#rowKodeBuku').hide();
} }
// LOGIC UNTUK TOMBOL ARSIPKAN // Status Badge
$(document).on('click', '.btn-arsipkan', function() { const statusBadge = $('#modalStatus');
const judul = $(this).data('judul'); statusBadge.removeClass().addClass('badge');
const row = $(this).closest('tr'); if (buku.status === 'Tersedia' || !buku.status) {
const coverHtml = row.find('td:eq(1)').html(); statusBadge.addClass('bg-success-subtle text-success-emphasis').text('Tersedia / Online');
const tipe = row.data('tipe'); } else {
const penulis = tipe === 'offline' ? row.find('td:eq(4)').text() : row.find('td:eq(3)').text(); statusBadge.addClass('bg-warning-subtle text-warning-emphasis').text('Dipinjam');
}
modernSwal.fire({ $('#modalEditButton').attr('href', "{{ url('admin/buku') }}/" + buku.id + "/edit");
title: 'Arsipkan Buku?', });
text: `Apakah Anda yakin ingin mengarsipkan buku "${judul}"?`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, Arsipkan!',
cancelButtonText: 'Batal',
confirmButtonColor: '#ffc107',
cancelButtonColor: '#6c757d'
}).then((result) => {
if (result.isConfirmed) {
modernSwal.fire({
title: 'Memproses...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: `Buku "${judul}" telah dipindahkan ke Arsip.`
});
let badgeTipe = tipe === 'offline' ? '<span class="badge bg-secondary">Offline</span>' : '<span class="badge bg-info">Online</span>';
let newRow = `
<tr>
<td class="row-number"></td>
<td>${coverHtml}</td>
<td class="fw-bold text-muted">${judul}</td>
<td class="text-muted">${penulis}</td>
<td>${badgeTipe}</td>
<td class="text-center">
<span class="badge bg-warning"><i class="bi bi-archive-fill me-1"></i>Diarsipkan</span>
</td>
</tr>
`;
row.fadeOut('slow', function() { // LOGIC ARSIPKAN BUKU
$(this).remove(); $(document).on('click', '.btn-arsipkan', function() {
$('#tableArsip tbody').append(newRow); const row = $(this).closest('tr');
updateTableNumbers(); const judul = $(this).data('judul');
}); const tipe = row.data('tipe');
});
} const rowData = row.prop('outerHTML');
});
modernSwal.fire({
title: 'Arsipkan Buku?',
text: `Buku "${judul}" akan dipindahkan ke tab Arsip.`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, Arsipkan',
cancelButtonText: 'Batal',
confirmButtonColor: '#ffc107',
}).then((result) => {
if (result.isConfirmed) {
row.fadeOut(300, function() {
const coverHtml = row.find('td:eq(1)').html();
const penulis = row.find('td:eq(3)').text();
const badgeTipe = tipe === 'offline'
? '<span class="badge bg-secondary"><i class="bi bi-book me-1"></i>Offline</span>'
: '<span class="badge bg-info"><i class="bi bi-globe me-1"></i>Online</span>';
const originalDataEncoded = encodeURIComponent(rowData);
const arsipRow = `
<tr data-origin="${originalDataEncoded}">
<td class="row-number"></td>
<td>${coverHtml}</td>
<td class="fw-bold text-muted">${judul}</td>
<td class="text-muted">${penulis}</td>
<td>${badgeTipe}</td>
<td class="text-center">
<button class="btn btn-sm btn-outline-success btn-pulihkan"
data-judul="${judul}" title="Kembalikan ke Daftar Aktif">
<i class="bi bi-arrow-counterclockwise me-1"></i>Kembalikan
</button>
</td>
</tr>
`;
$('#tableArsip tbody').append(arsipRow);
$(this).remove();
updateTableNumbers();
Toast.fire({ icon: 'success', title: 'Diarsipkan', text: `Buku "${judul}" berhasil diarsipkan.` });
});
}
}); });
}); });
</script>
// LOGIC PULIHKAN BUKU
$(document).on('click', '.btn-pulihkan', function() {
const row = $(this).closest('tr');
const judul = $(this).data('judul');
const originalDataEncoded = row.data('origin');
modernSwal.fire({
title: 'Kembalikan Buku?',
text: `Buku "${judul}" akan dikembalikan ke daftar aktif.`,
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ya, Kembalikan',
cancelButtonText: 'Batal',
confirmButtonColor: '#198754',
}).then((result) => {
if (result.isConfirmed) {
row.fadeOut(300, function() {
const originalRowHtml = decodeURIComponent(originalDataEncoded);
const $originalRow = $(originalRowHtml);
const tipe = $originalRow.data('tipe');
const targetTable = tipe === 'offline' ? '#tableOffline' : '#tableOnline';
$originalRow.removeAttr('style');
$(targetTable + ' tbody').append($originalRow);
$(this).remove();
updateTableNumbers();
Toast.fire({ icon: 'success', title: 'Dipulihkan', text: `Buku "${judul}" aktif kembali.` });
});
}
});
});
});
</script>
@endpush @endpush
</x-app-layout> </x-app-layout>

2
resources/views/admin/denda/index.blade.php
View File

@ -61,7 +61,7 @@
<div class="fw-bold text-dark">{{ $item['peminjam'] }}</div> <div class="fw-bold text-dark">{{ $item['peminjam'] }}</div>
<span class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span> <span class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
<div class="small text-muted"> <div class="small text-muted">
<i class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }} <i class="bi bi-telephone me-1"></i>{{ $item['no_hp'] }}
</div> </div>
</td> </td>
<td> <td>

2
resources/views/admin/peminjaman/index.blade.php
View File

@ -75,7 +75,7 @@
</td> </td>
<td> <td>
<div class="fw-bold">{{ $transaksi['peminjam'] }}</div> <div class="fw-bold">{{ $transaksi['peminjam'] }}</div>
<div class="small text-muted">{{ $transaksi['nomor_hp'] }}</div> <div class="small text-muted">{{ $transaksi['no_hp'] }}</div>
</td> </td>
<td> <td>
<ul class="mb-0 ps-3 small"> <ul class="mb-0 ps-3 small">

16
resources/views/admin/pengguna/index.blade.php
View File

@ -35,7 +35,7 @@
<th>Nama Lengkap</th> <th>Nama Lengkap</th>
<th>Kontak (Email & HP)</th> <th>Kontak (Email & HP)</th>
<th>Role</th> <th>Role</th>
<th>NISN / NIP</th> <th>NISN / NIP / NIK</th>
<th>Kelas / Golongan</th> <th>Kelas / Golongan</th>
<th class="text-center">Aksi</th> <th class="text-center">Aksi</th>
</tr> </tr>
@ -111,7 +111,7 @@ class="bi bi-trash"></i></button>
<div> <div>
<h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist) <h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)
</h4> </h4>
<p class="text-muted mb-0">Daftar NIP/NISN yang <b>diizinkan</b> untuk mendaftar.</p> <p class="text-muted mb-0">Daftar NIP/NISN/NIK yang <b>diizinkan</b> untuk mendaftar.</p>
</div> </div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalMasterInduk"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalMasterInduk">
<i class="bi bi-plus-lg me-1"></i> Tambah Data Induk <i class="bi bi-plus-lg me-1"></i> Tambah Data Induk
@ -121,15 +121,15 @@ class="bi bi-trash"></i></button>
<div class="card shadow mb-4 border-left-success"> <div class="card shadow mb-4 border-left-success">
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover align-middle mb-0"> <table class="table table-hover table-bordered align-middle mb-0">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
<th>No</th> <th>No</th>
<th>NIP / NISN</th> <th>NIP / NISN</th>
<th>Nama Pemilik</th> <th>Nama Pemilik</th>
<th>Role</th> <th class="text-center">Role</th>
<th class="text-center">Status Akun</th> <th class="text-center">Status Akun</th>
<th class="text-end">Aksi</th> <th class="text-center">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -138,7 +138,7 @@ class="bi bi-trash"></i></button>
<td>{{ $index + 1 }}</td> <td>{{ $index + 1 }}</td>
<td class="fw-bold font-monospace">{{ $item->nomor_induk }}</td> <td class="fw-bold font-monospace">{{ $item->nomor_induk }}</td>
<td>{{ $item->nama_pemilik }}</td> <td>{{ $item->nama_pemilik }}</td>
<td> <td class="text-center">
@if($item->role == 'guru') @if($item->role == 'guru')
<span class="badge bg-info text-dark">Guru</span> <span class="badge bg-info text-dark">Guru</span>
@elseif($item->role == 'siswa') @elseif($item->role == 'siswa')
@ -160,7 +160,7 @@ class="bi bi-check-circle-fill me-1"></i>Terdaftar</span>
class="bi bi-hourglass-split me-1"></i>Belum Daftar</span> class="bi bi-hourglass-split me-1"></i>Belum Daftar</span>
@endif @endif
</td> </td>
<td class="text-end"> <td class="text-center">
<form action="{{ route('admin.master-induk.destroy', $item->id) }}" method="POST" <form action="{{ route('admin.master-induk.destroy', $item->id) }}" method="POST"
class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}"> class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
@csrf @csrf
@ -209,7 +209,7 @@ class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
</select> </select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">NIP / NISN</label> <label class="form-label">NIP / NISN / NIK</label>
<input type="number" name="nomor_induk" class="form-control" <input type="number" name="nomor_induk" class="form-control"
placeholder="Contoh: 1234567890" required> placeholder="Contoh: 1234567890" required>
</div> </div>

4
resources/views/auth/admin-login.blade.php
View File

@ -20,7 +20,7 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="nip" class="form-label">Nomor Induk Pegawai (NIP)</label> <label for="nip" class="form-label">NIP/NIK</label>
<input id="nip" class="form-control" type="text" name="nip" required autofocus /> <input id="nip" class="form-control" type="text" name="nip" required autofocus />
<x-input-error :messages="$errors->get('nip')" class="mt-2" /> <x-input-error :messages="$errors->get('nip')" class="mt-2" />
</div> </div>
@ -36,7 +36,7 @@
</div> </div>
<div class="d-grid mt-4"> <div class="d-grid mt-4">
<button type="submit" class="btn btn-primary btn-lg">Masuk</button> <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">Masuk</button>
</div> </div>
<p class="mt-4 text-center text-muted small"> <p class="mt-4 text-center text-muted small">
Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>. Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.

18
resources/views/auth/login.blade.php
View File

@ -36,10 +36,10 @@
<i class="bi bi-person-fill"></i> <i class="bi bi-person-fill"></i>
</span> </span>
@if ($role == 'siswa') @if ($role == 'siswa')
<input id="nisn" class="form-control border-start-0 ps-0 bg-light" type="text" name="nisn" <input id="nisn" class="form-control border-start-0 ps-2 bg-light" type="text" name="nisn"
placeholder="Contoh: 0012345678" required autofocus /> placeholder="Contoh: 0012345678" required autofocus />
@else @else
<input id="nip" class="form-control border-start-0 ps-0 bg-light" type="text" name="nip" <input id="nip" class="form-control border-start-0 ps-2 bg-light" type="text" name="nip"
placeholder="Contoh: 19800101..." required autofocus /> placeholder="Contoh: 19800101..." required autofocus />
@endif @endif
</div> </div>
@ -60,7 +60,7 @@
<span class="input-group-text bg-light text-muted border-end-0"> <span class="input-group-text bg-light text-muted border-end-0">
<i class="bi bi-lock-fill"></i> <i class="bi bi-lock-fill"></i>
</span> </span>
<input id="password" class="form-control border-start-0 border-end-0 ps-0 bg-light" type="password" <input id="password" class="form-control border-start-0 border-end-0 ps-2 bg-light" type="password"
name="password" placeholder="Masukan kata sandi" required /> name="password" placeholder="Masukan kata sandi" required />
<button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword"> <button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword">
<i class="bi bi-eye-slash-fill"></i> <i class="bi bi-eye-slash-fill"></i>
@ -71,8 +71,8 @@
{{-- TOMBOL LOGIN --}} {{-- TOMBOL LOGIN --}}
<div class="d-grid mb-4"> <div class="d-grid mb-4">
<button type="submit" class="btn btn-primary py-2 fw-bold shadow-sm"> <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">
Masuk Sekarang <i class="bi bi-arrow-right ms-2"></i> Masuk
</button> </button>
</div> </div>
@ -85,11 +85,9 @@
</a> </a>
</div> </div>
<div class="text-center mt-4"> <p class="mt-4 text-center text-muted small">
<a href="/" class="text-decoration-none text-muted small hover-text-primary"> Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
<i class="bi bi-arrow-left me-1"></i>Kembali ke Halaman Utama </p>
</a>
</div>
</form> </form>
<script> <script>

8
resources/views/layouts/navigation.blade.php
View File

@ -105,7 +105,13 @@ class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) un
<li> <li>
<a class="dropdown-item" href="{{ route('profile.index') }}"> <a class="dropdown-item" href="{{ route('profile.index') }}">
<i class="bi bi-person-circle"></i> <i class="bi bi-person-circle"></i>
<span>{{ __('Profile') }}</span> <span>{{ __('Profil') }}</span>
</a>
</li>
<li>
<a class="dropdown-item" href="{{ route('profile.edit') }}">
<i class="bi bi-gear"></i>
<span>{{ __('Pengaturan') }}</span>
</a> </a>
</li> </li>
<li> <li>

106
resources/views/peminjaman/form.blade.php
View File

@ -13,54 +13,72 @@
<h1 class="h2 fw-semibold mb-5 text-center">Form Peminjaman Offline</h1> <h1 class="h2 fw-semibold mb-5 text-center">Form Peminjaman Offline</h1>
{{-- Informasi Peminjam --}} <div class="card border-0 shadow-sm mb-4">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="row g-3"> {{-- Header Section: Judul & Tombol Edit --}}
{{-- Nama Lengkap (Muncul untuk semua role) --}} <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
<div class="col-md-6"> <h5 class="fw-bold text-primary m-0">
<label class="form-label text-muted small">Nama Lengkap</label> <i class="bi bi-person-lines-fill me-2"></i>Informasi Peminjam
<p class="fw-semibold">{{ $user['nama_lengkap'] ?? $user->name ?? '-' }}</p> </h5>
<a href="{{ route('profile.edit') }}" class="btn btn-sm btn-primary rounded-pill px-3">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div> </div>
{{-- KONDISI UNTUK GURU --}} <div class="row g-3">
@if(isset($user['role']) && strtolower($user['role']) == 'guru' || isset($user->role) && {{-- Nama Lengkap (Semua Role) --}}
strtolower($user->role) == 'guru') <div class="col-md-6">
<div class="col-md-6"> <label class="form-label text-muted small text-uppercase fw-bold">Nama
<label class="form-label text-muted small">NIP/NIK</label> Lengkap</label>
<p class="fw-semibold">{{ $user['nip'] ?? $user->nip ?? '-' }}</p> <p class="fw-semibold text-dark fs-5">{{ $user->nama_lengkap ?? $user->name }}</p>
</div> </div>
<div class="col-md-6">
<label class="form-label text-muted small">Email</label>
<p class="fw-semibold text-break">{{ $user['email'] ?? $user->email ?? '-' }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Nomor Handphone</label>
<p class="fw-semibold">{{ $user['nomor_hp'] ?? $user->nomor_hp ?? '-' }}</p>
</div>
{{-- KONDISI UNTUK SISWA --}} {{-- KONDISI UNTUK GURU / PETUGAS --}}
@else @if(in_array($user->role, ['guru', 'penjaga perpus']))
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label text-muted small">NISN</label> <label class="form-label text-muted small text-uppercase fw-bold">NIP / NIK</label>
<p class="fw-semibold">{{ $user['nisn'] ?? $user->nisn ?? '-' }}</p> <p class="fw-semibold text-dark">{{ $user->nip ?? '-' }}</p>
</div>
{{-- KONDISI UNTUK SISWA --}}
@else
<div class="col-md-6">
<label class="form-label text-muted small text-uppercase fw-bold">NISN</label>
<p class="fw-semibold text-dark">{{ $user->nisn ?? '-' }}</p>
</div>
@endif
{{-- Email (Semua Role) --}}
<div class="col-md-6">
<label class="form-label text-muted small text-uppercase fw-bold">Email</label>
<p class="fw-semibold text-dark">{{ $user->email }}</p>
</div>
{{-- Nomor HP (Semua Role) --}}
<div class="col-md-6">
<label class="form-label text-muted small text-uppercase fw-bold">Nomor Handphone
(WA)</label>
<p class="fw-semibold text-dark">
@if($user->no_hp)
<span>{{ $user->no_hp
}}</span>
@else
<span class="text-muted fst-italic">- Belum diatur -</span>
@endif
</p>
</div>
{{-- Info Tambahan Khusus Siswa --}}
@if($user->role == 'siswa')
<div class="col-md-6">
<label class="form-label text-muted small text-uppercase fw-bold">Kelas</label>
<p class="fw-semibold text-dark">{{ $user->kelas ?? '-' }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small text-uppercase fw-bold">Golongan</label>
<p class="fw-semibold text-dark">{{ $user->golongan ?? '-' }}</p>
</div>
@endif
</div> </div>
<div class="col-md-6">
<label class="form-label text-muted small">Email</label>
<p class="fw-semibold text-break">{{ $user['email'] ?? $user->email ?? '-' }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Nomor Handphone</label>
<p class="fw-semibold">{{ $user['nomor_hp'] ?? $user->nomor_hp ?? '-' }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Kelas</label>
<p class="fw-semibold">{{ $user['kelas'] ?? $user->kelas ?? '-' }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Golongan</label>
<p class="fw-semibold">{{ $user['golongan'] ?? $user->golongan ?? '-' }}</p>
</div>
@endif
</div> </div>
</div> </div>

134
resources/views/profile/edit.blade.php
View File

@ -1,32 +1,124 @@
@section('page-title', 'Profil')
<x-app-layout> <x-app-layout>
<div class="d-flex align-items-center mb-4"> @section('page-title', 'Pengaturan Akun')
<a href="{{ route('profile.index') }}" class="btn btn-outline-secondary me-3">
<i class="bi bi-arrow-left"></i>
</a>
<h1 class="h2 mb-0">Edit Profil</h1>
</div>
<div class="row justify-content-center"> <div class="container py-4">
<div class="col-lg-10"> <div class="row gx-4">
<div class="card border-0 shadow-sm mb-4">
<div class="card-body p-4"> {{-- SIDEBAR MENU (KIRI) --}}
@include('profile.partials.update-profile-information-form') <div class="col-md-3 mb-4">
<div class="card border-0 shadow-sm sticky-top" style="top: 80px; z-index: 1;">
<div class="card-body p-0">
<div class="list-group list-group-flush rounded-3">
{{-- Header --}}
<div class="p-3 border-bottom bg-light">
<h6 class="m-0 fw-bold text-dark">
<i class="bi bi-gear-fill me-2 text-primary"></i>Pengaturan
</h6>
</div>
{{-- Menu Tabs --}}
<div class="nav flex-column nav-pills p-2" id="v-pills-tab" role="tablist" aria-orientation="vertical">
{{-- Tab Profil --}}
<button class="nav-link active d-flex align-items-center mb-1 py-3 px-3" id="v-pills-profile-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab">
<i class="bi bi-person-badge me-3 fs-5"></i>
<div class="text-start">
<div class="fw-bold">Profil Saya</div>
<div class="small opacity-75">Nama, Email, & Hapus Akun</div>
</div>
</button>
{{-- Tab Keamanan --}}
<button class="nav-link d-flex align-items-center py-3 px-3" id="v-pills-security-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-security" type="button" role="tab">
<i class="bi bi-shield-lock me-3 fs-5"></i>
<div class="text-start">
<div class="fw-bold">Keamanan</div>
<div class="small opacity-75">Kata Sandi & Proteksi</div>
</div>
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div id="security" class="card border-0 shadow-sm mb-4"> {{-- KONTEN KANAN (FORM) --}}
<div class="card-body p-4"> <div class="col-md-9">
@include('profile.partials.update-password-form') <div class="tab-content" id="v-pills-tabContent" style="min-height: 500px;">
</div> {{-- PROFIL & HAPUS AKUN --}}
</div> <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel">
{{-- Form Edit Profil --}}
<div class="card border-0 shadow-sm mb-4">
<div class="card-header bg-white py-3 border-bottom">
<h6 class="m-0 fw-bold text-primary">Informasi Profil</h6>
</div>
<div class="card-body p-4">
@include('profile.partials.update-profile-information-form')
</div>
</div>
{{-- Form Hapus Akun --}}
<div class="card border-0 shadow-sm border-danger-subtle">
<div class="card-body p-4">
<div class="d-flex align-items-start">
<div class="flex-shrink-0">
<i class="bi bi-exclamation-triangle-fill text-danger fs-3 me-3"></i>
</div>
<div>
<h6 class="fw-bold text-danger">Hapus Akun Permanen</h6>
<p class="text-muted small mb-3">
Tindakan ini tidak dapat dibatalkan. Semua data Anda akan hilang.
</p>
@include('profile.partials.delete-user-form')
</div>
</div>
</div>
</div>
</div>
{{-- KEAMANAN (PASSWORD) --}}
<div class="tab-pane fade" id="v-pills-security" role="tabpanel">
<div class="card border-0 shadow-sm h-100">
<div class="card-header bg-white py-3 border-bottom">
<h6 class="m-0 fw-bold text-primary">Ganti Kata Sandi</h6>
</div>
<div class="card-body p-4">
<div class="alert alert-info border-0 d-flex align-items-center mb-4">
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
<div>
Gunakan password minimal 8 karakter dengan kombinasi huruf dan angka agar akun lebih aman.
</div>
</div>
@include('profile.partials.update-password-form')
</div>
</div>
</div>
<div class="card border-danger shadow-sm">
<div class="card-body p-4">
@include('profile.partials.delete-user-form')
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@push('styles')
<style>
.nav-pills .nav-link {
color: #495057;
border-radius: 8px;
margin-bottom: 4px;
transition: all 0.2s ease-in-out;
}
.nav-pills .nav-link:hover {
background-color: #e9ecef;
color: #0d6efd;
}
.nav-pills .nav-link.active {
background-color: #0d6efd;
color: white;
box-shadow: 0 4px 6px rgba(13, 110, 253, 0.15);
}
</style>
@endpush
</x-app-layout> </x-app-layout>

8
resources/views/profile/index.blade.php
View File

@ -70,7 +70,7 @@ class="btn btn-light text-start py-3 d-flex align-items-center">
</div> </div>
</div> </div>
<div class="card border-0"> {{-- <div class="card border-0">
<div class="card-body p-3 p-md-4"> <div class="card-body p-3 p-md-4">
<h5 class="fw-bold mb-3">Keamanan Akun</h5> <h5 class="fw-bold mb-3">Keamanan Akun</h5>
<p class="small text-muted mb-3">Ubah password Anda secara berkala untuk menjaga keamanan akun. <p class="small text-muted mb-3">Ubah password Anda secara berkala untuk menjaga keamanan akun.
@ -79,7 +79,7 @@ class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-shield-lock me-2"></i>Ubah Password <i class="bi bi-shield-lock me-2"></i>Ubah Password
</a> </a>
</div> </div>
</div> </div> --}}
</div> </div>
</div> </div>
@ -117,7 +117,7 @@ class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small> <small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p> <p class="fw-semibold mb-0">{{ $user->no_hp ?? '-' }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -207,7 +207,7 @@ class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small> <small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p> <p class="fw-semibold mb-0">{{ $user->no_hp ?? '-' }}</p>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<small class="text-muted d-block mb-1">Kelas</small> <small class="text-muted d-block mb-1">Kelas</small>

4
resources/views/profile/partials/personal-activities.blade.php
View File

@ -34,11 +34,11 @@
</div> </div>
</div> </div>
{{-- Card Keamanan Akun --}} {{-- Card Keamanan Akun
<div class="card border-0"> <div class="card border-0">
<div class="card-body p-4"> <div class="card-body p-4">
<h5 class="fw-bold mb-3">Keamanan Akun</h5> <h5 class="fw-bold mb-3">Keamanan Akun</h5>
<p class="small text-muted">Ubah password Anda secara berkala.</p> <p class="small text-muted">Ubah password Anda secara berkala.</p>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill">Ubah Password</a> <a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill">Ubah Password</a>
</div> </div>
</div> </div> --}}

35
resources/views/profile/partials/update-profile-information-form.blade.php
View File

@ -19,10 +19,10 @@
{{-- Bagian Nama Lengkap --}} {{-- Bagian Nama Lengkap --}}
<div class="mb-3"> <div class="mb-3">
<label for="nama_lengkap" class="form-label">{{ __('Nama Lengkap') }}</label> <label for="name" class="form-label">{{ __('Nama Lengkap') }}</label>
<input id="nama_lengkap" name="nama_lengkap" type="text" class="form-control @error('nama_lengkap') is-invalid @enderror" <input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror"
value="{{ old('nama_lengkap', $user->nama_lengkap) }}" required autofocus autocomplete="name"> value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
@error('nama_lengkap') @error('name')
<div class="invalid-feedback">{{ $message }}</div> <div class="invalid-feedback">{{ $message }}</div>
@enderror @enderror
</div> </div>
@ -54,18 +54,19 @@ class="form-control @error('email') is-invalid @enderror" value="{{ old('email',
@endif @endif
</div> </div>
{{-- Bagian Nomor Telepon --}} {{-- Bagian Nomor Telepon (WA) --}}
@if ($user->nomor_hp) <div class="mb-3">
<div class="mb-3"> <label for="no_hp" class="form-label">{{ __('Nomor Telepon (WA)') }}</label>
<label for="nomor_hp" class="form-label">{{ __('Nomor Telepon (WA)') }}</label> <div class="input-group">
<input id="nomor_hp" name="nomor_hp" type="text" class="form-control @error('nomor_hp') is-invalid @enderror" <span class="input-group-text bg-light text-muted"><i class="bi bi-telephone"></i></span>
value="{{ old('nomor_hp', $user->nomor_hp) }}" required> <input id="no_hp" name="no_hp" type="text" class="form-control @error('no_hp') is-invalid @enderror"
@error('nomor_hp') value="{{ old('no_hp', $user->no_hp) }}" placeholder="Contoh: 081234567890">
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<small class="text-muted">*Nomor telepon wajib disi</small>
</div> </div>
@endif @error('no_hp')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
<small class="text-muted d-block mt-1">*Nomor ini digunakan untuk verifikasi & notifikasi.</small>
</div>
<hr class="my-4"> <hr class="my-4">
@ -89,9 +90,9 @@ class="form-control @error('email') is-invalid @enderror" value="{{ old('email',
@else @else
{{-- Untuk Guru atau Penjaga Perpus --}} {{-- Untuk Guru atau Penjaga Perpus --}}
<div class="mb-3"> <div class="mb-3">
<label for="nip" class="form-label">NIP (Nomor Induk Pegawai)</label> <label for="nip" class="form-label">NIP/NIK</label>
<input id="nip" type="text" class="form-control" value="{{ $user->nip }}" readonly disabled> <input id="nip" type="text" class="form-control" value="{{ $user->nip }}" readonly disabled>
<small class="text-muted">NIP tidak dapat diubah.</small> <small class="text-muted">NIP/NIK tidak dapat diubah.</small>
</div> </div>
@endif @endif

8
resources/views/welcome.blade.php
View File

@ -61,7 +61,7 @@ class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-cent
type="button" data-bs-toggle="dropdown" aria-expanded="false" type="button" data-bs-toggle="dropdown" aria-expanded="false"
style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;"> style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;">
<i class="bi bi-person-circle me-2"></i> <i class="bi bi-person-circle me-2"></i>
<span>Masuk / Daftar</span> <span>Masuk</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2" <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2"
style="border-radius: 12px; min-width: 250px;"> style="border-radius: 12px; min-width: 250px;">
@ -378,10 +378,10 @@ class="bi bi-star-half"></i>
<div class="col-md-3"> <div class="col-md-3">
<h6 class="text-white fw-bold mb-3">Hubungi Kami</h6> <h6 class="text-white fw-bold mb-3">Hubungi Kami</h6>
<ul class="list-unstyled small"> <ul class="list-unstyled small">
<li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> admin@digipus.go.id <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> smpn1bagor@yahoo.co.id
</li> </li>
<li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (021) 1234 5678</li> <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (+62) 856-0642-8357</li>
<li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> [Alamat Pustaka Anda] <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> Banaran Kulon, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461
</li> </li>
</ul> </ul>
</div> </div>