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

QC User & Admin Responsive : Menu Kesehatan - Ekonomi

Browse Source
This commit is contained in:
nico
2025-10-03 10:17:06 +08:00
parent 8a6d8ed8db
commit f7fd9be255
55 changed files with 754 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,10 +39,9 @@ function Page() {
const nama = data?.name || 'Fasilitas Kesehatan';
const prosedur = data?.prosedurpendaftaran.content || '';
console.log("Prosedur:", data?.prosedurpendaftaran);
const alamat = data?.informasiumum?.alamat || '-';
const jam = data?.informasiumum?.jamOperasional || '-';
const layananUnggulan = data?.layananunggulan || '';
const layananUnggulan = data?.layananunggulan?.content || '';
const tenaga = data?.dokterdantenagamedis || null;
const fasilitasPendukungHtml = data?.fasilitaspendukung?.content || '';
const tarif = (data?.tarifdanlayanan as TarifDanLayanan) || null;

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

@@ -53,7 +53,11 @@ function JadwalKegiatanPage() {
{item.informasijadwalkegiatan.name}
</Text>
<Text fw={600} fz="sm" c={colors['blue-button']}>
{item.informasijadwalkegiatan.tanggal}
{new Date(item.informasijadwalkegiatan.tanggal).toLocaleDateString('id-ID', {
day: '2-digit',
month: 'long',
year: 'numeric'
})}
</Text>
</Group>

85
src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/[id]/page.tsx Normal file
View File

@@ -0,0 +1,85 @@
'use client'
import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
import colors from '@/con/colors';
import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function DetailInfoWabahPenyakitUser() {
const state = useProxy(infoWabahPenyakit);
const router = useRouter();
const params = useParams();
useShallowEffect(() => {
state.findUnique.load(params?.id as string);
}, []);
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={400} radius="md" />
</Stack>
);
}
const data = state.findUnique.data;
return (
<Box py={10}>
{/* Tombol Back */}
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
{/* Wrapper Detail */}
<Paper
withBorder
w="100%"
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="lg">
{/* Judul */}
<Text fz="xl" fw="bold" c={colors['blue-button']} ta="center">
{data.name || 'Kontak Darurat'}
</Text>
{/* Gambar */}
{data.image?.link && (
<Image
src={data.image.link}
alt={data.name}
radius="md"
maw={400}
mx="auto"
loading="lazy"
/>
)}
{/* Deskripsi */}
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Box>
</Stack>
</Paper>
</Box>
);
}
export default DetailInfoWabahPenyakitUser;

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

@@ -2,10 +2,14 @@
import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
import colors from '@/con/colors';
import {
Badge,
Box,
Button,
Center,
Divider,
Grid,
GridCol,
Group,
Image,
Pagination,
Paper,
@@ -13,27 +17,25 @@ import {
Skeleton,
Stack,
Text,
TextInput,
Badge,
HoverCard,
Divider,
Group,
TextInput
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconSearch, IconInfoCircle } from '@tabler/icons-react';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconInfoCircle, IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import { useTransitionRouter } from 'next-view-transitions';
function Page() {
const state = useProxy(infoWabahPenyakit);
const router = useTransitionRouter();
const [search, setSearch] = useState('');
const [debouncedSearch] = useDebouncedValue(search, 500)
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 3, search);
}, [page, search]);
load(page, 3, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
@@ -125,28 +127,9 @@ function Page() {
<Text fz="sm" lh={1.5}>
{v.deskripsiSingkat}
</Text>
<HoverCard shadow="md" position="bottom" radius="md" width={300}>
<HoverCard.Target>
<Text
fz="sm"
fw={500}
c={colors['blue-button']}
style={{ cursor: 'pointer' }}
>
Lihat detail lengkap
</Text>
</HoverCard.Target>
<HoverCard.Dropdown>
<Text
fz="sm"
lh={1.6}
dangerouslySetInnerHTML={{
__html: v.deskripsiLengkap,
}}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
/>
</HoverCard.Dropdown>
</HoverCard>
<Button variant="light" radius="md" size="md" onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${v.id}`)}>
Selengkapnya
</Button>
</Stack>
</Paper>
))}
@@ -154,17 +137,17 @@ function Page() {
)}
</Box>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)}
total={totalPages}
radius="xl"
size="md"
mt="lg"
/>
</Center>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)}
total={totalPages}
radius="xl"
size="md"
mt="lg"
/>
</Center>
</Stack>
);

71
src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx
View File

@@ -1,9 +1,9 @@
'use client'
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { useShallowEffect } from '@mantine/hooks';
import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
import colors from '@/con/colors';
import {
Box,
Button,
Center,
Grid,
GridCol,
@@ -15,23 +15,24 @@ import {
Stack,
Text,
TextInput,
Tooltip,
Badge,
Tooltip
} from '@mantine/core';
import { IconSearch, IconPhone } from '@tabler/icons-react';
import { useShallowEffect } from '@mantine/hooks';
import { IconBrandWhatsapp, IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../desa/layanan/_com/BackButto';
import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
import colors from '@/con/colors';
import { useDebouncedValue } from '@mantine/hooks';
function Page() {
const state = useProxy(kontakDarurat);
const [search, setSearch] = useState('');
const [debouncedSearch] = useDebouncedValue(search, 500)
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 6, search);
}, [page, search]);
load(page, 3, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
@@ -113,16 +114,16 @@ function Page() {
{v.name}
</Text>
<Text fz="sm" c="dimmed" ta="center" lineClamp={3}>
<span style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
<span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
</Text>
<Badge
color="blue"
leftSection={<IconPhone size={14} />}
variant="light"
mt="sm"
>
Panggil Sekarang
</Badge>
<Button
variant="light"
leftSection={<IconBrandWhatsapp size={18} />}
component="a"
href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`}
target="_blank"
aria-label="Hubungi WhatsApp"
>WhatsApp</Button>
</Stack>
</Paper>
))}
@@ -130,22 +131,20 @@ function Page() {
)}
</Box>
{totalPages > 1 && (
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => load(newPage, 6, search)}
total={totalPages}
radius="xl"
size="md"
styles={{
control: {
borderRadius: '999px',
},
}}
/>
</Center>
)}
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => load(newPage, 3, search)}
total={totalPages}
size="lg"
radius="xl"
styles={{
control: {
border: `1px solid ${colors['blue-button']}`,
},
}}
/>
</Center>
</Stack>
);
}

41
src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx
View File

@@ -17,7 +17,7 @@ import {
TextInput,
Tooltip
} from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks'
import { IconSearch } from '@tabler/icons-react'
import { useState } from 'react'
import { useProxy } from 'valtio/utils'
@@ -26,12 +26,12 @@ import BackButton from '../../desa/layanan/_com/BackButto'
function Page() {
const state = useProxy(penangananDarurat)
const [search, setSearch] = useState('')
const [debouncedSearch] = useDebouncedValue(search, 500)
const { data, page, totalPages, loading, load } = state.findMany
useShallowEffect(() => {
load(page, 6, search)
}, [page, search])
load(page, 3, debouncedSearch)
}, [page, debouncedSearch])
if (loading || !data) {
return (
@@ -127,7 +127,7 @@ function Page() {
c="dimmed"
lineClamp={4}
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Box>
</Stack>
@@ -141,22 +141,21 @@ function Page() {
)}
</Box>
{totalPages > 1 && (
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => load(newPage, 6, search)}
total={totalPages}
size="lg"
radius="xl"
styles={{
control: {
border: `1px solid ${colors['blue-button']}`,
},
}}
/>
</Center>
)}
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => load(newPage, 3, search)}
total={totalPages}
size="lg"
radius="xl"
styles={{
control: {
border: `1px solid ${colors['blue-button']}`,
},
}}
/>
</Center>
</Stack>
)
}

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

@@ -26,6 +26,16 @@ export default function Page() {
);
}
if (data.length === 0) {
return (
<Box py="xl" px={{ base: "md", md: 100 }}>
<Text fz="lg" fw="bold" c={colors["blue-button"]}>
Tidak ada posyandu yang ditemukan
</Text>
</Box>
);
}
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
<Box px={{ base: "md", md: 100 }}>
@@ -111,10 +121,11 @@ export default function Page() {
<IconCalendar size={18} stroke={1.5} />
<Text fz="sm" c="dimmed">
Jadwal:{" "}
<span style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
<span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
</Text>
</Flex>
<Spoiler
key={`spoiler-${v.id}`}
maxHeight={70}
showLabel="Lihat selengkapnya"
hideLabel="Sembunyikan"
@@ -124,7 +135,7 @@ export default function Page() {
fz="sm"
lh={1.5}
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Spoiler>
</Stack>

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

@@ -30,7 +30,7 @@ import BackButton from "../../desa/layanan/_com/BackButto";
import { useProxy } from "valtio/utils";
import programKesehatan from "@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan";
import { useState } from "react";
import { useShallowEffect } from "@mantine/hooks";
import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
const manfaatProgram = [
@@ -58,11 +58,12 @@ export default function Page() {
const state = useProxy(programKesehatan);
const router = useRouter();
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 3, search);
}, [page, search]);
load(page, 3, debouncedSearch);
}, [page, debouncedSearch]);
if (loading || !data) {
return (
@@ -125,14 +126,18 @@ export default function Page() {
className="hover-scale"
>
<Stack gap="md">
<Image
src={v.image?.link}
alt={v.name}
radius="xl"
height={180}
fit="cover"
loading="lazy"
/>
<Box h={180} w="100%">
<Image
src={v.image?.link}
alt={v.name}
radius="xl"
w="100%"
h="100%"
fit="cover"
loading="lazy"
/>
</Box>
<Box px="lg" pb="lg">
<Text
fw="bold"
@@ -147,7 +152,7 @@ export default function Page() {
c="dimmed"
lineClamp={3}
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
<Group justify="space-between" mt="md">
<Group gap="xs">
@@ -155,13 +160,13 @@ export default function Page() {
<Text size="sm">
{v.createdAt
? new Date(v.createdAt).toLocaleDateString(
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)
"id-ID",
{
day: "numeric",
month: "long",
year: "numeric",
}
)
: "Tanggal tidak tersedia"}
</Text>
</Group>