wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add form validation for ekonomi module admin pages

Browse Source 
- Added isFormValid() and isHtmlEmpty() helper functions
- Disabled submit buttons when required fields are empty
- Applied consistent validation pattern across all create/edit pages
- Validated fields: nama, deskripsi, tahun, jumlah, value, icon, statistik, and more
- Edit pages allow existing data, create pages require all fields

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-18 16:13:20 +08:00
parent aa354992e7
commit 1ddc1d7eac
32 changed files with 523 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx
View File

@@ -51,6 +51,17 @@ function EditAPBDesa() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [isLoading, setIsLoading] = useState(true);
// Check if form is valid
const isFormValid = () => {
return (
formData.tahun?.trim() !== '' &&
Number(formData.tahun) > 0 &&
formData.pendapatanIds.length > 0 &&
formData.belanjaIds.length > 0 &&
formData.pembiayaanIds.length > 0
);
};
// ==================== LOAD DATA ====================
useEffect(() => {
const loadAPBdesa = async () => {
@@ -213,8 +224,11 @@ function EditAPBDesa() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

16
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx
View File

@@ -27,6 +27,17 @@ function CreateAPBDesa() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
apbDesaState.create.form.tahun !== null &&
apbDesaState.create.form.tahun > 0 &&
apbDesaState.create.form.pendapatanIds.length > 0 &&
apbDesaState.create.form.belanjaIds.length > 0 &&
apbDesaState.create.form.pembiayaanIds.length > 0
);
};
const resetForm = () => {
apbDesaState.create.form = {
tahun: 0,
@@ -121,8 +132,11 @@ function CreateAPBDesa() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx
View File

@@ -35,6 +35,15 @@ function EditBelanja() {
value: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.value !== '' &&
Number(formData.value) > 0
);
};
// format angka ke rupiah
const formatRupiah = (value: number | string) => {
const number =
@@ -172,8 +181,11 @@ function EditBelanja() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx
View File

@@ -24,6 +24,15 @@ function CreateBelanja() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
belanjaState.create.form.name?.trim() !== '' &&
belanjaState.create.form.value !== null &&
belanjaState.create.form.value > 0
);
};
const formatRupiah = (value: number | string) => {
const number =
typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -126,8 +135,11 @@ function CreateBelanja() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx
View File

@@ -34,6 +34,15 @@ function EditPembiayaan() {
value: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.value !== '' &&
Number(formData.value) > 0
);
};
const formatRupiah = (value: number | string) => {
const number =
typeof value === 'number'
@@ -169,8 +178,11 @@ function EditPembiayaan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx
View File

@@ -23,6 +23,15 @@ function CreatePembiayaan() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
pembiayaanState.create.form.name?.trim() !== '' &&
pembiayaanState.create.form.value !== null &&
pembiayaanState.create.form.value > 0
);
};
const formatRupiah = (value: number | string) => {
const number =
typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
@@ -127,8 +136,11 @@ function CreatePembiayaan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx
View File

@@ -34,6 +34,15 @@ function EditPendapatan() {
value: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.value !== '' &&
Number(formData.value) > 0
);
};
// helper format
const formatRupiah = (value: number | string) => {
const number = typeof value === 'number'
@@ -176,8 +185,11 @@ function EditPendapatan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx
View File

@@ -22,6 +22,15 @@ function CreatePendapatan() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
pendapatanState.create.form.name?.trim() !== '' &&
pendapatanState.create.form.value !== null &&
pendapatanState.create.form.value > 0
);
};
const formatRupiah = (value: number | string) => {
const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
return new Intl.NumberFormat('id-ID', {
@@ -122,8 +131,11 @@ function CreatePendapatan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

13
src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/[id]/edit/page.tsx
View File

@@ -56,6 +56,14 @@ export default function EditPegawaiBumDes() {
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
// Check if form is valid
const isFormValid = () => {
return (
formData.namaLengkap?.trim() !== '' &&
formData.posisiId?.trim() !== ''
);
};
// Format date for <input type="date">
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
@@ -325,8 +333,11 @@ export default function EditPegawaiBumDes() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create/page.tsx
View File

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

22
src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/[id]/page.tsx
View File

@@ -31,6 +31,23 @@ function EditPosisiOrganisasiBumDes() {
hierarki: 0,
});
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
formData.nama?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
formData.hierarki !== null &&
formData.hierarki >= 0
);
};
// Fungsi generik untuk update formData
const handleChange = (field: keyof typeof formData, value: any) => {
setFormData(prev => ({ ...prev, [field]: value }));
@@ -173,8 +190,11 @@ function EditPosisiOrganisasiBumDes() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

22
src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/create/page.tsx
View File

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

16
src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx
View File

@@ -41,6 +41,17 @@ export default function EditDemografiPekerjaan() {
perempuan: 0,
});
// Check if form is valid
const isFormValid = () => {
return (
formData.pekerjaan?.trim() !== '' &&
formData.lakiLaki !== null &&
formData.lakiLaki >= 0 &&
formData.perempuan !== null &&
formData.perempuan >= 0
);
};
// ✅ Load data hanya sekali di awal (tidak reset form)
useEffect(() => {
if (!id) return;
@@ -186,8 +197,11 @@ export default function EditDemografiPekerjaan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

16
src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx
View File

@@ -26,6 +26,17 @@ function CreateDemografiPekerjaan() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateDemografi.create.form.pekerjaan?.trim() !== '' &&
stateDemografi.create.form.lakiLaki !== null &&
stateDemografi.create.form.lakiLaki >= 0 &&
stateDemografi.create.form.perempuan !== null &&
stateDemografi.create.form.perempuan >= 0
);
};
const resetForm = () => {
stateDemografi.create.form = {
pekerjaan: '',
@@ -128,8 +139,11 @@ function CreateDemografiPekerjaan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx
View File

@@ -37,6 +37,16 @@ function EditJumlahPendudukMiskin() {
totalPoorPopulation: 0,
});
// Check if form is valid
const isFormValid = () => {
return (
formData.year !== null &&
formData.year > 0 &&
formData.totalPoorPopulation !== null &&
formData.totalPoorPopulation >= 0
);
};
// 🔹 Load data awal dari backend
useEffect(() => {
if (!id) return;
@@ -160,8 +170,11 @@ function EditJumlahPendudukMiskin() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/create/page.tsx
View File

@@ -16,6 +16,16 @@ export default function CreateJumlahPendudukMiskin() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateJPM.create.form.year !== null &&
stateJPM.create.form.year > 0 &&
stateJPM.create.form.totalPoorPopulation !== null &&
stateJPM.create.form.totalPoorPopulation >= 0
);
};
const resetForm = () => {
stateJPM.create.form = {
year: new Date().getFullYear(),
@@ -105,8 +115,11 @@ export default function CreateJumlahPendudukMiskin() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

16
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
View File

@@ -33,6 +33,17 @@ function EditGrafikBerdasarkanPendidikan() {
S1: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.SD?.trim() !== '' &&
formData.SMP?.trim() !== '' &&
formData.SMA?.trim() !== '' &&
formData.D3?.trim() !== '' &&
formData.S1?.trim() !== ''
);
};
useEffect(() => {
if (id) {
stategrafik.findUnique.load(id).then(() => {
@@ -174,8 +185,11 @@ function EditGrafikBerdasarkanPendidikan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

16
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create/page.tsx
View File

@@ -16,6 +16,17 @@ function CreateGrafikBerdasarkanPendidikan() {
const [donutData, setDonutData] = useState<any[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stategrafik.create.form.SD?.trim() !== '' &&
stategrafik.create.form.SMP?.trim() !== '' &&
stategrafik.create.form.SMA?.trim() !== '' &&
stategrafik.create.form.D3?.trim() !== '' &&
stategrafik.create.form.S1?.trim() !== ''
);
};
const resetForm = () => {
stategrafik.create.form = {
...stategrafik.create.form,
@@ -127,8 +138,11 @@ function CreateGrafikBerdasarkanPendidikan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
View File

@@ -43,6 +43,16 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
usia46_keatas: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.usia18_25?.trim() !== '' &&
formData.usia26_35?.trim() !== '' &&
formData.usia36_45?.trim() !== '' &&
formData.usia46_keatas?.trim() !== ''
);
};
// load data dari global state -> masukin ke local state
useEffect(() => {
if (id) {
@@ -179,8 +189,11 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create/page.tsx
View File

@@ -17,6 +17,16 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
const [donutData, setDonutData] = useState<any[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stategrafik.create.form.usia18_25?.trim() !== '' &&
stategrafik.create.form.usia26_35?.trim() !== '' &&
stategrafik.create.form.usia36_45?.trim() !== '' &&
stategrafik.create.form.usia46_keatas?.trim() !== ''
);
};
const resetForm = () => {
stategrafik.create.form = {
...stategrafik.create.form,
@@ -120,8 +130,11 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

18
src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
View File

@@ -53,6 +53,19 @@ function EditDetailDataPengangguran() {
percentageChange: 0,
});
// Check if form is valid
const isFormValid = () => {
return (
formData.month?.trim() !== '' &&
formData.year !== null &&
formData.year > 0 &&
formData.educatedUnemployment !== null &&
formData.educatedUnemployment >= 0 &&
formData.uneducatedUnemployment !== null &&
formData.uneducatedUnemployment >= 0
);
};
// --- hitung total + persentase perubahan
const calculateTotalAndChange = useCallback(
async (data: typeof formData) => {
@@ -255,8 +268,11 @@ function EditDetailDataPengangguran() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

18
src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx
View File

@@ -27,6 +27,19 @@ function CreateJumlahPengangguran() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateDetail.create.form.month?.trim() !== '' &&
stateDetail.create.form.year !== null &&
stateDetail.create.form.year > 0 &&
stateDetail.create.form.educatedUnemployment !== null &&
stateDetail.create.form.educatedUnemployment >= 0 &&
stateDetail.create.form.uneducatedUnemployment !== null &&
stateDetail.create.form.uneducatedUnemployment >= 0
);
};
const monthOptions = [
'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
@@ -204,8 +217,11 @@ function CreateJumlahPengangguran() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

26
src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx
View File

@@ -48,6 +48,27 @@ function EditLowonganKerja() {
notelp: '',
})
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
formData.posisi?.trim() !== '' &&
formData.namaPerusahaan?.trim() !== '' &&
formData.notelp?.trim() !== '' &&
formData.lokasi?.trim() !== '' &&
formData.tipePekerjaan?.trim() !== '' &&
formData.gaji?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
!isHtmlEmpty(formData.kualifikasi)
);
};
// load data sekali aja ketika mount / id berubah
useEffect(() => {
const loadLowongan = async () => {
@@ -229,8 +250,11 @@ function EditLowonganKerja() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

26
src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx
View File

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

10
src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx
View File

@@ -28,6 +28,11 @@ function EditKategoriProduk() {
const [formData, setFormData] = useState({ nama: '' });
const [originalData, setOriginalData] = useState({ nama: '' });
// Check if form is valid
const isFormValid = () => {
return formData.nama?.trim() !== '';
};
useEffect(() => {
const loadKategoriProduk = async () => {
if (!id) return;
@@ -146,8 +151,11 @@ function EditKategoriProduk() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

10
src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/create/page.tsx
View File

@@ -23,6 +23,11 @@ function CreateKategoriProduk() {
const statePasar = useProxy(pasarDesaState.kategoriProduk);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return statePasar.create.form.nama?.trim() !== '';
};
useEffect(() => {
statePasar.findMany.load();
}, []);
@@ -101,8 +106,11 @@ function CreateKategoriProduk() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

22
src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx
View File

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

23
src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx
View File

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

23
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
View File

@@ -53,6 +53,24 @@ function EditProgramKemiskinan() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState<FormData>(initialForm);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
formData.nama?.trim() !== '' &&
formData.icon?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
formData.statistik.jumlah?.trim() !== '' &&
formData.statistik.tahun?.trim() !== ''
);
};
// Load data 1x dari global state → isi local state
useEffect(() => {
if (!id) return;
@@ -235,8 +253,11 @@ function EditProgramKemiskinan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

24
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx
View File

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

22
src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx
View File

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

22
src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx
View File

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