Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes
This commit is contained in:
@@ -1,19 +1,21 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
'use client';
|
||||
import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
MultiSelect,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
@@ -22,67 +24,120 @@ import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
// ==================== HELPERS ====================
|
||||
const safeStringArray = (arr: any[]): string[] => {
|
||||
if (!Array.isArray(arr)) return [];
|
||||
return arr
|
||||
.filter(item => item != null && item !== '')
|
||||
.map(item => String(item))
|
||||
.filter(item => item.trim() !== '');
|
||||
};
|
||||
|
||||
const createEmptyForm = () => ({
|
||||
tahun: '',
|
||||
pendapatanIds: [] as string[],
|
||||
belanjaIds: [] as string[],
|
||||
pembiayaanIds: [] as string[],
|
||||
});
|
||||
|
||||
// ==================== COMPONENT ====================
|
||||
function EditAPBDesa() {
|
||||
const apbState = useProxy(PendapatanAsliDesa.ApbDesa);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
tahun: '',
|
||||
pendapatanIds: [] as string[],
|
||||
belanjaIds: [] as string[],
|
||||
pembiayaanIds: [] as string[],
|
||||
});
|
||||
const [formData, setFormData] = useState(createEmptyForm());
|
||||
const [originalData, setOriginalData] = useState(createEmptyForm());
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// Load APB desa by id → hanya update formData, bukan global state
|
||||
// ==================== LOAD DATA ====================
|
||||
useEffect(() => {
|
||||
const loadAPBdesa = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
if (!id) {
|
||||
toast.error('ID tidak valid');
|
||||
router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await apbState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
tahun: String(data.tahun || ''),
|
||||
pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
|
||||
belanjaIds: data.belanja?.map((b: any) => b.id) || [],
|
||||
pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
toast.error('Data APB Desa tidak ditemukan');
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading APBdesa:", error);
|
||||
toast.error("Gagal memuat data APBdesa");
|
||||
|
||||
const normalized = {
|
||||
tahun: String(data.tahun || ''),
|
||||
pendapatanIds: safeStringArray(data.pendapatan?.map((p: any) => p.id) || []),
|
||||
belanjaIds: safeStringArray(data.belanja?.map((b: any) => b.id) || []),
|
||||
pembiayaanIds: safeStringArray(data.pembiayaan?.map((p: any) => p.id) || []),
|
||||
};
|
||||
|
||||
setFormData(normalized);
|
||||
setOriginalData(normalized);
|
||||
} catch (err) {
|
||||
console.error('Error loading APBdesa:', err);
|
||||
toast.error('Gagal memuat data APB Desa');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadAPBdesa();
|
||||
}, [params?.id]);
|
||||
|
||||
// ==================== HANDLERS ====================
|
||||
const handleChange = (field: keyof typeof formData, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData(originalData);
|
||||
toast.info('Form dikembalikan ke data awal');
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// update global state cuma pas submit
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (!formData.tahun.trim()) {
|
||||
toast.warning('Tahun harus diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
apbState.update.form = {
|
||||
...apbState.update.form,
|
||||
tahun: Number(formData.tahun),
|
||||
pendapatanIds: formData.pendapatanIds,
|
||||
belanjaIds: formData.belanjaIds,
|
||||
pembiayaanIds: formData.pembiayaanIds,
|
||||
pendapatanIds: safeStringArray(formData.pendapatanIds),
|
||||
belanjaIds: safeStringArray(formData.belanjaIds),
|
||||
pembiayaanIds: safeStringArray(formData.pembiayaanIds),
|
||||
};
|
||||
|
||||
await apbState.update.update();
|
||||
toast.success("APB Desa berhasil diperbarui!");
|
||||
router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa");
|
||||
toast.success('APB Desa berhasil diperbarui!');
|
||||
router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
|
||||
} catch (error) {
|
||||
console.error("Error updating APBdesa:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui APBdesa");
|
||||
console.error('Error updating APBdesa:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui APB Desa');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== UI ====================
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Stack align="center" py="xl">
|
||||
<Loader size="lg" type="dots" />
|
||||
<Text c="dimmed">Memuat data APB Desa...</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
@@ -114,30 +169,46 @@ function EditAPBDesa() {
|
||||
<TextInput
|
||||
type="number"
|
||||
value={formData.tahun}
|
||||
onChange={(e) => handleChange("tahun", e.target.value)}
|
||||
onChange={(e) => handleChange('tahun', e.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Tahun</Text>}
|
||||
placeholder="Masukkan tahun anggaran"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Selects */}
|
||||
<SelectPendapatan
|
||||
<SelectAPBItem
|
||||
label="Pendapatan"
|
||||
state={PendapatanAsliDesa.pendapatan}
|
||||
selectedIds={formData.pendapatanIds}
|
||||
onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
|
||||
onSelectionChange={(ids) => handleChange('pendapatanIds', ids)}
|
||||
/>
|
||||
|
||||
<SelectBelanja
|
||||
<SelectAPBItem
|
||||
label="Belanja"
|
||||
state={PendapatanAsliDesa.belanja}
|
||||
selectedIds={formData.belanjaIds}
|
||||
onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
|
||||
onSelectionChange={(ids) => handleChange('belanjaIds', ids)}
|
||||
/>
|
||||
|
||||
<SelectPembiayaan
|
||||
<SelectAPBItem
|
||||
label="Pembiayaan"
|
||||
state={PendapatanAsliDesa.pembiayaan}
|
||||
selectedIds={formData.pembiayaanIds}
|
||||
onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
|
||||
onSelectionChange={(ids) => handleChange('pembiayaanIds', ids)}
|
||||
/>
|
||||
|
||||
{/* Save Button */}
|
||||
<Group justify="right">
|
||||
<Group justify="right" mt="md">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
@@ -148,117 +219,75 @@ function EditAPBDesa() {
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Sub Components --- */
|
||||
// ==================== SUB COMPONENT ====================
|
||||
function SelectAPBItem({
|
||||
label,
|
||||
state,
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
label: string;
|
||||
state: any;
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const proxyState = useProxy(state);
|
||||
|
||||
function SelectPendapatan({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
|
||||
useShallowEffect(() => {
|
||||
proxyState.findMany.load();
|
||||
}, []);
|
||||
|
||||
useShallowEffect(() => {
|
||||
pendapatanState.findMany.load();
|
||||
}, []);
|
||||
const data = proxyState.findMany.data;
|
||||
const isLoading = !data;
|
||||
|
||||
if (!pendapatanState.findMany.data) {
|
||||
return <Skeleton height={38} />;
|
||||
}
|
||||
const options =
|
||||
data
|
||||
?.filter((item: any) => item?.id)
|
||||
.map((item: any) => ({
|
||||
value: String(item.id),
|
||||
label: String(item?.name || '(Tanpa Nama)'),
|
||||
})) || [];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<MultiSelect
|
||||
label={<Text fz="sm" fw="bold">Pendapatan</Text>}
|
||||
data={pendapatanState.findMany.data.map((p: any) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}))}
|
||||
value={selectedIds}
|
||||
onChange={onSelectionChange}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="Pilih pendapatan..."
|
||||
nothingFoundMessage="Tidak ditemukan"
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={4}>{label}</Text>
|
||||
<Skeleton height={38} radius="sm" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectBelanja({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const belanjaState = useProxy(PendapatanAsliDesa.belanja);
|
||||
|
||||
useShallowEffect(() => {
|
||||
belanjaState.findMany.load();
|
||||
}, []);
|
||||
|
||||
if (!belanjaState.findMany.data) {
|
||||
return <Skeleton height={38} />;
|
||||
}
|
||||
|
||||
if (options.length === 0) {
|
||||
return (
|
||||
<MultiSelect
|
||||
label={<Text fz="sm" fw="bold">Belanja</Text>}
|
||||
data={belanjaState.findMany.data.map((b: any) => ({
|
||||
value: b.id,
|
||||
label: b.name,
|
||||
}))}
|
||||
value={selectedIds}
|
||||
onChange={onSelectionChange}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="Pilih belanja..."
|
||||
nothingFoundMessage="Tidak ditemukan"
|
||||
/>
|
||||
<Alert color="gray" variant="light">
|
||||
<Text size="sm">
|
||||
Tidak ada data {label.toLowerCase()} tersedia.
|
||||
</Text>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectPembiayaan({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
|
||||
|
||||
useShallowEffect(() => {
|
||||
pembiayaanState.findMany.load();
|
||||
}, []);
|
||||
|
||||
if (!pembiayaanState.findMany.data) {
|
||||
return <Skeleton height={38} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<MultiSelect
|
||||
label={<Text fz="sm" fw="bold">Pembiayaan</Text>}
|
||||
data={pembiayaanState.findMany.data.map((p: any) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}))}
|
||||
value={selectedIds}
|
||||
onChange={onSelectionChange}
|
||||
searchable
|
||||
clearable
|
||||
placeholder="Pilih pembiayaan..."
|
||||
nothingFoundMessage="Tidak ditemukan"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<MultiSelect
|
||||
label={<Text fz="sm" fw="bold">{label}</Text>}
|
||||
data={options}
|
||||
value={selectedIds}
|
||||
onChange={(ids) => onSelectionChange(safeStringArray(ids))}
|
||||
searchable
|
||||
clearable
|
||||
placeholder={`Pilih ${label.toLowerCase()}...`}
|
||||
nothingFoundMessage="Tidak ditemukan"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditAPBDesa;
|
||||
|
||||
@@ -80,7 +80,7 @@ function DetailAPBDesa() {
|
||||
Detail APB Desa
|
||||
</Text>
|
||||
|
||||
<Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
|
||||
<Paper bg="#EEF3FBFF" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
MultiSelect,
|
||||
Paper,
|
||||
Skeleton,
|
||||
@@ -17,11 +18,14 @@ import {
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function CreateAPBDesa() {
|
||||
const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa);
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const resetForm = () => {
|
||||
apbDesaState.create.form = {
|
||||
@@ -33,9 +37,17 @@ function CreateAPBDesa() {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await apbDesaState.create.submit();
|
||||
resetForm();
|
||||
router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
await apbDesaState.create.submit();
|
||||
resetForm();
|
||||
router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa');
|
||||
} catch (error) {
|
||||
console.error('Error creating APB Desa:', error);
|
||||
toast.error('Gagal membuat APB Desa');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -62,7 +74,7 @@ function CreateAPBDesa() {
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
type="number"
|
||||
defaultValue={apbDesaState.create.form.tahun}
|
||||
value={apbDesaState.create.form.tahun}
|
||||
onChange={(val) => {
|
||||
apbDesaState.create.form.tahun = Number(val.target.value);
|
||||
}}
|
||||
@@ -94,6 +106,17 @@ function CreateAPBDesa() {
|
||||
|
||||
{/* Action */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={resetForm}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
@@ -104,7 +127,7 @@ function CreateAPBDesa() {
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user