Back to projects

Case Study

Pertamina Pertagas

The system Pertamina Pertagas runs its gas distribution on. A dashboard, a role-aware back office, reporting, delivery tracking and an audit trail, replacing a process that used to run on paper.

My Role

Frontend developer on the project team.

Tech Stack

Next.jsReactPostgreSQL

Pertamina Pertagas delivers natural gas to companies across Indonesia. Every delivery has a record: how much went out, who received it, what it was worth, whether it has been paid, where the delivery has got to, and more.

For a long time all of this was managed by hand, which is very vulnerable to human error. That way of working led to operational losses, with figures that did not match expectations. The company wanted to move the whole operation onto a digital system, where every delivery record is saved and can be analysed for whatever the business needs next.

I joined the project team as the front-end developer. I built the dashboard, turned the numbers into something meaningful, and integrated the API.

The problem

  • Everything was recorded by hand. One slip anywhere in the chain became a figure nobody could trace back, and the losses showed up later as numbers that did not match expectations.
  • No single place to see how the business was doing. Answering how many orders came in this month, or which customer is buying most, meant collecting it yourself.
  • Master data lived in scattered files. Filling stations, customer companies, vehicles, signatories and users were all maintained separately.
  • No separation between who can look and who can change. The people who need to read the numbers are not the people who should be approving deliveries.
  • No way to see where a delivery had got to. A delivery passes through many hands, and there was nowhere to look up which step it was on.
  • No record of who did what. When a figure changed, there was no way to tell who changed it, which is a problem the moment anyone audits you.

What I built

A dashboard that answers the daily questions

Pick a date range and the top of the page gives you the three numbers people ask for most: how many orders came in, how many deliveries went out, and what all of it was worth.

Underneath is the breakdown by customer company, which you can switch between transaction value and transaction frequency. That answers the question that always comes next: fine, but who is that coming from?

Further down are the contracts coming up for expiry, and the distribution trend as a line chart grouped by day and by month. Daily shows you this week's rhythm. Monthly shows you whether the year is going anywhere.

A back office for everything the process runs on

Deliveries depend on a lot of supporting data: which filling stations are operating, which are mother stations, which companies are customers, which vehicles are approved, who is allowed to sign a document. All of it is managed here instead of in separate files.

Every role sees a different dashboard

There are seven roles, and each one gets its own version of the app. This is not just hiding a button. The menu changes, the actions on each row change, and the create and approve buttons only appear for the people allowed to use them.

The same company list, for two different roles:

One can only look. The other can create, edit and select in bulk. Roles are assigned in the back office, and everything else follows from that.

Reports you can take with you

Numbers end up in meetings, emails and official documents. The moment someone retypes a figure by hand you are back where the company started, so every report filters by date range and exports to PDF or Excel.

The volume report is the detailed one. Gas can be measured three ways, and different teams need different units, so it shows cubic metres, MMBtu and MMScf side by side rather than making anyone convert. Below the totals is every individual delivery, down to the pressure and temperature at the start and end of filling, the exact fill times, and the GHV used.

The PDFs are put together by the server rather than by the browser, so everyone gets an identical document no matter which computer they asked from.

Tracking a delivery from order to paid

A delivery order passes through eleven steps, from pending and validation through assigning a vehicle, charging, shipping and finally payment. The tracking page shows which step an order is on, who handled each one, and how long it waited before the next.

That waiting time is the useful part. It turns a vague sense that things are slow into a specific step you can point at.

An activity log for audit

Every action anyone takes in the dashboard is recorded: who validated an order, who changed a GHV value, who downloaded a report, who approved a new vehicle, who topped up a deposit. Searchable, and filterable by date.

This one exists because the company is audited. When a figure is questioned months later, there is now a name and a timestamp against it.

The result

  • Delivery records are captured as they happen instead of being written down by hand, so the figures the business reports come from one place.
  • The state of the business is a page you open rather than something someone has to assemble.
  • People see and change only what their role allows, which is what made it safe to put real commercial figures in front of everyone who needs them.
  • A delivery can be traced to the step it is sitting on, and a slow step can be named.
  • Every change carries a name and a timestamp, which is what an audit actually asks for.

Built with Next.js and React, on top of a PostgreSQL database.