Ampera: How I Turned an 4-Hour Meeting into 45 Minutes with Just a Browser

My First Real Job Was an Internship at a Refinery

In 2019, I landed a 6-month internship at PT Kilang Pertamina International, Refinery Unit VI Balongan. It was my first time stepping into a large corporation. I was assigned to the HCBP (Human Capital Business Partner) department, and like most interns, my early days were filled with Excel administration: updating spreadsheets, cross-referencing data, formatting reports.

Nobody expects much from the intern. You sit, you learn, you do what you are told. But doing that routine work every day put me unusually close to how the department actually operated. I saw the friction points that people who had been there for years had stopped noticing.

There were two that kept nagging at me. The first was the daily grind: the same five spreadsheets opened every morning, numbers copied by hand between systems, the quiet frustration when a report came back with errors and needed to be redone from scratch. That one eventually grew into what became the HC Dashboard, first replicated at RU IV Cilacap, then adopted by head office as a KPI dashboard spanning every refinery unit across Indonesia (a story for another time). But the second one caught my attention first.

Every month, the HCBP team spent days preparing materials for a transfer planning meeting with General Managers and top management. The preparation was painful, the meeting itself was slow, and the cleanup afterward took even longer. Everyone accepted it as "just how things are."

I could not stop thinking about it. I started sketching ideas in my notebook during lunch breaks, looking at what tools the team already had access to, figuring out what was actually possible within the constraints of a locked-down corporate environment. Eventually, I walked up to my supervisor and proposed building something. To my surprise, they said yes.

Half a Day, Every Month, Spent on Rectangles

Every month, the HCBP department sits down with General Managers and top management to discuss DPKP (Daftar Perubahan Komposisi Pekerja): who moves where, which positions open up, which employees are ready for promotion.

Before Ampera, this meeting consumed half the workday. The process looked like this: an HR operator would manually draw rectangular position boxes in PowerPoint, copy paste employee data from Excel spreadsheets, and cross-reference performance scores (SMK), tenure, and grade levels (PRL 12 to 20) across multiple files. Every time a General Manager asked "what if we move this person here instead?", the operator had to tear apart the slide and rebuild it from scratch while the room waited.

And that was just the draft. After the meeting, the operator still had to take that rough arrangement of rectangles and polish it into a properly formatted document: clean layouts, consistent spacing, correct data, ready for signatures. What took hours in the meeting room took even more hours at the desk afterward.

The people who should have been making strategic decisions were watching someone shuffle rectangles.

The Idea: Meet Users Where They Already Are

The obvious solution would have been to build a proper web application with a database, user accounts, and a hosted server. But in a large enterprise like Pertamina, that path comes with serious bureaucratic overhead: IT procurement, security audits, infrastructure approvals, server provisioning, ongoing maintenance contracts. For a departmental utility tool, that process alone could take longer than the problem was worth.

There was also a hard technical constraint. Company laptops are locked down. You cannot install arbitrary programs on them. Whatever I built had to run without installation.

So I looked at what was already available on every single machine: a browser and Excel. The HCBP team manages all employee data in two Excel files. ZHROM holds organizational positions. DRHS holds employee records. That is their single source of truth and it has been for years.

The answer became clear. Build the entire application as a single HTML and JavaScript file that runs in the browser. No installation, no server, no IT ticket. Just open the file and start working. If Excel is already the integrated database, then the app should simply consume those files, give users a fast and intuitive planning interface, and export back to Excel when they are done. No migration, no new formats, no training on a completely different system.

This approach also solved the security question naturally. Employee transfer plans contain sensitive personnel information: performance scores, grade levels, salary bands, discretionary flags. By running entirely on the user's laptop with zero network transmission and no external servers, all data stays under the department's direct control. Nothing leaves the machine.

I had a working prototype within a week. After a month of refinement based on feedback from the HCBP team, the tool was ready for production use.

How Ampera Works

Ampera (Aplikasi Mutasi Pekerja) is a single-page application that runs entirely in the browser. HR staff import their ZHROM and DRHS Excel files, and the screen transforms into a visual transfer planning workspace where every action responds instantly because there are no server round-trips. Pure client-side JavaScript means every click, every drag, every lookup happens in milliseconds.

A Visual Language That Feels Natural

I needed the interface to feel immediately understandable for non-technical HR staff. I chose a railway metaphor that resonated with the industrial context at the refinery:

Gerbong (train car): a single box mapping one employee to one position, displaying their photo, name, intake batch, 3-year SMK performance trend, tenure, and PRL grade
Kereta (train): a horizontal row of Gerbong boxes showing a replacement chain. When someone moves out of a position, the next box shows who fills that vacancy, and the box after that shows who fills that person's now-empty seat, and so on. Color-coded arrows connect them: green means promotion, red means demotion, black means lateral move. One glance tells you the entire ripple effect of a single transfer.
Section: a department grouping containing multiple Kereta rows

Employee photos appear in every box. This was a deliberate choice. Transfer discussions become more thoughtful when you see the person, not just a name and an ID number. Each "car" carries one person to their next destination, and the visual language makes it obvious whether the overall plan makes sense.

No More Copy Pasting

Type an employee ID into any Gerbong and the app auto-populates 17 fields from the DRHS data: name, intake batch (BPS/BPST/BKJT/Experienced Hire), 3-year performance trend (SMK_1, SMK_2, SMK_3), tenure, PRL grade, education, age, and assessment scores. Same for position IDs from ZHROM. What used to require flipping between three spreadsheets now happens in one keystroke.

Compliance Built In

Employees requiring special management approval get a red "Diskresi" highlight that is impossible to miss. In a state-owned enterprise where transfer decisions face regulatory scrutiny, General Managers need to spot these cases immediately without sifting through notes. The flag is always visible, always prominent.

Excel In, Excel Out

When the session is done, the export produces a workbook with three sheets:

MutasiPekerja: the human-readable transfer plan, ready for management review and signatures
DataSection: the full application state serialized as JSON, so the project can be reopened and continued in a future session
Log: a timestamped record of every user action for audit purposes

The entire workflow is a loop. Import your Excel, plan with Ampera, export back to Excel. If the laptop is on, the app works. No internet, no servers, no external dependencies to worry about.

The Impact

Meeting time: from half a day to 45 minutes.

Put that in annual terms. The DPKP meeting happens every month. Before Ampera, each session ran roughly 4 hours in the meeting room, plus additional time for the operator to polish the draft into a print-ready document afterward. With Ampera, the meeting runs 45 minutes and the output is already formatted, print-ready, and signature-ready the moment the session ends.

That is roughly 40 hours of leadership time recovered per year. General Managers and the HCBP team get that time back for work that actually requires their judgment.

But the real impact was not the hours. It was the shift in dynamic. Before, General Managers sat through long stretches of waiting while an operator rearranged slides. Now, they drive the conversation themselves. Point at a position, click to assign an employee, see the data populate, compare candidates side by side, and move on. The discussion focuses on strategy, on talent readiness, on discretionary cases that need real deliberation.

The tool eventually reached beyond RU VI Balongan. Kilang Pertamina International's head office adopted Ampera for their own DPKP planning, validating that the approach scaled beyond a single refinery unit.

All of this built by an intern, in one week of prototyping and one month of refinement. The tool did not just save time. It changed who owns the conversation.

Try It Yourself

Curious how it feels? The Svelte 5 rewrite runs entirely in your browser with 30 sample employees and 50 positions pre-loaded. No installation, no sign-up, no data leaves your machine. Click "Coba Demo Sekarang" and you are in the workspace within seconds.

Try Ampera live on /projects/ampera

Interested in the technical details? Keep reading below for the engineering deep dive.

Under the Hood (Version 1)

The original application is ~2,100 lines of vanilla JavaScript. No framework, no build step, no dependencies to manage. The domain model (Worksheet, Section, Kereta, Gerbong) mapped so naturally to object-oriented classes that adding a framework would have been unnecessary complexity. SheetJS handles Excel reading and writing in the browser, and an embedded Power BI dashboard gives management real-time analytics on transfer patterns.

One decision I am particularly proud of: the print output. Management signs the printed DPKP document, so I invested heavily in print-optimized CSS. Pertamina branding on every page, proper page breaks between sections, forced color printing so the arrow indicators remain meaningful, and signature approval boxes at the bottom. The output goes straight from browser to printer, ready for the boardroom table.

I also built an 11-panel infographic tutorial directly into the app. The landing page displays it as a single scrollable illustration below the main menu, so new users can read through the entire guide before starting. No training session required, which meant I did not become a bottleneck every time someone new joined the HCBP team.

Technical details for developers (v1, original)

The original codebase was organized into 7 ES6 class modules:

Worksheet.js (~510 lines): root container handling project/file management, Excel import/export via SheetJS
Section.js (~220 lines): department groupings with page break controls for printing
Kereta.js (~150 lines): horizontal replacement chain rows, managing Gerbong insertion and deletion
Gerbong.js (~505 lines): the core unit. Handles employee/position data binding, photo loading, arrow color cycling, and inline editing
Data.js (~410 lines): Tabulator.js powered data tables for ZHROM and DRHS browsing, with smart lookup functions that cross-reference employee IDs to auto-populate fields
View.js (~180 lines): screen/view state management (menu, new project, load project)
Logging.js (~130 lines): timestamped activity tracking for audit trail export

Supporting libraries: jQuery + Bootstrap 4 (SB Admin 2) for UI, Tabulator.js for virtual-scrolled data tables, SheetJS for client-side Excel I/O.

Version 2: The Svelte 5 Rewrite

In 2026, I rewrote Ampera from scratch as a full Svelte 5 application deployed on Cloudflare Pages. The original vanilla JS version worked brilliantly as a single HTML file, but I wanted it to live as a proper web app at /projects/ampera on my portfolio site, accessible to anyone with a browser.

Why Rewrite?

The original 2,100 lines of vanilla JS served its purpose perfectly. But several things motivated the modernization:

Accessibility: the single HTML file had to be manually distributed. A hosted web app means anyone can just open a URL.
Maintainability: vanilla DOM manipulation with jQuery becomes fragile as features grow. Svelte's reactive model makes the component hierarchy explicit.
Modern tooling: Tailwind CSS 4 for styling, native <dialog> for accessible modals, SvelteKit's file-based routing.
Portfolio integration: Ampera now lives alongside my other projects with a polished landing page and blog cross-links.

What Changed

The domain model stayed identical. Gerbong, Kereta, Section, Worksheet: the railway metaphor translates perfectly into Svelte components. What changed was how the UI renders and reacts:

Svelte 5 runes: $state for reactive variables, $derived for computed values, $props for component inputs, $effect for side effects. No more manual DOM patching.
Component hierarchy: ~26 files organized into a clear tree. WorkspaceView contains SectionBlock, which contains KeretaRow, which contains GerbongCard and ArrowConnector. Each component owns its own rendering logic.
Custom DataTable: replaced Tabulator.js with a lightweight Svelte component (filterable columns, click to sort, row selection for comparison). One less 200KB dependency.
Native <dialog>: all 8 modals use the HTML <dialog> element with showModal(), getting free backdrop click handling, Escape key, and focus trapping.
Print auto-scaling: a beforeprint event listener measures the widest replacement chain, calculates a uniform scale factor, and applies it to all rows so every card prints at the same size regardless of chain length.
Dynamic imports: SheetJS (~500KB) and the workspace components load on demand. The landing page stays fast.

What Stayed the Same

SheetJS still handles Excel I/O since there is no alternative for client-side .xlsx parsing. The export format is identical: MutasiPekerja, DataSection, and Log sheets. Files exported from v1 can be imported into v2.

The core UX is preserved: type an ID, 17 fields auto-populate, arrows detect promotion/demotion automatically, Ctrl+P prints a professional layout with Pertamina branding and signature boxes.

Technical details for developers (v2, Svelte 5)

Stack: SvelteKit 2, Svelte 5 (runes API), Tailwind CSS 4, Cloudflare Pages.

Key files (~26 total):

worksheet.svelte.js: reactive store using $state for sections, logs, ZHROM/DRHS data, and all mutation methods
demo-data.js: sample ZHROM (50 positions) + DRHS (30 employees) for the demo mode
excel-io.js: dynamic import of SheetJS, handles loadDatabase, exportToExcel, importFromExcel
lookup.js: array-based ZHROM/DRHS lookups (no Tabulator dependency)
WorkspaceView.svelte: main workspace with all modals, print scaling logic, and beforeunload warning
GerbongCard.svelte: table-based card matching the original layout. 8 rows, photo column with rowspan, inline editing for IDs and TMT Mutasi
ArrowConnector.svelte: clickable SVG arrows cycling through 4 states (promotion/demotion/lateral/swap)
DataTable.svelte: Tabulator replacement. Column filters via $state, $derived for filtered data, sortable headers, optional row selection with checkboxes
Modal.svelte: reusable <dialog> wrapper with backdrop click and Escape handling
AmperaLanding.svelte: landing page with blue gradient hero, features grid, scrollable infographic guide, and blog post link

No jQuery, no Bootstrap, no Tabulator.js. Only external dependency is SheetJS (xlsx).