jenna-mcp/src/components/surat/SKKelakuanBaik.tsx

import _ from "lodash";
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 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.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>
   );
}