Fix: perbaiki struktur organisasi

[pandigresik]

Pull Request: Fix Perbaikan Struktur Organisasi - Ganti Highcharts dengan OrgChart dan Hitung Level Bagan Otomatis

Description

Mengganti library Highcharts Organization Chart dengan jQuery OrgChart untuk render struktur organisasi. Struktur data diubah dari flat (data + nodes) menjadi nested tree, sehingga level bagan tidak perlu dihitung manual (bagan_tingkat) tapi otomatis berdasarkan kedalaman relasi atasan-anak.

Changes made:

1. Refactor (BaganTrait.php): Mengubah query dari flat data + nodes menjadi nested tree structure. Setiap node memiliki children[] berdasarkan relasi atasan. Menghapus field bagan_tingkat dari query. Menambahkan method cleanNode() untuk menghapus key atasan dari output.

2. Feature (bagan.blade.php): Mengganti Highcharts dengan jQuery OrgChart. Menambahkan createNode callback untuk render foto, jabatan, dan nama per node. Border node mengikuti bagan_warna. Menambahkan tombol "Download Gambar" menggunakan html2canvas.

3. Feature (struktur-organisasi.blade.php): Perubahan sama seperti bagan.blade.php - migrasi ke OrgChart dengan fitur download.

4. Feature (asset_orgchart.blade.php): File baru - partial untuk load CSS/JS OrgChart, orgchart CSS, dan html2canvas (lokal).

5. Feature (bagan.css): Menambahkan custom styles untuk OrgChart: node card, foto, jabatan, nama, garis koneksi, responsive, dan hiding root wrapper node.

6. Cleanup (form.blade.php): Menghapus field bagan_tingkat dari form edit pengurus karena level sudah otomatis.

7. Asset (html2canvas.min.js): Menambahkan html2canvas v1.4.1 secara lokal di bower_components/html2canvas/ untuk download gambar.

8. Asset (orgchart): Menambahkan jQuery OrgChart library (CSS + JS) di bower_components/orgchart/.

Reason for change:

• Highcharts memerlukan data flat (data array untuk edge + nodes array untuk node) yang membuat perhitungan level (bagan_tingkat) harus dilakukan manual di form. OrgChart mendukung nested tree langsung.
• Level otomatis: Dengan nested tree, kedalaman node = level bagan. Tidak perlu field bagan_tingkat lagi.
• Download gambar: Sebelumnya tidak ada fitur download. Sekarang bisa download PNG dari orgchart.
• CSP compatibility: html2canvas di-load lokal (bukan CDN) agar tidak kena blok Content Security Policy.

Impact of change:

• ✅ Level bagan dihitung otomatis berdasarkan relasi atasan-anak
• ✅ Form edit pengurus lebih simpel (field bagan_tingkat dihapus)
• ✅ Struktur organisasi bisa didownload sebagai gambar PNG
• ✅ Tampilan orgchart lebih interaktif dengan hover effect dan foto
• ✅ Border node mengikuti warna bagan_warna masing-masing
• ✅ Root node kosong (di atas camat) disembunyikan
• ✅ Responsive untuk mobile

Related Issue

• Solution for fix related to issue #1636

Steps to Reproduce

Before fix (problem):

1. Buka halaman Data Pengurus > Bagan
2. Struktur organisasi di-render dengan Highcharts
3. Level bagan harus diatur manual di form edit pengurus (bagan_tingkat)
4. Tidak ada fitur download gambar
5. ❌ Jika bagan_tingkat salah, posisi node di bagan berantakan

After fix (solution):

1. Buka halaman Data Pengurus > Bagan
2. Struktur organisasi di-render dengan OrgChart berdasarkan relasi atasan-anak
3. Level bagan otomatis berdasarkan kedalaman tree
4. ✅ Tombol "Download Gambar" tersedia untuk download PNG
5. ✅ Node kosong di atas camat sudah tidak muncul

Testing on related features:

• Halaman Bagan (Data Pengurus) ✅
• Halaman Struktur Organisasi (Profil) ✅
• Form Edit Pengurus (field bagan_tingkat dihapus) ✅
• Download Gambar ✅
• Responsive mobile ✅

Checklist

• I have complied with script writing rules
• I have followed pull request review process
• Manual testing has been done in development environment
• No console errors or warnings
• Code has been reviewed

Technical Details

Technical Explanation

BaganTrait.php - Query diubah dari flat ke nested:

// Sebelum: flat data
return ['data' => $data, 'nodes' => $nodes];

// Sesudah: nested tree
$map[(string) $item->id] = [
    'children' => [],
    'atasan'   => $item->atasan,
    // ...
];
// Build tree by assigning children to parent

JavaScript - OrgChart dengan nested data:

$('#container').orgchart({
    'data': { children: result.children, name: '', title: '' },
    'createNode': function($node, data) {
        // Render foto, jabatan, nama
        // Border mengikuti data.color (bagan_warna)
    }
});

Configuration changes

• Field bagan_tingkat tidak digunakan lagi (dihapus dari form)
• bagan_warna tetap digunakan untuk warna border node

Dependencies added

• jQuery OrgChart: bower_components/orgchart/ (CSS + JS)
• html2canvas v1.4.1: bower_components/html2canvas/html2canvas.min.js (lokal)

Testing

Manual Testing

• Buka halaman Data Pengurus > Bagan - orgchart render dengan benar
• Buka halaman Profil > Struktur Organisasi - orgchart render dengan benar
• Border node mengikuti warna bagan_warna
• Tombol "Download Gambar" menghasilkan file PNG
• Edit pengurus - field bagan_tingkat sudah tidak ada
• Regression - fitur lain tidak terpengaruh

Screenshots / Video

Before:

Struktur organisasi menggunakan Highcharts dengan level manual

After:

Struktur organisasi menggunakan OrgChart dengan level otomatis, foto, dan tombol download

Breaking Changes

• Field bagan_tingkat di form edit pengurus dihapus (tidak mempengaruhi database, hanya UI)

Migration Guide

Not required

References

• jQuery OrgChart Documentation
• html2canvas Documentation
• Issue #1636

---

Additional notes: Perubahan ini menghapus kebutuhan manual input bagan_tingkat di form. Level bagan sekarang dihitung otomatis berdasarkan relasi atasan-anak di database.

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

[analisopendesa]

Cek pada bagian resources/views/data/pengurus/form.blade.php menghapus field bagan_tingkat, tapi script bawah masih menjalankan:
const inputTingkat = document.getElementById("bagan_tingkat"); inputTingkat.addEventListener(...).
Karena elemennya sudah tidak ada, ini berpotensi memicu TypeError (null) saat halaman form dibuka.