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

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

@@ -10,7 +10,8 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -22,6 +23,11 @@ function EditKategoriBerita() {
   const editState = useProxy(stateDashboardBerita.kategoriBerita);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: '',
+  });
 
   const [formData, setFormData] = useState({
     name: '',
@@ -38,6 +44,9 @@ function EditKategoriBerita() {
           setFormData({
             name: data.name || '',
           });
+          setOriginalData({
+            name: data.name || '',
+          });
         }
       } catch (error) {
         console.error('Error loading kategori Berita:', error);
@@ -55,8 +64,16 @@ function EditKategoriBerita() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+    });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // update global state hanya saat submit
       editState.update.form = {
         ...editState.update.form,
@@ -69,6 +86,8 @@ function EditKategoriBerita() {
     } catch (error) {
       console.error('Error updating kategori Berita:', error);
       toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -109,6 +128,17 @@ function EditKategoriBerita() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -119,7 +149,7 @@ function EditKategoriBerita() {
                 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)/desa/berita/kategori-berita/create/page.tsx

@@ -8,15 +8,19 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } 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 CreateKategoriBerita() {
   const createState = useProxy(stateDashboardBerita.kategoriBerita);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     createState.create.form = {
@@ -25,9 +29,17 @@ function CreateKategoriBerita() {
   };
 
   const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push('/admin/desa/berita/kategori-berita');
+    setIsSubmitting(true);
+    try {
+      await createState.create.create();
+      resetForm();
+      router.push('/admin/desa/berita/kategori-berita');
+    } catch (error) {
+      console.error('Error creating kategori berita:', error);
+      toast.error('Gagal menambahkan kategori berita');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -60,12 +72,23 @@ function CreateKategoriBerita() {
           <TextInput
             label="Nama Kategori Berita"
             placeholder="Masukkan nama kategori berita"
-            defaultValue={createState.create.form.name || ''}
+            value={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -76,7 +99,7 @@ function CreateKategoriBerita() {
                 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)/desa/berita/list-berita/[id]/edit/page.tsx

@@ -6,6 +6,7 @@ import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
@@ -15,7 +16,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import {
@@ -44,6 +46,17 @@ function EditBerita() {
     imageId: "",
   });
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    judul: "",
+    deskripsi: "",
+    kategoriBeritaId: "",
+    content: "",
+    imageId: "",
+    imageUrl: ""
+  });
+
   // Load kategori + berita
   useEffect(() => {
     beritaState.kategoriBerita.findMany.load();
@@ -63,6 +76,15 @@ function EditBerita() {
             imageId: data.imageId || "",
           });
 
+          setOriginalData({
+            judul: data.judul || "",
+            deskripsi: data.deskripsi || "",
+            kategoriBeritaId: data.kategoriBeritaId || "",
+            content: data.content || "",
+            imageId: data.imageId || "",
+            imageUrl: data.image?.link || ""
+          });
+
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -82,6 +104,7 @@ function EditBerita() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // Update global state hanya sekali di sini
       beritaState.berita.edit.form = {
         ...beritaState.berita.edit.form,
@@ -108,21 +131,36 @@ function EditBerita() {
     } catch (error) {
       console.error("Error updating berita:", error);
       toast.error("Terjadi kesalahan saat memperbarui berita");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      deskripsi: originalData.deskripsi,
+      kategoriBeritaId: originalData.kategoriBeritaId,
+      content: originalData.content,
+      imageId: originalData.imageId,
+    });
+    setPreviewImage(originalData.imageUrl || null);
+    setFile(null);
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   return (
     <Box px={{ base: "sm", md: "lg" }} py="md">
       {/* Header */}
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors["blue-button"]} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors["blue-button"]} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Berita
         </Title>
@@ -216,14 +254,14 @@ function EditBerita() {
                     Seret gambar atau klik untuk memilih file
                   </Text>
                   <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
+                    Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
                   </Text>
                 </Stack>
               </Group>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
@@ -235,6 +273,24 @@ function EditBerita() {
                   }}
                   loading="lazy"
                 />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -254,17 +310,29 @@ function EditBerita() {
 
           {/* Action */}
           <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <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)",
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                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)/desa/berita/list-berita/create/page.tsx

@@ -13,7 +13,9 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader,
+  ActionIcon
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
@@ -28,6 +30,7 @@ export default function CreateBerita() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useShallowEffect(() => {
     beritaState.kategoriBerita.findMany.load();
@@ -46,40 +49,48 @@ export default function CreateBerita() {
   };
 
   const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn('Silakan pilih file gambar terlebih dahulu');
+    try {
+      setIsSubmitting(true);
+      if (!file) {
+        return toast.warn('Silakan pilih file gambar terlebih dahulu');
+      }
+
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
+
+      const uploaded = res.data?.data;
+      if (!uploaded?.id) {
+        return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+      }
+
+      beritaState.berita.create.form.imageId = uploaded.id;
+
+      await beritaState.berita.create.create();
+
+      resetForm();
+      router.push('/admin/desa/berita/list-berita');
+    } catch (error) {
+      console.error('Error creating berita:', error);
+      toast.error('Terjadi kesalahan saat membuat berita');
+    } finally {
+      setIsSubmitting(false);
     }
-
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
-    if (!uploaded?.id) {
-      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
-    }
-
-    beritaState.berita.create.form.imageId = uploaded.id;
-
-    await beritaState.berita.create.create();
-
-    resetForm();
-    router.push('/admin/desa/berita/list-berita');
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header dengan tombol kembali */}
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Berita
         </Title>
@@ -97,7 +108,7 @@ export default function CreateBerita() {
           <TextInput
             label="Judul"
             placeholder="Masukkan judul berita"
-            defaultValue={beritaState.berita.create.form.judul}
+            value={beritaState.berita.create.form.judul}
             onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
             required
           />
@@ -109,7 +120,7 @@ export default function CreateBerita() {
               label: item.name,
               value: item.id,
             }))}
-            defaultValue={beritaState.berita.create.form.kategoriBeritaId || null}
+            value={beritaState.berita.create.form.kategoriBeritaId || null}
             onChange={(val: string | null) => {
               if (val) {
                 const selected = beritaState.kategoriBerita.findMany.data?.find(
@@ -154,7 +165,7 @@ export default function CreateBerita() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -175,7 +186,7 @@ export default function CreateBerita() {
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
@@ -187,6 +198,26 @@ export default function CreateBerita() {
                   }}
                   loading="lazy"
                 />
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -204,6 +235,17 @@ export default function CreateBerita() {
           </Box>
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -214,7 +256,7 @@ export default function CreateBerita() {
                 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)/desa/gallery/video/[id]/edit/page.tsx

@@ -4,15 +4,17 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { IconArrowBack, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +26,14 @@ function EditVideo() {
   const videoState = useProxy(stateGallery.video);
   const params = useParams();
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    deskripsi: "",
+    linkVideo: "",
+  });
+
   const [formData, setFormData] = useState({
     name: '',
     deskripsi: '',
@@ -44,6 +54,11 @@ function EditVideo() {
             deskripsi: data.deskripsi ?? '',
             linkVideo: data.linkVideo ?? '',
           });
+          setOriginalData({
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            linkVideo: data.linkVideo ?? '',
+          });
         }
       } catch (error) {
         console.error('Error loading video:', error);
@@ -61,25 +76,42 @@ function EditVideo() {
     []
   );
 
-  const handleSubmit = async () => {
-    const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
-    if (!converted) {
-      toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
-      return;
-    }
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      linkVideo: originalData.linkVideo,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
 
+  const handleSubmit = async () => {
     try {
-      videoState.update.form = {
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        linkVideo: formData.linkVideo,
-      };
-      await videoState.update.update();
-      toast.success('Video berhasil diperbarui!');
-      router.push('/admin/desa/gallery/video');
+      setIsSubmitting(true);
+      const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
+      if (!converted) {
+        toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
+        return;
+      }
+
+      try {
+        videoState.update.form = {
+          name: formData.name,
+          deskripsi: formData.deskripsi,
+          linkVideo: formData.linkVideo,
+        };
+        await videoState.update.update();
+        toast.success('Video berhasil diperbarui!');
+        router.push('/admin/desa/gallery/video');
+      } catch (error) {
+        console.error('Error updating video:', error);
+        toast.error('Terjadi kesalahan saat memperbarui video');
+      }
     } catch (error) {
       console.error('Error updating video:', error);
       toast.error('Terjadi kesalahan saat memperbarui video');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -88,14 +120,14 @@ function EditVideo() {
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Video
         </Title>
@@ -127,7 +159,7 @@ function EditVideo() {
               required
             />
             {embedLink && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ display: 'flex', justifyContent: 'center' }}>
                 <iframe
                   className="rounded"
                   width="100%"
@@ -135,7 +167,27 @@ function EditVideo() {
                   src={embedLink}
                   title="Preview Video"
                   allowFullScreen
-                ></iframe>
+                />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setFormData({
+                      ...formData,
+                      linkVideo: '',
+                    });
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -151,6 +203,17 @@ function EditVideo() {
           </Box>
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -161,7 +224,7 @@ function EditVideo() {
                 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)/desa/gallery/video/create/page.tsx

@@ -3,6 +3,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
@@ -10,9 +11,10 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { IconArrowBack, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +26,7 @@ function CreateVideo() {
   const router = useRouter();
   const [link, setLink] = useState('');
   const embedLink = convertYoutubeUrlToEmbed(link);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     videoState.create.form = {
@@ -35,29 +38,37 @@ function CreateVideo() {
   };
 
   const handleSubmit = async () => {
-    if (!embedLink) {
-      toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
-      return;
-    }
+    try {
+      setIsSubmitting(true);
+      if (!embedLink) {
+        toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
+        return;
+      }
 
-    videoState.create.form.linkVideo = embedLink;
-    await videoState.create.create();
-    resetForm();
-    router.push('/admin/desa/gallery/video');
+      videoState.create.form.linkVideo = embedLink;
+      await videoState.create.create();
+      resetForm();
+      router.push('/admin/desa/gallery/video');
+    } catch (error) {
+      console.error("Error creating video:", error);
+      toast.error("Terjadi kesalahan saat menambahkan video");
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header Back Button + Title */}
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Video
         </Title>
@@ -77,7 +88,7 @@ function CreateVideo() {
           <TextInput
             label="Judul Video"
             placeholder="Masukkan judul video"
-            defaultValue={videoState.create.form.name}
+            value={videoState.create.form.name}
             onChange={(e) => {
               videoState.create.form.name = e.currentTarget.value;
             }}
@@ -88,14 +99,14 @@ function CreateVideo() {
           <TextInput
             label="Link Video YouTube"
             placeholder="https://www.youtube.com/watch?v=abc123"
-            defaultValue={link}
+            value={link}
             onChange={(e) => setLink(e.currentTarget.value)}
             required
           />
 
           {/* Preview Video */}
           {embedLink && (
-            <Box mt="sm">
+            <Box mt="sm" pos="relative">
               <iframe
                 style={{
                   borderRadius: 10,
@@ -106,7 +117,24 @@ function CreateVideo() {
                 src={embedLink}
                 title="Preview Video"
                 allowFullScreen
-              ></iframe>
+              />
+              <ActionIcon
+                variant="filled"
+                color="red"
+                radius="xl"
+                size="sm"
+                pos="absolute"
+                top={5}
+                right={5}
+                onClick={() => {
+                  setLink('');
+                }}
+                style={{
+                  boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                }}
+              >
+                <IconX size={14} />
+              </ActionIcon>
             </Box>
           )}
 
@@ -125,6 +153,17 @@ function CreateVideo() {
 
           {/* Button Submit */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -135,7 +174,7 @@ function CreateVideo() {
                 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)/desa/layanan/ajukan_permohonan/[id]/edit/page.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Select,
   Stack,
@@ -23,6 +24,16 @@ function EditAjukanPermohonan() {
   const params = useParams();
   const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    nama: "",
+    nik: "",
+    alamat: "",
+    nomorKk: "",
+    kategoriId: "",
+  });
+
   // State lokal form
   const [formData, setFormData] = useState({
     nama: '',
@@ -50,6 +61,13 @@ function EditAjukanPermohonan() {
             nomorKk: data.nomorKk || '',
             kategoriId: data.kategoriId || '',
           });
+          setOriginalData({
+            nama: data.nama || '',
+            nik: data.nik || '',
+            alamat: data.alamat || '',
+            nomorKk: data.nomorKk || '',
+            kategoriId: data.kategoriId || '',
+          });
         }
       } catch (error) {
         console.error('Error loading ajukan:', error);
@@ -68,8 +86,20 @@ function EditAjukanPermohonan() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+      nik: originalData.nik,
+      alamat: originalData.alamat,
+      nomorKk: originalData.nomorKk,
+      kategoriId: originalData.kategoriId,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       stateAjukan.edit.form = {
         ...stateAjukan.edit.form,
         ...formData,
@@ -79,6 +109,8 @@ function EditAjukanPermohonan() {
     } catch (error) {
       console.error('Error updating ajukan:', error);
       toast.error('Terjadi kesalahan saat memperbarui ajukan');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -86,9 +118,9 @@ function EditAjukanPermohonan() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Back Button */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Ajukan Permohonan
         </Title>
@@ -153,6 +185,17 @@ function EditAjukanPermohonan() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -163,7 +206,7 @@ function EditAjukanPermohonan() {
                 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)/desa/layanan/pelayanan_penduduk_non_permanent/[id]/page.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -32,6 +33,14 @@ function EditPelayananPendudukNonPermanent() {
     deskripsi: '',
   });
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    deskripsi: '',
+  });
+
+
   // Load data sekali dari backend
   useEffect(() => {
     const loadData = async () => {
@@ -45,6 +54,10 @@ function EditPelayananPendudukNonPermanent() {
             name: data.name || '',
             deskripsi: data.deskripsi || '',
           });
+          setOriginalData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+          });
         }
       } catch (error) {
         console.error('Error loading data:', error);
@@ -57,39 +70,55 @@ function EditPelayananPendudukNonPermanent() {
 
   const handleChange =
     (field: keyof typeof formData) =>
-    (value: string) => {
-      setFormData((prev) => ({
-        ...prev,
-        [field]: value,
-      }));
-    };
+      (value: string) => {
+        setFormData((prev) => ({
+          ...prev,
+          [field]: value,
+        }));
+      };
+
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
 
   const handleSubmit = async () => {
-    if (!statePendudukNonPermanent.findById.data) return;
+    try {
+      setIsSubmitting(true);
+      if (!statePendudukNonPermanent.findById.data) return;
 
-    // Update global state hanya di submit
-    const updated = {
-      ...statePendudukNonPermanent.findById.data,
-      name: formData.name,
-      deskripsi: formData.deskripsi,
-    };
+      // 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');
+      await statePendudukNonPermanent.update.update(updated);
+      router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent');
+    } catch (error) {
+      console.error('Error updating data:', error);
+      toast.error('Gagal memuat data pelayanan penduduk non permanent');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
     <Box>
       <Stack gap="xs">
         <Group mb="md">
-            <Button
-              variant="subtle"
-              onClick={() => router.back()}
-              p="xs"
-              radius="md"
-            >
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
           <Title order={4} ml="sm" c="dark">
             Edit Pelayanan Penduduk Non Permanent
           </Title>
@@ -127,25 +156,31 @@ function EditPelayananPendudukNonPermanent() {
             </Box>
 
             {/* Submit Button */}
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={statePendudukNonPermanent.update.loading}
-                disabled={!formData.name}
-              >
-                {statePendudukNonPermanent.update.loading
-                  ? 'Menyimpan...'
-                  : 'Simpan Perubahan'}
-              </Button>
-
+            <Group justify="right">
+              {/* Tombol Batal */}
               <Button
                 variant="outline"
-                onClick={() => router.back()}
-                disabled={statePendudukNonPermanent.update.loading}
+                color="gray"
+                radius="md"
+                size="md"
+                onClick={handleResetForm}
               >
                 Batal
               </Button>
+
+              {/* Tombol Simpan */}
+              <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)',
+                }}
+              >
+                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+              </Button>
             </Group>
           </Stack>
         </Paper>

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

@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Skeleton,
   Stack,
@@ -34,13 +35,21 @@ function EditPelayananPerizinanBerusaha() {
     link: '',
   });
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [originalData, setOriginalData] = useState({
+    id: '',
+    name: '',
+    deskripsi: '',
+    link: '',
+  });
+
   // Load data detail
   useEffect(() => {
     if (!id) {
       toast.error("ID tidak valid");
       return;
     }
-  
+
     const loadData = async () => {
       try {
         setLoading(true);
@@ -52,6 +61,12 @@ function EditPelayananPerizinanBerusaha() {
             deskripsi: data.deskripsi || "",
             link: data.link || "",
           });
+          setOriginalData({
+            id: data.id,
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            link: data.link || "",
+          });
         } else {
           toast.error("Data tidak ditemukan");
         }
@@ -62,10 +77,10 @@ function EditPelayananPerizinanBerusaha() {
         setLoading(false);
       }
     };
-  
+
     loadData();
   }, [id]);
-  
+
 
   const handleChange =
     (field: keyof typeof formData) =>
@@ -76,13 +91,26 @@ function EditPelayananPerizinanBerusaha() {
         }));
       };
 
+  const handleResetForm = () => {
+    setFormData({
+      id: originalData.id,
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      link: originalData.link,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       await state.update.update(formData);
       router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
     } catch (error) {
       console.error('Error updating pelayanan perizinan berusaha:', error);
       toast.error('Terjadi kesalahan saat update data');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -99,14 +127,14 @@ function EditPelayananPerizinanBerusaha() {
       <Stack gap="xs">
         {/* Header */}
         <Group mb="md">
-            <Button
-              variant="subtle"
-              onClick={() => router.back()}
-              p="xs"
-              radius="md"
-            >
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
           <Title order={4} ml="sm" c="dark">
             Edit Pelayanan Perizinan Berusaha
           </Title>
@@ -147,23 +175,31 @@ function EditPelayananPerizinanBerusaha() {
               />
             </Box>
 
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={state.update.loading}
-                disabled={!formData.name}
-              >
-                {state.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-              </Button>
-
+            <Group justify="right">
+              {/* Tombol Batal */}
               <Button
                 variant="outline"
-                onClick={() => router.back()}
-                disabled={state.update.loading}
+                color="gray"
+                radius="md"
+                size="md"
+                onClick={handleResetForm}
               >
                 Batal
               </Button>
+
+              {/* Tombol Simpan */}
+              <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)',
+                }}
+              >
+                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+              </Button>
             </Group>
           </Stack>
         </Paper>

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

@@ -1,124 +1,280 @@
-'use client'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+'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 ApiFetch from '@/lib/api-fetch';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
+import * as React from 'react';
 
+// 🔹 Types
+interface FormData {
+  name: string;
+  deskripsi: string;
+  imageId: string;
+  image2Id: string;
+  imageUrl: string;
+  image2Url: string;
+}
+
+interface FileUploaderProps {
+  title: string;
+  file: File | null;
+  setFile: React.Dispatch<React.SetStateAction<File | null>>;
+  preview: string | null;
+  setPreview: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+// 🔹 File Uploader Component
+const FileUploader: React.FC<FileUploaderProps> = ({ 
+  title, 
+  file, 
+  setFile, 
+  preview, 
+  setPreview 
+}) => {
+  const handleDrop = (files: File[]) => {
+    const selected = files[0];
+    if (selected) {
+      setFile(selected);
+      setPreview(URL.createObjectURL(selected));
+    }
+  };
+
+  const handleRemove = () => {
+    setPreview(null);
+    setFile(null);
+  };
+
+  return (
+    <Box>
+      <Text fw="bold" fz="sm" mb={6}>
+        {title}
+      </Text>
+      <Dropzone
+        onDrop={handleDrop}
+        onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+        maxSize={5 * 1024 ** 2}
+        accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
+        radius="md"
+        p="xl"
+      >
+        <Group justify="center" gap="xl" mih={180}>
+          <Dropzone.Accept>
+            <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+          </Dropzone.Accept>
+          <Dropzone.Reject>
+            <IconX size={48} color="red" stroke={1.5} />
+          </Dropzone.Reject>
+          <Dropzone.Idle>
+            <IconPhoto size={48} color="#868e96" stroke={1.5} />
+          </Dropzone.Idle>
+          <Stack gap="xs" align="center">
+            <Text size="md" fw={500}>
+              Seret gambar atau klik untuk memilih file
+            </Text>
+            <Text size="sm" c="dimmed">
+              Maksimal 5MB, format .png, .jpg, .jpeg, .webp
+            </Text>
+          </Stack>
+        </Group>
+      </Dropzone>
+
+      {preview && (
+        <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
+          <Image
+            src={preview}
+            alt="Preview Gambar"
+            radius="md"
+            style={{
+              maxHeight: 200,
+              objectFit: 'contain',
+              border: '1px solid #ddd',
+            }}
+          />
+          <ActionIcon
+            variant="filled"
+            color="red"
+            radius="xl"
+            size="sm"
+            pos="absolute"
+            top={5}
+            right={5}
+            onClick={handleRemove}
+            style={{ boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
+          >
+            <IconX size={14} />
+          </ActionIcon>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+// 🔹 Main Component
 function EditSuratKeterangan() {
   const router = useRouter();
   const params = useParams();
-  const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
 
-  // state lokal untuk form
-  const [formData, setFormData] = useState({
+  // 🧩 State
+  const [formData, setFormData] = useState<FormData>({
     name: '',
     deskripsi: '',
     imageId: '',
     image2Id: '',
+    imageUrl: '',
+    image2Url: '',
   });
-
-  // state file upload
+  const [originalData, setOriginalData] = useState<FormData>(formData);
   const [file, setFile] = useState<File | null>(null);
   const [file2, setFile2] = useState<File | null>(null);
-
-  // state preview gambar
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [previewImage2, setPreviewImage2] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data awal
+  // 🧭 Load Initial Data
   useEffect(() => {
     const loadSurat = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await stateSurat.edit.load(id);
+        const data = await stateLayananDesa.suratKeterangan.edit.load(id);
         if (!data) return;
 
-        setFormData((prev) => ({
-          ...prev,
-          ...{
-            name: prev.name || data.name || "",
-            deskripsi: prev.deskripsi || data.deskripsi || "",
-            imageId: prev.imageId || data.imageId || "",
-            image2Id: prev.image2Id || data.image2Id || "",
-          },
-        }));
+        const mapped: FormData = {
+          name: data.name || '',
+          deskripsi: data.deskripsi || '',
+          imageId: data.imageId || '',
+          image2Id: data.image2Id || '',
+          imageUrl: data.image?.link || '',
+          image2Url: data.image2?.link || ''
+        };
 
-        if (data.image?.link && !previewImage) setPreviewImage(data.image.link);
-        if (data.image2?.link && !previewImage2) setPreviewImage2(data.image2.link);
+        setFormData(mapped);
+        setOriginalData(mapped);
+
+        if (data.image?.link) setPreviewImage(data.image.link);
+        if (data.image2?.link) setPreviewImage2(data.image2.link);
       } catch (error) {
-        console.error("Error loading surat:", error);
-        toast.error("Gagal memuat data surat");
+        console.error('Error loading surat:', error);
+        toast.error('Gagal memuat data surat');
       }
     };
 
     loadSurat();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [params?.id]);
 
+  // 📤 Upload File Helper
+  const uploadFile = async (file: File): Promise<string | null> => {
+    try {
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
+      const uploaded = res.data?.data;
+      return uploaded?.id || null;
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      return null;
+    }
+  };
 
+  // 🔁 Reset Form
+  const handleResetForm = () => {
+    setFormData(originalData);
+    setPreviewImage(originalData.imageUrl || null);
+    setPreviewImage2(originalData.image2Url || null);
+    setFile(null);
+    setFile2(null);
+    toast.info('Form dikembalikan ke data awal');
+  };
 
-  // handler untuk submit
+  // 💾 Submit Handler
   const handleSubmit = useCallback(async () => {
     try {
-      // update form global hanya saat submit
-      stateSurat.edit.form = { ...stateSurat.edit.form, ...formData };
+      setIsSubmitting(true);
 
-      // upload file 1
+      // ✅ Access original state directly (not proxy)
+      const originalState = stateLayananDesa.suratKeterangan;
+
+      // Update form data properties individually
+      originalState.edit.form.name = formData.name;
+      originalState.edit.form.deskripsi = formData.deskripsi;
+      originalState.edit.form.imageId = formData.imageId;
+      originalState.edit.form.image2Id = formData.image2Id;
+
+      // Upload file 1 if exists
       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');
-        stateSurat.edit.form.imageId = uploaded.id;
+        const uploadedId = await uploadFile(file);
+        if (!uploadedId) {
+          toast.error('Gagal upload gambar pertama');
+          return;
+        }
+        originalState.edit.form.imageId = uploadedId;
       }
 
-      // upload file 2
+      // Upload file 2 if exists
       if (file2) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
-        const uploaded = res.data?.data;
-        if (!uploaded?.id) return toast.error('Gagal upload gambar');
-        stateSurat.edit.form.image2Id = uploaded.id;
+        const uploadedId = await uploadFile(file2);
+        if (!uploadedId) {
+          toast.error('Gagal upload gambar kedua');
+          return;
+        }
+        originalState.edit.form.image2Id = uploadedId;
       }
 
-      await stateSurat.edit.update();
+      // Submit update
+      await originalState.edit.update();
       toast.success('Surat berhasil diperbarui!');
       router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
     } catch (error) {
       console.error('Error updating surat:', error);
       toast.error('Terjadi kesalahan saat memperbarui surat');
+    } finally {
+      setIsSubmitting(false);
     }
-  }, [formData, file, file2, router, stateSurat.edit]);
+  }, [formData, file, file2, router]);
+
+  // 📝 Form Field Handlers
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({ ...prev, name: e.target.value }));
+  };
+
+  const handleDeskripsiChange = (html: string) => {
+    setFormData(prev => ({ ...prev, deskripsi: html }));
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Back Button */}
+      {/* Header */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Surat Keterangan
         </Title>
       </Group>
 
+      {/* Form */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -128,154 +284,66 @@ function EditSuratKeterangan() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
-          {/* Input nama */}
+          {/* Nama Surat */}
           <TextInput
             label="Nama Surat Keterangan"
             placeholder="Masukkan nama surat keterangan"
             value={formData.name}
-            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
+            onChange={handleNameChange}
             required
           />
 
-          {/* Input deskripsi */}
+          {/* Deskripsi */}
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Konten
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) =>
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
-              }
+              onChange={handleDeskripsiChange}
             />
           </Box>
 
-          {/* Upload Gambar 1 */}
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Konten Pelayanan
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+          {/* Gambar 1 */}
+          <FileUploader
+            title="Gambar Konten Pelayanan"
+            file={file}
+            setFile={setFile}
+            preview={previewImage}
+            setPreview={setPreviewImage}
+          />
 
-            {previewImage && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar 1"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
-                  }}
-                  loading="lazy"
-                />
-              </Box>
-            )}
-          </Box>
-
-          {/* Upload Gambar 2 */}
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Alur Pelayanan Surat
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile2(selectedFile);
-                  setPreviewImage2(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
-
-            {previewImage2 && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                <Image
-                  src={previewImage2}
-                  alt="Preview Gambar 2"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
-                  }}
-                  loading="lazy"
-                />
-              </Box>
-            )}
-          </Box>
+          {/* Gambar 2 */}
+          <FileUploader
+            title="Gambar Alur Pelayanan Surat"
+            file={file2}
+            setFile={setFile2}
+            preview={previewImage2}
+            setPreview={setPreviewImage2}
+          />
 
+          {/* Action Buttons */}
           <Group justify="right">
+            <Button 
+              variant="outline" 
+              color="gray" 
+              radius="md" 
+              onClick={handleResetForm}
+              disabled={isSubmitting}
+            >
+              Batal
+            </Button>
             <Button
               onClick={handleSubmit}
               radius="md"
-              size="md"
+              disabled={isSubmitting}
               style={{
                 background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+                boxShadow: '0 4px 15px rgba(79,172,254,0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>
@@ -284,4 +352,4 @@ function EditSuratKeterangan() {
   );
 }
 
-export default EditSuratKeterangan;
+export default EditSuratKeterangan;

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

@@ -5,10 +5,12 @@ import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -27,6 +29,7 @@ function CreateSuratKeterangan() {
   const [previewImage2, setPreviewImage2] = useState<{ preview: string; file: File } | null>(null);
   const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     stateSurat.create.form = {
@@ -45,6 +48,7 @@ function CreateSuratKeterangan() {
     }
 
     try {
+      setIsSubmitting(true);
       // Upload gambar utama
       const res1 = await ApiFetch.api.fileStorage.create.post({
         file: previewImage.file,
@@ -77,6 +81,8 @@ function CreateSuratKeterangan() {
     } catch (error) {
       console.error('Error creating surat keterangan:', error);
       toast.error('Terjadi kesalahan saat menambahkan surat keterangan');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -84,9 +90,9 @@ function CreateSuratKeterangan() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Surat Keterangan
         </Title>
@@ -103,7 +109,7 @@ function CreateSuratKeterangan() {
         <Stack gap="md">
           {/* Nama Surat */}
           <TextInput
-            defaultValue={stateSurat.create.form.name}
+            value={stateSurat.create.form.name}
             onChange={(val) => (stateSurat.create.form.name = val.target.value)}
             label="Nama Surat Keterangan"
             placeholder="Masukkan nama surat keterangan"
@@ -140,7 +146,7 @@ function CreateSuratKeterangan() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -161,7 +167,7 @@ function CreateSuratKeterangan() {
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box pos={"relative"} mt="sm" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage.preview}
                   alt="Preview Gambar Utama"
@@ -169,6 +175,23 @@ function CreateSuratKeterangan() {
                   style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
                   loading="lazy"
                 />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -190,7 +213,7 @@ function CreateSuratKeterangan() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -211,7 +234,7 @@ function CreateSuratKeterangan() {
             </Dropzone>
 
             {previewImage2 ? (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box pos={"relative"} mt="sm" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage2.preview}
                   alt="Preview Gambar Tambahan"
@@ -219,6 +242,23 @@ function CreateSuratKeterangan() {
                   style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
                   loading="lazy"
                 />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage2(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             ) : (
               <Text size="sm" c="dimmed" mt="sm" ta="center">
@@ -229,6 +269,17 @@ function CreateSuratKeterangan() {
 
           {/* Tombol Simpan */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -239,7 +290,7 @@ function CreateSuratKeterangan() {
                 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)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/edit/page.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -21,6 +22,7 @@ function EditPelayananTelunjukSakti() {
   const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState({
     name: '',
@@ -28,6 +30,12 @@ function EditPelayananTelunjukSakti() {
     link: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    deskripsi: '',
+    link: '',
+  });
+
   // Load data awal hanya sekali (pas ada id)
   useEffect(() => {
     const loadData = async () => {
@@ -42,6 +50,11 @@ function EditPelayananTelunjukSakti() {
             deskripsi: data.deskripsi ?? '',
             link: data.link ?? '',
           });
+          setOriginalData({
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            link: data.link ?? '',
+          });
         }
       } catch (error) {
         console.error('Error loading pelayanan telunjuk sakti:', error);
@@ -60,9 +73,19 @@ function EditPelayananTelunjukSakti() {
     []
   );
 
+  const handleResetForm = () => {
+      setFormData({
+        name: originalData.name,
+        deskripsi: originalData.deskripsi,
+        link: originalData.link,
+      });
+      toast.info("Form dikembalikan ke data awal");
+    };
+
   // Submit: update global state hanya saat simpan
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       stateTelunjukDesa.edit.form = {
         ...stateTelunjukDesa.edit.form,
         ...formData,
@@ -73,6 +96,8 @@ function EditPelayananTelunjukSakti() {
     } catch (error) {
       console.error('Error updating pelayanan telunjuk sakti:', error);
       toast.error('Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -125,6 +150,17 @@ function EditPelayananTelunjukSakti() {
 
           {/* Tombol Simpan */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -135,7 +171,7 @@ function EditPelayananTelunjukSakti() {
                 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)/desa/layanan/pelayanan_telunjuk_sakti_desa/create/page.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   TextInput,
@@ -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 CreatePelayananTelunjukDesa() {
   const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     stateTelunjukDesa.create.form = {
@@ -30,6 +33,7 @@ function CreatePelayananTelunjukDesa() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       await stateTelunjukDesa.create.create();
       resetForm();
       toast.success('Data pelayanan telunjuk sakti berhasil ditambahkan');
@@ -37,6 +41,8 @@ function CreatePelayananTelunjukDesa() {
     } catch (error) {
       console.error('Error create pelayanan telunjuk sakti:', error);
       toast.error('Terjadi kesalahan saat menambahkan data');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -64,7 +70,7 @@ function CreatePelayananTelunjukDesa() {
         <Stack gap="md">
           {/* Nama */}
           <TextInput
-            defaultValue={stateTelunjukDesa.create.form.name}
+            value={stateTelunjukDesa.create.form.name}
             onChange={(val) => {
               stateTelunjukDesa.create.form.name = val.target.value;
             }}
@@ -75,7 +81,7 @@ function CreatePelayananTelunjukDesa() {
 
           {/* Deskripsi */}
           <TextInput
-            defaultValue={stateTelunjukDesa.create.form.deskripsi}
+            value={stateTelunjukDesa.create.form.deskripsi}
             onChange={(val) => {
               stateTelunjukDesa.create.form.deskripsi = val.target.value;
             }}
@@ -86,7 +92,7 @@ function CreatePelayananTelunjukDesa() {
 
           {/* Link */}
           <TextInput
-            defaultValue={stateTelunjukDesa.create.form.link}
+            value={stateTelunjukDesa.create.form.link}
             onChange={(val) => {
               stateTelunjukDesa.create.form.link = val.target.value;
             }}
@@ -97,6 +103,17 @@ function CreatePelayananTelunjukDesa() {
 
           {/* Tombol Simpan */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -107,7 +124,7 @@ function CreatePelayananTelunjukDesa() {
                 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)/desa/penghargaan/[id]/edit/page.tsx

@@ -5,10 +5,12 @@ import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -29,6 +31,15 @@ function EditPenghargaan() {
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    juara: "",
+    deskripsi: "",
+    imageId: "",
+    imageUrl: "",
+  });
 
   // Lokal formData
   const [formData, setFormData] = useState({
@@ -46,17 +57,25 @@ function EditPenghargaan() {
 
       try {
         const data = await statePenghargaan.edit.load(id);
+        
         if (data) {
-          setFormData({
-            name: data.name || '',
-            juara: data.juara || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
+          const newForm = {
+            name: data.name || "",
+            juara: data.juara || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
+          };
+          setFormData(newForm);
+
+          // simpan juga versi original
+          const imageUrl = data.image?.link || "";
+          
+          setOriginalData({
+            ...newForm,
+            imageUrl: imageUrl,
           });
 
-          if (data?.image?.link) {
-            setPreviewImage(data.image.link);
-          }
+          setPreviewImage(imageUrl || null);
         }
       } catch (error) {
         console.error('Error loading penghargaan:', error);
@@ -67,33 +86,49 @@ function EditPenghargaan() {
     loadPenghargaan();
   }, [params?.id]);
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      juara: originalData.juara,
+      deskripsi: originalData.deskripsi,
+      imageId: originalData.imageId,
+    });
+    setPreviewImage(originalData.imageUrl || null);
+    setFile(null);
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   // Submit
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // Sync ke global state saat submit
-      statePenghargaan.edit.form = {
-        ...statePenghargaan.edit.form,
-        ...formData,
-      };
-
-      // Upload file baru (kalau ada)
+      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');
+          return toast.error("Gagal upload gambar");
         }
-
-        statePenghargaan.edit.form.imageId = uploaded.id;
+        imageId = uploaded.id;
       }
 
+      // Update global state form (baru di sini)
+      statePenghargaan.edit.form = {
+        ...statePenghargaan.edit.form,
+        name: formData.name,
+        juara: formData.juara,
+        deskripsi: formData.deskripsi,
+        imageId,
+      }
       await statePenghargaan.edit.update();
       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');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -152,7 +187,7 @@ function EditPenghargaan() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -171,25 +206,47 @@ function EditPenghargaan() {
                     Seret gambar atau klik untuk memilih file
                   </Text>
                   <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
+                    Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
                   </Text>
                 </Stack>
               </Group>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
+              <Box pos="relative" mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Box>
+                  <Image
+                    src={previewImage.startsWith('http') ? previewImage : `${window.location.origin}${previewImage}`}
+                    alt="Preview Gambar"
+                    radius="md"
+                    style={{
+                      maxHeight: 200,
+                      objectFit: 'contain',
+                      border: '1px solid #ddd',
+                    }}
+                    loading="lazy"
+                  />
+                </Box>
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
                   }}
-                  loading="lazy"
-                />
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -209,6 +266,17 @@ function EditPenghargaan() {
 
           {/* Tombol Simpan */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -219,7 +287,7 @@ function EditPenghargaan() {
                 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)/desa/penghargaan/create/page.tsx

@@ -2,10 +2,12 @@
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -26,6 +28,7 @@ function CreatePenghargaan() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     statePenghargaan.create.form = {
@@ -39,26 +42,34 @@ function CreatePenghargaan() {
   };
 
   const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn('Silakan pilih file gambar terlebih dahulu');
+    try {
+      setIsSubmitting(true);
+      if (!file) {
+        return toast.warn('Silakan pilih file gambar terlebih dahulu');
+      }
+
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
+
+      const uploaded = res.data?.data;
+
+      if (!uploaded?.id) {
+        return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+      }
+
+      statePenghargaan.create.form.imageId = uploaded.id;
+
+      await statePenghargaan.create.create();
+      resetForm();
+      router.push('/admin/desa/penghargaan');
+    } catch (error) {
+      console.error('Error creating penghargaan:', error);
+      toast.error('Terjadi kesalahan saat menambahkan penghargaan');
+    } finally {
+      setIsSubmitting(false);
     }
-
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
-
-    if (!uploaded?.id) {
-      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
-    }
-
-    statePenghargaan.create.form.imageId = uploaded.id;
-
-    await statePenghargaan.create.create();
-    resetForm();
-    router.push('/admin/desa/penghargaan');
   };
 
   return (
@@ -84,7 +95,7 @@ function CreatePenghargaan() {
       >
         <Stack gap="md">
           <TextInput
-            defaultValue={statePenghargaan.create.form.name}
+            value={statePenghargaan.create.form.name}
             onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
             label="Nama Penghargaan"
             placeholder="Masukkan nama penghargaan"
@@ -92,7 +103,7 @@ function CreatePenghargaan() {
           />
 
           <TextInput
-            defaultValue={statePenghargaan.create.form.juara}
+            value={statePenghargaan.create.form.juara}
             onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
             label="Juara"
             placeholder="Masukkan juara"
@@ -122,7 +133,7 @@ function CreatePenghargaan() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -143,7 +154,7 @@ function CreatePenghargaan() {
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box pos={"relative"} mt="sm" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
@@ -151,12 +162,41 @@ function CreatePenghargaan() {
                   style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
                   loading="lazy"
                 />
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
 
           {/* Button Submit */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -167,7 +207,7 @@ function CreatePenghargaan() {
                 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)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx

@@ -10,7 +10,8 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -22,8 +23,9 @@ function EditKategoriPengumuman() {
   const editState = useProxy(stateDesaPengumuman.category);
   const router = useRouter();
   const params = useParams();
-
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({ name: '' });
+  const [originalData, setOriginalData] = useState({ name: '' });
 
   // Load data awal sekali aja
   useEffect(() => {
@@ -35,6 +37,7 @@ function EditKategoriPengumuman() {
         const data = await editState.update.load(id);
         if (data) {
           setFormData({ name: data.name || '' });
+          setOriginalData({ name: data.name || '' });
         }
       } catch (error) {
         console.error('Error loading kategori Pengumuman:', error);
@@ -54,6 +57,7 @@ function EditKategoriPengumuman() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // Update global state hanya di sini
       editState.update.form = {
         ...editState.update.form,
@@ -66,9 +70,19 @@ function EditKategoriPengumuman() {
     } catch (error) {
       console.error('Error updating kategori Pengumuman:', error);
       toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  const handleResetForm = () => {
+      setFormData({
+        name: originalData.name,
+      });
+      toast.info("Form dikembalikan ke data awal");
+    };
+  
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
@@ -105,6 +119,17 @@ function EditKategoriPengumuman() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -115,7 +140,7 @@ function EditKategoriPengumuman() {
                 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)/desa/pengumuman/kategori-pengumuman/create/page.tsx

@@ -8,15 +8,19 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 function CreateKategoriPengumuman() {
   const createState = useProxy(stateDesaPengumuman.category);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     createState.create.form = {
@@ -25,9 +29,16 @@ function CreateKategoriPengumuman() {
   };
 
   const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push('/admin/desa/pengumuman/kategori-pengumuman');
+    try {
+      await createState.create.create();
+      resetForm();
+      router.push('/admin/desa/pengumuman/kategori-pengumuman');
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal menambahkan kategori pengumuman');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -60,12 +71,23 @@ function CreateKategoriPengumuman() {
           <TextInput
             label="Nama Kategori Pengumuman"
             placeholder="Masukkan nama kategori pengumuman"
-            defaultValue={createState.create.form.name || ''}
+            value={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -76,7 +98,7 @@ function CreateKategoriPengumuman() {
                 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)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx

@@ -13,7 +13,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader
 } from "@mantine/core";
 import { IconArrowBack } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
@@ -33,6 +34,15 @@ function EditPengumuman() {
     content: "",
   });
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    judul: "",
+    deskripsi: "",
+    categoryPengumumanId: "",
+    content: "",
+  });
+
   // Load kategori & pengumuman by id saat pertama kali
   useEffect(() => {
     editState.category.findMany.load();
@@ -50,6 +60,12 @@ function EditPengumuman() {
             categoryPengumumanId: data.categoryPengumumanId || "",
             content: data.content || "",
           });
+          setOriginalData({
+            judul: data.judul || "",
+            deskripsi: data.deskripsi || "",
+            categoryPengumumanId: data.categoryPengumumanId || "",
+            content: data.content || "",
+          });
         }
       } catch (error) {
         console.error("Error loading pengumuman:", error);
@@ -66,6 +82,7 @@ function EditPengumuman() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // update global state hanya sekali pas submit
       editState.pengumuman.edit.form = {
         ...editState.pengumuman.edit.form,
@@ -78,9 +95,21 @@ function EditPengumuman() {
     } catch (error) {
       console.error("Error updating pengumuman:", error);
       toast.error("Terjadi kesalahan saat memperbarui pengumuman");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      deskripsi: originalData.deskripsi,
+      categoryPengumumanId: originalData.categoryPengumumanId,
+      content: originalData.content,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   return (
     <Box px={{ base: "sm", md: "lg" }} py="md">
       <Group mb="md">
@@ -152,17 +181,29 @@ function EditPengumuman() {
           </Box>
 
           <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <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)",
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                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)/desa/pengumuman/list-pengumuman/create/page.tsx

@@ -12,25 +12,37 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 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 CreatePengumuman() {
   const pengumumanState = useProxy(stateDesaPengumuman);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useShallowEffect(() => {
     pengumumanState.category.findMany.load();
   }, []);
 
   const handleSubmit = async () => {
-    await pengumumanState.pengumuman.create.create();
-    resetForm();
-    router.push('/admin/desa/pengumuman/list-pengumuman');
+    try {
+      setIsSubmitting(true);
+      await pengumumanState.pengumuman.create.create();
+      resetForm();
+      router.push('/admin/desa/pengumuman/list-pengumuman');
+    } catch (error) {
+      console.error('Error creating pengumuman:', error);
+      toast.error('Terjadi kesalahan saat membuat pengumuman');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const resetForm = () => {
@@ -46,9 +58,9 @@ function CreatePengumuman() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Pengumuman
         </Title>
@@ -65,7 +77,7 @@ function CreatePengumuman() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            defaultValue={pengumumanState.pengumuman.create.form.judul}
+            value={pengumumanState.pengumuman.create.form.judul}
             onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
             label="Judul"
             placeholder="Masukkan judul pengumuman"
@@ -76,21 +88,32 @@ function CreatePengumuman() {
           <Select
             label="Kategori"
             placeholder="Pilih kategori"
-            value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
-            onChange={(val) => {
-              pengumumanState.pengumuman.create.form.categoryPengumumanId = val ?? "";
-            }}
             data={pengumumanState.category.findMany.data?.map((item) => ({
               label: item.name,
               value: item.id,
-            }))}
+            })) || []}
+            value={pengumumanState.pengumuman.create.form.categoryPengumumanId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = pengumumanState.category.findMany.data?.find(
+                  (item) => item.id === val
+                );
+                if (selected) {
+                  pengumumanState.pengumuman.create.form.categoryPengumumanId = selected.id;
+                }
+              } else {
+                pengumumanState.pengumuman.create.form.categoryPengumumanId = '';
+              }
+            }}
             searchable
+            clearable
             nothingFoundMessage="Tidak ditemukan"
+            required
           />
 
           {/* Deskripsi Singkat */}
           <TextInput
-            defaultValue={pengumumanState.pengumuman.create.form.deskripsi}
+            value={pengumumanState.pengumuman.create.form.deskripsi}
             onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
             label="Deskripsi Singkat"
             placeholder="Masukkan deskripsi singkat"
@@ -112,6 +135,17 @@ function CreatePengumuman() {
 
           {/* Tombol Submit */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -122,7 +156,7 @@ function CreatePengumuman() {
                 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)/desa/potensi/kategori-potensi/[id]/page.tsx

@@ -9,7 +9,8 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -26,6 +27,12 @@ function EditKategoriPotensi() {
     nama: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    nama: '',
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   // Load data dari backend -> isi ke formData lokal
   useEffect(() => {
     const loadKategori = async () => {
@@ -38,6 +45,9 @@ function EditKategoriPotensi() {
           setFormData({
             nama: data.nama || '',
           });
+          setOriginalData({
+            nama: data.nama || '',
+          });
         }
       } catch (error) {
         console.error('Error loading kategori potensi:', error);
@@ -55,8 +65,16 @@ function EditKategoriPotensi() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // Update global state hanya pas submit
       editState.update.form = {
         ...editState.update.form,
@@ -69,6 +87,8 @@ function EditKategoriPotensi() {
     } catch (error) {
       console.error('Error updating kategori potensi:', error);
       toast.error('Terjadi kesalahan saat memperbarui kategori potensi');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -106,6 +126,17 @@ function EditKategoriPotensi() {
           />
 
           <Group justify="flex-end">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -116,7 +147,7 @@ function EditKategoriPotensi() {
                 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)/desa/potensi/kategori-potensi/create/page.tsx

@@ -8,15 +8,18 @@ import {
   Paper,
   Stack,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function CreateKategoriPotensi() {
   const createState = useProxy(potensiDesaState.kategoriPotensi);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     createState.create.form = {
@@ -25,23 +28,30 @@ function CreateKategoriPotensi() {
   };
 
   const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push('/admin/desa/potensi/kategori-potensi');
+    try {
+      setIsSubmitting(true);
+      await createState.create.create();
+      resetForm();
+      router.push('/admin/desa/potensi/kategori-potensi');
+    } catch (error) {
+      console.error('Error creating kategori potensi:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header dengan back button */}
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Kategori Potensi
         </Title>
@@ -60,12 +70,23 @@ function CreateKategoriPotensi() {
           <TextInput
             label="Nama Kategori Potensi"
             placeholder="Masukkan nama kategori potensi"
-            defaultValue={createState.create.form.nama || ''}
+            value={createState.create.form.nama || ''}
             onChange={(e) => (createState.create.form.nama = e.target.value)}
             required
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -76,7 +97,7 @@ function CreateKategoriPotensi() {
                 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)/desa/potensi/list-potensi/[id]/edit/page.tsx

@@ -15,7 +15,9 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader,
+  ActionIcon
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
@@ -38,6 +40,16 @@ function EditPotensi() {
     content: "",
     imageId: "",
   });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    deskripsi: "",
+    kategoriId: "",
+    content: "",
+    imageId: "",
+    imageUrl: "",
+  });
 
   // handle input changes
   const handleChange = (field: string, value: string) => {
@@ -46,11 +58,11 @@ function EditPotensi() {
 
   useEffect(() => {
     potensiDesaState.kategoriPotensi.findMany.load();
-  
+
     const loadPotensi = async () => {
       const id = params?.id as string;
       if (!id) return;
-  
+
       try {
         const data = await potensiState.edit.load(id);
         if (data) {
@@ -61,35 +73,45 @@ 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);
-          }
+
+          setOriginalData({
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            kategoriId: data.kategoriId || "",
+            content: data.content || "",
+            imageId: data.imageId || "",
+            imageUrl: data.image?.link || "",
+          });
+          setPreviewImage(data.image.link);
+
         }
       } catch (error) {
         console.error("Error loading potensi:", error);
         toast.error("Gagal memuat data potensi");
       }
     };
-  
+
     loadPotensi();
   }, [params?.id]);
-  
+
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name || "",
+      deskripsi: originalData.deskripsi || "",
+      kategoriId: originalData.kategoriId || "",
+      content: originalData.content || "",
+      imageId: originalData.imageId || ""
+    });
+    setPreviewImage(originalData.imageUrl || null);
+    setFile(null);
+    toast.info("Form dikembalikan ke data awal");
+  };
+
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       let imageId = formData.imageId;
-
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file,
@@ -115,20 +137,22 @@ function EditPotensi() {
     } catch (error) {
       console.error("Error updating potensi:", error);
       toast.error("Terjadi kesalahan saat memperbarui potensi");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <Box px={{ base: "sm", md: "lg" }} py="md">
       <Group mb="md">
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors["blue-button"]} size={24} />
-          </Button>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors["blue-button"]} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Potensi Desa
         </Title>
@@ -164,6 +188,32 @@ function EditPotensi() {
           </Box>
 
           <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            data={potensiDesaState.kategoriPotensi.findMany.data?.map((item) => ({
+              label: item.nama,
+              value: item.id,
+            })) || []}
+            value={formData.kategoriId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = potensiDesaState.kategoriPotensi.findMany.data?.find(
+                  (item) => item.id === val
+                );
+                if (selected) {
+                  handleChange("kategoriId", selected.id);
+                }
+              } else {
+                handleChange("kategoriId", "");
+              }
+            }}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
+          />
+
+          {/* <Select
             value={formData.kategoriId}
             onChange={(val) => handleChange("kategoriId", val || "")}
             label="Kategori"
@@ -178,7 +228,7 @@ function EditPotensi() {
             searchable
             required
             error={!formData.kategoriId ? "Pilih kategori" : undefined}
-          />
+          /> */}
 
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
@@ -219,25 +269,45 @@ function EditPotensi() {
                     Seret gambar atau klik untuk memilih file
                   </Text>
                   <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
+                    Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
                   </Text>
                 </Stack>
               </Group>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
                   radius="md"
                   style={{
-                    maxHeight: 220,
-                    objectFit: "contain",
-                    border: `1px solid ${colors["blue-button"]}`,
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
                   }}
                   loading="lazy"
                 />
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -255,17 +325,29 @@ function EditPotensi() {
           </Box>
 
           <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <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)",
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                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)/desa/potensi/list-potensi/create/page.tsx

@@ -14,7 +14,9 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader,
+  ActionIcon
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -28,30 +30,39 @@ function CreatePotensi() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useEffect(() => {
     potensiDesaState.kategoriPotensi.findMany.load();
   }, []);
 
   const handleSubmit = async () => {
-    if (!file) return toast.warn('Pilih file gambar terlebih dahulu');
+    try {
+      setIsSubmitting(true);
+      if (!file) return toast.warn('Pilih file gambar terlebih dahulu');
 
-    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');
+      const uploaded = res.data?.data;
+      if (!uploaded?.id) {
+        return toast.error('Gagal upload gambar');
+      }
+
+      potensiState.create.form.imageId = uploaded.id;
+
+      await potensiState.create.create();
+
+      resetForm();
+      router.push('/admin/desa/potensi/list-potensi');
+    } catch (error) {
+      console.error('Error creating potensi:', error);
+      toast.error('Terjadi kesalahan saat menambahkan potensi');
+    } finally {
+      setIsSubmitting(false);
     }
-
-    potensiState.create.form.imageId = uploaded.id;
-
-    await potensiState.create.create();
-
-    resetForm();
-    router.push('/admin/desa/potensi/list-potensi');
   };
 
   const resetForm = () => {
@@ -71,9 +82,9 @@ function CreatePotensi() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Header */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Tambah Potensi Desa
         </Title>
@@ -90,7 +101,7 @@ function CreatePotensi() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            defaultValue={potensiState.create.form.name}
+            value={potensiState.create.form.name}
             onChange={(val) => (potensiState.create.form.name = val.target.value)}
             label="Judul"
             placeholder="Masukkan judul potensi"
@@ -112,6 +123,32 @@ function CreatePotensi() {
 
           {/* Kategori */}
           <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            data={potensiDesaState.kategoriPotensi.findMany.data?.map((item) => ({
+              label: item.nama,
+              value: item.id,
+            })) || []}
+            value={potensiState.create.form.kategoriId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = potensiDesaState.kategoriPotensi.findMany.data?.find(
+                  (item) => item.id === val
+                );
+                if (selected) {
+                  potensiState.create.form.kategoriId = selected.id;
+                }
+              } else {
+                potensiState.create.form.kategoriId = '';
+              }
+            }}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
+          />
+
+          {/* <Select
             label="Kategori"
             placeholder="Pilih kategori"
             value={potensiState.create.form.kategoriId || ""}
@@ -122,7 +159,7 @@ function CreatePotensi() {
               value: item.id,
               label: item.nama,
             }))}
-          />
+          /> */}
 
           {/* Upload Gambar */}
           <Box>
@@ -139,7 +176,7 @@ function CreatePotensi() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -157,17 +194,44 @@ function CreatePotensi() {
               <Text ta="center" mt="sm" size="sm" color="dimmed">
                 Seret gambar atau klik untuk memilih file (maks 5MB)
               </Text>
+              <Text size="sm" c="dimmed">
+                Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
+              </Text>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
                   radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                  loading='lazy'
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                  loading="lazy"
                 />
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -187,6 +251,17 @@ function CreatePotensi() {
 
           {/* Tombol Simpan */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -197,7 +272,7 @@ function CreatePotensi() {
                 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)/desa/profile/profile-desa/[id]/lambang_desa/page.tsx

@@ -1,152 +1,244 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Alert,
+  Box,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from '@mantine/core';
 import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
 
+// 🧩 Type untuk form
+interface FormData {
+  judul: string;
+  deskripsi: string;
+}
+
+// 🧩 Main Component
 function Page() {
-    const lambangState = useProxy(stateProfileDesa.lambangDesa)
-    const router = useRouter()
-    const params = useParams()
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    // Load data
-    useEffect(() => {
-        const loadData = async () => {
-            const id = params?.id as string;
-            if (!id) {
-                toast.error("ID tidak valid");
-                router.push("/admin/desa/profile/profile-desa");
-                return;
-            }
+  const router = useRouter();
+  const params = useParams();
 
-            try {
-                const data = await lambangState.findUnique.load(id);
-                lambangState.update.initialize(data);
-            } catch (error) {
-                console.error("Error loading lambang:", error);
-                toast.error("Gagal memuat data lambang desa");
-            }
-        };
+  const [formData, setFormData] = useState<FormData>({ judul: '', deskripsi: '' });
+  const [originalData, setOriginalData] = useState<FormData>({ judul: '', deskripsi: '' });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
-        loadData();
+  // 🧭 Load data awal
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error('ID tidak valid');
+        router.push('/admin/desa/profile/profile-desa');
+        return;
+      }
 
-        return () => {
-            lambangState.update.reset();
-            lambangState.findUnique.reset();
-        };
-    }, [params?.id, router]);
+      setIsLoading(true);
+      setLoadError(null);
 
-    const handleSubmit = async () => {
-        if (isSubmitting || !lambangState.update.form.judul.trim()) {
-            toast.error("Judul wajib diisi");
-            return;
-        }
-
-        setIsSubmitting(true);
-
-        try {
-            const success = await lambangState.update.submit();
-
-            if (success) {
-                toast.success("Data berhasil disimpan");
-                router.push("/admin/desa/profile/profile-desa");
-            }
-        } catch (error) {
-            console.error("Error update lambang desa:", error);
-            toast.error("Terjadi kesalahan saat update lambang desa");
-        } finally {
-            setIsSubmitting(false);
+      try {
+        const data = await stateProfileDesa.lambangDesa.findUnique.load(id);
+
+        if (data) {
+          const initial: FormData = {
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+          };
+          setFormData(initial);
+          setOriginalData(initial);
+
+          // Penting untuk isi id di state sebelum submit
+          stateProfileDesa.lambangDesa.update.initialize(data);
+        } else {
+          setLoadError('Data tidak ditemukan');
         }
+      } catch (error) {
+        console.error('Error loading lambang:', error);
+        setLoadError('Gagal memuat data lambang desa');
+        toast.error('Gagal memuat data lambang desa');
+      } finally {
+        setIsLoading(false);
+      }
     };
 
-    const handleBack = () => router.back();
+    loadData();
 
-    // Loading state
-    if (lambangState.findUnique.loading || lambangState.update.loading) {
-        return (
-            <Box>
-                <Center h={400}>
-                    <Text>Memuat data...</Text>
-                </Center>
-            </Box>
-        );
+    return () => {
+      stateProfileDesa.lambangDesa.update.reset();
+      stateProfileDesa.lambangDesa.findUnique.reset();
+    };
+  }, [params?.id, router]);
+
+  // 🔁 Reset form
+  const handleResetForm = () => {
+    setFormData(originalData);
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  // 💾 Submit handler
+  const handleSubmit = async () => {
+    if (!formData.judul.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
     }
 
-    // Error state
-    if (lambangState.findUnique.error) {
-        return (
-            <Box>
-                <Stack gap="md">
-                    <Button variant="subtle" onClick={handleBack}>
-                        <IconArrowBack color={colors['blue-button']} size={20} />
-                    </Button>
-                    <Alert icon={<IconAlertCircle size={16} />} color="red">
-                        <Text fw="bold">Error</Text>
-                        <Text>{lambangState.findUnique.error}</Text>
-                    </Alert>
-                </Stack>
-            </Box>
-        );
-    }
+    setIsSubmitting(true);
+    try {
+      const state = stateProfileDesa.lambangDesa;
+      state.update.form.judul = formData.judul;
+      state.update.form.deskripsi = formData.deskripsi;
 
+      const success = await state.update.submit();
+
+      if (success) {
+        toast.success('Data berhasil disimpan');
+        router.push('/admin/desa/profile/profile-desa');
+      } else {
+        toast.error('Gagal menyimpan data');
+      }
+    } catch (error) {
+      console.error('Error update lambang desa:', error);
+      toast.error('Terjadi kesalahan saat update lambang desa');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // 📝 Handlers
+  const handleJudulChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({ ...prev, judul: e.target.value }));
+  };
+
+  const handleDeskripsiChange = (html: string) => {
+    setFormData(prev => ({ ...prev, deskripsi: html }));
+  };
+
+  const handleBack = () => router.back();
+
+  // 🔄 Loading
+  if (isLoading) {
     return (
-        <Box>
-            <Stack gap="xs">
-                <Group mb="md">
-                    <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-                        <IconArrowBack color={colors['blue-button']} size={24} />
-                    </Button>
-                    <Title order={4} ml="sm" c="dark">Edit Lambang Desa</Title>
-                </Group>
-
-                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
-                    <Stack gap="xs">
-                        <Title order={3}>Edit Lambang Desa</Title>
-
-                        {/* Judul */}
-                        <TextInput
-                            label={<Text fw="bold">Judul</Text>}
-                            placeholder="Judul lambang"
-                            defaultValue={lambangState.update.form.judul}
-                            onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
-                            error={!lambangState.update.form.judul && "Judul wajib diisi"}
-                        />
-
-                        {/* Deskripsi */}
-                        <Box>
-                            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-                            <EditEditor
-                                value={lambangState.update.form.deskripsi}
-                                onChange={(val) => lambangState.update.form.deskripsi = val}
-                            />
-                        </Box>
-
-                        {/* Buttons */}
-                        <Group>
-                            <Button
-                                bg={colors['blue-button']}
-                                onClick={handleSubmit}
-                                loading={isSubmitting || lambangState.update.loading}
-                                disabled={!lambangState.update.form.judul}
-                            >
-                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-                            </Button>
-
-                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || lambangState.update.loading}>
-                                Batal
-                            </Button>
-                        </Group>
-                    </Stack>
-                </Paper>
-            </Stack>
-        </Box>
+      <Box>
+        <Center h={400}>
+          <Stack align="center" gap="md">
+            <Loader size="lg" color={colors['blue-button']} />
+            <Text size="lg" fw={500} c="dimmed">
+              Memuat data lambang desa...
+            </Text>
+          </Stack>
+        </Center>
+      </Box>
     );
+  }
+
+  // ❌ Error
+  if (loadError) {
+    return (
+      <Box px={{ base: 'sm', md: 'lg' }} py="md">
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={20} />} color="red" title="Terjadi Kesalahan" radius="md">
+            {loadError}
+          </Alert>
+          <Button onClick={() => router.push('/admin/desa/profile/profile-desa')} variant="outline">
+            Kembali ke Halaman Utama
+          </Button>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // 🧱 UI utama
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Stack gap="md">
+        {/* Header */}
+        <Group mb="sm">
+          <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+          <Title order={4} ml="sm" c="dark">
+            Edit Lambang Desa
+          </Title>
+        </Group>
+
+        {/* Form */}
+        <Paper
+          w={{ base: '100%', md: '60%' }}
+          bg={colors['white-1']}
+          p="xl"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="lg">
+            {/* Judul */}
+            <TextInput
+              label={<Text fw="bold" size="sm">Judul</Text>}
+              placeholder="Masukkan judul lambang desa"
+              value={formData.judul}
+              onChange={handleJudulChange}
+              error={!formData.judul.trim() && 'Judul wajib diisi'}
+              required
+              size="md"
+              radius="md"
+            />
+
+            {/* Deskripsi */}
+            <Box>
+              <Text fw="bold" size="sm" mb={8}>
+                Deskripsi
+              </Text>
+              <EditEditor value={formData.deskripsi} onChange={handleDeskripsiChange} />
+            </Box>
+
+            {/* Tombol Aksi */}
+            <Group justify="right">
+              <Button
+                variant="outline"
+                color="gray"
+                radius="md"
+                size="md"
+                onClick={handleResetForm}
+                disabled={isSubmitting}
+              >
+                Batal
+              </Button>
+              <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)',
+                }}
+                loading={isSubmitting}
+              >
+                Simpan
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
 }
 
 export default Page;

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

@@ -5,7 +5,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Alert, Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Center, Group, Image, Loader, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconAlertCircle, IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -19,8 +19,8 @@ function Page() {
   const params = useParams();
 
   const [images, setImages] = useState<
-  Array<{ file: File | null; preview: string; label: string; imageId?: string }>
->([]);
+    Array<{ file: File | null; preview: string; label: string; imageId?: string }>
+  >([]);
   const [formData, setFormData] = useState({
     judul: '',
     deskripsi: '',
@@ -28,6 +28,12 @@ function Page() {
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const [originalData, setOriginalData] = useState({
+    judul: "",
+    deskripsi: "",
+    images: [] as Array<{ label: string; imageId: string }>
+  });
+
   // Load data
   useEffect(() => {
     const loadData = async () => {
@@ -52,6 +58,17 @@ function Page() {
             })),
           });
 
+          setOriginalData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            images: (data.images || []).map((img: any) => ({
+              label: img.label,
+              imageId: img.image?.id ?? '',
+              preview: img.image?.link ?? '',
+            })),
+          });
+          
+
           if (data?.images?.length > 0 && data.images[0].image?.link) {
             setImages(data.images.map((img: any) => ({
               file: null,
@@ -77,15 +94,36 @@ function Page() {
 
   const handleBack = () => router.back();
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      deskripsi: originalData.deskripsi,
+      images: originalData.images.map((img) => ({
+        label: img.label,
+        imageId: img.imageId,
+      })),
+    });
+  
+    setImages(
+      originalData.images.map((img: any) => ({
+        file: null,
+        preview: img.preview, // pakai preview masing-masing, bukan cuma satu
+        label: img.label,
+        imageId: img.imageId,
+      }))
+    );
+  
+    toast.info("Form dikembalikan ke data awal");
+  };
+  
+
   const handleSubmit = async () => {
     if (isSubmitting || !formData.judul.trim()) {
       toast.error("Judul wajib diisi");
       return;
     }
-
-    setIsSubmitting(true);
-
     try {
+      setIsSubmitting(true);
       const uploadedImages = [];
 
       // Upload semua gambar baru
@@ -95,7 +133,7 @@ function Page() {
           uploadedImages.push({ imageId: img.imageId, label: img.label });
           continue;
         }
-      
+
         // upload baru
         const res = await ApiFetch.api.fileStorage.create.post({
           file: img.file,
@@ -108,7 +146,7 @@ function Page() {
         }
         uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
       }
-      
+
 
       // Update ke global state
       maskotState.update.updateField("judul", formData.judul);
@@ -161,9 +199,9 @@ function Page() {
     <Box>
       <Stack gap="xs">
         <Group mb="md">
-            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
+          <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
           <Title order={4} ml="sm" c="dark">Edit Maskot Desa</Title>
         </Group>
 
@@ -175,7 +213,7 @@ function Page() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul maskot"
-              defaultValue={formData.judul}
+              value={formData.judul}
               onChange={(e) => setFormData({ ...formData, judul: e.currentTarget.value })}
               error={!formData.judul && "Judul wajib diisi"}
             />
@@ -231,7 +269,7 @@ function Page() {
                             setImages(updated);
                           }}
                         >
-                          Hapus
+                          <IconX size={16} />
                         </Button>
                       </Group>
                       <Image
@@ -260,18 +298,31 @@ function Page() {
             </SimpleGrid>
 
             {/* Buttons */}
-            <Group>
+            <Group justify="right">
+              {/* Tombol Batal */}
               <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={isSubmitting || maskotState.update.loading}
-                disabled={!formData.judul}
+                variant="outline"
+                color="gray"
+                radius="md"
+                size="md"
+                onClick={handleResetForm}
               >
-                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-              </Button>
-              <Button variant="outline" onClick={handleBack} disabled={isSubmitting || maskotState.update.loading}>
                 Batal
               </Button>
+
+              {/* Tombol Simpan */}
+              <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)',
+                }}
+              >
+                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+              </Button>
             </Group>
           </Stack>
         </Paper>

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

@@ -1,146 +1,272 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+    Alert,
+    Box,
+    Button,
+    Center,
+    Group,
+    Loader,
+    Paper,
+    Stack,
+    Text,
+    TextInput,
+    Title
+} from '@mantine/core';
 import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
 
+// 🔹 Types
+interface FormData {
+    judul: string;
+    deskripsi: string;
+}
+
+// 🔹 Main Component
 function Page() {
-    const sejarahState = useProxy(stateProfileDesa.sejarahDesa)
-    const router = useRouter()
-    const params = useParams()
-    const [isSubmitting, setIsSubmitting] = useState(false);
+    const router = useRouter();
+    const params = useParams();
 
-    // Load data
+    // 🧩 Local State
+    const [formData, setFormData] = useState<FormData>({
+        judul: '',
+        deskripsi: '',
+    });
+    const [originalData, setOriginalData] = useState<FormData>({
+        judul: '',
+        deskripsi: '',
+    });
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [loadError, setLoadError] = useState<string | null>(null);
+
+    // 🧭 Load Initial Data
     useEffect(() => {
         const loadData = async () => {
             const id = params?.id as string;
             if (!id) {
-                toast.error("ID tidak valid");
-                router.push("/admin/desa/profile/profile-desa");
+                toast.error('ID tidak valid');
+                router.push('/admin/desa/profile/profile-desa');
                 return;
             }
 
+            setIsLoading(true);
+            setLoadError(null);
+
             try {
-                const data = await sejarahState.findUnique.load(id);
+                const data = await stateProfileDesa.sejarahDesa.findUnique.load(id);
+
                 if (data) {
-                    sejarahState.update.initialize(data);
+                    const initialData: FormData = {
+                        judul: data.judul || '',
+                        deskripsi: data.deskripsi || '',
+                    };
+
+                    setFormData(initialData);
+                    setOriginalData(initialData);
+
+                    stateProfileDesa.sejarahDesa.update.initialize(data);
+                } else {
+                    setLoadError('Data tidak ditemukan');
                 }
             } catch (error) {
-                console.error("Error loading sejarah:", error);
-                toast.error("Gagal memuat data sejarah desa");
+                console.error('Error loading sejarah:', error);
+                setLoadError('Gagal memuat data sejarah desa');
+                toast.error('Gagal memuat data sejarah desa');
+            } finally {
+                setIsLoading(false);
             }
         };
 
         loadData();
 
         return () => {
-            sejarahState.update.reset();
-            sejarahState.findUnique.reset();
+            stateProfileDesa.sejarahDesa.update.reset();
+            stateProfileDesa.sejarahDesa.findUnique.reset();
         };
     }, [params?.id, router]);
 
+    // 🔄 Check if form has changes
+    
+
+    // 🔁 Reset Form to Original Data
+    const handleResetForm = () => {
+        setFormData(originalData);
+        toast.info('Form dikembalikan ke data awal');
+    };
+
+    // 💾 Submit Handler
     const handleSubmit = async () => {
-        if (isSubmitting || !sejarahState.update.form.judul.trim()) {
-            toast.error("Judul wajib diisi");
+        // Validation
+        if (!formData.judul.trim()) {
+            toast.error('Judul wajib diisi');
             return;
         }
 
         setIsSubmitting(true);
+
         try {
-            const success = await sejarahState.update.submit();
+            // Access original state directly (not proxy)
+            const originalState = stateProfileDesa.sejarahDesa;
+
+            // Update form data
+            originalState.update.form.judul = formData.judul;
+            originalState.update.form.deskripsi = formData.deskripsi;
+
+            // Submit
+            const success = await originalState.update.submit();
+
             if (success) {
-                toast.success("Data berhasil disimpan");
-                router.push("/admin/desa/profile/profile-desa");
+                toast.success('Data berhasil disimpan');
+                router.push('/admin/desa/profile/profile-desa');
+            } else {
+                toast.error('Gagal menyimpan data');
             }
         } catch (error) {
-            console.error("Error update sejarah desa:", error);
-            toast.error("Terjadi kesalahan saat update sejarah desa");
+            console.error('Error update sejarah desa:', error);
+            toast.error('Terjadi kesalahan saat update sejarah desa');
         } finally {
             setIsSubmitting(false);
         }
     };
 
-    const handleBack = () => router.back();
+    // 📝 Form Field Handlers
+    const handleJudulChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setFormData(prev => ({ ...prev, judul: e.target.value }));
+    };
 
-    // Loading state
-    if (sejarahState.findUnique.loading || sejarahState.update.loading) {
+    const handleDeskripsiChange = (html: string) => {
+        setFormData(prev => ({ ...prev, deskripsi: html }));
+    };
+
+    const handleBack = () => {
+        router.back();
+    };
+    // 🔄 Loading State
+    if (isLoading) {
         return (
             <Box>
                 <Center h={400}>
-                    <Text>Memuat data...</Text>
+                    <Stack align="center" gap="md">
+                        <Loader size="lg" color={colors['blue-button']} />
+                        <Text size="lg" fw={500} c="dimmed">
+                            Memuat data...
+                        </Text>
+                    </Stack>
                 </Center>
             </Box>
         );
     }
 
-    // Error state
-    if (sejarahState.findUnique.error) {
+    // ❌ Error State
+    if (loadError) {
         return (
-            <Box>
+            <Box px={{ base: 'sm', md: 'lg' }} py="md">
                 <Stack gap="md">
-                    <Button variant="subtle" onClick={handleBack}>
-                        <IconArrowBack color={colors['blue-button']} size={20} />
+                    <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+                        <IconArrowBack color={colors['blue-button']} size={24} />
                     </Button>
-                    <Alert icon={<IconAlertCircle size={16} />} color="red">
-                        <Text fw="bold">Error</Text>
-                        <Text>{sejarahState.findUnique.error}</Text>
+                    <Alert
+                        icon={<IconAlertCircle size={20} />}
+                        color="red"
+                        title="Terjadi Kesalahan"
+                        radius="md"
+                    >
+                        {loadError}
                     </Alert>
+                    <Button
+                        onClick={() => router.push('/admin/desa/profile/profile-desa')}
+                        variant="outline"
+                    >
+                        Kembali ke Halaman Utama
+                    </Button>
                 </Stack>
             </Box>
         );
     }
 
     return (
-        <Box>
-            <Stack gap="xs">
-                <Group mb="md">
+        <Box px={{ base: 'sm', md: 'lg' }} py="md">
+            <Stack gap="md">
+                {/* Header */}
+                <Group mb="sm">
                     <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
                         <IconArrowBack color={colors['blue-button']} size={24} />
                     </Button>
-                    <Title order={4} ml="sm" c="dark">Edit Sejarah Desa</Title>
+                    <Title order={4} ml="sm" c="dark">
+                        Edit Sejarah Desa
+                    </Title>
                 </Group>
 
-                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
-                    <Stack gap="xs">
-                        <Title order={3}>Edit Sejarah Desa</Title>
-
-                        {/* Judul */}
+                {/* Form */}
+                <Paper
+                    w={{ base: '100%', md: '60%' }}
+                    bg={colors['white-1']}
+                    p="xl"
+                    radius="md"
+                    shadow="sm"
+                    style={{ border: '1px solid #e0e0e0' }}
+                >
+                    <Stack gap="lg">
+                        {/* Form Title */}
+                        <Box>
+                            <Title order={3} mb={4}>
+                                Informasi Sejarah Desa
+                            </Title>
+                        </Box>
+                        {/* Judul Field */}
                         <TextInput
-                            label={<Text fw="bold">Judul</Text>}
-                            placeholder="Judul sejarah"
-                            defaultValue={sejarahState.update.form.judul}
-                            onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
-                            error={!sejarahState.update.form.judul && "Judul wajib diisi"}
+                            label={<Text fw="bold" size="sm">Judul Sejarah</Text>}
+                            placeholder="Masukkan judul sejarah desa"
+                            value={formData.judul}
+                            onChange={handleJudulChange}
+                            error={!formData.judul.trim() && 'Judul wajib diisi'}
+                            required
+                            size="md"
+                            radius="md"
                         />
 
-                        {/* Deskripsi */}
+                        {/* Deskripsi Field */}
                         <Box>
-                            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                            <Text fw="bold" size="sm" mb={8}>
+                                Deskripsi Sejarah
+                            </Text>
                             <EditEditor
-                                value={sejarahState.update.form.deskripsi}
-                                onChange={(val) => sejarahState.update.form.deskripsi = val}
+                                value={formData.deskripsi}
+                                onChange={handleDeskripsiChange}
                             />
+
                         </Box>
 
-                        {/* Buttons */}
-                        <Group>
+                        {/* Action Buttons */}
+                        <Group justify="right">
+                            {/* Tombol Batal */}
                             <Button
-                                bg={colors['blue-button']}
-                                onClick={handleSubmit}
-                                loading={isSubmitting || sejarahState.update.loading}
-                                disabled={!sejarahState.update.form.judul}
+                                variant="outline"
+                                color="gray"
+                                radius="md"
+                                size="md"
+                                onClick={handleResetForm}
                             >
-                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                                Batal
                             </Button>
 
-                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || sejarahState.update.loading}>
-                                Batal
+                            {/* Tombol Simpan */}
+                            <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)',
+                                }}
+                            >
+                                {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
                             </Button>
                         </Group>
                     </Stack>
@@ -150,4 +276,4 @@ function Page() {
     );
 }
 
-export default Page;
+export default Page;

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

@@ -1,155 +1,247 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import {
+  Alert,
+  Box,
+  Button,
+  Center,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
 import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
 
+// 🔹 Types
+interface FormData {
+  visi: string;
+  misi: string;
+}
+
+// 🔹 Main Component
 function Page() {
-    const visiMisiState = useProxy(stateProfileDesa.visiMisiDesa)
-    const router = useRouter()
-    const params = useParams()
-    const [isSubmitting, setIsSubmitting] = useState(false);
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState<FormData>({ visi: '', misi: '' });
+  const [originalData, setOriginalData] = useState<FormData>({ visi: '', misi: '' });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
-    // Load data
-    useEffect(() => {
-        const loadData = async () => {
-            const id = params?.id as string;
-            if (!id) {
-                toast.error("ID tidak valid");
-                router.push("/admin/desa/profile/profile-desa");
-                return;
-            }
+  // 🧭 Load Data
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error('ID tidak valid');
+        router.push('/admin/desa/profile/profile-desa');
+        return;
+      }
 
-            try {
-                const data = await visiMisiState.findUnique.load(id);
-                visiMisiState.update.initialize(data);
-            } catch (error) {
-                console.error("Error loading visi misi:", error);
-                toast.error("Gagal memuat data visi misi desa");
-            }
-        };
+      setIsLoading(true);
+      setLoadError(null);
 
-        loadData();
+      try {
+        const data = await stateProfileDesa.visiMisiDesa.findUnique.load(id);
+        if (data) {
+          const initialData: FormData = {
+            visi: data.visi || '',
+            misi: data.misi || '',
+          };
+          setFormData(initialData);
+          setOriginalData(initialData);
 
-        return () => {
-            visiMisiState.update.reset();
-            visiMisiState.findUnique.reset();
-        };
-    }, [params?.id, router]);
-
-    const handleSubmit = async () => {
-        if (isSubmitting || !visiMisiState.update.form.visi.trim()) {
-            toast.error("Visi wajib diisi");
-            return;
-        }
-
-        setIsSubmitting(true);
-
-        try {
-            const success = await visiMisiState.update.submit();
-
-            if (success) {
-                toast.success("Data berhasil disimpan");
-                router.push("/admin/desa/profile/profile-desa");
-            }
-        } catch (error) {
-            console.error("Error update visi misi desa:", error);
-            toast.error("Terjadi kesalahan saat update visi misi desa");
-        } finally {
-            setIsSubmitting(false);
+          // set id ke state agar submit pakai endpoint benar
+          stateProfileDesa.visiMisiDesa.update.initialize(data);
+        } else {
+          setLoadError('Data tidak ditemukan');
         }
+      } catch (error) {
+        console.error('Error load visi misi:', error);
+        setLoadError('Gagal memuat data visi misi desa');
+        toast.error('Gagal memuat data visi misi desa');
+      } finally {
+        setIsLoading(false);
+      }
     };
 
-    const handleBack = () => router.back();
+    loadData();
 
-    // Loading state
-    if (visiMisiState.findUnique.loading || visiMisiState.update.loading) {
-        return (
-            <Box>
-                <Center h={400}>
-                    <Text>Memuat data...</Text>
-                </Center>
-            </Box>
-        );
+    return () => {
+      stateProfileDesa.visiMisiDesa.update.reset();
+      stateProfileDesa.visiMisiDesa.findUnique.reset();
+    };
+  }, [params?.id, router]);
+
+  // 🔄 Reset Form
+  const handleResetForm = () => {
+    setFormData(originalData);
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  // 💾 Submit
+  const handleSubmit = async () => {
+    if (!formData.visi.trim()) {
+      toast.error('Visi wajib diisi');
+      return;
     }
 
-    // Error state
-    if (visiMisiState.findUnique.error) {
-        return (
-            <Box>
-                <Stack gap="md">
-                    <Button variant="subtle" onClick={handleBack}>
-                        <IconArrowBack color={colors['blue-button']} size={20} />
-                    </Button>
-                    <Alert icon={<IconAlertCircle size={16} />} color="red">
-                        <Text fw="bold">Error</Text>
-                        <Text>{visiMisiState.findUnique.error}</Text>
-                    </Alert>
-                </Stack>
-            </Box>
-        );
-    }
+    setIsSubmitting(true);
+    try {
+      const originalState = stateProfileDesa.visiMisiDesa;
 
+      // update data form ke state sebelum submit
+      originalState.update.form.visi = formData.visi;
+      originalState.update.form.misi = formData.misi;
+
+      const success = await originalState.update.submit();
+
+      if (success) {
+        toast.success('Data berhasil disimpan');
+        router.push('/admin/desa/profile/profile-desa');
+      } else {
+        toast.error('Gagal menyimpan data');
+      }
+    } catch (error) {
+      console.error('Error update visi misi desa:', error);
+      toast.error('Terjadi kesalahan saat update visi misi desa');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // 🧭 Field handlers
+  const handleVisiChange = (html: string) => setFormData(prev => ({ ...prev, visi: html }));
+  const handleMisiChange = (html: string) => setFormData(prev => ({ ...prev, misi: html }));
+  const handleBack = () => router.back();
+
+  // ⏳ Loading
+  if (isLoading) {
     return (
-        <Box>
-            <Stack gap="xs">
-                <Group mb="md">
-                    <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-                        <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-                            <IconArrowBack color={colors['blue-button']} size={24} />
-                        </Button>
-                    </Button>
-                    <Title order={4} ml="sm" c="dark">Edit Visi Misi Desa</Title>
-                </Group>
-
-                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
-                    <Stack gap="xs">
-                        <Title order={3}>Edit Visi Misi Desa</Title>
-
-                        {/* Visi */}
-                        <Box>
-                            <Text fz={"md"} fw={"bold"}>Visi</Text>
-                            <EditEditor
-                                value={visiMisiState.update.form.visi}
-                                onChange={(val) => visiMisiState.update.form.visi = val}
-                            />
-                        </Box>
-
-                        {/* Misi */}
-                        <Box>
-                            <Text fz={"md"} fw={"bold"}>Misi</Text>
-                            <EditEditor
-                                value={visiMisiState.update.form.misi}
-                                onChange={(val) => visiMisiState.update.form.misi = val}
-                            />
-                        </Box>
-
-                        {/* Buttons */}
-                        <Group>
-                            <Button
-                                bg={colors['blue-button']}
-                                onClick={handleSubmit}
-                                loading={isSubmitting || visiMisiState.update.loading}
-                                disabled={!visiMisiState.update.form.visi}
-                            >
-                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-                            </Button>
-
-                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || visiMisiState.update.loading}>
-                                Batal
-                            </Button>
-                        </Group>
-                    </Stack>
-                </Paper>
-            </Stack>
-        </Box>
+      <Box>
+        <Center h={400}>
+          <Stack align="center" gap="md">
+            <Loader size="lg" color={colors['blue-button']} />
+            <Text size="lg" fw={500} c="dimmed">
+              Memuat data...
+            </Text>
+          </Stack>
+        </Center>
+      </Box>
     );
+  }
+
+  // ❌ Error
+  if (loadError) {
+    return (
+      <Box px={{ base: 'sm', md: 'lg' }} py="md">
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+          <Alert
+            icon={<IconAlertCircle size={20} />}
+            color="red"
+            title="Terjadi Kesalahan"
+            radius="md"
+          >
+            {loadError}
+          </Alert>
+          <Button
+            onClick={() => router.push('/admin/desa/profile/profile-desa')}
+            variant="outline"
+          >
+            Kembali ke Halaman Utama
+          </Button>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // ✅ UI
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Stack gap="md">
+        {/* Header */}
+        <Group mb="sm">
+          <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+          <Title order={4} ml="sm" c="dark">
+            Edit Visi & Misi Desa
+          </Title>
+        </Group>
+
+        {/* Form */}
+        <Paper
+          w={{ base: '100%', md: '60%' }}
+          bg={colors['white-1']}
+          p="xl"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="lg">
+            <Box>
+              <Title order={3} mb={4}>
+                Informasi Visi & Misi Desa
+              </Title>
+            </Box>
+
+            {/* Visi */}
+            <Box>
+              <Text fw="bold" size="sm" mb={8}>
+                Visi
+              </Text>
+              <EditEditor value={formData.visi} onChange={handleVisiChange} />
+            </Box>
+
+            {/* Misi */}
+            <Box>
+              <Text fw="bold" size="sm" mb={8}>
+                Misi
+              </Text>
+              <EditEditor value={formData.misi} onChange={handleMisiChange} />
+            </Box>
+
+            {/* Actions */}
+            <Group justify="right">
+              <Button
+                variant="outline"
+                color="gray"
+                radius="md"
+                size="md"
+                onClick={handleResetForm}
+              >
+                Batal
+              </Button>
+              <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)',
+                }}
+                loading={isSubmitting}
+              >
+                Simpan
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
+  );
 }
 
 export default Page;

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

@@ -4,6 +4,7 @@ import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
@@ -12,7 +13,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Loader
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -35,6 +37,16 @@ function EditPerbekelDariMasaKeMasa() {
     imageId: ''
   });
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    nama: '',
+    daerah: '',
+    periode: '',
+    imageId: '',
+    imageUrl: "",
+  });
+
   // load data pertama kali
   useEffect(() => {
     const loadFoto = async () => {
@@ -49,9 +61,14 @@ function EditPerbekelDariMasaKeMasa() {
             periode: data.periode || '',
             imageId: data.imageId || ''
           });
-          if (data?.imageGalleryFoto?.link) {
-            setPreviewImage(data.imageGalleryFoto.link);
-          }
+          setOriginalData({
+            nama: data.nama || '',
+            daerah: data.daerah || '',
+            periode: data.periode || '',
+            imageId: data.imageId || '',
+            imageUrl: data.image.link || '',
+          })
+          setPreviewImage(data.image.link);
         }
       } catch (error) {
         console.error('Error loading foto:', error);
@@ -69,8 +86,22 @@ function EditPerbekelDariMasaKeMasa() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+      daerah: originalData.daerah,
+      periode: originalData.periode,
+      imageId: originalData.imageId,
+    });
+    setPreviewImage(originalData.imageUrl || null);
+    setFile(null);
+    toast.info("Form dikembalikan ke data awal");
+  };
+
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // update global state hanya sekali pas submit
       state.update.form = { ...state.update.form, ...formData };
 
@@ -90,15 +121,17 @@ function EditPerbekelDariMasaKeMasa() {
     } catch (error) {
       console.error('Error updating perbekel dari masa ke masa:', error);
       toast.error('Terjadi kesalahan saat memperbarui perbekel dari masa ke masa');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Edit Perbekel Dari Masa Ke Masa
         </Title>
@@ -135,7 +168,7 @@ function EditPerbekelDariMasaKeMasa() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -154,25 +187,45 @@ function EditPerbekelDariMasaKeMasa() {
                     Seret gambar atau klik untuk memilih file
                   </Text>
                   <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
+                    Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
                   </Text>
                 </Stack>
               </Group>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
                   radius="md"
                   style={{
-                    maxHeight: 220,
+                    maxHeight: 200,
                     objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
+                    border: '1px solid #ddd',
                   }}
                   loading="lazy"
                 />
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
@@ -194,6 +247,17 @@ function EditPerbekelDariMasaKeMasa() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -204,7 +268,7 @@ function EditPerbekelDariMasaKeMasa() {
                 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)/desa/profile/profile-perbekel-dari-masa-ke-masa/create/page.tsx

@@ -2,7 +2,7 @@
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Loader, ActionIcon, Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -14,6 +14,7 @@ function CreatePerbekelDariMasaKeMasa() {
   const state = useProxy(stateProfileDesa.mantanPerbekel);
   const router = useRouter();
   const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [file, setFile] = useState<File | null>(null);
 
   const resetForm = () => {
@@ -28,31 +29,39 @@ function CreatePerbekelDariMasaKeMasa() {
   };
 
   const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn('Pilih file gambar terlebih dahulu');
+    try {
+      setIsSubmitting(true);
+      if (!file) {
+        return toast.warn('Pilih file gambar terlebih dahulu');
+      }
+
+      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');
+
+      state.create.form.imageId = uploaded.id;
+      await state.create.create();
+      resetForm();
+      router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal menambahkan perbekel dari masa ke masa');
+    } finally {
+      setIsSubmitting(false);
     }
-
-    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');
-
-    state.create.form.imageId = uploaded.id;
-    await state.create.create();
-    resetForm();
-    router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       {/* Back button + Title */}
       <Group mb="md">
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
         <Title order={4} ml="sm" c="dark">
           Create Perbekel Dari Masa Ke Masa
         </Title>
@@ -70,21 +79,21 @@ function CreatePerbekelDariMasaKeMasa() {
           <TextInput
             label="Nama Perbekel"
             placeholder="Masukkan nama perbekel"
-            defaultValue={state.create.form.nama}
+            value={state.create.form.nama}
             onChange={(e) => (state.create.form.nama = e.target.value)}
             required
           />
           <TextInput
             label="Daerah"
             placeholder="Masukkan daerah"
-            defaultValue={state.create.form.daerah}
+            value={state.create.form.daerah}
             onChange={(e) => (state.create.form.daerah = e.target.value)}
             required
           />
           <TextInput
             label="Periode"
             placeholder="Masukkan periode"
-            defaultValue={state.create.form.periode}
+            value={state.create.form.periode}
             onChange={(e) => (state.create.form.periode = e.target.value)}
             required
           />
@@ -102,7 +111,7 @@ function CreatePerbekelDariMasaKeMasa() {
               }}
               onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               radius="md"
               p="xl"
             >
@@ -118,25 +127,63 @@ function CreatePerbekelDariMasaKeMasa() {
                 </Dropzone.Idle>
               </Group>
               <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
+                Seret gambar atau klik untuk memilih file
+              </Text>
+              <Text size="sm" c="dimmed">
+                Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
               </Text>
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box mt="sm" pos="relative" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
                   radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                  loading='lazy'
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                  loading="lazy"
                 />
+
+                {/* Tombol hapus (pojok kanan atas) */}
+                <ActionIcon
+                  variant="filled"
+                  color="red"
+                  radius="xl"
+                  size="sm"
+                  pos="absolute"
+                  top={5}
+                  right={5}
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setFile(null);
+                  }}
+                  style={{
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  <IconX size={14} />
+                </ActionIcon>
               </Box>
             )}
           </Box>
 
           {/* Submit */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -147,7 +194,7 @@ function CreatePerbekelDariMasaKeMasa() {
                 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)/desa/profile/profile-perbekel/[id]/page.tsx

@@ -126,8 +126,8 @@ function ProfilePerbekel() {
               <Dropzone
                 onDrop={(files) => handleFileChange(files[0])}
                 onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // 5MB
-                accept={{ 'image/*': [] }}
+                maxSize={5 * 1024 ** 2} 
+                accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
               >
                 <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>