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

This commit is contained in:
2025-08-14 11:48:57 +08:00
parent c99416c7f8
commit 5e137ba658
13 changed files with 273 additions and 157 deletions

View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
@@ -9,6 +10,7 @@ const templateForm = z.object({
nomor: z.string().min(1, { message: "Nomor is required" }),
deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
imageId: z.string().nonempty(),
jadwalPelayanan: z.string().min(1, { message: "Jadwal Pelayanan is required" }),
});
const defaultForm = {
@@ -16,6 +18,7 @@ const defaultForm = {
nomor: "",
deskripsi: "",
imageId: "",
jadwalPelayanan: "",
};
const posyandustate = proxy({
@@ -50,19 +53,43 @@ const posyandustate = proxy({
}
},
findMany: {
data: null as
| Prisma.PosyanduGetPayload<{
include: {
data: null as
| Prisma.PosyanduGetPayload<{
include: {
image: true;
};
}>[]
| null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
posyandustate.findMany.loading = true; // ✅ Akses langsung via nama path
posyandustate.findMany.page = page;
posyandustate.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get({ query });
if (res.status === 200 && res.data?.success) {
posyandustate.findMany.data = res.data.data ?? [];
posyandustate.findMany.totalPages = res.data.totalPages ?? 1;
} else {
posyandustate.findMany.data = [];
posyandustate.findMany.totalPages = 1;
}
}>[]
| null,
async load() {
const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get();
if (res.status === 200) {
posyandustate.findMany.data = res.data?.data ?? [];
}
}
} catch (err) {
console.error("Gagal fetch posyandu paginated:", err);
posyandustate.findMany.data = [];
posyandustate.findMany.totalPages = 1;
} finally {
posyandustate.findMany.loading = false;
}
},
},
findUnique: {
data: null as
@@ -148,6 +175,7 @@ const posyandustate = proxy({
nomor: data.nomor,
deskripsi: data.deskripsi,
imageId: data.imageId || "",
jadwalPelayanan: data.jadwalPelayanan || "",
};
return data;
} else {
@@ -181,6 +209,7 @@ const posyandustate = proxy({
nomor: this.form.nomor,
deskripsi: this.form.deskripsi,
imageId: this.form.imageId,
jadwalPelayanan: this.form.jadwalPelayanan,
}),
});

View File

@@ -47,7 +47,7 @@ function ListBerita({ search }: { search: string }) {
if (loading || !data) {
return <Skeleton h={500} />;
}
const filteredData = data || [];
return (

View File

@@ -25,6 +25,7 @@ function EditPosyandu() {
nomor: statePosyandu.edit.form.nomor || '',
deskripsi: statePosyandu.edit.form.deskripsi || '',
imageId: statePosyandu.edit.form.imageId || '',
jadwalPelayanan: statePosyandu.edit.form.jadwalPelayanan || '',
});
useEffect(() => {
@@ -40,6 +41,7 @@ function EditPosyandu() {
nomor: data.nomor || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
jadwalPelayanan: data.jadwalPelayanan || '',
});
if (data?.image?.link) {
@@ -62,6 +64,7 @@ function EditPosyandu() {
nomor: formData.nomor,
deskripsi: formData.deskripsi,
imageId: formData.imageId,
jadwalPelayanan: formData.jadwalPelayanan,
}
if (file) {
@@ -173,6 +176,16 @@ function EditPosyandu() {
}}
/>
</Box>
<Box>
<Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
<EditEditor
value={formData.jadwalPelayanan}
onChange={(htmlContent) => {
setFormData({ ...formData, jadwalPelayanan: htmlContent });
statePosyandu.edit.form.jadwalPelayanan = htmlContent;
}}
/>
</Box>
<Group>
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
</Group>

View File

@@ -63,6 +63,10 @@ function DetailPosyandu() {
<Text fz={"lg"} fw={"bold"}>Deskripsi Posyandu</Text>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePosyandu.findUnique.data.deskripsi }} />
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Jadwal Pelayanan</Text>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePosyandu.findUnique.data.jadwalPelayanan }} />
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Gambar</Text>
<Image src={statePosyandu.findUnique.data.image?.link} alt="gambar" />

View File

@@ -23,6 +23,7 @@ function CreatePosyandu() {
nomor: "",
deskripsi: "",
imageId: "",
jadwalPelayanan: "",
};
setFile(null);
@@ -147,6 +148,15 @@ function CreatePosyandu() {
}}
/>
</Box>
<Box>
<Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
<CreateEditor
value={statePosyandu.create.form.jadwalPelayanan}
onChange={(htmlContent) => {
statePosyandu.create.form.jadwalPelayanan = htmlContent;
}}
/>
</Box>
<Group>
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
</Group>

View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
@@ -30,19 +30,21 @@ function ListPosyandu({ search }: { search: string }) {
const statePosyandu = useProxy(posyandustate)
const router = useRouter();
const {
data,
page,
totalPages,
loading,
load,
} = statePosyandu.findMany;
useShallowEffect(() => {
statePosyandu.findMany.load()
}, [])
load(page, 10, search)
}, [page, search])
const filteredData = (statePosyandu.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword) ||
item.nomor.toString().toLowerCase().includes(keyword)
);
});
const filteredData = data || [];
if (!statePosyandu.findMany.data) {
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
@@ -70,10 +72,20 @@ function ListPosyandu({ search }: { search: string }) {
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>{item.nomor}</TableTd>
<TableTd>
<Text fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
<Box w={100}>
<Text truncate="end" lineClamp={1} fz={"sm"}>{item.name}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={100}>
<Text truncate="end" lineClamp={1} fz={"sm"}>{item.nomor}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={100}>
<Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</Box>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}>
@@ -86,6 +98,15 @@ function ListPosyandu({ search }: { search: string }) {
</Table>
</Box>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
total={totalPages}
mt="md"
mb="md"
/>
</Center>
</Box>
);
}