feat: Implement user banning, dynamic user creation forms, and enhance dashboard UI with overdue book status and modals.

app/Http/Controllers/Admin/AdminPeminjamanController.php

@@ -43,7 +43,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,
         ]);
@@ -132,11 +132,11 @@ public function dendaIndex()
 
         // Fetch all loans that are overdue or users that are banned
         $loans = Loan::with(['user', 'book'])
-            ->where(function($query) use ($now) {
+            ->where(function ($query) use ($now) {
                 $query->where('due_at', '<', $now)
                     ->whereIn('status', ['Dipinjam', 'Terlambat']);
             })
-            ->orWhereHas('user', function($query) {
+            ->orWhereHas('user', function ($query) {
                 $query->where('is_banned', true);
             })
             ->get();

app/Http/Controllers/Admin/UserController.php

@@ -7,12 +7,22 @@
 use App\Models\MasterInduk;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Hash;
+use App\Models\User;
+use App\Models\MasterInduk;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
 
 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();
 
@@ -23,29 +33,148 @@ public function index()
         ]);
     }
 
-    /**
-     * Menampilkan form untuk membuat pengguna baru.
-     */
     public function create()
     {
-        return view('admin.pengguna.create', [
+        return view('admin.pengguna.create', ['pageTitle' => 'Tambah Pengguna Baru']);
-            'pageTitle' => 'Tambah Pengguna Baru',
+    }
-        ]);
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'nama_lengkap' => 'required|string|max:255',
+            'email' => 'required|email|unique:users,email',
+            'role' => 'required|in:siswa,guru,penjaga perpus',
+            'no_hp' => 'nullable|string|max:20',
+            'password' => 'required|min:6|confirmed',
+            'nomor_induk' => [
+                'required',
+                function ($attribute, $value, $fail) use ($request) {
+                    $label = $request->role == 'siswa' ? 'NISN' : 'NIP/NIK';
+
+                    // Cek Nisn/Nip sudah dipakai di tabel users
+                    $sudahDipakai = User::where('nisn', $value)->orWhere('nip', $value)->exists();
+                    if ($sudahDipakai) {
+                        $fail("{$label} ini sudah digunakan oleh akun lain.");
+                        return;
+                    }
+
+                    if (in_array($request->role, ['siswa', 'guru'])) {
+                        $terdaftar = MasterInduk::where('nomor_induk', $value)
+                            ->where('role', $request->role)
+                            ->exists();
+                        if (!$terdaftar) {
+                            $fail("{$label} tidak terdaftar di data sekolah. Hubungi admin.");
+                        }
+                    }
+                },
+            ],
+        ], [
+            'role.in' => 'Pilih role yang valid.',
+            'email.unique' => 'Email sudah terdaftar.',
+            'password.confirmed' => 'Konfirmasi password tidak cocok.'
+        ]);
+
+        $user = new User();
+        $user->name = $request->nama_lengkap;
+        $user->email = $request->email;
+        $user->role = $request->role;
+        $user->password = Hash::make($request->password);
+        $user->no_hp = $request->no_hp;
+
+        // Validasi NISN dan NIP berdasarkan Role
+        if ($request->role == 'siswa') {
+            $user->nisn = $request->nomor_induk;
+            $user->kelas = $request->kelas;
+            $user->golongan = $request->golongan;
+        } else {
+            $user->nip = $request->nomor_induk;
+        }
+
+        $user->save();
+
+        return redirect()->route('admin.pengguna.index')->with('success', 'Pengguna berhasil ditambahkan.');
     }
 
-    /**
-     * Menampilkan form untuk mengedit pengguna yang ada.
-     */
     public function edit($id)
     {
         $pengguna = User::findOrFail($id);
-
         return view('admin.pengguna.edit', [
             'pageTitle' => 'Edit Pengguna: ' . $pengguna->nama_lengkap,
             'pengguna' => $pengguna,
         ]);
     }
 
+    public function update(Request $request, $id)
+    {
+        $request->validate([
+            'nama_lengkap' => 'required|string|max:255',
+            'email' => 'required|email|unique:users,email,' . $id,
+            'role' => 'required|in:siswa,guru,penjaga perpus',
+            'no_hp' => 'nullable|string|max:20',
+            'password' => 'nullable|min:6|confirmed',
+            'nomor_induk' => [
+                'required',
+                function ($attribute, $value, $fail) use ($request, $id) {
+                    $label = $request->role == 'siswa' ? 'NISN' : 'NIP/NIK';
+
+                    // cek nisn/nip sudah dipakai di tabel users (kecuali oleh dirinya sendiri)
+                    $sudahDipakai = User::where(function ($query) use ($value) {
+                        $query->where('nisn', $value)->orWhere('nip', $value);
+                    })->where('id', '!=', $id)->exists();
+
+                    if ($sudahDipakai) {
+                        $fail("{$label} ini sudah digunakan oleh akun lain.");
+                        return;
+                    }
+
+                    if (in_array($request->role, ['siswa', 'guru'])) {
+                        $terdaftar = MasterInduk::where('nomor_induk', $value)
+                            ->where('role', $request->role)
+                            ->exists();
+                        if (!$terdaftar) {
+                            $fail("{$label} tidak terdaftar di data sekolah. Hubungi admin.");
+                        }
+                    }
+                },
+            ],
+        ]);
+
+        $user = User::findOrFail($id);
+        $user->name = $request->nama_lengkap;
+        $user->email = $request->email;
+        $user->role = $request->role;
+        $user->no_hp = $request->no_hp;
+
+        // Jika password diisi, maka update. Jika kosong, biarkan password lama.
+        if ($request->filled('password')) {
+            $user->password = \Illuminate\Support\Facades\Hash::make($request->password);
+        }
+
+        $user->nisn = null;
+        $user->nip = null;
+        $user->kelas = null;
+        $user->golongan = null;
+
+        // Masukkan kembali sesuai role
+        if ($request->role == 'siswa') {
+            $user->nisn = $request->nomor_induk;
+            $user->kelas = $request->kelas;
+            $user->golongan = $request->golongan;
+        } else {
+            $user->nip = $request->nomor_induk;
+        }
+
+        $user->save();
+
+        return redirect()->route('admin.pengguna.index')->with('success', 'Data pengguna berhasil diperbarui.');
+    }
+
+    public function destroy($id)
+    {
+        User::findOrFail($id)->delete();
+        return back()->with('success', 'Pengguna berhasil dihapus.');
+    }
+
     public function store(Request $request)
     {
         $validated = $request->validate([

app/Http/Controllers/Auth/AdminLoginController.php

@@ -19,7 +19,7 @@ public function create(): View
     // Memproses login admin
     public function store(LoginRequest $request): RedirectResponse
     {
-        $request->authenticate(); // Menjalankan logika ketat di LoginRequest
+        $request->authenticate(); 
         $request->session()->regenerate();
         return redirect()->route('admin.dashboard');
     }

app/Http/Controllers/Auth/RegisteredUserController.php

@@ -4,39 +4,35 @@
 
 use App\Http\Controllers\Controller;
 use App\Models\User;
+use App\Models\MasterInduk;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\Rules;
+use Illuminate\Validation\ValidationException;
 use Illuminate\View\View;
 
 class RegisteredUserController extends Controller
 {
-    /**
-     * Menampilkan halaman registrasi.
-     */
     public function create(Request $request): View
     {
-        // Bagian Pengambilan Role dari URL
+        $role = $request->query('role', 'siswa');
-        $role = $request->query('role', 'siswa'); // Ambil 'role' dari URL, default ke 'siswa'
-
-        // Kirim $role ke view
         return view('auth.register', ['role' => $role]);
     }
 
-    /**
-     * Menangani permintaan registrasi yang masuk.
-     */
     public function store(Request $request): RedirectResponse
     {
         $role = $request->input('role');
 
+
         $rules = [
             'name' => ['required', 'string', 'max:255'],
+            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
             'password' => ['required', 'confirmed', Rules\Password::defaults()],
             'role' => ['required', 'in:siswa,guru'],
+            'role' => ['required', 'in:siswa,guru'],
         ];
 
         if ($role === 'siswa') {
@@ -47,13 +43,27 @@ public function store(Request $request): RedirectResponse
 
         $request->validate($rules);
 
+
+        $nomorInduk = ($role === 'siswa') ? $request->nisn : $request->nip;
+
+        $isWhitelisted = MasterInduk::where('nomor_induk', $nomorInduk)
+            ->where('role', $role)
+            ->exists();
+
+        if (!$isWhitelisted) {
+            throw ValidationException::withMessages([
+                ($role === 'siswa' ? 'nisn' : 'nip') => ['Nomor induk tidak terdaftar di Data Sekolah. Hubungi petugas.'],
+            ]);
+        }
+
+
         $user = User::create([
             'name' => $request->name,
-            'nama_lengkap' => $request->name,
+            'email' => $request->email,
-            'email' => ($request->nisn ?: $request->nip) . '@smkn1perpus.sch.id',
             'password' => Hash::make($request->password),
-            'role' => $request->role,
+            'role' => $role,
-            'nomor_induk' => $request->nisn ?: $request->nip,
+            'nisn' => ($role === 'siswa') ? $nomorInduk : null,
+            'nip' => ($role === 'guru') ? $nomorInduk : null,
         ]);
 
         event(new Registered($user));

app/Http/Controllers/ProfileController.php

@@ -16,9 +16,9 @@
 class ProfileController extends Controller
 {
     /**
-     * Menampilkan halaman utama profil pengguna secara dinamis berdasarkan role.
+     * Tampilkan halaman profil user.
      */
-    public function index(): RedirectResponse|View
+    public function index(Request $request): View
     {
         $user = Auth::user();
         if (!$user) {
@@ -27,7 +27,6 @@ public function index(): RedirectResponse|View
 
         $viewData = ['user' => $user];
 
-        // Menyiapkan data berdasarkan role pengguna
         if ($user->role === 'penjaga perpus') {
             // Data untuk Penjaga Perpus: Statistik global & aktivitas terkini
             $viewData['statistik'] = [
@@ -43,7 +42,6 @@ public function index(): RedirectResponse|View
                 'waktu' => $loan->created_at->diffForHumans(),
                 'status' => $loan->status,
             ]);
-
         } elseif ($user->role === 'guru') {
             // Data untuk Guru
             $loans = Loan::with('book')->where('user_id', $user->id)->whereIn('status', ['Dipinjam', 'Terlambat'])->get();
@@ -67,7 +65,6 @@ public function index(): RedirectResponse|View
                 'buku_terpopuler' => Book::withCount('loans')->orderBy('loans_count', 'desc')->take(3)->get(),
                 'insight' => 'Siswa aktif meminjam buku kategori Sains.'
             ];
-            
         } else {
             // Data untuk Siswa
             $loans = Loan::with('book')->where('user_id', $user->id)->whereIn('status', ['Dipinjam', 'Terlambat'])->get();
@@ -98,7 +95,7 @@ public function index(): RedirectResponse|View
     }
 
     /**
-     * Menampilkan form untuk mengedit profil.
+     * Tampilkan form edit profil.
      */
     public function edit(Request $request): View
     {
@@ -108,9 +105,9 @@ public function edit(Request $request): View
     }
 
     /**
-     * Memperbarui informasi profil pengguna.
+     * Update data profil ke Database MySQL.
      */
-    public function update(ProfileUpdateRequest $request): RedirectResponse
+    public function update(Request $request): RedirectResponse
     {
         $user = $request->user();
         $user->fill($request->validated());
@@ -120,13 +117,14 @@ public function update(ProfileUpdateRequest $request): RedirectResponse
             $user->email_verified_at = null;
         }
 
+        $user->save();
         $user->save();
 
         return Redirect::route('profile.edit')->with('status', 'profile-updated');
     }
 
     /**
-     * Menghapus akun pengguna.
+     * Hapus akun user.
      */
     public function destroy(Request $request): RedirectResponse
     {

app/Http/Controllers/RiwayatController.php

@@ -5,6 +5,7 @@
 use App\Models\Loan;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Auth;
 
 class RiwayatController extends Controller
 {

app/Http/Requests/Auth/LoginRequest.php

@@ -2,54 +2,27 @@
 
 namespace App\Http\Requests\Auth;
 
-use App\Models\User;
+use Illuminate\Auth\Events\Lockout;
-use App\Services\DummyDataService;
 use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\Str;
 use Illuminate\Validation\ValidationException;
-use Illuminate\Auth\Events\Lockout;
 
 class LoginRequest extends FormRequest
 {
-    /**
-     * Menentukan apakah pengguna diizinkan untuk membuat request ini.
-     * Selalu true karena semua orang boleh mencoba login.
-     */
     public function authorize(): bool
     {
         return true;
     }
 
-    /**
-     * Mendapatkan aturan validasi yang berlaku untuk request ini.
-     * Aturan ini dinamis, berubah tergantung pada 'role' yang dikirim dari form.
-     */
     public function rules(): array
     {
-        // Jika form mengirim 'role' dengan nilai 'siswa'...
-        if ($this->input('role') === 'siswa') {
-            // ...maka validasi input 'nisn' dan 'password'.
         return [
-                'nisn' => ['required', 'string'],
             'password' => ['required', 'string'],
         ];
     }
 
-        // Jika tidak (untuk 'guru' dan 'penjaga perpus')
-        return [
-            'nip' => ['required', 'string'],
-            'password' => ['required', 'string'],
-        ];
-    }
-
-    /**
-     * Mencoba untuk mengautentikasi kredensial dari request.
-     * Ini adalah "otak" dari proses login yang berisi logika paling penting.
-     *
-     * @throws \Illuminate\Validation\ValidationException
-     */
     public function authenticate(): void
     {
         $this->ensureIsNotRateLimited();
@@ -98,19 +71,15 @@ public function authenticate(): void
         RateLimiter::clear($this->throttleKey());
     }
 
-    /**
-     * Memastikan request login tidak dibatasi karena terlalu banyak percobaan.
-     */
     public function ensureIsNotRateLimited(): void
     {
-        // Jika percobaan belum melebihi 5 kali, lanjutkan.
+        if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
-        if (!RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
             return;
         }
 
-        // Jika sudah lebih dari 5 kali, lemparkan error 'throttle'.
         event(new Lockout($this));
         $seconds = RateLimiter::availableIn($this->throttleKey());
+
         throw ValidationException::withMessages([
             'email' => trans('auth.throttle', [
                 'seconds' => $seconds,
@@ -119,14 +88,9 @@ public function ensureIsNotRateLimited(): void
         ]);
     }
 
-    /**
-     * Mendapatkan kunci throttle untuk request ini.
-     * Kunci ini unik untuk setiap pengguna (berdasarkan nisn/email) dan alamat IP.
-     */
     public function throttleKey(): string
     {
-        // Gunakan 'nisn' jika ada, jika tidak, gunakan 'email' sebagai identitas.
+        $field = $this->input('email') ?? $this->input('nisn') ?? $this->input('nip') ?? 'unknown';
-        $loginIdentifier = $this->input('nisn') ?: $this->input('nip');
+        return Str::transliterate(Str::lower($field) . '|' . $this->ip());
-        return Str::transliterate(Str::lower($loginIdentifier) . '|' . $this->ip());
     }
 }

app/Models/User.php

@@ -53,4 +53,9 @@ protected function casts(): array
             'password' => 'hashed',
         ];
     }
+
+    public function getNamaLengkapAttribute()
+    {
+        return $this->name;
+    }
 }

app/Providers/AuthServiceProvider.php

@@ -2,16 +2,14 @@
 
 namespace App\Providers;
 
-use App\Auth\DummyUserProvider;
+// use App\Auth\DummyUserProvider; // Hapus atau Komen baris ini
-use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Gate;
 use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
 
 class AuthServiceProvider extends ServiceProvider
 {
     /**
      * The model to policy mappings for the application.
-     *
-     * @var array<class-string, class-string>
      */
     protected $policies = [
         //

database/seeders/DatabaseSeeder.php

@@ -2,26 +2,92 @@
 
 namespace Database\Seeders;
 
-use App\Models\User;
-// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
+use App\Models\User;
+use App\Models\MasterInduk;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\DB;
 
 class DatabaseSeeder extends Seeder
 {
-    /**
+    public function run()
-     * Seed the application's database.
-     */
-    public function run(): void
     {
-        // User seeder is already handled or skipped as per user request
+        // Bersihkan data lama
+        DB::statement('SET FOREIGN_KEY_CHECKS=0;');
+        User::truncate();
+        MasterInduk::truncate();
+        DB::statement('SET FOREIGN_KEY_CHECKS=1;');
 
-        $this->call([
+        $whitelist = [
-            UserSeeder::class,
+            ['nomor_induk' => '1234567890', 'role' => 'siswa', 'nama_pemilik' => 'Silvi Rahmawati'],
-            CategorySeeder::class,
+            ['nomor_induk' => '9988776655', 'role' => 'siswa', 'nama_pemilik' => 'Siti Nurhaliza'],
-            BookSeeder::class,
+            ['nomor_induk' => '5566778899', 'role' => 'siswa', 'nama_pemilik' => 'Andi Pratama'],
-            RecommendationSeeder::class,
+            ['nomor_induk' => '198506152010012', 'role' => 'guru', 'nama_pemilik' => 'Rina Marlina'],
-            AnnouncementSeeder::class,
+        ];
-            LoanSeeder::class,
+
+        foreach ($whitelist as $w) {
+            MasterInduk::create($w);
+        }
+
+        // ISI USER ASLI 
+
+        // ID 1: Silvi (Siswa)
+        User::create([
+            'id' => 1,
+            'name' => 'Silvi Rahmawati',
+            'email' => 'silvi.rahmawati@smkn1perpus.sch.id',
+            'password' => Hash::make('password'),
+            'role' => 'siswa',
+            'nisn' => '1234567890',
+            'no_hp' => '08123456789',
+            'kelas' => 'XII RPL',
+            'golongan' => 'A'
+        ]);
+
+        // ID 2: Budi (Admin/Penjaga)
+        User::create([
+            'id' => 2,
+            'name' => 'Budi Santoso',
+            'email' => 'budi.santoso@smkn1perpus.sch.id',
+            'password' => Hash::make('password'),
+            'role' => 'penjaga perpus',
+            'nip' => '197812312005011',
+        ]);
+
+        // ID 3: Siti (Siswa)
+        User::create([
+            'id' => 3,
+            'name' => 'Siti Nurhaliza',
+            'email' => 'siti.nurhaliza@smkn1perpus.sch.id',
+            'password' => Hash::make('password'),
+            'role' => 'siswa',
+            'nisn' => '9988776655',
+            'no_hp' => '081998877665',
+            'kelas' => 'XII RPL',
+            'golongan' => 'B'
+        ]);
+
+        // ID 4: Andi (Siswa)
+        User::create([
+            'id' => 4,
+            'name' => 'Andi Pratama',
+            'email' => 'andi.pratama@smkn1perpus.sch.id',
+            'password' => Hash::make('password'),
+            'role' => 'siswa',
+            'nisn' => '5566778899',
+            'no_hp' => '081556677889',
+            'kelas' => 'XII RPL',
+            'golongan' => 'C'
+        ]);
+
+        // ID 5: Rina (Guru)
+        User::create([
+            'id' => 5,
+            'name' => 'Rina Marlina',
+            'email' => 'rina.marlina@smkn1perpus.sch.id',
+            'password' => Hash::make('password'),
+            'role' => 'guru',
+            'nip' => '198506152010012',
         ]);
     }
 }

resources/views/admin/buku/create.blade.php

@@ -48,8 +48,12 @@
                                                 placeholder="Contoh: 330">
                                         </div>
                                     </div>
+                                </div>
+
+                                {{-- TIPE AKSES --}}
                                 <div class="mb-3">
                                     <label class="form-label">Tipe Akses</label>
+                                    <div class="d-flex gap-3">
                                         <div class="form-check">
                                             <input class="form-check-input" type="checkbox" name="tipe_akses[]" value="offline" id="tipe_offline">
                                             <label class="form-check-label" for="tipe_offline">Peminjaman
@@ -72,14 +76,41 @@
                                     </div>
                                 </div>
                             </div>
-                            <hr>
+                    </div>
+                    <hr class="my-4">
                     <div class="d-flex justify-content-end">
-                                <button type="submit" class="btn btn-primary">Simpan Buku</button>
+                        <button type="submit" class="btn btn-primary px-4 fw-bold">
+                            <i class="bi bi-save me-2"></i>Simpan Buku
+                        </button>
                     </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
-    </div>z
+
+    @push('scripts')
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // LOGIC SIMPAN
+            document.getElementById('formTambahBuku').addEventListener('submit', function(e) {
+                e.preventDefault();
+                modernSwal.fire({
+                    title: 'Menyimpan...',
+                    timer: 1500,
+                    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>

resources/views/admin/buku/edit.blade.php

@@ -99,4 +99,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>

resources/views/admin/buku/index.blade.php

@@ -9,32 +9,42 @@
             </a>
         </div>
         <div class="card-body">
+            {{-- NAV TABS --}}
             <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
+                        data-bs-target="#offline-tab-pane" type="button" role="tab">Peminjaman Offline (<span
-                        ({{ $bukuOffline->count() }})</button>
+                            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>
+                        type="button" role="tab">Baca Online (<span id="countOnline">{{ $bukuOnline->count()
+                            }}</span>)</button>
+                </li>
+                <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>
 
             <div class="tab-content" id="bukuTabContent">
-                {{-- TAB UNTUK BUKU OFFLINE --}}
+
+                {{-- BUKU OFFLINE --}}
                 <div class="tab-pane fade show active" id="offline-tab-pane" role="tabpanel">
                     <div class="table-responsive mt-3">
-                        <table class="table table-hover">
+                        <table class="table table-hover align-middle" id="tableOffline">
-                            <thead>
+                            <thead class="table-light">
                                 <tr>
                                     <th>No</th>
                                     <th>Cover</th>
                                     <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>
@@ -66,11 +76,17 @@ class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
                                             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>
+                    <tr class="empty-row">
-                                        <td colspan="6" class="text-center py-4">Tidak ada data buku offline.</td>
+                        <td colspan="8" class="text-center py-4 text-muted">Tidak ada data buku offline.
+                        </td>
                     </tr>
                     @endforelse
                     </tbody>
@@ -78,18 +94,18 @@ class="badge bg-warning-subtle text-warning-emphasis">Dipinjam</span>
                 </div>
             </div>
 
-                {{-- TAB UNTUK BUKU ONLINE --}}
+            {{-- 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>
+                        <thead class="table-light">
                             <tr>
                                 <th>No</th>
                                 <th>Cover</th>
                                 <th>Judul</th>
                                 <th>Penulis</th>
                                 <th>File PDF</th>
-                                    <th>Aksi</th>
+                                <th class="text-center">Aksi</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -113,61 +129,104 @@ class="badge bg-info-subtle text-info-emphasis">{{ $buku['file_pdf'] ?? 'N/A' }}
                                         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>
+                <tr class="empty-row">
-                                        <td colspan="6" class="text-center py-4">Tidak ada data buku online.</td>
+                    <td colspan="6" class="text-center py-4 text-muted">Tidak ada data buku online.</td>
                 </tr>
                 @endforelse
                 </tbody>
                 </table>
             </div>
         </div>
+
+        {{-- 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 class="table-light">
+                        <tr>
+                            <th>No</th>
+                            <th>Cover</th>
+                            <th>Judul</th>
+                            <th>Penulis</th>
+                            <th>Tipe Asal</th>
+                            <th class="text-center">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="empty-row-arsip">
+                            <td colspan="6" class="text-center py-5 text-muted">
+                                <i class="bi bi-inbox fs-1 d-block mb-2 text-secondary opacity-50"></i>
+                                Belum ada buku yang diarsipkan.
+                            </td>
+                        </tr>
+                    </tbody>
+                </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">
+            <div class="modal-content border-0 shadow">
-                <div class="modal-header">
+                <div class="modal-header border-0">
                     <h5 class="modal-title fw-bold" id="modalJudul">Detail Buku</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                 </div>
                 <div class="modal-body">
                     <div class="row">
-                        <div class="col-md-4">
+                        <div class="col-md-4 text-center mb-3">
-                            <img src="" id="modalCover" class="img-fluid rounded shadow-sm" alt="Cover Buku">
+                            <img src="" id="modalCover" class="img-fluid rounded shadow"
+                                style="max-height: 250px; object-fit: cover;">
                         </div>
                         <div class="col-md-8">
-                            <h3 id="modalJudulContent" class="fw-bold"></h3>
+                            <h3 id="modalJudulContent" class="fw-bold text-dark mb-1"></h3>
-                            <p class="text-muted" id="modalPenulis"></p>
+                            <p class="text-muted mb-3" id="modalPenulis"></p>
-                            <table class="table table-sm table-borderless">
+
+                            <div class="bg-light p-3 rounded-3">
+                                <table class="table table-sm table-borderless mb-0">
                                     <tr>
-                                    <th width="100px">Kategori</th>
+                                        <td class="text-secondary" width="130">Kategori</td>
-                                    <td id="modalKategori"></td>
+                                        <td id="modalKategori" class="fw-bold"></td>
                                     </tr>
                                     <tr id="rowKodeBuku">
-                                    <th>Kode Buku</th>
+                                        <td class="text-secondary">Kode Buku</td>
-                                    <td id="modalKode_buku"></td>
+                                        <td id="modalKode" class="fw-bold font-monospace"></td>
                                     </tr>
                                     <tr>
-                                    <th>Tahun</th>
+                                        <td class="text-secondary">Tahun Terbit</td>
-                                    <td id="modalTahun"></td>
+                                        <td id="modalTahun" class="fw-bold"></td>
                                     </tr>
                                     <tr>
-                                    <th>Status</th>
+                                        <td class="text-secondary">Stok</td>
+                                        <td id="modalStok" class="fw-bold"></td>
+                                    </tr>
+                                    <tr>
+                                        <td class="text-secondary">Status</td>
                                         <td><span id="modalStatus" class="badge"></span></td>
                                     </tr>
                                 </table>
                             </div>
                         </div>
                     </div>
-                <div class="modal-footer">
+                </div>
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
+                <div class="modal-footer border-0 bg-light">
-                    <a href="#" id="modalEditButton" class="btn btn-primary"><i
+                    <button type="button" class="btn btn-secondary rounded-pill px-4"
-                            class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
+                        data-bs-dismiss="modal">Tutup</button>
+                    <a href="#" id="modalEditButton" class="btn btn-primary rounded-pill px-4">
+                        <i class="bi bi-pencil-square me-2"></i>Edit Buku
+                    </a>
                 </div>
             </div>
         </div>
@@ -176,57 +235,152 @@ class="bi bi-pencil-fill me-2"></i>Edit Buku</a>
     @push('scripts')
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-                const detailBukuModal = document.getElementById('detailBukuModal');
-                if (detailBukuModal) {
-                    detailBukuModal.addEventListener('show.bs.modal', event => {
-                        const button = event.relatedTarget;
 
-                        const id = button.getAttribute('data-id');
+            function updateTableNumbers() {
-                        const cover = button.getAttribute('data-cover');
+                ['#tableOffline', '#tableOnline', '#tableArsip'].forEach(tableId => {
-                        const judul = button.getAttribute('data-judul');
+                    let count = 0;
-                        const kode_buku = button.getAttribute('data-kode_buku');
+                    $(tableId + ' tbody tr').not('[class^="empty-row"]').each(function(index) {
-                        const penulis = button.getAttribute('data-penulis');
+                        $(this).find('.row-number').text(index + 1);
-                        const kategori = button.getAttribute('data-kategori');
+                        count++;
-                        const tahun = button.getAttribute('data-tahun');
+                    });
-                        const status = button.getAttribute('data-status');
 
-                        const editUrl = `{{ url('admin/buku') }}/${id}/edit`;
+                    if (tableId === '#tableOffline') $('#countOffline').text(count);
-
+                    if (tableId === '#tableOnline') $('#countOnline').text(count);
-                        const modalJudul = detailBukuModal.querySelector('#modalJudul');
+                    if (tableId === '#tableArsip') {
-                        const modalCover = detailBukuModal.querySelector('#modalCover');
+                        $('#countArsip').text(count);
-                        const modalKode_buku = detailBukuModal.querySelector('#modalKode_buku');
+                        if (count === 0) $('.empty-row-arsip').show();
-                        const modalJudulContent = detailBukuModal.querySelector('#modalJudulContent');
+                        else $('.empty-row-arsip').hide();
-                        const modalPenulis = detailBukuModal.querySelector('#modalPenulis');
-                        const modalKategori = detailBukuModal.querySelector('#modalKategori');
-                        const modalTahun = detailBukuModal.querySelector('#modalTahun');
-                        const modalStatus = detailBukuModal.querySelector('#modalStatus');
-                        const modalEditButton = detailBukuModal.querySelector('#modalEditButton');
-                        const rowKodeBuku = detailBukuModal.querySelector('#rowKodeBuku');
-
-                        modalJudul.textContent = judul;
-                        modalCover.src = cover;
-                        modalJudulContent.textContent = judul;
-                        modalPenulis.textContent = `oleh ${penulis}`;
-                        modalKategori.textContent = `: ${kategori}`;
-                        modalTahun.textContent = `: ${tahun}`;
-                        modalStatus.textContent = status;
-                        modalEditButton.href = editUrl;
-
-                        // Tampilkan/sembunyikan kode buku berdasarkan ada tidaknya data
-                        if (kode_buku && kode_buku !== 'null' && kode_buku !== '') {
-                            rowKodeBuku.style.display = '';
-                            modalKode_buku.textContent = `: ${kode_buku}`;
-                        } else {
-                            rowKodeBuku.style.display = 'none';
-                        }
-
-                        if (status === 'Tersedia' || status === 'Dapat Dibaca Online') {
-                            modalStatus.className = 'badge bg-success-subtle text-success-emphasis';
-                        } else {
-                            modalStatus.className = 'badge bg-warning-subtle text-warning-emphasis';
                     }
                 });
             }
+
+            // LOGIC MODAL DETAIL
+            $('#detailBukuModal').on('show.bs.modal', function(event) {
+                const button = $(event.relatedTarget);
+                const buku = button.data('buku');
+
+                $('#modalCover').attr('src', "{{ asset('') }}" + buku.cover);
+                $('#modalJudulContent').text(buku.judul);
+                $('#modalPenulis').text('Penulis: ' + buku.penulis);
+                $('#modalKategori').text(buku.kategori);
+                $('#modalTahun').text(buku.tahun);
+                $('#modalStok').text(buku.stok ? buku.stok + ' Buku' : '-');
+
+                if (buku.kode_buku) {
+                    $('#rowKodeBuku').show();
+                    $('#modalKode').text(buku.kode_buku);
+                } else {
+                    $('#rowKodeBuku').hide();
+                }
+
+                // Status Badge
+                const statusBadge = $('#modalStatus');
+                statusBadge.removeClass().addClass('badge');
+                if (buku.status === 'Tersedia' || !buku.status) {
+                    statusBadge.addClass('bg-success-subtle text-success-emphasis').text('Tersedia / Online');
+                } else {
+                    statusBadge.addClass('bg-warning-subtle text-warning-emphasis').text('Dipinjam');
+                }
+
+                $('#modalEditButton').attr('href', "{{ url('admin/buku') }}/" + buku.id + "/edit");
+            });
+
+            // LOGIC ARSIPKAN BUKU
+            $(document).on('click', '.btn-arsipkan', function() {
+                const row = $(this).closest('tr');
+                const judul = $(this).data('judul');
+                const tipe = row.data('tipe');
+
+                const rowData = row.prop('outerHTML');
+
+                modernSwal.fire({
+                    title: 'Arsipkan Buku?',
+                    text: `Buku "${judul}" akan dipindahkan ke tab Arsip.`,
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonText: 'Ya, Arsipkan',
+                    cancelButtonText: 'Batal',
+                    confirmButtonColor: '#ffc107',
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        row.fadeOut(300, function() {
+                            const coverHtml = row.find('td:eq(1)').html();
+                            const penulis = row.find('td:eq(3)').text();
+                            const badgeTipe = tipe === 'offline' ?
+                                '<span class="badge bg-secondary"><i class="bi bi-book me-1"></i>Offline</span>' :
+                                '<span class="badge bg-info"><i class="bi bi-globe me-1"></i>Online</span>';
+
+                            const originalDataEncoded = encodeURIComponent(rowData);
+
+                            const arsipRow = `
+                                <tr data-origin="${originalDataEncoded}">
+                                    <td class="row-number"></td>
+                                    <td>${coverHtml}</td>
+                                    <td class="fw-bold text-muted">${judul}</td>
+                                    <td class="text-muted">${penulis}</td>
+                                    <td>${badgeTipe}</td>
+                                    <td class="text-center">
+                                        <button class="btn btn-sm btn-outline-success btn-pulihkan" 
+                                            data-judul="${judul}" title="Kembalikan ke Daftar Aktif">
+                                            <i class="bi bi-arrow-counterclockwise me-1"></i>Kembalikan
+                                        </button>
+                                    </td>
+                                </tr>
+                            `;
+
+                            $('#tableArsip tbody').append(arsipRow);
+                            $(this).remove();
+
+                            updateTableNumbers();
+                            Toast.fire({
+                                icon: 'success',
+                                title: 'Diarsipkan',
+                                text: `Buku "${judul}" berhasil diarsipkan.`
+                            });
+                        });
+                    }
+                });
+            });
+
+            // LOGIC PULIHKAN BUKU 
+            $(document).on('click', '.btn-pulihkan', function() {
+                const row = $(this).closest('tr');
+                const judul = $(this).data('judul');
+                const originalDataEncoded = row.data('origin');
+
+                modernSwal.fire({
+                    title: 'Kembalikan Buku?',
+                    text: `Buku "${judul}" akan dikembalikan ke daftar aktif.`,
+                    icon: 'question',
+                    showCancelButton: true,
+                    confirmButtonText: 'Ya, Kembalikan',
+                    cancelButtonText: 'Batal',
+                    confirmButtonColor: '#198754',
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        row.fadeOut(300, function() {
+                            const originalRowHtml = decodeURIComponent(originalDataEncoded);
+                            const $originalRow = $(originalRowHtml);
+
+                            const tipe = $originalRow.data('tipe');
+                            const targetTable = tipe === 'offline' ? '#tableOffline' : '#tableOnline';
+
+                            $originalRow.removeAttr('style');
+
+                            $(targetTable + ' tbody').append($originalRow);
+                            $(this).remove();
+
+                            updateTableNumbers();
+                            Toast.fire({
+                                icon: 'success',
+                                title: 'Dipulihkan',
+                                text: `Buku "${judul}" aktif kembali.`
+                            });
+                        });
+                    }
+                });
+            });
+
         });
     </script>
     @endpush

resources/views/admin/dashboard.blade.php

@@ -1,5 +1,5 @@
 <x-app-layout>
-    @section('page-title', 'Dashboard Admin')
+    @section('page-title', 'Beranda')
 
     {{-- Welcome card Section --}}
     <div class="card border-0 shadow-sm rounded-4 my-4 p-4 position-relative" style="background-color: #CEDEFF;">

resources/views/admin/denda/index.blade.php

@@ -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
+                                <span class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
-                                        class="badge bg-light text-secondary border mt-1 mb-1">{{ $item['kelas'] }}</span>
+                                <div class="small text-muted">
-                                    <div class="small text-muted"><i
+                                    <i class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}
-                                            class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}</div>
+                                </div>
                             </td>
                             <td>
                                 <ul class="mb-0 ps-3 small text-muted">
@@ -71,14 +71,19 @@ class="bi bi-telephone me-1"></i>{{ $item['nomor_hp'] }}</div>
                                     @endforeach
                                 </ul>
                             </td>
+
+                            {{-- KOLOM STATUS --}}
                             <td data-order="{{ $item['tenggat_kembali']->timestamp }}">
-                                    <span
+                                @if(isset($item['role']) && strtolower($item['role']) === 'guru')
-                                        class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3">
+                                <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'] }}">
@@ -87,13 +92,16 @@ class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pi
                                 <small class="text-muted" style="font-size: 0.75rem;">Kebijakan Guru</small>
                                 @else
                                 <div class="fw-bold text-danger">Rp
-                                            {{ number_format($item['total_denda'], 0, ',', '.') }}</div>
+                                    {{ 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>
@@ -123,7 +131,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>
@@ -150,7 +158,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'
             });
@@ -195,7 +203,7 @@ function(settings, data, dataIndex) {
             const userId = $(this).data('user-id');
 
             modernSwal.fire({
-                    title: 'Bekukan Akun?',
+                title: 'Nonaktifkan Akun?',
                 text: `Apakah Anda yakin ingin memberikan sanksi pembekuan akun kepada ${nama}?`,
                 icon: 'warning',
                 showCancelButton: true,
@@ -210,7 +218,8 @@ function(settings, data, dataIndex) {
                     });
 
                     $.ajax({
-                            url: '{{ route('admin.denda.sanksi') }}',
+                        url: '{{ route('
+                        admin.denda.sanksi ') }}',
                         method: 'POST',
                         data: {
                             _token: '{{ csrf_token() }}',
@@ -257,7 +266,8 @@ function(settings, data, dataIndex) {
                     });
 
                     $.ajax({
-                            url: '{{ route('admin.denda.sanksi') }}',
+                        url: '{{ route('
+                        admin.denda.sanksi ') }}',
                         method: 'POST',
                         data: {
                             _token: '{{ csrf_token() }}',

resources/views/admin/peminjaman/create.blade.php

@@ -29,15 +29,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'] }}" 
+                                                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>
@@ -47,16 +49,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"
+                                <input type="text" class="form-control" id="tanggal_pinjam" name="tanggal_pinjam" placeholder="Pilih 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"
+                                <input type="text" class="form-control" id="tanggal_kembali" name="tanggal_kembali" placeholder="Pilih tenggat kembali">
-                                    placeholder="Pilih tenggat kembali">
                             </div>
                         </div>
 
@@ -95,8 +105,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"
+                                <input type="text" class="form-control border-start-0" id="searchBuku" placeholder="Cari judul atau penulis...">
-                                    placeholder="Cari judul atau penulis...">
                             </div>
                         </div>
 
@@ -109,19 +118,15 @@
                                     data-book-kategori="{{ $buku['kategori'] }}">
 
                                     <div class="d-flex align-items-center book-item-list"
-                                        onclick="toggleBookSelection(this, {{ $buku['id'] }})"
+                                        onclick="toggleBookSelection(this, {{ $buku['id'] }})" style="cursor: pointer;">
-                                        style="cursor: pointer;">
+                                        <img src="{{ asset($buku['cover']) }}" alt="Cover" class="rounded me-3" style="width: 50px; height: 70px; object-fit: cover;">
-                                        <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"
+                                            <input class="form-check-input book-checkbox" type="checkbox" value="{{ $buku['id'] }}" id="book-check-{{ $buku['id'] }}" style="pointer-events: none;">
-                                                value="{{ $buku['id'] }}" id="book-check-{{ $buku['id'] }}"
-                                                style="pointer-events: none;">
                                         </div>
                                     </div>
                                 </div>
@@ -133,53 +138,47 @@
         </div>
     </form>
 
-
     @push('scripts')
         <script>
             document.addEventListener("DOMContentLoaded", function() {
                 const tomSelect = new TomSelect("#peminjam_id", {
                     create: false,
-                    sortField: {
+                    sortField: { field: "text", direction: "asc" },
-                        field: "text",
+                    onChange: function(value) {
-                        direction: "asc"
+                        // 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 tglPinjam = flatpickr("#tanggal_pinjam", {
-                    dateFormat: "Y-m-d",
+                    dateFormat: "Y-m-d", altInput: true, altFormat: "d/m/Y", defaultDate: "today", locale: "id",
-                    altInput: true,
-                    altFormat: "d/m/Y",
-                    defaultDate: "today",
-                    locale: "id",
                     onChange: function(selectedDates, dateStr) {
-                        if (selectedDates.length > 0) {
+                        if (selectedDates.length > 0) tglKembali.set("minDate", new Date(selectedDates[0]).fp_incr(1));
-                            tglKembali.set("minDate", new Date(selectedDates[0]).fp_incr(1));
-                        }
                     }
                 });
 
                 const tglKembali = flatpickr("#tanggal_kembali", {
-                    dateFormat: "Y-m-d",
+                    dateFormat: "Y-m-d", altInput: true, altFormat: "d/m/Y", defaultDate: new Date().fp_incr(7), locale: "id", minDate: new Date().fp_incr(1)
-                    altInput: true,
-                    altFormat: "d/m/Y",
-                    defaultDate: new Date().fp_incr(7),
-                    locale: "id",
-                    minDate: new Date().fp_incr(1)
                 });
 
-
+                const MAX_BOOKS_SISWA = 2; 
-                // Logika Pemilihan Buku 
-                const MAX_BOOKS = 2;
                 let selectedBookIds = new Set();
                 const allBooks = new Map();
+                
                 document.querySelectorAll('.book-option').forEach(el => {
                     const id = el.dataset.bookId;
-                    allBooks.set(id, {
+                    allBooks.set(id, { id: id, title: el.querySelector('h6').textContent, author: el.querySelector('p').textContent, cover: el.dataset.bookCover });
-                        id: id,
-                        title: el.querySelector('h6').textContent,
-                        author: el.querySelector('p').textContent,
-                        cover: el.dataset.bookCover
-                    });
                 });
 
                 const daftarBukuPinjamEl = document.getElementById('daftarBukuPinjam');
@@ -187,21 +186,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 = '';
-
+                    emptyStateBukuEl.style.display = selectedBookIds.size === 0 ? 'block' : 'none';
-                    if (selectedBookIds.size === 0) {
-                        emptyStateBukuEl.style.display = 'block';
-                    } else {
-                        emptyStateBukuEl.style.display = '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;">
@@ -209,37 +201,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})">
+                                <button type="button" class="btn btn-sm btn-outline-danger remove-book" onclick="removeBook(${id})"><i class="bi bi-trash"></i></button>
-                                    <i class="bi bi-trash"></i>
+                            </div>`;
-                                </button>
-                            </div>
-                        `;
                         daftarBukuPinjamEl.insertAdjacentHTML('beforeend', itemHtml);
-
+                        hiddenInputsEl.insertAdjacentHTML('beforeend', `<input type="hidden" name="buku_ids[]" value="${id}">`);
-                        const inputHtml = `<input type="hidden" name="buku_ids[]" value="${id}">`;
-                        hiddenInputsEl.insertAdjacentHTML('beforeend', inputHtml);
                     });
-
                     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);
 
@@ -248,8 +228,8 @@ function renderSelectedBooks() {
                         checkbox.checked = false;
                         itemElement.style.background = 'transparent';
                     } else {
-                        if (selectedBookIds.size >= MAX_BOOKS) {
+                        if (roleUser === 'siswa' && selectedBookIds.size >= MAX_BOOKS_SISWA) {
-                            alert(`Maaf, Anda hanya dapat memilih maksimal ${MAX_BOOKS} buku.`);
+                            alert(`Maaf, role Siswa hanya dapat meminjam maksimal ${MAX_BOOKS_SISWA} buku secara bersamaan.`);
                             return;
                         }
 
@@ -260,38 +240,75 @@ function renderSelectedBooks() {
                     renderSelectedBooks();
                 }
 
-                // Global function untuk remove 
                 window.removeBook = function(id) {
-                    const stringId = String(id);
+                    selectedBookIds.delete(String(id));
-                    selectedBookIds.delete(stringId);
+                    const itemElement = document.querySelector(`.book-option[data-book-id="${id}"] .book-item-list`);
-
-                    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');
+                // Pencarian
-                form.reset();
+                document.getElementById('searchBuku').addEventListener('keyup', function() {
-
+                    const searchTerm = this.value.toLowerCase();
-                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;
+                        const title = el.dataset.bookTitle;
-                    el.querySelector('.book-item-list').style.background = 'transparent';
+                        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

resources/views/admin/peminjaman/index.blade.php

@@ -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">
+        <div class="d-flex align-items-center gap-2">
-            <i class="bi bi-plus-circle-fill me-2"></i>Buat Peminjaman Manual
+            <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"
+                <table id="peminjamanTable" class="table table-striped table-hover nowrap dt-responsive" style="width:100%">
-                    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) {
+                        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 =
+                        $statusText = 'Terlambat ' . $tenggat->startOfDay()->diffInDays($now->startOfDay()) . ' hari';
-                                        '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
+                                <span class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjaman'] }}</span>
-                                        class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjaman'] }}</span>
                             </td>
                             <td>
                                 <div class="fw-bold">{{ $transaksi['peminjam'] }}</div>
@@ -85,70 +98,60 @@ class="badge bg-primary-subtle text-primary fw-bold">{{ $transaksi['id_peminjama
                         </tr>
 
                         {{-- MODAL PENGEMBALIAN --}}
-                            <div class="modal fade" id="modalPengembalian-{{ $transaksi['id_peminjaman'] }}"
+                        <div class="modal fade" id="modalPengembalian-{{ $transaksi['id_peminjaman'] }}" tabindex="-1" aria-hidden="true">
-                                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
+                                        <h5 class="modal-title fw-bold">Proses Pengembalian ({{ count($transaksi['books']) }} Buku)</h5>
-                                                ({{ count($transaksi['books']) }} Buku)
+                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                                            </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:
+                                                <span>Peminjam: <strong>{{ $transaksi['peminjam'] }}</strong></span>
-                                                        <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 book-return-item" data-book-id="{{ $buku['id'] }}">
                                             <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
+                                                        <label class="form-label small text-muted mb-1">Kondisi Buku</label>
-                                                                    Buku</label>
                                                         <div class="d-flex gap-3">
                                                             <div class="form-check">
-                                                                        <input class="form-check-input radio-kondisi"
+                                                                <input class="form-check-input radio-kondisi" type="radio" name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}" value="baik" checked>
-                                                                            type="radio"
+                                                                <label class="form-check-label small">Baik</label>
-                                                                            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"
+                                                                <input class="form-check-input radio-kondisi" type="radio" name="kondisi_{{ $buku['id'] }}_{{ $transaksi['id_peminjaman'] }}" value="rusak">
-                                                                            type="radio"
+                                                                <label class="form-check-label small">Rusak/Hilang</label>
-                                                                            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
+                                                        <label class="form-label small text-muted mb-1">Denda Kerusakan</label>
-                                                                    Kerusakan</label>
+                                                        <input type="number" class="form-control form-control-sm denda-rusak-input" placeholder="0">
-                                                                <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">
+                                                        <label class="form-label small text-muted mb-1"><i class="bi bi-pencil-square me-1"></i>Catatan Petugas</label>
-                                                                    <i class="bi bi-pencil-square me-1"></i>Catatan
+                                                        <textarea class="form-control form-control-sm" rows="2" placeholder="Contoh: Ada coretan di halaman 10, Cover sedikit terlipat..."></textarea>
-                                                                    Petugas
-                                                                </label>
-                                                                <textarea class="form-control form-control-sm" rows="2"
-                                                                    placeholder="Contoh: Ada coretan di halaman 10, Cover sedikit terlipat, dll..."></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>
@@ -156,12 +159,14 @@ class="form-control form-control-sm denda-rusak-input"
 
                                         <hr>
 
+                                        @if(!$isGuru)
                                         <div class="d-flex justify-content-between align-items-center mb-3">
                                             <span>Denda Keterlambatan ({{ $statusText }})</span>
                                             @php
                                             $isGuru = ($transaksi['role'] ?? '') === 'guru';
                                             $dendaTelat = 0;
                                             if ($isTerlambat && !$isGuru) {
+                                            if ($isTerlambat && !$isGuru) {
                                             $hari = $tenggat->startOfDay()->diffInDays($now->startOfDay());
                                             $dendaTelat = $hari * 1000;
                                             }
@@ -180,29 +185,22 @@ class="form-control form-control-sm denda-rusak-input"
                                             @endif
                                         </div>
 
-                                            <div
+                                        <div class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opacity-10 p-2 rounded">
-                                                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">
+                                            <strong class="text-danger fs-5 total-denda-display">Rp {{ number_format($dendaTelat, 0, ',', '.') }}</strong>
-                                                    Rp {{ number_format($dendaTelat, 0, ',', '.') }}
-                                                </strong>
                                         </div>
+                                        @endif
 
-                                            <div class="form-check form-switch mb-0">
+                                        <div class="form-check form-switch mb-0 mt-3">
-                                                <input class="form-check-input" type="checkbox" role="switch" checked
+                                            <input class="form-check-input" type="checkbox" role="switch" checked id="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                    id="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
+                                            <label class="form-check-label small" for="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                <label class="form-check-label small"
+                                                Kirim <strong>Bukti Pengembalian</strong> ke WhatsApp
-                                                    for="waStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                    Kirim <strong>Bukti Pengembalian</strong> ke WhatsApp siswa
                                             </label>
                                         </div>
                                         <div class="form-check form-switch mb-0">
-                                                <input class="form-check-input email-toggle" type="checkbox"
+                                            <input class="form-check-input email-toggle" type="checkbox" role="switch" checked id="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                    role="switch" checked
+                                            <label class="form-check-label small" for="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                    id="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
+                                                Kirim <strong>Bukti Pengembalian</strong> ke Email
-                                                <label class="form-check-label small"
-                                                    for="emailStrukToggle-{{ $transaksi['id_peminjaman'] }}">
-                                                    Kirim Bukti Pengembalian</strong> ke Email
                                             </label>
                                         </div>
                                     </div>
@@ -237,7 +235,7 @@ class="d-flex justify-content-between align-items-center mb-3 bg-danger bg-opaci
                 pageLength: 10,
                 order: [
                     [0, 'asc']
-                    ],
+                ]
             });
         });
 
@@ -252,48 +250,38 @@ function formatRupiah(angka) {
 
             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;
                     }
                 });
-
+                totalDendaEl.textContent = formatRupiah(dendaKeterlambatan + totalDendaRusak);
-                    const totalDenda = dendaKeterlambatan + totalDendaRusak;
-                    totalDendaEl.textContent = formatRupiah(totalDenda);
             }
 
-                // Logic Radio Button Kondisi Buku
+            document.querySelectorAll('.radio-kondisi').forEach(radio => {
-                const radioKondisi = document.querySelectorAll('.radio-kondisi');
-                radioKondisi.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') {
                         dendaRusakWrapper.classList.remove('d-none');
                     } else {
                         dendaRusakWrapper.classList.add('d-none');
                         dendaRusakInput.value = 0;
                     }
-                        hitungTotalDenda(modal);
+                    hitungTotalDenda(this.closest('.modal'));
                 });
             });
 
-                // Logic Input Denda Rusak
+            document.querySelectorAll('.denda-rusak-input').forEach(input => {
-                const dendaRusakInputs = document.querySelectorAll('.denda-rusak-input');
-                dendaRusakInputs.forEach(input => {
                 input.addEventListener('input', function() {
-                        const modal = this.closest('.modal');
+                    hitungTotalDenda(this.closest('.modal'));
-                        hitungTotalDenda(modal);
                 });
             });
         });
@@ -307,7 +295,6 @@ function hitungTotalDenda(modal) {
             const isWaChecked = modalEl.find('input[role="switch"][id^="waStrukToggle"]').is(':checked');
 
             modalInstance.hide();
-
             modernSwal.fire({
                 title: 'Selesaikan Transaksi?',
                 text: `Buku dari ${nama} akan ditandai sudah kembali.`,
@@ -317,7 +304,6 @@ function hitungTotalDenda(modal) {
                 cancelButtonText: 'Batal'
             }).then((result) => {
                 if (result.isConfirmed) {
-                        // Loading Simpan DB
                     modernSwal.fire({
                         title: 'Menyimpan Data...',
                         timer: 800,
@@ -396,7 +382,8 @@ function hitungTotalDenda(modal) {
 
             function finishTransaction(returnsData, userId, waLink) {
                 $.ajax({
-                        url: '{{ route('admin.peminjaman.kembali') }}',
+                    url: '{{ route('
+                    admin.peminjaman.kembali ') }}',
                     method: 'POST',
                     data: {
                         _token: '{{ csrf_token() }}',

resources/views/admin/pengguna/create.blade.php

@@ -11,86 +11,173 @@
         <div class="col-md-10">
             <div class="card border-0 shadow-sm">
                 <div class="card-body p-4">
-                    <div class="card-body">
+                    <form action="{{ route('admin.pengguna.store') }}" method="POST" id="formPengguna">
-                        <form action="{{ route('admin.pengguna.store') }}" method="POST">
                         @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()">
+                                <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' : '' }}>
+                                    Penjaga Perpustakaan</option>
+                            </select>
+                            @error('role')
+                            <div class="invalid-feedback">{{ $message }}</div>
+                            @enderror
+                        </div>
+
+                        {{-- Bagian Form Dinamis --}}
+                        <div id="dynamic-form" class="d-none">
+
                             <div class="mb-3">
                                 <label for="nama_lengkap" class="form-label">Nama Lengkap</label>
-                                <input type="text" name="nama_lengkap" class="form-control" id="nama_lengkap"
+                                <input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
-                                    placeholder="Masukkan nama lengkap" required>
+                                    id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required>
                             </div>
+
                             <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>
+                                @enderror
+                            </div>
+
+                            <div class="row">
+                                <div class="col-md-6 mb-3">
                                     <label for="email" class="form-label">Email</label>
-                                <input type="email" name="email" class="form-control" id="email"
+                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
-                                    placeholder="Masukkan alamat email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Masukkan alamat email yang valid">
+                                        id="email" name="email" value="{{ old('email') }}" required>
+                                    @error('email')
+                                    <div class="invalid-feedback">{{ $message }}</div>
+                                    @enderror
                                 </div>
-                            <div class="mb-3">
+                                <div class="col-md-6 mb-3">
-                                <label for="nomor_induk" class="form-label">Nomor Induk (NISN/NUPTK)</label>
+                                    <label for="no_hp" class="form-label">No. Handphone</label>
-                                <input type="text" name="nomor_induk" class="form-control numeric-only" id="nomor_induk" 
+                                    <input type="text" class="form-control" id="no_hp" name="no_hp"
-                                    placeholder="Masukkan NISN atau NUPTK" inputmode="numeric">
+                                        value="{{ old('no_hp') }}" placeholder="Contoh: 08123456789">
                                 </div>
-                            <div class="mb-3">
-                                <label for="role" class="form-label">Role</label>
-                                <select name="role" class="form-select" id="role" required>
-                                    <option value="" selected>Pilih role...</option>
-                                    <option value="siswa">Siswa</option>
-                                    <option value="guru">Guru</option>
-                                    <option value="penjaga perpus">Penjaga Perpus</option>
-                                </select>
                             </div>
-                            <div class="mb-3" id="kelas-container" style="display: none;">
+
-                                <label for="kelas" class="form-label">Kelas (jika siswa)</label>
+                            <div class="row" id="field_siswa_only" style="display: none;">
-                                <input type="text" name="kelas" class="form-control" id="kelas" placeholder="Contoh: X IPA 1">
+                                <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') }}" placeholder="Contoh: XII RPL 1">
                                 </div>
-                            <div class="mb-3">
+                                <div class="col-md-6 mb-3">
-                                <label for="phone" class="form-label">Nomor HP</label>
+                                    <label for="golongan" class="form-label">Golongan</label>
-                                <input type="text" name="phone" class="form-control numeric-only" id="phone" placeholder="Masukkan nomor HP" inputmode="numeric">
+                                    <input type="text" class="form-control" id="golongan" name="golongan"
+                                        value="{{ old('golongan') }}" placeholder="Contoh: A/B">
                                 </div>
+                            </div>
+
+                            <hr>
+
                             <div class="row">
                                 <div class="col-md-6 mb-3">
                                     <label for="password" class="form-label">Password</label>
-                                    <input type="password" name="password" class="form-control" id="password" required>
+                                    <div class="input-group has-validation">
+                                        <input type="password"
+                                            class="form-control @error('password') is-invalid @enderror" id="password"
+                                            name="password">
+                                        <button class="btn btn-outline-secondary toggle-password" type="button"
+                                            data-target="password">
+                                            <i class="bi bi-eye" id="icon-password"></i>
+                                        </button>
+                                        @error('password')
+                                        <div class="invalid-feedback">{{ $message }}</div>
+                                        @enderror
                                     </div>
+                                </div>
+
                                 <div class="col-md-6 mb-3">
                                     <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
-                                    <input type="password" name="password_confirmation" class="form-control" id="password_confirmation" required>
+                                    <div class="input-group">
+                                        <input type="password" class="form-control" id="password_confirmation"
+                                            name="password_confirmation">
+                                        <button class="btn btn-outline-secondary toggle-password" type="button"
+                                            data-target="password_confirmation">
+                                            <i class="bi bi-eye" id="icon-password_confirmation"></i>
+                                        </button>
                                     </div>
                                 </div>
-                            <hr>
+                            </div>
-                            <div class="d-flex justify-content-end">
+
-                                <button type="submit" class="btn btn-primary">Simpan Pengguna</button>
+                            <div class="d-flex justify-content-end mt-3">
+                                <button type="submit" class="btn btn-primary px-4">Simpan Pengguna</button>
+                            </div>
                         </div>
                     </form>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    @push('scripts')
     <script>
-                            document.addEventListener('DOMContentLoaded', function() {
+        function toggleFields() {
-                                // Numeric only input
+            const role = document.getElementById('role').value;
-                                document.querySelectorAll('.numeric-only').forEach(function(input) {
+            const dynamicForm = document.getElementById('dynamic-form');
-                                    input.addEventListener('input', function(e) {
+            const labelInduk = document.getElementById('label_nomor_induk');
-                                        this.value = this.value.replace(/[^0-9]/g, '');
+            const inputInduk = document.getElementById('nomor_induk');
-                                    });
+            const fieldSiswaOnly = document.getElementById('field_siswa_only');
-                                });
 
-                                // Dynamic Kelas Input
+            if (role) dynamicForm.classList.remove('d-none');
-                                const roleSelect = document.getElementById('role');
-                                const kelasContainer = document.getElementById('kelas-container');
 
-                                function toggleKelas() {
+            if (role === 'siswa') {
-                                    if (roleSelect.value === 'siswa') {
+                labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
-                                        kelasContainer.style.display = 'block';
+                inputInduk.placeholder = 'Masukkan NISN Siswa';
+                fieldSiswaOnly.style.display = 'flex';
+            } else if (role === 'guru') {
+                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
+                inputInduk.placeholder = 'Masukkan NIP/NIK Guru';
+                fieldSiswaOnly.style.display = 'none';
+            } else if (role === 'penjaga perpus') {
+                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
+                inputInduk.placeholder = 'Masukkan NIP/NIK Petugas';
+                fieldSiswaOnly.style.display = 'none';
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', toggleFields);
+
+        document.querySelectorAll('.toggle-password').forEach(function(button) {
+            button.addEventListener('click', function() {
+                const targetId = this.getAttribute('data-target');
+                const input = document.getElementById(targetId);
+                const icon = document.getElementById('icon-' + targetId);
+
+                if (input.type === 'password') {
+                    input.type = 'text';
+                    icon.classList.replace('bi-eye', 'bi-eye-slash');
                 } else {
-                                        kelasContainer.style.display = 'none';
+                    input.type = 'password';
-                                        document.getElementById('kelas').value = ''; // Reset value
+                    icon.classList.replace('bi-eye-slash', 'bi-eye');
                 }
-                                }
-
-                                roleSelect.addEventListener('change', toggleKelas);
-                                toggleKelas(); // Run on load
             });
+        });
+
+        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>
-                    </div>
+    @endpush
-                </div>
-            </div>
-        </div>
-    </div>
 </x-app-layout>

resources/views/admin/pengguna/edit.blade.php

@@ -11,104 +11,122 @@
         <div class="col-md-10">
             <div class="card border-0 shadow-sm">
                 <div class="card-body p-4">
-                    <div class="card-body">
+                    <form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST" id="formEditPengguna">
-                        <form action="{{ route('admin.pengguna.update', $pengguna->id) }}" method="POST">
                         @csrf
-                            @method('PUT')
+                        @method('PATCH')
+
+                        <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()">
+                                <option value="siswa" {{ old('role', $pengguna->role) == 'siswa' ? 'selected' : '' }}>Siswa</option>
+                                <option value="guru" {{ old('role', $pengguna->role) == 'guru' ? 'selected' : '' }}>Guru</option>
+                                <option value="penjaga perpus" {{ old('role', $pengguna->role) == 'penjaga perpus' ? 'selected' : '' }}>Penjaga Perpustakaan</option>
+                            </select>
+                            @error('role') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                        </div>
+
+                        <div id="dynamic-form">
                             <div class="mb-3">
                                 <label for="nama_lengkap" class="form-label">Nama Lengkap</label>
-                                <input type="text" name="nama_lengkap" class="form-control" id="nama_lengkap"
+                                <input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
-                                    value="{{ old('nama_lengkap', $pengguna->nama_lengkap) }}" required>
+                                    id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $pengguna->name) }}" required>
                             </div>
+
                             <div class="mb-3">
-                                <label for="email" class="form-label">Email</label>
+                                @php $oldNomorInduk = old('nomor_induk', $pengguna->role == 'siswa' ? $pengguna->nisn : $pengguna->nip); @endphp
-                                <input type="email" name="email" class="form-control" id="email"
+                                <label for="nomor_induk" class="form-label" id="label_nomor_induk">NISN / NIP</label>
-                                    value="{{ old('email', $pengguna->email) }}" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Masukkan alamat email yang valid">
+                                <input type="number" class="form-control @error('nomor_induk') is-invalid @enderror"
-                            </div>
+                                    id="nomor_induk" name="nomor_induk" value="{{ $oldNomorInduk }}" placeholder="Masukkan Nomor Induk">
-                            <div class="mb-3">
+                                @error('nomor_induk') <div class="invalid-feedback fw-bold">{{ $message }}</div> @enderror
-                                <label for="nomor_induk" class="form-label">Nomor Induk (NISN/NUPTK)</label>
-                                <input type="text" name="nomor_induk" class="form-control numeric-only" id="nomor_induk"
-                                    value="{{ old('nomor_induk', $pengguna->nomor_induk) }}" inputmode="numeric">
-                            </div>
-                            <div class="mb-3">
-                                <label for="role" class="form-label">Role</label>
-                                <select name="role" class="form-select" id="role" required>
-                                    <option value="">Pilih role...</option>
-                                    <option value="siswa" @if (old('role', $pengguna->role) == 'siswa') selected @endif>Siswa
-                                    </option>
-                                    <option value="guru" @if (old('role', $pengguna->role) == 'guru') selected @endif>Guru
-                                    </option>
-                                    <option value="penjaga perpus" @if (old('role', $pengguna->role) == 'penjaga perpus') selected @endif>
-                                        Penjaga Perpus</option>
-                                </select>
-                            </div>
-                            <div class="mb-3" id="kelas-container" style="display: none;">
-                                <label for="kelas" class="form-label">Kelas (jika siswa)</label>
-                                <input type="text" name="kelas" class="form-control" id="kelas"
-                                    value="{{ old('kelas', $pengguna->kelas) }}">
-                            </div>
-                            <div class="mb-3">
-                                <label for="phone" class="form-label">Nomor HP</label>
-                                <input type="text" name="phone" class="form-control numeric-only" id="phone"
-                                    value="{{ old('phone', $pengguna->phone) }}" inputmode="numeric">
                             </div>
+
                             <div class="row">
                                 <div class="col-md-6 mb-3">
-                                    <label for="password" class="form-label">Password Baru</label>
+                                    <label for="email" class="form-label">Email</label>
-                                    <input type="password" name="password" class="form-control" id="password"
+                                    <input type="email" class="form-control @error('email') is-invalid @enderror"
-                                        placeholder="Kosongkan jika tidak diubah">
+                                        id="email" name="email" value="{{ old('email', $pengguna->email) }}" required>
+                                    @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                 </div>
                                 <div class="col-md-6 mb-3">
-                                    <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
+                                    <label for="no_hp" class="form-label">No. Handphone</label>
-                                    <input type="password" name="password_confirmation" class="form-control" id="password_confirmation">
+                                    <input type="text" class="form-control" id="no_hp" name="no_hp" value="{{ old('no_hp', $pengguna->no_hp) }}">
                                 </div>
                             </div>
+
+                            <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) }}">
+                                </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) }}">
+                                </div>
+                            </div>
+
                             <hr>
-                            <div class="d-flex justify-content-end">
+
-                                <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
+                            <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>
+                                    <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="Kosongkan jika tidak diubah">
+                                    @error('password') <div class="invalid-feedback">{{ $message }}</div> @enderror
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label for="password_confirmation" class="form-label">Konfirmasi Password Baru</label>
+                                    <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Ulangi password baru">
+                                </div>
+                            </div>
+
+                            <div class="d-flex justify-content-end mt-3">
+                                <button type="submit" class="btn btn-primary px-4">Simpan Perubahan</button>
+                            </div>
                         </div>
                     </form>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    @push('scripts')
     <script>
-                            document.addEventListener('DOMContentLoaded', function() {
+        function toggleFields() {
-                                // Numeric only input
+            const role = document.getElementById('role').value;
-                                document.querySelectorAll('.numeric-only').forEach(function(input) {
+            const labelInduk = document.getElementById('label_nomor_induk');
-                                    input.addEventListener('input', function(e) {
+            const inputInduk = document.getElementById('nomor_induk');
-                                        this.value = this.value.replace(/[^0-9]/g, '');
+            const fieldSiswaOnly = document.getElementById('field_siswa_only');
-                                    });
-                                });
 
-                                // Dynamic Kelas Input
+            if (role === 'siswa') {
-                                const roleSelect = document.getElementById('role');
+                labelInduk.innerHTML = 'NISN <span class="text-danger">*</span>';
-                                const kelasContainer = document.getElementById('kelas-container');
+                inputInduk.placeholder = 'Masukkan NISN Siswa';
-                                
+                fieldSiswaOnly.style.display = 'flex';
-                                function toggleKelas() {
+            } else if (role === 'guru') {
-                                    if (roleSelect.value === 'siswa') {
+                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
-                                        kelasContainer.style.display = 'block';
+                inputInduk.placeholder = 'Masukkan NIP/NIK Guru';
-                                    } else {
+                fieldSiswaOnly.style.display = 'none';
-                                        kelasContainer.style.display = 'none';
+            } else if (role === 'penjaga perpus') {
-                                        
+                labelInduk.innerHTML = 'NIP / NIK <span class="text-danger">*</span>';
-                                        // Optional: Clear value only if changing to non-student to prevent accidental data loss on edit? 
+                inputInduk.placeholder = 'Masukkan NIP/NIK Petugas';
-                                        // For edit, maybe better NOT to clear immediately unless user saves? 
+                fieldSiswaOnly.style.display = 'none';
-                                        // But per request "hide input", clearing might be expected behavior if they change role.
-                                        // I'll keep it simple: just hide. If they change role to Teacher, they probably want to remove class.
-                                        // But resetting value on edit might exist data. Let's just hide for now. 
-                                        // Actually, if they SUBMIT, and it is hidden, logic might be needed to clear it in backend or here.
-                                        // For now, mirroring create behavior (reset logic mainly). 
-                                        // Wait, on Edit, if I load as Guru, it hides. If I change to Siswa, it shows (empty or old value).
-                                        // If I change Siswa -> Guru, it hides. 
-                                        // For safety in Edit, I won't force clear value on toggle to avoid losing data if they accidentally switch.
-                                        // Just hide.
             }
         }
+        document.addEventListener('DOMContentLoaded', toggleFields);
 
-                                roleSelect.addEventListener('change', toggleKelas);
+        document.getElementById('formEditPengguna').addEventListener('submit', function() {
-                                toggleKelas(); // Run on load
+            modernSwal.fire({
+                title: 'Menyimpan Perubahan...',
+                allowOutsideClick: false,
+                didOpen: () => Swal.showLoading()
             });
+        });
+
+        @if(session('success'))
+        Toast.fire({
+            icon: 'success',
+            title: 'Berhasil',
+            text: '{{ session("success") }}'
+        });
+        @endif
     </script>
-                    </div>
+    @endpush
-                </div>
-            </div>
-        </div>
-    </div>
 </x-app-layout>

resources/views/admin/pengguna/index.blade.php

@@ -1,66 +1,102 @@
 <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">
+            <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>
+
+                <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">
-                    <table class="table table-bordered" width="100%" cellspacing="0">
+                    <table class="table table-bordered align-middle" width="100%" cellspacing="0">
-                        <thead>
+                        <thead class="table-light">
                             <tr>
                                 <th>No</th>
                                 <th>Nama Lengkap</th>
-                                <th>Email</th>
+                                <th>Kontak (Email & HP)</th>
                                 <th>Role</th>
-                                <th>Nomor Induk</th>
+                                <th>NISN / NIP / NIK</th>
-                                <th>Aksi</th>
+                                <th>Kelas / Golongan</th>
+                                <th class="text-center">Aksi</th>
                             </tr>
                         </thead>
                         <tbody>
                             @forelse($users as $index => $user)
                             <tr>
-                                <td>{{ $index + 1 }}</td>
+                                <td>{{ $users->firstItem() + $index }}</td>
-                                <td>{{ $user->name }}</td>
+                                <td class="fw-bold">{{ $user->name }}</td>
-                                <td>{{ $user->email }}</td>
                                 <td>
-                                    <span class="badge {{ $user->role == 'guru' ? 'bg-info' : 'bg-primary' }}">
+                                    <div>{{ $user->email }}</div>
-                                        {{ ucfirst($user->role) }}
+                                    <div class="small text-muted"><i class="bi bi-telephone me-1"></i>{{ $user->no_hp ??
-                                    </span>
+                                        '-' }}</div>
                                 </td>
                                 <td>
-                                    {{ $user->nomor_induk ?? '-' }}
+                                    @if($user->role == 'guru')
+                                    <span class="badge bg-info text-dark">Guru</span>
+                                    @elseif($user->role == 'siswa')
+                                    <span class="badge bg-primary">Siswa</span>
+                                    @else
+                                    <span class="badge bg-secondary">Petugas</span>
+                                    @endif
+                                </td>
+                                <td class="font-monospace text-primary">
+                                    {{ $user->nisn ?? ($user->nip ?? '-') }}
                                 </td>
                                 <td>
-                                    <div class="d-flex gap-2">
+                                    @if($user->role == 'siswa')
-                                        <a href="{{ route('admin.pengguna.edit', $user->id) }}" class="btn btn-sm btn-warning">
+                                    <span class="badge bg-light text-black border">Kelas: {{ $user->kelas ?? '-' }} / {{
+                                        $user->golongan ?? '-' }}</span>
+                                    @else
+                                    -
+                                    @endif
+                                </td>
+                                <td class="text-center">
+                                    <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?')">
+
+                                    <button type="button" class="btn btn-sm btn-secondary btn-reset-password"
+                                        data-nama="{{ $user->name }}" title="Reset Password (OTP)">
+                                        <i class="bi bi-key-fill"></i>
+                                    </button>
+
+                                    <form action="{{ route('admin.pengguna.destroy', $user->id) }}" method="POST"
+                                        class="d-inline form-delete-user" data-nama="{{ $user->name }}">
                                         @csrf
                                         @method('DELETE')
-                                            <button type="submit" class="btn btn-sm btn-danger">
+                                        <button type="button" class="btn btn-sm btn-danger btn-hapus"><i
-                                                <i class="bi bi-trash"></i> Hapus
+                                                class="bi bi-trash"></i></button>
-                                            </button>
                                     </form>
-                                    </div>
                                 </td>
                             </tr>
                             @empty
                             <tr>
-                                <td colspan="6" class="text-center">Belum ada pengguna terdaftar.</td>
+                                <td colspan="7" class="text-center py-4 text-muted">Belum ada pengguna terdaftar.</td>
                             </tr>
                             @endforelse
                         </tbody>
                     </table>
-
-                    {{-- Pagination --}}
                     <div class="mt-3">
                         {{ $users->links() }}
                     </div>
@@ -70,14 +106,13 @@
 
         <hr class="my-5 border-4">
 
+        {{-- 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">
+                <h4 class="fw-bold text-success mb-1"><i class="bi bi-database-lock me-2"></i>Data Induk (Whitelist)
-                    <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>
+                <p class="text-muted mb-0">Daftar NIP/NISN/NIK 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>
@@ -86,15 +121,15 @@
         <div class="card shadow mb-4 border-left-success">
             <div class="card-body">
                 <div class="table-responsive">
-                    <table class="table table-hover align-middle mb-0">
+                    <table class="table table-hover table-bordered align-middle mb-0">
                         <thead class="table-light">
                             <tr>
                                 <th>No</th>
                                 <th>NIP / NISN</th>
                                 <th>Nama Pemilik</th>
-                                <th>Role</th>
+                                <th class="text-center">Role</th>
                                 <th class="text-center">Status Akun</th>
-                                <th class="text-end">Aksi</th>
+                                <th class="text-center">Aksi</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -103,32 +138,34 @@
                                 <td>{{ $index + 1 }}</td>
                                 <td class="fw-bold font-monospace">{{ $item->nomor_induk }}</td>
                                 <td>{{ $item->nama_pemilik }}</td>
-                                <td>
-                                    <span class="badge {{ $item->role == 'guru' ? 'bg-info' : 'bg-secondary' }}">
-                                        {{ ucfirst($item->role) }}
-                                    </span>
-                                </td>
                                 <td class="text-center">
-                                    {{-- Cek apakah user sudah daftar pakai NIP ini --}}
+                                    @if($item->role == 'guru')
-                                    @php
+                                    <span class="badge bg-info text-dark">Guru</span>
-                                    $isRegistered = \App\Models\User::where('nomor_induk', $item->nomor_induk)->exists();
+                                    @elseif($item->role == 'siswa')
-                                    @endphp
+                                    <span class="badge bg-primary">Siswa</span>
-
-                                    @if($isRegistered)
-                                    <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">
+                                    <span class="badge bg-secondary">Petugas</span>
-                                        <i class="bi bi-hourglass-split me-1"></i>Belum Daftar
-                                    </span>
                                     @endif
                                 </td>
-                                <td class="text-end">
+                                <td class="text-center">
-                                    <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.');">
+                                    @php
+                                    $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>
+                                    @else
+                                    <span class="badge bg-warning text-dark"><i
+                                            class="bi bi-hourglass-split me-1"></i>Belum Daftar</span>
+                                    @endif
+                                </td>
+                                <td class="text-center">
+                                    <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>
@@ -136,9 +173,8 @@
                             </tr>
                             @empty
                             <tr>
-                                <td colspan="6" class="text-center py-4 text-muted">
+                                <td colspan="6" class="text-center py-4 text-muted">Belum ada data whitelist. Silakan
-                                    Belum ada data whitelist. Silakan tambah data.
+                                    tambah data.</td>
-                                </td>
                             </tr>
                             @endforelse
                         </tbody>
@@ -146,7 +182,6 @@
                 </div>
             </div>
         </div>
-
     </div>
 
     {{-- MODAL TAMBAH DATA INDUK --}}
@@ -157,30 +192,31 @@
                     <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>
                                 <option value="siswa">Siswa</option>
                                 <option value="guru">Guru</option>
+                                <option value="penjaga perpus">Petugas Perpustakaan</option>
                             </select>
                         </div>
-
                         <div class="mb-3">
-                            <label class="form-label">NIP / NISN</label>
+                            <label class="form-label">NIP / NISN / NIK</label>
-                            <input type="number" name="nomor_induk" class="form-control" 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">
@@ -191,4 +227,122 @@
             </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
+
+        // GENERATE OTP & LINK RESET 
+        $(document).on('click', '.btn-reset-password', function() {
+            const nama = $(this).data('nama');
+            const otpCode = "678901";
+            const linkReset = "{{ route('reset.password-request') }}";
+
+            modernSwal.fire({
+                title: 'Generate OTP Reset?',
+                html: `Anda akan membuat Token Reset Password untuk <b>${nama}</b>.`,
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonText: 'Ya, Generate',
+                cancelButtonText: 'Batal',
+                confirmButtonColor: '#0d6efd'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    modernSwal.fire({
+                        title: 'Generating...',
+                        timer: 1000,
+                        didOpen: () => Swal.showLoading()
+                    }).then(() => {
+                        modernSwal.fire({
+                            title: 'OTP Berhasil Dibuat!',
+                            html: `
+                                    <div class="text-start bg-light p-3 rounded border">
+                                        <p class="mb-1 small text-muted">Kode OTP:</p>
+                                        <h3 class="text-primary fw-bold letter-spacing-1 mb-3">${otpCode}</h3>
+                                        <p class="mb-1 small text-muted">Link Reset:</p>
+                                        <div class="input-group">
+                                            <input type="text" class="form-control form-control-sm" value="${linkReset}" readonly>
+                                        </div>
+                                    </div>
+                                    <div class="mt-3 small text-muted">
+                                        Silakan salin Kode OTP & Link di atas lalu kirim ke WhatsApp user.
+                                    </div>
+                                `,
+                            icon: 'success',
+                            confirmButtonText: 'Selesai'
+                        });
+                    });
+                }
+            });
+        });
+    </script>
+    @endpush
 </x-app-layout>

resources/views/admin/pengumuman/create.blade.php

@@ -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>
@@ -43,4 +43,28 @@
             </div>
         </div>
     </div>
+
+    @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>

resources/views/admin/pengumuman/edit.blade.php

@@ -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>
@@ -48,4 +48,29 @@
             </div>
         </div>
     </div>
+
+    @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>

resources/views/admin/pengumuman/index.blade.php

@@ -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>
@@ -49,9 +49,9 @@
                             </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

resources/views/admin/rekomendasi/create.blade.php

@@ -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.rekomendasi.index') }}" class="btn btn-outline-secondary me-3">
             <i class="bi bi-arrow-left"></i>
         </a>
         <h3 class="my-0 fw-bold">Formulir Tambah Rekomendasi</h3>

resources/views/admin/rekomendasi/edit.blade.php

@@ -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.rekomendasi.index') }}" class="btn btn-outline-secondary me-3">
             <i class="bi bi-arrow-left"></i>
         </a>
         <h3 class="my-0 fw-bold">Formulir Edit Rekomendasi</h3>

resources/views/admin/rekomendasi/index.blade.php

@@ -3,12 +3,22 @@
     <div class="card shadow-sm border-0">
         <div class="card-header bg-white d-flex justify-content-between align-items-center">
             <h5 class="my-0 fw-bold">Kelola Rekomendasi Pembelajaran</h5>
-            <a href="{{ route('admin.rekomendasi.create') }}" class="btn btn-primary"><i class="bi bi-plus-circle-fill me-2"></i>Buat Rekomendasi</a>
+            <a href="{{ route('admin.rekomendasi.create') }}" class="btn btn-primary">
+                <i class="bi bi-plus-circle-fill me-2"></i>Buat Rekomendasi
+            </a>
         </div>
         <div class="card-body">
             <div class="table-responsive">
                 <table class="table table-hover align-middle">
-                    <thead><tr><th>No</th><th>Thumbnail</th><th>Judul</th><th>Kategori</th><th>Aksi</th></tr></thead>
+                    <thead class="table-light">
+                        <tr>
+                            <th>No</th>
+                            <th>Thumbnail</th>
+                            <th>Judul</th>
+                            <th>Kategori</th>
+                            <th class="text-center">Aksi</th>
+                        </tr>
+                    </thead>
                     <tbody>
                         @foreach($semuaRekomendasi as $item)
                         <tr>

resources/views/auth/admin-login.blade.php

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

resources/views/auth/login.blade.php

@@ -10,60 +10,98 @@
         @csrf
         <input type="hidden" name="role" value="{{ $role }}">
 
+        {{-- HEADER LOGIN --}}
         <div class="text-center mb-4">
-            {{-- Judul dinamis --}}
+            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
-            <h3 class="fw-bold text-primary">Login {{ Str::title($role) }}</h3>
+                style="width: 70px; height: 70px;">
-            <p class="text-muted">
+                <i class="bi bi-shield-lock-fill fs-1"></i>
+            </div>
+            <h3 class="fw-bold text-dark">Login {{ Str::title($role) }}</h3>
+            <p class="text-muted small">
                 @if ($role == 'siswa')
-                    Masukan NISN dan kata sandi Anda.
+                Silakan masukkan <b>NISN</b> dan kata sandi.
                 @else
-                    Masukan NIP dan kata sandi Anda.
+                Silakan masukkan <b>NIP/NIK</b> dan kata sandi.
                 @endif
             </p>
         </div>
 
-        {{-- Form dinamis --}}
+        {{-- INPUT USERNAME (NISN/NIP) --}}
-        @if ($role == 'siswa')
         <div class="mb-3">
-                <label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
+            <label for="{{ $role == 'siswa' ? 'nisn' : 'nip' }}" class="form-label fw-semibold small">
-                <input id="nisn" class="form-control" type="text" name="nisn" required autofocus />
+                {{ $role == 'siswa' ? 'Nomor Induk Siswa Nasional (NISN)' : 'NIP/NIK' }}
-                <x-input-error :messages="$errors->get('nisn')" class="mt-2" /> 
+            </label>
-            </div> 
-        @else
-            <div class="mb-3">
-                <label for="nip" class="form-label">Nomor Induk Pegawai (NIP)</label>
-                <input id="nip" class="form-control" type="text" name="nip" required autofocus />
-                <x-input-error :messages="$errors->get('nip')" class="mt-2" /> 
-            </div>
-        @endif
-
-        <div class="mb-3">
-            <label for="password" class="form-label">Kata Sandi</label>
             <div class="input-group">
-                <input id="password" class="form-control" type="password" name="password" required />
+                @if ($role == 'siswa')
-                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
+                <input id="nisn" class="form-control" type="text" name="nisn" placeholder="Masukan NISN" required autofocus />
+                @else
+                <input id="nip" class="form-control" type="text" name="nip" placeholder="Masukan NIP/NIK" required autofocus />
+                @endif
+            </div>
+            {{-- Error Message --}}
+            @if ($role == 'siswa')
+            <x-input-error :messages="$errors->get('nisn')" class="mt-1 small text-danger" />
+            @else
+            <x-input-error :messages="$errors->get('nip')" class="mt-1 small text-danger" />
+            @endif
+        </div>
+
+        {{-- INPUT PASSWORD --}}
+        <div class="mb-4">
+            <div class="d-flex justify-content-between align-items-center">
+                <label for="password" class="form-label fw-semibold small">Kata Sandi</label>
+            </div>
+            <div class="input-group">
+                <input id="password" class="form-control border-end-0" type="password"
+                    name="password" placeholder="Masukan kata sandi" required />
+                <button class="btn btn-light border border-start-0 text-muted" type="button" id="togglePassword">
                     <i class="bi bi-eye-slash-fill"></i>
                 </button>
             </div>
+            <x-input-error :messages="$errors->get('password')" class="mt-1 small text-danger" />
         </div>
 
-        <div class="d-grid mt-4">
+        {{-- TOMBOL LOGIN --}}
-            <button type="submit" class="btn btn-primary">Masuk</button>
+        <div class="d-grid mb-4">
+            <button type="submit" class="btn btn-primary py-2 fw-medium shadow-sm">
+                Masuk
+            </button>
+        </div>
+
+        {{-- BANTUAN / LUPA PASSWORD --}}
+        <div class="bg-light p-3 rounded-3 text-center border border-dashed">
+            <p class="text-muted small mb-1">Mengalami kendala login?</p>
+            <a href="https://wa.me/6281234567890?text=Halo%20Admin,%20saya%20lupa%20kata%20sandi%20akun%20saya."
+                target="_blank" class="text-decoration-none fw-bold text-success d-inline-flex align-items-center">
+                <i class="bi bi-whatsapp me-1"></i> Hubungi Petugas via WA
+            </a>
         </div>
 
-        {{-- Link href untuk ke Register --}}
         <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>
-            @else
-                Belum punya akun? 
-                <a href="{{ route('register', ['role' => 'guru']) }}" class="fw-semibold text-decoration-none">Daftar sebagai Guru</a>
-            @endif
-        </p>
-
-        <p class="mt-3 text-center text-muted small">
             Kembali ke <a href="/" class="fw-semibold text-decoration-none">halaman utama</a>.
         </p>
     </form>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const togglePassword = document.querySelector('#togglePassword');
+            const password = document.querySelector('#password');
+            const icon = togglePassword.querySelector('i');
+
+            if (togglePassword && password) {
+                togglePassword.addEventListener('click', function(e) {
+                    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+                    password.setAttribute('type', type);
+
+                    if (type === 'password') {
+                        icon.classList.remove('bi-eye-fill');
+                        icon.classList.add('bi-eye-slash-fill');
+                    } else {
+                        icon.classList.remove('bi-eye-slash-fill');
+                        icon.classList.add('bi-eye-fill');
+                    }
+                });
+            }
+        });
+    </script>
 </x-guest-layout>

resources/views/auth/register.blade.php

@@ -1,20 +1,20 @@
 <x-guest-layout>
+    <div class="mb-4 text-center">
+        <h4 class="fw-bold text-primary">Daftar Akun {{ ucfirst($role) }}</h4>
+        <p class="text-muted small">
+            Silakan isi data diri lengkap untuk mendaftar.
+        </p>
+    </div>
+
     <form method="POST" action="{{ route('register') }}">
         @csrf
 
-        {{-- Input tersembunyi untuk mengirimkan peran (role) ke backend --}}
         <input type="hidden" name="role" value="{{ $role }}">
 
-        <div class="text-center mb-4">
-            {{-- Judul dinamis --}}
-            <h3 class="fw-bold text-primary">Buat Akun {{ Str::title($role) }}</h3>
-            <p class="text-muted">Daftarkan diri Anda untuk mulai menjelajahi koleksi kami.</p>
-        </div>
-
-        {{-- Form Nama Lengkap (Umum) --}}
         <div class="mb-3">
-            <label for="name" class="form-label">Nama Lengkap</label>
+            <label class="form-label">Nama Lengkap</label>
-            <input id="name" class="form-control bg-body-tertiary @error('name') is-invalid @enderror" type="text" name="name" value="{{ old('name') }}" required autofocus autocomplete="name" />
+            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
+                value="{{ old('name') }}" required autofocus placeholder="Nama sesuai absen">
             @error('name')
             <div class="invalid-feedback fw-semibold">
                 <i class="bi bi-exclamation-circle-fill me-1"></i>
@@ -23,35 +23,48 @@
             @enderror
         </div>
 
-        {{-- Form dinamis (NISN untuk Siswa, NIP untuk Guru) --}}
+        <div class="mb-3">
+            <label class="form-label">
                 @if ($role == 'siswa')
-            <div class="mb-3">
+                NISN (Nomor Induk Siswa)
-                <label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
-                <input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror" type="text" name="nisn" value="{{ old('nisn') }}" required autocomplete="username" />
-                @error('nisn')
-                    <div class="invalid-feedback fw-semibold">
-                        <i class="bi bi-exclamation-circle-fill me-1"></i>
-                        {{ $message }}
-                    </div>
-                @enderror
-            </div>
                 @else
-            <div class="mb-3">
+                NIP / NIK Sekolah
-                <label for="nip" class="form-label">Nomor Induk Pegawai (NIP)</label>
+                @endif
-                <input id="nip" class="form-control bg-body-tertiary @error('nip') is-invalid @enderror" type="text" name="nip" value="{{ old('nip') }}" required autocomplete="username" />
+            </label>
-                @error('nip')
+
-                    <div class="invalid-feedback fw-semibold">
+            <input type="number" name="{{ $role == 'siswa' ? 'nisn' : 'nip' }}"
-                        <i class="bi bi-exclamation-circle-fill me-1"></i>
+                class="form-control @error($role == 'siswa' ? 'nisn' : 'nip') is-invalid @enderror"
-                        {{ $message }}
+                value="{{ old($role == 'siswa' ? 'nisn' : 'nip') }}" required placeholder="Cth: 1234567890">
-                    </div>
+
+            @error($role == 'siswa' ? 'nisn' : 'nip')
+            <div class="invalid-feedback">{{ $message }}</div>
+            @enderror
+        </div>
+
+        <div class="mb-3">
+            <label class="form-label">Email Aktif</label>
+            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
+                value="{{ old('email') }}" required placeholder="contoh@gmail.com">
+
+            <div class="form-text text-muted small">
+                <i class="bi bi-bell me-1"></i>
+                Notifikasi denda & peminjaman akan dikirim ke email ini.
+            </div>
+
+            @error('email')
+            <div class="invalid-feedback">{{ $message }}</div>
             @enderror
         </div>
-        @endif
 
-        {{-- Form Password (Umum) --}}
         <div class="mb-3">
             <label for="password" class="form-label">Password</label>
-            <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror" type="password" name="password" required autocomplete="new-password" />
+            <div class="input-group">
+                <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror"
+                    type="password" name="password" required autocomplete="new-password" />
+                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
+                    <i class="bi bi-eye-slash-fill"></i>
+                </button>
+            </div>
             @error('password')
             <div class="invalid-feedback fw-semibold">
                 <i class="bi bi-exclamation-circle-fill me-1"></i>
@@ -60,10 +73,15 @@
             @enderror
         </div>
 
-        {{-- Form Konfirmasi Password (Umum) --}}
         <div class="mb-3">
             <label for="password_confirmation" class="form-label">Konfirmasi Password</label>
-            <input id="password_confirmation" class="form-control bg-body-tertiary" type="password" name="password_confirmation" required autocomplete="new-password" />
+            <div class="input-group">
+                <input id="password_confirmation" class="form-control bg-body-tertiary" type="password"
+                    name="password_confirmation" required autocomplete="new-password" />
+                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
+                    <i class="bi bi-eye-slash-fill"></i>
+                </button>
+            </div>
         </div>
 
         <div class="d-grid mt-4">
@@ -75,7 +93,8 @@
         {{-- Link Login dinamis --}}
         <p class="mt-4 text-center text-muted small">
             Sudah punya akun?
-            <a href="{{ route('login', ['role' => $role]) }}" class="fw-semibold text-decoration-none">Masuk di sini</a>
+            <a href="{{ route('login', ['role' => $role]) }}" class="fw-semibold text-decoration-none">Masuk di
+                sini</a>
         </p>
     </form>
 </x-guest-layout>

resources/views/dashboard.blade.php

@@ -1,11 +1,6 @@
 @section('page-title', 'Beranda')
 <x-app-layout>
 
-    {{-- <button type="button" class="btn btn-sm btn-primary end-0">
-        <i class="bi bi-plus-circle me-1"></i>
-        Pinjam Buku Baru
-    </button> --}}
-
     {{-- CEK STATUS BANNED --}}
     @if (Auth::user()->is_banned)
         <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center mb-4" role="alert">
@@ -28,6 +23,7 @@
         </div>
     @endif
 
+    {{-- HERO SECTION --}}
     <div class="card border-0 shadow-sm rounded-4 my-4 p-4 position-relative" style="background-color: #CEDEFF;">
         <div class="row">
             <div class="col-12 col-md-8 p-4 p-md-5" style="z-index: 2;">
@@ -38,7 +34,7 @@
 
         <div class="position-absolute d-none d-md-block"
             style="top: -35px; right: 40px; width: 30%; max-width: 300px; z-index: 1;">
-            <img src="{{ asset('images/assets/vector-dashboard.svg') }}" alt="Ilustrasi Dashboard" class="img-fluid">
+            <img src="{{ asset('images/assets/vector-dashboard.svg') }}" alt="Ilustrasi Beranda" class="img-fluid">
         </div>
     </div>
 
@@ -214,11 +210,17 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
                 @forelse($bukuPinjamOffline as $buku)
                     <div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 3" x-transition>
                         <x-book-card :buku="$buku">
-                            <div
+                            @if($buku['sisa_hari'] < 0)
-                                class="d-flex align-items-center text-danger bg-white bg-opacity-75 rounded-2 px-2 py-1">
+                                <div class="d-flex align-items-center text-danger bg-danger-subtle rounded-2 px-2 py-1">
+                                    <i class="bi bi-exclamation-circle-fill me-2 shadow-md"></i>
+                                    <span class="fw-bold small">Terlambat: {{ abs($buku['sisa_hari']) }} hari</span>
+                                </div>
+                            @else
+                                <div class="d-flex align-items-center text-primary bg-primary-subtle rounded-2 px-2 py-1">
                                     <i class="bi bi-clock-fill me-2 shadow-md"></i>
                                     <span class="fw-bold small">Sisa: {{ $buku['sisa_hari'] }} hari</span>
                                 </div>
+                            @endif
                         </x-book-card>
                     </div>
                 @empty
@@ -312,7 +314,6 @@ class="d-flex gap-3 text-decoration-none text-dark mb-3">
         </div>
     @endif
 
-    <!-- Modals untuk Pengumuman-->
     <div class="modal fade" id="pengumumanModal" tabindex="-1" aria-labelledby="pengumumanModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-scrollable modal-lg">
@@ -345,7 +346,6 @@ class="d-flex gap-3 text-decoration-none text-dark mb-3">
         </div>
     </div>
 
-    <!-- Modals untuk Pemberitahuan-->
     <div class="modal fade" id="pemberitahuanModal" tabindex="-1" aria-labelledby="pemberitahuanModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-scrollable modal-lg">
@@ -386,7 +386,6 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
         </div>
     </div>
 
-    <!-- Modals untuk Rekomendasi Pembelajaran-->
     <div class="modal fade" id="rekomendasiModal" tabindex="-1" aria-labelledby="rekomendasiModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-scrollable modal-lg">

resources/views/layouts/guest.blade.php

@@ -63,7 +63,6 @@
             const password = document.querySelector('#password');
 
             if (togglePassword && password) {
-                // Tambahkan ikon awal jika belum ada
                 const initialIcon = togglePassword.querySelector('i');
                 if (!initialIcon.classList.contains('bi-eye-fill') && !initialIcon.classList.contains('bi-eye-slash-fill')) {
                     initialIcon.classList.add('bi-eye-slash-fill');

resources/views/layouts/navigation.blade.php

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

resources/views/peminjaman/form.blade.php

@@ -13,33 +13,71 @@
 
                     <h1 class="h2 fw-semibold mb-5 text-center">Form Peminjaman Offline</h1>
 
-                    {{-- Informasi Peminjam --}}
+                    <div class="card border-0 shadow-sm mb-4">
-                    <div class="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>
                         <div class="card-body p-4">
+                            {{-- Header Section: Judul & Tombol Edit --}}
+                            <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
+                                <h5 class="fw-bold text-primary m-0">
+                                    <i class="bi bi-person-lines-fill me-2"></i>Informasi Peminjam
+                                </h5>
+                                <a href="{{ route('profile.edit') }}" class="btn btn-sm btn-primary rounded-pill px-3">
+                                    <i class="bi bi-pencil-square me-2"></i>Edit Profil
+                                </a>
+                            </div>
+
                             <div class="row g-3">
+                                {{-- Nama Lengkap (Semua Role) --}}
                                 <div class="col-md-6">
-                                        <label class="form-label text-muted small">Nama Lengkap</label>
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Nama
-                                        <p class="fw-semibold">{{ $user['nama_lengkap'] }}</p>
+                                        Lengkap</label>
+                                    <p class="fw-semibold text-dark fs-5">{{ $user->nama_lengkap ?? $user->name }}</p>
+                                </div>
+
+                                {{-- KONDISI UNTUK GURU / PETUGAS --}}
+                                @if(in_array($user->role, ['guru', 'penjaga perpus']))
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">NIP / NIK</label>
+                                    <p class="fw-semibold text-dark">{{ $user->nip ?? '-' }}</p>
+                                </div>
+                                {{-- KONDISI UNTUK SISWA --}}
+                                @else
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">NISN</label>
+                                    <p class="fw-semibold text-dark">{{ $user->nisn ?? '-' }}</p>
+                                </div>
+                                @endif
+
+                                {{-- Email (Semua Role) --}}
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Email</label>
+                                    <p class="fw-semibold text-dark">{{ $user->email }}</p>
+                                </div>
+
+                                {{-- Nomor HP (Semua Role) --}}
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Nomor Handphone
+                                        (WA)</label>
+                                    <p class="fw-semibold text-dark">
+                                        @if($user->no_hp)
+                                        <span>{{ $user->no_hp
+                                            }}</span>
+                                        @else
+                                        <span class="text-muted fst-italic">- Belum diatur -</span>
+                                        @endif
+                                    </p>
+                                </div>
+
+                                {{-- Info Tambahan Khusus Siswa --}}
+                                @if($user->role == 'siswa')
+                                <div class="col-md-6">
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Kelas</label>
+                                    <p class="fw-semibold text-dark">{{ $user->kelas ?? '-' }}</p>
                                 </div>
                                 <div class="col-md-6">
-                                        <label class="form-label text-muted small">Nomor Handphone</label>
+                                    <label class="form-label text-muted small text-uppercase fw-bold">Golongan</label>
-                                        <p class="fw-semibold">{{ $user->phone ?? 'N/A' }}</p>
+                                    <p class="fw-semibold text-dark">{{ $user->golongan ?? '-' }}</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>
+                                @endif
                             </div>
                         </div>
                     </div>
@@ -54,7 +92,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,7 +196,6 @@ 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'])
@@ -176,7 +213,6 @@ class="rounded me-3 form-book-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>
@@ -185,18 +221,20 @@ class="rounded me-3 form-book-cover"
                                                 <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
+                                                <span class="badge bg-primary"><i class="bi bi-star-fill me-1"></i>Buku
-                                                                    class="bi bi-star-fill me-1"></i>Buku Utama</span>
+                                                    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
+                                                @if($bukuItem['id']==$buku['id']) checked disabled @endif
                                                 onclick="event.stopPropagation()">
                                         </div>
+
                                     </div>
                                 </div>
                             </div>
@@ -207,7 +245,6 @@ class="bi bi-star-fill me-1"></i>Buku Utama</span>
 
 
                 </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 +257,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"
+                    <button type="button" class="btn btn-primary" id="konfirmasiBuku" onclick="konfirmasiPilihanBuku()">
-                        onclick="konfirmasiPilihanBuku()">
                         <i class="bi bi-check2-circle me-1"></i> Konfirmasi Pilihan
                     </button>
                 </div>

resources/views/profile/edit.blade.php

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

resources/views/profile/index.blade.php

@@ -3,29 +3,28 @@
 
     <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">
+                        <div class="ms-sm-4 mb-3 mb-sm-0">
                             <h4 class="fw-bold mb-1">{{ $user->name }}</h4>
-                                <span
+                            <span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{
-                                    class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
+                                Str::title($user->role) }}</span>
+                        </div>
+                        <div class="ms-sm-auto">
+                            <a href="{{ route('profile.edit') }}"
+                                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>
                 </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">
@@ -47,9 +46,7 @@ class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title
                 </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>
@@ -73,40 +70,35 @@ class="btn btn-light text-start py-3 d-flex align-items-center">
                     </div>
                 </div>
 
-                    {{-- Keamanan Akun --}}
+                {{-- <div class="card border-0">
-                    <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
+                        <p class="small text-muted mb-3">Ubah password Anda secara berkala untuk menjaga keamanan akun.
-                                akun.</p>
+                        </p>
-                            <a href="{{ route('profile.edit') }}"
+                        <a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill w-100 py-2">
-                                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>
-            </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
+                <div class="card-body p-3 p-md-4">
-                            class="card-body p-3 p-md-4 d-flex flex-column flex-md-row align-items-center text-center text-md-start">
+                    <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-md-0">
+                            alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
-                            <div class="ms-md-4 mb-3 mb-md-0">
+                        <div class="ms-sm-4 mb-3 mb-sm-0">
                             <h4 class="fw-bold mb-1">{{ $user->name }}</h4>
-                                <span
+                            <span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{
-                                    class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
+                                    Str::title($user->role) }}</span>
                         </div>
+                        <div class="ms-sm-auto">
                             <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 ms-sm-auto w-100 w-sm-auto">
                                 <i class="bi bi-pencil-square me-2"></i>Edit Profil
                             </a>
                         </div>
@@ -128,17 +120,37 @@ class="btn btn-outline-primary rounded-pill w-100 w-md-auto ms-md-auto">
                         </div>
                     </div>
 
-                    {{-- Ringkasan Laporan Minat Baca --}}
+                    <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->no_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-start align-items-sm-center mb-4 gap-2">
+                        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>
@@ -147,22 +159,20 @@ class="btn btn-sm btn-outline-primary rounded-pill w-100 w-sm-auto">
                                 <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
+                                    <span class="badge bg-primary rounded-pill">{{ $buku['total_pembaca'] }}</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 class="small text-muted mb-3 text-uppercase fw-semibold">Kategori Terpopuler</h6>
-                                    </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
+                                    <span class="badge bg-success rounded-pill">{{ $kategori['total_pembaca']
-                                                    class="badge bg-success rounded-pill">{{ $kategori['total_pembaca'] }}</span>
+                                            }}</span>
                                 </li>
                                 @endforeach
                             </ul>
@@ -172,7 +182,6 @@ class="badge bg-success rounded-pill">{{ $kategori['total_pembaca'] }}</span>
             </div>
         </div>
 
-                {{-- Kolom Kanan: Aktivitas Personal Guru --}}
         <div class="col-lg-4">
             @include('profile.partials.personal-activities', [
             'bukuOffline' => $bukuOffline,
@@ -180,24 +189,21 @@ class="badge bg-success rounded-pill">{{ $kategori['total_pembaca'] }}</span>
             ])
         </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">
+                    <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-md-0">
+                            alt="Foto Profil" class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
-                                <div class="ms-md-4 mb-3 mb-md-0">
+                        <div class="ms-sm-4 mb-3 mb-sm-0">
                             <h4 class="fw-bold mb-1">{{ $user->name }}</h4>
-                                    <span
+                            <span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{
-                                        class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{ Str::title($user->role) }}</span>
+                                    Str::title($user->role) }}</span>
                         </div>
+                        <div class="ms-sm-auto">
                             <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
@@ -226,7 +232,6 @@ class="btn btn-outline-primary rounded-pill ms-md-auto">
                     </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">
@@ -248,7 +253,6 @@ class="btn btn-outline-primary rounded-pill ms-md-auto">
                 </div>
             </div>
 
-                {{-- Kolom Kanan: Aktivitas Personal Siswa --}}
             <div class="col-lg-4">
                 @include('profile.partials.personal-activities', [
                 'bukuOffline' => $bukuOffline,

resources/views/profile/partials/personal-activities.blade.php

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

resources/views/profile/partials/update-password-form.blade.php

@@ -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>
+            <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>
+            <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>
+            <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">
+        <div class="d-flex align-items-center gap-3 mt-4">
-            <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
+            <button type="submit" class="btn btn-primary px-4 shadow-sm">
-
+                <i class="bi bi-save me-1"></i> {{ __('Simpan Perubahan') }}
-            @if (session('status') === 'password-updated')
+            </button>
-                <span class="text-success fw-bold">{{ __('Saved.') }}</span>
-            @endif
         </div>
     </form>
+
+    <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>

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

@@ -19,10 +19,10 @@
 
         {{-- Bagian Nama Lengkap --}}
         <div class="mb-3">
-            <label for="nama_lengkap" class="form-label">{{ __('Nama Lengkap') }}</label>
+            <label for="name" class="form-label">{{ __('Nama Lengkap') }}</label>
-            <input id="nama_lengkap" name="nama_lengkap" type="text" class="form-control @error('nama_lengkap') is-invalid @enderror"
+            <input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror"
-                value="{{ old('nama_lengkap', $user->nama_lengkap) }}" required autofocus autocomplete="name">
+                value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
-            @error('nama_lengkap')
+            @error('name')
             <div class="invalid-feedback">{{ $message }}</div>
             @enderror
         </div>

resources/views/riwayat/offline.blade.php

@@ -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,7 +166,28 @@ 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 ? `
+                let dendaHtml = '';
+
+                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">
@@ -171,7 +202,9 @@ class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Dipinjam</spa
                                     </p>
                                 </div>
                             </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">

resources/views/welcome.blade.php

@@ -61,7 +61,7 @@ class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-cent
                             type="button" data-bs-toggle="dropdown" aria-expanded="false"
                             style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;">
                             <i class="bi bi-person-circle me-2"></i>
-                            <span>Masuk / Daftar</span>
+                            <span>Masuk</span>
                         </button>
                         <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2"
                             style="border-radius: 12px; min-width: 250px;">
@@ -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
+                                        <small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam, Baca &
-                                            Buku</small>
+                                            Pantau Laporan</small>
                                     </div>
                                 </a>
                             </li>
@@ -154,8 +154,8 @@ class="img-fluid" style="max-width: 100%; height: auto;">
                             <img src="{{ asset($buku['cover']) }}" class="card-img-top"
                                 alt="Cover {{ $buku['judul'] }}">
                             <div class="card-body p-3">
-                                    <span
+                                <span class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori']
-                                        class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori'] }}</span>
+                                    }}</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">
@@ -262,8 +262,8 @@ 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"
+                        <img src="{{ asset('images/assets/logo-smp.png') }}" alt="Logo SMPN 1 Bagor" class="img-fluid"
-                                class="img-fluid" style="max-width: 250px; height: auto;">
+                            style="max-width: 250px; height: auto;">
                     </div>
 
                     {{-- Bagian Teks (Kolom Kiri) --}}
@@ -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"
+                        <li class="mb-2"><a href="#statistik" class="text-decoration-none text-white-50">Statistik</a>
-                                class="text-decoration-none text-white-50">Statistik</a></li>
+                        </li>
                     </ul>
                 </div>
 
@@ -378,10 +378,10 @@ class="text-decoration-none text-white-50">Statistik</a></li>
                 <div class="col-md-3">
                     <h6 class="text-white fw-bold mb-3">Hubungi Kami</h6>
                     <ul class="list-unstyled small">
-                        <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> admin@digipus.go.id
+                        <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> smpn1bagor@yahoo.co.id
                         </li>
-                        <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (021) 1234 5678</li>
+                        <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (+62) 856-0642-8357</li>
-                        <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> [Alamat Pustaka Anda]
+                        <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> Banaran Kulon, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461
                         </li>
                     </ul>
                 </div>

routes/auth.php

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

routes/web.php

@@ -15,6 +15,7 @@
 // Admin Controllers
 use App\Http\Controllers\Admin\DashboardController as AdminDashboardController;
 use App\Http\Controllers\Admin\BookController as AdminBookController;
+use App\Http\Controllers\Admin\MasterIndukController;
 use App\Http\Controllers\Admin\UserController as AdminUserController;
 use App\Http\Controllers\Admin\PengumumanController as AdminPengumumanController;
 use App\Http\Controllers\Admin\MasterIndukController as AdminMasterIndukController;
@@ -86,14 +87,12 @@
     Route::get('/buku/tambah', [AdminBookController::class, 'create'])->name('buku.create');
     Route::post('/buku', [AdminBookController::class, 'store'])->name('buku.store');
     Route::get('/buku/{id}/edit', [AdminBookController::class, 'edit'])->name('buku.edit');
-    Route::put('/buku/{id}', [AdminBookController::class, 'update'])->name('buku.update');
-    Route::delete('/buku/{id}', [AdminBookController::class, 'destroy'])->name('buku.destroy');
 
     Route::get('/pengguna', [AdminUserController::class, 'index'])->name('pengguna.index');
     Route::get('/pengguna/tambah', [AdminUserController::class, 'create'])->name('pengguna.create');
     Route::post('/pengguna', [AdminUserController::class, 'store'])->name('pengguna.store');
     Route::get('/pengguna/{id}/edit', [AdminUserController::class, 'edit'])->name('pengguna.edit');
-    Route::put('/pengguna/{id}', [AdminUserController::class, 'update'])->name('pengguna.update');
+    Route::patch('/pengguna/{id}', [AdminUserController::class, 'update'])->name('pengguna.update');
     Route::delete('/pengguna/{id}', [AdminUserController::class, 'destroy'])->name('pengguna.destroy');
 
     Route::get('/pengumuman', [AdminPengumumanController::class, 'index'])->name('pengumuman.index');
@@ -103,7 +102,11 @@
     Route::put('/pengumuman/{id}', [AdminPengumumanController::class, 'update'])->name('pengumuman.update');
     Route::delete('/pengumuman/{id}', [AdminPengumumanController::class, 'destroy'])->name('pengumuman.destroy');
 
-    Route::get('/rekomendasi', [AdminRekomendasiController::class, 'index'])->name('rekomendasi.index');
+    Route::get('/rekomendasi', [
+        AdminRekomendasiController
+        ::class,
+        'index'
+    ])->name('rekomendasi.index');
     Route::get('/rekomendasi/tambah', [AdminRekomendasiController::class, 'create'])->name('rekomendasi.create');
     Route::post('/rekomendasi', [AdminRekomendasiController::class, 'store'])->name('rekomendasi.store');
     Route::get('/rekomendasi/{id}/edit', [AdminRekomendasiController::class, 'edit'])->name('rekomendasi.edit');
@@ -112,21 +115,23 @@
 
     Route::get('/peminjaman', [AdminPeminjamanController::class, 'index'])->name('peminjaman.index');
     Route::get('/peminjaman/tambah', [AdminPeminjamanController::class, 'create'])->name('peminjaman.create');
-    Route::post('/peminjaman', [AdminPeminjamanController::class, 'store'])->name('peminjaman.store');
-    Route::post('/peminjaman/kembali', [AdminPeminjamanController::class, 'kembalikan'])->name('peminjaman.kembali');
 
     Route::get('/denda', [AdminPeminjamanController::class, 'dendaIndex'])->name('denda.index');
     Route::post('/denda/sanksi', [AdminPeminjamanController::class, 'berikanSanksi'])->name('denda.sanksi');
 
-    // Master Induk / Whitelist
+    Route::post('/master-induk', [MasterIndukController::class, 'store'])->name('master-induk.store');
-    Route::post('/master-induk', [AdminMasterIndukController::class, 'store'])->name('master-induk.store');
+    Route::delete('/master-induk/{id}', [MasterIndukController::class, 'destroy'])->name('master-induk.destroy');
-    Route::delete('/master-induk/{id}', [AdminMasterIndukController::class, 'destroy'])->name('master-induk.destroy');
 });
 
 // --- RUTE LOGIN KHUSUS ADMIN ---
-Route::middleware('guest')->group(function() {
+Route::middleware('guest')->group(function () {
     Route::get('/admin/login', [AdminLoginController::class, 'create'])->name('admin.login');
     Route::post('/admin/login', [AdminLoginController::class, 'store'])->name('admin.login.store');
 });
 
+// -- RUTE RESET PASSWORD --
+Route::get('/reset-password', function () {
+    return view('auth.reset-password-request');
+})->name('reset.password-request');
+
 require __DIR__ . '/auth.php';