Manual SIXTY

Appearance

Bisa banget, bro! Mantap nih kasih source code-nya langsung. Dari file budget.html dan budget-form.html yang lu kasih, gua bisa baca UI dan logic Javascript-nya.

Ini draf dokumentasi user manual untuk modul Budget yang siap lu copy-paste ke website dokumentasi atau PDF lu!

Modul Budget ​

Deskripsi Singkat: Modul Budget digunakan untuk merencanakan, mencatat, dan memantau Anggaran & Realisasi Tahunan perusahaan. Melalui modul ini, pengguna dapat membandingkan target anggaran (Budget) dengan nilai aktual yang terjadi (Realisasi) untuk memantau sisa anggaran yang masih tersedia.

1. Halaman Utama Budget (Daftar Anggaran) ​

Halaman ini menampilkan ringkasan seluruh anggaran tahunan yang telah dibuat.

Fitur Utama: ​

  • Buat Anggaran Baru: Tombol hijau di kiri atas untuk membuka form pengisian target anggaran untuk tahun yang baru.
  • Informasi Total Data: Indikator di kanan atas yang menunjukkan jumlah total tahun anggaran yang telah terdata di dalam sistem.
  • Tabel Ringkasan Anggaran: Menampilkan perbandingan data per tahun anggaran. Tabel ini dibagi menjadi dua kelompok utama:
    • Pendapatan: Menampilkan total target Budget, total Realisasi uang masuk, dan Sisa target yang belum tercapai.
    • Pengeluaran / Biaya: Menampilkan batas maksimal Budget biaya, total Realisasi pengeluaran, dan Sisa anggaran yang masih bisa digunakan.
  • Hapus Terpilih: Anda dapat menghapus data tahun anggaran sekaligus dengan mencentang kotak di kolom "Hapus" pada tabel, lalu menekan tombol merah "Hapus Terpilih" di kiri bawah (sistem akan meminta konfirmasi sebelum menghapus).
  • Aksi Detail: Tombol pada kolom paling kanan untuk melihat rincian anggaran bulan per bulan dalam tahun tersebut.

2. Form Input Anggaran Baru ​

Halaman ini digunakan untuk menginput rincian target pendapatan dan batas maksimal pengeluaran bulanan dalam satu tahun anggaran penuh.

Langkah-langkah Pengisian Form Budget: ​

A. Memilih Tahun Anggaran Langkah pertama adalah memilih tahun dari dropdown "PILIH TAHUN ANGGARAN" yang tersedia di bagian atas.

B. Mengelola Tabel Penerimaan dan Pengeluaran Terdapat dua tabel utama untuk diisi, yaitu tabel Penerimaan (warna hijau) dan tabel Pengeluaran (warna merah). Kedua tabel ini menggunakan sistem pengelompokan berdasarkan "Kode Akun Utama" dan "Sub Akun".

  1. Tambah Akun Utama:

    • Klik tombol hijau bertanda + pada tabel Penerimaan atau tombol merah bertanda + pada tabel Pengeluaran.
    • Sebuah baris baru berwarna kuning (baris induk) akan muncul.
    • Pilih kategori anggaran pada kolom Kode Akun (contoh: Akun Sewa, Akun Listrik, dll).
    • Baris induk ini secara otomatis akan menampilkan ringkasan akumulasi Budget, Realisasi, dan Sisa Budget untuk akun tersebut.

  2. Tambah Sub Akun & Nominal Bulanan:

    • Pada baris induk (kuning) yang sudah dipilih kode akunnya, klik tombol kuning bertanda + (Tambah Sub Akun).
    • Akan muncul baris detail berwarna putih di bawahnya.
    • Isi kolom Keterangan untuk detail anggaran tersebut.
    • Masukkan nominal target anggaran ke dalam kolom bulan yang tersedia (Januari - Desember). Nominal akan otomatis menggunakan pemisah ribuan saat diketik.

  3. Menghapus Baris:

    • Jika terjadi kesalahan, Anda dapat menghapus baris dengan mengklik ikon tempat sampah (trash) yang ada di kolom paling kiri setiap baris.
    • Menghapus baris Induk otomatis akan menghapus seluruh Sub Akun di bawahnya.

C. Kalkulasi Otomatis Anda tidak perlu menghitung manual. Sistem akan secara otomatis:

  • Menjumlahkan total nominal dari Januari hingga Desember di kolom paling kanan (Total) untuk setiap Sub Akun.
  • Mengakumulasi total semua Sub Akun ke dalam baris Induk.
  • Menghitung Grand Total Keseluruhan (Penerimaan maupun Pengeluaran) di bagian bawah (tfoot) tabel setiap kali Anda mengubah angka.

D. Menyimpan Data Jika seluruh perencanaan anggaran untuk 12 bulan telah sesuai, klik tombol biru Simpan Anggaran di pojok kanan bawah. Gunakan tombol abu-abu Kembali jika ingin membatalkan dan kembali ke halaman sebelumnya.