Kodingan Iseng: Dashboard Catatan Hutang

Hari ini aku mau cerita soal proyek kecil yang awalnya iseng aja dibuat, tapi ternyata malah lumayan berguna banget dalam kehidupan sehari-hari. Jadi ceritanya beberapa hari lalu, aku baru aja ngalamin kejadian klasik: temen minjem duit, aku bilang “yaudah, ntar aja bayarnya,” terus beberapa hari kemudian…
Aku lupa.

Kadang lupa siapa yang minjem, kadang lupa berapa yang dipinjemin, malah kadang lupa ke siapa aja aku minjemin uang.

Akhirnya dari kejadian itu, aku kepikiran: kayaknya aku butuh tempat buat catat hutang kecil-kecilan, tapi yang gampang diakses dan gak ribet.
Kalau harus download aplikasi keuangan lengkap rasanya terlalu berat buat sekadar nyatet 2-3 transaksi.

Terus muncul ide: “Kenapa gak bikin aja dashboard sederhana pakai HTML + JavaScript?”

Gak usah ribet backend-backendan,
Gak perlu install apa-apa,
Semua jalan di browser, dan datanya bisa langsung disimpan lokal di komputer atau HP sendiri.

Proyek ini aku kerjain sambil ngopi, mungkin cuma butuh waktu 1-2 jam buat ngerjain versi pertamanya.
Sederhana banget, tapi langsung bisa dipakai.

Struktur Dashboardnya Gimana?

Bayangin aja tampilannya kayak tabel Excel, tapi tampil di browser.

Ada:

• Judul dashboard yang ramah,
• Tombol tambah data baru,
• Tabel daftar hutang (dengan kolom nama, hutang, bayar, sisa),
• Tombol edit sama hapus buat ngatur data,
• Plus tambahan kecil: bisa unduh semua catatan ke file .txt buat backup.

Contoh potongan HTML utamanya kayak gini:

<h1>Kelola Catatan Hutang Anda</h1>

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">[+] Tambah</button>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>Hutang</th>
      <th>Bayar</th>
      <th>Sisa</th>
      <th>Aksi</th>
    </tr>
  </thead>
  <tbody id="orderTableBody">
    <!-- Data dinamis di sini -->
  </tbody>
</table>

Gampang banget, kan?

Modal Tambah Data

Kalau mau masukin data baru, aku pakai modal dari Bootstrap.
Modal itu istilahnya popup form kecil, yang muncul di tengah layar.
Isi form-nya simpel: nama orang, berapa hutangnya, berapa yang udah dibayar.

Nah, ini kira-kira bentuk HTML-nya:

<form id="orderForm">
  <input type="text" id="orderName" placeholder="Nama" required>
  <input type="number" id="orderDue" placeholder="Hutang" required>
  <input type="number" id="orderPaid" placeholder="Bayar" required>
  <input type="text" id="orderStatus" readonly placeholder="Status">
  <button type="submit">Simpan</button>
</form>

Waktu kita isi dan klik Simpan, data itu langsung masuk ke tabel.
Gak perlu refresh halaman, karena semua ditangani lewat JavaScript.

Nyimpen Data di Browser, Biar Gampang

Dari awal, aku pengen dashboard ini bisa dipake offline.
Kalau harus koneksi internet buat simpen data, malah ribet.

Solusinya?
Pakai localStorage.

localStorage itu tempat penyimpanan kecil bawaan browser. Kita bisa simpan data JSON, dan data itu akan tetap ada meskipun browser ditutup atau komputer direstart.

Cara simpennya simpel banget:

let orders = JSON.parse(localStorage.getItem('orders')) || [];

orders.push({ name, due, paid, status });

localStorage.setItem('orders', JSON.stringify(orders));

Dengan trik kecil ini, dashboardku jadi semi-aplikasi pribadi yang bisa dipakai setiap hari.
Gak perlu server, gak perlu database, cukup browser biasa aja.

Edit, Hapus, dan Download Data

Selain tambah data baru, aku juga tambahin fitur:

• Edit data (kalau salah input),
• Hapus data (kalau mau bersihin),
• Download data ke file .txt.

Untuk download, idenya simpel: gabungkan semua data jadi teks biasa, lalu otomatis download file-nya.
Contoh cuplikan kodenya:

function downloadData() {
  const orders = JSON.parse(localStorage.getItem('orders')) || [];
  let content = "";

  orders.forEach((order, index) => {
    content += `${index + 1}. ${order.name} masih punya sisa hutang ${order.due - order.paid}\n`;
  });

  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'data-hutang.txt';
  a.click();

  URL.revokeObjectURL(url);
}

Tinggal klik satu tombol, semua catatan hutang bisa langsung diunduh dan disimpan.

Kok Bisa Secepat Itu Bikin Project Ini?

Jujur aja, karena dari awal gak muluk-muluk.
Aku gak niat bikin dashboard yang super kompleks kayak aplikasi keuangan profesional.

Tujuannya cuma satu:
Punya tempat simpel buat nyatet hutang-piutang harian, supaya gak perlu ngandelin ingatan sendiri.

Karena pakai template-template sederhana (Bootstrap, form HTML biasa, localStorage),
semuanya bisa selesai cuma dalam beberapa jam — bahkan sambil santai minum kopi.

Kalau dihitung-hitung, aku cuma butuh:

• 30% waktu buat nulis HTML,
• 50% buat nulis JavaScript kecil (fungsi tambah, hapus, edit),
• 20% buat mikirin tampilan (biar enak dilihat di HP dan laptop).

Apa Yang Aku Pelajari dari Proyek Ini?

Setelah jalan beberapa minggu, aku sadar:

1. Kadang ide kecil jauh lebih berguna daripada aplikasi gede yang gak pernah dipakai.
2. Simple itu kuat.
   Gak semua hal butuh backend, login, signup, dll kalau cuma mau catat data pribadi.
3. Iseng-iseng itu penting.
   Kadang ide-ide bagus malah muncul dari proyek-proyek iseng kayak gini.

Selain itu, dashboard ini ngajarin aku buat percaya sama kebutuhan sendiri.
Gak harus selalu ikut tren (kayak bikin app berbasis AI, misal), tapi cukup mulai dari masalah kecil yang beneran dialami sehari-hari.

Bonus: Bisa Dimodif Sesuka Hati

Karena ini cuma HTML biasa, siapa aja bisa modif sesuai kebutuhan:

• Mau tambah kolom baru? Tinggal edit sedikit.
• Mau ganti warna? Ubah aja CSS-nya.
• Mau sinkron ke cloud? Tinggal tambahin fitur upload ke Google Drive atau yang lain.

Gampang banget.
Dan karena semua file ada di tangan kita sendiri, kita juga aman dari masalah privasi.

Penutup

Kalau kamu juga lagi nyari proyek iseng-iseng buat ngasah skill coding sambil tetap ada manfaatnya,
coba deh bikin dashboard kecil kayak gini.

Siapa tahu, awalnya iseng, eh… malah jadi solusi buat hidup sehari-hari.