Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

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

@@ -1,19 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
 import {
+  Alert,
   Box,
   Button,
   Group,
+  Loader,
   MultiSelect,
   Paper,
   Skeleton,
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
@@ -22,67 +24,120 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+// ==================== HELPERS ====================
+const safeStringArray = (arr: any[]): string[] => {
+  if (!Array.isArray(arr)) return [];
+  return arr
+    .filter(item => item != null && item !== '')
+    .map(item => String(item))
+    .filter(item => item.trim() !== '');
+};
+
+const createEmptyForm = () => ({
+  tahun: '',
+  pendapatanIds: [] as string[],
+  belanjaIds: [] as string[],
+  pembiayaanIds: [] as string[],
+});
+
+// ==================== COMPONENT ====================
 function EditAPBDesa() {
   const apbState = useProxy(PendapatanAsliDesa.ApbDesa);
   const router = useRouter();
   const params = useParams();
 
-  const [formData, setFormData] = useState({
-    tahun: '',
-    pendapatanIds: [] as string[],
-    belanjaIds: [] as string[],
-    pembiayaanIds: [] as string[],
-  });
+  const [formData, setFormData] = useState(createEmptyForm());
+  const [originalData, setOriginalData] = useState(createEmptyForm());
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
-  // Load APB desa by id → hanya update formData, bukan global state
+  // ==================== LOAD DATA ====================
   useEffect(() => {
     const loadAPBdesa = async () => {
       const id = params?.id as string;
-      if (!id) return;
+      if (!id) {
+        toast.error('ID tidak valid');
+        router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
+        return;
+      }
 
       try {
+        setIsLoading(true);
         const data = await apbState.update.load(id);
-        if (data) {
-          setFormData({
-            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) || [],
-          });
+
+        if (!data) {
+          toast.error('Data APB Desa tidak ditemukan');
+          return;
         }
-      } catch (error) {
-        console.error("Error loading APBdesa:", error);
-        toast.error("Gagal memuat data APBdesa");
+
+        const normalized = {
+          tahun: String(data.tahun || ''),
+          pendapatanIds: safeStringArray(data.pendapatan?.map((p: any) => p.id) || []),
+          belanjaIds: safeStringArray(data.belanja?.map((b: any) => b.id) || []),
+          pembiayaanIds: safeStringArray(data.pembiayaan?.map((p: any) => p.id) || []),
+        };
+
+        setFormData(normalized);
+        setOriginalData(normalized);
+      } catch (err) {
+        console.error('Error loading APBdesa:', err);
+        toast.error('Gagal memuat data APB Desa');
+      } finally {
+        setIsLoading(false);
       }
     };
 
     loadAPBdesa();
   }, [params?.id]);
 
+  // ==================== HANDLERS ====================
   const handleChange = (field: keyof typeof formData, value: any) => {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
+  const handleResetForm = () => {
+    setFormData(originalData);
+    toast.info('Form dikembalikan ke data awal');
+  };
+
   const handleSubmit = async () => {
     try {
-      // update global state cuma pas submit
+      setIsSubmitting(true);
+
+      if (!formData.tahun.trim()) {
+        toast.warning('Tahun harus diisi');
+        return;
+      }
+
       apbState.update.form = {
         ...apbState.update.form,
         tahun: Number(formData.tahun),
-        pendapatanIds: formData.pendapatanIds,
-        belanjaIds: formData.belanjaIds,
-        pembiayaanIds: formData.pembiayaanIds,
+        pendapatanIds: safeStringArray(formData.pendapatanIds),
+        belanjaIds: safeStringArray(formData.belanjaIds),
+        pembiayaanIds: safeStringArray(formData.pembiayaanIds),
       };
 
       await apbState.update.update();
-      toast.success("APB Desa berhasil diperbarui!");
-      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa");
+      toast.success('APB Desa berhasil diperbarui!');
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
     } catch (error) {
-      console.error("Error updating APBdesa:", error);
-      toast.error("Terjadi kesalahan saat memperbarui APBdesa");
+      console.error('Error updating APBdesa:', error);
+      toast.error('Terjadi kesalahan saat memperbarui APB Desa');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  // ==================== UI ====================
+  if (isLoading) {
+    return (
+      <Stack align="center" py="xl">
+        <Loader size="lg" type="dots" />
+        <Text c="dimmed">Memuat data APB Desa...</Text>
+      </Stack>
+    );
+  }
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
@@ -114,30 +169,46 @@ function EditAPBDesa() {
           <TextInput
             type="number"
             value={formData.tahun}
-            onChange={(e) => handleChange("tahun", e.target.value)}
+            onChange={(e) => handleChange('tahun', e.target.value)}
             label={<Text fz="sm" fw="bold">Tahun</Text>}
             placeholder="Masukkan tahun anggaran"
             required
           />
 
           {/* Selects */}
-          <SelectPendapatan
+          <SelectAPBItem
+            label="Pendapatan"
+            state={PendapatanAsliDesa.pendapatan}
             selectedIds={formData.pendapatanIds}
-            onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
+            onSelectionChange={(ids) => handleChange('pendapatanIds', ids)}
           />
 
-          <SelectBelanja
+          <SelectAPBItem
+            label="Belanja"
+            state={PendapatanAsliDesa.belanja}
             selectedIds={formData.belanjaIds}
-            onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
+            onSelectionChange={(ids) => handleChange('belanjaIds', ids)}
           />
 
-          <SelectPembiayaan
+          <SelectAPBItem
+            label="Pembiayaan"
+            state={PendapatanAsliDesa.pembiayaan}
             selectedIds={formData.pembiayaanIds}
-            onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
+            onSelectionChange={(ids) => handleChange('pembiayaanIds', ids)}
           />
 
           {/* Save Button */}
-          <Group justify="right">
+          <Group justify="right" mt="md">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -148,117 +219,75 @@ function EditAPBDesa() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>
       </Paper>
     </Box>
   );
+}
 
-  /* --- Sub Components --- */
+// ==================== SUB COMPONENT ====================
+function SelectAPBItem({
+  label,
+  state,
+  selectedIds,
+  onSelectionChange,
+}: {
+  label: string;
+  state: any;
+  selectedIds: string[];
+  onSelectionChange: (ids: string[]) => void;
+}) {
+  const proxyState = useProxy(state);
 
-  function SelectPendapatan({
-    selectedIds,
-    onSelectionChange,
-  }: {
-    selectedIds: string[];
-    onSelectionChange: (ids: string[]) => void;
-  }) {
-    const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
+  useShallowEffect(() => {
+    proxyState.findMany.load();
+  }, []);
 
-    useShallowEffect(() => {
-      pendapatanState.findMany.load();
-    }, []);
+  const data = proxyState.findMany.data;
+  const isLoading = !data;
 
-    if (!pendapatanState.findMany.data) {
-      return <Skeleton height={38} />;
-    }
+  const options =
+    data
+      ?.filter((item: any) => item?.id)
+      .map((item: any) => ({
+        value: String(item.id),
+        label: String(item?.name || '(Tanpa Nama)'),
+      })) || [];
 
+  if (isLoading) {
     return (
-      <MultiSelect
-        label={<Text fz="sm" fw="bold">Pendapatan</Text>}
-        data={pendapatanState.findMany.data.map((p: any) => ({
-          value: p.id,
-          label: p.name,
-        }))}
-        value={selectedIds}
-        onChange={onSelectionChange}
-        searchable
-        clearable
-        placeholder="Pilih pendapatan..."
-        nothingFoundMessage="Tidak ditemukan"
-      />
+      <Box>
+        <Text fz="sm" fw="bold" mb={4}>{label}</Text>
+        <Skeleton height={38} radius="sm" />
+      </Box>
     );
   }
 
-  function SelectBelanja({
-    selectedIds,
-    onSelectionChange,
-  }: {
-    selectedIds: string[];
-    onSelectionChange: (ids: string[]) => void;
-  }) {
-    const belanjaState = useProxy(PendapatanAsliDesa.belanja);
-
-    useShallowEffect(() => {
-      belanjaState.findMany.load();
-    }, []);
-
-    if (!belanjaState.findMany.data) {
-      return <Skeleton height={38} />;
-    }
-
+  if (options.length === 0) {
     return (
-      <MultiSelect
-        label={<Text fz="sm" fw="bold">Belanja</Text>}
-        data={belanjaState.findMany.data.map((b: any) => ({
-          value: b.id,
-          label: b.name,
-        }))}
-        value={selectedIds}
-        onChange={onSelectionChange}
-        searchable
-        clearable
-        placeholder="Pilih belanja..."
-        nothingFoundMessage="Tidak ditemukan"
-      />
+      <Alert color="gray" variant="light">
+        <Text size="sm">
+          Tidak ada data {label.toLowerCase()} tersedia.
+        </Text>
+      </Alert>
     );
   }
 
-  function SelectPembiayaan({
-    selectedIds,
-    onSelectionChange,
-  }: {
-    selectedIds: string[];
-    onSelectionChange: (ids: string[]) => void;
-  }) {
-    const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
-
-    useShallowEffect(() => {
-      pembiayaanState.findMany.load();
-    }, []);
-
-    if (!pembiayaanState.findMany.data) {
-      return <Skeleton height={38} />;
-    }
-
-    return (
-      <MultiSelect
-        label={<Text fz="sm" fw="bold">Pembiayaan</Text>}
-        data={pembiayaanState.findMany.data.map((p: any) => ({
-          value: p.id,
-          label: p.name,
-        }))}
-        value={selectedIds}
-        onChange={onSelectionChange}
-        searchable
-        clearable
-        placeholder="Pilih pembiayaan..."
-        nothingFoundMessage="Tidak ditemukan"
-      />
-    );
-  }
+  return (
+    <MultiSelect
+      label={<Text fz="sm" fw="bold">{label}</Text>}
+      data={options}
+      value={selectedIds}
+      onChange={(ids) => onSelectionChange(safeStringArray(ids))}
+      searchable
+      clearable
+      placeholder={`Pilih ${label.toLowerCase()}...`}
+      nothingFoundMessage="Tidak ditemukan"
+    />
+  );
 }
 
 export default EditAPBDesa;

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

@@ -80,7 +80,7 @@ function DetailAPBDesa() {
             Detail APB Desa
           </Text>
 
-          <Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
+          <Paper bg="#EEF3FBFF" p="md" radius="md" shadow="xs">
             <Stack gap="sm">
               <Box>
                 <Text fz="lg" fw="bold">

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   MultiSelect,
   Paper,
   Skeleton,
@@ -17,11 +18,14 @@ import {
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreateAPBDesa() {
   const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     apbDesaState.create.form = {
@@ -33,9 +37,17 @@ function CreateAPBDesa() {
   };
 
   const handleSubmit = async () => {
-    await apbDesaState.create.submit();
-    resetForm();
-    router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
+    try {
+      setIsSubmitting(true);
+      await apbDesaState.create.submit();
+      resetForm();
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
+    } catch (error) {
+      console.error('Error creating APB Desa:', error);
+      toast.error('Gagal membuat APB Desa');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -62,7 +74,7 @@ function CreateAPBDesa() {
         <Stack gap="md">
           <TextInput
             type="number"
-            defaultValue={apbDesaState.create.form.tahun}
+            value={apbDesaState.create.form.tahun}
             onChange={(val) => {
               apbDesaState.create.form.tahun = Number(val.target.value);
             }}
@@ -94,6 +106,17 @@ function CreateAPBDesa() {
 
           {/* Action */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -104,7 +127,7 @@ function CreateAPBDesa() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -7,6 +7,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -22,12 +23,18 @@ function EditBelanja() {
   const belanjaState = useProxy(PendapatanAsliDesa.belanja);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState({
     name: '',
     value: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    value: '',
+  });
+
   // format angka ke rupiah
   const formatRupiah = (value: number | string) => {
     const number =
@@ -58,6 +65,10 @@ function EditBelanja() {
             name: data.name || '',
             value: String(data.value || ''),
           });
+          setOriginalData({
+            name: data.name || '',
+            value: String(data.value || ''),
+          });
         }
       } catch (error) {
         console.error("Error loading belanja:", error);
@@ -70,6 +81,7 @@ function EditBelanja() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       belanjaState.update.form = {
         ...belanjaState.update.form,
         name: formData.name,
@@ -82,9 +94,19 @@ function EditBelanja() {
     } catch (error) {
       console.error("Error updating jenis belanja:", error);
       toast.error("Terjadi kesalahan saat memperbarui jenis belanja");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      value: originalData.value,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
@@ -135,6 +157,17 @@ function EditBelanja() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -145,7 +178,7 @@ function EditBelanja() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -14,12 +15,14 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreateBelanja() {
   const belanjaState = useProxy(PendapatanAsliDesa.belanja);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const formatRupiah = (value: number | string) => {
     const number =
@@ -47,9 +50,17 @@ function CreateBelanja() {
       return toast.warn('Lengkapi semua field terlebih dahulu');
     }
 
-    await belanjaState.create.submit();
-    resetForm();
-    router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja');
+    try {
+      setIsSubmitting(true);
+      await belanjaState.create.submit();
+      resetForm();
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja');
+    } catch (error) {
+      console.error('Error creating belanja:', error);
+      toast.error('Gagal menambahkan jenis belanja');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -82,7 +93,7 @@ function CreateBelanja() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Belanja</Text>}
             placeholder="Masukkan nama jenis belanja"
-            defaultValue={belanjaState.create.form.name}
+            value={belanjaState.create.form.name}
             onChange={(e) => (belanjaState.create.form.name = e.target.value)}
             required
           />
@@ -91,7 +102,7 @@ function CreateBelanja() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai belanja"
-            defaultValue={formatRupiah(belanjaState.create.form.value)}
+            value={formatRupiah(belanjaState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               belanjaState.create.form.value = unformatRupiah(raw);
@@ -100,6 +111,17 @@ function CreateBelanja() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -110,7 +132,7 @@ function CreateBelanja() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -21,12 +22,18 @@ function EditPembiayaan() {
   const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState({
     name: '',
     value: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    value: '',
+  });
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number'
@@ -55,6 +62,10 @@ function EditPembiayaan() {
             name: data.name || '',
             value: String(data.value || ''),
           });
+          setOriginalData({
+            name: data.name || '',
+            value: String(data.value || ''),
+          });
         }
       } catch (error) {
         console.error('Error loading pembiayaan:', error);
@@ -65,8 +76,17 @@ function EditPembiayaan() {
     loadPembiayaan();
   }, [params?.id]);
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      value: originalData.value,
+    });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       pembiayaanState.update.form = {
         ...pembiayaanState.update.form,
         name: formData.name,
@@ -79,6 +99,8 @@ function EditPembiayaan() {
     } catch (error) {
       console.error('Error updating jenis pembiayaan:', error);
       toast.error('Terjadi kesalahan saat memperbarui jenis pembiayaan');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -132,6 +154,17 @@ function EditPembiayaan() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -142,7 +175,7 @@ function EditPembiayaan() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -13,12 +14,14 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreatePembiayaan() {
   const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const formatRupiah = (value: number | string) => {
     const number =
@@ -42,13 +45,21 @@ function CreatePembiayaan() {
   };
 
   const handleSubmit = async () => {
-    if (!pembiayaanState.create.form.name || !pembiayaanState.create.form.value) {
-      return toast.warn('Nama dan nilai wajib diisi');
-    }
+    try {
+      setIsSubmitting(true);
+      if (!pembiayaanState.create.form.name || !pembiayaanState.create.form.value) {
+        return toast.warn('Nama dan nilai wajib diisi');
+      }
 
-    await pembiayaanState.create.submit();
-    resetForm();
-    router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan');
+      await pembiayaanState.create.submit();
+      resetForm();
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan');
+    } catch (error) {
+      console.error('Error creating pembiayaan:', error);
+      toast.error('Gagal menambahkan jenis pembiayaan');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -81,7 +92,7 @@ function CreatePembiayaan() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Pembiayaan</Text>}
             placeholder="Masukkan nama jenis pembiayaan"
-            defaultValue={pembiayaanState.create.form.name}
+            value={pembiayaanState.create.form.name}
             onChange={(e) => {
               pembiayaanState.create.form.name = e.currentTarget.value;
             }}
@@ -92,7 +103,7 @@ function CreatePembiayaan() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai"
-            defaultValue={formatRupiah(pembiayaanState.create.form.value)}
+            value={formatRupiah(pembiayaanState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               pembiayaanState.create.form.value = unformatRupiah(raw);
@@ -101,6 +112,17 @@ function CreatePembiayaan() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -111,7 +133,7 @@ function CreatePembiayaan() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -21,6 +22,12 @@ function EditPendapatan() {
   const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    value: "",
+  });
 
   const [formData, setFormData] = useState({
     name: '',
@@ -55,6 +62,10 @@ function EditPendapatan() {
             name: data.name ?? '',
             value: data.value?.toString() ?? '',
           });
+          setOriginalData({
+            name: data.name ?? '',
+            value: data.value?.toString() ?? '',
+          });
         }
       } catch (error) {
         console.error('Error loading pendapatan:', error);
@@ -72,8 +83,18 @@ function EditPendapatan() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      value: originalData.value,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       pendapatanState.update.form = {
         ...pendapatanState.update.form,
         name: formData.name,
@@ -86,7 +107,10 @@ function EditPendapatan() {
     } catch (error) {
       console.error('Error updating jenis pendapatan:', error);
       toast.error('Terjadi kesalahan saat memperbarui jenis pendapatan');
+    } finally {
+      setIsSubmitting(false);
     }
+
   };
 
   return (
@@ -137,6 +161,17 @@ function EditPendapatan() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -147,7 +182,7 @@ function EditPendapatan() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>

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

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -12,11 +13,14 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreatePendapatan() {
   const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const formatRupiah = (value: number | string) => {
     const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -39,9 +43,17 @@ function CreatePendapatan() {
   };
 
   const handleSubmit = async () => {
-    await pendapatanState.create.submit();
-    resetForm();
-    router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan');
+    try {
+      setIsSubmitting(true);
+      await pendapatanState.create.submit();
+      resetForm();
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan');
+    } catch (error) {
+      console.error('Error creating pendapatan:', error);
+      toast.error('Gagal menambahkan jenis pendapatan');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -72,7 +84,7 @@ function CreatePendapatan() {
       >
         <Stack gap="md">
           <TextInput
-            defaultValue={pendapatanState.create.form.name}
+            value={pendapatanState.create.form.name}
             onChange={(val) => {
               pendapatanState.create.form.name = val.target.value;
             }}
@@ -83,7 +95,7 @@ function CreatePendapatan() {
 
           <TextInput
             type="text"
-            defaultValue={formatRupiah(pendapatanState.create.form.value)}
+            value={formatRupiah(pendapatanState.create.form.value)}
             onChange={(val) => {
               const raw = val.currentTarget.value;
               const cleanValue = unformatRupiah(raw);
@@ -95,6 +107,17 @@ function CreatePendapatan() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -105,7 +128,7 @@ function CreatePendapatan() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>