// screens-apply.jsx — Method choice, CV upload, Profile form function formatRp(val) { const num = String(val).replace(/\D/g, ""); if (!num) return ""; return num.replace(/\B(?=(\d{3})+(?!\d))/g, "."); } function parseRp(formatted) { return formatted.replace(/\./g, ""); } function MethodScreen({ t, lang, state, onChoose }) { const name = (state.reg && state.reg.name) || ""; const first = name.split(" ")[0] || ""; return (
{t.methodEyebrow}{first ? `, ${first}` : ""} 👋

{t.methodTitle}

{t.methodSub}

); } const CV_ACCEPT = ".pdf,.doc,.docx,.jpg,.jpeg,.png,.webp"; function CvPreviewRow({ icon, label, value }) { if (!value) return null; return (
{label} {value}
); } function CvPreview({ lang, data: d, fname, fsize, tag, color, onConfirm, onRescan }) { const id = lang === "id"; const eduLabels = { SD:"SD", SMP:"SMP", SMA:"SMA", SMK:"SMK", D1:"D1", D2:"D2", D3:"D3", D4:"D4", S1:"S1/Sarjana", S2:"S2/Magister", S3:"S3/Doktor" }; return (
{/* Header hasil */}
{id ? "Hasil scan CV" : "CV scan result"}

{id ? "Periksa data berikut sebelum melanjutkan. Anda bisa ubah di form profil." : "Check the data below before continuing. You can edit in the profile form."}

{/* Data diri */}
{id ? "DATA DIRI" : "PERSONAL INFO"}
{/* Tentang saya */} {d.aboutMe && (
{id ? "TENTANG SAYA" : "ABOUT ME"}

{d.aboutMe}

)} {/* Pendidikan */} {(d.edu || d.major) && (
{id ? "PENDIDIKAN" : "EDUCATION"}
)} {/* Riwayat kerja */} {d.workHistory?.length > 0 && (
{id ? "RIWAYAT KERJA" : "WORK HISTORY"}
{d.workHistory.map((w, i) => (
{w.position || "—"}
{w.company}{w.period ? ` · ${w.period}` : ""}
))}
)} {/* Sosial */} {(d.instagram || d.tiktok || d.linkedin) && (
SOCIAL
)} {/* Tidak ada data */} {!d.fullName && !d.email && !d.wa && !d.edu && !d.workHistory?.length && (
{id ? "Data yang berhasil diekstrak terbatas. Silakan isi form secara manual." : "Limited data extracted. Please fill the form manually."}
)}
); } // options: [{ id, label }], value: [id, ...] function MultiChipSelect({ options = [], value = [], onChange, invalid, placeholder }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); function toggle(id) { if (value.includes(id)) onChange(value.filter(x => x !== id)); else onChange([...value, id]); } const labelOf = (id) => (options.find(o => o.id === id) || {}).label || id; return (
setOpen(o => !o)} > {value.length === 0 && {placeholder}} {value.map(id => ( {labelOf(id)} { e.stopPropagation(); toggle(id); }}>× ))}
{open && (
{options.length === 0 && (
Memuat data…
)} {options.map(opt => { const sel = value.includes(opt.id); return (
toggle(opt.id)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", cursor: "pointer", background: sel ? "var(--brand-soft,#fce7f3)" : "transparent", fontSize: 14 }}> {sel && } {opt.label}
); })}
)}
); } function fileTag(name) { if (/\.docx?$/i.test(name)) return { tag: "DOC", color: "#2563eb" }; if (/\.pdf$/i.test(name)) return { tag: "PDF", color: "#ef4444" }; return { tag: "IMG", color: "#7c3aed" }; } function CvUploadScreen({ t, lang, onParsed, onBack }) { const [file, setFile] = useState(null); const [phase, setPhase] = useState("idle"); // idle | reading | error | done const [steps, setSteps] = useState(0); const [errMsg, setErrMsg] = useState(""); const [cvData, setCvData] = useState(null); const items = [t.px_name, t.px_edu, t.px_exp, t.px_skill]; async function pick(f) { if (!f) return; setFile(f); setPhase("reading"); setSteps(0); setErrMsg(""); setCvData(null); try { const result = await window.API.parseCv(f); if (result.error) { setPhase("error"); setErrMsg(result.error); return; } setCvData(result.data); } catch { setPhase("error"); setErrMsg(lang === "id" ? "Gagal membaca file. Coba lagi." : "Failed to read file. Try again."); } } // Animasi step — lanjut terus sampai parse selesai (cvData ada) useEffect(() => { if (phase !== "reading") return; let i = 0; const iv = setInterval(() => { setSteps(s => { const next = Math.min(s + 1, items.length); return next; }); i++; if (i >= items.length) clearInterval(iv); }, 700); return () => clearInterval(iv); }, [phase]); // Set done saat cvData sudah ada dan animasi sudah mulai useEffect(() => { if (cvData && phase === "reading") { setTimeout(() => setPhase("done"), steps >= items.length ? 300 : 800); } }, [cvData, steps]); const fname = file ? file.name : ""; const fsize = file ? `${Math.max(1, Math.round(file.size / 1024))} KB` : ""; const { tag, color } = fileTag(fname); function reset() { setFile(null); setPhase("idle"); setErrMsg(""); setSteps(0); } return (
{t.cvEyebrow}

{t.cvTitle}

{t.cvSub}

{phase === "idle" && ( <>
)} {phase === "error" && ( <>
{lang === "id" ? "File tidak valid" : "Invalid file"}
{errMsg}
)} {phase === "reading" && ( <>
{[88, 64, 96, 72, 80, 56].map((w, i) => (
))}
{t.cvReading}

{t.cvReadingSub}

{items.map((it, i) => (
{it}
))}
)} {phase === "done" && cvData && ( onParsed(cvData)} onRescan={reset} /> )}
); } function ProfileScreen({ t, lang, state, setState, onNext, onBack, autoFilled, editMode, profileReady = true, testsAllDone = false, masterPositions = [], masterLocations = [] }) { const D = window.APPDATA; const p = state.profile || {}; const [errors, setErrors] = useState({}); const [showErrBanner, setShowErrBanner] = useState(false); const [uploading, setUploading] = useState({}); const [docUrls, setDocUrls] = useState({}); const formRef = useRef(null); const [saveStatus, setSaveStatus] = useState(""); // "" | "saving" | "saved" const autoSaveTimer = useRef(null); const [appStatus, setAppStatus] = useState(""); // Load server doc URLs on mount so previews work after refresh useEffect(() => { if (!window.API.getToken()) return; window.API.getMyDocs().then(d => { if (d && !d.error) setDocUrls(d); }).catch(() => {}); window.API.getMyStatus().then(d => { if (d && !d.error) setAppStatus(d.status || ""); }).catch(() => {}); }, []); // Auto-save dengan debounce 1.5 detik setiap kali profile berubah useEffect(() => { if (!window.API.getToken()) return; if (!state.profile) return; const p = state.profile; const hasData = p.fullName || p.birthPlace || p.address || p.positions?.length; if (!hasData) return; clearTimeout(autoSaveTimer.current); setSaveStatus("saving"); autoSaveTimer.current = setTimeout(() => { window.API.saveStep("profile", { profile: p }) .then(() => { setSaveStatus("saved"); setTimeout(() => setSaveStatus(""), 2000); }) .catch(() => setSaveStatus("")); }, 1500); return () => clearTimeout(autoSaveTimer.current); }, [state.profile]); function resolveDocUrl(type, stateVal) { return docUrls[type] || (typeof stateVal === "string" && stateVal.startsWith("blob:") ? stateVal : (stateVal ? true : false)); } function set(k, v) { setState((s) => ({ ...s, profile: { ...s.profile, [k]: v } })); } const work = (p.workHistory && p.workHistory.length) ? p.workHistory : [{ company: "", position: "", period: "", salary: "" }]; function setWork(i, key, val) { set("workHistory", work.map((x, j) => j === i ? { ...x, [key]: val } : x)); } function addWork() { set("workHistory", [...work, { company: "", position: "", period: "", salary: "" }]); } function removeWork(i){ set("workHistory", work.filter((_, j) => j !== i)); } async function uploadDoc(file, type, flag) { if (!file) return; setUploading((u) => ({ ...u, [type]: true })); // Store local preview URL immediately so user sees the image const previewUrl = URL.createObjectURL(file); set(flag, previewUrl); if (window.API.getToken()) { window.API.upload(file, type).catch(console.error); } setUploading((u) => ({ ...u, [type]: false })); } function submit() { const e = {}; ["birthPlace", "address", "major", "salary"].forEach((k) => { if (!p[k]) e[k] = t.required; }); if (!p.positions?.length) e.position = t.required; if (!p.locations?.length) e.location = t.required; if (!resolveDocUrl("ktp", p.ktp)) e.ktp = t.required; if (!resolveDocUrl("photo", p.photo)) e.photo = t.required; if (appStatus === "diterima") { if (!p.famName) e.famName = t.required; if (!p.famRelation) e.famRelation = t.required; if (!p.famPhone) e.famPhone = t.required; } setErrors(e); if (Object.keys(e).length === 0) { setShowErrBanner(false); onNext(); } else { setShowErrBanner(true); setTimeout(() => { const root = formRef.current; if (!root) return; const bad = root.querySelector(".inp.invalid, .ta.invalid, .field .err"); const target = bad ? (bad.closest(".field") || bad) : null; if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 110, behavior: "smooth" }); }, 30); } } return (
{t.profEyebrow}

{t.profTitle}

{t.profSub}

{autoFilled && (
{t.autoFilled} {t.autoFilledSub}
)} {/* Data diri */}
1

{t.secPersonal}

set("fullName", e.target.value)} />
{lang === "id" ? "Terverifikasi WA & SMS" : "WA & SMS Verified"}
{/* Nomor kontak lain dari CV */} {((p.otherPhones || []).length > 0 || null) && (
{(p.otherPhones || []).map((num, i) => (
{ const arr = [...(p.otherPhones || [])]; arr[i] = e.target.value; set("otherPhones", arr); }} />
))}
)}
set("birthPlace", e.target.value)} /> set("birthDate", e.target.value)} />