RANGGAEGHAPERMANA
ID
Back to projects
  • Enterprise UI · Human Resources
  • 2025

Case study · 05 / 08

Peruri HR Portal & Operations UI

Making dense HR operations information easier to read.

Peruri HR Portal & Operations UI — screenshot

The front-end of Perum Peruri's HR portal—a login landing page plus Employee Facilities, Cost Monitoring, and Workforce Strength dashboards—together with Human Resource Operations modules built from modular pages, reusable components, structured SCSS, and a Gulp build pipeline.

My role
Front-end & Data Support
Status
Public repository

Key achievement

Turned HR reporting needs into a portal with three dashboards and consistent operational modules.

View repository Two public repositories: the HR portal (App_Human_Resource_Front-End-Peruri) and HR Operations
Peruri HR Portal & Operations UI — screenshot

01 · Context

The problem this project solves.

Primary users

  • Human Resources teams
  • Internal report users
  • Operations administrators

The problem

Workforce, facilities, cost, and employee-composition information becomes difficult to scan when distributed across dense tables and indicators.

The approach

The interface uses modular pages, KPI hierarchy, filters, charts, tables, navigation, and reusable partials to maintain a consistent visual pattern.

Key numbers

  • 2front-end repositories
  • Responsivedashboard layout
  • Gulpbuild pipeline

02 · My role

What I worked on.

Front-end & Data Support

Technology used

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

    Built the HR portal's login landing page in Peruri's visual identity.

  2. 02

    Built the Employee Facilities, Cost Monitoring, and Workforce Strength dashboards, linked through tabs.

  3. 03

    Split operational pages into modules and reusable partials such as the header, sidebar, cards, tables, and filters.

  4. 04

    Organized structured SCSS compiled through Gulp for a repeatable front-end workflow.

03 · Highlights

A few selected screens.

Click an image to view it larger.

Swipe through them all, tap an image to enlarge it.

Web

HR portal landing page

The Human Resource portal sign-in page in Peruri's visual identity.

Web

Employee facilities dashboard

Electricity, phone credit, water, and loan totals with usage charts per position.

Web

Workforce strength dashboard

Employee composition by contract status in a table and pie chart.

Web

Cost monitoring dashboard

Budget realisation, percentage spent, and monthly spending trend.

01 / 04

04 · Challenges & decisions

Technical problems and how I solved them.

01 · Challenge

Dense HR data was hard to scan

Approach

Information is layered: compact KPIs on top, charts in the middle, and detail tables below.

Result

Readers get the big picture before diving into details.

02 · Challenge

Many pages shared similar patterns

Approach

Components are split into reusable partials and styles are managed through SCSS.

Result

Pages stay consistent and new ones are faster to build.

01 / 02

05 · Outcome

What the solution delivers.

The showcase demonstrates translating internal reporting needs into a structured dashboard supported by a repeatable front-end workflow.

User flow

  1. 01Open workspace
  2. 02Choose module
  3. 03Set period
  4. 04Read KPIs
  5. 05Compare trends
  6. 06Inspect table
  7. 07Use report output

Architecture

Pages

Independent pages for different operational contexts

Partials

Header · sidebar · cards · filters · tables

Styling

Structured SCSS · responsive layout · visual consistency

Build

Gulp compilation and minification for front-end delivery

Next projectOpsHubFrom incoming stock to profit and loss in one workspace.