QC User & Admin Responsive : Menu Kesehatan - Ekonomi

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -0,0 +1,85 @@
+'use client'
+import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+function DetailInfoWabahPenyakitUser() {
+  const state = useProxy(infoWabahPenyakit);
+  const router = useRouter();
+  const params = useParams();
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={400} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w="100%"
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="lg">
+          {/* Judul */}
+          <Text fz="xl" fw="bold" c={colors['blue-button']} ta="center">
+            {data.name || 'Kontak Darurat'}
+          </Text>
+
+          {/* Gambar */}
+          {data.image?.link && (
+            <Image
+              src={data.image.link}
+              alt={data.name}
+              radius="md"
+              maw={400}
+              mx="auto"
+              loading="lazy"
+            />
+          )}
+
+          {/* Deskripsi */}
+          <Box>
+            <Text fz="lg" fw="bold">Deskripsi</Text>
+            <Text
+              fz="md"
+              c="dimmed"
+              dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
+              style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+            />
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailInfoWabahPenyakitUser;

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx

@@ -2,10 +2,14 @@
 import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import colors from '@/con/colors';
 import {
+  Badge,
   Box,
+  Button,
   Center,
+  Divider,
   Grid,
   GridCol,
+  Group,
   Image,
   Pagination,
   Paper,
@@ -13,27 +17,25 @@ import {
   Skeleton,
   Stack,
   Text,
-  TextInput,
-  Badge,
-  HoverCard,
-  Divider,
-  Group,
+  TextInput
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconSearch, IconInfoCircle } from '@tabler/icons-react';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconInfoCircle, IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useTransitionRouter } from 'next-view-transitions';
 
 function Page() {
   const state = useProxy(infoWabahPenyakit);
+  const router = useTransitionRouter();
   const [search, setSearch] = useState('');
-
+  const [debouncedSearch] = useDebouncedValue(search, 500)
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search);
-  }, [page, search]);
+    load(page, 3, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   if (loading || !data) {
     return (
@@ -125,28 +127,9 @@ function Page() {
                   <Text fz="sm" lh={1.5}>
                     {v.deskripsiSingkat}
                   </Text>
-                  <HoverCard shadow="md" position="bottom" radius="md" width={300}>
-                    <HoverCard.Target>
-                      <Text
-                        fz="sm"
-                        fw={500}
-                        c={colors['blue-button']}
-                        style={{ cursor: 'pointer' }}
-                      >
-                        Lihat detail lengkap
-                      </Text>
-                    </HoverCard.Target>
-                    <HoverCard.Dropdown>
-                      <Text
-                        fz="sm"
-                        lh={1.6}
-                        dangerouslySetInnerHTML={{
-                          __html: v.deskripsiLengkap,
-                        }}
-                        style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                      />
-                    </HoverCard.Dropdown>
-                  </HoverCard>
+                  <Button variant="light" radius="md" size="md" onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${v.id}`)}>
+                    Selengkapnya
+                  </Button>
                 </Stack>
               </Paper>
             ))}
@@ -154,17 +137,17 @@ function Page() {
         )}
       </Box>
 
-     
-        <Center>
-          <Pagination
-            value={page}
-            onChange={(newPage) => load(newPage)}
-            total={totalPages}
-            radius="xl"
-            size="md"
-            mt="lg"
-          />
-        </Center>
+
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          radius="xl"
+          size="md"
+          mt="lg"
+        />
+      </Center>
 
     </Stack>
   );