feat: add form validation for inovasi, lingkungan, and pendidikan modules

- Added isFormValid() and isHtmlEmpty() helper functions for form validation
- Disabled submit buttons when required fields are empty across multiple admin and public pages
- Applied consistent validation pattern for creating and editing records
- Commented out WhatsApp OTP sending in login route for debugging/testing
- Fixed path in NavbarMainMenu tooltip action

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -44,6 +44,21 @@ function EditDigitalSmartVillage() {
     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)
+    );
+  };
+
   useEffect(() => {
     const loadData = async () => {
       const id = params?.id as string;
@@ -248,8 +263,11 @@ function EditDigitalSmartVillage() {
               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)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -30,6 +30,22 @@ export default function CreateDesaDigital() {
   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 (
+      stateDesaDigital.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateDesaDigital.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateDesaDigital.create.form = {
       name: '',
@@ -227,8 +243,11 @@ export default function CreateDesaDigital() {
               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)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx

@@ -44,6 +44,21 @@ function EditInfoTeknologiTepatGuna() {
     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 pertama kali
   useEffect(() => {
     const id = params?.id as string;
@@ -260,8 +275,11 @@ function EditInfoTeknologiTepatGuna() {
               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)/inovasi/info-teknologi-tepat-guna/create/page.tsx

@@ -30,6 +30,22 @@ function CreateInfoTeknologiTepatGuna() {
   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 (
+      stateInfoTekno.create.form.name?.trim() !== '' &&
+      !isHtmlEmpty(stateInfoTekno.create.form.deskripsi) &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateInfoTekno.create.form = {
       name: '',
@@ -202,8 +218,11 @@ function CreateInfoTeknologiTepatGuna() {
               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)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx

@@ -44,6 +44,23 @@ function EditKolaborasiInovasi() {
     kolaborator: "",
   });
 
+  // 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.slug?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.kolaborator?.trim() !== ''
+    );
+  };
+
   // Load data awal dari server
   useEffect(() => {
     const loadKolaborasi = async () => {
@@ -199,8 +216,11 @@ function EditKolaborasiInovasi() {
               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)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/create/page.tsx

@@ -16,6 +16,22 @@ function CreateProgramKreatifDesa() {
   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 (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.slug?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       name: "",
@@ -135,8 +151,11 @@ function CreateProgramKreatifDesa() {
               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)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx

@@ -51,6 +51,11 @@ function EditMitraKolaborasi() {
     imageUrl: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.name?.trim() !== '';
+  };
+
   // Load data ke state lokal sekali saja
   useEffect(() => {
     const loadData = async () => {
@@ -263,8 +268,11 @@ function EditMitraKolaborasi() {
               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)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx

@@ -29,6 +29,14 @@ function CreateMitraKolaborasi() {
   const [file, setFile] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      state.create.form.name?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     state.create.form = {
       name: '',
@@ -181,8 +189,11 @@ function CreateMitraKolaborasi() {
               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)/inovasi/program-kreatif-desa/[id]/edit/page.tsx

@@ -51,6 +51,23 @@ function EditProgramKreatifDesa() {
 
   const [isDataChanged, setIsDataChanged] = 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.slug?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
   // Load data hanya sekali berdasarkan params.id
   useEffect(() => {
     const loadProgramKreatif = async () => {
@@ -236,8 +253,11 @@ function EditProgramKreatifDesa() {
               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)/inovasi/program-kreatif-desa/create/page.tsx

@@ -25,6 +25,23 @@ function CreateProgramKreatifDesa() {
   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 (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.slug?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       name: "",
@@ -127,8 +144,11 @@ function CreateProgramKreatifDesa() {
               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)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx

@@ -67,6 +67,23 @@ export default function EditDataLingkunganDesa() {
     icon: '',
   });
 
+  // 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.jumlah?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
   // Load data saat komponen mount
   useEffect(() => {
     const loadData = async () => {
@@ -211,8 +228,11 @@ export default function EditDataLingkunganDesa() {
               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)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -25,6 +25,23 @@ function CreateDataLingkunganDesa() {
   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 (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.jumlah?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       name: '',
@@ -129,8 +146,11 @@ function CreateDataLingkunganDesa() {
               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)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx

@@ -38,6 +38,21 @@ export default function EditContohKegiatanDesaDarmasaba() {
     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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data awal
   useShallowEffect(() => {
     if (!contohEdukasiState.findById.data) {
@@ -156,8 +171,11 @@ export default function EditContohKegiatanDesaDarmasaba() {
               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)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx

@@ -27,6 +27,21 @@ export default function EditMateriEdukasiYangDiberikan() {
     content: '',
   });
 
+  // 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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
   // Initialize data kalau belum ada
   useShallowEffect(() => {
     if (!materiEdukasiState.findById.data) {
@@ -139,8 +154,11 @@ export default function EditMateriEdukasiYangDiberikan() {
               onClick={submit}
               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)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx

@@ -28,6 +28,21 @@ export default function EditTujuanEdukasiLingkungan() {
     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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Initialize global state
   useShallowEffect(() => {
     if (!tujuanEdukasiState.findById.data) {
@@ -147,8 +162,11 @@ export default function EditTujuanEdukasiLingkungan() {
               onClick={submit}
               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)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx

@@ -21,6 +21,11 @@ function EditKategoriKegiatan() {
   const [originalData, setOriginalData] = useState({ nama: '' });
   const [loading, setLoading] = useState(true);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
   // Load data once
   useEffect(() => {
     if (!id) return;
@@ -126,8 +131,11 @@ function EditKategoriKegiatan() {
               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)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx

@@ -14,6 +14,11 @@ function CreateKategoriKegiatan() {
   const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return stateKategori.create.form.nama?.trim() !== '';
+  };
+
   useEffect(() => {
     stateKategori.findMany.load();
   }, []);
@@ -84,8 +89,11 @@ function CreateKategoriKegiatan() {
               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)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx

@@ -67,6 +67,27 @@ export default function EditKegiatanDesa() {
   const [file, setFile] = useState<File | null>(null);
   const [previewImage, setPreviewImage] = useState<string | 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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsiSingkat) &&
+      !isHtmlEmpty(formData.deskripsiLengkap) &&
+      formData.tanggal?.trim() !== '' &&
+      formData.lokasi?.trim() !== '' &&
+      formData.partisipan !== null &&
+      formData.partisipan >= 0 &&
+      formData.kategoriKegiatanId?.trim() !== ''
+    );
+  };
+
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
     return new Date(dateString).toISOString().split('T')[0];
@@ -312,8 +333,11 @@ export default function EditKegiatanDesa() {
               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)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx

@@ -38,6 +38,28 @@ function CreateKegiatanDesa() {
 
   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 (
+      stateKegiatanDesa.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateKegiatanDesa.create.form.deskripsiSingkat) &&
+      stateKegiatanDesa.create.form.partisipan !== null &&
+      stateKegiatanDesa.create.form.partisipan >= 0 &&
+      stateKegiatanDesa.create.form.tanggal !== null &&
+      stateKegiatanDesa.create.form.lokasi?.trim() !== '' &&
+      !isHtmlEmpty(stateKegiatanDesa.create.form.deskripsiLengkap) &&
+      stateKegiatanDesa.create.form.kategoriKegiatanId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   const resetForm = () => {
     stateKegiatanDesa.create.form = {
       judul: '',
@@ -273,8 +295,11 @@ function CreateKegiatanDesa() {
               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)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx

@@ -27,6 +27,21 @@ function EditBentukKonservasiBerdasarkanAdat() {
     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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Initialize data dari global state
   useShallowEffect(() => {
     if (!bentukKonservasiState.findById.data) {
@@ -137,8 +152,11 @@ function EditBentukKonservasiBerdasarkanAdat() {
               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)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx

@@ -31,6 +31,21 @@ function EditFilosofiTriHitaKarana() {
     content: '',
   });
 
+  // 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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.content)
+    );
+  };
+
   // Load data dari global state kalau belum ada
   useShallowEffect(() => {
     if (!filosofiTriHitaState.findById.data) {
@@ -142,8 +157,11 @@ function EditFilosofiTriHitaKarana() {
               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)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx

@@ -24,6 +24,21 @@ function EditNilaiKonservasiAdat() {
   const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [originalData, setOriginalData] = useState({ judul: '', 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 (
+      !isHtmlEmpty(formData.judul) &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data awal
   useShallowEffect(() => {
     if (!nilaiKonservasiState.findById.data) {
@@ -136,8 +151,11 @@ function EditNilaiKonservasiAdat() {
               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)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx

@@ -35,6 +35,16 @@ function EditKeteranganBankSampahTerdekat() {
     lng: 0,
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.namaTempatMaps?.trim() !== '' &&
+      markerPosition !== null
+    );
+  };
+
   // Load data ketika component mount
   useEffect(() => {
     const loadKeterangan = async () => {
@@ -197,8 +207,11 @@ function EditKeteranganBankSampahTerdekat() {
               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)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx

@@ -19,6 +19,16 @@ function CreateKeteranganBankSampahTerdekat() {
   const [markerPosition, setMarkerPosition] = useState<{ lat: number; lng: number } | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      keteranganState.create.form.name?.trim() !== '' &&
+      keteranganState.create.form.alamat?.trim() !== '' &&
+      keteranganState.create.form.namaTempatMaps?.trim() !== '' &&
+      markerPosition !== null
+    );
+  };
+
   const resetForm = () => {
     keteranganState.create.form = {
       name: "",
@@ -135,8 +145,11 @@ function CreateKeteranganBankSampahTerdekat() {
               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)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx

@@ -34,6 +34,14 @@ function EditProgramKreatifDesa() {
     icon: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     const loadProgramKreatif = async () => {
       const id = params?.id as string;
@@ -143,8 +151,11 @@ function EditProgramKreatifDesa() {
               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)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -13,6 +13,14 @@ function CreatePengelolaanSampahBankSampah() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       name: "",
@@ -91,8 +99,11 @@ function CreatePengelolaanSampahBankSampah() {
               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)/lingkungan/program-penghijauan/[id]/edit/page.tsx

@@ -64,6 +64,23 @@ function EditProgramPenghijauan() {
     icon: '',
   });
 
+  // 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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.icon?.trim() !== ''
+    );
+  };
+
   // Load data program penghijauan
   useEffect(() => {
     const loadProgram = async () => {
@@ -216,8 +233,11 @@ function EditProgramPenghijauan() {
               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)/lingkungan/program-penghijauan/create/page.tsx

@@ -25,6 +25,23 @@ function CreateProgramPenghijauan() {
   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 (
+      stateCreate.create.form.name?.trim() !== '' &&
+      stateCreate.create.form.icon?.trim() !== '' &&
+      stateCreate.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       name: '',
@@ -128,8 +145,11 @@ function CreateProgramPenghijauan() {
               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)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx

@@ -24,6 +24,21 @@ function EditProgramKreatifDesa() {
     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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   useEffect(() => {
     const loadProgramKreatif = async () => {
       const id = params?.id as string;
@@ -160,8 +175,11 @@ function EditProgramKreatifDesa() {
               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)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx

@@ -16,6 +16,21 @@ function CreateKeunggulanProgram() {
   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 (
+      stateCreate.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(stateCreate.create.form.deskripsi)
+    );
+  };
+
   const resetForm = () => {
     stateCreate.create.form = {
       judul: "",
@@ -97,8 +112,11 @@ function CreateKeunggulanProgram() {
               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)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx

@@ -42,6 +42,21 @@ function EditFasilitasYangDisediakan() {
     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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -76,11 +91,6 @@ function EditFasilitasYangDisediakan() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -180,8 +190,11 @@ function EditFasilitasYangDisediakan() {
                 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)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx

@@ -39,6 +39,21 @@ function EditLokasiDanJadwal() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [originalData, setOriginalData] = useState({ judul: '', 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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data sekali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -73,11 +88,6 @@ function EditLokasiDanJadwal() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -178,8 +188,11 @@ function EditLokasiDanJadwal() {
                 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)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx

@@ -39,6 +39,21 @@ function EditTujuanProgram() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [originalData, setOriginalData] = useState({ judul: '', 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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data sekali
   useShallowEffect(() => {
     if (!editState.findById.data) editState.findById.initialize();
@@ -71,11 +86,6 @@ function EditTujuanProgram() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -170,8 +180,11 @@ function EditTujuanProgram() {
                 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)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -28,6 +28,14 @@ export default function EditDataPendidikan() {
     jumlah: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.name?.trim() !== '' &&
+      formData.jumlah?.trim() !== ''
+    );
+  };
+
   // Load data saat mount
   useEffect(() => {
     if (id) {
@@ -127,8 +135,11 @@ export default function EditDataPendidikan() {
               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)/pendidikan/data-pendidikan/create/page.tsx

@@ -15,6 +15,14 @@ export default function CreateDataPendidikan() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateDPM.create.form.name?.trim() !== '' &&
+      stateDPM.create.form.jumlah?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     stateDPM.create.form = { name: '', jumlah: '' };
   };
@@ -90,8 +98,11 @@ export default function CreateDataPendidikan() {
               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)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx

@@ -31,6 +31,11 @@ function EditJenjangPendidikan() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [loading, setLoading] = useState(true);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.nama?.trim() !== '';
+  };
+
   // Load data sekali saat component mount
   useEffect(() => {
     if (!id) return;
@@ -136,8 +141,11 @@ function EditJenjangPendidikan() {
               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)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx

@@ -23,6 +23,11 @@ function CreateJenjangPendidikan() {
   const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return stateJenjang.create.form.nama?.trim() !== '';
+  };
+
   useEffect(() => {
     stateJenjang.findMany.load();
   }, []);
@@ -101,8 +106,11 @@ function CreateJenjangPendidikan() {
               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)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx

@@ -37,6 +37,14 @@ export default function EditLembaga() {
     jenjangId: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      form.nama?.trim() !== '' &&
+      form.jenjangId?.trim() !== ''
+    );
+  };
+
   // Load jenjang pendidikan dan data lembaga
   useEffect(() => {
     infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -161,8 +169,11 @@ export default function EditLembaga() {
               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)/pendidikan/info-sekolah/lembaga/create/page.tsx

@@ -25,6 +25,14 @@ function CreateLembaga() {
   const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateLembaga.create.form.nama?.trim() !== '' &&
+      stateLembaga.create.form.jenjangId?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     stateLembaga.findMany.load();
     infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -116,8 +124,11 @@ function CreateLembaga() {
               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)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx

@@ -40,6 +40,14 @@ function EditPengajar() {
     lembagaId: ''
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.lembagaId?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     const loadData = async () => {
       const id = params?.id as string;
@@ -157,8 +165,11 @@ function EditPengajar() {
               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)/pendidikan/info-sekolah/pengajar/create/page.tsx

@@ -25,6 +25,14 @@ function CreatePengajar() {
   const stateCreate = useProxy(infoSekolahPaud.pengajar);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.nama?.trim() !== '' &&
+      stateCreate.create.form.lembagaId?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     stateCreate.findMany.load();
     infoSekolahPaud.lembagaPendidikan.findMany.load();
@@ -116,8 +124,11 @@ function CreatePengajar() {
               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)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx

@@ -42,6 +42,14 @@ function EditSiswa() {
     lembagaId: '',
   });
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      formData.nama?.trim() !== '' &&
+      formData.lembagaId?.trim() !== ''
+    );
+  };
+
   // Load data siswa
   useEffect(() => {
     const loadSiswa = async () => {
@@ -166,8 +174,11 @@ function EditSiswa() {
               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)/pendidikan/info-sekolah/siswa/create/page.tsx

@@ -25,6 +25,14 @@ function CreateSiswa() {
   const stateCreate = useProxy(infoSekolahPaud.siswa);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      stateCreate.create.form.nama?.trim() !== '' &&
+      stateCreate.create.form.lembagaId?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     stateCreate.findMany.load();
     infoSekolahPaud.lembagaPendidikan.findMany.load();
@@ -115,8 +123,11 @@ function CreateSiswa() {
               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)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -37,6 +37,21 @@ function EditJenisProgramYangDiselenggarakan() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [originalData, setOriginalData] = useState({ judul: '', content: '' });
 
+  // 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.content)
+    );
+  };
+
   // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -71,11 +86,6 @@ function EditJenisProgramYangDiselenggarakan() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -168,8 +178,11 @@ function EditJenisProgramYangDiselenggarakan() {
               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)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx

@@ -45,6 +45,21 @@ function EditTempatKegiatan() {
     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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -79,11 +94,6 @@ function EditTempatKegiatan() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -177,8 +187,11 @@ function EditTempatKegiatan() {
                 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)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx

@@ -38,6 +38,21 @@ function EditTujuanProgram() {
     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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -72,11 +87,6 @@ function EditTujuanProgram() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     if (!editState.findById.data) return;
 
     setIsSubmitting(true);
@@ -163,8 +173,11 @@ function EditTujuanProgram() {
                 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)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx

@@ -38,6 +38,22 @@ function EditPerpustakaanDigital() {
   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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi) &&
+      formData.kategoriId?.trim() !== ''
+    );
+  };
+
   // Load kategori & data awal
   useEffect(() => {
     perpustakaanDigitalState.kategoriBuku.findManyAll.load();
@@ -254,8 +270,11 @@ function EditPerpustakaanDigital() {
               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)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx

@@ -18,6 +18,23 @@ function CreateDataPerpustakaan() {
   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 (
+      createState.create.form.judul?.trim() !== '' &&
+      !isHtmlEmpty(createState.create.form.deskripsi) &&
+      createState.create.form.kategoriId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   useEffect(() => {
     perpustakaanDigitalState.kategoriBuku.findManyAll.load();
   }, []);
@@ -196,8 +213,11 @@ function CreateDataPerpustakaan() {
               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)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx

@@ -23,6 +23,11 @@ function EditKategoriBuku() {
   const [formData, setFormData] = useState({ name: '' });
   const [loading, setLoading] = useState(true);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return formData.name?.trim() !== '';
+  };
+
   useEffect(() => {
     const loadKategori = async () => {
       const id = params?.id as string;
@@ -120,8 +125,11 @@ function EditKategoriBuku() {
               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)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx

@@ -13,6 +13,11 @@ function CreateKategoriBuku() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return createState.create.form.name?.trim() !== '';
+  };
+
   const resetForm = () => {
     createState.create.form = {
       name: "",
@@ -81,8 +86,11 @@ function CreateKategoriBuku() {
               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)/pendidikan/perpustakaan-digital/peminjam/[id]/edit/page.tsx

@@ -70,6 +70,26 @@ function EditPeminjam() {
     catatan: "",
   })
 
+  // 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.noTelp?.trim() !== '' &&
+      formData.alamat?.trim() !== '' &&
+      formData.bukuId?.trim() !== '' &&
+      formData.tanggalPinjam?.trim() !== '' &&
+      formData.status?.trim() !== '' &&
+      !isHtmlEmpty(formData.catatan)
+    );
+  };
+
   useShallowEffect(() => {
     perpustakaanDigitalState.dataPerpustakaan.findManyAll.load()
   })
@@ -296,8 +316,11 @@ function EditPeminjam() {
               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)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx

@@ -50,6 +50,21 @@ function EditTujuanProgram() {
   });
   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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // load data once
   useShallowEffect(() => {
     if (!editState.findById.data) editState.findById.initialize();
@@ -85,11 +100,6 @@ function EditTujuanProgram() {
     };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -186,8 +196,11 @@ function EditTujuanProgram() {
               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)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx

@@ -38,6 +38,21 @@ function EditTujuanProgram() {
     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.judul?.trim() !== '' &&
+      !isHtmlEmpty(formData.deskripsi)
+    );
+  };
+
   // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
@@ -72,11 +87,6 @@ function EditTujuanProgram() {
   };
 
   const handleSubmit = async () => {
-    if (!formData.judul.trim()) {
-      toast.error('Judul wajib diisi');
-      return;
-    }
-
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
@@ -166,8 +176,11 @@ function EditTujuanProgram() {
                 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/api/auth/login/route.ts

@@ -35,35 +35,35 @@ export async function POST(req: Request) {
 
       // ✅ PERBAIKAN: Gunakan format pesan yang lebih sederhana
       // Hapus karakter khusus yang bisa bikin masalah
-      const waMessage = `Website Desa Darmasaba\nKode verifikasi Anda ${codeOtp}`;
+      // const waMessage = `Website Desa Darmasaba\nKode verifikasi Anda ${codeOtp}`;
       
       // // ✅ OPSI 1: Tanpa encoding (coba dulu ini)
       // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${waMessage}`;
       
       // ✅ OPSI 2: Dengan encoding (kalau opsi 1 gagal)
-      const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodeURIComponent(waMessage)}`;
+      // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodeURIComponent(waMessage)}`;
       
       // ✅ OPSI 3: Encoding manual untuk URL-safe (alternatif terakhir)
       // const encodedMessage = waMessage.replace(/\n/g, '%0A').replace(/ /g, '%20');
       // const waUrl = `https://wa.wibudev.com/code?nom=${nomor}&text=${encodedMessage}`;
 
-      console.log("🔍 Debug WA URL:", waUrl); // Untuk debugging
+      // console.log("🔍 Debug WA URL:", waUrl); // Untuk debugging
       
-      const res = await fetch(waUrl);
+      // const res = await fetch(waUrl);
-      const sendWa = await res.json();
+      // const sendWa = await res.json();
 
-      console.log("📱 WA Response:", sendWa); // Debug response
+      // console.log("📱 WA Response:", sendWa); // Debug response
 
-      if (sendWa.status !== "success") {
+      // if (sendWa.status !== "success") {
-        return NextResponse.json(
+      //   return NextResponse.json(
-          { 
+      //     { 
-            success: false, 
+      //       success: false, 
-            message: "Gagal mengirim OTP via WhatsApp",
+      //       message: "Gagal mengirim OTP via WhatsApp",
-            debug: sendWa // Tampilkan error detail
+      //       debug: sendWa // Tampilkan error detail
-          },
+      //     },
-          { status: 400 }
+      //     { status: 400 }
-        );
+      //   );
-      }
+      // }
 
       const createOtpId = await prisma.kodeOtp.create({
         data: { nomor, otp: otpNumber, isActive: true },

src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -12,6 +12,25 @@ function Page() {
   const [opened, { open, close }] = useDisclosure(false);
   const ideInovatif = useProxy(ajukanIdeInovatifState);
 
+  // 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 (
+      ideInovatif.create.form.name?.trim() !== '' &&
+      ideInovatif.create.form.alamat?.trim() !== '' &&
+      ideInovatif.create.form.namaIde?.trim() !== '' &&
+      !isHtmlEmpty(ideInovatif.create.form.deskripsi) &&
+      ideInovatif.create.form.masalah?.trim() !== '' &&
+      ideInovatif.create.form.benefit?.trim() !== ''
+    );
+  };
+
   const resetForm = () => {
     ideInovatif.create.form = {
       name: "",
@@ -168,7 +187,11 @@ function Page() {
                 ideInovatif.create.form.benefit = val.target.value;
               }}
             />
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
               Simpan
             </Button>
           </Stack>

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/administrasi-online/page.tsx

@@ -24,6 +24,16 @@ function AdministrasiOnline() {
   const [opened, { open, close }] = useDisclosure(false);
   const state = useProxy(layananonlineDesa);
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      state.administrasiOnline.create.form.name?.trim() !== '' &&
+      state.administrasiOnline.create.form.alamat?.trim() !== '' &&
+      state.administrasiOnline.create.form.nomorTelepon?.trim() !== '' &&
+      state.administrasiOnline.create.form.jenisLayananId?.trim() !== ''
+    );
+  };
+
   useEffect(() => {
     // ✅ Panggil load data jenis layanan dari backend
     if (!state.jenisLayanan.findMany.data) {
@@ -104,7 +114,11 @@ function AdministrasiOnline() {
               }
             />
 
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
               Simpan
             </Button>
           </Stack>

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx

@@ -19,6 +19,28 @@ function PengaduanMasyarakat() {
   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 (
+      state.pengaduanMasyarakat.create.form.name?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.email?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.nomorTelepon?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.nik?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.judulPengaduan?.trim() !== '' &&
+      state.pengaduanMasyarakat.create.form.lokasiKejadian?.trim() !== '' &&
+      !isHtmlEmpty(state.pengaduanMasyarakat.create.form.deskripsiPengaduan) &&
+      state.pengaduanMasyarakat.create.form.jenisPengaduanId?.trim() !== '' &&
+      file !== null
+    );
+  };
+
   useEffect(() => {
     // ✅ Panggil load data jenis layanan dari backend
     if (!state.jenisPengaduan.findMany.data) {
@@ -207,7 +229,11 @@ function PengaduanMasyarakat() {
               </Box>
             </Box>
 
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            <Button 
+              bg={colors['blue-button']} 
+              onClick={handleSubmit}
+              disabled={!isFormValid()}
+            >
               Simpan
             </Button>
           </Stack>

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx

@@ -37,6 +37,24 @@ function Page() {
     };
   };
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      beasiswaDesa.create.form.namaLengkap?.trim() !== '' &&
+      beasiswaDesa.create.form.nis?.trim() !== '' &&
+      beasiswaDesa.create.form.kelas?.trim() !== '' &&
+      beasiswaDesa.create.form.jenisKelamin?.trim() !== '' &&
+      beasiswaDesa.create.form.alamatDomisili?.trim() !== '' &&
+      beasiswaDesa.create.form.tempatLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.tanggalLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.namaOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.nik?.trim() !== '' &&
+      beasiswaDesa.create.form.pekerjaanOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.penghasilan?.trim() !== '' &&
+      beasiswaDesa.create.form.noHp?.trim() !== ''
+    );
+  };
+
   const { data, page, totalPages, loading, load } = ungggulanDesa.findMany;
 
   useShallowEffect(() => {
@@ -238,7 +256,7 @@ function Page() {
               onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }} />
             <Group justify="flex-end" mt="md">
               <Button variant="default" radius="xl" onClick={close}>Batal</Button>
-              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit}>Kirim</Button>
+              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit} disabled={!isFormValid()}>Kirim</Button>
             </Group>
           </Stack>
         </Paper>

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx

@@ -46,6 +46,24 @@ export default function BeasiswaPage() {
     };
   };
 
+  // Check if form is valid
+  const isFormValid = () => {
+    return (
+      beasiswaDesa.create.form.namaLengkap?.trim() !== '' &&
+      beasiswaDesa.create.form.nis?.trim() !== '' &&
+      beasiswaDesa.create.form.kelas?.trim() !== '' &&
+      beasiswaDesa.create.form.jenisKelamin?.trim() !== '' &&
+      beasiswaDesa.create.form.alamatDomisili?.trim() !== '' &&
+      beasiswaDesa.create.form.tempatLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.tanggalLahir?.trim() !== '' &&
+      beasiswaDesa.create.form.namaOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.nik?.trim() !== '' &&
+      beasiswaDesa.create.form.pekerjaanOrtu?.trim() !== '' &&
+      beasiswaDesa.create.form.penghasilan?.trim() !== '' &&
+      beasiswaDesa.create.form.noHp?.trim() !== ''
+    );
+  };
+
   const handleSubmit = async () => {
     await beasiswaDesa.create.create();
     resetForm();
@@ -391,6 +409,7 @@ export default function BeasiswaPage() {
                 radius="xl"
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
+                disabled={!isFormValid()}
                 style={{ fontSize: '0.9375rem', fontWeight: 600, lineHeight: 1.4 }}
               >
                 Kirim

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx

@@ -42,6 +42,24 @@ export default function ModalPeminjaman({
 
   const BATAS_HARI_PINJAM = 4;
 
+  // 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 (
+      snap.create.form.nama?.trim() !== '' &&
+      snap.create.form.noTelp?.trim() !== '' &&
+      snap.create.form.alamat?.trim() !== '' &&
+      snap.create.form.tanggalPinjam?.trim() !== '' &&
+      !isHtmlEmpty(snap.create.form.catatan)
+    );
+  };
+
   // Reset form setiap modal dibuka
   useEffect(() => {
     if (opened && buku) {
@@ -222,13 +240,13 @@ export default function ModalPeminjaman({
           <Button
             onClick={handleSubmit}
             loading={snap.create.loading}
-            disabled={
+            disabled={!isFormValid() || snap.create.loading}
-              !snap.create.form.nama || !snap.create.form.tanggalPinjam
-            }
             rightSection={<IconArrowRight size={16} />}
             radius="xl"
             style={{
-              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              background: !isFormValid() || snap.create.loading
+                ? `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/darmasaba/_com/NavbarMainMenu.tsx

@@ -47,10 +47,10 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
 
           {listNavbar.map((item, k) => (
             <MenuItemCom
-            key={k} 
+              key={k}
-            item={item}
+              item={item}
-            isActive={item.href && pathname.startsWith(item.href) || 
+              isActive={item.href && pathname.startsWith(item.href) ||
-              (item.children?.some(child => child.href && pathname.startsWith(child.href)))}
+                (item.children?.some(child => child.href && pathname.startsWith(child.href)))}
             />
           ))}
 
@@ -73,7 +73,7 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
             <Tooltip label="Kembali ke Admin" position="bottom" withArrow>
               <ActionIcon
                 onClick={() => {
-                  next.push("/admin/landing-page/profil/program-inovasi")
+                  next.push("/admin/landing-page/profile/program-inovasi")
                 }}
                 color={colors["blue-button"]}
                 radius="xl"