121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
import _ from "lodash";
|
|
import { useEffect, useState } from "react";
|
|
import notification from "../notificationGlobal";
|
|
|
|
export default function SKTidakMampu({ data }: { data: any }) {
|
|
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 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);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadImage();
|
|
}, [data]);
|
|
|
|
return (
|
|
<div style={{ lineHeight: "1.5" }}>
|
|
{/* TITLE */}
|
|
<div style={{ textAlign: "center", marginBottom: "20px" }}>
|
|
<b style={{ fontSize: "16px" }}>SURAT KETERANGAN TIDAK MAMPU</b>
|
|
<br />
|
|
Nomor: {data.surat.noSurat}
|
|
</div>
|
|
|
|
{/* ISI */}
|
|
<div>
|
|
<div style={{ marginBottom: "10px" }}>
|
|
Yang bertanda tangan dibawah ini, saya
|
|
</div>
|
|
|
|
{/* DATA PEJABAT */}
|
|
<div>
|
|
<Row label="Nama" value={data.setting.perbekelNama} />
|
|
<Row label="Alamat" value={data.setting.desaAlamat} />
|
|
<Row label="Jabatan" value={data.setting.perbekelJabatan} />
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div>Dengan ini menerangkan bahwa:</div>
|
|
|
|
{/* DATA WARGA */}
|
|
<div>
|
|
<Row label="NIK" value={getValue("nik")} />
|
|
<Row label="Nama" value={getValue("nama")} />
|
|
<Row
|
|
label="Tempat Tgl Lahir"
|
|
value={`${getValue("tempat_lahir")}, ${getValue("tanggal_lahir")}`}
|
|
/>
|
|
<Row label="Alamat" value={getValue("alamat")} />
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<p style={{ textAlign: "justify" }}>
|
|
Orang tersebut benar-benar penduduk desa {data.setting.desaNama} dan
|
|
termasuk keluarga tidak mampu. Surat keterangan ini dipergunakan untuk
|
|
<b>{getValue("alasan")}.</b>
|
|
</p>
|
|
|
|
<p style={{ textAlign: "justify" }}>
|
|
Demikian surat keterangan ini kami buat dengan sebenar-benarnya untuk
|
|
dapat dipergunakan sebagaimana mestinya.
|
|
</p>
|
|
|
|
<br />
|
|
<br />
|
|
|
|
{/* TANDA TANGAN */}
|
|
<div
|
|
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
|
|
>
|
|
<div style={{ textAlign: "center" }}>
|
|
{data.setting.desaKabupaten}, {data.surat.createdAt} <br /> <br />
|
|
<img src={viewImg || undefined} alt="ttd perbekel" width={100} />
|
|
<br />
|
|
<u>{data.setting.perbekelNama}</u>
|
|
<br />
|
|
{data.setting.perbekelJabatan + " " + data.setting.desaNama}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Row({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div style={{ display: "flex", marginBottom: "4px" }}>
|
|
<div style={{ width: "180px" }}>{label}</div>
|
|
<div style={{ width: "10px" }}>:</div>
|
|
<div>{value}</div>
|
|
</div>
|
|
);
|
|
}
|