Fix Menu Lingkungan Darmasaba User

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;
+