Fix Menu Desa Admin & User

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

@@ -1,7 +1,7 @@
 'use client'
 import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
-import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
@@ -11,6 +11,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const state = useProxy(keamananLingkunganState)
+    const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
   const [search, setSearch] = useState('')
   const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
@@ -25,6 +26,13 @@ function Page() {
     load(page, 3, debouncedSearch)
   }, [page, debouncedSearch])
 
+  const toggleExpanded = (index: number, value: boolean) => {
+    setExpandedMap((prev) => ({
+      ...prev,
+      [index]: value,
+    }));
+  };
+
   if (loading || !data) {
     return (
       <Box py={10}>
@@ -80,7 +88,22 @@ function Page() {
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
                           {v.name}
                         </Text>
-                        <Text pb={10} fz={"h4"} ta={'justify'} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                        <Spoiler
+                          showLabel={
+                            <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                              Show more
+                            </Text>
+                          }
+                          hideLabel={
+                            <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                              Hide details
+                            </Text>
+                          }
+                          expanded={expandedMap[k] || false}
+                          onExpandedChange={(val) => toggleExpanded(k, val)}
+                        >
+                          <Text pb={10} fz={"h4"} ta={'justify'} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                        </Spoiler>
                       </Box>
                     </Box>
                   </Stack>
@@ -89,7 +112,7 @@ function Page() {
             })}
           </SimpleGrid>
         </Stack>
-      </Box>  
+      </Box>
       <Center>
         <Pagination
           value={page}

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 { Box, Button, Center, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { ActionIcon, 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,16 +63,15 @@ function Page() {
           <Stack pt={30} gap="lg">
             {data.length > 0 ? (
               data.map((item) => (
-                <Paper key={item.id} p="md" bg={colors['blue-button']} radius="md" shadow="sm" onClick={() => router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`)}>
-                  <Stack gap={"xs"}>
-                    <Flex align="center" justify="space-between">
+                <ActionIcon key={item.id} variant='transparent' onClick={() => router.push(`/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']}>
                         {item.judul}
                       </Text>
-                      <IconArrowRight size={28} color={colors['white-1']} />
-                    </Flex>
-                  </Stack>
-                </Paper>
+                    </Stack>
+                  </Paper>
+                </ActionIcon>
               ))
             ) : (
               <Text color="dimmed">