diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx index fdf71259..b23b011a 100644 --- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx @@ -53,6 +53,21 @@ function EditKeamananLingkungan() { imageUrl: "", }); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + formData.name?.trim() !== '' && + !isHtmlEmpty(formData.deskripsi) + ); + }; + // Load data sekali pas mount useEffect(() => { const loadData = async () => { @@ -294,8 +309,11 @@ function EditKeamananLingkungan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx index f1d148a6..6b977006 100644 --- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx @@ -35,6 +35,22 @@ function CreateKeamananLingkungan() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false) + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + keamananState.create.form.name?.trim() !== '' && + !isHtmlEmpty(keamananState.create.form.deskripsi) && + file !== null + ); + }; + const resetForm = () => { keamananState.create.form = { name: '', @@ -237,8 +253,11 @@ function CreateKeamananLingkungan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx index 7bff7bad..3d4ff3b5 100644 --- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx @@ -39,6 +39,15 @@ function EditKontakItem() { icon: '', }); + // Check if form is valid + const isFormValid = () => { + return ( + formData.name?.trim() !== '' && + formData.nomorTelepon?.trim() !== '' && + formData.icon?.trim() !== '' + ); + }; + // Load data sekali dari global state useEffect(() => { const loadKontakDarurat = async () => { @@ -170,8 +179,11 @@ function EditKontakItem() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx index c6789784..ea0ac7fe 100644 --- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx @@ -23,6 +23,16 @@ function CreateKontakItem() { const kontakState = useProxy(kontakDarurat.kontakDaruratItem); const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + + // Check if form is valid + const isFormValid = () => { + return ( + kontakState.create.form.nama?.trim() !== '' && + kontakState.create.form.nomorTelepon?.trim() !== '' && + kontakState.create.form.icon?.trim() !== '' + ); + }; + const resetForm = () => { kontakState.create.form = { nama: '', @@ -115,8 +125,11 @@ function CreateKontakItem() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx index 80a8c6f1..de6ac436 100644 --- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx @@ -46,6 +46,14 @@ export default function EditKontakDaruratKeamanan() { kategoriId: [], }); + // Check if form is valid + const isFormValid = () => { + return ( + formData.name?.trim() !== '' && + formData.kategoriId.length > 0 + ); + }; + // 🔁 Load data saat ID berubah useEffect(() => { const loadInitialData = async () => { @@ -213,8 +221,11 @@ export default function EditKontakDaruratKeamanan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx index 92c0a424..bd8e0b69 100644 --- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx @@ -26,6 +26,14 @@ function CreateKontakDaruratKeamanan() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + // Check if form is valid + const isFormValid = () => { + return ( + kontakState.create.form.nama?.trim() !== '' && + kontakState.create.form.icon?.trim() !== '' + ); + }; + useShallowEffect(() => { kontakDarurat.kontakDaruratItem.findMany.load(); }, []); @@ -127,8 +135,11 @@ function CreateKontakDaruratKeamanan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx index a079c8aa..f9f940a7 100644 --- a/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx @@ -55,6 +55,25 @@ function EditLaporanPublik() { kronologi: '', }); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + formData.judul?.trim() !== '' && + formData.lokasi?.trim() !== '' && + formData.tanggalWaktu?.trim() !== '' && + formData.status?.trim() !== '' && + !isHtmlEmpty(formData.kronologi) && + !isHtmlEmpty(formData.penanganan) + ); + }; + useEffect(() => { const loadLaporanPublik = async () => { const id = params?.id as string; @@ -223,8 +242,11 @@ function EditLaporanPublik() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx index 4665545d..d086b10f 100644 --- a/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx @@ -26,6 +26,16 @@ function CreateLaporanPublik() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + // Check if form is valid + const isFormValid = () => { + return ( + stateLaporan.create.form.judul?.trim() !== '' && + stateLaporan.create.form.lokasi?.trim() !== '' && + stateLaporan.create.form.tanggalWaktu?.trim() !== '' && + stateLaporan.create.form.kronologi?.trim() !== '' + ); + }; + const resetForm = () => { stateLaporan.create.form = { judul: '', @@ -123,8 +133,11 @@ function CreateLaporanPublik() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx index 9943477a..1a63549c 100644 --- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx @@ -41,6 +41,23 @@ function EditPencegahanKriminalitas() { linkVideo: '', }); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + formData.judul?.trim() !== '' && + !isHtmlEmpty(formData.deskripsiSingkat) && + !isHtmlEmpty(formData.deskripsi) && + convertYoutubeUrlToEmbed(formData.linkVideo) !== '' + ); + }; + // load data hanya sekali pas id berubah useEffect(() => { const loadKriminalitas = async () => { @@ -220,8 +237,11 @@ function EditPencegahanKriminalitas() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx index ab5646c8..9e12f6d4 100644 --- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx @@ -28,6 +28,23 @@ function CreatePencegahanKriminalitas() { const embedLink = convertYoutubeUrlToEmbed(link); const [isSubmitting, setIsSubmitting] = useState(false); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + kriminalitasState.create.form.judul?.trim() !== '' && + !isHtmlEmpty(kriminalitasState.create.form.deskripsiSingkat) && + !isHtmlEmpty(kriminalitasState.create.form.deskripsi) && + embedLink !== '' + ); + }; + const resetForm = () => { kriminalitasState.create.form = { judul: "", @@ -165,8 +182,11 @@ function CreatePencegahanKriminalitas() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx index 1c2b79d4..29f2a4fd 100644 --- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx @@ -67,6 +67,17 @@ function EditPolsekTerdekat() { layananPolsekId: [] }); + // Check if form is valid + const isFormValid = () => { + return ( + formData.nama?.trim() !== '' && + formData.jarakKeDesa?.trim() !== '' && + formData.alamat?.trim() !== '' && + formData.nomorTelepon?.trim() !== '' && + formData.layananPolsekId.length > 0 + ); + }; + useEffect(() => { statePolsekTerdekat.layananPolsek.findManyAll.load(); }, []); @@ -261,8 +272,11 @@ function EditPolsekTerdekat() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx index b3b63080..3f38a0d5 100644 --- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx @@ -24,6 +24,17 @@ function CreatePolsekTerdekat() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + // Check if form is valid + const isFormValid = () => { + return ( + polsekState.create.form.nama?.trim() !== '' && + polsekState.create.form.jarakKeDesa?.trim() !== '' && + polsekState.create.form.alamat?.trim() !== '' && + polsekState.create.form.nomorTelepon?.trim() !== '' && + polsekState.create.form.layananPolsekId.length > 0 + ); + }; + useEffect(() => { statePolsekTerdekat.layananPolsek.findManyAll.load(); }, []); @@ -219,8 +230,11 @@ function CreatePolsekTerdekat() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx index 04e64bd2..5eaa948d 100644 --- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx @@ -33,6 +33,11 @@ function EditLayananPolsek() { nama: '', }); + // Check if form is valid + const isFormValid = () => { + return formData.nama?.trim() !== ''; + }; + useEffect(() => { const loadLayananPolsek = async () => { const id = params?.id as string; @@ -143,8 +148,11 @@ function EditLayananPolsek() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx index 378ba46e..67d551f4 100644 --- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx @@ -22,6 +22,11 @@ function CreateLayananPolsek() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + // Check if form is valid + const isFormValid = () => { + return createState.create.form.nama?.trim() !== ''; + }; + const resetForm = () => { createState.create.form = { nama: '', @@ -93,8 +98,11 @@ function CreateLayananPolsek() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx index 48de4cf7..0616cddc 100644 --- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx @@ -52,6 +52,21 @@ function EditTipsKeamanan() { imageUrl: "", }); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + formData.judul?.trim() !== '' && + !isHtmlEmpty(formData.deskripsi) + ); + }; + // Load data saat pertama kali useEffect(() => { const loadData = async () => { @@ -295,8 +310,11 @@ function EditTipsKeamanan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }} diff --git a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx index 8ba626d6..675544b2 100644 --- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx +++ b/src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx @@ -30,6 +30,22 @@ function CreateKeamananLingkungan() { const router = useRouter(); const [isSubmitting, setIsSubmitting] = useState(false); + // Helper function to check if HTML content is empty + const isHtmlEmpty = (html: string) => { + // Remove all HTML tags and check if there's any text content + const textContent = html.replace(/<[^>]*>/g, '').trim(); + return textContent === ''; + }; + + // Check if form is valid + const isFormValid = () => { + return ( + stateKeamanan.create.form.judul?.trim() !== '' && + !isHtmlEmpty(stateKeamanan.create.form.deskripsi) && + file !== null + ); + }; + const resetForm = () => { stateKeamanan.create.form = { judul: '', @@ -199,8 +215,11 @@ function CreateKeamananLingkungan() { onClick={handleSubmit} radius="md" size="md" + disabled={!isFormValid() || isSubmitting} style={{ - background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, + background: !isFormValid() || isSubmitting + ? `linear-gradient(135deg, #cccccc, #eeeeee)` + : `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`, color: '#fff', boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)', }}