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>
This commit is contained in:
2026-02-18 10:51:10 +08:00
parent 9678e6979b
commit d43b07c2ef
28 changed files with 982 additions and 40 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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 =