QC User & Admin Responsive : Menu Landing Page - Desa

.gitignore

@@ -41,6 +41,9 @@ next-env.d.ts
 # uploads
 /uploads
 
+# download
+/download
+
 # cache
 /cache
 

next.config.ts

@@ -1,6 +1,11 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  experimental: {},
+  allowedDevOrigins: [
+    "http://192.168.1.82:3000", // buat akses dari HP/device lain
+    "http://localhost:3000",   // akses lokal
+  ],
   async headers() {
     return [
       {

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "private": true,
   "scripts": {
-    "dev": "bun --bun next dev",
+    "dev": "bun --bun next dev --hostname 0.0.0.0",
     "build": "bun --bun next build",
     "start": "bun --bun next start"
   },
@@ -39,19 +39,23 @@
     "@tiptap/pm": "^2.11.7",
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
+    "@types/adm-zip": "^0.5.7",
     "@types/bun": "^1.2.2",
     "@types/leaflet": "^1.9.20",
     "@types/lodash": "^4.17.16",
     "add": "^2.0.6",
+    "adm-zip": "^0.5.16",
     "animate.css": "^4.1.1",
     "bcryptjs": "^3.0.2",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
     "classnames": "^2.5.1",
+    "colors": "^1.4.0",
     "dayjs": "^1.11.13",
     "elysia": "^1.3.5",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
+    "extract-zip": "^2.0.1",
     "form-data": "^4.0.2",
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",

prisma/data/user/roles.json

@@ -1,29 +1,23 @@
 [
     {
-      "id": "1",
+      "id": "role-1",
       "name": "ADMIN DESA",
       "description": "Administrator Desa",
       "permissions": ["manage_users", "manage_content", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
+      "isActive": true
     },
     {
-      "id": "2",
+      "id": "role-2",
       "name": "ADMIN KESEHATAN",
       "description": "Administrator Bidang Kesehatan",
       "permissions": ["manage_health_data", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
+      "isActive": true
     },
     {
-      "id": "3",
+      "id": "role-3",
       "name": "ADMIN SEKOLAH",
       "description": "Administrator Sekolah",
       "permissions": ["manage_school_data", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
+      "isActive": true
     }
   ]

prisma/data/user/users.json

@@ -1,32 +1,23 @@
 [
-    {
-      "id": "1",
-      "nama": "Admin Desa",
-      "nomor": "089647037426",
-      "roleId": "1",
-      "isActive": true,
-      "lastLogin": "2025-08-31T10:00:00.000Z",
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "2",
-      "nama": "Admin Kesehatan",
-      "nomor": "082339004198",
-      "roleId": "2",
-      "isActive": true,
-      "lastLogin": null,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "3",
-      "nama": "Admin Sekolah",
-      "nomor": "085237157222",
-      "roleId": "3",
-      "isActive": true,
-      "lastLogin": null,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    }
-  ]
+  {
+    "id": "user-1",
+    "nama": "Admin Desa",
+    "nomor": "089647037426",
+    "roleId": "role-1",
+    "isActive": true
+  },
+  {
+    "id": "user-2",
+    "nama": "Admin Kesehatan",
+    "nomor": "082339004198",
+    "roleId": "role-2",
+    "isActive": true
+  },
+  {
+    "id": "user-3",
+    "nama": "Admin Sekolah",
+    "nomor": "085237157222",
+    "roleId": "role-3",
+    "isActive": true
+  }
+]

prisma/safeseedUnique.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// helpers/safeSeedUnique.ts
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+/**
+ * Helper generic buat seed dengan upsert aman
+ */
+export async function safeSeedUnique<T extends keyof PrismaClient>(
+  model: T,
+  where: Record<string, any>,
+  data: Record<string, any>
+) {
+  const m = prisma[model];
+
+  if (!m) throw new Error(`Model ${String(model)} tidak ditemukan di PrismaClient`);
+
+  try {
+    // @ts-expect-error upsert dynamic
+    await m.upsert({
+      where,
+      update: data,
+      create: { ...where, ...data },
+    });
+    console.log(`✅ Seeded ${String(model)} -> ${JSON.stringify(where)}`);
+  } catch (err) {
+    console.error(`❌ Gagal seed ${String(model)} -> ${JSON.stringify(where)}`, err);
+  }
+}

prisma/seed.ts

@@ -56,6 +56,8 @@ import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-prog
 import roles from "./data/user/roles.json";
 import users from "./data/user/users.json";
 import fileStorage from "./data/file-storage.json";
+import seedAssets from "./seed_assets";
+import { safeSeedUnique } from "./safeseedUnique";
 
 (async () => {
   // =========== USER & ROLE ===========
@@ -63,23 +65,14 @@ import fileStorage from "./data/file-storage.json";
   // =========== ROLES ===========
   console.log("🔄 Seeding roles...");
   for (const r of roles) {
-    await prisma.role.upsert({
-      where: { id: r.id },
-      update: {
-        name: r.name,
-        description: r.description,
-        permissions: r.permissions,
-        isActive: r.isActive,
-      },
-      create: {
-        id: r.id,
-        name: r.name,
-        description: r.description,
-        permissions: r.permissions,
-        isActive: r.isActive,
-      },
+    await safeSeedUnique("role", { id: r.id }, {
+      name: r.name,
+      description: r.description,
+      permissions: r.permissions,
+      isActive: r.isActive,
     });
   }
+
   console.log("✅ Roles seeded");
 
   // =========== USERS ===========
@@ -95,22 +88,12 @@ import fileStorage from "./data/file-storage.json";
       continue;
     }
 
-    await prisma.user.upsert({
-      where: { id: u.id },
-      update: {
-        username: u.nama,
-        nomor: u.nomor,
-        roleId: u.roleId,
+    await safeSeedUnique("user", { id: u.id }, {
+      username: u.nama,
+      nomor: u.nomor,
+      roleId: u.roleId,
         isActive: u.isActive,
-      },
-      create: {
-        id: u.id,
-        username: u.nama,
-        nomor: u.nomor,
-        roleId: u.roleId,
-        isActive: u.isActive,
-      },
-    });
+      });
   }
   console.log("✅ Users seeded");
 
@@ -364,6 +347,7 @@ import fileStorage from "./data/file-storage.json";
         jumlah: l.jumlah,
       },
       create: {
+        id: l.id,
         name: l.name,
         jumlah: l.jumlah,
       },
@@ -1169,6 +1153,10 @@ import fileStorage from "./data/file-storage.json";
   console.log(
     "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)"
   );
+
+  // seed assets
+  await seedAssets();
+
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

prisma/seed_assets.ts

@@ -0,0 +1,118 @@
+// prisma/seedAssets.ts
+import fs from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+import fetch from "node-fetch";
+import AdmZip from "adm-zip";
+import prisma from "@/lib/prisma";
+
+const UPLOADS_DIR =
+  process.env.WIBU_UPLOAD_DIR || path.join(process.cwd(), "uploads");
+
+// --- Helper: deteksi kategori file ---
+function detectCategory(filename: string): "image" | "document" | "other" {
+  const ext = path.extname(filename).toLowerCase();
+  if ([".jpg", ".jpeg", ".png", ".webp"].includes(ext)) return "image";
+  if ([".pdf", ".doc", ".docx"].includes(ext)) return "document";
+  return "other";
+}
+
+// --- Helper: recursive walk dir ---
+async function walkDir(dir: string, fileList: string[] = []): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (entry.name === "__MACOSX") continue; // skip folder sampah
+      await walkDir(fullPath, fileList);
+    } else {
+      if (entry.name.startsWith(".") || entry.name === ".DS_Store") continue; // skip file sampah
+      fileList.push(fullPath);
+    }
+  }
+
+  return fileList;
+}
+
+export default async function seedAssets() {
+  console.log("🚀 Seeding assets...");
+
+  // 1. Download zip
+  const url =
+    "https://cld-dkr-makuro-seafile.wibudev.com/f/ffd5a548a04f47939474/?dl=1";
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Gagal download assets: ${res.statusText}`);
+  const buffer = Buffer.from(await res.arrayBuffer());
+
+  // 2. Extract zip ke folder tmp
+  const extractDir = path.join(process.cwd(), "tmp_assets");
+  await fs.rm(extractDir, { recursive: true, force: true });
+  await fs.mkdir(extractDir, { recursive: true });
+
+  const zip = new AdmZip(buffer);
+  zip.extractAllTo(extractDir, true);
+
+  // 3. Cari semua file valid (recursive)
+  const files = await walkDir(extractDir);
+
+  // 4. Loop tiap file & simpan
+  for (const filePath of files) {
+    const entryName = path.basename(filePath);
+    const category = detectCategory(entryName);
+
+    let finalName = entryName;
+    let mimeType = "application/octet-stream";
+    let targetPath = "";
+
+    if (category === "image") {
+      const fileBaseName = path.parse(entryName).name;
+      finalName = `${fileBaseName}.webp`;
+      targetPath = path.join(UPLOADS_DIR, "images", finalName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await sharp(filePath).webp({ quality: 80 }).toFile(targetPath);
+      mimeType = "image/webp";
+    } else if (category === "document") {
+      targetPath = path.join(UPLOADS_DIR, "documents", entryName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await fs.copyFile(filePath, targetPath);
+      mimeType = "application/pdf";
+    } else {
+      targetPath = path.join(UPLOADS_DIR, "other", entryName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await fs.copyFile(filePath, targetPath);
+    }
+
+    // 5. Simpan ke DB
+    await prisma.fileStorage.create({
+      data: {
+        name: finalName,
+        realName: entryName,
+        path: targetPath,
+        mimeType,
+        link: `/uploads/${category}/${finalName}`,
+        category,
+      },
+    });
+
+    console.log(`📂 saved: ${category}/${finalName}`);
+  }
+
+  // 6. Cleanup
+  await fs.rm(extractDir, { recursive: true, force: true });
+
+  console.log("✅ Selesai seed assets!");
+}
+
+// --- Auto run kalau dipanggil langsung ---
+if (import.meta.main) {
+  seedAssets()
+    .catch((err) => {
+      console.error("❌ Error seeding assets:", err);
+      process.exit(1);
+    })
+    .finally(async () => {
+      await prisma.$disconnect();
+    });
+}

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import {
@@ -10,7 +11,7 @@ import {
   Stack,
   TextInput,
   Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -24,7 +25,7 @@ function EditKategoriBerita() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
+    name: '',
   });
 
   useEffect(() => {
@@ -48,8 +49,16 @@ function EditKategoriBerita() {
     loadKategori();
   }, [params?.id]);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // update global state hanya saat submit
       editState.update.form = {
         ...editState.update.form,
         name: formData.name,
@@ -94,10 +103,11 @@ function EditKategoriBerita() {
       >
         <Stack gap="md">
           <TextInput
+            name="name"
             label="Nama Kategori Berita"
             placeholder="Masukkan nama kategori berita"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={handleChange}
             required
           />
 

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

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriBerita() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Berita</Text>}
+            label="Nama Kategori Berita"
             placeholder="Masukkan nama kategori berita"
-            value={createState.create.form.name || ''}
+            defaultValue={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />

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

@@ -19,7 +19,12 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import {
+  IconArrowBack,
+  IconPhoto,
+  IconUpload,
+  IconX,
+} from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
@@ -33,16 +38,17 @@ function EditBerita() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    judul: beritaState.berita.edit.form.judul || "",
-    deskripsi: beritaState.berita.edit.form.deskripsi || "",
-    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || "",
-    content: beritaState.berita.edit.form.content || "",
-    imageId: beritaState.berita.edit.form.imageId || "",
+    judul: "",
+    deskripsi: "",
+    kategoriBeritaId: "",
+    content: "",
+    imageId: "",
   });
 
-  // Load berita by id saat pertama kali
+  // Load kategori + berita
   useEffect(() => {
     beritaState.kategoriBerita.findMany.load();
+
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
@@ -71,8 +77,13 @@ function EditBerita() {
     loadBerita();
   }, [params?.id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // Update global state hanya sekali di sini
       beritaState.berita.edit.form = {
         ...beritaState.berita.edit.form,
         ...formData,
@@ -103,6 +114,7 @@ function EditBerita() {
 
   return (
     <Box px={{ base: "sm", md: "lg" }} py="md">
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
@@ -119,6 +131,7 @@ function EditBerita() {
         </Title>
       </Group>
 
+      {/* Form */}
       <Paper
         w={{ base: "100%", md: "50%" }}
         bg={colors["white-1"]}
@@ -132,22 +145,41 @@ function EditBerita() {
             label="Judul"
             placeholder="Masukkan judul"
             value={formData.judul}
-            onChange={(e) =>
-              setFormData({ ...formData, judul: e.target.value })
-            }
+            onChange={(e) => handleChange("judul", e.target.value)}
             required
           />
 
-          <TextInput
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi"
-            value={formData.deskripsi}
-            onChange={(e) =>
-              setFormData({ ...formData, deskripsi: e.target.value })
+          <Select
+            value={formData.kategoriBeritaId}
+            onChange={(val) => handleChange("kategoriBeritaId", val || "")}
+            label="Kategori"
+            placeholder="Pilih kategori"
+            data={
+              beritaState.kategoriBerita.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
             }
+            clearable
+            searchable
             required
+            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
+          <Box>
+            <Text fz="sm" fw="bold">
+              Deskripsi Singkat
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
+            />
+          </Box>
+
+
+          {/* Upload Gambar */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
               Gambar Berita
@@ -160,7 +192,9 @@ function EditBerita() {
                   setPreviewImage(URL.createObjectURL(selectedFile));
                 }
               }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              onReject={() =>
+                toast.error("File tidak valid, gunakan format gambar")
+              }
               maxSize={5 * 1024 ** 2}
               accept={{ "image/*": [] }}
               radius="md"
@@ -168,7 +202,11 @@ function EditBerita() {
             >
               <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                  <IconUpload
+                    size={48}
+                    color={colors["blue-button"]}
+                    stroke={1.5}
+                  />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
                   <IconX size={48} color="red" stroke={1.5} />
@@ -204,38 +242,20 @@ function EditBerita() {
             )}
           </Box>
 
+          {/* Konten */}
           <Box>
             <Text fz="sm" fw="bold">
               Konten
             </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, content: htmlContent }));
-                beritaState.berita.edit.form.content = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, content: htmlContent }))
+              }
             />
           </Box>
 
-          <Select
-            value={formData.kategoriBeritaId}
-            onChange={(val) =>
-              setFormData({ ...formData, kategoriBeritaId: val || "" })
-            }
-            label="Kategori"
-            placeholder="Pilih kategori"
-            data={
-              beritaState.kategoriBerita.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.name,
-              })) || []
-            }
-            clearable
-            searchable
-            required
-            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
-          />
-
+          {/* Action */}
           <Group justify="right">
             <Button
               onClick={handleSubmit}

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

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

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

@@ -100,7 +100,7 @@ export default function CreateBerita() {
           <TextInput
             label="Judul"
             placeholder="Masukkan judul berita"
-            value={beritaState.berita.create.form.judul}
+            defaultValue={beritaState.berita.create.form.judul}
             onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
             required
           />
@@ -112,7 +112,7 @@ export default function CreateBerita() {
               label: item.name,
               value: item.id,
             }))}
-            value={beritaState.berita.create.form.kategoriBeritaId || null}
+            defaultValue={beritaState.berita.create.form.kategoriBeritaId || null}
             onChange={(val: string | null) => {
               if (val) {
                 const selected = beritaState.kategoriBerita.findMany.data?.find(
@@ -131,12 +131,17 @@ export default function CreateBerita() {
             required
           />
 
-          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi berita"
-            value={beritaState.berita.create.form.deskripsi}
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <CreateEditor
+              value={beritaState.berita.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                beritaState.berita.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           <Box>
             <Text fw="bold" fz="sm" mb={6}>

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

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

src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';
@@ -31,17 +31,19 @@ function EditVideo() {
     linkVideo: '',
   });
 
+  // load data video sekali saat id ada
   useEffect(() => {
     const loadVideo = async () => {
       const id = params?.id as string;
       if (!id) return;
+
       try {
         const data = await videoState.update.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            linkVideo: data.linkVideo || '',
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            linkVideo: data.linkVideo ?? '',
           });
         }
       } catch (error) {
@@ -49,10 +51,16 @@ function EditVideo() {
         toast.error('Gagal memuat data video');
       }
     };
+
     loadVideo();
   }, [params?.id]);
 
-  const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
+  const handleChange = useCallback(
+    (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
 
   const handleSubmit = async () => {
     const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
@@ -63,7 +71,6 @@ function EditVideo() {
 
     try {
       videoState.update.form = {
-        ...videoState.update.form,
         name: formData.name,
         deskripsi: formData.deskripsi,
         linkVideo: formData.linkVideo,
@@ -77,11 +84,18 @@ function EditVideo() {
     }
   };
 
+  const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -103,7 +117,7 @@ function EditVideo() {
             label="Judul Video"
             placeholder="Masukkan judul video"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.currentTarget.value)}
             required
           />
 
@@ -112,7 +126,7 @@ function EditVideo() {
               label="Link Video YouTube"
               placeholder="https://www.youtube.com/watch?v=abc123"
               value={formData.linkVideo}
-              onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
+              onChange={(e) => handleChange('linkVideo', e.currentTarget.value)}
               required
             />
             {embedLink && (
@@ -135,7 +149,7 @@ function EditVideo() {
             </Title>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              onChange={(val) => handleChange('deskripsi', val)}
             />
           </Box>
 

src/app/admin/(dashboard)/desa/gallery/video/[id]/page.tsx

@@ -102,6 +102,7 @@ function DetailVideo() {
                     fz="md"
                     c="dimmed"
                     dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                    style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                   />
                 ) : (
                   <Text fz="sm" c="dimmed">Tidak ada deskripsi</Text>

src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx

@@ -80,7 +80,7 @@ function CreateVideo() {
           <TextInput
             label="Judul Video"
             placeholder="Masukkan judul video"
-            value={videoState.create.form.name}
+            defaultValue={videoState.create.form.name}
             onChange={(e) => {
               videoState.create.form.name = e.currentTarget.value;
             }}
@@ -91,7 +91,7 @@ function CreateVideo() {
           <TextInput
             label="Link Video YouTube"
             placeholder="https://www.youtube.com/watch?v=abc123"
-            value={link}
+            defaultValue={link}
             onChange={(e) => setLink(e.currentTarget.value)}
             required
           />

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

@@ -1,17 +1,17 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import {
-    Box,
-    Button,
-    Group,
-    Paper,
-    Select,
-    Stack,
-    TextInput,
-    Title,
-    Tooltip
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -20,159 +20,159 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditAjukanPermohonan() {
-    const router = useRouter();
-    const params = useParams();
-    const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
+  const router = useRouter();
+  const params = useParams();
+  const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
 
-    const [formData, setFormData] = useState({
-        nama: stateAjukan.edit.form.nama,
-        nik: stateAjukan.edit.form.nik,
-        alamat: stateAjukan.edit.form.alamat,
-        nomorKk: stateAjukan.edit.form.nomorKk,
-        kategoriId: stateAjukan.edit.form.kategoriId,
-    });
+  // State lokal form
+  const [formData, setFormData] = useState({
+    nama: '',
+    nik: '',
+    alamat: '',
+    nomorKk: '',
+    kategoriId: '',
+  });
 
-    useEffect(() => {
-        stateLayananDesa.suratKeterangan.findManyAll.load();
-        const loadAjukan = async () => {
-            const id = params?.id as string;
-            if (!id) return;
+  // Load data awal
+  useEffect(() => {
+    stateLayananDesa.suratKeterangan.findManyAll.load();
 
-            try {
-                const data = await stateAjukan.edit.load(id);
-                if (data) {
-                    setFormData({
-                        nama: data.nama || '',
-                        nik: data.nik || '',
-                        alamat: data.alamat || '',
-                        nomorKk: data.nomorKk || '',
-                        kategoriId: data.kategoriId || '',
-                    });
-                }
-            } catch (error) {
-                console.error('Error loading ajukan:', error);
-                toast.error('Gagal memuat data ajukan');
-            }
-        };
+    const loadAjukan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
 
-        loadAjukan();
-    }, [params?.id]);
-
-    const handleSubmit = async () => {
-        try {
-            stateAjukan.edit.form = {
-                ...stateAjukan.edit.form,
-                ...formData,
-            };
-            toast.success('Ajukan berhasil diperbarui!');
-            router.push('/admin/desa/layanan/ajukan_permohonan');
-        } catch (error) {
-            console.error('Error updating ajukan:', error);
-            toast.error('Terjadi kesalahan saat memperbarui ajukan');
+      try {
+        const data = await stateAjukan.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            nik: data.nik || '',
+            alamat: data.alamat || '',
+            nomorKk: data.nomorKk || '',
+            kategoriId: data.kategoriId || '',
+          });
         }
+      } catch (error) {
+        console.error('Error loading ajukan:', error);
+        toast.error('Gagal memuat data ajukan');
+      }
     };
 
-    return (
-        <Box px={{ base: 'sm', md: 'lg' }} py="md">
-            {/* Back Button */}
-            <Group mb="md">
-                <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-                    <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-                        <IconArrowBack color={colors['blue-button']} size={24} />
-                    </Button>
-                </Tooltip>
-                <Title order={4} ml="sm" c="dark">
-                    Edit Ajukan Permohonan
-                </Title>
-            </Group>
+    loadAjukan();
+  }, [params?.id]);
 
-            <Paper
-                w={{ base: '100%', md: '50%' }}
-                bg={colors['white-1']}
-                p="lg"
-                radius="md"
-                shadow="sm"
-                style={{ border: '1px solid #e0e0e0' }}
+  // Handler untuk input controlled
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      stateAjukan.edit.form = {
+        ...stateAjukan.edit.form,
+        ...formData,
+      };
+      toast.success('Ajukan berhasil diperbarui!');
+      router.push('/admin/desa/layanan/ajukan_permohonan');
+    } catch (error) {
+      console.error('Error updating ajukan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui ajukan');
+    }
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Back Button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Ajukan Permohonan
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama"
+            placeholder="Masukkan nama"
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
+            required
+          />
+
+          <TextInput
+            type="number"
+            label="NIK"
+            placeholder="Masukkan NIK"
+            value={formData.nik}
+            onChange={(e) => handleChange('nik', e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            value={formData.alamat}
+            onChange={(e) => handleChange('alamat', e.target.value)}
+            required
+          />
+
+          <TextInput
+            type="number"
+            label="Nomor KK"
+            placeholder="Masukkan nomor KK"
+            value={formData.nomorKk}
+            onChange={(e) => handleChange('nomorKk', e.target.value)}
+            required
+          />
+
+          <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={formData.kategoriId || null}
+            onChange={(val) => handleChange('kategoriId', val || '')}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
             >
-                <Stack gap="md">
-                    <TextInput
-                        label="Nama"
-                        placeholder="Masukkan nama"
-                        value={formData.nama}
-                        onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        type="number"
-                        label="NIK"
-                        placeholder="Masukkan NIK"
-                        value={formData.nik}
-                        onChange={(e) => setFormData({ ...formData, nik: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        label="Alamat"
-                        placeholder="Masukkan alamat"
-                        value={formData.alamat}
-                        onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        type="number"
-                        label="Nomor KK"
-                        placeholder="Masukkan nomor KK"
-                        value={formData.nomorKk}
-                        onChange={(e) => setFormData({ ...formData, nomorKk: e.target.value })}
-                        required
-                    />
-
-                    <Select
-                        label="Kategori"
-                        placeholder="Pilih kategori"
-                        data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
-                            label: item.name,
-                            value: item.id,
-                        }))}
-                        value={formData.kategoriId || null}
-                        onChange={(val: string | null) => {
-                            if (val) {
-                                const selected = stateLayananDesa.suratKeterangan.findMany.data?.find(
-                                    (item) => item.id === val
-                                );
-                                if (selected) {
-                                    stateAjukan.edit.form.kategoriId = selected.id;
-                                }
-                            } else {
-                                stateAjukan.edit.form.kategoriId = '';
-                            }
-                        }}
-                        searchable
-                        clearable
-                        nothingFoundMessage="Tidak ditemukan"
-                        required
-                    />
-
-                    <Group justify="right">
-                        <Button
-                            onClick={handleSubmit}
-                            radius="md"
-                            size="md"
-                            style={{
-                                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                                color: '#fff',
-                                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-                            }}
-                        >
-                            Simpan
-                        </Button>
-                    </Group>
-                </Stack>
-            </Paper>
-        </Box>
-    );
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default EditAjukanPermohonan;

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

@@ -3,14 +3,14 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import {
-    Box,
-    Button,
-    Group,
-    Paper,
-    Skeleton,
-    Stack,
-    Text,
-    Tooltip
+  Box,
+  Button,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
@@ -79,7 +79,7 @@ function DetailAjukanPermohonan() {
                 <Text fz="lg" fw="bold">
                   Nama
                 </Text>
-                <Text fz="md" c="dimmed">
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
                   {data?.nama || '-'}
                 </Text>
               </Box>
@@ -97,7 +97,7 @@ function DetailAjukanPermohonan() {
                 <Text fz="lg" fw="bold">
                   Alamat
                 </Text>
-                <Text fz="md" c="dimmed">
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
                   {data?.alamat || '-'}
                 </Text>
               </Box>

src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/edit/page.tsx

@@ -1,9 +1,20 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -12,17 +23,22 @@ import { useProxy } from 'valtio/utils';
 
 function EditPelayananPendudukNonPermanent() {
   const router = useRouter();
-  const params = useParams()
-  const statePendudukNonPermanent = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
-  const [formData, setFormData] = useState({
-    name: statePendudukNonPermanent.findById.data?.name || '',
-    deskripsi: statePendudukNonPermanent.findById.data?.deskripsi || '',
-  })
+  const params = useParams();
+  const statePendudukNonPermanent = useProxy(
+    stateLayananDesa.pelayananPendudukNonPermanen
+  );
 
+  const [formData, setFormData] = useState({
+    name: '',
+    deskripsi: '',
+  });
+
+  // Load data sekali dari backend
   useEffect(() => {
-    const loadPelayananPerizinan = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
+
       try {
         const data = await statePendudukNonPermanent.update.load(id);
         if (data) {
@@ -32,27 +48,48 @@ function EditPelayananPendudukNonPermanent() {
           });
         }
       } catch (error) {
-        console.error("Error loading pelayanan perizinan berusaha:", error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data pelayanan penduduk non permanent');
       }
     };
-    loadPelayananPerizinan();
+
+    loadData();
   }, [params?.id]);
 
+  const handleChange =
+    (field: keyof typeof formData) =>
+    (value: string) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+    };
+
   const handleSubmit = async () => {
-    if (statePendudukNonPermanent.findById.data) {
-      statePendudukNonPermanent.findById.data.name = formData.name;
-      statePendudukNonPermanent.findById.data.deskripsi = formData.deskripsi;
-      statePendudukNonPermanent.update.update(statePendudukNonPermanent.findById.data)
-    }
-    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent')
-  }
+    if (!statePendudukNonPermanent.findById.data) return;
+
+    // Update global state hanya di submit
+    const updated = {
+      ...statePendudukNonPermanent.findById.data,
+      name: formData.name,
+      deskripsi: formData.deskripsi,
+    };
+
+    await statePendudukNonPermanent.update.update(updated);
+    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent');
+  };
+
   return (
     <Box>
       <Stack gap="xs">
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <Button
+              variant="subtle"
+              onClick={() => router.back()}
+              p="xs"
+              radius="md"
+            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -62,7 +99,7 @@ function EditPelayananPendudukNonPermanent() {
         </Group>
 
         <Paper
-          w={{ base: "100%", md: "50%" }}
+          w={{ base: '100%', md: '50%' }}
           bg={colors['white-1']}
           p="md"
           radius="md"
@@ -77,22 +114,18 @@ function EditPelayananPendudukNonPermanent() {
               label="Judul"
               placeholder="Masukkan judul"
               value={formData.name}
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
+              onChange={(e) => handleChange('name')(e.target.value)}
               required
             />
 
-            {/* Posisi Field */}
+            {/* Deskripsi Field */}
             <Box>
               <Text fz="sm" fw="bold">
                 Deskripsi
               </Text>
               <EditEditor
                 value={formData.deskripsi}
-                onChange={(htmlContent) => {
-                  setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                }}
+                onChange={handleChange('deskripsi')}
               />
             </Box>
 
@@ -104,7 +137,9 @@ function EditPelayananPendudukNonPermanent() {
                 loading={statePendudukNonPermanent.update.loading}
                 disabled={!formData.name}
               >
-                {statePendudukNonPermanent.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+                {statePendudukNonPermanent.update.loading
+                  ? 'Menyimpan...'
+                  : 'Simpan Perubahan'}
               </Button>
 
               <Button

src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx

@@ -91,6 +91,7 @@ function PelayananPendudukNonPermanent() {
                 ta="justify"
                 fz={{ base: '1rem', md: '1.2rem' }}
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{wordBreak: "break-word", whiteSpace: "normal"}}
               />
             </Box>
           </Box>

src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/edit/page.tsx

@@ -1,9 +1,18 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -12,15 +21,18 @@ import { useProxy } from 'valtio/utils';
 
 function EditPelayananPerizinanBerusaha() {
   const router = useRouter();
-  const params = useParams()
-  const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+  const params = useParams();
+  const statePerizinanBerusaha = useProxy(
+    stateLayananDesa.pelayananPerizinanBerusaha
+  );
 
   const [formData, setFormData] = useState({
-    name: statePerizinanBerusaha.findById.data?.name || '',
-    deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
-    link: statePerizinanBerusaha.findById.data?.link || '',
-  })
+    name: '',
+    deskripsi: '',
+    link: '',
+  });
 
+  // load data pertama kali
   useEffect(() => {
     const loadPelayananPerizinan = async () => {
       const id = params?.id as string;
@@ -35,22 +47,35 @@ function EditPelayananPerizinanBerusaha() {
           });
         }
       } catch (error) {
-        console.error("Error loading pelayanan perizinan berusaha:", error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        console.error('Error loading pelayanan perizinan berusaha:', error);
+        toast.error('Gagal memuat data pelayanan perizinan berusaha');
       }
     };
     loadPelayananPerizinan();
   }, [params?.id]);
 
+  const handleChange =
+    (field: keyof typeof formData) =>
+    (value: string) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+    };
+
   const handleSubmit = async () => {
+    const { name, deskripsi, link } = formData;
     if (statePerizinanBerusaha.findById.data) {
-      statePerizinanBerusaha.findById.data.name = formData.name;
-      statePerizinanBerusaha.findById.data.deskripsi = formData.deskripsi;
-      statePerizinanBerusaha.findById.data.link = formData.link;
-      statePerizinanBerusaha.update.update(statePerizinanBerusaha.findById.data)
+      const updatedData = {
+        ...statePerizinanBerusaha.findById.data,
+        name,
+        deskripsi,
+        link,
+      };
+      await statePerizinanBerusaha.update.update(updatedData);
+      router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
     }
-    router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha')
-  }
+  };
 
   return (
     <Box>
@@ -58,7 +83,12 @@ function EditPelayananPerizinanBerusaha() {
         {/* Header Section */}
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <Button
+              variant="subtle"
+              onClick={() => router.back()}
+              p="xs"
+              radius="md"
+            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -69,7 +99,7 @@ function EditPelayananPerizinanBerusaha() {
 
         {/* Form Section */}
         <Paper
-          w={{ base: "100%", md: "50%" }}
+          w={{ base: '100%', md: '50%' }}
           bg={colors['white-1']}
           p="md"
           radius="md"
@@ -84,7 +114,7 @@ function EditPelayananPerizinanBerusaha() {
               label="Judul"
               placeholder="Masukkan judul"
               value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              onChange={(e) => handleChange('name')(e.target.value)}
               required
             />
 
@@ -93,7 +123,7 @@ function EditPelayananPerizinanBerusaha() {
               label="Link"
               placeholder="Masukkan link terkait"
               value={formData.link}
-              onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+              onChange={(e) => handleChange('link')(e.target.value)}
             />
 
             {/* Deskripsi Field */}
@@ -101,7 +131,7 @@ function EditPelayananPerizinanBerusaha() {
               <Title order={6}>Deskripsi</Title>
               <EditEditor
                 value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+                onChange={handleChange('deskripsi')}
               />
             </Box>
 
@@ -113,7 +143,9 @@ function EditPelayananPerizinanBerusaha() {
                 loading={statePerizinanBerusaha.update.loading}
                 disabled={!formData.name}
               >
-                {statePerizinanBerusaha.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+                {statePerizinanBerusaha.update.loading
+                  ? 'Menyimpan...'
+                  : 'Simpan Perubahan'}
               </Button>
 
               <Button

src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/page.tsx

@@ -101,6 +101,7 @@ function PerizinanBerusaha() {
                 ta="justify"
                 fz={{ base: '1rem', md: '1.2rem' }}
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{wordBreak: "break-word", whiteSpace: "normal"}}
               />
 
               <Text

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

@@ -1,5 +1,4 @@
 'use client'
-/* eslint-disable react-hooks/exhaustive-deps */
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
@@ -19,7 +18,7 @@ import {
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -28,51 +27,65 @@ function EditSuratKeterangan() {
   const params = useParams();
   const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
 
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [file2, setFile2] = useState<File | null>(null);
+  // state lokal untuk form
   const [formData, setFormData] = useState({
-    name: stateSurat.edit.form.name,
-    deskripsi: stateSurat.edit.form.deskripsi,
-    imageId: stateSurat.edit.form.imageId,
-    image2Id: stateSurat.edit.form.image2Id,
+    name: '',
+    deskripsi: '',
+    imageId: '',
+    image2Id: '',
   });
 
-  useEffect(() => {
-    const loadSurat = async () => {
-      const id = params?.id as string;
-      if (!id) return;
+  // state file upload
+  const [file, setFile] = useState<File | null>(null);
+  const [file2, setFile2] = useState<File | null>(null);
 
-      try {
-        const data = await stateSurat.edit.load(id);
-        if (data) {
-          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
-            image2Id: data.image2Id || '',
-          });
+  // state preview gambar
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
 
-          setPreviewImage(data.image?.link || null);
-          setPreviewImage2(data.image2?.link || null);
-        }
-      } catch (error) {
-        console.error('Error loading surat:', error);
-        toast.error('Gagal memuat data surat');
-      }
-    };
+  // load data awal
+useEffect(() => {
+  const loadSurat = async () => {
+    const id = params?.id as string;
+    if (!id) return;
 
-    loadSurat();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
     try {
-      stateSurat.edit.form = {
-        ...stateSurat.edit.form,
-        ...formData,
-      };
+      const data = await stateSurat.edit.load(id);
+      if (data) {
+        // merge style -> isi hanya field kosong
+        setFormData((prev) => ({
+          ...prev,
+          name: prev.name || data.name || '',
+          deskripsi: prev.deskripsi || data.deskripsi || '',
+          imageId: prev.imageId || data.imageId || '',
+          image2Id: prev.image2Id || data.image2Id || '',
+        }));
 
+        if (data.image?.link && !previewImage) {
+          setPreviewImage(data.image.link);
+        }
+        if (data.image2?.link && !previewImage2) {
+          setPreviewImage2(data.image2.link);
+        }
+      }
+    } catch (error) {
+      console.error("Error loading surat:", error);
+      toast.error("Gagal memuat data surat");
+    }
+  };
+
+  loadSurat();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+}, [params?.id]);
+
+
+  // handler untuk submit
+  const handleSubmit = useCallback(async () => {
+    try {
+      // update form global hanya saat submit
+      stateSurat.edit.form = { ...stateSurat.edit.form, ...formData };
+
+      // upload file 1
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
@@ -80,6 +93,7 @@ function EditSuratKeterangan() {
         stateSurat.edit.form.imageId = uploaded.id;
       }
 
+      // upload file 2
       if (file2) {
         const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
         const uploaded = res.data?.data;
@@ -94,7 +108,7 @@ function EditSuratKeterangan() {
       console.error('Error updating surat:', error);
       toast.error('Terjadi kesalahan saat memperbarui surat');
     }
-  };
+  }, [formData, file, file2, router, stateSurat.edit]);
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -119,28 +133,32 @@ function EditSuratKeterangan() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          {/* Input nama */}
           <TextInput
             label="Nama Surat Keterangan"
             placeholder="Masukkan nama surat keterangan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
             required
           />
 
+          {/* Input deskripsi */}
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Konten
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
             />
           </Box>
 
           {/* Upload Gambar 1 */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-            Gambar Konten Pelayanan
+              Gambar Konten Pelayanan
             </Text>
             <Dropzone
               onDrop={(files) => {

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

@@ -95,6 +95,7 @@ function DetailSuratKeterangan() {
                   dangerouslySetInnerHTML={{
                     __html: data?.deskripsi || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx

@@ -106,9 +106,9 @@ function CreateSuratKeterangan() {
         <Stack gap="md">
           {/* Nama Surat */}
           <TextInput
-            value={stateSurat.create.form.name}
+            defaultValue={stateSurat.create.form.name}
             onChange={(val) => (stateSurat.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Surat Keterangan</Text>}
+            label="Nama Surat Keterangan"
             placeholder="Masukkan nama surat keterangan"
             required
           />

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx

@@ -119,6 +119,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
                       <Box w={200}>
                         <Text truncate="end" lineClamp={1} fz="sm" c="dimmed"
                           dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
                         />
                       </Box>
                     </TableTd>

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

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
@@ -26,22 +26,24 @@ function EditPelayananTelunjukSakti() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    name: stateTelunjukDesa.edit.form.name,
-    deskripsi: stateTelunjukDesa.edit.form.deskripsi,
-    link: stateTelunjukDesa.edit.form.link,
+    name: '',
+    deskripsi: '',
+    link: '',
   });
 
+  // Load data awal hanya sekali (pas ada id)
   useEffect(() => {
-    const loadPelayananTelunjukSakti = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
+
       try {
         const data = await stateTelunjukDesa.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            link: data.link || '',
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            link: data.link ?? '',
           });
         }
       } catch (error) {
@@ -49,9 +51,19 @@ function EditPelayananTelunjukSakti() {
         toast.error('Gagal memuat data pelayanan telunjuk sakti');
       }
     };
-    loadPelayananTelunjukSakti();
+
+    loadData();
   }, [params?.id]);
 
+  // Handler input controlled
+  const handleChange = useCallback(
+    (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
+  // Submit: update global state hanya saat simpan
   const handleSubmit = async () => {
     try {
       stateTelunjukDesa.edit.form = {
@@ -95,7 +107,7 @@ function EditPelayananTelunjukSakti() {
             label="Nama Pelayanan"
             placeholder="Masukkan nama pelayanan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.target.value)}
             required
           />
 
@@ -106,7 +118,7 @@ function EditPelayananTelunjukSakti() {
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+              onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
             />
           </Box>
 
@@ -115,7 +127,7 @@ function EditPelayananTelunjukSakti() {
             label="Link"
             placeholder="Masukkan link terkait"
             value={formData.link}
-            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            onChange={(e) => handleChange('link', e.target.value)}
           />
 
           {/* Tombol Simpan */}

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

@@ -103,6 +103,7 @@ function DetailPelayananTelunjukSakti() {
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
+                      wordBreak: "break-word",
                     }}
                   >
                     {data.link}
@@ -124,6 +125,7 @@ function DetailPelayananTelunjukSakti() {
                   dangerouslySetInnerHTML={{
                     __html: data?.deskripsi || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/create/page.tsx

@@ -8,15 +8,14 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
 
 function CreatePelayananTelunjukDesa() {
   const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
@@ -68,33 +67,35 @@ function CreatePelayananTelunjukDesa() {
         <Stack gap="md">
           {/* Nama */}
           <TextInput
-            value={stateTelunjukDesa.create.form.name}
+            defaultValue={stateTelunjukDesa.create.form.name}
             onChange={(val) => {
               stateTelunjukDesa.create.form.name = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Nama Pelayanan</Text>}
+            label="Nama Pelayanan"
             placeholder="Masukkan nama pelayanan telunjuk sakti desa"
             required
           />
 
           {/* Deskripsi */}
           <TextInput
-            value={stateTelunjukDesa.create.form.deskripsi}
+            defaultValue={stateTelunjukDesa.create.form.deskripsi}
             onChange={(val) => {
               stateTelunjukDesa.create.form.deskripsi = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            label="Deskripsi"
             placeholder="Masukkan deskripsi pelayanan"
+            required
           />
 
           {/* Link */}
           <TextInput
-            value={stateTelunjukDesa.create.form.link}
+            defaultValue={stateTelunjukDesa.create.form.link}
             onChange={(val) => {
               stateTelunjukDesa.create.form.link = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Link</Text>}
+            label="Link"
             placeholder="Masukkan link pelayanan"
+            required
           />
 
           {/* Tombol Simpan */}

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx

@@ -261,7 +261,7 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
                     <TableTd>
                       <Box w={200}>
                         <a href={item.link} target="_blank" rel="noopener noreferrer">
-                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} style={{wordBreak: "break-word", whiteSpace: "normal"}} truncate="end" fz={"sm"} />
                         </a>
                       </Box>
                     </TableTd>

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

@@ -24,18 +24,22 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditPenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState)
-  const router = useRouter()
-  const params = useParams()
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [file, setFile] = useState<File | null>(null)
-  const [formData, setFormData] = useState({
-    name: statePenghargaan.findUnique.data?.name || '',
-    juara: statePenghargaan.findUnique.data?.juara || '',
-    deskripsi: statePenghargaan.findUnique.data?.deskripsi || '',
-    imageId: statePenghargaan.findUnique.data?.imageId || '',
-  })
+  const statePenghargaan = useProxy(penghargaanState);
+  const router = useRouter();
+  const params = useParams();
 
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  // Lokal formData
+  const [formData, setFormData] = useState({
+    name: '',
+    juara: '',
+    deskripsi: '',
+    imageId: '',
+  });
+
+  // Load data pertama kali
   useEffect(() => {
     const loadPenghargaan = async () => {
       const id = params?.id as string;
@@ -56,43 +60,43 @@ function EditPenghargaan() {
           }
         }
       } catch (error) {
-        console.error("Error loading penghargaan:", error);
-        toast.error("Gagal memuat data penghargaan");
+        console.error('Error loading penghargaan:', error);
+        toast.error('Gagal memuat data penghargaan');
       }
     };
 
     loadPenghargaan();
   }, [params?.id]);
 
+  // Submit
   const handleSubmit = async () => {
     try {
+      // Sync ke global state saat submit
       statePenghargaan.edit.form = {
         ...statePenghargaan.edit.form,
-        name: formData.name,
-        juara: formData.juara,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-      }
+        ...formData,
+      };
 
+      // Upload file baru (kalau ada)
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          return toast.error('Gagal upload gambar');
         }
 
         statePenghargaan.edit.form.imageId = uploaded.id;
       }
 
       await statePenghargaan.edit.update();
-      toast.success("Penghargaan berhasil diperbarui!");
-      router.push("/admin/desa/penghargaan");
+      toast.success('Penghargaan berhasil diperbarui!');
+      router.push('/admin/desa/penghargaan');
     } catch (error) {
-      console.error("Error updating penghargaan:", error);
-      toast.error("Terjadi kesalahan saat memperbarui penghargaan");
+      console.error('Error updating penghargaan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui penghargaan');
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -123,7 +127,7 @@ function EditPenghargaan() {
             label="Judul"
             placeholder="Masukkan judul penghargaan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
             required
           />
 
@@ -132,7 +136,7 @@ function EditPenghargaan() {
             label="Juara"
             placeholder="Masukkan juara"
             value={formData.juara}
-            onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
+            onChange={(e) => setFormData((prev) => ({ ...prev, juara: e.target.value }))}
             required
           />
 
@@ -182,7 +186,11 @@ function EditPenghargaan() {
                   src={previewImage}
                   alt="Preview Gambar"
                   radius="md"
-                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'contain',
+                    border: `1px solid ${colors['blue-button']}`,
+                  }}
                   loading="lazy"
                 />
               </Box>
@@ -196,10 +204,9 @@ function EditPenghargaan() {
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                statePenghargaan.edit.form.deskripsi = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
             />
           </Box>
 

src/app/admin/(dashboard)/desa/penghargaan/[id]/page.tsx

@@ -122,6 +122,7 @@ function DetailPenghargaan() {
                   fz="md"
                   c="dimmed"
                   dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx

@@ -87,17 +87,17 @@ function CreatePenghargaan() {
       >
         <Stack gap="md">
           <TextInput
-            value={statePenghargaan.create.form.name}
+            defaultValue={statePenghargaan.create.form.name}
             onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
+            label="Nama Penghargaan"
             placeholder="Masukkan nama penghargaan"
             required
           />
 
           <TextInput
-            value={statePenghargaan.create.form.juara}
+            defaultValue={statePenghargaan.create.form.juara}
             onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
-            label={<Text fz="sm" fw="bold">Juara</Text>}
+            label="Juara"
             placeholder="Masukkan juara"
             required
           />

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -108,6 +108,7 @@ function ListPenghargaan({ search }: { search: string }) {
                           fz="sm"
                           c="dimmed"
                           dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
                         />
                       </Box>
                     </TableTd>

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
 import {
@@ -11,7 +12,6 @@ import {
   TextInput,
   Title,
   Tooltip,
-  Text,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -24,10 +24,9 @@ function EditKategoriPengumuman() {
   const router = useRouter();
   const params = useParams();
 
-  const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
-  });
+  const [formData, setFormData] = useState({ name: '' });
 
+  // Load data awal sekali aja
   useEffect(() => {
     const loadKategori = async () => {
       const id = params?.id as string;
@@ -36,9 +35,7 @@ function EditKategoriPengumuman() {
       try {
         const data = await editState.update.load(id);
         if (data) {
-          setFormData({
-            name: data.name || '',
-          });
+          setFormData({ name: data.name || '' });
         }
       } catch (error) {
         console.error('Error loading kategori Pengumuman:', error);
@@ -49,8 +46,16 @@ function EditKategoriPengumuman() {
     loadKategori();
   }, [params?.id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // Update global state hanya di sini
       editState.update.form = {
         ...editState.update.form,
         name: formData.name,
@@ -95,16 +100,10 @@ function EditKategoriPengumuman() {
       >
         <Stack gap="md">
           <TextInput
-            label={
-              <Text fz="sm" fw="bold">
-                Nama Kategori Pengumuman
-              </Text>
-            }
+            label="Nama Kategori Pengumuman"
             placeholder="Masukkan nama kategori Pengumuman"
             value={formData.name}
-            onChange={(e) =>
-              setFormData({ ...formData, name: e.target.value })
-            }
+            onChange={(e) => handleChange('name', e.target.value)}
             required
           />
 

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriPengumuman() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Pengumuman</Text>}
+            label="Nama Kategori Pengumuman"
             placeholder="Masukkan nama kategori pengumuman"
-            value={createState.create.form.name || ''}
+            defaultValue={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />

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

@@ -28,16 +28,16 @@ function EditPengumuman() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    judul: editState.pengumuman.edit.form.judul || "",
-    deskripsi: editState.pengumuman.edit.form.deskripsi || "",
-    categoryPengumumanId:
-      editState.pengumuman.edit.form.categoryPengumumanId || "",
-    content: editState.pengumuman.edit.form.content || "",
+    judul: "",
+    deskripsi: "",
+    categoryPengumumanId: "",
+    content: "",
   });
 
-  // Load pengumuman by id saat pertama kali
+  // Load kategori & pengumuman by id saat pertama kali
   useEffect(() => {
     editState.category.findMany.load();
+
     const loadpengumuman = async () => {
       const id = params?.id as string;
       if (!id) return;
@@ -61,9 +61,13 @@ function EditPengumuman() {
     loadpengumuman();
   }, [params?.id]);
 
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
-      // update global state
+      // update global state hanya sekali pas submit
       editState.pengumuman.edit.form = {
         ...editState.pengumuman.edit.form,
         ...formData,
@@ -109,7 +113,7 @@ function EditPengumuman() {
             label="Judul Pengumuman"
             placeholder="Masukkan judul"
             value={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            onChange={(e) => handleChange("judul", e.target.value)}
             required
           />
 
@@ -117,17 +121,13 @@ function EditPengumuman() {
             label="Deskripsi Singkat"
             placeholder="Masukkan deskripsi"
             value={formData.deskripsi}
-            onChange={(e) =>
-              setFormData({ ...formData, deskripsi: e.target.value })
-            }
+            onChange={(e) => handleChange("deskripsi", e.target.value)}
             required
           />
 
           <Select
             value={formData.categoryPengumumanId}
-            onChange={(val) =>
-              setFormData({ ...formData, categoryPengumumanId: val || "" })
-            }
+            onChange={(val) => handleChange("categoryPengumumanId", val || "")}
             label="Kategori"
             placeholder="Pilih kategori"
             data={
@@ -150,9 +150,7 @@ function EditPengumuman() {
             </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) =>
-                setFormData({ ...formData, content: htmlContent })
-              }
+              onChange={(htmlContent) => handleChange("content", htmlContent)}
             />
           </Box>
 

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

@@ -97,7 +97,7 @@ export default function DetailPengumuman() {
                 <Text fz="lg" fw="bold">
                   Deskripsi
                 </Text>
-                <Text fz="md" c="dimmed">
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
                   {data?.deskripsi || '-'}
                 </Text>
               </Box>
@@ -112,6 +112,7 @@ export default function DetailPengumuman() {
                   dangerouslySetInnerHTML={{
                     __html: data?.content || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

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

@@ -68,16 +68,16 @@ function CreatePengumuman() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            value={pengumumanState.pengumuman.create.form.judul}
+            defaultValue={pengumumanState.pengumuman.create.form.judul}
             onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
+            label="Judul"
             placeholder="Masukkan judul pengumuman"
             required
           />
 
           {/* Kategori */}
           <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
             value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
             onChange={(val) => {
@@ -93,9 +93,9 @@ function CreatePengumuman() {
 
           {/* Deskripsi Singkat */}
           <TextInput
-            value={pengumumanState.pengumuman.create.form.deskripsi}
+            defaultValue={pengumumanState.pengumuman.create.form.deskripsi}
             onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+            label="Deskripsi Singkat"
             placeholder="Masukkan deskripsi singkat"
             required
           />

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

@@ -24,9 +24,10 @@ function EditKategoriPotensi() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    nama: editState.update.form.nama || '',
+    nama: '',
   });
 
+  // Load data dari backend -> isi ke formData lokal
   useEffect(() => {
     const loadKategori = async () => {
       const id = params?.id as string;
@@ -48,8 +49,16 @@ function EditKategoriPotensi() {
     loadKategori();
   }, [params?.id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // Update global state hanya pas submit
       editState.update.form = {
         ...editState.update.form,
         nama: formData.nama,
@@ -68,7 +77,12 @@ function EditKategoriPotensi() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -90,11 +104,11 @@ function EditKategoriPotensi() {
             label="Nama Kategori Potensi"
             placeholder="Masukkan nama kategori potensi"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.currentTarget.value)}
             required
           />
 
-          <Group justify="right">
+          <Group justify="flex-end">
             <Button
               onClick={handleSubmit}
               radius="md"

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

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriPotensi() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Potensi</Text>}
+            label="Nama Kategori Potensi"
             placeholder="Masukkan nama kategori potensi"
-            value={createState.create.form.nama || ''}
+            defaultValue={createState.create.form.nama || ''}
             onChange={(e) => (createState.create.form.nama = e.target.value)}
             required
           />

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

@@ -40,12 +40,18 @@ function EditPotensi() {
     imageId: "",
   });
 
+  // handle input changes
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   useEffect(() => {
     potensiDesaState.kategoriPotensi.findMany.load();
+  
     const loadPotensi = async () => {
       const id = params?.id as string;
       if (!id) return;
-
+  
       try {
         const data = await potensiState.edit.load(id);
         if (data) {
@@ -56,7 +62,17 @@ function EditPotensi() {
             content: data.content || "",
             imageId: data.imageId || "",
           });
-
+          
+          // // merge, bukan replace
+          // setFormData((prev) => ({
+          //   ...prev,
+          //   name: data.name ?? prev.name,
+          //   deskripsi: data.deskripsi ?? prev.deskripsi,
+          //   kategoriId: data.kategoriId ?? prev.kategoriId,
+          //   content: data.content ?? prev.content,
+          //   imageId: data.imageId ?? prev.imageId,
+          // }));
+  
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -66,28 +82,34 @@ function EditPotensi() {
         toast.error("Gagal memuat data potensi");
       }
     };
-
+  
     loadPotensi();
   }, [params?.id]);
+  
 
   const handleSubmit = async () => {
     try {
-      potensiState.edit.form = {
-        ...potensiState.edit.form,
-        ...formData,
-      };
+      let imageId = formData.imageId;
 
       if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
           return toast.error("Gagal upload gambar");
         }
 
-        potensiState.edit.form.imageId = uploaded.id;
+        imageId = uploaded.id;
       }
 
+      potensiState.edit.form = {
+        ...formData,
+        imageId,
+      };
+
       await potensiState.edit.update();
       toast.success("Potensi berhasil diperbarui!");
       router.push("/admin/desa/potensi/list-potensi");
@@ -101,7 +123,12 @@ function EditPotensi() {
     <Box px={{ base: "sm", md: "lg" }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors["blue-button"]} size={24} />
           </Button>
         </Tooltip>
@@ -123,21 +150,25 @@ function EditPotensi() {
             label="Judul Potensi"
             placeholder="Masukkan judul"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange("name", e.target.value)}
             required
           />
 
-          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi"
-            value={formData.deskripsi}
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-            required
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) =>
+                handleChange("deskripsi", htmlContent)
+              }
+            />
+          </Box>
 
           <Select
             value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
+            onChange={(val) => handleChange("kategoriId", val || "")}
             label="Kategori"
             placeholder="Pilih kategori"
             data={
@@ -164,7 +195,9 @@ function EditPotensi() {
                   setPreviewImage(URL.createObjectURL(selectedFile));
                 }
               }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              onReject={() =>
+                toast.error("File tidak valid, gunakan format gambar")
+              }
               maxSize={5 * 1024 ** 2}
               accept={{ "image/*": [] }}
               radius="md"
@@ -172,7 +205,11 @@ function EditPotensi() {
             >
               <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                  <IconUpload
+                    size={48}
+                    color={colors["blue-button"]}
+                    stroke={1.5}
+                  />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
                   <IconX size={48} color="red" stroke={1.5} />
@@ -214,7 +251,9 @@ function EditPotensi() {
             </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) => setFormData({ ...formData, content: htmlContent })}
+              onChange={(htmlContent) =>
+                handleChange("content", htmlContent)
+              }
             />
           </Box>
 

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

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

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

@@ -93,25 +93,29 @@ function CreatePotensi() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            value={potensiState.create.form.name}
+            defaultValue={potensiState.create.form.name}
             onChange={(val) => (potensiState.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
+            label="Judul"
             placeholder="Masukkan judul potensi"
             required
           />
 
           {/* Deskripsi */}
-          <TextInput
-            value={potensiState.create.form.deskripsi}
-            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="Masukkan deskripsi singkat"
-            required
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <CreateEditor
+              value={potensiState.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                potensiState.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           {/* Kategori */}
           <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
             value={potensiState.create.form.kategoriId || ""}
             onChange={(val) => {

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

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

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

@@ -115,7 +115,7 @@ function Page() {
                         <TextInput
                             label={<Text fw="bold">Judul</Text>}
                             placeholder="Judul lambang"
-                            value={lambangState.update.form.judul}
+                            defaultValue={lambangState.update.form.judul}
                             onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
                             error={!lambangState.update.form.judul && "Judul wajib diisi"}
                         />

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

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

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

@@ -116,7 +116,7 @@ function Page() {
                         <TextInput
                             label={<Text fw="bold">Judul</Text>}
                             placeholder="Judul sejarah"
-                            value={sejarahState.update.form.judul}
+                            defaultValue={sejarahState.update.form.judul}
                             onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
                             error={!sejarahState.update.form.judul && "Judul wajib diisi"}
                         />

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

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

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

@@ -26,15 +26,17 @@ function EditPerbekelDariMasaKeMasa() {
   const state = useProxy(stateProfileDesa.mantanPerbekel);
   const router = useRouter();
   const params = useParams();
+
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    nama: state.update.form.nama || '',
-    daerah: state.update.form.daerah || '',
-    periode: state.update.form.periode || '',
-    imageId: state.update.form.imageId || ''
+    nama: '',
+    daerah: '',
+    periode: '',
+    imageId: ''
   });
 
+  // load data pertama kali
   useEffect(() => {
     const loadFoto = async () => {
       const id = params?.id as string;
@@ -48,7 +50,9 @@ function EditPerbekelDariMasaKeMasa() {
             periode: data.periode || '',
             imageId: data.imageId || ''
           });
-          if (data?.imageGalleryFoto?.link) setPreviewImage(data.imageGalleryFoto.link);
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
         }
       } catch (error) {
         console.error('Error loading foto:', error);
@@ -58,8 +62,17 @@ function EditPerbekelDariMasaKeMasa() {
     loadFoto();
   }, [params?.id]);
 
+  // helper ubah state formData
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // update global state hanya sekali pas submit
       state.update.form = { ...state.update.form, ...formData };
 
       if (file) {
@@ -107,7 +120,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Nama"
             placeholder="Masukkan nama"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -161,7 +174,7 @@ function EditPerbekelDariMasaKeMasa() {
                     objectFit: 'contain',
                     border: `1px solid ${colors['blue-button']}`,
                   }}
-                  loading='lazy'
+                  loading="lazy"
                 />
               </Box>
             )}
@@ -171,7 +184,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Daerah"
             placeholder="Masukkan daerah"
             value={formData.daerah}
-            onChange={(e) => setFormData({ ...formData, daerah: e.target.value })}
+            onChange={(e) => handleChange('daerah', e.target.value)}
             required
           />
 
@@ -179,7 +192,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Periode"
             placeholder="Masukkan periode"
             value={formData.periode}
-            onChange={(e) => setFormData({ ...formData, periode: e.target.value })}
+            onChange={(e) => handleChange('periode', e.target.value)}
             required
           />
 

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

@@ -70,23 +70,23 @@ function CreatePerbekelDariMasaKeMasa() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Perbekel</Text>}
+            label="Nama Perbekel"
             placeholder="Masukkan nama perbekel"
-            value={state.create.form.nama}
+            defaultValue={state.create.form.nama}
             onChange={(e) => (state.create.form.nama = e.target.value)}
             required
           />
           <TextInput
-            label={<Text fw="bold" fz="sm">Daerah</Text>}
+            label="Daerah"
             placeholder="Masukkan daerah"
-            value={state.create.form.daerah}
+            defaultValue={state.create.form.daerah}
             onChange={(e) => (state.create.form.daerah = e.target.value)}
             required
           />
           <TextInput
-            label={<Text fw="bold" fz="sm">Periode</Text>}
+            label="Periode"
             placeholder="Masukkan periode"
-            value={state.create.form.periode}
+            defaultValue={state.create.form.periode}
             onChange={(e) => (state.create.form.periode = e.target.value)}
             required
           />

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

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

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

@@ -97,16 +97,16 @@ function Page() {
           {/* Biodata & Info */}
           <Box mt="lg">
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Biodata</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman Organisasi</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Program Kerja Unggulan</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
           </Box>
         </Paper>
       </Stack>

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
 import {
@@ -29,13 +29,13 @@ function EditAPBDesa() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    tahun: apbState.update.form.tahun || '',
-    pendapatanIds: apbState.update.form.pendapatanIds || [],
-    belanjaIds: apbState.update.form.belanjaIds || [],
-    pembiayaanIds: apbState.update.form.pembiayaanIds || [],
+    tahun: '',
+    pendapatanIds: [] as string[],
+    belanjaIds: [] as string[],
+    pembiayaanIds: [] as string[],
   });
 
-  // Load APB desa by id
+  // Load APB desa by id → hanya update formData, bukan global state
   useEffect(() => {
     const loadAPBdesa = async () => {
       const id = params?.id as string;
@@ -45,7 +45,7 @@ function EditAPBDesa() {
         const data = await apbState.update.load(id);
         if (data) {
           setFormData({
-            tahun: data.tahun || 0,
+            tahun: String(data.tahun || ''),
             pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
             belanjaIds: data.belanja?.map((b: any) => b.id) || [],
             pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
@@ -60,8 +60,13 @@ function EditAPBDesa() {
     loadAPBdesa();
   }, [params?.id]);
 
+  const handleChange = (field: keyof typeof formData, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // update global state cuma pas submit
       apbState.update.form = {
         ...apbState.update.form,
         tahun: Number(formData.tahun),
@@ -112,9 +117,7 @@ function EditAPBDesa() {
           <TextInput
             type="number"
             value={formData.tahun}
-            onChange={(e) =>
-              setFormData({ ...formData, tahun: e.target.value })
-            }
+            onChange={(e) => handleChange("tahun", e.target.value)}
             label={<Text fz="sm" fw="bold">Tahun</Text>}
             placeholder="Masukkan tahun anggaran"
             required
@@ -123,23 +126,17 @@ function EditAPBDesa() {
           {/* Selects */}
           <SelectPendapatan
             selectedIds={formData.pendapatanIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, pendapatanIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
           />
 
           <SelectBelanja
             selectedIds={formData.belanjaIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, belanjaIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
           />
 
           <SelectPembiayaan
             selectedIds={formData.pembiayaanIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, pembiayaanIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
           />
 
           {/* Save Button */}
@@ -164,7 +161,13 @@ function EditAPBDesa() {
 
   /* --- Sub Components --- */
 
-  function SelectPendapatan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectPendapatan({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
     const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
 
     useShallowEffect(() => {
@@ -192,7 +195,13 @@ function EditAPBDesa() {
     );
   }
 
-  function SelectBelanja({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectBelanja({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
     const belanjaState = useProxy(PendapatanAsliDesa.belanja);
 
     useShallowEffect(() => {
@@ -220,7 +229,13 @@ function EditAPBDesa() {
     );
   }
 
-  function SelectPembiayaan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectPembiayaan({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
     const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
 
     useShallowEffect(() => {

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx

@@ -65,7 +65,7 @@ function CreateAPBDesa() {
         <Stack gap="md">
           <TextInput
             type="number"
-            value={apbDesaState.create.form.tahun}
+            defaultValue={apbDesaState.create.form.tahun}
             onChange={(val) => {
               apbDesaState.create.form.tahun = Number(val.target.value);
             }}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
 import {
@@ -24,12 +25,16 @@ function EditBelanja() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    name: belanjaState.update.form.name || '',
-    value: belanjaState.update.form.value || '',
+    name: '',
+    value: '',
   });
 
+  // format angka ke rupiah
   const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    const number =
+      typeof value === 'number'
+        ? value
+        : Number(value.replace(/\D/g, '')) || 0;
     return new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
@@ -37,8 +42,9 @@ function EditBelanja() {
     }).format(number);
   };
 
+  // buang semua simbol jadi angka murni
   const unformatRupiah = (value: string) => {
-    return Number(value.replace(/\D/g, ''));
+    return Number(value.replace(/\D/g, '')) || 0;
   };
 
   useEffect(() => {
@@ -51,7 +57,7 @@ function EditBelanja() {
         if (data) {
           setFormData({
             name: data.name || '',
-            value: data.value || '',
+            value: String(data.value || ''),
           });
         }
       } catch (error) {
@@ -69,7 +75,7 @@ function EditBelanja() {
         ...belanjaState.update.form,
         name: formData.name,
         value: Number(formData.value),
-      }
+      };
 
       await belanjaState.update.update();
       toast.success("Jenis Belanja berhasil diperbarui!");
@@ -78,7 +84,7 @@ function EditBelanja() {
       console.error("Error updating jenis belanja:", error);
       toast.error("Terjadi kesalahan saat memperbarui jenis belanja");
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -113,18 +119,20 @@ function EditBelanja() {
             label="Nama Jenis Belanja"
             placeholder="Masukkan nama jenis belanja"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              setFormData({ ...formData, value: String(cleanValue) });
             }}
             required
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx

@@ -85,7 +85,7 @@ function CreateBelanja() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Belanja</Text>}
             placeholder="Masukkan nama jenis belanja"
-            value={belanjaState.create.form.name}
+            defaultValue={belanjaState.create.form.name}
             onChange={(e) => (belanjaState.create.form.name = e.target.value)}
             required
           />
@@ -94,7 +94,7 @@ function CreateBelanja() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai belanja"
-            value={formatRupiah(belanjaState.create.form.value)}
+            defaultValue={formatRupiah(belanjaState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               belanjaState.create.form.value = unformatRupiah(raw);

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx

@@ -24,12 +24,15 @@ function EditPembiayaan() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    name: pembiayaanState.update.form.name || '',
-    value: pembiayaanState.update.form.value || '',
+    name: '',
+    value: '',
   });
 
   const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
+    const number =
+      typeof value === 'number'
+        ? value
+        : Number(value.toString().replace(/\D/g, '')) || 0;
     return new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
@@ -38,7 +41,7 @@ function EditPembiayaan() {
   };
 
   const unformatRupiah = (value: string) => {
-    return Number(value.replace(/\D/g, ''));
+    return Number(value.replace(/\D/g, '')) || 0;
   };
 
   useEffect(() => {
@@ -51,7 +54,7 @@ function EditPembiayaan() {
         if (data) {
           setFormData({
             name: data.name || '',
-            value: data.value || '',
+            value: String(data.value || ''),
           });
         }
       } catch (error) {
@@ -68,7 +71,7 @@ function EditPembiayaan() {
       pembiayaanState.update.form = {
         ...pembiayaanState.update.form,
         name: formData.name,
-        value: Number(formData.value),
+        value: unformatRupiah(formData.value),
       };
 
       await pembiayaanState.update.update();
@@ -82,7 +85,7 @@ function EditPembiayaan() {
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan Back Button */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
@@ -113,18 +116,20 @@ function EditPembiayaan() {
             label="Nama Jenis Pembiayaan"
             placeholder="Masukkan nama jenis pembiayaan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              setFormData((prev) => ({ ...prev, value: String(cleanValue) }));
             }}
             required
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx

@@ -85,7 +85,7 @@ function CreatePembiayaan() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Pembiayaan</Text>}
             placeholder="Masukkan nama jenis pembiayaan"
-            value={pembiayaanState.create.form.name}
+            defaultValue={pembiayaanState.create.form.name}
             onChange={(e) => {
               pembiayaanState.create.form.name = e.currentTarget.value;
             }}
@@ -96,7 +96,7 @@ function CreatePembiayaan() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai"
-            value={formatRupiah(pembiayaanState.create.form.value)}
+            defaultValue={formatRupiah(pembiayaanState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               pembiayaanState.create.form.value = unformatRupiah(raw);

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx

@@ -24,12 +24,16 @@ function EditPendapatan() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    name: pendapatanState.update.form.name || '',
-    value: pendapatanState.update.form.value || '',
+    name: '',
+    value: '',
   });
 
+  // helper format
   const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
+    const number = typeof value === 'number'
+      ? value
+      : Number(value.toString().replace(/\D/g, ''));
+
     return new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
@@ -39,6 +43,7 @@ function EditPendapatan() {
 
   const unformatRupiah = (value: string) => Number(value.replace(/\D/g, ''));
 
+  // load data once
   useEffect(() => {
     const id = params?.id as string;
     if (!id) return;
@@ -48,8 +53,8 @@ function EditPendapatan() {
         const data = await pendapatanState.update.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            value: data.value || '',
+            name: data.name ?? '',
+            value: data.value?.toString() ?? '',
           });
         }
       } catch (error) {
@@ -61,6 +66,13 @@ function EditPendapatan() {
     loadPendapatan();
   }, [params?.id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
       pendapatanState.update.form = {
@@ -111,18 +123,18 @@ function EditPendapatan() {
             label="Nama Jenis Pendapatan"
             placeholder="Masukkan nama jenis pendapatan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.target.value)}
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
             onChange={(e) => {
               const raw = e.currentTarget.value;
-              const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              const cleanValue = unformatRupiah(raw).toString();
+              handleChange('value', cleanValue);
             }}
             required
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -76,32 +75,24 @@ function CreatePendapatan() {
       >
         <Stack gap="md">
           <TextInput
-            value={pendapatanState.create.form.name}
+            defaultValue={pendapatanState.create.form.name}
             onChange={(val) => {
               pendapatanState.create.form.name = val.target.value;
             }}
-            label={
-              <Text fw="bold" fz="sm">
-                Nama Jenis Pendapatan
-              </Text>
-            }
+            label="Nama Jenis Pendapatan"
             placeholder="Masukkan nama jenis pendapatan"
             required
           />
 
           <TextInput
             type="text"
-            value={formatRupiah(pendapatanState.create.form.value)}
+            defaultValue={formatRupiah(pendapatanState.create.form.value)}
             onChange={(val) => {
               const raw = val.currentTarget.value;
               const cleanValue = unformatRupiah(raw);
               pendapatanState.create.form.value = cleanValue;
             }}
-            label={
-              <Text fw="bold" fz="sm">
-                Nilai
-              </Text>
-            }
+            label="Nilai"
             placeholder="Masukkan nilai"
             required
           />

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx

@@ -10,15 +10,21 @@ import {
   Stack,
   TextInput,
   Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
 
+interface FormData {
+  pekerjaan: string;
+  lakiLaki: number;
+  perempuan: number;
+}
+
 function EditDemografiPekerjaan() {
   const router = useRouter();
   const params = useParams() as { id: string };
@@ -26,19 +32,27 @@ function EditDemografiPekerjaan() {
 
   const id = params.id;
 
+  const [formData, setFormData] = useState<FormData>({
+    pekerjaan: '',
+    lakiLaki: 0,
+    perempuan: 0,
+  });
+
+  // Load data sekali waktu
   useEffect(() => {
     if (!id) return;
     stateDemografi.update.id = id;
+
     stateDemografi.findUnique
       .load(id)
       .then(() => {
         const data = stateDemografi.findUnique.data;
         if (data) {
-          stateDemografi.update.form = {
+          setFormData({
             pekerjaan: String(data.pekerjaan || ''),
             lakiLaki: Number(data.lakiLaki || 0),
             perempuan: Number(data.perempuan || 0),
-          };
+          });
         }
       })
       .catch((error) => {
@@ -47,9 +61,22 @@ function EditDemografiPekerjaan() {
       });
   }, [id]);
 
+  const handleChange =
+    (field: keyof FormData) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]:
+          field === 'lakiLaki' || field === 'perempuan'
+            ? Number(e.currentTarget.value)
+            : e.currentTarget.value,
+      }));
+    };
+
   const handleSubmit = async () => {
     try {
       stateDemografi.update.id = id;
+      stateDemografi.update.form = { ...formData };
       await stateDemografi.update.submit();
       toast.success('Data berhasil diperbarui');
       router.push('/admin/ekonomi/demografi-pekerjaan');
@@ -91,10 +118,8 @@ function EditDemografiPekerjaan() {
           <TextInput
             label="Pekerjaan"
             placeholder="Masukkan jenis pekerjaan"
-            value={stateDemografi.update.form.pekerjaan}
-            onChange={(e) =>
-              (stateDemografi.update.form.pekerjaan = e.currentTarget.value)
-            }
+            value={formData.pekerjaan}
+            onChange={handleChange('pekerjaan')}
             required
           />
 
@@ -102,12 +127,8 @@ function EditDemografiPekerjaan() {
             label="Jumlah Pekerja Laki-laki"
             type="number"
             placeholder="Masukkan jumlah pekerja laki-laki"
-            value={stateDemografi.update.form.lakiLaki}
-            onChange={(e) =>
-              (stateDemografi.update.form.lakiLaki = Number(
-                e.currentTarget.value
-              ))
-            }
+            value={formData.lakiLaki}
+            onChange={handleChange('lakiLaki')}
             required
           />
 
@@ -115,12 +136,8 @@ function EditDemografiPekerjaan() {
             label="Jumlah Pekerja Perempuan"
             type="number"
             placeholder="Masukkan jumlah pekerja perempuan"
-            value={stateDemografi.update.form.perempuan}
-            onChange={(e) =>
-              (stateDemografi.update.form.perempuan = Number(
-                e.currentTarget.value
-              ))
-            }
+            value={formData.perempuan}
+            onChange={handleChange('perempuan')}
             required
           />
 

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx

@@ -77,7 +77,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Pekerjaan"
             type="text"
-            value={stateDemografi.create.form.pekerjaan}
+            defaultValue={stateDemografi.create.form.pekerjaan}
             placeholder="Masukkan pekerjaan"
             onChange={(val) => {
               stateDemografi.create.form.pekerjaan = val.currentTarget.value;
@@ -87,7 +87,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Jumlah Pekerja Laki-Laki"
             type="number"
-            value={stateDemografi.create.form.lakiLaki}
+            defaultValue={stateDemografi.create.form.lakiLaki}
             placeholder="Masukkan jumlah pekerja laki-laki"
             onChange={(val) => {
               stateDemografi.create.form.lakiLaki = Number(val.currentTarget.value);
@@ -97,7 +97,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Jumlah Pekerja Perempuan"
             type="number"
-            value={stateDemografi.create.form.perempuan}
+            defaultValue={stateDemografi.create.form.perempuan}
             placeholder="Masukkan jumlah pekerja perempuan"
             onChange={(val) => {
               stateDemografi.create.form.perempuan = Number(val.currentTarget.value);

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx

@@ -3,10 +3,19 @@
 
 import jumlahPendudukMiskin from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Group,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 
@@ -17,6 +26,13 @@ function EditJumlahPendudukMiskin() {
 
   const id = params.id;
 
+  // 🔹 State lokal untuk form
+  const [formData, setFormData] = useState({
+    year: 0,
+    totalPoorPopulation: 0,
+  });
+
+  // 🔹 Load data awal dari backend
   useEffect(() => {
     if (!id) return;
 
@@ -25,10 +41,10 @@ function EditJumlahPendudukMiskin() {
         await stateJPM.findUnique.load(id);
         const data = stateJPM.findUnique.data;
         if (data) {
-          stateJPM.update.form = {
+          setFormData({
             year: data.year || 0,
             totalPoorPopulation: data.totalPoorPopulation || 0,
-          };
+          });
         }
       } catch (error) {
         console.error('Gagal memuat data:', error);
@@ -39,9 +55,21 @@ function EditJumlahPendudukMiskin() {
     loadData();
   }, [id]);
 
+  // 🔹 Handler input controlled
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: Number(value),
+    }));
+  };
+
+  // 🔹 Submit form
   const handleSubmit = async () => {
     try {
       stateJPM.update.id = id;
+      // update global state cuma saat submit
+      stateJPM.update.form = { ...formData };
+
       await stateJPM.update.submit();
       toast.success('Data jumlah penduduk miskin berhasil diperbarui!');
       router.push('/admin/ekonomi/jumlah-penduduk-miskin');
@@ -55,7 +83,12 @@ function EditJumlahPendudukMiskin() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -78,10 +111,8 @@ function EditJumlahPendudukMiskin() {
             placeholder="Masukkan tahun"
             type="number"
             required
-            value={stateJPM.update.form.year}
-            onChange={(val) => {
-              stateJPM.update.form.year = Number(val.currentTarget.value);
-            }}
+            value={formData.year}
+            onChange={(e) => handleChange('year', e.currentTarget.value)}
           />
 
           <TextInput
@@ -89,10 +120,10 @@ function EditJumlahPendudukMiskin() {
             placeholder="Masukkan jumlah penduduk miskin"
             type="number"
             required
-            value={stateJPM.update.form.totalPoorPopulation}
-            onChange={(val) => {
-              stateJPM.update.form.totalPoorPopulation = Number(val.currentTarget.value);
-            }}
+            value={formData.totalPoorPopulation}
+            onChange={(e) =>
+              handleChange('totalPoorPopulation', e.currentTarget.value)
+            }
           />
 
           <Group justify="right">

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/create/page.tsx

@@ -61,7 +61,7 @@ export default function CreateJumlahPendudukMiskin() {
           <TextInput
             label="Tahun"
             type="number"
-            value={stateJPM.create.form.year || ''}
+            defaultValue={stateJPM.create.form.year || ''}
             placeholder="Masukkan tahun"
             onChange={(e) => {
               const value = e.currentTarget.value;
@@ -73,7 +73,7 @@ export default function CreateJumlahPendudukMiskin() {
           <TextInput
             label="Jumlah Penduduk Miskin"
             type="number"
-            value={stateJPM.create.form.totalPoorPopulation}
+            defaultValue={stateJPM.create.form.totalPoorPopulation}
             placeholder="Masukkan jumlah penduduk miskin"
             onChange={(e) => {
               stateJPM.create.form.totalPoorPopulation = Number(e.currentTarget.value);

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx

@@ -1,11 +1,11 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
-/* eslint-disable react-hooks/exhaustive-deps */
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function EditGrafikBerdasarkanPendidikan() {
@@ -14,34 +14,59 @@ function EditGrafikBerdasarkanPendidikan() {
   const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
   const id = params.id;
 
+  // state lokal untuk form
+  const [formData, setFormData] = useState({
+    SD: '',
+    SMP: '',
+    SMA: '',
+    D3: '',
+    S1: '',
+  });
+
   useEffect(() => {
     if (id) {
       stategrafik.findUnique.load(id).then(() => {
         const data = stategrafik.findUnique.data;
         if (data) {
-          stategrafik.update.form = {
+          setFormData({
             SD: data.SD || '',
             SMP: data.SMP || '',
             SMA: data.SMA || '',
             D3: data.D3 || '',
             S1: data.S1 || '',
-          };
+          });
         }
       });
     }
   }, [id]);
 
+  const handleChange = (field: keyof typeof formData) => 
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: e.currentTarget.value,
+      }));
+    };
+
   const handleSubmit = async () => {
     stategrafik.update.id = id;
+    stategrafik.update.form = { ...formData }; // update global state pas submit aja
     await stategrafik.update.submit();
-    router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan');
+    router.push(
+      '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan'
+    );
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -63,36 +88,36 @@ function EditGrafikBerdasarkanPendidikan() {
             label="SD"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.SD}
-            onChange={(val) => (stategrafik.update.form.SD = val.currentTarget.value)}
+            value={formData.SD}
+            onChange={handleChange('SD')}
           />
           <TextInput
             label="SMP"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.SMP}
-            onChange={(val) => (stategrafik.update.form.SMP = val.currentTarget.value)}
+            value={formData.SMP}
+            onChange={handleChange('SMP')}
           />
           <TextInput
             label="SMA"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.SMA}
-            onChange={(val) => (stategrafik.update.form.SMA = val.currentTarget.value)}
+            value={formData.SMA}
+            onChange={handleChange('SMA')}
           />
           <TextInput
             label="D3"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.D3}
-            onChange={(val) => (stategrafik.update.form.D3 = val.currentTarget.value)}
+            value={formData.D3}
+            onChange={handleChange('D3')}
           />
           <TextInput
             label="S1"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.S1}
-            onChange={(val) => (stategrafik.update.form.S1 = val.currentTarget.value)}
+            value={formData.S1}
+            onChange={handleChange('S1')}
           />
 
           <Group justify="right">

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx

@@ -67,7 +67,7 @@ function CreateGrafikBerdasarkanPendidikan() {
             label="SD"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.SD}
+            defaultValue={stategrafik.create.form.SD}
             onChange={(val) => (stategrafik.create.form.SD = val.currentTarget.value)}
             required
           />
@@ -75,7 +75,7 @@ function CreateGrafikBerdasarkanPendidikan() {
             label="SMP"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.SMP}
+            defaultValue={stategrafik.create.form.SMP}
             onChange={(val) => (stategrafik.create.form.SMP = val.currentTarget.value)}
             required
           />
@@ -83,7 +83,7 @@ function CreateGrafikBerdasarkanPendidikan() {
             label="SMA"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.SMA}
+            defaultValue={stategrafik.create.form.SMA}
             onChange={(val) => (stategrafik.create.form.SMA = val.currentTarget.value)}
             required
           />
@@ -91,7 +91,7 @@ function CreateGrafikBerdasarkanPendidikan() {
             label="D3"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.D3}
+            defaultValue={stategrafik.create.form.D3}
             onChange={(val) => (stategrafik.create.form.D3 = val.currentTarget.value)}
             required
           />
@@ -99,7 +99,7 @@ function CreateGrafikBerdasarkanPendidikan() {
             label="S1"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.S1}
+            defaultValue={stategrafik.create.form.S1}
             onChange={(val) => (stategrafik.create.form.S1 = val.currentTarget.value)}
             required
           />

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -96,7 +96,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')}
+              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create')}
             >
               Tambah Baru
             </Button>

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx

@@ -2,39 +2,70 @@
 'use client';
 import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Group,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 
 function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
   const router = useRouter();
   const params = useParams() as { id: string };
-  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
+  const stategrafik = useProxy(
+    grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur
+  );
   const id = params.id;
 
+  // ✅ state lokal, controlled
+  const [formData, setFormData] = useState({
+    usia18_25: '',
+    usia26_35: '',
+    usia36_45: '',
+    usia46_keatas: '',
+  });
+
+  // load data dari global state -> masukin ke local state
   useEffect(() => {
     if (id) {
       stategrafik.findUnique.load(id).then(() => {
         const data = stategrafik.findUnique.data;
         if (data) {
-          stategrafik.update.form = {
+          setFormData({
             usia18_25: data.usia18_25 || '',
             usia26_35: data.usia26_35 || '',
             usia36_45: data.usia36_45 || '',
             usia46_keatas: data.usia46_keatas || '',
-          };
+          });
         }
       });
     }
   }, [id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // ✅ baru update global state pas submit
       stategrafik.update.id = id;
+      stategrafik.update.form = { ...formData };
+
       await stategrafik.update.submit();
+
       toast.success('Data grafik berhasil diperbarui!');
       router.push(
         '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia'
@@ -49,7 +80,12 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -71,40 +107,32 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
             label="Usia 18 - 25"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.usia18_25}
-            onChange={(val) => {
-              stategrafik.update.form.usia18_25 = val.currentTarget.value;
-            }}
+            value={formData.usia18_25}
+            onChange={(e) => handleChange('usia18_25', e.currentTarget.value)}
             required
           />
           <TextInput
             label="Usia 26 - 35"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.usia26_35}
-            onChange={(val) => {
-              stategrafik.update.form.usia26_35 = val.currentTarget.value;
-            }}
+            value={formData.usia26_35}
+            onChange={(e) => handleChange('usia26_35', e.currentTarget.value)}
             required
           />
           <TextInput
             label="Usia 36 - 45"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.usia36_45}
-            onChange={(val) => {
-              stategrafik.update.form.usia36_45 = val.currentTarget.value;
-            }}
+            value={formData.usia36_45}
+            onChange={(e) => handleChange('usia36_45', e.currentTarget.value)}
             required
           />
           <TextInput
             label="Usia 46 +"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.update.form.usia46_keatas}
-            onChange={(val) => {
-              stategrafik.update.form.usia46_keatas = val.currentTarget.value;
-            }}
+            value={formData.usia46_keatas}
+            onChange={(e) => handleChange('usia46_keatas', e.currentTarget.value)}
             required
           />
 

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx

@@ -66,7 +66,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
             label="Usia 18 - 25"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.usia18_25}
+            defaultValue={stategrafik.create.form.usia18_25}
             onChange={(val) => (stategrafik.create.form.usia18_25 = val.currentTarget.value)}
             required
           />
@@ -74,7 +74,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
             label="Usia 26 - 35"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.usia26_35}
+            defaultValue={stategrafik.create.form.usia26_35}
             onChange={(val) => (stategrafik.create.form.usia26_35 = val.currentTarget.value)}
             required
           />
@@ -82,7 +82,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
             label="Usia 36 - 45"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.usia36_45}
+            defaultValue={stategrafik.create.form.usia36_45}
             onChange={(val) => (stategrafik.create.form.usia36_45 = val.currentTarget.value)}
             required
           />
@@ -90,7 +90,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
             label="Usia 46 +"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stategrafik.create.form.usia46_keatas}
+            defaultValue={stategrafik.create.form.usia46_keatas}
             onChange={(val) => (stategrafik.create.form.usia46_keatas = val.currentTarget.value)}
             required
           />

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx

@@ -2,10 +2,21 @@
 'use client';
 import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Select, NumberInput } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Select,
+  NumberInput,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -24,40 +35,57 @@ function EditDetailDataPengangguran() {
   });
 
   // Hitung total & perubahan otomatis
-  const calculateTotalAndChange = async () => {
-    const total = formData.educatedUnemployment + formData.uneducatedUnemployment;
+  const calculateTotalAndChange = useCallback(
+    async (data: typeof formData) => {
+      const total = data.educatedUnemployment + data.uneducatedUnemployment;
 
-    let percentageChange = 0;
-    const monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
-    const currentMonthIndex = monthOrder.indexOf(formData.month);
+      let percentageChange = 0;
+      const monthOrder = [
+        'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+        'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
+      ];
+      const currentMonthIndex = monthOrder.indexOf(data.month);
 
-    if (currentMonthIndex !== -1) {
-      let prevMonthIndex = currentMonthIndex - 1;
-      let prevYear = formData.year;
+      if (currentMonthIndex !== -1) {
+        let prevMonthIndex = currentMonthIndex - 1;
+        let prevYear = data.year;
 
-      if (prevMonthIndex < 0) {
-        prevMonthIndex = 11;
-        prevYear--;
+        if (prevMonthIndex < 0) {
+          prevMonthIndex = 11;
+          prevYear--;
+        }
+
+        const prevMonth = monthOrder[prevMonthIndex];
+        const prevData = await stateDetail.findByMonthYear.load({
+          month: prevMonth,
+          year: prevYear,
+        });
+
+        if (prevData && prevData.totalUnemployment > 0) {
+          const change =
+            ((total - prevData.totalUnemployment) /
+              prevData.totalUnemployment) *
+            100;
+          percentageChange = parseFloat(change.toFixed(1));
+        }
       }
 
-      const prevMonth = monthOrder[prevMonthIndex];
-      const prevData = await stateDetail.findByMonthYear.load({ month: prevMonth, year: prevYear });
-
-      if (prevData && prevData.totalUnemployment > 0) {
-        const change = ((total - prevData.totalUnemployment) / prevData.totalUnemployment) * 100;
-        percentageChange = parseFloat(change.toFixed(1));
-      }
-    }
-
-    return { total, percentageChange };
-  };
+      return { total, percentageChange };
+    },
+    [stateDetail.findByMonthYear]
+  );
 
   const updateFormData = async (updates: Partial<typeof formData>) => {
     const newData = { ...formData, ...updates };
-    const { total, percentageChange } = await calculateTotalAndChange();
-    setFormData({ ...newData, totalUnemployment: total, percentageChange });
+    const { total, percentageChange } = await calculateTotalAndChange(newData);
+    setFormData({
+      ...newData,
+      totalUnemployment: total,
+      percentageChange,
+    });
   };
 
+  // Load detail hanya sekali
   useEffect(() => {
     const loadDetail = async () => {
       const id = params?.id as string;
@@ -68,45 +96,39 @@ function EditDetailDataPengangguran() {
         const data = stateDetail.findUnique.data;
 
         if (data) {
+          const yearValue =
+            data.year && typeof data.year === 'object' && 'getFullYear' in data.year
+              ? (data.year as Date).getFullYear()
+              : Number(data.year);
 
-          // Convert year from Date to number if needed
-          const yearValue = data.year && typeof data.year === 'object' && 'getFullYear' in data.year
-            ? (data.year as Date).getFullYear()
-            : Number(data.year);
+          stateDetail.update.id = id; // set ID untuk update
 
-          // Set the ID for update
-          stateDetail.update.id = id;
-
-          // Update Valtio state with converted year
-          stateDetail.update.form = {
-            ...data,
-            year: yearValue,
-            percentageChange: data.percentageChange || 0 // Ensure it's always a number
-          };
-
-          // Update local formData with converted year
           setFormData({
             month: data.month,
             year: yearValue,
             totalUnemployment: data.totalUnemployment,
             educatedUnemployment: data.educatedUnemployment,
             uneducatedUnemployment: data.uneducatedUnemployment,
-            percentageChange: data.percentageChange || 0, // Ensure it's always a number
+            percentageChange: data.percentageChange || 0,
           });
         }
       } catch (error) {
-        console.error("Error loading detail:", error);
-        toast.error("Gagal memuat data detail");
+        console.error('Error loading detail:', error);
+        toast.error('Gagal memuat data detail');
       }
     };
 
     loadDetail();
-  }, [params?.id]);
+  }, [params?.id, stateDetail.findUnique]);
 
   const handleSubmit = async () => {
-    const { total, percentageChange } = await calculateTotalAndChange();
+    const { total, percentageChange } = await calculateTotalAndChange(formData);
     try {
-      stateDetail.update.form = { ...formData, totalUnemployment: total, percentageChange };
+      stateDetail.update.form = {
+        ...formData,
+        totalUnemployment: total,
+        percentageChange,
+      };
       const success = await stateDetail.update.submit();
       if (success) {
         toast.success('Detail data pengangguran berhasil diperbarui!');
@@ -121,7 +143,12 @@ function EditDetailDataPengangguran() {
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
           <IconArrowBack color={colors['blue-button']} size={24} />
         </Button>
         <Title order={4} ml="sm">
@@ -129,11 +156,21 @@ function EditDetailDataPengangguran() {
         </Title>
       </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
         <Stack gap="md">
           <Select
             label="Bulan"
-            data={['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']}
+            data={[
+              'Jan','Feb','Mar','Apr','Mei','Jun',
+              'Jul','Agu','Sep','Okt','Nov','Des',
+            ]}
             value={formData.month}
             onChange={(val) => updateFormData({ month: val || '' })}
           />
@@ -141,21 +178,35 @@ function EditDetailDataPengangguran() {
             label="Tahun"
             value={formData.year}
             onChange={(val) => updateFormData({ year: Number(val) })}
+            required
           />
           <TextInput
             label="Pengangguran Terdidik"
             type="number"
             value={formData.educatedUnemployment}
-            onChange={(val) => updateFormData({ educatedUnemployment: Number(val.currentTarget.value) || 0 })}
+            onChange={(val) =>
+              updateFormData({ educatedUnemployment: Number(val.currentTarget.value) || 0 })
+            }
+            required
           />
           <TextInput
             label="Pengangguran Tidak Terdidik"
             type="number"
             value={formData.uneducatedUnemployment}
-            onChange={(val) => updateFormData({ uneducatedUnemployment: Number(val.currentTarget.value) || 0 })}
+            onChange={(val) =>
+              updateFormData({ uneducatedUnemployment: Number(val.currentTarget.value) || 0 })
+            }
+            required
           />
-          <Text fz="sm" fw={500}>Total Otomatis: {formData.totalUnemployment}</Text>
-          <Text fz="sm" fw={500}>Perubahan Otomatis: {formData.percentageChange !== null ? `${formData.percentageChange}%` : '-'}</Text>
+          <Text fz="sm" fw={500}>
+            Total Otomatis: {formData.totalUnemployment}
+          </Text>
+          <Text fz="sm" fw={500}>
+            Perubahan Otomatis:{' '}
+            {formData.percentageChange !== null
+              ? `${formData.percentageChange}%`
+              : '-'}
+          </Text>
 
           <Group justify="right">
             <Button
@@ -178,4 +229,3 @@ function EditDetailDataPengangguran() {
 }
 
 export default EditDetailDataPengangguran;
-

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx

@@ -26,15 +26,16 @@ function EditLowonganKerja() {
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    posisi: lowonganKerjaState.update.form.posisi,
-    namaPerusahaan: lowonganKerjaState.update.form.namaPerusahaan,
-    lokasi: lowonganKerjaState.update.form.lokasi,
-    tipePekerjaan: lowonganKerjaState.update.form.tipePekerjaan,
-    gaji: lowonganKerjaState.update.form.gaji,
-    deskripsi: lowonganKerjaState.update.form.deskripsi,
-    kualifikasi: lowonganKerjaState.update.form.kualifikasi,
+    posisi: '',
+    namaPerusahaan: '',
+    lokasi: '',
+    tipePekerjaan: '',
+    gaji: '',
+    deskripsi: '',
+    kualifikasi: '',
   });
 
+  // load data sekali aja ketika mount / id berubah
   useEffect(() => {
     const loadLowongan = async () => {
       const id = params?.id as string;
@@ -62,14 +63,17 @@ function EditLowonganKerja() {
     loadLowongan();
   }, [params?.id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
       lowonganState.update.id = params?.id as string;
-
-      lowonganState.update.form = {
-        ...lowonganState.update.form,
-        ...formData,
-      };
+      lowonganState.update.form = { ...formData };
 
       await lowonganState.update.update();
       toast.success("Lowongan kerja berhasil diperbarui!");
@@ -108,7 +112,7 @@ function EditLowonganKerja() {
             label="Posisi"
             placeholder="Masukkan posisi"
             value={formData.posisi}
-            onChange={(e) => setFormData({ ...formData, posisi: e.target.value })}
+            onChange={(e) => handleChange("posisi", e.target.value)}
             required
           />
 
@@ -116,7 +120,7 @@ function EditLowonganKerja() {
             label="Nama Perusahaan"
             placeholder="Masukkan nama perusahaan"
             value={formData.namaPerusahaan}
-            onChange={(e) => setFormData({ ...formData, namaPerusahaan: e.target.value })}
+            onChange={(e) => handleChange("namaPerusahaan", e.target.value)}
             required
           />
 
@@ -124,7 +128,7 @@ function EditLowonganKerja() {
             label="Lokasi"
             placeholder="Masukkan lokasi"
             value={formData.lokasi}
-            onChange={(e) => setFormData({ ...formData, lokasi: e.target.value })}
+            onChange={(e) => handleChange("lokasi", e.target.value)}
             required
           />
 
@@ -132,7 +136,7 @@ function EditLowonganKerja() {
             label="Tipe Pekerjaan"
             placeholder="Masukkan tipe pekerjaan"
             value={formData.tipePekerjaan}
-            onChange={(e) => setFormData({ ...formData, tipePekerjaan: e.target.value })}
+            onChange={(e) => handleChange("tipePekerjaan", e.target.value)}
             required
           />
 
@@ -140,7 +144,7 @@ function EditLowonganKerja() {
             label="Gaji (per bulan)"
             placeholder="Masukkan gaji"
             value={formData.gaji}
-            onChange={(e) => setFormData({ ...formData, gaji: e.target.value })}
+            onChange={(e) => handleChange("gaji", e.target.value)}
             required
           />
 
@@ -150,7 +154,7 @@ function EditLowonganKerja() {
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              onChange={(val) => handleChange("deskripsi", val)}
             />
           </Box>
 
@@ -160,7 +164,7 @@ function EditLowonganKerja() {
             </Text>
             <EditEditor
               value={formData.kualifikasi}
-              onChange={(val) => setFormData({ ...formData, kualifikasi: val })}
+              onChange={(val) => handleChange("kualifikasi", val)}
             />
           </Box>
 

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/page.tsx

@@ -94,12 +94,12 @@ function DetailLowonganKerjaLokal() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
               </Box>
 
               <Box>
                 <Text fz="lg" fw="bold">Kualifikasi</Text>
-                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }} />
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }} />
               </Box>
 
               <Group gap="sm" mt="sm">

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx

@@ -69,7 +69,7 @@ function CreateLowonganKerja() {
       >
         <Stack gap="md">
           <TextInput
-            value={lowonganState.create.form.posisi}
+            defaultValue={lowonganState.create.form.posisi}
             onChange={(val) =>
               (lowonganState.create.form.posisi = val.target.value)
             }
@@ -78,7 +78,7 @@ function CreateLowonganKerja() {
             required
           />
           <TextInput
-            value={lowonganState.create.form.namaPerusahaan}
+            defaultValue={lowonganState.create.form.namaPerusahaan}
             onChange={(val) =>
               (lowonganState.create.form.namaPerusahaan = val.target.value)
             }
@@ -87,7 +87,7 @@ function CreateLowonganKerja() {
             required
           />
           <TextInput
-            value={lowonganState.create.form.lokasi}
+            defaultValue={lowonganState.create.form.lokasi}
             onChange={(val) =>
               (lowonganState.create.form.lokasi = val.target.value)
             }
@@ -96,7 +96,7 @@ function CreateLowonganKerja() {
             required
           />
           <TextInput
-            value={lowonganState.create.form.tipePekerjaan}
+            defaultValue={lowonganState.create.form.tipePekerjaan}
             onChange={(val) =>
               (lowonganState.create.form.tipePekerjaan = val.target.value)
             }
@@ -105,7 +105,7 @@ function CreateLowonganKerja() {
             required
           />
           <TextInput
-            value={lowonganState.create.form.gaji}
+            defaultValue={lowonganState.create.form.gaji}
             onChange={(val) =>
               (lowonganState.create.form.gaji = val.target.value)
             }

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx

@@ -25,9 +25,8 @@ function EditKategoriProduk() {
   const id = params?.id as string;
   const statePasar = useProxy(pasarDesaState.kategoriProduk);
 
-  const [formData, setFormData] = useState({
-    nama: '',
-  });
+  const [formData, setFormData] = useState({ nama: '' });
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const loadKategoriProduk = async () => {
@@ -37,21 +36,30 @@ function EditKategoriProduk() {
         const data = await statePasar.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
+          // simpan id ke state global hanya untuk referensi
           statePasar.edit.id = id;
-          setFormData({
-            nama: data.nama || '',
-          });
+
+          // simpan data ke state lokal
+          setFormData({ nama: data.nama || '' });
         }
       } catch (error) {
         console.error('Error loading kategori produk:', error);
         toast.error('Gagal memuat data kategori produk');
+      } finally {
+        setLoading(false);
       }
     };
 
     loadKategoriProduk();
   }, [id]);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
   const handleSubmit = async () => {
     try {
       if (!formData.nama.trim()) {
@@ -59,10 +67,8 @@ function EditKategoriProduk() {
         return;
       }
 
-      statePasar.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
+      // update global state hanya saat submit
+      statePasar.edit.form = { nama: formData.nama.trim() };
       if (!statePasar.edit.id) {
         statePasar.edit.id = id; // fallback
       }
@@ -79,12 +85,21 @@ function EditKategoriProduk() {
     }
   };
 
+  if (loading) {
+    return <Text>Loading...</Text>;
+  }
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header dengan tombol back */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
@@ -104,10 +119,11 @@ function EditKategoriProduk() {
       >
         <Stack gap="md">
           <TextInput
+            name="nama"
             label={<Text fw="bold" fz="sm">Nama Kategori Produk</Text>}
             placeholder="Masukkan nama kategori produk"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={handleChange}
             required
           />
 

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/create/page.tsx

@@ -74,7 +74,7 @@ function CreateKategoriProduk() {
           <TextInput
             label="Nama Kategori Produk"
             placeholder="Masukkan nama kategori produk"
-            value={statePasar.create.form.nama || ''}
+            defaultValue={statePasar.create.form.nama || ''}
             onChange={(e) => (statePasar.create.form.nama = e.target.value)}
             required
           />

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
@@ -24,6 +24,15 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+type FormData = {
+  nama: string;
+  harga: number;
+  alamatUsaha: string;
+  imageId: string;
+  rating: number;
+  kategoriId: string[];
+};
+
 function EditPasarDesa() {
   const pasarState = useProxy(pasarDesaState);
   const router = useRouter();
@@ -31,17 +40,19 @@ function EditPasarDesa() {
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [formData, setFormData] = useState({
-    nama: pasarState.pasarDesa.edit.form.nama || '',
-    harga: pasarState.pasarDesa.edit.form.harga || 0,
-    alamatUsaha: pasarState.pasarDesa.edit.form.alamatUsaha || '',
-    imageId: pasarState.pasarDesa.edit.form.imageId || '',
-    rating: pasarState.pasarDesa.edit.form.rating || 0,
-    kategoriId: pasarState.pasarDesa.edit.form.kategoriId || [],
+  const [formData, setFormData] = useState<FormData>({
+    nama: '',
+    harga: 0,
+    alamatUsaha: '',
+    imageId: '',
+    rating: 0,
+    kategoriId: [],
   });
 
+  // load data awal
   useEffect(() => {
     pasarState.kategoriProduk.findMany.load();
+
     const loadPasarDesa = async () => {
       const id = params?.id as string;
       if (!id) return;
@@ -70,19 +81,27 @@ function EditPasarDesa() {
     loadPasarDesa();
   }, [params?.id]);
 
+  const handleChange = (key: keyof FormData, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
-      pasarState.pasarDesa.edit.form = { ...pasarState.pasarDesa.edit.form, ...formData };
-
+      // upload image kalau ada file baru
+      let imageId = formData.imageId;
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-
         if (!uploaded?.id) return toast.error('Gagal upload gambar');
-
-        pasarState.pasarDesa.edit.form.imageId = uploaded.id;
+        imageId = uploaded.id;
       }
 
+      // update global state hanya saat submit
+      pasarState.pasarDesa.edit.form = {
+        ...formData,
+        imageId,
+      };
+
       await pasarState.pasarDesa.edit.update();
       toast.success('Pasar desa berhasil diperbarui!');
       router.push('/admin/ekonomi/pasar-desa/produk-pasar-desa');
@@ -114,6 +133,7 @@ function EditPasarDesa() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          {/* Dropzone upload */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
               Gambar Produk
@@ -170,11 +190,12 @@ function EditPasarDesa() {
             )}
           </Box>
 
+          {/* Controlled Inputs */}
           <TextInput
             label="Nama Produk"
             placeholder="Masukkan nama produk"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -183,7 +204,7 @@ function EditPasarDesa() {
             label="Harga Produk"
             placeholder="Masukkan harga produk"
             value={formData.harga}
-            onChange={(e) => setFormData({ ...formData, harga: Number(e.target.value) })}
+            onChange={(e) => handleChange('harga', Number(e.target.value))}
             required
           />
 
@@ -195,7 +216,7 @@ function EditPasarDesa() {
             label="Rating Produk"
             placeholder="Masukkan rating produk (0-5)"
             value={formData.rating}
-            onChange={(e) => setFormData({ ...formData, rating: Number(e.target.value) })}
+            onChange={(e) => handleChange('rating', Number(e.target.value))}
             required
           />
 
@@ -203,7 +224,7 @@ function EditPasarDesa() {
             label="Alamat Usaha"
             placeholder="Masukkan alamat usaha"
             value={formData.alamatUsaha}
-            onChange={(e) => setFormData({ ...formData, alamatUsaha: e.target.value })}
+            onChange={(e) => handleChange('alamatUsaha', e.target.value)}
             required
           />
 
@@ -211,7 +232,7 @@ function EditPasarDesa() {
             label="Kategori Produk"
             placeholder="Pilih kategori produk"
             value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val })}
+            onChange={(val) => handleChange('kategoriId', val)}
             data={
               pasarState.kategoriProduk.findMany.data?.map((v) => ({
                 value: v.id,

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx

@@ -144,7 +144,7 @@ export default function CreatePasarDesa() {
           <TextInput
             label="Nama Produk"
             placeholder="Masukkan nama produk"
-            value={statePasar.pasarDesa.create.form.nama}
+            defaultValue={statePasar.pasarDesa.create.form.nama}
             onChange={(e) => (statePasar.pasarDesa.create.form.nama = e.target.value)}
             required
           />
@@ -154,7 +154,7 @@ export default function CreatePasarDesa() {
             type="number"
             label="Harga Produk"
             placeholder="Masukkan harga produk"
-            value={statePasar.pasarDesa.create.form.harga}
+            defaultValue={statePasar.pasarDesa.create.form.harga}
             onChange={(e) => (statePasar.pasarDesa.create.form.harga = Number(e.target.value))}
             required
           />
@@ -167,7 +167,7 @@ export default function CreatePasarDesa() {
             step={0.1}
             label="Rating Produk (0–5)"
             placeholder="Masukkan rating produk"
-            value={statePasar.pasarDesa.create.form.rating}
+            defaultValue={statePasar.pasarDesa.create.form.rating}
             onChange={(e) => {
               const value = Number(e.target.value);
               if (value >= 0 && value <= 5) {
@@ -180,7 +180,7 @@ export default function CreatePasarDesa() {
           <TextInput
             label="Alamat Usaha"
             placeholder="Masukkan alamat usaha"
-            value={statePasar.pasarDesa.create.form.alamatUsaha}
+            defaultValue={statePasar.pasarDesa.create.form.alamatUsaha}
             onChange={(e) => (statePasar.pasarDesa.create.form.alamatUsaha = e.target.value)}
           />
 

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
@@ -19,53 +18,95 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 
+type FormData = {
+  nama: string;
+  deskripsi: string;
+  icon: string;
+  statistik: {
+    tahun: string;
+    jumlah: string;
+  };
+};
+
 function EditProgramKemiskinan() {
   const router = useRouter();
   const params = useParams() as { id: string };
   const stateProgram = useProxy(programKemiskinanState);
   const id = params.id;
 
+  const [formData, setFormData] = useState<FormData>({
+    nama: '',
+    deskripsi: '',
+    icon: '',
+    statistik: {
+      tahun: '',
+      jumlah: '',
+    },
+  });
+
+  // load data ke local state sekali aja
   useEffect(() => {
     if (id) {
-      stateProgram.findUnique.load(id).then(() => {
-        const data = stateProgram.findUnique.data;
-        if (data) {
-          stateProgram.update.form = {
-            nama: data.nama || '',
-            deskripsi: data.deskripsi || '',
-            icon: data.icon || '',
-            statistik: {
-              tahun: data.statistik?.tahun?.toString() || '',
-              jumlah: data.statistik?.jumlah?.toString() || '',
-            },
-          };
-        }
-      }).catch((err) => {
-        console.error("Error load data:", err);
-        toast.error("Gagal mengambil data program");
-      });
+      stateProgram.findUnique
+        .load(id)
+        .then(() => {
+          const data = stateProgram.findUnique.data;
+          if (data) {
+            setFormData({
+              nama: data.nama || '',
+              deskripsi: data.deskripsi || '',
+              icon: data.icon || '',
+              statistik: {
+                tahun: data.statistik?.tahun?.toString() || '',
+                jumlah: data.statistik?.jumlah?.toString() || '',
+              },
+            });
+          }
+        })
+        .catch((err) => {
+          console.error('Error load data:', err);
+          toast.error('Gagal mengambil data program');
+        });
     }
-  }, [id]);
+  }, [id, stateProgram.findUnique]);
+
+  const handleChange = (field: keyof FormData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleStatistikChange = (field: keyof FormData['statistik'], value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      statistik: {
+        ...prev.statistik,
+        [field]: value,
+      },
+    }));
+  };
 
   const handleSubmit = async () => {
     try {
       stateProgram.update.id = id;
+      stateProgram.update.form = formData;
       await stateProgram.update.update();
-      toast.success("Program berhasil diperbarui!");
+      toast.success('Program berhasil diperbarui!');
       router.push('/admin/ekonomi/program-kemiskinan');
     } catch (error) {
-      console.error("Error update program:", error);
-      toast.error("Terjadi kesalahan saat memperbarui program");
+      console.error('Error update program:', error);
+      toast.error('Terjadi kesalahan saat memperbarui program');
     }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan tombol kembali */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
@@ -92,10 +133,8 @@ function EditProgramKemiskinan() {
       >
         <Stack gap="md">
           <TextInput
-            value={stateProgram.update.form.nama}
-            onChange={(e) => {
-              stateProgram.update.form.nama = e.target.value;
-            }}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
             label={<Text fw="bold" fz="sm">Judul Program</Text>}
             placeholder="Masukkan judul program"
             required
@@ -106,10 +145,8 @@ function EditProgramKemiskinan() {
               Deskripsi
             </Text>
             <EditEditor
-              value={stateProgram.update.form.deskripsi}
-              onChange={(val) => {
-                stateProgram.update.form.deskripsi = val;
-              }}
+              value={formData.deskripsi}
+              onChange={(val) => handleChange('deskripsi', val)}
             />
           </Box>
 
@@ -118,10 +155,8 @@ function EditProgramKemiskinan() {
               Ikon Program Kreatif Desa
             </Text>
             <SelectIconProgramEdit
-              value={stateProgram.update.form.icon as IconKey}
-              onChange={(value) => {
-                stateProgram.update.form.icon = value;
-              }}
+              value={formData.icon as IconKey}
+              onChange={(val) => handleChange('icon', val)}
             />
           </Box>
 
@@ -131,10 +166,8 @@ function EditProgramKemiskinan() {
             </Text>
             <TextInput
               type="number"
-              value={stateProgram.update.form.statistik.jumlah}
-              onChange={(e) => {
-                stateProgram.update.form.statistik.jumlah = e.target.value;
-              }}
+              value={formData.statistik.jumlah}
+              onChange={(e) => handleStatistikChange('jumlah', e.target.value)}
               label="Jumlah Masyarakat Miskin"
               placeholder="Masukkan jumlah masyarakat miskin"
               required
@@ -142,10 +175,8 @@ function EditProgramKemiskinan() {
 
             <TextInput
               type="number"
-              value={stateProgram.update.form.statistik.tahun}
-              onChange={(e) => {
-                stateProgram.update.form.statistik.tahun = e.target.value;
-              }}
+              value={formData.statistik.tahun}
+              onChange={(e) => handleStatistikChange('tahun', e.target.value)}
               label="Tahun"
               placeholder="Masukkan tahun"
               required

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/page.tsx

@@ -90,6 +90,7 @@ function DetailProgramKemiskinan() {
                   fz="md"
                   c="dimmed"
                   dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx

@@ -93,7 +93,7 @@ function CreateProgramKemiskinan() {
           <TextInput
             label="Judul Program"
             placeholder="Masukkan judul program"
-            value={programState.create.form.nama}
+            defaultValue={programState.create.form.nama}
             onChange={(val) => (programState.create.form.nama = val.target.value)}
             required
           />
@@ -128,7 +128,7 @@ function CreateProgramKemiskinan() {
           <Group grow>
             <TextInput
               type="number"
-              value={programState.create.form.statistik.jumlah}
+              defaultValue={programState.create.form.statistik.jumlah}
               onChange={(val) =>
                 (programState.create.form.statistik.jumlah = val.target.value)
               }
@@ -138,7 +138,7 @@ function CreateProgramKemiskinan() {
             />
             <TextInput
               type="number"
-              value={programState.create.form.statistik.tahun}
+              defaultValue={programState.create.form.statistik.tahun}
               onChange={(val) =>
                 (programState.create.form.statistik.tahun = val.target.value)
               }

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx

@@ -16,7 +16,7 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
@@ -28,28 +28,46 @@ function EditSektorUnggulanDesa() {
 
   const id = params.id;
 
+  // state lokal buat form
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    value: 0,
+  });
+
   // Load data saat komponen mount
   useEffect(() => {
     if (id) {
-      stateGrafik.findUnique.load(id).then(() => {
-        const data = stateGrafik.findUnique.data;
-        if (data) {
-          stateGrafik.update.form = {
-            name: data.name || '',
-            description: data.description || '',
-            value: data.value || 0,
-          };
-        }
-      }).catch((err) => {
-        console.error('Error load sektor unggulan:', err);
-        toast.error('Gagal mengambil data sektor unggulan');
-      });
+      stateGrafik.findUnique
+        .load(id)
+        .then(() => {
+          const data = stateGrafik.findUnique.data;
+          if (data) {
+            setFormData({
+              name: data.name || '',
+              description: data.description || '',
+              value: data.value || 0,
+            });
+          }
+        })
+        .catch((err) => {
+          console.error('Error load sektor unggulan:', err);
+          toast.error('Gagal mengambil data sektor unggulan');
+        });
     }
   }, [id]);
 
+  const handleChange =
+    (field: keyof typeof formData) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = field === 'value' ? Number(e.currentTarget.value) : e.currentTarget.value;
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
   const handleSubmit = async () => {
     try {
       stateGrafik.update.id = id;
+      stateGrafik.update.form = { ...formData }; // update global pas submit
       await stateGrafik.update.submit();
       toast.success('Sektor unggulan berhasil diperbarui!');
       router.push('/admin/ekonomi/sektor-unggulan-desa');
@@ -89,10 +107,8 @@ function EditSektorUnggulanDesa() {
           <TextInput
             label="Nama Sektor Unggulan"
             placeholder="Masukkan nama sektor unggulan"
-            value={stateGrafik.update.form.name}
-            onChange={(val) => {
-              stateGrafik.update.form.name = val.currentTarget.value;
-            }}
+            value={formData.name}
+            onChange={handleChange('name')}
             required
           />
           <Box>
@@ -100,20 +116,18 @@ function EditSektorUnggulanDesa() {
               Konten
             </Text>
             <EditEditor
-              value={stateGrafik.update.form.description}
-              onChange={(htmlContent) => {
-                stateGrafik.update.form.description = htmlContent;
-              }}
+              value={formData.description}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, description: htmlContent }))
+              }
             />
           </Box>
           <TextInput
             label="Jumlah"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stateGrafik.update.form.value}
-            onChange={(val) => {
-              stateGrafik.update.form.value = Number(val.currentTarget.value);
-            }}
+            value={formData.value}
+            onChange={handleChange('value')}
             required
           />
 

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/page.tsx

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

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx

@@ -78,7 +78,7 @@ function CreateSektorUnggulanDesa() {
           <TextInput
             label="Nama Sektor Unggulan"
             placeholder="Masukkan nama sektor unggulan"
-            value={stateGrafik.create.form.name}
+            defaultValue={stateGrafik.create.form.name}
             onChange={(e) => {
               stateGrafik.create.form.name = e.currentTarget.value;
             }}
@@ -101,7 +101,7 @@ function CreateSektorUnggulanDesa() {
             label="Jumlah"
             type="number"
             placeholder="Masukkan jumlah"
-            value={stateGrafik.create.form.value}
+            defaultValue={stateGrafik.create.form.value}
             onChange={(e) => {
               stateGrafik.create.form.value = Number(e.currentTarget.value);
             }}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/[id]/page.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 
 import { useEffect, useState } from 'react';
@@ -20,36 +19,49 @@ export default function EditHubunganOrganisasi() {
     tipe: '',
   });
 
+  // load data awal sekali aja
   useEffect(() => {
     strukturorganisasiState.pegawai.findMany.load();
 
     if (id) {
-      state.edit.load(id).then(data => {
+      (async () => {
+        const data = await state.edit.load(id);
         if (data) {
           setForm({
-            atasanId: data.atasanId,
-            bawahanId: data.bawahanId,
-            tipe: data.tipe || '',
+            atasanId: data.atasanId ?? '',
+            bawahanId: data.bawahanId ?? '',
+            tipe: data.tipe ?? '',
           });
         }
-      });
+      })();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
+  const handleChange = (field: keyof typeof form, value: string) => {
+    setForm(prev => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
     if (!form.atasanId || !form.bawahanId) {
-      toast.warn("Atasan dan bawahan harus diisi");
+      toast.warn('Atasan dan bawahan harus diisi');
       return;
     }
 
+    // update global state cuma pas submit
     state.edit.id = id;
     state.edit.form = form;
 
     const result = await state.edit.update();
 
     if (result) {
-      toast.success("Data berhasil diperbarui");
-      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi');
+      toast.success('Data berhasil diperbarui');
+      router.push(
+        '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi'
+      );
     }
   };
 
@@ -58,35 +70,45 @@ export default function EditHubunganOrganisasi() {
       <Paper p="md" w={{ base: '100%', md: '50%' }}>
         <Stack>
           <Title order={3}>Edit Hubungan Organisasi</Title>
+
           <Select
             label="Atasan"
             placeholder="Pilih atasan"
             searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
+            data={
+              pegawaiList?.map(p => ({
+                value: p.id,
+                label: p.namaLengkap,
+              })) || []
+            }
             value={form.atasanId}
-            onChange={(val) => setForm({ ...form, atasanId: val || '' })}
+            onChange={val => handleChange('atasanId', val || '')}
           />
+
           <Select
             label="Bawahan"
             placeholder="Pilih bawahan"
             searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
+            data={
+              pegawaiList?.map(p => ({
+                value: p.id,
+                label: p.namaLengkap,
+              })) || []
+            }
             value={form.bawahanId}
-            onChange={(val) => setForm({ ...form, bawahanId: val || '' })}
+            onChange={val => handleChange('bawahanId', val || '')}
           />
+
           <TextInput
             label="Tipe"
             placeholder="Contoh: langsung_melapor"
             value={form.tipe}
-            onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
+            onChange={e => handleChange('tipe', e.currentTarget.value)}
           />
-          <Button onClick={handleSubmit} color="blue">Simpan</Button>
+
+          <Button onClick={handleSubmit} color="blue">
+            Simpan
+          </Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create/page.tsx

@@ -67,7 +67,7 @@ export default function CreateHubunganOrganisasi() {
           <TextInput
             label="Tipe"
             placeholder="Contoh: langsung_melapor"
-            value={form.tipe}
+            defaultValue={form.tipe}
             onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
           />
           <Button onClick={handleSubmit} color="blue">Simpan</Button>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
@@ -41,20 +42,28 @@ interface PegawaiFormData {
 export default function EditPegawai() {
   const router = useRouter();
   const { id } = useParams<{ id: string }>();
-  const [previewImage, setPreviewImage] = useState<PreviewImage | string | null>(null);
   const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
+
+  const [previewImage, setPreviewImage] = useState<PreviewImage | string | null>(null);
   const [formData, setFormData] = useState<PegawaiFormData>({
-    namaLengkap: "",
-    gelarAkademik: "",
-    imageId: "",
-    tanggalMasuk: "",
-    email: "",
-    telepon: "",
-    alamat: "",
-    posisiId: "",
+    namaLengkap: '',
+    gelarAkademik: '',
+    imageId: '',
+    tanggalMasuk: '',
+    email: '',
+    telepon: '',
+    alamat: '',
+    posisiId: '',
     isActive: true,
   });
 
+  // helper buat update state formData
+  const updateForm = (field: keyof PegawaiFormData, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
 
   // Format date to YYYY-MM-DD for date input
   const formatDateForInput = (dateString: string) => {
@@ -65,32 +74,29 @@ export default function EditPegawai() {
 
   useEffect(() => {
     strukturorganisasiState.posisiOrganisasi.findMany.load();
+
     const loadPegawai = async () => {
       try {
         const data = await stateOrganisasi.edit.load(id);
         if (data) {
           setFormData({
-            namaLengkap: data.namaLengkap || "",
-            gelarAkademik: data.gelarAkademik || "",
-            imageId: data.imageId || "",
-            tanggalMasuk: data.tanggalMasuk || "",
-            email: data.email || "",
-            telepon: data.telepon || "",
-            alamat: data.alamat || "",
-            posisiId: data.posisiId || "",
-            isActive: data.isActive ?? true, // pakai nullish coalescing
+            namaLengkap: data.namaLengkap || '',
+            gelarAkademik: data.gelarAkademik || '',
+            imageId: data.imageId || '',
+            tanggalMasuk: data.tanggalMasuk || '',
+            email: data.email || '',
+            telepon: data.telepon || '',
+            alamat: data.alamat || '',
+            posisiId: data.posisiId || '',
+            isActive: data.isActive ?? true,
           });
 
-          if (data.image?.link) {
-            setPreviewImage(data.image.link);
-          } else {
-            setPreviewImage(null);
-          }
+          setPreviewImage(data.image?.link || null);
         }
       } catch (error) {
-        console.error("Error loading pegawai:", error);
+        console.error('Error loading pegawai:', error);
         toast.error(
-          error instanceof Error ? error.message : "Gagal mengambil data pegawai"
+          error instanceof Error ? error.message : 'Gagal mengambil data pegawai'
         );
       }
     };
@@ -106,18 +112,16 @@ export default function EditPegawai() {
       }
 
       stateOrganisasi.edit.form = {
+        ...formData,
         namaLengkap: formData.namaLengkap.trim(),
         gelarAkademik: formData.gelarAkademik.trim(),
-        imageId: formData.imageId ? formData.imageId.trim() : "",
+        imageId: formData.imageId ? formData.imageId.trim() : '',
         tanggalMasuk: formData.tanggalMasuk.trim(),
         email: formData.email.trim(),
         telepon: formData.telepon.trim(),
         alamat: formData.alamat.trim(),
         posisiId: formData.posisiId.trim(),
-        isActive: formData.isActive,
       };
-    
-
 
       if (id && !stateOrganisasi.edit.id) {
         stateOrganisasi.edit.id = id;
@@ -126,67 +130,90 @@ export default function EditPegawai() {
       const success = await stateOrganisasi.edit.submit();
 
       if (success) {
-        router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+        router.push(
+          '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai'
+        );
       }
     } catch (error) {
-      console.error("Error updating pegawai:", error);
-      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
+      console.error('Error updating pegawai:', error);
+      toast.error(
+        error instanceof Error ? error.message : 'Gagal memperbarui data pegawai'
+      );
     }
-
-
-
   };
 
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+        <Button onClick={() => router.back()} variant="subtle" color={'blue'}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
       <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
+        <Stack gap={'xs'}>
           <Title order={4}>Edit Data Pegawai</Title>
+
           <TextInput
             label="Nama Lengkap"
             placeholder="Masukkan nama lengkap"
             value={formData.namaLengkap}
-            onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
+            onChange={(e) => updateForm('namaLengkap', e.target.value)}
           />
+
           <TextInput
             label="Gelar Akademik"
             placeholder="Contoh: S.Kom"
             value={formData.gelarAkademik}
-            onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
+            onChange={(e) => updateForm('gelarAkademik', e.target.value)}
           />
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
+            <Text fz={'md'} fw={'bold'}>
+              Gambar
+            </Text>
+            <Box>
               <Dropzone
                 onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
+                  const file = files[0];
                   if (file) {
                     setPreviewImage({
                       file,
-                      preview: URL.createObjectURL(file)
+                      preview: URL.createObjectURL(file),
                     });
                   }
                 }}
-                maxSize={5 * 1024 ** 2} // 5MB
+                maxSize={5 * 1024 ** 2}
                 accept={{
-                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+                  'image/*': ['.jpeg', '.jpg', '.png', '.webp'],
                 }}
               >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Group
+                  justify="center"
+                  gap="xl"
+                  mih={220}
+                  style={{ pointerEvents: 'none' }}
+                >
                   <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    <IconUpload
+                      size={52}
+                      color="var(--mantine-color-blue-6)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Accept>
                   <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    <IconX
+                      size={52}
+                      color="var(--mantine-color-red-6)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Reject>
                   <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    <IconPhoto
+                      size={52}
+                      color="var(--mantine-color-dimmed)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Idle>
 
                   <div>
@@ -194,14 +221,20 @@ export default function EditPegawai() {
                       Drag images here or click to select files
                     </Text>
                     <Text size="sm" c="dimmed" inline mt={7}>
-                      Attach as many files as you like, each file should not exceed 5mb
+                      Attach as many files as you like, each file should not
+                      exceed 5mb
                     </Text>
                   </div>
                 </Group>
               </Dropzone>
+
               {previewImage && (
                 <Image
-                  src={typeof previewImage === 'string' ? previewImage : previewImage?.preview}
+                  src={
+                    typeof previewImage === 'string'
+                      ? previewImage
+                      : previewImage?.preview
+                  }
                   alt="Preview"
                   width={280}
                   height={180}
@@ -213,70 +246,70 @@ export default function EditPegawai() {
               )}
             </Box>
           </Box>
+
           <TextInput
             label="Tanggal Masuk"
             type="date"
             placeholder="Contoh: 2022-01-01"
             value={formatDateForInput(formData.tanggalMasuk)}
-            onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
+            onChange={(e) => updateForm('tanggalMasuk', e.target.value)}
           />
+
           <TextInput
             label="Email"
             placeholder="Contoh: email@example.com"
             value={formData.email}
-            onChange={(e) => (formData.email = e.currentTarget.value)}
+            onChange={(e) => updateForm('email', e.currentTarget.value)}
           />
+
           <TextInput
             label="Telepon"
             placeholder="Contoh: 08123456789"
             value={formData.telepon}
-            onChange={(e) => (formData.telepon = e.currentTarget.value)}
+            onChange={(e) => updateForm('telepon', e.currentTarget.value)}
           />
+
           <TextInput
             label="Alamat"
             placeholder="Contoh: Jl. Contoh No. 1"
             value={formData.alamat}
-            onChange={(e) => (formData.alamat = e.currentTarget.value)}
+            onChange={(e) => updateForm('alamat', e.currentTarget.value)}
           />
+
           <Select
             label="Posisi"
             placeholder="Pilih posisi"
             data={
-              strukturorganisasiState.posisiOrganisasi.findMany.data?.map((p) => ({
-                value: p.id, // harus string
-                label: p.nama,
-              })) || []
+              strukturorganisasiState.posisiOrganisasi.findMany.data?.map(
+                (p) => ({
+                  value: p.id,
+                  label: p.nama,
+                })
+              ) || []
             }
             value={formData.posisiId}
             onChange={(value) => {
-              if (value !== null) {
-                setFormData({ ...formData, posisiId: value }); // value harus string
-              }
+              if (value !== null) updateForm('posisiId', value);
             }}
           />
+
           <Select
             label="Status Pegawai"
             data={[
               { value: 'true', label: 'Aktif' },
               { value: 'false', label: 'Tidak Aktif' },
             ]}
-            value={String(formData.isActive)} // 'true' atau 'false'
-            onChange={(val) => {
-              setFormData({ ...formData, isActive: val === 'true' });
-            }}
+            value={String(formData.isActive)}
+            onChange={(val) => updateForm('isActive', val === 'true')}
           />
 
-
           <Group>
-            <Button
-              onClick={handleSubmit}
-              color="blue"
-            >
+            <Button onClick={handleSubmit} color="blue">
               Simpan
             </Button>
           </Group>
         </Stack>
       </Paper>
-    </Box >
+    </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx

@@ -75,7 +75,7 @@ function DetailPegawai() {
               </Box>
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Email</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.email}</Text>
+                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.email}</Text>
               </Box>
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Telepon</Text>
@@ -83,7 +83,7 @@ function DetailPegawai() {
               </Box>
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Alamat</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.alamat}</Text>
+                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.alamat}</Text>
               </Box>
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Posisi</Text>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx

@@ -84,13 +84,13 @@ function CreatePegawai() {
           <TextInput
             label="Nama Lengkap"
             placeholder="Masukkan nama lengkap"
-            value={stateOrganisasi.pegawai.create.form.namaLengkap}
+            defaultValue={stateOrganisasi.pegawai.create.form.namaLengkap}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.namaLengkap = e.currentTarget.value)}
           />
           <TextInput
             label="Gelar Akademik"
             placeholder="Contoh: S.Kom"
-            value={stateOrganisasi.pegawai.create.form.gelarAkademik}
+            defaultValue={stateOrganisasi.pegawai.create.form.gelarAkademik}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.gelarAkademik = e.currentTarget.value)}
           />
           <Box>
@@ -150,25 +150,25 @@ function CreatePegawai() {
             label="Tanggal Masuk"
             type="date"
             placeholder="Contoh: 2022-01-01"
-            value={stateOrganisasi.pegawai.create.form.tanggalMasuk}
+            defaultValue={stateOrganisasi.pegawai.create.form.tanggalMasuk}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.tanggalMasuk = e.currentTarget.value)}
           />
           <TextInput
             label="Email"
             placeholder="Contoh: email@example.com"
-            value={stateOrganisasi.pegawai.create.form.email}
+            defaultValue={stateOrganisasi.pegawai.create.form.email}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.email = e.currentTarget.value)}
           />
           <TextInput
             label="Telepon"
             placeholder="Contoh: 08123456789"
-            value={stateOrganisasi.pegawai.create.form.telepon}
+            defaultValue={stateOrganisasi.pegawai.create.form.telepon}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.telepon = e.currentTarget.value)}
           />
           <TextInput
             label="Alamat"
             placeholder="Contoh: Jl. Contoh No. 1"
-            value={stateOrganisasi.pegawai.create.form.alamat}
+            defaultValue={stateOrganisasi.pegawai.create.form.alamat}
             onChange={(e) => (stateOrganisasi.pegawai.create.form.alamat = e.currentTarget.value)}
           />
           <Select
@@ -178,7 +178,7 @@ function CreatePegawai() {
               value: p.id,
               label: p.nama
             })) || []}
-            value={stateOrganisasi.pegawai.create.form.posisiId}
+            defaultValue={stateOrganisasi.pegawai.create.form.posisiId}
             onChange={(value) => {
               if (value) stateOrganisasi.pegawai.create.form.posisiId = value;
             }}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx

@@ -32,6 +32,7 @@ function EditPosisiOrganisasi() {
     hierarki: 0,
   });
 
+  // Load data awal sekali saja
   useEffect(() => {
     const loadPosisiOrganisasi = async () => {
       if (!id) return;
@@ -42,9 +43,9 @@ function EditPosisiOrganisasi() {
         if (data) {
           stateOrganisasi.edit.id = id;
           setFormData({
-            nama: data.nama || '',
-            deskripsi: data.deskripsi || '',
-            hierarki: data.hierarki || 0,
+            nama: data.nama ?? '',
+            deskripsi: data.deskripsi ?? '',
+            hierarki: data.hierarki ?? 0,
           });
         }
       } catch (error) {
@@ -56,6 +57,10 @@ function EditPosisiOrganisasi() {
     loadPosisiOrganisasi();
   }, [id]);
 
+  const handleChange = (field: string, value: string | number) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
       if (!formData.nama.trim()) {
@@ -63,6 +68,7 @@ function EditPosisiOrganisasi() {
         return;
       }
 
+      // update global state HANYA saat submit
       stateOrganisasi.edit.form = {
         nama: formData.nama.trim(),
         deskripsi: formData.deskripsi.trim(),
@@ -115,9 +121,7 @@ function EditPosisiOrganisasi() {
         <Stack gap="md">
           <TextInput
             value={formData.nama}
-            onChange={(e) =>
-              setFormData({ ...formData, nama: e.target.value })
-            }
+            onChange={(e) => handleChange('nama', e.target.value)}
             label="Nama Posisi Organisasi"
             placeholder="Masukkan nama posisi organisasi"
             required
@@ -130,7 +134,7 @@ function EditPosisiOrganisasi() {
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) =>
-                setFormData({ ...formData, deskripsi: htmlContent })
+                handleChange('deskripsi', htmlContent)
               }
             />
           </Box>
@@ -139,10 +143,7 @@ function EditPosisiOrganisasi() {
             type="number"
             value={formData.hierarki}
             onChange={(e) =>
-              setFormData({
-                ...formData,
-                hierarki: parseInt(e.target.value) || 0,
-              })
+              handleChange('hierarki', parseInt(e.target.value) || 0)
             }
             label="Hierarki"
             placeholder="Masukkan hierarki"

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx

@@ -75,7 +75,7 @@ function CreatePosisiOrganisasi() {
                     <TextInput
                         label="Nama Posisi"
                         placeholder="Contoh: Kepala Desa"
-                        value={stateOrganisasi.create.form.nama}
+                        defaultValue={stateOrganisasi.create.form.nama}
                         onChange={(e) => (stateOrganisasi.create.form.nama = e.currentTarget.value)}
                         required
                     />
@@ -94,7 +94,7 @@ function CreatePosisiOrganisasi() {
                         label="Hierarki"
                         type="number"
                         placeholder="Contoh: 1"
-                        value={stateOrganisasi.create.form.hierarki}
+                        defaultValue={stateOrganisasi.create.form.hierarki}
                         onChange={(e) => {
                             const value = parseInt(e.currentTarget.value, 10);
                             if (!isNaN(value)) {

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/[id]/page.tsx

@@ -94,7 +94,7 @@ function DetailAjukanIdeInofativDesa() {
 
               <Box>
                 <Text fz="lg" fw="bold">Alamat</Text>
-                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.alamat || '-' }} />
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.alamat || '-' }} />
               </Box>
 
               <Box>
@@ -104,12 +104,12 @@ function DetailAjukanIdeInofativDesa() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}  dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
               </Box>
 
               <Box>
                 <Text fz="lg" fw="bold">Masalah</Text>
-                <Text fz="md" c="dimmed">{data?.masalah || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data?.masalah || '-'}</Text>
               </Box>
 
               <Box>

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -12,18 +12,22 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function EditPenghargaan() {
-  const stateDesaDigital = useProxy(desaDigitalState)
-  const router = useRouter()
-  const params = useParams()
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [file, setFile] = useState<File | null>(null)
-  const [formData, setFormData] = useState({
-    name: stateDesaDigital.findUnique.data?.name || '',
-    deskripsi: stateDesaDigital.findUnique.data?.deskripsi || '',
-    imageId: stateDesaDigital.findUnique.data?.imageId || '',
-  })
+function EditDigitalSmartVillage() {
+  const stateDesaDigital = useProxy(desaDigitalState);
+  const router = useRouter();
+  const params = useParams();
 
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  // ✅ hanya lokal state untuk form
+  const [formData, setFormData] = useState({
+    name: '',
+    deskripsi: '',
+    imageId: '',
+  });
+
+  // load data sekali saat mount
   useEffect(() => {
     const loadPenghargaan = async () => {
       const id = params?.id as string;
@@ -53,12 +57,11 @@ function EditPenghargaan() {
 
   const handleSubmit = async () => {
     try {
+      // ✅ update global state hanya saat submit
       stateDesaDigital.edit.form = {
         ...stateDesaDigital.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-      }
+        ...formData,
+      };
 
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
@@ -78,7 +81,7 @@ function EditPenghargaan() {
       console.error("Error updating desa digital smart village:", error);
       toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
     }
-  }
+  };
 
   return (
     <Box>
@@ -87,78 +90,80 @@ function EditPenghargaan() {
           <IconArrowBack color={colors["blue-button"]} size={30} />
         </Button>
       </Box>
+
       <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
           <Title order={3}>Edit Desa Digital Smart Village</Title>
+
+          {/* ✅ controlled input */}
           <TextInput
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
+
           <Box>
             <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                    loading="lazy"
-                  />
-                </Box>
-              )}
-            </Box>
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                  loading="lazy"
+                />
+              </Box>
+            )}
           </Box>
+
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            {/* ✅ controlled editor */}
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
                 setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                stateDesaDigital.edit.form.deskripsi = htmlContent;
               }}
             />
           </Box>
@@ -170,4 +175,4 @@ function EditPenghargaan() {
   );
 }
 
-export default EditPenghargaan;
+export default EditDigitalSmartVillage;