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)',
               }}