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

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import {
+  ActionIcon,
   Box,
   Button,
   Center,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -37,12 +39,20 @@ function EditKeamananLingkungan() {
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
     deskripsi: "",
     imageId: "",
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: "",
+    deskripsi: "",
+    imageId: "",
+    imageUrl: "",
+  });
+
   // Load data sekali pas mount
   useEffect(() => {
     const loadData = async () => {
@@ -57,6 +67,12 @@ function EditKeamananLingkungan() {
             deskripsi: data.deskripsi || "",
             imageId: data.imageId || "",
           });
+          setOriginalData({
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
+            imageUrl: data.image?.link || "",
+          });
 
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
@@ -76,8 +92,20 @@ function EditKeamananLingkungan() {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      deskripsi: originalData.deskripsi,
+      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) {
@@ -108,6 +136,8 @@ function EditKeamananLingkungan() {
     } catch (error) {
       console.error("Error updating keamananLingkungan:", error);
       toast.error("Terjadi kesalahan saat memperbarui keamananLingkungan");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -190,7 +220,39 @@ function EditKeamananLingkungan() {
           </Dropzone>
 
           {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} loading="lazy" />
+            <Box pos={"relative"}>
+              <Image
+                src={previewImage}
+                alt="Preview Gambar"
+                radius="md"
+                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>
           ) : (
             <Center w={200} h={200} bg={"gray"}>
               <IconImageInPicture />
@@ -216,17 +278,29 @@ function EditKeamananLingkungan() {
           </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)/keamanan/keamanan-lingkungan-pecalang-patwal/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,
@@ -31,6 +33,7 @@ function CreateKeamananLingkungan() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const resetForm = () => {
     keamananState.create.form = {
@@ -43,27 +46,35 @@ function CreateKeamananLingkungan() {
   };
 
   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 mengupload file');
+      }
+
+      keamananState.create.form.imageId = uploaded.id;
+
+      await keamananState.create.create();
+
+      resetForm();
+      router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal');
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal menambahkan data keamanan lingkungan');
+    } 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 mengupload file');
-    }
-
-    keamananState.create.form.imageId = uploaded.id;
-
-    await keamananState.create.create();
-
-    resetForm();
-    router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal');
   };
 
   return (
@@ -108,7 +119,7 @@ function CreateKeamananLingkungan() {
               }}
               onReject={() => toast.error('File tidak valid.')}
               maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
             >
               <Group
                 justify="center"
@@ -150,7 +161,7 @@ function CreateKeamananLingkungan() {
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm">
+              <Box mt="sm" pos={"relative"}>
                 <Image
                   src={previewImage}
                   alt="Preview"
@@ -163,13 +174,31 @@ function CreateKeamananLingkungan() {
                   }}
                   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>
 
           {/* Input Nama */}
           <TextInput
-            defaultValue={keamananState.create.form.name}
+            value={keamananState.create.form.name}
             onChange={(val) => {
               keamananState.create.form.name = val.target.value;
             }}
@@ -193,6 +222,17 @@ function CreateKeamananLingkungan() {
 
           {/* 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"
@@ -203,7 +243,7 @@ function CreateKeamananLingkungan() {
                 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)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -24,6 +25,7 @@ function EditKontakItem() {
   const router = useRouter();
   const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState({
     name: '',
@@ -31,6 +33,12 @@ function EditKontakItem() {
     icon: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    name: '',
+    nomorTelepon: '',
+    icon: '',
+  });
+
   // Load data sekali dari global state
   useEffect(() => {
     const loadKontakDarurat = async () => {
@@ -45,6 +53,11 @@ function EditKontakItem() {
             nomorTelepon: data.nomorTelepon || '',
             icon: data.icon || '',
           });
+          setOriginalData({
+            name: data.nama || '',
+            nomorTelepon: data.nomorTelepon || '',
+            icon: data.icon || '',
+          });
         }
       } catch (error) {
         console.error('Error loading kontak darurat:', error);
@@ -62,8 +75,18 @@ function EditKontakItem() {
     }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      name: originalData.name,
+      nomorTelepon: originalData.nomorTelepon,
+      icon: originalData.icon,
+    });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       // Update global state sekali pas submit
       kontakState.update.form = {
         ...kontakState.update.form,
@@ -78,6 +101,8 @@ function EditKontakItem() {
     } catch (error) {
       console.error('Error updating kontak darurat:', error);
       toast.error('Terjadi kesalahan saat memperbarui kontak darurat');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -130,6 +155,17 @@ function EditKontakItem() {
           </Box>
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -140,7 +176,7 @@ function EditKontakItem() {
                 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)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -14,11 +15,14 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreateKontakItem() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const resetForm = () => {
     kontakState.create.form = {
       nama: '',
@@ -28,9 +32,17 @@ function CreateKontakItem() {
   };
 
   const handleSubmit = async () => {
-    await kontakState.create.create();
-    resetForm();
-    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
+    try {
+      setIsSubmitting(true);
+      await kontakState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
+    } catch (error) {
+      console.error("Error creating kontak darurat item:", error);
+      toast.error("Gagal menambahkan kontak darurat item");
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -62,7 +74,7 @@ function CreateKontakItem() {
         <Stack gap="md">
           {/* Input Nama Kategori */}
           <TextInput
-            defaultValue={kontakState.create.form.nama}
+            value={kontakState.create.form.nama}
             onChange={(val) => {
               kontakState.create.form.nama = val.target.value;
             }}
@@ -74,7 +86,7 @@ function CreateKontakItem() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nomor Telepon Kontak</Text>}
             placeholder="Masukkan nomor telepon"
-            defaultValue={kontakState.create.form.nomorTelepon}
+            value={kontakState.create.form.nomorTelepon}
             onChange={(val) => {
               kontakState.create.form.nomorTelepon = val.target.value;
             }}
@@ -88,6 +100,17 @@ function CreateKontakItem() {
 
           {/* 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"
@@ -98,7 +121,7 @@ function CreateKontakItem() {
                 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)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx

@@ -1,72 +1,125 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-"use client";
+'use client';
 
-import { IconKey } from "@/app/admin/(dashboard)/_com/iconMap";
-import SelectIconProgramEdit from "@/app/admin/(dashboard)/_com/selectIconEdit";
-import kontakDarurat from "@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan";
-import colors from "@/con/colors";
+import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
+import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import colors from '@/con/colors';
 import {
   Box,
   Button,
   Group,
+  Loader,
   MultiSelect,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title
-} from "@mantine/core";
-import { 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";
+  Title,
+} from '@mantine/core';
+import { 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';
 
-function EditKontakDaruratKeamanan() {
+type FormData = {
+  name: string;
+  icon: IconKey | '';
+  kategoriId: string[];
+};
+
+export default function EditKontakDaruratKeamanan() {
   const router = useRouter();
-  const params = useParams();
+  const params = useParams<{ id: string }>();
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
 
-  const [isLoading, setIsLoading] = useState(true);
-  // Remove the dependency on data in the initial state
-  const [formData, setFormData] = useState({
-    name: "",
-    icon: "" as IconKey | "",
-    kategoriId: [] as string[],  // Initialize as empty array
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    icon: '',
+    kategoriId: [],
+  });
+  const [originalData, setOriginalData] = useState<FormData>({
+    name: '',
+    icon: '',
+    kategoriId: [],
   });
 
-  // Load data dari backend
+  // 🔁 Load data saat ID berubah
   useEffect(() => {
-    const loadData = async () => {
+    const loadInitialData = async () => {
+      const id = params?.id;
+      if (!id) {
+        toast.error('ID tidak valid');
+        router.push('/admin/keamanan/kontak-darurat');
+        return;
+      }
+
       try {
-        setIsLoading(true);
+        // Load dropdown kategori
         await kontakDarurat.kontakDaruratItem.findMany.load();
 
-        const id = params?.id as string;
-        if (id) {
-          const data = await kontakState.update.load(id);
-          if (data) {
-            setFormData({
-              name: data.nama || "",
-              icon: (data.icon as IconKey) || "",
-              kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
-            });
-          }
+        // Load data kontak darurat
+        const data = await kontakState.update.load(id);
+        if (!data) {
+          toast.error('Data tidak ditemukan');
+          router.push('/admin/keamanan/kontak-darurat');
+          return;
         }
-      } catch (error) {
-        console.error("Error loading data:", error);
-        toast.error("Gagal memuat data");
-      } finally {
-        setIsLoading(false);
+
+        const initial: FormData = {
+          name: data.nama || '',
+          icon: (data.icon as IconKey) || '',
+          kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
+        };
+
+        setFormData(initial);
+        setOriginalData(initial);
+      } catch (err) {
+        console.error('Gagal memuat data:', err);
+        toast.error('Gagal memuat data kontak darurat');
+        router.push('/admin/keamanan/kontak-darurat');
       }
     };
 
-    loadData();
+    loadInitialData();
   }, [params?.id]);
 
-  // Handle submit
+  // Debug: Log the kontakDaruratItem data
+  useEffect(() => {
+    if (kontakDarurat.kontakDaruratItem.findMany.data) {
+      console.log('Kontak Item Data:', kontakDarurat.kontakDaruratItem.findMany.data);
+    }
+  }, [kontakDarurat.kontakDaruratItem.findMany.data]);
+
+  // 📝 Update field
+  const updateField = <K extends keyof FormData>(field: K, value: FormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // ↩️ Reset ke data awal
+  const handleResetForm = () => {
+    setFormData(originalData);
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  // 💾 Simpan
   const handleSubmit = async () => {
+    if (!formData.name.trim()) {
+      toast.error('Nama kontak darurat wajib diisi');
+      return;
+    }
+
+    if (formData.kategoriId.length === 0) {
+      toast.error('Pilih minimal satu kontak item');
+      return;
+    }
+
     try {
+      setIsSubmitting(true);
+
+      // Sinkronisasi ke Valtio state (jika digunakan di `update`)
       kontakState.update.form = {
         ...kontakState.update.form,
         nama: formData.name,
@@ -74,112 +127,103 @@ function EditKontakDaruratKeamanan() {
         kategoriId: formData.kategoriId,
       };
 
-      await kontakState.update.update();
-      toast.success("Kontak Darurat berhasil diperbarui!");
-      router.push("/admin/keamanan/kontak-darurat");
+      const success = await kontakState.update.update();
+      if (success) {
+        toast.success('Kontak Darurat berhasil diperbarui!');
+        router.push('/admin/keamanan/kontak-darurat');
+      }
     } catch (error) {
-      console.error("Error updating kontak darurat:", error);
-      toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
+      console.error('Error saat menyimpan:', error);
+      toast.error('Terjadi kesalahan saat menyimpan data');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  // 📋 Daftar opsi kategori untuk MultiSelect
+  const kategoriOptions = (kontakDarurat.kontakDaruratItem.findMany.data || []).map((item: { id: string; nama: string }) => ({
+    value: item.id,
+    label: item.nama,
+  }));
+
   return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
-      {/* Header */}
+    <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 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 Kontak Darurat Keamanan
         </Title>
       </Group>
 
-      {/* Form */}
       <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
         p="lg"
         radius="md"
         shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
+        style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
-          {/* Nama Kontak */}
           <TextInput
-            value={formData.name}
-            onChange={(e) =>
-              setFormData((prev) => ({ ...prev, name: e.target.value }))
-            }
-            label="Nama Kontak Darurat"
+            label={<Text fw="bold">Nama Kontak Darurat</Text>}
             placeholder="Masukkan nama kontak darurat"
+            value={formData.name}
+            onChange={(e) => updateField('name', e.target.value)}
             required
           />
 
-          {/* MultiSelect */}
           <MultiSelect
+            label={<Text fw="bold" fz="sm">Kontak Item</Text>}
+            placeholder="Pilih kontak item"
+            data={kategoriOptions}
             value={formData.kategoriId}
-            onChange={(val) =>
-              setFormData((prev) => ({ ...prev, kategoriId: val }))
-            }
-            label={<Text fw={"bold"} fz={"sm"}>Kontak Item</Text>}
-            placeholder={isLoading ? "Memuat data..." : "Pilih kontak item"}
-            data={
-              Array.isArray(kontakDarurat.kontakDaruratItem.findMany.data)
-                ? kontakDarurat.kontakDaruratItem.findMany.data.map((v) => ({
-                  value: v.id,
-                  label: v.nama,
-                }))
-                : []
-            }
+            onChange={(values) => updateField('kategoriId', values)}
             clearable
             searchable
             required
-            error={
-              !formData.kategoriId.length
-                ? "Pilih minimal satu kategori"
-                : undefined
-            }
-            disabled={isLoading}
+            error={!formData.kategoriId.length ? 'Pilih minimal satu kategori' : undefined}
           />
 
-          {/* Icon Select */}
           <Box>
-            <Text fz={"sm"} fw={"bold"}>
+            <Text fz="sm" fw="bold" mb="xs">
               Ikon Program Kreatif Desa
             </Text>
             <SelectIconProgramEdit
-              value={formData.icon as IconKey}
-              onChange={(value) =>
-                setFormData((prev) => ({ ...prev, icon: value }))
-              }
+              value={formData.icon}
+              onChange={(icon) => updateField('icon', icon)}
             />
           </Box>
 
-          {/* Submit */}
           <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>
       </Paper>
     </Box>
   );
-}
-
-export default EditKontakDaruratKeamanan;
+}

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   MultiSelect,
   Paper,
   Stack,
@@ -16,11 +17,14 @@ import {
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreateKontakDaruratKeamanan() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   useShallowEffect(() => {
     kontakDarurat.kontakDaruratItem.findMany.load();
@@ -35,9 +39,17 @@ function CreateKontakDaruratKeamanan() {
   };
 
   const handleSubmit = async () => {
-    await kontakState.create.create();
-    resetForm();
-    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
+    try {
+      setIsSubmitting(true);
+      await kontakState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
+    } catch (error) {
+      console.error('Error creating kontak darurat:', error);
+      toast.error('Terjadi kesalahan saat menambah kontak darurat');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -69,7 +81,7 @@ function CreateKontakDaruratKeamanan() {
         <Stack gap="md">
           {/* Input Nama Kategori */}
           <TextInput
-            defaultValue={kontakState.create.form.nama}
+            value={kontakState.create.form.nama}
             onChange={(val) => {
               kontakState.create.form.nama = val.target.value;
             }}
@@ -100,6 +112,17 @@ function CreateKontakDaruratKeamanan() {
 
           {/* 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"
@@ -110,7 +133,7 @@ function CreateKontakDaruratKeamanan() {
                 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)/keamanan/laporan-publik/[id]/edit/page.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Select,
   Stack,
@@ -27,6 +28,7 @@ function EditLaporanPublik() {
   const stateLaporan = useProxy(laporanPublikState);
   const router = useRouter();
   const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState<{
     judul: string;
@@ -44,6 +46,15 @@ function EditLaporanPublik() {
     kronologi: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    judul: '',
+    lokasi: '',
+    tanggalWaktu: '',
+    status: 'Proses', // Default status
+    penanganan: '',
+    kronologi: '',
+  });
+
   useEffect(() => {
     const loadLaporanPublik = async () => {
       const id = params?.id as string;
@@ -60,6 +71,14 @@ function EditLaporanPublik() {
             penanganan: data.penanganan?.[0]?.deskripsi ?? '',
             kronologi: data.kronologi ?? '',
           });
+          setOriginalData({
+            judul: data.judul ?? '',
+            lokasi: data.lokasi ?? '',
+            tanggalWaktu: data.tanggalWaktu ?? '',
+            status: (data.status as Status) ?? 'Proses',
+            penanganan: data.penanganan?.[0]?.deskripsi ?? '',
+            kronologi: data.kronologi ?? '',
+          });
         }
       } catch (error) {
         console.error("Error loading laporan publik:", error);
@@ -76,8 +95,21 @@ function EditLaporanPublik() {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      lokasi: originalData.lokasi,
+      tanggalWaktu: originalData.tanggalWaktu,
+      status: (originalData.status as Status),
+      penanganan: originalData.penanganan,
+      kronologi: originalData.kronologi,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       stateLaporan.edit.form = {
         ...stateLaporan.edit.form,
         ...formData,
@@ -89,6 +121,8 @@ function EditLaporanPublik() {
     } catch (error) {
       console.error("Error updating laporan publik:", error);
       toast.error("Terjadi kesalahan saat memperbarui laporan publik");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -174,6 +208,17 @@ function EditLaporanPublik() {
           </Box>
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -184,7 +229,7 @@ function EditLaporanPublik() {
                 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)/keamanan/laporan-publik/create/page.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -15,12 +16,15 @@ import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import laporanPublikState from '../../../_state/keamanan/laporan-publik';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 export type Status = 'Selesai' | 'Proses' | 'Gagal';
 
 function CreateLaporanPublik() {
   const stateLaporan = useProxy(laporanPublikState);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     stateLaporan.create.form = {
@@ -32,9 +36,17 @@ function CreateLaporanPublik() {
   };
 
   const handleSubmit = async () => {
-    await stateLaporan.create.create();
-    resetForm();
-    router.push('/admin/keamanan/laporan-publik');
+    try {
+      setIsSubmitting(true);
+      await stateLaporan.create.create();
+      resetForm();
+      router.push('/admin/keamanan/laporan-publik');
+    } catch (error) {
+      console.error('Error creating laporan publik:', error);
+      toast.error('Terjadi kesalahan saat membuat laporan publik');
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -60,7 +72,7 @@ function CreateLaporanPublik() {
       >
         <Stack gap="md">
           <TextInput
-            defaultValue={stateLaporan.create.form.judul}
+            value={stateLaporan.create.form.judul}
             onChange={(e) => (stateLaporan.create.form.judul = e.target.value)}
             label={<Text fw="bold" fz="sm">Judul Laporan Publik</Text>}
             placeholder="Masukkan judul laporan publik"
@@ -68,7 +80,7 @@ function CreateLaporanPublik() {
           />
 
           <TextInput
-            defaultValue={stateLaporan.create.form.lokasi}
+            value={stateLaporan.create.form.lokasi}
             onChange={(e) => (stateLaporan.create.form.lokasi = e.target.value)}
             label={<Text fw="bold" fz="sm">Lokasi Laporan Publik</Text>}
             placeholder="Masukkan lokasi laporan publik"
@@ -88,7 +100,7 @@ function CreateLaporanPublik() {
           />
 
           <TextInput
-            defaultValue={stateLaporan.create.form.kronologi}
+            value={stateLaporan.create.form.kronologi}
             onChange={(e) => (stateLaporan.create.form.kronologi = e.target.value)}
             label={<Text fw="bold" fz="sm">Kronologi Laporan Publik</Text>}
             placeholder="Masukkan kronologi laporan publik"
@@ -96,6 +108,17 @@ function CreateLaporanPublik() {
           />
 
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -106,7 +129,7 @@ function CreateLaporanPublik() {
                 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)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx

@@ -8,6 +8,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -24,6 +25,7 @@ function EditPencegahanKriminalitas() {
   const router = useRouter();
   const params = useParams();
   const kriminalitasState = useProxy(pencegahanKriminalitasState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const [formData, setFormData] = useState({
     judul: '',
@@ -32,6 +34,13 @@ function EditPencegahanKriminalitas() {
     linkVideo: '',
   });
 
+  const [originalData, setOriginalData] = useState({
+    judul: '',
+    deskripsi: '',
+    deskripsiSingkat: '',
+    linkVideo: '',
+  });
+
   // load data hanya sekali pas id berubah
   useEffect(() => {
     const loadKriminalitas = async () => {
@@ -47,6 +56,12 @@ function EditPencegahanKriminalitas() {
             deskripsiSingkat: data.deskripsiSingkat ?? '',
             linkVideo: data.linkVideo ?? '',
           });
+          setOriginalData({
+            judul: data.judul ?? '',
+            deskripsi: data.deskripsi ?? '',
+            deskripsiSingkat: data.deskripsiSingkat ?? '',
+            linkVideo: data.linkVideo ?? '',
+          });
         }
       } catch (error) {
         console.error('Error loading pencegahan kriminalitas:', error);
@@ -65,6 +80,16 @@ function EditPencegahanKriminalitas() {
         setFormData((prev) => ({ ...prev, [field]: e.target.value }));
       };
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      deskripsi: originalData.deskripsi,
+      deskripsiSingkat: originalData.deskripsiSingkat,
+      linkVideo: originalData.linkVideo,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
     if (!converted) {
@@ -73,6 +98,7 @@ function EditPencegahanKriminalitas() {
     }
 
     try {
+      setIsSubmitting(true);
       // update global state saat submit
       kriminalitasState.update.form = {
         judul: formData.judul,
@@ -88,6 +114,8 @@ function EditPencegahanKriminalitas() {
     } catch (error) {
       console.error('Error updating pencegahan kriminalitas:', error);
       toast.error('Terjadi kesalahan saat memperbarui data');
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -177,6 +205,17 @@ function EditPencegahanKriminalitas() {
 
           {/* Action button */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -187,7 +226,7 @@ function EditPencegahanKriminalitas() {
                 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)/keamanan/pencegahan-kriminalitas/create/page.tsx

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -25,6 +26,7 @@ function CreatePencegahanKriminalitas() {
   const kriminalitasState = useProxy(pencegahanKriminalitasState);
   const [link, setLink] = useState('');
   const embedLink = convertYoutubeUrlToEmbed(link);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     kriminalitasState.create.form = {
@@ -37,15 +39,23 @@ function CreatePencegahanKriminalitas() {
   };
 
   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;
+      }
+  
+      kriminalitasState.create.form.linkVideo = embedLink;
+      await kriminalitasState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/pencegahan-kriminalitas');
+    } catch (error) {
+      console.error('Gagal menambahkan pencegahan kriminalitas:', error);
+      toast.error('Gagal menambahkan pencegahan kriminalitas');
+    } finally {
+      setIsSubmitting(false);
     }
-
-    kriminalitasState.create.form.linkVideo = embedLink;
-    await kriminalitasState.create.create();
-    resetForm();
-    router.push('/admin/keamanan/pencegahan-kriminalitas');
   };
 
   return (
@@ -79,7 +89,7 @@ function CreatePencegahanKriminalitas() {
           <TextInput
             label="Judul Pencegahan Kriminalitas"
             placeholder="Masukkan judul Pencegahan Kriminalitas"
-            defaultValue={kriminalitasState.create.form.judul}
+            value={kriminalitasState.create.form.judul}
             onChange={(e) => {
               kriminalitasState.create.form.judul = e.currentTarget.value;
             }}
@@ -116,7 +126,7 @@ function CreatePencegahanKriminalitas() {
           <TextInput
             label="Link Video YouTube"
             placeholder="https://www.youtube.com/watch?v=abc123"
-            defaultValue={link}
+            value={link}
             onChange={(e) => setLink(e.currentTarget.value)}
             required
           />
@@ -140,6 +150,17 @@ function CreatePencegahanKriminalitas() {
 
           {/* 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"
@@ -150,7 +171,7 @@ function CreatePencegahanKriminalitas() {
                 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)/keamanan/polsek-terdekat/[id]/edit/page.tsx

@@ -9,6 +9,7 @@ import {
   Button,
   Card,
   Group,
+  Loader,
   Modal,
   Paper,
   Select,
@@ -38,6 +39,7 @@ function EditPolsekTerdekat() {
     null
   );
   const [namaLayananUpdate, setNamaLayananUpdate] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     nama: "",
     jarakKeDesa: "",
@@ -51,6 +53,19 @@ function EditPolsekTerdekat() {
     layananPolsekId: "",
   });
 
+  const [originalData, setOriginalData] = useState({
+    nama: "",
+    jarakKeDesa: "",
+    alamat: "",
+    nomorTelepon: "",
+    jamOperasional: "",
+    embedMapUrl: "",
+    namaTempatMaps: "",
+    alamatMaps: "",
+    linkPetunjukArah: "",
+    layananPolsekId: "",
+  });
+
   // load data untuk form edit
   useEffect(() => {
     const loadPolsekTerdekat = async () => {
@@ -72,6 +87,19 @@ function EditPolsekTerdekat() {
             linkPetunjukArah: data.linkPetunjukArah || "",
             layananPolsekId: data.layananPolsekId || "",
           });
+
+          setOriginalData({
+            nama: data.nama || "",
+            jarakKeDesa: data.jarakKeDesa || "",
+            alamat: data.alamat || "",
+            nomorTelepon: data.nomorTelepon || "",
+            jamOperasional: data.jamOperasional || "",
+            embedMapUrl: data.embedMapUrl || "",
+            namaTempatMaps: data.namaTempatMaps || "",
+            alamatMaps: data.alamatMaps || "",
+            linkPetunjukArah: data.linkPetunjukArah || "",
+            layananPolsekId: data.layananPolsekId || "",
+          });
         }
       } catch (error) {
         console.error("Error loading polsek terdekat:", error);
@@ -187,8 +215,25 @@ function EditPolsekTerdekat() {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+      jarakKeDesa: originalData.jarakKeDesa,
+      alamat: originalData.alamat,
+      nomorTelepon: originalData.nomorTelepon,
+      jamOperasional: originalData.jamOperasional,
+      embedMapUrl: originalData.embedMapUrl,
+      namaTempatMaps: originalData.namaTempatMaps,
+      alamatMaps: originalData.alamatMaps,
+      linkPetunjukArah: originalData.linkPetunjukArah,
+      layananPolsekId: originalData.layananPolsekId,
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       polsekState.edit.form = { ...formData }; // update global state hanya di sini
       await polsekState.edit.update();
       toast.success("Polsek terdekat berhasil diperbarui!");
@@ -196,6 +241,8 @@ function EditPolsekTerdekat() {
     } catch (error) {
       console.error("Error updating polsek terdekat:", error);
       toast.error("Gagal memperbarui data polsek terdekat");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -212,7 +259,7 @@ function EditPolsekTerdekat() {
           <TextInput
             label="Nama Layanan"
             placeholder="Masukkan nama layanan"
-            defaultValue={namaLayananBaru}
+            value={namaLayananBaru}
             onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
           />
           <Button onClick={handleTambahLayanan}>Simpan</Button>
@@ -230,7 +277,7 @@ function EditPolsekTerdekat() {
           <TextInput
             label="Nama Layanan"
             placeholder="Masukkan nama layanan"
-            defaultValue={namaLayananUpdate}
+            value={namaLayananUpdate}
             onChange={(e) => setNamaLayananUpdate(e.currentTarget.value)}
           />
           <Button
@@ -376,17 +423,29 @@ function EditPolsekTerdekat() {
 
           {/* Submit */}
           <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)/keamanan/polsek-terdekat/create/page.tsx

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Group,
+  Loader,
   Modal,
   Paper,
   Select,
@@ -26,6 +27,7 @@ function CreatePolsekTerdekat() {
   const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
   const [modalOpen, setModalOpen] = useState(false);
   const [namaLayananBaru, setNamaLayananBaru] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     polsekState.create.form = {
@@ -43,9 +45,17 @@ function CreatePolsekTerdekat() {
   };
 
   const handleSubmit = async () => {
-    await polsekState.create.create();
-    resetForm();
-    router.push("/admin/keamanan/polsek-terdekat");
+    try {
+      setIsSubmitting(true);
+      await polsekState.create.create();
+      resetForm();
+      router.push("/admin/keamanan/polsek-terdekat");
+    } catch (error) {
+      console.error(error)
+      toast.error("Gagal menambah polsek terdekat");
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const fetchLayanan = async () => {
@@ -112,7 +122,7 @@ function CreatePolsekTerdekat() {
           <TextInput
             label="Nama Layanan"
             placeholder="Masukkan nama layanan"
-            defaultValue={namaLayananBaru}
+            value={namaLayananBaru}
             onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
           />
           <Button onClick={handleTambahLayanan}>Simpan</Button>
@@ -145,71 +155,84 @@ function CreatePolsekTerdekat() {
       >
         <Stack gap="md">
           <TextInput
-            defaultValue={polsekState.create.form.nama}
+            value={polsekState.create.form.nama}
             onChange={(val) => (polsekState.create.form.nama = val.target.value)}
             label={<Text fw="bold" fz="sm">Nama Polsek Terdekat</Text>}
             placeholder="Masukkan nama Polsek Terdekat"
             required
           />
           <TextInput
-            defaultValue={polsekState.create.form.jarakKeDesa}
+            value={polsekState.create.form.jarakKeDesa}
             onChange={(val) => (polsekState.create.form.jarakKeDesa = val.target.value)}
             label={<Text fw="bold" fz="sm">Jarak Polsek Terdekat</Text>}
             placeholder="Masukkan jarak Polsek Terdekat"
             required
           />
           <TextInput
-            defaultValue={polsekState.create.form.alamat}
+            value={polsekState.create.form.alamat}
             onChange={(val) => (polsekState.create.form.alamat = val.target.value)}
             label={<Text fw="bold" fz="sm">Alamat Polsek Terdekat</Text>}
             placeholder="Masukkan alamat Polsek Terdekat"
             required
           />
           <TextInput
-            defaultValue={polsekState.create.form.nomorTelepon}
+            value={polsekState.create.form.nomorTelepon}
             onChange={(val) => (polsekState.create.form.nomorTelepon = val.target.value)}
             label={<Text fw="bold" fz="sm">Nomor Telepon Polsek Terdekat</Text>}
             placeholder="Masukkan nomor telepon Polsek Terdekat"
             required
           />
           <TextInput
-            defaultValue={polsekState.create.form.jamOperasional}
+            value={polsekState.create.form.jamOperasional}
             onChange={(val) => (polsekState.create.form.jamOperasional = val.target.value)}
             label={<Text fw="bold" fz="sm">Jam Operasional Polsek Terdekat</Text>}
             placeholder="Masukkan jam operasional Polsek Terdekat"
           />
           <TextInput
-            defaultValue={polsekState.create.form.embedMapUrl}
+            value={polsekState.create.form.embedMapUrl}
             onChange={(val) => (polsekState.create.form.embedMapUrl = val.target.value)}
             label={<Text fw="bold" fz="sm">Embed Map URL</Text>}
             placeholder="Masukkan embed map url"
           />
           <TextInput
-            defaultValue={polsekState.create.form.namaTempatMaps}
+            value={polsekState.create.form.namaTempatMaps}
             onChange={(val) => (polsekState.create.form.namaTempatMaps = val.target.value)}
             label={<Text fw="bold" fz="sm">Nama Tempat Maps</Text>}
             placeholder="Masukkan nama tempat maps"
           />
           <TextInput
-            defaultValue={polsekState.create.form.alamatMaps}
+            value={polsekState.create.form.alamatMaps}
             onChange={(val) => (polsekState.create.form.alamatMaps = val.target.value)}
             label={<Text fw="bold" fz="sm">Alamat Maps</Text>}
             placeholder="Masukkan alamat maps"
           />
           <TextInput
-            defaultValue={polsekState.create.form.linkPetunjukArah}
+            value={polsekState.create.form.linkPetunjukArah}
             onChange={(val) => (polsekState.create.form.linkPetunjukArah = val.target.value)}
             label={<Text fw="bold" fz="sm">Link Petunjuk Arah</Text>}
             placeholder="Masukkan link petunjuk arah"
           />
-
-          {/* Dropdown Select */}
           <Select
-            label={<Text fw="bold" fz="sm">Layanan Polsek</Text>}
+            label="Layanan Polsek"
             placeholder="Pilih layanan polsek"
             data={layananOptions}
-            value={polsekState.create.form.layananPolsekId}
-            onChange={(val) => (polsekState.create.form.layananPolsekId = val || "")}
+            value={polsekState.create.form.layananPolsekId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = layananOptions.find(
+                  (item) => item.value === val
+                );
+                if (selected) {
+                  polsekState.create.form.layananPolsekId = selected.value;
+                }
+              } else {
+                polsekState.create.form.layananPolsekId = '';
+              }
+            }}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
           />
           <Button
             variant="light"
@@ -221,6 +244,17 @@ function CreatePolsekTerdekat() {
 
           {/* 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"
@@ -231,7 +265,7 @@ function CreatePolsekTerdekat() {
                 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)/keamanan/tips-keamanan/[id]/edit/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import {
+  ActionIcon,
   Box,
   Button,
   Group,
   Image,
+  Loader,
   Paper,
   Stack,
   Text,
@@ -36,12 +38,20 @@ function EditTipsKeamanan() {
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [formData, setFormData] = useState({
     judul: "",
     deskripsi: "",
     imageId: "",
   });
 
+  const [originalData, setOriginalData] = useState({
+    judul: "",
+    deskripsi: "",
+    imageId: "",
+    imageUrl: "",
+  });
+
   // Load data saat pertama kali
   useEffect(() => {
     const loadData = async () => {
@@ -57,6 +67,13 @@ function EditTipsKeamanan() {
             imageId: data.imageId || "",
           });
 
+          setOriginalData({
+            judul: data.judul || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
+            imageUrl: data.image?.link || "",
+          })
+
           if (data?.image?.link) {
             setPreviewImage(data.image.link);
           }
@@ -73,6 +90,7 @@ function EditTipsKeamanan() {
 
   const handleSubmit = async () => {
     try {
+      setIsSubmitting(true);
       let imageId = formData.imageId;
 
       if (file) {
@@ -97,9 +115,22 @@ function EditTipsKeamanan() {
     } catch (error) {
       console.error("Error updating tips keamanan:", error);
       toast.error("Terjadi kesalahan saat memperbarui tips keamanan");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
+  const handleResetForm = () => {
+    setFormData({
+      judul: originalData.judul,
+      deskripsi: originalData.deskripsi,
+      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 */}
@@ -167,14 +198,14 @@ function EditTipsKeamanan() {
                     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 pos={"relative"} mt="sm" style={{ display: "flex", justifyContent: "center" }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
@@ -186,6 +217,24 @@ function EditTipsKeamanan() {
                   }}
                   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
@@ -230,17 +279,29 @@ function EditTipsKeamanan() {
 
           {/* Button Simpan */}
           <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)/keamanan/tips-keamanan/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 CreateKeamananLingkungan() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     stateKeamanan.create.form = {
@@ -38,27 +41,35 @@ function CreateKeamananLingkungan() {
   };
 
   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');
+      }
+
+      stateKeamanan.create.form.imageId = uploaded.id;
+
+      await stateKeamanan.create.create();
+
+      resetForm();
+      router.push('/admin/keamanan/tips-keamanan');
+    } catch (error) {
+      console.error("Error creating tips keamanan:", error);
+      toast.error("Gagal menambahkan tips keamanan");
+    } 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');
-    }
-
-    stateKeamanan.create.form.imageId = uploaded.id;
-
-    await stateKeamanan.create.create();
-
-    resetForm();
-    router.push('/admin/keamanan/tips-keamanan');
   };
 
   return (
@@ -98,7 +109,7 @@ function CreateKeamananLingkungan() {
               }}
               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"
             >
@@ -119,7 +130,7 @@ function CreateKeamananLingkungan() {
             </Dropzone>
 
             {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box pos={"relative"} mt="sm" style={{ textAlign: 'center' }}>
                 <Image
                   src={previewImage}
                   alt="Preview Gambar"
@@ -127,6 +138,24 @@ function CreateKeamananLingkungan() {
                   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>
@@ -135,7 +164,7 @@ function CreateKeamananLingkungan() {
           <TextInput
             label="Judul Tips Keamanan"
             placeholder="Masukkan judul tips keamanan"
-            defaultValue={stateKeamanan.create.form.judul || ''}
+            value={stateKeamanan.create.form.judul || ''}
             onChange={(e) => (stateKeamanan.create.form.judul = e.target.value)}
             required
           />
@@ -155,6 +184,17 @@ function CreateKeamananLingkungan() {
 
           {/* Submit Button */}
           <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
             <Button
               onClick={handleSubmit}
               radius="md"
@@ -165,7 +205,7 @@ function CreateKeamananLingkungan() {
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
             >
-              Simpan
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
             </Button>
           </Group>
         </Stack>