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

Fix Admin Submenu Posyandu, Menu Kesehatan, dan Sinkronisasi UI & API Admin - User Submenu Posyandu

Browse Source
This commit is contained in:
nico
2025-08-14 11:48:57 +08:00
parent c99416c7f8
commit 5e137ba658
13 changed files with 273 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx
View File

@@ -1,36 +1,58 @@
'use client'
import colors from "@/con/colors";
import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
import { Box, Center, Flex, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from "@mantine/core";
import BackButton from "../../desa/layanan/_com/BackButto";
// import { useTransitionRouter } from "next-view-transitions";
import posyandustate from "@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu";
import { useShallowEffect } from "@mantine/hooks";
import { useProxy } from "valtio/utils";
import { useState } from "react";
import { IconSearch } from "@tabler/icons-react";
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() {
const state = useProxy(posyandustate)
// const router = useTransitionRouter()
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 />
<Flex mt={10} justify={"space-between"} align={"center"}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Posyandu Darmasaba
</Text>
<TextInput
placeholder="Cari Posyandu"
radius="lg"
leftSection={<IconSearch size={20} />}
w={{ base: "25%", md: "30%" }}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Flex>
</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
@@ -39,49 +61,46 @@ export default function Page() {
base: 1,
md: 3,
}}>
{data.map((v, k) => {
{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}
{v.name}
</Text>
<Center>
<Image src={v.image} alt="" />
<Image src={v.image.link} alt="" />
</Center>
<Text fz={'h4'}>
Jadwal Pelayanan
</Text>
<Text fz={'h4'}>
Setiap tanggal 5, Pukul 09:00 -
12:00 WITA
No.Telp : {v.nomor}
</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>
<Text fz={'h4'}>
Jadwal Pelayanan
</Text>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
</Box>
<Spoiler
maxHeight={60} // tinggi maksimum sebelum di-collapse
showLabel="Read more"
hideLabel="Read less"
>
<Text fz={'h4'} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
</Spoiler>
</Stack>
</Paper>
)
})}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
total={totalPages}
mt="md"
mb="md"
/>
</Center>
<Text fz={'h4'} fw={"bold"}>
Pelayanan Posyandu
</Text>