Fix QC Kak Inno & Kak Ayu Tanggal 15 Oct

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/page.tsx

@@ -141,7 +141,7 @@ function Page() {
                   <Box>
                     <Flex gap={{ base: 0, md: 5 }} align={'center'}>
                       <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian</Text>
-                      <ColorSwatch color="#EF3E3E" size={30} />
+                      <ColorSwatch  color="#EF3E3E" size={30} />
                     </Flex>
                   </Box>
                   <Box>

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

@@ -101,27 +101,42 @@ function Page() {
                 }}
               >
                 <Stack align="center" gap="sm">
-                  <Image
-                    src={v.image.link}
-                    alt={v.name}
-                    w={140}
-                    h={140}
-                    fit="contain"
-                    radius="md"
-                    loading="lazy"
-                  />
+                  <Box
+                    style={{
+                      width: '100%',
+                      aspectRatio: '16/9',
+                      borderRadius: '12px',
+                      overflow: 'hidden',
+                      position: 'relative',
+                    }}
+                  >
+                    <Image
+                      src={v.image.link}
+                      alt={v.name}
+                      fit="cover"
+                      loading="lazy"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        transition: 'transform 0.4s ease',
+                      }}
+                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                    />
+                  </Box>
+
                   <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
                     {v.name}
                   </Text>
                   <Text fz="sm" c="dimmed" ta="center" lineClamp={3}>
                     <span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Text>
-                  <Button 
-                    variant="light" 
-                    leftSection={<IconBrandWhatsapp size={18} />} 
-                    component="a" 
-                    href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`} 
-                    target="_blank" 
+                  <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>

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

@@ -2,7 +2,6 @@
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat'
 import colors from '@/con/colors'
 import {
-  Badge,
   Box,
   Center,
   Grid,
@@ -106,15 +105,30 @@ function Page() {
               >
                 <Stack align="center" gap="md">
                   <Center>
-                    <Image
-                      src={v.image.link}
-                      alt={v.name}
-                      h={180}
-                      w="100%"
-                      radius="md"
-                      fit="cover"
-                      style={{ aspectRatio: '4/3' }}
-                    />
+                    <Box
+                      style={{
+                        width: '100%',
+                        aspectRatio: '16/9',
+                        borderRadius: '12px',
+                        overflow: 'hidden',
+                        position: 'relative',
+                      }}
+                    >
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        fit="cover"
+                        loading="lazy"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          transition: 'transform 0.4s ease',
+                        }}
+                        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                      />
+                    </Box>
+
                   </Center>
                   <Stack gap={4} w="100%">
                     <Text
@@ -136,9 +150,6 @@ function Page() {
                       />
                     </Box>
                   </Stack>
-                  <Badge radius="md" color="blue" variant="light" mt="sm">
-                    Darurat
-                  </Badge>
                 </Stack>
               </Paper>
             ))}
@@ -160,7 +171,7 @@ function Page() {
               '&:hover': { backgroundColor: colors['blue-button'], color: 'white' },
             },
           }}
-          
+
         />
       </Center>
 

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

@@ -7,16 +7,18 @@ import { IconCalendar, IconInfoCircle, IconPhone, IconSearch } from "@tabler/ico
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
 import BackButton from "../../desa/layanan/_com/BackButto";
+import { useDebouncedValue } from "@mantine/hooks";
 
 export default function Page() {
   const state = useProxy(posyandustate);
   const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
 
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 6, search);
-  }, [page, search]);
+    load(page, 6, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   if (loading || !data) {
     return (