fix inputan edit menu: desa, ekonomi, inovasi, keamanan, kesehatan, landing-page, & lingkungan

src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/[id]/edit/page.tsx

@@ -11,24 +11,28 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditJenisLayanan() {
-  const state = useProxy(layananonlineDesa.jenisLayanan)
-  const router = useRouter()
-  const params = useParams()
-  const [formData, setFormData] = useState({
-    nama: state.edit.form.nama,
-    deskripsi: state.edit.form.deskripsi,
-  })
+  const state = useProxy(layananonlineDesa.jenisLayanan);
+  const router = useRouter();
+  const params = useParams();
 
+  // state lokal untuk form
+  const [formData, setFormData] = useState({
+    nama: "",
+    deskripsi: "",
+  });
+
+  // load data dari backend ke local state
   useEffect(() => {
     const loadJenisLayanan = async () => {
       const id = params?.id as string;
       if (!id) return;
+
       try {
         const data = await state.edit.load(id);
         if (data) {
           setFormData({
-            nama: data.nama,
-            deskripsi: data.deskripsi,
+            nama: data.nama ?? "",
+            deskripsi: data.deskripsi ?? "",
           });
         }
       } catch (error) {
@@ -36,24 +40,26 @@ function EditJenisLayanan() {
         toast.error("Gagal memuat data jenis layanan");
       }
     };
+
     loadJenisLayanan();
   }, [params?.id]);
 
+  // submit update → baru sync ke global state
   const handleSubmit = async () => {
     try {
       state.edit.form = {
         ...state.edit.form,
-        nama: formData.nama,
-        deskripsi: formData.deskripsi,
-      }
-      await state.edit.update()
-      toast.success("Jenis layanan berhasil diperbarui!")
-      router.push("/admin/inovasi/layanan-online-desa/jenis-layanan")
+        ...formData,
+      };
+
+      await state.edit.update();
+      toast.success("Jenis layanan berhasil diperbarui!");
+      router.push("/admin/inovasi/layanan-online-desa/jenis-layanan");
     } catch (error) {
       console.error("Error updating jenis layanan:", error);
       toast.error("Terjadi kesalahan saat memperbarui jenis layanan");
     }
-  }
+  };
 
   return (
     <Box>
@@ -62,27 +68,33 @@ function EditJenisLayanan() {
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
+
+      <Paper bg={colors["white-1"]} p="md" w={{ base: "100%", md: "50%" }}>
+        <Stack gap="xs">
           <Title order={3}>Edit Jenis Layanan</Title>
+
           <TextInput
-            defaultValue={formData.nama}
-            onChange={(val) => {
-              setFormData({ ...formData, nama: val.target.value });
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Jenis Layanan</Text>}
+            value={formData.nama}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, nama: e.target.value }))
+            }
+            label={<Text fz="sm" fw="bold">Nama Jenis Layanan</Text>}
             placeholder="masukkan nama jenis layanan"
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData({ ...formData, deskripsi: htmlContent });
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
             />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            Simpan
+          </Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-pengaduan/[id]/page.tsx

@@ -10,7 +10,7 @@ import {
   Stack,
   TextInput,
   Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -25,9 +25,10 @@ function EditJenisPengaduan() {
   const state = useProxy(layananonlineDesa.jenisPengaduan);
 
   const [formData, setFormData] = useState({
-    nama: "",
+    nama: '',
   });
 
+  // Load data sekali aja
   useEffect(() => {
     const loadJenisPengaduan = async () => {
       if (!id) return;
@@ -36,51 +37,58 @@ function EditJenisPengaduan() {
         const data = await state.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
-          state.edit.id = id;
+          state.edit.id = id; // inject id ke state global (hanya sekali)
           setFormData({
             nama: data.nama || '',
           });
         }
       } catch (error) {
-        console.error("Error loading jenis pengaduan:", error);
-        toast.error("Gagal memuat data jenis pengaduan");
+        console.error('Error loading jenis pengaduan:', error);
+        toast.error('Gagal memuat data jenis pengaduan');
       }
     };
 
     loadJenisPengaduan();
   }, [id]);
 
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const handleSubmit = async () => {
+    if (!formData.nama.trim()) {
+      toast.error('Nama jenis pengaduan tidak boleh kosong');
+      return;
+    }
+
+    // Update ke global state HANYA pas submit
+    state.edit.form = {
+      nama: formData.nama.trim(),
+    };
+
+    // Safety fallback kalau ID belum ada
+    if (!state.edit.id) {
+      state.edit.id = id;
+    }
+
     try {
-      if (!formData.nama.trim()) {
-        toast.error('Nama jenis pengaduan tidak boleh kosong');
-        return;
-      }
-
-      state.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
-      // Safety check tambahan: pastikan ID tidak kosong
-      if (!state.edit.id) {
-        state.edit.id = id; // fallback
-      }
-
       const success = await state.edit.update();
 
       if (success) {
-        router.push("/admin/inovasi/layanan-online-desa/jenis-pengaduan");
+        router.push('/admin/inovasi/layanan-online-desa/jenis-pengaduan');
       }
     } catch (error) {
-      console.error("Error updating jenis pengaduan:", error);
-      // toast akan ditampilkan dari fungsi update
+      console.error('Error updating jenis pengaduan:', error);
+      // toast ditangani di dalam state.update
     }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header + tombol back */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button
@@ -97,7 +105,7 @@ function EditJenisPengaduan() {
         </Title>
       </Group>
 
-      {/* Card Form */}
+      {/* Form */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -108,8 +116,8 @@ function EditJenisPengaduan() {
       >
         <Stack gap="md">
           <TextInput
-            defaultValue={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
             label="Nama Jenis Pengaduan"
             placeholder="Masukkan nama jenis pengaduan"
             required