QC User & Admin Responsive : Menu Kesehatan - Ekonomi

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -56,7 +56,7 @@ function Page() {
           <GridCol span={{ base: 12, md: 3 }}>
             <TextInput
               radius={"lg"}
-              placeholder='Cari Puskesmas'
+              placeholder='Cari Keamanan Lingkungan'
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               leftSection={<IconSearch size={20} />}

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

@@ -34,6 +34,52 @@ function Page() {
     );
   }
 
+  if (data.length === 0) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
+          <Box>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Kontak Darurat
+            </Text>
+            <Text fz={{ base: "h4", md: "h3" }} >
+              Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
+            </Text>
+          </Box>
+          <TextInput
+            placeholder='Cari kontak darurat, nama, atau nomor...'
+            leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </Group>
+        <Box px={{ base: "md", md: 100 }}>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+              <Flex justify={'center'} gap={'lg'} align={'center'}>
+                <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                  <IconPhoneCall size={30} color={colors["blue-button"]} />
+                </Avatar>
+                <Box>
+                  <Text ta={'center'} c={colors['blue-button']} py={10} fz={{ base: "md", md: "h4" }} fw={"bold"} >
+                    Nomor Darurat Utama
+                  </Text>
+                  <Text ta={'center'} fw={"bold"} fz={'h2'} c={colors["blue-button"]}>112</Text>
+                </Box>
+              </Flex>
+            </Paper>
+          </Stack>
+        </Box>
+        <Center>
+          <Text fz={"h1"} c={colors["blue-button"]} fw={"bold"}>Tidak ada kontak darurat yang ditemukan</Text>
+        </Center>
+      </Stack>
+    );
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -76,57 +122,63 @@ function Page() {
         <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
           {/* Layanan Darurat */}
           {data.map((item) => (
-            <Paper
+            <a
               key={item.id}
-              p="lg"
-              radius="md"
-              bg={colors['white-trans-1']}
+              href={`tel:${item.kontakItems[0]?.kontakItem?.nomorTelepon || '112'}`}
+              style={{ textDecoration: 'none' }}
             >
-              <Group pb="md" align="center">
-                <Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
-                  {item.icon && (
-                    <IconMapper
-                      name={item.icon as IconKey}
-                      size={32}
-                      color={colors['blue-button']}
-                    />
-                  )}
-                </Avatar>
-                <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
-                  {item.nama}
-                </Text>
-              </Group>
+              <Paper
 
-              {/* Kontak Items */}
-              {item.kontakItems?.map((kontak) => (
-                <Paper
-                  key={kontak.id}
-                  p="lg"
-                  bg={colors['BG-trans']}
-                  radius="md"
-                  shadow="xs"
-                  mt="sm"
-                >
-                  <Group align="center" justify="space-between">
-                    <Group align="center">
-                      {kontak.kontakItem?.icon && (
-                        <IconMapper
-                          name={kontak.kontakItem.icon as IconKey}
-                          size={24}
-                          color={colors['blue-button']}
-                        />
-                      )}
+                p="lg"
+                radius="md"
+                bg={colors['white-trans-1']}
+              >
+                <Group pb="md" align="center">
+                  <Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
+                    {item.icon && (
+                      <IconMapper
+                        name={item.icon as IconKey}
+                        size={32}
+                        color={colors['blue-button']}
+                      />
+                    )}
+                  </Avatar>
+                  <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                    {item.nama}
+                  </Text>
+                </Group>
+
+                {/* Kontak Items */}
+                {item.kontakItems?.map((kontak) => (
+                  <Paper
+                    key={kontak.id}
+                    p="lg"
+                    bg={colors['BG-trans']}
+                    radius="md"
+                    shadow="xs"
+                    mt="sm"
+                  >
+                    <Group align="center" justify="space-between">
+                      <Group align="center">
+                        {kontak.kontakItem?.icon && (
+                          <IconMapper
+                            name={kontak.kontakItem.icon as IconKey}
+                            size={24}
+                            color={colors['blue-button']}
+                          />
+                        )}
+                        <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
+                          {kontak.kontakItem?.nama}
+                        </Text>
+                      </Group>
                       <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
-                        {kontak.kontakItem?.nama}
+                        {kontak.kontakItem?.nomorTelepon}
                       </Text>
                     </Group>
-                    <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
-                      {kontak.kontakItem?.nomorTelepon}
-                    </Text>
-                  </Group>
-                </Paper>
-              ))}
-            </Paper>
+                  </Paper>
+                ))}
+              </Paper>
+            </a>
           ))}
         </SimpleGrid>
         <Center>

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -2,7 +2,7 @@
 'use client'
 import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Center, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
@@ -63,7 +63,7 @@ function Page() {
           <Stack pt={30} gap="lg">
             {data.length > 0 ? (
               data.map((item) => (
-                <ActionIcon key={item.id} variant='transparent' onClick={() => router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`)}>
+                <a key={item.id} href={`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`}>
                   <Paper p="md" bg={colors['blue-button']} radius="md" shadow="sm">
                     <Stack gap={"xs"}>
                       <Text fz="h3" c={colors['white-1']}>
@@ -71,7 +71,7 @@ function Page() {
                       </Text>
                     </Stack>
                   </Paper>
-                </ActionIcon>
+                </a>
               ))
             ) : (
               <Text color="dimmed">

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx

@@ -20,10 +20,41 @@ function Page() {
   } = state;
 
   useEffect(() => {
-    if (!data && !loading) {
-      load();
-    }
-  }, [data, loading]);
+    load();
+  }, []);
+
+  // kalau masih loading
+  if (loading) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    );
+  }
+
+  // kalau data kosong
+  if (!data) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+         <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box pb={10} px={{ base: 20, md: 100 }}>
+        <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kantor Polisi Terdekat
+        </Text>
+        <Text pb={15} fz={'h4'} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
+        </Text>
+      </Box>
+      <Center py="xl">
+        <Text fz="lg" fw="bold" c="red">
+          Data Polsek tidak ada
+        </Text>
+      </Center>
+      </Stack >
+    );
+  }
 
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx

@@ -8,10 +8,12 @@ import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../../desa/layanan/_com/BackButto';
 import { useRouter } from 'next/navigation';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Page() {
   const state = useProxy(polsekTerdekatState);
   const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const router = useRouter()
 
   const {
@@ -23,8 +25,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search)
-  }, [page, search])
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (