Merge pull request 'nico/23-feb-26/dark-mode-implementation' (#67) from nico/23-feb-26/dark-mode-implementation into nico/fix-page

Reviewed-on: #67

.gitignore

@@ -31,6 +31,9 @@ yarn-error.log*
 # env 
 .env*
 
+# QC
+QC
+
 # vercel
 .vercel
 

package.json

@@ -62,6 +62,7 @@
     "colors": "^1.4.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "dompurify": "^3.3.1",
     "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
     "embla-carousel": "^8.6.0",
@@ -112,6 +113,7 @@
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/cli-progress": "^3.11.6",
+    "@types/dompurify": "^3.2.0",
     "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^20",
     "@types/react": "^19",

prisma/seed.ts

@@ -69,8 +69,8 @@ import { seedProfilPpd } from "./_seeder_list/ppid/profil-ppid/seed_profil_ppd";
 
 (async () => {
   // Always run seedAssets to handle new images without duplication
-  console.log("📂 Checking for new assets to seed...");
-  await seedAssets();
+  // console.log("📂 Checking for new assets to seed...");
+  // await seedAssets();
 
   // // =========== FILE STORAGE ===========
 

src/app/admin/(dashboard)/_state/landing-page/apbdes.ts

@@ -38,11 +38,9 @@ function normalizeItem(item: Partial<z.infer<typeof ApbdesItemSchema>>): z.infer
   const anggaran = item.anggaran ?? 0;
   const realisasi = item.realisasi ?? 0;
 
-  
 
-  
   // ✅ Formula yang benar
-  const selisih = anggaran - realisasi; // positif = sisa anggaran, negatif = over budget
+  const selisih = realisasi - anggaran; // positif = sisa anggaran, negatif = over budget
   const persentase = anggaran > 0 ? (realisasi / anggaran) * 100 : 0; // persentase realisasi terhadap anggaran
 
   return {

src/app/admin/(dashboard)/_state/landing-page/profile.ts

@@ -55,10 +55,15 @@ const programInovasi = proxy({
           programInovasi.findMany.load();
           return toast.success("Sukses menambahkan");
         }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
         return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Create error:", error);
+        }
+        toast.error("Gagal menambahkan data");
       } finally {
         programInovasi.create.loading = false;
       }
@@ -91,13 +96,17 @@ const programInovasi = proxy({
           programInovasi.findMany.total = res.data.total || 0;
           programInovasi.findMany.totalPages = res.data.totalPages || 1;
         } else {
-          console.error("Failed to load pegawai:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load pegawai:", res.data?.message);
+          }
           programInovasi.findMany.data = [];
           programInovasi.findMany.total = 0;
           programInovasi.findMany.totalPages = 1;
         }
       } catch (error) {
-        console.error("Error loading pegawai:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading pegawai:", error);
+        }
         programInovasi.findMany.data = [];
         programInovasi.findMany.total = 0;
         programInovasi.findMany.totalPages = 1;
@@ -112,19 +121,25 @@ const programInovasi = proxy({
         image: true;
       };
     }> | null,
+    loading: false,
     async load(id: string) {
       try {
-        const res = await fetch(`/api/landingpage/programinovasi/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          programInovasi.findUnique.data = data.data ?? null;
+        programInovasi.findUnique.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();
+        if (res.data?.success) {
+          programInovasi.findUnique.data = res.data.data ?? null;
+          return res.data.data;
         } else {
-          console.error("Failed to fetch program inovasi:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data program inovasi");
           programInovasi.findUnique.data = null;
+          return null;
         }
       } catch (error) {
         console.error("Error fetching program inovasi:", error);
         programInovasi.findUnique.data = null;
+        return null;
+      } finally {
+        programInovasi.findUnique.loading = false;
       }
     },
   },
@@ -135,27 +150,18 @@ const programInovasi = proxy({
 
       try {
         programInovasi.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)["del"][id].delete();
 
-        const response = await fetch(
-          `/api/landingpage/programinovasi/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Program inovasi berhasil dihapus");
-          await programInovasi.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Program inovasi berhasil dihapus");
+          await programInovasi.findMany.load();
         } else {
-          toast.error(result?.message || "Gagal menghapus program inovasi");
+          toast.error(res.data?.message || "Gagal menghapus program inovasi");
         }
       } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
         toast.error("Terjadi kesalahan saat menghapus program inovasi");
       } finally {
         programInovasi.delete.loading = false;
@@ -174,20 +180,11 @@ const programInovasi = proxy({
       }
 
       try {
-        const response = await fetch(`/api/landingpage/programinovasi/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[id].get();
 
-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
           this.id = data.id;
           this.form = {
             name: data.name,
@@ -197,13 +194,15 @@ const programInovasi = proxy({
           };
           return data;
         } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data program inovasi"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data program inovasi");
+          return null;
         }
       } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading program inovasi:", error);
+        }
         toast.error("Terjadi kesalahan saat mengambil data program inovasi");
+        return null;
       } finally {
         programInovasi.update.loading = false;
       }
@@ -221,41 +220,25 @@ const programInovasi = proxy({
 
       try {
         programInovasi.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.programinovasi as any)[this.id].put({
+          name: this.form.name,
+          description: this.form.description,
+          imageId: this.form.imageId,
+          link: this.form.link,
+        });
 
-        const response = await fetch(
-          `/api/landingpage/programinovasi/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              description: this.form.description,
-              imageId: this.form.imageId,
-              link: this.form.link,
-            }),
-          }
-        );
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(
-            errorData.message || `HTTP error! status: ${response.status}`
-          );
-        }
-
-        const result = await response.json();
-
-        if (result.success) {
+        if (res.data?.success) {
           toast.success("Berhasil update program inovasi");
-          await programInovasi.findMany.load(); // refresh list
+          await programInovasi.findMany.load();
           return true;
         } else {
-          throw new Error(result.message || "Gagal update program inovasi");
+          toast.error(res.data?.message || "Gagal update program inovasi");
+          return false;
         }
       } catch (error) {
-        console.error("Error updating program inovasi:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating program inovasi:", error);
+        }
         toast.error(
           error instanceof Error
             ? error.message
@@ -443,7 +426,7 @@ const pejabatDesa = proxy({
 const templateMediaSosial = z.object({
   name: z.string().min(3, "Nama minimal 3 karakter"),
   imageId: z.string().nullable().optional(),
-  iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
+  iconUrl: z.string().optional(), // ✅ Optional - tidak selalu required
   icon: z.string().nullable().optional(),
 });
 
@@ -484,10 +467,15 @@ const mediaSosial = proxy({
           mediaSosial.findMany.load();
           return toast.success("Sukses menambahkan");
         }
-        console.log(res);
+        if (process.env.NODE_ENV === 'development') {
+          console.log(res);
+        }
         return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.log((error as Error).message);
+        }
+        toast.error("Gagal menambahkan data");
       } finally {
         mediaSosial.create.loading = false;
       }
@@ -518,13 +506,17 @@ const mediaSosial = proxy({
           mediaSosial.findMany.total = res.data.total || 0;
           mediaSosial.findMany.totalPages = res.data.totalPages || 1;
         } else {
-          console.error("Failed to load media sosial:", res.data?.message);
+          if (process.env.NODE_ENV === 'development') {
+            console.error("Failed to load media sosial:", res.data?.message);
+          }
           mediaSosial.findMany.data = [];
           mediaSosial.findMany.total = 0;
           mediaSosial.findMany.totalPages = 1;
         }
       } catch (error) {
-        console.error("Error loading media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
         mediaSosial.findMany.data = [];
         mediaSosial.findMany.total = 0;
         mediaSosial.findMany.totalPages = 1;
@@ -539,25 +531,32 @@ const mediaSosial = proxy({
         image: true;
       };
     }> | null,
+    loading: false,
     async load(id: string) {
       if (!id) {
         toast.warn("ID tidak valid");
         return null;
       }
 
-      mediaSosial.update.loading = true;
+      mediaSosial.findUnique.loading = true;
       try {
-        const res = await fetch(`/api/landingpage/mediasosial/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          mediaSosial.findUnique.data = data.data ?? null;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();
+        if (res.data?.success) {
+          mediaSosial.findUnique.data = res.data.data ?? null;
+          return res.data.data;
         } else {
-          console.error("Failed to fetch media sosial:", res.statusText);
+          toast.error(res.data?.message || "Gagal memuat data media sosial");
           mediaSosial.findUnique.data = null;
+          return null;
         }
       } catch (error) {
-        console.error("Error fetching media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error fetching media sosial:", error);
+        }
         mediaSosial.findUnique.data = null;
+        return null;
+      } finally {
+        mediaSosial.findUnique.loading = false;
       }
     },
   },
@@ -568,24 +567,18 @@ const mediaSosial = proxy({
 
       try {
         mediaSosial.delete.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)["del"][id].delete();
 
-        const response = await fetch(`/api/landingpage/mediasosial/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Media Sosial berhasil dihapus");
-          await mediaSosial.findMany.load(); // refresh list
+        if (res.data?.success) {
+          toast.success(res.data.message || "Media Sosial berhasil dihapus");
+          await mediaSosial.findMany.load();
         } else {
-          toast.error(result?.message || "Gagal menghapus media sosial");
+          toast.error(res.data?.message || "Gagal menghapus media sosial");
         }
       } catch (error) {
-        console.error("Gagal delete:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Gagal delete:", error);
+        }
         toast.error("Terjadi kesalahan saat menghapus media sosial");
       } finally {
         mediaSosial.delete.loading = false;
@@ -603,43 +596,32 @@ const mediaSosial = proxy({
         return null;
       }
 
-      mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
-
+      mediaSosial.update.loading = true;
       try {
-        const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[id].get();
 
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const result = await response.json();
-
-        if (result?.success) {
-          const data = result.data;
+        if (res.data?.success) {
+          const data = res.data.data;
           this.id = data.id;
           this.form = {
             name: data.name || "",
             imageId: data.imageId || null,
             iconUrl: data.iconUrl || "",
             icon: data.icon || null,
-            
           };
           return data;
         } else {
-          throw new Error(
-            result?.message || "Gagal mengambil data media sosial"
-          );
+          toast.error(res.data?.message || "Gagal mengambil data media sosial");
+          return null;
         }
       } catch (error) {
-        console.error((error as Error).message);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error loading media sosial:", error);
+        }
         toast.error("Terjadi kesalahan saat mengambil data media sosial");
+        return null;
       } finally {
-        mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
+        mediaSosial.update.loading = false;
       }
     },
 
@@ -655,41 +637,25 @@ const mediaSosial = proxy({
 
       try {
         mediaSosial.update.loading = true;
+        const res = await (ApiFetch.api.landingpage.mediasosial as any)[this.id].put({
+          name: this.form.name,
+          imageId: this.form.imageId,
+          iconUrl: this.form.iconUrl,
+          icon: this.form.icon,
+        });
 
-        const response = await fetch(
-          `/api/landingpage/mediasosial/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-              imageId: this.form.imageId,
-              iconUrl: this.form.iconUrl,
-              icon: this.form.icon,
-            }),
-          }
-        );
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(
-            errorData.message || `HTTP error! status: ${response.status}`
-          );
-        }
-
-        const result = await response.json();
-
-        if (result.success) {
+        if (res.data?.success) {
           toast.success("Berhasil update media sosial");
-          await mediaSosial.findMany.load(); // refresh list
+          await mediaSosial.findMany.load();
           return true;
         } else {
-          throw new Error(result.message || "Gagal update media sosial");
+          toast.error(res.data?.message || "Gagal update media sosial");
+          return false;
         }
       } catch (error) {
-        console.error("Error updating media sosial:", error);
+        if (process.env.NODE_ENV === 'development') {
+          console.error("Error updating media sosial:", error);
+        }
         toast.error(
           error instanceof Error
             ? error.message

src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx

@@ -53,7 +53,7 @@ function EditAPBDes() {
   const params = useParams();
 
   const [isSubmitting, setIsSubmitting] = useState(false);
-  
+
   // Check if form is valid
   const isFormValid = () => {
     return (
@@ -76,33 +76,62 @@ function EditAPBDes() {
     tipe: 'pendapatan',
   });
 
-  // Type for the API response
-  interface APBDesResponse {
-    id: string;
-    image?: {
-      link: string;
-      id: string;
-    };
-    file?: {
-      link: string;
-      id: string;
-    };
-    // Add other properties as needed
-  }
+  // Simpan data original untuk reset form
+  const [originalData, setOriginalData] = useState({
+    tahun: 0,
+    imageId: '',
+    fileId: '',
+    imageUrl: '',
+    fileUrl: '',
+  });
 
   // Load data saat pertama kali
   useEffect(() => {
     const id = params?.id as string;
-    if (id) {
-      apbdesState.edit.load(id).then((response) => {
-        const data = response as unknown as APBDesResponse;
-        if (data) {
-          // ✅ Ambil link langsung dari response
-          setPreviewImage(data.image?.link || null);
-          setPreviewDoc(data.file?.link || null);
-        }
-      });
-    }
+    if (!id) return;
+
+    const loadData = async () => {
+      try {
+        const data = await apbdesState.edit.load(id);
+
+        if (!data) return;
+
+        // Set preview dari data lama
+        setPreviewImage(data.image?.link || null);
+        setPreviewDoc(data.file?.link || null);
+
+        // Simpan data original untuk reset
+        setOriginalData({
+          tahun: data.tahun || new Date().getFullYear(),
+          imageId: data.imageId || '',
+          fileId: data.fileId || '',
+          imageUrl: data.image?.link || '',
+          fileUrl: data.file?.link || '',
+        });
+
+        // Set form dengan data lama (termasuk imageId dan fileId)
+        apbdesState.edit.form = {
+          tahun: data.tahun || new Date().getFullYear(),
+          imageId: data.imageId || '',
+          fileId: data.fileId || '',
+          items: (data.items || []).map((item: any) => ({
+            kode: item.kode,
+            uraian: item.uraian,
+            anggaran: item.anggaran,
+            realisasi: item.realisasi,
+            selisih: item.selisih,
+            persentase: item.persentase,
+            level: item.level,
+            tipe: item.tipe || 'pendapatan',
+          })),
+        };
+      } catch (error) {
+        console.error('Error loading APBDes:', error);
+        toast.error('Gagal memuat data APBDes');
+      }
+    };
+
+    loadData();
   }, [params?.id]);
 
   const handleDrop = (fileType: 'image' | 'doc') => (files: File[]) => {
@@ -162,23 +191,38 @@ function EditAPBDes() {
     try {
       setIsSubmitting(true);
 
-      // Upload file baru jika ada
+      // Upload file baru jika ada perubahan
       if (imageFile) {
+        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: imageFile,
           name: imageFile.name,
         });
         const imageId = res.data?.data?.id;
-        if (imageId) apbdesState.edit.form.imageId = imageId;
+        if (imageId) {
+          apbdesState.edit.form.imageId = imageId;
+        }
       }
 
       if (docFile) {
+        // Hapus file lama dari form jika ada file baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: docFile,
           name: docFile.name,
         });
         const fileId = res.data?.data?.id;
-        if (fileId) apbdesState.edit.form.fileId = fileId;
+        if (fileId) {
+          apbdesState.edit.form.fileId = fileId;
+        }
+      }
+
+      // Jika tidak ada file baru, gunakan ID lama (sudah ada di form)
+      // Pastikan imageId dan fileId tetap ada
+      if (!apbdesState.edit.form.imageId) {
+        return toast.warn('Gambar wajib diunggah');
+      }
+      if (!apbdesState.edit.form.fileId) {
+        return toast.warn('Dokumen wajib diunggah');
       }
 
       const success = await apbdesState.edit.update();
@@ -194,21 +238,33 @@ function EditAPBDes() {
   };
 
   const handleReset = () => {
-    const id = params?.id as string;
-    if (id) {
-      apbdesState.edit.load(id);
-      setImageFile(null);
-      setDocFile(null);
-      setNewItem({
-        kode: '',
-        uraian: '',
-        anggaran: 0,
-        realisasi: 0,
-        level: 1,
-        tipe: 'pendapatan',
-      });
-      toast.info('Form dikembalikan ke data awal');
-    }
+    // Reset ke data original (tahun, imageId, fileId)
+    apbdesState.edit.form = {
+      tahun: originalData.tahun,
+      imageId: originalData.imageId,
+      fileId: originalData.fileId,
+      items: [...apbdesState.edit.form.items], // keep existing items
+    };
+
+    // Reset preview ke data original
+    setPreviewImage(originalData.imageUrl || null);
+    setPreviewDoc(originalData.fileUrl || null);
+    
+    // Reset file uploads
+    setImageFile(null);
+    setDocFile(null);
+    
+    // Reset new item form
+    setNewItem({
+      kode: '',
+      uraian: '',
+      anggaran: 0,
+      realisasi: 0,
+      level: 1,
+      tipe: 'pendapatan',
+    });
+    
+    toast.info('Form dikembalikan ke data awal');
   };
 
   return (

src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/page.tsx

@@ -8,6 +8,7 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';
 
 function DetailProgramInovasi() {
   const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
@@ -85,7 +86,7 @@ function DetailProgramInovasi() {
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
                <Box pl={5}>
-                 <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.description || '-' }}></Text>
+                 <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data.description || '-') }}></Text>
                </Box>
               </Box>
 

src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx

@@ -6,6 +6,7 @@ import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import DOMPurify from 'dompurify';
 import HeaderSearch from '../../../_com/header';
 import profileLandingPageState from '../../../_state/landing-page/profile';
 
@@ -90,7 +91,7 @@ function ListProgramInovasi({ search }: { search: string }) {
                       <Text fw={500}>{item.name}</Text>
                     </TableTd>
                     <TableTd style={{ maxWidth: 250 }}>
-                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
+                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description || '-') }}></Text>
                     </TableTd>
                     <TableTd style={{ maxWidth: 250 }}>
                       <Tooltip label="Buka tautan program" position="top" withArrow>
@@ -144,7 +145,7 @@ function ListProgramInovasi({ search }: { search: string }) {
                   {/* Description */}
                   <Box>
                     <Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
-                    <Text dangerouslySetInnerHTML={{ __html: item.description || '-' }} fz="sm" c="gray.7" lineClamp={2} />
+                    <Text dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description || '-') }} fz="sm" c="gray.7" lineClamp={2} />
                   </Box>
 
                   {/* Link */}

src/app/admin/(dashboard)/ppid/daftar-informasi-publik/[id]/edit/page.tsx

@@ -82,17 +82,17 @@ function EditDaftarInformasiPublik() {
       await daftarInformasi.edit.update();
       router.push('/admin/ppid/daftar-informasi-publik');
     } catch (error) {
-      console.error('Error updating berita:', error);
-      toast.error('Terjadi kesalahan saat memperbarui berita');
+      console.error('Error updating daftar informasi:', error);
+      toast.error('Terjadi kesalahan saat memperbarui daftar informasi');
     }
   };
 
   return (
-        <Box px={{ base: 0, md: 'lg' }} py="xs">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Daftar Informasi Publik
         </Title>

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
+import DOMPurify from 'dompurify';
 
 function Page() {
   const router = useRouter();
@@ -68,7 +69,7 @@ function Page() {
                   lh={{ base: 1.15, md: 1.1 }}
                   fw="bold"
                   c={colors['blue-button']}
-                  dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
+                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.judul) }}
                   style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
                 />
               </GridCol>
@@ -77,7 +78,7 @@ function Page() {
             <Divider my="xl" color={colors['blue-button']} />
 
             <Text
-              dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }}
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listDasarHukum.findById.data.content) }}
               style={{
                 wordBreak: 'break-word',
                 whiteSpace: 'normal',

src/app/admin/(dashboard)/ppid/profil-ppid/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
+import DOMPurify from 'dompurify';
 
 function Page() {
   const router = useRouter();
@@ -114,7 +115,7 @@ function Page() {
                   c={colors['blue-button']}
                   lh={1.5}
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                  dangerouslySetInnerHTML={{ __html: item.biodata }}
+                  dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.biodata) }}
                 />
               </Box>
 
@@ -129,7 +130,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.riwayat }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.riwayat) }}
                   />
                 </Box>
               </Box>
@@ -145,7 +146,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.pengalaman }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.pengalaman) }}
                   />
                 </Box>
               </Box>
@@ -161,7 +162,7 @@ function Page() {
                     c={colors['blue-button']}
                     lh={1.5}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-                    dangerouslySetInnerHTML={{ __html: item.unggulan }}
+                    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.unggulan) }}
                   />
                 </Box>
               </Box>

src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx

@@ -9,6 +9,7 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID';
+import DOMPurify from 'dompurify';
 
 function PosisiOrganisasiPPID() {
   const [search, setSearch] = useState("");
@@ -100,7 +101,7 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
                       <Text fz="md" fw={600} lh={1.5} truncate="end" lineClamp={1}>{item.nama}</Text>
                     </TableTd>
                     <TableTd w={200}>
-                      <Text fz="sm" lh={1.5} c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                      <Text fz="sm" lh={1.5} c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.deskripsi || '-') }} />
                     </TableTd>
                     <TableTd>
                       <Text fz="md" lh={1.5}>{item.hierarki || '-'}</Text>

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -6,6 +6,7 @@ import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import DOMPurify from 'dompurify'
 
 function VisiMisiPPIDList() {
   const router = useRouter();
@@ -96,7 +97,7 @@ function VisiMisiPPIDList() {
               </Title>
               <Text
                 ta={{ base: "center", md: "justify" }}
-                dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.visi) }}
                 style={{
                   wordBreak: 'break-word',
                   whiteSpace: 'normal',
@@ -121,7 +122,7 @@ function VisiMisiPPIDList() {
               </Title>
               <Text
                 ta={"justify"}
-                dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }}
+                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(listVisiMisi.findById.data.misi) }}
                 style={{
                   wordBreak: 'break-word',
                   whiteSpace: 'normal',