feat: inital commit project

2026-09-18 19:30:05 +07:00
commit b2208afcb6
19 changed files with 3519 additions and 0 deletions
@@ -0,0 +1,358 @@
+# agen.md — Web Rekrutmen Karyawan (VC-Final)
+
+> Dokumen acuan kerja agen (spec + konvensi + roadmap).
+> Status: **SELESAI (MVP) — versi web sederhana sudah dibangun.**
+
+---
+
+## 1. Ringkasan Proyek
+
+Web **sederhana** untuk membantu HR mengelola data pelamar, memantau **status
+rekrutmen**, menyimpan **berkas pelamar (CV, hasil test, portofolio)**, serta
+menghubungi pelamar via **WhatsApp** memakai **template formal dari HR** —
+termasuk **reminder jadwal interview**.
+
+Nama perusahaan/aplikasi: **E-recruitment**.
+
+Inti nilai: **satu klik dari data pelamar → WhatsApp terbuka dengan pesan formal
+yang sudah terisi data pelamar, tinggal tekan kirim.**
+
+---
+
+## 2. Keputusan yang Sudah Ditetapkan
+
+| # | Topik | Keputusan |
+|---|---|---|
+| 1 | Bentuk aplikasi | Web sederhana, tanpa backend, tanpa login |
+| 2 | Penyimpanan | **localStorage** + fitur **Export (unduh JSON)** dan Import |
+| 3 | Pengiriman WA | **Manual** — user klik tombol, `wa.me` terbuka, user menekan "Kirim" |
+| 4 | Status | Baru, Screening, Interview, Diterima, Ditolak, Gagal/Tidak Melanjutkan |
+| 5 | Isi pesan | Formal, template dari HR, bisa diedit HR |
+| 6 | Pengguna | HR saja (single user) |
+| 7 | Struktur file | Dipisah per halaman |
+| 8 | Nama perusahaan | **E-recruitment** |
+| 9 | Fitur tambahan | Reminder WA interview + berkas CV/hasil test/portofolio |
+
+---
+
+## 3. Ruang Lingkup
+
+### 3.1 Termasuk
+1. CRUD data pelamar.
+2. Status rekrutmen + riwayat perubahan status.
+3. Jadwal interview (tanggal, jam, metode, lokasi/link).
+4. Dua tombol reminder: **Reminder Pelamar** (ke nomor pelamar) dan
+   **Reminder Pewawancara** (ke nomor pewawancara).
+5. Tombol **Reminder Interview** → pesan WA jadwal interview.
+6. Berkas pelamar: **CV, hasil test, portofolio** (upload file dan/atau link).
+7. Manajemen template pesan formal.
+8. Pencarian & filter (nama, posisi, status, sumber).
+9. Ringkasan angka per status.
+10. **Export & Import Excel (.xlsx/.xls/.csv)** untuk data pelamar.
+11. **Export & Import JSON** (cadangan lengkap termasuk berkas).
+
+### 3.2 Tidak termasuk
+- Login / multi-user / hak akses.
+- Kirim WA otomatis dari server (butuh WA Business API berbayar).
+- Payroll, absensi, kontrak kerja.
+
+---
+
+## 4. Alur Utama (User Flow)
+
+**A. Kelola pelamar**
+1. HR buka web → daftar pelamar + ringkasan.
+2. Tambah/edit/hapus data pelamar, atur status.
+3. Lampirkan CV, hasil test, portofolio.
+
+**B. Hubungi via WhatsApp**
+1. HR klik tombol **WhatsApp** pada baris pelamar.
+2. Muncul dialog: pilih template (otomatis sesuai status) + **preview pesan**.
+3. Klik **Buka WhatsApp** → tab/app WA terbuka dengan pesan terisi.
+4. HR menekan **Kirim**.
+
+**C. Reminder interview**
+1. Untuk pelamar berstatus **Interview**, HR mengisi jadwal interview.
+2. HR klik tombol **Reminder Interview**.
+3. Pesan otomatis berisi hari/tanggal, jam, dan metode interview (dari data pelamar).
+4. HR kirim lewat WhatsApp.
+
+**D. Export**
+1. HR klik **Export** → browser mengunduh file `e-recruitment-backup-YYYYMMDD.json`.
+2. File bisa dipakai untuk pindah perangkat atau cadangan.
+
+---
+
+## 5. Penyimpanan Data
+
+- Data utama di **localStorage** (key berversi, mis. `erecruitment.v1`).
+- **Export** JSON berisi seluruh data: pelamar, riwayat status, template, pengaturan.
+- **Import** JSON untuk memulihkan/menggabungkan data.
+- Berkas (CV/hasil test/portofolio): lihat bagian 6.4.
+
+---
+
+## 6. Fitur Detail
+
+### 6.1 Data Pelamar
+| Field | Wajib | Keterangan |
+|---|---|---|
+| Nama lengkap | ✅ | |
+| Nomor WhatsApp | ✅ | dinormalisasi ke format 62... |
+| Posisi yang dilamar | ✅ | |
+| Status | ✅ | default: **Baru** |
+| Email | – | |
+| Domisili | – | |
+| Sumber pelamar | – | Iklan / Referral / Walk-in / Job Portal / Lainnya |
+| Tanggal melamar | – | default hari ini |
+| Catatan HR | – | internal, tidak dikirim ke pelamar |
+
+### 6.2 Jadwal Interview
+| Field | Keterangan |
+|---|---|
+| Tanggal interview | dipakai untuk {{tanggal}} & {{hari}} |
+| Jam interview | dipakai untuk {{jam}} |
+| Metode | Online / Offline |
+| Lokasi / Link meeting | alamat kantor atau link (Zoom/Meet) |
+| Nama pewawancara | opsional, untuk catatan |
+| No. WA pewawancara | dipakai untuk Reminder Pewawancara |
+
+### 6.3 Status Rekrutmen
+1. **Baru** — baru masuk (default)
+2. **Screening** — sedang ditinjau
+3. **Interview** — dijadwalkan/dalam wawancara
+4. **Diterima** — lolos / direkrut
+5. **Ditolak** — tidak lolos seleksi
+6. **Gagal / Tidak Melanjutkan** — tidak hadir / mengundurkan diri / berhenti di tengah proses
+
+- Daftar status bersifat data (HR bisa ubah).
+- Setiap perubahan status dicatat: status lama, status baru, waktu.
+
+### 6.4 Berkas Pelamar
+Tiga slot berkas: **CV**, **Hasil Test**, **Portofolio**.
+
+Setiap slot bisa diisi salah satu (atau keduanya):
+- **Link/URL** — mis. Google Drive. Paling ringan, direkomendasikan.
+- **Upload file** — PDF/gambar, disimpan sebagai data di browser.
+
+> Catatan teknis: localStorage hanya ±5 MB, sehingga file besar tidak muat.
+> Rencana: file upload disimpan di **IndexedDB** (kapasitas jauh lebih besar),
+> sedangkan metadata & link tetap di localStorage. Saat **Export**, isi file
+> disertakan sebagai base64 (dengan peringatan bila ukuran backup besar).
+> Tombol **Lihat/Unduh** dan **Hapus** tersedia untuk tiap berkas.
+
+### 6.5 WhatsApp Direct + Template
+- Format link: `https://wa.me/<nomor>?text=<pesan ter-encode>`
+- Normalisasi nomor:
+  - `08xxxxxxxxxx` → `628xxxxxxxxxx`
+  - `+62...` → `62...`
+  - `8xxxxxxxxx` → `628xxxxxxxxx`
+  - Buang spasi, `-`, `.`, `(`, `)`.
+- Placeholder yang didukung:
+  `{{nama}}`, `{{posisi}}`, `{{perusahaan}}`, `{{status}}`, `{{tanggal}}`,
+  `{{hari}}`, `{{jam}}`, `{{metode}}`, `{{lokasi}}`, `{{pewawancara}}`, `{{hr}}`, `{{jabatan_hr}}`
+- Template otomatis terpilih sesuai status; HR bisa ganti template lain.
+- Selalu ada **preview pesan** sebelum dibuka di WhatsApp.
+- Buka di tab baru (`target="_blank"` + `rel="noopener"`).
+
+### 6.6 Manajemen Template
+- CRUD template formal: nama, isi pesan, status terkait (opsional), aktif/nonaktif.
+- Tombol sisip placeholder.
+- Data perusahaan & nama HR diatur di menu **Pengaturan**.
+
+### 6.7 Pencarian, Filter, Ringkasan
+- Cari: nama / nomor HP / posisi.
+- Filter: status, posisi, sumber.
+- Urutkan: tanggal melamar terbaru / nama.
+- Kartu ringkasan: total pelamar & jumlah per status.
+
+---
+
+## 7. Template Pesan Formal (draft awal)
+
+> Bahasa formal, sopan, mewakili HR. Ditandatangani nama HR & E-recruitment.
+
+**T1 — Konfirmasi lamaran (Status: Baru)**
+> Yth. {{nama}},
+>
+> Terima kasih atas ketertarikan Anda melamar posisi {{posisi}} di {{perusahaan}}.
+> Lamaran Anda telah kami terima dan akan kami proses sesuai tahapan yang berlaku.
+> Kami akan menghubungi Anda kembali apabila terdapat pembaruan.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T2 — Undangan interview (Status: Interview)**
+> Yth. {{nama}},
+>
+> Sehubungan dengan lamaran Anda untuk posisi {{posisi}} di {{perusahaan}}, kami
+> mengundang Anda untuk mengikuti tahap wawancara pada hari {{hari}}, {{tanggal}}
+> pukul {{jam}} ({{metode}}).
+> Mohon konfirmasi ketersediaan Anda melalui pesan ini.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T3 — Reminder interview (Status: Interview)** ⭐
+> Yth. {{nama}},
+>
+> Kami mengingatkan kembali jadwal wawancara Anda untuk posisi {{posisi}} di
+> {{perusahaan}} pada hari **{{hari}}, {{tanggal}} pukul {{jam}}** ({{metode}}).
+> Lokasi/tautan: {{lokasi}}.
+> Mohon hadir tepat waktu dan konfirmasi kehadiran Anda melalui pesan ini.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T3b — Reminder interview ke Pewawancara (Jenis: Pewawancara)** ⭐
+> Yth. {{pewawancara}},
+>
+> Kami mengingatkan jadwal wawancara untuk kandidat berikut:
+> Nama: {{nama}}
+> Posisi: {{posisi}}
+> Waktu: {{hari}}, {{tanggal}} pukul {{jam}} ({{metode}})
+> Lokasi/tautan: {{lokasi}}
+>
+> Mohon konfirmasi kesediaan Anda. Terima kasih.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T4 — Diterima (Status: Diterima)**
+> Yth. {{nama}},
+>
+> Dengan senang hati kami sampaikan bahwa Anda **diterima** untuk posisi {{posisi}}
+> di {{perusahaan}}. Kami akan mengirimkan informasi lebih lanjut mengenai proses
+> selanjutnya.
+> Mohon konfirmasi kesediaan Anda melalui pesan ini.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T5 — Ditolak (Status: Ditolak)**
+> Yth. {{nama}},
+>
+> Terima kasih atas waktu dan minat Anda melamar posisi {{posisi}} di {{perusahaan}}.
+> Setelah melalui proses evaluasi, dengan berat hati kami sampaikan bahwa lamaran
+> Anda belum dapat kami lanjutkan pada kesempatan ini.
+> Kami menyimpan data Anda untuk peluang di masa mendatang.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T6 — Gagal / Tidak Melanjutkan (Status: Gagal / Tidak Melanjutkan)**
+> Yth. {{nama}},
+>
+> Kami menindaklanjuti proses lamaran Anda untuk posisi {{posisi}} di {{perusahaan}}.
+> Berdasarkan catatan kami, proses seleksi Anda tidak dapat dilanjutkan.
+> Apabila terdapat kekeliruan, silakan menghubungi kami kembali.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+**T7 — Follow-up (opsional)**
+> Yth. {{nama}},
+>
+> Kami ingin menindaklanjuti proses lamaran Anda untuk posisi {{posisi}} di
+> {{perusahaan}}. Mohon berkenan memberikan konfirmasi atas pesan ini.
+>
+> Hormat kami,
+> {{hr}}
+> {{perusahaan}}
+
+---
+
+## 8. Rencana Teknologi
+
+**Web statis murni: HTML + CSS + JavaScript. Tanpa framework, tanpa backend.**
+
+- Tanpa build tool / `npm install` — cukup buka `index.html` di browser.
+- Data di localStorage; berkas di IndexedDB; backup via Export JSON.
+- Bisa di-host gratis (GitHub Pages/Netlify) atau dipakai lokal.
+
+---
+
+## 9. Struktur Folder
+
+```
+VC-Final/
+├─ agen.md
+├─ README.md
+├─ index.html            # daftar pelamar + ringkasan + form
+├─ template.html         # manajemen template pesan
+├─ berkas.html           # (opsional) daftar/kelola berkas pelamar
+├─ pengaturan.html       # data perusahaan & HR
+└─ assets/
+   ├─ css/style.css
+   └─ js/
+      ├─ store.js        # localStorage + IndexedDB + export/import
+      ├─ phone.js        # normalisasi nomor HP
+      ├─ whatsapp.js     # render template + build wa.me
+      ├─ ui.js           # komponen tabel/kartu, form, modal, toast
+      ├─ app.js          # logika halaman pelamar
+      ├─ templates.js    # logika halaman template
+      └─ settings.js     # logika halaman pengaturan
+```
+
+---
+
+## 10. Konvensi
+
+- **Bahasa UI:** Indonesia.
+- **Penamaan kode:** Inggris; komentar boleh Indonesia.
+- **Nomor HP:** simpan `phone_raw` + `phone_norm`.
+- **Template:** teks biasa + placeholder `{{...}}`.
+- **Tanggal:** simpan ISO, tampilkan format Indonesia; ada helper hari (Senin, dst.).
+- **UI:** mobile-friendly, tombol WhatsApp besar & jelas, warna status berbeda.
+- **Commit:** Conventional Commits (`feat:`, `fix:`, `docs:`).
+
+---
+
+## 11. Roadmap
+
+- [x] **M0** — Diskusi & finalisasi spec
+- [x] **M1** — Struktur file + store (localStorage/IndexedDB) + data status & template default
+- [x] **M2** — CRUD pelamar + normalisasi no HP + validasi
+- [x] **M3** — Berkas pelamar (CV, hasil test, portofolio): link + upload, lihat, hapus
+- [x] **M4** — Tombol WhatsApp + pilih template + preview + render placeholder
+- [x] **M5** — Jadwal interview + tombol Reminder Interview
+- [x] **M6** — Manajemen template + halaman pengaturan (nama HR, E-recruitment)
+- [x] **M7** — Pencarian, filter, ringkasan
+- [x] **M8** — Export/Import JSON + polish UI
+- [x] **M9** — Upload berkas (IndexedDB + fallback) & Reminder Pewawancara
+- [x] **M10** — Export/Import Excel (.xlsx/.xls/.csv) + template Excel
+- [ ] (lanjutan) Login, kirim WA otomatis
+
+---
+
+## 12. Catatan / Asumsi
+
+1. Nama HR & jabatan dikosongkan dulu, diisi HR lewat halaman **Pengaturan**
+   (dipakai di tanda tangan template).
+2. Format tanggal Indonesia: mis. `Senin, 22 September 2025`.
+3. Berkas upload dibatasi ukuran (disarankan ≤ 5 MB per file) dan tipe
+   PDF/Gambar; link eksternal tidak dibatasi.
+4. Export menyertakan berkas yang di-upload, sehingga ukuran file backup bisa
+   membesar — beri peringatan bila melebihi ambang tertentu.
+
+---
+
+## 13. Definisi Selesai (DoD)
+
+- HR bisa menambah, mengedit, menghapus, dan melihat daftar pelamar.
+- Status bisa diubah dan perubahannya tercatat.
+- Tombol **Reminder Pelamar** dan **Reminder Pewawancara** membuka `wa.me` dengan
+  nomor yang benar & pesan formal terisi otomatis.
+- Tombol Reminder Interview menghasilkan pesan jadwal (hari, tanggal, jam, metode).
+- Berkas CV, hasil test, dan portofolio dapat diunggah/ditautkan, dilihat, dan dihapus.
+- Template bisa diedit HR tanpa menyentuh kode.
+- Pencarian, filter status, dan ringkasan berfungsi.
+- Export & Import data berfungsi.
+- Tampilan rapi di desktop dan HP.