Fix Menu Lingkungan Darmasaba User

src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,85 +1,126 @@
+'use client'
+import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
+import { Badge, Box, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { Icon, IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDroplet, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent, IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-const data = [
-  {
-    id: 1,
-    icon: <IconLeaf size={100} color={colors['blue-button']} />,
-    title: 'Luas Lahan Hijau',
-    jumlah: '± 25 hektar',
-    deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
-  },
-  {
-    id: 2,
-    icon: <IconHome size={100} color={colors['blue-button']} />,
-    title: 'Jumlah Rumah Tangga',
-    jumlah: '± 1.500 rumah tangga',
-    deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
-  },
-  {
-    id: 3,
-    icon: <IconDroplet size={100} color={colors['blue-button']} />,
-    title: 'Jumlah Sungai dan Saluran Air',
-    jumlah: '± 3 Sungai Besar',
-    deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
-  },
-  {
-    id: 4,
-    icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
-    title: 'Program Penghijauan',
-    jumlah: '± 1000 Pohon',
-    deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
-  },
-  {
-    id: 5,
-    icon: <IconTrash size={100} color={colors['blue-button']} />,
-    title: 'Pengelolaan Sampah',
-    jumlah: '± 5 Bank Sampah',
-    deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
-  },
-]
 function Page() {
+  const state = useProxy(dataLingkunganDesaState.findMany)
+  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+
+  const {
+    data,
+    load,
+    page,
+    totalPages,
+  } = state
+
+  const iconMap: Record<string, Icon> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet
+
+  };
+
+  useShallowEffect(() => {
+    load(page, 6, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  if (state.loading || !data) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="28px">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Data Lingkungan Desa
+      <Box px={{ base: 'md', md: 100 }}>
+        <Group justify="space-between" align='center' mt="md">
+          <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+            Data Lingkungan Desa
+          </Text>
+          <TextInput
+            radius="xl"
+            w={'30%'}
+            placeholder="Cari Data Lingkungan Desa"
+            leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </Group>
+        <Text fz="lg" c={'black'}>
+          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper p={20} bg={colors['white-trans-1']}>
-                  <Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
-                    {v.title}
-                  </Text>
-                  <Box>
-                    {v.icon}
-                    <Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
-                      {v.jumlah}
-                    </Text>
-                  </Box>
-                  <Text fz={{ base: "lg", md: "xl" }} >
-                    {v.deskripsi}
-                  </Text>
-
-                </Paper>
-              </Box>
-            )
-          })}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          {data.map((item) => (
+            <Paper
+              key={item.id}
+              p="lg"
+              bg={colors['white-trans-2']}
+              radius="md"
+              shadow="xl"
+              style={{ transition: 'all 0.3s', '&:hover': { transform: 'translateY(-5px)', boxShadow: `0 0 20px ${colors['blue-button']}` } }}
+            >
+              <Stack align="center" gap="md">
+                <Tooltip label={item.name} position="top" withArrow>
+                  <Center>
+                    {iconMap[item.icon] ? (
+                      React.createElement(iconMap[item.icon], { 
+                        size: 55, 
+                        color: colors['blue-button'],
+                        style: { 
+                          transition: 'all 0.3s',
+                          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'
+                        }
+                      })
+                    ) : null}
+                  </Center>
+                </Tooltip>
+                <Text fw="bold" fz="xl" c={colors['blue-button']}>
+                ± {item.jumlah}
+                </Text>
+                <Text ta="center" fz="md" c={"black"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                <Badge variant="gradient" gradient={{ from: '#1C6EA4', to: '#69C0FF' }} size="sm">
+                  {item.name}
+                </Badge>
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
+        <Center mt="xl">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            color="blue"
+            radius="xl"
+          />
+        </Center>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx

@@ -1,93 +1,79 @@
 import colors from '@/con/colors';
-import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 const data = [
   {
     id: 1,
     title: 'Filosofi Tri Hita Karana',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Parahyangan: Hubungan manusia dengan Tuhan
-      </ListItem>
-      <ListItem>
-        Pawongan: Hubungan antar manusia
-      </ListItem>
-      <ListItem>
-        Palemahan: Hubungan manusia dengan alam
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Parahyangan: Hubungan manusia dengan Tuhan yang dijaga penuh kesadaran spiritual</ListItem>
+        <ListItem>Pawongan: Harmoni dan kerja sama antar manusia dalam masyarakat</ListItem>
+        <ListItem>Palemahan: Pelestarian lingkungan dan hubungan manusia dengan alam</ListItem>
+      </List>
+    ),
   },
   {
     id: 2,
     title: 'Bentuk Konservasi Berdasarkan Adat',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
-      </ListItem>
-      <ListItem>
-        Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
-      </ListItem>
-      <ListItem>
-        Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
-      </ListItem>
-      <ListItem>
-        Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
-      </ListItem>
-      <ListItem>
-        Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Pelestarian Hutan Adat seperti Alas Pala Sangeh dan Wana Kerthi</ListItem>
+        <ListItem>Subak: Sistem irigasi tradisional yang menekankan kebersamaan dan keberlanjutan</ListItem>
+        <ListItem>Hari Raya Tumpek Uduh: Perayaan untuk menghormati pohon dan tumbuhan</ListItem>
+        <ListItem>Perarem & Awig-Awig: Aturan adat untuk menjaga lingkungan dari kerusakan</ListItem>
+        <ListItem>Ritual penyucian alam seperti Melasti dan Piodalan Segara</ListItem>
+      </List>
+    ),
   },
   {
     id: 3,
     title: 'Nilai Konservasi Adat',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Menjaga keseimbangan ekosistem
-      </ListItem>
-      <ListItem>
-        Melestarikan spiritualitas lokal dan kesucian alam
-      </ListItem>
-      <ListItem>
-        Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
-      </ListItem>
-      <ListItem>
-        Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Menjaga keseimbangan ekosistem dan lingkungan hidup</ListItem>
+        <ListItem>Melestarikan spiritualitas lokal dan kesucian alam</ListItem>
+        <ListItem>Meningkatkan kesadaran kolektif untuk hidup selaras dengan alam</ListItem>
+        <ListItem>Menjamin keberlanjutan sumber daya alam untuk generasi mendatang</ListItem>
+      </List>
+    ),
   },
-]
+];
+
 function Page() {
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="24">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={20}>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+      <Box px={{ base: 'md', md: 100 }} pb={30}>
+        <Text ta="center" fz={{ base: '2xl', md: '3rem' }} c={colors['blue-button']} fw="bold">
           Konservasi Adat Bali
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>
-          Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
+        <Text px={20} ta="center" fz="lg" c="dimmed">
+          Pelestarian lingkungan di Bali yang berpijak pada kearifan lokal, menjaga harmoni antara alam, budaya, dan manusia.
         </Text>
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
-                  {v.listDeskripsi}
-                </Paper>
-              </Box>
-            )
-          })}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+          {data.map((item) => (
+            <Paper
+              key={item.id}
+              p="lg"
+              bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
+              style={{ borderRadius: 16, boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)' }}
+            >
+              <Stack gap="md" px={20}>
+                <Center>
+                  <Text fz="xl" fw="bold" c="black">
+                    {item.title}
+                  </Text>
+                </Center>
+                {item.listDeskripsi}
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
       </Box>
     </Stack>

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,63 +1,60 @@
+'use client'
+import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
+import { Box, Flex, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import dynamic from 'next/dynamic';
+
+// Dynamically import the map component to avoid SSR issues with Leaflet
+const LeafletMultiMarkerMap = dynamic(
+  () => import('@/app/admin/(dashboard)/_com/LeafletMultiMarkerMap'),
+  { ssr: false }
+);
 
-const data = [
-  {
-    id: 1,
-    icon: <IconRecycle size={50} color={colors['blue-button']} />,
-    deskripsi: '1. Pilah sampah sesuai jenisnya'
-  },
-  {
-    id: 2,
-    icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '2. Bawa sampah ke Bank Sampah'
-  },
-  {
-    id: 3,
-    icon: <IconScale size={50} color={colors["blue-button"]} />,
-    deskripsi: '3. Timbang sampah di Bank Sampah'
-  },
-  {
-    id: 4,
-    icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '4. Catat hasil timbangan di buku tabungan'
-  },
-  {
-    id: 5,
-    icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
-  },
-]
 
-const bankSampah = [
-  {
-    id: 1,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Sarana Gathi',
-    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-  {
-    id: 2,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah BALI WASTU LESTARI',
-    alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-  {
-    id: 3,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Jempiring Sari',
-    alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
-  },
-  {
-    id: 4,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Sarana Gathi',
-    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-]
 function Page() {
+  const state = useProxy(pengelolaanSampahState.pengelolaanSampah)
+  const state2 = useProxy(pengelolaanSampahState.keteranganSampah)
+
+  const {
+    data,
+    load
+  } = state.findMany
+
+  const {
+    data: data2,
+    load: load2
+  } = state2.findMany
+
+  useShallowEffect(() => {
+    load()
+    load2()
+  }, [])
+
+  const iconMap: Record<string, Icon> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+  };
+
+  if (state.findMany.loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -84,10 +81,10 @@ function Page() {
               <Box key={k} px={28}>
                 <Paper p={20} bg={colors['white-trans-1']}>
                   <Flex gap={20} align={'center'}>
-                    <Box>
-                      {v.icon}
+                    <Box style={{ alignContent: 'center', alignItems: 'center' }}>
+                      {k + 1} {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
                     </Box>
-                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
+                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
                   </Flex>
                 </Paper>
               </Box>
@@ -96,7 +93,7 @@ function Page() {
         </SimpleGrid>
       </Box>
 
-      <Box px={{ base: 'md', md: 100 }} >
+      <Box px={{ base: 'md', md: 100 }}>
         <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Keterangan Bank Sampah Terdekat
         </Text>
@@ -107,66 +104,64 @@ function Page() {
           leftSection={<IconSearch size={20} />}
           placeholder='Cari Bank Sampah Terdekat'
         />
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2,
-          }}>
+        
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          {/* Left side - List of bank locations */}
           <Box>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 1,
-              }}
-            >
-              {bankSampah.map((v, k) => {
-                return (
-                  <Box key={k} px={20}>
-                    <Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
-                      <Flex gap={20} align={'center'}>
-                        <Box>
-                          {v.icon}
-                        </Box>
-                        <Box>
-                          <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
-                            {v.deskripsi}
-                          </Text>
-                          <Text fz={{ base: "md", md: "lg" }} c={'black'}>
-                            {v.alamat}
-                          </Text>
-                        </Box>
-                      </Flex>
-                    </Paper>
-                  </Box>
-                )
-              })}
-            </SimpleGrid>
+            <Paper p="md" bg={colors['white-trans-1']} radius="lg">
+              <Text fz="xl" fw="bold" mb="md">Daftar Bank Sampah</Text>
+              <Stack gap="md">
+                {data2?.map((v, k) => (
+                  <Paper key={k} p="md" withBorder radius="md">
+                    <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
+                    <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
+                    {v.lat && v.lng ? (
+                      <a
+                        href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: colors['blue-button'], textDecoration: 'none' }}
+                      >
+                        <Text fz="sm">📌 Buka di Google Maps</Text>
+                      </a>
+                    ) : (
+                      <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                    )}
+                  </Paper>
+                ))}
+              </Stack>
+            </Paper>
           </Box>
-          <Box style={{
-            position: 'relative',
-            width: '100%',
-            paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
-            height: 0,
-            overflow: 'hidden'
-          }}>
-            <iframe
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                border: 0
-              }}
-              loading="lazy"
-              allowFullScreen
-            ></iframe>
+          
+          {/* Right side - Single map showing all locations */}
+          <Box style={{ position: 'sticky', top: '20px' }}>
+            <Paper p="md" bg={colors['white-trans-1']} radius="lg" h="100%">
+              <Text fz="xl" fw="bold" mb="md">Peta Lokasi</Text>
+              {data2?.some(v => v.lat && v.lng) ? (
+                <Box style={{ height: '600px', width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
+                  <LeafletMultiMarkerMap
+                    center={[
+                      data2[0]?.lat || -8.3405,
+                      data2[0]?.lng || 115.0920
+                    ]}
+                    markers={data2
+                      .filter(v => v.lat && v.lng)
+                      .map(v => ({
+                        position: [v.lat, v.lng],
+                        popup: v.namaTempatMaps
+                      }))}
+                  />
+                </Box>
+              ) : (
+                <Text c="dimmed" fz="sm">Tidak ada koordinat yang tersedia</Text>
+              )}
+            </Paper>
           </Box>
         </SimpleGrid>
       </Box>
-    </Stack>
+    </Stack >
   );
 }
 
 export default Page;
+

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -1,71 +1,131 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconSearch, IconLeaf, IconTrophy, IconTent, IconChartLine, IconRecycle, IconTruckFilled, IconScale, IconClipboardTextFilled, IconTrashFilled, IconHomeEco, IconChristmasTreeFilled, IconTrendingUp, IconShieldFilled } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
+import { useProxy } from 'valtio/utils';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import React from 'react';
 
-const data = [
-  {
-    id: 1,
-    deskripsi: 'Lingkungan Sehat',
-    icon: <IconHomeEco size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 2,
-    deskripsi: 'Sumber Oksigen',
-    icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 3,
-    deskripsi: 'Ekonomi Berkelanjutan',
-    icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 4,
-    deskripsi: 'Mencegah Bencana',
-    icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
-  },
-]
 function Page() {
+  const state = useProxy(programPenghijauanState);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const { data, load, page, totalPages, loading } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  const iconMap: Record<string, any> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+  };
+
+  if (loading || !data) {
+    return (
+      <Stack py={20}>
+        <Skeleton h={500} radius="xl" />
+      </Stack>
+    );
+  }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Penghijauan Desa
+      <Box px={{ base: 'md', md: 100 }}>
+        <Box>
+          <Group justify="space-between" align='center' mt="md">
+            <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+              Program Penghijauan Desa
+            </Text>
+            <TextInput
+              radius="xl"
+              w={'30%'}
+              placeholder="Cari program atau kegiatan"
+              leftSection={<IconSearch size={20} />}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+            />
+          </Group>
+        </Box>
+        <Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
+          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }} pb={60}>
-        <Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
-          Manfaat Program Penghijauan
-        </Text>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 4
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper p={20} bg={colors['white-trans-1']}>
-                  <Stack flex={5}>
-                    <Center>
-                      {v.icon}
-                    </Center>
-                    <Box>
-                      <Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
-                    </Box>
-                    <Group justify='center'>
-                    <Button bg={colors['blue-button']}>Detail</Button>
-                    </Group>
-                  </Stack>
-                </Paper>
-              </Box>
-            )
-          })}
+        <Title order={2} c={colors['blue-button']} fw="bold" py={10} px={28} fz={{ base: 'lg', md: 'xl' }}>
+          Manfaat Program
+        </Title>
+        <SimpleGrid cols={{ base: 1, md: 4 }} spacing="lg" mt="md">
+          {data.map((v) => (
+            <Paper
+              key={v.id}
+              p="xl"
+              radius="xl"
+              bg={colors['white-trans-1']}
+              withBorder
+              style={{
+                backdropFilter: 'blur(10px)',
+                border: `1px solid rgba(255,255,255,0.2)`,
+                transition: 'transform 0.3s, box-shadow 0.3s',
+                cursor: 'pointer',
+              }}
+              onMouseEnter={(e) => {
+                const el = e.currentTarget;
+                el.style.transform = 'translateY(-8px)';
+                el.style.boxShadow = '0 15px 30px rgba(28,110,164,0.5)';
+              }}
+              onMouseLeave={(e) => {
+                const el = e.currentTarget;
+                el.style.transform = 'translateY(0)';
+                el.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
+              }}
+            >
+              <Stack align="center" gap="sm">
+                <Center>
+                  {iconMap[v.icon] && React.createElement(iconMap[v.icon], { size: 50, stroke: 1.5, color: colors['blue-button'] })}
+                </Center>
+                <Tooltip label={v.judul} withArrow position="bottom">
+                  <Text fz={{ base: 'md', md: 'lg' }} ta="center" c={colors['blue-button']} fw="bold">
+                    {v.name}
+                  </Text>
+                </Tooltip>
+                <Text fz="sm" ta="center" c="dimmed">
+                  {v.judul}
+                </Text>
+                <Button variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="sm" radius="xl" mt="sm">
+                  Pelajari Lebih Lanjut
+                </Button>
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
+        <Center mt="xl">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            color="blue"
+            radius="xl"
+          />
+        </Center>
       </Box>
     </Stack>
   );