QC User & Admin Responsive : Menu Landing Page - Desa

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

@@ -388,16 +388,15 @@ const pejabatDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
+        // Ensure ID is properly encoded in the URL
-          `/api/landingpage/pejabatdesa/${this.id}`,
+        const url = new URL(`/api/landingpage/pejabatdesa/${encodeURIComponent(this.id)}`, window.location.origin);
-          {
+        const response = await fetch(url.toString(), {
-            method: "PUT",
+          method: "PUT",
-            headers: {
+          headers: {
-              "Content-Type": "application/json",
+            "Content-Type": "application/json",
-            },
+          },
-            body: JSON.stringify(this.form),
+          body: JSON.stringify(this.form),
-          }
+        });
-        );
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));

src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts

@@ -112,7 +112,32 @@ const statepermohonanInformasiPublik = proxy({
                 statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
             }
         }
-    }
+    },
+    findUnique: {
+        data: null as Prisma.PermohonanInformasiPublikGetPayload<{
+          include: {
+            jenisInformasiDiminta: true,
+            caraMemperolehInformasi: true,
+            caraMemperolehSalinanInformasi: true,
+          };
+        }> | null,
+        async load(id: string) {
+          try {
+            const res = await fetch(`/api/ppid/permohonaninformasipublik/${id}`);
+            if (res.ok) {
+              const data = await res.json();
+              statepermohonanInformasiPublik.findUnique.data = data.data ?? null;
+            } else {
+              console.error("Failed to fetch program inovasi:", res.statusText);
+              statepermohonanInformasiPublik.findUnique.data = null;
+            }
+          } catch (error) {
+            console.error("Error fetching program inovasi:", error);
+            statepermohonanInformasiPublik.findUnique.data = null;
+          }
+        },
+      },
+    
 })
 
 const statepermohonanInformasiPublikForm = proxy({

src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts

@@ -57,7 +57,29 @@ const permohonanKeberatanInformasi = proxy({
                 permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
             }
         }
-    }
+    },
+    findUnique: {
+        data: null as Prisma.FormulirPermohonanKeberatanGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }> | null,
+        async load(id: string) {
+          try {
+            const res = await fetch(`/api/ppid/permohonankeberataninformasipublik/${id}`);
+            if (res.ok) {
+              const data = await res.json();
+              permohonanKeberatanInformasi.findUnique.data = data.data ?? null;
+            } else {
+              console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
+              permohonanKeberatanInformasi.findUnique.data = null;
+            }
+          } catch (error) {
+            console.error("Error fetching permohonan keberatan informasi:", error);
+            permohonanKeberatanInformasi.findUnique.data = null;
+          }
+        },
+      }
 });
 
 export default permohonanKeberatanInformasi;

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -381,7 +381,44 @@ const posisiOrganisasi = proxy({
       }
     },
   },
+  findManyAll: {
+    data: [] as Array<{
+      id: string;
+      nama: string;
+      deskripsi: string | null;
+      hierarki: number;
+    }>,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      // Change to arrow function
+      posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
+      posisiOrganisasi.findManyAll.search = search;
+      try {
+        const query: any = { search };
+        if (search) query.search = search;
 
+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
+          "find-many-all"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          posisiOrganisasi.findManyAll.data = res.data.data || [];
+
+        } else {
+          console.error("Failed to load posisiOrganisasi:", res.data?.message);
+          posisiOrganisasi.findManyAll.data = [];
+        }
+      } catch (error) {
+        console.error("Error loading posisiOrganisasi:", error);
+        posisiOrganisasi.findManyAll.data = [];
+      } finally {
+        posisiOrganisasi.findManyAll.loading = false;
+      }
+    },
+  },
   delete: {
     loading: false,
     async byId(id: string) {
@@ -571,6 +608,31 @@ const pegawai = proxy({
     },
   },
 
+  nonActive: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.nonActive.loading = true;
+        const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
+          method: "DELETE", // biasanya nonActive pakai PATCH
+        });
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
+          await pegawai.findMany.load(); // refresh data
+        } else {
+          toast.error(json.message ?? "Gagal menonaktifkan pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal nonActive:", error);
+        toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
+      } finally {
+        pegawai.nonActive.loading = false;
+      }
+    },
+  },
+
   edit: {
     id: "",
     form: { ...pegawaiDefaultForm },

src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx

@@ -166,13 +166,18 @@ function EditBerita() {
             error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold">
-            placeholder="Masukkan deskripsi singkat"
+              Deskripsi Singkat
-            value={formData.deskripsi}
+            </Text>
-            onChange={(e) => handleChange("deskripsi", e.target.value)}
+            <EditEditor
-            required
+              value={formData.deskripsi}
-          />
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
+            />
+          </Box>
+
 
           {/* Upload Gambar */}
           <Box>

src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx

@@ -80,7 +80,7 @@ function DetailBerita() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
               </Box>
 
               <Box>

src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx

@@ -131,13 +131,17 @@ export default function CreateBerita() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            required
+              Deskripsi Singkat
-            placeholder="Masukkan deskripsi berita"
+            </Text>
-            defaultValue={beritaState.berita.create.form.deskripsi}
+            <CreateEditor
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
+              value={beritaState.berita.create.form.deskripsi}
-          />
+              onChange={(htmlContent) => {
+                beritaState.berita.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           <Box>
             <Text fw="bold" fz="sm" mb={6}>

src/app/admin/(dashboard)/desa/gallery/lib/youtube-utils.ts

@@ -1,31 +1,11 @@
+// export function convertYoutubeUrlToEmbed(url: string) {
+//   const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+//   return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
+// }
+
 export function convertYoutubeUrlToEmbed(url: string) {
-  const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  const videoIdMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
   return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
-}
+}
-
-
-
-
-
-
-
-
-
-// (url: string): string | null {
-//     const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
-//     const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
-  
-//     const matchWatch = url.match(watchRegex);
-//     const matchShort = url.match(shortRegex);
-  
-//     if (matchWatch) {
-//       return `https://www.youtube.com/embed/${matchWatch[1]}`;
-//     }
-  
-//     if (matchShort) {
-//       return `https://www.youtube.com/embed/${matchShort[1]}`;
-//     }
-  
-//     return null;
-//   }
-  

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx

@@ -44,32 +44,40 @@ function EditSuratKeterangan() {
   const [previewImage2, setPreviewImage2] = useState<string | null>(null);
 
   // load data awal
-  useEffect(() => {
+useEffect(() => {
-    const loadSurat = async () => {
+  const loadSurat = async () => {
-      const id = params?.id as string;
+    const id = params?.id as string;
-      if (!id) return;
+    if (!id) return;
 
-      try {
+    try {
-        const data = await stateSurat.edit.load(id);
+      const data = await stateSurat.edit.load(id);
-        if (data) {
+      if (data) {
-          setFormData({
+        // merge style -> isi hanya field kosong
-            name: data.name || '',
+        setFormData((prev) => ({
-            deskripsi: data.deskripsi || '',
+          ...prev,
-            imageId: data.imageId || '',
+          name: prev.name || data.name || '',
-            image2Id: data.image2Id || '',
+          deskripsi: prev.deskripsi || data.deskripsi || '',
-          });
+          imageId: prev.imageId || data.imageId || '',
+          image2Id: prev.image2Id || data.image2Id || '',
+        }));
 
-          setPreviewImage(data.image?.link || null);
+        if (data.image?.link && !previewImage) {
-          setPreviewImage2(data.image2?.link || null);
+          setPreviewImage(data.image.link);
+        }
+        if (data.image2?.link && !previewImage2) {
+          setPreviewImage2(data.image2.link);
         }
-      } catch (error) {
-        console.error('Error loading surat:', error);
-        toast.error('Gagal memuat data surat');
       }
-    };
+    } catch (error) {
+      console.error("Error loading surat:", error);
+      toast.error("Gagal memuat data surat");
+    }
+  };
+
+  loadSurat();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [params?.id]);
 
-    loadSurat();
-  }, [params?.id, stateSurat.edit]);
 
   // handler untuk submit
   const handleSubmit = useCallback(async () => {

src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/edit/page.tsx

@@ -47,11 +47,11 @@ function EditPotensi() {
 
   useEffect(() => {
     potensiDesaState.kategoriPotensi.findMany.load();
-
+  
     const loadPotensi = async () => {
       const id = params?.id as string;
       if (!id) return;
-
+  
       try {
         const data = await potensiState.edit.load(id);
         if (data) {
@@ -62,7 +62,17 @@ function EditPotensi() {
             content: data.content || "",
             imageId: data.imageId || "",
           });
-
+          
+          // // merge, bukan replace
+          // setFormData((prev) => ({
+          //   ...prev,
+          //   name: data.name ?? prev.name,
+          //   deskripsi: data.deskripsi ?? prev.deskripsi,
+          //   kategoriId: data.kategoriId ?? prev.kategoriId,
+          //   content: data.content ?? prev.content,
+          //   imageId: data.imageId ?? prev.imageId,
+          // }));
+  
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -72,9 +82,10 @@ function EditPotensi() {
         toast.error("Gagal memuat data potensi");
       }
     };
-
+  
     loadPotensi();
   }, [params?.id]);
+  
 
   const handleSubmit = async () => {
     try {
@@ -143,13 +154,17 @@ function EditPotensi() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            placeholder="Masukkan deskripsi"
+              Deskripsi Singkat
-            value={formData.deskripsi}
+            </Text>
-            onChange={(e) => handleChange("deskripsi", e.target.value)}
+            <EditEditor
-            required
+              value={formData.deskripsi}
-          />
+              onChange={(htmlContent) =>
+                handleChange("deskripsi", htmlContent)
+              }
+            />
+          </Box>
 
           <Select
             value={formData.kategoriId}

src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx

@@ -25,7 +25,7 @@ export default function DetailPotensi() {
       potensiState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/desa/potensi");
+      router.push("/admin/desa/potensi/list-potensi");
     }
   };
 
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
               </Box>
 
               <Box>

src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx

@@ -101,13 +101,17 @@ function CreatePotensi() {
           />
 
           {/* Deskripsi */}
-          <TextInput
+          <Box>
-            defaultValue={potensiState.create.form.deskripsi}
+            <Text fz="sm" fw="bold" mb={6}>
-            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
+              Deskripsi Singkat
-            label="Deskripsi"
+            </Text>
-            placeholder="Masukkan deskripsi singkat"
+            <CreateEditor
-            required
+              value={potensiState.create.form.deskripsi}
-          />
+              onChange={(htmlContent) => {
+                potensiState.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           {/* Kategori */}
           <Select

src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx

@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Box w={200}>
-                        {item.name}
+                        <Text fw={500} truncate="end" lineClamp={1}>
-                      </Text>
+                          {item.name}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
+                      <Box w={200}>
+                        <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Box w={300}>
                         <Text
+                          lineClamp={1}
                           truncate
                           fz="sm"
                           dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                          style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                         />
                       </Box>
                     </TableTd>

src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/maskot_desa/page.tsx

@@ -18,7 +18,9 @@ function Page() {
   const router = useRouter();
   const params = useParams();
 
-  const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
+  const [images, setImages] = useState<
+  Array<{ file: File | null; preview: string; label: string; imageId?: string }>
+>([]);
   const [formData, setFormData] = useState({
     judul: '',
     deskripsi: '',
@@ -55,6 +57,7 @@ function Page() {
               file: null,
               preview: img.image.link,
               label: img.label,
+              imageId: img.image.id, // simpan id lama
             })));
           }
         }
@@ -88,25 +91,24 @@ function Page() {
       // Upload semua gambar baru
       for (const img of images) {
         if (!img.file) {
-          // Kalau gambar lama, skip upload
+          if (!img.imageId) continue; // kalau benar2 kosong, skip
-          if (!img.preview) continue;
+          uploadedImages.push({ imageId: img.imageId, label: img.label });
-          uploadedImages.push({ imageId: '', label: img.label });
           continue;
         }
-
+      
+        // upload baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: img.file,
           name: img.file.name,
         });
-
         const uploaded = res.data?.data;
         if (!uploaded?.id) {
           toast.error("Gagal upload salah satu gambar");
           return;
         }
-
+        uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
-        uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
       }
+      
 
       // Update ke global state
       maskotState.update.updateField("judul", formData.judul);

src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx

@@ -162,7 +162,7 @@ function Page() {
                     style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
                   >
                     <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
-                      Lambang Desa
+                      {lambang.judul}
                     </Text>
                   </Paper>
                 </Stack>
@@ -216,7 +216,7 @@ function Page() {
                 <Divider my="md" color={colors['blue-button']} />
                 <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
                 <Stack mt="md" gap="sm">
-                  <SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
+                  <SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
                     {maskot.images.map((img, idx) => (
                       <Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
                         <Center>

src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx

@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} lineClamp={1}>{item.nama}</Text>
+                      <Box w={200}>
+                        <Text fw={500} lineClamp={1}>{item.nama}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text lineClamp={1}>{item.periode}</Text>
+                      <Box w={200}>
+                        <Text lineClamp={1}>{item.periode}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Button
+                      <Box w={200}>
-                        size="xs"
+                        <Button
-                        radius="md"
+                          size="xs"
-                        variant="light"
+                          radius="md"
-                        color="blue"
+                          variant="light"
-                        leftSection={<IconDeviceImacCog size={16} />}
+                          color="blue"
-                        onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
+                          leftSection={<IconDeviceImacCog size={16} />}
-                      >
+                          onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
-                        Detail
+                        >
-                      </Button>
+                          Detail
+                        </Button>
+                      </Box>
                     </TableTd>
                   </TableTr>
                 ))

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/[id]/page.tsx

@@ -26,7 +26,7 @@ export default function DetailResponden() {
       stateDetail.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/ppid/ikm-desa-darmasaba/responden")
+      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/responden")
     }
   }
 

src/app/admin/(dashboard)/landing-page/prestasi-desa/_lib/layoutTabs.tsx

@@ -2,7 +2,7 @@
 'use client'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconCategory, IconListDetails } from '@tabler/icons-react';
 import colors from '@/con/colors';
 
@@ -58,6 +58,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+        <ScrollArea type="auto" offsetScrollbars>
         <TabsList
           p="sm"
           style={{
@@ -82,6 +83,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
             </Tooltip>
           ))}
         </TabsList>
+        </ScrollArea>
 
         {tabs.map((tab, i) => (
           <TabsPanel

src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/create/page.tsx

@@ -170,12 +170,11 @@ function CreatePrestasiDesa() {
             required
           />
 
-          <Group justify="flex-end" mt="md">
+          <Group justify="space-between" mt="md">
             <Button
               variant="light"
               color="gray"
               onClick={() => router.back()}
-              style={{ marginRight: 'auto' }}
             >
               Batal
             </Button>

src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/[id]/page.tsx

@@ -46,12 +46,19 @@ function EditPejabatDesa() {
         const profileData = await profileLandingPageState.pejabatDesa.findUnique.load(id);
 
         if (profileData) {
+          // Initialize form data
           setFormData({
             name: profileData.name || '',
             position: profileData.position || '',
             imageId: profileData.imageId || null,
           });
 
+          // Initialize edit state with profile data
+          profileLandingPageState.pejabatDesa.edit.initialize({
+            ...profileData,
+            imageId: profileData.imageId || ''
+          });
+
           if (profileData.image?.link) {
             setPreviewImage(profileData.image.link);
           }
@@ -110,7 +117,14 @@ function EditPejabatDesa() {
         imageId = uploaded.id;
       }
 
-      // Update global state only on submit
+      // Ensure we have the ID from the URL
+      const id = params?.id as string;
+      if (!id) {
+        throw new Error("ID tidak ditemukan");
+      }
+
+      // Update global state with the ID and form data
+      profileLandingPageState.pejabatDesa.edit.id = id;
       profileLandingPageState.pejabatDesa.edit.form = {
         ...formData,
         imageId: imageId || '', // Ensure imageId is always a string

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,8 +34,8 @@ function EditFasilitasYangDisediakan() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
 
-  const [judul, setJudul] = useState('');
+  // === State lokal form ===
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -44,16 +45,22 @@ function EditFasilitasYangDisediakan() {
     }
   }, []);
 
-  // Sinkronkan state dengan data yang sudah di-load
+  // Sinkronkan formData saat data load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,9 +68,13 @@ function EditFasilitasYangDisediakan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // Update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        const payload = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(payload);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
@@ -78,7 +89,6 @@ function EditFasilitasYangDisediakan() {
 
   const handleBack = () => router.back();
 
-  // Loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -123,9 +133,9 @@ function EditFasilitasYangDisediakan() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul fasilitas"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi */}
@@ -133,8 +143,8 @@ function EditFasilitasYangDisediakan() {
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -144,7 +154,7 @@ function EditFasilitasYangDisediakan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,27 +34,33 @@ function EditLokasiDanJadwal() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
 
-  const [judul, setJudul] = useState('');
+  // state lokal untuk form, tidak langsung merubah global state
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data sekali
+  // Load data sekali
   useShallowEffect(() => {
     if (!editState.findById.data) {
       editState.findById.initialize();
     }
   }, []);
 
-  // isi state ketika data loaded
+  // Isi state lokal setelah data global ter-load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,9 +68,13 @@ function EditLokasiDanJadwal() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        const updatedData = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
@@ -78,7 +89,6 @@ function EditLokasiDanJadwal() {
 
   const handleBack = () => router.back();
 
-  // loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -92,15 +102,10 @@ function EditLokasiDanJadwal() {
   return (
     <Box>
       <Stack gap="xs">
-        {/* Header dengan tombol kembali */}
+        {/* Header */}
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              variant="subtle"
-              onClick={handleBack}
-              p="xs"
-              radius="md"
-            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -125,9 +130,9 @@ function EditLokasiDanJadwal() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul lokasi/jadwal"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
@@ -135,8 +140,8 @@ function EditLokasiDanJadwal() {
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -146,7 +151,7 @@ function EditLokasiDanJadwal() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,26 +34,31 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
 
-  const [judul, setJudul] = useState('');
+  // gabung judul & content jadi formData
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data once
+  // load data sekali
   useShallowEffect(() => {
-    if (!editState.findById.data) {
+    if (!editState.findById.data) editState.findById.initialize();
-      editState.findById.initialize();
-    }
   }, []);
 
+  // sync data dari global state ke local formData sekali setelah load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -60,8 +66,9 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        editState.findById.data.judul = formData.judul;
+        editState.findById.data.deskripsi = formData.deskripsi;
         await editState.update.save(editState.findById.data);
 
         toast.success('Berhasil menyimpan perubahan');
@@ -117,18 +124,20 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
             <Box>
-              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                initialContent={formData.deskripsi}
-                initialContent={content}
+                onChange={(value) => handleChange('deskripsi', value)}
               />
             </Box>
 
@@ -138,7 +147,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -5,7 +5,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
 
@@ -15,23 +15,35 @@ export default function EditDataPendidikan() {
   const stateDPM = useProxy(dataPendidikan);
   const id = params.id;
 
+  // state lokal untuk form
+  const [formData, setFormData] = useState({
+    name: '',
+    jumlah: '',
+  });
+
   // Load data saat mount
   useEffect(() => {
     if (id) {
       stateDPM.findUnique.load(id).then(() => {
         const data = stateDPM.findUnique.data;
         if (data) {
-          stateDPM.update.form = {
+          setFormData({
             name: data.name || '',
             jumlah: data.jumlah || '',
-          };
+          });
         }
       });
     }
   }, [id]);
 
+  const handleChange = (field: 'name' | 'jumlah', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
+    // update global state hanya saat submit
     stateDPM.update.id = id;
+    stateDPM.update.form = { ...formData };
     await stateDPM.update.submit();
     router.push('/admin/pendidikan/data-pendidikan');
   };
@@ -59,8 +71,8 @@ export default function EditDataPendidikan() {
           <TextInput
             label="Nama Pendidikan"
             placeholder="Contoh: SD, SMP, SMA"
-            defaultValue={stateDPM.update.form.name}
+            value={formData.name}
-            onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
+            onChange={(e) => handleChange('name', e.currentTarget.value)}
             radius="md"
             required
           />
@@ -68,8 +80,8 @@ export default function EditDataPendidikan() {
             label="Jumlah Peserta"
             type="number"
             placeholder="Masukkan jumlah peserta"
-            defaultValue={stateDPM.update.form.jumlah}
+            value={formData.jumlah}
-            onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
+            onChange={(e) => handleChange('jumlah', e.currentTarget.value)}
             radius="md"
             required
           />

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -22,64 +23,62 @@ function EditJenjangPendidikan() {
   const router = useRouter();
   const params = useParams();
   const id = params?.id as string;
+
   const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({ nama: '' });
-    nama: "",
+  const [loading, setLoading] = useState(true);
-  });
 
+  // Load data sekali saat component mount
   useEffect(() => {
-    const loadJenjangPendidikan = async () => {
+    if (!id) return;
-      if (!id) return;
 
+    const loadJenjang = async () => {
       try {
         const data = await stateJenjang.edit.load(id);
-
         if (data) {
-          stateJenjang.edit.id = id;
+          stateJenjang.edit.id = id; // tetap simpan di global state
-          setFormData({
+          setFormData({ nama: data.nama || '' });
-            nama: data.nama || '',
-          });
         }
       } catch (error) {
-        console.error("Error loading jenjang pendidikan:", error);
+        console.error('Error loading jenjang pendidikan:', error);
-        toast.error("Gagal memuat data jenjang pendidikan");
+        toast.error('Gagal memuat data jenjang pendidikan');
+      } finally {
+        setLoading(false);
       }
     };
 
-    loadJenjangPendidikan();
+    loadJenjang();
   }, [id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
+    if (!formData.nama.trim()) {
+      toast.error('Nama jenjang pendidikan tidak boleh kosong');
+      return;
+    }
+
     try {
-      if (!formData.nama.trim()) {
+      stateJenjang.edit.form = { nama: formData.nama.trim() };
-        toast.error('Nama jenjang pendidikan tidak boleh kosong');
+      if (!stateJenjang.edit.id) stateJenjang.edit.id = id;
-        return;
-      }
-
-      stateJenjang.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
-      if (!stateJenjang.edit.id) {
-        stateJenjang.edit.id = id;
-      }
 
       const success = await stateJenjang.edit.update();
-
       if (success) {
-        toast.success("Jenjang pendidikan berhasil diperbarui!");
+        toast.success('Jenjang pendidikan berhasil diperbarui!');
-        router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
+        router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
       }
     } catch (error) {
-      console.error("Error updating jenjang pendidikan:", error);
+      console.error('Error updating jenjang pendidikan:', error);
-      toast.error("Terjadi kesalahan saat memperbarui jenjang pendidikan");
+      toast.error('Terjadi kesalahan saat memperbarui jenjang pendidikan');
     }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header Back + Title */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -91,7 +90,7 @@ function EditJenjangPendidikan() {
         </Title>
       </Group>
 
-      {/* Form Container */}
+      {/* Form */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -104,9 +103,10 @@ function EditJenjangPendidikan() {
           <TextInput
             label="Nama Jenjang Pendidikan"
             placeholder="Masukkan nama jenjang pendidikan"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
+            disabled={loading}
           />
 
           <Group justify="right">

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx

@@ -31,6 +31,7 @@ export default function EditLembaga() {
     jenjangId: '',
   });
 
+  // Load jenjang pendidikan dan data lembaga
   useEffect(() => {
     infoSekolahPaud.jenjangPendidikan.findMany.load();
 
@@ -46,12 +47,17 @@ export default function EditLembaga() {
     }
   }, [id]);
 
+  const handleChange = (field: 'nama' | 'jenjangId', value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     if (!form.nama || !form.jenjangId) {
       toast.warn('Nama dan jenjang pendidikan harus diisi');
       return;
     }
 
+    // Update global state hanya saat submit
     state.edit.id = id;
     state.edit.form = form;
 
@@ -65,7 +71,7 @@ export default function EditLembaga() {
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan back button */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
@@ -82,7 +88,7 @@ export default function EditLembaga() {
         </Title>
       </Group>
 
-      {/* Card Form */}
+      {/* Form Card */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -95,8 +101,8 @@ export default function EditLembaga() {
           <TextInput
             label="Nama Lembaga"
             placeholder="Masukkan nama lembaga"
-            defaultValue={form.nama}
+            value={form.nama}
-            onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
+            onChange={(e) => handleChange('nama', e.currentTarget.value)}
             required
           />
 
@@ -111,7 +117,7 @@ export default function EditLembaga() {
               })) || []
             }
             value={form.jenjangId}
-            onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
+            onChange={(val) => handleChange('jenjangId', val || '')}
             required
           />
 

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -25,21 +26,22 @@ interface FormPengajar {
 }
 
 function EditPengajar() {
-  const pengajarState = useProxy(infoSekolahPaud.pengajar)
+  const pengajarState = useProxy(infoSekolahPaud.pengajar);
-  const params = useParams()
+  const params = useParams();
-  const router = useRouter()
+  const router = useRouter();
 
   const [formData, setFormData] = useState<FormPengajar>({
     nama: '',
     lembagaId: ''
-  })
+  });
 
   useEffect(() => {
-    const loadPengajar = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
+        infoSekolahPaud.lembagaPendidikan.findMany.load();
         const data = await pengajarState.edit.load(id);
         if (data) {
           setFormData({
@@ -47,30 +49,35 @@ function EditPengajar() {
             lembagaId: data.lembagaId || '',
           });
         }
-      } catch (error) {
+      } catch (err) {
-        console.error("Error loading pengajar:", error);
+        console.error(err);
         toast.error("Gagal memuat data pengajar");
       }
-    }
+    };
-    infoSekolahPaud.lembagaPendidikan.findMany.load()
+
-    loadPengajar();
+    loadData();
   }, [params?.id]);
 
+  const handleChange = (field: keyof FormPengajar, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // update global state hanya saat submit
       pengajarState.edit.form = {
         ...pengajarState.edit.form,
         nama: formData.nama.trim(),
-        lembagaId: formData.lembagaId.trim(),
+        lembagaId: formData.lembagaId.trim()
-      }
+      };
-      await pengajarState.edit.update()
+      await pengajarState.edit.update();
-      toast.success("Data pengajar berhasil diperbarui!")
+      toast.success("Data pengajar berhasil diperbarui!");
       router.push("/admin/pendidikan/info-sekolah/pengajar");
-    } catch (error) {
+    } catch (err) {
-      console.error("Error updating pengajar:", error);
+      console.error(err);
       toast.error("Terjadi kesalahan saat memperbarui pengajar");
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -99,8 +106,8 @@ function EditPengajar() {
           <TextInput
             label="Nama Pengajar"
             placeholder="Masukkan nama pengajar"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -112,7 +119,7 @@ function EditPengajar() {
               label: k.nama
             })) ?? []}
             value={formData.lembagaId}
-            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            onChange={(val) => handleChange('lembagaId', val ?? '')}
             required
           />
 

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -35,6 +36,7 @@ function EditSiswa() {
     lembagaId: '',
   });
 
+  // Load data siswa
   useEffect(() => {
     const loadSiswa = async () => {
       const id = params?.id as string;
@@ -53,10 +55,20 @@ function EditSiswa() {
         toast.error('Gagal memuat data siswa');
       }
     };
+
     infoSekolahPaud.lembagaPendidikan.findMany.load();
     loadSiswa();
   }, [params?.id]);
 
+  // Handler update local formData
+  const handleChange = (field: keyof FormSiswa, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  // Submit ke global state
   const handleSubmit = async () => {
     try {
       siswaState.edit.form = {
@@ -75,7 +87,7 @@ function EditSiswa() {
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan tombol kembali */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -87,7 +99,7 @@ function EditSiswa() {
         </Title>
       </Group>
 
-      {/* Card Form */}
+      {/* Form Card */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -100,8 +112,8 @@ function EditSiswa() {
           <TextInput
             label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
             placeholder="Masukkan nama siswa"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -115,7 +127,7 @@ function EditSiswa() {
               })) ?? []
             }
             value={formData.lembagaId}
-            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            onChange={(val) => handleChange('lembagaId', val ?? '')}
             required
           />
 

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -33,8 +33,7 @@ function EditJenisProgramYangDiselenggarakan() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
 
-  const [judul, setJudul] = useState('');
+  const [formData, setFormData] = useState({ judul: '', content: '' });
-  const [content, setContent] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -44,16 +43,22 @@ function EditJenisProgramYangDiselenggarakan() {
     }
   }, []);
 
-  // Sync state dengan data hasil fetch
+  // Sync state lokal dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        content: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'content', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,11 +66,15 @@ function EditJenisProgramYangDiselenggarakan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.content,
+        };
 
+        await editState.update.save(updatedData);
         toast.success('Berhasil menyimpan perubahan');
+
         router.push(
           '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
         );
@@ -117,17 +126,17 @@ function EditJenisProgramYangDiselenggarakan() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <JenisProgramYangDiselenggarakanTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value: string) => handleChange('content', value)}
-                initialContent={content}
+                initialContent={formData.content}
               />
             </Box>
 
@@ -136,7 +145,7 @@ function EditJenisProgramYangDiselenggarakan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
 import {
@@ -33,8 +34,11 @@ function EditTempatKegiatan() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
 
-  const [judul, setJudul] = useState('');
+  // state lokal form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({
+    judul: '',
+    deskripsi: '',
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // load data pertama kali
@@ -44,16 +48,22 @@ function EditTempatKegiatan() {
     }
   }, []);
 
-  // sync state dengan data hasil fetch
+  // sync state lokal ketika data fetch selesai
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,10 +71,13 @@ function EditTempatKegiatan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.deskripsi,
+        };
 
+        await editState.update.save(updatedData);
         toast.success('Berhasil menyimpan perubahan');
         router.push(
           '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
@@ -117,9 +130,9 @@ function EditTempatKegiatan() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul tempat kegiatan"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
@@ -128,8 +141,8 @@ function EditTempatKegiatan() {
               </Text>
               <TempatKegiatanTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -138,7 +151,7 @@ function EditTempatKegiatan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
 import {
@@ -30,41 +31,49 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
 
-  const [judul, setJudul] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
-  const [content, setContent] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data pertama kali
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
       editState.findById.initialize();
     }
   }, []);
 
-  // sync data hasil fetch ke local state
+  // Sync hasil fetch ke local state (sekali)
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
 
+    if (!editState.findById.data) return;
+
     setIsSubmitting(true);
     try {
-      if (editState.findById.data) {
+      const payload = {
-        editState.findById.data.judul = judul;
+        ...editState.findById.data,
-        editState.findById.data.deskripsi = content;
+        judul: formData.judul,
-        await editState.update.save(editState.findById.data);
+        deskripsi: formData.deskripsi
+      };
 
-        toast.success('Berhasil menyimpan perubahan');
+      await editState.update.save(payload);
-        router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
+      toast.success('Berhasil menyimpan perubahan');
-      }
+      router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
     } catch (err) {
       console.error('Error saving:', err);
       toast.error('Gagal menyimpan data');
@@ -88,16 +97,13 @@ function EditTujuanProgram() {
   return (
     <Box>
       <Stack gap="xs">
-        {/* Back Button + Title */}
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
             <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
               <IconArrowBack color={colors['blue-button']} size={22} />
             </Button>
           </Tooltip>
-          <Title order={4} ml="sm" c="dark">
+          <Title order={4} ml="sm" c="dark">Edit Tujuan Program</Title>
-            Edit Tujuan Program
-          </Title>
         </Group>
 
         <Paper
@@ -112,17 +118,17 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <PendidikanNonFormalTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -131,7 +137,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx

@@ -1,74 +1,86 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
 
 function EditPerpustakaanDigital() {
-  const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
   const router = useRouter();
   const params = useParams();
+  const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
+
+  const [formData, setFormData] = useState({
+    judul: '',
+    deskripsi: '',
+    kategoriId: '',
+    imageId: '',
+  });
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [formData, setFormData] = useState({
-    judul: editState.update.form.judul || "",
-    deskripsi: editState.update.form.deskripsi || "",
-    imageId: editState.update.form.imageId || "",
-    kategoriId: editState.update.form.kategoriId || "",
-  })
 
+  // Load kategori & data awal
   useEffect(() => {
     perpustakaanDigitalState.kategoriBuku.findMany.load();
-    const loadDataPerpustakaan = async () => {
+
-      const id = params?.id as string;
+    const loadData = async () => {
+      const id = Array.isArray(params?.id) ? params.id[0] : params?.id;
       if (!id) return;
 
       try {
         const data = await editState.update.load(id);
-        if (data) {
+        if (!data) return;
-          setFormData({
-            judul: data.judul || "",
-            deskripsi: data.deskripsi || "",
-            imageId: data.imageId || "",
-            kategoriId: data.kategoriId || "",
-          });
-          if (data.image?.link) setPreviewImage(data.image.link);
-        }
-      } catch (error) {
-        console.error("Error loading data perpustakaan:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal mengambil data perpustakaan");
-      }
-    }
 
-    loadDataPerpustakaan();
+        setFormData({
+          judul: data.judul || '',
+          deskripsi: data.deskripsi || '',
+          kategoriId: data.kategoriId || '',
+          imageId: data.imageId || '',
+        });
+
+        if (data.image?.link) setPreviewImage(data.image.link);
+      } catch (error) {
+        console.error(error);
+        toast.error(error instanceof Error ? error.message : 'Gagal memuat data perpustakaan');
+      }
+    };
+
+    loadData();
   }, [params?.id]);
 
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
-      editState.update.form = { ...editState.update.form, ...formData }
+      // Update global state hanya pas submit
+      editState.update.form = { ...editState.update.form, ...formData };
 
+      // Upload file jika ada
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-        if (!uploaded?.id) return toast.error("Gagal upload gambar");
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
         editState.update.form.imageId = uploaded.id;
       }
 
       await editState.update.update();
-      toast.success("Data perpustakaan berhasil diperbarui!");
+      toast.success('Data perpustakaan berhasil diperbarui!');
-      router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan");
+      router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan');
     } catch (error) {
-      console.error("Error updating data perpustakaan:", error);
+      console.error(error);
-      toast.error("Terjadi kesalahan saat memperbarui data perpustakaan");
+      toast.error('Terjadi kesalahan saat memperbarui data perpustakaan');
     }
   };
 
@@ -86,18 +98,26 @@ function EditPerpustakaanDigital() {
         </Title>
       </Group>
 
-      {/* Form Paper */}
+      <Paper
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
         <Stack gap="md">
           {/* Dropzone Image */}
           <Box>
-            <Text fw="bold" fz="sm" mb={6}>Gambar</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar
+            </Text>
             <Dropzone
               onDrop={(files) => {
-                const selectedFile = files[0];
+                const selected = files[0];
-                if (selectedFile) {
+                if (selected) {
-                  setFile(selectedFile);
+                  setFile(selected);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
+                  setPreviewImage(URL.createObjectURL(selected));
                 }
               }}
               onReject={() => toast.error('File tidak valid.')}
@@ -117,8 +137,12 @@ function EditPerpustakaanDigital() {
                   <IconPhoto size={48} color="#868e96" stroke={1.5} />
                 </Dropzone.Idle>
                 <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
+                  <Text size="md" fw={500}>
-                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
                 </Stack>
               </Group>
             </Dropzone>
@@ -140,28 +164,30 @@ function EditPerpustakaanDigital() {
           <TextInput
             label="Judul"
             placeholder="Masukkan judul"
-            defaultValue={formData.judul}
+            value={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            onChange={(e) => handleInputChange('judul', e.target.value)}
             required
           />
 
           {/* Deskripsi */}
           <Box>
-            <Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>
-            <EditEditor value={formData.deskripsi} onChange={(val) => setFormData({ ...formData, deskripsi: val })} />
+              Deskripsi
+            </Text>
+            <EditEditor value={formData.deskripsi} onChange={(val) => handleInputChange('deskripsi', val)} />
           </Box>
 
           {/* Kategori */}
           <Select
             value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
+            onChange={(val) => handleInputChange('kategoriId', val || '')}
             label="Kategori"
-            placeholder='Pilih kategori'
+            placeholder="Pilih kategori"
-            data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map(v => ({ value: v.id, label: v.name })) || []}
+            data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map((v) => ({ value: v.id, label: v.name })) || []}
             clearable
             searchable
             required
-            error={!formData.kategoriId ? "Pilih kategori" : undefined}
+            error={!formData.kategoriId ? 'Pilih kategori' : undefined}
           />
 
           {/* Submit Button */}

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
@@ -14,9 +15,8 @@ function EditKategoriBuku() {
   const router = useRouter();
   const params = useParams();
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({ name: '' });
-    name: editState.update.form.name || '',
+  const [loading, setLoading] = useState(true);
-  });
 
   useEffect(() => {
     const loadKategori = async () => {
@@ -26,21 +26,26 @@ function EditKategoriBuku() {
       try {
         const data = await editState.update.load(id);
         if (data) {
-          setFormData({
+          setFormData({ name: data.name || '' });
-            name: data.name || '',
-          });
         }
       } catch (error) {
         console.error('Error loading kategori buku:', error);
         toast.error('Gagal memuat data kategori buku');
+      } finally {
+        setLoading(false);
       }
     };
 
     loadKategori();
   }, [params?.id]);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({ ...prev, name: e.target.value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // Update global state hanya saat submit
       editState.update.form = { ...editState.update.form, name: formData.name };
       await editState.update.update();
       toast.success('Kategori Buku berhasil diperbarui!');
@@ -76,9 +81,10 @@ function EditKategoriBuku() {
           <TextInput
             label="Nama Kategori Buku"
             placeholder="Masukkan nama kategori buku"
-            defaultValue={formData.name}
+            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={handleChange}
             required
+            disabled={loading}
           />
 
           <Group justify="right">
@@ -91,6 +97,7 @@ function EditKategoriBuku() {
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
+              disabled={loading || !formData.name.trim()}
             >
               Simpan
             </Button>

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
 import {
@@ -17,7 +18,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -29,30 +30,46 @@ const ProgramPendidikanAnakTextEditor = dynamic(
   { ssr: false }
 );
 
+interface FormData {
+  judul: string;
+  deskripsi: string;
+}
+
 function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
 
-  const [judul, setJudul] = useState('');
+  // lokal state form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState<FormData>({
+    judul: '',
+    deskripsi: ''
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // load data once
   useShallowEffect(() => {
-    if (!editState.findById.data) {
+    if (!editState.findById.data) editState.findById.initialize();
-      editState.findById.initialize();
-    }
   }, []);
 
+  // populate formData saat data global tersedia
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = useCallback(
+    (field: keyof FormData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -60,9 +77,13 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state only on submit
-        editState.findById.data.deskripsi = content;
+        const updatedData = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
@@ -77,7 +98,6 @@ function EditTujuanProgram() {
 
   const handleBack = () => router.back();
 
-  // loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -93,12 +113,7 @@ function EditTujuanProgram() {
       <Stack gap="xs">
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              variant="subtle"
-              onClick={handleBack}
-              p="xs"
-              radius="md"
-            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -122,18 +137,20 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
             <Box>
-              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -143,7 +160,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx

@@ -11,7 +11,7 @@ import {
   Text,
   TextInput,
   Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
@@ -30,8 +30,8 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
 
-  const [judul, setJudul] = useState('');
+  // Menggunakan satu state lokal untuk form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -41,16 +41,22 @@ function EditTujuanProgram() {
     }
   }, []);
 
-  // Sync state dengan data hasil fetch
+  // Sync hanya sekali saat data fetch berhasil
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -58,9 +64,12 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.deskripsi,
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program');
@@ -112,17 +121,17 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -131,7 +140,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -1,5 +1,6 @@
-'use client';
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 import colors from '@/con/colors';
@@ -17,15 +18,15 @@ interface FormDaftarInformasi {
 }
 
 function EditDaftarInformasiPublik() {
-  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const daftarInformasi = useProxy(daftarInformasiPublik);
-  const router = useRouter()
+  const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   const [formData, setFormData] = useState<FormDaftarInformasi>({
     jenisInformasi: '',
     deskripsi: '',
     tanggal: '',
-  })
+  });
 
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
@@ -33,6 +34,7 @@ function EditDaftarInformasiPublik() {
     return date.toISOString().split('T')[0];
   };
 
+  // Load data once on mount / when ID changes
   useEffect(() => {
     const loadDaftarInformasi = async () => {
       const id = params?.id as string;
@@ -48,14 +50,18 @@ function EditDaftarInformasiPublik() {
           });
         }
       } catch (error) {
-        console.error("Error loading daftar informasi:", error);
+        console.error('Error loading daftar informasi:', error);
-        toast.error("Gagal memuat data daftar informasi");
+        toast.error('Gagal memuat data daftar informasi');
       }
-    }
+    };
 
     loadDaftarInformasi();
   }, [params?.id]);
 
+  const handleChange = (field: keyof FormDaftarInformasi, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
       daftarInformasi.edit.form = {
@@ -63,14 +69,14 @@ function EditDaftarInformasiPublik() {
         jenisInformasi: formData.jenisInformasi.trim(),
         deskripsi: formData.deskripsi.trim(),
         tanggal: formData.tanggal.trim(),
-      }
+      };
-      await daftarInformasi.edit.update()
+      await daftarInformasi.edit.update();
-      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
+      router.push('/admin/ppid/daftar-informasi-publik-desa-darmasaba');
     } catch (error) {
-      console.error("Error updating berita:", error);
+      console.error('Error updating berita:', error);
-      toast.error("Terjadi kesalahan saat memperbarui berita");
+      toast.error('Terjadi kesalahan saat memperbarui berita');
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -97,13 +103,8 @@ function EditDaftarInformasiPublik() {
           <TextInput
             label="Jenis Informasi"
             placeholder="Masukkan jenis informasi"
-            defaultValue={formData.jenisInformasi}
+            value={formData.jenisInformasi}
-            onChange={(val) => {
+            onChange={(e) => handleChange('jenisInformasi', e.target.value)}
-              setFormData({
-                ...formData,
-                jenisInformasi: val.target.value
-              });
-            }}
             required
           />
 
@@ -113,10 +114,7 @@ function EditDaftarInformasiPublik() {
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
+              onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                daftarInformasi.edit.form.deskripsi = htmlContent;
-              }}
             />
           </Box>
 
@@ -124,13 +122,8 @@ function EditDaftarInformasiPublik() {
             type="date"
             label="Tanggal Publikasi"
             placeholder="Pilih tanggal publikasi"
-            defaultValue={formatDateForInput(formData.tanggal)}
+            value={formatDateForInput(formData.tanggal)}
-            onChange={(val) => {
+            onChange={(e) => handleChange('tanggal', e.target.value)}
-              setFormData({
-                ...formData,
-                tanggal: val.target.value
-              });
-            }}
             required
           />
 

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

@@ -63,7 +63,7 @@ function DetailDaftarInformasiPublik() {
             Detail Informasi Publik
           </Text>
 
-          <Paper bg="#f8f9fa" p="md" radius="md" shadow="xs">
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="lg">
               <Box>
                 <Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>

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

@@ -9,37 +9,44 @@ import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
 import { useRouter } from 'next/navigation';
 import { IconArrowBack } from '@tabler/icons-react';
 
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+const PPIDTextEditor = dynamic(
-  ssr: false,
+  () => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
-});
+  { ssr: false }
+);
 
 function EditDasarHukum() {
-  const router = useRouter()
+  const router = useRouter();
-  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  const dasarHukumState = useProxy(stateDasarHukumPPID);
-  const [judul, setJudul] = useState('');
-  const [content, setContent] = useState('');
 
+  // Gabungkan judul & content jadi satu state lokal
+  const [formData, setFormData] = useState({ judul: '', content: '' });
+
+  // Load data awal sekali
   useShallowEffect(() => {
     if (!dasarHukumState.findById.data) {
-      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      dasarHukumState.findById.initialize();
     }
   }, []);
 
+  // Set state lokal saat data global sudah tersedia
   useEffect(() => {
     if (dasarHukumState.findById.data) {
-      setJudul(dasarHukumState.findById.data.judul ?? '')
+      setFormData({
-      setContent(dasarHukumState.findById.data.content ?? '')
+        judul: dasarHukumState.findById.data.judul ?? '',
+        content: dasarHukumState.findById.data.content ?? '',
+      });
     }
-  }, [dasarHukumState.findById.data])
+  }, [dasarHukumState.findById.data]);
 
-  const submit = () => {
+  const handleSubmit = () => {
     if (dasarHukumState.findById.data) {
-      dasarHukumState.findById.data.judul = judul;
+      // Update global state hanya saat submit
-      dasarHukumState.findById.data.content = content;
+      const updated = { ...dasarHukumState.findById.data, ...formData };
-      dasarHukumState.update.save(dasarHukumState.findById.data)
+      dasarHukumState.update.save(updated);
     }
-    router.push('/admin/ppid/dasar-hukum')
+    router.push('/admin/ppid/dasar-hukum');
-  }
+  };
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
@@ -69,12 +76,12 @@ function EditDasarHukum() {
             <Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
               <PPIDTextEditor
                 showSubmit={false}
-                onChange={setJudul}
+                initialContent={formData.judul}
-                initialContent={judul}
+                onChange={value => setFormData(prev => ({ ...prev, judul: value }))}
               />
             </Box>
           </Box>
-          
+
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
               Konten
@@ -82,15 +89,15 @@ function EditDasarHukum() {
             <Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
               <PPIDTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                initialContent={formData.content}
-                initialContent={content}
+                onChange={value => setFormData(prev => ({ ...prev, content: value }))}
               />
             </Box>
           </Box>
 
           <Group justify="flex-end" mt="md">
             <Button
-              onClick={submit}
+              onClick={handleSubmit}
               loading={dasarHukumState.update.loading}
               radius="md"
               size="md"

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_lib/layoutTabs.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -49,41 +49,49 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
                 IKM Desa Darmasaba
             </Title>
             <Tabs
-                radius="xl"
+                color={colors["blue-button"]}
-                color={colors['blue-button']}
                 variant="pills"
                 value={activeTab}
                 onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
             >
-                <TabsList
+                <ScrollArea type="auto" offsetScrollbars>
-                    p="sm"
+                    <TabsList
-                    style={{
+                        p="sm"
-                        background: "#F3F4FB",
+                        style={{
-                        borderRadius: "1rem",
+                            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                    }}
+                            borderRadius: "1rem",
-                >
+                            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    {tabs.map((e, i) => (
+                            display: "flex",
-                        <Tooltip 
+                            flexWrap: "nowrap",
-                            key={i} 
+                            gap: "0.5rem",
-                            label={e.description} 
+                            paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-                            withArrow 
+                        }}
-                            position="bottom" 
+                    >
-                            transitionProps={{ transition: 'pop', duration: 200 }}
+                        {tabs.map((e, i) => (
-                        >
+                            <Tooltip
-                            <TabsTab
+                                key={i}
-                                value={e.value}
+                                label={e.description}
-                                leftSection={e.icon}
+                                withArrow
-                                style={{
+                                position="bottom"
-                                    fontWeight: 500,
+                                transitionProps={{ transition: 'pop', duration: 200 }}
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
                             >
-                                {e.label}
+                                <TabsTab
-                            </TabsTab>
+                                    value={e.value}
-                        </Tooltip>
+                                    leftSection={e.icon}
-                    ))}
+                                    style={{
-                </TabsList>
+                                        fontWeight: 500,
+                                        fontSize: "0.9rem",
+                                        transition: "all 0.2s ease",
+                                    }}
+                                >
+                                    {e.label}
+                                </TabsTab>
+                            </Tooltip>
+                        ))}
+                    </TabsList>
+                </ScrollArea>
                 {tabs.map((e, i) => (
                     <TabsPanel key={i} value={e.value} mt="md">
                         {/* Konten dummy, bisa diganti tergantung routing */}

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx

@@ -1,11 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-/* eslint-disable react-hooks/exhaustive-deps */
 import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Select, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack, IconDeviceFloppy } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, ChangeEvent } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -18,24 +18,35 @@ interface FormResponden {
 }
 
 function EditResponden() {
-  const router = useRouter()
+  const router = useRouter();
-  const params = useParams() as { id: string }
+  const params = useParams() as { id: string };
-  const state = useProxy(indeksKepuasanState.responden)
+  const state = useProxy(indeksKepuasanState.responden);
-  const id = params.id
+  const id = params.id;
+
   const [formData, setFormData] = useState<FormResponden>({
     name: '',
     tanggal: '',
     jenisKelaminId: '',
     ratingId: '',
     kelompokUmurId: '',
-  })
+  });
+
+  // Helper untuk membuat data Select dari state
+  const mapSelectData = (data: any[] | null | undefined) =>
+    (data || [])
+      .filter(Boolean)
+      .map((v: any) => ({
+        value: v.id || '',
+        label: typeof v.name === 'string' ? v.name : 'Tanpa Nama',
+      }));
+
   useEffect(() => {
+    // Load opsi dropdown
     indeksKepuasanState.jenisKelaminResponden.findMany.load();
     indeksKepuasanState.pilihanRatingResponden.findMany.load();
     indeksKepuasanState.kelompokUmurResponden.findMany.load();
 
     const loadResponden = async () => {
-      const id = params?.id as string;
       if (!id) return;
 
       try {
@@ -43,39 +54,35 @@ function EditResponden() {
         if (data) {
           state.update.id = id;
 
-          state.update.form = {
+          // **formData lokal tetap controlled**, tidak overwrite tiap render
-            name: data.name,
-            tanggal: data.tanggal,
-            jenisKelaminId: data.jenisKelaminId,
-            ratingId: data.ratingId,
-            kelompokUmurId: data.kelompokUmurId,
-          };
-
           setFormData({
-            name: data.name,
+            name: data.name || '',
-            tanggal: data.tanggal,
+            tanggal: data.tanggal || '',
-            jenisKelaminId: data.jenisKelaminId,
+            jenisKelaminId: data.jenisKelaminId || '',
-            ratingId: data.ratingId,
+            ratingId: data.ratingId || '',
-            kelompokUmurId: data.kelompokUmurId,
+            kelompokUmurId: data.kelompokUmurId || '',
           });
-
-
         }
       } catch (error) {
-        console.error("Error loading program penghijauan:", error);
+        console.error("Error loading responden:", error);
-        toast.error("Gagal memuat data program penghijauan");
+        toast.error("Gagal memuat data responden");
       }
-    }
+    };
 
     loadResponden();
-  }, [params?.id]);
+  }, [id, state.update]);
+
+  const handleChange = (field: keyof FormResponden) => (e: ChangeEvent<HTMLInputElement> | string | null) => {
+    const value = typeof e === 'string' || e === null ? e || '' : e.currentTarget.value;
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
 
   const handleSubmit = async () => {
     state.update.id = id;
-    state.update.form = { ...formData }; // <-- sinkronisasi manual
+    state.update.form = { ...formData }; // hanya update global state saat submit
     await state.update.submit();
-    router.push('/admin/ppid/ikm-desa-darmasaba/responden')
+    router.push('/admin/ppid/ikm-desa-darmasaba/responden');
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -101,47 +108,27 @@ function EditResponden() {
         <Stack gap="md">
           <TextInput
             label="Nama Responden"
-            type='text'
             placeholder="Masukkan nama responden"
-            defaultValue={formData.name}
+            value={formData.name}
-            onChange={(val) => {
+            onChange={handleChange('name')}
-              setFormData({
-                ...formData,
-                name: val.currentTarget.value
-              })
-            }}
             radius="md"
             required
           />
           <TextInput
             label="Tanggal"
             type="date"
-            placeholder='Pilih tanggal'
+            value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
-            defaultValue={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
+            onChange={handleChange('tanggal')}
-            onChange={(e) => {
-              const selectedDate = e.currentTarget.value;
-              setFormData({
-                ...formData,
-                tanggal: selectedDate,
-              });
-            }}
             radius="md"
             required
           />
+
           <Select
-            key="jenisKelamin"
             label="Jenis Kelamin"
             placeholder="Pilih jenis kelamin"
             value={formData.jenisKelaminId}
-            onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
+            onChange={handleChange('jenisKelaminId')}
-            data={
+            data={mapSelectData(indeksKepuasanState.jenisKelaminResponden.findMany.data)}
-              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
-                .filter(Boolean)
-                .map((v) => ({
-                  value: v.id || '',
-                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
-                }))
-            }
             disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
             clearable
             searchable
@@ -149,20 +136,13 @@ function EditResponden() {
             radius="md"
             error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
           />
+
           <Select
-            key="rating"
-            value={formData.ratingId}
-            onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
             label="Rating"
-            placeholder='Pilih rating'
+            placeholder="Pilih rating"
-            data={
+            value={formData.ratingId}
-              (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+            onChange={handleChange('ratingId')}
-                .filter(Boolean)
+            data={mapSelectData(indeksKepuasanState.pilihanRatingResponden.findMany.data)}
-                .map((v) => ({
-                  value: v.id || '',
-                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
-                }))
-            }
             disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
             clearable
             searchable
@@ -172,37 +152,26 @@ function EditResponden() {
           />
 
           <Select
-            key={"kelompokUmur"}
-            value={formData.kelompokUmurId}
-            onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
             label="Kelompok Umur"
-            placeholder='Pilih kelompok umur'
+            placeholder="Pilih kelompok umur"
-            data={
+            value={formData.kelompokUmurId}
-              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+            onChange={handleChange('kelompokUmurId')}
-                .filter(Boolean)
+            data={mapSelectData(indeksKepuasanState.kelompokUmurResponden.findMany.data)}
-                .map((v) => ({
-                  value: v.id || '',
-                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
-                }))
-            }
             disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
             clearable
             searchable
             required
+            radius="md"
             error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
           />
-          
+
           <Group justify="flex-end" mt="md">
-            <Button 
+            <Button variant="light" color="red" onClick={() => router.back()}>
-              variant="light" 
-              color="red" 
-              onClick={() => router.back()}
-            >
               Batal
             </Button>
-            <Button 
+            <Button
               leftSection={<IconDeviceFloppy size={20} />}
-              onClick={handleSubmit} 
+              onClick={handleSubmit}
               loading={state.update.loading}
               color={colors['blue-button']}
             >

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

@@ -0,0 +1,95 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import statepermohonanInformasiPublikForm from '../../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
+
+function DetailPermohonanInformasiPublik() {
+  const state = useProxy(statepermohonanInformasiPublikForm.statepermohonanInformasiPublik)
+  const router = useRouter()
+  const params = useParams()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box py="md">
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="xl">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Informasi Publik
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="lg">
+            <Box>
+                <Text fz="lg" fw="bold" mb={4}>Nama</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>NIK</Text>
+                <Text fz="md" c="dimmed">{data.nik || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Telepon</Text>
+                <Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Email</Text>
+                <Text fz="md" c="dimmed">{data.email || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>
+                <Text fz="md" c="dimmed">{data.jenisInformasiDiminta?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Cara Akses Informasi</Text>
+                <Text fz="md" c="dimmed">{data.caraMemperolehInformasi?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Cara Akses Salinan Informasi</Text>
+                <Text fz="md" c="dimmed">{data.caraMemperolehSalinanInformasi?.name || '-'}</Text>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailPermohonanInformasiPublik;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -1,13 +1,15 @@
 'use client'
-import { useProxy } from 'valtio/utils'
-import { useShallowEffect } from '@mantine/hooks'
-import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title, Text, Group, Tooltip, Badge } from '@mantine/core'
-import { IconInfoCircle, IconUser, IconMail, IconPhone, IconId } from '@tabler/icons-react'
-import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
 import colors from '@/con/colors'
+import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
+import { useShallowEffect } from '@mantine/hooks'
+import { IconDeviceImacCog, IconId, IconInfoCircle, IconPhone, IconUser } from '@tabler/icons-react'
+import { useRouter } from 'next/navigation'
+import { useProxy } from 'valtio/utils'
+import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
 
 function Page() {
   const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
+  const router = useRouter()
 
   useShallowEffect(() => {
     permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
@@ -56,10 +58,7 @@ function Page() {
                     <TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
                     <TableTh><Group gap={5}><IconId size={16} /> NIK</Group></TableTh>
                     <TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
-                    <TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
+                    <TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
-                    <TableTh>Jenis Informasi</TableTh>
-                    <TableTh>Cara Akses Informasi</TableTh>
-                    <TableTh>Salinan Informasi</TableTh>
                   </TableTr>
                 </TableThead>
                 <TableTbody>
@@ -67,27 +66,31 @@ function Page() {
                     <TableTr key={item.id}>
                       <TableTd>{index + 1}</TableTd>
                       <TableTd>
-                        <Tooltip label={item.name}>
+                        <Box w={200}>
                           <Text lineClamp={1} fw={500}>{item.name}</Text>
-                        </Tooltip>
+                        </Box>
-                      </TableTd>
-                      <TableTd>{item.nik}</TableTd>
-                      <TableTd>{item.notelp}</TableTd>
-                      <TableTd>{item.email}</TableTd>
-                      <TableTd>
-                        <Badge variant="light" radius="sm" color="blue">
-                          {item.jenisInformasiDiminta?.name || '-'}
-                        </Badge>
                       </TableTd>
                       <TableTd>
-                        <Tooltip label={item.caraMemperolehInformasi?.name}>
+                        <Box w={200}>
-                          <Text lineClamp={1} size="sm">{item.caraMemperolehInformasi?.name || '-'}</Text>
+                          {item.nik}
-                        </Tooltip>
+                        </Box>
                       </TableTd>
                       <TableTd>
-                        <Tooltip label={item.caraMemperolehSalinanInformasi?.name}>
+                        <Box w={200}>
-                          <Text lineClamp={1} size="sm">{item.caraMemperolehSalinanInformasi?.name || '-'}</Text>
+                          {item.notelp}
-                        </Tooltip>
+                        </Box>
+                      </TableTd>
+                      <TableTd>
+                        <Button
+                          size="xs"
+                          radius="md"
+                          variant="light"
+                          color="blue"
+                          leftSection={<IconDeviceImacCog size={16} />}
+                          onClick={() => router.push(`/admin/ppid/permohonan-informasi-publik/${item.id}`)}
+                        >
+                          Detail
+                        </Button>
                       </TableTd>
                     </TableTr>
                   ))}

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

@@ -0,0 +1,82 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import statePermohonanKeberatan from '../../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
+
+
+function DetailPermohonanKeberatanInformasiPublik() {
+  const state = useProxy(statePermohonanKeberatan)
+  const router = useRouter()
+  const params = useParams()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box py="md">
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="xl">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Informasi Publik
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="lg">
+            <Box>
+                <Text fz="lg" fw="bold" mb={4}>Nama</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Telepon</Text>
+                <Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Email</Text>
+                <Text fz="md" c="dimmed">{data.email || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb={4}>Alasan</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.alasan || '-' }}></Text>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailPermohonanKeberatanInformasiPublik;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -1,13 +1,15 @@
 'use client'
 import colors from '@/con/colors'
-import { Box, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
+import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
 import { useShallowEffect } from '@mantine/hooks'
-import { IconInfoCircle, IconMail, IconMessage, IconPhone, IconUser } from '@tabler/icons-react'
+import { IconDeviceImacCog, IconInfoCircle, IconMail, IconPhone, IconUser } from '@tabler/icons-react'
 import { useProxy } from 'valtio/utils'
 import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
+import { useRouter } from 'next/navigation'
 
 function Page() {
   const listState = useProxy(statePermohonanKeberatan)
+  const router = useRouter()
   useShallowEffect(() => {
     listState.findMany.load()
   }, [])
@@ -55,7 +57,7 @@ function Page() {
                     <TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
                     <TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
                     <TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
-                    <TableTh><Group gap={5}><IconMessage size={16} /> Alasan Keberatan</Group></TableTh>
+                    <TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
                   </TableTr>
                 </TableThead>
                 <TableTbody>
@@ -74,23 +76,16 @@ function Page() {
                         <Text>{item.notelp || '-'}</Text>
                       </TableTd>
                       <TableTd>
-                        <Tooltip label={item.alasan?.replace(/<[^>]*>?/gm, '')}>
+                        <Button
-                          <div 
+                          size="xs"
-                            style={{ 
+                          radius="md"
-                              maxWidth: '300px',
+                          variant="light"
-                              overflow: 'hidden',
+                          color="blue"
-                              textOverflow: 'ellipsis', 
+                          leftSection={<IconDeviceImacCog size={16} />}
-                              wordBreak: "break-word",
+                          onClick={() => router.push(`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`)}
-                              whiteSpace: "normal" 
+                        >
-                            }}
+                          Detail
-                            dangerouslySetInnerHTML={{ 
+                        </Button>
-                              __html: item.alasan ? 
-                                item.alasan.replace(/<[^>]*>?/gm, '').substring(0, 50) + '...' : 
-                                '-' 
-                            }} 
-                            
-                          />
-                        </Tooltip>
                       </TableTd>
                     </TableTr>
                   ))}

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/page.tsx

@@ -175,7 +175,7 @@ function EditProfilePPID() {
             <TextInput
               label={<Text fw="bold">Nama Perbekel</Text>}
               placeholder="Masukkan nama perbekel"
-              defaultValue={allState.editForm.form.name}
+              value={allState.editForm.form.name}
               onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
               error={!allState.editForm.form.name && "Nama wajib diisi"}
             />

src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/edit/page.tsx

@@ -23,27 +23,26 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 export default function EditPegawaiPPID() {
   const router = useRouter();
   const { id } = useParams<{ id: string }>();
+  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
+
+  const [formData, setFormData] = useState({
+    namaLengkap: '',
+    gelarAkademik: '',
+    imageId: '',
+    tanggalMasuk: '',
+    email: '',
+    telepon: '',
+    alamat: '',
+    posisiId: '',
+    isActive: true,
+  });
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
-  const [formData, setFormData] = useState({
-    namaLengkap: stateOrganisasi.edit.form.namaLengkap,
-    gelarAkademik: stateOrganisasi.edit.form.gelarAkademik,
-    imageId: stateOrganisasi.edit.form.imageId,
-    tanggalMasuk: stateOrganisasi.edit.form.tanggalMasuk,
-    email: stateOrganisasi.edit.form.email,
-    telepon: stateOrganisasi.edit.form.telepon,
-    alamat: stateOrganisasi.edit.form.alamat,
-    posisiId: stateOrganisasi.edit.form.posisiId,
-    isActive: stateOrganisasi.edit.form.isActive,
-  });
 
-
+  // Format date for <input type="date">
-  // Format date to YYYY-MM-DD for date input
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
     const date = new Date(dateString);
@@ -53,36 +52,29 @@ export default function EditPegawaiPPID() {
   useEffect(() => {
     const loadPegawai = async () => {
       try {
-        await stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0); // ambil semua data
+        await stateStrukturPPID.posisiOrganisasi.findManyAll.load();
+
         const data = await stateOrganisasi.edit.load(id);
         if (data) {
           setFormData({
-            namaLengkap: data.namaLengkap || "",
+            namaLengkap: data.namaLengkap || '',
-            gelarAkademik: data.gelarAkademik || "",
+            gelarAkademik: data.gelarAkademik || '',
-            imageId: data.imageId || "",
+            imageId: data.imageId || '',
-            tanggalMasuk: data.tanggalMasuk || "",
+            tanggalMasuk: data.tanggalMasuk || '',
-            email: data.email || "",
+            email: data.email || '',
-            telepon: data.telepon || "",
+            telepon: data.telepon || '',
-            alamat: data.alamat || "",
+            alamat: data.alamat || '',
-            posisiId: data.posisiId || "",
+            posisiId: data.posisiId || '',
-            isActive: data.isActive ?? true, // pakai nullish coalescing
+            isActive: data.isActive ?? true,
           });
 
-          if (data.image?.link) {
+          setPreviewImage(data.image?.link || null);
-            setPreviewImage(data.image.link);
-          } else {
-            setPreviewImage(null);
-          }
         }
       } catch (error) {
-        console.error("Error loading pegawai:", error);
+        console.error('Error loading pegawai:', error);
-        toast.error(
+        toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
-          error instanceof Error ? error.message : "Gagal mengambil data pegawai"
-        );
       }
     };
-    console.log('Current posisiId:', formData.posisiId);
-    console.log('Available positions:', stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => p.id));
 
     loadPegawai();
   }, [id]);
@@ -90,50 +82,28 @@ export default function EditPegawaiPPID() {
   const handleSubmit = async () => {
     try {
       if (!formData.namaLengkap.trim()) {
-        toast.error('Nama lengkap tidak boleh kosong');
+        return toast.error('Nama lengkap tidak boleh kosong');
-        return;
       }
 
-      stateOrganisasi.edit.form = {
+      // Update global state only on submit
-        namaLengkap: formData.namaLengkap.trim(),
+      const updatedForm = { ...formData };
-        gelarAkademik: formData.gelarAkademik.trim(),
-        imageId: formData.imageId || "",
-        tanggalMasuk: formData.tanggalMasuk.trim(),
-        email: formData.email.trim(),
-        telepon: formData.telepon.trim(),
-        alamat: formData.alamat.trim(),
-        posisiId: formData.posisiId.trim(),
-        isActive: formData.isActive,
-      };
 
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
-        if (!uploaded?.id) {
+        updatedForm.imageId = uploaded.id;
-          return toast.error("Gagal upload gambar");
-        }
-
-        // Update imageId in global state
-        stateOrganisasi.edit.form.imageId = uploaded.id;
       }
 
-      if (id && !stateOrganisasi.edit.id) {
+      stateOrganisasi.edit.form = updatedForm;
-        stateOrganisasi.edit.id = id;
+      if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
-      }
 
       const success = await stateOrganisasi.edit.submit();
-
+      if (success) router.push('/admin/ppid/struktur-ppid/pegawai');
-      if (success) {
-        router.push("/admin/ppid/struktur-ppid/pegawai");
-      }
     } catch (error) {
-      console.error("Error updating pegawai:", error);
+      console.error('Error updating pegawai:', error);
-      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
     }
-
-
-
   };
 
   return (
@@ -144,9 +114,7 @@ export default function EditPegawaiPPID() {
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
-        <Title order={4} ml="sm" c="dark">
+        <Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</Title>
-          Edit Data Pegawai PPID
-        </Title>
       </Group>
 
       <Paper
@@ -158,27 +126,26 @@ export default function EditPegawaiPPID() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          {/* Nama Lengkap */}
+          <TextInput
+            label="Nama Lengkap"
+            placeholder="Masukkan nama lengkap"
+            value={formData.namaLengkap}
+            onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
+            required
+          />
+
+          {/* Gelar Akademik */}
+          <TextInput
+            label="Gelar Akademik"
+            placeholder="Contoh: S.Kom"
+            value={formData.gelarAkademik}
+            onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
+          />
+
+          {/* Foto Profil */}
           <Box>
-            <TextInput
+            <Text fw="bold" fz="sm" mb={6}>Foto Profil</Text>
-              label="Nama Lengkap"
-              placeholder="Masukkan nama lengkap"
-              defaultValue={formData.namaLengkap}
-              onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
-              required
-            />
-          </Box>
-          <Box>
-            <TextInput
-              label="Gelar Akademik"
-              placeholder="Contoh: S.Kom"
-              defaultValue={formData.gelarAkademik}
-              onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
-            />
-          </Box>
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Foto Profil
-            </Text>
             <Dropzone
               onDrop={(files) => {
                 const selectedFile = files[0];
@@ -194,22 +161,12 @@ export default function EditPegawaiPPID() {
               p="xl"
             >
               <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
+                <Dropzone.Accept><IconUpload size={48} color={colors['blue-button']} stroke={1.5} /></Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                <Dropzone.Reject><IconX size={48} color="red" stroke={1.5} /></Dropzone.Reject>
-                </Dropzone.Accept>
+                <Dropzone.Idle><IconPhoto size={48} color="#868e96" stroke={1.5} /></Dropzone.Idle>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
                 <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
+                  <Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
-                    Seret gambar atau klik untuk memilih file
+                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
                 </Stack>
               </Group>
             </Dropzone>
@@ -221,78 +178,74 @@ export default function EditPegawaiPPID() {
                   alt="Preview Gambar"
                   radius="md"
                   style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
-                  loading='lazy'
+                  loading="lazy"
                 />
               </Box>
             )}
           </Box>
+
+          {/* Tanggal Masuk */}
+          <TextInput
+            label="Tanggal Masuk"
+            type="date"
+            placeholder="Contoh: 2022-01-01"
+            value={formatDateForInput(formData.tanggalMasuk)}
+            onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
+          />
+
+          {/* Email */}
+          <TextInput
+            label="Email"
+            type="email"
+            placeholder="contoh@email.com"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          />
+
+          {/* Telepon */}
+          <TextInput
+            label="Telepon"
+            placeholder="08123456789"
+            value={formData.telepon}
+            onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
+          />
+
+          {/* Alamat */}
+          <TextInput
+            label="Alamat"
+            placeholder="Jl. Contoh No. 123"
+            value={formData.alamat}
+            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+          />
+
+          {/* Posisi */}
           <Box>
-            <TextInput
+            <Text fw="bold" fz="sm" mb={6}>Posisi</Text>
-              label="Tanggal Masuk"
-              type="date"
-              placeholder="Contoh: 2022-01-01"
-              defaultValue={formatDateForInput(formData.tanggalMasuk)}
-              onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
-            />
-          </Box>
-          <Box>
-            <TextInput
-              label="Email"
-              type="email"
-              placeholder="contoh@email.com"
-              defaultValue={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-            />
-          </Box>
-          <Box>
-            <TextInput
-              label="Telepon"
-              placeholder="08123456789"
-              defaultValue={formData.telepon}
-              onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
-            />
-          </Box>
-          <Box>
-            <TextInput
-              label="Alamat"
-              placeholder="Jl. Contoh No. 123"
-              defaultValue={formData.alamat}
-              onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            />
-          </Box>
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Posisi
-            </Text>
             <Select
               placeholder="Pilih posisi"
-              data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
+              data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
-                value: p.id,
-                label: p.nama
-              })) || []}
               value={formData.posisiId}
               onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
               searchable
               clearable
             />
           </Box>
+
+          {/* Status Pegawai */}
           <Box>
-            <Text fw="bold" fz="sm" mb={6}>
+            <Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
-              Status Pegawai
-            </Text>
             <Select
               data={[
                 { value: 'true', label: 'Aktif' },
                 { value: 'false', label: 'Tidak Aktif' },
               ]}
               value={String(formData.isActive)}
-              onChange={(val) => {
+              onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
-                setFormData({ ...formData, isActive: val === 'true' });
-              }}
               clearable
             />
           </Box>
 
+          {/* Submit Button */}
           <Group justify="flex-end" mt="md">
             <Button
               onClick={handleSubmit}

src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/page.tsx

@@ -12,6 +12,7 @@ import { useProxy } from 'valtio/utils';
 function DetailPegawai() {
   const statePegawai = useProxy(stateStrukturPPID.pegawai);
   const [modalHapus, setModalHapus] = useState(false);
+  const [modalNonActive, setModalNonActive] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const params = useParams();
   const router = useRouter();
@@ -30,6 +31,15 @@ function DetailPegawai() {
     }
   };
 
+  const handleNonActive = () => {
+    if (selectedId) {
+      statePegawai.nonActive.byId(selectedId);
+      setModalNonActive(false);
+      setSelectedId(null);
+      router.push("/admin/ppid/struktur-ppid/pegawai");
+    }
+  };
+
   if (!statePegawai.findUnique.data) {
     return (
       <Stack py={10}>
@@ -64,7 +74,7 @@ function DetailPegawai() {
             <Stack gap="md">
               <Box>
                 <Text fz="lg" fw="bold">Nama Lengkap</Text>
-                <Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
                   {data.namaLengkap || '-'} {data.gelarAkademik || ''}
                 </Text>
               </Box>
@@ -86,7 +96,7 @@ function DetailPegawai() {
 
               <Box>
                 <Text fz="lg" fw="bold">Alamat</Text>
-                <Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>{data.alamat || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamat || '-'}</Text>
               </Box>
 
               <Box>
@@ -125,6 +135,19 @@ function DetailPegawai() {
                 )}
               </Box>
 
+              <Button
+                color={data.isActive ? "green" : "gray"}
+                onClick={() => {
+                  setSelectedId(data.id || null);
+                  setModalNonActive(true);
+                }}
+                variant="light"
+                radius="md"
+                size="md"
+              >
+                {data.isActive ? "Aktif" : "Nonaktif"}
+              </Button>
+
               <Group gap="sm" mt="md">
                 <Tooltip label="Hapus Pegawai" withArrow position="top">
                   <Button
@@ -165,6 +188,14 @@ function DetailPegawai() {
         onConfirm={handleHapus}
         text="Apakah Anda yakin ingin menghapus data pegawai ini?"
       />
+
+      {/* Modal NonActive */}
+      <ModalKonfirmasiHapus
+        opened={modalNonActive}
+        onClose={() => setModalNonActive(false)}
+        onConfirm={handleNonActive}
+        text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
+      />
     </Box>
   );
 }

src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/create/page.tsx

@@ -16,7 +16,7 @@ function CreatePegawaiPPID() {
   const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
   const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
   useEffect(() => {
-    stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0);
+    stateStrukturPPID.posisiOrganisasi.findManyAll.load();
     resetForm();
   }, []);
 
@@ -228,7 +228,7 @@ function CreatePegawaiPPID() {
             </Text>
             <Select
               placeholder="Pilih posisi"
-              data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
+              data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({
                 value: p.id,
                 label: p.nama
               })) || []}

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

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
 import colors from '@/con/colors';
@@ -17,20 +19,23 @@ function EditPosisiOrganisasiPPID() {
   const stateOrganisasi = useProxy(stateStrukturPPID.posisiOrganisasi);
 
   const [formData, setFormData] = useState({
-    nama: "",
+    nama: '',
-    deskripsi: "",
+    deskripsi: '',
     hierarki: 0,
   });
 
-  useEffect(() => {
+  // Fungsi generik untuk update formData
-    const loadPosisiOrganisasi = async () => {
+  const handleChange = (field: keyof typeof formData, value: any) => {
-      if (!id) return;
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
 
+  useEffect(() => {
+    if (!id) return;
+
+    const loadPosisiOrganisasi = async () => {
       try {
         const data = await stateOrganisasi.edit.load(id);
-
         if (data) {
-          // pastikan id-nya masuk ke state edit
           stateOrganisasi.edit.id = id;
           setFormData({
             nama: data.nama || '',
@@ -38,9 +43,9 @@ function EditPosisiOrganisasiPPID() {
             hierarki: data.hierarki || 0,
           });
         }
-      } catch (error) {
+      } catch (err) {
-        console.error("Error loading posisi organisasi:", error);
+        console.error('Error loading posisi organisasi:', err);
-        toast.error("Gagal memuat data posisi organisasi");
+        toast.error('Gagal memuat data posisi organisasi');
       }
     };
 
@@ -48,31 +53,31 @@ function EditPosisiOrganisasiPPID() {
   }, [id]);
 
   const handleSubmit = async () => {
-    try {
+    if (!formData.nama.trim()) {
-      if (!formData.nama.trim()) {
+      toast.error('Nama posisi organisasi tidak boleh kosong');
-        toast.error('Nama posisi organisasi tidak boleh kosong');
+      return;
-        return;
+    }
-      }
 
+    try {
+      // Update global state hanya saat submit
       stateOrganisasi.edit.form = {
         nama: formData.nama.trim(),
         deskripsi: formData.deskripsi.trim(),
         hierarki: formData.hierarki,
       };
 
-      // Safety check tambahan: pastikan ID tidak kosong
       if (!stateOrganisasi.edit.id) {
-        stateOrganisasi.edit.id = id; // fallback
+        stateOrganisasi.edit.id = id;
       }
 
       const success = await stateOrganisasi.edit.update();
 
       if (success) {
-        router.push("/admin/ppid/struktur-ppid/posisi-organisasi");
+        router.push('/admin/ppid/struktur-ppid/posisi-organisasi');
       }
-    } catch (error) {
+    } catch (err) {
-      console.error("Error updating posisi organisasi:", error);
+      console.error('Error updating posisi organisasi:', err);
-      // toast akan ditampilkan dari fungsi update
+      // toast error biasanya sudah ada di update
     }
   };
 
@@ -101,32 +106,30 @@ function EditPosisiOrganisasiPPID() {
           <TextInput
             label="Nama Posisi Organisasi"
             placeholder="Masukkan nama posisi organisasi"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
-          
+
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
               Deskripsi
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
+              onChange={(html) => handleChange('deskripsi', html)}
-                setFormData({ ...formData, deskripsi: htmlContent });
-              }}
             />
           </Box>
-          
+
           <TextInput
             label="Hierarki"
             type="number"
             min={0}
             placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
-            defaultValue={formData.hierarki}
+            value={formData.hierarki}
             onChange={(e) => {
               const value = parseInt(e.target.value, 10);
-              setFormData({ ...formData, hierarki: isNaN(value) ? 0 : value });
+              handleChange('hierarki', isNaN(value) ? 0 : value);
             }}
             required
           />

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

@@ -42,7 +42,10 @@ function ListStrukturOrganisasiPPID() {
   }
 
   const posisiMap = new Map<string, any>();
-  for (const pegawai of stateOrganisasi.findMany.data) {
+
+  const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
+
+  for (const pegawai of aktifPegawai) {
     const posisiId = pegawai.posisi.id;
     if (!posisiMap.has(posisiId)) {
       posisiMap.set(posisiId, {

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

@@ -10,13 +10,14 @@ import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID'
 import MisiPPID from '../misiPPID/misi-PPID';
 import VisiPPID from '../visiPPID/visi-PPID';
 
-
 function VisiMisiPPIDEdit() {
-  const router = useRouter()
+  const router = useRouter();
   const visiMisi = useProxy(stateVisiMisiPPID);
-  const [draftVisi, setDraftVisi] = useState('');
-  const [draftMisi, setDraftMisi] = useState('');
 
+  // Gabung state lokal menjadi satu object
+  const [formData, setFormData] = useState({ visi: '', misi: '' });
+
+  // Initialize global data ke state lokal saat pertama load
   useShallowEffect(() => {
     if (!visiMisi.findById.data) {
       visiMisi.findById.initialize();
@@ -25,19 +26,25 @@ function VisiMisiPPIDEdit() {
 
   useEffect(() => {
     if (visiMisi.findById.data) {
-      setDraftVisi(visiMisi.findById.data.visi ?? '');
+      setFormData({
-      setDraftMisi(visiMisi.findById.data.misi ?? '');
+        visi: visiMisi.findById.data.visi ?? '',
+        misi: visiMisi.findById.data.misi ?? '',
+      });
     }
   }, [visiMisi.findById.data]);
 
+  const handleChange = (key: 'visi' | 'misi', value: string) => {
+    setFormData(prev => ({ ...prev, [key]: value }));
+  };
+
   const submit = () => {
     if (visiMisi.findById.data) {
-      // update nilai di state global hanya saat submit
+      // update nilai global hanya saat submit
-      visiMisi.findById.data.visi = draftVisi;
+      visiMisi.findById.data.visi = formData.visi;
-      visiMisi.findById.data.misi = draftMisi;
+      visiMisi.findById.data.misi = formData.misi;
       visiMisi.update.save(visiMisi.findById.data);
     }
-    router.push('/admin/ppid/visi-misi-ppid')
+    router.push('/admin/ppid/visi-misi-ppid');
   };
 
   return (
@@ -63,11 +70,11 @@ function VisiMisiPPIDEdit() {
       >
         <Stack gap="xl">
           <Box>
-            <VisiPPID value={draftVisi} onChange={setDraftVisi} />
+            <VisiPPID value={formData.visi} onChange={value => handleChange('visi', value)} />
           </Box>
-          
+
           <Box>
-            <MisiPPID value={draftMisi} onChange={setDraftMisi} />
+            <MisiPPID value={formData.misi} onChange={value => handleChange('misi', value)} />
           </Box>
 
           <Group justify="flex-end" mt="md">

src/app/admin/(dashboard)/user&role/role/[id]/page.tsx

@@ -1,62 +1,71 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import colors from '@/con/colors';
 import { Box, Button, Group, MultiSelect, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import user from '../../../_state/user/user-state';
 
 function EditRole() {
-  const stateRole = useProxy(user.roleState)
+  const stateRole = useProxy(user.roleState);
   const router = useRouter();
   const params = useParams();
 
+  // Controlled local state
   const [formData, setFormData] = useState({
-    name: stateRole.update.form.name || "",
+    name: '',
-    permissions: stateRole.update.form.permissions || [],
+    permissions: [] as string[],
-  })
+  });
+
+  // Load role data
+  const loadRole = useCallback(async (id: string) => {
+    try {
+      const data = await stateRole.update.load(id);
+      if (data) {
+        setFormData({
+          name: data.name || '',
+          permissions: data.permissions || [],
+        });
+      }
+    } catch (error) {
+      console.error('Error loading role:', error);
+      toast.error(error instanceof Error ? error.message : 'Gagal mengambil data role');
+    }
+  }, [stateRole.update]);
 
   useEffect(() => {
-    stateRole.findMany.load();
+    stateRole.findMany.load(); // Load permissions/options
-    const loadRole = async () => {
+    const id = params?.id as string;
-      const id = params?.id as string;
+    if (id) loadRole(id);
-      if (!id) return;
+  }, [params?.id, loadRole, stateRole.findMany]);
 
-      try {
+  // Submit handler
-        const data = await stateRole.update.load(id);
+  const handleSubmit = async () => {
-        if (data) {
+    if (!formData.name.trim()) {
-          setFormData({
+      toast.error('Nama role tidak boleh kosong');
-            name: data.name || "",
+      return;
-            permissions: data.permissions || [],
+    }
-          });
+    if (!formData.permissions.length) {
-        }
+      toast.error('Pilih minimal satu permission');
-      } catch (error) {
+      return;
-        console.error("Error loading role:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal mengambil data role"
-        );
-      }
     }
 
-    loadRole();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
     try {
+      // Update global state only on submit
       stateRole.update.form = {
         ...stateRole.update.form,
         name: formData.name,
         permissions: formData.permissions,
-      }
+      };
       await stateRole.update.update();
-      toast.success("Role berhasil diperbarui!");
+      toast.success('Role berhasil diperbarui!');
-      router.push("/admin/user&role/role");
+      router.push('/admin/user&role/role');
     } catch (error) {
-      console.error("Error updating role:", error);
+      console.error('Error updating role:', error);
-      toast.error("Terjadi kesalahan saat memperbarui role");
+      toast.error('Terjadi kesalahan saat memperbarui role');
     }
   };
 
@@ -76,47 +85,48 @@ function EditRole() {
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
-        p={'md'}
+        p="md"
         radius="md"
         shadow="sm"
         style={{ border: '1px solid #e0e0e0' }}
       >
-        <Stack gap={"xs"}>
+        <Stack gap="xs">
-          <Title order={4}>Edit Role</Title>
           <TextInput
-            defaultValue={formData.name}
+            value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Role</Text>}
+            label={<Text fw="bold" fz="sm">Nama Role</Text>}
-            placeholder='Masukkan nama role'
+            placeholder="Masukkan nama role"
           />
           <MultiSelect
             value={formData.permissions}
             onChange={(val) => setFormData({ ...formData, permissions: val })}
-            label={<Text fw={"bold"} fz={"sm"}>Permission</Text>}
+            label={<Text fw="bold" fz="sm">Permission</Text>}
-            placeholder='Pilih permission'
+            placeholder="Pilih permission"
             data={
               stateRole.findMany.data?.map((v) => ({
-                value: v.id,  // Make sure this is using the ID
+                value: v.id,
-                label: v.name
+                label: v.name,
               })) || []
             }
             clearable
             searchable
             required
-            error={!formData.permissions.length ? "Pilih minimal satu permission" : undefined}
+            error={!formData.permissions.length ? 'Pilih minimal satu permission' : undefined}
           />
 
           <Group justify="right">
-            <Button 
+            <Button
-            radius="md"
+              radius="md"
-            size="md"
+              size="md"
-            onClick={handleSubmit}
+              onClick={handleSubmit}
-            style={{
+              style={{
-              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-              color: '#fff',
+                color: '#fff',
-              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-            }}
+              }}
-            >Submit</Button>
+            >
+              Submit
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findMany.ts

@@ -27,7 +27,7 @@ async function kategoriBeritaFindMany(context: Context) {
         where,
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' },
+        orderBy: { createdAt: 'asc' },
       }),
       prisma.kategoriBerita.count({ where }),
     ]);

src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/findUnique.ts

@@ -0,0 +1,52 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function permohonanInformasiPublikFindUnique(context: Context) {
+    const url = new URL(context.request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.permohonanInformasiPublik.findUnique({
+            where: { id },
+            include: {
+                jenisInformasiDiminta: true,
+                caraMemperolehInformasi: true,
+                caraMemperolehSalinanInformasi: true,
+            }
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Permohonan informasi publik tidak ditemukan",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success find permohonan informasi publik",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil permohonan informasi publik: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/index.ts

@@ -4,6 +4,7 @@ import permohonanInformasiPublikFindMany from "./find-many";
 import jenisInformasiFindMany from "./jenisInformasi";
 import memperolehInformasiFindMany from "./memperolehInformasi";
 import salinanInformasiFindMany from "./salinanInformasi";
+import permohonanInformasiPublikFindUnique from "./findUnique";
 
 const PermohonanInformasiPublik = new Elysia({
     prefix: "/permohonaninformasipublik",
@@ -12,6 +13,10 @@ const PermohonanInformasiPublik = new Elysia({
     .get("/jenisInformasi/find-many", jenisInformasiFindMany)
     .get("/memperolehInformasi/find-many", memperolehInformasiFindMany)
     .get("/salinanInformasi/find-many", salinanInformasiFindMany)
+    .get("/:id", async (context) => {
+        const response = await permohonanInformasiPublikFindUnique(context);
+        return response;
+    })
     .get("/find-many", permohonanInformasiPublikFindMany)
     .post("/create", permohonanInformasiPublikCreate, {
         body: t.Object({

src/app/api/[[...slugs]]/_lib/ppid/permohonan_keberatan_informasi_publik/findUnique.ts

@@ -0,0 +1,47 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function permohonanKeberatanInformasiPublikFindUnique(context: Context) {
+    const url = new URL(context.request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.formulirPermohonanKeberatan.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Permohonan keberatan informasi publik tidak ditemukan",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success find permohonan keberatan informasi publik",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil permohonan keberatan informasi publik: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/permohonan_keberatan_informasi_publik/index.ts

@@ -1,12 +1,14 @@
 import Elysia, { t } from "elysia";
 import permohonanKeberatanInformasiPublikCreate from "./create";
 import permohonanKeberatanInformasiPublikFindMany from "./find-many";
+import permohonanKeberatanInformasiPublikFindUnique from "./findUnique";
 
 const PermohonanKeberatanInformasiPublik = new Elysia({
     prefix: "/permohonankeberataninformasipublik",
     tags: ["PPID/Permohonan Keberatan Informasi Publik"],
 })
     .get("/find-many", permohonanKeberatanInformasiPublikFindMany)
+    .get("/:id", permohonanKeberatanInformasiPublikFindUnique)
     .post("/create", permohonanKeberatanInformasiPublikCreate, {
         body: t.Object({
             name: t.String(),

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/del.ts

@@ -13,17 +13,13 @@ export default async function pegawaiDelete(context: Context) {
   }
 
   try {
-    const deleted = await prisma.pegawaiPPID.update({
+    const deleted = await prisma.pegawaiPPID.delete({
       where: { id },
-      data: {
-        isActive: false, // soft delete
-        updatedAt: new Date(),
-      },
     });
 
     return {
       success: true,
-      message: "Pegawai berhasil di-nonaktifkan",
+      message: "Pegawai berhasil dihapus",
       data: deleted,
     };
   } catch (error: any) {

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/index.ts

@@ -2,8 +2,9 @@ import Elysia, { t } from "elysia";
 import pegawaiFindMany from "./findMany";
 import pegawaiFindUnique from "./findUnique";
 import pegawaiCreate from "./create";
-import pegawaiDelete from "./del";
+import pegawaiNonActive from "./nonActive";
 import pegawaiUpdate from "./updt";
+import pegawaiDelete from "./del";
 
 
 const Pegawai = new Elysia({
@@ -58,6 +59,7 @@ const Pegawai = new Elysia({
   )
 
   // ✅ Delete
+  .delete("/non-active/:id", pegawaiNonActive)
   .delete("/del/:id", pegawaiDelete);
 
 export default Pegawai;

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/nonActive.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function pegawaiNonActive(context: Context) {
+  const { id } = context.params as { id: string };
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID pegawai tidak ditemukan",
+    };
+  }
+
+  try {
+    const deleted = await prisma.pegawaiPPID.update({
+      where: { id },
+      data: {
+        isActive: false, // soft delete
+        updatedAt: new Date(),
+      },
+    });
+
+    return {
+      success: true,
+      message: "Pegawai berhasil di-nonaktifkan",
+      data: deleted,
+    };
+  } catch (error: any) {
+    console.error("Error nonaktifkan pegawai:", error);
+    return {
+      success: false,
+      message: "Gagal nonaktifkan pegawai",
+      error: error.message,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/posisi-organisasi/findManyAll.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/posisi-organisasi/findManyAll.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function posisiOrganisasiFindManyAll(context: Context) {
+  const search = (context.query.search as string) || "";
+
+  // filter default
+  const where: any = { isActive: true };
+
+  if (search) {
+    where.OR = [
+      { nama: { contains: search, mode: "insensitive" } },
+      { deskripsi: { contains: search, mode: "insensitive" } },
+    ];
+  }
+
+  try {
+    const data = await prisma.posisiOrganisasiPPID.findMany({
+      where,
+      orderBy: { hierarki: "asc" },
+    });
+
+    return {
+      success: true,
+      message: "Berhasil mengambil semua data posisi organisasi",
+      data: data.map((item: any) => ({
+        id: item.id,
+        nama: item.nama,
+        deskripsi: item.deskripsi,
+        hierarki: item.hierarki,
+      })),
+      total: data.length,
+    };
+  } catch (e) {
+    console.error("Find many all error:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data posisi organisasi",
+    };
+  }
+}
+
+export default posisiOrganisasiFindManyAll;

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/posisi-organisasi/index.ts

@@ -4,6 +4,7 @@ import posisiOrganisasiFindUnique from "./findUnique";
 import posisiOrganisasiCreate from "./create";
 import posisiOrganisasiUpdate from "./updt";
 import posisiOrganisasiDelete from "./del";
+import posisiOrganisasiFindManyAll from "./findManyAll";
 
 const PosisiOrganisasi = new Elysia({
     prefix: "/posisiorganisasi",
@@ -11,6 +12,7 @@ const PosisiOrganisasi = new Elysia({
 })
 
 .get("/find-many", posisiOrganisasiFindMany)
+.get("/find-many-all", posisiOrganisasiFindManyAll)
 .get("/:id", async (context) => {
     const response = await posisiOrganisasiFindUnique(context);
     return response;

src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx

@@ -75,7 +75,7 @@ export default function Content({ kategori }: { kategori: string }) {
                         {featured.kategoriBerita?.name || kategori}
                       </Badge>
                       <Title order={2} mb="md">{featured.judul}</Title>
-                      <Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsi}</Text>
+                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featured.deskripsi }} />
                     </div>
                     <Group justify="apart" mt="auto">
                       <Group gap="xs">
@@ -135,9 +135,9 @@ export default function Content({ kategori }: { kategori: string }) {
                     {item.kategoriBerita?.name || kategori}
                   </Badge>
                   <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
-                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+                  <Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                   <Group justify="apart" mt="md" gap="xs">
-                    <Text size="xs" color="dimmed">
+                    <Text size="xs" c="dimmed">
                       {new Date(item.createdAt).toLocaleDateString('id-ID', {
                         day: 'numeric',
                         month: 'short',

src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx

@@ -1,3 +1,152 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// 'use client'
+// import colors from '@/con/colors';
+// import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+// import { IconSearch } from '@tabler/icons-react';
+// import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+// import React, { useEffect, useState } from 'react';
+// import BackButton from '../../layanan/_com/BackButto';
+
+// type HeaderSearchProps = {
+//   placeholder?: string;
+//   searchIcon?: React.ReactNode;
+//   value?: string;
+//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+//   children?: React.ReactNode;
+// };
+
+// function LayoutTabsBerita({
+//   children,
+//   placeholder = "pencarian",
+//   searchIcon = <IconSearch size={20} />
+// }: HeaderSearchProps) {
+//   const router = useRouter();
+//   const pathname = usePathname();
+//   const searchParams = useSearchParams();
+
+//   const activeTab = pathname.split('/').pop() || 'semua';
+//   const initialSearch = searchParams.get('search') || '';
+//   const [searchValue, setSearchValue] = useState(initialSearch);
+//   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+
+//   const [activeTabState, setActiveTabState] = useState(activeTab);
+//   useEffect(() => {
+//     setActiveTabState(activeTab);
+//   }, [activeTab]);
+
+//   useEffect(() => {
+//     return () => {
+//       if (searchTimeout !== null) clearTimeout(searchTimeout);
+//     };
+//   }, [searchTimeout]);
+
+//   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     const value = event.target.value;
+//     setSearchValue(value);
+
+//     if (searchTimeout !== null) clearTimeout(searchTimeout);
+
+//     const newTimeout = window.setTimeout(() => {
+//       const params = new URLSearchParams(searchParams.toString());
+
+//       if (value) params.set('search', value);
+//       else params.delete('search');
+
+//       if (params.toString() !== searchParams.toString()) {
+//         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
+//       }
+//     }, 500);
+
+//     setSearchTimeout(newTimeout);
+//   };
+
+//   const tabs = [
+//     { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
+//     { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
+//     { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
+//     { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
+//     { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
+//     { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
+//     { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
+//   ];
+
+//   const handleTabChange = (value: string | null) => {
+//     if (!value) return;
+//     const tab = tabs.find(t => t.value === value);
+//     if (tab) {
+//       const params = new URLSearchParams(searchParams.toString());
+//       router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
+//     }
+//   };
+
+//   return (
+//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+//       {/* Header */}
+//       <Box px={{ base: "md", md: 100 }}>
+//         <BackButton />
+//       </Box>
+
+//       <Box px={{ base: 'md', md: 100 }}>
+//         <Group justify='space-between' align="center">
+//           <Stack gap="0">
+//             <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+//               Portal Berita Darmasaba
+//             </Text>
+//             <Text>
+//               Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+//             </Text>
+//           </Stack>
+//           <Box>
+//             <TextInput
+//               radius="lg"
+//               placeholder={placeholder}
+//               leftSection={searchIcon}
+//               w="100%"
+//               value={searchValue}
+//               onChange={handleSearchChange}
+//             />
+//           </Box>
+//         </Group>
+//       </Box>
+
+//       <Tabs
+//         color={colors['blue-button']}
+//         variant="pills"
+//         value={activeTabState}
+//         onChange={handleTabChange}
+//       >
+//         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
+//           {/* SCROLLABLE TABS */}
+//           <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
+//             <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
+//               {tabs.map((tab, index) => (
+//                 <TabsTab
+//                   key={index}
+//                   value={tab.value}
+//                   onClick={() => router.push(tab.href)}
+//                   style={{
+//                     flex: '0 0 auto', // Prevent shrinking
+//                     minWidth: 100, // optional: makes them touch-friendly
+//                     textAlign: 'center'
+//                   }}
+//                 >
+//                   {tab.label}
+//                 </TabsTab>
+//               ))}
+//             </TabsList>
+//           </Box>
+//         </Box>
+
+//         {children}
+//       </Tabs>
+//     </Stack>
+//   );
+// }
+
+// export default LayoutTabsBerita;
+
+
 'use client'
 import colors from '@/con/colors';
 import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
@@ -5,39 +154,32 @@ import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import BackButton from '../../layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 
-type HeaderSearchProps = {
+function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
-  placeholder?: string;
-  searchIcon?: React.ReactNode;
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  children?: React.ReactNode;
-};
-
-function LayoutTabsBerita({
-  children,
-  placeholder = "pencarian",
-  searchIcon = <IconSearch size={20} />
-}: HeaderSearchProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const activeTab = pathname.split('/').pop() || 'semua';
+  const kategoriState = useProxy(stateDashboardBerita.kategoriBerita);
-  const initialSearch = searchParams.get('search') || '';
-  const [searchValue, setSearchValue] = useState(initialSearch);
-  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
 
+  // tab aktif dari url
+  const activeTab = pathname.split('/').pop() || 'semua';
   const [activeTabState, setActiveTabState] = useState(activeTab);
+
+  useEffect(() => {
+    kategoriState.findMany.load(); // ambil kategori dari DB
+  }, []);
+
   useEffect(() => {
     setActiveTabState(activeTab);
   }, [activeTab]);
 
-  useEffect(() => {
+  // search
-    return () => {
+  const initialSearch = searchParams.get('search') || '';
-      if (searchTimeout !== null) clearTimeout(searchTimeout);
+  const [searchValue, setSearchValue] = useState(initialSearch);
-    };
+  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-  }, [searchTimeout]);
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -47,26 +189,23 @@ function LayoutTabsBerita({
 
     const newTimeout = window.setTimeout(() => {
       const params = new URLSearchParams(searchParams.toString());
-
       if (value) params.set('search', value);
       else params.delete('search');
 
-      if (params.toString() !== searchParams.toString()) {
+      router.push(`/darmasaba/desa/berita/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`);
-        router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
-      }
     }, 500);
 
     setSearchTimeout(newTimeout);
   };
 
+  // --- tabs dinamis ---
   const tabs = [
     { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
-    { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
+    ...(kategoriState.findMany.data || []).map((kat: any) => ({
-    { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
+      label: kat.name,
-    { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
+      value: kat.name.toLowerCase(),
-    { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
+      href: `/darmasaba/desa/berita/${kat.name.toLowerCase()}`
-    { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
+    }))
-    { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
   ];
 
   const handleTabChange = (value: string | null) => {
@@ -74,7 +213,7 @@ function LayoutTabsBerita({
     const tab = tabs.find(t => t.value === value);
     if (tab) {
       const params = new URLSearchParams(searchParams.toString());
-      router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
+      router.push(`${tab.href}${params.toString() ? `?${params.toString()}` : ''}`);
     }
   };
 
@@ -88,18 +227,16 @@ function LayoutTabsBerita({
       <Box px={{ base: 'md', md: 100 }}>
         <Group justify='space-between' align="center">
           <Stack gap="0">
-            <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+            <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold">
               Portal Berita Darmasaba
             </Text>
-            <Text>
+            <Text>Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba</Text>
-              Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
-            </Text>
           </Stack>
           <Box>
             <TextInput
               radius="lg"
-              placeholder={placeholder}
+              placeholder="pencarian"
-              leftSection={searchIcon}
+              leftSection={<IconSearch size={20} />}
               w="100%"
               value={searchValue}
               onChange={handleSearchChange}
@@ -108,6 +245,7 @@ function LayoutTabsBerita({
         </Group>
       </Box>
 
+      {/* TABS */}
       <Tabs
         color={colors['blue-button']}
         variant="pills"
@@ -115,7 +253,6 @@ function LayoutTabsBerita({
         onChange={handleTabChange}
       >
         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          {/* SCROLLABLE TABS */}
           <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
             <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
               {tabs.map((tab, index) => (
@@ -124,8 +261,8 @@ function LayoutTabsBerita({
                   value={tab.value}
                   onClick={() => router.push(tab.href)}
                   style={{
-                    flex: '0 0 auto', // Prevent shrinking
+                    flex: '0 0 auto',
-                    minWidth: 100, // optional: makes them touch-friendly
+                    minWidth: 100,
                     textAlign: 'center'
                   }}
                 >

src/app/darmasaba/(pages)/desa/berita/semua/page.tsx

@@ -82,9 +82,7 @@ function Semua() {
                         {featuredData.kategoriBerita?.name || 'Berita'}
                       </Badge>
                       <Title order={2} mb="md">{featuredData.judul}</Title>
-                      <Text color="dimmed" lineClamp={3} mb="md">
+                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featuredData.deskripsi }} />
-                        {featuredData.deskripsi}
-                      </Text>
                     </div>
                     <Group justify="apart" mt="auto">
                       <Group gap="xs">
@@ -146,10 +144,10 @@ function Semua() {
                   </Badge>
 
                   <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
-                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+                  <Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
 
                   <Flex align="center" justify="apart" mt="md" gap="xs">
-                    <Text size="xs" color="dimmed">
+                    <Text size="xs" c="dimmed">
                       {new Date(item.createdAt).toLocaleDateString('id-ID', {
                         day: 'numeric',
                         month: 'short',

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx

@@ -1,40 +1,47 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Group, Pagination, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconFileDescription, IconInfoCircle } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function PelayananSuratKeterangan({ search }: { search: string }) {
-  const [loading, setLoading] = useState(false);
   const router = useRouter();
   const state = useProxy(stateLayananDesa);
 
-  const filteredData = useMemo(() => {
+  const {
-    if (!state.suratKeterangan.findMany.data) return [];
+    data,
-    return state.suratKeterangan.findMany.data.filter((item) => {
+    page,
-      const keyword = search.toLowerCase();
+    totalPages,
-      return item.name?.toLowerCase().includes(keyword);
+    loading,
-    });
+    load
-  }, [state.suratKeterangan.findMany.data, search]);
+  } = state.suratKeterangan.findMany;
 
-  useEffect(() => {
+  useShallowEffect(() => {
-    const loadData = async () => {
+    load(page, 9, search);
-      try {
+  }, [page, search]);
-        setLoading(true);
+
-        await state.suratKeterangan.findMany.load();
+  if (loading || !data) {
-      } catch (error) {
+    return Array.from({ length: 3 }).map((_, i) => (
-        console.error('Gagal memuat data:', error);
+      <Skeleton key={i} h={250} radius="lg" />
-      } finally {
+    ));
-        setLoading(false);
+  }
-      }
+
-    };
+  if (data?.length === 0) {
-    loadData();
+    return (
-  }, []);
+      <Center py="xl">
+        <Stack align="center" gap="xs">
+          <IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
+          <Text c="dimmed" ta="center">
+            Tidak ada layanan surat keterangan yang ditemukan
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
 
   return (
     <Box pb="xl">
@@ -55,69 +62,68 @@ function PelayananSuratKeterangan({ search }: { search: string }) {
         cols={{ base: 1, sm: 2, md: 3 }}
         spacing="lg"
       >
-        {loading ? (
+        {data?.map((v, k) => (
-          Array.from({ length: 3 }).map((_, i) => (
+          <BackgroundImage
-            <Skeleton key={i} h={250} radius="lg" />
+            key={k}
-          ))
+            src={v.image?.link || ''}
-        ) : filteredData.length === 0 ? (
+            h={250}
-          <Center py="xl">
+            radius="lg"
-            <Stack align="center" gap="xs">
+            pos="relative"
-              <IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
+            style={{
-              <Text c="dimmed" ta="center">
+              boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
-                Tidak ada layanan surat keterangan yang ditemukan
+              overflow: "hidden",
+            }}
+          >
+            <Box
+              pos="absolute"
+              w="100%"
+              h="100%"
+              bg="rgba(0,0,0,0.45)"
+              style={{ borderRadius: 16 }}
+            />
+            <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
+              <Text
+                c="white"
+                fw={600}
+                fz="lg"
+                ta="center"
+                lineClamp={2}
+              >
+                {v.name}
               </Text>
-            </Stack>
+              <Group justify="center">
-          </Center>
+                <Button
-        ) : (
+                  size="md"
-          filteredData.map((v, k) => (
+                  radius="xl"
-            <BackgroundImage
+                  bg={colors["blue-button"]}
-              key={k}
+                  px="lg"
-              src={v.image?.link || ''}
+                  onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
-              h={250}
+                  style={{
-              radius="lg"
+                    boxShadow: "0 0 12px rgba(59,130,246,0.6)",
-              pos="relative"
+                    transition: "all 0.2s ease",
-              style={{
+                  }}
-                boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
-                overflow: "hidden",
-              }}
-            >
-              <Box
-                pos="absolute"
-                w="100%"
-                h="100%"
-                bg="rgba(0,0,0,0.45)"
-                style={{ borderRadius: 16 }}
-              />
-              <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
-                <Text
-                  c="white"
-                  fw={600}
-                  fz="lg"
-                  ta="center"
-                  lineClamp={2}
                 >
-                  {v.name}
+                  Lihat Detail
-                </Text>
+                </Button>
-                <Group justify="center">
+              </Group>
-                  <Button
+            </Stack>
-                    size="md"
+          </BackgroundImage>
-                    radius="xl"
+        ))}
-                    bg={colors["blue-button"]}
-                    px="lg"
-                    onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
-                    style={{
-                      boxShadow: "0 0 12px rgba(59,130,246,0.6)",
-                      transition: "all 0.2s ease",
-                    }}
-                  >
-                    Lihat Detail
-                  </Button>
-                </Group>
-              </Stack>
-            </BackgroundImage>
-          ))
-        )}
       </SimpleGrid>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/darmasaba/(pages)/ppid/dasar-hukum/page.tsx

@@ -74,9 +74,8 @@ function Page() {
                       fw="bold"
                       fz={{ base: 'lg', md: 'xl' }}
                       style={{ lineHeight: 1.4 }}
-                    >
+                      dangerouslySetInnerHTML={{ __html: item.judul }}
-                      {item.judul}
+                    />
-                    </Text>
                     <Text
                       fz={{ base: 'sm', md: 'md' }}
                       style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }}

src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx

@@ -262,16 +262,19 @@ function StrukturOrganisasiPPID() {
   }
 
   const posisiMap = new Map<string, any>()
-  for (const pegawai of stateOrganisasi.findMany.data) {
+
-    const posisiId = pegawai.posisi.id
+  const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive);
+
+  for (const pegawai of aktifPegawai) {
+    const posisiId = pegawai.posisi.id;
     if (!posisiMap.has(posisiId)) {
       posisiMap.set(posisiId, {
         ...pegawai.posisi,
         pegawaiList: [],
         children: [],
-      })
+      });
     }
-    posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
   }
 
   const root: any[] = []
@@ -371,7 +374,7 @@ function nodeTemplate(node: any) {
           <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
             {description || 'Belum ada deskripsi.'}
           </Text>
-          <Tooltip label="Lihat detail" withArrow position="bottom">
+          <Tooltip label="Kembali ke struktur organisasi" withArrow position="bottom">
             <Button
               variant="light"
               size="xs"
@@ -383,7 +386,7 @@ function nodeTemplate(node: any) {
                 }
               }}
             >
-              Detail
+              Kembali
             </Button>
           </Tooltip>
         </Card>

src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx

@@ -91,21 +91,17 @@ function Page() {
                   </Group>
                   <Box p={"lg"}>
                     <Text
+                      ta={"center"}
                       fw={"bold"}
                       c={"white"}
                       size={"1.8rem"}
                       style={{
-                        textAlign: "center",
-                        lineHeight: 1.4,
-                        minHeight: '5.4rem',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
                         wordBreak: "break-word", 
                         whiteSpace: "normal"
                       }}
-                      lineClamp={3}
+                      lineClamp={5}
                       dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                      truncate={'end'}
                     />
                   </Box>
                   <Group justify="center">

src/app/darmasaba/_com/main-page/prestasi/index.tsx

@@ -102,6 +102,7 @@ function Prestasi() {
                     ta="center"
                     dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                     style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                    lineClamp={5}
                   />
                   <Group justify="center">
                     <Button