Civil Service HR Web App

Civil Service HR Web App adalah aplikasi browser dari sistem kepegawaian aparatur sipil negara: satu tempat bagi pegawai untuk mengurus record-nya sendiri dan bagi admin untuk menjalankan organisasi di baliknya. Pegawai melihat profil, keluarga, riwayat karier dan kompetensinya, mengusulkan koreksi, dan mengikuti layanan kenaikan gaji berkala, kenaikan pangkat, dan pensiunnya; admin mengelola bagan organisasi berversi, data referensi, dan akun. Aplikasi ini single-page application dalam Vue dan TypeScript yang berbicara dengan satu backend, yaitu core API sistemnya.

Sebagian besar keputusannya menyangkut cara menjaga aplikasi yang sangat lebar tetap kecil: puluhan jenis record, dua jenis pemakai yang sangat berbeda, dan dua ukuran layar dilayani oleh segelintir definisi — satu untuk navigasi, satu untuk form, satu untuk kolom, satu katalog untuk data referensi — bukan oleh satu halaman yang ditulis untuk masing-masing.

Sekilas

Bahasa & framework	TypeScript, dengan Vue 3, Pinia, vue-router, vue-i18n, Tailwind CSS, dan Vite
Arsitektur	Feature-Based Frontend Architecture
Versi	2.1.0
Status	Dalam pengembangan
Bentuk	Single-page application, satu aplikasi untuk pegawai dan admin
Kode sumber	Privat

Yang dikerjakannya

A. Memberi setiap pegawai portal swalayan

Sisi pegawai di aplikasi ini punya lima tujuan — beranda, profil, karier, kompetensi, dan layanan. Di ponsel kelimanya duduk di bar bawah; di desktop menjadi menu atas yang item-itemnya membuka dropdown berisi halamannya. Membuka satu grup memperlihatkan halaman-halamannya sebagai kartu, dan di dalam halaman sederet chip berpindah ke halaman saudaranya tanpa harus kembali.

B. Dimulai dari yang perlu diperhatikan

Beranda meringkas diri pegawai, mengingatkan kenaikan gaji berkala, kenaikan pangkat, dan pensiun yang akan datang, mengikuti usulan dan layanan yang sedang berjalan, dan memperlihatkan seberapa lengkap datanya. Setiap data yang kurang punya tombol yang langsung membuka form yang dibutuhkan untuk melengkapinya.

C. Menampilkan setiap jenis riwayat di satu halaman

Pangkat, jabatan, kenaikan gaji berkala, pendidikan, pelatihan, sertifikasi, kinerja, dan lainnya semua ditampilkan oleh satu halaman generik. Riwayat yang memang kronologis tampil sebagai linimasa; yang lain sebagai tabel di desktop dan sebagai kartu di ponsel.

D. Mengubah perubahan menjadi usulan

Pegawai mengubah datanya sendiri dengan mengusulkannya. Dua puluh empat jenis riwayat bisa ditambah, dikoreksi, atau dihapus lewat satu mesin form, dengan field khusus di tempat yang dibutuhkan domainnya: nominal kenaikan gaji berkala dihitung dari tabel gaji, dan jabatan dipilih dari peta jabatan sebagaimana adanya pada tanggal yang dimaksud. Halaman usulan milik pegawai membandingkan sebelum dan sesudah dengan label, membawa lampiran dan log, dan memungkinkannya membatalkan usulan atau memperbaiki lalu mengajukan ulang usulan yang dikembalikan.

E. Menjalankan layanan kenaikan gaji berkala, kenaikan pangkat, dan pensiun

Layanan dibuka sebagai draf yang mendaftar dokumen yang diwajibkan aturannya. Pegawai mengunggah satu file untuk setiap syarat, mengajukannya, dan bisa membatalkannya selama masih menunggu.

F. Mengurus keluarga, profil, dan identitas

Pasangan, anak, dan orang tua, pernikahan, hubungan, dan tanggungan dikelola sebagai record keluarga. Profil memuat data pribadi, alamat, kontak, dan dokumen kepegawaian per jenis, dan verifikasi identitas menanamkan tantangan wajah langsung di halaman.

G. Menjalankan organisasi untuk admin

Admin melihat susunan setiap perangkat daerah sebagai bagan organisasi: kotak yang dihubungkan garis, cabang yang bisa dilipat, deretan panjang unit daun yang ditumpuk supaya bagan tetap terbaca, dan tampilan cetak. Timeline mendaftar versi-versi perangkat daerah itu, field tanggal memperlihatkan susunan pada hari apa pun, dan draf dibandingkan dengan versi asalnya sebelum berlaku. Susunan bisa diimpor, jabatan beserta pemangkunya dikelola di bagan, dan peraturan serta perangkat daerah punya halamannya sendiri.

H. Mengelola data referensi dan akun

Setiap tabel referensi punya halaman yang dibangun dari katalog yang disediakan API, dengan tampilan khusus bila tabelnya membutuhkan, misalnya matriks gaji. Admin juga mengerjakan antrean verifikasi identitas dan mengelola akun user serta pengelola akun dari dashboard.

I. Membawa orang masuk

Orang login dengan password atau lewat single sign-on eksternal, dengan autentikasi dua faktor, mengaktifkan akun baru dari undangan, dan me-reset password yang terlupa.

Antarmuka

Area	Yang bisa dilakukan di sana
Beranda	melihat ringkasan, pengingat, yang sedang berjalan, dan data yang kurang
Profil	data pribadi dan identitas, alamat dan kontak, keluarga, dokumen kepegawaian
Karier dan kompetensi	setiap jenis riwayat, dan usulan untuk mengubahnya
Layanan	usulannya, serta layanan kenaikan gaji berkala, kenaikan pangkat, dan pensiun
Organisasi	bagan berversi, peta jabatan, peraturan, dan perangkat daerah — untuk admin
Data referensi	setiap tabel referensi, dibangun dari katalog API — untuk admin
Akun	verifikasi identitas, akun user, pengelola akun, dashboard — untuk admin
Masuk	login, sign-on eksternal, dua faktor, undangan, reset password

Standar

Standar	Yang dijaminnya di sini
OAuth 2.0 dan OpenID Connect dengan PKCE (RFC 7636)	login lewat provider eksternal tanpa client secret di browser
JSON Web Token	access token berumur pendek yang disimpan di memori dan diperbarui diam-diam
TOTP (RFC 6238)	autentikasi dua faktor dengan aplikasi authenticator apa pun
WAI-ARIA, dengan pedoman navigasi Material dan Human Interface	tiga sampai lima tujuan, halaman aktif diumumkan, target sentuh paling kecil 44 piksel
ISO 8583 dan ISO 4217	field uang menyimpan integer dalam satuan terkecil mata uangnya
Strict TypeScript	setiap build memeriksa tipe seluruh aplikasi sebelum menghasilkan apa pun
Chrome DevTools Protocol	pemeriksaan ujung-ke-ujung berjalan di browser sungguhan terhadap API sungguhan

Di dalamnya

Aplikasi ini mengikuti Feature-Based Frontend Architecture: setiap fitur — masuk, beranda, halaman pegawai, organisasi, data referensi, administrasi — punya view, komponen, dan composable-nya sendiri, dan fitur tak pernah saling meng-import. Komponen tak pernah memanggil jaringan sendiri; setiap request lewat satu lapisan service dengan satu HTTP client, dan state sesi serta antarmuka tinggal di beberapa store bersama. Desain visualnya datang dari paket design-system terpisah, sehingga tampilannya bisa berubah tanpa menyentuh satu fitur pun.

Keputusan rancangan

Satu definisi navigasi, empat cara menampilkannya. Grup dan halaman di sisi pegawai didefinisikan sekali — route, label, ikon, dan angka yang ditampilkan — dan definisi tunggal itu mengisi menu desktop, bar bawah ponsel, halaman grup, dan chip. Menambah halaman cukup satu entri, dan keempat tampilan tak mungkin berselisih tentang apa yang ada.

Satu mesin form untuk setiap jenis usulan. Setiap jenis riwayat dijelaskan oleh satu definisi yang dipakai mesin itu untuk menambah, mengoreksi, dan menghapus. Jenis record baru adalah definisi baru, bukan form baru, dan setiap usulan berperilaku sama, dari pesan validasi sampai lampiran.

Satu definisi kolom, tabel atau tumpukan kartu. Daftar menyatakan kolomnya sekali, termasuk mana yang menjadi judul dan mana yang sekunder. Di desktop definisi itu menjadi tabel; di ponsel menjadi tumpukan kartu. Tak ada yang merawat dua tata letak yang lama-lama berbeda arah.

Halaman referensi berasal dari katalog API. API mempublikasikan tabel referensi apa saja yang ada, cara mengelompokkannya, dan cara menyaringnya. Aplikasi membangun halaman untuk masing-masing dari katalog itu, sehingga tabel referensi baru muncul tanpa rilis antarmuka yang baru; hanya tabel yang bentuknya tak biasa yang mendapat tampilan sendiri.

Antarmuka membaca izin, tak pernah nama peran. Sesudah login aplikasi menerima izin-izin orang itu, masing-masing dengan lingkupnya, dan memutuskan menu dan tombol yang ditampilkan dari situ. Menyembunyikan tombol hanyalah kemudahan; server memeriksa ulang setiap request.

Antarmuka yang menggambar bagan. API mengembalikan organisasi sebagai data bersarang, dan komponen rekursif merender setiap unit lalu merender dirinya lagi untuk setiap anak, dengan garis penghubung digambar oleh CSS. Gambarnya urusan antarmuka, bukan urusan database.

Draf dibandingkan lewat garis asal, bukan nama. Saat susunan baru ditinjau, setiap unit dan jabatan dicocokkan dengan pendahulunya lewat tautan yang dicatat sistem, sehingga unit yang diganti nama atau dipindah tampil sebagai diganti nama atau dipindah, bukan sebagai satu unit yang dihapus dan unit lain yang ditambah.

Uang adalah integer sejak ketukan pertama. Field uang menampilkan rupiah dengan pemisah ribuan dan koma desimal selagi diketik, tetapi nilai yang dipegangnya selalu integer, hitungan seperseratus rupiah. Tak ada bagian aplikasi yang berhitung dengan string terformat atau float.

Sesi tinggal di memori, dengan satu refresh pada satu waktu. Access token hanya disimpan di memori. Saat beberapa request sekaligus mendapati token-nya kedaluwarsa, yang pertama memulai satu refresh dan yang lain menunggu di antrean, lalu masing-masing diulang dengan token baru; bila refresh gagal, sesi berakhir dengan rapi.

Diuji di browser sungguhan. Di samping build yang menolak menghasilkan apa pun yang tak lolos pemeriksaan tipe, dan skrip yang memeriksa setiap kunci terjemahan, skrip ujung-ke-ujung mengendalikan browser sungguhan lewat Chrome DevTools Protocol terhadap API sungguhan: usulan, halaman pegawai, bagan organisasi beserta suntingannya, data referensi, akun, dan kasus tepi.

Terkait

Core API tempat aplikasi ini berbicara, dan satu-satunya backend yang dikenalnya.

Tantangan wajah yang tertanam di verifikasi identitas.

Kenapa field uang menyimpan integer dalam satuan terkecil mata uangnya.

Bagaimana bagan organisasi berversi yang digambar aplikasi ini disimpan dan dibaca.

Bagaimana izin dan lingkup diberikan sebelum dibaca aplikasi ini.

Istilah

Single-page application

Aplikasi web yang dimuat sekali, lalu mengganti layarnya di browser dan tidak memuat halaman baru untuk masing-masing.

Usulan

Perubahan yang diminta pegawai atas record-nya sendiri, baru diterapkan sesudah pemeriksa menyetujuinya.

Data referensi

Daftar yang menjadi pilihan record lain, misalnya pangkat, agama, atau jenis cuti.

Garis asal

Tautan tercatat dari unit atau jabatan ke pendahulunya di versi susunan sebelumnya.