Initial commit: Aplikasi Foto Dokumentasi Nasabah Koperasi

2026-01-19 13:06:06 +08:00
commit 162f8a38a4
5 changed files with 1677 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,195 @@
+# 📸 Aplikasi Dokumentasi Nasabah Koperasi
+
+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 koperasi
+- ✅ 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 Koperasi
+Edit file `style.css` dan tambahkan logo di header:
+```css
+.app-header::before {
+    content: url('logo-koperasi.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 Koperasi.
+
+## 🤝 Dukungan
+
+Untuk pertanyaan atau masalah, silakan hubungi IT Support Koperasi.
+
+---
+
+**Versi:** 1.0.0  
+**Terakhir diupdate:** Januari 2026