upd: form surat

Deskripsi:
- api detail categori list
- form awal buat surat

No Issues

src/components/surat/SKTidakMampu.tsx

@@ -3,110 +3,118 @@ 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 [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);
-      }
-   };
+  useEffect(() => {
+    loadImage();
+  }, [data]);
 
-   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="Nama" value={getValue("nama")} />
-               <Row label="Tempat Tgl Lahir" value={getValue("tempat tanggal lahir")} />
-               <Row label="Alamat" value={getValue("alamat")} />
-               <Row label="NIK" value={getValue("nik")} />
-
-            </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 permohonan")}.</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>
+  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="Nama" value={getValue("nama")} />
+          <Row
+            label="Tempat Tgl Lahir"
+            value={getValue("tempat tanggal lahir")}
+          />
+          <Row label="Alamat" value={getValue("alamat")} />
+          <Row label="NIK" value={getValue("nik")} />
+        </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 permohonan")}.</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>
-   );
+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>
+  );
 }