Fix: perbaikan alert

[pandigresik]

Pull Request: Perbaiki alert konfirmasi windows ke alert standar OpenDK

Description

Standarisasi seluruh notifikasi di aplikasi dengan mengganti native browser alert() dan confirm() dengan Bootstrap modal yang konsisten. Membuat Blade component (x-modal-alert dan x-modal-confirm) serta JavaScript utility (modal-helper.js) agar semua notifikasi memiliki tampilan seragam dan dapat dikelola dengan mudah.

Changes made:

1. New Component: resources/views/components/modal-alert.blade.php — Blade component x-modal-alert untuk menampilkan pesan notifikasi dengan dukungan tipe (success/danger/warning/info)
2. New Component: resources/views/components/modal-confirm.blade.php — Blade component x-modal-confirm untuk konfirmasi dengan callback dan data-confirm attribute
3. New Utility: public/js/modal-helper.js — JavaScript helper dengan fungsi openAlert(), openConfirm(), dan event handler untuk data-confirm attribute
4. Layout Integration: resources/views/layouts/app.blade.php dan dashboard_template.blade.php — Include komponen modal dan JS helper
5. Layout Migration: Migrasi livewireInstance.on('success'/'error') dari SweetAlert2 ke openAlert()
6. JS Migration: public/js/admin.js — Migrasi errorValidation() dari SweetAlert2 ke openAlert()
7. View Migration: ~26 file blade — Ganti native alert() dengan openAlert() (file validation, OTP/2FA errors, AJAX errors)
8. View Migration: ~8 file blade — Ganti native confirm() dengan openConfirm() atau data-confirm attribute (delete confirmation, archive messages, backup database)

Reason for change:

• Point 1: Native browser alert() dan confirm() tampil tidak konsisten antar browser dan tidak sesuai dengan tema aplikasi
• Point 2: Menggunakan Bootstrap modal memberikan tampilan yang seragam dengan komponen lain di aplikasi yang sudah menggunakan modal
• Point 3: Dengan Blade component dan JS utility terpusat, perawatan notifikasi lebih mudah dan konsisten

Impact of change:

• ✅ Konsistensi UI: Semua notifikasi menggunakan Bootstrap modal dengan tema yang sama
• ✅ User Experience: Modal Bootstrap lebih user-friendly daripada native browser dialog
• ✅ Maintainability: Perubahan notifikasi cukup di satu tempat (component/JS helper)
• ✅ Fitur: Modal alert mendukung type (success/danger/warning/info) untuk konteks yang berbeda

Related Issue

• Solusi untuk issue #1635

Steps to Reproduce

Before fix (problem):

1. Buka halaman form upload file (artikel, pengurus, dll)
2. Upload file dengan format tidak didukung
3. ❌ Muncul native browser alert('File tersebut tidak diperbolehkan.')
4. Buka halaman OTP/2FA verification
5. Tunggu hingga kode expired
6. ❌ Muncul native browser alert('Kode OTP telah kadaluarsa...')
7. Klik tombol hapus data
8. ❌ Muncul native browser confirm('Yakin ingin menghapus?')

After fix (solution):

1. Buka halaman form upload file
2. Upload file dengan format tidak didukung
3. ✅ Muncul Bootstrap modal dengan pesan peringatan (icon warning)
4. Buka halaman OTP/2FA verification
5. Tunggu hingga kode expired
6. ✅ Muncul Bootstrap modal dengan pesan informasi
7. Klik tombol hapus data
8. ✅ Muncul Bootstrap modal konfirmasi dengan tombol Batal/Ya

Checklist

• Saya sudah mengikuti aturan penulisan script
• Saya sudah mengikuti proses review pull request
• Saya sudah membuat unit test/integration test untuk memverifikasi perbaikan
• Manual testing sudah dilakukan di environment development
• Tidak ada console error atau warning
• Kode sudah di-review oleh minimal 1 orang

Technical Details

Technical Explanation

Membuat dua Blade component yang dirender di layout:

{{-- resources/views/components/modal-alert.blade.php --}}
<x-modal-alert />  {{-- Include di layout --}}

{{-- resources/views/components/modal-confirm.blade.php --}}
<x-modal-confirm />  {{-- Include di layout --}}

JS helper modal-helper.js menyediakan tiga mekanisme:

1. openAlert(message, title, type) — Fungsi global untuk menampilkan modal alert. Type (success/danger/warning/info) mengubah class pada .modal-content untuk warna yang sesuai (Bootstrap 3 modal-success, modal-danger, dll)

2. openConfirm(message, title, callback, btnYesText) — Fungsi global untuk konfirmasi dengan callback. Menggunakan variabel global confirmCallback yang dipanggil saat tombol "Ya" diklik

3. [data-confirm] attribute — Event handler delegated untuk tombol submit form atau link. Secara otomatis mencegah default action, menampilkan konfirmasi, dan mengeksekusi submit/navigasi jika dikonfirmasi

Configuration changes

Tidak ada perubahan konfigurasi

Dependencies added

Tidak ada dependencies baru (menggunakan Bootstrap 3 yang sudah terinstall)

Testing

Manual Testing

• Upload file tidak didukung di form artikel, pengurus, sinergi program, regulasi, prosedur, media sosial, slide, album, galeri, user
• OTP/2FA expired di halaman verify-login, verify-activation, verify-settings
• Resend OTP sukses/gagal di semua halaman auth
• Konfirmasi hapus data (data_sarana, komplain jawaban, log viewer, backup)
• Arsip pesan (masuk, keluar, read)
• Backup/delete database
• Run php artisan storage:link via log viewer
• Ganti SMTP
• Livewire success/error events dari layout
• Error validation response dari admin.js

Breaking Changes

None — semua native alert/confirm diganti dengan Bootstrap modal yang memiliki perilaku serupa (modal alert bersifat blocking dengan tombol OK, modal confirm dengan Batal/Ya)

Migration Guide

Not required — perubahan hanya pada frontend, tidak ada perubahan database atau API

References

• Issue #1635
• Bootstrap 3 Modal

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1639