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

UI Menu Kesehatan

Browse Source
This commit is contained in:
nico
2025-03-23 15:15:29 +08:00
parent 50a46e2ca7
commit 1bb808da3b
6 changed files with 631 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/app/darmasaba/(pages)/kesehatan/datakesehatan/page.tsx Normal file
View File

@@ -0,0 +1,298 @@
import colors from '@/con/colors';
import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor, Divider, Image } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import { BarChart } from '@mantine/charts';
const dataKematian = [
{
id: 1,
tahun: '2023',
kematianKasar: '1.7',
kematianBayi: '1.4',
kelahiranKasar: '0.5'
},
{
id: 2,
tahun: '2024',
kematianKasar: '1.4',
kematianBayi: '1.8',
kelahiranKasar: '1.5'
},
{
id: 3,
tahun: '2025',
kematianKasar: '2.0',
kematianBayi: '1.5',
kelahiranKasar: '1.2'
},
]
const dataPenyakit = [
{ penyakit: 'Covid', penderita: 335 },
{ penyakit: 'Tuli', penderita: 105 },
{ penyakit: 'Bisul', penderita: 98 },
{ penyakit: 'Panas', penderita: 96 },
{ penyakit: 'Batuk', penderita: 87 },
{ penyakit: 'Sembelit', penderita: 72 },
{ penyakit: 'Demam', penderita: 51 },
{ penyakit: 'Gred', penderita: 36 },
{ penyakit: 'Magh', penderita: 34 },
{ penyakit: 'Farangitis Akut', penderita: 17 },
]
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Data Kesehatan Masyarakat Puskesmas Darmasaba
</Text>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
{/* Bar Chart Kematian Kelahiran */}
<Box>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Box pb={30}>
<Flex pb={30} justify={'flex-end'} gap={'xl'} align={'center'}>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Kasar</Text>
<ColorSwatch color="#26308A" size={30} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Bayi</Text>
<ColorSwatch color="#135A9B" size={30} />
</Flex>
</Box>
<Box>
<Flex gap={{ base: 0, md: 5 }} align={'center'}>
<Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran Kasar</Text>
<ColorSwatch color="#3290CA" size={30} />
</Flex>
</Box>
</Flex>
<Center>
<BarChart
h={400}
data={dataKematian}
dataKey="tahun"
series={[
{ name: 'kematianKasar', color: '#26308A' },
{ name: 'kematianBayi', color: '#135A9B' },
{ name: 'kelahiranKasar', color: '#3290CA' },
]}
tickLine="y"
/>
</Center>
</Box>
</Paper>
</Box>
{/* Bar Chart Penyakit */}
<Box>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Box pb={30}>
<Text pb={30} fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
</Text>
<Center>
<BarChart
p={20}
mb={30}
h={500}
data={dataPenyakit}
dataKey='penyakit'
orientation='vertical'
yAxisProps={{ width: 80 }}
barProps={{ radius: 10 }}
series={[{ name: 'penderita', color: colors['blue-button'] }]}
/>
</Center>
<Text ta={"center"} fw={"bold"} fz={"h4"}>Jumlah Penderita</Text>
</Box>
</Paper>
</Box>
{/* Artikel Kesehatan */}
<Box>
<SimpleGrid
cols={{
base: 1,
md: 3,
}}
>
{/* 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 c={'black'} variant='transparent'>
<Text c={'black'} 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 c={'black'} variant='transparent'>
<Text c={'black'} 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 c={'black'} variant='transparent'>
<Text c={'black'} fz={'h4'}>
Detail Lengkap {'>>'}
</Text>
</Anchor>
</Box>
<Divider color={colors['blue-button']} px={'xl'}/>
</Stack>
</Paper>
</Box>
{/* 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 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 c={colors['blue-button']} variant='transparent'>
<Text c={colors['blue-button']} fz={'h4'} >
Detail & Pendaftaran
</Text>
</Anchor>
</Box>
</Stack>
</Paper>
</Box>
{/* 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'} variant='transparent'>
<Text c={'black'} 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'} variant='transparent'>
<Text c={'black'} fz={'h4'} >
Baca Selengkapnya {'>>'}
</Text>
</Anchor>
</Box>
</Stack>
</Paper>
</Box>
</SimpleGrid>
</Box>
</Stack>
</Box>
</Stack>
);
}
export default Page;

100
src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx Normal file
View File

@@ -0,0 +1,100 @@
import colors from "@/con/colors";
import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
import BackButton from "../../desa/layanan/_com/BackButto";
const data = [
{
id: 1,
judul: 'Posyandu Banjar Bucu',
nomor: '082345678910',
image: '/api/img/posyandu.png'
},
{
id: 2,
judul: 'Posyandu Banjar Bucu',
nomor: '082345678910',
image: '/api/img/posyandu.png'
},
{
id: 3,
judul: 'Posyandu Banjar Bucu',
nomor: '082345678910',
image: '/api/img/posyandu.png'
}
]
export default function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Posyandu Darmasaba
</Text>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Paper key={k} p={"xl"} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Text fz={'h4'}>
{v.nomor}
</Text>
<Center>
<Image src={v.image} alt="" />
</Center>
<Text fz={'h4'}>
Jadwal Pelayanan
</Text>
<Text fz={'h4'}>
Setiap tanggal 5, Pukul 09:00 -
12:00 WITA
</Text>
<Box>
<Flex justify={'space-between'}>
<Text fz={'h4'}>Balita</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box>
<Box>
<Flex justify={'space-between'}>
<Text fz={'h4'}>Lansia</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
<Text fz={'h4'} fw={"bold"}>
Pelayanan Posyandu
</Text>
<List type="ordered">
<ListItem fz={'h4'}>Penimbangan bayi dan balita</ListItem>
<ListItem fz={'h4'}>Pemantuan status gizi</ListItem>
<ListItem fz={'h4'}>Imunisasi dasar lengkap</ListItem>
<ListItem fz={'h4'}>Konseling</ListItem>
<ListItem fz={'h4'}>Pemantuan kesehatan ibu hamil</ListItem>
</List>
</Stack>
</Box>
</Stack>
)
}

103
src/app/darmasaba/(pages)/kesehatan/program/page.tsx Normal file
View File

@@ -0,0 +1,103 @@
import colors from "@/con/colors";
import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
import BackButton from "../../desa/layanan/_com/BackButto";
const data = [
{
id: 1,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
},
{
id: 2,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
},
{
id: 3,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
}
]
export default function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Program Kesehatan Unggulan
</Text>
<Text px={90} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas
hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif
warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center>
<Image src={v.image} alt="" />
</Center>
<Box px={'lg'}>
<Text fz={'h4'}>
Jadwal Pelayanan
</Text>
<Text fz={'h4'}>
Setiap tanggal 5, Pukul 09:00 -
12:00 WITA
</Text>
<Box>
<Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Flex justify={'space-between'}>
<Text fz={'h4'}>Balita</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box>
<Box>
<Flex justify={'space-between'}>
<Text fz={'h4'}>Lansia</Text>
<Box>
<Text fz={'h4'}>Selasa minggu pertama</Text>
<Text fz={'h4'}>(09:00-11:00 WITA)</Text>
</Box>
</Flex>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
<Text fz={'h4'} fw={"bold"}>
Pelayanan Posyandu
</Text>
<List type="ordered">
<ListItem fz={'h4'}>Penimbangan bayi dan balita</ListItem>
<ListItem fz={'h4'}>Pemantuan status gizi</ListItem>
<ListItem fz={'h4'}>Imunisasi dasar lengkap</ListItem>
<ListItem fz={'h4'}>Konseling</ListItem>
<ListItem fz={'h4'}>Pemantuan kesehatan ibu hamil</ListItem>
</List>
</Stack>
</Box>
</Stack>
)
}

127
src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx Normal file
View File

@@ -0,0 +1,127 @@
import colors from '@/con/colors';
import { Stack, Box, Paper, Text, BackgroundImage, SimpleGrid, Title, Flex } from '@mantine/core';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Puskesmas Darmasaba
</Text>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Box>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Box pb={30}>
<BackgroundImage
pb={30}
radius={16}
h={{ base: 250, md: 500 }}
src='/api/img/posyandu.png'
style={{ position: 'relative' }}
>
<Box
style={{
borderRadius: 16,
zIndex: 0
}}
pos={"absolute"}
w={"100%"}
h={"100%"}
bg={colors.trans.dark[2]}
/>
<Text style={{
position: 'absolute',
bottom: 35,
left: 15,
}} fw={'bold'} fz={{ base: 'md', md: 'h3' }} c={colors['white-1']}>Puskesmas Darmasaba</Text>
<Text style={{
position: 'absolute',
bottom: 10,
left: 15,
}} fw={'bold'} fz={{ base: 'md', md: 'h4' }} c={colors['white-1']}>Jl. Raya Darmasaba No.45, Badung, Bali</Text>
</BackgroundImage>
<SimpleGrid
py={20}
cols={{
base: 1,
md: 2
}}>
<Box>
<Stack>
<Title order={3}>Jam Operasional</Title>
<Box>
<Flex justify={'space-between'} align={'center'}>
<Box>
<Text>Senin - Kamis</Text>
<Text>Jumat</Text>
<Text>Sabtu</Text>
<Text> Minggu & Libur</Text>
</Box>
<Box>
<Text>08:00 - 15:00 WITA</Text>
<Text>08:00 - 15:00 WITA</Text>
<Text>08:00 - 15:00 WITA</Text>
<Text>Tutp (UGD 24 JAM)</Text>
</Box>
</Flex>
</Box>
</Stack>
</Box>
<Box>
<Stack>
<Title order={3}>Jam Operasional</Title>
<Box>
<Flex justify={'space-between'} align={'center'}>
<Box>
<Text>Senin - Kamis</Text>
<Text>Jumat</Text>
<Text>Sabtu</Text>
<Text> Minggu & Libur</Text>
</Box>
<Box>
<Text>08:00 - 15:00 WITA</Text>
<Text>08:00 - 15:00 WITA</Text>
<Text>08:00 - 15:00 WITA</Text>
<Text>Tutp (UGD 24 JAM)</Text>
</Box>
</Flex>
</Box>
</Stack>
</Box>
<Box>
</Box>
</SimpleGrid>
</Box>
<Box>
<Paper p={"xl"} bg={'#B1C5F2'}>
<SimpleGrid
cols={{
base: 1,
md: 2
}}>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
<Text ta={'center'} fz={65} fw={'bold'} c={colors['blue-button']}>26</Text>
</Paper>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
<Text ta={'center'} fz={65} fw={'bold'} c={colors['blue-button']}>26</Text>
</Paper>
</SimpleGrid>
</Paper>
</Box>
</Paper>
</Box>
</Stack>
</Box>
</Stack>
);
}
export default Page;

2
src/app/darmasaba/layout.tsx
View File

@@ -11,7 +11,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<Stack gap={0} bg={colors.grey[1]}>
<Navbar />
<Space h={{
base: "2.2rem",
base: "3.9rem",
md: "2.5rem"
}} />
<Box style={{

4
src/con/navbar-list-menu.ts
View File

@@ -104,7 +104,7 @@ const navbarListMenu = [
{
id: "3.2",
name: "Data Kesehatan Warga",
href: "/darmasaba/kesehatan/data-kesehatan-warga"
href: "/darmasaba/kesehatan/datakesehatan"
},
{
id: "3.3",
@@ -114,7 +114,7 @@ const navbarListMenu = [
{
id: "3.4",
name: "Program Kesehatan",
href: "/darmasaba/kesehatan/program-kesehatan"
href: "/darmasaba/kesehatan/program"
},
{
id: "3.5",