359 lines
12 KiB
Markdown
359 lines
12 KiB
Markdown
# 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.
|