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

Fix UI User Menu PPID & Kesehatan

Browse Source
This commit is contained in:
nico
2025-08-27 15:39:13 +08:00
parent f15ef5a275
commit f9530c32eb
35 changed files with 3658 additions and 2084 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,101 @@
'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 { Box, Button, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconChevronRight, IconClockHour4, IconMapPin } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function JadwalKegiatanPage() {
const state = useProxy(jadwalkegiatanState)
const state = useProxy(jadwalkegiatanState);
const router = useRouter();
useShallowEffect(()=> {
state.findMany.load()
}, [])
useShallowEffect(() => {
state.findMany.load();
}, []);
if(!state.findMany.data){
if (!state.findMany.data) {
return (
<Box py={10}>
<Skeleton h={500} />
<Box py="lg">
<Skeleton h={500} radius="lg" />
</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}
<Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md" h="auto" mih="100vh">
<Stack gap="lg">
<Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
Jadwal Kegiatan Warga
</Text>
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">
Belum ada jadwal kegiatan yang tersedia
</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'} />
) : (
state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
radius="xl"
shadow="sm"
p="lg"
style={{ backdropFilter: 'blur(8px)' }}
>
<Stack gap="sm">
<Group justify="space-between">
<Text fw={700} fz="xl">
{item.informasijadwalkegiatan.name}
</Text>
<Text fw={600} fz="sm" c={colors['blue-button']}>
{item.informasijadwalkegiatan.tanggal}
</Text>
</Group>
<Group gap="xs">
<IconClockHour4 size={18} color={colors['blue-button']} />
<Text fz="sm">{item.informasijadwalkegiatan.waktu}</Text>
</Group>
<Group gap="xs">
<IconMapPin size={18} color={colors['blue-button']} />
<Text fz="sm">{item.informasijadwalkegiatan.lokasi}</Text>
</Group>
<Divider my="sm" />
<Group justify="flex-end">
<Button
variant="light"
radius="lg"
size="sm"
rightSection={<IconChevronRight size={18} />}
onClick={() =>
router.push(
`/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`
)
}
styles={{
root: {
background: colors['blue-button'],
color: 'white',
boxShadow: '0 0 12px rgba(0, 123, 255, 0.4)',
transition: 'all 0.2s ease',
},
}}
>
Lihat Detail & Daftar
</Button>
</Group>
</Stack>
</Card>
))
)}
</Stack>
</Paper>
</Box>