KontrakPro — Proposal, Kontrak, Invoice untuk Freelancer & Agensi

Overview

KontrakPro adalah web app yang menyatukan tiga dokumen bisnis (proposal, kontrak, invoice) yang biasanya tersebar di Canva, Word, dan Excel menjadi satu flow di satu tab project. Auth dan pembayaran di-delegate ke SAINS API, semua data dokumen disimpan di localStorage, dan Client Portal publik memakai shareable link supaya client bisa melihat dokumen tanpa login.

Tagline internal: "Dari proposal sampai dibayar, 1 platform."

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Freelancer dan agensi kecil biasanya melompat antar tool untuk membuat proposal, kontrak, dan invoice: proposal di Canva, kontrak di Word, invoice di Excel. Hasilnya branding tidak konsisten, client lama approve, nomor dokumen tidak terstruktur, dan banyak pembayaran terlewat karena tidak ada tracking termin yang tersambung ke invoice.

My Role & Ownership

Solo builder untuk riset produk premium, desain UX 3 tab unified, 5 template proposal, landing SEO, deploy VPS, dan integrasi ke SAINS API.

Technical Approach

Membangun SPA TypeScript + Vite dengan satu halaman ProjectDetail yang punya tiga tab (Proposal, Kontrak, Invoice). Generator kontrak dan invoice dirender inline di tab, bukan pindah halaman, agar context tidak terputus. Data disimpan di localStorage dengan model strongly-typed (Proposal, Kontrak, Invoice, PricingItem, PaymentTermin) dan cascade delete antar entitas.

Client Portal publik dibangun di atas shareable link berformat /share/:type/:token, sehingga client bisa membuka proposal atau invoice tanpa perlu akun. Auth dan subscription delegate ke SAINS API dengan product=kontrak. Design system memakai Plus Jakarta Sans dengan palette indigo/violet untuk UI, dan Inter untuk dokumen preview agar terasa dokumen resmi.

Architecture Notes

Routing hash-based dengan semua rute /proposal/:id, /kontrak/:id, /invoice/:id konvergen ke komponen ProjectDetail sehingga state editing terpusat di satu tempat. Data model strongly-typed di TypeScript: Proposal, Kontrak, Invoice, PricingItem, PaymentTermin, dengan relasi cascade delete yang eksplisit di layer storage.

Client Portal publik memakai shareable link /share/:type/:token agar client bisa melihat dokumen tanpa login, alih-alih bikin sistem akun tamu di backend.

Trade-offs

Client Portal MVP memakai shareable link plus output PDF/WhatsApp alih-alih backend per-user untuk menghindari scope creep dan ship cepat. Template proposal punya default section, tetapi user bisa menyesuaikan, sebagai mitigasi risiko template tidak cocok untuk semua industri.

Kontrak memiliki disclaimer eksplisit bahwa template hanya acuan umum dan user perlu konsultasi ahli hukum, karena akurasi legal bukan tanggung jawab produk. Pricing plan masih hardcoded di PricingPage (belum dipindah ke DB) dan dicatat sebagai pending task.

Implementation Highlights

• Unified 3-tab ProjectDetail: kontrak generator dan invoice generator dirender inline di tab, menghilangkan flow multi-page.
• Dual discount system: per-item discount plus global discount, masing-masing support persen atau rupiah, konsisten dari proposal ke kontrak dan invoice.
• Payment Termin terstruktur (DP, Pelunasan, atau custom) dengan auto-calculate amount per termin dan termin-based invoicing.
• Cascade delete: hapus proposal otomatis menghapus kontrak dan invoice turunan agar tidak ada orphan record.
• PrintAllView: print proposal, kontrak, dan invoice sekaligus dalam satu view untuk handover ke client.
• Demo Mode dengan GA4 funnel tracking dan paywall untuk eksperimen konversi.
• Design system spesifik: Plus Jakarta Sans untuk UI, Inter untuk dokumen preview agar terasa dokumen resmi.

Results

• Menunjukkan kemampuan merancang UX workflow dokumen bisnis end-to-end yang konsisten, mengambil keputusan storage dan client-sharing yang pragmatis, dan menjaga konsistensi branding lewat design system yang punya alasan jelas antara UI dan dokumen.
• Live di https://app.kontrakpro.web.id dan landing SEO di https://kontrakpro.web.id.
• GA4 (G-P8CL3XSQJB) dan Google Search Console aktif untuk tracking funnel dan indexing.
• 5 phase pengembangan (Setup, Proposal Builder, Kontrak + Invoice + Client Portal, Landing + Deploy + SEO, UX Overhaul v2) tuntas per 15 Maret 2026.
• 5 template proposal siap pakai (design, development, photography, marketing, general).
• VPS health stabil setelah tambah 2GB swap dan membersihkan 604MB log.
• Pricing positioning premium Rp 199.000 sampai Rp 399.000 per bulan untuk segmen freelancer dengan income Rp 10 juta sampai Rp 80 juta per bulan.
• 4 series nomor dokumen ter-generate otomatis: PROP-YYYY-####, KON-YYYY-####, INV-YYYY-####.
• Public proof: GA4 dan Google Search Console aktif, domain dan app live, repo publik.

Links

• Live Demo
• GitHub Repository