webcam/README.md

# 📸 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**
   ```bash
   # 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:
```css
.app-header::before {
    content: url('logo-lpd-gerana.png');
}
```

### Menambah Jenis Perjanjian
Edit file `index.html` di bagian `<select id="jenisPerjanjian">`:
```html
<option value="Jenis Baru">Jenis Perjanjian Baru</option>
```

### Mengubah Warna Tema
Edit file `style.css` di bagian `:root`:
```css
: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