RANGGAEGHAPERMANA
EN
Kembali ke daftar proyek
  • Enterprise UI · Human Resources
  • 2025

Studi kasus · 05 / 08

Peruri HR Portal & Operations UI

Menyederhanakan informasi operasional SDM yang padat.

Peruri HR Portal & Operations UI — tangkapan layar

Front-end portal SDM Perum Peruri—landing page login, dashboard Fasilitas Karyawan, Monitoring Biaya, dan Kekuatan Pegawai—serta modul Human Resource Operations dengan halaman modular, komponen reusable, SCSS terstruktur, dan build pipeline Gulp.

Peran saya
Front-end & Data Support
Status
Public repository

Pencapaian utama

Menerjemahkan kebutuhan pelaporan SDM menjadi portal dengan tiga dashboard dan modul operasional yang konsisten.

Lihat repository Dua repository publik: portal SDM (App_Human_Resource_Front-End-Peruri) dan HR Operations
Peruri HR Portal & Operations UI — tangkapan layar

01 · Konteks

Masalah yang ingin diselesaikan.

Pengguna utama

  • Tim Human Resources
  • Pengguna laporan internal
  • Administrator operasional

Masalahnya

Informasi SDM seperti ringkasan fasilitas, biaya, dan komposisi pegawai mudah menjadi padat serta sulit dipindai ketika disajikan dalam banyak tabel dan indikator.

Pendekatannya

Antarmuka disusun menjadi halaman modular dengan hierarki KPI, filter, chart, tabel, sidebar, serta partial reusable agar pola visual tetap konsisten.

Angka kunci

  • 2repository front-end
  • Responsivelayout dashboard
  • Gulpbuild pipeline

02 · Peran saya

Bagian yang saya kerjakan.

Front-end & Data Support

Teknologi yang digunakan

  • HTML5
  • CSS3
  • JavaScript
  • SCSS
  • Bootstrap
  • Chart.js
  • DataTables
  • Gulp
  1. 01

    Membangun landing page login portal SDM dengan identitas visual Peruri.

  2. 02

    Menyusun dashboard Fasilitas Karyawan, Monitoring Biaya, dan Kekuatan Pegawai yang saling terhubung lewat tab.

  3. 03

    Memecah halaman operasional menjadi modul dan partial reusable seperti header, sidebar, kartu, tabel, dan filter.

  4. 04

    Mengelola SCSS terstruktur yang dikompilasi lewat Gulp untuk workflow front-end yang bisa diulang.

03 · Sorotan

Beberapa tampilan pilihan.

Klik gambar untuk melihatnya lebih besar.

Geser untuk melihat semua, ketuk gambar untuk memperbesar.

Web

Landing page portal SDM

Halaman masuk portal Human Resource dengan identitas visual Peruri.

Web

Dashboard fasilitas karyawan

Ringkasan listrik, pulsa, air, dan kredit beserta diagram pemakaian per jabatan.

Web

Dashboard kekuatan pegawai

Komposisi pegawai per status kontrak dalam tabel dan pie chart.

Web

Dashboard monitoring biaya

Realisasi anggaran, persentase terpakai, dan tren pengeluaran bulanan.

01 / 04

04 · Tantangan & keputusan

Masalah teknis dan cara saya menyelesaikannya.

01 · Tantangan

Data SDM padat dan sulit dipindai

Pendekatan

Informasi disusun berlapis: KPI ringkas di atas, grafik di tengah, dan tabel detail di bawah.

Hasil

Pembaca menangkap gambaran besar dulu sebelum masuk ke detail.

02 · Tantangan

Banyak halaman dengan pola serupa

Pendekatan

Komponen dipecah menjadi partial reusable dan gaya dikelola lewat SCSS.

Hasil

Tampilan antarhalaman konsisten dan halaman baru lebih cepat dibuat.

01 / 02

05 · Hasil

Apa yang dihadirkan solusi ini.

Showcase memperlihatkan kemampuan mengubah kebutuhan pelaporan internal menjadi dashboard yang lebih terstruktur dan siap dikembangkan melalui workflow front-end.

Alur penggunaan

  1. 01Buka workspace
  2. 02Pilih modul
  3. 03Atur periode
  4. 04Baca KPI
  5. 05Bandingkan tren
  6. 06Telusuri tabel
  7. 07Gunakan hasil laporan

Arsitektur

Pages

Halaman mandiri untuk konteks operasional yang berbeda

Partials

Header · sidebar · cards · filters · tables

Styling

SCSS terstruktur · responsive layout · design consistency

Build

Gulp compile dan minify untuk publikasi front-end

Proyek berikutnyaOpsHubDari stok masuk sampai laba rugi dalam satu workspace.