Fix UI & API Admin Menu Kesehatan, Submenu Data Kesehatan Warga Bagian ChartBar
This commit is contained in:
@@ -1,113 +0,0 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPersentaseDataKelahiranKematian() {
|
||||
const router = useRouter()
|
||||
const params = useParams() as { id: string }
|
||||
const statePresentase = useProxy(persentasekelahiran)
|
||||
|
||||
const id = params.id
|
||||
|
||||
// Load data saat komponen mount
|
||||
// Di file page.tsx, ubah useEffect-nya menjadi:
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
statePresentase.update.id = id;
|
||||
statePresentase.findUnique.load(id)
|
||||
.then(() => {
|
||||
const data = statePresentase.findUnique.data;
|
||||
if (data) {
|
||||
statePresentase.update.form = {
|
||||
tahun: String(data.tahun || ''),
|
||||
kematianKasar: String(data.kematianKasar || ''),
|
||||
kelahiranKasar: String(data.kelahiranKasar || ''),
|
||||
kematianBayi: String(data.kematianBayi || '')
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
// Di handleSubmit, ubah menjadi:
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
statePresentase.update.id = id;
|
||||
await statePresentase.update.submit();
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian');
|
||||
} catch (error) {
|
||||
console.error('Error updating data:', error);
|
||||
toast.error('Gagal memperbarui data');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Persentase Data Kelahiran & Kematian</Title>
|
||||
<TextInput
|
||||
label="Tahun"
|
||||
placeholder="masukkan tahun"
|
||||
value={statePresentase.update.form.tahun}
|
||||
onChange={(val) => {
|
||||
statePresentase.update.form.tahun = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kematian Kasar"
|
||||
type="number"
|
||||
placeholder="masukkan kematian kasar"
|
||||
value={statePresentase.update.form.kematianKasar}
|
||||
onChange={(val) => {
|
||||
statePresentase.update.form.kematianKasar = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kematian Bayi"
|
||||
type="number"
|
||||
placeholder="masukkan kematian bayi"
|
||||
value={statePresentase.update.form.kematianBayi}
|
||||
onChange={(val) => {
|
||||
statePresentase.update.form.kematianBayi = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kelahiran Kasar"
|
||||
type="number"
|
||||
placeholder="masukkan kelahiran kasar"
|
||||
value={statePresentase.update.form.kelahiranKasar}
|
||||
onChange={(val) => {
|
||||
statePresentase.update.form.kelahiranKasar = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Simpan Perubahan
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditPersentaseDataKelahiranKematian;
|
||||
@@ -1,101 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function CreatePersentaseDataKelahiranKematian() {
|
||||
const statePersentase = useProxy(persentasekelahiran);
|
||||
const [chartData, setChartData] = useState<any[]>([]);
|
||||
const router = useRouter()
|
||||
|
||||
const resetForm = () => {
|
||||
statePersentase.create.form = {
|
||||
tahun: "",
|
||||
kematianBayi: "",
|
||||
kematianKasar: "",
|
||||
kelahiranKasar: "",
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const id = await statePersentase.create.create();
|
||||
if (id) {
|
||||
const idStr = String(id);
|
||||
await statePersentase.findUnique.load(idStr);
|
||||
if (statePersentase.findUnique.data) {
|
||||
setChartData([statePersentase.findUnique.data]);
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian");
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
|
||||
<Stack gap={"xs"}>
|
||||
<TextInput
|
||||
label="Tahun"
|
||||
type="number"
|
||||
value={statePersentase.create.form.tahun}
|
||||
placeholder="Masukkan tahun"
|
||||
onChange={(val) => {
|
||||
statePersentase.create.form.tahun = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kematian Kasar"
|
||||
type="number"
|
||||
value={statePersentase.create.form.kematianKasar}
|
||||
placeholder="Masukkan kematian kasar"
|
||||
onChange={(val) => {
|
||||
statePersentase.create.form.kematianKasar = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kematian Bayi"
|
||||
type="number"
|
||||
value={statePersentase.create.form.kematianBayi}
|
||||
placeholder="Masukkan kematian bayi"
|
||||
onChange={(val) => {
|
||||
statePersentase.create.form.kematianBayi = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Kelahiran Kasar"
|
||||
type="number"
|
||||
value={statePersentase.create.form.kelahiranKasar}
|
||||
placeholder="Masukkan kelahiran kasar"
|
||||
onChange={(val) => {
|
||||
statePersentase.create.form.kelahiranKasar = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
mt={10}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreatePersentaseDataKelahiranKematian;
|
||||
@@ -0,0 +1,107 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditKelahiran() {
|
||||
const editState = useProxy(persentaseKelahiranKematian.kelahiran)
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const [formData, setFormData] = useState({
|
||||
nama: editState.edit.form.nama || '',
|
||||
tanggal: editState.edit.form.tanggal || '',
|
||||
jenisKelamin: editState.edit.form.jenisKelamin || '',
|
||||
alamat: editState.edit.form.alamat || '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadKelahiran = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama || '',
|
||||
tanggal: data.tanggal || '',
|
||||
jenisKelamin: data.jenisKelamin || '',
|
||||
alamat: data.alamat || '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading data kelahiran:", error);
|
||||
toast.error("Gagal memuat data data kelahiran");
|
||||
}
|
||||
};
|
||||
|
||||
loadKelahiran();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
editState.edit.form = {
|
||||
...editState.edit.form,
|
||||
nama: formData.nama,
|
||||
tanggal: formData.tanggal,
|
||||
jenisKelamin: formData.jenisKelamin,
|
||||
alamat: formData.alamat,
|
||||
};
|
||||
await editState.edit.update();
|
||||
toast.success('data kelahiran berhasil diperbarui!');
|
||||
router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
|
||||
} catch (error) {
|
||||
console.error('Error updating data kelahiran:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Edit data kelahiran</Title>
|
||||
<TextInput
|
||||
value={formData.nama}
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
|
||||
placeholder="masukkan nama"
|
||||
/>
|
||||
<TextInput
|
||||
type='date'
|
||||
value={formData.tanggal}
|
||||
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
|
||||
placeholder="masukkan tanggal"
|
||||
/>
|
||||
<TextInput
|
||||
value={formData.jenisKelamin}
|
||||
onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
|
||||
placeholder="masukkan jenis kelamin"
|
||||
/>
|
||||
<TextInput
|
||||
value={formData.alamat}
|
||||
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
|
||||
placeholder="masukkan alamat"
|
||||
/>
|
||||
<Button onClick={handleSubmit}>Simpan</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditKelahiran;
|
||||
@@ -0,0 +1,121 @@
|
||||
'use client'
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
|
||||
function DetailKelahiran() {
|
||||
const state = useProxy(persentaseKelahiranKematian.kelahiran)
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
|
||||
useShallowEffect(() => {
|
||||
state.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
state.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={40} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Data Kelahiran</Text>
|
||||
{state.findUnique.data ? (
|
||||
<Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Nama</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Tanggal</Text>
|
||||
<Text fz={"lg"}>
|
||||
{new Date(state.findUnique.data?.tanggal).toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
|
||||
<Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Alamat</Text>
|
||||
<Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
|
||||
</Box>
|
||||
<Flex gap={"xs"} mt={10}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (state.findUnique.data) {
|
||||
setSelectedId(state.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={state.delete.loading || !state.findUnique.data}
|
||||
color={"red"}
|
||||
>
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (state.findUnique.data) {
|
||||
router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${state.findUnique.data.id}/edit`);
|
||||
}
|
||||
}}
|
||||
disabled={!state.findUnique.data}
|
||||
color={"green"}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus data ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailKelahiran;
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
|
||||
function CreateKelahiran() {
|
||||
const createState = useProxy(persentaseKelahiranKematian.kelahiran)
|
||||
const router = useRouter();
|
||||
|
||||
const resetForm = () => {
|
||||
createState.create.form = {
|
||||
nama: "",
|
||||
tanggal: "",
|
||||
jenisKelamin: "",
|
||||
alamat: "",
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await createState.create.create();
|
||||
resetForm();
|
||||
router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Kelahiran</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
|
||||
placeholder='Masukkan nama'
|
||||
value={createState.create.form.nama}
|
||||
onChange={(val) => {
|
||||
createState.create.form.nama = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
type='date'
|
||||
label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
|
||||
placeholder='Masukkan tanggal'
|
||||
value={createState.create.form.tanggal}
|
||||
onChange={(val) => {
|
||||
createState.create.form.tanggal = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
|
||||
placeholder='Masukkan jenis kelamin'
|
||||
value={createState.create.form.jenisKelamin}
|
||||
onChange={(val) => {
|
||||
createState.create.form.jenisKelamin = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
|
||||
placeholder='Masukkan alamat'
|
||||
value={createState.create.form.alamat}
|
||||
onChange={(val) => {
|
||||
createState.create.form.alamat = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateKelahiran;
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
|
||||
import JudulList from '@/app/admin/(dashboard)/_com/judulList';
|
||||
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
function Kelahiran() {
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
</Button>
|
||||
</Box>
|
||||
<HeaderSearch
|
||||
title='Data Kelahiran'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListKelahiran search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
function ListKelahiran({ search }: { search: string }) {
|
||||
const statePersentase = useProxy(persentasekelahiran.kelahiran);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load
|
||||
} = statePersentase.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [search])
|
||||
|
||||
const filteredData = data || []
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
{/* Form Input */}
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Data Kelahiran'
|
||||
href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Tanggal</TableTh>
|
||||
<TableTh>Jenis Kelamin</TableTh>
|
||||
<TableTh>Alamat</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.nama}</TableTd>
|
||||
<TableTd>
|
||||
{new Date(item.tanggal).toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</TableTd>
|
||||
<TableTd>{item.jenisKelamin}</TableTd>
|
||||
<TableTd>{item.alamat}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Stack>
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => load(newPage)} // ini penting!
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kelahiran;
|
||||
@@ -0,0 +1,121 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditKematian() {
|
||||
const editState = useProxy(persentaseKelahiranKematian.kematian)
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const [formData, setFormData] = useState({
|
||||
nama: editState.edit.form.nama || '',
|
||||
tanggal: editState.edit.form.tanggal || '',
|
||||
jenisKelamin: editState.edit.form.jenisKelamin || '',
|
||||
alamat: editState.edit.form.alamat || '',
|
||||
penyebab: editState.edit.form.penyebab || '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadKelahiran = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama || '',
|
||||
tanggal: data.tanggal || '',
|
||||
jenisKelamin: data.jenisKelamin || '',
|
||||
alamat: data.alamat || '',
|
||||
penyebab: data.penyebab || '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading data kelahiran:", error);
|
||||
toast.error("Gagal memuat data data kelahiran");
|
||||
}
|
||||
};
|
||||
|
||||
loadKelahiran();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
editState.edit.form = {
|
||||
...editState.edit.form,
|
||||
nama: formData.nama,
|
||||
tanggal: formData.tanggal,
|
||||
jenisKelamin: formData.jenisKelamin,
|
||||
alamat: formData.alamat,
|
||||
penyebab: formData.penyebab,
|
||||
};
|
||||
await editState.edit.update();
|
||||
toast.success('data kelahiran berhasil diperbarui!');
|
||||
router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
|
||||
} catch (error) {
|
||||
console.error('Error updating data kelahiran:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Edit data kelahiran</Title>
|
||||
<TextInput
|
||||
value={formData.nama}
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
|
||||
placeholder="masukkan nama"
|
||||
/>
|
||||
<TextInput
|
||||
type='date'
|
||||
value={formData.tanggal}
|
||||
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
|
||||
placeholder="masukkan tanggal"
|
||||
/>
|
||||
<TextInput
|
||||
value={formData.jenisKelamin}
|
||||
onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
|
||||
placeholder="masukkan jenis kelamin"
|
||||
/>
|
||||
<TextInput
|
||||
value={formData.alamat}
|
||||
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
|
||||
placeholder="masukkan alamat"
|
||||
/>
|
||||
<Box>
|
||||
<Text fz={"sm"} fw={"bold"}>Penyebab</Text>
|
||||
<EditEditor
|
||||
value={formData.penyebab}
|
||||
onChange={(htmlContent) => {
|
||||
setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
|
||||
editState.edit.form.penyebab = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Button onClick={handleSubmit}>Simpan</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditKematian;
|
||||
@@ -0,0 +1,126 @@
|
||||
'use client'
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
|
||||
function DetailKematian() {
|
||||
const state = useProxy(persentaseKelahiranKematian.kematian)
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
|
||||
useShallowEffect(() => {
|
||||
state.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
state.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={40} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Data Kematian</Text>
|
||||
{state.findUnique.data ? (
|
||||
<Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Nama</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Tanggal</Text>
|
||||
<Text fz={"lg"}>
|
||||
{state.findUnique.data?.tanggal instanceof Date
|
||||
? state.findUnique.data.tanggal.toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})
|
||||
: state.findUnique.data?.tanggal}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
|
||||
<Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Alamat</Text>
|
||||
<Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Penyebab</Text>
|
||||
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.penyebab || '' }} />
|
||||
</Box>
|
||||
<Flex gap={"xs"} mt={10}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (state.findUnique.data) {
|
||||
setSelectedId(state.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={state.delete.loading || !state.findUnique.data}
|
||||
color={"red"}
|
||||
>
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (state.findUnique.data) {
|
||||
router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${state.findUnique.data.id}/edit`);
|
||||
}
|
||||
}}
|
||||
disabled={!state.findUnique.data}
|
||||
color={"green"}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus data ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailKematian;
|
||||
@@ -0,0 +1,94 @@
|
||||
'use client'
|
||||
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
|
||||
import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
|
||||
function CreateKematian() {
|
||||
const createState = useProxy(persentaseKelahiranKematian.kematian)
|
||||
const router = useRouter();
|
||||
|
||||
const resetForm = () => {
|
||||
createState.create.form = {
|
||||
nama: "",
|
||||
tanggal: "",
|
||||
jenisKelamin: "",
|
||||
alamat: "",
|
||||
penyebab: "",
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await createState.create.create();
|
||||
resetForm();
|
||||
router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian")
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Kematian</Title>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
|
||||
placeholder='Masukkan nama'
|
||||
value={createState.create.form.nama}
|
||||
onChange={(val) => {
|
||||
createState.create.form.nama = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
type='date'
|
||||
label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
|
||||
placeholder='Masukkan tanggal'
|
||||
value={createState.create.form.tanggal}
|
||||
onChange={(val) => {
|
||||
createState.create.form.tanggal = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
|
||||
placeholder='Masukkan jenis kelamin'
|
||||
value={createState.create.form.jenisKelamin}
|
||||
onChange={(val) => {
|
||||
createState.create.form.jenisKelamin = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
|
||||
placeholder='Masukkan alamat'
|
||||
value={createState.create.form.alamat}
|
||||
onChange={(val) => {
|
||||
createState.create.form.alamat = val.target.value;
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"sm"}>Penyebab</Text>
|
||||
<CreateEditor
|
||||
value={createState.create.form.penyebab}
|
||||
onChange={(htmlContent) => {
|
||||
createState.create.form.penyebab = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Group>
|
||||
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateKematian;
|
||||
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
|
||||
import JudulList from '@/app/admin/(dashboard)/_com/judulList';
|
||||
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
function Kematian() {
|
||||
const [search, setSearch] = useState("");
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
</Button>
|
||||
</Box>
|
||||
<HeaderSearch
|
||||
title='Data Kematian'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListKematian search={search} />
|
||||
</Box >
|
||||
);
|
||||
}
|
||||
function ListKematian({ search }: { search: string }) {
|
||||
const statePersentase = useProxy(persentasekelahiran.kematian);
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load
|
||||
} = statePersentase.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [search])
|
||||
|
||||
const filteredData = data || []
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={"xs"}>
|
||||
{/* Form Input */}
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Data Kematian'
|
||||
href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Tanggal</TableTh>
|
||||
<TableTh>Jenis Kelamin</TableTh>
|
||||
<TableTh>Alamat</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.nama}</TableTd>
|
||||
<TableTd>
|
||||
{new Date(item.tanggal).toLocaleDateString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</TableTd>
|
||||
<TableTd>{item.jenisKelamin}</TableTd>
|
||||
<TableTd>{item.alamat}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Stack>
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => load(newPage)} // ini penting!
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kematian;
|
||||
@@ -1,183 +1,229 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import { ActionIcon, Box, Button, Center, Flex, Paper, Skeleton, Stack, Table, Text, Title } from '@mantine/core';
|
||||
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { IconBabyCarriage, IconGrave2 } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { Bar, BarChart, Legend, Tooltip, TooltipProps, XAxis, YAxis } from 'recharts';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import JudulListTab from '../../../_com/judulListTab';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
|
||||
type TooltipPayload = {
|
||||
name: string;
|
||||
value: number;
|
||||
payload: any;
|
||||
color: string;
|
||||
dataKey: string;
|
||||
};
|
||||
|
||||
type CustomTooltipProps = TooltipProps<number, string> & {
|
||||
active?: boolean;
|
||||
payload?: TooltipPayload[];
|
||||
label?: string;
|
||||
};
|
||||
|
||||
function PersentaseDataKelahiranKematian() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Persentase Data Kelahiran & Kematian'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListPersentaseDataKelahiranKematian search={search} />
|
||||
</Box>
|
||||
<Stack gap={"xs"}>
|
||||
<GrafikPersentaseKelahiranKematian />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
function ListPersentaseDataKelahiranKematian({ search }: { search: string }) {
|
||||
type PDKMGrafik = {
|
||||
id: string;
|
||||
tahun: string;
|
||||
kematianKasar: number;
|
||||
kematianBayi: number;
|
||||
kelahiranKasar: number;
|
||||
}
|
||||
const statePersentase = useProxy(persentasekelahiran);
|
||||
const [chartData, setChartData] = useState<PDKMGrafik[]>([]);
|
||||
const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
|
||||
const isTablet = useMediaQuery('(max-width: 1024px)')
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
function GrafikPersentaseKelahiranKematian() {
|
||||
const router = useRouter();
|
||||
type DataTahunan = {
|
||||
tahun: string;
|
||||
totalKelahiran: number;
|
||||
totalKematian: number;
|
||||
data: Array<{
|
||||
id: string;
|
||||
bulan: string;
|
||||
kelahiran: number;
|
||||
kematian: number;
|
||||
}>;
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
statePersentase.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
// Count occurrences per year
|
||||
const countByYear = (data: any[], dateField: string) => {
|
||||
const counts: Record<string, number> = {};
|
||||
data?.forEach(item => {
|
||||
const year = new Date(item[dateField]).getFullYear().toString();
|
||||
counts[year] = (counts[year] || 0) + 1;
|
||||
});
|
||||
return counts;
|
||||
};
|
||||
|
||||
statePersentase.findMany.load()
|
||||
const statePersentase = useProxy(persentasekelahiran);
|
||||
const [chartData, setChartData] = useState<DataTahunan[]>([]);
|
||||
const isTablet = useMediaQuery('(max-width: 1024px)');
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const [selectedYear, setSelectedYear] = useState<string | null>(null);
|
||||
|
||||
// Format number to Indonesian locale
|
||||
const formatNumber = (num: number) => {
|
||||
return new Intl.NumberFormat('id-ID').format(num);
|
||||
};
|
||||
|
||||
// Format tooltip
|
||||
const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<Paper p="md" shadow="md" withBorder>
|
||||
<Text size="sm" fw={500} mb={5}>Tahun {label}</Text>
|
||||
<Text size="sm" c="blue">Kelahiran: {formatNumber(payload[0].value)}</Text>
|
||||
<Text size="sm" c="red">Kematian: {formatNumber(payload[1].value)}</Text>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true)
|
||||
statePersentase.findMany.load()
|
||||
}, [])
|
||||
statePersentase.kelahiran.findMany.load(1, 1000); // Load all kelahiran data
|
||||
statePersentase.kematian.findMany.load(1, 1000); // Load all kematian data
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
if (statePersentase.findMany.data) {
|
||||
setChartData(statePersentase.findMany.data.map((item) => ({
|
||||
id: item.id,
|
||||
tahun: item.tahun,
|
||||
kematianKasar: Number(item.kematianKasar),
|
||||
kematianBayi: Number(item.kematianBayi),
|
||||
kelahiranKasar: Number(item.kelahiranKasar),
|
||||
})));
|
||||
if (statePersentase.kelahiran.findMany.data && statePersentase.kematian.findMany.data) {
|
||||
// Count kelahiran and kematian by year
|
||||
const kelahiranByYear = countByYear(statePersentase.kelahiran.findMany.data, 'tanggal');
|
||||
const kematianByYear = countByYear(statePersentase.kematian.findMany.data, 'tanggal');
|
||||
|
||||
// Get all unique years
|
||||
const allYears = new Set([
|
||||
...Object.keys(kelahiranByYear),
|
||||
...Object.keys(kematianByYear)
|
||||
]);
|
||||
|
||||
// Create data structure for the chart
|
||||
const dataByYear = Array.from(allYears).reduce<Record<string, DataTahunan>>((acc, year) => {
|
||||
acc[year] = {
|
||||
tahun: year,
|
||||
totalKelahiran: kelahiranByYear[year] || 0,
|
||||
totalKematian: kematianByYear[year] || 0,
|
||||
data: []
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const sortedData = Object.values(dataByYear).sort((a, b) =>
|
||||
parseInt(a.tahun) - parseInt(b.tahun)
|
||||
);
|
||||
|
||||
setChartData(sortedData);
|
||||
setSelectedYear(sortedData[0]?.tahun || '');
|
||||
}
|
||||
}, [statePersentase.findMany.data]);
|
||||
}, [
|
||||
statePersentase.kelahiran.findMany.data,
|
||||
statePersentase.kematian.findMany.data,
|
||||
]);
|
||||
|
||||
const filteredData = (statePersentase.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.tahun.toLowerCase().includes(keyword) ||
|
||||
item.kematianKasar.toString().toLowerCase().includes(keyword) ||
|
||||
item.kematianBayi.toString().toLowerCase().includes(keyword) ||
|
||||
item.kelahiranKasar.toString().toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
|
||||
if (!statePersentase.findMany.data) {
|
||||
if (!statePersentase.kelahiran.findMany.data || !statePersentase.kematian.findMany.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const selectedYearData = chartData.find(d => d.tahun === selectedYear);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p="md">
|
||||
<Stack gap={"xs"}>
|
||||
{/* Form Input */}
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulListTab
|
||||
title='List Persentase Data Kelahiran & Kematian'
|
||||
href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/create'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={16} />}
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Tahun</TableTh>
|
||||
<TableTh>Kematian Kasar</TableTh>
|
||||
<TableTh>Kematian Bayi</TableTh>
|
||||
<TableTh>kelahiran Kasar</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.tahun}</TableTd>
|
||||
<TableTd>{item.kematianKasar}</TableTd>
|
||||
<TableTd>{item.kematianBayi}</TableTd>
|
||||
<TableTd>{item.kelahiranKasar}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color='red'
|
||||
disabled={statePersentase.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
|
||||
|
||||
{/* Chart */}
|
||||
{!mounted && !chartData ? (
|
||||
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
|
||||
<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
</Paper>
|
||||
</Box>
|
||||
) : (
|
||||
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
|
||||
{mounted && chartData.length > 0 && (
|
||||
<BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
|
||||
<XAxis dataKey="tahun" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
|
||||
<Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
|
||||
<Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
|
||||
</BarChart>
|
||||
)}
|
||||
</Paper>
|
||||
</Box>
|
||||
)}
|
||||
<Title order={3} mb="md">Statistik Kelahiran & Kematian</Title>
|
||||
<Box>
|
||||
<Flex gap={"xs"}>
|
||||
<Box>
|
||||
<ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran')}>
|
||||
<IconBabyCarriage size={30} color={colors['white-1']} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
<Box>
|
||||
<ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian')} >
|
||||
<IconGrave2 size={30} color={colors['white-1']} />
|
||||
</ActionIcon>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus persentase data kelahiran & kematian ini?'
|
||||
/>
|
||||
</Box>
|
||||
{chartData.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" py="xl">
|
||||
Belum ada data yang tersedia untuk ditampilkan
|
||||
</Text>
|
||||
) : (
|
||||
<>
|
||||
{/* Year Selector */}
|
||||
<Box mb="md">
|
||||
<Text mb="xs" fw={500}>Pilih Tahun:</Text>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
{chartData.map(({ tahun }) => (
|
||||
<Button
|
||||
key={tahun}
|
||||
variant={selectedYear === tahun ? 'filled' : 'outline'}
|
||||
onClick={() => setSelectedYear(tahun)}
|
||||
size="xs"
|
||||
>
|
||||
{tahun}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Main Chart */}
|
||||
<Center>
|
||||
<Box h={400}>
|
||||
<BarChart
|
||||
width={isMobile ? window.innerWidth * 0.9 : isTablet ? 700 : 800}
|
||||
height={350}
|
||||
data={chartData}
|
||||
margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<XAxis dataKey="tahun" />
|
||||
<YAxis />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Bar dataKey="totalKelahiran" name="Total Kelahiran" fill="#4dabf7" />
|
||||
<Bar dataKey="totalKematian" name="Total Kematian" fill="#f03e3e" />
|
||||
</BarChart>
|
||||
</Box>
|
||||
</Center>
|
||||
|
||||
{/* Yearly Breakdown */}
|
||||
{selectedYearData && (
|
||||
<Box mt="xl">
|
||||
<Title order={4} mb="md">Rincian Tahun {selectedYear}</Title>
|
||||
<Table striped withTableBorder>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Bulan</Table.Th>
|
||||
<Table.Th ta="right">Kelahiran</Table.Th>
|
||||
<Table.Th ta="right">Kematian</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{selectedYearData.data.map((item) => (
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>{item.bulan}</Table.Td>
|
||||
<Table.Td ta="right">{formatNumber(item.kelahiran)}</Table.Td>
|
||||
<Table.Td ta="right">{formatNumber(item.kematian)}</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
<Table.Tr style={{ fontWeight: 'bold' }}>
|
||||
<Table.Td>Total</Table.Td>
|
||||
<Table.Td ta="right">{formatNumber(selectedYearData.totalKelahiran)}</Table.Td>
|
||||
<Table.Td ta="right">{formatNumber(selectedYearData.totalKematian)}</Table.Td>
|
||||
</Table.Tr>
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user