# Audit Unit Usaha dan Divisi Kerja Tanggal: 12 Oktober 2026. Mode Anti Slop: After, pilihan pengguna dalam sesi ini. ## Lingkup dan arah desain Halaman `/unit-usaha`, template Blade, CSS direktori, data `UnitUsahaService`, serta tujuan tautan kontak. Audit dilakukan pada kondisi kerja lokal yang sudah memiliki perubahan pada template, CSS, dan hasil build. Audit ini tidak mengubah file aplikasi tersebut. Arah dari README bagian 6: profesional, natural, hijau tua, putih dan krem, sans-serif terbaca, dokumentasi autentik, animasi terbatas. Pembacaan desain: direktori layanan koperasi untuk anggota, petani dan calon mitra, dengan bahasa visual editorial pertanian. ENERGY 2 / RHYTHM 2 / MOTION 1. Warna menandai identitas dan pilihan aktif; variasi komposisi mengikuti fungsi informasi; gerak hanya memberi respons interaksi. ## Temuan bernomor ### 1. HIGH: Kontras teks kecil kurang memadai (R-25) Alasan: nomor divisi `#768b7d` pada putih menghasilkan 3,65:1; nomor tugas `#7b917f` pada putih 3,39:1; label fasilitas `#627b63` pada `#f5f7f2` 4,30:1. Teks kecil perlu 4,5:1. Pengukuran memakai warna computed browser dan rumus luminansi WCAG. Judul besar warna `#66816b` pada hero mendapat 3,88:1 dan memenuhi ambang teks besar, sehingga tidak termasuk pelanggaran ini. Lokasi: `resources/css/app.css:96`, `:132`, `:141`. Perbaikan: gelapkan teks sekunder dan label, verifikasi semua pasangan warna termasuk pilihan aktif, tombol dan fokus. Pertahankan hijau koperasi. ### 2. HIGH: Area sentuh terlalu kecil (R-03) Alasan: pada viewport 390 px, tombol Konsultasi divisi setinggi 38,5 px dan Kembali ke atas 16,5 px; select 43 px. Target minimum skill adalah 44 px. Lokasi: `resources/css/app.css:123`, `:143`, `:150`. Perbaikan: tinggi minimum 44 px, padding yang cukup dan jarak antar kontrol. Jangan menaikkan ukuran huruf sebagai satu-satunya cara memperluas target. ### 3. HIGH: Status aktif tidak didukung sumber status (R-38; terkait R-17) Alasan: semua panel menampilkan teks hardcoded "Operasional aktif", tetapi data unit tidak memiliki field status atau sumber pembaruannya. Angka 120 Ha, pengalaman, foto, kutipan dan target tersedia dalam array statis tanpa rujukan verifikasi. Ini menunjukkan sumber resmi belum dapat ditelusuri dari proyek, bukan bukti bahwa data tersebut palsu. Lokasi: `resources/views/pages/unit-usaha.blade.php:22`, `:61`; `app/Services/UnitUsahaService.php:7`. Perbaikan: hapus klaim aktif otomatis sampai status terverifikasi tersedia. Jumlah 9 unit boleh berasal dari jumlah entri. Hindari mengangkat luas lahan sebagai statistik hero sebelum sumbernya jelas. Pertahankan pemisahan target operasional dari capaian aktual; jangan menambahkan angka, orang atau kutipan baru. ### 4. HIGH: Tidak ada penanganan data kosong (R-27) Alasan: template mengakses `$units[0]['slug']`, dan JavaScript mengakses `tabs[0].dataset.slug`. Tidak ada tampilan kosong jika unit belum tersedia. Lokasi: `resources/views/pages/unit-usaha.blade.php:116`, `:139`. Perbaikan: tampilkan pesan kosong dan jalur kontak; hentikan inisialisasi tab jika data kosong. Karena halaman dirender server dan pergantian panel menggunakan data lokal, tidak perlu spinner palsu untuk perpindahan divisi. Penanganan loading/error baru diperlukan jika kelak menggunakan fetch. ### 5. LOW: Hierarki menonjolkan profil sebelum kebutuhan layanan (R-05, R-20; C-3) Alasan: setelah ringkasan, pengunjung langsung melihat foto, pengalaman dan kutipan ketua. Tugas, fasilitas dan target muncul lebih jauh di bawah. Layanan yang ingin dicari anggota menjadi sulit dipindai. Lokasi: `resources/views/pages/unit-usaha.blade.php:66`, `:81`, `:99`. Perbaikan: header divisi dan ringkasan, tugas/layanan, fasilitas dan target, kemudian penanggung jawab dan tim. Desktop dapat menempatkan profil ringkas di kolom pendamping. Di ponsel, informasi layanan tetap lebih dahulu. ### 6. MEDIUM: Tipografi pendukung terlalu kecil untuk halaman informasi (R-06) Alasan: metadata 9–10 px, pengalaman 10 px, label penanggung jawab mobile 8 px, serta pengantar mobile 12 px membuat informasi penting sulit dibaca dan hierarki terlalu jauh antara judul dan isi. Lokasi: `resources/css/app.css:75`, `:120`, `:141`, `:161`, `:169`, `:174`. Perbaikan: isi sekitar 15–16 px, label 12–13 px, ukuran berbasis rem dan judul fluid. Tetap gunakan Plus Jakarta Sans yang sudah dipakai agar konsisten dan terbaca, dengan panjang baris yang nyaman. ### 7. LOW: Label konsultasi tidak menjelaskan penerima kontak (R-15; C-2) Alasan: kesembilan CTA mengarah ke `6282178901101`, tetapi delapan panel menampilkan nomor ketua lain di sebelahnya. Kontak WhatsApp global mengarah ke `6282181630138`. Link memiliki fungsi, tetapi penerimanya ambigu. Lokasi: `resources/views/pages/unit-usaha.blade.php:44`, `:75`, `:76`; `resources/views/components/layouts/app.blade.php`. Perbaikan: jelaskan "Koordinasi melalui sekretariat" jika tetap memakai jalur sekretariat. Tampilkan nomor yang sesuai dengan tujuan CTA. Jangan mengganti ke nomor pribadi tanpa memastikan tujuan kontak resmi. Keputusan nomor resmi tetap perlu sumber dari pengelola. ### 8. LOW: Direktori mobile menyembunyikan cakupan sembilan layanan (R-20; C-3) Alasan: sidebar hilang di bawah 1024 px, sehingga pengunjung hanya melihat satu nama pada select. Mereka perlu membuka dropdown untuk mengetahui unit lain. Tombol kembali ke atas mengarah ke hero, bukan langsung ke pemilih divisi. Lokasi: `resources/views/pages/unit-usaha.blade.php:48`, `:119`; `resources/css/app.css:145`. Perbaikan: sediakan direktori ringkas yang memperlihatkan nama kesembilan unit dan kategori, dengan pilihan aktif yang jelas. Pada ponsel gunakan daftar yang dapat dibuka melalui tombol "Pilih divisi"; tampilkan nama divisi aktif dan jumlah unit. Beri aksi kembali ke pemilih divisi saat berada di akhir detail. Pertahankan deep link dan riwayat browser. ## Konsep layout yang direkomendasikan Hero lebih ringkas: judul, deskripsi layanan koperasi dan jumlah unit yang berasal dari data. Hindari blok statistik yang tidak membantu memilih layanan. Desktop: direktori sekitar seperempat lebar halaman dan detail sekitar tiga perempat. Detail memiliki judul, ringkasan, tugas/layanan yang mudah dipindai, fasilitas dan target yang terpisah jelas. Profil penanggung jawab menjadi blok pendamping yang ringkas, diikuti tim dan kontak sekretariat. Tablet: direktori berada di atas detail dan bisa diperluas; konten layanan tetap dapat memakai dua kolom jika teks muat. Ponsel: satu kolom, direktori mudah ditemukan, teks lebih besar dan CTA sekurangnya 44 px. Prioritas layanan lebih dahulu berlaku di semua ukuran. Identitas: hijau tua sebagai warna pilihan aktif dan CTA; krem untuk pembuka dan informasi pendamping; putih untuk isi. Nomor unit menjadi penanda direktori. Gunakan garis pemisah seperlunya untuk kelompok informasi. Hindari sembilan kartu berukuran besar yang menduplikasi detail, efek glow, ornamen pertanian buatan dan animasi terus-menerus. Foto yang sudah ada tidak diganti atau ditambah sebelum asalnya terkonfirmasi. ## Bukti pemeriksaan - Aplikasi lokal berjalan di `http://127.0.0.1:8000/unit-usaha`. - Tampilan diperiksa pada desktop 1440 px serta ukuran 768, 390 dan 320 px. `scrollWidth` tidak melebihi viewport pada ukuran yang diukur; ini pemeriksaan sampel, bukan seluruh kombinasi konten. - Klik tab Alsintan membuka panel Alsintan; ArrowDown beralih ke panel Irigasi. Select mobile membuka panel Digital & Edukasi. - Sembilan tujuan CTA diperiksa dari DOM. Tidak ada pesan WhatsApp yang dikirim. - Rasio kontras dihitung dari warna computed, bukan penilaian visual saja. - Audit tidak menjalankan build ulang atau mengklaim seluruh kontrol dan kombinasi breakpoint sudah lolos. ## Delivery Gate Ini laporan audit, bukan hasil redesign yang sudah siap dikirim ke produksi. Gate desain belum lulus: temuan 1–4 merupakan penghalang yang perlu diperbaiki. Purpose-Gate: temuan 6. Quality Locks dan craftsmanship: temuan 5, 7, 8. Konsep telah mengikuti arah README; bukti implementasi, semua interaksi, kontras menyeluruh dan pemeriksaan visual redesign masih menunggu tahap perbaikan. Pemeriksaan laporan: PASS, setiap temuan memiliki aturan, alasan, lokasi dan perbaikan konkret. PASS, prioritas mengikuti tier skill. PASS, pernyataan yang belum dapat diverifikasi diberi batasan. PASS, tidak ada file UI yang diubah dan tidak ada aset atau data baru yang dibuat. ## Persetujuan perbaikan Sesuai mode After, pengguna memilih nomor temuan sebelum implementasi. Rekomendasi memilih 1–8 untuk redesign lengkap. Nomor yang tidak dipilih tidak diubah. Setelah implementasi, tulis laporan lanjutan dengan perubahan dan bukti verifikasi.