upd: update pelayanan surat

Deskripsi:
- pengaplikasian api
- modal konfirmasi update pelayanan surat
- modal konfirmasi create pelayanan surat

NO Issues

src/components/SuccessPengajuanSurat.tsx

@@ -4,11 +4,13 @@ import { IconCheck } from "@tabler/icons-react";
 type SuccessPengajuanProps = {
   noPengajuan: string;
   onClose?: () => void;
+  category?: 'create' | 'update';
 };
 
 export default function SuccessPengajuan({
   noPengajuan,
   onClose,
+  category
 }: SuccessPengajuanProps) {
   return (
     <Center h="100vh">
@@ -17,11 +19,11 @@ export default function SuccessPengajuan({
           <IconCheck size={56} color="green" />
 
           <Title order={3} ta="center">
-            Pengajuan Berhasil Dibuat
+            {category == 'create' ? 'Pengajuan Berhasil Dibuat' : 'Pengajuan Berhasil Diupdate'}
           </Title>
 
           <Text ta="center" size="sm" c="dimmed">
-            Pengajuan layanan surat sudah dibuat dengan nomor:
+            {category == 'create' ? 'Pengajuan layanan surat sudah dibuat dengan nomor:' : 'Pengajuan layanan surat sudah diupdate dengan nomor:'}
           </Text>
 
           <Badge size="xl" variant="light" color="green">

src/pages/darmasaba/surat.tsx

@@ -15,13 +15,14 @@ import {
   Flex,
   Grid,
   Group,
+  Modal,
   Select,
   Stack,
   Text,
   TextInput,
   Tooltip,
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
   IconBuildingCommunity,
   IconInfoCircle,
@@ -46,6 +47,7 @@ type FormSurat = {
 };
 
 export default function FormSurat() {
+  const [opened, { open, close }] = useDisclosure(false);
   const [noPengajuan, setNoPengajuan] = useState("");
   const [submitLoading, setSubmitLoading] = useState(false);
   const navigate = useNavigate();
@@ -141,7 +143,7 @@ export default function FormSurat() {
     }
   }, [jenisSuratFix.id]);
 
-  async function onSubmit() {
+  function onChecking() {
     const isFormKosong = Object.values(formSurat).some((value) => {
       if (Array.isArray(value)) {
         return (
@@ -166,8 +168,12 @@ export default function FormSurat() {
         message: "Silahkan lengkapi form surat",
         type: "error",
       });
+    } else {
+      open();
+    }
   }
 
+  async function onSubmit() {
     try {
       setSubmitLoading(true);
       // 🔥 CLONE state SEKALI
@@ -197,11 +203,7 @@ export default function FormSurat() {
       const res = await apiFetch.api.pelayanan.create.post(finalFormSurat);
 
       if (res.status === 200) {
-        notification({
+        setNoPengajuan(res.data?.noPengajuan || "");
-          title: "Berhasil",
-          message: res.data?.message || "Pengajuan surat berhasil dibuat",
-          type: "success",
-        });
       } else {
         notification({
           title: "Gagal",
@@ -252,17 +254,46 @@ export default function FormSurat() {
   }
 
   return (
-    <Container size="md" w={"100%"}>
+    <Container size="md" w={"100%"} pb={"lg"}>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={"Konfirmasi"}
+        overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+      >
+        <Stack gap="sm">
+          <Text>
+            Apakah anda yakin ingin mengirim pengajuan surat ini?
+          </Text>
+          <Group justify="center" grow>
+            <Button variant="light" onClick={close}>
+              Tidak
+            </Button>
+            <Button
+              variant="filled"
+              color="green"
+              onClick={() => {
+                onSubmit();
+                close();
+              }}
+            >
+              Ya
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
       <FullScreenLoading visible={submitLoading} />
-      {noPengajuan != "" && (
+      {noPengajuan != "" ? (
         <SuccessPengajuan
           noPengajuan={noPengajuan}
           onClose={() => {
             onResetAll();
             navigate("/darmasaba/surat");
           }}
+          category="create"
         />
-      )}
+      )
+        :
         <Box>
           <Stack gap="lg">
             <Group justify="space-between" align="center">
@@ -397,16 +428,18 @@ export default function FormSurat() {
 
                   {/* Actions */}
                   <Group justify="right" mt="md">
-                  <Button variant="default" onClick={() => {}}>
+                    {/* <Button variant="default" onClick={() => { }}>
                     Reset
-                  </Button>
+                  </Button> */}
-                  <Button onClick={onSubmit}>Kirim</Button>
+                    <Button onClick={onChecking}>Kirim</Button>
                   </Group>
                 </>
               )}
             </Stack>
           </Stack>
         </Box>
+      }
+
     </Container>
   );
 }

src/pages/darmasaba/update_data_surat.tsx

@@ -1,5 +1,7 @@
+import FullScreenLoading from "@/components/FullScreenLoading";
 import ModalFile from "@/components/ModalFile";
 import notification from "@/components/notificationGlobal";
+import SuccessPengajuan from "@/components/SuccessPengajuanSurat";
 import apiFetch from "@/lib/apiFetch";
 import {
    ActionIcon,
@@ -15,12 +17,13 @@ import {
    Flex,
    Grid,
    Group,
+   Modal,
    Stack,
    Text,
    TextInput,
    Tooltip
 } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import {
    IconBuildingCommunity,
    IconInfoCircle,
@@ -336,6 +339,10 @@ function SearchData() {
 
 
 function DataUpdate({ noPengajuan }: { noPengajuan: string }) {
+   const [opened, { open, close }] = useDisclosure(false)
+   const navigate = useNavigate()
+   const [sukses, setSukses] = useState(false)
+   const [submitLoading, setSubmitLoading] = useState(false)
    const [dataPelengkap, setDataPelengkap] = useState<DataItem[]>([])
    const [dataSyaratDokumen, setDataSyaratDokumen] = useState<DataItem[]>([])
    const [dataPengajuan, setDataPengajuan] = useState<DataPengajuan | {}>({})
@@ -406,9 +413,146 @@ function DataUpdate({ noPengajuan }: { noPengajuan: string }) {
       }));
    }
 
+   function updateArrayByKey(
+      list: UpdateDataItem[],
+      id: string,
+      value: any,
+   ): UpdateDataItem[] {
+      return list.map((item) =>
+         item.id === id ? { ...item, value } : item,
+      );
+   }
+
+   function onChecking() {
+      if (formSurat.dataPelengkap.length == 0 && formSurat.syaratDokumen.length == 0)
+         return notification({
+            title: "Peringatan",
+            message: "Tidak ada data yang diupdate",
+            type: "warning",
+         });
+      const isFormKosong = Object.values(formSurat).some((value: UpdateDataItem[] | string) => {
+         if (Array.isArray(value)) {
+            return (
+               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",
+         });
+      } else {
+         open()
+      }
+   }
+
+   async function onSubmit() {
+      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.id,
+                  updImg.data?.filename || "",
+               );
+            }
+         }
+
+         // 3️⃣ SET STATE SEKALI (optional, untuk UI)
+         setFormSurat(finalFormSurat);
+
+         // 4️⃣ SUBMIT KE API
+         const res = await apiFetch.api.pelayanan.update.post({
+            id: dataPengajuan && ('id' in dataPengajuan) ? dataPengajuan.id : "",
+            dataPelengkap: finalFormSurat.dataPelengkap,
+            syaratDokumen: finalFormSurat.syaratDokumen,
+         });
+
+         if (res.status === 200) {
+            setSukses(true);
+         } 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);
+      }
+   }
 
 
    return (
+      <>
+         <FullScreenLoading visible={submitLoading} />
+         <Modal
+            opened={opened}
+            onClose={close}
+            title={"Konfirmasi"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="sm">
+               <Text>
+                  Apakah anda yakin ingin mengupdate pengajuan surat ini?
+               </Text>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={close}>
+                     Tidak
+                  </Button>
+                  <Button
+                     variant="filled"
+                     color="green"
+                     onClick={() => {
+                        onSubmit();
+                        close();
+                     }}
+                  >
+                     Ya
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+         {
+            sukses ?
+               <SuccessPengajuan
+                  noPengajuan={noPengajuan}
+                  onClose={() => {
+                     navigate("/darmasaba/update-data-surat");
+                  }}
+                  category="update"
+               />
+               :
                <>
                   {
                      (status != "ditolak" && status != "antrian")
@@ -467,8 +611,10 @@ function DataUpdate({ noPengajuan }: { noPengajuan: string }) {
                   </FormSection>
 
                   <Group justify="right" mt="md">
-            <Button onClick={() => console.log('Submit clicked')}>Kirim</Button>
+                     <Button onClick={() => { onChecking() }}>Kirim</Button>
                   </Group>
                </>
+         }
+      </>
    )
 }

src/server/routes/pelayanan_surat_route.ts

@@ -299,14 +299,26 @@ const PelayananRoute = new Elysia({
          key: string;
       }[];
 
-      const dataTextFix = dataText.map((item) => {
+      const refMap = new Map(
+         dataTextCategory.map((v, i) => [
+            v.key,
+            { ...v, order: i }
+         ])
+      );
+
+      const dataTextFix = dataText
+         .map((item) => {
+            const ref = refMap.get(item.jenis);
             const nama = dataTextCategory.find((v) => v.key == item.jenis)?.name
             return {
                id: item.id,
                jenis: nama,
                value: item.value,
-         }
+               order: ref?.order ?? Infinity,
+            };
          })
+         .sort((a, b) => a.order - b.order)
+         .map(({ order, ...rest }) => rest); // hapus order
 
       const dataHistory = await prisma.historyPelayanan.findMany({
          where: {
@@ -477,7 +489,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', noPengajuan }
    }, {
       body: t.Object({
          kategoriId: t.String({
@@ -664,18 +676,29 @@ const PelayananRoute = new Elysia({
          key: string;
       }[];
 
-      const dataTextFix = dataPelengkap.map((item) => {
+      const refMap = new Map(
-         const ini = dataPelengkapList.find((v) => v.key == item.jenis)
+         dataPelengkapList.map((v, i) => [
-         const desc = ini?.desc
+            v.key,
-         const name = ini?.name
+            { ...v, order: i }
+         ])
+      );
+
+      const dataTextFix = dataPelengkap
+         .map((item) => {
+            const ref = refMap.get(item.jenis);
+
             return {
                id: item.id,
                key: item.jenis,
                value: item.value,
-            desc: desc ?? '',
+               desc: ref?.desc ?? "",
-            name: name ?? ''
+               name: ref?.name ?? "",
-         }
+               order: ref?.order ?? Infinity,
+            };
          })
+         .sort((a, b) => a.order - b.order)
+         .map(({ order, ...rest }) => rest); // hapus order
+
 
       const dataHistory = await prisma.historyPelayanan.findMany({
          where: {
@@ -733,7 +756,6 @@ const PelayananRoute = new Elysia({
          dataPelengkap: dataTextFix,
       }
 
-
       return datafix
 
    }, {