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

Admin Dashboard Bagian Data Kesehatan

Browse Source
This commit is contained in:
nico
2025-04-30 16:31:18 +08:00
parent e9d94cfa83
commit ea7de13d28
22 changed files with 1007 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan.ts Normal file
View File

@@ -0,0 +1,76 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templateGrafikKepuasan = z.object({
label: z.string().min(2, "Label harus diisi"),
jumlah: z.string().min(2, "Jumlah harus diisi"),
});
type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
select: {
label: true;
jumlah: true;
};
}>;
const defaultForm: GrafikKepuasan = {
label: "",
jumlah: ""
};
const grafikkepuasan = proxy({
create: {
form: defaultForm,
loading: false,
async create() {
const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
grafikkepuasan.create.loading = true;
const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
grafikkepuasan.create.form
);
if (res.status === 200) {
grafikkepuasan.create.form = {
label: "",
jumlah: ""
};
grafikkepuasan.findMany.load();
return toast.success("success create");
}
return toast.error("failed create");
} catch (error) {
console.log((error as Error).message);
} finally {
grafikkepuasan.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.GrafikKepuasanGetPayload<{ omit: { isActive: true } }>[]
| null,
async load() {
const res = await ApiFetch.api.kesehatan.grafikkepuasan[
"find-many"
].get();
if (res.status === 200) {
grafikkepuasan.findMany.data = res.data?.data ?? [];
}
},
},
});
const stategrafikKepuasan = proxy({
grafikkepuasan,
});
export default stategrafikKepuasan;

84
src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran.ts Normal file
View File

@@ -0,0 +1,84 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templatePersentase = z.object({
tahun: z.string().min(4, "Tahun harus diisi"),
kematianKasar: z.string().min(2, "Kematian kasar harus diisi"),
kelahiranKasar: z.string().min(2, "Kelahiran kasar harus diisi"),
kematianBayi: z.string().min(2, "Kematian bayi harus diisi"),
});
type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
select: {
tahun: true;
kematianKasar: true;
kelahiranKasar: true;
kematianBayi: true;
};
}>;
const defaultForm: Persentase = {
tahun: "",
kematianKasar: "",
kelahiranKasar: "",
kematianBayi: "",
};
const persentasekelahiran = proxy({
create: {
form: defaultForm,
loading: false,
async create() {
const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
persentasekelahiran.create.loading = true;
const res = await ApiFetch.api.kesehatan.persentasekelahiran[
"create"
].post(persentasekelahiran.create.form);
if (res.status === 200) {
persentasekelahiran.create.form = {
tahun: "",
kematianKasar: "",
kelahiranKasar: "",
kematianBayi: "",
};
persentasekelahiran.findMany.load();
return toast.success("success create");
}
return toast.error("failed create");
} catch (error) {
console.log((error as Error).message);
} finally {
persentasekelahiran.create.loading = false;
}
},
},
findMany: {
data: null as
| Prisma.DataKematian_KelahiranGetPayload<{ omit: { isActive: true } }>[]
| null,
async load() {
const res = await ApiFetch.api.kesehatan.persentasekelahiran[
"find-many"
].get();
if (res.status === 200) {
persentasekelahiran.findMany.data = res.data?.data ?? [];
}
},
},
});
const statePersentase = proxy({
persentasekelahiran,
});
export default statePersentase;

68
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx
View File

@@ -1,10 +1,72 @@
import { Stack, Title } from '@mantine/core';
import React from 'react';
'use client'
import stategrafikKepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
import colors from '@/con/colors';
import { Box, Button, Group, Stack, TextInput, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { Bar, Legend, RadialBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
function GrafikHasilKepuasan() {
const grafikkepuasan = useProxy(stategrafikKepuasan.grafikkepuasan)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [chartData, setChartData] = useState<any[]>([])
useShallowEffect(() => {
const fetchData = async () => {
await grafikkepuasan.findMany.load();
if (grafikkepuasan.findMany.data && grafikkepuasan.findMany.data.length > 0) {
setChartData(grafikkepuasan.findMany.data);
}
};
fetchData();
}, []);
return (
<Stack py={10}>
<Stack gap={"xs"}>
<Title order={3}>Grafik Hasil Kepuasan</Title>
<Box>
<TextInput
label="Label"
placeholder='Masukkan label yang diinginkan'
value={grafikkepuasan.create.form.label}
onChange={(val) => {
grafikkepuasan.create.form.label = val.currentTarget.value
}}
/>
<TextInput
label="Jumlah Penderita Farangitis Akut"
type='number'
placeholder='Masukkan jumlah penderita farangitis akut'
value={grafikkepuasan.create.form.jumlah}
onChange={(val) => {
grafikkepuasan.create.form.jumlah = val.currentTarget.value
}}
/>
</Box>
<Group>
<Button mt={10}
onClick={async () => {
await grafikkepuasan.create.create();
await grafikkepuasan.findMany.load();
if (grafikkepuasan.findMany.data) {
setChartData(grafikkepuasan.findMany.data);
}
}}
>Submit</Button>
</Group>
<Box h={400} w={{ base: "100%", md: "80%" }}>
<Title order={3}>Data Kelahiran & Kematian</Title>
<ResponsiveContainer width="100%" height="100%">
<RadialBarChart
data={chartData}
>
<XAxis dataKey="label" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
</RadialBarChart>
</ResponsiveContainer>
</Box>
</Stack>
);
}

8
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx
View File

@@ -61,7 +61,7 @@ function JadwalKegiatan() {
<SyaratDanKetentuan />
<DokumenYangDiperlukan />
<Pendaftaran />
<Button onClick={submitAllForms}>
<Button mt={10} onClick={submitAllForms}>
Submit
</Button>
</Box>
@@ -84,13 +84,15 @@ function AllList() {
allList.layanantersedia.findMany.load()
allList.syaratketentuan.findMany.load()
allList.dokumenjadwalkegiatan.findMany.load()
})
allList.pendaftaranjadwal.findMany.load()
}, [])
const isLoading = !allList.informasiKegiatan.findMany.data ||
!allList.deskripsiKegiatan.findMany.data ||
!allList.layanantersedia.findMany.data ||
!allList.syaratketentuan.findMany.data ||
!allList.dokumenjadwalkegiatan.findMany.data
!allList.dokumenjadwalkegiatan.findMany.data ||
!allList.pendaftaranjadwal.findMany.data
if (isLoading) {
return (

26
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx
View File

@@ -1,21 +1,10 @@
'use client'
import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import { ActionIcon, Box, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { IconCalendar } from '@tabler/icons-react';
import { useState } from 'react';
import { Box, Text, Textarea, TextInput } from '@mantine/core';
import { useProxy } from 'valtio/utils';
function Pendaftaran() {
const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
const [dateInputOpened, setDateInputOpened] = useState(false);
const pickerControl = (
<ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
<IconCalendar size={18} />
</ActionIcon>
);
const formatDate = (date: Date | null): string => { if (!date) return ""; return date.toISOString().split('T')[0]; }
return (
<Box>
@@ -27,16 +16,11 @@ function Pendaftaran() {
pendaftaran.create.form.name = val.target.value
}}
/>
<DateInput
clearable defaultValue={new Date()}
styles={{label: {fontSize: '14px'}}}
label='Tanggal Lahir'
placeholder='dd/mm/yyyy'
value={pendaftaran.create.form.tanggal ? new Date(pendaftaran.create.form.tanggal) : null}
popoverProps={{opened: dateInputOpened, onChange: setDateInputOpened}}
rightSection={pickerControl}
<TextInput
label='Tanggal'
placeholder='Masukkan tanggal'
onChange={(val) => {
pendaftaran.create.form.tanggal = formatDate(val);
pendaftaran.create.form.tanggal = val.target.value
}}
/>
<TextInput

103
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx
View File

@@ -1,10 +1,107 @@
import { Stack, Title } from '@mantine/core';
import React from 'react';
'use client'
/* eslint-disable @typescript-eslint/no-explicit-any */
import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
import { Box, Button, Stack, TextInput, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useEffect, useState } from 'react';
import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { useProxy } from 'valtio/utils';
function PersentaseDataKelahiranKematian() {
const persentase = useProxy(statePersentase.persentasekelahiran);
const [chartData, setChartData] = useState<any[]>([]);
const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
useEffect(() => {
setMounted(true);
}, []);
useShallowEffect(() => {
const fetchData = async () => {
await persentase.findMany.load();
if (persentase.findMany.data && persentase.findMany.data.length > 0) {
setChartData(persentase.findMany.data);
}
};
fetchData();
}, []);
return (
<Stack py={10}>
<Title order={3}>Persentase Data Kelahiran & Kematian</Title>
{/* Form Input */}
<Box>
<Title order={3}>Persentase Data Kelahiran & Kematian</Title>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Tahun"
type="number"
value={persentase.create.form.tahun}
placeholder="Masukkan tahun"
onChange={(val) => {
persentase.create.form.tahun = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kematian Kasar"
type="number"
value={persentase.create.form.kematianKasar}
placeholder="Masukkan kematian kasar"
onChange={(val) => {
persentase.create.form.kematianKasar = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kematian Bayi"
type="number"
value={persentase.create.form.kematianBayi}
placeholder="Masukkan kematian bayi"
onChange={(val) => {
persentase.create.form.kematianBayi = val.currentTarget.value;
}}
/>
<TextInput
w={{ base: '100%', md: '50%' }}
label="Kelahiran Kasar"
type="number"
value={persentase.create.form.kelahiranKasar}
placeholder="Masukkan kelahiran kasar"
onChange={(val) => {
persentase.create.form.kelahiranKasar = val.currentTarget.value;
}}
/>
<Button
mt={10}
onClick={async () => {
await persentase.create.create();
await persentase.findMany.load();
if (persentase.findMany.data) {
setChartData(persentase.findMany.data);
}
}}
>
Submit
</Button>
</Box>
{/* Chart */}
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
<Title order={3}>Data Kelahiran & Kematian</Title>
{mounted && chartData.length > 0 && (
<ResponsiveContainer width="100%" aspect={2}>
<BarChart width={300} 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>
</ResponsiveContainer>
)}
</Box>
</Stack>
);
}

4
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx
View File

@@ -1,10 +1,10 @@
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
import JadwalKegiatan from './_ui/jadwal_kegiatan/page';
import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kematian/page';
import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
import colors from '@/con/colors';
function Page() {