# 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.