Fix: Menu Potensi pada Halaman Publik Tidak Berfungsi

[habibie11]

issue # #1767

🎯 Deskripsi

Pull request ini memperbaiki permasalahan pada menu Potensi di halaman publik OpenDK yang sebelumnya tidak berfungsi dan tidak mengarah ke halaman mana pun ketika diklik.

Penyebab utamanya adalah:

1. Pada tabel nav_menus (yang menyuplai struktur navbar publik melalui API /api/frontend/v1/website), menu Potensi tersimpan dengan data url => '#' tanpa memiliki submenu (children kosong). Akibatnya, elemen menu dirender sebagai <a href="#"> tanpa dropdown toggle, sehingga tidak bereaksi saat diklik.
2. Pada file routes/web.php, URL /potensi diarahkan kembali ke beranda dengan Route::permanentRedirect('/', '/'), serta belum ada route dan action controller untuk menampilkan katalog seluruh potensi.
3. Tampilan publik (pages.potensi.index) sebelumnya hanya dirancang untuk kategori spesifik (/potensi/{slug}) dan memicu error JavaScript (TypeError) saat data potensi kosong. Pada tema Buen, kategori potensi di-hardcode dalam array $slugMap.
4. Pada panel admin (Pengaturan > Menu), modul Potensi belum tersedia sebagai opsi pilihan sumber link menu.

Dengan perbaikan ini, pengguna publik dapat mengklik menu Potensi untuk membuka halaman katalog potensi (/potensi), memfilter potensi berdasarkan kategori dengan tombol/tab dinamis, dan admin dapat mengelola menu potensi dengan fleksibel dari dashboard.

---

🛠️ Perubahan yang Dilakukan

1. routes/web.php

• Menghapus Route::permanentRedirect('/', '/') pada grup prefix potensi.
• Mendaftarkan route publik baru potensi.index pada URL /potensi:

 Route::group(['prefix' => 'potensi'], function () {
-    Route::permanentRedirect('/', '/');
+    Route::get('/', 'PageController@PotensiIndex')->name('potensi.index');
     Route::get('{slug}', 'PageController@PotensiByKategory')->name('potensi.kategori');
     Route::get('{kategori}/{id}', 'PageController@PotensiShow')->name('potensi.kategori.show');
 });

2. app/Http/Controllers/FrontEnd/PageController.php

• Mengimpor model App\Models\TipePotensi.
• Menambahkan method PotensiIndex(): View untuk menampilkan seluruh potensi beserta daftar kategori:

public function PotensiIndex(): View
{
    $page_title = 'Potensi';
    $page_description = 'Potensi-Potensi Kecamatan';
    $kategori_potensi = TipePotensi::all();

    return view('pages.potensi.index', compact(['page_title', 'page_description', 'kategori_potensi']));
}

• Memperbarui PotensiByKategory(string $slug): View agar menyertakan $kategori_potensi untuk navigasi tab filter kategori di view.

3. Tema Publik (Default & Buen)

• themes/opendk/default/resources/views/pages/potensi/index.blade.php:
  • Menambahkan tombol/tab filter kategori ("Semua", diikuti kategori dinamis dari database).
  • Menangani pemanggilan AJAX dinamis: jika $slug kosong memanggil /api/frontend/v1/potensi?include=tipe, jika ada $slug menambahkan parameter &filter[tipe.slug]=slug.
  • Memperbaiki penanganan data kosong agar tidak melempar TypeError saat items.length === 0.
• themes/opendk/buen/resources/views/pages/potensi/index.blade.php:
  • Menghapus array hardcode $slugMap.
  • Menambahkan tab filter kategori responsif dengan styling Tailwind CSS tema Buen.
  • Menyelaraskan filter API dinamis dan fallback breadcrumb.
• show.blade.php (Default & Buen):
  • Menambahkan tombol "Kembali ke Daftar Potensi" yang mengarah ke route('potensi.index').

4. Database Migration & Seeders

• [NEW] database/migrations/2026_09_30_080000_fix_potensi_nav_menu.php:
  • Memperbarui URL menu Potensi pada tabel nav_menus dari 'url' => '#' menjadi 'url' => '/potensi'.
  • Membersihkan cache API website (website:api).
• database/seeders/DasNavigationTableSeeder.php:
  • Memperbarui default URL Potensi dari '#' menjadi 'potensi'.

5. Admin Menu Management (Pengaturan > Menu)

• app/Http/Controllers/Setting/NavMenuController.php:
  • Menambahkan opsi 'Potensi' pada $sourceItem:
    • '/potensi' => 'Semua Potensi'
    • '/potensi/' . $item->slug => $item->nama_kategori (dinamis dari model TipePotensi).
  • Menambahkan sanitasi field type pada loopTree agar tersimpan aman sesuai ENUM tabel.
• resources/views/setting/nav_menu/field.blade.php & index.blade.php:
  • Menambahkan pilihan radio button Potensi dan menangani event change javascript untuk memilih kategori potensi.
• resources/views/setting/navigation/form.blade.php:
  • Menambahkan opsi "Semua Potensi" dan mengoreksi nilai value MenuTipe::POTENSI (value="4").

6. Automated Testing (Pest)

• [NEW] tests/Feature/Frontend/PotensiPublicTest.php:
  • Test akses /potensi (Semua Potensi) mengembalikan status 200 dan view pages.potensi.index.
  • Test akses /potensi/{slug} (Kategori Potensi) mengembalikan status 200.
  • Test akses /potensi/{kategori}/{id} (Detail Potensi) mengembalikan status 200 dan view pages.potensi.show.
  • Test integritas database: memastikan menu Potensi di nav_menus memiliki URL /potensi.
  • Test endpoint /api/frontend/v1/website memastikan menu Potensi memiliki atribut url: "/potensi".

---

✅ Test Cases yang Diimplementasikan

• Mengakses halaman /potensi berhasil menampilkan katalog seluruh potensi kecamatan beserta tab filter kategori (HTTP 200).
• Mengakses halaman /potensi/{slug} berhasil memfilter daftar potensi berdasarkan slug kategori yang dipilih.
• Mengakses halaman detail potensi /potensi/{kategori}/{id} berhasil menampilkan detail potensi lengkap dengan tombol kembali.
• Mengklik menu "Potensi" pada navbar publik mengarahkan pengunjung ke halaman /potensi (tidak lagi #).
• Pada halaman Pengaturan > Menu di admin panel, admin dapat memilih sumber URL Potensi (Semua Potensi maupun per kategori).
• Seluruh automated test pada tests/Feature/Frontend/PotensiPublicTest.php lulus (5 passed, 17 assertions).
• Regression testing pada modul NavMenu, Potensi API, dan File Preview berjalan sukses tanpa breaking changes.
• Format kode telah disesuaikan menggunakan Laravel Pint (pint --test passed).

---

📸 Cara Menjalankan Uji Coba Manual

1. Jalankan aplikasi web OpenDK.
2. Buka halaman utama website pada browser (/).
3. Cari menu Potensi pada navbar utama bagian atas.
4. Klik menu Potensi.
5. Pastikan browser mengarah ke halaman /potensi dan menampilkan data potensi yang telah diinput dari admin.
6. Coba klik salah satu tombol filter kategori (atau "Semua"), pastikan data potensi terfilter sesuai kategori tanpa reload halaman.
7. Klik tombol "Baca Selengkapnya" pada salah satu card potensi, pastikan masuk ke halaman detail potensi.
8. Klik tombol "Kembali ke Daftar Potensi" untuk kembali ke halaman katalog potensi.
9. Buka dashboard admin, masuk ke menu Pengaturan > Menu, pastikan opsi sumber Potensi tersedia dan dapat ditambahkan ke menu dinamis.

---

📸 Screenshot atau Video

[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 #1768