From 566ab6c20686b89051473ea84defa815d77bd742 Mon Sep 17 00:00:00 2001 From: faisolavolut Date: Wed, 12 Mar 2025 01:41:34 +0700 Subject: [PATCH] fix: refine validation logic in Form component for enhanced user feedback --- components/ui/DocumentBiodata.tsx | 2601 +++++++++++++++++++++++++++++ 1 file changed, 2601 insertions(+) create mode 100644 components/ui/DocumentBiodata.tsx diff --git a/components/ui/DocumentBiodata.tsx b/components/ui/DocumentBiodata.tsx new file mode 100644 index 0000000..eafd969 --- /dev/null +++ b/components/ui/DocumentBiodata.tsx @@ -0,0 +1,2601 @@ +"use client"; +import { FC } from "react"; +import { + Page, + Text, + View, + Document, + StyleSheet, + Font, + Image, + PDFViewer, +} from "@react-pdf/renderer"; +import get from "lodash.get"; +import { dayDate } from "@/lib/utils/date"; +import { getNumber } from "@/lib/utils/getNumber"; +Font.register({ + family: "zen", + src: `${process.env.NEXT_PUBLIC_BASE_URL}/zen.ttf`, +}); +Font.register({ + family: "NotoSansCJK", + fonts: [ + { + src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSansSC-Regular.otf`, + fontWeight: "normal", + }, + { + src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSansSC-Bold.otf`, + fontWeight: "bold", + }, + ], +}); +// Create styles +const styles = StyleSheet.create({ + page: { + padding: 20, + fontFamily: "NotoSansCJK", + fontSize: 10, + display: "flex", + // fontWeight: "bold", + flexDirection: "column", + }, + title: { + fontSize: 10, + textAlign: "center", + width: 80, + fontWeight: "bold", + }, + + thead: { + fontSize: 12, + textAlign: "center", + display: "flex", + flexDirection: "row", + alignItems: "center", + }, + section: { + marginBottom: 10, + }, + table: { + width: "auto", + borderStyle: "solid", + borderWidth: 1, + marginBottom: 10, + }, + tableRow: { + flexDirection: "row", + }, + tableCol: { + borderStyle: "solid", + borderWidth: 1, + padding: 5, + flex: 1, + }, + image: { + height: 50, // Atur tinggi gambar + marginBottom: 5, + alignSelf: "center", + }, +}); +// Create Document Component +export const DocumentBiodata: FC = ({ data, onRender }) => { + return ( + + { + if (typeof onRender === "function") { + onRender(); + } + }} + > + + + + + + + Untuk Posisi 部位 : + + + + + DATA DIRI 个人资料 + + {[ + { label: "Nama Lengkap 姓名", value: "" }, + { label: "Tempat & Tanggal Lahir 出生地点，日期", value: "" }, + ].map((row: any, rowIndex) => { + return ; + })} + + + + Photo + No. ........ + + + + {[ + [ + { + label: "Jenis Kelamin 性别", + value: "L 男 / P 女", + mode: "noline", + }, + { + label: "Suku 民族", + value: "", + }, + ], + [ + { + label: "Status Perkawinan 婚姻状况", + value: "TK / K0 / K1 / K2 / K3", + mode: "noline", + }, + { + label: "Tinggi 身高 / Berat Badan 体重", + value: "____ cm / ____ kg", + }, + ], + [ + { label: "No. KTP 身份证号码", value: "" }, + { label: "Agama 宗教", value: "" }, + ], + [ + { label: "Masa Berlaku KTP 身份证有效期", value: "" }, + { label: "NPWP No. 个人所得税", value: "" }, + ], + [ + { + label: "Kepemilikan SIM 驾驶证", + value: "SIM A No. ___________", + }, + { label: "SIM B No.", value: "" }, + ], + [ + { label: "SIM C No.", value: "_____________" }, + { label: "Golongan Darah 血型", value: "____" }, + ], + { + label: "No. Jamsostek (KPJ) 社会保险卡号", + value: "", + // mode: "placeholder", + }, + { label: "Alamat Lengkap 地址", value: "" }, + { label: "Alamat Lengkap Asal 故乡地址", value: "" }, + { label: "Alamat Email 电子邮件地址", value: "" }, + ].map((row: any, rowIndex) => { + return ; + })} + + + + + + DATA KELUARGA 家人资料 + + + + + + Nama 姓名 + + + L/P 男/女 + + + Hub. Keluarga 亲缘 + + + Tgl Lahir 生日 + + + Pendidikan 学历 + + + No. HP 手机号码 + + Pekerjaan 工作 + + + {[ + { category: "Orang Tua 父母亲", count: 2 }, + { category: "Kakak/Adik 兄妹", count: 6 }, + { category: "Istri/Suami 妻子/丈夫", count: 1 }, + { category: "Anak 孩子", count: 2 }, + ].map((group, index) => ( + + + + {group.category} + + + + + + + + + {[...Array(group.count)].map((_, idx) => ( + + + {idx + 1}. + + + + + + + + + ))} + + ))} + + + + + + + PENDIDIKAN 学历 + + + + + A. Formal 正式 + + + + + + + Tahun 年 + + + + + Masuk 进入 + + + + + Keluar 退出 + + + + + + Nama Sekolah 校名 + + + Jurusan 科学 + + + Tempat 地点 + + + Berijazah 具有文凭书 / Tidak 否 + + + + + + Bicara 口语 + + + + + K + + + C + + + B + + + + + + + Tulis 写作 + + + + + K + + + C + + + B + + + + + + {[ + "SD 小学", + "SLTP 中学", + "SLTA 高学", + "D 1/2/3", + "S1", + "S2 研究", + "S3", + ].map((level, index) => ( + + + + + {level} + + + + + + + + + + + + + + + + ))} + + + + B. Non Formal非正式 + + + + + + Tahun 年 + + + Materi Pelatihan 培训材料 + + + Penyelenggara 主办者 + + + Lamanya 长度 + + + Tempat 地点 + + + Dibiayai 融资 + + + Berijazah 具有文凭书 + + + {[...Array(6)].map((_, index) => ( + + + + + + + + + + ))} + + + + + + + AKTIVITAS SOSIAL社交活动 + + + + + + + Tahun 年 + + + + Masuk 进入 + + + Keluar 退出 + + + + + Nama Organisasi 本组织名称 + + + Tempat 地点 + + + Posisi 地位 + + + Deskripsi Organisasi 本组织的说明 + + + + {[...Array(4)].map((_, index) => ( + + + + + + + + + + + ))} + + + + REFERENSI参考 + + + + + + Nama 姓名 + + + Nama Perusahaan 公司名称 + + + Alamat 地址 + + + No. Telp. 电话号码 + + + Posisi 地位 + + + Hubungan 关系 + + + + {[...Array(4)].map((_, index) => ( + + + + + + + + + ))} + + + + + + + + PENGALAMAN KERJA工作经验 + + + + + Diluar Grup JULONG 于julong集团以外(Dimulai dari perusahaan yang + terakhir始于最后一家公司起) + + + + + + + Tahun 年 + + + + Masuk 进入 + + + Keluar 退出 + + + + + Nama & Alamat Perusahaan 公司名称和地址 + + + + Jabatan 职级 + + + + Awal 初 + + + Akhir 末 + + + + + + Gaji 薪水 + + + + Awal 初 + + + Akhir 末 + + + + + Alasan Keluar 退出理由 + + + + {[...Array(2)].map((_, index) => ( + + + + + + + + + + + + + ))} + + {/* Additional Description Section */} + + + + Silahkan tunjukkan posisi anda dalam struktur organisasi + perusahaan + + 请您指指出您在公司系统里的职级： + + + Jelaskan tanggung jawab pekerjaan saudara + 描述您的工作职责： + + + + + + + + + Tahun 年 + + + + Masuk 进入 + + + Keluar 退出 + + + + + Nama & Alamat Perusahaan 公司名称和地址 + + + + Jabatan 职级 + + + + Awal 初 + + + Akhir 末 + + + + + + Gaji 薪水 + + + + Awal 初 + + + Akhir 末 + + + + + Alasan Keluar 退出理由 + + + + {[...Array(2)].map((_, index) => ( + + + + + + + + + + + + + ))} + + {/* Additional Description Section */} + + + + Silahkan tunjukkan posisi anda dalam struktur organisasi + perusahaan + + 请您指指出您在公司系统里的职级： + + + Jelaskan tanggung jawab pekerjaan saudara + 描述您的工作职责： + + + + + + + + + + Dalam Grup JULONG于julong集团内(Dimulai dari perusahaan yang + terakhir始于最后一家公司起) + + + + + + + Tahun 年 + + + + Masuk 进入 + + + Keluar 退出 + + + + + Nama & Alamat Perusahaan 公司名称和地址 + + + + Jabatan 职级 + + + + Awal 初 + + + Akhir 末 + + + + + + Gaji 薪水 + + + + Awal 初 + + + Akhir 末 + + + + + Alasan Pindah 搬迁理由 + + + + {[...Array(4)].map((_, index) => ( + + + + + + + + + + + + + ))} + + + + + + + INFORMASI LAINNYA更多信息 + + + + + + 1. Siapa yang dapat dihubungi jika terjadi keadaan darurat? + 在紧急情况下可以与谁进行联系？ + + {[ + [ + { + label: "Nama 姓名", + value: "L 男 / P 女", + }, + { + label: "Hubungan 关系", + value: "", + }, + ], + [ + { + label: "Alamat Lengkap 地址", + value: "", + }, + { + label: "No. Telp. / HP 电话号码", + value: "", + }, + ], + ].map((row: any, rowIndex) => { + return ; + })} + + + + + 2. Dapatkah kami menghubungi referensi anda, untuk memperoleh + informasi secara lengkap mengenai diri anda? + + + 我们能否与您的参考接触, 为获得您自己已完成的信息? + + + : + + + + + {[...Array(12)].map((_, index) => { + const questions = [ + "Pernahkah anda bekerja pada perusahaan/grup kami sebelumnya? 您是否在过去曾经与我们公司集团职业? Ya是 / Tidak否 *", + "Adakah keluarga/kenalan anda yang bekerja pada perusahaan/grup kami? 您有没有亲戚朋友在我们公司职业? Ya是 / Tidak否 *", + "Pernahkah anda menderita sakit berat atau kecelakaan? 您是否曾经得重病或严重事故? Ya是 / Tidak否 *", + "Pernahkah anda bermasalah dengan pihak yang berwajib? 您是否与有关当局惹麻烦? Ya是 / Tidak否 *", + "Apa hobi anda? 您的业余爱好是什么?", + "Apakah anda mempunyai masalah dengan tubuh anda, seperti penglihatan, pendengaran, berbicara, buta warna dll? 您本身的腑器 (听觉, 视觉, 讲话等等) 是否有问题 Ya是 / Tidak否 *", + "Kenapa anda ingin bergabung dengan perusahaan kami? 您为何想加入我们公司?", + "Bersediakah anda jika dimutasikan ke cabang lain atau perusahaan lain yang masih berada dalam grup perusahaan kami? 您是否愿意重新指派到另一家与我们有关的家公司? Ya是 / Tidak否 *", + "Bersediakah anda perjalanan dinas ke luar kota untuk waktu tertentu? 您愿意不到别处官方? Ya是 / Tidak否 *", + "Tunjangan dan fasilitas apa saja yang anda peroleh dari perusahaan tempat anda bekerja sekarang/sebelumnya?", + "Berapa gaji dan fasilitas yang anda harapkan? 你希望得到的薪水和设施是什么?", + "Jika anda diterima, kapan anda akan bergabung dengan perusahaan kami?", + ]; + + const details = [ + "Jika ya, kapan, sebagai apa dan nama perusahaan ? 若是是, 在何时, 什么职位, 和公司名称?", + "Jika ya, siapa, sebagai apa dan diperusahaan mana ? 若是是, 谁, 什么职位, 和公司名称?", + "Jika ya, kapan dan apa penyebabnya/kecelakaannya ? 若是是, 何时, 和什么疾病/事故?", + "Jika ya, kapan dan kasus apa ? 若是是, 何时, 什么案件?", + "", + "Jika ya, sebutkan apa ? 若是是, 请您提出来。", + "", + "Jika tidak, kenapa ? 若不愿, 为什么?", + "Jika tidak, kenapa ? 若不愿, 为什么?", + "您目前/以前的职业公司提供什么津贴和设备。", + "", + "若您被录用的话, 在何时可以加入我们公司?", + ]; + + const hasDetail = details[index] !== ""; + + return ( + + + {index + 3}. {questions[index]} + + + {hasDetail ? {details[index]} : <>} + + : + + + + ); + })} + + + + + + + Keterangan di atas saya buat dengan sebenarnya dan jika dikemudian + hari ternyata terdapat hal-hal yang bertentangan, maka saya + bersedia dituntut + + + 信息效果已与我方的说明一致。同样送类标题由我方的术强制转换地解释。若有朝一日存在任何虚假信息， + + 我能够接受贵公司的制裁并愿意收！ + + + {/* Bagian Kota dan Tanggal */} + + + , + + + + {/* Bagian Tanda Tangan */} + + . + + Calon Karyawan 候选人 + + + + + ); +}; +const HeaderPDF = ({ data }: { data: any }) => { + return ( + + + + + + JULONG GROUP INDONESIA + + + + + FORMULIR 表单 + + + + + + Nomor Dokumen + 文件编码 + + + {get(data, "document_number") || "-"} + + + + + Revisi 修正 + + + {getNumber(get(data, "revised"))} + + + + + Tanggal Berlaku 有效期 + + + {dayDate(get(data, "document_date"))} + + + + + Halaman 页面 + + + + `${pageNumber} dari ${totalPages}` + } + /> + + + + + + + DATA PRIBADI KARYAWAN 员工个人资料 + + + + ); +}; +const RowPDF = ({ row, rowIndex }: { row: any; rowIndex: any }) => { + if (!Array.isArray(row)) { + return ( + + + {row.label} + + : + + + {row.value || " "} + + + + ); + } + return ( + + + {row.map((item, colIndex) => ( + + + + {item.label} + + : + + + {item.value || ":"} + + + + + ))} + + + ); +};