upd: update pelayanan surat

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

NO Issues

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,69 +413,208 @@ 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>
          {
-            (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>} />
+            sukses ?
+               <SuccessPengajuan
+                  noPengajuan={noPengajuan}
+                  onClose={() => {
+                     navigate("/darmasaba/update-data-surat");
+                  }}
+                  category="update"
+               />
+               :
+               <>
+                  {
+                     (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={() => { onChecking() }}>Kirim</Button>
+                  </Group>
+               </>
          }
-         <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>
       </>
    )
 }