Fix konsisten font, menu landing page & PPID

Fix QC Kak Ayu 8 Des
Fix QC Pak Jun 8 Des

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

@@ -6,145 +6,176 @@ import { z } from "zod";
 
 const templateForm = z.object({
   name: z.string().min(3, "Nama minimal 3 karakter"),
-  nik: z.string().min(3, "NIK minimal 3 karakter"),
-  notelp: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
+  nik: z
+    .string()
+    .min(3, "NIK minimal 3 karakter")
+    .max(16, "NIK maksimal 16 angka"),
+  notelp: z
+    .string()
+    .min(3, "Nomor Telepon minimal 3 karakter")
+    .max(15, "Nomor Telepon maksimal 15 angka"),
   alamat: z.string().min(3, "Alamat minimal 3 karakter"),
   email: z.string().min(3, "Email minimal 3 karakter"),
   jenisInformasiDimintaId: z.string().nonempty(),
   caraMemperolehInformasiId: z.string().nonempty(),
   caraMemperolehSalinanInformasiId: z.string().nonempty(),
-})
+});
 
 const jenisInformasiDiminta = proxy({
-    findMany: {
-        data: null as
-        | null
-        | Prisma.JenisInformasiDimintaGetPayload<{ omit: { isActive: true } }>[],
-        async load(){
-            const res = await ApiFetch.api.ppid.permohonaninformasipublik.jenisInformasi["find-many"].get();
-            if (res.status === 200) {
-                jenisInformasiDiminta.findMany.data = res.data?.data ?? [];
-            }
-        }
-    }
-})
+  findMany: {
+    data: null as
+      | null
+      | Prisma.JenisInformasiDimintaGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res =
+        await ApiFetch.api.ppid.permohonaninformasipublik.jenisInformasi[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        jenisInformasiDiminta.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
 
 const caraMemperolehInformasi = proxy({
-    findMany: {
-        data: null as
-        | null
-        | Prisma.CaraMemperolehInformasiGetPayload<{ omit: { isActive: true } }>[],
-        async load() {
-            const res = await ApiFetch.api.ppid.permohonaninformasipublik.memperolehInformasi["find-many"].get();
-            if (res.status === 200) {
-                caraMemperolehInformasi.findMany.data = res.data?.data ?? [];
-            }
-        }
-    }
-})
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CaraMemperolehInformasiGetPayload<{
+          omit: { isActive: true };
+        }>[],
+    async load() {
+      const res =
+        await ApiFetch.api.ppid.permohonaninformasipublik.memperolehInformasi[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        caraMemperolehInformasi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
 
 const caraMemperolehSalinanInformasi = proxy({
-    findMany: {
-        data: null as
-        | null
-        | Prisma.CaraMemperolehSalinanInformasiGetPayload<{ omit: { isActive: true } }>[],
-        async load() {
-            const res = await ApiFetch.api.ppid.permohonaninformasipublik.salinanInformasi["find-many"].get();
-            if (res.status === 200) {
-                caraMemperolehSalinanInformasi.findMany.data = res.data?.data ?? [];
-            }
-        }
-    }
-})
-console.log(caraMemperolehSalinanInformasi)
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CaraMemperolehSalinanInformasiGetPayload<{
+          omit: { isActive: true };
+        }>[],
+    async load() {
+      const res =
+        await ApiFetch.api.ppid.permohonaninformasipublik.salinanInformasi[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        caraMemperolehSalinanInformasi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+console.log(caraMemperolehSalinanInformasi);
 
-type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<{
+type PermohonanInformasiPublikForm =
+  Prisma.PermohonanInformasiPublikGetPayload<{
     select: {
-        name: true;
-        nik: true;
-        notelp: true;
-        alamat: true;
-        email: true;
-        jenisInformasiDimintaId: true;
-        caraMemperolehInformasiId: true;
-        caraMemperolehSalinanInformasiId: true;
+      name: true;
+      nik: true;
+      notelp: true;
+      alamat: true;
+      email: true;
+      jenisInformasiDimintaId: true;
+      caraMemperolehInformasiId: true;
+      caraMemperolehSalinanInformasiId: true;
     };
-}>;
+  }>;
 
 const statepermohonanInformasiPublik = proxy({
-    create: {
-        form: {} as PermohonanInformasiPublikForm,
-        loading: false,
-        async create(){
-            const cek = templateForm.safeParse(statepermohonanInformasiPublik.create.form);
-            if(!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                statepermohonanInformasiPublik.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(statepermohonanInformasiPublik.create.form);
-                if (res.status === 200) {
-                    statepermohonanInformasiPublik.findMany.load();
-                    return toast.success("Sukses menambahkan");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                statepermohonanInformasiPublik.create.loading = false;
-            }
+  create: {
+    form: {} as PermohonanInformasiPublikForm,
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(
+        statepermohonanInformasiPublik.create.form
+      );
+
+      if (!cek.success) {
+        toast.error(cek.error.issues.map((i) => i.message).join("\n"));
+        return false; // ⬅️ tambahkan return false
+      }
+
+      try {
+        statepermohonanInformasiPublik.create.loading = true;
+        const res = await ApiFetch.api.ppid.permohonaninformasipublik[
+          "create"
+        ].post(statepermohonanInformasiPublik.create.form);
+
+        if (res.data?.success === false) {
+          toast.error(res.data?.message);
+          return false; // ⬅️ gagal
         }
+
+        toast.success("Sukses menambahkan");
+        return true; // ⬅️ sukses
+      } catch {
+        toast.error("Terjadi kesalahan server");
+        return false;
+      } finally {
+        statepermohonanInformasiPublik.create.loading = false;
+      }
     },
-    findMany: {
-        data: null as
-        | Prisma.PermohonanInformasiPublikGetPayload<{ include: {
-            caraMemperolehSalinanInformasi: true,
-            jenisInformasiDiminta: true,
-            caraMemperolehInformasi: true,
-        } }>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.permohonaninformasipublik["find-many"].get();
-            if (res.status === 200) {
-                statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
-            }
-        }
-    },
-    findUnique: {
-        data: null as Prisma.PermohonanInformasiPublikGetPayload<{
+  },
+  findMany: {
+    data: null as
+      | Prisma.PermohonanInformasiPublikGetPayload<{
           include: {
-            jenisInformasiDiminta: true,
-            caraMemperolehInformasi: true,
-            caraMemperolehSalinanInformasi: true,
+            caraMemperolehSalinanInformasi: true;
+            jenisInformasiDiminta: true;
+            caraMemperolehInformasi: 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;
-          }
-        },
-      },
-    
-})
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ppid.permohonaninformasipublik[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        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({
-    statepermohonanInformasiPublik,
-    jenisInformasiDiminta,
-    caraMemperolehInformasi,
-    caraMemperolehSalinanInformasi,
-})
+  statepermohonanInformasiPublik,
+  jenisInformasiDiminta,
+  caraMemperolehInformasi,
+  caraMemperolehSalinanInformasi,
+});
 
 export default statepermohonanInformasiPublikForm;

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

@@ -5,82 +5,99 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-    name: z.string().min(3, "Nama minimal 3 karakter"),
-    email: z.string().min(3, "Email minimal 3 karakter"),
-    notelp: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
-    alasan: z.string().min(3, "Alasan minimal 3 karakter"),
-})
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  email: z.string().min(3, "Email minimal 3 karakter"),
+  notelp: z
+    .string()
+    .min(3, "Nomor Telepon minimal 3 karakter")
+    .max(15, "Nomor Telepon maksimal 15 angka"),
+  alasan: z.string().min(3, "Alasan minimal 3 karakter"),
+});
 
-type PermohonanKeberatanInformasiForm = Prisma.FormulirPermohonanKeberatanGetPayload<{
+type PermohonanKeberatanInformasiForm =
+  Prisma.FormulirPermohonanKeberatanGetPayload<{
     select: {
-        name: true;
-        email: true;
-        notelp: true;
-        alasan: true;
+      name: true;
+      email: true;
+      notelp: true;
+      alasan: true;
     };
-}>;
+  }>;
 
 const permohonanKeberatanInformasi = proxy({
-    create: {
-        form: {} as PermohonanKeberatanInformasiForm,
-        loading: false,
-        async create(){
-            const cek = templateForm.safeParse(permohonanKeberatanInformasi.create.form);
-            if(!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                permohonanKeberatanInformasi.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasi.create.form);
-                if (res.status === 200) {
-                    permohonanKeberatanInformasi.findMany.load();
-                    return toast.success("Sukses menambahkan");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                permohonanKeberatanInformasi.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-        | Prisma.FormulirPermohonanKeberatanGetPayload<{omit: {isActive: true}}>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get();
-            if (res.status === 200) {
-                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;
-          }
-        },
+  create: {
+    form: {} as PermohonanKeberatanInformasiForm,
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(
+        permohonanKeberatanInformasi.create.form
+      );
+      if (!cek.success) {
+        toast.error(cek.error.issues.map((i) => i.message).join("\n"));
+        return false; // ⬅️ tambahkan return false
       }
+      try {
+        permohonanKeberatanInformasi.create.loading = true;
+        const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik[
+          "create"
+        ].post(permohonanKeberatanInformasi.create.form);
+        if (res.data?.success === false) {
+            toast.error(res.data?.message);
+            return false; // ⬅️ gagal
+        }
+
+        toast.success("Sukses menambahkan");
+        return true; // ⬅️ sukses
+      } catch {
+        toast.error("Terjadi kesalahan server");
+        return false;
+      } finally {
+        permohonanKeberatanInformasi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.FormulirPermohonanKeberatanGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        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)/desa/profil/_lib/layoutTabsDetail.tsx

@@ -11,21 +11,21 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
     const pathname = usePathname()
     const tabs = [
         {
-            label: "Profile Desa",
-            value: "profiledesa",
-            href: "/admin/desa/profile/profile-desa",
+            label: "Profil Desa",
+            value: "profildesa",
+            href: "/admin/desa/profil/profil-desa",
             icon: <IconUser size={18} stroke={1.8} />
         },
         {
-            label: "Profile Perbekel",
-            value: "profileperbekel",
-            href: "/admin/desa/profile/profile-perbekel",
+            label: "Profil Perbekel",
+            value: "profilperbekel",
+            href: "/admin/desa/profil/profil-perbekel",
             icon: <IconUsers size={18} stroke={1.8} />
         },
         {
-            label: "Profile Perbekel Dari Masa Ke Masa",
-            value: "profile-perbekel-dari-masa-ke-masa",
-            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa",
+            label: "Profil Perbekel Dari Masa Ke Masa",
+            value: "profilperbekeldarimasakemasa",
+            href: "/admin/desa/profil/profil-perbekel-dari-masa-ke-masa",
             icon: <IconCalendar size={18} stroke={1.8} />
         }
     ];

src/app/admin/(dashboard)/desa/profil/_lib/layoutTabsEdit.tsx

@@ -12,22 +12,22 @@ function LayoutTabsEdit({ children }: { children: React.ReactNode }) {
         {
             label: "Sejarah Desa",
             value: "sejarahdesa",
-            href: "/admin/desa/profile/edit/sejarah_desa"
+            href: "/admin/desa/profil/edit/sejarah_desa"
         },
         {
             label: "Visi Misi Desa",
             value: "visimisidesa",
-            href: "/admin/desa/profile/edit/visi_misi_desa"
+            href: "/admin/desa/profil/edit/visi_misi_desa"
         },
         {
             label: "Lambang Desa",
             value: "lambangdesa",
-            href: "/admin/desa/profile/edit/lambang_desa"
+            href: "/admin/desa/profil/edit/lambang_desa"
         },
         {
             label: "Maskot Desa",
             value: "maskotdesa",
-            href: "/admin/desa/profile/edit/maskot_desa"
+            href: "/admin/desa/profil/edit/maskot_desa"
         },
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/lambang_desa/page.tsx

@@ -43,7 +43,7 @@ function Page() {
       const id = params?.id as string;
       if (!id) {
         toast.error('ID tidak valid');
-        router.push('/admin/desa/profile/profile-desa');
+        router.push('/admin/desa/profil/profil-desa');
         return;
       }
 
@@ -106,7 +106,7 @@ function Page() {
 
       if (success) {
         toast.success('Data berhasil disimpan');
-        router.push('/admin/desa/profile/profile-desa');
+        router.push('/admin/desa/profil/profil-desa');
       } else {
         toast.error('Gagal menyimpan data');
       }
@@ -156,7 +156,7 @@ function Page() {
           <Alert icon={<IconAlertCircle size={20} />} color="red" title="Terjadi Kesalahan" radius="md">
             {loadError}
           </Alert>
-          <Button onClick={() => router.push('/admin/desa/profile/profile-desa')} variant="outline">
+          <Button onClick={() => router.push('/admin/desa/profil/profil-desa')} variant="outline">
             Kembali ke Halaman Utama
           </Button>
         </Stack>

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

@@ -40,7 +40,7 @@ function Page() {
       const id = params?.id as string;
       if (!id) {
         toast.error("ID tidak valid");
-        router.push("/admin/desa/profile/profile-desa");
+        router.push("/admin/desa/profil/profil-desa");
         return;
       }
 
@@ -157,7 +157,7 @@ function Page() {
 
       if (success) {
         toast.success("Maskot berhasil diperbarui!");
-        router.push("/admin/desa/profile/profile-desa");
+        router.push("/admin/desa/profil/profil-desa");
       }
     } catch (error) {
       console.error("Error update maskot:", error);

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/sejarah_desa/page.tsx

@@ -50,7 +50,7 @@ function Page() {
             const id = params?.id as string;
             if (!id) {
                 toast.error('ID tidak valid');
-                router.push('/admin/desa/profile/profile-desa');
+                router.push('/admin/desa/profil/profil-desa');
                 return;
             }
 
@@ -122,7 +122,7 @@ function Page() {
 
             if (success) {
                 toast.success('Data berhasil disimpan');
-                router.push('/admin/desa/profile/profile-desa');
+                router.push('/admin/desa/profil/profil-desa');
             } else {
                 toast.error('Gagal menyimpan data');
             }
@@ -179,7 +179,7 @@ function Page() {
                         {loadError}
                     </Alert>
                     <Button
-                        onClick={() => router.push('/admin/desa/profile/profile-desa')}
+                        onClick={() => router.push('/admin/desa/profil/profil-desa')}
                         variant="outline"
                     >
                         Kembali ke Halaman Utama

src/app/admin/(dashboard)/desa/profil/profil-desa/[id]/visi_misi_desa/page.tsx

@@ -42,7 +42,7 @@ function Page() {
       const id = params?.id as string;
       if (!id) {
         toast.error('ID tidak valid');
-        router.push('/admin/desa/profile/profile-desa');
+        router.push('/admin/desa/profil/profil-desa');
         return;
       }
 
@@ -106,7 +106,7 @@ function Page() {
 
       if (success) {
         toast.success('Data berhasil disimpan');
-        router.push('/admin/desa/profile/profile-desa');
+        router.push('/admin/desa/profil/profil-desa');
       } else {
         toast.error('Gagal menyimpan data');
       }
@@ -156,7 +156,7 @@ function Page() {
             {loadError}
           </Alert>
           <Button
-            onClick={() => router.push('/admin/desa/profile/profile-desa')}
+            onClick={() => router.push('/admin/desa/profil/profil-desa')}
             variant="outline"
           >
             Kembali ke Halaman Utama

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

@@ -27,7 +27,7 @@ function Page() {
   return (
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="lg">
-        <Title order={2} c={colors['blue-button']}>Preview Profile Desa</Title>
+        <Title order={2} c={colors['blue-button']}>Preview Profil Desa</Title>
 
         {/* Sejarah Desa */}
         {sejarah && (
@@ -42,7 +42,7 @@ function Page() {
                     variant="light"
                     leftSection={<IconEdit size={18} stroke={2} />}
                     radius="md"
-                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${sejarah.id}/sejarah_desa`)}
+                    onClick={() => router.push(`/admin/desa/profil/profil-desa/${sejarah.id}/sejarah_desa`)}
                   >
                     Edit
                   </Button>
@@ -87,7 +87,7 @@ function Page() {
                     variant="light"
                     leftSection={<IconEdit size={18} stroke={2} />}
                     radius="md"
-                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${visiMisi.id}/visi_misi_desa`)}
+                    onClick={() => router.push(`/admin/desa/profil/profil-desa/${visiMisi.id}/visi_misi_desa`)}
                   >
                     Edit
                   </Button>
@@ -135,7 +135,7 @@ function Page() {
                     variant="light"
                     leftSection={<IconEdit size={18} stroke={2} />}
                     radius="md"
-                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${lambang.id}/lambang_desa`)}
+                    onClick={() => router.push(`/admin/desa/profil/profil-desa/${lambang.id}/lambang_desa`)}
                   >
                     Edit
                   </Button>
@@ -180,7 +180,7 @@ function Page() {
                     variant="light"
                     leftSection={<IconEdit size={18} stroke={2} />}
                     radius="md"
-                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${maskot.id}/maskot_desa`)}
+                    onClick={() => router.push(`/admin/desa/profil/profil-desa/${maskot.id}/maskot_desa`)}
                   >
                     Edit
                   </Button>

src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx

@@ -117,7 +117,7 @@ function EditPerbekelDariMasaKeMasa() {
 
       await state.update.update();
       toast.success('Perbekel dari masa ke masa berhasil diperbarui!');
-      router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
+      router.push('/admin/desa/profil/profil-perbekel-dari-masa-ke-masa');
     } catch (error) {
       console.error('Error updating perbekel dari masa ke masa:', error);
       toast.error('Terjadi kesalahan saat memperbarui perbekel dari masa ke masa');

src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/[id]/page.tsx

@@ -25,7 +25,7 @@ function DetailPerbekelDariMasa() {
       state.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa");
+      router.push("/admin/desa/profil/profil-perbekel-dari-masa-ke-masa");
     }
   };
 
@@ -113,7 +113,7 @@ function DetailPerbekelDariMasa() {
 
                   <Button
                     color="green"
-                    onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${data.id}/edit`)}
+                    onClick={() => router.push(`/admin/desa/profil/profil-perbekel-dari-masa-ke-masa/${data.id}/edit`)}
                     variant="light"
                     radius="md"
                     size="md"

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

@@ -46,7 +46,7 @@ function CreatePerbekelDariMasaKeMasa() {
       state.create.form.imageId = uploaded.id;
       await state.create.create();
       resetForm();
-      router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
+      router.push('/admin/desa/profil/profil-perbekel-dari-masa-ke-masa');
     } catch (error) {
       console.error(error);
       toast.error('Gagal menambahkan perbekel dari masa ke masa');

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

@@ -53,7 +53,7 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() => router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create')}
+              onClick={() => router.push('/admin/desa/profil/profil-perbekel-dari-masa-ke-masa/create')}
             >
               Tambah Baru
             </Button>
@@ -90,7 +90,7 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
                           variant="light"
                           color="blue"
                           leftSection={<IconDeviceImacCog size={16} />}
-                          onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
+                          onClick={() => router.push(`/admin/desa/profil/profil-perbekel-dari-masa-ke-masa/${item.id}`)}
                         >
                           Detail
                         </Button>

src/app/admin/(dashboard)/desa/profil/profil-perbekel/[id]/page.tsx

@@ -25,7 +25,7 @@ function ProfilePerbekel() {
       const id = params?.id as string;
       if (!id) {
         toast.error("ID tidak valid");
-        router.push("/admin/desa/profile/profile-perbekel");
+        router.push("/admin/desa/profil/profil-perbekel");
         return;
       }
 
@@ -74,7 +74,7 @@ function ProfilePerbekel() {
       const success = await perbekelState.edit.submit()
       if (success) {
         toast.success("Data berhasil disimpan");
-        router.push("/admin/desa/profile/profile-perbekel");
+        router.push("/admin/desa/profil/profil-perbekel");
       }
     } catch (error) {
       console.error("Error update sejarah desa:", error);

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

@@ -41,7 +41,7 @@ function Page() {
                 variant="light"
                 leftSection={<IconEdit size={18} stroke={2} />}
                 radius="md"
-                onClick={() => router.push(`/admin/desa/profile/profile-perbekel/${perbekel.id}`)}
+                onClick={() => router.push(`/admin/desa/profil/profil-perbekel/${perbekel.id}`)}
               >
                 Edit
               </Button>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx

@@ -20,9 +20,9 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
       icon: <IconActivity size={18} stroke={1.8} />
     },
     {
-      label: "Grafik Hasil Kepuasan Masyarakat",
-      value: "grafikhasilkepuasan",
-      href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan",
+      label: "Penderita Penyakit",
+      value: "penderitapenyakit",
+      href: "/admin/kesehatan/data-kesehatan-warga/penderita_penyakit",
       icon: <IconGauge size={18} stroke={1.8} />
     },
     {

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx

@@ -70,8 +70,8 @@ function EditGrafikHasilKepuasan() {
           });
         }
       } catch (err) {
-        console.error("Error loading grafik hasil kepuasan:", err);
-        toast.error("Gagal memuat data grafik hasil kepuasan");
+        console.error("Error loading penderita penyakit:", err);
+        toast.error("Gagal memuat data penderita penyakit");
       }
     };
 
@@ -99,11 +99,11 @@ function EditGrafikHasilKepuasan() {
       setIsSubmitting(true);
       editState.update.form = { ...editState.update.form, ...formData };
       await editState.update.submit();
-      toast.success('Grafik hasil kepuasan berhasil diperbarui!');
-      router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan');
+      toast.success('penderita penyakit berhasil diperbarui!');
+      router.push('/admin/kesehatan/data-kesehatan-warga/penderita_penyakit');
     } catch (err) {
-      console.error('Error updating grafik hasil kepuasan:', err);
-      toast.error('Terjadi kesalahan saat memperbarui grafik hasil kepuasan');
+      console.error('Error updating penderita penyakit:', err);
+      toast.error('Terjadi kesalahan saat memperbarui penderita penyakit');
     } finally {
       setIsSubmitting(false);
     }
@@ -122,7 +122,7 @@ function EditGrafikHasilKepuasan() {
           <IconArrowBack color={colors['blue-button']} size={24} />
         </Button>
         <Title order={4} ml="sm" c="dark">
-          Edit Grafik Hasil Kepuasan
+          Edit Penderita Penyakit
         </Title>
       </Group>
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/page.tsx

@@ -26,7 +26,7 @@ function DetailGrafikHasilKepuasan() {
       state.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
+      router.push("/admin/kesehatan/data-kesehatan-warga/penderita_penyakit");
     }
   };
 
@@ -63,7 +63,7 @@ function DetailGrafikHasilKepuasan() {
       >
         <Stack gap="md">
           <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Data Grafik Hasil Kepuasan
+            Detail Data Penderita Penyakit
           </Text>
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
@@ -118,7 +118,7 @@ function DetailGrafikHasilKepuasan() {
                   color="green"
                   onClick={() =>
                     router.push(
-                      `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${data.id}/edit`
+                      `/admin/kesehatan/data-kesehatan-warga/penderita_penyakit/${data.id}/edit`
                     )
                   }
                   variant="light"

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/create/page.tsx

@@ -40,7 +40,7 @@ function CreateGrafikHasilKepuasanMasyarakat() {
       setIsSubmitting(true);
       await stateGrafikKepuasan.create.create();
       resetForm();
-      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
+      router.push("/admin/kesehatan/data-kesehatan-warga/penderita_penyakit");
     } catch (error) {
       console.error("Error creating grafik kepuasan:", error);
       toast.error("Terjadi kesalahan saat membuat grafik kepuasan");
@@ -62,7 +62,7 @@ function CreateGrafikHasilKepuasanMasyarakat() {
           <IconArrowBack color={colors['blue-button']} size={24} />
         </Button>
         <Title order={4} ml="sm" c="dark">
-          Tambah Grafik Hasil Kepuasan Masyarakat
+          Tambah Penderita Penyakit
         </Title>
       </Group>
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/page.tsx

@@ -36,7 +36,7 @@ function GrafikHasilKepuasanMasyarakat() {
     <Box>
       {/* Header Search */}
       <HeaderSearch
-        title='Grafik Hasil Kepuasan Masyarakat'
+        title='Penderita Penyakit'
         placeholder='Cari nama atau alamat...'
         searchIcon={<IconSearch size={20} />}
         value={search}
@@ -115,14 +115,14 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
       <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
         {/* Judul + Tombol Tambah */}
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Grafik Hasil Kepuasan Masyarakat</Title>
+          <Title order={4}>Daftar Penderita Penyakit</Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
             onClick={() =>
               router.push(
-                '/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create'
+                '/admin/kesehatan/data-kesehatan-warga/penderita_penyakit/create'
               )
             }
           >
@@ -176,7 +176,7 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
                         color="blue"
                         onClick={() =>
                           router.push(
-                            `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`
+                            `/admin/kesehatan/data-kesehatan-warga/penderita_penyakit/${item.id}`
                           )
                         }
                       >
@@ -221,7 +221,7 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
       {/* Chart */}
       <Box mt="lg" style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
         <Paper withBorder bg={colors['white-1']} p={'md'}>
-          <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+          <Title pb={10} order={4}>Penderita Penyakit</Title>
           {mounted && diseaseChartData.length > 0 ? (
             <Center>
               <BarChart

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

@@ -30,12 +30,13 @@ function Page() {
   return (
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
-        <Grid align="center">
+        <Grid>
           <GridCol span={{ base: 12, md: 11 }}>
             <Title order={3} c={colors['blue-button']}>Preview Profil PPID</Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
               <Button
+                w={{base: '100%', md: "110%"}}
                 c="green"
                 variant="light"
                 leftSection={<IconEdit size={18} stroke={2} />}

src/app/admin/_com/list_PageAdmin.tsx

@@ -91,8 +91,8 @@ export const devBar = [
     children: [
       {
         id: "Desa_1",
-        name: "Profile",
-        path: "/admin/desa/profile/profile-desa"
+        name: "Profil",
+        path: "/admin/desa/profil/profil-desa"
       },
       {
         id: "Desa_2",
@@ -495,8 +495,8 @@ export const navBar = [
     children: [
       {
         id: "Desa_1",
-        name: "Profile",
-        path: "/admin/desa/profile/profile-desa"
+        name: "Profil",
+        path: "/admin/desa/profil/profil-desa"
       },
       {
         id: "Desa_2",
@@ -899,8 +899,8 @@ export const role1 = [
     children: [
       {
         id: "Desa_1",
-        name: "Profile",
-        path: "/admin/desa/profile/profile-desa"
+        name: "Profil",
+        path: "/admin/desa/profil/profil-desa"
       },
       {
         id: "Desa_2",

src/app/api/[[...slugs]]/_lib/desa/berita/del.ts

@@ -6,33 +6,24 @@ import path from "path";
 const beritaDelete = async (context: Context) => {
   const id = context.params?.id as string;
 
-  if (!id) {
-    return {
-      status: 400,
-      body: "ID tidak diberikan",
-    };
-  }
+  if (!id) return { status: 400, body: "ID tidak diberikan" };
 
   const berita = await prisma.berita.findUnique({
     where: { id },
-    include: {
-      image: true,
-      kategoriBerita: true, // pastikan relasi image sudah ada di prisma schema
-    },
+    include: { image: true, kategoriBerita: true },
   });
 
-  if (!berita) {
-    return {
-      status: 404,
-      body: "Berita tidak ditemukan",
-    };
-  }
+  if (!berita) return { status: 404, body: "Berita tidak ditemukan" };
 
-  // Hapus file gambar dari filesystem jika ada
+  // 1. HAPUS BERITA DULU
+  await prisma.berita.delete({ where: { id } });
+
+  // 2. BARU HAPUS FILE
   if (berita.image) {
     try {
       const filePath = path.join(berita.image.path, berita.image.name);
       await fs.unlink(filePath);
+
       await prisma.fileStorage.delete({
         where: { id: berita.image.id },
       });
@@ -41,15 +32,11 @@ const beritaDelete = async (context: Context) => {
     }
   }
 
-  // Hapus berita dari DB
-  await prisma.berita.delete({
-    where: { id },
-  });
-
   return {
     success: true,
     message: "Berita dan file terkait berhasil dihapus",
   };
 };
 
+
 export default beritaDelete;

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

@@ -1,6 +1,5 @@
 import Elysia from "elysia";
 import DaftarInformasiPublik from "./daftar_informasi_publik";
-import GrafikHasilKepuasanMasyarakat from "./ikm/grafik_hasil_kepuasan_masyarakat";
 import GrafikBerdasarkanJenisKelamin from "./ikm/grafik_berdasarkan_jenis_kelamin";
 import GrafikBerdasarkanResponden from "./ikm/grafik_responden";
 import GrafikBerdasarkanUmur from "./ikm/grafik_berdasarkan_umur";
@@ -10,6 +9,7 @@ import ProfilePPID from "./profile_ppid";
 import VisiMisiPPID from "./visi_misi_ppid/visi_misi_ppid";
 import DasarHukumPPID from "./dasar_hukum";
 import StrukturPPID from "./struktur_ppid";
+import GrafikHasilKepuasanMasyarakat from "./ikm/grafik_hasil_kepuasan_masyarakat";
 
 
 

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

@@ -3,39 +3,55 @@ import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
 type FormCreate = Prisma.PermohonanInformasiPublikGetPayload<{
-    select: {
-        name: true;
-        nik: true;
-        email: true;
-        notelp: true;
-        alamat: true;
-        jenisInformasiDimintaId: true;
-        caraMemperolehInformasiId: true;
-        caraMemperolehSalinanInformasiId: true;
-    }
-}>
-export default async function permohonanInformasiPublikCreate(context: Context) {
-    const body = context.body as FormCreate;
-    
-    await prisma.permohonanInformasiPublik.create({
-        data: {
-            name: body.name,
-            nik: body.nik,
-            email: body.email,
-            notelp: body.notelp,
-            alamat: body.alamat,
-            jenisInformasiDimintaId: body.jenisInformasiDimintaId,
-            caraMemperolehInformasiId: body.caraMemperolehInformasiId,
-            caraMemperolehSalinanInformasiId: body.caraMemperolehSalinanInformasiId,
-        }
-    })
+  select: {
+    name: true;
+    nik: true;
+    email: true;
+    notelp: true;
+    alamat: true;
+    jenisInformasiDimintaId: true;
+    caraMemperolehInformasiId: true;
+    caraMemperolehSalinanInformasiId: true;
+  };
+}>;
 
+export default async function permohonanInformasiPublikCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  // ========== VALIDASI NIK ==========
+  if (body.nik && body.nik.length > 16) {
     return {
-        success: true,
-        message: "Permohonan Informasi Publik Berhasil Dibuat",
-        data: {
-            ...body,
-        }
-    }
+      success: false,
+      status: 400,
+      message: "Maksimal NIK adalah 16 angka",
+    };
+  }
+
+  // ========== VALIDASI NOMOR TELEPON ==========
+  if (body.notelp && body.notelp.length > 15) {
+    return {
+      success: false,
+      status: 400,
+      message: "Maksimal nomor telepon adalah 15 angka",
+    };
+  }
+
+  await prisma.permohonanInformasiPublik.create({
+    data: {
+      name: body.name,
+      nik: body.nik,
+      email: body.email,
+      notelp: body.notelp,
+      alamat: body.alamat,
+      jenisInformasiDimintaId: body.jenisInformasiDimintaId,
+      caraMemperolehInformasiId: body.caraMemperolehInformasiId,
+      caraMemperolehSalinanInformasiId: body.caraMemperolehSalinanInformasiId,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Permohonan Informasi Publik Berhasil Dibuat",
+    data: { ...body },
+  };
 }
-    

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

@@ -3,31 +3,42 @@ import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
 type FormCreate = Prisma.FormulirPermohonanKeberatanGetPayload<{
-    select: {
-        name: true;
-        email: true;
-        notelp: true;
-        alasan: true;
-    }
-}>
+  select: {
+    name: true;
+    email: true;
+    notelp: true;
+    alasan: true;
+  };
+}>;
 
-export default async function permohonanKeberatanInformasiPublikCreate(context: Context) {
-    const body = context.body as FormCreate;
-
-    await prisma.formulirPermohonanKeberatan.create({
-        data: {
-            name: body.name,
-            email: body.email,
-            notelp: body.notelp,
-            alasan: body.alasan,
-        }
-    })
+export default async function permohonanKeberatanInformasiPublikCreate(
+  context: Context
+) {
+  const body = context.body as FormCreate;
 
+  // ========== VALIDASI NOMOR TELEPON ==========
+  if (body.notelp && body.notelp.length > 15) {
     return {
-        success: true,
-        message: "Permohonan Keberatan Informasi Publik Berhasil Dibuat",
-        data: {
-            ...body,
-        }
-    }
-}
+      success: false,
+      status: 400,
+      message: "Maksimal nomor telepon adalah 15 angka",
+    };
+  }
+
+  await prisma.formulirPermohonanKeberatan.create({
+    data: {
+      name: body.name,
+      email: body.email,
+      notelp: body.notelp,
+      alasan: body.alasan,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Permohonan Keberatan Informasi Publik Berhasil Dibuat",
+    data: {
+      ...body,
+    },
+  };
+}

src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx

@@ -100,7 +100,7 @@ function Page() {
           {data.name}
         </Text>
       </Container>
-      <Box px={{ base: "md", md: 100 }}>
+      <Box px={{ base: "35", md: 100 }}>
         <Stack gap="md">
           <Text
             dangerouslySetInnerHTML={{ __html: data.deskripsi }}

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/adat-&-budaya/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
-    tanggal: 'Jumat, 26 April 2025',
-    jam: '16:00 WITA',
-    lokasi: 'Wantilan Adat Desa',
-    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
-  },
-  {
-    id: 2,
-    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
-    tanggal: 'Jumat, 26 April 2025',
-    jam: '16:00 WITA',
-    lokasi: 'Wantilan Adat Desa',
-    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
-  },
-  {
-    id: 3,
-    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
-    tanggal: 'Jumat, 26 April 2025',
-    jam: '16:00 WITA',
-    lokasi: 'Wantilan Adat Desa',
-    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
-  },
-  {
-    id: 4,
-    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
-    tanggal: 'Jumat, 26 April 2025',
-    jam: '16:00 WITA',
-    lokasi: 'Wantilan Adat Desa',
-    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
-  },
-  {
-    id: 5,
-    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
-    tanggal: 'Jumat, 26 April 2025',
-    jam: '16:00 WITA',
-    lokasi: 'Wantilan Adat Desa',
-    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Adat & Budaya
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman adat & budaya di Desa Darmasaba.
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/digitalisasi-desa/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
-    tanggal: 'Selasa, 30 April 2025',
-    jam: '09:00 WITA',
-    lokasi: 'Perpustakaan Desa',
-    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
-  },
-  {
-    id: 2,
-    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
-    tanggal: 'Selasa, 30 April 2025',
-    jam: '09:00 WITA',
-    lokasi: 'Perpustakaan Desa',
-    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
-  },
-  {
-    id: 3,
-    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
-    tanggal: 'Selasa, 30 April 2025',
-    jam: '09:00 WITA',
-    lokasi: 'Perpustakaan Desa',
-    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
-    tanggal: 'Selasa, 30 April 2025',
-    jam: '09:00 WITA',
-    lokasi: 'Perpustakaan Desa',
-    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
-  },
-  {
-    id: 5,
-    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
-    tanggal: 'Selasa, 30 April 2025',
-    jam: '09:00 WITA',
-    lokasi: 'Perpustakaan Desa',
-    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Digitalisasi Desa
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman digitalisasi desa
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/ekonomi-&-umkm/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
-    tanggal: 'Rabu, 23 April 2025',
-    jam: '13:00 WITA',
-    lokasi: 'Aula Kantor Desa',
-    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
-  },
-  {
-    id: 2,
-    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
-    tanggal: 'Rabu, 23 April 2025',
-    jam: '13:00 WITA',
-    lokasi: 'Aula Kantor Desa',
-    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
-  },
-  {
-    id: 3,
-    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
-    tanggal: 'Rabu, 23 April 2025',
-    jam: '13:00 WITA',
-    lokasi: 'Aula Kantor Desa',
-    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
-    tanggal: 'Rabu, 23 April 2025',
-    jam: '13:00 WITA',
-    lokasi: 'Aula Kantor Desa',
-    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
-  },
-  {
-    id: 5,
-    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
-    tanggal: 'Rabu, 23 April 2025',
-    jam: '13:00 WITA',
-    lokasi: 'Aula Kantor Desa',
-    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Ekonomi & UMKM
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman ekonomi & umkm
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/lingkungan-&-bencana/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Gotong Royong Bersih Sungai dan Drainase',
-    tanggal: 'Minggu, 21 April 2025',
-    jam: '06:30 WITA',
-    lokasi: 'Titik Kumpul: Poskamling RW 02',
-    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
-  },
-  {
-    id: 2,
-    judul: 'Gotong Royong Bersih Sungai dan Drainase',
-    tanggal: 'Minggu, 21 April 2025',
-    jam: '06:30 WITA',
-    lokasi: 'Titik Kumpul: Poskamling RW 02',
-    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
-  },
-  {
-    id: 3,
-    judul: 'Gotong Royong Bersih Sungai dan Drainase',
-    tanggal: 'Minggu, 21 April 2025',
-    jam: '06:30 WITA',
-    lokasi: 'Titik Kumpul: Poskamling RW 02',
-    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
-  },
-  {
-    id: 4,
-    judul: 'Gotong Royong Bersih Sungai dan Drainase',
-    tanggal: 'Minggu, 21 April 2025',
-    jam: '06:30 WITA',
-    lokasi: 'Titik Kumpul: Poskamling RW 02',
-    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
-  },
-  {
-    id: 5,
-    judul: 'Gotong Royong Bersih Sungai dan Drainase',
-    tanggal: 'Minggu, 21 April 2025',
-    jam: '06:30 WITA',
-    lokasi: 'Titik Kumpul: Poskamling RW 02',
-    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Lingkungan & Bencana
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman lingkungan & bencana
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/pendidikan-&-kepemudaan/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 2,
-    judul: 'Lomba Video Pendek Hari Lingkungan',
-    tanggal: 'Deadline: 28 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Online Submission',
-    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
-  },
-  {
-    id: 3,
-    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 4,
-    judul: 'Lomba Video Pendek Hari Lingkungan',
-    tanggal: 'Deadline: 28 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Online Submission',
-    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
-  },
-  {
-    id: 5,
-    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Pendidikan & Kepemudaan
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman pendidikan & kepemudaan
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/sosial-&-kesehatan/page.tsx

@@ -1,96 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
-
-const dataPengumuman = [
-  {
-    id: 1,
-    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 2,
-    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 3,
-    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 4,
-    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-  {
-    id: 5,
-    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
-    tanggal: 'Sabtu, 20 April 2025',
-    jam: '08:00 WITA',
-    lokasi: 'Balai Banjar Desa Darmasaba',
-    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
-  },
-]
-function Page() {
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md" >
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Pengumuman Sosial & Kesehatan
-          </Text>
-          <Text ta="center" px="md" pb={10}>
-            Informasi dan pengumuman resmi terkait pengumuman sosial & kesehatan
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: 'md', md: 100 }}>
-        {dataPengumuman.map((v, k) => {
-          return (
-            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
-              <Text fz={'h3'}>{v.judul}</Text>
-              <Group style={{ color: 'black' }} pb={20}>
-                <Group gap="xs">
-                  <IconCalendar size={18} />
-                  <Text size="sm">{v.tanggal}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconClock size={18} />
-                  <Text size="sm">{v.jam}</Text>
-                </Group>
-                <Group gap="xs">
-                  <IconMapPin size={18} />
-                  <Text size="sm">{v.lokasi}</Text>
-                </Group>
-              </Group>
-              <Text ta={'justify'}>
-                {v.deskripsi}
-              </Text>
-            </Paper>
-          )
-        })}
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx

@@ -46,8 +46,8 @@ function Page() {
               </Group>
             </Group>
           <Paper bg={colors["white-1"]} p="md">
-            <Text id='news-content' fz={"md"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
-            <Text fz={"md"} c={colors["blue-button"]} fw="bold" >
+            <Text px="lg" id='news-content' fz={"md"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
+            <Text px="lg" fz={"md"} c={colors["blue-button"]} fw="bold" >
               {new Date(detail.data?.createdAt).toLocaleDateString('id-ID', {
                 weekday: 'long',
                 day: 'numeric',

src/app/darmasaba/(pages)/desa/profil/struktur-perangkat-desa/page.tsx

@@ -14,6 +14,9 @@ import {
   Loader,
   Paper,
   Stack,
+  Tabs,
+  TabsList,
+  TabsTab,
   Text,
   TextInput,
   Title,
@@ -35,6 +38,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useProxy } from 'valtio/utils'
 import './struktur.css'
 import BackButton from '../_com/BackButto'
+import { useMediaQuery } from '@mantine/hooks'
 
 export default function StrukturPerangkatDesa() {
   return (
@@ -231,87 +235,121 @@ function StrukturPerangkatDesaNode() {
         p="md"
         radius="md"
         style={{
-          background: colors['blue-button']
+          background: colors['blue-button'],
+          width: '100%',       // ⬅️ penting
+          maxWidth: '100%',    // ⬅️ penting
+          overflowX: 'auto'    // ⬅️ untuk mencegah overflow
         }}
       >
-        <Group gap="sm" wrap="wrap" justify="center">
-          <TextInput
-            placeholder="Cari nama atau jabatan..."
-            leftSection={<IconSearch size={16} />}
-            onChange={(e) => debouncedSearch(e.target.value)}
+
+        <Stack gap="sm">
+          <Group justify='center'>
+            <TextInput
+              placeholder="Cari nama atau jabatan..."
+              leftSection={<IconSearch size={16} />}
+              onChange={(e) => debouncedSearch(e.target.value)}
+              styles={{
+                input: {
+                  minWidth: 250,
+                },
+              }}
+            />
+          </Group>
+          <Tabs
+            defaultValue="zoom-out"
+            variant="outline"
+            radius="md"
             styles={{
-              input: {
-                minWidth: 250,
+              panel: { display: 'none' },
+              tab: {
+                color: colors['blue-button'],
+                backgroundColor: colors['blue-button-2'],
+                border: 'none',
+                fontWeight: 600,
+                fontSize: '0.875rem',
+                padding: '6px 12px',
+                minHeight: 'auto',
+                flexShrink: 0, // 👈 PENTING: mencegah tab mengecil
               },
             }}
-          />
-
-          <Group gap="xs">
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              size="sm"
-              onClick={handleZoomOut}
-              leftSection={<IconZoomOut size={16} />}
-              c={colors['blue-button']}
-            >
-              Zoom Out
-            </Button>
-
-            <Box
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              px={16}
-              py={8}
+          >
+            <TabsList
               style={{
-                fontSize: 14,
-                fontWeight: 700,
-                borderRadius: '8px',
-                minWidth: 70,
-                textAlign: 'center',
+                display: 'flex',
+                overflowX: 'auto',
+                overflowY: 'hidden', // 👈 tambahkan ini
+                gap: '4px',
+                paddingBottom: '4px',
+                flexWrap: 'nowrap',
+                WebkitOverflowScrolling: 'touch', // 👈 smooth scroll di iOS
+                scrollbarWidth: 'thin', // 👈 scrollbar tipis di Firefox
+                msOverflowStyle: '-ms-autohiding-scrollbar', // 👈 untuk IE/Edge
               }}
             >
-              {Math.round(scale * 100)}%
-            </Box>
+              <TabsTab
+                value="zoom-out"
+                onClick={handleZoomOut}
+                leftSection={<IconZoomOut size={16} />}
+                style={{ flexShrink: 0 }} // 👈 pastikan tidak mengecil
+              >
+                Zoom Out
+              </TabsTab>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={handleZoomIn}
-              leftSection={<IconZoomIn size={16} />}
-            >
-              Zoom In
-            </Button>
+              <Box
+                bg={colors['blue-button-2']}
+                c={colors['blue-button']}
+                px={12}
+                py={6}
+                style={{
+                  fontSize: 14,
+                  fontWeight: 700,
+                  borderRadius: '6px',
+                  minWidth: 60,
+                  textAlign: 'center',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                  whiteSpace: 'nowrap', // 👈 mencegah text wrap
+                }}
+              >
+                {Math.round(scale * 100)}%
+              </Box>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={resetZoom}
-            >
-              Reset
-            </Button>
+              <TabsTab
+                value="zoom-in"
+                onClick={handleZoomIn}
+                leftSection={<IconZoomIn size={16} />}
+                style={{ flexShrink: 0 }}
+              >
+                Zoom In
+              </TabsTab>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={toggleFullscreen}
-              leftSection={
-                isFullscreen ? (
-                  <IconArrowsMinimize size={16} />
-                ) : (
-                  <IconArrowsMaximize size={16} />
-                )
-              }
-            >
-              Fullscreen
-            </Button>
-          </Group>
-        </Group>
+              <TabsTab
+                value="reset"
+                onClick={resetZoom}
+                style={{ flexShrink: 0 }}
+              >
+                Reset
+              </TabsTab>
+
+              <TabsTab
+                value="fullscreen"
+                onClick={toggleFullscreen}
+                leftSection={
+                  isFullscreen ? (
+                    <IconArrowsMinimize size={16} />
+                  ) : (
+                    <IconArrowsMaximize size={16} />
+                  )
+                }
+                style={{ flexShrink: 0 }}
+              >
+                {isFullscreen ? 'Exit' : 'Fullscreen'}
+              </TabsTab>
+            </TabsList>
+          </Tabs>
+        </Stack>
       </Paper>
 
       {/* 🧩 Chart Container */}
@@ -325,15 +363,20 @@ function StrukturPerangkatDesaNode() {
             maxWidth: '100%',
             padding: '32px 16px',
             transition: 'transform 0.2s ease',
-            transform: `scale(${scale})`,
-            transformOrigin: 'center top',
           }}
         >
-          <OrganizationChart
-            value={chartData}
-            nodeTemplate={(node) => <NodeCard node={node} router={router} />}
-            className="p-organizationchart p-organizationchart-horizontal"
-          />
+          <Box style={{
+            transform: `scale(${scale})`,
+            transformOrigin: 'center top',
+            display: 'inline-block', // 👈 agar tidak memenuhi lebar parent
+            minWidth: 'min-content', // 👈 penting agar chart tidak dipaksa muat di width 100%
+          }}>
+            <OrganizationChart
+              value={chartData}
+              nodeTemplate={(node) => <NodeCard node={node} router={router} />}
+              className="p-organizationchart p-organizationchart-horizontal"
+            />
+          </Box>
         </Box>
       </Center>
     </Stack>
@@ -345,6 +388,7 @@ function NodeCard({ node, router }: any) {
   const name = node?.data?.name || 'Tanpa Nama'
   const title = node?.data?.title || 'Tanpa Jabatan'
   const hasId = Boolean(node?.data?.id)
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   return (
     <Transition mounted transition="pop" duration={300}>
@@ -355,9 +399,10 @@ function NodeCard({ node, router }: any) {
           withBorder
           style={{
             ...styles,
-            width: 240,
-            minHeight: 280,
-            padding: 20,
+            width: '100%',
+            maxWidth: isMobile ? 200 : 240, // lebih kecil di mobile
+            minHeight: isMobile ? 240 : 280,
+            padding: isMobile ? 16 : 20,
             background: 'linear-gradient(135deg, rgba(28,110,164,0.15) 0%, rgba(255,255,255,0.95) 100%)',
             borderColor: 'rgba(28, 110, 164, 0.3)',
             borderWidth: 2,

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -26,7 +26,7 @@ function Page() {
   const state = useProxy(lowonganKerjaState)
   const router = useRouter()
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const {
     data,

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -14,7 +14,7 @@ function Page() {
   const router = useRouter()
   const state = useProxy(pasarDesaState.pasarDesa)
   const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const {
     data,

src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx

@@ -32,7 +32,7 @@ interface ProgramKemiskinanData {
 
 function Page() {
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const state = useProxy(programKemiskinanState)
 
   // 🔧 Get valid statistics data with proper type checking

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -11,7 +11,7 @@ import { useRouter } from 'next/navigation';
 
 function Page() {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const state = useProxy(desaDigitalState)
   const router = useRouter()
   const {

src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -11,7 +11,7 @@ import { IconSearch } from '@tabler/icons-react';
 
 function Page() {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const state = useProxy(infoTeknoState)
   const {
     data,

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -45,7 +45,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 function Page() {
   const listState = useProxy(programKreatifState);
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
   const router = useTransitionRouter()
   const {
     data,

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -14,7 +14,7 @@ function Page() {
   const state = useProxy(keamananLingkunganState)
   const router = useRouter()  
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const {
     data,
     page,

src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx

@@ -12,7 +12,7 @@ import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 function Page() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
   const {
     data,
     page,

src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx

@@ -1,10 +1,26 @@
 'use client'
+
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
 import colors from '@/con/colors';
-import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  ColorSwatch,
+  Flex,
+  Group,
+  Modal,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
-import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure, useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
 import { useState } from 'react';
@@ -12,9 +28,10 @@ import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
-  const [search, setSearch] = useState("");
-  const router = useTransitionRouter()
-  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const mobile = useMediaQuery('(max-width: 768px)');
+  const [search, setSearch] = useState('');
+  const router = useTransitionRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
   const [opened, { open, close }] = useDisclosure(false);
   const stateLaporan = useProxy(laporanPublikState);
   const {
@@ -49,143 +66,219 @@ function Page() {
   const handleSubmit = async () => {
     await stateLaporan.create.create();
     resetForm();
+    close();
   };
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header: Back + Search */}
       <Box px={{ base: 'md', md: 100 }}>
         <Group justify="space-between" align="center">
           <BackButton />
           <TextInput
-              radius={"lg"}
-              placeholder='Cari Laporan Publik'
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              leftSection={<IconSearch size={20} />}
-              w={{ base: "100%", md: "30%" }}
-            />
+            radius="lg"
+            placeholder="Cari Laporan Publik"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: '100%', md: '30%' }}
+            size={mobile ? 'sm' : 'md'}
+          />
         </Group>
       </Box>
+
+      {/* Title + Add Button */}
       <Box px={{ base: 'md', md: 100 }}>
-        <Group justify="space-between">
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        <Group justify="space-between" align="flex-start">
+          <Text
+            ta="center"
+            fz={{ base: 'xl', sm: '2xl', md: '2.5rem' }}
+            c={colors['blue-button']}
+            fw="bold"
+            lineClamp={2}
+            style={{ wordBreak: 'break-word' }}
+          >
             Laporan Keamanan Lingkungan
           </Text>
           <Button
             onClick={open}
             bg={colors['blue-button']}
-            size="md"
+            size={mobile ? 'sm' : 'md'}
             radius="md"
             rightSection={<IconPlus size={20} />}
           >
-            Tambah Laporan
+            {mobile ? 'Tambah' : 'Tambah Laporan'}
           </Button>
         </Group>
       </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <Flex justify={'space-between'} align={'center'}>
-            <Text fz={{ base: 'sm', md: 'h4' }} fw={'bold'}>Laporan Terbaru</Text>
-            <Box>
-              <Flex gap={'lg'}>
-                <Box>
-                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'sm', md: 'h4' }}>Terselesaikan</Text>
-                    <ColorSwatch color="#2A742D" size={20} />
-                  </Flex>
-                </Box>
-                <Box>
-                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'sm', md: 'h4' }}>Dalam Proses</Text>
-                    <ColorSwatch color="#D1961F" size={20} />
-                  </Flex>
-                </Box>
-                <Box>
-                  <Flex gap={{ base: 2, md: 5 }} align={'center'}>
-                    <Text fz={{ base: 'sm', md: 'h4' }}>Gagal</Text>
-                    <ColorSwatch color="#A34437" size={20} />
-                  </Flex>
-                </Box>
-              </Flex>
-            </Box>
-          </Flex>
-          <SimpleGrid
-            cols={{
-              base: 1,
-              md: 3
-            }}
+
+      {/* Legend Status */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <Flex
+          justify="space-between"
+          align="center"
+          direction={mobile ? 'column' : 'row'}
+          gap={mobile ? 'xs' : 'lg'}
+        >
+          <Text fz={{ base: 'sm', md: 'h4' }} fw="bold">
+            Laporan Terbaru
+          </Text>
+          <Flex
+            gap={mobile ? 'xs' : 'lg'}
+            wrap="wrap"
+            justify={mobile ? 'center' : 'flex-start'}
+            align="center"
           >
-            {data.map((v, k) => {
-              return (
-                <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
-                  <Stack>
-                    <Text c={colors['blue-button']} lineClamp={3} truncate="end" fz="h4" fw="bold">{v.judul}</Text>
-                    <Text fs={'italic'} fz={'xl'}>
-                      {v.tanggalWaktu
-                        ? new Date(v.tanggalWaktu).toLocaleString('id-ID')
-                        : '-'}
-                    </Text>
-                    <Box>
-                      <Text fw={'bold'}>Penanganan:</Text>
-                      {v.penanganan?.length ? (
-                        v.penanganan.map((item, index) => (
-                          <Box key={index}>
-                            <Text
-                              fz="md"
-                              c="dimmed"
-                              dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
-                              style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                            />
-                          </Box>
-                        ))
-                      ) : (
-                        <Text fz="sm" fs="italic" c="dimmed">
-                          Belum ada penanganan
-                        </Text>
-                      )}
-                    </Box>
-                    <Box
-                      style={{
-                        display: 'inline-block',
-                        padding: '4px 12px',
-                        borderRadius: '16px',
-                        backgroundColor:
-                          v.status === 'Selesai' ? '#94EF95FF' :
-                            v.status === 'Proses' ? '#F1D295FF' :
-                              '#F38E8EFF',
-                        color:
-                          v.status === 'Selesai' ? '#01BA01FF' :
-                            v.status === 'Proses' ? '#B67A00FF' :
-                              '#AE1700FF',
-                        fontWeight: 900,
-                        fontSize: '0.75rem',
-                        textAlign: 'center',
-                        minWidth: '80px',
-                      }}
-                    >
-                      {v.status}
-                    </Box>
-                    <Button
-                      bg={colors['blue-button']}
-                      rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
-                      onClick={() => router.push(`/darmasaba/keamanan/laporan-publik/${v.id}`)}
-                    >Lihat Detail Kronologi
-                    </Button>
-                  </Stack>
-                </Paper>
-              )
-            })}
-          </SimpleGrid>
-          <Center>
-            <Pagination
-              value={page}
-              onChange={(newPage) => load(newPage)}
-              total={totalPages}
-              my="md"
-            />
-          </Center>
-        </Stack>
+            <Flex gap={2} align="center">
+              <ColorSwatch color="#2A742D" size={16} />
+              <Text fz={{ base: 'xs', md: 'sm' }}>Terselesaikan</Text>
+            </Flex>
+            <Flex gap={2} align="center">
+              <ColorSwatch color="#D1961F" size={16} />
+              <Text fz={{ base: 'xs', md: 'sm' }}>Dalam Proses</Text>
+            </Flex>
+            <Flex gap={2} align="center">
+              <ColorSwatch color="#A34437" size={16} />
+              <Text fz={{ base: 'xs', md: 'sm' }}>Gagal</Text>
+            </Flex>
+          </Flex>
+        </Flex>
       </Box>
-      <Modal opened={opened} onClose={close} title="Tambah Laporan Publik">
+
+      {/* Cards Grid */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}
+          spacing="lg"
+        >
+          {data.map((v, k) => (
+            <Paper
+              key={k}
+              radius="lg"
+              bg={colors['white-trans-1']}
+              p="lg"
+              shadow="sm"
+              style={{
+                '&:hover': {
+                  transform: 'translateY(-4px)',
+                  boxShadow: '0 8px 20px rgba(0,0,0,0.1)',
+                },
+                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+              }}
+            >
+              <Stack gap="sm">
+                <Text
+                  c={colors['blue-button']}
+                  lineClamp={2}
+                  fz={{ base: 'lg', md: 'xl' }}
+                  fw="bold"
+                  style={{ wordBreak: 'break-word' }}
+                >
+                  {v.judul}
+                </Text>
+
+                <Text
+                  fs="italic"
+                  fz={{ base: 'sm', md: 'md' }}
+                  c="dimmed"
+                >
+                  {v.tanggalWaktu
+                    ? new Date(v.tanggalWaktu).toLocaleString('id-ID')
+                    : '-'}
+                </Text>
+
+                <Box>
+                  <Text fw="bold" fz="sm">
+                    Penanganan:
+                  </Text>
+                  {v.penanganan?.length ? (
+                    v.penanganan.map((item, index) => (
+                      <Box key={index}>
+                        <Text
+                          fz="xs"
+                          c="dimmed"
+                          dangerouslySetInnerHTML={{
+                            __html: item.deskripsi || '-',
+                          }}
+                          style={{
+                            wordBreak: 'break-word',
+                            whiteSpace: 'normal',
+                            maxHeight: '80px',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                          }}
+                        />
+                      </Box>
+                    ))
+                  ) : (
+                    <Text fz="xs" fs="italic" c="dimmed">
+                      Belum ada penanganan
+                    </Text>
+                  )}
+                </Box>
+
+                <Box
+                  style={{
+                    display: 'inline-block',
+                    padding: '4px 8px',
+                    borderRadius: '12px',
+                    backgroundColor:
+                      v.status === 'Selesai'
+                        ? '#94EF95FF'
+                        : v.status === 'Proses'
+                        ? '#F1D295FF'
+                        : '#F38E8EFF',
+                    color:
+                      v.status === 'Selesai'
+                        ? '#01BA01FF'
+                        : v.status === 'Proses'
+                        ? '#B67A00FF'
+                        : '#AE1700FF',
+                    fontWeight: 700,
+                    fontSize: '0.75rem',
+                    textAlign: 'center',
+                    minWidth: '70px',
+                  }}
+                >
+                  {v.status}
+                </Box>
+
+                <Button
+                  bg={colors['blue-button']}
+                  rightSection={
+                    <IconArrowRight
+                      size={18}
+                      color={colors['white-1']}
+                    />
+                  }
+                  onClick={() => router.push(`/darmasaba/keamanan/laporan-publik/${v.id}`)}
+                  size={mobile ? 'sm' : 'md'}
+                  fullWidth
+                >
+                  {mobile ? 'Detail' : 'Lihat Detail Kronologi'}
+                </Button>
+              </Stack>
+            </Paper>
+          ))}
+        </SimpleGrid>
+      </Box>
+
+      {/* Pagination */}
+      <Center px={{ base: 'md', md: 100 }}>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+          size={mobile ? 'sm' : 'md'}
+        />
+      </Center>
+
+      {/* Modal Form */}
+      <Modal opened={opened} onClose={close} title="Tambah Laporan Publik" size="xl">
         <Paper
           bg={colors['white-1']}
           p="lg"
@@ -196,18 +289,26 @@ function Page() {
           <Stack gap="md">
             <TextInput
               value={stateLaporan.create.form.judul}
-              onChange={(e) => (stateLaporan.create.form.judul = e.target.value)}
+              onChange={(e) =>
+                (stateLaporan.create.form.judul = e.target.value)
+              }
               label={<Text fw="bold" fz="sm">Judul Laporan Publik</Text>}
               placeholder="Masukkan judul laporan publik"
               required
+              w="100%"
+              size={mobile ? 'sm' : 'md'}
             />
 
             <TextInput
               value={stateLaporan.create.form.lokasi}
-              onChange={(e) => (stateLaporan.create.form.lokasi = e.target.value)}
+              onChange={(e) =>
+                (stateLaporan.create.form.lokasi = e.target.value)
+              }
               label={<Text fw="bold" fz="sm">Lokasi Laporan Publik</Text>}
               placeholder="Masukkan lokasi laporan publik"
               required
+              w="100%"
+              size={mobile ? 'sm' : 'md'}
             />
 
             <DateTimePicker
@@ -220,6 +321,8 @@ function Page() {
               onChange={(val) => {
                 stateLaporan.create.form.tanggalWaktu = val ? val.toString() : '';
               }}
+              w="100%"
+              size={mobile ? 'sm' : 'md'}
             />
 
             <Box>
@@ -238,7 +341,7 @@ function Page() {
               <Button
                 onClick={handleSubmit}
                 radius="md"
-                size="md"
+                size={mobile ? 'sm' : 'md'}
                 style={{
                   background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                   color: '#fff',
@@ -255,4 +358,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx

@@ -13,7 +13,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 function Page() {
   const state = useProxy(polsekTerdekatState);
   const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const router = useRouter()
 
   const {

src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx

@@ -12,7 +12,7 @@ import { IconSearch } from '@tabler/icons-react';
 function Page() {
   const state = useProxy(tipsKeamananState)
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const {
     data,
     page,

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx

@@ -2,7 +2,7 @@
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { Box, Divider, Group, Image, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Divider, Flex, Group, Image, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconAlertCircle, IconCalendar, IconInfoCircle } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
@@ -44,18 +44,18 @@ function Page() {
 
             <Box p="lg">
               <Box style={{ position: 'relative', width: '100%', maxWidth: '800px', margin: '0 auto' }}>
-                <Image 
-                  src={state.findUnique.data.image?.link} 
-                  alt={state.findUnique.data.title} 
+                <Image
+                  src={state.findUnique.data.image?.link}
+                  alt={state.findUnique.data.title}
                   height={0}
-                  style={{ 
+                  style={{
                     height: 'auto',
                     width: '100%',
                     maxHeight: '500px',
                     objectFit: 'contain',
                     borderRadius: '8px'
                   }}
-                  loading="lazy" 
+                  loading="lazy"
                 />
               </Box>
             </Box>
@@ -78,25 +78,33 @@ function Page() {
                   <Box>
                     <Text fz="h4" fw="bold">Pendahuluan</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.introduction?.content }} />
+                    <Box pl={20}>
+                      <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.introduction?.content }} />
+                    </Box>
                   </Box>
 
                   <Box>
                     <Text fz="h4" fw="bold">{state.findUnique.data.symptom?.title}</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
+                    <Box pl={20}>
+                      <Text fz="md" lh={1.6} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
+                    </Box>
                   </Box>
 
                   <Box>
                     <Text fz="h4" fw="bold">{state.findUnique.data.prevention?.title}</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.prevention?.content }} />
+                    <Box pl={20}>
+                      <Text fz="md" lh={1.6} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.prevention?.content }} />
+                    </Box>
                   </Box>
 
                   <Box>
                     <Text fz="h4" fw="bold">{state.findUnique.data.firstaid?.title}</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.firstaid?.content }} />
+                    <Box pl={20}>
+                      <Text fz="md" lh={1.6} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.firstaid?.content }} />
+                    </Box>
                   </Box>
 
                   <Box>
@@ -114,10 +122,14 @@ function Page() {
                           {state.findUnique.data?.mythvsfact ? (
                             <TableTr>
                               <TableTd>
-                                <Text fz="sm" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.mitos }} />
+                                <Box pl={20}>
+                                  <Text fz="sm" lh={1.6} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.mitos }} />
+                                </Box>
                               </TableTd>
                               <TableTd>
-                                <Text fz="sm" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.fakta }} />
+                                <Box pl={20}>
+                                  <Text fz="sm" lh={1.6} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.fakta }} />
+                                </Box>
                               </TableTd>
                             </TableTr>
                           ) : (
@@ -133,17 +145,15 @@ function Page() {
                   <Box>
                     <Text fz="h4" fw="bold">Kapan Harus ke Dokter?</Text>
                     <Divider my="xs" />
-                    <Group gap="xs" mb="xs">
+                    <Flex justify={'flex-start'} gap={"xs"} align={"center"} mb="xs">
                       <IconAlertCircle size={18} color="red" />
                       <Text fz="md">Segera bawa penderita ke fasilitas kesehatan jika mengalami:</Text>
-                    </Group>
-                    <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: state.findUnique.data.doctorsign.content }} />
+                    </Flex>
+                    <Box pl={20}>
+                      <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: state.findUnique.data.doctorsign.content }} /></Box>
                   </Box>
 
                   <Box>
-                    <Text fz="h4" fw="bold">Kasus DBD di Wilayah Abiansemal</Text>
-                    <Divider my="xs" />
-
                     <Paper p="lg" radius="md" bg={colors['blue-button-trans']} withBorder>
                       <Group gap="xs" mb="sm">
                         <IconInfoCircle size={20} color={colors['white-1']} />

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx

@@ -175,7 +175,9 @@ function Page() {
                 <Title order={4}>Layanan Unggulan</Title>
                 <Divider />
                 {layananUnggulan ? (
-                  <Text fz="md" style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: layananUnggulan }} />
+                  <Box pl={"lg"}>
+                    <Text fz="md" style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: layananUnggulan }} />
+                  </Box>
                 ) : (
                   <Paper withBorder radius="md" p="md">
                     <Group gap="sm">
@@ -251,7 +253,9 @@ function Page() {
                   <Title order={3}>Fasilitas Pendukung</Title>
                   <Divider />
                   {fasilitasPendukungHtml ? (
-                    <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal", lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: fasilitasPendukungHtml }} />
+                    <Box pl="lg">
+                      <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal", lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: fasilitasPendukungHtml }} />
+                    </Box>
                   ) : (
                     <Paper withBorder radius="md" p="md">
                       <Group gap="sm">
@@ -313,7 +317,7 @@ function Page() {
             <Title order={3}>Prosedur Pendaftaran</Title>
             <Divider />
             {prosedur ? (
-              <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal", lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: prosedur }} />
+              <Box pl="lg"><Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal", lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: prosedur }} /></Box>
             ) : (
               <Text fz="md" c="dimmed">Belum ada prosedur pendaftaran</Text>
             )}

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/grafik-penyakit/page.tsx

@@ -95,7 +95,7 @@ function GrafikPenyakit() {
         <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
           <Paper bg={colors['white-1']} p={'md'}>
             <Center>
-              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Title pb={10} order={2}>Penderita Penyakit</Title>
               <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
             </Center>
           </Paper>
@@ -103,7 +103,7 @@ function GrafikPenyakit() {
       ) : (
         <Box style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
           <Paper bg={colors["white-trans-1"]} p={'md'}>
-            <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+            <Title pb={10} order={2}>Penderita Penyakit</Title>
             {mounted && diseaseChartData.length > 0 && (
               <Center>
                 <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={diseaseChartData} >

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/[id]/page.tsx

@@ -69,25 +69,33 @@ function Page() {
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Deskripsi Kegiatan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                  <Box pl={20}>
+                    <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                  </Box>
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Layanan yang Tersedia</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
+                  <Box pl={20}>
+                    <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
+                  </Box>
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Syarat & Ketentuan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
+                  <Box pl={20}>
+                    <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
+                  </Box>
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Dokumen yang Perlu Dibawa</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
+                  <Box pl={20}>
+                    <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
+                  </Box>
                 </Stack>
 
                 <Stack gap="sm">

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -71,11 +71,13 @@ function DetailInfoWabahPenyakitUser() {
           {/* Deskripsi */}
           <Box>
             <Text fz="lg" fw="bold">Deskripsi</Text>
-            <Text
-              fz="md"
-              dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
-              style={{ wordBreak: "break-word", whiteSpace: "normal" }}
-            />
+            <Box pl={20}>
+              <Text
+                fz="md"
+                dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+              />
+            </Box>
           </Box>
         </Stack>
       </Paper>

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx

@@ -30,7 +30,7 @@ function Page() {
   const state = useProxy(infoWabahPenyakit);
   const router = useTransitionRouter();
   const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebouncedValue(search, 500)
+  const [debouncedSearch] = useDebouncedValue(search, 1000)
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {

src/app/darmasaba/(pages)/kesehatan/kontak-darurat/[id]/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
+import colors from '@/con/colors';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconBrandWhatsapp } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const state = useProxy(kontakDarurat);
+  const router = useRouter();
+  const params = useParams();
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box px={{base: 'md', md: 100}} py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w="100%"
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Kontak Darurat
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Whatsapp</Text>
+                <Text fz="md" c="dimmed">{data.whatsapp || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt="gambar"
+                    radius="md"
+                    maw={300}
+                    loading="lazy"
+                  />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+              <Group>
+                <Button
+                  variant="light"
+                  leftSection={<IconBrandWhatsapp size={18} />}
+                  component="a"
+                  href={`https://wa.me/${data.whatsapp.replace(/\D/g, '')}`}
+                  target="_blank"
+                  aria-label="Hubungi WhatsApp"
+                >
+                  WhatsApp
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx

@@ -7,6 +7,7 @@ import {
   Center,
   Grid,
   GridCol,
+  Group,
   Image,
   Pagination,
   Paper,
@@ -17,17 +18,18 @@ import {
   TextInput,
   Tooltip
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconBrandWhatsapp, IconSearch } from '@tabler/icons-react';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { useDebouncedValue } from '@mantine/hooks';
 
 function Page() {
   const state = useProxy(kontakDarurat);
+  const router = useTransitionRouter()
   const [search, setSearch] = useState('');
-  const [debouncedSearch] = useDebouncedValue(search, 500)
+  const [debouncedSearch] = useDebouncedValue(search, 1000)
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
@@ -88,83 +90,79 @@ function Page() {
         ) : (
           <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
             {data.map((v, k) => (
-             <Paper
-             key={k}
-             radius="xl"
-             shadow="md"
-             withBorder
-             p="lg"
-             bg={colors['white-trans-1']}
-             style={{
-               transition: 'all 200ms ease',
-               cursor: 'pointer',
-               display: 'flex',
-               flexDirection: 'column',
-               justifyContent: 'space-between', // ✅ biar button selalu di bawah
-               height: '100%', // ✅ bikin tinggi seragam
-             }}
-           >
-             <Stack align="center" gap="sm" style={{ flexGrow: 1 }}>
-               <Box
-                 style={{
-                   width: '100%',
-                   aspectRatio: '16/9',
-                   borderRadius: '12px',
-                   overflow: 'hidden',
-                   position: 'relative',
-                 }}
-               >
-                 <Image
-                   src={v.image.link}
-                   alt={v.name}
-                   fit="cover"
-                   loading="lazy"
-                   style={{
-                     width: '100%',
-                     height: '100%',
-                     transition: 'transform 0.4s ease',
-                   }}
-                   onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
-                   onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
-                 />
-               </Box>
-           
-               <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
-                 {v.name}
-               </Text>
-           
-               <Text
-                 fz="sm"
-                 ta="center"
-                 lineClamp={3}
-                 lh={1.6}
-                 style={{
-                   minHeight: '4.8em', // tinggi tetap 3 baris
-                 }}
-               >
-                 <span
-                   style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                   dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                 />
-               </Text>
-             </Stack>
-           
-             {/* ✅ Tombol selalu di bagian bawah card */}
-             <Center mt="md">
-               <Button
-                 variant="light"
-                 leftSection={<IconBrandWhatsapp size={18} />}
-                 component="a"
-                 href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`}
-                 target="_blank"
-                 aria-label="Hubungi WhatsApp"
-               >
-                 WhatsApp
-               </Button>
-             </Center>
-           </Paper>
-           
-            
+              <Paper
+                key={k}
+                radius="xl"
+                shadow="md"
+                withBorder
+                p="lg"
+                bg={colors['white-trans-1']}
+                style={{
+                  transition: 'all 200ms ease',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between', // ✅ biar button selalu di bawah
+                  height: '100%', // ✅ bikin tinggi seragam
+                }}
+              >
+                <Stack align="center" gap="sm" style={{ flexGrow: 1 }}>
+                  <Box
+                    style={{
+                      width: '100%',
+                      aspectRatio: '16/9',
+                      borderRadius: '12px',
+                      overflow: 'hidden',
+                      position: 'relative',
+                    }}
+                  >
+                    <Image
+                      src={v.image.link}
+                      alt={v.name}
+                      fit="cover"
+                      loading="lazy"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        transition: 'transform 0.4s ease',
+                      }}
+                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                    />
+                  </Box>
+
+                  <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
+                    {v.name}
+                  </Text>
+
+                  <Text
+                    fz="sm"
+                    ta="center"
+                    lineClamp={3}
+                    lh={1.6}
+                    style={{
+                      minHeight: '4.8em', // tinggi tetap 3 baris
+                    }}
+                  >
+                    <span
+                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                      dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                    />
+                  </Text>
+                </Stack>
+
+                {/* ✅ Tombol selalu di bagian bawah card */}
+                <Group mt="md" justify='center'>
+                  <Button
+                    bg={colors['blue-button']}
+                    onClick={() => router.push(`/darmasaba/kesehatan/kontak-darurat/${v.id}`)}
+                  >
+                    Detail
+                  </Button>
+                </Group>
+              </Paper>
+
+
             ))}
           </SimpleGrid>
         )}

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -26,7 +26,7 @@ import BackButton from '../../desa/layanan/_com/BackButto'
 function Page() {
   const state = useProxy(penangananDarurat)
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500)
+  const [debouncedSearch] = useDebouncedValue(search, 1000)
   const { data, page, totalPages, loading, load } = state.findMany
 
   useShallowEffect(() => {

src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx

@@ -12,7 +12,7 @@ import { useTransitionRouter } from "next-view-transitions";
 export default function Page() {
   const state = useProxy(posyandustate);
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const router = useTransitionRouter()
 
   const { data, page, totalPages, loading, load } = state.findMany;

src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx

@@ -57,7 +57,7 @@ export default function Page() {
   const state = useProxy(programKesehatan);
   const router = useRouter();
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -7,10 +7,12 @@ import { IconSearch, IconMapPin, IconPhone, IconMail } from '@tabler/icons-react
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Page() {
   const state = useProxy(puskesmasState)
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -21,8 +23,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 6, search)
-  }, [page, search])
+    load(page, 6, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (
@@ -95,17 +97,17 @@ function Page() {
                   </Group>
                   <Stack gap={6}>
                     <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconMapPin size={16} /></Box>
+                      <Box pt={2}><IconMapPin size={20} /></Box>
                       <Text fz="sm" c="dimmed">{v.alamat}</Text>
                     </Group>
 
                     <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconPhone size={16} /></Box>
+                      <Box pt={2}><IconPhone size={20} /></Box>
                       <Text fz="sm" c="dimmed">{v.kontak.kontakPuskesmas}</Text>
                     </Group>
 
                     <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconMail size={16} /></Box>
+                      <Box pt={2}><IconMail size={20} /></Box>
                       <Text fz="sm" c="dimmed">{v.kontak.email}</Text>
                     </Group>
                   </Stack>

src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx

@@ -11,7 +11,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 function Page() {
   const state = useProxy(dataLingkunganDesaState.findMany)
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const {
     data,

src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx

@@ -49,6 +49,7 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
           </Stack>
           <Text
             size="sm"
+            pl={20}
             style={{
               wordBreak: 'break-word',
               lineHeight: 1.6,

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -21,7 +21,7 @@ function Page() {
   const state2 = useProxy(pengelolaanSampahState.keteranganSampah)
 
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -13,7 +13,7 @@ import { useTransitionRouter } from 'next-view-transitions';
 function Page() {
   const state = useProxy(programPenghijauanState);
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
   const router = useTransitionRouter()
   const { data, load, page, totalPages, loading } = state.findMany;
 

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx

@@ -14,7 +14,7 @@ interface PageProps {
 
 function Page({ params }: PageProps) {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
   const { jenjangPendidikan } = use(params);
 

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx

@@ -14,7 +14,7 @@ interface PageProps {
 
 function Page({ params }: PageProps) {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.pengajar)
   const { jenjangPendidikan } = use(params);
 

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/siswa/page.tsx

@@ -14,7 +14,7 @@ interface PageProps {
 
 function Page({ params }: PageProps) {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.siswa)
   const { jenjangPendidikan } = use(params);
 

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx

@@ -9,7 +9,7 @@ import { useProxy } from 'valtio/utils';
 
 function Page() {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
 
   const {

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/pengajar/page.tsx

@@ -10,7 +10,7 @@ import { useProxy } from 'valtio/utils';
 function Page() {
   const stateList = useProxy(infoSekolahPaud.pengajar)
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const {
     data,
     page,

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/siswa/page.tsx

@@ -9,7 +9,7 @@ import { useState } from 'react';
 
 function Page() {
   const [search, setSearch] = useState("")
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
   const stateList = useProxy(infoSekolahPaud.siswa)
 
   const {

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

@@ -12,6 +12,7 @@ import {
   Skeleton,
   Stack,
   Text,
+  Title,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -41,9 +42,9 @@ export default function DetailInformasiPublikUser() {
     return (
       <Center py="xl">
         <Stack align="center" gap="sm">
-          <Text fz="lg" fw="bold">
+          <Title order={4} fz={{ base: 'lg', md: 'xl' }} lh={1.3}>
             Informasi tidak ditemukan
-          </Text>
+          </Title>
           <Button variant="light" onClick={() => router.push('/informasi-publik')}>
             Kembali ke Daftar
           </Button>
@@ -75,55 +76,66 @@ export default function DetailInformasiPublikUser() {
         shadow="xs"
       >
         <Stack gap="xl">
-          <Text
-            fz={{ base: 'xl', md: '2xl' }}
-            fw="bold"
+          {/* MAIN TITLE */}
+          <Title
+            order={2}
+            lh={1.2}
             ta="center"
             c={colors['blue-button']}
           >
             Detail Informasi Publik
-          </Text>
+          </Title>
 
           <Divider />
 
+          {/* CONTENT */}
           <Stack gap="lg">
-            <Box>
-              <Text fz={{ base: 'md', md: 'lg' }} fw="bold" mb={4}>
+            {/* Jenis Informasi */}
+            <Box px="lg">
+              <Title order={5} fz={{ base: 'lg', md: 'xl' }} lh={1.3} mb={4}>
                 Jenis Informasi
-              </Text>
-              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
+              </Title>
+              <Text fz={{ base: 'sm', md: 'md' }} lh={1.5} c="black">
                 {data.jenisInformasi || '-'}
               </Text>
             </Box>
 
-            <Box>
-              <Text fz={{ base: 'md', md: 'lg' }} fw="bold" mb={4}>
+            {/* Tanggal Publikasi */}
+            <Box px="lg">
+              <Title order={5} fz={{ base: 'lg', md: 'xl' }} lh={1.3} mb={4}>
                 Tanggal Publikasi
-              </Text>
-              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
+              </Title>
+              <Text fz={{ base: 'sm', md: 'md' }} lh={1.5} c="black">
                 {data.tanggal
                   ? new Date(data.tanggal).toLocaleDateString('id-ID', {
-                    day: '2-digit',
-                    month: 'long',
-                    year: 'numeric',
-                  })
+                      day: '2-digit',
+                      month: 'long',
+                      year: 'numeric',
+                    })
                   : '-'}
               </Text>
             </Box>
 
-            <Box>
-              <Text fz={{ base: 'md', md: 'lg' }} fw="bold" mb={4}>
+            {/* Deskripsi */}
+            <Box px="lg">
+              <Title order={5} fz={{ base: 'lg', md: 'xl' }} lh={1.3} mb={4}>
                 Deskripsi
-              </Text>
-              <Box
-                className="prose max-w-none leading-relaxed"
-                dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
-                style={{wordBreak: "break-word", whiteSpace: "normal"}}
-              />
+              </Title>
+
+              <Box>
+                <Text
+                  ta="justify"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  fz={{ base: 'sm', md: 'md' }}
+                  lh={1.6}
+                  style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                  className="prose max-w-none"
+                />
+              </Box>
             </Box>
           </Stack>
         </Stack>
       </Paper>
     </Box>
   );
-}
+}

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik/page.tsx

@@ -21,7 +21,8 @@ import {
   TableTr,
   Text,
   TextInput,
-  Tooltip
+  Tooltip,
+  Title
 } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconBrandWhatsapp, IconDeviceImacCog, IconFileInfo, IconMail, IconSearch } from '@tabler/icons-react';
@@ -33,7 +34,7 @@ import { useTransitionRouter } from 'next-view-transitions';
 function Page() {
   const listData = useProxy(daftarInformasiPublik)
   const [search, setSearch] = useState('')
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 1000ms delay
   const router = useTransitionRouter()
   const {
     data,
@@ -65,20 +66,49 @@ function Page() {
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
+
       <Center>
-        <Image src="/darmasaba-icon.png" w={{ base: 70, md: 100 }} alt="Logo Desa Darmasaba" loading="lazy" />
+        <Image
+          src="/darmasaba-icon.png"
+          w={{ base: 70, md: 100 }}
+          alt="Logo Desa Darmasaba"
+          loading="lazy"
+        />
       </Center>
-      <Text ta="center" fz={{ base: "1.8rem", md: "2.5rem" }} c={colors["blue-button"]} fw="bold" lh={1.4}>
+
+      <Title
+        order={2}
+        ta="center"
+        fz={{ base: '1.6rem', md: '2.4rem' }}
+        c={colors['blue-button']}
+        lh={1.35}
+        style={{ fontWeight: 700 }}
+      >
         Daftar Informasi Publik
-      </Text>
-      <Box px={{ base: "md", md: 100 }}>
+      </Title>
+
+      <Box px={{ base: 'md', md: 100 }}>
         <Stack gap="lg">
           <Paper p="lg" radius="xl" shadow="sm" withBorder>
             <Stack gap="sm">
-              <Text ta={"center"} fz={{ base: 'lg', md: 'xl' }} fw="bold" c={colors["blue-button"]}>
+              <Title
+                order={4}
+                ta="center"
+                fz={{ base: 'lg', md: 'xl' }}
+                c={colors['blue-button']}
+                lh={1.2}
+                style={{ fontWeight: 700 }}
+              >
                 Tentang Informasi Publik
-              </Text>
-              <Text ta={"center"} fz={{ base: 'sm', md: 'md' }} c="dimmed">
+              </Title>
+
+              <Text
+                ta="center"
+                fz={{ base: 'sm', md: 'md' }}
+                c="black"
+                lh={1.6}
+                style={{ maxWidth: 900, margin: '0 auto' }}
+              >
                 Daftar Informasi Publik Desa Darmasaba adalah kumpulan data yang dapat diakses oleh masyarakat sesuai dengan ketentuan peraturan yang berlaku.
               </Text>
             </Stack>
@@ -97,8 +127,8 @@ function Page() {
           {data.length === 0 ? (
             <Center py="xl">
               <Stack align="center" gap="sm">
-                <IconFileInfo size={48} stroke={1.5} color={colors["blue-button"]} />
-                <Text fz="md" c="dimmed">Tidak ada informasi publik yang ditemukan.</Text>
+                <IconFileInfo size={48} stroke={1.5} color={colors['blue-button']} />
+                <Text fz="md" c="dimmed" lh={1.5}>Tidak ada informasi publik yang ditemukan.</Text>
               </Stack>
             </Center>
           ) : (
@@ -113,27 +143,42 @@ function Page() {
                     <TableTh fz="sm" ta="center" w="15%">Aksi</TableTh>
                   </TableTr>
                 </TableThead>
+
                 <TableTbody bg={colors['white-1']}>
                   {data.map((item, index) => (
                     <TableTr key={item.id}>
-                      <TableTd ta="center">{(page - 1) * 5 + index + 1}</TableTd>
+                      <TableTd ta="center">
+                        <Text fz="sm" lh={1.4}>
+                          {(page - 1) * 5 + index + 1}
+                        </Text>
+                      </TableTd>
+
                       <TableTd>
                         <Box>
                           <Badge variant="light" size="lg" color="blue">
-                            <Text fw={650} fz={"sm"} c={'blue'} lineClamp={1}>
+                            <Text fw={650} fz="sm" c="blue" lineClamp={1} lh={1.2}>
                               {item.jenisInformasi}
                             </Text>
                           </Badge>
                         </Box>
                       </TableTd>
+
                       <TableTd>
                         <Box>
-                          <Text lineClamp={1} fz="sm" c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                          <Text
+                            lineClamp={1}
+                            fz={{ base: 'sm', md: 'md' }}
+                            c="dark"
+                            lh={1.5}
+                            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                            dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                          />
                         </Box>
                       </TableTd>
+
                       <TableTd ta="center">
                         <Box>
-                          <Text ta={"center"}>
+                          <Text ta="center" fz="sm" lh={1.4}>
                             {item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID', {
                               day: '2-digit',
                               month: 'long',
@@ -142,6 +187,7 @@ function Page() {
                           </Text>
                         </Box>
                       </TableTd>
+
                       <TableTd style={{ textAlign: 'center' }}>
                         <Box>
                           <Tooltip label="Lihat Detail" withArrow>
@@ -152,8 +198,9 @@ function Page() {
                               color="blue"
                               leftSection={<IconDeviceImacCog size={16} />}
                               onClick={() => router.push(`/darmasaba/ppid/daftar-informasi-publik/${item.id}`)}
+                              aria-label={`Detail ${item.jenisInformasi}`}
                             >
-                              Detail
+                              <Text fz="xs" lh={1.2}>Detail</Text>
                             </Button>
                           </Tooltip>
                         </Box>
@@ -178,17 +225,27 @@ function Page() {
 
           <Paper p="lg" radius="xl" shadow="xs" withBorder>
             <Stack gap="xs">
-              <Text fz="lg" fw="bold" c={colors["blue-button"]}>Kontak PPID</Text>
+              <Title order={5} fz={{ base: 'lg', md: 'xl' }} fw="bold" c={colors['blue-button']} lh={1.2}>
+                Kontak PPID
+              </Title>
+
               <Group>
-                <IconMail color='gray' size={16} style={{ marginRight: 6 }} />
-                <Text c={"dimmed"} fz="sm" lh={1.6}>
-                  Email: <Text c={"dimmed"} span fw="500">ppid@desadarmasaba.id</Text>
+                <IconMail color="gray" size={16} style={{ marginRight: 6 }} />
+                <Text c="dimmed" fz="sm" lh={1.6}>
+                  Email:{' '}
+                  <Text c="dimmed" span fw={500} fz="sm" lh={1.6}>
+                    ppid@desadarmasaba.id
+                  </Text>
                 </Text>
               </Group>
+
               <Group>
-                <IconBrandWhatsapp color='gray' size={16} style={{ marginRight: 6 }} />
-                <Text c={"dimmed"} fz="sm" lh={1.6}>
-                  WhatsApp: <Text c={"dimmed"} span fw="500">081-xxx-xxx-xxx</Text>
+                <IconBrandWhatsapp color="gray" size={16} style={{ marginRight: 6 }} />
+                <Text c="dimmed" fz="sm" lh={1.6}>
+                  WhatsApp:{' '}
+                  <Text c="dimmed" span fw={500} fz="sm" lh={1.6}>
+                    081-xxx-xxx-xxx
+                  </Text>
                 </Text>
               </Group>
             </Stack>

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

@@ -1,7 +1,7 @@
 'use client'
 import stateDasarHukum from '@/app/admin/(dashboard)/_state/ppid/dasar_hukum/dasarHukum';
 import colors from '@/con/colors';
-import { Box, Paper, Skeleton, Stack, Text, Transition } from '@mantine/core';
+import { Box, Paper, Skeleton, Stack, Text, Transition, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import { IconBook2 } from '@tabler/icons-react';
@@ -31,27 +31,39 @@ function Page() {
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Stack align="center" gap="xs">
+
+      {/* HEADER */}
+      <Stack align="center" gap="xs" px={{ base: 'md', md: 100 }}>
         <IconBook2 size={42} stroke={1.5} color={colors["blue-button"]} />
-        <Text
+
+        <Title
+          order={1}
           ta="center"
-          fz={{ base: "2rem", md: "2.5rem" }}
           c={colors["blue-button"]}
-          fw="bold"
+          fz={{ base: "1.8rem", md: "2.3rem" }}
+          lh={1.2}
           style={{ letterSpacing: "-0.5px" }}
         >
           Dasar Hukum
-        </Text>
-        <Text ta="center" fz="md" >
+        </Title>
+
+        <Text
+          ta="center"
+          fz={{ base: "sm", md: "md" }}
+          lh={1.6}
+          c="black"
+        >
           Informasi regulasi dan kebijakan resmi yang menjadi dasar hukum
         </Text>
       </Stack>
+
+      {/* CONTENT */}
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap="lg">
           {dataArray.map((item, k) => (
             <Transition
               key={k}
-              mounted={true}
+              mounted
               transition="fade-up"
               duration={400}
               timingFunction="ease"
@@ -69,16 +81,27 @@ function Page() {
                   }}
                 >
                   <Stack gap="md">
-                    <Text
+
+                    {/* JUDUL */}
+                    <Title
+                      order={3}
                       ta="center"
-                      fw="bold"
-                      fz={{ base: 'lg', md: 'xl' }}
-                      style={{ lineHeight: 1.4 }}
+                      c="black"
+                      fz={{ base: "lg", md: "xl" }}
+                      lh={1.3}
                       dangerouslySetInnerHTML={{ __html: item.judul }}
                     />
+
+                    {/* CONTENT */}
                     <Text
-                      fz={{ base: 'sm', md: 'md' }}
-                      style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }}
+                      c="black"
+                      ta="justify"
+                      fz={{ base: "sm", md: "md" }}
+                      lh={1.7}
+                      style={{
+                        wordBreak: "break-word",
+                        whiteSpace: "normal",
+                      }}
                       dangerouslySetInnerHTML={{ __html: item.content }}
                     />
                   </Stack>

src/app/darmasaba/(pages)/ppid/indeks-kepuasan-masyarakat/page.tsx

@@ -3,7 +3,22 @@
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan";
 import colors from "@/con/colors";
 import { BarChart, PieChart } from '@mantine/charts';
-import { Box, Button, Center, Container, Flex, Modal, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from "@mantine/core";
+import {
+  Box,
+  Button,
+  Center,
+  Container,
+  Flex,
+  Modal,
+  Paper,
+  Select,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
@@ -15,16 +30,14 @@ interface ChartDataItem {
   label?: string;
 }
 
-
-
 function Kepuasan() {
-const state = useProxy(indeksKepuasanState.responden);
+  const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
   const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
   const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
   const [barChartData, setBarChartData] = useState<Array<{ month: string; Responden: number }>>([]);
-  const [opened, { open, close }] = useDisclosure(false)
+  const [opened, { open, close }] = useDisclosure(false);
 
   const resetForm = () => {
     state.create.form = {
@@ -34,14 +47,14 @@ const state = useProxy(indeksKepuasanState.responden);
       jenisKelaminId: "",
       ratingId: "",
       kelompokUmurId: "",
-    }
-  }
+    };
+  };
 
   useShallowEffect(() => {
-    indeksKepuasanState.jenisKelaminResponden.findMany.load()
-    indeksKepuasanState.pilihanRatingResponden.findMany.load()
-    indeksKepuasanState.kelompokUmurResponden.findMany.load()
-  },[])
+    indeksKepuasanState.jenisKelaminResponden.findMany.load();
+    indeksKepuasanState.pilihanRatingResponden.findMany.load();
+    indeksKepuasanState.kelompokUmurResponden.findMany.load();
+  }, []);
 
   const handleSubmit = async () => {
     try {
@@ -51,11 +64,11 @@ const state = useProxy(indeksKepuasanState.responden);
         await state.findUnique.load(idStr);
       }
       resetForm();
-      close()
+      close();
     } catch (error) {
       console.error('Error submitting form:', error);
     }
-  }
+  };
 
   // Load data on component mount
   useShallowEffect(() => {
@@ -82,13 +95,13 @@ const state = useProxy(indeksKepuasanState.responden);
 
       // Update gender chart data
       setDonutDataJenisKelamin([
-        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
+        { name: 'Laki-laki', value: totalLaki, color: '#52ABE3FF' },
         { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
       ]);
 
       // Update rating chart data
       setDonutDataRating([
-        { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
+        { name: 'Sangat Baik', value: totalSangatBaik, color: '#52ABE3FF' },
         { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
         { name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' },
         { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
@@ -96,7 +109,7 @@ const state = useProxy(indeksKepuasanState.responden);
 
       // Update age group chart data
       setDonutDataKelompokUmur([
-        { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
+        { name: 'Muda', value: totalMuda, color: '#52ABE3FF' },
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
@@ -154,33 +167,52 @@ const state = useProxy(indeksKepuasanState.responden);
   if (data.length === 0) {
     return (
       <Stack p="sm">
-        <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+        <Container w={{ base: "100%", md: "80%" }} p="xl">
           <Center>
-          <Text fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+            {/* Main page title — converted to Title, use order (don't set fz according to rules) */}
+            <Title order={2} ta="center" c="dark">
+              Indeks Kepuasan Masyarakat
+            </Title>
           </Center>
-          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+
+          {/* Body lead text — responsive fz & lh */}
+          <Text ta="center" fz={{ base: "1rem", md: "1.25rem" }} lh={{ base: 1.4, md: 1.6 }} c="dimmed" mt="sm">
+            Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
+          </Text>
+
           <Center mt={10}>
             <Button
-              radius={"lg"}
+              radius="lg"
               onClick={open}
               variant="gradient"
               gradient={{ from: "#26667F", to: "#124170" }}
-            >Ajukan Responden</Button>
+            >
+              Ajukan Responden
+            </Button>
           </Center>
         </Container>
-        <Box px={"xl"}>
-          <Paper p={"lg"} bg={colors.Bg}>
-            <Paper p={"lg"}>
-              <Stack gap={"xs"}>
-                <Flex justify={"space-between"} align={"center"}>
-                  <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
+
+        <Box px="xl">
+          <Paper p="lg" bg={colors.Bg}>
+            <Paper p="lg">
+              <Stack gap="xs">
+                <Flex justify="space-between" align="center">
+                  {/* Section heading — use Title order for hierarchy */}
+                  <Title order={4}>
+                    Pelayanan Terhadap Publik Desa Darmasaba
+                  </Title>
+
                   <Box>
-                    <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
-                    <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
-                      {state.findMany.total.toLocaleString('id-ID')}
+                    <Text fz={{ base: "0.9rem", md: "1rem" }} fw="bold" c={colors["blue-button"]}>
+                      Total Responden
                     </Text>
+                    {/* Big number — use Title for emphasis */}
+                    <Title order={3} ta="end" c={colors["blue-button"]} fw="bold" mt="xs">
+                      {state.findMany.total.toLocaleString('id-ID')}
+                    </Title>
                   </Box>
                 </Flex>
+
                 <BarChart
                   h={window.innerWidth < 480 ? 200 : 300}
                   data={barChartData}
@@ -194,18 +226,16 @@ const state = useProxy(indeksKepuasanState.responden);
                 />
               </Stack>
             </Paper>
-            <Box py={"xl"}>
-              <SimpleGrid
-                cols={{ base: 1, sm: 2, lg: 3 }}
-                spacing="md"
-                verticalSpacing="md"
-              >
+
+            <Box py="xl">
+              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" verticalSpacing="md">
                 {/* Chart Jenis Kelamin */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Jenis Kelamin</Title>
+                    <Title order={5}>Jenis Kelamin</Title>
+
                     {donutDataJenisKelamin.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
+                      <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                         Belum ada data untuk ditampilkan dalam grafik
                       </Text>
                     ) : (
@@ -216,8 +246,9 @@ const state = useProxy(indeksKepuasanState.responden);
                               <PieChart
                                 withLabels
                                 withTooltip
+                                labelsPosition="inside"
                                 labelsType="percent"
-                                size={250} // Fixed size in pixels
+                                size={250}
                                 data={donutDataJenisKelamin}
                               />
                             </Center>
@@ -226,7 +257,7 @@ const state = useProxy(indeksKepuasanState.responden);
                             {donutDataJenisKelamin.map((entry) => (
                               <Flex key={entry.name} gap="md" align="center">
                                 <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                                <Text size="sm">{entry.name}: {entry.value}</Text>
+                                <Text fz={{ base: "0.95rem", md: "1rem" }}>{entry.name}: {entry.value}</Text>
                               </Flex>
                             ))}
                           </Stack>
@@ -239,9 +270,10 @@ const state = useProxy(indeksKepuasanState.responden);
                 {/* Chart Rating */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Ulasan</Title>
+                    <Title order={5}>Ulasan</Title>
+
                     {donutDataRating.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
+                      <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                         Belum ada data untuk ditampilkan dalam grafik
                       </Text>
                     ) : (
@@ -253,7 +285,7 @@ const state = useProxy(indeksKepuasanState.responden);
                                 withTooltip
                                 tooltipAnimationDuration={200}
                                 withLabels
-                                labelsPosition="outside"
+                                labelsPosition="inside"
                                 labelsType="percent"
                                 withLabelsLine
                                 size={250}
@@ -266,7 +298,7 @@ const state = useProxy(indeksKepuasanState.responden);
                               {donutDataRating.map((entry) => (
                                 <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                   <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  <Text fz={{ base: "0.85rem", md: "0.95rem" }} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                     {entry.name}: {entry.value}
                                   </Text>
                                 </Flex>
@@ -282,9 +314,10 @@ const state = useProxy(indeksKepuasanState.responden);
                 {/* Chart Kelompok Umur */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Umur</Title>
+                    <Title order={5}>Umur</Title>
+
                     {donutDataKelompokUmur.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
+                      <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                         Belum ada data untuk ditampilkan dalam grafik
                       </Text>
                     ) : (
@@ -296,7 +329,7 @@ const state = useProxy(indeksKepuasanState.responden);
                                 withTooltip
                                 tooltipAnimationDuration={200}
                                 withLabels
-                                labelsPosition="outside"
+                                labelsPosition="inside"
                                 labelsType="percent"
                                 withLabelsLine
                                 size={250}
@@ -309,7 +342,7 @@ const state = useProxy(indeksKepuasanState.responden);
                               {donutDataKelompokUmur.map((entry) => (
                                 <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                   <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  <Text fz={{ base: "0.85rem", md: "0.95rem" }} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                     {entry.name}: {entry.value}
                                   </Text>
                                 </Flex>
@@ -325,18 +358,21 @@ const state = useProxy(indeksKepuasanState.responden);
             </Box>
           </Paper>
         </Box>
+
         {/* Modal */}
         <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
-          <Paper bg={colors['white-1']} p={'md'}>
+          <Paper bg={colors['white-1']} p="md">
             <Stack>
               <TextInput
                 label="Nama"
-                type='text'
+                type="text"
                 placeholder="Masukkan nama"
                 value={state.create.form.name}
                 onChange={(val) => {
                   state.create.form.name = val.currentTarget.value;
                 }}
+                // label typography
+                labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
               />
               <TextInput
                 label="Tanggal"
@@ -346,10 +382,11 @@ const state = useProxy(indeksKepuasanState.responden);
                 onChange={(val) => {
                   state.create.form.tanggal = val.currentTarget.value;
                 }}
+                labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
               />
               <Select
-                key={"jenisKelamin"}
-                label={"Jenis Kelamin"}
+                key="jenisKelamin"
+                label="Jenis Kelamin"
                 placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
                 value={state.create.form.jenisKelaminId || ""}
                 onChange={(val) => {
@@ -357,17 +394,19 @@ const state = useProxy(indeksKepuasanState.responden);
                 }}
                 data={
                   (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
-                    .filter(Boolean) // Hapus null, undefined, dll
+                    .filter(Boolean)
                     .map((item) => ({
                       value: item.id,
                       label: item.name || 'Tanpa Nama',
                     }))
                 }
                 disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+                // label typography
+                labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
               />
               <Select
-                key={"rating_responden"}
-                label={"Rating"}
+                key="rating_responden"
+                label="Rating"
                 placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
                 value={state.create.form.ratingId || ""}
                 onChange={(val) => {
@@ -375,17 +414,18 @@ const state = useProxy(indeksKepuasanState.responden);
                 }}
                 data={
                   (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
-                    .filter(Boolean) // Hapus null, undefined, dll
+                    .filter(Boolean)
                     .map((item) => ({
                       value: item.id,
                       label: item.name || 'Tanpa Nama',
                     }))
                 }
                 disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+                labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
               />
               <Select
-                key={"kelompokUmur"}
-                label={"Kelompok Umur"}
+                key="kelompokUmur"
+                label="Kelompok Umur"
                 placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
                 value={state.create.form.kelompokUmurId || ""}
                 onChange={(val) => {
@@ -393,19 +433,16 @@ const state = useProxy(indeksKepuasanState.responden);
                 }}
                 data={
                   (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
-                    .filter(Boolean) // Hapus null, undefined, dll
+                    .filter(Boolean)
                     .map((item) => ({
                       value: item.id,
                       label: item.name || 'Tanpa Nama',
                     }))
                 }
                 disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+                labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
               />
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-              >
+              <Button mt={10} bg={colors['blue-button']} onClick={handleSubmit}>
                 Submit
               </Button>
             </Stack>
@@ -414,36 +451,47 @@ const state = useProxy(indeksKepuasanState.responden);
       </Stack>
     );
   }
+
   return (
-    <Stack p={"sm"}>
-     <Container size="lg" px="md">
+    <Stack p="sm">
+      <Container size="lg" px="md">
         <Center>
-          <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+          {/* Main page title — Title with order */}
+          <Title order={2} ta="center" c="dark">
+            Indeks Kepuasan Masyarakat
+          </Title>
         </Center>
-        <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+
+        <Text fz={{ base: "1rem", md: "1.125rem" }} lh={{ base: 1.4, md: 1.6 }} ta="center" c="dimmed" mt="sm">
+          Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
+        </Text>
+
         <Center mt={10}>
-          <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
+          <Button radius="lg" bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
         </Center>
       </Container>
-      <Box px={"xl"}>
-        <Paper p={"lg"} bg={colors.Bg}>
-          <Paper p={"lg"}>
-            <Stack gap={"xs"}>
+
+      <Box px="xl">
+        <Paper p="lg" bg={colors.Bg}>
+          <Paper p="lg">
+            <Stack gap="xs">
               <Flex
                 direction={{ base: "column", sm: "row" }}
                 justify="space-between"
                 align={{ base: "flex-start", sm: "center" }}
               >
-                <Text fw="bold" ta={{ base: "center", sm: "left" }}>
+                <Title order={4} ta={{ base: "center", sm: "left" }}>
                   Pelayanan Terhadap Publik Desa Darmasaba
-                </Text>
+                </Title>
+
                 <Box mt={{ base: "sm", sm: 0 }}>
-                  <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
-                  <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+                  <Text fz={{ base: "0.9rem", md: "1rem" }} fw="bold" c={colors["blue-button"]}>Total Responden</Text>
+                  <Title order={3} ta="end" c={colors["blue-button"]} fw="bold" mt="xs">
                     {state.findMany.total.toLocaleString('id-ID')}
-                  </Text>
+                  </Title>
                 </Box>
               </Flex>
+
               <BarChart
                 h={300}
                 data={barChartData}
@@ -457,21 +505,18 @@ const state = useProxy(indeksKepuasanState.responden);
               />
             </Stack>
           </Paper>
-          <Box py={"xl"}>
+
+          <Box py="xl">
             <SimpleGrid
-              cols={{
-                base: 1,
-                md: 1,
-                lg: 1,
-                xl: 3
-              }}
+              cols={{ base: 1, md: 1, lg: 1, xl: 3 }}
             >
               {/* Chart Jenis Kelamin */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Jenis Kelamin</Title>
+                  <Title order={5}>Jenis Kelamin</Title>
+
                   {donutDataJenisKelamin.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
+                    <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
@@ -482,6 +527,7 @@ const state = useProxy(indeksKepuasanState.responden);
                             <PieChart
                               withLabels
                               withTooltip
+                              labelsPosition="inside"
                               labelsType="percent"
                               size={200}
                               data={donutDataJenisKelamin}
@@ -492,7 +538,7 @@ const state = useProxy(indeksKepuasanState.responden);
                           {donutDataJenisKelamin.map((entry) => (
                             <Flex key={entry.name} gap="md" align="center">
                               <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                              <Text size="sm">{entry.name}: {entry.value}</Text>
+                              <Text fz={{ base: "0.95rem", md: "1rem" }}>{entry.name}: {entry.value}</Text>
                             </Flex>
                           ))}
                         </Stack>
@@ -505,9 +551,10 @@ const state = useProxy(indeksKepuasanState.responden);
               {/* Chart Rating */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Ulasan</Title>
+                  <Title order={5}>Ulasan</Title>
+
                   {donutDataRating.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
+                    <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
@@ -519,7 +566,7 @@ const state = useProxy(indeksKepuasanState.responden);
                               withTooltip
                               tooltipAnimationDuration={200}
                               withLabels
-                              labelsPosition="outside"
+                              labelsPosition="inside"
                               labelsType="percent"
                               withLabelsLine
                               size={200}
@@ -532,7 +579,7 @@ const state = useProxy(indeksKepuasanState.responden);
                             {donutDataRating.map((entry) => (
                               <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                 <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                <Text fz={{ base: "0.85rem", md: "0.95rem" }} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                   {entry.name}: {entry.value}
                                 </Text>
                               </Flex>
@@ -548,9 +595,10 @@ const state = useProxy(indeksKepuasanState.responden);
               {/* Chart Kelompok Umur */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Umur</Title>
+                  <Title order={5}>Umur</Title>
+
                   {donutDataKelompokUmur.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
+                    <Text c="dimmed" ta="center" my="md" fz={{ base: "0.95rem", md: "1rem" }}>
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
@@ -562,7 +610,7 @@ const state = useProxy(indeksKepuasanState.responden);
                               withTooltip
                               tooltipAnimationDuration={200}
                               withLabels
-                              labelsPosition="outside"
+                              labelsPosition="inside"
                               labelsType="percent"
                               withLabelsLine
                               size={190}
@@ -575,7 +623,7 @@ const state = useProxy(indeksKepuasanState.responden);
                             {donutDataKelompokUmur.map((entry) => (
                               <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                 <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                <Text fz={{ base: "0.85rem", md: "0.95rem" }} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                   {entry.name}: {entry.value}
                                 </Text>
                               </Flex>
@@ -591,31 +639,34 @@ const state = useProxy(indeksKepuasanState.responden);
           </Box>
         </Paper>
       </Box>
+
       {/* Modal */}
       <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
-        <Paper bg={colors['white-1']} p={'md'}>
+        <Paper bg={colors['white-1']} p="md">
           <Stack>
             <TextInput
               label="Nama"
-              type='text'
-              placeholder="masukkan nama"
+              type="text"
+              placeholder="Masukkan nama"
               value={state.create.form.name}
               onChange={(val) => {
                 state.create.form.name = val.currentTarget.value;
               }}
+              labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
             />
             <TextInput
               label="Tanggal Pengisian"
               type="date"
-              placeholder="masukkan tanggal"
+              placeholder="Masukkan tanggal"
               value={state.create.form.tanggal}
               onChange={(val) => {
                 state.create.form.tanggal = val.currentTarget.value;
               }}
+              labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
             />
             <Select
-              key={"jenisKelamin"}
-              label={"Jenis Kelamin"}
+              key="jenisKelamin"
+              label="Jenis Kelamin"
               placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
               value={state.create.form.jenisKelaminId || ""}
               onChange={(val) => {
@@ -623,17 +674,18 @@ const state = useProxy(indeksKepuasanState.responden);
               }}
               data={
                 (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
-                  .filter(Boolean) // Hapus null, undefined, dll
+                  .filter(Boolean)
                   .map((item) => ({
                     value: item.id,
                     label: item.name || 'Tanpa Nama',
                   }))
               }
               disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+              labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
             />
             <Select
-              key={"rating_responden"}
-              label={"Rating"}
+              key="rating_responden"
+              label="Rating"
               placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
               value={state.create.form.ratingId || ""}
               onChange={(val) => {
@@ -641,17 +693,18 @@ const state = useProxy(indeksKepuasanState.responden);
               }}
               data={
                 (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
-                  .filter(Boolean) // Hapus null, undefined, dll
+                  .filter(Boolean)
                   .map((item) => ({
                     value: item.id,
                     label: item.name || 'Tanpa Nama',
                   }))
               }
               disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+              labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
             />
             <Select
-              key={"kelompokUmur"}
-              label={"Kelompok Umur"}
+              key="kelompokUmur"
+              label="Kelompok Umur"
               placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
               value={state.create.form.kelompokUmurId || ""}
               onChange={(val) => {
@@ -659,19 +712,16 @@ const state = useProxy(indeksKepuasanState.responden);
               }}
               data={
                 (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
-                  .filter(Boolean) // Hapus null, undefined, dll
+                  .filter(Boolean)
                   .map((item) => ({
                     value: item.id,
                     label: item.name || 'Tanpa Nama',
                   }))
               }
               disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+              labelProps={{ style: { fontSize: '0.95rem', lineHeight: '1.4' } } as any}
             />
-            <Button
-              mt={10}
-              bg={colors['blue-button']}
-              onClick={handleSubmit}
-            >
+            <Button mt={10} bg={colors['blue-button']} onClick={handleSubmit}>
               Submit
             </Button>
           </Stack>

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/page.tsx

@@ -12,7 +12,8 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  TextInput
+  TextInput,
+  Title
 } from '@mantine/core';
 import { IconSend2 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -53,23 +54,11 @@ function Page() {
   const permohonanInformasiPublikState = useProxy(statePermohonanInformasi);
   const router = useRouter();
 
-  const submitForms = () => {
+  const submitForms = async () => {
     const { create } = permohonanInformasiPublikState.statepermohonanInformasiPublik;
-
-    if (
-      create.form.name &&
-      create.form.nik &&
-      create.form.notelp &&
-      create.form.alamat &&
-      create.form.email &&
-      create.form.jenisInformasiDimintaId &&
-      create.form.caraMemperolehInformasiId &&
-      create.form.caraMemperolehSalinanInformasiId
-    ) {
-      create.create();
+    const hasil = await create.create();
+    if (hasil) {
       router.push('/darmasaba/permohonan/berhasil');
-    } else {
-      console.log('Validasi gagal, form tidak lengkap');
     }
   };
 
@@ -79,14 +68,17 @@ function Page() {
         <BackButton />
       </Box>
 
-      <Text
+      {/* MAIN PAGE TITLE */}
+      <Title
+        order={1}
         ta="center"
-        fz={{ base: '2rem', md: '2.5rem' }}
+        fz={{ base: '1.8rem', sm: '2.2rem', md: '2.6rem' }}
+        lh={1.2}
         c={colors['blue-button']}
-        fw="bold"
+        style={{ fontWeight: 700 }}
       >
         Permohonan Informasi Publik
-      </Text>
+      </Title>
 
       <Box px={{ base: 'md', md: 100 }}>
         <Stack gap="xl">
@@ -97,15 +89,18 @@ function Page() {
             shadow="sm"
             bg={colors['white-trans-1']}
           >
-            <Text
+            {/* SUBTITLE */}
+            <Title
+              order={2}
               pb={30}
               ta="center"
-              fw="bold"
-              fz={{ base: 'h4', md: 'h3' }}
+              fz={{ base: '1.4rem', md: '1.8rem' }}
+              lh={1.3}
               c={colors['blue-button']}
+              style={{ fontWeight: 700 }}
             >
               Tata Cara Permohonan
-            </Text>
+            </Title>
 
             <SimpleGrid pb={30} cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
               {steps.map((v) => (
@@ -128,27 +123,38 @@ function Page() {
                           c={colors['blue-button']}
                           ta="center"
                           fw="bold"
-                          fz="h3"
+                          fz="h2"
+                          lh={1}
                         >
                           {v.number}
                         </Text>
                       </ActionIcon>
                     </Center>
+
+                    <Title
+                      order={4}
+                      ta="center"
+                      c={colors['white-1']}
+                      fz="lg"
+                      lh={1.3}
+                      style={{ fontWeight: 700 }}
+                    >
+                      {v.title}
+                    </Title>
+
                     <Text
                       ta="center"
                       c={colors['white-1']}
-                      fw="bold"
-                      fz="lg"
+                      fz="sm"
+                      lh={1.4}
                     >
-                      {v.title}
-                    </Text>
-                    <Text ta="center" c={colors['white-1']} fz="sm">
                       {v.desc}
                     </Text>
                   </Stack>
                 </Paper>
               ))}
             </SimpleGrid>
+
             <Group justify="center">
               <Paper
                 p="xl"
@@ -160,15 +166,20 @@ function Page() {
                 maw={800}
               >
                 <Stack gap="md">
-                  <Text
-                    fw="bold"
-                    fz={{ base: 'h4', md: 'h3' }}
+
+                  {/* FORM TITLE */}
+                  <Title
+                    order={2}
                     ta="center"
+                    fz={{ base: '1.4rem', md: '1.8rem' }}
+                    lh={1.3}
                     c={colors['blue-button']}
+                    style={{ fontWeight: 700 }}
                   >
                     Formulir Permohonan Informasi
-                  </Text>
+                  </Title>
 
+                  {/* INPUTS */}
                   <TextInput
                     label="Nama Lengkap"
                     placeholder="Masukkan nama lengkap Anda"
@@ -178,6 +189,7 @@ function Page() {
                         val.target.value;
                     }}
                   />
+
                   <TextInput
                     label="Nomor Induk Kependudukan (NIK)"
                     placeholder="Masukkan NIK"
@@ -187,6 +199,7 @@ function Page() {
                         val.target.value;
                     }}
                   />
+
                   <TextInput
                     label="Nomor Telepon"
                     placeholder="Masukkan nomor telepon aktif"
@@ -196,6 +209,7 @@ function Page() {
                         val.target.value;
                     }}
                   />
+
                   <TextInput
                     label="Alamat Lengkap"
                     placeholder="Masukkan alamat sesuai identitas"
@@ -205,6 +219,7 @@ function Page() {
                         val.target.value;
                     }}
                   />
+
                   <TextInput
                     label="Alamat Email"
                     placeholder="Masukkan alamat email aktif"
@@ -221,12 +236,14 @@ function Page() {
                         val.id;
                     }}
                   />
+
                   <MemperolehInformasi
                     onChange={(val) => {
                       permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehInformasiId =
                         val.id;
                     }}
                   />
+
                   <MemperolehSalinan
                     onChange={(val) => {
                       permohonanInformasiPublikState.statepermohonanInformasiPublik.create.form.caraMemperolehSalinanInformasiId =
@@ -253,6 +270,7 @@ function Page() {
                       Kirim Permohonan
                     </Button>
                   </Group>
+
                 </Stack>
               </Paper>
             </Group>

src/app/darmasaba/(pages)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -12,6 +12,7 @@ import {
   Stack,
   Text,
   TextInput,
+  Title,
   Tooltip,
 } from '@mantine/core';
 import {
@@ -55,18 +56,9 @@ function Page() {
   const stateKeberatan = useProxy(permohonanKeberatanInformasi);
   const router = useRouter();
 
-  const submit = () => {
-    if (
-      stateKeberatan.create.form.name &&
-      stateKeberatan.create.form.email &&
-      stateKeberatan.create.form.notelp &&
-      stateKeberatan.create.form.alasan
-    ) {
-      stateKeberatan.create.create();
-      router.push('/darmasaba/permohonan/berhasil');
-    } else {
-      console.log('Formulir belum lengkap');
-    }
+  const submit = async () => {
+    const hasil = await stateKeberatan.create.create();
+    if (hasil) router.push('/darmasaba/permohonan/berhasil');
   };
 
   return (
@@ -76,15 +68,16 @@ function Page() {
       </Box>
 
       <Stack align="center" px={{ base: 'md', md: 100 }}>
-        <Text
+        <Title
+          order={1}
           ta="center"
-          fz={{ base: '2rem', md: '2.8rem' }}
+          fz={{ base: '1.8rem', md: '2.6rem' }}
+          lh={1.2}
           c={colors['blue-button']}
-          fw={800}
-          style={{ letterSpacing: '-0.5px' }}
+          style={{ letterSpacing: -0.5 }}
         >
           Permohonan Keberatan Informasi Publik
-        </Text>
+        </Title>
 
         <Paper
           p="xl"
@@ -94,26 +87,36 @@ function Page() {
           withBorder
         >
           <Stack gap="xl">
+            {/* Tentang */}
             <Box>
-              <Text fw={700} fz={{ base: 'lg', md: 'xl' }} mb={8}>
+              <Title order={3} fz={{ base: 'lg', md: 'xl' }} lh={1.3} mb={8}>
                 Tentang Permohonan Keberatan
-              </Text>
-              <Text ta="justify" fz={{ base: 'sm', md: 'md' }} lh={1.6}>
+              </Title>
+
+              <Text
+                ta="justify"
+                fz={{ base: 'sm', md: 'md' }}
+                lh={1.7}
+                c="black"
+              >
                 Jika Anda merasa permohonan informasi tidak ditanggapi dengan
                 baik atau ditolak, Anda berhak mengajukan keberatan melalui
                 formulir berikut.
               </Text>
             </Box>
 
+            {/* Alur */}
             <Stack>
-              <Text
+              <Title
+                order={3}
                 ta="center"
                 fw={700}
                 fz={{ base: 'xl', md: '2xl' }}
-                style={{ letterSpacing: '-0.5px' }}
+                lh={1.2}
+                style={{ letterSpacing: -0.5 }}
               >
                 Alur Pengajuan Keberatan
-              </Text>
+              </Title>
 
               <SimpleGrid cols={{ base: 1, md: 4 }} spacing="lg">
                 {data.map((v) => (
@@ -128,15 +131,23 @@ function Page() {
                       <Center>
                         <v.icon size={48} color={colors['white-1']} />
                       </Center>
+
                       <Text
                         ta="center"
                         c={colors['white-1']}
                         fw={700}
                         fz="lg"
+                        lh={1.3}
                       >
                         {v.title}
                       </Text>
-                      <Text ta="center" c={colors['white-1']} fz="sm">
+
+                      <Text
+                        ta="center"
+                        c={colors['white-1']}
+                        fz="sm"
+                        lh={1.6}
+                      >
                         {v.desc}
                       </Text>
                     </Stack>
@@ -145,6 +156,7 @@ function Page() {
               </SimpleGrid>
             </Stack>
 
+            {/* Form */}
             <Group justify="center">
               <Paper
                 p="xl"
@@ -156,14 +168,16 @@ function Page() {
                 w="100%"
               >
                 <Stack gap="md">
-                  <Text
+                  <Title
+                    order={3}
+                    ta="center"
                     fw={700}
                     fz={{ base: 'lg', md: 'xl' }}
-                    ta="center"
+                    lh={1.3}
                     mb={4}
                   >
                     Formulir Keberatan
-                  </Text>
+                  </Title>
 
                   <TextInput
                     label="Nama Lengkap"
@@ -190,7 +204,7 @@ function Page() {
 
                   <TextInput
                     label="Nomor Telepon"
-                    placeholder="Contoh: 0812-3456-7890"
+                    placeholder="Contoh: 081234567890"
                     radius="md"
                     size="md"
                     withAsterisk
@@ -200,7 +214,7 @@ function Page() {
                   />
 
                   <Box>
-                    <Text fw={600} fz="sm" mb={6}>
+                    <Text fw={600} fz="sm" lh={1.4} mb={6}>
                       Alasan Keberatan
                     </Text>
                     <PPIDTextEditor
@@ -226,11 +240,13 @@ function Page() {
               </Paper>
             </Group>
 
+            {/* Kontak */}
             <Stack gap={4} pt="lg" align="center">
-              <Text fw={700} fz="lg">
+              <Title order={4} fw={700} fz="lg" lh={1.3}>
                 Kontak PPID
-              </Text>
-              <Text fz="sm" c="dimmed">
+              </Title>
+
+              <Text fz="sm" lh={1.5} c="dimmed" ta="center">
                 Email: desadarmasaba@badungkab.go.id | WhatsApp: 081-xxx-xxx-xxx
               </Text>
             </Stack>

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

@@ -0,0 +1,257 @@
+'use client'
+import stateProfilePPID from '@/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID';
+import colors from '@/con/colors';
+import {
+  Box,
+  Center,
+  Divider,
+  Flex,
+  Image,
+  List,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import {
+  IconBuildingCommunity,
+  IconTargetArrow,
+  IconTimeline,
+  IconUser,
+} from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
+import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton';
+
+function Page() {
+  const allList = useProxy(stateProfilePPID);
+
+  useShallowEffect(() => {
+    allList.profile.load('edit');
+  }, []);
+
+  // LOADING SKELETON
+  if (!allList.profile.data)
+    return (
+      <Stack bg={colors.Bg} py="xl" gap="22">
+        <Box px={{ base: 'md', md: 100 }}>
+          <Skeleton h={40} />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Skeleton h={80} />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Paper p="xl" bg={colors['white-trans-1']}>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Skeleton key={i} h={40} mb="sm" />
+            ))}
+          </Paper>
+        </Box>
+      </Stack>
+    );
+
+  const dataArray = Array.isArray(allList.profile.data)
+    ? allList.profile.data
+    : [allList.profile.data];
+
+  return (
+    <Box>
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+        {/* Back Button */}
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+
+        {/* Page Title */}
+        <Box px={{ base: 'md', md: 100 }}>
+          <Title
+            order={1}
+            ta="center"
+            c={colors['blue-button']}
+            fz={{ base: '2rem', md: '2.7rem', lg: '3.2rem', xl: '3.6rem' }}
+            lh={{ base: 1.1, md: 1.1 }}
+            fw={900}
+          >
+            Profil PPID Desa Darmasaba
+          </Title>
+        </Box>
+
+        {dataArray.map((item) => (
+          <Box key={item.id} px={{ base: 'md', md: 100 }}>
+            <Paper p="xl" bg={colors['white-trans-1']} radius="lg" shadow="xl">
+              {/* LOGO & TITLE */}
+              <Box px={{ base: 'md', md: 100 }}>
+                <Center>
+                  <Image
+                    loading="lazy"
+                    src="/darmasaba-icon.png"
+                    h={{ base: 70, md: 120 }}
+                    w={{ base: 70, md: 120 }}
+                    alt="Logo Desa"
+                  />
+                </Center>
+
+                <Title
+                  order={2}
+                  ta="center"
+                  fz={{ base: '1.4rem', md: '2.2rem', lg: '2.6rem', xl: '3rem' }}
+                  lh={1.1}
+                  fw={800}
+                  mt="md"
+                >
+                  Pejabat Pengelola Informasi dan Dokumentasi
+                </Title>
+              </Box>
+
+              <Divider my="lg" />
+
+              {/* GRID BLOCK */}
+              <Box px={{ base: 0, md: 50 }} pb={40}>
+                <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl">
+                  {/* FOTO + NAMA */}
+                  <Box px={{ base: 0, md: 50 }}>
+                    <Paper bg={colors['white-trans-1']} radius="xl" shadow="md" withBorder>
+                      <Stack gap={0}>
+                        <Image
+                          pt={{ base: 0, md: 100 }}
+                          px="lg"
+                          src={
+                            item.image?.link
+                              ? `${item.image.link}?t=${Date.now()}`
+                              : '/perbekel.png'
+                          }
+                          alt="Foto Pimpinan"
+                          radius="lg"
+                          onError={(e) => (e.currentTarget.src = '/perbekel.png')}
+                          loading="lazy"
+                        />
+
+                        <Paper
+                          bg={colors['blue-button']}
+                          px="lg"
+                          radius="0 0 var(--mantine-radius-xl) var(--mantine-radius-xl)"
+                          className="glass3"
+                          py={{ base: 20, md: 50 }}
+                        >
+                          <Title
+                            order={3}
+                            ta="center"
+                            c={colors['white-1']}
+                            fz={{ base: '1.4rem', md: '2.2rem' }}
+                            lh={1.1}
+                            fw={900}
+                          >
+                            {item.name}
+                          </Title>
+                        </Paper>
+                      </Stack>
+                    </Paper>
+                  </Box>
+
+                  {/* BIOGRAFI & RIWAYAT */}
+                  <Box>
+                    <Stack gap="xl">
+                      {/* BIO */}
+                      <Box>
+                        <Flex align="center" gap="sm" mb="sm">
+                          <IconUser size={28} />
+                          <Title order={3} fz={{ base: '1.3rem', md: '1.6rem' }} lh={1.2} fw={800}>
+                            Biografi
+                          </Title>
+                        </Flex>
+
+                        <Box px={20}>
+                          <Text
+                            fz={{ base: '1rem', md: '1.1rem', lg: '1.2rem' }}
+                            lh={1.6}
+                            ta="justify"
+                            dangerouslySetInnerHTML={{ __html: item.biodata }}
+                            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                          />
+                        </Box>
+                      </Box>
+
+                      {/* RIWAYAT */}
+                      <Box>
+                        <Flex align="center" gap="sm" mb="sm">
+                          <IconTimeline size={28} />
+                          <Title order={3} fz={{ base: '1.3rem', md: '1.6rem' }} lh={1.2} fw={800}>
+                            Riwayat Karir
+                          </Title>
+                        </Flex>
+
+                        <List spacing="xs" size="sm">
+                          <Box px={20}>
+                            <Text
+                              fz={{ base: '1rem', md: '1.1rem', lg: '1.2rem' }}
+                              lh={1.6}
+                              ta="justify"
+                              dangerouslySetInnerHTML={{ __html: item.riwayat }}
+                              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                            />
+                          </Box>
+                        </List>
+                      </Box>
+                    </Stack>
+                  </Box>
+                </SimpleGrid>
+              </Box>
+
+              {/* ORGANISASI */}
+              <Box pb={40}>
+                <Flex align="center" gap="sm" mb="sm">
+                  <IconBuildingCommunity size={28} />
+                  <Title order={3} fz={{ base: '1.3rem', md: '1.6rem' }} lh={1.2} fw={800}>
+                    Pengalaman Organisasi
+                  </Title>
+                </Flex>
+
+                <List spacing="xs" size="sm">
+                  <Box px={20}>
+                    <Text
+                      fz={{ base: '1rem', md: '1.1rem' }}
+                      lh={1.6}
+                      ta="justify"
+                      dangerouslySetInnerHTML={{ __html: item.pengalaman }}
+                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                    />
+                  </Box>
+                </List>
+              </Box>
+
+              {/* PROGRAM UNGGULAN */}
+              <Box>
+                <Flex align="center" gap="sm" mb="sm">
+                  <IconTargetArrow size={28} />
+                  <Title order={3} fz={{ base: '1.3rem', md: '1.6rem' }} lh={1.2} fw={800}>
+                    Program Unggulan
+                  </Title>
+                </Flex>
+
+                <List spacing="xs" size="sm">
+                  <Box px={20}>
+                    <Text
+                      fz={{ base: '1rem', md: '1.1rem' }}
+                      lh={1.6}
+                      ta="justify"
+                      dangerouslySetInnerHTML={{ __html: item.unggulan }}
+                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                    />
+                  </Box>
+                </List>
+              </Box>
+            </Paper>
+          </Box>
+        ))}
+      </Stack>
+
+      {/* tombol scroll */}
+      <ScrollToTopButton />
+    </Box>
+  );
+}
+
+export default Page;

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

@@ -1,146 +0,0 @@
-'use client'
-import stateProfilePPID from '@/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID';
-import colors from '@/con/colors';
-import { Box, Center, Divider, Flex, Image, List, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconBuildingCommunity, IconTargetArrow, IconTimeline, IconUser } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import BackButton from '../../desa/layanan/_com/BackButto';
-import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton';
-
-function Page() {
-  const allList = useProxy(stateProfilePPID)
-  useShallowEffect(() => {
-    allList.profile.load("edit")
-  }, [])
-
-  if (!allList.profile.data) return (
-    <Stack bg={colors.Bg} py="xl" gap="22">
-      <Box px={{ base: 'md', md: 100 }}>
-        <Skeleton h={40} />
-      </Box>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Skeleton h={80} />
-      </Box>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Paper p="xl" bg={colors['white-trans-1']}>
-          {Array.from({ length: 8 }).map((_, i) => (
-            <Skeleton key={i} h={40} mb="sm" />
-          ))}
-        </Paper>
-      </Box>
-    </Stack>
-  )
-
-  const dataArray = Array.isArray(allList.profile.data)
-    ? allList.profile.data
-    : [allList.profile.data]
-
-  return (
-    <Box>
-      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-        <Box px={{ base: 'md', md: 100 }}>
-          <BackButton />
-        </Box>
-        <Box px={{ base: 'md', md: 100 }}>
-          <Text ta="center" fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw="bold">
-            Profil PPID Desa Darmasaba
-          </Text>
-        </Box>
-        {dataArray.map((item) => (
-          <Box key={item.id} px={{ base: "md", md: 100 }}>
-            <Paper p="xl" bg={colors['white-trans-1']} radius="lg" shadow="xl">
-              <Box px={{ base: "md", md: 100 }}>
-                <Center>
-                  <Image loading='lazy' src="/darmasaba-icon.png" h={{ base: 70, md: 120 }} w={{ base: 70, md: 120 }} alt="Logo Desa" />
-                </Center>
-                <Text ta="center" fz={{ base: "1.2rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw="bold">
-                  Pejabat Pengelola Informasi dan Dokumentasi
-                </Text>
-              </Box>
-              <Divider my="lg" />
-
-              <Box px={{ base: 0, md: 50 }} pb={40}>
-                <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl">
-                  <Box px={{ base: 0, md: 50 }}>
-                    <Paper bg={colors['white-trans-1']} radius="xl" shadow="md" withBorder>
-                      <Stack gap={0}>
-                        <Image
-                          pt={{ base: 0, md: 100 }}
-                          px="lg"
-                          src={item.image?.link ? `${item.image.link}?t=${Date.now()}` : "/perbekel.png"}
-                          alt="Foto Pimpinan"
-                          radius="lg"
-                          onError={(e) => e.currentTarget.src = "/perbekel.png"}
-                          loading="lazy"
-                        />
-                        <Paper
-                          bg={colors['blue-button']}
-                          px="lg"
-                          radius="0 0 var(--mantine-radius-xl) var(--mantine-radius-xl)"
-                          className="glass3"
-                          py={{ base: 20, md: 50 }}
-                        >
-                          <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "xl", md: "h2" }}>
-                            {item.name}
-                          </Text>
-                        </Paper>
-                      </Stack>
-                    </Paper>
-                  </Box>
-
-                  <Box>
-                    <Stack gap="xl">
-                      <Box>
-                        <Flex align="center" gap="sm" mb="sm">
-                          <IconUser size={28} />
-                          <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Biografi</Text>
-                        </Flex>
-                        <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.biodata }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
-                      </Box>
-                      <Box>
-                        <Flex align="center" gap="sm" mb="sm">
-                          <IconTimeline size={28} />
-                          <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Riwayat Karir</Text>
-                        </Flex>
-                        <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
-                      </Box>
-                    </Stack>
-                  </Box>
-                </SimpleGrid>
-              </Box>
-
-              <Box pb={40}>
-                <Flex align="center" gap="sm" mb="sm">
-                  <IconBuildingCommunity size={28} />
-                  <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
-                </Flex>
-                <List spacing="xs" size="sm">
-                  <Box px={20}>
-                    <Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.pengalaman }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
-                  </Box>
-                </List>
-              </Box>
-
-              <Box>
-                <Flex align="center" gap="sm" mb="sm">
-                  <IconTargetArrow size={28} />
-                  <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Program Unggulan</Text>
-                </Flex>
-                <List spacing="xs" size="sm">
-                  <Box px={20}>
-                    <Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.unggulan }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
-                  </Box>
-                </List>
-              </Box>
-            </Paper>
-          </Box>
-        ))}
-      </Stack>
-      {/* Tombol Scroll ke Atas */}
-      <ScrollToTopButton />
-    </Box>
-  )
-}
-
-export default Page

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

@@ -27,7 +27,6 @@ function DetailPegawaiUser() {
     statePegawai.findUnique.load(params?.id as string);
   }, []);
 
-
   if (!statePegawai.findUnique.data) {
     return (
       <Stack py="lg">
@@ -52,7 +51,7 @@ function DetailPegawaiUser() {
           }}
         >
           <IconArrowBack size={22} color={colors['blue-button']} />
-          <Text c={colors['blue-button']} fw={500}>
+          <Text fz={{ base: 'sm', md: 'md' }} lh="1.4" fw={500} c={colors['blue-button']}>
             Kembali
           </Text>
         </Box>
@@ -65,9 +64,7 @@ function DetailPegawaiUser() {
         radius="lg"
         shadow="sm"
         bg="white"
-        style={{
-          border: '1px solid #eaeaea',
-        }}
+        style={{ border: '1px solid #eaeaea' }}
       >
         <Stack align="center" gap="md">
           {/* Foto Profil */}
@@ -84,10 +81,23 @@ function DetailPegawaiUser() {
 
           {/* Nama & Jabatan */}
           <Stack align="center" gap={2}>
-            <Title order={3} fw={700} c={colors['blue-button']}>
+            <Title
+              order={2}
+              c={colors['blue-button']}
+              fw={700}
+              fz={{ base: 'xl', md: '28px' }}
+              lh="1.2"
+              ta="center"
+            >
               {data.namaLengkap || '-'} {data.gelarAkademik || ''}
             </Title>
-            <Text fz="sm" c="dimmed">
+
+            <Text
+              fz={{ base: 'sm', md: 'md' }}
+              lh="1.4"
+              c="dimmed"
+              ta="center"
+            >
               {data.posisi?.nama || 'Posisi tidak tersedia'}
             </Text>
           </Stack>
@@ -105,10 +115,10 @@ function DetailPegawaiUser() {
             value={
               data.tanggalMasuk
                 ? new Date(data.tanggalMasuk).toLocaleDateString('id-ID', {
-                  day: '2-digit',
-                  month: 'long',
-                  year: 'numeric',
-                })
+                    day: '2-digit',
+                    month: 'long',
+                    year: 'numeric',
+                  })
                 : '-'
             }
           />
@@ -123,7 +133,7 @@ function DetailPegawaiUser() {
   );
 }
 
-/* Komponen kecil untuk menampilkan baris informasi */
+/* Komponen Baris Informasi */
 function InfoRow({
   label,
   value,
@@ -137,11 +147,18 @@ function InfoRow({
 }) {
   return (
     <Box>
-      <Text fz="sm" fw={600} c="dark">
+      <Text
+        fz={{ base: 'sm', md: 'md' }}
+        fw={600}
+        lh="1.3"
+        c="dark"
+      >
         {label}
       </Text>
+
       <Text
-        fz="sm"
+        fz={{ base: 'sm', md: 'md' }}
+        lh="1.5"
         c={valueColor || 'dimmed'}
         style={{
           whiteSpace: multiline ? 'normal' : 'nowrap',

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

@@ -14,6 +14,9 @@ import {
   Loader,
   Paper,
   Stack,
+  Tabs,
+  TabsList,
+  TabsTab,
   Text,
   TextInput,
   Title,
@@ -35,6 +38,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useProxy } from 'valtio/utils'
 import BackButton from '../../desa/layanan/_com/BackButto'
 import './struktur.css'
+import { useMediaQuery } from '@mantine/hooks'
 
 export default function Page() {
   return (
@@ -55,10 +59,11 @@ export default function Page() {
             ta="center"
             c={colors['blue-button']}
             fz={{ base: 28, md: 36, lg: 44 }}
+            lh={{ base: 1.05, md: 1.03 }}
           >
             Struktur Organisasi PPID
           </Title>
-          <Text ta="center" c="black" maw={800}>
+          <Text ta="center" c="black" maw={800} fz={{ base: 13, md: 15 }} lh={1.45}>
             Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor
             untuk melihat detail atau klik node untuk fokus tampilan.
           </Text>
@@ -101,8 +106,8 @@ function StrukturOrganisasiPPID() {
       <Center py={48}>
         <Stack align="center" gap="sm">
           <Loader size="lg" />
-          <Text fw={600}>Memuat struktur organisasi…</Text>
-          <Text c="dimmed" size="sm">
+          <Text fw={600} fz={{ base: 15, md: 16 }} lh={1.2}>Memuat struktur organisasi…</Text>
+          <Text c="dimmed" fz={{ base: 12, md: 13 }} lh={1.4}>
             Mengambil data pegawai dan posisi. Mohon tunggu sebentar.
           </Text>
         </Stack>
@@ -128,10 +133,10 @@ function StrukturOrganisasiPPID() {
             <Center>
               <IconUsers size={56} />
             </Center>
-            <Title order={3} mt="md">
+            <Title order={3} mt="md" fz={{ base: 16, md: 18 }} lh={1.15}>
               Data pegawai belum tersedia
             </Title>
-            <Text c="dimmed" mt="xs">
+            <Text c="dimmed" mt="xs" fz={{ base: 13, md: 14 }} lh={1.4}>
               Belum ada data pegawai yang tercatat untuk PPID.
             </Text>
             <Group justify="center" mt="lg">
@@ -228,90 +233,137 @@ function StrukturOrganisasiPPID() {
       {/* 🔍 Controls */}
       <Paper
         shadow="xs"
+        w={{
+          base: '100%',       // Mobile: 100%
+          sm: '40%',          // Tablet: 95%
+          md: '39%',          // Desktop: 70%
+          lg: '38%',          // Desktop L: 60%
+          xl: '37%',          // 4K: 50%
+          '2xl': '36%',       // Ultra-wide: 45%
+        }}
         p="md"
         radius="md"
         style={{
-          background: colors['blue-button']
+          background: colors['blue-button'],       // ⬅️ penting
+          maxWidth: '100%',    // ⬅️ penting
+          overflowX: 'auto'    // ⬅️ untuk mencegah overflow
         }}
       >
-        <Group gap="sm" wrap="wrap" justify="center">
-          <TextInput
-            placeholder="Cari nama atau jabatan..."
-            leftSection={<IconSearch size={16} />}
-            onChange={(e) => debouncedSearch(e.target.value)}
+
+        <Stack gap="sm">
+          <Group justify='center'>
+            <TextInput
+              placeholder="Cari nama atau jabatan..."
+              leftSection={<IconSearch size={16} />}
+              onChange={(e) => debouncedSearch(e.target.value)}
+              styles={{
+                input: {
+                  minWidth: 250,
+                },
+              }}
+            />
+          </Group>
+          <Tabs
+            defaultValue="zoom-out"
+            variant="outline"
+            radius="md"
             styles={{
-              input: {
-                minWidth: 250,
+              panel: { display: 'none' },
+              tab: {
+                color: colors['blue-button'],
+                backgroundColor: colors['blue-button-2'],
+                border: 'none',
+                fontWeight: 600,
+                fontSize: '0.875rem',
+                padding: '6px 12px',
+                minHeight: 'auto',
+                flexShrink: 0,
               },
             }}
-          />
-
-          <Group gap="xs">
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              size="sm"
-              onClick={handleZoomOut}
-              leftSection={<IconZoomOut size={16} />}
-              c={colors['blue-button']}
-            >
-              Zoom Out
-            </Button>
-
-            <Box
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              px={16}
-              py={8}
+            style={{ width: '100%' }} // 👈 penting
+          >
+            <TabsList
               style={{
-                fontSize: 14,
-                fontWeight: 700,
-                borderRadius: '8px',
-                minWidth: 70,
-                textAlign: 'center',
+                display: 'flex',
+                overflowX: 'auto',
+                overflowY: 'hidden',
+                gap: '4px',
+                paddingBottom: '4px',
+                flexWrap: 'nowrap',
+                WebkitOverflowScrolling: 'touch',
+                scrollbarWidth: 'thin',
+                msOverflowStyle: '-ms-autohiding-scrollbar',
+                maxWidth: '100%',
+                scrollBehavior: 'smooth', // 👈 smooth scroll
               }}
             >
-              {Math.round(scale * 100)}%
-            </Box>
+              <TabsTab
+                value="zoom-out"
+                onClick={handleZoomOut}
+                leftSection={<IconZoomOut size={16} />}
+                style={{ flexShrink: 0 }}
+              >
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Zoom Out</Text>
+              </TabsTab>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={handleZoomIn}
-              leftSection={<IconZoomIn size={16} />}
-            >
-              Zoom In
-            </Button>
+              <Box
+                bg={colors['blue-button-2']}
+                c={colors['blue-button']}
+                px={12}
+                py={6}
+                style={{
+                  fontWeight: 700,
+                  borderRadius: '6px',
+                  minWidth: 60,
+                  textAlign: 'center',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Text fz={{ base: 12, sm: 13 }} lh={1} c={colors['blue-button']}>
+                  {Math.round(scale * 100)}%
+                </Text>
+              </Box>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={resetZoom}
-            >
-              Reset
-            </Button>
+              <TabsTab
+                value="zoom-in"
+                onClick={handleZoomIn}
+                leftSection={<IconZoomIn size={16} />}
+                style={{ flexShrink: 0 }}
+              >
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Zoom In</Text>
+              </TabsTab>
 
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={toggleFullscreen}
-              leftSection={
-                isFullscreen ? (
-                  <IconArrowsMinimize size={16} />
-                ) : (
-                  <IconArrowsMaximize size={16} />
-                )
-              }
-            >
-              Fullscreen
-            </Button>
-          </Group>
-        </Group>
+              <TabsTab
+                value="reset"
+                onClick={resetZoom}
+                style={{ flexShrink: 0 }}
+              >
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">Reset</Text>
+              </TabsTab>
+
+              <TabsTab
+                value="fullscreen"
+                onClick={toggleFullscreen}
+                leftSection={
+                  isFullscreen ? (
+                    <IconArrowsMinimize size={16} />
+                  ) : (
+                    <IconArrowsMaximize size={16} />
+                  )
+                }
+                style={{ flexShrink: 0 }}
+              >
+                <Text fz={{ base: 12, sm: 13 }} lh={1} ta="center">
+                  {isFullscreen ? 'Exit' : 'Fullscreen'}
+                </Text>
+              </TabsTab>
+            </TabsList>
+          </Tabs>
+        </Stack>
       </Paper>
 
       {/* 🧩 Chart Container */}
@@ -325,15 +377,20 @@ function StrukturOrganisasiPPID() {
             maxWidth: '100%',
             padding: '32px 16px',
             transition: 'transform 0.2s ease',
-            transform: `scale(${scale})`,
-            transformOrigin: 'center top',
           }}
         >
-          <OrganizationChart
-            value={chartData}
-            nodeTemplate={(node) => <NodeCard node={node} router={router} />}
-            className="p-organizationchart p-organizationchart-horizontal"
-          />
+          <Box style={{
+            transform: `scale(${scale})`,
+            transformOrigin: 'center top',
+            display: 'inline-block', // 👈 agar tidak memenuhi lebar parent
+            minWidth: 'min-content', // 👈 penting agar chart tidak dipaksa muat di width 100%
+          }}>
+            <OrganizationChart
+              value={chartData}
+              nodeTemplate={(node) => <NodeCard node={node} router={router} />}
+              className="p-organizationchart p-organizationchart-horizontal"
+            />
+          </Box>
         </Box>
       </Center>
     </Stack>
@@ -345,6 +402,7 @@ function NodeCard({ node, router }: any) {
   const name = node?.data?.name || 'Tanpa Nama'
   const title = node?.data?.title || 'Tanpa Jabatan'
   const hasId = Boolean(node?.data?.id)
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   return (
     <Transition mounted transition="pop" duration={300}>
@@ -355,9 +413,10 @@ function NodeCard({ node, router }: any) {
           withBorder
           style={{
             ...styles,
-            width: 240,
-            minHeight: 280,
-            padding: 20,
+            width: '100%',
+            maxWidth: isMobile ? 200 : 240, // lebih kecil di mobile
+            minHeight: isMobile ? 240 : 280,
+            padding: isMobile ? 16 : 20,
             background: 'linear-gradient(135deg, rgba(28,110,164,0.15) 0%, rgba(255,255,255,0.95) 100%)',
             borderColor: 'rgba(28, 110, 164, 0.3)',
             borderWidth: 2,
@@ -406,17 +465,17 @@ function NodeCard({ node, router }: any) {
             {/* Name */}
             <Text
               fw={700}
-              size="sm"
               ta="center"
               c={colors['blue-button']}
               lineClamp={2}
+              fz={{ base: 13, md: 15 }}
+              lh={1.2}
               style={{
                 minHeight: 40,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 wordBreak: 'break-word',
-                lineHeight: 1.3,
               }}
             >
               {name}
@@ -424,18 +483,18 @@ function NodeCard({ node, router }: any) {
 
             {/* Title/Position */}
             <Text
-              size="xs"
               c="dimmed"
               ta="center"
               fw={500}
               lineClamp={2}
+              fz={{ base: 12, md: 13 }}
+              lh={1.3}
               style={{
                 minHeight: 32,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
                 wordBreak: 'break-word',
-                lineHeight: 1.2,
               }}
             >
               {title}
@@ -458,7 +517,7 @@ function NodeCard({ node, router }: any) {
                   fontWeight: 600,
                 }}
               >
-                Lihat Detail
+                <Text fz={{ base: 12, md: 13 }} lh={1} ta="center">Lihat Detail</Text>
               </Button>
             )}
           </Stack>

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

@@ -1,7 +1,18 @@
 'use client'
 import stateVisiMisiPPID from '@/app/admin/(dashboard)/_state/ppid/visi_misi_ppid/visimisiPPID';
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Skeleton, Stack, Text, Divider, Transition } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Image,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Divider,
+  Transition,
+  Title
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import { IconSparkles } from '@tabler/icons-react';
@@ -9,6 +20,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const allList = useProxy(stateVisiMisiPPID);
+
   useShallowEffect(() => {
     allList.findById.load("1");
   }, []);
@@ -35,7 +47,7 @@ function Page() {
 
       {dataArray.map((item) => (
         <Box key={item.id} px={{ base: 'md', md: 100 }}>
-          <Transition mounted={true} transition="fade" duration={500} timingFunction="ease">
+          <Transition mounted transition="fade" duration={500} timingFunction="ease">
             {(styles) => (
               <Paper
                 style={styles}
@@ -46,53 +58,93 @@ function Page() {
                 withBorder
               >
                 <Stack gap="xl">
+
+                  {/* ==== MOTTO SECTION ==== */}
                   <Box>
                     <Center mb="md">
-                      <Image src="/darmasaba-icon.png" w={{ base: 80, md: 130 }} alt="Logo Desa Darmasaba" loading='lazy' />
+                      <Image
+                        src="/darmasaba-icon.png"
+                        w={{ base: 80, md: 130 }}
+                        alt="Logo Desa Darmasaba"
+                        loading="lazy"
+                      />
                     </Center>
-                    <Text
+
+                    <Title
+                      order={2}
                       ta="center"
-                      fz={{ base: 28, md: 36 }}
-                      fw={800}
+                      fz={{ base: 26, md: 34 }}
+                      lh={1.2}
                       c={colors['blue-button']}
                     >
                       Moto PPID Desa Darmasaba
-                    </Text>
-                    <Text ta="center" fz={{ base: 16, md: 20 }} mt="xs">
+                    </Title>
+
+                    <Text
+                      ta="center"
+                      fz={{ base: 15, md: 18 }}
+                      lh={1.5}
+                      c={"black"}
+                      mt="xs"
+                    >
                       Memberikan informasi yang cepat, mudah, tepat, dan transparan
                     </Text>
                   </Box>
 
-                  <Divider my="sm" labelPosition="center" label={<IconSparkles size={18} />} />
+                  <Divider
+                    my="sm"
+                    labelPosition="center"
+                    label={<IconSparkles size={18} />}
+                  />
 
+                  {/* ==== VISI SECTION ==== */}
                   <Box>
-                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={800}
-                      c={colors['blue-button']} mb="sm">
-                      Visi PPID
-                    </Text>
-                    <Text
-                      fz={{ base: 'md', md: 'lg' }}
-                      lh={1.7}
+                    <Title
+                      order={3}
                       ta="center"
+                      fz={{ base: 22, md: 28 }}
+                      lh={1.2}
+                      c={colors['blue-button']}
+                      mb="sm"
+                    >
+                      Visi PPID
+                    </Title>
+
+                    <Text
+                      ta="center"
+                      fz={{ base: 15, md: 18 }}
+                      lh={1.7}
                       dangerouslySetInnerHTML={{ __html: item.visi }}
-                      style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
                     />
                   </Box>
 
                   <Divider my="sm" />
 
+                  {/* ==== MISI SECTION ==== */}
                   <Box>
-                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={800}
-                      c={colors['blue-button']} mb="sm">
+                    <Title
+                      order={3}
+                      ta="center"
+                      fz={{ base: 22, md: 28 }}
+                      lh={1.2}
+                      c={colors['blue-button']}
+                      mb="sm"
+                    >
                       Misi PPID
-                    </Text>
-                    <Text
-                      fz={{ base: 'md', md: 'lg' }}
-                      lh={1.7}
-                      dangerouslySetInnerHTML={{ __html: item.misi }}
-                      style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                    />
+                    </Title>
+
+                    <Box px={{ base: 'md', md: 100 }}>
+                      <Text
+                        ta="justify"
+                        fz={{ base: 15, md: 18 }}
+                        lh={1.7}
+                        dangerouslySetInnerHTML={{ __html: item.misi }}
+                        style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                      />
+                    </Box>
                   </Box>
+
                 </Stack>
               </Paper>
             )}

src/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress.tsx

@@ -55,8 +55,8 @@ function APBDesProgress({ apbdesData }: APBDesProgressProps) {
 
     return (
       <Box key={label}>
-        <Text fw={600} fz="sm">{label}</Text>
-        <Text fw={700} mb="xs">
+        <Text fw={600} fz={{base: "sm", md: "md"}}>{label}</Text>
+        <Text fw={700} fz={{base: "sm", md: "md"}} mb="xs">
           {formatRupiah(dataset.realisasi)} | {formatRupiah(dataset.anggaran)}
         </Text>
         <Progress

src/app/darmasaba/(tambahan)/penghargaan/page.tsx

@@ -39,22 +39,20 @@ function Slider() {
   const state = useProxy(penghargaanState);
   const router = useTransitionRouter();
 
-  // Refs for smooth animation
   const containerRef = useRef<HTMLDivElement>(null);
-  const scrollPositionRef = useRef(0);
-  const animationFrameRef = useRef<number>(0);
+  const scrollPosRef = useRef(0);
+  const animFrameRef = useRef<number>(0);
   const isHoveredRef = useRef(false);
-  
-  // Refs for drag functionality
   const isDraggingRef = useRef(false);
   const startXRef = useRef(0);
   const scrollLeftRef = useRef(0);
   const velocityRef = useRef(0);
-  const lastScrollTimeRef = useRef(0);
+  const lastScrollRef = useRef(0);
 
-  // Speed configuration
-  const normalSpeed = 1.0; // pixels per frame
-  const hoverSpeed = 0.5; // slower speed on hover
+  const SPEED_NORMAL = 1.0;
+  const SPEED_HOVER = 0.5;
+  const VELOCITY_DECAY = 0.95;
+  const SCROLL_THRESHOLD = 100;
 
   useEffect(() => {
     state.findMany.load();
@@ -63,120 +61,114 @@ function Slider() {
   const data = state.findMany.data || [];
   const loading = state.findMany.loading;
 
-  // Duplicate slides for seamless infinite loop
-  const slidesData = [...data, ...data, ...data];
+  // Triple data untuk infinite loop (desktop only)
+  const slidesData = mobile ? data : [...data, ...data, ...data];
 
+  // Auto-scroll animation untuk desktop
   useEffect(() => {
-    if (loading || !containerRef.current || slidesData.length === 0) return;
+    if (loading || !containerRef.current || data.length === 0 || mobile) return;
 
     const container = containerRef.current;
     const slideWidth = container.scrollWidth / slidesData.length;
-    const originalDataLength = data.length;
+    const originalLength = data.length;
 
-    // Start from the middle set of slides
-    scrollPositionRef.current = slideWidth * originalDataLength;
-    container.scrollLeft = scrollPositionRef.current;
+    // Start dari middle set
+    scrollPosRef.current = slideWidth * originalLength;
+    container.scrollLeft = scrollPosRef.current;
 
     const animate = () => {
       if (!containerRef.current) return;
 
       const container = containerRef.current;
       const slideWidth = container.scrollWidth / slidesData.length;
+      const timeSinceScroll = Date.now() - lastScrollRef.current;
+      const isUserScrolling = timeSinceScroll < SCROLL_THRESHOLD;
 
-      // Check if user recently scrolled manually
-      const timeSinceLastScroll = Date.now() - lastScrollTimeRef.current;
-      const isUserScrolling = timeSinceLastScroll < 100;
-
-      // Only auto-scroll if user is not actively scrolling or dragging
       if (!isDraggingRef.current && !isUserScrolling) {
-        const currentSpeed = isHoveredRef.current ? hoverSpeed : normalSpeed;
-        scrollPositionRef.current += currentSpeed;
+        const speed = isHoveredRef.current ? SPEED_HOVER : SPEED_NORMAL;
+        scrollPosRef.current += speed;
 
-        // Reset position for infinite loop
-        if (scrollPositionRef.current >= slideWidth * (originalDataLength * 2)) {
-          scrollPositionRef.current -= slideWidth * originalDataLength;
+        // Reset untuk infinite loop
+        if (scrollPosRef.current >= slideWidth * (originalLength * 2)) {
+          scrollPosRef.current -= slideWidth * originalLength;
+        }
+        if (scrollPosRef.current <= 0) {
+          scrollPosRef.current += slideWidth * originalLength;
         }
 
-        if (scrollPositionRef.current <= 0) {
-          scrollPositionRef.current += slideWidth * originalDataLength;
-        }
-
-        container.scrollLeft = scrollPositionRef.current;
+        container.scrollLeft = scrollPosRef.current;
       } else {
-        // Sync scroll position when user is scrolling
-        scrollPositionRef.current = container.scrollLeft;
-        
-        // Apply momentum/velocity for smooth drag release
+        scrollPosRef.current = container.scrollLeft;
+
+        // Momentum untuk drag release
         if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) {
-          scrollPositionRef.current += velocityRef.current;
-          velocityRef.current *= 0.95; // Decay velocity
-          container.scrollLeft = scrollPositionRef.current;
+          scrollPosRef.current += velocityRef.current;
+          velocityRef.current *= VELOCITY_DECAY;
+          container.scrollLeft = scrollPosRef.current;
         }
       }
 
-      animationFrameRef.current = requestAnimationFrame(animate);
+      animFrameRef.current = requestAnimationFrame(animate);
     };
 
-    animationFrameRef.current = requestAnimationFrame(animate);
+    animFrameRef.current = requestAnimationFrame(animate);
 
     return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
+      if (animFrameRef.current) {
+        cancelAnimationFrame(animFrameRef.current);
       }
     };
-  }, [loading, slidesData.length, data.length, mobile]);
+  }, [loading, data.length, mobile]);
 
   const handleMouseEnter = () => {
-    isHoveredRef.current = true;
+    if (!mobile) isHoveredRef.current = true;
   };
 
   const handleMouseLeave = () => {
-    isHoveredRef.current = false;
-    isDraggingRef.current = false;
+    if (!mobile) {
+      isHoveredRef.current = false;
+      isDraggingRef.current = false;
+    }
   };
 
-  // Mouse drag handlers
   const handleMouseDown = (e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    
+    if (!containerRef.current || mobile) return;
+
     isDraggingRef.current = true;
     startXRef.current = e.pageX - containerRef.current.offsetLeft;
     scrollLeftRef.current = containerRef.current.scrollLeft;
     velocityRef.current = 0;
-    
     containerRef.current.style.cursor = 'grabbing';
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-    
+    if (!isDraggingRef.current || !containerRef.current || mobile) return;
+
     e.preventDefault();
     const x = e.pageX - containerRef.current.offsetLeft;
     const walk = (x - startXRef.current) * 2;
     const newScrollLeft = scrollLeftRef.current - walk;
-    
+
     velocityRef.current = containerRef.current.scrollLeft - newScrollLeft;
-    
     containerRef.current.scrollLeft = newScrollLeft;
-    scrollPositionRef.current = newScrollLeft;
-    lastScrollTimeRef.current = Date.now();
+    scrollPosRef.current = newScrollLeft;
+    lastScrollRef.current = Date.now();
   };
 
   const handleMouseUp = () => {
-    if (!containerRef.current) return;
-    
+    if (!containerRef.current || mobile) return;
+
     isDraggingRef.current = false;
     containerRef.current.style.cursor = 'grab';
   };
 
-  // Wheel scroll handler
   const handleWheel = (e: React.WheelEvent) => {
-    if (!containerRef.current) return;
-    
+    if (!containerRef.current || mobile) return;
+
     e.preventDefault();
     containerRef.current.scrollLeft += e.deltaY;
-    scrollPositionRef.current = containerRef.current.scrollLeft;
-    lastScrollTimeRef.current = Date.now();
+    scrollPosRef.current = containerRef.current.scrollLeft;
+    lastScrollRef.current = Date.now();
   };
 
   if (loading) {
@@ -211,37 +203,45 @@ function Slider() {
       onWheel={handleWheel}
       py="xl"
       style={{
-        overflow: "hidden",
-        cursor: "grab",
+        overflowX: mobile ? "auto" : "hidden",
+        overflowY: "hidden",
+        cursor: mobile ? "default" : "grab",
         userSelect: "none",
         position: "relative",
+        WebkitOverflowScrolling: "touch",
+        scrollbarWidth: "none",
+        msOverflowStyle: "none",
       }}
     >
-      {/* Blur edges effect */}
-      <Box
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "120px",
-          height: "100%",
-          background: "linear-gradient(to right, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
-          zIndex: 10,
-          pointerEvents: "none",
-        }}
-      />
-      <Box
-        style={{
-          position: "absolute",
-          top: 0,
-          right: 0,
-          width: "120px",
-          height: "100%",
-          background: "linear-gradient(to left, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
-          zIndex: 10,
-          pointerEvents: "none",
-        }}
-      />
+      {/* Blur edges - hanya untuk desktop */}
+      {!mobile && (
+        <>
+          <Box
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "120px",
+              height: "100%",
+              background: "linear-gradient(to right, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
+              zIndex: 10,
+              pointerEvents: "none",
+            }}
+          />
+          <Box
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              width: "120px",
+              height: "100%",
+              background: "linear-gradient(to left, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
+              zIndex: 10,
+              pointerEvents: "none",
+            }}
+          />
+        </>
+      )}
 
       <Box
         style={{
@@ -255,8 +255,8 @@ function Slider() {
           <Box
             key={`${item.id}-${index}`}
             style={{
-              flex: `0 0 ${mobile ? "90%" : "calc(33.333% - 1rem)"}`,
-              minWidth: mobile ? "90%" : "calc(33.333% - 1rem)",
+              flex: `0 0 ${mobile ? "85%" : "calc(33.333% - 1rem)"}`,
+              minWidth: mobile ? "85%" : "calc(33.333% - 1rem)",
             }}
           >
             <Paper
@@ -272,12 +272,16 @@ function Slider() {
                 overflow: "hidden",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.transform = "translateY(-8px) scale(1.02)";
-                e.currentTarget.style.boxShadow = "0 12px 28px rgba(0,0,0,0.25)";
+                if (!mobile) {
+                  e.currentTarget.style.transform = "translateY(-8px) scale(1.02)";
+                  e.currentTarget.style.boxShadow = "0 12px 28px rgba(0,0,0,0.25)";
+                }
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0) scale(1)";
-                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+                if (!mobile) {
+                  e.currentTarget.style.transform = "translateY(0) scale(1)";
+                  e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+                }
               }}
             >
               <Box

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

@@ -13,7 +13,7 @@ function Page() {
   const state = useProxy(prestasiState.prestasiDesa);
   const router = useRouter();
   const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const { data, page, totalPages, loading, load } = state.findMany;
 

src/app/darmasaba/_com/ModernNewsNotification.tsx

@@ -168,6 +168,7 @@ export default function ModernNewsNotification({
               position: "fixed",
               bottom: "24px",
               right: "24px",
+              zIndex: 1
             }}
           >
             <ActionIcon
@@ -220,8 +221,9 @@ export default function ModernNewsNotification({
               ...styles,
               position: "fixed",
               bottom: "100px",
-              right: "24px",
-              width: "380px",
+              left: "24px",
+              width: "90vw",
+              maxWidth: 380,
               maxHeight: "500px",
               boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
               borderRadius: "16px",
@@ -290,7 +292,7 @@ export default function ModernNewsNotification({
                           color={item.type === "berita" ? "blue" : "orange"}
                           variant="light"
                         >
-                          {item.type === "berita" ? "📰 Berita" : "📢 Pengumuman"}
+                          {item.type === "berita" ? "Berita" : "Pengumuman"}
                         </Badge>
                         <IconChevronRight size={16} color="#adb5bd" />
                       </Group>
@@ -321,8 +323,9 @@ export default function ModernNewsNotification({
               ...styles,
               position: "fixed",
               bottom: "100px",
-              right: "24px",
-              width: "380px",
+              left: "24px",
+              width: "90vw",
+              maxWidth: 380,
               boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
               borderRadius: "12px",
               overflow: "hidden",
@@ -350,7 +353,6 @@ export default function ModernNewsNotification({
                   size="md"
                   color={currentNews?.type === "berita" ? "blue" : "orange"}
                   variant="light"
-                  leftSection={currentNews?.type === "berita" ? "📰" : "📢"}
                 >
                   {currentNews?.type === "berita"
                     ? "Berita Terbaru"

src/app/darmasaba/_com/NewsReaderalanding.tsx

@@ -100,6 +100,7 @@ const NewsReaderLanding = () => {
         borderBottomRightRadius: '20px',
         borderTopRightRadius: '20px',
         transition: 'all 0.3s ease',
+        zIndex: 1
       }}
     >
       {isPointerMode ? <IconMusicOff /> : <IconMusic />}

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

@@ -5,7 +5,20 @@ import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
 import APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress'
 import { transformAPBDesData } from '@/app/darmasaba/(tambahan)/apbdes/lib/types'
 import colors from '@/con/colors'
-import { ActionIcon, BackgroundImage, Box, Button, Center, Group, Loader, Select, SimpleGrid, Stack, Text } from '@mantine/core'
+import {
+  ActionIcon,
+  BackgroundImage,
+  Box,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Select,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core'
 import { IconDownload } from '@tabler/icons-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
@@ -38,17 +51,15 @@ function Apbdes() {
   const dataAPBDes = state.findMany.data || []
 
   const years = Array.from(new Set(dataAPBDes.map((item: any) => item.tahun)))
-    .sort((a, b) => b - a) // urutkan descending
+    .sort((a, b) => b - a)
     .map(year => ({ value: year.toString(), label: `Tahun ${year}` }))
 
-  // Pilih tahun pertama sebagai default jika belum ada yang dipilih
   useEffect(() => {
     if (years.length > 0 && !selectedYear) {
       setSelectedYear(years[0].value)
     }
   }, [years, selectedYear])
 
-  // Transform and filter data based on selected year
   const currentApbdes = dataAPBDes.length > 0
     ? transformAPBDesData(dataAPBDes.find(item => item?.tahun?.toString() === selectedYear) || dataAPBDes[0])
     : null
@@ -57,17 +68,31 @@ function Apbdes() {
 
   return (
     <Stack p="sm" gap="xl" bg={colors.Bg}>
-      <Box mt={"xl"}>
+      {/* 📌 HEADING */}
+      <Box mt="xl">
         <Stack gap="sm">
-          <Text c={colors["blue-button"]} ta={"center"} fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
+          <Title
+            order={1}
+            ta="center"
+            c={colors['blue-button']}
+            fz={{ base: '2rem', md: '3.6rem' }}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
             {textHeading.title}
-          </Text>
-          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
+          </Title>
+
+          <Text
+            ta="center"
+            fz={{ base: '1rem', md: '1.25rem' }}
+            lh={{ base: 1.5, md: 1.55 }}
+            c="black"
+          >
             {textHeading.des}
           </Text>
         </Stack>
       </Box>
 
+      {/* Button Lihat Semua */}
       <Group justify="center">
         <Button
           component={Link}
@@ -81,32 +106,39 @@ function Apbdes() {
         </Button>
       </Group>
 
-      {/* 🔥 COMBOBOX UNTUK PILIH TAHUN */}
+      {/* COMBOBOX */}
       <Box px={{ base: 'md', md: 100 }}>
         <Select
-          label="Pilih Tahun APBDes"
+          label={<Text fw={600} fz="sm">Pilih Tahun APBDes</Text>}
           placeholder="Pilih tahun"
           value={selectedYear}
           onChange={setSelectedYear}
           data={years}
-          w={{ base: '100%', sm: 200 }}
+          w={{ base: '100%', sm: 220 }}
           searchable
           clearable
           nothingFoundMessage="Tidak ada tahun tersedia"
         />
       </Box>
 
+      {/* Progress */}
       {currentApbdes ? (
-        <>
-          <APBDesProgress apbdesData={currentApbdes} />
-        </>
+        <APBDesProgress apbdesData={currentApbdes} />
       ) : (
         <Box px={{ base: 'md', md: 100 }} py="md">
-          <Text c="dimmed">Tidak ada data APBDes untuk tahun yang dipilih.</Text>
+          <Text fz="sm" c="dimmed" ta="center" lh={1.5}>
+            Tidak ada data APBDes untuk tahun yang dipilih.
+          </Text>
         </Box>
       )}
 
-      <SimpleGrid mx={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 3 }} spacing="lg" pb={"xl"}>
+      {/* GRID */}
+      <SimpleGrid
+        mx={{ base: 'md', md: 100 }}
+        cols={{ base: 1, sm: 3 }}
+        spacing="lg"
+        pb="xl"
+      >
         {loading ? (
           <Center mih={200}>
             <Loader size="lg" color="blue" />
@@ -114,10 +146,10 @@ function Apbdes() {
         ) : data.length === 0 ? (
           <Center mih={200}>
             <Stack align="center" gap="xs">
-              <Text fz="lg" c="dimmed">
+              <Text fz="lg" c="dimmed" lh={1.4}>
                 Belum ada data APBDes yang tersedia
               </Text>
-              <Text fz="sm" c="dimmed">
+              <Text fz="sm" c="dimmed" lh={1.4}>
                 Data akan ditampilkan di sini setelah diunggah
               </Text>
             </Stack>
@@ -133,25 +165,30 @@ function Apbdes() {
               style={{ overflow: 'hidden' }}
             >
               <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
-              <Stack gap={"xs"} justify="space-between" h="100%" p="xl" pos="relative">
+
+              <Stack gap="xs" justify="space-between" h="100%" p="xl" pos="relative">
                 <Text
                   c="white"
                   fw={600}
-                  fz="lg"
+                  fz={{ base: 'lg', md: 'xl' }}
                   ta="center"
+                  lh={1.35}
                   lineClamp={2}
                 >
                   {v.name}
                 </Text>
+
                 <Text
-                  fw="bold"
+                  fw={700}
                   c="white"
-                  fz="3rem"
+                  fz={{ base: '2.4rem', md: '3.2rem' }}
                   ta="center"
+                  lh={1}
                   style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
                 >
                   {v.jumlah}
                 </Text>
+
                 <Center>
                   <ActionIcon
                     component={Link}
@@ -163,29 +200,12 @@ function Apbdes() {
                   >
                     <IconDownload size={20} color="white" />
                   </ActionIcon>
-
                 </Center>
-                {/* <Group justify="center">
-                  <ActionIcon
-                    component={Link}
-                    href={v.file?.link || ''}
-                    radius="xl"
-                    size="lg"
-                    variant="gradient"
-                    gradient={{ from: '#1C6EA4', to: '#1C6EA4' }}
-                  >
-                    <Group align="center" gap="xs" px="md" py={6}>
-                      <IconDownload size={25} color="white" />
-                    </Group>
-                  </ActionIcon>
-                </Group> */}
               </Stack>
             </BackgroundImage>
           ))
         )}
       </SimpleGrid>
-
-
     </Stack>
   )
 }

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

@@ -2,7 +2,16 @@
 'use client'
 import korupsiState from "@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi";
 import colors from "@/con/colors";
-import { Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
+import {
+  Button,
+  Center,
+  Container,
+  Flex,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text
+} from "@mantine/core";
 import { IconClipboardText } from "@tabler/icons-react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -11,7 +20,6 @@ import { useProxy } from "valtio/utils";
 function DesaAntiKorupsi() {
   const state = useProxy(korupsiState);
   const [loading, setLoading] = useState(false);
- 
 
   useEffect(() => {
     const loadData = async () => {
@@ -19,30 +27,64 @@ function DesaAntiKorupsi() {
         setLoading(true);
         await state.desaAntikorupsi.findMany.load();
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error("Error loading data:", error);
       } finally {
         setLoading(false);
       }
-    }
+    };
     loadData();
-  }, [])
+  }, []);
 
   const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
+
   return (
-    <Stack gap={"0"} bg={colors.Bg} p={"sm"} my={"xs"}>
-      <Container w={{ base: "100%", md: "80%" }} p={"md"} >
+    <Stack gap="0" bg={colors.Bg} p="sm" my="xs">
+      {/* ===================== HEADER ===================== */}
+      <Container w={{ base: "100%", md: "80%" }} p="md">
         <Center>
-          <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
+          <Text
+            fw={700}
+            ta="center"
+            c={colors["blue-button"]}
+            fz={{ base: "1.8rem", md: "3.2rem" }}
+            lh={{ base: "2.2rem", md: "3.4rem" }}
+          >
+            Desa Anti Korupsi
+          </Text>
         </Center>
-        <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
-        <Center py={20}>
-          <Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desa-anti-korupsi/detail"}>Selengkapnya</Button>
+
+        <Text
+          ta="center"
+          c="black"
+          fz={{ base: "1rem", md: "1.25rem" }}
+          lh={{ base: "1.5rem", md: "1.8rem" }}
+          mt="sm"
+        >
+          Desa antikorupsi mendorong pemerintahan jujur dan transparan.
+          Keuangan desa dikelola secara terbuka dengan melibatkan warga
+          dalam pengawasan anggaran, sehingga digunakan tepat sasaran dan
+          sesuai kebutuhan masyarakat.
+        </Text>
+
+        <Center py={25}>
+          <Button
+            radius="lg"
+            fz={{ base: "md", md: "lg" }}
+            bg={colors["blue-button"]}
+            component={Link}
+            href="/darmasaba/desa-anti-korupsi/detail"
+            style={{ paddingInline: "2rem" }}
+          >
+            Selengkapnya
+          </Button>
         </Center>
       </Container>
+
+      {/* ===================== LIST ===================== */}
       <Container w="100%" maw="80rem" px="md">
         {loading ? (
           <Center mih={200}>
-            <Text fz="lg">Memuat Data...</Text>
+            <Text fz={{ base: "md", md: "lg" }}>Memuat Data...</Text>
           </Center>
         ) : (
           <SimpleGrid
@@ -64,26 +106,35 @@ function DesaAntiKorupsi() {
                   <IconClipboardText
                     color={colors["blue-button"]}
                     size={40}
-                    style={{ flexShrink: 0 }} // biar icon nggak ketekan
+                    style={{ flexShrink: 0 }}
                   />
-                  <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+
+                  <Stack gap={6} style={{ flex: 1, minWidth: 0 }}>
+                    {/* Title */}
                     <Text
-                      fz={{ base: "sm", sm: "md", md: "lg", lg: "xl" }} // lebih besar di desktop
+                      fw={700}
                       c={colors["blue-button"]}
-                      fw={600}
-                      style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                      fz={{ base: "1rem", sm: "1.1rem", md: "1.25rem" }}
+                      lh={{ base: "1.3rem", md: "1.5rem" }}
+                      style={{
+                        wordBreak: "break-word",
+                        whiteSpace: "normal"
+                      }}
                     >
                       {v.kategori?.name || "Kategori"}
                     </Text>
+
+                    {/* Description */}
                     <Text
                       dangerouslySetInnerHTML={{
-                        __html: v.name || "Name",
+                        __html: v.name || "Name"
                       }}
-                      fz={{ base: "sm", sm: "md", md: "lg", lg: "xl" }} // sama, scaling responsif
                       c="dark"
+                      fz={{ base: "0.9rem", sm: "1rem", md: "1.15rem" }}
+                      lh={{ base: "1.3rem", md: "1.6rem" }}
                       style={{
                         wordBreak: "break-word",
-                        whiteSpace: "normal",
+                        whiteSpace: "normal"
                       }}
                     />
                   </Stack>
@@ -91,7 +142,6 @@ function DesaAntiKorupsi() {
               </Paper>
             ))}
           </SimpleGrid>
-
         )}
       </Container>
     </Stack>

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

@@ -4,7 +4,7 @@ import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/ind
 import colors from "@/con/colors";
 import { BarChart, PieChart } from '@mantine/charts';
 import { Box, Button, Center, Container, Flex, Modal, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
 
@@ -15,8 +15,6 @@ interface ChartDataItem {
   label?: string;
 }
 
-
-
 function Kepuasan() {
   const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
@@ -25,6 +23,7 @@ function Kepuasan() {
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
   const [barChartData, setBarChartData] = useState<Array<{ month: string; Responden: number }>>([]);
   const [opened, { open, close }] = useDisclosure(false)
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   const resetForm = () => {
     state.create.form = {
@@ -41,7 +40,7 @@ function Kepuasan() {
     indeksKepuasanState.jenisKelaminResponden.findMany.load()
     indeksKepuasanState.pilihanRatingResponden.findMany.load()
     indeksKepuasanState.kelompokUmurResponden.findMany.load()
-  },[])
+  }, [])
 
   const handleSubmit = async () => {
     try {
@@ -82,13 +81,13 @@ function Kepuasan() {
 
       // Update gender chart data
       setDonutDataJenisKelamin([
-        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
+        { name: 'Laki-laki', value: totalLaki, color: '#52ABE3FF' },
         { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
       ]);
 
       // Update rating chart data
       setDonutDataRating([
-        { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
+        { name: 'Sangat Baik', value: totalSangatBaik, color: '#52ABE3FF' },
         { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
         { name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' },
         { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
@@ -96,7 +95,7 @@ function Kepuasan() {
 
       // Update age group chart data
       setDonutDataKelompokUmur([
-        { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
+        { name: 'Muda', value: totalMuda, color: '#52ABE3FF' },
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
@@ -153,86 +152,141 @@ function Kepuasan() {
 
   if (data.length === 0) {
     return (
-      <Stack p="sm" my={"xs"}>
-        <Container w={{ base: "100%", md: "80%" }} p={"sm"}>
+      <Stack p="sm" my="xs">
+        <Container w={{ base: "100%", md: "80%" }} p="sm">
           <Center>
-            <Text
+            <Title
+              order={2}
               ta="center"
               fz={{ base: '2rem', md: '2.8rem' }}
+              lh={{ base: 1.05, md: 1.04 }}
               c={colors['blue-button']}
               fw={800}
               style={{ letterSpacing: '-0.5px' }}
-            >Indeks Kepuasan Masyarakat</Text>
+            >
+              Indeks Kepuasan Masyarakat
+            </Title>
           </Center>
-          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
-          <Center mt={10}>
+
+          <Text
+            ta="center"
+            fz={{ base: "0.95rem", md: "1.25rem" }}
+            lh={{ base: 1.45, md: 1.5 }}
+            c="black"
+            mt="sm"
+          >
+            Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
+          </Text>
+
+          <Center mt={12}>
             <Button
-              radius={"lg"}
+              radius="lg"
               onClick={open}
               variant="gradient"
               gradient={{ from: "#26667F", to: "#124170" }}
-            >Ajukan Responden</Button>
+              style={{ paddingLeft: 20, paddingRight: 20, fontWeight: 600 }}
+            >
+              <Text fz={{ base: "0.95rem", md: "1rem" }} ta="center" c="white">Ajukan Responden</Text>
+            </Button>
           </Center>
         </Container>
-        <Box px={"sm"}>
-          <Paper p={"lg"} bg={colors.Bg}>
-            <Paper p={"lg"}>
-              <Stack gap={"xs"}>
-                <Flex justify={"space-between"} align={"center"}>
-                  <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
-                  <Box>
-                    <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
-                    <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+
+        <Box px="sm">
+          <Paper p="lg" bg={colors.Bg}>
+            <Paper p="lg">
+              <Stack gap="xs">
+                <Flex
+                  direction={{ base: "column", sm: "row" }}
+                  justify="space-between"
+                  align={{ base: "flex-start", sm: "center" }}
+                  gap={{ base: "xs", sm: "md" }}
+                >
+                  <Text
+                    fw={700}
+                    ta={{ base: "center", sm: "left" }}
+                    fz={{ base: "0.95rem", sm: "1rem" }}
+                    lh={1.3}
+                  >
+                    Pelayanan Terhadap Publik Desa Darmasaba
+                  </Text>
+
+                  <Box
+                    mt={{ base: "sm", sm: 0 }}
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-end',
+                      textAlign: 'right',
+                    }}
+                  >
+                    <Text fz={{ base: "0.8rem", sm: "0.95rem" }} fw={700} c={colors["blue-button"]} lh={1.2}>
+                      Total Responden
+                    </Text>
+                    <Text
+                      ta="end"
+                      fz={{ base: "1.6rem", sm: "2rem" }}
+                      fw={800}
+                      c={colors["blue-button"]}
+                      lh={1.02}
+                    >
                       {state.findMany.total.toLocaleString('id-ID')}
                     </Text>
                   </Box>
                 </Flex>
-                <BarChart
-                  h={window.innerWidth < 480 ? 200 : 300}
-                  data={barChartData}
-                  dataKey="month"
-                  series={[{ name: 'Responden', color: colors['blue-button'] }]}
-                  tickLine="y"
-                  xAxisLabel="Bulan"
-                  yAxisLabel="Jumlah Responden"
-                  withTooltip
-                  tooltipAnimationDuration={200}
-                />
+
+                <Box style={{ overflowX: 'auto', width: '100%' }}>
+                  <BarChart
+                    h={300}
+                    data={barChartData}
+                    dataKey="month"
+                    series={[{ name: 'Responden', color: colors['blue-button'] }]}
+                    tickLine="y"
+                    xAxisLabel="Bulan"
+                    yAxisLabel="Jumlah Responden"
+                    withTooltip
+                    tooltipAnimationDuration={200}
+                    xAxisProps={{
+                      angle: -45,
+                      textAnchor: 'end',
+                      fontSize: 12,
+                    }}
+                    style={{ minWidth: 'fit-content' }}
+                  />
+                </Box>
               </Stack>
             </Paper>
-            <Box py={"xl"}>
-              <SimpleGrid
-                cols={{ base: 1, sm: 2, lg: 3 }}
-                spacing="md"
-                verticalSpacing="md"
-              >
+
+            <Box py="xl">
+              <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" verticalSpacing="md">
                 {/* Chart Jenis Kelamin */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Jenis Kelamin</Title>
+                    <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Jenis Kelamin</Title>
                     {donutDataJenisKelamin.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
-                        Belum ada data untuk ditampilkan dalam grafik
-                      </Text>
+                      <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                     ) : (
                       <Paper p="md" radius="md" withBorder>
                         <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                           <Box style={{ position: 'relative', width: '100%' }}>
                             <Center>
                               <PieChart
-                                withLabels
                                 withTooltip
+                                tooltipAnimationDuration={200}
+                                withLabels
+                                labelsPosition="inside"
                                 labelsType="percent"
-                                size={250} // Fixed size in pixels
+                                withLabelsLine
+                                size={isMobile ? 180 : 250}
                                 data={donutDataJenisKelamin}
                               />
                             </Center>
                           </Box>
+
                           <Stack gap="sm" mt="md">
                             {donutDataJenisKelamin.map((entry) => (
                               <Flex key={entry.name} gap="md" align="center">
                                 <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                                <Text size="sm">{entry.name}: {entry.value}</Text>
+                                <Text fz="sm" lh={1.25}>{entry.name}: {entry.value}</Text>
                               </Flex>
                             ))}
                           </Stack>
@@ -245,11 +299,9 @@ function Kepuasan() {
                 {/* Chart Rating */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Ulasan</Title>
+                    <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Ulasan</Title>
                     {donutDataRating.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
-                        Belum ada data untuk ditampilkan dalam grafik
-                      </Text>
+                      <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                     ) : (
                       <Paper p="md" radius="md" withBorder>
                         <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -259,20 +311,21 @@ function Kepuasan() {
                                 withTooltip
                                 tooltipAnimationDuration={200}
                                 withLabels
-                                labelsPosition="outside"
+                                labelsPosition="inside"
                                 labelsType="percent"
                                 withLabelsLine
-                                size={250}
+                                size={isMobile ? 180 : 250}
                                 data={donutDataRating}
                               />
                             </Center>
                           </Box>
+
                           <Box mt="md" style={{ width: '100%' }}>
                             <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                               {donutDataRating.map((entry) => (
                                 <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                   <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  <Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                     {entry.name}: {entry.value}
                                   </Text>
                                 </Flex>
@@ -288,11 +341,9 @@ function Kepuasan() {
                 {/* Chart Kelompok Umur */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Umur</Title>
+                    <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Umur</Title>
                     {donutDataKelompokUmur.every(item => item.value === 0) ? (
-                      <Text c="dimmed" ta="center" my="md">
-                        Belum ada data untuk ditampilkan dalam grafik
-                      </Text>
+                      <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                     ) : (
                       <Paper p="md" radius="md" withBorder>
                         <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -302,20 +353,21 @@ function Kepuasan() {
                                 withTooltip
                                 tooltipAnimationDuration={200}
                                 withLabels
-                                labelsPosition="outside"
+                                labelsPosition="inside"
                                 labelsType="percent"
                                 withLabelsLine
-                                size={250}
+                                size={isMobile ? 180 : 250}
                                 data={donutDataKelompokUmur}
                               />
                             </Center>
                           </Box>
+
                           <Box mt="md" style={{ width: '100%' }}>
                             <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                               {donutDataKelompokUmur.map((entry) => (
                                 <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                   <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  <Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                     {entry.name}: {entry.value}
                                   </Text>
                                 </Flex>
@@ -327,17 +379,19 @@ function Kepuasan() {
                     )}
                   </Stack>
                 </Paper>
+
               </SimpleGrid>
             </Box>
           </Paper>
         </Box>
+
         {/* Modal */}
         <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
-          <Paper bg={colors['white-1']} p={'md'}>
+          <Paper bg={colors['white-1']} p="md">
             <Stack>
               <TextInput
                 label="Nama"
-                type='text'
+                type="text"
                 placeholder="Masukkan nama"
                 value={state.create.form.name}
                 onChange={(val) => {
@@ -411,8 +465,9 @@ function Kepuasan() {
                 mt={10}
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
+                style={{ fontWeight: 700 }}
               >
-                Submit
+                <Text fz="sm" ta="center" c="white">Submit</Text>
               </Button>
             </Stack>
           </Paper>
@@ -420,72 +475,108 @@ function Kepuasan() {
       </Stack>
     );
   }
+
   return (
-    <Stack p={"sm"} my={"xs"}>
+    <Stack p="sm" my="xs">
       <Container size="lg" px="sm">
         <Center>
-          <Text
+          <Title
+            order={2}
             ta="center"
             fz={{ base: '2rem', md: '2.8rem' }}
+            lh={{ base: 1.05, md: 1.04 }}
             c={colors['blue-button']}
             fw={800}
             style={{ letterSpacing: '-0.5px' }}
-          >Indeks Kepuasan Masyarakat</Text>
+          >
+            Indeks Kepuasan Masyarakat
+          </Title>
         </Center>
-        <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
-        <Center mt={10}>
-          <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
+
+        <Text fz={{ base: "1rem", md: "1.25rem" }} ta="center" c="black" lh={1.5} mt="sm">
+          Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!
+        </Text>
+
+        <Center mt={12}>
+          <Button radius="lg" bg={colors["blue-button"]} onClick={open} style={{ paddingLeft: 20, paddingRight: 20, fontWeight: 600 }}>
+            <Text fz={{ base: "0.95rem", md: "1rem" }} ta="center" c="white">Ajukan Responden</Text>
+          </Button>
         </Center>
       </Container>
-      <Box px={"md"}>
-        <Paper p={"lg"} bg={colors.Bg}>
-          <Paper p={"lg"}>
-            <Stack gap={"xs"}>
+
+      <Box px="md">
+        <Paper p="lg" bg={colors.Bg}>
+          <Paper p="lg">
+            <Stack gap="xs">
               <Flex
                 direction={{ base: "column", sm: "row" }}
                 justify="space-between"
                 align={{ base: "flex-start", sm: "center" }}
+                gap={{ base: "xs", sm: "md" }}
               >
-                <Text fw="bold" ta={{ base: "center", sm: "left" }}>
+                <Text
+                  fw={700}
+                  ta={{ base: "center", sm: "left" }}
+                  fz={{ base: "0.95rem", sm: "1rem" }}
+                  lh={1.3}
+                >
                   Pelayanan Terhadap Publik Desa Darmasaba
                 </Text>
-                <Box mt={{ base: "sm", sm: 0 }}>
-                  <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
-                  <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+
+                <Box
+                  mt={{ base: "sm", sm: 0 }}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-end',
+                    textAlign: 'right',
+                  }}
+                >
+                  <Text fz={{ base: "0.8rem", sm: "0.95rem" }} fw={700} c={colors["blue-button"]} lh={1.2}>
+                    Total Responden
+                  </Text>
+                  <Text
+                    ta="end"
+                    fz={{ base: "1.6rem", sm: "2rem" }}
+                    fw={800}
+                    c={colors["blue-button"]}
+                    lh={1.02}
+                  >
                     {state.findMany.total.toLocaleString('id-ID')}
                   </Text>
                 </Box>
               </Flex>
-              <BarChart
-                h={300}
-                data={barChartData}
-                dataKey="month"
-                series={[{ name: 'Responden', color: colors['blue-button'] }]}
-                tickLine="y"
-                xAxisLabel="Bulan"
-                yAxisLabel="Jumlah Responden"
-                withTooltip
-                tooltipAnimationDuration={200}
-              />
+
+              <Box style={{ overflowX: 'auto', width: '100%' }} pb={50}>
+                <BarChart
+                  h={300}
+                  data={barChartData}
+                  dataKey="month"
+                  series={[{ name: 'Responden', color: colors['blue-button'] }]}
+                  tickLine="y"
+                  xAxisLabel=""
+                  yAxisLabel="Jumlah Responden"
+                  withTooltip
+                  tooltipAnimationDuration={200}
+                  xAxisProps={{
+                    angle: -45,
+                    textAnchor: 'end',
+                    fontSize: 12,
+                  }}
+                  style={{ minWidth: 'fit-content' }}
+                />
+              </Box>
             </Stack>
           </Paper>
-          <Box py={"xl"}>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 1,
-                lg: 1,
-                xl: 3
-              }}
-            >
+
+          <Box py="xl">
+            <SimpleGrid cols={{ base: 1, md: 1, lg: 1, xl: 3 }}>
               {/* Chart Jenis Kelamin */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Jenis Kelamin</Title>
+                  <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Jenis Kelamin</Title>
                   {donutDataJenisKelamin.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
-                      Belum ada data untuk ditampilkan dalam grafik
-                    </Text>
+                    <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                   ) : (
                     <Paper p="md" radius="md" withBorder>
                       <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -494,17 +585,19 @@ function Kepuasan() {
                             <PieChart
                               withLabels
                               withTooltip
+                              labelsPosition="inside"
                               labelsType="percent"
                               size={200}
                               data={donutDataJenisKelamin}
                             />
                           </Center>
                         </Box>
+
                         <Stack gap="sm" mt="md">
                           {donutDataJenisKelamin.map((entry) => (
                             <Flex key={entry.name} gap="md" align="center">
                               <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                              <Text size="sm">{entry.name}: {entry.value}</Text>
+                              <Text fz="sm" lh={1.25}>{entry.name}: {entry.value}</Text>
                             </Flex>
                           ))}
                         </Stack>
@@ -517,11 +610,9 @@ function Kepuasan() {
               {/* Chart Rating */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Ulasan</Title>
+                  <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Ulasan</Title>
                   {donutDataRating.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
-                      Belum ada data untuk ditampilkan dalam grafik
-                    </Text>
+                    <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                   ) : (
                     <Paper p="md" radius="md" withBorder>
                       <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -531,7 +622,7 @@ function Kepuasan() {
                               withTooltip
                               tooltipAnimationDuration={200}
                               withLabels
-                              labelsPosition="outside"
+                              labelsPosition="inside"
                               labelsType="percent"
                               withLabelsLine
                               size={200}
@@ -539,12 +630,13 @@ function Kepuasan() {
                             />
                           </Center>
                         </Box>
+
                         <Box mt="md" style={{ width: '100%' }}>
                           <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                             {donutDataRating.map((entry) => (
                               <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                 <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                <Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                   {entry.name}: {entry.value}
                                 </Text>
                               </Flex>
@@ -560,11 +652,9 @@ function Kepuasan() {
               {/* Chart Kelompok Umur */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Umur</Title>
+                  <Title order={4} fz={{ base: "1rem", md: "1.1rem" }} lh={1.2}>Umur</Title>
                   {donutDataKelompokUmur.every(item => item.value === 0) ? (
-                    <Text c="dimmed" ta="center" my="md">
-                      Belum ada data untuk ditampilkan dalam grafik
-                    </Text>
+                    <Text c="dimmed" ta="center" my="md" fz="sm">Belum ada data untuk ditampilkan dalam grafik</Text>
                   ) : (
                     <Paper p="md" radius="md" withBorder>
                       <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -574,7 +664,7 @@ function Kepuasan() {
                               withTooltip
                               tooltipAnimationDuration={200}
                               withLabels
-                              labelsPosition="outside"
+                              labelsPosition="inside"
                               labelsType="percent"
                               withLabelsLine
                               size={190}
@@ -582,12 +672,13 @@ function Kepuasan() {
                             />
                           </Center>
                         </Box>
+
                         <Box mt="md" style={{ width: '100%' }}>
                           <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
                             {donutDataKelompokUmur.map((entry) => (
                               <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
                                 <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
-                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                <Text fz="xs" lh={1.2} lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                   {entry.name}: {entry.value}
                                 </Text>
                               </Flex>
@@ -599,18 +690,20 @@ function Kepuasan() {
                   )}
                 </Stack>
               </Paper>
+
             </SimpleGrid>
           </Box>
         </Paper>
       </Box>
+
       {/* Modal */}
       <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
-        <Paper bg={colors['white-1']} p={'md'}>
+        <Paper bg={colors['white-1']} p="md">
           <Stack>
             <TextInput
               label="Nama"
               type='text'
-              placeholder="masukkan nama"
+              placeholder="Masukkan nama"
               value={state.create.form.name}
               onChange={(val) => {
                 state.create.form.name = val.currentTarget.value;
@@ -619,7 +712,7 @@ function Kepuasan() {
             <TextInput
               label="Tanggal Pengisian"
               type="date"
-              placeholder="masukkan tanggal"
+              placeholder="Masukkan tanggal"
               value={state.create.form.tanggal}
               onChange={(val) => {
                 state.create.form.tanggal = val.currentTarget.value;
@@ -683,8 +776,9 @@ function Kepuasan() {
               mt={10}
               bg={colors['blue-button']}
               onClick={handleSubmit}
+              style={{ fontWeight: 700 }}
             >
-              Submit
+              <Text fz="sm" ta="center" c="white">Submit</Text>
             </Button>
           </Stack>
         </Paper>
@@ -693,4 +787,4 @@ function Kepuasan() {
   );
 }
 
-export default Kepuasan;
+export default Kepuasan;