From 1e154ced8699d34957a797c88c9f373d254c3aae Mon Sep 17 00:00:00 2001 From: nico Date: Mon, 18 Aug 2025 17:14:33 +0800 Subject: [PATCH] Sinkronisasi UI & API Admin - User Submenu Program Kesehatan --- .../program-kesehatan/programKesehatan.ts | 161 +++++++++------ .../_state/kesehatan/puskesmas/puskesmas.ts | 45 ++++- .../kesehatan/program-kesehatan/page.tsx | 39 ++-- .../(dashboard)/kesehatan/puskesmas/page.tsx | 109 +++++----- .../kesehatan/program-kesehatan/find-many.ts | 77 ++++--- .../_lib/kesehatan/puskesmas/find-many.ts | 82 +++++--- src/app/darmasaba/(pages)/kesehatan/page.tsx | 7 - .../kesehatan/program-kesehatan/[id]/page.tsx | 66 ++++++ .../kesehatan/program-kesehatan/page.tsx | 108 ++++++---- .../(pages)/kesehatan/puskesmas/[id]/page.tsx | 114 +++++++++++ .../(pages)/kesehatan/puskesmas/page.tsx | 188 ++++++++---------- 11 files changed, 665 insertions(+), 331 deletions(-) delete mode 100644 src/app/darmasaba/(pages)/kesehatan/page.tsx create mode 100644 src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx create mode 100644 src/app/darmasaba/(pages)/kesehatan/puskesmas/[id]/page.tsx diff --git a/src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts b/src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts index 47676d85..911b31b3 100644 --- a/src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts +++ b/src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts @@ -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"; @@ -20,17 +21,43 @@ const defaultForm = { const programKesehatan = proxy({ findMany: { - data: [] as Prisma.ProgramKesehatanGetPayload<{ - include: { - image: true; - }; - }>[], - async load() { - const res = await ApiFetch.api.kesehatan.programkesehatan[ - "find-many" - ].get(); - if (res.status === 200) { - programKesehatan.findMany.data = res.data?.data ?? []; + data: null as + | Prisma.ProgramKesehatanGetPayload<{ + include: { + image: true; + }; + }>[] + | null, + page: 1, + totalPages: 1, + loading: false, + search: "", + load: async (page = 1, limit = 10, search = "") => { + programKesehatan.findMany.loading = true; // ✅ Akses langsung via nama path + programKesehatan.findMany.page = page; + programKesehatan.findMany.search = search; + + try { + const query: any = { page, limit }; + if (search) query.search = search; + + const res = await ApiFetch.api.kesehatan.programkesehatan[ + "find-many" + ].get({ query }); + + if (res.status === 200 && res.data?.success) { + programKesehatan.findMany.data = res.data.data ?? []; + programKesehatan.findMany.totalPages = res.data.totalPages ?? 1; + } else { + programKesehatan.findMany.data = []; + programKesehatan.findMany.totalPages = 1; + } + } catch (err) { + console.error("Gagal fetch berita paginated:", err); + programKesehatan.findMany.data = []; + programKesehatan.findMany.totalPages = 1; + } finally { + programKesehatan.findMany.loading = false; } }, }, @@ -97,12 +124,15 @@ const programKesehatan = proxy({ try { programKesehatan.delete.loading = true; - const response = await fetch(`/api/kesehatan/programkesehatan/del/${id}`, { - method: "DELETE", - headers: { - "Content-Type": "application/json", - }, - }); + const response = await fetch( + `/api/kesehatan/programkesehatan/del/${id}`, + { + method: "DELETE", + headers: { + "Content-Type": "application/json", + }, + } + ); const result = await response.json(); if (response.ok && result?.success) { @@ -156,57 +186,70 @@ const programKesehatan = proxy({ } } catch (error) { console.error("Error fetching program kesehatan:", error); - toast.error(error instanceof Error ? error.message : "Gagal memuat data"); + toast.error( + error instanceof Error ? error.message : "Gagal memuat data" + ); return null; } }, async update() { - const cek = templateForm.safeParse(programKesehatan.edit.form); - if (!cek.success) { - const err = `[${cek.error.issues - .map((v) => `${v.path.join(".")}`) - .join("\n")}] required`; - return toast.error(err); - } + const cek = templateForm.safeParse(programKesehatan.edit.form); + if (!cek.success) { + const err = `[${cek.error.issues + .map((v) => `${v.path.join(".")}`) + .join("\n")}] required`; + return toast.error(err); + } - try { - programKesehatan.edit.loading = true; - const response = await fetch(`/api/kesehatan/programkesehatan/${this.id}`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - name: this.form.name, - deskripsiSingkat: this.form.deskripsiSingkat, - deskripsi: this.form.deskripsi, - imageId: this.form.imageId, - }), - }); - if (!response.ok) { - const errorData = await response.json().catch(() => ({})); - throw new Error(errorData.message || `HTTP error! status: ${response.status}`); - } - const result = await response.json(); - if (result.success) { - toast.success(result.message || "Program kesehatan berhasil diupdate"); - await programKesehatan.findMany.load(); - return true; - } else { - throw new Error(result.message || "Gagal update program kesehatan"); - } - } catch (error) { - console.error("Gagal update:", error); - toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate program kesehatan"); - return false; - } finally { - programKesehatan.edit.loading = false; + try { + programKesehatan.edit.loading = true; + const response = await fetch( + `/api/kesehatan/programkesehatan/${this.id}`, + { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + name: this.form.name, + deskripsiSingkat: this.form.deskripsiSingkat, + deskripsi: this.form.deskripsi, + imageId: this.form.imageId, + }), + } + ); + if (!response.ok) { + const errorData = await response.json().catch(() => ({})); + throw new Error( + errorData.message || `HTTP error! status: ${response.status}` + ); } + const result = await response.json(); + if (result.success) { + toast.success( + result.message || "Program kesehatan berhasil diupdate" + ); + await programKesehatan.findMany.load(); + return true; + } else { + throw new Error(result.message || "Gagal update program kesehatan"); + } + } catch (error) { + console.error("Gagal update:", error); + toast.error( + error instanceof Error + ? error.message + : "Terjadi kesalahan saat mengupdate program kesehatan" + ); + return false; + } finally { + programKesehatan.edit.loading = false; + } }, reset() { - programKesehatan.edit.id = ""; - programKesehatan.edit.form = { ...defaultForm }; + programKesehatan.edit.id = ""; + programKesehatan.edit.form = { ...defaultForm }; }, }, }); diff --git a/src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts b/src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts index 040d3f17..dcd19dca 100644 --- a/src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts +++ b/src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts @@ -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"; @@ -163,13 +164,43 @@ const puskesmasState = proxy({ }, findMany: { - data: null as Prisma.PuskesmasGetPayload<{ - include: { image: true; jam: true; kontak: true }; - }>[] | null, - async load() { - const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get(); - if (res.status === 200) { - puskesmasState.findMany.data = res.data?.data ?? []; + data: null as + | Prisma.PuskesmasGetPayload<{ + include: { + image: true; + jam: true; + kontak: true; + }; + }>[] + | null, + page: 1, + totalPages: 1, + loading: false, + search: "", + load: async (page = 1, limit = 10, search = "") => { + puskesmasState.findMany.loading = true; // ✅ Akses langsung via nama path + puskesmasState.findMany.page = page; + puskesmasState.findMany.search = search; + + try { + const query: any = { page, limit }; + if (search) query.search = search; + + const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get({ query }); + + if (res.status === 200 && res.data?.success) { + puskesmasState.findMany.data = res.data.data ?? []; + puskesmasState.findMany.totalPages = res.data.totalPages ?? 1; + } else { + puskesmasState.findMany.data = []; + puskesmasState.findMany.totalPages = 1; + } + } catch (err) { + console.error("Gagal fetch berita paginated:", err); + puskesmasState.findMany.data = []; + puskesmasState.findMany.totalPages = 1; + } finally { + puskesmasState.findMany.loading = false; } }, }, diff --git a/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx b/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx index d742ebd4..c0afd018 100644 --- a/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx @@ -1,6 +1,6 @@ 'use client' import colors from '@/con/colors'; -import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; +import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core'; import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; import JudulList from '../../_com/judulList'; import HeaderSearch from '../../_com/header'; @@ -21,7 +21,7 @@ function ProgramKesehatan() { value={search} onChange={(e) => setSearch(e.currentTarget.value)} /> - + ); } @@ -30,19 +30,21 @@ function ListProgramKesehatan({ search }: { search: string }) { const programKesehatanState = useProxy(programKesehatan) const router = useRouter() + const { + data, + page, + totalPages, + loading, + load, + } = programKesehatanState.findMany; + useShallowEffect(() => { - programKesehatanState.findMany.load() - }, []) + load(page, 3, search) + }, [page, search]) - const filteredData = (programKesehatanState.findMany.data || []).filter(item => { - const keyword = search.toLowerCase(); - return ( - item.name.toLowerCase().includes(keyword) || - item.deskripsiSingkat.toLowerCase().includes(keyword) - ); - }); + const filteredData = data || [] - if (!programKesehatanState.findMany.data) { + if (loading || !data) { return ( @@ -77,7 +79,9 @@ function ListProgramKesehatan({ search }: { search: string }) { - + + + image @@ -94,6 +98,15 @@ function ListProgramKesehatan({ search }: { search: string }) { +
+ load(newPage)} // ini penting! + total={totalPages} + mt="md" + mb="md" + /> +
) } diff --git a/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx b/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx index 34aba732..5e8a33e7 100644 --- a/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx +++ b/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx @@ -1,6 +1,6 @@ 'use client' import colors from '@/con/colors'; -import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core'; +import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core'; import { useShallowEffect } from '@mantine/hooks'; import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react'; import { useRouter } from 'next/navigation'; @@ -21,7 +21,7 @@ function Puskesmas() { value={search} onChange={(e) => setSearch(e.currentTarget.value)} /> - + ); } @@ -30,64 +30,75 @@ function ListPuskesmas({ search }: { search: string }) { const statePuskesmas = useProxy(puskesmasState) const router = useRouter(); + const { + data, + page, + totalPages, + loading, + load, + } = statePuskesmas.findMany; + useShallowEffect(() => { - statePuskesmas.findMany.load() - }, []) + load(page, 3, search) + }, [page, search]) - const filteredData = (statePuskesmas.findMany.data || []).filter(item => { - const keyword = search.toLowerCase(); - return ( - item.name.toLowerCase().includes(keyword) || - item.alamat.toLowerCase().includes(keyword) - ); - }); + const filteredData = data || [] - if (!statePuskesmas.findMany.data) { + if (loading || !data) { return ( - + ) } return ( - - - - - - - - Nama Puskesmas - Alamat - Image - Detail - - - - {filteredData.map((item) => ( - - {item.name} - {item.alamat} - - - - - - + + + + +
+ + + Nama Puskesmas + Alamat + Image + Detail - ))} - -
- - - - + + + {filteredData.map((item) => ( + + {item.name} + {item.alamat} + + image + + + + + + ))} + + + + + +
+ load(newPage)} // ini penting! + total={totalPages} + mt="md" + mb="md" + /> +
+ ) } diff --git a/src/app/api/[[...slugs]]/_lib/kesehatan/program-kesehatan/find-many.ts b/src/app/api/[[...slugs]]/_lib/kesehatan/program-kesehatan/find-many.ts index d3f8c003..7ffcc0ff 100644 --- a/src/app/api/[[...slugs]]/_lib/kesehatan/program-kesehatan/find-many.ts +++ b/src/app/api/[[...slugs]]/_lib/kesehatan/program-kesehatan/find-many.ts @@ -1,25 +1,56 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +// /api/berita/findManyPaginated.ts import prisma from "@/lib/prisma"; +import { Context } from "elysia"; -export default async function programKesehatanFindMany() { - try { - const data = await prisma.programKesehatan.findMany({ - where: { - isActive: true, - }, - include: { - image: true, - } - }) - return { - success: true, - message: "Success fetch program kesehatan", - data, - } - } catch (error) { - console.error("Find many error:", error); - return { - success: false, - message: "Failed fetch program kesehatan", - } - } -} \ No newline at end of file +async function programKesehatanFindMany(context: Context) { + // Ambil parameter dari query + const page = Number(context.query.page) || 1; + const limit = Number(context.query.limit) || 10; + const search = (context.query.search as string) || ''; + const skip = (page - 1) * limit; + + // Buat where clause + const where: any = { isActive: true }; + + // Tambahkan pencarian (jika ada) + if (search) { + where.OR = [ + { name: { contains: search, mode: 'insensitive' } } + ]; + } + + try { + // Ambil data dan total count secara paralel + const [data, total] = await Promise.all([ + prisma.programKesehatan.findMany({ + where, + include: { + image: true, + }, + skip, + take: limit, + orderBy: { createdAt: 'desc' }, + }), + prisma.programKesehatan.count({ where }), + ]); + + return { + success: true, + message: "Berhasil ambil program kesehatan dengan pagination", + data, + page, + limit, + total, + totalPages: Math.ceil(total / limit), + }; + } catch (e) { + console.error("Error di findMany paginated:", e); + return { + success: false, + message: "Gagal mengambil data program kesehatan", + }; + } +} + +export default programKesehatanFindMany; \ No newline at end of file diff --git a/src/app/api/[[...slugs]]/_lib/kesehatan/puskesmas/find-many.ts b/src/app/api/[[...slugs]]/_lib/kesehatan/puskesmas/find-many.ts index d485d94d..5ee211c5 100644 --- a/src/app/api/[[...slugs]]/_lib/kesehatan/puskesmas/find-many.ts +++ b/src/app/api/[[...slugs]]/_lib/kesehatan/puskesmas/find-many.ts @@ -1,27 +1,59 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +// /api/berita/findManyPaginated.ts import prisma from "@/lib/prisma"; +import { Context } from "elysia"; -export default async function puskesmasFindMany() { - try { - const data = await prisma.puskesmas.findMany({ - where: { - isActive: true, - }, - include: { - image: true, - jam: true, - kontak: true, - } - }) - return { - success: true, - message: "Success fetch puskesmas", - data, - } - } catch (error) { - console.error("Find many error:", error); - return { - success: false, - message: "Failed fetch puskesmas", - } - } -} \ No newline at end of file +async function puskesmasFindMany(context: Context) { + // Ambil parameter dari query + const page = Number(context.query.page) || 1; + const limit = Number(context.query.limit) || 10; + const search = (context.query.search as string) || ''; + const skip = (page - 1) * limit; + + // Buat where clause + const where: any = { isActive: true }; + + // Tambahkan pencarian (jika ada) + if (search) { + where.OR = [ + { name: { contains: search, mode: 'insensitive' } }, + { alamat: { contains: search, mode: 'insensitive' } }, + ]; + } + + try { + // Ambil data dan total count secara paralel + const [data, total] = await Promise.all([ + prisma.puskesmas.findMany({ + where, + include: { + image: true, + jam: true, + kontak: true, + }, + skip, + take: limit, + orderBy: { createdAt: 'desc' }, + }), + prisma.puskesmas.count({ where }), + ]); + + return { + success: true, + message: "Berhasil ambil puskesmas dengan pagination", + data, + page, + limit, + total, + totalPages: Math.ceil(total / limit), + }; + } catch (e) { + console.error("Error di findMany paginated:", e); + return { + success: false, + message: "Gagal mengambil data berita", + }; + } +} + +export default puskesmasFindMany; \ No newline at end of file diff --git a/src/app/darmasaba/(pages)/kesehatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/page.tsx deleted file mode 100644 index 49ec7656..00000000 --- a/src/app/darmasaba/(pages)/kesehatan/page.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { Stack } from "@mantine/core"; - -export default function Page() { - return - kesehatan - -} \ No newline at end of file diff --git a/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx new file mode 100644 index 00000000..7d11da57 --- /dev/null +++ b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx @@ -0,0 +1,66 @@ +'use client' +import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan'; +import colors from '@/con/colors'; +import { Box, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'; +import { useShallowEffect } from '@mantine/hooks'; +import { IconCalendar, IconUser } from '@tabler/icons-react'; +import { useParams } from 'next/navigation'; +import { useProxy } from 'valtio/utils'; +import BackButton from '../../../desa/layanan/_com/BackButto'; + +function Page() { + const state = useProxy(programKesehatan) + const params = useParams() + + useShallowEffect(() => { + state.findUnique.load(params.id as string) + }, [params.id]) + + if (!state.findUnique.data) { + return ( +
+ +
+ ) + } + return ( + + + + + + +
+ +
+ + + + {state.findUnique.data.name} + + + + + + + + {state.findUnique.data.createdAt ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', { + day: 'numeric', + month: 'long', + year: 'numeric', + }) : 'No date available'} + + + + + Admin Desa + + + + + + + ); +} + +export default Page; diff --git a/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx index 100142c3..637cdedc 100644 --- a/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx @@ -1,28 +1,14 @@ +'use client' import colors from "@/con/colors"; -import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core"; -import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react"; +import { Box, Button, Center, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core"; +import { IconBarbell, IconCalendar, IconOld, IconSearch, IconUser, IconUsersGroup } from "@tabler/icons-react"; 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 { useRouter } from "next/navigation"; -const data1 = [ - { - id: 1, - judul: 'Posyandu Terintegrasi', - image: '/api/img/pk-1.png', - deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan' - }, - { - id: 2, - judul: 'Senam Lansia', - image: '/api/img/pk-2.png', - deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.' - }, - { - id: 3, - judul: 'Vaksinasi & Sterilasi HPR', - image: '/api/img/pk-3.png', - deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.' - } -] const data2 = [ { id: 1, @@ -44,21 +30,49 @@ const data2 = [ }, ] export default function Page() { + const state = useProxy(programKesehatan) + const router = useRouter() + const [search, setSearch] = useState('') + const { + data, + page, + totalPages, + loading, + load, + } = state.findMany; + + useShallowEffect(() => { + load(page, 3, search) + }, [page, search]) + + if (loading || !data) { + return ( + + + + ) + } return ( - - - Program Kesehatan Unggulan - - - Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas - hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif - warga. - - + + + + Program Kesehatan Unggulan + + + + setSearch(e.target.value)} + leftSection={} + w={{ base: "50%", md: "100%" }} + /> + + - {data1.map((v, k) => { + {data.map((v, k) => { return (
- +
- {v.judul} + {v.name} - {v.deskripsi} + - + router.push(`/darmasaba/kesehatan/program-kesehatan/${v.id}`)}> - Selasa, 11 Januari 2025 + + {v.createdAt ? new Date(v.createdAt).toLocaleDateString('id-ID', { + day: 'numeric', + month: 'long', + year: 'numeric', + }) : 'No date available'} + @@ -100,6 +120,15 @@ export default function Page() { ) })} +
+ load(newPage)} // ini penting! + total={totalPages} + mt="md" + mb="md" + /> +
@@ -141,6 +170,5 @@ export default function Page() { - ) -} \ No newline at end of file +} diff --git a/src/app/darmasaba/(pages)/kesehatan/puskesmas/[id]/page.tsx b/src/app/darmasaba/(pages)/kesehatan/puskesmas/[id]/page.tsx new file mode 100644 index 00000000..4086e11d --- /dev/null +++ b/src/app/darmasaba/(pages)/kesehatan/puskesmas/[id]/page.tsx @@ -0,0 +1,114 @@ +'use client' +import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas'; +import colors from '@/con/colors'; +import { BackgroundImage, Box, Grid, GridCol, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core'; +import { useShallowEffect } from '@mantine/hooks'; +import { useParams } from 'next/navigation'; +import { useProxy } from 'valtio/utils'; +import BackButton from '../../../desa/layanan/_com/BackButto'; + +function Page() { + const state = useProxy(puskesmasState) + const params = useParams() + + useShallowEffect(() => { + state.findUnique.load(params.id as string) + }, []) + + if (!state.findUnique.data) { + return ( + + + + ) + } + return ( + + + + + + + + + + + {state.findUnique.data.name} + {state.findUnique.data.alamat} + + + + + + Informasi + + Alamat: {state.findUnique.data.alamat} + Telepon: {state.findUnique.data.kontak.kontakPuskesmas} + Email: {state.findUnique.data.kontak.email} + + Jam Operasional + + + Senin - Kamis: {state.findUnique.data?.jam.workDays} - {state.findUnique.data?.jam.weekDays} + + + + + + + + + + + Poliklinik Umum + 26 + + + Poli Gigi + 26 + + + + + + + + + + + + + + + ); +} + +export default Page; diff --git a/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx b/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx index 8b7cf02c..93b34e75 100644 --- a/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx +++ b/src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx @@ -1,125 +1,97 @@ +'use client' +import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas'; import colors from '@/con/colors'; -import { Stack, Box, Paper, Text, BackgroundImage, SimpleGrid, Title, Flex } from '@mantine/core'; -import React from 'react'; +import { Anchor, Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core'; +import { useShallowEffect } from '@mantine/hooks'; +import { IconSearch } from '@tabler/icons-react'; +import { useState } from 'react'; +import { useProxy } from 'valtio/utils'; import BackButton from '../../desa/layanan/_com/BackButto'; + function Page() { + const state = useProxy(puskesmasState) + const [search, setSearch] = useState('') + + const { + data, + page, + totalPages, + loading, + load, + } = state.findMany; + + useShallowEffect(() => { + load(page, 3, search) + }, [page, search]) + + if (loading || !data) { + return ( + + + + ) + } + return ( - - Puskesmas Darmasaba - + + + + Puskesmas Darmasaba + + + + setSearch(e.target.value)} + leftSection={} + w={{ base: "50%", md: "100%" }} + /> + + - - - - - - + {data.map((v, k) => { + return ( + + + {v.name} + {v.name} - Puskesmas Darmasaba - Jl. Raya Darmasaba No.45, Badung, Bali - - - - Jam Operasional - - - - Senin - Kamis - Jumat - Sabtu - Minggu & Libur - - - 08:00 - 15:00 WITA - 08:00 - 15:00 WITA - 08:00 - 15:00 WITA - Tutp (UGD 24 JAM) - - - - + Alamat: {v.alamat} + Telepon: {v.kontak.kontakPuskesmas} + Email: {v.kontak.email} - - - Jam Operasional - - - - Senin - Kamis - Jumat - Sabtu - Minggu & Libur - - - 08:00 - 15:00 WITA - 08:00 - 15:00 WITA - 08:00 - 15:00 WITA - Tutp (UGD 24 JAM) - - - - - - - - - - - - - - - Poliklinik Umum - 26 - - - Poli Gigi - 26 - - - - - - - + Lihat Detail > + + + ) + })} + +
+ load(newPage)} // ini penting! + total={totalPages} + mt="md" + mb="md" + /> +
); }