feat: apply revisions for UI/UX and role-based features

This commit is contained in:
zhadaarsita 2026-02-23 02:07:01 +07:00
parent 692ee5009b
commit 2ccee78660
23 changed files with 1339 additions and 947 deletions

View File

@ -12,29 +12,47 @@ class AdminPeminjamanController extends Controller
public function index(Request $request)
{
$peminjamanAktif = DummyDataService::getAdminPeminjamanAktif();
$allUsers = collect(DummyDataService::getAllSiswa());
// LOGIC DENDA & WA LINK (Update Request Client)
$peminjamanAktif = $peminjamanAktif->map(function ($item) {
$peminjamanAktif = $peminjamanAktif->map(function ($item) use ($allUsers) {
$userData = $allUsers->firstWhere('id', $item['user_id']);
$role = $userData ? strtolower($userData['role']) : 'siswa';
$item['role'] = $role;
// Hitung Denda Flat 1000/hari
$tenggat = Carbon::parse($item['tenggat_kembali']);
$now = Carbon::now();
$item['hari_terlambat'] = 0;
$item['total_denda'] = 0;
$item['denda_per_hari'] = 1000;
if ($now->greaterThan($tenggat)) {
$hariTelat = $tenggat->diffInDays($now);
$item['hari_terlambat'] = $hariTelat;
$item['total_denda'] = $hariTelat * 1000;
$item['denda_per_hari'] = 1000;
if ($role === 'guru') {
$item['total_denda'] = 0;
$item['denda_per_hari'] = 0;
} else {
$item['total_denda'] = $hariTelat * 1000;
}
}
// Generate WA Link
$hp = $item['nomor_hp'];
if (substr($hp, 0, 1) == '0') {
$hp = '62' . substr($hp, 1);
}
$pesan = "Halo kak {$item['peminjam']}, buku anda sudah terlambat {$item['hari_terlambat']} hari dengan denda Rp " . number_format($item['total_denda'], 0, ',', '.') . ". Mohon segera dikembalikan ya.";
// Pesan WA dibedakan antara Guru dan Siswa
if ($role === 'guru') {
$pesan = "Halo Bapak/Ibu {$item['peminjam']}, buku yang dipinjam sudah melewati tenggat waktu {$item['hari_terlambat']} hari. Mohon berkenan untuk segera dikembalikan ke perpustakaan ya.";
} else {
$pesan = "Halo kak {$item['peminjam']}, buku anda sudah terlambat {$item['hari_terlambat']} hari dengan denda Rp " . number_format($item['total_denda'], 0, ',', '.') . ". Mohon segera dikembalikan ya.";
}
$item['wa_link'] = "https://wa.me/{$hp}?text=" . urlencode($pesan);
return $item;
@ -43,7 +61,7 @@ public function index(Request $request)
$daftarPeminjam = $peminjamanAktif->pluck('peminjam')->unique();
return view('admin.peminjaman.index', [
'pageTitle' => 'Manajemen Peminjaman & Denda',
'pageTitle' => 'Manajemen Peminjaman',
'peminjamanAktif' => $peminjamanAktif,
'daftarPeminjam' => $daftarPeminjam,
]);
@ -61,9 +79,12 @@ public function create()
// Hitung berapa buku yang sedang dipinjam
$jumlahPinjam = $peminjamanAktif->where('peminjam', $user['nama_lengkap'])->count();
// Cek Status
$user['jumlah_pinjam'] = $jumlahPinjam;
$user['kena_limit'] = $jumlahPinjam >= 2;
if (strtolower($user['role']) === 'siswa') {
$user['kena_limit'] = $jumlahPinjam >= 2;
} else {
$user['kena_limit'] = false;
}
// Cek apakah user di-banned (Nonaktif Manual)
$user['is_banned'] = $user['is_banned'] ?? false;
@ -77,6 +98,8 @@ public function create()
$user['status_text'] = "";
}
$user['jabatan'] = $user['jabatan'] ?? 'Guru Mata Pelajaran';
return $user;
})
->groupBy('role');
@ -108,17 +131,13 @@ public function dendaIndex()
// LOGIC AUTO-BAN
$allSiswa = $allSiswaRaw->map(function ($siswa) use ($allData, $now) {
// Cek siswa punya pinjaman yang telat
$pinjamanUser = $allData->firstWhere('user_id', $siswa['id']);
$isTelat = false;
if ($pinjamanUser) {
$isTelat = $pinjamanUser['tenggat_kembali']->startOfDay()->lt($now->startOfDay());
}
// Jika Role SISWA dan TELAT -> Wajib AUTO BAN (Override true)
// ika Role GURU -> Ikut status asli database (Manual Ban)
if ($siswa['role'] === 'siswa' && $isTelat) {
$siswa['is_banned'] = true;
}
@ -129,8 +148,7 @@ public function dendaIndex()
$siswaTelat = $allData->filter(function ($item) use ($now, $allSiswa) {
$userData = $allSiswa->firstWhere('id', $item['user_id']);
if (!$userData)
return false;
if (!$userData) return false;
$isTelat = $item['tenggat_kembali']->startOfDay()->lt($now->startOfDay());
$isBanned = $userData['is_banned'];
@ -139,34 +157,35 @@ public function dendaIndex()
return ($isTelat || $isBanned) && $isTargetRole;
})->map(function ($item) use ($now, $allSiswa) {
// Hitungan Denda
$tenggat = $item['tenggat_kembali']->startOfDay();
$hariTelat = ($tenggat->lt($now->startOfDay())) ? $tenggat->diffInDays($now->startOfDay()) : 0;
// Jika belum telat (tapi banned/manual), hari telat 0
$hariTelat = ($tenggat->lt($now->startOfDay()))
? $tenggat->diffInDays($now->startOfDay())
: 0;
$dataSiswa = $allSiswa->firstWhere('id', $item['user_id']);
$role = $dataSiswa ? strtolower($dataSiswa['role']) : 'siswa';
$item['role'] = $role;
$totalDenda = $hariTelat * $item['denda_per_hari'];
if ($role === 'guru') {
$item['total_denda'] = 0;
} else {
$item['total_denda'] = $hariTelat * $item['denda_per_hari'];
}
$item['hari_terlambat'] = $hariTelat;
$item['total_denda'] = $totalDenda;
// Ambil status is_banned TERBARU dari $allSiswa
$dataSiswa = $allSiswa->firstWhere('id', $item['user_id']);
$item['is_banned'] = $dataSiswa['is_banned'] ?? false;
$item['kelas'] = $dataSiswa['kelas'] ?? 'Guru';
// Link WA
$hp = $item['nomor_hp'];
if (substr($hp, 0, 1) == '0')
$hp = '62' . substr($hp, 1);
if (substr($hp, 0, 1) == '0') $hp = '62' . substr($hp, 1);
if ($hariTelat > 0) {
$pesan = "Halo {$item['peminjam']}, anda terlambat pengembalian buku. Total Denda: Rp " . number_format($totalDenda, 0, ',', '.');
if ($hariTelat > 0 && $role !== 'guru') {
$pesan = "Halo {$item['peminjam']}, anda terlambat pengembalian buku. Total Denda: Rp " . number_format($item['total_denda'], 0, ',', '.');
} elseif ($hariTelat > 0 && $role === 'guru') {
$pesan = "Halo Bapak/Ibu {$item['peminjam']}, mohon berkenan untuk mengembalikan buku yang telah melewati tenggat waktu.";
} else {
$pesan = "Halo {$item['peminjam']}, akun anda sedang dinonaktifkan sementara. Mohon hubungi petugas.";
}
$item['wa_link'] = "https://wa.me/{$hp}?text=" . urlencode($pesan);
return $item;

View File

@ -12,7 +12,14 @@ class UserController extends Controller
{
public function index()
{
$users = User::orderBy('created_at', 'desc')->paginate(10);
$query = User::orderBy('created_at', 'desc');
if (request()->has('role') && request('role') != '') {
$query->where('role', request('role'));
}
$users = $query->paginate(10)->appends(request()->query());
$whitelists = MasterInduk::orderBy('created_at', 'desc')->get();
return view('admin.pengguna.index', [

View File

@ -4,16 +4,24 @@
use App\Services\DummyDataService;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth; // Tambahkan ini
use Illuminate\Support\Facades\Auth;
class RiwayatController extends Controller
{
public function offlineIndex()
{
$user = \Illuminate\Support\Facades\Auth::user();
$user = Auth::user();
if (!$user) $user = (object) ['id' => 1];
$riwayatOffline = DummyDataService::getRiwayatOffline($user);
$dataOffline = DummyDataService::getRiwayatOffline($user);
$riwayatOffline = collect($dataOffline)
->sortBy([
['status', 'asc'],
['tanggal_pinjam', 'desc']
])
->values()
->all();
return view('riwayat.offline', [
'pageTitle' => 'Riwayat Peminjaman Offline',
@ -23,7 +31,15 @@ public function offlineIndex()
public function onlineIndex()
{
$riwayatOnline = DummyDataService::getRiwayatOnline();
$dataOnline = DummyDataService::getRiwayatOnline();
$riwayatOnline = collect($dataOnline)
->sortBy([
['status', 'asc'],
['tanggal_baca', 'desc']
])
->values()
->all();
return view('riwayat.online', [
'pageTitle' => 'Riwayat Baca Online',

View File

@ -13,43 +13,42 @@
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<div class="card-body">
<form action="#" method="POST">
{{-- Form ini tidak akan berfungsi karena tidak ada backend --}}
{{-- TAMBAHKAN ID PADA FORM --}}
<form action="#" method="POST" id="formTambahBuku">
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<label for="judul" class="form-label">Judul Buku</label>
<input type="text" class="form-control" id="judul"
placeholder="Masukkan judul buku">
<input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku" required>
</div>
<div class="mb-3">
<label for="penulis" class="form-label">Penulis</label>
<input type="text" class="form-control" id="penulis"
placeholder="Masukkan nama penulis">
<input type="text" class="form-control" id="penulis" placeholder="Masukkan nama penulis" required>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<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, Sains">
<input type="text" class="form-control" id="kategori" placeholder="Contoh: Fiksi" required>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-3 mb-3">
<label for="tahun" class="form-label">Tahun Terbit</label>
<input type="number" class="form-control" id="tahun"
placeholder="Contoh: 2024">
<input type="number" class="form-control" id="tahun" min="1000" max="2099" oninput="this.value = Math.abs(this.value)" placeholder="Contoh: 2024" required>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-3 mb-3">
<label for="kode_buku" class="form-label">Kode Buku</label>
<input type="number" class="form-control" id="kode_buku"
placeholder="Contoh: 330">
<input type="text" class="form-control" id="kode_buku" placeholder="Contoh: 330" required>
</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 class="mb-3">
<label class="form-label">Tipe Akses</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tipe_offline">
<label class="form-check-label" for="tipe_offline">Peminjaman
Offline</label>
<input class="form-check-input" type="checkbox" id="tipe_offline" checked>
<label class="form-check-label" for="tipe_offline">Peminjaman Offline</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tipe_online">
@ -77,5 +76,29 @@
</div>
</div>
</div>
</div>z
</x-app-layout>
</div>
@push('scripts')
<script>
document.getElementById('formTambahBuku').addEventListener('submit', function(e) {
e.preventDefault();
modernSwal.fire({
title: 'Menyimpan...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Buku baru berhasil ditambahkan.'
});
setTimeout(() => {
window.location.href = "{{ route('admin.buku.index') }}";
}, 1500);
});
});
</script>
@endpush
</x-app-layout>

View File

@ -13,60 +13,55 @@
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<div class="card-body">
<form action="#" method="POST">
{{-- Form ini tidak akan berfungsi karena tidak ada backend --}}
{{-- TAMBAHKAN ID PADA FORM --}}
<form action="#" method="POST" id="formEditBuku">
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<label for="judul" class="form-label">Judul Buku</label>
<input type="text" class="form-control" id="judul"
value="{{ $buku['judul'] }}">
<input type="text" class="form-control" id="judul" value="{{ $buku['judul'] }}" required>
</div>
<div class="mb-3">
<label for="penulis" class="form-label">Penulis</label>
<input type="text" class="form-control" id="penulis"
value="{{ $buku['penulis'] }}">
<input type="text" class="form-control" id="penulis" value="{{ $buku['penulis'] }}" required>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="kategori" class="form-label">Kategori</label>
<input type="text" class="form-control" id="kategori"
value="{{ $buku['kategori'] }}">
<input type="text" class="form-control" id="kategori" value="{{ $buku['kategori'] }}" required>
</div>
<div class="col-md-6 mb-3">
<label for="tahun" class="form-label">Tahun Terbit</label>
<input type="number" class="form-control" id="tahun"
value="{{ $buku['tahun'] }}">
<input type="number" class="form-control" id="tahun" value="{{ $buku['tahun'] }}" min="1000" max="2099" oninput="this.value = Math.abs(this.value)" required>
</div>
</div>
@php
$tipe_akses = is_array($buku['tipe_akses'])
? $buku['tipe_akses']
: [$buku['tipe_akses']];
$tipe_akses = is_array($buku['tipe_akses']) ? $buku['tipe_akses'] : [$buku['tipe_akses']];
$isOffline = in_array('offline', $tipe_akses);
@endphp
{{-- Field Kode Buku - Hanya untuk Buku Offline --}}
@if($isOffline)
<div class="mb-3">
<label for="kode_buku" class="form-label">Kode Buku</label>
<input type="text" class="form-control" id="kode_buku"
value="{{ $buku['kode_buku'] ?? '' }}" placeholder="Masukkan kode buku">
<div class="row">
<div class="col-md-6 mb-3">
<label for="kode_buku" class="form-label">Kode Buku</label>
<input type="text" class="form-control" id="kode_buku" value="{{ $buku['kode_buku'] ?? '' }}" placeholder="Masukkan kode buku" required>
</div>
<div class="col-md-6 mb-3">
<label for="stok_buku" class="form-label">Stok Buku</label>
<input type="number" class="form-control" id="stok_buku" value="{{ $buku['stok'] ?? 0 }}" min="0" oninput="this.value = Math.abs(this.value)" required>
</div>
</div>
@endif
<div class="mb-3">
<label class="form-label">Tipe Akses (Tidak dapat diubah)</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tipe_offline"
@if (in_array('offline', $tipe_akses)) checked @endif disabled>
<label class="form-check-label" for="tipe_offline">Peminjaman
Offline</label>
<input class="form-check-input" type="checkbox" id="tipe_offline" @if (in_array('offline', $tipe_akses)) checked @endif disabled>
<label class="form-check-label" for="tipe_offline">Peminjaman Offline</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="tipe_online"
@if (in_array('online', $tipe_akses)) checked @endif disabled>
<input class="form-check-input" type="checkbox" id="tipe_online" @if (in_array('online', $tipe_akses)) checked @endif disabled>
<label class="form-check-label" for="tipe_online">Baca Online</label>
</div>
</div>
@ -76,8 +71,7 @@
<div class="mb-3">
<label for="cover" class="form-label">Cover Buku</label>
<input type="file" class="form-control" id="cover">
<img src="{{ asset($buku['cover']) }}" alt="Cover saat ini"
class="img-thumbnail mt-2" width="150">
<img src="{{ asset($buku['cover']) }}" alt="Cover saat ini" class="img-thumbnail mt-2" width="150">
</div>
</div>
</div>
@ -91,4 +85,28 @@ class="img-thumbnail mt-2" width="150">
</div>
</div>
</div>
@push('scripts')
<script>
document.getElementById('formEditBuku').addEventListener('submit', function(e) {
e.preventDefault();
modernSwal.fire({
title: 'Menyimpan Perubahan...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Data buku berhasil diperbarui.'
});
setTimeout(() => {
window.location.href = "{{ route('admin.buku.index') }}";
}, 1500);
});
});
</script>
@endpush
</x-app-layout>

View File

@ -11,13 +11,14 @@
<div class="card-body">
<ul class="nav nav-tabs" id="bukuTab" role="tablist">
<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
({{ $bukuOffline->count() }})</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 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 ({{ $bukuOnline->count() }})</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>
{{-- TAB BARU KHUSUS ARSIP --}}
<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>
</li>
</ul>
@ -25,7 +26,7 @@
{{-- TAB UNTUK BUKU OFFLINE --}}
<div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
<div class="table-responsive mt-3">
<table class="table table-hover">
<table class="table table-hover align-middle" id="tableOffline">
<thead>
<tr>
<th>No</th>
@ -33,45 +34,46 @@
<th>Judul</th>
<th>Kode Buku</th>
<th>Penulis</th>
<th>Stok</th>
<th>Status</th>
<th>Aksi</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse($bukuOffline as $buku)
<tr>
<td>{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}"
width="50" class="rounded"></td>
<td>{{ $buku['judul'] }}</td>
<tr data-tipe="offline">
<td class="row-number">{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
<td class="fw-bold">{{ $buku['judul'] }}</td>
<td>{{ $buku['kode_buku'] }}</td>
<td>{{ $buku['penulis'] }}</td>
<td><span class="badge bg-secondary">{{ $buku['stok'] ?? 0 }}</span></td>
<td>
@if ($buku['status'] == 'Tersedia')
<span
class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
<span class="badge bg-success-subtle text-success-emphasis">Tersedia</span>
@else
<span
class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
<span class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
@endif
</td>
<td>
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
data-cover="{{ asset($buku['cover']) }}"
data-judul="{{ $buku['judul'] }}"
data-kode_buku="{{ $buku['kode_buku'] }}"
data-penulis="{{ $buku['penulis'] }}"
data-kategori="{{ $buku['kategori'] }}"
data-tahun="{{ $buku['tahun'] }}" data-status="{{ $buku['status'] }}">
<i class="bi bi-eye-fill"></i> Detail
</button>
<div class="d-flex justify-content-center gap-2 aksi-buttons">
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
data-kode_buku="{{ $buku['kode_buku'] }}" data-penulis="{{ $buku['penulis'] }}"
data-kategori="{{ $buku['kategori'] }}" data-tahun="{{ $buku['tahun'] }}"
data-status="{{ $buku['status'] }}">
<i class="bi bi-eye-fill"></i> Detail
</button>
<button class="btn btn-sm btn-outline-warning btn-arsipkan"
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
<i class="bi bi-archive-fill"></i> Arsip
</button>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center py-4">Tidak ada data buku offline.</td>
</tr>
<tr class="empty-row"><td colspan="8" class="text-center py-4">Tidak ada data buku offline.</td></tr>
@endforelse
</tbody>
</table>
@ -81,7 +83,7 @@ class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
{{-- TAB UNTUK BUKU ONLINE --}}
<div class="tab-pane fade" id="online-tab-pane" role="tabpanel">
<div class="table-responsive mt-3">
<table class="table table-hover">
<table class="table table-hover align-middle" id="tableOnline">
<thead>
<tr>
<th>No</th>
@ -89,45 +91,67 @@ class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
<th>Judul</th>
<th>Penulis</th>
<th>File PDF</th>
<th>Aksi</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse($bukuOnline as $buku)
<tr>
<td>{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}"
width="50" class="rounded"></td>
<td>{{ $buku['judul'] }}</td>
<tr data-tipe="online">
<td class="row-number">{{ $loop->iteration }}</td>
<td><img src="{{ asset($buku['cover']) }}" alt="{{ $buku['judul'] }}" width="40" class="rounded shadow-sm"></td>
<td class="fw-bold">{{ $buku['judul'] }}</td>
<td>{{ $buku['penulis'] }}</td>
<td><span
class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span>
</td>
<td><span class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}</span></td>
<td>
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
data-cover="{{ asset($buku['cover']) }}"
data-judul="{{ $buku['judul'] }}"
data-penulis="{{ $buku['penulis'] }}"
data-kategori="{{ $buku['kategori'] }}"
data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online">
<i class="bi bi-eye-fill"></i> Detail
</button>
<div class="d-flex justify-content-center gap-2 aksi-buttons">
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
data-bs-target="#detailBukuModal" data-id="{{ $buku['id'] }}"
data-cover="{{ asset($buku['cover']) }}" data-judul="{{ $buku['judul'] }}"
data-penulis="{{ $buku['penulis'] }}" data-kategori="{{ $buku['kategori'] }}"
data-tahun="{{ $buku['tahun'] }}" data-status="Dapat Dibaca Online">
<i class="bi bi-eye-fill"></i> Detail
</button>
<button class="btn btn-sm btn-outline-warning btn-arsipkan"
data-judul="{{ $buku['judul'] }}" title="Arsipkan Buku">
<i class="bi bi-archive-fill"></i> Arsip
</button>
</div>
</td>
</tr>
@empty
<tr>
<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">Tidak ada data buku online.</td></tr>
@endforelse
</tbody>
</table>
</div>
</div>
{{-- TAB UNTUK ARSIP --}}
<div class="tab-pane fade" id="arsip-tab-pane" role="tabpanel">
<div class="table-responsive mt-3">
<table class="table table-hover align-middle" id="tableArsip">
<thead>
<tr>
<th>No</th>
<th>Cover</th>
<th>Judul</th>
<th>Penulis</th>
<th>Tipe</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<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>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{{-- MODAL DETAIL BUKU --}}
<div class="modal fade" id="detailBukuModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@ -137,37 +161,24 @@ class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<img src="" id="modalCover" class="img-fluid rounded shadow-sm" alt="Cover Buku">
<div class="col-md-4 text-center mb-4 mb-md-0">
<img src="" id="modalCover" class="img-fluid rounded shadow mx-auto d-block" style="max-height: 250px; object-fit: cover;" alt="Cover Buku">
</div>
<div class="col-md-8">
<h3 id="modalJudulContent" class="fw-bold"></h3>
<p class="text-muted" id="modalPenulis"></p>
<h3 id="modalJudulContent" class="fw-bold text-dark"></h3>
<p class="text-muted mb-4" id="modalPenulis"></p>
<table class="table table-sm table-borderless">
<tr>
<th width="100px">Kategori</th>
<td id="modalKategori"></td>
</tr>
<tr id="rowKodeBuku">
<th>Kode Buku</th>
<td id="modalKode_buku"></td>
</tr>
<tr>
<th>Tahun</th>
<td id="modalTahun"></td>
</tr>
<tr>
<th>Status</th>
<td><span id="modalStatus" class="badge"></span></td>
</tr>
<tr><th width="120px" class="text-black">Kategori</th><td id="modalKategori" class="fw-semibold"></td></tr>
<tr id="rowKodeBuku"><th class="text-black">Kode Buku</th><td id="modalKode_buku" class="fw-semibold"></td></tr>
<tr><th class="text-black">Tahun Terbit</th><td id="modalTahun" class="fw-semibold"></td></tr>
<tr><th class="text-black">Status</th><td><span id="modalStatus" class="badge"></span></td></tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<a href="#" id="modalEditButton" class="btn btn-primary"><i
class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
<a href="#" id="modalEditButton" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
</div>
</div>
</div>
@ -176,6 +187,7 @@ class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// LOGIC UNTUK MODAL DETAIL
const detailBukuModal = document.getElementById('detailBukuModal');
if (detailBukuModal) {
detailBukuModal.addEventListener('show.bs.modal', event => {
@ -212,7 +224,6 @@ class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
modalStatus.textContent = status;
modalEditButton.href = editUrl;
// Tampilkan/sembunyikan kode buku berdasarkan ada tidaknya data
if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
rowKodeBuku.style.display = '';
modalKode_buku.textContent = `: ${kode_buku}`;
@ -227,7 +238,90 @@ class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
}
});
}
function updateTableNumbers() {
let countOffline = 0;
$('#tableOffline tbody tr').not('.empty-row').each(function(index) {
$(this).find('.row-number').text(index + 1);
countOffline++;
});
$('#countOffline').text(countOffline);
let countOnline = 0;
$('#tableOnline tbody tr').not('.empty-row').each(function(index) {
$(this).find('.row-number').text(index + 1);
countOnline++;
});
$('#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 UNTUK TOMBOL ARSIPKAN
$(document).on('click', '.btn-arsipkan', function() {
const judul = $(this).data('judul');
const row = $(this).closest('tr');
const coverHtml = row.find('td:eq(1)').html();
const tipe = row.data('tipe');
const penulis = tipe === 'offline' ? row.find('td:eq(4)').text() : row.find('td:eq(3)').text();
modernSwal.fire({
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() {
$(this).remove();
$('#tableArsip tbody').append(newRow);
updateTableNumbers();
});
});
}
});
});
});
</script>
@endpush
</x-app-layout>
</x-app-layout>

View File

@ -4,7 +4,7 @@
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h3 class="my-0 fw-bold">Manajemen Denda & Sanksi</h3>
<p class="text-muted mb-0">Pantau siswa terlambat dan berikan sanksi jika diperlukan.</p>
<p class="text-muted mb-0">Pantau pengguna terlambat dan berikan sanksi jika diperlukan.</p>
</div>
</div>
@ -17,7 +17,7 @@
</div>
<div class="col-md-3">
<select id="filterKelas" class="form-select form-select-sm">
<option value="">Semua Kelas</option>
<option value="">Semua Kelas/Golongan</option>
@foreach ($listKelas as $kelas)
<option value="{{ $kelas }}">{{ $kelas }}</option>
@endforeach
@ -46,7 +46,7 @@
<thead class="table-light">
<tr>
<th class="text-center" width="5%">NO</th>
<th width="25%">SISWA & KELAS</th>
<th width="25%">NAMA</th>
<th width="25%">BUKU TERLAMBAT</th>
<th width="15%">STATUS</th>
<th width="15%">DENDA</th>
@ -59,10 +59,10 @@
<td class="text-center">{{ $loop->iteration }}</td>
<td>
<div class="fw-bold text-dark">{{ $item['peminjam'] }}</div>
<span
class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
<div class="small text-muted"><i
class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}</div>
<span class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
<div class="small text-muted">
<i class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}
</div>
</td>
<td>
<ul class="mb-0 ps-3 small text-muted">
@ -71,42 +71,54 @@ class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}</div>
@endforeach
</ul>
</td>
{{-- KOLOM STATUS --}}
<td data-order="{{ $item['tenggat_kembali']->timestamp }}">
<span
class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3">
Telat {{ $item['hari_terlambat'] }} Hari
</span>
<div class="small text-muted mt-1">
Tenggat: {{ $item['tenggat_kembali']->format('d/m/Y') }}
</div>
@if(isset($item['role']) && strtolower($item['role']) === 'guru')
<div class="fw-bold text-muted">-</div>
@else
<span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3">
Telat {{ $item['hari_terlambat'] }} Hari
</span>
<div class="small text-muted mt-1">
Tenggat: {{ $item['tenggat_kembali']->format('d/m/Y') }}
</div>
@endif
</td>
<td data-order="{{ $item['total_denda'] }}">
<div class="fw-bold text-danger">Rp
{{ number_format($item['total_denda'], 0, ',', '.') }}</div>
<small class="text-muted" style="font-size: 0.75rem;">Rp 1.000/hari</small>
{{-- KOLOM DENDA --}}
<td data-order="{{ isset($item['role']) && strtolower($item['role']) === 'guru' ? 0 : $item['total_denda'] }}">
@if(isset($item['role']) && strtolower($item['role']) === 'guru')
<div class="fw-bold text-muted">-</div>
@else
<div class="fw-bold text-danger">Rp {{ number_format($item['total_denda'], 0, ',', '.') }}</div>
<small class="text-muted" style="font-size: 0.75rem;">Rp 1.000/hari</small>
@endif
</td>
{{-- KOLOM AKSI --}}
<td>
<div class="d-flex gap-2">
{{-- Tombol WA --}}
{{-- Tombol WA (Muncul untuk semua) --}}
<a href="{{ $item['wa_link'] }}" target="_blank"
class="btn btn-sm btn-success text-white" title="Tagih via WhatsApp">
<i class="bi bi-whatsapp"></i>
</a>
{{-- LOGIC TOMBOL AKTIFKAN / SANKSI --}}
@if ($item['is_banned'])
{{-- Jika sudah dibekukan (Otomatis/Manual), muncul tombol AKTIFKAN --}}
<button class="btn btn-sm btn-outline-success btn-aktifkan"
data-nama="{{ $item['peminjam'] }}" title="Aktifkan Kembali Akun">
<i class="bi bi-shield-check"></i> Aktifkan
</button>
@else
{{-- Jika belum dibekukan, muncul tombol SANKSI (Manual) --}}
<button class="btn btn-sm btn-outline-danger btn-sanksi"
data-nama="{{ $item['peminjam'] }}" title="Berikan Sanksi">
<i class="bi bi-slash-circle"></i> Sanksi
</button>
@if(!isset($item['role']) || strtolower($item['role']) !== 'guru')
@if ($item['is_banned'])
{{-- Jika sudah dibekukan (Otomatis/Manual), muncul tombol AKTIFKAN --}}
<button class="btn btn-sm btn-outline-success btn-aktifkan"
data-nama="{{ $item['peminjam'] }}" title="Aktifkan Kembali Akun">
<i class="bi bi-shield-check"></i> Aktifkan
</button>
@else
{{-- Jika belum dibekukan, muncul tombol SANKSI (Manual) --}}
<button class="btn btn-sm btn-outline-danger btn-sanksi"
data-nama="{{ $item['peminjam'] }}" title="Berikan Sanksi">
<i class="bi bi-slash-circle"></i> Sanksi
</button>
@endif
@endif
</div>
</td>
@ -116,7 +128,7 @@ class="btn btn-sm btn-success text-white" title="Tagih via WhatsApp">
<td colspan="6" class="text-center py-5">
<div class="text-muted opacity-50">
<i class="bi bi-emoji-smile fs-1 mb-2 d-block"></i>
<p class="mb-0">Tidak ada siswa yang terlambat hari ini.</p>
<p class="mb-0">Tidak ada buku terlambat hari ini.</p>
</div>
</td>
</tr>
@ -143,7 +155,7 @@ class="btn btn-sm btn-success text-white" title="Tagih via WhatsApp">
language: {
search: "_INPUT_",
searchPlaceholder: "Cari nama siswa..."
searchPlaceholder: "Cari nama peminjam..."
},
dom: 'rtip'
});
@ -187,7 +199,7 @@ function(settings, data, dataIndex) {
$(document).on('click', '.btn-sanksi', function() {
const nama = $(this).data('nama');
modernSwal.fire({
title: 'Nonaktifkan Guru?',
title: 'Nonaktifkan Akun?',
text: `Apakah Anda yakin ingin memberikan sanksi pembekuan akun kepada ${nama}?`,
icon: 'warning',
showCancelButton: true,
@ -245,4 +257,4 @@ function(settings, data, dataIndex) {
});
</script>
@endpush
</x-app-layout>
</x-app-layout>

View File

@ -18,15 +18,17 @@
<h5 class="fw-bold mb-3">Data Peminjaman</h5>
<div class="mb-3">
<label for="peminjam_id" class="form-label">Pilih Peminjam (Siswa/Guru)</label>
<select class="form-control" id="peminjam_id" name="peminjam_id"
placeholder="Cari nama atau email...">
<select class="form-control" id="peminjam_id" name="peminjam_id" placeholder="Cari nama atau email...">
<option value="">Pilih...</option>
@foreach ($groupedUsers as $role => $users)
<optgroup label="{{ ucfirst($role) }}">
@foreach ($users as $user)
{{-- Logic Disable User --}}
<option value="{{ $user['id'] }}"
<option value="{{ $user['id'] }}"
data-role="{{ strtolower($role) }}"
data-identitas="{{ $user['nip'] ?? $user['nisn'] ?? '-' }}"
data-kontak="{{ $user['no_hp'] ?? '-' }}"
data-info="{{ strtolower($role) == 'guru' ? ($user['jabatan'] ?? 'Guru') : ($user['kelas'] ?? 'Siswa') }}"
{{ $user['disabled'] ? 'disabled' : '' }}>
{{ $user['nama_lengkap'] }} {{ $user['status_text'] }}
</option>
@ -36,16 +38,24 @@
</select>
</div>
<div id="detailPeminjamCard" class="alert alert-secondary d-none mb-3">
<h6 class="fw-bold mb-2 border-bottom pb-1"><i class="bi bi-person-badge me-2"></i>Detail Identitas</h6>
<div class="row small">
<div class="col-6 mb-1"><span class="text-muted">NIP/NISN:</span> <strong id="lblIdentitas">-</strong></div>
<div class="col-6 mb-1"><span class="text-muted">No. HP:</span> <strong id="lblKontak">-</strong></div>
<div class="col-6"><span class="text-muted">Jabatan/Kelas:</span> <strong id="lblInfo">-</strong></div>
<div class="col-6"><span class="text-muted">Role:</span> <strong id="lblRole" class="text-uppercase">-</strong></div>
</div>
</div>
<div class="row g-3">
<div class="col-md-6">
<label for="tanggal_pinjam" class="form-label">Tanggal Pinjam</label>
<input type="text" class="form-control" id="tanggal_pinjam" name="tanggal_pinjam"
placeholder="Pilih tanggal pinjam">
<input type="text" class="form-control" id="tanggal_pinjam" name="tanggal_pinjam" placeholder="Pilih tanggal pinjam">
</div>
<div class="col-md-6">
<label for="tanggal_kembali" class="form-label">Tenggat Kembali</label>
<input type="text" class="form-control" id="tanggal_kembali" name="tanggal_kembali"
placeholder="Pilih tenggat kembali">
<input type="text" class="form-control" id="tanggal_kembali" name="tanggal_kembali" placeholder="Pilih tenggat kembali">
</div>
</div>
@ -84,8 +94,7 @@
<div class="mb-3">
<div class="input-group">
<span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
<input type="text" class="form-control border-start-0" id="searchBuku"
placeholder="Cari judul atau penulis...">
<input type="text" class="form-control border-start-0" id="searchBuku" placeholder="Cari judul atau penulis...">
</div>
</div>
@ -98,19 +107,15 @@
data-book-kategori="{{ $buku['kategori'] }}">
<div class="d-flex align-items-center book-item-list"
onclick="toggleBookSelection(this, {{ $buku['id'] }})"
style="cursor: pointer;">
<img src="{{ asset($buku['cover']) }}" alt="Cover" class="rounded me-3"
style="width: 50px; height: 70px; object-fit: cover;">
onclick="toggleBookSelection(this, {{ $buku['id'] }})" style="cursor: pointer;">
<img src="{{ asset($buku['cover']) }}" alt="Cover" class="rounded me-3" style="width: 50px; height: 70px; object-fit: cover;">
<div class="flex-grow-1">
<h6 class="fw-bold mb-1 line-clamp-2">{{ $buku['judul'] }}</h6>
<p class="text-muted small mb-1">{{ $buku['penulis'] }}</p>
<span class="badge bg-info-soft">{{ $buku['kategori'] }}</span>
</div>
<div class="form-check ms-3">
<input class="form-check-input book-checkbox" type="checkbox"
value="{{ $buku['id'] }}" id="book-check-{{ $buku['id'] }}"
style="pointer-events: none;">
<input class="form-check-input book-checkbox" type="checkbox" value="{{ $buku['id'] }}" id="book-check-{{ $buku['id'] }}" style="pointer-events: none;">
</div>
</div>
</div>
@ -122,53 +127,47 @@
</div>
</form>
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
const tomSelect = new TomSelect("#peminjam_id", {
create: false,
sortField: {
field: "text",
direction: "asc"
}
});
const tglPinjam = flatpickr("#tanggal_pinjam", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "d/m/Y",
defaultDate: "today",
locale: "id",
onChange: function(selectedDates, dateStr) {
if (selectedDates.length > 0) {
tglKembali.set("minDate", new Date(selectedDates[0]).fp_incr(1));
sortField: { field: "text", direction: "asc" },
onChange: function(value) {
// Munculkan Kartu Detail Peminjam saat Dropdown Berubah
const selectedOption = this.options[value];
const detailCard = document.getElementById('detailPeminjamCard');
if(selectedOption && value !== "") {
document.getElementById('lblRole').textContent = selectedOption.dataset.role;
document.getElementById('lblIdentitas').textContent = selectedOption.dataset.identitas;
document.getElementById('lblKontak').textContent = selectedOption.dataset.kontak;
document.getElementById('lblInfo').textContent = selectedOption.dataset.info;
detailCard.classList.remove('d-none');
} else {
detailCard.classList.add('d-none');
}
}
});
const tglKembali = flatpickr("#tanggal_kembali", {
dateFormat: "Y-m-d",
altInput: true,
altFormat: "d/m/Y",
defaultDate: new Date().fp_incr(7),
locale: "id",
minDate: new Date().fp_incr(1)
const tglPinjam = flatpickr("#tanggal_pinjam", {
dateFormat: "Y-m-d", altInput: true, altFormat: "d/m/Y", defaultDate: "today", locale: "id",
onChange: function(selectedDates, dateStr) {
if (selectedDates.length > 0) tglKembali.set("minDate", new Date(selectedDates[0]).fp_incr(1));
}
});
const tglKembali = flatpickr("#tanggal_kembali", {
dateFormat: "Y-m-d", altInput: true, altFormat: "d/m/Y", defaultDate: new Date().fp_incr(7), locale: "id", minDate: new Date().fp_incr(1)
});
// Logika Pemilihan Buku
const MAX_BOOKS = 2;
const MAX_BOOKS_SISWA = 2;
let selectedBookIds = new Set();
const allBooks = new Map();
document.querySelectorAll('.book-option').forEach(el => {
const id = el.dataset.bookId;
allBooks.set(id, {
id: id,
title: el.querySelector('h6').textContent,
author: el.querySelector('p').textContent,
cover: el.dataset.bookCover
});
allBooks.set(id, { id: id, title: el.querySelector('h6').textContent, author: el.querySelector('p').textContent, cover: el.dataset.bookCover });
});
const daftarBukuPinjamEl = document.getElementById('daftarBukuPinjam');
@ -176,21 +175,14 @@
const counterBukuEl = document.getElementById('counterBuku');
const emptyStateBukuEl = document.getElementById('emptyStateBuku');
// Fungsi render
function renderSelectedBooks() {
daftarBukuPinjamEl.querySelectorAll('.selected-book-item').forEach(el => el.remove());
hiddenInputsEl.innerHTML = '';
if (selectedBookIds.size === 0) {
emptyStateBukuEl.style.display = 'block';
} else {
emptyStateBukuEl.style.display = 'none';
}
emptyStateBukuEl.style.display = selectedBookIds.size === 0 ? 'block' : 'none';
selectedBookIds.forEach(id => {
const book = allBooks.get(String(id));
if (!book) return;
const itemHtml = `
<div class="selected-book-item book-item d-flex align-items-start p-3 mb-2 rounded" data-selected-id="${id}">
<img src="${book.cover}" alt="Cover" class="rounded me-3" style="width: 45px; height: 60px; object-fit: cover;">
@ -198,37 +190,25 @@ function renderSelectedBooks() {
<h6 class="fw-bold mb-0 line-clamp-1">${book.title}</h6>
<p class="text-muted small mb-0">${book.author}</p>
</div>
<button type="button" class="btn btn-sm btn-outline-danger remove-book" onclick="removeBook(${id})">
<i class="bi bi-trash"></i>
</button>
</div>
`;
<button type="button" class="btn btn-sm btn-outline-danger remove-book" onclick="removeBook(${id})"><i class="bi bi-trash"></i></button>
</div>`;
daftarBukuPinjamEl.insertAdjacentHTML('beforeend', itemHtml);
const inputHtml = `<input type="hidden" name="buku_ids[]" value="${id}">`;
hiddenInputsEl.insertAdjacentHTML('beforeend', inputHtml);
hiddenInputsEl.insertAdjacentHTML('beforeend', `<input type="hidden" name="buku_ids[]" value="${id}">`);
});
counterBukuEl.textContent = `${selectedBookIds.size} Buku`;
}
// Fungsi search
const searchBukuInput = document.getElementById('searchBuku');
searchBukuInput.addEventListener('keyup', function() {
const searchTerm = this.value.toLowerCase();
document.querySelectorAll('.book-option').forEach(el => {
const title = el.dataset.bookTitle;
const author = el.dataset.bookAuthor;
if (title.includes(searchTerm) || author.includes(searchTerm)) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
});
});
// Global function untuk toggle selection
window.toggleBookSelection = function(itemElement, id) {
const selectEl = document.getElementById('peminjam_id');
if(selectEl.value === "") {
alert("Silakan pilih Peminjam (Siswa/Guru) terlebih dahulu sebelum memilih buku!");
return;
}
const selectedOption = selectEl.options[selectEl.selectedIndex];
const roleUser = selectedOption.dataset.role;
const checkbox = itemElement.querySelector('.book-checkbox');
const stringId = String(id);
@ -237,8 +217,8 @@ function renderSelectedBooks() {
checkbox.checked = false;
itemElement.style.background = 'transparent';
} else {
if (selectedBookIds.size >= MAX_BOOKS) {
alert(`Maaf, Anda hanya dapat memilih maksimal ${MAX_BOOKS} buku.`);
if (roleUser === 'siswa' && selectedBookIds.size >= MAX_BOOKS_SISWA) {
alert(`Maaf, role Siswa hanya dapat meminjam maksimal ${MAX_BOOKS_SISWA} buku secara bersamaan.`);
return;
}
@ -249,39 +229,76 @@ function renderSelectedBooks() {
renderSelectedBooks();
}
// Global function untuk remove
window.removeBook = function(id) {
const stringId = String(id);
selectedBookIds.delete(stringId);
const itemElement = document.querySelector(
`.book-option[data-book-id="${id}"] .book-item-list`);
selectedBookIds.delete(String(id));
const itemElement = document.querySelector(`.book-option[data-book-id="${id}"] .book-item-list`);
if (itemElement) {
itemElement.querySelector('.book-checkbox').checked = false;
itemElement.style.background = 'transparent';
}
renderSelectedBooks();
}
const form = document.getElementById('formPeminjaman');
form.reset();
tomSelect.clear();
tglPinjam.setDate("today", false);
tglKembali.setDate(new Date().fp_incr(7), false);
selectedBookIds.clear();
document.querySelectorAll('.book-option').forEach(el => {
el.querySelector('.book-checkbox').checked = false;
el.querySelector('.book-item-list').style.background = 'transparent';
// Pencarian
document.getElementById('searchBuku').addEventListener('keyup', function() {
const searchTerm = this.value.toLowerCase();
document.querySelectorAll('.book-option').forEach(el => {
const title = el.dataset.bookTitle;
const author = el.dataset.bookAuthor;
el.style.display = (title.includes(searchTerm) || author.includes(searchTerm)) ? 'block' : 'none';
});
});
renderSelectedBooks();
document.getElementById('formPeminjaman').addEventListener('submit', function(e) {
e.preventDefault();
const peminjam = document.getElementById('peminjam_id').value;
const jumlahBuku = selectedBookIds.size;
// Validasi
if (!peminjam) {
Toast.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih peminjam terlebih dahulu!' });
return;
}
if (jumlahBuku === 0) {
Toast.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih minimal 1 buku!' });
return;
}
modernSwal.fire({
title: 'Proses Peminjaman?',
text: `Anda akan memproses ${jumlahBuku} buku.`,
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ya, Proses',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
// Loading
modernSwal.fire({
title: 'Memproses...',
timer: 1000,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Transaksi peminjaman berhasil disimpan.'
});
setTimeout(() => {
window.location.href = "{{ route('admin.peminjaman.index') }}";
}, 1500);
});
}
});
});
document.getElementById('formPeminjaman').reset();
tomSelect.clear();
selectedBookIds.clear();
renderSelectedBooks();
});
</script>
@endpush
</x-app-layout>
</x-app-layout>

View File

@ -1,26 +1,34 @@
<x-app-layout>
@section('page-title', $pageTitle)
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
<div>
<h3 class="my-0 fw-bold">Manajemen Peminjaman</h3>
<p class="text-muted mb-0">Daftar ini hanya menampilkan buku yang masih berstatus "Dipinjam".</p>
</div>
<a href="{{ route('admin.peminjaman.create') }}" class="btn btn-primary">
<i class="bi bi-plus-circle-fill me-2"></i>Buat Peminjaman Manual
</a>
<div class="d-flex align-items-center gap-2">
<form action="#" method="GET" class="d-flex m-0 p-0 bg-white border rounded p-1" onsubmit="alert('Fitur download Excel sedang disiapkan tim Backend'); return false;">
<input type="month" name="bulan_laporan" class="form-control form-control-sm border-0 me-1" required>
<button type="submit" class="btn btn-sm btn-success text-nowrap">
<i class="bi bi-file-earmark-excel-fill me-1"></i>Excel
</button>
</form>
<a href="{{ route('admin.peminjaman.create') }}" class="btn btn-primary text-nowrap">
<i class="bi bi-plus-circle-fill me-1"></i>Peminjaman Manual
</a>
</div>
</div>
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="table-responsive">
<table id="peminjamanTable" class="table table-striped table-hover nowrap dt-responsive"
style="width:100%">
<table id="peminjamanTable" class="table table-striped table-hover nowrap dt-responsive" style="width:100%">
<thead class="table-light">
<tr>
<th>NO</th>
<th>ID PEMINJAMAN</th>
<th>NAMA</th>
<th>PEMINJAM (JABATAN/KELAS)</th>
<th>JUDUL BUKU</th>
<th>TGL. PINJAM</th>
<th>TENGGAT KEMBALI</th>
@ -41,10 +49,16 @@
$isHariIni = $now->startOfDay()->isSameDay($tenggat->startOfDay());
$selisihHari = $now->startOfDay()->diffInDays($tenggat->startOfDay(), false);
$isGuru = isset($transaksi['role']) && strtolower($transaksi['role']) == 'guru';
if ($isTerlambat) {
$statusClass = 'badge rounded-pill bg-danger-subtle text-danger-emphasis';
$statusText =
'Terlambat ' . $tenggat->startOfDay()->diffInDays($now->startOfDay()) . ' hari';
if ($isGuru) {
$statusClass = 'badge rounded-pill bg-info-subtle text-info-emphasis';
$statusText = 'Terlambat (Bebas Denda)';
} else {
$statusClass = 'badge rounded-pill bg-danger-subtle text-danger-emphasis';
$statusText = 'Terlambat ' . $tenggat->startOfDay()->diffInDays($now->startOfDay()) . ' hari';
}
} elseif ($isHariIni) {
$statusClass = 'badge rounded-pill bg-warning-subtle text-warning-emphasis';
$statusText = 'Jatuh Tempo Hari Ini';
@ -57,8 +71,7 @@
<tr>
<td>{{ $counter++ }}</td>
<td>
<span
class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjaman'] }}</span>
<span class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjaman'] }}</span>
</td>
<td>
<div class="fw-bold">{{ $transaksi['peminjam'] }}</div>
@ -85,125 +98,104 @@ class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjama
</tr>
{{-- MODAL PENGEMBALIAN --}}
<div class="modal fade" id="modalPengembalian-{{ $transaksi['id_peminjaman'] }}"
tabindex="-1" aria-hidden="true">
<div class="modal fade" id="modalPengembalian-{{ $transaksi['id_peminjaman'] }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content border-0 shadow-lg rounded-3">
<div class="modal-header p-4">
<h5 class="modal-title fw-bold">Proses Pengembalian
({{ count($transaksi['books']) }} Buku)
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
<h5 class="modal-title fw-bold">Proses Pengembalian ({{ count($transaksi['books']) }} Buku)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<div class="alert alert-light border mb-4">
<div class="d-flex justify-content-between">
<span>Peminjam:
<strong>{{ $transaksi['peminjam'] }}</strong></span>
<span>Peminjam: <strong>{{ $transaksi['peminjam'] }}</strong></span>
<span>ID: <strong>{{ $transaksi['id_peminjaman'] }}</strong></span>
</div>
</div>
<h6 class="fw-bold mb-3">Daftar Buku yang Dikembalikan:</h6>
@if($isGuru)
<div class="alert alert-info py-2 small mb-3">
<i class="bi bi-shield-check me-1"></i> Role Guru: Bebas dari beban denda keterlambatan dan catatan denda/sanksi.
</div>
@endif
<h6 class="fw-bold mb-3">Daftar Buku yang Dikembalikan:</h6>
@foreach ($transaksi['books'] as $buku)
<div class="card mb-3 border bg-light">
<div class="card-body p-3">
<h6 class="fw-bold text-primary mb-2">{{ $buku['judul'] }}</h6>
<div class="row">
@if(!$isGuru)
<div class="col-md-6">
<label class="form-label small text-muted mb-1">Kondisi
Buku</label>
<label class="form-label small text-muted mb-1">Kondisi Buku</label>
<div class="d-flex gap-3">
<div class="form-check">
<input class="form-check-input radio-kondisi"
type="radio"
name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}"
value="baik" checked>
<label
class="form-check-label small">Baik</label>
<input class="form-check-input radio-kondisi" type="radio" name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}" value="baik" checked>
<label class="form-check-label small">Baik</label>
</div>
<div class="form-check">
<input class="form-check-input radio-kondisi"
type="radio"
name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}"
value="rusak">
<label
class="form-check-label small">Rusak/Hilang</label>
<input class="form-check-input radio-kondisi" type="radio" name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}" value="rusak">
<label class="form-check-label small">Rusak/Hilang</label>
</div>
</div>
</div>
<div class="col-md-6 denda-rusak-input-wrapper d-none">
<label class="form-label small text-muted mb-1">Denda
Kerusakan</label>
<input type="number"
class="form-control form-control-sm denda-rusak-input"
placeholder="0">
<label class="form-label small text-muted mb-1">Denda Kerusakan</label>
<input type="number" class="form-control form-control-sm denda-rusak-input" placeholder="0">
</div>
<div class="col-12">
<label class="form-label small text-muted mb-1">
<i class="bi bi-pencil-square me-1"></i>Catatan
Petugas
</label>
<textarea class="form-control form-control-sm" rows="2"
placeholder="Contoh: Ada coretan di halaman 10, Cover sedikit terlipat, dll..."></textarea>
<label class="form-label small text-muted mb-1"><i class="bi bi-pencil-square me-1"></i>Catatan Petugas</label>
<textarea class="form-control form-control-sm" rows="2" placeholder="Contoh: Ada coretan di halaman 10, Cover sedikit terlipat..."></textarea>
</div>
@else
<div class="col-12">
<span class="badge bg-success-subtle text-success-emphasis border"><i class="bi bi-check-circle me-1"></i> Buku dikembalikan oleh Guru</span>
</div>
@endif
</div>
</div>
</div>
@endforeach
<hr>
@if(!$isGuru)
<div class="d-flex justify-content-between align-items-center mb-3">
<span>Denda Keterlambatan ({{ $statusText }})</span>
@php
$dendaTelat = 0;
if ($isTerlambat) {
if ($isTerlambat && !$isGuru) {
$hari = $tenggat->startOfDay()->diffInDays($now->startOfDay());
$dendaTelat = $hari * 1000;
}
@endphp
{{-- Data Attribute untuk JS --}}
<strong class="text-danger denda-keterlambatan-display"
data-denda-keterlambatan="{{ $dendaTelat }}">
<strong class="text-danger denda-keterlambatan-display" data-denda-keterlambatan="{{ $dendaTelat }}">
Rp {{ number_format($dendaTelat, 0, ',', '.') }}
</strong>
</div>
<div
class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opacity-10 p-2 rounded">
<div class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opacity-10 p-2 rounded">
<span class="fw-bold text-danger">TOTAL YANG HARUS DIBAYAR</span>
<strong class="text-danger fs-5 total-denda-display">
Rp {{ number_format($dendaTelat, 0, ',', '.') }}
</strong>
<strong class="text-danger fs-5 total-denda-display">Rp {{ number_format($dendaTelat, 0, ',', '.') }}</strong>
</div>
@endif
<div class="form-check form-switch mb-0">
<input class="form-check-input" type="checkbox" role="switch" checked
id="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
<label class="form-check-label small"
for="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
Kirim <strong>Bukti Pengembalian</strong> ke WhatsApp siswa
<div class="form-check form-switch mb-0 mt-3">
<input class="form-check-input" type="checkbox" role="switch" checked id="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
<label class="form-check-label small" for="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
Kirim <strong>Bukti Pengembalian</strong> ke WhatsApp
</label>
</div>
<div class="form-check form-switch mb-0">
<input class="form-check-input email-toggle" type="checkbox"
role="switch" checked
id="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
<label class="form-check-label small"
for="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
Kirim Bukti Pengembalian</strong> ke Email
<input class="form-check-input email-toggle" type="checkbox" role="switch" checked id="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
<label class="form-check-label small" for="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
Kirim <strong>Bukti Pengembalian</strong> ke Email
</label>
</div>
</div>
<div class="modal-footer p-3 bg-light">
<button type="button" class="btn btn-outline-secondary"
data-bs-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary btn-konfirmasi-kembali"
data-nama-peminjam="{{ $transaksi['peminjam'] }}"
data-nomor-hp="{{ $transaksi['nomor_hp'] }}">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary btn-konfirmasi-kembali" data-nama-peminjam="{{ $transaksi['peminjam'] }}">
Konfirmasi & Selesai
</button>
</div>
@ -211,9 +203,7 @@ class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opaci
</div>
</div>
@empty
<tr>
<td colspan="8" class="text-center py-5">Tidak ada data.</td>
</tr>
<tr><td colspan="8" class="text-center py-5">Tidak ada data.</td></tr>
@endforelse
</tbody>
</table>
@ -223,69 +213,49 @@ class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opaci
@push('scripts')
<script>
$(document).ready(function() {
$('#peminjamanTable').DataTable({
pageLength: 10,
order: [
[0, 'asc']
],
});
$('#peminjamanTable').DataTable({ pageLength: 10, order: [[0, 'asc']] });
});
document.addEventListener('DOMContentLoaded', function() {
function formatRupiah(angka) {
return new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
minimumFractionDigits: 0
}).format(angka).replace(/\s/g, '');
return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(angka).replace(/\s/g, '');
}
function hitungTotalDenda(modal) {
const dendaKeterlambatanEl = modal.querySelector('.denda-keterlambatan-display');
const dendaRusakInputs = modal.querySelectorAll('.denda-rusak-input');
const totalDendaEl = modal.querySelector('.total-denda-display');
if(!dendaKeterlambatanEl || !totalDendaEl) return;
let dendaKeterlambatan = parseInt(dendaKeterlambatanEl.dataset.dendaKeterlambatan) || 0;
let totalDendaRusak = 0;
dendaRusakInputs.forEach(input => {
modal.querySelectorAll('.denda-rusak-input').forEach(input => {
if (!input.closest('.denda-rusak-input-wrapper').classList.contains('d-none')) {
totalDendaRusak += parseInt(input.value) || 0;
}
});
const totalDenda = dendaKeterlambatan + totalDendaRusak;
totalDendaEl.textContent = formatRupiah(totalDenda);
totalDendaEl.textContent = formatRupiah(dendaKeterlambatan + totalDendaRusak);
}
// Logic Radio Button Kondisi Buku
const radioKondisi = document.querySelectorAll('.radio-kondisi');
radioKondisi.forEach(radio => {
document.querySelectorAll('.radio-kondisi').forEach(radio => {
radio.addEventListener('change', function() {
const cardBody = this.closest('.card-body');
const dendaRusakWrapper = cardBody.querySelector('.denda-rusak-input-wrapper');
const dendaRusakInput = cardBody.querySelector('.denda-rusak-input');
const modal = this.closest('.modal');
if (this.value === 'rusak') {
if(this.value === 'rusak') {
dendaRusakWrapper.classList.remove('d-none');
} else {
dendaRusakWrapper.classList.add('d-none');
dendaRusakInput.value = 0;
}
hitungTotalDenda(modal);
hitungTotalDenda(this.closest('.modal'));
});
});
// Logic Input Denda Rusak
const dendaRusakInputs = document.querySelectorAll('.denda-rusak-input');
dendaRusakInputs.forEach(input => {
input.addEventListener('input', function() {
const modal = this.closest('.modal');
hitungTotalDenda(modal);
});
document.querySelectorAll('.denda-rusak-input').forEach(input => {
input.addEventListener('input', function() { hitungTotalDenda(this.closest('.modal')); });
});
});
@ -296,54 +266,29 @@ function hitungTotalDenda(modal) {
const isEmailChecked = modalEl.find('.email-toggle').is(':checked');
modalInstance.hide();
modernSwal.fire({
title: 'Selesaikan Transaksi?',
text: `Buku dari ${nama} akan ditandai sudah kembali.`,
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Ya, Selesaikan',
cancelButtonText: 'Batal'
title: 'Selesaikan Transaksi?', text: `Buku dari ${nama} akan ditandai sudah kembali.`, icon: 'question',
showCancelButton: true, confirmButtonText: 'Ya, Selesaikan', cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
// Loading Simpan DB
modernSwal.fire({
title: 'Menyimpan Data...',
timer: 800,
timerProgressBar: true,
didOpen: () => Swal.showLoading()
title: 'Menyimpan Data...', timer: 800, timerProgressBar: true, didOpen: () => Swal.showLoading()
}).then(() => {
// Loading Kirim Email (Jika dicentang)
if (isEmailChecked) {
const dummyEmail = nama.replace(/\s+/g, '.').toLowerCase() +
'@sekolah.sch.id';
const dummyEmail = nama.replace(/\s+/g, '.').toLowerCase() + '@sekolah.sch.id';
modernSwal.fire({
title: 'Mengirim Email...',
html: `Mengirim nota ke: <b>${dummyEmail}</b>`,
timer: 2000,
timerProgressBar: true,
didOpen: () => Swal.showLoading()
}).then(() => {
finishTransaction(true);
});
} else {
finishTransaction(false);
}
title: 'Mengirim Email...', html: `Mengirim nota ke: <b>${dummyEmail}</b>`, timer: 2000, timerProgressBar: true, didOpen: () => Swal.showLoading()
}).then(() => { finishTransaction(true); });
} else { finishTransaction(false); }
});
} else {
modalInstance.show();
}
} else { modalInstance.show(); }
});
function finishTransaction(withEmail) {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: withEmail ? 'Buku kembali & Email terkirim.' : 'Buku berhasil dikembalikan.'
});
Toast.fire({ icon: 'success', title: 'Berhasil', text: withEmail ? 'Buku kembali & Email terkirim.' : 'Buku berhasil dikembalikan.' });
setTimeout(() => location.reload(), 1500);
}
});
</script>
@endpush
</x-app-layout>
</x-app-layout>

View File

@ -11,53 +11,50 @@
<div class="col-md-10">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<form action="{{ route('admin.pengguna.store') }}" method="POST">
<form action="{{ route('admin.pengguna.store') }}" method="POST" id="formPengguna">
@csrf
<div class="mb-3">
<label for="role" class="form-label">Role <span class="text-danger">*</span></label>
<select class="form-select @error('role') is-invalid @enderror" id="role"
name="role" required onchange="toggleFields()">
<select class="form-select @error('role') is-invalid @enderror" id="role" name="role"
required onchange="toggleFields()">
<option value="" selected disabled>Pilih role terlebih dahulu...</option>
<option value="siswa" {{ old('role') == 'siswa' ? 'selected' : '' }}>Siswa</option>
<option value="guru" {{ old('role') == 'guru' ? 'selected' : '' }}>Guru</option>
<option value="penjaga perpus" {{ old('role') == 'penjaga perpus' ? 'selected' : '' }}>
<option value="siswa" {{ old('role')=='siswa' ? 'selected' : '' }}>Siswa</option>
<option value="guru" {{ old('role')=='guru' ? 'selected' : '' }}>Guru</option>
<option value="penjaga perpus" {{ old('role')=='penjaga perpus' ? 'selected' : '' }}>
Penjaga Perpustakaan</option>
</select>
@error('role')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
{{-- Bagian Form Dinamis --}}
<div id="dynamic-form" class="d-none">
{{-- Nama Lengkap --}}
<div class="mb-3">
<label for="nama_lengkap" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required>
</div>
{{-- Identitas Unik (NISN/NIP) --}}
<div class="mb-3">
<label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP</label>
<input type="number" class="form-control @error('nomor_induk') is-invalid @enderror"
id="nomor_induk" name="nomor_induk" value="{{ old('nomor_induk') }}"
placeholder="Masukkan Nomor Induk">
@error('nomor_induk')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
{{-- Kontak (Email & HP) --}}
<div class="row">
<div class="col-md-6 mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control @error('email') is-invalid @enderror"
id="email" name="email" value="{{ old('email') }}" required>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6 mb-3">
@ -67,7 +64,6 @@
</div>
</div>
{{-- Field Khusus Siswa (Kelas & Golongan) --}}
<div class="row" id="field_siswa_only" style="display: none;">
<div class="col-md-6 mb-3">
<label for="kelas" class="form-label">Kelas</label>
@ -83,12 +79,9 @@
<hr>
{{-- Keamanan (Password) --}}
<div class="row">
<div class="col-md-6 mb-3">
<label for="password" class="form-label">
Password
</label>
<label for="password" class="form-label">Password</label>
<div class="input-group has-validation">
<input type="password"
class="form-control @error('password') is-invalid @enderror" id="password"
@ -98,7 +91,7 @@ class="form-control @error('password') is-invalid @enderror" id="password"
<i class="bi bi-eye" id="icon-password"></i>
</button>
@error('password')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
@ -126,21 +119,17 @@ class="form-control @error('password') is-invalid @enderror" id="password"
</div>
</div>
@push('scripts')
<script>
function toggleFields() {
const role = document.getElementById('role').value;
const dynamicForm = document.getElementById('dynamic-form');
const labelInduk = document.getElementById('label_nomor_induk');
const inputInduk = document.getElementById('nomor_induk');
const fieldSiswaOnly = document.getElementById('field_siswa_only');
// Tampilkan form
if (role) {
dynamicForm.classList.remove('d-none');
}
if (role) dynamicForm.classList.remove('d-none');
// Atur Label & Field berdasarkan Role
if (role === 'siswa') {
labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
inputInduk.placeholder = 'Masukkan NISN Siswa';
@ -156,9 +145,7 @@ function toggleFields() {
}
}
document.addEventListener('DOMContentLoaded', function() {
toggleFields();
});
document.addEventListener('DOMContentLoaded', toggleFields);
document.querySelectorAll('.toggle-password').forEach(function(button) {
button.addEventListener('click', function() {
@ -167,15 +154,24 @@ function toggleFields() {
const icon = document.getElementById('icon-' + targetId);
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('bi-eye');
icon.classList.add('bi-eye-slash');
input.type = 'text'; icon.classList.replace('bi-eye', 'bi-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('bi-eye-slash');
icon.classList.add('bi-eye');
input.type = 'password'; icon.classList.replace('bi-eye-slash', 'bi-eye');
}
});
});
document.getElementById('formPengguna').addEventListener('submit', function() {
modernSwal.fire({
title: 'Menyimpan Data...',
allowOutsideClick: false,
didOpen: () => Swal.showLoading()
});
});
@if(session('success'))
Toast.fire({ icon: 'success', title: 'Berhasil', text: '{{ session("success") }}' });
@endif
</script>
</x-app-layout>
@endpush
</x-app-layout>

View File

@ -11,9 +11,9 @@
<div class="col-md-10">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST">
<form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST" id="formEditPengguna">
@csrf
@method('PUT')
@method('PATCH')
<div class="mb-3">
<label for="role" class="form-label">Role <span class="text-danger">*</span></label>
@ -25,28 +25,21 @@
@error('role') <div class="invalid-feedback">{{ $message }}</div> @enderror
</div>
{{-- Bagian Form Dinamis --}}
<div id="dynamic-form">
{{-- Nama Lengkap --}}
<div class="mb-3">
<label for="nama_lengkap" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $pengguna->name) }}" required>
</div>
{{-- Identitas Unik (NISN/NIP) --}}
<div class="mb-3">
@php
$oldNomorInduk = old('nomor_induk', $pengguna->role == 'siswa' ? $pengguna->nisn : $pengguna->nip);
@endphp
@php $oldNomorInduk = old('nomor_induk', $pengguna->role == 'siswa' ? $pengguna->nisn : $pengguna->nip); @endphp
<label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP</label>
<input type="number" class="form-control @error('nomor_induk') is-invalid @enderror"
id="nomor_induk" name="nomor_induk" value="{{ $oldNomorInduk }}" placeholder="Masukkan Nomor Induk">
@error('nomor_induk') <div class="invalid-feedback fw-bold">{{ $message }}</div> @enderror
</div>
{{-- Kontak (Email & HP) --}}
<div class="row">
<div class="col-md-6 mb-3">
<label for="email" class="form-label">Email</label>
@ -56,25 +49,23 @@
</div>
<div class="col-md-6 mb-3">
<label for="no_hp" class="form-label">No. Handphone</label>
<input type="text" class="form-control" id="no_hp" name="no_hp" value="{{ old('no_hp', $pengguna->no_hp) }}" placeholder="Contoh: 08123456789">
<input type="text" class="form-control" id="no_hp" name="no_hp" value="{{ old('no_hp', $pengguna->no_hp) }}">
</div>
</div>
{{-- Field Khusus Siswa (Kelas & Golongan) --}}
<div class="row" id="field_siswa_only" style="display: none;">
<div class="col-md-6 mb-3">
<label for="kelas" class="form-label">Kelas</label>
<input type="text" class="form-control" id="kelas" name="kelas" value="{{ old('kelas', $pengguna->kelas) }}" placeholder="Contoh: XII RPL 1">
<input type="text" class="form-control" id="kelas" name="kelas" value="{{ old('kelas', $pengguna->kelas) }}">
</div>
<div class="col-md-6 mb-3">
<label for="golongan" class="form-label">Golongan</label>
<input type="text" class="form-control" id="golongan" name="golongan" value="{{ old('golongan', $pengguna->golongan) }}" placeholder="Contoh: A/B">
<input type="text" class="form-control" id="golongan" name="golongan" value="{{ old('golongan', $pengguna->golongan) }}">
</div>
</div>
<hr>
{{-- Keamanan (Password) --}}
<div class="row">
<div class="col-md-6 mb-3">
<label for="password" class="form-label">Password Baru <span class="small text-muted">(opsional)</span></label>
@ -97,6 +88,7 @@
</div>
</div>
@push('scripts')
<script>
function toggleFields() {
const role = document.getElementById('role').value;
@ -104,7 +96,6 @@ function toggleFields() {
const inputInduk = document.getElementById('nomor_induk');
const fieldSiswaOnly = document.getElementById('field_siswa_only');
// Atur Label & Field berdasarkan Role
if (role === 'siswa') {
labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
inputInduk.placeholder = 'Masukkan NISN Siswa';
@ -119,9 +110,19 @@ function toggleFields() {
fieldSiswaOnly.style.display = 'none';
}
}
document.addEventListener('DOMContentLoaded', toggleFields);
document.addEventListener('DOMContentLoaded', function() {
toggleFields();
document.getElementById('formEditPengguna').addEventListener('submit', function() {
modernSwal.fire({
title: 'Menyimpan Perubahan...',
allowOutsideClick: false,
didOpen: () => Swal.showLoading()
});
});
@if(session('success'))
Toast.fire({ icon: 'success', title: 'Berhasil', text: '{{ session("success") }}' });
@endif
</script>
@endpush
</x-app-layout>

View File

@ -1,17 +1,29 @@
<x-app-layout>
@section('page-title', content: 'Manajemen Pengguna')
@section('page-title', 'Manajemen Pengguna')
<div class="container-fluid p-0">
<div class="d-flex justify-content-between align-items-center mb-3">
<h1 class="h3 text-gray-800">{{ $pageTitle }}</h1>
<h1 class="h3 text-gray-800">{{ $pageTitle ?? 'Manajemen Pengguna' }}</h1>
</div>
<div class="card shadow mb-5">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<div class="card-header py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
<h6 class="m-0 font-weight-bold text-primary">Daftar Pengguna Aktif</h6>
<a href="{{ route('admin.pengguna.create') }}" class="btn btn-primary">
<i class="bi bi-plus-circle-fill me-2"></i>Tambah Pengguna
</a>
<div class="d-flex align-items-center">
<form action="{{ route('admin.pengguna.index') }}" method="GET" class="me-2 mb-0">
<select name="role" class="form-select form-select-sm" onchange="this.form.submit()">
<option value="">Semua Kategori</option>
<option value="siswa" {{ request('role') == 'siswa' ? 'selected' : '' }}>Siswa</option>
<option value="guru" {{ request('role') == 'guru' ? 'selected' : '' }}>Guru</option>
<option value="penjaga perpus" {{ request('role') == 'penjaga perpus' ? 'selected' : '' }}>Petugas</option>
</select>
</form>
<a href="{{ route('admin.pengguna.create') }}" class="btn btn-sm btn-primary">
<i class="bi bi-plus-circle-fill me-1"></i>Tambah Pengguna
</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
@ -56,15 +68,13 @@
@endif
</td>
<td class="text-center">
<a href="{{ route('admin.pengguna.edit', $user->id) }}"
class="btn btn-sm btn-warning">
<a href="{{ route('admin.pengguna.edit', $user->id) }}" class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i> Edit
</a>
<form action="{{ route('admin.pengguna.destroy', $user->id) }}" method="POST"
class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
<form action="{{ route('admin.pengguna.destroy', $user->id) }}" method="POST" class="d-inline form-delete-user" data-nama="{{ $user->name }}">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
<button type="button" class="btn btn-sm btn-danger btn-hapus"><i class="bi bi-trash"></i></button>
</form>
</td>
</tr>
@ -75,8 +85,6 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
@endforelse
</tbody>
</table>
{{-- Pagination --}}
<div class="mt-3">
{{ $users->links() }}
</div>
@ -89,12 +97,9 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
{{-- BAGIAN DATA INDUK (WHITELIST) --}}
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h4 class="fw-bold text-success mb-1">
<i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)
</h4>
<h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)</h4>
<p class="text-muted mb-0">Daftar NIP/NISN yang <b>diizinkan</b> untuk mendaftar.</p>
</div>
<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
</button>
@ -131,28 +136,19 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
</td>
<td class="text-center">
@php
$isRegistered = \App\Models\User::where('nisn', $item->nomor_induk)
->orWhere('nip', $item->nomor_induk)
->exists();
$isRegistered = \App\Models\User::where('nisn', $item->nomor_induk)->orWhere('nip', $item->nomor_induk)->exists();
@endphp
@if ($isRegistered)
<span class="badge bg-success text-white">
<i class="bi bi-check-circle-fill me-1"></i>Terdaftar
</span>
<span class="badge bg-success text-white"><i class="bi bi-check-circle-fill me-1"></i>Terdaftar</span>
@else
<span class="badge bg-warning text-dark">
<i class="bi bi-hourglass-split me-1"></i>Belum Daftar
</span>
<span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i>Belum Daftar</span>
@endif
</td>
<td class="text-end">
<form action="{{ route('admin.master-induk.destroy', $item->id) }}"
method="POST"
onsubmit="return confirm('Hapus data ini? User dengan NIP/NISN ini tidak akan bisa daftar lagi.');">
<form action="{{ route('admin.master-induk.destroy', $item->id) }}" method="POST" class="d-inline form-delete-whitelist" data-induk="{{ $item->nomor_induk }}">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-outline-danger">
<button type="button" class="btn btn-sm btn-outline-danger btn-hapus-whitelist">
<i class="bi bi-trash"></i> Hapus
</button>
</form>
@ -160,9 +156,7 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
</tr>
@empty
<tr>
<td colspan="6" class="text-center py-4 text-muted">
Belum ada data whitelist. Silakan tambah data.
</td>
<td colspan="6" class="text-center py-4 text-muted">Belum ada data whitelist. Silakan tambah data.</td>
</tr>
@endforelse
</tbody>
@ -170,7 +164,6 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
</div>
</div>
</div>
</div>
{{-- MODAL TAMBAH DATA INDUK --}}
@ -181,14 +174,14 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
<h5 class="modal-title fw-bold">Tambah Whitelist (NIP/NISN)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<form action="{{ route('admin.master-induk.store') }}" method="POST">
{{-- FORM TAMBAH WHITELIST --}}
<form action="{{ route('admin.master-induk.store') }}" method="POST" id="formWhitelist">
@csrf
<div class="modal-body">
<div class="alert alert-info small mb-3">
<i class="bi bi-info-circle-fill me-1"></i>
Masukkan data siswa/guru yang valid agar mereka bisa mendaftar.
</div>
<div class="mb-3">
<label class="form-label">Role</label>
<select name="role" class="form-select" required>
@ -197,17 +190,13 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
<option value="penjaga perpus">Petugas Perpustakaan</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">NIP / NISN</label>
<input type="number" name="nomor_induk" class="form-control"
placeholder="Contoh: 1234567890" required>
<input type="number" name="nomor_induk" class="form-control" placeholder="Contoh: 1234567890" required>
</div>
<div class="mb-3">
<label class="form-label">Nama Pemilik</label>
<input type="text" name="nama_pemilik" class="form-control"
placeholder="Nama Siswa/Guru..." required>
<input type="text" name="nama_pemilik" class="form-control" placeholder="Nama Siswa/Guru..." required>
</div>
</div>
<div class="modal-footer">
@ -218,4 +207,56 @@ class="d-inline" onsubmit="return confirm('Yakin hapus user ini?')">
</div>
</div>
</div>
@push('scripts')
<script>
$(document).ready(function() {
$('.btn-hapus').on('click', function(e) {
e.preventDefault();
let form = $(this).closest('form');
let nama = form.data('nama');
modernSwal.fire({
title: 'Hapus Pengguna?',
text: `Apakah Anda yakin ingin menghapus akun milik ${nama}?`,
icon: 'warning',
showCancelButton: true, confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal', confirmButtonColor: '#dc3545'
}).then((result) => {
if (result.isConfirmed) {
modernSwal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
form.submit();
}
});
});
$('.btn-hapus-whitelist').on('click', function(e) {
e.preventDefault();
let form = $(this).closest('form');
let induk = form.data('induk');
modernSwal.fire({
title: 'Hapus Data Induk?',
text: `Data dengan nomor ${induk} tidak akan bisa mendaftar lagi.`,
icon: 'warning',
showCancelButton: true, confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal', confirmButtonColor: '#dc3545'
}).then((result) => {
if (result.isConfirmed) {
modernSwal.fire({ title: 'Menghapus...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
form.submit();
}
});
});
$('#formWhitelist').on('submit', function() {
modernSwal.fire({ title: 'Menyimpan...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
});
});
@if(session('success'))
document.addEventListener('DOMContentLoaded', function() {
Toast.fire({ icon: 'success', title: 'Berhasil', text: '{{ session("success") }}' });
});
@endif
</script>
@endpush
</x-app-layout>

View File

@ -1,7 +1,7 @@
<x-app-layout>
@section('page-title', $pageTitle)
<div class="d-flex align-items-center mb-4">
<a href="{{ route('admin.pengguna.index') }}" class="btn btn-outline-secondary me-3">
<a href="{{ route('admin.pengumuman.index') }}" class="btn btn-outline-secondary me-3">
<i class="bi bi-arrow-left"></i>
</a>
<h3 class="my-0 fw-bold">Formulir Tambah Pengumuman</h3>
@ -12,17 +12,16 @@
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<div class="card-body">
<form action="#" method="POST">
{{-- Form ini tidak akan berfungsi karena tidak ada backend --}}
<form action="#" method="POST" id="formTambahPengumuman">
<div class="mb-3">
<label for="judul" class="form-label">Judul Pengumuman</label>
<input type="text" class="form-control" id="judul"
placeholder="Masukkan judul pengumuman">
placeholder="Masukkan judul pengumuman" required>
</div>
<div class="mb-3">
<label for="tipe" class="form-label">Tipe Pengumuman</label>
<select class="form-select" id="tipe">
<option selected>Pilih tipe...</option>
<select class="form-select" id="tipe" required>
<option value="" selected disabled>Pilih tipe...</option>
<option value="info">Info</option>
<option value="success">Success</option>
<option value="warning">Warning</option>
@ -32,7 +31,7 @@
</div>
<div class="mb-3">
<label for="content" class="form-label">Isi Pengumuman</label>
<textarea class="form-control" id="content" rows="5" placeholder="Tulis isi pengumuman di sini..."></textarea>
<textarea class="form-control" id="content" rows="5" placeholder="Tulis isi pengumuman di sini..." required></textarea>
</div>
<hr>
<div class="d-flex justify-content-end">
@ -44,4 +43,28 @@
</div>
</div>
</div>
</x-app-layout>
@push('scripts')
<script>
document.getElementById('formTambahPengumuman').addEventListener('submit', function(e) {
e.preventDefault();
modernSwal.fire({
title: 'Menyimpan...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Pengumuman baru berhasil ditambahkan.'
});
setTimeout(() => {
window.location.href = "{{ route('admin.pengumuman.index') }}";
}, 1500);
});
});
</script>
@endpush
</x-app-layout>

View File

@ -1,7 +1,7 @@
<x-app-layout>
@section('page-title', $pageTitle)
<div class="d-flex align-items-center mb-4">
<a href="{{ route('admin.pengguna.index') }}" class="btn btn-outline-secondary me-3">
<a href="{{ route('admin.pengumuman.index') }}" class="btn btn-outline-secondary me-3">
<i class="bi bi-arrow-left"></i>
</a>
<h3 class="my-0 fw-bold">Formulir Edit Pengumuman</h3>
@ -12,32 +12,26 @@
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<div class="card-body">
<form action="#" method="POST">
{{-- Form ini tidak akan berfungsi karena tidak ada backend --}}
<form action="#" method="POST" id="formEditPengumuman">
<div class="mb-3">
<label for="judul" class="form-label">Judul Pengumuman</label>
<input type="text" class="form-control" id="judul"
value="{{ $pengumuman['title'] }}">
value="{{ $pengumuman['title'] }}" required>
</div>
<div class="mb-3">
<label for="tipe" class="form-label">Tipe Pengumuman</label>
<select class="form-select" id="tipe">
<option>Pilih tipe...</option>
<option value="info" @if ($pengumuman['type'] == 'info') selected @endif>Info
</option>
<option value="success" @if ($pengumuman['type'] == 'success') selected @endif>Success
</option>
<option value="warning" @if ($pengumuman['type'] == 'warning') selected @endif>Warning
</option>
<option value="danger" @if ($pengumuman['type'] == 'danger') selected @endif>Danger
</option>
<option value="secondary" @if ($pengumuman['type'] == 'secondary') selected @endif>
Secondary</option>
<select class="form-select" id="tipe" required>
<option value="" disabled>Pilih tipe...</option>
<option value="info" @if ($pengumuman['type'] == 'info') selected @endif>Info</option>
<option value="success" @if ($pengumuman['type'] == 'success') selected @endif>Success</option>
<option value="warning" @if ($pengumuman['type'] == 'warning') selected @endif>Warning</option>
<option value="danger" @if ($pengumuman['type'] == 'danger') selected @endif>Danger</option>
<option value="secondary" @if ($pengumuman['type'] == 'secondary') selected @endif>Secondary</option>
</select>
</div>
<div class="mb-3">
<label for="content" class="form-label">Isi Pengumuman</label>
<textarea class="form-control" id="content" rows="5">{{ $pengumuman['content'] }}</textarea>
<textarea class="form-control" id="content" rows="5" required>{{ $pengumuman['content'] }}</textarea>
</div>
<hr>
<div class="d-flex justify-content-end">
@ -49,4 +43,29 @@
</div>
</div>
</div>
</x-app-layout>
@push('scripts')
<script>
document.getElementById('formEditPengumuman').addEventListener('submit', function(e) {
e.preventDefault();
modernSwal.fire({
title: 'Menyimpan Perubahan...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Pengumuman berhasil diperbarui.'
});
// Redirect setelah 1.5 detik
setTimeout(() => {
window.location.href = "{{ route('admin.pengumuman.index') }}";
}, 1500);
});
});
</script>
@endpush
</x-app-layout>

View File

@ -17,13 +17,13 @@
<th scope="col">Tipe</th>
<th scope="col">Judul</th>
<th scope="col">Isi</th>
<th scope="col">Aksi</th>
<th scope="col" class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
@forelse ($semuaPengumuman as $item)
<tr>
<td>{{ $loop->iteration }}</td>
<td class="row-number">{{ $loop->iteration }}</td>
<td>
<span class="badge bg-{{ $item['type'] }}-subtle text-{{ $item['type'] }}-emphasis">{{ Str::title($item['type']) }}</span>
</td>
@ -31,19 +31,19 @@
<td class="truncate-text" style="max-width: 300px;">
{{ $item['content'] }}
</td>
<td>
<td class="text-center">
<a href="{{ route('admin.pengumuman.edit', $item['id']) }}" class="btn btn-sm btn-outline-secondary">
<i class="bi bi-pencil-fill"></i>
</a>
<button class="btn btn-sm btn-outline-danger" disabled>
<button class="btn btn-sm btn-outline-danger btn-hapus" data-judul="{{ $item['title'] }}">
<i class="bi bi-trash3-fill"></i>
</button>
</td>
</tr>
@empty
<tr>
<tr class="empty-row">
<td colspan="5" class="text-center py-4">
<p class="text-muted">Belum ada pengumuman yang dibuat.</p>
<p class="text-muted mb-0">Belum ada pengumuman yang dibuat.</p>
</td>
</tr>
@endforelse
@ -52,4 +52,60 @@
</div>
</div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
$(document).on('click', '.btn-hapus', function() {
const judul = $(this).data('judul');
const row = $(this).closest('tr');
modernSwal.fire({
title: 'Hapus Pengumuman?',
text: `Apakah Anda yakin ingin menghapus pengumuman "${judul}"?`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal',
confirmButtonColor: '#dc3545',
cancelButtonColor: '#6c757d'
}).then((result) => {
if (result.isConfirmed) {
modernSwal.fire({
title: 'Menghapus...',
timer: 800,
didOpen: () => Swal.showLoading()
}).then(() => {
Toast.fire({
icon: 'success',
title: 'Berhasil',
text: 'Pengumuman telah dihapus.'
});
row.fadeOut('slow', function() {
$(this).remove();
let count = 0;
$('tbody tr').not('.empty-row').each(function(index) {
$(this).find('.row-number').text(index + 1);
count++;
});
if(count === 0) {
$('tbody').append(`
<tr class="empty-row">
<td colspan="5" class="text-center py-4">
<p class="text-muted mb-0">Belum ada pengumuman yang dibuat.</p>
</td>
</tr>
`);
}
});
});
}
});
});
});
</script>
@endpush
</x-app-layout>

View File

@ -17,7 +17,7 @@
@if ($role == 'siswa')
Masukan NISN dan kata sandi Anda.
@else
Masukan NIP dan kata sandi Anda.
Masukan NIP/NIK dan kata sandi Anda.
@endif
</p>
</div>
@ -31,7 +31,7 @@
</div>
@else
<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 />
<x-input-error :messages="$errors->get('nip')" class="mt-2" />
</div>
@ -52,7 +52,7 @@
</div>
{{-- Link href untuk ke Register --}}
<p class="mt-4 text-center text-muted small">
{{-- <p class="mt-4 text-center text-muted small">
@if ($role == 'siswa')
Belum punya akun?
<a href="{{ route('register', ['role' => 'siswa']) }}" class="fw-semibold text-decoration-none">Daftar sebagai Siswa</a>
@ -60,7 +60,7 @@
Belum punya akun?
<a href="{{ route('register', ['role' => 'guru']) }}" class="fw-semibold text-decoration-none">Daftar sebagai Guru</a>
@endif
</p>
</p> --}}
<p class="mt-3 text-center text-muted small">
Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.

View File

@ -14,33 +14,53 @@
<h1 class="h2 fw-semibold mb-5 text-center">Form Peminjaman Offline</h1>
{{-- Informasi Peminjam --}}
<div class="mb-5">
<div class="card border-0 shadow-sm">
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
<h5 class="fw-bold m-0">Informasi Peminjam</h5>
<a href="{{ route('profile.edit') }}" class="btn btn-sm btn-outline-secondary ">Edit
Profil</a>
<div class="card-body p-4">
<div class="row g-3">
{{-- Nama Lengkap (Muncul untuk semua role) --}}
<div class="col-md-6">
<label class="form-label text-muted small">Nama Lengkap</label>
<p class="fw-semibold">{{ $user['nama_lengkap'] ?? $user->name ?? '-' }}</p>
</div>
<div class="card-body p-4">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label text-muted small">Nama Lengkap</label>
<p class="fw-semibold">{{ $user['nama_lengkap'] }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Nomor Handphone</label>
<p class="fw-semibold">{{ $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'] }}</p>
</div>
<div class="col-md-6">
<label class="form-label text-muted small">Golongan</label>
<p class="fw-semibold">{{ $user['golongan'] }}</p>
</div>
</div>
{{-- KONDISI UNTUK GURU --}}
@if(isset($user['role']) && strtolower($user['role']) == 'guru' || isset($user->role) &&
strtolower($user->role) == 'guru')
<div class="col-md-6">
<label class="form-label text-muted small">NIP/NIK</label>
<p class="fw-semibold">{{ $user['nip'] ?? $user->nip ?? '-' }}</p>
</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 --}}
@else
<div class="col-md-6">
<label class="form-label text-muted small">NISN</label>
<p class="fw-semibold">{{ $user['nisn'] ?? $user->nisn ?? '-' }}</p>
</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>
@ -54,7 +74,7 @@
<div class="mb-5">
<div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-3">
<h5 class="fw-bold m-0">Buku yang Dipinjam</h5>
<button type="button" class="btn btn-sm btn-primary " data-bs-toggle="modal"
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
data-bs-target="#pilihBukuModal" id="btnTambahBuku">
<i class="bi bi-plus-circle me-1"></i>Tambah Buku
</button>
@ -158,56 +178,55 @@ class="rounded me-3 form-book-cover">
</div>
</div>
<!-- Daftar Buku -->
<div id="daftarBukuModal" class="row g-3">
@foreach ($semuaBuku as $bukuItem)
@if ($bukuItem['status'] == 'Tersedia' || $bukuItem['id'] == $buku['id'])
<div class="col-12 book-option" data-book-id="{{ $bukuItem['id'] }}"
data-book-title="{{ strtolower($bukuItem['judul']) }}"
data-book-author="{{ strtolower($bukuItem['penulis']) }}">
@if ($bukuItem['status'] == 'Tersedia' || $bukuItem['id'] == $buku['id'])
<div class="col-12 book-option" data-book-id="{{ $bukuItem['id'] }}"
data-book-title="{{ strtolower($bukuItem['judul']) }}"
data-book-author="{{ strtolower($bukuItem['penulis']) }}">
<div class="card book-card h-100 border-0 shadow-sm hover-shadow transition"
onclick="toggleBookSelection({{ $bukuItem['id'] }})">
<div class="card book-card h-100 border-0 shadow-sm hover-shadow transition"
onclick="toggleBookSelection({{ $bukuItem['id'] }})">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<div class="card-body p-3">
<div class="d-flex align-items-start">
<img src="{{ asset($bukuItem['cover']) }}" alt="Cover"
class="rounded me-3 form-book-cover"
style="width: 60px; height: 80px; object-fit: cover;">
<img src="{{ asset($bukuItem['cover']) }}" alt="Cover"
class="rounded me-3 form-book-cover"
style="width: 60px; height: 80px; object-fit: cover;">
<!-- Detail Buku -->
<div class="flex-grow-1">
<h6 class="fw-bold mb-1">{{ $bukuItem['judul'] }}</h6>
<p class="text-muted small mb-1">{{ $bukuItem['penulis'] }}</p>
<div class="d-flex align-items-center flex-wrap gap-2">
<span class="badge bg-info">{{ $bukuItem['kategori'] }}</span>
<span class="badge bg-success"><i
class="bi bi-check-circle me-1"></i>Tersedia</span>
@if ($bukuItem['id'] == $buku['id'])
<span class="badge bg-primary"><i
class="bi bi-star-fill me-1"></i>Buku Utama</span>
@endif
</div>
</div>
<div class="form-check ms-2">
<input class="form-check-input book-checkbox" type="checkbox"
value="{{ $bukuItem['id'] }}" id="book{{ $bukuItem['id'] }}"
@if ($bukuItem['id'] == $buku['id']) checked disabled @endif
onclick="event.stopPropagation()">
</div>
<div class="flex-grow-1">
<h6 class="fw-bold mb-1">{{ $bukuItem['judul'] }}</h6>
<p class="text-muted small mb-1">{{ $bukuItem['penulis'] }}</p>
<div class="d-flex align-items-center flex-wrap gap-2">
<span class="badge bg-info">{{ $bukuItem['kategori'] }}</span>
<span class="badge bg-success"><i
class="bi bi-check-circle me-1"></i>Tersedia</span>
@if ($bukuItem['id'] == $buku['id'])
<span class="badge bg-primary"><i class="bi bi-star-fill me-1"></i>Buku
Utama</span>
@endif
</div>
</div>
{{-- PERBAIKAN: Checkbox tag dirapikan agar @if nya satu baris --}}
<div class="form-check ms-2">
<input class="form-check-input book-checkbox" type="checkbox"
value="{{ $bukuItem['id'] }}" id="book{{ $bukuItem['id'] }}"
@if($bukuItem['id']==$buku['id']) checked disabled @endif
onclick="event.stopPropagation()">
</div>
</div>
</div>
@endif
</div>
</div>
@endif
@endforeach
</div>
</div>
<!-- Counter Buku Terpilih -->
<div class="p-3 bg-light">
<div class="d-flex justify-content-between align-items-center">
<span class="fw-semibold">
@ -220,13 +239,11 @@ class="bi bi-star-fill me-1"></i>Buku Utama</span>
</div>
</div>
<!-- Footer -->
<div class="modal-footer bg-light">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
<i class="bi bi-x-circle me-1"></i> Batal
</button>
<button type="button" class="btn btn-primary" id="konfirmasiBuku"
onclick="konfirmasiPilihanBuku()">
<button type="button" class="btn btn-primary" id="konfirmasiBuku" onclick="konfirmasiPilihanBuku()">
<i class="bi bi-check2-circle me-1"></i> Konfirmasi Pilihan
</button>
</div>
@ -323,4 +340,4 @@ class="bi bi-star-fill me-1"></i>Buku Utama</span>
});
</script>
</x-app-layout>
</x-app-layout>

View File

@ -1,4 +1,4 @@
@section('page-title', 'Profile')
@section('page-title', 'Profil')
<x-app-layout>
<div class="d-flex align-items-center mb-4">
<a href="{{ route('profile.index') }}" class="btn btn-outline-secondary me-3">

View File

@ -3,244 +3,253 @@
<div class="row g-3 g-md-4 min-vh-100 pb-4">
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK PENJAGA PERPUSTAKAAN --}}
{{-- =================================================================== --}}
@if (Auth::user()->role == 'penjaga perpus')
<div class="row g-3 g-md-4 h-100">
{{-- Kolom Kiri: Info & Statistik Global --}}
<div class="col-lg-8 d-flex flex-column">
{{-- Info Petugas --}}
<div class="card border-0 mb-3 mb-md-4">
<div
class="card-body p-3 p-md-4 d-flex flex-column flex-sm-row align-items-center text-center text-sm-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
<div class="ms-sm-4">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span
class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
<div class="row g-3 g-md-4 h-100">
<div class="col-lg-8 d-flex flex-column">
<div class="card border-0 mb-3 mb-md-4">
<div
class="card-body p-3 p-md-4 d-flex flex-column flex-sm-row align-items-center text-center text-sm-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
<div class="ms-sm-4 mb-3 mb-sm-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{
Str::title($user->role) }}</span>
</div>
</div>
{{-- Statistik Perpustakaan --}}
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
{{-- Kolom Kanan: Pintasan & Aktivitas --}}
<div class="col-lg-4 d-flex flex-column">
{{-- Pintasan Manajemen --}}
<div class="card border-0 mb-3 mb-md-4 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<h5 class="fw-bold mb-4">Pintasan Manajemen</h5>
<div class="d-grid gap-3 flex-grow-1">
<a href="{{ route('admin.buku.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-book-fill me-3 fs-4"></i>
<span>Kelola Buku</span>
</a>
<a href="{{ route('admin.pengguna.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-people-fill me-3 fs-4"></i>
<span>Kelola Pengguna</span>
</a>
<a href="{{ route('admin.pengumuman.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-megaphone-fill me-3 fs-4"></i>
<span>Kelola Pengumuman</span>
</a>
</div>
</div>
</div>
{{-- Keamanan Akun --}}
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<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>
<div class="ms-sm-auto">
<a href="{{ route('profile.edit') }}"
class="btn btn-outline-secondary rounded-pill w-100 py-2">
<i class="bi bi-shield-lock me-2"></i>Ubah Password
</a>
</div>
</div>
</div>
</div>
@elseif (Auth::user()->role == 'guru')
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK GURU --}}
{{-- =================================================================== --}}
<div class="row g-3 g-md-4 h-100">
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
<div class="col-lg-8 d-flex flex-column">
{{-- Info Guru --}}
<div class="card border-0 mb-3 mb-md-4">
<div
class="card-body p-3 p-md-4 d-flex flex-column flex-md-row align-items-center text-center text-md-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=198754&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-md-0">
<div class="ms-md-4 mb-3 mb-md-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span
class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}"
class="btn btn-outline-primary rounded-pill w-100 w-md-auto ms-md-auto">
class="btn btn-outline-primary rounded-pill w-100 w-sm-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
</div>
{{-- Ringkasan Laporan Minat Baca --}}
<div class="card border-0 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<div
class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center mb-4 gap-2">
<h5 class="fw-bold mb-0">Ringkasan Laporan Minat Baca</h5>
<a href="{{ route('guru.laporan.index') }}"
class="btn btn-sm btn-outline-primary rounded-pill w-100 w-sm-auto">
Lihat Laporan Lengkap
</a>
</div>
<div class="row flex-grow-1">
<div class="col-md-6 mb-3 mb-md-0">
<h6 class="small text-muted mb-3 text-uppercase fw-semibold">Buku Terpopuler</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach ($laporan['buku_terpopuler'] as $buku)
<li
class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $buku['judul'] }}</span>
<span
class="badge bg-primary rounded-pill">{{ $buku['total_pembaca'] }}</span>
</li>
@endforeach
</ul>
</div>
<div class="col-md-6">
<h6 class="small text-muted mb-3 text-uppercase fw-semibold">Kategori Terpopuler
</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach ($laporan['kategori_populer'] as $kategori)
<li
class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $kategori['nama'] }}</span>
<span
class="badge bg-success rounded-pill">{{ $kategori['total_pembaca'] }}</span>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Guru --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', [
'bukuOffline' => $bukuOffline,
'bukuOnline' => $bukuOnline,
])
</div>
</div>
@else
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
{{-- =================================================================== --}}
<div class="row g-3 g-md-4 h-100">
{{-- Kolom Kiri: Info & Statistik Siswa --}}
<div class="col-lg-8 d-flex flex-column">
{{-- Info Siswa --}}
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4">
<div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-md-0">
<div class="ms-md-4 mb-3 mb-md-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span
class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}"
class="btn btn-outline-primary rounded-pill ms-md-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
<hr class="my-3 my-md-4">
<h5 class="fw-bold mb-3">Informasi Personal</h5>
<div class="row g-3">
<div class="col-sm-6">
<small class="text-muted d-block mb-1">NISN</small>
<p class="fw-semibold mb-0">{{ $user->nisn ?? 'N/A' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Email</small>
<p class="fw-semibold mb-0 text-break">{{ $user->email }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? 'N/A' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Kelas</small>
<p class="fw-semibold mb-0">{{ $user->kelas ?? 'N/A' }}</p>
</div>
</div>
</div>
</div>
{{-- Statistik Personal Siswa --}}
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Saya</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>
<div class="col-lg-4 d-flex flex-column">
<div class="card border-0 mb-3 mb-md-4 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<h5 class="fw-bold mb-4">Pintasan Manajemen</h5>
<div class="d-grid gap-3 flex-grow-1">
<a href="{{ route('admin.buku.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-book-fill me-3 fs-4"></i>
<span>Kelola Buku</span>
</a>
<a href="{{ route('admin.pengguna.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-people-fill me-3 fs-4"></i>
<span>Kelola Pengguna</span>
</a>
<a href="{{ route('admin.pengumuman.index') }}"
class="btn btn-light text-start py-3 d-flex align-items-center">
<i class="bi bi-megaphone-fill me-3 fs-4"></i>
<span>Kelola Pengumuman</span>
</a>
</div>
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Siswa --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', [
'bukuOffline' => $bukuOffline,
'bukuOnline' => $bukuOnline,
])
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<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>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill w-100 py-2">
<i class="bi bi-shield-lock me-2"></i>Ubah Password
</a>
</div>
</div>
</div>
</div>
@elseif (Auth::user()->role == 'guru')
<div class="row g-3 g-md-4 h-100">
<div class="col-lg-8 d-flex flex-column">
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4">
<div class="d-flex flex-column flex-sm-row align-items-center text-center text-sm-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=198754&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
<div class="ms-sm-4 mb-3 mb-sm-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{
Str::title($user->role) }}</span>
</div>
<div class="ms-sm-auto">
<a href="{{ route('profile.edit') }}"
class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
</div>
<hr class="my-3 my-md-4">
<h5 class="fw-bold mb-3">Informasi Personal</h5>
<div class="row g-3">
<div class="col-sm-6">
<small class="text-muted d-block mb-1">NIP/NIK</small>
<p class="fw-semibold mb-0">{{ $user->nip ?? $user->nisn ?? '-' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Email</small>
<p class="fw-semibold mb-0 text-break">{{ $user->email }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p>
</div>
</div>
</div>
</div>
<div class="card border-0 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<div
class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-4 gap-3">
<h5 class="fw-bold mb-0">Ringkasan Laporan Minat Baca</h5>
<div class="ms-sm-auto">
<a href="{{ route('guru.laporan.index') }}"
class="btn btn-sm btn-outline-primary rounded-pill w-100 w-sm-auto">
Lihat Laporan Lengkap
</a>
</div>
</div>
<div class="row flex-grow-1">
<div class="col-md-6 mb-3 mb-md-0">
<h6 class="small text-muted mb-3 text-uppercase fw-semibold">Buku Terpopuler</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach ($laporan['buku_terpopuler'] as $buku)
<li
class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $buku['judul'] }}</span>
<span class="badge bg-primary rounded-pill">{{ $buku['total_pembaca'] }}</span>
</li>
@endforeach
</ul>
</div>
<div class="col-md-6">
<h6 class="small text-muted mb-3 text-uppercase fw-semibold">Kategori Terpopuler</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach ($laporan['kategori_populer'] as $kategori)
<li
class="list-group-item px-0 py-3 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $kategori['nama'] }}</span>
<span class="badge bg-success rounded-pill">{{ $kategori['total_pembaca']
}}</span>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
@include('profile.partials.personal-activities', [
'bukuOffline' => $bukuOffline,
'bukuOnline' => $bukuOnline,
])
</div>
</div>
@else
<div class="row g-3 g-md-4 h-100">
<div class="col-lg-8 d-flex flex-column">
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4">
<div class="d-flex flex-column flex-sm-row align-items-center text-center text-sm-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
<div class="ms-sm-4 mb-3 mb-sm-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{
Str::title($user->role) }}</span>
</div>
<div class="ms-sm-auto">
<a href="{{ route('profile.edit') }}"
class="btn btn-outline-primary rounded-pill ms-sm-auto w-100 w-sm-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
</div>
<hr class="my-3 my-md-4">
<h5 class="fw-bold mb-3">Informasi Personal</h5>
<div class="row g-3">
<div class="col-sm-6">
<small class="text-muted d-block mb-1">NISN</small>
<p class="fw-semibold mb-0">{{ $user->nisn ?? '-' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Email</small>
<p class="fw-semibold mb-0 text-break">{{ $user->email }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? '-' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Kelas</small>
<p class="fw-semibold mb-0">{{ $user->kelas ?? '-' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Golongan</small>
<p class="fw-semibold mb-0">{{ $user->golongan ?? '-' }}</p>
</div>
</div>
</div>
</div>
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Saya</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
<div class="col-lg-4">
@include('profile.partials.personal-activities', [
'bukuOffline' => $bukuOffline,
'bukuOnline' => $bukuOnline,
])
</div>
</div>
@endif
</div>
</x-app-layout>
</x-app-layout>

View File

@ -1,11 +1,11 @@
<section>
<header>
<h2 class="h5 fw-bold">
<h2 class="h5 fw-bold text-dark">
{{ __('Update Password') }}
</h2>
<p class="mt-1 text-muted small">
{{ __('Ensure your account is using a long, random password to stay secure.') }}
{{ __('Pastikan akun Anda menggunakan kata sandi yang panjang dan acak untuk menjaga keamanan.') }}
</p>
</header>
@ -15,43 +15,89 @@
{{-- Current Password --}}
<div class="mb-3">
<label for="update_password_current_password" class="form-label">{{ __('Current Password') }}</label>
<input id="update_password_current_password" name="current_password" type="password"
class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
autocomplete="current-password">
@error('current_password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<label for="update_password_current_password" class="form-label">{{ __('Kata Sandi Saat Ini') }}</label>
<div class="input-group">
<input id="update_password_current_password" name="current_password" type="password"
class="form-control @error('current_password', 'updatePassword') is-invalid @enderror"
autocomplete="current-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('current_password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
{{-- New Password --}}
<div class="mb-3">
<label for="update_password_password" class="form-label">{{ __('New Password') }}</label>
<input id="update_password_password" name="password" type="password"
class="form-control @error('password', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
@error('password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<label for="update_password_password" class="form-label">{{ __('Kata Sandi Baru') }}</label>
<div class="input-group">
<input id="update_password_password" name="password" type="password"
class="form-control @error('password', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('password', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
{{-- Confirm Password --}}
<div class="mb-3">
<label for="update_password_password_confirmation" class="form-label">{{ __('Confirm Password') }}</label>
<input id="update_password_password_confirmation" name="password_confirmation" type="password"
class="form-control @error('password_confirmation', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
@error('password_confirmation', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<label for="update_password_password_confirmation" class="form-label">{{ __('Konfirmasi Kata Sandi') }}</label>
<div class="input-group">
<input id="update_password_password_confirmation" name="password_confirmation" type="password"
class="form-control @error('password_confirmation', 'updatePassword') is-invalid @enderror"
autocomplete="new-password">
<button class="btn btn-outline-secondary toggle-password" type="button">
<i class="bi bi-eye-slash"></i>
</button>
@error('password_confirmation', 'updatePassword')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<div class="d-flex align-items-center gap-3">
<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
@if (session('status') === 'password-updated')
<span class="text-success fw-bold">{{ __('Saved.') }}</span>
@endif
<div class="d-flex align-items-center gap-3 mt-4">
<button type="submit" class="btn btn-primary px-4 shadow-sm">
<i class="bi bi-save me-1"></i> {{ __('Simpan Perubahan') }}
</button>
</div>
</form>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleButtons = document.querySelectorAll('.toggle-password');
toggleButtons.forEach(button => {
button.addEventListener('click', function() {
const input = this.parentElement.querySelector('input');
const icon = this.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('bi-eye-slash');
icon.classList.add('bi-eye');
} else {
input.type = 'password';
icon.classList.remove('bi-eye');
icon.classList.add('bi-eye-slash');
}
});
});
@if (session('status') === 'password-updated')
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: 'Kata sandi baru sudah berhasil diperbarui.',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true
});
@endif
});
</script>
</section>

View File

@ -60,7 +60,15 @@
<span
class="badge rounded-pill bg-success-subtle text-success-emphasis">Dikembalikan</span>
@elseif($isTelat)
<span class="badge rounded-pill bg-danger text-white">Terlambat</span>
{{-- LOGIC BADGE STATUS DI TABEL --}}
@if (Auth::user()->role == 'guru')
<span
class="badge rounded-pill bg-success-subtle text-success-emphasis">Bebas
Denda</span>
@else
<span
class="badge rounded-pill bg-danger text-white">Terlambat</span>
@endif
@else
<span
class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</span>
@ -105,6 +113,8 @@ class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</spa
<script>
const riwayatOfflineData = @json($riwayatOffline);
const currentUserRole = "{{ Auth::user()->role }}";
$(document).ready(function() {
$('#riwayatOfflineTable').DataTable({
responsive: true,
@ -156,24 +166,47 @@ class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</spa
const buku = transaksiItem.books.find(b => b.id == bukuId);
if (!buku) return;
const dendaHtml = isTelat ? `
<div class="card border-0 border-start border-4 border-danger bg-danger-subtle mb-3 shadow-sm">
<div class="card-body p-3 d-flex align-items-center">
<div class="flex-shrink-0 me-3">
<i class="bi bi-exclamation-octagon-fill text-danger fs-1"></i>
</div>
<div class="text-start">
<h6 class="fw-bold text-danger mb-1">Terlambat Pengembalian!</h6>
<p class="mb-0 small text-danger-emphasis">
Anda terlambat <span class="badge bg-danger text-white">${hariTelat} Hari</span>.
Denda yang harus dibayar:
<span class="fw-bold fs-6 d-block mt-1">Rp ${denda}</span>
</p>
</div>
</div>
</div>` : '';
let dendaHtml = '';
const keteranganHtml = buku.keterangan ? `
if (isTelat) {
if (currentUserRole === 'guru') {
// JIKA GURU: Tampilkan Label Bebas Denda (Hijau)
dendaHtml = `
<div class="card border-0 border-start border-4 border-success bg-success-subtle mb-3 shadow-sm">
<div class="card-body p-3 d-flex align-items-center">
<div class="flex-shrink-0 me-3">
<i class="bi bi-check-circle-fill text-success fs-1"></i>
</div>
<div class="text-start">
<h6 class="fw-bold text-success mb-1">Bebas Denda</h6>
<p class="mb-0 small text-success-emphasis">
Sebagai Guru, Anda dibebaskan dari denda keterlambatan buku.
</p>
</div>
</div>
</div>`;
} else {
// JIKA SISWA: Tampilkan Label Denda (Merah)
dendaHtml = `
<div class="card border-0 border-start border-4 border-danger bg-danger-subtle mb-3 shadow-sm">
<div class="card-body p-3 d-flex align-items-center">
<div class="flex-shrink-0 me-3">
<i class="bi bi-exclamation-octagon-fill text-danger fs-1"></i>
</div>
<div class="text-start">
<h6 class="fw-bold text-danger mb-1">Terlambat Pengembalian!</h6>
<p class="mb-0 small text-danger-emphasis">
Anda terlambat <span class="badge bg-danger text-white">${hariTelat} Hari</span>.
Denda yang harus dibayar:
<span class="fw-bold fs-6 d-block mt-1">Rp ${denda}</span>
</p>
</div>
</div>
</div>`;
}
}
const keteranganHtml = buku.keterangan ? `
<div class="card border-0 border-start border-4 border-warning bg-warning-subtle mb-4 shadow-sm">
<div class="card-body p-3 d-flex align-items-start">
<div class="flex-shrink-0 me-3">
@ -188,8 +221,8 @@ class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</spa
</div>
</div>` : '';
// RENDER HTML
modalBody.innerHTML = `
// RENDER HTML
modalBody.innerHTML = `
<div class="text-center mb-4">
<img src="{{ asset('') }}${buku.cover}" class="img-fluid rounded shadow-sm" style="max-width: 140px;">
</div>

View File

@ -13,14 +13,14 @@
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="56">
@php
// Dummy data untuk landing page (Hanya contoh)
$buku_unggulan = \App\Services\DummyDataService::getAllBooks()->take(6);
$stats = [
['label' => 'Koleksi Buku', 'value' => 12500, 'icon' => 'bi-bookshelf'],
['label' => 'Pengguna Aktif', 'value' => 4500, 'icon' => 'bi-person-lines-fill'],
['label' => 'Total Dibaca', 'value' => '900K+', 'icon' => 'bi-hand-thumbs-up-fill'],
['label' => 'Tahun Berdiri', 'value' => 2018, 'icon' => 'bi-clock-fill'],
];
// Dummy data untuk landing page (Hanya contoh)
$buku_unggulan = \App\Services\DummyDataService::getAllBooks()->take(6);
$stats = [
['label' => 'Koleksi Buku', 'value' => 12500, 'icon' => 'bi-bookshelf'],
['label' => 'Pengguna Aktif', 'value' => 4500, 'icon' => 'bi-person-lines-fill'],
['label' => 'Total Dibaca', 'value' => '900K+', 'icon' => 'bi-hand-thumbs-up-fill'],
['label' => 'Tahun Berdiri', 'value' => 2018, 'icon' => 'bi-clock-fill'],
];
@endphp
{{-- Navbar --}}
@ -85,8 +85,8 @@ class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-cent
<i class="bi bi-person-workspace text-success" style="font-size: 1.25rem;"></i>
<div>
<div class="fw-semibold">Guru</div>
<small class="text-muted d-block" style="font-size: 0.75rem;">Kelola
Buku</small>
<small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam, Baca &
Pantau Laporan</small>
</div>
</a>
</li>
@ -149,24 +149,24 @@ class="img-fluid" style="max-width: 100%; height: auto;">
<h2 class="text-center fw-bold mb-5">Koleksi Unggulan Terbaru</h2>
<div class="row g-4 mb-4 justify-content-center">
@foreach ($buku_unggulan as $buku)
<div class="col-6 col-md-4 col-lg-2">
<div class="card h-100 border-0 shadow-sm">
<img src="{{ asset($buku['cover']) }}" class="card-img-top"
alt="Cover {{ $buku['judul'] }}">
<div class="card-body p-3">
<span
class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori'] }}</span>
<h6 class="card-title fw-bold mb-1">{{ $buku['judul'] }}</h6>
<p class="card-text small text-muted mb-1">{{ $buku['penulis'] }}</p>
<div class="small text-warning">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-half"></i>
(4.5)
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="card h-100 border-0 shadow-sm">
<img src="{{ asset($buku['cover']) }}" class="card-img-top"
alt="Cover {{ $buku['judul'] }}">
<div class="card-body p-3">
<span class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori']
}}</span>
<h6 class="card-title fw-bold mb-1">{{ $buku['judul'] }}</h6>
<p class="card-text small text-muted mb-1">{{ $buku['penulis'] }}</p>
<div class="small text-warning">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-half"></i>
(4.5)
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
@ -262,9 +262,9 @@ class="bi bi-star-half"></i>
{{-- Bagian Logo (Kolom Kanan) --}}
<div class="col-lg-6 order-lg-2 text-center">
<img src="{{ asset('images/assets/logo-smp.png') }}" alt="Logo SMPN 1 Bagor"
class="img-fluid" style="max-width: 250px; height: auto;">
</div>
<img src="{{ asset('images/assets/logo-smp.png') }}" alt="Logo SMPN 1 Bagor" class="img-fluid"
style="max-width: 250px; height: auto;">
</div>
{{-- Bagian Teks (Kolom Kiri) --}}
<div class="col-lg-6 order-lg-1">
@ -301,13 +301,13 @@ class="img-fluid" style="max-width: 250px; height: auto;">
<h2 class="text-center fw-bold mb-5 text-dark">DIGIPUS.GO Dalam Angka</h2>
<div class="row g-4 text-center">
@foreach ($stats as $stat)
<div class="col-sm-6 col-md-3">
<div class="p-4 bg-white shadow-sm h-100 landing-stat-card" style="border-radius: 1rem;">
<i class="bi {{ $stat['icon'] }} display-5 text-primary mb-3"></i>
<h2 class="fw-bold text-dark mb-1">{{ $stat['value'] }}</h2>
<p class="text-muted fw-semibold mb-0">{{ $stat['label'] }}</p>
</div>
<div class="col-sm-6 col-md-3">
<div class="p-4 bg-white shadow-sm h-100 landing-stat-card" style="border-radius: 1rem;">
<i class="bi {{ $stat['icon'] }} display-5 text-primary mb-3"></i>
<h2 class="fw-bold text-dark mb-1">{{ $stat['value'] }}</h2>
<p class="text-muted fw-semibold mb-0">{{ $stat['label'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
@ -358,8 +358,8 @@ class="img-fluid" style="max-width: 250px; height: auto;">
</li>
<li class="mb-2"><a href="#fitur" class="text-decoration-none text-white-50">Fitur</a>
</li>
<li class="mb-2"><a href="#statistik"
class="text-decoration-none text-white-50">Statistik</a></li>
<li class="mb-2"><a href="#statistik" class="text-decoration-none text-white-50">Statistik</a>
</li>
</ul>
</div>
@ -408,4 +408,4 @@ class="text-decoration-none text-white-50">Statistik</a></li>
</script>
</body>
</html>
</html>

View File

@ -12,10 +12,10 @@
use Illuminate\Support\Facades\Route;
Route::middleware('guest')->group(function () {
Route::get('register', [RegisteredUserController::class, 'create'])
->name('register');
// Route::get('register', [RegisteredUserController::class, 'create'])
// ->name('register');
Route::post('register', [RegisteredUserController::class, 'store']);
// Route::post('register', [RegisteredUserController::class, 'store']);
Route::get('login', [AuthenticatedSessionController::class, 'create'])
->name('login');