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

Sinkronisasi UI & API Admin - User Submenu Penanganan Darurat, User Submenu Kontak Darurat & User Submenu Info Wabah / Penyakit

Browse Source
This commit is contained in:
nico
2025-08-18 20:56:18 +08:00
parent 1e154ced86
commit 4491d23bea
14 changed files with 845 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx
View File

@@ -1,16 +1,58 @@
'use client'
import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
import colors from '@/con/colors';
import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
function Page() {
const state = useProxy(infoWabahPenyakit)
const [search, setSearch] = useState('')
const {
data,
page,
totalPages,
loading,
load,
} = state.findMany;
useShallowEffect(() => {
load(page, 3, search)
}, [page, search])
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
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>
<Grid align='center' px={{ base: 'md', md: 100 }}>
<GridCol span={{ base: 12, md: 9 }}>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Info Wabah / Penyakit
</Text>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<TextInput
radius={"lg"}
placeholder='Cari Info Wabah / Penyakit'
value={search}
onChange={(e) => setSearch(e.target.value)}
leftSection={<IconSearch size={20} />}
w={{ base: "50%", md: "100%" }}
/>
</GridCol>
</Grid>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<SimpleGrid
@@ -19,101 +61,41 @@ function Page() {
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>
{data.map((v, k) => {
return (
<Paper key={k} p={'xl'} bg={colors['white-trans-1']}>
<Stack gap={'xs'}>
<Box>
<Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>{v.name}</Text>
<Image w={330} h={200} fit='contain' pt={5} src={v.image.link} alt={v.name} />
<Text fz={'h4'} fw={'bold'} >
{v.name}
</Text>
<Text fz={'h6'} pb={10}>
Diposting: 12 Februari 2025 | Dinas Kesehatan
</Text>
<Text fz={'h4'} pb={10}>
{v.deskripsiSingkat}
</Text>
<Text fz={'h4'} pb={10} dangerouslySetInnerHTML={{ __html: v.deskripsiLengkap }} />
</Box>
</Stack>
</Paper>
)
})}
</SimpleGrid>
</Stack>
</Box>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
total={totalPages}
mt="md"
mb="md"
/>
</Center>
</Stack>
);
}