feat: add form validation for kesehatan 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: name, address, dates, descriptions, and image uploads
- Edit pages allow existing images, create pages require new uploads

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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