Ampera: Mengubah Rapat 4 Jam Menjadi 45 Menit Hanya dengan Browser

Pekerjaan Pertama Saya: Magang di Kilang Minyak

Di tahun 2019, saya mendapat kesempatan magang 6 bulan di PT Kilang Pertamina International, Refinery Unit VI Balongan. Ini pertama kalinya saya masuk ke korporasi besar. Saya ditempatkan di departemen HCBP (Human Capital Business Partner), dan seperti kebanyakan anak magang, hari-hari awal saya diisi dengan administrasi Excel: update spreadsheet, mencocokkan data, merapikan laporan.

Tidak ada yang mengharapkan banyak dari anak magang. Duduk, belajar, kerjakan apa yang diminta. Tapi justru pekerjaan rutin itu setiap hari membuat saya jadi sangat dekat dengan cara kerja departemen yang sebenarnya. Saya melihat titik-titik gesekan yang sudah tidak disadari lagi oleh orang-orang yang bertahun-tahun bekerja di sana.

Ada dua yang terus mengganjal di kepala saya. Yang pertama adalah rutinitas harian: lima spreadsheet yang sama dibuka setiap pagi, angka disalin manual antar sistem, frustrasi yang terpendam saat laporan ternyata salah dan harus diulang dari awal. Yang itu akhirnya tumbuh menjadi cikal bakal HC Dashboard, pertama direplikasi di RU IV Cilacap, lalu diadopsi kantor pusat sebagai dashboard KPI yang mencakup seluruh unit kilang di Indonesia (ceritanya lain kali). Tapi yang kedua yang lebih dulu menarik perhatian saya.

Setiap bulan, tim HCBP menghabiskan waktu berhari-hari menyiapkan materi untuk rapat perencanaan mutasi dengan General Manager dan jajaran manajemen puncak. Persiapannya melelahkan, rapatnya sendiri lambat, dan merapikan dokumen setelahnya lebih lama lagi. Semua orang menerimanya sebagai "memang begitu prosesnya."

Saya tidak bisa berhenti memikirkannya. Saya mulai mencoret-coret ide di buku catatan saat jam istirahat, melihat tool apa saja yang sudah dimiliki tim, memikirkan apa yang sebenarnya mungkin dilakukan dalam batasan lingkungan korporat yang terkunci. Akhirnya, saya memberanikan diri menemui supervisor dan mengajukan proposal untuk membangun sesuatu. Yang mengejutkan, mereka bilang iya.

Setengah Hari, Setiap Bulan, Habis untuk Menggeser Kotak

Setiap bulan, departemen HCBP mengadakan rapat dengan General Manager dan jajaran manajemen puncak untuk membahas DPKP (Daftar Perubahan Komposisi Pekerja): siapa pindah ke mana, posisi mana yang kosong, pekerja mana yang siap naik jabatan.

Sebelum Ampera, rapat ini bisa makan waktu setengah hari kerja. Prosesnya seperti ini: operator HC menggambar kotak-kotak posisi secara manual di PowerPoint, copy paste data pekerja dari spreadsheet Excel, lalu mencocokkan nilai kinerja (SMK), masa kerja, dan golongan (PRL 12 sampai 20) dari beberapa file berbeda. Setiap kali General Manager bertanya "bagaimana kalau orang ini kita pindahkan ke sini?", operator harus membongkar slide dan membangunnya ulang dari awal sementara seluruh ruangan menunggu.

Dan itu baru draft-nya. Setelah rapat selesai, operator masih harus mengambil susunan kotak kasar itu dan merapikannya menjadi dokumen yang layak: layout yang rapi, spasi yang konsisten, data yang benar, siap untuk ditandatangani. Yang sudah makan waktu berjam-jam di ruang rapat, butuh waktu lebih lama lagi di meja kerja setelahnya.

Orang-orang yang seharusnya mengambil keputusan strategis, justru menonton seseorang menggeser kotak.

Idenya: Temui User di Tempat Mereka Sudah Berada

Solusi yang paling jelas tentu membangun aplikasi web lengkap dengan database, akun pengguna, dan server. Tapi di enterprise sebesar Pertamina, jalur itu datang dengan beban birokrasi yang berat: procurement IT, audit keamanan, persetujuan infrastruktur, provisioning server, kontrak maintenance berkelanjutan. Untuk sebuah tool utilitas departemen, proses itu sendiri bisa makan waktu lebih lama dari masalah yang mau diselesaikan.

Ada juga kendala teknis yang tidak bisa dinegosiasi. Laptop perusahaan dikunci. Tidak bisa install program sembarangan. Apa pun yang saya bangun harus bisa jalan tanpa instalasi.

Jadi saya melihat apa yang sudah tersedia di setiap mesin: browser dan Excel. Tim HCBP mengelola seluruh data pekerja di dua file Excel. ZHROM berisi data posisi organisasi. DRHS berisi data pekerja. Itu adalah satu-satunya sumber kebenaran mereka, dan sudah begitu selama bertahun-tahun.

Jawabannya jadi jelas. Bangun seluruh aplikasi sebagai satu file HTML dan JavaScript yang jalan di browser. Tanpa instalasi, tanpa server, tanpa tiket IT. Cukup buka file-nya dan langsung kerja. Kalau Excel sudah menjadi integrated database mereka, maka aplikasinya cukup membaca file tersebut, memberikan interface perencanaan yang cepat dan intuitif, lalu mengekspor kembali ke Excel saat selesai. Tidak perlu migrasi, tidak perlu format baru, tidak perlu pelatihan untuk sistem yang sama sekali berbeda.

Pendekatan ini juga menjawab pertanyaan soal keamanan data secara alami. Rencana mutasi pekerja berisi informasi personel yang sensitif: nilai kinerja, golongan, band gaji, flag diskresi. Karena semuanya berjalan di laptop pengguna tanpa transmisi jaringan dan tanpa server eksternal, semua data tetap di bawah kendali langsung departemen. Tidak ada data yang keluar dari mesin.

Dalam seminggu saya sudah punya prototipe yang bisa dipakai. Setelah sebulan penyempurnaan berdasarkan feedback dari tim HCBP, tool-nya siap untuk digunakan di rapat sesungguhnya.

Cara Kerja Ampera

Ampera (Aplikasi Mutasi Pekerja) adalah single-page application yang berjalan sepenuhnya di browser. Staff HC mengimpor file Excel ZHROM dan DRHS, lalu layar berubah menjadi workspace perencanaan mutasi visual di mana setiap aksi merespons secara instan karena tidak ada server round-trip. Pure client-side JavaScript berarti setiap klik, setiap geser, setiap pencarian terjadi dalam hitungan milidetik.

Bahasa Visual yang Terasa Natural

Saya butuh interface yang langsung bisa dipahami oleh staff HC yang bukan orang teknis. Saya memilih metafora kereta api yang terasa pas dengan konteks industri di kilang:

Gerbong: satu kotak yang memetakan satu pekerja ke satu posisi, menampilkan foto, nama, angkatan, tren kinerja SMK 3 tahun, masa kerja, dan golongan PRL
Kereta: satu baris horizontal berisi Gerbong yang menunjukkan rantai penggantian. Kalau seseorang pindah dari suatu posisi, kotak berikutnya menunjukkan siapa yang mengisi kekosongan itu, dan kotak setelahnya menunjukkan siapa yang mengisi posisi orang itu, dan seterusnya. Panah berwarna menghubungkan mereka: hijau artinya promosi, merah artinya demosi, hitam artinya rotasi lateral. Sekali pandang langsung terlihat seluruh efek domino dari satu mutasi.
Section: pengelompokan per departemen yang berisi beberapa baris Kereta

Foto pekerja tampil di setiap kotak. Ini keputusan yang disengaja. Diskusi mutasi jadi lebih manusiawi kalau kita melihat orangnya, bukan sekadar nama dan nomor ID. Setiap "gerbong" membawa satu orang ke tujuan berikutnya, dan bahasa visual ini membuat langsung jelas apakah rencana keseluruhan masuk akal.

Tidak Ada Lagi Copy Paste

Ketik nomor pekerja di Gerbong mana pun, dan aplikasi langsung mengisi 17 field dari data DRHS: nama, angkatan (BPS/BPST/BKJT/Experienced Hire), tren kinerja 3 tahun (SMK_1, SMK_2, SMK_3), masa kerja, golongan PRL, pendidikan, usia, dan nilai asesmen. Sama untuk ID posisi dari ZHROM. Yang dulu butuh buka-tutup tiga spreadsheet, sekarang cukup satu ketikan.

Kepatuhan yang Sudah Tertanam

Pekerja yang memerlukan persetujuan khusus dari manajemen mendapat highlight merah "Diskresi" yang tidak mungkin terlewat. Di BUMN yang keputusan mutasinya menghadapi pengawasan regulasi, General Manager perlu langsung melihat kasus-kasus ini tanpa harus membongkar catatan. Flag-nya selalu terlihat, selalu menonjol.

Excel Masuk, Excel Keluar

Saat sesi selesai, ekspor menghasilkan workbook dengan tiga sheet:

MutasiPekerja: rencana mutasi yang mudah dibaca, siap untuk review manajemen dan tanda tangan
DataSection: seluruh state aplikasi dalam format JSON, sehingga proyek bisa dibuka dan dilanjutkan di sesi berikutnya
Log: catatan bertimestamp dari setiap aksi pengguna untuk keperluan audit

Seluruh workflow adalah sebuah loop. Impor Excel, rencanakan dengan Ampera, ekspor kembali ke Excel. Selama laptop menyala, aplikasinya jalan. Tidak perlu internet, tidak perlu server, tidak ada dependensi eksternal yang perlu dikhawatirkan.

Dampaknya

Waktu rapat: dari setengah hari menjadi 45 menit.

Dalam hitungan tahunan: rapat DPKP diadakan setiap bulan. Sebelum Ampera, setiap sesi memakan sekitar 4 jam di ruang rapat, ditambah waktu tambahan bagi operator untuk merapikan draft menjadi dokumen siap cetak. Dengan Ampera, rapat berjalan 45 menit dan output-nya sudah terformat, siap cetak, dan siap tanda tangan begitu sesi berakhir.

Itu kurang lebih 40 jam waktu leadership yang dikembalikan per tahun. General Manager dan tim HCBP mendapat waktu itu kembali untuk pekerjaan yang benar-benar membutuhkan pertimbangan mereka.

Tapi dampak sebenarnya bukan soal jam. Ini soal perubahan dinamika. Sebelumnya, General Manager duduk berjam-jam menunggu operator menyusun ulang slide. Sekarang, mereka yang mengemudikan diskusi. Tunjuk posisi, klik untuk menempatkan pekerja, lihat datanya terisi otomatis, bandingkan kandidat berdampingan, lalu lanjut. Diskusi fokus pada strategi, pada kesiapan talenta, pada kasus diskresi yang memang butuh deliberasi serius.

Tool ini akhirnya melampaui RU VI Balongan. Kantor pusat Kilang Pertamina International mengadopsi Ampera untuk perencanaan DPKP mereka sendiri, memvalidasi bahwa pendekatannya bisa berskala melampaui satu unit kilang.

Semua ini dibangun oleh anak magang, dalam satu minggu prototyping dan satu bulan penyempurnaan. Tool ini tidak sekadar menghemat waktu. Ia mengubah siapa yang memimpin percakapan.

Coba Sendiri

Penasaran seperti apa rasanya? Versi Svelte 5 berjalan sepenuhnya di browser dengan 30 pekerja contoh dan 50 posisi yang sudah terisi. Tidak perlu instalasi, tidak perlu daftar akun, tidak ada data yang keluar dari mesin Anda. Klik "Coba Demo Sekarang" dan Anda langsung masuk ke workspace dalam hitungan detik.

Coba Ampera langsung di /projects/ampera

Tertarik dengan detail teknisnya? Lanjut scroll ke bawah untuk pembahasan engineering yang lebih mendalam.

Di Balik Layar (Versi 1)

Aplikasi original hanya ~2.100 baris vanilla JavaScript. Tanpa framework, tanpa build step, tanpa dependensi yang perlu dikelola. Domain model (Worksheet, Section, Kereta, Gerbong) begitu natural dipetakan ke class object-oriented sehingga menambahkan framework justru akan menjadi kompleksitas yang tidak perlu. SheetJS menangani baca tulis Excel di browser, dan embedded Power BI dashboard memberikan manajemen analitik real-time tentang pola mutasi.

Satu keputusan yang saya cukup banggakan: output cetak. Manajemen menandatangani dokumen DPKP yang dicetak, jadi saya berinvestasi banyak di CSS yang dioptimasi untuk cetak. Branding Pertamina di setiap halaman, page break yang rapi antar section, forced color printing agar indikator panah tetap bermakna, dan kotak tanda tangan persetujuan di bagian bawah. Output-nya langsung dari browser ke printer, siap untuk meja boardroom.

Saya juga membangun tutorial infografik 11 panel langsung di dalam aplikasi. Landing page menampilkannya sebagai satu ilustrasi scrollable di bawah menu utama, sehingga user baru bisa membaca seluruh panduan sebelum mulai. Tidak perlu sesi pelatihan, yang berarti saya tidak menjadi bottleneck setiap kali ada orang baru bergabung di tim HCBP.

Detail teknis untuk developer (v1, original)

Codebase original terorganisir dalam 7 modul ES6 class:

Worksheet.js (~510 baris): root container untuk manajemen proyek/file, import/export Excel via SheetJS
Section.js (~220 baris): pengelompokan departemen dengan kontrol page break untuk cetak
Kereta.js (~150 baris): baris rantai penggantian horizontal, mengelola penyisipan dan penghapusan Gerbong
Gerbong.js (~505 baris): unit inti. Menangani data binding pekerja/posisi, pemuatan foto, siklus warna panah, dan inline editing
Data.js (~410 baris): data table berbasis Tabulator.js untuk browsing ZHROM dan DRHS, dengan fungsi smart lookup yang melakukan cross-reference ID pekerja untuk auto-populate field
View.js (~180 baris): manajemen state layar/view (menu, proyek baru, load proyek)
Logging.js (~130 baris): pencatatan aktivitas bertimestamp untuk ekspor audit trail

Library pendukung: jQuery + Bootstrap 4 (SB Admin 2) untuk UI, Tabulator.js untuk data table dengan virtual scrolling, SheetJS untuk I/O Excel di sisi client.

Versi 2: Rewrite ke Svelte 5

Di tahun 2026, saya menulis ulang Ampera dari nol sebagai aplikasi Svelte 5 yang di-deploy di Cloudflare Pages. Versi vanilla JS original bekerja sempurna sebagai file HTML tunggal, tapi saya ingin menjadikannya web app yang bisa diakses siapa saja di /projects/ampera pada situs portfolio saya.

Kenapa Ditulis Ulang?

2.100 baris vanilla JS original menjalankan fungsinya dengan sempurna. Tapi beberapa hal mendorong modernisasi ini:

Aksesibilitas: file HTML tunggal harus didistribusikan secara manual. Web app yang di-host berarti siapa saja cukup membuka URL.
Maintainability: manipulasi DOM manual dengan jQuery makin rapuh seiring fitur bertambah. Model reaktif Svelte membuat hierarki komponen eksplisit.
Tooling modern: Tailwind CSS 4 untuk styling, native <dialog> untuk modal yang aksesibel, routing berbasis file dari SvelteKit.
Integrasi portfolio: Ampera sekarang hidup berdampingan dengan proyek-proyek lain, lengkap dengan landing page yang menarik dan cross-link ke blog.

Apa yang Berubah

Domain model tetap identik. Gerbong, Kereta, Section, Worksheet: metafora kereta api diterjemahkan sempurna menjadi komponen Svelte. Yang berubah adalah cara UI di-render dan bereaksi:

Svelte 5 runes: $state untuk variabel reaktif, $derived untuk nilai computed, $props untuk input komponen, $effect untuk side effect. Tidak ada lagi patching DOM manual.
Hierarki komponen: ~26 file terorganisir dalam tree yang jelas. WorkspaceView berisi SectionBlock, yang berisi KeretaRow, yang berisi GerbongCard dan ArrowConnector. Setiap komponen memiliki logika rendering-nya sendiri.
Custom DataTable: menggantikan Tabulator.js dengan komponen Svelte yang ringan (filter per kolom, klik untuk sort, seleksi baris untuk perbandingan). Satu dependensi 200KB berkurang.
Native <dialog>: semua 8 modal menggunakan elemen HTML <dialog> dengan showModal(), mendapatkan handling backdrop click, tombol Escape, dan focus trapping secara gratis.
Print auto-scaling: event listener beforeprint mengukur rantai penggantian terpanjang, menghitung faktor skala yang seragam, dan menerapkannya ke semua baris sehingga setiap kartu dicetak dengan ukuran yang sama terlepas dari panjang rantai.
Dynamic imports: SheetJS (~500KB) dan komponen workspace dimuat on demand. Landing page tetap cepat.

Apa yang Tetap Sama

SheetJS tetap menangani I/O Excel karena tidak ada alternatif untuk parsing .xlsx di sisi client. Format ekspor identik: sheet MutasiPekerja, DataSection, dan Log. File yang diekspor dari v1 bisa diimpor ke v2.

UX inti tetap terjaga: ketik ID, 17 field terisi otomatis, panah mendeteksi promosi/demosi secara otomatis, Ctrl+P mencetak layout profesional dengan branding Pertamina dan kotak tanda tangan.

Detail teknis untuk developer (v2, Svelte 5)

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

File utama (~26 total):

worksheet.svelte.js: reactive store menggunakan $state untuk sections, logs, data ZHROM/DRHS, dan semua method mutasi
demo-data.js: sample ZHROM (50 posisi) + DRHS (30 pekerja) untuk mode demo
excel-io.js: dynamic import SheetJS, menangani loadDatabase, exportToExcel, importFromExcel
lookup.js: lookup ZHROM/DRHS berbasis array (tanpa dependensi Tabulator)
WorkspaceView.svelte: workspace utama dengan semua modal, logika print scaling, dan beforeunload warning
GerbongCard.svelte: kartu berbasis tabel yang cocok dengan layout original. 8 baris, kolom foto dengan rowspan, inline editing untuk ID dan TMT Mutasi
ArrowConnector.svelte: panah SVG yang bisa diklik, berputar melalui 4 state (promosi/demosi/lateral/swap)
DataTable.svelte: pengganti Tabulator. Filter kolom via $state, $derived untuk data terfilter, header yang bisa disort, seleksi baris opsional dengan checkbox
Modal.svelte: wrapper <dialog> reusable dengan handling backdrop click dan Escape
AmperaLanding.svelte: landing page dengan hero gradient biru, grid fitur, panduan infografik scrollable, dan link ke artikel blog

Tanpa jQuery, tanpa Bootstrap, tanpa Tabulator.js. Satu-satunya dependensi eksternal adalah SheetJS (xlsx).