Merge pull request 'upd: tambah satuan' (#115) from amalia/06-feb-26 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/jenna-mcp/pulls/115

src/components/ModalSurat.tsx

@@ -1,5 +1,5 @@
 import apiFetch from "@/lib/apiFetch";
-import { Flex, Loader, Modal, Text } from "@mantine/core";
+import { Flex, Modal, Progress, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
@@ -23,7 +23,7 @@ export default function ModalSurat({
   surat,
 }: {
   open: boolean;
-  onClose: (val: any) => void;
+  onClose: (val: { success: boolean, data: string }) => void;
   surat: string;
 }) {
   const A4Style = {
@@ -35,7 +35,7 @@ export default function ModalSurat({
     fontSize: "14px",
     fontFamily: "Times New Roman",
   };
-  const [uploading, setUploading] = useState<"Menyiapkan" | "Mengupload" | "Selesai">("Menyiapkan")
+  const [uploading, setUploading] = useState<{ text: "Menyiapkan" | "Mengupload" | "Selesai" | "Gagal", value: number }>({ text: "Menyiapkan", value: 10 })
   const hiddenRef = useRef<any>(null);
   const { data, mutate, isLoading } = useSWR("surat", () =>
     apiFetch.api.surat.detail.get({
@@ -45,6 +45,7 @@ export default function ModalSurat({
     }),
   );
 
+
   useShallowEffect(() => {
     mutate();
   }, []);
@@ -52,7 +53,7 @@ export default function ModalSurat({
   const uploadPdf = async () => {
     try {
       if (data && data.data && data.data.surat && (data.data.surat.file == "" || data.data.surat.file == null)) {
-        setUploading("Mengupload");
+        setUploading({ text: "Mengupload", value: 75 });
         const element = hiddenRef.current;
         const canvas = await html2canvas(element, {
           scale: 2,
@@ -95,9 +96,21 @@ export default function ModalSurat({
           filename: resImg.data?.filename!,
         });
 
-        setUploading("Selesai");
+        if (resUpdate?.data?.success) {
+          setUploading({ text: "Selesai", value: 100 });
+          setTimeout(() => {
+            onClose({ success: true, data: resUpdate.data?.link });
+          }, 1000)
+        } else {
+          setUploading({ text: "Gagal", value: 100 });
+          setTimeout(() => {
+            onClose({ success: false, data: "" });
+          }, 1000)
+        }
+      } else {
+        setUploading({ text: "Gagal", value: 100 });
         setTimeout(() => {
-          onClose(resUpdate.data?.link);
+          onClose({ success: false, data: "" });
         }, 1000)
       }
 
@@ -110,7 +123,7 @@ export default function ModalSurat({
     if (open) {
       setTimeout(() => {
         uploadPdf();
-      }, 5000);
+      }, 3000);
     }
   }, [surat, open]);
 
@@ -136,14 +149,24 @@ export default function ModalSurat({
           },
         }}
         title={
-          <Flex justify="space-between" align="center" w="100%">
-            <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
+          <>
+            <Flex justify="space-between" align="center" w="100%">
+              <div style={{ fontSize: 18, fontWeight: 600 }}>Preview Surat</div>
 
-            <Flex gap={8} align="center">
+              {/* <Flex gap={8} align="center">
               <Loader color="blue" size="xs" />
-              <Text size="sm">{uploading}</Text>
+              <Text size="sm">{uploading.text}</Text>
+            </Flex> */}
             </Flex>
-          </Flex>
+            <Stack
+              align="stretch"
+              justify="center"
+              gap="xs"
+            >
+              <Text size="sm" ta="center">{uploading.text} - Harap menunggu sampai selesai</Text>
+              <Progress radius="md" value={uploading.value} animated size="lg" />
+            </Stack>
+          </>
         }
       >
         <div ref={hiddenRef} style={A4Style}>

src/components/surat/SKKelahiran.tsx

@@ -7,7 +7,7 @@ export default function SKKelahiran({ data }: { data: any }) {
   const getValue = (jenis: string) =>
     _.upperFirst(
       data.surat.dataText.find((item: any) => item.jenis === jenis)?.value ||
-        "",
+      "",
     );
 
   const loadImage = async () => {
@@ -161,7 +161,7 @@ export default function SKKelahiran({ data }: { data: any }) {
             <tr>
               <td>Tempat & Tanggal Lahir</td>
               <td>:</td>
-              <td>{`${getValue("tempat_lahir_ayah")}, ${"tanggal_lahir_ayah"}`}</td>
+              <td>{`${getValue("tempat_lahir_ayah")}, ${getValue("tanggal_lahir_ayah")}`}</td>
             </tr>
             <tr>
               <td>Pekerjaan</td>

src/components/surat/SKTempatUsaha.tsx

@@ -90,7 +90,7 @@ export default function SKTempatUsaha({ data }: { data: any }) {
           <Row label="Bidang Usaha" value={getValue("bidang_usaha")} />
           <Row label="Alamat Usaha" value={getValue("alamat_usaha")} />
           <Row label="Status Tempat Usaha" value={getValue("status_tempat")} />
-          <Row label="Luas Tempat Usaha" value={getValue("luas_usaha")} />
+          <Row label="Luas Tempat Usaha" value={getValue("luas_usaha") + " m2"} />
           <Row label="Jumlah Karyawan" value={getValue("jumlah_karyawan")} />
         </div>
 

src/lib/categoryPelayananSurat.ts

@@ -8,472 +8,377 @@ export const categoryPelayananSurat = [
       {
         key: "pengantar_kelian",
         name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing"
+        desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing",
+        required: true, satuan: null
       },
       {
         key: "ktp_kk",
         name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
+        desc: "Fotokopi KTP atau Kartu Keluarga",
+        required: true, satuan: null
       },
       {
         key: "dokumen_beda",
         name: "Dokumen Pendukung",
-        desc: "Fotokopi dokumen yang terdapat perbedaan biodata (ijazah, sertifikat, dll)"
+        desc: "Fotokopi dokumen yang terdapat perbedaan biodata (ijazah, sertifikat, dll)",
+        required: true, satuan: null
       }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number" },
-      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir pemohon", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir pemohon", type: "date" },
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number", required: true, satuan: null },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir pemohon", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir pemohon", type: "date", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
         desc: "Jenis kelamin pemohon",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat lengkap tempat tinggal", type: "text" },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text" },
+      { key: "alamat", name: "Alamat", desc: "Alamat lengkap tempat tinggal", type: "text", required: true, satuan: null },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text", required: true, satuan: null },
       {
         key: "dokumen",
         name: "Nama Dokumen",
-        desc: "Jenis dokumen yang mengalami perbedaan biodata (cth : ijazah, sertifikat, dll)",
-        type: "text"
+        desc: "Jenis dokumen yang mengalami perbedaan biodata",
+        type: "text",
+        required: true, satuan: null
       },
       {
         key: "data_dokumen",
         name: "Data Dokumen",
-        desc: "Data dokumen yg berbeda (cth : nama, tempat lahir, tanggal lahir, jenis kelamin, alamat, pekerjaan)",
-        type: "text"
+        desc: "Data dokumen yg berbeda",
+        type: "text",
+        required: true, satuan: null
       },
-      {
-        key: "dokumen_a",
-        name: "Data pada Dokumen A",
-        desc: "Data biodata yang tertulis pada dokumen pertama",
-        type: "text"
-      },
-      {
-        key: "dokumen_b",
-        name: "Data pada Dokumen B",
-        desc: "Data biodata yang tertulis pada dokumen kedua",
-        type: "text"
-      }
+      { key: "dokumen_a", name: "Data pada Dokumen A", desc: "Data biodata pada dokumen pertama", type: "text", required: true, satuan: null },
+      { key: "dokumen_b", name: "Data pada Dokumen B", desc: "Data biodata pada dokumen kedua", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "skbelumkawin",
     name: "Surat Keterangan Belum Kawin",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kk",
-        name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
-      },
-      {
-        key: "akta_cerai",
-        name: "Akta Cerai",
-        desc: "Fotokopi akta cerai (jika berstatus janda/duda)"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kk", name: "KTP / KK", desc: "Fotokopi KTP atau Kartu Keluarga", required: true, satuan: null },
+      { key: "akta_cerai", name: "Akta Cerai", desc: "Fotokopi akta cerai (jika berstatus janda/duda)", required: false, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number" },
-      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir pemohon", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir pemohon", type: "date" },
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number", required: true, satuan: null },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir pemohon", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir pemohon", type: "date", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
         desc: "Jenis kelamin pemohon",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text", required: true, satuan: null },
       {
         key: "agama",
         name: "Agama",
         desc: "Agama pemohon",
         type: "enum",
-        options: enumAgama
+        options: enumAgama,
+        required: true, satuan: null
       },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text" }
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text", required: true, satuan: null }
     ]
   },
+
   {
     id: "skdomisiliorganisasi",
     name: "Surat Keterangan Domisili Organisasi",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "skt_organisasi",
-        name: "SKT Organisasi",
-        desc: "Fotokopi SKT Organisasi atau pengukuhan kelompok"
-      },
-      {
-        key: "susunan_pengurus",
-        name: "Susunan Pengurus",
-        desc: "Susunan pengurus lengkap dengan kop organisasi"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "skt_organisasi", name: "SKT Organisasi", desc: "Fotokopi SKT Organisasi", required: true, satuan: null },
+      { key: "susunan_pengurus", name: "Susunan Pengurus", desc: "Susunan pengurus organisasi", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nama_organisasi", name: "Nama Organisasi", desc: "Nama resmi organisasi", type: "text" },
-      { key: "jenis_organisasi", name: "Jenis Organisasi", desc: "Jenis atau bentuk organisasi", type: "text" },
-      { key: "alamat_organisasi", name: "Alamat Organisasi", desc: "Alamat sekretariat organisasi", type: "text" },
-      { key: "no_telepon", name: "Nomor Telepon", desc: "Nomor telepon organisasi", type: "text" },
-      { key: "nama_pimpinan", name: "Nama Pimpinan", desc: "Nama pimpinan organisasi", type: "text" },
-      { key: "keperluan", name: "Keperluan", desc: "Keperluan pembuatan surat", type: "text" }
+      { key: "nama_organisasi", name: "Nama Organisasi", desc: "Nama resmi organisasi", type: "text", required: true, satuan: null },
+      { key: "jenis_organisasi", name: "Jenis Organisasi", desc: "Jenis organisasi", type: "text", required: true, satuan: null },
+      { key: "alamat_organisasi", name: "Alamat Organisasi", desc: "Alamat sekretariat", type: "text", required: true, satuan: null },
+      { key: "no_telepon", name: "Nomor Telepon", desc: "Nomor telepon organisasi", type: "text", required: true, satuan: null },
+      { key: "nama_pimpinan", name: "Nama Pimpinan", desc: "Nama pimpinan", type: "text", required: true, satuan: null },
+      { key: "keperluan", name: "Keperluan", desc: "Keperluan pembuatan surat", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "skkelahiran",
     name: "Surat Keterangan Kelahiran",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "surat_lahir",
-        name: "Surat Keterangan Lahir",
-        desc: "Surat keterangan lahir dari bidan/dokter (jika ada)"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "surat_lahir", name: "Surat Keterangan Lahir", desc: "Surat keterangan lahir dari bidan/dokter (jika ada)", required: false, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nama_anak", name: "Nama Anak", desc: "Nama bayi/anak", type: "text" },
-      { key: "tanggal_lahir_anak", name: "Tanggal Lahir Anak", desc: "Tanggal lahir anak", type: "date" },
-      { key: "pukul_lahir", name: "Pukul Lahir", desc: "Waktu kelahiran anak", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat kelahiran anak", type: "text" },
+      { key: "nama_anak", name: "Nama Anak", desc: "Nama bayi/anak", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir_anak", name: "Tanggal Lahir Anak", desc: "Tanggal lahir anak", type: "date", required: true, satuan: null },
+      { key: "pukul_lahir", name: "Pukul Lahir", desc: "Waktu kelahiran", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat kelahiran", type: "text", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin Anak",
         desc: "Jenis kelamin anak",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "anak_ke", name: "Anak Ke-", desc: "Urutan kelahiran anak", type: "number" },
-      { key: "nik_ibu", name: "NIK Ibu", desc: "NIK ibu kandung", type: "number" },
-      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama lengkap ibu", type: "text" },
-      { key: "tempat_lahir_ibu", name: "Tempat Lahir Ibu", desc: "Tempat lahir ibu kandung", type: "text" },
-      { key: "tanggal_lahir_ibu", name: "Tanggal Lahir Ibu", desc: "Tanggal lahir ibu kandung", type: "date" },
-      { key: "pekerjaan_ibu", name: "Pekerjaan Ibu", desc: "Pekerjaan ibu kandung", type: "text" },
-      { key: "alamat_ibu", name: "Alamat Ibu", desc: "Alamat ibu kandung", type: "text" },
-      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama lengkap ayah", type: "text" },
-      { key: "nik_ayah", name: "NIK Ayah", desc: "NIK ayah kandung", type: "number" },
-      { key: "tempat_lahir_ayah", name: "Tempat Lahir Ayah", desc: "Tempat lahir ayah kandung", type: "text" },
-      { key: "tanggal_lahir_ayah", name: "Tanggal Lahir Ayah", desc: "Tanggal lahir ayah kandung", type: "date" },
-      { key: "pekerjaan_ayah", name: "Pekerjaan Ayah", desc: "Pekerjaan ayah kandung", type: "text" },
-      { key: "alamat_ayah", name: "Alamat Ayah", desc: "Alamat ayah kandung", type: "text" },
-      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama pihak yang melaporkan", type: "text" },
-      { key: "hubungan_pelapor", name: "Hubungan Pelapor", desc: "Hubungan pelapor dengan anak", type: "text" },
-      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat pelapor", type: "text" }
+      { key: "anak_ke", name: "Anak Ke-", desc: "Urutan kelahiran", type: "number", required: true, satuan: null },
+      { key: "nik_ibu", name: "NIK Ibu", desc: "NIK ibu kandung", type: "number", required: true, satuan: null },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama ibu kandung", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir_ibu", name: "Tempat Lahir Ibu", desc: "Tempat lahir ibu", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir_ibu", name: "Tanggal Lahir Ibu", desc: "Tanggal lahir ibu", type: "date", required: true, satuan: null },
+      { key: "pekerjaan_ibu", name: "Pekerjaan Ibu", desc: "Pekerjaan ibu", type: "text", required: true, satuan: null },
+      { key: "alamat_ibu", name: "Alamat Ibu", desc: "Alamat ibu", type: "text", required: true, satuan: null },
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama ayah kandung", type: "text", required: true, satuan: null },
+      { key: "nik_ayah", name: "NIK Ayah", desc: "NIK ayah kandung", type: "number", required: true, satuan: null },
+      { key: "tempat_lahir_ayah", name: "Tempat Lahir Ayah", desc: "Tempat lahir ayah", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir_ayah", name: "Tanggal Lahir Ayah", desc: "Tanggal lahir ayah", type: "date", required: true, satuan: null },
+      { key: "pekerjaan_ayah", name: "Pekerjaan Ayah", desc: "Pekerjaan ayah", type: "text", required: true, satuan: null },
+      { key: "alamat_ayah", name: "Alamat Ayah", desc: "Alamat ayah", type: "text", required: true, satuan: null },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama pelapor", type: "text", required: true, satuan: null },
+      { key: "hubungan_pelapor", name: "Hubungan Pelapor", desc: "Hubungan dengan anak", type: "text", required: true, satuan: null },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat pelapor", type: "text", required: true, satuan: null }
     ]
-
   },
   {
     id: "skkelakuanbaik",
     name: "Surat Keterangan Kelakuan Baik (Pengantar SKCK)",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kk",
-        name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kk", name: "KTP / KK", desc: "Fotokopi KTP atau KK", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number" },
-      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date" },
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number", required: true, satuan: null },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
-        desc: "Jenis kelamin pemohon",
+        desc: "Jenis kelamin",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
       {
         key: "agama",
         name: "Agama",
-        desc: "Agama pemohon",
+        desc: "Agama",
         type: "enum",
-        options: enumAgama
+        options: enumAgama,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text" },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text" },
-      { key: "polsek", name: "Polsek Tujuan", desc: "Polsek tujuan pembuatan SKCK", type: "text" }
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text", required: true, satuan: null },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan", type: "text", required: true, satuan: null },
+      { key: "polsek", name: "Polsek Tujuan", desc: "Polsek tujuan", type: "text", required: true, satuan: null }
     ]
-
   },
   {
     id: "skkematian",
     name: "Surat Keterangan Kematian",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kk",
-        name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
-      },
-      {
-        key: "surat_kematian",
-        name: "Surat Keterangan Kematian",
-        desc: "Surat keterangan kematian dari rumah sakit/dokter (jika ada)"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kk", name: "KTP / KK", desc: "Fotokopi KTP atau KK", required: true, satuan: null },
+      { key: "surat_kematian", name: "Surat Keterangan Kematian", desc: "Surat keterangan kematian dari rumah sakit/dokter (jika ada)", required: false, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik_pelapor", name: "NIK Pelapor", desc: "Nomor Induk Kependudukan pelapor", type: "number" },
-      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama lengkap pelapor", type: "text" },
-      { key: "pekerjaan_pelapor", name: "Pekerjaan Pelapor", desc: "Pekerjaan pelapor", type: "text" },
-      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat tempat tinggal pelapor", type: "text" },
-      { key: "hubungan_pelapor", name: "Hubungan dengan Almarhum", desc: "Hubungan pelapor dengan almarhum", type: "text" },
-      { key: "nama_almarhum", name: "Nama Almarhum", desc: "Nama lengkap almarhum", type: "text" },
-      { key: "nik_almarhum", name: "NIK Almarhum", desc: "Nomor Induk Kependudukan almarhum", type: "number" },
-      { key: "tempat_lahir_almarhum", name: "Tempat Lahir Almarhum", desc: "Tempat lahir almarhum", type: "text" },
-      { key: "tanggal_lahir_almarhum", name: "Tanggal Lahir Almarhum", desc: "Tanggal lahir almarhum", type: "date" },
-      { key: "alamat_almarhum", name: "Alamat Almarhum", desc: "Alamat terakhir almarhum", type: "text" },
+      { key: "nik_pelapor", name: "NIK Pelapor", desc: "NIK pelapor", type: "number", required: true, satuan: null },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama pelapor", type: "text", required: true, satuan: null },
+      { key: "pekerjaan_pelapor", name: "Pekerjaan Pelapor", desc: "Pekerjaan pelapor", type: "text", required: true, satuan: null },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat pelapor", type: "text", required: true, satuan: null },
+      { key: "hubungan_pelapor", name: "Hubungan Pelapor", desc: "Hubungan dengan almarhum", type: "text", required: true, satuan: null },
+      { key: "nama_almarhum", name: "Nama Almarhum", desc: "Nama almarhum", type: "text", required: true, satuan: null },
+      { key: "nik_almarhum", name: "NIK Almarhum", desc: "NIK almarhum", type: "number", required: true, satuan: null },
+      { key: "tempat_lahir_almarhum", name: "Tempat Lahir", desc: "Tempat lahir almarhum", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir_almarhum", name: "Tanggal Lahir", desc: "Tanggal lahir almarhum", type: "date", required: true, satuan: null },
+      { key: "alamat_almarhum", name: "Alamat", desc: "Alamat terakhir", type: "text", required: true, satuan: null },
       {
         key: "agama_almarhum",
         name: "Agama Almarhum",
         desc: "Agama almarhum",
         type: "enum",
-        options: enumAgama
+        options: enumAgama,
+        required: true, satuan: null
       },
-      { key: "tanggal_kematian", name: "Tanggal Kematian", desc: "Tanggal meninggal dunia", type: "date" },
-      { key: "waktu_kematian", name: "Waktu Kematian", desc: "Waktu meninggal dunia", type: "text" },
-      { key: "tempat_kematian", name: "Tempat Kematian", desc: "Tempat meninggal dunia", type: "text" },
-      { key: "penyebab_kematian", name: "Penyebab Kematian", desc: "Penyebab meninggal dunia", type: "text" }
+      { key: "tanggal_kematian", name: "Tanggal Kematian", desc: "Tanggal meninggal dunia", type: "date", required: true, satuan: null },
+      { key: "waktu_kematian", name: "Waktu Kematian", desc: "Waktu meninggal dunia", type: "text", required: true, satuan: null },
+      { key: "tempat_kematian", name: "Tempat Kematian", desc: "Tempat meninggal dunia", type: "text", required: true, satuan: null },
+      { key: "penyebab_kematian", name: "Penyebab Kematian", desc: "Penyebab meninggal dunia", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "skpenghasilan",
     name: "Surat Keterangan Penghasilan",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_ortu_kk",
-        name: "KTP Orang Tua / KK",
-        desc: "Fotokopi KTP orang tua atau Kartu Keluarga"
-      },
-      {
-        key: "surat_pernyataan",
-        name: "Surat Pernyataan",
-        desc: "Surat pernyataan penghasilan bermaterai"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_ortu_kk", name: "KTP Orang Tua / KK", desc: "Fotokopi KTP orang tua/KK", required: true, satuan: null },
+      { key: "surat_pernyataan", name: "Surat Pernyataan Penghasilan", desc: "Surat pernyataan penghasilan bermaterai", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nama", name: "Nama Lengkap", desc: "Nama pemohon", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemohon", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
-        desc: "Jenis kelamin pemohon",
+        desc: "Jenis kelamin",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text" },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon/orang tua", type: "text" },
-      { key: "penghasilan", name: "Penghasilan", desc: "Jumlah penghasilan per bulan", type: "number" },
-      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan pengajuan surat penghasilan", type: "text" }
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text", required: true, satuan: null },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon", type: "text", required: true, satuan: null },
+      { key: "penghasilan", name: "Penghasilan", desc: "Jumlah penghasilan per bulan", type: "number", required: true, satuan: "/Bulan" },
+      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan pengajuan surat penghasilan", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "sktempatusaha",
     name: "Surat Keterangan Tempat Usaha",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kk",
-        name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
-      },
-      {
-        key: "foto_lokasi",
-        name: "Foto Lokasi Usaha",
-        desc: "Foto lokasi usaha dicetak dan distempel oleh Kelian"
-      },
-      {
-        key: "dokumen_lahan",
-        name: "Dokumen Lahan",
-        desc: "SPPT, Sertifikat, atau surat sewa tempat usaha"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kk", name: "KTP / KK", desc: "Fotokopi KTP/KK", required: true, satuan: null },
+      { key: "foto_lokasi", name: "Foto Lokasi Usaha", desc: "Foto lokasi usaha", required: true, satuan: null },
+      { key: "dokumen_lahan", name: "Dokumen Lahan", desc: "SPPT/Sertifikat/surat sewa tempat usaha", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number" },
-      { key: "nama_pemilik", name: "Nama Pemilik", desc: "Nama pemilik usaha", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date" },
-      { key: "alamat_pemilik", name: "Alamat Pemilik", desc: "Alamat pemilik usaha", type: "text" },
-      { key: "nama_usaha", name: "Nama Usaha", desc: "Nama usaha", type: "text" },
-      { key: "bidang_usaha", name: "Bidang Usaha", desc: "Bidang atau jenis usaha", type: "text" },
-      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha", type: "text" },
-      { key: "status_tempat", name: "Status Tempat Usaha", desc: "Status kepemilikan tempat usaha", type: "enum", options: enumStatusTempatUsaha },
-      { key: "luas_usaha", name: "Luas Tempat Usaha", desc: "Luas tempat usaha (m²)", type: "number" },
-      { key: "jumlah_karyawan", name: "Jumlah Karyawan", desc: "Jumlah tenaga kerja", type: "number" },
-      { key: "tujuan", name: "Tujuan Pembuatan Surat", desc: "Tujuan pembuatan surat keterangan", type: "text" }
+      { key: "nik", name: "NIK", desc: "NIK pemilik", type: "number", required: true, satuan: null },
+      { key: "nama_pemilik", name: "Nama Pemilik", desc: "Nama pemilik usaha", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
+      { key: "alamat_pemilik", name: "Alamat Pemilik", desc: "Alamat pemilik", type: "text", required: true, satuan: null },
+      { key: "nama_usaha", name: "Nama Usaha", desc: "Nama usaha", type: "text", required: true, satuan: null },
+      { key: "bidang_usaha", name: "Bidang Usaha", desc: "Bidang usaha", type: "text", required: true, satuan: null },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat usaha", type: "text", required: true, satuan: null },
+      {
+        key: "status_tempat",
+        name: "Status Tempat Usaha",
+        desc: "Status kepemilikan tempat usaha",
+        type: "enum",
+        options: enumStatusTempatUsaha,
+        required: true, satuan: null
+      },
+      { key: "luas_usaha", name: "Luas Tempat Usaha", desc: "Luas tempat usaha (m²)", type: "number", required: true, satuan: "m²" },
+      { key: "jumlah_karyawan", name: "Jumlah Karyawan", desc: "Jumlah karyawan", type: "number", required: true, satuan: null },
+      { key: "tujuan", name: "Tujuan Pembuatan Surat", desc: "Tujuan pembuatan surat keterangan", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "sktidakmampu",
     name: "Surat Keterangan Tidak Mampu",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kia_kk",
-        name: "KTP / KIA / KK",
-        desc: "Fotokopi KTP, KIA, atau Kartu Keluarga"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kia_kk", name: "KTP / KIA / KK", desc: "Fotokopi KTP/KIA/KK", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan pemohon", type: "number" },
-      { key: "nama", name: "Nama Lengkap", desc: "Nama lengkap pemohon", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir pemohon", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir pemohon", type: "date" },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal pemohon", type: "text" },
-      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan pengajuan Surat Keterangan Tidak Mampu", type: "text" }
+      { key: "nik", name: "NIK", desc: "NIK pemohon", type: "number", required: true, satuan: null },
+      { key: "nama Lengkap", name: "Nama", desc: "Nama pemohon", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
+      { key: "alamat", name: "Alamat", desc: "Alamat pemohon", type: "text", required: true, satuan: null },
+      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan permohonan", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "skusaha",
     name: "Surat Keterangan Usaha",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kk",
-        name: "KTP / KK",
-        desc: "Fotokopi KTP atau Kartu Keluarga"
-      },
-      {
-        key: "foto_lokasi",
-        name: "Foto Lokasi Usaha",
-        desc: "Foto lokasi usaha dicetak dan distempel oleh Kelian"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kk", name: "KTP / KK", desc: "Fotokopi KTP/KK", required: true, satuan: null },
+      { key: "foto_lokasi", name: "Foto Lokasi Usaha", desc: "Foto lokasi usaha", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nama", name: "Nama Lengkap", desc: "Nama pemilik usaha", type: "text" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemilik usaha", type: "text", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
         desc: "Jenis kelamin pemilik usaha",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date" },
-      { key: "negara", name: "Kewarganegaraan", desc: "Kewarganegaraan pemilik usaha", type: "text" },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
+      { key: "negara", name: "Kewarganegaraan", desc: "Kewarganegaraan", type: "text", required: true, satuan: null },
       {
         key: "agama",
         name: "Agama",
-        desc: "Agama pemilik usaha",
+        desc: "Agama",
         type: "enum",
-        options: enumAgama
+        options: enumAgama,
+        required: true, satuan: null
       },
       {
         key: "status_perkawinan",
         name: "Status Perkawinan",
         desc: "Status perkawinan",
         type: "enum",
-        options: enumStatusPerkawinan
+        options: enumStatusPerkawinan,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text" },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemilik usaha", type: "text" },
-      { key: "jenis_usaha", name: "Jenis Usaha", desc: "Jenis usaha yang dijalankan", type: "text" },
-      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha", type: "text" }
+      { key: "alamat", name: "Alamat", desc: "Alamat", type: "text", required: true, satuan: null },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan", type: "text", required: true, satuan: null },
+      { key: "jenis_usaha", name: "Jenis Usaha", desc: "Jenis usaha", type: "text", required: true, satuan: null },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat usaha", type: "text", required: true, satuan: null }
     ]
   },
   {
     id: "skyatimpiatu",
     name: "Surat Keterangan Yatim / Piatu / Yatim Piatu",
     syaratDokumen: [
-      {
-        key: "pengantar_kelian",
-        name: "Pengantar Kelian",
-        desc: "Surat Pengantar Kelian Banjar Dinas"
-      },
-      {
-        key: "ktp_kia_kk",
-        name: "KTP / KIA / KK",
-        desc: "Fotokopi KTP, KIA, atau Kartu Keluarga"
-      }
+      { key: "pengantar_kelian", name: "Pengantar Kelian", desc: "Surat Pengantar Kelian Banjar Dinas", required: true, satuan: null },
+      { key: "ktp_kia_kk", name: "KTP / KIA / KK", desc: "Fotokopi KTP/KIA/KK", required: true, satuan: null }
     ],
     dataText: [],
     dataPelengkap: [
-      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan", type: "number" },
-      { key: "nama", name: "Nama Lengkap", desc: "Nama anak", type: "text" },
-      { key: "tempat_lahir", name: "Tempat Lahir Anak", desc: "Tempat lahir anak", type: "text" },
-      { key: "tanggal_lahir", name: "Tanggal Lahir Anak", desc: "Tanggal lahir anak", type: "date" },
+      { key: "nik", name: "NIK", desc: "NIK anak", type: "number", required: true, satuan: null },
+      { key: "nama", name: "Nama", desc: "Nama anak", type: "text", required: true, satuan: null },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat lahir", type: "text", required: true, satuan: null },
+      { key: "tanggal_lahir", name: "Tanggal Lahir", desc: "Tanggal lahir", type: "date", required: true, satuan: null },
       {
         key: "jenis_kelamin",
         name: "Jenis Kelamin",
         desc: "Jenis kelamin anak",
         type: "enum",
-        options: enumJenisKelamin
+        options: enumJenisKelamin,
+        required: true, satuan: null
       },
-      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal", type: "text" },
-      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan (jika ada)", type: "text" },
-
-      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama ayah kandung", type: "text" },
+      { key: "alamat", name: "Alamat", desc: "Alamat", type: "text", required: true, satuan: null },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan (jika ada)", type: "text", required: false, satuan: null },
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama ayah", type: "text", required: true, satuan: null },
       {
         key: "status_ayah",
         name: "Status Ayah",
-        desc: "Status ayah (hidup / meninggal)",
+        desc: "Status ayah",
         type: "enum",
-        options: enumStatusHidup
+        options: enumStatusHidup,
+        required: true, satuan: null
       },
-      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama ibu kandung", type: "text" },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama ibu", type: "text", required: true, satuan: null },
       {
         key: "status_ibu",
         name: "Status Ibu",
-        desc: "Status ibu (hidup / meninggal)",
+        desc: "Status ibu",
         type: "enum",
-        options: enumStatusHidup
+        options: enumStatusHidup,
+        required: true, satuan: null
       }
     ]
-
   }
 ];

src/pages/darmasaba/surat.tsx

@@ -31,7 +31,7 @@ import {
   IconInfoCircle,
   IconNotes,
   IconPhone,
-  IconUpload,
+  IconUpload
 } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import "dayjs/locale/id";
@@ -42,6 +42,7 @@ import useSWR from "swr";
 type DataItem = {
   key: string;
   value: string;
+  required: boolean;
 };
 
 type FormSurat = {
@@ -96,7 +97,7 @@ export default function FormSurat() {
         setJenisSuratFix({ name: "", id: "" });
       } else {
         const namaJenis = fromSlug(jenisSurat);
-        const data = listCategory.find((item: any) => item.name == namaJenis);
+        const data = listCategory.find((item: any) => item.name.toUpperCase() == namaJenis.toUpperCase());
         if (!data) return;
         setJenisSuratFix(data);
       }
@@ -119,15 +120,17 @@ export default function FormSurat() {
         nama: "",
         phone: "",
         dataPelengkap: (get.data?.dataPelengkap || []).map(
-          (item: { key: string }) => ({
+          (item: { key: string, required: boolean }) => ({
             key: item.key,
             value: "",
+            required: item.required
           }),
         ),
         syaratDokumen: (get.data?.syaratDokumen || []).map(
-          (item: { key: string }) => ({
+          (item: { key: string, required: boolean }) => ({
             key: item.key,
             value: "",
+            required: item.required
           }),
         ),
       });
@@ -167,7 +170,7 @@ export default function FormSurat() {
       if (Array.isArray(value)) {
         return value.some(
           (item) =>
-            typeof item.value === "string" && item.value.trim() === "",
+            (typeof item.value === "string" && item.value.trim() === "" && item.required) || (typeof item.value === "object" && item.value === null && item.required),
         );
       }
       return typeof value === "string" && value.trim() === "";
@@ -276,13 +279,14 @@ export default function FormSurat() {
     value: any;
   }) {
     if (key === "dataPelengkap" || key === "syaratDokumen") {
-      const errorMsg = validateField(value.key, value.value);
-
-      setErrors((prev) => ({
-        ...prev,
-        [value.key]: errorMsg,
-      }));
+      if (value.required == true) {
+        const errorMsg = validateField(value.key, value.value);
 
+        setErrors((prev) => ({
+          ...prev,
+          [value.key]: errorMsg,
+        }));
+      }
       setFormSurat((prev) => ({
         ...prev,
         [key]: updateArrayByKey(prev[key], value.key, value.value),
@@ -381,7 +385,7 @@ export default function FormSurat() {
                         value: item.name,
                         label: item.name,
                       }))}
-                      value={jenisSuratFix.name}
+                      value={jenisSuratFix.name == "" ? null : jenisSuratFix.name}
                       onChange={(value) => {
                         const slug = toSlug(String(value));
                         navigate("/darmasaba/surat?jenis=" + slug);
@@ -400,7 +404,7 @@ export default function FormSurat() {
                 <Grid>
                   <Grid.Col span={6}>
                     <TextInput
-                      label={<FieldLabel label="Nama" hint="Nama kontak" />}
+                      label={<FieldLabel label="Nama" hint="Nama kontak" required />}
                       placeholder="Budi Setiawan"
                       value={formSurat.nama}
                       error={errors.nama_kontak}
@@ -414,6 +418,7 @@ export default function FormSurat() {
                     <TextInput
                       label={
                         <FieldLabel
+                          required
                           label="Nomor Telephone"
                           hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
                         />
@@ -450,6 +455,7 @@ export default function FormSurat() {
                                     <FieldLabel
                                       label={item.name}
                                       hint={item.desc}
+                                      required={item.required}
                                     />
                                   }
                                   data={item.options ?? []}
@@ -457,7 +463,7 @@ export default function FormSurat() {
                                   onChange={(e) => {
                                     validationForm({
                                       key: "dataPelengkap",
-                                      value: { key: item.key, value: e },
+                                      value: { key: item.key, value: e, required: item.required },
                                     });
                                   }}
                                   value={
@@ -474,6 +480,7 @@ export default function FormSurat() {
                                     <FieldLabel
                                       label={item.name}
                                       hint={item.desc}
+                                      required={item.required}
                                     />
                                   }
                                   placeholder={item.name}
@@ -488,6 +495,7 @@ export default function FormSurat() {
                                       value: {
                                         key: item.key,
                                         value: formatted,
+                                        required: item.required,
                                       },
                                     });
                                   }}
@@ -500,6 +508,7 @@ export default function FormSurat() {
                                     <FieldLabel
                                       label={item.name}
                                       hint={item.desc}
+                                      required={item.required}
                                     />
                                   }
                                   placeholder={item.name}
@@ -509,6 +518,7 @@ export default function FormSurat() {
                                       value: {
                                         key: item.key,
                                         value: e.target.value,
+                                        required: item.required,
                                       },
                                     })
                                   }
@@ -517,6 +527,10 @@ export default function FormSurat() {
                                       (n: any) => n.key == item.key,
                                     )?.value
                                   }
+                                  rightSection={
+                                    item.satuan != null &&
+                                    <Text mr={"lg"}>{item.satuan}</Text>
+                                  }
                                 />
                               )}
                             </Grid.Col>
@@ -545,6 +559,7 @@ export default function FormSurat() {
                                   })
                                 }
                                 name={item.name}
+                                required={item.required}
                               />
                             </Grid.Col>
                           ),
@@ -569,10 +584,20 @@ export default function FormSurat() {
   );
 }
 
-function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+function FieldLabel({ label, hint, required = false, }: { label: string; hint?: string; required?: boolean; }) {
   return (
     <Group justify="apart" gap="xs" align="center">
-      <Text fw={600}>{label}</Text>
+      <Group gap={4} align="center">
+        <Text fw={600}>
+          {label}
+          {required && (
+            <Text span c="red" ml={4}>
+              *
+            </Text>
+          )}
+        </Text>
+      </Group>
+
       {hint && (
         <Tooltip label={hint} withArrow>
           <ActionIcon size={24} variant="subtle">
@@ -584,6 +609,7 @@ function FieldLabel({ label, hint }: { label: string; hint?: string }) {
   );
 }
 
+
 function FormSection({
   title,
   icon,
@@ -619,6 +645,7 @@ function FileInputWrapper({
   preview,
   name,
   description,
+  required = false,
 }: {
   label: string;
   placeholder?: string;
@@ -627,12 +654,20 @@ function FileInputWrapper({
   preview?: string | null;
   name: string;
   description?: string;
+  required?: boolean;
 }) {
   return (
     <Stack gap="xs">
       <Flex direction={"column"}>
         <Group justify="apart" align="center">
-          <Text fw={500}>{label}</Text>
+          <Text fw={500}>
+            {label}
+            {required && (
+              <Text span c="red" ml={4}>
+                *
+              </Text>
+            )}
+          </Text>
         </Group>
         {description && (
           <Text size="sm" c="dimmed" mt={4} style={{ lineHeight: 1.2 }}>
@@ -648,6 +683,7 @@ function FileInputWrapper({
         leftSection={<IconUpload />}
         aria-label={label}
         name={name}
+        clearable={true}
       />
 
       {preview ? (

src/pages/darmasaba/update_data_surat.tsx

@@ -50,6 +50,7 @@ type UpdateDataItem = {
   id: string;
   key: string;
   value: any;
+  required: boolean;
 };
 
 type FormSurat = {
@@ -125,10 +126,20 @@ export default function UpdateDataSurat() {
   );
 }
 
-function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+function FieldLabel({ label, hint, required = false, }: { label: string; hint?: string; required?: boolean; }) {
   return (
     <Group justify="apart" gap="xs" align="center">
-      <Text fw={600}>{label}</Text>
+      <Group gap={4} align="center">
+        <Text fw={600}>
+          {label}
+          {required && (
+            <Text span c="red" ml={4}>
+              *
+            </Text>
+          )}
+        </Text>
+      </Group>
+
       {hint && (
         <Tooltip label={hint} withArrow>
           <ActionIcon size={24} variant="subtle">
@@ -139,7 +150,6 @@ function FieldLabel({ label, hint }: { label: string; hint?: string }) {
     </Group>
   );
 }
-
 function FormSection({
   title,
   icon,
@@ -185,6 +195,8 @@ function FileInputWrapper({
   description,
   linkView,
   disabled,
+  required = false,
+
 }: {
   label: string;
   placeholder?: string;
@@ -195,6 +207,7 @@ function FileInputWrapper({
   name: string;
   description?: string;
   disabled?: boolean;
+  required?: boolean;
 }) {
   const [viewImg, setViewImg] = useState("");
   const [openedPreviewFile, setOpenedPreviewFile] = useState(false);
@@ -219,7 +232,14 @@ function FileInputWrapper({
       <Stack gap="xs">
         <Flex direction={"column"}>
           <Group justify="apart" align="center">
-            <Text fw={500}>{label}</Text>
+            <Text fw={500}>
+              {label}
+              {required && (
+                <Text span c="red" ml={4}>
+                  *
+                </Text>
+              )}
+            </Text>
           </Group>
           {description && (
             <Text size="sm" c="dimmed" mt={4} style={{ lineHeight: 1.2 }}>
@@ -241,6 +261,7 @@ function FileInputWrapper({
           aria-label={label}
           name={name}
           disabled={disabled}
+          clearable={true}
         />
 
         {preview ? (
@@ -317,57 +338,60 @@ function SearchData() {
   }
 
   return (
-    <FormSection
-      title="Cari Pengajuan Surat"
-      info="Masukkan nomor pengajuan dan nomor telepon yang digunakan saat pengajuan surat."
-    >
-      <Grid>
-        <Grid.Col span={6}>
-          <TextInput
-            label={
-              <FieldLabel
-                label="Nomor Pengajuan"
-                hint="Nomor pengajuan surat"
-              />
-            }
-            placeholder="PS-2025-000123"
-            onChange={(e) => {
-              setSearchPengajuan(e.target.value);
-            }}
-          />
-        </Grid.Col>
+    <>
+      <FullScreenLoading visible={submitLoading} text="Mencari Data" />
+      <FormSection
+        title="Cari Pengajuan Surat"
+        info="Masukkan nomor pengajuan dan nomor telepon yang digunakan saat pengajuan surat."
+      >
+        <Grid>
+          <Grid.Col span={6}>
+            <TextInput
+              label={
+                <FieldLabel
+                  label="Nomor Pengajuan"
+                  hint="Nomor pengajuan surat"
+                />
+              }
+              placeholder="PS-2025-000123"
+              onChange={(e) => {
+                setSearchPengajuan(e.target.value);
+              }}
+            />
+          </Grid.Col>
 
-        <Grid.Col span={6}>
-          <TextInput
-            label={
-              <FieldLabel
-                label="Nomor Telephone"
-                hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
-              />
-            }
-            placeholder="08123456789"
-            type="number"
-            onChange={(e) => {
-              setSearchPengajuanPhone(e.target.value);
-            }}
-          />
-        </Grid.Col>
+          <Grid.Col span={6}>
+            <TextInput
+              label={
+                <FieldLabel
+                  label="Nomor Telephone"
+                  hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
+                />
+              }
+              placeholder="08123456789"
+              type="number"
+              onChange={(e) => {
+                setSearchPengajuanPhone(e.target.value);
+              }}
+            />
+          </Grid.Col>
 
-        <Grid.Col span={12}>
-          <Button
-            fullWidth
-            variant="light"
-            color="blue"
-            onClick={() => {
-              handleSearch();
-            }}
-            loading={submitLoading}
-          >
-            Cari Pengajuan
-          </Button>
-        </Grid.Col>
-      </Grid>
-    </FormSection>
+          <Grid.Col span={12}>
+            <Button
+              fullWidth
+              variant="light"
+              color="blue"
+              onClick={() => {
+                handleSearch();
+              }}
+              loading={submitLoading}
+            >
+              Cari Pengajuan
+            </Button>
+          </Grid.Col>
+        </Grid>
+      </FormSection>
+    </>
   );
 }
 
@@ -387,6 +411,7 @@ function DataUpdate({
   const [dataSyaratDokumen, setDataSyaratDokumen] = useState<DataItem[]>([]);
   const [dataPengajuan, setDataPengajuan] = useState<DataPengajuan | {}>({});
   const [status, setStatus] = useState("");
+  const [loadingFetchData, setLoadingFetchData] = useState(false);
   const [formSurat, setFormSurat] = useState<FormUpdateSurat>({
     dataPelengkap: [],
     syaratDokumen: [],
@@ -394,6 +419,7 @@ function DataUpdate({
 
   async function fetchData() {
     try {
+      setLoadingFetchData(true);
       const res = await apiFetch.api.pelayanan["detail-data"].post({
         nomerPengajuan: noPengajuan,
       });
@@ -421,6 +447,8 @@ function DataUpdate({
       }
     } catch (error) {
       console.error("Error fetching data:", error);
+    } finally {
+      setLoadingFetchData(false);
     }
   }
 
@@ -470,21 +498,33 @@ function DataUpdate({
     kategori: "dataPelengkap" | "syaratDokumen";
     value: UpdateDataItem;
   }) {
-    const errorMsg = validateField(value.key, value.value);
+    if (kategori == "syaratDokumen" && value.value == null) {
+      setFormSurat((prev) => ({
+        ...prev,
+        syaratDokumen: prev.syaratDokumen.filter(
+          (item) => item.id !== value.id
+        ),
+      }));
+    } else {
+      if (value.required == true) {
+        const errorMsg = validateField(value.key, value.value);
+        setErrors((prev) => ({
+          ...prev,
+          [value.id]: errorMsg,
+        }));
+      }
 
-    setErrors((prev) => ({
-      ...prev,
-      [value.id]: errorMsg,
-    }));
 
-    setFormSurat((prev) => ({
-      ...prev,
-      [kategori]: upsertById(prev[kategori], {
-        id: value.id,
-        key: value.key,
-        value: value.value,
-      }),
-    }));
+      setFormSurat((prev) => ({
+        ...prev,
+        [kategori]: upsertById(prev[kategori], {
+          id: value.id,
+          key: value.key,
+          value: value.value,
+          required: value.required,
+        }),
+      }));
+    }
   }
 
 
@@ -521,7 +561,7 @@ function DataUpdate({
         if (Array.isArray(value)) {
           return value.some(
             (item) =>
-              typeof item.value === "string" && item.value.trim() === "",
+              (typeof item.value === "string" && item.value.trim() === "" && item.required) || (typeof item.value === "object" && item.value === null && item.required),
           );
         }
 
@@ -600,7 +640,7 @@ function DataUpdate({
 
   return (
     <>
-      <FullScreenLoading visible={submitLoading} />
+      <FullScreenLoading visible={submitLoading || loadingFetchData} />
       <Modal
         opened={opened}
         onClose={close}
@@ -667,14 +707,15 @@ function DataUpdate({
                 <Grid.Col span={6} key={index}>
                   {item.type == "enum" ? (
                     <Select
+                      disabled={status != "ditolak" && status != "antrian"}
                       allowDeselect={false}
-                      label={<FieldLabel label={item.name} hint={item.desc} />}
+                      label={<FieldLabel label={item.name} hint={item.desc} required={item.required} />}
                       data={item.options ?? []}
                       placeholder={item.name}
                       onChange={(e) => {
                         validationForm({
                           kategori: "dataPelengkap",
-                          value: { id: item.id, key: item.key, value: e },
+                          value: { id: item.id, key: item.key, value: e, required: item.required },
                         });
                       }}
                       value={
@@ -686,9 +727,10 @@ function DataUpdate({
                     />
                   ) : item.type == "date" ? (
                     <DateInput
+                      disabled={status != "ditolak" && status != "antrian"}
                       locale="id"
                       valueFormat="DD MMMM YYYY"
-                      label={<FieldLabel label={item.name} hint={item.desc} />}
+                      label={<FieldLabel label={item.name} hint={item.desc} required={item.required} />}
                       placeholder={item.name}
                       onChange={(e) => {
                         const formatted = e
@@ -700,6 +742,7 @@ function DataUpdate({
                             id: item.id,
                             key: item.key,
                             value: formatted,
+                            required: item.required
                           },
                         });
                       }}
@@ -712,13 +755,13 @@ function DataUpdate({
                               (n: any) => n.key === item.key,
                             )?.value,
                           )
-                          :   parseTanggalID(item.value)
+                          : parseTanggalID(item.value)
                       }
                     />
                   ) : (
                     <TextInput
                       error={errors[item.id]}
-                      label={<FieldLabel label={item.name} hint={item.desc} />}
+                      label={<FieldLabel label={item.name} hint={item.desc} required={item.required} />}
                       placeholder={item.name}
                       type={item.type}
                       onChange={(e) =>
@@ -728,6 +771,7 @@ function DataUpdate({
                             id: item.id,
                             key: item.key,
                             value: e.target.value,
+                            required: item.required,
                           },
                         })
                       }
@@ -737,6 +781,10 @@ function DataUpdate({
                         dataPelengkap.find((n: any) => n.key == item.key)?.value
                       }
                       disabled={status != "ditolak" && status != "antrian"}
+                      rightSection={
+                        item.satuan != null &&
+                        <Text mr={"lg"}>{item.satuan}</Text>
+                      }
                     />
                   )}
                 </Grid.Col>
@@ -745,7 +793,7 @@ function DataUpdate({
           </FormSection>
 
           <FormSection
-            title="Syarat Dokumen"
+            title="Syarat Dokumen hjh"
             description="Syarat dokumen yang diperlukan"
             icon={<IconFiles size={16} />}
           >
@@ -753,6 +801,7 @@ function DataUpdate({
               {dataSyaratDokumen.map((item: any, index: number) => (
                 <Grid.Col span={6} key={index}>
                   <FileInputWrapper
+                    required={item.required}
                     label={item.desc}
                     placeholder={"Upload file terbaru untuk mengupdate"}
                     accept="image/*,application/pdf"
@@ -760,7 +809,7 @@ function DataUpdate({
                     onChange={(file) =>
                       validationForm({
                         kategori: "syaratDokumen",
-                        value: { id: item.id, key: item.key, value: file },
+                        value: { id: item.id, key: item.key, value: file, required: item.required },
                       })
                     }
                     name={item.name}

src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx

@@ -1,4 +1,5 @@
 import BreadCrumbs from "@/components/BreadCrumbs";
+import FullScreenLoading from "@/components/FullScreenLoading";
 import ModalFile from "@/components/ModalFile";
 import ModalSurat from "@/components/ModalSurat";
 import notification from "@/components/notificationGlobal";
@@ -122,9 +123,10 @@ function DetailDataPengajuan({
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
   const [viewImg, setViewImg] = useState({ file: "", folder: "" });
   const [uploading, setUploading] = useState({ ok: false, file: "" });
-  const [editValue, setEditValue] = useState({ id: "", jenis: "", val: "", option: null as any, type: "", key: "" })
+  const [editValue, setEditValue] = useState({ id: "", jenis: "", val: "", satuan: null as string | null, option: null as any, type: "", key: "" })
   const [openEdit, setOpenEdit] = useState(false)
   const [loadingUpdate, setLoadingUpdate] = useState(false)
+  const [loadingFS, setLoadingFS] = useState({ value: false, text: "" })
 
   useEffect(() => {
     async function fetchHost() {
@@ -143,6 +145,7 @@ function DetailDataPengajuan({
 
   async function sendWA({ status, linkSurat, linkUpdate }: { status: string, linkSurat: string, linkUpdate: string }) {
     try {
+      setLoadingFS({ value: true, text: "Sending message to warga" })
       const resWA = await apiFetch.api["send-wa"]["pengajuan-surat"].post({
         noPengajuan: data?.noPengajuan ?? "",
         jenisSurat: data?.category ?? "",
@@ -160,6 +163,11 @@ function DetailDataPengajuan({
             message: "Success send message to warga",
             type: "success",
           });
+
+          if (status == "selesai") {
+            onAction()
+          }
+
         } else {
           notification({
             title: "Failed",
@@ -181,10 +189,14 @@ function DetailDataPengajuan({
         type: "error",
       });
     }
+    finally {
+      setLoadingFS({ value: false, text: "" })
+    }
   }
 
   const handleKonfirmasi = async (cat: "terima" | "tolak") => {
     try {
+      setLoadingFS({ value: true, text: "Updating status" })
       const statusFix = cat == "tolak"
         ? "ditolak"
         : data.status == "antrian"
@@ -234,6 +246,8 @@ function DetailDataPengajuan({
         message: "Failed to update pengajuan surat",
         type: "error",
       });
+    } finally {
+      setLoadingFS({ value: false, text: "" })
     }
   };
 
@@ -275,7 +289,6 @@ function DetailDataPengajuan({
   }
 
   useShallowEffect(() => {
-    console.log('jalan', viewImg)
     if (viewImg) {
       setOpenedPreviewFile(true);
     }
@@ -308,6 +321,8 @@ function DetailDataPengajuan({
 
   return (
     <>
+
+      <FullScreenLoading visible={loadingFS.value} text={loadingFS.text} />
       {/* MODAL EDIT DATA PELENGKAP */}
       <Modal
         opened={openEdit}
@@ -353,6 +368,10 @@ function DetailDataPengajuan({
               type={editValue.type}
               onChange={(e) => { setEditValue({ ...editValue, val: e.target.value }) }}
               value={editValue.val}
+              rightSection={
+                editValue.satuan != null &&
+                <Text mr={"lg"}>{editValue.satuan}</Text>
+              }
             />
           )}
           <Group justify="center" grow>
@@ -450,12 +469,14 @@ function DetailDataPengajuan({
           )}
         </Stack>
       </Modal>
+
+      {/* MODAL PREVIEW SURAT */}
       {data?.status == "selesai" && !data?.fileSurat && (
         <ModalSurat
           open={openedPreview}
           onClose={(val) => {
             setOpenedPreview(false)
-            setUploading({ ok: true, file: val })
+            setUploading({ ok: val.success, file: val.data })
           }}
           surat={data?.idSurat}
         />
@@ -558,13 +579,13 @@ function DetailDataPengajuan({
                               direction="row"
                             >
                               <Text>
-                                {_.upperFirst(item.value)}
+                                {_.upperFirst(item.value)} {item.satuan}
                               </Text>
                               <ActionIcon
                                 variant="subtle"
                                 aria-label="Edit"
                                 onClick={() => {
-                                  setEditValue({ id: item.id, val: item.value, type: item.type, option: item.options, jenis: item.jenis, key: item.key })
+                                  setEditValue({ id: item.id, val: item.value, type: item.type, satuan: item.satuan, option: item.options, jenis: item.jenis, key: item.key })
                                   setOpenEdit(true)
                                 }}>
                                 <IconEdit size={16} />
@@ -627,18 +648,31 @@ function DetailDataPengajuan({
                     Setujui
                   </Button>
                 </Group>
-              ) : data?.status === "selesai" ? (
-                <Group justify="center" grow>
-                  <Button
-                    variant="light"
-                    onClick={() => { setViewImg({ file: data?.fileSurat, folder: "surat" }) }}
-                  >
-                    Surat
-                  </Button>
-                </Group>
-              ) : (
-                <></>
-              )}
+              ) : data?.status === "selesai" ?
+                !data?.fileSurat ?
+                  (
+                    <Group justify="center" grow>
+                      <Button
+                        variant="light"
+                        onClick={() => { setOpenedPreview(true) }}
+                      >
+                        Kirim Ulang Surat
+                      </Button>
+                    </Group>
+                  )
+                  :
+                  (
+                    <Group justify="center" grow>
+                      <Button
+                        variant="light"
+                        onClick={() => { setViewImg({ file: data?.fileSurat, folder: "surat" }) }}
+                      >
+                        Surat
+                      </Button>
+                    </Group>
+                  ) : (
+                  <></>
+                )}
             </Grid.Col>
           </Grid>
         </Stack>

src/server/routes/pelayanan_surat_route.ts

@@ -315,6 +315,7 @@ const PelayananRoute = new Elysia({
          }[]; name: string;
          desc: string;
          key: string;
+         satuan?: string;
       }[];
 
       const refMap = new Map(
@@ -336,6 +337,7 @@ const PelayananRoute = new Elysia({
                type: ref?.type ?? "",
                options: ref?.options ?? [],
                order: ref?.order ?? Infinity,
+               satuan: ref?.satuan ?? null
             };
          })
          .sort((a, b) => a.order - b.order)
@@ -685,17 +687,20 @@ const PelayananRoute = new Elysia({
          name: string;
          desc: string;
          key: string;
+         required: boolean;
       }[];
 
       const dataSyaratFix = dataSyarat.map((item) => {
          const desc = syaratDokumen.find((v) => v.key == item.jenis)?.desc
          const name = syaratDokumen.find((v) => v.key == item.jenis)?.name
+         const required = syaratDokumen.find((v) => v.key == item.jenis)?.required
          return {
             id: item.id,
             key: item.jenis,
             value: item.value,
             name: name ?? '',
-            desc: desc ?? ''
+            desc: desc ?? '',
+            required: required ?? true
          }
       })
 
@@ -708,6 +713,8 @@ const PelayananRoute = new Elysia({
          name: string;
          desc: string;
          key: string;
+         required: boolean;
+         satuan?: string;
       }[];
 
       const refMap = new Map(
@@ -730,6 +737,8 @@ const PelayananRoute = new Elysia({
                type: ref?.type ?? "",
                options: ref?.options ?? [],
                order: ref?.order ?? Infinity,
+               required: ref?.required ?? true,
+               satuan: ref?.satuan ?? null
             };
          })
          .sort((a, b) => a.order - b.order)