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

Sinkronisasi UI & API Admin - User Submenu Data Kesehatan Warga

Browse Source
This commit is contained in:
nico
2025-08-18 15:01:39 +08:00
parent 8d15563f15
commit bcc51aec12
16 changed files with 1538 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -70,8 +70,16 @@ function ListArtikelKesehatan({ search }: { search: string }) {
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.title}</TableTd>
<TableTd>{item.content}</TableTd>
<TableTd>
<Box w={100}>
<Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.title}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={200}>
<Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.content}</Text>
</Box>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
<IconDeviceImacCog size={25} />

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

@@ -1,22 +1,22 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Flex, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconList, IconSearch } from '@tabler/icons-react';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import { useState } from 'react';
import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
function FasilitasKesehatan() {
const [search, setSearch] = useState("");
const router = useRouter();
// const router = useRouter();
return (
<Box>
<Grid>
{/* <Grid>
<GridCol span={12}>
<HeaderSearch
title='Fasilitas Kesehatan'
@@ -36,7 +36,14 @@ function FasilitasKesehatan() {
</Button>
</Flex>
</GridCol>
</Grid>
</Grid> */}
<HeaderSearch
title='Fasilitas Kesehatan'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListFasilitasKesehatan search={search} />
</Box>
);

113
src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/page.tsx
View File

@@ -1,11 +1,112 @@
import React from 'react';
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function Page() {
import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
import JudulList from '@/app/admin/(dashboard)/_com/judulList';
import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import { useState } from 'react';
function TarifLayanan() {
const [search, setSearch] = useState("");
const router = useRouter();
return (
<div>
Page
</div>
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<HeaderSearch
title='Dokter dan Tenaga Medis'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListTarifLayanan search={search} />
</Box>
);
}
export default Page;
function ListTarifLayanan({ search }: { search: string }) {
const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.dokter)
const router = useRouter();
const {
data,
loading,
load,
page,
totalPages
} = stateFasilitasKesehatan.findMany
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
const filteredData = data || []
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Fasilitas Kesehatan'
href={`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create`}
/>
<Box style={{ overflowX: "auto" }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Fasilitas Kesehatan</TableTh>
<TableTh>Alamat</TableTh>
<TableTh>Jam Operasional</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>{item.specialist}</TableTd>
<TableTd>
<Text dangerouslySetInnerHTML={{ __html: item.jadwal }} />
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
total={totalPages}
mt="md"
mb="md"
/>
</Center>
</Box>
)
}
export default TarifLayanan;

13
src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/page.tsx
View File

@@ -1,13 +1,12 @@
'use client';
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
function Responden() {
@@ -60,10 +59,7 @@ function ListResponden({ search }: ListRespondenProps) {
<Box py={10}>
<Paper p="md">
<Stack>
<JudulList
title='List Data Berdasarkan Jenis Kelamin Responden'
href='/admin/ppid/ikm-desa-darmasaba/responden/create'
/>
<Title>Responden</Title>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
@@ -86,10 +82,7 @@ function ListResponden({ search }: ListRespondenProps) {
<Box>
<Stack gap="xs">
<Paper bg={colors['white-1']} p="md" h={{ base: 730, md: 650 }}>
<JudulList
title='List Data Responden'
href='/admin/ppid/ikm-desa-darmasaba/responden/create'
/>
<Title mb={10} order={3}>List Responden</Title>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>

2
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/findMany.ts
View File

@@ -17,7 +17,7 @@ export default async function pegawaiFindMany(context: Context) {
},
skip,
take: limit,
orderBy: { createdAt: 'desc' },
orderBy: { posisi: { hierarki: 'asc' } },
}),
prisma.pegawaiPPID.count({
where: { isActive: true }

277
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx
View File

@@ -1,277 +0,0 @@
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Center, Divider, Flex, Group, Image, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
const dataMitos = [
{
id: 1,
mitos: 'Daun pepaya dan daun jambu biji bisa menyembuhkan DBD',
fakta: 'Belum ada bukti ilmiah yang kuat. Namun dapat dikonsumsi sebagai pendamping terapi medis',
},
{
id: 2,
mitos: 'DBD hanya menyerang anak-anak',
fakta: 'DBD dapat menyerang siapa saja terlepas dari usia',
},
{
id: 3,
mitos: 'Nyamuk DBD hanya aktif pada malam hari',
fakta: 'Nyamuk Aedes aegypti aktif pada pagi dan sore hari',
},
{
id: 4,
mitos: 'Sekali terkena DBD, tidak akan terkena lagi',
fakta: 'Seseorang bisa terkena DBD hingga 4 kali karena terdapat 4 serotipe virus dengue',
},
]
function Page() {
const rows = dataMitos.map((element) => (
<TableTr key={element.mitos}>
<TableTd fz={'h4'}>{element.mitos}</TableTd>
<TableTd fz={'h4'}>{element.fakta}</TableTd>
</TableTr>
));
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper radius={10}>
<Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
<Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
Detail Lengkap Fasilitas Kesehatan
</Text>
</Box>
<Box p={'md'} >
<Stack gap={'xs'}>
<Center bg={'#DEE3E3FF'}>
<Image
w={'100%'}
src={'/api/img/dbd.png'}
alt='' />
</Center>
<Flex gap={'xs'}>
<Box>
<Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
12 Februari 2025
</Text>
</Box>
<Divider size="1" orientation="vertical" />
<Box>
<Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
Dinas Kesehatan
</Text>
</Box>
<Divider size="1" orientation="vertical" />
<Box>
<Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
Kategori: Kesehatan Masyarakat
</Text>
</Box>
</Flex>
{/* Pendahuluan */}
<Text fz={'h4'} fw={"bold"}>
Pendahuluan
</Text>
<Divider />
<Text pb={10} fz={'h4'} ta={'justify'}>
Demam Berdarah Dengue (DBD) adalah penyakit yang disebabkan oleh virus dengue yang ditularkan melalui gigitan nyamuk Aedes aegypti. Selama musim hujan, risiko penyebaran DBD meningkat karena genangan air menjadi tempat berkembang biaknya nyamuk. Artikel ini akan membahas cara efektif untuk mencegah dan menangani DBD di musim hujan.
</Text>
{/* Kenali Gejala DBD */}
<Text fz={'h4'} fw={"bold"}>
Kenali Gejala DBD
</Text>
<Divider />
<Text fz={'h4'}>
Gejala awal DBD seringkali mirip dengan flu biasa, namun ada beberapa tanda khas yang perlu diwaspadai:
</Text>
<List pb={10}>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Demam tinggi mendadak <Text span fz={'h4'}>(38-40°C) yang berlangsung 2-7 hari</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Nyeri pada sendi, otot, dan tulang <Text span fz={'h4'}>yang sangat mengganggu</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Ruam kemerahan <Text span fz={'h4'}>pada kulit yang muncul 3-4 hari setelah demam</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Nyeri di belakang mata <Text span fz={'h4'}>yang bertambah parah saat menggerakkan mata</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Pendarahan <Text span fz={'h4'}>seperti mimisan, gusi berdarah, atau lebam pada kulit</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Penurunan jumlah trombosit <Text span fz={'h4'}>dalam pemeriksaan darah</Text>
</Text>
</ListItem>
</List>
{/* Cara Mencegah DBD */}
<Text fz={'h4'} fw={"bold"}>
Cara Mencegah DBD
</Text>
<Divider />
<List pb={10} type='ordered'>
<ListItem >
<Text pb={10} fz={'h4'} fw={"bold"}>
3M Plus:
</Text>
<List pb={5}>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Menguras <Text span fz={'h4'}>tempat penampungan air minimal seminggu sekali</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Menutup <Text span fz={'h4'}>rapat tempat penampungan air</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Mengubur <Text span fz={'h4'}>atau mendaur ulang barang bekas yang dapat menampung air</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Plus: <Text span fz={'h4'}>menanam tanaman pengusir nyamuk, memelihara ikan pemakan jentik, dan menggunakan kelambu saat tidur</Text>
</Text>
</ListItem>
</List>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Penggunaan repellent atau lotion anti nyamuk <Text span fz={'h4'}>terutama pada pagi dan sore hari saat nyamuk DBD aktif</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Pemasangan kawat kasa <Text span fz={'h4'}>pada ventilasi rumah</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Fogging atau pengasapan <Text span fz={'h4'}>pada area dengan kasus DBD tinggi (dilakukan oleh petugas kesehatan)</Text>
</Text>
</ListItem>
<ListItem>
<Text pb={10} fz={'h4'} fw={"bold"}>
Bubuk abate <Text span fz={'h4'}>yang ditaburkan pada penampungan air yang sulit dikuras</Text>
</Text>
</ListItem>
</List>
{/* Pertolongan Pertama Pada Penderita DBD */}
<Text fz={'h4'} fw={"bold"}>
Pertolongan Pertama Pada Penderita DBD
</Text>
<Divider />
<List pb={10} type='ordered'>
<ListItem fz={'h4'}>
Berikan banyak cairan untuk mencegah dehidrasi
</ListItem>
<ListItem fz={'h4'}>
Kompres hangat untuk menurunkan demam (hindari kompres dingin)
</ListItem>
<ListItem fz={'h4'}>
Istirahat yang cukup dan pemberian paracetamol untuk meredakan demam (hindari obat aspirin dan ibuprofen)
</ListItem>
<ListItem fz={'h4'}>
Pantau gejala penurunan trombosit seperti bintik merah pada kulit
</ListItem>
<ListItem fz={'h4'}>
Segera bawa ke fasilitas kesehatan jika demam tidak turun setelah 2 hari
</ListItem>
</List>
{/* Mitos dan Fakta tentang DBD */}
<Text fz={'h4'} fw={"bold"}>
Mitos dan Fakta tentang DBD
</Text>
<Divider />
<Table pb={10} highlightOnHover withTableBorder withColumnBorders>
<TableThead>
<TableTr>
<TableTh fz={'h4'}>Mitos</TableTh>
<TableTh fz={'h4'}>Fakta</TableTh>
</TableTr>
</TableThead>
<TableTbody>{rows}</TableTbody>
</Table>
{/* Kapan Harus ke Dokter */}
<Text fz={'h4'} fw={"bold"}>
Kapan Harus ke Dokter?
</Text>
<Divider />
<Text fz={'h4'}>
Segera bawa penderita ke fasilitas kesehatan jika mengalami:
</Text>
<List pb={10}>
<ListItem fz={'h4'}>Demam tinggi yang tidak turun setelah 2 hari</ListItem>
<ListItem fz={'h4'}>Muntah terus-menerus</ListItem>
<ListItem fz={'h4'}>Nyeri perut yang hebat</ListItem>
<ListItem fz={'h4'}>Perdarahan dari hidung atau gusi</ListItem>
<ListItem fz={'h4'}>Bintik merah pada kulit (petekie)</ListItem>
<ListItem fz={'h4'}>Sulit bernapas</ListItem>
<ListItem fz={'h4'}>Gelisah atau letargi</ListItem>
<ListItem fz={'h4'}>Penurunan kesadaran</ListItem>
</List>
{/* Kasus DBD di Wilayah Abiansemal */}
<Text fz={'h4'} fw={"bold"}>
Kasus DBD di Wilayah Abiansemal
</Text>
<Divider />
<Paper p={'lg'} bg={colors['blue-button-trans']}>
<Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Lebih Lanjut</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
Hotline DBD : <Text span fz={'h4'}>(0361) 123456</Text>
</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
WhatsApp Center : <Text span fz={'h4'}>081234567890</Text>
</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
Email : <Text span fz={'h4'}>
p2p@dinkes.badungkab.go.id</Text>
</Text>
</Paper>
{/* Referensi */}
<Text fz={'h4'} fw={"bold"}>
Referensi
</Text>
<Divider />
<List pb={10} type='ordered'>
<ListItem fz={'h4'}>Kementerian Kesehatan RI. (2024). Pedoman Pencegahan dan Pengendalian DBD.</ListItem>
<ListItem fz={'h4'}>World Health Organization. (2024). Dengue Guidelines for Diagnosis, Treatment, Prevention and Control.</ListItem>
<ListItem fz={'h4'}>Dinas Kesehatan Kabupaten Badung. (2025). Laporan Surveilans DBD Triwulan I 2025.</ListItem>
</List>
<Group>
<Button fz={'lg'} bg={colors['blue-button']}>
Download Infografis Pencegahan DBD (PDF)
</Button>
<Button fz={'lg'} bg={'green'}>
Bagikan Artikel Ini
</Button>
</Group>
</Stack>
</Box>
</Paper>
</Stack>
</Box>
</Stack>
);
}
export default Page;

166
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx Normal file
View File

@@ -0,0 +1,166 @@
'use client'
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Center, Divider, Group, Image, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function Page() {
const state = useProxy(artikelKesehatanState)
const params = useParams()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper radius={10}>
<Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
<Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
Detail Lengkap Fasilitas Kesehatan
</Text>
</Box>
<Box p={'md'} >
<Stack gap={'xs'}>
<Center bg={'#DEE3E3FF'}>
<Image
w={'100%'}
src={'/api/img/dbd.png'}
alt='' />
</Center>
<Box>
<Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
{new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}
</Text>
</Box>
{/* Pendahuluan */}
<Text fz={'h4'} fw={"bold"}>
Pendahuluan
</Text>
<Divider />
<Text pb={10} fz={'h4'} ta={'justify'}>
{state.findUnique.data.introduction?.content}
</Text>
{/* Kenali Gejala DBD */}
<Text fz={'h4'} fw={"bold"}>
Kenali Gejala DBD
</Text>
<Divider />
<Text fz={'h4'}>
{state.findUnique.data.symptom?.title}
</Text>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
{/* Cara Mencegah DBD */}
<Text fz={'h4'} fw={"bold"}>
{state.findUnique.data.prevention?.title}
</Text>
<Divider />
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.prevention?.content }} />
{/* Pertolongan Pertama Pada Penderita DBD */}
<Text fz={'h4'} fw={"bold"}>
{state.findUnique.data.firstaid?.title}
</Text>
<Divider />
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.firstaid?.content }} />
{/* Mitos dan Fakta tentang DBD */}
<Text fz={'h4'} fw={"bold"}>
{state.findUnique.data.mythvsfact?.title}
</Text>
<Divider />
<Box pb={10}>
<Table highlightOnHover withTableBorder withColumnBorders>
<TableThead>
<TableTr>
<TableTh fz={'h4'}>Mitos</TableTh>
<TableTh fz={'h4'}>Fakta</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{state.findUnique.data?.mythvsfact ? (
<TableTr>
<TableTd>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.mitos }} />
</TableTd>
<TableTd>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.fakta }} />
</TableTd>
</TableTr>
) : (
<TableTr>
<TableTd colSpan={3} style={{ textAlign: 'center' }}>Tidak ada data mitos dan fakta</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
{/* Kapan Harus ke Dokter */}
<Text fz={'h4'} fw={"bold"}>
Kapan Harus ke Dokter?
</Text>
<Divider />
<Text fz={'h4'}>
Segera bawa penderita ke fasilitas kesehatan jika mengalami:
</Text>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.doctorsign.content }} />
{/* Kasus DBD di Wilayah Abiansemal */}
<Text fz={'h4'} fw={"bold"}>
Kasus DBD di Wilayah Abiansemal
</Text>
<Divider />
<Paper p={'lg'} bg={colors['blue-button-trans']}>
<Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Lebih Lanjut</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
Hotline DBD : <Text span fz={'h4'}>(0361) 123456</Text>
</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
WhatsApp Center : <Text span fz={'h4'}>081234567890</Text>
</Text>
<Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
Email : <Text span fz={'h4'}>
p2p@dinkes.badungkab.go.id</Text>
</Text>
</Paper>
{/* Referensi */}
<Text fz={'h4'} fw={"bold"}>
Referensi
</Text>
<Divider />
<List pb={10} type='ordered'>
<ListItem fz={'h4'}>Kementerian Kesehatan RI. (2024). Pedoman Pencegahan dan Pengendalian DBD.</ListItem>
<ListItem fz={'h4'}>World Health Organization. (2024). Dengue Guidelines for Diagnosis, Treatment, Prevention and Control.</ListItem>
<ListItem fz={'h4'}>Dinas Kesehatan Kabupaten Badung. (2025). Laporan Surveilans DBD Triwulan I 2025.</ListItem>
</List>
<Group>
<Button fz={'lg'} bg={colors['blue-button']}>
Download Infografis Pencegahan DBD (PDF)
</Button>
<Button fz={'lg'} bg={'green'}>
Bagikan Artikel Ini
</Button>
</Group>
</Stack>
</Box>
</Paper>
</Stack>
</Box>
</Stack>
);
}
export default Page;

55
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
import colors from '@/con/colors';
import { Anchor, Box, Divider, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function ArtikelKesehatanPage() {
const state = useProxy(artikelKesehatanState)
const router = useRouter()
useShallowEffect(()=> {
state.findMany.load()
}, [])
if(!state.findMany.data){
return (
<Box py={10}>
<Skeleton h={500}/>
</Box>
)
}
return (
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
{state.findMany.data.map((item) => (
<Box key={item.id}>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
<Image pt={5} src={'/api/img/dbd.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
{item.title}
</Text>
<Text fz={'h6'} pb={10}>
Diposting: {new Date(item.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })} | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10} lineClamp={2}>
{item.content}
</Text>
<Anchor c={'black'} onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Baca Selengkapnya {'>>'}
</Text>
</Anchor>
</Box>
))}
<Divider color={colors['blue-button']} px={'xl'} />
</Stack>
</Paper>
</Box>
);
}
export default ArtikelKesehatanPage;

126
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/fasilitas-kesehatan/page.tsx → src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx
View File

@@ -1,65 +1,27 @@
'use client'
import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Button, Divider, Group, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
const dataDokter = [
{
id: 1,
nama: 'dr. Adi Putra',
spesilisasi: 'Dokter Umum',
jadwal: 'Senin-Jumat, 08:00-12:00'
},
{
id: 2,
nama: 'drg. Ratna Dewi',
spesilisasi: 'Dokter Gigi',
jadwal: 'Senin, Rabu, Jumat 08:00-14:00'
},
{
id: 3,
nama: 'Bidan Komang',
spesilisasi: 'Kebidanan',
jadwal: 'Setiap hari, 08:00-16:00'
},
]
const dataBiaya = [
{
id: 1,
layanan: 'Poli Umum',
tarif: '15.000',
},
{
id: 2,
layanan: 'Poli Gigi',
tarif: '20.000',
},
{
id: 3,
layanan: 'Imunisasi Dasar',
tarif: 'Gratis',
},
{
id: 4,
layanan: 'Konsultasi KB',
tarif: 'Gratis',
},
]
import { Box, Button, Divider, Group, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function Page() {
const rows = dataDokter.map((element) => (
<TableTr key={element.nama}>
<TableTd fz={'h4'}>{element.nama}</TableTd>
<TableTd fz={'h4'}>{element.spesilisasi}</TableTd>
<TableTd fz={'h4'}>{element.jadwal}</TableTd>
</TableTr>
));
const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
const params = useParams()
const rows2 = dataBiaya.map((element2) => (
<TableTr key={element2.layanan}>
<TableTd fz={'h4'}>{element2.layanan}</TableTd>
<TableTd fz={'h4'}>{element2.tarif}</TableTd>
</TableTr>
));
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -82,34 +44,27 @@ function Page() {
</Text>
<Divider />
<Text fz={'h4'} fw={"bold"}>
Nama Fasilitas : <Text span fz={'h4'}>UPTD Puskesmas Abiansemal III</Text>
Nama Fasilitas : <Text span fz={'h4'}>{state.findUnique.data?.name}</Text>
</Text>
<Text fz={'h4'} fw={"bold"}>
Alamat : <Text span fz={'h4'}>Jl. Ratna, Sibang Kaja</Text>
Alamat : <Text span fz={'h4'}>{state.findUnique.data?.informasiumum.alamat}</Text>
</Text>
<Text pb={10} fz={'h4'} fw={"bold"}>
Jam Operasional: : <Text span fz={'h4'}>08:00-16:00 WITA (Senin-Sabtu)</Text>
Jam Operasional: : <Text span fz={'h4'}>{state.findUnique.data?.informasiumum.jamOperasional}</Text>
</Text>
{/* Layanan Unggulan */}
<Text fz={'h4'} fw={"bold"}>
Layanan Unggulan
</Text>
<Divider />
<List pb={10}>
<ListItem fz={'h4'}>Poli Umum</ListItem>
<ListItem fz={'h4'}>Poli Gigi</ListItem>
<ListItem fz={'h4'}>Imunisasi</ListItem>
<ListItem fz={'h4'}>Ibu/KB</ListItem>
<ListItem fz={'h4'}>Laboratorium Dasar</ListItem>
<ListItem fz={'h4'}>Farmasi</ListItem>
<ListItem fz={'h4'}>Konsultasi Gizi</ListItem>
</List>
{/* Tenaga Medis */}
<Text fz={'h4'} fw={"bold"}>
Dokter & Tenaga Medis
</Text>
<Divider />
<Table pb={10} highlightOnHover withTableBorder withColumnBorders>
<Box pb={10}>
<Table highlightOnHover withTableBorder withColumnBorders>
<TableThead>
<TableTr>
<TableTh fz={'h4'}>Nama</TableTh>
@@ -117,21 +72,27 @@ function Page() {
<TableTh fz={'h4'}>Jadwal</TableTh>
</TableTr>
</TableThead>
<TableTbody>{rows}</TableTbody>
<TableTbody>
{state.findUnique.data?.dokterdantenagamedis ? (
<TableTr>
<TableTd>{state.findUnique.data.dokterdantenagamedis.name}</TableTd>
<TableTd>{state.findUnique.data.dokterdantenagamedis.specialist}</TableTd>
<TableTd>{state.findUnique.data.dokterdantenagamedis.jadwal}</TableTd>
</TableTr>
) : (
<TableTr>
<TableTd colSpan={3} style={{ textAlign: 'center' }}>Tidak ada data dokter/tenaga medis</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
{/* Fasilitas Pendukung */}
<Text fz={'h4'} fw={"bold"}>
Fasilitas Pendukung
</Text>
<Divider />
<List pb={10}>
<ListItem fz={'h4'}>Apotek dengan ketersediaan obat lengkap</ListItem>
<ListItem fz={'h4'}>Ruang tunggu ber-AC</ListItem>
<ListItem fz={'h4'}>Area bermain anak</ListItem>
<ListItem fz={'h4'}>Ambulans 24 jam</ListItem>
<ListItem fz={'h4'}>Toilet khusus disabilitas</ListItem>
<ListItem fz={'h4'}>Tempat parkir luas</ListItem>
</List>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.fasilitaspendukung?.content }} />
{/* Dokter */}
<Text fz={'h4'} fw={"bold"}>
Layanan & Tarif
@@ -144,7 +105,12 @@ function Page() {
<TableTh fz={'h4'}>Tarif</TableTh>
</TableTr>
</TableThead>
<TableTbody>{rows2}</TableTbody>
<TableTbody>
<TableTr>
<TableTd>{state.findUnique?.data?.tarifdanlayanan.layanan}</TableTd>
<TableTd>{state.findUnique?.data?.tarifdanlayanan.tarif}</TableTd>
</TableTr>
</TableTbody>
</Table>
<Text fz={'h6'} pb={10} fw={"bold"}>
* Gratis dengan BPJS Kesehatan

54
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
'use client'
import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
import colors from '@/con/colors';
import { Anchor, Box, Divider, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function FasilitasKesehatanPage() {
const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
const router = useRouter();
useShallowEffect(() => {
state.findMany.load()
}, [])
if(!state.findMany.data){
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Fasilitas Kesehatan</Text>
{state.findMany.data.map((item) => (
<Box key={item.id}>
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
{item.name}
</Text>
<Text fz={'h4'}>
{item.informasiumum.alamat}
</Text>
<Text fz={'h4'}>
{item.informasiumum.jamOperasional}
</Text>
<Anchor onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`)} c={colors['blue-button']} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'}>
Detail {'>>'}
</Text>
</Anchor>
</Box>
))}
<Divider color={colors['blue-button']} px={'xl'} />
</Stack>
</Paper>
</Box>
);
}
export default FasilitasKesehatanPage;

58
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/(tambahan)/jadwal-kegiatan/page.tsx → src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/[id]/page.tsx
View File

@@ -1,10 +1,14 @@
'use client'
import jadwalkegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { ActionIcon, Box, Button, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Divider, Group, InputBase, InputPlaceholder, List, ListItem, Paper, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
import { ActionIcon, Box, Button, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Divider, Group, InputBase, InputPlaceholder, Paper, Skeleton, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import { useShallowEffect } from '@mantine/hooks';
import { IconCalendar } from '@tabler/icons-react';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
const layanan = [
'Penimbangan',
@@ -42,6 +46,21 @@ function Page() {
<IconCalendar size={18} />
</ActionIcon>
);
const params = useParams()
const state = useProxy(jadwalkegiatanState)
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
@@ -63,62 +82,41 @@ function Page() {
</Text>
<Divider />
<Text fz={'h4'} fw={"bold"}>
Nama Kegiatan : <Text span fz={'h4'}>Posyandu Balita</Text>
Nama Kegiatan : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.name}</Text>
</Text>
<Text fz={'h4'} fw={"bold"}>
Tanggal : <Text span fz={'h4'}>21 Februari 2025</Text>
Tanggal : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.tanggal}</Text>
</Text>
<Text fz={'h4'} fw={"bold"}>
Waktu : <Text span fz={'h4'}>08:00-12:00 WITA</Text>
Waktu : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.waktu}</Text>
</Text>
<Text pb={10} fz={'h4'} fw={"bold"}>
Lokasi : <Text span fz={'h4'}>Banjar Gulingan</Text>
Lokasi : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.lokasi}</Text>
</Text>
{/* Deskripsi Kegiatan */}
<Text fz={'h4'} fw={"bold"}>
Deskripsi Kegiatan
</Text>
<Divider />
<Text pb={10} ta={'justify'} fz={'h4'}>
Posyandu balita adalah program kesehatan rutin untuk memantau tumbuh kembang balita. Kegiatan ini meliputi penimbangan berat badan, pengukuran tinggi badan, pemeriksaan kesehatan dasar, imunisasi, dan konsultasi gizi.
</Text>
<Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
{/* Layanan Yang Tersedia */}
<Text fz={'h4'} fw={"bold"}>
Layanan Yang Tersedia
</Text>
<Divider />
<List pb={10}>
<ListItem fz={'h4'}>Penimbangan berat badan</ListItem>
<ListItem fz={'h4'}>Pengukuran tinggi badan</ListItem>
<ListItem fz={'h4'}>Imunisasi rutin</ListItem>
<ListItem fz={'h4'}>Pemberian vitamin A</ListItem>
<ListItem fz={'h4'}>Konsultasi pertumbuhan dan gizi</ListItem>
<ListItem fz={'h4'}>Pemeriksaan kesehatan dasar</ListItem>
</List>
<Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
{/* Syarat dan Ketentuan */}
<Text fz={'h4'} fw={"bold"}>
Syarat dan Ketentuan
</Text>
<Divider />
<List pb={10}>
<ListItem fz={'h4'}>Balita berusia 0-5 tahun</ListItem>
<ListItem fz={'h4'}>Membawa KMS (Kartu Menuju Sehat)</ListItem>
<ListItem fz={'h4'}>Membawa buku KIA (Kesehatan Ibu dan Anak)</ListItem>
<ListItem fz={'h4'}>Orang tua/wali wajib mendampingi</ListItem>
<ListItem fz={'h4'}>Balita dalam kondisi sehat (tidak demam)</ListItem>
</List>
<Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
{/* Dokumen yang Perlu Dibawa */}
<Text fz={'h4'} fw={"bold"}>
Dokumen yang Perlu Dibawa
</Text>
<Divider />
<List pb={10}>
<ListItem fz={'h4'}>KMS (Kartu Menuju Sehat)</ListItem>
<ListItem fz={'h4'}>Buku KIA (Kesehatan Ibu dan Anak)</ListItem>
<ListItem fz={'h4'}>KTP orang tua/wali</ListItem>
<ListItem fz={'h4'}>Kartu Keluarga</ListItem>
<ListItem fz={'h4'}>Kartu BPJS (jika ada)</ListItem>
</List>
<Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
{/* Pendaftaran */}
<Text fz={'h4'} fw={"bold"}>
Pendaftaran

57
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
'use client'
import jadwalkegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
import colors from '@/con/colors';
import { Anchor, Box, Divider, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function JadwalKegiatanPage() {
const state = useProxy(jadwalkegiatanState)
const router = useRouter();
useShallowEffect(()=> {
state.findMany.load()
}, [])
if(!state.findMany.data){
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Jadwal Kegiatan</Text>
{state.findMany.data.map((item) => (
<Box key={item.id}>
<Text fz={'h4'} fw={'bold'}>
{item.informasijadwalkegiatan.name}
</Text>
<Text fz={'h4'}>
{item.informasijadwalkegiatan.waktu}
</Text>
<Text fz={'h4'}>
{item.informasijadwalkegiatan.lokasi}
</Text>
<Text fz={'h6'} fw={'bold'} c={colors['blue-button']}>
{item.informasijadwalkegiatan.tanggal}
</Text>
<Anchor onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`)} c={colors['blue-button']} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Detail & Pendaftaran
</Text>
</Anchor>
</Box>
))}
<Divider color={colors['blue-button']} px={'xl'} />
</Stack>
</Paper>
</Box>
);
}
export default JadwalKegiatanPage;

169
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx
View File

@@ -2,17 +2,20 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import colors from '@/con/colors';
import { BarChart as MantineBarChart } from '@mantine/charts';
import { Anchor, Box, Center, ColorSwatch, Divider, Flex, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { Box, Center, ColorSwatch, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
// import { useRouter } from 'next/navigation';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
import { useProxy } from 'valtio/utils';
import FasilitasKesehatan from './fasilitas-kesehatan-page/page';
import GrafikPenyakit from './grafik-penyakit/page';
import JadwalKegiatan from './jadwal-kegiatan-page/page';
import ArtikelKesehatanPage from './artikel-kesehatan-page/page';
function Page() {
@@ -160,167 +163,11 @@ function Page() {
}}
>
{/* Fasilitas Kesehatan */}
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Fasilitas Kesehatan</Text>
<Box>
<Text fz={'h4'}>
UPTD Puskesmas Abiansemal III
</Text>
<Text fz={'h4'}>
Jl. Ratna, Sibang Kaja
</Text>
<Text fz={'h4'}>
08:00-16:00 WITA
(Senin-Sabtu)
</Text>
<Text fz={'h4'}>
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
</Text>
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'}>
Detail Lengkap {'>>'}
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'} />
<Box>
<Text fz={'h4'}>
UPTD Puskesmas Abiansemal III
</Text>
<Text fz={'h4'}>
Jl. Ratna, Sibang Kaja
</Text>
<Text fz={'h4'}>
08:00-16:00 WITA
(Senin-Sabtu)
</Text>
<Text fz={'h4'}>
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
</Text>
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'}>
Detail Lengkap {'>>'}
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'} />
<Box>
<Text fz={'h4'}>
UPTD Puskesmas Abiansemal III
</Text>
<Text fz={'h4'}>
Jl. Ratna, Sibang Kaja
</Text>
<Text fz={'h4'}>
08:00-16:00 WITA
(Senin-Sabtu)
</Text>
<Text fz={'h4'}>
Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
</Text>
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'}>
Detail Lengkap {'>>'}
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'} />
</Stack>
</Paper>
</Box>
<FasilitasKesehatan/>
{/* Jadwal Kegiatan */}
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Jadwal Kegiatan</Text>
<Box>
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
21 Februari 2025
</Text>
<Text fz={'h4'} fw={'bold'}>
Posyandu Balita
</Text>
<Text fz={'h4'}>
08:00-12:00 WITA
</Text>
<Text fz={'h4'}>
Banjar Gulingan
</Text>
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} c={colors['blue-button']} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Detail & Pendaftaran
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'} />
<Box>
<Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
23 Februari 2025
</Text>
<Text fz={'h4'} fw={'bold'}>
Donor Darah
</Text>
<Text fz={'h4'}>
09:00-14:00 WITA
</Text>
<Text fz={'h4'}>
Puskesmas Abiansemal III
</Text>
<Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} c={colors['blue-button']} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Detail & Pendaftaran
</Text>
</Anchor>
</Box>
</Stack>
</Paper>
</Box>
<JadwalKegiatan/>
{/* Artikel Kesehatan */}
<Box>
<Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
<Image pt={5} src={'/api/img/dbd.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Tips Mencegah Demam Berdarah Saat Musim Hujan
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
</Text>
<Anchor c={'black'} component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Baca Selengkapnya {'>>'}
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'} />
<Box>
<Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
<Image pt={5} src={'/api/img/dbd.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Tips Mencegah Demam Berdarah Saat Musim Hujan
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
</Text>
<Anchor c={'black'} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Baca Selengkapnya {'>>'}
</Text>
</Anchor>
</Box>
</Stack>
</Paper>
</Box>
<ArtikelKesehatanPage/>
</SimpleGrid>
</Box>
</Stack>

4
src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
View File

@@ -56,7 +56,9 @@ function Page() {
<TableTd ta={'center'}>{index + 1}</TableTd>
<TableTd>{item.jenisInformasi}</TableTd>
<TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
<TableTd>{item.tanggal}</TableTd>
<TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
? new Date(item.tanggal).toLocaleDateString('id-ID')
: '-'}</TableTd>
</TableTr>
))}
</TableTbody>

258
src/app/darmasaba/_com/main-page/kepuasan/index.tsx
View File

@@ -153,10 +153,262 @@ function Kepuasan() {
if (data.length === 0) {
return (
<Stack py={10}>
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan
<Stack p="sm">
<Container w={{ base: "100%", md: "80%" }} p={"xl"}>
<Center>
<Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
</Center>
<Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
<Center mt={10}>
<Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
</Center>
</Container>
<Box px={"xl"}>
<Paper p={"lg"} bg={colors.Bg}>
<Paper p={"lg"}>
<Stack gap={"xs"}>
<Flex justify={"space-between"} align={"center"}>
<Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
<Box>
<Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
<Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
{state.findMany.total.toLocaleString('id-ID')}
</Text>
</Box>
</Flex>
<BarChart
h={300}
data={barChartData}
dataKey="month"
series={[{ name: 'count', color: colors['blue-button'] }]}
tickLine="y"
xAxisLabel="Bulan"
yAxisLabel="Jumlah Responden"
withTooltip
tooltipAnimationDuration={200}
/>
</Stack>
</Paper>
<Box py={"xl"}>
<SimpleGrid
cols={{
base: 1,
md: 1,
lg: 1,
xl: 3
}}
>
{/* Chart Jenis Kelamin */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Jenis Kelamin</Title>
{donutDataJenisKelamin.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Box style={{ position: 'relative', width: '100%' }}>
<Center>
<PieChart
withLabels
withTooltip
labelsType="percent"
size={200}
data={donutDataJenisKelamin}
/>
</Center>
</Box>
<Stack gap="sm" mt="md">
{donutDataJenisKelamin.map((entry) => (
<Flex key={entry.name} gap="md" align="center">
<Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
<Text size="sm">{entry.name}: {entry.value}</Text>
</Flex>
))}
</Stack>
</Box>
</Paper>
)}
</Stack>
</Paper>
{/* Chart Rating */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Pilihan</Title>
{donutDataRating.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Box style={{ position: 'relative', width: '100%' }}>
<Center>
<PieChart
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="outside"
labelsType="percent"
withLabelsLine
size={200}
data={donutDataRating}
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataRating.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
))}
</SimpleGrid>
</Box>
</Box>
</Paper>
)}
</Stack>
</Paper>
{/* Chart Kelompok Umur */}
<Paper bg={colors['white-1']} p="md" radius="md">
<Stack>
<Title order={4}>Umur</Title>
{donutDataKelompokUmur.every(item => item.value === 0) ? (
<Text c="dimmed" ta="center" my="md">
Belum ada data untuk ditampilkan dalam grafik
</Text>
) : (
<Paper p="md" radius="md" withBorder>
<Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Box style={{ position: 'relative', width: '100%' }}>
<Center>
<PieChart
withTooltip
tooltipAnimationDuration={200}
withLabels
labelsPosition="outside"
labelsType="percent"
withLabelsLine
size={190}
data={donutDataKelompokUmur}
/>
</Center>
</Box>
<Box mt="md" style={{ width: '100%' }}>
<SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
{donutDataKelompokUmur.map((entry) => (
<Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
<Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
<Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{entry.name}: {entry.value}
</Text>
</Flex>
))}
</SimpleGrid>
</Box>
</Box>
</Paper>
)}
</Stack>
</Paper>
</SimpleGrid>
</Box>
</Paper>
</Box>
{/* Modal */}
<Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<TextInput
label="Nama"
type='text'
placeholder="masukkan nama"
value={state.create.form.name}
onChange={(val) => {
state.create.form.name = val.currentTarget.value;
}}
/>
<TextInput
label="Tanggal"
type="date"
placeholder="masukkan tanggal"
value={state.create.form.tanggal}
onChange={(val) => {
state.create.form.tanggal = val.currentTarget.value;
}}
/>
<Select
key={"jenisKelamin"}
label={"Jenis Kelamin"}
placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
value={state.create.form.jenisKelaminId || ""}
onChange={(val) => {
state.create.form.jenisKelaminId = val ?? "";
}}
data={
(indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
.filter(Boolean) // Hapus null, undefined, dll
.map((item) => ({
value: item.id,
label: item.name || 'Tanpa Nama',
}))
}
disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
/>
<Select
key={"rating_responden"}
label={"Rating"}
placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
value={state.create.form.ratingId || ""}
onChange={(val) => {
state.create.form.ratingId = val ?? "";
}}
data={
(indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
.filter(Boolean) // Hapus null, undefined, dll
.map((item) => ({
value: item.id,
label: item.name || 'Tanpa Nama',
}))
}
disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
/>
<Select
key={"kelompokUmur"}
label={"Kelompok Umur"}
placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
value={state.create.form.kelompokUmurId || ""}
onChange={(val) => {
state.create.form.kelompokUmurId = val ?? "";
}}
data={
(indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
.filter(Boolean) // Hapus null, undefined, dll
.map((item) => ({
value: item.id,
label: item.name || 'Tanpa Nama',
}))
}
disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
/>
<Button
mt={10}
bg={colors['blue-button']}
onClick={handleSubmit}
>
Submit
</Button>
</Stack>
</Paper>
</Modal>
</Stack>
);
}

684
src/app/percobaan/index.html Normal file
View File

@@ -0,0 +1,684 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HIPMI Feature Checklist</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
border-bottom: 2px solid #333;
padding-bottom: 10px;
}
h3 {
color: #444;
margin-top: 20px;
background-color: #e0e0e0;
padding: 10px;
border-radius: 5px;
}
h4 {
color: #4e4242;
margin-top: 20px;
background-color: #e0e0e0;
padding: 10px;
border-radius: 5px;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
background-color: #fff;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
}
input[type="checkbox"] {
margin-right: 10px;
transform: scale(1.2);
}
li:hover {
background-color: #f0f0f0;
}
li.checked {
text-decoration: line-through;
color: #888;
background-color: #f0f0f0;
}
#progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
}
#progress {
width: 0%;
height: 20px;
background-color: #4caf50;
border-radius: 5px;
transition: width 0.5s ease;
}
#reset-btn {
display: block;
width: 100%;
padding: 10px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
}
#reset-btn:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<h1>Desa Darmasaba Feature Checklist</h1>
<!-- <div id="progress-bar">
<div id="progress"></div>
</div> -->
<!-- <div id="progress-percentage" style="text-align: center; font-weight: bold; margin-top: 5px; font-size: 1.2em;">0%</div> -->
<div id="checklist">
<!-- Menu Landing Page -->
<h3>Menu Landing Page</h3>
<!-- SubMenu Profile -->
<h4>Profile</h4>
<!-- Program Inovasi -->
<h4>Program Inovasi :</h4>
<ul>
<li>
<input type="checkbox" id="1" /> <label for="1">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="2" /> <label for="2">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="3" />
<label for="3">Create Program Inovasi</label>
</li>
<li>
<input type="checkbox" id="4" />
<label for="4">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="5" />
<label for="5">Hapus program inovasi bekerja</label>
</li>
<li>
<input type="checkbox" id="6" />
<label for="6">Edit / Update program inovasi bekerja</label>
</li>
<li>
<input type="checkbox" id="6_1" />
<label for="6_1">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="6_2" />
<label for="6_2">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- Pejabat Desa -->
<h4>Pejabat Desa : </h4>
<ul>
<li>
<input type="checkbox" id="8" /> <label for="8">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="9" />
<label for="9">Data seed pejabat desa berfungsi</label>
</li>
<li>
<input type="checkbox" id="10" />
<label for="10">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="12" />
<label for="12">Edit / Update pejabat desa bekerja</label>
</li>
<li>
<input type="checkbox" id="12_1" />
<label for="12_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- media sosial -->
<h4>Media Sosial : </h4>
<ul>
<li>
<input type="checkbox" id="13" /> <label for="13">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="14" /> <label for="14">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="15" />
<label for="15">Create media sosial</label>
</li>
<li>
<input type="checkbox" id="16" />
<label for="16">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="17" />
<label for="17">Hapus media sosial bekerja</label>
</li>
<li>
<input type="checkbox" id="18" />
<label for="18">Edit / Update media sosial bekerja</label>
</li>
<li>
<input type="checkbox" id="18_1" />
<label for="18_1">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="18_2" />
<label for="18_2">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Desa Anti Korupsi -->
<h4>Desa Anti Korupsi</h4>
<!-- List Desa Anti Korupsi -->
<h4>List Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="21" />
<label for="21">Create list desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="22" />
<label for="22">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="23" />
<label for="23">Hapus list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="24" />
<label for="24">Edit / Update list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="25" />
<label for="25">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="25_1" />
<label for="25_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- kategori desa Anti Korupsi -->
<h4>Kategori Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="26" /> <label for="26">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="27" /> <label for="27">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="28" />
<label for="28">Create kategori desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="29" />
<label for="29">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="30" />
<label for="30">Hapus kategori desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="31" />
<label for="31">Edit / Update kategori desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="32" />
<label for="32">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="32_1" />
<label for="32_1">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID) -->
<h4>Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID)</h4>
<!-- List Responden -->
<h4>List Desa Anti Korupsi</h4>
<ul>
<li>
<input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="21" />
<label for="21">Create list desa anti korupsi</label>
</li>
<li>
<input type="checkbox" id="22" />
<label for="22">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="23" />
<label for="23">Hapus list desa anti korupsi bekerja</label>
</li>
<li>
<input type="checkbox" id="24" />
<label for="24">Edit / Update list desa anti korupsi bekerja</label>
</li>
<li>
<h4>List Responden</h4>
<ul>
<li>
<input type="checkbox" id="33" />
<label for="33">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="34" />
<label for="34">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="35" />
<label for="35">Create list responden</label>
</li>
<li>
<input type="checkbox" id="36" />
<label for="36">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="37" />
<label for="37">Hapus list responden bekerja</label>
</li>
<li>
<input type="checkbox" id="38" />
<label for="38">Edit / Update list responden bekerja</label>
</li>
<li>
<input type="checkbox" id="39" />
<label for="39">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="40" />
<label for="40">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu SDGs Desa -->
<h4>SDGs Desa</h4>
<!-- List SDGs Desa -->
<h4>List SDGs Desa</h4>
<ul>
<li>
<input type="checkbox" id="41" />
<label for="41">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="42" />
<label for="42">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="43" />
<label for="43">Create list SDGs Desa</label>
</li>
<li>
<input type="checkbox" id="44" />
<label for="44">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="45" />
<label for="45">Hapus list SDGs Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="46" />
<label for="46">Edit / Update list SDGs Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="47" />
<label for="47">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="48" />
<label for="48">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu APBDes -->
<h4>APBDes</h4>
<!-- List APBDes -->
<h4>List APBDes</h4>
<ul>
<li>
<input type="checkbox" id="49" />
<label for="49">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="50" />
<label for="50">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="51" />
<label for="51">Create list APBDes</label>
</li>
<li>
<input type="checkbox" id="52" />
<label for="52">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="53" />
<label for="53">Hapus list APBDes bekerja</label>
</li>
<li>
<input type="checkbox" id="54" />
<label for="54">Edit / Update list APBDes bekerja</label>
</li>
<li>
<input type="checkbox" id="55" />
<label for="55">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="56" />
<label for="56">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Prestasi Desa -->
<h4>Prestasi Desa</h4>
<!-- List Prestasi Desa -->
<h4>List Prestasi Desa</h4>
<ul>
<li>
<input type="checkbox" id="57" />
<label for="57">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="58" />
<label for="58">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="59" />
<label for="59">Create list Prestasi Desa</label>
</li>
<li>
<input type="checkbox" id="60" />
<label for="60">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="61" />
<label for="61">Hapus list Prestasi Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="62" />
<label for="62">Edit / Update list Prestasi Desa bekerja</label>
</li>
<li>
<input type="checkbox" id="63" />
<label for="63">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="64" />
<label for="64">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- Menu PPID -->
<h3>Menu PPID</h3>
<!-- SubMenu Profile PPID -->
<h4>Profile PPID</h4>
<ul>
<li>
<input type="checkbox" id="65" />
<label for="65">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="66" />
<label for="66">Edit / Update Profile PPID</label>
</li>
<li>
<input type="checkbox" id="67" />
<label for="67">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Struktur PPID -->
<h4>Struktur PPID</h4>
<h4>Pegawai</h4>
<ul>
<li>
<input type="checkbox" id="68" />
<label for="68">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="69" />
<label for="69">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="70" />
<label for="70">Create list Pegawai</label>
</li>
<li>
<input type="checkbox" id="71" />
<label for="71">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="72" />
<label for="72">Hapus list Pegawai bekerja</label>
</li>
<li>
<input type="checkbox" id="73" />
<label for="73">Edit / Update list Pegawai bekerja</label>
</li>
<li>
<input type="checkbox" id="74" />
<label for="74">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="75" />
<label for="75">Sinkronisasi ke UI</label>
</li>
</ul>
<h4>Posisi Organisasi PPID</h4>
<ul>
<li>
<input type="checkbox" id="76" />
<label for="76">Search sudah berfungsi</label>
</li>
<li>
<input type="checkbox" id="77" />
<label for="77">Data tampil di halaman list</label>
</li>
<li>
<input type="checkbox" id="78" />
<label for="78">Create list Posisi Organisasi PPID</label>
</li>
<li>
<input type="checkbox" id="79" />
<label for="79">Detail mau tampil datanya</label>
</li>
<li>
<input type="checkbox" id="80" />
<label for="80">Hapus list Posisi Organisasi PPID bekerja</label>
</li>
<li>
<input type="checkbox" id="81" />
<label for="81">Edit / Update list Posisi Organisasi PPID bekerja</label>
</li>
<li>
<input type="checkbox" id="82" />
<label for="82">Pagination bekerja</label>
</li>
<li>
<input type="checkbox" id="83" />
<label for="83">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Visi Misi PPID -->
<h4>Visi Misi PPID</h4>
<ul>
<li>
<input type="checkbox" id="84" />
<label for="84">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="85" />
<label for="85">Edit / Update Visi Misi PPID</label>
</li>
<li>
<input type="checkbox" id="86" />
<label for="86">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Dasar Hukum PPID -->
<h4>Dasar Hukum PPID</h4>
<ul>
<li>
<input type="checkbox" id="87" />
<label for="87">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="88" />
<label for="88">Edit / Update Dasar Hukum PPID</label>
</li>
<li>
<input type="checkbox" id="89" />
<label for="89">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Permohonan Informasi Publik -->
<h4>Permohonan Informasi Publik</h4>
<ul>
<li>
<input type="checkbox" id="90" />
<label for="90">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="91" />
<label for="91">Create Permohonan Informasi Publik</label>
</li>
<li>
<input type="checkbox" id="92" />
<label for="92">Sinkronisasi ke UI</label>
</li>
</ul>
<!-- SubMenu Permohonan Keberatan Informasi Publik -->
<h4>Permohonan Keberatan Informasi Publik</h4>
<ul>
<li>
<input type="checkbox" id="93" />
<label for="93">Data tampil di halaman</label>
</li>
<li>
<input type="checkbox" id="94" />
<label for="94">Create Permohonan Keberatan Informasi Publik</label>
</li>
<li>
<input type="checkbox" id="95" />
<label for="95">Sinkronisasi ke UI</label>
</li>
</ul>
</div>
<button id="reset-btn">Reset Semua Checklist</button>
<div id="progress-bar">
<div id="progress"></div>
<span id="progress-percentage"></span>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const progressBar = document.getElementById("progress");
const progressPercentage = document.getElementById("progress-percentage");
const resetBtn = document.getElementById("reset-btn");
// Load saved state from localStorage
checkboxes.forEach((checkbox) => {
const savedState = localStorage.getItem(checkbox.id);
if (savedState === "checked") {
checkbox.checked = true;
checkbox.parentElement.classList.add("checked");
}
});
// Update progress
function updateProgress() {
const totalCheckboxes = checkboxes.length;
const checkedCheckboxes = document.querySelectorAll(
'input[type="checkbox"]:checked'
).length;
const progressPercentage = Math.round((checkedCheckboxes / totalCheckboxes) * 100);
progressBar.style.width = progressPercentage + "%";
document.getElementById('progress-percentage').textContent = progressPercentage + '%';
}
// Initial progress update
updateProgress();
// Add event listeners to checkboxes
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
// Toggle 'checked' class on parent li
checkbox.parentElement.classList.toggle(
"checked",
checkbox.checked
);
// Save state to localStorage
localStorage.setItem(
checkbox.id,
checkbox.checked ? "checked" : "unchecked"
);
// Update progress bar
updateProgress();
});
});
// Reset button functionality
resetBtn.addEventListener("click", () => {
checkboxes.forEach((checkbox) => {
checkbox.checked = false;
checkbox.parentElement.classList.remove("checked");
localStorage.removeItem(checkbox.id);
});
updateProgress();
});
});
</script>
</body>
</html>
`