I18n dan Pola UI

Pendahuluan

Dokumen ini menjelaskan pengaturan lokalisasi, komponen UI bersama, pola alert/konfirmasi, ikon, dan konvensi gaya (styling) di frontend Ravenxcope.

---

Pengaturan I18n

Lokalisasi diinisialisasi di src/i18n.ts.

Sumber daya (resources):

Locale	File
Bahasa Inggris	src/locales/en.json
Bahasa Indonesia	src/locales/id.json

Perilaku inisialisasi:

1. Membaca bahasa yang disimpan dari localStorage.language.
2. Default ke en jika tidak ada bahasa yang disimpan.
3. Menggunakan en sebagai bahasa fallback.
4. Menonaktifkan suspense React melalui react.useSuspense = false.
5. Menyimpan perubahan bahasa kembali ke localStorage.language.

---

Pengalih Bahasa (Language Switcher)

Shell dasbor merender LanguageSwitcher dari src/core/layout/LanguageSwitcher.tsx.

Pengalih bahasa menggunakan useTranslation() dan mengubah bahasa i18next yang aktif. Teks tingkat rute yang menggunakan t(...) akan diperbarui secara otomatis.

---

Cakupan Lokalisasi Saat Ini

String yang dilokalisasi digunakan pada:

• Halaman login.
• Navigasi shell dasbor.
• Ringkasan sensor dasbor.
• Tindakan dan pesan daftar sensor.
• Konfirmasi dan pesan logout.
• Pengalih bahasa.

Beberapa layar manajemen masih menggunakan string Bahasa Inggris yang tertulis langsung (hard-coded). Saat memperbarui layar tersebut, utamakan menambahkan kunci ke en.json dan id.json.

---

Komponen UI Bersama

Primitif UI bersama berada di src/components/ui.

Komponen	Tujuan
button.tsx	Varian dan ukuran tombol
card.tsx	Primitif tata letak kartu
dialog.tsx	Dialog modal
alert-dialog.tsx	Primitif dialog peringatan
confirm-dialog.tsx	Pembantu dialog konfirmasi global
dropdown-menu.tsx	Primitif menu/dropdown
input.tsx	Input teks
label.tsx	Label formulir
select.tsx	Kontrol formulir pilih/dropdown
sheet.tsx	Sheet samping/drawer seluler
skeleton.tsx	Placeholder pemuatan
sonner.tsx	Penyedia toast
table.tsx	Primitif tabel
tooltip.tsx	Primitif tooltip
badge.tsx	Label status

Kode fitur harus menggunakan kembali primitif ini sebelum menambahkan elemen UI lokal baru.

---

Alert dan Konfirmasi

Terdapat dua pola konfirmasi/alert:

1. src/lib/alerts.ts membungkus pembantu sukses, error, konfirmasi, dan asinkron bergaya SweetAlert.
2. src/components/ui/confirm-dialog.tsx menyediakan dialog konfirmasi global bergaya Radix.

App.tsx memasang:

<Toaster />
<ConfirmDialog />

Gunakan pembantu yang ada secara konsisten:

• Gunakan showSuccess dan showError untuk umpan balik umum.
• Gunakan showConfirm sebelum tindakan destruktif.
• Gunakan toast dari sonner untuk umpan balik fitur inline yang ringan.

---

Ikon

Aplikasi ini terutama menggunakan lucide-react untuk ikon fitur baru. Beberapa data tata letak lama mengimpor ikon MUI.

Konvensi praktis saat ini:

• Gunakan lucide-react untuk tindakan, navigasi, analitik, dan pekerjaan UI baru.
• Pertahankan penggunaan ikon MUI yang sudah ada kecuali jika sedang merefaktorisasi komponen sekitarnya.
• Utamakan tombol ikon atau tombol ikon + teks untuk tindakan yang jelas.

---

Gaya (Styling)

Frontend menggunakan utilitas Tailwind CSS dengan variabel CSS lokal dari src/index.css.

Konvensi umum:

• Gunakan primitif UI bersama untuk gaya dasar.
• Jaga tata letak global di src/core/layout; halaman rute harus menggunakan RoutePage.
• Letakkan bagian khusus fitur di modules/<domain>/partials.
• Gunakan DataTableCard untuk halaman tabel manajemen sebelum menambahkan kerangka kartu/tabel baru.
• Gunakan kelas utilitas responsif untuk kolom tabel dan tata letak seluler.
• Gunakan Skeleton untuk status pemuatan di halaman tabel/daftar.
• Gunakan Badge untuk label status dan izin.

---

Pola Tampilan Data

Pola	Penggunaan Saat Ini
Header kartu	Judul halaman, deskripsi, dan tindakan utama
Tabel	Daftar pengguna, peran, sensor, peringatan
Dialog	Formulir buat/edit
Sheet	Sidebar seluler dan chat analitik di layar kecil
Tooltip	Sidebar yang diciutkan dan petunjuk tindakan
Badge	Status, jumlah izin peran, kondisi kesehatan
Skeleton	Placeholder pemuatan daftar
Toast	Umpan balik operasi asinkron

---

Pola Formulir

Formulir saat ini dikontrol dengan useState lokal, bukan React Hook Form.

Perilaku formulir umum:

• Mencegah pengiriman (submit) browser default.
• Memvalidasi field wajib secara lokal jika diperlukan.
• Menonaktifkan kontrol saat pengiriman sedang berlangsung.
• Memanggil metode api yang bertipe.
• Menampilkan umpan balik sukses/error.
• Menutup dialog atau menavigasi saat berhasil.
• Memicu pengambilan data ulang (refetch) pada induk dengan mengubah bendera state.

Saat menambahkan formulir baru, sesuaikan dengan gaya fitur di sekitarnya kecuali jika refaktorisasi formulir secara luas direncanakan.