API & UI Menu Lingkungan, Submenu Program Penghijauan

src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/edit/page.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
+import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+interface FormProgramPenghijauan {
+  name: string;
+  deskripsi: string;
+  judul: string;
+  icon: string;
+}
+
+type IconKey = 'ekowisata' | 'kompetisi' | 'wisata' | 'ekonomi' | 'sampah' | 'truck' | 'scale' | 'clipboard' | 'trash' | 'lingkunganSehat' | 'sumberOksigen' | 'ekonomiBerkelanjutan' | 'mencegahBencana';
+
+
+function EditProgramPenghijauan() {
+  const stateProgramPenghijauan = useProxy(programPenghijauanState)
+  const params = useParams()
+  const router = useRouter();
+  const [formData, setFormData] = useState<FormProgramPenghijauan>({
+    name: '',
+    deskripsi: '',
+    judul: '',
+    icon: '',
+  })
+
+  useEffect(() => {
+    const loadProgramPenghijauan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateProgramPenghijauan.update.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          stateProgramPenghijauan.update.id = id;
+
+          stateProgramPenghijauan.update.form = {
+            name: data.name,
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            icon: data.icon,
+          };
+
+          setFormData({
+            name: data.name,
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            icon: data.icon,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
+    }
+
+    loadProgramPenghijauan();
+  }, [params?.id]);
+
+
+
+  const handleSubmit = async () => {
+    try {
+      stateProgramPenghijauan.update.form = {
+        ...stateProgramPenghijauan.update.form,
+        name: formData.name.trim(),
+        deskripsi: formData.deskripsi.trim(),
+        judul: formData.judul.trim(),
+        icon: formData.icon.trim(),
+      }
+      await stateProgramPenghijauan.update.submit();
+      router.push("/admin/lingkungan/program-penghijauan");
+    } catch (error) {
+      console.error("Error updating program penghijauan:", error);
+      toast.error("Gagal memuat data program penghijauan");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Program Penghijauan</Title>
+          <TextInput
+            value={formData.name}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program Penghijauan</Text>}
+            placeholder="masukkan nama program penghijauan"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.target.value
+              })
+            }}
+          />
+          <TextInput
+            value={formData.judul}
+            label={<Text fz={"sm"} fw={"bold"}>Judul Deskripsi Program Penghijauan</Text>}
+            placeholder="masukkan judul deskripsi program penghijauan"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                judul: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateProgramPenghijauan.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Ikon Program Penghijauan</Text>
+            <SelectIconProgramEdit
+              value={formData.icon as IconKey}
+              onChange={(value) => {
+                setFormData((prev) => ({ ...prev, icon: value }));
+                stateProgramPenghijauan.update.form.icon = value;
+              }} />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramPenghijauan;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/[id]/page.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconEdit, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import programPenghijauanState from '../../../_state/lingkungan/program-penghijauan';
+
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramPenghijauan() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateProgramPenghijauan = useProxy(programPenghijauanState)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruck,
+    scale: IconScale,
+    clipboard: IconClipboard,
+    trash: IconTrash,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+  };
+
+  useShallowEffect(() => {
+    stateProgramPenghijauan.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateProgramPenghijauan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/lingkungan/program-penghijauan")
+    }
+  }
+
+  if (!stateProgramPenghijauan.findUnique.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Penghijauan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Penghijauan</Text>
+                <Text fz={"lg"}>{stateProgramPenghijauan.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Ikon Program Penghijauan</Text>
+                {iconMap[stateProgramPenghijauan.findUnique.data?.icon] && (
+                  <Box title={stateProgramPenghijauan.findUnique.data?.icon}>
+                    {React.createElement(iconMap[stateProgramPenghijauan.findUnique.data?.icon], { size: 24 })}
+                  </Box>
+                )}
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Deskripsi Program Penghijauan</Text>
+                <Text fz={"lg"}>{stateProgramPenghijauan.findUnique.data?.judul}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Program Penghijauan</Text>
+                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateProgramPenghijauan.findUnique.data?.deskripsi }}></Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramPenghijauan.findUnique.data) {
+                        setSelectedId(stateProgramPenghijauan.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateProgramPenghijauan.delete.loading || !stateProgramPenghijauan.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramPenghijauan.findUnique.data) {
+                        router.push(`/admin/lingkungan/program-penghijauan/${stateProgramPenghijauan.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateProgramPenghijauan.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus program penghijauan ini?"
+      /> 
+    </Box>
+  );
+}
+
+export default DetailProgramPenghijauan;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/create/page.tsx

@@ -1,53 +1,71 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import SelectIconProgram from '../../../_com/selectIcon';
+import programPenghijauanState from '../../../_state/lingkungan/program-penghijauan';
 
 
-function CreateProgramKreatifDesa() {
+function CreateProgramPenghijauan() {
+  const stateCreate = useProxy(programPenghijauanState)
   const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      deskripsi: "",
+      judul: "",
+      icon: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/lingkungan/program-penghijauan")
+  }
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={4}>Create Program Penghijauan</Title>
+          <Title order={3}>Create Program Penghijauan</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program Penghijauan</Text>}
+            placeholder="masukkan nama program penghijauan"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
+          />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
+            <Text fz={"sm"} fw={"bold"}>Ikon Program Penghijauan</Text>
+            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Program Penghijauan</Text>}
-          placeholder='Masukkan nama program penghijauan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Penghijauan</Text>}
-          placeholder='Masukkan deskripsi singkat program penghijauan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
-          placeholder='Masukkan jumlah'
+            onChange={(e) => stateCreate.create.form.judul = e.currentTarget.value}
+            label={<Text fw={"bold"} fz={"sm"}>Judul Deskripsi   Program Penghijauan</Text>}
+            placeholder='Masukkan judul deskripsi program penghijauan'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Penghijauan</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 
-export default CreateProgramKreatifDesa;
+export default CreateProgramPenghijauan;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailProgramPenghijauan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Program Penghijauan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Program Penghijauan</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"} >Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/lingkungan/program-penghijauan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailProgramPenghijauan;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx

@@ -1,53 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditProgramKreatifDesa() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Program Penghijauan</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Program Penghijauan</Text>}
-          placeholder='Masukkan nama program penghijauan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Penghijauan</Text>}
-          placeholder='Masukkan deskripsi singkat program penghijauan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
-          placeholder='Masukkan jumlah'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditProgramKreatifDesa;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -1,68 +1,163 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import HeaderSearch from '../../_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
-import JudulList from '../../_com/judulList';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconHomeEco, IconLeaf,
+  IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
+  IconTrashFilled,
+  IconTrendingUp,
+  IconTrophy,
+  IconTruckFilled
+} from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import programPenghijauanState from '../../_state/lingkungan/program-penghijauan';
+
 
 function ProgramPenghijauan() {
+  const [search, setSearch] = useState("");
   return (
-   <Box>
-    <HeaderSearch
-    title='Program Penghijauan'
-    placeholder='pencarian'
-    searchIcon={<IconSearch size={20}/>}
-    />
-    <ListManfaatPenghijauan/>
-   </Box>
+    <Box>
+      <HeaderSearch
+        title='Program Penghijauan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListProgramPenghijauan search={search} />
+    </Box>
   );
 }
 
-function ListManfaatPenghijauan() {
+function ListProgramPenghijauan({ search }: { search: string }) {
+  const listState = useProxy(programPenghijauanState)
+  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-          title='List Manfaat Program Penghijauan'
-          href='/admin/lingkungan/program-penghijauan/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) ||
+      item.judul.toLowerCase().includes(keyword) ||
+      item.icon.toLowerCase().includes(keyword)
+    );
+  });
+
+  const iconMap: Record<string, React.FC<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={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Program Penghijauan'
+              href='/admin/lingkungan/program-penghijauan/create'
+            />
+            <Table striped withTableBorder withRowBorders>
               <TableThead>
                 <TableTr>
+                  <TableTh>No</TableTh>
                   <TableTh>Nama Program Penghijauan</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Judul Deskripsi Program Penghijauan</TableTh>
+                  <TableTh>Ikon</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
-                    </Box>
-                  </TableTd>  
-                  <TableTd>
-                    <Image w={100}  alt="image" />
+            </Table>
+            <Text ta="center">Tidak ada data program penghijauan yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
+        <JudulList
+          title='List Program Penghijauan'
+          href='/admin/lingkungan/program-penghijauan/create'
+        />
+        <Box style={{ overflowY: 'auto' }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Program Penghijauan</TableTh>
+                <TableTh style={{ width: '35%' }}>Judul Deskripsi Program Penghijauan</TableTh>
+                <TableTh style={{ width: '10%' }}>Ikon</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
+                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.judul }}></TableTd>
+                  <TableTd style={{ width: '10%' }}>
+                    {iconMap[item.icon] && (
+                      <Box title={item.icon}>
+                        {React.createElement(iconMap[item.icon], { size: 24 })}
+                      </Box>
+                    )}
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/lingkungan/program-penghijauan/detail')}>
-                      <IconDeviceImacCog size={25} />
+                  <TableTd style={{ width: '15%', textAlign: 'center' }}>
+                    <Button onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${item.id}`)}>
+                      <IconDeviceImac size={25} />
                     </Button>
                   </TableTd>
                 </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
-  )
+  );
 }
-
 export default ProgramPenghijauan;