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

UI Menu Keamanan

Browse Source
This commit is contained in:
nico
2025-03-24 15:31:59 +08:00
parent 1bb808da3b
commit e33db73d65
12 changed files with 1070 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/darmasaba/(pages)/kesehatan/info/page.tsx Normal file
View File

@@ -0,0 +1,120 @@
import colors from '@/con/colors';
import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
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"}>
Info Wabah / Penyakit
</Text>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
cols={{
base: 1,
md: 3,
}}
>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
<Image pt={5} src={'/api/img/dbd.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu DBD penyebab, gejala dan cara penanganannya?
</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>
<List>
<ListItem>
Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
</ListItem>
<ListItem>
Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
</ListItem>
<ListItem>
Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
<Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu TBC penyebab, gejala dan cara penanganannya?
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
</Text>
<List>
<ListItem>
Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
</ListItem>
<ListItem>
Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
</ListItem>
<ListItem>
Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
<Box>
<Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
<Image pt={5} src={'/api/img/diare.png'} alt="" />
<Text fz={'h4'} fw={'bold'} >
Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
</Text>
<List>
<ListItem>
Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
</ListItem>
<ListItem>
Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
</ListItem>
<ListItem>
Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
</ListItem>
</List>
</Box>
</Stack>
</Paper>
</Box>
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

106
src/app/darmasaba/(pages)/kesehatan/kontak/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
import colors from '@/con/colors';
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Layanan Medis Cepat',
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 2,
judul: 'Nomor Darurat',
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
</List>
},
{
id: 3,
judul: 'Posko Kesehatan & Evakuasi',
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 4,
judul: 'Pelatihan & Sosialisasi',
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
</List>
},
{
id: 5,
judul: 'Sistem Laporan Kejadian',
icon: <IconReport size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
</List>
}
]
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"}>
Kontak Darurat
</Text>
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center py={40}>
{v.icon}
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

106
src/app/darmasaba/(pages)/kesehatan/penanganan/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
import colors from '@/con/colors';
import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data1 = [
{
id: 1,
judul: 'Layanan Medis Cepat',
icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 2,
judul: 'Nomor Darurat',
icon: <IconPhone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
</List>
},
{
id: 3,
judul: 'Posko Kesehatan & Evakuasi',
icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
</List>
},
{
id: 4,
judul: 'Pelatihan & Sosialisasi',
icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
<ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
</List>
},
{
id: 5,
judul: 'Sistem Laporan Kejadian',
icon: <IconReport size={80} color={colors["blue-button"]}/>,
deskripsi: <List>
<ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
<ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
</List>
}
]
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"}>
Penanganan Darurat
</Text>
<Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
</Text>
</Box>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
pb={10}
cols={{
base: 1,
md: 3,
}}>
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center py={40}>
{v.icon}
</Center>
<Box px={'lg'}>
<Box pb={20}>
<Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
{v.judul}
</Text>
<Box px={10}>
{v.deskripsi}
</Box>
</Box>
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
</Stack>
);
}
export default Page;

131
src/app/darmasaba/(pages)/kesehatan/program/page.tsx
View File

@@ -1,24 +1,48 @@
import colors from "@/con/colors";
import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react";
import BackButton from "../../desa/layanan/_com/BackButto";
const data = [
const data1 = [
{
id: 1,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
judul: 'Posyandu Terintegrasi',
image: '/api/img/pk-1.png',
deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan'
},
{
id: 2,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
judul: 'Senam Lansia',
image: '/api/img/pk-2.png',
deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.'
},
{
id: 3,
judul: 'Posyandu Banjar Bucu',
image: '/api/img/posyandu.png'
judul: 'Vaksinasi & Sterilasi HPR',
image: '/api/img/pk-3.png',
deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.'
}
]
const data2 = [
{
id: 1,
icon: <IconBarbell size={50} color={colors['BG-trans']} />,
title: "Menjaga Kesehatan Tubuh",
desc: "Program kesehatan desa dirancang untuk memelihara kesehatan fisik masyarakat melalui aktivitas rutin, pemeriksaan kesehatan berkala, dan edukasi gaya hidup sehat.",
},
{
id: 2,
icon: <IconUsersGroup size={50} color={colors['BG-trans']} />,
title: "Mempererat Kebersamaan",
desc: "Kegiatan kesehatan komunal menjadi wadah interaksi sosial yang memperkuat ikatan antar warga desa, menumbuhkan rasa kepedulian dan gotong royong.",
},
{
id: 3,
icon: <IconOld size={50} color={colors['BG-trans']} />,
title: "Medukung Lansia Aktif",
desc: "Program khusus bagi lansia membantu menjaga kebugaran, mengurangi risiko penyakit degeneratif, dan menciptakan komunitas pendukung untuk kehidupan yang sehat dan bahagia.",
},
]
export default function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -29,7 +53,7 @@ export default function Page() {
<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" }} >
<Text px={{base: 20, md: 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.
@@ -43,60 +67,79 @@ export default function Page() {
base: 1,
md: 3,
}}>
{data.map((v, k) => {
{data1.map((v, k) => {
return (
<Paper radius={10} key={k} bg={colors["white-trans-1"]}>
<Stack gap={'xs'}>
<Center>
<Image src={v.image} alt="" />
<Image src={v.image} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
</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"}>
<Text pb={10} 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>
<Text ta={'justify'} fz={'h4'}>{v.deskripsi}</Text>
</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 py={15}>
<Button fw={'bold'} fz={'h5'} c={colors["blue-button"]} bg={colors["BG-trans"]}>Detail Program</Button>
</Box>
<Group py={20}>
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">Selasa, 11 Januari 2025</Text>
</Group>
<Group gap="xs">
<IconUser size={18} />
<Text size="sm">Admin Desa</Text>
</Group>
</Group>
</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>
<Box py={10} px={{ base: "md", md: 100 }}>
<Box pb={10}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Manfaat Program Kesehatan
</Text>
<Text fz={{ base: "h4", md: "h3" }} >
Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat.
</Text>
</Box>
<SimpleGrid
pb={30}
cols={{
base: 1,
md: 3,
}}>
{data2.map((v, k) => {
return (
<Paper key={k} px={"xl"} py={80} bg={colors['white-trans-1']} c={colors['blue-button']}>
<Stack justify='space-between' >
<Group justify='center'>
<Paper p={'xl'} radius={'100'} bg={colors['blue-button']}>
<Center >
{v.icon}
</Center>
</Paper>
</Group>
<Text ta={"center"} fw={"bold"} fz={"h3"}>
{v.title}
</Text>
<Text ta={"center"} fz={'h4'}>
{v.desc}
</Text>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Box>
</Stack>
)

4
src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx
View File

@@ -107,11 +107,11 @@ function Page() {
}}>
<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>
<Text ta={'center'} fz={{ base: 45, md: 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>
<Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
</Paper>
</SimpleGrid>
</Paper>