upd: form surat
Deskripsi: - api detail categori list - form awal buat surat No Issues
This commit is contained in:
@@ -3,143 +3,153 @@ import { useEffect, useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKKelakuanBaik({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value || ""
|
||||
);
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (jenis: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
|
||||
"",
|
||||
);
|
||||
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
setViewImg("");
|
||||
if (!data.setting.perbekelTTD) return;
|
||||
|
||||
const urlApi = '/api/pengaduan/image?folder=lainnya&fileName=' + data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const urlApi =
|
||||
"/api/pengaduan/image?folder=lainnya&fileName=" +
|
||||
data.setting.perbekelTTD;
|
||||
// Fetch manual agar mendapatkan Response asli
|
||||
const res = await fetch(urlApi);
|
||||
if (!res.ok)
|
||||
return notification({
|
||||
title: "Error",
|
||||
message: "Failed to load image sign",
|
||||
type: "error",
|
||||
});
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
setViewImg(url);
|
||||
} catch (err) {
|
||||
console.error("Gagal load gambar:", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "30px" }}>
|
||||
<b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b><br />
|
||||
(PENGANTAR SKCK)<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS PENDUDUK */}
|
||||
<table style={{ width: "100%", marginBottom: "15px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama lengkap</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tgl Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* ISI */}
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Adalah benar penduduk yang berdomisili di wilayah kami dan selama tinggal di lingkungan
|
||||
Desa {data.setting.desaNama}, berkelakuan baik, tidak pernah terlibat perbuatan melanggar hukum,
|
||||
serta dikenal sopan dan aktif dalam kegiatan kemasyarakatan.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan Surat Keterangan
|
||||
Catatan Kepolisian (SKCK) ke Polsek/Polres {getValue("polsek")}.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan, kecuali terdapat perubahan
|
||||
data yang mendasar.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL */}
|
||||
<table style={{ width: "100%", marginBottom: "40px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>:</td>
|
||||
<td>{data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} /> <br />
|
||||
<u>{data.setting.perbekelNama}</u><br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "30px" }}>
|
||||
<b style={{ fontSize: "18px" }}>SURAT KETERANGAN KELAKUAN BAIK</b>
|
||||
<br />
|
||||
(PENGANTAR SKCK)
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
);
|
||||
|
||||
{/* PEMBUKA */}
|
||||
<div style={{ marginBottom: "15px" }}>
|
||||
Yang bertanda tangan di bawah ini menerangkan dengan sebenarnya bahwa:
|
||||
</div>
|
||||
|
||||
{/* IDENTITAS PENDUDUK */}
|
||||
<table style={{ width: "100%", marginBottom: "15px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama lengkap</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tgl Lahir</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agama</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("agama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>:</td>
|
||||
<td>{getValue("alamat")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* ISI */}
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Adalah benar penduduk yang berdomisili di wilayah kami dan selama
|
||||
tinggal di lingkungan Desa {data.setting.desaNama}, berkelakuan baik,
|
||||
tidak pernah terlibat perbuatan melanggar hukum, serta dikenal sopan dan
|
||||
aktif dalam kegiatan kemasyarakatan.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat keterangan ini diberikan sebagai pengantar permohonan penerbitan
|
||||
Surat Keterangan Catatan Kepolisian (SKCK) ke Polsek/Polres{" "}
|
||||
{getValue("polsek")}.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "15px" }}>
|
||||
Surat ini berlaku selama 6 (enam) bulan sejak tanggal diterbitkan,
|
||||
kecuali terdapat perubahan data yang mendasar.
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "justify", marginBottom: "20px" }}>
|
||||
Demikian surat keterangan ini dibuat dengan sebenarnya untuk
|
||||
dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
{/* TANGGAL */}
|
||||
<table style={{ width: "100%", marginBottom: "40px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td style={{ width: "10px" }}>:</td>
|
||||
<td>{data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>:</td>
|
||||
<td>{data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* TANDA TANGAN */}
|
||||
<div
|
||||
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
||||
>
|
||||
<div style={{ textAlign: "center" }}>
|
||||
Kepala Desa {data.setting.desaNama}
|
||||
<br /> <br />
|
||||
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />{" "}
|
||||
<br />
|
||||
<u>{data.setting.perbekelNama}</u>
|
||||
<br />
|
||||
NIP. {data.setting.perbekelNIP}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user