Pengguna, Peran, dan Organisasi

Pendahuluan

Dokumen ini menjelaskan pendaftaran (onboarding) organisasi, manajemen pengguna, manajemen peran dan izin, serta perilaku profil organisasi.

---

File Utama

File	Tanggung Jawab
pages/LoginPage.tsx	Titik masuk Login
modules/onboarding/pages/OrganizationRegistrationPage.tsx	Pendaftaran organisasi publik
modules/onboarding/pages/AdminUserRegistrationPage.tsx	Pembuatan pengguna saat pendaftaran
modules/users/pages/UserListPage.tsx	Rute daftar pengguna organisasi, izin, dan orkestrasi dialog
modules/users/partials/UserListTable.tsx	Tabel pengguna dan tindakan baris
modules/users/dialogs/CreateUserDialog.tsx	Dialog buat pengguna
modules/users/dialogs/EditUserDialog.tsx	Dialog edit pengguna
modules/roles/pages/RoleListPage.tsx	Rute daftar peran, izin, dan orkestrasi dialog
modules/roles/partials/RoleListTable.tsx	Tabel peran dan tindakan baris
modules/roles/dialogs/CreateRoleDialog.tsx	Dialog buat peran dengan izin
modules/roles/dialogs/EditRoleDialog.tsx	Dialog edit peran dengan izin
modules/organizations/pages/OrganizationDetailPage.tsx	Halaman detail organisasi saat ini
modules/organizations/dialogs/EditOrganizationDialog.tsx	Dialog edit organisasi
modules/organizations/pages/ProfilePage.tsx	Profil pengguna saat ini
modules/organizations/dialogs/EditProfileDialog.tsx	Dialog edit profil pengguna saat ini
hooks/useApi.ts	Hook Pengguna, Peran, Organisasi, dan Izin
lib/api.ts	Grup titik akhir user, role, permission, organization, dan location

---

Pendaftaran (Onboarding) Organisasi

• /register
• /user-form

1. Muat Provinsi: OrganizationForm memuat provinsi dengan api.location.getProvinces().
2. Muat Kota: Saat provinsi dipilih, sistem memuat kota dengan api.location.getCitiesByProvince(provinceId).
3. Kirim (Submit): Formulir organisasi mengirimkan data ke api.organization.create(...).
4. Respons Backend: Respons backend diharapkan mencakup organization dan adminRole.
5. Navigasi: Aplikasi menavigasi ke /user-form dan meneruskan data organisasi/peran admin dalam state rute.
6. Pembuatan Pengguna: UserForm membuat pengguna awal untuk organisasi tersebut.

Payload pembuatan organisasi memetakan nama field UI ke nama field backend:

Field UI	Field yang Dikirim
phone_number	phoneNumber
province	province
city	city
oinkcode	oinkcode
parentId	null

---

Manajemen Pengguna

• Rute: /dashboard/user
• Komponen: AllUser

1. Inisialisasi Konteks: Membaca ID organisasi/pengguna saat ini dari cookie auth.
2. Pemuatan Data: Memuat pengguna dengan useOrganizationUsers([deletionFlag, createFlag, editFlag]).
3. Pemeriksaan Izin: Memuat izin melalui useUserPermissions().
4. Visibilitas Tindakan: Menampilkan tindakan buat, edit, dan hapus sesuai izin.
5. Validasi: Mencegah penghapusan pengguna saat ini di UI.
6. Penanganan Formulir: Menggunakan CreateUser dan EditUser di dalam dialog.
7. Manajemen State: Mengaktifkan flag lokal setelah buat/edit/hapus untuk memicu refetch hook.

Titik akhir API:

Operasi	Panggilan API
Daftar	api.user.getAll()
Daftar terpaginasi	api.user.getPaginated(params)
Ambil satu	api.user.get(userId)
Buat	api.user.create(data)
Perbarui	api.user.update(userId, data)
Hapus	api.user.delete(userId)

---

Manajemen Peran (Role)

• Rute: /dashboard/role
• Komponen: AllRole

1. Pemuatan Data: Memuat peran dengan useRoles([deletionFlag, createFlag, editFlag]).
2. Pemeriksaan Konteks: Mengambil pengguna saat ini melalui api.auth.me() untuk mengidentifikasi ID peran saat ini.
3. Visibilitas Tindakan: Menampilkan tindakan buat, edit, dan hapus sesuai izin.
4. Validasi: Mencegah penghapusan peran aktif pengguna saat ini di UI.
5. Penanganan Formulir: Menggunakan CreateRole dan EditRole di dalam dialog.
6. Metrik: Menampilkan jumlah izin pada daftar.

Formulir peran memuat katalog izin melalui api.permission.getAll() dan mengirimkan ID izin yang dipilih.

Titik akhir API:

Operasi	Panggilan API
Daftar	api.role.getAll()
Daftar terpaginasi	api.role.getPaginated(params)
Ambil satu	api.role.get(roleId)
Buat	api.role.create(data)
Perbarui	api.role.update(roleId, data)
Hapus	api.role.delete(roleId)
Izin	api.permission.getAll()

---

Detail Organisasi

• Rute: /dashboard/organization
• Komponen: OrganizationDetail

1. Inisialisasi Konteks: Membaca ID pengguna saat ini dari cookie.
2. Pemuatan Data: Memanggil useUser(userId, [editFlag]).
3. Pemetaan Data: Membaca user.organization.
4. Render Detail: Menampilkan nama organisasi, email, telepon, alamat, provinsi, dan kota.
5. Visibilitas Tindakan: Menampilkan tindakan edit hanya jika pengguna memiliki izin edit-organization.
6. Penanganan Formulir: Membuka EditOrganization dalam dialog dan melakukan refetch setelah ditutup.

---

Profil

• Rute: /dashboard/profile

Layar profil menampilkan dan mengedit profil pengguna saat ini. Layar ini mengikuti pola yang sama dengan detail organisasi: mengambil data pengguna saat ini, merender detail baca-saja, membuka dialog edit, lalu melakukan refetch setelah pengeditan berhasil.

---

Izin

Layar manajemen menggunakan slug berikut:

Area	Buat	Edit	Hapus	Baca
Pengguna	create-user	edit-user	delete-user	read-user
Peran	create-role	edit-role	delete-role	read-role
Organisasi	n/a	edit-organization	n/a	n/a

Backend tetap menjadi sumber kebenaran (source of truth) untuk otorisasi.

---

Mode Kegagalan

Skenario	Perilaku Frontend
Pemuatan provinsi/kota gagal	Peringatan kesalahan ditampilkan dan formulir tetap dapat digunakan
Pembuatan organisasi mengembalikan data tidak valid	Melempar kesalahan dan menghentikan navigasi pendaftaran
Pemuatan daftar pengguna/peran gagal	Hook mencatat kesalahan dan mengekspos array fallback kosong
Penghapusan gagal	Peringatan kesalahan ditampilkan
Pengambilan izin gagal	Tombol tindakan disembunyikan karena izin menjadi kosong
ID peran/pengguna saat ini hilang	Pencegahan penghapusan pengguna saat ini mungkin tidak berlaku