Klinik — Invoice & Kwitansi Generator untuk Dokter Praktek Mandiri

Overview

Klinik adalah web app yang mengganti kebiasaan bikin kwitansi manual atau di Excel dengan satu workflow isi form, live preview, lalu print. Profil dokter dan riwayat invoice disimpan di localStorage, sementara auth dan pricing di-delegate ke SAINS API. Pendekatan ini dipilih untuk validasi demand secara cepat sebelum invest di backend invoice.

Tech & Libraries

Teknologi dan library yang dipakai atau disentuh di project ini:

Problem

Dokter praktek mandiri tidak punya tool kwitansi yang rapi dan konsisten; copy-paste di Word atau Excel membuat header harus diisi ulang tiap transaksi, arsip mudah hilang, dan rekap pendapatan bulanan harus dihitung manual. Solusi berat seperti rekam medis penuh terasa over-engineered untuk praktek mandiri yang volumenya rendah dan sensitivitasnya tinggi.

My Role & Ownership

Solo builder untuk riset pasar, fork arsitektur dari Atomic, rewrite UI invoice + preview print, setup landing SEO, dan integrasi ke SAINS API.

Technical Approach

Membangun SPA TypeScript + Vite dengan pola fork dari arsitektur Atomic, tetapi di-rewrite untuk fokus pada CRUD invoice, live preview print-ready, dan auto-fill profil dokter. Auth, pricing, checkout Midtrans, dan access-check di-delegate sepenuhnya ke SAINS API dengan query param product=klinik, sehingga zero backend change saat launching produk baru ini.

Invoice dan profil dokter sengaja disimpan di localStorage dengan namespace unik (klinik_access_token, klinik_doctor_profile, klinik_invoices) supaya bisa hidup berdampingan dengan produk SAINS lain di browser yang sama. Print memakai CSS @media print dan window.print() agar output rapi tanpa library PDF berat.

Architecture Notes

Boot flow main.ts → initAuth() → checkAccess(product=klinik) → Dashboard atau PricingPage. Integrasi backend murni fetch ke SAINS API; tidak ada service atau skema khusus Klinik di sisi server. Karena target user adalah profesional dewasa yang butuh akun permanen, semua halaman fitur adalah paywall penuh, tidak ada mode guest seperti di Atomic.

Trade-offs

Invoice sengaja disimpan di localStorage alih-alih backend untuk mempercepat validasi pasar; konsekuensinya data hilang kalau browser di-clear dan tidak sinkron lintas device, dan ini diterima terbuka di tahap MVP. Tidak ada mode guest supaya flow tetap sederhana untuk target user profesional.

Pricing di landing page di-hardcode di HTML (bukan fetch dari API) untuk SEO yang ringan dan render tanpa blocking, konsekuensinya setiap update harga butuh edit manual.

Implementation Highlights

• Form invoice multi-row layanan dengan live preview print-ready yang langsung memicu window.print() tanpa dependency PDF berat.
• Auto-fill profil dokter dari klinik_doctor_profile di localStorage, sehingga header kwitansi tidak perlu diisi ulang tiap transaksi.
• Zero backend change: semua auth dan payment di-route lewat SAINS API dengan query param product=klinik.
• Isolated session keys (klinik_access_token, klinik_user, klinik_invoices, klinik_doctor_profile) agar Klinik hidup berdampingan dengan Atomic, Surat, dan KontrakPro di browser yang sama.
• Admin bypass: akun admin SAINS otomatis lolos subscription gate saat dev untuk mempercepat iterasi.
• Landing SEO terpisah di invoiceklinik.web.id dengan long-tail keyword dokter praktek mandiri.

Results

• Menunjukkan disiplin mengirim produk niche dengan cepat dengan cara reuse backend yang sudah ada, membuat session terisolasi per produk, dan memilih storage sesuai level validasi pasar. Fokus ke workflow harian user (form → preview → print) daripada ke fitur besar yang belum terbukti dibayar.
• Live di https://app.invoiceklinik.web.id dan landing SEO di https://invoiceklinik.web.id.
• Reuse 100 persen backend SAINS: /api/auth/*, /api/plans?product=klinik, /api/checkout, /api/access-check?product=klinik.
• Session terisolasi dari produk lain lewat key localStorage khusus Klinik.
• SEO pages dedicated: /invoice-dokter/ dan /kwitansi-pasien/ untuk long-tail keyword dengan kompetisi rendah.
• CORS produksi dan konfigurasi Nginx siap untuk subdomain app.invoiceklinik.web.id.
• 2 SEO landing pages target keyword high-intent (invoice dokter, kwitansi pasien) dengan kompetisi mendekati nol menurut riset.
• Pricing plan global: Rp 99.000/bulan dan Rp 699.000/tahun.
• Public proof: live di https://app.invoiceklinik.web.id dengan landing SEO ter-index.

Links

• Live Demo
• GitHub Repository