📸 Aplikasi Dokumentasi Nasabah LPD Gerana

Aplikasi web untuk mengambil foto dokumentasi nasabah saat penandatanganan surat perjanjian menggunakan webcam USB.

✨ Fitur Utama

1. Pengambilan Foto dengan Webcam

• ✅ Akses webcam USB secara otomatis
• ✅ Live preview sebelum mengambil foto
• ✅ Preview hasil foto sebelum menyimpan
• ✅ Opsi untuk mengambil ulang foto

2. Input Data Nasabah

• ✅ Nama lengkap nasabah
• ✅ Nomor anggota LPD Gerana
• ✅ Jenis perjanjian/dokumen
• ✅ Tanggal penandatanganan (auto-fill hari ini)
• ✅ Catatan tambahan (opsional)

3. Penyimpanan Data

• ✅ Menggunakan IndexedDB (database lokal browser)
• ✅ Foto tersimpan dalam format base64
• ✅ Data tersimpan secara permanen di browser
• ✅ Kapasitas besar (ratusan foto)

4. Galeri & Pencarian

• ✅ Tampilan grid semua dokumentasi
• ✅ Pencarian berdasarkan nama/nomor anggota
• ✅ Thumbnail foto dengan info singkat
• ✅ Sorting otomatis (terbaru di atas)

5. Detail & Pencetakan

• ✅ Lihat detail lengkap dokumentasi
• ✅ Cetak dokumentasi (format A4)
• ✅ Hapus dokumentasi yang tidak diperlukan

6. Export Data

• ✅ Export data ke file CSV
• ✅ Berisi semua informasi kecuali foto
• ✅ Untuk keperluan backup atau analisis

🚀 Cara Menggunakan

Instalasi

1. Download atau Clone Repository

   # Download semua file ke folder C:\MyApp\webcam
   

2. Buka Aplikasi

   • Buka file index.html menggunakan browser modern (Chrome, Edge, atau Firefox)
   • Atau double-click file index.html

Penggunaan

1. Mengambil Foto Dokumentasi

   • Isi form data nasabah (nama, nomor anggota, jenis perjanjian, tanggal)
   • Klik tombol "Aktifkan Webcam"
   • Izinkan akses webcam saat browser meminta
   • Posisikan nasabah di depan webcam
   • Klik "Ambil Foto"
   • Preview hasil foto
   • Jika sudah sesuai, klik "Simpan Dokumentasi"
   • Jika ingin ambil ulang, klik "Ambil Ulang"

2. Melihat Galeri

   • Scroll ke bawah untuk melihat galeri dokumentasi
   • Gunakan kotak pencarian untuk mencari nama/nomor anggota
   • Klik pada card dokumentasi untuk melihat detail

3. Mencetak Dokumentasi

   • Klik card dokumentasi yang ingin dicetak
   • Klik tombol "Cetak Dokumentasi"
   • Pilih printer atau "Save as PDF"

4. Export Data

   • Klik tombol "Export Data" di galeri
   • File CSV akan otomatis terdownload
   • Buka dengan Excel atau Google Sheets

🔧 Persyaratan Sistem

• Browser Modern:

  • Google Chrome 60+ (Direkomendasikan)
  • Microsoft Edge 79+
  • Mozilla Firefox 60+

• Webcam USB:

  • Webcam USB yang terhubung dan berfungsi
  • Driver webcam sudah terinstal

• Koneksi Internet:

  • Hanya diperlukan untuk load font (Google Fonts)
  • Aplikasi tetap berfungsi offline setelah font ter-cache

💾 Penyimpanan Data

IndexedDB

• Data disimpan di IndexedDB browser
• Lokasi penyimpanan: Browser's Application Data
• Data bersifat permanen sampai dihapus manual
• Foto tersimpan dalam format base64 (JPEG dengan kualitas 90%)

Kapasitas

• Chrome/Edge: Hingga 60% dari disk space yang tersedia
• Firefox: Hingga 10% dari free disk space
• Estimasi: Bisa menyimpan ratusan hingga ribuan foto

Backup Data

• Metode 1: Export ke CSV (tanpa foto)
• Metode 2: Browser backup
  • Chrome: chrome://settings/cookies > Site Data > klik domain
  • Export IndexedDB menggunakan Developer Tools

🎨 Kustomisasi

Mengubah Logo LPD Gerana

Edit file style.css dan tambahkan logo di header:

.app-header::before {
    content: url('logo-lpd-gerana.png');
}

Menambah Jenis Perjanjian

Edit file index.html di bagian <select id="jenisPerjanjian">:

<option value="Jenis Baru">Jenis Perjanjian Baru</option>

Mengubah Warna Tema

Edit file style.css di bagian :root:

:root {
    --primary-color: #2563eb; /* Ubah ke warna yang diinginkan */
}

🛠️ Troubleshooting

Webcam tidak terdeteksi

• ✅ Pastikan webcam terhubung dengan baik
• ✅ Cek apakah driver webcam sudah terinstal
• ✅ Pastikan tidak ada aplikasi lain yang menggunakan webcam
• ✅ Berikan izin akses webcam saat browser meminta
• ✅ Coba restart browser

Data hilang

• ✅ Jangan clear browser data/cache
• ✅ Gunakan browser yang sama untuk akses data
• ✅ Backup data secara berkala dengan export CSV

Foto tidak jelas

• ✅ Pastikan pencahayaan cukup
• ✅ Gunakan webcam dengan resolusi tinggi
• ✅ Bersihkan lensa webcam

Tidak bisa print

• ✅ Pastikan browser sudah update
• ✅ Coba "Print to PDF" terlebih dahulu
• ✅ Cek printer sudah terhubung

📱 Kompatibilitas

Desktop Browsers

• ✅ Chrome 60+ (Windows, macOS, Linux)
• ✅ Edge 79+ (Windows, macOS)
• ✅ Firefox 60+ (Windows, macOS, Linux)
• ⚠️ Safari 11+ (terbatas, webcam mungkin bermasalah)

Mobile Browsers

• ⚠️ Terbatas - Webcam USB tidak didukung di mobile
• ✅ Bisa menggunakan kamera built-in device

🔒 Keamanan & Privasi

• ✅ Semua data tersimpan lokal di komputer
• ✅ Tidak ada data yang dikirim ke server
• ✅ Tidak memerlukan koneksi internet (kecuali font)
• ✅ Akses webcam hanya saat aplikasi digunakan
• ⚠️ Jangan gunakan di komputer publik/shared

📄 Lisensi

Aplikasi ini bebas digunakan untuk keperluan internal LPD Gerana.

🤝 Dukungan

Untuk pertanyaan atau masalah, silakan hubungi IT Support LPD Gerana.

---

Versi: 1.0.0
Terakhir diupdate: Januari 2026