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

Fix Admin - User Menu Keamanan, Submenu Laporan Kontak Darurat, Laporan Publik

Browse Source
This commit is contained in:
nico
2025-09-17 14:59:46 +08:00
parent 39e1e7b575
commit 79ad39fc55
50 changed files with 1326 additions and 1021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx
View File

@@ -1,72 +1,60 @@
'use client'
import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
import colors from '@/con/colors';
import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
import { Avatar, Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconPhoneCall, IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
const emergencyServices = [
{
id: 1,
name: "Polisi",
icon: <IconBadge size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 2,
name: "Ambulans",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 3,
name: "Pemadam Kebakaran",
icon: <IconFiretruck size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const healthFacilities = [
{
id: 4,
name: "Puskesmas Darmasaba",
icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 5,
name: "UGD Terdekat",
icon: <IconAmbulance size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
const villageGovernment = [
{
id: 6,
name: "Kantor Desa Darmasaba",
icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
},
{
id: 7,
name: "Kepala Desa",
icon: <IconUser size={24} color={colors['blue-button']} />,
nomor: '081xxxxxxxxx'
}
];
function Page() {
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebouncedValue(search, 500);
const {
data,
page,
totalPages,
loading,
load,
} = kontakState.findMany;
useShallowEffect(() => {
load(page, 4, debouncedSearch);
kontakDarurat.kontakDaruratItem.findMany.load();
}, [page, debouncedSearch]);
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
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" }} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
</Text>
</Box>
<Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
<Box>
<Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Kontak Darurat
</Text>
<Text fz={{ base: "h4", md: "h3" }} >
Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
</Text>
</Box>
<TextInput
placeholder='Cari kontak darurat, nama, atau nomor...'
leftSection={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Group>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
@@ -87,71 +75,74 @@ function Page() {
<Box px={{ base: "md", md: 100 }}>
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
{/* Layanan Darurat */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconFirstAidKit size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Layanan Darurat
</Text>
</Group>
{emergencyServices.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
{data.map((item) => (
<Paper
key={item.id}
p="lg"
radius="md"
bg={colors['white-trans-1']}
>
<Group pb="md" align="center">
<Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
{item.icon && (
<IconMapper
name={item.icon as IconKey}
size={32}
color={colors['blue-button']}
/>
)}
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
{item.nama}
</Text>
</Group>
))}
</Paper>
{/* Fasilitas Kesehatan */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Fasilitas Kesehatan
</Text>
</Group>
{healthFacilities.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Pemerintah Desa */}
<Paper p="lg" radius="md" bg={colors['white-trans-1']}>
<Group pb="md" align="center">
<Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
<IconBuildingBank size={30} color={colors["blue-button"]} />
</Avatar>
<Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
Pemerintah Desa
</Text>
</Group>
{villageGovernment.map((v, k) => (
<Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
<Group>
{v.icon}
<Text>{v.name}</Text>
</Group>
<Text>{v.nomor}</Text>
</Group>
))}
</Paper>
{/* Kontak Items */}
{item.kontakItems?.map((kontak) => (
<Paper
key={kontak.id}
p="lg"
bg={colors['BG-trans']}
radius="md"
shadow="xs"
mt="sm"
>
<Group align="center" justify="space-between">
<Group align="center">
{kontak.kontakItem?.icon && (
<IconMapper
name={kontak.kontakItem.icon as IconKey}
size={24}
color={colors['blue-button']}
/>
)}
<Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
{kontak.kontakItem?.nama}
</Text>
</Group>
<Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
{kontak.kontakItem?.nomorTelepon}
</Text>
</Group>
</Paper>
))}
</Paper>
))}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 4, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>
</Stack>
);

163
src/app/darmasaba/(pages)/keamanan/laporan-publik/[id]/page.tsx Normal file
View File

@@ -0,0 +1,163 @@
'use client'
import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik'
import colors from '@/con/colors'
import {
Box,
Button,
Card,
Divider,
Group,
Loader,
Paper,
Stack,
Text,
Title,
Tooltip
} from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconArrowLeft } from '@tabler/icons-react'
import { useParams, useRouter } from 'next/navigation'
import { useProxy } from 'valtio/utils'
function Page() {
const stateLaporan = useProxy(laporanPublikState)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
stateLaporan.findUnique.load(params?.id as string)
}, [])
if (!stateLaporan.findUnique.data) {
return (
<Stack align="center" justify="center" h="70vh">
<Loader size="lg" color="blue" />
<Text c="dimmed">Memuat detail laporan publik...</Text>
</Stack>
)
}
const data = stateLaporan.findUnique.data
return (
<Box py="xl" px={{ base: 'md', md: 100 }}>
<Group mb="lg">
<Tooltip label="Kembali ke daftar laporan">
<Button
variant="light"
color="blue"
leftSection={<IconArrowLeft size={20} />}
onClick={() => router.back()}
radius="xl"
>
Kembali
</Button>
</Tooltip>
</Group>
<Paper
withBorder
p="xl"
radius="xl"
shadow="md"
bg={colors['white-1']}
>
<Stack gap="lg">
<Title order={2} >
Detail Laporan Publik
</Title>
<Card withBorder radius="md" shadow="sm" p="md" >
<Stack gap="md">
<Box>
<Text fw={600} fz="lg" >Judul</Text>
<Text fz="sm" c="dimmed">{data.judul || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Tanggal</Text>
<Text fz="sm" c="dimmed">
{data.tanggalWaktu
? new Date(data.tanggalWaktu).toLocaleString('id-ID', { dateStyle: 'full', timeStyle: 'short' })
: '-'}
</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Lokasi</Text>
<Text fz="sm" c="dimmed">{data.lokasi || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Status</Text>
<Box
style={{
display: 'inline-block',
padding: '6px 14px',
borderRadius: '20px',
backgroundColor:
data.status === 'Selesai' ? '#38d9a9' :
data.status === 'Proses' ? '#ffd43b' :
'#ff6b6b',
color: data.status === 'Proses' ? '#2e2e2e' : '#fff',
fontWeight: 600,
fontSize: '0.85rem',
textAlign: 'center',
minWidth: '90px',
}}
>
{data.status || '-'}
</Box>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Kronologi</Text>
<Text fz="sm" c="dimmed">{data.kronologi || '-'}</Text>
</Box>
<Divider />
<Box>
<Text fw={600} fz="lg" >Penanganan</Text>
{data.penanganan?.length ? (
<Stack gap="sm" mt="xs">
{data.penanganan.map((item, index) => (
<Paper
key={index}
p="sm"
radius="md"
shadow="xs"
withBorder
bg="dark.5"
>
<Text
fz="sm"
c="dimmed"
dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
/>
</Paper>
))}
</Stack>
) : (
<Text fz="sm" c="dimmed" fs="italic">
Belum ada penanganan
</Text>
)}
</Box>
</Stack>
</Card>
</Stack>
</Paper>
</Box>
)
}
export default Page

239
src/app/darmasaba/(pages)/keamanan/laporan-publik/page.tsx
View File

@@ -1,56 +1,76 @@
'use client'
import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
import colors from '@/con/colors';
import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
import React from 'react';
import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
import { DateTimePicker } from '@mantine/dates';
import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
import { IconArrowRight, IconPlus } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { IconArrowRight } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
const data = [
{
id: 1,
judul: 'Kasus Pencurian Banjar Tengah',
tanggal: '3 Februari 2025, 02:00 WITA',
deskripsi: <List>
<ListItem>Laporan ke Polsek setempat</ListItem>
<ListItem>Penyisiran area oleh Pecalang</ListItem>
<ListItem>Koordinasi dengan dealer motor</ListItem>
<ListItem>Penyebaran informasi ke grup keamanan</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
},
{
id: 2,
judul: 'Kasus Narkoba Banjar Kaja',
tanggal: '10 Februari 2025, 22:30 WITA',
deskripsi: <List>
<ListItem>Koordinasi dengan Satres Narkoba</ListItem>
<ListItem>Penggerebekan lokasi</ListItem>
<ListItem>Pengamanan barang bukti</ListItem>
<ListItem>Pemeriksaan saksi</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
},
{
id: 3,
judul: 'Kasus Tawuran Banjar Kaja',
tanggal: '15 Februari 2025, 22:30 WITA',
deskripsi: <List>
<ListItem>Laporan ke Polsek setempat</ListItem>
<ListItem>Penggerebekan lokasi</ListItem>
<ListItem>Pengamanan barang bukti</ListItem>
<ListItem>Pemeriksaan saksi</ListItem>
</List>,
button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
},
]
function Page() {
const [search, setSearch] = useState("");
const router = useTransitionRouter()
const [debouncedSearch] = useDebouncedValue(search, 500);
const [opened, { open, close }] = useDisclosure(false);
const stateLaporan = useProxy(laporanPublikState);
const {
data,
page,
totalPages,
loading,
load,
} = stateLaporan.findMany;
useShallowEffect(() => {
load(page, 6, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
const resetForm = () => {
stateLaporan.create.form = {
judul: '',
lokasi: '',
tanggalWaktu: '',
kronologi: '',
};
};
const handleSubmit = async () => {
await stateLaporan.create.create();
resetForm();
};
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
<Flex justify="space-between" align="center">
<BackButton />
<Flex gap={"xs"} align={"center"}>
<TextInput
placeholder="Cari laporan"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<Button
onClick={open}
bg={colors['blue-button']}
size="md"
radius="md"
>
<IconPlus size={20} />
</Button>
</Flex>
</Flex>
</Box>
<Box>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
@@ -88,29 +108,144 @@ function Page() {
cols={{
base: 1,
md: 3
}}
}}
>
{data.map((v, k) => {
return (
<Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
<Stack>
<Title c={colors['blue-button']} order={1}>{v.judul}</Title>
<Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
<Text fs={'italic'} fz={'xl'}>
{v.tanggalWaktu
? new Date(v.tanggalWaktu).toLocaleString('id-ID')
: '-'}
</Text>
<Box>
<Text fw={'bold'}>Penanganan:</Text>
{v.deskripsi}
{v.penanganan?.length ? (
v.penanganan.map((item, index) => (
<Box key={index}>
<Text
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
/>
</Box>
))
) : (
<Text fz="sm" fs="italic" c="dimmed">
Belum ada penanganan
</Text>
)}
</Box>
<Box>
{v.button}
<Box
style={{
display: 'inline-block',
padding: '4px 12px',
borderRadius: '16px',
backgroundColor:
v.status === 'Selesai' ? '#94EF95FF' :
v.status === 'Proses' ? '#F1D295FF' :
'#F38E8EFF',
color:
v.status === 'Selesai' ? '#01BA01FF' :
v.status === 'Proses' ? '#B67A00FF' :
'#AE1700FF',
fontWeight: 900,
fontSize: '0.75rem',
textAlign: 'center',
minWidth: '80px',
}}
>
{v.status}
</Box>
<Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
<Button
bg={colors['blue-button']}
rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
onClick={() => router.push(`/darmasaba/keamanan/laporan-publik/${v.id}`)}
>Lihat Detail Kronologi
</Button>
</Stack>
</Paper>
)
})}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)}
total={totalPages}
my="md"
/>
</Center>
</Stack>
</Box>
<Modal opened={opened} onClose={close} title="Tambah Laporan Publik">
<Paper
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
value={stateLaporan.create.form.judul}
onChange={(e) => (stateLaporan.create.form.judul = e.target.value)}
label={<Text fw="bold" fz="sm">Judul Laporan Publik</Text>}
placeholder="Masukkan judul laporan publik"
required
/>
<TextInput
value={stateLaporan.create.form.lokasi}
onChange={(e) => (stateLaporan.create.form.lokasi = e.target.value)}
label={<Text fw="bold" fz="sm">Lokasi Laporan Publik</Text>}
placeholder="Masukkan lokasi laporan publik"
required
/>
<DateTimePicker
label={<Text fw="bold" fz="sm">Tanggal Laporan Publik</Text>}
value={
stateLaporan.create.form.tanggalWaktu
? new Date(stateLaporan.create.form.tanggalWaktu)
: null
}
onChange={(val) => {
stateLaporan.create.form.tanggalWaktu = val ? val.toString() : '';
}}
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Kronologi
</Text>
<CreateEditor
value={stateLaporan.create.form.kronologi}
onChange={(htmlContent) => {
stateLaporan.create.form.kronologi = htmlContent;
}}
/>
</Box>
<Group justify="right">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Modal>
</Stack>
);
}

1
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx
View File

@@ -56,6 +56,7 @@ function Page() {
</Group>
<Stack gap="lg">
<Box>
<Text fz="h4" fw="bold">Pendahuluan</Text>
<Divider my="xs" />

56
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx
View File

@@ -11,11 +11,11 @@ function ArtikelKesehatanPage() {
const state = useProxy(artikelKesehatanState)
const router = useRouter()
useShallowEffect(()=> {
useShallowEffect(() => {
state.findMany.load()
}, [])
if(!state.findMany.data){
if (!state.findMany.data) {
return (
<Box py="xl" ta="center">
<Loader size="lg" color={colors['blue-button']} />
@@ -24,36 +24,34 @@ function ArtikelKesehatanPage() {
)
}
if(state.findMany.data.length === 0){
return (
<Box py="xl" ta="center">
<Image src="/empty-state.svg" alt="Tidak ada data" w={220} mx="auto" />
<Text mt="md" fw="bold" fz="lg">Belum ada artikel kesehatan</Text>
<Text c="dimmed" fz="sm">Artikel akan tampil di sini setelah tersedia.</Text>
</Box>
)
}
return (
<Box>
<Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
<Stack gap="xl">
<Title order={2} ta="center" c={colors['blue-button']}>Artikel Kesehatan</Title>
<Divider color={colors['blue-button']} />
<Stack gap="lg">
{state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
radius="lg"
shadow="sm"
p="lg"
<Stack gap="lg">
<Title order={2} ta="center" c={colors['blue-button']}>
Artikel Kesehatan
</Title>
<Divider size="sm" color={colors['blue-button']} />
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">
Belum ada artikel kesehatan yang tersedia
</Text>
</Box>
) : (
state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
radius="lg"
shadow="sm"
p="lg"
style={{ transition: 'transform 200ms ease' }}
onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-4px)')}
onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
>
<Card.Section>
<Image src={'/api/img/dbd.png'} alt={item.title} height={200} fit="cover" />
<Image src={item.image?.link} alt={item.title} height={200} fit="cover" />
</Card.Section>
<Stack gap="xs" mt="md">
<Text fw="bold" fz="xl" c="dark">{item.title}</Text>
@@ -67,9 +65,9 @@ function ArtikelKesehatanPage() {
{item.content}
</Text>
<Tooltip label="Baca artikel lengkap">
<Anchor
onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
variant="light"
<Anchor
onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
variant="light"
c={colors['blue-button']}
>
<Group gap="xs">
@@ -80,8 +78,8 @@ function ArtikelKesehatanPage() {
</Tooltip>
</Stack>
</Card>
))}
</Stack>
))
)}
</Stack>
</Paper>
</Box>

14
src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx
View File

@@ -29,14 +29,21 @@ function FasilitasKesehatanPage() {
return (
<Box>
<Paper p="xl" radius="xl" shadow="md" h="100%" bg="white">
<Paper bg={colors['white-trans-1']} p="xl" radius="xl" shadow="md" h="100%">
<Stack gap="lg">
<Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
Fasilitas Kesehatan
</Text>
<Divider size="sm" color={colors['blue-button']} />
<Stack gap="lg">
{state.findMany.data.map((item) => (
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">
Belum ada fasilitas kesehatan yang tersedia
</Text>
</Box>
) : (
state.findMany.data.map((item) => (
<Card
key={item.id}
withBorder
@@ -93,7 +100,8 @@ function FasilitasKesehatanPage() {
</Anchor>
</Stack>
</Card>
))}
))
)}
</Stack>
</Stack>
</Paper>

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

@@ -25,12 +25,12 @@ function JadwalKegiatanPage() {
return (
<Box>
<Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md" h="auto" mih="100vh">
<Paper bg={colors['white-trans-1']} p="xl" 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>
<Divider size="sm" color={colors['blue-button']} />
{state.findMany.data.length === 0 ? (
<Box py="xl" ta="center">
<Text fz="lg" c="dimmed">