feat: add form validation for ekonomi module admin pages

- Added isFormValid() and isHtmlEmpty() helper functions
- Disabled submit buttons when required fields are empty
- Applied consistent validation pattern across all create/edit pages
- Validated fields: nama, deskripsi, tahun, jumlah, value, icon, statistik, and more
- Edit pages allow existing data, create pages require all fields

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

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

@@ -51,6 +51,17 @@ function EditAPBDesa() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.tahun?.trim() !== '' &&
+      Number(formData.tahun) > 0 &&
+      formData.pendapatanIds.length > 0 &&
+      formData.belanjaIds.length > 0 &&
+      formData.pembiayaanIds.length > 0
+    );
+  };
+
   // ==================== LOAD DATA ====================
   useEffect(() => {
     const loadAPBdesa = async () => {
@@ -213,8 +224,11 @@ function EditAPBDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,6 +27,17 @@ function CreateAPBDesa() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      apbDesaState.create.form.tahun !== null &&
+      apbDesaState.create.form.tahun > 0 &&
+      apbDesaState.create.form.pendapatanIds.length > 0 &&
+      apbDesaState.create.form.belanjaIds.length > 0 &&
+      apbDesaState.create.form.pembiayaanIds.length > 0
+    );
+  };
+
   const resetForm = () => {
     apbDesaState.create.form = {
       tahun: 0,
@@ -121,8 +132,11 @@ function CreateAPBDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -35,6 +35,15 @@ function EditBelanja() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   // format angka ke rupiah
   const formatRupiah = (value: number | string) => {
     const number =
@@ -172,8 +181,11 @@ function EditBelanja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -24,6 +24,15 @@ function CreateBelanja() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      belanjaState.create.form.name?.trim() !== '' &&
+      belanjaState.create.form.value !== null &&
+      belanjaState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -126,8 +135,11 @@ function CreateBelanja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -34,6 +34,15 @@ function EditPembiayaan() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number'
@@ -169,8 +178,11 @@ function EditPembiayaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -23,6 +23,15 @@ function CreatePembiayaan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      pembiayaanState.create.form.name?.trim() !== '' &&
+      pembiayaanState.create.form.value !== null &&
+      pembiayaanState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number =
       typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -127,8 +136,11 @@ function CreatePembiayaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -34,6 +34,15 @@ function EditPendapatan() {
     value: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.value !== '' &&
+      Number(formData.value) > 0
+    );
+  };
+
   // helper format
   const formatRupiah = (value: number | string) => {
     const number = typeof value === 'number'
@@ -176,8 +185,11 @@ function EditPendapatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -22,6 +22,15 @@ function CreatePendapatan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      pendapatanState.create.form.name?.trim() !== '' &&
+      pendapatanState.create.form.value !== null &&
+      pendapatanState.create.form.value > 0
+    );
+  };
+
   const formatRupiah = (value: number | string) => {
     const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
     return new Intl.NumberFormat('id-ID', {
@@ -122,8 +131,11 @@ function CreatePendapatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/[id]/edit/page.tsx

@@ -56,6 +56,14 @@ export default function EditPegawaiBumDes() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.namaLengkap?.trim() !== '' &&
+      formData.posisiId?.trim() !== ''
+    );
+  };
+
   // Format date for <input type="date">
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
@@ -325,8 +333,11 @@ export default function EditPegawaiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create/page.tsx

@@ -23,6 +23,15 @@ function CreatePegawaiBumDes() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateOrganisasi.create.form.namaLengkap?.trim() !== '' &&
+      stateOrganisasi.create.form.posisiId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateOrganisasi.create.form = {
       namaLengkap: "",
@@ -284,8 +293,11 @@ function CreatePegawaiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/[id]/page.tsx

@@ -31,6 +31,23 @@ function EditPosisiOrganisasiBumDes() {
     hierarki: 0,
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.hierarki !== null &&
+      formData.hierarki >= 0
+    );
+  };
+
   // Fungsi generik untuk update formData
   const handleChange = (field: keyof typeof formData, value: any) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -173,8 +190,11 @@ function EditPosisiOrganisasiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/create/page.tsx

@@ -15,6 +15,23 @@ function CreatePosisiOrganisasiBumDes() {
   const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateOrganisasi.create.form.nama?.trim() !== '' &&
+      !isHtmlEmpty(stateOrganisasi.create.form.deskripsi) &&
+      stateOrganisasi.create.form.hierarki !== null &&
+      stateOrganisasi.create.form.hierarki >= 0
+    );
+  };
+
   useEffect(() => {
     stateOrganisasi.findMany.load();
   }, []);
@@ -115,8 +132,11 @@ function CreatePosisiOrganisasiBumDes() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -41,6 +41,17 @@ export default function EditDemografiPekerjaan() {
     perempuan: 0,
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.pekerjaan?.trim() !== '' &&
+      formData.lakiLaki !== null &&
+      formData.lakiLaki >= 0 &&
+      formData.perempuan !== null &&
+      formData.perempuan >= 0
+    );
+  };
+
   // ✅ Load data hanya sekali di awal (tidak reset form)
   useEffect(() => {
     if (!id) return;
@@ -186,8 +197,11 @@ export default function EditDemografiPekerjaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -26,6 +26,17 @@ function CreateDemografiPekerjaan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDemografi.create.form.pekerjaan?.trim() !== '' &&
+      stateDemografi.create.form.lakiLaki !== null &&
+      stateDemografi.create.form.lakiLaki >= 0 &&
+      stateDemografi.create.form.perempuan !== null &&
+      stateDemografi.create.form.perempuan >= 0
+    );
+  };
+
   const resetForm = () => {
     stateDemografi.create.form = {
       pekerjaan: '',
@@ -128,8 +139,11 @@ function CreateDemografiPekerjaan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -37,6 +37,16 @@ function EditJumlahPendudukMiskin() {
     totalPoorPopulation: 0,
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.year !== null &&
+      formData.year > 0 &&
+      formData.totalPoorPopulation !== null &&
+      formData.totalPoorPopulation >= 0
+    );
+  };
+
   // 🔹 Load data awal dari backend
   useEffect(() => {
     if (!id) return;
@@ -160,8 +170,11 @@ function EditJumlahPendudukMiskin() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -16,6 +16,16 @@ export default function CreateJumlahPendudukMiskin() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateJPM.create.form.year !== null &&
+      stateJPM.create.form.year > 0 &&
+      stateJPM.create.form.totalPoorPopulation !== null &&
+      stateJPM.create.form.totalPoorPopulation >= 0
+    );
+  };
+
   const resetForm = () => {
     stateJPM.create.form = {
       year: new Date().getFullYear(),
@@ -105,8 +115,11 @@ export default function CreateJumlahPendudukMiskin() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -33,6 +33,17 @@ function EditGrafikBerdasarkanPendidikan() {
     S1: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.SD?.trim() !== '' &&
+      formData.SMP?.trim() !== '' &&
+      formData.SMA?.trim() !== '' &&
+      formData.D3?.trim() !== '' &&
+      formData.S1?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     if (id) {
       stategrafik.findUnique.load(id).then(() => {
@@ -174,8 +185,11 @@ function EditGrafikBerdasarkanPendidikan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -16,6 +16,17 @@ function CreateGrafikBerdasarkanPendidikan() {
   const [donutData, setDonutData] = useState<any[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stategrafik.create.form.SD?.trim() !== '' &&
+      stategrafik.create.form.SMP?.trim() !== '' &&
+      stategrafik.create.form.SMA?.trim() !== '' &&
+      stategrafik.create.form.D3?.trim() !== '' &&
+      stategrafik.create.form.S1?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stategrafik.create.form = {
       ...stategrafik.create.form,
@@ -127,8 +138,11 @@ function CreateGrafikBerdasarkanPendidikan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -43,6 +43,16 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
     usia46_keatas: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.usia18_25?.trim() !== '' &&
+      formData.usia26_35?.trim() !== '' &&
+      formData.usia36_45?.trim() !== '' &&
+      formData.usia46_keatas?.trim() !== ''
+    );
+  };
+
   // load data dari global state -> masukin ke local state
   useEffect(() => {
     if (id) {
@@ -179,8 +189,11 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -17,6 +17,16 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
   const [donutData, setDonutData] = useState<any[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stategrafik.create.form.usia18_25?.trim() !== '' &&
+      stategrafik.create.form.usia26_35?.trim() !== '' &&
+      stategrafik.create.form.usia36_45?.trim() !== '' &&
+      stategrafik.create.form.usia46_keatas?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stategrafik.create.form = {
       ...stategrafik.create.form,
@@ -120,8 +130,11 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -53,6 +53,19 @@ function EditDetailDataPengangguran() {
     percentageChange: 0,
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.month?.trim() !== '' &&
+      formData.year !== null &&
+      formData.year > 0 &&
+      formData.educatedUnemployment !== null &&
+      formData.educatedUnemployment >= 0 &&
+      formData.uneducatedUnemployment !== null &&
+      formData.uneducatedUnemployment >= 0
+    );
+  };
+
   // --- hitung total + persentase perubahan
   const calculateTotalAndChange = useCallback(
     async (data: typeof formData) => {
@@ -255,8 +268,11 @@ function EditDetailDataPengangguran() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,6 +27,19 @@ function CreateJumlahPengangguran() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDetail.create.form.month?.trim() !== '' &&
+      stateDetail.create.form.year !== null &&
+      stateDetail.create.form.year > 0 &&
+      stateDetail.create.form.educatedUnemployment !== null &&
+      stateDetail.create.form.educatedUnemployment >= 0 &&
+      stateDetail.create.form.uneducatedUnemployment !== null &&
+      stateDetail.create.form.uneducatedUnemployment >= 0
+    );
+  };
+
   const monthOptions = [
     'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
     'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
@@ -204,8 +217,11 @@ function CreateJumlahPengangguran() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -48,6 +48,27 @@ function EditLowonganKerja() {
     notelp: '',
   })
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.posisi?.trim() !== '' &&
+      formData.namaPerusahaan?.trim() !== '' &&
+      formData.notelp?.trim() !== '' &&
+      formData.lokasi?.trim() !== '' &&
+      formData.tipePekerjaan?.trim() !== '' &&
+      formData.gaji?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      !isHtmlEmpty(formData.kualifikasi)
+    );
+  };
+
   // load data sekali aja ketika mount / id berubah
   useEffect(() => {
     const loadLowongan = async () => {
@@ -229,8 +250,11 @@ function EditLowonganKerja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -24,6 +24,27 @@ function CreateLowonganKerja() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      lowonganState.create.form.posisi?.trim() !== '' &&
+      lowonganState.create.form.namaPerusahaan?.trim() !== '' &&
+      lowonganState.create.form.notelp?.trim() !== '' &&
+      lowonganState.create.form.lokasi?.trim() !== '' &&
+      lowonganState.create.form.tipePekerjaan?.trim() !== '' &&
+      lowonganState.create.form.gaji?.trim() !== '' &&
+      !isHtmlEmpty(lowonganState.create.form.deskripsi) &&
+      !isHtmlEmpty(lowonganState.create.form.kualifikasi)
+    );
+  };
+
   const resetForm = () => {
     lowonganState.create.form = {
       posisi: '',
@@ -175,8 +196,11 @@ function CreateLowonganKerja() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -28,6 +28,11 @@ function EditKategoriProduk() {
   const [formData, setFormData] = useState({ nama: '' });
   const [originalData, setOriginalData] = useState({ nama: '' });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
   useEffect(() => {
     const loadKategoriProduk = async () => {
       if (!id) return;
@@ -146,8 +151,11 @@ function EditKategoriProduk() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -23,6 +23,11 @@ function CreateKategoriProduk() {
   const statePasar = useProxy(pasarDesaState.kategoriProduk);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return statePasar.create.form.nama?.trim() !== '';
+  };
+
   useEffect(() => {
     statePasar.findMany.load();
   }, []);
@@ -101,8 +106,11 @@ function CreateKategoriProduk() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -68,6 +68,23 @@ function EditPasarDesa() {
     deskripsi: ''
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.harga !== null &&
+      formData.harga > 0 &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data awal
   useEffect(() => {
     pasarState.kategoriProduk.findManyAll.load();
@@ -352,8 +369,11 @@ function EditPasarDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -32,6 +32,24 @@ export default function CreatePasarDesa() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      statePasar.pasarDesa.create.form.nama?.trim() !== '' &&
+      statePasar.pasarDesa.create.form.harga !== null &&
+      statePasar.pasarDesa.create.form.harga > 0 &&
+      !isHtmlEmpty(statePasar.pasarDesa.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   useEffect(() => {
     statePasar.kategoriProduk.findManyAll.load();
   }, []);
@@ -265,8 +283,11 @@ export default function CreatePasarDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -53,6 +53,24 @@ function EditProgramKemiskinan() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [originalData, setOriginalData] = useState<FormData>(initialForm);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.icon?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.statistik.jumlah?.trim() !== '' &&
+      formData.statistik.tahun?.trim() !== ''
+    );
+  };
+
   // Load data 1x dari global state → isi local state
   useEffect(() => {
     if (!id) return;
@@ -235,8 +253,11 @@ function EditProgramKemiskinan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -29,6 +29,25 @@ function CreateProgramKemiskinan() {
   const [lineChart, setLineChart] = useState<any[]>([]);
 
   const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      programState.create.form.nama?.trim() !== '' &&
+      programState.create.form.icon?.trim() !== '' &&
+      !isHtmlEmpty(programState.create.form.deskripsi) &&
+      programState.create.form.statistik.jumlah?.trim() !== '' &&
+      programState.create.form.statistik.tahun?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     programState.create.form = {
       nama: '',
@@ -172,8 +191,11 @@ function CreateProgramKemiskinan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -41,6 +41,23 @@ function EditSektorUnggulanDesa() {
     value: 0,
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.description) &&
+      formData.value !== null &&
+      formData.value >= 0
+    );
+  };
+
   // Load data saat komponen mount
   useEffect(() => {
     if (id) {
@@ -168,8 +185,11 @@ function EditSektorUnggulanDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -27,6 +27,23 @@ function CreateSektorUnggulanDesa() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateGrafik.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateGrafik.create.form.description) &&
+      stateGrafik.create.form.value !== null &&
+      stateGrafik.create.form.value >= 0
+    );
+  };
+
   const resetForm = () => {
     stateGrafik.create.form = {
       name: '',
@@ -132,8 +149,11 @@ function CreateSektorUnggulanDesa() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -53,6 +53,21 @@ function EditKeamananLingkungan() {
     imageUrl: "",
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data sekali pas mount
   useEffect(() => {
     const loadData = async () => {
@@ -294,8 +309,11 @@ function EditKeamananLingkungan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx

@@ -35,6 +35,22 @@ function CreateKeamananLingkungan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      keamananState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(keamananState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     keamananState.create.form = {
       name: '',
@@ -237,8 +253,11 @@ function CreateKeamananLingkungan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx

@@ -39,6 +39,15 @@ function EditKontakItem() {
     icon: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.nomorTelepon?.trim() !== '' &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
   // Load data sekali dari global state
   useEffect(() => {
     const loadKontakDarurat = async () => {
@@ -170,8 +179,11 @@ function EditKontakItem() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -23,6 +23,16 @@ function CreateKontakItem() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kontakState.create.form.nama?.trim() !== '' &&
+      kontakState.create.form.nomorTelepon?.trim() !== '' &&
+      kontakState.create.form.icon?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     kontakState.create.form = {
       nama: '',
@@ -115,8 +125,11 @@ function CreateKontakItem() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx

@@ -46,6 +46,14 @@ export default function EditKontakDaruratKeamanan() {
     kategoriId: [],
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.kategoriId.length > 0
+    );
+  };
+
   // 🔁 Load data saat ID berubah
   useEffect(() => {
     const loadInitialData = async () => {
@@ -213,8 +221,11 @@ export default function EditKontakDaruratKeamanan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -26,6 +26,14 @@ function CreateKontakDaruratKeamanan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kontakState.create.form.nama?.trim() !== '' &&
+      kontakState.create.form.icon?.trim() !== ''
+    );
+  };
+
   useShallowEffect(() => {
     kontakDarurat.kontakDaruratItem.findMany.load();
   }, []);
@@ -127,8 +135,11 @@ function CreateKontakDaruratKeamanan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx

@@ -55,6 +55,25 @@ function EditLaporanPublik() {
     kronologi: '',
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      formData.lokasi?.trim() !== '' &&
+      formData.tanggalWaktu?.trim() !== '' &&
+      formData.status?.trim() !== '' &&
+      !isHtmlEmpty(formData.kronologi) &&
+      !isHtmlEmpty(formData.penanganan)
+    );
+  };
+
   useEffect(() => {
     const loadLaporanPublik = async () => {
       const id = params?.id as string;
@@ -223,8 +242,11 @@ function EditLaporanPublik() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx

@@ -26,6 +26,16 @@ function CreateLaporanPublik() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateLaporan.create.form.judul?.trim() !== '' &&
+      stateLaporan.create.form.lokasi?.trim() !== '' &&
+      stateLaporan.create.form.tanggalWaktu?.trim() !== '' &&
+      stateLaporan.create.form.kronologi?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stateLaporan.create.form = {
       judul: '',
@@ -123,8 +133,11 @@ function CreateLaporanPublik() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx

@@ -41,6 +41,23 @@ function EditPencegahanKriminalitas() {
     linkVideo: '',
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      convertYoutubeUrlToEmbed(formData.linkVideo) !== ''
+    );
+  };
+
   // load data hanya sekali pas id berubah
   useEffect(() => {
     const loadKriminalitas = async () => {
@@ -220,8 +237,11 @@ function EditPencegahanKriminalitas() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx

@@ -28,6 +28,23 @@ function CreatePencegahanKriminalitas() {
   const embedLink = convertYoutubeUrlToEmbed(link);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kriminalitasState.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(kriminalitasState.create.form.deskripsiSingkat) &&
+      !isHtmlEmpty(kriminalitasState.create.form.deskripsi) &&
+      embedLink !== ''
+    );
+  };
+
   const resetForm = () => {
     kriminalitasState.create.form = {
       judul: "",
@@ -165,8 +182,11 @@ function CreatePencegahanKriminalitas() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx

@@ -67,6 +67,17 @@ function EditPolsekTerdekat() {
     layananPolsekId: []
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.jarakKeDesa?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.nomorTelepon?.trim() !== '' &&
+      formData.layananPolsekId.length > 0
+    );
+  };
+
     useEffect(() => {
     statePolsekTerdekat.layananPolsek.findManyAll.load();
   }, []);
@@ -261,8 +272,11 @@ function EditPolsekTerdekat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx

@@ -24,6 +24,17 @@ function CreatePolsekTerdekat() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      polsekState.create.form.nama?.trim() !== '' &&
+      polsekState.create.form.jarakKeDesa?.trim() !== '' &&
+      polsekState.create.form.alamat?.trim() !== '' &&
+      polsekState.create.form.nomorTelepon?.trim() !== '' &&
+      polsekState.create.form.layananPolsekId.length > 0
+    );
+  };
+
   useEffect(() => {
     statePolsekTerdekat.layananPolsek.findManyAll.load();
   }, []);
@@ -219,8 +230,11 @@ function CreatePolsekTerdekat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx

@@ -33,6 +33,11 @@ function EditLayananPolsek() {
     nama: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
   useEffect(() => {
     const loadLayananPolsek = async () => {
       const id = params?.id as string;
@@ -143,8 +148,11 @@ function EditLayananPolsek() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx

@@ -22,6 +22,11 @@ function CreateLayananPolsek() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return createState.create.form.nama?.trim() !== '';
+  };
+
   const resetForm = () => {
     createState.create.form = {
       nama: '',
@@ -93,8 +98,11 @@ function CreateLayananPolsek() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -52,6 +52,21 @@ function EditTipsKeamanan() {
     imageUrl: "",
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data saat pertama kali
   useEffect(() => {
     const loadData = async () => {
@@ -295,8 +310,11 @@ function EditTipsKeamanan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -30,6 +30,22 @@ function CreateKeamananLingkungan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateKeamanan.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateKeamanan.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateKeamanan.create.form = {
       judul: '',
@@ -199,8 +215,11 @@ function CreateKeamananLingkungan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx

@@ -30,6 +30,33 @@ function CreateArtikelKesehatan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateArtikelKesehatan.create.form.title?.trim() !== '' &&
+      stateArtikelKesehatan.create.form.content?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.introduction.content) &&
+      stateArtikelKesehatan.create.form.symptom.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.symptom.content) &&
+      stateArtikelKesehatan.create.form.prevention.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.prevention.content) &&
+      stateArtikelKesehatan.create.form.firstAid.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.firstAid.content) &&
+      stateArtikelKesehatan.create.form.mythVsFact.title?.trim() !== '' &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.mitos) &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.fakta) &&
+      !isHtmlEmpty(stateArtikelKesehatan.create.form.doctorSign.content) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateArtikelKesehatan.create.form = {
       title: '',
@@ -65,10 +92,79 @@ function CreateArtikelKesehatan() {
 
   const handleSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
+
+    if (!stateArtikelKesehatan.create.form.title?.trim()) {
+      toast.error('Judul wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.content?.trim()) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.introduction.content)) {
+      toast.error('Pendahuluan wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.symptom.title?.trim()) {
+      toast.error('Judul gejala wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.symptom.content)) {
+      toast.error('Deskripsi gejala wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.prevention.title?.trim()) {
+      toast.error('Judul pencegahan wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.prevention.content)) {
+      toast.error('Deskripsi pencegahan wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.firstAid.title?.trim()) {
+      toast.error('Judul pertolongan pertama wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.firstAid.content)) {
+      toast.error('Deskripsi pertolongan pertama wajib diisi');
+      return;
+    }
+
+    if (!stateArtikelKesehatan.create.form.mythVsFact.title?.trim()) {
+      toast.error('Judul mitos vs fakta wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.mitos)) {
+      toast.error('Deskripsi mitos wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.mythVsFact.fakta)) {
+      toast.error('Deskripsi fakta wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateArtikelKesehatan.create.form.doctorSign.content)) {
+      toast.error('Deskripsi kapan harus ke dokter wajib diisi');
+      return;
+    }
+
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
-      if (!file) {
-        return toast.warn('Silakan pilih file gambar terlebih dahulu');
-      }
+      setIsSubmitting(true);
 
       const res = await ApiFetch.api.fileStorage.create.post({
         file,
@@ -344,8 +440,11 @@ function CreateArtikelKesehatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/[id]/edit/page.tsx

@@ -45,6 +45,28 @@ function EditFasilitasKesehatan() {
   const params = useParams<{ id: string }>();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.informasiUmum.fasilitas?.trim() !== '' &&
+      formData.informasiUmum.alamat?.trim() !== '' &&
+      formData.informasiUmum.jamOperasional?.trim() !== '' &&
+      !isHtmlEmpty(formData.layananUnggulan.content) &&
+      formData.dokterdanTenagaMedis.length > 0 &&
+      !isHtmlEmpty(formData.fasilitasPendukung.content) &&
+      !isHtmlEmpty(formData.prosedurPendaftaran.content) &&
+      formData.tarifDanLayanan.length > 0
+    );
+  };
+
   const [formData, setFormData] = useState<EditFasilitasKesehatanForm>({
     name: '',
     informasiUmum: { fasilitas: '', alamat: '', jamOperasional: '' },
@@ -111,6 +133,52 @@ function EditFasilitasKesehatan() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (!formData.name?.trim()) {
+      toast.error('Nama fasilitas kesehatan wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.fasilitas?.trim()) {
+      toast.error('Fasilitas wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!formData.informasiUmum.jamOperasional?.trim()) {
+      toast.error('Jam operasional wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.layananUnggulan.content)) {
+      toast.error('Layanan unggulan wajib diisi');
+      return;
+    }
+
+    if (formData.dokterdanTenagaMedis.length === 0) {
+      toast.error('Dokter dan tenaga medis wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.fasilitasPendukung.content)) {
+      toast.error('Fasilitas pendukung wajib diisi');
+      return;
+    }
+
+    if (formData.tarifDanLayanan.length === 0) {
+      toast.error('Tarif dan layanan wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.prosedurPendaftaran.content)) {
+      toast.error('Prosedur pendaftaran wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
 
@@ -264,8 +332,11 @@ function EditFasilitasKesehatan() {
             <Button
               type="submit"
               radius="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create/page.tsx

@@ -26,6 +26,28 @@ function CreateFasilitasKesehatan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateFasilitasKesehatan.create.form.name?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.fasilitas?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.alamat?.trim() !== '' &&
+      stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional?.trim() !== '' &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.layananUnggulan.content) &&
+      stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.length > 0 &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.fasilitasPendukung.content) &&
+      stateFasilitasKesehatan.create.form.tarifDanLayanan.length > 0 &&
+      !isHtmlEmpty(stateFasilitasKesehatan.create.form.prosedurPendaftaran.content)
+    );
+  };
+
   const resetForm = () => {
     stateFasilitasKesehatan.create.form = {
       name: '',
@@ -50,6 +72,52 @@ function CreateFasilitasKesehatan() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (!stateFasilitasKesehatan.create.form.name?.trim()) {
+      toast.error('Nama fasilitas kesehatan wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.fasilitas?.trim()) {
+      toast.error('Fasilitas wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional?.trim()) {
+      toast.error('Jam operasional wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.layananUnggulan.content)) {
+      toast.error('Layanan unggulan wajib diisi');
+      return;
+    }
+
+    if (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.length === 0) {
+      toast.error('Dokter dan tenaga medis wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.fasilitasPendukung.content)) {
+      toast.error('Fasilitas pendukung wajib diisi');
+      return;
+    }
+
+    if (stateFasilitasKesehatan.create.form.tarifDanLayanan.length === 0) {
+      toast.error('Layanan wajib dipilih');
+      return;
+    }
+
+    if (isHtmlEmpty(stateFasilitasKesehatan.create.form.prosedurPendaftaran.content)) {
+      toast.error('Prosedur pendaftaran wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await stateFasilitasKesehatan.create.submit();
@@ -214,8 +282,11 @@ function CreateFasilitasKesehatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/[id]/edit/page.tsx

@@ -29,6 +29,20 @@ function EditDokterTenagaMedis() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.specialist?.trim() !== '' &&
+      formData.jadwal?.trim() !== '' &&
+      formData.jadwalLibur?.trim() !== '' &&
+      formData.jamBukaOperasional !== '' &&
+      formData.jamTutupOperasional !== '' &&
+      formData.jamBukaLibur !== '' &&
+      formData.jamTutupLibur !== ''
+    );
+  };
+
   const [formData, setFormData] = useState({
     name: '',
     specialist: '',
@@ -108,6 +122,46 @@ function EditDokterTenagaMedis() {
 
   // Submit
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama dokter wajib diisi');
+      return;
+    }
+
+    if (!formData.specialist?.trim()) {
+      toast.error('Specialist wajib diisi');
+      return;
+    }
+
+    if (!formData.jadwal?.trim()) {
+      toast.error('Jadwal wajib diisi');
+      return;
+    }
+
+    if (!formData.jadwalLibur?.trim()) {
+      toast.error('Jadwal libur wajib diisi');
+      return;
+    }
+
+    if (!formData.jamBukaOperasional) {
+      toast.error('Jam buka operasional wajib diisi');
+      return;
+    }
+
+    if (!formData.jamTutupOperasional) {
+      toast.error('Jam tutup operasional wajib diisi');
+      return;
+    }
+
+    if (!formData.jamBukaLibur) {
+      toast.error('Jam buka hari libur wajib diisi');
+      return;
+    }
+
+    if (!formData.jamTutupLibur) {
+      toast.error('Jam tutup hari libur wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       state.update.form = { ...state.update.form, ...formData };
@@ -223,8 +277,11 @@ function EditDokterTenagaMedis() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create/page.tsx

@@ -16,6 +16,20 @@ function CreateDokter() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.create.form.name?.trim() !== '' &&
+      createState.create.create.form.specialist?.trim() !== '' &&
+      createState.create.create.form.jadwal?.trim() !== '' &&
+      createState.create.create.form.jadwalLibur?.trim() !== '' &&
+      createState.create.create.form.jamBukaOperasional !== '' &&
+      createState.create.create.form.jamTutupOperasional !== '' &&
+      createState.create.create.form.jamBukaLibur !== '' &&
+      createState.create.create.form.jamTutupLibur !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.create.form = {
       name: "",
@@ -41,7 +55,49 @@ function CreateDokter() {
   );
 
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); // Prevent default form submission
+    
+    if (!createState.create.create.form.name?.trim()) {
+      toast.error('Nama dokter wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.specialist?.trim()) {
+      toast.error('Specialist wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jadwal?.trim()) {
+      toast.error('Jadwal wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jadwalLibur?.trim()) {
+      toast.error('Jadwal libur wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamBukaOperasional) {
+      toast.error('Jam buka operasional wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamTutupOperasional) {
+      toast.error('Jam tutup operasional wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamBukaLibur) {
+      toast.error('Jam buka hari libur wajib diisi');
+      return;
+    }
+
+    if (!createState.create.create.form.jamTutupLibur) {
+      toast.error('Jam tutup hari libur wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await createState.create.create.create();
@@ -170,8 +226,11 @@ function CreateDokter() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/[id]/page.tsx

@@ -25,6 +25,14 @@ function EditTarifLayanan() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.layanan?.trim() !== '' &&
+      formData.tarif?.trim() !== ''
+    );
+  };
+
   const [originalData, setOriginalData] = useState({
     tarif: '',
     layanan: ''
@@ -74,6 +82,16 @@ function EditTarifLayanan() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.layanan?.trim()) {
+      toast.error('Layanan wajib diisi');
+      return;
+    }
+
+    if (!formData.tarif?.trim()) {
+      toast.error('Tarif wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // update global state hanya saat submit
@@ -155,8 +173,11 @@ function EditTarifLayanan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/create/page.tsx

@@ -22,6 +22,14 @@ function CreateTarifLayanan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.layanan?.trim() !== '' &&
+      createState.create.form.tarif?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       tarif: '',
@@ -30,6 +38,16 @@ function CreateTarifLayanan() {
   };
 
   const handleSubmit = async () => {
+    if (!createState.create.form.layanan?.trim()) {
+      toast.error('Layanan wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.tarif?.trim()) {
+      toast.error('Tarif wajib diisi');
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       await createState.create.create();
@@ -101,8 +119,11 @@ function CreateTarifLayanan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/[id]/edit/page.tsx

@@ -43,6 +43,25 @@ function EditJadwalKegiatan() {
   const [formData, setFormData] = useState<JadwalKegiatanFormBase>(emptyForm());
   const [originalData, setOriginalData] = useState<JadwalKegiatanFormBase>(emptyForm());
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.content?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.name?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.tanggal?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.waktu?.trim() !== '' &&
+      formData.informasiJadwalKegiatan.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiJadwalKegiatan.deskripsi)
+    );
+  };
+
 
   // Helper untuk update nested state
   const updateNested = <
@@ -241,8 +260,11 @@ function EditJadwalKegiatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create/page.tsx

@@ -24,6 +24,25 @@ function CreateJadwalKegiatan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateJadwalKegiatan.create.form.content?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu?.trim() !== '' &&
+      stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateJadwalKegiatan.create.form = {
       content: '',
@@ -198,8 +217,11 @@ function CreateJadwalKegiatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/[id]/edit/page.tsx

@@ -26,6 +26,17 @@ function EditGrafikHasilKepuasan() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.tanggal !== '' &&
+      formData.jenisKelamin?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.penyakit?.trim() !== ''
+    );
+  };
+
   const [formData, setFormData] = useState({
     nama: '',
     tanggal: '',
@@ -95,6 +106,31 @@ function EditGrafikHasilKepuasan() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!formData.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!formData.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!formData.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!formData.penyakit?.trim()) {
+      toast.error('Penyakit wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       editState.update.form = { ...editState.update.form, ...formData };
@@ -164,8 +200,11 @@ function EditGrafikHasilKepuasan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/penderita_penyakit/create/page.tsx

@@ -25,6 +25,17 @@ function CreateGrafikHasilKepuasanMasyarakat() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateGrafikKepuasan.create.form.nama?.trim() !== '' &&
+      stateGrafikKepuasan.create.form.tanggal !== '' &&
+      stateGrafikKepuasan.create.form.jenisKelamin?.trim() !== '' &&
+      stateGrafikKepuasan.create.form.alamat?.trim() !== '' &&
+      stateGrafikKepuasan.create.form.penyakit?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stateGrafikKepuasan.create.form = {
       nama: "",
@@ -36,6 +47,31 @@ function CreateGrafikHasilKepuasanMasyarakat() {
   };
 
   const handleSubmit = async () => {
+    if (!stateGrafikKepuasan.create.form.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!stateGrafikKepuasan.create.form.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!stateGrafikKepuasan.create.form.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!stateGrafikKepuasan.create.form.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (!stateGrafikKepuasan.create.form.penyakit?.trim()) {
+      toast.error('Penyakit wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await stateGrafikKepuasan.create.create();
@@ -129,8 +165,11 @@ function CreateGrafikHasilKepuasanMasyarakat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/[id]/edit/page.tsx

@@ -26,6 +26,16 @@ function EditKelahiran() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.tanggal !== '' &&
+      formData.jenisKelamin?.trim() !== '' &&
+      formData.alamat?.trim() !== ''
+    );
+  };
+
   const [formData, setFormData] = useState({
     nama: '',
     tanggal: '',
@@ -90,6 +100,26 @@ function EditKelahiran() {
 
 
   const handleSubmit = async () => {
+    if (!formData.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!formData.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!formData.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!formData.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // Update global state hanya saat submit
@@ -173,8 +203,11 @@ function EditKelahiran() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create/page.tsx

@@ -24,6 +24,16 @@ function CreateKelahiran() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.nama?.trim() !== '' &&
+      createState.create.form.tanggal !== '' &&
+      createState.create.form.jenisKelamin?.trim() !== '' &&
+      createState.create.form.alamat?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       nama: '',
@@ -35,6 +45,26 @@ function CreateKelahiran() {
 
 
   const handleSubmit = async () => {
+    if (!createState.create.form.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       await createState.create.create();
@@ -126,8 +156,11 @@ function CreateKelahiran() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/[id]/edit/page.tsx

@@ -28,6 +28,24 @@ function EditKematian() {
   const params = useParams();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.tanggal !== '' &&
+      formData.jenisKelamin?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      !isHtmlEmpty(formData.penyebab)
+    );
+  };
+
   const [formData, setFormData] = useState({
     nama: '',
     tanggal: '',
@@ -96,6 +114,31 @@ function EditKematian() {
   };
 
   const handleSubmit = async () => {
+    if (!formData.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!formData.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!formData.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!formData.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.penyebab)) {
+      toast.error('Penyebab wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       // Update global state saat submit
@@ -194,8 +237,11 @@ function EditKematian() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/create/page.tsx

@@ -23,6 +23,24 @@ function CreateKematian() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      createState.create.form.nama?.trim() !== '' &&
+      createState.create.form.tanggal !== '' &&
+      createState.create.form.jenisKelamin?.trim() !== '' &&
+      createState.create.form.alamat?.trim() !== '' &&
+      !isHtmlEmpty(createState.create.form.penyebab)
+    );
+  };
+
   const resetForm = () => {
     createState.create.form = {
       nama: '',
@@ -35,16 +53,33 @@ function CreateKematian() {
 
 
   const handleSubmit = async () => {
+    if (!createState.create.form.nama?.trim()) {
+      toast.error('Nama wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.tanggal) {
+      toast.error('Tanggal wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.jenisKelamin?.trim()) {
+      toast.error('Jenis kelamin wajib diisi');
+      return;
+    }
+
+    if (!createState.create.form.alamat?.trim()) {
+      toast.error('Alamat wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(createState.create.form.penyebab)) {
+      toast.error('Penyebab wajib diisi');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
-      if (!createState.create.form.nama) {
-        return toast.warn('Nama wajib diisi');
-      }
-      if (!createState.create.form.tanggal) {
-        return toast.warn('Tanggal wajib diisi');
-      }
-
-
       await createState.create.create();
       resetForm();
       router.push(
@@ -140,8 +175,11 @@ function CreateKematian() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

@@ -47,6 +47,22 @@ function EditInfoWabahPenyakit() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsiLengkap)
+    );
+  };
+
   // Helper untuk update field formData
   const updateField = (field: keyof typeof formData, value: string) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
@@ -274,8 +290,11 @@ function EditInfoWabahPenyakit() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/create/page.tsx

@@ -30,6 +30,23 @@ function CreateInfoWabahPenyakit() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      infoWabahPenyakitState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(infoWabahPenyakitState.create.form.deskripsiSingkat) &&
+      !isHtmlEmpty(infoWabahPenyakitState.create.form.deskripsiLengkap) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     infoWabahPenyakitState.create.form = {
       name: "",
@@ -216,8 +233,11 @@ function CreateInfoWabahPenyakit() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -47,6 +47,22 @@ function EditKontakDarurat() {
   });
   const [loading, setLoading] = useState(true);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.whatsapp?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data sekali saat mount
   useEffect(() => {
     const loadKontakDarurat = async () => {
@@ -256,8 +272,11 @@ function EditKontakDarurat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -35,6 +35,23 @@ function CreateKontakDarurat() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      kontakDaruratState.create.form.name?.trim() !== '' &&
+      kontakDaruratState.create.form.whatsapp?.trim() !== '' &&
+      !isHtmlEmpty(kontakDaruratState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     kontakDaruratState.create.form = {
       name: '',
@@ -240,8 +257,11 @@ function CreateKontakDarurat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/edit/page.tsx

@@ -48,6 +48,21 @@ function EditPenangananDarurat() {
   const [file, setFile] = useState<File | null>(null);
   const [loading, setLoading] = useState(true);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data satu kali saat component mount
   useEffect(() => {
     const loadData = async () => {
@@ -263,8 +278,11 @@ function EditPenangananDarurat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/create/page.tsx

@@ -35,6 +35,22 @@ function CreatePenangananDarurat() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [file, setFile] = useState<File | null>(null);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      penangananDaruratState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(penangananDaruratState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     penangananDaruratState.create.form = {
       name: '',
@@ -234,8 +250,11 @@ function CreatePenangananDarurat() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

@@ -33,6 +33,25 @@ function EditPosyandu() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.nomor?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      !isHtmlEmpty(formData.jadwalPelayanan) &&
+      (file !== null || originalData.imageId !== '') // Either a new file is selected or an existing image exists
+    );
+  };
+
   const [formData, setFormData] = useState({
     name: '',
     nomor: '',
@@ -84,6 +103,31 @@ function EditPosyandu() {
   }, [params?.id]);
 
   const handleSubmit = async () => {
+    if (!formData.name?.trim()) {
+      toast.error('Nama posyandu wajib diisi');
+      return;
+    }
+
+    if (!formData.nomor?.trim()) {
+      toast.error('Nomor telepon wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(formData.jadwalPelayanan)) {
+      toast.error('Jadwal pelayanan wajib diisi');
+      return;
+    }
+
+    if (!file && !originalData.imageId) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       const updatedForm = { ...statePosyandu.edit.form, ...formData };
@@ -278,8 +322,11 @@ function EditPosyandu() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

@@ -31,6 +31,23 @@ function CreatePosyandu() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      statePosyandu.create.form.name?.trim() !== '' &&
+      statePosyandu.create.form.nomor?.trim() !== '' &&
+      !isHtmlEmpty(statePosyandu.create.form.deskripsi) &&
+      !isHtmlEmpty(statePosyandu.create.form.jadwalPelayanan) &&
+      file !== null
+    );
+  };
 
   const resetForm = () => {
     statePosyandu.create.form = {
@@ -46,6 +63,31 @@ function CreatePosyandu() {
 
 
   const handleSubmit = async () => {
+    if (!statePosyandu.create.form.name?.trim()) {
+      toast.error('Nama posyandu wajib diisi');
+      return;
+    }
+
+    if (!statePosyandu.create.form.nomor?.trim()) {
+      toast.error('Nomor telepon wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(statePosyandu.create.form.deskripsi)) {
+      toast.error('Deskripsi wajib diisi');
+      return;
+    }
+
+    if (isHtmlEmpty(statePosyandu.create.form.jadwalPelayanan)) {
+      toast.error('Jadwal pelayanan wajib diisi');
+      return;
+    }
+
+    if (!file) {
+      toast.error('Gambar wajib dipilih');
+      return;
+    }
+
     try {
       setIsSubmitting(true);
       if (!file) {
@@ -221,8 +263,11 @@ function CreatePosyandu() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -46,6 +46,22 @@ function EditProgramKesehatan() {
     imageUrl: ''
   });
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data awal
   useEffect(() => {
     const loadData = async () => {
@@ -266,8 +282,11 @@ function EditProgramKesehatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

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

@@ -30,6 +30,23 @@ function CreateProgramKesehatan() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Helper function to check if HTML content is empty
+  const isHtmlEmpty = (html: string) => {
+    // Remove all HTML tags and check if there's any text content
+    const textContent = html.replace(/<[^>]*>/g, '').trim();
+    return textContent === '';
+  };
+
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      programKesehatanState.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(programKesehatanState.create.form.deskripsiSingkat) &&
+      !isHtmlEmpty(programKesehatanState.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     programKesehatanState.create.form = {
       name: "",
@@ -223,8 +240,11 @@ function CreateProgramKesehatan() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx

@@ -72,6 +72,17 @@ function EditPuskesmas() {
     imageUrl: ''
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.jam.workDays?.trim() !== '' &&
+      formData.jam.weekDays?.trim() !== '' &&
+      formData.jam.holiday?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     const loadPuskesmas = async () => {
       const id = params?.id as string;
@@ -383,8 +394,11 @@ function EditPuskesmas() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/kesehatan/puskesmas/create/page.tsx

@@ -29,6 +29,15 @@ function CreatePuskesmas() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      statePuskesmas.create.form.name?.trim() !== '' &&
+      statePuskesmas.create.form.alamat?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     statePuskesmas.create.form = {
       name: '',
@@ -257,8 +266,11 @@ function CreatePuskesmas() {
               onClick={handleSubmit}
               radius="md"
               size="md"
+              disabled={!isFormValid() || isSubmitting}
               style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                background: !isFormValid() || isSubmitting
+                  ? `linear-gradient(135deg, #cccccc, #eeeeee)`
+                  : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}

src/app/admin/(dashboard)/landing-page/profil/media-sosial/create/page.tsx

@@ -24,7 +24,6 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import profileLandingPageState from '../../../../_state/landing-page/profile';
 import SelectSosialMedia from '@/app/admin/(dashboard)/_com/selectSocialMedia';
-import { sosmedMap } from '@/app/admin/(dashboard)/landing-page/profil/_lib/sosmed';
 
 // ⭐ Tambah type SosmedKey
 type SosmedKey =