Sinkronisasi UI & API Admin - User Submenu Penanganan Darurat, User Submenu Kontak Darurat & User Submenu Info Wabah / Penyakit

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

@@ -1,72 +1,59 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-react';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
+import { useShallowEffect } from '@mantine/hooks';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
+import { IconSearch } from '@tabler/icons-react';
 
 function Page() {
+  const state = useProxy(kontakDarurat)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   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" }} >
-        Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Penanganan Darurat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Penanganan Darurat'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
@@ -75,20 +62,26 @@ function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center py={40}>
-                      {v.icon}
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        w={200}
+                        h={200}
+                        fit='contain'
+                      />
                     </Center>
                     <Box px={'lg'}>
                       <Box pb={20}>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                         </Text>
                         <Box px={10}>
-                        {v.deskripsi}
+                          <Text fz={"h4"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                         </Box>
                       </Box>
                     </Box>
@@ -99,6 +92,15 @@ function Page() {
           </SimpleGrid>
         </Stack>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Stack>
   );
 }