feat: implement Kependudukan menu with CRUD admin pages
- Add Distribusi Umur admin pages (list, create, edit) - Add Data Banjar admin pages (list, create, edit) - Add Migrasi Penduduk admin pages (list, create, edit) - Update state management with full CRUD operations for all modules - Add Kependudukan menu to admin sidebar (devBar, navBar, role1) - Add public pages for Distribusi Umur with age range sorting - Update Dinamika Penduduk to use real-time birth/death data - Add Biome configuration for code linting - Create API routes for all Kependudukan modules Features: - Pagination and search for all admin list pages - Responsive design (table for desktop, cards for mobile) - Delete confirmation modal - Toast notifications for user feedback - Zod validation for all forms - Age range auto-sorting in public Distribusi Umur chart Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
Stack,
|
||||
Title,
|
||||
NumberInput,
|
||||
Select
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import distribusiUmur from '../../../_state/kependudukan/distribusi-umur';
|
||||
|
||||
interface FormData {
|
||||
rentangUmur: string;
|
||||
jumlah: number;
|
||||
tahun: number;
|
||||
}
|
||||
|
||||
export default function EditDistribusiUmur() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateDistribusiUmur = useProxy(distribusiUmur);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
rentangUmur: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
const [originalData, setOriginalData] = useState<FormData>({
|
||||
rentangUmur: '',
|
||||
jumlah: 0,
|
||||
tahun: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 10 }, (_, i) => ({
|
||||
value: String(currentYear - i),
|
||||
label: String(currentYear - i),
|
||||
}));
|
||||
|
||||
const rentangUmurOptions = [
|
||||
{ value: '0-5', label: '0-5 Tahun' },
|
||||
{ value: '6-12', label: '6-12 Tahun' },
|
||||
{ value: '13-17', label: '13-17 Tahun' },
|
||||
{ value: '18-25', label: '18-25 Tahun' },
|
||||
{ value: '26-35', label: '26-35 Tahun' },
|
||||
{ value: '36-45', label: '36-45 Tahun' },
|
||||
{ value: '46-55', label: '46-55 Tahun' },
|
||||
{ value: '56-65', label: '56-65 Tahun' },
|
||||
{ value: '65+', label: '65+ Tahun' },
|
||||
];
|
||||
|
||||
const isFormValid = () => {
|
||||
return (
|
||||
formData.rentangUmur?.trim() !== '' &&
|
||||
formData.jumlah !== null &&
|
||||
formData.jumlah >= 0 &&
|
||||
formData.tahun !== null
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiUmur.update.id = id;
|
||||
await stateDistribusiUmur.findUnique.load(id);
|
||||
|
||||
const data = stateDistribusiUmur.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
rentangUmur: data.rentangUmur ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
setOriginalData({
|
||||
rentangUmur: data.rentangUmur ?? '',
|
||||
jumlah: Number(data.jumlah ?? 0),
|
||||
tahun: Number(data.tahun ?? currentYear),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(value: any) => {
|
||||
const val =
|
||||
field === 'jumlah' || field === 'tahun'
|
||||
? Number(value || 0)
|
||||
: value;
|
||||
|
||||
setFormData((prev) => ({ ...prev, [field]: val }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleResetForm = () => {
|
||||
setFormData({
|
||||
rentangUmur: originalData.rentangUmur,
|
||||
jumlah: Number(originalData.jumlah),
|
||||
tahun: Number(originalData.tahun),
|
||||
});
|
||||
toast.info("Form dikembalikan ke data awal");
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
stateDistribusiUmur.update.id = id;
|
||||
stateDistribusiUmur.update.form = { ...formData };
|
||||
|
||||
await stateDistribusiUmur.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kependudukan/distribusi-umur');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Distribusi Umur
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Rentang Umur"
|
||||
placeholder="Pilih rentang umur"
|
||||
data={rentangUmurOptions}
|
||||
value={formData.rentangUmur}
|
||||
onChange={handleChange('rentangUmur')}
|
||||
required
|
||||
searchable
|
||||
/>
|
||||
|
||||
<NumberInput
|
||||
label="Jumlah"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={formData.jumlah}
|
||||
onChange={handleChange('jumlah')}
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Tahun"
|
||||
placeholder="Pilih tahun"
|
||||
data={yearOptions}
|
||||
value={String(formData.tahun)}
|
||||
onChange={handleChange('tahun')}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleResetForm}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={!isFormValid() || isSubmitting}
|
||||
style={{
|
||||
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)',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user