upd: update data pelayanan surat

Deskripsi
- form pencarian
- detail data pengajuan
- api
- belom selesai submit

NO Issues

prisma/schema.prisma

@@ -110,7 +110,8 @@ model CategoryPelayanan {
   id                     String                   @id @default(cuid())
   name                   String
   syaratDokumen          Json[]
-  dataText               String[]
+  dataText               String[]                 @default([])
+  dataPelengkap          Json[]                   @default([])
   isActive               Boolean                  @default(true)
   createdAt              DateTime                 @default(now())
   updatedAt              DateTime                 @updatedAt

src/AppRoutes.tsx

@@ -10,6 +10,7 @@ import FormKartuKeluarga from "./pages/darmasaba/form_kartu_keluarga";
 import FormLaporanSampah from "./pages/darmasaba/form_laporan_sampah";
 import FormSuratKeteranganPenghasilan from "./pages/darmasaba/form_surat_keterangan_penghasilan";
 import FormSuratKeteranganDomisiliOrganisasi from "./pages/darmasaba/form_surat_keterangan_domisili_organisasi";
+import UpdateDataSurat from "./pages/darmasaba/update_data_surat";
 import FormSuratKeteranganBelumKawin from "./pages/darmasaba/form_surat_keterangan_belum_kawin";
 import FormKeteranganKelahiran from "./pages/darmasaba/form_keterangan_kelahiran";
 import FormSuratKeteranganTempatUsaha from "./pages/darmasaba/form_surat_keterangan_tempat_usaha";
@@ -69,6 +70,10 @@ export default function AppRoutes() {
             path="/darmasaba/surat-keterangan-domisili-organisasi"
             element={<FormSuratKeteranganDomisiliOrganisasi />}
           />
+          <Route
+            path="/darmasaba/update-data-surat"
+            element={<UpdateDataSurat />}
+          />
           <Route
             path="/darmasaba/surat-keterangan-belum-kawin"
             element={<FormSuratKeteranganBelumKawin />}

src/clientRoutes.ts

@@ -10,6 +10,7 @@ const clientRoutes = {
   "/darmasaba/laporan-sampah": "/darmasaba/laporan-sampah",
   "/darmasaba/surat-keterangan-penghasilan": "/darmasaba/surat-keterangan-penghasilan",
   "/darmasaba/surat-keterangan-domisili-organisasi": "/darmasaba/surat-keterangan-domisili-organisasi",
+  "/darmasaba/update-data-surat": "/darmasaba/update-data-surat",
   "/darmasaba/surat-keterangan-belum-kawin": "/darmasaba/surat-keterangan-belum-kawin",
   "/darmasaba/keterangan-kelahiran": "/darmasaba/keterangan-kelahiran",
   "/darmasaba/surat-keterangan-tempat-usaha": "/darmasaba/surat-keterangan-tempat-usaha",

src/components/FullScreenLoading.tsx

@@ -0,0 +1,38 @@
+import { Center, Loader, Overlay, Stack, Text } from "@mantine/core";
+
+type FullScreenLoadingProps = {
+  visible: boolean;
+  text?: string;
+};
+
+export default function FullScreenLoading({
+  visible,
+  text = "Memproses data...",
+}: FullScreenLoadingProps) {
+  if (!visible) return null;
+
+  return (
+    <Overlay fixed blur={6} backgroundOpacity={0.3} zIndex={10000}>
+      <Center h="100%">
+        <Stack align="center" justify="center">
+          <Loader size="lg" />
+          <Text size="sm" c="dimmed">
+            {text}
+          </Text>
+        </Stack>
+      </Center>
+    </Overlay>
+  );
+}
+
+const overlayStyle: React.CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  backdropFilter: "blur(6px)",
+  backgroundColor: "rgba(255, 255, 255, 0.6)",
+};
+
+const contentStyle: React.CSSProperties = {
+  flexDirection: "column",
+};

src/components/SuccessPengajuanSurat.tsx

@@ -0,0 +1,43 @@
+import { Badge, Button, Card, Center, Stack, Text, Title } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+
+type SuccessPengajuanProps = {
+  noPengajuan: string;
+  onClose?: () => void;
+};
+
+export default function SuccessPengajuan({
+  noPengajuan,
+  onClose,
+}: SuccessPengajuanProps) {
+  return (
+    <Center h="100vh">
+      <Card shadow="md" radius="md" p="xl" withBorder maw={520} w="100%">
+        <Stack align="center" gap="md">
+          <IconCheck size={56} color="green" />
+
+          <Title order={3} ta="center">
+            Pengajuan Berhasil Dibuat
+          </Title>
+
+          <Text ta="center" size="sm" c="dimmed">
+            Pengajuan layanan surat sudah dibuat dengan nomor:
+          </Text>
+
+          <Badge size="xl" variant="light" color="green">
+            {noPengajuan}
+          </Badge>
+
+          <Text ta="center" size="sm">
+            Nomor ini akan digunakan untuk mengakses dan memantau status
+            pengajuan surat Anda.
+          </Text>
+
+          <Button fullWidth mt="md" onClick={onClose}>
+            Selesai
+          </Button>
+        </Stack>
+      </Card>
+    </Center>
+  );
+}

src/lib/categoryPelayananSurat.ts

@@ -3,107 +3,369 @@ export const categoryPelayananSurat = [
     id: "skbedabiodata",
     name: "Surat Keterangan Beda Biodata Diri",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "dokumen yang beda", desc: "Fotokopi dokumen bersangkutan yang terdapat perbedaan biodata diri, misalnya: Sertifikat Tanah, Ijazah, Polis Asuransi, dan lainnya." }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas di Wilayah Masing-masing"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      },
+      {
+        key: "dokumen_beda",
+        name: "Dokumen Pendukung",
+        desc: "Fotokopi dokumen yang terdapat perbedaan biodata (ijazah, sertifikat, dll)"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "pekerjaan", "dokumen", "tertulis pada dokumen a", "tertulis pada dokumen b"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir pemohon" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat lengkap tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" },
+      { key: "dokumen", name: "Nama Dokumen", desc: "Jenis dokumen yang mengalami perbedaan biodata" },
+      { key: "dokumen_a", name: "Data pada Dokumen A", desc: "Data biodata yang tertulis pada dokumen pertama" },
+      { key: "dokumen_b", name: "Data pada Dokumen B", desc: "Data biodata yang tertulis pada dokumen kedua" }
+    ]
   },
   {
     id: "skbelumkawin",
     name: "Surat Keterangan Belum Kawin",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "akta cerai", desc: "Fotokopi Akta Cerai bagi yang berstatus janda/duda" }
+      {
+        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)"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "agama", "pekerjaan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "agama", name: "Agama", desc: "Agama pemohon" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" }
+    ]
   },
   {
     id: "skdomisiliorganisasi",
     name: "Surat Keterangan Domisili Organisasi",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "skt organisasi", desc: "Fotokopi Surat Keterangan Terdaftar (SKT) Organisasi atau Pengukuhan Kelompok" },
-      { name: "susunan pengurus", desc: "Jika Pengajuan baru pembuatan SKT maka melengkapi Susunan Pengurus lengkap denganKop Organisasi" }
+      {
+        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"
+      }
     ],
-    dataText: ["nama organisasi", "jenis organisasi", "alamat organisasi/sekretariat", "no telepon", "nama pimpinan", "keperluan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama_organisasi", name: "Nama Organisasi", desc: "Nama resmi organisasi" },
+      { key: "jenis_organisasi", name: "Jenis Organisasi", desc: "Jenis atau bentuk organisasi" },
+      { key: "alamat_organisasi", name: "Alamat Organisasi", desc: "Alamat sekretariat organisasi" },
+      { key: "no_telepon", name: "Nomor Telepon", desc: "Nomor telepon organisasi" },
+      { key: "nama_pimpinan", name: "Nama Pimpinan", desc: "Nama pimpinan organisasi" },
+      { key: "keperluan", name: "Keperluan", desc: "Keperluan pembuatan surat" }
+    ]
   },
   {
     id: "skkelahiran",
     name: "Surat Keterangan Kelahiran",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "surat lahir", desc: "Fotokopi Surat Keterangan Lahir dari Bidan/Dokter (jika ada)" }
+      {
+        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)"
+      }
     ],
-    dataText: ["nama ayah", "nama ibu", "nama anak", "tanggal lahir anak", "pukul lahir anak", "tempat lahir anak", "jenis kelamin anak", "anak ke", "nik ibu", "tempat tanggal lahir ibu", "pekerjaan ibu", "alamat ibu", "nik ayah", "tempat tanggal lahir ayah", "pekerjaan ayah", "alamat ayah", "nama pelapor", "hubungan pelapor", "alamat pelapor"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama lengkap ayah" },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama lengkap ibu" },
+      { key: "nama_anak", name: "Nama Anak", desc: "Nama bayi/anak" },
+      { key: "tanggal_lahir_anak", name: "Tanggal Lahir Anak", desc: "Tanggal lahir anak" },
+      { key: "pukul_lahir", name: "Pukul Lahir", desc: "Waktu kelahiran anak" },
+      { key: "tempat_lahir", name: "Tempat Lahir", desc: "Tempat kelahiran anak" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin Anak", desc: "Jenis kelamin anak" },
+      { key: "anak_ke", name: "Anak Ke-", desc: "Urutan kelahiran anak" },
+      { key: "nik_ibu", name: "NIK Ibu", desc: "NIK ibu kandung" },
+      { key: "nik_ayah", name: "NIK Ayah", desc: "NIK ayah kandung" },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama pihak yang melaporkan" },
+      { key: "hubungan_pelapor", name: "Hubungan Pelapor", desc: "Hubungan pelapor dengan anak" },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat pelapor" }
+    ]
   },
   {
     id: "skkelakuanbaik",
     name: "Surat Keterangan Kelakuan Baik (Pengantar SKCK)",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" }
+      {
+        key: "pengantar_kelian",
+        name: "Pengantar Kelian",
+        desc: "Surat Pengantar Kelian Banjar Dinas"
+      },
+      {
+        key: "ktp_kk",
+        name: "KTP / KK",
+        desc: "Fotokopi KTP atau Kartu Keluarga"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "agama", "alamat", "pekerjaan", "polsek"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama sesuai KTP" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "agama", name: "Agama", desc: "Agama pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon" },
+      { key: "polsek", name: "Polsek Tujuan", desc: "Polsek tujuan pembuatan SKCK" }
+    ]
   },
   {
     id: "skkematian",
     name: "Surat Keterangan Kematian",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "surat kematian", desc: "Surat Keterangan Kematian dari Rumah Sakit/Dokter (jika ada)" }
+      {
+        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)"
+      }
     ],
-    dataText: ["nik pelapor", "nama pelapor", "pekerjaan pelapor", "alamat pelapor", "hubungan pelapor dengan almarhum", "nama almarhum", "nik almarhum", "tempat tanggal lahir almarhum", "alamat almarhum", "agama almarhum", "tanggal kematian", "waktu kematian", "tempat kematian", "penyebab kematian"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik_pelapor", name: "NIK Pelapor", desc: "Nomor Induk Kependudukan pelapor" },
+      { key: "nama_pelapor", name: "Nama Pelapor", desc: "Nama lengkap pelapor" },
+      { key: "pekerjaan_pelapor", name: "Pekerjaan Pelapor", desc: "Pekerjaan pelapor" },
+      { key: "alamat_pelapor", name: "Alamat Pelapor", desc: "Alamat tempat tinggal pelapor" },
+      { key: "hubungan_pelapor", name: "Hubungan dengan Almarhum", desc: "Hubungan pelapor dengan almarhum" },
+      { key: "nama_almarhum", name: "Nama Almarhum", desc: "Nama lengkap almarhum" },
+      { key: "nik_almarhum", name: "NIK Almarhum", desc: "Nomor Induk Kependudukan almarhum" },
+      { key: "ttl_almarhum", name: "Tempat & Tanggal Lahir Almarhum", desc: "Tempat dan tanggal lahir almarhum" },
+      { key: "alamat_almarhum", name: "Alamat Almarhum", desc: "Alamat terakhir almarhum" },
+      { key: "agama_almarhum", name: "Agama Almarhum", desc: "Agama almarhum" },
+      { key: "tanggal_kematian", name: "Tanggal Kematian", desc: "Tanggal meninggal dunia" },
+      { key: "waktu_kematian", name: "Waktu Kematian", desc: "Waktu meninggal dunia" },
+      { key: "tempat_kematian", name: "Tempat Kematian", desc: "Tempat meninggal dunia" },
+      { key: "penyebab_kematian", name: "Penyebab Kematian", desc: "Penyebab meninggal dunia" }
+    ]
   },
   {
     id: "skpenghasilan",
     name: "Surat Keterangan Penghasilan",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp ortu/kk", desc: "Fotokopi KTP orang tua atau Kartu Keluarga" },
-      { name: "surat pernyataan", desc: "Surat Pernyataan Penghasilan bermaterai" }
+      {
+        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"
+      }
     ],
-    dataText: ["nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "pekerjaan", "penghasilan", "alasan permohonan"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemohon" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemohon" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemohon/orang tua" },
+      { key: "penghasilan", name: "Penghasilan", desc: "Jumlah penghasilan per bulan" },
+      { key: "alasan", name: "Alasan Permohonan", desc: "Alasan pengajuan surat penghasilan" }
+    ]
   },
   {
     id: "sktempatusaha",
     name: "Surat Keterangan Tempat Usaha",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "foto lokasi", desc: "Foto lokasi usaha dicetak dalam selembar kertas, diparaf dan distempel oleh Kelian" },
-      { name: "sppt/sertifikat/sewa", desc: "Fotokopi SPPT, Sertifikat Hak Milik, Surat Perjanjian Sewa, atau Kwitansi Pembayaran Sewa 3 bulan terakhir" }
+      {
+        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"
+      }
     ],
-    dataText: ["nik", "nama pemilik", "tempat tanggal lahir", "alamat pemilik", "nama usaha", "bidang usaha", "alamat usaha", "status tempat usaha", "luas tempat usaha", "jumlah karyawan", "tujuan pembuatan surat"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama_pemilik", name: "Nama Pemilik", desc: "Nama pemilik usaha" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "alamat_pemilik", name: "Alamat Pemilik", desc: "Alamat pemilik usaha" },
+      { key: "nama_usaha", name: "Nama Usaha", desc: "Nama usaha" },
+      { key: "bidang_usaha", name: "Bidang Usaha", desc: "Bidang atau jenis usaha" },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha" },
+      { key: "status_tempat", name: "Status Tempat Usaha", desc: "Status kepemilikan tempat usaha" },
+      { key: "luas_usaha", name: "Luas Tempat Usaha", desc: "Luas tempat usaha (m²)" },
+      { key: "jumlah_karyawan", name: "Jumlah Karyawan", desc: "Jumlah tenaga kerja" },
+      { key: "tujuan", name: "Tujuan Pembuatan Surat", desc: "Tujuan pembuatan surat keterangan" }
+    ]
   },
   {
     id: "sktidakmampu",
     name: "Surat Keterangan Tidak Mampu",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kia/kk", desc: "Fotokopi KTP, KIA, atau Kartu Keluarga" }
+      {
+        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"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "alamat", "alasan permohonan"]
+    dataText: [],
+    dataPelengkap: [
+      {
+        key: "nik",
+        name: "NIK",
+        desc: "Nomor Induk Kependudukan pemohon"
+      },
+      {
+        key: "nama",
+        name: "Nama Lengkap",
+        desc: "Nama lengkap pemohon"
+      },
+      {
+        key: "ttl",
+        name: "Tempat & Tanggal Lahir",
+        desc: "Tempat dan tanggal lahir pemohon"
+      },
+      {
+        key: "alamat",
+        name: "Alamat",
+        desc: "Alamat tempat tinggal pemohon"
+      },
+      {
+        key: "alasan",
+        name: "Alasan Permohonan",
+        desc: "Alasan pengajuan Surat Keterangan Tidak Mampu"
+      }
+    ]
   },
   {
     id: "skusaha",
     name: "Surat Keterangan Usaha",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kk", desc: "Fotokopi KTP atau Kartu Keluarga" },
-      { name: "foto lokasi", desc: "Foto lokasi usaha dicetak dalam selembar kertas, diparaf dan distempel oleh Kelian" }
+      {
+        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"
+      }
     ],
-    dataText: ["nama", "jenis kelamin", "tempat tanggal lahir", "negara", "agama", "status perkawinan", "alamat", "pekerjaan", "jenis usaha", "alamat usaha"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nama", name: "Nama Lengkap", desc: "Nama pemilik usaha" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin pemilik usaha" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir" },
+      { key: "negara", name: "Kewarganegaraan", desc: "Kewarganegaraan pemilik usaha" },
+      { key: "agama", name: "Agama", desc: "Agama pemilik usaha" },
+      { key: "status_perkawinan", name: "Status Perkawinan", desc: "Status perkawinan" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan pemilik usaha" },
+      { key: "jenis_usaha", name: "Jenis Usaha", desc: "Jenis usaha yang dijalankan" },
+      { key: "alamat_usaha", name: "Alamat Usaha", desc: "Alamat lokasi usaha" }
+    ]
   },
   {
     id: "skyatimpiatu",
     name: "Surat Keterangan Yatim / Piatu / Yatim Piatu",
     syaratDokumen: [
-      { name: "pengantar kelian", desc: "Surat Pengantar Kelian Banjar Dinas" },
-      { name: "ktp/kia/kk", desc: "Fotokopi KTP, KIA, atau Kartu Keluarga" }
+      {
+        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"
+      }
     ],
-    dataText: ["nik", "nama", "tempat tanggal lahir", "jenis kelamin", "alamat", "pekerjaan", "nama ayah", "status ayah", "nama ibu", "status ibu"]
+    dataText: [],
+    dataPelengkap: [
+      { key: "nik", name: "NIK", desc: "Nomor Induk Kependudukan" },
+      { key: "nama", name: "Nama Lengkap", desc: "Nama anak" },
+      { key: "ttl", name: "Tempat & Tanggal Lahir", desc: "Tempat dan tanggal lahir anak" },
+      { key: "jenis_kelamin", name: "Jenis Kelamin", desc: "Jenis kelamin anak" },
+      { key: "alamat", name: "Alamat", desc: "Alamat tempat tinggal" },
+      { key: "pekerjaan", name: "Pekerjaan", desc: "Pekerjaan (jika ada)" },
+      { key: "nama_ayah", name: "Nama Ayah", desc: "Nama ayah kandung" },
+      { key: "status_ayah", name: "Status Ayah", desc: "Status ayah (hidup / meninggal)" },
+      { key: "nama_ibu", name: "Nama Ibu", desc: "Nama ibu kandung" },
+      { key: "status_ibu", name: "Status Ibu", desc: "Status ibu (hidup / meninggal)" }
+    ]
   }
 ];

src/pages/darmasaba/surat.tsx

@@ -1,331 +1,513 @@
+import FullScreenLoading from "@/components/FullScreenLoading";
+import notification from "@/components/notificationGlobal";
+import SuccessPengajuan from "@/components/SuccessPengajuanSurat";
 import apiFetch from "@/lib/apiFetch";
+import { fromSlug, toSlug } from "@/server/lib/slug_converter";
 import {
-   ActionIcon,
-   Badge,
-   Box,
-   Button,
-   Card,
-   Container,
-   Divider,
-   Grid,
-   Group,
-   Select,
-   Stack,
-   Text,
-   TextInput,
-   Textarea,
-   Tooltip
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Container,
+  Divider,
+  FileInput,
+  Flex,
+  Grid,
+  Group,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Tooltip,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
-   IconBuildingCommunity,
-   IconInfoCircle,
-   IconMapPin,
-   IconUser
+  IconBuildingCommunity,
+  IconInfoCircle,
+  IconUpload,
+  IconUser,
 } from "@tabler/icons-react";
-import React from "react";
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
-// =========================
-// Reusable UI components
-// =========================
+type DataItem = {
+  key: string;
+  value: string;
+};
+
+type FormSurat = {
+  kategoriId: string;
+  nama: string;
+  phone: string;
+  dataPelengkap: DataItem[];
+  syaratDokumen: DataItem[];
+};
+
+export default function FormSurat() {
+  const [noPengajuan, setNoPengajuan] = useState("");
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const jenisSurat = query.get("jenis");
+  const { data, mutate, isLoading } = useSWR("category-pelayanan-list", () =>
+    apiFetch.api.pelayanan.category.get(),
+  );
+  const [jenisSuratFix, setJenisSuratFix] = useState({ name: "", id: "" });
+  const [dataSurat, setDataSurat] = useState<any>({});
+  const [formSurat, setFormSurat] = useState<FormSurat>({
+    nama: "",
+    phone: "",
+    kategoriId: "",
+    dataPelengkap: [],
+    syaratDokumen: [],
+  });
+
+  const listCategory = data?.data || [];
+
+  function onResetAll() {
+    setNoPengajuan("");
+    setSubmitLoading(false);
+    setFormSurat({
+      nama: "",
+      phone: "",
+      kategoriId: "",
+      dataPelengkap: [],
+      syaratDokumen: [],
+    });
+  }
+
+  function onGetJenisSurat() {
+    try {
+      if (!jenisSurat || jenisSurat == "null") {
+        setJenisSuratFix({ name: "", id: "" });
+      } else {
+        const namaJenis = fromSlug(jenisSurat);
+        const data = listCategory.find((item: any) => item.name == namaJenis);
+        if (!data) return;
+        setJenisSuratFix(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function getDetailJenisSurat() {
+    try {
+      const get: any = await apiFetch.api.pelayanan.category.detail.get({
+        query: {
+          id: jenisSuratFix.id,
+        },
+      });
+
+      setDataSurat(get.data);
+      setFormSurat({
+        kategoriId: jenisSuratFix.id,
+        nama: "",
+        phone: "",
+        dataPelengkap: (get.data?.dataPelengkap || []).map(
+          (item: { key: string }) => ({
+            key: item.key,
+            value: "",
+          }),
+        ),
+        syaratDokumen: (get.data?.syaratDokumen || []).map(
+          (item: { key: string }) => ({
+            key: item.key,
+            value: "",
+          }),
+        ),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  useShallowEffect(() => {
+    mutate();
+  }, []);
+
+  useShallowEffect(() => {
+    if (listCategory.length > 0) {
+      onGetJenisSurat();
+    }
+  }, [jenisSurat, listCategory]);
+
+  useShallowEffect(() => {
+    if (jenisSuratFix.id != "") {
+      getDetailJenisSurat();
+    }
+  }, [jenisSuratFix.id]);
+
+  async function onSubmit() {
+    const isFormKosong = Object.values(formSurat).some((value) => {
+      if (Array.isArray(value)) {
+        return (
+          value.length === 0 ||
+          value.some(
+            (item) =>
+              typeof item.value === "string" && item.value.trim() === "",
+          )
+        );
+      }
+
+      if (typeof value === "string") {
+        return value.trim() === "";
+      }
+
+      return false;
+    });
+
+    if (isFormKosong) {
+      return notification({
+        title: "Gagal",
+        message: "Silahkan lengkapi form surat",
+        type: "error",
+      });
+    }
+
+    try {
+      setSubmitLoading(true);
+      // 🔥 CLONE state SEKALI
+      let finalFormSurat = structuredClone(formSurat);
+
+      // 2️⃣ Upload satu per satu
+      for (const itemUpload of finalFormSurat.syaratDokumen) {
+        const updImg = await apiFetch.api.pengaduan.upload.post({
+          file: itemUpload.value,
+          folder: "syarat-dokumen",
+        });
+
+        if (updImg.status === 200) {
+          // 🔥 UPDATE OBJECT LOKAL (BUKAN STATE)
+          finalFormSurat.syaratDokumen = updateArrayByKey(
+            finalFormSurat.syaratDokumen,
+            itemUpload.key,
+            updImg.data?.filename || "",
+          );
+        }
+      }
+
+      // 3️⃣ SET STATE SEKALI (optional, untuk UI)
+      setFormSurat(finalFormSurat);
+
+      // 4️⃣ SUBMIT KE API
+      const res = await apiFetch.api.pelayanan.create.post(finalFormSurat);
+
+      if (res.status === 200) {
+        notification({
+          title: "Berhasil",
+          message: res.data?.message || "Pengajuan surat berhasil dibuat",
+          type: "success",
+        });
+      } else {
+        notification({
+          title: "Gagal",
+          message:
+            "Pengajuan surat gagal dibuat, silahkan coba beberapa saat lagi",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      notification({
+        title: "Gagal",
+        message: "Server Error",
+        type: "error",
+      });
+    } finally {
+      setSubmitLoading(false);
+    }
+  }
+
+  function updateArrayByKey(
+    list: DataItem[],
+    targetKey: string,
+    value: string,
+  ): DataItem[] {
+    return list.map((item) =>
+      item.key === targetKey ? { ...item, value } : item,
+    );
+  }
+
+  function validationForm({
+    key,
+    value,
+  }: {
+    key: "nama" | "phone" | "dataPelengkap" | "syaratDokumen";
+    value: any;
+  }) {
+    if (key == "dataPelengkap" || key == "syaratDokumen") {
+      setFormSurat((prev) => ({
+        ...prev,
+        [key]: updateArrayByKey(prev[key], value.key, value.value),
+      }));
+    } else {
+      setFormSurat({
+        ...formSurat,
+        [key]: value,
+      });
+    }
+  }
+
+  return (
+    <Container size="md" w={"100%"}>
+      <FullScreenLoading visible={submitLoading} />
+      {noPengajuan != "" && (
+        <SuccessPengajuan
+          noPengajuan={noPengajuan}
+          onClose={() => {
+            onResetAll();
+            navigate("/darmasaba/surat");
+          }}
+        />
+      )}
+      <Box>
+        <Stack gap="lg">
+          <Group justify="space-between" align="center">
+            <Group align="center">
+              <IconBuildingCommunity size={28} />
+              <div>
+                <Text fw={800} size="xl">
+                  Layanan Pengajuan Surat Administrasi
+                </Text>
+                <Text size="sm" c="dimmed">
+                  Formulir resmi untuk mengajukan berbagai jenis surat
+                  administrasi desa/kelurahan secara online.
+                </Text>
+              </div>
+            </Group>
+            <Group>
+              <Badge radius="sm">Form Length: 3 Sections</Badge>
+            </Group>
+          </Group>
+          <Stack gap="lg">
+            {/* Header Section */}
+            <FormSection
+              title="Pemohon"
+              icon={<IconUser size={16} />}
+              description="Informasi identitas pemohon"
+            >
+              <Grid>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label={<FieldLabel label="Nama" hint="Nama pemohon" />}
+                    placeholder="Budi Setiawan"
+                    value={formSurat.nama}
+                    onChange={(e) =>
+                      validationForm({ key: "nama", value: 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"
+                    value={formSurat.phone}
+                    onChange={(e) =>
+                      validationForm({ key: "phone", value: e.target.value })
+                    }
+                  />
+                </Grid.Col>
+
+                <Grid.Col span={12}>
+                  <Select
+                    label={
+                      <FieldLabel
+                        label="Jenis Surat"
+                        hint="Jenis surat yang ingin diajukan"
+                      />
+                    }
+                    placeholder="Pilih jenis surat"
+                    data={listCategory.map((item: any) => ({
+                      value: item.name,
+                      label: item.name,
+                    }))}
+                    value={jenisSuratFix.name}
+                    onChange={(value) => {
+                      const slug = toSlug(String(value));
+                      navigate("/darmasaba/surat?jenis=" + slug);
+                    }}
+                  />
+                </Grid.Col>
+              </Grid>
+            </FormSection>
+
+            {jenisSuratFix.id != "" && dataSurat && dataSurat.dataPelengkap && (
+              <>
+                <FormSection
+                  title="Data Pelengkap"
+                  description="Data pelengkap yang diperlukan"
+                >
+                  <Grid>
+                    {dataSurat.dataPelengkap.map((item: any, index: number) => (
+                      <Grid.Col span={6} key={index}>
+                        <TextInput
+                          label={
+                            <FieldLabel label={item.name} hint={item.desc} />
+                          }
+                          placeholder={item.name}
+                          onChange={(e) =>
+                            validationForm({
+                              key: "dataPelengkap",
+                              value: { key: item.key, value: e.target.value },
+                            })
+                          }
+                          value={
+                            formSurat.dataPelengkap.find(
+                              (n: any) => n.key == item.key,
+                            )?.value
+                          }
+                        />
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </FormSection>
+
+                <FormSection
+                  title="Syarat Dokumen"
+                  description="Syarat dokumen yang diperlukan"
+                >
+                  <Grid>
+                    {dataSurat.syaratDokumen.map((item: any, index: number) => (
+                      <Grid.Col span={6} key={index}>
+                        <FileInputWrapper
+                          label={item.desc}
+                          placeholder={"Upload file "}
+                          accept="image/*,application/pdf"
+                          onChange={(file) =>
+                            validationForm({
+                              key: "syaratDokumen",
+                              value: { key: item.key, value: file },
+                            })
+                          }
+                          name={item.name}
+                        />
+                      </Grid.Col>
+                    ))}
+                  </Grid>
+                </FormSection>
+
+                {/* Actions */}
+                <Group justify="right" mt="md">
+                  <Button variant="default" onClick={() => {}}>
+                    Reset
+                  </Button>
+                  <Button onClick={onSubmit}>Kirim</Button>
+                </Group>
+              </>
+            )}
+          </Stack>
+        </Stack>
+      </Box>
+    </Container>
+  );
+}
 
 function FieldLabel({ label, hint }: { label: string; hint?: string }) {
-   return (
-      <Group justify="apart" gap="xs" align="center">
-         <Text fw={600}>{label}</Text>
-         {hint && (
-            <Tooltip label={hint} withArrow>
-               <ActionIcon size={24} variant="subtle">
-                  <IconInfoCircle size={16} />
-               </ActionIcon>
-            </Tooltip>
-         )}
-      </Group>
-   );
+  return (
+    <Group justify="apart" gap="xs" align="center">
+      <Text fw={600}>{label}</Text>
+      {hint && (
+        <Tooltip label={hint} withArrow>
+          <ActionIcon size={24} variant="subtle">
+            <IconInfoCircle size={16} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </Group>
+  );
 }
 
 function FormSection({
-   title,
-   icon,
-   children,
-   description,
+  title,
+  icon,
+  children,
+  description,
 }: {
-   title: string;
-   icon?: React.ReactNode;
-   children: React.ReactNode;
-   description?: string;
+  title: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  description?: string;
 }) {
-   return (
-      <Card radius="md" shadow="sm" withBorder>
-         <Group justify="apart" align="center" mb="xs">
-            <Group align="center" gap="xs">
-               {icon}
-               <Text fw={700}>{title}</Text>
-            </Group>
-            {description && <Badge variant="light">{description}</Badge>}
-         </Group>
+  return (
+    <Card radius="md" shadow="sm" withBorder>
+      <Group justify="apart" align="center" mb="xs">
+        <Group align="center" gap="xs">
+          {icon}
+          <Text fw={700}>{title}</Text>
+        </Group>
+        {description && <Badge variant="light">{description}</Badge>}
+      </Group>
 
-         <Divider mb="sm" />
-         <Stack gap="sm">{children}</Stack>
-      </Card>
-   );
+      <Divider mb="sm" />
+      <Stack gap="sm">{children}</Stack>
+    </Card>
+  );
 }
 
-// =========================
-// Main form component
-// =========================
+function FileInputWrapper({
+  label,
+  placeholder,
+  accept,
+  onChange,
+  preview,
+  name,
+  description,
+}: {
+  label: string;
+  placeholder?: string;
+  accept?: string;
+  onChange: (file: File | null) => void;
+  preview?: string | null;
+  name: string;
+  description?: string;
+}) {
+  return (
+    <Stack gap="xs">
+      <Flex direction={"column"}>
+        <Group justify="apart" align="center">
+          <Text fw={500}>{label}</Text>
+        </Group>
+        {description && (
+          <Text size="sm" c="dimmed" mt={4} style={{ lineHeight: 1.2 }}>
+            {description}
+          </Text>
+        )}
+      </Flex>
 
-export default function FormSurat() {
-   const { data, mutate, isLoading } = useSWR("category-pelayanan-list", () =>
-      apiFetch.api.pelayanan.category.get(),
-   );
+      <FileInput
+        accept={accept}
+        placeholder={placeholder}
+        onChange={(f) => onChange(f)}
+        leftSection={<IconUpload />}
+        aria-label={label}
+        name={name}
+      />
 
-   const listCategory = data?.data || [];
-
-
-   useShallowEffect(() => {
-      mutate();
-   }, []);
-
-   return (
-      <Container size="md" w={"100%"}>
-         <Box>
-            <Stack gap="lg">
-               <Group justify="apart" align="center">
-                  <Group align="center">
-                     <IconBuildingCommunity size={28} />
-                     <div>
-                        <Text fw={800} size="xl">
-                           Surat Keterangan Tidak Mampu (SKTM)
-                        </Text>
-                        <Text size="sm" c="dimmed">
-                           Blangko resmi untuk pengajuan Surat Keterangan Tidak Mampu —
-                           digunakan untuk keperluan pendidikan, kesehatan, atau
-                           administrasi.
-                        </Text>
-                     </div>
-                  </Group>
-                  <Group>
-                     <Badge radius="sm">Form Length: 3 Sections</Badge>
-                  </Group>
-               </Group>
-
-               <form>
-                  <Stack gap="lg">
-                     {/* Header Section */}
-                     <FormSection
-                        title="Pemohon"
-                        icon={<IconUser size={16} />}
-                        description="Informasi identitas pemohon"
-                     >
-                        <Grid>
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={
-                                    <FieldLabel
-                                       label="Nama Lengkap"
-                                       hint="Nama lengkap pemohon"
-                                    />
-                                 }
-                                 placeholder="Budi Setiawan"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={
-                                    <FieldLabel
-                                       label="Nomor Telephone"
-                                       hint="Nomor telephone yang dapat dihubungi / terhubung dengan whatsapp"
-                                    />
-                                 }
-                                 placeholder="08123456789"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={12}>
-                              <Select
-                                 label={<FieldLabel label="Jenis Surat" hint="Jenis surat yang ingin diajukan" />}
-                                 placeholder="Pilih jenis surat"
-                                 data={listCategory.map((item: any) => ({
-                                    value: item.id,
-                                    label: item.name,
-                                 }))}
-                              />
-                           </Grid.Col>
-                        </Grid>
-                     </FormSection>
-
-                     <FormSection
-                        title="Syarat Dokumen"
-                        description="Syarat dokumen yang diperlukan"
-                     >
-                        <Grid>
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={
-                                    <FieldLabel
-                                       label="Nama Lengkap"
-                                       hint="Sesuai KTP"
-                                    />
-                                 }
-                                 placeholder="Nama lengkap"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={
-                                    <FieldLabel
-                                       label="NIK"
-                                       hint="16 digit, tanpa spasi"
-                                    />
-                                 }
-                                 placeholder="3201xxxxxxxxxxxx"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={
-                                    <FieldLabel
-                                       label="Tempat, Tanggal Lahir"
-                                       hint="Contoh: Denpasar, 31-12-1990"
-                                    />
-                                 }
-                                 placeholder="Tempat, tanggal lahir"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <Select
-                                 label={<FieldLabel label="Jenis Kelamin" />}
-                                 placeholder="Pilih jenis kelamin"
-                                 data={["Laki-laki", "Perempuan"]}
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <Select
-                                 label={<FieldLabel label="Agama" />}
-                                 placeholder="Pilih agama"
-                                 data={[
-                                    "Islam",
-                                    "Kristen",
-                                    "Katolik",
-                                    "Hindu",
-                                    "Buddha",
-                                    "Konghucu",
-                                    "Lainnya",
-                                 ]}
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <Select
-                                 label={<FieldLabel label="Status Perkawinan" />}
-                                 placeholder="Pilih status"
-                                 data={[
-                                    "Belum Kawin",
-                                    "Kawin",
-                                    "Cerai Hidup",
-                                    "Cerai Mati",
-                                 ]}
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={6}>
-                              <TextInput
-                                 label={<FieldLabel label="Pekerjaan" />}
-                                 placeholder="Pekerjaan"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={12}>
-                              <Textarea
-                                 label={<FieldLabel label="Alamat Lengkap" />}
-                                 placeholder="Alamat domisili"
-                                 minRows={2}
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={2}>
-                              <TextInput
-                                 label={<FieldLabel label="RT" />}
-                                 placeholder="001"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={2}>
-                              <TextInput
-                                 label={<FieldLabel label="RW" />}
-                                 placeholder="002"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={4}>
-                              <TextInput
-                                 label={<FieldLabel label="Desa / Kelurahan" />}
-                                 placeholder="Desa"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={4}>
-                              <TextInput
-                                 label={<FieldLabel label="Kecamatan" />}
-                                 placeholder="Kecamatan"
-                              />
-                           </Grid.Col>
-
-                           <Grid.Col span={4}>
-                              <TextInput
-                                 label={<FieldLabel label="Kabupaten / Kota" />}
-                                 placeholder="Kabupaten / Kota"
-                              />
-                           </Grid.Col>
-                        </Grid>
-                     </FormSection>
-
-                     {/* Keterangan Section */}
-                     <FormSection
-                        title="Keterangan"
-                        icon={<IconMapPin size={18} />}
-                        description="Isi pernyataan SKTM"
-                     >
-                        <Textarea
-                           label={
-                              <FieldLabel
-                                 label="Isi Surat"
-                                 hint="Jelaskan kondisi ekonomi secara singkat"
-                              />
-                           }
-                           placeholder="Pernyataan resmi bahwa yang bersangkutan benar-benar tergolong keluarga tidak mampu..."
-                           minRows={4}
-                        />
-
-                        <TextInput
-                           label={
-                              <FieldLabel
-                                 label="Keperluan"
-                                 hint="Contoh: Beasiswa pendidikan / Perawatan kesehatan"
-                              />
-                           }
-                           placeholder="Keperluan surat"
-                        />
-                     </FormSection>
-
-                     {/* Actions */}
-                     <Group justify="right" mt="md">
-                        <Button variant="default" onClick={() => { }}>
-                           Reset
-                        </Button>
-                        <Button type="submit">Kirim / Simpan</Button>
-                     </Group>
-                  </Stack>
-               </form>
-            </Stack>
-         </Box>
-      </Container>
-   );
+      {preview ? (
+        <div>
+          <Text size="xs" color="dimmed">
+            Preview:
+          </Text>
+          {/* If preview is an image it will show; pdf preview might not render as image */}
+          {/* Use <object> or <img> depending on file type — keep simple here */}
+          <div style={{ marginTop: 6 }}>
+            <img
+              src={preview}
+              alt={`${label} preview`}
+              style={{ maxWidth: "200px", borderRadius: 4 }}
+            />
+          </div>
+        </div>
+      ) : null}
+    </Stack>
+  );
 }

src/pages/darmasaba/update_data_surat.tsx

@@ -0,0 +1,474 @@
+import ModalFile from "@/components/ModalFile";
+import notification from "@/components/notificationGlobal";
+import apiFetch from "@/lib/apiFetch";
+import {
+   ActionIcon,
+   Alert,
+   Anchor,
+   Badge,
+   Box,
+   Button,
+   Card,
+   Container,
+   Divider,
+   FileInput,
+   Flex,
+   Grid,
+   Group,
+   Stack,
+   Text,
+   TextInput,
+   Tooltip
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import {
+   IconBuildingCommunity,
+   IconInfoCircle,
+   IconUpload
+} from "@tabler/icons-react";
+import _ from "lodash";
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+type DataItem = {
+   key: string;
+   value: string;
+};
+
+type UpdateDataItem = {
+   id: string;
+   key: string;
+   value: any;
+};
+
+type FormSurat = {
+   kategoriId: string;
+   nama: string;
+   phone: string;
+   dataPelengkap: DataItem[];
+   syaratDokumen: DataItem[];
+};
+
+type FormUpdateSurat = {
+   dataPelengkap: UpdateDataItem[];
+   syaratDokumen: UpdateDataItem[];
+};
+
+type DataPengajuan = {
+   id: string;
+   noPengajuan: string;
+   category: string;
+   status: "antrian" | "diproses" | "selesai" | "ditolak";
+   createdAt: Date;
+   updatedAt: Date;
+   idSurat: string | undefined;
+}
+
+export default function UpdateDataSurat() {
+   const navigate = useNavigate();
+   const { search } = useLocation();
+   const query = new URLSearchParams(search);
+   const noPengajuan = query.get("pengajuan");
+
+
+   return (
+      <Container size="md" w={"100%"}>
+         <Box>
+            <Stack gap="lg">
+               <Group justify="space-between" align="center" mt={"lg"}>
+                  <Group align="center">
+                     <IconBuildingCommunity size={28} />
+                     <div>
+                        <Text fw={800} size="xl">
+                           Update Data Pengajuan Surat Administrasi
+                        </Text>
+                        <Text size="sm" c="dimmed">
+                           Formulir ini digunakan untuk memperbarui data pengajuan surat administrasi yang telah diajukan sebelumnya.
+                        </Text>
+                     </div>
+                  </Group>
+               </Group>
+               <Stack gap="lg" mb="lg">
+                  {
+                     !noPengajuan ? (
+                        <SearchData />
+                     )
+                        :
+                        <DataUpdate noPengajuan={noPengajuan} />
+                  }
+
+               </Stack>
+            </Stack>
+         </Box>
+      </Container>
+   );
+}
+
+function FieldLabel({ label, hint }: { label: string; hint?: string }) {
+   return (
+      <Group justify="apart" gap="xs" align="center">
+         <Text fw={600}>{label}</Text>
+         {hint && (
+            <Tooltip label={hint} withArrow>
+               <ActionIcon size={24} variant="subtle">
+                  <IconInfoCircle size={16} />
+               </ActionIcon>
+            </Tooltip>
+         )}
+      </Group>
+   );
+}
+
+function FormSection({
+   title,
+   icon,
+   children,
+   description,
+   info,
+}: {
+   title?: string;
+   icon?: React.ReactNode;
+   children: React.ReactNode;
+   description?: string;
+   info?: string;
+}) {
+   return (
+      <Card radius="md" shadow="sm" withBorder>
+         <Box mb="xs">
+            <Group justify="apart" align="center">
+               <Group align="center" gap="xs">
+                  {icon}
+                  {title && <Text fw={700}>{title}</Text>}
+               </Group>
+               {description && <Badge variant="light">{description}</Badge>}
+            </Group>
+            {info && <Text size="sm" c="dimmed">{info}</Text>}
+         </Box>
+         {
+            title && <Divider mb="sm" />
+         }
+         <Stack gap="sm">{children}</Stack>
+      </Card>
+   );
+}
+
+function FileInputWrapper({
+   label,
+   placeholder,
+   accept,
+   onChange,
+   preview,
+   name,
+   description,
+   linkView,
+   disabled
+}: {
+   label: string;
+   placeholder?: string;
+   accept?: string;
+   linkView?: string;
+   onChange: (file: File | null) => void;
+   preview?: string | null;
+   name: string;
+   description?: string;
+   disabled?: boolean;
+}) {
+   const [viewImg, setViewImg] = useState("");
+   const [openedPreviewFile, setOpenedPreviewFile] = useState(false);
+
+
+   useShallowEffect(() => {
+      if (viewImg) {
+         setOpenedPreviewFile(true);
+      }
+   }, [viewImg]);
+
+   return (
+      <>
+         <ModalFile
+            open={openedPreviewFile && !_.isEmpty(viewImg)}
+            onClose={() => {
+               setOpenedPreviewFile(false);
+            }}
+            folder="syarat-dokumen"
+            fileName={viewImg}
+         />
+
+         <Stack gap="xs">
+            <Flex direction={"column"}>
+               <Group justify="apart" align="center">
+                  <Text fw={500}>{label}</Text>
+               </Group>
+               {description && (
+                  <Text size="sm" c="dimmed" mt={4} style={{ lineHeight: 1.2 }}>
+                     {description}
+                  </Text>
+               )}
+               {
+                  linkView && (
+                     <Anchor onClick={() => setViewImg(linkView)} size="sm">
+                        Lihat dokumen sebelumnya
+                     </Anchor>
+                  )
+               }
+            </Flex>
+
+            <FileInput
+               accept={accept}
+               placeholder={placeholder}
+               onChange={(f) => onChange(f)}
+               leftSection={<IconUpload />}
+               aria-label={label}
+               name={name}
+               disabled={disabled}
+            />
+
+            {preview ? (
+               <div>
+                  <Text size="xs" color="dimmed">
+                     Preview:
+                  </Text>
+                  <div style={{ marginTop: 6 }}>
+                     <img
+                        src={preview}
+                        alt={`${label} preview`}
+                        style={{ maxWidth: "200px", borderRadius: 4 }}
+                     />
+                  </div>
+               </div>
+            ) : null}
+         </Stack>
+      </>
+
+   );
+}
+
+function SearchData() {
+   const [submitLoading, setSubmitLoading] = useState(false);
+   const [searchPengajuan, setSearchPengajuan] = useState("");
+   const [searchPengajuanPhone, setSearchPengajuanPhone] = useState("");
+   const navigate = useNavigate();
+
+   async function handleSearch() {
+      try {
+         setSubmitLoading(true);
+         if (searchPengajuan == "" || searchPengajuanPhone == "") {
+            notification({
+               title: "Peringatan",
+               message: "Silakan isi nomor pengajuan atau nomor telephone",
+               type: "warning"
+            });
+            return;
+         }
+
+         const response = await apiFetch.api.pelayanan["get-no-pengajuan"].post({
+            phone: searchPengajuanPhone,
+            noPengajuan: searchPengajuan
+         });
+
+         if (response.status === 200) {
+            if (response.data?.success) {
+               navigate(`/darmasaba/update-data-surat?pengajuan=${response.data.nomer}`);
+            } else {
+               notification({
+                  title: "Peringatan",
+                  message: response.data?.message || "Data pengajuan tidak valid",
+                  type: "warning"
+               });
+            }
+         } else {
+            notification({
+               title: "Error",
+               message: "Pengajuan tidak ditemukan atau gagal memuat data",
+               type: "error"
+            });
+         }
+
+      } catch (error) {
+         console.error("Error searching:", error);
+         notification({
+            title: "Error",
+            message: "Gagal mencari data pengajuan",
+            type: "error"
+         });
+      } finally {
+         setSubmitLoading(false);
+      }
+   }
+
+   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>
+
+            <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>
+   )
+}
+
+
+function DataUpdate({ noPengajuan }: { noPengajuan: string }) {
+   const [dataPelengkap, setDataPelengkap] = useState<DataItem[]>([])
+   const [dataSyaratDokumen, setDataSyaratDokumen] = useState<DataItem[]>([])
+   const [dataPengajuan, setDataPengajuan] = useState<DataPengajuan | {}>({})
+   const [status, setStatus] = useState("")
+   const [formSurat, setFormSurat] = useState<FormUpdateSurat>({
+      dataPelengkap: [],
+      syaratDokumen: [],
+   });
+
+   async function fetchData() {
+      try {
+         const res = await apiFetch.api.pelayanan["detail-data"].post({ nomerPengajuan: noPengajuan });
+         if (res.data && res.data.success === true) {
+            setDataPelengkap(res.data.dataPelengkap || []);
+            setDataSyaratDokumen(res.data.syaratDokumen || []);
+            setDataPengajuan(res.data.pengajuan || {});
+
+            setStatus(res.data.pengajuan && 'status' in res.data.pengajuan ? res.data.pengajuan.status : "");
+         } else {
+            notification({
+               title: "Error",
+               message: res.data?.message || "Gagal memuat data",
+               type: "error",
+            });
+            setDataPelengkap([]);
+            setDataSyaratDokumen([]);
+            setDataPengajuan({});
+         }
+      } catch (error) {
+         console.error('Error fetching data:', error);
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchData();
+   }, []);
+
+   function upsertById<T extends { id: string }>(
+      array: T[],
+      item: T
+   ): T[] {
+      const index = array.findIndex((v) => v.id === item.id)
+
+      // ➕ insert
+      if (index === -1) {
+         return [...array, item]
+      }
+
+      // ✏️ update
+      return array.map((v, i) => (i === index ? { ...v, ...item } : v))
+   }
+
+
+   function validationForm({
+      kategori,
+      value,
+   }: {
+      kategori: "dataPelengkap" | "syaratDokumen";
+      value: UpdateDataItem;
+   }) {
+      setFormSurat((prev) => ({
+         ...prev,
+         [kategori]: upsertById(prev[kategori], {
+            id: value.id,
+            key: value.key,
+            value: value.value
+         })
+      }));
+   }
+
+
+
+   return (
+      <>
+         {
+            (status != "ditolak" && status != "antrian")
+            && <Alert variant="light" color="yellow" radius="lg" title={`Data pengajuan surat ini tidak dapat diupdate karena berstatus ${status}.`} icon={<span style={{ fontSize: '1.2rem' }}>⚠</span>} />
+         }
+         <FormSection
+            title="Data Pelengkap"
+            description="Data pelengkap yang diperlukan"
+         >
+            <Grid>
+               {dataPelengkap.map((item: any, index: number) => (
+                  <Grid.Col span={6} key={index}>
+                     <TextInput
+                        label={
+                           <FieldLabel label={item.name} hint={item.desc} />
+                        }
+                        placeholder={item.name}
+                        onChange={(e) =>
+                           validationForm({
+                              kategori: "dataPelengkap",
+                              value: { id: item.id, key: item.key, value: e.target.value },
+                           })
+                        }
+                        value={formSurat.dataPelengkap.find((n) => n.id === item.id)?.value ?? dataPelengkap.find((n: any) => n.key == item.key,)?.value}
+                        disabled={status != "ditolak" && status != "antrian"}
+                     />
+                  </Grid.Col>
+               ))}
+            </Grid>
+         </FormSection>
+
+         <FormSection
+            title="Syarat Dokumen"
+            description="Syarat dokumen yang diperlukan"
+         >
+            <Grid>
+               {dataSyaratDokumen.map((item: any, index: number) => (
+                  <Grid.Col span={6} key={index}>
+                     <FileInputWrapper
+                        label={item.desc}
+                        placeholder={"Upload file terbaru untuk mengupdate"}
+                        accept="image/*,application/pdf"
+                        linkView={item.value}
+                        onChange={(file) =>
+                           validationForm({
+                              kategori: "syaratDokumen",
+                              value: { id: item.id, key: item.key, value: file },
+                           })
+                        }
+                        name={item.name}
+                        disabled={status != "ditolak" && status != "antrian"}
+                     />
+                  </Grid.Col>
+               ))}
+            </Grid>
+         </FormSection>
+
+         <Group justify="right" mt="md">
+            <Button onClick={() => console.log('Submit clicked')}>Kirim</Button>
+         </Group>
+      </>
+   )
+}

src/server/lib/slug_converter.ts

@@ -0,0 +1,18 @@
+export function toSlug(text: string): string {
+   return encodeURIComponent(
+      text
+         .toLowerCase()
+         .trim()
+         .replace(/\s+/g, "-")
+   );
+}
+
+export function fromSlug(slug: string): string {
+   return decodeURIComponent(slug)
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, c => c.toUpperCase());
+}
+
+export function capitalizeWords(text: string): string {
+   return text.replace(/\b\w/g, c => c.toUpperCase());
+}

src/server/routes/pelayanan_surat_route.ts

@@ -105,12 +105,42 @@ const PelayananRoute = new Elysia({
    .get("/category/detail", async ({ query }) => {
       const { id } = query
       const data = await prisma.categoryPelayanan.findUnique({
-         where:{
+         where: {
             id
          }
       })
 
-      return data
+      if (!data) {
+         return;
+      }
+
+      const dataPelengkap: { key: string }[] = Array.isArray(data.dataPelengkap)
+         ? data.dataPelengkap.filter(
+            (v): v is { key: string } =>
+               typeof v === "object" &&
+               v !== null &&
+               "key" in v &&
+               typeof (v as any).key === "string"
+         )
+         : [];
+
+      const syaratDokumen: { name: string }[] = Array.isArray(data.syaratDokumen)
+         ? data.syaratDokumen.filter(
+            (v): v is { name: string } =>
+               typeof v === "object" &&
+               v !== null &&
+               "name" in v &&
+               typeof (v as any).name === "string"
+         )
+         : [];
+
+
+      return {
+         id: data.id,
+         name: data.name,
+         dataPelengkap,
+         syaratDokumen,
+      };
    }, {
       query: t.Object({
          id: t.String({ minLength: 1, error: "id harus diisi" }),
@@ -184,8 +214,8 @@ const PelayananRoute = new Elysia({
             CategoryPelayanan: {
                select: {
                   name: true,
-                  dataText: true,
                   syaratDokumen: true,
+                  dataPelengkap: true
                }
             },
             Warga: {
@@ -251,10 +281,11 @@ const PelayananRoute = new Elysia({
       const syaratDokumen = (data?.CategoryPelayanan?.syaratDokumen ?? []) as {
          name: string;
          desc: string;
+         key: string;
       }[];
 
       const dataSyaratFix = dataSyarat.map((item) => {
-         const desc = syaratDokumen.find((v) => v.name == item.jenis)?.desc
+         const desc = syaratDokumen.find((v) => v.key == item.jenis)?.desc
          return {
             id: item.id,
             jenis: desc,
@@ -262,11 +293,17 @@ const PelayananRoute = new Elysia({
          }
       })
 
+      const dataTextCategory = (data?.CategoryPelayanan?.dataPelengkap ?? []) as {
+         name: string;
+         desc: string;
+         key: string;
+      }[];
+
       const dataTextFix = dataText.map((item) => {
-         const desc = data?.CategoryPelayanan?.dataText.find((v) => v == item.jenis)
+         const nama = dataTextCategory.find((v) => v.key == item.jenis)?.name
          return {
             id: item.id,
-            jenis: item.jenis,
+            jenis: nama,
             value: item.value,
          }
       })
@@ -336,9 +373,9 @@ const PelayananRoute = new Elysia({
       }
    })
    .post("/create", async ({ body, headers }) => {
-      const { kategoriId, dataText, syaratDokumen } = body
-      const namaWarga = headers['x-user'] || ""
-      const noTelepon = headers['x-phone'] || ""
+      const { kategoriId, dataPelengkap, syaratDokumen, nama, phone } = body
+      // const namaWarga = headers['x-user'] || ""
+      // const noTelepon = headers['x-phone'] || ""
       const noPengajuan = await generateNoPengajuanSurat()
       let idCategoryFix = kategoriId
       let idWargaFix = ""
@@ -364,21 +401,21 @@ const PelayananRoute = new Elysia({
 
       }
 
-      if (!isValidPhone(noTelepon)) {
+      if (!isValidPhone(phone)) {
          return { success: false, message: 'nomor telepon tidak valid, harap masukkan nomor yang benar' }
       }
 
-      const nomorHP = normalizePhoneNumber({ phone: noTelepon })
+      const nomorHP = normalizePhoneNumber({ phone: phone })
       const dataWarga = await prisma.warga.upsert({
          where: {
             phone: nomorHP
          },
          create: {
-            name: namaWarga,
+            name: nama,
             phone: nomorHP,
          },
          update: {
-            name: namaWarga,
+            name: nama,
          },
          select: {
             id: true
@@ -409,16 +446,16 @@ const PelayananRoute = new Elysia({
          dataInsertSyaratDokumen.push({
             idPengajuanLayanan: pengaduan.id,
             idCategory: idCategoryFix,
-            jenis: item.jenis,
+            jenis: item.key,
             value: item.value,
          })
       }
 
-      for (const item of dataText) {
+      for (const item of dataPelengkap) {
          dataInsertDataText.push({
             idPengajuanLayanan: pengaduan.id,
             idCategory: idCategoryFix,
-            jenis: item.jenis,
+            jenis: item.key,
             value: item.value,
          })
       }
@@ -440,7 +477,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      return { success: true, message: 'pengajuan layanan surat sudah dibuat dengan nomer ' + noPengajuan + ', nomer ini akan digunakan untuk mengakses pengajuan ini' }
+      return { success: true, message: 'Pengajuan layanan surat sudah dibuat dengan nomer ' + noPengajuan + ', nomer ini akan digunakan untuk mengakses pengajuan ini' }
    }, {
       body: t.Object({
          kategoriId: t.String({
@@ -448,21 +485,20 @@ const PelayananRoute = new Elysia({
             examples: ["skusaha"],
             error: "ID kategori harus diisi"
          }),
-         // namaWarga: t.String({
-         //    description: "Nama warga",
-         //    examples: ["Budi Santoso"],
-         //    error: "Nama warga harus diisi"
-         // }),
+         nama: t.String({
+            description: "Nama warga",
+            examples: ["Budi Santoso"],
+            error: "Nama warga harus diisi"
+         }),
+         phone: t.String({
+            error: "Nomor telepon harus diisi",
+            examples: ["08123456789", "+628123456789"],
+            description: "Nomor telepon warga pelapor"
+         }),
 
-         // noTelepon: t.String({
-         //    error: "Nomor telepon harus diisi",
-         //    examples: ["08123456789", "+628123456789"],
-         //    description: "Nomor telepon warga pelapor"
-         // }),
-
-         dataText: t.Array(
+         dataPelengkap: t.Array(
             t.Object({
-               jenis: t.String({
+               key: t.String({
                   description: "Jenis field yang dibutuhkan oleh kategori pelayanan. Biasanya dinamis.",
                   examples: ["nama", "jenis kelamin", "tempat tanggal lahir", "negara", "agama", "status perkawinan", "alamat", "pekerjaan", "jenis usaha", "alamat usaha"],
                   error: "jenis harus diisi"
@@ -477,25 +513,25 @@ const PelayananRoute = new Elysia({
                description: "Kumpulan data text dinamis sesuai kategori layanan.",
                examples: [
                   [
-                     { jenis: "nama", value: "Budi Santoso" },
-                     { jenis: "jenis kelamin", value: "Laki-laki" },
-                     { jenis: "tempat tanggal lahir", value: "Denpasar, 28 Februari 1990" },
-                     { jenis: "negara", value: "Indonesia" },
-                     { jenis: "agama", value: "Islam" },
-                     { jenis: "status perkawinan", value: "Belum menikah" },
-                     { jenis: "alamat", value: "Jl. Mawar No. 10" },
-                     { jenis: "pekerjaan", value: "Karyawan Swasta" },
-                     { jenis: "jenis usaha", value: "usaha makanan" },
-                     { jenis: "alamat usaha", value: "Jl. Melati No. 21" },
+                     { key: "nama", value: "Budi Santoso" },
+                     { key: "jenis kelamin", value: "Laki-laki" },
+                     { key: "tempat tanggal lahir", value: "Denpasar, 28 Februari 1990" },
+                     { key: "negara", value: "Indonesia" },
+                     { key: "agama", value: "Islam" },
+                     { key: "status perkawinan", value: "Belum menikah" },
+                     { key: "alamat", value: "Jl. Mawar No. 10" },
+                     { key: "pekerjaan", value: "Karyawan Swasta" },
+                     { key: "jenis usaha", value: "usaha makanan" },
+                     { key: "alamat usaha", value: "Jl. Melati No. 21" },
                   ]
                ],
-               error: "dataText harus berupa array"
+               error: "Data Pelengkap harus berupa array"
             }
          ),
 
          syaratDokumen: t.Array(
             t.Object({
-               jenis: t.String({
+               key: t.String({
                   description: "Jenis dokumen persyaratan yang diminta oleh kategori layanan.",
                   examples: ["ktp", "kk", "surat_pengantar_rt"],
                   error: "jenis harus diisi"
@@ -510,19 +546,18 @@ const PelayananRoute = new Elysia({
                description: "Kumpulan dokumen yang wajib diupload sesuai persyaratan layanan.",
                examples: [
                   [
-                     { jenis: "pengantar kelian", value: "pengantar_kelurahan_budi.png" },
-                     { jenis: "ktp/kk", value: "kk_budi.png" },
-                     { jenis: "foto lokasi", value: "foto_lokasi_budi.png" }
+                     { key: "pengantar kelian", value: "pengantar_kelurahan_budi.png" },
+                     { key: "ktp/kk", value: "kk_budi.png" },
+                     { key: "foto lokasi", value: "foto_lokasi_budi.png" }
                   ]
                ],
-               error: "syaratDokumen harus berupa array"
+               error: "Syarat Dokumen harus berupa array"
             }
          ),
       }),
       detail: {
          summary: "Buat Pengajuan Pelayanan Surat",
          description: `tool untuk membuat pengajuan pelayanan surat dengan syarat dokumen serta data text sesuai kategori pelayanan surat yang dipilih`,
-         tags: ["mcp"]
       }
    })
    .post("/detail-data", async ({ body }) => {
@@ -540,7 +575,7 @@ const PelayananRoute = new Elysia({
             CategoryPelayanan: {
                select: {
                   name: true,
-                  dataText: true,
+                  dataPelengkap: true,
                   syaratDokumen: true,
                }
             },
@@ -560,7 +595,15 @@ const PelayananRoute = new Elysia({
       })
 
       if (!data) {
-         return { success: false, message: "Data tidak ditemukan" }
+         return {
+            success: false,
+            message: "Data tidak ditemukan",
+            pengajuan: {},
+            history: [],
+            warga: {},
+            syaratDokumen: [],
+            dataPelengkap: [],
+         }
       }
 
       const dataSurat = await prisma.suratPelayanan.findFirst({
@@ -586,7 +629,7 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      const dataText = await prisma.dataTextPelayanan.findMany({
+      const dataPelengkap = await prisma.dataTextPelayanan.findMany({
          where: {
             idPengajuanLayanan: data?.id,
             isActive: true
@@ -600,23 +643,37 @@ const PelayananRoute = new Elysia({
       const syaratDokumen = (data?.CategoryPelayanan?.syaratDokumen ?? []) as {
          name: string;
          desc: string;
+         key: string;
       }[];
 
       const dataSyaratFix = dataSyarat.map((item) => {
-         // const desc = syaratDokumen.find((v) => v.name == item.jenis)?.desc
+         const desc = syaratDokumen.find((v) => v.key == item.jenis)?.desc
+         const name = syaratDokumen.find((v) => v.key == item.jenis)?.name
          return {
             id: item.id,
-            jenis: item.jenis,
+            key: item.jenis,
             value: item.value,
+            name: name ?? '',
+            desc: desc ?? ''
          }
       })
 
-      const dataTextFix = dataText.map((item) => {
-         // const desc = data?.CategoryPelayanan?.dataText.find((v) => v == item.jenis)
+      const dataPelengkapList = (data?.CategoryPelayanan?.dataPelengkap ?? []) as {
+         name: string;
+         desc: string;
+         key: string;
+      }[];
+
+      const dataTextFix = dataPelengkap.map((item) => {
+         const ini = dataPelengkapList.find((v) => v.key == item.jenis)
+         const desc = ini?.desc
+         const name = ini?.name
          return {
             id: item.id,
-            jenis: item.jenis,
+            key: item.jenis,
             value: item.value,
+            desc: desc ?? '',
+            name: name ?? ''
          }
       })
 
@@ -667,14 +724,15 @@ const PelayananRoute = new Elysia({
       }
 
       const datafix = {
+         success: true,
+         message: 'sukses',
          pengajuan: dataPengajuan,
          history: dataHistoryFix,
          warga: warga,
          syaratDokumen: dataSyaratFix,
-         dataText: dataTextFix,
+         dataPelengkap: dataTextFix,
       }
 
-      console.log('detail data syarat==', dataSyaratFix)
 
       return datafix
 
@@ -752,51 +810,34 @@ const PelayananRoute = new Elysia({
       }
    })
    .post("/update", async ({ body }) => {
-      const { nomerPengajuan, syaratDokumen, dataText } = body
+      const { id, syaratDokumen, dataPelengkap } = body
       let dataUpdate = []
-      console.log(body)
 
-      const pengajuan = await prisma.pelayananAjuan.findFirst({
+      const pengajuan = await prisma.pelayananAjuan.findUnique({
          where: {
-            noPengajuan: nomerPengajuan,
+            id
          }
       })
 
       if (!pengajuan) {
-         console.log("data pengajuan surat tidak ditemukan")
          return { success: false, message: 'data pengajuan surat tidak ditemukan' }
       }
 
 
       if (pengajuan.status != "ditolak" && pengajuan.status != "antrian") {
-         console.log("pengajuan surat tidak dapat diupdate karena status " + pengajuan.status)
          return { success: false, message: 'pengajuan surat tidak dapat diupdate karena status ' + pengajuan.status }
       }
 
-      if (dataText && dataText.length > 0) {
-         console.log("dataText")
-         for (const item of dataText) {
-            dataUpdate.push(item.jenis)
-            const hasil = await prisma.dataTextPelayanan.findFirst({
-               where: {
-                  idPengajuanLayanan: pengajuan.id,
-                  jenis: item.jenis,
-               }
-            })
+      if (dataPelengkap && dataPelengkap.length > 0) {
+         for (const item of dataPelengkap) {
+            dataUpdate.push(item.key)
 
-
-            const upd = await prisma.dataTextPelayanan.upsert({
+            const upd = await prisma.dataTextPelayanan.update({
                where: {
-                  id: hasil?.id
+                  id: item.id
                },
-               update: {
+               data: {
                   value: item.value,
-               },
-               create: {
-                  value: item.value,
-                  jenis: item.jenis,
-                  idPengajuanLayanan: pengajuan.id,
-                  idCategory: pengajuan.idCategory,
                }
             })
 
@@ -818,38 +859,16 @@ const PelayananRoute = new Elysia({
 
 
       if (syaratDokumen && syaratDokumen.length > 0) {
-         console.log("syaratDokumen")
          for (const item of syaratDokumen) {
-            const pilih = syarat?.find((cat) => cat.desc.toLowerCase() == item.jenis.toLowerCase() || cat.name.toLowerCase() == item.jenis.toLowerCase())?.name;
-            console.log(syarat, pilih)
-            dataUpdate.push(pilih)
-
-            const hasil = await prisma.syaratDokumenPelayanan.findFirst({
+            dataUpdate.push(item.key)
+            const upd = await prisma.syaratDokumenPelayanan.update({
                where: {
-                  idPengajuanLayanan: pengajuan.id,
-                  jenis: pilih,
+                  id: item.id
+               },
+               data: {
+                  value: item.value,
                }
             })
-            console.log(hasil, item)
-
-            if (hasil && hasil.id) {
-               const upd = await prisma.syaratDokumenPelayanan.upsert({
-                  where: {
-                     id: hasil.id
-                  },
-                  update: {
-                     value: item.value,
-                  },
-                  create: {
-                     value: item.value,
-                     jenis: hasil.jenis,
-                     idPengajuanLayanan: pengajuan.id,
-                     idCategory: pengajuan.idCategory,
-                  }
-               })
-            } else {
-               return { success: false, message: 'dokumen tidak dapat diupload' }
-            }
          }
       }
 
@@ -874,22 +893,25 @@ const PelayananRoute = new Elysia({
          }
       })
 
-      console.log("pengajuan surat sudah diperbarui")
 
       return { success: true, message: 'pengajuan surat sudah diperbarui' }
 
    }, {
       body: t.Object({
-         nomerPengajuan: t.String({
-            error: "nomer pengajuan harus diisi",
-            description: "Nomer pengajuan yang ingin diupdate"
+         id: t.String({
+            error: "id harus diisi",
+            description: "ID yang ingin diupdate"
          }),
-         dataText: t.Optional(t.Array(
+         dataPelengkap: t.Optional(t.Array(
             t.Object({
-               jenis: t.String({
-                  description: "Jenis field yang dibutuhkan oleh kategori pelayanan. Biasanya dinamis.",
+               id: t.String({
+                  description: "ID Data Pelengkap.",
+                  error: "id harus diisi"
+               }),
+               key: t.String({
+                  description: "Key field yang dibutuhkan oleh kategori pelayanan. Biasanya dinamis.",
                   examples: ["nama", "jenis kelamin", "tempat tanggal lahir", "negara", "agama", "status perkawinan", "alamat", "pekerjaan", "jenis usaha", "alamat usaha"],
-                  error: "jenis harus diisi"
+                  error: "key harus diisi"
                }),
                value: t.String({
                   description: "Isi atau nilai dari jenis field terkait.",
@@ -901,26 +923,30 @@ const PelayananRoute = new Elysia({
                description: "Kumpulan data text dinamis sesuai kategori layanan.",
                examples: [
                   [
-                     { jenis: "nama", value: "Budi Santoso" },
-                     { jenis: "jenis kelamin", value: "Laki-laki" },
-                     { jenis: "tempat tanggal lahir", value: "Denpasar, 28 Februari 1990" },
-                     { jenis: "negara", value: "Indonesia" },
-                     { jenis: "agama", value: "Islam" },
-                     { jenis: "status perkawinan", value: "Belum menikah" },
-                     { jenis: "alamat", value: "Jl. Mawar No. 10" },
-                     { jenis: "pekerjaan", value: "Karyawan Swasta" },
-                     { jenis: "jenis usaha", value: "usaha makanan" },
-                     { jenis: "alamat usaha", value: "Jl. Melati No. 21" },
+                     { id: "1", key: "nama", value: "Budi Santoso" },
+                     { id: "2", key: "jenis kelamin", value: "Laki-laki" },
+                     { id: "3", key: "tempat tanggal lahir", value: "Denpasar, 28 Februari 1990" },
+                     { id: "4", key: "negara", value: "Indonesia" },
+                     { id: "5", key: "agama", value: "Islam" },
+                     { id: "6", key: "status perkawinan", value: "Belum menikah" },
+                     { id: "7", key: "alamat", value: "Jl. Mawar No. 10" },
+                     { id: "8", key: "pekerjaan", value: "Karyawan Swasta" },
+                     { id: "9", key: "jenis usaha", value: "usaha makanan" },
+                     { id: "10", key: "alamat usaha", value: "Jl. Melati No. 21" },
                   ]
                ],
             }
          )),
          syaratDokumen: t.Optional(t.Array(
             t.Object({
-               jenis: t.String({
-                  description: "Jenis dokumen persyaratan yang diminta oleh kategori layanan.",
+               id: t.String({
+                  description: "ID syarat dokumen",
+                  error: "id harus diisi"
+               }),
+               key: t.String({
+                  description: "Key dokumen persyaratan yang diminta oleh kategori layanan.",
                   examples: ["ktp", "kk", "surat_pengantar_rt"],
-                  error: "jenis harus diisi"
+                  error: "key harus diisi"
                }),
                value: t.String({
                   description: "Nama file atau identifier file dokumen yang diupload.",
@@ -932,9 +958,9 @@ const PelayananRoute = new Elysia({
                description: "Kumpulan dokumen yang wajib diupload sesuai persyaratan layanan.",
                examples: [
                   [
-                     { jenis: "pengantar kelian", value: "pengantar_kelurahan_budi.png" },
-                     { jenis: "ktp/kk", value: "kk_budi.png" },
-                     { jenis: "foto lokasi", value: "foto_lokasi_budi.png" }
+                     { id: "1", key: "pengantar kelian", value: "pengantar_kelurahan_budi.png" },
+                     { id: "2", key: "ktp/kk", value: "kk_budi.png" },
+                     { id: "3", key: "foto lokasi", value: "foto_lokasi_budi.png" }
                   ]
                ],
             }
@@ -943,7 +969,6 @@ const PelayananRoute = new Elysia({
       detail: {
          summary: "Update Data Pengajuan Pelayanan Surat",
          description: `tool untuk update data pengajuan pelayanan surat`,
-         tags: ["mcp"]
       }
    })
    .get("/list", async ({ query }) => {
@@ -1090,5 +1115,47 @@ const PelayananRoute = new Elysia({
          description: `tool untuk mendapatkan jumlah pengajuan pelayanan surat warga`,
       }
    })
+   .post("/get-no-pengajuan", async ({ body }) => {
+      const { phone, noPengajuan } = body;
+
+      if (!isValidPhone(phone)) {
+         return { success: false, message: 'nomor telepon tidak valid, harap masukkan nomor yang benar' }
+      }
+
+      const nomorHP = normalizePhoneNumber({ phone: phone })
+      const data = await prisma.pelayananAjuan.findMany({
+         where: {
+            noPengajuan: noPengajuan,
+            Warga: {
+               phone: nomorHP
+            }
+         },
+         select: {
+            id: true,
+            noPengajuan: true,
+            status: true,
+            createdAt: true,
+         }
+      });
+
+      if (data.length == 0) {
+         return { success: false, message: 'Data pengajuan tidak ditemukan' };
+      }
+
+      return {
+         success: true,
+         nomer: noPengajuan
+      };
+
+   }, {
+      body: t.Object({
+         phone: t.String({ minLength: 1, error: "Nomor telepon harus diisi" }),
+         noPengajuan: t.String({ minLength: 1, error: "Nomor pengajuan harus diisi" }),
+      }),
+      detail: {
+         summary: "Cek Nomor Pengajuan Surat",
+         description: `tool untuk memeriksa apakah nomor pengajuan surat valid dan terkait dengan nomor telepon warga. Jika valid, mengembalikan nomor pengajuan.`,
+      }
+   })
 
 export default PelayananRoute