📖 Dokumentasi

Panduan Pengguna Invocely

Semua yang perlu kamu ketahui tentang invoicing ajaib — dari login pertama sampai invoice berulang otomatis.

🦄

Siap mulai keajaibanmu?

Masuk ke akun atau daftar gratis untuk akses penuh ke semua fitur Invocely.

🔑

Sudah punya akun?

Masuk ke akunmu →

 ✨

Belum punya akun?

Daftar gratis sekarang →
🔐

Demo Login Credentials

Akses cepat untuk testing — gunakan akun di bawah ini.

👑 Superadmin → /admin

Owner Aplikasi

Akses semua plan, user, workspace, billing, branding.

Email: superadmin@invocely.test
Password: superadmin123
🦄 Workspace Admin → /dashboard

Demo Company

Sudah ada 10 klien, 15 produk, 20 invoice, 2 recurring.

Email: demo@invocely.test
Password: password
⚠️ Hanya untuk demo / development. Ganti password sebelum production. Reset semua data: php artisan migrate:fresh --seed
💡 Tip: klik field di atas untuk select-all, copy paste ke form login.

🔐 Aman & terenkripsi · 💳 Tidak perlu kartu kredit · ⚡ Setup < 1 menit

🚀 Memulai

Invocely adalah platform invoicing ajaib yang dibuat untuk freelancer, agensi, dan bisnis kecil. Dengan Invocely kamu bisa membuat invoice cantik, melacak pembayaran, mengirim email, dan mengotomatiskan tagihan berulang — semua dari satu dasbor.

Panduan ini akan memandumu langkah demi langkah. Klik bagian mana pun di sidebar kiri untuk langsung melompat.

Tech stack:

  • Laravel 13 + PHP 8.3
  • Tailwind CSS 3 dengan tema Unicorn custom
  • Alpine.js untuk UI reaktif
  • MySQL / PostgreSQL database
  • Barryvdh DomPDF untuk generate PDF

🗺️ Alur Bisnis End-to-End

Dari nol sampai dapat bayaran — inilah alur normal yang kamu jalanin tiap kali punya klien baru. Ikutin urutan ini supaya ga ada langkah yang ke-skip.

1

⚙️ Setup Workspace

Isi nama bisnis, alamat, NPWP, mata uang default, awalan invoice (mis. INV-), upload logo, set warna brand. Sekali setup, dipakai di semua invoice.

→
2

👥 Tambah Klien

Catat data klien — nama, email, alamat, NPWP. Email penting karena dipakai untuk kirim invoice otomatis.

→
3

📦 Tambah Produk (opsional)

Bikin daftar item yang sering ditagih — jasa per jam, retainer, biaya lisensi. Saat bikin invoice tinggal pilih dari dropdown, harga & deskripsi auto-fill.

→
4

📄 Buat Invoice

Pilih klien → tambah item (manual atau dari produk) → set pajak/diskon → pilih template & warna. Simpan sebagai Draft dulu kalau belum yakin.

→
5

📨 Kirim ke Klien

Dua opsi: kirim via email (otomatis attach PDF, status berubah jadi Terkirim) atau bagikan link publik /i/{token} via WhatsApp/Slack.

→
6

💰 Catat Pembayaran

Setelah klien bayar, buka invoice → Catat Pembayaran → input jumlah, metode, tanggal, referensi transfer. Status auto-update jadi Sebagian/Lunas.

→
7

🔄 Otomatisasi (Klien Tetap)

Untuk klien retainer/langganan, bikin Invoice Berulang dengan frekuensi bulanan/tahunan. Sistem auto-generate invoice + auto-kirim email tiap periode.

→
8

📈 Review Laporan

Cek dasbor mingguan/bulanan — pendapatan, klien teratas, invoice jatuh tempo. Tindak lanjut yang belum bayar.

→

💡 Tips Workflow

  • Selalu simpan sebagai Draft dulu sebelum kirim — gampang revisi.
  • Set tanggal jatuh tempo realistis (default 30 hari) — terlalu cepat bikin klien stress, terlalu lama bikin cash flow tersendat.
  • Manfaatin Invoice Berulang untuk klien tetap — hemat 15 menit per bulan, ga lupa nagih.
  • Cek laporan jatuh tempo tiap Senin pagi — tindak lanjut yang lewat 7+ hari.

🎓 Tutorial Praktis Step-by-Step

Skenario nyata dari user Invocely. Pilih yang paling mirip kebutuhanmu — copy alurnya.

Tutorial 1 Setup Pertama Kali (≈10 menit)

Skenario: Baru daftar Invocely, mau langsung bisa kirim invoice ke klien pertama.

  1. Login → otomatis ke /dashboard.
  2. Klik avatar pojok kanan atas → Workspace Settings.
  3. Isi Nama Bisnis, Alamat, Telepon, Email, NPWP (kalau PKP).
  4. Set Mata Uang = IDR, Awalan Invoice = INV-, Nomor Berikutnya = 1.
  5. Upload Logo (PNG/JPG, max 2 MB, transparan disarankan).
  6. Pilih Warna Brand — warna ini muncul di header semua invoice & PDF.
  7. Klik Simpan.
  8. Pergi ke /clients → + Klien Baru → isi data klien pertama → simpan.
  9. Pergi ke /invoices/create → pilih klien → tambah 1-2 item → simpan & kirim.

✅ Hasil: Invoice pertama terkirim, status Terkirim, klien dapat email + PDF.

Tutorial 2 Tagih Freelance per Jam

Skenario: Kerja freelance design, charge Rp 250.000/jam, total 18 jam bulan ini.

  1. Sekali setup: /products → + Produk Baru → Nama: Design Per Jam, Harga Satuan: 250000, Deskripsi: Jasa desain UI/UX → simpan.
  2. Buat invoice: /invoices/create → pilih klien.
  3. Di tabel Items, dropdown Pilih Produk → pilih Design Per Jam. Deskripsi & harga auto-fill.
  4. Ubah Qty menjadi 18 → total auto-hitung jadi Rp 4.500.000.
  5. Tambah breakdown di Deskripsi: "Logo redesign (8 jam) + landing page (6 jam) + revisi (4 jam)".
  6. Set Pajak = 11% (PPN, kalau PKP) atau 0.
  7. Tambah Catatan: "Pembayaran via transfer BCA 1234567890 a.n. [Nama]".
  8. Pilih template Modern atau Bold → simpan & kirim.

✅ Hasil: Invoice Rp 4.995.000 (PPN 11% included), klien jelas berapa jam yang ditagih.

Tutorial 3 Retainer Bulanan Otomatis

Skenario: Klien langganan SEO management Rp 5.000.000/bulan. Mau auto-tagih tiap tanggal 1.

  1. Pergi ke /recurring → + Berulang Baru.
  2. Pilih klien → tambah item: "SEO Management Bulanan" qty 1, harga 5.000.000.
  3. Set Frekuensi = Bulanan.
  4. Set Tanggal Berikutnya = tanggal 1 bulan depan.
  5. Aktifkan toggle Kirim Otomatis — invoice langsung email ke klien tanpa perlu konfirmasi manual.
  6. Set Jatuh Tempo = +14 hari dari tanggal terbit (atau sesuai term kontrak).
  7. Tambah Catatan: "Pembayaran via transfer max H+14".
  8. Klik Simpan. Status: Aktif.

✅ Hasil: Tiap tanggal 1, sistem auto-buat invoice + auto-email. Kamu cuma perlu catat pembayaran saat klien transfer.

⚠️ Penting: Server harus jalanin cron php artisan schedule:run tiap menit. Kalau hosting shared, set di cPanel; kalau VPS, edit crontab -e.

Tutorial 4 Lacak Pembayaran Parsial

Skenario: Klien commit Rp 10jt, bayar DP 50% sekarang, sisanya saat handover.

  1. Buat invoice normal Rp 10.000.000 → kirim ke klien.
  2. Saat klien transfer DP Rp 5.000.000:
    • Buka invoice → klik Catat Pembayaran.
    • Jumlah: 5000000, Metode: Transfer Bank, Tanggal: hari ini, Referensi: nomor transfer / 4 digit terakhir rekening.
    • Simpan.
  3. Status invoice auto-berubah jadi Sebagian. Total bayar: 5jt, Sisa: 5jt.
  4. Saat klien transfer pelunasan:
    • Buka invoice yang sama → Catat Pembayaran lagi.
    • Jumlah: 5000000, isi metode/tgl/ref.
    • Simpan.
  5. Status auto-berubah jadi Lunas. Timeline pembayaran tampil di halaman invoice.

✅ Hasil: Riwayat 2 transaksi tercatat lengkap dengan referensi. Reporting akurat untuk pembukuan.

Tutorial 5 Konfigurasi Payment Gateway

Skenario: Mau klien bisa bayar lewat link checkout (Midtrans/Xendit/Stripe/dll) langsung dari halaman publik invoice.

  1. Login sebagai admin workspace → /payment-gateways.
  2. Klik + Tambah Gateway.
  3. Isi Nama bebas (mis. "Midtrans Production").
  4. Pilih Format API sesuai provider (REST redirect / embed / QR).
  5. Masukkan Base URL, API Key, Secret dari dashboard provider kamu.
  6. (Opsional) Tambah Extra Headers kalau provider butuh custom auth header.
  7. Centang Aktif untuk Recurring kalau gateway support charge otomatis.
  8. Klik Simpan. Test koneksi via tombol Test Connection.
  9. Setelah aktif, halaman publik /i/{token} otomatis tampilin tombol Bayar Sekarang.

✅ Hasil: Klien bayar 1-klik via link, status invoice auto-update via webhook saat pembayaran sukses.

🔐 Keamanan: API key disimpan ter-encrypt di database. Tidak pernah ditampilkan ulang setelah disimpan. Untuk rotate key, hapus & tambah ulang.

❓ FAQ Singkat

Bisa edit invoice yang udah Lunas? +
Tidak — supaya audit trail tetap utuh. Kalau salah, batalkan invoice (status: Dibatalkan), lalu duplikat & buat ulang.
Bisa hapus klien yang punya invoice? +
Tidak — klien dengan minimal 1 invoice dilindungi supaya history tidak rusak. Solusi: ubah email/nama klien jadi versi lama (mis. "[ARSIP] Nama") biar tidak muncul di pencarian aktif.
Berapa lama PDF di-generate? +
Biasanya <2 detik. Kalau lebih dari 10 detik, cek log — kemungkinan logo file rusak atau font Google ke-block.
Email invoice masuk spam — kenapa? +
Default pakai SMTP server. Untuk deliverability bagus, set DKIM/SPF di domain kamu, atau pakai SendGrid/Postmark/Resend.
Bisa multi-currency dalam 1 workspace? +
Ya — set currency per invoice (bukan workspace). Tiap invoice independen.
Backup data? +
Database MySQL → mysqldump rutin. File upload (logo, attachment) → backup folder storage/app/public.

🔐 Pendaftaran & Masuk

Daftar Akun Baru

  1. Kunjungi /register atau klik Daftar di halaman utama.
  2. Isi nama, email, dan kata sandi (min 8 karakter).
  3. Klik ✦ Buat Akun.
  4. Cek email kamu untuk link verifikasi. Klik link tersebut untuk verifikasi akun.
  5. Saat pertama login, kamu akan diminta membuat Workspace (lihat bagian di bawah).

Masuk

  1. Kunjungi /login atau klik Masuk di halaman utama.
  2. Masukkan email dan kata sandi kamu.
  3. Opsional, centang Ingat saya agar tetap login.

Lupa Kata Sandi

  1. Klik Lupa kata sandi? di halaman login.
  2. Masukkan email kamu — link reset akan dikirim.
  3. Klik link, atur kata sandi baru, lalu masuk.

Profil

Setelah login, klik avatar kamu (pojok kanan atas) → Profil untuk memperbarui nama dan email. Kamu juga bisa menghapus akun dari halaman ini.

📊 Dasbor

Dasbor adalah layar utama setelah login. Menampilkan ringkasan real-time:

  • Total Pendapatan — jumlah semua invoice yang sudah dibayar (bulan ini).
  • Belum Dibayar — total invoice yang belum lunas & tertunda.
  • Jatuh Tempo — invoice yang lewat tanggal jatuh tempo dan belum dibayar.
  • Klien Aktif — jumlah klien yang sudah kamu buat.
  • Invoice Terbaru — daftar akses cepat 5 invoice terakhir.

Klik baris invoice mana pun untuk langsung ke halaman detailnya.

👥 Klien

Klien adalah orang atau perusahaan yang kamu tagih. Kelola di /clients.

Tambah Klien

  1. Klik tombol ✦ Klien Baru.
  2. Isi: Nama (wajib), Email, Telepon, Alamat, NPWP, Catatan.
  3. Klik Simpan.

Edit / Hapus

Klik baris klien untuk membuka detail, di mana kamu bisa mengedit data atau menghapus klien. Klien yang memiliki invoice tidak bisa dihapus — arsipkan saja.

Fitur Daftar Klien

  • Cari — filter berdasarkan nama atau email.
  • Pagination — 10 klien per halaman.
  • Total Invoice — setiap baris menampilkan jumlah invoice milik klien.

📦 Produk

Produk adalah item yang bisa kamu tambahkan cepat ke invoice (tarif per jam, biaya tetap, retainer, dll). Kelola di /products.

Tambah Produk

  1. Klik ✦ Produk Baru.
  2. Masukkan: Nama, Deskripsi, Harga Satuan, SKU (opsional).
  3. Klik Simpan.

Saat membuat invoice, gunakan dropdown Tambah Produk untuk menyisipkan produk yang sudah ada secara instan.

📄 Invoice

Invoice adalah inti dari Invocely. Akses di /invoices.

Buat Invoice

  1. Klik ✦ Invoice Baru (tombol pojok kanan atas atau dari sidebar).
  2. Pilih Klien — dropdown atau buat klien baru langsung.
  3. Tentukan Tanggal — tanggal terbit, tanggal jatuh tempo (default +14 hari).
  4. Pilih Template — Classic, Modern, Minimal, Bold, atau Elegant.
  5. Tambah Item — ketik deskripsi, jumlah, harga; atau gunakan Tambah Produk untuk menyisipkan produk yang sudah ada.
  6. Review Subtotal, Pajak, Diskon, Total.
  7. Tambahkan Catatan atau Syarat & Ketentuan (opsional).
  8. Klik Simpan untuk membuat sebagai Draft, atau Simpan & Kirim untuk langsung email.

Status Invoice

  • Draft — masih dikerjakan, belum dikirim.
  • Terkirim — sudah dikirim email atau ditandai terkirim.
  • Sebagian — sudah ada pembayaran tapi belum lunas.
  • Lunas — sudah dibayar penuh.
  • Dibatalkan — invoice dibatalkan.

Tindakan pada Invoice

TindakanDeskripsi
EditUbah data invoice. Tidak tersedia untuk status Lunas/Dibatalkan.
DuplikatSalin invoice dengan nomor baru (Draft).
Tandai TerkirimUbah status dari Draft menjadi Terkirim.
Catat PembayaranTambahkan pembayaran sebagian atau penuh.
Kirim EmailKirim invoice via email dengan lampiran PDF.
Unduh PDFGenerate PDF siap cetak.
BatalkanVoid invoice (tidak bisa dibatalkan).

📜 Template Invoice

Invocely hadir dengan 5 template cantik. Pilih saat membuat invoice:

Classic

Tata letak bersih dan timeless, header aksen ungu.

Modern

Blok warna bold, sudut membulat, nuansa kontemporer.

Minimal

Fokus pada whitespace, monokrom dengan border halus.

Bold

Gradien pink-ke-emas yang cerah, menonjol di inbox.

Elegant

Berbasis tipografi, gaya serif, tampilan premium.

Warna brand workspace kamu (aksen, logo) otomatis diterapkan ke semua template. Preview template saat mengedit invoice — perubahan bersifat langsung.

📨 Kirim Invoice via Email

Kirim invoice langsung dari aplikasi — tanpa copy-paste.

  1. Buka invoice dan klik Kirim Email.
  2. Kolom Kepada otomatis terisi email klien.
  3. Kustomisasi Subjek dan Pesan.
  4. Klik Kirim — klien menerima email HTML cantik dengan lampiran PDF invoice.

Status invoice otomatis berubah menjadi Terkirim.

🔗 Bagikan Invoice

Setiap invoice mendapat URL publik unik: /i/{token} (contoh: /i/abc123def).

  • Klien bisa melihat invoice tanpa harus login.
  • Halaman menampilkan invoice lengkap dengan styling brand kamu.
  • Klien bisa klik Unduh PDF dari halaman publik.
  • Bagikan link via email, WhatsApp, Slack, atau embed di portal klien kamu.

Temukan link yang bisa dibagikan di halaman detail invoice pada bagian Link Publik.

📥 Unduh PDF

Generate PDF profesional dan siap cetak dari invoice mana pun.

  1. Buka halaman detail invoice.
  2. Klik Unduh PDF.
  3. PDF langsung terunduh — dengan template pilihanmu, warna brand, dan semua data invoice.

PDF di-generate server-side menggunakan barryvdh/laravel-dompdf dengan margin halaman yang tepat untuk pencetakan.

💰 Pembayaran

Lacak semua pembayaran di /payments. Setiap pembayaran terhubung ke invoice.

Catat Pembayaran

  1. Buka invoice, klik Catat Pembayaran.
  2. Masukkan Jumlah, Metode Pembayaran (Tunai, Transfer Bank, Kartu Kredit, E-Wallet, dll.), Tanggal, dan Referensi (opsional).
  3. Klik Simpan.
  • Jika jumlah sama atau melebihi total invoice, status menjadi Lunas.
  • Jika jumlah kurang dari total, status menjadi Sebagian — kamu bisa mencatat pembayaran tambahan nanti.

Riwayat Pembayaran

Halaman detail invoice menampilkan semua pembayaran dalam bentuk timeline. Kamu bisa menghapus pembayaran yang salah dari daftar ini.

🔄 Invoice Berulang

Otomatiskan penagihan dengan invoice berulang di /recurring.

Buat Invoice Berulang

  1. Klik ✦ Berulang Baru.
  2. Isi kolom yang sama seperti invoice biasa (klien, item, pajak, dll.).
  3. Tentukan Frekuensi — Harian, Mingguan, Bulanan, Triwulan, atau Tahunan.
  4. Tentukan Tanggal Berikutnya — kapan invoice pertama harus dibuat otomatis.
  5. Aktifkan Kirim Otomatis untuk langsung mengirim email saat invoice dibuat (opsional).
  6. Klik Simpan.

Kelola Invoice Berulang

  • Aktifkan/Nonaktifkan — jeda atau lanjutkan jadwal berulang.
  • Edit — ubah template, item, atau frekuensi. Invoice yang sudah dibuat tidak terpengaruh.
  • Hapus — hapus jadwal. Invoice yang sudah dibuat tetap utuh.

Invoice berulang diproses melalui Laravel task scheduler. Pastikan cron job server kamu menjalankan php artisan schedule:run setiap menit.

📈 Laporan

Akses /reports untuk insight bisnis:

  • Pendapatan dari Waktu ke Waktu — grafik pendapatan bulanan.
  • Klien Teratas — peringkat berdasarkan total nilai invoice.
  • Rincian Belum Dibayar — jumlah belum lunas vs. jatuh tempo.
  • Metode Pembayaran — diagram pie tunai, transfer, kartu kredit.
  • Distribusi Status Invoice — rasio draft / terkirim / lunas / dibatalkan.
  • Filter Rentang Tanggal — lihat laporan per bulan, kuartal, tahun, atau rentang kustom.

⚙️ Workspace

Workspace adalah profil bisnismu. Konfigurasi di /workspace/settings:

  • Nama — nama bisnis/tim kamu (muncul di invoice).
  • Mata Uang — misal IDR, USD, EUR, GBP.
  • Warna Brand — warna aksen yang diterapkan ke semua template invoice.
  • Logo — upload logo bisnis (ditampilkan di invoice dan halaman publik).
  • Alamat & Kontak — alamat bisnis, telepon, website (ditampilkan di invoice).
  • Pengaturan Pajak — tarif pajak default, format NPWP.
  • Awalan Invoice — misal INV- → invoice tampil sebagai INV-001.
  • Nomor Invoice Berikutnya — titik awal auto-increment.

🌐 Halaman SEO Otomatis

Invocely menyertakan halaman SEO yang dibuat otomatis untuk membantu bisnismu ditemukan di Google. Semua halaman memiliki skema JSON-LD, meta tag, dan konten 300+ kata yang unik.

RuteTujuan
/best-invoicing-tools-{tahun}Daftar tools invoicing terbaik tahun ini
/alternatives-to-{slug}Halaman alternatif produk (misal: freshbooks, quickbooks)
/compare/{a}-vs-{b}Halaman perbandingan head-to-head
/invoice-templatesGaleri template dengan preview
/sitemap.xmlXML sitemap dinamis untuk search engine
/robots.txtAturan crawl untuk bot

Halaman SEO bersifat publik dan bisa diindeks. Submit /sitemap.xml ke Google Search Console untuk indexing lebih cepat.

🛒 Beli Source Code

Mau aplikasi invoicing ini untuk bisnis atau klien kamu sendiri?

Full source code — Laravel 13 + Tailwind + Alpine.js — tersedia untuk dibeli.

💎 Yang Kamu Dapatkan

  • Full source code Laravel 13 (semua controller, model, view)
  • 5 template invoice (Classic, Modern, Minimal, Bold, Elegant)
  • Modul Klien, Produk, Invoice, Pembayaran, Invoice Berulang
  • Kirim invoice via email dengan lampiran PDF
  • Bagikan invoice via link publik dengan token unik
  • Dasbor laporan dengan grafik
  • Halaman programmatic SEO otomatis
  • Tailwind CSS 3 tema Unicorn + Alpine.js
  • Database migrations & seeders
  • Lisensi: 1 domain = 1 lisensi · unlimited client

💰 Harga: Nego — hubungi langsung.

💬 WhatsApp 081296052010

Atau kirim pesan untuk demo, permintaan kustomisasi, atau inquiry harga.

✦ Itu semua keajaibannya. Sekarang buat invoice ajaibmu! ✦

✦ Mulai Gratis