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

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

@@ -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>

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx

@@ -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" />

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

@@ -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>

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -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>
   );
 }