upd: form surat
Deskripsi: - api detail categori list - form awal buat surat No Issues
This commit is contained in:
@@ -4,191 +4,209 @@ import { useState } from "react";
|
||||
import notification from "../notificationGlobal";
|
||||
|
||||
export default function SKYatim({ data }: { data: any }) {
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(data.surat.dataText.find((i: any) => i.jenis === key)?.value || "");
|
||||
const [viewImg, setViewImg] = useState<string>("");
|
||||
const getValue = (key: string) =>
|
||||
_.upperFirst(
|
||||
data.surat.dataText.find((i: any) => i.jenis === key)?.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);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b><br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b><br />
|
||||
<b>DESA {_.upperCase(data.setting.desaNama)}</b><br />
|
||||
Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: "center", marginTop: "15px" }}>
|
||||
<b><u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u></b><br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN PENANDATANGAN */}
|
||||
<div>Yang bertanda tangan di bawah ini:</div>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>: {data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>: {data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN IDENTITAS ANAK */}
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>: {getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>: {getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>: {getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>: {getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>: {getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* KETERANGAN ORANG TUA */}
|
||||
<div>
|
||||
Benar bahwa yang bersangkutan adalah <b>anak (Yatim / Piatu / Yatim Piatu)</b>,
|
||||
dengan keterangan sebagai berikut:
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div><b>1. Nama Ayah</b></div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ayah</td>
|
||||
<td>: {getValue("nama ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ayah")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div><b>2. Nama Ibu</b></div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ibu</td>
|
||||
<td>: {getValue("nama ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ibu")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Dengan demikian, berdasarkan keterangan pihak keluarga dan data di Kantor Desa,
|
||||
maka benar bahwa yang bersangkutan adalah
|
||||
<b> anak (Yatim / Piatu / Yatim Piatu).</b>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TANGGAL & TEMPAT */}
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td>: {data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>: {data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TTD */}
|
||||
<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>
|
||||
useShallowEffect(() => {
|
||||
loadImage();
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div style={{ lineHeight: "1.3" }}>
|
||||
{/* HEADER */}
|
||||
<div style={{ textAlign: "center", marginBottom: "10px" }}>
|
||||
<b>PEMERINTAH KABUPATEN {_.upperCase(data.setting.desaKabupaten)}</b>
|
||||
<br />
|
||||
<b>KECAMATAN {_.upperCase(data.setting.desaKecamatan)}</b>
|
||||
<br />
|
||||
<b>DESA {_.upperCase(data.setting.desaNama)}</b>
|
||||
<br />
|
||||
Alamat: {data.setting.desaAlamat}. Kode Pos: {data.setting.desaPos}
|
||||
</div>
|
||||
);
|
||||
|
||||
<div style={{ textAlign: "center", marginTop: "15px" }}>
|
||||
<b>
|
||||
<u>SURAT KETERANGAN YATIM / PIATU / YATIM PIATU</u>
|
||||
</b>
|
||||
<br />
|
||||
Nomor: {data.surat.noSurat}
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN PENANDATANGAN */}
|
||||
<div>Yang bertanda tangan di bawah ini:</div>
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {data.setting.perbekelNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jabatan</td>
|
||||
<td>: {data.setting.perbekelJabatan}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat Kantor</td>
|
||||
<td>: {data.setting.desaAlamat}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* BAGIAN IDENTITAS ANAK */}
|
||||
<div>Dengan ini menerangkan bahwa:</div>
|
||||
|
||||
<table style={{ width: "100%", marginTop: "5px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama</td>
|
||||
<td>: {getValue("nama")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tempat/Tanggal Lahir</td>
|
||||
<td>: {getValue("tempat tanggal lahir")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenis Kelamin</td>
|
||||
<td>: {getValue("jenis kelamin")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alamat</td>
|
||||
<td>: {getValue("alamat")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NIK</td>
|
||||
<td>: {getValue("nik")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pekerjaan</td>
|
||||
<td>: {getValue("pekerjaan")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* KETERANGAN ORANG TUA */}
|
||||
<div>
|
||||
Benar bahwa yang bersangkutan adalah{" "}
|
||||
<b>anak (Yatim / Piatu / Yatim Piatu)</b>, dengan keterangan sebagai
|
||||
berikut:
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<b>1. Nama Ayah</b>
|
||||
</div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ayah</td>
|
||||
<td>: {getValue("nama ayah")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ayah")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<b>2. Nama Ibu</b>
|
||||
</div>
|
||||
<table style={{ width: "100%" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Nama Ibu</td>
|
||||
<td>: {getValue("nama ibu")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>: {getValue("status ibu")}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Dengan demikian, berdasarkan keterangan pihak keluarga dan data di
|
||||
Kantor Desa, maka benar bahwa yang bersangkutan adalah
|
||||
<b> anak (Yatim / Piatu / Yatim Piatu).</b>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div>
|
||||
Surat keterangan ini dibuat dengan sebenar-benarnya untuk dipergunakan
|
||||
sebagaimana mestinya.
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TANGGAL & TEMPAT */}
|
||||
<table style={{ width: "100%", marginTop: "10px" }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{ width: "180px" }}>Dikeluarkan di</td>
|
||||
<td>: {data.setting.desaNama}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pada tanggal</td>
|
||||
<td>: {data.surat.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
{/* TTD */}
|
||||
<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